diff --git a/everwith-claude-frontend/.gitignore b/everwith-claude-frontend/.gitignore
new file mode 100644
index 00000000..3657ae15
--- /dev/null
+++ b/everwith-claude-frontend/.gitignore
@@ -0,0 +1,9 @@
+node_modules/
+dist/
+# Copied by `npm run assets:sync` from the private handoff package (hash-verified).
+public/handoff/
+src/vendor/
+# Test output
+test-results/
+playwright-report/
+evidence/raw/
diff --git a/everwith-claude-frontend/ACCEPTANCE.md b/everwith-claude-frontend/ACCEPTANCE.md
new file mode 100644
index 00000000..3bd51371
--- /dev/null
+++ b/everwith-claude-frontend/ACCEPTANCE.md
@@ -0,0 +1,95 @@
+# 验收记录（A01–A24）
+
+> **性质：作者自查，不是独立验收。** 全部结果来自本仓库的自动化测试与证据文件，运行在云端 Linux 容器里的 **headless Chromium 141 + SwiftShader 软件 WebGL**（不是你的电脑、不是真实 GPU、没有真实输入法和声音输出）。所有服务都是浏览器内的本地 mock：**没有任何一项是 PASS-real**。
+
+- 代码版本（逐文件清单与重算方法见 `SOURCE_MANIFEST.txt`；不含 `node_modules/`、`public/handoff/`、`src/vendor/`、`dist/`、证据）：
+  - 应用代码 SHA-256 `fde68002697dd16e7292b4c6b1119b232fa57dd09a665c381a850102ea0dc670`（158 个文件，含 `public/generated/batch-01/` 的 46 个生成素材副本）——下面所有端到端结果都在这同一份应用代码的生产构建上取得。
+  - 测试代码 SHA-256 `cd1bc7b1b68a465aab785f10326d99acf376ff6b6da7bc87900c88a530f81fcd`（16 个文件）。
+- 验证日期：2026-10-14（接入生成素材后整套重跑；上一轮 2026-10-13 的证据已被这一轮替换）；Node 22.22.0 / npm 10.9；Playwright 1.56.0（Chromium revision 1194）
+- 单元/集成：`npm run check` → **54/54 通过**（5 个文件），TypeScript strict 无错误
+- 端到端：`npx playwright test` → **29/29 通过**（8 个 spec，明细与各自运行时间见 `evidence/reports/e2e-summary.json`）
+- 干净目录复现：**通过**——只复制源码与锁文件（180 个文件）到新目录 → `npm ci` → `assets:sync`（186 个文件、0 缺失、0 不匹配）→ `assets:check` → `assets:refs`（37 处引用、0 断链）→ `assets:generated`（46 个生成素材副本、0 问题）→ `check`（54/54）→ `build`（94 个 JS/CSS 与端到端所用构建逐字节相同）→ `dev` 首页、入口模块、Live2D 模型均 200。npm 使用本机已有缓存（依赖仍按 lockfile 的完整性哈希校验）
+
+状态含义：
+
+| 状态 | 含义 |
+|---|---|
+| **PASS(mock)** | 行为在本地 mock 适配器上经自动化测试通过；不代表真实服务端到端 |
+| **PASS(local)** | 纯前端行为（不依赖服务）经自动化测试通过 |
+| **PARTIAL** | 部分子项已验证；未验证子项写在“缺口”列 |
+| **MOCK** | 依赖的服务未接通，只有本地模拟 |
+| **UNTESTED** | 未验证 |
+| **FAIL** | 已知不满足 |
+
+## 逐项
+
+| ID | 状态 | 验证方式与证据 | 缺口 / 说明 |
+|---|---|---|---|
+| A01 | PASS(mock) | `core.spec` 首访落在发现页、标签筛选、搜索空态与“加载失败”文案不同、深链进入故事后 Back 回到原标签；游客直接开局三款游戏（`games.spec`）与故事（`story-create.spec`）；`extra.spec` 牌桌上登录取消后仍在同一局、命名框保留原名；刷新：私聊草稿、故事草稿、牌局刷新后同一 ID。截图 `discover-*.png`、`friend-naming-after-signin.png` | “加载更多”失败（`discover.append_error`）只有 mock 开关，未写自动化 |
+| A02 | PASS(mock) | 导航五个入口键盘可达（`keyboard.json` Tab 顺序）；`extra.spec` 已有好友时根路径落到好友页、最近记录“继续”回到原局同一 URL；发现页无热度/播放量等数字（目录数据里没有此类字段） | 页面完整度靠作者目检；“无空功能”未做自动化穷举 |
+| A03 | PASS(mock) | 单元：同 key 幂等、同 key 不同意图拒绝、同源两次加好友是两个人（编号 1/2）、重置后 epoch+1 旧会话只读、过期 epoch 改名被拒；`extra.spec` 临时牌友原位转好友（同一局、席位数不变）；`core.spec` 命名中途登录后名字恢复；资料弹窗显示来源、编号、epoch | “另建同源好友”的界面路径只做了手动走查，自动化在单元层 |
+| A04 | PARTIAL | 单元（jsdom 合成事件）：Enter 发送、Shift+Enter 换行、compositionstart/isComposing/keyCode 229/compositionend 后紧跟的 Enter 都不发送、选区加星号；`layout-a11y.spec` 用 CDP `Input.imeSetComposition` 合成输入法：组字中 Enter 不发送、上屏后 Enter 发送一次；中英切换见布局矩阵；输入框自动增高到上限后内部滚动 | **真实 macOS / Windows 中文输入法未测**（需要人工）；超长草稿只验证了 2000 字上限与自动增高，没做性能测量 |
+| A05 | PASS(mock) | `edge.spec`：双击发送只产生一轮且第二击不会触发替换出来的“停止”（组件同样有单测）；停止与提交赛跑 → 提示“已完成”并保留结果；`core.spec`：结果未知先“查询原请求”、可重试失败后“重试同一条”只一轮；停止后半段不进入记录且原文放回输入框；登录过期时原文放回、无记录 | 断线只用 mock 丢回执模拟，没有真实网络中断 |
+| A06 | PARTIAL | `edge.spec`：重试后旧 run 的晚到帧被拒（页面显示“已拒绝 2 个旧 run 的晚到帧”，旧片段不出现）；另一窗口先提交（stale head）→ 读最新、草稿保留、不自动重发；好友在别处被重置 → epoch 变化提示、旧会话只读可回看；生成中离开页面再回来只有一轮；单元：run_epoch 检查 | 生成中途切换账号、两个标签页并发的真实竞态未做自动化 |
+| A07 | PARTIAL | `edge.spec`（1280×640）：回复流式到达时滚到最上方，`scrollTop` 全程保持 0，出现“n 条新消息”按钮；打开/关闭侧栏、打开/关闭资料弹窗、刷新后：阅读锚点相同、草稿与选区（3–5）保留；报告 `chat-reading-position.json` | 私聊里没有图片消息功能（本地 mock 无图片回复），“图片往返”不适用；“放大往返”只在角色页验证了 Live2D 放大，没有专门测私聊滚动 |
+| A08 | PASS(local) | 单元：`*动作*` 标记、奇数个反斜杠转义星号、偶数个保留且星号仍生效、段内段外同一规则、未闭合/空星号保持原样、HTML 作为文本显示不执行、换行保留 | — |
+| A09 | PARTIAL | mock 服务端强校验：只能替换开放角色、同一好友只能一个角色、锁定角色不可替换、AI ≤ 10；单元覆盖前三项与“入局好友不带私聊内容”（私聊里的秘密词不出现在故事数据里）；准备页确认前不建记录（`story-create.spec`） | 两个本地故事都只有 3 个角色，“十个 AI 上限”只有服务端校验没有界面压力测试；“角色能力适配”只用了 Live2D 可用性和角色是否可替换，没有更细的能力模型 |
+| A10 | PARTIAL | `story-create.spec`：只有整轮校验通过才提交，状态（线索/目标）与正文同一 revision；“继续剧情”不生成玩家发言；回退后正文与状态一起撤回、该轮输入回到草稿、revision 递增；校验失败不留半轮、可重试同一轮；单元：入局好友被重置后该局只读、拒绝新回合 | **故事内“纠错”未实现**（私聊里有“纠正事实”）；故事内的 Reset/移除角色没有单独入口，只通过好友重置→本局只读体现 |
+| A11 | PASS(mock) | `games.spec` 三款游戏都是准备页明确“开始”；暂停 AI 2.5 秒 revision 不动；刷新后同一 ID、离开期间后续行动暂停并提示；原桌再开保留同一批人（Royale）；`edge.spec`：开局回执丢失 → 按原 key 查到唯一一局；打开不存在的局 → 报错 + 重试/最近，不建替代局 | — |
+| A12 | PASS(mock) | `games.spec`：开关侧栏、沉浸、浏览器全屏后仍是同一个已挂载的牌面节点（DOM 标记未丢）、同一 URL、暂停期间 revision 不变；`edge.spec`：浏览器拒绝全屏 → 提示并保留布局；规则弹窗 Esc 两次只关一层、焦点回到“规则”按钮，沉浸中仍能掷骰并推进 revision | 全屏在 headless 下由 Chromium 模拟；没有在真实浏览器窗口里人工确认 |
+| A13 | PASS(mock) | 冻结引擎 2–5 人完整对局（单元）；`games.spec` 新界面 4 人三轮到最终结算，玩家席位只靠点击可见按钮，正常速度录屏 `evidence/videos/royale-full-game.webm`（316 秒），结果 `reports/game-royale.json`：r149 结束、玩家 30 次操作、用过“过”、四人总值 34万/45万/62万/58万、胜者 2 号席（Arthur）；`reports/game-royale-rematch.json` 原桌再开同名新会话 | NPC 是固定策略 mock |
+| A14 | PASS(mock) | 冻结引擎完整对局 + v1 旧存档按原规则完成（单元）；`games.spec` 4 人到 15 分后补齐本轮，过程中用到预留与归还，录屏 `videos/splendor-full-game.webm`（378 秒），结果 `reports/game-splendor.json`：r123 结束、玩家 30 次操作、用过预留与归还、Lena 得到 2 位贵族、得分 15/17/7/14（玩家先到 15 分，补齐本轮后 Lena 17 分）、胜者 1 号席（Lena）；`extra.spec` v1 旧存档打开后按 v1 合法动作继续 | — |
+| A15 | PASS(mock) | 单元：射月、失败 CABO +5、叫牌者并列最低获胜、恰好 100 重置为 50 一次、>100 终局；`games.spec` 4 人累计到 >100 终局（开局窥牌→确认盖回→抽牌/换牌/弃牌/能力/叫 CABO 均通过可见按钮），录屏 `videos/cabo-full-game.webm`（564 秒），结果 `reports/game-cabo.json`：5 轮、r274 结束、玩家 73 次操作、玩家叫过 CABO、用过偷看/窥探/盲换三种能力、累计 126/102/37/38（玩家与 Lena 超过 100 终局）、胜者 2 号席（Arthur，37）；组件假设（“临时组件假设（未核实）”与能力点数）在牌桌、规则与准备页可见 | 组件档案本身是 provisional（交接包如此标注）；录屏这一局：玩家第 2 轮叫 CABO 失败（39 → +44，含 +5），NPC 做过多张匹配交换（Marcus 第 3 轮只剩 3 张）；“恰好 100 重置/射月”只在单元测试覆盖，这一局没有出现（玩家累计 17→61→76→95→126） |
+| A16 | PASS(mock) | 响应校验拒绝含 `truth/rng/seed/up/lastAction` 的投影；单元：对手盖牌只渲染牌背、无数字，自己已知牌只有“已知”标记；他人暗预留只显示等级牌背、无卡 ID；`edge.spec` 桌聊台词失败时 revision 不变；`games.spec` 结束后桌聊比分不变；NPC 只用本席投影做决定 | 角色“只取本席可见候选”在 mock 里成立；**JEV 未接通**（MOCK） |
+| A17 | PASS(mock) | `games.spec`：正常结果后可桌聊、比分与 revision 不变；原桌“再来一局”同名同席位、新会话 ID、旧结果仍在最近；`extra.spec`：放弃本局 → “已放弃 · 未完成（只读）”、不编造胜者、最近里标“已放弃（未完成）”；原桌再开沿用同一批席位身份，从发现/准备页开局则为临时陪玩生成新身份（mock 服务端每局随机 identity） | “新身份”只在 mock 服务端代码与 rematch 报告层面确认，没有单独的界面断言 |
+| A18 | PARTIAL | `live2d.spec` 五位角色逐个：角色页放大后的 1× 大脸截图、30 秒 5 Hz 采样（帧差、首/中/尾缩略图）、happy/surprised/neutral 表情由运行时回报、通道清单无眼球通道（Nora gaze OFF，其他角色也不写眼球）；`edge.spec` 停止后表情回到“平静” | 采样 151–152 帧/30 秒（5.0 fps），94.0–99.3% 的相邻采样有变化；软件 GL 下平均帧耗时 40–93 ms（上一轮是 24–53 ms；同一构建上开/关房间背景、滤镜和底部渐暗的 A/B 对照没有可分辨的差别，差异来自软件 GL 的波动，见 `live2d-backdrop-ab.json`）；**“自然”“可辨”需要人工目检**，自动化只证明持续在动、无冻结、表情状态切换正确 |
+| A19 | PARTIAL | `extra.spec`：模型缺失 → 同一角色静态图 + “动态形象不可用”，图片缺失 → 中性占位，不用别的角色顶替，聊天照常；`art.spec`：图片缺失时生成的房间背景、封面、插画、头像同样安静消失（无破图、品牌回到字母）；私聊页写明“无语音服务：文字为准，嘴型只跟随明确标注的演示音轨” | **口型只接了本地演示音轨，未做“跟实际音频/静默闭嘴”的自动化测量**；TTS 为 MOCK/未接通 |
+| A20 | PASS(local) | `live2d.spec` 生命周期：五角色来回切 10 次只剩 1 个活跃运行时、离开后 0 个且创建数=销毁数；放大往返 4 次；隐藏标签页不绘制、恢复后继续；离屏暂停、回到屏幕继续；牌桌侧栏开关 6 次无残留；WebGL context loss 后恢复并继续出帧；帧耗时与 JS 堆记录在 `live2d-lifecycle.json` | 内存只记录了 JS 堆，没有 GPU 显存；软件 GL |
+| A21 | PASS(mock) | `story-create.spec`：创作空态 → 选类型 → 命名 → 编辑（模板改稿可撤销）→ 必填项不全不能试演 → 隔离试演可聊 → 改规则后提示“需要重新试演” → 登录后保存 v1 → 明确开启分享 → 用 v1 加好友聊天；试演内容不进入正式好友会话 | “AI 改稿”是本地模板，不是模型 |
+| A22 | PASS(local) | `layout-a11y.spec`：1024/1280/1440/1920 × 中/英 × 5 个页面共 40 张截图，横向溢出 0；200% 缩放（CSS 640×400、720×450 @2x）无横向溢出、牌桌按钮可达；跳转链接、Tab 顺序进入主内容、Esc 逐层关闭并归还焦点、Shift+Tab 反向；系统“减少动态”下动画时长降到 0.00001 s 且仍可操作 | 移动端未做（交接要求单列后续）；真实浏览器缩放用等效视口模拟 |
+| A23 | PASS(local) | 干净目录：只复制源码与锁文件 → `npm ci` → `assets:sync`（按包内 SHA256SUMS 逐个核对 186 个文件）→ `assets:check` → `assets:refs`（代码引用 37 处无断链）→ `assets:generated`（46 个生成素材副本 sha256 与代码引用全部一致）→ `check` → `build` → `dev` 首页 200；`docs/ASSET_LOCK.json` 每个交接包素材有相对路径、字节数、sha256、权利标签，`docs/GENERATED_ASSETS.json` 每个生成素材有原图与副本 sha256、prompt、权利标签 | — |
+| A24 | PASS(local) | README “Mock 与真实服务”表 + `src/api/adapter.ts` 的 `REAL_ADAPTER_GAPS`（账号页也显示）；交接包的候选游戏封面未作默认（游戏海报改用用户提供的生成封面，来源与权利见 `docs/GENERATED_ASSETS.md`，一行可切回交接包海报）；账号页列出两类素材来源与权利标签；交付包秘密扫描（.env、私钥、token 样式、原机绝对路径、cookie/session 文件）结果见 `SECRET_SCAN.txt` | — |
+
+## 最终验证中发现并已修复的问题
+
+新增的边界测试在最后一轮里抓到了下面几处真实缺陷，均已修复并重新验证：
+
+1. **Live2D 共享渲染循环会整体停摆**：某一帧抛异常（例如绘制恰好撞上 WebGL context loss）时，异常冒出单一 RAF 循环，之后所有舞台都不再出帧（context-loss 用例失败）。现在每个运行时的帧单独 try/catch、绘制前检查 `isContextLost()`，连续失败才降级为静态图。
+2. **私聊发出后立刻离开页面，消息会凭空消失**：卸载时把已经发出的发送请求也中止了。现在离开只中止展示用的流，已发出的请求照常完成；回来时看到一轮已提交的回复（`edge.spec`）。
+3. **离开页面时草稿防抖写入被丢弃**：回来会冒出更早的旧草稿。现在卸载时立即写入最新草稿。
+4. **双击发送**：发送按钮原位变成“停止”，双击的第二下会把刚发出的消息停掉。现在忽略双击的第二击（`event.detail > 1`），单独再点一次仍可停止。
+5. **（仅测试驱动）CABO 整局脚本会卡死**：点“继续”后按钮在 hold 请求返回前仍带着 `continue-ai`，脚本可能等待一个已经变成“暂停 AI”的按钮。已改为不阻塞的恢复步骤并给所有动作加 20 秒超时；应用代码未改。
+
+已知小问题（未修）：牌桌“继续”按钮的 hold 请求如果失败，没有错误提示（界面保持暂停，可再点一次）。
+
+## 生成素材接入（2026-10-14，batch-01）
+
+- **收到与核对**：Dropbox `generated-assets/batch-01/` 共 45 个素材位、59 张 PNG；逐张与批次自带的 `SHA256SUMS.json`、`manifest.json` 一致；逐张目检：无文字/数字/水印/人物，透明图确有 alpha。工具记录为 GPT 内置图片工具，模型名未披露。
+- **选用**：A/B 两版一律选 `__a`；生成 46 个网页副本（只缩放、转 WebP/PNG；浏览器图标把圆角外的纯黑角改透明），放在 `public/generated/batch-01/` 随源码提交；`docs/GENERATED_ASSETS.json` 记录每张原图与副本的 sha256、实际 prompt、QA 结论、未用候选，`docs/GENERATED_ASSETS.md` 是人读版。重新从原图生成得到逐字节相同的 46 个文件。
+- **权利标签**：“用户经 GPT 生成并提供；商用/再分发权未核实”（与交接包素材的“用户授权私人交接；商业/再分发权未核实”分开记录，账号页“素材来源”里也写明）。
+- **接到哪里**：
+  - 故事：竖封面（发现卡 4:5、准备页 3:4、最近/继续/一起玩缩略图）、横封面（详情页 4:3）；8 张逐拍场景——会话状态新增 `scene_position`（按审过的 5:1 横条定位）与 `scene_label`（地点名，中英文），开场用第一拍的场景，每次提交的节拍切换，《末班车之后》最后一拍之后的自由行动到“站台 · 天亮”；回退时场景随正文一起退回；旧存档里的旧场景键按回合重新推出。
+  - 角色舞台：五位角色各自的房间 + 通用房间（自创角色），在 Live2D 画布与静态图下面一层；角色页、私聊、牌桌侧栏、故事左栏、发现页角色卡、好友列表头像底都用同一组件。
+  - 游戏：三张封面成为默认海报（发现 1:1、准备页 3:4、一起玩与最近缩略图）；悬停预览短片仍是交接包的；交接包 480×480 海报仍同步在本地，`src/mock/catalog.ts` 改一行即可切回。
+  - 状态：好友（未登录 / 没有好友）、最近、创作、找不到、加载失败（发现页、各详情页）、需要登录（含登录弹窗）；新建作品弹窗的两张类型插画。
+  - 作品封面：新作品默认得到一张（按作品 id 稳定选择），编辑页可换；草稿只存 id，服务端只接受 6 个预设 id。
+  - Persona 头像：账号页可选 8 个物件头像或不用；只存 id、服务端只接受预设 id、不传时保留原值；显示在导航与自己的牌桌/准备页席位。
+  - 品牌标记（导航、首次加载）与浏览器 / 主屏图标。
+- **为接入做的视觉调整**：静态备用图从“完整缩放居中”改为“从顶部铺满、底部渐隐”，舞台底部加一层渐暗——原来的剪影下沿放到房间背景前会很突兀（Live2D 正常时不受影响，`live2d.spec` 只读画布像素）。
+- **验证**：单元新增 8 项（场景随节拍、旧场景键、记录缩略图、头像/封面只收预设 id、舞台背景选择与关闭、缺图路径改写、加载失败即消失）；新增 `art.spec` 3 项（用到的生成图在视口内全部真实加载、场景顺序、头像与封面选择刷新后仍在并出现在别处、“图片素材缺失”下 7 个页面无破图且不显示任何生成图）；`story-create.spec` 增加场景切换/回退与自创角色用通用背景的断言；`npm run assets:generated` 核对 46 个副本与代码引用。
+
+## 视觉对照（新旧截图）
+
+`evidence/screenshots/compare/*-pair.jpg` 把交接包 `baseline/screenshots` 的旧截图与新界面同页面、同语言（英文）、同视口尺寸并排放置。**这不是“同一局面”的严格对照**：旧截图是原产品历史合成 QA 的目录/牌桌（玩家数与牌面都不同），新界面是本地 mock 数据，只能用于对比信息结构与布局，不能证明视觉连续性。
+
+## 未完成 / 需要人工
+
+1. 真实中文输入法（macOS / Windows）人工走查（A04）。
+2. 口型与实际音频的同步测量、静默闭嘴（A19）；TTS、viseme 服务未接通。
+3. 故事内“纠错”（A10）。
+4. 全部真实服务（账号、目录、好友、私聊 Luna、故事叙事、桌游 JEV、创作、TTS）——只有 mock 与真实适配器开关，没有任何真实接入。
+5. 真实 GPU、真实显示器下的 Live2D 观感与帧率；“动作是否自然”的人工判断（A18）。
+6. 同局面的新旧视觉对照（需要原产品可运行并导出同一局面）。
+7. 移动端专项。
+8. 独立验收（本文件是作者自查）。
+9. 生成素材的权利：用户经 GPT 生成并提供，商用/再分发权未核实，模型名未披露；只适合这次私人演示。自创角色仍没有立绘（中性占位），自创故事没有场景图；生成图在真实显示器上的观感需要你目检。
diff --git a/everwith-claude-frontend/README.md b/everwith-claude-frontend/README.md
new file mode 100644
index 00000000..a0cbcb76
--- /dev/null
+++ b/everwith-claude-frontend/README.md
@@ -0,0 +1,147 @@
+# Everwith · Claude 独立重建前端（本地演示）
+
+依据 Dropbox `/Everwith_Claude_Frontend_Handoff_2026-10-13`（00–10 文档、`reference/`、`assets/`、`verification/`）新建的**独立、可运行**桌面网页前端。不修改原产品，不读取原项目 `.env`/会话/数据库，不连接任何真实服务。
+
+- **完整功能面**：发现（全部/角色/世界/游戏、搜索、空态/失败态区分）、好友、角色详情（明确加好友+命名、同源多好友）、一对一私聊（流式段落、停止、可重试、结果未知查询、晚到旧流丢弃、回退/纠错/重命名/重置/移除）、故事详情→准备→游玩（场景/文字、已知状态、继续剧情、回退、局中加好友）、三款桌游（Royale / Splendor / CABO：准备→明确开始→完整对局→结果→原桌再开）、最近（逐局记录、继续/回看/归档/删除）、创作（类型→命名→编辑→AI 模板改稿可撤销→隔离试演→保存版本→显式分享→用版本加好友）、账号（邮箱密码、Persona、中英切换、减少动态）。
+- **五位角色 Live2D**：Lena / Arthur / Marcus / Nora / Iris，Cubism Core 6.0.1 + Framework（来自交接包），冻结的 verified frame writer 单写者、表情眨眼换脸、口型只跟演示音轨、Nora 不写眼球（gaze OFF）、离屏/后台暂停、销毁释放、context loss 恢复。
+- **生成素材（GPT batch v2-batch-01）**：故事封面与逐拍场景、五位角色各自的房间背景（Live2D 后面）、三款游戏封面、空/错/登录状态插画、Persona 头像、作品封面、品牌标记与图标。来源、哈希与 prompt 见 `docs/GENERATED_ASSETS.md`；权利标签“用户经 GPT 生成并提供；商用/再分发权未核实”。
+- **全部服务都是本地 mock**：界面与 API 之间只有一个适配层（`src/api/adapter.ts`）。默认在浏览器内运行模拟服务端（数据存 `localStorage`），所有页面带“本地演示”标识，桌游标“规则模拟陪玩”，故事标“本地模拟叙事”。**没有任何真实 Luna/JEV/TTS/账号/存储接入。**
+
+## 版本
+
+| 项 | 版本 |
+|---|---|
+| Node.js | ≥ 20.19（验证于 22.22.0），npm 10.9 |
+| React / React DOM | 19.2.0 |
+| Vite / @vitejs/plugin-react | 7.1.12 / 5.1.0 |
+| TypeScript | 5.9.3（strict） |
+| Vitest / jsdom / Testing Library | 4.0.6 / 27.0.1 / 16.3.0 |
+| Playwright | 1.56.0（Chromium 141，revision 1194） |
+| 图标 | lucide-react 0.545.0 |
+
+所有版本在 `package.json` 中精确锁定，`package-lock.json` 已提交。
+
+## 干净环境启动
+
+```bash
+cd everwith-claude-frontend
+npm ci                                   # 安装锁定依赖
+
+# 1) 从交接包按字节复制素材（不下载、不转码），并用包内 SHA256SUMS 逐个核对
+npm run assets:sync -- --from "/path/to/Everwith_Claude_Frontend_Handoff_2026-10-13"
+#    也可用环境变量：EVERWITH_HANDOFF_DIR=/path/to/handoff npm run assets:sync
+npm run assets:check                     # 只重新计算 hash，不复制
+npm run assets:refs                      # 检查代码里写死的素材路径没有断链
+npm run assets:generated                 # 核对随源码提交的生成素材（public/generated）sha256 与引用
+
+# 2) 开发
+npm run dev                              # http://127.0.0.1:5173
+
+# 3) 检查与构建
+npm run check                            # tsc --noEmit + 全部单元测试
+npm run rules:check                      # 三款冻结引擎完整对局 + 投影不泄密检查
+npm run build                            # tsc + vite build → dist/
+npm run preview                          # http://127.0.0.1:4173（生产构建）
+
+# 4) 端到端（Playwright，自动 build + preview）
+npx playwright install chromium          # 本机首次需要
+npm run test:e2e                         # 全部 29 项，约 45 分钟（三局完整对局正常速度录屏约 22 分钟）
+npm run test:e2e:quick                   # 跳过 @long（完整对局、Live2D 30 秒采样、四宽度矩阵）
+```
+
+`assets:sync` 会生成 `public/handoff/`（≈135 MB，186 个文件）和 `src/vendor/cubism-framework/`（Cubism Framework TypeScript 源码，由 Vite 编译）。这两个目录**不随源码打包**（`.gitignore` 已排除），必须由上面的命令从交接包复制。若素材缺失，应用会退化为同一角色静态图/中性占位/文字，并明确显示“动态形象不可用”，聊天与规则仍可用。
+
+生成素材的网页副本（`public/generated/batch-01/`，46 个文件，约 3.9 MB）**随源码提交**，不需要同步。它们是 Dropbox `generated-assets/batch-01/` 原图的缩放副本；想从原图重新生成：`python3 -I scripts/derive-generated.py --from "<…>/generated-assets/batch-01"`（需要 Pillow，可选）。
+
+## 目录
+
+```
+src/
+  api/            适配层（mock / real）、类型化客户端、响应校验（拒绝含 truth/rng/seed 的桌游投影）
+  contracts/      从 reference/contracts 移植的协议解析器（private-public-segments.v1 等）
+  mock/           本地模拟服务端：账号、目录、好友、私聊（NDJSON 流）、故事、桌游权威状态、记录、创作、场景开关
+  games/engines/  三款游戏的冻结纯引擎（与交接包逐字节一致，见 PROVENANCE.json）+ 新增 .d.ts
+  live2d/         运行时、导演（单 RAF）、表演器、冻结 frame writer / Iris carrier 单位、舞台组件（静态图下面一层是角色房间背景）
+  art/            生成素材登记（背景、状态插画、作品封面与 Persona 头像的 id → 路径；只做呈现，不参与身份）
+  chat/           私聊控制器（generation/receipt/retry/lookup）、IME 安全输入框、安全富文本
+  features/       各页面（discover / friends / character / chat / story / games / recent / create / account / mock）
+  styles/         设计令牌与页面样式（无 CSS 框架）
+scripts/          assets:sync / assets:check / assets:refs / assets:generated（check-generated.mjs）/ derive-generated.py（可选，从原图生成网页副本）
+public/generated/ 生成素材网页副本（随源码提交）
+tests/            Vitest 单元与集成测试
+e2e/              Playwright 端到端（证据写入 evidence/）
+evidence/         截图、录屏、Live2D 采样、JSON 报告（本次运行产物）
+docs/ASSET_LOCK.json   复制素材清单（相对路径、字节数、sha256、权利标签）
+docs/IMAGE_GENERATION_REQUESTS.md   图片生成需求单 v2（已交付并接入）
+docs/GENERATED_ASSETS.md / .json     生成素材接入记录：每张用在哪里、原图与副本 sha256、实际 prompt、未用候选
+```
+
+## Mock 与真实服务
+
+| 层 | 当前状态 |
+|---|---|
+| 账号 | **MOCK**：邮箱+密码（加盐 SHA-256，仅避免明文存储，不是生产认证），游客→登录后安全归并，无找回 |
+| 目录/发现 | **MOCK**：5 位官方角色、2 个故事、3 款游戏；无伪热度 |
+| 好友 | **MOCK**：幂等 key、epoch/重置/移除、来源版本 |
+| 私聊回复 | **MOCK**：本地固定回复片段（`simulated_fixed_reply`），流式分段帧、可停止/重试/晚到旧流 |
+| 故事叙事 | **MOCK**：固定剧情节拍，整轮校验后原子提交（“本地模拟叙事”） |
+| 桌游 NPC | **MOCK**：冻结引擎自带的固定策略，只用本席投影（“规则模拟陪玩”）；**JEV 未接通** |
+| 创作“AI 改稿” | **MOCK**：本地模板（不调用模型），可撤销 |
+| 语音/口型 | 仅本地演示音轨驱动口型；**无 TTS/viseme 服务** |
+
+真实适配器开关（只写名称，不提供任何密钥）：
+- `VITE_EVERWITH_ADAPTER=real` 选择网络传输；
+- 同时还必须设置 `VITE_EVERWITH_ALLOW_NETWORK=1` 才会真正发请求；`VITE_EVERWITH_API_BASE` 为可选前缀；
+- 未开启网络时所有请求返回 `real_adapter_not_enabled` 并在页面顶部显示红色提示，**不会静默回落到 mock**。
+
+接真实服务前的已知缺口（同时显示在“账号与设置”页）：账号形状与 CSRF 引导、`/discover` 等候选端点、好友 rename/reset/remove 与 origin 绑定、私聊 `{operation, admission}`/receipt/public-stream、全部 story-sessions、game-sessions 与 JEV 决策接缝、works/previews、TTS。详见 `src/api/adapter.ts` 的 `REAL_ADAPTER_GAPS`。
+
+### 演示场景开关
+
+左侧导航“演示控制”（桌游牌桌内为工具栏烧瓶按钮）可打开以下场景，用来走异常分支（一次性场景被下一个相关请求消费）：
+
+`chat.retryable_failure`、`chat.commit_before_cancel`、`chat.unknown_result`、`chat.late_old_stream`、`chat.stale_head`、`chat.friend_reset_elsewhere`、`auth.expired`、`auth.forbidden`、`net.slow`、`discover.error`、`discover.append_error`、`live2d.model_missing`、`assets.missing`、`game.text_failed`、`game.unknown_start`、`story.retryable_failure`。面板里还可以导入一个 Splendor v1 旧存档样例（按 v1 原规则继续）和清空本地数据。
+
+## 素材与权利
+
+两类来源，分开记录，界面“账号与设置 → 素材来源”里也写明：
+
+**交接包素材**
+- **逐字节复制**并按包内 `verification/SHA256SUMS.txt` 核对；未生成、未缩放、未重新编码。清单见 `docs/ASSET_LOCK.json`（每项含相对路径、字节数、sha256、权利标签）。
+- 权利标签：**“用户授权私人交接；商业/再分发权未核实”**。仅用于本次私人交接与本地演示，不得公开发布或商用。
+- 用途：角色头像与 feed 图（`assets/companions/portraits|feed`）、游戏悬停预览视频（`game-previews/v1`）、Live2D 五个冻结运行时（`assets/live2d`）、Cubism Core/Framework（`assets/runtime/cubism`，Live2D 许可文本随附）、Royale 赌场插画 atlas r7 与钞票纹样、Splendor 文艺复兴卡面/贵族/牌背/宝石/台布、CABO 14 张点数插画与牌背（manifest 校验后使用）。交接包的候选游戏封面没有用作默认。
+
+**生成素材（GPT batch v2-batch-01，用户经 GPT 生成并提供）**
+- 45 个素材位 / 59 张图，按批次自带的 `SHA256SUMS.json`、`manifest.json` 核对后，只做缩放和格式转换（WebP/PNG）；A/B 两版一律选 a。逐张记录见 `docs/GENERATED_ASSETS.md`（人读）与 `.json`（含原图/副本 sha256、实际 prompt、QA 结论、未用候选）。
+- 权利标签：**“用户经 GPT 生成并提供；商用/再分发权未核实”**。同样只用于本次私人演示。
+- 用途：故事竖/横封面与 8 张逐拍场景（场景横幅按审过的 5:1 区域定位，并显示地点名）、五位角色各自的房间背景 + 通用背景（Live2D 与静态图下面一层，缺图时回到原来的渐变）、三款游戏封面（默认海报；交接包原海报仍在，`src/mock/catalog.ts` 一行切回）、六张状态插画、两张新建类型插画、六张作品封面（作品草稿只存 id）、八个 Persona 头像（物件，不是人像，只存 id）、品牌标记与浏览器/主屏图标。
+- “图片素材缺失”场景同样覆盖生成素材：全部安静消失、显示原来的渐变/字母/图标，不出现破图，也不拿别的角色顶替。
+
+规则数字、骰点、钞票金额、筹码、卡牌数字与 6/9 标记、能力文字、场景地点名全部由代码绘制，图片只提供插画。
+
+## 冻结来源（未改动的部分）
+
+- `src/games/engines/**/*.js|ts`：Royale `engine.ts`、Splendor `data.js / engine.js / rules.js / rules-v2.js / npc.js`、CABO `engine.js / core.js / rule-evidence.js`——与 `reference/games` 逐字节一致（`npm run rules:check` 会重新计算 hash）。
+- `src/live2d/verified-frame-writer.ts`、`carrier-parameter-units.ts`：逐字移植。
+- `src/contracts/public-events.ts`、`dialogue-expression-client.ts`：逐字移植；其余合约文件只改了 import 路径。
+
+## 测试与证据
+
+- `npm run check`：TypeScript strict（含 e2e 目录）+ Vitest 54 项：
+  - `engines.test`：冻结引擎与交接包逐字节一致；三款游戏 2–5 人完整对局、Splendor v1 旧存档按原规则完成、未知规则档案拒绝升级、CABO provisional 标注；
+  - `cabo-rules.test`：射月、失败 CABO +5、叫牌者并列最低获胜、恰好 100 → 50 一次、>100 终局；
+  - `mock-api.test`：好友幂等/同源多人/epoch 重置、私聊控制器（提交一次、并发发送拒绝、可重试同一操作、结果未知查原 key、停止输给提交、旧 run 晚到帧、真实取消）、开局幂等与查询、一个好友一个席位、故事选角限制、入局好友不带私聊内容、好友重置后故事只读、创作草稿 base revision 与分享前置；生成素材接线（故事封面、逐拍场景与开放模式结尾地点、旧存档场景键回推、记录缩略图、Persona 头像只收预设 id、作品封面默认值与校验）；
+  - `richtext-router.test`：`*动作*` 与奇偶反斜杠转义、HTML 不执行、换行保留；路由与旧深链；
+  - `components.test`：IME 合成事件不发送、选区加星号、双击发送只一次且第二击不触发“停止”、CABO/Splendor 不渲染未知值；舞台背景按角色选择（自创角色用通用背景、可关闭）、缺图场景路径改写、背景/插画加载失败时直接消失。
+- `npx playwright test`（生产构建 + Chromium；Linux 下 SwiftShader 软件 WebGL）——本次 29/29 通过：
+  - `art.spec`：生成素材在用到的地方都真实加载（视口内逐张检查 naturalWidth）、故事场景随提交的节拍切换并在开放模式到达结尾地点、记录缩略图、状态插画、新建类型插画、图标；Persona 头像与作品封面选择后刷新仍在并出现在导航/席位/作品卡；“图片素材缺失”下七个页面无破图、无生成图、品牌回到字母。
+  - `core.spec`：发现页、搜索空态 vs 加载失败、深链与 Back；加好友中途登录、名字恢复、私聊发送/草稿刷新保留/停止/可重试/结果未知；好友“一起玩”进入桌游准备。
+  - `story-create.spec`：故事开局、整轮提交、继续剧情不伪造玩家发言（场景随节拍切换）、回退恢复草稿（场景一起退回）、可重试失败、局中把当前人物加为好友；创作全流程（试演不进入正式会话；自创角色私聊用通用背景）。
+  - `extra.spec`：牌友原位转好友、登录取消不丢位置、放弃本局只读；最近“继续”回到原局、回访落到好友页、Splendor v1 旧存档；模型/图片缺失降级；Shift+Tab。
+  - `edge.spec`：双击发送、停止输给提交、停止后表情回中性、旧 run 晚到帧、另一窗口先提交、好友在别处重置、生成中离开、登录过期；阅读旧消息不被拉底与阅读位置/草稿/选区保留；开局回执丢失、打开不存在的局、桌聊台词失败；拒绝全屏/两次 Esc 后牌桌仍可操作。
+  - `layout-a11y.spec`：1024/1280/1440/1920 × 中/英无横向溢出（@long）、200% 缩放、跳转链接/Tab/Esc/焦点归还、减少动态、CDP 合成 IME。
+  - `live2d.spec`（@long）：五位角色 1× 大脸、≥4 fps 采样 30 秒、表情、通道清单无眼球写入；切换/放大/隐藏标签页/离屏/牌桌侧栏的资源释放与暂停、WebGL context loss 恢复。
+  - `games.spec`（@long）：Royale 4 人三轮、Splendor 4 人 15 分补齐轮、CABO 4 人累计 >100，**正常速度录屏**，局中检查暂停/侧栏/沉浸/全屏/刷新后同一局继续、结束后可聊且锁分、原桌再开。
+- 证据目录 `evidence/`：`screenshots/`（含 `matrix/` 40 张、`zoom200/`、`compare/` 新旧并排）、`videos/`（三局完整录屏 .webm）、`live2d/<角色>/`（大脸、表情、采样帧、帧差）、`reports/*.json`。
+
+所有截图与录屏都来自云端容器里的 headless Chromium（软件 WebGL、无声音、无真实输入法），不是你本机的真实浏览器；验收逐项状态与未完成项见 `ACCEPTANCE.md`。
diff --git a/everwith-claude-frontend/SECRET_SCAN.txt b/everwith-claude-frontend/SECRET_SCAN.txt
new file mode 100644
index 00000000..850eb211
--- /dev/null
+++ b/everwith-claude-frontend/SECRET_SCAN.txt
@@ -0,0 +1,16 @@
+# Secret scan 2026-10-14T08:15:50Z over the source tree and evidence/reports (node_modules, handoff assets, vendor excluded)
+## env / key / session files
+(end)
+## token-like strings
+(end)
+## absolute paths from another machine
+(end)
+## password literals (expected: synthetic test fixtures only)
+NOTE: ./src/app/i18n.ts:40:  'auth.title.login': '登录', 'auth.title.register': '注册', 'auth.email': '邮箱', 'auth.password': '密码', 'auth.passwordHint': '至少 8 位。本地演示不提供密码找回。',
+NOTE: ./src/app/i18n.ts:43:  'auth.error.invalid_credentials': '邮箱或密码不对。', 'auth.error.email_taken': '这个邮箱已注册，请直接登录。', 'auth.error.weak_password': '密码至少 8 位。', 'auth.error.invalid_email': '邮箱格式不对。',
+NOTE: ./src/app/i18n.ts:167:  'auth.title.login': 'Sign in', 'auth.title.register': 'Create account', 'auth.email': 'Email', 'auth.password': 'Password', 'auth.passwordHint': 'At least 8 characters. The local demo has no password recovery.',
+NOTE: ./src/app/i18n.ts:170:  'auth.error.invalid_credentials': 'Wrong email or password.', 'auth.error.email_taken': 'That email is registered; sign in instead.', 'auth.error.weak_password': 'Use at least 8 characters.', 'auth.error.invalid_email': 'That email looks invalid.',
+NOTE: ./src/features/account/AuthDialog.tsx:49:          <input className="ew-input" type="password" autoComplete={mode === 'login' ? 'current-password' : 'new-password'} value={password} onChange={e => setPassword(e.target.value)} required minLength={8} aria-invalid={!!error} aria-describedby="auth-pw-hint" />
+NOTE: ./tests/mock-api.test.ts:38:  const account = await api.account.register('unit@example.com', 'password123')
+NOTE: ./e2e/helpers.ts:42:export async function signUp(page: Page, email: string, password = 'password123') {
+(end)
diff --git a/everwith-claude-frontend/SOURCE_MANIFEST.txt b/everwith-claude-frontend/SOURCE_MANIFEST.txt
new file mode 100644
index 00000000..1c9fc60c
--- /dev/null
+++ b/everwith-claude-frontend/SOURCE_MANIFEST.txt
@@ -0,0 +1,183 @@
+# everwith-claude-frontend source manifest
+# app code sha256 (everything below except *.md, tests/, e2e/, playwright.config.ts): fde68002697dd16e7292b4c6b1119b232fa57dd09a665c381a850102ea0dc670  (158 files)
+# test code sha256 (tests/, e2e/, playwright.config.ts): cd1bc7b1b68a465aab785f10326d99acf376ff6b6da7bc87900c88a530f81fcd  (16 files)
+# full tree sha256 (every line below): 705319dac54573e2cac0e9d52eb8fcb236802a37d18234339db04fa05112ecbe  (178 files)
+# recompute: sha256sum each listed file in this order, keep the matching lines, then sha256sum that list (lines exactly as printed by sha256sum)
+95011726900d8e193227e00d2aa5bd8cf1fac8f5873df460f1443084df9dc1a1  ./.gitignore
+ef253cfb3971b9a3fe1fde403d28911a475e01f94e46955421ab372b969adfba  ./ACCEPTANCE.md
+e24ce4efbcf26cecfd483972c91dae89e9ad8cd87281d150c2c872033e5133bf  ./README.md
+eb287dd4a62b3a27c94a0e9747644e7520119f225fc21085c6b5e22d80630716  ./docs/ASSET_LOCK.json
+fbff92bce2bc19278d4ee0192fa35d51dcaa62d3c475325e35c81d9f0af5feca  ./docs/GENERATED_ASSETS.json
+380940633011b7fd6d159980065c894bddb4b64f02701831e6978929533067d9  ./docs/GENERATED_ASSETS.md
+04070432822fa92e2643792da113e1f3674255d6195a44acb127b51207a5c56d  ./docs/IMAGE_GENERATION_REQUESTS.md
+14da91d28dacd2dd3e184414135ca7e7cb1477f4bc63a79c308d371a939c3edd  ./e2e/art.spec.ts
+4d34cdb869772c6c97ec93c089cdf97573d84c8848898f142f00e6bb155285b5  ./e2e/core.spec.ts
+7cbebfb8847ebbd6707c49fcf3b6303fbde3b0946db026895d33429aefeba4b1  ./e2e/edge.spec.ts
+0144f079a332a9c9f2097cd0a28246131643af21356f0d231a54e97d347f8f52  ./e2e/extra.spec.ts
+b98fbd22eafb8a7aa21add1e42c63c87f684bc98bef889c93b0463b785f79440  ./e2e/games.spec.ts
+41cf836a0615de6278bbe5638ac004d1c7a7da05e5e52b0bec713331a44751d0  ./e2e/helpers.ts
+8acaf7a9f26edb9311d65a1f5c478582feaa1181f75a0b1ccea6eb6e402f195e  ./e2e/layout-a11y.spec.ts
+cba0fabdbb1340b7b39faa63269f7e47d5c760b837f6fa1d8ad51a858298d4dd  ./e2e/live2d.spec.ts
+5087235389410e5ebf2c9cc8d0017bd573688612108ceb9c7c67b824e8e8c52b  ./e2e/story-create.spec.ts
+3fd03cf4959f3d700c2c627cfd1272597ced0f9f5e1c355af8501c77cfa6f463  ./index.html
+c147d4a40147cbc253c172602e680542eb7bc99a55ecf38b04a918bce8963662  ./package-lock.json
+d44f64a6ada1372c4e8b7e77bbda01890b309dd4d630df9abed286e8ade17d00  ./package.json
+44db26471f9e7f1de571d10f2cbf83aceca6bdaff28ef3ae9ca309bdad956121  ./playwright.config.ts
+4fa396920abe9214b7d85d81efb3f0d80ff8469e934d38e80ded53ce3d5b142f  ./public/generated/batch-01/apple-touch-icon.png
+48d7f68eba34ff7669c2d37ed3db7652e107e302f16c56eeb49d6af9635a8e44  ./public/generated/batch-01/backdrop-arthur.webp
+d71aaceab1193400b3c8e19d0faf31d763067011370a776e582429f61b6b6599  ./public/generated/batch-01/backdrop-generic.webp
+ab9a7971e7d6ab87e48c5bf4f787eac39280e4f0b863630b902a39108cbd7ca4  ./public/generated/batch-01/backdrop-iris.webp
+02a95515edcf6c409bc1488784621912d811ea319441bd57aafaaa3b54d25598  ./public/generated/batch-01/backdrop-lena.webp
+0aaef6240f727b0d3856defe5b55077e67ec3fdc736f9a6ae86846130b5466a8  ./public/generated/batch-01/backdrop-marcus.webp
+62e614f596f61a7562facecdf8676372fe905f3e9917e80947b9dd4153aa24f0  ./public/generated/batch-01/backdrop-nora.webp
+ddd3f61570975c9fea7f9484c432bb069dd06f8f25d7d384dbea668961ac6052  ./public/generated/batch-01/brand-emblem.png
+3d3d491407d7479be57670eb1864950a9587bbc5b3b8bc39afc0412d7971209e  ./public/generated/batch-01/create-type-character.webp
+77212795bda011a04a827d22f93084b907e48163db6ba5f694897ac0be434ae7  ./public/generated/batch-01/create-type-story.webp
+026b9b8aba3c2f1208818f2c5e2c0463284e412bb95a26d9fdac1d4c90c5c1a4  ./public/generated/batch-01/empty-create.webp
+22d64e1ea99ad56f754be9ff909fdf174741b55a25ba92d9ba44fa4ed7a7a243  ./public/generated/batch-01/empty-friends.webp
+6955a081460764fc59e08daa146267628f9acd9743b153119abcb80c799992d9  ./public/generated/batch-01/empty-recent.webp
+ec5bf9b048dc978ad5546945a8cb84b3807f8c0887739a3c74e7f96db4f3678c  ./public/generated/batch-01/favicon-64.png
+c9a4921c7a373b4a5f5f7a8167c8d3ff940228763012127a51cb2f2c234e79d2  ./public/generated/batch-01/game-cabo-cover.webp
+eb96c3a6bcc8723df64499ff8d5fb6fcd1a3e13f401bc6f000e4a2eea46ff7ff  ./public/generated/batch-01/game-royale-cover.webp
+e164cd165c53bab2c6a4266b7e2235892d30ffc354e547919414445bb46d472c  ./public/generated/batch-01/game-splendor-cover.webp
+d33dc1ee03a557e43cbc7863b31dd03ac39db9621d479863e81d6f47a10fbf35  ./public/generated/batch-01/persona-avatar-01.webp
+7898a99dad8c4900492cac2a47e90bcc8dea163cf805cd8a6ec9deb02eed2104  ./public/generated/batch-01/persona-avatar-02.webp
+0e24b3ed31d63eb842029ba75345215c8d28fcda749db3c680f7621f26b12702  ./public/generated/batch-01/persona-avatar-03.webp
+3f042bf55e3d4ccc4d6a01b3b57d6cd846680bae58872323218898c0d9ea6ce0  ./public/generated/batch-01/persona-avatar-04.webp
+363493222a22052642deea71fa9d100b80f5112fb0a8ada523c26a36e03ba4bb  ./public/generated/batch-01/persona-avatar-05.webp
+81db2e8f4e29b5dd96a56219c24b6d69090657158c7366a47ff459e08077fa37  ./public/generated/batch-01/persona-avatar-06.webp
+707439c27ab4fa24631239809260639841008d8d5d048114f586348b6e87eeb1  ./public/generated/batch-01/persona-avatar-07.webp
+a6dc2af779adf5ec00cc353efca8ac2bb382cdf0e3f22009af17f53eaa789bf1  ./public/generated/batch-01/persona-avatar-08.webp
+978c18c4d84aa945f6a036029581b01af932e4b63fc509e09cfd32e166cc7420  ./public/generated/batch-01/state-load-error.webp
+c50e6a13caa826e9f359d5fcbd2437e0f7c988593ab47da5b498c5cb55de313a  ./public/generated/batch-01/state-not-found.webp
+091668c040c486562cd3e27f3e8402af79b7bd26f5d65a66d62a11964d6bcac2  ./public/generated/batch-01/state-signin.webp
+8db4e77c2c9dadd8407f5210b0ee35536a91c12f92d06b1839ea48d244a003b5  ./public/generated/batch-01/story-last-train-cover-tall.webp
+4e8010033d7d34d5463745a859f7fb837720d50784c0323a2cb97d75246a691a  ./public/generated/batch-01/story-last-train-cover-wide.webp
+62ae7c62ab0d5774503a349f5273484c7c65a5d743a6948d20958796256e560f  ./public/generated/batch-01/story-last-train-scene-corner.webp
+2319267b88c1bd89e11ecf1bf58039c3b3947ca21fb4664368c81eff3278843b  ./public/generated/batch-01/story-last-train-scene-duty-room.webp
+9024a2db5a76eb389ebcd696540561ccd8c9d07cb263b13ef1cec5dac1fc73d8  ./public/generated/batch-01/story-last-train-scene-platform-dawn.webp
+47dfaf081d85d488ff7384a129030aa3d701bbcbec6c812dfa21d8ee92513dd3  ./public/generated/batch-01/story-last-train-scene-waiting-room.webp
+98ea72d82f8bd32e52fb3e5dfaeaebe5dc3e9d4dc70cca9757aebeeea56adbf7  ./public/generated/batch-01/story-promise-rain-cover-tall.webp
+db7f7bb8740cbf50d76948cedd742d22e48aa0ca495de3e8c492f96fea6b6aca  ./public/generated/batch-01/story-promise-rain-cover-wide.webp
+79fb86e539c5d205b81e8d8fd5fe43d74561143b920cc7f90682c4a4d2f7f338  ./public/generated/batch-01/story-promise-rain-scene-backstage.webp
+fef4ed9f75ec56400ad6c8420525c1f0d3b6ac7c905a745f46533ef46c3a7216  ./public/generated/batch-01/story-promise-rain-scene-entrance-after-rain.webp
+e052e77a4f4cb71eab8c30674915ddab09b037f6f91314360c7d42ea77de962d  ./public/generated/batch-01/story-promise-rain-scene-entrance-rain.webp
+56392a4b6445921d2155a6738ca722fac1136cae6ece6df32a9921d6c5bc9949  ./public/generated/batch-01/story-promise-rain-scene-office.webp
+55654e81e0ee4c943f7285dfe56666c4877ce164bc19df8c55c7440ade6e5c6a  ./public/generated/batch-01/work-cover-01.webp
+7538eb83c469ef62c20e2b339eeed08fb58a96ecbad7c2dc074d26b6dd7c3fe8  ./public/generated/batch-01/work-cover-02.webp
+a243867cace02b67670e77db280d5eeb86f8656bbfb72e0435ddbe2ab294e747  ./public/generated/batch-01/work-cover-03.webp
+84b8984fd0dea6e2e6efe094fd07c38348d6a579264cddc406531a89a817b45a  ./public/generated/batch-01/work-cover-04.webp
+49d2766e6d30f191de196d58aab38f060a0c7c56c1ad09097c8cde5568830bbb  ./public/generated/batch-01/work-cover-05.webp
+af07293aceabc8203f8fc4cdc2a85b705a0cd68ac1795e5c9bd821f865a9ef8f  ./public/generated/batch-01/work-cover-06.webp
+37264be0375dbff8ffd911c724555fc31ff55c58e029fcca9fed9769ff1b0731  ./scripts/check-asset-refs.mjs
+f9bc356d612e029a3312cce4afc949595eb7a75548e7299fda0fc3adfa66b75e  ./scripts/check-generated.mjs
+c0ad641b6e86edc0f69757dae895e7f81c4700efed8f06d54ec665c919fcf970  ./scripts/derive-generated.py
+24414d93997942fbfaa1daa0aa99f4ebc43a11f948b751ae5fe8101fe125ce29  ./scripts/sync-assets.mjs
+3334e1a571da193c2161ef6c3e7f626107a04925142647b927b5fe8eacff3dab  ./src/api/adapter.ts
+caa8bdbac81a62d823e0de30b3fa7a6c5c561bc0ddb88a7435529c8453ff15b4  ./src/api/client.ts
+9c753f787bb929dc788ef66f220ce3f84eea376940f5c1dd59f5c82e31475da0  ./src/api/types.ts
+9f0a8f0ed330818406ab5868b460650f0e89c720be06321839ce27b358dcaf7c  ./src/app/App.tsx
+0f435f084f0e696fa6f43d41209c90e12e6eda588125f1499e9e2658febcf95e  ./src/app/i18n.ts
+011b33c990ea227b159841ed8aa6e2d22d06e62e3b9356e5230599321753f5f0  ./src/app/router.ts
+3dc400e01945aaa5b89cc424dc35b3269c877f0cba40359192f773fa035192ab  ./src/app/store.ts
+9057481163d80eda1364831009a8a44420568054cb3a3c3267cc1229b7346735  ./src/art/generated.ts
+98223ca50039f04f07302aa0fb8d926e31c3b6e23fbb6c9e762ce72abccafeff  ./src/chat/Composer.tsx
+7da11681ebc4caa4722e180e5e93644d5b1918fe2992b6c158195adac0b8ffac  ./src/chat/RichText.tsx
+0f77ce8412c01570bb8305cd35d4bcc6f7d5cff896e268ffe2529dcadd203ba8  ./src/chat/presentation.ts
+75f401e06ee6332534c79ba726972478f77c07a0a55447a706070e3755d1eaa5  ./src/chat/stream-controller.ts
+a785f3afd827213e9450070cff0e8e3e686c586ee03e89810082f11120a9561b  ./src/components/Art.tsx
+420f0f4dc635f9f35cdd94dbfe726dc0e12d7346297de7099d518399317eb3e7  ./src/components/Dialog.tsx
+9b34efa0c20e8a6609b676b08b1a26b7ac4e3ace10dd72a4b470afb604239889  ./src/components/Portrait.tsx
+268f69a718d2f398c3654ef54bb0b25292014f3f096d62d5592c63525ab1b621  ./src/components/Toasts.tsx
+45877cd8b7e64939dbc16740ef56f496dae0b7d7f0b0102086f40b9ece3fa9a9  ./src/components/use-modal-focus-return.ts
+54369846fafe660fefe3ad4cabe65d07efd09fafb60f562ab8446e2544eaf9c8  ./src/contracts/chat-poll.ts
+90d2099f9834f4bfb931afb63f5d4962071aeee377a3538fbfd4deb5df092007  ./src/contracts/chat-timing.ts
+922b1b943e749226a01611ee257581cd5d877db6e7f6fe35044d55db6215ffe8  ./src/contracts/companion.ts
+254717b817679bb41ba3c643fb1b4e8706d63842fb5ee05d07c980361d76acd4  ./src/contracts/dialogue-expression-client.ts
+c641960b93aa16c13b9617411fef742c55107a0db2ab5f6fefb1472fb43a3d63  ./src/contracts/private-chat-client.ts
+35a4de9dd566d88aa0bb8395fd4e1cce85014e6019e38db4ce6efcf13cfa14d4  ./src/contracts/private-chat-recovery.ts
+dd88064063dff25c58217ebf77ba600de3cc527c0fcbe383d9902c408941272d  ./src/contracts/public-events.ts
+c13918eeb4bb81352c9ea9af87e5223206461a6a671e6439d2f42fdc718c5cab  ./src/features/account/AccountPage.tsx
+8a534a3928407e2023be1d52ba4908ef4fcc131f5047414883af7387b8e77a4f  ./src/features/account/AuthDialog.tsx
+1ad7839b79ffc8faa335908b336a6fdf718d216be2c4e345ea2be6a621e85522  ./src/features/character/CharacterPage.tsx
+c8f136e84f108593bb1c06504f3b518f30e71499a5b751980efa2f34ce270824  ./src/features/chat/ChatPage.tsx
+4474c72a6a32b144ae9a8e13fae2a9cec5a42b6e1ad9caa70b0e797f4f5edeaa  ./src/features/create/CreatePage.tsx
+5dc2bc960e888979059a0c90fbb24e47c7831b5b4e85d7f23914454d54eba0ec  ./src/features/create/WorkEditorPage.tsx
+a85e75ce4bcbce4f28aeafb5b9ef0ac76c685f789298ef4b482cab46ed8e353c  ./src/features/discover/DiscoverPage.tsx
+b7b8a4fc716a88878adf66fc22d4273751dd7a2e028c90cb30a9737606098014  ./src/features/friends/AddFriendFlow.tsx
+dda59ac0d08cc04547da5626e8c6036e5606cd43450c2e91cd2ed971517e14f0  ./src/features/friends/FriendsPage.tsx
+535f57b1de3d76d5a80630a67668fa101829c232c59d0a4d61a95c2e74cb856d  ./src/features/friends/PlayTogether.tsx
+372d97300e9ab2c0a632c6e2371cf7540afe8f2143dd7b852b122994adbb7306  ./src/features/games/GamePlayPage.tsx
+4c5c507164a09e9add0b9b5649d8c7e19ff63ba219acc6e4aec53cfb1a04a86c  ./src/features/games/GamePreparePage.tsx
+88622c599382bc4c9ac4e0c7b46257b53b8835d411f515660d713971c5e03fc1  ./src/features/games/boards/CaboBoard.tsx
+f59ed473977a50ed56bbd830f7b49843993787b80eee55bdb7ed4a35b090aa2b  ./src/features/games/boards/RoyaleBoard.tsx
+e80f7923043034fd78d3b5a6e17b27997797a5ee433449fb584cdb0570b6648c  ./src/features/games/boards/SplendorBoard.tsx
+c74fb96af14a7eba4c597e52b58612d4916557c4167e28fc3f3d511e5c40d10f  ./src/features/games/boards/shared.tsx
+6e1d2c80dcf2a2ac8a50cf7c1defa469c5232f86bb5b9c7831a9acc49c9a7adf  ./src/features/games/boards/splendor-art.ts
+0b2d22f140f0ffdac4d2b17d3882a575acc299378914b4f8b282197b6cd86b89  ./src/features/misc/NotFoundPage.tsx
+df497adc422972222999cafeca2184bd16d5b6204e584582eff2390e038c0241  ./src/features/mock/MockPanel.tsx
+2e1b6078e493e88a8a8940569f32aeaa5ded31217dc5a967951413f96f8f2462  ./src/features/recent/RecentPage.tsx
+d912f040d2ba5c7a59d3ace0f967b4663bffd06284eb48c21edc5b3fcf446d31  ./src/features/story/StoryDetailPage.tsx
+af1786723eefe778b49f85111786878078af13f824dc958b1f7e9b60e88ab1da  ./src/features/story/StoryPlayPage.tsx
+44a675ae8ee98f5eed2268549169058b5953940b00d7a06255cf9448bb0fb8b4  ./src/features/story/StoryPreparePage.tsx
+cfd42056e8255307700c9b318e4c9d91a9c53af8a149efcb2d5ca27196354f29  ./src/games/engines/PROVENANCE.json
+d24623a705e033a149fb53e9f985996dcad770c9d4ab6dad34068aeef2515d6c  ./src/games/engines/cabo/core.d.ts
+b18ef94aa13d85c6086ce2bce2e4b9a5e61e9fda7bc106c1ed4eef015e830b9a  ./src/games/engines/cabo/core.js
+7f70bd952b9cc5fc3ce6534a1177ec7c06cadd9fb52ae226e6393b5a2385aa2d  ./src/games/engines/cabo/engine.d.ts
+020a77057827a5c2a6345612fdbee106645d7515d34851dac36b7e882fde1913  ./src/games/engines/cabo/engine.js
+8dee042a73e64bb64214ad458d7a1033609105886075ed389652070b52ede13c  ./src/games/engines/cabo/rule-evidence.d.ts
+e006d9546abe89b96543c0e5d0ce2fdf8194aca5abd42a9222dce4050f769813  ./src/games/engines/cabo/rule-evidence.js
+6c42f3a38187b0848a297f0ee96465da9e325dc5fdc64bce983988c1a30ceed2  ./src/games/engines/royale/engine.ts
+407fd2200b5fc89a87aacc5dbe3388431cabfae04f2d8b8e8e83af5006740b86  ./src/games/engines/splendor/splendor/npc.d.ts
+981a5908b2abf871bb8be770b67abd415ca5ac22bf8710524765f25dd6d54fb2  ./src/games/engines/splendor/splendor/npc.js
+9234e8fb2cd3b6aeca73ce32be0e5699f8f589229bd39187ed9c5b8d81a03258  ./src/games/engines/splendor/splendor/rules-v2.d.ts
+4f4b32677f7ebcbf42082dba4e0395b3f4965e571bd16ff0a86f9281112c0699  ./src/games/engines/splendor/splendor/rules-v2.js
+dd17e1594201aad4a6e84b54b7f5daa4879e0b99e96798d2866d2086679e4576  ./src/games/engines/splendor/splendor/rules.d.ts
+62c785dfea2c79091cea32f5549d2b72f12ab2933502a2d3b1fa80f91ed030fa  ./src/games/engines/splendor/splendor/rules.js
+02efbf4d7483d941609d56d854ad7a8abe4b9f9c87993842eca1c45452615afb  ./src/games/engines/splendor/src/data.d.ts
+39a0043dc1d85447c7604efd0713738b178511b318f8aa554ff422cfb38ee056  ./src/games/engines/splendor/src/data.js
+9c13ef0c3499677e1d7924962d9f3e53f96a0536856e330c3b2f91557de55207  ./src/games/engines/splendor/src/engine.d.ts
+f710ec9198ccdadcd9b754170ecec9629dffc1b7e1f9659f1b5c481fa4a3d4ee  ./src/games/engines/splendor/src/engine.js
+c2ab485b65673e523fdfab4d943f56020c5d687d3129f51d7981340704c81004  ./src/lib/util.ts
+536456f0682b21b8922eaf307c8aa5fb218b3eff5cbdd07a5f3903b7a27ab96c  ./src/live2d/LiveStage.tsx
+df931ba0a50621239e55b58066faac35238ace989bd2a9dcc6935998fe16b4d1  ./src/live2d/audio.ts
+7acca57ea0818b836c061917c5c923a699f3297ef52d41380c56e5c68a076403  ./src/live2d/carrier-parameter-units.ts
+e3d4de41b0219588ab4b1048de54945fb3f8a655a7a75a6c44a864db570a97e4  ./src/live2d/characters.ts
+7cd7a84f564d39f724f5934288cb48a92b8b6366fd3d58a02067236c3f8e6d1c  ./src/live2d/director.ts
+8c73909b121f365ccf5b08ec609d1b48453c2c194cb81c9d6797b187c9844f14  ./src/live2d/framework.ts
+f03bc51910b24b507e29d3bbc8183b6ed937ca2989d2d485b3fb8e21a2f73b47  ./src/live2d/motion.ts
+987d341b0074075401505fd18276cdd8ff2c344620394c982663316c1d326001  ./src/live2d/performer.ts
+0642dd4b2c3c2c341fce7111e97a4c7ed563b2e5f2c34c53ce920f569a3c0181  ./src/live2d/runtime.ts
+97d0d8667c72f01656f7a943e1564d9add3b1e9dc5833c8673aab028aa086cac  ./src/live2d/verified-frame-writer.ts
+4d9b42037f148c443fca0ac407461a5feca4e2583c0b2c9c884612422914fc2c  ./src/main.tsx
+7096dfdd3aa9829bc7cd73e3936c87b1153100df8a1cb8ad2b4dfb678aa569a1  ./src/mock/catalog.ts
+302e0903062c9c7d9dc957c512034360b96256e7c5c286e669e8f51278ebfcb8  ./src/mock/db.ts
+239d915af92711c1ea0b4cb7c35467a17e1f8dcc87e87e37ee988e28210867dd  ./src/mock/games/modules.ts
+4f1bd18bbcfcefae93bd65008489e90d8affb34b80640d279b3dfb8728ff8301  ./src/mock/http.ts
+0943a8409eaa1579fd36ac01fdd13a21c8862800b7d95c623c44d548aee9ca87  ./src/mock/replies.ts
+668b610111b4be66bdc34a3048dc973d37880e8d94c32abf0cedc399dd9fdafd  ./src/mock/scenarios.ts
+9f1985079c24e09cd088acc7933a4381baa484020a947fedcdd562069f0d6a40  ./src/mock/server/account.ts
+f40704d193a51c7053346d0fee814829f985222c8237c981ff8dcf5333156bbf  ./src/mock/server/catalog.ts
+f48396573dcd94d6672b10ab660c6ee332e459b21593a1f05335e85b0db6d692  ./src/mock/server/chat.ts
+5ce1a6da856f7cf641e22c58f99c31855cc4124449af224f84fe4c59e0ccad55  ./src/mock/server/context.ts
+978623c5eb614c9c0117425123d83b78e115b889c37cc13b126b0128740e04bc  ./src/mock/server/friends.ts
+927a46585b94d40208917c06b123f61da0dc3333f74926549f9a4608e2fbd16a  ./src/mock/server/games.ts
+c3308c13554c6c98608b41706191cbf981c27f8180b6a63f680a38a80125141e  ./src/mock/server/index.ts
+c44ca0747abfa7c6d4bb55f843be0e871155fa11bc1fe6fefaa3cee029d7d1cf  ./src/mock/server/records.ts
+f9025f97e2461fe3aa14f9a7a1c40be5affacc266472f149aec9e7b1c356ed6b  ./src/mock/server/stories.ts
+d40e1742e7bda1afd87b5f6084301bb3f9467ffbef7cbc1cab59496710966fec  ./src/mock/server/works.ts
+c1715ae950aacb9aab3fceab3a0d65c9f2c9a5044a4525dbedfa799f1d8238e6  ./src/styles/base.css
+3468344d0e8e5e688c764442a0c058a3cd8fd404db47c78cd454b55a6fd12181  ./src/styles/chat.css
+b6374de06ea4fff057e1fac8a0a43f146fa6c6c07f1e912004d9fa011f84ba89  ./src/styles/games.css
+194ecabf6a070e14ca49da9fe3a1cc57716b3b506a980108d97d514b8a5efe4a  ./src/styles/pages.css
+e9dc11b4c7d7d1e729ab443ad72bab26e23a626d224f5f40b8855b1f55b6049f  ./src/styles/shell.css
+4699ed5b8ef1af6adb1f104619cdec7fc7d64ea311146a8bafcaa597eda225c4  ./src/styles/stage.css
+0133fbc3260c5ac5b154f2379a9a520c964312226b40a5aeb25a2aac5f56a9dd  ./src/styles/story.css
+b5354a6ff7f851f72321a0ee52e4981400bec167abdcf7649bb031cd73577fba  ./tests/cabo-rules.test.ts
+1ee65949154e6acba11e6fceadfa61138e5e6946b537ef688a98898fe5dd9301  ./tests/components.test.tsx
+2e41bbf815c25bc743f3e9daa0c8db4448b10cb35edfa84bb5e86b805c486d83  ./tests/engines.test.ts
+e9c0c88fdd69d1131d45bd42ac2c51930f3914fbf376ef9a7cd2e16b5ba09695  ./tests/mock-api.test.ts
+bedef72e2eed2600589f0c7b67cd6a2742c577cea0fd83f98a68bcfe13281b55  ./tests/richtext-router.test.ts
+01ba4719c80b6fe911b091a7c05124b64eeece964e09c058ef8f9805daca546b  ./tests/setup.ts
+77401ba98f0128f2f0dcc48ebd84807b82f7b81c66c34d24567085f17cea2695  ./tsconfig.json
+b2196f0e01f841c19e3fabf582b16134ae036d4878d4052ea4238ed1d7c9efd1  ./vite.config.ts
diff --git a/everwith-claude-frontend/docs/ASSET_LOCK.json b/everwith-claude-frontend/docs/ASSET_LOCK.json
new file mode 100644
index 00000000..5e69ff79
--- /dev/null
+++ b/everwith-claude-frontend/docs/ASSET_LOCK.json
@@ -0,0 +1,1498 @@
+{
+  "schema": "everwith-claude-asset-lock-v1",
+  "source_package": "Everwith_Claude_Frontend_Handoff_2026-10-13",
+  "copied_at_utc": "2026-10-13T20:49:37.566Z",
+  "policy": "byte-identical copies verified against the package SHA256SUMS; no resize/re-encode; private user-authorized handoff; commercial/redistribution rights unverified",
+  "files": [
+    {
+      "rel": "assets/companions/feed/arthur.webp",
+      "dest": "public/handoff/assets/companions/feed/arthur.webp",
+      "bytes": 362768,
+      "sha256": "4aedb582201d0903f64673b0c73a0b7ad195aa0e89a5bce0c25804b0aef8c657",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/feed/iris.webp",
+      "dest": "public/handoff/assets/companions/feed/iris.webp",
+      "bytes": 257568,
+      "sha256": "355699748b9b06aab334e760e6a7d879e65504aa4850357cc012553997c84aa4",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/feed/lena.webp",
+      "dest": "public/handoff/assets/companions/feed/lena.webp",
+      "bytes": 466126,
+      "sha256": "35f3da37d168b21f50ff77912d64769e33c18e609c7425e12e0214e5b452a55b",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/feed/marcus.webp",
+      "dest": "public/handoff/assets/companions/feed/marcus.webp",
+      "bytes": 247718,
+      "sha256": "ffe420bc9bbfcdc7d49593e647afaeb4df68f938a4066a72861b48835dbbcc9a",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/feed/nora.webp",
+      "dest": "public/handoff/assets/companions/feed/nora.webp",
+      "bytes": 560612,
+      "sha256": "a67ddfa6a6d6a0913d975d71b63a4cd09dde9a722a57757d8e861f3d0d87bc6f",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/feed/provenance.json",
+      "dest": "public/handoff/assets/companions/feed/provenance.json",
+      "bytes": 3623,
+      "sha256": "c4156596ed04556e969f3128ab409ccfd029d01e7e45a475ea1d135f869b4b94",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/feed/scene-amber.webp",
+      "dest": "public/handoff/assets/companions/feed/scene-amber.webp",
+      "bytes": 211376,
+      "sha256": "d2e3dfaea7e6ccb841f32a5591d29af75afa1d84385b1a85b5fd2ba1d512eab9",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/feed/scene-rain.webp",
+      "dest": "public/handoff/assets/companions/feed/scene-rain.webp",
+      "bytes": 219068,
+      "sha256": "fc2ca71680561d4c444cf465accbbb9b4aab34ba63b9ce9f5eb5ff1c51f3bef3",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/game-previews/v1/cabo-poster.webp",
+      "dest": "public/handoff/assets/companions/game-previews/v1/cabo-poster.webp",
+      "bytes": 12016,
+      "sha256": "a87b201d83d2ae332872152bd88634f016d73ae7a8edcee0adac92137d70dac0",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/game-previews/v1/cabo.mp4",
+      "dest": "public/handoff/assets/companions/game-previews/v1/cabo.mp4",
+      "bytes": 115043,
+      "sha256": "5e29710d89445bf6c7daa91fa4e543ad4dd1764b036359245ef02e70789bcde4",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/game-previews/v1/manifest.json",
+      "dest": "public/handoff/assets/companions/game-previews/v1/manifest.json",
+      "bytes": 25355,
+      "sha256": "a188ca90cc034a80344b7a6c0a54a516da8fcbc5b485cc3e40d726e33f710f98",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/game-previews/v1/royale-poster.webp",
+      "dest": "public/handoff/assets/companions/game-previews/v1/royale-poster.webp",
+      "bytes": 29726,
+      "sha256": "a5b849fd14f7c24bd83cb1623acf0a2bcbb8dd01012dc774731f639aa7e37542",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/game-previews/v1/royale.mp4",
+      "dest": "public/handoff/assets/companions/game-previews/v1/royale.mp4",
+      "bytes": 237619,
+      "sha256": "ac07207ec3083277f7d18f4472ac02768b82a805b75a3b80148b3074ebe3867d",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/game-previews/v1/splendor-poster.webp",
+      "dest": "public/handoff/assets/companions/game-previews/v1/splendor-poster.webp",
+      "bytes": 32592,
+      "sha256": "b3cc1a9499fe6f38e9945dce794d09eb7df9a6d68e88431177cfcee7d707c163",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/game-previews/v1/splendor.mp4",
+      "dest": "public/handoff/assets/companions/game-previews/v1/splendor.mp4",
+      "bytes": 247629,
+      "sha256": "e0e102fb446f609fbff922c2e898009d49ee1503181aa8808aaf725a5cdb06c4",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/portraits/arthur-local-neutral.png",
+      "dest": "public/handoff/assets/companions/portraits/arthur-local-neutral.png",
+      "bytes": 105501,
+      "sha256": "40cfc3210bb385f87431134fc5b7c5adaa8343e97ecd7160ed0010fb49e5c52f",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/portraits/arthur-r7-neutral.png",
+      "dest": "public/handoff/assets/companions/portraits/arthur-r7-neutral.png",
+      "bytes": 231957,
+      "sha256": "ddba39a2fe3381dc80e0a24127b6c34c4393bd4f7fd414ecd4c9988d2394cc6b",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/portraits/iris-local-neutral.png",
+      "dest": "public/handoff/assets/companions/portraits/iris-local-neutral.png",
+      "bytes": 124891,
+      "sha256": "00e6b1b33384c28b3c564e466b9e29075d848d1abebab7c70b4dc651c5e3f1de",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/portraits/lena-local-neutral.png",
+      "dest": "public/handoff/assets/companions/portraits/lena-local-neutral.png",
+      "bytes": 149325,
+      "sha256": "e8145352bb6ab17cc16e05de268845f46ad2e976ccd49cdf899b5315437d9f7d",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/portraits/lena-r5-neutral.png",
+      "dest": "public/handoff/assets/companions/portraits/lena-r5-neutral.png",
+      "bytes": 112381,
+      "sha256": "b5e4524a5b904a658b6fd5d7d59ddb66aa44042fd136216ac94ef5749210e143",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/portraits/lena-soft-anime-v2-neutral.png",
+      "dest": "public/handoff/assets/companions/portraits/lena-soft-anime-v2-neutral.png",
+      "bytes": 1782649,
+      "sha256": "f44a57389e516d2ec441920a65603e79bb538c5014a01ae528d961ca17c97060",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/portraits/marcus-local-neutral.png",
+      "dest": "public/handoff/assets/companions/portraits/marcus-local-neutral.png",
+      "bytes": 72316,
+      "sha256": "fecc101c9a8cf4ca906402e3ddbbd74bc752e2f0aae1917e759d96e3a4b5d457",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/portraits/marcus-r3-neutral.png",
+      "dest": "public/handoff/assets/companions/portraits/marcus-r3-neutral.png",
+      "bytes": 61217,
+      "sha256": "259ab41edbe5106d6b492b25b246c2b34ced072a2ebab7a128beda785874b857",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/portraits/nora-local-neutral.png",
+      "dest": "public/handoff/assets/companions/portraits/nora-local-neutral.png",
+      "bytes": 142453,
+      "sha256": "1b41b482c61bea26d5de011e2ba59bcdecf2c8e072d05d6afad13863d38b0998",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/portraits/nora-r4-neutral.png",
+      "dest": "public/handoff/assets/companions/portraits/nora-r4-neutral.png",
+      "bytes": 285853,
+      "sha256": "4193f55ebcc8bb64933bcd1d6ce7ded3ee05ffb410c06df5e2d570e8423cd59d",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/companions/scenes/lena-rain-room-illustrated-20261007.png",
+      "dest": "public/handoff/assets/companions/scenes/lena-rain-room-illustrated-20261007.png",
+      "bytes": 2077517,
+      "sha256": "ad03531b9a5436091148b8e1dad8e6316132c459fcdaa2257d1ec8ab737a0a49",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/cabo/card-illustration/provenance.json",
+      "dest": "public/handoff/assets/games/cabo/card-illustration/provenance.json",
+      "bytes": 1239,
+      "sha256": "b865a8ab25616b3a0bfe1c9002d5591a90448fa37e2c19f15f21e4a64f834a1b",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/cabo/card-rank-art/back-05209a8c19595393551ebb5ed1456aed1983639089b4683bd9e3ea7e0dbc0646.webp",
+      "dest": "public/handoff/assets/games/cabo/card-rank-art/back-05209a8c19595393551ebb5ed1456aed1983639089b4683bd9e3ea7e0dbc0646.webp",
+      "bytes": 2329890,
+      "sha256": "05209a8c19595393551ebb5ed1456aed1983639089b4683bd9e3ea7e0dbc0646",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/cabo/card-rank-art/illustration-print-1-zones.json",
+      "dest": "public/handoff/assets/games/cabo/card-rank-art/illustration-print-1-zones.json",
+      "bytes": 2686,
+      "sha256": "b77c75599c955ae9183bd173c0179aa06112287b5570c29253c376b184752c0e",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/cabo/card-rank-art/manifest.json",
+      "dest": "public/handoff/assets/games/cabo/card-rank-art/manifest.json",
+      "bytes": 12213,
+      "sha256": "7259c0fdf5a8b150a8f8dfe235edf7f29192d5ffc5ebee046baf0ba09815ba90",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/cabo/card-rank-art/rank-0-bbbcffd0cfbc223a9843fb04e1ca4200069fe3e032ddcb8c07ed4cdfc456cb55.webp",
+      "dest": "public/handoff/assets/games/cabo/card-rank-art/rank-0-bbbcffd0cfbc223a9843fb04e1ca4200069fe3e032ddcb8c07ed4cdfc456cb55.webp",
+      "bytes": 2381072,
+      "sha256": "bbbcffd0cfbc223a9843fb04e1ca4200069fe3e032ddcb8c07ed4cdfc456cb55",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/cabo/card-rank-art/rank-1-ba5f66650793fc05c80ee3f94722dcef0dadd74c06d21491d30b66da5e870d44.webp",
+      "dest": "public/handoff/assets/games/cabo/card-rank-art/rank-1-ba5f66650793fc05c80ee3f94722dcef0dadd74c06d21491d30b66da5e870d44.webp",
+      "bytes": 2268646,
+      "sha256": "ba5f66650793fc05c80ee3f94722dcef0dadd74c06d21491d30b66da5e870d44",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/cabo/card-rank-art/rank-10-e4a211840ba6d4760ff1030c248e09c28cfb1d520abfca9ad504e31ac91b95fe.webp",
+      "dest": "public/handoff/assets/games/cabo/card-rank-art/rank-10-e4a211840ba6d4760ff1030c248e09c28cfb1d520abfca9ad504e31ac91b95fe.webp",
+      "bytes": 2324466,
+      "sha256": "e4a211840ba6d4760ff1030c248e09c28cfb1d520abfca9ad504e31ac91b95fe",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/cabo/card-rank-art/rank-11-b359172e1aa83f23fd6f78116990622d6c7cace419d52f33c53447631e03fcc7.webp",
+      "dest": "public/handoff/assets/games/cabo/card-rank-art/rank-11-b359172e1aa83f23fd6f78116990622d6c7cace419d52f33c53447631e03fcc7.webp",
+      "bytes": 1981810,
+      "sha256": "b359172e1aa83f23fd6f78116990622d6c7cace419d52f33c53447631e03fcc7",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/cabo/card-rank-art/rank-12-9d85bc6d569e257d59e322ef8d977233f778564612416f61dfe0b178e86f35da.webp",
+      "dest": "public/handoff/assets/games/cabo/card-rank-art/rank-12-9d85bc6d569e257d59e322ef8d977233f778564612416f61dfe0b178e86f35da.webp",
+      "bytes": 2150980,
+      "sha256": "9d85bc6d569e257d59e322ef8d977233f778564612416f61dfe0b178e86f35da",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/cabo/card-rank-art/rank-13-03f0eb5d8d2a5b695fa00dde23984ea4fb09614b4c172a4fd27432e039ae8da7.webp",
+      "dest": "public/handoff/assets/games/cabo/card-rank-art/rank-13-03f0eb5d8d2a5b695fa00dde23984ea4fb09614b4c172a4fd27432e039ae8da7.webp",
+      "bytes": 2343712,
+      "sha256": "03f0eb5d8d2a5b695fa00dde23984ea4fb09614b4c172a4fd27432e039ae8da7",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/cabo/card-rank-art/rank-2-4df6bf6039b3bc5191a84e7ec83488c139f37edf0d9d5dc44a0498c249eb25b4.webp",
+      "dest": "public/handoff/assets/games/cabo/card-rank-art/rank-2-4df6bf6039b3bc5191a84e7ec83488c139f37edf0d9d5dc44a0498c249eb25b4.webp",
+      "bytes": 2234194,
+      "sha256": "4df6bf6039b3bc5191a84e7ec83488c139f37edf0d9d5dc44a0498c249eb25b4",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/cabo/card-rank-art/rank-3-4a5605bd0afbffb98933a3f3b73b08fbfc27c66f666062c94ad58bf364fb3267.webp",
+      "dest": "public/handoff/assets/games/cabo/card-rank-art/rank-3-4a5605bd0afbffb98933a3f3b73b08fbfc27c66f666062c94ad58bf364fb3267.webp",
+      "bytes": 2210268,
+      "sha256": "4a5605bd0afbffb98933a3f3b73b08fbfc27c66f666062c94ad58bf364fb3267",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/cabo/card-rank-art/rank-4-c44d265df6d838b51841510eeb0f26d65cb6c389d04083aaec9c31b1a459baf7.webp",
+      "dest": "public/handoff/assets/games/cabo/card-rank-art/rank-4-c44d265df6d838b51841510eeb0f26d65cb6c389d04083aaec9c31b1a459baf7.webp",
+      "bytes": 2341890,
+      "sha256": "c44d265df6d838b51841510eeb0f26d65cb6c389d04083aaec9c31b1a459baf7",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/cabo/card-rank-art/rank-5-c099b701937893138611d1e7a289aea489a1ddeff774891c029584f12256e613.webp",
+      "dest": "public/handoff/assets/games/cabo/card-rank-art/rank-5-c099b701937893138611d1e7a289aea489a1ddeff774891c029584f12256e613.webp",
+      "bytes": 2169752,
+      "sha256": "c099b701937893138611d1e7a289aea489a1ddeff774891c029584f12256e613",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/cabo/card-rank-art/rank-6-7cd22f8e067743aafa90288af9f8533c9d22a29af18ea1ca550795bcadd43d90.webp",
+      "dest": "public/handoff/assets/games/cabo/card-rank-art/rank-6-7cd22f8e067743aafa90288af9f8533c9d22a29af18ea1ca550795bcadd43d90.webp",
+      "bytes": 2286878,
+      "sha256": "7cd22f8e067743aafa90288af9f8533c9d22a29af18ea1ca550795bcadd43d90",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/cabo/card-rank-art/rank-7-a922be09b8b9aa30d3ced0b5fee7ab3572278e0cd42b559bdcd011fe3197b0ef.webp",
+      "dest": "public/handoff/assets/games/cabo/card-rank-art/rank-7-a922be09b8b9aa30d3ced0b5fee7ab3572278e0cd42b559bdcd011fe3197b0ef.webp",
+      "bytes": 2489192,
+      "sha256": "a922be09b8b9aa30d3ced0b5fee7ab3572278e0cd42b559bdcd011fe3197b0ef",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/cabo/card-rank-art/rank-8-966777513baa30063249aca1876fa556670b44c9ffa57e7842fc583541763de6.webp",
+      "dest": "public/handoff/assets/games/cabo/card-rank-art/rank-8-966777513baa30063249aca1876fa556670b44c9ffa57e7842fc583541763de6.webp",
+      "bytes": 2419188,
+      "sha256": "966777513baa30063249aca1876fa556670b44c9ffa57e7842fc583541763de6",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/cabo/card-rank-art/rank-9-fa0ce016cb166aa420963cdfa36c1cd63bffefce68944a2da7f015eeaf580478.webp",
+      "dest": "public/handoff/assets/games/cabo/card-rank-art/rank-9-fa0ce016cb166aa420963cdfa36c1cd63bffefce68944a2da7f015eeaf580478.webp",
+      "bytes": 2292262,
+      "sha256": "fa0ce016cb166aa420963cdfa36c1cd63bffefce68944a2da7f015eeaf580478",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/cabo/embedded-surface-1.webp",
+      "dest": "public/handoff/assets/games/cabo/embedded-surface-1.webp",
+      "bytes": 354758,
+      "sha256": "1653e93650392964438cf3825c7b8335e0d202329796f6f19316ac3840bb7929",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "byte-decoded existing image"
+    },
+    {
+      "rel": "assets/games/royale/generated/PROVENANCE.json",
+      "dest": "public/handoff/assets/games/royale/generated/PROVENANCE.json",
+      "bytes": 4718,
+      "sha256": "0534ef23e4dc6402e240ed44c920ea184e9d4f499cf61bfac08c7f6cc0336b79",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/royale/generated/casino-scene-atlas-r7.png",
+      "dest": "public/handoff/assets/games/royale/generated/casino-scene-atlas-r7.png",
+      "bytes": 2844647,
+      "sha256": "63849aa383f2e4167942e8c09c7382a58d7400750129721f7b2d771b4e1ca1a1",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/royale/generated/fictional-game-token-ornament-20261004.png",
+      "dest": "public/handoff/assets/games/royale/generated/fictional-game-token-ornament-20261004.png",
+      "bytes": 3464649,
+      "sha256": "1ab6a8137d0e986867b0622b42cae8b96a2d51cd4db441eaebb3d53c0e897a89",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/backgrounds/salon.png",
+      "dest": "public/handoff/assets/games/splendor/backgrounds/salon.png",
+      "bytes": 2157439,
+      "sha256": "a3ae52573ef267a1263c5d27289dcf505b403927972ef0a4e2919920cac7ad68",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/gem-diamond-finish-round4-20261007.png",
+      "dest": "public/handoff/assets/games/splendor/gem-diamond-finish-round4-20261007.png",
+      "bytes": 1148365,
+      "sha256": "2c7dc99549263be949351860c7abeeae6c813cbc3bd1ab13d1706e13f3b8feb8",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/gem-emerald-polish-round4-20261007.png",
+      "dest": "public/handoff/assets/games/splendor/gem-emerald-polish-round4-20261007.png",
+      "bytes": 1299028,
+      "sha256": "68694dac012219ba6bd18be63ab9303d68600e042e885aa4d878af284be71e1d",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/gem-gold-finish-round4-20261007.png",
+      "dest": "public/handoff/assets/games/splendor/gem-gold-finish-round4-20261007.png",
+      "bytes": 1187842,
+      "sha256": "5c8a81d8e26f870a7fe988aab8f5d87d0fdf6cc50ba56ffad1442fc6537bfb8a",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/gem-onyx-polish-round4-20261007.png",
+      "dest": "public/handoff/assets/games/splendor/gem-onyx-polish-round4-20261007.png",
+      "bytes": 1345197,
+      "sha256": "3ed1530e8f98a7ee0d33049519a9e0b8a37570ce39165e2522b261a0805c69e2",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/gem-ruby-polish-round4-20261007.png",
+      "dest": "public/handoff/assets/games/splendor/gem-ruby-polish-round4-20261007.png",
+      "bytes": 1323541,
+      "sha256": "a2d2f81773715747a181fd39b35c095aa34932d3ac70aeffee510ece4a97f9aa",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/gem-sapphire-finish-round4-20261007.png",
+      "dest": "public/handoff/assets/games/splendor/gem-sapphire-finish-round4-20261007.png",
+      "bytes": 1298268,
+      "sha256": "59f8c59ff463249aff5759d87d5621214f593e02032488bc16c41074043fca08",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/nobles-a.jpg",
+      "dest": "public/handoff/assets/games/splendor/nobles-a.jpg",
+      "bytes": 846387,
+      "sha256": "e336034ad2f8cf2750c587763fe0f1423d8c21dc878c43dc8dc4a40728ecbd48",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/nobles-b.jpg",
+      "dest": "public/handoff/assets/games/splendor/nobles-b.jpg",
+      "bytes": 825278,
+      "sha256": "c36406d3637f2bc33d6b9ce4a921e19a49782284746b743e9a5d58c2a88add5a",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/renaissance-tier1-20261007.png",
+      "dest": "public/handoff/assets/games/splendor/renaissance-tier1-20261007.png",
+      "bytes": 3441601,
+      "sha256": "80bcf2fcb127185af81cf42fd35743b099e376255a08b631e6d090e6a78724f7",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/renaissance-tier2-20261007.png",
+      "dest": "public/handoff/assets/games/splendor/renaissance-tier2-20261007.png",
+      "bytes": 3680985,
+      "sha256": "d3593a29c0651e4d3a12e26c4eb65b45db2ecc225f8f54e26bd093ce2472bd6b",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/renaissance-tier2-caravan-round3-20261007.png",
+      "dest": "public/handoff/assets/games/splendor/renaissance-tier2-caravan-round3-20261007.png",
+      "bytes": 3344055,
+      "sha256": "19433de50f8f6a6a53d4ec936c63484ec73ef64f50a81d318c524510485febcb",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/renaissance-tier2-ledger-round3-20261007.png",
+      "dest": "public/handoff/assets/games/splendor/renaissance-tier2-ledger-round3-20261007.png",
+      "bytes": 2887104,
+      "sha256": "187c22c471ed10ab546d107637ca32a56d84e41a4a8455501cc392305aeb71c5",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/renaissance-tier2-warehouse-round3-20261007.png",
+      "dest": "public/handoff/assets/games/splendor/renaissance-tier2-warehouse-round3-20261007.png",
+      "bytes": 3283569,
+      "sha256": "7d7333e010f65b5be9a939b2455050f79f406fd4dd8d506955264347d3cc36a7",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/renaissance-tier3-20261007.png",
+      "dest": "public/handoff/assets/games/splendor/renaissance-tier3-20261007.png",
+      "bytes": 3619712,
+      "sha256": "99f9b96b5e7eea989b9270c140d9e02e030fd52f3ff2c2bfe2f5559453cf9d4f",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/renaissance-tier3-cathedral-round4-20261007.png",
+      "dest": "public/handoff/assets/games/splendor/renaissance-tier3-cathedral-round4-20261007.png",
+      "bytes": 2893222,
+      "sha256": "54542bc411d5cbceecb8ecec71f345f3522e6ae4fbaeaeb98c326aebe74c7cde",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/renaissance-tier3-harbor-round4-20261007.png",
+      "dest": "public/handoff/assets/games/splendor/renaissance-tier3-harbor-round4-20261007.png",
+      "bytes": 3221384,
+      "sha256": "566d821ea626af01e345ac5880dfdb73dde599fa9f4d4ab3fa9bbe0dc7fb5249",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/teal-velour-calm-round4-20261007.png",
+      "dest": "public/handoff/assets/games/splendor/teal-velour-calm-round4-20261007.png",
+      "bytes": 3036261,
+      "sha256": "bd66a0b2b7948e2ee43e8b183ed948d3ff241e17229c5775499174424df9cf70",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/tier-back-1-20261005.png",
+      "dest": "public/handoff/assets/games/splendor/tier-back-1-20261005.png",
+      "bytes": 3400223,
+      "sha256": "18938ad6d49dff10fef9e5ec503e0a5ec47f4847315c2429df81779b454c9392",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/tier-back-2-20261005.png",
+      "dest": "public/handoff/assets/games/splendor/tier-back-2-20261005.png",
+      "bytes": 3707696,
+      "sha256": "b8ffdd408b79fcda584f8bea2ab00ccc1d3b1fcf70cea19897a1ab787a188184",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/tier-back-3-20261005.png",
+      "dest": "public/handoff/assets/games/splendor/tier-back-3-20261005.png",
+      "bytes": 3464861,
+      "sha256": "200a0c4b0b6b72ed4633d5ba91273063b95cbd7bf65677178bea5d6e81de1902",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/games/splendor/tier-backs-provenance-20261005.json",
+      "dest": "public/handoff/assets/games/splendor/tier-backs-provenance-20261005.json",
+      "bytes": 1062,
+      "sha256": "6d7b564f48489353a2c8665ab5aeb7c0b7ec0ebd77f890af3ff3be32c91f0961",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/arthur/arthur-expressions.4096/texture_00.png",
+      "dest": "public/handoff/assets/live2d/arthur/arthur-expressions.4096/texture_00.png",
+      "bytes": 4410501,
+      "sha256": "64bd1c45f9f75e1228107b5c99ea5c8a8d14c44bd7a2878c15b78441f188a33a",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/arthur/arthur-expressions.cdi3.json",
+      "dest": "public/handoff/assets/live2d/arthur/arthur-expressions.cdi3.json",
+      "bytes": 4806,
+      "sha256": "935a40b34a6be1f1b04c4df8b2cc3b648fba5f70910abdab8a8213aa07a534df",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/arthur/arthur-expressions.moc3",
+      "dest": "public/handoff/assets/live2d/arthur/arthur-expressions.moc3",
+      "bytes": 373568,
+      "sha256": "047e051a47f4eac96f68446d96a8e5d993a828319992eec05fcebb1da803785f",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/arthur/arthur-expressions.model3.json",
+      "dest": "public/handoff/assets/live2d/arthur/arthur-expressions.model3.json",
+      "bytes": 479,
+      "sha256": "b836f8eec002fb35969718fb6194840a53039bc8784eb2adc2407c983206c07b",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/iris/iris-expressions.4096/texture_00.png",
+      "dest": "public/handoff/assets/live2d/iris/iris-expressions.4096/texture_00.png",
+      "bytes": 3633227,
+      "sha256": "27ad28e7b28994fd4b9f47145d332ff10dc896fac0810f1d0007e46f0bdf31e2",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/iris/iris-expressions.moc3",
+      "dest": "public/handoff/assets/live2d/iris/iris-expressions.moc3",
+      "bytes": 744640,
+      "sha256": "a53e1e6898e5ddb216052d5da3a743636ce24532a42a94d24c72ba70a159d53e",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/iris/iris-expressions.model3.json",
+      "dest": "public/handoff/assets/live2d/iris/iris-expressions.model3.json",
+      "bytes": 151,
+      "sha256": "b29dc946a739ff99d8bd64e6f0bab2d636a6a5cecf2a508ff7056409d743c7a7",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/lena/lena-soft-anime-v2.4096/texture_00.png",
+      "dest": "public/handoff/assets/live2d/lena/lena-soft-anime-v2.4096/texture_00.png",
+      "bytes": 4121445,
+      "sha256": "cc41ed45da39ec00463401a0a8b72e0d5f4a7833f6a75a57731980a816deb18d",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/lena/lena-soft-anime-v2.blink.motion3.json",
+      "dest": "public/handoff/assets/live2d/lena/lena-soft-anime-v2.blink.motion3.json",
+      "bytes": 1155,
+      "sha256": "399f91b7bfac0666f589ab7c6daace5e33e5c6d6e7c6e7ca4024b6db48a65110",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/lena/lena-soft-anime-v2.cdi3.json",
+      "dest": "public/handoff/assets/live2d/lena/lena-soft-anime-v2.cdi3.json",
+      "bytes": 4775,
+      "sha256": "d49cffc7d49ef9c4ecd34a37b569d54c362ef70bf45f40f2e45857ab805612fd",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/lena/lena-soft-anime-v2.idle.motion3.json",
+      "dest": "public/handoff/assets/live2d/lena/lena-soft-anime-v2.idle.motion3.json",
+      "bytes": 15999,
+      "sha256": "14674d50d8765df706ac253975629f7cffe97a2442248a41af59f68d9cd3f2dc",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/lena/lena-soft-anime-v2.moc3",
+      "dest": "public/handoff/assets/live2d/lena/lena-soft-anime-v2.moc3",
+      "bytes": 367488,
+      "sha256": "91ade7978c80712860740e997eba5393686bb1f4948b622791eb6980659548c1",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/lena/lena-soft-anime-v2.model3.json",
+      "dest": "public/handoff/assets/live2d/lena/lena-soft-anime-v2.model3.json",
+      "bytes": 821,
+      "sha256": "7196fc113aa14e4f469a5303ba6dbe5678e243d1dd7df3889d2379868e716dcc",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/lena/lena-soft-anime-v2.nod.motion3.json",
+      "dest": "public/handoff/assets/live2d/lena/lena-soft-anime-v2.nod.motion3.json",
+      "bytes": 1751,
+      "sha256": "bfd9a247d5ec8479145c2dddfd5fdbf03e1c46df8d7460f07badd146c1e19418",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/lena/lena-soft-anime-v2.physics3.json",
+      "dest": "public/handoff/assets/live2d/lena/lena-soft-anime-v2.physics3.json",
+      "bytes": 6067,
+      "sha256": "3ecf3dd44c55bbae30295d2ebb7a05213660f35c90b15ba1be57f4092d563f14",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/lena/lena-soft-anime-v2.shake.motion3.json",
+      "dest": "public/handoff/assets/live2d/lena/lena-soft-anime-v2.shake.motion3.json",
+      "bytes": 1573,
+      "sha256": "81f50690b925cab5487c64cd1fc9781485a141f758a1f7085d36f0596bbfe54b",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/marcus/marcus-live2d.4096/texture_00.png",
+      "dest": "public/handoff/assets/live2d/marcus/marcus-live2d.4096/texture_00.png",
+      "bytes": 6993215,
+      "sha256": "44c0b0979b5c11f441aa85a8f1f1a72e4f2035b7c7cd38ae7ee977a2edf12d7e",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/marcus/marcus-live2d.blink.motion3.json",
+      "dest": "public/handoff/assets/live2d/marcus/marcus-live2d.blink.motion3.json",
+      "bytes": 1155,
+      "sha256": "399f91b7bfac0666f589ab7c6daace5e33e5c6d6e7c6e7ca4024b6db48a65110",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/marcus/marcus-live2d.cdi3.json",
+      "dest": "public/handoff/assets/live2d/marcus/marcus-live2d.cdi3.json",
+      "bytes": 4690,
+      "sha256": "a093f6ad5c430acb51a78a0ed1770744e4094d99d25b4dbc67822f380d8ce281",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/marcus/marcus-live2d.demo.motion3.json",
+      "dest": "public/handoff/assets/live2d/marcus/marcus-live2d.demo.motion3.json",
+      "bytes": 534751,
+      "sha256": "7a569d0cca4e81050a647f8cf62de7d4402dfe8596104c4db4172d4d46828ced",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/marcus/marcus-live2d.idle.motion3.json",
+      "dest": "public/handoff/assets/live2d/marcus/marcus-live2d.idle.motion3.json",
+      "bytes": 15999,
+      "sha256": "14674d50d8765df706ac253975629f7cffe97a2442248a41af59f68d9cd3f2dc",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/marcus/marcus-live2d.moc3",
+      "dest": "public/handoff/assets/live2d/marcus/marcus-live2d.moc3",
+      "bytes": 365120,
+      "sha256": "d50f76fa6a7902a06add8d5c76f9287c987dc82fd0efd467cd3989bf9ddc0c60",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/marcus/marcus-live2d.model3.json",
+      "dest": "public/handoff/assets/live2d/marcus/marcus-live2d.model3.json",
+      "bytes": 1020,
+      "sha256": "0b1eee2591d68b250a3478412115ab4d4ec6a444ae9ecbc9bb80e44a5064b556",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/marcus/marcus-live2d.nod.motion3.json",
+      "dest": "public/handoff/assets/live2d/marcus/marcus-live2d.nod.motion3.json",
+      "bytes": 1751,
+      "sha256": "bfd9a247d5ec8479145c2dddfd5fdbf03e1c46df8d7460f07badd146c1e19418",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/marcus/marcus-live2d.physics3.json",
+      "dest": "public/handoff/assets/live2d/marcus/marcus-live2d.physics3.json",
+      "bytes": 365,
+      "sha256": "68b5bbd65277b275fd682162db31f7ab442dba349997cab91b3100b214b3e2fd",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/marcus/marcus-live2d.shake.motion3.json",
+      "dest": "public/handoff/assets/live2d/marcus/marcus-live2d.shake.motion3.json",
+      "bytes": 1573,
+      "sha256": "81f50690b925cab5487c64cd1fc9781485a141f758a1f7085d36f0596bbfe54b",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/nora/nora-expressions.4096/texture_00.png",
+      "dest": "public/handoff/assets/live2d/nora/nora-expressions.4096/texture_00.png",
+      "bytes": 9926737,
+      "sha256": "e1674a86cade714845c4531b3d4c7910e3c682191986443a1e2f7d238b3dfe86",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/nora/nora-expressions.blink.motion3.json",
+      "dest": "public/handoff/assets/live2d/nora/nora-expressions.blink.motion3.json",
+      "bytes": 821,
+      "sha256": "31fad947cc4e9921127fe6ed91ac368d090e403dc3de882a30397695571c9e23",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/nora/nora-expressions.cdi3.json",
+      "dest": "public/handoff/assets/live2d/nora/nora-expressions.cdi3.json",
+      "bytes": 5008,
+      "sha256": "9c1d3ed06e4e54e622fce292bd60ad4910bdb908bfc174331cf7bc66f0938691",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/nora/nora-expressions.demo.motion3.json",
+      "dest": "public/handoff/assets/live2d/nora/nora-expressions.demo.motion3.json",
+      "bytes": 513938,
+      "sha256": "ca809956ec28127cece96a60a191d23ae05cdaa63dac3429bb0be1313bb70973",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/nora/nora-expressions.idle.motion3.json",
+      "dest": "public/handoff/assets/live2d/nora/nora-expressions.idle.motion3.json",
+      "bytes": 10958,
+      "sha256": "ac87e827a8b4c21762d65b932b17d009caf77e1982a967a6039623d71061fbcb",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/nora/nora-expressions.moc3",
+      "dest": "public/handoff/assets/live2d/nora/nora-expressions.moc3",
+      "bytes": 635968,
+      "sha256": "d3eb973f5044ac9e7d14f2e348ef5c6c0d2b7b3b1f4c46814f4f9c1c427c2b5c",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/nora/nora-expressions.model3.json",
+      "dest": "public/handoff/assets/live2d/nora/nora-expressions.model3.json",
+      "bytes": 1279,
+      "sha256": "7f1fc4dbf08034bc7039e5584c4e4f3eb31e9c2559e9e46d474d24e4eb904331",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/nora/nora-expressions.nod.motion3.json",
+      "dest": "public/handoff/assets/live2d/nora/nora-expressions.nod.motion3.json",
+      "bytes": 1230,
+      "sha256": "638ca6b03345727a79ff9d4a83ad736628dad8f44c16c66c0ae61fc0bb7c6218",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/nora/nora-expressions.physics3.json",
+      "dest": "public/handoff/assets/live2d/nora/nora-expressions.physics3.json",
+      "bytes": 6072,
+      "sha256": "3c9299431c1f86d2fe936b84a9920c6bb9af3a3a87d2edec3f561fbee327abe7",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/nora/nora-expressions.shake.motion3.json",
+      "dest": "public/handoff/assets/live2d/nora/nora-expressions.shake.motion3.json",
+      "bytes": 1093,
+      "sha256": "51d13c274f3ad4ecd1c8b28dd12fb14b740d234eca321e3594648dd32a995317",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/live2d/nora/nora-expressions.showcase.motion3.json",
+      "dest": "public/handoff/assets/live2d/nora/nora-expressions.showcase.motion3.json",
+      "bytes": 514376,
+      "sha256": "b03a16ea38b47fac943f93bd56fcac383f6d5e1f8f564dbcf3a30ba9ef65b711",
+      "rights": "private-user-authorized; commercial-redistribution-unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Core/LICENSE.md",
+      "dest": "public/handoff/assets/runtime/cubism/Core/LICENSE.md",
+      "bytes": 520,
+      "sha256": "b81e37048010ef1d336106151201a0323c3309cae44aecdedf57831fe88fa991",
+      "rights": "original SDK notice; no new acceptance",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Core/live2dcubismcore.min.js",
+      "dest": "public/handoff/assets/runtime/cubism/Core/live2dcubismcore.min.js",
+      "bytes": 228042,
+      "sha256": "8741f739779b5d5210872bd3d7d99f0f1e56e6c87409e7d26d6bb4b80aa1ef47",
+      "rights": "existing Core notices; no new agreement accepted; redistribution unverified",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/LICENSE.md",
+      "dest": "src/vendor/cubism-framework/LICENSE.md",
+      "bytes": 2234,
+      "sha256": "7ed849bff1e6499aa7cd882e47d246ddbbe06817c1e84cb974df949488302614",
+      "rights": "original SDK notice; no new acceptance",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/Shaders/WebGL/fragshadersrcalphablend.frag",
+      "dest": "public/handoff/assets/runtime/cubism/Framework/Shaders/WebGL/fragshadersrcalphablend.frag",
+      "bytes": 2189,
+      "sha256": "855b247f02042a808a41e282ee4d7de7cc4533abeb5032b4ab8fe84f7dec107f",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/Shaders/WebGL/fragshadersrccolorblend.frag",
+      "dest": "public/handoff/assets/runtime/cubism/Framework/Shaders/WebGL/fragshadersrccolorblend.frag",
+      "bytes": 7525,
+      "sha256": "01d4bf6a14b4a738976e9a538767a21da0defa8816f3845a7df08a7713327538",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/Shaders/WebGL/fragshadersrccopy.frag",
+      "dest": "public/handoff/assets/runtime/cubism/Framework/Shaders/WebGL/fragshadersrccopy.frag",
+      "bytes": 429,
+      "sha256": "15c67a4ec3adda4c849aff2a8319a3f6aceef8a84d5e5e1f3fb7fd9cd681193c",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/Shaders/WebGL/fragshadersrcmaskinvertedpremultipliedalpha.frag",
+      "dest": "public/handoff/assets/runtime/cubism/Framework/Shaders/WebGL/fragshadersrcmaskinvertedpremultipliedalpha.frag",
+      "bytes": 1051,
+      "sha256": "1005cff8113de587cf1c0e295288d04d85f0f4ebc223684c8340e017fd8fc788",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/Shaders/WebGL/fragshadersrcmaskpremultipliedalpha.frag",
+      "dest": "public/handoff/assets/runtime/cubism/Framework/Shaders/WebGL/fragshadersrcmaskpremultipliedalpha.frag",
+      "bytes": 1043,
+      "sha256": "f84ff615393d26ea6ab7c28747803db6472524c92567c0ad01e8225fbab36a3b",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/Shaders/WebGL/fragshadersrcpremultipliedalpha.frag",
+      "dest": "public/handoff/assets/runtime/cubism/Framework/Shaders/WebGL/fragshadersrcpremultipliedalpha.frag",
+      "bytes": 747,
+      "sha256": "c93abe215357cc782a25fc4ef20f5fe1f34e2cc193ee23d763b56b81fae5fce1",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/Shaders/WebGL/fragshadersrcpremultipliedalphablend.frag",
+      "dest": "public/handoff/assets/runtime/cubism/Framework/Shaders/WebGL/fragshadersrcpremultipliedalphablend.frag",
+      "bytes": 2038,
+      "sha256": "2155076275199a2946959838391dfb856e9d1db91b6ca3abd19ed70d4ff27e15",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/Shaders/WebGL/fragshadersrcsetupmask.frag",
+      "dest": "public/handoff/assets/runtime/cubism/Framework/Shaders/WebGL/fragshadersrcsetupmask.frag",
+      "bytes": 736,
+      "sha256": "3cccc0b68a56cfbf4bd4841b0a759431dd159812c38dc280981ba633fa0afe7a",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/Shaders/WebGL/vertshadersrc.vert",
+      "dest": "public/handoff/assets/runtime/cubism/Framework/Shaders/WebGL/vertshadersrc.vert",
+      "bytes": 465,
+      "sha256": "291ed3f35f71f1e71e6df33fb055f009a8a9b36ee664f74f24f6cefef0c4029b",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/Shaders/WebGL/vertshadersrcblend.vert",
+      "dest": "public/handoff/assets/runtime/cubism/Framework/Shaders/WebGL/vertshadersrcblend.vert",
+      "bytes": 738,
+      "sha256": "2589837bd7a6a550a1c3af41b4fa776011e6e71f2531320fa39afcb83b209bf4",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/Shaders/WebGL/vertshadersrccopy.vert",
+      "dest": "public/handoff/assets/runtime/cubism/Framework/Shaders/WebGL/vertshadersrccopy.vert",
+      "bytes": 392,
+      "sha256": "b7bc4ba7517f405af4812ac47d99bc2b633c99f463c1224029556b00e8dff3cf",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/Shaders/WebGL/vertshadersrcmasked.vert",
+      "dest": "public/handoff/assets/runtime/cubism/Framework/Shaders/WebGL/vertshadersrcmasked.vert",
+      "bytes": 559,
+      "sha256": "6704a9df2e6d3ee5176c72fca4ba59358ba4827a07054b1e0a72a3c574e281fd",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/Shaders/WebGL/vertshadersrcsetupmask.vert",
+      "dest": "public/handoff/assets/runtime/cubism/Framework/Shaders/WebGL/vertshadersrcsetupmask.vert",
+      "bytes": 536,
+      "sha256": "649aad2f6c0af55a7a4adcf33dbf78937ef9d77ed6ba917fd716176adce25afe",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/cubismdefaultparameterid.ts",
+      "dest": "src/vendor/cubism-framework/src/cubismdefaultparameterid.ts",
+      "bytes": 5783,
+      "sha256": "f92e20db8145f06b73728fb6ba4215bbaed723e26959471f2e291962142c95b5",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/cubismframeworkconfig.ts",
+      "dest": "src/vendor/cubism-framework/src/cubismframeworkconfig.ts",
+      "bytes": 1111,
+      "sha256": "92399ad1a572ec6048ea351ce4363b357f6f86471f9edb4af84bb7e16790828b",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/cubismmodelsettingjson.ts",
+      "dest": "src/vendor/cubism-framework/src/cubismmodelsettingjson.ts",
+      "bytes": 24382,
+      "sha256": "58ff868afbdab05f905782be3ae411c787ad0c9c3e79ad254fc596d08bbe0b6e",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/effect/cubismbreath.ts",
+      "dest": "src/vendor/cubism-framework/src/effect/cubismbreath.ts",
+      "bytes": 3765,
+      "sha256": "06da2c2c10e91782fb99833c94842e6267dc996ddb35a1bfb99765f053c7729a",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/effect/cubismeyeblink.ts",
+      "dest": "src/vendor/cubism-framework/src/effect/cubismeyeblink.ts",
+      "bytes": 7222,
+      "sha256": "a1c26cfcf2656424f370e17d4b4cb0f9642db2dd452af8f562c67ced26ba64de",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/effect/cubismlook.ts",
+      "dest": "src/vendor/cubism-framework/src/effect/cubismlook.ts",
+      "bytes": 3657,
+      "sha256": "3c7f7dbea7b34c524bcf36fb5a15f9264d4a8a7228f5b124fdaddb2c82193f21",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/effect/cubismpose.ts",
+      "dest": "src/vendor/cubism-framework/src/effect/cubismpose.ts",
+      "bytes": 11698,
+      "sha256": "8eba3f692c8cd267ca75664d035565c6f61ac38201c56e7e2aa04389b964f1c2",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/icubismallcator.ts",
+      "dest": "src/vendor/cubism-framework/src/icubismallcator.ts",
+      "bytes": 1932,
+      "sha256": "d0c3a178e6c6b86697117eac21cd7faa422bf180b4cc84adecfc3491c573055f",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/icubismmodelsetting.ts",
+      "dest": "src/vendor/cubism-framework/src/icubismmodelsetting.ts",
+      "bytes": 6652,
+      "sha256": "87543afb93a5938211c08c2e5ae0116d0fd2bd813f92f3b5f48cf38105b1cf39",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/id/cubismid.ts",
+      "dest": "src/vendor/cubism-framework/src/id/cubismid.ts",
+      "bytes": 2281,
+      "sha256": "ff10538238bcda0a97756bf3e6017409acfdb901657174e7f6a027b965d34ee0",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/id/cubismidmanager.ts",
+      "dest": "src/vendor/cubism-framework/src/id/cubismidmanager.ts",
+      "bytes": 2413,
+      "sha256": "1ae3c3b2de5462d1bf6a98b5878eb7228d228d67adc7426bf549702fe6a5551e",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/live2dcubismframework.ts",
+      "dest": "src/vendor/cubism-framework/src/live2dcubismframework.ts",
+      "bytes": 8900,
+      "sha256": "dc20093ded82ed6704d94a443fa28961ba23aefb64fb76b9be35c8de869bd934",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/math/cubismmath.ts",
+      "dest": "src/vendor/cubism-framework/src/math/cubismmath.ts",
+      "bytes": 9603,
+      "sha256": "2e6816bfcecc459bb1c8bd7fcaa03f971b2545c90a9c75a7236cca9a0c282961",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/math/cubismmatrix44.ts",
+      "dest": "src/vendor/cubism-framework/src/math/cubismmatrix44.ts",
+      "bytes": 8038,
+      "sha256": "aa81745acf70315c536d0bada6cc422822765b2f44f8088a2ccea6cb6f9edc0d",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/math/cubismmodelmatrix.ts",
+      "dest": "src/vendor/cubism-framework/src/math/cubismmodelmatrix.ts",
+      "bytes": 4715,
+      "sha256": "31e8787385c4c26d78d2f627f373d7a446db1a72d38f247a442a9bc9de42ee0f",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/math/cubismtargetpoint.ts",
+      "dest": "src/vendor/cubism-framework/src/math/cubismtargetpoint.ts",
+      "bytes": 5764,
+      "sha256": "b09812890e639d89f96e0b1774a4ccdc076d1174fcb3daa95b0acd8102285999",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/math/cubismvector2.ts",
+      "dest": "src/vendor/cubism-framework/src/math/cubismvector2.ts",
+      "bytes": 4153,
+      "sha256": "369b0c0b842432f7156827bf77047276fb23b10301d9f5d40762497b9f75372d",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/math/cubismviewmatrix.ts",
+      "dest": "src/vendor/cubism-framework/src/math/cubismviewmatrix.ts",
+      "bytes": 8345,
+      "sha256": "3276768bd6efbe287a3384eb1960f6c1901f10137f38396096a9e8e84b9a65f5",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/model/cubismmoc.ts",
+      "dest": "src/vendor/cubism-framework/src/model/cubismmoc.ts",
+      "bytes": 3675,
+      "sha256": "99a80e2102af7b3ba10b15d684f965930707018b6b239a0ce6d14e3a867f266b",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/model/cubismmodel.ts",
+      "dest": "src/vendor/cubism-framework/src/model/cubismmodel.ts",
+      "bytes": 62659,
+      "sha256": "fa4c21a270b3d18ae9f550cebf181d54504cf4b4198f1eeba6d0f3c55d7055a5",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/model/cubismmodelmultiplyandscreencolor.ts",
+      "dest": "src/vendor/cubism-framework/src/model/cubismmodelmultiplyandscreencolor.ts",
+      "bytes": 31866,
+      "sha256": "478b4fb805e6d4b5c450a58f29eaebcf75d176f87421797e218b0e3542a3b4b3",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/model/cubismmodeluserdata.ts",
+      "dest": "src/vendor/cubism-framework/src/model/cubismmodeluserdata.ts",
+      "bytes": 4248,
+      "sha256": "d4aaf59e04f834de345e0f9f1cced1062c28c9b1203bf09da17a0a8c2dddb6c4",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/model/cubismmodeluserdatajson.ts",
+      "dest": "src/vendor/cubism-framework/src/model/cubismmodeluserdatajson.ts",
+      "bytes": 3035,
+      "sha256": "4c8f546a393ac47bf8245dd8f7ae65e50eb61518578c33c3ad28ef23b2ffa4c1",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/model/cubismusermodel.ts",
+      "dest": "src/vendor/cubism-framework/src/model/cubismusermodel.ts",
+      "bytes": 15104,
+      "sha256": "41707e75f0ab36808a3ba42d40a477d0b33e7c7da73cbce5a3de0771bd957a9c",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/motion/acubismmotion.ts",
+      "dest": "src/vendor/cubism-framework/src/motion/acubismmotion.ts",
+      "bytes": 14092,
+      "sha256": "649524b171f1a3ab8588a16dcb707a4f0da848f7fb87ad2b34148e0eea45ee08",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/motion/cubismbreathupdater.ts",
+      "dest": "src/vendor/cubism-framework/src/motion/cubismbreathupdater.ts",
+      "bytes": 1698,
+      "sha256": "57acaadd41e6dac1ca31f69521166edf8366508e3dcf21ce9279687df72080df",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/motion/cubismexpressionmotion.ts",
+      "dest": "src/vendor/cubism-framework/src/motion/cubismexpressionmotion.ts",
+      "bytes": 12157,
+      "sha256": "20a75e357391116974a589fe8a9e5da3234cd214a214df94407f29b0152e86c5",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/motion/cubismexpressionmotionmanager.ts",
+      "dest": "src/vendor/cubism-framework/src/motion/cubismexpressionmotionmanager.ts",
+      "bytes": 9079,
+      "sha256": "17a12b23cf811cf8c7794b67beef53d47b10070ebd1d05a87becafe4a03fc403",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/motion/cubismexpressionupdater.ts",
+      "dest": "src/vendor/cubism-framework/src/motion/cubismexpressionupdater.ts",
+      "bytes": 1989,
+      "sha256": "75fcf716ce50acd81c4d5f3e1179c6557e32fa4b8960d373aa36fe2734ec0c1b",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/motion/cubismeyeblinkupdater.ts",
+      "dest": "src/vendor/cubism-framework/src/motion/cubismeyeblinkupdater.ts",
+      "bytes": 2187,
+      "sha256": "a7e90b32cc8d47600ee0b2da44106efe4ea2a915556ccb28d6aa7f3ff93a5dcc",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/motion/cubismlipsyncupdater.ts",
+      "dest": "src/vendor/cubism-framework/src/motion/cubismlipsyncupdater.ts",
+      "bytes": 3003,
+      "sha256": "390bc6da44e9d2b38704b990cbbe31442b562eeb2b7d4bc1a17a1a94034958a3",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/motion/cubismlookupdater.ts",
+      "dest": "src/vendor/cubism-framework/src/motion/cubismlookupdater.ts",
+      "bytes": 2155,
+      "sha256": "a8fc4734ae53fa0f1b65b38a5358e6e7a456429a2743fc20f5fad637659bae18",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/motion/cubismmotion.ts",
+      "dest": "src/vendor/cubism-framework/src/motion/cubismmotion.ts",
+      "bytes": 37913,
+      "sha256": "eb3e8862f60feedd12bc47300d8486b044c39a8af21e66f12613ce941c8fa5f6",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/motion/cubismmotioninternal.ts",
+      "dest": "src/vendor/cubism-framework/src/motion/cubismmotioninternal.ts",
+      "bytes": 4928,
+      "sha256": "ede0f46ebdd0f4e0c25f5ba1825f6bccf658a463e08c0bc72a8af26230865805",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/motion/cubismmotionjson.ts",
+      "dest": "src/vendor/cubism-framework/src/motion/cubismmotionjson.ts",
+      "bytes": 12496,
+      "sha256": "92eb9dd6fbe6086e02952fec021cf0daa68a3fc335ae88dd19ee281591b34c64",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/motion/cubismmotionmanager.ts",
+      "dest": "src/vendor/cubism-framework/src/motion/cubismmotionmanager.ts",
+      "bytes": 3821,
+      "sha256": "7e88b825f99e4cbc1fd13ae07a7f5063a20ef9d96bf86855e426fb221813e72d",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/motion/cubismmotionqueueentry.ts",
+      "dest": "src/vendor/cubism-framework/src/motion/cubismmotionqueueentry.ts",
+      "bytes": 7248,
+      "sha256": "4619da4891829c7f8f5741a4b7f711a6cc2beb9fa06075a2b8caefec20b2ea19",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/motion/cubismmotionqueuemanager.ts",
+      "dest": "src/vendor/cubism-framework/src/motion/cubismmotionqueuemanager.ts",
+      "bytes": 10707,
+      "sha256": "1aa0f6a39ffe9d83e0e06217a9cf6ebdf3a6e593242ff84d08684bbd2f4a01bb",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/motion/cubismphysicsupdater.ts",
+      "dest": "src/vendor/cubism-framework/src/motion/cubismphysicsupdater.ts",
+      "bytes": 1719,
+      "sha256": "003fda6b8a6537b75fff8f0cd4894d9f7f9ee0a1f668197d91d497adab3dbdd9",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/motion/cubismposeupdater.ts",
+      "dest": "src/vendor/cubism-framework/src/motion/cubismposeupdater.ts",
+      "bytes": 1644,
+      "sha256": "58658839ea9aab83da69b91d6e54b9825ddb80cca47ee5c1cef615715e58c28e",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/motion/cubismupdatescheduler.ts",
+      "dest": "src/vendor/cubism-framework/src/motion/cubismupdatescheduler.ts",
+      "bytes": 5149,
+      "sha256": "ab59717783d79bf3675e55cf2037683cced648bca4a47dcb438c78184c9b1b5e",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/motion/icubismupdater.ts",
+      "dest": "src/vendor/cubism-framework/src/motion/icubismupdater.ts",
+      "bytes": 3688,
+      "sha256": "ba937ffd59bc52f4de426aadac4269630e0267d36b5ba9acab788993f586feea",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/motion/iparameterprovider.ts",
+      "dest": "src/vendor/cubism-framework/src/motion/iparameterprovider.ts",
+      "bytes": 1156,
+      "sha256": "c0b8c01f855dcf4e25a08ad19afb5136d8f92f3d6536ba125194c649df140b0b",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/physics/cubismphysics.ts",
+      "dest": "src/vendor/cubism-framework/src/physics/cubismphysics.ts",
+      "bytes": 44141,
+      "sha256": "41457e7486d380825f30936e34951c0de5362769e8229b99c28702a5a398d734",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/physics/cubismphysicsinternal.ts",
+      "dest": "src/vendor/cubism-framework/src/physics/cubismphysicsinternal.ts",
+      "bytes": 8981,
+      "sha256": "db6ee02fe53f01f9575149d33ae44fc69876b32225da921b44bfc8a6d294082b",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/physics/cubismphysicsjson.ts",
+      "dest": "src/vendor/cubism-framework/src/physics/cubismphysicsjson.ts",
+      "bytes": 17868,
+      "sha256": "cc52bf67990131e322626729a044640b016e57b42dde80c0dfd4054af815d9b2",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/rendering/cubismclippingmanager.ts",
+      "dest": "src/vendor/cubism-framework/src/rendering/cubismclippingmanager.ts",
+      "bytes": 38519,
+      "sha256": "b38ca529a5bedac4eaa0d0ff04ae4ccaaaf3173d04250dc01af4e88e72730ec9",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/rendering/cubismoffscreenmanager.ts",
+      "dest": "src/vendor/cubism-framework/src/rendering/cubismoffscreenmanager.ts",
+      "bytes": 18723,
+      "sha256": "06c8d8c7c7fcdafd126f5f01881a023f8a4158c6222cf54e4672bd35a0609ebc",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/rendering/cubismoffscreenrendertarget_webgl.ts",
+      "dest": "src/vendor/cubism-framework/src/rendering/cubismoffscreenrendertarget_webgl.ts",
+      "bytes": 7489,
+      "sha256": "04ae8ccfa59c8dc1f43528ec0ceccd06b4180e582c802d14e38a1eaf14c0694c",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/rendering/cubismrenderer.ts",
+      "dest": "src/vendor/cubism-framework/src/rendering/cubismrenderer.ts",
+      "bytes": 13697,
+      "sha256": "42f6fa6343effdb9085cd1cd49b62f06f6e172483583c3cf325e0859aee8f9c8",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/rendering/cubismrenderer_webgl.ts",
+      "dest": "src/vendor/cubism-framework/src/rendering/cubismrenderer_webgl.ts",
+      "bytes": 62458,
+      "sha256": "f054aa514bf1ee4d162698de62bc3565d8e18ef348dd9234d6dab1e78bc0e678",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/rendering/cubismrendertarget_webgl.ts",
+      "dest": "src/vendor/cubism-framework/src/rendering/cubismrendertarget_webgl.ts",
+      "bytes": 8511,
+      "sha256": "8948ac1fb66fd32a289d9e07929ef2d8e41c6deb103948e54faa6f45ebad8f21",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/rendering/cubismshader_webgl.ts",
+      "dest": "src/vendor/cubism-framework/src/rendering/cubismshader_webgl.ts",
+      "bytes": 70603,
+      "sha256": "daf9bfcbed82f4763e401fbc1ccf740e1da0a99943dbec6afb3cdfb6c3d94a32",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/type/csmrectf.ts",
+      "dest": "src/vendor/cubism-framework/src/type/csmrectf.ts",
+      "bytes": 2019,
+      "sha256": "c199fdc276d2d66ed3abd140b137a3e127fc52b5735869849d450eacd5f416d8",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/utils/cubismarrayutils.ts",
+      "dest": "src/vendor/cubism-framework/src/utils/cubismarrayutils.ts",
+      "bytes": 1073,
+      "sha256": "0f63d3a9e6f25a097905503ccedfe21130b6b857238569341628f158d44afa60",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/utils/cubismdebug.ts",
+      "dest": "src/vendor/cubism-framework/src/utils/cubismdebug.ts",
+      "bytes": 5369,
+      "sha256": "0a526141825d6a980d838e95fc6856a4362173674bb6469d8bd40d054e9e7520",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/utils/cubismjson.ts",
+      "dest": "src/vendor/cubism-framework/src/utils/cubismjson.ts",
+      "bytes": 29319,
+      "sha256": "39d9f1806b7a6909098e1b8e2b7a1af567bbd0d6800b25beeaba4cb857c7b9f0",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/utils/cubismjsonextension.ts",
+      "dest": "src/vendor/cubism-framework/src/utils/cubismjsonextension.ts",
+      "bytes": 3691,
+      "sha256": "31e7a859c82c05e869651538077bb784737c459f6408a7aa3d460ba2697f3ddd",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/Framework/src/utils/cubismstring.ts",
+      "dest": "src/vendor/cubism-framework/src/utils/cubismstring.ts",
+      "bytes": 3356,
+      "sha256": "746c4da878164ecb6444addf2934e9086897b08f0fb68fb1a5f85132f5f76a7c",
+      "rights": "existing Framework license; inspect original notice",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/LICENSE.md",
+      "dest": "public/handoff/assets/runtime/cubism/LICENSE.md",
+      "bytes": 3042,
+      "sha256": "787a7d1454240865420b96ea9a20ab5e1a5ec3c1abced2e308288c2de8aac991",
+      "rights": "original SDK notice; no new acceptance",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "assets/runtime/cubism/README.md",
+      "dest": "public/handoff/assets/runtime/cubism/README.md",
+      "bytes": 585,
+      "sha256": "bf7a11a4106f24d8a84e95f00f83f9c92d49ad8e4d06ba8a63139321c3e9fc15",
+      "rights": "see handoff 08_ASSETS_AND_RIGHTS.md",
+      "status": null
+    },
+    {
+      "rel": "assets/runtime/cubism/SDK_README_ORIGINAL.txt",
+      "dest": "public/handoff/assets/runtime/cubism/SDK_README_ORIGINAL.txt",
+      "bytes": 5576,
+      "sha256": "86272765f67de6cc527ea2e6bd4a0006681a1326c5de927475a50c2741857772",
+      "rights": "original SDK notice; no new acceptance",
+      "status": "reference; not product acceptance"
+    },
+    {
+      "rel": "verification/MODEL_PINS.json",
+      "dest": "public/handoff/verification/MODEL_PINS.json",
+      "bytes": 4456,
+      "sha256": "b44cff064eb2631d3d5217d1d57c1b4efcd38d0ed74b58d0ed0689cc1dc7b126",
+      "rights": "handoff verification metadata",
+      "status": null
+    }
+  ],
+  "missing": [],
+  "mismatched": []
+}
\ No newline at end of file
diff --git a/everwith-claude-frontend/docs/GENERATED_ASSETS.json b/everwith-claude-frontend/docs/GENERATED_ASSETS.json
new file mode 100644
index 00000000..4feba134
--- /dev/null
+++ b/everwith-claude-frontend/docs/GENERATED_ASSETS.json
@@ -0,0 +1,1754 @@
+{
+ "schema": "everwith-generated-assets-v1",
+ "batch": "v2-batch-01",
+ "rights": "用户经 GPT 生成并提供；商用/再分发权未核实",
+ "note": "User-provided GPT output. Not part of the original handoff package; commercial use and redistribution are unverified. Only resized here (see transform).",
+ "source": {
+  "dropbox_folder": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/",
+  "manifest_sha256": "03e10cd7e985b70a2edd4fc4b3ca25ac71ee6ca6b2d35a9d3be518d59f1d533d",
+  "sha256sums_sha256": "f14a47a4366fb3c58dd34a710e78ffd825ecd0830339466a3f960c4a9d1c9ed7",
+  "slots": 45,
+  "images": 59
+ },
+ "derived_with": {
+  "pillow": "12.3.0"
+ },
+ "assets": [
+  {
+   "slot": "story-last-train-cover-tall",
+   "chosen_variant": "a",
+   "used_in": "Discover story card (4:5), story preparation poster (3:4), Recent / continue / play-together thumbnails",
+   "original": {
+    "file": "story-last-train-cover-tall__a.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/story-last-train-cover-tall__a.png",
+    "sha256": "916afdf6d0d0167926b03f0338d18094cc7cc541695ef39133ede9aedd43dcdb",
+    "bytes": 2602231,
+    "dims": [
+     1024,
+     1536
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T03:40:23.740Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "new text-prompt generation in v2 thread",
+    "qa_status": "checked: full image and contact sheet/crop previews; accepted",
+    "reference_images": [],
+    "prompt": "Portrait 2:3 illustration of the waiting room of a small old railway station on a rainy night, just after the last train has left. In the lower center a worn vintage brown leather suitcase with brass corners stands upright beside an empty wooden bench; a rain-soaked paper luggage tag hangs from its handle, its ink run and unreadable. Two old pendant lamps pool warm amber light on the bench and the terrazzo floor; behind them a tall window shows a wet, empty platform under deep blue night, rain streaks on the glass and a distant red signal light. Quiet, gentle mystery: a little lonely but safe. Keep the suitcase and the bench inside the central square of the frame. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.",
+    "actual_prompt": "Portrait 2:3 illustration of the waiting room of a small old railway station on a rainy night, just after the last train has left. In the lower center a worn vintage brown leather suitcase with brass corners stands upright beside an empty wooden bench; a rain-soaked paper luggage tag hangs from its handle, its ink run and unreadable. Two old pendant lamps pool warm amber light on the bench and the terrazzo floor; behind them a tall window shows a wet, empty platform under deep blue night, rain streaks on the glass and a distant red signal light. Quiet, gentle mystery: a little lonely but safe. Keep the suitcase and the bench inside the central square of the frame. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.\n\nProduction constraints: Output one original PNG at the largest native size supported for 2:3 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 手提箱和长椅放在画面中央的正方形里. Continuity: modest early twentieth-century rural station, teal painted wooden trim, tall rectangular windows, cream plaster, dark walnut benches, terrazzo floor; when the suitcase is required, use the same upright worn brown leather rectangular suitcase, brass corners and pale blank paper tag. No train-brand identifiers. Candidate A: balanced front-facing viewpoint and compact centered subject grouping, with calm negative space."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/story-last-train-cover-tall.webp",
+    "url": "/generated/batch-01/story-last-train-cover-tall.webp",
+    "sha256": "8db4e77c2c9dadd8407f5210b0ee35536a91c12f92d06b1839ea48d244a003b5",
+    "bytes": 150984,
+    "dims": [
+     768,
+     1152
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1024x1536 -> 768x1152; WebP q82 method 6"
+   },
+   "unused_candidates": [
+    "story-last-train-cover-tall__b.png"
+   ]
+  },
+  {
+   "slot": "story-last-train-cover-wide",
+   "chosen_variant": "a",
+   "used_in": "Story detail hero (4:3)",
+   "original": {
+    "file": "story-last-train-cover-wide__a.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/story-last-train-cover-wide__a.png",
+    "sha256": "5f8b1a0ab5c94fc87d3dd4d3417c28c486b4dcf46125b1276db0fa37a8cf6c67",
+    "bytes": 2678933,
+    "dims": [
+     1536,
+     1024
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T03:41:45.153Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "new text-prompt generation in v2 thread",
+    "qa_status": "checked: full image and contact sheet/crop previews; accepted",
+    "reference_images": [],
+    "prompt": "Landscape 3:2 illustration of the waiting room of a small old railway station on a rainy night, just after the last train has left. Centered: a worn vintage brown leather suitcase with brass corners standing beside an empty wooden bench, a rain-soaked paper luggage tag with run, unreadable ink. Warm amber pendant lamps; tall windows on both sides show a wet empty platform under deep blue night, rain streaks, a distant red signal light. Quiet, gentle mystery, a little lonely but safe. Keep the suitcase and bench within the middle two-thirds of the width. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.",
+    "actual_prompt": "Landscape 3:2 illustration of the waiting room of a small old railway station on a rainy night, just after the last train has left. Centered: a worn vintage brown leather suitcase with brass corners standing beside an empty wooden bench, a rain-soaked paper luggage tag with run, unreadable ink. Warm amber pendant lamps; tall windows on both sides show a wet empty platform under deep blue night, rain streaks, a distant red signal light. Quiet, gentle mystery, a little lonely but safe. Keep the suitcase and bench within the middle two-thirds of the width. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.\n\nProduction constraints: Output one original PNG at the largest native size supported for 3:2 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 主体在中间 2/3 宽度内. Continuity: modest early twentieth-century rural station, teal painted wooden trim, tall rectangular windows, cream plaster, dark walnut benches, terrazzo floor; when the suitcase is required, use the same upright worn brown leather rectangular suitcase, brass corners and pale blank paper tag. No train-brand identifiers. Candidate A: balanced front-facing viewpoint and compact centered subject grouping, with calm negative space."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/story-last-train-cover-wide.webp",
+    "url": "/generated/batch-01/story-last-train-cover-wide.webp",
+    "sha256": "4e8010033d7d34d5463745a859f7fb837720d50784c0323a2cb97d75246a691a",
+    "bytes": 188054,
+    "dims": [
+     1280,
+     853
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1536x1024 -> 1280x853; WebP q82 method 6"
+   },
+   "unused_candidates": [
+    "story-last-train-cover-wide__b.png"
+   ]
+  },
+  {
+   "slot": "story-last-train-scene-waiting-room",
+   "chosen_variant": null,
+   "used_in": "Story play scene banner: opening and beat 1",
+   "original": {
+    "file": "story-last-train-scene-waiting-room.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/story-last-train-scene-waiting-room.png",
+    "sha256": "f5a2ad0a9b4ec8c212bc8e674683ee159f0e8d643e205cf1c78c47b5b5ea118a",
+    "bytes": 2214677,
+    "dims": [
+     1536,
+     1024
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T03:48:06.874Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "built-in edit of own newly generated v2 source; original and all prompts in reworks",
+    "qa_status": "checked: full image and contact sheet/crop previews; accepted",
+    "reference_images": [],
+    "prompt": "Wide landscape 3:2 view of the waiting room of a small old railway station on a rainy night, just after the last train has left, at about 1 a.m.: rows of wooden benches, a shuttered ticket window, a round wall clock with plain hands and no numerals, a small lost-and-found counter with a brass bell and a closed logbook, and an old brown leather suitcase standing beside a bench in the middle ground. Only a few warm lamps are on; the rest falls into soft blue shadow; rain on tall windows, a wet platform glimpsed outside. Calm, slightly mysterious slice-of-life mood; an ordinary working station, not abandoned. Keep all key objects in the middle horizontal band of the frame. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.",
+    "actual_prompt": "Edit this image only: resize the central midground wooden bench and its one tagged leather suitcase to 65% of their current size, move their grouping up so the whole grouping sits between y=440 and y=660 in this 1536x1024 frame. Keep only one suitcase. Move the numeral-free round wall clock down to have its full outline from y=455 to y=525. Preserve the closed ticket window, brass bell and closed blank logbook at the right counter, their current locations, station architecture, rain, blue night and amber light. No text, writing, glyphs, logos or humans. Keep native 1536x1024, no enlargement."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/story-last-train-scene-waiting-room.webp",
+    "url": "/generated/batch-01/story-last-train-scene-waiting-room.webp",
+    "sha256": "47dfaf081d85d488ff7384a129030aa3d701bbcbec6c812dfa21d8ee92513dd3",
+    "bytes": 128322,
+    "dims": [
+     1280,
+     853
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1536x1024 -> 1280x853; WebP q80 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "story-last-train-scene-corner",
+   "chosen_variant": null,
+   "used_in": "Story play scene banner: beat 2",
+   "original": {
+    "file": "story-last-train-scene-corner.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/story-last-train-scene-corner.png",
+    "sha256": "2c2ecbb9b6417c018661eda445c84107bf88891aec547ba75e322040776ff350",
+    "bytes": 2686362,
+    "dims": [
+     1536,
+     1024
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T03:51:44.412Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "new text-prompt generation in v2 thread",
+    "qa_status": "checked: full image and contact sheet/crop previews; accepted",
+    "reference_images": [],
+    "prompt": "Wide landscape 3:2 view of a quiet corner of the waiting room of a small old railway station on a rainy night, just after the last train has left: an old cast-iron radiator, a single bench with a folded woollen scarf and a paper cup of tea left on it, a dim wall lamp, a rain-streaked window with the blue platform lights beyond. Tender, hesitant mood, as if someone has just stood up. Keep the bench and the scarf in the middle horizontal band. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.",
+    "actual_prompt": "Wide landscape 3:2 view of a quiet corner of the waiting room of a small old railway station on a rainy night, just after the last train has left: an old cast-iron radiator, a single bench with a folded woollen scarf and a paper cup of tea left on it, a dim wall lamp, a rain-streaked window with the blue platform lights beyond. Tender, hesitant mood, as if someone has just stood up. Keep the bench and the scarf in the middle horizontal band. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.\n\nProduction constraints: Output one original PNG at the largest native size supported for 3:2 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 中段横条. Compose key props on one horizontal plane around 52.5% image height, entirely within a central 5:1 crop spanning 37.5%-67.5% image height. Pull the camera back enough to preserve key props in that thin strip. Continuity: modest early twentieth-century rural station, teal painted wooden trim, tall rectangular windows, cream plaster, dark walnut benches, terrazzo floor; when the suitcase is required, use the same upright worn brown leather rectangular suitcase, brass corners and pale blank paper tag. No train-brand identifiers."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/story-last-train-scene-corner.webp",
+    "url": "/generated/batch-01/story-last-train-scene-corner.webp",
+    "sha256": "62ae7c62ab0d5774503a349f5273484c7c65a5d743a6948d20958796256e560f",
+    "bytes": 168656,
+    "dims": [
+     1280,
+     853
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1536x1024 -> 1280x853; WebP q80 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "story-last-train-scene-duty-room",
+   "chosen_variant": null,
+   "used_in": "Story play scene banner: beat 3",
+   "original": {
+    "file": "story-last-train-scene-duty-room.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/story-last-train-scene-duty-room.png",
+    "sha256": "73aedfb7f2bd948aa2d3da88dcda8b53e81a7c68b3e2ff6d4b3db36cb8953ae5",
+    "bytes": 2189512,
+    "dims": [
+     1536,
+     1024
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T03:46:53.672Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "new text-prompt generation in v2 thread",
+    "qa_status": "checked: full image and contact sheet/crop previews; accepted",
+    "reference_images": [],
+    "prompt": "Wide landscape 3:2 view of the small duty room / lost-property office of the same old railway station just before dawn: a tidy wooden desk with an open logbook and a fountain pen (handwriting not legible), a metal flashlight, a wall board with several keys on hooks, and the old brown leather suitcase placed on a shelf inside a wire-mesh locker. A green-shaded desk lamp gives warm light while the window shows the sky turning pale blue-grey at dawn. Orderly, calm, reassuring. Key objects in the middle horizontal band. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, pale dawn light meeting warm lamplight, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.",
+    "actual_prompt": "Wide landscape 3:2 view of the small duty room / lost-property office of the same old railway station just before dawn: a tidy wooden desk with an open logbook and a fountain pen (handwriting not legible), a metal flashlight, a wall board with several keys on hooks, and the old brown leather suitcase placed on a shelf inside a wire-mesh locker. A green-shaded desk lamp gives warm light while the window shows the sky turning pale blue-grey at dawn. Orderly, calm, reassuring. Key objects in the middle horizontal band. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, pale dawn light meeting warm lamplight, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.\n\nProduction constraints: Output one original PNG at the largest native size supported for 3:2 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 中段横条. Compose key props on one horizontal plane around 52.5% image height, entirely within a central 5:1 crop spanning 37.5%-67.5% image height. Pull the camera back enough to preserve key props in that thin strip. Continuity: modest early twentieth-century rural station, teal painted wooden trim, tall rectangular windows, cream plaster, dark walnut benches, terrazzo floor; when the suitcase is required, use the same upright worn brown leather rectangular suitcase, brass corners and pale blank paper tag. No train-brand identifiers. Final composition override: ALL keys and the whole small key board must hang LOW immediately behind the desk, entirely between 39% and 60% image height; suitcase inside locker between 40% and 63%; whole desktop with open blank logbook, single fountain pen and flashlight between 53% and 66%; low green lamp shade between 39% and 50%. Camera pulled far back. Absolutely blank book pages: no handwriting strokes, marks or ink. Exactly one suitcase with rounded brass corner guards matching the cover, standing vertically."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/story-last-train-scene-duty-room.webp",
+    "url": "/generated/batch-01/story-last-train-scene-duty-room.webp",
+    "sha256": "2319267b88c1bd89e11ecf1bf58039c3b3947ca21fb4664368c81eff3278843b",
+    "bytes": 105316,
+    "dims": [
+     1280,
+     853
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1536x1024 -> 1280x853; WebP q80 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "story-last-train-scene-platform-dawn",
+   "chosen_variant": null,
+   "used_in": "Story play scene banner: open mode after the last beat",
+   "original": {
+    "file": "story-last-train-scene-platform-dawn.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/story-last-train-scene-platform-dawn.png",
+    "sha256": "a5817285ec7619a0b048062b1e765f6044fc3669944cb6d08c01ba48fb82e38e",
+    "bytes": 2568097,
+    "dims": [
+     1536,
+     1024
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T04:12:48.020Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "built-in edit of own new v2 source",
+    "qa_status": "checked: full image and contact sheet/crop previews; accepted",
+    "reference_images": [],
+    "prompt": "Wide landscape 3:2 view of an empty small-town railway platform at dawn after a rainy night: wet concrete reflecting a pale peach-and-blue sky, rails curving away into light mist, a single wooden bench, an illuminated departure board glowing softly with abstract light rows only (no characters), overhead wires catching the first light. Hopeful, quiet morning. Key elements in the middle horizontal band. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, pale dawn light meeting warm lamplight, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.",
+    "actual_prompt": "Edit only the departure display: move the small glowing display down and to the right, mount it on a short dark teal post near the wooden bench with its complete rectangle from y=445 to y=500 in the 1536x1024 image. Its screen contains ONLY three continuous horizontal bars of amber light, absolutely no segmented characters or glyphs. Remove the old hanging display and the small plaque on the station wall. Keep the single bench, sunrise, wet platform, rails, wire system, empty station and style unchanged. No text, numerals, people or silhouettes anywhere. Preserve native size, no enlargement."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/story-last-train-scene-platform-dawn.webp",
+    "url": "/generated/batch-01/story-last-train-scene-platform-dawn.webp",
+    "sha256": "9024a2db5a76eb389ebcd696540561ccd8c9d07cb263b13ef1cec5dac1fc73d8",
+    "bytes": 166868,
+    "dims": [
+     1280,
+     853
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1536x1024 -> 1280x853; WebP q80 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "story-promise-rain-cover-tall",
+   "chosen_variant": "a",
+   "used_in": "Discover story card (4:5), story preparation poster (3:4), Recent / continue / play-together thumbnails",
+   "original": {
+    "file": "story-promise-rain-cover-tall__a.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/story-promise-rain-cover-tall__a.png",
+    "sha256": "7ebd34d35659f80c2a8510a9166d8103801540068f2705598ada331285a9d621",
+    "bytes": 3235088,
+    "dims": [
+     1024,
+     1536
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T03:53:32.431Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "new text-prompt generation in v2 thread",
+    "qa_status": "checked: full image and contact sheet/crop previews; accepted",
+    "reference_images": [],
+    "prompt": "Portrait 2:3 illustration of the entrance of an old ornate 1920s theatre at night in heavy rain. A marquee lined with warm light bulbs, a few of them flickering, carries no lettering at all. Under the awning: a red velvet rope, a wooden doorman's lectern with a clipboard guest list whose writing is not legible, and a dark umbrella leaning against it. Wet pavement and puddles reflect gold and crimson light; rain falls in visible streaks against deep blue night. Mystery with a touch of romance. Keep the doorway and the lectern inside the central square. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.",
+    "actual_prompt": "Portrait 2:3 illustration of the entrance of an old ornate 1920s theatre at night in heavy rain. A marquee lined with warm light bulbs, a few of them flickering, carries no lettering at all. Under the awning: a red velvet rope, a wooden doorman's lectern with a clipboard guest list whose writing is not legible, and a dark umbrella leaning against it. Wet pavement and puddles reflect gold and crimson light; rain falls in visible streaks against deep blue night. Mystery with a touch of romance. Keep the doorway and the lectern inside the central square. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.\n\nProduction constraints: Output one original PNG at the largest native size supported for 2:3 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 门口和讲台在中央正方形内. Continuity: same ornate 1920s theatre with red-brown brick, dark brass framed double glass doors, cream carved stone surround, amber round bulbs on a shallow brass marquee and crimson rope; interior walnut, crimson velvet and brass. No masks, human portraits or mannequin silhouettes. Candidate A: balanced front-facing viewpoint and compact centered subject grouping, with calm negative space."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/story-promise-rain-cover-tall.webp",
+    "url": "/generated/batch-01/story-promise-rain-cover-tall.webp",
+    "sha256": "98ea72d82f8bd32e52fb3e5dfaeaebe5dc3e9d4dc70cca9757aebeeea56adbf7",
+    "bytes": 246096,
+    "dims": [
+     768,
+     1152
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1024x1536 -> 768x1152; WebP q82 method 6"
+   },
+   "unused_candidates": [
+    "story-promise-rain-cover-tall__b.png"
+   ]
+  },
+  {
+   "slot": "story-promise-rain-cover-wide",
+   "chosen_variant": "a",
+   "used_in": "Story detail hero (4:3)",
+   "original": {
+    "file": "story-promise-rain-cover-wide__a.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/story-promise-rain-cover-wide__a.png",
+    "sha256": "c6520259facf815ff60126c376aa080c0431b7589cad14952fc8574cda25ba40",
+    "bytes": 3261613,
+    "dims": [
+     1536,
+     1024
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T03:55:26.399Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "new text-prompt generation in v2 thread",
+    "qa_status": "checked: full image and contact sheet/crop previews; accepted",
+    "reference_images": [],
+    "prompt": "Landscape 3:2 illustration of the entrance of an old ornate 1920s theatre at night in heavy rain: bulb-lined marquee with no lettering, glass doors glowing warm, a red velvet rope, a doorman's lectern with an illegible guest list on a clipboard, a dark umbrella, gold and crimson reflections in puddles, rain streaks against deep blue night. Mystery with a touch of romance. Keep the doorway and lectern within the middle two-thirds of the width. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.",
+    "actual_prompt": "Landscape 3:2 illustration of the entrance of an old ornate 1920s theatre at night in heavy rain: bulb-lined marquee with no lettering, glass doors glowing warm, a red velvet rope, a doorman's lectern with an illegible guest list on a clipboard, a dark umbrella, gold and crimson reflections in puddles, rain streaks against deep blue night. Mystery with a touch of romance. Keep the doorway and lectern within the middle two-thirds of the width. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.\n\nProduction constraints: Output one original PNG at the largest native size supported for 3:2 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 主体在中间 2/3 宽度内. Continuity: same ornate 1920s theatre with red-brown brick, dark brass framed double glass doors, cream carved stone surround, amber round bulbs on a shallow brass marquee and crimson rope; interior walnut, crimson velvet and brass. No masks, human portraits or mannequin silhouettes. Candidate A: balanced front-facing viewpoint and compact centered subject grouping, with calm negative space."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/story-promise-rain-cover-wide.webp",
+    "url": "/generated/batch-01/story-promise-rain-cover-wide.webp",
+    "sha256": "db7f7bb8740cbf50d76948cedd742d22e48aa0ca495de3e8c492f96fea6b6aca",
+    "bytes": 305484,
+    "dims": [
+     1280,
+     853
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1536x1024 -> 1280x853; WebP q82 method 6"
+   },
+   "unused_candidates": [
+    "story-promise-rain-cover-wide__b.png"
+   ]
+  },
+  {
+   "slot": "story-promise-rain-scene-entrance-rain",
+   "chosen_variant": null,
+   "used_in": "Story play scene banner: opening and beat 1",
+   "original": {
+    "file": "story-promise-rain-scene-entrance-rain.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/story-promise-rain-scene-entrance-rain.png",
+    "sha256": "459fae2184ac561e1df74d0417c764da3c658e12dd9d4077ae84a58f74776976",
+    "bytes": 3279274,
+    "dims": [
+     1536,
+     1024
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T03:57:29.434Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "new text-prompt generation in v2 thread",
+    "qa_status": "checked: full image and contact sheet/crop previews; accepted",
+    "reference_images": [],
+    "prompt": "Wide landscape 3:2 view of the entrance of an old ornate 1920s theatre at night in heavy rain, seen from across a wet cobblestone street: a glowing bulb marquee with no lettering, glass doors with warm light behind them, a velvet rope and a doorman's lectern under the awning, an umbrella, reflections in puddles, rain streaks. Mysterious but inviting. Key elements in the middle horizontal band. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.",
+    "actual_prompt": "Wide landscape 3:2 view of the entrance of an old ornate 1920s theatre at night in heavy rain, seen from across a wet cobblestone street: a glowing bulb marquee with no lettering, glass doors with warm light behind them, a velvet rope and a doorman's lectern under the awning, an umbrella, reflections in puddles, rain streaks. Mysterious but inviting. Key elements in the middle horizontal band. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.\n\nProduction constraints: Output one original PNG at the largest native size supported for 3:2 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 中段横条. Compose key props on one horizontal plane around 52.5% image height, entirely within a central 5:1 crop spanning 37.5%-67.5% image height. Pull the camera back enough to preserve key props in that thin strip. Continuity: same ornate 1920s theatre with red-brown brick, dark brass framed double glass doors, cream carved stone surround, amber round bulbs on a shallow brass marquee and crimson rope; interior walnut, crimson velvet and brass. No masks, human portraits or mannequin silhouettes."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/story-promise-rain-scene-entrance-rain.webp",
+    "url": "/generated/batch-01/story-promise-rain-scene-entrance-rain.webp",
+    "sha256": "e052e77a4f4cb71eab8c30674915ddab09b037f6f91314360c7d42ea77de962d",
+    "bytes": 281324,
+    "dims": [
+     1280,
+     853
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1536x1024 -> 1280x853; WebP q80 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "story-promise-rain-scene-backstage",
+   "chosen_variant": null,
+   "used_in": "Story play scene banner: beat 2",
+   "original": {
+    "file": "story-promise-rain-scene-backstage.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/story-promise-rain-scene-backstage.png",
+    "sha256": "e50d3e4e50d8650c8c5022a34845ca71e65a0cbea89ea3bfbeecd0bcdcf45d68",
+    "bytes": 2198019,
+    "dims": [
+     1536,
+     1024
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T04:27:29.722Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "built-in edit of own new v2 source",
+    "qa_status": "checked: full image and contact sheet/crop previews; accepted",
+    "reference_images": [],
+    "prompt": "Wide landscape 3:2 view of a quiet backstage corridor of an old ornate 1920s theatre at night: exposed brick wall, a costume rack with velvet garments, coiled ropes and a sandbag, a stage door with a small round window, and a wooden desk under a green-shaded lamp holding an open sign-in book (handwriting not legible) and a pen. A small locked wooden key cabinet hangs on the wall. Hushed, intimate, faintly suspenseful; muted crimson and brass. Key elements in the middle horizontal band. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.",
+    "actual_prompt": "Add exactly one slim dark fountain pen with a small brass cap on the desk beside the open blank sign-in book, near x=1320,y=660. Change nothing else. Keep all pages and surfaces blank, the key cabinet closed with its padlock, costumes, ropes, sandbag, green lamp, empty corridor, and round-window stage door. No text, glyphs, humans, logos. Keep native1536x1024."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/story-promise-rain-scene-backstage.webp",
+    "url": "/generated/batch-01/story-promise-rain-scene-backstage.webp",
+    "sha256": "79fb86e539c5d205b81e8d8fd5fe43d74561143b920cc7f90682c4a4d2f7f338",
+    "bytes": 140816,
+    "dims": [
+     1280,
+     853
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1536x1024 -> 1280x853; WebP q80 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "story-promise-rain-scene-office",
+   "chosen_variant": null,
+   "used_in": "Story play scene banner: beat 3",
+   "original": {
+    "file": "story-promise-rain-scene-office.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/story-promise-rain-scene-office.png",
+    "sha256": "bf0fc897ce1f07f08394248d179ac50c91f7e25db6b85842ba76c4a0c943fc5e",
+    "bytes": 1927799,
+    "dims": [
+     1536,
+     1024
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T04:16:01.199Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "built-in edit of own new v2 source",
+    "qa_status": "checked: full image and contact sheet/crop previews; accepted",
+    "reference_images": [],
+    "prompt": "Wide landscape 3:2 view of the theatre manager's small office at night, the door half open: a heavy wooden desk with a single brass key whose paper tag is smudged with dark ink, an inkwell, a neat stack of programs with no readable printing, a framed photograph too far away to make out, rain on the window behind, a warm desk lamp. Calm, a little melancholy, quietly revealing. Key elements in the middle horizontal band. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.",
+    "actual_prompt": "Change only small decorative markings: make all drawer label holders completely blank unmarked brass; remove all lettering and small glyphs from every book spine and the border below the large framed empty-theatre photograph. The photo itself must show only empty architecture, no human or figure. Preserve the desk key with abstract ink smudge, inkwell, unmarked programs, desk photograph of empty buildings, half-open door, lamp and rainy window. No letters, text, numerals, faces or humans anywhere. Keep framing and native size unchanged."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/story-promise-rain-scene-office.webp",
+    "url": "/generated/batch-01/story-promise-rain-scene-office.webp",
+    "sha256": "56392a4b6445921d2155a6738ca722fac1136cae6ece6df32a9921d6c5bc9949",
+    "bytes": 114022,
+    "dims": [
+     1280,
+     853
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1536x1024 -> 1280x853; WebP q80 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "story-promise-rain-scene-entrance-after-rain",
+   "chosen_variant": null,
+   "used_in": "Story play scene banner: beat 4",
+   "original": {
+    "file": "story-promise-rain-scene-entrance-after-rain.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/story-promise-rain-scene-entrance-after-rain.png",
+    "sha256": "ea887326d14de6d48b9037109c94a83ed16b2720a08dfed7ce420b2c81f18cc9",
+    "bytes": 3292347,
+    "dims": [
+     1536,
+     1024
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T04:00:00.407Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "new text-prompt generation in v2 thread",
+    "qa_status": "checked: full image and contact sheet/crop previews; accepted",
+    "reference_images": [],
+    "prompt": "Wide landscape 3:2 view of the same entrance of an old ornate 1920s theatre as the rain eases: last drops in puddles, the bulb marquee now fully and steadily lit (no lettering), the glass doors open and spilling warm golden light, a closed umbrella hanging on a rope post, the faint glow of the auditorium beyond. Relieved, warm ending. Key elements in the middle horizontal band. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.",
+    "actual_prompt": "Wide landscape 3:2 view of the same entrance of an old ornate 1920s theatre as the rain eases: last drops in puddles, the bulb marquee now fully and steadily lit (no lettering), the glass doors open and spilling warm golden light, a closed umbrella hanging on a rope post, the faint glow of the auditorium beyond. Relieved, warm ending. Key elements in the middle horizontal band. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.\n\nProduction constraints: Output one original PNG at the largest native size supported for 3:2 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 中段横条. Compose key props on one horizontal plane around 52.5% image height, entirely within a central 5:1 crop spanning 37.5%-67.5% image height. Pull the camera back enough to preserve key props in that thin strip. Continuity: same ornate 1920s theatre with red-brown brick, dark brass framed double glass doors, cream carved stone surround, amber round bulbs on a shallow brass marquee and crimson rope; interior walnut, crimson velvet and brass. No masks, human portraits or mannequin silhouettes."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/story-promise-rain-scene-entrance-after-rain.webp",
+    "url": "/generated/batch-01/story-promise-rain-scene-entrance-after-rain.webp",
+    "sha256": "fef4ed9f75ec56400ad6c8420525c1f0d3b6ac7c905a745f46533ef46c3a7216",
+    "bytes": 300876,
+    "dims": [
+     1280,
+     853
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1536x1024 -> 1280x853; WebP q80 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "backdrop-lena",
+   "chosen_variant": "a",
+   "used_in": "LiveStage backdrop behind the Live2D canvas and the static portrait (character page, private chat, table rail, story rail, discover card)",
+   "original": {
+    "file": "backdrop-lena__a.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/backdrop-lena__a.png",
+    "sha256": "b5da63d9316c2f6653ce3949185a6c4e5e155f1be5d1f39d376dd2708dd1d417",
+    "bytes": 2208235,
+    "dims": [
+     1024,
+     1536
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T04:01:12.318Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "new text-prompt generation in v2 thread",
+    "qa_status": "checked: full image and contact sheet/crop previews; accepted",
+    "reference_images": [],
+    "prompt": "Portrait 2:3 background illustration of an investigator's study in an old theatre district at night: a tall arched window on the left with rain and soft city lights, bookshelves and neatly tied case folders on the right, a brass desk lamp glowing, a pinned street map with red string on a cork board (no writing). This is a background plate: an animated character will be composited in the center, so keep the central half of the width calm, softly out of focus and low in contrast (a wall, window glow or gentle bokeh), with the interesting detail toward the edges and the top. Eye-level camera, shallow depth of field. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.",
+    "actual_prompt": "Portrait 2:3 background illustration of an investigator's study in an old theatre district at night: a tall arched window on the left with rain and soft city lights, bookshelves and neatly tied case folders on the right, a brass desk lamp glowing, a pinned street map with red string on a cork board (no writing). This is a background plate: an animated character will be composited in the center, so keep the central half of the width calm, softly out of focus and low in contrast (a wall, window glow or gentle bokeh), with the interesting detail toward the edges and the top. Eye-level camera, shallow depth of field. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.\n\nProduction constraints: Output one original PNG at the largest native size supported for 2:3 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 中间一半宽度保持干净、虚化（人物会叠在中间）. Candidate A: balanced front-facing viewpoint and compact centered subject grouping, with calm negative space."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/backdrop-lena.webp",
+    "url": "/generated/batch-01/backdrop-lena.webp",
+    "sha256": "02a95515edcf6c409bc1488784621912d811ea319441bd57aafaaa3b54d25598",
+    "bytes": 94902,
+    "dims": [
+     768,
+     1152
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1024x1536 -> 768x1152; WebP q78 method 6"
+   },
+   "unused_candidates": [
+    "backdrop-lena__b.png"
+   ]
+  },
+  {
+   "slot": "backdrop-arthur",
+   "chosen_variant": "a",
+   "used_in": "LiveStage backdrop behind the Live2D canvas and the static portrait (character page, private chat, table rail, story rail, discover card)",
+   "original": {
+    "file": "backdrop-arthur__a.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/backdrop-arthur__a.png",
+    "sha256": "877725684588df72948cb652071364dc01c005094a53fd14983bf89dd80ae322",
+    "bytes": 1929482,
+    "dims": [
+     1024,
+     1536
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T04:02:56.480Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "new text-prompt generation in v2 thread",
+    "qa_status": "checked: full image and contact sheet/crop previews; accepted",
+    "reference_images": [],
+    "prompt": "Portrait 2:3 background illustration of a theatre manager's office above a grand old stage: dark wood panelling, deep red velvet curtains, a brass key board, leather ledgers, framed playbills seen from too far to read, and an interior window looking down on a softly lit, empty stage. This is a background plate: an animated character will be composited in the center, so keep the central half of the width calm, softly out of focus and low in contrast (a wall, window glow or gentle bokeh), with the interesting detail toward the edges and the top. Eye-level camera, shallow depth of field. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.",
+    "actual_prompt": "Portrait 2:3 background illustration of a theatre manager's office above a grand old stage: dark wood panelling, deep red velvet curtains, a brass key board, leather ledgers, framed playbills seen from too far to read, and an interior window looking down on a softly lit, empty stage. This is a background plate: an animated character will be composited in the center, so keep the central half of the width calm, softly out of focus and low in contrast (a wall, window glow or gentle bokeh), with the interesting detail toward the edges and the top. Eye-level camera, shallow depth of field. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.\n\nProduction constraints: Output one original PNG at the largest native size supported for 2:3 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 中间一半宽度保持干净、虚化（人物会叠在中间）. Candidate A: balanced front-facing viewpoint and compact centered subject grouping, with calm negative space."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/backdrop-arthur.webp",
+    "url": "/generated/batch-01/backdrop-arthur.webp",
+    "sha256": "48d7f68eba34ff7669c2d37ed3db7652e107e302f16c56eeb49d6af9635a8e44",
+    "bytes": 73886,
+    "dims": [
+     768,
+     1152
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1024x1536 -> 768x1152; WebP q78 method 6"
+   },
+   "unused_candidates": [
+    "backdrop-arthur__b.png"
+   ]
+  },
+  {
+   "slot": "backdrop-marcus",
+   "chosen_variant": "a",
+   "used_in": "LiveStage backdrop behind the Live2D canvas and the static portrait (character page, private chat, table rail, story rail, discover card)",
+   "original": {
+    "file": "backdrop-marcus__a.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/backdrop-marcus__a.png",
+    "sha256": "db527378ef4181f642cef73af2591e174604b4aad6ddc89829342f73dac6d856",
+    "bytes": 1946458,
+    "dims": [
+     1024,
+     1536
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T04:05:14.718Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "new text-prompt generation in v2 thread",
+    "qa_status": "checked: full image and contact sheet/crop previews; accepted",
+    "reference_images": [],
+    "prompt": "Portrait 2:3 background illustration of a stage manager's prompt corner backstage: a cue-light panel with small coloured bulbs, a headset hanging on a hook, ropes and pulleys of the fly system rising into darkness, painted scenery flats leaning against the wall, a clamp work lamp with warm light against the dark stage. This is a background plate: an animated character will be composited in the center, so keep the central half of the width calm, softly out of focus and low in contrast (a wall, window glow or gentle bokeh), with the interesting detail toward the edges and the top. Eye-level camera, shallow depth of field. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.",
+    "actual_prompt": "Portrait 2:3 background illustration of a stage manager's prompt corner backstage: a cue-light panel with small coloured bulbs, a headset hanging on a hook, ropes and pulleys of the fly system rising into darkness, painted scenery flats leaning against the wall, a clamp work lamp with warm light against the dark stage. This is a background plate: an animated character will be composited in the center, so keep the central half of the width calm, softly out of focus and low in contrast (a wall, window glow or gentle bokeh), with the interesting detail toward the edges and the top. Eye-level camera, shallow depth of field. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.\n\nProduction constraints: Output one original PNG at the largest native size supported for 2:3 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 中间一半宽度保持干净、虚化（人物会叠在中间）. Candidate A: balanced front-facing viewpoint and compact centered subject grouping, with calm negative space."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/backdrop-marcus.webp",
+    "url": "/generated/batch-01/backdrop-marcus.webp",
+    "sha256": "0aaef6240f727b0d3856defe5b55077e67ec3fdc736f9a6ae86846130b5466a8",
+    "bytes": 70352,
+    "dims": [
+     768,
+     1152
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1024x1536 -> 768x1152; WebP q78 method 6"
+   },
+   "unused_candidates": [
+    "backdrop-marcus__b.png"
+   ]
+  },
+  {
+   "slot": "backdrop-nora",
+   "chosen_variant": "a",
+   "used_in": "LiveStage backdrop behind the Live2D canvas and the static portrait (character page, private chat, table rail, story rail, discover card)",
+   "original": {
+    "file": "backdrop-nora__a.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/backdrop-nora__a.png",
+    "sha256": "9c519d994bc89cfc5260fda6fd42098f8c7491a8c199ab4469391f894f8a999c",
+    "bytes": 2148042,
+    "dims": [
+     1024,
+     1536
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T04:19:59.717Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "built-in edit of own new v2 source",
+    "qa_status": "checked: full image and contact sheet/crop previews; accepted",
+    "reference_images": [],
+    "prompt": "Portrait 2:3 background illustration of a curious explorer's attic workshop at golden hour: a round window with low warm sun, old maps and a globe, potted plants, small brass gadgets and a telescope, open notebooks with sketches only (no writing); warm and inviting. This is a background plate: an animated character will be composited in the center, so keep the central half of the width calm, softly out of focus and low in contrast (a wall, window glow or gentle bokeh), with the interesting detail toward the edges and the top. Eye-level camera, shallow depth of field. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm golden-hour sunlight with soft teal shadows, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.",
+    "actual_prompt": "Remove ALL writing, letters, numerals, glyph-like ticks, labels and annotations from every map, globe and notebook. Keep maps and globe as ONLY simple unlabelled landmass outlines and plain grid lines. Notebook drawings remain simple leaves, mountains and geometric instruments without annotations. Preserve curious explorer attic, round sunset window, plants, telescope, brass gadgets, warm style, blurred low-contrast central half and native dimensions. No text, numerals, faces or humans."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/backdrop-nora.webp",
+    "url": "/generated/batch-01/backdrop-nora.webp",
+    "sha256": "62e614f596f61a7562facecdf8676372fe905f3e9917e80947b9dd4153aa24f0",
+    "bytes": 102454,
+    "dims": [
+     768,
+     1152
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1024x1536 -> 768x1152; WebP q78 method 6"
+   },
+   "unused_candidates": [
+    "backdrop-nora__b.png"
+   ]
+  },
+  {
+   "slot": "backdrop-iris",
+   "chosen_variant": "a",
+   "used_in": "LiveStage backdrop behind the Live2D canvas and the static portrait (character page, private chat, table rail, story rail, discover card)",
+   "original": {
+    "file": "backdrop-iris__a.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/backdrop-iris__a.png",
+    "sha256": "be814c797aed6464a4b5454d8ee292d12fc845f7b1bd1409b1939823c53bde50",
+    "bytes": 2224225,
+    "dims": [
+     1024,
+     1536
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T04:23:13.002Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "built-in edit of own new v2 source",
+    "qa_status": "checked: full image and contact sheet/crop previews; accepted",
+    "reference_images": [],
+    "prompt": "Portrait 2:3 background illustration of a quiet reading nook by a rainy window at dusk: a window seat with a soft knitted blanket, a tea set, a small stack of letters and a fountain pen (no readable writing), candle light meeting blue-grey dusk; calm and gentle. This is a background plate: an animated character will be composited in the center, so keep the central half of the width calm, softly out of focus and low in contrast (a wall, window glow or gentle bokeh), with the interesting detail toward the edges and the top. Eye-level camera, shallow depth of field. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.",
+    "actual_prompt": "Make all book spines completely unmarked, retaining leather and plain brass bands but no lettering or glyphs. Make all letter sheets and envelopes entirely blank unmarked cream paper, no writing or stamps. Keep fountain pen, tea set, rainy dusk window, candle light, knitted blanket, framing, gentle blur and low-contrast central half. No humans, silhouettes, faces, text, letters or numbers. Keep native size unchanged."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/backdrop-iris.webp",
+    "url": "/generated/batch-01/backdrop-iris.webp",
+    "sha256": "ab9a7971e7d6ab87e48c5bf4f787eac39280e4f0b863630b902a39108cbd7ca4",
+    "bytes": 102388,
+    "dims": [
+     768,
+     1152
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1024x1536 -> 768x1152; WebP q78 method 6"
+   },
+   "unused_candidates": [
+    "backdrop-iris__b.png"
+   ]
+  },
+  {
+   "slot": "backdrop-generic",
+   "chosen_variant": null,
+   "used_in": "Stage backdrop for characters without their own (user-created work characters)",
+   "original": {
+    "file": "backdrop-generic.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/backdrop-generic.png",
+    "sha256": "43f0e979fe751eeca57bb79700e480e828557441750b1d994dee3ad7baada6a9",
+    "bytes": 1916431,
+    "dims": [
+     1024,
+     1536
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T04:25:35.084Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "built-in edit of own new v2 source",
+    "qa_status": "checked: full image and contact sheet/crop previews; accepted",
+    "reference_images": [],
+    "prompt": "Portrait 2:3 background illustration of a neutral cozy room at night with a window, warm lamps and soft bokeh lights, no specific profession; suits any character. This is a background plate: an animated character will be composited in the center, so keep the central half of the width calm, softly out of focus and low in contrast (a wall, window glow or gentle bokeh), with the interesting detail toward the edges and the top. Eye-level camera, shallow depth of field. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.",
+    "actual_prompt": "Change only the small book spines in the left shelves: remove ALL text, glyphs and numbers so spines are plain unmarked leather with simple brass bands. Keep neutral cozy room, warm lamps, window and soft bokeh, plants, empty furnishings, low-contrast central half, style and native dimensions. No humans, faces, silhouettes, letters or numerals anywhere."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/backdrop-generic.webp",
+    "url": "/generated/batch-01/backdrop-generic.webp",
+    "sha256": "d71aaceab1193400b3c8e19d0faf31d763067011370a776e582429f61b6b6599",
+    "bytes": 76548,
+    "dims": [
+     768,
+     1152
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1024x1536 -> 768x1152; WebP q78 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "game-royale-cover",
+   "chosen_variant": "a",
+   "used_in": "Game poster: Discover game card (1:1), game preparation (3:4), play-together and Recent thumbnails",
+   "original": {
+    "file": "game-royale-cover__a.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/game-royale-cover__a.png",
+    "sha256": "955c06a04e47df7b5d6d37253fac7cfc90b3bb0b3d7a3718747ea1bb21aabf88",
+    "bytes": 2489067,
+    "dims": [
+     1024,
+     1536
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T04:39:21.030Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "new text-prompt generation in v2 thread",
+    "qa_status": "checked: full composition and central square, 4:5, 3:4 crops; accepted",
+    "reference_images": [],
+    "prompt": "Original key art for a casino dice board game. A stylized night boulevard of six glamorous fictional casino buildings in black-and-gold art-deco style with neon accents, seen from slightly above; in the foreground on green felt, a handful of colourful six-sided dice with white pips tumbling mid-roll beside a fan of fictional pastel banknotes decorated only with abstract guilloche patterns; gold light bokeh. Rich black, gold, emerald and ruby; polished premium tabletop-game illustration. Main subject inside the central square of a portrait 2:3 frame. No text, letters or numbers anywhere (titles and values are drawn by the app), no logos or publisher marks, no watermarks, no people; do not imitate any published board game's box or card art. No real casino names, city signs or real currency designs.",
+    "actual_prompt": "Edit this original game cover, preserving the same six fictional casino buildings, front-facing composition, dice colors, abstract pastel banknotes, premium painted black/gold/emerald/ruby style. Zoom out substantially so the ENTIRE cluster of six buildings (every rooftop), all SIX dice (including entire lowest red die), and ENTIRE banknote fan fit together inside a compact central rectangle, x=140..880 and y=380..1130, within the existing 1024x1536 portrait canvas. Make the complete subject group about 25 percent smaller. Add quiet dark night sky above y=350, smooth empty green felt below y=1180, and side margins. The canvas stays 2:3, 1024x1536, no enlargement. A centered square crop from y=256 to1280 MUST preserve every rooftop, die, and full banknote. No text, letters, numbers, signs, logos, people or watermarks. Banknotes have only abstract rosette/guilloche decoration, no glyphs."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/game-royale-cover.webp",
+    "url": "/generated/batch-01/game-royale-cover.webp",
+    "sha256": "eb96c3a6bcc8723df64499ff8d5fb6fcd1a3e13f401bc6f000e4a2eea46ff7ff",
+    "bytes": 156848,
+    "dims": [
+     768,
+     1152
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1024x1536 -> 768x1152; WebP q82 method 6"
+   },
+   "unused_candidates": [
+    "game-royale-cover__b.png"
+   ]
+  },
+  {
+   "slot": "game-splendor-cover",
+   "chosen_variant": "a",
+   "used_in": "Game poster: Discover game card (1:1), game preparation (3:4), play-together and Recent thumbnails",
+   "original": {
+    "file": "game-splendor-cover__a.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/game-splendor-cover__a.png",
+    "sha256": "98acbe94447fd96c01b014e65c4619857cfe40d18a51dafc109291df8c7ec4cb",
+    "bytes": 2757283,
+    "dims": [
+     1024,
+     1536
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T04:36:06.437Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: full composition and central square, 4:5, 3:4 crops; accepted",
+    "reference_images": [],
+    "prompt": "Original key art evoking the Renaissance gem trade. A merchant's walnut table by an arched stone window overlooking a Renaissance harbour city at golden hour; on a deep velvet cloth lie piles of cut and uncut gemstones — emerald green, sapphire blue, ruby red, diamond white and onyx black — with a few plain gold tokens, a brass balance scale and a closed leather ledger tied with a ribbon. Oil-painting look, warm light, rich textures. Main subject inside the central square of a portrait 2:3 frame. No text, letters or numbers anywhere (titles and values are drawn by the app), no logos or publisher marks, no watermarks, no people; do not imitate any published board game's box or card art.",
+    "actual_prompt": "Original key art evoking the Renaissance gem trade. A merchant's walnut table by an arched stone window overlooking a Renaissance harbour city at golden hour; on a deep velvet cloth lie piles of cut and uncut gemstones — emerald green, sapphire blue, ruby red, diamond white and onyx black — with a few plain gold tokens, a brass balance scale and a closed leather ledger tied with a ribbon. Oil-painting look, warm light, rich textures. Main subject inside the central square of a portrait 2:3 frame. No text, letters or numbers anywhere (titles and values are drawn by the app), no logos or publisher marks, no watermarks, no people; do not imitate any published board game's box or card art.\n\nProduction constraints: Output one original PNG at the largest native size supported for 2:3 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 主体在中央正方形内. Candidate A: balanced front-facing viewpoint and compact centered subject grouping, with calm negative space. Keep every required object entirely inside x=80..940 and y=320..1210 of portrait 1024x1536, with quiet sky or backdrop above and below. All rooftops and dice/cards/gem props fit in the central square. Artwork touches neither side edge."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/game-splendor-cover.webp",
+    "url": "/generated/batch-01/game-splendor-cover.webp",
+    "sha256": "e164cd165c53bab2c6a4266b7e2235892d30ffc354e547919414445bb46d472c",
+    "bytes": 167242,
+    "dims": [
+     768,
+     1152
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1024x1536 -> 768x1152; WebP q82 method 6"
+   },
+   "unused_candidates": [
+    "game-splendor-cover__b.png"
+   ]
+  },
+  {
+   "slot": "game-cabo-cover",
+   "chosen_variant": "a",
+   "used_in": "Game poster: Discover game card (1:1), game preparation (3:4), play-together and Recent thumbnails",
+   "original": {
+    "file": "game-cabo-cover__a.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/game-cabo-cover__a.png",
+    "sha256": "a1d9d60fd0a3baccff34079e0e62bd139d5f66f3a2ce0f928d7fe66ecfa09002",
+    "bytes": 2618456,
+    "dims": [
+     1024,
+     1536
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T04:37:17.826Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: full composition and central square, 4:5, 3:4 crops; accepted",
+    "reference_images": [],
+    "prompt": "Original whimsical storybook illustration for a light card game. Four playing cards fan out in the center against a deep forest-green background with a subtle leaf pattern; each card shows a cute creature in lush leaves, flowers and mushrooms — a fox, a small octopus, an owl and a rabbit — and a fifth card lies face down showing an ornamental pattern of overlapping green, teal and yellow leaf scales. Bright friendly colours, gouache-like texture, clean shapes, soft shading, children's-book quality. The cards carry no numbers, letters or symbols. Main subject inside the central square of a portrait 2:3 frame. No text, letters or numbers anywhere (titles and values are drawn by the app), no logos or publisher marks, no watermarks, no people; do not imitate any published board game's box or card art. No scary creatures.",
+    "actual_prompt": "Original whimsical storybook illustration for a light card game. Four playing cards fan out in the center against a deep forest-green background with a subtle leaf pattern; each card shows a cute creature in lush leaves, flowers and mushrooms — a fox, a small octopus, an owl and a rabbit — and a fifth card lies face down showing an ornamental pattern of overlapping green, teal and yellow leaf scales. Bright friendly colours, gouache-like texture, clean shapes, soft shading, children's-book quality. The cards carry no numbers, letters or symbols. Main subject inside the central square of a portrait 2:3 frame. No text, letters or numbers anywhere (titles and values are drawn by the app), no logos or publisher marks, no watermarks, no people; do not imitate any published board game's box or card art. No scary creatures.\n\nProduction constraints: Output one original PNG at the largest native size supported for 2:3 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 主体在中央正方形内. Candidate A: balanced front-facing viewpoint and compact centered subject grouping, with calm negative space. Keep every required object entirely inside x=80..940 and y=320..1210 of portrait 1024x1536, with quiet sky or backdrop above and below. All rooftops and dice/cards/gem props fit in the central square. Artwork touches neither side edge."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/game-cabo-cover.webp",
+    "url": "/generated/batch-01/game-cabo-cover.webp",
+    "sha256": "c9a4921c7a373b4a5f5f7a8167c8d3ff940228763012127a51cb2f2c234e79d2",
+    "bytes": 141044,
+    "dims": [
+     768,
+     1152
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1024x1536 -> 768x1152; WebP q82 method 6"
+   },
+   "unused_candidates": [
+    "game-cabo-cover__b.png"
+   ]
+  },
+  {
+   "slot": "empty-friends",
+   "chosen_variant": null,
+   "used_in": "Friends: no friends yet",
+   "original": {
+    "file": "empty-friends.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/empty-friends.png",
+    "sha256": "a22a1b2773e59440ccb176011c833e9f8f340b84ca35e335838b8f2788439186",
+    "bytes": 1407318,
+    "dims": [
+     1254,
+     1254
+    ],
+    "mode": "RGBA",
+    "generated_at_utc": "2026-10-14T04:44:37.711Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "built-in edit of generated asset; continuation task-13",
+    "qa_status": "checked: composition, genuine alpha, 160px on dark/light; accepted",
+    "reference_images": [],
+    "prompt": "two cups of tea side by side on a windowsill, gentle rain outside the window, a small potted plant; cozy and inviting. Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.",
+    "actual_prompt": "Edit this spot illustration only: recolor EVERY plant leaf and all greens to muted blue-teal #4B94B5, no green, olive or yellow-green anywhere. Remove the scarf/fabric completely. Retain exactly two tea cups, compact windowsill, simple partial rain window, one small potted plant. Use limited warm amber #E3B997, terracotta #CB5367, muted teal #4B94B5 and cream only, fine confident outline and light washes. Simplify details to read at 160px. Centered, at least 15 percent transparent margins. Preserve actual RGBA transparent background and native square dimensions. No white matte, checkerboard, text, letters, numbers or people."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/empty-friends.webp",
+    "url": "/generated/batch-01/empty-friends.webp",
+    "sha256": "22d64e1ea99ad56f754be9ff909fdf174741b55a25ba92d9ba44fa4ed7a7a243",
+    "bytes": 44346,
+    "dims": [
+     480,
+     480
+    ],
+    "mode": "RGBA",
+    "transform": "Lanczos resize 1254x1254 -> 480x480 (premultiplied alpha); WebP q86 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "empty-recent",
+   "chosen_variant": null,
+   "used_in": "Recent: nothing yet / nothing archived",
+   "original": {
+    "file": "empty-recent.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/empty-recent.png",
+    "sha256": "3fc5aabb0c645905230745e5ced2c7fb225ea8bd699eb7246624767dcc8cbb11",
+    "bytes": 1021469,
+    "dims": [
+     1254,
+     1254
+    ],
+    "mode": "RGBA",
+    "generated_at_utc": "2026-10-14T04:45:27.670Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "built-in edit of generated asset; continuation task-13",
+    "qa_status": "checked: composition, genuine alpha, 160px on dark/light; accepted",
+    "reference_images": [],
+    "prompt": "a small neat stack of blank ticket stubs, a ribbon bookmark and a single die, loosely arranged. Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.",
+    "actual_prompt": "Edit ONLY the die: remove every dot, pip, numeral and marking from ALL visible faces so this is a completely blank plain cream cube with subtle light shading. No holes or embossed marks. Keep the ticket stack entirely blank, preserve ribbon and existing amber/terracotta/teal/cream colors, thin outline and light wash. Preserve native square dimensions and genuine transparent RGBA background. No text, letters, numbers, dot marks, logos, people, white matte or painted checkerboard. Nothing else changes."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/empty-recent.webp",
+    "url": "/generated/batch-01/empty-recent.webp",
+    "sha256": "6955a081460764fc59e08daa146267628f9acd9743b153119abcb80c799992d9",
+    "bytes": 31598,
+    "dims": [
+     480,
+     480
+    ],
+    "mode": "RGBA",
+    "transform": "Lanczos resize 1254x1254 -> 480x480 (premultiplied alpha); WebP q86 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "empty-create",
+   "chosen_variant": null,
+   "used_in": "Create: no works yet",
+   "original": {
+    "file": "empty-create.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/empty-create.png",
+    "sha256": "28cd27c2e0b0ea3c7526af83ddeb56b3ad90f2c84506d479c0c4d1692e1efbb8",
+    "bytes": 1167257,
+    "dims": [
+     1254,
+     1254
+    ],
+    "mode": "RGBA",
+    "generated_at_utc": "2026-10-14T04:46:26.205Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: composition, genuine alpha, 160px on dark/light; accepted",
+    "reference_images": [],
+    "prompt": "an open sketchbook with a pencil resting on it and a small desk lamp glowing beside it; hopeful. Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.",
+    "actual_prompt": "an open sketchbook with a pencil resting on it and a small desk lamp glowing beside it; hopeful. Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.\n\nProduction constraints: Output one original PNG at the largest native size supported for 1:1 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 主体居中，四周留白. Real alpha transparency RGBA PNG, no checkerboard or painted false transparency; no matte fringes. Transparent empty space surrounds the compact spot illustration. Square 1:1 PNG with genuine alpha transparency, no painted checkerboard or flat background. Centered compact composition with at least 15 percent transparent margins. Make important silhouettes bold enough for 160px. The die, paper, seals and book pages are entirely unmarked. No text or glyphs."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/empty-create.webp",
+    "url": "/generated/batch-01/empty-create.webp",
+    "sha256": "026b9b8aba3c2f1208818f2c5e2c0463284e412bb95a26d9fdac1d4c90c5c1a4",
+    "bytes": 44396,
+    "dims": [
+     480,
+     480
+    ],
+    "mode": "RGBA",
+    "transform": "Lanczos resize 1254x1254 -> 480x480 (premultiplied alpha); WebP q86 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "state-not-found",
+   "chosen_variant": null,
+   "used_in": "Not found (route, character, story, run, game, friend, work)",
+   "original": {
+    "file": "state-not-found.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/state-not-found.png",
+    "sha256": "270604800fb08eb47e15ca043e4b95837acebd313154f9e27c144e8c8b2bdb78",
+    "bytes": 1730103,
+    "dims": [
+     1254,
+     1254
+    ],
+    "mode": "RGBA",
+    "generated_at_utc": "2026-10-14T04:47:47.880Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: composition, genuine alpha, 160px on dark/light; accepted",
+    "reference_images": [],
+    "prompt": "a small wooden door slightly ajar with a soft lamp glow behind it and a few fallen leaves on the step; calm, not alarming. Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.",
+    "actual_prompt": "a small wooden door slightly ajar with a soft lamp glow behind it and a few fallen leaves on the step; calm, not alarming. Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.\n\nProduction constraints: Output one original PNG at the largest native size supported for 1:1 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 主体居中，四周留白. Real alpha transparency RGBA PNG, no checkerboard or painted false transparency; no matte fringes. Transparent empty space surrounds the compact spot illustration. Square 1:1 PNG with genuine alpha transparency, no painted checkerboard or flat background. Centered compact composition with at least 15 percent transparent margins. Make important silhouettes bold enough for 160px. The die, paper, seals and book pages are entirely unmarked. No text or glyphs."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/state-not-found.webp",
+    "url": "/generated/batch-01/state-not-found.webp",
+    "sha256": "c50e6a13caa826e9f359d5fcbd2437e0f7c988593ab47da5b498c5cb55de313a",
+    "bytes": 61204,
+    "dims": [
+     480,
+     480
+    ],
+    "mode": "RGBA",
+    "transform": "Lanczos resize 1254x1254 -> 480x480 (premultiplied alpha); WebP q86 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "state-load-error",
+   "chosen_variant": null,
+   "used_in": "Load failure (distinct from “nothing here”)",
+   "original": {
+    "file": "state-load-error.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/state-load-error.png",
+    "sha256": "e960e7744fe0ee00a1aed86ee1d45ceb35d1d1f05f284ea5be9e2a433a55c7fa",
+    "bytes": 846795,
+    "dims": [
+     1254,
+     1254
+    ],
+    "mode": "RGBA",
+    "generated_at_utc": "2026-10-14T04:48:34.139Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: composition, genuine alpha, 160px on dark/light; accepted",
+    "reference_images": [],
+    "prompt": "a short string of warm fairy lights, slightly tangled, with one bulb dimmed; gentle \"something went wrong\", not alarming. Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.",
+    "actual_prompt": "a short string of warm fairy lights, slightly tangled, with one bulb dimmed; gentle \"something went wrong\", not alarming. Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.\n\nProduction constraints: Output one original PNG at the largest native size supported for 1:1 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 主体居中，四周留白. Real alpha transparency RGBA PNG, no checkerboard or painted false transparency; no matte fringes. Transparent empty space surrounds the compact spot illustration. Square 1:1 PNG with genuine alpha transparency, no painted checkerboard or flat background. Centered compact composition with at least 15 percent transparent margins. Make important silhouettes bold enough for 160px. The die, paper, seals and book pages are entirely unmarked. No text or glyphs."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/state-load-error.webp",
+    "url": "/generated/batch-01/state-load-error.webp",
+    "sha256": "978c18c4d84aa945f6a036029581b01af932e4b63fc509e09cfd32e166cc7420",
+    "bytes": 45350,
+    "dims": [
+     480,
+     480
+    ],
+    "mode": "RGBA",
+    "transform": "Lanczos resize 1254x1254 -> 480x480 (premultiplied alpha); WebP q86 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "state-signin",
+   "chosen_variant": null,
+   "used_in": "Sign-in needed (friends, chat) and the sign-in dialog",
+   "original": {
+    "file": "state-signin.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/state-signin.png",
+    "sha256": "449188d214ae4653f3fdfde3f61e2f941af7af3bd572bff6f707772fab26b36d",
+    "bytes": 1407242,
+    "dims": [
+     1254,
+     1254
+    ],
+    "mode": "RGBA",
+    "generated_at_utc": "2026-10-14T04:49:42.157Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: composition, genuine alpha, 160px on dark/light; accepted",
+    "reference_images": [],
+    "prompt": "a small brass key resting on a folded letter sealed with a blank wax seal (no letters on the seal). Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.",
+    "actual_prompt": "a small brass key resting on a folded letter sealed with a blank wax seal (no letters on the seal). Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.\n\nProduction constraints: Output one original PNG at the largest native size supported for 1:1 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 主体居中，四周留白. Real alpha transparency RGBA PNG, no checkerboard or painted false transparency; no matte fringes. Transparent empty space surrounds the compact spot illustration. Square 1:1 PNG with genuine alpha transparency, no painted checkerboard or flat background. Centered compact composition with at least 15 percent transparent margins. Make important silhouettes bold enough for 160px. The die, paper, seals and book pages are entirely unmarked. No text or glyphs."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/state-signin.webp",
+    "url": "/generated/batch-01/state-signin.webp",
+    "sha256": "091668c040c486562cd3e27f3e8402af79b7bd26f5d65a66d62a11964d6bcac2",
+    "bytes": 47976,
+    "dims": [
+     480,
+     480
+    ],
+    "mode": "RGBA",
+    "transform": "Lanczos resize 1254x1254 -> 480x480 (premultiplied alpha); WebP q86 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "create-type-story",
+   "chosen_variant": null,
+   "used_in": "New work dialog: story type",
+   "original": {
+    "file": "create-type-story.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/create-type-story.png",
+    "sha256": "4a79ba3d9440ebc10499b704288850b66dcdd45a6c203e0a61f7b2f530407a1a",
+    "bytes": 1282023,
+    "dims": [
+     1254,
+     1254
+    ],
+    "mode": "RGBA",
+    "generated_at_utc": "2026-10-14T04:51:05.477Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: full composition and requested size/crops; accepted",
+    "reference_images": [],
+    "prompt": "An open book with a tiny pop-up theatre stage and curtain rising from its pages. Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.",
+    "actual_prompt": "An open book with a tiny pop-up theatre stage and curtain rising from its pages. Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.\n\nProduction constraints: Output one original PNG at the largest native size supported for 1:1 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 居中. Real alpha transparency RGBA PNG, no checkerboard or painted false transparency; no matte fringes. Transparent empty space surrounds the compact spot illustration. Square 1:1 PNG with genuine alpha transparency, no painted checkerboard or flat background. Centered compact composition with at least 15 percent transparent margins. Make important silhouettes bold enough for 160px. The die, paper, seals and book pages are entirely unmarked. No text or glyphs."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/create-type-story.webp",
+    "url": "/generated/batch-01/create-type-story.webp",
+    "sha256": "77212795bda011a04a827d22f93084b907e48163db6ba5f694897ac0be434ae7",
+    "bytes": 19952,
+    "dims": [
+     320,
+     320
+    ],
+    "mode": "RGBA",
+    "transform": "Lanczos resize 1254x1254 -> 320x320 (premultiplied alpha); WebP q86 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "create-type-character",
+   "chosen_variant": null,
+   "used_in": "New work dialog: character type",
+   "original": {
+    "file": "create-type-character.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/create-type-character.png",
+    "sha256": "fabbf59b09a5e872c8f9dbabcef2bbb463939707d13f66b271d31e5e3408a30e",
+    "bytes": 818398,
+    "dims": [
+     1254,
+     1254
+    ],
+    "mode": "RGBA",
+    "generated_at_utc": "2026-10-14T04:51:58.669Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: full composition and requested size/crops; accepted",
+    "reference_images": [],
+    "prompt": "An empty ornate oval portrait frame standing on a small easel, a few soft sparkles around it, no face or figure inside the frame. Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.",
+    "actual_prompt": "An empty ornate oval portrait frame standing on a small easel, a few soft sparkles around it, no face or figure inside the frame. Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.\n\nProduction constraints: Output one original PNG at the largest native size supported for 1:1 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 居中. Real alpha transparency RGBA PNG, no checkerboard or painted false transparency; no matte fringes. Transparent empty space surrounds the compact spot illustration. Square 1:1 PNG with genuine alpha transparency, no painted checkerboard or flat background. Centered compact composition with at least 15 percent transparent margins. Make important silhouettes bold enough for 160px. The die, paper, seals and book pages are entirely unmarked. No text or glyphs."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/create-type-character.webp",
+    "url": "/generated/batch-01/create-type-character.webp",
+    "sha256": "3d3d491407d7479be57670eb1864950a9587bbc5b3b8bc39afc0412d7971209e",
+    "bytes": 22672,
+    "dims": [
+     320,
+     320
+    ],
+    "mode": "RGBA",
+    "transform": "Lanczos resize 1254x1254 -> 320x320 (premultiplied alpha); WebP q86 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "work-cover-01",
+   "chosen_variant": null,
+   "used_in": "Work cover choice: work cards, editor, preview panel",
+   "original": {
+    "file": "work-cover-01.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/work-cover-01.png",
+    "sha256": "90657758022619f9877f2522a8d6a950dc1e62880abd1655f00e53327ede9c7b",
+    "bytes": 2552998,
+    "dims": [
+     1024,
+     1536
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T04:52:43.137Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: full composition and requested size/crops; accepted",
+    "reference_images": [],
+    "prompt": "Soft painterly abstract cover background: rain running down a window pane over warm out-of-focus lights. Calm center area for an overlaid title, works at small sizes, warm amber, terracotta and muted teal palette. No text, letters, numbers, logos or people.",
+    "actual_prompt": "Soft painterly abstract cover background: rain running down a window pane over warm out-of-focus lights. Calm center area for an overlaid title, works at small sizes, warm amber, terracotta and muted teal palette. No text, letters, numbers, logos or people.\n\nProduction constraints: Output one original PNG at the largest native size supported for 2:3 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 中央保持安静，方便叠标题. Portrait 2:3, largest native supported dimensions, no enlargement. Central 50 percent of width and central 55 percent height stays low contrast and uncluttered for title overlays."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/work-cover-01.webp",
+    "url": "/generated/batch-01/work-cover-01.webp",
+    "sha256": "55654e81e0ee4c943f7285dfe56666c4877ce164bc19df8c55c7440ade6e5c6a",
+    "bytes": 77480,
+    "dims": [
+     600,
+     900
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1024x1536 -> 600x900; WebP q80 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "work-cover-02",
+   "chosen_variant": null,
+   "used_in": "Work cover choice: work cards, editor, preview panel",
+   "original": {
+    "file": "work-cover-02.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/work-cover-02.png",
+    "sha256": "47a013e6b4ef4bb0d31fbb492db3e7c07843d566d4c7f71a1b221a2538440147",
+    "bytes": 2535155,
+    "dims": [
+     1024,
+     1536
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T04:53:12.793Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: full composition and requested size/crops; accepted",
+    "reference_images": [],
+    "prompt": "Soft painterly abstract cover background: a parted deep red velvet stage curtain with a warm glow behind it. Calm center area for an overlaid title, works at small sizes, warm amber, terracotta and muted teal palette. No text, letters, numbers, logos or people.",
+    "actual_prompt": "Soft painterly abstract cover background: a parted deep red velvet stage curtain with a warm glow behind it. Calm center area for an overlaid title, works at small sizes, warm amber, terracotta and muted teal palette. No text, letters, numbers, logos or people.\n\nProduction constraints: Output one original PNG at the largest native size supported for 2:3 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 中央保持安静，方便叠标题. Portrait 2:3, largest native supported dimensions, no enlargement. Central 50 percent of width and central 55 percent height stays low contrast and uncluttered for title overlays."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/work-cover-02.webp",
+    "url": "/generated/batch-01/work-cover-02.webp",
+    "sha256": "7538eb83c469ef62c20e2b339eeed08fb58a96ecbad7c2dc074d26b6dd7c3fe8",
+    "bytes": 59198,
+    "dims": [
+     600,
+     900
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1024x1536 -> 600x900; WebP q80 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "work-cover-03",
+   "chosen_variant": null,
+   "used_in": "Work cover choice: work cards, editor, preview panel",
+   "original": {
+    "file": "work-cover-03.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/work-cover-03.png",
+    "sha256": "de8aeeb76bc75f07f80c838670c5148ed2b3d4b2646631432a79cfbda0deb580",
+    "bytes": 2517790,
+    "dims": [
+     1024,
+     1536
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T04:53:57.995Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: full composition and requested size/crops; accepted",
+    "reference_images": [],
+    "prompt": "Soft painterly abstract cover background: a night sky with constellations drawn as dotted lines and small stars (no letters). Calm center area for an overlaid title, works at small sizes, warm amber, terracotta and muted teal palette. No text, letters, numbers, logos or people.",
+    "actual_prompt": "Soft painterly abstract cover background: a night sky with constellations drawn as dotted lines and small stars (no letters). Calm center area for an overlaid title, works at small sizes, warm amber, terracotta and muted teal palette. No text, letters, numbers, logos or people.\n\nProduction constraints: Output one original PNG at the largest native size supported for 2:3 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 中央保持安静，方便叠标题. Portrait 2:3, largest native supported dimensions, no enlargement. Central 50 percent of width and central 55 percent height stays low contrast and uncluttered for title overlays."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/work-cover-03.webp",
+    "url": "/generated/batch-01/work-cover-03.webp",
+    "sha256": "a243867cace02b67670e77db280d5eeb86f8656bbfb72e0435ddbe2ab294e747",
+    "bytes": 49730,
+    "dims": [
+     600,
+     900
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1024x1536 -> 600x900; WebP q80 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "work-cover-04",
+   "chosen_variant": null,
+   "used_in": "Work cover choice: work cards, editor, preview panel",
+   "original": {
+    "file": "work-cover-04.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/work-cover-04.png",
+    "sha256": "d8a327a6d77514da2c8bdabf55bf69ad76c17d69d65d2a75836fc4cf01fddf43",
+    "bytes": 2954960,
+    "dims": [
+     1024,
+     1536
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T04:54:29.516Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: full composition and requested size/crops; accepted",
+    "reference_images": [],
+    "prompt": "Soft painterly abstract cover background: layered paper-cut leaves in teal and amber. Calm center area for an overlaid title, works at small sizes, warm amber, terracotta and muted teal palette. No text, letters, numbers, logos or people.",
+    "actual_prompt": "Soft painterly abstract cover background: layered paper-cut leaves in teal and amber. Calm center area for an overlaid title, works at small sizes, warm amber, terracotta and muted teal palette. No text, letters, numbers, logos or people.\n\nProduction constraints: Output one original PNG at the largest native size supported for 2:3 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 中央保持安静，方便叠标题. Portrait 2:3, largest native supported dimensions, no enlargement. Central 50 percent of width and central 55 percent height stays low contrast and uncluttered for title overlays."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/work-cover-04.webp",
+    "url": "/generated/batch-01/work-cover-04.webp",
+    "sha256": "84b8984fd0dea6e2e6efe094fd07c38348d6a579264cddc406531a89a817b45a",
+    "bytes": 72158,
+    "dims": [
+     600,
+     900
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1024x1536 -> 600x900; WebP q80 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "work-cover-05",
+   "chosen_variant": null,
+   "used_in": "Work cover choice: work cards, editor, preview panel",
+   "original": {
+    "file": "work-cover-05.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/work-cover-05.png",
+    "sha256": "7026c494c9c29b93c26dd3e77f90a069b3e1107779f7af2e7c7231a29a06e0e7",
+    "bytes": 2521509,
+    "dims": [
+     1024,
+     1536
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T04:55:07.270Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: full composition and requested size/crops; accepted",
+    "reference_images": [],
+    "prompt": "Soft painterly abstract cover background: soft ink-wash waves in muted teal with a thin gold horizon. Calm center area for an overlaid title, works at small sizes, warm amber, terracotta and muted teal palette. No text, letters, numbers, logos or people.",
+    "actual_prompt": "Soft painterly abstract cover background: soft ink-wash waves in muted teal with a thin gold horizon. Calm center area for an overlaid title, works at small sizes, warm amber, terracotta and muted teal palette. No text, letters, numbers, logos or people.\n\nProduction constraints: Output one original PNG at the largest native size supported for 2:3 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 中央保持安静，方便叠标题. Portrait 2:3, largest native supported dimensions, no enlargement. Central 50 percent of width and central 55 percent height stays low contrast and uncluttered for title overlays."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/work-cover-05.webp",
+    "url": "/generated/batch-01/work-cover-05.webp",
+    "sha256": "49d2766e6d30f191de196d58aab38f060a0c7c56c1ad09097c8cde5568830bbb",
+    "bytes": 44092,
+    "dims": [
+     600,
+     900
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1024x1536 -> 600x900; WebP q80 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "work-cover-06",
+   "chosen_variant": null,
+   "used_in": "Work cover choice: work cards, editor, preview panel",
+   "original": {
+    "file": "work-cover-06.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/work-cover-06.png",
+    "sha256": "6bbe9303fcd61f1f8a9a020000b2e8f1593e8058e8fe9bbbf209884284956168",
+    "bytes": 2104582,
+    "dims": [
+     1024,
+     1536
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T04:55:34.767Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: full composition and requested size/crops; accepted",
+    "reference_images": [],
+    "prompt": "Soft painterly abstract cover background: a few glowing paper lanterns floating in warm dusk. Calm center area for an overlaid title, works at small sizes, warm amber, terracotta and muted teal palette. No text, letters, numbers, logos or people.",
+    "actual_prompt": "Soft painterly abstract cover background: a few glowing paper lanterns floating in warm dusk. Calm center area for an overlaid title, works at small sizes, warm amber, terracotta and muted teal palette. No text, letters, numbers, logos or people.\n\nProduction constraints: Output one original PNG at the largest native size supported for 2:3 aspect ratio. Do not upscale. No text, letters, numerals, glyphs, signage, logos, watermarks, faces, people or human silhouettes anywhere, including reflections, photographs and pictures. Any writing requested above must be only non-glyph abstract ink smudges or blank surfaces. Safety zone: 中央保持安静，方便叠标题. Portrait 2:3, largest native supported dimensions, no enlargement. Central 50 percent of width and central 55 percent height stays low contrast and uncluttered for title overlays."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/work-cover-06.webp",
+    "url": "/generated/batch-01/work-cover-06.webp",
+    "sha256": "af07293aceabc8203f8fc4cdc2a85b705a0cd68ac1795e5c9bd821f865a9ef8f",
+    "bytes": 41356,
+    "dims": [
+     600,
+     900
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1024x1536 -> 600x900; WebP q80 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "persona-avatar-01",
+   "chosen_variant": null,
+   "used_in": "Persona avatar choice: account page, navigation, own seat at tables",
+   "original": {
+    "file": "persona-avatar-01.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/persona-avatar-01.png",
+    "sha256": "ceb1244f62457c6fe6607d1f8527e474880a2efa57964eb8cc4b6fd0ee8a2857",
+    "bytes": 1395768,
+    "dims": [
+     1254,
+     1254
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T05:21:41.968Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: full image and 48px circular crop on dark/light; accepted",
+    "reference_images": [],
+    "prompt": "An umbrella in light rain. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.",
+    "actual_prompt": "An umbrella in light rain. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.\nProduction: one square 1:1 PNG at largest supported native size, no enlargement. No text, letters, numerals, glyphs, logos, watermarks or humans. Single bold subject entirely within inner 70 percent diameter, simple flat storybook shapes, full opaque warm-brown #2A1D19 background reaching all corners; no circular border, no complex background. Clearly recognizable in a 48px circular crop."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/persona-avatar-01.webp",
+    "url": "/generated/batch-01/persona-avatar-01.webp",
+    "sha256": "d33dc1ee03a557e43cbc7863b31dd03ac39db9621d479863e81d6f47a10fbf35",
+    "bytes": 6086,
+    "dims": [
+     256,
+     256
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1254x1254 -> 256x256; WebP q85 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "persona-avatar-02",
+   "chosen_variant": null,
+   "used_in": "Persona avatar choice: account page, navigation, own seat at tables",
+   "original": {
+    "file": "persona-avatar-02.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/persona-avatar-02.png",
+    "sha256": "201acb19cea5960c8f44b84090ecb778830a1ce26b74666dcdc48457e70901ec",
+    "bytes": 1598660,
+    "dims": [
+     1254,
+     1254
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T05:22:17.559Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: full image and 48px circular crop on dark/light; accepted",
+    "reference_images": [],
+    "prompt": "A glowing paper lantern. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.",
+    "actual_prompt": "A glowing paper lantern. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.\nProduction: one square 1:1 PNG at largest supported native size, no enlargement. No text, letters, numerals, glyphs, logos, watermarks or humans. Single bold subject entirely within inner 70 percent diameter, simple flat storybook shapes, full opaque warm-brown #2A1D19 background reaching all corners; no circular border, no complex background. Clearly recognizable in a 48px circular crop."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/persona-avatar-02.webp",
+    "url": "/generated/batch-01/persona-avatar-02.webp",
+    "sha256": "7898a99dad8c4900492cac2a47e90bcc8dea163cf805cd8a6ec9deb02eed2104",
+    "bytes": 7848,
+    "dims": [
+     256,
+     256
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1254x1254 -> 256x256; WebP q85 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "persona-avatar-03",
+   "chosen_variant": null,
+   "used_in": "Persona avatar choice: account page, navigation, own seat at tables",
+   "original": {
+    "file": "persona-avatar-03.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/persona-avatar-03.png",
+    "sha256": "b7c887524b58e5aef3e5b072607329b82adbddaaa13aea885832c92caf49185b",
+    "bytes": 1684403,
+    "dims": [
+     1254,
+     1254
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T05:23:05.810Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: full image and 48px circular crop on dark/light; accepted",
+    "reference_images": [],
+    "prompt": "A steaming teacup. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.",
+    "actual_prompt": "A steaming teacup. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.\nProduction: one square 1:1 PNG at largest supported native size, no enlargement. No text, letters, numerals, glyphs, logos, watermarks or humans. Single bold subject entirely within inner 70 percent diameter, simple flat storybook shapes, full opaque warm-brown #2A1D19 background reaching all corners; no circular border, no complex background. Clearly recognizable in a 48px circular crop."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/persona-avatar-03.webp",
+    "url": "/generated/batch-01/persona-avatar-03.webp",
+    "sha256": "0e24b3ed31d63eb842029ba75345215c8d28fcda749db3c680f7621f26b12702",
+    "bytes": 9700,
+    "dims": [
+     256,
+     256
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1254x1254 -> 256x256; WebP q85 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "persona-avatar-04",
+   "chosen_variant": null,
+   "used_in": "Persona avatar choice: account page, navigation, own seat at tables",
+   "original": {
+    "file": "persona-avatar-04.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/persona-avatar-04.png",
+    "sha256": "2bca1e74c1a22f5b11a338687277a47770340b037d81f7159481f6acead24c4e",
+    "bytes": 1528019,
+    "dims": [
+     1254,
+     1254
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T05:23:40.553Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: full image and 48px circular crop on dark/light; accepted",
+    "reference_images": [],
+    "prompt": "A small sitting fox. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.",
+    "actual_prompt": "A small sitting fox. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.\nProduction: one square 1:1 PNG at largest supported native size, no enlargement. No text, letters, numerals, glyphs, logos, watermarks or humans. Single bold subject entirely within inner 70 percent diameter, simple flat storybook shapes, full opaque warm-brown #2A1D19 background reaching all corners; no circular border, no complex background. Clearly recognizable in a 48px circular crop."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/persona-avatar-04.webp",
+    "url": "/generated/batch-01/persona-avatar-04.webp",
+    "sha256": "3f042bf55e3d4ccc4d6a01b3b57d6cd846680bae58872323218898c0d9ea6ce0",
+    "bytes": 6128,
+    "dims": [
+     256,
+     256
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1254x1254 -> 256x256; WebP q85 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "persona-avatar-05",
+   "chosen_variant": null,
+   "used_in": "Persona avatar choice: account page, navigation, own seat at tables",
+   "original": {
+    "file": "persona-avatar-05.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/persona-avatar-05.png",
+    "sha256": "d52897880eeb3071806a658d2e1e7dbe963b85d45c286483939f6404ae5082e2",
+    "bytes": 1785368,
+    "dims": [
+     1254,
+     1254
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T05:24:29.858Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: full image and 48px circular crop on dark/light; accepted",
+    "reference_images": [],
+    "prompt": "A sleeping cat curled up. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.",
+    "actual_prompt": "A sleeping cat curled up. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.\nProduction: one square 1:1 PNG at largest supported native size, no enlargement. No text, letters, numerals, glyphs, logos, watermarks or humans. Single bold subject entirely within inner 70 percent diameter, simple flat storybook shapes, full opaque warm-brown #2A1D19 background reaching all corners; no circular border, no complex background. Clearly recognizable in a 48px circular crop."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/persona-avatar-05.webp",
+    "url": "/generated/batch-01/persona-avatar-05.webp",
+    "sha256": "363493222a22052642deea71fa9d100b80f5112fb0a8ada523c26a36e03ba4bb",
+    "bytes": 8452,
+    "dims": [
+     256,
+     256
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1254x1254 -> 256x256; WebP q85 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "persona-avatar-06",
+   "chosen_variant": null,
+   "used_in": "Persona avatar choice: account page, navigation, own seat at tables",
+   "original": {
+    "file": "persona-avatar-06.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/persona-avatar-06.png",
+    "sha256": "da249ee730e17d3bd42849490532b8f7cc0e9c0e86c08ba4e8d4f8acfa745216",
+    "bytes": 1896447,
+    "dims": [
+     1254,
+     1254
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T05:25:00.165Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: full image and 48px circular crop on dark/light; accepted",
+    "reference_images": [],
+    "prompt": "A round little owl. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.",
+    "actual_prompt": "A round little owl. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.\nProduction: one square 1:1 PNG at largest supported native size, no enlargement. No text, letters, numerals, glyphs, logos, watermarks or humans. Single bold subject entirely within inner 70 percent diameter, simple flat storybook shapes, full opaque warm-brown #2A1D19 background reaching all corners; no circular border, no complex background. Clearly recognizable in a 48px circular crop."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/persona-avatar-06.webp",
+    "url": "/generated/batch-01/persona-avatar-06.webp",
+    "sha256": "81db2e8f4e29b5dd96a56219c24b6d69090657158c7366a47ff459e08077fa37",
+    "bytes": 9958,
+    "dims": [
+     256,
+     256
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1254x1254 -> 256x256; WebP q85 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "persona-avatar-07",
+   "chosen_variant": null,
+   "used_in": "Persona avatar choice: account page, navigation, own seat at tables",
+   "original": {
+    "file": "persona-avatar-07.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/persona-avatar-07.png",
+    "sha256": "67fe0ed5bc852c8c5cc6fc653b2965083b11829cd3ee6040c5af2ec14320b4d3",
+    "bytes": 1385465,
+    "dims": [
+     1254,
+     1254
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T05:25:34.882Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: full image and 48px circular crop on dark/light; accepted",
+    "reference_images": [],
+    "prompt": "A folded paper boat on a ripple. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.",
+    "actual_prompt": "A folded paper boat on a ripple. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.\nProduction: one square 1:1 PNG at largest supported native size, no enlargement. No text, letters, numerals, glyphs, logos, watermarks or humans. Single bold subject entirely within inner 70 percent diameter, simple flat storybook shapes, full opaque warm-brown #2A1D19 background reaching all corners; no circular border, no complex background. Clearly recognizable in a 48px circular crop."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/persona-avatar-07.webp",
+    "url": "/generated/batch-01/persona-avatar-07.webp",
+    "sha256": "707439c27ab4fa24631239809260639841008d8d5d048114f586348b6e87eeb1",
+    "bytes": 4716,
+    "dims": [
+     256,
+     256
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1254x1254 -> 256x256; WebP q85 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "persona-avatar-08",
+   "chosen_variant": null,
+   "used_in": "Persona avatar choice: account page, navigation, own seat at tables",
+   "original": {
+    "file": "persona-avatar-08.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/persona-avatar-08.png",
+    "sha256": "8da62c6a11899b6ffdfe2bdd4c5b8180d995412731ac7327404452d60415544e",
+    "bytes": 1406844,
+    "dims": [
+     1254,
+     1254
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T05:26:06.220Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: full image and 48px circular crop on dark/light; accepted",
+    "reference_images": [],
+    "prompt": "A crescent moon with one star. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.",
+    "actual_prompt": "A crescent moon with one star. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.\nProduction: one square 1:1 PNG at largest supported native size, no enlargement. No text, letters, numerals, glyphs, logos, watermarks or humans. Single bold subject entirely within inner 70 percent diameter, simple flat storybook shapes, full opaque warm-brown #2A1D19 background reaching all corners; no circular border, no complex background. Clearly recognizable in a 48px circular crop."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/persona-avatar-08.webp",
+    "url": "/generated/batch-01/persona-avatar-08.webp",
+    "sha256": "a6dc2af779adf5ec00cc353efca8ac2bb382cdf0e3f22009af17f53eaa789bf1",
+    "bytes": 4164,
+    "dims": [
+     256,
+     256
+    ],
+    "mode": "RGB",
+    "transform": "Lanczos resize 1254x1254 -> 256x256; WebP q85 method 6"
+   },
+   "unused_candidates": []
+  },
+  {
+   "slot": "brand-emblem",
+   "chosen_variant": "a",
+   "used_in": "Navigation brand mark and the first-load screen",
+   "original": {
+    "file": "brand-emblem__a.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/brand-emblem__a.png",
+    "sha256": "73b30be0ccd15341fe4ebb5aecf9118e5a67c9cdeceac56a48ec73cb7d8ec370",
+    "bytes": 526943,
+    "dims": [
+     1254,
+     1254
+    ],
+    "mode": "RGBA",
+    "generated_at_utc": "2026-10-14T05:27:23.174Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "text prompt; continuation task-13",
+    "qa_status": "checked: full composition and 24px on dark/light; accepted",
+    "reference_images": [],
+    "prompt": "A simple warm emblem for an app about companionship and playing together: two overlapping circles forming a soft lantern-like glow with a tiny spark where they meet. Flat geometric shapes in amber and cream on a transparent background, elegant, readable at 24 px. No letters, no text, no people.",
+    "actual_prompt": "A simple warm emblem for an app about companionship and playing together: two overlapping circles forming a soft lantern-like glow with a tiny spark where they meet. Flat geometric shapes in amber and cream on a transparent background, elegant, readable at 24 px. No letters, no text, no people.\nProduction: one square 1:1 PNG at largest supported native size, no enlargement. No text, letters, numerals, glyphs, logos, watermarks or humans. Exactly two solid clean overlapping circular shapes and one tiny four-point spark at their intersection, no extra dots, no complex gradients. Emblem occupies inner 70 percent of the canvas with transparent margins, genuine alpha. Use solid amber #E3B997 and cream; clearly legible at 24px. Candidate A: horizontally overlapping left amber circle and right cream circle."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/brand-emblem.png",
+    "url": "/generated/batch-01/brand-emblem.png",
+    "sha256": "ddd3f61570975c9fea7f9484c432bb069dd06f8f25d7d384dbea668961ac6052",
+    "bytes": 7696,
+    "dims": [
+     128,
+     128
+    ],
+    "mode": "RGBA",
+    "transform": "Lanczos resize 1254x1254 -> 128x128 (premultiplied alpha); PNG"
+   },
+   "unused_candidates": [
+    "brand-emblem__b.png"
+   ]
+  },
+  {
+   "slot": "app-icon",
+   "chosen_variant": "a",
+   "used_in": "Browser tab icon (corners outside the rounded square made transparent)",
+   "original": {
+    "file": "app-icon__a.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/app-icon__a.png",
+    "sha256": "39c5f0e39ae44baa19476948884dd504acf694c84f70c95c9a1f575064dbe315",
+    "bytes": 1329310,
+    "dims": [
+     1254,
+     1254
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T05:29:28.345Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "built-in composition using generated brand-emblem__a.png",
+    "qa_status": "checked: full composition and 32px on dark/light; accepted",
+    "reference_images": [
+     "brand-emblem__a.png"
+    ],
+    "prompt": "The same warm emblem (two overlapping circles forming a soft lantern-like glow with a tiny spark where they meet), centered on a rounded-square tile of deep warm brown #1E1412 with a subtle radial glow. Flat, crisp, readable at 32 px. No letters, no text, no people.",
+    "actual_prompt": "The same warm emblem (two overlapping circles forming a soft lantern-like glow with a tiny spark where they meet), centered on a rounded-square tile of deep warm brown #1E1412 with a subtle radial glow. Flat, crisp, readable at 32 px. No letters, no text, no people.\nProduction: one square 1:1 PNG at largest supported native size, no enlargement. No text, letters, numerals, glyphs, logos, watermarks or humans. Brown #1E1412 tile fills entire square canvas; safe round-corner composition, emblem occupies inner 65 percent diameter. Two solid overlapping circles and one tiny spark only, flat crisp legible at 32px. Opaque background. Horizontally overlapping amber left circle and cream right circle, matching brand A. Reference image is the corresponding generated emblem: preserve its circles, overlap and spark shape exactly while adding the brown rounded square tile. Emblem itself remains unmodified."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/favicon-64.png",
+    "url": "/generated/batch-01/favicon-64.png",
+    "sha256": "ec5bf9b048dc978ad5546945a8cb84b3807f8c0887739a3c74e7f96db4f3678c",
+    "bytes": 5459,
+    "dims": [
+     64,
+     64
+    ],
+    "mode": "RGBA",
+    "transform": "black corners outside the rounded square -> transparent; Lanczos resize -> 64x64 (premultiplied alpha); PNG"
+   },
+   "unused_candidates": [
+    "app-icon__b.png"
+   ]
+  },
+  {
+   "slot": "app-icon",
+   "chosen_variant": "a",
+   "used_in": "Home-screen icon (corners filled with the tile colour)",
+   "original": {
+    "file": "app-icon__a.png",
+    "dropbox_path": "/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/app-icon__a.png",
+    "sha256": "39c5f0e39ae44baa19476948884dd504acf694c84f70c95c9a1f575064dbe315",
+    "bytes": 1329310,
+    "dims": [
+     1254,
+     1254
+    ],
+    "mode": "RGB",
+    "generated_at_utc": "2026-10-14T05:29:28.345Z",
+    "tool": "built-in image_gen.imagegen",
+    "model": "not disclosed by tool",
+    "source": "built-in composition using generated brand-emblem__a.png",
+    "qa_status": "checked: full composition and 32px on dark/light; accepted",
+    "reference_images": [
+     "brand-emblem__a.png"
+    ],
+    "prompt": "The same warm emblem (two overlapping circles forming a soft lantern-like glow with a tiny spark where they meet), centered on a rounded-square tile of deep warm brown #1E1412 with a subtle radial glow. Flat, crisp, readable at 32 px. No letters, no text, no people.",
+    "actual_prompt": "The same warm emblem (two overlapping circles forming a soft lantern-like glow with a tiny spark where they meet), centered on a rounded-square tile of deep warm brown #1E1412 with a subtle radial glow. Flat, crisp, readable at 32 px. No letters, no text, no people.\nProduction: one square 1:1 PNG at largest supported native size, no enlargement. No text, letters, numerals, glyphs, logos, watermarks or humans. Brown #1E1412 tile fills entire square canvas; safe round-corner composition, emblem occupies inner 65 percent diameter. Two solid overlapping circles and one tiny spark only, flat crisp legible at 32px. Opaque background. Horizontally overlapping amber left circle and cream right circle, matching brand A. Reference image is the corresponding generated emblem: preserve its circles, overlap and spark shape exactly while adding the brown rounded square tile. Emblem itself remains unmodified."
+   },
+   "derivative": {
+    "path": "public/generated/batch-01/apple-touch-icon.png",
+    "url": "/generated/batch-01/apple-touch-icon.png",
+    "sha256": "4fa396920abe9214b7d85d81efb3f0d80ff8469e934d38e80ded53ce3d5b142f",
+    "bytes": 24750,
+    "dims": [
+     180,
+     180
+    ],
+    "mode": "RGB",
+    "transform": "corners outside the rounded square filled with the tile edge colour; Lanczos resize -> 180x180; PNG"
+   },
+   "unused_candidates": [
+    "app-icon__b.png"
+   ]
+  }
+ ]
+}
diff --git a/everwith-claude-frontend/docs/GENERATED_ASSETS.md b/everwith-claude-frontend/docs/GENERATED_ASSETS.md
new file mode 100644
index 00000000..91e1fd60
--- /dev/null
+++ b/everwith-claude-frontend/docs/GENERATED_ASSETS.md
@@ -0,0 +1,58 @@
+# 生成素材接入记录（v2-batch-01）
+
+- 来源：Dropbox `/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/`（45 个素材位、59 张图；`manifest.json` sha256 `03e10cd7e985b70a2edd4fc4b3ca25ac71ee6ca6b2d35a9d3be518d59f1d533d`，`SHA256SUMS.json` sha256 `f14a47a4366fb3c58dd34a710e78ffd825ecd0830339466a3f960c4a9d1c9ed7`）。
+- 生成：GPT 内置图片工具（`built-in image_gen.imagegen`，模型名未披露）；每张的实际 prompt、生成时间、QA 结论都抄在 `GENERATED_ASSETS.json` 里。
+- **权利标签：用户经 GPT 生成并提供；商用/再分发权未核实**。不是交接包的一部分；只用于这次私人交接与本地演示，不公开发布、不商用。
+- 处理：只做缩放（Lanczos）和格式转换（WebP/PNG），没有修图、调色或裁切；唯一例外是浏览器图标把圆角外的纯黑角改成透明（主屏图标则用图块边缘色填平）。原图全部先按批次自带的 `SHA256SUMS.json` 和 `manifest.json` 核对。
+- 网页副本在 `public/generated/batch-01/`（46 个文件，共 3.85 MB），随源码一起提交；`npm run assets:generated` 会逐个核对 sha256、检查代码里引用的文件都在清单里。重新生成：`python3 -I scripts/derive-generated.py --from <batch-01 文件夹>`（需要 Pillow；不同 Pillow/libwebp 版本字节可能不同，以 JSON 记录为准）。
+- A/B 两版的素材位一律选 `__a`（两版都通过了 QA；a 版多为正面、居中构图，裁成卡片和圆形时更稳）。未用的 `__b` 留在 Dropbox，没有复制进项目。
+- 游戏海报默认改用生成封面（原交接包 480×480 海报仍同步在 `public/handoff`，在 `src/mock/catalog.ts` 里把 `poster` 改回 `${V}/…-poster.webp` 一行即可切回）；悬停预览短片仍用交接包的。
+
+| 素材位 | 选用 | 用在哪里 | 原图 | 网页副本 | 未用候选 |
+|---|---|---|---|---|---|
+| `story-last-train-cover-tall` | a | 发现页故事卡（4:5）、故事准备页海报（3:4）、最近 / 继续 / 一起玩的缩略图 | 1024×1536 · `916afdf6d0d0…` | `story-last-train-cover-tall.webp` 768×1152 · 147 KB | story-last-train-cover-tall__b.png |
+| `story-last-train-cover-wide` | a | 故事详情页大图（4:3） | 1536×1024 · `5f8b1a0ab5c9…` | `story-last-train-cover-wide.webp` 1280×853 · 184 KB | story-last-train-cover-wide__b.png |
+| `story-last-train-scene-waiting-room` | 单张 | 游玩页场景横幅：开场与第 1 拍 | 1536×1024 · `f5a2ad0a9b4e…` | `story-last-train-scene-waiting-room.webp` 1280×853 · 125 KB | — |
+| `story-last-train-scene-corner` | 单张 | 场景横幅：第 2 拍 | 1536×1024 · `2c2ecbb9b641…` | `story-last-train-scene-corner.webp` 1280×853 · 165 KB | — |
+| `story-last-train-scene-duty-room` | 单张 | 场景横幅：第 3 拍 | 1536×1024 · `73aedfb7f2bd…` | `story-last-train-scene-duty-room.webp` 1280×853 · 103 KB | — |
+| `story-last-train-scene-platform-dawn` | 单张 | 场景横幅：最后一拍之后的自由行动（开放模式） | 1536×1024 · `a5817285ec76…` | `story-last-train-scene-platform-dawn.webp` 1280×853 · 163 KB | — |
+| `story-promise-rain-cover-tall` | a | 发现页故事卡、故事准备页海报、缩略图 | 1024×1536 · `7ebd34d35659…` | `story-promise-rain-cover-tall.webp` 768×1152 · 240 KB | story-promise-rain-cover-tall__b.png |
+| `story-promise-rain-cover-wide` | a | 故事详情页大图 | 1536×1024 · `c6520259facf…` | `story-promise-rain-cover-wide.webp` 1280×853 · 298 KB | story-promise-rain-cover-wide__b.png |
+| `story-promise-rain-scene-entrance-rain` | 单张 | 场景横幅：开场与第 1 拍 | 1536×1024 · `459fae2184ac…` | `story-promise-rain-scene-entrance-rain.webp` 1280×853 · 275 KB | — |
+| `story-promise-rain-scene-backstage` | 单张 | 场景横幅：第 2 拍 | 1536×1024 · `e50d3e4e50d8…` | `story-promise-rain-scene-backstage.webp` 1280×853 · 138 KB | — |
+| `story-promise-rain-scene-office` | 单张 | 场景横幅：第 3 拍 | 1536×1024 · `bf0fc897ce1f…` | `story-promise-rain-scene-office.webp` 1280×853 · 111 KB | — |
+| `story-promise-rain-scene-entrance-after-rain` | 单张 | 场景横幅：第 4 拍 | 1536×1024 · `ea887326d14d…` | `story-promise-rain-scene-entrance-after-rain.webp` 1280×853 · 294 KB | — |
+| `backdrop-lena` | a | Lena 的舞台背景：角色页、私聊、牌桌侧栏、故事左栏、发现卡、好友列表头像底 | 1024×1536 · `b5da63d9316c…` | `backdrop-lena.webp` 768×1152 · 93 KB | backdrop-lena__b.png |
+| `backdrop-arthur` | a | Arthur 的舞台背景：角色页、私聊、牌桌侧栏、故事左栏、发现卡、好友列表头像底 | 1024×1536 · `877725684588…` | `backdrop-arthur.webp` 768×1152 · 72 KB | backdrop-arthur__b.png |
+| `backdrop-marcus` | a | Marcus 的舞台背景：角色页、私聊、牌桌侧栏、故事左栏、发现卡、好友列表头像底 | 1024×1536 · `db527378ef41…` | `backdrop-marcus.webp` 768×1152 · 69 KB | backdrop-marcus__b.png |
+| `backdrop-nora` | a | Nora 的舞台背景：角色页、私聊、牌桌侧栏、故事左栏、发现卡、好友列表头像底 | 1024×1536 · `9c519d994bc8…` | `backdrop-nora.webp` 768×1152 · 100 KB | backdrop-nora__b.png |
+| `backdrop-iris` | a | Iris 的舞台背景：角色页、私聊、牌桌侧栏、故事左栏、发现卡、好友列表头像底 | 1024×1536 · `be814c797aed…` | `backdrop-iris.webp` 768×1152 · 100 KB | backdrop-iris__b.png |
+| `backdrop-generic` | 单张 | 自创角色（没有专属房间）的舞台背景 | 1024×1536 · `43f0e979fe75…` | `backdrop-generic.webp` 768×1152 · 75 KB | — |
+| `game-royale-cover` | a | 游戏海报：发现页（1:1）、准备页（3:4）、一起玩 / 最近缩略图 | 1024×1536 · `955c06a04e47…` | `game-royale-cover.webp` 768×1152 · 153 KB | game-royale-cover__b.png |
+| `game-splendor-cover` | a | 同上 | 1024×1536 · `98acbe94447f…` | `game-splendor-cover.webp` 768×1152 · 163 KB | game-splendor-cover__b.png |
+| `game-cabo-cover` | a | 同上 | 1024×1536 · `a1d9d60fd0a3…` | `game-cabo-cover.webp` 768×1152 · 138 KB | game-cabo-cover__b.png |
+| `empty-friends` | 单张 | 好友页：还没有好友 | 1254×1254 · `a22a1b2773e5…` | `empty-friends.webp` 480×480 · 43 KB | — |
+| `empty-recent` | 单张 | 最近页：还没有记录 / 没有归档 | 1254×1254 · `3fc5aabb0c64…` | `empty-recent.webp` 480×480 · 31 KB | — |
+| `empty-create` | 单张 | 创作页：还没有作品 | 1254×1254 · `28cd27c2e0b0…` | `empty-create.webp` 480×480 · 43 KB | — |
+| `state-not-found` | 单张 | 找不到（页面、角色、故事、局、好友、作品） | 1254×1254 · `270604800fb0…` | `state-not-found.webp` 480×480 · 60 KB | — |
+| `state-load-error` | 单张 | 加载失败（与“没有内容”区分） | 1254×1254 · `e960e7744fe0…` | `state-load-error.webp` 480×480 · 44 KB | — |
+| `state-signin` | 单张 | 需要登录（好友页、私聊）与登录弹窗 | 1254×1254 · `449188d214ae…` | `state-signin.webp` 480×480 · 47 KB | — |
+| `create-type-story` | 单张 | 新建作品弹窗：故事 | 1254×1254 · `4a79ba3d9440…` | `create-type-story.webp` 320×320 · 19 KB | — |
+| `create-type-character` | 单张 | 新建作品弹窗：角色 | 1254×1254 · `fabbf59b09a5…` | `create-type-character.webp` 320×320 · 22 KB | — |
+| `work-cover-01` | 单张 | 作品封面候选：作品卡片、编辑页 | 1024×1536 · `906577580226…` | `work-cover-01.webp` 600×900 · 76 KB | — |
+| `work-cover-02` | 单张 | 作品封面候选：作品卡片、编辑页 | 1024×1536 · `47a013e6b4ef…` | `work-cover-02.webp` 600×900 · 58 KB | — |
+| `work-cover-03` | 单张 | 作品封面候选：作品卡片、编辑页 | 1024×1536 · `de8aeeb76bc7…` | `work-cover-03.webp` 600×900 · 49 KB | — |
+| `work-cover-04` | 单张 | 作品封面候选：作品卡片、编辑页 | 1024×1536 · `d8a327a6d775…` | `work-cover-04.webp` 600×900 · 70 KB | — |
+| `work-cover-05` | 单张 | 作品封面候选：作品卡片、编辑页 | 1024×1536 · `7026c494c9c2…` | `work-cover-05.webp` 600×900 · 43 KB | — |
+| `work-cover-06` | 单张 | 作品封面候选：作品卡片、编辑页 | 1024×1536 · `6bbe9303fcd6…` | `work-cover-06.webp` 600×900 · 40 KB | — |
+| `persona-avatar-01` | 单张 | Persona 头像候选：账号页、导航、自己的牌桌席位 | 1254×1254 · `ceb1244f6245…` | `persona-avatar-01.webp` 256×256 · 6 KB | — |
+| `persona-avatar-02` | 单张 | Persona 头像候选：账号页、导航、自己的牌桌席位 | 1254×1254 · `201acb19cea5…` | `persona-avatar-02.webp` 256×256 · 8 KB | — |
+| `persona-avatar-03` | 单张 | Persona 头像候选：账号页、导航、自己的牌桌席位 | 1254×1254 · `b7c887524b58…` | `persona-avatar-03.webp` 256×256 · 9 KB | — |
+| `persona-avatar-04` | 单张 | Persona 头像候选：账号页、导航、自己的牌桌席位 | 1254×1254 · `2bca1e74c1a2…` | `persona-avatar-04.webp` 256×256 · 6 KB | — |
+| `persona-avatar-05` | 单张 | Persona 头像候选：账号页、导航、自己的牌桌席位 | 1254×1254 · `d52897880eeb…` | `persona-avatar-05.webp` 256×256 · 8 KB | — |
+| `persona-avatar-06` | 单张 | Persona 头像候选：账号页、导航、自己的牌桌席位 | 1254×1254 · `da249ee730e1…` | `persona-avatar-06.webp` 256×256 · 10 KB | — |
+| `persona-avatar-07` | 单张 | Persona 头像候选：账号页、导航、自己的牌桌席位 | 1254×1254 · `67fe0ed5bc85…` | `persona-avatar-07.webp` 256×256 · 5 KB | — |
+| `persona-avatar-08` | 单张 | Persona 头像候选：账号页、导航、自己的牌桌席位 | 1254×1254 · `8da62c6a1189…` | `persona-avatar-08.webp` 256×256 · 4 KB | — |
+| `brand-emblem` | a | 左侧导航品牌标记、首次加载画面 | 1254×1254 · `73b30be0ccd1…` | `brand-emblem.png` 128×128 · 8 KB | brand-emblem__b.png |
+| `app-icon` | a | 浏览器标签图标 / 主屏图标 | 1254×1254 · `39c5f0e39ae4…` | `favicon-64.png` 64×64 · 5 KB | app-icon__b.png |
+| `app-icon` | a | 浏览器标签图标 / 主屏图标 | 1254×1254 · `39c5f0e39ae4…` | `apple-touch-icon.png` 180×180 · 24 KB | app-icon__b.png |
diff --git a/everwith-claude-frontend/docs/IMAGE_GENERATION_REQUESTS.md b/everwith-claude-frontend/docs/IMAGE_GENERATION_REQUESTS.md
new file mode 100644
index 00000000..bbd2a298
--- /dev/null
+++ b/everwith-claude-frontend/docs/IMAGE_GENERATION_REQUESTS.md
@@ -0,0 +1,649 @@
+# 图片生成需求单 v2（给 GPT）
+
+> **状态（2026-10-14）：batch-01 已全部收到并接入。** 45 个素材位 / 59 张图，逐个与批次自带的 `SHA256SUMS.json`、`manifest.json` 核对一致；A/B 两版一律选 `__a`。每张图用在哪里、原图与网页副本的 sha256、实际 prompt 见 `GENERATED_ASSETS.md` / `GENERATED_ASSETS.json`。下面是需求原文，保留不改，供追溯。
+
+共 **45 个素材位**（P0 4 · P1 14 · P2 9 · P3 18），按候选数算约 **59 张图**。每条都有可以直接粘贴的英文 prompt；同一份清单的机器可读版本是 `IMAGE_GENERATION_REQUESTS.json`。
+
+## 现在视觉上不合适的地方（这批图要解决的）
+
+1. 故事《末班车之后》完全没有图：发现页卡片是书本图标，详情/准备页是空渐变，游玩页场景横幅是一块灰蓝色。
+2. 故事《雨中的约定》借用了不相干的图：封面和后台/办公室场景用的是 Lena 的私人书房，“剧院门口淋雨”用的是一张现代高楼休息室，和 1920 年代剧院对不上。
+3. 三款游戏的封面其实是 480×480 的首页预览视频首帧（棋盘截图），在发现页和准备页上偏糊、也不像封面。交接包里的候选封面你没有接受过，所以没用。
+4. 角色页、私聊、牌桌侧栏、故事左栏里，Live2D 角色背后只有一层纯色渐变，角色页右侧还有大片空白。
+5. 好友、最近、创作、找不到内容、加载失败等状态只有一行文字，页面大面积空。
+6. 用户自建的角色/故事没有封面，账号页的 Persona 没有头像，品牌标记只是 CSS 画的字母。
+
+## 交付方式（请让 GPT 照这个放）
+
+- Dropbox 目录：`/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/`
+- 文件名就是素材 ID：`<id>.png`；条目写“候选 2 张”的，用 `<id>__a.png`、`<id>__b.png`。
+- 尺寸：按条目的**比例**出图，用工具原生的最大尺寸即可（例如横 1536×1024、竖 1024×1536、方 1024×1024），**不要放大**；裁切由我来做，所以请遵守每条的“安全区”。
+- 透明背景：条目标“透明”的出透明 PNG；做不到就用纯色 #1B1311 背景。
+- 同目录放一个 `manifest.md`（或 `manifest.json`），每张图一行：ID、文件名、工具/模型名、生成日期、实际使用的 prompt（如有改动）、备注。
+- 默认只用文字 prompt。附交接包里的图做风格参考，等于把私人素材上传给第三方，由你决定。
+
+## 全部素材共同的规则
+
+- 不要任何文字、字母、数字、招牌字、水印、Logo（标题、点数、金额、能力说明都由代码绘制）。
+- 场景和背景里不要人物（五位角色只能用冻结的 source/version 素材，生成图里出现人会和选角、Live2D 冲突）。
+- 不模仿任何已出版桌游的盒面/卡面、真实赌场或铁路公司品牌。
+- 风格向现有素材靠拢：暖琥珀/黄铜色灯光 × 冷蓝青夜色、半写实绘画感；游戏 CABO 那张是水粉感童话插画。
+- 权利记录口径：“用户经 GPT 生成并提供；商用/再分发权未核实”。
+
+## 一览
+
+| 优先级 | ID | 比例 | 候选 | 透明 | 用在哪里 |
+|---|---|---|---|---|---|
+| P0 | `story-last-train-cover-tall` | 2:3 | 2 |  | 发现页故事卡片（裁成 4:5）、准备页海报（裁成 3:4）、最近记录图标 |
+| P0 | `story-last-train-cover-wide` | 3:2 | 2 |  | 故事详情页大图（4:3 区域） |
+| P0 | `story-last-train-scene-waiting-room` | 3:2 | 1 |  | 游玩页场景横幅：开场与第 1–2 拍（会被裁成约 5:1 的扁条） |
+| P1 | `story-last-train-scene-corner` | 3:2 | 1 |  | 第 2 拍（角落里的旅人走过来） |
+| P0 | `story-last-train-scene-duty-room` | 3:2 | 1 |  | 第 3 拍（登记、锁进值班室、天快亮） |
+| P1 | `story-last-train-scene-platform-dawn` | 3:2 | 1 |  | 结尾 / 开放模式 |
+| P1 | `story-promise-rain-cover-tall` | 2:3 | 2 |  | 发现页故事卡片、准备页海报、最近记录图标 |
+| P1 | `story-promise-rain-cover-wide` | 3:2 | 2 |  | 故事详情页大图 |
+| P1 | `story-promise-rain-scene-entrance-rain` | 3:2 | 1 |  | 开场与第 1 拍（门口、名单被划掉） |
+| P1 | `story-promise-rain-scene-backstage` | 3:2 | 1 |  | 第 2 拍（后台签到簿） |
+| P1 | `story-promise-rain-scene-office` | 3:2 | 1 |  | 第 3 拍（经理办公室、沾墨的钥匙） |
+| P1 | `story-promise-rain-scene-entrance-after-rain` | 3:2 | 1 |  | 第 4 拍（雨小了、灯重新亮起、开场铃响） |
+| P1 | `backdrop-lena` | 2:3 | 2 |  | Lena（剧院调查员）：角色页舞台、私聊左侧舞台、牌桌侧栏、故事左栏（作为 Live2D 后面的背景） |
+| P1 | `backdrop-arthur` | 2:3 | 2 |  | Arthur（剧院经理）：角色页舞台、私聊左侧舞台、牌桌侧栏、故事左栏（作为 Live2D 后面的背景） |
+| P1 | `backdrop-marcus` | 2:3 | 2 |  | Marcus（舞台监督）：角色页舞台、私聊左侧舞台、牌桌侧栏、故事左栏（作为 Live2D 后面的背景） |
+| P1 | `backdrop-nora` | 2:3 | 2 |  | Nora（好奇的同伴）：角色页舞台、私聊左侧舞台、牌桌侧栏、故事左栏（作为 Live2D 后面的背景） |
+| P1 | `backdrop-iris` | 2:3 | 2 |  | Iris（细心的倾听者）：角色页舞台、私聊左侧舞台、牌桌侧栏、故事左栏（作为 Live2D 后面的背景） |
+| P1 | `backdrop-generic` | 2:3 | 1 |  | 创作的角色（通用）：角色页舞台、私聊左侧舞台、牌桌侧栏、故事左栏（作为 Live2D 后面的背景） |
+| P2 | `game-royale-cover` | 2:3 | 2 |  | 发现页游戏卡片（居中裁成正方形）、准备页海报（3:4）、“一起玩”弹窗 |
+| P2 | `game-splendor-cover` | 2:3 | 2 |  | 同上 |
+| P2 | `game-cabo-cover` | 2:3 | 2 |  | 同上 |
+| P2 | `empty-friends` | 1:1 | 1 | 是 | 好友页空状态（还没有好友 / 需要登录） |
+| P2 | `empty-recent` | 1:1 | 1 | 是 | 最近页空状态 |
+| P2 | `empty-create` | 1:1 | 1 | 是 | 创作页空状态 |
+| P2 | `state-not-found` | 1:1 | 1 | 是 | 找不到内容 / 局不存在 |
+| P2 | `state-load-error` | 1:1 | 1 | 是 | 加载失败（不是“没有内容”） |
+| P2 | `state-signin` | 1:1 | 1 | 是 | 需要登录的提示 |
+| P3 | `create-type-story` | 1:1 | 1 | 是 | 新建作品弹窗里的“故事”类型卡片 |
+| P3 | `create-type-character` | 1:1 | 1 | 是 | 新建作品弹窗里的“角色”类型卡片 |
+| P3 | `work-cover-01` | 2:3 | 1 |  | 用户自建作品的默认封面（作品卡片、试演、最近） |
+| P3 | `work-cover-02` | 2:3 | 1 |  | 用户自建作品的默认封面（作品卡片、试演、最近） |
+| P3 | `work-cover-03` | 2:3 | 1 |  | 用户自建作品的默认封面（作品卡片、试演、最近） |
+| P3 | `work-cover-04` | 2:3 | 1 |  | 用户自建作品的默认封面（作品卡片、试演、最近） |
+| P3 | `work-cover-05` | 2:3 | 1 |  | 用户自建作品的默认封面（作品卡片、试演、最近） |
+| P3 | `work-cover-06` | 2:3 | 1 |  | 用户自建作品的默认封面（作品卡片、试演、最近） |
+| P3 | `persona-avatar-01` | 1:1 | 1 |  | 账号页“我的 Persona”可选头像（不是人物，避免和角色混淆） |
+| P3 | `persona-avatar-02` | 1:1 | 1 |  | 账号页“我的 Persona”可选头像（不是人物，避免和角色混淆） |
+| P3 | `persona-avatar-03` | 1:1 | 1 |  | 账号页“我的 Persona”可选头像（不是人物，避免和角色混淆） |
+| P3 | `persona-avatar-04` | 1:1 | 1 |  | 账号页“我的 Persona”可选头像（不是人物，避免和角色混淆） |
+| P3 | `persona-avatar-05` | 1:1 | 1 |  | 账号页“我的 Persona”可选头像（不是人物，避免和角色混淆） |
+| P3 | `persona-avatar-06` | 1:1 | 1 |  | 账号页“我的 Persona”可选头像（不是人物，避免和角色混淆） |
+| P3 | `persona-avatar-07` | 1:1 | 1 |  | 账号页“我的 Persona”可选头像（不是人物，避免和角色混淆） |
+| P3 | `persona-avatar-08` | 1:1 | 1 |  | 账号页“我的 Persona”可选头像（不是人物，避免和角色混淆） |
+| P3 | `brand-emblem` | 1:1 | 2 | 是 | 左侧导航的品牌标记、加载页 |
+| P3 | `app-icon` | 1:1 | 2 |  | 浏览器标签图标 / 桌面图标 |
+
+## 故事《末班车之后》
+
+### `story-last-train-cover-tall` · P0 · 2:3（≥ 1024×1536） · 候选 2 张
+
+- 用在：发现页故事卡片（裁成 4:5）、准备页海报（裁成 3:4）、最近记录图标
+- 现状：没有图，显示书本图标
+- 安全区：手提箱和长椅放在画面中央的正方形里
+
+**Prompt**
+
+```text
+Portrait 2:3 illustration of the waiting room of a small old railway station on a rainy night, just after the last train has left. In the lower center a worn vintage brown leather suitcase with brass corners stands upright beside an empty wooden bench; a rain-soaked paper luggage tag hangs from its handle, its ink run and unreadable. Two old pendant lamps pool warm amber light on the bench and the terrazzo floor; behind them a tall window shows a wet, empty platform under deep blue night, rain streaks on the glass and a distant red signal light. Quiet, gentle mystery: a little lonely but safe. Keep the suitcase and the bench inside the central square of the frame. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.
+```
+
+### `story-last-train-cover-wide` · P0 · 3:2（≥ 1536×1024） · 候选 2 张
+
+- 用在：故事详情页大图（4:3 区域）
+- 现状：没有图，显示书本图标
+- 安全区：主体在中间 2/3 宽度内
+
+**Prompt**
+
+```text
+Landscape 3:2 illustration of the waiting room of a small old railway station on a rainy night, just after the last train has left. Centered: a worn vintage brown leather suitcase with brass corners standing beside an empty wooden bench, a rain-soaked paper luggage tag with run, unreadable ink. Warm amber pendant lamps; tall windows on both sides show a wet empty platform under deep blue night, rain streaks, a distant red signal light. Quiet, gentle mystery, a little lonely but safe. Keep the suitcase and bench within the middle two-thirds of the width. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.
+```
+
+### `story-last-train-scene-waiting-room` · P0 · 3:2（≥ 1536×1024）
+
+- 用在：游玩页场景横幅：开场与第 1–2 拍（会被裁成约 5:1 的扁条）
+- 现状：纯色渐变
+- 安全区：关键物体都在画面垂直方向 35%–70% 的中段
+
+**Prompt**
+
+```text
+Wide landscape 3:2 view of the waiting room of a small old railway station on a rainy night, just after the last train has left, at about 1 a.m.: rows of wooden benches, a shuttered ticket window, a round wall clock with plain hands and no numerals, a small lost-and-found counter with a brass bell and a closed logbook, and an old brown leather suitcase standing beside a bench in the middle ground. Only a few warm lamps are on; the rest falls into soft blue shadow; rain on tall windows, a wet platform glimpsed outside. Calm, slightly mysterious slice-of-life mood; an ordinary working station, not abandoned. Keep all key objects in the middle horizontal band of the frame. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.
+```
+
+### `story-last-train-scene-corner` · P1 · 3:2（≥ 1536×1024）
+
+- 用在：第 2 拍（角落里的旅人走过来）
+- 现状：纯色渐变
+- 安全区：中段横条
+
+**Prompt**
+
+```text
+Wide landscape 3:2 view of a quiet corner of the waiting room of a small old railway station on a rainy night, just after the last train has left: an old cast-iron radiator, a single bench with a folded woollen scarf and a paper cup of tea left on it, a dim wall lamp, a rain-streaked window with the blue platform lights beyond. Tender, hesitant mood, as if someone has just stood up. Keep the bench and the scarf in the middle horizontal band. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.
+```
+
+### `story-last-train-scene-duty-room` · P0 · 3:2（≥ 1536×1024）
+
+- 用在：第 3 拍（登记、锁进值班室、天快亮）
+- 现状：纯色渐变
+- 安全区：中段横条
+
+**Prompt**
+
+```text
+Wide landscape 3:2 view of the small duty room / lost-property office of the same old railway station just before dawn: a tidy wooden desk with an open logbook and a fountain pen (handwriting not legible), a metal flashlight, a wall board with several keys on hooks, and the old brown leather suitcase placed on a shelf inside a wire-mesh locker. A green-shaded desk lamp gives warm light while the window shows the sky turning pale blue-grey at dawn. Orderly, calm, reassuring. Key objects in the middle horizontal band. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, pale dawn light meeting warm lamplight, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.
+```
+
+### `story-last-train-scene-platform-dawn` · P1 · 3:2（≥ 1536×1024）
+
+- 用在：结尾 / 开放模式
+- 现状：纯色渐变
+- 安全区：中段横条
+
+**Prompt**
+
+```text
+Wide landscape 3:2 view of an empty small-town railway platform at dawn after a rainy night: wet concrete reflecting a pale peach-and-blue sky, rails curving away into light mist, a single wooden bench, an illuminated departure board glowing softly with abstract light rows only (no characters), overhead wires catching the first light. Hopeful, quiet morning. Key elements in the middle horizontal band. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, pale dawn light meeting warm lamplight, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.
+```
+
+## 故事《雨中的约定》
+
+### `story-promise-rain-cover-tall` · P1 · 2:3（≥ 1024×1536） · 候选 2 张
+
+- 用在：发现页故事卡片、准备页海报、最近记录图标
+- 现状：借用 Lena 的书房插画（不是剧院）
+- 安全区：门口和讲台在中央正方形内
+
+**Prompt**
+
+```text
+Portrait 2:3 illustration of the entrance of an old ornate 1920s theatre at night in heavy rain. A marquee lined with warm light bulbs, a few of them flickering, carries no lettering at all. Under the awning: a red velvet rope, a wooden doorman's lectern with a clipboard guest list whose writing is not legible, and a dark umbrella leaning against it. Wet pavement and puddles reflect gold and crimson light; rain falls in visible streaks against deep blue night. Mystery with a touch of romance. Keep the doorway and the lectern inside the central square. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.
+```
+
+### `story-promise-rain-cover-wide` · P1 · 3:2（≥ 1536×1024） · 候选 2 张
+
+- 用在：故事详情页大图
+- 现状：借用 Lena 的书房插画
+- 安全区：主体在中间 2/3 宽度内
+
+**Prompt**
+
+```text
+Landscape 3:2 illustration of the entrance of an old ornate 1920s theatre at night in heavy rain: bulb-lined marquee with no lettering, glass doors glowing warm, a red velvet rope, a doorman's lectern with an illegible guest list on a clipboard, a dark umbrella, gold and crimson reflections in puddles, rain streaks against deep blue night. Mystery with a touch of romance. Keep the doorway and lectern within the middle two-thirds of the width. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.
+```
+
+### `story-promise-rain-scene-entrance-rain` · P1 · 3:2（≥ 1536×1024）
+
+- 用在：开场与第 1 拍（门口、名单被划掉）
+- 现状：借用了一张现代高楼休息室（与 1920 年代剧院不符）
+- 安全区：中段横条
+
+**Prompt**
+
+```text
+Wide landscape 3:2 view of the entrance of an old ornate 1920s theatre at night in heavy rain, seen from across a wet cobblestone street: a glowing bulb marquee with no lettering, glass doors with warm light behind them, a velvet rope and a doorman's lectern under the awning, an umbrella, reflections in puddles, rain streaks. Mysterious but inviting. Key elements in the middle horizontal band. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.
+```
+
+### `story-promise-rain-scene-backstage` · P1 · 3:2（≥ 1536×1024）
+
+- 用在：第 2 拍（后台签到簿）
+- 现状：借用 Lena 的书房插画
+- 安全区：中段横条
+
+**Prompt**
+
+```text
+Wide landscape 3:2 view of a quiet backstage corridor of an old ornate 1920s theatre at night: exposed brick wall, a costume rack with velvet garments, coiled ropes and a sandbag, a stage door with a small round window, and a wooden desk under a green-shaded lamp holding an open sign-in book (handwriting not legible) and a pen. A small locked wooden key cabinet hangs on the wall. Hushed, intimate, faintly suspenseful; muted crimson and brass. Key elements in the middle horizontal band. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.
+```
+
+### `story-promise-rain-scene-office` · P1 · 3:2（≥ 1536×1024）
+
+- 用在：第 3 拍（经理办公室、沾墨的钥匙）
+- 现状：借用 Lena 的书房插画
+- 安全区：中段横条
+
+**Prompt**
+
+```text
+Wide landscape 3:2 view of the theatre manager's small office at night, the door half open: a heavy wooden desk with a single brass key whose paper tag is smudged with dark ink, an inkwell, a neat stack of programs with no readable printing, a framed photograph too far away to make out, rain on the window behind, a warm desk lamp. Calm, a little melancholy, quietly revealing. Key elements in the middle horizontal band. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.
+```
+
+### `story-promise-rain-scene-entrance-after-rain` · P1 · 3:2（≥ 1536×1024）
+
+- 用在：第 4 拍（雨小了、灯重新亮起、开场铃响）
+- 现状：借用现代休息室图
+- 安全区：中段横条
+
+**Prompt**
+
+```text
+Wide landscape 3:2 view of the same entrance of an old ornate 1920s theatre as the rain eases: last drops in puddles, the bulb marquee now fully and steadily lit (no lettering), the glass doors open and spilling warm golden light, a closed umbrella hanging on a rope post, the faint glow of the auditorium beyond. Relieved, warm ending. Key elements in the middle horizontal band. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.
+```
+
+## 角色背景（Live2D 背后）
+
+### `backdrop-lena` · P1 · 2:3（≥ 1024×1536） · 候选 2 张
+
+- 用在：Lena（剧院调查员）：角色页舞台、私聊左侧舞台、牌桌侧栏、故事左栏（作为 Live2D 后面的背景）
+- 现状：纯色渐变
+- 安全区：中间一半宽度保持干净、虚化（人物会叠在中间）
+
+**Prompt**
+
+```text
+Portrait 2:3 background illustration of an investigator's study in an old theatre district at night: a tall arched window on the left with rain and soft city lights, bookshelves and neatly tied case folders on the right, a brass desk lamp glowing, a pinned street map with red string on a cork board (no writing). This is a background plate: an animated character will be composited in the center, so keep the central half of the width calm, softly out of focus and low in contrast (a wall, window glow or gentle bokeh), with the interesting detail toward the edges and the top. Eye-level camera, shallow depth of field. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.
+```
+
+### `backdrop-arthur` · P1 · 2:3（≥ 1024×1536） · 候选 2 张
+
+- 用在：Arthur（剧院经理）：角色页舞台、私聊左侧舞台、牌桌侧栏、故事左栏（作为 Live2D 后面的背景）
+- 现状：纯色渐变
+- 安全区：中间一半宽度保持干净、虚化（人物会叠在中间）
+
+**Prompt**
+
+```text
+Portrait 2:3 background illustration of a theatre manager's office above a grand old stage: dark wood panelling, deep red velvet curtains, a brass key board, leather ledgers, framed playbills seen from too far to read, and an interior window looking down on a softly lit, empty stage. This is a background plate: an animated character will be composited in the center, so keep the central half of the width calm, softly out of focus and low in contrast (a wall, window glow or gentle bokeh), with the interesting detail toward the edges and the top. Eye-level camera, shallow depth of field. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.
+```
+
+### `backdrop-marcus` · P1 · 2:3（≥ 1024×1536） · 候选 2 张
+
+- 用在：Marcus（舞台监督）：角色页舞台、私聊左侧舞台、牌桌侧栏、故事左栏（作为 Live2D 后面的背景）
+- 现状：纯色渐变
+- 安全区：中间一半宽度保持干净、虚化（人物会叠在中间）
+
+**Prompt**
+
+```text
+Portrait 2:3 background illustration of a stage manager's prompt corner backstage: a cue-light panel with small coloured bulbs, a headset hanging on a hook, ropes and pulleys of the fly system rising into darkness, painted scenery flats leaning against the wall, a clamp work lamp with warm light against the dark stage. This is a background plate: an animated character will be composited in the center, so keep the central half of the width calm, softly out of focus and low in contrast (a wall, window glow or gentle bokeh), with the interesting detail toward the edges and the top. Eye-level camera, shallow depth of field. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.
+```
+
+### `backdrop-nora` · P1 · 2:3（≥ 1024×1536） · 候选 2 张
+
+- 用在：Nora（好奇的同伴）：角色页舞台、私聊左侧舞台、牌桌侧栏、故事左栏（作为 Live2D 后面的背景）
+- 现状：纯色渐变
+- 安全区：中间一半宽度保持干净、虚化（人物会叠在中间）
+
+**Prompt**
+
+```text
+Portrait 2:3 background illustration of a curious explorer's attic workshop at golden hour: a round window with low warm sun, old maps and a globe, potted plants, small brass gadgets and a telescope, open notebooks with sketches only (no writing); warm and inviting. This is a background plate: an animated character will be composited in the center, so keep the central half of the width calm, softly out of focus and low in contrast (a wall, window glow or gentle bokeh), with the interesting detail toward the edges and the top. Eye-level camera, shallow depth of field. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm golden-hour sunlight with soft teal shadows, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.
+```
+
+### `backdrop-iris` · P1 · 2:3（≥ 1024×1536） · 候选 2 张
+
+- 用在：Iris（细心的倾听者）：角色页舞台、私聊左侧舞台、牌桌侧栏、故事左栏（作为 Live2D 后面的背景）
+- 现状：纯色渐变
+- 安全区：中间一半宽度保持干净、虚化（人物会叠在中间）
+
+**Prompt**
+
+```text
+Portrait 2:3 background illustration of a quiet reading nook by a rainy window at dusk: a window seat with a soft knitted blanket, a tea set, a small stack of letters and a fountain pen (no readable writing), candle light meeting blue-grey dusk; calm and gentle. This is a background plate: an animated character will be composited in the center, so keep the central half of the width calm, softly out of focus and low in contrast (a wall, window glow or gentle bokeh), with the interesting detail toward the edges and the top. Eye-level camera, shallow depth of field. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.
+```
+
+### `backdrop-generic` · P1 · 2:3（≥ 1024×1536）
+
+- 用在：创作的角色（通用）：角色页舞台、私聊左侧舞台、牌桌侧栏、故事左栏（作为 Live2D 后面的背景）
+- 现状：纯色渐变
+- 安全区：中间一半宽度保持干净、虚化（人物会叠在中间）
+
+**Prompt**
+
+```text
+Portrait 2:3 background illustration of a neutral cozy room at night with a window, warm lamps and soft bokeh lights, no specific profession; suits any character. This is a background plate: an animated character will be composited in the center, so keep the central half of the width calm, softly out of focus and low in contrast (a wall, window glow or gentle bokeh), with the interesting detail toward the edges and the top. Eye-level camera, shallow depth of field. Style: painterly cinematic digital illustration, semi-realistic, fine brushwork, soft volumetric light, warm amber and brass lamplight against cool teal-blue night, rich but muted colors, high detail. No people, no faces, no human silhouettes. No text, letters, numbers, readable writing, signage, logos, watermarks or UI elements. Not photographic, not cartoon or chibi, no horror.
+```
+
+## 游戏封面（候选）
+
+### `game-royale-cover` · P2 · 2:3（≥ 1024×1536） · 候选 2 张
+
+- 用在：发现页游戏卡片（居中裁成正方形）、准备页海报（3:4）、“一起玩”弹窗
+- 现状：480×480 的首页预览视频首帧（棋盘截图，偏糊）
+- 安全区：主体在中央正方形内
+
+**Prompt**
+
+```text
+Original key art for a casino dice board game. A stylized night boulevard of six glamorous fictional casino buildings in black-and-gold art-deco style with neon accents, seen from slightly above; in the foreground on green felt, a handful of colourful six-sided dice with white pips tumbling mid-roll beside a fan of fictional pastel banknotes decorated only with abstract guilloche patterns; gold light bokeh. Rich black, gold, emerald and ruby; polished premium tabletop-game illustration. Main subject inside the central square of a portrait 2:3 frame. No text, letters or numbers anywhere (titles and values are drawn by the app), no logos or publisher marks, no watermarks, no people; do not imitate any published board game's box or card art. No real casino names, city signs or real currency designs.
+```
+
+### `game-splendor-cover` · P2 · 2:3（≥ 1024×1536） · 候选 2 张
+
+- 用在：同上
+- 现状：同上
+- 安全区：主体在中央正方形内
+
+**Prompt**
+
+```text
+Original key art evoking the Renaissance gem trade. A merchant's walnut table by an arched stone window overlooking a Renaissance harbour city at golden hour; on a deep velvet cloth lie piles of cut and uncut gemstones — emerald green, sapphire blue, ruby red, diamond white and onyx black — with a few plain gold tokens, a brass balance scale and a closed leather ledger tied with a ribbon. Oil-painting look, warm light, rich textures. Main subject inside the central square of a portrait 2:3 frame. No text, letters or numbers anywhere (titles and values are drawn by the app), no logos or publisher marks, no watermarks, no people; do not imitate any published board game's box or card art.
+```
+
+### `game-cabo-cover` · P2 · 2:3（≥ 1024×1536） · 候选 2 张
+
+- 用在：同上
+- 现状：同上
+- 安全区：主体在中央正方形内
+
+**Prompt**
+
+```text
+Original whimsical storybook illustration for a light card game. Four playing cards fan out in the center against a deep forest-green background with a subtle leaf pattern; each card shows a cute creature in lush leaves, flowers and mushrooms — a fox, a small octopus, an owl and a rabbit — and a fifth card lies face down showing an ornamental pattern of overlapping green, teal and yellow leaf scales. Bright friendly colours, gouache-like texture, clean shapes, soft shading, children's-book quality. The cards carry no numbers, letters or symbols. Main subject inside the central square of a portrait 2:3 frame. No text, letters or numbers anywhere (titles and values are drawn by the app), no logos or publisher marks, no watermarks, no people; do not imitate any published board game's box or card art. No scary creatures.
+```
+
+## 空状态 / 错误状态插画
+
+### `empty-friends` · P2 · 1:1（≥ 1024×1024） · 透明
+
+- 用在：好友页空状态（还没有好友 / 需要登录）
+- 现状：只有文字，页面大面积空白
+- 安全区：主体居中，四周留白
+
+**Prompt**
+
+```text
+two cups of tea side by side on a windowsill, gentle rain outside the window, a small potted plant; cozy and inviting. Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.
+```
+
+### `empty-recent` · P2 · 1:1（≥ 1024×1024） · 透明
+
+- 用在：最近页空状态
+- 现状：只有文字，页面大面积空白
+- 安全区：主体居中，四周留白
+
+**Prompt**
+
+```text
+a small neat stack of blank ticket stubs, a ribbon bookmark and a single die, loosely arranged. Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.
+```
+
+### `empty-create` · P2 · 1:1（≥ 1024×1024） · 透明
+
+- 用在：创作页空状态
+- 现状：只有文字，页面大面积空白
+- 安全区：主体居中，四周留白
+
+**Prompt**
+
+```text
+an open sketchbook with a pencil resting on it and a small desk lamp glowing beside it; hopeful. Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.
+```
+
+### `state-not-found` · P2 · 1:1（≥ 1024×1024） · 透明
+
+- 用在：找不到内容 / 局不存在
+- 现状：只有文字，页面大面积空白
+- 安全区：主体居中，四周留白
+
+**Prompt**
+
+```text
+a small wooden door slightly ajar with a soft lamp glow behind it and a few fallen leaves on the step; calm, not alarming. Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.
+```
+
+### `state-load-error` · P2 · 1:1（≥ 1024×1024） · 透明
+
+- 用在：加载失败（不是“没有内容”）
+- 现状：只有文字，页面大面积空白
+- 安全区：主体居中，四周留白
+
+**Prompt**
+
+```text
+a short string of warm fairy lights, slightly tangled, with one bulb dimmed; gentle "something went wrong", not alarming. Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.
+```
+
+### `state-signin` · P2 · 1:1（≥ 1024×1024） · 透明
+
+- 用在：需要登录的提示
+- 现状：只有文字，页面大面积空白
+- 安全区：主体居中，四周留白
+
+**Prompt**
+
+```text
+a small brass key resting on a folded letter sealed with a blank wax seal (no letters on the seal). Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.
+```
+
+## 创作工作室
+
+### `create-type-story` · P3 · 1:1（≥ 1024×1024） · 透明
+
+- 用在：新建作品弹窗里的“故事”类型卡片
+- 现状：只有图标
+- 安全区：居中
+
+**Prompt**
+
+```text
+An open book with a tiny pop-up theatre stage and curtain rising from its pages. Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.
+```
+
+### `create-type-character` · P3 · 1:1（≥ 1024×1024） · 透明
+
+- 用在：新建作品弹窗里的“角色”类型卡片
+- 现状：只有图标
+- 安全区：居中
+
+**Prompt**
+
+```text
+An empty ornate oval portrait frame standing on a small easel, a few soft sparkles around it, no face or figure inside the frame. Minimal line-and-wash spot illustration on a transparent background (if transparency is impossible, use a flat #1B1311 background). Palette limited to warm amber #E3B997, terracotta #CB5367 and muted teal #4B94B5 with cream highlights; thin confident lines, lots of negative space, readable at 160 px wide. No text, no letters, no numbers, no people.
+```
+
+### `work-cover-01` · P3 · 2:3（≥ 1024×1536）
+
+- 用在：用户自建作品的默认封面（作品卡片、试演、最近）
+- 现状：没有封面
+- 安全区：中央保持安静，方便叠标题
+
+**Prompt**
+
+```text
+Soft painterly abstract cover background: rain running down a window pane over warm out-of-focus lights. Calm center area for an overlaid title, works at small sizes, warm amber, terracotta and muted teal palette. No text, letters, numbers, logos or people.
+```
+
+### `work-cover-02` · P3 · 2:3（≥ 1024×1536）
+
+- 用在：用户自建作品的默认封面（作品卡片、试演、最近）
+- 现状：没有封面
+- 安全区：中央保持安静，方便叠标题
+
+**Prompt**
+
+```text
+Soft painterly abstract cover background: a parted deep red velvet stage curtain with a warm glow behind it. Calm center area for an overlaid title, works at small sizes, warm amber, terracotta and muted teal palette. No text, letters, numbers, logos or people.
+```
+
+### `work-cover-03` · P3 · 2:3（≥ 1024×1536）
+
+- 用在：用户自建作品的默认封面（作品卡片、试演、最近）
+- 现状：没有封面
+- 安全区：中央保持安静，方便叠标题
+
+**Prompt**
+
+```text
+Soft painterly abstract cover background: a night sky with constellations drawn as dotted lines and small stars (no letters). Calm center area for an overlaid title, works at small sizes, warm amber, terracotta and muted teal palette. No text, letters, numbers, logos or people.
+```
+
+### `work-cover-04` · P3 · 2:3（≥ 1024×1536）
+
+- 用在：用户自建作品的默认封面（作品卡片、试演、最近）
+- 现状：没有封面
+- 安全区：中央保持安静，方便叠标题
+
+**Prompt**
+
+```text
+Soft painterly abstract cover background: layered paper-cut leaves in teal and amber. Calm center area for an overlaid title, works at small sizes, warm amber, terracotta and muted teal palette. No text, letters, numbers, logos or people.
+```
+
+### `work-cover-05` · P3 · 2:3（≥ 1024×1536）
+
+- 用在：用户自建作品的默认封面（作品卡片、试演、最近）
+- 现状：没有封面
+- 安全区：中央保持安静，方便叠标题
+
+**Prompt**
+
+```text
+Soft painterly abstract cover background: soft ink-wash waves in muted teal with a thin gold horizon. Calm center area for an overlaid title, works at small sizes, warm amber, terracotta and muted teal palette. No text, letters, numbers, logos or people.
+```
+
+### `work-cover-06` · P3 · 2:3（≥ 1024×1536）
+
+- 用在：用户自建作品的默认封面（作品卡片、试演、最近）
+- 现状：没有封面
+- 安全区：中央保持安静，方便叠标题
+
+**Prompt**
+
+```text
+Soft painterly abstract cover background: a few glowing paper lanterns floating in warm dusk. Calm center area for an overlaid title, works at small sizes, warm amber, terracotta and muted teal palette. No text, letters, numbers, logos or people.
+```
+
+## 我的 Persona 头像
+
+### `persona-avatar-01` · P3 · 1:1（≥ 1024×1024）
+
+- 用在：账号页“我的 Persona”可选头像（不是人物，避免和角色混淆）
+- 现状：没有头像
+- 安全区：圆形裁切安全
+
+**Prompt**
+
+```text
+An umbrella in light rain. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.
+```
+
+### `persona-avatar-02` · P3 · 1:1（≥ 1024×1024）
+
+- 用在：账号页“我的 Persona”可选头像（不是人物，避免和角色混淆）
+- 现状：没有头像
+- 安全区：圆形裁切安全
+
+**Prompt**
+
+```text
+A glowing paper lantern. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.
+```
+
+### `persona-avatar-03` · P3 · 1:1（≥ 1024×1024）
+
+- 用在：账号页“我的 Persona”可选头像（不是人物，避免和角色混淆）
+- 现状：没有头像
+- 安全区：圆形裁切安全
+
+**Prompt**
+
+```text
+A steaming teacup. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.
+```
+
+### `persona-avatar-04` · P3 · 1:1（≥ 1024×1024）
+
+- 用在：账号页“我的 Persona”可选头像（不是人物，避免和角色混淆）
+- 现状：没有头像
+- 安全区：圆形裁切安全
+
+**Prompt**
+
+```text
+A small sitting fox. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.
+```
+
+### `persona-avatar-05` · P3 · 1:1（≥ 1024×1024）
+
+- 用在：账号页“我的 Persona”可选头像（不是人物，避免和角色混淆）
+- 现状：没有头像
+- 安全区：圆形裁切安全
+
+**Prompt**
+
+```text
+A sleeping cat curled up. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.
+```
+
+### `persona-avatar-06` · P3 · 1:1（≥ 1024×1024）
+
+- 用在：账号页“我的 Persona”可选头像（不是人物，避免和角色混淆）
+- 现状：没有头像
+- 安全区：圆形裁切安全
+
+**Prompt**
+
+```text
+A round little owl. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.
+```
+
+### `persona-avatar-07` · P3 · 1:1（≥ 1024×1024）
+
+- 用在：账号页“我的 Persona”可选头像（不是人物，避免和角色混淆）
+- 现状：没有头像
+- 安全区：圆形裁切安全
+
+**Prompt**
+
+```text
+A folded paper boat on a ripple. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.
+```
+
+### `persona-avatar-08` · P3 · 1:1（≥ 1024×1024）
+
+- 用在：账号页“我的 Persona”可选头像（不是人物，避免和角色混淆）
+- 现状：没有头像
+- 安全区：圆形裁切安全
+
+**Prompt**
+
+```text
+A crescent moon with one star. Flat storybook illustration inside a circle-safe composition (the image will be cropped to a circle), deep warm brown background #2A1D19, simple bold shapes in amber, terracotta, teal and cream, readable at 48 px. No text, no letters, no people.
+```
+
+## 品牌（仅候选，由你决定）
+
+### `brand-emblem` · P3 · 1:1（≥ 1024×1024） · 透明 · 候选 2 张
+
+- 用在：左侧导航的品牌标记、加载页
+- 现状：CSS 画的字母 e
+- 安全区：居中
+
+**Prompt**
+
+```text
+A simple warm emblem for an app about companionship and playing together: two overlapping circles forming a soft lantern-like glow with a tiny spark where they meet. Flat geometric shapes in amber and cream on a transparent background, elegant, readable at 24 px. No letters, no text, no people.
+```
+
+### `app-icon` · P3 · 1:1（≥ 1024×1024） · 候选 2 张
+
+- 用在：浏览器标签图标 / 桌面图标
+- 现状：没有
+- 安全区：居中，四周留出圆角安全区
+
+**Prompt**
+
+```text
+The same warm emblem (two overlapping circles forming a soft lantern-like glow with a tiny spark where they meet), centered on a rounded-square tile of deep warm brown #1E1412 with a subtle radial glow. Flat, crisp, readable at 32 px. No letters, no text, no people.
+```
+
+## 不需要生成的
+
+- 五位角色的立绘、头像、Live2D：必须用冻结素材。
+- 三款游戏的卡面/板面：Royale 赌场 atlas、Splendor 卡面/贵族/宝石、CABO 14 张点数插画都已在交接包里。
+
+## 图到了之后我会做什么
+
+1. 从 `generated-assets/batch-01/` 取图，放进项目的 `public/generated/batch-01/`（不混入哈希锁定的交接包素材），生成 `docs/GENERATED_ASSETS.json`：路径、字节数、sha256、对应 prompt、工具/模型、日期、权利标签；候选图挑一张，没选中的也记录在案。
+2. 接入：两个故事的封面与逐拍场景（故事数据里给每一拍指定场景）、角色背景（角色页、私聊、牌桌侧栏、故事左栏，人物居中叠在上面）、空/错误状态插画；游戏封面先作为候选，你确认后再设为默认。
+3. P3 需要加小功能：作品默认封面可选、Persona 头像选择、品牌标记——你确认要哪些再做。
+4. 加 `assets:generated:check` 校验哈希；重拍截图、跑四宽度矩阵和全部测试，更新 `ACCEPTANCE.md`。
diff --git a/everwith-claude-frontend/e2e/art.spec.ts b/everwith-claude-frontend/e2e/art.spec.ts
new file mode 100644
index 00000000..1b808440
--- /dev/null
+++ b/everwith-claude-frontend/e2e/art.spec.ts
@@ -0,0 +1,146 @@
+/**
+ * Generated art (user-provided GPT batch v2-batch-01 — rights unverified, see
+ * docs/GENERATED_ASSETS.json): every picture used from it really loads where it is shown,
+ * story scenes follow the committed beats, the persona picture and work cover choices
+ * persist and show up elsewhere, and with the “assets missing” scenario every one of
+ * them disappears cleanly (no broken image, no other character's face).
+ */
+import {expect, test} from '@playwright/test'
+import type {Page} from '@playwright/test'
+import {settle, shot, writeJSON} from './helpers'
+
+type Seen = Map<string, boolean>
+/** Generated images inside the viewport (lazy images further down are not expected to have loaded). */
+const generatedImages = (page: Page) => page.evaluate(() => [...document.images]
+  .filter(i => (i.currentSrc || i.src).includes('/generated/'))
+  .filter(i => { const r = i.getBoundingClientRect(); return r.width > 0 && r.bottom > 0 && r.top < innerHeight })
+  .map(i => ({src: new URL(i.currentSrc || i.src).pathname, ok: i.complete && i.naturalWidth > 0})))
+const scrollMain = (page: Page, to: 'end' | 'top') => page.locator('#main').evaluate((m, where) => m.scrollTo(0, where === 'end' ? m.scrollHeight : 0), to)
+async function collect(page: Page, seen: Seen) {
+  await settle(page)
+  for (const r of await generatedImages(page)) seen.set(r.src, (seen.get(r.src) ?? true) && r.ok)
+}
+/** Images that finished loading with nothing to show (a broken-image icon). */
+const brokenImages = (page: Page) => page.evaluate(() => [...document.images].filter(i => i.complete && i.naturalWidth === 0).map(i => i.getAttribute('src')))
+
+test('generated art loads where it is used; story scenes follow the beats', async ({page}) => {
+  const seen: Seen = new Map()
+  await page.goto('/#/discover')
+  await expect(page.locator('.ew-card').first()).toBeVisible()
+  await collect(page, seen)
+  await shot(page, 'art-discover')
+  await scrollMain(page, 'end')
+  await collect(page, seen)
+  await scrollMain(page, 'top')
+  await page.goto('/#/discover?tab=games')
+  await expect(page.locator('.ew-card.is-game')).toHaveCount(3)
+  await collect(page, seen)
+  for (const id of ['official-arthur', 'official-iris']) {
+    await page.goto(`/#/characters/${id}?v=1`)
+    await expect(page.locator('.ew-character-stage .ew-backdrop img')).toHaveAttribute('src', `/generated/batch-01/backdrop-${id.slice(9)}.webp`)
+    await collect(page, seen)
+  }
+  for (const id of ['story-promise-rain', 'story-last-train']) {
+    await page.goto(`/#/stories/${id}?v=1`)
+    await expect(page.locator('.ew-story-cover img')).toHaveAttribute('src', `/generated/batch-01/${id}-cover-wide.webp`)
+    await collect(page, seen)
+  }
+  await shot(page, 'art-story-detail')
+
+  // Scenes: opening → beat 1 → beat 2 → beat 3 → a free turn in open mode (ending place).
+  await page.goto('/#/stories/story-last-train/prepare?v=1')
+  await expect(page.locator('.ew-prepare-poster img')).toHaveAttribute('src', '/generated/batch-01/story-last-train-cover-tall.webp')
+  await page.getByTestId('story-start').click()
+  await expect(page.getByTestId('story-play')).toBeVisible()
+  const scene = page.locator('.ew-story-scene')
+  await expect(scene).toHaveAttribute('data-scene', 'waiting-room')
+  await expect(scene.locator('.ew-story-scene-label')).toHaveText('候车室 · 深夜')
+  await collect(page, seen)
+  const order: string[] = []
+  for (const expected of ['waiting-room', 'corner', 'duty-room', 'platform-dawn']) {
+    await page.getByTestId('story-continue-btn').click()
+    await expect(page.getByTestId('story-pending')).toBeHidden({timeout: 15_000})
+    await expect(scene).toHaveAttribute('data-scene', expected)
+    await expect(scene.locator('img')).toHaveAttribute('src', new RegExp(`scene-${expected}\\.webp$`))
+    order.push(expected)
+    await collect(page, seen)
+  }
+  await shot(page, 'art-story-scene-dawn')
+
+  await page.goto('/#/recent')
+  await expect(page.getByTestId('record').first().locator('.ew-record-icon img')).toHaveAttribute('src', '/generated/batch-01/story-last-train-cover-tall.webp')
+  await collect(page, seen)
+  for (const [path, art] of [['/#/friends', 'signin'], ['/#/create', 'create'], ['/#/no-such-page', 'not-found']] as const) {
+    await page.goto(path)
+    await expect(page.locator(`.ew-empty .ew-spot[data-art="${art}"]`)).toBeVisible()
+    await collect(page, seen)
+  }
+  await page.goto('/#/create')
+  await page.getByTestId('create-new').click()
+  await expect(page.locator('dialog[open] .ew-type-art')).toHaveCount(2)
+  await collect(page, seen)
+  await shot(page, 'art-create-types')
+
+  const icon = await page.request.get('/generated/batch-01/favicon-64.png')
+  expect(icon.status()).toBe(200)
+  expect(await page.locator('link[rel="icon"]').getAttribute('href')).toBe('/generated/batch-01/favicon-64.png')
+  const bad = [...seen].filter(([, ok]) => !ok).map(([src]) => src)
+  writeJSON('generated-art', {seen: [...seen.keys()].sort(), count: seen.size, notLoaded: bad, sceneOrder: order})
+  expect(bad).toEqual([])
+  expect(seen.size).toBeGreaterThanOrEqual(20)
+  for (const must of ['brand-emblem.png', 'backdrop-arthur.webp', 'game-splendor-cover.webp', 'story-promise-rain-cover-wide.webp', 'story-last-train-scene-platform-dawn.webp', 'state-not-found.webp', 'create-type-story.webp'])
+    expect([...seen.keys()].some(src => src.endsWith(must)), must).toBe(true)
+})
+
+test('persona picture and work cover: chosen, kept after reload, shown elsewhere', async ({page}) => {
+  await page.goto('/#/account')
+  await page.getByLabel('称呼').fill('小雨')
+  await page.locator('[data-avatar="persona-avatar-06"]').click()
+  await page.getByRole('button', {name: '保存 Persona'}).click()
+  await expect(page.locator('.ew-nav-avatar img')).toHaveAttribute('src', '/generated/batch-01/persona-avatar-06.webp')
+  await page.reload()
+  await expect(page.locator('[data-avatar="persona-avatar-06"]')).toHaveAttribute('aria-pressed', 'true')
+  await shot(page, 'art-persona-avatar')
+  await page.goto('/#/games/cabo/prepare')
+  await expect(page.locator('.ew-seat-row').first().locator('img')).toHaveAttribute('src', '/generated/batch-01/persona-avatar-06.webp')
+  await expect(page.locator('.ew-prepare-poster img')).toHaveAttribute('src', '/generated/batch-01/game-cabo-cover.webp')
+
+  await page.goto('/#/create')
+  await page.getByTestId('create-new').click()
+  await page.getByTestId('type-character').click()
+  await page.getByTestId('work-name').fill('雨夜来信')
+  await page.getByTestId('work-create').click()
+  await expect(page.getByTestId('work-editor')).toBeVisible()
+  await expect(page.locator('[data-testid="cover-picker"] [aria-pressed="true"]')).toHaveCount(1) // a preset cover from the start
+  await page.locator('[data-cover="work-cover-05"]').click()
+  await expect(page.getByTestId('sync-status')).toHaveText('草稿已同步', {timeout: 10_000})
+  await shot(page, 'art-work-cover-picker')
+  await page.goto('/#/create')
+  await expect(page.getByTestId('work-card').first().locator('.ew-work-cover img')).toHaveAttribute('src', '/generated/batch-01/work-cover-05.webp')
+  await shot(page, 'art-work-cards')
+})
+
+test('assets missing: generated art drops out cleanly — no broken image, no substitute face', async ({page}) => {
+  await page.goto('/#/discover')
+  await page.evaluate(() => sessionStorage.setItem('everwith.mock.scenarios', JSON.stringify({'assets.missing': true})))
+  const pages = ['/#/discover', '/#/discover?tab=games', '/#/characters/official-nora?v=1', '/#/stories/story-promise-rain?v=1', '/#/friends', '/#/create', '/#/account']
+  const report: Record<string, unknown> = {}
+  for (const path of pages) {
+    await page.goto(path)
+    await page.reload()
+    await settle(page)
+    const broken = await brokenImages(page)
+    const generated = await generatedImages(page)
+    report[path] = {broken, generatedShown: generated.filter(g => g.ok).length}
+    expect(broken, path).toEqual([])
+    expect(generated.filter(g => g.ok), path).toEqual([])
+  }
+  await expect(page.locator('.ew-backdrop')).toHaveCount(0)
+  await expect(page.locator('.ew-brand-mark')).toHaveText('e') // lettermark fallback
+  await page.goto('/#/characters/official-nora?v=1')
+  await page.reload()
+  await settle(page)
+  await expect(page.locator('.ew-character-stage .ew-backdrop')).toHaveCount(0)
+  await shot(page, 'art-missing-character')
+  writeJSON('generated-art-missing', report)
+})
diff --git a/everwith-claude-frontend/e2e/core.spec.ts b/everwith-claude-frontend/e2e/core.spec.ts
new file mode 100644
index 00000000..2dcbcbf0
--- /dev/null
+++ b/everwith-claude-frontend/e2e/core.spec.ts
@@ -0,0 +1,112 @@
+/**
+ * Core journeys on the mock adapter: discover states, add-friend with sign-in in the
+ * middle, private chat (send / stop / retry / unknown result), draft persistence, and
+ * “play together” from a friend. Scenario switches are the documented mock scenarios.
+ */
+import {expect, test} from '@playwright/test'
+import type {Page} from '@playwright/test'
+import {shot, signUp, writeJSON} from './helpers'
+
+const setScenarios = (page: Page, on: Record<string, true>) => page.evaluate(v => sessionStorage.setItem('everwith.mock.scenarios', JSON.stringify(v)), on)
+const composer = (page: Page) => page.locator('.ew-chat-main textarea')
+const playerBubbles = (page: Page, text: string) => page.locator('.ew-msg.is-player:not(.is-provisional) .ew-msg-bubble', {hasText: text})
+
+test('discover: first visit, tabs, empty search vs load failure, deep link and Back', async ({page}) => {
+  await page.goto('/')
+  await expect(page).toHaveURL(/#\/discover$/)
+  await expect(page.locator('.ew-card').first()).toBeVisible()
+  await shot(page, 'discover-all-zh')
+  await page.getByRole('link', {name: '游戏', exact: true}).click()
+  await expect(page).toHaveURL(/tab=games/)
+  await shot(page, 'discover-games-zh')
+  await page.getByRole('searchbox').or(page.locator('.ew-search input')).first().fill('zzzz')
+  await expect(page.getByText('没有找到与“zzzz”相关的内容。')).toBeVisible()
+  await shot(page, 'discover-empty-search')
+  await setScenarios(page, {'discover.error': true})
+  await page.goto('/#/discover?tab=stories')
+  await page.reload()
+  await expect(page.getByText('内容加载失败（不是“没有内容”）。')).toBeVisible()
+  await shot(page, 'discover-load-error')
+  await setScenarios(page, {})
+  await page.reload()
+  await page.locator('.ew-card').first().click()
+  await expect(page).toHaveURL(/#\/stories\//)
+  await page.goBack()
+  await expect(page).toHaveURL(/tab=stories/)
+})
+
+test('add friend: naming → sign-in in the middle → same name restored → confirm → private chat', async ({page}) => {
+  await page.goto('/#/characters/official-lena?v=1')
+  await page.getByRole('button', {name: '加为好友'}).first().click()
+  const name = page.getByLabel('好友名字')
+  await name.fill('雨夜的 Lena')
+  await page.getByRole('button', {name: '确认加为好友'}).click()
+  await signUp(page, 'e2e-core@example.com')
+  await expect(page.getByLabel('好友名字')).toHaveValue('雨夜的 Lena') // restored, not auto-created
+  await shot(page, 'friend-naming-after-signin')
+  await page.getByRole('button', {name: '确认加为好友'}).click()
+  await expect(page).toHaveURL(/#\/friends\/fr_/)
+  await expect(composer(page)).toBeVisible()
+
+  // Send with Enter, receive a committed reply.
+  await composer(page).fill('你好，今天下雨了')
+  await composer(page).press('Enter')
+  await expect(playerBubbles(page, '你好，今天下雨了')).toHaveCount(1, {timeout: 20_000})
+  await expect(page.locator('.ew-msg.is-character:not(.is-provisional)').last()).toBeVisible()
+  await page.waitForTimeout(1500)
+  await shot(page, 'chat-after-reply')
+
+  // Draft survives a reload (per account/friend/epoch/conversation).
+  await composer(page).fill('还没发出的草稿')
+  await page.waitForTimeout(400)
+  await page.reload()
+  await expect(composer(page)).toHaveValue('还没发出的草稿')
+
+  // Stop: the partial reply never enters history; the text comes back.
+  await composer(page).fill('请讲一个很长的故事')
+  await composer(page).press('Enter')
+  await page.locator('.ew-send.is-stop').click()
+  await expect(page.getByText('已停止。半段回复没有进入记录，原输入已放回输入框。')).toBeVisible({timeout: 15_000})
+  await expect(playerBubbles(page, '请讲一个很长的故事')).toHaveCount(0)
+  await shot(page, 'chat-stopped')
+
+  // Retryable failure through the Mock panel UI → explicit Retry of the same operation.
+  await page.getByTestId('mock-panel-open').click()
+  await page.getByLabel(/下一次私聊：生成中途可重试失败/).check()
+  await shot(page, 'mock-panel')
+  await page.keyboard.press('Escape')
+  await composer(page).fill('第二句话')
+  await composer(page).press('Enter')
+  await expect(page.getByText('这次生成中断了。原输入已保留，可以明确“重试”同一条（不会重复发送）。')).toBeVisible({timeout: 20_000})
+  await shot(page, 'chat-retryable')
+  await page.getByRole('button', {name: '重试同一条'}).click()
+  await expect(playerBubbles(page, '第二句话')).toHaveCount(1, {timeout: 20_000})
+
+  // Unknown result: look up the original key first; never a second turn.
+  await setScenarios(page, {'chat.unknown_result': true})
+  await page.reload()
+  await composer(page).fill('结果未知的一句')
+  await composer(page).press('Enter')
+  await expect(page.getByText('尚未确认这条消息是否被接收。请先“查询原请求”，不要重新发送。')).toBeVisible({timeout: 15_000})
+  await shot(page, 'chat-unknown-result')
+  await page.getByRole('button', {name: '查询原请求'}).click()
+  const resend = page.getByRole('button', {name: '用同一请求重新发送'})
+  if (await resend.isVisible({timeout: 3000}).catch(() => false)) await resend.click()
+  await expect(playerBubbles(page, '结果未知的一句')).toHaveCount(1, {timeout: 20_000})
+  writeJSON('chat-core', {ok: true, checked: ['enter-send', 'draft-reload', 'stop', 'retry-same-op', 'unknown-lookup']})
+
+  // Play together → game prepare keeps the friend in seat 1 → explicit Start.
+  if (!(await page.getByRole('button', {name: '一起玩'}).isVisible())) await page.getByRole('button', {name: '工具'}).click()
+  await page.getByRole('button', {name: '一起玩'}).click()
+  await page.getByRole('button', {name: /Splendor/}).click()
+  await expect(page).toHaveURL(/#\/games\/gems\/prepare\?with=/)
+  await expect(page.locator('.ew-seat-row').nth(1)).toContainText('雨夜的 Lena')
+  await shot(page, 'play-together-prepare')
+  await page.locator('.ew-start-btn').click()
+  await expect(page).toHaveURL(/#\/play\/game\//)
+  await expect(page.locator('.ew-seat[data-seat="1"]')).toContainText('雨夜的 Lena')
+  await shot(page, 'play-together-table')
+  await page.getByRole('link', {name: /去私聊 · 雨夜的 Lena/}).click()
+  await expect(page).toHaveURL(/#\/friends\/fr_/)
+  await expect(composer(page)).toBeVisible()
+})
diff --git a/everwith-claude-frontend/e2e/edge.spec.ts b/everwith-claude-frontend/e2e/edge.spec.ts
new file mode 100644
index 00000000..bdc72ec4
--- /dev/null
+++ b/everwith-claude-frontend/e2e/edge.spec.ts
@@ -0,0 +1,285 @@
+/**
+ * Edge cases for A05 / A06 / A07 / A11 / A16 on the mock adapter:
+ * double-click send, Stop losing to a commit, late frames from a retired run, a stale head,
+ * a friend reset elsewhere, leaving mid-stream, expired sign-in; reading position / draft /
+ * selection across side panel, profile dialog and reload; game start receipt lost, a missing
+ * game, and a failed table-chat line.
+ */
+import {expect, test} from '@playwright/test'
+import type {Page} from '@playwright/test'
+import {shot, signUp, writeJSON} from './helpers'
+
+const composer = (page: Page) => page.locator('.ew-chat-main textarea')
+const committed = (page: Page, text: string) => page.locator('.ew-msg.is-player:not(.is-provisional) .ew-msg-bubble', {hasText: text})
+const idle = (page: Page) => expect(page.locator('.ew-chat-main .ew-send.is-stop')).toHaveCount(0, {timeout: 20_000})
+async function scenario(page: Page, on: Record<string, true>) {
+  await page.evaluate(v => sessionStorage.setItem('everwith.mock.scenarios', JSON.stringify(v)), on)
+  await page.reload()
+  await expect(composer(page)).toBeVisible()
+}
+async function befriend(page: Page, id: string, email: string) {
+  await page.goto(`/#/characters/${id}?v=1`)
+  await page.getByRole('button', {name: '加为好友'}).first().click()
+  await page.getByRole('button', {name: '确认加为好友'}).click()
+  await signUp(page, email)
+  await page.getByRole('button', {name: '确认加为好友'}).click()
+  await expect(page).toHaveURL(/#\/friends\/fr_/)
+  await expect(composer(page)).toBeVisible()
+}
+async function say(page: Page, text: string) {
+  await composer(page).fill(text)
+  await composer(page).press('Enter')
+  await expect(committed(page, text)).toHaveCount(1, {timeout: 20_000})
+  await idle(page)
+}
+const dbGames = (page: Page) => page.evaluate(() => Object.keys(JSON.parse(localStorage.getItem('everwith.mock.db.v1') ?? '{}').games ?? {}).length)
+
+test('chat races: double-click once, Stop that loses to the commit, late old-run frames, stale head, reset elsewhere, leaving mid-stream, expired sign-in', async ({page}) => {
+  test.setTimeout(180_000)
+  const report: Record<string, unknown> = {}
+  await befriend(page, 'official-arthur', 'e2e-edge@example.com')
+  const chatUrl = page.url()
+
+  // A05 double-click: one operation; the second click does not hit the Stop that replaced Send.
+  await composer(page).fill('只发一次')
+  await page.locator('.ew-chat-main .ew-send').dblclick()
+  await expect(committed(page, '只发一次')).toHaveCount(1, {timeout: 20_000})
+  await idle(page)
+  await page.waitForTimeout(800)
+  expect(await committed(page, '只发一次').count()).toBe(1)
+  await expect(page.getByText('已停止。半段回复没有进入记录')).toHaveCount(0)
+  report.doubleClick = {committedTurns: 1, stopped: false}
+
+  // A18 Cancel → neutral: a real Stop drops the provisional reply and the face returns to neutral.
+  await composer(page).fill('给我讲个开心的故事吧！')
+  await composer(page).press('Enter')
+  await expect(page.locator('.ew-chat-main .ew-msg.is-character.is-provisional').last()).toBeVisible({timeout: 10_000})
+  await page.locator('.ew-chat-main .ew-send.is-stop').click()
+  await expect(page.getByText('已停止。半段回复没有进入记录，原输入已放回输入框。')).toBeVisible({timeout: 15_000})
+  await expect(page.locator('.ew-chat-stage-meta .ew-chip').first()).toHaveText('平静')
+  await page.waitForTimeout(600)
+  report.cancelNeutral = {chip: '平静', runtimeExpressions: await page.evaluate(() => (window as unknown as {__everwithLive2D?: {snapshot(): {runtimes: {expression: string | null}[]}}}).__everwithLive2D?.snapshot().runtimes.map(r => r.expression) ?? null)}
+  await shot(page, 'chat-stop-neutral')
+
+  // A05 Stop vs commit: the commit wins and is reported as such.
+  await scenario(page, {'chat.commit_before_cancel': true})
+  await composer(page).fill('停止和提交赛跑')
+  await composer(page).press('Enter')
+  await page.locator('.ew-chat-main .ew-send.is-stop').click()
+  await expect(page.getByText('这条回复在停止前已经完成，结果已保留（没有被停止）。')).toBeVisible({timeout: 15_000})
+  await expect(committed(page, '停止和提交赛跑')).toHaveCount(1)
+  await shot(page, 'chat-commit-won')
+  report.commitBeforeCancel = 'commit_won notice, reply kept'
+
+  // A06 late frames from the retired run are rejected (run_epoch / seq check).
+  await scenario(page, {'chat.late_old_stream': true})
+  await composer(page).fill('旧帧晚到')
+  await composer(page).press('Enter')
+  await page.getByRole('button', {name: '重试同一条'}).click({timeout: 20_000})
+  await expect(committed(page, '旧帧晚到')).toHaveCount(1, {timeout: 20_000})
+  await expect(page.getByText(/已拒绝 \d+ 个旧 run 的晚到帧/)).toBeVisible()
+  await expect(page.getByText('（这是旧 run 的晚到片段，不应显示）')).toHaveCount(0)
+  await shot(page, 'chat-late-frames-rejected')
+  report.lateOldRun = await page.getByText(/已拒绝 \d+ 个旧 run 的晚到帧/).innerText()
+
+  // A06 stale head (another window committed first): latest loaded, draft kept, nothing resent.
+  await scenario(page, {'chat.stale_head': true})
+  await composer(page).fill('我以为我是最新的')
+  await composer(page).press('Enter')
+  await expect(page.getByText('会话在别处有了新内容。已读取最新版本，你的草稿保留在输入框，没有自动重发。')).toBeVisible({timeout: 15_000})
+  await expect(page.getByText('（另一窗口发送的消息）')).toBeVisible()
+  await expect(composer(page)).toHaveValue('我以为我是最新的')
+  await page.waitForTimeout(1500)
+  await expect(committed(page, '我以为我是最新的')).toHaveCount(0)
+  await shot(page, 'chat-stale-head')
+  report.staleHead = {draftKept: true, autoResent: false}
+
+  // A06 leaving mid-stream: the unmounted view writes nothing; coming back shows one committed turn.
+  await composer(page).fill('离开再回来')
+  await composer(page).press('Enter')
+  await expect(page.locator('.ew-chat-main .ew-send.is-stop')).toBeVisible()
+  await page.goto('/#/discover')
+  await page.waitForTimeout(4500)
+  await page.goto(chatUrl)
+  await expect(committed(page, '离开再回来')).toHaveCount(1, {timeout: 20_000})
+  await idle(page)
+  await expect(composer(page)).toHaveValue('') // the sent text is not resurrected as an old draft
+  report.leaveMidStream = {committedTurns: await committed(page, '离开再回来').count()}
+
+  // A05 expired sign-in on send: the text comes back, nothing is recorded. (Switched on in
+  // the mock panel, not by reloading — the reload's own requests would consume it first.)
+  await page.getByTestId('mock-panel-open').click()
+  await page.getByLabel(/下一次受保护请求：登录过期 401/).check()
+  await page.keyboard.press('Escape')
+  await composer(page).fill('登录过期时的一句')
+  await composer(page).press('Enter')
+  await expect(page.getByText('登录已过期。草稿已保留，重新登录后可以继续。')).toBeVisible({timeout: 15_000})
+  await expect(composer(page)).toHaveValue('登录过期时的一句')
+  await expect(committed(page, '登录过期时的一句')).toHaveCount(0)
+  await shot(page, 'chat-auth-expired')
+
+  // A06 friend reset elsewhere: epoch changes, the old conversation turns read-only.
+  await scenario(page, {'chat.friend_reset_elsewhere': true})
+  await composer(page).fill('重置后的消息')
+  await composer(page).press('Enter')
+  await expect(page.getByText('这位好友的状态在别处发生了变化（例如重置）。旧会话已变为只读，请重新打开。')).toBeVisible({timeout: 15_000})
+  await shot(page, 'chat-epoch-changed')
+  await page.getByRole('button', {name: '重试', exact: true}).click()
+  await expect(composer(page)).toBeEnabled({timeout: 15_000})
+  await expect(committed(page, '只发一次')).toHaveCount(0) // new epoch → fresh conversation
+  if (!(await page.getByText('较早的会话').isVisible())) await page.getByRole('button', {name: '工具'}).click()
+  await expect(page.getByRole('button', {name: /epoch 1/})).toBeVisible()
+  await page.getByRole('button', {name: /epoch 1/}).click()
+  await expect(page.locator('dialog[open]')).toContainText('只发一次')
+  await shot(page, 'chat-old-epoch-read-only')
+  await page.keyboard.press('Escape')
+  report.epochChanged = {oldConversationReadOnly: true}
+  writeJSON('chat-races', report)
+})
+
+test('reading old messages is not pulled down; reading position, draft and selection survive side panel, profile and reload', async ({browser}) => {
+  test.setTimeout(180_000)
+  const ctx = await browser.newContext({viewport: {width: 1280, height: 640}, locale: 'zh-CN'})
+  const page = await ctx.newPage()
+  await befriend(page, 'official-iris', 'e2e-scroll@example.com')
+  const box = page.locator('.ew-chat-main .ew-transcript')
+  for (let i = 1; i <= 8; i++) {
+    await say(page, `第 ${i} 句`)
+    if (await box.evaluate(e => e.scrollHeight - e.clientHeight > 600)) break
+  }
+  // A reply is streaming; the reader scrolls up to old messages meanwhile.
+  await composer(page).fill('新的一句')
+  await composer(page).press('Enter')
+  await expect(page.locator('.ew-chat-main .ew-send.is-stop')).toBeVisible()
+  await box.evaluate(e => { e.scrollTop = 0; e.dispatchEvent(new Event('scroll')) })
+  const samples: number[] = []
+  for (let i = 0; i < 24; i++) {
+    samples.push(await box.evaluate(e => e.scrollTop))
+    if (await committed(page, '新的一句').count() && !(await page.locator('.ew-chat-main .ew-send.is-stop').count())) break
+    await page.waitForTimeout(250)
+  }
+  await expect(committed(page, '新的一句')).toHaveCount(1, {timeout: 20_000})
+  samples.push(await box.evaluate(e => e.scrollTop))
+  expect(Math.max(...samples)).toBeLessThanOrEqual(2)
+  await expect(page.locator('.ew-new-pill')).toBeVisible()
+  await shot(page, 'chat-reading-old-new-pill')
+
+  // Read a little further down (second turn aligned to the top), then keep a draft with a selection.
+  await box.evaluate(e => {
+    const turn = e.querySelectorAll<HTMLElement>('.ew-turn')[1]
+    e.scrollTop += turn.getBoundingClientRect().top - e.getBoundingClientRect().top
+    e.dispatchEvent(new Event('scroll'))
+  })
+  await page.waitForTimeout(200)
+  const anchor = () => box.evaluate(e => {
+    const items = Array.from(e.querySelectorAll<HTMLElement>('[data-anchor]'))
+    const first = items.find(el => el.offsetTop + el.offsetHeight > e.scrollTop)
+    return first?.dataset.anchor ?? null
+  })
+  const a0 = await anchor()
+  await composer(page).fill('草稿与选区')
+  await composer(page).press('End')
+  await composer(page).press('Shift+ArrowLeft')
+  await composer(page).press('Shift+ArrowLeft')
+  const sel = () => composer(page).evaluate(e => [(e as HTMLTextAreaElement).selectionStart, (e as HTMLTextAreaElement).selectionEnd])
+  expect(await sel()).toEqual([3, 5])
+  // Side panel open/close changes the transcript width: same anchor.
+  await page.getByRole('button', {name: '工具'}).click()
+  await page.waitForTimeout(300)
+  const a1 = await anchor()
+  await page.getByRole('button', {name: '资料'}).click()
+  await expect(page.locator('dialog[open]')).toBeVisible()
+  await page.keyboard.press('Escape')
+  await page.getByRole('button', {name: '工具'}).click()
+  await page.waitForTimeout(300)
+  const a2 = await anchor()
+  await expect(composer(page)).toHaveValue('草稿与选区')
+  await page.waitForTimeout(300)
+  await page.reload()
+  await expect(composer(page)).toHaveValue('草稿与选区')
+  await page.waitForTimeout(400)
+  const a3 = await anchor()
+  const selAfter = await sel()
+  const atEnd = await box.evaluate(e => e.scrollHeight - e.scrollTop - e.clientHeight < 40)
+  await shot(page, 'chat-reading-position-after-reload')
+  writeJSON('chat-reading-position', {scrollTopWhileStreaming: samples, anchors: {beforePanels: a0, panelOpen: a1, afterProfileAndClose: a2, afterReload: a3}, selectionAfterReload: selAfter, atEndAfterReload: atEnd})
+  expect([a1, a2, a3]).toEqual([a0, a0, a0])
+  expect(selAfter).toEqual([3, 5])
+  expect(atEnd).toBe(false)
+  await ctx.close()
+})
+
+test('games: a lost start receipt finds the one game; a missing game is not replaced; a failed table line leaves the board untouched', async ({page}) => {
+  await page.goto('/#/games/vegas/prepare')
+  await page.evaluate(() => sessionStorage.setItem('everwith.mock.scenarios', JSON.stringify({'game.unknown_start': true})))
+  await page.reload()
+  const before = await dbGames(page)
+  await page.locator('.ew-start-btn').click()
+  await page.waitForURL(/#\/play\/game\//, {timeout: 20_000})
+  const after = await dbGames(page)
+  expect(after).toBe(before + 1)
+  const gameUrl = page.url()
+
+  // A missing game: an error with Retry / Recent — no substitute table is created.
+  await page.goto('/#/play/game/game_does_not_exist')
+  await expect(page.getByText('找不到这项内容，可能已被删除或无权访问。')).toBeVisible()
+  await page.getByRole('button', {name: '重试', exact: true}).click()
+  await expect(page.getByText('找不到这项内容，可能已被删除或无权访问。')).toBeVisible()
+  expect(await dbGames(page)).toBe(after)
+  await shot(page, 'game-missing-no-substitute')
+
+  // Table chat line fails: the committed board and its revision do not move.
+  await page.goto(gameUrl)
+  await expect(page.getByTestId('table-status')).toBeVisible()
+  const pause = page.getByRole('button', {name: '暂停 AI'})
+  if (await pause.isVisible()) await pause.click()
+  await page.waitForTimeout(1200)
+  const rev0 = Number(await page.locator('.ew-table-shell').getAttribute('data-revision'))
+  await page.evaluate(() => sessionStorage.setItem('everwith.mock.scenarios', JSON.stringify({'game.text_failed': true})))
+  await page.reload()
+  await expect(page.getByTestId('table-status')).toBeVisible()
+  const pause2 = page.getByRole('button', {name: '暂停 AI'})
+  if (await pause2.isVisible()) await pause2.click()
+  await page.waitForTimeout(1200)
+  const rev1 = Number(await page.locator('.ew-table-shell').getAttribute('data-revision'))
+  const box = page.locator('.ew-table-chat textarea')
+  await box.fill('这把你会怎么下？')
+  await box.press('Enter')
+  await expect(page.getByText('这次没能生成台词；牌局已提交的内容不受影响。')).toBeVisible({timeout: 10_000})
+  const rev2 = Number(await page.locator('.ew-table-shell').getAttribute('data-revision'))
+  await shot(page, 'game-table-line-failed')
+  writeJSON('game-edge', {gamesBefore: before, gamesAfterLostReceipt: after, missingGameCreatedNothing: true, revisionBeforeChat: rev1, revisionAfterFailedLine: rev2, rev0})
+  expect(rev2).toBe(rev1)
+})
+
+test('table stays operable: fullscreen refused, Esc twice after a dialog, immersive on', async ({page}) => {
+  await page.goto('/#/games/vegas/prepare')
+  await page.getByRole('button', {name: '2 人', exact: true}).click()
+  await page.locator('.ew-start-btn').click()
+  await page.waitForURL(/#\/play\/game\//)
+  await expect(page.getByTestId('table-status')).toBeVisible()
+  const id = page.url()
+  // The browser refuses fullscreen: a readable notice, same layout, same table.
+  await page.evaluate(() => { HTMLElement.prototype.requestFullscreen = function () { return Promise.reject(new DOMException('denied', 'NotAllowedError')) } })
+  await page.getByRole('button', {name: '全屏', exact: true}).click()
+  await expect(page.getByText('浏览器拒绝了全屏，已保留当前布局。')).toBeVisible()
+  expect(await page.evaluate(() => !!document.fullscreenElement)).toBe(false)
+  // A modal, then Esc twice: one layer per Esc, focus back on the trigger, nothing else closes.
+  const rules = page.getByRole('button', {name: '规则', exact: true})
+  await rules.click()
+  await expect(page.locator('dialog[open]')).toBeVisible()
+  await page.keyboard.press('Escape')
+  await page.keyboard.press('Escape')
+  await expect(page.locator('dialog[open]')).toHaveCount(0)
+  await expect(rules).toBeFocused()
+  await page.getByRole('button', {name: '沉浸', exact: true}).click()
+  await page.keyboard.press('Escape')
+  // The board still takes a move on the same session.
+  await page.waitForFunction(() => !!document.querySelector('[data-testid="royale-roll"]:not([disabled])'), null, {timeout: 30_000})
+  const rev = Number(await page.locator('.ew-table-shell').getAttribute('data-revision'))
+  await page.getByTestId('royale-roll').click()
+  await page.waitForFunction(r => Number(document.querySelector<HTMLElement>('.ew-table-shell')?.dataset.revision) > r, rev, {timeout: 10_000})
+  expect(page.url()).toBe(id)
+  await shot(page, 'game-operable-after-refused-fullscreen')
+  writeJSON('game-fullscreen-refused', {sameSession: true, revisionBefore: rev, moved: true})
+})
diff --git a/everwith-claude-frontend/e2e/extra.spec.ts b/everwith-claude-frontend/e2e/extra.spec.ts
new file mode 100644
index 00000000..42780c1b
--- /dev/null
+++ b/everwith-claude-frontend/e2e/extra.spec.ts
@@ -0,0 +1,91 @@
+/**
+ * Smaller business rules: sign-in cancel keeps position, table-mate → friend without a
+ * restart (F7), abandon → read-only unfinished, Recent continues the exact run, legacy
+ * Splendor v1 save keeps its rules, asset/model failure degrades, returning users land
+ * on Friends, Shift+Tab.
+ */
+import {expect, test} from '@playwright/test'
+import {settle, shot, signUp, tableSnap, writeJSON} from './helpers'
+
+test('table-mate becomes a friend in place (no restart / no extra seat); sign-in cancel keeps position; abandon is read-only', async ({page}) => {
+  await page.goto('/#/games/cabo/prepare')
+  await page.getByRole('button', {name: '2 人', exact: true}).click()
+  await page.locator('.ew-start-btn').click()
+  await page.waitForURL(/#\/play\/game\//)
+  const before = await tableSnap(page)
+  const seatName = (await page.locator('.ew-seat[data-seat="1"] .ew-seat-text strong').innerText()).trim()
+  await page.getByRole('button', {name: `加为好友 · ${seatName}`}).click()
+  await page.getByRole('button', {name: '确认加为好友'}).click()
+  // Cancel sign-in: back on the same table, naming dialog still holds the name.
+  await page.locator('dialog[open]').getByRole('button', {name: '取消'}).click()
+  await expect(page.getByLabel('好友名字')).toHaveValue(seatName)
+  expect((await tableSnap(page)).url).toBe(before.url)
+  await page.getByRole('button', {name: '确认加为好友'}).click()
+  await signUp(page, 'e2e-extra@example.com')
+  await page.getByLabel('好友名字').fill(`${seatName}（牌友）`)
+  await page.getByRole('button', {name: '确认加为好友'}).click()
+  await expect(page.locator('.ew-seat[data-seat="1"]')).toContainText('好友')
+  const after = await tableSnap(page)
+  expect(after.url).toBe(before.url)
+  expect(await page.locator('.ew-seat').count()).toBe(2)
+  await shot(page, 'game-tablemate-befriended')
+  // Explicit abandon → unfinished, read-only, no invented winner.
+  await page.getByRole('button', {name: '放弃本局'}).click()
+  await page.locator('dialog[open] .ew-btn.danger').click()
+  await expect(page.getByText('已放弃 · 未完成（只读）').first()).toBeVisible()
+  await shot(page, 'game-abandoned')
+  await page.goto('/#/recent')
+  await expect(page.getByTestId('record').first()).toContainText('已放弃（未完成）')
+  writeJSON('tablemate-friend-abandon', {sameSession: after.url === before.url, seats: 2})
+})
+
+test('Recent continues the exact run; returning users land on Friends; legacy Splendor v1 keeps its rules', async ({page}) => {
+  await page.goto('/#/stories/story-last-train/prepare?v=1')
+  await page.getByTestId('story-start').click()
+  await expect(page.getByTestId('story-play')).toBeVisible()
+  const runUrl = page.url()
+  await page.goto('/#/recent')
+  await page.getByTestId('record-open').first().click()
+  await expect(page).toHaveURL(runUrl)
+  // Legacy save fixture through the mock panel.
+  await page.getByTestId('mock-panel-open').click()
+  await page.getByRole('button', {name: /v1/}).click()
+  await page.waitForURL(/#\/play\/game\//)
+  await expect(page.getByText('旧版 v1 存档（保持原规则）').first()).toBeVisible()
+  await expect(page.locator('.sp-board')).toBeVisible()
+  const take = await page.getByTestId('splendor-legal').getAttribute('data-take')
+  await shot(page, 'splendor-legacy-v1')
+  writeJSON('splendor-legacy-v1', {legalTakesOffered: take})
+  // Make a friend, then the empty hash should land on Friends.
+  await page.goto('/#/characters/official-iris?v=1')
+  await page.getByRole('button', {name: '加为好友'}).first().click()
+  await page.getByRole('button', {name: '确认加为好友'}).click()
+  await signUp(page, 'e2e-root@example.com')
+  await page.getByRole('button', {name: '确认加为好友'}).click()
+  await expect(page).toHaveURL(/#\/friends\/fr_/)
+  await page.goto('/#/')
+  await expect(page).toHaveURL(/#\/friends$/)
+})
+
+test('model or image failures degrade to the same person / neutral placeholders; chat still works', async ({page}) => {
+  await page.goto('/#/discover')
+  await page.evaluate(() => sessionStorage.setItem('everwith.mock.scenarios', JSON.stringify({'live2d.model_missing': true, 'assets.missing': true})))
+  await page.goto('/#/characters/official-marcus?v=1')
+  await page.reload()
+  await expect(page.getByText('动态形象不可用，显示同一角色的静态图')).toBeVisible()
+  await settle(page)
+  await shot(page, 'degraded-model-and-images')
+  await page.goto('/#/discover')
+  await expect(page.locator('.ew-card').first()).toBeVisible()
+  await expect(page.locator('.ew-portrait.is-placeholder').first()).toBeVisible()
+  await shot(page, 'degraded-discover-placeholders')
+})
+
+test('Shift+Tab walks focus backwards', async ({page}) => {
+  await page.goto('/#/account')
+  await page.keyboard.press('Tab'); await page.keyboard.press('Tab'); await page.keyboard.press('Tab')
+  const third = await page.evaluate(() => document.activeElement?.outerHTML.slice(0, 80))
+  await page.keyboard.press('Tab')
+  await page.keyboard.press('Shift+Tab')
+  expect(await page.evaluate(() => document.activeElement?.outerHTML.slice(0, 80))).toBe(third)
+})
diff --git a/everwith-claude-frontend/e2e/games.spec.ts b/everwith-claude-frontend/e2e/games.spec.ts
new file mode 100644
index 00000000..aaea9340
--- /dev/null
+++ b/everwith-claude-frontend/e2e/games.spec.ts
@@ -0,0 +1,266 @@
+/**
+ * @long Three complete games through the NEW UI at normal product speed, recorded on video.
+ * The player seat is driven only by clicking visible controls; NPC seats are the mock's
+ * fixed-strategy “rule-simulated companions”. Each run also checks pause / sidebar /
+ * immersive / fullscreen / reload continuity on the same session id.
+ */
+import {expect, test} from '@playwright/test'
+import type {Page} from '@playwright/test'
+import {renameSync} from 'node:fs'
+import {act, evidencePath, gameRecord, shot, tableSnap, writeJSON} from './helpers'
+
+test.describe.configure({mode: 'serial'})
+// actionTimeout: a control that never becomes clickable fails the run with a precise line instead of hanging.
+test.use({video: {mode: 'on', size: {width: 1280, height: 800}}, viewport: {width: 1280, height: 800}, actionTimeout: 20_000})
+
+type Log = {checks: Record<string, unknown>; myActions: number; shots: string[]}
+
+/** Resume AI seats. The button keeps its id until the hold(false) request returns, so never block on it:
+ *  click if it is still there, then wait until the toolbar shows “暂停 AI” again. */
+async function resumeAI(page: Page) {
+  await page.getByTestId('continue-ai').click({timeout: 3000}).catch(() => undefined)
+  await expect(page.getByTestId('continue-ai')).toHaveCount(0, {timeout: 8000}).catch(() => undefined)
+}
+
+async function startGame(page: Page, gameId: string, players: number) {
+  await page.goto(`/#/games/${gameId}/prepare`)
+  await page.getByRole('button', {name: `${players} 人`, exact: true}).click()
+  await expect(page.locator('.ew-seat-row')).toHaveCount(players)
+  await shot(page, `game-${gameId}-prepare`)
+  await page.locator('.ew-start-btn').click()
+  await page.waitForURL(/#\/play\/game\//)
+  await expect(page.getByTestId('table-status')).toBeVisible()
+  return decodeURIComponent(page.url().split('/play/game/')[1])
+}
+
+/** Same session, same mounted board: pause, sidebar, immersive, fullscreen, reload. */
+async function continuityChecks(page: Page, game: string, log: Log) {
+  const id = (await tableSnap(page)).url
+  // Pause AI (if running) and confirm nothing advances.
+  const pause = page.getByRole('button', {name: '暂停 AI'})
+  if (await pause.isVisible()) await pause.click()
+  const r0 = (await tableSnap(page)).rev
+  await page.waitForTimeout(2500)
+  const r1 = (await tableSnap(page)).rev
+  log.checks.pauseHolds = {before: r0, after2500ms: r1, ok: r1 === r0}
+  await page.evaluate(() => { (document.querySelector('.gb-board') as unknown as {__e2e?: string}).__e2e = 'mounted-once' })
+  const mark = () => page.evaluate(() => (document.querySelector('.gb-board') as unknown as {__e2e?: string} | null)?.__e2e ?? null)
+  await page.getByRole('button', {name: '人物与桌聊'}).click()
+  await shot(page, `game-${game}-rail-closed`)
+  await page.getByRole('button', {name: '人物与桌聊'}).click()
+  await page.getByRole('button', {name: '沉浸', exact: true}).click()
+  await shot(page, `game-${game}-immersive`)
+  await page.getByRole('button', {name: '退出沉浸'}).click()
+  await page.getByRole('button', {name: '全屏', exact: true}).click()
+  await page.waitForTimeout(600)
+  const fs = await page.evaluate(() => !!document.fullscreenElement)
+  if (fs) { await shot(page, `game-${game}-fullscreen`); await page.evaluate(() => document.exitFullscreen()); await page.waitForTimeout(400) }
+  const s2 = await tableSnap(page)
+  log.checks.sameBoardAfterToggles = {mark: await mark(), sameUrl: s2.url === id, rev: s2.rev, revUnchangedWhilePaused: s2.rev === r0, fullscreenEntered: fs}
+  expect(await mark()).toBe('mounted-once')
+  expect(s2.url).toBe(id)
+  // Resume, then leave by reloading: the in-flight step finishes, later steps pause.
+  if (await page.getByTestId('continue-ai').isVisible()) await resumeAI(page)
+  await page.waitForTimeout(900)
+  const before = await tableSnap(page)
+  await page.reload()
+  await expect(page.getByTestId('table-status')).toBeVisible()
+  const after = await tableSnap(page)
+  const banner = await page.getByText('离开期间后续行动已暂停').isVisible().catch(() => false)
+  log.checks.reload = {urlBefore: before.url, urlAfter: after.url, revBefore: before.rev, revAfter: after.rev, leftPausedBanner: banner}
+  expect(after.url).toBe(before.url)
+  expect(after.rev).toBeGreaterThanOrEqual(before.rev)
+  if (banner) { await shot(page, `game-${game}-reload-paused`); await resumeAI(page) }
+}
+
+async function finish(page: Page, game: string, id: string, log: Log, t0: number) {
+  await expect(page.getByTestId('result')).toBeVisible()
+  await page.waitForTimeout(1200)
+  await shot(page, `game-${game}-result`)
+  const rec = await gameRecord(page, id)
+  // Locked result can still be chatted about; the score does not move.
+  const box = page.locator('.ew-table-chat textarea')
+  await box.fill('这一局打得不错')
+  await box.press('Enter')
+  await expect(page.locator('.ew-chat-line.is-me').last()).toContainText('这一局打得不错')
+  const rec2 = await gameRecord(page, id)
+  log.checks.chatAfterEndKeepsScore = JSON.stringify(rec2?.settlement?.scores) === JSON.stringify(rec?.settlement?.scores) && rec2?.revision === rec?.revision
+  await shot(page, `game-${game}-result-chat`)
+  writeJSON(`game-${game}`, {game, session: id, profile: rec?.profile, syntheticSeed: rec?.seed, finalRevision: rec?.revision, lifecycle: rec?.lifecycle,
+    seats: rec?.seats, settlement: rec?.settlement, myActions: log.myActions, wallClockSeconds: Math.round((Date.now() - t0) / 1000), checks: log.checks,
+    note: 'Normal product pacing (820 ms per NPC step). NPC seats = fixed-strategy mock; JEV not connected.'})
+  expect(rec?.lifecycle).toBe('ended')
+}
+
+async function saveVideo(page: Page, name: string) {
+  const video = page.video()
+  await page.close()
+  if (video) { const p = await video.path(); renameSync(p, evidencePath('videos', `${name}.webm`)) }
+}
+
+test('Royale · 4 players · three rounds to the final settlement @long', async ({page}) => {
+  test.setTimeout(20 * 60_000)
+  const id = await startGame(page, 'vegas', 4)
+  const log: Log = {checks: {}, myActions: 0, shots: []}
+  const t0 = Date.now()
+  let passed = false, chose = 0, checked = false
+  const rounds = new Set<string>()
+  while (Date.now() - t0 < 18 * 60_000) {
+    const s = await tableSnap(page)
+    if (s.result) break
+    const b = s.buttons
+    if (!checked && s.rev > 25 && b.includes('royale-roll')) { checked = true; await continuityChecks(page, 'royale', log); continue }
+    if (b.includes('royale-roll')) { await act(page, 'royale-roll'); log.myActions++; if (log.myActions === 1) { await page.waitForTimeout(300); await shot(page, 'game-royale-rolling') } continue }
+    const face = b.find(x => x.startsWith('royale-face-'))
+    if (face) {
+      chose++
+      if (!passed && chose === 2 && b.includes('royale-pass')) { passed = true; await page.getByTestId('royale-pass').click(); await shot(page, 'game-royale-pass-confirm'); await act(page, 'royale-confirm'); log.myActions++; continue }
+      await page.getByTestId(face).click()
+      if (chose === 1) await shot(page, 'game-royale-select-confirm')
+      await act(page, 'royale-confirm'); log.myActions++; continue
+    }
+    if (b.includes('royale-payout')) { await act(page, 'royale-payout'); log.myActions++; continue }
+    if (b.includes('royale-next')) { const r = await page.locator('.rb-board').getAttribute('data-round'); if (r && !rounds.has(r)) { rounds.add(r); await shot(page, `game-royale-round${r}-end`) } await act(page, 'royale-next'); log.myActions++; continue }
+    if (b.includes('continue-ai')) { await resumeAI(page); continue }
+    await page.waitForTimeout(250)
+  }
+  log.checks.passUsed = passed
+  await finish(page, 'royale', id, log, t0)
+  // Rematch keeps the same people and creates a NEW session; the old result stays.
+  await page.getByRole('button', {name: '原桌再来一局'}).first().click()
+  await page.waitForURL(u => !u.toString().includes(id))
+  const fresh = decodeURIComponent(page.url().split('/play/game/')[1])
+  const a = await gameRecord(page, id), b = await gameRecord(page, fresh)
+  writeJSON('game-royale-rematch', {old: id, oldLifecycle: a?.lifecycle, oldScores: a?.settlement?.scores, fresh, freshSeats: b?.seats, sameNames: JSON.stringify(a?.seats.map(s => s.name)) === JSON.stringify(b?.seats.map(s => s.name))})
+  expect(a?.lifecycle).toBe('ended')
+  expect(b?.revision).toBe(1)
+  await saveVideo(page, 'royale-full-game')
+})
+
+test('Splendor v2 · 4 players · 15 points and the round completed @long', async ({page}) => {
+  test.setTimeout(20 * 60_000)
+  const id = await startGame(page, 'gems', 4)
+  const log: Log = {checks: {}, myActions: 0, shots: []}
+  const t0 = Date.now()
+  let turns = 0, reserved = false, checked = false
+  const seen = new Set<string>()
+  while (Date.now() - t0 < 18 * 60_000) {
+    const s = await tableSnap(page)
+    if (s.result) break
+    if (s.current !== '0' || !s.buttons.some(x => x.startsWith('splendor-'))) {
+      if (s.buttons.includes('continue-ai')) { await resumeAI(page); continue }
+      if (!checked && s.rev > 30) { checked = true; await continuityChecks(page, 'splendor', log); continue }
+      await page.waitForTimeout(250); continue
+    }
+    if (s.phase === 'return') {
+      if (!seen.has('return')) { seen.add('return'); await shot(page, 'game-splendor-return-before') }
+      // Plan exactly K returns from the counts shown on my own gem buttons.
+      const prompt = await page.locator('.gb-prompt').innerText()
+      let need = Number(prompt.match(/归还 (\d+) 枚|return (\d+)/)?.slice(1).find(Boolean) ?? 0)
+      const options = await page.locator('[data-testid^="splendor-return-"]').evaluateAll(els => els.map(e => ({id: (e as HTMLElement).dataset.testid!, count: Number(e.querySelector('b')?.textContent ?? 0)})))
+      for (const o of options) for (let k = 0; k < o.count && need > 0; k++, need--) await page.getByTestId(o.id).click()
+      await shot(page, 'game-splendor-return-selected')
+      await page.getByTestId('splendor-confirm').click(); log.myActions++
+      await page.waitForFunction(() => document.querySelector<HTMLElement>('.gb-board')?.dataset.phase !== 'return' || document.querySelector<HTMLElement>('.gb-board')?.dataset.current !== '0', null, {timeout: 15_000})
+      continue
+    }
+    if (s.phase === 'noble') {
+      await page.locator('[data-testid^="splendor-noble-"]').first().click()
+      await shot(page, 'game-splendor-noble-choice')
+      await act(page, 'splendor-confirm'); log.myActions++; continue
+    }
+    turns++
+    const legal = await page.getByTestId('splendor-legal').evaluate(e => ({buy: (e.dataset.buy ?? '').split(' ').filter(Boolean), take: (e.dataset.take ?? '').split(' ').filter(Boolean), reserve: (e.dataset.reserve ?? '').split(' ').filter(Boolean), blind: (e.dataset.blind ?? '').split(' ').filter(Boolean)}))
+    if (legal.buy.length) {
+      await page.getByTestId(`splendor-card-${legal.buy[0]}`).click()
+      if (!seen.has('buy')) { seen.add('buy'); await shot(page, 'game-splendor-buy-preview') }
+      await act(page, 'splendor-buy'); log.myActions++; continue
+    }
+    if (!reserved && turns === 3 && legal.reserve.length) {
+      reserved = true
+      await page.getByTestId(`splendor-card-${legal.reserve[0]}`).click()
+      await shot(page, 'game-splendor-reserve-preview')
+      await act(page, 'splendor-reserve'); log.myActions++; continue
+    }
+    if (legal.take.length) {
+      const best = legal.take.reduce((a, b) => b.split('+').length > a.split('+').length ? b : a)
+      for (const c of best.split('+')) await page.getByTestId(`splendor-bank-${c}`).click()
+      if (!seen.has('take')) { seen.add('take'); await shot(page, 'game-splendor-take-selected') }
+      await act(page, 'splendor-confirm'); log.myActions++; continue
+    }
+    if (legal.blind.length) { await page.getByTestId(`splendor-deck-${legal.blind[0]}`).click(); await act(page, 'splendor-confirm'); log.myActions++; continue }
+    throw new Error('no legal action offered to seat 0')
+  }
+  log.checks.reserveUsed = reserved
+  log.checks.returnPhaseSeen = seen.has('return')
+  await finish(page, 'splendor', id, log, t0)
+  await saveVideo(page, 'splendor-full-game')
+})
+
+test('CABO · 4 players · cumulative end above 100 @long', async ({page}) => {
+  test.setTimeout(25 * 60_000)
+  const id = await startGame(page, 'cabo', 4)
+  const log: Log = {checks: {}, myActions: 0, shots: []}
+  const t0 = Date.now()
+  let called = false, checked = false
+  const seen = new Set<string>()
+  const cabo = () => page.getByTestId('cabo-state').evaluate(e => ({phase: e.dataset.phase!, current: e.dataset.current!, drawn: e.dataset.drawn ? Number(e.dataset.drawn) : null, ability: e.dataset.ability || null, totals: e.dataset.totals!, caller: e.dataset.caller}))
+  while (Date.now() - t0 < 23 * 60_000) {
+    const s = await tableSnap(page)
+    if (s.result) break
+    const b = s.buttons
+    const c = await cabo()
+    const round = Number(await page.locator('.cb-board').getAttribute('data-round'))
+    if (process.env.E2E_DEBUG) console.log(`[cabo] r${s.rev} round ${round} phase ${c.phase} cur ${c.current} drawn ${c.drawn} ability ${c.ability} buttons ${b.join(',')}`)
+    if (b.includes('cabo-next-round')) { if (!seen.has(`end${round}`)) { seen.add(`end${round}`); await shot(page, `game-cabo-round${round}-scores`) } await act(page, 'cabo-next-round'); log.myActions++; continue }
+    if (!b.some(x => x.startsWith('cabo-'))) {
+      if (b.includes('continue-ai')) { await resumeAI(page); continue }
+      if (!checked && s.rev > 40) { checked = true; await continuityChecks(page, 'cabo', log); continue }
+      await page.waitForTimeout(250); continue
+    }
+    if (c.phase === 'setup') {
+      await page.getByTestId('cabo-own-0').click(); await page.getByTestId('cabo-own-1').click()
+      if (!seen.has('setup')) { seen.add('setup'); await shot(page, 'game-cabo-setup-select') }
+      await act(page, 'cabo-peek-confirm'); log.myActions++; continue
+    }
+    if (c.phase === 'reveal') {
+      if (!seen.has(`reveal${round}`)) { seen.add(`reveal${round}`); await shot(page, `game-cabo-private-reveal-r${round}`) }
+      await act(page, 'cabo-ack'); log.myActions++
+      if (!seen.has('after-ack')) { seen.add('after-ack'); await shot(page, 'game-cabo-after-ack-known-badges') }
+      continue
+    }
+    if (c.phase === 'turn') {
+      if (!called && round >= 2 && c.caller === '' && b.includes('cabo-call')) {
+        called = true
+        await page.getByTestId('cabo-call').click(); await shot(page, 'game-cabo-call-confirm')
+        await act(page, 'cabo-call-confirm'); log.myActions++; continue
+      }
+      const top = await page.getByTestId('cabo-discard-top').getAttribute('aria-label', {timeout: 2000}).catch(() => '')
+      const topValue = Number((top ?? '').match(/[：:]\s*(\d+)/)?.[1] ?? 99)
+      if (topValue <= 2 && b.includes('cabo-draw-discard')) { await act(page, 'cabo-draw-discard'); log.myActions++; continue }
+      await act(page, 'cabo-draw-deck'); log.myActions++; continue
+    }
+    if (c.phase === 'exchange') { await page.getByTestId('cabo-own-3').or(page.getByTestId('cabo-own-0')).first().click(); await act(page, 'cabo-exchange'); log.myActions++; continue }
+    if (c.phase === 'drawn') {
+      if (!seen.has('drawn')) { seen.add('drawn'); await shot(page, 'game-cabo-drawn') }
+      if (c.drawn !== null && c.drawn <= 4) { await page.locator('[data-testid^="cabo-own-"]').last().click(); await act(page, 'cabo-exchange'); log.myActions++; continue }
+      if (b.includes('cabo-discard-ability')) { await act(page, 'cabo-discard-ability'); log.myActions++; continue }
+      await act(page, 'cabo-discard'); log.myActions++; continue
+    }
+    if (c.phase === 'ability') {
+      if (!seen.has(`ability-${c.ability}`)) { seen.add(`ability-${c.ability}`) }
+      if (c.ability === 'peek') await page.locator('button[data-testid^="cabo-own-"]').first().click()
+      else if (c.ability === 'spy') await page.locator('button[data-testid^="cabo-seat"]').first().click()
+      else { await page.locator('button[data-testid^="cabo-own-"]').first().click(); await page.locator('button[data-testid^="cabo-seat"]').first().click() }
+      if (await page.getByTestId('cabo-ability-confirm').isEnabled({timeout: 3000}).catch(() => false)) { await shot(page, `game-cabo-ability-${c.ability}`); await act(page, 'cabo-ability-confirm') } else await act(page, 'cabo-ability-cancel')
+      log.myActions++; continue
+    }
+    await page.waitForTimeout(250)
+  }
+  log.checks.cabocalled = called
+  log.checks.abilitiesSeen = [...seen].filter(x => x.startsWith('ability-'))
+  await finish(page, 'cabo', id, log, t0)
+  const totals = (await gameRecord(page, id))?.settlement?.scores ?? []
+  expect(Math.max(...totals)).toBeGreaterThan(100)
+  await saveVideo(page, 'cabo-full-game')
+})
diff --git a/everwith-claude-frontend/e2e/helpers.ts b/everwith-claude-frontend/e2e/helpers.ts
new file mode 100644
index 00000000..9a1aa13f
--- /dev/null
+++ b/everwith-claude-frontend/e2e/helpers.ts
@@ -0,0 +1,60 @@
+import {expect} from '@playwright/test'
+import type {Page} from '@playwright/test'
+import {mkdirSync, writeFileSync} from 'node:fs'
+import {dirname, resolve} from 'node:path'
+
+export const EVIDENCE = resolve(process.cwd(), 'evidence')
+export function evidencePath(...parts: string[]) { const p = resolve(EVIDENCE, ...parts); mkdirSync(dirname(p), {recursive: true}); return p }
+/** Wait until visible images and fonts are ready (bounded), so screenshots show real art. */
+export async function settle(page: Page, ms = 6000) {
+  await Promise.race([page.waitForLoadState('networkidle').catch(() => undefined), page.waitForTimeout(ms)])
+  // Loading skeletons gone (the page shows content, not its loading state).
+  await page.waitForFunction(() => !document.querySelector('[aria-busy="true"]'), null, {timeout: ms}).catch(() => undefined)
+  // Visible images loaded AND decoded (lazy + decoding="async" can be "complete" before the first paint).
+  await page.waitForFunction(() => Array.from(document.images).filter(i => { const r = i.getBoundingClientRect(); return r.bottom > 0 && r.top < innerHeight && r.width > 0 }).every(i => i.complete), null, {timeout: ms}).catch(() => undefined)
+  await page.evaluate(async () => {
+    const visible = Array.from(document.images).filter(i => { const r = i.getBoundingClientRect(); return r.bottom > 0 && r.top < innerHeight && r.width > 0 })
+    await Promise.race([Promise.all(visible.map(i => i.decode().catch(() => undefined))), new Promise(r => setTimeout(r, 3000))])
+    await document.fonts.ready
+    await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)))
+  }).catch(() => undefined)
+}
+export async function shot(page: Page, name: string, fullPage = false) { await settle(page, 4000); await page.screenshot({path: evidencePath('screenshots', `${name}.png`), fullPage}) }
+export function writeJSON(name: string, data: unknown) { writeFileSync(evidencePath('reports', `${name}.json`), JSON.stringify(data, null, 2)) }
+
+/** Atomic read of the table state (one evaluate; avoids mixing two revisions). */
+export type TableSnap = {rev: number; lifecycle: string; phase: string; current: string; buttons: string[]; result: boolean; url: string}
+export async function tableSnap(page: Page): Promise<TableSnap> {
+  return page.evaluate(() => {
+    const shell = document.querySelector<HTMLElement>('.ew-table-shell')
+    const board = document.querySelector<HTMLElement>('.gb-board')
+    const buttons = [...document.querySelectorAll<HTMLButtonElement>('button[data-testid]')].filter(b => !b.disabled && b.offsetParent !== null).map(b => b.dataset.testid!)
+    return {rev: Number(shell?.dataset.revision ?? -1), lifecycle: shell?.dataset.lifecycle ?? '', phase: board?.dataset.phase ?? '', current: board?.dataset.current ?? '',
+      buttons, result: !!document.querySelector('[data-testid="result"]'), url: location.hash}
+  })
+}
+/** Click, then wait until the authoritative revision moves (or a short timeout). */
+export async function act(page: Page, testId: string) {
+  const before = (await tableSnap(page)).rev
+  await page.getByTestId(testId).first().click()
+  await page.waitForFunction(r => Number(document.querySelector<HTMLElement>('.ew-table-shell')?.dataset.revision ?? -1) !== r, before, {timeout: 10_000}).catch(() => undefined)
+}
+export async function signUp(page: Page, email: string, password = 'password123') {
+  const dialog = page.locator('dialog[open]')
+  await expect(dialog).toBeVisible()
+  await dialog.getByText(/没有账号？注册|No account\? Create one/).click()
+  await dialog.locator('input[type=email]').fill(email)
+  await dialog.locator('input[type=password]').fill(password)
+  await dialog.locator('button[type=submit]').click()
+  // The sign-in layer closes; the interrupted step (e.g. naming) may reopen as its own dialog.
+  await expect(page.locator('dialog[open] input[type=email]')).toHaveCount(0)
+}
+export type GameRecord = {seed: number; profile: string; revision: number; lifecycle: string; settlement: {scores: number[]; winners: number[]} | null; seats: {seat: number; kind: string; name: string}[]}
+/** Reads the synthetic seed of a game from the local mock DB (evidence only). */
+export async function gameRecord(page: Page, id: string): Promise<GameRecord | null> {
+  return page.evaluate(gid => {
+    const db = JSON.parse(localStorage.getItem('everwith.mock.db.v1') ?? '{}')
+    const g = db.games?.[gid]
+    return g ? {seed: g.seed, profile: g.profile, revision: g.revision, lifecycle: g.lifecycle, settlement: g.settlement, seats: g.seats.map((s: {seat: number; kind: string; name: string}) => ({seat: s.seat, kind: s.kind, name: s.name}))} : null
+  }, id)
+}
diff --git a/everwith-claude-frontend/e2e/layout-a11y.spec.ts b/everwith-claude-frontend/e2e/layout-a11y.spec.ts
new file mode 100644
index 00000000..f5ec740b
--- /dev/null
+++ b/everwith-claude-frontend/e2e/layout-a11y.spec.ts
@@ -0,0 +1,143 @@
+/**
+ * Desktop layout matrix (1024 / 1280 / 1440 / 1920 × 中文 / English), 200 % zoom
+ * (emulated as half-size CSS viewport at deviceScaleFactor 2), keyboard focus order,
+ * Esc + focus return, reduced motion, and a synthetic CDP IME composition.
+ */
+import {expect, test} from '@playwright/test'
+import type {Page} from '@playwright/test'
+import {evidencePath, settle, shot, writeJSON} from './helpers'
+
+const VIEWPORTS: [number, number][] = [[1024, 768], [1280, 800], [1440, 900], [1920, 1080]]
+const overflow = (page: Page) => page.evaluate(() => {
+  const doc = document.documentElement, main = document.querySelector<HTMLElement>('.ew-main')
+  return {docOverflowX: doc.scrollWidth - window.innerWidth, mainOverflowX: main ? main.scrollWidth - main.clientWidth : 0}
+})
+async function setLang(page: Page, lang: 'zh' | 'en') {
+  await page.goto('/#/discover')
+  await page.evaluate(l => localStorage.setItem('everwith.ui.lang', JSON.stringify(l)), lang)
+}
+async function startSplendor(page: Page) {
+  await page.goto('/#/games/gems/prepare')
+  await page.locator('.ew-start-btn').click()
+  await page.waitForURL(/#\/play\/game\//)
+  await expect(page.locator('.sp-board')).toBeVisible()
+}
+
+test('desktop matrix: four widths × two languages, no horizontal overflow @long', async ({browser}) => {
+  test.setTimeout(10 * 60_000)
+  const results: Record<string, unknown>[] = []
+  for (const [w, h] of VIEWPORTS) for (const lang of ['zh', 'en'] as const) {
+    const ctx = await browser.newContext({viewport: {width: w, height: h}, locale: lang === 'zh' ? 'zh-CN' : 'en-US'})
+    const page = await ctx.newPage()
+    await setLang(page, lang)
+    const pages: [string, () => Promise<void>][] = [
+      ['discover', async () => { await page.goto('/#/discover'); await expect(page.locator('.ew-card').first()).toBeVisible() }],
+      ['character', async () => { await page.goto('/#/characters/official-nora?v=1'); await expect(page.locator('.ew-stage')).toBeVisible(); await page.waitForTimeout(1200) }],
+      ['story', async () => { await page.goto('/#/stories/story-promise-rain/prepare?v=1'); await page.getByTestId('story-start').click(); await expect(page.getByTestId('story-play')).toBeVisible(); await page.waitForTimeout(800) }],
+      ['splendor-table', async () => { await startSplendor(page); await page.waitForTimeout(800) }],
+      ['cabo-prepare', async () => { await page.goto('/#/games/cabo/prepare'); await expect(page.locator('.ew-start-btn')).toBeVisible() }],
+    ]
+    for (const [name, go] of pages) {
+      await go()
+      await settle(page)
+      const o = await overflow(page)
+      await page.screenshot({path: evidencePath('screenshots', 'matrix', `${name}-${w}x${h}-${lang}.png`)})
+      results.push({page: name, viewport: `${w}x${h}`, lang, ...o})
+      expect(o.docOverflowX, `${name} ${w} ${lang}`).toBeLessThanOrEqual(1)
+    }
+    await ctx.close()
+  }
+  writeJSON('layout-matrix', results)
+})
+
+test('200 % zoom (CSS 640×400 and 720×450 at 2×): content reflows, actions reachable', async ({browser}) => {
+  const results: Record<string, unknown>[] = []
+  for (const [w, h] of [[640, 400], [720, 450]] as [number, number][]) {
+    const ctx = await browser.newContext({viewport: {width: w, height: h}, deviceScaleFactor: 2, locale: 'zh-CN'})
+    const page = await ctx.newPage()
+    await page.goto('/#/discover')
+    await expect(page.locator('.ew-card').first()).toBeVisible()
+    await settle(page)
+    await page.screenshot({path: evidencePath('screenshots', 'zoom200', `discover-${w}x${h}.png`)})
+    results.push({page: 'discover', viewport: `${w}x${h}@2x`, ...(await overflow(page))})
+    await startSplendor(page)
+    const bar = page.locator('.gb-actionbar')
+    await expect(bar).toBeVisible()
+    await settle(page)
+    await page.screenshot({path: evidencePath('screenshots', 'zoom200', `splendor-${w}x${h}.png`)})
+    await page.locator('[data-testid^="splendor-bank-"]').first().scrollIntoViewIfNeeded()
+    await page.locator('[data-testid^="splendor-bank-"]').first().click()
+    await expect(page.getByTestId('splendor-cancel')).toBeVisible()
+    results.push({page: 'splendor-table', viewport: `${w}x${h}@2x`, ...(await overflow(page)), bankReachable: true})
+    await ctx.close()
+  }
+  writeJSON('layout-zoom200', results)
+})
+
+test('keyboard: skip link, visible focus, Esc closes one dialog layer and returns focus', async ({page}) => {
+  await page.goto('/#/characters/official-arthur?v=1')
+  const add = page.getByRole('button', {name: '加为好友'}).first()
+  await expect(add).toBeVisible() // content loaded before walking the tab order
+  await page.keyboard.press('Tab')
+  await expect(page.locator('.ew-skip')).toBeFocused()
+  // Skip link → main content first.
+  await page.keyboard.press('Enter')
+  const afterSkip = await page.evaluate(() => document.activeElement?.id || document.activeElement?.className || '')
+  const order: string[] = []
+  for (let i = 0; i < 16; i++) { await page.keyboard.press('Tab'); order.push(await page.evaluate(() => { const e = document.activeElement as HTMLElement; return `${e.tagName.toLowerCase()}:${(e.getAttribute('aria-label') ?? e.textContent ?? '').trim().slice(0, 24)}` })) }
+  expect(order.some(o => o.includes('加为好友')), order.join(' | ')).toBe(true)
+  await add.focus()
+  await page.keyboard.press('Enter')
+  await expect(page.locator('dialog[open]')).toBeVisible()
+  await expect(page.getByLabel('好友名字')).toBeFocused()
+  await shot(page, 'keyboard-dialog-focus')
+  await page.keyboard.press('Escape')
+  await expect(page.locator('dialog[open]')).toHaveCount(0)
+  await expect(add).toBeFocused()
+  // Game table: rules dialog via keyboard; Esc returns focus to the trigger.
+  await page.goto('/#/games/cabo/prepare')
+  await page.locator('.ew-start-btn').click()
+  await page.waitForURL(/#\/play\/game\//)
+  const rules = page.getByRole('button', {name: '规则', exact: true})
+  await rules.focus()
+  await page.keyboard.press('Enter')
+  await expect(page.locator('dialog[open]')).toBeVisible()
+  await page.keyboard.press('Escape')
+  await expect(rules).toBeFocused()
+  const focusRing = await rules.evaluate(e => getComputedStyle(e).boxShadow)
+  writeJSON('keyboard', {skipTarget: afterSkip, tabOrderAfterSkip: order, rulesFocusRing: focusRing})
+  expect(focusRing).not.toBe('none')
+})
+
+test('reduced motion: OS preference collapses animations; the board stays operable', async ({browser}) => {
+  const ctx = await browser.newContext({reducedMotion: 'reduce', viewport: {width: 1280, height: 800}, locale: 'zh-CN'})
+  const page = await ctx.newPage()
+  await page.goto('/#/games/vegas/prepare')
+  await page.locator('.ew-start-btn').click()
+  await page.waitForURL(/#\/play\/game\//)
+  await page.getByTestId('royale-roll').click()
+  const dur = await page.locator('.rb-arena .rb-die').first().evaluate(e => getComputedStyle(e).animationDuration)
+  await expect(page.locator('[data-testid^="royale-face-"]').first()).toBeVisible()
+  await page.screenshot({path: evidencePath('screenshots', 'reduced-motion-royale.png')})
+  writeJSON('reduced-motion', {animationDuration: dur})
+  expect(parseFloat(dur)).toBeLessThan(0.01)
+  await ctx.close()
+})
+
+test('IME (synthetic, CDP composition): Enter during composition does not send', async ({page}) => {
+  await page.goto('/#/games/cabo/prepare')
+  await page.locator('.ew-start-btn').click()
+  await page.waitForURL(/#\/play\/game\//)
+  const box = page.locator('.ew-table-chat textarea')
+  await box.click()
+  const cdp = await page.context().newCDPSession(page)
+  await cdp.send('Input.imeSetComposition', {selectionStart: 2, selectionEnd: 2, text: 'ni'})
+  await page.keyboard.press('Enter')
+  const during = await page.locator('.ew-chat-line.is-me').count()
+  await cdp.send('Input.insertText', {text: '你好'})
+  await page.waitForTimeout(100)
+  await page.keyboard.press('Enter')
+  await expect(page.locator('.ew-chat-line.is-me')).toHaveCount(1)
+  writeJSON('ime-synthetic', {sentDuringComposition: during, sentAfterCommit: 1, note: 'CDP Input.imeSetComposition — not a real OS IME; a manual macOS/Windows pass is still required.'})
+  expect(during).toBe(0)
+})
diff --git a/everwith-claude-frontend/e2e/live2d.spec.ts b/everwith-claude-frontend/e2e/live2d.spec.ts
new file mode 100644
index 00000000..43f92aa5
--- /dev/null
+++ b/everwith-claude-frontend/e2e/live2d.spec.ts
@@ -0,0 +1,169 @@
+/**
+ * Live2D evidence for the five official characters on the character page:
+ * 1× large-face framing, ≥4 fps frame sampling for ~30 s (motion continuity), expression
+ * cues (happy / surprised / back to neutral), channel inventory (no eyeball writes),
+ * and lifecycle (switching characters releases runtimes; context loss recovers).
+ * Software GL (SwiftShader) in CI: timings are slower than a real GPU.
+ */
+import {expect, test} from '@playwright/test'
+import type {Page} from '@playwright/test'
+import {writeFileSync} from 'node:fs'
+import {evidencePath, writeJSON} from './helpers'
+
+const KEYS = ['lena', 'arthur', 'marcus', 'nora', 'iris'] as const
+const SAMPLE_SECONDS = Number(process.env.LIVE2D_SAMPLE_SECONDS ?? 30)
+
+type Snapshot = {active: number; created: number; disposed: number; framesDrawn: number; frameErrors?: number; skippedHidden?: number; runtimes: {character: string; status: string; lastError?: string | null; frames: number; avgFrameMs: number; maxFrameMs: number; expression: string | null; channels: string[]; extras: string[]; contextLosses: number; restores: number}[]}
+const snap = (page: Page) => page.evaluate(() => window.__everwithLive2D!.snapshot() as unknown as Snapshot)
+const saveDataUrl = (url: string, path: string) => writeFileSync(path, Buffer.from(url.split(',')[1], 'base64'))
+
+async function sample(page: Page, seconds: number) {
+  return page.evaluate(async secs => {
+    const canvas = document.querySelector<HTMLCanvasElement>('.ew-stage canvas:not([hidden])')!
+    const small = document.createElement('canvas'); small.width = 96; small.height = 128
+    const ctx = small.getContext('2d', {willReadFrequently: true})!
+    const thumbs: {t: number; url: string}[] = []
+    const diffs: {t: number; diff: number}[] = []
+    let prev: Uint8ClampedArray | null = null
+    const start = performance.now()
+    const thumb = () => { const c = document.createElement('canvas'); c.width = 240; c.height = Math.round(240 * canvas.height / canvas.width); c.getContext('2d')!.drawImage(canvas, 0, 0, c.width, c.height); return c.toDataURL('image/jpeg', .82) }
+    await new Promise<void>(resolve => {
+      let n = 0
+      const tick = () => {
+        const t = (performance.now() - start) / 1000
+        ctx.clearRect(0, 0, 96, 128); ctx.drawImage(canvas, 0, 0, 96, 128)
+        const data = ctx.getImageData(0, 0, 96, 128).data
+        if (prev) { let s = 0; for (let i = 0; i < data.length; i += 4) s += Math.abs(data[i] - prev[i]) + Math.abs(data[i + 1] - prev[i + 1]) + Math.abs(data[i + 2] - prev[i + 2]); diffs.push({t, diff: s / (96 * 128 * 3)}) }
+        prev = data
+        if (n % 20 === 0) thumbs.push({t, url: thumb()})
+        n++
+        if (t >= secs) { thumbs.push({t, url: thumb()}); resolve() } else setTimeout(tick, Math.max(0, start + n * 200 - performance.now())) // 5 Hz schedule, drift-compensated
+      }
+      tick()
+    })
+    return {samples: diffs.length + 1, fps: (diffs.length + 1) / secs, diffs, thumbs}
+  }, seconds)
+}
+
+test.describe.configure({mode: 'serial'})
+
+for (const key of KEYS) {
+  test(`${key}: big face, continuous idle motion, expressions, channel inventory @long`, async ({page}) => {
+    test.setTimeout((SAMPLE_SECONDS + 90) * 1000)
+    await page.goto(`/#/characters/official-${key}?v=1`)
+    await expect(page.locator('.ew-stage[data-live2d-status="ready"]')).toBeVisible({timeout: 30_000})
+    await page.getByRole('button', {name: '放大'}).or(page.locator('.ew-stage-zoom')).first().click()
+    await page.waitForTimeout(1500)
+    const stage = page.locator('.ew-character-stage')
+    await stage.screenshot({path: evidencePath('live2d', key, '1x-large-face.png')})
+    const s = await sample(page, SAMPLE_SECONDS)
+    s.thumbs.forEach((th, i) => saveDataUrl(th.url, evidencePath('live2d', key, `frame-${String(i).padStart(2, '0')}-t${th.t.toFixed(1)}s.jpg`)))
+    const diffs = s.diffs.map(d => d.diff)
+    const moving = diffs.filter(d => d > 0.05).length / diffs.length
+    const maxJump = Math.max(...diffs)
+    const mean = diffs.reduce((a, b) => a + b, 0) / diffs.length
+    // Expressions are driven exactly like a committed cue would drive them.
+    const faces: Record<string, string | null> = {}
+    for (const e of ['happy', 'surprised', 'neutral'] as const) {
+      await page.evaluate(([k, x]) => window.__everwithLive2D!.debugSetExpression(k, x), [key, e] as const)
+      await page.waitForTimeout(1200)
+      await stage.screenshot({path: evidencePath('live2d', key, `expression-${e}.png`)})
+      faces[e] = (await snap(page)).runtimes.find(r => r.character === key)?.expression ?? null
+    }
+    const rt = (await snap(page)).runtimes.find(r => r.character === key)!
+    const eyeball = rt.channels.filter(c => /EyeBall/i.test(c))
+    const report = {character: key, sampleSeconds: SAMPLE_SECONDS, samples: s.samples, fps: Number(s.fps.toFixed(2)),
+      motion: {fractionOfSamplesWithChange: Number(moving.toFixed(3)), meanAbsDiff: Number(mean.toFixed(3)), maxAbsDiff: Number(maxJump.toFixed(3))},
+      expressionsReported: faces, channels: rt.channels, extras: rt.extras, eyeballChannels: eyeball,
+      frameStats: {frames: rt.frames, avgFrameMs: rt.avgFrameMs, maxFrameMs: rt.maxFrameMs}, environment: 'headless Chromium + SwiftShader (software GL)'}
+    writeJSON(`live2d-${key}`, report)
+    writeFileSync(evidencePath('live2d', key, 'diffs.json'), JSON.stringify(s.diffs))
+    expect(s.fps).toBeGreaterThanOrEqual(3.5)
+    expect(moving).toBeGreaterThan(0.5) // keeps moving (idle never freezes)
+    expect(faces.happy).toBe('happy')
+    expect(faces.surprised).toBe('surprised')
+    expect(faces.neutral).toBe('neutral')
+    expect(eyeball).toEqual([]) // no eyeball/gaze writes (Nora gaze OFF; others not driven)
+  })
+}
+
+test('lifecycle: switching, zoom, hidden tab, off-screen and the table rail release or pause runtimes; a lost WebGL context recovers', async ({page}) => {
+  test.setTimeout(240_000)
+  const frames = async (key: string) => (await snap(page)).runtimes.find(r => r.character === key)?.frames ?? 0
+  for (const key of [...KEYS, ...KEYS]) {
+    await page.goto(`/#/characters/official-${key}?v=1`)
+    await expect(page.locator('.ew-stage[data-live2d-status="ready"]')).toBeVisible({timeout: 30_000})
+  }
+  const a = await snap(page)
+  // Zoom in / out four times on the same character: one live runtime at a time.
+  for (let i = 0; i < 4; i++) {
+    await page.locator('.ew-stage-zoom').click()
+    await expect(page.locator('.ew-stage[data-live2d-status="ready"]')).toBeVisible({timeout: 30_000})
+  }
+  const z = await snap(page)
+  // Hidden tab: no draws while hidden, drawing resumes when visible again.
+  await page.evaluate(() => { Object.defineProperty(document, 'visibilityState', {configurable: true, get: () => 'hidden'}); document.dispatchEvent(new Event('visibilitychange')) })
+  const h0 = await frames('iris'); await page.waitForTimeout(1500); const h1 = await frames('iris')
+  await page.evaluate(() => { Object.defineProperty(document, 'visibilityState', {configurable: true, get: () => 'visible'}); document.dispatchEvent(new Event('visibilitychange')) })
+  await page.waitForTimeout(1500); const h2 = await frames('iris')
+  // Off-screen stage: the observer pauses it; back on screen it resumes.
+  await page.evaluate(() => { document.querySelector<HTMLElement>('.ew-stage')!.style.transform = 'translateY(-6000px)' })
+  await page.waitForTimeout(700); const o0 = await frames('iris'); await page.waitForTimeout(1500); const o1 = await frames('iris')
+  await page.evaluate(() => { document.querySelector<HTMLElement>('.ew-stage')!.style.transform = '' })
+  await page.waitForTimeout(1500); const o2 = await frames('iris')
+  await page.goto('/#/discover')
+  await page.waitForTimeout(800)
+  const b = await snap(page)
+  // Table rail: open/close the people rail three times on a game table.
+  await page.goto('/#/games/cabo/prepare')
+  await page.locator('.ew-start-btn').click()
+  await page.waitForURL(/#\/play\/game\//)
+  for (let i = 0; i < 6; i++) { await page.getByRole('button', {name: '人物与桌聊'}).click(); await page.waitForTimeout(700) }
+  await page.waitForTimeout(1500)
+  const r = await snap(page)
+  await page.goto('/#/discover')
+  await page.waitForTimeout(800)
+  const r2 = await snap(page)
+  // Context loss on a fresh stage.
+  await page.goto('/#/characters/official-lena?v=1')
+  await expect(page.locator('.ew-stage[data-live2d-status="ready"]')).toBeVisible({timeout: 30_000})
+  const lost = await page.evaluate(async () => {
+    const c = document.querySelector<HTMLCanvasElement>('.ew-stage canvas:not([hidden])')!
+    const gl = c.getContext('webgl')!
+    const ext = gl.getExtension('WEBGL_lose_context')!
+    ext.loseContext()
+    await new Promise(r => setTimeout(r, 600))
+    ext.restoreContext()
+    await new Promise(r => setTimeout(r, 2500))
+    return true
+  })
+  const c = await snap(page)
+  const lena = c.runtimes.find(r => r.character === 'lena')
+  const framesBefore = lena?.frames ?? 0
+  await page.waitForTimeout(1500)
+  const framesAfter = await frames('lena')
+  const memory = await page.evaluate(() => (performance as unknown as {memory?: {usedJSHeapSize: number}}).memory?.usedJSHeapSize ?? null)
+  writeJSON('live2d-lifecycle', {afterTenSwitches: {active: a.active, created: a.created, disposed: a.disposed},
+    afterFourZoomToggles: {active: z.active, created: z.created, disposed: z.disposed},
+    hiddenTab: {framesAtHide: h0, after1500msHidden: h1, after1500msVisible: h2, skippedHidden: (await snap(page)).skippedHidden},
+    offscreen: {framesAtOffscreen: o0, after1500msOffscreen: o1, after1500msBack: o2},
+    afterLeaving: {active: b.active, created: b.created, disposed: b.disposed},
+    tableRailSixToggles: {activeOnTable: r.active, createdMinusDisposedOnTable: r.created - r.disposed, afterLeavingTable: {active: r2.active, created: r2.created, disposed: r2.disposed}},
+    contextLoss: {simulated: lost, contextLosses: lena?.contextLosses, restores: lena?.restores, status: lena?.status, lastError: lena?.lastError ?? null, frameErrors: c.frameErrors ?? 0, framesBefore, framesAfter, framesAdvancingAfterRestore: framesAfter > framesBefore},
+    usedJSHeapBytesAtEnd: memory, environment: 'headless Chromium + SwiftShader (software GL)'})
+  expect(a.active).toBe(1)
+  expect(z.active).toBe(1)
+  expect(z.created - z.disposed).toBe(1)
+  expect(h1 - h0).toBeLessThanOrEqual(1)
+  expect(h2).toBeGreaterThan(h1)
+  expect(o1 - o0).toBeLessThanOrEqual(1)
+  expect(o2).toBeGreaterThan(o1)
+  expect(b.active).toBe(0)
+  expect(b.created - b.disposed).toBe(0)
+  expect(r.created - r.disposed).toBe(r.active)
+  expect(r.active).toBeLessThanOrEqual(1)
+  expect(r2.active).toBe(0)
+  expect(r2.created - r2.disposed).toBe(0)
+  expect(lena?.contextLosses).toBeGreaterThanOrEqual(1)
+  expect(framesAfter).toBeGreaterThan(framesBefore)
+})
diff --git a/everwith-claude-frontend/e2e/story-create.spec.ts b/everwith-claude-frontend/e2e/story-create.spec.ts
new file mode 100644
index 00000000..fabae6d0
--- /dev/null
+++ b/everwith-claude-frontend/e2e/story-create.spec.ts
@@ -0,0 +1,110 @@
+/**
+ * Story run (prepare → play → continue → rollback → befriend the current person) and the
+ * creation studio (type → name → edit → AI-template assist + undo → isolated preview →
+ * stale preview → sign-in → save → explicit share → befriend v1 → chat).
+ */
+import {expect, test} from '@playwright/test'
+import {shot, signUp, writeJSON} from './helpers'
+
+test('story: explicit start, committed turns only, continue, rollback restores the draft, befriend the person in this run', async ({page}) => {
+  await page.goto('/#/stories/story-promise-rain?v=1')
+  await shot(page, 'story-detail')
+  await page.getByTestId('story-prepare').click()
+  await expect(page.getByText('确认前不会创建任何记录。').first()).toBeVisible()
+  await shot(page, 'story-prepare')
+  await page.getByTestId('story-start').click()
+  await expect(page.getByTestId('story-play')).toBeVisible()
+  const scene = page.locator('.ew-story-scene')
+  await expect(scene).toHaveAttribute('data-scene', 'entrance-rain')
+  const input = page.locator('.ew-story-main textarea')
+  await input.fill('我凑近看看那份名单上的墨迹')
+  await input.press('Enter')
+  await expect(page.getByTestId('story-pending')).toBeVisible()
+  await shot(page, 'story-validating')
+  await expect(page.getByTestId('story-pending')).toBeHidden({timeout: 15_000})
+  await expect(page.getByText('新线索：未干的划线墨迹')).toBeVisible()
+  const playerLines = page.locator('.ew-story-main .ew-msg.is-player:not(.is-provisional)')
+  await expect(playerLines).toHaveCount(1)
+  await page.getByTestId('story-continue-btn').click()
+  await expect(page.getByTestId('story-pending')).toBeHidden({timeout: 15_000})
+  await expect(page.locator('.ew-objectives li.is-done')).toHaveCount(2)
+  await expect(playerLines).toHaveCount(1) // “Continue” never invents a player line
+  await expect(scene).toHaveAttribute('data-scene', 'backstage') // the committed beat moved the scene
+  await shot(page, 'story-after-continue')
+  const revBefore = Number(await page.getByTestId('story-play').getAttribute('data-revision'))
+
+  // Roll back to the first action: text + state withdraw together, the action returns as a draft.
+  await page.locator('.ew-turn').nth(1).hover()
+  await page.getByRole('button', {name: '回退到这里'}).first().click()
+  await shot(page, 'story-rollback-confirm')
+  await page.locator('dialog[open] .ew-btn.danger').click()
+  await expect(input).toHaveValue('我凑近看看那份名单上的墨迹')
+  await expect(page.locator('.ew-objectives li.is-done')).toHaveCount(0)
+  await expect(scene).toHaveAttribute('data-scene', 'entrance-rain') // scene withdrawn with the text
+  const revAfter = Number(await page.getByTestId('story-play').getAttribute('data-revision'))
+  expect(revAfter).toBeGreaterThan(revBefore)
+
+  // Retryable validation failure: no half turn; explicit retry of the same turn.
+  await page.evaluate(() => sessionStorage.setItem('everwith.mock.scenarios', JSON.stringify({'story.retryable_failure': true})))
+  await page.reload()
+  await input.press('Enter')
+  await expect(page.getByText('这一轮没有完成（可重试，未写入任何内容）。')).toBeVisible({timeout: 15_000})
+  await shot(page, 'story-retryable')
+  await page.getByTestId('story-retry').click()
+  await expect(page.getByText('新线索：未干的划线墨迹')).toBeVisible({timeout: 15_000})
+
+  // F2: befriend THIS person (Marcus as stage manager) — sign-in in the middle, same run continues.
+  await page.getByTestId('story-befriend-stage').click()
+  await page.getByRole('button', {name: '确认加为好友'}).click()
+  await signUp(page, 'e2e-story@example.com')
+  await page.getByRole('button', {name: '确认加为好友'}).click()
+  await expect(page.locator('.ew-story-cast-row[data-role="stage"]')).toContainText('好友')
+  await shot(page, 'story-befriended-in-run')
+  writeJSON('story-run', {ok: true, revBefore, revAfter})
+})
+
+test('creation studio: type → name → edit → assist/undo → isolated preview → stale → save → share → befriend v1', async ({page}) => {
+  await page.goto('/#/create')
+  await expect(page.getByText('你还没有作品。')).toBeVisible()
+  await page.getByTestId('create-new').click()
+  await expect(page.getByTestId('work-create')).toBeDisabled()
+  await page.getByTestId('type-character').click()
+  await page.getByTestId('work-name').fill('晚风')
+  await shot(page, 'create-type-and-name')
+  await page.getByTestId('work-create').click()
+  await expect(page.getByTestId('work-editor')).toBeVisible()
+  await expect(page.getByTestId('preview-start')).toBeDisabled() // required fields missing
+  await page.getByTestId('assist-fill').click()
+  await expect(page.getByTestId('field-persona')).not.toHaveValue('')
+  await page.getByTestId('assist-undo').click()
+  await expect(page.getByTestId('field-persona')).toHaveValue('')
+  await page.getByTestId('assist-fill').click()
+  await expect(page.getByTestId('sync-status')).toHaveText('草稿已同步', {timeout: 10_000})
+  await page.getByTestId('preview-start').click()
+  const say = page.locator('.ew-preview textarea')
+  await say.fill('你好，你平时喜欢做什么？')
+  await say.press('Enter')
+  await expect(page.locator('.ew-preview .ew-msg.is-player')).toHaveCount(1)
+  await page.getByTestId('field-habit').fill('说话很慢，喜欢停顿')
+  await expect(page.getByTestId('preview-stale')).toBeVisible({timeout: 10_000})
+  await shot(page, 'create-preview-stale')
+  await page.getByTestId('work-save').click()
+  await signUp(page, 'e2e-create@example.com')
+  await page.getByTestId('work-save').click()
+  await expect(page.getByText('已保存 v1').first()).toBeVisible()
+  await page.getByTestId('share-on').click()
+  await expect(page.getByText('已分享 v1').first()).toBeVisible()
+  await shot(page, 'create-saved-shared')
+  await page.getByTestId('work-befriend').click()
+  await page.getByRole('button', {name: '确认加为好友'}).click()
+  await expect(page).toHaveURL(/#\/friends\/fr_/)
+  // A self-made character has no room of its own: the generic generated backdrop, never an official one.
+  await expect(page.locator('.ew-chat-portrait .ew-backdrop img')).toHaveAttribute('src', '/generated/batch-01/backdrop-generic.webp')
+  // The isolated preview never leaks into the friend's real conversation (no test lines as memory).
+  await expect(page.locator('.ew-chat-main')).not.toContainText('你好，你平时喜欢做什么？')
+  const box = page.locator('.ew-chat-main textarea')
+  await box.fill('你好呀')
+  await box.press('Enter')
+  await expect(page.locator('.ew-msg.is-character:not(.is-provisional)').last()).toBeVisible({timeout: 20_000})
+  await shot(page, 'create-friend-chat')
+})
diff --git a/everwith-claude-frontend/index.html b/everwith-claude-frontend/index.html
new file mode 100644
index 00000000..8b3e85e0
--- /dev/null
+++ b/everwith-claude-frontend/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="dark" />
+    <title>Everwith · 本地演示</title>
+    <!-- Icons: user-provided GPT batch v2-batch-01 (rights unverified; docs/GENERATED_ASSETS.json). -->
+    <link rel="icon" type="image/png" sizes="64x64" href="/generated/batch-01/favicon-64.png" />
+    <link rel="apple-touch-icon" href="/generated/batch-01/apple-touch-icon.png" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/everwith-claude-frontend/package-lock.json b/everwith-claude-frontend/package-lock.json
new file mode 100644
index 00000000..1dc93d4c
--- /dev/null
+++ b/everwith-claude-frontend/package-lock.json
@@ -0,0 +1,3056 @@
+{
+  "name": "everwith-claude-frontend",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "everwith-claude-frontend",
+      "version": "0.1.0",
+      "dependencies": {
+        "lucide-react": "0.545.0",
+        "react": "19.2.0",
+        "react-dom": "19.2.0"
+      },
+      "devDependencies": {
+        "@playwright/test": "1.56.0",
+        "@testing-library/react": "16.3.0",
+        "@types/node": "22.18.12",
+        "@types/react": "19.2.2",
+        "@types/react-dom": "19.2.2",
+        "@vitejs/plugin-react": "5.1.0",
+        "jsdom": "27.0.1",
+        "typescript": "5.9.3",
+        "vite": "7.1.12",
+        "vitest": "4.0.6"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-4.1.2.tgz",
+      "integrity": "sha512-NfBUvBaYgKIuq6E/RBLY1m0IohzNHAYyaJGuTK79Z23uNwmz2jl1mPsC5ZxCCxylinKhT1Amn5oNTlx1wN8cQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^3.0.0",
+        "@csstools/css-color-parser": "^4.0.1",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0",
+        "lru-cache": "^11.2.5"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
+      "version": "11.5.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.3.tgz",
+      "integrity": "sha512-U4N8FgzmWxc8k1VH8Kr6lQg18U7Fjvby6wXHVRX/ZZ7IwWbRMgrRbP0Wrb5q5NVinryp4SQampHKdvtecItxUg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-6.8.1.tgz",
+      "integrity": "sha512-MvRz1nCqW0fsy8Qz4dnLIvhOlMzqDVBabZx6lH+YywFDdjXhMY37SmpV1XFX3JzG5GWHn63j6HX6QPr3lZXHvQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/nwsapi": "^2.3.9",
+        "bidi-js": "^1.0.3",
+        "css-tree": "^3.1.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.2.6"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector/node_modules/lru-cache": {
+      "version": "11.5.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.3.tgz",
+      "integrity": "sha512-U4N8FgzmWxc8k1VH8Kr6lQg18U7Fjvby6wXHVRX/ZZ7IwWbRMgrRbP0Wrb5q5NVinryp4SQampHKdvtecItxUg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@asamuzakjp/nwsapi": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
+      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.8.tgz",
+      "integrity": "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@babel/types": "^7.29.8",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz",
+      "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.10",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.10.tgz",
+      "integrity": "sha512-EMCx3AGZ3WfAl6ht7AyQoPm2Lh+BGYEMdc4Q6Hf7uSCDOZFuLq44qNwL+iaim8VlyYhRAo4X43+weadK8ZB4Yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.8"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.9.tgz",
+      "integrity": "sha512-CjXrNHTnvqBVqHgdBysY3vk2T8tpJHb5/RMeHJBTyVa9xgugCB0CJTx/3oO8RV2QRQP391RWpB7D6hLjm8V9uA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.8"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.29.7.tgz",
+      "integrity": "sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.29.7.tgz",
+      "integrity": "sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.10",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.10.tgz",
+      "integrity": "sha512-NpugTzbKgGrNe45Ui32cN8vCFFMxVtP/9rtfwv0nP5FRDAjvYBxJcLVpYA9mr1jxP6cnIT7x9LUzuDTbWYYNRA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.10",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.10.tgz",
+      "integrity": "sha512-B3lYAs2nkKskbgQ1nfy8Ma9ao9Q1rntTAQHrzzyDuj+TSO+X3le6PfWwqDvodsb+OumE10eMFfuMCTQSQ5iuIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.8",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.9",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.8",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz",
+      "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@csstools/color-helpers": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.1.2.tgz",
+      "integrity": "sha512-grhRy3OKmniaAEKXMjua5z/EODX0MSqBGjunw8+j/3HQjOnahs2AGhvEOIYVUWcU6ScApbhLhVrQTX8XqrMrow==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.4.3.tgz",
+      "integrity": "sha512-iex20d8CHVkyvg6B7UKV7uHnI2Bqo9g+EFfT9E0y+GvTvhZ/DwONJ+9aKb1dlqm0ZiGsL5RXjp0fCoJYnkeDjA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.2",
+        "@csstools/css-tokenizer": "^4.0.2"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.2.6.tgz",
+      "integrity": "sha512-iiPQ3iRWwnJkeEn6RIu6SJPr7hYrLz6XZ9s/QZl+2/LI5KQVjpl2fdmDSZKuD4xP6GMmMPgHFFXg6k1Wkz0Trg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^6.1.2",
+        "@csstools/css-calc": "^3.4.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.2",
+        "@csstools/css-tokenizer": "^4.0.2"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.2.tgz",
+      "integrity": "sha512-40cSKyMvK+tq4qz6Awrlye2WGuOKt3FwPgtGg6KTfbHOWNw+Rk1rzbAtZnZ6IBhsY491HLRnDXwoyBAijmmILA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.2"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.15.tgz",
+      "integrity": "sha512-J0u7HkVl2nzSlhsiTOp4AmwcUQ3D+mGEEKfBy/7To5/y7F2OHwyLrXfrhR0SMgr4p5Lo+eaMVSeai24zUcBIxA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "peerDependencies": {
+        "css-tree": "^3.2.1"
+      },
+      "peerDependenciesMeta": {
+        "css-tree": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.2.tgz",
+      "integrity": "sha512-OoKoR0f76dCY666JlcbhmVTs2drYj1GUXZTYTcbUgJjh9Nv41aFfZ21bPQTERm5+L5cBDo466NltB2lplS5GBw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
+      "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@napi-rs/lzma-linux-x64-gnu": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/lzma-linux-x64-gnu/-/lzma-linux-x64-gnu-1.5.1.tgz",
+      "integrity": "sha512-oTXEIha4SsuXdTA4Iyskj0kpdx2yVXdhd75c2v3xGrHFfVMsbhTPZU/nMPL4sWKo4pBHm3aucLaqGlF696dTyQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^22.20 || ^24.12 || >=25"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.56.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.56.0.tgz",
+      "integrity": "sha512-Tzh95Twig7hUwwNe381/K3PggZBZblKUe2wv25oIpzWLr6Z0m4KgV1ZVIjnR6GM9ANEqjZD7XsZEa6JL/7YEgg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.56.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.43",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.43.tgz",
+      "integrity": "sha512-5Uxg7fQUCmfhax7FJke2+8B6cqgeUJUD9o2uXIKXhD+mG0mL6NObmVoi9wXEU1tY89mZKgAYA6fTbftx3q2ZPQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.64.6.tgz",
+      "integrity": "sha512-FkO19Fowv/OQeJZPVfdetJaI3/VpbZmBsnmAlR/rQ+b3QwfiGQiOpVegpSRH331kelvHTVw9hXYG3DwjAaRzyQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.64.6.tgz",
+      "integrity": "sha512-si5/Etm6MphPc2xYHnk455Shls/hoMjTy3mhXge4OPmvCw7TwC4KP4fKokAlKLV4XaQvLvgSHfafPcblLMYYdQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.64.6.tgz",
+      "integrity": "sha512-PQCl3q7b0BgvVt72i2xrWM6I5KliwwVe4GpWW5QDGyUQawDS9aPZss/aGyFqBmxdRxlE8wDc9CaxiQ5DHRSp/Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.64.6.tgz",
+      "integrity": "sha512-l9DFl1Itb1YYdSrP1K3U8ih44AOHa/p+Q4WMMDfGvH5qVWp+ajfgS1DlYo4yCRh8wJ2ZJv0Fqccf+ULAmMFjmg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.64.6.tgz",
+      "integrity": "sha512-bR4GR3205N9+od0+l5Dd9/iZTDpJkIe6d6Ydp2qbcQZJLmKBdYQQRp8gbWpbMt92twKJY66o1vK4NkoKQODIrA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.64.6.tgz",
+      "integrity": "sha512-XTVNaDzcFl2TeBglvxdGgsCv9JGtAGRAoJENmGBR/XvDH2mA2K0IXc2aMfP0dR8mexSXSKifJ85FixoXX1wfTw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.64.6.tgz",
+      "integrity": "sha512-qWc6qbc+25ugG9vqPR9P422KJBbVfZ05mjcMggoq8tsfWP+eRfC+/tiDdIlRF5VL2pDVZWN9zAhWsmu7R1+7Dw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.64.6.tgz",
+      "integrity": "sha512-V4Nwkp8844X/Xnww3PI1LYS0YPei8XQEVG70R+5MPZGO7AhYoun4hCN7Svs4U3wbQLZbwiz+9xRFhUZZdRl8Ww==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.64.6.tgz",
+      "integrity": "sha512-xb72A1aPaaIsp+a88VtRae/ovIEXislbUMyp7b9AQQU7ZkP2m/+ik6DW9TQcJyw5R8/RIailF9zExYwkjR++UA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.64.6.tgz",
+      "integrity": "sha512-pbcs1BVBwC43hZkjhjlF8Rx8m5G0KnhLZs9Azy/gqccP6UsNSzJr0hKGIAVPqzAH1O/NdPxxC9GVGb4msQg/aw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.64.6.tgz",
+      "integrity": "sha512-EKOC8os6Vsg487ZLKUqzLF99Jsmnq6tu7O7mAELakNpcA+8KadktFf/JYdRuHe/DzCUXmN38pUKu4XBcKlqGbQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.64.6.tgz",
+      "integrity": "sha512-v/SQ68GnSlr/HyjB79sNXesGDwkOPu9JjbHfmWaymCiM+nZsQ9TstG1KfA4MuEvTr2d3PoY8PhFxj9bt0e32JA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.64.6.tgz",
+      "integrity": "sha512-G3pmliMQ7r15zFFNwBlaT/xTdSLi4lfgI7CUrQueyKYheNVhrd8JrWCE6Ll8xf4AA1RZFqq+mNJYntiElsVOyA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.64.6.tgz",
+      "integrity": "sha512-XQTB/IPoB/wG6x/wu9uomAt8YH61IAr5iZTubMiad/lu88sotq2ocz9hJd556+Jz2kIkF7ZQZIsUuWE3OWqtcA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.64.6.tgz",
+      "integrity": "sha512-O5mpokth6+ydMuwiGtY8fIjvOBfH7u6SzmDNmZ3k6GK5C6iEAC2q2ZN/T5L9jYILx0IcCT0KnfMDihQ5yQFSBw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.64.6.tgz",
+      "integrity": "sha512-aIFxbAD9v3TvIaEDsKmukjcDg1JS4/tFXw8SHyQQgzOwzWCQ4cyDK7Ju1pQKqUXDFkEu/BZCFDCDATsKhQcB/Q==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.64.6.tgz",
+      "integrity": "sha512-fuNo1UwBc6BxnHDOxxguQL/InhheMN3RJcJMb0b4xP8r5Q3CNCrJbVg0eCIFuJ4e/zAfjR2gYbOfbzO/G7CIyw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.64.6.tgz",
+      "integrity": "sha512-05v6wFKDKJPZs9xlytVrrRu6IbRuoSvlH9xNwEOafXsKyjBFZPvAcZz2VIAB/M+lblYeKa9iOYC4RDVdfcAAaw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.64.6.tgz",
+      "integrity": "sha512-wJXKcdMjvkc/FaavZXNP1yW4i0pfOmhZAIWRSLG2yJ0PB0TWi7dkLErhX0u0vptDcXKKO/m1Y/YTeuyvb2MXwg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.64.6.tgz",
+      "integrity": "sha512-cwg7/h0ThvJwy8CBkmACdiHAxRWpbsCmIsjOt+Zzx0hTnIcSUmKYEV03bGg+hD827OnwUsbKh1ZZDW754xWyBA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.64.6.tgz",
+      "integrity": "sha512-T0RkYIJbdYXJEQFw+tMBO09KDFdgmNxkHsof3wWAABrvnx15Yh8RytmrgYy9+q9cBeBNZF66MMQZC+5nzEz6vg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.64.6.tgz",
+      "integrity": "sha512-KlfpmF1AAIdAWxt8QQNClbpLFlAUfYOzqIuJ7IXEStMHpFRuH78RG6FjqPb3Rqhh0K89F5npvG+/i3Fjl6IveQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.64.6.tgz",
+      "integrity": "sha512-MrTLjd7Jlt9/ZavJZYG61KQv9Iy9bzbY+yXy73Xvwoa2uP66wvDShkyBr5Chz/yrE6lbD/zHMuTmKQVNQqBApg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.64.6.tgz",
+      "integrity": "sha512-8fWDH1CkPI8GdBKAxzHDza7UmgficsKo2+MVbvUgOGhB0629w5sHMg3Qu5y7TZsrYKHHWpz8fla4KvoT7WsO3Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.64.6.tgz",
+      "integrity": "sha512-9/c9PWdr5GCIHkkxiHM1HjNBQMVdftP4O8QTcoUAaRza2FSqJ4axbf8QAnBuE6BIGQDl71SaRPeDdDYid5ecTw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.2.tgz",
+      "integrity": "sha512-yzr2S9HyAIdhz2/6qHgbs665Q7PKVcDF05vsOlHPxG1mo36gKVesdYVeDLnXgfjJ03CrKRk08knc6+E/9m8v2Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/react": {
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.0.tgz",
+      "integrity": "sha512-kFSyxiEDwv1WLl2fgsq6pPBbw5aWKrsY2/noi1Id0TK0UParSF62oFQFGHXIyaG4pp2tEub/Zlel+fjjZILDsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "22.18.12",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.18.12.tgz",
+      "integrity": "sha512-BICHQ67iqxQGFSzfCFTT7MRQ5XcBjG5aeKh5Ok38UBbPe5fxTyE+aHFxwVrGyr8GNlqFMLKD1D3P2K/1ks8tog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
+      "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.2",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz",
+      "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.0.tgz",
+      "integrity": "sha512-4LuWrg7EKWgQaMJfnN+wcmbAW+VSsCmqGohftWjuct47bv8uE4n/nPpq4XjJPsxgq00GGG5J8dvBczp8uxScew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.4",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.43",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.18.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/@vitest/expect": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.6.tgz",
+      "integrity": "sha512-5j8UUlBVhOjhj4lR2Nt9sEV8b4WtbcYh8vnfhTNA2Kn5+smtevzjNq+xlBuVhnFGXiyPPNzGrOVvmyHWkS5QGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.0.6",
+        "@vitest/utils": "4.0.6",
+        "chai": "^6.0.1",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.6.tgz",
+      "integrity": "sha512-3COEIew5HqdzBFEYN9+u0dT3i/NCwppLnO1HkjGfAP1Vs3vti1Hxm/MvcbC4DAn3Szo1M7M3otiAaT83jvqIjA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.0.6",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.19"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.6.tgz",
+      "integrity": "sha512-4vptgNkLIA1W1Nn5X4x8rLJBzPiJwnPc+awKtfBE5hNMVsoAl/JCCPPzNrbf+L4NKgklsis5Yp2gYa+XAS442g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.6.tgz",
+      "integrity": "sha512-trPk5qpd7Jj+AiLZbV/e+KiiaGXZ8ECsRxtnPnCrJr9OW2mLB72Cb824IXgxVz/mVU3Aj4VebY+tDTPn++j1Og==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.0.6",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.6.tgz",
+      "integrity": "sha512-PaYLt7n2YzuvxhulDDu6c9EosiRuIE+FI2ECKs6yvHyhoga+2TBWI8dwBjs+IeuQaMtZTfioa9tj3uZb7nev1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.0.6",
+        "magic-string": "^0.30.19",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.6.tgz",
+      "integrity": "sha512-g9jTUYPV1LtRPRCQfhbMintW7BTQz1n6WXYQYRQ25qkyffA4bjVXjkROokZnv7t07OqfaFKw1lPzqKGk1hmNuQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.6.tgz",
+      "integrity": "sha512-bG43VS3iYKrMIZXBo+y8Pti0O7uNju3KvNn6DrQWhQQKcLavMB+0NZfO1/QBAEbq0MaQ3QjNsnnXlGQvsh0Z6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.0.6",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.11.28",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.28.tgz",
+      "integrity": "sha512-br0LOmjJqr6Rt4AEkadbcNf67Zpo7EPwKsWbjnRrJIa1QYFHQBqM4C7F2WTbV8ahTEcg1Eo+Y0aWjjORInYFyA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/bidi-js": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.1.0.tgz",
+      "integrity": "sha512-fX1Onk0tdVPC7obPWB5EbJ1z7NVhLq4m2xZLq2YXBkxzMXIGRpNMU88n0EPgWseKl12J7zXs7qrDxPK4sRs2fg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.29.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.29.3.tgz",
+      "integrity": "sha512-1R4kiYKXGViqEN0CnoDrXc1StD9niAwu+j2dukWzrD4bJgsD4lDmEp0CRbc6E/vYJIfTHwPmwyaKtVSudICdPA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.11.26",
+        "caniuse-lite": "^1.0.30001813",
+        "electron-to-chromium": "^1.5.439",
+        "node-releases": "^2.0.57",
+        "update-browserslist-db": "^1.3.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001816",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001816.tgz",
+      "integrity": "sha512-+8Yx7BXCoqk6IF8yTicjfUR6D/ldJzdlsodlEOiOSPmhK844WIgk67/zIQaGAOxNkZyyvBlrRFnLvqKIoqbAFw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chai": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.3.0.tgz",
+      "integrity": "sha512-XWAtwJ6OHO+tj0EKCs0Y2UamnyOxseZWltU4x2U2wh8g4AigdjwvtUjvLP2tqkA/avxHEtzxNaqGq/YGNwckKg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/cssstyle": {
+      "version": "5.3.7",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-5.3.7.tgz",
+      "integrity": "sha512-7D2EPVltRrsTkhpQmksIu+LxeWAIEk6wRDMJ1qljlv+CKHJM+cJLlfhWIzNA44eAsHXSNe3+vO6DW1yCYx8SuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^4.1.1",
+        "@csstools/css-syntax-patches-for-csstree": "^1.0.21",
+        "css-tree": "^3.1.0",
+        "lru-cache": "^11.2.4"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/cssstyle/node_modules/lru-cache": {
+      "version": "11.5.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.3.tgz",
+      "integrity": "sha512-U4N8FgzmWxc8k1VH8Kr6lQg18U7Fjvby6wXHVRX/ZZ7IwWbRMgrRbP0Wrb5q5NVinryp4SQampHKdvtecItxUg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/data-urls": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-6.0.1.tgz",
+      "integrity": "sha512-euIQENZg6x8mj3fO6o9+fOW8MimUI4PpD/fZBhJfeioZVy9TUpM4UY7KjQNVZFlqwJ0UdzRDzkycB997HEq1BQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^15.1.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/data-urls/node_modules/whatwg-mimetype": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
+      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.454",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.454.tgz",
+      "integrity": "sha512-NqD5GhkXnxJpDQVCmmpc546qjH6kei2VI9m45CTF+sQU7bcS7YeVt7ba0cnjueMH1AXGRu/driZUP9iYVSv7vg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/entities": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-8.1.0.tgz",
+      "integrity": "sha512-kxL7msIffSuh9aaFAMD7rxAIuTRMAHMeBtgHW2yUdWw732ZNh4MehkF2gdjvtdmikkaIP9bFDDJOPlsvm7avrA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
+      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.12",
+        "@esbuild/android-arm": "0.25.12",
+        "@esbuild/android-arm64": "0.25.12",
+        "@esbuild/android-x64": "0.25.12",
+        "@esbuild/darwin-arm64": "0.25.12",
+        "@esbuild/darwin-x64": "0.25.12",
+        "@esbuild/freebsd-arm64": "0.25.12",
+        "@esbuild/freebsd-x64": "0.25.12",
+        "@esbuild/linux-arm": "0.25.12",
+        "@esbuild/linux-arm64": "0.25.12",
+        "@esbuild/linux-ia32": "0.25.12",
+        "@esbuild/linux-loong64": "0.25.12",
+        "@esbuild/linux-mips64el": "0.25.12",
+        "@esbuild/linux-ppc64": "0.25.12",
+        "@esbuild/linux-riscv64": "0.25.12",
+        "@esbuild/linux-s390x": "0.25.12",
+        "@esbuild/linux-x64": "0.25.12",
+        "@esbuild/netbsd-arm64": "0.25.12",
+        "@esbuild/netbsd-x64": "0.25.12",
+        "@esbuild/openbsd-arm64": "0.25.12",
+        "@esbuild/openbsd-x64": "0.25.12",
+        "@esbuild/openharmony-arm64": "0.25.12",
+        "@esbuild/sunos-x64": "0.25.12",
+        "@esbuild/win32-arm64": "0.25.12",
+        "@esbuild/win32-ia32": "0.25.12",
+        "@esbuild/win32-x64": "0.25.12"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/expect-type": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz",
+      "integrity": "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsdom": {
+      "version": "27.0.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-27.0.1.tgz",
+      "integrity": "sha512-SNSQteBL1IlV2zqhwwolaG9CwhIhTvVHWg3kTss/cLE7H/X4644mtPQqYvCfsSrGQWt9hSZcgOXX8bOZaMN+kA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/dom-selector": "^6.7.2",
+        "cssstyle": "^5.3.1",
+        "data-urls": "^6.0.0",
+        "decimal.js": "^10.6.0",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.6",
+        "is-potential-custom-element-name": "^1.0.1",
+        "parse5": "^8.0.0",
+        "rrweb-cssom": "^0.8.0",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^6.0.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^8.0.0",
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^15.1.0",
+        "ws": "^8.18.3",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.545.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.545.0.tgz",
+      "integrity": "sha512-7r1/yUuflQDSt4f1bpn5ZAocyIxcTyVyBBChSVtBKn5M+392cPmI5YJMWOJKk/HUWGm5wg83chlAZtCcGbEZtw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.20",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.20.tgz",
+      "integrity": "sha512-uKdg2G3GNCKQn9byYOpxbGqrT2fGO5KRt5J/8b3pok8rT6qxGWF6hxMyJiEYtAf+FVyYuD9hRaDqX5uPFYJ4ZQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.58",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.58.tgz",
+      "integrity": "sha512-BdiKAgbfRlvfMq/XzO/AF9NPmaA8a+YpLAyAFTVFBj3gARrAIfWvNq7Q7NE4se3KgFu0KkrvQMxTS0XVnsGzHg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
+      "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.7.tgz",
+      "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.56.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.56.0.tgz",
+      "integrity": "sha512-X5Q1b8lOdWIE4KAoHpW3SE8HvUB+ZZsUoN64ZhjnN8dOb1UpujxBtENGiZFE+9F/yhzJwYa+ca3u43FeLbboHA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.56.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.56.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.56.0.tgz",
+      "integrity": "sha512-1SXl7pMfemAMSDn5rkPeZljxOCYAmQnYLBTExuh6E8USHXGSX3dx6lYZN/xPpTz1vimXmPA9CDnILvmJaB8aSQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.30",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.30.tgz",
+      "integrity": "sha512-zkd+e9S1AQHhmaBKye9zlFHWjOwVgqXl1q3ECYy8561K7qxR2cREf/STLskulBFd78k6AOFeA+ff1TtEzk9bAA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.20",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
+      "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
+      "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/react-refresh": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
+      "integrity": "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.64.6",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.64.6.tgz",
+      "integrity": "sha512-fX1Vy+UNKdXn+xKDnu/HBXbHVr1AY8cSdQj9BU4kLv5aFCMqGpvrVbyUMmjN3DdzWhSAuTbcX8PCNEVaumthYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.9"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@napi-rs/lzma-linux-x64-gnu": "1.5.1",
+        "@rollup/rollup-android-arm-eabi": "4.64.6",
+        "@rollup/rollup-android-arm64": "4.64.6",
+        "@rollup/rollup-darwin-arm64": "4.64.6",
+        "@rollup/rollup-darwin-x64": "4.64.6",
+        "@rollup/rollup-freebsd-arm64": "4.64.6",
+        "@rollup/rollup-freebsd-x64": "4.64.6",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.64.6",
+        "@rollup/rollup-linux-arm-musleabihf": "4.64.6",
+        "@rollup/rollup-linux-arm64-gnu": "4.64.6",
+        "@rollup/rollup-linux-arm64-musl": "4.64.6",
+        "@rollup/rollup-linux-loong64-gnu": "4.64.6",
+        "@rollup/rollup-linux-loong64-musl": "4.64.6",
+        "@rollup/rollup-linux-ppc64-gnu": "4.64.6",
+        "@rollup/rollup-linux-ppc64-musl": "4.64.6",
+        "@rollup/rollup-linux-riscv64-gnu": "4.64.6",
+        "@rollup/rollup-linux-riscv64-musl": "4.64.6",
+        "@rollup/rollup-linux-s390x-gnu": "4.64.6",
+        "@rollup/rollup-linux-x64-gnu": "4.64.6",
+        "@rollup/rollup-linux-x64-musl": "4.64.6",
+        "@rollup/rollup-openbsd-x64": "4.64.6",
+        "@rollup/rollup-openharmony-arm64": "4.64.6",
+        "@rollup/rollup-win32-arm64-msvc": "4.64.6",
+        "@rollup/rollup-win32-ia32-msvc": "4.64.6",
+        "@rollup/rollup-win32-x64-gnu": "4.64.6",
+        "@rollup/rollup-win32-x64-msvc": "4.64.6",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/rrweb-cssom": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
+      "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.2.tgz",
+      "integrity": "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/std-env": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
+      "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
+      "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.2.0.tgz",
+      "integrity": "sha512-LgO3D9yZJjApUiuUfl9iFAwrtaX4+lok3wJIqttGoKCHlWUqHqbQpnxCf82L8FjgKsh4iGo78hqJwgL8F6To2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tldts": {
+      "version": "7.4.18",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.4.18.tgz",
+      "integrity": "sha512-somxA8xKAUzlAxl0TX/jMSYIbRNFIVGnI96pVGJPeMc5BsHmfVXn6mOJT6U++ELnl04eGfzpfcEuZe8WiASkXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^7.4.18"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "7.4.18",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.4.18.tgz",
+      "integrity": "sha512-KI2PKvCmvQI/xD6ypPqkU0i7oxNXR/O58RLRaHR4svsgVUQ2JE/XC8BtMbG6PSehD27I8sZJRcC1ASnCy6lp3g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tough-cookie": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.2.tgz",
+      "integrity": "sha512-exgYmnmL/sJpR3upZfXG5PoatXQii55xAiXGXzY+sROLZ/Y+SLcp9PgJNI9Vz37HpQ74WvDcLT8eqm+kV3FzrA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^7.0.5"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.3.4.tgz",
+      "integrity": "sha512-t8wonIOdQyOjtPd2VktlBu6QjTVTks6v8bSi7kd0r2Vll8TK1JYDZtRRdbmCHOAMphkZgrzK+L+vXK4pyZ8t4A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "7.1.12",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.12.tgz",
+      "integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "lightningcss": "^1.21.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/vitest": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.6.tgz",
+      "integrity": "sha512-gR7INfiVRwnEOkCk47faros/9McCZMp5LM+OMNWGLaDBSvJxIzwjgNFufkuePBNaesGRnLmNfW+ddbUJRZn0nQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "4.0.6",
+        "@vitest/mocker": "4.0.6",
+        "@vitest/pretty-format": "4.0.6",
+        "@vitest/runner": "4.0.6",
+        "@vitest/snapshot": "4.0.6",
+        "@vitest/spy": "4.0.6",
+        "@vitest/utils": "4.0.6",
+        "debug": "^4.4.3",
+        "es-module-lexer": "^1.7.0",
+        "expect-type": "^1.2.2",
+        "magic-string": "^0.30.19",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^3.9.0",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^0.3.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.0.3",
+        "vite": "^6.0.0 || ^7.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@types/debug": "^4.1.12",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.0.6",
+        "@vitest/browser-preview": "4.0.6",
+        "@vitest/browser-webdriverio": "4.0.6",
+        "@vitest/ui": "4.0.6",
+        "happy-dom": "*",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@types/debug": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-15.1.0.tgz",
+      "integrity": "sha512-2ytDk0kiEj/yu90JOAp44PVPUkO9+jVhyf+SybKlRHSDlvOOZhdPIrr7xTH64l4WixO2cP+wQIcgujkGBPPz6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.22.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.22.0.tgz",
+      "integrity": "sha512-Ydggc987+RO0AnWtZ/7Wq9FtNvcrL1b/RO0ud9mWjUPgDrsAAwQSF51sm2hm1XofbU/4jkpGEsLFsZZxU+1DOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    }
+  }
+}
diff --git a/everwith-claude-frontend/package.json b/everwith-claude-frontend/package.json
new file mode 100644
index 00000000..e12bcde3
--- /dev/null
+++ b/everwith-claude-frontend/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "everwith-claude-frontend",
+  "private": true,
+  "version": "0.1.0",
+  "description": "Independent Everwith desktop-first frontend rebuild (local mock adapter; no live services).",
+  "type": "module",
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "scripts": {
+    "assets:sync": "node scripts/sync-assets.mjs",
+    "assets:check": "node scripts/sync-assets.mjs --check",
+    "dev": "vite",
+    "build": "tsc -p tsconfig.json --noEmit && vite build",
+    "preview": "vite preview --host 127.0.0.1 --port 4173 --strictPort",
+    "check": "tsc -p tsconfig.json --noEmit && vitest run",
+    "test": "vitest run",
+    "test:e2e": "playwright test",
+    "rules:check": "vitest run tests/engines.test.ts",
+    "test:e2e:quick": "playwright test --grep-invert @long",
+    "assets:refs": "node scripts/check-asset-refs.mjs",
+    "assets:generated": "node scripts/check-generated.mjs"
+  },
+  "dependencies": {
+    "lucide-react": "0.545.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.56.0",
+    "@testing-library/react": "16.3.0",
+    "@types/node": "22.18.12",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "@vitejs/plugin-react": "5.1.0",
+    "jsdom": "27.0.1",
+    "typescript": "5.9.3",
+    "vite": "7.1.12",
+    "vitest": "4.0.6"
+  }
+}
diff --git a/everwith-claude-frontend/playwright.config.ts b/everwith-claude-frontend/playwright.config.ts
new file mode 100644
index 00000000..22f625f2
--- /dev/null
+++ b/everwith-claude-frontend/playwright.config.ts
@@ -0,0 +1,36 @@
+import {defineConfig} from '@playwright/test'
+
+/**
+ * E2E against the production build served locally (`vite preview`, 127.0.0.1:4173).
+ * Everything runs on the in-browser mock adapter; no network service is contacted.
+ * On Linux CI without a GPU, WebGL (Live2D) uses SwiftShader software rendering.
+ */
+const softwareGL = process.platform === 'linux' ? ['--use-angle=swiftshader', '--enable-unsafe-swiftshader', '--ignore-gpu-blocklist'] : []
+
+export default defineConfig({
+  testDir: 'e2e',
+  outputDir: 'test-results',
+  timeout: 120_000,
+  expect: {timeout: 15_000},
+  fullyParallel: false,
+  workers: 1,
+  retries: 0,
+  reporter: [['list'], ['json', {outputFile: 'test-results/e2e-report.json'}]],
+  use: {
+    baseURL: 'http://127.0.0.1:4173',
+    channel: 'chromium',
+    viewport: {width: 1280, height: 800},
+    locale: 'zh-CN',
+    timezoneId: 'Asia/Shanghai',
+    launchOptions: {args: softwareGL},
+    // Tracing screencasts every frame; with software-GL Live2D that starves timers. Opt in with TRACE=1.
+    trace: process.env.TRACE ? 'retain-on-failure' : 'off',
+    screenshot: 'only-on-failure',
+  },
+  webServer: {
+    command: 'npm run build && npm run preview',
+    url: 'http://127.0.0.1:4173',
+    reuseExistingServer: true,
+    timeout: 120_000,
+  },
+})
diff --git a/everwith-claude-frontend/public/generated/batch-01/apple-touch-icon.png b/everwith-claude-frontend/public/generated/batch-01/apple-touch-icon.png
new file mode 100644
index 00000000..f64ba929
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/apple-touch-icon.png differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/backdrop-arthur.webp b/everwith-claude-frontend/public/generated/batch-01/backdrop-arthur.webp
new file mode 100644
index 00000000..9e87cf67
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/backdrop-arthur.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/backdrop-generic.webp b/everwith-claude-frontend/public/generated/batch-01/backdrop-generic.webp
new file mode 100644
index 00000000..3a00ae66
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/backdrop-generic.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/backdrop-iris.webp b/everwith-claude-frontend/public/generated/batch-01/backdrop-iris.webp
new file mode 100644
index 00000000..82ce6bc7
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/backdrop-iris.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/backdrop-lena.webp b/everwith-claude-frontend/public/generated/batch-01/backdrop-lena.webp
new file mode 100644
index 00000000..8487038e
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/backdrop-lena.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/backdrop-marcus.webp b/everwith-claude-frontend/public/generated/batch-01/backdrop-marcus.webp
new file mode 100644
index 00000000..4e3d1ba0
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/backdrop-marcus.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/backdrop-nora.webp b/everwith-claude-frontend/public/generated/batch-01/backdrop-nora.webp
new file mode 100644
index 00000000..ed176367
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/backdrop-nora.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/brand-emblem.png b/everwith-claude-frontend/public/generated/batch-01/brand-emblem.png
new file mode 100644
index 00000000..c163e2f2
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/brand-emblem.png differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/create-type-character.webp b/everwith-claude-frontend/public/generated/batch-01/create-type-character.webp
new file mode 100644
index 00000000..52d30e97
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/create-type-character.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/create-type-story.webp b/everwith-claude-frontend/public/generated/batch-01/create-type-story.webp
new file mode 100644
index 00000000..e128734c
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/create-type-story.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/empty-create.webp b/everwith-claude-frontend/public/generated/batch-01/empty-create.webp
new file mode 100644
index 00000000..a3bd68e4
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/empty-create.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/empty-friends.webp b/everwith-claude-frontend/public/generated/batch-01/empty-friends.webp
new file mode 100644
index 00000000..173a9180
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/empty-friends.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/empty-recent.webp b/everwith-claude-frontend/public/generated/batch-01/empty-recent.webp
new file mode 100644
index 00000000..3ed6e6a7
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/empty-recent.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/favicon-64.png b/everwith-claude-frontend/public/generated/batch-01/favicon-64.png
new file mode 100644
index 00000000..6eb5e88b
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/favicon-64.png differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/game-cabo-cover.webp b/everwith-claude-frontend/public/generated/batch-01/game-cabo-cover.webp
new file mode 100644
index 00000000..a57c5897
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/game-cabo-cover.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/game-royale-cover.webp b/everwith-claude-frontend/public/generated/batch-01/game-royale-cover.webp
new file mode 100644
index 00000000..ce0d8e04
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/game-royale-cover.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/game-splendor-cover.webp b/everwith-claude-frontend/public/generated/batch-01/game-splendor-cover.webp
new file mode 100644
index 00000000..b5cf54f7
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/game-splendor-cover.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/persona-avatar-01.webp b/everwith-claude-frontend/public/generated/batch-01/persona-avatar-01.webp
new file mode 100644
index 00000000..c4aeab0a
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/persona-avatar-01.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/persona-avatar-02.webp b/everwith-claude-frontend/public/generated/batch-01/persona-avatar-02.webp
new file mode 100644
index 00000000..7388698a
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/persona-avatar-02.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/persona-avatar-03.webp b/everwith-claude-frontend/public/generated/batch-01/persona-avatar-03.webp
new file mode 100644
index 00000000..935c3c25
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/persona-avatar-03.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/persona-avatar-04.webp b/everwith-claude-frontend/public/generated/batch-01/persona-avatar-04.webp
new file mode 100644
index 00000000..44c3864a
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/persona-avatar-04.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/persona-avatar-05.webp b/everwith-claude-frontend/public/generated/batch-01/persona-avatar-05.webp
new file mode 100644
index 00000000..141dc223
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/persona-avatar-05.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/persona-avatar-06.webp b/everwith-claude-frontend/public/generated/batch-01/persona-avatar-06.webp
new file mode 100644
index 00000000..9bf1ba9f
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/persona-avatar-06.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/persona-avatar-07.webp b/everwith-claude-frontend/public/generated/batch-01/persona-avatar-07.webp
new file mode 100644
index 00000000..40af8f23
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/persona-avatar-07.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/persona-avatar-08.webp b/everwith-claude-frontend/public/generated/batch-01/persona-avatar-08.webp
new file mode 100644
index 00000000..7afe39a8
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/persona-avatar-08.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/state-load-error.webp b/everwith-claude-frontend/public/generated/batch-01/state-load-error.webp
new file mode 100644
index 00000000..bd475b4b
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/state-load-error.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/state-not-found.webp b/everwith-claude-frontend/public/generated/batch-01/state-not-found.webp
new file mode 100644
index 00000000..170500f1
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/state-not-found.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/state-signin.webp b/everwith-claude-frontend/public/generated/batch-01/state-signin.webp
new file mode 100644
index 00000000..db8f0b7e
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/state-signin.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/story-last-train-cover-tall.webp b/everwith-claude-frontend/public/generated/batch-01/story-last-train-cover-tall.webp
new file mode 100644
index 00000000..321a6b2e
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/story-last-train-cover-tall.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/story-last-train-cover-wide.webp b/everwith-claude-frontend/public/generated/batch-01/story-last-train-cover-wide.webp
new file mode 100644
index 00000000..3eff1e64
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/story-last-train-cover-wide.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/story-last-train-scene-corner.webp b/everwith-claude-frontend/public/generated/batch-01/story-last-train-scene-corner.webp
new file mode 100644
index 00000000..c9f7dc53
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/story-last-train-scene-corner.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/story-last-train-scene-duty-room.webp b/everwith-claude-frontend/public/generated/batch-01/story-last-train-scene-duty-room.webp
new file mode 100644
index 00000000..a88f1e1f
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/story-last-train-scene-duty-room.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/story-last-train-scene-platform-dawn.webp b/everwith-claude-frontend/public/generated/batch-01/story-last-train-scene-platform-dawn.webp
new file mode 100644
index 00000000..12f5cbdd
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/story-last-train-scene-platform-dawn.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/story-last-train-scene-waiting-room.webp b/everwith-claude-frontend/public/generated/batch-01/story-last-train-scene-waiting-room.webp
new file mode 100644
index 00000000..9b06084f
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/story-last-train-scene-waiting-room.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/story-promise-rain-cover-tall.webp b/everwith-claude-frontend/public/generated/batch-01/story-promise-rain-cover-tall.webp
new file mode 100644
index 00000000..fd105f90
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/story-promise-rain-cover-tall.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/story-promise-rain-cover-wide.webp b/everwith-claude-frontend/public/generated/batch-01/story-promise-rain-cover-wide.webp
new file mode 100644
index 00000000..0ffb9a8a
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/story-promise-rain-cover-wide.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/story-promise-rain-scene-backstage.webp b/everwith-claude-frontend/public/generated/batch-01/story-promise-rain-scene-backstage.webp
new file mode 100644
index 00000000..9547a9f2
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/story-promise-rain-scene-backstage.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/story-promise-rain-scene-entrance-after-rain.webp b/everwith-claude-frontend/public/generated/batch-01/story-promise-rain-scene-entrance-after-rain.webp
new file mode 100644
index 00000000..de39bb41
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/story-promise-rain-scene-entrance-after-rain.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/story-promise-rain-scene-entrance-rain.webp b/everwith-claude-frontend/public/generated/batch-01/story-promise-rain-scene-entrance-rain.webp
new file mode 100644
index 00000000..128be1ca
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/story-promise-rain-scene-entrance-rain.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/story-promise-rain-scene-office.webp b/everwith-claude-frontend/public/generated/batch-01/story-promise-rain-scene-office.webp
new file mode 100644
index 00000000..ae7a4c6b
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/story-promise-rain-scene-office.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/work-cover-01.webp b/everwith-claude-frontend/public/generated/batch-01/work-cover-01.webp
new file mode 100644
index 00000000..d281d7e0
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/work-cover-01.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/work-cover-02.webp b/everwith-claude-frontend/public/generated/batch-01/work-cover-02.webp
new file mode 100644
index 00000000..239516f1
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/work-cover-02.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/work-cover-03.webp b/everwith-claude-frontend/public/generated/batch-01/work-cover-03.webp
new file mode 100644
index 00000000..0e5926cb
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/work-cover-03.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/work-cover-04.webp b/everwith-claude-frontend/public/generated/batch-01/work-cover-04.webp
new file mode 100644
index 00000000..62ab6c38
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/work-cover-04.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/work-cover-05.webp b/everwith-claude-frontend/public/generated/batch-01/work-cover-05.webp
new file mode 100644
index 00000000..c409b7e2
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/work-cover-05.webp differ
diff --git a/everwith-claude-frontend/public/generated/batch-01/work-cover-06.webp b/everwith-claude-frontend/public/generated/batch-01/work-cover-06.webp
new file mode 100644
index 00000000..cca63bf2
Binary files /dev/null and b/everwith-claude-frontend/public/generated/batch-01/work-cover-06.webp differ
diff --git a/everwith-claude-frontend/scripts/check-asset-refs.mjs b/everwith-claude-frontend/scripts/check-asset-refs.mjs
new file mode 100644
index 00000000..75629bfc
--- /dev/null
+++ b/everwith-claude-frontend/scripts/check-asset-refs.mjs
@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+// Finds every `/handoff/...` asset path written in src/ — plain literals and template
+// strings built from per-file constants such as `const P = '/handoff/assets/...'` — and
+// verifies each file exists in public/handoff (copied by `npm run assets:sync`).
+// Paths assembled from data at runtime (Live2D model3 references, CABO ranks from the
+// manifest) are verified by the sync script itself.
+import {existsSync, readdirSync, readFileSync, statSync} from 'node:fs';
+import {dirname, join, resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const files = [];
+(function walk(dir) {
+  for (const name of readdirSync(dir)) {
+    const p = join(dir, name);
+    if (statSync(p).isDirectory()) { if (name !== 'vendor') walk(p); }
+    else if (/\.(ts|tsx|css)$/.test(name)) files.push(p);
+  }
+})(join(root, 'src'));
+
+const EXT = '(?:png|jpe?g|webp|mp4|json|js|moc3)';
+const refs = new Map();
+const add = (rel, file) => refs.set(rel, [...new Set([...(refs.get(rel) ?? []), file.slice(root.length + 1)])]);
+for (const f of files) {
+  const text = readFileSync(f, 'utf8');
+  for (const m of text.matchAll(new RegExp(`/handoff/(assets/[A-Za-z0-9_\\-./]+\\.${EXT})(?![A-Za-z0-9_])`, 'g'))) add(m[1], f);
+  // Per-file directory constants, e.g. const V = '/handoff/assets/companions/game-previews/v1'
+  const consts = new Map([...text.matchAll(/(?:export\s+)?const\s+([A-Z_][A-Z0-9_]*)\s*=\s*['`]\/handoff\/([^'`$]+?)\/?['`]/g)].map(m => [m[1], m[2]]));
+  consts.set('GAME_ASSETS', 'assets/games');
+  for (const m of text.matchAll(new RegExp(`\\$\\{([A-Z_][A-Z0-9_]*)\\}/([A-Za-z0-9_\\-./]+\\.${EXT})(?![A-Za-z0-9_])`, 'g'))) {
+    const base = consts.get(m[1]) ?? (m[1] === 'DIR' ? 'assets/games/splendor' : m[1] === 'ART_DIR' ? 'assets/games/cabo/card-rank-art' : null);
+    if (base) add(`${base}/${m[2]}`, f);
+  }
+}
+const missing = [...refs.keys()].filter(rel => !existsSync(join(root, 'public', 'handoff', rel)));
+console.log(JSON.stringify({checkedRefs: refs.size, missing: missing.map(rel => ({rel, from: refs.get(rel)}))}, null, 2));
+process.exit(missing.length ? 1 : 0);
diff --git a/everwith-claude-frontend/scripts/check-generated.mjs b/everwith-claude-frontend/scripts/check-generated.mjs
new file mode 100644
index 00000000..ea2bbe7e
--- /dev/null
+++ b/everwith-claude-frontend/scripts/check-generated.mjs
@@ -0,0 +1,57 @@
+#!/usr/bin/env node
+// Verifies the user-provided generated images (GPT batch v2-batch-01) that ship in
+// public/generated/batch-01 against docs/GENERATED_ASSETS.json:
+//   - every listed derivative exists with the recorded sha256 and size, nothing unlisted is served;
+//   - every `/generated/batch-01/<file>` written in src/ or index.html (literal or `${GEN}/<file>`) is listed;
+//   - the id families picked at runtime (stage backdrops, work covers, persona avatars) are complete.
+// Rights of these images: 用户经 GPT 生成并提供；商用/再分发权未核实 (not part of the handoff package).
+import {createHash} from 'node:crypto';
+import {existsSync, readdirSync, readFileSync, statSync} from 'node:fs';
+import {dirname, join, resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const doc = JSON.parse(readFileSync(join(root, 'docs', 'GENERATED_ASSETS.json'), 'utf8'));
+const problems = [];
+const listed = new Map(doc.assets.map(a => [a.derivative.url.replace('/generated/batch-01/', ''), a]));
+
+for (const [name, a] of listed) {
+  const file = join(root, a.derivative.path);
+  if (!existsSync(file)) { problems.push({file: a.derivative.path, problem: 'missing'}); continue; }
+  const bytes = readFileSync(file);
+  const sha = createHash('sha256').update(bytes).digest('hex');
+  if (sha !== a.derivative.sha256) problems.push({file: a.derivative.path, problem: 'sha256 mismatch'});
+  if (bytes.length !== a.derivative.bytes) problems.push({file: a.derivative.path, problem: 'size mismatch'});
+  if (!a.original?.sha256 || !a.original?.file) problems.push({file: name, problem: 'no original recorded'});
+}
+const servedDir = join(root, 'public', 'generated', 'batch-01');
+for (const name of existsSync(servedDir) ? readdirSync(servedDir) : []) if (!listed.has(name)) problems.push({file: `public/generated/batch-01/${name}`, problem: 'not listed in docs/GENERATED_ASSETS.json'});
+
+const files = [join(root, 'index.html')];
+(function walk(dir) {
+  for (const name of readdirSync(dir)) {
+    const p = join(dir, name);
+    if (statSync(p).isDirectory()) { if (name !== 'vendor') walk(p); }
+    else if (/\.(ts|tsx|css)$/.test(name)) files.push(p);
+  }
+})(join(root, 'src'));
+const refs = new Map();
+for (const f of files) {
+  const text = readFileSync(f, 'utf8');
+  const rel = f.slice(root.length + 1);
+  for (const m of text.matchAll(/\/generated\/batch-01\/([A-Za-z0-9_.-]+\.(?:webp|png))/g)) refs.set(m[1], [...new Set([...(refs.get(m[1]) ?? []), rel])]);
+  if (/const\s+GEN\s*=\s*'\/generated\/batch-01'/.test(text) || /from '[./]*art\/generated'/.test(text)) {
+    for (const m of text.matchAll(/\$\{GEN\}\/([A-Za-z0-9_.-]+\.(?:webp|png))/g)) refs.set(m[1], [...new Set([...(refs.get(m[1]) ?? []), rel])]);
+  }
+}
+for (const [name, from] of refs) if (!listed.has(name)) problems.push({file: name, problem: 'referenced but not listed', from});
+
+const families = [
+  ...['arthur', 'lena', 'marcus', 'nora', 'iris', 'generic'].map(k => `backdrop-${k}.webp`),
+  ...[1, 2, 3, 4, 5, 6].map(i => `work-cover-0${i}.webp`),
+  ...[1, 2, 3, 4, 5, 6, 7, 8].map(i => `persona-avatar-0${i}.webp`),
+];
+for (const name of families) if (!listed.has(name)) problems.push({file: name, problem: 'runtime id family incomplete'});
+
+console.log(JSON.stringify({batch: doc.batch, rights: doc.rights, derivatives: listed.size, staticRefs: refs.size, runtimeFamilies: families.length, problems}, null, 2));
+process.exit(problems.length ? 1 : 0);
diff --git a/everwith-claude-frontend/scripts/derive-generated.py b/everwith-claude-frontend/scripts/derive-generated.py
new file mode 100644
index 00000000..af556534
--- /dev/null
+++ b/everwith-claude-frontend/scripts/derive-generated.py
@@ -0,0 +1,177 @@
+#!/usr/bin/env python3
+"""Derive the web copies of the user-provided GPT image batch (v2-batch-01).
+
+    python3 -I scripts/derive-generated.py --from "<Dropbox>/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01"
+
+Optional maintenance step (needs Pillow with WebP). The derived files in
+public/generated/batch-01/ are committed, so a normal install never runs this.
+What it does, and nothing else:
+  1. checks every chosen original against the batch's own SHA256SUMS.json and manifest.json;
+  2. writes resized copies (WebP / PNG) to public/generated/batch-01/ — no retouching,
+     no colour changes; the only edits are resizing and, for the favicon, making the
+     black corners outside the icon's rounded square transparent;
+  3. records original + derivative hashes and the generation prompts in
+     docs/GENERATED_ASSETS.json (checked by `npm run assets:generated`).
+Re-running with a different Pillow/libwebp may produce different bytes; the JSON
+then simply records the new hashes.
+Rights: user-provided GPT output; commercial use and redistribution are unverified.
+"""
+import argparse
+import hashlib
+import json
+import os
+import sys
+from PIL import Image, ImageChops
+
+RIGHTS = '用户经 GPT 生成并提供；商用/再分发权未核实'
+BATCH = 'v2-batch-01'
+DROPBOX_FOLDER = '/Everwith_Claude_Frontend_Rebuild_2026-10-13/generated-assets/batch-01/'
+
+STAGE = 'LiveStage backdrop behind the Live2D canvas and the static portrait (character page, private chat, table rail, story rail, discover card)'
+# slot, chosen variant (None = single image), derivative name, (w, h), format, quality, used in
+SPEC = [
+    ('story-last-train-cover-tall', 'a', 'story-last-train-cover-tall.webp', (768, 1152), 'webp', 82, 'Discover story card (4:5), story preparation poster (3:4), Recent / continue / play-together thumbnails'),
+    ('story-last-train-cover-wide', 'a', 'story-last-train-cover-wide.webp', (1280, 853), 'webp', 82, 'Story detail hero (4:3)'),
+    ('story-last-train-scene-waiting-room', None, 'story-last-train-scene-waiting-room.webp', (1280, 853), 'webp', 80, 'Story play scene banner: opening and beat 1'),
+    ('story-last-train-scene-corner', None, 'story-last-train-scene-corner.webp', (1280, 853), 'webp', 80, 'Story play scene banner: beat 2'),
+    ('story-last-train-scene-duty-room', None, 'story-last-train-scene-duty-room.webp', (1280, 853), 'webp', 80, 'Story play scene banner: beat 3'),
+    ('story-last-train-scene-platform-dawn', None, 'story-last-train-scene-platform-dawn.webp', (1280, 853), 'webp', 80, 'Story play scene banner: open mode after the last beat'),
+    ('story-promise-rain-cover-tall', 'a', 'story-promise-rain-cover-tall.webp', (768, 1152), 'webp', 82, 'Discover story card (4:5), story preparation poster (3:4), Recent / continue / play-together thumbnails'),
+    ('story-promise-rain-cover-wide', 'a', 'story-promise-rain-cover-wide.webp', (1280, 853), 'webp', 82, 'Story detail hero (4:3)'),
+    ('story-promise-rain-scene-entrance-rain', None, 'story-promise-rain-scene-entrance-rain.webp', (1280, 853), 'webp', 80, 'Story play scene banner: opening and beat 1'),
+    ('story-promise-rain-scene-backstage', None, 'story-promise-rain-scene-backstage.webp', (1280, 853), 'webp', 80, 'Story play scene banner: beat 2'),
+    ('story-promise-rain-scene-office', None, 'story-promise-rain-scene-office.webp', (1280, 853), 'webp', 80, 'Story play scene banner: beat 3'),
+    ('story-promise-rain-scene-entrance-after-rain', None, 'story-promise-rain-scene-entrance-after-rain.webp', (1280, 853), 'webp', 80, 'Story play scene banner: beat 4'),
+    ('backdrop-lena', 'a', 'backdrop-lena.webp', (768, 1152), 'webp', 78, STAGE),
+    ('backdrop-arthur', 'a', 'backdrop-arthur.webp', (768, 1152), 'webp', 78, STAGE),
+    ('backdrop-marcus', 'a', 'backdrop-marcus.webp', (768, 1152), 'webp', 78, STAGE),
+    ('backdrop-nora', 'a', 'backdrop-nora.webp', (768, 1152), 'webp', 78, STAGE),
+    ('backdrop-iris', 'a', 'backdrop-iris.webp', (768, 1152), 'webp', 78, STAGE),
+    ('backdrop-generic', None, 'backdrop-generic.webp', (768, 1152), 'webp', 78, 'Stage backdrop for characters without their own (user-created work characters)'),
+    ('game-royale-cover', 'a', 'game-royale-cover.webp', (768, 1152), 'webp', 82, 'Game poster: Discover game card (1:1), game preparation (3:4), play-together and Recent thumbnails'),
+    ('game-splendor-cover', 'a', 'game-splendor-cover.webp', (768, 1152), 'webp', 82, 'Game poster: Discover game card (1:1), game preparation (3:4), play-together and Recent thumbnails'),
+    ('game-cabo-cover', 'a', 'game-cabo-cover.webp', (768, 1152), 'webp', 82, 'Game poster: Discover game card (1:1), game preparation (3:4), play-together and Recent thumbnails'),
+    ('empty-friends', None, 'empty-friends.webp', (480, 480), 'webp', 86, 'Friends: no friends yet'),
+    ('empty-recent', None, 'empty-recent.webp', (480, 480), 'webp', 86, 'Recent: nothing yet / nothing archived'),
+    ('empty-create', None, 'empty-create.webp', (480, 480), 'webp', 86, 'Create: no works yet'),
+    ('state-not-found', None, 'state-not-found.webp', (480, 480), 'webp', 86, 'Not found (route, character, story, run, game, friend, work)'),
+    ('state-load-error', None, 'state-load-error.webp', (480, 480), 'webp', 86, 'Load failure (distinct from “nothing here”)'),
+    ('state-signin', None, 'state-signin.webp', (480, 480), 'webp', 86, 'Sign-in needed (friends, chat) and the sign-in dialog'),
+    ('create-type-story', None, 'create-type-story.webp', (320, 320), 'webp', 86, 'New work dialog: story type'),
+    ('create-type-character', None, 'create-type-character.webp', (320, 320), 'webp', 86, 'New work dialog: character type'),
+    *[(f'work-cover-0{i}', None, f'work-cover-0{i}.webp', (600, 900), 'webp', 80, 'Work cover choice: work cards, editor, preview panel') for i in range(1, 7)],
+    *[(f'persona-avatar-0{i}', None, f'persona-avatar-0{i}.webp', (256, 256), 'webp', 85, 'Persona avatar choice: account page, navigation, own seat at tables') for i in range(1, 9)],
+    ('brand-emblem', 'a', 'brand-emblem.png', (128, 128), 'png', None, 'Navigation brand mark and the first-load screen'),
+    ('app-icon', 'a', 'favicon-64.png', (64, 64), 'favicon', None, 'Browser tab icon (corners outside the rounded square made transparent)'),
+    ('app-icon', 'a', 'apple-touch-icon.png', (180, 180), 'touch', None, 'Home-screen icon (corners filled with the tile colour)'),
+]
+
+
+def sha256(path):
+    h = hashlib.sha256()
+    with open(path, 'rb') as f:
+        for chunk in iter(lambda: f.read(1 << 20), b''):
+            h.update(chunk)
+    return h.hexdigest()
+
+
+def resize(im, size):
+    if im.mode == 'RGBA':  # resample with premultiplied alpha so edges keep their colour
+        return im.convert('RGBa').resize(size, Image.Resampling.LANCZOS).convert('RGBA')
+    return im.convert('RGB').resize(size, Image.Resampling.LANCZOS)
+
+
+def corner_alpha(im):
+    """Icon tile spans the full canvas; only the four corners outside its rounded square
+    are pure black. Alpha there follows brightness; elsewhere stays opaque."""
+    rgb = im.convert('RGB')
+    w, h = rgb.size
+    zone = max(8, round(w * 0.14))
+    r, g, b = rgb.split()
+    brightest = ImageChops.lighter(ImageChops.lighter(r, g), b)  # tile edge is dark brown (max channel ≈ 34), corners are 0
+    lum = brightest.point(lambda v: 255 if v >= 28 else round(v * 255 / 28))
+    alpha = Image.new('L', (w, h), 255)
+    for box in [(0, 0, zone, zone), (w - zone, 0, w, zone), (0, h - zone, zone, h), (w - zone, h - zone, w, h)]:
+        alpha.paste(lum.crop(box), box)
+    out = rgb.copy()
+    out.putalpha(alpha)
+    return out
+
+
+def main():
+    ap = argparse.ArgumentParser()
+    ap.add_argument('--from', dest='src', required=True, help='folder with the batch PNGs, manifest.json and SHA256SUMS.json')
+    root = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+    ap.add_argument('--out', default=os.path.join(root, 'public', 'generated', 'batch-01'))
+    ap.add_argument('--doc', default=os.path.join(root, 'docs', 'GENERATED_ASSETS.json'))
+    args = ap.parse_args()
+
+    sums = json.load(open(os.path.join(args.src, 'SHA256SUMS.json'), encoding='utf-8'))
+    manifest = json.load(open(os.path.join(args.src, 'manifest.json'), encoding='utf-8'))
+    records = {r['filename']: r for r in manifest['records']}
+    os.makedirs(args.out, exist_ok=True)
+
+    assets, problems = [], []
+    for slot, variant, name, size, fmt, quality, used in SPEC:
+        original = f'{slot}__{variant}.png' if variant else f'{slot}.png'
+        path = os.path.join(args.src, original)
+        rec = records.get(original)
+        if not os.path.exists(path) or rec is None:
+            problems.append(f'missing original {original}')
+            continue
+        digest = sha256(path)
+        if digest != sums.get(original) or digest != rec.get('sha256'):
+            problems.append(f'hash mismatch {original}')
+            continue
+        im = Image.open(path)
+        im.load()
+        dest = os.path.join(args.out, name)
+        if fmt == 'webp':
+            out = resize(im, size)
+            out.save(dest, 'WEBP', quality=quality, method=6, **({'exact': False} if out.mode == 'RGBA' else {}))
+            transform = f'Lanczos resize {im.size[0]}x{im.size[1]} -> {size[0]}x{size[1]}{" (premultiplied alpha)" if out.mode == "RGBA" else ""}; WebP q{quality} method 6'
+        elif fmt == 'png':
+            out = resize(im, size)
+            out.save(dest, 'PNG', optimize=True)
+            transform = f'Lanczos resize {im.size[0]}x{im.size[1]} -> {size[0]}x{size[1]} (premultiplied alpha); PNG'
+        elif fmt == 'favicon':
+            out = resize(corner_alpha(im), size)
+            out.save(dest, 'PNG', optimize=True)
+            transform = f'black corners outside the rounded square -> transparent; Lanczos resize -> {size[0]}x{size[1]} (premultiplied alpha); PNG'
+        else:  # touch icon: opaque square, corners filled with the tile's own edge colour
+            tile = Image.new('RGB', im.size, im.convert('RGB').getpixel((2, im.size[1] // 2)))
+            tile.paste(corner_alpha(im), (0, 0), corner_alpha(im))
+            out = tile.resize(size, Image.Resampling.LANCZOS)
+            out.save(dest, 'PNG', optimize=True)
+            transform = f'corners outside the rounded square filled with the tile edge colour; Lanczos resize -> {size[0]}x{size[1]}; PNG'
+        others = sorted(f for f in records if f.startswith(f'{slot}__') and f != original)
+        assets.append({
+            'slot': slot, 'chosen_variant': variant, 'used_in': used,
+            'original': {'file': original, 'dropbox_path': DROPBOX_FOLDER + original, 'sha256': digest, 'bytes': os.path.getsize(path),
+                         'dims': list(im.size), 'mode': im.mode, 'generated_at_utc': rec.get('generated_at_utc'), 'tool': rec.get('tool'),
+                         'model': rec.get('model'), 'source': rec.get('source'), 'qa_status': rec.get('qa_status'),
+                         'reference_images': rec.get('reference_images') or [], 'prompt': rec.get('prompt'), 'actual_prompt': rec.get('actual_prompt')},
+            'derivative': {'path': f'public/generated/batch-01/{name}', 'url': f'/generated/batch-01/{name}', 'sha256': sha256(dest),
+                           'bytes': os.path.getsize(dest), 'dims': list(out.size), 'mode': out.mode, 'transform': transform},
+            'unused_candidates': others,
+        })
+    if problems:
+        print('\n'.join(problems), file=sys.stderr)
+        sys.exit(1)
+    doc = {
+        'schema': 'everwith-generated-assets-v1', 'batch': BATCH, 'rights': RIGHTS,
+        'note': 'User-provided GPT output. Not part of the original handoff package; commercial use and redistribution are unverified. Only resized here (see transform).',
+        'source': {'dropbox_folder': DROPBOX_FOLDER, 'manifest_sha256': sha256(os.path.join(args.src, 'manifest.json')),
+                   'sha256sums_sha256': sha256(os.path.join(args.src, 'SHA256SUMS.json')), 'slots': manifest.get('requested_slots'), 'images': manifest.get('requested_images')},
+        'derived_with': {'pillow': Image.__version__},
+        'assets': assets,
+    }
+    with open(args.doc, 'w', encoding='utf-8') as f:
+        json.dump(doc, f, ensure_ascii=False, indent=1)
+        f.write('\n')
+    total = sum(a['derivative']['bytes'] for a in assets)
+    print(json.dumps({'derivatives': len(assets), 'bytes': total, 'out': os.path.relpath(args.out, root)}))
+
+
+if __name__ == '__main__':
+    main()
diff --git a/everwith-claude-frontend/scripts/sync-assets.mjs b/everwith-claude-frontend/scripts/sync-assets.mjs
new file mode 100644
index 00000000..7d3d32f5
--- /dev/null
+++ b/everwith-claude-frontend/scripts/sync-assets.mjs
@@ -0,0 +1,169 @@
+#!/usr/bin/env node
+// Copies the selected, unmodified handoff files into this project and verifies
+// every byte against the package's own verification/SHA256SUMS.txt.
+//
+//   npm run assets:sync -- --from /path/to/Everwith_Claude_Frontend_Handoff_2026-10-13
+//   npm run assets:check            (re-hash what was copied; no copying)
+//
+// Nothing is downloaded, generated or re-encoded. Missing files are recorded
+// and the app degrades to static images / text / explicit "unavailable".
+import {createHash} from 'node:crypto';
+import {existsSync, mkdirSync, readFileSync, readdirSync, statSync, writeFileSync, copyFileSync} from 'node:fs';
+import {dirname, join, relative, resolve, sep} from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const args = process.argv.slice(2);
+const checkOnly = args.includes('--check');
+const fromIndex = args.indexOf('--from');
+const from = fromIndex >= 0 ? args[fromIndex + 1] : process.env.EVERWITH_HANDOFF_DIR;
+const PUBLIC_ROOT = join(root, 'public', 'handoff');
+const VENDOR_ROOT = join(root, 'src', 'vendor', 'cubism-framework');
+const LOCK = join(PUBLIC_ROOT, 'ASSET_LOCK.json');
+
+/** Destination policy: browser-served files go to public/handoff/<same rel path>;
+ * Cubism Framework TypeScript goes to src/vendor (compiled by Vite, never served raw). */
+function destinationFor(rel) {
+  if (rel.startsWith('assets/runtime/cubism/Framework/src/')) return join(VENDOR_ROOT, 'src', rel.slice('assets/runtime/cubism/Framework/src/'.length));
+  if (rel === 'assets/runtime/cubism/Framework/LICENSE.md') return join(VENDOR_ROOT, 'LICENSE.md');
+  return join(PUBLIC_ROOT, rel);
+}
+
+// Selected subset. Prefix entries (ending in '/') take every listed file below them.
+const SELECTION = [
+  // Cubism runtime subset (Core, Framework source, WebGL shaders, original notices)
+  'assets/runtime/cubism/',
+  // Five frozen Live2D runtimes with every file their model3 references
+  'assets/live2d/',
+  // Discovery / portrait / scene imagery and existing home preview clips
+  'assets/companions/feed/',
+  'assets/companions/portraits/',
+  'assets/companions/scenes/',
+  'assets/companions/game-previews/v1/',
+  // Royale: casino scene atlas used by the frozen board, banknote ornament, provenance
+  'assets/games/royale/generated/casino-scene-atlas-r7.png',
+  'assets/games/royale/generated/fictional-game-token-ornament-20261004.png',
+  'assets/games/royale/generated/PROVENANCE.json',
+  // Splendor: active art-catalog indices (6,7,11..19), tier backs, gem finishes, salon
+  'assets/games/splendor/nobles-a.jpg',
+  'assets/games/splendor/nobles-b.jpg',
+  'assets/games/splendor/renaissance-tier1-20261007.png',
+  'assets/games/splendor/renaissance-tier2-20261007.png',
+  'assets/games/splendor/renaissance-tier3-20261007.png',
+  'assets/games/splendor/renaissance-tier2-warehouse-round3-20261007.png',
+  'assets/games/splendor/renaissance-tier2-ledger-round3-20261007.png',
+  'assets/games/splendor/renaissance-tier2-caravan-round3-20261007.png',
+  'assets/games/splendor/renaissance-tier3-cathedral-round4-20261007.png',
+  'assets/games/splendor/renaissance-tier3-harbor-round4-20261007.png',
+  'assets/games/splendor/teal-velour-calm-round4-20261007.png',
+  'assets/games/splendor/tier-back-1-20261005.png',
+  'assets/games/splendor/tier-back-2-20261005.png',
+  'assets/games/splendor/tier-back-3-20261005.png',
+  'assets/games/splendor/tier-backs-provenance-20261005.json',
+  'assets/games/splendor/gem-diamond-finish-round4-20261007.png',
+  'assets/games/splendor/gem-sapphire-finish-round4-20261007.png',
+  'assets/games/splendor/gem-gold-finish-round4-20261007.png',
+  'assets/games/splendor/gem-emerald-polish-round4-20261007.png',
+  'assets/games/splendor/gem-ruby-polish-round4-20261007.png',
+  'assets/games/splendor/gem-onyx-polish-round4-20261007.png',
+  'assets/games/splendor/backgrounds/salon.png',
+  // CABO: default illustration-print/1 catalogue (manifest.json) + zones + felt
+  'assets/games/cabo/card-rank-art/manifest.json',
+  'assets/games/cabo/card-rank-art/illustration-print-1-zones.json',
+  'assets/games/cabo/embedded-surface-1.webp',
+  'assets/games/cabo/card-illustration/provenance.json',
+  // Frozen pins used at runtime for identity checks
+  'verification/MODEL_PINS.json',
+];
+
+function sha256(file) { return createHash('sha256').update(readFileSync(file)).digest('hex'); }
+function walk(dir) {
+  const out = [];
+  for (const name of readdirSync(dir)) {
+    const full = join(dir, name);
+    if (statSync(full).isDirectory()) out.push(...walk(full)); else out.push(full);
+  }
+  return out;
+}
+function rightsIndex(base) {
+  const file = join(base, 'verification', 'ASSET_MANIFEST.json');
+  if (!existsSync(file)) return new Map();
+  const rows = JSON.parse(readFileSync(file, 'utf8'));
+  return new Map(rows.map(row => [row.path, {rights: row.rights, status: row.status, source_commit: row.source_commit}]));
+}
+
+if (checkOnly) {
+  if (!existsSync(LOCK)) { console.error('No ASSET_LOCK.json. Run: npm run assets:sync -- --from <handoff dir>'); process.exit(2); }
+  const lock = JSON.parse(readFileSync(LOCK, 'utf8'));
+  let bad = 0;
+  for (const item of lock.files) {
+    const dest = join(root, item.dest);
+    if (!existsSync(dest)) { console.error(`MISSING ${item.dest}`); bad++; continue; }
+    if (sha256(dest) !== item.sha256) { console.error(`HASH MISMATCH ${item.dest}`); bad++; }
+  }
+  console.log(JSON.stringify({checked: lock.files.length, problems: bad, missingAtSync: lock.missing.length}, null, 2));
+  process.exit(bad ? 1 : 0);
+}
+
+if (!from) {
+  console.error('Usage: npm run assets:sync -- --from /path/to/Everwith_Claude_Frontend_Handoff_2026-10-13');
+  process.exit(2);
+}
+const base = resolve(from);
+const sums = join(base, 'verification', 'SHA256SUMS.txt');
+if (!existsSync(sums)) { console.error(`Not a handoff package (missing verification/SHA256SUMS.txt): ${base}`); process.exit(2); }
+const expected = new Map(readFileSync(sums, 'utf8').split('\n').filter(Boolean).map(line => {
+  const [hash, ...rest] = line.split('  ');
+  return [rest.join('  ').trim(), hash.trim()];
+}));
+const rights = rightsIndex(base);
+
+const wanted = new Set();
+// CABO rank art: exactly the 14 ranks + back named by the default catalogue.
+const caboManifest = join(base, 'assets', 'games', 'cabo', 'card-rank-art', 'manifest.json');
+if (existsSync(caboManifest)) {
+  const m = JSON.parse(readFileSync(caboManifest, 'utf8'));
+  for (const entry of [...(m.ranks ?? []), m.back].filter(Boolean)) {
+    const name = entry.asset?.path?.split('/').pop();
+    if (name) wanted.add(`assets/games/cabo/card-rank-art/${name}`);
+  }
+}
+for (const entry of SELECTION) {
+  if (entry.endsWith('/')) {
+    for (const rel of expected.keys()) if (rel.startsWith(entry)) wanted.add(rel);
+    // Files present on disk but absent from the sums list are not trusted.
+  } else wanted.add(entry);
+}
+
+const files = [], missing = [], mismatched = [];
+for (const rel of [...wanted].sort()) {
+  const source = join(base, ...rel.split('/'));
+  const want = expected.get(rel);
+  if (!want) { missing.push({rel, reason: 'not listed in SHA256SUMS'}); continue; }
+  if (!existsSync(source)) { missing.push({rel, reason: 'absent in handoff copy'}); continue; }
+  const got = sha256(source);
+  if (got !== want) { mismatched.push(rel); continue; }
+  const dest = destinationFor(rel);
+  mkdirSync(dirname(dest), {recursive: true});
+  copyFileSync(source, dest);
+  if (sha256(dest) !== want) { mismatched.push(rel); continue; }
+  const r = rights.get(rel);
+  files.push({rel, dest: relative(root, dest).split(sep).join('/'), bytes: statSync(dest).size, sha256: want,
+    rights: r?.rights ?? (rel.startsWith('verification/') ? 'handoff verification metadata' : 'see handoff 08_ASSETS_AND_RIGHTS.md'),
+    status: r?.status ?? null});
+}
+
+mkdirSync(PUBLIC_ROOT, {recursive: true});
+const lock = {
+  schema: 'everwith-claude-asset-lock-v1',
+  source_package: 'Everwith_Claude_Frontend_Handoff_2026-10-13',
+  copied_at_utc: new Date().toISOString(),
+  policy: 'byte-identical copies verified against the package SHA256SUMS; no resize/re-encode; private user-authorized handoff; commercial/redistribution rights unverified',
+  files, missing, mismatched,
+};
+writeFileSync(LOCK, JSON.stringify(lock, null, 2));
+// Small browser-side availability index (paths only, no hashes needed at runtime).
+writeFileSync(join(PUBLIC_ROOT, 'available.json'), JSON.stringify({files: files.filter(f => f.dest.startsWith('public/')).map(f => f.rel)}, null, 0));
+console.log(JSON.stringify({copied: files.length, bytes: files.reduce((n, f) => n + f.bytes, 0), missing: missing.length, mismatched: mismatched.length}, null, 2));
+if (missing.length) console.log('Missing (app will degrade):', missing.map(m => m.rel).join(', '));
+if (mismatched.length) { console.error('Hash mismatch, not copied:', mismatched.join(', ')); process.exit(1); }
diff --git a/everwith-claude-frontend/src/api/adapter.ts b/everwith-claude-frontend/src/api/adapter.ts
new file mode 100644
index 00000000..c6f5f76b
--- /dev/null
+++ b/everwith-claude-frontend/src/api/adapter.ts
@@ -0,0 +1,29 @@
+/**
+ * Adapter seam. Default: in-process LOCAL MOCK (no network). `VITE_EVERWITH_ADAPTER=real`
+ * selects network transport, and even then nothing is requested unless
+ * `VITE_EVERWITH_ALLOW_NETWORK=1` is also set — there is no silent real→mock fallback.
+ */
+import {createClient} from './client'
+import type {Fetcher} from './client'
+import {mockFetch} from '../mock/server'
+import {CompanionRequestError} from '../contracts/companion'
+
+export const ADAPTER_MODE: 'mock' | 'real' = import.meta.env.VITE_EVERWITH_ADAPTER === 'real' ? 'real' : 'mock'
+
+/** Concrete gaps before a real adapter can be enabled (also listed in README). */
+export const REAL_ADAPTER_GAPS: {area: string; gap: string}[] = [
+  {area: 'account', gap: 'Real /account shape has no `guest_id`/`mode`; guest-merge endpoint and CSRF bootstrap (/request-protection) must be confirmed against the Pydantic contract.'},
+  {area: 'catalog', gap: '/discover (paged, typed search), /stories, /games and /characters/{id}?version are candidates; only /characters is in ENDPOINTS.json.'},
+  {area: 'friends', gap: 'rename/reset/remove commands and `origin` (story F2 / game F7 binding) are candidates; server must bind source version + epoch atomically.'},
+  {area: 'private chat', gap: 'POST …/operations must return {operation, admission}; GET …/operations/{id}/receipt and …/public-stream?run_epoch are candidates from the stream design, not verified endpoints.'},
+  {area: 'stories', gap: 'All /story-sessions endpoints are new candidates; real narrator (Luna) and atomic turn validation are not connected.'},
+  {area: 'games', gap: '/game-sessions act/advance/hold/abandon/rematch shapes are candidates; JEV decision seam is not connected (fixed-strategy NPC only).'},
+  {area: 'creation', gap: '/works, /previews and assist endpoints are candidates; no AI model is called.'},
+  {area: 'voice', gap: 'No TTS/viseme service; lip-sync only follows the local demo audio track.'},
+]
+
+const blockedFetch: Fetcher = async () => { throw new CompanionRequestError('real_adapter_not_enabled') }
+const networkAllowed = import.meta.env.VITE_EVERWITH_ALLOW_NETWORK === '1'
+export const api = ADAPTER_MODE === 'real'
+  ? createClient(networkAllowed ? window.fetch.bind(window) : blockedFetch, import.meta.env.VITE_EVERWITH_API_BASE ?? '')
+  : createClient(mockFetch)
diff --git a/everwith-claude-frontend/src/api/client.ts b/everwith-claude-frontend/src/api/client.ts
new file mode 100644
index 00000000..10a2701b
--- /dev/null
+++ b/everwith-claude-frontend/src/api/client.ts
@@ -0,0 +1,171 @@
+/**
+ * One typed client over a fetch-compatible transport. The mock adapter passes an
+ * in-process fetch; a real adapter would pass `window.fetch` with a base URL. All
+ * responses go through the ported contract parsers either way.
+ */
+import {CompanionRequestError, parseAccount, parseCharacter, parseCharacters, parseFriend, parseFriends} from '../contracts/companion'
+import {parsePrivateOperation, parsePrivateSnapshot} from '../contracts/private-chat-client'
+import type {PrivateSnapshot} from '../contracts/private-chat-client'
+import {parsePublicAdmission} from '../contracts/public-events'
+import type {PublicAdmission} from '../contracts/public-events'
+import type {Lang} from '../lib/util'
+import type {DiscoverPage, GameJSON, GameViewJSON, PreviewJSON, RecordJSON, StoryJSON, StorySessionJSON, TableMessageJSON, WorkJSON} from './types'
+
+export type Fetcher = (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>
+
+function assertGameView(value: unknown): GameViewJSON {
+  const v = value as GameViewJSON
+  if (!v || v.schema_version !== 'everwith-game-view-v1' || !Array.isArray(v.seats) || typeof v.revision !== 'number') throw new CompanionRequestError('game_response_invalid')
+  const pv = v.player_view as Record<string, unknown>
+  // Defence in depth: a player projection must never carry authority-only fields.
+  for (const key of ['truth', 'rng', 'up', 'seed', 'lastAction']) if (pv && key in pv) throw new CompanionRequestError('game_private_view_invalid')
+  if (v.game_id === 'cabo' && (pv.observer !== 0 || (pv.deck as unknown[]).some(x => x !== null))) throw new CompanionRequestError('game_private_view_invalid')
+  if (v.game_id === 'gems' && Object.values(pv.decks as Record<string, unknown>).some(x => typeof x !== 'number')) throw new CompanionRequestError('game_private_view_invalid')
+  if (v.game_id === 'vegas' && 'deck' in pv) throw new CompanionRequestError('game_private_view_invalid')
+  if (v.seats[0]?.kind !== 'player' || v.seats.slice(1).some(s => s.kind === 'player') || new Set(v.seats.map(s => s.identity)).size !== v.seats.length) throw new CompanionRequestError('game_identity_invalid')
+  return v
+}
+function assertStory(value: unknown): StorySessionJSON {
+  const v = value as StorySessionJSON
+  if (!v || v.schema_version !== 'everwith-story-session-v1' || !Array.isArray(v.turns) || !Array.isArray(v.cast)) throw new CompanionRequestError('invalid_response')
+  if (v.cast.filter(c => c.friend_id).length !== new Set(v.cast.filter(c => c.friend_id).map(c => c.friend_id)).size) throw new CompanionRequestError('invalid_response')
+  return v
+}
+
+export function createClient(fetcher: Fetcher, base = '') {
+  async function request<T = unknown>(path: string, body?: unknown, method?: string, signal?: AbortSignal): Promise<T> {
+    let response: Response
+    try {
+      response = await fetcher(`${base}/api/companions${path}`, {
+        method: method ?? (body === undefined ? 'GET' : 'POST'), credentials: 'include', cache: 'no-store', signal,
+        headers: body === undefined ? {} : {'Content-Type': 'application/json', 'X-Tiny-Stories-Request': '1'},
+        body: body === undefined ? undefined : JSON.stringify(body),
+      })
+    } catch (error) {
+      if (error instanceof DOMException && error.name === 'AbortError') throw error
+      throw new CompanionRequestError('network_error')
+    }
+    const data: unknown = await response.json().catch(() => null)
+    if (!response.ok) {
+      const raw = data && typeof data === 'object' && 'error' in data ? (data as {error: {code?: unknown; detail?: unknown}}).error : null
+      const code = raw && typeof raw.code === 'string' && /^[a-z_]{1,64}$/.test(raw.code) ? raw.code : 'unavailable'
+      throw new CompanionRequestError(code, response.status, raw && raw.detail && typeof raw.detail === 'object' ? raw.detail as Record<string, unknown> : null)
+    }
+    return data as T
+  }
+  const q = (params: Record<string, string | number | undefined>) => {
+    const s = new URLSearchParams()
+    for (const [k, v] of Object.entries(params)) if (v !== undefined && v !== '') s.set(k, String(v))
+    const t = s.toString(); return t ? `?${t}` : ''
+  }
+  type Command = {key: string; text: string; language: Lang; presented_turn_id: string; expected_revision: number}
+  const parseStart = (raw: unknown) => {
+    const row = raw as {operation: unknown; admission: unknown}
+    return {operation: parsePrivateOperation(row.operation), admission: parsePublicAdmission(row.admission)}
+  }
+  return {
+    request,
+    account: {
+      get: async () => parseAccount(await request('/account')),
+      login: async (email: string, password: string) => parseAccount(await request('/account/login', {email, password})),
+      register: async (email: string, password: string) => parseAccount(await request('/account/register', {email, password})),
+      logout: async () => parseAccount(await request('/account/logout', {})),
+      /** avatar: undefined keeps the current picture, null removes it. */
+      persona: async (name: string, bio: string, avatar?: string | null) => parseAccount(await request('/account/persona', avatar === undefined ? {name, bio} : {name, bio, avatar}, 'PUT')),
+    },
+    catalog: {
+      discover: (params: {type: string; q: string; offset: number; limit?: number}, signal?: AbortSignal) => request<DiscoverPage>(`/discover${q({type: params.type, q: params.q, offset: params.offset, limit: params.limit ?? 8})}`, undefined, undefined, signal),
+      characters: async () => parseCharacters(await request('/characters')),
+      character: async (id: string, version: string) => parseCharacter(await request(`/characters/${encodeURIComponent(id)}${q({version})}`)),
+      story: (id: string, version?: string) => request<StoryJSON>(`/stories/${encodeURIComponent(id)}${q({version})}`),
+      stories: () => request<{items: StoryJSON[]}>('/stories'),
+      games: () => request<{items: GameJSON[]}>('/games'),
+    },
+    friends: {
+      list: async (accountId: string, query = '') => parseFriends(await request(`/friends${q({limit: 50, offset: 0, q: query, expected_account_id: accountId})}`), accountId),
+      get: async (id: string) => parseFriend(await request(`/friends/${encodeURIComponent(id)}`)),
+      add: async (input: {key: string; source_id: string; source_version: string; name: string; expected_account_id: string; origin?: Record<string, unknown>}) => parseFriend(await request('/friends', input)),
+      rename: async (id: string, epoch: number, name: string, accountId: string) => request<{friend: unknown}>(`/friends/${encodeURIComponent(id)}/rename`, {expected_epoch: epoch, name, expected_account_id: accountId}).then(r => parseFriend(r.friend)),
+      reset: async (id: string, epoch: number, accountId: string) => request<{friend: unknown}>(`/friends/${encodeURIComponent(id)}/reset`, {expected_epoch: epoch, expected_account_id: accountId}).then(r => parseFriend(r.friend)),
+      remove: (id: string, epoch: number, accountId: string) => request(`/friends/${encodeURIComponent(id)}/remove`, {expected_epoch: epoch, expected_account_id: accountId}),
+      conversations: (id: string) => request<{items: {id: string; friend_epoch: number; status: string; turns: number; updated_at: string}[]}>(`/friends/${encodeURIComponent(id)}/conversations`),
+    },
+    chat: {
+      open: async (friendId: string, epoch: number, accountId: string, key: string, language: Lang) => parsePrivateSnapshot(await request(`/friends/${encodeURIComponent(friendId)}/conversation`, {key, expected_account_id: accountId, expected_friend_epoch: epoch, language}), friendId, epoch),
+      read: async (conversationId: string, friendId: string, epoch: number): Promise<PrivateSnapshot> => {
+        const snapshot = parsePrivateSnapshot(await request(`/conversations/${encodeURIComponent(conversationId)}`), friendId, epoch)
+        if (snapshot.conversation.id !== conversationId) throw new CompanionRequestError('invalid_response')
+        return snapshot
+      },
+      send: async (conversationId: string, command: Command, accountId: string, epoch: number, signal?: AbortSignal) =>
+        parseStart(await request(`/conversations/${encodeURIComponent(conversationId)}/operations`, {...command, expected_account_id: accountId, expected_friend_epoch: epoch}, 'POST', signal)),
+      stream: async (admission: PublicAdmission, signal: AbortSignal) => {
+        try { return await fetcher(`${base}/api/companions/operations/${encodeURIComponent(admission.operation_id)}/public-stream?run_epoch=${admission.run_epoch}`, {credentials: 'include', cache: 'no-store', signal}) }
+        catch (error) { if (error instanceof DOMException && error.name === 'AbortError') throw error; throw new CompanionRequestError('network_error') }
+      },
+      receipt: async (operationId: string) => {
+        const row = await request<{owner_id: string; operation: unknown; snapshot: unknown; admission: unknown}>(`/operations/${encodeURIComponent(operationId)}/receipt`)
+        return {owner_id: row.owner_id, operation: row.operation, snapshot: row.snapshot, admission: row.admission ? parsePublicAdmission(row.admission) : null}
+      },
+      lookup: async (conversationId: string, key: string) => {
+        const row = await request<{operation: unknown; admission: unknown; text: string}>(`/conversations/${encodeURIComponent(conversationId)}/operations/lookup${q({key})}`)
+        return {operation: parsePrivateOperation(row.operation), admission: row.admission ? parsePublicAdmission(row.admission) : null, text: row.text}
+      },
+      retry: async (operationId: string, accountId: string, epoch: number) => parseStart(await request(`/operations/${encodeURIComponent(operationId)}/retry`, {expected_account_id: accountId, expected_friend_epoch: epoch})),
+      cancel: async (operationId: string, accountId: string, epoch: number) => parsePrivateOperation(await request(`/operations/${encodeURIComponent(operationId)}/cancel`, {expected_account_id: accountId, expected_friend_epoch: epoch})),
+      rollback: async (conversationId: string, turnId: string, revision: number, friendId: string, epoch: number, language: Lang) => {
+        const row = await request<{snapshot: unknown; restored_draft: string}>(`/conversations/${encodeURIComponent(conversationId)}/rollback`, {turn_id: turnId, expected_revision: revision, language})
+        return {snapshot: parsePrivateSnapshot(row.snapshot, friendId, epoch), restored: row.restored_draft}
+      },
+      correction: async (conversationId: string, key: string, text: string, turnId: string | null, friendId: string, epoch: number, language: Lang) => {
+        const row = await request<{snapshot: unknown}>(`/conversations/${encodeURIComponent(conversationId)}/corrections`, {key, text, turn_id: turnId, language})
+        return parsePrivateSnapshot(row.snapshot, friendId, epoch)
+      },
+    },
+    stories: {
+      start: async (body: {key: string; story_id: string; version: string; cast: {role_id: string; friend_id: string; friend_epoch: number}[]; language: Lang; expected_account_id: string}) => assertStory(await request('/story-sessions', body)),
+      get: async (id: string) => assertStory(await request(`/story-sessions/${encodeURIComponent(id)}`)),
+      turn: async (id: string, body: {key: string; kind: 'input' | 'continue'; text?: string; language: Lang; expected_revision: number}) => {
+        const row = await request<{operation: {operation_id: string; status: string}; session: unknown}>(`/story-sessions/${encodeURIComponent(id)}/turns`, body)
+        return {operation: row.operation, session: assertStory(row.session)}
+      },
+      control: async (id: string, op: string, action: 'cancel' | 'retry') => {
+        const row = await request<{operation: {operation_id: string; status: string}; session: unknown; restored_input?: string | null}>(`/story-sessions/${encodeURIComponent(id)}/operations/${encodeURIComponent(op)}/${action}`, {})
+        return {operation: row.operation, session: assertStory(row.session), restored: row.restored_input ?? null}
+      },
+      rollback: async (id: string, turnId: string, revision: number) => {
+        const row = await request<{session: unknown; restored_draft: string}>(`/story-sessions/${encodeURIComponent(id)}/rollback`, {turn_id: turnId, expected_revision: revision})
+        return {session: assertStory(row.session), restored: row.restored_draft}
+      },
+    },
+    games: {
+      start: async (body: Record<string, unknown>) => assertGameView(await request('/game-sessions', body)),
+      lookup: async (key: string) => assertGameView(await request(`/game-sessions/lookup${q({key})}`)),
+      get: async (id: string) => assertGameView(await request(`/game-sessions/${encodeURIComponent(id)}`)),
+      list: async () => (await request<{items: unknown[]}>('/game-sessions')).items.map(assertGameView),
+      act: async (id: string, key: string, action: unknown, revision: number) => assertGameView(await request(`/game-sessions/${encodeURIComponent(id)}/act`, {key, action, expected_revision: revision})),
+      advance: async (id: string, key: string, revision: number, language: Lang) => assertGameView(await request(`/game-sessions/${encodeURIComponent(id)}/advance`, {key, expected_revision: revision, language})),
+      hold: async (id: string, hold: boolean) => assertGameView(await request(`/game-sessions/${encodeURIComponent(id)}/hold`, {hold})),
+      abandon: async (id: string, revision: number) => assertGameView(await request(`/game-sessions/${encodeURIComponent(id)}/abandon`, {expected_revision: revision})),
+      rematch: async (id: string, key: string) => assertGameView(await request(`/game-sessions/${encodeURIComponent(id)}/rematch`, {key})),
+      messages: (id: string) => request<{items: TableMessageJSON[]}>(`/game-sessions/${encodeURIComponent(id)}/table-chat`),
+      say: (id: string, key: string, text: string, language: Lang) => request<{items: TableMessageJSON[]; reply_failed: boolean}>(`/game-sessions/${encodeURIComponent(id)}/table-chat`, {key, text, language}),
+    },
+    records: {
+      list: (archived: boolean) => request<{items: RecordJSON[]}>(`/records${q({archived: archived ? 1 : 0})}`),
+      mutate: (kind: 'story' | 'game', id: string, action: 'archive' | 'restore' | 'delete') => request(`/records/${kind}/${encodeURIComponent(id)}/${action}`, {}),
+    },
+    works: {
+      list: () => request<{items: WorkJSON[]}>('/works'),
+      create: (key: string, type: 'story' | 'character', name: string) => request<WorkJSON>('/works', {key, type, name}),
+      get: (id: string) => request<WorkJSON>(`/works/${encodeURIComponent(id)}`),
+      putDraft: (id: string, draft: Record<string, unknown>, base: number) => request<WorkJSON>(`/works/${encodeURIComponent(id)}/draft`, {draft, base_revision: base}, 'PUT'),
+      save: (id: string, draftRevision: number) => request<WorkJSON>(`/works/${encodeURIComponent(id)}/save`, {draft_revision: draftRevision}),
+      share: (id: string, enabled: boolean, version: number | null) => request<WorkJSON>(`/works/${encodeURIComponent(id)}/share`, {enabled, version}),
+      assist: (id: string, instruction: string, draft: Record<string, unknown>, language: Lang) => request<{draft: Record<string, unknown>; summary: string[]; mode: string}>(`/works/${encodeURIComponent(id)}/assist`, {instruction, draft, language}),
+      preview: (workId: string, draftRevision: number, language: Lang) => request<PreviewJSON>('/previews', {work_id: workId, draft_revision: draftRevision, language}),
+      previewTurn: (id: string, key: string, text: string, language: Lang) => request<PreviewJSON>(`/previews/${encodeURIComponent(id)}/turns`, {key, text, language}),
+    },
+  }
+}
+export type EverwithClient = ReturnType<typeof createClient>
diff --git a/everwith-claude-frontend/src/api/types.ts b/everwith-claude-frontend/src/api/types.ts
new file mode 100644
index 00000000..97368b0a
--- /dev/null
+++ b/everwith-claude-frontend/src/api/types.ts
@@ -0,0 +1,46 @@
+import type {L10n, Lang} from '../lib/util'
+
+export type DiscoverItem =
+  | ({kind: 'character'} & CharacterJSON)
+  | ({kind: 'story'} & StoryJSON)
+  | ({kind: 'game'} & GameJSON)
+export type CharacterJSON = {id: string; version: string; name: string; avatar: string | null; feed: string | null; description: L10n; tagline: L10n; traits: L10n[]; origin: 'official' | 'mine'; voice: string; live2d: Live2DKey | null}
+export type Live2DKey = 'arthur' | 'lena' | 'marcus' | 'nora' | 'iris'
+export type StoryRoleJSON = {id: string; title: L10n; description: L10n; replaceable: boolean; locked: boolean; default_character: CharacterJSON}
+export type StoryJSON = {id: string; version: string; title: L10n; description: L10n; genre: L10n; content_note: L10n; image: string | null; image_wide: string | null; player_role: L10n; player_entry: 'script'; objectives: L10n[]; roles: StoryRoleJSON[]}
+export type GameJSON = {id: 'vegas' | 'gems' | 'cabo'; slug: 'royale' | 'splendor' | 'cabo'; name: string; description: L10n; players: number[]; default_players: number; profile: string; profile_label: L10n; poster: string; preview: string; rule_notes: L10n[]}
+export type DiscoverPage = {items: DiscoverItem[]; total: number; next_offset: number | null}
+
+export type StoryCastJSON = {role_id: string; role_title: L10n; kind: 'npc' | 'friend'; character_id: string; character_name: string; friend_id: string | null; friend_epoch: number | null; name: string; avatar: string | null; live2d: Live2DKey | null; replaceable: boolean}
+export type StorySegmentJSON = {segment_id: string; kind: 'narration' | 'dialogue' | 'action'; role_id: string | null; text: string}
+export type StoryTurnJSON = {turn_id: string; kind: 'opening' | 'input' | 'continue'; input: string | null; input_availability: 'available' | 'withdrawn'; language: Lang; created_at: string; delta: {minutes: number; clue: L10n | null; objective: number | null}; segments: StorySegmentJSON[]}
+export type StorySessionJSON = {
+  schema_version: 'everwith-story-session-v1'; narration_mode: 'local_scripted_mock'; id: string; story_id: string; version: string; title: L10n; player_role: L10n
+  status: 'active' | 'read_only'; archived: boolean; revision: number; head_turn_id: string | null; created_at: string; updated_at: string; language: Lang
+  cast: StoryCastJSON[]; turns: StoryTurnJSON[]
+  state: {objectives: {text: L10n; done: boolean; current: boolean}[]; clues: {id: string; label: L10n}[]; minutes: number; scene: string; scene_image: string | null; scene_position: string | null; scene_label: L10n | null; present: string[]; hint: L10n | null; open_mode: boolean}
+  pending: {operation_id: string; kind: 'input' | 'continue'; text: string | null; status: string} | null
+}
+
+export type SeatJSON = {seat: number; kind: 'player' | 'friend' | 'temporary'; identity: string; friend_epoch: number | null; name: string; source_id: string | null; source_version: string | null; avatar: string | null; live2d: Live2DKey | null}
+export type GameViewJSON = {
+  schema_version: 'everwith-game-view-v1'; mode: 'rule_simulated_companions'; id: string; game_id: 'vegas' | 'gems' | 'cabo'; profile: string
+  seats: SeatJSON[]; lifecycle: 'active' | 'paused' | 'ended' | 'abandoned'; revision: number; ai_hold: boolean; actor_seat: number | 'any'; phase: string
+  player_view: unknown; settlement: null | {id: string; committed_revision: number; scores: number[]; winners: number[]; labels: L10n[]}
+  origin: {kind: 'discover' | 'friend' | 'private'; friend_id?: string; conversation_id?: string; return_hash: string}
+  created_at: string; updated_at: string; rematch_of: string | null; archived: boolean
+  log: {revision: number; seat: number; summary: L10n; kind: string}[]; expressions: Record<number, 'neutral' | 'happy' | 'surprised'>; chat_count: number
+}
+export type TableMessageJSON = {id: string; seat: number; text: string; audience: 'table'; mode: 'player' | 'simulated_rule_reply'; kind?: 'dialogue' | 'narration'; language?: Lang}
+
+export type RecordJSON = {
+  kind: 'story' | 'game'; id: string; work_id: string; version: string; title: L10n; status: string; image: string | null
+  lineup: {role: L10n | null; name: string; friend: boolean; temporary?: boolean}[]; created_at: string; updated_at: string; archived: boolean
+  turns?: number; revision?: number; rematch_of?: string | null; result?: {scores: number[]; winners: number[]} | null
+}
+export type WorkJSON = {
+  id: string; type: 'story' | 'character'; name: string; created_at: string; updated_at: string; draft: Record<string, unknown>; draft_revision: number
+  versions: {version: number; saved_at: string}[]; latest_version: number | null; dirty: boolean; errors: {field: string; code: string}[]
+  share: {enabled: boolean; version: number | null}; owner_kind: 'account' | 'guest'; saved_version?: number; unchanged?: boolean
+}
+export type PreviewJSON = {id: string; work_id: string; draft_revision: number; snapshot: Record<string, unknown>; turns: {id: string; role: 'player' | 'character'; text: string; language: Lang}[]; created_at: string}
diff --git a/everwith-claude-frontend/src/app/App.tsx b/everwith-claude-frontend/src/app/App.tsx
new file mode 100644
index 00000000..1b289ed2
--- /dev/null
+++ b/everwith-claude-frontend/src/app/App.tsx
@@ -0,0 +1,139 @@
+import {useSyncExternalStore, lazy, Suspense, useEffect, useMemo, useState} from 'react'
+import {Compass, History, PenLine, Users, UserCircle2, PanelLeftClose, PanelLeftOpen, Languages, FlaskConical} from 'lucide-react'
+import {LangContext, makeT} from './i18n'
+import {appStore, loadAccount, setLang, setNavCollapsed, useApp} from './store'
+import {href, navigate, useRoute} from './router'
+import type {Route} from './router'
+import {AuthDialog} from '../features/account/AuthDialog'
+import {MockPanel, OPEN_MOCK_PANEL} from '../features/mock/MockPanel'
+import {scenarios} from '../mock/scenarios'
+import {Toasts} from '../components/Toasts'
+import {ADAPTER_MODE} from '../api/adapter'
+import {Portrait, useAssetUrl} from '../components/Portrait'
+import {BRAND_EMBLEM, personaAvatarUrl} from '../art/generated'
+import {classNames} from '../lib/util'
+
+const DiscoverPage = lazy(() => import('../features/discover/DiscoverPage'))
+const FriendsPage = lazy(() => import('../features/friends/FriendsPage'))
+const ChatPage = lazy(() => import('../features/chat/ChatPage'))
+const CharacterPage = lazy(() => import('../features/character/CharacterPage'))
+const StoryDetailPage = lazy(() => import('../features/story/StoryDetailPage'))
+const StoryPreparePage = lazy(() => import('../features/story/StoryPreparePage'))
+const StoryPlayPage = lazy(() => import('../features/story/StoryPlayPage'))
+const GamePreparePage = lazy(() => import('../features/games/GamePreparePage'))
+const GamePlayPage = lazy(() => import('../features/games/GamePlayPage'))
+const RecentPage = lazy(() => import('../features/recent/RecentPage'))
+const CreatePage = lazy(() => import('../features/create/CreatePage'))
+const WorkEditorPage = lazy(() => import('../features/create/WorkEditorPage'))
+const AccountPage = lazy(() => import('../features/account/AccountPage'))
+const NotFoundPage = lazy(() => import('../features/misc/NotFoundPage'))
+
+const NAV = [
+  {key: 'friends', icon: Users, label: 'nav.friends', href: href.friends(), match: ['friends', 'chat']},
+  {key: 'discover', icon: Compass, label: 'nav.discover', href: href.discover(), match: ['discover', 'character', 'story', 'storyPrepare', 'gamePrepare']},
+  {key: 'recent', icon: History, label: 'nav.recent', href: href.recent(), match: ['recent', 'storyPlay']},
+  {key: 'create', icon: PenLine, label: 'nav.create', href: href.create(), match: ['create', 'work']},
+] as const
+
+function page(route: Route) {
+  switch (route.name) {
+    case 'discover': return <DiscoverPage tab={route.tab} q={route.q} />
+    case 'friends': return <FriendsPage />
+    case 'chat': return <ChatPage key={route.friendId} friendId={route.friendId} />
+    case 'character': return <CharacterPage key={`${route.id}@${route.version}`} sourceId={route.id} version={route.version} />
+    case 'story': return <StoryDetailPage key={route.id} storyId={route.id} version={route.version} />
+    case 'storyPrepare': return <StoryPreparePage key={`${route.id}|${route.withFriend}`} storyId={route.id} version={route.version} withFriend={route.withFriend} from={route.from} />
+    case 'storyPlay': return <StoryPlayPage key={route.sessionId} sessionId={route.sessionId} />
+    case 'gamePrepare': return <GamePreparePage key={`${route.gameId}|${route.withFriend}`} gameId={route.gameId} withFriend={route.withFriend} from={route.from} />
+    case 'gamePlay': return <GamePlayPage key={route.sessionId} sessionId={route.sessionId} />
+    case 'recent': return <RecentPage archived={route.archived} />
+    case 'create': return <CreatePage />
+    case 'work': return <WorkEditorPage key={route.workId} workId={route.workId} />
+    case 'account': return <AccountPage />
+    case 'notFound': return <NotFoundPage />
+    default: return null
+  }
+}
+
+export function App() {
+  const lang = useApp(s => s.lang)
+  const collapsed = useApp(s => s.navCollapsed)
+  const reducedMotion = useApp(s => s.reducedMotion)
+  const account = useApp(s => s.account)
+  const friends = useApp(s => s.friends)
+  const route = useRoute()
+  const scenarioCount = Object.keys(useSyncExternalStore(scenarios.subscribe, scenarios.snapshot, scenarios.snapshot)).length
+  const i18n = useMemo(() => ({lang, t: makeT(lang)}), [lang])
+  const {t} = i18n
+  useEffect(() => { void loadAccount(); document.documentElement.lang = lang === 'zh' ? 'zh-CN' : 'en' }, []) // eslint-disable-line react-hooks/exhaustive-deps
+  // Empty hash: returning users with friends land on Friends; new visitors on Discover.
+  // Explicit deep links, Back and sign-in returns always win over this default.
+  useEffect(() => {
+    if (route.name !== 'root' || !account) return
+    if (account.authenticated && friends === null) return
+    navigate(account.authenticated && friends && friends.length ? href.friends() : href.discover(), {replace: true})
+  }, [route.name, account, friends])
+  useEffect(() => {
+    const titles: Partial<Record<Route['name'], string>> = {discover: t('discover.title'), friends: t('friends.title'), recent: t('recent.title'), create: t('create.title'), account: t('account.title')}
+    document.title = `${titles[route.name] ?? 'Everwith'} · ${t('mock.badge')}`
+  }, [route.name, t])
+  const task = route.name === 'gamePlay'
+  const active = NAV.find(n => (n.match as readonly string[]).includes(route.name))?.key
+  return (
+    <LangContext.Provider value={i18n}>
+      <div className={classNames('ew-app', collapsed && 'nav-collapsed', task && 'is-task', reducedMotion && 'reduce-motion')}>
+        <a className="ew-skip" href="#main" onClick={e => { e.preventDefault(); document.getElementById('main')?.focus() }}>{t('shell.skip')}</a>
+        {!task && <nav className="ew-nav" aria-label={t('nav.main')}>
+          <div className="ew-brand">
+            <BrandMark />
+            <span className="ew-brand-name">{t('brand')}</span>
+          </div>
+          <ul className="ew-nav-list">
+            {NAV.map(item => {
+              const Icon = item.icon
+              return <li key={item.key}><a href={item.href} className="ew-nav-item" aria-current={active === item.key ? 'page' : undefined} title={collapsed ? t(item.label) : undefined}>
+                <Icon aria-hidden="true" /><span className="ew-nav-label">{t(item.label)}</span></a></li>
+            })}
+          </ul>
+          <div className="ew-nav-foot">
+            <span className="ew-chip mock ew-nav-mock" title={t('mock.badge.long')}>{ADAPTER_MODE === 'mock' ? t('mock.badge') : 'REAL (not connected)'}</span>
+            {ADAPTER_MODE === 'mock' && <button type="button" className="ew-nav-item as-button" onClick={() => window.dispatchEvent(new Event(OPEN_MOCK_PANEL))} title={t('mock.panel.title')} aria-haspopup="dialog" data-testid="mock-panel-open">
+              <FlaskConical aria-hidden="true" /><span className="ew-nav-label">{t('mock.panel')}</span>{scenarioCount > 0 && <span className="ew-mock-count" aria-label={`${scenarioCount}`}>{scenarioCount}</span>}
+            </button>}
+            <button type="button" className="ew-nav-item as-button" onClick={() => setLang(lang === 'zh' ? 'en' : 'zh')} aria-label={lang === 'zh' ? 'Switch to English' : '切换到中文'} title={lang === 'zh' ? 'English' : '中文'}>
+              <Languages aria-hidden="true" /><span className="ew-nav-label">{lang === 'zh' ? '中文 · EN' : 'EN · 中文'}</span>
+            </button>
+            <a href={href.account()} className="ew-nav-item" aria-current={route.name === 'account' ? 'page' : undefined} title={collapsed ? t('nav.account') : undefined}>
+              {account?.persona?.avatar
+                ? <span className="ew-nav-avatar" aria-hidden="true"><Portrait src={personaAvatarUrl(account.persona.avatar)} name={account.persona.name || '·'} alt="" /></span>
+                : <UserCircle2 aria-hidden="true" />}
+              <span className="ew-nav-label ew-nav-account">{account?.authenticated ? account.persona?.name || account.account?.email : t('account.guest')}</span>
+            </a>
+            <button type="button" className="ew-nav-item as-button" onClick={() => setNavCollapsed(!collapsed)} aria-label={collapsed ? t('nav.expand') : t('nav.collapse')} aria-expanded={!collapsed}>
+              {collapsed ? <PanelLeftOpen aria-hidden="true" /> : <PanelLeftClose aria-hidden="true" />}<span className="ew-nav-label">{t('nav.collapse')}</span>
+            </button>
+          </div>
+        </nav>}
+        <main id="main" className="ew-main" tabIndex={-1}>
+          {ADAPTER_MODE === 'real' && <div className="ew-notice danger" role="alert">Real adapter selected but not connected. See README “Real adapter gaps”. No mock fallback is used.</div>}
+          <Suspense fallback={<div className="ew-page-loading is-first" role="status"><BrandMark /><span className="ew-spinner" />{t('common.loading')}</div>}>
+            {page(route)}
+          </Suspense>
+        </main>
+        <MockPanel />
+        <AuthDialog />
+        <Toasts />
+      </div>
+    </LangContext.Provider>
+  )
+}
+/** Generated brand emblem; the lettermark stays as the fallback if the file is missing. */
+function BrandMark() {
+  const url = useAssetUrl(BRAND_EMBLEM)
+  const [failed, setFailed] = useState(false)
+  useEffect(() => setFailed(false), [url])
+  return url && !failed
+    ? <img className="ew-brand-mark is-emblem" src={url} alt="" aria-hidden="true" width={30} height={30} draggable={false} onError={() => setFailed(true)} />
+    : <span className="ew-brand-mark" aria-hidden="true">e</span>
+}
+export {appStore}
diff --git a/everwith-claude-frontend/src/app/i18n.ts b/everwith-claude-frontend/src/app/i18n.ts
new file mode 100644
index 00000000..61e15b9c
--- /dev/null
+++ b/everwith-claude-frontend/src/app/i18n.ts
@@ -0,0 +1,275 @@
+import {createContext, useContext} from 'react'
+import type {Lang} from '../lib/util'
+
+const zh = {
+  'brand': 'Everwith',
+  'mock.badge': '本地演示',
+  'mock.badge.long': '本地演示 · 模拟账号与模拟回复 · 未接通真实服务',
+  'mock.panel': '演示控制',
+  'mock.panel.title': '本地演示 · 模拟场景',
+  'mock.panel.desc': '这些开关只影响本浏览器中的本地 mock 服务，用于检查失败、竞争与降级状态。',
+  'mock.panel.reset': '清空本地演示数据',
+  'mock.panel.resetConfirm': '这会删除本浏览器里的模拟账号、好友、聊天、牌局与创作。确定吗？',
+  'mock.panel.legacy': '导入 Splendor v1 旧存档样例',
+  'mock.panel.once': '一次',
+  'mock.panel.toggle': '持续',
+  'nav.friends': '好友', 'nav.discover': '发现', 'nav.recent': '最近', 'nav.create': '创作', 'nav.account': '账号',
+  'nav.collapse': '收起导航', 'nav.expand': '展开导航', 'nav.main': '主导航',
+  'common.back': '返回', 'common.cancel': '取消', 'common.confirm': '确认', 'common.close': '关闭', 'common.retry': '重试', 'common.loading': '加载中…',
+  'common.save': '保存', 'common.continue': '继续', 'common.more': '更多', 'common.done': '完成', 'common.edit': '编辑', 'common.delete': '删除',
+  'common.archive': '归档', 'common.restore': '恢复', 'common.unavailable': '暂不可用', 'common.signin': '登录', 'common.send': '发送', 'common.stop': '停止',
+  'common.optional': '可选', 'common.required': '必填', 'common.search': '搜索', 'common.clear': '清除', 'common.players': '人',
+  'common.you': '你', 'common.friend': '好友', 'common.temporary': '临时同桌', 'common.npc': '默认人物', 'common.simulated': '模拟',
+  'error.network': '连接中断。你的输入已保留，可以重试。', 'error.generic': '暂时无法完成。已保留的内容不会丢失，请稍后再试。',
+  'error.auth': '需要重新登录。你的草稿与位置已保留。', 'error.forbidden': '你没有权限访问这项内容。', 'error.notFound': '找不到这项内容，可能已被删除或无权访问。',
+  'error.conflict': '内容已在别处更新，已读取最新版本。',
+  'discover.title': '发现', 'discover.subtitle': '找一个人，或者一件可以一起做的事。',
+  'discover.tab.all': '全部', 'discover.tab.characters': '角色', 'discover.tab.stories': '世界（故事）', 'discover.tab.games': '游戏',
+  'discover.search': '搜索角色、故事或游戏', 'discover.empty.search': '没有找到与“{q}”相关的内容。', 'discover.empty.clear': '清除搜索',
+  'discover.empty.catalog': '这里暂时还没有内容。', 'discover.error': '内容加载失败（不是“没有内容”）。', 'discover.appendError': '加载更多失败，已加载的内容仍保留。',
+  'discover.loadMore': '加载更多', 'discover.kind.character': '角色', 'discover.kind.story': '世界 · 故事', 'discover.kind.game': '游戏',
+  'discover.players': '{n} 人', 'discover.companionGame': '可邀好友同桌', 'discover.continue': '继续上次',
+  'friends.title': '好友', 'friends.subtitle': '长期好友会记得你们一起经历的事。', 'friends.empty': '你还没有好友。', 'friends.emptyHint': '可以先在发现里认识一位角色，或者从故事、桌游里把同伴加为好友。',
+  'friends.guest': '登录后才能建立和保存好友。', 'friends.chat': '续聊', 'friends.play': '一起玩', 'friends.source': '来源：{name}', 'friends.since': '{date} 建立',
+  'friends.number': '第 {n} 位', 'friends.search': '按名字或来源查找',
+  'character.add': '加为好友', 'character.existing': '你已有的同源好友', 'character.existingHint': '同一个来源可以有多位独立好友，各自记得各自的经历。',
+  'character.addAnother': '另建一位好友', 'character.chatWith': '和 {name} 续聊', 'character.public': '公开介绍', 'character.traits': '表达习惯',
+  'character.noPrivate': '这里只展示作者公开的介绍，不包含任何人的私聊或经历。', 'character.voice': '预设声音（未接入语音服务）',
+  'name.title': '为好友命名', 'name.desc': '名字是你对 Ta 的私人称呼；来源名“{source}”只用于区分。改名不会改变人格。',
+  'name.label': '好友名字', 'name.confirm': '确认加为好友', 'name.required': '请填写名字。', 'name.creating': '正在建立好友…',
+  'auth.title.login': '登录', 'auth.title.register': '注册', 'auth.email': '邮箱', 'auth.password': '密码', 'auth.passwordHint': '至少 8 位。本地演示不提供密码找回。',
+  'auth.switchRegister': '没有账号？注册', 'auth.switchLogin': '已有账号？登录', 'auth.submit.login': '登录', 'auth.submit.register': '注册并登录',
+  'auth.why': '登录后才能{action}。取消会回到原处，你的试玩与输入都会保留。', 'auth.mockNote': '这是本地模拟账号，只保存在这个浏览器里，不是真实认证服务。',
+  'auth.error.invalid_credentials': '邮箱或密码不对。', 'auth.error.email_taken': '这个邮箱已注册，请直接登录。', 'auth.error.weak_password': '密码至少 8 位。', 'auth.error.invalid_email': '邮箱格式不对。',
+  'auth.action.friend': '加好友', 'auth.action.save': '保存创作', 'auth.action.share': '分享作品', 'auth.action.chat': '私聊', 'auth.action.generic': '继续',
+  'account.title': '账号与设置', 'account.guest': '游客（本地）', 'account.signedIn': '已登录：{email}', 'account.logout': '退出登录', 'account.persona': '我的 Persona',
+  'account.personaName': '称呼', 'account.personaBio': '想让好友知道的事（可选）', 'account.personaSave': '保存 Persona', 'account.personaSaved': '已保存',
+  'account.assets': '素材来源', 'account.assets.package': '交接包素材（角色立绘、动态形象、牌桌美术、预览短片）：用户授权私人交接；商业/再分发权未核实。',
+  'account.assets.generated': '生成素材（故事封面与场景、角色房间背景、游戏封面、空状态插画、Persona 头像、作品封面、图标）：用户经 GPT 生成并提供；商用/再分发权未核实。仅用于这次私人演示。',
+  'account.personaAvatar': '头像', 'account.avatarNone': '不用头像（显示首字）', 'account.avatarNote': '可选的物件小图，不是人像，不会和角色混淆。随 Persona 一起保存。',
+  'account.language': '界面语言', 'account.languageNote': '切换立即生效；已有消息不会被翻译改写，新发送使用新语言。', 'account.noRecovery': '首期不提供密码找回（这不是遗漏的按钮）。',
+  'account.motion': '减少动态效果', 'account.motionNote': '跟随系统设置；开启后人物只保留必要的表情与眨眼。', 'account.guestNote': '游客可以浏览和试玩；加好友、保存创作需要登录，登录后会安全归并你在本机的试玩进度。',
+  'recent.title': '最近', 'recent.subtitle': '找回具体的某一局故事或桌游。', 'recent.empty': '还没有游玩记录。', 'recent.archived': '已归档', 'recent.active': '进行中与已结束',
+  'recent.continue': '继续', 'recent.review': '回看', 'recent.lineup': '阵容', 'recent.deleteConfirm': '删除这条记录？这会删除本局正文与状态，不会删除好友或其他记录。此操作不可撤销。',
+  'recent.status.active': '进行中', 'recent.status.in_progress': '生成中', 'recent.status.read_only': '只读', 'recent.status.ended': '已结束', 'recent.status.abandoned': '已放弃（未完成）', 'recent.status.paused': '已暂停',
+  'recent.story': '故事', 'recent.game': '桌游', 'recent.rematch': '再开局',
+  'chat.placeholder': '和 {name} 说点什么…（Enter 发送，Shift+Enter 换行）', 'chat.label': '给 {name} 的消息',
+  'chat.asterisk': '用 * 包裹动作（选中文字后点击）', 'chat.hints': '回答提示', 'chat.hintsTitle': '回答提示 · 模拟候选', 'chat.hintsNote': '只填入输入框，发送后才提交。',
+  'chat.keepDraft': '保留草稿', 'chat.useHint': '使用提示', 'chat.draftExists': '输入框里已有草稿，要用提示替换吗？',
+  'chat.sending': '正在发送…', 'chat.generating': '{name} 正在回应…', 'chat.awaiting': '等待服务端确认…', 'chat.cancelling': '正在停止…',
+  'chat.receipt': '你的消息', 'chat.receiptPending': '已发送，等待确认', 'chat.provisional': '回应中（尚未提交）',
+  'chat.notice.commit_won': '这条回复在停止前已经完成，结果已保留（没有被停止）。', 'chat.notice.cancelled': '已停止。半段回复没有进入记录，原输入已放回输入框。',
+  'chat.notice.retryable': '这次生成中断了。原输入已保留，可以明确“重试”同一条（不会重复发送）。', 'chat.notice.failed': '没能完成这次回复。草稿已保留。',
+  'chat.notice.stale': '会话在别处有了新内容。已读取最新版本，你的草稿保留在输入框，没有自动重发。', 'chat.notice.epoch_changed': '这位好友的状态在别处发生了变化（例如重置）。旧会话已变为只读，请重新打开。',
+  'chat.notice.unknown': '尚未确认这条消息是否被接收。请先“查询原请求”，不要重新发送。', 'chat.notice.read_only': '这段会话现在只读，不能继续发送。',
+  'chat.notice.auth': '登录已过期。草稿已保留，重新登录后可以继续。', 'chat.notice.forbidden': '没有权限执行这项操作。', 'chat.notice.lookup_missing': '服务端没有收到这条消息。可以用同一请求重新发送（不会产生两条）。',
+  'chat.notice.not_retryable': '这条已无法重试，已读取最新状态。', 'chat.notice.network': '连接中断。你的输入已保留。',
+  'chat.lookup': '查询原请求', 'chat.resend': '用同一请求重新发送', 'chat.retry': '重试同一条', 'chat.newMessages': '{n} 条新消息', 'chat.toBottom': '回到最新',
+  'chat.replyMode': '本地模拟回复', 'chat.replyModeNote': '回复来自本地固定模板，不是 Luna 或其他模型。', 'chat.readOnly': '只读会话', 'chat.readOnlyNote': '这段会话属于旧代次或已移除的好友，只能回看。',
+  'chat.tools': '工具', 'chat.playTogether': '一起玩', 'chat.profile': '资料', 'chat.rename': '重命名', 'chat.reset': '重置好友', 'chat.remove': '移除好友', 'chat.correct': '纠正事实',
+  'chat.rollback': '回退到这里', 'chat.rollbackConfirm': '回退到这条消息之前？这条和之后的 {n} 轮会从有效记录中撤回（不可再读），这条消息的原文会放回输入框。', 'chat.rollbackDone': '已回退，原输入已放回输入框。',
+  'chat.correctTitle': '纠正事实', 'chat.correctDesc': '更正会作为“玩家说明”记录，不会改写已经发生的事；要撤销已发生的行动请用“回退到这里”。', 'chat.correctLabel': '更正内容',
+  'chat.renameTitle': '重命名好友', 'chat.resetTitle': '重置好友', 'chat.resetDesc': '重置会让 {name} 回到首次建立时的基线并开启新代次。旧聊天与相关旧故事变为只读（不会删除）。此操作不可撤销。',
+  'chat.removeTitle': '移除好友', 'chat.removeDesc': '{name} 会离开好友列表。各故事局保留移除时的状态继续；旧私聊归档为只读。其他好友不受影响。',
+  'chat.liveNote': '演示音轨', 'chat.voiceOff': '无语音服务：文字为准，嘴型只跟随明确标注的演示音轨。', 'chat.demoAudio': '播放演示音轨', 'chat.stopAudio': '停止演示音轨',
+  'chat.ignoredFrames': '已拒绝 {n} 个旧 run 的晚到帧', 'chat.empty': '会话从 {name} 的开场白开始。', 'chat.history': '较早的会话',
+  'chat.action': '动作', 'chat.narration': '旁白', 'chat.slashCorrect': '/纠错',
+  'expr.neutral': '平静', 'expr.happy': '开心', 'expr.surprised': '惊讶',
+  'live2d.unavailable': '动态形象不可用，显示同一角色的静态图', 'live2d.loading': '正在载入动态形象…', 'live2d.paused': '已暂停（不在视野内）', 'live2d.static': '静态形象',
+  'live2d.zoom': '放大', 'live2d.unzoom': '退出放大',
+  'story.start': '开始准备', 'story.continueExisting': '继续已有的一局', 'story.newRun': '另开一局', 'story.playerRole': '你的身份', 'story.roles': '公开人物',
+  'story.prepare': '故事准备', 'story.cast': '原阵容与出演', 'story.invite': '邀请好友出演', 'story.uninvite': '恢复默认', 'story.locked': '作者锁定',
+  'story.aiCount': 'AI 位：{n} / 10', 'story.startConfirm': '确认开局', 'story.noRecord': '确认前不会创建任何记录。', 'story.friendUsed': '这位好友已出演另一个角色',
+  'story.adapt': '出演说明：好友保持自己的长期身份与说话方式；本局职业、能力和知情范围由角色位决定，不会写回好友本人。',
+  'story.receipt': '你的行动', 'story.validating': '世界回应中（整轮检查通过后才显示正文）…', 'story.continueStory': '继续剧情', 'story.continueNote': '推进下一段，不替你说话或做决定',
+  'story.input': '描述你的行动或说的话…', 'story.mode.text': '文字', 'story.mode.scene': '场景', 'story.next': '下一段', 'story.known': '已知状态', 'story.objectives': '目标',
+  'story.clues': '已取得线索', 'story.time': '局内时间：{m} 分钟', 'story.present': '在场人物', 'story.hint': '行动提示', 'story.narrationMode': '本地模拟叙事（固定剧情片段）',
+  'story.addFriend': '把 {name} 加为好友', 'story.addFriendNote': '加为好友的是“正在这一局里的 Ta 本人”，并继承 Ta 有权知道的经历。',
+  'story.anotherFriend': '另建一位独立好友', 'story.readOnly': '这一局现在只读（相关好友已重置）。', 'story.openMode': '主要情节已经展开，你可以继续自由行动。',
+  'game.prepare': '游戏准备', 'game.profile': '规则', 'game.players': '人数', 'game.seats': '席位', 'game.seat': '席位 {n}', 'game.you': '你（席位 0）',
+  'game.defaultLineup': '默认临时阵容', 'game.useFriend': '换成我的好友', 'game.start': '开始', 'game.starting': '正在开局…', 'game.noRecord': '点击“开始”前不会创建牌局。',
+  'game.friendSeated': '这位好友已经入座', 'game.rules': '规则', 'game.pause': '暂停 AI', 'game.resume': '继续', 'game.paused': 'AI 行动已暂停，可以先聊聊。',
+  'game.leftPaused': '离开期间后续行动已暂停。准备好后点“继续”。', 'game.yourTurn': '轮到你了', 'game.waiting': '等待 {name}…', 'game.aiThinking': '{name} 正在行动…',
+  'game.abandon': '放弃本局', 'game.abandonConfirm': '放弃后本局变为只读并标为“未完成”，不会编造胜负。确定吗？', 'game.leave': '离开牌桌', 'game.leaveNote': '离开不会放弃；回来可以继续同一局。',
+  'game.sidebar': '人物与桌聊', 'game.immersive': '沉浸', 'game.exitImmersive': '退出沉浸', 'game.fullscreen': '全屏', 'game.exitFullscreen': '退出全屏', 'game.fullscreenDenied': '浏览器拒绝了全屏，已保留当前布局。',
+  'game.tableChat': '桌聊（同桌公开）', 'game.tableChatNote': '聊天不会出牌、不会改比分。', 'game.say': '对同桌说点什么…', 'game.replyFailed': '这次没能生成台词；牌局已提交的内容不受影响。',
+  'game.result': '本局结果', 'game.winner': '胜者', 'game.score': '得分', 'game.rematch': '原桌再来一局', 'game.toChat': '去私聊', 'game.backSource': '回到来源',
+  'game.ended': '已结束 · 结果已锁定', 'game.abandoned': '已放弃 · 未完成（只读）', 'game.befriend': '加为好友', 'game.befriendNote': '加为好友的是这张桌上的 Ta 本人，不增座、不重开。',
+  'game.ruleSimulated': '规则模拟陪玩', 'game.ruleSimulatedNote': '同桌按固定规则策略行动，只使用自己可见的信息；聊天不会改变它的选择（JEV 未接通）。',
+  'game.log': '公开记录', 'game.revision': '版本 r{n}', 'game.lookup': '正在核对开局请求…', 'game.selectHint': '选择后可以修改或取消，确认才提交。',
+  'game.v1': '旧版 v1 存档（保持原规则）',
+  'create.title': '创作', 'create.subtitle': '先选故事或角色，再命名和编辑。', 'create.newStory': '新建故事', 'create.newCharacter': '新建角色', 'create.empty': '你还没有作品。',
+  'create.chooseType': '要创作什么？', 'create.typeFixed': '类型创建后固定。', 'create.nameLabel': '作品名字', 'create.create': '创建', 'create.story': '故事', 'create.character': '角色',
+  'create.saved': '已保存 v{n}', 'create.unsaved': '有未保存的修改', 'create.saving': '保存中…', 'create.saveFailed': '保存失败，草稿仍在。', 'create.draftSaved': '草稿已同步', 'create.draftSaving': '草稿同步中…',
+  'create.save': '保存版本', 'create.share': '分享', 'create.shareOn': '已分享 v{n}', 'create.shareOff': '未分享（默认）', 'create.shareNote': '分享需要已保存且检查通过的版本；分享不包含试演、私聊或私人记忆。',
+  'create.shareEnable': '分享 v{n}', 'create.shareDisable': '关闭分享', 'create.shareLink': '本地链接', 'create.assist': 'AI 辅助改稿（本地模板）', 'create.assistNote': '本地规则模板，不调用模型；修改可撤销。',
+  'create.assist.fill': '补全空白字段', 'create.assist.shorter': '缩短简介', 'create.assist.add_role': '加一个角色位', 'create.assist.warmer': '表达更亲近', 'create.undo': '撤销上次修改',
+  'create.preview': '试演', 'create.previewNote': '试演隔离：不写入正式好友、私聊或记忆。', 'create.previewStart': '开始试演', 'create.previewRestart': '重新试演',
+  'create.previewStale': '草稿已更新。当前试演仍使用 r{n} 的旧快照；重新试演才会使用新版本。', 'create.previewBlocked': '还有必填项未完成，暂不能试演或分享。',
+  'create.addFriend': '用 v{n} 加为好友', 'create.fields': '编辑', 'create.expand': '放大试演', 'create.collapse': '返回编辑',
+  'create.f.name': '名字', 'create.f.tagline': '一句话身份', 'create.f.intro': '公开介绍', 'create.f.persona': '人物设定', 'create.f.habit': '表达习惯', 'create.f.background': '背景',
+  'create.f.opening': '开场', 'create.f.voice': '预设声音', 'create.f.portrait': '肖像', 'create.f.portraitNote': '自创角色暂用中性占位；不能借用官方角色的脸。',
+  'create.f.cover': '封面', 'create.coverN': '封面 {n}', 'create.coverNote': '只用于你的作品卡片和编辑页。',
+  'create.f.title': '作品名', 'create.f.genre': '题材', 'create.f.contentNote': '内容提示', 'create.f.setting': '世界设定', 'create.f.playerEntry': '玩家入场', 'create.f.narrative': '叙事偏好',
+  'create.f.mode': '阶段模式', 'create.f.roles': '角色位（最多 10 个 AI）', 'create.f.roleTitle': '角色位名称', 'create.f.roleDesc': '公开说明', 'create.f.roleCharacter': '默认人物',
+  'create.f.replaceable': '允许好友出演', 'create.f.locked': '锁定此位', 'create.f.worldbook': '世界书 / 知情规则', 'create.f.wbTitle': '条目', 'create.f.wbContent': '内容', 'create.f.wbKnow': '谁知道',
+  'create.f.items': '属性 / 物品', 'create.f.stages': '阶段', 'create.addRole': '添加角色位', 'create.addEntry': '添加条目', 'create.remove': '移除',
+  'create.mode.open': '开放式', 'create.mode.ending': '有结局', 'create.narr.balanced': '均衡', 'create.narr.dialogue': '多对白', 'create.narr.atmosphere': '重氛围',
+  'create.err.required': '必填', 'create.err.too_long': '太长', 'create.err.too_many': '超过上限', 'create.err.invalid': '无效',
+  'create.guestSave': '保存私有作品需要登录；草稿先保留在本机。', 'create.versions': '已保存版本', 'create.loginToSave': '登录后保存',
+  'shell.skip': '跳到主要内容', 'shell.lang': '中', 'shell.taskExit': '退出任务页',
+  'story.runMeta': '{turns} 段 · 更新于 {time}', 'story.readOnlyShort': '只读', 'story.friendCanPlay': '可由好友出演',
+  'story.publicNote': '这里只展示公开介绍；任何人的私人经历都不会出现在作品页。', 'story.playedBy': '由 {name} 扮演', 'story.lockedNote': '作者锁定：保持原人物',
+  'story.noFriends': '还没有好友可以邀请；也可以先用原阵容开始。', 'story.startUnknown': '网络中断，结果未知。再次确认会用同一请求，不会重复开局。', 'story.startRetry': '用同一请求重试',
+  'story.youAre': '你：{role}', 'story.view': '显示方式', 'story.unknownResult': '网络中断，这一步的结果未知。', 'story.retrySame': '用同一请求重试',
+  'story.failed': '这一轮没有完成（可重试，未写入任何内容）。', 'story.giveUp': '放弃并取回输入', 'story.conflict': '故事已在别处更新，已载入最新内容。', 'story.noClues': '还没有线索。',
+  'story.stateNote': '状态与已提交正文同版本（r{rev}）。', 'story.rollback': '回退到这里', 'story.rollbackConfirm': '回退会撤回这条行动及之后的全部正文与状态变化，并把这条行动放回输入框。确定吗？',
+  'story.withdrawn': '（这条行动已撤回）', 'story.newClue': '新线索：{clue}',
+  'recent.emptyArchived': '没有已归档的记录。', 'recent.goDiscover': '去发现', 'recent.gameMeta': '版本 r{rev} · 更新于 {time}', 'create.new': '新建作品',
+  'create.emptyNote': '先选择故事或角色，再给它起个名字。', 'create.neverSaved': '尚未保存版本', 'create.storyNote': '设定、角色位、开场与叙事偏好', 'create.characterNote': '人物设定、表达习惯、背景与开场',
+  'create.unchangedSave': '没有新修改，仍是 v{n}', 'create.unsavedDraft': '有未同步的修改', 'create.conflict': '草稿冲突', 'create.syncError': '草稿同步失败',
+  'create.guestNote': '游客也可以编辑草稿；保存版本与分享需要登录。', 'create.conflictNote': '这份草稿在别处被修改了。你的修改还在本页，没有被覆盖。', 'create.loadLatest': '载入最新（放弃本页修改）', 'create.keepMine': '用本页内容继续',
+  'create.assist.addRole': '增加角色位',   'create.voice.preset-neutral': '中性（预设）', 'create.voice.preset-warm': '温和（预设）', 'create.voice.preset-bright': '明亮（预设）',
+  'create.voice.preset-low': '低沉（预设）', 'create.voice.preset-calm': '平静（预设）',   'create.roleN': '角色位 {n}',
+  'create.worldbookGap': '世界书、属性/物品规则需要独立的保存服务：未接通，本版不提供入口。', 'create.previewSnapshot': '快照 r{n}', 'create.previewIdle': '开始试演后可以直接对话；试演只使用当时的草稿快照。',
+  'create.previewSay': '在试演里说点什么…', 'create.previewClose': '结束试演',
+}
+export type I18nKey = keyof typeof zh
+const en: Record<I18nKey, string> = {
+  'brand': 'Everwith',
+  'mock.badge': 'Local demo', 'mock.badge.long': 'Local demo · simulated account & replies · no live services', 'mock.panel': 'Demo controls', 'mock.panel.title': 'Local demo · mock scenarios',
+  'mock.panel.desc': 'These switches only affect the local mock service in this browser, to check failure, race and fallback states.',
+  'mock.panel.reset': 'Erase local demo data', 'mock.panel.resetConfirm': 'This deletes the simulated account, friends, chats, games and works in this browser. Continue?',
+  'mock.panel.legacy': 'Import a Splendor v1 legacy save sample', 'mock.panel.once': 'once', 'mock.panel.toggle': 'on',
+  'nav.friends': 'Friends', 'nav.discover': 'Discover', 'nav.recent': 'Recent', 'nav.create': 'Create', 'nav.account': 'Account', 'nav.collapse': 'Collapse navigation', 'nav.expand': 'Expand navigation', 'nav.main': 'Main navigation',
+  'common.back': 'Back', 'common.cancel': 'Cancel', 'common.confirm': 'Confirm', 'common.close': 'Close', 'common.retry': 'Retry', 'common.loading': 'Loading…',
+  'common.save': 'Save', 'common.continue': 'Continue', 'common.more': 'More', 'common.done': 'Done', 'common.edit': 'Edit', 'common.delete': 'Delete',
+  'common.archive': 'Archive', 'common.restore': 'Restore', 'common.unavailable': 'Unavailable', 'common.signin': 'Sign in', 'common.send': 'Send', 'common.stop': 'Stop',
+  'common.optional': 'optional', 'common.required': 'required', 'common.search': 'Search', 'common.clear': 'Clear', 'common.players': 'players',
+  'common.you': 'You', 'common.friend': 'Friend', 'common.temporary': 'Table guest', 'common.npc': 'Default character', 'common.simulated': 'simulated',
+  'error.network': 'Connection lost. Your input is kept; you can retry.', 'error.generic': 'This could not be completed. Nothing you kept is lost; try again later.',
+  'error.auth': 'Please sign in again. Your draft and position are kept.', 'error.forbidden': 'You do not have access to this.', 'error.notFound': 'Not found. It may have been deleted or you lack access.',
+  'error.conflict': 'This was updated elsewhere; the latest version was loaded.',
+  'discover.title': 'Discover', 'discover.subtitle': 'Find someone, or something to do together.',
+  'discover.tab.all': 'All', 'discover.tab.characters': 'Characters', 'discover.tab.stories': 'Worlds (stories)', 'discover.tab.games': 'Games',
+  'discover.search': 'Search characters, stories or games', 'discover.empty.search': 'Nothing matches “{q}”.', 'discover.empty.clear': 'Clear search',
+  'discover.empty.catalog': 'Nothing here yet.', 'discover.error': 'Loading failed (this is not “no content”).', 'discover.appendError': 'Loading more failed; what is loaded stays.',
+  'discover.loadMore': 'Load more', 'discover.kind.character': 'Character', 'discover.kind.story': 'World · story', 'discover.kind.game': 'Game',
+  'discover.players': '{n} players', 'discover.companionGame': 'Friends can join', 'discover.continue': 'Continue',
+  'friends.title': 'Friends', 'friends.subtitle': 'Long-term friends remember what you went through together.', 'friends.empty': 'No friends yet.', 'friends.emptyHint': 'Meet a character in Discover, or add a companion from a story or a game table.',
+  'friends.guest': 'Sign in to make and keep friends.', 'friends.chat': 'Chat', 'friends.play': 'Play together', 'friends.source': 'Source: {name}', 'friends.since': 'Since {date}',
+  'friends.number': '#{n}', 'friends.search': 'Find by name or source',
+  'character.add': 'Add as friend', 'character.existing': 'Your friends from this source', 'character.existingHint': 'One source can have several independent friends; each remembers their own experiences.',
+  'character.addAnother': 'Add another friend', 'character.chatWith': 'Chat with {name}', 'character.public': 'Public introduction', 'character.traits': 'Speaking habits',
+  'character.noPrivate': 'Only the author’s public introduction is shown here — never anyone’s private chats or experiences.', 'character.voice': 'Preset voice (no voice service connected)',
+  'name.title': 'Name your friend', 'name.desc': 'The name is your private way to call them; the source name “{source}” only tells them apart. Renaming never changes personality.',
+  'name.label': 'Friend name', 'name.confirm': 'Add friend', 'name.required': 'Please enter a name.', 'name.creating': 'Creating friend…',
+  'auth.title.login': 'Sign in', 'auth.title.register': 'Create account', 'auth.email': 'Email', 'auth.password': 'Password', 'auth.passwordHint': 'At least 8 characters. The local demo has no password recovery.',
+  'auth.switchRegister': 'No account? Create one', 'auth.switchLogin': 'Have an account? Sign in', 'auth.submit.login': 'Sign in', 'auth.submit.register': 'Create & sign in',
+  'auth.why': 'Sign in to {action}. Cancel returns you to where you were; your play and input are kept.', 'auth.mockNote': 'This is a local simulated account stored only in this browser — not a real authentication service.',
+  'auth.error.invalid_credentials': 'Wrong email or password.', 'auth.error.email_taken': 'That email is registered; sign in instead.', 'auth.error.weak_password': 'Use at least 8 characters.', 'auth.error.invalid_email': 'That email looks invalid.',
+  'auth.action.friend': 'add a friend', 'auth.action.save': 'save your work', 'auth.action.share': 'share a work', 'auth.action.chat': 'chat privately', 'auth.action.generic': 'continue',
+  'account.title': 'Account & settings', 'account.guest': 'Guest (local)', 'account.signedIn': 'Signed in: {email}', 'account.logout': 'Sign out', 'account.persona': 'My persona',
+  'account.personaName': 'What friends call you', 'account.personaBio': 'Something friends may know (optional)', 'account.personaSave': 'Save persona', 'account.personaSaved': 'Saved',
+  'account.assets': 'Asset sources', 'account.assets.package': 'Handoff package art (character art, Live2D, table art, preview clips): privately handed over with the user\'s permission; commercial / redistribution rights unverified.',
+  'account.assets.generated': 'Generated art (story covers and scenes, character rooms, game covers, empty-state art, persona pictures, work covers, icons): generated with GPT and provided by the user; commercial / redistribution rights unverified. For this private demo only.',
+  'account.personaAvatar': 'Picture', 'account.avatarNone': 'No picture (show initial)', 'account.avatarNote': 'Optional small object pictures — never a person, so they cannot be mistaken for a character. Saved with your persona.',
+  'account.language': 'Interface language', 'account.languageNote': 'Applies immediately; existing messages are never re-translated, new sends use the new language.', 'account.noRecovery': 'No password recovery in this phase (not a missing button).',
+  'account.motion': 'Reduce motion', 'account.motionNote': 'Follows your system setting; characters keep only essential expression and blinking.', 'account.guestNote': 'Guests can browse and play; adding friends and saving works need an account. Signing in safely merges this browser’s guest progress.',
+  'recent.title': 'Recent', 'recent.subtitle': 'Find a specific story run or game.', 'recent.empty': 'No records yet.', 'recent.archived': 'Archived', 'recent.active': 'Active & finished',
+  'recent.continue': 'Continue', 'recent.review': 'Review', 'recent.lineup': 'Lineup', 'recent.deleteConfirm': 'Delete this record? Its text and state are removed; friends and other records are not. This cannot be undone.',
+  'recent.status.active': 'In progress', 'recent.status.in_progress': 'Generating', 'recent.status.read_only': 'Read-only', 'recent.status.ended': 'Finished', 'recent.status.abandoned': 'Abandoned (unfinished)', 'recent.status.paused': 'Paused',
+  'recent.story': 'Story', 'recent.game': 'Game', 'recent.rematch': 'Rematch',
+  'chat.placeholder': 'Say something to {name}… (Enter to send, Shift+Enter for a new line)', 'chat.label': 'Message to {name}',
+  'chat.asterisk': 'Wrap an action in * (select text, then click)', 'chat.hints': 'Reply hints', 'chat.hintsTitle': 'Reply hints · simulated', 'chat.hintsNote': 'Fills the composer only; nothing is sent until you send.',
+  'chat.keepDraft': 'Keep draft', 'chat.useHint': 'Use hint', 'chat.draftExists': 'You already have a draft. Replace it with the hint?',
+  'chat.sending': 'Sending…', 'chat.generating': '{name} is replying…', 'chat.awaiting': 'Waiting for the server to confirm…', 'chat.cancelling': 'Stopping…',
+  'chat.receipt': 'Your message', 'chat.receiptPending': 'Sent, awaiting confirmation', 'chat.provisional': 'Replying (not committed yet)',
+  'chat.notice.commit_won': 'This reply finished before Stop arrived; the result is kept (it was not stopped).', 'chat.notice.cancelled': 'Stopped. The partial reply was not recorded; your input is back in the composer.',
+  'chat.notice.retryable': 'Generation was interrupted. Your input is kept; you can explicitly Retry the same message (no duplicate).', 'chat.notice.failed': 'The reply could not be completed. Your draft is kept.',
+  'chat.notice.stale': 'The conversation changed elsewhere. The latest version is loaded; your draft stays in the composer and nothing was resent.', 'chat.notice.epoch_changed': 'This friend changed elsewhere (e.g. reset). The old conversation is now read-only; please reopen.',
+  'chat.notice.unknown': 'Not confirmed whether the message arrived. Look up the original request first — do not resend.', 'chat.notice.read_only': 'This conversation is read-only now.',
+  'chat.notice.auth': 'Your sign-in expired. The draft is kept; sign in again to continue.', 'chat.notice.forbidden': 'You do not have permission to do that.', 'chat.notice.lookup_missing': 'The server never received it. You can resend the same request (no duplicate will be created).',
+  'chat.notice.not_retryable': 'It can no longer be retried; the latest state was loaded.', 'chat.notice.network': 'Connection lost. Your input is kept.',
+  'chat.lookup': 'Look up original request', 'chat.resend': 'Resend same request', 'chat.retry': 'Retry the same message', 'chat.newMessages': '{n} new', 'chat.toBottom': 'Jump to latest',
+  'chat.replyMode': 'Local simulated reply', 'chat.replyModeNote': 'Replies come from fixed local templates, not Luna or any model.', 'chat.readOnly': 'Read-only conversation', 'chat.readOnlyNote': 'This conversation belongs to an older generation or a removed friend and can only be reviewed.',
+  'chat.tools': 'Tools', 'chat.playTogether': 'Play together', 'chat.profile': 'Profile', 'chat.rename': 'Rename', 'chat.reset': 'Reset friend', 'chat.remove': 'Remove friend', 'chat.correct': 'Correct a fact',
+  'chat.rollback': 'Roll back to here', 'chat.rollbackConfirm': 'Roll back to before this message? It and the {n} later turn(s) are withdrawn from the valid record (no longer readable); its text goes back into the composer.', 'chat.rollbackDone': 'Rolled back; your original input is in the composer.',
+  'chat.correctTitle': 'Correct a fact', 'chat.correctDesc': 'A correction is recorded as your statement and never rewrites what happened; to undo an action use “Roll back to here”.', 'chat.correctLabel': 'Correction',
+  'chat.renameTitle': 'Rename friend', 'chat.resetTitle': 'Reset friend', 'chat.resetDesc': 'Reset returns {name} to their first baseline and starts a new generation. Old chats and related stories become read-only (not deleted). This cannot be undone.',
+  'chat.removeTitle': 'Remove friend', 'chat.removeDesc': '{name} leaves your friends. Stories keep their state at removal and continue; old chats are archived read-only. Other friends are unaffected.',
+  'chat.liveNote': 'Demo track', 'chat.voiceOff': 'No voice service: text is authoritative; the mouth only follows the clearly labelled demo track.', 'chat.demoAudio': 'Play demo track', 'chat.stopAudio': 'Stop demo track',
+  'chat.ignoredFrames': 'Rejected {n} late frame(s) from an old run', 'chat.empty': 'The conversation begins with {name}’s greeting.', 'chat.history': 'Earlier conversations',
+  'chat.action': 'Action', 'chat.narration': 'Narration', 'chat.slashCorrect': '/correct',
+  'expr.neutral': 'Calm', 'expr.happy': 'Happy', 'expr.surprised': 'Surprised',
+  'live2d.unavailable': 'Animated portrait unavailable; showing the same character’s still image', 'live2d.loading': 'Loading animated portrait…', 'live2d.paused': 'Paused (off-screen)', 'live2d.static': 'Still portrait',
+  'live2d.zoom': 'Enlarge', 'live2d.unzoom': 'Exit enlarge',
+  'story.start': 'Prepare', 'story.continueExisting': 'Continue a saved run', 'story.newRun': 'Start a new run', 'story.playerRole': 'Your role', 'story.roles': 'Public characters',
+  'story.prepare': 'Story setup', 'story.cast': 'Original cast & who plays whom', 'story.invite': 'Invite a friend', 'story.uninvite': 'Use default', 'story.locked': 'Locked by author',
+  'story.aiCount': 'AI seats: {n} / 10', 'story.startConfirm': 'Start this run', 'story.noRecord': 'Nothing is created until you confirm.', 'story.friendUsed': 'This friend already plays another role',
+  'story.adapt': 'Casting note: friends keep their long-term identity and voice; this run’s job, abilities and knowledge come from the role and never write back to the friend.',
+  'story.receipt': 'Your action', 'story.validating': 'The world is responding (text appears only after the whole turn is checked)…', 'story.continueStory': 'Continue story', 'story.continueNote': 'Advances the next beat without speaking or deciding for you',
+  'story.input': 'Describe what you do or say…', 'story.mode.text': 'Text', 'story.mode.scene': 'Scene', 'story.next': 'Next beat', 'story.known': 'Known state', 'story.objectives': 'Objectives',
+  'story.clues': 'Clues found', 'story.time': 'In-story time: {m} min', 'story.present': 'Present', 'story.hint': 'Action hint', 'story.narrationMode': 'Local simulated narration (fixed beats)',
+  'story.addFriend': 'Add {name} as a friend', 'story.addFriendNote': 'You befriend this very person in this run, with the experiences they are entitled to know.',
+  'story.anotherFriend': 'Add a separate friend', 'story.readOnly': 'This run is read-only (a related friend was reset).', 'story.openMode': 'The main plot has unfolded; you can keep acting freely.',
+  'game.prepare': 'Game setup', 'game.profile': 'Rules', 'game.players': 'Players', 'game.seats': 'Seats', 'game.seat': 'Seat {n}', 'game.you': 'You (seat 0)',
+  'game.defaultLineup': 'Default table guests', 'game.useFriend': 'Use my friend', 'game.start': 'Start', 'game.starting': 'Starting…', 'game.noRecord': 'No game exists until you press Start.',
+  'game.friendSeated': 'This friend is already seated', 'game.rules': 'Rules', 'game.pause': 'Pause AI', 'game.resume': 'Continue', 'game.paused': 'AI moves are paused; chat first if you like.',
+  'game.leftPaused': 'Further moves paused while you were away. Press Continue when ready.', 'game.yourTurn': 'Your turn', 'game.waiting': 'Waiting for {name}…', 'game.aiThinking': '{name} is moving…',
+  'game.abandon': 'Abandon game', 'game.abandonConfirm': 'Abandoning makes this game read-only and unfinished; no winner is invented. Continue?', 'game.leave': 'Leave table', 'game.leaveNote': 'Leaving does not abandon; come back to continue the same game.',
+  'game.sidebar': 'Characters & table chat', 'game.immersive': 'Immersive', 'game.exitImmersive': 'Exit immersive', 'game.fullscreen': 'Fullscreen', 'game.exitFullscreen': 'Exit fullscreen', 'game.fullscreenDenied': 'The browser refused fullscreen; the current layout is kept.',
+  'game.tableChat': 'Table chat (public to the table)', 'game.tableChatNote': 'Chat never plays a move or changes the score.', 'game.say': 'Say something to the table…', 'game.replyFailed': 'No line could be generated this time; the committed game is unaffected.',
+  'game.result': 'Result', 'game.winner': 'Winner', 'game.score': 'Score', 'game.rematch': 'Rematch at this table', 'game.toChat': 'Private chat', 'game.backSource': 'Back to source',
+  'game.ended': 'Finished · result locked', 'game.abandoned': 'Abandoned · unfinished (read-only)', 'game.befriend': 'Add as friend', 'game.befriendNote': 'You befriend this very table-mate — no extra seat, no restart.',
+  'game.ruleSimulated': 'Rule-simulated companions', 'game.ruleSimulatedNote': 'Table-mates follow a fixed rule strategy using only what their seat can see; chat does not change their choices (JEV not connected).',
+  'game.log': 'Public log', 'game.revision': 'Revision r{n}', 'game.lookup': 'Checking the start request…', 'game.selectHint': 'You can change or cancel a selection; only Confirm submits.',
+  'game.v1': 'Legacy v1 save (original rules kept)',
+  'create.title': 'Create', 'create.subtitle': 'Pick a story or a character first, then name and edit it.', 'create.newStory': 'New story', 'create.newCharacter': 'New character', 'create.empty': 'No works yet.',
+  'create.chooseType': 'What do you want to create?', 'create.typeFixed': 'The type is fixed after creation.', 'create.nameLabel': 'Work name', 'create.create': 'Create', 'create.story': 'Story', 'create.character': 'Character',
+  'create.saved': 'Saved v{n}', 'create.unsaved': 'Unsaved changes', 'create.saving': 'Saving…', 'create.saveFailed': 'Save failed; your draft is still here.', 'create.draftSaved': 'Draft synced', 'create.draftSaving': 'Syncing draft…',
+  'create.save': 'Save version', 'create.share': 'Share', 'create.shareOn': 'Shared v{n}', 'create.shareOff': 'Not shared (default)', 'create.shareNote': 'Sharing needs a saved version that passes checks; shares never include previews, private chats or memories.',
+  'create.shareEnable': 'Share v{n}', 'create.shareDisable': 'Stop sharing', 'create.shareLink': 'Local link', 'create.assist': 'AI-assisted edit (local templates)', 'create.assistNote': 'Local rule templates, no model is called; changes can be undone.',
+  'create.assist.fill': 'Fill empty fields', 'create.assist.shorter': 'Shorten summary', 'create.assist.add_role': 'Add a role', 'create.assist.warmer': 'Warmer speaking style', 'create.undo': 'Undo last change',
+  'create.preview': 'Preview', 'create.previewNote': 'Isolated preview: nothing is written to friends, chats or memory.', 'create.previewStart': 'Start preview', 'create.previewRestart': 'Restart preview',
+  'create.previewStale': 'The draft changed. This preview still uses the r{n} snapshot; restart to use the new version.', 'create.previewBlocked': 'Required fields are missing; preview and sharing are unavailable.',
+  'create.addFriend': 'Add as friend from v{n}', 'create.fields': 'Edit', 'create.expand': 'Enlarge preview', 'create.collapse': 'Back to editing',
+  'create.f.name': 'Name', 'create.f.tagline': 'One-line identity', 'create.f.intro': 'Public introduction', 'create.f.persona': 'Personality', 'create.f.habit': 'Speaking habits', 'create.f.background': 'Background',
+  'create.f.opening': 'Opening', 'create.f.voice': 'Preset voice', 'create.f.portrait': 'Portrait', 'create.f.portraitNote': 'Your characters use a neutral placeholder for now; official faces cannot be borrowed.',
+  'create.f.cover': 'Cover', 'create.coverN': 'Cover {n}', 'create.coverNote': 'Only used on your work cards and in the editor.',
+  'create.f.title': 'Title', 'create.f.genre': 'Genre', 'create.f.contentNote': 'Content note', 'create.f.setting': 'World setting', 'create.f.playerEntry': 'Player entry', 'create.f.narrative': 'Narrative preference',
+  'create.f.mode': 'Stage mode', 'create.f.roles': 'Roles (up to 10 AI)', 'create.f.roleTitle': 'Role name', 'create.f.roleDesc': 'Public description', 'create.f.roleCharacter': 'Default character',
+  'create.f.replaceable': 'Friends may play it', 'create.f.locked': 'Lock this role', 'create.f.worldbook': 'Worldbook / who knows what', 'create.f.wbTitle': 'Entry', 'create.f.wbContent': 'Content', 'create.f.wbKnow': 'Known by',
+  'create.f.items': 'Attributes / items', 'create.f.stages': 'Stages', 'create.addRole': 'Add role', 'create.addEntry': 'Add entry', 'create.remove': 'Remove',
+  'create.mode.open': 'Open-ended', 'create.mode.ending': 'Has an ending', 'create.narr.balanced': 'Balanced', 'create.narr.dialogue': 'Dialogue-heavy', 'create.narr.atmosphere': 'Atmospheric',
+  'create.err.required': 'Required', 'create.err.too_long': 'Too long', 'create.err.too_many': 'Over the limit', 'create.err.invalid': 'Invalid',
+  'create.guestSave': 'Saving private works requires an account; your draft stays on this device meanwhile.', 'create.versions': 'Saved versions', 'create.loginToSave': 'Sign in to save',
+  'shell.skip': 'Skip to main content', 'shell.lang': 'EN', 'shell.taskExit': 'Exit task page',
+  'story.runMeta': '{turns} turns · updated {time}', 'story.readOnlyShort': 'read-only', 'story.friendCanPlay': 'A friend can play this',
+  'story.publicNote': 'Only the public introduction is shown; nobody\'s private history appears on a work page.', 'story.playedBy': 'played by {name}', 'story.lockedNote': 'Locked by the author: keeps the original character',
+  'story.noFriends': 'No friends to invite yet; you can start with the original cast.', 'story.startUnknown': 'Connection lost; the result is unknown. Confirming again reuses the same request and cannot create a second run.', 'story.startRetry': 'Retry the same request',
+  'story.youAre': 'You: {role}', 'story.view': 'View', 'story.unknownResult': 'Connection lost; the result of this step is unknown.', 'story.retrySame': 'Retry the same request',
+  'story.failed': 'This turn did not complete (retryable; nothing was written).', 'story.giveUp': 'Give up and get my input back', 'story.conflict': 'The story changed elsewhere; the latest version is loaded.', 'story.noClues': 'No clues yet.',
+  'story.stateNote': 'State matches the committed text (r{rev}).', 'story.rollback': 'Roll back to here', 'story.rollbackConfirm': 'Rolling back withdraws this action and everything after it (text and state) and puts the action back in the input box. Continue?',
+  'story.withdrawn': '(this action was withdrawn)', 'story.newClue': 'New clue: {clue}',
+  'recent.emptyArchived': 'No archived records.', 'recent.goDiscover': 'Go to Discover', 'recent.gameMeta': 'Revision r{rev} · updated {time}', 'create.new': 'New work',
+  'create.emptyNote': 'Pick a story or a character first, then name it.', 'create.neverSaved': 'No saved version yet', 'create.storyNote': 'Setting, roles, opening and narrative style', 'create.characterNote': 'Persona, speaking habits, background and opening',
+  'create.unchangedSave': 'No changes; still v{n}', 'create.unsavedDraft': 'Unsynced changes', 'create.conflict': 'Draft conflict', 'create.syncError': 'Draft sync failed',
+  'create.guestNote': 'Guests can edit drafts; saving versions and sharing need sign-in.', 'create.conflictNote': 'This draft changed elsewhere. Your edits are still on this page; nothing was overwritten.', 'create.loadLatest': 'Load latest (discard edits here)', 'create.keepMine': 'Keep my edits',
+  'create.assist.addRole': 'Add a role',   'create.voice.preset-neutral': 'Neutral (preset)', 'create.voice.preset-warm': 'Warm (preset)', 'create.voice.preset-bright': 'Bright (preset)',
+  'create.voice.preset-low': 'Low (preset)', 'create.voice.preset-calm': 'Calm (preset)',   'create.roleN': 'Role {n}',
+  'create.worldbookGap': 'World book and item/attribute rules need a separate save service: not connected, so no entry is offered here.', 'create.previewSnapshot': 'Snapshot r{n}', 'create.previewIdle': 'Start a preview to talk; it uses the draft snapshot taken at that moment.',
+  'create.previewSay': 'Say something in the preview…', 'create.previewClose': 'End preview',
+}
+export const DICTS: Record<Lang, Record<I18nKey, string>> = {zh, en}
+export type T = (key: I18nKey, vars?: Record<string, string | number>) => string
+export function makeT(lang: Lang): T {
+  const d = DICTS[lang]
+  return (key, vars) => {
+    let s = d[key] ?? key
+    if (vars) for (const [k, v] of Object.entries(vars)) s = s.split(`{${k}}`).join(String(v))
+    return s
+  }
+}
+export const LangContext = createContext<{lang: Lang; t: T}>({lang: 'zh', t: makeT('zh')})
+export const useI18n = () => useContext(LangContext)
diff --git a/everwith-claude-frontend/src/app/router.ts b/everwith-claude-frontend/src/app/router.ts
new file mode 100644
index 00000000..56bc2c83
--- /dev/null
+++ b/everwith-claude-frontend/src/app/router.ts
@@ -0,0 +1,104 @@
+import {useSyncExternalStore} from 'react'
+
+export type DiscoverTab = 'all' | 'characters' | 'stories' | 'games'
+export type Route =
+  | {name: 'root'}
+  | {name: 'discover'; tab: DiscoverTab; q: string}
+  | {name: 'friends'}
+  | {name: 'chat'; friendId: string}
+  | {name: 'character'; id: string; version: string}
+  | {name: 'story'; id: string; version: string}
+  | {name: 'storyPrepare'; id: string; version: string; withFriend: string | null; from: string | null}
+  | {name: 'storyPlay'; sessionId: string}
+  | {name: 'gamePrepare'; gameId: string; withFriend: string | null; from: string | null}
+  | {name: 'gamePlay'; sessionId: string}
+  | {name: 'recent'; archived: boolean}
+  | {name: 'create'}
+  | {name: 'work'; workId: string}
+  | {name: 'account'}
+  | {name: 'notFound'; hash: string}
+
+const TABS: DiscoverTab[] = ['all', 'characters', 'stories', 'games']
+
+/**
+ * Old deep links (`#/companions?view=…&friend=…&storySession=…&gameSession=…`) map to the
+ * object they named, never to the default home (01_BUSINESS_AND_PAGE_MAP.md).
+ */
+export function mapLegacy(hash: string): string | null {
+  if (!hash.startsWith('#/companions')) return null
+  const params = new URLSearchParams(hash.split('?')[1] ?? '')
+  const game = params.get('gameSession'), story = params.get('storySession'), friend = params.get('friend')
+  if (game) return `#/play/game/${encodeURIComponent(game)}`
+  if (story) return `#/play/story/${encodeURIComponent(story)}`
+  if (friend) return `#/friends/${encodeURIComponent(friend)}`
+  const storyId = params.get('story')
+  if (storyId) return `#/stories/${encodeURIComponent(storyId)}?v=${encodeURIComponent(params.get('version') ?? '1')}`
+  const view = params.get('view')
+  if (view === 'friends') return '#/friends'
+  if (view === 'recent') return '#/recent'
+  if (view === 'create') return '#/create'
+  return '#/discover'
+}
+
+export function parseHash(hash: string): Route {
+  if (!hash || hash === '#' || hash === '#/') return {name: 'root'}
+  const [rawPath, rawQuery = ''] = hash.replace(/^#/, '').split('?')
+  const parts = rawPath.split('/').filter(Boolean).map(p => { try { return decodeURIComponent(p) } catch { return p } })
+  const q = new URLSearchParams(rawQuery)
+  const [a, b, c] = parts
+  if (a === 'discover' && !b) { const tab = q.get('tab') as DiscoverTab; return {name: 'discover', tab: TABS.includes(tab) ? tab : 'all', q: q.get('q') ?? ''} }
+  if (a === 'friends' && !b) return {name: 'friends'}
+  if (a === 'friends' && b && !c) return {name: 'chat', friendId: b}
+  if (a === 'characters' && b && !c) return {name: 'character', id: b, version: q.get('v') ?? '1'}
+  if (a === 'stories' && b && !c) return {name: 'story', id: b, version: q.get('v') ?? '1'}
+  if (a === 'stories' && b && c === 'prepare') return {name: 'storyPrepare', id: b, version: q.get('v') ?? '1', withFriend: q.get('with'), from: q.get('from')}
+  if (a === 'play' && b === 'story' && c) return {name: 'storyPlay', sessionId: c}
+  if (a === 'games' && b && c === 'prepare') return {name: 'gamePrepare', gameId: b, withFriend: q.get('with'), from: q.get('from')}
+  if (a === 'play' && b === 'game' && c) return {name: 'gamePlay', sessionId: c}
+  if (a === 'recent' && !b) return {name: 'recent', archived: q.get('archived') === '1'}
+  if (a === 'create' && !b) return {name: 'create'}
+  if (a === 'create' && b && !c) return {name: 'work', workId: b}
+  if (a === 'account' && !b) return {name: 'account'}
+  return {name: 'notFound', hash}
+}
+
+export const href = {
+  discover: (tab: DiscoverTab = 'all', q = '') => `#/discover${tab !== 'all' || q ? `?${new URLSearchParams({...(tab !== 'all' ? {tab} : {}), ...(q ? {q} : {})})}` : ''}`,
+  friends: () => '#/friends',
+  chat: (friendId: string) => `#/friends/${encodeURIComponent(friendId)}`,
+  character: (id: string, version = '1') => `#/characters/${encodeURIComponent(id)}?v=${encodeURIComponent(version)}`,
+  story: (id: string, version = '1') => `#/stories/${encodeURIComponent(id)}?v=${encodeURIComponent(version)}`,
+  storyPrepare: (id: string, version = '1', withFriend?: string | null, from?: string | null) => `#/stories/${encodeURIComponent(id)}/prepare?${new URLSearchParams({v: version, ...(withFriend ? {with: withFriend} : {}), ...(from ? {from} : {})})}`,
+  storyPlay: (id: string) => `#/play/story/${encodeURIComponent(id)}`,
+  gamePrepare: (gameId: string, withFriend?: string | null, from?: string | null) => `#/games/${encodeURIComponent(gameId)}/prepare${withFriend || from ? `?${new URLSearchParams({...(withFriend ? {with: withFriend} : {}), ...(from ? {from} : {})})}` : ''}`,
+  gamePlay: (id: string) => `#/play/game/${encodeURIComponent(id)}`,
+  recent: (archived = false) => `#/recent${archived ? '?archived=1' : ''}`,
+  create: () => '#/create',
+  work: (id: string) => `#/create/${encodeURIComponent(id)}`,
+  account: () => '#/account',
+}
+
+const listeners = new Set<() => void>()
+let currentHash = typeof window !== 'undefined' ? window.location.hash : ''
+function sync() {
+  const legacy = mapLegacy(window.location.hash)
+  if (legacy) { history.replaceState(history.state, '', legacy); }
+  if (window.location.hash !== currentHash) { currentHash = window.location.hash; listeners.forEach(fn => fn()) }
+}
+if (typeof window !== 'undefined') {
+  const legacy = mapLegacy(window.location.hash)
+  if (legacy) { history.replaceState(history.state, '', legacy); currentHash = legacy }
+  window.addEventListener('hashchange', sync)
+  window.addEventListener('popstate', sync)
+}
+export function navigate(hash: string, options: {replace?: boolean} = {}) {
+  if (hash === window.location.hash) return
+  if (options.replace) history.replaceState(history.state, '', hash)
+  else history.pushState(null, '', hash)
+  sync()
+}
+export function useRoute(): Route {
+  const hash = useSyncExternalStore(fn => { listeners.add(fn); return () => { listeners.delete(fn) } }, () => currentHash, () => '')
+  return parseHash(hash)
+}
+export const currentRouteHash = () => currentHash
diff --git a/everwith-claude-frontend/src/app/store.ts b/everwith-claude-frontend/src/app/store.ts
new file mode 100644
index 00000000..575ec206
--- /dev/null
+++ b/everwith-claude-frontend/src/app/store.ts
@@ -0,0 +1,82 @@
+/** App-level session state: account, language, friends cache, sign-in gate, toasts. */
+import {useSyncExternalStore} from 'react'
+import {api} from '../api/adapter'
+import {CompanionRequestError} from '../contracts/companion'
+import type {AccountSession, CompanionFriend} from '../contracts/companion'
+import type {I18nKey} from './i18n'
+import {readJSON, writeJSON} from '../lib/util'
+import type {Lang} from '../lib/util'
+
+export type Toast = {id: number; text: string; kind: 'info' | 'error' | 'success'}
+export type AppState = {
+  lang: Lang
+  account: AccountSession | null
+  accountError: string | null
+  friends: CompanionFriend[] | null
+  friendsError: string | null
+  authPrompt: {action: I18nKey; id: number} | null
+  toasts: Toast[]
+  navCollapsed: boolean
+  reducedMotion: boolean
+}
+const LANG_KEY = 'everwith.ui.lang', NAV_KEY = 'everwith.ui.navCollapsed', MOTION_KEY = 'everwith.ui.reducedMotion'
+const systemMotion = typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches
+let state: AppState = {
+  lang: readJSON<Lang>(LANG_KEY, (typeof navigator !== 'undefined' && navigator.language.startsWith('en') ? 'en' : 'zh')),
+  account: null, accountError: null, friends: null, friendsError: null, authPrompt: null, toasts: [],
+  navCollapsed: readJSON<boolean>(NAV_KEY, false), reducedMotion: readJSON<boolean | null>(MOTION_KEY, null) ?? systemMotion,
+}
+const listeners = new Set<() => void>()
+const set = (patch: Partial<AppState>) => { state = {...state, ...patch}; listeners.forEach(fn => fn()) }
+export const appStore = {
+  subscribe(fn: () => void) { listeners.add(fn); return () => { listeners.delete(fn) } },
+  get: () => state,
+}
+export function useApp<T>(select: (s: AppState) => T): T {
+  return useSyncExternalStore(appStore.subscribe, () => select(state), () => select(state))
+}
+
+let toastSeq = 0
+export function toast(text: string, kind: Toast['kind'] = 'info') {
+  const id = ++toastSeq
+  set({toasts: [...state.toasts, {id, text, kind}].slice(-4)})
+  setTimeout(() => set({toasts: state.toasts.filter(t => t.id !== id)}), 5200)
+}
+export function setLang(lang: Lang) { writeJSON(LANG_KEY, lang); document.documentElement.lang = lang === 'zh' ? 'zh-CN' : 'en'; set({lang}) }
+export function setNavCollapsed(v: boolean) { writeJSON(NAV_KEY, v); set({navCollapsed: v}) }
+export function setReducedMotion(v: boolean) { writeJSON(MOTION_KEY, v); set({reducedMotion: v}) }
+
+export async function loadAccount() {
+  try { const account = await api.account.get(); set({account, accountError: null}); if (account.authenticated) void refreshFriends() ; else set({friends: []}) }
+  catch (e) { set({accountError: e instanceof CompanionRequestError ? e.code : 'network_error'}) }
+}
+export function setAccount(account: AccountSession) {
+  const changed = state.account?.account?.id !== account.account?.id
+  set({account, ...(changed ? {friends: null} : {})})
+  if (account.authenticated) void refreshFriends(); else set({friends: []})
+}
+let friendsFlight = 0
+export async function refreshFriends() {
+  const acc = state.account
+  if (!acc?.authenticated || !acc.account) { set({friends: []}); return }
+  const flight = ++friendsFlight
+  try {
+    const {items} = await api.friends.list(acc.account.id)
+    // A late answer for a previous account must never overwrite the current one.
+    if (flight === friendsFlight && state.account?.account?.id === acc.account.id) set({friends: items, friendsError: null})
+  } catch (e) {
+    if (flight !== friendsFlight) return
+    if (e instanceof CompanionRequestError && e.code === 'auth_session_required') { void loadAccount(); return }
+    set({friendsError: e instanceof CompanionRequestError ? e.code : 'network_error'})
+  }
+}
+
+/** Sign-in gate for protected actions. Resolves true once signed in, false if cancelled. */
+let pendingAuth: ((ok: boolean) => void) | null = null, authSeq = 0
+export function requireSignIn(action: I18nKey): Promise<boolean> {
+  if (state.account?.authenticated) return Promise.resolve(true)
+  pendingAuth?.(false)
+  return new Promise(resolve => { pendingAuth = resolve; set({authPrompt: {action, id: ++authSeq}}) })
+}
+export function resolveAuth(ok: boolean) { const r = pendingAuth; pendingAuth = null; set({authPrompt: null}); r?.(ok) }
+export function openSignIn(action: I18nKey = 'auth.action.generic') { void requireSignIn(action) }
diff --git a/everwith-claude-frontend/src/art/generated.ts b/everwith-claude-frontend/src/art/generated.ts
new file mode 100644
index 00000000..3b06882d
--- /dev/null
+++ b/everwith-claude-frontend/src/art/generated.ts
@@ -0,0 +1,45 @@
+/**
+ * Images from the user-provided GPT batch v2-batch-01 — NOT part of the handoff package.
+ * Rights: 用户经 GPT 生成并提供；商用/再分发权未核实. Files are resized copies in
+ * public/generated/batch-01; originals, hashes, prompts and the chosen variants are in
+ * docs/GENERATED_ASSETS.json (`npm run assets:generated` re-checks them).
+ * Presentation only: a backdrop or cover never stands in for a character's face, and
+ * every image has a plain fallback when it is missing.
+ */
+import type {CharacterKey} from '../live2d/characters'
+
+export const GENERATED_RIGHTS = '用户经 GPT 生成并提供；商用/再分发权未核实'
+export const GEN = '/generated/batch-01'
+
+/** Room behind a character's stage. Characters without their own (user-created works) get the generic room. */
+export const backdropFor = (key: CharacterKey | null | undefined): string => `${GEN}/backdrop-${key ?? 'generic'}.webp`
+
+export type SpotArtKind = 'friends' | 'recent' | 'create' | 'not-found' | 'load-error' | 'signin'
+export const SPOT_ART: Record<SpotArtKind, string> = {
+  friends: `${GEN}/empty-friends.webp`, recent: `${GEN}/empty-recent.webp`, create: `${GEN}/empty-create.webp`,
+  'not-found': `${GEN}/state-not-found.webp`, 'load-error': `${GEN}/state-load-error.webp`, signin: `${GEN}/state-signin.webp`,
+}
+/** “Not found”, “sign in” and “failed to load” are different states with different pictures. */
+export const errorArt = (code: string | null | undefined): SpotArtKind =>
+  code === 'not_found' ? 'not-found' : code === 'auth_session_required' ? 'signin' : 'load-error'
+
+export const CREATE_TYPE_ART = {story: `${GEN}/create-type-story.webp`, character: `${GEN}/create-type-character.webp`} as const
+
+/** Cover choices for the user's own works (stored in the draft as the id, never as a URL). */
+export const WORK_COVERS = ['work-cover-01', 'work-cover-02', 'work-cover-03', 'work-cover-04', 'work-cover-05', 'work-cover-06'] as const
+export type WorkCoverId = (typeof WORK_COVERS)[number]
+export const isWorkCover = (v: unknown): v is WorkCoverId => typeof v === 'string' && (WORK_COVERS as readonly string[]).includes(v)
+export const workCoverUrl = (id: unknown): string | null => isWorkCover(id) ? `${GEN}/${id}.webp` : null
+
+/** Persona avatars are objects, not people, so they are never mistaken for a character. */
+export const PERSONA_AVATARS = ['persona-avatar-01', 'persona-avatar-02', 'persona-avatar-03', 'persona-avatar-04', 'persona-avatar-05', 'persona-avatar-06', 'persona-avatar-07', 'persona-avatar-08'] as const
+export type PersonaAvatarId = (typeof PERSONA_AVATARS)[number]
+export const isPersonaAvatar = (v: unknown): v is PersonaAvatarId => typeof v === 'string' && (PERSONA_AVATARS as readonly string[]).includes(v)
+export const personaAvatarUrl = (id: unknown): string | null => isPersonaAvatar(id) ? `${GEN}/${id}.webp` : null
+export const PERSONA_AVATAR_LABELS: Record<PersonaAvatarId, {zh: string; en: string}> = {
+  'persona-avatar-01': {zh: '雨伞', en: 'Umbrella'}, 'persona-avatar-02': {zh: '灯笼', en: 'Lantern'}, 'persona-avatar-03': {zh: '茶杯', en: 'Teacup'},
+  'persona-avatar-04': {zh: '狐狸', en: 'Fox'}, 'persona-avatar-05': {zh: '睡着的猫', en: 'Sleeping cat'}, 'persona-avatar-06': {zh: '猫头鹰', en: 'Owl'},
+  'persona-avatar-07': {zh: '纸船', en: 'Paper boat'}, 'persona-avatar-08': {zh: '月亮', en: 'Crescent moon'},
+}
+
+export const BRAND_EMBLEM = `${GEN}/brand-emblem.png`
diff --git a/everwith-claude-frontend/src/chat/Composer.tsx b/everwith-claude-frontend/src/chat/Composer.tsx
new file mode 100644
index 00000000..383f9982
--- /dev/null
+++ b/everwith-claude-frontend/src/chat/Composer.tsx
@@ -0,0 +1,120 @@
+import {useEffect, useId, useLayoutEffect, useRef, useState} from 'react'
+import type {FormEvent, RefObject} from 'react'
+import {ArrowUp, Asterisk, Square, Zap} from 'lucide-react'
+import {RichText} from './RichText'
+import {useI18n} from '../app/i18n'
+
+/**
+ * Free input is always the primary entry. Enter sends, Shift+Enter breaks lines.
+ * IME safety: no send while composing (compositionstart/end, KeyboardEvent.isComposing,
+ * keyCode 229) and none for the trailing Enter some platforms deliver right after
+ * compositionend. NOTE: verified with synthetic events only; a real macOS Chinese IME
+ * pass still has to be done by a person (see ACCEPTANCE.md A04).
+ */
+export function Composer({value, onChange, onSubmit, onStop, busy = false, disabled = false, canSend = true, maxLength = 2000, label, placeholder, hints, inputRef, describedBy, selection, onSelection, extra}: {
+  value: string; onChange: (text: string) => void; onSubmit: (text: string) => void; onStop?: () => void
+  busy?: boolean; disabled?: boolean; canSend?: boolean; maxLength?: number; label: string; placeholder: string
+  hints?: {title: string; items: string[]; note: string} | null; inputRef?: RefObject<HTMLTextAreaElement | null>; describedBy?: string
+  selection?: {start: number; end: number} | null; onSelection?: (s: {start: number; end: number}) => void; extra?: React.ReactNode
+}) {
+  const {t} = useI18n()
+  const own = useRef<HTMLTextAreaElement>(null), ref = inputRef ?? own
+  const composing = useRef(false), compositionEnded = useRef(-Infinity)
+  const pendingFocus = useRef<(() => void) | null>(null)
+  const [hintsOpen, setHintsOpen] = useState(false)
+  const [hintChoice, setHintChoice] = useState<string | null>(null)
+  const hintId = useId()
+  useLayoutEffect(() => () => pendingFocus.current?.(), [])
+  // Auto-grow up to a limit, then scroll inside the box.
+  useLayoutEffect(() => { const e = ref.current; if (e) { e.style.height = '46px'; e.style.height = `${Math.min(196, Math.max(46, e.scrollHeight))}px` } }, [value, ref])
+  // Restore the saved caret/selection once (per mount) without stealing focus.
+  const restored = useRef(false)
+  useEffect(() => {
+    const e = ref.current
+    if (!e || restored.current || !selection) return
+    restored.current = true
+    try { e.setSelectionRange(Math.min(selection.start, value.length), Math.min(selection.end, value.length)) } catch { /* ignore */ }
+  }, [selection, value.length, ref])
+  const report = () => { const e = ref.current; if (e && onSelection) onSelection({start: e.selectionStart, end: e.selectionEnd}) }
+  const submit = (e?: FormEvent) => { e?.preventDefault(); if (!busy && !disabled && canSend && value.trim()) onSubmit(value) }
+  const insertStar = () => {
+    const e = ref.current; if (!e || disabled) return
+    const start = e.selectionStart, end = e.selectionEnd, selected = start !== end
+    if (value.length + (selected ? 2 : 1) > maxLength) return
+    pendingFocus.current?.()
+    const doc = e.ownerDocument, owner = doc.activeElement
+    const next = value.slice(0, start) + '*' + value.slice(start, end) + (selected ? '*' : '') + value.slice(end)
+    let retired = false, frame: number | undefined
+    // Never steal a newer focus choice, never write into an unmounted/hidden box.
+    const retire = () => {
+      if (retired) return; retired = true; if (frame !== undefined) cancelAnimationFrame(frame)
+      doc.removeEventListener('focusin', focus, true); doc.removeEventListener('pointerdown', retire, true)
+      doc.removeEventListener('keydown', retire, true); doc.removeEventListener('visibilitychange', visibility)
+      if (pendingFocus.current === retire) pendingFocus.current = null
+    }
+    const focus = (event: FocusEvent) => { if (event.target !== owner && event.target !== doc.body && event.target !== doc.documentElement) retire() }
+    const visibility = () => { if (doc.visibilityState === 'hidden') retire() }
+    pendingFocus.current = retire
+    doc.addEventListener('focusin', focus, true); doc.addEventListener('pointerdown', retire, true)
+    doc.addEventListener('keydown', retire, true); doc.addEventListener('visibilitychange', visibility)
+    onChange(next)
+    frame = requestAnimationFrame(() => {
+      if (retired) return
+      const current = doc.activeElement
+      const valid = ref.current === e && e.isConnected && !e.disabled && e.value === next && doc.visibilityState !== 'hidden'
+        && !e.closest('[hidden],[inert],[aria-hidden="true"],dialog:not([open])') && (current === owner || current === doc.body || current === doc.documentElement)
+      retire()
+      if (valid) { e.focus({preventScroll: true}); e.setSelectionRange(start + 1, selected ? end + 1 : start + 1); report() }
+    })
+  }
+  const applyHint = (hint: string, mode: 'use' | 'keep') => {
+    setHintChoice(null); setHintsOpen(false)
+    if (mode === 'use') onChange(hint.slice(0, maxLength))
+    requestAnimationFrame(() => ref.current?.focus())
+  }
+  return (
+    <div className="ew-composer-wrap">
+      {hints && hintsOpen && (
+        <section className="ew-hints" id={hintId} aria-label={hints.title}>
+          <header><span>{hints.title}</span><button type="button" className="ew-btn ghost small" onClick={() => { setHintsOpen(false); setHintChoice(null) }}>{t('common.close')}</button></header>
+          {hintChoice ? (
+            <div className="ew-hint-confirm" role="group" aria-label={t('chat.draftExists')}>
+              <p>{t('chat.draftExists')}</p>
+              <div className="ew-row wrap">
+                <button type="button" className="ew-btn small" onClick={() => applyHint(hintChoice, 'keep')}>{t('chat.keepDraft')}</button>
+                <button type="button" className="ew-btn small primary" onClick={() => applyHint(hintChoice, 'use')}>{t('chat.useHint')}</button>
+              </div>
+            </div>
+          ) : hints.items.map(h => (
+            <button type="button" className="ew-hint" key={h} disabled={disabled} onClick={() => value.trim() ? setHintChoice(h) : applyHint(h, 'use')}><RichText text={h} /></button>
+          ))}
+          <small>{hints.note}</small>
+        </section>
+      )}
+      <form className="ew-composer" onSubmit={submit}>
+        {hints && <button type="button" className="ew-icon-btn ew-hints-toggle" aria-expanded={hintsOpen} aria-controls={hintId} aria-label={t('chat.hints')} title={t('chat.hints')} disabled={disabled} onPointerDown={e => e.preventDefault()} onClick={() => setHintsOpen(v => !v)}><Zap aria-hidden="true" /></button>}
+        <div className="ew-input-pill">
+          <textarea ref={ref} rows={1} value={value} maxLength={maxLength} disabled={disabled} aria-label={label} aria-describedby={describedBy} placeholder={placeholder}
+            onChange={e => { onChange(e.target.value); report() }} onSelect={report} onKeyUp={report} onBlur={report}
+            onCompositionStart={() => { composing.current = true }}
+            onCompositionEnd={() => { composing.current = false; compositionEnded.current = performance.now() }}
+            onKeyDown={e => {
+              if (e.key !== 'Enter' || e.shiftKey) return
+              const native = e.nativeEvent
+              // Selection Enter inside an IME, or its trailing echo, must never send.
+              if (composing.current || native.isComposing || native.keyCode === 229 || performance.now() - compositionEnded.current < 40) return
+              e.preventDefault(); submit()
+            }} />
+          <button type="button" className="ew-icon-btn ew-star" disabled={disabled || value.length >= maxLength} title={t('chat.asterisk')} aria-label={t('chat.asterisk')} onPointerDown={e => e.preventDefault()} onClick={insertStar}><Asterisk aria-hidden="true" /></button>
+        </div>
+        {extra}
+        {/* Send turns into Stop in the same spot: the second click of a double-click
+            (event.detail 2) must not stop the message that the first click just sent. */}
+        {busy && onStop
+          ? <button type="button" className="ew-send is-stop" onClick={e => { if (e.detail > 1) return; onStop() }} aria-label={t('common.stop')} title={t('common.stop')}><Square aria-hidden="true" /></button>
+          : <button type="submit" className="ew-send" aria-label={t('common.send')} title={t('common.send')} disabled={disabled || busy || !canSend || !value.trim()}><ArrowUp aria-hidden="true" /></button>}
+      </form>
+      <div className="ew-composer-count" aria-hidden="true">{value.length > maxLength * .8 ? `${value.length} / ${maxLength}` : ''}</div>
+    </div>
+  )
+}
diff --git a/everwith-claude-frontend/src/chat/RichText.tsx b/everwith-claude-frontend/src/chat/RichText.tsx
new file mode 100644
index 00000000..4dfbf4f4
--- /dev/null
+++ b/everwith-claude-frontend/src/chat/RichText.tsx
@@ -0,0 +1,70 @@
+/**
+ * Safe rich text: plain React text nodes only (no HTML, no Markdown). `*action*` spans
+ * render as muted italics. Escape rule kept from the frozen 677b1b4b scanner: an odd
+ * run of backslashes before `*` escapes that star (one backslash consumed), an even
+ * run keeps every backslash and the star still delimits; same rule inside and outside.
+ */
+import type {ReactNode} from 'react'
+
+export type Span = {text: string; action: boolean}
+export function parseRichText(text: string, action = false): Span[] {
+  const spans: Span[] = []
+  let plain = '', i = 0
+  const flush = () => { if (plain) { spans.push({text: plain, action}); plain = '' } }
+  while (i < text.length) {
+    if (text[i] === '\\') {
+      const start = i
+      while (text[i] === '\\') i++
+      const escaped = text[i] === '*' && (i - start) % 2 === 1
+      plain += text.slice(start, escaped ? i - 1 : i)
+      if (escaped) { plain += '*'; i++ }
+      continue
+    }
+    if (text[i] === '*') {
+      let end = i + 1, content = ''
+      while (end < text.length) {
+        if (text[end] === '\\') {
+          const start = end
+          while (text[end] === '\\') end++
+          const escaped = text[end] === '*' && (end - start) % 2 === 1
+          content += text.slice(start, escaped ? end - 1 : end)
+          if (escaped) { content += '*'; end++ }
+          continue
+        }
+        if (text[end] === '*') break
+        content += text[end++]
+      }
+      if (end < text.length && end > i + 1) { flush(); spans.push({text: content, action: true}); i = end + 1; continue }
+    }
+    plain += text[i++]
+  }
+  flush()
+  return spans
+}
+export function RichText({text, action = false}: {text: string; action?: boolean}) {
+  return <>{parseRichText(text, action).map((s, n) => s.action ? <em key={n} className="ew-act">{s.text}</em> : <span key={n}>{s.text}</span>)}</>
+}
+
+export function CharacterLine({name, avatar, children, meta, tone, provisional = false, actorKey}: {name: string; avatar: ReactNode; children: ReactNode; meta?: ReactNode; tone?: string; provisional?: boolean; actorKey?: string}) {
+  return (
+    <div className={`ew-msg is-character ${provisional ? 'is-provisional' : ''} ${tone ?? ''}`} data-actor={actorKey}>
+      <span className="ew-msg-avatar">{avatar}</span>
+      <div className="ew-msg-content">
+        <span className="ew-msg-name">{name}{meta}</span>
+        <div className="ew-msg-bubble">{children}</div>
+      </div>
+    </div>
+  )
+}
+export function PlayerLine({children, meta, provisional = false}: {children: ReactNode; meta?: ReactNode; provisional?: boolean}) {
+  return (
+    <div className={`ew-msg is-player ${provisional ? 'is-provisional' : ''}`}>
+      <div className="ew-msg-bubble">{children}</div>
+      {meta && <div className="ew-msg-meta">{meta}</div>}
+    </div>
+  )
+}
+export function NarrationLine({children}: {children: ReactNode}) {
+  return <div className="ew-msg is-narration"><p><RichTextChildren>{children}</RichTextChildren></p></div>
+}
+function RichTextChildren({children}: {children: ReactNode}) { return <>{children}</> }
diff --git a/everwith-claude-frontend/src/chat/presentation.ts b/everwith-claude-frontend/src/chat/presentation.ts
new file mode 100644
index 00000000..050b18b2
--- /dev/null
+++ b/everwith-claude-frontend/src/chat/presentation.ts
@@ -0,0 +1,26 @@
+/** Presentation-only helpers: drafts, reading anchors, expression cues. No server state. */
+import {readJSON, writeJSON, removeKey} from '../lib/util'
+import type {Expression} from '../live2d/performer'
+
+export type DraftScope = {accountId: string; friendId: string; epoch: number; conversationId: string}
+const draftKey = (s: DraftScope) => `everwith.draft.v1:${JSON.stringify([s.accountId, s.friendId, s.epoch, s.conversationId])}`
+export type Draft = {text: string; start: number; end: number}
+export function readDraft(s: DraftScope): Draft | null { return readJSON<Draft | null>(draftKey(s), null) }
+export function writeDraft(s: DraftScope, d: Draft) { if (d.text) writeJSON(draftKey(s), d); else removeKey(draftKey(s)) }
+
+/** Reading position (anchor message + offset), per account/friend/epoch/conversation. */
+export type ReadingPosition = {anchorId: string | null; offset: number; atEnd: boolean}
+const readingKey = (s: DraftScope) => `everwith.reading.v1:${JSON.stringify([s.accountId, s.friendId, s.epoch, s.conversationId])}`
+export function readReading(s: DraftScope): ReadingPosition | null { return readJSON<ReadingPosition | null>(readingKey(s), null, 'session') }
+export function writeReading(s: DraftScope, p: ReadingPosition) { writeJSON(readingKey(s), p, 'session') }
+
+/**
+ * Local deterministic cue from VISIBLE public text only (provider_mode
+ * local_deterministic). Only the three supported faces; anything else stays neutral.
+ */
+export function expressionForText(text: string): Expression {
+  const t = text.replace(/\*[^*]*\*/g, ' ')
+  if (/[!！]{1}.*[?？]|[?？][!！]|真的|竟然|居然|不会吧|等等|really|wait|seriously|no way/i.test(t)) return 'surprised'
+  if (/笑|开心|谢谢|好啊|不错|太好了|高兴|glad|smile|great|sure|thanks|happy|nice/i.test(text)) return 'happy'
+  return 'neutral'
+}
diff --git a/everwith-claude-frontend/src/chat/stream-controller.ts b/everwith-claude-frontend/src/chat/stream-controller.ts
new file mode 100644
index 00000000..7e86dac2
--- /dev/null
+++ b/everwith-claude-frontend/src/chat/stream-controller.ts
@@ -0,0 +1,230 @@
+/**
+ * Private chat operation controller. Extends the frozen candidate
+ * (reference/contracts/stream-candidate/private-stream-controller.ts) with explicit
+ * Retry, unknown-result lookup and resume, keeping its guarantees:
+ *  - every intent freezes its binding (account/friend/epoch/session/revision/head);
+ *  - public frames are presentation only — history changes only from a verified receipt;
+ *  - a generation counter retires every older run, stream and late response;
+ *  - Stop calls the real cancel endpoint and reports the server's terminal state.
+ */
+import {CompanionRequestError} from '../contracts/companion'
+import {parsePrivateOperation, parsePrivateSnapshot} from '../contracts/private-chat-client'
+import type {PrivateOperation, PrivateSnapshot} from '../contracts/private-chat-client'
+import {readPrivatePublicStream} from '../contracts/private-chat-recovery'
+import {createPublicReceiver, parsePublicBinding} from '../contracts/public-events'
+import type {PublicAdmission, PublicBinding, PublicSegment} from '../contracts/public-events'
+import {randomId, sleep} from '../lib/util'
+import type {Lang} from '../lib/util'
+
+export type ChatPhase = 'idle' | 'sending' | 'starting' | 'generating' | 'awaiting_commit' | 'cancelling' | 'cancelled' | 'committed' | 'interrupted' | 'failed' | 'unknown' | 'stale'
+export type ChatNoticeKind = 'commit_won' | 'cancelled' | 'retryable' | 'failed' | 'stale' | 'epoch_changed' | 'unknown' | 'read_only' | 'auth' | 'forbidden' | 'lookup_missing' | 'not_retryable' | 'network'
+export type ChatView = {
+  phase: ChatPhase
+  history: PrivateSnapshot
+  provisional: PublicSegment[]
+  /** Frozen text of the in-flight / unconfirmed command (shown as the sent receipt). */
+  input: string
+  pendingKey: string | null
+  language: Lang
+  notice: {kind: ChatNoticeKind; at: number} | null
+  ignoredFrames: number
+  /** Text to put back into the composer after a cancel/stale/failure (never auto-sent). */
+  restore: {text: string; at: number} | null
+}
+export type ChatTransport = {
+  send(command: {key: string; text: string; language: Lang; presented_turn_id: string; expected_revision: number}, signal?: AbortSignal): Promise<{operation: PrivateOperation; admission: PublicAdmission}>
+  stream(admission: PublicAdmission, signal: AbortSignal): Promise<Response>
+  cancel(operationId: string): Promise<PrivateOperation>
+  receipt(operationId: string): Promise<{owner_id: string; operation: unknown; snapshot: unknown; admission: PublicAdmission | null}>
+  retry(operationId: string): Promise<{operation: PrivateOperation; admission: PublicAdmission}>
+  lookup(key: string): Promise<{operation: PrivateOperation; admission: PublicAdmission | null; text: string}>
+  read(): Promise<PrivateSnapshot>
+}
+const ACTIVE: ChatPhase[] = ['sending', 'starting', 'generating', 'awaiting_commit', 'cancelling']
+
+export function createChatController(initial: PrivateSnapshot, base: Omit<PublicBinding, 'revision' | 'head_turn_id'>, transport: ChatTransport) {
+  const friendId = initial.conversation.friend_id, epoch = initial.conversation.friend_epoch
+  let view: ChatView = {phase: initial.pending_operation ? 'interrupted' : 'idle', history: initial, provisional: [], input: initial.pending_expression ?? '', pendingKey: null, language: 'zh', notice: null, ignoredFrames: 0, restore: null}
+  const listeners = new Set<() => void>()
+  let generation = 0, disposed = false, admission: PublicAdmission | null = null, abort: AbortController | null = null
+  let ticket: {run: number; cancelRequested: boolean; dispatched: boolean; cancelRun: number | null} | null = null
+  const live = (run: number) => !disposed && run === generation
+  const publish = (patch: Partial<ChatView>) => { if (!disposed) { view = {...view, ...patch}; listeners.forEach(fn => fn()) } }
+  const note = (kind: ChatNoticeKind) => ({kind, at: Date.now()})
+  const frozen = (): PublicBinding => parsePublicBinding({...base, revision: view.history.history.position.revision, head_turn_id: view.history.history.position.head_turn_id})
+  const same = (a: PublicBinding, b: PublicBinding) => JSON.stringify(a) === JSON.stringify(b)
+
+  async function refresh(run: number) {
+    try { const snapshot = await transport.read(); if (live(run)) publish({history: snapshot}) } catch { /* keep the last valid history */ }
+  }
+  function fail(error: unknown, run: number, input: string) {
+    if (!live(run)) return
+    const code = error instanceof CompanionRequestError ? error.code : 'network_error'
+    const restore = input ? {text: input, at: Date.now()} : null
+    if (code === 'network_error') { publish({phase: 'unknown', provisional: [], notice: note('unknown')}); return }
+    if (code === 'stale_revision' || code === 'operation_pending') { publish({phase: 'stale', provisional: [], input: '', pendingKey: null, notice: note('stale'), restore}); void refresh(run); return }
+    if (code === 'friend_epoch_changed' || code === 'account_changed') { publish({phase: 'failed', provisional: [], input: '', pendingKey: null, notice: note('epoch_changed'), restore}); return }
+    if (code === 'conversation_read_only') { publish({phase: 'failed', provisional: [], input: '', pendingKey: null, notice: note('read_only'), restore}); void refresh(run); return }
+    if (code === 'auth_session_required') { publish({phase: 'failed', provisional: [], input: '', pendingKey: null, notice: note('auth'), restore}); return }
+    if (code === 'forbidden') { publish({phase: 'failed', provisional: [], input: '', pendingKey: null, notice: note('forbidden'), restore}); return }
+    publish({phase: 'interrupted', provisional: [], notice: note('network')})
+  }
+
+  async function verify(expected: PublicAdmission, run: number, attempts = 0): Promise<void> {
+    const receipt = await transport.receipt(expected.operation_id)
+    if (!live(run)) return
+    if (receipt.owner_id !== expected.binding.account_id) throw new CompanionRequestError('account_changed')
+    const operation = parsePrivateOperation(receipt.operation)
+    if (operation.operation_id !== expected.operation_id) throw new CompanionRequestError('invalid_response')
+    const snapshot = parsePrivateSnapshot(receipt.snapshot, friendId, epoch)
+    if (operation.status === 'committed') {
+      if (snapshot.conversation.id !== expected.binding.session_id || snapshot.history.position.revision <= expected.binding.revision
+        || !snapshot.history.turns.some(t => t.turn_id === operation.turn_id)) throw new CompanionRequestError('checkpoint_changed')
+      publish({phase: 'committed', history: snapshot, provisional: [], input: '', pendingKey: null})
+    } else if (operation.status === 'cancelled') {
+      publish({phase: 'cancelled', history: snapshot, provisional: [], input: '', pendingKey: null, notice: note('cancelled'), restore: view.input ? {text: view.input, at: Date.now()} : null})
+    } else if (operation.status === 'retryable_failed') {
+      publish({phase: 'interrupted', history: snapshot, provisional: [], notice: note('retryable')})
+    } else if (operation.status === 'failed_final' || operation.status === 'stale') {
+      publish({phase: 'failed', history: snapshot, provisional: [], input: '', pendingKey: null, notice: note(operation.status === 'stale' ? 'stale' : 'failed'), restore: view.input ? {text: view.input, at: Date.now()} : null})
+    } else {
+      // A `complete` frame is not a commit. Ask the authority again (bounded), never assume.
+      publish({phase: 'awaiting_commit'})
+      if (attempts > 60) { publish({phase: 'unknown', notice: note('unknown')}); return }
+      await sleep(250)
+      if (live(run)) await verify(expected, run, attempts + 1)
+    }
+  }
+
+  async function runStream(expected: PublicAdmission, run: number) {
+    admission = expected
+    const receiver = createPublicReceiver(expected)
+    publish({phase: 'starting', provisional: []})
+    abort = new AbortController()
+    const response = await transport.stream(expected, abort.signal)
+    let ignored = 0
+    const finished = await readPrivatePublicStream(response, abort.signal, () => live(run), event => {
+      if (!live(run)) return
+      const outcome = receiver.receive(event)
+      if (outcome === 'ignored') { ignored++; publish({ignoredFrames: view.ignoredFrames + 1}); return }
+      const snap = receiver.snapshot()
+      // Public terminal frames retire presentation; they never unlock a write by themselves.
+      const phase: ChatPhase = snap.phase === 'waiting_start' ? 'starting' : snap.phase === 'generating' ? 'generating' : 'awaiting_commit'
+      publish({phase, provisional: snap.segments})
+    })
+    void ignored
+    if (finished && live(run)) { receiver.finish(); await verify(expected, run) }
+  }
+
+  async function cancelKnown(expected: PublicAdmission, run: number) {
+    const result = await transport.cancel(expected.operation_id)
+    if (!live(run)) return
+    if (result.operation_id !== expected.operation_id) throw new CompanionRequestError('invalid_response')
+    if (result.status === 'cancelled') { await verify(expected, run) }
+    else if (result.status === 'committed') { await verify(expected, run); if (live(run)) publish({notice: note('commit_won')}) }
+    else publish({phase: 'interrupted', provisional: []})
+  }
+
+  return {
+    subscribe(fn: () => void) { listeners.add(fn); return () => { listeners.delete(fn) } },
+    getSnapshot: () => view,
+    /** Explicit send. One intent → one key; the caller decides nothing else. */
+    async start(input: string, language: Lang, key = randomId('cmd', 10)) {
+      if (disposed || view.history.conversation.status !== 'active' || view.history.pending_operation) return false
+      if (ACTIVE.includes(view.phase) || view.phase === 'unknown' || !input.trim() || input.length > 2000) return false
+      const binding = frozen()
+      const run = ++generation, current = {run, cancelRequested: false, dispatched: false, cancelRun: null as number | null}
+      ticket = current; admission = null; abort = new AbortController()
+      publish({phase: 'sending', provisional: [], input, pendingKey: key, language, notice: null, restore: null})
+      try {
+        current.dispatched = true
+        // The send itself is never aborted: leaving the page (dispose) must not turn an
+        // already-sent message into an unknown one. Only the presentation stream is aborted.
+        const started = await transport.send({key, text: input, language, presented_turn_id: binding.head_turn_id, expected_revision: binding.revision})
+        if (!same(started.admission.binding, binding)) throw new CompanionRequestError('checkpoint_changed')
+        if (!disposed && ticket === current) admission = started.admission
+        if (!live(run)) {
+          // Stop won the race against the receipt: cancel the now-known operation once.
+          if (!disposed && ticket === current && current.cancelRequested && current.cancelRun !== null) await cancelKnown(started.admission, current.cancelRun)
+          return true
+        }
+        await runStream(started.admission, run)
+      } catch (error) {
+        if (error instanceof DOMException && error.name === 'AbortError') return true
+        fail(error, live(run) ? run : current.cancelRun ?? -1, input)
+      }
+      return true
+    },
+    async cancel() {
+      if (disposed || !['sending', 'starting', 'generating', 'awaiting_commit'].includes(view.phase)) return
+      if (ticket) ticket.cancelRequested = true
+      const run = ++generation
+      if (ticket) ticket.cancelRun = run
+      if (admission) abort?.abort()
+      publish({phase: 'cancelling', provisional: []})
+      if (!admission) return // The receipt is still in flight; it will be cancelled once known.
+      try { await cancelKnown(admission, run) } catch (error) { fail(error, run, view.input) }
+    },
+    /** Explicit retry of the SAME operation/key/input/baseline. Never automatic. */
+    async retry() {
+      const op = view.history.pending_operation
+      if (disposed || !op || op.status !== 'retryable_failed') return
+      const run = ++generation
+      publish({phase: 'starting', notice: null, provisional: [], input: view.history.pending_expression ?? view.input})
+      try {
+        const started = await transport.retry(op.operation_id)
+        if (!live(run)) return
+        if (started.operation.operation_id !== op.operation_id) throw new CompanionRequestError('invalid_response')
+        await runStream(started.admission, run)
+      } catch (error) {
+        if (error instanceof CompanionRequestError && error.code === 'operation_not_retryable') { publish({notice: note('not_retryable')}); void refresh(run); return }
+        fail(error, run, view.input)
+      }
+    },
+    /** Result unknown: ask about the ORIGINAL key before anything else. */
+    async lookup() {
+      if (disposed || view.phase !== 'unknown' || !view.pendingKey) return
+      const run = ++generation, key = view.pendingKey
+      try {
+        const found = await transport.lookup(key)
+        if (!live(run)) return
+        if (found.admission) { await runStream(found.admission, run); return }
+        const fake: PublicAdmission = {version: 'private-public-segments.v1', operation_id: found.operation.operation_id, run_epoch: 1, binding: frozen()}
+        await verify(fake, run)
+      } catch (error) {
+        if (!live(run)) return
+        if (error instanceof CompanionRequestError && error.code === 'operation_not_found') { publish({notice: note('lookup_missing')}); return }
+        publish({notice: note('unknown')})
+      }
+    },
+    /** After a confirmed “not found”, resend with the SAME key (server stays idempotent). */
+    async resendSameKey() {
+      if (view.phase !== 'unknown' || !view.pendingKey) return
+      const key = view.pendingKey, text = view.input
+      view = {...view, phase: 'idle'}
+      await this.start(text, view.language, key)
+    },
+    /** Re-attach to an operation that was pending when this page (re)loaded. */
+    async resume() {
+      const op = view.history.pending_operation
+      if (disposed || !op) return
+      const run = ++generation
+      try {
+        const receipt = await transport.receipt(op.operation_id)
+        if (!live(run)) return
+        const status = parsePrivateOperation(receipt.operation).status
+        if (status === 'retryable_failed') { publish({phase: 'interrupted', input: view.history.pending_expression ?? '', notice: note('retryable')}); return }
+        if (receipt.admission) { publish({input: view.history.pending_expression ?? ''}); await runStream(receipt.admission, run); return }
+        const fake: PublicAdmission = {version: 'private-public-segments.v1', operation_id: op.operation_id, run_epoch: 1, binding: frozen()}
+        await verify(fake, run)
+      } catch (error) { fail(error, run, view.input) }
+    },
+    /** Replace history after an out-of-band authority action (rollback, correction, reread). */
+    replaceHistory(snapshot: PrivateSnapshot) { if (!ACTIVE.includes(view.phase)) { ++generation; publish({history: snapshot, phase: snapshot.pending_operation ? 'interrupted' : 'idle', provisional: []}) } },
+    dismissNotice() { publish({notice: null}) },
+    consumeRestore() { const r = view.restore; if (r) publish({restore: null}); return r },
+    suspend() { ++generation; abort?.abort(); if (ACTIVE.includes(view.phase)) publish({phase: 'interrupted', provisional: []}) },
+    dispose() { disposed = true; ++generation; abort?.abort(); listeners.clear() },
+  }
+}
+export type ChatController = ReturnType<typeof createChatController>
diff --git a/everwith-claude-frontend/src/components/Art.tsx b/everwith-claude-frontend/src/components/Art.tsx
new file mode 100644
index 00000000..9c1450ea
--- /dev/null
+++ b/everwith-claude-frontend/src/components/Art.tsx
@@ -0,0 +1,29 @@
+import {useEffect, useState} from 'react'
+import {useAssetUrl} from './Portrait'
+import {SPOT_ART} from '../art/generated'
+import type {SpotArtKind} from '../art/generated'
+
+/**
+ * Decorative room behind a character (generated batch). If the file is missing the
+ * surface keeps its own gradient — nothing else is substituted, and never a face.
+ */
+export function StageBackdrop({src, position, className = ''}: {src: string | null | undefined; position?: string; className?: string}) {
+  const url = useAssetUrl(src)
+  const [failed, setFailed] = useState(false)
+  useEffect(() => setFailed(false), [url])
+  if (!url || failed) return null
+  return (
+    <div className={`ew-backdrop ${className}`} aria-hidden="true">
+      <img src={url} alt="" decoding="async" draggable={false} style={position ? {objectPosition: position} : undefined} onError={() => setFailed(true)} />
+    </div>
+  )
+}
+
+/** Illustration for an empty / error / sign-in state. Decorative: the heading carries the meaning. */
+export function SpotArt({kind, className = ''}: {kind: SpotArtKind; className?: string}) {
+  const url = useAssetUrl(SPOT_ART[kind])
+  const [failed, setFailed] = useState(false)
+  useEffect(() => setFailed(false), [url])
+  if (!url || failed) return null
+  return <img className={`ew-spot ${className}`} src={url} alt="" aria-hidden="true" decoding="async" draggable={false} width={160} height={160} data-art={kind} onError={() => setFailed(true)} />
+}
diff --git a/everwith-claude-frontend/src/components/Dialog.tsx b/everwith-claude-frontend/src/components/Dialog.tsx
new file mode 100644
index 00000000..01370a9f
--- /dev/null
+++ b/everwith-claude-frontend/src/components/Dialog.tsx
@@ -0,0 +1,61 @@
+import {useEffect, useId, useRef} from 'react'
+import type {ReactNode} from 'react'
+import {X} from 'lucide-react'
+import {useModalFocusReturn} from './use-modal-focus-return'
+import {useI18n} from '../app/i18n'
+
+let lastFullscreenExit = 0
+if (typeof document !== 'undefined') document.addEventListener('fullscreenchange', () => { if (!document.fullscreenElement) lastFullscreenExit = performance.now() })
+
+/**
+ * One modal layer at a time. Esc order: while the page is fullscreen, the first Esc
+ * belongs to the browser (exit fullscreen); only a later Esc closes this dialog.
+ * Focus returns to the opener (or the nearest sensible control) on close.
+ */
+export function Dialog({title, children, onClose, footer, wide = false, initialFocus, dismissible = true, className = ''}: {
+  title: string; children: ReactNode; onClose: () => void; footer?: ReactNode; wide?: boolean; initialFocus?: string; dismissible?: boolean; className?: string
+}) {
+  const ref = useRef<HTMLDialogElement>(null)
+  const id = useId()
+  const {t} = useI18n()
+  useModalFocusReturn(ref, {initialFocusSelector: initialFocus})
+  useEffect(() => {
+    const dialog = ref.current
+    if (!dialog) return
+    const cancel = (event: Event) => {
+      event.preventDefault()
+      if (!dismissible) return
+      if (document.fullscreenElement || performance.now() - lastFullscreenExit < 300) return
+      onClose()
+    }
+    dialog.addEventListener('cancel', cancel)
+    return () => dialog.removeEventListener('cancel', cancel)
+  }, [onClose, dismissible])
+  return (
+    <dialog ref={ref} className={`ew-dialog ${wide ? 'is-wide' : ''} ${className}`} aria-labelledby={`${id}-title`}
+      onMouseDown={e => { if (dismissible && e.target === ref.current) onClose() }}>
+      <div className="ew-dialog-panel">
+        <header className="ew-dialog-head">
+          <h2 id={`${id}-title`}>{title}</h2>
+          {dismissible && <button type="button" className="ew-icon-btn" aria-label={t('common.close')} title={t('common.close')} onClick={onClose}><X size={20} aria-hidden="true" /></button>}
+        </header>
+        <div className="ew-dialog-body">{children}</div>
+        {footer && <footer className="ew-dialog-foot">{footer}</footer>}
+      </div>
+    </dialog>
+  )
+}
+
+export function ConfirmDialog({title, body, confirmLabel, danger = false, onConfirm, onCancel, busy = false}: {
+  title: string; body: ReactNode; confirmLabel: string; danger?: boolean; onConfirm: () => void; onCancel: () => void; busy?: boolean
+}) {
+  const {t} = useI18n()
+  return (
+    <Dialog title={title} onClose={onCancel} initialFocus="[data-autofocus]" footer={<>
+      <button type="button" className="ew-btn ghost" onClick={onCancel} data-autofocus>{t('common.cancel')}</button>
+      <button type="button" className={`ew-btn ${danger ? 'danger' : 'primary'}`} disabled={busy} onClick={onConfirm}>{confirmLabel}</button>
+    </>}>
+      <div className="ew-prose">{body}</div>
+    </Dialog>
+  )
+}
diff --git a/everwith-claude-frontend/src/components/Portrait.tsx b/everwith-claude-frontend/src/components/Portrait.tsx
new file mode 100644
index 00000000..b68f5f0e
--- /dev/null
+++ b/everwith-claude-frontend/src/components/Portrait.tsx
@@ -0,0 +1,32 @@
+import {useEffect, useState, useSyncExternalStore} from 'react'
+import {scenarios} from '../mock/scenarios'
+
+/** Package files (/handoff/) and the user-provided generated batch (/generated/) both go “missing” in that scenario. */
+export function missingUrl(src: string): string {
+  for (const prefix of ['/handoff/', '/generated/']) if (src.startsWith(prefix)) return src.replace(prefix, `${prefix}__missing__/`)
+  return src
+}
+/** Rewrites asset URLs when the “assets missing” mock scenario is on. */
+export function useAssetUrl(src: string | null | undefined): string | null {
+  const missing = useSyncExternalStore(scenarios.subscribe, () => scenarios.isOn('assets.missing'), () => false)
+  if (!src) return null
+  return missing ? missingUrl(src) : src
+}
+
+/**
+ * Image bound to an identity. On failure it shows a neutral placeholder with the
+ * same person's initial — never another character's face.
+ */
+export function Portrait({src, name, className = '', alt, fit = 'cover', position}: {src: string | null | undefined; name: string; className?: string; alt?: string; fit?: 'cover' | 'contain'; position?: string}) {
+  const url = useAssetUrl(src)
+  const [failed, setFailed] = useState(false)
+  useEffect(() => setFailed(false), [url])
+  if (!url || failed) {
+    return (
+      <span className={`ew-portrait is-placeholder ${className}`} role="img" aria-label={alt ?? name} data-missing={src ? 'true' : 'none'}>
+        <span aria-hidden="true">{[...name.trim()][0]?.toUpperCase() ?? '·'}</span>
+      </span>
+    )
+  }
+  return <img className={`ew-portrait ${className}`} src={url} alt={alt ?? name} loading="lazy" decoding="async" style={{objectFit: fit, objectPosition: position}} onError={() => setFailed(true)} />
+}
diff --git a/everwith-claude-frontend/src/components/Toasts.tsx b/everwith-claude-frontend/src/components/Toasts.tsx
new file mode 100644
index 00000000..42576944
--- /dev/null
+++ b/everwith-claude-frontend/src/components/Toasts.tsx
@@ -0,0 +1,10 @@
+import {useApp} from '../app/store'
+
+export function Toasts() {
+  const toasts = useApp(s => s.toasts)
+  return (
+    <div className="ew-toasts" role="status" aria-live="polite">
+      {toasts.map(t => <div key={t.id} className={`ew-toast ${t.kind}`}>{t.text}</div>)}
+    </div>
+  )
+}
diff --git a/everwith-claude-frontend/src/components/use-modal-focus-return.ts b/everwith-claude-frontend/src/components/use-modal-focus-return.ts
new file mode 100644
index 00000000..ba24fa7d
--- /dev/null
+++ b/everwith-claude-frontend/src/components/use-modal-focus-return.ts
@@ -0,0 +1,55 @@
+import {useLayoutEffect,useRef,useState,type RefObject} from "react"
+
+function available(node:HTMLElement|null):node is HTMLElement {
+ if(!node?.isConnected||node===document.body||node===document.documentElement||node.matches(":disabled")||node.closest('[hidden],[inert],dialog:not([open])')||!node.getClientRects().length)return false
+ const visibility=window.getComputedStyle(node).visibility
+ return visibility!=="hidden"&&visibility!=="collapse"
+}
+
+/** Restore a dismissed modal's owned focus, without overriding a later user choice. */
+export function useModalFocusReturn(ref:RefObject<HTMLDialogElement|null>,options:{lockScroll?:boolean;initialFocusSelector?:string}={}){
+ // Capture before committing the modal's children/native autofocus, not in a passive effect.
+ const [origin]=useState(()=>{
+  const opener=document.activeElement instanceof HTMLElement?document.activeElement:null
+  return {opener,scope:opener?.closest<HTMLElement>('.ew-app')??null}
+ })
+ const pending=useRef<number|undefined>(undefined)
+ useLayoutEffect(()=>{
+  window.clearTimeout(pending.current) // StrictMode's second setup cancels its trial cleanup.
+  const dialog=ref.current;if(!dialog)return
+  const returnScope=origin.scope??dialog.closest<HTMLElement>('.ew-app')
+  const overflow=document.body.style.overflow
+  if(options.lockScroll)document.body.style.overflow="hidden"
+  dialog.showModal()
+  if(options.initialFocusSelector)dialog.querySelector<HTMLElement>(options.initialFocusSelector)?.focus({preventScroll:true})
+  return()=>{
+   const before=document.activeElement
+   const owned=before===document.body||before===document.documentElement||dialog.contains(before)
+   // Keep the node itself: React will clear ref.current when deleting the host node.
+   dialog.close()
+   if(options.lockScroll)document.body.style.overflow=overflow
+   if(!owned){
+    // Native close must not displace focus that already moved outside this modal.
+    if(before instanceof HTMLElement&&available(before)&&document.activeElement!==before)before.focus({preventScroll:true})
+    return
+   }
+   const after=document.activeElement
+   pending.current=window.setTimeout(()=>{
+    const current=document.activeElement
+    // DOM removal may turn the modal's focused child into BODY. A different
+    // connected control (including a newly opened modal) owns its own focus.
+    if(current!==after&&!(after instanceof HTMLElement&&!after.isConnected&&current===document.body))return
+    const scope=returnScope?.isConnected?returnScope:null
+    const fallback=scope?Array.from(scope.querySelectorAll<HTMLElement>('.ew-back,.ew-nav a,.ew-main button,.ew-main a[href]')):[]
+    for(const target of [origin.opener,...fallback]){
+     if(!available(target))continue
+     const beforeFocus=document.activeElement
+     target.focus({preventScroll:true})
+     // A refused focus tries the next candidate; a focus handler that chose
+     // another control owns that choice and must not be overridden.
+     if(document.activeElement===target||document.activeElement!==beforeFocus)return
+    }
+   },0)
+  }
+ },[])
+}
diff --git a/everwith-claude-frontend/src/contracts/chat-poll.ts b/everwith-claude-frontend/src/contracts/chat-poll.ts
new file mode 100644
index 00000000..c3e1c75a
--- /dev/null
+++ b/everwith-claude-frontend/src/contracts/chat-poll.ts
@@ -0,0 +1,9 @@
+/** Adopter implementation of the reference's `./chat-poll`: collapse identical concurrent reads. */
+const flights = new Map<string, Promise<unknown>>()
+export function deduplicateChatRead<T>(_request: unknown, key: string, read: () => Promise<T>): Promise<T> {
+  const existing = flights.get(key)
+  if (existing) return existing as Promise<T>
+  const flight = read().finally(() => flights.delete(key))
+  flights.set(key, flight)
+  return flight
+}
diff --git a/everwith-claude-frontend/src/contracts/chat-timing.ts b/everwith-claude-frontend/src/contracts/chat-timing.ts
new file mode 100644
index 00000000..9f8706b9
--- /dev/null
+++ b/everwith-claude-frontend/src/contracts/chat-timing.ts
@@ -0,0 +1,18 @@
+/**
+ * Adopter implementation of the reference's missing `./chat-timing` dependency.
+ * Presentation-side timing only: in-memory, no network, no message text.
+ */
+type Trace = {surface: string; mode: string; started: number; operationId?: string; status?: string; received?: number; failed?: boolean}
+const traces: Trace[] = []
+export function startChatTiming(surface: string, mode: string): Trace {
+  const trace = {surface, mode, started: performance.now()}
+  traces.push(trace); if (traces.length > 200) traces.shift()
+  return trace
+}
+export function receivedChatTiming(trace: Trace, operationId: string, status: string, _turnId?: string | null) {
+  trace.operationId = operationId; trace.status = status; trace.received = performance.now()
+}
+export function failedChatTiming(trace: Trace) { trace.failed = true; trace.received = performance.now() }
+export function observeChatOperation(_surface: string, _operationId: string, _status: string, _turnId?: string | null, _polled = false) { /* no-op */ }
+export function observeChatPaint(_turnId: string | undefined, _node: Element | null) { /* no-op */ }
+export function chatTimingSnapshot() { return traces.map(t => ({surface: t.surface, mode: t.mode, ms: t.received ? Math.round(t.received - t.started) : null, status: t.status ?? null, failed: !!t.failed})) }
diff --git a/everwith-claude-frontend/src/contracts/companion.ts b/everwith-claude-frontend/src/contracts/companion.ts
new file mode 100644
index 00000000..9dd47c9b
--- /dev/null
+++ b/everwith-claude-frontend/src/contracts/companion.ts
@@ -0,0 +1,120 @@
+/**
+ * Account / character / friend wire parsers.
+ * Ported from reference/contracts/companion-client.ts (frozen 677b1b4b). Changes:
+ *  - avatar allowlist rebased to this project's hash-verified asset copy (/handoff/assets/...)
+ *    plus `null` for works without an approved image (UI shows a neutral placeholder);
+ *  - friends carry display-only fields (source_name, created_at, origin) used to tell
+ *    same-name / same-source friends apart; identity is still id + epoch + source/version.
+ */
+export class CompanionRequestError extends Error {
+  constructor(public code: string, public status = 0, public detail: Record<string, unknown> | null = null) { super('Companion request failed') }
+}
+const invalid = (): never => { throw new CompanionRequestError('invalid_response') }
+export function object(value: unknown): Record<string, unknown> {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return invalid()
+  return value as Record<string, unknown>
+}
+export function string(value: unknown, max = 512): string {
+  if (typeof value !== 'string' || !value || value.length > max) return invalid()
+  return value
+}
+function integer(value: unknown): number {
+  if (!Number.isSafeInteger(value) || Number(value) < 0) return invalid()
+  return Number(value)
+}
+function localized(value: unknown, max = 2000) {
+  const row = object(value)
+  return {zh: string(row.zh, max), en: string(row.en, max)}
+}
+
+const APPROVED_PORTRAIT = /^\/handoff\/assets\/companions\/(?:portraits\/(?:arthur-r7|lena-soft-anime-v2|marcus-r3|nora-r4|iris-local|arthur-local|lena-local|marcus-local|nora-local)-neutral\.png|feed\/(?:arthur|lena|marcus|nora|iris)\.webp)$/
+export function parseAvatar(value: unknown): string | null {
+  if (value === null) return null
+  const path = string(value)
+  if (!APPROVED_PORTRAIT.test(path)) return invalid()
+  return path
+}
+
+export type AccountSession = {
+  authenticated: boolean
+  account: {id: string; email: string} | null
+  guest_id: string
+  /** avatar: id of a preset persona picture (an object, never a person), or null. */
+  persona: {name: string; bio: string; avatar: string | null} | null
+  mode: 'local_mock'
+}
+const PERSONA_AVATAR = /^persona-avatar-0[1-8]$/
+export function parseAccount(value: unknown): AccountSession {
+  const data = object(value)
+  const guest = string(data.guest_id, 80)
+  if (!guest.startsWith('guest_')) return invalid()
+  if (data.mode !== 'local_mock') return invalid()
+  const persona = data.persona === null || data.persona === undefined ? null : (() => {
+    const p = object(data.persona)
+    return {name: typeof p.name === 'string' ? p.name.slice(0, 40) : '', bio: typeof p.bio === 'string' ? p.bio.slice(0, 400) : '',
+      avatar: typeof p.avatar === 'string' && PERSONA_AVATAR.test(p.avatar) ? p.avatar : null}
+  })()
+  if (data.authenticated === false && data.account === null) return {authenticated: false, account: null, guest_id: guest, persona, mode: 'local_mock'}
+  if (data.authenticated !== true) return invalid()
+  const account = object(data.account)
+  const id = string(account.id, 80)
+  if (!id.startsWith('acc_')) return invalid()
+  return {authenticated: true, account: {id, email: string(account.email, 254)}, guest_id: guest, persona, mode: 'local_mock'}
+}
+
+export type CharacterWork = {
+  id: string; version: string; name: string; avatar: string | null; feed: string | null
+  description: {zh: string; en: string}; tagline: {zh: string; en: string}
+  traits: {zh: string; en: string}[]; origin: 'official' | 'mine'; voice: string
+  live2d: 'arthur' | 'lena' | 'marcus' | 'nora' | 'iris' | null
+}
+const LIVE2D = ['arthur', 'lena', 'marcus', 'nora', 'iris'] as const
+export function parseCharacter(item: unknown): CharacterWork {
+  const row = object(item)
+  const live2d = row.live2d === null ? null : String(row.live2d)
+  if (live2d !== null && !(LIVE2D as readonly string[]).includes(live2d)) return invalid()
+  // A Live2D binding is only accepted for the official v1 source it was pinned to.
+  if (live2d && (row.id !== `official-${live2d}` || row.version !== '1')) return invalid()
+  if (row.origin !== 'official' && row.origin !== 'mine') return invalid()
+  if (!Array.isArray(row.traits) || row.traits.length > 8) return invalid()
+  return {
+    id: string(row.id, 80), version: string(row.version, 80), name: string(row.name, 160),
+    avatar: parseAvatar(row.avatar), feed: row.feed === null ? null : parseAvatar(row.feed),
+    description: localized(row.description), tagline: localized(row.tagline, 400),
+    traits: row.traits.map(t => localized(t, 120)), origin: row.origin, voice: string(row.voice, 80),
+    live2d: live2d as CharacterWork['live2d'],
+  }
+}
+export function parseCharacters(value: unknown): CharacterWork[] {
+  const data = object(value)
+  if (!Array.isArray(data.items) || data.items.length > 100) return invalid()
+  return data.items.map(parseCharacter)
+}
+
+export type CompanionFriend = {
+  id: string; source_id: string; source_version: string; name: string; avatar: string | null
+  epoch: number; revision: number; display_number: number; status: 'active'
+  source_name: string; created_at: string; origin: {kind: 'character' | 'story' | 'game' | 'creation'; label: {zh: string; en: string}}
+  live2d: CharacterWork['live2d']
+}
+export function parseFriend(value: unknown): CompanionFriend {
+  const data = object(value)
+  if (data.status !== 'active') return invalid()
+  const origin = object(data.origin)
+  if (!['character', 'story', 'game', 'creation'].includes(String(origin.kind))) return invalid()
+  const live2d = data.live2d === null ? null : String(data.live2d)
+  if (live2d !== null && (!(LIVE2D as readonly string[]).includes(live2d) || data.source_id !== `official-${live2d}` || data.source_version !== '1')) return invalid()
+  return {
+    id: string(data.id, 80), source_id: string(data.source_id, 80), source_version: string(data.source_version, 80),
+    name: string(data.name, 160), avatar: parseAvatar(data.avatar), epoch: integer(data.epoch), revision: integer(data.revision),
+    display_number: integer(data.display_number), status: 'active', source_name: string(data.source_name, 160),
+    created_at: string(data.created_at, 40), origin: {kind: origin.kind as CompanionFriend['origin']['kind'], label: localized(origin.label, 200)},
+    live2d: live2d as CompanionFriend['live2d'],
+  }
+}
+export function parseFriends(value: unknown, expectedAccountId?: string): {items: CompanionFriend[]; total: number} {
+  const data = object(value)
+  if (expectedAccountId && data.owner_id !== expectedAccountId) throw new CompanionRequestError('account_changed')
+  if (!Array.isArray(data.items) || data.items.length > 100) return invalid()
+  return {items: data.items.map(parseFriend), total: integer(data.total)}
+}
diff --git a/everwith-claude-frontend/src/contracts/dialogue-expression-client.ts b/everwith-claude-frontend/src/contracts/dialogue-expression-client.ts
new file mode 100644
index 00000000..d9483495
--- /dev/null
+++ b/everwith-claude-frontend/src/contracts/dialogue-expression-client.ts
@@ -0,0 +1,12 @@
+/** Bodyless display cues. Identity/checkpoint are checked again by the server. */
+export type DialogueCheckpoint={session_id:string;branch_id:string;revision:number;head_turn_id:string;content_revision:number;invalidation_epoch:number;access_epoch:number}
+export type DialoguePresentation={checkpoint:DialogueCheckpoint;turn_id:string;message_id:string;actor_id:string}
+export type DialogueCall={schema:"dialogue-expression-call-v1";call_id:string;provider_mode:"local_deterministic";provider_version:string;character_id:string;character_version:string;friend_id:string;friend_epoch:number;role_id:string;actor_id:string;source_kind:"private"|"story";source_session_id:string;checkpoint:DialogueCheckpoint;turn_id:string;message_id:string;message_sequence:number;expression:"neutral"|"happy"|"surprised";degradation:null|"unsupported_expression"}
+export type DialogueLedger={has:(key:string)=>boolean;add:(key:string)=>void}
+export function presentationKey(p:DialoguePresentation){return `${p.actor_id}:${p.turn_id}:${p.message_id}`}
+export function createDialogueLedger(binding:{accountId:string;friendId:string;friendEpoch:number;kind:string;sourceSessionId:string}):DialogueLedger{
+ const key=`tiny-stories-expression:${binding.accountId}:${binding.friendId}:${binding.friendEpoch}:${binding.kind}:${binding.sourceSessionId}`
+ let seen=new Set<string>()
+ try{const saved=JSON.parse(sessionStorage.getItem(key)||"[]");if(!Array.isArray(saved)||saved.length>256||saved.some(v=>typeof v!=="string"||v.length>400))throw Error();seen=new Set(saved)}catch{throw Error("visual_ledger_unavailable")}
+ return {has:value=>seen.has(value),add(value){seen.add(value);seen=new Set([...seen].slice(-256));sessionStorage.setItem(key,JSON.stringify([...seen]))}}
+}
diff --git a/everwith-claude-frontend/src/contracts/private-chat-client.ts b/everwith-claude-frontend/src/contracts/private-chat-client.ts
new file mode 100644
index 00000000..9a5e324a
--- /dev/null
+++ b/everwith-claude-frontend/src/contracts/private-chat-client.ts
@@ -0,0 +1,162 @@
+import {deduplicateChatRead} from "./chat-poll"
+import {startChatTiming,receivedChatTiming,observeChatOperation,failedChatTiming} from "./chat-timing"
+import type {DialogueCheckpoint} from "./dialogue-expression-client"
+import { CompanionRequestError } from "./companion"
+
+export type PrivateSegment = { segment_id: string; kind: "dialogue" | "narration" | "action"; speaker_id: string | null; text: string; availability?: "available" | "withdrawn" }
+export type PrivateTurn = { turn_id: string; player_actor_id: string; player_expression: string | null; visible_segments: PrivateSegment[]; revision?: number; language: "zh" | "en"; input_availability?: "available" | "withdrawn" }
+export type PrivateOperation = { operation_id: string; status: "accepted" | "running" | "validating" | "retryable_failed" | "committed" | "cancelled" | "failed_final" | "stale"; availability: string; turn_id?: string | null }
+export type PrivateCommand = { key: string; session_id: string; text: string; language: "zh" | "en"; presented_turn_id: string; expected_revision: number; recall_session_id?: string }
+export type PrivateRecallOption = { session_id: string; title: { zh: string; en: string } }
+export type PrivateSnapshot = {
+  publicStreamVersion?: "private-public-segments.v1"
+  replyMode?: "simulated_fixed_reply" | "real_siwc_gpt6_luna" | "other_live"
+  conversation: { id: string; friend_id: string; friend_epoch: number; binding_version: number; status: "active" | "read_only" }
+  history: { session_id: string; position: { revision: number; head_turn_id: string | null }; turns: PrivateTurn[] }
+  pending_operation: PrivateOperation | null; pending_expression: string | null
+  expressionCheckpoint?:DialogueCheckpoint;source?: "memory"; recall_options?: PrivateRecallOption[]
+}
+type Transport = (path: string, body?: unknown) => Promise<unknown>
+function invalid(): never { throw new CompanionRequestError("invalid_response") }
+function record(value: unknown): Record<string, unknown> { if (!value || typeof value !== "object" || Array.isArray(value)) return invalid(); return value as Record<string, unknown> }
+function text(value: unknown, max = 128): string { if (typeof value !== "string" || !value.trim() || value.length > max) return invalid(); return value }
+function count(value: unknown): number { if (!Number.isSafeInteger(value) || Number(value) < 1) return invalid(); return Number(value) }
+function optionalText(value: unknown, max = 8000) { return value === null ? null : text(value, max) }
+function items(value: unknown, max: number): unknown[] { if (!Array.isArray(value) || value.length > max) return invalid(); return value }
+function visibleText(value: unknown, max = 12000): string {
+  const body = text(value, max)
+  for (let i = 0; i < body.length; i++) {
+    const c = body.charCodeAt(i)
+    if (c < 32 && c !== 9 && c !== 10 || c === 127) return invalid()
+    if (c >= 0xd800 && c <= 0xdbff) { const next = body.charCodeAt(++i); if (!(next >= 0xdc00 && next <= 0xdfff)) return invalid() }
+    else if (c >= 0xdc00 && c <= 0xdfff) return invalid()
+  }
+  return body
+}
+function visibleSpeaker(segment: Record<string, unknown>): string | null {
+  const speaker = optionalText(segment.speaker_id, 128)
+  if (segment.kind === "dialogue" && speaker === null) return invalid()
+  return speaker
+}
+export function parsePrivateOperation(value: unknown): PrivateOperation {
+  const row = record(value), schema = row.schema_version, status = row.status
+  if (schema !== undefined && schema !== "companion-memory-private-operation-v1") return invalid()
+  if (typeof status !== "string" || !["accepted", "running", "validating", "retryable_failed", "committed", "cancelled", "failed_final", "stale"].includes(status)) return invalid()
+  if (typeof row.availability !== "string" || !["pending", "absent", "available", "withdrawn", "forbidden"].includes(row.availability)) return invalid()
+  const allowed = status === "committed" ? ["available", "withdrawn"] : ["cancelled", "failed_final", "stale"].includes(status) ? ["absent"] : ["pending"]
+  if (!allowed.includes(row.availability)) return invalid()
+  const turnId = schema === "companion-memory-private-operation-v1" ? optionalText(row.turn_id, 128) : undefined
+  if (schema === "companion-memory-private-operation-v1" && status === "committed" !== Boolean(turnId)) return invalid()
+  observeChatOperation("private", text(row.operation_id), status, turnId)
+  return { operation_id: text(row.operation_id), status: status as PrivateOperation["status"], availability: row.availability, ...(schema ? { turn_id: turnId } : {}) }
+}
+export function parsePrivateCommand(value: unknown): PrivateCommand {
+  const row = record(value)
+  if (row.language !== "zh" && row.language !== "en") return invalid()
+  const recall = row.recall_session_id === undefined ? undefined : text(row.recall_session_id)
+  return { key: text(row.key), session_id: text(row.session_id), text: text(row.text, 8000), language: row.language, presented_turn_id: text(row.presented_turn_id), expected_revision: count(row.expected_revision), ...(recall ? { recall_session_id: recall } : {}) }
+}
+export function parsePrivateSnapshot(value: unknown, friendId: string, epoch: number): PrivateSnapshot {
+  const data = record(value), conversation = record(data.conversation), history = record(data.history), position = record(history.position)
+  if (data.schema_version !== undefined) {
+    if (data.schema_version !== "companion-memory-private-display-v1") return invalid()
+    return parseMemoryPrivateSnapshot(data, conversation, history, position, friendId, epoch)
+  }
+  const currentRevision = count(position.revision)
+  if (conversation.friend_id !== friendId || conversation.friend_epoch !== epoch || history.session_id !== conversation.id) return invalid()
+  if (conversation.status !== "active" && conversation.status !== "read_only") return invalid()
+  const turns = items(history.turns, 10000).map((value): PrivateTurn => {
+    const turn = record(value)
+    if (turn.language !== "zh" && turn.language !== "en") return invalid()
+    const revision = count(turn.revision)
+    const visible_segments = items(turn.visible_segments, 100).map((value): PrivateSegment => {
+      const segment = record(value)
+      if (segment.kind !== "dialogue" && segment.kind !== "narration" && segment.kind !== "action") return invalid()
+      return { segment_id: text(segment.segment_id), kind: segment.kind, speaker_id: visibleSpeaker(segment), text: visibleText(segment.text) }
+    })
+    return { turn_id: text(turn.turn_id), player_actor_id: text(turn.player_actor_id), player_expression: optionalText(turn.player_expression), visible_segments, revision, language: turn.language }
+  })
+  const legacyRevisions = turns.map((turn) => turn.revision as number)
+  if (legacyRevisions.some((revision, index) => index > 0 && revision <= legacyRevisions[index - 1])) return invalid()
+  if (!turns.length || new Set(turns.map((turn) => turn.turn_id)).size !== turns.length || turns.at(-1)?.turn_id !== position.head_turn_id || legacyRevisions.at(-1)! > currentRevision) return invalid()
+  const pending = data.pending_operation === null ? null : parsePrivateOperation(data.pending_operation)
+  const expression = optionalText(data.pending_expression)
+  if (pending && !["accepted", "running", "validating", "retryable_failed"].includes(pending.status) || Boolean(pending) !== Boolean(expression)) return invalid()
+  return {
+    conversation: { id: text(conversation.id), friend_id: friendId, friend_epoch: epoch, binding_version: count(conversation.binding_version), status: conversation.status },
+    history: { session_id: text(history.session_id), position: { revision: currentRevision, head_turn_id: optionalText(position.head_turn_id, 128) }, turns },
+    pending_operation: pending, pending_expression: expression,
+  }
+}
+function parseMemoryPrivateSnapshot(data: Record<string, unknown>, conversation: Record<string, unknown>, history: Record<string, unknown>, position: Record<string, unknown>, friendId: string, epoch: number): PrivateSnapshot {
+  if (data.reply_mode !== undefined && !["simulated_fixed_reply", "real_siwc_gpt6_luna", "other_live"].includes(String(data.reply_mode))) return invalid()
+  if (data.public_stream_version != null && data.public_stream_version !== "private-public-segments.v1") return invalid()
+  const currentRevision = count(position.revision), player = text(history.player_actor_id)
+  if (conversation.friend_id !== friendId || conversation.friend_epoch !== epoch || history.session_id !== conversation.id) return invalid()
+  if (conversation.status !== "active" && conversation.status !== "read_only") return invalid()
+  const turns = items(history.turns, 10000).map((value): PrivateTurn => {
+    const turn = record(value)
+    if (turn.language !== "zh" && turn.language !== "en" || turn.input_availability !== "available" && turn.input_availability !== "withdrawn") return invalid()
+    const playerExpression = optionalText(turn.player_expression, 2000)
+    if (turn.input_availability === "withdrawn" && playerExpression !== null) return invalid()
+    const visible_segments = items(turn.segments, 100).map((value): PrivateSegment => {
+      const segment = record(value)
+      if (segment.kind !== "dialogue" && segment.kind !== "narration" && segment.kind !== "action") return invalid()
+      if (segment.availability !== "available" && segment.availability !== "withdrawn") return invalid()
+      const body = segment.body === null ? null : visibleText(segment.body)
+      if (segment.availability === "withdrawn" && body !== null || segment.availability === "available" && body === null) return invalid()
+      return { segment_id: text(segment.segment_id), kind: segment.kind, speaker_id: visibleSpeaker(segment), text: body ?? "", availability: segment.availability }
+    })
+    return { turn_id: text(turn.turn_id), player_actor_id: player, player_expression: playerExpression, visible_segments, language: turn.language, input_availability: turn.input_availability }
+  })
+  if (!turns.length || new Set(turns.map(turn => turn.turn_id)).size !== turns.length || turns.at(-1)?.turn_id !== position.head_turn_id) return invalid()
+  const pending = data.pending_operation === null ? null : parsePrivateOperation(data.pending_operation)
+  const expression = optionalText(data.pending_expression, 2000)
+  if (pending && !["accepted", "running", "validating", "retryable_failed"].includes(pending.status) || Boolean(pending) !== Boolean(expression)) return invalid()
+  const recall_options = items(data.recall_options, 10).map((value): PrivateRecallOption => {
+    const option = record(value), title = record(option.title)
+    return { session_id: text(option.session_id), title: { zh: text(title.zh, 1000), en: text(title.en, 1000) } }
+  })
+  if (new Set(recall_options.map(option => option.session_id)).size !== recall_options.length) return invalid()
+  return {
+    conversation: { id: text(conversation.id), friend_id: friendId, friend_epoch: epoch, binding_version: count(conversation.binding_version), status: conversation.status },
+    history: { session_id: text(history.session_id), position: { revision: currentRevision, head_turn_id: optionalText(position.head_turn_id, 128) }, turns },
+    pending_operation: pending, pending_expression: expression, source: "memory", recall_options,
+    ...(data.public_stream_version ? {publicStreamVersion: "private-public-segments.v1" as const} : {}),
+    ...(data.reply_mode ? { replyMode: data.reply_mode as PrivateSnapshot["replyMode"] } : {}),
+    ...(typeof position.branch_id==="string"&&[history.content_revision,history.invalidation_epoch,history.access_epoch].every(v=>Number.isSafeInteger(v)&&Number(v)>=0)?{expressionCheckpoint:{session_id:text(history.session_id),branch_id:text(position.branch_id),revision:currentRevision,head_turn_id:text(position.head_turn_id),content_revision:Number(history.content_revision),invalidation_epoch:Number(history.invalidation_epoch),access_epoch:Number(history.access_epoch)}}:{}),
+  }
+}
+export function createPrivateChatClient(request: Transport, accountId: string, friendId: string, epoch: number) {
+  const authority = { expected_account_id: accountId, expected_friend_epoch: epoch }
+  let replyMode = "unconfirmed"
+  const parse = (value: unknown) => { const snapshot = parsePrivateSnapshot(value, friendId, epoch); replyMode = snapshot.replyMode ?? "unconfirmed"; return snapshot }
+  const replay = async (command: PrivateCommand) => {
+    const { session_id, ...body } = parsePrivateCommand(command)
+    const trace = startChatTiming("private", replyMode)
+    try {
+      const operation = parsePrivateOperation(await request(`/conversations/${encodeURIComponent(session_id)}/operations`, { ...body, ...authority }))
+      receivedChatTiming(trace, operation.operation_id, operation.status, operation.turn_id)
+      return operation
+    } catch (error) { failedChatTiming(trace); throw error }
+  }
+  return {
+    open: async (key: string, language: "zh" | "en") => parse(await request(`/friends/${encodeURIComponent(friendId)}/conversation`, { key, ...authority, language })),
+    read: async (id: string) => {
+      const snapshot = parse(await request(`/conversations/${encodeURIComponent(id)}`))
+      if (snapshot.conversation.id !== id) return invalid()
+      return snapshot
+    },
+    replay,
+    send: async (snapshot: PrivateSnapshot, key: string, message: string, language: "zh" | "en", recallSessionId?: string) => replay({ session_id: snapshot.conversation.id, key, presented_turn_id: snapshot.history.position.head_turn_id!, expected_revision: snapshot.history.position.revision, text: message, language, ...(recallSessionId ? { recall_session_id: recallSessionId } : {}) }),
+    result: async (id: string) => {
+      const operation = parsePrivateOperation(await deduplicateChatRead(request, JSON.stringify(["private-operation", accountId, friendId, epoch, id]), () => request(`/operations/${encodeURIComponent(id)}`)))
+      if (operation.operation_id !== id) return invalid()
+      observeChatOperation("private", operation.operation_id, operation.status, operation.turn_id, true)
+      return operation
+    },
+    lookup: async (id: string, key: string) => parsePrivateOperation(await request(`/conversations/${encodeURIComponent(id)}/operations/lookup?key=${encodeURIComponent(key)}`)),
+    retry: async (id: string) => parsePrivateOperation(await request(`/operations/${encodeURIComponent(id)}/retry`, authority)),
+    cancel: async (id: string) => parsePrivateOperation(await request(`/operations/${encodeURIComponent(id)}/cancel`, authority)),
+  }
+}
diff --git a/everwith-claude-frontend/src/contracts/private-chat-recovery.ts b/everwith-claude-frontend/src/contracts/private-chat-recovery.ts
new file mode 100644
index 00000000..1fc94bc3
--- /dev/null
+++ b/everwith-claude-frontend/src/contracts/private-chat-recovery.ts
@@ -0,0 +1,31 @@
+import {PublicEventDecoder,type PublicEvent} from "./public-events"
+
+/** A reader owns presentation only. Disconnect/timeout never cancels or retries an operation. */
+export async function readPrivatePublicStream(response:Response,signal:AbortSignal,
+  live:()=>boolean,receive:(event:PublicEvent)=>void,idleTimeoutMs=45_000):Promise<boolean>{
+  const retireBody=()=>{void response.body?.cancel().catch(()=>{})}
+  if(signal.aborted||!live()){retireBody();return false}
+  if(!response.ok||response.headers.get("content-type")?.split(";")[0].trim()!=="application/x-ndjson"||!response.body){
+    retireBody();throw Error("stream_unavailable")
+  }
+  const reader=response.body.getReader(),decoder=new PublicEventDecoder(receive)
+  let timeout:ReturnType<typeof setTimeout>|undefined,timedOut=false
+  // Do not wait for a transport's potentially stalled cancellation acknowledgement.
+  const cancel=()=>{void reader.cancel().catch(()=>{})}
+  signal.addEventListener("abort",cancel,{once:true})
+  try{
+    while(live()&&!signal.aborted){
+      timeout=setTimeout(()=>{timedOut=true;cancel()},idleTimeoutMs)
+      const chunk=await reader.read()
+      clearTimeout(timeout)
+      if(signal.aborted||!live())return false
+      if(timedOut)throw Error("stream_read_timeout")
+      if(chunk.done){decoder.finish();return true}
+      decoder.push(chunk.value)
+    }
+    return false
+  }finally{
+    clearTimeout(timeout);signal.removeEventListener("abort",cancel)
+    cancel();reader.releaseLock()
+  }
+}
diff --git a/everwith-claude-frontend/src/contracts/public-events.ts b/everwith-claude-frontend/src/contracts/public-events.ts
new file mode 100644
index 00000000..b0c998eb
--- /dev/null
+++ b/everwith-claude-frontend/src/contracts/public-events.ts
@@ -0,0 +1,116 @@
+/** Candidate only. Complete typed NDJSON frames, never fields scraped from provider JSON. */
+export const PUBLIC_VERSION = "private-public-segments.v1"
+export type PublicBinding = {account_id:string;friend_id:string;friend_epoch:number;session_id:string;revision:number;head_turn_id:string;allow_fictional_thought:boolean}
+export type PublicAdmission = {version:typeof PUBLIC_VERSION;operation_id:string;run_epoch:number;binding:PublicBinding}
+export type PublicSegment = {segment_id:string;kind:"spoken"|"action"|"narration"|"fictional_thought";text:string}
+type Envelope = {version:typeof PUBLIC_VERSION;operation_id:string;run_epoch:number;seq:number}
+export type PublicEvent = Envelope & (
+  {type:"start";binding:PublicBinding} | {type:"segment";segment:PublicSegment} |
+  {type:"complete"} | {type:"cancelled"} | {type:"failed";reason:"generation_failed"|"permission_changed"})
+export class PublicProtocolError extends Error {constructor(){super("invalid_public_stream");this.name="PublicProtocolError"}}
+const invalid=():never=>{throw new PublicProtocolError()}
+function object(value:unknown):Record<string,unknown>{if(!value||typeof value!=="object"||Array.isArray(value))return invalid();return value as Record<string,unknown>}
+function exact(value:Record<string,unknown>,keys:string[]){if(Object.keys(value).sort().join("|")!==[...keys].sort().join("|"))invalid()}
+function integer(value:unknown,min=1):number{if(!Number.isSafeInteger(value)||Number(value)<min)return invalid();return Number(value)}
+function id(value:unknown):string{if(typeof value!=="string"||!value.length||value.length>128||!/^[A-Za-z0-9_.:-]+$/.test(value))return invalid();return value}
+function publicText(value:unknown):string{
+  if(typeof value!=="string"||!value.trim()||value.length>2000)return invalid()
+  for(let i=0;i<value.length;i++){
+    const c=value.charCodeAt(i)
+    if(c<32&&c!==9&&c!==10||c===127)return invalid()
+    if(c>=0xd800&&c<=0xdbff){const next=value.charCodeAt(++i);if(!(next>=0xdc00&&next<=0xdfff))return invalid()}
+    else if(c>=0xdc00&&c<=0xdfff)return invalid()
+  }
+  return value
+}
+export function parsePublicBinding(value:unknown):PublicBinding{
+  const row=object(value);exact(row,["account_id","friend_id","friend_epoch","session_id","revision","head_turn_id","allow_fictional_thought"])
+  if(typeof row.allow_fictional_thought!=="boolean")return invalid()
+  return {account_id:id(row.account_id),friend_id:id(row.friend_id),friend_epoch:integer(row.friend_epoch),session_id:id(row.session_id),
+    revision:integer(row.revision),head_turn_id:id(row.head_turn_id),allow_fictional_thought:row.allow_fictional_thought}
+}
+export function parsePublicAdmission(value:unknown):PublicAdmission{
+  const row=object(value);exact(row,["version","operation_id","run_epoch","binding"])
+  if(row.version!==PUBLIC_VERSION)return invalid()
+  return {version:PUBLIC_VERSION,operation_id:id(row.operation_id),run_epoch:integer(row.run_epoch),binding:parsePublicBinding(row.binding)}
+}
+export function parsePublicEvent(value:unknown):PublicEvent{
+  const row=object(value),base=["version","operation_id","run_epoch","seq","type"]
+  if(row.version!==PUBLIC_VERSION)return invalid()
+  const envelope={version:PUBLIC_VERSION,operation_id:id(row.operation_id),run_epoch:integer(row.run_epoch),seq:integer(row.seq,0)} as Envelope
+  if(row.type==="start"){exact(row,[...base,"binding"]);return {...envelope,type:"start",binding:parsePublicBinding(row.binding)}}
+  if(row.type==="segment"){
+    exact(row,[...base,"segment"]);const segment=object(row.segment);exact(segment,["segment_id","kind","text"])
+    if(typeof segment.kind!=="string"||!["spoken","action","narration","fictional_thought"].includes(segment.kind))return invalid()
+    return {...envelope,type:"segment",segment:{segment_id:id(segment.segment_id),kind:segment.kind as PublicSegment["kind"],text:publicText(segment.text)}}
+  }
+  if(row.type==="complete"||row.type==="cancelled"){exact(row,base);return {...envelope,type:row.type}}
+  if(row.type==="failed"){
+    exact(row,[...base,"reason"]);if(row.reason!=="generation_failed"&&row.reason!=="permission_changed")return invalid()
+    return {...envelope,type:"failed",reason:row.reason}
+  }
+  return invalid()
+}
+
+/** fatal UTF-8 decoder + LF framing + JSON.parse of a full frame. No regex extraction. */
+export class PublicEventDecoder {
+  private decoder=new TextDecoder("utf-8",{fatal:true})
+  private buffer=""
+  private bytes=0
+  private ended=false
+  constructor(private receive:(event:PublicEvent)=>void){}
+  push(chunk:Uint8Array){
+    if(this.ended)return invalid()
+    this.bytes+=chunk.byteLength;if(this.bytes>65536)return invalid()
+    try{this.buffer+=this.decoder.decode(chunk,{stream:true});this.frames()}catch{this.ended=true;return invalid()}
+  }
+  private frames(){
+    for(let end=this.buffer.indexOf("\n");end>=0;end=this.buffer.indexOf("\n")){
+      let frame=this.buffer.slice(0,end);this.buffer=this.buffer.slice(end+1)
+      if(frame.endsWith("\r"))frame=frame.slice(0,-1)
+      if(!frame.length||new TextEncoder().encode(frame).length>16384)return invalid()
+      this.receive(parsePublicEvent(JSON.parse(frame)))
+    }
+    if(new TextEncoder().encode(this.buffer).length>16384)return invalid()
+  }
+  finish(){
+    if(this.ended)return invalid()
+    this.ended=true
+    try{this.buffer+=this.decoder.decode();this.frames();if(this.buffer.length)return invalid()}catch{return invalid()}
+  }
+}
+
+/** Provisional view state. Terminal events have no storage/reducer/control capability. */
+export function createPublicReceiver(admission:PublicAdmission){
+  const expected=parsePublicAdmission(admission),seen=new Map<number,string>(),segments:PublicSegment[]=[]
+  let phase:"waiting_start"|"generating"|"awaiting_commit"|"cancelled"|"failed"="waiting_start",last=-1,total=0
+  const snapshot=()=>({phase,segments:segments.map(s=>({...s})),lastSeq:last})
+  return {
+    snapshot,
+    receive(value:PublicEvent){
+      const event=parsePublicEvent(value)
+      if(event.operation_id!==expected.operation_id)return invalid()
+      if(event.run_epoch<expected.run_epoch)return "ignored" as const
+      if(event.run_epoch!==expected.run_epoch)return invalid()
+      const fingerprint=JSON.stringify(event),previous=seen.get(event.seq)
+      if(previous!==undefined){if(previous!==fingerprint)return invalid();return "ignored" as const}
+      if(event.seq!==last+1||event.seq>8)return invalid()
+      if(event.type==="start"){
+        if(phase!=="waiting_start"||event.seq!==0||JSON.stringify(event.binding)!==JSON.stringify(expected.binding))return invalid()
+        phase="generating"
+      }else{
+        if(phase!=="generating")return invalid()
+        if(event.type==="segment"){
+          const segment=event.segment
+          if(segments.length>=6||segments.some(s=>s.segment_id===segment.segment_id)||total+segment.text.length>6000
+            ||segment.kind==="fictional_thought"&&!expected.binding.allow_fictional_thought)return invalid()
+          total+=segment.text.length;segments.push({...segment})
+        }else if(event.type==="complete"){
+          if(!segments.some(s=>s.kind==="spoken"))return invalid();phase="awaiting_commit"
+        }else{phase=event.type==="cancelled"?"cancelled":"failed";segments.length=0}
+      }
+      last=event.seq;seen.set(last,fingerprint);return "applied" as const
+    },
+    finish(){if(phase==="waiting_start"||phase==="generating")return invalid();return snapshot()},
+  }
+}
diff --git a/everwith-claude-frontend/src/features/account/AccountPage.tsx b/everwith-claude-frontend/src/features/account/AccountPage.tsx
new file mode 100644
index 00000000..4c1d69d4
--- /dev/null
+++ b/everwith-claude-frontend/src/features/account/AccountPage.tsx
@@ -0,0 +1,89 @@
+import {useEffect, useState} from 'react'
+import {LogOut, ShieldAlert} from 'lucide-react'
+import {useI18n} from '../../app/i18n'
+import {openSignIn, setAccount, setLang, setReducedMotion, toast, useApp} from '../../app/store'
+import {api, ADAPTER_MODE, REAL_ADAPTER_GAPS} from '../../api/adapter'
+import {useAssetUrl} from '../../components/Portrait'
+import {PERSONA_AVATARS, PERSONA_AVATAR_LABELS, personaAvatarUrl} from '../../art/generated'
+import type {PersonaAvatarId} from '../../art/generated'
+import {pick} from '../../lib/util'
+
+export default function AccountPage() {
+  const {t, lang} = useI18n()
+  const account = useApp(s => s.account)
+  const reducedMotion = useApp(s => s.reducedMotion)
+  const [name, setName] = useState(account?.persona?.name ?? '')
+  const [bio, setBio] = useState(account?.persona?.bio ?? '')
+  const [avatar, setAvatar] = useState<string | null>(account?.persona?.avatar ?? null)
+  const [busy, setBusy] = useState(false)
+  useEffect(() => { setName(account?.persona?.name ?? ''); setBio(account?.persona?.bio ?? ''); setAvatar(account?.persona?.avatar ?? null) }, [account?.persona?.name, account?.persona?.bio, account?.persona?.avatar])
+  return (
+    <div className="ew-page ew-account">
+      <header className="ew-page-head"><div><h1>{t('account.title')}</h1></div></header>
+      <div className="ew-settings">
+        <section className="ew-panel ew-settings-card" aria-labelledby="acc-who">
+          <h2 id="acc-who" className="ew-card-title">{account?.authenticated ? t('account.signedIn', {email: account.account!.email}) : t('account.guest')}</h2>
+          <p className="ew-muted ew-small">{account?.authenticated ? t('auth.mockNote') : t('account.guestNote')}</p>
+          <div className="ew-row wrap">
+            {account?.authenticated
+              ? <button type="button" className="ew-btn" onClick={async () => setAccount(await api.account.logout())}><LogOut aria-hidden="true" />{t('account.logout')}</button>
+              : <button type="button" className="ew-btn primary" onClick={() => openSignIn('auth.action.generic')}>{t('common.signin')}</button>}
+          </div>
+          <p className="ew-faint ew-small"><ShieldAlert aria-hidden="true" className="ew-inline-icon" /> {t('account.noRecovery')}</p>
+        </section>
+        <section className="ew-panel ew-settings-card" aria-labelledby="acc-persona">
+          <h2 id="acc-persona" className="ew-card-title">{t('account.persona')}</h2>
+          <label className="ew-field"><span>{t('account.personaName')}</span><input className="ew-input" value={name} maxLength={40} onChange={e => setName(e.target.value)} /></label>
+          <label className="ew-field"><span>{t('account.personaBio')}</span><textarea className="ew-textarea" value={bio} maxLength={400} onChange={e => setBio(e.target.value)} /></label>
+          <div className="ew-field">
+            <span id="acc-avatar">{t('account.personaAvatar')}</span>
+            <div className="ew-avatar-picker" role="group" aria-labelledby="acc-avatar" data-testid="persona-avatars">
+              <button type="button" className="ew-avatar-choice is-none" aria-pressed={avatar === null} aria-label={t('account.avatarNone')} title={t('account.avatarNone')} onClick={() => setAvatar(null)}>
+                <span aria-hidden="true">{[...(name.trim() || '·')][0]?.toUpperCase()}</span></button>
+              {PERSONA_AVATARS.map(id => <AvatarChoice key={id} id={id} label={pick(PERSONA_AVATAR_LABELS[id], lang)} selected={avatar === id} onSelect={() => setAvatar(id)} />)}
+            </div>
+            <small>{t('account.avatarNote')}</small>
+          </div>
+          <div><button type="button" className="ew-btn primary" disabled={busy || !name.trim()} onClick={async () => {
+            setBusy(true)
+            try { setAccount(await api.account.persona(name.trim(), bio.trim(), avatar)); toast(t('account.personaSaved'), 'success') } catch { toast(t('error.generic'), 'error') } finally { setBusy(false) }
+          }}>{t('account.personaSave')}</button></div>
+        </section>
+        <section className="ew-panel ew-settings-card" aria-labelledby="acc-lang">
+          <h2 id="acc-lang" className="ew-card-title">{t('account.language')}</h2>
+          <div className="ew-row wrap" role="group" aria-labelledby="acc-lang">
+            <button type="button" className="ew-btn" aria-pressed={lang === 'zh'} onClick={() => setLang('zh')}>中文</button>
+            <button type="button" className="ew-btn" aria-pressed={lang === 'en'} onClick={() => setLang('en')}>English</button>
+          </div>
+          <p className="ew-faint ew-small">{t('account.languageNote')}</p>
+          <label className="ew-check"><input type="checkbox" checked={reducedMotion} onChange={e => setReducedMotion(e.target.checked)} />{t('account.motion')}</label>
+          <p className="ew-faint ew-small">{t('account.motionNote')}</p>
+        </section>
+        <section className="ew-panel ew-settings-card" aria-labelledby="acc-assets">
+          <h2 id="acc-assets" className="ew-card-title">{t('account.assets')}</h2>
+          <ul className="ew-gap-list">
+            <li>{t('account.assets.package')}</li>
+            <li>{t('account.assets.generated')}</li>
+          </ul>
+        </section>
+        <section className="ew-panel ew-settings-card" aria-labelledby="acc-services">
+          <h2 id="acc-services" className="ew-card-title">{ADAPTER_MODE === 'mock' ? t('mock.badge.long') : 'Real adapter (not connected)'}</h2>
+          <ul className="ew-gap-list">
+            {REAL_ADAPTER_GAPS.map(g => <li key={g.area}><strong>{g.area}</strong> — <span className="ew-faint">{g.gap}</span></li>)}
+          </ul>
+        </section>
+      </div>
+    </div>
+  )
+}
+
+function AvatarChoice({id, label, selected, onSelect}: {id: PersonaAvatarId; label: string; selected: boolean; onSelect: () => void}) {
+  const url = useAssetUrl(personaAvatarUrl(id))
+  const [failed, setFailed] = useState(false)
+  useEffect(() => setFailed(false), [url])
+  return (
+    <button type="button" className="ew-avatar-choice" aria-pressed={selected} aria-label={label} title={label} onClick={onSelect} data-avatar={id}>
+      {url && !failed ? <img src={url} alt="" decoding="async" draggable={false} onError={() => setFailed(true)} /> : <span aria-hidden="true">{[...label][0]}</span>}
+    </button>
+  )
+}
diff --git a/everwith-claude-frontend/src/features/account/AuthDialog.tsx b/everwith-claude-frontend/src/features/account/AuthDialog.tsx
new file mode 100644
index 00000000..e248c9ee
--- /dev/null
+++ b/everwith-claude-frontend/src/features/account/AuthDialog.tsx
@@ -0,0 +1,62 @@
+import {useState} from 'react'
+import type {FormEvent} from 'react'
+import {Dialog} from '../../components/Dialog'
+import {SpotArt} from '../../components/Art'
+import {useI18n} from '../../app/i18n'
+import type {I18nKey} from '../../app/i18n'
+import {resolveAuth, setAccount, useApp} from '../../app/store'
+import {api} from '../../api/adapter'
+import {CompanionRequestError} from '../../contracts/companion'
+
+/**
+ * Sign-in gate. Cancel resolves `false` and leaves the caller exactly where it was
+ * (inputs and trial play untouched). Success resolves `true`; the caller then asks
+ * for any remaining confirmation — signing in never auto-runs the protected action.
+ */
+export function AuthDialog() {
+  const prompt = useApp(s => s.authPrompt)
+  if (!prompt) return null
+  return <AuthForm key={prompt.id} action={prompt.action} />
+}
+function AuthForm({action}: {action: I18nKey}) {
+  const {t} = useI18n()
+  const [mode, setMode] = useState<'login' | 'register'>('login')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+  const submit = async (e: FormEvent) => {
+    e.preventDefault()
+    if (busy) return
+    setBusy(true); setError(null)
+    try {
+      const session = mode === 'login' ? await api.account.login(email, password) : await api.account.register(email, password)
+      setAccount(session)
+      resolveAuth(true)
+    } catch (err) {
+      const code = err instanceof CompanionRequestError ? err.code : 'network_error'
+      const key = `auth.error.${code}` as I18nKey
+      setError(t(key) !== key ? t(key) : t('error.generic'))
+    } finally { setBusy(false) }
+  }
+  return (
+    <Dialog title={t(mode === 'login' ? 'auth.title.login' : 'auth.title.register')} onClose={() => resolveAuth(false)} initialFocus="input[type=email]">
+      <form className="ew-form" onSubmit={submit} noValidate>
+        <div className="ew-auth-why"><SpotArt kind="signin" className="small" /><p className="ew-muted">{t('auth.why', {action: t(action)})}</p></div>
+        <label className="ew-field"><span>{t('auth.email')}</span>
+          <input className="ew-input" type="email" autoComplete="email" value={email} onChange={e => setEmail(e.target.value)} required aria-invalid={!!error} /></label>
+        <label className="ew-field"><span>{t('auth.password')}</span>
+          <input className="ew-input" type="password" autoComplete={mode === 'login' ? 'current-password' : 'new-password'} value={password} onChange={e => setPassword(e.target.value)} required minLength={8} aria-invalid={!!error} aria-describedby="auth-pw-hint" />
+          <small id="auth-pw-hint">{t('auth.passwordHint')}</small></label>
+        {error && <p className="ew-error-text" role="alert">{error}</p>}
+        <div className="ew-notice mock"><span>{t('auth.mockNote')}</span></div>
+        <div className="ew-form-actions">
+          <button type="button" className="ew-link" onClick={() => { setMode(mode === 'login' ? 'register' : 'login'); setError(null) }}>{t(mode === 'login' ? 'auth.switchRegister' : 'auth.switchLogin')}</button>
+          <span className="ew-grow" />
+          <button type="button" className="ew-btn ghost" onClick={() => resolveAuth(false)}>{t('common.cancel')}</button>
+          <button type="submit" className="ew-btn primary" disabled={busy || !email || !password}>{busy && <span className="ew-spinner" />}{t(mode === 'login' ? 'auth.submit.login' : 'auth.submit.register')}</button>
+        </div>
+      </form>
+    </Dialog>
+  )
+}
diff --git a/everwith-claude-frontend/src/features/character/CharacterPage.tsx b/everwith-claude-frontend/src/features/character/CharacterPage.tsx
new file mode 100644
index 00000000..51738b17
--- /dev/null
+++ b/everwith-claude-frontend/src/features/character/CharacterPage.tsx
@@ -0,0 +1,72 @@
+import {useEffect, useState} from 'react'
+import {ArrowLeft, MessageCircle, UserPlus, Maximize2, Minimize2, Volume2} from 'lucide-react'
+import {useI18n} from '../../app/i18n'
+import {href, navigate} from '../../app/router'
+import {api} from '../../api/adapter'
+import {useApp} from '../../app/store'
+import type {CharacterWork} from '../../contracts/companion'
+import {CompanionRequestError} from '../../contracts/companion'
+import {LiveStage} from '../../live2d/LiveStage'
+import {SpotArt} from '../../components/Art'
+import {errorArt} from '../../art/generated'
+import {characterFor} from '../../live2d/characters'
+import {useAddFriend} from '../friends/AddFriendFlow'
+import {formatTime, pick} from '../../lib/util'
+
+export default function CharacterPage({sourceId, version}: {sourceId: string; version: string}) {
+  const {t, lang} = useI18n()
+  const [character, setCharacter] = useState<CharacterWork | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [zoom, setZoom] = useState(false)
+  const friends = useApp(s => s.friends)
+  const authenticated = useApp(s => !!s.account?.authenticated)
+  const {open, dialog} = useAddFriend(friend => navigate(href.chat(friend.id)))
+  useEffect(() => {
+    api.catalog.character(sourceId, version).then(setCharacter).catch(e => setError(e instanceof CompanionRequestError ? e.code : 'network_error'))
+  }, [sourceId, version])
+  if (error) return <div className="ew-page"><a className="ew-back ew-btn ghost" href={href.discover('characters')}><ArrowLeft aria-hidden="true" />{t('common.back')}</a><div className="ew-empty"><SpotArt kind={errorArt(error)} /><h2>{error === 'not_found' ? t('error.notFound') : t('error.generic')}</h2></div></div>
+  if (!character) return <div className="ew-page-loading" role="status"><span className="ew-spinner" />{t('common.loading')}</div>
+  const cfg = characterFor(character.id, character.version)
+  // Same-source friends are separate people: listed with their own names and dates.
+  const same = (friends ?? []).filter(f => f.source_id === character.id)
+  return (
+    <div className="ew-page ew-character">
+      <a className="ew-back ew-btn ghost" href={href.discover('characters')} onClick={e => { if (history.length > 1) { e.preventDefault(); history.back() } }}><ArrowLeft aria-hidden="true" />{t('common.back')}</a>
+      <div className={`ew-character-layout ${zoom ? 'is-zoom' : ''}`}>
+        <div className="ew-character-stage">
+          <LiveStage character={cfg} name={character.name} fallbackImage={character.avatar} preset={zoom ? 'zoom' : 'stage'} />
+          <button type="button" className="ew-icon-btn ew-stage-zoom" aria-pressed={zoom} onClick={() => setZoom(z => !z)} aria-label={zoom ? t('live2d.unzoom') : t('live2d.zoom')} title={zoom ? t('live2d.unzoom') : t('live2d.zoom')}>{zoom ? <Minimize2 aria-hidden="true" /> : <Maximize2 aria-hidden="true" />}</button>
+        </div>
+        <section className="ew-character-info" aria-labelledby="char-name">
+          <p className="ew-eyebrow">{character.origin === 'official' ? 'Everwith' : t('create.character')} · {pick(character.tagline, lang)}</p>
+          <h1 id="char-name">{character.name}</h1>
+          <h2 className="ew-section-title">{t('character.public')}</h2>
+          <p className="ew-lead">{pick(character.description, lang)}</p>
+          {character.traits.length > 0 && <>
+            <h2 className="ew-section-title">{t('character.traits')}</h2>
+            <ul className="ew-traits">{character.traits.map((tr, i) => <li key={i} className="ew-chip">{pick(tr, lang)}</li>)}</ul>
+          </>}
+          <p className="ew-faint ew-small"><Volume2 aria-hidden="true" className="ew-inline-icon" /> {t('character.voice')}: {character.voice}</p>
+          <p className="ew-faint ew-small">{t('character.noPrivate')}</p>
+          <div className="ew-row wrap ew-character-actions">
+            {same.length > 0 && <a className="ew-btn primary" href={href.chat(same[0].id)}><MessageCircle aria-hidden="true" />{t('character.chatWith', {name: same[0].name})}</a>}
+            <button type="button" className={`ew-btn ${same.length ? '' : 'primary'}`} onClick={() => open({sourceId: character.id, version: character.version, sourceName: character.name})}>
+              <UserPlus aria-hidden="true" />{same.length ? t('character.addAnother') : t('character.add')}</button>
+          </div>
+          {authenticated && same.length > 0 && (
+            <section className="ew-same-source" aria-labelledby="same-source">
+              <h2 id="same-source" className="ew-section-title">{t('character.existing')}</h2>
+              <p className="ew-faint ew-small">{t('character.existingHint')}</p>
+              <ul className="ew-list">
+                {same.map(f => <li key={f.id}><a className="ew-list-row" href={href.chat(f.id)}>
+                  <span className="ew-list-main"><strong>{f.name}</strong><small>{t('friends.number', {n: f.display_number})} · {t('friends.since', {date: formatTime(f.created_at, lang)})} · {pick(f.origin.label, lang)}</small></span>
+                  <MessageCircle aria-hidden="true" /></a></li>)}
+              </ul>
+            </section>
+          )}
+        </section>
+      </div>
+      {dialog}
+    </div>
+  )
+}
diff --git a/everwith-claude-frontend/src/features/chat/ChatPage.tsx b/everwith-claude-frontend/src/features/chat/ChatPage.tsx
new file mode 100644
index 00000000..731456a7
--- /dev/null
+++ b/everwith-claude-frontend/src/features/chat/ChatPage.tsx
@@ -0,0 +1,414 @@
+import {Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore} from 'react'
+import {ArrowDown, ArrowLeft, Gamepad2, Info, MoreHorizontal, PanelRightClose, PanelRightOpen, PencilLine, RotateCcw, Search, Undo2, UserX, Volume2, VolumeX, AlertTriangle, Pencil} from 'lucide-react'
+import {useI18n} from '../../app/i18n'
+import type {I18nKey} from '../../app/i18n'
+import {href, navigate} from '../../app/router'
+import {appStore, openSignIn, refreshFriends, toast, useApp} from '../../app/store'
+import {api} from '../../api/adapter'
+import {CompanionRequestError} from '../../contracts/companion'
+import type {CompanionFriend} from '../../contracts/companion'
+import type {PrivateSnapshot, PrivateTurn} from '../../contracts/private-chat-client'
+import {createChatController} from '../../chat/stream-controller'
+import type {ChatController, ChatTransport, ChatView} from '../../chat/stream-controller'
+import {Composer} from '../../chat/Composer'
+import {CharacterLine, NarrationLine, PlayerLine, RichText} from '../../chat/RichText'
+import {expressionForText, readDraft, readReading, writeDraft, writeReading} from '../../chat/presentation'
+import type {DraftScope} from '../../chat/presentation'
+import {LiveStage} from '../../live2d/LiveStage'
+import {characterFor} from '../../live2d/characters'
+import {demoVoice} from '../../live2d/audio'
+import {Portrait} from '../../components/Portrait'
+import {SpotArt} from '../../components/Art'
+import {errorArt} from '../../art/generated'
+import {ConfirmDialog, Dialog} from '../../components/Dialog'
+import {PlayTogetherDialog} from '../friends/PlayTogether'
+import {formatTime, pick, randomId} from '../../lib/util'
+
+type Loaded = {friend: CompanionFriend; snapshot: PrivateSnapshot; accountId: string}
+
+export default function ChatPage({friendId}: {friendId: string}) {
+  const {t, lang} = useI18n()
+  const account = useApp(s => s.account)
+  const [loaded, setLoaded] = useState<Loaded | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [reloadSeq, setReloadSeq] = useState(0)
+  const accountId = account?.authenticated ? account.account!.id : null
+
+  useEffect(() => {
+    if (!accountId) return
+    let live = true
+    setLoaded(null); setError(null)
+    ;(async () => {
+      try {
+        const friend = await api.friends.get(friendId)
+        const snapshot = await api.chat.open(friend.id, friend.epoch, accountId, randomId('open', 8), appStore.get().lang)
+        if (live) setLoaded({friend, snapshot, accountId})
+      } catch (e) { if (live) setError(e instanceof CompanionRequestError ? e.code : 'network_error') }
+    })()
+    return () => { live = false }
+  }, [friendId, accountId, reloadSeq])
+
+  if (account && !account.authenticated) return (
+    <div className="ew-page"><div className="ew-empty"><SpotArt kind="signin" /><h2>{t('auth.why', {action: t('auth.action.chat')})}</h2>
+      <button type="button" className="ew-btn primary" onClick={() => openSignIn('auth.action.chat')}>{t('common.signin')}</button></div></div>
+  )
+  if (error) return (
+    <div className="ew-page"><a className="ew-back ew-btn ghost" href={href.friends()}><ArrowLeft aria-hidden="true" />{t('common.back')}</a>
+      <div className="ew-empty"><SpotArt kind={errorArt(error)} /><h2>{error === 'not_found' ? t('error.notFound') : error === 'auth_session_required' ? t('error.auth') : t('error.generic')}</h2>
+        <button type="button" className="ew-btn" onClick={() => setReloadSeq(n => n + 1)}>{t('common.retry')}</button></div></div>
+  )
+  if (!loaded) return <div className="ew-page-loading" role="status"><span className="ew-spinner" />{t('common.loading')}</div>
+  return <ChatRoom key={`${loaded.friend.id}:${loaded.friend.epoch}:${loaded.snapshot.conversation.id}`} {...loaded} lang={lang} onReload={() => { void refreshFriends(); setReloadSeq(n => n + 1) }} />
+}
+
+function ChatRoom({friend, snapshot, accountId, lang, onReload}: Loaded & {lang: 'zh' | 'en'; onReload: () => void}) {
+  const conversationId = snapshot.conversation.id
+  const scope: DraftScope = useMemo(() => ({accountId, friendId: friend.id, epoch: friend.epoch, conversationId}), [accountId, friend.id, friend.epoch, conversationId])
+  // One controller per mount. Created in an effect so StrictMode's trial unmount
+  // disposes its own instance instead of a shared one.
+  const [controller, setController] = useState<ChatController | null>(null)
+  useEffect(() => {
+    const transport: ChatTransport = {
+      send: (cmd, signal) => api.chat.send(conversationId, cmd, accountId, friend.epoch, signal),
+      stream: (adm, signal) => api.chat.stream(adm, signal),
+      cancel: id => api.chat.cancel(id, accountId, friend.epoch),
+      receipt: id => api.chat.receipt(id),
+      retry: id => api.chat.retry(id, accountId, friend.epoch),
+      lookup: key => api.chat.lookup(conversationId, key),
+      read: () => api.chat.read(conversationId, friend.id, friend.epoch),
+    }
+    const c = createChatController(snapshot, {account_id: accountId, friend_id: friend.id, friend_epoch: friend.epoch, session_id: conversationId, allow_fictional_thought: false}, transport)
+    setController(c)
+    if (snapshot.pending_operation) void c.resume()
+    return () => c.dispose()
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps -- keyed by friend/epoch/conversation
+  if (!controller) return <div className="ew-page-loading" role="status"><span className="ew-spinner" /></div>
+  return <ChatRoomBody controller={controller} friend={friend} snapshot={snapshot} accountId={accountId} lang={lang} onReload={onReload} scope={scope} conversationId={conversationId} />
+}
+
+function ChatRoomBody({controller, friend, accountId, lang, onReload, scope, conversationId}: Loaded & {controller: ChatController; lang: 'zh' | 'en'; onReload: () => void; scope: DraftScope; conversationId: string}) {
+  const {t} = useI18n()
+  const view = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot)
+  // Draft (text + selection) per account/friend/epoch/conversation.
+  const saved = useMemo(() => readDraft(scope), [scope])
+  const [draft, setDraft] = useState(saved?.text ?? '')
+  const [selection, setSelection] = useState<{start: number; end: number} | null>(saved ? {start: saved.start, end: saved.end} : null)
+  const [stash, setStash] = useState<string | null>(null)
+  const inputRef = useRef<HTMLTextAreaElement>(null)
+  const latestDraft = useRef({text: draft, start: draft.length, end: draft.length})
+  latestDraft.current = {text: draft, start: selection?.start ?? draft.length, end: selection?.end ?? draft.length}
+  useEffect(() => { const h = setTimeout(() => writeDraft(scope, latestDraft.current), 120); return () => clearTimeout(h) }, [draft, selection, scope])
+  // Leaving within the debounce window must not resurrect an older draft: flush on unmount.
+  useEffect(() => () => writeDraft(scope, latestDraft.current), [scope])
+  // A cancelled / stale / failed command gives its text back — never auto-sent.
+  useEffect(() => {
+    if (!view.restore) return
+    const r = controller.consumeRestore()
+    if (!r) return
+    if (!draft.trim()) setDraft(r.text); else setStash(r.text)
+  }, [view.restore]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const active = ['sending', 'starting', 'generating', 'awaiting_commit', 'cancelling'].includes(view.phase)
+  const readOnly = view.history.conversation.status !== 'active'
+  const cfg = characterFor(friend.source_id, friend.source_version)
+  const [toolsOpen, setToolsOpen] = useState(() => window.innerWidth >= 1360)
+  const [dialog, setDialog] = useState<null | 'play' | 'rename' | 'reset' | 'remove' | 'correct' | 'profile' | {rollback: string; count: number}>(null)
+  const [speaking, setSpeaking] = useState(false)
+
+  const send = (text: string) => {
+    if (/^\s*\/(纠错|correct)\s*$/i.test(text)) { setDialog('correct'); return } // exact shortcut only
+    setStash(null)
+    void controller.start(text, appStore.get().lang)
+    // Accepted for sending: the receipt now holds the text; failures hand it back.
+    const v = controller.getSnapshot()
+    if (v.phase === 'sending' && v.input === text) { setDraft(''); setSelection(null) }
+  }
+
+  // Expression: from visible public text only; neutral after a cancel/failure.
+  const lastCharacterText = useMemo(() => {
+    for (let i = view.history.history.turns.length - 1; i >= 0; i--) {
+      const seg = [...view.history.history.turns[i].visible_segments].reverse().find(s => s.kind === 'dialogue' && s.availability !== 'withdrawn')
+      if (seg) return seg.text
+    }
+    return ''
+  }, [view.history])
+  const provisionalSpoken = view.provisional.filter(s => s.kind === 'spoken').map(s => s.text).join(' ')
+  const expression = view.phase === 'cancelled' || view.phase === 'failed' ? 'neutral' : expressionForText(provisionalSpoken || lastCharacterText)
+
+  useEffect(() => () => { if (demoVoice.speaker === cfg?.key) demoVoice.stop() }, [cfg?.key])
+  const toggleVoice = async () => {
+    if (!cfg) return
+    if (speaking) { demoVoice.stop(); setSpeaking(false); return }
+    try { setSpeaking(true); await demoVoice.play(lastCharacterText || friend.name, cfg.key, () => setSpeaking(false)) } catch { setSpeaking(false); toast(t('chat.voiceOff'), 'error') }
+  }
+
+  return (
+    <div className={`ew-chat ${toolsOpen ? 'tools-open' : ''}`}>
+      <aside className="ew-chat-stage" aria-label={friend.name}>
+        <div className="ew-chat-stage-top">
+          <a className="ew-back ew-icon-btn" href={href.friends()} aria-label={t('common.back')} title={t('common.back')}><ArrowLeft aria-hidden="true" /></a>
+          <div className="ew-chat-who">
+            <strong>{friend.name}</strong>
+            <small>{t('friends.source', {name: friend.source_name})} · {t('friends.number', {n: friend.display_number})}</small>
+          </div>
+        </div>
+        <div className="ew-chat-portrait">
+          <LiveStage character={cfg} name={friend.name} fallbackImage={friend.avatar} expression={expression} speaking={speaking} preset="stage" />
+        </div>
+        <div className="ew-chat-stage-meta">
+          <span className="ew-chip">{t(`expr.${expression}`)}</span>
+          <span className="ew-chip mock" title={t('chat.replyModeNote')}>{t('chat.replyMode')}</span>
+        </div>
+        <div className="ew-voice">
+          <button type="button" className="ew-btn small" onClick={() => void toggleVoice()} disabled={!cfg} aria-pressed={speaking}>
+            {speaking ? <VolumeX aria-hidden="true" /> : <Volume2 aria-hidden="true" />}{speaking ? t('chat.stopAudio') : t('chat.demoAudio')}</button>
+          <small className="ew-faint">{t('chat.voiceOff')}</small>
+        </div>
+      </aside>
+
+      <section className="ew-chat-main" aria-label={t('chat.label', {name: friend.name})}>
+        {readOnly && <div className="ew-notice warn" role="status"><Info aria-hidden="true" /><div><strong>{t('chat.readOnly')}</strong><div>{t('chat.readOnlyNote')}</div></div></div>}
+        <Transcript view={view} friend={friend} scope={scope} readOnly={readOnly || active} onRollback={(turnId, count) => setDialog({rollback: turnId, count})} />
+        <Notices view={view} controller={controller} onReload={onReload} />
+        {stash !== null && <div className="ew-notice" role="status"><Undo2 aria-hidden="true" /><div><span>{t('chat.notice.cancelled')}</span><div className="ew-stash">“{stash}”</div><div className="ew-notice-actions">
+          <button type="button" className="ew-btn small" onClick={() => { setDraft(stash); setStash(null); inputRef.current?.focus() }}>{t('chat.useHint')}</button>
+          <button type="button" className="ew-btn small ghost" onClick={() => setStash(null)}>{t('common.close')}</button></div></div></div>}
+        <Composer value={draft} onChange={setDraft} onSubmit={send} onStop={() => void controller.cancel()} busy={active} disabled={readOnly || view.phase === 'unknown'}
+          canSend={!view.history.pending_operation} label={t('chat.label', {name: friend.name})} placeholder={t('chat.placeholder', {name: friend.name})} inputRef={inputRef}
+          selection={selection} onSelection={setSelection} describedBy="chat-status"
+          hints={{title: t('chat.hintsTitle'), note: t('chat.hintsNote'), items: lang === 'zh' ? ['*想了想。*\n今天过得怎么样？', '*笑了笑。*\n下次一起玩一局吧。'] : ['*Thinks for a moment.*\nHow was your day?', '*Smiles.*\nLet\'s play a game together next time.']}} />
+        <p id="chat-status" className="ew-sr" aria-live="polite">{view.phase === 'generating' ? t('chat.generating', {name: friend.name}) : view.phase === 'awaiting_commit' ? t('chat.awaiting') : ''}</p>
+      </section>
+
+      <aside className={`ew-chat-tools ${toolsOpen ? 'is-open' : ''}`} aria-label={t('chat.tools')}>
+        <button type="button" className="ew-icon-btn ew-tools-toggle" aria-expanded={toolsOpen} onClick={() => setToolsOpen(v => !v)} aria-label={t('chat.tools')} title={t('chat.tools')}>
+          {toolsOpen ? <PanelRightClose aria-hidden="true" /> : <PanelRightOpen aria-hidden="true" />}</button>
+        {toolsOpen && <div className="ew-tools-body">
+          <button type="button" className="ew-btn primary wide" onClick={() => setDialog('play')}><Gamepad2 aria-hidden="true" />{t('chat.playTogether')}</button>
+          <button type="button" className="ew-btn wide" onClick={() => setDialog('profile')}><Info aria-hidden="true" />{t('chat.profile')}</button>
+          <hr />
+          <p className="ew-tools-caption"><MoreHorizontal aria-hidden="true" className="ew-inline-icon" /> {t('common.more')}</p>
+          <button type="button" className="ew-btn ghost wide align-start" disabled={readOnly} onClick={() => setDialog('correct')}><Search aria-hidden="true" />{t('chat.correct')}</button>
+          <button type="button" className="ew-btn ghost wide align-start" onClick={() => setDialog('rename')}><Pencil aria-hidden="true" />{t('chat.rename')}</button>
+          <button type="button" className="ew-btn ghost wide align-start" onClick={() => setDialog('reset')}><RotateCcw aria-hidden="true" />{t('chat.reset')}</button>
+          <button type="button" className="ew-btn ghost wide align-start danger-text" onClick={() => setDialog('remove')}><UserX aria-hidden="true" />{t('chat.remove')}</button>
+          <OlderConversations friend={friend} currentId={conversationId} />
+        </div>}
+      </aside>
+
+      {dialog === 'play' && <PlayTogetherDialog friend={friend} from={href.chat(friend.id)} onClose={() => setDialog(null)} />}
+      {dialog === 'profile' && <Dialog title={friend.name} onClose={() => setDialog(null)}>
+        <div className="ew-row"><span className="ew-avatar large"><Portrait src={friend.avatar} name={friend.name} /></span>
+          <div><strong>{friend.name}</strong><div className="ew-muted">{t('friends.source', {name: friend.source_name})} · {t('friends.number', {n: friend.display_number})}</div>
+            <div className="ew-faint ew-small">{t('friends.since', {date: formatTime(friend.created_at, lang)})} · {pick(friend.origin.label, lang)} · epoch {friend.epoch}</div></div></div>
+        <a className="ew-btn" href={href.character(friend.source_id, friend.source_version)}>{t('character.public')}</a>
+      </Dialog>}
+      {dialog === 'rename' && <RenameDialog friend={friend} accountId={accountId} onClose={() => setDialog(null)} onDone={onReload} />}
+      {dialog === 'reset' && <FriendCommandDialog kind="reset" friend={friend} accountId={accountId} onClose={() => setDialog(null)} onDone={onReload} />}
+      {dialog === 'remove' && <FriendCommandDialog kind="remove" friend={friend} accountId={accountId} onClose={() => setDialog(null)} onDone={() => { void refreshFriends(); navigate(href.friends()) }} />}
+      {dialog === 'correct' && <CorrectionDialog onClose={() => setDialog(null)} onSubmit={async text => {
+        const next = await api.chat.correction(conversationId, randomId('corr', 8), text, null, friend.id, friend.epoch, appStore.get().lang)
+        controller.replaceHistory(next); setDialog(null)
+        if (/^\s*\/(纠错|correct)\s*$/i.test(draft)) setDraft('')
+      }} />}
+      {typeof dialog === 'object' && dialog && 'rollback' in dialog && <ConfirmDialog title={t('chat.rollback')} body={<p>{t('chat.rollbackConfirm', {n: dialog.count})}</p>} confirmLabel={t('chat.rollback')} danger
+        onCancel={() => setDialog(null)} onConfirm={async () => {
+          try {
+            const r = await api.chat.rollback(conversationId, dialog.rollback, view.history.history.position.revision, friend.id, friend.epoch, appStore.get().lang)
+            controller.replaceHistory(r.snapshot)
+            if (draft.trim()) setStash(draft)
+            setDraft(r.restored); setDialog(null); toast(t('chat.rollbackDone'), 'success')
+            requestAnimationFrame(() => inputRef.current?.focus())
+          } catch (e) { setDialog(null); toast(e instanceof CompanionRequestError && e.code === 'stale_revision' ? t('error.conflict') : t('error.generic'), 'error') }
+        }} />}
+    </div>
+  )
+}
+
+function Transcript({view, friend, scope, readOnly, onRollback}: {view: ChatView; friend: CompanionFriend; scope: DraftScope; readOnly: boolean; onRollback: (turnId: string, count: number) => void}) {
+  const {t} = useI18n()
+  const ref = useRef<HTMLDivElement>(null)
+  const atBottom = useRef(true)
+  const [unseen, setUnseen] = useState(0)
+  const turns = view.history.history.turns
+  const showReceipt = !!view.input && ['sending', 'starting', 'generating', 'awaiting_commit', 'cancelling', 'unknown', 'interrupted'].includes(view.phase)
+  const contentKey = `${turns.length}|${view.provisional.map(s => s.text.length).join(',')}|${showReceipt}`
+  const prevTurns = useRef(turns.length)
+
+  const saveAnchor = useCallback(() => {
+    const box = ref.current; if (!box) return
+    const end = box.scrollHeight - box.scrollTop - box.clientHeight < 40
+    atBottom.current = end
+    if (end) setUnseen(0)
+    const items = Array.from(box.querySelectorAll<HTMLElement>('[data-anchor]'))
+    const first = items.find(el => el.offsetTop + el.offsetHeight > box.scrollTop) ?? null
+    writeReading(scope, {anchorId: first?.dataset.anchor ?? null, offset: first ? first.offsetTop - box.scrollTop : 0, atEnd: end})
+  }, [scope])
+  const restoreAnchor = useCallback(() => {
+    const box = ref.current; if (!box) return
+    const pos = readReading(scope)
+    if (!pos || pos.atEnd || !pos.anchorId) { box.scrollTop = box.scrollHeight; atBottom.current = true; return }
+    const el = box.querySelector<HTMLElement>(`[data-anchor="${CSS.escape(pos.anchorId)}"]`)
+    if (el) { box.scrollTop = el.offsetTop - pos.offset; atBottom.current = false } else box.scrollTop = box.scrollHeight
+  }, [scope])
+  useLayoutEffect(() => { restoreAnchor() }, [restoreAnchor])
+  // New content: follow only if the reader was already at the end.
+  useLayoutEffect(() => {
+    const box = ref.current; if (!box) return
+    if (atBottom.current) box.scrollTop = box.scrollHeight
+    else if (turns.length > prevTurns.current) setUnseen(n => n + (turns.length - prevTurns.current))
+    prevTurns.current = turns.length
+  }, [contentKey]) // eslint-disable-line react-hooks/exhaustive-deps
+  // Width/height changes (side panels, zoom, fonts) keep the same anchor instead of jumping.
+  useEffect(() => {
+    const box = ref.current; if (!box) return
+    const ro = new ResizeObserver(() => { if (atBottom.current) box.scrollTop = box.scrollHeight; else restoreAnchor() })
+    ro.observe(box)
+    return () => ro.disconnect()
+  }, [restoreAnchor])
+
+  const avatar = <span className="ew-avatar"><Portrait src={friend.avatar} name={friend.name} position="50% 14%" /></span>
+  const later = (index: number) => turns.slice(index).length
+  return (
+    <div className="ew-transcript-wrap">
+      <div ref={ref} className="ew-transcript" onScroll={saveAnchor} tabIndex={0} aria-label={t('chat.label', {name: friend.name})} role="log" aria-live="off">
+        <p className="ew-transcript-start">{t('chat.empty', {name: friend.name})}</p>
+        {turns.map((turn, index) => <TurnView key={turn.turn_id} turn={turn} friend={friend} avatar={avatar} canRollback={!readOnly && index > 0 && !!turn.player_expression} onRollback={() => onRollback(turn.turn_id, later(index) - 1)} />)}
+        {showReceipt && (
+          <div data-anchor="receipt">
+            <PlayerLine provisional meta={<span className="ew-receipt">{view.phase === 'unknown' ? t('chat.notice.unknown').split('。')[0] : t('chat.receiptPending')}</span>}><RichText text={view.input} /></PlayerLine>
+          </div>
+        )}
+        {view.provisional.length > 0 && (
+          <div data-anchor="provisional">
+            <CharacterLine name={friend.name} avatar={avatar} provisional meta={<span className="ew-chip mock small">{t('chat.provisional')}</span>}>
+              {view.provisional.map(s => <p key={s.segment_id} className={s.kind === 'action' ? 'ew-line-action' : s.kind === 'narration' ? 'ew-line-narr' : ''}>{s.kind === 'action' ? <em className="ew-act">{s.text}</em> : <RichText text={s.text} />}</p>)}
+            </CharacterLine>
+          </div>
+        )}
+        {['sending', 'starting'].includes(view.phase) && view.provisional.length === 0 && <div className="ew-typing" role="status"><span className="ew-spinner" />{view.phase === 'sending' ? t('chat.sending') : t('chat.generating', {name: friend.name})}</div>}
+        {view.phase === 'awaiting_commit' && <div className="ew-typing" role="status"><span className="ew-spinner" />{t('chat.awaiting')}</div>}
+        {view.phase === 'cancelling' && <div className="ew-typing" role="status"><span className="ew-spinner" />{t('chat.cancelling')}</div>}
+        {view.ignoredFrames > 0 && <p className="ew-faint ew-small ew-center">{t('chat.ignoredFrames', {n: view.ignoredFrames})}</p>}
+      </div>
+      {unseen > 0 && <button type="button" className="ew-new-pill" onClick={() => { const box = ref.current; if (box) { box.scrollTop = box.scrollHeight; atBottom.current = true; setUnseen(0) } }}>
+        <ArrowDown aria-hidden="true" />{t('chat.newMessages', {n: unseen})}</button>}
+    </div>
+  )
+}
+
+function TurnView({turn, friend, avatar, canRollback, onRollback}: {turn: PrivateTurn; friend: CompanionFriend; avatar: React.ReactNode; canRollback: boolean; onRollback: () => void}) {
+  const {t} = useI18n()
+  const groups: {kind: 'character' | 'narration'; parts: {kind: string; text: string; id: string}[]}[] = []
+  for (const s of turn.visible_segments) {
+    if (s.availability === 'withdrawn') continue
+    const kind = s.kind === 'narration' ? 'narration' : 'character'
+    const last = groups[groups.length - 1]
+    if (last && last.kind === kind && kind === 'character') last.parts.push({kind: s.kind, text: s.text, id: s.segment_id})
+    else groups.push({kind, parts: [{kind: s.kind, text: s.text, id: s.segment_id}]})
+  }
+  return (
+    <div className="ew-turn" data-anchor={turn.turn_id} data-turn={turn.turn_id}>
+      {turn.player_expression && turn.input_availability !== 'withdrawn' && (
+        <PlayerLine meta={canRollback ? <button type="button" className="ew-msg-tool" onClick={onRollback} title={t('chat.rollback')} aria-label={`${t('chat.rollback')}: ${turn.player_expression.slice(0, 20)}`}><Undo2 aria-hidden="true" /><span>{t('chat.rollback')}</span></button> : undefined}>
+          <RichText text={turn.player_expression} />
+        </PlayerLine>
+      )}
+      {groups.map((g, i) => g.kind === 'narration'
+        ? <NarrationLine key={i}>{g.parts.map(p => <Fragment key={p.id}><RichText text={p.text} action /></Fragment>)}</NarrationLine>
+        : <CharacterLine key={i} name={friend.name} avatar={avatar} actorKey={friend.id}>
+            {g.parts.map(p => <p key={p.id} className={p.kind === 'action' ? 'ew-line-action' : ''}>{p.kind === 'action' ? <em className="ew-act">{p.text}</em> : <RichText text={p.text} />}</p>)}
+          </CharacterLine>)}
+    </div>
+  )
+}
+
+function Notices({view, controller, onReload}: {view: ChatView; controller: ChatController; onReload: () => void}) {
+  const {t} = useI18n()
+  const n = view.notice
+  const pending = view.history.pending_operation
+  if (pending?.status === 'retryable_failed' || (n?.kind === 'retryable')) {
+    return <div className="ew-notice warn" role="alert"><AlertTriangle aria-hidden="true" /><div><span>{t('chat.notice.retryable')}</span>
+      <div className="ew-notice-actions"><button type="button" className="ew-btn small primary" onClick={() => void controller.retry()}>{t('chat.retry')}</button></div></div></div>
+  }
+  if (!n) return null
+  const key = `chat.notice.${n.kind}` as I18nKey
+  const actions = n.kind === 'unknown' ? <button type="button" className="ew-btn small primary" onClick={() => void controller.lookup()}>{t('chat.lookup')}</button>
+    : n.kind === 'lookup_missing' ? <button type="button" className="ew-btn small primary" onClick={() => void controller.resendSameKey()}>{t('chat.resend')}</button>
+    : n.kind === 'epoch_changed' || n.kind === 'read_only' ? <button type="button" className="ew-btn small" onClick={onReload}>{t('common.retry')}</button>
+    : n.kind === 'auth' ? <button type="button" className="ew-btn small primary" onClick={() => openSignIn('auth.action.chat')}>{t('common.signin')}</button>
+    : null
+  const tone = n.kind === 'commit_won' ? 'ok' : n.kind === 'cancelled' || n.kind === 'stale' ? '' : 'warn'
+  return (
+    <div className={`ew-notice ${tone}`} role={tone === 'warn' ? 'alert' : 'status'} data-notice={n.kind}>
+      <Info aria-hidden="true" />
+      <div><span>{t(key)}</span><div className="ew-notice-actions">{actions}
+        {n.kind !== 'unknown' && <button type="button" className="ew-btn small ghost" onClick={() => controller.dismissNotice()}>{t('common.close')}</button>}</div></div>
+    </div>
+  )
+}
+
+function RenameDialog({friend, accountId, onClose, onDone}: {friend: CompanionFriend; accountId: string; onClose: () => void; onDone: () => void}) {
+  const {t} = useI18n()
+  const [name, setName] = useState(friend.name)
+  const [busy, setBusy] = useState(false)
+  return (
+    <Dialog title={t('chat.renameTitle')} onClose={onClose} initialFocus="input" footer={<>
+      <button type="button" className="ew-btn ghost" onClick={onClose}>{t('common.cancel')}</button>
+      <button type="button" className="ew-btn primary" disabled={busy || !name.trim()} onClick={async () => {
+        setBusy(true)
+        try { await api.friends.rename(friend.id, friend.epoch, name.trim(), accountId); onClose(); onDone() } catch { toast(t('error.generic'), 'error'); setBusy(false) }
+      }}>{t('common.save')}</button></>}>
+      <p className="ew-muted">{t('name.desc', {source: friend.source_name})}</p>
+      <label className="ew-field"><span>{t('name.label')}</span><input className="ew-input" value={name} maxLength={40} onChange={e => setName(e.target.value)} /></label>
+    </Dialog>
+  )
+}
+function FriendCommandDialog({kind, friend, accountId, onClose, onDone}: {kind: 'reset' | 'remove'; friend: CompanionFriend; accountId: string; onClose: () => void; onDone: () => void}) {
+  const {t} = useI18n()
+  const [busy, setBusy] = useState(false)
+  return <ConfirmDialog title={t(kind === 'reset' ? 'chat.resetTitle' : 'chat.removeTitle')} danger busy={busy}
+    body={<><p>{t(kind === 'reset' ? 'chat.resetDesc' : 'chat.removeDesc', {name: friend.name})}</p><p className="ew-faint ew-small">{friend.name} · {t('friends.source', {name: friend.source_name})} · epoch {friend.epoch}</p></>}
+    confirmLabel={t(kind === 'reset' ? 'chat.reset' : 'chat.remove')} onCancel={onClose}
+    onConfirm={async () => {
+      setBusy(true)
+      try { if (kind === 'reset') await api.friends.reset(friend.id, friend.epoch, accountId); else await api.friends.remove(friend.id, friend.epoch, accountId); onClose(); onDone() }
+      catch { setBusy(false); toast(t('error.generic'), 'error') }
+    }} />
+}
+function CorrectionDialog({onClose, onSubmit}: {onClose: () => void; onSubmit: (text: string) => Promise<void>}) {
+  const {t} = useI18n()
+  const [text, setText] = useState('')
+  const [busy, setBusy] = useState(false)
+  return (
+    <Dialog title={t('chat.correctTitle')} onClose={onClose} initialFocus="textarea" footer={<>
+      <button type="button" className="ew-btn ghost" onClick={onClose}>{t('common.cancel')}</button>
+      <button type="button" className="ew-btn primary" disabled={busy || !text.trim()} onClick={async () => { setBusy(true); try { await onSubmit(text.trim()) } catch { setBusy(false); toast(t('error.generic'), 'error') } }}><PencilLine aria-hidden="true" />{t('common.confirm')}</button></>}>
+      <p className="ew-muted">{t('chat.correctDesc')}</p>
+      <label className="ew-field"><span>{t('chat.correctLabel')}</span><textarea className="ew-textarea" value={text} maxLength={400} onChange={e => setText(e.target.value)} /></label>
+    </Dialog>
+  )
+}
+function OlderConversations({friend, currentId}: {friend: CompanionFriend; currentId: string}) {
+  const {t, lang} = useI18n()
+  const [items, setItems] = useState<{id: string; friend_epoch: number; status: string; turns: number; updated_at: string}[]>([])
+  const [viewing, setViewing] = useState<PrivateSnapshot | null>(null)
+  useEffect(() => { api.friends.conversations(friend.id).then(r => setItems(r.items.filter(c => c.id !== currentId))).catch(() => setItems([])) }, [friend.id, currentId])
+  if (!items.length) return null
+  return (
+    <section className="ew-older">
+      <p className="ew-tools-caption">{t('chat.history')}</p>
+      {items.map(c => <button key={c.id} type="button" className="ew-btn ghost wide align-start small" onClick={async () => setViewing(await api.chat.read(c.id, friend.id, c.friend_epoch))}>
+        epoch {c.friend_epoch} · {c.turns} · {formatTime(c.updated_at, lang)} <span className="ew-chip">{t('chat.readOnly')}</span></button>)}
+      {viewing && <Dialog title={`${t('chat.readOnly')} · epoch ${viewing.conversation.friend_epoch}`} onClose={() => setViewing(null)} wide>
+        <div className="ew-readonly-log">
+          {viewing.history.turns.map(turn => <div key={turn.turn_id} className="ew-turn">
+            {turn.player_expression && <PlayerLine><RichText text={turn.player_expression} /></PlayerLine>}
+            {turn.visible_segments.filter(s => s.availability !== 'withdrawn').map(s => s.kind === 'narration' ? <NarrationLine key={s.segment_id}><RichText text={s.text} action /></NarrationLine>
+              : <p key={s.segment_id} className={`ew-plain-line ${s.kind === 'action' ? 'ew-line-action' : ''}`}>{s.kind === 'action' ? <em className="ew-act">{s.text}</em> : <RichText text={s.text} />}</p>)}
+          </div>)}
+        </div>
+      </Dialog>}
+    </section>
+  )
+}
diff --git a/everwith-claude-frontend/src/features/create/CreatePage.tsx b/everwith-claude-frontend/src/features/create/CreatePage.tsx
new file mode 100644
index 00000000..a00ed4a2
--- /dev/null
+++ b/everwith-claude-frontend/src/features/create/CreatePage.tsx
@@ -0,0 +1,94 @@
+import {useEffect, useRef, useState} from 'react'
+import type {FormEvent} from 'react'
+import {BookOpen, Plus, UserRound} from 'lucide-react'
+import {useI18n} from '../../app/i18n'
+import {href, navigate} from '../../app/router'
+import {toast} from '../../app/store'
+import {api} from '../../api/adapter'
+import type {WorkJSON} from '../../api/types'
+import {Dialog} from '../../components/Dialog'
+import {Portrait, useAssetUrl} from '../../components/Portrait'
+import {SpotArt} from '../../components/Art'
+import {CREATE_TYPE_ART, workCoverUrl} from '../../art/generated'
+import {formatTime, randomId} from '../../lib/util'
+
+/**
+ * Creation list. A new work starts from an explicit type choice and a name — there is
+ * no default blank editor. The type is fixed once created.
+ */
+export default function CreatePage() {
+  const {t, lang} = useI18n()
+  const [works, setWorks] = useState<WorkJSON[] | null>(null)
+  const [error, setError] = useState(false)
+  const [creating, setCreating] = useState(false)
+  const load = () => { setError(false); api.works.list().then(r => setWorks(r.items)).catch(() => setError(true)) }
+  useEffect(load, [])
+  return (
+    <div className="ew-page ew-create">
+      <header className="ew-page-head">
+        <div><h1>{t('create.title')}</h1><p className="ew-muted">{t('create.subtitle')}</p></div>
+        <button type="button" className="ew-btn primary" onClick={() => setCreating(true)} data-testid="create-new"><Plus aria-hidden="true" />{t('create.new')}</button>
+      </header>
+      {error && <div className="ew-notice danger" role="alert"><span>{t('error.network')}<span className="ew-notice-actions"><button type="button" className="ew-btn small" onClick={load}>{t('common.retry')}</button></span></span></div>}
+      {!works && !error && <div className="ew-page-loading" role="status"><span className="ew-spinner" />{t('common.loading')}</div>}
+      {works && works.length === 0 && <div className="ew-empty"><SpotArt kind="create" /><h2>{t('create.empty')}</h2><p>{t('create.emptyNote')}</p><button type="button" className="ew-btn primary" onClick={() => setCreating(true)}><Plus aria-hidden="true" />{t('create.new')}</button></div>}
+      {works && works.length > 0 && (
+        <ul className="ew-works">
+          {works.map(w => (
+            <li key={w.id}>
+              <a className="ew-work-card" href={href.work(w.id)} data-testid="work-card">
+                <span className="ew-work-cover" aria-hidden="true"><Portrait src={workCoverUrl(w.draft.cover)} name={w.name} alt="" /></span>
+                <span className="ew-work-text">
+                  <span className="ew-row"><span className="ew-chip">{w.type === 'story' ? <BookOpen aria-hidden="true" /> : <UserRound aria-hidden="true" />}{w.type === 'story' ? t('create.story') : t('create.character')}</span>
+                    {w.share.enabled && <span className="ew-chip ok">{t('create.shareOn', {n: w.share.version ?? ''})}</span>}</span>
+                  <strong>{w.name}</strong>
+                  <small className="ew-faint">{w.latest_version ? t('create.saved', {n: w.latest_version}) : t('create.neverSaved')}{w.dirty ? ` · ${t('create.unsaved')}` : ''} · {formatTime(w.updated_at, lang)}</small>
+                </span>
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+      {creating && <NewWorkDialog onClose={() => setCreating(false)} onCreated={w => { setCreating(false); navigate(href.work(w.id)) }} onError={() => toast(t('error.generic'), 'error')} />}
+    </div>
+  )
+}
+
+function NewWorkDialog({onClose, onCreated, onError}: {onClose: () => void; onCreated: (w: WorkJSON) => void; onError: () => void}) {
+  const {t} = useI18n()
+  const [type, setType] = useState<'story' | 'character' | null>(null)
+  const [name, setName] = useState('')
+  const [busy, setBusy] = useState(false)
+  const key = useRef(randomId('work', 10))
+  const submit = async (e: FormEvent) => {
+    e.preventDefault()
+    if (!type || !name.trim() || busy) return
+    setBusy(true)
+    try { onCreated(await api.works.create(key.current, type, name.trim())) } catch { onError(); setBusy(false) }
+  }
+  return (
+    <Dialog title={t('create.chooseType')} onClose={onClose}>
+      <form className="ew-form" onSubmit={submit}>
+        <div className="ew-type-choice" role="group" aria-label={t('create.chooseType')}>
+          <button type="button" aria-pressed={type === 'story'} onClick={() => setType('story')} data-testid="type-story"><TypeArt kind="story" /><strong>{t('create.story')}</strong><small>{t('create.storyNote')}</small></button>
+          <button type="button" aria-pressed={type === 'character'} onClick={() => setType('character')} data-testid="type-character"><TypeArt kind="character" /><strong>{t('create.character')}</strong><small>{t('create.characterNote')}</small></button>
+        </div>
+        <p className="ew-faint ew-small">{t('create.typeFixed')}</p>
+        {type && <label className="ew-field"><span>{t('create.nameLabel')}</span><input className="ew-input" value={name} maxLength={60} autoFocus onChange={e => setName(e.target.value)} required data-testid="work-name" /></label>}
+        <div className="ew-form-actions">
+          <button type="button" className="ew-btn ghost" onClick={onClose}>{t('common.cancel')}</button>
+          <button type="submit" className="ew-btn primary" disabled={!type || !name.trim() || busy} data-testid="work-create">{t('create.create')}</button>
+        </div>
+      </form>
+    </Dialog>
+  )
+}
+
+/** Generated type illustration; falls back to the plain icon if the file is missing. */
+function TypeArt({kind}: {kind: 'story' | 'character'}) {
+  const url = useAssetUrl(CREATE_TYPE_ART[kind])
+  const [failed, setFailed] = useState(false)
+  useEffect(() => setFailed(false), [url])
+  if (!url || failed) return kind === 'story' ? <BookOpen aria-hidden="true" /> : <UserRound aria-hidden="true" />
+  return <img className="ew-type-art" src={url} alt="" aria-hidden="true" width={72} height={72} draggable={false} onError={() => setFailed(true)} />
+}
diff --git a/everwith-claude-frontend/src/features/create/WorkEditorPage.tsx b/everwith-claude-frontend/src/features/create/WorkEditorPage.tsx
new file mode 100644
index 00000000..230acca4
--- /dev/null
+++ b/everwith-claude-frontend/src/features/create/WorkEditorPage.tsx
@@ -0,0 +1,304 @@
+import {useCallback, useEffect, useRef, useState} from 'react'
+import {ArrowLeft, Maximize2, Minimize2, Play, Plus, RotateCcw, Save, Share2, Sparkles, Trash2, Undo2, UserPlus, X} from 'lucide-react'
+import {useI18n} from '../../app/i18n'
+import type {I18nKey} from '../../app/i18n'
+import {href, navigate} from '../../app/router'
+import {requireSignIn, toast, useApp} from '../../app/store'
+import {api} from '../../api/adapter'
+import type {PreviewJSON, WorkJSON} from '../../api/types'
+import {CompanionRequestError} from '../../contracts/companion'
+import {OFFICIAL_CHARACTERS} from '../../mock/catalog'
+import {Composer} from '../../chat/Composer'
+import {CharacterLine, PlayerLine, RichText} from '../../chat/RichText'
+import {Portrait, useAssetUrl} from '../../components/Portrait'
+import {SpotArt} from '../../components/Art'
+import {errorArt, WORK_COVERS, workCoverUrl} from '../../art/generated'
+import type {WorkCoverId} from '../../art/generated'
+import {useAddFriend} from '../friends/AddFriendFlow'
+import {classNames, randomId} from '../../lib/util'
+
+type Draft = Record<string, unknown>
+type Role = {id: string; title: string; description: string; character: string; replaceable: boolean; locked: boolean}
+type Sync = 'synced' | 'pending' | 'saving' | 'conflict' | 'error'
+const VOICES = ['preset-neutral', 'preset-warm', 'preset-bright', 'preset-low', 'preset-calm']
+const CHARACTER_FIELDS: {key: string; label: I18nKey; long?: boolean; required?: boolean}[] = [
+  {key: 'name', label: 'create.f.name', required: true}, {key: 'tagline', label: 'create.f.tagline'},
+  {key: 'intro', label: 'create.f.intro', long: true, required: true}, {key: 'persona', label: 'create.f.persona', long: true, required: true},
+  {key: 'habit', label: 'create.f.habit', long: true}, {key: 'background', label: 'create.f.background', long: true}, {key: 'opening', label: 'create.f.opening', long: true},
+]
+const STORY_FIELDS: {key: string; label: I18nKey; long?: boolean; required?: boolean}[] = [
+  {key: 'title', label: 'create.f.title', required: true}, {key: 'genre', label: 'create.f.genre'}, {key: 'content_note', label: 'create.f.contentNote'},
+  {key: 'intro', label: 'create.f.intro', long: true}, {key: 'setting', label: 'create.f.setting', long: true}, {key: 'player_entry', label: 'create.f.playerEntry', long: true},
+  {key: 'opening', label: 'create.f.opening', long: true, required: true},
+]
+
+/**
+ * Editor + always-on isolated Preview. Drafts sync with a base revision (no silent
+ * overwrite); versions are immutable; sharing is explicit and off by default. Preview
+ * runs on a frozen draft snapshot and never touches friends, chats or memories.
+ */
+const strings = (v: unknown) => Array.isArray(v) ? v.map(x => typeof x === 'string' ? x : String((x as {text?: string})?.text ?? '')) : []
+function ListEditor({label, items, onChange}: {label: string; items: string[]; onChange: (next: string[]) => void}) {
+  const {t} = useI18n()
+  return (
+    <div className="ew-field">
+      <span>{label}</span>
+      {items.map((x, i) => (
+        <span key={i} className="ew-row">
+          <input className="ew-input" value={x} maxLength={120} aria-label={`${label} ${i + 1}`} onChange={e => onChange(items.map((y, j) => j === i ? e.target.value : y))} />
+          <button type="button" className="ew-icon-btn" onClick={() => onChange(items.filter((_, j) => j !== i))} aria-label={`${t('create.remove')} · ${label} ${i + 1}`} title={t('create.remove')}><Trash2 aria-hidden="true" /></button>
+        </span>
+      ))}
+      <span><button type="button" className="ew-btn small ghost" disabled={items.length >= 12} onClick={() => onChange([...items, ''])}><Plus aria-hidden="true" />{t('create.addEntry')}</button></span>
+    </div>
+  )
+}
+
+export default function WorkEditorPage({workId}: {workId: string}) {
+  const {t, lang} = useI18n()
+  const authenticated = useApp(s => !!s.account?.authenticated)
+  const [work, setWork] = useState<WorkJSON | null>(null)
+  const [draft, setDraftState] = useState<Draft | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [sync, setSync] = useState<Sync>('synced')
+  const [saving, setSaving] = useState(false)
+  const [assistSummary, setAssistSummary] = useState<string[] | null>(null)
+  const [preview, setPreview] = useState<PreviewJSON | null>(null)
+  const [previewBusy, setPreviewBusy] = useState(false)
+  const [previewDraft, setPreviewDraft] = useState('')
+  const [zoom, setZoom] = useState(false)
+  const base = useRef(0)
+  const dirty = useRef(false)
+  const flight = useRef(false)
+  const undo = useRef<Draft[]>([])
+  const draftRef = useRef<Draft | null>(null)
+  draftRef.current = draft
+  const {open: openAddFriend, dialog: addFriendDialog} = useAddFriend(friend => navigate(href.chat(friend.id)))
+
+  const adopt = useCallback((w: WorkJSON) => { setWork(w); setDraftState(w.draft); base.current = w.draft_revision; dirty.current = false; setSync('synced') }, [])
+  useEffect(() => { api.works.get(workId).then(adopt).catch(e => setError(e instanceof CompanionRequestError ? e.code : 'network_error')) }, [workId, adopt])
+
+  // Debounced sync of the local draft against the base revision it was edited from.
+  const flush = useCallback(async () => {
+    if (flight.current || !dirty.current || !draftRef.current) return
+    flight.current = true; setSync('saving')
+    const sent = draftRef.current
+    dirty.current = false
+    try {
+      const w = await api.works.putDraft(workId, sent, base.current)
+      base.current = w.draft_revision; setWork(w)
+      setSync(dirty.current ? 'pending' : 'synced')
+    } catch (e) {
+      dirty.current = true
+      setSync(e instanceof CompanionRequestError && e.code === 'draft_revision_changed' ? 'conflict' : 'error')
+    } finally { flight.current = false }
+  }, [workId])
+  useEffect(() => {
+    if (sync !== 'pending') return
+    const timer = setTimeout(() => { void flush() }, 700)
+    return () => clearTimeout(timer)
+  }, [draft, sync, flush])
+  useEffect(() => { if (sync === 'synced' && dirty.current) setSync('pending') }, [sync])
+
+  const edit = (next: Draft, record = false) => {
+    if (record && draftRef.current) undo.current = [...undo.current.slice(-19), draftRef.current]
+    setDraftState(next); dirty.current = true; if (sync !== 'conflict') setSync('pending')
+  }
+  const setField = (key: string, value: unknown) => draft && edit({...draft, [key]: value})
+
+  if (error) return <div className="ew-page"><a className="ew-back ew-btn ghost" href={href.create()}><ArrowLeft aria-hidden="true" />{t('common.back')}</a><div className="ew-empty"><SpotArt kind={errorArt(error)} /><h2>{error === 'not_found' ? t('error.notFound') : t('error.generic')}</h2></div></div>
+  if (!work || !draft) return <div className="ew-page-loading" role="status"><span className="ew-spinner" />{t('common.loading')}</div>
+
+  const errors = new Map(work.errors.map(e => [e.field, e.code]))
+  const blocked = work.errors.length > 0
+  const errorText = (field: string) => { const code = errors.get(field); return code ? t(`create.err.${code}` as I18nKey) : null }
+  const str = (key: string) => typeof draft[key] === 'string' ? draft[key] as string : ''
+  const roles = (Array.isArray(draft.roles) ? draft.roles : []) as Role[]
+  const setRole = (i: number, patch: Partial<Role>) => setField('roles', roles.map((r, j) => j === i ? {...r, ...patch} : r))
+  const stale = !!preview && preview.draft_revision !== work.draft_revision
+
+  const save = async () => {
+    if (saving) return
+    if (!(await requireSignIn('auth.action.save'))) return
+    await flush()
+    setSaving(true)
+    try {
+      const w = await api.works.save(work.id, base.current)
+      setWork(w); toast(w.unchanged ? t('create.unchangedSave', {n: w.saved_version ?? ''}) : t('create.saved', {n: w.saved_version ?? ''}), 'success')
+    } catch (e) { toast(e instanceof CompanionRequestError && e.code === 'draft_revision_changed' ? t('error.conflict') : t('create.saveFailed'), 'error') }
+    finally { setSaving(false) }
+  }
+  const share = async (enabled: boolean) => {
+    if (!(await requireSignIn('auth.action.share'))) return
+    try { setWork(await api.works.share(work.id, enabled, enabled ? work.latest_version : null)) }
+    catch (e) { toast(e instanceof CompanionRequestError && e.code === 'share_check_failed' ? t('create.previewBlocked') : t('error.generic'), 'error') }
+  }
+  const assist = async (instruction: string) => {
+    try {
+      const r = await api.works.assist(work.id, instruction, draft, lang)
+      edit(r.draft, true); setAssistSummary(r.summary)
+    } catch { toast(t('error.generic'), 'error') }
+  }
+  const startPreview = async () => {
+    if (previewBusy) return
+    await flush()
+    setPreviewBusy(true)
+    try { setPreview(await api.works.preview(work.id, base.current, lang)) }
+    catch (e) { toast(e instanceof CompanionRequestError && e.code === 'preview_check_failed' ? t('create.previewBlocked') : t('error.generic'), 'error') }
+    finally { setPreviewBusy(false) }
+  }
+  const field = (f: {key: string; label: I18nKey; long?: boolean; required?: boolean}) => {
+    const err = errorText(f.key), id = `wf-${f.key}`
+    return (
+      <label key={f.key} className={classNames('ew-field', f.long && 'is-wide')} htmlFor={id}>
+        <span>{t(f.label)}{f.required && <small> · {t('common.required')}</small>}</span>
+        {f.long
+          ? <textarea id={id} className="ew-textarea" value={str(f.key)} maxLength={2000} aria-invalid={!!err} onChange={e => setField(f.key, e.target.value)} data-testid={`field-${f.key}`} />
+          : <input id={id} className="ew-input" value={str(f.key)} maxLength={f.key === 'name' ? 40 : 80} aria-invalid={!!err} onChange={e => setField(f.key, e.target.value)} data-testid={`field-${f.key}`} />}
+        {err && <span className="ew-field-error">{err}</span>}
+      </label>
+    )
+  }
+  const syncLabel = sync === 'saving' ? t('create.draftSaving') : sync === 'pending' ? t('create.unsavedDraft') : sync === 'conflict' ? t('create.conflict') : sync === 'error' ? t('create.syncError') : t('create.draftSaved')
+
+  return (
+    <div className={classNames('ew-editor', zoom && 'is-preview-zoom')} data-testid="work-editor" data-draft-revision={work.draft_revision}>
+      <div className="ew-editor-form">
+        <a className="ew-back ew-btn ghost" href={href.create()}><ArrowLeft aria-hidden="true" />{t('create.title')}</a>
+        <div className="ew-editor-head">
+          <span className="ew-work-cover small" aria-hidden="true"><Portrait src={workCoverUrl(draft.cover)} name={work.name} alt="" /></span>
+          <span className="ew-chip">{work.type === 'story' ? t('create.story') : t('create.character')}</span>
+          <h1>{work.name}</h1>
+          <div className="ew-editor-status">
+            <span className={classNames('ew-chip', sync === 'conflict' || sync === 'error' ? 'danger' : sync === 'synced' ? 'ok' : '')} role="status" data-testid="sync-status">{syncLabel}</span>
+            <span className="ew-chip">{work.latest_version ? t('create.saved', {n: work.latest_version}) : t('create.neverSaved')}{work.dirty && work.latest_version ? ` · ${t('create.unsaved')}` : ''}</span>
+            <button type="button" className="ew-btn primary small" onClick={() => void save()} disabled={saving} data-testid="work-save"><Save aria-hidden="true" />{saving ? t('create.saving') : t('create.save')}</button>
+          </div>
+        </div>
+        {!authenticated && <div className="ew-notice"><span>{t('create.guestNote')}</span></div>}
+        {sync === 'conflict' && <div className="ew-notice warn" role="alert"><span>{t('create.conflictNote')}<span className="ew-notice-actions">
+          <button type="button" className="ew-btn small" onClick={() => api.works.get(work.id).then(adopt)}>{t('create.loadLatest')}</button>
+          <button type="button" className="ew-btn small ghost" onClick={async () => { const w = await api.works.get(work.id); base.current = w.draft_revision; dirty.current = true; setSync('pending') }}>{t('create.keepMine')}</button></span></span></div>}
+        {sync === 'error' && <div className="ew-notice danger" role="alert"><span>{t('create.syncError')}<span className="ew-notice-actions"><button type="button" className="ew-btn small" onClick={() => { dirty.current = true; setSync('pending') }}>{t('common.retry')}</button></span></span></div>}
+        {blocked && <div className="ew-notice warn" role="status">{t('create.previewBlocked')}</div>}
+
+        <section className="ew-editor-section" aria-labelledby="assist-title">
+          <h2 id="assist-title"><Sparkles aria-hidden="true" className="ew-inline-icon" /> {t('create.assist')}</h2>
+          <p className="ew-faint ew-small">{t('create.assistNote')}</p>
+          <div className="ew-assist">
+            <button type="button" className="ew-btn small" onClick={() => void assist('fill')} data-testid="assist-fill">{t('create.assist.fill')}</button>
+            <button type="button" className="ew-btn small" onClick={() => void assist('shorter')}>{t('create.assist.shorter')}</button>
+            {work.type === 'character' && <button type="button" className="ew-btn small" onClick={() => void assist('warmer')}>{t('create.assist.warmer')}</button>}
+            {work.type === 'story' && <button type="button" className="ew-btn small" onClick={() => void assist('add_role')}>{t('create.assist.addRole')}</button>}
+            <button type="button" className="ew-btn small ghost" disabled={!undo.current.length} onClick={() => { const prev = undo.current.pop(); if (prev) { edit(prev); setAssistSummary(null) } }} data-testid="assist-undo"><Undo2 aria-hidden="true" />{t('create.undo')}</button>
+          </div>
+          {assistSummary && <ul className="ew-assist-summary" aria-live="polite">{assistSummary.map((s, i) => <li key={i}>{s}</li>)}</ul>}
+        </section>
+
+        <section className="ew-editor-section" aria-labelledby="fields-title">
+          <h2 id="fields-title">{t('create.fields')}</h2>
+          <div className="ew-editor-grid">
+            {(work.type === 'character' ? CHARACTER_FIELDS : STORY_FIELDS).map(field)}
+            <div className="ew-field is-wide">
+              <span id="wf-cover">{t('create.f.cover')}</span>
+              <div className="ew-cover-picker" role="group" aria-labelledby="wf-cover" data-testid="cover-picker">
+                {WORK_COVERS.map((id, i) => <CoverChoice key={id} id={id} label={t('create.coverN', {n: i + 1})} selected={draft.cover === id} onSelect={() => setField('cover', id)} />)}
+              </div>
+              {errorText('cover') && <span className="ew-field-error">{errorText('cover')}</span>}
+              <small>{t('create.coverNote')}</small>
+            </div>
+            {work.type === 'character' && <>
+              <label className="ew-field"><span>{t('create.f.voice')}</span>
+                <select className="ew-select" value={str('voice')} onChange={e => setField('voice', e.target.value)}>{VOICES.map(v => <option key={v} value={v}>{t(`create.voice.${v}` as I18nKey)}</option>)}</select></label>
+              <div className="ew-field"><span>{t('create.f.portrait')}</span><span className="ew-row"><span className="ew-avatar large"><Portrait src={null} name={str('name') || '?'} /></span><small className="ew-faint">{t('create.f.portraitNote')}</small></span></div>
+            </>}
+            {work.type === 'story' && <>
+              <label className="ew-field"><span>{t('create.f.narrative')}</span>
+                <select className="ew-select" value={str('narrative')} onChange={e => setField('narrative', e.target.value)}>{['balanced', 'dialogue', 'atmosphere'].map(v => <option key={v} value={v}>{t(`create.narr.${v}` as I18nKey)}</option>)}</select></label>
+              <label className="ew-field"><span>{t('create.f.mode')}</span>
+                <select className="ew-select" value={str('mode')} onChange={e => setField('mode', e.target.value)} aria-invalid={!!errors.get('mode')}>{['open', 'ending'].map(v => <option key={v} value={v}>{t(`create.mode.${v}` as I18nKey)}</option>)}</select></label>
+            </>}
+          </div>
+        </section>
+
+        {work.type === 'story' && (
+          <section className="ew-editor-section" aria-labelledby="roles-edit-title">
+            <h2 id="roles-edit-title">{t('create.f.roles')} <span className="ew-chip">{roles.length} / 10</span></h2>
+            {errorText('roles') && <span className="ew-field-error">{errorText('roles')}</span>}
+            {roles.map((r, i) => (
+              <div key={r.id} className="ew-role-edit" data-role={r.id}>
+                <header><strong>{t('create.roleN', {n: i + 1})}</strong>
+                  <button type="button" className="ew-icon-btn" disabled={roles.length <= 1} onClick={() => setField('roles', roles.filter((_, j) => j !== i))} aria-label={`${t('common.delete')} · ${t('create.roleN', {n: i + 1})}`} title={t('common.delete')}><Trash2 aria-hidden="true" /></button></header>
+                <div className="ew-editor-grid">
+                  <label className="ew-field"><span>{t('create.f.roleTitle')}</span><input className="ew-input" value={r.title} maxLength={40} aria-invalid={!!errors.get(`roles.${i}.title`)} onChange={e => setRole(i, {title: e.target.value})} />
+                    {errorText(`roles.${i}.title`) && <span className="ew-field-error">{errorText(`roles.${i}.title`)}</span>}</label>
+                  <label className="ew-field"><span>{t('create.f.roleCharacter')}</span>
+                    <select className="ew-select" value={r.character} onChange={e => setRole(i, {character: e.target.value})}>{OFFICIAL_CHARACTERS.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}</select></label>
+                  <label className="ew-field is-wide"><span>{t('create.f.roleDesc')}</span><textarea className="ew-textarea" value={r.description} maxLength={400} onChange={e => setRole(i, {description: e.target.value})} /></label>
+                  <span className="ew-row wrap is-wide">
+                    <label className="ew-check"><input type="checkbox" checked={r.replaceable && !r.locked} disabled={r.locked} onChange={e => setRole(i, {replaceable: e.target.checked})} />{t('create.f.replaceable')}</label>
+                    <label className="ew-check"><input type="checkbox" checked={r.locked} onChange={e => setRole(i, {locked: e.target.checked, replaceable: e.target.checked ? false : true})} />{t('create.f.locked')}</label>
+                  </span>
+                </div>
+              </div>
+            ))}
+            <div><button type="button" className="ew-btn small" disabled={roles.length >= 10} onClick={() => setField('roles', [...roles, {id: `role-${Date.now().toString(36)}`, title: '', description: '', character: 'official-nora', replaceable: true, locked: false}])}><Plus aria-hidden="true" />{t('create.addRole')}</button></div>
+            <ListEditor label={t('create.f.items')} items={strings(draft.items)} onChange={v => setField('items', v)} />
+            <ListEditor label={t('create.f.stages')} items={strings(draft.stages)} onChange={v => setField('stages', v)} />
+            <p className="ew-faint ew-small">{t('create.worldbookGap')}</p>
+          </section>
+        )}
+
+        <section className="ew-editor-section" aria-labelledby="share-title">
+          <h2 id="share-title"><Share2 aria-hidden="true" className="ew-inline-icon" /> {t('create.share')}</h2>
+          <p className="ew-small">{work.share.enabled ? t('create.shareOn', {n: work.share.version ?? ''}) : t('create.shareOff')}</p>
+          <p className="ew-faint ew-small">{t('create.shareNote')}</p>
+          <div className="ew-row wrap">
+            {work.share.enabled
+              ? <button type="button" className="ew-btn small" onClick={() => void share(false)} data-testid="share-off">{t('create.shareDisable')}</button>
+              : <button type="button" className="ew-btn small" disabled={!work.latest_version} onClick={() => void share(true)} data-testid="share-on">{t('create.shareEnable', {n: work.latest_version ?? '—'})}</button>}
+            {work.type === 'character' && work.latest_version && <button type="button" className="ew-btn small" onClick={() => openAddFriend({sourceId: `work-${work.id}`, version: String(work.latest_version), sourceName: work.name})} data-testid="work-befriend"><UserPlus aria-hidden="true" />{t('create.addFriend', {n: work.latest_version})}</button>}
+          </div>
+        </section>
+      </div>
+
+      <aside className="ew-preview" aria-label={t('create.preview')} data-testid="preview">
+        <div className="ew-preview-head">
+          <strong>{t('create.preview')}</strong>
+          {preview && <span className="ew-chip">{t('create.previewSnapshot', {n: preview.draft_revision})}</span>}
+          <button type="button" className="ew-btn small" disabled={blocked || previewBusy} onClick={() => void startPreview()} data-testid="preview-start">{preview ? <><RotateCcw aria-hidden="true" />{t('create.previewRestart')}</> : <><Play aria-hidden="true" />{t('create.previewStart')}</>}</button>
+          <button type="button" className="ew-icon-btn" aria-pressed={zoom} onClick={() => setZoom(z => !z)} aria-label={zoom ? t('create.collapse') : t('create.expand')} title={zoom ? t('create.collapse') : t('create.expand')}>{zoom ? <Minimize2 aria-hidden="true" /> : <Maximize2 aria-hidden="true" />}</button>
+        </div>
+        <div className="ew-notice mock"><span>{t('create.previewNote')}</span></div>
+        {stale && <div className="ew-notice warn" role="status" data-testid="preview-stale"><span>{t('create.previewStale', {n: preview!.draft_revision})}</span></div>}
+        <div className="ew-preview-body" role="log" aria-live="polite">
+          {!preview && <p className="ew-faint ew-small">{blocked ? t('create.previewBlocked') : t('create.previewIdle')}</p>}
+          {preview?.turns.map(turn => turn.role === 'player'
+            ? <PlayerLine key={turn.id}><RichText text={turn.text} /></PlayerLine>
+            : <CharacterLine key={turn.id} name={String(preview.snapshot.name ?? preview.snapshot.title ?? work.name)} avatar={<span className="ew-avatar small"><Portrait src={null} name={String(preview.snapshot.name ?? preview.snapshot.title ?? '?')} /></span>}><p><RichText text={turn.text} /></p></CharacterLine>)}
+        </div>
+        <div className="ew-preview-composer">
+          <Composer value={previewDraft} onChange={setPreviewDraft} busy={previewBusy} disabled={!preview} label={t('create.preview')} placeholder={preview ? t('create.previewSay') : t('create.previewIdle')}
+            onSubmit={async text => {
+              if (!preview) return
+              setPreviewBusy(true)
+              try { setPreview(await api.works.previewTurn(preview.id, randomId('pv', 8), text.trim(), lang)); setPreviewDraft('') } catch { toast(t('error.generic'), 'error') } finally { setPreviewBusy(false) }
+            }} />
+          {preview && <button type="button" className="ew-btn ghost small" onClick={() => setPreview(null)}><X aria-hidden="true" />{t('create.previewClose')}</button>}
+        </div>
+      </aside>
+      {addFriendDialog}
+    </div>
+  )
+}
+
+function CoverChoice({id, label, selected, onSelect}: {id: WorkCoverId; label: string; selected: boolean; onSelect: () => void}) {
+  const url = useAssetUrl(workCoverUrl(id))
+  const [failed, setFailed] = useState(false)
+  useEffect(() => setFailed(false), [url])
+  return (
+    <button type="button" className="ew-cover-choice" aria-pressed={selected} aria-label={label} title={label} onClick={onSelect} data-cover={id}>
+      {url && !failed ? <img src={url} alt="" decoding="async" draggable={false} onError={() => setFailed(true)} /> : <span aria-hidden="true">{label}</span>}
+    </button>
+  )
+}
diff --git a/everwith-claude-frontend/src/features/discover/DiscoverPage.tsx b/everwith-claude-frontend/src/features/discover/DiscoverPage.tsx
new file mode 100644
index 00000000..15d58cae
--- /dev/null
+++ b/everwith-claude-frontend/src/features/discover/DiscoverPage.tsx
@@ -0,0 +1,189 @@
+import {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react'
+import {Search, X, RotateCcw, Users, BookOpen, Dice5} from 'lucide-react'
+import {useI18n} from '../../app/i18n'
+import {href, navigate} from '../../app/router'
+import type {DiscoverTab} from '../../app/router'
+import {api} from '../../api/adapter'
+import type {DiscoverItem, RecordJSON} from '../../api/types'
+import {Portrait, useAssetUrl} from '../../components/Portrait'
+import {SpotArt, StageBackdrop} from '../../components/Art'
+import {backdropFor} from '../../art/generated'
+import {LiveStage} from '../../live2d/LiveStage'
+import {characterFor} from '../../live2d/characters'
+import {useApp} from '../../app/store'
+import {pick, readJSON, writeJSON} from '../../lib/util'
+
+const TABS: DiscoverTab[] = ['all', 'characters', 'stories', 'games']
+type Load = {status: 'loading' | 'ready' | 'error'; items: DiscoverItem[]; total: number; next: number | null; appendError: boolean; appending: boolean}
+const scrollKey = (tab: string, q: string) => `everwith.discover.scroll:${tab}:${q}`
+
+export default function DiscoverPage({tab, q}: {tab: DiscoverTab; q: string}) {
+  const {t, lang} = useI18n()
+  const [query, setQuery] = useState(q)
+  const [load, setLoad] = useState<Load>({status: 'loading', items: [], total: 0, next: null, appendError: false, appending: false})
+  const [recent, setRecent] = useState<RecordJSON[]>([])
+  const flight = useRef(0)
+  const restored = useRef(false)
+  const reducedMotion = useApp(s => s.reducedMotion)
+
+  const fetchPage = useCallback(async (offset: number) => {
+    const id = ++flight.current
+    if (offset === 0) setLoad(l => ({...l, status: 'loading', appendError: false}))
+    else setLoad(l => ({...l, appending: true, appendError: false}))
+    try {
+      const page = await api.catalog.discover({type: tab, q, offset})
+      if (id !== flight.current) return
+      setLoad(l => ({status: 'ready', items: offset === 0 ? page.items : [...l.items, ...page.items], total: page.total, next: page.next_offset, appendError: false, appending: false}))
+    } catch {
+      if (id !== flight.current) return
+      if (offset === 0) setLoad({status: 'error', items: [], total: 0, next: null, appendError: false, appending: false})
+      else setLoad(l => ({...l, appending: false, appendError: true}))
+    }
+  }, [tab, q])
+
+  useEffect(() => { restored.current = false; void fetchPage(0) }, [fetchPage])
+  useEffect(() => { setQuery(q) }, [q])
+  useEffect(() => { api.records.list(false).then(r => setRecent(r.items.filter(x => x.status === 'active' || x.status === 'paused').slice(0, 3))).catch(() => setRecent([])) }, [])
+  // Debounced search keeps the URL (and therefore Back/refresh) as the source of truth.
+  useEffect(() => {
+    if (query === q) return
+    const timer = setTimeout(() => navigate(href.discover(tab, query.trim()), {replace: true}), 280)
+    return () => clearTimeout(timer)
+  }, [query, q, tab])
+
+  // Scroll position per tab+query survives detail → Back.
+  useLayoutEffect(() => {
+    const main = document.getElementById('main')
+    if (!main || load.status !== 'ready' || restored.current) return
+    restored.current = true
+    const saved = readJSON<{top: number; count: number} | null>(scrollKey(tab, q), null, 'session')
+    if (saved && saved.count > load.items.length && load.next !== null) { void fetchPage(load.items.length); restored.current = false; return }
+    main.scrollTop = saved?.top ?? 0
+  }, [load.status, load.items.length, load.next, tab, q, fetchPage])
+  useEffect(() => {
+    const main = document.getElementById('main')
+    if (!main) return
+    let raf = 0
+    const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => writeJSON(scrollKey(tab, q), {top: main.scrollTop, count: load.items.length}, 'session')) }
+    main.addEventListener('scroll', onScroll, {passive: true})
+    return () => { main.removeEventListener('scroll', onScroll); cancelAnimationFrame(raf) }
+  }, [tab, q, load.items.length])
+
+  return (
+    <div className="ew-page ew-discover">
+      <header className="ew-page-head">
+        <div>
+          <h1>{t('discover.title')}</h1>
+          <p className="ew-muted">{t('discover.subtitle')}</p>
+        </div>
+        <form className="ew-search" role="search" onSubmit={e => { e.preventDefault(); navigate(href.discover(tab, query.trim()), {replace: true}) }}>
+          <Search aria-hidden="true" />
+          <input className="ew-input" type="search" value={query} onChange={e => setQuery(e.target.value)} placeholder={t('discover.search')} aria-label={t('discover.search')} />
+          {query && <button type="button" className="ew-icon-btn" aria-label={t('common.clear')} onClick={() => setQuery('')}><X aria-hidden="true" /></button>}
+        </form>
+      </header>
+      <nav className="ew-tabs" aria-label={t('discover.title')}>
+        {TABS.map(x => <a key={x} href={href.discover(x, q)} className="ew-tab" aria-current={x === tab ? 'page' : undefined}>{t(`discover.tab.${x}`)}</a>)}
+      </nav>
+      {recent.length > 0 && tab === 'all' && !q && (
+        <section className="ew-continue" aria-label={t('discover.continue')}>
+          <h2 className="ew-section-title">{t('discover.continue')}</h2>
+          <div className="ew-continue-row">
+            {recent.map(r => <a key={r.id} className="ew-continue-card" href={r.kind === 'story' ? href.storyPlay(r.id) : href.gamePlay(r.id)}>
+              {r.image ? <span className="ew-continue-thumb" aria-hidden="true"><Portrait src={r.image} name={pick(r.title, lang)} alt="" /></span> : r.kind === 'story' ? <BookOpen aria-hidden="true" /> : <Dice5 aria-hidden="true" />}
+              <span><strong>{pick(r.title, lang)}</strong><small>{r.lineup.map(l => l.name).join(' · ')}</small></span>
+            </a>)}
+          </div>
+        </section>
+      )}
+      {load.status === 'loading' && <div className="ew-grid" aria-busy="true">{Array.from({length: 8}, (_, i) => <div key={i} className="ew-card skeleton"><div className="ew-skeleton ew-card-media" /><div className="ew-skeleton" style={{height: 18, margin: 14}} /></div>)}</div>}
+      {load.status === 'error' && (
+        <div className="ew-load-failed">
+          <SpotArt kind="load-error" />
+          <div className="ew-notice danger" role="alert">
+            <RotateCcw aria-hidden="true" />
+            <div><strong>{t('discover.error')}</strong><div className="ew-notice-actions"><button type="button" className="ew-btn small" onClick={() => void fetchPage(0)}>{t('common.retry')}</button></div></div>
+          </div>
+        </div>
+      )}
+      {load.status === 'ready' && load.items.length === 0 && (
+        q ? <div className="ew-empty"><h2>{t('discover.empty.search', {q})}</h2><button type="button" className="ew-btn" onClick={() => { setQuery(''); navigate(href.discover(tab), {replace: true}) }}>{t('discover.empty.clear')}</button></div>
+          : <div className="ew-empty"><h2>{t('discover.empty.catalog')}</h2></div>
+      )}
+      {load.status === 'ready' && load.items.length > 0 && (
+        <>
+          <ul className="ew-grid" aria-label={t(`discover.tab.${tab}`)}>
+            {load.items.map(item => <li key={`${item.kind}:${item.id}`}><DiscoverCard item={item} reducedMotion={reducedMotion} /></li>)}
+          </ul>
+          <div className="ew-grid-foot">
+            {load.appendError && <div className="ew-notice warn" role="alert"><span>{t('discover.appendError')}</span><button type="button" className="ew-btn small" onClick={() => void fetchPage(load.items.length)}>{t('common.retry')}</button></div>}
+            {load.next !== null && !load.appendError && <button type="button" className="ew-btn" disabled={load.appending} onClick={() => void fetchPage(load.next!)}>{load.appending && <span className="ew-spinner" />}{t('discover.loadMore')}</button>}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+let hoverOwner: (() => void) | null = null
+function DiscoverCard({item, reducedMotion}: {item: DiscoverItem; reducedMotion: boolean}) {
+  const {t, lang} = useI18n()
+  const [live, setLive] = useState(false)
+  const timer = useRef<ReturnType<typeof setTimeout>>(undefined)
+  const preview = useAssetUrl(item.kind === 'game' ? item.preview : null)
+  const begin = () => {
+    if (item.kind !== 'character' || reducedMotion) return
+    clearTimeout(timer.current)
+    timer.current = setTimeout(() => { hoverOwner?.(); hoverOwner = () => setLive(false); setLive(true) }, 450)
+  }
+  const end = () => { clearTimeout(timer.current); setLive(false) }
+  useEffect(() => () => clearTimeout(timer.current), [])
+  if (item.kind === 'character') {
+    const cfg = characterFor(item.id, item.version)
+    return (
+      <a className="ew-card is-character" href={href.character(item.id, item.version)} onMouseEnter={begin} onMouseLeave={end} onFocus={begin} onBlur={end}>
+        <div className="ew-card-media">
+          <StageBackdrop src={backdropFor(cfg?.key)} />
+          {live && cfg ? <LiveStage character={cfg} name={item.name} preset="card" showStatus={false} backdrop={null} /> : <Portrait src={item.feed} name={item.name} position="50% 10%" />}
+          <span className="ew-card-kind">{t('discover.kind.character')}</span>
+        </div>
+        <div className="ew-card-body">
+          <h3 className="ew-card-title">{item.name}</h3>
+          <p className="ew-card-tag">{pick(item.tagline, lang)}</p>
+          <p className="ew-card-desc">{pick(item.description, lang)}</p>
+        </div>
+      </a>
+    )
+  }
+  if (item.kind === 'story') {
+    return (
+      <a className="ew-card is-story" href={href.story(item.id, item.version)}>
+        <div className="ew-card-media">
+          {item.image ? <Portrait src={item.image} name={pick(item.title, lang)} /> : <div className="ew-card-placeholder" aria-hidden="true"><BookOpen /></div>}
+          <span className="ew-card-kind">{t('discover.kind.story')}</span>
+        </div>
+        <div className="ew-card-body">
+          <h3 className="ew-card-title">{pick(item.title, lang)}</h3>
+          <p className="ew-card-tag">{pick(item.genre, lang)} · {pick(item.content_note, lang)}</p>
+          <p className="ew-card-desc">{pick(item.description, lang)}</p>
+        </div>
+      </a>
+    )
+  }
+  return (
+    <a className="ew-card is-game" href={href.gamePrepare(item.id, null, href.discover('games'))}
+      onMouseEnter={e => { const v = e.currentTarget.querySelector('video'); if (v && !reducedMotion) void v.play().catch(() => {}) }}
+      onMouseLeave={e => { const v = e.currentTarget.querySelector('video'); if (v) { v.pause(); v.currentTime = 0 } }}>
+      <div className="ew-card-media">
+        <Portrait src={item.poster} name={item.name} />
+        {preview && <video className="ew-card-video" src={preview} muted loop playsInline preload="none" aria-hidden="true" />}
+        <span className="ew-card-kind">{t('discover.kind.game')}</span>
+      </div>
+      <div className="ew-card-body">
+        <h3 className="ew-card-title">{item.name}</h3>
+        <p className="ew-card-tag"><Users aria-hidden="true" className="ew-inline-icon" /> {item.players.join(' / ')} {t('common.players')} · {t('discover.companionGame')}</p>
+        <p className="ew-card-desc">{pick(item.description, lang)}</p>
+      </div>
+    </a>
+  )
+}
diff --git a/everwith-claude-frontend/src/features/friends/AddFriendFlow.tsx b/everwith-claude-frontend/src/features/friends/AddFriendFlow.tsx
new file mode 100644
index 00000000..293ed64a
--- /dev/null
+++ b/everwith-claude-frontend/src/features/friends/AddFriendFlow.tsx
@@ -0,0 +1,70 @@
+import {useRef, useState} from 'react'
+import type {FormEvent} from 'react'
+import {Dialog} from '../../components/Dialog'
+import {useI18n} from '../../app/i18n'
+import {appStore, refreshFriends, requireSignIn, toast} from '../../app/store'
+import {api} from '../../api/adapter'
+import {CompanionRequestError} from '../../contracts/companion'
+import type {CompanionFriend} from '../../contracts/companion'
+import {randomId} from '../../lib/util'
+
+export type FriendSource = {sourceId: string; version: string; sourceName: string; origin?: Record<string, unknown>}
+
+/**
+ * Explicit add-friend + naming (F1–F5, F7). One idempotency key per intent, kept across
+ * sign-in and retries, so a timeout followed by “confirm” again never creates two.
+ * Sign-in happens between naming and creation; the typed name is restored afterwards
+ * and the user confirms again (signing in is not consent to create).
+ */
+export function useAddFriend(onCreated: (friend: CompanionFriend) => void) {
+  const [source, setSource] = useState<FriendSource | null>(null)
+  const [name, setName] = useState('')
+  const [phase, setPhase] = useState<'naming' | 'creating'>('naming')
+  const [error, setError] = useState<string | null>(null)
+  const key = useRef<string>('')
+  const open = (s: FriendSource) => { key.current = randomId('addfr', 10); setSource(s); setName(s.sourceName); setError(null); setPhase('naming') }
+  const close = () => { setSource(null); setError(null) }
+  const {t} = useI18n()
+  const confirm = async (e?: FormEvent) => {
+    e?.preventDefault()
+    if (!source || phase === 'creating') return
+    if (!name.trim()) { setError(t('name.required')); return }
+    const pending = source
+    if (!appStore.get().account?.authenticated) {
+      setSource(null) // one modal layer at a time
+      const ok = await requireSignIn('auth.action.friend')
+      setSource(pending)
+      if (!ok) return
+      return // back on the naming step with the same name and key; user confirms again
+    }
+    setPhase('creating'); setError(null)
+    try {
+      const account = appStore.get().account!.account!.id
+      const friend = await api.friends.add({key: key.current, source_id: pending.sourceId, source_version: pending.version, name: name.trim(), expected_account_id: account, ...(pending.origin ? {origin: pending.origin} : {})})
+      await refreshFriends()
+      setSource(null)
+      toast(`${friend.name} · ${t('character.add')}`, 'success')
+      onCreated(friend)
+    } catch (err) {
+      setPhase('naming')
+      const code = err instanceof CompanionRequestError ? err.code : 'network_error'
+      setError(code === 'network_error' ? t('error.network') : code === 'auth_session_required' ? t('error.auth') : code === 'role_already_bound' ? t('error.conflict') : t('error.generic'))
+    }
+  }
+  const dialog = source ? (
+    <Dialog title={t('name.title')} onClose={close} initialFocus="input">
+      <form className="ew-form" onSubmit={confirm}>
+        <p className="ew-muted">{t('name.desc', {source: source.sourceName})}</p>
+        <label className="ew-field"><span>{t('name.label')}</span>
+          <input className="ew-input" value={name} maxLength={40} onChange={e => setName(e.target.value)} aria-invalid={!!error} required /></label>
+        {error && <p className="ew-error-text" role="alert">{error}</p>}
+        <div className="ew-form-actions">
+          <span className="ew-grow" />
+          <button type="button" className="ew-btn ghost" onClick={close}>{t('common.cancel')}</button>
+          <button type="submit" className="ew-btn primary" disabled={phase === 'creating'}>{phase === 'creating' && <span className="ew-spinner" />}{phase === 'creating' ? t('name.creating') : t('name.confirm')}</button>
+        </div>
+      </form>
+    </Dialog>
+  ) : null
+  return {open, dialog}
+}
diff --git a/everwith-claude-frontend/src/features/friends/FriendsPage.tsx b/everwith-claude-frontend/src/features/friends/FriendsPage.tsx
new file mode 100644
index 00000000..d358da47
--- /dev/null
+++ b/everwith-claude-frontend/src/features/friends/FriendsPage.tsx
@@ -0,0 +1,74 @@
+import {useState} from 'react'
+import {MessageCircle, Gamepad2, Search, Compass, PenLine} from 'lucide-react'
+import {useI18n} from '../../app/i18n'
+import {href} from '../../app/router'
+import {openSignIn, refreshFriends, useApp} from '../../app/store'
+import {Portrait} from '../../components/Portrait'
+import {SpotArt, StageBackdrop} from '../../components/Art'
+import {backdropFor} from '../../art/generated'
+import {characterFor} from '../../live2d/characters'
+import {PlayTogetherDialog} from './PlayTogether'
+import type {CompanionFriend} from '../../contracts/companion'
+import {formatTime, pick} from '../../lib/util'
+
+export default function FriendsPage() {
+  const {t, lang} = useI18n()
+  const account = useApp(s => s.account)
+  const friends = useApp(s => s.friends)
+  const error = useApp(s => s.friendsError)
+  const [query, setQuery] = useState('')
+  const [playWith, setPlayWith] = useState<CompanionFriend | null>(null)
+  const list = (friends ?? []).filter(f => !query.trim() || `${f.name} ${f.source_name}`.toLowerCase().includes(query.trim().toLowerCase()))
+  return (
+    <div className="ew-page ew-friends">
+      <header className="ew-page-head">
+        <div><h1>{t('friends.title')}</h1><p className="ew-muted">{t('friends.subtitle')}</p></div>
+        {!!friends?.length && <label className="ew-search"><Search aria-hidden="true" /><input className="ew-input" type="search" value={query} onChange={e => setQuery(e.target.value)} placeholder={t('friends.search')} aria-label={t('friends.search')} /></label>}
+      </header>
+      {account && !account.authenticated && (
+        <div className="ew-empty">
+          <SpotArt kind="signin" />
+          <h2>{t('friends.guest')}</h2>
+          <p>{t('account.guestNote')}</p>
+          <div className="ew-row wrap center">
+            <button type="button" className="ew-btn primary" onClick={() => openSignIn('auth.action.friend')}>{t('common.signin')}</button>
+            <a className="ew-btn" href={href.discover()}><Compass aria-hidden="true" />{t('nav.discover')}</a>
+          </div>
+        </div>
+      )}
+      {account?.authenticated && error && <div className="ew-notice danger" role="alert"><span>{t('error.generic')}</span><button className="ew-btn small" type="button" onClick={() => void refreshFriends()}>{t('common.retry')}</button></div>}
+      {account?.authenticated && friends === null && !error && <div className="ew-page-loading" role="status"><span className="ew-spinner" />{t('common.loading')}</div>}
+      {account?.authenticated && friends && friends.length === 0 && (
+        <div className="ew-empty">
+          <SpotArt kind="friends" />
+          <h2>{t('friends.empty')}</h2><p>{t('friends.emptyHint')}</p>
+          <div className="ew-row wrap center">
+            <a className="ew-btn primary" href={href.discover()}><Compass aria-hidden="true" />{t('nav.discover')}</a>
+            <a className="ew-btn" href={href.create()}><PenLine aria-hidden="true" />{t('nav.create')}</a>
+          </div>
+        </div>
+      )}
+      {list.length > 0 && (
+        <ul className="ew-friend-grid" aria-label={t('friends.title')}>
+          {list.map(f => (
+            <li key={f.id} className="ew-friend-card">
+              <a className="ew-friend-main" href={href.chat(f.id)}>
+                <span className="ew-friend-face"><StageBackdrop src={backdropFor(characterFor(f.source_id, f.source_version)?.key)} /><Portrait src={f.avatar} name={f.name} position="50% 14%" /></span>
+                <span className="ew-friend-text">
+                  <strong className="ew-friend-name">{f.name}</strong>
+                  <small>{t('friends.source', {name: f.source_name})} · {t('friends.number', {n: f.display_number})}</small>
+                  <small className="ew-faint">{t('friends.since', {date: formatTime(f.created_at, lang)})} · {pick(f.origin.label, lang)}</small>
+                </span>
+              </a>
+              <div className="ew-friend-actions">
+                <a className="ew-btn small primary" href={href.chat(f.id)}><MessageCircle aria-hidden="true" />{t('friends.chat')}</a>
+                <button type="button" className="ew-btn small" onClick={() => setPlayWith(f)}><Gamepad2 aria-hidden="true" />{t('friends.play')}</button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+      {playWith && <PlayTogetherDialog friend={playWith} from={href.friends()} onClose={() => setPlayWith(null)} />}
+    </div>
+  )
+}
diff --git a/everwith-claude-frontend/src/features/friends/PlayTogether.tsx b/everwith-claude-frontend/src/features/friends/PlayTogether.tsx
new file mode 100644
index 00000000..9ea98fd2
--- /dev/null
+++ b/everwith-claude-frontend/src/features/friends/PlayTogether.tsx
@@ -0,0 +1,47 @@
+import {useEffect, useState} from 'react'
+import {BookOpen, Dice5} from 'lucide-react'
+import {Dialog} from '../../components/Dialog'
+import {Portrait} from '../../components/Portrait'
+import {useI18n} from '../../app/i18n'
+import {href, navigate} from '../../app/router'
+import {api} from '../../api/adapter'
+import type {GameJSON, StoryJSON} from '../../api/types'
+import type {CompanionFriend} from '../../contracts/companion'
+import {pick} from '../../lib/util'
+
+/** P20 “一起玩”: choosing only prepares — nothing is created or sent until Start. */
+export function PlayTogetherDialog({friend, from, onClose}: {friend: CompanionFriend; from: string; onClose: () => void}) {
+  const {t, lang} = useI18n()
+  const [stories, setStories] = useState<StoryJSON[] | null>(null)
+  const [games, setGames] = useState<GameJSON[] | null>(null)
+  const [failed, setFailed] = useState(false)
+  useEffect(() => {
+    Promise.all([api.catalog.stories(), api.catalog.games()]).then(([s, g]) => { setStories(s.items); setGames(g.items) }).catch(() => setFailed(true))
+  }, [])
+  return (
+    <Dialog title={`${t('friends.play')} · ${friend.name}`} onClose={onClose} wide>
+      {failed && <div className="ew-notice danger" role="alert">{t('error.generic')}</div>}
+      {!failed && (!stories || !games) && <div className="ew-page-loading"><span className="ew-spinner" />{t('common.loading')}</div>}
+      {stories && games && (
+        <div className="ew-play-grid">
+          <section aria-labelledby="pt-stories">
+            <h3 id="pt-stories" className="ew-section-title"><BookOpen aria-hidden="true" className="ew-inline-icon" /> {t('discover.tab.stories')}</h3>
+            <ul className="ew-list">
+              {stories.map(s => <li key={s.id}><button type="button" className="ew-list-row" onClick={() => { onClose(); navigate(href.storyPrepare(s.id, s.version, friend.id, from)) }}>
+                <span className="ew-list-thumb" aria-hidden="true"><Portrait src={s.image} name={pick(s.title, lang)} alt="" /></span>
+                <span className="ew-list-main"><strong>{pick(s.title, lang)}</strong><small>{pick(s.description, lang)}</small></span></button></li>)}
+            </ul>
+          </section>
+          <section aria-labelledby="pt-games">
+            <h3 id="pt-games" className="ew-section-title"><Dice5 aria-hidden="true" className="ew-inline-icon" /> {t('discover.tab.games')}</h3>
+            <ul className="ew-list">
+              {games.map(g => <li key={g.id}><button type="button" className="ew-list-row" onClick={() => { onClose(); navigate(href.gamePrepare(g.id, friend.id, from)) }}>
+                <span className="ew-list-thumb" aria-hidden="true"><Portrait src={g.poster} name={g.name} alt="" /></span>
+                <span className="ew-list-main"><strong>{g.name}</strong><small>{pick(g.description, lang)} · {g.players.join('/')} {t('common.players')}</small></span></button></li>)}
+            </ul>
+          </section>
+        </div>
+      )}
+    </Dialog>
+  )
+}
diff --git a/everwith-claude-frontend/src/features/games/GamePlayPage.tsx b/everwith-claude-frontend/src/features/games/GamePlayPage.tsx
new file mode 100644
index 00000000..b167b6ea
--- /dev/null
+++ b/everwith-claude-frontend/src/features/games/GamePlayPage.tsx
@@ -0,0 +1,267 @@
+import {useCallback, useEffect, useRef, useState} from 'react'
+import {ArrowLeft, BookOpenText, FlaskConical, Maximize, Minimize, PanelRightClose, PanelRightOpen, Pause, Play, Flag, Eye, EyeOff, Trophy, MessageCircle, RotateCcw, UserPlus} from 'lucide-react'
+import {useI18n} from '../../app/i18n'
+import {href, navigate} from '../../app/router'
+import {appStore, toast, useApp} from '../../app/store'
+import {api, ADAPTER_MODE} from '../../api/adapter'
+import {OPEN_MOCK_PANEL} from '../mock/MockPanel'
+import type {GameJSON, GameViewJSON, SeatJSON, TableMessageJSON} from '../../api/types'
+import {CompanionRequestError} from '../../contracts/companion'
+import {ConfirmDialog, Dialog} from '../../components/Dialog'
+import {Portrait} from '../../components/Portrait'
+import {SpotArt} from '../../components/Art'
+import {errorArt, personaAvatarUrl} from '../../art/generated'
+import {LiveStage} from '../../live2d/LiveStage'
+import {characterFor} from '../../live2d/characters'
+import {useAddFriend} from '../friends/AddFriendFlow'
+import {Composer} from '../../chat/Composer'
+import {RichText} from '../../chat/RichText'
+import {RoyaleBoard} from './boards/RoyaleBoard'
+import {SplendorBoard} from './boards/SplendorBoard'
+import {CaboBoard} from './boards/CaboBoard'
+import {seatColor} from './boards/shared'
+import {pick, randomId, classNames} from '../../lib/util'
+
+
+export default function GamePlayPage({sessionId}: {sessionId: string}) {
+  const {t, lang} = useI18n()
+  const reducedMotion = useApp(s => s.reducedMotion)
+  const [view, setView] = useState<GameViewJSON | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [pending, setPending] = useState(false)
+  const [autoplay, setAutoplay] = useState(true)
+  const [leftPaused, setLeftPaused] = useState(false)
+  // Narrow desktops fold the people/chat rail into a drawer instead of shrinking the board.
+  const [rail, setRail] = useState(() => typeof window === 'undefined' || window.innerWidth >= 1100)
+  const [immersive, setImmersive] = useState(false)
+  const [fullscreen, setFullscreen] = useState(false)
+  const [dialog, setDialog] = useState<null | 'rules' | 'abandon'>(null)
+  const [messages, setMessages] = useState<TableMessageJSON[]>([])
+  const [replyFailed, setReplyFailed] = useState(false)
+  const [game, setGame] = useState<GameJSON | null>(null)
+  const shell = useRef<HTMLDivElement>(null)
+  const viewRef = useRef<GameViewJSON | null>(null)
+  viewRef.current = view
+  const {open: openAddFriend, dialog: addFriendDialog} = useAddFriend(() => { void reload() })
+
+  // Rail performer: follows the acting table-mate, but switches at most every few seconds
+  // so fast AI turns do not reload a model per step.
+  const desiredSeat = !view ? 1 : view.lifecycle === 'active' && typeof view.actor_seat === 'number' && view.actor_seat !== 0 ? view.actor_seat
+    : (view.log.slice().reverse().find(l => l.seat !== 0)?.seat ?? 1)
+  const shownSeat = useDwell(desiredSeat, 4000)
+
+  const reload = useCallback(async () => {
+    try { const v = await api.games.get(sessionId); setView(v); return v } catch (e) { setError(e instanceof CompanionRequestError ? e.code : 'network_error'); return null }
+  }, [sessionId])
+  useEffect(() => {
+    void reload().then(v => {
+      // Returning to a table where an AI seat is next: the rest stays paused until “Continue”.
+      // A brand-new table (revision 1) simply starts.
+      if (v && v.lifecycle === 'active' && v.revision > 1 && v.actor_seat !== 0 && v.actor_seat !== 'any') { setLeftPaused(true); setAutoplay(false) }
+    })
+    api.catalog.games().then(r => setGame(r.items.find(g => g.id === viewRef.current?.game_id) ?? null)).catch(() => {})
+  }, [reload])
+  useEffect(() => { if (view && !game) api.catalog.games().then(r => setGame(r.items.find(g => g.id === view.game_id) ?? null)).catch(() => {}) }, [view, game])
+  const chatCount = view?.chat_count ?? 0
+  useEffect(() => { api.games.messages(sessionId).then(r => setMessages(r.items)).catch(() => {}) }, [sessionId, chatCount])
+
+  // Leaving (hidden tab / unmount): the in-flight step finishes server-side; later steps pause.
+  useEffect(() => {
+    const onVis = () => { if (document.visibilityState === 'hidden') { setAutoplay(false); const v = viewRef.current; if (v?.lifecycle === 'active' && v.actor_seat !== 0) setLeftPaused(true) } }
+    document.addEventListener('visibilitychange', onVis)
+    return () => document.removeEventListener('visibilitychange', onVis)
+  }, [])
+
+  // AI seats act one step at a time while this table is open, visible and not paused.
+  useEffect(() => {
+    if (!view || view.lifecycle !== 'active' || view.ai_hold || !autoplay || pending) return
+    if (view.actor_seat === 0 || view.actor_seat === 'any') return
+    const timer = setTimeout(async () => {
+      if (document.visibilityState === 'hidden') return
+      setPending(true)
+      try { setView(await api.games.advance(view.id, randomId('adv', 8), view.revision, appStore.get().lang)) }
+      catch (e) {
+        const code = e instanceof CompanionRequestError ? e.code : 'network_error'
+        if (code === 'game_revision_changed' || code === 'waiting_for_player') await reload()
+        else { setAutoplay(false); toast(code === 'network_error' ? t('error.network') : t('error.generic'), 'error') }
+      } finally { setPending(false) }
+    }, reducedMotion ? 380 : 820)
+    return () => clearTimeout(timer)
+  }, [view, autoplay, pending, reducedMotion, reload, t])
+
+  const act = useCallback(async (action: Record<string, unknown>) => {
+    const v = viewRef.current
+    if (!v || pending) return false
+    setPending(true)
+    try {
+      const next = await api.games.act(v.id, randomId('act', 8), action, v.revision)
+      viewRef.current = next
+      setView(next); setAutoplay(true); setLeftPaused(false)
+      return true
+    } catch (e) {
+      const code = e instanceof CompanionRequestError ? e.code : 'network_error'
+      const reason = e instanceof CompanionRequestError && typeof e.detail?.reason === 'string' ? `（${e.detail.reason}）` : ''
+      if (code === 'game_revision_changed') { await reload(); toast(t('error.conflict')) }
+      else toast(code === 'network_error' ? t('error.network') : `${t('error.generic')}${reason}`, 'error')
+      return false
+    } finally { setPending(false) }
+  }, [pending, reload, t])
+
+  useEffect(() => {
+    const onFs = () => setFullscreen(document.fullscreenElement === shell.current && !!shell.current)
+    document.addEventListener('fullscreenchange', onFs)
+    return () => document.removeEventListener('fullscreenchange', onFs)
+  }, [])
+  const toggleFullscreen = async () => {
+    try {
+      if (document.fullscreenElement) await document.exitFullscreen()
+      else await shell.current?.requestFullscreen()
+    } catch { toast(t('game.fullscreenDenied'), 'error') }
+  }
+
+  if (error) return (
+    <div className="ew-page"><a className="ew-back ew-btn ghost" href={href.recent()}><ArrowLeft aria-hidden="true" />{t('common.back')}</a>
+      <div className="ew-empty"><SpotArt kind={errorArt(error)} /><h2>{error === 'not_found' ? t('error.notFound') : t('error.generic')}</h2><p>{t('game.leaveNote')}</p>
+        <div className="ew-row center"><button type="button" className="ew-btn" onClick={() => { setError(null); void reload() }}>{t('common.retry')}</button><a className="ew-btn" href={href.recent()}>{t('nav.recent')}</a></div></div></div>
+  )
+  if (!view) return <div className="ew-page-loading" role="status"><span className="ew-spinner" />{t('common.loading')}</div>
+
+  const seatName = (seat: number) => seat === 0 ? t('common.you') : view.seats[seat]?.name ?? `#${seat}`
+  const readOnly = view.lifecycle === 'abandoned' || view.lifecycle === 'ended'
+  const yourTurn = view.lifecycle === 'active' && (view.actor_seat === 0 || view.actor_seat === 'any')
+  const back = view.origin.return_hash || href.recent()
+  const Board = view.game_id === 'vegas' ? RoyaleBoard : view.game_id === 'gems' ? SplendorBoard : CaboBoard
+  const focusSeat = shownSeat
+  const status = view.lifecycle === 'ended' ? t('game.ended') : view.lifecycle === 'abandoned' ? t('game.abandoned')
+    : yourTurn ? t('game.yourTurn') : view.ai_hold || !autoplay ? t('game.paused') : t('game.aiThinking', {name: seatName(view.actor_seat as number)})
+
+  return (
+    <div ref={shell} className={classNames('ew-table-shell', `game-${view.game_id}`, !rail && 'rail-closed', immersive && 'is-immersive', fullscreen && 'is-fullscreen')} data-game={view.game_id} data-revision={view.revision} data-lifecycle={view.lifecycle}>
+      <header className="ew-table-top">
+        <a className="ew-back ew-btn ghost small" href={back} title={t('game.leaveNote')}><ArrowLeft aria-hidden="true" />{t('game.leave')}</a>
+        <div className="ew-table-title">
+          <strong>{game?.name ?? view.game_id}</strong>
+          <span className="ew-chip">{view.profile === 'splendor-legacy-v1' ? t('game.v1') : pick(game?.profile_label ?? {zh: view.profile, en: view.profile}, lang)}</span>
+          <span className="ew-chip mock" title={t('game.ruleSimulatedNote')}>{t('game.ruleSimulated')}</span>
+          <span className="ew-faint ew-small" data-testid="revision">{t('game.revision', {n: view.revision})}</span>
+        </div>
+        <p className="ew-table-status" role="status" aria-live="polite" data-testid="table-status">{status}</p>
+        <div className="ew-table-tools">
+          {view.lifecycle === 'active' && (autoplay && !view.ai_hold
+            ? <button type="button" className="ew-btn small" onClick={async () => { setAutoplay(false); setView(await api.games.hold(view.id, true)) }}><Pause aria-hidden="true" />{t('game.pause')}</button>
+            : <button type="button" className="ew-btn small primary" data-testid="continue-ai" onClick={async () => { setLeftPaused(false); setView(await api.games.hold(view.id, false)); setAutoplay(true) }}><Play aria-hidden="true" />{t('game.resume')}</button>)}
+          {ADAPTER_MODE === 'mock' && <button type="button" className="ew-icon-btn ew-mock-tool" onClick={() => window.dispatchEvent(new Event(OPEN_MOCK_PANEL))} aria-label={t('mock.panel')} title={t('mock.panel.title')}><FlaskConical aria-hidden="true" /></button>}
+          <button type="button" className="ew-icon-btn" onClick={() => setDialog('rules')} aria-label={t('game.rules')} title={t('game.rules')}><BookOpenText aria-hidden="true" /></button>
+          <button type="button" className="ew-icon-btn" aria-pressed={immersive} onClick={() => setImmersive(v => !v)} aria-label={immersive ? t('game.exitImmersive') : t('game.immersive')} title={immersive ? t('game.exitImmersive') : t('game.immersive')}>{immersive ? <EyeOff aria-hidden="true" /> : <Eye aria-hidden="true" />}</button>
+          <button type="button" className="ew-icon-btn" aria-pressed={fullscreen} onClick={() => void toggleFullscreen()} aria-label={fullscreen ? t('game.exitFullscreen') : t('game.fullscreen')} title={fullscreen ? t('game.exitFullscreen') : t('game.fullscreen')}>{fullscreen ? <Minimize aria-hidden="true" /> : <Maximize aria-hidden="true" />}</button>
+          <button type="button" className="ew-icon-btn" aria-pressed={rail} aria-expanded={rail} onClick={() => setRail(v => !v)} aria-label={t('game.sidebar')} title={t('game.sidebar')}>{rail ? <PanelRightClose aria-hidden="true" /> : <PanelRightOpen aria-hidden="true" />}</button>
+          {view.lifecycle === 'active' && <button type="button" className="ew-btn small ghost danger-text" onClick={() => setDialog('abandon')}><Flag aria-hidden="true" />{t('game.abandon')}</button>}
+        </div>
+      </header>
+      {leftPaused && view.lifecycle === 'active' && <div className="ew-notice warn ew-table-notice" role="status"><Pause aria-hidden="true" /><span>{t('game.leftPaused')}</span></div>}
+      <div className="ew-table-body">
+        <main className="ew-board-area" aria-label={game?.name ?? 'board'}>
+          {view.lifecycle === 'ended' && view.settlement && <ResultPanel view={view} seatName={seatName} onRematch={async () => { try { const v = await api.games.rematch(view.id, randomId('rematch', 8)); navigate(href.gamePlay(v.id)) } catch { toast(t('error.generic'), 'error') } }} back={back} />}
+          {view.lifecycle === 'abandoned' && <div className="ew-notice warn ew-result" role="status"><Flag aria-hidden="true" /><div><strong>{t('game.abandoned')}</strong><div className="ew-notice-actions"><a className="ew-btn small" href={back}>{t('game.backSource')}</a>
+            <button type="button" className="ew-btn small" onClick={async () => { try { const v = await api.games.rematch(view.id, randomId('rematch', 8)); navigate(href.gamePlay(v.id)) } catch { toast(t('error.generic'), 'error') } }}><RotateCcw aria-hidden="true" />{t('game.rematch')}</button></div></div></div>}
+          <Board view={view} pending={pending} act={act} seatName={seatName} readOnly={readOnly || !yourTurn} />
+        </main>
+        <aside className="ew-rail" aria-label={t('game.sidebar')} hidden={!rail || immersive}>
+          <div className="ew-rail-stage">
+            <LiveStage character={characterFor(view.seats[focusSeat]?.source_id, view.seats[focusSeat]?.source_version)} name={view.seats[focusSeat]?.name ?? ''} fallbackImage={view.seats[focusSeat]?.avatar} expression={view.expressions[focusSeat] ?? 'neutral'} preset="rail" />
+            <span className="ew-rail-stage-name">{view.seats[focusSeat]?.name}</span>
+          </div>
+          <ul className="ew-rail-seats">
+            {view.seats.map(s => <SeatRow key={s.seat} seat={s} view={view} active={view.actor_seat === s.seat} onBefriend={() => openAddFriend({sourceId: s.source_id!, version: s.source_version!, sourceName: s.name, origin: {kind: 'game', session_id: view.id, seat: s.seat}})} />)}
+          </ul>
+          <TableChat view={view} messages={messages} replyFailed={replyFailed} onSend={async text => {
+            try { const r = await api.games.say(view.id, randomId('say', 8), text, appStore.get().lang); setMessages(r.items); setReplyFailed(r.reply_failed); return true }
+            catch (e) { toast(e instanceof CompanionRequestError && e.code === 'table_chat_read_only' ? t('error.forbidden') : t('error.generic'), 'error'); return false }
+          }} seatName={seatName} />
+        </aside>
+      </div>
+      {dialog === 'rules' && <Dialog title={`${t('game.rules')} · ${game?.name ?? ''}`} onClose={() => setDialog(null)} wide>
+        <p><code className="ew-code">{view.profile}</code></p>
+        <ul className="ew-rules">{(game?.rule_notes ?? []).map((n, i) => <li key={i}>{pick(n, lang)}</li>)}</ul>
+        <p className="ew-faint ew-small">{t('game.ruleSimulatedNote')}</p>
+      </Dialog>}
+      {dialog === 'abandon' && <ConfirmDialog title={t('game.abandon')} body={<p>{t('game.abandonConfirm')}</p>} confirmLabel={t('game.abandon')} danger onCancel={() => setDialog(null)}
+        onConfirm={async () => { setDialog(null); try { setView(await api.games.abandon(view.id, view.revision)) } catch { await reload() } }} />}
+      {addFriendDialog}
+    </div>
+  )
+}
+
+function useDwell<T>(desired: T, ms: number): T {
+  const [shown, setShown] = useState(desired)
+  const since = useRef(0)
+  useEffect(() => {
+    if (Object.is(desired, shown)) return
+    const wait = Math.max(0, since.current + ms - Date.now())
+    const timer = setTimeout(() => { since.current = Date.now(); setShown(desired) }, wait)
+    return () => clearTimeout(timer)
+  }, [desired, shown, ms])
+  return shown
+}
+
+function SeatRow({seat, view, active, onBefriend}: {seat: SeatJSON; view: GameViewJSON; active: boolean; onBefriend: () => void}) {
+  const {t} = useI18n()
+  const myAvatar = useApp(s => s.account?.persona?.avatar ?? null)
+  const score = view.settlement?.scores[seat.seat]
+  return (
+    <li className={classNames('ew-seat', active && 'is-active')} data-seat={seat.seat}>
+      <span className="ew-seat-dot" style={{background: seatColor(seat.seat)}} aria-hidden="true" />
+      <span className="ew-avatar small"><Portrait src={seat.kind === 'player' ? personaAvatarUrl(myAvatar) : seat.avatar} name={seat.name} position={seat.kind === 'player' ? undefined : '50% 14%'} /></span>
+      <span className="ew-seat-text"><strong>{seat.seat === 0 ? t('common.you') : seat.name}</strong>
+        <small>{seat.kind === 'player' ? t('game.you') : seat.kind === 'friend' ? t('common.friend') : t('common.temporary')}{score !== undefined ? ` · ${score.toLocaleString()}` : ''}</small></span>
+      {seat.kind === 'friend' && <a className="ew-icon-btn" href={href.chat(seat.identity)} aria-label={`${t('game.toChat')} · ${seat.name}`} title={t('game.toChat')}><MessageCircle aria-hidden="true" /></a>}
+      {seat.kind === 'temporary' && seat.source_id && <button type="button" className="ew-icon-btn" onClick={onBefriend} aria-label={`${t('game.befriend')} · ${seat.name}`} title={`${t('game.befriend')} — ${t('game.befriendNote')}`}><UserPlus aria-hidden="true" /></button>}
+    </li>
+  )
+}
+
+function TableChat({view, messages, replyFailed, onSend, seatName}: {view: GameViewJSON; messages: TableMessageJSON[]; replyFailed: boolean; onSend: (text: string) => Promise<boolean>; seatName: (s: number) => string}) {
+  const {t} = useI18n()
+  const [draft, setDraft] = useState('')
+  const [busy, setBusy] = useState(false)
+  const box = useRef<HTMLDivElement>(null)
+  const atEnd = useRef(true)
+  useEffect(() => { const b = box.current; if (b && atEnd.current) b.scrollTop = b.scrollHeight }, [messages.length])
+  return (
+    <section className="ew-table-chat" aria-label={t('game.tableChat')}>
+      <header><strong>{t('game.tableChat')}</strong><small className="ew-faint">{t('game.tableChatNote')}</small></header>
+      <div ref={box} className="ew-table-log" role="log" onScroll={e => { const b = e.currentTarget; atEnd.current = b.scrollHeight - b.scrollTop - b.clientHeight < 30 }}>
+        {view.log.slice(-6).map(l => <p key={`log-${l.revision}-${l.seat}`} className="ew-log-line"><span className="ew-seat-dot" style={{background: seatColor(l.seat)}} aria-hidden="true" />{pickSummary(l.summary)}</p>)}
+        {messages.map(m => <p key={m.id} className={`ew-chat-line ${m.seat === 0 ? 'is-me' : ''}`}><strong>{seatName(m.seat)}</strong>{m.mode === 'simulated_rule_reply' && <span className="ew-chip mock small">{t('common.simulated')}</span>}<span className="ew-chat-text"><RichText text={m.text} /></span></p>)}
+        {replyFailed && <p className="ew-faint ew-small">{t('game.replyFailed')}</p>}
+      </div>
+      <Composer value={draft} onChange={setDraft} busy={busy} disabled={view.lifecycle === 'abandoned'} label={t('game.tableChat')} placeholder={t('game.say')}
+        onSubmit={async text => { setBusy(true); const ok = await onSend(text); setBusy(false); if (ok) setDraft('') }} />
+    </section>
+  )
+}
+function pickSummary(s: {zh: string; en: string}) { return appStore.get().lang === 'zh' ? s.zh : s.en }
+
+function ResultPanel({view, seatName, onRematch, back}: {view: GameViewJSON; seatName: (s: number) => string; onRematch: () => void; back: string}) {
+  const {t} = useI18n()
+  const ref = useRef<HTMLElement>(null)
+  useEffect(() => { ref.current?.focus({preventScroll: false}) }, [])
+  const s = view.settlement!
+  const order = view.seats.map(x => x.seat).sort((a, b) => view.game_id === 'cabo' ? s.scores[a] - s.scores[b] : s.scores[b] - s.scores[a])
+  return (
+    <section ref={ref} tabIndex={-1} className="ew-result" aria-labelledby="result-title" data-testid="result">
+      <h2 id="result-title"><Trophy aria-hidden="true" /> {t('game.result')} · {t('game.ended')}</h2>
+      <table className="ew-result-table">
+        <thead><tr><th scope="col">{t('game.seats')}</th><th scope="col">{t('game.score')}</th><th scope="col"></th></tr></thead>
+        <tbody>{order.map(seat => <tr key={seat} className={s.winners.includes(seat) ? 'is-winner' : ''}>
+          <th scope="row"><span className="ew-seat-dot" style={{background: seatColor(seat)}} aria-hidden="true" /> {seatName(seat)}</th>
+          <td>{s.scores[seat].toLocaleString()}</td><td>{s.winners.includes(seat) ? t('game.winner') : ''} <small className="ew-faint">{s.labels[seat] ? pickSummary(s.labels[seat]) : ''}</small></td></tr>)}</tbody>
+      </table>
+      <div className="ew-row wrap">
+        <button type="button" className="ew-btn primary" onClick={onRematch}><RotateCcw aria-hidden="true" />{t('game.rematch')}</button>
+        {view.seats.filter(x => x.kind === 'friend').map(f => <a key={f.identity} className="ew-btn" href={href.chat(f.identity)}><MessageCircle aria-hidden="true" />{t('game.toChat')} · {f.name}</a>)}
+        <a className="ew-btn ghost" href={back}>{t('game.backSource')}</a>
+      </div>
+    </section>
+  )
+}
diff --git a/everwith-claude-frontend/src/features/games/GamePreparePage.tsx b/everwith-claude-frontend/src/features/games/GamePreparePage.tsx
new file mode 100644
index 00000000..962ee1f5
--- /dev/null
+++ b/everwith-claude-frontend/src/features/games/GamePreparePage.tsx
@@ -0,0 +1,140 @@
+import {useEffect, useMemo, useRef, useState} from 'react'
+import {ArrowLeft, Play, Users, BookOpenText} from 'lucide-react'
+import {useI18n} from '../../app/i18n'
+import {href, navigate} from '../../app/router'
+import {useApp} from '../../app/store'
+import {api} from '../../api/adapter'
+import type {GameJSON} from '../../api/types'
+import {CompanionRequestError} from '../../contracts/companion'
+import {Portrait} from '../../components/Portrait'
+import {SpotArt} from '../../components/Art'
+import {personaAvatarUrl} from '../../art/generated'
+import {OFFICIAL_CHARACTERS} from '../../mock/catalog'
+import {pick, randomId} from '../../lib/util'
+
+type SeatChoice = {kind: 'temporary'; character_id: string} | {kind: 'friend'; friend_id: string; friend_epoch: number}
+const ROTATION = ['official-lena', 'official-arthur', 'official-marcus', 'official-nora']
+
+export default function GamePreparePage({gameId, withFriend, from}: {gameId: string; withFriend: string | null; from: string | null}) {
+  const {t, lang} = useI18n()
+  const friends = useApp(s => s.friends) ?? []
+  const account = useApp(s => s.account)
+  const [game, setGame] = useState<GameJSON | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [players, setPlayers] = useState(4)
+  const [seats, setSeats] = useState<SeatChoice[]>([])
+  const [busy, setBusy] = useState<false | 'starting' | 'lookup'>(false)
+  const [startError, setStartError] = useState<string | null>(null)
+  // One key per preparation intent: double clicks, retries and timeouts reuse it.
+  const key = useRef(randomId('gstart', 10))
+  const back = from ?? href.discover('games')
+
+  useEffect(() => {
+    api.catalog.games().then(r => {
+      const g = r.items.find(x => x.id === gameId || x.slug === gameId)
+      if (!g) { setError('not_found'); return }
+      setGame(g); setPlayers(g.default_players)
+    }).catch(() => setError('network_error'))
+  }, [gameId])
+  useEffect(() => {
+    if (!game) return
+    setSeats(prev => Array.from({length: players - 1}, (_, i) => {
+      if (prev[i]) return prev[i]
+      if (i === 0 && withFriend) {
+        const f = friends.find(x => x.id === withFriend)
+        if (f) return {kind: 'friend', friend_id: f.id, friend_epoch: f.epoch}
+      }
+      return {kind: 'temporary', character_id: ROTATION[i % ROTATION.length]}
+    }))
+  }, [game, players, withFriend, friends])
+
+  const seated = useMemo(() => new Set(seats.filter(s => s.kind === 'friend').map(s => (s as {friend_id: string}).friend_id)), [seats])
+  const invalid = seats.length !== players - 1 || seats.some((s, i) => s.kind === 'friend' && seats.findIndex(o => o.kind === 'friend' && o.friend_id === s.friend_id) !== i)
+  const start = async () => {
+    if (!game || busy || invalid) return
+    setBusy('starting'); setStartError(null)
+    const friend = withFriend ? friends.find(f => f.id === withFriend) : null
+    const body = {key: key.current, game_id: game.id, players, profile: game.profile, expected_account_id: account?.account?.id ?? account?.guest_id,
+      seats: seats.map((s, i) => ({seat: i + 1, ...s})),
+      origin: friend ? {kind: 'friend', friend_id: friend.id, return_hash: back} : {kind: 'discover', return_hash: back}}
+    try {
+      const view = await api.games.start(body)
+      navigate(href.gamePlay(view.id))
+    } catch (e) {
+      const code = e instanceof CompanionRequestError ? e.code : 'network_error'
+      if (code === 'network_error') {
+        // Unknown result: look up the original key before anything else.
+        setBusy('lookup')
+        try { const view = await api.games.lookup(key.current); navigate(href.gamePlay(view.id)); return }
+        catch { setStartError(t('error.network')) }
+      } else setStartError(code === 'friend_epoch_changed' || code === 'friend_unavailable' ? t('error.conflict') : t('error.generic'))
+      setBusy(false)
+    }
+  }
+  if (error) return <div className="ew-page"><a className="ew-back ew-btn ghost" href={back}><ArrowLeft aria-hidden="true" />{t('common.back')}</a><div className="ew-empty"><SpotArt kind="not-found" /><h2>{t('error.notFound')}</h2></div></div>
+  if (!game) return <div className="ew-page-loading" role="status"><span className="ew-spinner" />{t('common.loading')}</div>
+  return (
+    <div className="ew-page ew-prepare">
+      <a className="ew-back ew-btn ghost" href={back}><ArrowLeft aria-hidden="true" />{t('common.back')}</a>
+      <div className="ew-prepare-layout">
+        <section className="ew-prepare-main" aria-labelledby="prep-title">
+          <p className="ew-eyebrow">{t('game.prepare')}</p>
+          <h1 id="prep-title" className="ew-title-xl">{game.name}</h1>
+          <p className="ew-lead">{pick(game.description, lang)}</p>
+          <div className="ew-prepare-block">
+            <h2 className="ew-section-title">{t('game.profile')}</h2>
+            <p><span className="ew-chip">{pick(game.profile_label, lang)}</span> <code className="ew-code">{game.profile}</code></p>
+            <ul className="ew-rules">{game.rule_notes.map((n, i) => <li key={i}>{pick(n, lang)}</li>)}</ul>
+          </div>
+          <div className="ew-prepare-block">
+            <h2 className="ew-section-title" id="players-label">{t('game.players')}</h2>
+            <div className="ew-row wrap" role="group" aria-labelledby="players-label">
+              {game.players.map(n => <button key={n} type="button" className="ew-btn small" aria-pressed={players === n} onClick={() => setPlayers(n)}>{n} {t('common.players')}</button>)}
+            </div>
+          </div>
+          <div className="ew-prepare-block">
+            <h2 className="ew-section-title">{t('game.seats')}</h2>
+            <ol className="ew-seat-list">
+              <li className="ew-seat-row"><span className="ew-seat-no">0</span><span className="ew-avatar"><Portrait src={personaAvatarUrl(account?.persona?.avatar)} name={account?.persona?.name || t('common.you')} /></span><strong>{t('game.you')}</strong></li>
+              {seats.map((s, i) => {
+                const f = s.kind === 'friend' ? friends.find(x => x.id === s.friend_id) : null
+                const ch = s.kind === 'temporary' ? OFFICIAL_CHARACTERS.find(c => c.id === s.character_id)! : null
+                return (
+                  <li key={i} className="ew-seat-row">
+                    <span className="ew-seat-no">{i + 1}</span>
+                    <span className="ew-avatar"><Portrait src={f?.avatar ?? ch?.avatar} name={f?.name ?? ch?.name ?? '?'} position="50% 14%" /></span>
+                    <span className="ew-seat-name"><strong>{f?.name ?? ch?.name}</strong>
+                      <span className={`ew-chip ${s.kind === 'friend' ? 'friend' : 'temp'}`}>{s.kind === 'friend' ? t('common.friend') : t('common.temporary')}</span></span>
+                    <label className="ew-seat-select">
+                      <span className="ew-sr">{t('game.seat', {n: i + 1})}</span>
+                      <select className="ew-select" value={s.kind === 'friend' ? `f:${s.friend_id}` : `t:${s.character_id}`} onChange={e => {
+                        const v = e.target.value
+                        setSeats(prev => prev.map((x, j) => j !== i ? x : v.startsWith('f:') ? (() => { const fr = friends.find(q => q.id === v.slice(2))!; return {kind: 'friend' as const, friend_id: fr.id, friend_epoch: fr.epoch} })() : {kind: 'temporary' as const, character_id: v.slice(2)}))
+                      }}>
+                        <optgroup label={t('game.defaultLineup')}>
+                          {OFFICIAL_CHARACTERS.map(c => <option key={c.id} value={`t:${c.id}`}>{c.name} · {t('common.temporary')}</option>)}
+                        </optgroup>
+                        {friends.length > 0 && <optgroup label={t('game.useFriend')}>
+                          {friends.map(fr => <option key={fr.id} value={`f:${fr.id}`} disabled={seated.has(fr.id) && !(s.kind === 'friend' && s.friend_id === fr.id)}>{fr.name} · {fr.source_name} #{fr.display_number}{seated.has(fr.id) && !(s.kind === 'friend' && s.friend_id === fr.id) ? ` (${t('game.friendSeated')})` : ''}</option>)}
+                        </optgroup>}
+                      </select>
+                    </label>
+                  </li>
+                )
+              })}
+            </ol>
+            {!account?.authenticated && <p className="ew-faint ew-small"><Users aria-hidden="true" className="ew-inline-icon" /> {t('friends.guest')}</p>}
+          </div>
+        </section>
+        <aside className="ew-prepare-side">
+          <div className="ew-prepare-poster"><Portrait src={game.poster} name={game.name} /></div>
+          <div className="ew-notice mock"><BookOpenText aria-hidden="true" /><span>{t('game.ruleSimulatedNote')}</span></div>
+          <p className="ew-faint ew-small">{t('game.noRecord')}</p>
+          {startError && <div className="ew-notice danger" role="alert">{startError}</div>}
+          <button type="button" className="ew-btn primary wide ew-start-btn" disabled={!!busy || invalid} onClick={() => void start()}>
+            {busy ? <span className="ew-spinner" /> : <Play aria-hidden="true" />}{busy === 'lookup' ? t('game.lookup') : busy ? t('game.starting') : t('game.start')}</button>
+        </aside>
+      </div>
+    </div>
+  )
+}
diff --git a/everwith-claude-frontend/src/features/games/boards/CaboBoard.tsx b/everwith-claude-frontend/src/features/games/boards/CaboBoard.tsx
new file mode 100644
index 00000000..55183849
--- /dev/null
+++ b/everwith-claude-frontend/src/features/games/boards/CaboBoard.tsx
@@ -0,0 +1,287 @@
+import {useEffect, useState} from 'react'
+import type {CSSProperties, ReactNode} from 'react'
+import {Check, Eye, Hand, Layers, Megaphone, RotateCcw, Shuffle, Trash2, X} from 'lucide-react'
+import * as cabo from '../../../games/engines/cabo/engine'
+import type {CaboAbility, CaboCardView, CaboObservation, CaboScoreRow} from '../../../games/engines/cabo/engine'
+import {useI18n} from '../../../app/i18n'
+import {classNames} from '../../../lib/util'
+import type {Lang} from '../../../lib/util'
+import {ActionBar, GAME_ASSETS, seatColor, useBoardAsset, useBoardText, useRevisionState} from './shared'
+import type {BoardProps} from './shared'
+
+/**
+ * CABO (Shareful procedures + PROVISIONAL component slice). Values are shown only when the
+ * projection says so: public face-up cards, the seat's own drawn card, or an authorised
+ * private reveal until it is acknowledged. Remembered cards carry a “known” badge WITHOUT
+ * a number. Card numerals, 6/9 marks and ability text are drawn by code over the art.
+ */
+type Sel = {own: string[]; other: string | null; call: boolean}
+const EMPTY: Sel = {own: [], other: null, call: false}
+const ART_DIR = `${GAME_ASSETS}/cabo/card-rank-art`
+
+const TEXT = {
+  zh: {
+    round: '第 {n} 轮', deck: '牌堆 {n}', discardPile: '弃牌堆 {n}', drawn: '抽到的牌', provisional: '组件与能力为临时假设（未核实）',
+    legend: '临时组件：0 与 13 各 2 张、1–12 各 4 张；7/8 偷看自己 · 9/10 窥探他人 · 11/12 与他人盲换。', total: '累计 {n}', resetUsed: '已用过 100→50',
+    caller: '{name} 叫了 CABO：还剩 {n} 人行动', called: '叫了 CABO', you: '你', known: '已知', knownLabel: '你看过这张（不显示数字，凭记忆）',
+    cardFaceDown: '{owner} 的牌 · 位置 {slot} · 盖着', cardFaceUp: '{owner} 的牌 · 位置 {slot} · {value}', cardDiscard: '弃牌堆顶：{value}', cardDrawnHidden: '{name} 抽到的牌（盖着）', cardDrawn: '抽到的牌：{value}',
+    peek: '偷看', peekDetail: '看自己的一张', spy: '窥探', spyDetail: '看别人的一张', swap: '交换', swapDetail: '与别人盲换一张',
+    setupPrompt: '开局私看：选择你自己的两张牌（只有你能看到）。', setupConfirm: '私看这两张', revealPrompt: '只有你看得到这些牌。记住后点“记住了”，牌会立刻盖回。', ack: '记住了，盖回',
+    turnPrompt: '轮到你：从牌堆抽一张、拿弃牌堆顶的牌（必须换入），或叫 CABO。', drawDeck: '从牌堆抽', drawDiscard: '拿弃牌顶 {value}（必须换入）', call: '叫 CABO',
+    callPrompt: '叫 CABO 代替本回合抽牌；其余每人再走一次后计分。叫错（不是最低）要多加 5 分。', confirmCall: '确认叫 CABO',
+    drawnPrompt: '你抽到了 {value}。选你的牌换入，或者弃掉{ability}。', drawnAbility: '（弃掉时可使用能力：{name}）', exchangePrompt: '从弃牌堆拿了 {value}：必须换入。选择要换掉的牌。',
+    exchangeSel: '用 {value} 换掉选中的 {n} 张', exchangeMulti: '选 2–4 张时：同值则一起换成这一张；不同值则全部公开后盖回，抽到的牌被弃掉。', exchange: '换入',
+    discard: '弃掉', discardAbility: '弃掉并{name}', abilityPeek: '偷看：选你自己一张盖着的牌。', abilitySpy: '窥探：选别人一张盖着的牌。', abilitySwap: '交换：选你的一张和别人的一张（盲换，不看）。',
+    abilityConfirm: '确认', abilityCancel: '放弃能力', cancel: '取消选择', otherTurn: '{name}：{phase}', paused: '暂停中：可以先聊聊，再点“继续”。',
+    phase_setup: '开局私看', phase_reveal: '私看中', phase_turn: '考虑中', phase_drawn: '抽到一张牌', phase_exchange: '换入弃牌', phase_ability: '使用能力', phase_roundEnd: '本轮结束', phase_ended: '已结束',
+    roundEnd: '第 {n} 轮计分', nextRound: '开始下一轮', ended: '有人累计超过 100：本局结束，结果已锁定。', abandoned: '本局已放弃（只读）',
+    col_player: '玩家', col_cards: '手牌', col_sum: '合计', col_gain: '本轮加分', col_total: '累计', reason_shootingTheMoon: '射月（12/12/13/13）', reason_lowest: '最低：不加分', reason_caboFailed: '叫 CABO 失败 +5', reason_cardSum: '加牌面和',
+    resetNote: '恰好 100 → 回到 50', recent: '最新：', empty: '空位', hand: '{name} 的手牌', selectedN: '已选 {n}',
+  },
+  en: {
+    round: 'Round {n}', deck: 'Deck {n}', discardPile: 'Discard {n}', drawn: 'Drawn card', provisional: 'Components & abilities are provisional (unverified)',
+    legend: 'Provisional components: two each of 0 and 13, four each of 1–12; 7/8 peek own · 9/10 spy another · 11/12 blind-swap.', total: 'Total {n}', resetUsed: '100→50 used',
+    caller: '{name} called CABO: {n} player(s) left to act', called: 'Called CABO', you: 'You', known: 'Known', knownLabel: 'You have seen this card (number not shown — remember it)',
+    cardFaceDown: '{owner}\'s card · slot {slot} · face down', cardFaceUp: '{owner}\'s card · slot {slot} · {value}', cardDiscard: 'Discard top: {value}', cardDrawnHidden: 'Card drawn by {name} (face down)', cardDrawn: 'Drawn card: {value}',
+    peek: 'Peek', peekDetail: 'look at one of yours', spy: 'Spy', spyDetail: 'look at another\'s', swap: 'Swap', swapDetail: 'blind-swap with another',
+    setupPrompt: 'Opening peek: choose two of your own cards (only you see them).', setupConfirm: 'Peek at these two', revealPrompt: 'Only you can see these. Press “Got it” and they turn face down at once.', ack: 'Got it, turn down',
+    turnPrompt: 'Your turn: draw from the deck, take the discard (must exchange), or call CABO.', drawDeck: 'Draw from deck', drawDiscard: 'Take discard {value} (must exchange)', call: 'Call CABO',
+    callPrompt: 'Calling CABO replaces your draw; everyone else gets one more turn, then scoring. A wrong call (not lowest) adds 5.', confirmCall: 'Confirm CABO',
+    drawnPrompt: 'You drew {value}. Choose cards to exchange, or discard it{ability}.', drawnAbility: ' (discarding can use: {name})', exchangePrompt: 'You took {value} from the discard: you must exchange. Choose the card(s) to replace.',
+    exchangeSel: 'Exchange {n} selected card(s) for {value}', exchangeMulti: 'With 2–4 cards: if all match they become this one card; otherwise they are revealed, turned back down, and the drawn card is discarded.', exchange: 'Exchange',
+    discard: 'Discard', discardAbility: 'Discard & {name}', abilityPeek: 'Peek: choose one of your face-down cards.', abilitySpy: 'Spy: choose another player\'s face-down card.', abilitySwap: 'Swap: choose one of yours and one of another player\'s (blind).',
+    abilityConfirm: 'Confirm', abilityCancel: 'Skip ability', cancel: 'Clear selection', otherTurn: '{name}: {phase}', paused: 'Paused: chat first, then press Continue.',
+    phase_setup: 'opening peek', phase_reveal: 'peeking', phase_turn: 'thinking', phase_drawn: 'holding a drawn card', phase_exchange: 'exchanging the discard', phase_ability: 'using an ability', phase_roundEnd: 'round over', phase_ended: 'finished',
+    roundEnd: 'Round {n} scoring', nextRound: 'Start next round', ended: 'Someone passed 100: the game is over and the result is locked.', abandoned: 'Game abandoned (read-only)',
+    col_player: 'Player', col_cards: 'Hand', col_sum: 'Sum', col_gain: 'Added', col_total: 'Total', reason_shootingTheMoon: 'Shooting the moon (12/12/13/13)', reason_lowest: 'Lowest: adds 0', reason_caboFailed: 'Failed CABO +5', reason_cardSum: 'Adds card sum',
+    resetNote: 'Exactly 100 → back to 50', recent: 'Latest: ', empty: 'empty slot', hand: '{name}\'s hand', selectedN: '{n} selected',
+  },
+}
+
+type ArtState = {ranks: (string | null)[]; back: string | null} | null
+let artLoad: Promise<ArtState> | null = null
+/** Loads and validates the public rank-art manifest once; any mismatch falls back to code-drawn cards. */
+function loadArt(): Promise<ArtState> {
+  artLoad ??= fetch(`${ART_DIR}/manifest.json`, {credentials: 'same-origin'}).then(r => r.ok ? r.json() : null).then((m: {schema?: string; template?: string; ranks?: {key: string; asset: {path: string; sha256: string; noBakedText: boolean} | null}[]; back?: {key: string; asset: {path: string; sha256: string; noBakedText: boolean} | null}} | null) => {
+    if (!m || m.schema !== 'cabo-rank-art/1' || m.template !== 'illustration-print/1' || !Array.isArray(m.ranks) || m.ranks.length !== 14) return null
+    const url = (entry: {key: string; asset: {path: string; sha256: string; noBakedText: boolean} | null} | undefined, key: string) => {
+      const a = entry?.asset
+      if (!entry || entry.key !== key || !a || a.noBakedText !== true || !/^[a-f0-9]{64}$/.test(a.sha256)) return null
+      const file = a.path.split('/').pop() ?? ''
+      return file === `${key}-${a.sha256}.webp` ? `${ART_DIR}/${file}` : null
+    }
+    return {ranks: m.ranks.map((e, i) => url(e, `rank-${i}`)), back: url(m.back, 'back')}
+  }).catch(() => null)
+  return artLoad
+}
+function useCaboArt() {
+  const [art, setArt] = useState<ArtState>(null)
+  useEffect(() => { let live = true; void loadArt().then(a => { if (live) setArt(a) }); return () => { live = false } }, [])
+  return art
+}
+
+export function CaboCard({value, art, back, size = 'md', known = false, selected = false, onClick, label, testId, className, lang, reveal = false}: {
+  value: number | null; art: string | null; back: string | null; size?: 'lg' | 'md' | 'sm'; known?: boolean; selected?: boolean; onClick?: () => void; label: string; testId?: string; className?: string; lang: Lang; reveal?: boolean
+}) {
+  const ab = value === null ? null : cabo.ability(value)
+  const words = TEXT[lang]
+  const face = value === null
+    ? <span className="cb-back" style={back ? {backgroundImage: `url("${back}")`} : undefined} aria-hidden="true"><span className="cb-brand">C A B O</span></span>
+    : <span className={classNames('cb-front', !art && 'no-art')} aria-hidden="true">
+      {art && <span className="cb-art" style={{backgroundImage: `url("${art}")`}} />}
+      {!art && <span className="cb-center-digit">{value}{(value === 6 || value === 9) && <i className="cb-underline" />}</span>}
+      <span className="cb-corner tl">{value}{(value === 6 || value === 9) && <i className="cb-underline" />}</span>
+      <span className="cb-corner br">{value}{(value === 6 || value === 9) && <i className="cb-underline" />}</span>
+      <span className="cb-footer">{ab ? <><b>{words[ab]}</b><small>{words[`${ab}Detail` as 'peekDetail']}</small></> : <span className="cb-brand-small">C A B O</span>}</span>
+    </span>
+  const cls = classNames('cb-card', `size-${size}`, value === null ? 'is-down' : 'is-up', selected && 'is-selected', onClick && 'is-clickable', reveal && 'is-reveal', className)
+  // The printed footer shows the short ability name; the full rule text is in the label.
+  const fullLabel = ab ? `${label} · ${words[ab]}（${words[`${ab}Detail` as 'peekDetail']}）` : label
+  const badge = known && value === null ? <span className="cb-known" aria-hidden="true"><Eye />{words.known}</span> : null
+  return onClick
+    ? <button type="button" className={cls} aria-pressed={selected} aria-label={fullLabel} title={ab ? fullLabel : undefined} data-testid={testId} onClick={onClick}>{face}{badge}</button>
+    : <span className={cls} role="img" aria-label={fullLabel} title={ab ? fullLabel : undefined} data-testid={testId}>{face}{badge}</span>
+}
+
+export function CaboBoard({view, pending, act, seatName, readOnly}: BoardProps) {
+  const {lang} = useI18n()
+  const bt = useBoardText(TEXT)
+  const asset = useBoardAsset()
+  const art = useCaboArt()
+  const v = view.player_view as CaboObservation
+  const [sel, setSel] = useRevisionState<Sel>(EMPTY, view.revision)
+  const active = view.lifecycle === 'active'
+  const myTurn = active && !readOnly && (v.current === 0 || v.phase === 'roundEnd') && !v.ended
+  const me = v.players[0]
+  const artFor = (value: number) => art?.ranks[value] ? asset(art.ranks[value]!) : null
+  const backUrl = art?.back ? asset(art.back) : null
+  const reveal = v.privateReveal && v.privateReveal.player === 0 ? new Map(v.privateReveal.cards.map(c => [c.id, c.value])) : new Map<string, number>()
+  const known = (id: string) => typeof v.knowledge[id] === 'number'
+  const abilityName = (a: CaboAbility) => bt(a)
+  const drawnValue = v.drawn?.value ?? null
+
+  const toggleOwn = (id: string, max: number) => setSel(s => ({...s, call: false, own: s.own.includes(id) ? s.own.filter(x => x !== id) : max === 1 ? [id] : s.own.length >= max ? s.own : [...s.own, id]}))
+  const toggleOther = (id: string) => setSel(s => ({...s, call: false, other: s.other === id ? null : id}))
+
+  // Which cards are selectable right now (never offers an illegal target).
+  const ownMode: null | {max: number; faceDownOnly: boolean} = !myTurn ? null
+    : v.phase === 'setup' ? {max: 2, faceDownOnly: false}
+    : v.phase === 'drawn' || v.phase === 'exchange' ? {max: 4, faceDownOnly: false}
+    : v.phase === 'ability' && v.activeAbility === 'peek' ? {max: 1, faceDownOnly: true}
+    : v.phase === 'ability' && v.activeAbility === 'swap' ? {max: 1, faceDownOnly: false} : null
+  const otherMode = myTurn && v.phase === 'ability' && (v.activeAbility === 'spy' || v.activeAbility === 'swap') ? {faceDownOnly: v.activeAbility === 'spy'} : null
+
+  const cardLabel = (owner: number, c: CaboCardView, shown: number | null) => {
+    const base = shown === null ? bt('cardFaceDown', {owner: seatName(owner), slot: c.slot + 1}) : bt('cardFaceUp', {owner: seatName(owner), slot: c.slot + 1, value: shown})
+    return known(c.id) && shown === null ? `${base} · ${bt('knownLabel')}` : base
+  }
+  const hand = (p: CaboObservation['players'][number], size: 'lg' | 'md' | 'sm') => {
+    const bySlot = new Map(p.cards.map(c => [c.slot, c]))
+    const slots = Math.max(4, ...p.cards.map(c => c.slot + 1))
+    return (
+      <div className={classNames('cb-hand', `size-${size}`)} aria-label={bt('hand', {name: seatName(p.id)})}>
+        {Array.from({length: slots}, (_, slot) => {
+          const c = bySlot.get(slot)
+          if (!c) return <span key={`empty-${slot}`} className={classNames('cb-slot-empty', `size-${size}`)} aria-label={bt('empty')} role="img" />
+          const shown = reveal.has(c.id) ? reveal.get(c.id)! : c.faceUp || c.value !== null ? c.value : null
+          const isOwn = p.id === 0
+          const selectable = isOwn ? !!ownMode && (!ownMode.faceDownOnly || !c.faceUp) : !!otherMode && (!otherMode.faceDownOnly || !c.faceUp)
+          const selected = isOwn ? sel.own.includes(c.id) : sel.other === c.id
+          return <CaboCard key={c.id} value={shown} art={shown === null ? null : artFor(shown)} back={backUrl} size={size} known={known(c.id)} selected={selected} lang={lang} reveal={reveal.has(c.id)}
+            label={cardLabel(p.id, c, shown)} testId={isOwn ? `cabo-own-${slot}` : `cabo-seat${p.id}-${slot}`}
+            onClick={selectable ? () => isOwn ? toggleOwn(c.id, ownMode!.max) : toggleOther(c.id) : undefined} />
+        })}
+      </div>
+    )
+  }
+
+  // ----- action strip -----
+  let bar: ReactNode
+  const cancelBtn = (sel.own.length > 0 || sel.other || sel.call) && <button type="button" className="ew-btn ghost" data-testid="cabo-cancel" onClick={() => setSel(EMPTY)}><X aria-hidden="true" />{bt('cancel')}</button>
+  if (view.lifecycle === 'abandoned') bar = <ActionBar prompt={bt('abandoned')} />
+  else if (v.ended || view.lifecycle === 'ended') bar = <ActionBar prompt={bt('ended')} tone="turn" />
+  else if (v.phase === 'roundEnd') bar = (
+    <ActionBar tone="turn" testId="cabo-actions" prompt={bt('roundEnd', {n: v.round})}>
+      <button type="button" className="ew-btn primary" data-testid="cabo-next-round" disabled={pending || !active} onClick={() => void act({type: 'nextRound'})}><RotateCcw aria-hidden="true" />{bt('nextRound')}</button>
+    </ActionBar>
+  )
+  else if (!myTurn) bar = <ActionBar prompt={view.ai_hold ? bt('paused') : bt('otherTurn', {name: seatName(v.current), phase: bt(`phase_${v.phase}`)})} />
+  else if (v.phase === 'setup') bar = (
+    <ActionBar tone="turn" testId="cabo-actions" prompt={bt('setupPrompt')} detail={sel.own.length ? bt('selectedN', {n: sel.own.length}) : undefined}>
+      {cancelBtn}
+      <button type="button" className="ew-btn primary" data-testid="cabo-peek-confirm" disabled={pending || sel.own.length !== 2} onClick={() => void act({type: 'initialPeek', cards: sel.own})}><Eye aria-hidden="true" />{bt('setupConfirm')}</button>
+    </ActionBar>
+  )
+  else if (v.phase === 'reveal') bar = (
+    <ActionBar tone="warn" testId="cabo-actions" prompt={bt('revealPrompt')}>
+      <button type="button" className="ew-btn primary" data-testid="cabo-ack" disabled={pending} onClick={() => void act({type: 'ack'})}><Check aria-hidden="true" />{bt('ack')}</button>
+    </ActionBar>
+  )
+  else if (v.phase === 'turn' && sel.call) bar = (
+    <ActionBar tone="select" testId="cabo-actions" prompt={bt('callPrompt')}>
+      {cancelBtn}
+      <button type="button" className="ew-btn primary" data-testid="cabo-call-confirm" disabled={pending} onClick={() => void act({type: 'call'})}><Megaphone aria-hidden="true" />{bt('confirmCall')}</button>
+    </ActionBar>
+  )
+  else if (v.phase === 'turn') {
+    const top = v.discard[v.discard.length - 1]
+    bar = (
+      <ActionBar tone="turn" testId="cabo-actions" prompt={bt('turnPrompt')}>
+        <button type="button" className="ew-btn primary" data-testid="cabo-draw-deck" disabled={pending} onClick={() => void act({type: 'draw', source: 'deck'})}><Layers aria-hidden="true" />{bt('drawDeck')}</button>
+        <button type="button" className="ew-btn" data-testid="cabo-draw-discard" disabled={pending || !top} onClick={() => void act({type: 'draw', source: 'discard'})}><Hand aria-hidden="true" />{bt('drawDiscard', {value: top?.value ?? '—'})}</button>
+        {v.caller === null && <button type="button" className="ew-btn ghost" data-testid="cabo-call" onClick={() => setSel({...EMPTY, call: true})}><Megaphone aria-hidden="true" />{bt('call')}</button>}
+      </ActionBar>
+    )
+  } else if (v.phase === 'drawn' || v.phase === 'exchange') {
+    const ab = drawnValue === null ? null : cabo.ability(drawnValue)
+    bar = (
+      <ActionBar tone="select" testId="cabo-actions"
+        prompt={v.phase === 'exchange' ? bt('exchangePrompt', {value: drawnValue ?? '?'}) : bt('drawnPrompt', {value: drawnValue ?? '?', ability: ab ? bt('drawnAbility', {name: abilityName(ab)}) : ''})}
+        detail={<span>{sel.own.length ? bt('exchangeSel', {n: sel.own.length, value: drawnValue ?? '?'}) : ''} <span className="ew-faint">{bt('exchangeMulti')}</span></span>}>
+        {cancelBtn}
+        <button type="button" className="ew-btn primary" data-testid="cabo-exchange" disabled={pending || sel.own.length === 0} onClick={() => void act({type: 'exchange', cards: sel.own})}><Shuffle aria-hidden="true" />{bt('exchange')}</button>
+        {v.phase === 'drawn' && <button type="button" className="ew-btn" data-testid="cabo-discard" disabled={pending} onClick={() => void act({type: 'discard', useAbility: false})}><Trash2 aria-hidden="true" />{bt('discard')}</button>}
+        {v.phase === 'drawn' && ab && <button type="button" className="ew-btn" data-testid="cabo-discard-ability" disabled={pending} onClick={() => void act({type: 'discard', useAbility: true})}><Eye aria-hidden="true" />{bt('discardAbility', {name: abilityName(ab)})}</button>}
+      </ActionBar>
+    )
+  } else if (v.phase === 'ability') {
+    const a = v.activeAbility!
+    const ready = a === 'peek' ? sel.own.length === 1 : a === 'spy' ? !!sel.other : sel.own.length === 1 && !!sel.other
+    const action = a === 'peek' ? {type: 'peek', card: sel.own[0]} : a === 'spy' ? {type: 'peek', card: sel.other} : {type: 'swap', own: sel.own[0], other: sel.other}
+    bar = (
+      <ActionBar tone="select" testId="cabo-actions" prompt={a === 'peek' ? bt('abilityPeek') : a === 'spy' ? bt('abilitySpy') : bt('abilitySwap')}>
+        {cancelBtn}
+        <button type="button" className="ew-btn ghost" data-testid="cabo-ability-cancel" disabled={pending} onClick={() => void act({type: 'cancelAbility'})}>{bt('abilityCancel')}</button>
+        <button type="button" className="ew-btn primary" data-testid="cabo-ability-confirm" disabled={pending || !ready} onClick={() => void act(action)}><Check aria-hidden="true" />{bt('abilityConfirm')}</button>
+      </ActionBar>
+    )
+  }
+
+  const top = v.discard[v.discard.length - 1]
+  const drawer = v.drawn ? v.current : null
+  const others = v.players.filter(p => p.id !== 0)
+  return (
+    <div className={classNames('gb-board cb-board', `players-${v.players.length}`)} data-phase={v.phase} data-current={v.current} data-round={v.round} style={{'--cb-surface': `url("${asset(`${GAME_ASSETS}/cabo/embedded-surface-1.webp`)}")`} as CSSProperties}>
+      <div className="cb-top">
+        <strong>{bt('round', {n: v.round})}</strong>
+        <span className="ew-chip warn" title={bt('legend')}>{bt('provisional')}</span>
+        {v.caller !== null && !['roundEnd', 'ended'].includes(v.phase) && <span className="ew-chip danger"><Megaphone aria-hidden="true" />{bt('caller', {name: seatName(v.caller), n: v.finalQueue.length})}</span>}
+        {view.log.length > 0 && <span className="gb-recent"><span className="ew-faint">{bt('recent')}</span>{view.log[view.log.length - 1].summary[lang]}</span>}
+      </div>
+      {(v.phase === 'roundEnd' || v.phase === 'ended') && v.roundResults.length > 0 && <ScoreTable rows={v.roundResults} round={v.round} seatName={seatName} bt={bt} />}
+      <div className="cb-opponents">
+        {others.map(p => (
+          <section key={p.id} className={classNames('cb-seat', p.id === v.current && active && !['roundEnd', 'ended'].includes(v.phase) && 'is-current')} data-seat={p.id} aria-label={seatName(p.id)}>
+            <header><span className="ew-seat-dot" style={{background: seatColor(p.id)}} aria-hidden="true" /><strong>{seatName(p.id)}</strong>
+              <span className="cb-total">{bt('total', {n: p.total})}</span>{v.caller === p.id && <span className="ew-chip danger small">{bt('called')}</span>}{p.resetUsed && <small className="ew-faint">{bt('resetUsed')}</small>}</header>
+            {hand(p, 'sm')}
+            {drawer === p.id && v.drawn && <div className="cb-seat-drawn"><small>{bt('drawn')}</small><CaboCard value={v.drawn.value} art={v.drawn.value === null ? null : artFor(v.drawn.value)} back={backUrl} size="sm" lang={lang}
+              label={v.drawn.value === null ? bt('cardDrawnHidden', {name: seatName(p.id)}) : bt('cardDrawn', {value: v.drawn.value})} /></div>}
+          </section>
+        ))}
+      </div>
+      <div className="cb-center">
+        <div className="cb-pile">
+          <CaboCard value={null} art={null} back={backUrl} size="md" lang={lang} label={bt('deck', {n: v.deck.length})} testId="cabo-deck" />
+          <span className="cb-pile-label">{bt('deck', {n: v.deck.length})}</span>
+        </div>
+        <div className="cb-pile">
+          {top ? <CaboCard value={top.value} art={artFor(top.value)} back={backUrl} size="md" lang={lang} label={bt('cardDiscard', {value: top.value})} testId="cabo-discard-top" /> : <span className="cb-slot-empty size-md" />}
+          <span className="cb-pile-label">{bt('discardPile', {n: v.discard.length})}</span>
+        </div>
+        {drawer === 0 && v.drawn && <div className="cb-pile is-drawn">
+          <CaboCard value={v.drawn.value} art={v.drawn.value === null ? null : artFor(v.drawn.value)} back={backUrl} size="md" lang={lang} reveal label={v.drawn.value === null ? bt('drawn') : bt('cardDrawn', {value: v.drawn.value})} testId="cabo-drawn" />
+          <span className="cb-pile-label">{bt('drawn')}</span>
+        </div>}
+        <p className="cb-legend ew-faint">{bt('legend')}</p>
+      </div>
+      <section className={classNames('cb-me', v.current === 0 && active && !['roundEnd', 'ended'].includes(v.phase) && 'is-current')} aria-label={seatName(0)} data-seat={0}>
+        <header><span className="ew-seat-dot" style={{background: seatColor(0)}} aria-hidden="true" /><strong>{seatName(0)}</strong><span className="cb-total">{bt('total', {n: me.total})}</span>
+          {v.caller === 0 && <span className="ew-chip danger small">{bt('called')}</span>}{me.resetUsed && <small className="ew-faint">{bt('resetUsed')}</small>}</header>
+        {hand(me, 'lg')}
+      </section>
+      {bar}
+      <span hidden data-testid="cabo-state" data-phase={v.phase} data-current={v.current} data-drawn={drawnValue ?? ''} data-ability={v.activeAbility ?? ''} data-totals={v.players.map(p => p.total).join(',')} data-caller={v.caller ?? ''} />
+    </div>
+  )
+}
+
+function ScoreTable({rows, round, seatName, bt}: {rows: CaboScoreRow[]; round: number; seatName: (s: number) => string; bt: (k: string, vars?: Record<string, string | number>) => string}) {
+  return (
+    <section className="cb-scores" aria-labelledby="cabo-score-title" data-testid="cabo-scores">
+      <h3 id="cabo-score-title">{bt('roundEnd', {n: round})}</h3>
+      <table>
+        <thead><tr><th scope="col">{bt('col_player')}</th><th scope="col">{bt('col_cards')}</th><th scope="col">{bt('col_sum')}</th><th scope="col">{bt('col_gain')}</th><th scope="col">{bt('col_total')}</th></tr></thead>
+        <tbody>{rows.map(r => (
+          <tr key={r.player}>
+            <th scope="row"><span className="ew-seat-dot" style={{background: seatColor(r.player)}} aria-hidden="true" /> {seatName(r.player)}</th>
+            <td className="cb-values">{r.values.map((x, i) => <span key={i} className="cb-mini-value">{x}{(x === 6 || x === 9) && <i className="cb-underline" />}</span>)}</td>
+            <td>{r.sum}</td>
+            <td>+{r.gain} <small className="ew-faint">{bt(`reason_${r.reason}`)}</small></td>
+            <td>{r.before ?? '—'} → <strong>{r.after ?? '—'}</strong>{r.reset && <small className="ew-faint"> · {bt('resetNote')}</small>}</td>
+          </tr>
+        ))}</tbody>
+      </table>
+    </section>
+  )
+}
diff --git a/everwith-claude-frontend/src/features/games/boards/RoyaleBoard.tsx b/everwith-claude-frontend/src/features/games/boards/RoyaleBoard.tsx
new file mode 100644
index 00000000..b40e70ec
--- /dev/null
+++ b/everwith-claude-frontend/src/features/games/boards/RoyaleBoard.tsx
@@ -0,0 +1,273 @@
+import {useMemo} from 'react'
+import type {CSSProperties, ReactNode} from 'react'
+import {Check, Dices, SkipForward, X, Coins, Flag} from 'lucide-react'
+import * as royale from '../../../games/engines/royale/engine'
+import {useI18n} from '../../../app/i18n'
+import {classNames} from '../../../lib/util'
+import type {Lang} from '../../../lib/util'
+import {ActionBar, GAME_ASSETS, cropStyle, formatMoney, seatColor, useBoardAsset, useBoardText, useRevisionState} from './shared'
+import type {BoardProps} from './shared'
+
+/**
+ * Royale (Las Vegas Royale introductory profile). Everything numeric — dice pips, Biggy
+ * weight, money values, chips, influence — is drawn by code from the seat-0 projection.
+ * Animation only replays faces the engine already committed; it never draws new numbers.
+ */
+type PlayerView = {id: number; chips: number; roundGain: number; passes: number; earnings: ({id: string; value: number} | null)[]; cash: number | null; wealth: number | null}
+type RoyaleView = Omit<royale.State, 'rng' | 'deck' | 'players'> & {bankCount: number; players: PlayerView[]}
+type Selection = null | {kind: 'place'; face: number} | {kind: 'pass'}
+
+const CASINOS: {zh: string; en: string; color: string}[] = [
+  {zh: '奇迹', en: 'Miracle', color: '#77c6ac'}, {zh: '帝王', en: 'Kings', color: '#dabe76'}, {zh: '海滨', en: 'Marina', color: '#6abdd9'},
+  {zh: '广场', en: 'Plaza', color: '#da839d'}, {zh: '埃及艳后', en: 'Cleopatra', color: '#ac9bd9'}, {zh: '日落', en: 'Sunset', color: '#ebaa76'},
+]
+const NEUTRAL = '#9aa1ab'
+const PIPS: Record<number, number[]> = {1: [4], 2: [2, 6], 3: [2, 4, 6], 4: [0, 2, 6, 8], 5: [0, 2, 4, 6, 8], 6: [0, 2, 3, 5, 6, 8]}
+
+const TEXT = {
+  zh: {
+    round: '第 {n}/3 轮', paid: '已派彩 {n}/6', bank: '钱堆 {n} 张', pool: '筹码池 {n}', neutral: '中立', biggy: 'Biggy（影响力 2）',
+    die: '{owner} 的骰子 {face} 点', dieBlank: '{owner} 的骰子（未掷）', influence: '影响力 {n}', tieOut: '并列出局', lead: '暂列第 {n}', paidOut: '已派彩',
+    noWinner: '无人获奖，钞票回到钱堆', nextPayout: '下一个派彩', notes: '钱卡', casino: '{n} 号赌场 · {name}', you: '你',
+    chips: '筹码 {n}', diceLeft: '剩 {n} 骰', biggyLeft: '含 Biggy', hidden: '{n} 张钞票（金额不公开）', cash: '现金 {money}', wealth: '总值 {money}',
+    arenaYou: '你掷出的骰子', arenaOther: '{name} 掷出的骰子', arenaEmpty: '牌桌中央', waitRoll: '等待 {name} 掷骰', yourSupply: '你还有 {n} 颗骰子未放置',
+    roll: '掷 {n} 颗骰子', rollPrompt: '轮到你：掷出剩下的 {n} 颗骰子。', choosePrompt: '选择一个点数：同点数的骰子会整组放进对应赌场。',
+    faceBtn: '{face} 点 ×{count}', faceInf: '影响力 {n}', pass: '付 1 筹码跳过', passPrompt: '付 1 筹码跳过本次放置：骰子收回，下次轮到你时再掷。',
+    placePrompt: '把 {count} 颗 {face} 点放进 {casino}（影响力 +{inf}）', confirmPlace: '确认放置', confirmPass: '确认跳过', cancel: '取消选择',
+    preview: '放入后：', previewWin: '你将暂列第 {rank}，可得 {money}', previewTie: '你会与他人并列而出局', previewOut: '你暂时拿不到这里的钱卡',
+    payoutPrompt: '轮到你推进派彩：{casino}', payout: '派彩', nextRound: '开始第 {n} 轮', roundEndPrompt: '第 {n} 轮的六个赌场都已派彩。',
+    endedPrompt: '三轮结束，结果已锁定。', otherTurn: '{name}：{phase}', phase_roll: '掷骰', phase_choose: '选择放置', phase_payout: '派彩中', phase_roundEnd: '本轮结束', phase_ended: '已结束',
+    abandoned: '本局已放弃（只读）', paused: '暂停中：可以先聊聊，再点“继续”。', place: '放到这里', placeHint: '{count} 颗 {face} 点',
+    recent: '最新：', lastPayout: '{casino} 派彩', tieRule: '正影响力相同的玩家都出局，其余按影响力领钱。', biggyRule: 'Biggy 计 2 点影响力。',
+    yourNotes: '你的钱卡', none: '暂无',
+  },
+  en: {
+    round: 'Round {n}/3', paid: 'Paid {n}/6', bank: 'Bank {n} notes', pool: 'Chip pool {n}', neutral: 'Neutral', biggy: 'Biggy (influence 2)',
+    die: '{owner}\'s die showing {face}', dieBlank: '{owner}\'s die (not rolled)', influence: 'Influence {n}', tieOut: 'tied – out', lead: 'now #{n}', paidOut: 'Paid',
+    noWinner: 'No winner; notes return to the bank', nextPayout: 'Next payout', notes: 'Notes', casino: 'Casino {n} · {name}', you: 'You',
+    chips: 'Chips {n}', diceLeft: '{n} dice left', biggyLeft: 'incl. Biggy', hidden: '{n} notes (amount hidden)', cash: 'Cash {money}', wealth: 'Total {money}',
+    arenaYou: 'Your roll', arenaOther: '{name}\'s roll', arenaEmpty: 'Table centre', waitRoll: 'Waiting for {name} to roll', yourSupply: 'You still have {n} dice to place',
+    roll: 'Roll {n} dice', rollPrompt: 'Your turn: roll your remaining {n} dice.', choosePrompt: 'Pick a number: all dice showing it go to that casino together.',
+    faceBtn: '{face}s ×{count}', faceInf: 'influence {n}', pass: 'Pay 1 chip to skip', passPrompt: 'Pay 1 chip to skip this placement: dice return and you roll again next turn.',
+    placePrompt: 'Place {count} × {face} in {casino} (influence +{inf})', confirmPlace: 'Confirm placement', confirmPass: 'Confirm skip', cancel: 'Cancel selection',
+    preview: 'After placing:', previewWin: 'you would be #{rank} and take {money}', previewTie: 'you would tie and be excluded', previewOut: 'you would not reach a note here yet',
+    payoutPrompt: 'Your turn to run the payout: {casino}', payout: 'Pay out', nextRound: 'Start round {n}', roundEndPrompt: 'All six casinos of round {n} have paid out.',
+    endedPrompt: 'Three rounds done; the result is locked.', otherTurn: '{name}: {phase}', phase_roll: 'rolling', phase_choose: 'choosing', phase_payout: 'payouts', phase_roundEnd: 'round over', phase_ended: 'finished',
+    abandoned: 'Game abandoned (read-only)', paused: 'Paused: chat first, then press Continue.', place: 'Place here', placeHint: '{count} × {face}',
+    recent: 'Latest: ', lastPayout: '{casino} pays out', tieRule: 'Players tied on positive influence are all excluded; the rest are paid by influence.', biggyRule: 'Biggy counts as 2 influence.',
+    yourNotes: 'Your notes', none: 'none',
+  },
+}
+
+const ownerColor = (o: royale.Owner) => o === 'neutral' ? NEUTRAL : seatColor(o)
+function pipColor(hex: string) {
+  const n = parseInt(hex.slice(1), 16), r = n >> 16, g = (n >> 8) & 255, b = n & 255
+  return (r * 299 + g * 587 + b * 114) / 1000 > 150 ? '#1b1410' : '#fff8ea'
+}
+
+export function Die({face, color, big = false, size = 'md', className, label, style}: {face: number | null; color: string; big?: boolean; size?: 'sm' | 'md' | 'lg'; className?: string; label: string; style?: CSSProperties}) {
+  const pips = face ? PIPS[face] : []
+  return (
+    <span className={classNames('rb-die', big && 'is-big', `size-${size}`, face === null && 'is-blank', className)} style={{'--die': color, '--pip': pipColor(color), ...style} as CSSProperties} role="img" aria-label={label}>
+      {Array.from({length: 9}, (_, i) => <i key={i} className={pips.includes(i) ? 'pip' : undefined} />)}
+      {big && <b className="rb-biggy" aria-hidden="true">×2</b>}
+    </span>
+  )
+}
+
+const NOTE_TINTS: Record<number, string> = {30000: '#a9b7a0', 40000: '#9fb3c4', 50000: '#c8b48c', 60000: '#c9a2a0', 70000: '#b5a6c6', 80000: '#c2b26e', 90000: '#9cc0b6', 100000: '#d9b06a'}
+function Note({value, lang, ornament, size = 'md', highlight}: {value: number; lang: Lang; ornament: string; size?: 'sm' | 'md'; highlight?: boolean}) {
+  return (
+    <span className={classNames('rb-note', `size-${size}`, highlight && 'is-highlight')} style={{'--note-tint': NOTE_TINTS[value] ?? '#c8b48c'} as CSSProperties} aria-label={`$${formatMoney(value, lang)}`}>
+      <span className="rb-note-art" style={cropStyle(ornament, 1536, 1024, [0, 0, 1, 1], 2.1)} aria-hidden="true" />
+      <b aria-hidden="true">{formatMoney(value, lang)}</b>
+    </span>
+  )
+}
+
+function Chips({n, label}: {n: number; label: string}) {
+  return <span className="rb-chips" role="img" aria-label={label}>{Array.from({length: Math.min(n, 8)}, (_, i) => <i key={i} />)}{n > 8 && <small>+{n - 8}</small>}<b aria-hidden="true">{n}</b></span>
+}
+
+export function RoyaleBoard({view, pending, act, seatName, readOnly}: BoardProps) {
+  const {lang} = useI18n()
+  const bt = useBoardText(TEXT)
+  const asset = useBoardAsset()
+  const v = view.player_view as RoyaleView
+  const [sel, setSel] = useRevisionState<Selection>(null, view.revision)
+  const active = view.lifecycle === 'active'
+  const myTurn = active && !readOnly && v.current === 0
+  const ownerName = (o: royale.Owner) => o === 'neutral' ? bt('neutral') : seatName(o)
+  const casinoLabel = (i: number) => bt('casino', {n: i + 1, name: CASINOS[i][lang]})
+  const atlas = asset(`${GAME_ASSETS}/royale/generated/casino-scene-atlas-r7.png`)
+  const ornament = asset(`${GAME_ASSETS}/royale/generated/fictional-game-token-ornament-20261004.png`)
+
+  const last = v.history[v.history.length - 1]
+  const lastEvent = last?.events[0]
+  const rolledNow = new Set(last?.action.type === 'roll' ? (lastEvent?.dice ?? []).map(d => d.id) : [])
+  const landedNow = new Set(last?.action.type === 'place' ? (lastEvent?.dice ?? []).map(d => d.id) : [])
+  const paidNow = last?.action.type === 'payout' ? lastEvent?.result?.casino ?? null : null
+
+  const arena = v.dice.filter(d => d.location === 'arena')
+  const groups = useMemo(() => {
+    const mine = v.dice.filter(d => d.owner === 0 && d.location === 'arena')
+    const by = new Map<number, royale.Die[]>()
+    for (const d of mine) by.set(d.face!, [...(by.get(d.face!) ?? []), d])
+    return [...by.entries()].sort((a, b) => a[0] - b[0]).map(([face, dice]) => ({face, dice, influence: dice.reduce((n, d) => n + royale.weight(d), 0)}))
+  }, [v.dice])
+  const remainingMine = royale.remaining(v, 0)
+  const preview = useMemo(() => {
+    if (sel?.kind !== 'place') return null
+    const next = structuredClone(v)
+    for (const d of next.dice) if (d.owner === 0 && d.location === 'arena' && d.face === sel.face) { d.location = 'casino'; d.casino = sel.face - 1 }
+    return royale.casinoResult(next as unknown as royale.State, sel.face - 1)
+  }, [sel, v])
+
+  const submit = async () => {
+    if (!sel || pending) return
+    await act(sel.kind === 'place' ? {type: 'place', face: sel.face} : {type: 'pass'})
+  }
+
+  // ----- action strip -----
+  let bar: ReactNode
+  if (view.lifecycle === 'abandoned') bar = <ActionBar prompt={bt('abandoned')} />
+  else if (v.phase === 'ended' || view.lifecycle === 'ended') bar = <ActionBar prompt={bt('endedPrompt')} tone="turn" />
+  else if (!myTurn) bar = <ActionBar prompt={view.ai_hold ? bt('paused') : bt('otherTurn', {name: seatName(v.current), phase: bt(`phase_${v.phase}`)})} />
+  else if (v.phase === 'roll') bar = (
+    <ActionBar prompt={bt('rollPrompt', {n: remainingMine.length})} tone="turn" testId="royale-actions">
+      <button type="button" className="ew-btn primary" data-testid="royale-roll" disabled={pending} onClick={() => void act({type: 'roll'})}><Dices aria-hidden="true" />{bt('roll', {n: remainingMine.length})}</button>
+    </ActionBar>
+  )
+  else if (v.phase === 'choose' && sel?.kind === 'place') {
+    const g = groups.find(x => x.face === sel.face)!
+    const rankIndex = preview ? preview.awards.findIndex(a => a.owner === 0) : -1
+    const excluded = preview?.excluded.includes(0)
+    bar = (
+      <ActionBar tone="select" testId="royale-actions" prompt={bt('placePrompt', {count: g.dice.length, face: sel.face, casino: casinoLabel(sel.face - 1), inf: g.influence})}
+        detail={<span>{bt('preview')} {excluded ? bt('previewTie') : rankIndex >= 0 ? bt('previewWin', {rank: rankIndex + 1, money: formatMoney(preview!.awards[rankIndex].value, lang)}) : bt('previewOut')}</span>}>
+        <button type="button" className="ew-btn ghost" data-testid="royale-cancel" onClick={() => setSel(null)}><X aria-hidden="true" />{bt('cancel')}</button>
+        <button type="button" className="ew-btn primary" data-testid="royale-confirm" disabled={pending} onClick={() => void submit()}><Check aria-hidden="true" />{bt('confirmPlace')}</button>
+      </ActionBar>
+    )
+  } else if (v.phase === 'choose' && sel?.kind === 'pass') bar = (
+    <ActionBar tone="select" prompt={bt('passPrompt')} testId="royale-actions">
+      <button type="button" className="ew-btn ghost" data-testid="royale-cancel" onClick={() => setSel(null)}><X aria-hidden="true" />{bt('cancel')}</button>
+      <button type="button" className="ew-btn primary" data-testid="royale-confirm" disabled={pending} onClick={() => void submit()}><Check aria-hidden="true" />{bt('confirmPass')}</button>
+    </ActionBar>
+  )
+  else if (v.phase === 'choose') bar = (
+    <ActionBar prompt={bt('choosePrompt')} tone="turn" testId="royale-actions" detail={<span className="ew-faint">{bt('biggyRule')} {bt('tieRule')}</span>}>
+      {groups.map(g => (
+        <button key={g.face} type="button" className="ew-btn rb-face-btn" data-testid={`royale-face-${g.face}`} onClick={() => setSel({kind: 'place', face: g.face})}
+          aria-label={`${bt('faceBtn', {face: g.face, count: g.dice.length})} · ${bt('faceInf', {n: g.influence})} → ${casinoLabel(g.face - 1)}`}>
+          <Die face={g.face} color={seatColor(0)} size="sm" label="" />
+          <span>{bt('faceBtn', {face: g.face, count: g.dice.length})}<small>{bt('faceInf', {n: g.influence})} · {CASINOS[g.face - 1][lang]}</small></span>
+        </button>
+      ))}
+      {v.players[0].chips > 0 && <button type="button" className="ew-btn ghost" data-testid="royale-pass" onClick={() => setSel({kind: 'pass'})}><SkipForward aria-hidden="true" />{bt('pass')}</button>}
+    </ActionBar>
+  )
+  else if (v.phase === 'payout') bar = (
+    <ActionBar tone="turn" prompt={bt('payoutPrompt', {casino: casinoLabel(v.payoutIndex)})} testId="royale-actions">
+      <button type="button" className="ew-btn primary" data-testid="royale-payout" disabled={pending} onClick={() => void act({type: 'payout'})}><Coins aria-hidden="true" />{bt('payout')}</button>
+    </ActionBar>
+  )
+  else if (v.phase === 'roundEnd') bar = (
+    <ActionBar tone="turn" prompt={bt('roundEndPrompt', {n: v.round})} testId="royale-actions">
+      <button type="button" className="ew-btn primary" data-testid="royale-next" disabled={pending} onClick={() => void act({type: 'nextRound'})}><Flag aria-hidden="true" />{bt('nextRound', {n: v.round + 1})}</button>
+    </ActionBar>
+  )
+
+  const arenaOwner = arena[0]?.owner
+  return (
+    <div className="gb-board rb-board" data-phase={v.phase} data-current={v.current} data-round={v.round}>
+      <div className="rb-top">
+        <span className="rb-round"><strong>{bt('round', {n: v.round})}</strong></span>
+        <span className="ew-chip">{bt('paid', {n: v.payoutIndex})}</span>
+        <span className="ew-chip">{bt('bank', {n: v.bankCount})}</span>
+        <span className="ew-chip">{bt('pool', {n: v.chipPool})}</span>
+        {view.log.length > 0 && <span className="gb-recent" aria-live="off"><span className="ew-faint">{bt('recent')}</span>{view.log[view.log.length - 1].summary[lang]}</span>}
+      </div>
+
+      <div className="rb-casinos">
+        {v.casinos.map((c, i) => {
+          const dice = v.dice.filter(d => d.location === 'casino' && d.casino === i)
+          const owners = [...new Set(dice.map(d => d.owner))]
+          const done = i < v.payoutIndex && ['payout', 'roundEnd', 'ended'].includes(v.phase)
+          const result = done ? v.results[i] : null
+          const standing = !done && c.notes.length ? royale.casinoResult(v as unknown as royale.State, i) : null
+          const selectable = myTurn && v.phase === 'choose' && groups.some(g => g.face === i + 1)
+          const selected = sel?.kind === 'place' && sel.face === i + 1
+          const counts = (result ?? standing)?.counts ?? owners.map(o => ({owner: o, count: dice.filter(d => d.owner === o).reduce((n, d) => n + royale.weight(d), 0)}))
+          const excluded = (result ?? standing)?.excluded ?? []
+          const awards = (result ?? standing)?.awards ?? []
+          return (
+            <section key={i} className={classNames('rb-casino', selected && 'is-selected', selectable && 'is-selectable', done && 'is-done', paidNow === i && 'is-paying', v.phase === 'payout' && v.payoutIndex === i && 'is-next')}
+              style={{'--casino': CASINOS[i].color} as CSSProperties} aria-label={casinoLabel(i)} data-casino={i}>
+              <div className="rb-casino-art" style={cropStyle(atlas, 1024, 1536, [(i % 2) / 2, Math.floor(i / 2) / 3, 1 / 2, 1 / 3], 1.25)} aria-hidden="true" />
+              <header className="rb-casino-head">
+                <Die face={i + 1} color={CASINOS[i].color} size="sm" label={`${i + 1}`} />
+                <strong>{CASINOS[i][lang]}</strong>
+                {v.phase === 'payout' && v.payoutIndex === i && <span className="ew-chip warn">{bt('nextPayout')}</span>}
+                {done && <span className="ew-chip ok">{bt('paidOut')}</span>}
+              </header>
+              <div className="rb-casino-notes" aria-label={bt('notes')}>
+                {done
+                  ? (result!.awards.length ? result!.awards.map(a => <span key={a.note} className="rb-award"><span className="ew-seat-dot" style={{background: ownerColor(a.owner)}} aria-hidden="true" />{ownerName(a.owner)} <Note value={a.value} lang={lang} ornament={ornament} size="sm" highlight={paidNow === i} /></span>) : <span className="ew-faint ew-small">{bt('noWinner')}</span>)
+                  : c.notes.map(id => <Note key={id} value={royale.note(id).value} lang={lang} ornament={ornament} />)}
+              </div>
+              <ul className="rb-influence">
+                {counts.filter(x => x.count > 0).sort((a, b) => b.count - a.count).map(x => {
+                  const rank = awards.findIndex(a => a.owner === x.owner)
+                  const own = dice.filter(d => d.owner === x.owner)
+                  return (
+                    <li key={String(x.owner)} className={classNames(excluded.includes(x.owner) && 'is-excluded')}>
+                      <span className="rb-own-dice">{own.map(d => <Die key={landedNow.has(d.id) ? `${d.id}-${view.revision}` : d.id} face={d.face} color={ownerColor(d.owner)} big={d.kind === 'big'} size="sm" className={landedNow.has(d.id) ? 'is-landing' : undefined} label={`${bt('die', {owner: ownerName(d.owner), face: d.face ?? ''})}${d.kind === 'big' ? ` · ${bt('biggy')}` : ''}`} />)}</span>
+                      <span className="rb-own-name">{ownerName(x.owner)}</span>
+                      <b>{bt('influence', {n: x.count})}</b>
+                      {excluded.includes(x.owner) ? <span className="ew-chip danger">{bt('tieOut')}</span> : rank >= 0 && !done ? <span className="ew-chip">{bt('lead', {n: rank + 1})}</span> : null}
+                    </li>
+                  )
+                })}
+              </ul>
+              {selectable && !selected && (() => {
+                const g = groups.find(x => x.face === i + 1)!
+                return <button type="button" className="rb-casino-pick" data-testid={`royale-casino-${i}`} onClick={() => setSel({kind: 'place', face: i + 1})}>{bt('place')} · {bt('placeHint', {count: g.dice.length, face: i + 1})}</button>
+              })()}
+            </section>
+          )
+        })}
+      </div>
+
+      <div className={classNames('rb-arena', arena.length > 0 && 'has-dice')} aria-label={arenaOwner === undefined ? bt('arenaEmpty') : arenaOwner === 0 ? bt('arenaYou') : bt('arenaOther', {name: ownerName(arenaOwner)})}>
+        <span className="rb-arena-label">{arenaOwner === undefined ? (active && v.phase === 'roll' ? bt('waitRoll', {name: seatName(v.current)}) : bt('arenaEmpty')) : arenaOwner === 0 ? bt('arenaYou') : bt('arenaOther', {name: ownerName(arenaOwner)})}</span>
+        <div className="rb-arena-dice">
+          {arena.slice().sort((a, b) => (a.face ?? 0) - (b.face ?? 0)).map((d, k) => (
+            <Die key={rolledNow.has(d.id) ? `${d.id}-${view.revision}` : d.id} face={d.face} color={ownerColor(d.owner)} big={d.kind === 'big'} size="lg"
+              className={classNames(rolledNow.has(d.id) && 'is-rolling', sel?.kind === 'place' && d.owner === 0 && d.face === sel.face && 'is-chosen')}
+              style={{'--roll-delay': `${(k % 4) * 45}ms`} as CSSProperties}
+              label={`${bt('die', {owner: ownerName(d.owner), face: d.face ?? ''})}${d.kind === 'big' ? ` · ${bt('biggy')}` : ''}`} />
+          ))}
+          {arena.length === 0 && myTurn && v.phase === 'roll' && remainingMine.map(d => <Die key={d.id} face={null} color={seatColor(0)} big={d.kind === 'big'} size="lg" label={bt('dieBlank', {owner: seatName(0)})} />)}
+        </div>
+      </div>
+
+      <ol className="rb-players" aria-label="players">
+        {v.players.map(p => {
+          const left = royale.remaining(v, p.id)
+          return (
+            <li key={p.id} className={classNames('rb-player', p.id === v.current && active && 'is-current', p.id === 0 && 'is-me')} data-seat={p.id}>
+              <span className="ew-seat-dot" style={{background: seatColor(p.id)}} aria-hidden="true" />
+              <strong className="rb-player-name">{seatName(p.id)}</strong>
+              <Chips n={p.chips} label={bt('chips', {n: p.chips})} />
+              <span className="rb-left">{bt('diceLeft', {n: left.length})}{left.some(d => d.kind === 'big') ? ` · ${bt('biggyLeft')}` : ''}</span>
+              <span className="rb-money">{p.cash !== null ? <>{bt('cash', {money: formatMoney(p.cash, lang)})}{p.wealth !== null && v.phase === 'ended' ? ` · ${bt('wealth', {money: formatMoney(p.wealth, lang)})}` : ''}</> : bt('hidden', {n: p.earnings.length})}</span>
+              {p.id === 0 && <span className="rb-my-notes" aria-label={bt('yourNotes')}>{p.earnings.length ? p.earnings.map((e, k) => e && <Note key={`${e.id}-${k}`} value={e.value} lang={lang} ornament={ornament} size="sm" />) : <small className="ew-faint">{bt('yourNotes')}：{bt('none')}</small>}</span>}
+            </li>
+          )
+        })}
+      </ol>
+      {bar}
+    </div>
+  )
+}
diff --git a/everwith-claude-frontend/src/features/games/boards/SplendorBoard.tsx b/everwith-claude-frontend/src/features/games/boards/SplendorBoard.tsx
new file mode 100644
index 00000000..6e02d38c
--- /dev/null
+++ b/everwith-claude-frontend/src/features/games/boards/SplendorBoard.tsx
@@ -0,0 +1,314 @@
+import {useMemo, useState} from 'react'
+import type {CSSProperties, ReactNode} from 'react'
+import {BookmarkPlus, Check, Crown, ShoppingBag, Undo2, X} from 'lucide-react'
+import * as rules from '../../../games/engines/splendor/splendor/rules'
+import type {SplendorAction, SplendorColor, SplendorGem, SplendorPlayer, SplendorState} from '../../../games/engines/splendor/splendor/rules'
+import {useI18n} from '../../../app/i18n'
+import {classNames} from '../../../lib/util'
+import {ActionBar, cropStyle, seatColor, useBoardAsset, useBoardText, useRevisionState} from './shared'
+import type {BoardProps} from './shared'
+import {GEM_IMAGES, GEM_TONES, TABLE_CLOTH, TIER_BACKS, cardArt, nobleArt} from './splendor-art'
+
+/**
+ * Splendor. The board renders the seat-0 projection; legality comes from the frozen
+ * engine's own `legalActions` run on that projection (saved games keep their own rules
+ * profile — a legacy v1 save is never upgraded). Unknown blind reserves of other seats
+ * are tier backs only: no card id, no click target, no tooltip.
+ */
+type ProjReserve = {card: string | null; tier: 1 | 2 | 3 | null; hidden: boolean}
+type ProjPlayer = Omit<SplendorPlayer, 'reserved'> & {reserved: ProjReserve[]}
+type SplendorView = Omit<SplendorState, 'players' | 'decks'> & {decks: Record<1 | 2 | 3, number>; players: ProjPlayer[]}
+type Sel = null
+  | {kind: 'take'; colors: SplendorColor[]}
+  | {kind: 'card'; id: string; from: 'market' | 'reserve'}
+  | {kind: 'deck'; tier: 1 | 2 | 3}
+  | {kind: 'return'; colors: SplendorGem[]}
+  | {kind: 'noble'; id: string}
+
+const COLORS = rules.COLORS as SplendorColor[]
+const ALL = rules.ALL as SplendorGem[]
+const POSITIONS: Record<number, string[]> = {2: ['bottom', 'top'], 3: ['bottom', 'left', 'right'], 4: ['bottom', 'left', 'top', 'right']}
+const CARD_ASPECT = 63 / 88
+
+const TEXT = {
+  zh: {
+    diamond: '钻石', sapphire: '蓝宝石', emerald: '祖母绿', ruby: '红宝石', onyx: '缟玛瑙', gold: '黄金',
+    round: '第 {n} 回合', ending: '已有人达到 15 分：补齐本轮后结算', v2: '2024 基础规则 v2', score: '{n} 分', tokens: '宝石 {n}/10', bonus: '永久折扣',
+    reserved: '预留 {n}/3', nobles: '贵族', noblesN: '贵族 {n}', bank: '公共宝石池', deck: '{tier} 级牌堆 · 剩 {n} 张', deckShort: '剩 {n}', tier: '{tier} 级',
+    you: '你', hiddenReserve: '暗预留（{tier} 级牌背，内容不公开）', publicReserve: '公开预留', emptySlot: '空预留位',
+    card: '{tier} 级 · {gem}折扣 +1 · {points} 分 · 成本 {cost}', cardName: '「{name}」', noble: '贵族 · 3 分 · 需要 {cost}',
+    affordable: '可购买', missing: '缺 {n}', price: '你的价格：{cost}', pay: '支付：{pay}', payNothing: '无需支付宝石', goldNote: '（含 {n} 枚黄金补差）',
+    reserveGold: '预留后得到 1 枚黄金', reserveNoGold: '黄金已空：预留不得黄金', reserveFull: '预留已满 3 张',
+    takePrompt: '拿取：{list}', takeHint3: '有三种以上颜色时，拿三种不同颜色各一枚；或在某色至少 4 枚时拿两枚同色。', takeMore: '再选 {n} 种不同颜色。', takeRule: '这个组合不合规则：{why}',
+    takeDoubleNeed4: '拿两枚同色前，公共池里该色至少要有 4 枚', takeGeneric: '请按池中现有颜色选择', takeOk: '可以确认；也可以改选。',
+    turnPrompt: '轮到你：点公共池宝石拿取，或点一张发展卡购买 / 预留，或点牌堆盲预留。', otherTurn: '{name} 正在行动…', paused: '暂停中：可以先聊聊，再点“继续”。',
+    buy: '购买', reserve: '预留', blind: '盲预留 {tier} 级', confirmTake: '确认拿取', cancel: '取消', blindPrompt: '从 {tier} 级牌堆顶盲预留一张（只有你能看到）。',
+    returnPrompt: '你有 {n} 枚宝石，需要归还 {k} 枚（点你的宝石选择）。', returnList: '归还：{list}', confirmReturn: '确认归还', clear: '清空',
+    noblePrompt: '你同时满足多位贵族的条件：选择本回合来访的一位。', confirmNoble: '请这位贵族来访', ended: '本局已结束，结果已锁定。', abandoned: '本局已放弃（只读）',
+    noLegal: '当前没有合法动作。', legacy: '旧版 v1 存档：保持原规则与布局，不自动升级。', recent: '最新：', cardsBought: '已购 {n} 张', total: '共 {n}',
+  },
+  en: {
+    diamond: 'diamond', sapphire: 'sapphire', emerald: 'emerald', ruby: 'ruby', onyx: 'onyx', gold: 'gold',
+    round: 'Round {n}', ending: 'Someone reached 15: the round finishes, then scoring', v2: '2024 base rules v2', score: '{n} pts', tokens: 'Gems {n}/10', bonus: 'Bonuses',
+    reserved: 'Reserved {n}/3', nobles: 'Nobles', noblesN: 'Nobles {n}', bank: 'Gem supply', deck: 'Tier {tier} deck · {n} left', deckShort: '{n} left', tier: 'Tier {tier}',
+    you: 'You', hiddenReserve: 'Blind reserve (tier {tier} back, contents hidden)', publicReserve: 'Public reserve', emptySlot: 'Empty reserve slot',
+    card: 'Tier {tier} · {gem} bonus +1 · {points} pts · cost {cost}', cardName: '', noble: 'Noble · 3 pts · needs {cost}',
+    affordable: 'Affordable', missing: 'Short {n}', price: 'Your price: {cost}', pay: 'Pay: {pay}', payNothing: 'No gems needed', goldNote: ' (incl. {n} gold)',
+    reserveGold: 'Reserving gives you 1 gold', reserveNoGold: 'No gold left: reserving gives no gold', reserveFull: 'You already reserve 3 cards',
+    takePrompt: 'Take: {list}', takeHint3: 'With 3+ colours available take three different colours, or two of one colour that has at least 4.', takeMore: 'Pick {n} more different colour(s).', takeRule: 'Not allowed: {why}',
+    takeDoubleNeed4: 'two of one colour needs at least 4 in the supply', takeGeneric: 'choose from the colours in the supply', takeOk: 'Ready to confirm, or change it.',
+    turnPrompt: 'Your turn: pick gems from the supply, or a card to buy / reserve, or a deck to reserve blind.', otherTurn: '{name} is moving…', paused: 'Paused: chat first, then press Continue.',
+    buy: 'Buy', reserve: 'Reserve', blind: 'Blind-reserve tier {tier}', confirmTake: 'Confirm take', cancel: 'Cancel', blindPrompt: 'Reserve the top card of the tier {tier} deck (only you will see it).',
+    returnPrompt: 'You hold {n} gems and must return {k} (click your gems).', returnList: 'Return: {list}', confirmReturn: 'Confirm return', clear: 'Clear',
+    noblePrompt: 'You meet several nobles: choose the one who visits this turn.', confirmNoble: 'Receive this noble', ended: 'Game over; the result is locked.', abandoned: 'Game abandoned (read-only)',
+    noLegal: 'No legal action right now.', legacy: 'Legacy v1 save: original rules and layout kept, never upgraded.', recent: 'Latest: ', cardsBought: '{n} cards bought', total: '{n} total',
+  },
+}
+
+const toEngine = (v: SplendorView) => ({...v, players: v.players.map(p => ({...p, reserved: p.reserved.map(r => r.card)}))}) as unknown as SplendorState
+const sortedKey = (cs: string[]) => [...cs].sort().join('+')
+const subMultiset = (a: string[], b: string[]) => { const rest = [...b]; for (const x of a) { const i = rest.indexOf(x); if (i < 0) return false; rest.splice(i, 1) } return true }
+
+function GemImg({gem, className}: {gem: SplendorGem; className?: string}) {
+  const asset = useBoardAsset()
+  return <img className={classNames('sp-gem-img', className)} src={asset(GEM_IMAGES[gem])} alt="" aria-hidden="true" draggable={false} />
+}
+function Pips({cost, className}: {cost: Partial<Record<SplendorColor, number>>; className?: string}) {
+  return <span className={classNames('sp-pips', className)} aria-hidden="true">{COLORS.filter(c => (cost[c] ?? 0) > 0).map(c => <span key={c} className="sp-pip" style={{'--pip-bg': GEM_TONES[c].bg, '--pip-ink': GEM_TONES[c].ink} as CSSProperties}>{cost[c]}</span>)}</span>
+}
+
+export function SplendorBoard({view, pending, act, seatName, readOnly}: BoardProps) {
+  const {lang} = useI18n()
+  const bt = useBoardText(TEXT)
+  const asset = useBoardAsset()
+  const v = view.player_view as SplendorView
+  const legacy = view.profile === 'splendor-legacy-v1'
+  const ev = useMemo(() => toEngine(v), [v])
+  const active = view.lifecycle === 'active'
+  const myTurn = active && !readOnly && v.current === 0 && !v.ended
+  const me = ev.players[0]
+  const legal: SplendorAction[] = useMemo(() => myTurn ? rules.legalActions(ev, 0) : [], [myTurn, ev])
+  const [sel, setSel] = useRevisionState<Sel>(null, view.revision)
+  const [returning, setReturning] = useState(false)
+
+  const takeOptions = legal.filter((a): a is Extract<SplendorAction, {type: 'take'}> => a.type === 'take').map(a => a.colors)
+  const takeKeys = new Set(takeOptions.map(sortedKey))
+  const buyable = new Set(legal.filter(a => a.type === 'buy').map(a => (a as {card: string}).card))
+  const reservable = new Set(legal.filter(a => a.type === 'reserve' && a.card).map(a => (a as {card: string}).card))
+  const blindTiers = new Set(legal.filter(a => a.type === 'reserve' && !a.card).map(a => (a as {tier: number}).tier))
+  const gem = (c: string) => bt(c)
+  const costText = (cost: Partial<Record<string, number>>) => Object.entries(cost).filter(([, n]) => (n ?? 0) > 0).map(([c, n]) => `${n} ${gem(c)}`).join(lang === 'zh' ? '、' : ', ') || '0'
+  const cardLabel = (id: string) => { const c = rules.cardById(id); return `${lang === 'zh' ? bt('cardName', {name: c.name}) + ' ' : ''}${bt('card', {tier: c.tier, gem: gem(c.bonus), points: c.points, cost: costText(c.cost)})}` }
+  const lastEvent = v.events[v.events.length - 1] as undefined | {id: number; type: string; player: number; colors?: string[]; card?: string | null; noble?: string; bonus?: string}
+
+  const clickBank = (c: SplendorGem) => {
+    if (!myTurn || v.phase !== 'action' || c === 'gold') return
+    setSel(prev => {
+      const colors = prev?.kind === 'take' ? prev.colors : []
+      const n = colors.filter(x => x === c).length
+      let next: SplendorColor[]
+      if (n === 2) next = colors.filter(x => x !== c)
+      else if (n === 1) next = colors.length === 1 && v.bank[c] >= 4 ? [c, c] : colors.filter(x => x !== c)
+      else if (colors.length === 2 && colors[0] === colors[1]) next = [c]
+      else if (colors.length >= 3) next = colors
+      else next = [...colors, c as SplendorColor]
+      return next.length ? {kind: 'take', colors: next} : null
+    })
+  }
+  const clickOwnToken = (c: SplendorGem) => {
+    if (!myTurn || v.phase !== 'return') return
+    const excess = rules.total(me.tokens) - 10
+    setSel(prev => {
+      const colors = prev?.kind === 'return' ? prev.colors : []
+      const have = colors.filter(x => x === c).length
+      if (have < me.tokens[c] && colors.length < excess) return {kind: 'return', colors: [...colors, c]}
+      const next = colors.filter(x => x !== c)
+      return next.length ? {kind: 'return', colors: next} : null
+    })
+  }
+  // Each returned gem is its own engine action; the sequence locks the controls until it ends.
+  const submitReturn = async (colors: SplendorGem[]) => {
+    setReturning(true)
+    try { for (const color of colors) { if (!(await act({type: 'return', color}))) break } } finally { setReturning(false) }
+  }
+
+  // ----- action strip -----
+  let bar: ReactNode
+  if (view.lifecycle === 'abandoned') bar = <ActionBar prompt={bt('abandoned')} />
+  else if (v.ended || view.lifecycle === 'ended') bar = <ActionBar prompt={bt('ended')} tone="turn" />
+  else if (!myTurn) bar = <ActionBar prompt={view.ai_hold ? bt('paused') : bt('otherTurn', {name: seatName(v.current)})} />
+  else if (v.phase === 'return') {
+    const excess = rules.total(me.tokens) - 10
+    const colors = sel?.kind === 'return' ? sel.colors : []
+    bar = (
+      <ActionBar tone="warn" testId="splendor-actions" prompt={bt('returnPrompt', {n: rules.total(me.tokens), k: excess})} detail={colors.length ? bt('returnList', {list: colors.map(gem).join(lang === 'zh' ? '、' : ', ')}) : undefined}>
+        {colors.length > 0 && <button type="button" className="ew-btn ghost" disabled={returning} onClick={() => setSel(null)}><Undo2 aria-hidden="true" />{bt('clear')}</button>}
+        <button type="button" className="ew-btn primary" data-testid="splendor-confirm" disabled={pending || returning || colors.length !== excess} onClick={() => void submitReturn(colors)}><Check aria-hidden="true" />{bt('confirmReturn')}</button>
+      </ActionBar>
+    )
+  } else if (v.phase === 'noble') bar = (
+    <ActionBar tone="select" testId="splendor-actions" prompt={bt('noblePrompt')}>
+      <button type="button" className="ew-btn primary" data-testid="splendor-confirm" disabled={pending || sel?.kind !== 'noble'} onClick={() => sel?.kind === 'noble' && void act({type: 'noble', noble: sel.id})}><Crown aria-hidden="true" />{bt('confirmNoble')}</button>
+    </ActionBar>
+  )
+  else if (sel?.kind === 'take') {
+    const valid = takeKeys.has(sortedKey(sel.colors))
+    const grow = takeOptions.filter(o => o.length > sel.colors.length && subMultiset(sel.colors, o))
+    const doubleShort = sel.colors.length === 2 && sel.colors[0] === sel.colors[1] && v.bank[sel.colors[0]] < 4
+    const hint = valid ? (grow.length ? `${bt('takeOk')} ${bt('takeMore', {n: Math.min(...grow.map(o => o.length - sel.colors.length))})}` : bt('takeOk'))
+      : grow.length ? bt('takeMore', {n: Math.min(...grow.map(o => o.length - sel.colors.length))}) : bt('takeRule', {why: doubleShort ? bt('takeDoubleNeed4') : bt('takeGeneric')})
+    bar = (
+      <ActionBar tone="select" testId="splendor-actions" prompt={bt('takePrompt', {list: sel.colors.map(gem).join(lang === 'zh' ? '、' : ', ')})} detail={<span className={valid ? '' : 'ew-error-text'}>{hint}</span>}>
+        <button type="button" className="ew-btn ghost" data-testid="splendor-cancel" onClick={() => setSel(null)}><X aria-hidden="true" />{bt('cancel')}</button>
+        <button type="button" className="ew-btn primary" data-testid="splendor-confirm" disabled={pending || !valid} onClick={() => void act({type: 'take', colors: sel.colors})}><Check aria-hidden="true" />{bt('confirmTake')}</button>
+      </ActionBar>
+    )
+  } else if (sel?.kind === 'card') {
+    const card = rules.cardById(sel.id)
+    const price = rules.priceFor(me, card)
+    const pay = rules.paymentFor(me, card)
+    const canBuy = buyable.has(card.id)
+    const canReserve = sel.from === 'market' && reservable.has(card.id)
+    bar = (
+      <ActionBar tone="select" testId="splendor-actions" prompt={cardLabel(card.id)}
+        detail={<span className="sp-detail">
+          <span>{bt('price', {cost: costText(price)})}</span>
+          <span>{pay ? (rules.total(pay) ? `${bt('pay', {pay: costText(pay)})}${pay.gold ? bt('goldNote', {n: pay.gold}) : ''}` : bt('payNothing')) : bt('missing', {n: rules.missingFor(me, card)})}</span>
+          {sel.from === 'market' && <span className="ew-faint">{me.reserved.length >= 3 ? bt('reserveFull') : v.bank.gold > 0 ? bt('reserveGold') : bt('reserveNoGold')}</span>}
+        </span>}>
+        <button type="button" className="ew-btn ghost" data-testid="splendor-cancel" onClick={() => setSel(null)}><X aria-hidden="true" />{bt('cancel')}</button>
+        {sel.from === 'market' && <button type="button" className="ew-btn" data-testid="splendor-reserve" disabled={pending || !canReserve} onClick={() => void act({type: 'reserve', card: card.id})}><BookmarkPlus aria-hidden="true" />{bt('reserve')}</button>}
+        <button type="button" className="ew-btn primary" data-testid="splendor-buy" disabled={pending || !canBuy} onClick={() => void act({type: 'buy', card: card.id})}><ShoppingBag aria-hidden="true" />{bt('buy')}</button>
+      </ActionBar>
+    )
+  } else if (sel?.kind === 'deck') bar = (
+    <ActionBar tone="select" testId="splendor-actions" prompt={bt('blindPrompt', {tier: sel.tier})} detail={<span className="ew-faint">{v.bank.gold > 0 ? bt('reserveGold') : bt('reserveNoGold')}</span>}>
+      <button type="button" className="ew-btn ghost" data-testid="splendor-cancel" onClick={() => setSel(null)}><X aria-hidden="true" />{bt('cancel')}</button>
+      <button type="button" className="ew-btn primary" data-testid="splendor-confirm" disabled={pending || !blindTiers.has(sel.tier)} onClick={() => void act({type: 'reserve', tier: sel.tier})}><BookmarkPlus aria-hidden="true" />{bt('blind', {tier: sel.tier})}</button>
+    </ActionBar>
+  )
+  else bar = <ActionBar tone="turn" testId="splendor-actions" prompt={legal.length ? bt('turnPrompt') : bt('noLegal')} detail={<span className="ew-faint">{bt('takeHint3')}</span>} />
+
+  const positions = POSITIONS[v.players.length] ?? POSITIONS[4]
+  const myBonus = rules.bonuses(me)
+  const flash = (player: number, key: string) => lastEvent && lastEvent.player === player && (
+    (lastEvent.type === 'take' && lastEvent.colors?.includes(key)) || (lastEvent.type === 'buy' && lastEvent.bonus === key) || (lastEvent.type === 'return' && key === 'return') ||
+    (lastEvent.type === 'reserve' && key === 'reserve') || (lastEvent.type === 'noble' && key === 'noble'))
+
+  const devCard = (id: string, size: 'md' | 'sm' = 'md', from?: 'market' | 'reserve') => {
+    const c = rules.cardById(id)
+    const art = cardArt(c)
+    const afford = !!rules.paymentFor(me, c)
+    const missing = afford ? 0 : rules.missingFor(me, c)
+    const clickable = !!from && myTurn && v.phase === 'action'
+    const selected = sel?.kind === 'card' && sel.id === id
+    const inner = <>
+      <span className="sp-card-art" style={cropStyle(asset(art.src), art.w, art.h, art.rect, CARD_ASPECT)} aria-hidden="true" />
+      <span className="sp-card-head" aria-hidden="true"><b className="sp-points">{c.points || ''}</b><GemImg gem={c.bonus} className="sp-bonus" /></span>
+      <Pips cost={c.cost} className="sp-card-cost" />
+      {from && size === 'md' && <span className={classNames('sp-afford', afford ? 'is-ok' : 'is-short')} aria-hidden="true">{afford ? bt('affordable') : bt('missing', {n: missing})}</span>}
+    </>
+    const cls = classNames('sp-card', `size-${size}`, `tier-${c.tier}`, selected && 'is-selected', clickable && 'is-clickable', afford && 'is-affordable')
+    return clickable
+      ? <button key={id} type="button" className={cls} data-card={id} data-testid={`splendor-card-${id}`} aria-pressed={selected} aria-label={`${cardLabel(id)} · ${afford ? bt('affordable') : bt('missing', {n: missing})}`} onClick={() => setSel(selected ? null : {kind: 'card', id, from: from!})}>{inner}</button>
+      : <span key={id} className={cls} data-card={id} role="img" aria-label={cardLabel(id)}>{inner}</span>
+  }
+  const tierBack = (key: string, tier: 1 | 2 | 3, label: string) => <span key={key} className="sp-card is-back size-sm" role="img" aria-label={label} style={{backgroundImage: `url("${asset(TIER_BACKS[tier])}")`}} />
+  const noble = (id: string, size: 'md' | 'sm' = 'md', choosable = false) => {
+    const n = rules.nobleById(id), art = nobleArt(id)
+    const selected = sel?.kind === 'noble' && sel.id === id
+    const inner = <>
+      <span className="sp-noble-art" style={cropStyle(asset(art.src), art.w, art.h, art.rect, 1)} aria-hidden="true" />
+      <b className="sp-points" aria-hidden="true">3</b>
+      <Pips cost={n.cost} className="sp-noble-cost" />
+    </>
+    const label = `${lang === 'zh' ? `「${n.name}」` : ''}${bt('noble', {cost: costText(n.cost)})}`
+    return choosable
+      ? <button key={id} type="button" className={classNames('sp-noble', `size-${size}`, 'is-clickable', selected && 'is-selected')} aria-pressed={selected} aria-label={label} data-testid={`splendor-noble-${id}`} onClick={() => setSel({kind: 'noble', id})}>{inner}</button>
+      : <span key={id} className={classNames('sp-noble', `size-${size}`)} role="img" aria-label={label}>{inner}</span>
+  }
+
+  const playerPanel = (p: ProjPlayer, pos: string) => {
+    const eng = ev.players[p.id]
+    const bonus = rules.bonuses(eng)
+    const isMe = p.id === 0
+    const canReturn = isMe && myTurn && v.phase === 'return' && !returning
+    const returnSel = isMe && sel?.kind === 'return' ? sel.colors : []
+    return (
+      <section key={p.id} className={classNames('sp-seat', `pos-${pos}`, isMe && 'is-me', p.id === v.current && active && 'is-current')} data-seat={p.id} aria-label={seatName(p.id)}>
+        <header className="sp-seat-head">
+          <span className="ew-seat-dot" style={{background: seatColor(p.id)}} aria-hidden="true" />
+          <strong>{seatName(p.id)}</strong>
+          <b className="sp-seat-score">{bt('score', {n: rules.score(eng)})}</b>
+          <small className="ew-faint">{bt('cardsBought', {n: eng.cards.length})}</small>
+        </header>
+        <div className="sp-seat-row" aria-label={bt('tokens', {n: rules.total(eng.tokens)})}>
+          {ALL.map(c => {
+            const chosen = returnSel.filter(x => x === c).length
+            const content = <><GemImg gem={c} /><b>{eng.tokens[c]}</b>{chosen > 0 && <em className="sp-chosen">−{chosen}</em>}</>
+            const label = `${gem(c)} ${eng.tokens[c]}`
+            return canReturn && eng.tokens[c] > 0
+              ? <button key={c} type="button" className={classNames('sp-token-mini', 'is-clickable', chosen > 0 && 'is-selected')} aria-label={label} data-testid={`splendor-return-${c}`} onClick={() => clickOwnToken(c)}>{content}</button>
+              : <span key={flash(p.id, c) ? `${c}-${view.revision}` : c} className={classNames('sp-token-mini', eng.tokens[c] === 0 && 'is-zero', flash(p.id, c) && 'is-flash')} role="img" aria-label={label}>{content}</span>
+          })}
+          <small className="sp-token-total">{rules.total(eng.tokens)}/10</small>
+        </div>
+        <div className="sp-seat-row sp-bonus-row" aria-label={bt('bonus')}>
+          <span className="sp-row-label">{bt('bonus')}</span>
+          {COLORS.map(c => <span key={flash(p.id, c) && lastEvent?.type === 'buy' ? `${c}-${view.revision}` : c} className={classNames('sp-bonus-chip', flash(p.id, c) && lastEvent?.type === 'buy' && 'is-flash')} style={{'--pip-bg': GEM_TONES[c].bg, '--pip-ink': GEM_TONES[c].ink} as CSSProperties} role="img" aria-label={`${bt('bonus')} ${gem(c)} ${bonus[c]}`}>{bonus[c]}</span>)}
+        </div>
+        <div className={classNames('sp-seat-reserved', flash(p.id, 'reserve') && 'is-flash')} aria-label={bt('reserved', {n: p.reserved.length})}>
+          <span className="sp-row-label">{bt('reserved', {n: p.reserved.length})}</span>
+          {p.reserved.map((r, i) => r.hidden || !r.card
+            ? tierBack(`hidden-${i}`, (r.tier ?? 1) as 1 | 2 | 3, bt('hiddenReserve', {tier: r.tier ?? '?'}))
+            : devCard(r.card, isMe ? 'md' : 'sm', isMe ? 'reserve' : undefined))}
+        </div>
+        {eng.nobles.length > 0 && <div className="sp-seat-nobles" aria-label={bt('noblesN', {n: eng.nobles.length})}>{eng.nobles.map(id => noble(id, 'sm'))}</div>}
+      </section>
+    )
+  }
+
+  return (
+    <div className={classNames('gb-board sp-board', `players-${v.players.length}`)} data-phase={v.phase} data-current={v.current} style={{'--sp-cloth': `url("${asset(TABLE_CLOTH)}")`} as CSSProperties}>
+      <div className="sp-top">
+        <strong>{bt('round', {n: v.round})}</strong>
+        <span className="ew-chip">{legacy ? bt('legacy') : bt('v2')}</span>
+        {v.ending && !v.ended && <span className="ew-chip warn">{bt('ending')}</span>}
+        {view.log.length > 0 && <span className="gb-recent"><span className="ew-faint">{bt('recent')}</span>{view.log[view.log.length - 1].summary[lang]}</span>}
+      </div>
+      <div className="sp-table">
+        {v.players.slice(1).map(p => playerPanel(p, positions[p.id]))}
+        <div className="sp-center">
+          <div className="sp-nobles" aria-label={bt('nobles')}>
+            {(v.phase === 'noble' && myTurn ? v.pendingNobles : v.nobles).map(id => noble(id, 'md', v.phase === 'noble' && myTurn))}
+            {v.phase === 'noble' && myTurn && v.nobles.filter(id => !v.pendingNobles.includes(id)).map(id => noble(id))}
+          </div>
+          <div className="sp-market">
+            {([3, 2, 1] as const).map(tier => (
+              <div key={tier} className="sp-market-row" aria-label={bt('tier', {tier})}>
+                {myTurn && v.phase === 'action' && blindTiers.has(tier)
+                  ? <button type="button" className={classNames('sp-deck', sel?.kind === 'deck' && sel.tier === tier && 'is-selected')} data-testid={`splendor-deck-${tier}`} aria-pressed={sel?.kind === 'deck' && sel.tier === tier} aria-label={bt('deck', {tier, n: v.decks[tier]})} onClick={() => setSel(sel?.kind === 'deck' && sel.tier === tier ? null : {kind: 'deck', tier})} style={{backgroundImage: `url("${asset(TIER_BACKS[tier])}")`}}><b>{bt('deckShort', {n: v.decks[tier]})}</b></button>
+                  : <span className="sp-deck" role="img" aria-label={bt('deck', {tier, n: v.decks[tier]})} style={{backgroundImage: v.decks[tier] ? `url("${asset(TIER_BACKS[tier])}")` : undefined}}><b>{bt('deckShort', {n: v.decks[tier]})}</b></span>}
+                {v.market[tier].map((id, i) => id ? devCard(id, 'md', 'market') : <span key={`empty-${i}`} className="sp-card is-empty" aria-hidden="true" />)}
+              </div>
+            ))}
+          </div>
+          <div className="sp-bank" aria-label={bt('bank')}>
+            {ALL.map(c => {
+              const picked = sel?.kind === 'take' ? sel.colors.filter(x => x === c).length : 0
+              const clickable = myTurn && v.phase === 'action' && c !== 'gold' && v.bank[c] > 0
+              const content = <><GemImg gem={c} className="sp-bank-gem" /><b>{v.bank[c]}</b>{picked > 0 && <em className="sp-chosen">+{picked}</em>}</>
+              return clickable
+                ? <button key={c} type="button" className={classNames('sp-token', picked > 0 && 'is-selected')} data-testid={`splendor-bank-${c}`} aria-pressed={picked > 0} aria-label={`${gem(c)} ${v.bank[c]}${picked ? ` · +${picked}` : ''}`} onClick={() => clickBank(c)}>{content}</button>
+                : <span key={c} className={classNames('sp-token', c === 'gold' && 'is-gold', v.bank[c] === 0 && 'is-zero')} role="img" aria-label={`${gem(c)} ${v.bank[c]}`}>{content}</span>
+            })}
+          </div>
+        </div>
+      </div>
+      {playerPanel(v.players[0], 'bottom')}
+      {bar}
+      <span hidden data-testid="splendor-legal" data-take={takeOptions.map(sortedKey).join(' ')} data-buy={[...buyable].join(' ')} data-reserve={[...reservable].join(' ')} data-blind={[...blindTiers].join(' ')} data-my-bonus={COLORS.map(c => myBonus[c]).join(',')} />
+    </div>
+  )
+}
+
diff --git a/everwith-claude-frontend/src/features/games/boards/shared.tsx b/everwith-claude-frontend/src/features/games/boards/shared.tsx
new file mode 100644
index 00000000..63e44525
--- /dev/null
+++ b/everwith-claude-frontend/src/features/games/boards/shared.tsx
@@ -0,0 +1,71 @@
+import {useCallback, useState} from 'react'
+import type {ReactNode} from 'react'
+import {useSyncExternalStore} from 'react'
+import {useI18n} from '../../../app/i18n'
+import {scenarios} from '../../../mock/scenarios'
+import {classNames} from '../../../lib/util'
+import type {GameViewJSON} from '../../../api/types'
+
+export type BoardProps = {view: GameViewJSON; pending: boolean; act: (action: Record<string, unknown>) => Promise<boolean>; seatName: (seat: number) => string; readOnly: boolean}
+const SEAT_COLORS = ['#e6bd5a', '#cb5367', '#4b94b5', '#f0e9d6', '#529e76']
+/** One colour per real seat, shared by dice, tokens, dots and the result table. */
+export const seatColor = (seat: number) => SEAT_COLORS[seat % SEAT_COLORS.length]
+
+/** Board art lives in the byte-identical handoff copy (see scripts/sync-assets.mjs). */
+export const GAME_ASSETS = '/handoff/assets/games'
+
+export type BoardDict = Record<string, string>
+/** Board-local strings: keeps the three boards self-contained and both languages complete. */
+export function useBoardText(dicts: {zh: BoardDict; en: BoardDict}) {
+  const {lang} = useI18n()
+  return useCallback((key: string, vars?: Record<string, string | number>) => {
+    let s = dicts[lang][key] ?? dicts.zh[key] ?? key
+    if (vars) for (const [k, v] of Object.entries(vars)) s = s.split(`{${k}}`).join(String(v))
+    return s
+  }, [dicts, lang])
+}
+
+/** Same rewrite as portraits so the “assets missing” scenario also covers boards. */
+export function useBoardAsset() {
+  const missing = useSyncExternalStore(scenarios.subscribe, () => scenarios.isOn('assets.missing'), () => false)
+  return useCallback((path: string) => missing ? path.replace('/handoff/', '/handoff/__missing__/') : path, [missing])
+}
+
+/**
+ * CSS crop of a sub-rectangle of an image into a box of a known aspect ratio (cover, with
+ * a slight upward bias like the reference `imageCrop`). Pure presentation; no game data.
+ */
+export function cropStyle(src: string, imageW: number, imageH: number, rect: [number, number, number, number], boxAspect: number, biasX = .5, biasY = .45) {
+  const [nx, ny, nw, nh] = rect
+  let sx = nx * imageW, sy = ny * imageH, sw = nw * imageW, sh = nh * imageH
+  if (sw / sh > boxAspect) { const next = sh * boxAspect; sx += (sw - next) * biasX; sw = next } else { const next = sw / boxAspect; sy += (sh - next) * biasY; sh = next }
+  const px = imageW - sw < .5 ? 0 : sx / (imageW - sw) * 100
+  const py = imageH - sh < .5 ? 0 : sy / (imageH - sh) * 100
+  return {backgroundImage: `url("${src}")`, backgroundSize: `${(imageW / sw * 100).toFixed(3)}% auto`, backgroundPosition: `${px.toFixed(3)}% ${py.toFixed(3)}%`, backgroundRepeat: 'no-repeat'}
+}
+
+/** Selection that silently resets whenever the authoritative revision changes. */
+export function useRevisionState<T>(initial: T, revision: number): [T, (next: T | ((prev: T) => T)) => void] {
+  const [box, setBox] = useState<{rev: number; value: T}>({rev: revision, value: initial})
+  const value = box.rev === revision ? box.value : initial
+  const set = useCallback((next: T | ((prev: T) => T)) => setBox(b => {
+    const prev = b.rev === revision ? b.value : initial
+    return {rev: revision, value: typeof next === 'function' ? (next as (p: T) => T)(prev) : next}
+  }), [revision])
+  return [value, set]
+}
+
+/** Bottom action strip: what is selected, what it will cost, Confirm / Cancel. */
+export function ActionBar({prompt, detail, children, tone = 'idle', testId}: {prompt: ReactNode; detail?: ReactNode; children?: ReactNode; tone?: 'idle' | 'turn' | 'select' | 'warn'; testId?: string}) {
+  return (
+    <div className={classNames('gb-actionbar', `tone-${tone}`)} role="group" aria-label={typeof prompt === 'string' ? prompt : undefined} data-testid={testId}>
+      <div className="gb-action-text">
+        <p className="gb-prompt" aria-live="polite">{prompt}</p>
+        {detail && <div className="gb-detail">{detail}</div>}
+      </div>
+      {children && <div className="gb-action-buttons">{children}</div>}
+    </div>
+  )
+}
+
+export const formatMoney = (n: number, lang: 'zh' | 'en') => n.toLocaleString(lang === 'zh' ? 'zh-CN' : 'en-US')
diff --git a/everwith-claude-frontend/src/features/games/boards/splendor-art.ts b/everwith-claude-frontend/src/features/games/boards/splendor-art.ts
new file mode 100644
index 00000000..9447df31
--- /dev/null
+++ b/everwith-claude-frontend/src/features/games/boards/splendor-art.ts
@@ -0,0 +1,62 @@
+/**
+ * Artwork assignment for Splendor cards and nobles — a TypeScript port of the reference
+ * `art-catalog.js` (handoff reference/component-excerpts/gem-court/splendor). It maps a
+ * PUBLIC card/noble id to a crop of an approved package image. It holds no rule values,
+ * no randomness and never receives hidden reserve identities.
+ */
+import type {SplendorCard} from '../../../games/engines/splendor/src/data'
+import {GAME_ASSETS} from './shared'
+
+const DIR = `${GAME_ASSETS}/splendor`
+export type ArtSpec = {src: string; w: number; h: number; rect: [number, number, number, number]}
+
+const FILES: Record<number, {file: string; w: number; h: number}> = {
+  6: {file: 'nobles-a.jpg', w: 1024, h: 1536}, 7: {file: 'nobles-b.jpg', w: 1024, h: 1536},
+  11: {file: 'renaissance-tier3-20261007.png', w: 1536, h: 1024}, 12: {file: 'renaissance-tier2-20261007.png', w: 1536, h: 1024}, 13: {file: 'renaissance-tier1-20261007.png', w: 1536, h: 1024},
+  15: {file: 'renaissance-tier2-warehouse-round3-20261007.png', w: 1024, h: 1536}, 16: {file: 'renaissance-tier2-ledger-round3-20261007.png', w: 1024, h: 1536},
+  17: {file: 'renaissance-tier2-caravan-round3-20261007.png', w: 1024, h: 1536}, 18: {file: 'renaissance-tier3-cathedral-round4-20261007.png', w: 1024, h: 1536},
+  19: {file: 'renaissance-tier3-harbor-round4-20261007.png', w: 1024, h: 1536},
+}
+const cells = (xs: [number, number][], ys: [number, number][]) => ys.flatMap(([top, bottom]) => xs.map(([left, right]) => [left + 6, top + 6, right - left - 12, bottom - top - 12] as [number, number, number, number]))
+// Measured gutters of the noble sheets (pixels in 1024×1536), copied from the reference.
+const NOBLE_RECTS: Record<6 | 7, [number, number, number, number][]> = {
+  6: cells([[0, 507], [516, 1024]], [[0, 496], [505, 1008], [1017, 1536]]),
+  7: cells([[0, 507], [518, 1024]], [[0, 499], [510, 1011], [1022, 1536]]),
+}
+const mix = (input: number) => { let x = input; x = Math.imul(x ^ (x >>> 16), 0x45d9f3b); x = Math.imul(x ^ (x >>> 16), 0x45d9f3b); return (x ^ (x >>> 16)) >>> 0 }
+// Fixed, balanced art-only ordering (does not follow the six-card bonus blocks).
+const VARIANTS: Record<1 | 2 | 3, number[]> = Object.fromEntries(([1, 2, 3] as const).map(tier => {
+  const size = [0, 40, 30, 20][tier]
+  const order = Array.from({length: size}, (_, i) => i).sort((a, b) => mix(a + 999 + tier * 97) - mix(b + 999 + tier * 97) || a - b)
+  const result: number[] = Array(size)
+  order.forEach((ordinal, rank) => { result[ordinal] = rank % 6 })
+  return [tier, result]
+})) as Record<1 | 2 | 3, number[]>
+
+const spec = (source: number, rect: [number, number, number, number]): ArtSpec => ({src: `${DIR}/${FILES[source].file}`, w: FILES[source].w, h: FILES[source].h, rect})
+
+export function cardArt(card: Pick<SplendorCard, 'id' | 'tier'>): ArtSpec {
+  const source = card.tier === 3 ? 11 : card.tier === 2 ? 12 : 13
+  const ordinal = Number(card.id.slice(1)) - [0, 0, 40, 70][card.tier]
+  const cell = card.id === 'c51' ? 1 : VARIANTS[card.tier][ordinal]
+  if (card.tier === 3 && (cell === 0 || cell === 2)) return spec(cell === 0 ? 18 : 19, [0, 0, 1, 1])
+  if (card.tier === 2 && (cell === 0 || cell === 1 || cell === 4)) return spec(({0: 15, 1: 16, 4: 17} as Record<number, number>)[cell], [0, 0, 1, 1])
+  return spec(source, [(cell % 3) / 3 + .002, Math.floor(cell / 3) / 2 + .003, 1 / 3 - .004, 1 / 2 - .006])
+}
+export function nobleArt(id: string): ArtSpec {
+  const n = Number(id.slice(1)), source = n < 6 ? 6 : 7, cell = n < 6 ? n : n - 6
+  const [x, y, w, h] = NOBLE_RECTS[source][cell]
+  return spec(source, [x / 1024, y / 1536, w / 1024, h / 1536])
+}
+export const GEM_IMAGES: Record<string, string> = {
+  diamond: `${DIR}/gem-diamond-finish-round4-20261007.png`, sapphire: `${DIR}/gem-sapphire-finish-round4-20261007.png`, emerald: `${DIR}/gem-emerald-polish-round4-20261007.png`,
+  ruby: `${DIR}/gem-ruby-polish-round4-20261007.png`, onyx: `${DIR}/gem-onyx-polish-round4-20261007.png`, gold: `${DIR}/gem-gold-finish-round4-20261007.png`,
+}
+export const TIER_BACKS: Record<1 | 2 | 3, string> = {1: `${DIR}/tier-back-1-20261005.png`, 2: `${DIR}/tier-back-2-20261005.png`, 3: `${DIR}/tier-back-3-20261005.png`}
+export const TABLE_CLOTH = `${DIR}/teal-velour-calm-round4-20261007.png`
+export const SALON = `${DIR}/backgrounds/salon.png`
+/** Ink tones per gem (from the reference gem material) for code-drawn pips and labels. */
+export const GEM_TONES: Record<string, {bg: string; ink: string}> = {
+  diamond: {bg: '#eef3fa', ink: '#1d2430'}, sapphire: {bg: '#1f5fc4', ink: '#ffffff'}, emerald: {bg: '#11834f', ink: '#ffffff'},
+  ruby: {bg: '#b8142f', ink: '#ffffff'}, onyx: {bg: '#262b36', ink: '#ffffff'}, gold: {bg: '#d2a43d', ink: '#22190a'},
+}
diff --git a/everwith-claude-frontend/src/features/misc/NotFoundPage.tsx b/everwith-claude-frontend/src/features/misc/NotFoundPage.tsx
new file mode 100644
index 00000000..9e718d5a
--- /dev/null
+++ b/everwith-claude-frontend/src/features/misc/NotFoundPage.tsx
@@ -0,0 +1,16 @@
+import {useI18n} from '../../app/i18n'
+import {href} from '../../app/router'
+import {SpotArt} from '../../components/Art'
+
+export default function NotFoundPage() {
+  const {t} = useI18n()
+  return (
+    <div className="ew-page">
+      <div className="ew-empty">
+        <SpotArt kind="not-found" />
+        <h2>{t('error.notFound')}</h2>
+        <a className="ew-btn primary" href={href.discover()}>{t('nav.discover')}</a>
+      </div>
+    </div>
+  )
+}
diff --git a/everwith-claude-frontend/src/features/mock/MockPanel.tsx b/everwith-claude-frontend/src/features/mock/MockPanel.tsx
new file mode 100644
index 00000000..a8b5f1c3
--- /dev/null
+++ b/everwith-claude-frontend/src/features/mock/MockPanel.tsx
@@ -0,0 +1,56 @@
+import {useEffect, useState, useSyncExternalStore} from 'react'
+import {Dialog} from '../../components/Dialog'
+import {useI18n} from '../../app/i18n'
+import {SCENARIOS, scenarios} from '../../mock/scenarios'
+import {resetDB} from '../../mock/db'
+import {api} from '../../api/adapter'
+import {href, navigate} from '../../app/router'
+import {loadAccount, toast} from '../../app/store'
+import {randomId} from '../../lib/util'
+import {ADAPTER_MODE} from '../../api/adapter'
+
+export const OPEN_MOCK_PANEL = 'everwith:open-mock-panel'
+
+export function MockPanel() {
+  const {t, lang} = useI18n()
+  const [open, setOpen] = useState(false)
+  const active = useSyncExternalStore(scenarios.subscribe, scenarios.snapshot, scenarios.snapshot)
+  // Task pages (the game table) hide the floating button and open the panel from their own toolbar.
+  useEffect(() => {
+    const onOpen = () => setOpen(true)
+    window.addEventListener(OPEN_MOCK_PANEL, onOpen)
+    return () => window.removeEventListener(OPEN_MOCK_PANEL, onOpen)
+  }, [])
+  if (ADAPTER_MODE !== 'mock') return null
+  const importLegacy = async () => {
+    try {
+      const view = await api.games.start({key: randomId('legacy'), game_id: 'gems', players: 3, profile: 'splendor-legacy-v1', legacy_fixture: true,
+        seats: [{seat: 1, kind: 'temporary', character_id: 'official-nora'}, {seat: 2, kind: 'temporary', character_id: 'official-marcus'}],
+        origin: {kind: 'discover', return_hash: href.recent()}})
+      setOpen(false); navigate(href.gamePlay(view.id))
+    } catch { toast(t('error.generic'), 'error') }
+  }
+  return (
+    <>
+      {open && (
+        <Dialog title={t('mock.panel.title')} onClose={() => setOpen(false)} wide>
+          <p className="ew-muted">{t('mock.panel.desc')}</p>
+          <ul className="ew-scenarios">
+            {SCENARIOS.map(s => (
+              <li key={s.id}>
+                <label className="ew-check">
+                  <input type="checkbox" checked={!!active[s.id]} onChange={e => scenarios.set(s.id, e.target.checked)} />
+                  <span><strong>{s.label[lang]}</strong> <span className="ew-chip">{s.kind === 'once' ? t('mock.panel.once') : t('mock.panel.toggle')}</span><br /><small className="ew-faint">{s.expect[lang]}</small></span>
+                </label>
+              </li>
+            ))}
+          </ul>
+          <div className="ew-row wrap">
+            <button type="button" className="ew-btn" onClick={() => void importLegacy()}>{t('mock.panel.legacy')}</button>
+            <button type="button" className="ew-btn danger" onClick={() => { if (confirm(t('mock.panel.resetConfirm'))) { resetDB(); scenarios.clear(); void loadAccount(); setOpen(false); navigate(href.discover()) } }}>{t('mock.panel.reset')}</button>
+          </div>
+        </Dialog>
+      )}
+    </>
+  )
+}
diff --git a/everwith-claude-frontend/src/features/recent/RecentPage.tsx b/everwith-claude-frontend/src/features/recent/RecentPage.tsx
new file mode 100644
index 00000000..12ec996b
--- /dev/null
+++ b/everwith-claude-frontend/src/features/recent/RecentPage.tsx
@@ -0,0 +1,71 @@
+import {useCallback, useEffect, useState} from 'react'
+import {Archive, ArchiveRestore, BookOpen, Dices, Eye, Play, Trash2} from 'lucide-react'
+import {useI18n} from '../../app/i18n'
+import type {I18nKey} from '../../app/i18n'
+import {href, navigate} from '../../app/router'
+import {toast} from '../../app/store'
+import {api} from '../../api/adapter'
+import type {RecordJSON} from '../../api/types'
+import {ConfirmDialog} from '../../components/Dialog'
+import {Portrait} from '../../components/Portrait'
+import {SpotArt} from '../../components/Art'
+import {classNames, formatTime, pick} from '../../lib/util'
+
+const STATUS: Record<string, I18nKey> = {active: 'recent.status.active', in_progress: 'recent.status.active', ended: 'recent.status.ended', abandoned: 'recent.status.abandoned', paused: 'recent.status.paused', read_only: 'story.readOnlyShort'}
+
+/** One row per concrete run — never merged by work title. Continue opens that exact run. */
+export default function RecentPage({archived}: {archived: boolean}) {
+  const {t, lang} = useI18n()
+  const [items, setItems] = useState<RecordJSON[] | null>(null)
+  const [error, setError] = useState(false)
+  const [confirm, setConfirm] = useState<RecordJSON | null>(null)
+  const load = useCallback(() => { setError(false); api.records.list(archived).then(r => setItems(r.items)).catch(() => setError(true)) }, [archived])
+  useEffect(() => { setItems(null); load() }, [load])
+  const mutate = async (r: RecordJSON, action: 'archive' | 'restore' | 'delete') => {
+    try { await api.records.mutate(r.kind, r.id, action); load() } catch { toast(t('error.generic'), 'error') }
+  }
+  const open = (r: RecordJSON) => navigate(r.kind === 'story' ? href.storyPlay(r.id) : href.gamePlay(r.id))
+  return (
+    <div className="ew-page ew-recent">
+      <header className="ew-page-head"><div><h1>{t('recent.title')}</h1><p className="ew-muted">{t('recent.subtitle')}</p></div></header>
+      <nav className="ew-tabs" aria-label={t('recent.title')}>
+        <a className="ew-tab" aria-current={!archived ? 'page' : undefined} href={href.recent(false)}>{t('recent.active')}</a>
+        <a className="ew-tab" aria-current={archived ? 'page' : undefined} href={href.recent(true)}>{t('recent.archived')}</a>
+      </nav>
+      {error && <div className="ew-notice danger" role="alert"><span>{t('error.network')}<span className="ew-notice-actions"><button type="button" className="ew-btn small" onClick={load}>{t('common.retry')}</button></span></span></div>}
+      {!items && !error && <div className="ew-page-loading" role="status"><span className="ew-spinner" />{t('common.loading')}</div>}
+      {items && items.length === 0 && <div className="ew-empty"><SpotArt kind="recent" /><h2>{archived ? t('recent.emptyArchived') : t('recent.empty')}</h2>{!archived && <a className="ew-btn primary" href={href.discover()}>{t('recent.goDiscover')}</a>}</div>}
+      {items && items.length > 0 && (
+        <ul className="ew-records">
+          {items.map(r => {
+            const live = r.status === 'active' || r.status === 'in_progress' || r.status === 'paused'
+            const winners = r.result?.winners.map(w => r.lineup[w]?.name ?? `#${w}`)
+            return (
+              <li key={`${r.kind}-${r.id}`} className="ew-record" data-kind={r.kind} data-testid="record">
+                <span className="ew-record-icon" aria-hidden="true">{r.image ? <Portrait src={r.image} name={pick(r.title, lang)} alt="" /> : r.kind === 'story' ? <BookOpen /> : <Dices />}</span>
+                <span className="ew-record-main">
+                  <span className="ew-record-title"><strong>{pick(r.title, lang)}</strong>
+                    <span className="ew-chip">{r.kind === 'story' ? t('recent.story') : t('recent.game')}</span>
+                    <span className={classNames('ew-chip', live ? 'ok' : r.status === 'abandoned' ? 'warn' : '')}>{t(STATUS[r.status] ?? 'recent.status.active')}</span>
+                    {r.rematch_of && <span className="ew-chip">{t('recent.rematch')}</span>}</span>
+                  <span className="ew-record-lineup">{t('recent.lineup')}：{r.lineup.map(l => `${l.role ? `${pick(l.role, lang)}·` : ''}${l.name}${l.friend ? `（${t('common.friend')}）` : l.temporary ? `（${t('common.temporary')}）` : ''}`).join(lang === 'zh' ? '、' : ', ')}</span>
+                  <span className="ew-record-meta">{r.kind === 'story' ? t('story.runMeta', {turns: r.turns ?? 0, time: formatTime(r.updated_at, lang)}) : t('recent.gameMeta', {rev: r.revision ?? 0, time: formatTime(r.updated_at, lang)})}
+                    {winners && winners.length > 0 ? ` · ${t('game.winner')}：${winners.join('、')}` : ''}</span>
+                </span>
+                <span className="ew-record-actions">
+                  {!archived && <button type="button" className={classNames('ew-btn small', live && 'primary')} onClick={() => open(r)} data-testid="record-open">{live ? <><Play aria-hidden="true" />{t('recent.continue')}</> : <><Eye aria-hidden="true" />{t('recent.review')}</>}</button>}
+                  {archived
+                    ? <button type="button" className="ew-btn small" onClick={() => void mutate(r, 'restore')}><ArchiveRestore aria-hidden="true" />{t('common.restore')}</button>
+                    : <button type="button" className="ew-btn small ghost" onClick={() => void mutate(r, 'archive')}><Archive aria-hidden="true" />{t('common.archive')}</button>}
+                  <button type="button" className="ew-btn small ghost danger-text" onClick={() => setConfirm(r)} aria-label={`${t('common.delete')} · ${pick(r.title, lang)}`}><Trash2 aria-hidden="true" />{t('common.delete')}</button>
+                </span>
+              </li>
+            )
+          })}
+        </ul>
+      )}
+      {confirm && <ConfirmDialog title={`${t('common.delete')} · ${pick(confirm.title, lang)}`} body={<p>{t('recent.deleteConfirm')}</p>} confirmLabel={t('common.delete')} danger
+        onCancel={() => setConfirm(null)} onConfirm={() => { const r = confirm; setConfirm(null); void mutate(r, 'delete') }} />}
+    </div>
+  )
+}
diff --git a/everwith-claude-frontend/src/features/story/StoryDetailPage.tsx b/everwith-claude-frontend/src/features/story/StoryDetailPage.tsx
new file mode 100644
index 00000000..39b9d5dc
--- /dev/null
+++ b/everwith-claude-frontend/src/features/story/StoryDetailPage.tsx
@@ -0,0 +1,90 @@
+import {useEffect, useState} from 'react'
+import {ArrowLeft, BookOpen, Lock, Play, Users} from 'lucide-react'
+import {useI18n} from '../../app/i18n'
+import {href, navigate} from '../../app/router'
+import {api} from '../../api/adapter'
+import type {RecordJSON, StoryJSON} from '../../api/types'
+import {CompanionRequestError} from '../../contracts/companion'
+import {Portrait} from '../../components/Portrait'
+import {SpotArt} from '../../components/Art'
+import {errorArt} from '../../art/generated'
+import {formatTime, pick} from '../../lib/util'
+
+/**
+ * Public story page: introduction, people, version; continue one of MY existing runs
+ * (each run listed separately, never merged by title) or explicitly start another.
+ */
+export default function StoryDetailPage({storyId, version}: {storyId: string; version: string}) {
+  const {t, lang} = useI18n()
+  const [story, setStory] = useState<StoryJSON | null>(null)
+  const [runs, setRuns] = useState<RecordJSON[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  useEffect(() => {
+    api.catalog.story(storyId, version).then(setStory).catch(e => setError(e instanceof CompanionRequestError ? e.code : 'network_error'))
+    api.records.list(false).then(r => setRuns(r.items.filter(x => x.kind === 'story' && x.work_id === storyId && x.version === version))).catch(() => setRuns([]))
+  }, [storyId, version])
+  const back = href.discover('stories')
+  if (error) return <div className="ew-page"><a className="ew-back ew-btn ghost" href={back}><ArrowLeft aria-hidden="true" />{t('common.back')}</a><div className="ew-empty"><SpotArt kind={errorArt(error)} /><h2>{error === 'not_found' ? t('error.notFound') : t('error.generic')}</h2>{error !== 'not_found' && <button type="button" className="ew-btn" onClick={() => { setError(null); api.catalog.story(storyId, version).then(setStory).catch(() => setError('network_error')) }}>{t('common.retry')}</button>}</div></div>
+  if (!story) return <div className="ew-page-loading" role="status"><span className="ew-spinner" />{t('common.loading')}</div>
+  const here = href.story(storyId, version)
+  return (
+    <div className="ew-page ew-story-detail">
+      <a className="ew-back ew-btn ghost" href={back} onClick={e => { if (history.length > 1) { e.preventDefault(); history.back() } }}><ArrowLeft aria-hidden="true" />{t('common.back')}</a>
+      <div className="ew-story-hero">
+        <div className="ew-story-cover">{(story.image_wide ?? story.image) ? <Portrait src={story.image_wide ?? story.image} name={pick(story.title, lang)} /> : <span className="ew-story-cover-fallback" aria-hidden="true"><BookOpen /></span>}</div>
+        <section className="ew-story-intro" aria-labelledby="story-title">
+          <p className="ew-eyebrow">{pick(story.genre, lang)} · v{story.version}</p>
+          <h1 id="story-title" className="ew-title-xl">{pick(story.title, lang)}</h1>
+          <p className="ew-lead">{pick(story.description, lang)}</p>
+          <p className="ew-faint ew-small">{pick(story.content_note, lang)}</p>
+          <dl className="ew-facts">
+            <div><dt>{t('story.playerRole')}</dt><dd>{pick(story.player_role, lang)}</dd></div>
+            <div><dt>{t('story.objectives')}</dt><dd><ol>{story.objectives.map((o, i) => <li key={i}>{pick(o, lang)}</li>)}</ol></dd></div>
+          </dl>
+          <div className="ew-row wrap">
+            <a className="ew-btn primary" href={href.storyPrepare(storyId, version, null, here)} data-testid="story-prepare"><Play aria-hidden="true" />{runs && runs.length ? t('story.newRun') : t('story.start')}</a>
+          </div>
+          <p className="ew-faint ew-small">{t('story.noRecord')}</p>
+        </section>
+      </div>
+
+      {runs && runs.length > 0 && (
+        <section className="ew-story-runs" aria-labelledby="runs-title">
+          <h2 id="runs-title" className="ew-section-title">{t('story.continueExisting')}</h2>
+          <ul className="ew-list">
+            {runs.map(r => (
+              <li key={r.id}>
+                <button type="button" className="ew-list-row" onClick={() => navigate(href.storyPlay(r.id))} data-testid="story-continue">
+                  <Play aria-hidden="true" />
+                  <span className="ew-list-main">
+                    <strong>{r.lineup.map(l => `${l.role ? pick(l.role, lang) + '：' : ''}${l.name}${l.friend ? `（${t('common.friend')}）` : ''}`).join(' · ')}</strong>
+                    <small>{t('story.runMeta', {turns: r.turns ?? 0, time: formatTime(r.updated_at, lang)})}{r.status === 'read_only' ? ` · ${t('story.readOnlyShort')}` : ''}</small>
+                  </span>
+                  <span className="ew-chip">{t('recent.continue')}</span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      <section aria-labelledby="roles-title">
+        <h2 id="roles-title" className="ew-section-title"><Users aria-hidden="true" className="ew-inline-icon" /> {t('story.roles')}</h2>
+        <ul className="ew-role-grid">
+          {story.roles.map(r => (
+            <li key={r.id} className="ew-role-card">
+              <span className="ew-avatar large"><Portrait src={r.default_character.avatar} name={r.default_character.name} position="50% 14%" /></span>
+              <span className="ew-role-text">
+                <strong>{pick(r.title, lang)}</strong>
+                <small>{r.default_character.name} · {pick(r.default_character.tagline, lang)}</small>
+                <span className="ew-faint ew-small">{pick(r.description, lang)}</span>
+                {r.locked || !r.replaceable ? <span className="ew-chip"><Lock aria-hidden="true" />{t('story.locked')}</span> : <span className="ew-chip friend">{t('story.friendCanPlay')}</span>}
+              </span>
+            </li>
+          ))}
+        </ul>
+        <p className="ew-faint ew-small">{t('story.publicNote')}</p>
+      </section>
+    </div>
+  )
+}
diff --git a/everwith-claude-frontend/src/features/story/StoryPlayPage.tsx b/everwith-claude-frontend/src/features/story/StoryPlayPage.tsx
new file mode 100644
index 00000000..2db802f0
--- /dev/null
+++ b/everwith-claude-frontend/src/features/story/StoryPlayPage.tsx
@@ -0,0 +1,255 @@
+import {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react'
+import {ArrowDown, ArrowLeft, BookOpenText, Clock, Eye, FastForward, Image as ImageIcon, ListChecks, MessageCircle, PanelRightClose, PanelRightOpen, RotateCcw, Search, Type, UserPlus, Users} from 'lucide-react'
+import {useI18n} from '../../app/i18n'
+import {href} from '../../app/router'
+import {toast, useApp} from '../../app/store'
+import {api} from '../../api/adapter'
+import type {StoryCastJSON, StorySegmentJSON, StorySessionJSON, StoryTurnJSON} from '../../api/types'
+import {CompanionRequestError} from '../../contracts/companion'
+import {ConfirmDialog} from '../../components/Dialog'
+import {Portrait, useAssetUrl} from '../../components/Portrait'
+import {SpotArt} from '../../components/Art'
+import {errorArt} from '../../art/generated'
+import {LiveStage} from '../../live2d/LiveStage'
+import {characterFor} from '../../live2d/characters'
+import {Composer} from '../../chat/Composer'
+import {CharacterLine, NarrationLine, PlayerLine, RichText} from '../../chat/RichText'
+import {expressionForText} from '../../chat/presentation'
+import {useAddFriend} from '../friends/AddFriendFlow'
+import {classNames, pick, randomId, readJSON, removeKey, writeJSON} from '../../lib/util'
+
+type Notice = null | {kind: 'unknown'; key: string; turnKind: 'input' | 'continue'; text: string | null} | {kind: 'failed'} | {kind: 'conflict'}
+const draftKey = (account: string, session: string) => `everwith.story.draft.v1:${JSON.stringify([account, session])}`
+
+/**
+ * Story run. Input is always the primary entry; “Continue story” advances without
+ * speaking for the player. A turn's text and its state change commit together on the
+ * (mock) server; while it is validating only the player's own receipt is shown.
+ */
+export default function StoryPlayPage({sessionId}: {sessionId: string}) {
+  const {t, lang} = useI18n()
+  const accountId = useApp(s => s.account?.account?.id ?? s.account?.guest_id ?? 'anon')
+  const [session, setSession] = useState<StorySessionJSON | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [draft, setDraftState] = useState(() => readJSON<string>(draftKey(accountId, sessionId), ''))
+  const [busy, setBusy] = useState(false)
+  const [notice, setNotice] = useState<Notice>(null)
+  const [mode, setMode] = useState<'text' | 'scene'>(() => readJSON<'text' | 'scene'>(`everwith.story.mode.v1:${sessionId}`, 'scene', 'session'))
+  const [panel, setPanel] = useState(() => typeof window === 'undefined' || window.innerWidth >= 1200)
+  const [rollbackTurn, setRollbackTurn] = useState<StoryTurnJSON | null>(null)
+  const sessionRef = useRef<StorySessionJSON | null>(null)
+  sessionRef.current = session
+  const setDraft = useCallback((text: string) => { setDraftState(text); if (text) writeJSON(draftKey(accountId, sessionId), text); else removeKey(draftKey(accountId, sessionId)) }, [accountId, sessionId])
+  const {open: openAddFriend, dialog: addFriendDialog} = useAddFriend(() => { void reload() })
+  // The account may finish loading after the first render (reload): pick up its saved draft then.
+  useEffect(() => {
+    const saved = readJSON<string>(draftKey(accountId, sessionId), '')
+    if (saved) setDraftState(current => current || saved)
+  }, [accountId, sessionId])
+
+  const reload = useCallback(async () => {
+    try { const s = await api.stories.get(sessionId); setSession(s); setError(null); return s } catch (e) { setError(e instanceof CompanionRequestError ? e.code : 'network_error'); return null }
+  }, [sessionId])
+  useEffect(() => { void reload() }, [reload])
+  useEffect(() => { writeJSON(`everwith.story.mode.v1:${sessionId}`, mode, 'session') }, [mode, sessionId])
+
+  // While the world is responding, poll the authoritative session (no partial text is shown).
+  const pendingStatus = session?.pending?.status
+  useEffect(() => {
+    if (!pendingStatus || !['validating', 'accepted'].includes(pendingStatus)) return
+    const timer = setInterval(() => { void reload() }, 600)
+    return () => clearInterval(timer)
+  }, [pendingStatus, reload])
+  useEffect(() => { if (pendingStatus === 'retryable_failed') setNotice({kind: 'failed'}) }, [pendingStatus])
+
+  const send = async (turnKind: 'input' | 'continue', text: string | null, key = randomId('sturn', 10)) => {
+    const s = sessionRef.current
+    if (!s || busy) return
+    setBusy(true); setNotice(null)
+    try {
+      const r = await api.stories.turn(s.id, {key, kind: turnKind, ...(text ? {text} : {}), language: lang, expected_revision: s.revision})
+      setSession(r.session)
+      if (turnKind === 'input') setDraft('')
+    } catch (e) {
+      const code = e instanceof CompanionRequestError ? e.code : 'network_error'
+      // Unknown result: never invent a second turn — retry with the SAME key.
+      if (code === 'network_error') setNotice({kind: 'unknown', key, turnKind, text})
+      else if (code === 'stale_revision' || code === 'operation_pending') { await reload(); setNotice({kind: 'conflict'}) }
+      else toast(code === 'session_read_only' ? t('story.readOnly') : t('error.generic'), 'error')
+    } finally { setBusy(false) }
+  }
+  const control = async (action: 'cancel' | 'retry') => {
+    const s = sessionRef.current
+    if (!s?.pending) return
+    setBusy(true)
+    try {
+      const r = await api.stories.control(s.id, s.pending.operation_id, action)
+      setSession(r.session); setNotice(null)
+      if (action === 'cancel' && r.restored && !draft.trim()) setDraft(r.restored)
+    } catch { await reload() } finally { setBusy(false) }
+  }
+
+  if (error) return (
+    <div className="ew-page"><a className="ew-back ew-btn ghost" href={href.recent()}><ArrowLeft aria-hidden="true" />{t('common.back')}</a>
+      <div className="ew-empty"><SpotArt kind={errorArt(error)} /><h2>{error === 'not_found' ? t('error.notFound') : t('error.generic')}</h2>
+        {error !== 'not_found' && <button type="button" className="ew-btn" onClick={() => void reload()}>{t('common.retry')}</button>}</div></div>
+  )
+  if (!session) return <div className="ew-page-loading" role="status"><span className="ew-spinner" />{t('common.loading')}</div>
+
+  const readOnly = session.status !== 'active'
+  const pending = session.pending
+  const working = !!pending && ['validating', 'accepted'].includes(pending.status)
+  const castByRole = new Map(session.cast.map(c => [c.role_id, c]))
+  const lastSpeaker = (() => {
+    for (let i = session.turns.length - 1; i >= 0; i--) {
+      const seg = [...session.turns[i].segments].reverse().find(g => g.role_id && g.kind !== 'narration')
+      if (seg) return {cast: castByRole.get(seg.role_id!) ?? null, text: seg.text}
+    }
+    return {cast: session.cast[0] ?? null, text: ''}
+  })()
+  const focus = lastSpeaker.cast
+
+  return (
+    <div className={classNames('ew-story', panel && 'panel-open')} data-revision={session.revision} data-testid="story-play">
+      <aside className="ew-story-cast" aria-label={t('story.present')}>
+        <div className="ew-chat-stage-top">
+          <a className="ew-back ew-btn ghost small" href={href.story(session.story_id, session.version)}><ArrowLeft aria-hidden="true" />{t('common.back')}</a>
+          <div className="ew-chat-who"><strong>{pick(session.title, lang)}</strong><small>{t('story.youAre', {role: pick(session.player_role, lang)})}</small></div>
+        </div>
+        <div className="ew-story-stage">
+          {focus && <LiveStage key={focus.character_id} character={characterFor(focus.character_id, '1')} name={focus.name} fallbackImage={focus.avatar} expression={expressionForText(lastSpeaker.text)} preset="stage" />}
+          {focus && <span className="ew-rail-stage-name">{focus.name} · {pick(focus.role_title, lang)}</span>}
+        </div>
+        <ul className="ew-story-cast-list">
+          {session.cast.map(c => <CastRow key={c.role_id} c={c} readOnly={readOnly} onBefriend={separate => openAddFriend({sourceId: c.character_id, version: '1', sourceName: c.character_name, origin: {kind: 'story', session_id: session.id, role_id: c.role_id, ...(separate ? {separate: true} : {})}})} />)}
+        </ul>
+        <p className="ew-chip mock ew-story-mode-chip">{t('story.narrationMode')}</p>
+      </aside>
+
+      <section className="ew-chat-main ew-story-main" aria-label={pick(session.title, lang)}>
+        <div className="ew-story-toolbar">
+          <div className="ew-row" role="group" aria-label={t('story.view')}>
+            <button type="button" className="ew-btn small" aria-pressed={mode === 'scene'} onClick={() => setMode('scene')}><ImageIcon aria-hidden="true" />{t('story.mode.scene')}</button>
+            <button type="button" className="ew-btn small" aria-pressed={mode === 'text'} onClick={() => setMode('text')}><Type aria-hidden="true" />{t('story.mode.text')}</button>
+          </div>
+          <button type="button" className="ew-icon-btn" aria-pressed={panel} aria-expanded={panel} onClick={() => setPanel(p => !p)} aria-label={t('story.known')} title={t('story.known')}>{panel ? <PanelRightClose aria-hidden="true" /> : <PanelRightOpen aria-hidden="true" />}</button>
+        </div>
+        {mode === 'scene' && <SceneBanner state={session.state} lang={lang} />}
+        {readOnly && <div className="ew-notice warn" role="status">{t('story.readOnly')}</div>}
+        {session.state.open_mode && !readOnly && <div className="ew-notice ok" role="status">{t('story.openMode')}</div>}
+        <Transcript session={session} castByRole={castByRole} working={working} onRollback={readOnly || !!pending ? null : setRollbackTurn} />
+        {notice?.kind === 'unknown' && <div className="ew-notice warn" role="alert"><span>{t('story.unknownResult')}<span className="ew-notice-actions">
+          <button type="button" className="ew-btn small" disabled={busy} onClick={() => void send(notice.turnKind, notice.text, notice.key)}>{t('story.retrySame')}</button></span></span></div>}
+        {notice?.kind === 'failed' && pending?.status === 'retryable_failed' && <div className="ew-notice danger" role="alert"><span>{t('story.failed')}<span className="ew-notice-actions">
+          <button type="button" className="ew-btn small" disabled={busy} onClick={() => void control('retry')} data-testid="story-retry">{t('common.retry')}</button>
+          <button type="button" className="ew-btn small ghost" disabled={busy} onClick={() => void control('cancel')}>{t('story.giveUp')}</button></span></span></div>}
+        {notice?.kind === 'conflict' && <div className="ew-notice" role="status"><span>{t('story.conflict')}</span></div>}
+        <div className="ew-composer-wrap ew-story-composer">
+          <div className="ew-story-actions">
+            <button type="button" className="ew-btn small" data-testid="story-continue-btn" disabled={readOnly || busy || !!pending} onClick={() => void send('continue', null)} title={t('story.continueNote')}><FastForward aria-hidden="true" />{t('story.continueStory')}</button>
+            <span className="ew-faint ew-small">{t('story.continueNote')}</span>
+          </div>
+          <Composer value={draft} onChange={setDraft} busy={working || busy} disabled={readOnly} label={t('story.input')} placeholder={readOnly ? t('story.readOnly') : t('story.input')}
+            onSubmit={text => void send('input', text.trim())} onStop={working ? () => void control('cancel') : undefined} />
+        </div>
+      </section>
+
+      <aside className="ew-story-state" aria-label={t('story.known')} hidden={!panel}>
+        <h2 className="ew-card-title"><Eye aria-hidden="true" className="ew-inline-icon" /> {t('story.known')}</h2>
+        <section><h3><ListChecks aria-hidden="true" />{t('story.objectives')}</h3>
+          <ol className="ew-objectives">{session.state.objectives.map((o, i) => <li key={i} className={classNames(o.done && 'is-done', o.current && 'is-current')}>{pick(o.text, lang)}{o.done && <span className="ew-sr"> ✓</span>}</li>)}</ol></section>
+        <section><h3><Search aria-hidden="true" />{t('story.clues')}</h3>
+          {session.state.clues.length ? <ul className="ew-clues">{session.state.clues.map(c => <li key={c.id}>{pick(c.label, lang)}</li>)}</ul> : <p className="ew-faint ew-small">{t('story.noClues')}</p>}</section>
+        <section><h3><Clock aria-hidden="true" />{t('story.time', {m: session.state.minutes})}</h3></section>
+        <section><h3><Users aria-hidden="true" />{t('story.present')}</h3>
+          <p className="ew-small">{session.cast.filter(c => session.state.present.includes(c.role_id)).map(c => `${c.name}（${pick(c.role_title, lang)}）`).join(lang === 'zh' ? '、' : ', ')}</p></section>
+        {session.state.hint && !readOnly && <section className="ew-story-hint"><h3><BookOpenText aria-hidden="true" />{t('story.hint')}</h3><p className="ew-small"><RichText text={pick(session.state.hint, lang)} /></p></section>}
+        <p className="ew-faint ew-small">{t('story.stateNote', {rev: session.revision})}</p>
+      </aside>
+
+      {rollbackTurn && <ConfirmDialog title={t('story.rollback')} body={<><p>{t('story.rollbackConfirm')}</p><blockquote className="ew-quote">{rollbackTurn.input}</blockquote></>} confirmLabel={t('story.rollback')} danger
+        onCancel={() => setRollbackTurn(null)} onConfirm={async () => {
+          const target = rollbackTurn; setRollbackTurn(null)
+          try { const r = await api.stories.rollback(session.id, target.turn_id, session.revision); setSession(r.session); setDraft(r.restored) }
+          catch { toast(t('error.conflict'), 'error'); await reload() }
+        }} />}
+      {addFriendDialog}
+    </div>
+  )
+}
+
+function CastRow({c, readOnly, onBefriend}: {c: StoryCastJSON; readOnly: boolean; onBefriend: (separate: boolean) => void}) {
+  const {t, lang} = useI18n()
+  const official = c.character_id.startsWith('official-')
+  return (
+    <li className="ew-story-cast-row" data-role={c.role_id}>
+      <span className="ew-avatar"><Portrait src={c.avatar} name={c.name} position="50% 14%" /></span>
+      <span className="ew-seat-text"><strong>{c.name}</strong><small>{pick(c.role_title, lang)} · {c.kind === 'friend' ? t('common.friend') : t('common.npc')}</small></span>
+      {c.kind === 'friend' && c.friend_id && <a className="ew-icon-btn" href={href.chat(c.friend_id)} aria-label={`${t('game.toChat')} · ${c.name}`} title={t('game.toChat')}><MessageCircle aria-hidden="true" /></a>}
+      {official && !readOnly && c.kind === 'npc' && <button type="button" className="ew-icon-btn" data-testid={`story-befriend-${c.role_id}`} onClick={() => onBefriend(false)} aria-label={t('story.addFriend', {name: c.name})} title={`${t('story.addFriend', {name: c.name})} — ${t('story.addFriendNote')}`}><UserPlus aria-hidden="true" /></button>}
+      {official && !readOnly && c.kind === 'friend' && <button type="button" className="ew-icon-btn" onClick={() => onBefriend(true)} aria-label={`${t('story.anotherFriend')} · ${c.character_name}`} title={t('story.anotherFriend')}><UserPlus aria-hidden="true" /></button>}
+    </li>
+  )
+}
+
+function Transcript({session, castByRole, working, onRollback}: {session: StorySessionJSON; castByRole: Map<string, StoryCastJSON>; working: boolean; onRollback: ((turn: StoryTurnJSON) => void) | null}) {
+  const {t, lang} = useI18n()
+  const box = useRef<HTMLDivElement>(null)
+  const atEnd = useRef(true)
+  const [unseen, setUnseen] = useState(false)
+  const count = `${session.turns.length}|${session.pending?.operation_id ?? ''}|${session.pending?.status ?? ''}|${session.revision}`
+  // New text never drags a reader who scrolled up; a pill offers the jump instead.
+  useLayoutEffect(() => {
+    const b = box.current
+    if (!b) return
+    if (atEnd.current) { b.scrollTop = b.scrollHeight; setUnseen(false) } else setUnseen(true)
+  }, [count])
+  const segment = (g: StorySegmentJSON) => {
+    if (g.kind === 'narration' || !g.role_id) return <NarrationLine key={g.segment_id}><RichText text={g.text} /></NarrationLine>
+    const c = castByRole.get(g.role_id)
+    const name = c ? `${c.name} · ${pick(c.role_title, lang)}` : g.role_id
+    return <CharacterLine key={g.segment_id} name={name} actorKey={c?.character_id} tone={g.kind === 'action' ? 'ew-line-action' : undefined}
+      avatar={<span className="ew-avatar small"><Portrait src={c?.avatar} name={c?.name ?? '?'} position="50% 14%" /></span>}
+      meta={c?.kind === 'friend' ? <span className="ew-chip friend small">{t('common.friend')}</span> : null}>
+      <p><RichText text={g.text} action={g.kind === 'action'} /></p>
+    </CharacterLine>
+  }
+  return (
+    <div className="ew-transcript-wrap">
+      <div ref={box} className="ew-transcript" role="log" aria-live="off" tabIndex={0} aria-label={pick(session.title, lang)}
+        onScroll={e => { const b = e.currentTarget; atEnd.current = b.scrollHeight - b.scrollTop - b.clientHeight < 40; if (atEnd.current) setUnseen(false) }}>
+        {session.turns.map(turn => (
+          <div key={turn.turn_id} className="ew-turn" data-turn={turn.turn_id}>
+            {turn.kind === 'input' && (turn.input_availability === 'available' && turn.input
+              ? <PlayerLine meta={<span className="ew-receipt">{t('story.receipt')}{onRollback && <button type="button" className="ew-msg-tool" onClick={() => onRollback(turn)}><RotateCcw aria-hidden="true" />{t('story.rollback')}</button>}</span>}><RichText text={turn.input} /></PlayerLine>
+              : <p className="ew-faint ew-small ew-center">{t('story.withdrawn')}</p>)}
+            {turn.kind === 'continue' && <p className="ew-story-divider"><FastForward aria-hidden="true" />{t('story.continueStory')}</p>}
+            {turn.segments.map(segment)}
+            {(turn.delta.clue || turn.delta.minutes > 0) && turn.kind !== 'opening' && <p className="ew-story-delta">{turn.delta.clue && <span className="ew-chip ok">{t('story.newClue', {clue: pick(turn.delta.clue, lang)})}</span>} <span className="ew-faint">+{turn.delta.minutes} min</span></p>}
+          </div>
+        ))}
+        {session.pending && (
+          <div className="ew-turn is-pending" data-testid="story-pending">
+            {session.pending.kind === 'input' && session.pending.text && <PlayerLine provisional meta={<span className="ew-receipt">{t('story.receipt')}</span>}><RichText text={session.pending.text} /></PlayerLine>}
+            {session.pending.kind === 'continue' && <p className="ew-story-divider"><FastForward aria-hidden="true" />{t('story.continueStory')}</p>}
+            {working && <p className="ew-typing" role="status"><span className="ew-spinner" />{t('story.validating')}</p>}
+          </div>
+        )}
+      </div>
+      {unseen && <button type="button" className="ew-new-pill" onClick={() => { const b = box.current; if (b) { b.scrollTop = b.scrollHeight; atEnd.current = true; setUnseen(false) } }}><ArrowDown aria-hidden="true" />{t('chat.toBottom')}</button>}
+    </div>
+  )
+}
+
+/** Where the story is now (generated scene art, cropped to its reviewed band) and its name. */
+function SceneBanner({state, lang}: {state: StorySessionJSON['state']; lang: 'zh' | 'en'}) {
+  const url = useAssetUrl(state.scene_image)
+  const [failed, setFailed] = useState(false)
+  useEffect(() => setFailed(false), [url])
+  return (
+    <div className="ew-story-scene" data-scene={state.scene}>
+      {url && !failed && <img src={url} alt="" decoding="async" draggable={false} style={{objectPosition: `50% ${state.scene_position ?? '50%'}`}} onError={() => setFailed(true)} />}
+      {state.scene_label && <span className="ew-story-scene-label">{pick(state.scene_label, lang)}</span>}
+    </div>
+  )
+}
diff --git a/everwith-claude-frontend/src/features/story/StoryPreparePage.tsx b/everwith-claude-frontend/src/features/story/StoryPreparePage.tsx
new file mode 100644
index 00000000..7c827d5a
--- /dev/null
+++ b/everwith-claude-frontend/src/features/story/StoryPreparePage.tsx
@@ -0,0 +1,138 @@
+import {useEffect, useMemo, useRef, useState} from 'react'
+import {ArrowLeft, Lock, Play, Users} from 'lucide-react'
+import {useI18n} from '../../app/i18n'
+import {href, navigate} from '../../app/router'
+import {refreshFriends, useApp} from '../../app/store'
+import {api} from '../../api/adapter'
+import type {StoryJSON} from '../../api/types'
+import {CompanionRequestError} from '../../contracts/companion'
+import {Portrait} from '../../components/Portrait'
+import {SpotArt} from '../../components/Art'
+import {errorArt} from '../../art/generated'
+import {pick, randomId} from '../../lib/util'
+
+const MAX_AI = 10
+type Choice = {role_id: string; friend_id: string; friend_epoch: number}
+
+/**
+ * Story setup: player identity, original cast, optional friend casting. Nothing is created
+ * until “Start this run”; one idempotency key per preparation (double click / retry safe).
+ * The server re-checks seats, locks, the 10-AI limit, one-role-per-friend and epochs.
+ */
+export default function StoryPreparePage({storyId, version, withFriend, from}: {storyId: string; version: string; withFriend: string | null; from: string | null}) {
+  const {t, lang} = useI18n()
+  const friends = useApp(s => s.friends) ?? []
+  const account = useApp(s => s.account)
+  const [story, setStory] = useState<StoryJSON | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [cast, setCast] = useState<Choice[]>([])
+  const [busy, setBusy] = useState(false)
+  const [startError, setStartError] = useState<string | null>(null)
+  const key = useRef(randomId('sstart', 10))
+  const seededFriend = useRef(false)
+  const back = from ?? href.story(storyId, version)
+
+  useEffect(() => { void refreshFriends() }, [])
+  useEffect(() => {
+    api.catalog.story(storyId, version).then(setStory).catch(e => setError(e instanceof CompanionRequestError ? e.code : 'network_error'))
+  }, [storyId, version])
+  // “一起玩” from a friend: put them in the first open, replaceable role (still editable).
+  useEffect(() => {
+    if (!story || !withFriend || seededFriend.current) return
+    const f = friends.find(x => x.id === withFriend)
+    const role = story.roles.find(r => r.replaceable && !r.locked)
+    if (f && role) { seededFriend.current = true; setCast([{role_id: role.id, friend_id: f.id, friend_epoch: f.epoch}]) }
+  }, [story, withFriend, friends])
+
+  const used = useMemo(() => new Map(cast.map(c => [c.friend_id, c.role_id])), [cast])
+  if (error) return <div className="ew-page"><a className="ew-back ew-btn ghost" href={back}><ArrowLeft aria-hidden="true" />{t('common.back')}</a><div className="ew-empty"><SpotArt kind={errorArt(error)} /><h2>{error === 'not_found' ? t('error.notFound') : t('error.generic')}</h2></div></div>
+  if (!story) return <div className="ew-page-loading" role="status"><span className="ew-spinner" />{t('common.loading')}</div>
+  const aiCount = story.roles.length
+  const invalid = aiCount > MAX_AI || cast.some(c => story.roles.find(r => r.id === c.role_id)?.locked) || new Set(cast.map(c => c.friend_id)).size !== cast.length
+
+  const start = async () => {
+    if (busy || invalid) return
+    setBusy(true); setStartError(null)
+    try {
+      const session = await api.stories.start({key: key.current, story_id: story.id, version: story.version, cast, language: lang, expected_account_id: account?.account?.id ?? account?.guest_id ?? ''})
+      navigate(href.storyPlay(session.id), {replace: true})
+    } catch (e) {
+      const code = e instanceof CompanionRequestError ? e.code : 'network_error'
+      // Same key on retry: the server returns the run it may already have created.
+      setStartError(code === 'network_error' ? t('story.startUnknown') : code === 'friend_epoch_changed' || code === 'friend_unavailable' ? t('error.conflict') : t('error.generic'))
+      if (code === 'friend_epoch_changed' || code === 'friend_unavailable') { await refreshFriends(); setCast([]); key.current = randomId('sstart', 10) }
+    } finally { setBusy(false) }
+  }
+
+  return (
+    <div className="ew-page ew-prepare ew-story-prepare">
+      <a className="ew-back ew-btn ghost" href={back}><ArrowLeft aria-hidden="true" />{t('common.back')}</a>
+      <div className="ew-prepare-layout">
+        <section className="ew-prepare-main" aria-labelledby="sprep-title">
+          <p className="ew-eyebrow">{t('story.prepare')} · v{story.version}</p>
+          <h1 id="sprep-title" className="ew-title-xl">{pick(story.title, lang)}</h1>
+          <div className="ew-prepare-block">
+            <h2 className="ew-section-title">{t('story.playerRole')}</h2>
+            <p className="ew-player-role"><strong>{pick(story.player_role, lang)}</strong> <span className="ew-faint">· {t('story.playedBy', {name: account?.persona?.name || t('common.you')})}</span></p>
+          </div>
+          <div className="ew-prepare-block">
+            <h2 className="ew-section-title">{t('story.cast')} <span className="ew-chip">{t('story.aiCount', {n: aiCount})}</span></h2>
+            <ol className="ew-seat-list">
+              {story.roles.map(r => {
+                const chosen = cast.find(c => c.role_id === r.id)
+                const f = chosen ? friends.find(x => x.id === chosen.friend_id) : null
+                const locked = r.locked || !r.replaceable
+                return (
+                  <li key={r.id} className="ew-seat-row ew-cast-row" data-role={r.id}>
+                    <span className="ew-avatar large"><Portrait src={f?.avatar ?? r.default_character.avatar} name={f?.name ?? r.default_character.name} position="50% 14%" /></span>
+                    <span className="ew-seat-name ew-cast-text">
+                      <strong>{pick(r.title, lang)}</strong>
+                      <span className="ew-faint ew-small">{pick(r.description, lang)}</span>
+                      <span className="ew-row wrap">
+                        <span>{f ? f.name : r.default_character.name}</span>
+                        {f ? <span className="ew-chip friend">{t('common.friend')} · {f.source_name} #{f.display_number}</span> : <span className="ew-chip temp">{t('common.npc')}</span>}
+                        {locked && <span className="ew-chip"><Lock aria-hidden="true" />{t('story.locked')}</span>}
+                      </span>
+                    </span>
+                    {locked ? <span className="ew-faint ew-small ew-seat-select">{t('story.lockedNote')}</span> : (
+                      <label className="ew-seat-select">
+                        <span className="ew-sr">{pick(r.title, lang)}</span>
+                        <select className="ew-select" data-testid={`cast-${r.id}`} value={chosen ? `f:${chosen.friend_id}` : 'npc'} onChange={e => {
+                          const value = e.target.value
+                          setCast(prev => {
+                            const rest = prev.filter(c => c.role_id !== r.id)
+                            if (value === 'npc') return rest
+                            const fr = friends.find(x => x.id === value.slice(2))!
+                            return [...rest, {role_id: r.id, friend_id: fr.id, friend_epoch: fr.epoch}]
+                          })
+                        }}>
+                          <option value="npc">{t('story.uninvite')} · {r.default_character.name}</option>
+                          {friends.length > 0 && <optgroup label={t('story.invite')}>
+                            {friends.map(fr => {
+                              const elsewhere = used.has(fr.id) && used.get(fr.id) !== r.id
+                              return <option key={fr.id} value={`f:${fr.id}`} disabled={elsewhere}>{fr.name} · {fr.source_name} #{fr.display_number}{elsewhere ? ` (${t('story.friendUsed')})` : ''}</option>
+                            })}
+                          </optgroup>}
+                        </select>
+                      </label>
+                    )}
+                  </li>
+                )
+              })}
+            </ol>
+            {friends.length === 0 && <p className="ew-faint ew-small"><Users aria-hidden="true" className="ew-inline-icon" /> {account?.authenticated ? t('story.noFriends') : t('friends.guest')}</p>}
+          </div>
+          <div className="ew-notice"><span>{t('story.adapt')}</span></div>
+        </section>
+        <aside className="ew-prepare-side">
+          <div className="ew-prepare-poster">{story.image ? <Portrait src={story.image} name={pick(story.title, lang)} /> : <span className="ew-story-cover-fallback" aria-hidden="true" />}</div>
+          <div className="ew-notice mock"><span>{t('story.narrationMode')}</span></div>
+          <p className="ew-faint ew-small">{t('story.noRecord')}</p>
+          {startError && <div className="ew-notice danger" role="alert">{startError}</div>}
+          <button type="button" className="ew-btn primary wide ew-start-btn" data-testid="story-start" disabled={busy || invalid} onClick={() => void start()}>
+            {busy ? <span className="ew-spinner" /> : <Play aria-hidden="true" />}{busy ? t('game.starting') : startError ? t('story.startRetry') : t('story.startConfirm')}</button>
+        </aside>
+      </div>
+    </div>
+  )
+}
diff --git a/everwith-claude-frontend/src/games/engines/PROVENANCE.json b/everwith-claude-frontend/src/games/engines/PROVENANCE.json
new file mode 100644
index 00000000..1ab2b5f4
--- /dev/null
+++ b/everwith-claude-frontend/src/games/engines/PROVENANCE.json
@@ -0,0 +1,50 @@
+{
+  "note": "Byte-identical copies of the frozen pure-engine reference slices (product commit 677b1b4b). Typings in *.d.ts are new.",
+  "files": [
+    {
+      "file": "royale/engine.ts",
+      "handoff_source": "reference/games/royale/src/engine.ts",
+      "sha256": "6c42f3a38187b0848a297f0ee96465da9e325dc5fdc64bce983988c1a30ceed2"
+    },
+    {
+      "file": "splendor/src/data.js",
+      "handoff_source": "reference/games/splendor/src/data.js",
+      "sha256": "39a0043dc1d85447c7604efd0713738b178511b318f8aa554ff422cfb38ee056"
+    },
+    {
+      "file": "splendor/src/engine.js",
+      "handoff_source": "reference/games/splendor/src/engine.js",
+      "sha256": "f710ec9198ccdadcd9b754170ecec9629dffc1b7e1f9659f1b5c481fa4a3d4ee"
+    },
+    {
+      "file": "splendor/splendor/rules.js",
+      "handoff_source": "reference/games/splendor/splendor/rules.js",
+      "sha256": "62c785dfea2c79091cea32f5549d2b72f12ab2933502a2d3b1fa80f91ed030fa"
+    },
+    {
+      "file": "splendor/splendor/rules-v2.js",
+      "handoff_source": "reference/games/splendor/splendor/rules-v2.js",
+      "sha256": "4f4b32677f7ebcbf42082dba4e0395b3f4965e571bd16ff0a86f9281112c0699"
+    },
+    {
+      "file": "splendor/splendor/npc.js",
+      "handoff_source": "reference/games/splendor/splendor/npc.js",
+      "sha256": "981a5908b2abf871bb8be770b67abd415ca5ac22bf8710524765f25dd6d54fb2"
+    },
+    {
+      "file": "cabo/engine.js",
+      "handoff_source": "reference/games/cabo/src/engine.js",
+      "sha256": "020a77057827a5c2a6345612fdbee106645d7515d34851dac36b7e882fde1913"
+    },
+    {
+      "file": "cabo/core.js",
+      "handoff_source": "reference/games/cabo/src/core.js",
+      "sha256": "b18ef94aa13d85c6086ce2bce2e4b9a5e61e9fda7bc106c1ed4eef015e830b9a"
+    },
+    {
+      "file": "cabo/rule-evidence.js",
+      "handoff_source": "reference/games/cabo/src/rule-evidence.js",
+      "sha256": "e006d9546abe89b96543c0e5d0ce2fdf8194aca5abd42a9222dce4050f769813"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/everwith-claude-frontend/src/games/engines/cabo/core.d.ts b/everwith-claude-frontend/src/games/engines/cabo/core.d.ts
new file mode 100644
index 00000000..e055ca3a
--- /dev/null
+++ b/everwith-claude-frontend/src/games/engines/cabo/core.d.ts
@@ -0,0 +1,7 @@
+export function check(ok: unknown, message: string): void
+export function random(s: {rng: number}): number
+export function shuffle<T>(s: {rng: number}, input: T[]): T[]
+export function sum(a: number[]): number
+export function emit(s: unknown, type: string, details?: Record<string, unknown>): number
+export function record(s: unknown, old: unknown, actor: number, a: unknown): unknown
+export function seeded(seed: number): () => number
diff --git a/everwith-claude-frontend/src/games/engines/cabo/core.js b/everwith-claude-frontend/src/games/engines/cabo/core.js
new file mode 100644
index 00000000..7943cb5d
--- /dev/null
+++ b/everwith-claude-frontend/src/games/engines/cabo/core.js
@@ -0,0 +1,7 @@
+export const check=(ok,message)=>{if(!ok)throw Error(message);};
+export function random(s){s.rng=(Math.imul(s.rng,1664525)+1013904223)>>>0;return s.rng/4294967296;}
+export function shuffle(s,input){const a=[...input];for(let i=a.length-1;i>0;i--){const j=Math.floor(random(s)*(i+1));[a[i],a[j]]=[a[j],a[i]];}return a;}
+export const sum=a=>a.reduce((n,x)=>n+x,0);
+export const emit=(s,type,details={})=>s.events.push({type,...details});
+export function record(s,old,actor,a){s.revision++;s.history.push({id:s.revision,round:old.round,actor,action:structuredClone(a),events:structuredClone(s.events)});return s;}
+export function seeded(seed){let x=seed>>>0;return()=>{x=(Math.imul(x,1664525)+1013904223)>>>0;return x/4294967296;};}
diff --git a/everwith-claude-frontend/src/games/engines/cabo/engine.d.ts b/everwith-claude-frontend/src/games/engines/cabo/engine.d.ts
new file mode 100644
index 00000000..f5fe6492
--- /dev/null
+++ b/everwith-claude-frontend/src/games/engines/cabo/engine.d.ts
@@ -0,0 +1,47 @@
+import type {CaboAbility} from './rule-evidence'
+export {ability} from './rule-evidence'
+export type {CaboAbility}
+export type CaboPhase = 'setup' | 'reveal' | 'turn' | 'drawn' | 'exchange' | 'ability' | 'roundEnd' | 'ended'
+export type CaboAction =
+  | {type: 'initialPeek'; cards: string[]}
+  | {type: 'ack'}
+  | {type: 'call'}
+  | {type: 'draw'; source: 'deck' | 'discard'}
+  | {type: 'exchange'; cards: string[]}
+  | {type: 'discard'; useAbility?: boolean}
+  | {type: 'cancelAbility'}
+  | {type: 'swap'; own: string; other: string}
+  | {type: 'peek'; card: string}
+  | {type: 'nextRound'}
+/** Full authoritative state. Only the local mock authority may hold it. */
+export type CaboState = {
+  game: 'cabo'; version: 3; edition: string; rng: number
+  players: {id: number; total: number; resetUsed: boolean; cards: string[]; roundGain: number; positions: Record<string, number>}[]
+  round: number; starter: number; current: number; phase: CaboPhase
+  deck: string[]; discard: string[]; truth: Record<string, number>; up: Record<string, boolean>; knowledge: Record<string, number>[]
+  setupDone: number[]; drawn: string | null; drawnFrom: 'deck' | 'discard' | null; caller: number | null; finalQueue: number[]
+  privateReveal: {player: number; cards: string[]; reason: string} | null; activeAbility: CaboAbility | null
+  ended: boolean; winners: number[]; events: CaboEvent[]; history: unknown[]; revision: number; roundResults: CaboScoreRow[]
+}
+export type CaboEvent = {type: string; [key: string]: unknown}
+export type CaboScoreRow = {player: number; values: number[]; sum: number; gain: number; reason: 'shootingTheMoon' | 'lowest' | 'caboFailed' | 'cardSum'; before?: number; rawAfter?: number; reset?: boolean; after?: number}
+export type CaboCardView = {id: string; slot: number; faceUp: boolean; value: number | null}
+/** Allowlisted observer projection (what a seat may see). */
+export type CaboObservation = {
+  game: 'cabo'; version: 3; edition: string; ruleEvidence: Record<string, unknown>; observer: number | null
+  round: number; current: number; starter: number; phase: CaboPhase; revision: number
+  deck: null[]; discard: {id: string; value: number}[]
+  players: {id: number; total: number; resetUsed: boolean; roundGain: number; cards: CaboCardView[]}[]
+  knowledge: Record<string, number>
+  drawn: {id: string; value: number | null} | null; drawnFrom: 'deck' | 'discard' | null
+  privateReveal: {player: number; reason: string; cards: {id: string; value: number}[]} | null
+  activeAbility: CaboAbility | null; caller: number | null; finalQueue: number[]; ended: boolean; winners: number[]
+  roundResults: CaboScoreRow[]; events: CaboEvent[]
+}
+export const DECK: number[]
+export function create(options?: {players?: number; seed?: number}): CaboState
+export function roundScores(s: CaboState): CaboScoreRow[]
+export function act(state: CaboState, actor: number, action: CaboAction): CaboState
+export function observe(s: CaboState, id?: number | null): CaboObservation
+export function assertState(s: CaboState): true
+export function decide(o: CaboObservation, difficulty?: 'easy' | 'medium' | 'hard', options?: {seed?: number}): CaboAction
diff --git a/everwith-claude-frontend/src/games/engines/cabo/engine.js b/everwith-claude-frontend/src/games/engines/cabo/engine.js
new file mode 100644
index 00000000..d4b28c58
--- /dev/null
+++ b/everwith-claude-frontend/src/games/engines/cabo/engine.js
@@ -0,0 +1,71 @@
+import {check,random,shuffle,sum,emit,record,seeded} from './core.js';
+import {RULE_EVIDENCE,PROVISIONAL_COMPONENT_PROFILE,ability} from './rule-evidence.js';
+export {ability};
+export const DECK=PROVISIONAL_COMPONENT_PROFILE.counts.flatMap((count,v)=>Array(count).fill(v));
+export function create({players=4,seed=711}={}){check(Number.isInteger(players)&&players>=2&&players<=5,'players');const s={game:'cabo',version:3,edition:'Shareful 2025 English procedures / provisional components',rng:seed>>>0,players:Array.from({length:players},(_,id)=>({id,total:0,resetUsed:false,cards:[],roundGain:0})),round:1,starter:0,current:0,phase:'setup',deck:[],discard:[],truth:{},up:{},knowledge:[],setupDone:[],drawn:null,drawnFrom:null,caller:null,finalQueue:[],privateReveal:null,activeAbility:null,ended:false,winners:[],events:[],history:[],revision:0,roundResults:[]};s.starter=Math.floor(random(s)*players);setup(s);return s;}
+function setup(s){s.truth={};s.up={};s.roundResults=[];let ids=shuffle(s,DECK).map((value,i)=>{const id=`c${s.round}-${i}`;s.truth[id]=value;return id;});s.deck=shuffle(s,ids);s.players.forEach(p=>{p.cards=s.deck.splice(-4);p.positions=Object.fromEntries(p.cards.map((id,i)=>[id,i]));});s.discard=[s.deck.pop()];s.up[s.discard[0]]=true;s.knowledge=s.players.map(()=>({}));s.setupDone=[];s.current=s.starter;s.phase='setup';s.drawn=null;s.drawnFrom=null;s.caller=null;s.finalQueue=[];s.privateReveal=null;s.activeAbility=null;emit(s,'deal',{round:s.round,count:4});assertState(s);}
+function expose(s,ids){for(const id of ids){s.up[id]=true;for(const k of s.knowledge)k[id]=s.truth[id];}}
+function finishTurn(s){s.drawn=null;s.drawnFrom=null;s.privateReveal=null;s.activeAbility=null;if(s.caller!==null)s.finalQueue=s.finalQueue.filter(id=>id!==s.current);if(s.caller!==null&&!s.finalQueue.length){scoreRound(s);return;}s.current=(s.current+1)%s.players.length;s.phase='turn';emit(s,'turn',{player:s.current});}
+function recycle(s){
+ const top=s.discard.pop();
+ check(top&&s.discard.length,'emptyPile');
+ s.deck=shuffle(s,s.discard);s.discard=[top];
+ for(const id of s.deck){s.up[id]=false;for(const k of s.knowledge)delete k[id];}
+ emit(s,'reshuffle',{count:s.deck.length});
+}
+export function roundScores(s){
+ const totals=s.players.map(p=>sum(p.cards.map(id=>s.truth[id]))),low=Math.min(...totals);
+ const moon=s.players.find(p=>p.cards.length===4&&p.cards.map(id=>s.truth[id]).sort((a,b)=>a-b).join(',')==='12,12,13,13')?.id;
+ const callerWins=s.caller!==null&&totals[s.caller]===low;
+ return s.players.map(p=>{
+ const winner=totals[p.id]===low&&(!callerWins||p.id===s.caller);
+ const failed=p.id===s.caller&&!callerWins;
+ return {player:p.id,values:p.cards.map(id=>s.truth[id]),sum:totals[p.id],gain:moon!==undefined?(p.id===moon?0:50):winner?0:totals[p.id]+(failed?5:0),reason:moon!==undefined?'shootingTheMoon':winner?'lowest':failed?'caboFailed':'cardSum'};
+ });
+}
+function scoreRound(s){const rows=roundScores(s);expose(s,s.players.flatMap(p=>p.cards));for(const r of rows){const p=s.players[r.player];r.before=p.total;r.rawAfter=p.total+r.gain;p.total=r.rawAfter;p.roundGain=r.gain;r.reset=p.total===100&&!p.resetUsed;if(r.reset){p.total=50;p.resetUsed=true;}r.after=p.total;}s.roundResults=rows;emit(s,'roundScore',{rows});s.phase='roundEnd';s.drawn=null;s.privateReveal=null;if(s.players.some(p=>p.total>100)){s.ended=true;s.phase='ended';const sorted=[...s.players].sort((a,b)=>a.total-b.total),best=sorted[0];s.winners=sorted.filter(p=>p.total===best.total).map(p=>p.id);emit(s,'end',{winners:s.winners});}}
+export function act(state,actor,a){check(!state.ended,'ended');check(Number.isInteger(actor)&&actor>=0&&actor<state.players.length,'actor');check(a&&typeof a.type==='string','action');check(actor===state.current||state.phase==='roundEnd','turn');const s=structuredClone(state);s.events=[];const p=s.players[actor];
+ if(a.type==='nextRound'){check(s.phase==='roundEnd','phase');const low=Math.min(...s.players.map(p=>p.roundGain));for(let i=1;i<=s.players.length;i++){const id=(s.starter+i)%s.players.length;if(s.players[id].roundGain===low){s.starter=id;break;}}s.round++;setup(s);}
+ else if(s.phase==='setup'){check(a.type==='initialPeek'&&a.cards?.length===2&&new Set(a.cards).size===2&&a.cards.every(id=>p.cards.includes(id)),'peekTwo');for(const id of a.cards)s.knowledge[actor][id]=s.truth[id];s.privateReveal={player:actor,cards:a.cards,reason:'setup'};s.phase='reveal';emit(s,'peek',{player:actor,count:2,target:actor});}
+ else if(s.phase==='reveal'){check(a.type==='ack','ack');const setupPeek=s.privateReveal.reason==='setup';s.privateReveal=null;if(setupPeek){s.setupDone.push(actor);if(s.setupDone.length===s.players.length){s.current=s.starter;s.phase='turn';}else{s.current=(actor+1)%s.players.length;s.phase='setup';}}else finishTurn(s);}
+ else if(s.phase==='turn'){
+  if(a.type==='call'){check(s.caller===null,'called');s.caller=actor;s.finalQueue=Array.from({length:s.players.length-1},(_,i)=>(actor+i+1)%s.players.length);emit(s,'call',{player:actor,remaining:s.finalQueue.length});s.current=(actor+1)%s.players.length;}
+  else{check(a.type==='draw'&&['deck','discard'].includes(a.source),'draw');if(a.source==='deck'&&!s.deck.length)recycle(s);const pile=a.source==='deck'?s.deck:s.discard;check(pile.length,'emptyPile');s.drawn=pile.pop();s.drawnFrom=a.source;s.knowledge[actor][s.drawn]=s.truth[s.drawn];if(a.source==='discard')expose(s,[s.drawn]);s.phase=a.source==='deck'?'drawn':'exchange';emit(s,'draw',{player:actor,source:a.source,card:s.drawn});if(a.source==='deck'&&!s.deck.length)recycle(s);}
+ }
+ else if(s.phase==='drawn'||s.phase==='exchange'){
+  if(a.type==='exchange'){check(a.cards?.length&&new Set(a.cards).size===a.cards.length&&a.cards.every(id=>p.cards.includes(id)),'selectCards');const ordered=p.cards.filter(id=>a.cards.includes(id)),values=ordered.map(id=>s.truth[id]),match=new Set(values).size===1,drawn=s.drawn,from=s.drawnFrom;expose(s,ordered);if(match){const first=p.cards.indexOf(ordered[0]);p.cards=p.cards.flatMap((id,i)=>i===first?[drawn]:ordered.includes(id)?[]:[id]);s.discard.push(...ordered);const slot=p.positions[ordered[0]];for(const id of ordered)delete p.positions[id];p.positions[drawn]=slot;s.up[drawn]=false;emit(s,'exchange',{player:actor,removed:ordered,values,card:drawn,from,count:p.cards.length});}else{s.discard.push(drawn);s.up[drawn]=true;for(const id of ordered)s.up[id]=false;emit(s,'matchFailed',{player:actor,cards:ordered,values,card:drawn,count:p.cards.length});}finishTurn(s);}
+  else{check(s.phase==='drawn'&&a.type==='discard','mustExchange');const drawn=s.drawn,v=s.truth[drawn];s.discard.push(drawn);expose(s,[drawn]);emit(s,'discard',{player:actor,card:drawn,value:v});s.drawn=null;const ab=ability(v);if(a.useAbility&&ab){s.activeAbility=ab;s.phase='ability';const targetExists=ab==='swap'||s.players.some(q=>(ab==='peek'?q.id===actor:q.id!==actor)&&q.cards.some(id=>!s.up[id]));if(!targetExists)finishTurn(s);}else finishTurn(s);}
+ }
+ else if(s.phase==='ability'){
+  if(a.type==='cancelAbility'){emit(s,'abilityDeclined',{player:actor,ability:s.activeAbility});finishTurn(s);}
+  else if(s.activeAbility==='swap'){check(a.type==='swap'&&p.cards.includes(a.own),'swapOwn');const other=s.players.find(q=>q.id!==actor&&q.cards.includes(a.other));check(other,'swapOther');const i=p.cards.indexOf(a.own),j=other.cards.indexOf(a.other);const ownSlot=p.positions[a.own],otherSlot=other.positions[a.other];delete p.positions[a.own];delete other.positions[a.other];p.positions[a.other]=ownSlot;other.positions[a.own]=otherSlot;p.cards[i]=a.other;other.cards[j]=a.own;emit(s,'swap',{player:actor,otherPlayer:other.id,own:a.own,other:a.other});finishTurn(s);}
+  else{check(a.type==='peek','peek');const owner=s.players.find(q=>q.cards.includes(a.card));check(owner&&!s.up[a.card]&&(s.activeAbility==='peek'?owner.id===actor:owner.id!==actor),'peekTarget');s.knowledge[actor][a.card]=s.truth[a.card];s.privateReveal={player:actor,cards:[a.card],reason:s.activeAbility};s.phase='reveal';emit(s,'peek',{player:actor,target:owner.id,count:1});}
+ }else check(false,'phase');record(s,state,actor,a);assertState(s);return s;
+}
+// Allowlisted observer projection. Private state never crosses the HTTP boundary.
+export function observe(s,id=null){
+ const authorized=Number.isInteger(id)&&id>=0&&id<s.players.length;
+ const publicValue=card=>s.up[card]||s.phase==='roundEnd'||s.ended?s.truth[card]:null;
+ return {
+ game:s.game,version:s.version,edition:s.edition,ruleEvidence:{...RULE_EVIDENCE},observer:authorized?id:null,
+ round:s.round,current:s.current,starter:s.starter,phase:s.phase,revision:s.revision,
+ deck:Array(s.deck.length).fill(null),discard:s.discard.map(card=>({id:card,value:s.truth[card]})),
+ players:s.players.map(p=>({id:p.id,total:p.total,resetUsed:p.resetUsed,roundGain:p.roundGain,cards:p.cards.map(card=>({id:card,slot:p.positions[card],faceUp:!!s.up[card],value:publicValue(card)}))})),
+ knowledge:authorized?Object.fromEntries(Object.entries(s.knowledge[id]).filter(([card,value])=>typeof value==='number'&&s.truth[card]!==undefined)):{},
+ drawn:s.drawn?{id:s.drawn,value:s.current===id||s.drawnFrom==='discard'?s.truth[s.drawn]:null}:null,drawnFrom:s.drawnFrom,
+ privateReveal:authorized&&s.privateReveal?.player===id?{player:s.privateReveal.player,reason:s.privateReveal.reason,cards:s.privateReveal.cards.map(card=>({id:card,value:s.truth[card]}))}:null,
+ activeAbility:s.activeAbility,caller:s.caller,finalQueue:[...s.finalQueue],ended:s.ended,winners:[...s.winners],roundResults:['roundEnd','ended'].includes(s.phase)?publicScoreRows(s.roundResults):[],
+ // Events contain only public commits; failed matches were shown to the table.
+ events:s.events.map(publicRuleEvent).filter(Boolean)
+ };
+}
+const EVENT_FIELDS=Object.freeze({deal:['round','count'],turn:['player'],reshuffle:['count'],call:['player','remaining'],exchange:['player','removed','values','card','from','count'],matchFailed:['player','cards','values','card','count'],discard:['player','card','value'],swap:['player','otherPlayer','own','other'],abilityDeclined:['player','ability'],roundScore:['rows'],end:['winners']});
+function publicScoreRows(rows){return rows.map(r=>Object.fromEntries(['player','values','sum','gain','reason','before','rawAfter','reset','after'].filter(k=>r[k]!==undefined).map(k=>[k,structuredClone(r[k])])));}
+function publicRuleEvent(e){const fields=EVENT_FIELDS[e.type];if(!fields)return null;const projected={type:e.type};for(const key of fields)if(e[key]!==undefined)projected[key]=structuredClone(e[key]);if(e.type==='roundScore')projected.rows=publicScoreRows(e.rows);return projected;}
+export function assertState(s){const ids=[...s.deck,...s.discard,...s.players.flatMap(p=>p.cards),...(s.drawn?[s.drawn]:[])];check(ids.length===52&&new Set(ids).size===52,'cardsConservation');check(DECK.every((_,i)=>Object.values(s.truth).sort((a,b)=>a-b)[i]===DECK[i]),'valuesConservation');check(s.players.every(p=>p.cards.length>=1&&p.cards.length<=4&&p.total>=0&&new Set(p.cards.map(id=>p.positions[id])).size===p.cards.length),'playersState');return true;}
+export function decide(o,difficulty='medium',{seed=1}={}){const p=o.players[o.current],rng=seeded(seed),known=c=>c.value??o.knowledge[c.id],estimate=c=>known(c)??6.5;
+ if(o.phase==='setup')return{type:'initialPeek',cards:[p.cards[0].id,p.cards.at(-1).id]};if(o.phase==='reveal')return{type:'ack'};if(o.phase==='roundEnd')return{type:'nextRound'};
+ const high=[...p.cards].sort((a,b)=>estimate(b)-estimate(a)),groups=new Map();for(const c of p.cards)if(known(c)!==undefined){const v=known(c);groups.set(v,[...(groups.get(v)||[]),c.id]);}
+ if(o.phase==='turn'){const own=sum(p.cards.map(estimate)),other=Math.min(...o.players.filter(q=>q.id!==p.id).map(q=>sum(q.cards.map(estimate)))),threshold=difficulty==='easy'?12:difficulty==='hard'?9:10;if(o.caller===null&&(own<=threshold||own<other-7&&p.cards.every(c=>known(c)!==undefined)))return{type:'call'};const top=o.discard.at(-1),matches=[...groups.entries()].find(([v,g])=>g.length>1&&v*g.length>(top?.value??99)+2);if(top&&(top.value<estimate(high[0])-2||matches))return{type:'draw',source:'discard'};return{type:'draw',source:'deck'};}
+ if(o.phase==='drawn'||o.phase==='exchange'){const v=o.drawn.value,match=[...groups.entries()].filter(([value,g])=>g.length>1).sort((a,b)=>b[0]*b[1].length-a[0]*a[1].length)[0];if(match&&(o.phase==='exchange'||match[0]*match[1].length>v))return{type:'exchange',cards:match[1]};const target=difficulty==='easy'&&rng()<.2?p.cards[Math.floor(rng()*p.cards.length)]:high[0];if(o.phase==='exchange'||v<estimate(target)-.7)return{type:'exchange',cards:[target.id]};return{type:'discard',useAbility:!!ability(v)};}
+ if(o.phase==='ability'){if(o.activeAbility==='swap'){const opponents=o.players.filter(q=>q.id!==p.id).flatMap(q=>q.cards),low=opponents.sort((a,b)=>estimate(a)-estimate(b))[0];return{type:'swap',own:high[0].id,other:low.id};}const targets=o.players.filter(q=>o.activeAbility==='peek'?q.id===p.id:q.id!==p.id).flatMap(q=>q.cards).filter(c=>!c.faceUp);targets.sort((a,b)=>(known(a)!==undefined)-(known(b)!==undefined));return{type:'peek',card:targets[0].id};}throw Error('phase');}
diff --git a/everwith-claude-frontend/src/games/engines/cabo/rule-evidence.d.ts b/everwith-claude-frontend/src/games/engines/cabo/rule-evidence.d.ts
new file mode 100644
index 00000000..a999df51
--- /dev/null
+++ b/everwith-claude-frontend/src/games/engines/cabo/rule-evidence.d.ts
@@ -0,0 +1,4 @@
+export type CaboAbility = 'peek' | 'spy' | 'swap'
+export const RULE_EVIDENCE: Readonly<Record<string, unknown> & {completePhysicalRulesVerified: false; components: string; abilityNumbers: string; chineseEdition: string; procedureScope: Readonly<Record<string, readonly string[]>>}>
+export const PROVISIONAL_COMPONENT_PROFILE: Readonly<{name: string; verified: false; abilities: Readonly<Record<number, CaboAbility>>; counts: readonly number[]}>
+export function ability(value: number): CaboAbility | null
diff --git a/everwith-claude-frontend/src/games/engines/cabo/rule-evidence.js b/everwith-claude-frontend/src/games/engines/cabo/rule-evidence.js
new file mode 100644
index 00000000..a9ee8e28
--- /dev/null
+++ b/everwith-claude-frontend/src/games/engines/cabo/rule-evidence.js
@@ -0,0 +1,37 @@
+// This is evidence metadata, not permission to treat unverified components as official.
+export const RULE_EVIDENCE=Object.freeze({
+ target:'Shareful Games 2025 English publication',
+ baseline:'current-shareful-public-standard-rules',
+ procedureSource:'https://www.cabogame.com/how-to-play',
+ productSource:'https://www.cabogame.com/buy-cabo/p/cabo-card-game',
+ publisherSource:'https://www.cabogame.com/about-shareful-games-llc',
+ checkedAt:'2026-10-07',
+ procedures:'publisher-web-text-checked',
+ procedureScope:Object.freeze({
+  officialExplicit:Object.freeze(['initial-four-cards-two-private-peeks','exchanges-face-down','failed-match-show-return-discard-drawn','failed-caller-plus-five','retain-discard-top-and-reshuffle','shooting-the-moon','first-exact-100-reset-game-ends-above-100']),
+  contextInterpretation:Object.freeze(['caller-priority-in-lowest-tie-other-tied-players-score-hand-sum']),
+  implementationConventions:Object.freeze(['final-total-ties-share-victory','next-starter-clockwise-from-previous-starter-among-minimum-round-gains','failed-match-return-face-down','reshuffle-immediately-after-last-deck-draw']),
+  pendingReview:Object.freeze(['zero-round-gain-can-select-non-winner-labelled-next-starter','no-recyclable-discard-remainder']),
+ }),
+ totalCards:52,
+ numberRange:Object.freeze([0,13]),
+ totalAndRange:'publisher-product-text-checked',
+ playerRange:Object.freeze([2,5]),
+ playerRangeEvidence:'publisher-product-text-checked',
+ chineseEdition:'not-verified',
+ components:'not-verified-from-current-physical-cards',
+ abilityNumbers:'legacy-component-hypothesis',
+ abilityComparison:Object.freeze({
+  status:'matches-bezier-primary-rules-not-shareful-certified',
+  sharefulVerified:false,
+  sources:Object.freeze(['https://cdn.shopify.com/s/files/1/0740/4855/files/Cabo-online-rules.jpg?6346435320125113992=','https://cdn.shopify.com/s/files/1/0740/4855/files/CABX_Cabo_Deluxe_Edition_rules.pdf?443=']),
+ }),
+ distribution:'legacy-component-hypothesis',
+ completePhysicalRulesVerified:false,
+});
+export const PROVISIONAL_COMPONENT_PROFILE=Object.freeze({
+ name:'legacy-component-hypothesis',verified:false,
+ abilities:Object.freeze({7:'peek',8:'peek',9:'spy',10:'spy',11:'swap',12:'swap'}),
+ counts:Object.freeze(Array.from({length:14},(_,v)=>v===0||v===13?2:4)),
+});
+export const ability=v=>PROVISIONAL_COMPONENT_PROFILE.abilities[v]||null;
diff --git a/everwith-claude-frontend/src/games/engines/royale/engine.ts b/everwith-claude-frontend/src/games/engines/royale/engine.ts
new file mode 100644
index 00000000..ec43d67c
--- /dev/null
+++ b/everwith-claude-frontend/src/games/engines/royale/engine.ts
@@ -0,0 +1,157 @@
+/** Royale introductory rules, separate from the preserved 2012 engine. */
+export const EDITION = 'las-vegas-royale-broadway-zh-intro-v1';
+export type Owner = number | 'neutral';
+export type Phase = 'roll' | 'choose' | 'payout' | 'roundEnd' | 'ended';
+export type Action = {type:'roll'} | {type:'place';face:number} | {type:'pass'} | {type:'payout'} | {type:'nextRound'};
+export type Die = {id:string;owner:Owner;kind:'small'|'big';face:number|null;location:'supply'|'arena'|'casino'|'collected';casino:number|null};
+export type Player = {id:number;earnings:string[];chips:number;roundGain:number;passes:number};
+export type Casino = {id:number;notes:string[]};
+export type Award = {owner:Owner;note:string;value:number};
+export type Result = {casino:number;counts:{owner:Owner;count:number}[];excluded:Owner[];awards:Award[];returned:string[]};
+export type PublicEvent = {type:string;actor?:Owner;casino?:number;face?:number;dice?:Die[];result?:Result;round?:number};
+export type Entry = {revision:number;round:number;actor:number;requestId:string;action:Action;events:PublicEvent[]};
+export type State = {
+  edition:typeof EDITION;version:1;session:string;rng:number;round:number;starter:number;current:number;phase:Phase;
+  players:Player[];dice:Die[];deck:string[];casinos:Casino[];chipPool:number;payoutIndex:number;
+  results:Result[];roundHistory:Result[][];events:PublicEvent[];history:Entry[];revision:number;winners:number[];
+};
+export const MONEY = [11,11,13,15,13,11,9,7].flatMap((count,i)=>Array.from({length:count},(_,j)=>({id:`m${i}-${j}`,value:(i+3)*10000})));
+const byId = new Map(MONEY.map(n=>[n.id,n]));
+export const note = (id:string) => { const n=byId.get(id); ensure(n,'note');return n!; };
+function ensure(ok:unknown, message:string):asserts ok { if(!ok) throw new Error(message); }
+function random(s:State){s.rng=(Math.imul(s.rng,1664525)+1013904223)>>>0;return s.rng/4294967296;}
+function shuffle(s:State, a:string[]){for(let i=a.length-1;i>0;i--){const j=Math.floor(random(s)*(i+1));[a[i],a[j]]=[a[j],a[i]];}return a;}
+export const weight = (d:Pick<Die,'kind'>)=>d.kind==='big'?2:1;
+export const remaining = (s:Pick<State,'dice'>,owner:Owner)=>s.dice.filter(d=>d.owner===owner&&['supply','arena'].includes(d.location));
+export const cash = (p:Pick<Player,'earnings'>)=>p.earnings.reduce((n,id)=>n+note(id).value,0);
+export const wealth = (p:Pick<Player,'earnings'|'chips'>)=>cash(p)+p.chips*10000;
+function newDice(owner:Owner):Die[]{return Array.from({length:8},(_,i)=>({id:`d${owner}-${i}`,owner,kind:i===7?'big':'small',face:null,location:'supply',casino:null}));}
+export function create({players=4,seed=917,starter=0,session:providedSession}: {players?:number;seed?:number;starter?:number;session?:string}={}):State {
+  ensure(Number.isInteger(players)&&players>=2&&players<=5,'players');
+  ensure(Number.isInteger(starter)&&starter>=0&&starter<players,'starter');
+  const s:State={edition:EDITION,version:1,session:providedSession??`royale-${seed}`,rng:seed>>>0,round:1,starter,current:starter,phase:'roll',
+    players:Array.from({length:players},(_,id)=>({id,earnings:[],chips:0,roundGain:0,passes:0})),
+    dice:[],deck:[],casinos:[],chipPool:30,payoutIndex:0,results:[],roundHistory:[],events:[],history:[],revision:0,winners:[]};
+  s.deck=shuffle(s,MONEY.map(n=>n.id)); setup(s);assertState(s);return s;
+}
+export function pairOrder(a:string[],b:string[]){const values=(ids:string[])=>ids.map(id=>note(id).value);return values(a).reduce((n,v)=>n+v,0)-values(b).reduce((n,v)=>n+v,0)||Math.max(...values(a))-Math.max(...values(b));}
+function setup(s:State){
+  ensure(s.deck.length>=12,'deck');
+  const pairs=Array.from({length:6},()=>[s.deck.pop()!,s.deck.pop()!]).sort(pairOrder);
+  s.casinos=pairs.map((notes,id)=>({id,notes:notes.sort((a,b)=>note(b).value-note(a).value)}));
+  s.dice=s.players.flatMap(p=>newDice(p.id));
+  for(const p of s.players){p.chips+=2;p.roundGain=0;s.chipPool-=2;}
+  if(s.players.length===2){const neutral=newDice('neutral');for(const d of neutral){d.face=1+Math.floor(random(s)*6);d.location='casino';d.casino=d.face-1;}s.dice.push(...neutral);}
+  s.current=s.starter;s.phase='roll';s.payoutIndex=0;s.results=[];s.events.push({type:'setup',round:s.round});
+}
+export function casinoResult(s:State,index:number):Result {
+  const c=s.casinos[index];ensure(c,'casino');
+  const owners:Owner[]=[...s.players.map(p=>p.id),...(s.players.length===2?['neutral' as const]:[])];
+  const counts=owners.map(owner=>({owner,count:s.dice.filter(d=>d.owner===owner&&d.casino===index).reduce((n,d)=>n+weight(d),0)}));
+  const excluded=counts.filter(p=>p.count>0&&counts.filter(q=>q.count===p.count).length>1).map(p=>p.owner);
+  const eligible=counts.filter(p=>p.count>0&&!excluded.includes(p.owner)).sort((a,b)=>b.count-a.count);
+  const notes=[...c.notes].sort((a,b)=>note(b).value-note(a).value);
+  return {casino:index,counts,excluded,awards:eligible.slice(0,notes.length).map((p,i)=>({owner:p.owner,note:notes[i],value:note(notes[i]).value})),returned:notes.slice(eligible.length)};
+}
+export function nextStarter(results:Result[],fallback:number){
+  for(const r of [...results].sort((a,b)=>b.casino-a.casino)){
+    // A neutral winner cannot begin a turn; prefer the highest paid real player.
+    const winner=r.awards.find(a=>a.owner!=='neutral');if(winner)return winner.owner as number;
+  }
+  return fallback; // Explicit deterministic fallback when nobody wins anywhere.
+}
+function advance(s:State){
+  if(s.players.every(p=>remaining(s,p.id).length===0)){s.phase='payout';return;}
+  do {s.current=(s.current+1)%s.players.length;}while(remaining(s,s.current).length===0);
+  s.phase='roll';
+}
+export function legalActions(s:State):Action[]{
+  if(s.phase==='roll')return [{type:'roll'}];
+  if(s.phase==='choose')return [...new Set(remaining(s,s.current).map(d=>d.face!))].sort().map(face=>({type:'place' as const,face}));
+  if(s.phase==='payout')return [{type:'payout'}];
+  if(s.phase==='roundEnd')return [{type:'nextRound'}];
+  return [];
+}
+export function actions(s:State):Action[]{const a=legalActions(s);if(s.phase==='choose'&&s.players[s.current].chips>0)a.push({type:'pass'});return a;}
+function sameAction(a:Action,b:Action){return a.type===b.type&&(a.type!=='place'||b.type==='place'&&a.face===b.face);}
+export function act(state:State,actor:number,action:Action,{expectedRevision=state.revision,requestId=`${state.session}:${state.revision}:${actor}`}={}):State {
+  ensure(action&&typeof action.type==='string'&&Object.keys(action).sort().join(',')===(action.type==='place'?'face,type':'type'),'illegalAction');
+  ensure(typeof requestId==='string'&&requestId.length>0&&requestId.length<=256,'requestId');
+  const previous=state.history.find(h=>h.requestId===requestId);
+  if(previous){ensure(previous.actor===actor&&sameAction(previous.action,action),'idempotencyConflict');return state;}
+  ensure(expectedRevision===state.revision,'staleRevision');ensure(state.phase!=='ended','ended');ensure(actor===state.current,'turn');
+  ensure(actions(state).some(a=>sameAction(a,action)),'illegalAction');
+  const s=structuredClone(state);s.events=[];const p=s.players[actor];
+  if(action.type==='roll'){
+    for(const d of remaining(s,actor)){d.face=1+Math.floor(random(s)*6);d.location='arena';}
+    s.phase='choose';s.events.push({type:'roll',actor,dice:structuredClone(remaining(s,actor))});
+  }else if(action.type==='place'){
+    const moved=remaining(s,actor).filter(d=>d.face===action.face);
+    for(const d of remaining(s,actor)){if(d.face===action.face){d.location='casino';d.casino=action.face-1;}else {d.location='supply';d.face=null;}}
+    s.events.push({type:'place',actor,face:action.face,casino:action.face-1,dice:structuredClone(moved)});advance(s);
+  }else if(action.type==='pass'){
+    p.chips--;p.passes++;s.chipPool++;
+    for(const d of remaining(s,actor)){d.location='supply';d.face=null;}
+    s.events.push({type:'pass',actor});advance(s);
+  }else if(action.type==='payout'){
+    const r=casinoResult(s,s.payoutIndex);s.results.push(r);s.events.push({type:'payout',result:r,casino:r.casino});
+    for(const a of r.awards){if(a.owner==='neutral'){s.deck.unshift(a.note);}else {s.players[a.owner].earnings.push(a.note);s.players[a.owner].roundGain+=a.value;}}
+    s.deck.unshift(...r.returned);s.casinos[s.payoutIndex].notes=[];
+    for(const d of s.dice.filter(d=>d.casino===s.payoutIndex)){d.location='collected';d.casino=null;d.face=null;}
+    s.payoutIndex++;
+    if(s.payoutIndex===6){s.roundHistory.push(structuredClone(s.results));s.phase='roundEnd';
+      if(s.round===3){s.phase='ended';const ranked=[...s.players].sort((a,b)=>wealth(b)-wealth(a)||(b.earnings.length+b.chips)-(a.earnings.length+a.chips));const top=ranked[0];s.winners=ranked.filter(p=>wealth(p)===wealth(top)&&p.earnings.length+p.chips===top.earnings.length+top.chips).map(p=>p.id);s.events.push({type:'end'});}
+    }
+  }else if(action.type==='nextRound'){
+    s.starter=nextStarter(s.results,s.starter);s.round++;setup(s);
+  }
+  s.revision++;s.history.push({revision:s.revision,round:state.round,actor,action:structuredClone(action),requestId,events:structuredClone(s.events)});
+  assertState(s);return s;
+}
+export function assertState(s:State):true {
+  ensure(s&&s.edition===EDITION&&s.version===1,'edition');
+  ensure(typeof s.session==='string'&&s.session.length>0,'session');ensure(Number.isInteger(s.rng)&&s.rng>=0&&s.rng<=4294967295,'rng');
+  ensure(Number.isInteger(s.round)&&s.round>=1&&s.round<=3,'round');ensure(['roll','choose','payout','roundEnd','ended'].includes(s.phase),'phase');
+  ensure(Array.isArray(s.players)&&s.players.length>=2&&s.players.length<=5,'players');
+  ensure(s.players.every((p,i)=>p.id===i&&Number.isInteger(p.chips)&&p.chips>=0&&Number.isInteger(p.passes)&&p.passes>=0&&Number.isInteger(p.roundGain)&&p.roundGain>=0),'playerState');
+  ensure(Number.isInteger(s.current)&&s.current>=0&&s.current<s.players.length&&Number.isInteger(s.starter)&&s.starter>=0&&s.starter<s.players.length,'current');
+  ensure(s.casinos.length===6&&s.casinos.every((c,i)=>c.id===i&&c.notes.length<=2),'casinos');
+  const ids=[...s.deck,...s.casinos.flatMap(c=>c.notes),...s.players.flatMap(p=>p.earnings)];
+  ensure(ids.length===90&&new Set(ids).size===90&&ids.every(id=>byId.has(id)),'moneyConservation');
+  ensure(Number.isInteger(s.chipPool)&&s.chipPool>=0&&s.chipPool+s.players.reduce((n,p)=>n+p.chips,0)===30,'chipConservation');
+  ensure(s.players.every(p=>p.chips+p.passes===s.round*2),'chipHistory');
+  const owners:Owner[]=[...s.players.map(p=>p.id),...(s.players.length===2?['neutral' as const]:[])];
+  ensure(s.dice.length===owners.length*8&&new Set(s.dice.map(d=>d.id)).size===s.dice.length,'diceConservation');
+  for(const owner of owners){const ds=s.dice.filter(d=>d.owner===owner);ensure(ds.length===8&&ds.every((d,i)=>d.id===`d${owner}-${i}`&&d.kind===(i===7?'big':'small')),'diceIdentity');}
+  for(const d of s.dice){ensure(['supply','arena','casino','collected'].includes(d.location),'location');
+    if(d.location==='supply'||d.location==='collected')ensure(d.face===null&&d.casino===null,'supply');
+    else {ensure(Number.isInteger(d.face)&&d.face!>=1&&d.face!<=6,'face');if(d.location==='casino')ensure(d.casino===d.face!-1,'casinoFace');else ensure(d.casino===null&&d.owner===s.current&&s.phase==='choose','arena');}
+    if(d.owner==='neutral')ensure(d.location==='casino'||d.location==='collected'&&s.payoutIndex>0,'neutral');
+  }
+  if(s.phase==='roll')ensure(remaining(s,s.current).length>0&&!s.dice.some(d=>d.location==='arena'),'rollPhase');
+  if(s.phase==='choose')ensure(remaining(s,s.current).length>0&&remaining(s,s.current).every(d=>d.location==='arena'),'choosePhase');
+  if(['payout','roundEnd','ended'].includes(s.phase))ensure(s.players.every(p=>remaining(s,p.id).length===0),'payoutPhase');
+  ensure(Number.isInteger(s.payoutIndex)&&s.payoutIndex>=0&&s.payoutIndex<=6&&s.results.length===s.payoutIndex,'payoutIndex');
+  ensure(s.casinos.every((c,i)=>c.notes.length===(i<s.payoutIndex?0:2)),'noteLocations');
+  ensure(Number.isInteger(s.revision)&&s.revision>=0&&s.history.length===s.revision&&s.history.every((h,i)=>h.revision===i+1)&&new Set(s.history.map(h=>h.requestId)).size===s.history.length,'history');
+  ensure(s.phase!=='ended'||s.round===3&&s.winners.length>0,'ended');return true;
+}
+export function observe(s:State,viewer:number){
+  const {rng:_,deck,history,...v}=structuredClone(s);
+  return {...v,bankCount:deck.length,history,players:s.players.map(p=>({id:p.id,chips:p.chips,roundGain:p.roundGain,passes:p.passes,
+    earnings:p.id===viewer||s.phase==='ended'?p.earnings.map(id=>note(id)):p.earnings.map(()=>null),
+    cash:p.id===viewer||s.phase==='ended'?cash(p):null,wealth:p.id===viewer||s.phase==='ended'?wealth(p):null}))};
+}
+/** Local deterministic heuristic: sees current public table, no provider calls. */
+export function decide(s:State):Action {
+  if(s.phase!=='choose')return actions(s)[0];
+  const id=s.current,ds=remaining(s,id);
+  const choices=actions(s).filter((a):a is {type:'place';face:number}=>a.type==='place').map(a=>{
+    const next=structuredClone(s);const selected=ds.filter(d=>d.face===a.face);
+    for(const d of next.dice.filter(d=>selected.some(q=>q.id===d.id))){d.location='casino';d.casino=a.face-1;}
+    const result=casinoResult(next,a.face-1);const prize=result.awards.find(a=>a.owner===id)?.value??0;
+    return {action:a,value:prize-selected.reduce((n,d)=>n+weight(d),0)*2000+note(s.casinos[a.face-1].notes[0]).value*0.08};
+  }).sort((a,b)=>b.value-a.value||a.action.face-b.action.face);
+  if(choices[0].value<10000&&s.players[id].chips>0&&ds.length>2)return {type:'pass'};
+  return choices[0].action;
+}
diff --git a/everwith-claude-frontend/src/games/engines/splendor/splendor/npc.d.ts b/everwith-claude-frontend/src/games/engines/splendor/splendor/npc.d.ts
new file mode 100644
index 00000000..8689f126
--- /dev/null
+++ b/everwith-claude-frontend/src/games/engines/splendor/splendor/npc.d.ts
@@ -0,0 +1,4 @@
+import type {SplendorAction, SplendorState} from './rules'
+export function chooseBotAction(view: SplendorState, id?: number, options?: {level?: 'easy' | 'medium' | 'hard'; seed?: number}): SplendorAction | null
+export const LEVELS: Record<'easy' | 'medium' | 'hard', {name: string}>
+export function decide(view: SplendorState, level?: 'easy' | 'medium' | 'hard', options?: {seed?: number}): {action: SplendorAction | null}
diff --git a/everwith-claude-frontend/src/games/engines/splendor/splendor/npc.js b/everwith-claude-frontend/src/games/engines/splendor/splendor/npc.js
new file mode 100644
index 00000000..7dc4c895
--- /dev/null
+++ b/everwith-claude-frontend/src/games/engines/splendor/splendor/npc.js
@@ -0,0 +1,27 @@
+import {COLORS,ALL,cardById,nobleById,bonuses,score,legalActions,priceFor,missingFor,LABELS} from './rules.js';
+function cardValue(view,p,card){const b=bonuses(p),missing=missingFor(p,card),price=priceFor(p,card),cost=Object.values(price).reduce((a,b)=>a+b,0);const noblePull=view.nobles.reduce((n,id)=>n+(nobleById(id).cost[card.bonus]>b[card.bonus]?1:0),0);const growth=p.cards.length<9?3:1.3;return card.points*4.2+growth+Math.min(2,noblePull)*.8-cost*.23-missing*1.65+(score(p)+card.points>=15?18:0);}
+export function chooseBotAction(view,id=view.current,{level='medium',seed=1}={}){const p=view.players[id],legal=legalActions(view,id);if(!legal.length)return null;if(view.phase==='noble')return legal[0];const targets=[...Object.values(view.market).flat().filter(Boolean),...p.reserved.filter(Boolean)].map(cardById).sort((a,b)=>cardValue(view,p,b)-cardValue(view,p,a));
+ if(view.phase==='return'){const target=targets[0],need=target?priceFor(p,target):{};return [...legal].sort((a,b)=>{const v=c=>(c==='gold'?100:Math.max(0,(need[c]||0)-(p.tokens[c]-1))*8)-(p.tokens[c]||0)*.2;return v(a.color)-v(b.color);})[0];}
+ const scored=legal.map(a=>{let v=-100;if(a.type==='buy')v=cardValue(view,p,cardById(a.card))+8;if(a.type==='take'){const future={...p,tokens:{...p.tokens}};for(const c of a.colors)future.tokens[c]++;v=0;for(const target of targets.slice(0,5)){const gain=missingFor(p,target)-missingFor(future,target);v=Math.max(v,gain*2.8+cardValue(view,p,target)*.2);}v+=new Set(a.colors).size*.15;if(ALL.reduce((n,c)=>n+p.tokens[c],0)>=10)v-=2;}if(a.type==='reserve'&&a.card){const card=cardById(a.card),missing=missingFor(p,card);v=(view.bank.gold>0?1.6:0)+cardValue(view,p,card)*.23-(p.reserved.length>0?2:0);if(missing<=2&&card.points>=3)v+=2;}if(a.type==='reserve'&&a.tier)v=-5+a.tier*.1;return {a,v};});let randomSeed=seed>>>0;const random=()=>{randomSeed=(Math.imul(randomSeed,1664525)+1013904223)>>>0;return randomSeed/4294967296;};
+ if(level==='easy')for(const item of scored)item.v+=random()*9;
+ if(level==='hard')for(const item of scored){
+   const a=item.a,opponents=view.players.filter(o=>o.id!==id);
+   if(a.card){const card=cardById(a.card);const contest=opponents.reduce((n,o)=>n+(missingFor(o,card)===0?1:0),0);item.v+=contest*(a.type==='buy'?1.3:card.points>=3?1.4:0);}
+   if(a.type==='buy'){
+     const card=cardById(a.card),future={...p,cards:[...p.cards,card.id]},b=bonuses(future);
+     const visit=view.nobles.some(n=>COLORS.every(c=>b[c]>=nobleById(n).cost[c]));
+     if(visit)item.v+=10;
+     const benefit=targets.filter(c=>c.id!==card.id).slice(0,6).reduce((n,c)=>n+Math.max(0,missingFor(p,c)-missingFor(future,c)),0);item.v+=benefit*.65;
+   }
+   if(a.type==='take'){
+     const future={...p,tokens:{...p.tokens}};for(const c of a.colors)future.tokens[c]++;
+     const best=targets.slice(0,7).map(c=>cardValue(view,future,c)+(missingFor(future,c)===0?4:0)).sort((a,b)=>b-a);
+     item.v+=(best[0]||0)*.15+(best[1]||0)*.05;
+     item.v-=Math.max(0,ALL.reduce((n,c)=>n+future.tokens[c],0)-10)*1.8;
+   }
+ }
+ scored.sort((a,b)=>b.v-a.v);return scored[0].a;
+}
+
+export const LEVELS={easy:{name:'简单'},medium:{name:'普通'},hard:{name:'困难'}};
+export function decide(view,level='medium',{seed=1}={}){if(!LEVELS[level])throw Error('Unknown difficulty');return {action:chooseBotAction(view,view.current,{level,seed})};}
diff --git a/everwith-claude-frontend/src/games/engines/splendor/splendor/rules-v2.d.ts b/everwith-claude-frontend/src/games/engines/splendor/splendor/rules-v2.d.ts
new file mode 100644
index 00000000..208d832c
--- /dev/null
+++ b/everwith-claude-frontend/src/games/engines/splendor/splendor/rules-v2.d.ts
@@ -0,0 +1,2 @@
+export * from '../src/engine'
+export const RULES_PROFILE: 'splendor-base-2024-v2'
diff --git a/everwith-claude-frontend/src/games/engines/splendor/splendor/rules-v2.js b/everwith-claude-frontend/src/games/engines/splendor/splendor/rules-v2.js
new file mode 100644
index 00000000..9597ae46
--- /dev/null
+++ b/everwith-claude-frontend/src/games/engines/splendor/splendor/rules-v2.js
@@ -0,0 +1,50 @@
+import {CARDS,NOBLES} from '../src/data.js';
+export const RULES_PROFILE='splendor-base-2024-v2';
+function requireProfile(s){if(s?.version!==2||s.rulesProfile!==RULES_PROFILE)throw Error('2024 v2 引擎拒绝未知或旧规则存档');}
+export const COLORS=['diamond','sapphire','emerald','ruby','onyx'];
+export const ALL=[...COLORS,'gold'];
+export const LABELS={diamond:'钻石',sapphire:'蓝宝石',emerald:'祖母绿',ruby:'红宝石',onyx:'缟玛瑙',gold:'黄金'};
+export const cardById=id=>CARDS.find(c=>c.id===id);
+export const nobleById=id=>NOBLES.find(n=>n.id===id);
+export const emptyTokens=()=>Object.fromEntries(ALL.map(c=>[c,0]));
+export const total=t=>ALL.reduce((sum,c)=>sum+(t[c]||0),0);
+export function bonuses(player){const out=Object.fromEntries(COLORS.map(c=>[c,0]));for(const id of player.cards)out[cardById(id).bonus]++;return out;}
+export const score=p=>p.cards.reduce((s,id)=>s+cardById(id).points,0)+3*p.nobles.length;
+function rng(seed){let h=2166136261;for(const c of String(seed))h=Math.imul(h^c.charCodeAt(0),16777619);return()=>{h+=0x6d2b79f5;let t=h;t=Math.imul(t^t>>>15,t|1);t^=t+Math.imul(t^t>>>7,t|61);return ((t^t>>>14)>>>0)/4294967296;};}
+function shuffled(a,r){a=[...a];for(let i=a.length-1;i>0;i--){const j=Math.floor(r()*(i+1));[a[i],a[j]]=[a[j],a[i]];}return a;}
+export function createGame({players=3,seed=String(Date.now())}={}){
+ if(![2,3,4].includes(players))throw Error('需要 2–4 位玩家');const random=rng(seed),decks={},market={};
+ for(const tier of [1,2,3]){decks[tier]=shuffled(CARDS.filter(c=>c.tier===tier).map(c=>c.id),random);market[tier]=decks[tier].splice(0,4);}
+ const names=['玩家一','玩家二','玩家三','玩家四'];const bank=Object.fromEntries(COLORS.map(c=>[c,players===2?4:players===3?5:7]));bank.gold=5;
+ return {version:2,rulesProfile:RULES_PROFILE,seed,players:Array.from({length:players},(_,i)=>({id:i,name:names[i],tokens:emptyTokens(),cards:[],reserved:[],nobles:[]})),decks,market,nobles:shuffled(NOBLES.map(n=>n.id),random).slice(0,players+1),bank,current:0,round:1,phase:'action',ending:false,ended:false,winners:[],events:[],mainMoves:0,pendingNobles:[],lastAction:null};
+}
+export function priceFor(player,card){const discount=bonuses(player);return Object.fromEntries(COLORS.map(c=>[c,Math.max(0,card.cost[c]-discount[c])]));}
+export function paymentFor(player,card){const cost=priceFor(player,card),pay=emptyTokens();for(const c of COLORS){pay[c]=Math.min(cost[c],player.tokens[c]);pay.gold+=cost[c]-pay[c];}return pay.gold<=player.tokens.gold?pay:null;}
+export function missingFor(player,card){const cost=priceFor(player,card);return Math.max(0,COLORS.reduce((s,c)=>s+Math.max(0,cost[c]-player.tokens[c]),0)-player.tokens.gold);}
+export function eligibleNobles(state,player){const b=bonuses(player);return state.nobles.filter(id=>COLORS.every(c=>b[c]>=nobleById(id).cost[c]));}
+function subsets(a,n,start=0,prefix=[],out=[]){if(prefix.length===n){out.push([...prefix]);return out;}for(let i=start;i<a.length;i++)subsets(a,n,i+1,[...prefix,a[i]],out);return out;}
+export function legalActions(s,id=s.current){requireProfile(s);if(s.ended||s.current!==id)return [];const p=s.players[id];if(s.phase==='return')return ALL.filter(c=>p.tokens[c]>0).map(color=>({type:'return',color}));if(s.phase==='noble')return s.pendingNobles.map(noble=>({type:'noble',noble}));if(s.phase!=='action')return [];
+ const actions=[],available=COLORS.filter(c=>s.bank[c]>0);if(available.length){const sizes=available.length<3?Array.from({length:available.length},(_,i)=>i+1):[3];for(const size of sizes)for(const selected of subsets(available,size))actions.push({type:'take',colors:selected});}for(const c of COLORS)if(s.bank[c]>=4)actions.push({type:'take',colors:[c,c]});
+ for(const tier of [1,2,3])for(const card of s.market[tier].filter(Boolean)){if(paymentFor(p,cardById(card)))actions.push({type:'buy',card});if(p.reserved.length<3)actions.push({type:'reserve',card});}
+ for(const card of p.reserved.filter(Boolean))if(paymentFor(p,cardById(card)))actions.push({type:'buy',card});
+ if(p.reserved.length<3)for(const tier of [1,2,3])if((Array.isArray(s.decks[tier])?s.decks[tier].length:s.decks[tier])>0)actions.push({type:'reserve',tier});return actions;
+}
+function check(condition,message){if(!condition)throw Error(message);}
+function pushEvent(s,event){s.events.push({id:s.events.length,round:s.round,player:s.current,...event});}
+function finishTurn(s){const p=s.players[s.current];if(score(p)>=15)s.ending=true;if(s.ending&&s.current===s.players.length-1){s.ended=true;s.phase='ended';let best=Math.max(...s.players.map(score));let eligible=s.players.filter(p=>score(p)===best);let fewest=Math.min(...eligible.map(p=>p.cards.length));s.winners=eligible.filter(p=>p.cards.length===fewest).map(p=>p.id);pushEvent(s,{type:'end',winners:[...s.winners]});return;}
+ s.current=(s.current+1)%s.players.length;if(s.current===0)s.round++;s.phase='action';s.pendingNobles=[];
+}
+function resolveNobles(s){const ids=eligibleNobles(s,s.players[s.current]);if(ids.length>1){s.phase='noble';s.pendingNobles=ids;return;}if(ids.length===1){const id=ids[0];s.nobles=s.nobles.filter(n=>n!==id);s.players[s.current].nobles.push(id);pushEvent(s,{type:'noble',noble:id});}finishTurn(s);}
+function afterAction(s){if(total(s.players[s.current].tokens)>10){s.phase='return';return;}resolveNobles(s);}
+function popMarket(s,id){const card=cardById(id),row=s.market[card.tier],idx=row.indexOf(id);check(idx!==-1,'这张牌已经不在市场上了');row[idx]=s.decks[card.tier].shift()??null;}
+export function applyAction(state,actor,action){requireProfile(state);const s=structuredClone(state);check(!s.ended,'本局已结束');check(s.current===actor,'还没轮到你');const p=s.players[actor];
+ if(s.phase==='return'){check(action.type==='return','请先归还超额宝石');check(ALL.includes(action.color)&&p.tokens[action.color]>0,'不能归还没有的宝石');p.tokens[action.color]--;s.bank[action.color]++;pushEvent(s,{type:'return',color:action.color});if(total(p.tokens)<=10)resolveNobles(s);return s;}
+ if(s.phase==='noble'){check(action.type==='noble'&&s.pendingNobles.includes(action.noble),'请选择一位满足条件的贵族');p.nobles.push(action.noble);s.nobles=s.nobles.filter(id=>id!==action.noble);pushEvent(s,{type:'noble',noble:action.noble});finishTurn(s);return s;}
+ check(s.phase==='action','当前不能执行此动作');
+ if(action.type==='take'){const chosen=action.colors;check(Array.isArray(chosen)&&chosen.length>0,'请选择宝石');check([...chosen].every(c=>COLORS.includes(c)),'只能选择公共池中五种宝石，黄金仅由预留获得');const same=chosen.length===2&&chosen[0]===chosen[1];if(same)check(s.bank[chosen[0]]>=4,'拿两枚同色前，公共池至少需要四枚');else{check(new Set(chosen).size===chosen.length,'请选择不同颜色');const available=COLORS.filter(c=>s.bank[c]>0).length;check(available>=3?chosen.length===3:chosen.length>=1&&chosen.length<=available,available>=3?'有三种颜色时，必须拿三种不同宝石':available===2?'公共池仅余两色，可拿一枚或两种各一枚':available===1?'公共池仅余一色，只能拿一枚现有宝石':'公共池已无可拿宝石');check(chosen.every(c=>s.bank[c]>0),'公共池里没有这种宝石');}for(const c of chosen){s.bank[c]--;p.tokens[c]++;}pushEvent(s,{type:'take',colors:[...chosen]});
+ }else if(action.type==='reserve'){check(p.reserved.length<3,'最多只能预留三张牌');let id=action.card,blind=false;if(id){check(CARDS.some(c=>c.id===id),'未知卡牌');popMarket(s,id);}else{check([1,2,3].includes(action.tier)&&s.decks[action.tier].length>0,'这叠牌已经抽完了');id=s.decks[action.tier].shift();blind=true;}p.reserved.push(id);const gold=s.bank.gold>0;if(gold){s.bank.gold--;p.tokens.gold++;}pushEvent(s,{type:'reserve',card:blind?null:id,tier:cardById(id).tier,blind,gold});
+ }else if(action.type==='buy'){const card=cardById(action.card);check(card,'未知卡牌');const reserved=p.reserved.includes(card.id);check(reserved||s.market[card.tier].includes(card.id),'只能购买市场牌或自己的预留牌');const pay=action.payment??paymentFor(p,card);check(pay,'宝石和永久折扣还不够');check(Object.keys(pay).every(c=>ALL.includes(c)),'未知宝石');check(ALL.every(c=>Number.isInteger(pay[c]??0)&&(pay[c]??0)>=0&&(pay[c]??0)<=p.tokens[c]),'支付的宝石数量不正确');const cost=priceFor(p,card);check(COLORS.every(c=>(pay[c]??0)<=cost[c]),'无需多付宝石');check(COLORS.reduce((n,c)=>n+cost[c]-(pay[c]??0),0)===(pay.gold??0),'黄金替代数量不正确');for(const c of ALL){p.tokens[c]-=pay[c]??0;s.bank[c]+=pay[c]??0;}if(reserved)p.reserved=p.reserved.filter(id=>id!==card.id);else popMarket(s,card.id);p.cards.push(card.id);pushEvent(s,{type:'buy',card:card.id,payment:{...pay},points:card.points,bonus:card.bonus});
+ }else throw Error('未知动作');s.mainMoves++;s.lastAction={player:actor,...Object.fromEntries(Object.entries(action).filter(([,value])=>value!==undefined))};afterAction(s);return s;
+}
+export function playerView(s,id){requireProfile(s);const view=structuredClone(s);view.decks=Object.fromEntries([1,2,3].map(t=>[t,s.decks[t].length]));view.players=view.players.map(p=>p.id===id?p:{...p,reserved:p.reserved.map(()=>null)});delete view.seed;delete view.lastAction;return view;}
+export function assertInvariants(s){requireProfile(s);const count=s.players.length,per=count===2?4:count===3?5:7;for(const c of ALL)check(s.bank[c]+s.players.reduce((v,p)=>v+p.tokens[c],0)===(c==='gold'?5:per),'宝石总数不守恒');check(ALL.every(c=>s.bank[c]>=0),'公共池出现负数');const all=[...Object.values(s.decks).flat(),...Object.values(s.market).flat().filter(Boolean),...s.players.flatMap(p=>[...p.cards,...p.reserved])];check(all.length===90&&new Set(all).size===90,'卡牌数量或唯一性错误');for(const p of s.players){check(p.reserved.length<=3,'预留牌超限');check(ALL.every(c=>Number.isInteger(p.tokens[c])&&p.tokens[c]>=0),'玩家宝石非法');check(p.id===s.current&&s.phase==='return'||total(p.tokens)<=10,'玩家宝石超限');}const nobles=[...s.nobles,...s.players.flatMap(p=>p.nobles)];check(nobles.length===count+1&&new Set(nobles).size===count+1,'贵族数量异常');return true;}
diff --git a/everwith-claude-frontend/src/games/engines/splendor/splendor/rules.d.ts b/everwith-claude-frontend/src/games/engines/splendor/splendor/rules.d.ts
new file mode 100644
index 00000000..adc622d9
--- /dev/null
+++ b/everwith-claude-frontend/src/games/engines/splendor/splendor/rules.d.ts
@@ -0,0 +1,11 @@
+import type {SplendorAction, SplendorState} from '../src/engine'
+export type {SplendorAction, SplendorState, SplendorPlayer, SplendorTokens, SplendorGem, SplendorColor, SplendorCard, SplendorNoble, SplendorEvent} from '../src/engine'
+export {COLORS, ALL, LABELS, cardById, nobleById, emptyTokens, total, bonuses, score, priceFor, paymentFor, missingFor, eligibleNobles} from '../src/engine'
+export const LEGACY_RULES_PROFILE: 'splendor-legacy-v1'
+export const NEW_RULES_PROFILE: 'splendor-base-2024-v2'
+export function rulesProfileFor(state: unknown): 'splendor-legacy-v1' | 'splendor-base-2024-v2'
+export function createGame(options?: {rulesProfile?: string; players?: number; seed?: string}): SplendorState
+export function legalActions(state: SplendorState, id?: number): SplendorAction[]
+export function applyAction(state: SplendorState, actor: number, action: SplendorAction): SplendorState
+export function assertInvariants(state: SplendorState): true
+export function playerView(state: SplendorState, id: number): SplendorState
diff --git a/everwith-claude-frontend/src/games/engines/splendor/splendor/rules.js b/everwith-claude-frontend/src/games/engines/splendor/splendor/rules.js
new file mode 100644
index 00000000..1d21a7b6
--- /dev/null
+++ b/everwith-claude-frontend/src/games/engines/splendor/splendor/rules.js
@@ -0,0 +1,23 @@
+import * as legacy from '../src/engine.js';
+import * as current from './rules-v2.js';
+
+export const LEGACY_RULES_PROFILE='splendor-legacy-v1';
+export const NEW_RULES_PROFILE=current.RULES_PROFILE;
+export const {COLORS,ALL,LABELS,cardById,nobleById,emptyTokens,total,bonuses,score,priceFor,paymentFor,missingFor,eligibleNobles}=legacy;
+
+// Saved games select their own immutable rules. Never infer an upgrade from UI.
+export function rulesProfileFor(state){
+ if(state?.version===1&&!Object.hasOwn(state,'rulesProfile'))return LEGACY_RULES_PROFILE;
+ if(state?.version===2&&state.rulesProfile===NEW_RULES_PROFILE)return NEW_RULES_PROFILE;
+ throw Error('未知或不匹配的规则版本；保留原存档，不自动升级。');
+}
+const engine=state=>rulesProfileFor(state)===LEGACY_RULES_PROFILE?legacy:current;
+export function createGame({rulesProfile=NEW_RULES_PROFILE,...options}={}){
+ if(rulesProfile===LEGACY_RULES_PROFILE)return legacy.createGame(options);
+ if(rulesProfile===NEW_RULES_PROFILE)return current.createGame(options);
+ throw Error('不能用未知规则版本创建新局');
+}
+export const legalActions=(state,id=state.current)=>engine(state).legalActions(state,id);
+export const applyAction=(state,actor,action)=>engine(state).applyAction(state,actor,action);
+export const assertInvariants=state=>engine(state).assertInvariants(state);
+export const playerView=(state,id)=>engine(state).playerView(state,id);
diff --git a/everwith-claude-frontend/src/games/engines/splendor/src/data.d.ts b/everwith-claude-frontend/src/games/engines/splendor/src/data.d.ts
new file mode 100644
index 00000000..7560073e
--- /dev/null
+++ b/everwith-claude-frontend/src/games/engines/splendor/src/data.d.ts
@@ -0,0 +1,6 @@
+// Typings for the frozen data file (new; the .js file is byte-identical to the handoff).
+export type SplendorColor = 'diamond' | 'sapphire' | 'emerald' | 'ruby' | 'onyx'
+export type SplendorCard = {id: string; tier: 1 | 2 | 3; bonus: SplendorColor; points: number; cost: Record<SplendorColor, number>; name: string; art: string}
+export type SplendorNoble = {id: string; name: string; points: number; cost: Record<SplendorColor, number>; art: string}
+export const CARDS: SplendorCard[]
+export const NOBLES: SplendorNoble[]
diff --git a/everwith-claude-frontend/src/games/engines/splendor/src/data.js b/everwith-claude-frontend/src/games/engines/splendor/src/data.js
new file mode 100644
index 00000000..880418de
--- /dev/null
+++ b/everwith-claude-frontend/src/games/engines/splendor/src/data.js
@@ -0,0 +1,2 @@
+export const CARDS = [{"id": "c00", "tier": 1, "bonus": "onyx", "points": 0, "cost": {"diamond": 1, "sapphire": 1, "emerald": 1, "ruby": 1, "onyx": 0}, "name": "墨晶矿井", "art": "onyx"}, {"id": "c01", "tier": 1, "bonus": "onyx", "points": 0, "cost": {"diamond": 1, "sapphire": 2, "emerald": 1, "ruby": 1, "onyx": 0}, "name": "暮色驿站", "art": "onyx"}, {"id": "c02", "tier": 1, "bonus": "onyx", "points": 0, "cost": {"diamond": 2, "sapphire": 2, "emerald": 0, "ruby": 1, "onyx": 0}, "name": "乌金工坊", "art": "onyx"}, {"id": "c03", "tier": 1, "bonus": "onyx", "points": 0, "cost": {"diamond": 0, "sapphire": 0, "emerald": 1, "ruby": 3, "onyx": 1}, "name": "夜航商道", "art": "onyx"}, {"id": "c04", "tier": 1, "bonus": "onyx", "points": 0, "cost": {"diamond": 0, "sapphire": 0, "emerald": 2, "ruby": 1, "onyx": 0}, "name": "黑檀商馆", "art": "onyx"}, {"id": "c05", "tier": 1, "bonus": "onyx", "points": 0, "cost": {"diamond": 2, "sapphire": 0, "emerald": 2, "ruby": 0, "onyx": 0}, "name": "星影画廊", "art": "onyx"}, {"id": "c06", "tier": 1, "bonus": "onyx", "points": 0, "cost": {"diamond": 0, "sapphire": 0, "emerald": 3, "ruby": 0, "onyx": 0}, "name": "夜幕宫殿", "art": "onyx"}, {"id": "c07", "tier": 1, "bonus": "onyx", "points": 1, "cost": {"diamond": 0, "sapphire": 4, "emerald": 0, "ruby": 0, "onyx": 0}, "name": "暗金宝库", "art": "onyx"}, {"id": "c08", "tier": 1, "bonus": "sapphire", "points": 0, "cost": {"diamond": 1, "sapphire": 0, "emerald": 1, "ruby": 1, "onyx": 1}, "name": "蔚蓝矿湾", "art": "sapphire"}, {"id": "c09", "tier": 1, "bonus": "sapphire", "points": 0, "cost": {"diamond": 1, "sapphire": 0, "emerald": 1, "ruby": 2, "onyx": 1}, "name": "潮汐渡口", "art": "sapphire"}, {"id": "c10", "tier": 1, "bonus": "sapphire", "points": 0, "cost": {"diamond": 1, "sapphire": 0, "emerald": 2, "ruby": 2, "onyx": 0}, "name": "蓝泉工坊", "art": "sapphire"}, {"id": "c11", "tier": 1, "bonus": "sapphire", "points": 0, "cost": {"diamond": 0, "sapphire": 1, "emerald": 3, "ruby": 1, "onyx": 0}, "name": "远航商船", "art": "sapphire"}, {"id": "c12", "tier": 1, "bonus": "sapphire", "points": 0, "cost": {"diamond": 1, "sapphire": 0, "emerald": 0, "ruby": 0, "onyx": 2}, "name": "镜海商馆", "art": "sapphire"}, {"id": "c13", "tier": 1, "bonus": "sapphire", "points": 0, "cost": {"diamond": 0, "sapphire": 0, "emerald": 2, "ruby": 0, "onyx": 2}, "name": "苍穹画廊", "art": "sapphire"}, {"id": "c14", "tier": 1, "bonus": "sapphire", "points": 0, "cost": {"diamond": 0, "sapphire": 0, "emerald": 0, "ruby": 0, "onyx": 3}, "name": "天青殿堂", "art": "sapphire"}, {"id": "c15", "tier": 1, "bonus": "sapphire", "points": 1, "cost": {"diamond": 0, "sapphire": 0, "emerald": 0, "ruby": 4, "onyx": 0}, "name": "海王宝库", "art": "sapphire"}, {"id": "c16", "tier": 1, "bonus": "diamond", "points": 0, "cost": {"diamond": 0, "sapphire": 1, "emerald": 1, "ruby": 1, "onyx": 1}, "name": "雪光矿脉", "art": "diamond"}, {"id": "c17", "tier": 1, "bonus": "diamond", "points": 0, "cost": {"diamond": 0, "sapphire": 1, "emerald": 2, "ruby": 1, "onyx": 1}, "name": "白石修道院", "art": "diamond"}, {"id": "c18", "tier": 1, "bonus": "diamond", "points": 0, "cost": {"diamond": 0, "sapphire": 2, "emerald": 2, "ruby": 0, "onyx": 1}, "name": "银镜港口", "art": "diamond"}, {"id": "c19", "tier": 1, "bonus": "diamond", "points": 0, "cost": {"diamond": 3, "sapphire": 1, "emerald": 0, "ruby": 0, "onyx": 1}, "name": "月晖工坊", "art": "diamond"}, {"id": "c20", "tier": 1, "bonus": "diamond", "points": 0, "cost": {"diamond": 0, "sapphire": 0, "emerald": 0, "ruby": 2, "onyx": 1}, "name": "象牙商馆", "art": "diamond"}, {"id": "c21", "tier": 1, "bonus": "diamond", "points": 0, "cost": {"diamond": 0, "sapphire": 2, "emerald": 0, "ruby": 0, "onyx": 2}, "name": "晨星珠宝行", "art": "diamond"}, {"id": "c22", "tier": 1, "bonus": "diamond", "points": 0, "cost": {"diamond": 0, "sapphire": 3, "emerald": 0, "ruby": 0, "onyx": 0}, "name": "云顶宫殿", "art": "diamond"}, {"id": "c23", "tier": 1, "bonus": "diamond", "points": 1, "cost": {"diamond": 0, "sapphire": 0, "emerald": 4, "ruby": 0, "onyx": 0}, "name": "星冠宝库", "art": "diamond"}, {"id": "c24", "tier": 1, "bonus": "emerald", "points": 0, "cost": {"diamond": 1, "sapphire": 1, "emerald": 0, "ruby": 1, "onyx": 1}, "name": "翡翠幽谷", "art": "emerald"}, {"id": "c25", "tier": 1, "bonus": "emerald", "points": 0, "cost": {"diamond": 1, "sapphire": 1, "emerald": 0, "ruby": 1, "onyx": 2}, "name": "绿荫水渠", "art": "emerald"}, {"id": "c26", "tier": 1, "bonus": "emerald", "points": 0, "cost": {"diamond": 0, "sapphire": 1, "emerald": 0, "ruby": 2, "onyx": 2}, "name": "苔庭工坊", "art": "emerald"}, {"id": "c27", "tier": 1, "bonus": "emerald", "points": 0, "cost": {"diamond": 1, "sapphire": 3, "emerald": 1, "ruby": 0, "onyx": 0}, "name": "林间商道", "art": "emerald"}, {"id": "c28", "tier": 1, "bonus": "emerald", "points": 0, "cost": {"diamond": 2, "sapphire": 1, "emerald": 0, "ruby": 0, "onyx": 0}, "name": "碧庭商馆", "art": "emerald"}, {"id": "c29", "tier": 1, "bonus": "emerald", "points": 0, "cost": {"diamond": 0, "sapphire": 2, "emerald": 0, "ruby": 2, "onyx": 0}, "name": "青藤花园", "art": "emerald"}, {"id": "c30", "tier": 1, "bonus": "emerald", "points": 0, "cost": {"diamond": 0, "sapphire": 0, "emerald": 0, "ruby": 3, "onyx": 0}, "name": "翠玉宫殿", "art": "emerald"}, {"id": "c31", "tier": 1, "bonus": "emerald", "points": 1, "cost": {"diamond": 0, "sapphire": 0, "emerald": 0, "ruby": 0, "onyx": 4}, "name": "秘林宝库", "art": "emerald"}, {"id": "c32", "tier": 1, "bonus": "ruby", "points": 0, "cost": {"diamond": 1, "sapphire": 1, "emerald": 1, "ruby": 0, "onyx": 1}, "name": "赤霞矿洞", "art": "ruby"}, {"id": "c33", "tier": 1, "bonus": "ruby", "points": 0, "cost": {"diamond": 2, "sapphire": 1, "emerald": 1, "ruby": 0, "onyx": 1}, "name": "玫瑰码头", "art": "ruby"}, {"id": "c34", "tier": 1, "bonus": "ruby", "points": 0, "cost": {"diamond": 2, "sapphire": 0, "emerald": 1, "ruby": 0, "onyx": 2}, "name": "红炉工坊", "art": "ruby"}, {"id": "c35", "tier": 1, "bonus": "ruby", "points": 0, "cost": {"diamond": 1, "sapphire": 0, "emerald": 0, "ruby": 1, "onyx": 3}, "name": "绯帆商船", "art": "ruby"}, {"id": "c36", "tier": 1, "bonus": "ruby", "points": 0, "cost": {"diamond": 0, "sapphire": 2, "emerald": 1, "ruby": 0, "onyx": 0}, "name": "朱砂商馆", "art": "ruby"}, {"id": "c37", "tier": 1, "bonus": "ruby", "points": 0, "cost": {"diamond": 2, "sapphire": 0, "emerald": 0, "ruby": 2, "onyx": 0}, "name": "蔷薇长廊", "art": "ruby"}, {"id": "c38", "tier": 1, "bonus": "ruby", "points": 0, "cost": {"diamond": 3, "sapphire": 0, "emerald": 0, "ruby": 0, "onyx": 0}, "name": "丹霞宫殿", "art": "ruby"}, {"id": "c39", "tier": 1, "bonus": "ruby", "points": 1, "cost": {"diamond": 4, "sapphire": 0, "emerald": 0, "ruby": 0, "onyx": 0}, "name": "绯红宝库", "art": "ruby"}, {"id": "c40", "tier": 2, "bonus": "onyx", "points": 1, "cost": {"diamond": 3, "sapphire": 2, "emerald": 2, "ruby": 0, "onyx": 0}, "name": "墨晶矿井", "art": "onyx"}, {"id": "c41", "tier": 2, "bonus": "onyx", "points": 1, "cost": {"diamond": 3, "sapphire": 0, "emerald": 3, "ruby": 0, "onyx": 2}, "name": "暮色驿站", "art": "onyx"}, {"id": "c42", "tier": 2, "bonus": "onyx", "points": 2, "cost": {"diamond": 0, "sapphire": 1, "emerald": 4, "ruby": 2, "onyx": 0}, "name": "乌金工坊", "art": "onyx"}, {"id": "c43", "tier": 2, "bonus": "onyx", "points": 2, "cost": {"diamond": 0, "sapphire": 0, "emerald": 5, "ruby": 3, "onyx": 0}, "name": "夜航商道", "art": "onyx"}, {"id": "c44", "tier": 2, "bonus": "onyx", "points": 2, "cost": {"diamond": 5, "sapphire": 0, "emerald": 0, "ruby": 0, "onyx": 0}, "name": "黑檀商馆", "art": "onyx"}, {"id": "c45", "tier": 2, "bonus": "onyx", "points": 3, "cost": {"diamond": 0, "sapphire": 0, "emerald": 0, "ruby": 0, "onyx": 6}, "name": "星影画廊", "art": "onyx"}, {"id": "c46", "tier": 2, "bonus": "sapphire", "points": 1, "cost": {"diamond": 0, "sapphire": 2, "emerald": 2, "ruby": 3, "onyx": 0}, "name": "蔚蓝矿湾", "art": "sapphire"}, {"id": "c47", "tier": 2, "bonus": "sapphire", "points": 1, "cost": {"diamond": 0, "sapphire": 2, "emerald": 3, "ruby": 0, "onyx": 3}, "name": "潮汐渡口", "art": "sapphire"}, {"id": "c48", "tier": 2, "bonus": "sapphire", "points": 2, "cost": {"diamond": 5, "sapphire": 3, "emerald": 0, "ruby": 0, "onyx": 0}, "name": "蓝泉工坊", "art": "sapphire"}, {"id": "c49", "tier": 2, "bonus": "sapphire", "points": 2, "cost": {"diamond": 2, "sapphire": 0, "emerald": 0, "ruby": 1, "onyx": 4}, "name": "远航商船", "art": "sapphire"}, {"id": "c50", "tier": 2, "bonus": "sapphire", "points": 2, "cost": {"diamond": 0, "sapphire": 5, "emerald": 0, "ruby": 0, "onyx": 0}, "name": "镜海商馆", "art": "sapphire"}, {"id": "c51", "tier": 2, "bonus": "sapphire", "points": 3, "cost": {"diamond": 0, "sapphire": 6, "emerald": 0, "ruby": 0, "onyx": 0}, "name": "苍穹画廊", "art": "sapphire"}, {"id": "c52", "tier": 2, "bonus": "diamond", "points": 1, "cost": {"diamond": 0, "sapphire": 0, "emerald": 3, "ruby": 2, "onyx": 2}, "name": "雪光矿脉", "art": "diamond"}, {"id": "c53", "tier": 2, "bonus": "diamond", "points": 1, "cost": {"diamond": 2, "sapphire": 3, "emerald": 0, "ruby": 3, "onyx": 0}, "name": "白石修道院", "art": "diamond"}, {"id": "c54", "tier": 2, "bonus": "diamond", "points": 2, "cost": {"diamond": 0, "sapphire": 0, "emerald": 1, "ruby": 4, "onyx": 2}, "name": "银镜港口", "art": "diamond"}, {"id": "c55", "tier": 2, "bonus": "diamond", "points": 2, "cost": {"diamond": 0, "sapphire": 0, "emerald": 0, "ruby": 5, "onyx": 3}, "name": "月晖工坊", "art": "diamond"}, {"id": "c56", "tier": 2, "bonus": "diamond", "points": 2, "cost": {"diamond": 0, "sapphire": 0, "emerald": 0, "ruby": 5, "onyx": 0}, "name": "象牙商馆", "art": "diamond"}, {"id": "c57", "tier": 2, "bonus": "diamond", "points": 3, "cost": {"diamond": 6, "sapphire": 0, "emerald": 0, "ruby": 0, "onyx": 0}, "name": "晨星珠宝行", "art": "diamond"}, {"id": "c58", "tier": 2, "bonus": "emerald", "points": 1, "cost": {"diamond": 3, "sapphire": 0, "emerald": 2, "ruby": 3, "onyx": 0}, "name": "翡翠幽谷", "art": "emerald"}, {"id": "c59", "tier": 2, "bonus": "emerald", "points": 1, "cost": {"diamond": 2, "sapphire": 3, "emerald": 0, "ruby": 0, "onyx": 2}, "name": "绿荫水渠", "art": "emerald"}, {"id": "c60", "tier": 2, "bonus": "emerald", "points": 2, "cost": {"diamond": 4, "sapphire": 2, "emerald": 0, "ruby": 0, "onyx": 1}, "name": "苔庭工坊", "art": "emerald"}, {"id": "c61", "tier": 2, "bonus": "emerald", "points": 2, "cost": {"diamond": 0, "sapphire": 5, "emerald": 3, "ruby": 0, "onyx": 0}, "name": "林间商道", "art": "emerald"}, {"id": "c62", "tier": 2, "bonus": "emerald", "points": 2, "cost": {"diamond": 0, "sapphire": 0, "emerald": 5, "ruby": 0, "onyx": 0}, "name": "碧庭商馆", "art": "emerald"}, {"id": "c63", "tier": 2, "bonus": "emerald", "points": 3, "cost": {"diamond": 0, "sapphire": 0, "emerald": 6, "ruby": 0, "onyx": 0}, "name": "青藤花园", "art": "emerald"}, {"id": "c64", "tier": 2, "bonus": "ruby", "points": 1, "cost": {"diamond": 2, "sapphire": 0, "emerald": 0, "ruby": 2, "onyx": 3}, "name": "赤霞矿洞", "art": "ruby"}, {"id": "c65", "tier": 2, "bonus": "ruby", "points": 1, "cost": {"diamond": 0, "sapphire": 3, "emerald": 0, "ruby": 2, "onyx": 3}, "name": "玫瑰码头", "art": "ruby"}, {"id": "c66", "tier": 2, "bonus": "ruby", "points": 2, "cost": {"diamond": 1, "sapphire": 4, "emerald": 2, "ruby": 0, "onyx": 0}, "name": "红炉工坊", "art": "ruby"}, {"id": "c67", "tier": 2, "bonus": "ruby", "points": 2, "cost": {"diamond": 3, "sapphire": 0, "emerald": 0, "ruby": 0, "onyx": 5}, "name": "绯帆商船", "art": "ruby"}, {"id": "c68", "tier": 2, "bonus": "ruby", "points": 2, "cost": {"diamond": 0, "sapphire": 0, "emerald": 0, "ruby": 0, "onyx": 5}, "name": "朱砂商馆", "art": "ruby"}, {"id": "c69", "tier": 2, "bonus": "ruby", "points": 3, "cost": {"diamond": 0, "sapphire": 0, "emerald": 0, "ruby": 6, "onyx": 0}, "name": "蔷薇长廊", "art": "ruby"}, {"id": "c70", "tier": 3, "bonus": "onyx", "points": 3, "cost": {"diamond": 3, "sapphire": 3, "emerald": 5, "ruby": 3, "onyx": 0}, "name": "夜幕宫殿", "art": "onyx"}, {"id": "c71", "tier": 3, "bonus": "onyx", "points": 4, "cost": {"diamond": 0, "sapphire": 0, "emerald": 0, "ruby": 7, "onyx": 0}, "name": "暗金宝库", "art": "onyx"}, {"id": "c72", "tier": 3, "bonus": "onyx", "points": 4, "cost": {"diamond": 0, "sapphire": 0, "emerald": 3, "ruby": 6, "onyx": 3}, "name": "墨晶矿井", "art": "onyx"}, {"id": "c73", "tier": 3, "bonus": "onyx", "points": 5, "cost": {"diamond": 0, "sapphire": 0, "emerald": 0, "ruby": 7, "onyx": 3}, "name": "暮色驿站", "art": "onyx"}, {"id": "c74", "tier": 3, "bonus": "sapphire", "points": 3, "cost": {"diamond": 3, "sapphire": 0, "emerald": 3, "ruby": 3, "onyx": 5}, "name": "天青殿堂", "art": "sapphire"}, {"id": "c75", "tier": 3, "bonus": "sapphire", "points": 4, "cost": {"diamond": 7, "sapphire": 0, "emerald": 0, "ruby": 0, "onyx": 0}, "name": "海王宝库", "art": "sapphire"}, {"id": "c76", "tier": 3, "bonus": "sapphire", "points": 4, "cost": {"diamond": 6, "sapphire": 3, "emerald": 0, "ruby": 0, "onyx": 3}, "name": "蔚蓝矿湾", "art": "sapphire"}, {"id": "c77", "tier": 3, "bonus": "sapphire", "points": 5, "cost": {"diamond": 7, "sapphire": 3, "emerald": 0, "ruby": 0, "onyx": 0}, "name": "潮汐渡口", "art": "sapphire"}, {"id": "c78", "tier": 3, "bonus": "diamond", "points": 3, "cost": {"diamond": 0, "sapphire": 3, "emerald": 3, "ruby": 5, "onyx": 3}, "name": "云顶宫殿", "art": "diamond"}, {"id": "c79", "tier": 3, "bonus": "diamond", "points": 4, "cost": {"diamond": 0, "sapphire": 0, "emerald": 0, "ruby": 0, "onyx": 7}, "name": "星冠宝库", "art": "diamond"}, {"id": "c80", "tier": 3, "bonus": "diamond", "points": 4, "cost": {"diamond": 3, "sapphire": 0, "emerald": 0, "ruby": 3, "onyx": 6}, "name": "雪光矿脉", "art": "diamond"}, {"id": "c81", "tier": 3, "bonus": "diamond", "points": 5, "cost": {"diamond": 3, "sapphire": 0, "emerald": 0, "ruby": 0, "onyx": 7}, "name": "白石修道院", "art": "diamond"}, {"id": "c82", "tier": 3, "bonus": "emerald", "points": 3, "cost": {"diamond": 5, "sapphire": 3, "emerald": 0, "ruby": 3, "onyx": 3}, "name": "翠玉宫殿", "art": "emerald"}, {"id": "c83", "tier": 3, "bonus": "emerald", "points": 4, "cost": {"diamond": 0, "sapphire": 7, "emerald": 0, "ruby": 0, "onyx": 0}, "name": "秘林宝库", "art": "emerald"}, {"id": "c84", "tier": 3, "bonus": "emerald", "points": 4, "cost": {"diamond": 3, "sapphire": 6, "emerald": 3, "ruby": 0, "onyx": 0}, "name": "翡翠幽谷", "art": "emerald"}, {"id": "c85", "tier": 3, "bonus": "emerald", "points": 5, "cost": {"diamond": 0, "sapphire": 7, "emerald": 3, "ruby": 0, "onyx": 0}, "name": "绿荫水渠", "art": "emerald"}, {"id": "c86", "tier": 3, "bonus": "ruby", "points": 3, "cost": {"diamond": 3, "sapphire": 5, "emerald": 3, "ruby": 0, "onyx": 3}, "name": "丹霞宫殿", "art": "ruby"}, {"id": "c87", "tier": 3, "bonus": "ruby", "points": 4, "cost": {"diamond": 0, "sapphire": 0, "emerald": 7, "ruby": 0, "onyx": 0}, "name": "绯红宝库", "art": "ruby"}, {"id": "c88", "tier": 3, "bonus": "ruby", "points": 4, "cost": {"diamond": 0, "sapphire": 3, "emerald": 6, "ruby": 3, "onyx": 0}, "name": "赤霞矿洞", "art": "ruby"}, {"id": "c89", "tier": 3, "bonus": "ruby", "points": 5, "cost": {"diamond": 0, "sapphire": 0, "emerald": 7, "ruby": 3, "onyx": 0}, "name": "玫瑰码头", "art": "ruby"}];
+export const NOBLES = [{"id": "n0", "name": "蔷薇女公爵", "points": 3, "cost": {"diamond": 0, "sapphire": 0, "emerald": 4, "ruby": 4, "onyx": 0}, "art": "noble-female"}, {"id": "n1", "name": "海港总督", "points": 3, "cost": {"diamond": 0, "sapphire": 4, "emerald": 4, "ruby": 0, "onyx": 0}, "art": "noble-male"}, {"id": "n2", "name": "白金赞助人", "points": 3, "cost": {"diamond": 4, "sapphire": 4, "emerald": 0, "ruby": 0, "onyx": 0}, "art": "noble-female"}, {"id": "n3", "name": "星月伯爵夫人", "points": 3, "cost": {"diamond": 4, "sapphire": 0, "emerald": 0, "ruby": 0, "onyx": 4}, "art": "noble-female"}, {"id": "n4", "name": "暮光大公", "points": 3, "cost": {"diamond": 0, "sapphire": 0, "emerald": 0, "ruby": 4, "onyx": 4}, "art": "noble-male"}, {"id": "n5", "name": "苍翠夫人", "points": 3, "cost": {"diamond": 0, "sapphire": 3, "emerald": 3, "ruby": 3, "onyx": 0}, "art": "noble-female"}, {"id": "n6", "name": "晨曦女侯爵", "points": 3, "cost": {"diamond": 3, "sapphire": 0, "emerald": 3, "ruby": 3, "onyx": 0}, "art": "noble-female"}, {"id": "n7", "name": "夜航亲王", "points": 3, "cost": {"diamond": 3, "sapphire": 3, "emerald": 0, "ruby": 0, "onyx": 3}, "art": "noble-male"}, {"id": "n8", "name": "银叶伯爵夫人", "points": 3, "cost": {"diamond": 0, "sapphire": 0, "emerald": 3, "ruby": 3, "onyx": 3}, "art": "noble-female"}, {"id": "n9", "name": "云庭侯爵", "points": 3, "cost": {"diamond": 3, "sapphire": 3, "emerald": 3, "ruby": 0, "onyx": 0}, "art": "noble-male"}];
diff --git a/everwith-claude-frontend/src/games/engines/splendor/src/engine.d.ts b/everwith-claude-frontend/src/games/engines/splendor/src/engine.d.ts
new file mode 100644
index 00000000..47be9ca2
--- /dev/null
+++ b/everwith-claude-frontend/src/games/engines/splendor/src/engine.d.ts
@@ -0,0 +1,37 @@
+import type {SplendorCard, SplendorColor, SplendorNoble} from './data'
+export type {SplendorCard, SplendorColor, SplendorNoble}
+export type SplendorGem = SplendorColor | 'gold'
+export type SplendorTokens = Record<SplendorGem, number>
+export type SplendorPlayer = {id: number; name: string; tokens: SplendorTokens; cards: string[]; reserved: (string | null)[]; nobles: string[]}
+export type SplendorEvent = {id: number; round: number; player: number; type: string; [key: string]: unknown}
+export type SplendorState = {
+  version: 1 | 2; rulesProfile?: string; seed?: string
+  players: SplendorPlayer[]; decks: Record<1 | 2 | 3, string[] | number>; market: Record<1 | 2 | 3, (string | null)[]>
+  nobles: string[]; bank: SplendorTokens; current: number; round: number; phase: 'action' | 'return' | 'noble' | 'ended'
+  ending: boolean; ended: boolean; winners: number[]; events: SplendorEvent[]; mainMoves: number; pendingNobles: string[]; lastAction?: unknown
+}
+export type SplendorAction =
+  | {type: 'take'; colors: SplendorColor[]}
+  | {type: 'reserve'; card: string; tier?: undefined}
+  | {type: 'reserve'; tier: 1 | 2 | 3; card?: undefined}
+  | {type: 'buy'; card: string; payment?: Partial<SplendorTokens>}
+  | {type: 'return'; color: SplendorGem}
+  | {type: 'noble'; noble: string}
+export const COLORS: SplendorColor[]
+export const ALL: SplendorGem[]
+export const LABELS: Record<SplendorGem, string>
+export function cardById(id: string): SplendorCard
+export function nobleById(id: string): SplendorNoble
+export function emptyTokens(): SplendorTokens
+export function total(t: Partial<SplendorTokens>): number
+export function bonuses(player: Pick<SplendorPlayer, 'cards'>): Record<SplendorColor, number>
+export function score(player: Pick<SplendorPlayer, 'cards' | 'nobles'>): number
+export function createGame(options?: {players?: number; seed?: string}): SplendorState
+export function priceFor(player: SplendorPlayer, card: SplendorCard): Record<SplendorColor, number>
+export function paymentFor(player: SplendorPlayer, card: SplendorCard): SplendorTokens | null
+export function missingFor(player: SplendorPlayer, card: SplendorCard): number
+export function eligibleNobles(state: SplendorState, player: SplendorPlayer): string[]
+export function legalActions(state: SplendorState, id?: number): SplendorAction[]
+export function applyAction(state: SplendorState, actor: number, action: SplendorAction): SplendorState
+export function playerView(state: SplendorState, id: number): SplendorState
+export function assertInvariants(state: SplendorState): true
diff --git a/everwith-claude-frontend/src/games/engines/splendor/src/engine.js b/everwith-claude-frontend/src/games/engines/splendor/src/engine.js
new file mode 100644
index 00000000..99647573
--- /dev/null
+++ b/everwith-claude-frontend/src/games/engines/splendor/src/engine.js
@@ -0,0 +1,48 @@
+import {CARDS,NOBLES} from './data.js';
+export const COLORS=['diamond','sapphire','emerald','ruby','onyx'];
+export const ALL=[...COLORS,'gold'];
+export const LABELS={diamond:'钻石',sapphire:'蓝宝石',emerald:'祖母绿',ruby:'红宝石',onyx:'缟玛瑙',gold:'黄金'};
+export const cardById=id=>CARDS.find(c=>c.id===id);
+export const nobleById=id=>NOBLES.find(n=>n.id===id);
+export const emptyTokens=()=>Object.fromEntries(ALL.map(c=>[c,0]));
+export const total=t=>ALL.reduce((sum,c)=>sum+(t[c]||0),0);
+export function bonuses(player){const out=Object.fromEntries(COLORS.map(c=>[c,0]));for(const id of player.cards)out[cardById(id).bonus]++;return out;}
+export const score=p=>p.cards.reduce((s,id)=>s+cardById(id).points,0)+3*p.nobles.length;
+function rng(seed){let h=2166136261;for(const c of String(seed))h=Math.imul(h^c.charCodeAt(0),16777619);return()=>{h+=0x6d2b79f5;let t=h;t=Math.imul(t^t>>>15,t|1);t^=t+Math.imul(t^t>>>7,t|61);return ((t^t>>>14)>>>0)/4294967296;};}
+function shuffled(a,r){a=[...a];for(let i=a.length-1;i>0;i--){const j=Math.floor(r()*(i+1));[a[i],a[j]]=[a[j],a[i]];}return a;}
+export function createGame({players=3,seed=String(Date.now())}={}){
+ if(![2,3,4].includes(players))throw Error('需要 2–4 位玩家');const random=rng(seed),decks={},market={};
+ for(const tier of [1,2,3]){decks[tier]=shuffled(CARDS.filter(c=>c.tier===tier).map(c=>c.id),random);market[tier]=decks[tier].splice(0,4);}
+ const names=['玩家一','玩家二','玩家三','玩家四'];const bank=Object.fromEntries(COLORS.map(c=>[c,players===2?4:players===3?5:7]));bank.gold=5;
+ return {version:1,seed,players:Array.from({length:players},(_,i)=>({id:i,name:names[i],tokens:emptyTokens(),cards:[],reserved:[],nobles:[]})),decks,market,nobles:shuffled(NOBLES.map(n=>n.id),random).slice(0,players+1),bank,current:0,round:1,phase:'action',ending:false,ended:false,winners:[],events:[],mainMoves:0,pendingNobles:[],lastAction:null};
+}
+export function priceFor(player,card){const discount=bonuses(player);return Object.fromEntries(COLORS.map(c=>[c,Math.max(0,card.cost[c]-discount[c])]));}
+export function paymentFor(player,card){const cost=priceFor(player,card),pay=emptyTokens();for(const c of COLORS){pay[c]=Math.min(cost[c],player.tokens[c]);pay.gold+=cost[c]-pay[c];}return pay.gold<=player.tokens.gold?pay:null;}
+export function missingFor(player,card){const cost=priceFor(player,card);return Math.max(0,COLORS.reduce((s,c)=>s+Math.max(0,cost[c]-player.tokens[c]),0)-player.tokens.gold);}
+export function eligibleNobles(state,player){const b=bonuses(player);return state.nobles.filter(id=>COLORS.every(c=>b[c]>=nobleById(id).cost[c]));}
+function subsets(a,n,start=0,prefix=[],out=[]){if(prefix.length===n){out.push([...prefix]);return out;}for(let i=start;i<a.length;i++)subsets(a,n,i+1,[...prefix,a[i]],out);return out;}
+export function legalActions(s,id=s.current){if(s.ended||s.current!==id)return [];const p=s.players[id];if(s.phase==='return')return ALL.filter(c=>p.tokens[c]>0).map(color=>({type:'return',color}));if(s.phase==='noble')return s.pendingNobles.map(noble=>({type:'noble',noble}));if(s.phase!=='action')return [];
+ const actions=[],available=COLORS.filter(c=>s.bank[c]>0);if(available.length)for(const selected of subsets(available,Math.min(3,available.length)))actions.push({type:'take',colors:selected});for(const c of COLORS)if(s.bank[c]>=4)actions.push({type:'take',colors:[c,c]});
+ for(const tier of [1,2,3])for(const card of s.market[tier].filter(Boolean)){if(paymentFor(p,cardById(card)))actions.push({type:'buy',card});if(p.reserved.length<3)actions.push({type:'reserve',card});}
+ for(const card of p.reserved.filter(Boolean))if(paymentFor(p,cardById(card)))actions.push({type:'buy',card});
+ if(p.reserved.length<3)for(const tier of [1,2,3])if((Array.isArray(s.decks[tier])?s.decks[tier].length:s.decks[tier])>0)actions.push({type:'reserve',tier});return actions;
+}
+function check(condition,message){if(!condition)throw Error(message);}
+function pushEvent(s,event){s.events.push({id:s.events.length,round:s.round,player:s.current,...event});}
+function finishTurn(s){const p=s.players[s.current];if(score(p)>=15)s.ending=true;if(s.ending&&s.current===s.players.length-1){s.ended=true;s.phase='ended';let best=Math.max(...s.players.map(score));let eligible=s.players.filter(p=>score(p)===best);let fewest=Math.min(...eligible.map(p=>p.cards.length));s.winners=eligible.filter(p=>p.cards.length===fewest).map(p=>p.id);pushEvent(s,{type:'end',winners:[...s.winners]});return;}
+ s.current=(s.current+1)%s.players.length;if(s.current===0)s.round++;s.phase='action';s.pendingNobles=[];
+}
+function resolveNobles(s){const ids=eligibleNobles(s,s.players[s.current]);if(ids.length>1){s.phase='noble';s.pendingNobles=ids;return;}if(ids.length===1){const id=ids[0];s.nobles=s.nobles.filter(n=>n!==id);s.players[s.current].nobles.push(id);pushEvent(s,{type:'noble',noble:id});}finishTurn(s);}
+function afterAction(s){if(total(s.players[s.current].tokens)>10){s.phase='return';return;}resolveNobles(s);}
+function popMarket(s,id){const card=cardById(id),row=s.market[card.tier],idx=row.indexOf(id);check(idx!==-1,'这张牌已经不在市场上了');row[idx]=s.decks[card.tier].shift()??null;}
+export function applyAction(state,actor,action){const s=structuredClone(state);check(!s.ended,'本局已结束');check(s.current===actor,'还没轮到你');const p=s.players[actor];
+ if(s.phase==='return'){check(action.type==='return','请先归还超额宝石');check(ALL.includes(action.color)&&p.tokens[action.color]>0,'不能归还没有的宝石');p.tokens[action.color]--;s.bank[action.color]++;pushEvent(s,{type:'return',color:action.color});if(total(p.tokens)<=10)resolveNobles(s);return s;}
+ if(s.phase==='noble'){check(action.type==='noble'&&s.pendingNobles.includes(action.noble),'请选择一位满足条件的贵族');p.nobles.push(action.noble);s.nobles=s.nobles.filter(id=>id!==action.noble);pushEvent(s,{type:'noble',noble:action.noble});finishTurn(s);return s;}
+ check(s.phase==='action','当前不能执行此动作');
+ if(action.type==='take'){const chosen=action.colors;check(Array.isArray(chosen)&&chosen.length>0,'请选择宝石');check(chosen.every(c=>COLORS.includes(c)),'黄金只能通过预留获得');const same=chosen.length===2&&chosen[0]===chosen[1];if(same)check(s.bank[chosen[0]]>=4,'拿两枚同色前，公共池至少需要四枚');else{check(new Set(chosen).size===chosen.length,'请选择不同颜色');check(chosen.length===Math.min(3,COLORS.filter(c=>s.bank[c]>0).length),'有三种颜色时，必须拿三种不同宝石');check(chosen.every(c=>s.bank[c]>0),'公共池里没有这种宝石');}for(const c of chosen){s.bank[c]--;p.tokens[c]++;}pushEvent(s,{type:'take',colors:[...chosen]});
+ }else if(action.type==='reserve'){check(p.reserved.length<3,'最多只能预留三张牌');let id=action.card,blind=false;if(id){check(CARDS.some(c=>c.id===id),'未知卡牌');popMarket(s,id);}else{check([1,2,3].includes(action.tier)&&s.decks[action.tier].length>0,'这叠牌已经抽完了');id=s.decks[action.tier].shift();blind=true;}p.reserved.push(id);const gold=s.bank.gold>0;if(gold){s.bank.gold--;p.tokens.gold++;}pushEvent(s,{type:'reserve',card:blind?null:id,tier:cardById(id).tier,blind,gold});
+ }else if(action.type==='buy'){const card=cardById(action.card);check(card,'未知卡牌');const reserved=p.reserved.includes(card.id);check(reserved||s.market[card.tier].includes(card.id),'只能购买市场牌或自己的预留牌');const pay=action.payment??paymentFor(p,card);check(pay,'宝石和永久折扣还不够');check(Object.keys(pay).every(c=>ALL.includes(c)),'未知宝石');check(ALL.every(c=>Number.isInteger(pay[c]??0)&&(pay[c]??0)>=0&&(pay[c]??0)<=p.tokens[c]),'支付的宝石数量不正确');const cost=priceFor(p,card);check(COLORS.every(c=>(pay[c]??0)<=cost[c]),'无需多付宝石');check(COLORS.reduce((n,c)=>n+cost[c]-(pay[c]??0),0)===(pay.gold??0),'黄金替代数量不正确');for(const c of ALL){p.tokens[c]-=pay[c]??0;s.bank[c]+=pay[c]??0;}if(reserved)p.reserved=p.reserved.filter(id=>id!==card.id);else popMarket(s,card.id);p.cards.push(card.id);pushEvent(s,{type:'buy',card:card.id,payment:{...pay},points:card.points,bonus:card.bonus});
+ }else throw Error('未知动作');s.mainMoves++;s.lastAction={player:actor,...Object.fromEntries(Object.entries(action).filter(([,value])=>value!==undefined))};afterAction(s);return s;
+}
+export function playerView(s,id){const view=structuredClone(s);view.decks=Object.fromEntries([1,2,3].map(t=>[t,s.decks[t].length]));view.players=view.players.map(p=>p.id===id?p:{...p,reserved:p.reserved.map(()=>null)});delete view.seed;delete view.lastAction;return view;}
+export function assertInvariants(s){const count=s.players.length,per=count===2?4:count===3?5:7;for(const c of ALL)check(s.bank[c]+s.players.reduce((v,p)=>v+p.tokens[c],0)===(c==='gold'?5:per),'宝石总数不守恒');check(ALL.every(c=>s.bank[c]>=0),'公共池出现负数');const all=[...Object.values(s.decks).flat(),...Object.values(s.market).flat().filter(Boolean),...s.players.flatMap(p=>[...p.cards,...p.reserved])];check(all.length===90&&new Set(all).size===90,'卡牌数量或唯一性错误');for(const p of s.players){check(p.reserved.length<=3,'预留牌超限');check(ALL.every(c=>Number.isInteger(p.tokens[c])&&p.tokens[c]>=0),'玩家宝石非法');check(p.id===s.current&&s.phase==='return'||total(p.tokens)<=10,'玩家宝石超限');}const nobles=[...s.nobles,...s.players.flatMap(p=>p.nobles)];check(nobles.length===count+1&&new Set(nobles).size===count+1,'贵族数量异常');return true;}
diff --git a/everwith-claude-frontend/src/lib/util.ts b/everwith-claude-frontend/src/lib/util.ts
new file mode 100644
index 00000000..4575162e
--- /dev/null
+++ b/everwith-claude-frontend/src/lib/util.ts
@@ -0,0 +1,72 @@
+/** Small shared helpers. No network, no storage of secrets. */
+export type Lang = 'zh' | 'en'
+export type L10n = {zh: string; en: string}
+
+export const pick = (text: L10n | string, lang: Lang): string => typeof text === 'string' ? text : text[lang] || text.zh
+
+export function randomId(prefix: string, bytes = 8): string {
+  const raw = new Uint8Array(bytes)
+  crypto.getRandomValues(raw)
+  return `${prefix}_${Array.from(raw, b => b.toString(16).padStart(2, '0')).join('')}`
+}
+
+/** Deterministic 32-bit hash for presentation-only variation (never for game randomness). */
+export function hash32(text: string): number {
+  let h = 2166136261
+  for (let i = 0; i < text.length; i++) h = Math.imul(h ^ text.charCodeAt(i), 16777619)
+  return h >>> 0
+}
+
+export function seededRandom(seed: number): () => number {
+  let x = seed >>> 0
+  return () => {
+    x = (Math.imul(x, 1664525) + 1013904223) >>> 0
+    return x / 4294967296
+  }
+}
+
+export const sleep = (ms: number, signal?: AbortSignal) => new Promise<void>((resolve, reject) => {
+  if (signal?.aborted) { reject(signal.reason ?? new DOMException('Aborted', 'AbortError')); return }
+  const timer = setTimeout(() => { signal?.removeEventListener('abort', onAbort); resolve() }, ms)
+  const onAbort = () => { clearTimeout(timer); reject(signal?.reason ?? new DOMException('Aborted', 'AbortError')) }
+  signal?.addEventListener('abort', onAbort, {once: true})
+})
+
+export function clamp(value: number, lo: number, hi: number) { return Math.max(lo, Math.min(hi, value)) }
+
+export function formatTime(iso: string, lang: Lang): string {
+  const d = new Date(iso)
+  if (Number.isNaN(d.getTime())) return ''
+  return d.toLocaleString(lang === 'zh' ? 'zh-CN' : 'en-US', {month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'})
+}
+
+export function classNames(...parts: (string | false | null | undefined)[]) { return parts.filter(Boolean).join(' ') }
+
+export function safeStorage(kind: 'local' | 'session' = 'local'): Storage | null {
+  try {
+    const s = kind === 'local' ? window.localStorage : window.sessionStorage
+    const probe = '__everwith_probe__'
+    s.setItem(probe, '1'); s.removeItem(probe)
+    return s
+  } catch { return null }
+}
+
+export function readJSON<T>(key: string, fallback: T, kind: 'local' | 'session' = 'local'): T {
+  const s = safeStorage(kind)
+  if (!s) return fallback
+  try {
+    const raw = s.getItem(key)
+    return raw ? JSON.parse(raw) as T : fallback
+  } catch { return fallback }
+}
+
+export function writeJSON(key: string, value: unknown, kind: 'local' | 'session' = 'local') {
+  const s = safeStorage(kind)
+  if (!s) return
+  try { s.setItem(key, JSON.stringify(value)) } catch { /* Quota or privacy mode: keep in memory only. */ }
+}
+
+export function removeKey(key: string, kind: 'local' | 'session' = 'local') {
+  const s = safeStorage(kind)
+  try { s?.removeItem(key) } catch { /* ignore */ }
+}
diff --git a/everwith-claude-frontend/src/live2d/LiveStage.tsx b/everwith-claude-frontend/src/live2d/LiveStage.tsx
new file mode 100644
index 00000000..9e3c7b3c
--- /dev/null
+++ b/everwith-claude-frontend/src/live2d/LiveStage.tsx
@@ -0,0 +1,92 @@
+import {useEffect, useRef, useState, useSyncExternalStore} from 'react'
+import {ModelRuntime} from './runtime'
+import {director} from './director'
+import {frameworkAvailable} from './framework'
+import {demoVoice} from './audio'
+import type {CharacterRuntimeConfig, FramingPreset} from './characters'
+import type {Expression} from './performer'
+import {scenarios} from '../mock/scenarios'
+import {useApp} from '../app/store'
+import {useI18n} from '../app/i18n'
+import {Portrait} from '../components/Portrait'
+import {StageBackdrop} from '../components/Art'
+import {backdropFor} from '../art/generated'
+import {classNames} from '../lib/util'
+
+/**
+ * Unified character performance surface (friends, NPCs, table-mates and previews use
+ * the same component). Static image of the SAME character underneath while loading
+ * or when the model/Core/WebGL is unavailable — never another character's face.
+ * Behind both sits the character's room (generated batch; generic room for characters
+ * without one). `backdrop={null}` turns it off when the surrounding card already has one.
+ */
+export function LiveStage({character, name, fallbackImage, expression = 'neutral', speaking = false, preset = 'stage', className = '', active = true, showStatus = true, label, backdrop}: {
+  character: CharacterRuntimeConfig | null; name: string; fallbackImage?: string | null; expression?: Expression; speaking?: boolean
+  preset?: FramingPreset; className?: string; active?: boolean; showStatus?: boolean; label?: string; backdrop?: string | null
+}) {
+  const {t} = useI18n()
+  const reducedMotion = useApp(s => s.reducedMotion)
+  const missing = useSyncExternalStore(scenarios.subscribe, () => scenarios.isOn('live2d.model_missing'), () => false)
+  const hostRef = useRef<HTMLDivElement>(null)
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const runtimeRef = useRef<ModelRuntime | null>(null)
+  const [status, setStatus] = useState<'static' | 'loading' | 'ready' | 'failed'>('static')
+  const [paused, setPaused] = useState(false)
+  const wantLive = !!character && active && !missing && frameworkAvailable()
+  const staticSrc = character?.staticPortrait ?? fallbackImage ?? null
+
+  useEffect(() => {
+    const canvas = canvasRef.current, host = hostRef.current
+    if (!wantLive || !canvas || !host || !character) { setStatus(character && active ? 'failed' : 'static'); return }
+    const runtime = new ModelRuntime(canvas, character, {reducedMotion, preset})
+    runtimeRef.current = runtime
+    setStatus('loading')
+    let disposed = false
+    const resize = () => { const r = host.getBoundingClientRect(); runtime.resize(r.width, r.height, window.devicePixelRatio || 1) }
+    const ro = new ResizeObserver(resize)
+    ro.observe(host)
+    const io = new IntersectionObserver(entries => {
+      const visible = entries.some(e => e.isIntersecting)
+      director.setVisible(runtime, visible); setPaused(!visible)
+    }, {threshold: .02})
+    io.observe(host)
+    void runtime.load().then(() => {
+      if (disposed) return
+      if (runtime.status === 'ready') { resize(); director.register(runtime); setStatus('ready') } else setStatus('failed')
+    })
+    return () => {
+      disposed = true
+      ro.disconnect(); io.disconnect()
+      director.unregister(runtime)
+      runtime.dispose()
+      if (runtimeRef.current === runtime) runtimeRef.current = null
+    }
+    // A new character/preset/activation creates a new runtime (and a new lease).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wantLive, character?.key, preset])
+
+  useEffect(() => { runtimeRef.current?.setReducedMotion(reducedMotion) }, [reducedMotion])
+  useEffect(() => { if (status === 'ready') runtimeRef.current?.setExpression(expression) }, [expression, status])
+  useEffect(() => {
+    const runtime = runtimeRef.current
+    if (!runtime || status !== 'ready' || !character) return
+    runtime.setMouthSource(speaking ? () => demoVoice.speaker === character.key ? demoVoice.level() : null : null)
+    return () => runtime.setMouthSource(null)
+  }, [speaking, status, character])
+
+  const showCanvas = status === 'ready' || status === 'loading'
+  return (
+    <div ref={hostRef} className={classNames('ew-stage', `preset-${preset}`, className, status === 'ready' && 'is-live')} data-live2d-status={status} data-character={character?.key ?? 'none'}
+      role="img" aria-label={label ?? `${name} · ${t(`expr.${expression}`)}`}>
+      <StageBackdrop src={backdrop === undefined ? backdropFor(character?.key) : backdrop} />
+      <div className="ew-stage-static" aria-hidden={status === 'ready'}>
+        <Portrait src={staticSrc} name={name} fit="cover" position="50% 0%" className="ew-stage-img" />
+      </div>
+      {/* A disposed runtime loses its WebGL context; a new character/preset gets a fresh canvas element. */}
+      <canvas key={`${character?.key ?? 'none'}:${preset}:${wantLive ? 'live' : 'off'}`} ref={canvasRef} className="ew-stage-canvas" hidden={!showCanvas} aria-hidden="true" />
+      {showStatus && status === 'failed' && <span className="ew-stage-chip warn">{t('live2d.unavailable')}</span>}
+      {showStatus && status === 'loading' && <span className="ew-stage-chip">{t('live2d.loading')}</span>}
+      {showStatus && status === 'ready' && paused && <span className="ew-stage-chip">{t('live2d.paused')}</span>}
+    </div>
+  )
+}
diff --git a/everwith-claude-frontend/src/live2d/audio.ts b/everwith-claude-frontend/src/live2d/audio.ts
new file mode 100644
index 00000000..80169abb
--- /dev/null
+++ b/everwith-claude-frontend/src/live2d/audio.ts
@@ -0,0 +1,77 @@
+/**
+ * “演示音轨” — a locally synthesised babble track (NOT TTS, NOT a voice clone) so the
+ * mouth can be shown following real audio. The mouth reads RMS from an AnalyserNode
+ * on the actual output; when nothing plays, the level is null and the mouth closes.
+ * Audio only starts from a user gesture (browser autoplay policy).
+ */
+import {hash32, seededRandom} from '../lib/util'
+import type {CharacterKey} from './characters'
+
+const PITCH: Record<CharacterKey, number> = {lena: 205, nora: 232, iris: 196, arthur: 118, marcus: 104}
+
+export class DemoVoice {
+  private ctx: AudioContext | null = null
+  private analyser: AnalyserNode | null = null
+  private buffer: Float32Array<ArrayBuffer> | null = null
+  private sources: AudioScheduledSourceNode[] = []
+  private endsAt = 0
+  private onEnd: (() => void) | null = null
+  speaker: CharacterKey | null = null
+
+  get playing() { return !!this.ctx && this.ctx.currentTime < this.endsAt }
+
+  async play(text: string, speaker: CharacterKey, onEnd?: () => void) {
+    this.stop()
+    const Ctor = window.AudioContext ?? (window as unknown as {webkitAudioContext?: typeof AudioContext}).webkitAudioContext
+    if (!Ctor) throw Error('audio_unavailable')
+    this.ctx ??= new Ctor()
+    await this.ctx.resume()
+    const ctx = this.ctx
+    this.analyser = ctx.createAnalyser(); this.analyser.fftSize = 512
+    this.buffer = new Float32Array(this.analyser.fftSize)
+    const master = ctx.createGain(); master.gain.value = .16
+    master.connect(this.analyser); this.analyser.connect(ctx.destination)
+    const rand = seededRandom(hash32(text + speaker))
+    const chars = [...text.replace(/\*[^*]*\*/g, '').trim()].slice(0, 60)
+    let t = ctx.currentTime + .05
+    const f0 = PITCH[speaker]
+    for (let i = 0; i < chars.length; i++) {
+      const ch = chars[i]
+      if (/[，。！？、,.!?…\n]/.test(ch)) { t += .22; continue }
+      if (/\s/.test(ch)) { t += .06; continue }
+      const dur = .11 + rand() * .1
+      const osc = ctx.createOscillator(); osc.type = 'sawtooth'
+      osc.frequency.setValueAtTime(f0 * (.92 + rand() * .2), t)
+      osc.frequency.linearRampToValueAtTime(f0 * (.88 + rand() * .2), t + dur)
+      const formant = ctx.createBiquadFilter(); formant.type = 'bandpass'; formant.frequency.value = 650 + rand() * 600; formant.Q.value = 2.4
+      const env = ctx.createGain(); env.gain.setValueAtTime(0, t)
+      env.gain.linearRampToValueAtTime(1, t + .02); env.gain.setValueAtTime(1, t + dur - .05); env.gain.linearRampToValueAtTime(0, t + dur)
+      osc.connect(formant); formant.connect(env); env.connect(master)
+      osc.start(t); osc.stop(t + dur + .01)
+      this.sources.push(osc)
+      t += dur + .03 + rand() * .05
+    }
+    this.endsAt = t
+    this.speaker = speaker
+    this.onEnd = onEnd ?? null
+    const last = this.sources[this.sources.length - 1]
+    if (last) last.onended = () => { if (this.ctx && this.ctx.currentTime >= this.endsAt - .02) this.finish() }
+    else this.finish()
+  }
+  private finish() { const cb = this.onEnd; this.onEnd = null; this.sources = []; this.speaker = null; cb?.() }
+  /** RMS level of what is actually being played, or null when silent. */
+  level(): number | null {
+    if (!this.analyser || !this.buffer || !this.playing) return null
+    this.analyser.getFloatTimeDomainData(this.buffer)
+    let sum = 0
+    for (let i = 0; i < this.buffer.length; i++) sum += this.buffer[i] * this.buffer[i]
+    return Math.sqrt(sum / this.buffer.length)
+  }
+  stop() {
+    for (const s of this.sources) { try { s.stop() } catch { /* already stopped */ } }
+    this.sources = []; this.endsAt = 0
+    const cb = this.onEnd; this.onEnd = null; this.speaker = null; cb?.()
+  }
+  dispose() { this.stop(); void this.ctx?.close(); this.ctx = null }
+}
+export const demoVoice = new DemoVoice()
diff --git a/everwith-claude-frontend/src/live2d/carrier-parameter-units.ts b/everwith-claude-frontend/src/live2d/carrier-parameter-units.ts
new file mode 100644
index 00000000..a42ac375
--- /dev/null
+++ b/everwith-claude-frontend/src/live2d/carrier-parameter-units.ts
@@ -0,0 +1,21 @@
+/** Derived internal parameter units; the source remains track.parameters, after its existing gate. */
+export const CARRIER_SP_PARAMETER = 'ParamCarrierSP16384';
+export const CARRIER_SP_SCALE = 16384;
+export function carrierSurpriseValues(sourceParameter: number) {
+  if (!Number.isFinite(sourceParameter)) throw new Error('Nonfinite surprise input');
+  const logical = Math.fround(Math.max(0, Math.min(1, sourceParameter)));
+  // Multiplication by 2^14 is exact for the bounded Float32 inputs used here.
+  const encoded = Math.fround(logical * CARRIER_SP_SCALE);
+  if (Math.fround(encoded / CARRIER_SP_SCALE) !== logical) throw new Error('Parameter units lost a Float32 value');
+  return { logical, encoded };
+}
+export function applyCarrierSurprise(
+  model: { setParameterValueByIndex(index: number, value: number, weight?: number): void },
+  originalSurpriseIndex: number, carrierSurpriseIndex: number, sourceParameter: number,
+) {
+  if (originalSurpriseIndex < 0 || carrierSurpriseIndex < 0 || originalSurpriseIndex === carrierSurpriseIndex) throw new Error('Invalid parameter inventory');
+  const values = carrierSurpriseValues(sourceParameter);
+  model.setParameterValueByIndex(originalSurpriseIndex, values.logical, 1);
+  model.setParameterValueByIndex(carrierSurpriseIndex, values.encoded, 1);
+  return values;
+}
diff --git a/everwith-claude-frontend/src/live2d/characters.ts b/everwith-claude-frontend/src/live2d/characters.ts
new file mode 100644
index 00000000..c59b8559
--- /dev/null
+++ b/everwith-claude-frontend/src/live2d/characters.ts
@@ -0,0 +1,57 @@
+/**
+ * Frozen per-character runtime pins (verification/MODEL_PINS.json) and face framing
+ * calibration (reference/frontend/character-calibration/feed-face-framing.json).
+ * Identity is source_id + version → character key. Never chosen by display name.
+ */
+export type CharacterKey = 'arthur' | 'lena' | 'marcus' | 'nora' | 'iris'
+export type ExpressionMode = 'discrete' | 'blink_swap' | 'carrier'
+export type CharacterRuntimeConfig = {
+  key: CharacterKey; sourceId: string; version: '1'; candidateId: string | null
+  model3: string; mocSha256: string; textureSha256: string
+  headCaps: {x: number; y: number; z: number}
+  gazeEnabled: false | null
+  /** Authored idle loop (12 s) for characters that ship one; procedural otherwise. */
+  idle: {kind: 'authored'; motion: string; scale: {x: number; y: number; z: number}} | {kind: 'procedural'}
+  expressionMode: ExpressionMode
+  /** featureSafety and referenceFace boxes in model units: [xmin, xmax, ymin, ymax]. */
+  faceBox: [number, number, number, number]
+  referenceFace: [number, number, number, number]
+  /** Procedural seed so two characters never move in lockstep. */
+  seed: number
+  staticPortrait: string
+}
+const L = '/handoff/assets/live2d'
+const P = '/handoff/assets/companions/portraits'
+export const CHARACTERS: Record<CharacterKey, CharacterRuntimeConfig> = {
+  arthur: {key: 'arthur', sourceId: 'official-arthur', version: '1', candidateId: 'arthur-dynamic-continuity-r7',
+    model3: `${L}/arthur/arthur-expressions.model3.json`, mocSha256: '047e051a47f4eac96f68446d96a8e5d993a828319992eec05fcebb1da803785f', textureSha256: '64bd1c45f9f75e1228107b5c99ea5c8a8d14c44bd7a2878c15b78441f188a33a',
+    headCaps: {x: 8, y: 4, z: 2.5}, gazeEnabled: null, idle: {kind: 'procedural'}, expressionMode: 'discrete',
+    faceBox: [-0.2191279052851829, 0.21654016320604141, -0.08003866869688367, 0.4117642282839455], referenceFace: [-0.1631538676163058, 0.16058922978759538, -0.035257008684704806, 0.36681102610410304],
+    seed: 7, staticPortrait: `${P}/arthur-r7-neutral.png`},
+  lena: {key: 'lena', sourceId: 'official-lena', version: '1', candidateId: 'lena-soft-anime-v2-rebound-20261008',
+    model3: `${L}/lena/lena-soft-anime-v2.model3.json`, mocSha256: '91ade7978c80712860740e997eba5393686bb1f4948b622791eb6980659548c1', textureSha256: 'cc41ed45da39ec00463401a0a8b72e0d5f4a7833f6a75a57731980a816deb18d',
+    headCaps: {x: 8, y: 2, z: 1.5}, gazeEnabled: null, idle: {kind: 'authored', motion: 'lena-soft-anime-v2.idle.motion3.json', scale: {x: 1, y: .5, z: .3}}, expressionMode: 'blink_swap',
+    faceBox: [-0.22483677648678516, 0.17014762023557162, -0.02338236550358241, 0.41680199203841456], referenceFace: [-0.18631876165307384, 0.13164158593546016, 0.011334810144414162, 0.38141980736865894],
+    seed: 13, staticPortrait: `${P}/lena-soft-anime-v2-neutral.png`},
+  marcus: {key: 'marcus', sourceId: 'official-marcus', version: '1', candidateId: 'marcus-related-face-r3-20261007',
+    model3: `${L}/marcus/marcus-live2d.model3.json`, mocSha256: 'd50f76fa6a7902a06add8d5c76f9287c987dc82fd0efd467cd3989bf9ddc0c60', textureSha256: '44c0b0979b5c11f441aa85a8f1f1a72e4f2035b7c7cd38ae7ee977a2edf12d7e',
+    headCaps: {x: 8, y: 2, z: 1.5}, gazeEnabled: null, idle: {kind: 'authored', motion: 'marcus-live2d.idle.motion3.json', scale: {x: 1, y: .5, z: .3}}, expressionMode: 'blink_swap',
+    faceBox: [-0.2146165896195292, 0.14144645500183106, -0.10949443454649993, 0.31477644123145654], referenceFace: [-0.17261634241930185, 0.088256528939232, -0.07407007280791592, 0.27887558506137683],
+    seed: 29, staticPortrait: `${P}/marcus-r3-neutral.png`},
+  nora: {key: 'nora', sourceId: 'official-nora', version: '1', candidateId: 'nora-eye-contact-r4',
+    model3: `${L}/nora/nora-expressions.model3.json`, mocSha256: 'd3eb973f5044ac9e7d14f2e348ef5c6c0d2b7b3b1f4c46814f4f9c1c427c2b5c', textureSha256: 'e1674a86cade714845c4531b3d4c7910e3c682191986443a1e2f7d238b3dfe86',
+    headCaps: {x: 3, y: 1, z: 1}, gazeEnabled: false, idle: {kind: 'authored', motion: 'nora-expressions.idle.motion3.json', scale: {x: 1, y: .5, z: .3}}, expressionMode: 'blink_swap',
+    faceBox: [-0.22058783745073712, 0.2532342399360804, -0.17106284177828168, 0.44940440879291654], referenceFace: [-0.17970930893848552, 0.21248404022403025, -0.13310085794185714, 0.41074058026426175],
+    seed: 41, staticPortrait: `${P}/nora-r4-neutral.png`},
+  iris: {key: 'iris', sourceId: 'official-iris', version: '1', candidateId: 'accepted-iris-draw-order-carrier',
+    model3: `${L}/iris/iris-expressions.model3.json`, mocSha256: 'a53e1e6898e5ddb216052d5da3a743636ce24532a42a94d24c72ba70a159d53e', textureSha256: '27ad28e7b28994fd4b9f47145d332ff10dc896fac0810f1d0007e46f0bdf31e2',
+    headCaps: {x: 3, y: 1, z: 1}, gazeEnabled: null, idle: {kind: 'procedural'}, expressionMode: 'carrier',
+    faceBox: [-0.22174425709547516, 0.22352484281679533, -0.11010866583902296, 0.39697999930645794], referenceFace: [-0.18693994162433292, 0.18874300341900757, -0.07811520948926297, 0.36447020282016995],
+    seed: 53, staticPortrait: `${P}/iris-local-neutral.png`},
+}
+export function characterFor(sourceId: string | null | undefined, version: string | null | undefined): CharacterRuntimeConfig | null {
+  if (version !== '1' || !sourceId?.startsWith('official-')) return null
+  const key = sourceId.slice('official-'.length) as CharacterKey
+  return CHARACTERS[key] ?? null
+}
+export type FramingPreset = 'stage' | 'card' | 'rail' | 'zoom' | 'thumb'
diff --git a/everwith-claude-frontend/src/live2d/director.ts b/everwith-claude-frontend/src/live2d/director.ts
new file mode 100644
index 00000000..4db63431
--- /dev/null
+++ b/everwith-claude-frontend/src/live2d/director.ts
@@ -0,0 +1,53 @@
+/**
+ * One requestAnimationFrame for every visible runtime. Hidden documents and
+ * off-screen stages are skipped (no writes, no draws). Exposes counters so tests can
+ * verify that switching characters / closing stages returns everything to zero.
+ */
+import type {ModelRuntime} from './runtime'
+
+type Entry = {runtime: ModelRuntime; visible: boolean; lastDraw: number}
+const entries = new Map<ModelRuntime, Entry>()
+let raf = 0
+export const live2dCounters = {created: 0, disposed: 0, framesDrawn: 0, skippedHidden: 0, throttled: 0, frameErrors: 0}
+
+function loop(now: number) {
+  raf = 0
+  if (document.visibilityState === 'hidden') { live2dCounters.skippedHidden++; return }
+  for (const e of entries.values()) {
+    if (!e.visible) continue
+    // Adaptive budget: a runtime whose frames cost > 12 ms (e.g. software GL) renders at
+    // ~30 fps so it never starves input, timers and the chat/game UI on the same thread.
+    if (e.runtime.stats.avgFrameMs > 12 && now - e.lastDraw < 30) { live2dCounters.throttled++; continue }
+    // One failing frame (e.g. a draw racing a context loss) must not end the shared loop
+    // for every stage: record it on that runtime and keep scheduling.
+    try { if (e.runtime.frame(now)) { live2dCounters.framesDrawn++; e.lastDraw = now } }
+    catch (error) { live2dCounters.frameErrors++; e.runtime.noteFrameError(error) }
+  }
+  if (entries.size) raf = requestAnimationFrame(loop)
+}
+function kick() { if (!raf && entries.size && document.visibilityState !== 'hidden') raf = requestAnimationFrame(loop) }
+if (typeof document !== 'undefined') document.addEventListener('visibilitychange', kick)
+
+export const director = {
+  register(runtime: ModelRuntime) { entries.set(runtime, {runtime, visible: true, lastDraw: 0}); live2dCounters.created++; kick() },
+  setVisible(runtime: ModelRuntime, visible: boolean) { const e = entries.get(runtime); if (e) { e.visible = visible; kick() } },
+  unregister(runtime: ModelRuntime) { if (entries.delete(runtime)) live2dCounters.disposed++ },
+  /** Evidence hook (tests / manual review): drive a visible runtime's expression like a committed cue would. */
+  debugSetExpression(character: string, expression: 'neutral' | 'happy' | 'surprised') {
+    let n = 0
+    for (const e of entries.values()) if (e.runtime.cfg.key === character) { e.runtime.setExpression(expression); n++ }
+    return n
+  },
+  snapshot() {
+    return {
+      active: entries.size, ...live2dCounters,
+      runtimes: [...entries.values()].map(e => ({character: e.runtime.cfg.key, status: e.runtime.status, visible: e.visible, frames: e.runtime.stats.frames,
+        avgFrameMs: Number(e.runtime.stats.avgFrameMs.toFixed(2)), maxFrameMs: Number(e.runtime.stats.maxFrameMs.toFixed(2)), contextLosses: e.runtime.stats.contextLosses,
+        restores: e.runtime.stats.restores, expression: e.runtime.lastFrame?.state.expression ?? null, eye: e.runtime.lastFrame?.state.eye ?? null, mouth: e.runtime.lastFrame?.state.mouth ?? null,
+        error: e.runtime.error, lastError: e.runtime.stats.lastError, canvas: [e.runtime.canvas.width, e.runtime.canvas.height],
+        channels: Object.keys(e.runtime.lastFrame?.canonical ?? {}), extras: Object.keys(e.runtime.lastFrame?.extras ?? {}), swapping: e.runtime.lastFrame?.state.swapping ?? null})),
+    }
+  },
+}
+declare global { interface Window { __everwithLive2D?: typeof director } }
+if (typeof window !== 'undefined') window.__everwithLive2D = director
diff --git a/everwith-claude-frontend/src/live2d/framework.ts b/everwith-claude-frontend/src/live2d/framework.ts
new file mode 100644
index 00000000..20236fe3
--- /dev/null
+++ b/everwith-claude-frontend/src/live2d/framework.ts
@@ -0,0 +1,78 @@
+/**
+ * Lazy loader for the hash-verified Cubism runtime subset copied by `assets:sync`
+ * (Core script from /public/handoff, Framework TypeScript from src/vendor). When the
+ * runtime is absent the glob is empty and every stage falls back to its static image.
+ */
+export type CubismIdHandle = {getString(): {s: string} | string}
+export interface CubismModelLike {
+  getParameterCount(): number; getDrawableCount(): number
+  getParameterId(i: number): CubismIdHandle
+  getParameterDefaultValue(i: number): number; getParameterMinimumValue(i: number): number; getParameterMaximumValue(i: number): number
+  getParameterValueByIndex(i: number): number; setParameterValueByIndex(i: number, v: number, w?: number): void
+  getDrawableVertexPositions(i: number): Float32Array; getDrawableVertexCount(i: number): number
+  getDrawableDynamicFlagIsVisible(i: number): boolean; getDrawableOpacity(i: number): number
+  getCanvasWidth(): number; getCanvasHeight(): number
+  update(): void
+}
+export interface CubismMocLike { createModel(): CubismModelLike | null; deleteModel(m: CubismModelLike): void; release(): void }
+export interface CubismRendererLike {
+  initialize(model: CubismModelLike, maskBufferCount?: number): void; startUp(gl: WebGLRenderingContext | WebGL2RenderingContext): void
+  bindTexture(no: number, tex: WebGLTexture): void; setIsPremultipliedAlpha(v: boolean): void; setMvpMatrix(m: unknown): void
+  setRenderState(fbo: WebGLFramebuffer | null, viewport: number[]): void; drawModel(shaderPath?: string | null): void; release(): void
+  setRenderTargetSize?(w: number, h: number): void
+}
+export interface CubismPhysicsLike { evaluate(model: CubismModelLike, dt: number): void }
+export type Framework = {
+  Moc: {create(buf: ArrayBuffer, check: boolean): CubismMocLike | null; delete(m: CubismMocLike): void}
+  Renderer: new (w: number, h: number) => CubismRendererLike
+  Physics: {create(buf: ArrayBuffer, size: number): CubismPhysicsLike | null; delete(p: CubismPhysicsLike): void}
+  Matrix44: new () => {setMatrix(m: Float32Array): void}
+  ShaderManager: {getInstance(): {getShader(gl: WebGLRenderingContext): unknown}}
+  shaderPath: string
+}
+
+const CORE_URL = '/handoff/assets/runtime/cubism/Core/live2dcubismcore.min.js'
+const SHADER_PATH = '/handoff/assets/runtime/cubism/Framework/Shaders/WebGL/'
+const modules = import.meta.glob('../vendor/cubism-framework/src/**/*.ts')
+const mod = async <T>(path: string): Promise<T> => {
+  const loader = modules[`../vendor/cubism-framework/src/${path}`]
+  if (!loader) throw Error('live2d_framework_missing')
+  return await loader() as T
+}
+
+let flight: Promise<Framework> | null = null
+function loadCore(): Promise<void> {
+  if ((window as unknown as {Live2DCubismCore?: unknown}).Live2DCubismCore) return Promise.resolve()
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script')
+    script.src = CORE_URL; script.async = true
+    script.onload = () => (window as unknown as {Live2DCubismCore?: unknown}).Live2DCubismCore ? resolve() : reject(Error('live2d_core_missing'))
+    script.onerror = () => reject(Error('live2d_core_missing'))
+    document.head.appendChild(script)
+  })
+}
+export function loadFramework(): Promise<Framework> {
+  if (flight) return flight
+  flight = (async () => {
+    await loadCore()
+    const fw = await mod<{CubismFramework: {startUp(o: unknown): boolean; initialize(m?: number): void; isInitialized(): boolean}; Option: new () => {logFunction: unknown; loggingLevel: number}; LogLevel: Record<string, number>}>('live2dcubismframework.ts')
+    const [moc, renderer, physics, matrix, shader] = await Promise.all([
+      mod<{CubismMoc: Framework['Moc']}>('model/cubismmoc.ts'),
+      mod<{CubismRenderer_WebGL: Framework['Renderer']}>('rendering/cubismrenderer_webgl.ts'),
+      mod<{CubismPhysics: Framework['Physics']}>('physics/cubismphysics.ts'),
+      mod<{CubismMatrix44: Framework['Matrix44']}>('math/cubismmatrix44.ts'),
+      mod<{CubismShaderManager_WebGL: Framework['ShaderManager']}>('rendering/cubismshader_webgl.ts'),
+    ])
+    if (!fw.CubismFramework.isInitialized()) {
+      const option = new fw.Option()
+      option.logFunction = (message: string) => { if (/error/i.test(message)) console.warn('[Cubism]', message) }
+      option.loggingLevel = fw.LogLevel.LogLevel_Error
+      fw.CubismFramework.startUp(option)
+      fw.CubismFramework.initialize()
+    }
+    return {Moc: moc.CubismMoc, Renderer: renderer.CubismRenderer_WebGL, Physics: physics.CubismPhysics, Matrix44: matrix.CubismMatrix44, ShaderManager: shader.CubismShaderManager_WebGL, shaderPath: SHADER_PATH}
+  })()
+  flight.catch(() => { flight = null })
+  return flight
+}
+export const frameworkAvailable = () => Object.keys(modules).length > 0
diff --git a/everwith-claude-frontend/src/live2d/motion.ts b/everwith-claude-frontend/src/live2d/motion.ts
new file mode 100644
index 00000000..c346262d
--- /dev/null
+++ b/everwith-claude-frontend/src/live2d/motion.ts
@@ -0,0 +1,79 @@
+/**
+ * Minimal motion3.json curve evaluator (linear / restricted bezier / stepped /
+ * inverse-stepped), used as a read-only sampler for authored idle loops. The single
+ * frame writer decides what is actually applied (and clamps it to frozen caps).
+ */
+type Point = {t: number; v: number}
+type Segment = {kind: 0 | 1 | 2 | 3; points: Point[]}
+export type Curve = {id: string; segments: Segment[]}
+export type Motion = {duration: number; loop: boolean; curves: Map<string, Curve>}
+
+export function parseMotion(json: unknown): Motion {
+  const data = json as {Meta?: {Duration?: number; Loop?: boolean}; Curves?: {Target?: string; Id?: string; Segments?: number[]}[]}
+  if (!data?.Meta || !Array.isArray(data.Curves)) throw Error('motion_invalid')
+  const curves = new Map<string, Curve>()
+  for (const c of data.Curves) {
+    if (c.Target !== 'Parameter' || typeof c.Id !== 'string' || !Array.isArray(c.Segments) || c.Segments.length < 2) continue
+    const s = c.Segments
+    const segments: Segment[] = []
+    let last: Point = {t: s[0], v: s[1]}
+    let i = 2
+    while (i < s.length) {
+      const kind = s[i] as 0 | 1 | 2 | 3
+      if (kind === 1) {
+        const p1 = {t: s[i + 1], v: s[i + 2]}, p2 = {t: s[i + 3], v: s[i + 4]}, p3 = {t: s[i + 5], v: s[i + 6]}
+        segments.push({kind, points: [last, p1, p2, p3]}); last = p3; i += 7
+      } else {
+        const p = {t: s[i + 1], v: s[i + 2]}
+        segments.push({kind, points: [last, p]}); last = p; i += 3
+      }
+    }
+    curves.set(c.Id, {id: c.Id, segments})
+  }
+  return {duration: Number(data.Meta.Duration ?? 0), loop: !!data.Meta.Loop, curves}
+}
+
+function evalSegment(seg: Segment, t: number): number {
+  const [a, b] = seg.points
+  if (seg.kind === 0) {
+    const end = seg.points[1], span = end.t - a.t
+    const k = span <= 0 ? 0 : (t - a.t) / span
+    return a.v + (end.v - a.v) * k
+  }
+  if (seg.kind === 2) return a.v
+  if (seg.kind === 3) return b.v
+  // Restricted bezier: time maps linearly (AreBeziersRestricted = true in every frozen file).
+  const [p0, p1, p2, p3] = seg.points
+  const span = p3.t - p0.t
+  const k = span <= 0 ? 0 : Math.max(0, Math.min(1, (t - p0.t) / span))
+  const lerp = (x: number, y: number) => x + (y - x) * k
+  const q0 = lerp(p0.v, p1.v), q1 = lerp(p1.v, p2.v), q2 = lerp(p2.v, p3.v)
+  const r0 = lerp(q0, q1), r1 = lerp(q1, q2)
+  return lerp(r0, r1)
+}
+
+export function sampleCurve(curve: Curve, t: number): number {
+  const segs = curve.segments
+  if (!segs.length) return 0
+  if (t <= segs[0].points[0].t) return segs[0].points[0].v
+  for (const seg of segs) {
+    const end = seg.points[seg.points.length - 1]
+    if (t <= end.t) return evalSegment(seg, t)
+  }
+  const last = segs[segs.length - 1]
+  return last.points[last.points.length - 1].v
+}
+
+export function sampleMotion(motion: Motion, seconds: number, ids: string[]): Record<string, number> {
+  const t = motion.loop && motion.duration > 0 ? ((seconds % motion.duration) + motion.duration) % motion.duration : Math.min(seconds, motion.duration)
+  const out: Record<string, number> = {}
+  for (const id of ids) { const c = motion.curves.get(id); if (c) out[id] = sampleCurve(c, t) }
+  return out
+}
+
+/** Loop-boundary continuity check used by tests and the stats overlay. */
+export function loopSeam(motion: Motion, id: string): number {
+  const c = motion.curves.get(id)
+  if (!c) return 0
+  return Math.abs(sampleCurve(c, 0) - sampleCurve(c, motion.duration))
+}
diff --git a/everwith-claude-frontend/src/live2d/performer.ts b/everwith-claude-frontend/src/live2d/performer.ts
new file mode 100644
index 00000000..2bd66523
--- /dev/null
+++ b/everwith-claude-frontend/src/live2d/performer.ts
@@ -0,0 +1,116 @@
+/**
+ * Pure per-frame performance composer (no WebGL). One instance per model runtime;
+ * the runtime's frame loop is the ONLY caller and the only writer to the model.
+ * Inputs are intents (target expression, mouth level source); output is one frame.
+ */
+import type {CharacterRuntimeConfig} from './characters'
+import {sampleMotion} from './motion'
+import type {Motion} from './motion'
+import {seededRandom} from '../lib/util'
+
+export type Expression = 'neutral' | 'happy' | 'surprised'
+export type Frame = {
+  canonical: Record<string, number>
+  extras: Record<string, number>
+  state: {expression: Expression; target: Expression; swapping: boolean; eye: number; mouth: number; idle: 'authored' | 'procedural'}
+}
+const TAU = Math.PI * 2
+const SWAP = {close: .09, hold: .15, open: .13}
+const easeIn = (k: number) => k * k * k
+const easeOut = (k: number) => 1 - (1 - k) ** 3
+/** Smooth limiter: approaches the cap without a hard flat edge. */
+const soft = (v: number, cap: number) => cap <= 0 ? 0 : cap * Math.tanh(v / cap)
+
+export class Performer {
+  private current: Expression = 'neutral'
+  private target: Expression = 'neutral'
+  private swapStart: number | null = null
+  private swapFrom: Expression = 'neutral'
+  private swapTo: Expression = 'neutral'
+  private blinkAt: number
+  private blinkPhase: {start: number; double: boolean} | null = null
+  private rand: () => number
+  private mouth = 0
+  private lastT = 0
+  mouthSource: (() => number | null) | null = null
+
+  constructor(private cfg: CharacterRuntimeConfig, private opts: {reducedMotion: boolean; idleMotion: Motion | null}) {
+    this.rand = seededRandom(cfg.seed * 7919)
+    this.blinkAt = 1.2 + this.rand() * 2
+  }
+  setReducedMotion(v: boolean) { this.opts.reducedMotion = v }
+  setExpression(e: Expression) { this.target = e }
+  /** Cancel / switch: go back to a recognisable neutral face (through a blink). */
+  neutral() { this.target = 'neutral'; this.mouthSource = null }
+  get state() { return {current: this.current, target: this.target} }
+
+  private idle(t: number): {x: number; y: number; z: number; bx: number; by: number; bz: number; breath: number; eye: number} {
+    const c = this.cfg, rm = this.opts.reducedMotion
+    if (c.idle.kind === 'authored' && this.opts.idleMotion) {
+      const s = sampleMotion(this.opts.idleMotion, t, ['ParamAngleX', 'ParamAngleY', 'ParamAngleZ', 'ParamBodyAngleX', 'ParamBodyAngleY', 'ParamBodyAngleZ', 'ParamBreath', 'ParamEyeLOpen'])
+      // A slow, incommensurate layer keeps the 12 s loop from reading as a short repeat.
+      const drift = Math.sin(TAU * t / 17.3 + c.seed) * .35 + Math.sin(TAU * t / 29.7 + c.seed * .7) * .2
+      const k = rm ? .25 : 1
+      return {
+        x: (s.ParamAngleX ?? 0) * c.idle.scale.x * k + drift * c.headCaps.x * .25 * k,
+        y: (s.ParamAngleY ?? 0) * c.idle.scale.y * k + Math.sin(TAU * t / 11.1 + c.seed) * c.headCaps.y * .2 * k,
+        z: (s.ParamAngleZ ?? 0) * c.idle.scale.z * k + drift * c.headCaps.z * .2 * k,
+        bx: (s.ParamBodyAngleX ?? 0) * k, by: (s.ParamBodyAngleY ?? 0) * k, bz: (s.ParamBodyAngleZ ?? 0) * k,
+        breath: s.ParamBreath ?? (.5 + .5 * Math.sin(TAU * t / 3.6)), eye: s.ParamEyeLOpen ?? 1,
+      }
+    }
+    // Procedural idle for runtimes without an authored loop (Arthur, Iris).
+    const p = c.seed, k = rm ? .2 : 1
+    const x = c.headCaps.x * k * (.55 * Math.sin(TAU * t / 7.9 + p) + .22 * Math.sin(TAU * t / 3.7 + p * 1.3) + .12 * Math.sin(TAU * t / 13.3 + p * .4))
+    const y = c.headCaps.y * k * (.5 * Math.sin(TAU * t / 5.3 + p * .9) + .25 * Math.sin(TAU * t / 2.9 + p * 2.1))
+    const z = c.headCaps.z * k * (.6 * Math.sin(TAU * t / 9.1 + p * .5) + .2 * Math.sin(TAU * t / 4.1 + p))
+    return {x, y, z, bx: x * .35, by: y * .3, bz: z * .4, breath: .5 + .5 * Math.sin(TAU * t / (rm ? 4.8 : 3.6) + p), eye: this.blink(t)}
+  }
+  private blink(t: number): number {
+    if (!this.blinkPhase && t >= this.blinkAt) this.blinkPhase = {start: t, double: this.rand() < .15}
+    if (!this.blinkPhase) return 1
+    const e = t - this.blinkPhase.start
+    const one = (u: number) => u < .07 ? 1 - easeIn(u / .07) : u < .11 ? 0 : u < .23 ? easeOut((u - .11) / .12) : 1
+    const v = this.blinkPhase.double ? (e < .23 ? one(e) : one(e - .3)) : one(e)
+    if (e > (this.blinkPhase.double ? .55 : .25)) { this.blinkPhase = null; this.blinkAt = t + 2.2 + this.rand() * 3.4 }
+    return v
+  }
+
+  frame(t: number): Frame {
+    const dt = Math.max(0, Math.min(.1, t - this.lastT)); this.lastT = t
+    const c = this.cfg, idle = this.idle(t)
+    // Expression transitions happen behind a blink so a face swap is never visible.
+    if (this.swapStart === null && this.target !== this.current) { this.swapStart = t; this.swapFrom = this.current; this.swapTo = this.target }
+    let eyeSwap = 1, mix = 1, swapping = false
+    if (this.swapStart !== null) {
+      swapping = true
+      const e = t - this.swapStart
+      if (e < SWAP.close + SWAP.hold) this.swapTo = this.target // retarget only while the eyes are still closing/closed
+      if (e < SWAP.close) { eyeSwap = 1 - easeIn(e / SWAP.close); mix = 0 }
+      else if (e < SWAP.close + SWAP.hold) { eyeSwap = 0; mix = (e - SWAP.close) / SWAP.hold }
+      else if (e < SWAP.close + SWAP.hold + SWAP.open) { this.current = this.swapTo; eyeSwap = easeOut((e - SWAP.close - SWAP.hold) / SWAP.open) }
+      else { this.current = this.swapTo; this.swapStart = null; swapping = false }
+    }
+    const weights = (e: Expression) => ({happy: e === 'happy' ? 1 : 0, surprised: e === 'surprised' ? 1 : 0})
+    const from = weights(this.swapFrom), to = weights(this.swapStart !== null ? this.swapTo : this.current)
+    let happy = this.swapStart !== null ? from.happy + (to.happy - from.happy) * mix : to.happy
+    let surprised = this.swapStart !== null ? from.surprised + (to.surprised - from.surprised) * mix : to.surprised
+    if (c.expressionMode === 'discrete') { happy = happy >= .5 ? 1 : 0; surprised = surprised >= .5 ? 1 : 0 }
+    const eye = Math.min(idle.eye, eyeSwap)
+    // Mouth follows a real audio level only; silent → closed. Closed during any swap.
+    const level = this.mouthSource?.() ?? null
+    const targetMouth = swapping || level === null ? 0 : Math.max(0, Math.min(1, (level - .02) * 3.2))
+    if (swapping) this.mouth = 0
+    else this.mouth += (targetMouth - this.mouth) * Math.min(1, (targetMouth > this.mouth ? 22 : 12) * dt)
+    const mouth = this.mouth < .01 ? 0 : this.mouth
+    const fractional = (happy > 0 && happy < 1) || (surprised > 0 && surprised < 1)
+    const canonical: Record<string, number> = {
+      ParamAngleX: soft(idle.x, c.headCaps.x), ParamAngleY: soft(idle.y, c.headCaps.y), ParamAngleZ: soft(idle.z, c.headCaps.z),
+      ParamEyeLOpen: fractional ? 0 : eye, ParamEyeROpen: fractional ? 0 : eye,
+      ParamMouthOpenY: fractional ? 0 : mouth, ParamExpressionHappy: happy, ParamExpressionSurprised: surprised,
+    }
+    // Nora gaze OFF (and no gaze for anyone): eyeball channels are never written.
+    return {canonical, extras: {ParamBreath: idle.breath, ParamBodyAngleX: idle.bx, ParamBodyAngleY: idle.by, ParamBodyAngleZ: idle.bz},
+      state: {expression: this.current, target: this.target, swapping, eye, mouth, idle: c.idle.kind === 'authored' && this.opts.idleMotion ? 'authored' : 'procedural'}}
+  }
+}
diff --git a/everwith-claude-frontend/src/live2d/runtime.ts b/everwith-claude-frontend/src/live2d/runtime.ts
new file mode 100644
index 00000000..afa620ab
--- /dev/null
+++ b/everwith-claude-frontend/src/live2d/runtime.ts
@@ -0,0 +1,262 @@
+/**
+ * One Live2D model on one canvas. Owns every GL resource it creates and releases
+ * them on dispose. The frame loop is the single writer: performer → verified frame
+ * writer (frozen caps / Iris carrier units) → breath & body → physics → update → draw.
+ */
+import {loadFramework} from './framework'
+import type {CubismModelLike, CubismMocLike, CubismPhysicsLike, CubismRendererLike, Framework} from './framework'
+import type {CharacterRuntimeConfig, FramingPreset} from './characters'
+import {parseMotion} from './motion'
+import {Performer} from './performer'
+import type {Expression, Frame} from './performer'
+import {bindVerifiedFrameWriter} from './verified-frame-writer'
+import type {CoreModel} from './verified-frame-writer'
+
+export type RuntimeStatus = 'loading' | 'ready' | 'failed' | 'lost' | 'disposed'
+export type RuntimeStats = {frames: number; avgFrameMs: number; maxFrameMs: number; startedAt: number; lastError: string | null; textureBytes: number; contextLosses: number; restores: number}
+
+async function sha256(buf: ArrayBuffer) {
+  const d = await crypto.subtle.digest('SHA-256', buf)
+  return Array.from(new Uint8Array(d), b => b.toString(16).padStart(2, '0')).join('')
+}
+async function fetchBuffer(url: string, signal: AbortSignal) {
+  const r = await fetch(url, {signal, cache: 'force-cache'})
+  if (!r.ok) throw Error(`asset_missing:${url}`)
+  return r.arrayBuffer()
+}
+function loadImage(url: string, signal: AbortSignal): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.decoding = 'async'
+    img.onload = () => resolve(img)
+    img.onerror = () => reject(Error(`asset_missing:${url}`))
+    signal.addEventListener('abort', () => reject(new DOMException('Aborted', 'AbortError')), {once: true})
+    img.src = url
+  })
+}
+
+/** Framing from the frozen face ROI + measured head top: whole head, face as large as fits. */
+export function framingMatrix(cfg: CharacterRuntimeConfig, bounds: {top: number; bottom: number}, cssW: number, cssH: number, preset: FramingPreset) {
+  const [x0, x1, y0, y1] = cfg.faceBox
+  const faceH = cfg.referenceFace[3] - cfg.referenceFace[2]
+  const plan = {
+    stage: {below: .9, topMargin: .045, widthFrac: .9},
+    zoom: {below: .7, topMargin: .04, widthFrac: .82},
+    card: {below: 1.25, topMargin: .06, widthFrac: .86},
+    rail: {below: .45, topMargin: .05, widthFrac: .92},
+    thumb: {below: .25, topMargin: .03, widthFrac: .98},
+  }[preset]
+  const top = Math.max(y1, bounds.top) // hair top must stay inside the frame while moving
+  // Never frame below the artwork's own lower edge (hides rounded bust corners).
+  const bottom = Math.max(y0 - faceH * plan.below, bounds.bottom + .06)
+  const span = top - bottom
+  const ppu = Math.min(cssH * (1 - plan.topMargin * 2) / span, cssW * plan.widthFrac / ((x1 - x0) * 1.55))
+  const cx = (x0 + x1) / 2
+  const sx = 2 * ppu / cssW, sy = 2 * ppu / cssH
+  const tx = -cx * sx
+  // Place the head top at the top margin; extra space (if width-limited) goes below.
+  const topPx = cssH * plan.topMargin
+  const ty = 1 - 2 * topPx / cssH - top * sy
+  return new Float32Array([sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1])
+}
+
+export class ModelRuntime {
+  status: RuntimeStatus = 'loading'
+  error: string | null = null
+  stats: RuntimeStats = {frames: 0, avgFrameMs: 0, maxFrameMs: 0, startedAt: performance.now(), lastError: null, textureBytes: 0, contextLosses: 0, restores: 0}
+  lastFrame: Frame | null = null
+  readonly lease = Symbol('lease')
+  private fw: Framework | null = null
+  private gl: WebGLRenderingContext | null = null
+  private moc: CubismMocLike | null = null
+  private model: CubismModelLike | null = null
+  private renderer: CubismRendererLike | null = null
+  private physics: CubismPhysicsLike | null = null
+  private texture: WebGLTexture | null = null
+  private image: HTMLImageElement | null = null
+  private writer: ReturnType<typeof bindVerifiedFrameWriter> | null = null
+  private performer: Performer | null = null
+  private extrasIndex = new Map<string, {i: number; lo: number; hi: number}>()
+  private bounds = {top: 0, bottom: 0}
+  private matrix: InstanceType<Framework['Matrix44']> | null = null
+  private abort = new AbortController()
+  private size = {w: 1, h: 1, dpr: 1}
+  private t0 = performance.now()
+  private onLost = (e: Event) => { e.preventDefault(); this.status = 'lost'; this.stats.contextLosses++ }
+  private onRestored = () => { void this.restore() }
+
+  constructor(readonly canvas: HTMLCanvasElement, readonly cfg: CharacterRuntimeConfig, private opts: {reducedMotion: boolean; preset: FramingPreset}) {}
+
+  setExpression(e: Expression) { this.performer?.setExpression(e) }
+  setMouthSource(fn: (() => number | null) | null) { if (this.performer) this.performer.mouthSource = fn }
+  neutral() { this.performer?.neutral() }
+  setReducedMotion(v: boolean) { this.opts.reducedMotion = v; this.performer?.setReducedMotion(v) }
+  setPreset(p: FramingPreset) { this.opts.preset = p; this.updateMatrix() }
+  get expression() { return this.performer?.state ?? {current: 'neutral' as Expression, target: 'neutral' as Expression} }
+
+  async load(): Promise<void> {
+    const signal = this.abort.signal
+    try {
+      const fw = this.fw = await loadFramework()
+      const base = this.cfg.model3.slice(0, this.cfg.model3.lastIndexOf('/') + 1)
+      const setting = await (await fetch(this.cfg.model3, {signal})).json() as {FileReferences: {Moc: string; Textures: string[]; Physics?: string}}
+      const mocBuf = await fetchBuffer(base + setting.FileReferences.Moc, signal)
+      // Identity pin: refuse any MOC that is not the frozen, accepted candidate.
+      if (await sha256(mocBuf) !== this.cfg.mocSha256) throw Error('model_pin_mismatch')
+      const moc = this.moc = fw.Moc.create(mocBuf, true)
+      if (!moc) throw Error('moc_invalid')
+      const model = this.model = moc.createModel()
+      if (!model) throw Error('model_invalid')
+      this.writer = bindVerifiedFrameWriter(this.cfg.key, model as unknown as CoreModel)
+      for (let i = 0; i < model.getParameterCount(); i++) {
+        const raw = model.getParameterId(i).getString()
+        const id = typeof raw === 'string' ? raw : raw.s
+        if (['ParamBreath', 'ParamBodyAngleX', 'ParamBodyAngleY', 'ParamBodyAngleZ'].includes(id)) this.extrasIndex.set(id, {i, lo: model.getParameterMinimumValue(i), hi: model.getParameterMaximumValue(i)})
+      }
+      if (setting.FileReferences.Physics) {
+        const buf = await fetchBuffer(base + setting.FileReferences.Physics, signal)
+        this.physics = fw.Physics.create(buf, buf.byteLength)
+      }
+      let idleMotion = null
+      if (this.cfg.idle.kind === 'authored') idleMotion = parseMotion(await (await fetch(base + this.cfg.idle.motion, {signal})).json())
+      this.performer = new Performer(this.cfg, {reducedMotion: this.opts.reducedMotion, idleMotion})
+      this.image = await loadImage(base + setting.FileReferences.Textures[0], signal)
+      this.measureBounds()
+      this.setupGL()
+      this.status = 'ready'
+    } catch (error) {
+      if (error instanceof DOMException && error.name === 'AbortError') return
+      this.status = 'failed'; this.error = error instanceof Error ? error.message : 'live2d_failed'; this.stats.lastError = this.error
+    }
+  }
+
+  private measureBounds() {
+    const m = this.model!
+    this.writer!({})
+    m.update()
+    let top = -Infinity, bottom = Infinity
+    for (let d = 0; d < m.getDrawableCount(); d++) {
+      if (!m.getDrawableDynamicFlagIsVisible(d) || m.getDrawableOpacity(d) <= .01) continue
+      const v = m.getDrawableVertexPositions(d)
+      for (let k = 1; k < v.length; k += 2) { top = Math.max(top, v[k]); bottom = Math.min(bottom, v[k]) }
+    }
+    this.bounds = {top: Number.isFinite(top) ? top + .02 : this.cfg.faceBox[3], bottom: Number.isFinite(bottom) ? bottom : this.cfg.faceBox[2]}
+  }
+
+  private setupGL() {
+    const fw = this.fw!
+    const gl = this.gl = this.canvas.getContext('webgl', {alpha: true, premultipliedAlpha: true, antialias: true, preserveDrawingBuffer: true})
+    if (!gl) throw Error('webgl_unavailable')
+    this.canvas.addEventListener('webglcontextlost', this.onLost)
+    this.canvas.addEventListener('webglcontextrestored', this.onRestored)
+    const tex = gl.createTexture()!
+    gl.bindTexture(gl.TEXTURE_2D, tex)
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1)
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.image!)
+    gl.generateMipmap(gl.TEXTURE_2D)
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR)
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 0)
+    gl.bindTexture(gl.TEXTURE_2D, null)
+    this.texture = tex
+    this.stats.textureBytes = this.image!.naturalWidth * this.image!.naturalHeight * 4 * 4 / 3
+    const renderer = this.renderer = new fw.Renderer(Math.max(1, this.canvas.width), Math.max(1, this.canvas.height))
+    renderer.initialize(this.model!, 1)
+    if (this.cfg.key === 'nora') (renderer as unknown as {setClippingMaskBufferSize(n: number): void}).setClippingMaskBufferSize(512)
+    renderer.startUp(gl)
+    renderer.bindTexture(0, tex)
+    renderer.setIsPremultipliedAlpha(true)
+    this.matrix = new fw.Matrix44()
+    this.updateMatrix()
+  }
+
+  private async restore() {
+    if (this.status === 'disposed' || !this.model) return
+    try {
+      this.releaseGL(false)
+      this.setupGL()
+      this.status = 'ready'; this.stats.restores++
+    } catch (e) { this.status = 'failed'; this.error = e instanceof Error ? e.message : 'restore_failed' }
+  }
+
+  resize(cssW: number, cssH: number, dpr: number) {
+    const d = Math.min(2, Math.max(1, dpr))
+    const w = Math.max(1, Math.round(cssW * d)), h = Math.max(1, Math.round(cssH * d))
+    this.size = {w: cssW, h: cssH, dpr: d}
+    if (this.canvas.width !== w || this.canvas.height !== h) { this.canvas.width = w; this.canvas.height = h }
+    this.renderer?.setRenderTargetSize?.(w, h)
+    this.updateMatrix()
+  }
+  private updateMatrix() {
+    if (!this.matrix) return
+    this.matrix.setMatrix(framingMatrix(this.cfg, this.bounds, Math.max(1, this.size.w), Math.max(1, this.size.h), this.opts.preset))
+  }
+
+  /** Called by the director's single RAF. Returns false if nothing was drawn. */
+  frame(now: number): boolean {
+    if (this.status !== 'ready' || !this.gl || !this.renderer || !this.model || !this.performer || !this.writer) return false
+    // The context can be lost before the async 'webglcontextlost' event arrives.
+    if (this.gl.isContextLost()) return false
+    const start = performance.now()
+    const t = (now - this.t0) / 1000
+    const frame = this.performer.frame(t)
+    this.writer(frame.canonical) // resets every parameter to its default, then writes validated channels
+    for (const [id, value] of Object.entries(frame.extras)) {
+      const p = this.extrasIndex.get(id)
+      if (!p) continue
+      const v = id === 'ParamBreath' ? Math.max(0, Math.min(1, value)) : Math.max(p.lo, Math.min(p.hi, value))
+      this.model.setParameterValueByIndex(p.i, v, 1)
+    }
+    this.physics?.evaluate(this.model, 1 / 60)
+    this.model.update()
+    const gl = this.gl
+    gl.viewport(0, 0, this.canvas.width, this.canvas.height)
+    gl.clearColor(0, 0, 0, 0)
+    gl.clear(gl.COLOR_BUFFER_BIT)
+    this.renderer.setMvpMatrix(this.matrix)
+    this.renderer.setRenderState(null, [0, 0, this.canvas.width, this.canvas.height])
+    this.renderer.drawModel(this.fw!.shaderPath)
+    this.lastFrame = frame
+    this.frameErrorRun = 0
+    const ms = performance.now() - start
+    this.stats.frames++
+    this.stats.avgFrameMs = this.stats.avgFrameMs ? this.stats.avgFrameMs * .95 + ms * .05 : ms
+    this.stats.maxFrameMs = Math.max(this.stats.maxFrameMs * .999, ms)
+    return true
+  }
+
+  /** A frame threw (director keeps running). Many in a row → give up to the static fallback. */
+  private frameErrorRun = 0
+  noteFrameError(error: unknown) {
+    this.stats.lastError = error instanceof Error ? error.message : String(error)
+    if (++this.frameErrorRun > 90 && this.status === 'ready') { this.status = 'failed'; this.error = 'frame_failed' }
+  }
+
+  private releaseGL(loseContext: boolean) {
+    const gl = this.gl
+    try { this.renderer?.release() } catch { /* context may already be lost */ }
+    this.renderer = null
+    if (gl) {
+      try { if (this.texture) gl.deleteTexture(this.texture) } catch { /* ignore */ }
+      // Drop this context's cached shader programs from the framework singleton.
+      try {
+        const manager = this.fw?.ShaderManager.getInstance() as unknown as {_shaderMap?: Map<WebGLRenderingContext, {release(): void}>}
+        manager?._shaderMap?.get(gl)?.release(); manager?._shaderMap?.delete(gl)
+      } catch { /* ignore */ }
+      if (loseContext) gl.getExtension('WEBGL_lose_context')?.loseContext()
+    }
+    this.texture = null
+  }
+  dispose() {
+    if (this.status === 'disposed') return
+    this.abort.abort()
+    this.canvas.removeEventListener('webglcontextlost', this.onLost)
+    this.canvas.removeEventListener('webglcontextrestored', this.onRestored)
+    this.releaseGL(true)
+    try { if (this.moc && this.model) this.moc.deleteModel(this.model) } catch { /* ignore */ }
+    try { this.moc?.release() } catch { /* ignore */ }
+    try { if (this.physics) this.fw?.Physics.delete(this.physics) } catch { /* ignore */ }
+    this.model = null; this.moc = null; this.physics = null; this.performer = null; this.writer = null; this.image = null; this.gl = null
+    this.status = 'disposed'
+  }
+}
diff --git a/everwith-claude-frontend/src/live2d/verified-frame-writer.ts b/everwith-claude-frontend/src/live2d/verified-frame-writer.ts
new file mode 100644
index 00000000..3594c57e
--- /dev/null
+++ b/everwith-claude-frontend/src/live2d/verified-frame-writer.ts
@@ -0,0 +1,70 @@
+import {applyCarrierSurprise, CARRIER_SP_PARAMETER} from './carrier-parameter-units';
+
+/** Internal final-write boundary, after a character's guarded contract/visual adapter.
+ * This does not add a public raw-parameter, head, hair, blink or viseme route.
+ * Call once for this model's composed frame, then model.update()/official drawModel().
+ */
+export type Character = 'arthur' | 'lena' | 'marcus' | 'nora' | 'iris';
+export interface CoreModel {
+  getParameterCount(): number;
+  getDrawableCount(): number;
+  getParameterId(index: number): {getString(): string};
+  getParameterDefaultValue(index: number): number;
+  getParameterMinimumValue(index: number): number;
+  getParameterMaximumValue(index: number): number;
+  getParameterValueByIndex(index: number): number;
+  setParameterValueByIndex(index: number, value: number, weight?: number): void;
+}
+const heads = {arthur:[8,4,2.5],lena:[8,2,1.5],marcus:[8,2,1.5],nora:[3,1,1],iris:[3,1,1]} as const;
+const drawables = {arthur:25,lena:24,marcus:23,nora:36,iris:36} as const;
+const defaults:Record<string,number> = {
+  ParamAngleX:0,ParamAngleY:0,ParamAngleZ:0,ParamEyeLOpen:1,ParamEyeROpen:1,
+  ParamBrowLY:0,ParamBrowRY:0,ParamMouthForm:0,ParamMouthOpenY:0,
+  ParamExpressionHappy:0,ParamExpressionSurprised:0,
+};
+export function bindVerifiedFrameWriter(character:Character, model:CoreModel) {
+  const count=model.getParameterCount();
+  if(count!==(character==='iris'?23:22)||model.getDrawableCount()!==drawables[character])
+    throw Error('Frozen model inventory mismatch; validate registry MOC SHA before binding');
+  const index=new Map<string,number>();
+  for(let i=0;i<count;i++) {
+    const id=model.getParameterId(i).getString();
+    if(index.has(id))throw Error('Duplicate Core parameter '+id);
+    index.set(id,i);
+  }
+  const caps:Record<string,readonly[number,number]>={
+    ParamAngleX:[-heads[character][0],heads[character][0]],
+    ParamAngleY:[-heads[character][1],heads[character][1]],
+    ParamAngleZ:[-heads[character][2],heads[character][2]],
+    ParamEyeLOpen:[0,1],ParamEyeROpen:[0,1],ParamBrowLY:[0,1],ParamBrowRY:[0,1],
+    ParamMouthForm:[0,.45],ParamMouthOpenY:[0,1],ParamExpressionHappy:[0,1],ParamExpressionSurprised:[0,1],
+  };
+  for(const [id,range] of Object.entries(caps)) {
+    const i=index.get(id);
+    if(i===undefined||model.getParameterMinimumValue(i)>range[0]||model.getParameterMaximumValue(i)<range[1])
+      throw Error('Verified Core parameter missing/range mismatch '+id);
+  }
+  const originalSP=index.get('ParamExpressionSurprised')!, carrier=index.get(CARRIER_SP_PARAMETER);
+  if(character==='iris'&&(carrier!==22||model.getParameterMinimumValue(carrier)!==0||model.getParameterMaximumValue(carrier)!==16384))
+    throw Error('Iris carrier units mismatch');
+  return (canonical:Readonly<Record<string,number>>) => {
+    for(const id of Object.keys(canonical))if(!(id in caps))throw Error('Unverified channel '+id);
+    const requested={...defaults,...canonical};
+    for(const [id,value] of Object.entries(requested))if(!Number.isFinite(value))throw Error('Nonfinite '+id);
+    const happy=requested.ParamExpressionHappy, surprise=requested.ParamExpressionSurprised;
+    if(character==='arthur'&&((happy!==0&&happy!==1)||(surprise!==0&&surprise!==1)))
+      throw Error('Arthur requires discrete authored face materials');
+    if(character!=='arthur'&&character!=='iris'&&((happy>0&&happy<1)||(surprise>0&&surprise<1))&&
+      (requested.ParamEyeLOpen!==0||requested.ParamEyeROpen!==0||requested.ParamMouthOpenY!==0))
+      throw Error('Reference fractional face swap requires closed eyes and mouth');
+    // Validate the whole frame before touching the live model.
+    const values=Object.fromEntries(Object.entries(caps).map(([id,[lo,hi]])=>{
+      const raw=character==='iris'&&id==='ParamMouthForm'&&surprise>0?0:requested[id];
+      return [id,Math.max(lo,Math.min(hi,raw))];
+    }));
+    for(let i=0;i<count;i++)model.setParameterValueByIndex(i,model.getParameterDefaultValue(i),1);
+    for(const [id,value] of Object.entries(values))model.setParameterValueByIndex(index.get(id)!,value,1);
+    const units=character==='iris'?applyCarrierSurprise(model,originalSP,carrier!,values.ParamExpressionSurprised):null;
+    return {effective:Object.fromEntries(Object.keys(caps).map(id=>[id,model.getParameterValueByIndex(index.get(id)!)])),carrierUnits:units};
+  };
+}
diff --git a/everwith-claude-frontend/src/main.tsx b/everwith-claude-frontend/src/main.tsx
new file mode 100644
index 00000000..be15150b
--- /dev/null
+++ b/everwith-claude-frontend/src/main.tsx
@@ -0,0 +1,12 @@
+import {StrictMode} from 'react'
+import {createRoot} from 'react-dom/client'
+import './styles/base.css'
+import './styles/shell.css'
+import './styles/pages.css'
+import './styles/chat.css'
+import './styles/stage.css'
+import './styles/games.css'
+import './styles/story.css'
+import {App} from './app/App'
+
+createRoot(document.getElementById('root')!).render(<StrictMode><App /></StrictMode>)
diff --git a/everwith-claude-frontend/src/mock/catalog.ts b/everwith-claude-frontend/src/mock/catalog.ts
new file mode 100644
index 00000000..db23cff1
--- /dev/null
+++ b/everwith-claude-frontend/src/mock/catalog.ts
@@ -0,0 +1,225 @@
+/**
+ * Synthetic public catalogue for the LOCAL MOCK only.
+ * Character one-line introductions follow the historical synthetic-QA discovery
+ * cards (baseline/01_01-all-content.png); everything else here is new placeholder
+ * copy written for this demo, not product canon. Character images are hash-verified
+ * handoff files bound by source_id/version, never by display name. Story covers, story
+ * scenes and game covers come from the user-provided GPT batch (/generated/; rights:
+ * 用户经 GPT 生成并提供；商用/再分发权未核实 — see docs/GENERATED_ASSETS.json).
+ */
+import type {L10n} from '../lib/util'
+
+const GEN = '/generated/batch-01'
+
+export type Live2DKey = 'arthur' | 'lena' | 'marcus' | 'nora' | 'iris'
+export type OfficialCharacter = {
+  id: string; version: string; name: string; live2d: Live2DKey
+  avatar: string; feed: string
+  tagline: L10n; description: L10n; traits: L10n[]; voice: string
+  greeting: L10n
+  style: {warm: number; candor: number; reserve: number}
+}
+
+const P = '/handoff/assets/companions'
+export const OFFICIAL_CHARACTERS: OfficialCharacter[] = [
+  {
+    id: 'official-lena', version: '1', name: 'Lena', live2d: 'lena',
+    avatar: `${P}/portraits/lena-soft-anime-v2-neutral.png`, feed: `${P}/feed/lena.webp`,
+    tagline: {zh: '剧院调查员', en: 'Theatre investigator'},
+    description: {zh: '观察敏锐、说话直接的剧院调查员，重视承诺，也有自己的判断。', en: 'An observant, candid theater investigator who values promises and thinks for herself.'},
+    traits: [{zh: '说话直接', en: 'Speaks plainly'}, {zh: '重视承诺', en: 'Keeps promises'}, {zh: '先观察再下结论', en: 'Observes before judging'}],
+    voice: 'preset-lena-soft-alto',
+    greeting: {zh: '*把伞收好，靠在门边。*\n你来了。今天想聊点什么？', en: '*Folds her umbrella and leans it by the door.*\nYou made it. What shall we talk about today?'},
+    style: {warm: .6, candor: .9, reserve: .3},
+  },
+  {
+    id: 'official-arthur', version: '1', name: 'Arthur', live2d: 'arthur',
+    avatar: `${P}/portraits/arthur-r7-neutral.png`, feed: `${P}/feed/arthur.webp`,
+    tagline: {zh: '剧院经理', en: 'Theatre manager'},
+    description: {zh: '沉稳的剧院经理，会权衡各方利益，认真对待他在乎的人。', en: 'A composed theater manager who weighs competing interests and takes the people he cares about seriously.'},
+    traits: [{zh: '沉稳', en: 'Composed'}, {zh: '权衡利弊', en: 'Weighs interests'}, {zh: '护短', en: 'Protective of his people'}],
+    voice: 'preset-arthur-baritone',
+    greeting: {zh: '*合上账本，抬头看你。*\n正好有空。坐吧，慢慢说。', en: '*Closes the ledger and looks up.*\nI have a moment. Sit down, take your time.'},
+    style: {warm: .5, candor: .5, reserve: .7},
+  },
+  {
+    id: 'official-marcus', version: '1', name: 'Marcus', live2d: 'marcus',
+    avatar: `${P}/portraits/marcus-r3-neutral.png`, feed: `${P}/feed/marcus.webp`,
+    tagline: {zh: '舞台监督', en: 'Stage manager'},
+    description: {zh: '务实的舞台监督，观察细致，用行动表达信念。', en: 'A practical stage manager who watches carefully and expresses his convictions through action.'},
+    traits: [{zh: '务实', en: 'Practical'}, {zh: '话少', en: 'Few words'}, {zh: '说到做到', en: 'Acts on his word'}],
+    voice: 'preset-marcus-low',
+    greeting: {zh: '*把手套塞进口袋。*\n嗯。有事就说，我听着。', en: '*Tucks his gloves into a pocket.*\nMm. Go ahead, I\'m listening.'},
+    style: {warm: .4, candor: .7, reserve: .8},
+  },
+  {
+    id: 'official-nora', version: '1', name: 'Nora', live2d: 'nora',
+    avatar: `${P}/portraits/nora-r4-neutral.png`, feed: `${P}/feed/nora.webp`,
+    tagline: {zh: '好奇的同伴', en: 'Curious companion'},
+    description: {zh: '好奇又坦率，乐于尝试新想法，同时保留自己的看法。', en: 'Curious and candid, ready to explore new ideas while keeping her own views.'},
+    traits: [{zh: '好奇', en: 'Curious'}, {zh: '坦率', en: 'Candid'}, {zh: '有主见', en: 'Has her own views'}],
+    voice: 'preset-nora-bright',
+    greeting: {zh: '*眼睛一亮，往前凑了凑。*\n你来得正好！我刚想到一个点子。', en: '*Her eyes light up as she leans in.*\nPerfect timing! I just had an idea.'},
+    style: {warm: .8, candor: .8, reserve: .2},
+  },
+  {
+    id: 'official-iris', version: '1', name: 'Iris', live2d: 'iris',
+    avatar: `${P}/portraits/iris-local-neutral.png`, feed: `${P}/feed/iris.webp`,
+    tagline: {zh: '细心的倾听者', en: 'Attentive listener'},
+    description: {zh: '留意细节，需要一点时间去理解，再把感受说出口。', en: 'Attentive to details, taking time to understand and put her feelings into words.'},
+    traits: [{zh: '细心', en: 'Attentive'}, {zh: '慢热', en: 'Slow to warm'}, {zh: '措辞谨慎', en: 'Careful with words'}],
+    voice: 'preset-iris-calm',
+    greeting: {zh: '*安静地点点头，把茶杯推到你面前。*\n……你好。慢慢来，我在听。', en: '*Nods quietly and slides a teacup toward you.*\n…Hello. Take your time, I\'m listening.'},
+    style: {warm: .6, candor: .4, reserve: .8},
+  },
+]
+export const characterById = (id: string) => OFFICIAL_CHARACTERS.find(c => c.id === id) ?? null
+
+export type StoryRoleDef = {id: string; title: L10n; description: L10n; defaultCharacter: string; replaceable: boolean; locked?: boolean}
+/** A place in a story. `position` is the vertical object-position of the reviewed 5:1 banner band. */
+export type StoryScene = {image: string | null; position: string; label: L10n}
+export type StoryBeat = {
+  id: string; scene: string; narration: L10n
+  lines: {role: string; text: L10n}[]
+  clue?: {id: string; label: L10n}; objective?: number; minutes: number; hint: L10n
+  keywords: string[]
+}
+export type StoryDef = {
+  id: string; version: string; title: L10n; description: L10n; genre: L10n; contentNote: L10n
+  cover: string | null; coverWide: string | null; playerRole: L10n; roles: StoryRoleDef[]; objectives: L10n[]; opening: L10n
+  /** The opening shows the first beat's scene; each committed beat moves to its own scene. */
+  beats: StoryBeat[]; scenes: Record<string, StoryScene>
+  /** Shown for free turns once every beat has been played (open mode). */
+  endingScene?: string
+}
+
+export const STORIES: StoryDef[] = [
+  {
+    id: 'story-promise-rain', version: '1',
+    title: {zh: '雨中的约定', en: 'A Promise in the Rain'},
+    description: {zh: '老剧院里，一份被改过的宾客名单把你和同伴挡在了雨中。', en: 'At an old theatre, an altered guest list keeps you and your companion out in the rain.'},
+    genre: {zh: '悬疑 · 剧院', en: 'Mystery · Theatre'},
+    contentNote: {zh: '轻度紧张情节，无暴力描写', en: 'Mild suspense, no graphic content'},
+    cover: `${GEN}/story-promise-rain-cover-tall.webp`, coverWide: `${GEN}/story-promise-rain-cover-wide.webp`,
+    playerRole: {zh: '受邀却被拒之门外的客人', en: 'An invited guest turned away at the door'},
+    roles: [
+      {id: 'investigator', title: {zh: '剧院调查员', en: 'Theatre investigator'}, description: {zh: '受托调查名单异常，知道剧院的旧规矩。', en: 'Hired to look into the guest list; knows the theatre\'s old rules.'}, defaultCharacter: 'official-lena', replaceable: true},
+      {id: 'manager', title: {zh: '剧院经理', en: 'Theatre manager'}, description: {zh: '掌管名单与钥匙。作者锁定此位，不可替换。', en: 'Keeps the list and the keys. Locked by the author.'}, defaultCharacter: 'official-arthur', replaceable: false, locked: true},
+      {id: 'stage', title: {zh: '舞台监督', en: 'Stage manager'}, description: {zh: '后台的每扇门都归他管。', en: 'Every backstage door is his responsibility.'}, defaultCharacter: 'official-marcus', replaceable: true},
+    ],
+    objectives: [
+      {zh: '弄清名单为什么被改', en: 'Find out why the list was changed'},
+      {zh: '找到改名单的人', en: 'Find who changed the list'},
+      {zh: '决定要不要当面揭穿', en: 'Decide whether to confront them'},
+    ],
+    opening: {zh: '雨下得很大。剧院门口的灯牌忽明忽暗，门卫翻着名单，摇了摇头——你的名字被一道新鲜的墨迹划掉了。', en: 'The rain is heavy. The marquee flickers while the doorman scans his list and shakes his head — your name has been struck through in fresh ink.'},
+    scenes: {
+      'entrance-rain': {image: `${GEN}/story-promise-rain-scene-entrance-rain.webp`, position: '45%', label: {zh: '剧院正门 · 大雨', en: 'Theatre entrance · heavy rain'}},
+      backstage: {image: `${GEN}/story-promise-rain-scene-backstage.webp`, position: '54%', label: {zh: '后台走廊', en: 'Backstage corridor'}},
+      office: {image: `${GEN}/story-promise-rain-scene-office.webp`, position: '40%', label: {zh: '经理办公室', en: 'The manager\'s office'}},
+      'entrance-after-rain': {image: `${GEN}/story-promise-rain-scene-entrance-after-rain.webp`, position: '52%', label: {zh: '剧院正门 · 雨小了', en: 'Theatre entrance · the rain eases'}},
+    },
+    beats: [
+      {id: 'b1', scene: 'entrance-rain', minutes: 5, objective: 0, keywords: ['名单', 'list', '墨', 'ink', '门卫', 'doorman'],
+        narration: {zh: '你凑近名单。划线的墨迹还没干透，边缘晕开了一点——有人在开场前不久才动过它。', en: 'You lean closer. The ink is still damp at the edges — someone changed it shortly before curtain.'},
+        lines: [{role: 'investigator', text: {zh: '*用指尖轻碰纸面。*\n墨还是湿的。改名单的人离这里不会太远。', en: '*Touches the paper lightly.*\nStill wet. Whoever did this isn\'t far.'}}],
+        clue: {id: 'wet-ink', label: {zh: '未干的划线墨迹', en: 'Still-wet strike-through'}}, hint: {zh: '*看向后台入口。*\n后台签到簿也许有记录。', en: '*Looks toward the stage door.*\nThe backstage sign-in book might show something.'}},
+      {id: 'b2', scene: 'backstage', minutes: 10, objective: 1, keywords: ['后台', 'backstage', '签到', 'sign', '簿', 'book'],
+        narration: {zh: '后台走廊比外面安静。签到簿摊在桌上，今晚最后一行的笔迹和名单上的划线一模一样。', en: 'The backstage corridor is quieter. The sign-in book lies open; tonight\'s last entry matches the strike-through exactly.'},
+        lines: [{role: 'stage', text: {zh: '*把灯拧亮。*\n这一页是我七点锁的柜子。之后进来的人，只有拿着钥匙的。', en: '*Turns up the lamp.*\nI locked that cabinet at seven. Anyone after that had a key.'}}],
+        clue: {id: 'sign-in', label: {zh: '签到簿上相同的笔迹', en: 'Matching handwriting in the sign-in book'}}, hint: {zh: '*压低声音。*\n钥匙一共只有两把。', en: '*Lowers voice.*\nThere are only two keys.'}},
+      {id: 'b3', scene: 'office', minutes: 10, objective: 2, keywords: ['钥匙', 'key', '经理', 'manager', 'arthur'],
+        narration: {zh: '经理办公室的门半掩着。桌上放着一把钥匙，钥匙牌上沾着同样的墨。', en: 'The manager\'s office door is ajar. A key lies on the desk, its tag smudged with the same ink.'},
+        lines: [{role: 'manager', text: {zh: '*没有立刻否认，只是叹了口气。*\n名单是我改的。今晚有人要来闹事，我不能让他们借你的名字进门。', en: '*Doesn\'t deny it, only sighs.*\nI changed the list. Someone planned to use your name to get in tonight.'}}],
+        clue: {id: 'ink-key', label: {zh: '沾墨的钥匙牌', en: 'Ink-smudged key tag'}}, hint: {zh: '*看着你。*\n你想怎么处理？', en: '*Looks at you.*\nHow do you want to handle this?'}},
+      {id: 'b4', scene: 'entrance-after-rain', minutes: 15, keywords: ['揭穿', 'confront', '原谅', 'forgive', '一起', 'together'],
+        narration: {zh: '雨势小了一些。剧院的灯重新亮起，开场铃声从门内传来。这一晚还没有结束，但名单的事已经说清。', en: 'The rain eases. The lights come back on and the first bell rings inside. The night isn\'t over, but the list is explained.'},
+        lines: [{role: 'investigator', text: {zh: '*把伞递给你。*\n约好的事，我们还是一起去看完吧。', en: '*Hands you the umbrella.*\nWe promised. Let\'s still see the show together.'}}],
+        hint: {zh: '*侧过头。*\n要进去吗？', en: '*Tilts her head.*\nShall we go in?'}},
+    ],
+  },
+  {
+    id: 'story-last-train', version: '1',
+    title: {zh: '末班车之后', en: 'After the Last Train'},
+    description: {zh: '末班车已经开走，候车室里却留下一只无人认领的手提箱。', en: 'The last train has left, but an unclaimed suitcase remains in the waiting room.'},
+    genre: {zh: '日常 · 小悬疑', en: 'Slice of life · Light mystery'},
+    contentNote: {zh: '无惊吓内容', en: 'No jump scares'},
+    cover: `${GEN}/story-last-train-cover-tall.webp`, coverWide: `${GEN}/story-last-train-cover-wide.webp`,
+    playerRole: {zh: '错过末班车的旅客', en: 'A traveller who missed the last train'},
+    roles: [
+      {id: 'clerk', title: {zh: '夜班站务员', en: 'Night station clerk'}, description: {zh: '要在天亮前处理好失物。', en: 'Must log the lost item before dawn.'}, defaultCharacter: 'official-nora', replaceable: true},
+      {id: 'traveller', title: {zh: '同样滞留的旅人', en: 'Another stranded traveller'}, description: {zh: '坐在角落，似乎认得那只箱子。', en: 'Sits in the corner and seems to recognise the case.'}, defaultCharacter: 'official-iris', replaceable: true},
+      {id: 'guard', title: {zh: '车站保安', en: 'Station guard'}, description: {zh: '负责锁门，按规矩办事。', en: 'Locks up and goes by the book.'}, defaultCharacter: 'official-marcus', replaceable: true},
+    ],
+    objectives: [
+      {zh: '弄清手提箱属于谁', en: 'Find out who owns the suitcase'},
+      {zh: '把它交到对的人手里', en: 'Get it to the right person'},
+    ],
+    opening: {zh: '站台的广播停了。候车室只剩下几盏灯，长椅边立着一只旧手提箱，标签被雨水泡得模糊。', en: 'The platform announcements have stopped. Only a few lamps remain on in the waiting room; beside a bench stands an old suitcase, its tag blurred by rain.'},
+    scenes: {
+      'waiting-room': {image: `${GEN}/story-last-train-scene-waiting-room.webp`, position: '52%', label: {zh: '候车室 · 深夜', en: 'Waiting room · late at night'}},
+      corner: {image: `${GEN}/story-last-train-scene-corner.webp`, position: '55%', label: {zh: '候车室的角落', en: 'A corner of the waiting room'}},
+      'duty-room': {image: `${GEN}/story-last-train-scene-duty-room.webp`, position: '45%', label: {zh: '值班室 · 天快亮了', en: 'Duty room · nearly dawn'}},
+      'platform-dawn': {image: `${GEN}/story-last-train-scene-platform-dawn.webp`, position: '57%', label: {zh: '站台 · 天亮', en: 'Platform · daybreak'}},
+    },
+    endingScene: 'platform-dawn',
+    beats: [
+      {id: 'b1', scene: 'waiting-room', minutes: 5, objective: 0, keywords: ['箱', 'suitcase', '标签', 'tag'],
+        narration: {zh: '你蹲下看标签。字迹被泡开了，只能认出一个城市名和半个电话号码。', en: 'You crouch to read the tag. Only a city name and half a phone number survive.'},
+        lines: [{role: 'clerk', text: {zh: '*递来一支手电。*\n照着看看？失物登记要写清楚。', en: '*Hands you a flashlight.*\nTry this? The lost-item log needs details.'}}],
+        clue: {id: 'tag', label: {zh: '半个电话号码', en: 'Half a phone number'}}, hint: {zh: '*看向角落的旅人。*\n她刚才好像一直盯着这只箱子。', en: '*Glances at the corner.*\nShe\'s been watching this case.'}},
+      {id: 'b2', scene: 'corner', minutes: 10, objective: 1, keywords: ['旅人', 'traveller', '她', 'her', '认识', 'recognise'],
+        narration: {zh: '角落里的旅人犹豫了一下，走了过来。她说出了号码的后半段。', en: 'The traveller in the corner hesitates, then comes over and recites the rest of the number.'},
+        lines: [{role: 'traveller', text: {zh: '*声音很轻。*\n……那是我姐姐的箱子。她坐的是更早一班车。', en: '*Quietly.*\n…That\'s my sister\'s case. She took an earlier train.'}}],
+        clue: {id: 'owner', label: {zh: '箱子主人的身份', en: 'The owner\'s identity'}}, hint: {zh: '*看向保安。*\n能先替她保管吗？', en: '*Looks at the guard.*\nCan it be held for her?'}},
+      {id: 'b3', scene: 'duty-room', minutes: 10, keywords: ['保管', 'hold', '登记', 'log', '交给', 'give'],
+        narration: {zh: '保安按规矩做了登记，把箱子锁进值班室。天边开始发白，第一班车的时刻表亮了起来。', en: 'The guard logs it and locks the case in the duty room. The sky pales; the first-train timetable lights up.'},
+        lines: [{role: 'guard', text: {zh: '*在登记簿上签字。*\n明早她来，凭证件取。规矩不能破。', en: '*Signs the log.*\nShe can collect it with ID in the morning. Rules are rules.'}}],
+        hint: {zh: '*伸了个懒腰。*\n还有一个小时才发车。', en: '*Stretches.*\nAn hour until the first train.'}},
+    ],
+  },
+]
+export const storyById = (id: string, version?: string) => STORIES.find(s => s.id === id && (!version || s.version === version)) ?? null
+
+export type GameDef = {
+  id: 'vegas' | 'gems' | 'cabo'; slug: 'royale' | 'splendor' | 'cabo'; name: string; title: L10n
+  description: L10n; players: number[]; defaultPlayers: number; profile: string; profileLabel: L10n
+  poster: string; preview: string; ruleNotes: L10n[]
+}
+/** Hover clips stay the package's. Posters are the generated covers; the package's own
+ * 480×480 posters remain synced and can be restored by pointing `poster` back to
+ * `${V}/royale-poster.webp` / `${V}/splendor-poster.webp` / `${V}/cabo-poster.webp`. */
+const V = '/handoff/assets/companions/game-previews/v1'
+export const GAMES: GameDef[] = [
+  {id: 'vegas', slug: 'royale', name: 'Royale', title: {zh: 'Royale', en: 'Royale'},
+    description: {zh: '掷骰并整组放入赌场，争夺各家钞票。', en: 'Roll and place dice to compete for casino banknotes.'},
+    players: [2, 3, 4, 5], defaultPlayers: 4, profile: 'las-vegas-royale-broadway-zh-intro-v1',
+    profileLabel: {zh: '入门局 · 三轮', en: 'Introductory · 3 rounds'}, poster: `${GEN}/game-royale-cover.webp`, preview: `${V}/royale.mp4`,
+    ruleNotes: [
+      {zh: '每人 7 个小骰 + 1 个 Biggy（影响力 2）；每轮 +2 筹码，可结余。', en: '7 small dice + 1 Biggy (weight 2) each; +2 chips per round, chips carry over.'},
+      {zh: '掷剩余骰子，选一个点数，把该点数的骰子整组放进对应赌场；付 1 筹码可跳过本次放置。', en: 'Roll remaining dice, pick one face, place all dice of that face in that casino; pay 1 chip to skip.'},
+      {zh: '影响力相同的玩家都被排除；三轮共 18 次派彩后结算，剩余筹码每枚折 10,000。', en: 'Tied influence is excluded; after 18 payouts over 3 rounds, chips are worth 10,000 each.'},
+      {zh: '16 面效果板、额外骰与中文行动牌未实现（不是完整豪华版）。', en: 'Effect board, extra dice and Chinese action cards are not implemented (not the full deluxe game).'},
+    ]},
+  {id: 'gems', slug: 'splendor', name: 'Splendor', title: {zh: 'Splendor', en: 'Splendor'},
+    description: {zh: '收集宝石，购买发展卡，赢得贵族青睐。', en: 'Collect gems and buy development cards.'},
+    players: [2, 3, 4], defaultPlayers: 4, profile: 'splendor-base-2024-v2',
+    profileLabel: {zh: '基础规则 v2（新局）', en: 'Base rules v2 (new games)'}, poster: `${GEN}/game-splendor-cover.webp`, preview: `${V}/splendor.mp4`,
+    ruleNotes: [
+      {zh: '拿三种不同颜色各一枚；该色池中至少 4 枚时可同色拿两枚；黄金只能通过预留获得。', en: 'Take 3 different colors, or 2 of one color if 4+ remain; gold only by reserving.'},
+      {zh: '按成本与永久折扣购买；最多预留 3 张；持有宝石上限 10（含黄金）。', en: 'Buy with cost minus permanent bonuses; reserve up to 3; hold at most 10 tokens.'},
+      {zh: '满足贵族条件必须访问，每回合至多一位；有人达到 15 分后补齐当前轮。', en: 'Nobles visit when eligible (one per turn); at 15 points the round is completed.'},
+      {zh: '供应与卡牌数值来自冻结数据文件；未宣称已核实实体版全部数值。', en: 'Card/supply numbers come from the frozen data file; physical edition not verified.'},
+    ]},
+  {id: 'cabo', slug: 'cabo', name: 'CABO', title: {zh: 'CABO', en: 'CABO'},
+    description: {zh: '记住你的牌，通过交换降低分数。', en: 'Remember your cards and exchange to lower your score.'},
+    players: [2, 3, 4, 5], defaultPlayers: 4, profile: 'cabo-shareful-2025-en-slice-provisional',
+    profileLabel: {zh: 'Shareful 流程 · 临时组件假设', en: 'Shareful procedures · provisional components'}, poster: `${GEN}/game-cabo-cover.webp`, preview: `${V}/cabo.mp4`,
+    ruleNotes: [
+      {zh: '52 张，值 0–13（0/13 各 2 张，其余各 4 张）——组件分布为假设，未核实。', en: '52 cards valued 0–13 (two each of 0/13, four of others) — provisional, unverified.'},
+      {zh: '7/8 偷看自己、9/10 窥探他人、11/12 盲换——能力编号为假设，未核实。', en: '7/8 peek own, 9/10 spy, 11/12 blind swap — ability numbers are provisional.'},
+      {zh: '叫 CABO 代替抽牌，其余各走一次；叫错 +5；12/12/13/13 射月他人 +50。', en: 'Calling CABO replaces a draw; others play once more; wrong call +5; 12/12/13/13 shoots the moon (+50 to others).'},
+      {zh: '累计恰为 100 可一次回到 50；有人超过 100 即终局，最低累计分胜。', en: 'Exactly 100 resets once to 50; above 100 ends the game; lowest total wins.'},
+    ]},
+]
+export const gameById = (id: string) => GAMES.find(g => g.id === id || g.slug === id) ?? null
diff --git a/everwith-claude-frontend/src/mock/db.ts b/everwith-claude-frontend/src/mock/db.ts
new file mode 100644
index 00000000..4cb85f7f
--- /dev/null
+++ b/everwith-claude-frontend/src/mock/db.ts
@@ -0,0 +1,102 @@
+/**
+ * LOCAL MOCK persistence. Everything lives in this browser's localStorage under one
+ * key, so refresh/restore can be exercised. This is NOT an authentication system and
+ * NOT multi-user secret storage: a browser demo that holds game truth cannot claim
+ * secret safety (06_API_AND_MOCK.md). Production must use a real server.
+ */
+import {randomId, readJSON, writeJSON} from '../lib/util'
+import type {L10n, Lang} from '../lib/util'
+
+export const DB_KEY = 'everwith.mock.db.v1'
+
+export type PersonaRow = {name: string; bio: string; avatar?: string | null}
+export type AccountRow = {id: string; email: string; salt: string; hash: string; created_at: string; persona: PersonaRow | null}
+export type FriendRow = {
+  id: string; owner: string; source_id: string; source_version: string; source_name: string; name: string
+  epoch: number; revision: number; display_number: number; status: 'active' | 'removed'
+  created_at: string; origin: {kind: 'character' | 'story' | 'game' | 'creation'; label: L10n; session_id?: string}
+  key: string; fingerprint: string
+}
+export type SegmentRow = {segment_id: string; kind: 'dialogue' | 'narration' | 'action'; speaker_id: string | null; body: string | null; availability: 'available' | 'withdrawn'}
+export type TurnRow = {turn_id: string; player_expression: string | null; input_availability: 'available' | 'withdrawn'; segments: SegmentRow[]; language: Lang; expression: 'neutral' | 'happy' | 'surprised'; created_at: string; kind: 'greeting' | 'reply' | 'note'}
+export type ConversationRow = {
+  id: string; owner: string; friend_id: string; friend_epoch: number; binding_version: number; status: 'active' | 'read_only'
+  revision: number; turns: TurnRow[]; player_actor_id: string; created_at: string; updated_at: string
+  content_revision: number; invalidation_epoch: number; access_epoch: number
+}
+export type OperationStatus = 'accepted' | 'running' | 'validating' | 'retryable_failed' | 'committed' | 'cancelled' | 'failed_final' | 'stale'
+export type OperationRow = {
+  id: string; conversation_id: string; owner: string; friend_id: string; friend_epoch: number; key: string
+  text: string; language: Lang; baseline_revision: number; baseline_head: string
+  status: OperationStatus; run_epoch: number; turn_id: string | null; created_at: string
+  /** Pre-decided public reply (simulated, deterministic). Never streamed before its run starts. */
+  plan: {segments: {segment_id: string; kind: 'spoken' | 'action' | 'narration'; text: string}[]; expression: 'neutral' | 'happy' | 'surprised'}
+  scenario: string | null; late_on_retry: boolean; commit_at: number | null; run_started_at: number | null
+}
+export type StorySessionRow = {
+  id: string; owner: string; story_id: string; version: string; key: string; fingerprint: string
+  cast: {role_id: string; kind: 'npc' | 'friend'; character_id: string; friend_id: string | null; friend_epoch: number | null; name: string}[]
+  turns: StoryTurnRow[]; revision: number; status: 'active' | 'read_only'; archived: boolean; deleted: boolean
+  state: {beat: number; objective: number; clues: string[]; minutes: number; scene: string; present: string[]}
+  created_at: string; updated_at: string; language: Lang
+  pending: {op_id: string; key: string; kind: 'input' | 'continue'; text: string | null; status: OperationStatus; commit_at: number; language: Lang; fail?: boolean} | null
+  ops: Record<string, {key: string; status: string; turn_id: string | null}>
+}
+export type StoryTurnRow = {
+  turn_id: string; kind: 'opening' | 'input' | 'continue'; input: string | null; input_availability: 'available' | 'withdrawn'
+  segments: {segment_id: string; kind: 'narration' | 'dialogue' | 'action'; role_id: string | null; text: string}[]
+  delta: {clue?: string; objective?: number; minutes: number; beat?: number}; availability: 'available' | 'withdrawn'; language: Lang; created_at: string
+}
+export type GameSeatRow = {seat: number; kind: 'player' | 'friend' | 'temporary'; identity: string; friend_epoch: number | null; name: string; source_id: string | null; source_version: string | null}
+export type GameRow = {
+  id: string; owner: string; game_id: 'vegas' | 'gems' | 'cabo'; profile: string; key: string; fingerprint: string
+  seats: GameSeatRow[]; lifecycle: 'active' | 'paused' | 'ended' | 'abandoned'; revision: number; ai_hold: boolean
+  state: unknown; seed: number | string; origin: {kind: 'discover' | 'friend' | 'private'; friend_id?: string; conversation_id?: string; return_hash: string}
+  chat: {id: string; seat: number; text: string; audience: 'table'; mode: 'player' | 'simulated_rule_reply'; kind: 'dialogue' | 'narration'; language: Lang; revision: number}[]
+  settlement: null | {id: string; committed_revision: number; scores: number[]; winners: number[]; labels: L10n[]}
+  actions: Record<string, {fingerprint: string; revision: number}>
+  created_at: string; updated_at: string; rematch_of: string | null; archived: boolean; deleted: boolean
+  public_log: {revision: number; seat: number; summary: L10n; kind: string}[]
+}
+export type WorkRow = {
+  id: string; owner: string; type: 'story' | 'character'; name: string; created_at: string; updated_at: string; key: string
+  draft: Record<string, unknown>; draft_revision: number; versions: {version: number; draft: Record<string, unknown>; saved_at: string}[]
+  share: {enabled: boolean; version: number | null}; deleted: boolean
+}
+export type PreviewRow = {id: string; owner: string; work_id: string; draft_revision: number; snapshot: Record<string, unknown>; turns: {id: string; role: 'player' | 'character'; text: string; language: Lang}[]; created_at: string}
+
+export type DB = {
+  schema: 'everwith-mock-db-v1'
+  guest_id: string
+  session_account: string | null
+  accounts: Record<string, AccountRow>
+  guest_personas: Record<string, PersonaRow>
+  merged_guests: Record<string, string>
+  friends: Record<string, FriendRow>
+  conversations: Record<string, ConversationRow>
+  operations: Record<string, OperationRow>
+  stories: Record<string, StorySessionRow>
+  games: Record<string, GameRow>
+  works: Record<string, WorkRow>
+  previews: Record<string, PreviewRow>
+  corrections: {id: string; conversation_id: string; turn_id: string | null; text: string; created_at: string}[]
+}
+
+export function emptyDB(): DB {
+  return {schema: 'everwith-mock-db-v1', guest_id: randomId('guest'), session_account: null, accounts: {}, guest_personas: {}, merged_guests: {},
+    friends: {}, conversations: {}, operations: {}, stories: {}, games: {}, works: {}, previews: {}, corrections: []}
+}
+
+let cache: DB | null = null
+export function db(): DB {
+  if (cache) return cache
+  const stored = readJSON<DB | null>(DB_KEY, null)
+  cache = stored && stored.schema === 'everwith-mock-db-v1' ? stored : emptyDB()
+  if (!stored) save()
+  return cache
+}
+export function save() { if (cache) writeJSON(DB_KEY, cache) }
+export function resetDB() { cache = emptyDB(); save() }
+/** Re-read from storage (another tab may have written). */
+export function reloadDB() { cache = null; return db() }
+export const now = () => new Date().toISOString()
diff --git a/everwith-claude-frontend/src/mock/games/modules.ts b/everwith-claude-frontend/src/mock/games/modules.ts
new file mode 100644
index 00000000..e89d56f0
--- /dev/null
+++ b/everwith-claude-frontend/src/mock/games/modules.ts
@@ -0,0 +1,179 @@
+/**
+ * LOCAL MOCK AUTHORITY: the only place that holds full engine state (truth, rng,
+ * other seats' hidden cards). The UI receives `view(state, 0)` projections only.
+ * NPC seats decide from their OWN projection (fixed-strategy “规则模拟陪玩”), never
+ * from truth. JEV is not connected; nothing here claims chat changes a move.
+ */
+import * as royale from '../../games/engines/royale/engine'
+import * as splendor from '../../games/engines/splendor/splendor/rules'
+import {chooseBotAction} from '../../games/engines/splendor/splendor/npc'
+import * as cabo from '../../games/engines/cabo/engine'
+import type {L10n} from '../../lib/util'
+
+export type GameId = 'vegas' | 'gems' | 'cabo'
+export type SeatName = (seat: number) => string
+export type Settlement = {scores: number[]; winners: number[]; labels: L10n[]}
+export type GameModule = {
+  id: GameId
+  create(players: number, seed: number, profile?: string): unknown
+  current(state: unknown): number
+  phase(state: unknown): string
+  ended(state: unknown): boolean
+  /** Seat that must act next, or `any` when any seat may (CABO round end). */
+  actor(state: unknown): number | 'any'
+  apply(state: unknown, seat: number, action: unknown): unknown
+  ai(state: unknown, seat: number, seed: number): unknown
+  view(state: unknown, seat: number): unknown
+  summary(prev: unknown, next: unknown, seat: number, action: unknown, name: SeatName): L10n | null
+  settle(state: unknown): Settlement
+  check(state: unknown): void
+}
+
+const CASINO_NAMES: L10n[] = [
+  {zh: '奇迹', en: 'Miracle'}, {zh: '帝王', en: 'Kings'}, {zh: '海滨', en: 'Marina'},
+  {zh: '广场', en: 'Plaza'}, {zh: '埃及艳后', en: 'Cleopatra'}, {zh: '日落', en: 'Sunset'},
+]
+export const casinoName = (i: number) => CASINO_NAMES[i]
+const money = (n: number) => `${(n / 1000).toLocaleString('en-US')}K`
+
+const royaleModule: GameModule = {
+  id: 'vegas',
+  create: (players, seed) => royale.create({players, seed, starter: 0, session: `royale-${seed}`}),
+  current: s => (s as royale.State).current,
+  phase: s => (s as royale.State).phase,
+  ended: s => (s as royale.State).phase === 'ended',
+  actor: s => (s as royale.State).current,
+  apply(state, seat, action) {
+    const s = state as royale.State
+    const next = royale.act(s, seat, action as royale.Action, {expectedRevision: s.revision, requestId: `${s.session}:${s.revision}:${seat}`})
+    royale.assertState(next); return next
+  },
+  ai(state, seat) {
+    const s = state as royale.State
+    if (s.current !== seat) throw Error('turn')
+    // The heuristic receives this seat's allowlisted observation (no rng / bank order / hidden earnings).
+    const own = royale.observe(s, seat) as unknown as royale.State
+    return royale.decide(own)
+  },
+  view: (s, seat) => royale.observe(s as royale.State, seat),
+  summary(prev, next, seat, action, name) {
+    const a = action as royale.Action, n = next as royale.State, p = prev as royale.State
+    if (a.type === 'roll') return {zh: `${name(seat)} 掷出 ${royale.remaining(p, seat).length} 颗骰子`, en: `${name(seat)} rolls ${royale.remaining(p, seat).length} dice`}
+    if (a.type === 'place') {
+      const ev = n.events.find(e => e.type === 'place'), count = ev?.dice?.reduce((x, d) => x + royale.weight(d), 0) ?? 0
+      return {zh: `${name(seat)} 把 ${a.face} 点（影响力 ${count}）放进 ${CASINO_NAMES[a.face - 1].zh}`, en: `${name(seat)} places ${a.face}s (influence ${count}) in ${CASINO_NAMES[a.face - 1].en}`}
+    }
+    if (a.type === 'pass') return {zh: `${name(seat)} 付 1 筹码跳过本次放置`, en: `${name(seat)} pays 1 chip to skip`}
+    if (a.type === 'payout') {
+      const r = n.events.find(e => e.type === 'payout')?.result
+      if (!r) return null
+      const awards = r.awards.map(w => `${w.owner === 'neutral' ? '中立' : name(w.owner as number)} ${money(w.value)}`).join('，')
+      const awardsEn = r.awards.map(w => `${w.owner === 'neutral' ? 'Neutral' : name(w.owner as number)} ${money(w.value)}`).join(', ')
+      return {zh: `${CASINO_NAMES[r.casino].zh} 派彩：${awards || '无人获奖'}${r.excluded.length ? `（并列排除 ${r.excluded.length} 方）` : ''}`, en: `${CASINO_NAMES[r.casino].en} pays: ${awardsEn || 'no winner'}${r.excluded.length ? ` (${r.excluded.length} tied & excluded)` : ''}`}
+    }
+    if (a.type === 'nextRound') return {zh: `第 ${n.round} 轮开始`, en: `Round ${n.round} begins`}
+    return null
+  },
+  settle(state) {
+    const s = state as royale.State
+    return {scores: s.players.map(royale.wealth), winners: [...s.winners], labels: s.players.map(p => ({zh: `现金 ${money(royale.cash(p))} + 筹码 ${p.chips}×10K`, en: `cash ${money(royale.cash(p))} + ${p.chips} chips ×10K`}))}
+  },
+  check: s => { royale.assertState(s as royale.State) },
+}
+
+const gemNames: Record<string, L10n> = {diamond: {zh: '钻石', en: 'diamond'}, sapphire: {zh: '蓝宝石', en: 'sapphire'}, emerald: {zh: '祖母绿', en: 'emerald'}, ruby: {zh: '红宝石', en: 'ruby'}, onyx: {zh: '缟玛瑙', en: 'onyx'}, gold: {zh: '黄金', en: 'gold'}}
+/** Public reserves are visible to everyone; blind reserves only show a tier back. */
+export function splendorProjection(state: splendor.SplendorState, seat: number) {
+  const view = splendor.playerView(state, seat)
+  const openReserves = new Set(state.events.filter(e => e.type === 'reserve' && e.blind === false && typeof e.card === 'string').map(e => e.card as string))
+  return {
+    ...view,
+    players: state.players.map((p, i) => ({
+      ...view.players[i],
+      reserved: i === seat ? p.reserved.map(id => ({card: id, tier: id ? splendor.cardById(id).tier : null, hidden: false}))
+        : p.reserved.map(id => id && openReserves.has(id) ? {card: id, tier: splendor.cardById(id).tier, hidden: false} : {card: null, tier: id ? splendor.cardById(id).tier : null, hidden: true}),
+    })),
+  }
+}
+const splendorModule: GameModule = {
+  id: 'gems',
+  create: (players, seed, profile) => splendor.createGame({players, seed: `seed-${seed}`, rulesProfile: profile ?? splendor.NEW_RULES_PROFILE}),
+  current: s => (s as splendor.SplendorState).current,
+  phase: s => (s as splendor.SplendorState).phase,
+  ended: s => (s as splendor.SplendorState).ended,
+  actor: s => (s as splendor.SplendorState).current,
+  apply(state, seat, action) {
+    const next = splendor.applyAction(state as splendor.SplendorState, seat, action as splendor.SplendorAction)
+    splendor.assertInvariants(next); return next
+  },
+  ai(state, seat, seed) {
+    const view = splendor.playerView(state as splendor.SplendorState, seat)
+    const action = chooseBotAction(view, seat, {seed})
+    if (!action) throw Error('no_legal_action')
+    return action
+  },
+  view: (s, seat) => splendorProjection(s as splendor.SplendorState, seat),
+  summary(prev, next, seat, action, name) {
+    const a = action as splendor.SplendorAction, n = next as splendor.SplendorState
+    if (a.type === 'take') return {zh: `${name(seat)} 拿取 ${a.colors.map(c => gemNames[c].zh).join('、')}`, en: `${name(seat)} takes ${a.colors.map(c => gemNames[c].en).join(', ')}`}
+    if (a.type === 'reserve') {
+      if (a.card) { const c = splendor.cardById(a.card); return {zh: `${name(seat)} 预留了「${c.name}」${n.players[seat].tokens.gold > (prev as splendor.SplendorState).players[seat].tokens.gold ? '并获得 1 黄金' : ''}`, en: `${name(seat)} reserves a tier ${c.tier} card${n.players[seat].tokens.gold > (prev as splendor.SplendorState).players[seat].tokens.gold ? ' and takes 1 gold' : ''}`} }
+      return {zh: `${name(seat)} 从 ${a.tier} 级牌堆盲预留了一张`, en: `${name(seat)} blind-reserves from the tier ${a.tier} deck`}
+    }
+    if (a.type === 'buy') { const c = splendor.cardById(a.card); return {zh: `${name(seat)} 购买「${c.name}」${c.points ? `（+${c.points} 分）` : ''}`, en: `${name(seat)} buys a tier ${c.tier} ${gemNames[c.bonus].en} card${c.points ? ` (+${c.points})` : ''}`} }
+    if (a.type === 'return') return {zh: `${name(seat)} 归还 1 枚${gemNames[a.color].zh}`, en: `${name(seat)} returns 1 ${gemNames[a.color].en}`}
+    if (a.type === 'noble') { const nb = splendor.nobleById(a.noble); return {zh: `${nb.name} 拜访了 ${name(seat)}（+3）`, en: `A noble visits ${name(seat)} (+3)`} }
+    return null
+  },
+  settle(state) {
+    const s = state as splendor.SplendorState
+    return {scores: s.players.map(splendor.score), winners: [...s.winners], labels: s.players.map(p => ({zh: `${p.cards.length} 张卡 · ${p.nobles.length} 位贵族`, en: `${p.cards.length} cards · ${p.nobles.length} noble(s)`}))}
+  },
+  check: s => { splendor.assertInvariants(s as splendor.SplendorState) },
+}
+
+const caboModule: GameModule = {
+  id: 'cabo',
+  create: (players, seed) => cabo.create({players, seed}),
+  current: s => (s as cabo.CaboState).current,
+  phase: s => (s as cabo.CaboState).phase,
+  ended: s => (s as cabo.CaboState).ended,
+  actor: s => (s as cabo.CaboState).phase === 'roundEnd' ? 'any' : (s as cabo.CaboState).current,
+  apply(state, seat, action) {
+    const next = cabo.act(state as cabo.CaboState, seat, action as cabo.CaboAction)
+    cabo.assertState(next); return next
+  },
+  ai: (state, seat, seed) => cabo.decide(cabo.observe(state as cabo.CaboState, seat), 'medium', {seed}),
+  view: (s, seat) => cabo.observe(s as cabo.CaboState, seat),
+  summary(prev, next, seat, action, name) {
+    const a = action as cabo.CaboAction, n = next as cabo.CaboState, p = prev as cabo.CaboState
+    const ev = (t: string) => n.events.find(e => e.type === t)
+    switch (a.type) {
+      case 'initialPeek': return {zh: `${name(seat)} 私看了自己的两张牌`, en: `${name(seat)} privately peeks at two own cards`}
+      case 'call': return {zh: `${name(seat)} 叫了 CABO！其余玩家各再走一次`, en: `${name(seat)} calls CABO! Everyone else gets one more turn`}
+      case 'draw': return {zh: `${name(seat)} 从${a.source === 'deck' ? '牌堆' : '弃牌堆'}抽了一张`, en: `${name(seat)} draws from the ${a.source === 'deck' ? 'deck' : 'discard pile'}`}
+      case 'exchange': {
+        const failed = ev('matchFailed')
+        if (failed) return {zh: `${name(seat)} 配对失败，公开了 ${(failed.values as number[]).join('、')} 并盖回`, en: `${name(seat)}'s match fails, revealing ${(failed.values as number[]).join(', ')}`}
+        const count = (ev('exchange')?.removed as string[] | undefined)?.length ?? 1
+        return {zh: `${name(seat)} 换入一张牌${count > 1 ? `（${count} 张同值换 1）` : ''}`, en: `${name(seat)} exchanges ${count > 1 ? `${count} matching cards for one` : 'a card'}`}
+      }
+      case 'discard': { const v = p.drawn ? p.truth[p.drawn] : null; return {zh: `${name(seat)} 弃掉 ${v}${n.phase === 'ability' ? '，使用能力' : ''}`, en: `${name(seat)} discards ${v}${n.phase === 'ability' ? ' and uses its ability' : ''}`} }
+      case 'peek': {
+        const target = p.players.find(q => q.cards.includes(a.card))?.id ?? seat
+        return target === seat ? {zh: `${name(seat)} 偷看了自己的一张牌`, en: `${name(seat)} peeks at an own card`} : {zh: `${name(seat)} 窥探了 ${name(target)} 的一张牌`, en: `${name(seat)} spies on ${name(target)}'s card`}
+      }
+      case 'swap': { const other = p.players.find(q => q.cards.includes(a.other))?.id ?? 0; return {zh: `${name(seat)} 与 ${name(other)} 盲换了一张牌`, en: `${name(seat)} blind-swaps a card with ${name(other)}`} }
+      case 'cancelAbility': return {zh: `${name(seat)} 放弃使用能力`, en: `${name(seat)} declines the ability`}
+      case 'nextRound': return {zh: `第 ${n.round} 轮开始`, en: `Round ${n.round} begins`}
+      default: return null
+    }
+  },
+  settle(state) {
+    const s = state as cabo.CaboState
+    return {scores: s.players.map(p => p.total), winners: [...s.winners], labels: s.players.map(p => ({zh: `累计 ${p.total}${p.resetUsed ? '（已用 100→50）' : ''}`, en: `total ${p.total}${p.resetUsed ? ' (100→50 used)' : ''}`}))}
+  },
+  check: s => { cabo.assertState(s as cabo.CaboState) },
+}
+
+export const GAME_MODULES: Record<GameId, GameModule> = {vegas: royaleModule, gems: splendorModule, cabo: caboModule}
diff --git a/everwith-claude-frontend/src/mock/http.ts b/everwith-claude-frontend/src/mock/http.ts
new file mode 100644
index 00000000..51e3544a
--- /dev/null
+++ b/everwith-claude-frontend/src/mock/http.ts
@@ -0,0 +1,23 @@
+/** Tiny request/response helpers shared by the mock route handlers. */
+export class HttpError extends Error {
+  constructor(public status: number, public code: string, public detail: Record<string, unknown> | null = null) { super(code) }
+}
+export type MockRequest = {method: string; path: string; query: URLSearchParams; body: Record<string, unknown> | null; signal?: AbortSignal | null}
+export type MockResult = {status: number; json: unknown} | {status: number; stream: ReadableStream<Uint8Array>; contentType: string} | {drop: true; afterCommit?: () => void}
+
+export const ok = (json: unknown, status = 200): MockResult => ({status, json})
+export const fail = (status: number, code: string, detail: Record<string, unknown> | null = null): never => { throw new HttpError(status, code, detail) }
+
+export function str(body: Record<string, unknown> | null, key: string, max = 4000, optional = false): string {
+  const v = body?.[key]
+  if (v === undefined && optional) return ''
+  if (typeof v !== 'string' || v.length > max) fail(400, 'invalid_request', {field: key})
+  return v as string
+}
+export function int(body: Record<string, unknown> | null, key: string, optional = false): number {
+  const v = body?.[key]
+  if (v === undefined && optional) return -1
+  if (!Number.isSafeInteger(v)) fail(400, 'invalid_request', {field: key})
+  return v as number
+}
+export const fingerprint = (value: unknown) => JSON.stringify(value)
diff --git a/everwith-claude-frontend/src/mock/replies.ts b/everwith-claude-frontend/src/mock/replies.ts
new file mode 100644
index 00000000..5d581a2c
--- /dev/null
+++ b/everwith-claude-frontend/src/mock/replies.ts
@@ -0,0 +1,71 @@
+/**
+ * Deterministic SIMULATED replies for the local mock. No model, no provider, no
+ * network. Every turn produced here is labelled reply_mode=simulated_fixed_reply and
+ * the UI says “本地模拟回复”. Content is generic placeholder copy, not character canon.
+ */
+import {hash32} from '../lib/util'
+import type {Lang} from '../lib/util'
+
+type Expression = 'neutral' | 'happy' | 'surprised'
+export type ReplyPlan = {segments: {kind: 'spoken' | 'action' | 'narration'; text: string}[]; expression: Expression}
+
+const CATEGORIES: {id: string; test: RegExp; expression: Expression}[] = [
+  {id: 'surprise', test: /真的吗|居然|不会吧|竟然|天哪|really\?|no way|seriously|wow/i, expression: 'surprised'},
+  {id: 'play', test: /一起玩|玩一局|桌游|游戏|royale|splendor|cabo|play|game/i, expression: 'happy'},
+  {id: 'thanks', test: /谢谢|感谢|厉害|喜欢你|真好|thank|thanks|great|love it|amazing/i, expression: 'happy'},
+  {id: 'sorry', test: /对不起|抱歉|不好意思|sorry|apolog/i, expression: 'neutral'},
+  {id: 'sad', test: /难过|累了|好累|伤心|烦|sad|tired|upset|exhausted/i, expression: 'neutral'},
+  {id: 'story', test: /故事|剧院|名单|雨|末班车|手提箱|theat|guest list|rain|train|suitcase/i, expression: 'neutral'},
+  {id: 'about', test: /你是谁|你喜欢|你平时|你觉得|who are you|do you like|what do you think|about you/i, expression: 'neutral'},
+  {id: 'greet', test: /^(你好|嗨|在吗|早|晚上好|hi|hello|hey|good (morning|evening))/i, expression: 'happy'},
+]
+
+const ACTIONS: Record<string, {zh: string[]; en: string[]}> = {
+  lena: {zh: ['轻轻点头。', '把笔记本合上，认真看着你。', '眯起眼睛想了想。'], en: ['Nods lightly.', 'Closes her notebook and looks at you properly.', 'Narrows her eyes, thinking.']},
+  arthur: {zh: ['放下手里的笔。', '微微侧身，示意你继续。', '沉吟片刻。'], en: ['Sets down his pen.', 'Turns slightly, inviting you to go on.', 'Considers it for a moment.']},
+  marcus: {zh: ['抱着手臂靠在墙边。', '点了一下头。', '把工具箱推到一边。'], en: ['Leans on the wall, arms folded.', 'Gives a single nod.', 'Pushes the toolbox aside.']},
+  nora: {zh: ['眼睛一亮。', '往前凑了凑。', '歪着头笑了。'], en: ['Her eyes light up.', 'Leans in closer.', 'Tilts her head with a grin.']},
+  iris: {zh: ['安静地听完，停顿了一下。', '指尖绕着杯沿转了一圈。', '低头想了想，又抬起眼。'], en: ['Listens quietly, then pauses.', 'Traces the rim of her cup.', 'Looks down to think, then back up.']},
+  default: {zh: ['点点头。', '想了想。'], en: ['Nods.', 'Thinks for a moment.']},
+}
+
+const LINES: Record<string, {zh: string[]; en: string[]}> = {
+  surprise: {zh: ['等等——真的？*睁大了眼睛*\n你再说一遍我听听。', '这倒是我没想到的。'], en: ['Wait — really? *eyes widening*\nSay that again.', 'I did not see that coming.']},
+  play: {zh: ['好啊，我陪你。右边“一起玩”可以选桌游，开局前你还能改阵容。', '来一局？我先说好，我不会故意让着你。'], en: ['Sure, I\'ll join you. Use “Play together” to pick a game; you can still change seats before starting.', 'A game? Fair warning — I won\'t let you win on purpose.']},
+  thanks: {zh: ['被你这么说，有点不好意思。*笑了一下*', '能帮上忙就好。'], en: ['Hearing that from you is a little embarrassing. *smiles*', 'Glad I could help.']},
+  sorry: {zh: ['我听到了。谢谢你愿意说出来，我们慢慢把事情理清楚。', '没关系，不过我们还是把话说开。'], en: ['I hear you. Thank you for saying it; let\'s sort it out together.', 'It\'s alright — but let\'s talk it through.']},
+  sad: {zh: ['那今天就先别勉强自己。想说的时候，我在这里。', '累了就歇一会儿。要不要讲讲发生了什么？'], en: ['Then don\'t push yourself today. I\'m here when you want to talk.', 'Rest a bit if you\'re tired. Want to tell me what happened?']},
+  story: {zh: ['那件事我只知道自己亲眼看到的部分，别的我不乱猜。', '你提到的那段经历，我们可以从你记得的地方开始说。'], en: ['I only know the part I saw myself; I won\'t guess the rest.', 'We can start from what you remember of that.']},
+  about: {zh: ['我嘛……比起说，我更习惯先看。你呢？', '这个问题我得想一想再回答你。'], en: ['Me? I tend to watch before I talk. And you?', 'Let me think before I answer that properly.']},
+  greet: {zh: ['嗨。今天过得怎么样？', '你来了。坐吧。'], en: ['Hi. How has your day been?', 'You\'re here. Have a seat.']},
+  fallback: {zh: ['嗯，我在听。你说的“{snippet}”，可以再多讲一点吗？', '我记下了“{snippet}”。接下来呢？'], en: ['Mm, I\'m listening. Tell me more about “{snippet}”?', 'Noted: “{snippet}”. What next?']},
+}
+
+export function classify(text: string): {id: string; expression: Expression} {
+  for (const c of CATEGORIES) if (c.test.test(text.trim())) return {id: c.id, expression: c.expression}
+  return {id: 'fallback', expression: 'neutral'}
+}
+
+export function planReply(character: string, text: string, language: Lang, turnIndex: number): ReplyPlan {
+  const {id, expression} = classify(text)
+  const seed = hash32(`${character}|${text}|${turnIndex}`)
+  const acts = ACTIONS[character] ?? ACTIONS.default
+  const lines = LINES[id] ?? LINES.fallback
+  const action = acts[language][seed % acts[language].length]
+  const snippet = [...text.replace(/\s+/g, ' ').trim()].slice(0, 18).join('') + ([...text.trim()].length > 18 ? '…' : '')
+  const spoken = lines[language][(seed >>> 8) % lines[language].length].replace('{snippet}', snippet.replace(/\*/g, ''))
+  const segments: ReplyPlan['segments'] = [{kind: 'action', text: action}, {kind: 'spoken', text: spoken}]
+  if (id === 'play') segments.push({kind: 'narration', text: language === 'zh' ? '（本地模拟回复：不会替你创建牌局，需要你在准备页明确开始。）' : '(Local simulated reply: no game is created until you press Start.)'})
+  return {segments, expression}
+}
+
+/** Preview (creation studio) replies: built only from the draft snapshot, isolated from friends. */
+export function previewReply(draft: Record<string, unknown>, text: string, language: Lang, turnIndex: number): string {
+  const name = typeof draft.name === 'string' && draft.name ? draft.name : (language === 'zh' ? '角色' : 'Character')
+  const habit = typeof draft.habit === 'string' ? draft.habit : ''
+  const {id} = classify(text)
+  const seed = hash32(`${name}|${text}|${turnIndex}`)
+  const lines = LINES[id] ?? LINES.fallback
+  const base = lines[language][seed % lines[language].length].replace('{snippet}', [...text.trim()].slice(0, 16).join(''))
+  return `${habit ? `*${habit.replace(/\*/g, '')}*\n` : ''}${base}`
+}
diff --git a/everwith-claude-frontend/src/mock/scenarios.ts b/everwith-claude-frontend/src/mock/scenarios.ts
new file mode 100644
index 00000000..05c4fc18
--- /dev/null
+++ b/everwith-claude-frontend/src/mock/scenarios.ts
@@ -0,0 +1,50 @@
+/** Deterministic, switchable mock scenarios (06_API_AND_MOCK.md / mock/SCENARIOS.json). */
+import {readJSON, writeJSON} from '../lib/util'
+import type {L10n} from '../lib/util'
+
+export type ScenarioId =
+  | 'chat.retryable_failure' | 'chat.commit_before_cancel' | 'chat.unknown_result' | 'chat.late_old_stream'
+  | 'chat.stale_head' | 'chat.friend_reset_elsewhere' | 'auth.expired' | 'auth.forbidden'
+  | 'net.slow' | 'discover.error' | 'discover.append_error' | 'live2d.model_missing' | 'assets.missing'
+  | 'game.text_failed' | 'game.unknown_start' | 'story.retryable_failure'
+
+export type ScenarioDef = {id: ScenarioId; kind: 'once' | 'toggle'; label: L10n; expect: L10n}
+export const SCENARIOS: ScenarioDef[] = [
+  {id: 'chat.retryable_failure', kind: 'once', label: {zh: '下一次私聊：生成中途可重试失败', en: 'Next chat: retryable failure mid-stream'}, expect: {zh: '保留原输入与明确“重试”；重试复用同一操作/输入/基线', en: 'Input kept with explicit Retry reusing the same operation'}},
+  {id: 'chat.commit_before_cancel', kind: 'once', label: {zh: '下一次私聊：提交先于停止', en: 'Next chat: commit wins over Stop'}, expect: {zh: '按停止后提示“已完成”，保留结果，不谎称已停止', en: 'Stop reports “already completed” and keeps the result'}},
+  {id: 'chat.unknown_result', kind: 'once', label: {zh: '下一次私聊：发送回执丢失（结果未知）', en: 'Next chat: send receipt lost (unknown result)'}, expect: {zh: '显示“尚未确认”，先查询原 key，不盲发第二轮', en: '“Not confirmed yet”; look up the original key before any resend'}},
+  {id: 'chat.late_old_stream', kind: 'once', label: {zh: '下一次重试：旧 run 的流帧晚到', en: 'Next retry: stale frames from the old run arrive late'}, expect: {zh: '旧 run_epoch 帧被拒绝，不覆盖新状态', en: 'Old run_epoch frames are rejected'}},
+  {id: 'chat.stale_head', kind: 'once', label: {zh: '下一次私聊：另一窗口已提交新回合', en: 'Next chat: another window already committed'}, expect: {zh: '409 后保留草稿、读最新版本，不自动重发', en: '409 → draft kept, latest version read, no auto replay'}},
+  {id: 'chat.friend_reset_elsewhere', kind: 'once', label: {zh: '下一次私聊：好友在别处被重置（代次变化）', en: 'Next chat: friend reset elsewhere (epoch changed)'}, expect: {zh: '旧会话只读，停止旧展示并重新核验', en: 'Old conversation becomes read-only; identity re-verified'}},
+  {id: 'auth.expired', kind: 'once', label: {zh: '下一次受保护请求：登录过期 401', en: 'Next protected request: 401 session expired'}, expect: {zh: '提示重新登录，草稿与位置保留', en: 'Sign-in prompt; draft and position kept'}},
+  {id: 'auth.forbidden', kind: 'once', label: {zh: '下一次受保护请求：403 无权限', en: 'Next protected request: 403 forbidden'}, expect: {zh: '可读文案，不泄露私人数据', en: 'Readable copy, no private data'}},
+  {id: 'net.slow', kind: 'toggle', label: {zh: '慢网络（+1.5 秒）', en: 'Slow network (+1.5 s)'}, expect: {zh: '加载与生成状态可见', en: 'Loading and generating states stay visible'}},
+  {id: 'discover.error', kind: 'toggle', label: {zh: '发现页：加载失败', en: 'Discover: load fails'}, expect: {zh: '显示加载失败与重试，不说“没有内容”', en: 'Shows load failure with retry, not “nothing here”'}},
+  {id: 'discover.append_error', kind: 'toggle', label: {zh: '发现页：追加失败', en: 'Discover: “load more” fails'}, expect: {zh: '已加载内容保留，追加处可重试', en: 'Loaded items stay; retry at the end'}},
+  {id: 'live2d.model_missing', kind: 'toggle', label: {zh: 'Live2D 模型缺失', en: 'Live2D model missing'}, expect: {zh: '同一角色静态图 + 明确 unavailable，聊天照常', en: 'Same character’s static image + explicit unavailable'}},
+  {id: 'assets.missing', kind: 'toggle', label: {zh: '图片素材缺失', en: 'Image assets missing'}, expect: {zh: '中性占位，不用别的角色顶替，阅读不阻塞', en: 'Neutral placeholders, never another character'}},
+  {id: 'game.text_failed', kind: 'once', label: {zh: '下一次桌聊：台词生成失败', en: 'Next table chat: reply generation fails'}, expect: {zh: '已提交的牌局/revision 不变，不重掷不重抽', en: 'Committed board and revision unchanged'}},
+  {id: 'game.unknown_start', kind: 'once', label: {zh: '下一次开局：回执丢失', en: 'Next game start: receipt lost'}, expect: {zh: '按原 key 查询，只有一局', en: 'Looks up the original key; only one game exists'}},
+  {id: 'story.retryable_failure', kind: 'once', label: {zh: '下一次故事回合：校验失败可重试', en: 'Next story turn: validation fails (retryable)'}, expect: {zh: '半轮不提交，保留输入，可重试同一回合', en: 'No half turn; input kept; retry same turn'}},
+]
+
+const KEY = 'everwith.mock.scenarios'
+type Active = Partial<Record<ScenarioId, true>>
+let active: Active = readJSON<Active>(KEY, {}, 'session')
+const listeners = new Set<() => void>()
+const publish = () => { writeJSON(KEY, active, 'session'); listeners.forEach(fn => fn()) }
+
+export const scenarios = {
+  subscribe(fn: () => void) { listeners.add(fn); return () => { listeners.delete(fn) } },
+  snapshot: () => active,
+  isOn: (id: ScenarioId) => !!active[id],
+  set(id: ScenarioId, on: boolean) { active = {...active}; if (on) active[id] = true; else delete active[id]; publish() },
+  /** One-shot scenarios are consumed by the first request they apply to. */
+  consume(id: ScenarioId): boolean {
+    if (!active[id]) return false
+    const def = SCENARIOS.find(s => s.id === id)
+    if (def?.kind === 'once') { active = {...active}; delete active[id]; publish() }
+    return true
+  },
+  clear() { active = {}; publish() },
+}
diff --git a/everwith-claude-frontend/src/mock/server/account.ts b/everwith-claude-frontend/src/mock/server/account.ts
new file mode 100644
index 00000000..7a94ea1c
--- /dev/null
+++ b/everwith-claude-frontend/src/mock/server/account.ts
@@ -0,0 +1,73 @@
+/**
+ * LOCAL MOCK ACCOUNT. Email + password only; no verification mail, no recovery
+ * (business rule: the first phase offers no password recovery). Hashing here only
+ * avoids keeping the typed password in localStorage; it is not production auth.
+ */
+import {db, now, save} from '../db'
+import {fail, ok, str} from '../http'
+import type {MockRequest, MockResult} from '../http'
+import {account, actor} from './context'
+import {randomId} from '../../lib/util'
+import {isPersonaAvatar} from '../../art/generated'
+
+async function digest(salt: string, password: string) {
+  const bytes = new TextEncoder().encode(`${salt}:${password}`)
+  const out = await crypto.subtle.digest('SHA-256', bytes)
+  return Array.from(new Uint8Array(out), b => b.toString(16).padStart(2, '0')).join('')
+}
+export function accountJSON() {
+  const d = db(), a = account()
+  const persona = a ? a.persona : d.guest_personas[d.guest_id] ?? null
+  return {mode: 'local_mock', authenticated: !!a, account: a ? {id: a.id, email: a.email} : null, guest_id: d.guest_id, persona, request_protection: 'none-local-mock'}
+}
+/** Attach this browser's guest progress to the account exactly once (idempotent). */
+function mergeGuest(accountId: string) {
+  const d = db(), guest = d.guest_id
+  if (d.merged_guests[guest] && d.merged_guests[guest] !== accountId) return // Never re-assign to a second account.
+  for (const table of [d.stories, d.games, d.works, d.previews] as Record<string, {owner: string}>[]) {
+    for (const row of Object.values(table)) if (row.owner === guest) row.owner = accountId
+  }
+  d.merged_guests[guest] = accountId
+  if (d.guest_personas[guest] && !d.accounts[accountId].persona) d.accounts[accountId].persona = d.guest_personas[guest]
+}
+const EMAIL = /^[^\s@]{1,64}@[^\s@]{1,190}\.[^\s@]{2,}$/
+
+export async function handleAccount(req: MockRequest): Promise<MockResult | null> {
+  const d = db()
+  if (req.path === '/account' && req.method === 'GET') return ok(accountJSON())
+  if (req.path === '/account/login' && req.method === 'POST') {
+    const email = str(req.body, 'email', 254).trim().toLowerCase(), password = str(req.body, 'password', 200)
+    const row = Object.values(d.accounts).find(a => a.email === email)
+    if (!row || await digest(row.salt, password) !== row.hash) fail(401, 'invalid_credentials')
+    d.session_account = row!.id; mergeGuest(row!.id); save()
+    return ok(accountJSON())
+  }
+  if (req.path === '/account/register' && req.method === 'POST') {
+    const email = str(req.body, 'email', 254).trim().toLowerCase(), password = str(req.body, 'password', 200)
+    if (!EMAIL.test(email)) fail(422, 'invalid_email')
+    if (password.length < 8) fail(422, 'weak_password')
+    if (Object.values(d.accounts).some(a => a.email === email)) fail(409, 'email_taken')
+    const salt = randomId('salt', 12), id = randomId('acc', 10)
+    d.accounts[id] = {id, email, salt, hash: await digest(salt, password), created_at: now(), persona: null}
+    d.session_account = id; mergeGuest(id); save()
+    return ok(accountJSON(), 201)
+  }
+  if (req.path === '/account/logout' && req.method === 'POST') {
+    d.session_account = null
+    // A fresh guest identity after sign-out: earlier guest progress already belongs to the account.
+    if (d.merged_guests[d.guest_id]) d.guest_id = randomId('guest')
+    save(); return ok(accountJSON())
+  }
+  if (req.path === '/account/persona' && req.method === 'PUT') {
+    const a = account()
+    const previous = a ? a.persona : d.guest_personas[actor()] ?? null
+    // avatar: absent keeps the current one, null clears it, otherwise one of the preset ids.
+    const raw = req.body?.avatar
+    if (raw !== undefined && raw !== null && !isPersonaAvatar(raw)) fail(422, 'invalid_avatar')
+    const avatar = raw === undefined ? previous?.avatar ?? null : raw as string | null
+    const persona = {name: str(req.body, 'name', 40).trim(), bio: str(req.body, 'bio', 400, true).trim(), avatar}
+    if (a) a.persona = persona; else d.guest_personas[actor()] = persona
+    save(); return ok(accountJSON())
+  }
+  return null
+}
diff --git a/everwith-claude-frontend/src/mock/server/catalog.ts b/everwith-claude-frontend/src/mock/server/catalog.ts
new file mode 100644
index 00000000..af957d2b
--- /dev/null
+++ b/everwith-claude-frontend/src/mock/server/catalog.ts
@@ -0,0 +1,70 @@
+import {GAMES, OFFICIAL_CHARACTERS, STORIES} from '../catalog'
+import {db} from '../db'
+import {fail, ok} from '../http'
+import type {MockRequest, MockResult} from '../http'
+import {scenarios} from '../scenarios'
+import {actor} from './context'
+
+export function characterJSON(c: (typeof OFFICIAL_CHARACTERS)[number]) {
+  return {id: c.id, version: c.version, name: c.name, avatar: c.avatar, feed: c.feed, description: c.description, tagline: c.tagline,
+    traits: c.traits, origin: 'official', voice: c.voice, live2d: c.live2d}
+}
+/** A saved character work owned by the caller, exposed as a character source (F5). */
+export function workCharacterJSON(workId: string, version: number) {
+  const w = db().works[workId]
+  if (!w || w.deleted || w.type !== 'character' || w.owner !== actor()) fail(404, 'not_found')
+  const v = w.versions.find(x => x.version === version)
+  if (!v) fail(404, 'not_found')
+  const d = v!.draft as Record<string, string>
+  const text = (s: unknown) => typeof s === 'string' && s.trim() ? s : '—'
+  return {id: `work-${w.id}`, version: String(version), name: text(d.name), avatar: null, feed: null,
+    description: {zh: text(d.intro), en: text(d.intro)}, tagline: {zh: text(d.tagline), en: text(d.tagline)},
+    traits: [], origin: 'mine', voice: typeof d.voice === 'string' && d.voice ? d.voice : 'preset-neutral', live2d: null}
+}
+export function storyJSON(s: (typeof STORIES)[number]) {
+  const byId = (id: string) => OFFICIAL_CHARACTERS.find(c => c.id === id)!
+  return {id: s.id, version: s.version, title: s.title, description: s.description, genre: s.genre, content_note: s.contentNote,
+    image: s.cover, image_wide: s.coverWide, player_role: s.playerRole, player_entry: 'script', objectives: s.objectives,
+    roles: s.roles.map(r => ({id: r.id, title: r.title, description: r.description, replaceable: r.replaceable, locked: !!r.locked, default_character: characterJSON(byId(r.defaultCharacter))}))}
+}
+export function gameJSON(g: (typeof GAMES)[number]) {
+  return {id: g.id, slug: g.slug, name: g.name, description: g.description, players: g.players, default_players: g.defaultPlayers,
+    profile: g.profile, profile_label: g.profileLabel, poster: g.poster, preview: g.preview, rule_notes: g.ruleNotes}
+}
+const matches = (q: string, ...texts: (string | {zh: string; en: string})[]) => !q || texts.some(t => (typeof t === 'string' ? t : `${t.zh} ${t.en}`).toLowerCase().includes(q))
+
+export function handleCatalog(req: MockRequest): MockResult | null {
+  if (req.method !== 'GET') return null
+  if (req.path === '/characters') return ok({items: OFFICIAL_CHARACTERS.map(characterJSON)})
+  const ch = /^\/characters\/([^/]+)$/.exec(req.path)
+  if (ch) {
+    const id = decodeURIComponent(ch[1]), version = req.query.get('version') ?? '1'
+    const official = OFFICIAL_CHARACTERS.find(c => c.id === id && c.version === version)
+    if (official) return ok(characterJSON(official))
+    const work = /^work-(.+)$/.exec(id)
+    if (work) return ok(workCharacterJSON(work[1], Number(version)))
+    fail(404, 'not_found')
+  }
+  if (req.path === '/stories') return ok({items: STORIES.map(storyJSON)})
+  const st = /^\/stories\/([^/]+)$/.exec(req.path)
+  if (st) {
+    const s = STORIES.find(x => x.id === decodeURIComponent(st[1]) && x.version === (req.query.get('version') ?? x.version))
+    if (!s) fail(404, 'not_found')
+    return ok(storyJSON(s!))
+  }
+  if (req.path === '/games') return ok({items: GAMES.map(gameJSON)})
+  if (req.path === '/discover') {
+    const type = req.query.get('type') ?? 'all', q = (req.query.get('q') ?? '').trim().toLowerCase()
+    const offset = Number(req.query.get('offset') ?? 0), limit = Math.min(24, Number(req.query.get('limit') ?? 8))
+    if (scenarios.isOn('discover.error') && offset === 0) fail(503, 'discover_unavailable')
+    if (scenarios.isOn('discover.append_error') && offset > 0) fail(503, 'discover_unavailable')
+    const items = [
+      ...(type === 'all' || type === 'characters' ? OFFICIAL_CHARACTERS.filter(c => matches(q, c.name, c.tagline, c.description)).map(c => ({kind: 'character', ...characterJSON(c)})) : []),
+      ...(type === 'all' || type === 'stories' ? STORIES.filter(s => matches(q, s.title, s.description, s.genre)).map(s => ({kind: 'story', ...storyJSON(s)})) : []),
+      ...(type === 'all' || type === 'games' ? GAMES.filter(g => matches(q, g.name, g.description)).map(g => ({kind: 'game', ...gameJSON(g)})) : []),
+    ]
+    const page = items.slice(offset, offset + limit)
+    return ok({items: page, total: items.length, next_offset: offset + page.length < items.length ? offset + page.length : null})
+  }
+  return null
+}
diff --git a/everwith-claude-frontend/src/mock/server/chat.ts b/everwith-claude-frontend/src/mock/server/chat.ts
new file mode 100644
index 00000000..527fbd2b
--- /dev/null
+++ b/everwith-claude-frontend/src/mock/server/chat.ts
@@ -0,0 +1,317 @@
+/**
+ * Private chat authority (LOCAL MOCK). One command = one key = one operation.
+ * Replies are pre-decided simulated text (replies.ts); only public segments are
+ * framed as `private-public-segments.v1` NDJSON. Commit happens server-side on its
+ * own schedule, independent of whether a browser is still reading the stream.
+ */
+import {characterById} from '../catalog'
+import {db, now, save} from '../db'
+import type {ConversationRow, OperationRow, TurnRow} from '../db'
+import {fail, int, ok, str} from '../http'
+import type {MockRequest, MockResult} from '../http'
+import {planReply} from '../replies'
+import {scenarios} from '../scenarios'
+import {actor, requireAccount} from './context'
+import {activeFriend} from './friends'
+import {randomId} from '../../lib/util'
+import type {Lang} from '../../lib/util'
+
+const VERSION = 'private-public-segments.v1'
+// Run timeline (ms after run start). Slow enough that Stop can genuinely race commit.
+const T = {start: 0, firstSegment: 520, segmentGap: 620, completeAfter: 380, commitAfter: 520}
+
+function snapshotJSON(c: ConversationRow) {
+  const d = db()
+  const pending = Object.values(d.operations).find(o => o.conversation_id === c.id && ['accepted', 'running', 'validating', 'retryable_failed'].includes(o.status)) ?? null
+  const head = c.turns[c.turns.length - 1]
+  return {
+    schema_version: 'companion-memory-private-display-v1', reply_mode: 'simulated_fixed_reply', public_stream_version: VERSION,
+    conversation: {id: c.id, friend_id: c.friend_id, friend_epoch: c.friend_epoch, binding_version: c.binding_version, status: c.status},
+    history: {session_id: c.id, player_actor_id: c.player_actor_id, position: {revision: c.revision, head_turn_id: head.turn_id, branch_id: 'main'},
+      content_revision: c.content_revision, invalidation_epoch: c.invalidation_epoch, access_epoch: c.access_epoch,
+      turns: c.turns.map(t => ({turn_id: t.turn_id, language: t.language, input_availability: t.input_availability,
+        player_expression: t.input_availability === 'withdrawn' ? null : t.player_expression,
+        segments: t.segments.map(s => ({segment_id: s.segment_id, kind: s.kind, speaker_id: s.speaker_id, availability: s.availability, body: s.availability === 'withdrawn' ? null : s.body})),
+        expression: t.expression, kind: t.kind}))},
+    pending_operation: pending ? operationJSON(pending) : null,
+    pending_expression: pending ? pending.text : null,
+    recall_options: [],
+  }
+}
+function operationJSON(o: OperationRow) {
+  const availability = o.status === 'committed' ? 'available' : ['cancelled', 'failed_final', 'stale'].includes(o.status) ? 'absent' : 'pending'
+  return {schema_version: 'companion-memory-private-operation-v1', operation_id: o.id, status: o.status, availability, turn_id: o.status === 'committed' ? o.turn_id : null}
+}
+function bindingOf(o: OperationRow) {
+  return {account_id: o.owner, friend_id: o.friend_id, friend_epoch: o.friend_epoch, session_id: o.conversation_id, revision: o.baseline_revision, head_turn_id: o.baseline_head, allow_fictional_thought: false}
+}
+const admissionJSON = (o: OperationRow) => ({version: VERSION, operation_id: o.id, run_epoch: o.run_epoch, binding: bindingOf(o)})
+
+function greetingTurn(c: ConversationRow, sourceId: string, language: Lang): TurnRow {
+  const ch = characterById(sourceId)
+  const text = ch ? ch.greeting[language] : (language === 'zh' ? '*点点头。*\n你好。' : '*Nods.*\nHello.')
+  const [action, spoken] = text.startsWith('*') ? [text.slice(1, text.indexOf('*', 1)), text.slice(text.indexOf('\n') + 1)] : ['', text]
+  const segs = [...(action ? [{kind: 'action' as const, body: action}] : []), {kind: 'dialogue' as const, body: spoken}]
+  return {turn_id: randomId('turn', 6), player_expression: null, input_availability: 'available', language, expression: 'neutral', created_at: now(), kind: 'greeting',
+    segments: segs.map(s => ({segment_id: randomId('seg', 6), kind: s.kind, speaker_id: c.friend_id, body: s.body, availability: 'available'}))}
+}
+
+/** Advance every operation per its timeline. Idempotent; safe to call often. */
+export function tickOperations() {
+  const d = db(), t = Date.now()
+  let changed = false
+  for (const o of Object.values(d.operations)) {
+    if (!['accepted', 'running', 'validating'].includes(o.status) || o.run_started_at === null) continue
+    const plan = o.plan.segments.length
+    const failAt = o.scenario === 'retryable_failure' && o.run_epoch === 1 ? o.run_started_at + T.firstSegment + T.segmentGap * .6 : null
+    if (failAt !== null && t >= failAt) { o.status = 'retryable_failed'; changed = true; continue }
+    const completeAt = o.run_started_at + T.firstSegment + T.segmentGap * (plan - 1) + T.completeAfter
+    const commitAt = o.commit_at ?? completeAt + T.commitAfter
+    if (t >= commitAt) { commit(o); changed = true }
+    else if (t >= completeAt && o.status !== 'validating') { o.status = 'validating'; changed = true }
+    else if (t >= o.run_started_at && o.status === 'accepted') { o.status = 'running'; changed = true }
+  }
+  if (changed) save()
+}
+function commit(o: OperationRow) {
+  const d = db(), c = d.conversations[o.conversation_id]
+  if (!c || o.status === 'committed') return
+  const turn: TurnRow = {turn_id: randomId('turn', 6), player_expression: o.text, input_availability: 'available', language: o.language, expression: o.plan.expression,
+    created_at: now(), kind: 'reply', segments: o.plan.segments.map(s => ({segment_id: s.segment_id, kind: s.kind === 'spoken' ? 'dialogue' : s.kind, speaker_id: s.kind === 'narration' ? null : o.friend_id, body: s.text, availability: 'available'}))}
+  c.turns.push(turn); c.revision++; c.content_revision++; c.updated_at = now()
+  o.status = 'committed'; o.turn_id = turn.turn_id
+}
+let ticker: ReturnType<typeof setInterval> | null = null
+export function startChatTicker() { if (!ticker) ticker = setInterval(tickOperations, 90) }
+
+function encodeFrames(frames: unknown[]): Uint8Array[] {
+  // Split each frame at a deterministic byte offset (often inside a multi-byte
+  // UTF-8 character) so the strict streaming decoder is exercised for real.
+  const enc = new TextEncoder(), out: Uint8Array[] = []
+  for (const f of frames) {
+    const bytes = enc.encode(JSON.stringify(f) + '\n')
+    const cut = Math.max(1, Math.floor(bytes.length * .61))
+    out.push(bytes.slice(0, cut), bytes.slice(cut))
+  }
+  return out
+}
+function streamFor(o: OperationRow, runEpoch: number, signal?: AbortSignal | null): ReadableStream<Uint8Array> {
+  const binding = bindingOf(o)
+  const env = (seq: number) => ({version: VERSION, operation_id: o.id, run_epoch: runEpoch, seq})
+  const late = o.scenario === 'late_old_stream' && runEpoch > 1
+  let seq = 0, closed = false
+  return new ReadableStream<Uint8Array>({
+    async start(controller) {
+      const push = (frames: unknown[]) => { for (const chunk of encodeFrames(frames)) controller.enqueue(chunk) }
+      const wait = (ms: number) => new Promise<void>(r => setTimeout(r, Math.max(0, ms)))
+      signal?.addEventListener('abort', () => { closed = true }, {once: true})
+      try {
+        if (late) {
+          // Stale frames from the retired run arrive first; the receiver must ignore them.
+          push([{version: VERSION, operation_id: o.id, run_epoch: runEpoch - 1, seq: 0, type: 'start', binding},
+            {version: VERSION, operation_id: o.id, run_epoch: runEpoch - 1, seq: 1, type: 'segment', segment: {segment_id: 'stale_segment_old_run', kind: 'spoken', text: '（这是旧 run 的晚到片段，不应显示）'}}])
+        }
+        push([{...env(seq++), type: 'start', binding}])
+        for (let i = 0; i < o.plan.segments.length; i++) {
+          const due = (o.run_started_at ?? Date.now()) + T.firstSegment + T.segmentGap * i
+          await wait(due - Date.now())
+          if (closed) return
+          tickOperations()
+          const live = db().operations[o.id]
+          if (!live || live.run_epoch !== runEpoch) { closed = true; controller.close(); return }
+          if (live.status === 'cancelled') { push([{...env(seq++), type: 'cancelled'}]); controller.close(); return }
+          if (live.status === 'retryable_failed') { push([{...env(seq++), type: 'failed', reason: 'generation_failed'}]); controller.close(); return }
+          const s = live.plan.segments[i]
+          push([{...env(seq++), type: 'segment', segment: {segment_id: s.segment_id, kind: s.kind, text: s.text}}])
+        }
+        const completeAt = (o.run_started_at ?? Date.now()) + T.firstSegment + T.segmentGap * (o.plan.segments.length - 1) + T.completeAfter
+        await wait(completeAt - Date.now())
+        if (closed) return
+        tickOperations()
+        const live = db().operations[o.id]
+        if (live?.status === 'cancelled') push([{...env(seq++), type: 'cancelled'}])
+        else if (live?.status === 'retryable_failed') push([{...env(seq++), type: 'failed', reason: 'generation_failed'}])
+        else push([{...env(seq++), type: 'complete'}])
+        controller.close()
+      } catch { if (!closed) controller.error(new Error('stream_failed')) }
+    },
+    cancel() { closed = true },
+  })
+}
+
+function conversationFor(friendId: string, owner: string) {
+  return Object.values(db().conversations).filter(c => c.friend_id === friendId && c.owner === owner).sort((a, b) => b.friend_epoch - a.friend_epoch)
+}
+function ownedConversation(id: string, owner: string) {
+  const c = db().conversations[id]
+  if (!c || c.owner !== owner) fail(404, 'not_found')
+  return c
+}
+
+export function handleChat(req: MockRequest): MockResult | null {
+  const d = db()
+  tickOperations()
+  const open = /^\/friends\/([^/]+)\/conversation$/.exec(req.path)
+  if (open && req.method === 'POST') {
+    const me = requireAccount()
+    if (req.body?.expected_account_id !== me.id) fail(409, 'account_changed')
+    const f = activeFriend(decodeURIComponent(open[1]), me.id)
+    if (int(req.body, 'expected_friend_epoch') !== f.epoch) fail(409, 'friend_epoch_changed')
+    const language = req.body?.language === 'en' ? 'en' : 'zh'
+    let c = conversationFor(f.id, me.id).find(x => x.friend_epoch === f.epoch)
+    if (!c) {
+      c = {id: randomId('conv', 8), owner: me.id, friend_id: f.id, friend_epoch: f.epoch, binding_version: 1, status: 'active', revision: 1, turns: [],
+        player_actor_id: `player_${me.id}`, created_at: now(), updated_at: now(), content_revision: 1, invalidation_epoch: 0, access_epoch: 1}
+      c.turns.push(greetingTurn(c, f.source_id, language))
+      d.conversations[c.id] = c; save()
+    }
+    return ok(snapshotJSON(c))
+  }
+  const archive = /^\/friends\/([^/]+)\/conversations$/.exec(req.path)
+  if (archive && req.method === 'GET') {
+    const me = requireAccount()
+    const f = d.friends[decodeURIComponent(archive[1])]
+    if (!f || f.owner !== me.id) fail(404, 'not_found')
+    return ok({items: conversationFor(f.id, me.id).map(c => ({id: c.id, friend_epoch: c.friend_epoch, status: c.status, turns: c.turns.length, updated_at: c.updated_at}))})
+  }
+  const read = /^\/conversations\/([^/]+)$/.exec(req.path)
+  if (read && req.method === 'GET') { const me = requireAccount(); return ok(snapshotJSON(ownedConversation(decodeURIComponent(read[1]), me.id))) }
+
+  const send = /^\/conversations\/([^/]+)\/operations$/.exec(req.path)
+  if (send && req.method === 'POST') {
+    const me = requireAccount()
+    if (req.body?.expected_account_id !== me.id) fail(409, 'account_changed')
+    const c = ownedConversation(decodeURIComponent(send[1]), me.id)
+    const f = activeFriend(c.friend_id, me.id)
+    if (scenarios.consume('chat.friend_reset_elsewhere')) {
+      f.epoch++; f.revision++
+      for (const x of Object.values(d.conversations)) if (x.friend_id === f.id && x.friend_epoch < f.epoch) x.status = 'read_only'
+      save(); fail(409, 'friend_epoch_changed')
+    }
+    if (int(req.body, 'expected_friend_epoch') !== f.epoch || c.friend_epoch !== f.epoch) fail(409, 'friend_epoch_changed')
+    if (c.status !== 'active') fail(409, 'conversation_read_only')
+    const key = str(req.body, 'key', 128), text = str(req.body, 'text', 2000), language = req.body?.language === 'en' ? 'en' as const : 'zh' as const
+    if (!text.trim()) fail(422, 'empty_input')
+    const prior = Object.values(d.operations).find(o => o.conversation_id === c.id && o.key === key)
+    if (prior) {
+      if (prior.text !== text || prior.language !== language) fail(409, 'idempotency_conflict')
+      return ok({operation: operationJSON(prior), admission: admissionJSON(prior)})
+    }
+    if (scenarios.consume('chat.stale_head')) {
+      // Another window committed first: the presented head is now stale.
+      const other: TurnRow = {turn_id: randomId('turn', 6), player_expression: language === 'zh' ? '（另一窗口发送的消息）' : '(Message sent from another window)', input_availability: 'available', language, expression: 'neutral', created_at: now(), kind: 'reply',
+        segments: [{segment_id: randomId('seg', 6), kind: 'dialogue', speaker_id: c.friend_id, body: language === 'zh' ? '嗯，这条是在另一个窗口里回复的。' : 'Mm, this reply happened in another window.', availability: 'available'}]}
+      c.turns.push(other); c.revision++; c.content_revision++; save()
+    }
+    const head = c.turns[c.turns.length - 1]
+    if (int(req.body, 'expected_revision') !== c.revision || req.body?.presented_turn_id !== head.turn_id) fail(409, 'stale_revision')
+    if (Object.values(d.operations).some(o => o.conversation_id === c.id && ['accepted', 'running', 'validating', 'retryable_failed'].includes(o.status))) fail(409, 'operation_pending')
+    let scenario: string | null = null, lateOnRetry = false
+    if (scenarios.consume('chat.late_old_stream')) { scenario = 'retryable_failure'; lateOnRetry = true }
+    else if (scenarios.consume('chat.retryable_failure')) scenario = 'retryable_failure'
+    else if (scenarios.consume('chat.commit_before_cancel')) scenario = 'commit_before_cancel'
+    const source = characterById(f.source_id)?.live2d ?? 'default'
+    const plan = planReply(source, text, language, c.turns.length)
+    const o: OperationRow = {id: randomId('op', 8), conversation_id: c.id, owner: me.id, friend_id: f.id, friend_epoch: f.epoch, key, text, language,
+      baseline_revision: c.revision, baseline_head: head.turn_id, status: 'accepted', run_epoch: 1, turn_id: null, created_at: now(),
+      plan: {segments: plan.segments.map(s => ({...s, segment_id: randomId('seg', 6)})), expression: plan.expression},
+      scenario, late_on_retry: lateOnRetry, commit_at: null, run_started_at: Date.now() + 140}
+    if (o.scenario === 'commit_before_cancel') o.commit_at = o.run_started_at! + T.firstSegment + 160
+    d.operations[o.id] = o; save()
+    const result = {operation: operationJSON(o), admission: admissionJSON(o)}
+    if (scenarios.consume('chat.unknown_result')) return {drop: true}
+    return ok(result, 202)
+  }
+  const stream = /^\/operations\/([^/]+)\/public-stream$/.exec(req.path)
+  if (stream && req.method === 'GET') {
+    const me = requireAccount()
+    const o = d.operations[decodeURIComponent(stream[1])]
+    if (!o || o.owner !== me.id) fail(404, 'not_found')
+    const run = Number(req.query.get('run_epoch'))
+    if (run !== o!.run_epoch) fail(409, 'run_epoch_changed')
+    return {status: 200, stream: streamFor(o!, run, req.signal), contentType: 'application/x-ndjson'}
+  }
+  const opRead = /^\/operations\/([^/]+)(\/receipt)?$/.exec(req.path)
+  if (opRead && req.method === 'GET') {
+    const me = requireAccount()
+    const o = d.operations[decodeURIComponent(opRead[1])]
+    if (!o || o.owner !== me.id) fail(404, 'not_found')
+    if (!opRead[2]) return ok(operationJSON(o!))
+    const c = d.conversations[o!.conversation_id]
+    return ok({owner_id: me.id, operation: operationJSON(o!), snapshot: snapshotJSON(c), admission: ['accepted', 'running', 'validating'].includes(o!.status) ? admissionJSON(o!) : null})
+  }
+  const lookup = /^\/conversations\/([^/]+)\/operations\/lookup$/.exec(req.path)
+  if (lookup && req.method === 'GET') {
+    const me = requireAccount()
+    const c = ownedConversation(decodeURIComponent(lookup[1]), me.id)
+    const key = req.query.get('key') ?? ''
+    const o = Object.values(d.operations).find(x => x.conversation_id === c.id && x.key === key)
+    if (!o) fail(404, 'operation_not_found')
+    return ok({operation: operationJSON(o!), admission: ['accepted', 'running', 'validating'].includes(o!.status) ? admissionJSON(o!) : null, text: o!.text})
+  }
+  const control = /^\/operations\/([^/]+)\/(retry|cancel)$/.exec(req.path)
+  if (control && req.method === 'POST') {
+    const me = requireAccount()
+    if (req.body?.expected_account_id !== me.id) fail(409, 'account_changed')
+    const o = d.operations[decodeURIComponent(control[1])]
+    if (!o || o.owner !== me.id) fail(404, 'not_found')
+    const f = d.friends[o!.friend_id]
+    if (!f || f.status !== 'active' || int(req.body, 'expected_friend_epoch') !== o!.friend_epoch || f.epoch !== o!.friend_epoch) fail(409, 'friend_epoch_changed')
+    if (control[2] === 'cancel') {
+      // Scenario “commit wins over Stop”: the authority committed just before Stop arrived.
+      if (o!.scenario === 'commit_before_cancel' && ['accepted', 'running', 'validating'].includes(o!.status)) o!.commit_at = Math.min(o!.commit_at ?? Infinity, Date.now())
+      tickOperations()
+      if (['accepted', 'running', 'validating', 'retryable_failed'].includes(o!.status)) { o!.status = 'cancelled'; save() }
+      return ok(operationJSON(o!))
+    }
+    if (o!.status !== 'retryable_failed') fail(409, 'operation_not_retryable')
+    const c = d.conversations[o!.conversation_id]
+    if (c.revision !== o!.baseline_revision || c.turns[c.turns.length - 1].turn_id !== o!.baseline_head) { o!.status = 'stale'; save(); fail(409, 'stale_revision') }
+    // Same operation, same key, same input, same baseline; a new run epoch.
+    o!.run_epoch++; o!.status = 'accepted'; o!.run_started_at = Date.now() + 140
+    o!.scenario = o!.late_on_retry ? 'late_old_stream' : null
+    save()
+    return ok({operation: operationJSON(o!), admission: admissionJSON(o!)}, 202)
+  }
+  const rollback = /^\/conversations\/([^/]+)\/rollback$/.exec(req.path)
+  if (rollback && req.method === 'POST') {
+    const me = requireAccount()
+    const c = ownedConversation(decodeURIComponent(rollback[1]), me.id)
+    if (c.status !== 'active') fail(409, 'conversation_read_only')
+    if (int(req.body, 'expected_revision') !== c.revision) fail(409, 'stale_revision')
+    if (Object.values(d.operations).some(o => o.conversation_id === c.id && ['accepted', 'running', 'validating', 'retryable_failed'].includes(o.status))) fail(409, 'operation_pending')
+    const turnId = str(req.body, 'turn_id', 128)
+    const index = c.turns.findIndex(t => t.turn_id === turnId)
+    if (index <= 0 || c.turns[index].player_expression === null || c.turns[index].input_availability === 'withdrawn') fail(422, 'rollback_target_invalid')
+    const draft = c.turns[index].player_expression
+    const withdrawn = c.turns.length - index
+    // The target and everything after it leave the valid history at once: no body is
+    // kept anywhere that a later read, search, preview or export could return.
+    c.turns = c.turns.slice(0, index)
+    const lang = req.body?.language === 'en' ? 'en' : 'zh'
+    c.turns.push({turn_id: randomId('turn', 6), player_expression: null, input_availability: 'available', language: lang, expression: 'neutral', created_at: now(), kind: 'note',
+      segments: [{segment_id: randomId('seg', 6), kind: 'narration', speaker_id: null, availability: 'available',
+        body: lang === 'zh' ? `已回退到这里：之后的 ${withdrawn} 轮已撤回，原输入已放回输入框。` : `Rolled back here: ${withdrawn} later turn(s) withdrawn; your original input is back in the composer.`}]})
+    c.revision++; c.invalidation_epoch++; c.content_revision++; c.updated_at = now(); save()
+    return ok({snapshot: snapshotJSON(c), restored_draft: draft})
+  }
+  const correction = /^\/conversations\/([^/]+)\/corrections$/.exec(req.path)
+  if (correction && req.method === 'POST') {
+    const me = requireAccount()
+    const c = ownedConversation(decodeURIComponent(correction[1]), me.id)
+    if (c.status !== 'active') fail(409, 'conversation_read_only')
+    const text = str(req.body, 'text', 400).trim(), target = typeof req.body?.turn_id === 'string' ? req.body.turn_id : null
+    if (!text) fail(422, 'empty_input')
+    const key = str(req.body, 'key', 128)
+    if (d.corrections.some(x => x.id === key)) return ok({snapshot: snapshotJSON(c)})
+    d.corrections.push({id: key, conversation_id: c.id, turn_id: target, text, created_at: now()})
+    const lang = req.body?.language === 'en' ? 'en' : 'zh'
+    c.turns.push({turn_id: randomId('turn', 6), player_expression: null, input_availability: 'available', language: lang, expression: 'neutral', created_at: now(), kind: 'note',
+      segments: [{segment_id: randomId('seg', 6), kind: 'narration', speaker_id: null, availability: 'available',
+        body: lang === 'zh' ? `已记录更正（玩家说明，不改写已发生的事）：${text}` : `Correction recorded (player's statement; past events are not rewritten): ${text}`}]})
+    c.revision++; c.content_revision++; save()
+    return ok({snapshot: snapshotJSON(c)})
+  }
+  return null
+}
+export const _internal = {actor}
diff --git a/everwith-claude-frontend/src/mock/server/context.ts b/everwith-claude-frontend/src/mock/server/context.ts
new file mode 100644
index 00000000..791a3f5c
--- /dev/null
+++ b/everwith-claude-frontend/src/mock/server/context.ts
@@ -0,0 +1,25 @@
+import {db, save} from '../db'
+import type {AccountRow} from '../db'
+import {fail} from '../http'
+import {scenarios} from '../scenarios'
+
+/** Current owner id: the signed-in local mock account, otherwise this browser's guest id. */
+export function actor(): string { const d = db(); return d.session_account ?? d.guest_id }
+export function account(): AccountRow | null { const d = db(); return d.session_account ? d.accounts[d.session_account] ?? null : null }
+export function requireAccount(): AccountRow {
+  if (scenarios.consume('auth.expired')) fail(401, 'auth_session_required')
+  if (scenarios.consume('auth.forbidden')) fail(403, 'forbidden')
+  const a = account()
+  if (!a) fail(401, 'auth_session_required')
+  return a as AccountRow
+}
+export function expectAccount(body: Record<string, unknown> | null) {
+  const expected = body?.expected_account_id
+  if (expected !== undefined && expected !== actor()) fail(409, 'account_changed')
+}
+export function owned<T extends {owner: string}>(row: T | undefined | null): T {
+  if (!row) fail(404, 'not_found')
+  if ((row as T).owner !== actor()) fail(404, 'not_found') // Never reveal another owner's record exists.
+  return row as T
+}
+export {save}
diff --git a/everwith-claude-frontend/src/mock/server/friends.ts b/everwith-claude-frontend/src/mock/server/friends.ts
new file mode 100644
index 00000000..72eae30a
--- /dev/null
+++ b/everwith-claude-frontend/src/mock/server/friends.ts
@@ -0,0 +1,102 @@
+import {characterById} from '../catalog'
+import {db, now, save} from '../db'
+import type {FriendRow} from '../db'
+import {fail, fingerprint, int, ok, str} from '../http'
+import type {MockRequest, MockResult} from '../http'
+import {expectAccount, requireAccount} from './context'
+import {workCharacterJSON} from './catalog'
+import {randomId} from '../../lib/util'
+import type {L10n} from '../../lib/util'
+
+export function friendJSON(f: FriendRow) {
+  const official = characterById(f.source_id)
+  const live2d = official && f.source_version === '1' ? official.live2d : null
+  return {id: f.id, source_id: f.source_id, source_version: f.source_version, name: f.name, avatar: official?.avatar ?? null,
+    epoch: f.epoch, revision: f.revision, display_number: f.display_number, status: 'active', source_name: f.source_name,
+    created_at: f.created_at, origin: {kind: f.origin.kind, label: f.origin.label}, live2d}
+}
+export function activeFriend(id: string, owner: string): FriendRow {
+  const f = db().friends[id]
+  if (!f || f.owner !== owner || f.status !== 'active') fail(404, 'not_found')
+  return f
+}
+function sourceName(sourceId: string, version: string): string {
+  const official = characterById(sourceId)
+  if (official && version === official.version) return official.name
+  const work = /^work-(.+)$/.exec(sourceId)
+  if (work) return (workCharacterJSON(work[1], Number(version)) as {name: string}).name
+  return fail(404, 'source_not_found')
+}
+
+export type FriendCreateHook = (friend: FriendRow, origin: Record<string, unknown>) => void
+const hooks: FriendCreateHook[] = []
+/** Story/game modules bind “this exact person” (F2/F7) in the same commit as the friend. */
+export function onFriendCreated(hook: FriendCreateHook) { hooks.push(hook) }
+export type FriendOriginValidator = (origin: Record<string, unknown>, owner: string, sourceId: string, version: string) => {label: L10n; kind: FriendRow['origin']['kind']; session_id?: string}
+const validators: Record<string, FriendOriginValidator> = {}
+export function registerOrigin(kind: string, v: FriendOriginValidator) { validators[kind] = v }
+
+export function handleFriends(req: MockRequest): MockResult | null {
+  const d = db()
+  if (req.path === '/friends' && req.method === 'GET') {
+    const me = requireAccount()
+    if (req.query.get('expected_account_id') && req.query.get('expected_account_id') !== me.id) fail(409, 'account_changed')
+    const q = (req.query.get('q') ?? '').trim().toLowerCase()
+    const items = Object.values(d.friends).filter(f => f.owner === me.id && f.status === 'active' && (!q || `${f.name} ${f.source_name}`.toLowerCase().includes(q)))
+      .sort((a, b) => b.created_at.localeCompare(a.created_at))
+    return ok({owner_id: me.id, items: items.slice(0, 100).map(friendJSON), total: items.length})
+  }
+  if (req.path === '/friends' && req.method === 'POST') {
+    const me = requireAccount(); expectAccount(req.body)
+    const key = str(req.body, 'key', 128), sourceId = str(req.body, 'source_id', 80), version = str(req.body, 'source_version', 80)
+    const name = str(req.body, 'name', 40).trim()
+    if (!name) fail(422, 'name_required')
+    const origin = (req.body?.origin ?? {kind: 'character'}) as Record<string, unknown>
+    const fp = fingerprint({sourceId, version, name, origin})
+    const existing = Object.values(d.friends).find(f => f.owner === me.id && f.key === key)
+    if (existing) {
+      // Same key replays the original result; a different intent under that key is rejected.
+      if (existing.fingerprint !== fp) fail(409, 'idempotency_conflict')
+      return ok(friendJSON(existing))
+    }
+    const src = sourceName(sourceId, version)
+    const kind = String(origin.kind ?? 'character')
+    const v = kind === 'character' ? null : validators[kind]
+    if (kind !== 'character' && !v) fail(400, 'invalid_origin')
+    const resolved = v ? v(origin, me.id, sourceId, version) : {kind: (sourceId.startsWith('work-') ? 'creation' : 'character') as FriendRow['origin']['kind'], label: sourceId.startsWith('work-') ? {zh: '来自我保存的角色作品', en: 'From my saved character work'} : {zh: '来自公开角色介绍', en: 'From the public character page'}}
+    const sameSource = Object.values(d.friends).filter(f => f.owner === me.id && f.source_id === sourceId)
+    const row: FriendRow = {id: randomId('fr', 8), owner: me.id, source_id: sourceId, source_version: version, source_name: src, name,
+      epoch: 1, revision: 1, display_number: sameSource.length + 1, status: 'active', created_at: now(),
+      origin: {kind: resolved.kind, label: resolved.label, session_id: resolved.session_id}, key, fingerprint: fp}
+    d.friends[row.id] = row
+    for (const hook of hooks) hook(row, origin)
+    save()
+    return ok(friendJSON(row), 201)
+  }
+  const one = /^\/friends\/([^/]+)$/.exec(req.path)
+  if (one && req.method === 'GET') {
+    const me = requireAccount()
+    return ok(friendJSON(activeFriend(decodeURIComponent(one[1]), me.id)))
+  }
+  const action = /^\/friends\/([^/]+)\/(rename|reset|remove)$/.exec(req.path)
+  if (action && req.method === 'POST') {
+    const me = requireAccount(); expectAccount(req.body)
+    const f = activeFriend(decodeURIComponent(action[1]), me.id)
+    if (int(req.body, 'expected_epoch') !== f.epoch) fail(409, 'friend_epoch_changed')
+    if (action[2] === 'rename') {
+      const name = str(req.body, 'name', 40).trim(); if (!name) fail(422, 'name_required')
+      f.name = name; f.revision++
+    } else if (action[2] === 'reset') {
+      // New generation: old chats and affected activities become read-only, never deleted.
+      f.epoch++; f.revision++
+      for (const c of Object.values(d.conversations)) if (c.friend_id === f.id && c.friend_epoch < f.epoch) c.status = 'read_only'
+      for (const s of Object.values(d.stories)) if (s.cast.some(r => r.friend_id === f.id)) s.status = 'read_only'
+    } else {
+      f.status = 'removed'; f.revision++
+      for (const c of Object.values(d.conversations)) if (c.friend_id === f.id) c.status = 'read_only'
+    }
+    save()
+    return ok({friend: action[2] === 'remove' ? null : friendJSON(f), removed: action[2] === 'remove'})
+  }
+  return null
+}
diff --git a/everwith-claude-frontend/src/mock/server/games.ts b/everwith-claude-frontend/src/mock/server/games.ts
new file mode 100644
index 00000000..6a1fc795
--- /dev/null
+++ b/everwith-claude-frontend/src/mock/server/games.ts
@@ -0,0 +1,257 @@
+/**
+ * Game sessions (LOCAL MOCK AUTHORITY). Full engine state stays here; responses carry
+ * only seat 0's allowlisted projection. NPC seats are fixed-strategy “规则模拟陪玩”.
+ * AI steps are requested one at a time by the open table, so leaving the page lets
+ * the in-flight step finish and pauses the rest (G133).
+ */
+import {characterById, gameById, OFFICIAL_CHARACTERS} from '../catalog'
+import {db, now, save} from '../db'
+import type {GameRow, GameSeatRow} from '../db'
+import {fail, fingerprint, int, ok, str} from '../http'
+import type {MockRequest, MockResult} from '../http'
+import {scenarios} from '../scenarios'
+import {actor, expectAccount} from './context'
+import {onFriendCreated, registerOrigin} from './friends'
+import {GAME_MODULES} from '../games/modules'
+import type {GameId} from '../games/modules'
+import {hash32, randomId} from '../../lib/util'
+import type {L10n, Lang} from '../../lib/util'
+
+const TEMP_ROTATION = ['official-lena', 'official-arthur', 'official-marcus', 'official-nora', 'official-iris']
+
+function seatJSON(s: GameSeatRow) {
+  const ch = s.source_id ? characterById(s.source_id) : null
+  return {seat: s.seat, kind: s.kind, identity: s.identity, friend_epoch: s.friend_epoch, name: s.name, source_id: s.source_id, source_version: s.source_version,
+    avatar: ch?.avatar ?? null, live2d: ch && s.source_version === '1' ? ch.live2d : null}
+}
+function expressionFor(g: GameRow): Record<number, 'neutral' | 'happy' | 'surprised'> {
+  const out: Record<number, 'neutral' | 'happy' | 'surprised'> = {}
+  const last = g.public_log[g.public_log.length - 1]
+  if (!last) return out
+  if (last.kind === 'gain') out[last.seat] = 'happy'
+  if (last.kind === 'surprise') for (const s of g.seats) if (s.seat !== last.seat) out[s.seat] = 'surprised'
+  if (g.settlement) for (const w of g.settlement.winners) out[w] = 'happy'
+  return out
+}
+export function gameViewJSON(g: GameRow) {
+  const m = GAME_MODULES[g.game_id]
+  const a = m.actor(g.state)
+  return {
+    schema_version: 'everwith-game-view-v1', mode: 'rule_simulated_companions', id: g.id, game_id: g.game_id, profile: g.profile,
+    seats: g.seats.map(seatJSON), lifecycle: g.lifecycle, revision: g.revision, ai_hold: g.ai_hold,
+    actor_seat: a, phase: m.phase(g.state), player_view: m.view(g.state, 0), settlement: g.settlement,
+    origin: g.origin, created_at: g.created_at, updated_at: g.updated_at, rematch_of: g.rematch_of, archived: g.archived,
+    log: g.public_log.slice(-60), expressions: expressionFor(g), chat_count: g.chat.length,
+  }
+}
+function owned(id: string) {
+  const g = db().games[id]
+  if (!g || g.owner !== actor() || g.deleted) fail(404, 'not_found')
+  return g
+}
+function logKind(gameId: GameId, action: Record<string, unknown>, before: unknown, after: unknown, seat: number): string {
+  if (gameId === 'vegas' && action.type === 'payout') return 'payout'
+  if (gameId === 'gems' && (action.type === 'buy' || action.type === 'noble')) {
+    const b = (before as {players: {cards: string[]; nobles: string[]}[]}).players[seat], c = (after as {players: {cards: string[]; nobles: string[]}[]}).players[seat]
+    return c.cards.length + c.nobles.length > b.cards.length + b.nobles.length ? 'gain' : 'move'
+  }
+  if (gameId === 'cabo' && (action.type === 'call' || action.type === 'swap')) return 'surprise'
+  return 'move'
+}
+const seatName = (g: GameRow) => (seat: number) => g.seats[seat]?.name ?? `#${seat}`
+
+function applyMove(g: GameRow, seat: number, action: Record<string, unknown>) {
+  const m = GAME_MODULES[g.game_id]
+  const before = g.state
+  let next: unknown
+  try { next = m.apply(before, seat, action) } catch (e) { return fail(422, 'game_action_rejected', {reason: e instanceof Error ? e.message : 'illegal'}) }
+  g.state = next; g.revision++; g.updated_at = now()
+  const summary = m.summary(before, next, seat, action, seatName(g))
+  let kind = logKind(g.game_id, action, before, next, seat)
+  if (g.game_id === 'vegas' && action.type === 'payout') {
+    const r = (next as {events: {type: string; result?: {awards: {owner: number | 'neutral'}[]}}[]}).events.find(e => e.type === 'payout')?.result
+    const winner = r?.awards[0]?.owner
+    if (typeof winner === 'number') { kind = 'gain'; seat = winner }
+  }
+  if (summary) g.public_log.push({revision: g.revision, seat, summary, kind})
+  if (g.public_log.length > 400) g.public_log.splice(0, g.public_log.length - 400)
+  if (m.ended(next)) {
+    g.lifecycle = 'ended'
+    const settle = m.settle(next)
+    g.settlement = {id: randomId('settle', 6), committed_revision: g.revision, ...settle}
+  }
+}
+
+const AUTO_LINES: Record<string, L10n[]> = {
+  gain: [{zh: '这一手不错。', en: 'Not a bad move.'}, {zh: '收下了，谢谢。', en: 'I\'ll take that, thanks.'}],
+  surprise: [{zh: '……来真的？', en: '…Seriously?'}, {zh: '好，那就看看谁的牌更小。', en: 'Alright, let\'s see whose hand is lower.'}],
+  end: [{zh: '这一局结束了。比分以台面为准。', en: 'That\'s the game. The table score stands.'}],
+}
+function autoLine(g: GameRow, seat: number, kind: string, lang: Lang) {
+  if (seat === 0 || !AUTO_LINES[kind] || g.seats[seat]?.kind === 'player') return
+  const pick = AUTO_LINES[kind][hash32(`${g.id}|${g.revision}`) % AUTO_LINES[kind].length]
+  g.chat.push({id: `tc_${g.id}_${g.revision}_${seat}`, seat, text: pick[lang], audience: 'table', mode: 'simulated_rule_reply', kind: 'narration', language: lang, revision: g.revision})
+}
+
+registerOrigin('game', (origin, owner, sourceId, version) => {
+  const g = db().games[String(origin.session_id)]
+  if (!g || g.owner !== owner || g.deleted) fail(404, 'not_found')
+  const seat = g!.seats[Number(origin.seat)]
+  if (!seat || seat.kind !== 'temporary' || seat.source_id !== sourceId || version !== '1') fail(422, 'origin_mismatch')
+  const def = gameById(g!.game_id)!
+  return {kind: 'game', session_id: g!.id, label: {zh: `来自 ${def.name} 同桌`, en: `From a ${def.name} table`}}
+})
+onFriendCreated((friend, origin) => {
+  if (origin.kind !== 'game') return
+  const g = db().games[String(origin.session_id)]
+  const seat = g?.seats[Number(origin.seat)]
+  // F7: the temporary table-mate becomes this friend in place — no added seat, no restart.
+  if (g && seat && seat.kind === 'temporary') {
+    const previous = seat.identity
+    seat.kind = 'friend'; seat.identity = friend.id; seat.friend_epoch = friend.epoch; seat.name = friend.name
+    for (const other of Object.values(db().games)) if (other.rematch_of === g.id || g.rematch_of === other.id) {
+      const s = other.seats.find(x => x.identity === previous); if (s) { s.kind = 'friend'; s.identity = friend.id; s.friend_epoch = friend.epoch; s.name = friend.name }
+    }
+  }
+})
+
+export function handleGames(req: MockRequest): MockResult | null {
+  const d = db()
+  if (req.path === '/game-sessions' && req.method === 'GET') {
+    return ok({items: Object.values(d.games).filter(g => g.owner === actor() && !g.deleted).sort((a, b) => b.updated_at.localeCompare(a.updated_at)).map(gameViewJSON)})
+  }
+  if (req.path === '/game-sessions/lookup' && req.method === 'GET') {
+    const key = req.query.get('key') ?? ''
+    const g = Object.values(d.games).find(x => x.owner === actor() && x.key === key)
+    if (!g) fail(404, 'not_found')
+    return ok(gameViewJSON(g!))
+  }
+  if (req.path === '/game-sessions' && req.method === 'POST') {
+    expectAccount(req.body)
+    const key = str(req.body, 'key', 128), gameId = str(req.body, 'game_id', 10) as GameId
+    const def = gameById(gameId)
+    if (!def || !GAME_MODULES[gameId]) fail(404, 'not_found')
+    const players = int(req.body, 'players')
+    if (!def!.players.includes(players)) fail(422, 'player_count_invalid')
+    const profile = typeof req.body?.profile === 'string' ? req.body.profile : def!.profile
+    if (profile !== def!.profile && !(gameId === 'gems' && profile === 'splendor-legacy-v1' && req.body?.legacy_fixture === true)) fail(422, 'profile_invalid')
+    const seatsIn = Array.isArray(req.body?.seats) ? req.body!.seats as {seat: number; kind: string; friend_id?: string; friend_epoch?: number; character_id?: string}[] : []
+    const origin = (req.body?.origin ?? {kind: 'discover', return_hash: '#/discover?tab=games'}) as GameRow['origin']
+    const fp = fingerprint({gameId, players, profile, seatsIn})
+    const existing = Object.values(d.games).find(g => g.owner === actor() && g.key === key)
+    if (existing) { if (existing.fingerprint !== fp) fail(409, 'idempotency_conflict'); return ok(gameViewJSON(existing)) }
+    if (seatsIn.length !== players - 1) fail(422, 'seats_invalid')
+    const used = new Set<string>()
+    const seats: GameSeatRow[] = [{seat: 0, kind: 'player', identity: actor(), friend_epoch: null, name: d.accounts[actor()]?.persona?.name || (d.guest_personas[actor()]?.name ?? '你'), source_id: null, source_version: null}]
+    seatsIn.forEach((s, i) => {
+      if (s.seat !== i + 1) fail(422, 'seats_invalid')
+      if (s.kind === 'friend') {
+        const f = d.friends[s.friend_id ?? '']
+        if (!f || f.owner !== actor() || f.status !== 'active') fail(422, 'friend_unavailable', {seat: s.seat})
+        if (f!.epoch !== s.friend_epoch) fail(409, 'friend_epoch_changed', {seat: s.seat})
+        if (used.has(f!.id)) fail(422, 'friend_already_seated', {seat: s.seat})
+        used.add(f!.id)
+        seats.push({seat: s.seat, kind: 'friend', identity: f!.id, friend_epoch: f!.epoch, name: f!.name, source_id: f!.source_id, source_version: f!.source_version})
+      } else {
+        const ch = characterById(s.character_id ?? '') ?? characterById(TEMP_ROTATION[i % TEMP_ROTATION.length])!
+        seats.push({seat: s.seat, kind: 'temporary', identity: randomId('tmp', 6), friend_epoch: null, name: ch.name, source_id: ch.id, source_version: ch.version})
+      }
+    })
+    const seed = hash32(`${key}|${gameId}|${players}`) % 1000000 + 1
+    const m = GAME_MODULES[gameId]
+    const g: GameRow = {id: randomId('gs', 8), owner: actor(), game_id: gameId, profile, key, fingerprint: fp, seats, lifecycle: 'active', revision: 1, ai_hold: false,
+      state: m.create(players, seed, profile), seed, origin, chat: [], settlement: null, actions: {}, created_at: now(), updated_at: now(), rematch_of: null,
+      archived: false, deleted: false, public_log: [{revision: 1, seat: 0, summary: {zh: '牌局开始', en: 'Game started'}, kind: 'move'}]}
+    d.games[g.id] = g; save()
+    if (scenarios.consume('game.unknown_start')) return {drop: true}
+    return ok(gameViewJSON(g), 201)
+  }
+  const one = /^\/game-sessions\/([^/]+)$/.exec(req.path)
+  if (one && req.method === 'GET') return ok(gameViewJSON(owned(decodeURIComponent(one[1]))))
+  const cmd = /^\/game-sessions\/([^/]+)\/(act|advance|hold|abandon|rematch)$/.exec(req.path)
+  if (cmd && req.method === 'POST') {
+    const g = owned(decodeURIComponent(cmd[1]))
+    const m = GAME_MODULES[g.game_id]
+    if (cmd[2] === 'hold') {
+      if (g.lifecycle === 'active') { g.ai_hold = req.body?.hold === true; save() }
+      return ok(gameViewJSON(g))
+    }
+    if (cmd[2] === 'rematch') {
+      if (g.lifecycle !== 'ended' && g.lifecycle !== 'abandoned') fail(409, 'game_not_finished')
+      const key = str(req.body, 'key', 128)
+      const prior = Object.values(d.games).find(x => x.owner === actor() && x.key === key)
+      if (prior) return ok(gameViewJSON(prior))
+      // Same table, same people (temporary identities kept); a fresh deal and new record.
+      const seed = hash32(`${key}|rematch|${g.id}`) % 1000000 + 1
+      const fresh: GameRow = {...structuredClone(g), id: randomId('gs', 8), key, fingerprint: fingerprint({rematch: g.id}), lifecycle: 'active', revision: 1, ai_hold: false,
+        state: m.create(g.seats.length, seed, g.profile), seed, chat: [], settlement: null, actions: {}, created_at: now(), updated_at: now(), rematch_of: g.id, archived: false,
+        public_log: [{revision: 1, seat: 0, summary: {zh: '原桌再开一局', en: 'Rematch at the same table'}, kind: 'move'}]}
+      d.games[fresh.id] = fresh; save()
+      return ok(gameViewJSON(fresh), 201)
+    }
+    if (cmd[2] === 'abandon') {
+      if (g.lifecycle === 'ended' || g.lifecycle === 'abandoned') return ok(gameViewJSON(g))
+      if (int(req.body, 'expected_revision') !== g.revision) fail(409, 'game_revision_changed')
+      // Explicit abandon: read-only, unfinished, no invented winner.
+      g.lifecycle = 'abandoned'; g.updated_at = now()
+      g.public_log.push({revision: g.revision, seat: 0, summary: {zh: '你明确放弃了本局（未完成，不计胜负）', en: 'You abandoned this game (unfinished, no result)'}, kind: 'move'}); save()
+      return ok(gameViewJSON(g))
+    }
+    if (g.lifecycle !== 'active') fail(409, 'game_not_active')
+    const key = str(req.body, 'key', 128)
+    const expected = int(req.body, 'expected_revision')
+    const prior = g.actions[key]
+    const action = (cmd[2] === 'act' ? req.body?.action : {advance: true}) as Record<string, unknown>
+    const fp = fingerprint(action)
+    if (prior) { if (prior.fingerprint !== fp) fail(409, 'idempotency_conflict'); return ok(gameViewJSON(g)) }
+    if (expected !== g.revision) fail(409, 'game_revision_changed')
+    const who = m.actor(g.state)
+    if (cmd[2] === 'act') {
+      if (!(who === 0 || who === 'any')) fail(409, 'game_seat_not_authorized')
+      if (!action || typeof action.type !== 'string') fail(400, 'invalid_request')
+      applyMove(g, 0, action)
+      g.ai_hold = false
+    } else {
+      if (g.ai_hold) fail(409, 'game_ai_on_hold')
+      if (who === 0 || who === 'any') fail(409, 'waiting_for_player')
+      const seat = who as number
+      const decided = m.ai(g.state, seat, hash32(`${g.id}|${g.revision}`) % 100000 + 1) as Record<string, unknown>
+      applyMove(g, seat, decided)
+      const last = g.public_log[g.public_log.length - 1]
+      const lang: Lang = req.body?.language === 'en' ? 'en' : 'zh'
+      if (last && last.revision === g.revision && (last.kind === 'gain' || last.kind === 'surprise') && hash32(`${g.id}|${g.revision}|talk`) % 3 === 0) autoLine(g, last.seat, last.kind, lang)
+      if (g.lifecycle === 'ended') autoLine(g, g.settlement!.winners.find(w => w !== 0) ?? 1, 'end', lang)
+    }
+    g.actions[key] = {fingerprint: fp, revision: g.revision}
+    save()
+    return ok(gameViewJSON(g))
+  }
+  const chat = /^\/game-sessions\/([^/]+)\/table-chat$/.exec(req.path)
+  if (chat) {
+    const g = owned(decodeURIComponent(chat[1]))
+    const items = () => g.chat.slice(-60).map(({revision: _r, ...m}) => m)
+    if (req.method === 'GET') return ok({items: items()})
+    if (req.method === 'POST') {
+      if (g.lifecycle === 'abandoned') fail(409, 'table_chat_read_only')
+      const key = str(req.body, 'key', 128), text = str(req.body, 'text', 2000).trim(), lang: Lang = req.body?.language === 'en' ? 'en' : 'zh'
+      if (!text) fail(422, 'empty_input')
+      if (g.chat.some(m => m.id === `tc_${key}`)) return ok({items: items(), reply_failed: false})
+      g.chat.push({id: `tc_${key}`, seat: 0, text, audience: 'table', mode: 'player', kind: 'dialogue', language: lang, revision: g.revision})
+      const others = g.seats.filter(s => s.seat !== 0)
+      const speaker = others[hash32(key) % others.length]
+      if (scenarios.consume('game.text_failed')) { save(); return ok({items: items(), reply_failed: true}) }
+      const last = g.public_log[g.public_log.length - 1]
+      // Replies read only public table facts; they never move pieces or change scores.
+      const lines: L10n[] = g.lifecycle === 'ended'
+        ? [{zh: '结果已经锁定啦，不过还可以聊聊刚才那几手。', en: 'The result is locked, but we can still talk about those moves.'}]
+        : [{zh: `我看到了：${last?.summary.zh ?? '刚开局'}。聊天不会替谁出牌，轮到谁还是谁来。`, en: `I saw it: ${last?.summary.en ?? 'just started'}. Chat doesn't play for anyone — turns stay as they are.`},
+          {zh: '嗯，我听到了。不过我的下一步还是按规则来。', en: 'Heard you. My next move still follows the rules, though.'}]
+      const line = lines[hash32(`${key}|r`) % lines.length]
+      g.chat.push({id: `tc_${key}_r`, seat: speaker.seat, text: line[lang], audience: 'table', mode: 'simulated_rule_reply', kind: 'narration', language: lang, revision: g.revision})
+      save()
+      return ok({items: items(), reply_failed: false})
+    }
+  }
+  return null
+}
+export function _tempRotation() { return OFFICIAL_CHARACTERS.map(c => c.id) }
diff --git a/everwith-claude-frontend/src/mock/server/index.ts b/everwith-claude-frontend/src/mock/server/index.ts
new file mode 100644
index 00000000..49f8e6de
--- /dev/null
+++ b/everwith-claude-frontend/src/mock/server/index.ts
@@ -0,0 +1,67 @@
+/**
+ * In-process mock of `/api/companions/*`. The UI talks to it only through a
+ * fetch-compatible function, so the same parsers/clients run against mock and real.
+ */
+import {HttpError} from '../http'
+import type {MockRequest, MockResult} from '../http'
+import {scenarios} from '../scenarios'
+import {handleAccount} from './account'
+import {handleCatalog} from './catalog'
+import {handleFriends} from './friends'
+import {handleChat, startChatTicker, tickOperations} from './chat'
+import {handleStories, tickStories} from './stories'
+import {handleGames} from './games'
+import {handleRecords} from './records'
+import {handleWorks} from './works'
+import {hash32, sleep} from '../../lib/util'
+
+export const API_BASE = '/api/companions'
+type Handler = (req: MockRequest) => Promise<MockResult | null> | MockResult | null
+const HANDLERS: Handler[] = [handleAccount, handleCatalog, handleFriends, handleChat, handleStories, handleGames, handleRecords, handleWorks]
+let started = false
+function start() {
+  if (started) return
+  started = true
+  startChatTicker()
+  setInterval(tickStories, 120)
+}
+let requestCount = 0
+export const mockStats = {requests: 0, failures: 0, dropped: 0}
+
+export async function mockFetch(input: RequestInfo | URL, init: RequestInit = {}): Promise<Response> {
+  start()
+  const url = new URL(typeof input === 'string' ? input : input instanceof URL ? input.href : input.url, 'http://mock.local')
+  if (!url.pathname.startsWith(API_BASE)) return new Response(JSON.stringify({error: {code: 'not_found'}}), {status: 404, headers: {'content-type': 'application/json'}})
+  const method = (init.method ?? 'GET').toUpperCase()
+  const path = url.pathname.slice(API_BASE.length) || '/'
+  let body: Record<string, unknown> | null = null
+  if (typeof init.body === 'string' && init.body) {
+    try { body = JSON.parse(init.body) } catch { return json(400, {error: {code: 'invalid_json'}}) }
+  }
+  const signal = init.signal ?? null
+  const isStream = /\/public-stream$/.test(path)
+  if (!isStream) {
+    const jitter = 70 + hash32(`${path}|${++requestCount}`) % 140
+    await sleep(jitter + (scenarios.isOn('net.slow') ? 1500 : 0), signal ?? undefined)
+  }
+  if (signal?.aborted) throw new DOMException('Aborted', 'AbortError')
+  mockStats.requests++
+  const req: MockRequest = {method, path, query: url.searchParams, body, signal}
+  try {
+    tickOperations(); tickStories()
+    for (const handler of HANDLERS) {
+      const result = await handler(req)
+      if (!result) continue
+      if ('drop' in result) { mockStats.dropped++; throw new TypeError('Failed to fetch') }
+      if ('stream' in result) return new Response(result.stream, {status: result.status, headers: {'content-type': result.contentType}})
+      return json(result.status, result.json)
+    }
+    return json(404, {error: {code: 'not_found'}})
+  } catch (error) {
+    if (error instanceof HttpError) { mockStats.failures++; return json(error.status, {error: {code: error.code, detail: error.detail}}) }
+    throw error
+  }
+}
+function json(status: number, value: unknown) {
+  return new Response(JSON.stringify(value), {status, headers: {'content-type': 'application/json'}})
+}
diff --git a/everwith-claude-frontend/src/mock/server/records.ts b/everwith-claude-frontend/src/mock/server/records.ts
new file mode 100644
index 00000000..a8a9b9fa
--- /dev/null
+++ b/everwith-claude-frontend/src/mock/server/records.ts
@@ -0,0 +1,44 @@
+import {gameById, storyById} from '../catalog'
+import {db, now, save} from '../db'
+import {fail, ok} from '../http'
+import type {MockRequest, MockResult} from '../http'
+import {actor} from './context'
+
+/** Concrete story/game records: one row per session, never merged by work name. */
+export function handleRecords(req: MockRequest): MockResult | null {
+  const d = db()
+  if (req.path === '/records' && req.method === 'GET') {
+    const archived = req.query.get('archived') === '1'
+    const stories = Object.values(d.stories).filter(s => s.owner === actor() && !s.deleted && s.archived === archived).map(s => {
+      const def = storyById(s.story_id, s.version)!
+      return {kind: 'story', id: s.id, work_id: s.story_id, version: s.version, title: def.title, image: def.cover, status: s.status === 'read_only' ? 'read_only' : s.pending ? 'in_progress' : 'active',
+        lineup: s.cast.map(c => ({role: def.roles.find(r => r.id === c.role_id)!.title, name: c.name, friend: c.kind === 'friend'})),
+        turns: s.turns.length, created_at: s.created_at, updated_at: s.updated_at, archived: s.archived}
+    })
+    const games = Object.values(d.games).filter(g => g.owner === actor() && !g.deleted && g.archived === archived).map(g => {
+      const def = gameById(g.game_id)!
+      return {kind: 'game', id: g.id, work_id: g.game_id, version: g.profile, title: {zh: def.name, en: def.name}, image: def.poster, status: g.lifecycle,
+        lineup: g.seats.map(s => ({role: null, name: s.name, friend: s.kind === 'friend', temporary: s.kind === 'temporary'})),
+        revision: g.revision, created_at: g.created_at, updated_at: g.updated_at, archived: g.archived, rematch_of: g.rematch_of,
+        result: g.settlement ? {scores: g.settlement.scores, winners: g.settlement.winners} : null}
+    })
+    return ok({items: [...stories, ...games].sort((a, b) => b.updated_at.localeCompare(a.updated_at))})
+  }
+  const m = /^\/records\/(story|game)\/([^/]+)\/(archive|restore|delete)$/.exec(req.path)
+  if (m && req.method === 'POST') {
+    const table = m[1] === 'story' ? d.stories : d.games
+    const row = table[decodeURIComponent(m[2])] as {owner: string; archived: boolean; deleted: boolean; updated_at: string} | undefined
+    if (!row || row.owner !== actor() || row.deleted) fail(404, 'not_found')
+    if (m[3] === 'archive') row!.archived = true
+    else if (m[3] === 'restore') row!.archived = false
+    else {
+      // Delete removes this record's text and state; other records and friends are untouched.
+      row!.deleted = true
+      if (m[1] === 'story') { const s = d.stories[decodeURIComponent(m[2])]; s.turns = []; s.pending = null }
+      else { const g = d.games[decodeURIComponent(m[2])]; g.chat = []; g.public_log = []; g.state = null }
+    }
+    row!.updated_at = now(); save()
+    return ok({ok: true})
+  }
+  return null
+}
diff --git a/everwith-claude-frontend/src/mock/server/stories.ts b/everwith-claude-frontend/src/mock/server/stories.ts
new file mode 100644
index 00000000..8af68a6e
--- /dev/null
+++ b/everwith-claude-frontend/src/mock/server/stories.ts
@@ -0,0 +1,232 @@
+/**
+ * Story sessions (LOCAL MOCK). Fixed scripted beats stand in for a narrator model:
+ * “本地模拟叙事”. Each accepted turn commits text + state together (atomic); nothing
+ * uncommitted is streamed to the player. Hidden beats/clues are never serialised.
+ */
+import {characterById, storyById} from '../catalog'
+import type {StoryDef} from '../catalog'
+import {db, now, save} from '../db'
+import type {StorySessionRow, StoryTurnRow} from '../db'
+import {fail, fingerprint, int, ok, str} from '../http'
+import type {MockRequest, MockResult} from '../http'
+import {scenarios} from '../scenarios'
+import {actor, expectAccount} from './context'
+import {onFriendCreated, registerOrigin} from './friends'
+import {randomId, hash32} from '../../lib/util'
+import type {Lang} from '../../lib/util'
+
+const MAX_AI = 10
+const initialState = (def: StoryDef): StorySessionRow['state'] => ({beat: 0, objective: 0, clues: [], minutes: 0, scene: def.beats[0]?.scene ?? '', present: def.roles.map(r => r.id)})
+
+function stateFrom(def: StoryDef, turns: StoryTurnRow[]): StorySessionRow['state'] {
+  const s = initialState(def)
+  for (const t of turns) {
+    if (t.availability !== 'available') continue
+    s.minutes += t.delta.minutes
+    if (t.delta.clue && !s.clues.includes(t.delta.clue)) s.clues.push(t.delta.clue)
+    if (typeof t.delta.objective === 'number') s.objective = Math.max(s.objective, t.delta.objective + 1)
+    if (t.delta.beat !== undefined) { s.beat = t.delta.beat + 1; s.scene = def.beats[t.delta.beat]?.scene ?? s.scene }
+    // A free turn after the last beat moves to the story's ending place (if it has one).
+    else if (t.kind !== 'opening' && s.beat >= def.beats.length && def.endingScene) s.scene = def.endingScene
+  }
+  return s
+}
+/** Rows written before scenes had their own keys are re-derived from their turns. */
+const sceneKey = (def: StoryDef, s: StorySessionRow) => Object.prototype.hasOwnProperty.call(def.scenes, s.state.scene) ? s.state.scene : stateFrom(def, s.turns).scene
+
+function sessionJSON(s: StorySessionRow) {
+  const def = storyById(s.story_id, s.version)!
+  const nextBeat = def.beats[s.state.beat]
+  const lastBeat = def.beats[Math.max(0, s.state.beat - 1)]
+  const hint = (s.state.beat > 0 ? lastBeat : nextBeat)?.hint ?? null
+  const scene = sceneKey(def, s), place = def.scenes[scene] ?? null
+  return {
+    schema_version: 'everwith-story-session-v1', narration_mode: 'local_scripted_mock', id: s.id, story_id: s.story_id, version: s.version,
+    title: def.title, player_role: def.playerRole, status: s.status, archived: s.archived, revision: s.revision,
+    head_turn_id: s.turns[s.turns.length - 1]?.turn_id ?? null, created_at: s.created_at, updated_at: s.updated_at, language: s.language,
+    cast: s.cast.map(c => {
+      const role = def.roles.find(r => r.id === c.role_id)!
+      const ch = characterById(c.character_id)
+      return {role_id: c.role_id, role_title: role.title, kind: c.kind, character_id: c.character_id, character_name: ch?.name ?? c.name,
+        friend_id: c.friend_id, friend_epoch: c.friend_epoch, name: c.name, avatar: ch?.avatar ?? null, live2d: ch?.live2d ?? null, replaceable: role.replaceable}
+    }),
+    turns: s.turns.map(t => ({turn_id: t.turn_id, kind: t.kind, input: t.input_availability === 'withdrawn' ? null : t.input, input_availability: t.input_availability,
+      language: t.language, created_at: t.created_at, delta: {minutes: t.delta.minutes, clue: t.delta.clue ? def.beats.find(b => b.clue?.id === t.delta.clue)?.clue?.label ?? null : null, objective: t.delta.objective ?? null},
+      segments: t.segments.map(g => ({segment_id: g.segment_id, kind: g.kind, role_id: g.role_id, text: g.text}))})),
+    state: {
+      objectives: def.objectives.map((o, i) => ({text: o, done: i < s.state.objective, current: i === s.state.objective})),
+      clues: s.state.clues.map(id => ({id, label: def.beats.find(b => b.clue?.id === id)!.clue!.label})),
+      minutes: s.state.minutes, scene, scene_image: place?.image ?? null, scene_position: place?.position ?? null, scene_label: place?.label ?? null, present: s.state.present, hint,
+      open_mode: s.state.beat >= def.beats.length,
+    },
+    pending: s.pending ? {operation_id: s.pending.op_id, kind: s.pending.kind, text: s.pending.text, status: s.pending.status} : null,
+  }
+}
+
+function respond(s: StorySessionRow, kind: 'input' | 'continue', text: string | null, lang: Lang): StoryTurnRow {
+  const def = storyById(s.story_id, s.version)!
+  const beatIndex = s.state.beat, beat = def.beats[beatIndex]
+  const segs: StoryTurnRow['segments'] = []
+  const seg = (k: StoryTurnRow['segments'][number]['kind'], textValue: string, role: string | null = null) => segs.push({segment_id: randomId('seg', 6), kind: k, role_id: role, text: textValue})
+  const sinceBeat = (() => { let n = 0; for (let i = s.turns.length - 1; i >= 0; i--) { const t = s.turns[i]; if (t.delta.beat !== undefined) break; if (t.kind === 'input') n++ } return n })()
+  const matches = !!beat && !!text && beat.keywords.some(k => text.toLowerCase().includes(k.toLowerCase()))
+  if (beat && (kind === 'continue' || matches || sinceBeat >= 2)) {
+    if (kind === 'input' && text) seg('narration', lang === 'zh' ? `你的行动被接受了。` : 'Your action goes ahead.')
+    seg('narration', beat.narration[lang])
+    for (const line of beat.lines) {
+      const body = line.text[lang]
+      if (body.startsWith('*')) {
+        const end = body.indexOf('*', 1)
+        seg('action', body.slice(1, end), line.role)
+        seg('dialogue', body.slice(end + 1).trim(), line.role)
+      } else seg('dialogue', body, line.role)
+    }
+    return {turn_id: randomId('turn', 6), kind, input: text, input_availability: 'available', segments: segs, availability: 'available', language: lang, created_at: now(),
+      delta: {minutes: beat.minutes, clue: beat.clue?.id, objective: beat.objective, beat: beatIndex}}
+  }
+  // A smaller, local response: acknowledges the action without inventing progress.
+  const present = def.roles[hash32(`${s.id}|${s.turns.length}`) % def.roles.length]
+  if (kind === 'continue') seg('narration', lang === 'zh' ? '片刻过去，周围安静下来。没有新的事情发生——也许该由你来做点什么。' : 'A moment passes. Nothing new happens — perhaps it is your move.')
+  else {
+    seg('narration', lang === 'zh' ? '你照自己的想法行动。周围的人注意到了，但局面暂时没有变化。' : 'You act on your own idea. The others notice, but nothing changes yet.')
+    seg('action', lang === 'zh' ? '看了你一眼。' : 'Glances at you.', present.id)
+    seg('dialogue', lang === 'zh' ? '这样做也行。不过线索恐怕不在这里。' : 'Fair enough. Though I doubt the answer is here.', present.id)
+  }
+  return {turn_id: randomId('turn', 6), kind, input: text, input_availability: 'available', segments: segs, availability: 'available', language: lang, created_at: now(), delta: {minutes: kind === 'continue' ? 3 : 2}}
+}
+
+export function tickStories() {
+  const d = db(), t = Date.now()
+  let changed = false
+  for (const s of Object.values(d.stories)) {
+    const p = s.pending
+    if (!p || !['accepted', 'validating'].includes(p.status) || t < p.commit_at) continue
+    if (p.fail) { p.status = 'retryable_failed'; p.fail = false; changed = true; continue }
+    const turn = respond(s, p.kind, p.text, p.language)
+    s.turns.push(turn); s.revision++; s.updated_at = now()
+    s.state = stateFrom(storyById(s.story_id, s.version)!, s.turns)
+    s.ops = {...s.ops, [p.op_id]: {key: p.key, status: 'committed', turn_id: turn.turn_id}}
+    s.pending = null; changed = true
+  }
+  if (changed) save()
+}
+
+function ownedStory(id: string) {
+  const s = db().stories[id]
+  if (!s || s.owner !== actor() || s.deleted) fail(404, 'not_found')
+  return s
+}
+
+registerOrigin('story', (origin, owner, sourceId, version) => {
+  const s = db().stories[String(origin.session_id)]
+  if (!s || s.owner !== owner || s.deleted) fail(404, 'not_found')
+  const role = s!.cast.find(c => c.role_id === origin.role_id)
+  if (!role || role.character_id !== sourceId || version !== '1') fail(422, 'origin_mismatch')
+  if (!origin.separate && role!.kind === 'friend') fail(409, 'role_already_bound')
+  const def = storyById(s!.story_id, s!.version)!
+  return {kind: 'story', session_id: s!.id, label: {zh: `来自故事《${def.title.zh}》`, en: `From the story “${def.title.en}”`}}
+})
+onFriendCreated((friend, origin) => {
+  if (origin.kind !== 'story' || origin.separate) return
+  const s = db().stories[String(origin.session_id)]
+  const role = s?.cast.find(c => c.role_id === origin.role_id)
+  // F2: the current person becomes this friend in the same commit (no re-cast, no restart).
+  if (role && role.kind === 'npc') { role.kind = 'friend'; role.friend_id = friend.id; role.friend_epoch = friend.epoch; role.name = friend.name; s!.revision++ }
+})
+
+export function handleStories(req: MockRequest): MockResult | null {
+  const d = db()
+  tickStories()
+  if (req.path === '/story-sessions' && req.method === 'POST') {
+    expectAccount(req.body)
+    const key = str(req.body, 'key', 128), storyId = str(req.body, 'story_id', 80), version = str(req.body, 'version', 20)
+    const def = storyById(storyId, version)
+    if (!def) fail(404, 'not_found')
+    const castInput = Array.isArray(req.body?.cast) ? req.body!.cast as {role_id: string; friend_id: string; friend_epoch: number}[] : []
+    const language = req.body?.language === 'en' ? 'en' : 'zh'
+    const fp = fingerprint({storyId, version, castInput})
+    const existing = Object.values(d.stories).find(s => s.owner === actor() && s.key === key)
+    if (existing) { if (existing.fingerprint !== fp) fail(409, 'idempotency_conflict'); return ok(sessionJSON(existing)) }
+    // Strong checks: open seats only, one seat per friend, AI seats ≤ 10, locked roles stay.
+    const seen = new Set<string>()
+    for (const c of castInput) {
+      const role = def!.roles.find(r => r.id === c.role_id)
+      if (!role) fail(422, 'unknown_role')
+      if (!role!.replaceable) fail(422, 'role_locked', {role: c.role_id})
+      if (seen.has(c.friend_id)) fail(422, 'friend_already_cast', {friend: c.friend_id})
+      seen.add(c.friend_id)
+      const f = d.friends[c.friend_id]
+      if (!f || f.owner !== actor() || f.status !== 'active') fail(422, 'friend_unavailable', {friend: c.friend_id})
+      if (f!.epoch !== c.friend_epoch) fail(409, 'friend_epoch_changed', {friend: c.friend_id})
+    }
+    if (new Set(castInput.map(c => c.role_id)).size !== castInput.length) fail(422, 'role_cast_twice')
+    if (def!.roles.length > MAX_AI) fail(422, 'too_many_ai')
+    const cast = def!.roles.map(r => {
+      const chosen = castInput.find(c => c.role_id === r.id)
+      if (chosen) { const f = d.friends[chosen.friend_id]; return {role_id: r.id, kind: 'friend' as const, character_id: f.source_id, friend_id: f.id, friend_epoch: f.epoch, name: f.name} }
+      const ch = characterById(r.defaultCharacter)!
+      return {role_id: r.id, kind: 'npc' as const, character_id: ch.id, friend_id: null, friend_epoch: null, name: ch.name}
+    })
+    const opening: StoryTurnRow = {turn_id: randomId('turn', 6), kind: 'opening', input: null, input_availability: 'available', availability: 'available', language, created_at: now(), delta: {minutes: 0},
+      segments: [{segment_id: randomId('seg', 6), kind: 'narration', role_id: null, text: def!.opening[language]}]}
+    const s: StorySessionRow = {id: randomId('ss', 8), owner: actor(), story_id: def!.id, version: def!.version, key, fingerprint: fp, cast, turns: [opening], revision: 1,
+      status: 'active', archived: false, deleted: false, state: initialState(def!), created_at: now(), updated_at: now(), language, pending: null, ops: {}}
+    d.stories[s.id] = s; save()
+    return ok(sessionJSON(s), 201)
+  }
+  const one = /^\/story-sessions\/([^/]+)$/.exec(req.path)
+  if (one && req.method === 'GET') return ok(sessionJSON(ownedStory(decodeURIComponent(one[1]))))
+  const turns = /^\/story-sessions\/([^/]+)\/turns$/.exec(req.path)
+  if (turns && req.method === 'POST') {
+    const s = ownedStory(decodeURIComponent(turns[1]))
+    if (s.status !== 'active') fail(409, 'session_read_only')
+    const key = str(req.body, 'key', 128), kind = req.body?.kind === 'continue' ? 'continue' as const : 'input' as const
+    const text = kind === 'input' ? str(req.body, 'text', 2000).trim() : null
+    if (kind === 'input' && !text) fail(422, 'empty_input')
+    const ops = s.ops ?? {}
+    const done = Object.entries(ops).find(([, v]) => v.key === key)
+    if (done) return ok({operation: {operation_id: done[0], status: done[1].status}, session: sessionJSON(s)})
+    if (s.pending) {
+      if (s.pending.key === key) return ok({operation: {operation_id: s.pending.op_id, status: s.pending.status}, session: sessionJSON(s)})
+      fail(409, 'operation_pending')
+    }
+    if (int(req.body, 'expected_revision') !== s.revision) fail(409, 'stale_revision')
+    const language = req.body?.language === 'en' ? 'en' as const : 'zh' as const
+    s.pending = {op_id: randomId('sop', 8), key, kind, text, status: 'validating', commit_at: Date.now() + 1500, language}
+    if (scenarios.consume('story.retryable_failure')) s.pending.fail = true
+    save()
+    return ok({operation: {operation_id: s.pending.op_id, status: 'validating'}, session: sessionJSON(s)}, 202)
+  }
+  const control = /^\/story-sessions\/([^/]+)\/operations\/([^/]+)\/(cancel|retry)$/.exec(req.path)
+  if (control && req.method === 'POST') {
+    const s = ownedStory(decodeURIComponent(control[1]))
+    const opId = decodeURIComponent(control[2])
+    if (!s.pending || s.pending.op_id !== opId) {
+      const ops = s.ops ?? {}
+      if (ops[opId]) return ok({operation: {operation_id: opId, status: ops[opId].status}, session: sessionJSON(s)})
+      fail(404, 'not_found')
+    }
+    if (control[3] === 'cancel') {
+      const op = s.pending!; s.pending = null; s.ops = {...s.ops, [op.op_id]: {key: op.key, status: 'cancelled', turn_id: null}}; save()
+      return ok({operation: {operation_id: op.op_id, status: 'cancelled'}, session: sessionJSON(s), restored_input: op.text})
+    }
+    if (s.pending!.status !== 'retryable_failed') fail(409, 'operation_not_retryable')
+    s.pending!.status = 'validating'; s.pending!.commit_at = Date.now() + 1500; save()
+    return ok({operation: {operation_id: s.pending!.op_id, status: 'validating'}, session: sessionJSON(s)})
+  }
+  const rollback = /^\/story-sessions\/([^/]+)\/rollback$/.exec(req.path)
+  if (rollback && req.method === 'POST') {
+    const s = ownedStory(decodeURIComponent(rollback[1]))
+    if (s.status !== 'active') fail(409, 'session_read_only')
+    if (s.pending) fail(409, 'operation_pending')
+    if (int(req.body, 'expected_revision') !== s.revision) fail(409, 'stale_revision')
+    const idx = s.turns.findIndex(t => t.turn_id === req.body?.turn_id)
+    if (idx <= 0 || s.turns[idx].kind !== 'input') fail(422, 'rollback_target_invalid')
+    const draft = s.turns[idx].input
+    s.turns = s.turns.slice(0, idx); s.revision++; s.updated_at = now()
+    s.state = stateFrom(storyById(s.story_id, s.version)!, s.turns); save()
+    return ok({session: sessionJSON(s), restored_draft: draft})
+  }
+  return null
+}
+export {sessionJSON as storySessionJSON}
diff --git a/everwith-claude-frontend/src/mock/server/works.ts b/everwith-claude-frontend/src/mock/server/works.ts
new file mode 100644
index 00000000..e09d654a
--- /dev/null
+++ b/everwith-claude-frontend/src/mock/server/works.ts
@@ -0,0 +1,184 @@
+/**
+ * Creation studio (LOCAL MOCK): works, drafts, immutable versions, explicit sharing
+ * and isolated previews. “AI 改稿” here is a deterministic local template, labelled
+ * as such — no model is called. Previews never touch friends, chats or memories.
+ */
+import {OFFICIAL_CHARACTERS} from '../catalog'
+import {db, now, save} from '../db'
+import type {WorkRow} from '../db'
+import {fail, int, ok, str} from '../http'
+import type {MockRequest, MockResult} from '../http'
+import {previewReply} from '../replies'
+import {actor, requireAccount} from './context'
+import {hash32, randomId} from '../../lib/util'
+import type {Lang} from '../../lib/util'
+import {WORK_COVERS, isWorkCover} from '../../art/generated'
+
+export const VOICES = ['preset-neutral', 'preset-warm', 'preset-bright', 'preset-low', 'preset-calm']
+export function blankDraft(type: 'story' | 'character', name: string): Record<string, unknown> {
+  if (type === 'character') return {name, tagline: '', intro: '', persona: '', habit: '', background: '', opening: '', voice: 'preset-neutral', portrait: 'placeholder'}
+  return {title: name, intro: '', genre: '', content_note: '', setting: '', player_entry: '', opening: '', narrative: 'balanced', mode: 'open',
+    roles: [{id: 'role-1', title: '', description: '', character: 'official-lena', replaceable: true, locked: false}],
+    worldbook: [], items: [], stages: []}
+}
+export function validateDraft(type: 'story' | 'character', d: Record<string, unknown>): {field: string; code: string}[] {
+  const errors: {field: string; code: string}[] = []
+  const s = (k: string) => typeof d[k] === 'string' ? (d[k] as string).trim() : ''
+  // Cover: optional; when present it must be one of the preset ids (never a URL).
+  if (d.cover !== undefined && !isWorkCover(d.cover)) errors.push({field: 'cover', code: 'invalid'})
+  if (type === 'character') {
+    if (!s('name')) errors.push({field: 'name', code: 'required'})
+    if ([...s('name')].length > 40) errors.push({field: 'name', code: 'too_long'})
+    if (!s('intro')) errors.push({field: 'intro', code: 'required'})
+    if (!s('persona')) errors.push({field: 'persona', code: 'required'})
+    if (!VOICES.includes(String(d.voice))) errors.push({field: 'voice', code: 'invalid'})
+  } else {
+    if (!s('title')) errors.push({field: 'title', code: 'required'})
+    if (!s('opening')) errors.push({field: 'opening', code: 'required'})
+    const roles = Array.isArray(d.roles) ? d.roles as Record<string, unknown>[] : []
+    if (!roles.length) errors.push({field: 'roles', code: 'required'})
+    if (roles.length > 10) errors.push({field: 'roles', code: 'too_many'})
+    roles.forEach((r, i) => {
+      if (typeof r.title !== 'string' || !r.title.trim()) errors.push({field: `roles.${i}.title`, code: 'required'})
+      if (!OFFICIAL_CHARACTERS.some(c => c.id === r.character)) errors.push({field: `roles.${i}.character`, code: 'invalid'})
+    })
+    if (!['open', 'ending'].includes(String(d.mode))) errors.push({field: 'mode', code: 'invalid'})
+  }
+  return errors
+}
+function workJSON(w: WorkRow) {
+  const latest = w.versions[w.versions.length - 1] ?? null
+  return {id: w.id, type: w.type, name: w.name, created_at: w.created_at, updated_at: w.updated_at, draft: w.draft, draft_revision: w.draft_revision,
+    versions: w.versions.map(v => ({version: v.version, saved_at: v.saved_at})), latest_version: latest?.version ?? null,
+    dirty: !latest || JSON.stringify(latest.draft) !== JSON.stringify(w.draft), errors: validateDraft(w.type, w.draft), share: w.share,
+    owner_kind: actor().startsWith('acc_') ? 'account' : 'guest'}
+}
+function ownedWork(id: string) {
+  const w = db().works[id]
+  if (!w || w.owner !== actor() || w.deleted) fail(404, 'not_found')
+  return w
+}
+function assist(type: 'story' | 'character', draft: Record<string, unknown>, instruction: string, lang: Lang): {draft: Record<string, unknown>; summary: string[]} {
+  const next = structuredClone(draft), summary: string[] = []
+  const set = (k: string, v: unknown, label: string) => { next[k] = v; summary.push(label) }
+  const empty = (k: string) => typeof next[k] !== 'string' || !(next[k] as string).trim()
+  const zh = lang === 'zh'
+  if (instruction === 'fill') {
+    if (type === 'character') {
+      const n = String(next.name || (zh ? '无名角色' : 'Unnamed'))
+      if (empty('tagline')) set('tagline', zh ? '安静的观察者' : 'A quiet observer', zh ? '补全一句话身份' : 'Filled tagline')
+      if (empty('intro')) set('intro', zh ? `${n}习惯先听完再开口，说话不绕弯子。` : `${n} listens first and speaks plainly.`, zh ? '补全公开介绍' : 'Filled public intro')
+      if (empty('persona')) set('persona', zh ? '重视约定；不喜欢被催促；对熟悉的人会开玩笑。' : 'Values promises; dislikes being rushed; jokes with people they trust.', zh ? '补全人物设定' : 'Filled persona')
+      if (empty('habit')) set('habit', zh ? '说话前会停顿一下' : 'Pauses briefly before speaking', zh ? '补全表达习惯' : 'Filled speaking habit')
+      if (empty('opening')) set('opening', zh ? '*抬起头。*\n你来了。' : '*Looks up.*\nThere you are.', zh ? '补全开场' : 'Filled opening')
+    } else {
+      if (empty('intro')) set('intro', zh ? '一个关于约定与误会的小故事。' : 'A small story about a promise and a misunderstanding.', zh ? '补全简介' : 'Filled summary')
+      if (empty('setting')) set('setting', zh ? '雨夜，一座老剧院的后台。' : 'A rainy night backstage at an old theatre.', zh ? '补全世界设定' : 'Filled setting')
+      if (empty('player_entry')) set('player_entry', zh ? '玩家以受邀客人的身份进入。' : 'The player enters as an invited guest.', zh ? '补全玩家入场' : 'Filled player entry')
+      if (empty('opening')) set('opening', zh ? '雨声很大，后台的门半开着。' : 'The rain is loud; the backstage door stands ajar.', zh ? '补全开场' : 'Filled opening')
+      const roles = next.roles as Record<string, unknown>[]
+      roles.forEach((r, i) => { if (typeof r.title !== 'string' || !r.title.trim()) { r.title = zh ? `角色 ${i + 1}` : `Role ${i + 1}`; summary.push(zh ? `补全角色位 ${i + 1} 名称` : `Named role ${i + 1}`) } })
+    }
+  } else if (instruction === 'shorter') {
+    const k = type === 'character' ? 'intro' : 'intro'
+    if (!empty(k)) { const t = [...String(next[k])]; if (t.length > 24) set(k, t.slice(0, 24).join('') + '…', zh ? '缩短简介' : 'Shortened summary') }
+  } else if (instruction === 'add_role' && type === 'story') {
+    const roles = next.roles as Record<string, unknown>[]
+    if (roles.length >= 10) summary.push(zh ? '已达到 10 个 AI 位，未添加' : 'Already 10 AI roles; nothing added')
+    else { roles.push({id: `role-${roles.length + 1}`, title: zh ? '新角色位' : 'New role', description: '', character: 'official-nora', replaceable: true, locked: false}); summary.push(zh ? '新增一个角色位（默认 Nora，可替换）' : 'Added a role (Nora by default, replaceable)') }
+  } else if (instruction === 'warmer' && type === 'character') {
+    set('habit', `${String(next.habit || '')}${next.habit ? '；' : ''}${zh ? '会用对方的名字称呼对方' : 'uses your name when talking'}`, zh ? '表达更亲近' : 'Warmer speaking habit')
+  }
+  if (!summary.length) summary.push(zh ? '没有可修改的地方' : 'Nothing to change')
+  return {draft: next, summary}
+}
+
+export function handleWorks(req: MockRequest): MockResult | null {
+  const d = db()
+  if (req.path === '/works' && req.method === 'GET') return ok({items: Object.values(d.works).filter(w => w.owner === actor() && !w.deleted).sort((a, b) => b.updated_at.localeCompare(a.updated_at)).map(workJSON)})
+  if (req.path === '/works' && req.method === 'POST') {
+    const key = str(req.body, 'key', 128), type = req.body?.type === 'character' ? 'character' as const : req.body?.type === 'story' ? 'story' as const : fail(422, 'type_required')
+    const name = str(req.body, 'name', 60).trim()
+    if (!name) fail(422, 'name_required')
+    const existing = Object.values(d.works).find(w => w.owner === actor() && w.key === key)
+    if (existing) return ok(workJSON(existing))
+    const id = randomId('work', 6)
+    // A new work starts with one of the preset covers (stable per work); the editor can change it.
+    const w: WorkRow = {id, owner: actor(), type: type as 'story' | 'character', name, created_at: now(), updated_at: now(), key,
+      draft: {...blankDraft(type as 'story' | 'character', name), cover: WORK_COVERS[hash32(id) % WORK_COVERS.length]}, draft_revision: 1, versions: [], share: {enabled: false, version: null}, deleted: false}
+    d.works[w.id] = w; save()
+    return ok(workJSON(w), 201)
+  }
+  const one = /^\/works\/([^/]+)$/.exec(req.path)
+  if (one && req.method === 'GET') return ok(workJSON(ownedWork(decodeURIComponent(one[1]))))
+  const sub = /^\/works\/([^/]+)\/(draft|save|share|assist)$/.exec(req.path)
+  if (sub) {
+    const w = ownedWork(decodeURIComponent(sub[1]))
+    if (sub[2] === 'draft' && req.method === 'PUT') {
+      if (int(req.body, 'base_revision') !== w.draft_revision) fail(409, 'draft_revision_changed', {current: w.draft_revision})
+      const draft = req.body?.draft
+      if (!draft || typeof draft !== 'object' || Array.isArray(draft)) fail(400, 'invalid_request')
+      if (JSON.stringify(draft).length > 60000) fail(413, 'draft_too_large')
+      w.draft = draft as Record<string, unknown>; w.draft_revision++; w.updated_at = now()
+      if (w.type === 'character' && typeof w.draft.name === 'string' && w.draft.name.trim()) w.name = w.draft.name.trim()
+      if (w.type === 'story' && typeof w.draft.title === 'string' && w.draft.title.trim()) w.name = w.draft.title.trim()
+      save(); return ok(workJSON(w))
+    }
+    if (sub[2] === 'save' && req.method === 'POST') {
+      requireAccount()
+      if (int(req.body, 'draft_revision') !== w.draft_revision) fail(409, 'draft_revision_changed', {current: w.draft_revision})
+      const errors = validateDraft(w.type, w.draft)
+      const latest = w.versions[w.versions.length - 1]
+      if (latest && JSON.stringify(latest.draft) === JSON.stringify(w.draft)) return ok({...workJSON(w), saved_version: latest.version, unchanged: true})
+      // Incomplete drafts may be saved; they simply cannot be previewed or shared.
+      w.versions.push({version: (latest?.version ?? 0) + 1, draft: structuredClone(w.draft), saved_at: now()}); w.updated_at = now(); save()
+      return ok({...workJSON(w), saved_version: w.versions[w.versions.length - 1].version, unchanged: false, errors})
+    }
+    if (sub[2] === 'share' && req.method === 'POST') {
+      requireAccount()
+      const enabled = req.body?.enabled === true
+      if (enabled) {
+        const version = int(req.body, 'version')
+        const v = w.versions.find(x => x.version === version)
+        if (!v) fail(422, 'version_not_saved')
+        if (validateDraft(w.type, v!.draft).length) fail(422, 'share_check_failed')
+        w.share = {enabled: true, version}
+      } else w.share = {enabled: false, version: w.share.version}
+      w.updated_at = now(); save(); return ok(workJSON(w))
+    }
+    if (sub[2] === 'assist' && req.method === 'POST') {
+      const instruction = str(req.body, 'instruction', 40)
+      const lang: Lang = req.body?.language === 'en' ? 'en' : 'zh'
+      const draft = (req.body?.draft ?? w.draft) as Record<string, unknown>
+      return ok({...assist(w.type, draft, instruction, lang), mode: 'local_template_mock'})
+    }
+  }
+  if (req.path === '/previews' && req.method === 'POST') {
+    const w = ownedWork(str(req.body, 'work_id', 80))
+    const rev = int(req.body, 'draft_revision')
+    if (rev !== w.draft_revision) fail(409, 'draft_revision_changed', {current: w.draft_revision})
+    if (validateDraft(w.type, w.draft).length) fail(422, 'preview_check_failed')
+    const p = {id: randomId('pv', 6), owner: actor(), work_id: w.id, draft_revision: rev, snapshot: structuredClone(w.draft), turns: [] as {id: string; role: 'player' | 'character'; text: string; language: Lang}[], created_at: now()}
+    const lang: Lang = req.body?.language === 'en' ? 'en' : 'zh'
+    const opening = String(w.type === 'character' ? w.draft.opening || '' : w.draft.opening || '')
+    if (opening) p.turns.push({id: randomId('pt', 6), role: 'character', text: opening, language: lang})
+    d.previews[p.id] = p; save()
+    return ok(p, 201)
+  }
+  const pv = /^\/previews\/([^/]+)(\/turns)?$/.exec(req.path)
+  if (pv) {
+    const p = d.previews[decodeURIComponent(pv[1])]
+    if (!p || p.owner !== actor()) fail(404, 'not_found')
+    if (!pv[2] && req.method === 'GET') return ok(p)
+    if (pv[2] && req.method === 'POST') {
+      const text = str(req.body, 'text', 2000).trim(), key = str(req.body, 'key', 128)
+      if (!text) fail(422, 'empty_input')
+      if (p!.turns.some(t => t.id === key)) return ok(p)
+      const lang: Lang = req.body?.language === 'en' ? 'en' : 'zh'
+      p!.turns.push({id: key, role: 'player', text, language: lang})
+      p!.turns.push({id: `${key}_r`, role: 'character', text: previewReply(p!.snapshot, text, lang, p!.turns.length), language: lang})
+      save(); return ok(p)
+    }
+  }
+  return null
+}
diff --git a/everwith-claude-frontend/src/styles/base.css b/everwith-claude-frontend/src/styles/base.css
new file mode 100644
index 00000000..13c9bcdc
--- /dev/null
+++ b/everwith-claude-frontend/src/styles/base.css
@@ -0,0 +1,138 @@
+/* Everwith · Claude rebuild. Dark, quiet surfaces; faces and text carry the weight.
+   Palette derives from the candidate shell tokens (#241613/#31211d/#2a211e, #f5f0ed/#c7b8b0,
+   #e8dcc8 primary, #e3b997 focus) and is re-balanced for contrast. */
+:root{
+  color-scheme:dark;
+  --bg:#1c1210;--bg-2:#241815;--bg-3:#2e201c;--bg-4:#3a2a25;--bg-sunk:#150d0b;
+  --line:#ffffff14;--line-2:#ffffff24;--hover:#ffffff0b;--selected:#ffffff12;
+  --text:#f5f0ed;--text-2:#cdbcb2;--text-3:#a08f86;--text-disabled:#7d706a;
+  --primary:#e8dcc8;--primary-hover:#f6eddf;--on-primary:#221a14;
+  --accent:#e3b997;--accent-2:#c99a72;--accent-soft:#e3b99722;
+  --success:#accab5;--warning:#e5b87e;--danger:#f0a6a6;--danger-strong:#c4574f;
+  --mock:#d9c38f;--mock-bg:#3a3020;
+  --radius-s:6px;--radius:8px;--radius-l:12px;--radius-xl:16px;
+  --control:44px;--gap:8px;--icon:20px;
+  --font-ui:"Inter",system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
+  --font-story:"Newsreader",Georgia,"Songti SC","Noto Serif CJK SC","Source Han Serif SC",serif;
+  --shadow:0 18px 50px #0009,0 2px 8px #0006;
+  --nav-w:232px;--nav-w-collapsed:72px;
+  --focus-ring:0 0 0 2px var(--bg),0 0 0 4px var(--accent);
+}
+*,*::before,*::after{box-sizing:border-box}
+html,body,#root{height:100%}
+body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.55 var(--font-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
+button,input,textarea,select{font:inherit;color:inherit}
+a{color:inherit}
+img{max-width:100%}
+:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-s)}
+::selection{background:#e3b99755}
+[hidden]{display:none!important}
+.ew-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+.ew-skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:var(--radius);background:var(--primary);color:var(--on-primary);font-weight:600;text-decoration:none}
+.ew-skip:focus{top:12px}
+
+/* Buttons */
+.ew-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control);padding:0 18px;border-radius:var(--radius);border:1px solid var(--line-2);background:var(--bg-3);color:var(--text);font-weight:550;font-size:14px;line-height:20px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
+.ew-btn:hover{background:var(--bg-4)}
+.ew-btn:disabled,.ew-btn[aria-disabled="true"]{cursor:not-allowed;color:var(--text-disabled);background:var(--bg-2);border-color:var(--line)}
+.ew-btn.primary{background:var(--primary);color:var(--on-primary);border-color:transparent}
+.ew-btn.primary:hover{background:var(--primary-hover)}
+.ew-btn.primary:disabled{background:#6f665c;color:#2a241f}
+.ew-btn.ghost{background:transparent;border-color:transparent;color:var(--text-2)}
+.ew-btn.ghost:hover{background:var(--hover);color:var(--text)}
+.ew-btn.outline{background:transparent}
+.ew-btn.danger{background:#5b2621;border-color:#8a3b33;color:#ffd9d4}
+.ew-btn.danger:hover{background:#6e2e28}
+.ew-btn.small{min-height:36px;padding:0 12px;font-size:13px}
+.ew-btn.wide{width:100%}
+.ew-btn svg{width:18px;height:18px;flex:0 0 auto}
+.ew-btn[aria-pressed="true"],.ew-btn.is-selected{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}
+.ew-icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:var(--radius);border:1px solid transparent;background:transparent;color:var(--text-2);cursor:pointer}
+.ew-icon-btn:hover{background:var(--hover);color:var(--text)}
+.ew-icon-btn:disabled{color:var(--text-disabled);cursor:not-allowed}
+.ew-icon-btn[aria-pressed="true"]{background:var(--accent-soft);color:var(--text);border-color:#e3b99755}
+.ew-icon-btn svg{width:var(--icon);height:var(--icon)}
+.ew-link{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
+
+/* Inputs */
+.ew-field{display:grid;gap:6px;min-width:0}
+.ew-field>span,.ew-label{font-size:13px;font-weight:600;color:var(--text-2)}
+.ew-field small{color:var(--text-3);font-size:12px}
+.ew-input,.ew-textarea,.ew-select{width:100%;min-height:var(--control);padding:10px 12px;border-radius:var(--radius);border:1px solid var(--line-2);background:var(--bg-sunk);color:var(--text);transition:border-color .15s}
+.ew-textarea{min-height:96px;resize:vertical;line-height:1.55}
+.ew-input:focus,.ew-textarea:focus,.ew-select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #e3b99733}
+.ew-input[aria-invalid="true"],.ew-textarea[aria-invalid="true"]{border-color:var(--danger)}
+.ew-error-text{color:var(--danger);font-size:13px}
+.ew-check{display:inline-flex;align-items:center;gap:8px;min-height:36px;cursor:pointer;color:var(--text-2)}
+.ew-check input{width:18px;height:18px;accent-color:var(--accent)}
+
+/* Chips & badges */
+.ew-chip{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 9px;border-radius:999px;background:var(--bg-4);color:var(--text-2);font-size:12px;font-weight:550;line-height:18px;white-space:nowrap}
+.ew-chip.mock{background:var(--mock-bg);color:var(--mock)}
+.ew-chip.friend{background:#2e3a30;color:#cfe3d2}
+.ew-chip.temp{background:#2f2c3b;color:#d8d2ef}
+.ew-chip.warn{background:#4a3520;color:#f3cf9c}
+.ew-chip.danger{background:#4b2522;color:#ffcfc8}
+.ew-chip.ok{background:#25392d;color:#c8e8d1}
+.ew-chip svg{width:14px;height:14px}
+
+/* Portraits */
+.ew-portrait{display:block;object-fit:cover;background:var(--bg-3)}
+.ew-portrait.is-placeholder{display:grid;place-items:center;background:linear-gradient(160deg,#3a2a25,#2a1d19);color:var(--text-3);font:600 22px/1 var(--font-ui)}
+.ew-avatar{display:block;width:40px;height:40px;border-radius:50%;flex:0 0 40px;overflow:hidden;background:var(--bg-3)}
+.ew-avatar .ew-portrait{width:100%;height:100%;object-position:50% 12%}
+.ew-avatar.small{width:28px;height:28px;flex-basis:28px}
+.ew-avatar.small .ew-portrait.is-placeholder{font-size:13px}
+.ew-avatar.large{width:56px;height:56px;flex-basis:56px}
+/* Persona picture choices (objects, never people). */
+.ew-avatar-picker{display:flex;flex-wrap:wrap;gap:8px}
+.ew-avatar-choice{display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;overflow:hidden;border:2px solid var(--line-2);background:var(--bg-3);color:var(--text-2);font-weight:650;cursor:pointer}
+.ew-avatar-choice img{display:block;width:100%;height:100%;object-fit:cover}
+.ew-avatar-choice:hover{border-color:var(--text-3)}
+.ew-avatar-choice[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px #e3b99744}
+
+/* Panels */
+.ew-panel{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-l)}
+.ew-card-title{margin:0;font-size:16px;font-weight:650;line-height:1.35}
+.ew-muted{color:var(--text-2)}
+.ew-faint{color:var(--text-3)}
+.ew-prose{color:var(--text-2);line-height:1.65}
+.ew-prose p{margin:0 0 10px}
+.ew-notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius);background:var(--bg-3);border:1px solid var(--line-2);color:var(--text-2);font-size:14px}
+.ew-notice svg{flex:0 0 18px;width:18px;height:18px;margin-top:2px}
+.ew-notice.warn{background:#3a2a18;border-color:#7a5a2c;color:#f4dcb8}
+.ew-notice.danger{background:#3b1d1a;border-color:#7a3a33;color:#ffd6cf}
+.ew-notice.ok{background:#1f2f25;border-color:#3f6a4e;color:#d4eedb}
+.ew-notice.mock{background:#2c2618;border-color:#6b5a32;color:#ecdcb5}
+.ew-notice .ew-notice-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
+.ew-empty{display:grid;justify-items:center;gap:12px;padding:56px 24px;text-align:center;color:var(--text-2)}
+.ew-empty h2{margin:0;font-size:18px;color:var(--text)}
+.ew-empty p{margin:0;max-width:44ch}
+/* Generated spot illustrations (decorative; the heading carries the meaning). */
+.ew-spot{display:block;width:clamp(120px,20vw,168px);height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 12px 22px #0008);user-select:none}
+.ew-spot.small{width:64px;flex:0 0 64px;filter:none}
+.ew-load-failed{display:grid;justify-items:center;gap:14px;padding:28px 0}
+.ew-load-failed>.ew-notice{width:min(560px,100%)}
+.ew-spinner{width:20px;height:20px;border-radius:50%;border:2px solid #ffffff2a;border-top-color:var(--accent);animation:ew-spin .9s linear infinite;flex:0 0 auto}
+@keyframes ew-spin{to{transform:rotate(360deg)}}
+.ew-skeleton{background:linear-gradient(90deg,#ffffff08,#ffffff12,#ffffff08);background-size:200% 100%;animation:ew-shimmer 1.4s ease infinite;border-radius:var(--radius)}
+@keyframes ew-shimmer{to{background-position:-200% 0}}
+
+/* Dialogs */
+.ew-dialog{padding:0;border:0;background:transparent;color:var(--text);max-width:min(560px,calc(100vw - 32px));width:100%;max-height:calc(100vh - 48px)}
+.ew-dialog.is-wide{max-width:min(860px,calc(100vw - 32px))}
+.ew-dialog::backdrop{background:#0b0605b8;backdrop-filter:blur(3px)}
+.ew-dialog-panel{display:flex;flex-direction:column;max-height:calc(100vh - 48px);background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-xl);box-shadow:var(--shadow)}
+.ew-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 8px}
+.ew-dialog-head h2{margin:0;font-size:18px;font-weight:650}
+.ew-dialog-body{padding:8px 20px 16px;overflow:auto;display:grid;gap:14px}
+.ew-dialog-foot{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:12px 20px 18px;border-top:1px solid var(--line)}
+
+/* Toasts */
+.ew-toasts{position:fixed;right:20px;bottom:20px;z-index:60;display:grid;gap:8px;max-width:min(420px,calc(100vw - 40px))}
+.ew-toast{padding:12px 14px;border-radius:var(--radius);background:var(--bg-4);border:1px solid var(--line-2);box-shadow:var(--shadow);font-size:14px}
+.ew-toast.error{background:#4a201c;border-color:#8a3b33}
+.ew-toast.success{background:#203327;border-color:#3f6a4e}
+
+@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
+.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
diff --git a/everwith-claude-frontend/src/styles/chat.css b/everwith-claude-frontend/src/styles/chat.css
new file mode 100644
index 00000000..356e4921
--- /dev/null
+++ b/everwith-claude-frontend/src/styles/chat.css
@@ -0,0 +1,103 @@
+/* Private chat: character stage | transcript + composer | tools */
+.ew-chat{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr) 52px;height:100%;min-height:0}
+.ew-chat.tools-open{grid-template-columns:minmax(260px,360px) minmax(0,1fr) 248px}
+.ew-chat-stage{display:flex;flex-direction:column;min-height:0;padding:14px 14px 12px;border-right:1px solid var(--line);background:linear-gradient(180deg,#24161400,#24161488),var(--bg-sunk);overflow:auto}
+.ew-chat-stage-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
+.ew-chat-stage-top .ew-back{margin:0}
+.ew-chat-who{display:grid;min-width:0}
+.ew-chat-who strong{font-size:17px;overflow-wrap:anywhere}
+.ew-chat-who small{color:var(--text-3);font-size:12px}
+.ew-chat-portrait{position:relative;flex:1 1 auto;min-height:320px;max-height:560px;border-radius:var(--radius-xl);overflow:hidden;background:radial-gradient(120% 75% at 50% 8%,#4b3029,#1d1311 72%)}
+.ew-chat-stage-meta{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 8px}
+.ew-voice{display:grid;gap:6px}
+.ew-voice small{font-size:11.5px;line-height:1.4}
+.ew-chat-main{display:flex;flex-direction:column;min-width:0;min-height:0;padding:12px 0 10px;gap:8px}
+.ew-chat-main>.ew-notice{margin:0 24px}
+.ew-transcript-wrap{position:relative;flex:1 1 auto;min-height:0;display:flex}
+.ew-transcript{flex:1;min-height:0;overflow-y:auto;overflow-anchor:auto;padding:12px 24px 18px;outline:none}
+.ew-transcript:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
+.ew-transcript>*{max-width:780px;margin-left:auto;margin-right:auto}
+.ew-transcript-start{text-align:center;color:var(--text-3);font-size:12.5px;margin:4px auto 14px}
+.ew-turn{display:grid;gap:6px;margin-bottom:10px}
+.ew-msg{display:flex;gap:10px;min-width:0}
+.ew-msg.is-character{align-items:flex-start;padding-right:56px}
+.ew-msg-avatar{flex:0 0 auto}
+.ew-msg-content{display:grid;gap:4px;min-width:0}
+.ew-msg-name{display:flex;align-items:center;gap:8px;color:var(--text-3);font-size:12.5px;font-weight:600}
+.ew-msg-bubble{width:fit-content;max-width:100%;padding:10px 14px;border-radius:4px 16px 16px 16px;background:var(--bg-3);color:var(--text);font-size:15px;line-height:1.6}
+.ew-msg-bubble p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
+.ew-msg-bubble p+p{margin-top:4px}
+.ew-msg.is-player{flex-direction:column;align-items:flex-end;padding-left:56px}
+.ew-msg.is-player .ew-msg-bubble{border-radius:16px 4px 16px 16px;background:#5a3f33;white-space:pre-wrap;overflow-wrap:anywhere}
+.ew-msg.is-narration{justify-content:center}
+.ew-msg.is-narration p{margin:0;max-width:640px;padding:4px 12px;color:var(--text-2);font:italic 14.5px/1.7 var(--font-story);text-align:center;white-space:pre-wrap;overflow-wrap:anywhere}
+.ew-act{font-style:italic;color:#cbb7ac}
+.ew-msg.is-player .ew-act{color:#ead3c6}
+.ew-line-action .ew-act{color:#b9a69c}
+.ew-msg.is-provisional .ew-msg-bubble{background:transparent;border:1px dashed var(--line-2)}
+.ew-msg.is-player.is-provisional .ew-msg-bubble{background:#5a3f3399;border-style:dashed}
+.ew-msg-meta{display:flex;justify-content:flex-end}
+.ew-msg-tool{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:var(--text-3);font-size:12px;cursor:pointer;opacity:0;transition:opacity .15s}
+.ew-msg-tool svg{width:14px;height:14px}
+.ew-turn:hover .ew-msg-tool,.ew-msg-tool:focus-visible{opacity:1}
+.ew-msg-tool:hover{background:var(--hover);color:var(--text)}
+.ew-receipt{color:var(--text-3);font-size:12px}
+.ew-chip.small{min-height:18px;padding:0 7px;font-size:11px}
+.ew-typing{display:flex;align-items:center;gap:10px;color:var(--text-3);font-size:13px;padding:6px 0}
+.ew-new-pill{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg-4);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 6px 18px #0008}
+.ew-new-pill svg{width:16px;height:16px}
+.ew-stash{margin-top:4px;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
+
+/* Composer */
+.ew-composer-wrap{position:relative;padding:0 24px}
+.ew-composer-wrap>*{max-width:828px;margin-left:auto;margin-right:auto}
+.ew-composer{display:flex;align-items:flex-end;gap:8px;padding:8px;border-radius:var(--radius-xl);background:var(--bg-2);border:1px solid var(--line-2)}
+.ew-composer:focus-within{border-color:#e3b99788}
+.ew-input-pill{display:flex;align-items:flex-end;flex:1;min-width:0;padding:0 2px 0 12px;border-radius:12px;background:var(--bg-sunk)}
+.ew-input-pill textarea{flex:1;min-width:0;width:0;min-height:46px;max-height:196px;padding:12px 0;border:0;background:transparent;color:var(--text);resize:none;outline:none;font-size:15px;line-height:1.5;overflow-y:auto;white-space:pre-wrap}
+.ew-input-pill textarea::placeholder{color:var(--text-3)}
+.ew-input-pill textarea:disabled{color:var(--text-disabled)}
+.ew-star{width:36px;height:36px;flex-basis:36px;margin:0 0 5px}
+.ew-hints-toggle{color:var(--accent);margin-bottom:3px}
+.ew-send{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:12px;border:0;background:var(--primary);color:var(--on-primary);cursor:pointer;margin-bottom:1px}
+.ew-send:disabled{background:var(--bg-4);color:var(--text-disabled);cursor:not-allowed}
+.ew-send.is-stop{background:#7a3a33;color:#ffe3dd}
+.ew-send svg{width:20px;height:20px}
+.ew-composer-count{min-height:14px;text-align:right;color:var(--text-3);font-size:11px;padding-top:2px}
+.ew-hints{margin-bottom:8px;padding:10px 12px;border-radius:var(--radius-l);border:1px solid var(--line-2);background:var(--bg-3);display:grid;gap:8px;max-height:280px;overflow:auto}
+.ew-hints header{display:flex;align-items:center;justify-content:space-between;color:var(--text-2);font-size:12.5px;font-weight:600}
+.ew-hint{display:block;width:100%;padding:10px 12px;border-radius:var(--radius);border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);text-align:left;white-space:pre-wrap;cursor:pointer;font-size:14.5px;line-height:1.5}
+.ew-hint:hover{border-color:var(--accent)}
+.ew-hints small{color:var(--text-3);font-size:11.5px}
+.ew-hint-confirm p{margin:0 0 8px;color:var(--text-2)}
+
+/* Tools */
+.ew-chat-tools{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-height:0;padding:12px 8px;border-left:1px solid var(--line);background:var(--bg-sunk);overflow:auto}
+.ew-tools-toggle{align-self:flex-end}
+.ew-tools-body{display:grid;gap:6px;padding:0 4px}
+.ew-tools-body hr{width:100%;border:0;border-top:1px solid var(--line);margin:6px 0}
+.ew-tools-caption{margin:4px 0;color:var(--text-3);font-size:12px;font-weight:600}
+.ew-btn.align-start{justify-content:flex-start}
+.ew-btn.danger-text{color:var(--danger)}
+.ew-older{display:grid;gap:4px;margin-top:8px}
+.ew-readonly-log{display:grid;gap:8px;max-height:60vh;overflow:auto}
+.ew-plain-line{margin:0;padding:6px 10px;border-radius:8px;background:var(--bg-3);white-space:pre-wrap}
+
+@media (max-width: 1280px){
+  .ew-chat.tools-open{grid-template-columns:minmax(240px,300px) minmax(0,1fr) 230px}
+  .ew-chat{grid-template-columns:minmax(240px,300px) minmax(0,1fr) 52px}
+}
+@media (max-width: 1060px){
+  .ew-chat,.ew-chat.tools-open{grid-template-columns:220px minmax(0,1fr) 52px}
+  .ew-chat.tools-open .ew-chat-tools{position:absolute;right:0;top:0;bottom:0;width:248px;z-index:5;box-shadow:-12px 0 30px #0008}
+  .ew-chat{position:relative}
+  .ew-transcript{padding:12px 16px}
+  .ew-composer-wrap{padding:0 16px}
+}
+@media (max-width: 760px){
+  .ew-chat,.ew-chat.tools-open{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
+  .ew-chat-stage{flex-direction:row;flex-wrap:wrap;align-items:center;border-right:0;border-bottom:1px solid var(--line);padding:8px 12px}
+  .ew-chat-portrait{flex:0 0 96px;min-height:96px;height:96px}
+  .ew-voice,.ew-chat-stage-meta{display:none}
+  .ew-chat-tools{position:absolute;right:0;top:0;width:auto}
+}
diff --git a/everwith-claude-frontend/src/styles/games.css b/everwith-claude-frontend/src/styles/games.css
new file mode 100644
index 00000000..73e325d9
--- /dev/null
+++ b/everwith-claude-frontend/src/styles/games.css
@@ -0,0 +1,315 @@
+/* Game preparation, table shell and the three boards. Numbers, pips and labels are DOM
+   text drawn by code; package images only supply artwork behind them. */
+
+/* ---------- Preparation ---------- */
+.ew-prepare-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
+.ew-title-xl{margin:0 0 8px;font:600 34px/1.2 var(--font-story);letter-spacing:.2px}
+.ew-prepare-block{margin-top:14px}
+.ew-code{font:12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--bg-sunk);padding:2px 6px;border-radius:5px;color:var(--text-2);overflow-wrap:anywhere}
+.ew-rules{margin:8px 0 0;padding-left:20px;color:var(--text-2);display:grid;gap:4px;line-height:1.6}
+.ew-seat-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
+.ew-seat-row{display:grid;grid-template-columns:28px 40px minmax(0,1fr) minmax(190px,260px);align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-l);background:var(--bg-2);border:1px solid var(--line)}
+.ew-seat-no{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--bg-4);font-weight:700;font-size:13px}
+.ew-seat-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
+.ew-seat-name strong{overflow-wrap:anywhere}
+.ew-prepare-side{position:sticky;top:20px;display:grid;gap:12px}
+.ew-prepare-poster{aspect-ratio:3/4;border-radius:var(--radius-l);overflow:hidden;background:var(--bg-3);box-shadow:var(--shadow)}
+.ew-prepare-poster .ew-portrait{width:100%;height:100%}
+.ew-start-btn{min-height:52px;font-size:16px}
+@media (max-width:1100px){.ew-prepare-layout{grid-template-columns:minmax(0,1fr) 290px;gap:24px}}
+@media (max-width:860px){.ew-prepare-layout{grid-template-columns:1fr}.ew-prepare-side{position:static}.ew-seat-row{grid-template-columns:28px 40px minmax(0,1fr)}.ew-seat-select{grid-column:1/-1}}
+
+/* ---------- Settings ---------- */
+.ew-settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
+.ew-settings-card{display:grid;gap:12px;padding:18px 20px;align-content:start}
+.ew-gap-list{margin:0;padding-left:18px;display:grid;gap:6px;font-size:13.5px;line-height:1.55}
+
+/* ---------- Table shell ---------- */
+.ew-table-shell{--rail-w:340px;display:flex;flex-direction:column;height:100%;min-height:0;background:#120b09}
+.ew-table-shell:fullscreen{width:100vw;height:100vh}
+.ew-table-top{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;min-height:56px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--bg-sunk)}
+.ew-table-top .ew-back{margin:0}
+.ew-table-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
+.ew-table-title strong{font:600 18px/1.2 var(--font-story)}
+.ew-table-status{margin:0 auto 0 4px;font-weight:600;color:var(--accent);min-width:0}
+.ew-table-tools{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
+.danger-text{color:var(--danger)!important}
+.ew-table-notice{margin:8px 14px 0}
+.ew-table-body{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) var(--rail-w);min-height:0}
+.rail-closed .ew-table-body,.is-immersive .ew-table-body{grid-template-columns:minmax(0,1fr)}
+.is-immersive .ew-table-title .ew-chip,.is-immersive .ew-table-title [data-testid="revision"]{display:none}
+.ew-board-area{position:relative;min-width:0;min-height:0;overflow:auto;container-type:inline-size;container-name:board}
+.ew-rail{display:grid;grid-template-rows:auto auto minmax(0,1fr);min-height:0;border-left:1px solid var(--line);background:var(--bg-2)}
+.ew-rail-stage{position:relative;height:clamp(170px,28vh,270px);background:radial-gradient(ellipse at 50% 28%,#3a2a25,#160f0d 75%);border-bottom:1px solid var(--line);overflow:hidden}
+.ew-rail-stage-name{position:absolute;left:12px;top:10px;padding:2px 10px;border-radius:999px;background:#000a;font-size:13px;font-weight:600}
+.ew-rail-seats{list-style:none;margin:0;padding:8px;display:grid;gap:2px;border-bottom:1px solid var(--line);max-height:210px;overflow:auto}
+.ew-seat{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 6px;border-radius:var(--radius)}
+.ew-seat.is-active{background:var(--accent-soft)}
+.ew-seat-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 10px;box-shadow:0 0 0 2px #0007;vertical-align:middle}
+.ew-seat-text{display:grid;min-width:0;flex:1;line-height:1.3}
+.ew-seat-text strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ew-seat-text small{color:var(--text-3);font-size:12px}
+.ew-table-chat{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;padding:8px 10px 10px;gap:8px}
+.ew-table-chat header{display:grid;gap:1px}
+.ew-table-chat header small{font-size:12px}
+.ew-table-log{overflow:auto;display:grid;align-content:start;gap:6px;padding-right:4px;font-size:13.5px;min-height:60px}
+.ew-log-line{margin:0;color:var(--text-3);display:flex;gap:6px;align-items:baseline;font-size:12.5px;line-height:1.45}
+.ew-log-line .ew-seat-dot{width:7px;height:7px;flex-basis:7px}
+.ew-chat-line{margin:0;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
+.ew-chat-line.is-me strong{color:var(--accent)}
+.ew-chat-text{flex-basis:100%;color:var(--text)}
+.ew-chip.small{min-height:18px;padding:0 6px;font-size:11px}
+.ew-table-chat .ew-composer{padding:6px;border-radius:var(--radius-l)}
+@media (max-width:1180px){.ew-table-shell{--rail-w:300px}}
+@media (max-width:1099px){
+  .ew-table-body{position:relative;grid-template-columns:minmax(0,1fr)}
+  .ew-rail{position:absolute;top:0;right:0;bottom:0;z-index:20;width:min(340px,92vw);box-shadow:-18px 0 40px #0009}
+}
+
+/* Result */
+.ew-result{margin:16px;padding:18px 20px;border-radius:var(--radius-l);background:#1c1512f2;border:1px solid #6b5a32;display:grid;gap:12px;box-shadow:var(--shadow)}
+.ew-result h2{margin:0;display:flex;align-items:center;gap:8px;font:600 20px/1.3 var(--font-story)}
+.ew-result h2 svg{color:var(--mock)}
+.ew-result-table{width:100%;border-collapse:collapse;font-size:14px}
+.ew-result-table th,.ew-result-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
+.ew-result-table thead th{color:var(--text-3);font-weight:600;font-size:12.5px}
+.ew-result-table tr.is-winner th,.ew-result-table tr.is-winner td{color:#ffe7a8;font-weight:650}
+
+/* ---------- Board common ---------- */
+.gb-board{display:grid;gap:12px;padding:12px 16px 0;min-height:100%;align-content:start}
+.gb-recent{display:inline-flex;gap:4px;min-width:0;max-width:100%;font-size:12.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.gb-actionbar{position:sticky;bottom:0;z-index:6;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:4px -16px 0;padding:12px 16px;background:linear-gradient(180deg,#1b120fef,#130c0afa);border-top:1px solid var(--line-2);backdrop-filter:blur(6px)}
+.gb-action-text{flex:1 1 300px;min-width:0}
+.gb-prompt{margin:0;font-weight:600;line-height:1.45}
+.gb-detail{margin-top:3px;font-size:13px;color:var(--text-2);line-height:1.5}
+.gb-action-buttons{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
+.gb-actionbar.tone-turn{box-shadow:inset 3px 0 0 var(--accent)}
+.gb-actionbar.tone-select{box-shadow:inset 3px 0 0 #8fc3ff}
+.gb-actionbar.tone-warn{box-shadow:inset 3px 0 0 var(--warning)}
+.gb-board :is(button,a):focus-visible{box-shadow:var(--focus-ring)}
+
+/* ---------- Royale ---------- */
+.rb-board{background:radial-gradient(ellipse at 50% 12%,#1b2b30 0%,#0f171b 62%,#0b1013 100%)}
+.rb-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.rb-round strong{font:600 18px/1 var(--font-story)}
+.rb-casinos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
+@container board (min-width:1240px){.rb-casinos{grid-template-columns:repeat(6,minmax(0,1fr))}}
+@container board (max-width:620px){.rb-casinos{grid-template-columns:repeat(2,minmax(0,1fr))}}
+.rb-casino{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:8px;min-height:236px;padding:10px;border-radius:12px;overflow:hidden;isolation:isolate;background:#0b1015;border:1px solid color-mix(in srgb,var(--casino) 40%,transparent);transition:border-color .2s,box-shadow .2s}
+.rb-casino-art{position:absolute;left:0;right:0;top:0;width:100%;aspect-ratio:1.25;z-index:-2;opacity:.62}
+.rb-casino::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0a0f14d9 0%,#0a0f1466 26%,#0a0f1499 52%,#0b1015 78%)}
+.rb-casino.is-selectable{border-color:color-mix(in srgb,var(--casino) 80%,transparent)}
+.rb-casino.is-selected{border-color:#fff;box-shadow:0 0 0 2px var(--casino),0 0 24px color-mix(in srgb,var(--casino) 45%,transparent)}
+.rb-casino.is-next{box-shadow:0 0 0 2px var(--warning)}
+.rb-casino.is-paying{animation:rb-pay 1.6s ease-out}
+.rb-casino.is-done .rb-casino-art{opacity:.3;filter:grayscale(.5)}
+@keyframes rb-pay{0%{box-shadow:0 0 0 0 #ffe08a}30%{box-shadow:0 0 0 4px #ffe08a,0 0 30px #ffe08a88}100%{box-shadow:0 0 0 0 #ffe08a00}}
+.rb-casino-head{display:flex;align-items:center;gap:8px;min-width:0}
+.rb-casino-head strong{font:600 16px/1.2 var(--font-story);color:color-mix(in srgb,var(--casino) 35%,#fff);text-shadow:0 1px 6px #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rb-casino-head .ew-chip{margin-left:auto}
+.rb-casino-notes{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:42px}
+.rb-award{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;text-shadow:0 1px 4px #000}
+.rb-influence{list-style:none;margin:0;padding:0;display:grid;gap:5px;align-content:start}
+.rb-influence li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:12.5px;padding:3px 0}
+.rb-influence li.is-excluded{opacity:.62}
+.rb-influence li.is-excluded .rb-own-dice{filter:grayscale(.6)}
+.rb-influence b{font-weight:650;color:var(--text)}
+.rb-own-dice{display:inline-flex;flex-wrap:wrap;gap:3px}
+.rb-own-name{color:var(--text-2)}
+.rb-casino-pick{min-height:40px;border-radius:8px;border:1px dashed color-mix(in srgb,var(--casino) 75%,#fff);background:color-mix(in srgb,var(--casino) 18%,#0b1015);color:#fff;font-weight:600;font-size:13px;cursor:pointer}
+.rb-casino-pick:hover{background:color-mix(in srgb,var(--casino) 30%,#0b1015)}
+.rb-die{--s:30px;position:relative;display:inline-grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:var(--s);height:var(--s);flex:0 0 auto;padding:calc(var(--s)*.13);border-radius:calc(var(--s)*.22);background:linear-gradient(145deg,color-mix(in srgb,var(--die) 80%,#fff),var(--die) 45%,color-mix(in srgb,var(--die) 78%,#000));box-shadow:inset 0 -2px 0 #0003,0 2px 4px #0007;vertical-align:middle}
+.rb-die i{display:block}
+.rb-die i.pip{margin:13%;border-radius:50%;background:var(--pip);box-shadow:inset 0 1px 1px #0005}
+.rb-die.size-sm{--s:19px}.rb-die.size-sm.is-big{--s:25px}
+.rb-die.size-md.is-big{--s:38px}
+.rb-die.size-lg{--s:46px}.rb-die.size-lg.is-big{--s:58px}
+.rb-die.is-blank{opacity:.75;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--die) 85%,#000) 0 4px,var(--die) 4px 8px)}
+.rb-biggy{position:absolute;right:-7px;top:-8px;padding:0 3px;border-radius:5px;background:#111;color:#ffe7a8;font:700 9px/13px var(--font-ui);border:1px solid #ffe7a855}
+.rb-die.size-lg .rb-biggy{font-size:11px;line-height:15px;padding:0 4px}
+.rb-die.is-rolling{animation:rb-roll .78s cubic-bezier(.2,.75,.3,1) both;animation-delay:var(--roll-delay,0ms)}
+@keyframes rb-roll{0%{transform:translate(-48px,-22px) rotate(-240deg) scale(.85);filter:blur(1.6px)}55%{transform:translate(6px,3px) rotate(18deg);filter:blur(.4px)}78%{transform:translate(-2px,0) rotate(-5deg)}100%{transform:none;filter:none}}
+.rb-die.is-landing{animation:rb-land .55s ease-out both}
+@keyframes rb-land{0%{transform:translateY(-22px) scale(1.3);opacity:0}100%{transform:none;opacity:1}}
+.rb-die.is-chosen{outline:2px solid #fff;outline-offset:3px}
+.rb-note{position:relative;display:inline-grid;place-items:center;width:86px;height:41px;border-radius:4px;overflow:hidden;background:var(--note-tint);box-shadow:0 2px 6px #0008;flex:0 0 auto}
+.rb-note-art{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.92}
+.rb-note b{position:relative;padding:2px 6px;border-radius:3px;background:#fffaf0e0;color:#2a2216;font:700 14px/1.1 Georgia,"Songti SC",serif;letter-spacing:.02em}
+.rb-note.size-sm{width:63px;height:30px}
+.rb-note.size-sm b{font-size:11px;padding:1px 4px}
+.rb-note.is-highlight{animation:rb-pay 1.6s ease-out}
+.rb-chips{display:inline-flex;align-items:center}
+.rb-chips i{width:13px;height:13px;margin-left:-5px;border-radius:50%;background:radial-gradient(circle,#f3d67f 0 30%,#9c7420 32% 46%,#f3d67f 48%);border:1px solid #5e4512;box-shadow:0 1px 2px #0008}
+.rb-chips i:first-child{margin-left:0}
+.rb-chips small{margin-left:3px;font-size:11px;color:var(--text-3)}
+.rb-chips b{margin-left:6px;font-weight:700;font-size:13px}
+.rb-arena{display:grid;gap:8px;min-height:104px;padding:12px 16px;border-radius:14px;background:radial-gradient(ellipse at 50% 40%,#21483c 0%,#15322a 72%);border:1px solid #2f5a4b;box-shadow:inset 0 2px 14px #000a}
+.rb-arena-label{font-size:13px;font-weight:600;color:#cfe8dc}
+.rb-arena-dice{display:flex;flex-wrap:wrap;gap:12px;align-items:center;min-height:58px}
+.rb-players{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
+.rb-player{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 10px;border-radius:10px;background:#ffffff08;border:1px solid var(--line);font-size:13px}
+.rb-player.is-current{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
+.rb-player-name{font-size:14px}
+.rb-left{color:var(--text-2)}
+.rb-money{color:var(--text-2)}
+.rb-my-notes{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
+.rb-face-btn{gap:8px;padding:0 12px}
+.rb-face-btn span{display:grid;text-align:left;line-height:1.2}
+.rb-face-btn small{font-size:11px;color:var(--text-3);font-weight:500}
+
+/* ---------- Splendor ---------- */
+.sp-board{--cw:clamp(74px,min(10.2cqw,calc((100vh - 480px) / 4.6)),118px);background:#0d2422 var(--sp-cloth) center/560px repeat;box-shadow:inset 0 0 120px #000b}
+.sp-board.players-2,.sp-board.players-3{--cw:clamp(74px,min(10.6cqw,calc((100vh - 380px) / 4.6)),118px)}
+.sp-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.sp-top strong{font:600 18px/1 var(--font-story)}
+.sp-table{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr) minmax(150px,210px);grid-template-areas:"left top right" "left center right";gap:12px;align-items:start}
+.players-2 .sp-table{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "center"}
+.players-3 .sp-table{grid-template-areas:"left center right"}
+.sp-seat.pos-left{grid-area:left}.sp-seat.pos-top{grid-area:top;justify-self:center;width:min(100%,620px)}.sp-seat.pos-right{grid-area:right}
+.sp-center{grid-area:center;display:grid;grid-template-columns:auto auto;grid-template-areas:"nobles nobles" "market bank";gap:10px 16px;justify-content:center;align-items:center;min-width:0}
+@container board (max-width:900px){
+  .sp-board,.sp-board.players-2,.sp-board.players-3{--cw:clamp(74px,min(13.6cqw,calc((100vh - 480px) / 4.6)),108px)}
+  .sp-table{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"left top right" "center center center"}
+  .players-3 .sp-table{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"left right" "center center"}
+  .players-2 .sp-table{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "center"}
+  .sp-seat.pos-top{width:auto;justify-self:stretch}
+}
+.sp-nobles{grid-area:nobles;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
+.sp-market{grid-area:market;display:grid;gap:8px}
+.sp-market-row{display:grid;grid-template-columns:repeat(5,var(--cw));gap:8px}
+.sp-card{position:relative;display:block;width:var(--cw);aspect-ratio:63/88;padding:0;border:0;border-radius:8px;overflow:hidden;background:#efe5cf;color:#1d1a14;text-align:left;box-shadow:0 3px 9px #000a;container-type:inline-size;font:inherit}
+.sp-card.size-sm{width:calc(var(--cw)*.56)}
+.sp-card-art{position:absolute;inset:0}
+.sp-card-head{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:3cqw 5cqw;background:linear-gradient(180deg,#fff8ebf0,#fff8eba8)}
+.sp-points{font:800 21cqw/1 Georgia,serif;color:#1b160e;text-shadow:0 1px 0 #fff;min-width:1ch}
+.sp-bonus{width:24cqw;height:24cqw;object-fit:contain;filter:drop-shadow(0 1px 2px #0008)}
+.sp-pips{display:grid;gap:2.5cqw}
+.sp-card-cost{position:absolute;left:4.5cqw;bottom:4.5cqw}
+.sp-pip{display:grid;place-items:center;width:20cqw;height:20cqw;border-radius:50%;background:var(--pip-bg);color:var(--pip-ink);font:700 13.5cqw/1 var(--font-ui);border:1.5px solid #ffffffd0;box-shadow:0 1px 3px #000a}
+.sp-afford{position:absolute;right:4cqw;bottom:4cqw;padding:1px 4cqw;border-radius:4px;font:600 9.5cqw/1.5 var(--font-ui)}
+.sp-afford.is-ok{background:#1f6a41;color:#eafff1}
+.sp-afford.is-short{background:#000a;color:#fff}
+.sp-card.is-clickable{cursor:pointer;transition:transform .12s,box-shadow .12s}
+.sp-card.is-clickable:hover{transform:translateY(-3px);box-shadow:0 8px 16px #000c}
+.sp-card.is-selected{outline:3px solid #8fc3ff;outline-offset:2px;transform:translateY(-3px)}
+.sp-card.is-back{background-size:cover;background-position:center}
+.sp-card.is-empty{background:#ffffff08;border:1px dashed #ffffff26;box-shadow:none}
+.sp-deck{position:relative;display:grid;align-items:end;justify-items:center;width:var(--cw);aspect-ratio:63/88;padding:6px;border:0;border-radius:8px;background:#162826 center/cover;color:#fff;box-shadow:0 3px 9px #000a,4px 4px 0 -1px #0b1a19,4px 4px 0 0 #ffffff22;font:inherit}
+button.sp-deck{cursor:pointer}
+button.sp-deck:hover{transform:translateY(-2px)}
+.sp-deck.is-selected{outline:3px solid #8fc3ff;outline-offset:2px}
+.sp-deck b{padding:2px 7px;border-radius:5px;background:#000b;font-size:12px;font-weight:600}
+.sp-noble{position:relative;display:block;width:calc(var(--cw)*.68);aspect-ratio:1;padding:0;border:0;border-radius:8px;overflow:hidden;background:#3a2f22;box-shadow:0 3px 9px #000a;container-type:inline-size;font:inherit}
+.sp-noble.size-sm{width:calc(var(--cw)*.42)}
+.sp-noble-art{position:absolute;inset:0}
+.sp-noble .sp-points{position:absolute;left:6cqw;top:5cqw;padding:1cqw 4cqw;border-radius:4px;background:#fff8ebe0;font-size:20cqw}
+.sp-noble-cost{position:absolute;left:5cqw;bottom:5cqw}
+.sp-noble-cost .sp-pip{width:21cqw;height:21cqw;font-size:14cqw}
+.sp-noble.is-clickable{cursor:pointer;outline:2px dashed #ffe08a;outline-offset:2px}
+.sp-noble.is-selected{outline:3px solid #8fc3ff}
+.sp-bank{grid-area:bank;display:flex;flex-direction:column;gap:10px;align-items:center;padding:0 6px}
+.sp-token{position:relative;display:grid;place-items:center;width:calc(var(--cw)*.6);height:calc(var(--cw)*.6);min-width:48px;min-height:48px;padding:5px;border-radius:50%;border:2px solid #ffffff26;background:radial-gradient(circle at 38% 32%,#ffffff26,#0000 62%),#0b1c1b;color:#fff;font:inherit}
+button.sp-token{cursor:pointer}
+button.sp-token:hover{border-color:#ffffff66}
+.sp-bank-gem{width:70%;height:70%;object-fit:contain;filter:drop-shadow(0 2px 3px #000a)}
+.sp-token b{position:absolute;right:-6px;bottom:-6px;display:grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:12px;background:#101010;border:1px solid #ffffff4d;font-size:13px}
+.sp-token.is-selected{border-color:#8fc3ff;box-shadow:0 0 0 3px #8fc3ff59}
+.sp-token.is-zero{opacity:.45}
+.sp-token.is-gold{border-style:dashed}
+.sp-chosen{position:absolute;left:-6px;top:-6px;padding:1px 6px;border-radius:10px;background:#8fc3ff;color:#0b1a2a;font:normal 700 12px/1.3 var(--font-ui)}
+.sp-seat{position:relative;display:grid;gap:6px;align-content:start;padding:10px;border-radius:12px;background:#071312b8;border:1px solid #ffffff1c;min-width:0}
+.sp-seat.is-current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 18px #e3b99733}
+.sp-seat-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
+.sp-seat-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
+.sp-seat-score{margin-left:auto;font:700 16px/1 Georgia,serif;color:#ffe7a8}
+.sp-seat-head small{flex-basis:100%;font-size:11.5px}
+.sp-seat-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
+.sp-token-mini{position:relative;display:inline-flex;align-items:center;gap:2px;padding:1px 6px 1px 1px;border-radius:12px;border:1px solid transparent;background:#ffffff12;color:#fff;font:600 12px/18px var(--font-ui)}
+.sp-token-mini .sp-gem-img{width:18px;height:18px;object-fit:contain}
+.sp-token-mini.is-zero{opacity:.38}
+button.sp-token-mini{cursor:pointer;border-color:#ffffff40;min-height:28px}
+button.sp-token-mini.is-selected{border-color:#8fc3ff;background:#8fc3ff2a}
+.sp-token-mini .sp-chosen{left:auto;right:-8px;top:-9px;font-size:10px;padding:0 4px}
+.sp-token-total{margin-left:2px;font-size:11.5px;color:var(--text-3)}
+.sp-row-label{margin-right:3px;font-size:11px;color:var(--text-3)}
+.sp-bonus-chip{display:inline-grid;place-items:center;min-width:21px;height:21px;padding:0 4px;border-radius:4px;background:var(--pip-bg);color:var(--pip-ink);border:1px solid #ffffff5c;font:700 12px/1 var(--font-ui)}
+.sp-seat-reserved{display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap;min-height:24px}
+.sp-seat-nobles{display:flex;gap:4px;flex-wrap:wrap}
+.sp-seat.pos-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
+.sp-seat.pos-bottom .sp-seat-head{flex:0 0 170px}
+.sp-seat.pos-bottom .sp-seat-reserved{margin-left:auto}
+.sp-seat.pos-bottom .sp-token-mini{font-size:14px;line-height:24px;padding-right:8px}
+.sp-seat.pos-bottom .sp-token-mini .sp-gem-img{width:24px;height:24px}
+.sp-seat.pos-bottom .sp-bonus-chip{min-width:26px;height:26px;font-size:13px}
+.sp-seat.pos-bottom .sp-card.size-md{width:calc(var(--cw)*.72)}
+.sp-detail{display:flex;flex-wrap:wrap;gap:4px 14px}
+.is-flash{animation:sp-flash 1.3s ease-out}
+@keyframes sp-flash{0%{box-shadow:0 0 0 0 #ffe08acc;background-color:#ffe08a44}100%{box-shadow:0 0 0 10px #ffe08a00}}
+@container board (max-width:700px){.sp-seat.pos-bottom .sp-seat-reserved{margin-left:0}}
+
+/* ---------- CABO ---------- */
+.cb-board{background:#0c1c1a var(--cb-surface) center/cover;box-shadow:inset 0 0 140px #000c}
+.cb-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.cb-top strong{font:600 18px/1 var(--font-story)}
+.cb-top .ew-chip svg{width:14px;height:14px}
+.cb-opponents{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
+.cb-seat{display:grid;gap:6px;justify-items:center;align-content:start;min-width:150px;padding:8px 10px;border-radius:12px;background:#08131299;border:1px solid #ffffff1c}
+.cb-seat header,.cb-me header{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
+.cb-seat.is-current,.cb-me.is-current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 18px #e3b99733}
+.cb-total{padding:1px 8px;border-radius:999px;background:#0008;font-size:12.5px;font-weight:600}
+.cb-seat-drawn{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-2)}
+.cb-hand{display:grid;grid-auto-flow:column;grid-auto-columns:auto;gap:6px;justify-content:center}
+.cb-hand.size-lg{gap:14px}
+.cb-center{display:flex;gap:22px;justify-content:center;align-items:flex-end;flex-wrap:wrap;padding:6px}
+.cb-pile{display:grid;justify-items:center;gap:6px}
+.cb-pile.is-drawn .cb-card{box-shadow:0 0 0 3px #ffe08a,0 8px 18px #000c}
+.cb-pile-label{padding:1px 9px;border-radius:9px;background:#000a;color:var(--text-2);font-size:12px}
+.cb-legend{flex-basis:100%;margin:0;text-align:center;font-size:12px}
+.cb-me{display:grid;justify-items:center;gap:8px;padding:10px;border-radius:14px;background:#08131299;border:1px solid #ffffff1c}
+.cb-card{--w:64px;position:relative;display:block;width:var(--w);aspect-ratio:2/3;padding:0;border:0;border-radius:calc(var(--w)*.065);overflow:hidden;background:#fbf8ed;color:#243735;box-shadow:0 3px 9px #000b;container-type:inline-size;font:inherit;flex:0 0 auto}
+.cb-card.size-sm{--w:50px}
+.cb-card.size-md{--w:84px}
+.cb-card.size-lg{--w:clamp(96px,min(10cqw,calc((100vh - 560px) * .6)),124px)}
+.cb-card.is-clickable{cursor:pointer;transition:transform .12s}
+.cb-card.is-clickable:hover{transform:translateY(-3px)}
+.cb-card.is-selected{outline:3px solid #8fc3ff;outline-offset:2px;transform:translateY(-4px)}
+.cb-card.is-reveal{box-shadow:0 0 0 3px #ffe08a,0 8px 18px #000c}
+.cb-front,.cb-back{position:absolute;inset:0}
+.cb-art{position:absolute;inset:0;background-size:100% 100%;clip-path:inset(4.1667% 6.25% 14.8438% 6.25%)}
+.cb-corner{position:absolute;display:flex;align-items:flex-end;background:#fbf8ed;color:#243735;font:800 17.19cqw/1 Arial,"Helvetica Neue",sans-serif}
+.cb-corner.tl{left:6.25%;top:4.1667%;width:26.56%;height:14.06%;padding:0 0 2.6cqw 2.34cqw;flex-direction:column;align-items:flex-start;justify-content:flex-end}
+.cb-corner.br{left:76.17%;top:76.56%;width:17.58%;height:8.59%;padding:0 0 1.2cqw 1.6cqw;font-size:10.94cqw;flex-direction:column;align-items:flex-start;justify-content:flex-end}
+.cb-underline{display:block;width:100%;height:max(1.5px,1.2cqw);margin-top:.6cqw;background:currentColor}
+.cb-footer{position:absolute;left:6.25%;top:86.98%;width:87.5%;height:8.59%;display:grid;place-items:center;align-content:center;border:1px solid #6d7767;background:#fbf8ed;text-align:center;line-height:1.05}
+.cb-footer b{font:800 10.5cqw/1.05 "PingFang SC","Microsoft YaHei",Arial,sans-serif}
+.cb-footer small{display:none}
+.cb-brand-small{font:500 5.6cqw/1 Georgia,serif;letter-spacing:.12em;color:#65716a}
+.cb-front.no-art{background:#fbf8ed}
+.cb-center-digit{position:absolute;left:0;right:0;top:24%;display:grid;justify-items:center;font:800 40cqw/1 Arial,sans-serif;color:#243735}
+.cb-center-digit .cb-underline{width:22cqw}
+.cb-back{background:#1d2826 center/100% 100%;clip-path:inset(4.1667% 6.25%)}
+.cb-back::before{content:"";position:absolute;inset:0;background:#1d28262e}
+.cb-brand{position:absolute;left:20%;right:20%;top:44.5%;height:11%;display:grid;place-items:center;border-radius:2.4cqw;background:#1d282638;color:#fbf4df;font:600 8.2cqw/1 Georgia,serif;letter-spacing:.12em;text-shadow:0 1px 3px #0009}
+.cb-card.size-sm .cb-brand{font-size:9cqw}
+.cb-known{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:10px;background:#0b1715eb;color:#bfe9d6;font:700 11px/1.2 var(--font-ui);white-space:nowrap}
+.cb-known svg{width:12px;height:12px}
+.cb-card.size-sm .cb-known{padding:1px 4px;font-size:9px;gap:2px}
+.cb-card.size-sm .cb-known svg{width:9px;height:9px}
+.cb-slot-empty{display:block;width:50px;aspect-ratio:2/3;border-radius:4px;border:1px dashed #ffffff2e}
+.cb-slot-empty.size-md{width:84px}
+.cb-slot-empty.size-lg{width:clamp(96px,min(10cqw,calc((100vh - 560px) * .6)),124px)}
+.cb-scores{padding:12px 14px;border-radius:12px;background:#0a1413e6;border:1px solid #ffffff22}
+.cb-scores h3{margin:0 0 8px;font:600 16px/1.3 var(--font-story)}
+.cb-scores table{width:100%;border-collapse:collapse;font-size:13.5px}
+.cb-scores th,.cb-scores td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
+.cb-scores thead th{color:var(--text-3);font-size:12px;font-weight:600}
+.cb-values{display:flex;gap:4px;flex-wrap:wrap}
+.cb-mini-value{display:inline-grid;justify-items:center;min-width:22px;padding:2px 4px;border-radius:4px;background:#fbf8ed;color:#243735;font:800 13px/1 Arial,sans-serif}
+.cb-mini-value .cb-underline{height:1.5px;margin-top:1px}
+.ew-mock-tool{color:var(--mock)}
+
+/* Small cards (other seats): a larger corner numeral so public values stay readable. */
+.cb-card.size-sm .cb-corner.tl{width:46%;height:24%;font-size:30cqw;padding:0 0 3cqw 4cqw}
+.cb-card.size-sm .cb-corner.br,.cb-card.size-sm .cb-footer small{display:none}
+.cb-card.size-sm .cb-footer b{font-size:12cqw}
+.cb-center{gap:22px}
diff --git a/everwith-claude-frontend/src/styles/pages.css b/everwith-claude-frontend/src/styles/pages.css
new file mode 100644
index 00000000..20ffa284
--- /dev/null
+++ b/everwith-claude-frontend/src/styles/pages.css
@@ -0,0 +1,76 @@
+/* Discover */
+.ew-search{position:relative;display:flex;align-items:center;width:min(420px,100%)}
+.ew-search>svg{position:absolute;left:12px;width:18px;height:18px;color:var(--text-3);pointer-events:none}
+.ew-search .ew-input{padding-left:38px;padding-right:44px}
+.ew-search .ew-icon-btn{position:absolute;right:2px}
+.ew-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid var(--line)}
+.ew-tab{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;color:var(--text-2);font-weight:550;text-decoration:none;border:1px solid transparent}
+.ew-tab:hover{background:var(--hover);color:var(--text)}
+.ew-tab[aria-current="page"]{background:var(--primary);color:var(--on-primary)}
+.ew-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px}
+.ew-card{display:flex;flex-direction:column;height:100%;border-radius:var(--radius-l);overflow:hidden;background:var(--bg-2);border:1px solid var(--line);color:var(--text);text-decoration:none;transition:border-color .15s,transform .2s ease}
+.ew-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
+.ew-card-media{position:relative;aspect-ratio:4/5;background:linear-gradient(170deg,#352520,#1f1513);overflow:hidden}
+.ew-card.is-game .ew-card-media{aspect-ratio:1}
+.ew-card-media>.ew-portrait,.ew-card-media>.ew-stage{position:absolute;inset:0;width:100%;height:100%}
+.ew-card.is-character .ew-card-media>.ew-portrait{object-fit:cover}
+.ew-card.is-character .ew-card-media>.ew-portrait:not(.is-placeholder){background:transparent;-webkit-mask-image:linear-gradient(180deg,#000 68%,#0000 95%);mask-image:linear-gradient(180deg,#000 68%,#0000 95%)}
+.ew-card.is-character .ew-card-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(180deg,#120a0800,#120a08b8 58%,#120a08f2);pointer-events:none}
+.ew-card.is-character .ew-card-media:has(>.ew-stage)::after{display:none}
+.ew-card-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
+.ew-card:hover .ew-card-video{opacity:1}
+.ew-card-kind{position:absolute;left:10px;top:10px;padding:2px 8px;border-radius:6px;background:#000a;color:#f5f0ed;font-size:12px;font-weight:550}
+.ew-card-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-3)}
+.ew-card-placeholder svg{width:44px;height:44px}
+.ew-card-body{display:grid;gap:4px;padding:12px 14px 16px;align-content:start}
+.ew-card-tag{margin:0;color:var(--accent);font-size:12.5px;font-weight:550}
+.ew-card-desc{margin:0;color:var(--text-2);font-size:13.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
+.ew-card.skeleton{pointer-events:none}
+.ew-grid-foot{display:flex;justify-content:center;gap:12px;padding:24px 0}
+.ew-grid-foot .ew-notice{align-items:center}
+.ew-continue{margin:0 0 22px}
+.ew-continue-row{display:flex;gap:10px;flex-wrap:wrap}
+.ew-continue-card{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 14px;border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--line);text-decoration:none;max-width:320px}
+.ew-continue-card:hover{border-color:var(--line-2);background:var(--bg-3)}
+.ew-continue-card svg{width:20px;height:20px;color:var(--accent);flex:0 0 20px}
+.ew-continue-thumb{display:block;width:38px;height:38px;flex:0 0 38px;border-radius:8px;overflow:hidden;background:var(--bg-3)}
+.ew-continue-thumb .ew-portrait{width:100%;height:100%}
+.ew-continue-card span{display:grid;min-width:0}
+.ew-continue-card small{color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+
+/* Character detail */
+.ew-character-layout{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:40px;align-items:start}
+.ew-character-layout.is-zoom{grid-template-columns:minmax(0,1fr)}
+.ew-character-stage{position:relative;aspect-ratio:4/5;border-radius:var(--radius-xl);overflow:hidden;background:radial-gradient(120% 80% at 50% 10%,#4a3029,#1e1412 70%)}
+.is-zoom .ew-character-stage{aspect-ratio:auto;height:calc(100vh - 160px);max-height:900px}
+.ew-stage-zoom{position:absolute;right:10px;top:10px;background:#0007;color:#fff}
+.ew-character-info h1{margin:0 0 6px;font:600 40px/1.15 var(--font-story)}
+.ew-traits{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
+.ew-character-actions{margin-top:22px}
+.ew-same-source{margin-top:26px}
+.is-zoom .ew-character-info{max-width:760px}
+
+/* Friends */
+.ew-friend-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
+.ew-friend-card{display:flex;flex-direction:column;border-radius:var(--radius-l);background:var(--bg-2);border:1px solid var(--line);overflow:hidden}
+.ew-friend-main{display:flex;gap:14px;align-items:center;padding:14px;text-decoration:none;color:var(--text)}
+.ew-friend-main:hover{background:var(--bg-3)}
+.ew-friend-face{position:relative;width:72px;height:72px;border-radius:16px;overflow:hidden;flex:0 0 72px;background:var(--bg-3)}
+.ew-friend-face .ew-portrait{position:relative;width:100%;height:100%}
+.ew-friend-face .ew-portrait:not(.is-placeholder){background:transparent}
+.ew-friend-text{display:grid;gap:3px;min-width:0}
+.ew-friend-name{font-size:17px;font-weight:650;overflow-wrap:anywhere}
+.ew-friend-text small{color:var(--text-2);font-size:12.5px;overflow-wrap:anywhere}
+.ew-friend-actions{display:flex;gap:8px;padding:0 14px 14px}
+.ew-play-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
+.ew-list-thumb{display:block;width:44px;height:44px;flex:0 0 44px;border-radius:8px;overflow:hidden;background:var(--bg-3)}
+.ew-list-thumb .ew-portrait{width:100%;height:100%}
+.ew-auth-why{display:flex;align-items:center;gap:14px}
+.ew-auth-why p{margin:0}
+
+@media (max-width: 1100px){
+  .ew-character-layout{grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:24px}
+}
+@media (max-width: 760px){
+  .ew-character-layout{grid-template-columns:1fr}
+}
diff --git a/everwith-claude-frontend/src/styles/shell.css b/everwith-claude-frontend/src/styles/shell.css
new file mode 100644
index 00000000..d33f866b
--- /dev/null
+++ b/everwith-claude-frontend/src/styles/shell.css
@@ -0,0 +1,64 @@
+/* Shell: fixed left navigation (好友 / 发现 / 最近 / 创作, account at the bottom). */
+.ew-app{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);height:100vh;height:100dvh;overflow:hidden}
+.ew-app.nav-collapsed{grid-template-columns:var(--nav-w-collapsed) minmax(0,1fr)}
+.ew-app.is-task{grid-template-columns:minmax(0,1fr)}
+.ew-nav{display:flex;flex-direction:column;gap:6px;min-height:0;padding:14px 10px;background:var(--bg-sunk);border-right:1px solid var(--line);overflow-y:auto;overflow-x:hidden}
+.ew-brand{display:flex;align-items:center;gap:10px;height:44px;padding:0 8px;margin-bottom:10px}
+.ew-brand-mark{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:linear-gradient(140deg,var(--primary),var(--accent));color:var(--on-primary);font:700 18px/1 var(--font-story);font-style:italic}
+.ew-brand-mark.is-emblem{display:block;background:none;border-radius:0;object-fit:contain}
+.ew-brand-name{font:600 19px/1 var(--font-story);letter-spacing:.2px}
+.ew-nav-avatar{display:block;width:22px;height:22px;flex:0 0 22px;margin:-1px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--line-2)}
+.ew-nav-avatar .ew-portrait{width:100%;height:100%}
+.ew-nav-avatar .ew-portrait.is-placeholder{font-size:11px}
+.ew-nav-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
+.ew-nav-item{display:flex;align-items:center;gap:12px;min-height:44px;width:100%;padding:0 12px;border-radius:var(--radius);border:0;background:transparent;color:var(--text-2);font-size:15px;font-weight:550;text-decoration:none;cursor:pointer;text-align:left}
+.ew-nav-item svg{width:20px;height:20px;flex:0 0 20px}
+.ew-nav-item:hover{background:var(--hover);color:var(--text)}
+.ew-nav-item[aria-current="page"]{background:var(--selected);color:var(--text);box-shadow:inset 3px 0 0 var(--accent)}
+.ew-nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ew-nav-foot{margin-top:auto;display:grid;gap:4px;padding-top:12px;border-top:1px solid var(--line)}
+.ew-nav-mock{justify-self:start;margin:0 0 6px 10px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
+.ew-nav-account{font-weight:600}
+.nav-collapsed .ew-nav-label,.nav-collapsed .ew-brand-name,.nav-collapsed .ew-nav-mock{display:none}
+.nav-collapsed .ew-nav-item{justify-content:center;padding:0}
+.nav-collapsed .ew-brand{justify-content:center;padding:0}
+.ew-main{position:relative;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}
+.ew-page{width:100%;max-width:1480px;margin:0 auto;padding:28px 32px 64px}
+.ew-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
+.ew-page-head h1{margin:0 0 4px;font:600 30px/1.2 var(--font-story);letter-spacing:.2px}
+.ew-page-head p{margin:0}
+.ew-page-loading{display:flex;align-items:center;justify-content:center;gap:12px;min-height:240px;color:var(--text-2)}
+.ew-page-loading.is-first{min-height:60vh}
+.ew-back{margin:-6px 0 12px -10px}
+.ew-section-title{margin:18px 0 8px;font-size:13px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
+.ew-eyebrow{margin:0 0 6px;font-size:13px;color:var(--accent);font-weight:600;letter-spacing:.04em}
+.ew-lead{font-size:17px;line-height:1.7;color:var(--text);margin:0 0 8px}
+.ew-small{font-size:13px}
+.ew-center{text-align:center}
+.ew-row{display:flex;align-items:center;gap:var(--gap)}
+.ew-row.wrap{flex-wrap:wrap}
+.ew-row.center{justify-content:center}
+.ew-grow{flex:1}
+.ew-inline-icon{width:15px;height:15px;vertical-align:-2px}
+.ew-form{display:grid;gap:14px}
+.ew-form-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.ew-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
+.ew-list-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 12px;border-radius:var(--radius);border:1px solid var(--line);background:var(--bg-2);color:var(--text);text-decoration:none;text-align:left;cursor:pointer}
+.ew-list-row:hover{background:var(--bg-3);border-color:var(--line-2)}
+.ew-list-row svg{width:18px;height:18px;color:var(--text-3);flex:0 0 18px}
+.ew-list-main{display:grid;gap:2px;min-width:0;flex:1}
+.ew-list-main small{color:var(--text-3);font-size:12.5px;overflow-wrap:anywhere}
+
+/* Demo control */
+.ew-mock-fab{position:fixed;right:18px;bottom:18px;z-index:40;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid #6b5a32;background:#2c2618ee;color:var(--mock);font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 6px 20px #0007}
+.ew-mock-fab svg{width:18px;height:18px}
+.ew-mock-count{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:auto;border-radius:999px;background:var(--mock);color:#2c2618;font-size:12px}
+.is-task .ew-mock-fab{display:none}
+.ew-scenarios{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:52vh;overflow:auto}
+.ew-scenarios li{padding:6px 8px;border-radius:var(--radius);background:var(--bg-3)}
+.ew-scenarios .ew-check{align-items:flex-start}
+.ew-scenarios .ew-check input{margin-top:3px}
+
+@media (max-width: 1100px){
+  .ew-page{padding:22px 20px 56px}
+}
diff --git a/everwith-claude-frontend/src/styles/stage.css b/everwith-claude-frontend/src/styles/stage.css
new file mode 100644
index 00000000..84300ace
--- /dev/null
+++ b/everwith-claude-frontend/src/styles/stage.css
@@ -0,0 +1,17 @@
+/* Character performance surface. Static portrait under, live canvas over (same person). */
+.ew-stage{position:relative;overflow:hidden;width:100%;height:100%;isolation:isolate;contain:strict}
+.ew-backdrop{position:absolute;inset:0;overflow:hidden;pointer-events:none}
+.ew-backdrop img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.86) brightness(.64)}
+.ew-backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 68% at 50% 36%,#0000 0 40%,#120a08a6 100%)}
+/* Grounds the figure: models and cut-out portraits end in a hard edge; this fades it into the room. */
+.ew-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(180deg,#120a0800,#120a08b8 58%,#120a08f2);pointer-events:none}
+.ew-stage-static{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;transition:opacity .35s ease}
+.ew-stage.is-live .ew-stage-static{opacity:0}
+.ew-stage-img{width:100%;height:100%;display:block}
+/* Static fallback fills the stage from the top; its cut-out lower edge dissolves into the room. */
+.ew-stage-img:not(.is-placeholder){background:transparent;-webkit-mask-image:linear-gradient(180deg,#000 60%,#0000 88%);mask-image:linear-gradient(180deg,#000 60%,#0000 88%)}
+.ew-stage-static .ew-portrait.is-placeholder{width:46%;height:auto;max-height:70%;aspect-ratio:1;margin-top:14%;border-radius:50%}
+.ew-stage-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
+.ew-stage-canvas[hidden]{display:none}
+.ew-stage-chip{z-index:2;position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:3px 8px;border-radius:999px;background:#0009;color:#f5f0ed;font:500 11px/16px var(--ew-font-ui,system-ui);backdrop-filter:blur(4px)}
+.ew-stage-chip.warn{background:#5a2a1fcc;color:#ffe2cf}
diff --git a/everwith-claude-frontend/src/styles/story.css b/everwith-claude-frontend/src/styles/story.css
new file mode 100644
index 00000000..606b99bf
--- /dev/null
+++ b/everwith-claude-frontend/src/styles/story.css
@@ -0,0 +1,128 @@
+/* Story detail / preparation / play, Recent, Create & editor. */
+
+/* ---------- Story detail ---------- */
+.ew-story-hero{display:grid;grid-template-columns:minmax(260px,420px) minmax(0,1fr);gap:32px;align-items:start;margin-bottom:28px}
+.ew-story-cover{aspect-ratio:4/3;border-radius:var(--radius-xl);overflow:hidden;background:linear-gradient(150deg,#3a2a25,#1a1210);box-shadow:var(--shadow)}
+.ew-story-cover .ew-portrait{width:100%;height:100%}
+.ew-story-cover-fallback{display:grid;place-items:center;width:100%;height:100%;min-height:160px;background:radial-gradient(120% 90% at 30% 20%,#4a3a2c,#1b1310 70%);color:#e3b99766}
+.ew-story-cover-fallback svg{width:56px;height:56px}
+.ew-story-intro{display:grid;gap:10px;align-content:start}
+.ew-story-intro .ew-lead{margin:0}
+.ew-facts{display:grid;gap:10px;margin:6px 0;padding:14px 16px;border-radius:var(--radius-l);background:var(--bg-2);border:1px solid var(--line)}
+.ew-facts div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px}
+.ew-facts dt{color:var(--text-3);font-size:13px;font-weight:600}
+.ew-facts dd{margin:0}
+.ew-facts ol{margin:0;padding-left:18px;display:grid;gap:2px}
+.ew-story-runs{margin-bottom:24px}
+.ew-role-grid{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
+.ew-role-card{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-l);background:var(--bg-2);border:1px solid var(--line)}
+.ew-role-text{display:grid;gap:3px;min-width:0;justify-items:start}
+.ew-role-text small{color:var(--text-2)}
+.ew-role-text .ew-chip svg{width:13px;height:13px}
+@media (max-width:980px){.ew-story-hero{grid-template-columns:1fr}.ew-story-cover{max-width:520px}}
+
+/* ---------- Story preparation ---------- */
+.ew-player-role{margin:0;font-size:16px}
+.ew-cast-row{grid-template-columns:56px minmax(0,1fr) minmax(200px,280px)}
+.ew-cast-text{display:grid;gap:4px;justify-items:start}
+.ew-cast-text .ew-chip svg{width:13px;height:13px}
+@media (max-width:860px){.ew-cast-row{grid-template-columns:56px minmax(0,1fr)}.ew-cast-row .ew-seat-select{grid-column:1/-1}}
+
+/* ---------- Story play ---------- */
+.ew-story{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);height:100%;min-height:0}
+.ew-story.panel-open{grid-template-columns:minmax(240px,300px) minmax(0,1fr) minmax(230px,280px)}
+.ew-story-cast{display:flex;flex-direction:column;gap:10px;min-height:0;padding:14px 14px 12px;border-right:1px solid var(--line);background:linear-gradient(180deg,#24161400,#24161488),var(--bg-sunk);overflow:auto}
+.ew-story-stage{position:relative;flex:0 0 auto;height:clamp(220px,38vh,380px);border-radius:var(--radius-xl);overflow:hidden;background:radial-gradient(120% 75% at 50% 8%,#4b3029,#1d1311 72%)}
+.ew-story-stage .ew-rail-stage-name{top:auto;bottom:10px}
+.ew-story-cast-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
+.ew-story-cast-row{display:flex;align-items:center;gap:8px;min-height:48px;padding:4px 6px;border-radius:var(--radius)}
+.ew-story-cast-row:hover{background:var(--hover)}
+.ew-story-mode-chip{align-self:flex-start;margin:auto 0 0}
+.ew-story-main{position:relative}
+.ew-story-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 24px}
+.ew-story-toolbar .ew-btn svg{width:16px;height:16px}
+.ew-story-scene{position:relative;flex:0 0 auto;height:clamp(120px,21vh,220px);margin:0 24px;border-radius:var(--radius-l);overflow:hidden;background:radial-gradient(120% 120% at 20% 10%,#3b4a52,#151b1f 70%);border:1px solid var(--line)}
+.ew-story-scene img{display:block;width:100%;height:100%;object-fit:cover}
+.ew-story-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 45%,#0b0605b3 100%);pointer-events:none}
+.ew-story-scene-label{position:absolute;left:12px;bottom:10px;z-index:1;max-width:calc(100% - 24px);padding:3px 10px;border-radius:999px;background:#000a;color:#f5f0ed;font-size:12.5px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ew-story-main>.ew-notice{margin:0 24px}
+.ew-story-composer{display:block}
+.ew-story-composer>*{width:100%}
+.ew-story-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
+.ew-story-actions .ew-btn svg{width:16px;height:16px}
+.ew-story-state{display:grid;align-content:start;gap:14px;padding:16px;border-left:1px solid var(--line);background:var(--bg-2);overflow:auto;min-height:0}
+.ew-story-state h3{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:13px;font-weight:650;color:var(--text-2)}
+.ew-story-state h3 svg{width:15px;height:15px;color:var(--accent)}
+.ew-objectives{margin:0;padding-left:20px;display:grid;gap:4px;font-size:14px}
+.ew-objectives li.is-done{color:var(--text-3);text-decoration:line-through}
+.ew-objectives li.is-current{color:var(--text);font-weight:600}
+.ew-objectives li.is-current::marker{color:var(--accent)}
+.ew-clues{margin:0;padding-left:18px;display:grid;gap:4px;font-size:14px}
+.ew-story-hint p{margin:0;padding:8px 10px;border-radius:var(--radius);background:var(--bg-3);white-space:pre-wrap}
+.ew-story-divider{display:flex;align-items:center;justify-content:center;gap:6px;margin:4px 0;color:var(--text-3);font-size:12px}
+.ew-story-divider svg{width:14px;height:14px}
+.ew-story-delta{display:flex;justify-content:center;gap:8px;margin:2px 0 0;font-size:12px}
+.ew-turn.is-pending{opacity:.92}
+.ew-quote{margin:8px 0 0;padding:8px 12px;border-left:3px solid var(--accent);background:var(--bg-3);border-radius:0 var(--radius) var(--radius) 0;white-space:pre-wrap;overflow-wrap:anywhere}
+@media (max-width:1240px){.ew-story,.ew-story.panel-open{grid-template-columns:minmax(220px,260px) minmax(0,1fr)}.ew-story-state{position:fixed;right:0;top:0;bottom:0;z-index:30;width:min(320px,90vw);box-shadow:-18px 0 40px #0009}}
+@media (max-width:980px){.ew-story,.ew-story.panel-open{grid-template-columns:minmax(0,1fr)}.ew-story-cast{display:none}}
+
+/* ---------- Recent ---------- */
+.ew-records{list-style:none;margin:0;padding:0;display:grid;gap:10px}
+.ew-record{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;border-radius:var(--radius-l);background:var(--bg-2);border:1px solid var(--line)}
+.ew-record-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--radius-l);background:var(--bg-3);overflow:hidden}
+.ew-record-icon svg{width:24px;height:24px;color:var(--accent)}
+.ew-record-icon .ew-portrait{width:100%;height:100%}
+.ew-record-main{display:grid;gap:4px;min-width:0}
+.ew-record-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.ew-record-title strong{font-size:16px}
+.ew-record-lineup{color:var(--text-2);font-size:13.5px;overflow-wrap:anywhere}
+.ew-record-meta{color:var(--text-3);font-size:12.5px}
+.ew-record-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
+@media (max-width:760px){.ew-record{grid-template-columns:44px minmax(0,1fr)}.ew-record-icon{width:44px;height:44px}.ew-record-actions{grid-column:1/-1;justify-content:flex-start}}
+
+/* ---------- Create ---------- */
+.ew-works{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
+.ew-work-card{display:grid;grid-template-columns:60px minmax(0,1fr);align-items:center;gap:14px;padding:12px 16px 12px 12px;border-radius:var(--radius-l);background:var(--bg-2);border:1px solid var(--line);text-decoration:none;color:var(--text)}
+.ew-work-text{display:grid;gap:6px;min-width:0}
+.ew-work-cover{display:block;width:60px;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:var(--bg-3);box-shadow:0 4px 14px #0007}
+.ew-work-cover .ew-portrait{width:100%;height:100%}
+.ew-work-cover.small{width:30px;border-radius:5px;box-shadow:none}
+.ew-cover-picker{display:flex;flex-wrap:wrap;gap:10px}
+.ew-cover-choice{display:grid;place-items:center;width:62px;aspect-ratio:2/3;padding:0;border-radius:8px;overflow:hidden;border:2px solid var(--line-2);background:var(--bg-3);color:var(--text-3);font-size:11px;cursor:pointer}
+.ew-cover-choice img{display:block;width:100%;height:100%;object-fit:cover}
+.ew-cover-choice:hover{border-color:var(--text-3)}
+.ew-cover-choice[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px #e3b99744}
+.ew-work-card:hover{border-color:var(--line-2);background:var(--bg-3)}
+.ew-work-card strong{font-size:16px;overflow-wrap:anywhere}
+.ew-type-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
+.ew-type-choice button{display:grid;gap:4px;justify-items:start;text-align:left;padding:14px 16px;min-height:88px;border-radius:var(--radius-l);border:1px solid var(--line-2);background:var(--bg-3);color:var(--text);cursor:pointer}
+.ew-type-choice button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
+.ew-type-choice button small{color:var(--text-2);font-size:13px}
+.ew-type-choice svg{width:22px;height:22px;color:var(--accent)}
+.ew-type-art{display:block;width:72px;height:72px;object-fit:contain;margin:-4px 0 2px -4px}
+.ew-editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);height:100%;min-height:0}
+.ew-editor.is-preview-zoom{grid-template-columns:minmax(0,0fr) minmax(0,1fr)}
+.ew-editor.is-preview-zoom .ew-editor-form{display:none}
+.ew-editor-form{min-height:0;overflow:auto;padding:20px 28px 64px}
+.ew-editor-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
+.ew-editor-head h1{margin:0;font:600 24px/1.25 var(--font-story);overflow-wrap:anywhere}
+.ew-editor-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
+.ew-editor-section{display:grid;gap:12px;margin:0 0 18px;padding:16px 18px;border-radius:var(--radius-l);background:var(--bg-2);border:1px solid var(--line)}
+.ew-editor-section h2{margin:0;font-size:15px;font-weight:650}
+.ew-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
+.ew-editor-grid .is-wide{grid-column:1/-1}
+.ew-role-edit{display:grid;gap:10px;padding:12px;border-radius:var(--radius);background:var(--bg-3);border:1px solid var(--line)}
+.ew-role-edit header{display:flex;align-items:center;gap:8px}
+.ew-role-edit header strong{flex:1}
+.ew-assist{display:flex;gap:8px;flex-wrap:wrap}
+.ew-assist-summary{margin:0;padding-left:18px;font-size:13px;color:var(--text-2)}
+.ew-field-error{color:var(--danger);font-size:12.5px}
+.ew-preview{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line);background:var(--bg-sunk)}
+.ew-preview-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
+.ew-preview-head strong{margin-right:auto}
+.ew-preview-body{flex:1 1 auto;min-height:0;overflow:auto;padding:12px 16px;display:grid;align-content:start;gap:10px}
+.ew-preview>.ew-notice{margin:10px 14px 0}
+.ew-preview-composer{padding:10px 12px 12px;border-top:1px solid var(--line)}
+@media (max-width:1180px){.ew-editor{grid-template-columns:minmax(0,1fr) minmax(300px,360px)}.ew-editor-grid{grid-template-columns:1fr}}
+@media (max-width:900px){.ew-editor{grid-template-columns:1fr;height:auto}.ew-preview{border-left:0;border-top:1px solid var(--line);min-height:480px}}
diff --git a/everwith-claude-frontend/tests/cabo-rules.test.ts b/everwith-claude-frontend/tests/cabo-rules.test.ts
new file mode 100644
index 00000000..f624ba62
--- /dev/null
+++ b/everwith-claude-frontend/tests/cabo-rules.test.ts
@@ -0,0 +1,64 @@
+/**
+ * Targeted CABO scoring branches on the frozen engine (provisional component profile):
+ * shooting the moon, failed CABO +5, caller tie wins, exactly 100 → 50 once, >100 ends.
+ * States are real engine states with card VALUES re-assigned by swapping (the 52-value
+ * multiset is preserved, so the engine's own conservation checks still pass).
+ */
+import {describe, expect, it} from 'vitest'
+import * as cabo from '../src/games/engines/cabo/engine'
+
+/** Re-deal VALUES: the given hands get exact values; every other card gets the rest of the 52-value multiset. */
+function assignHands(s: cabo.CaboState, hands: Record<number, number[]>) {
+  const pool = [...cabo.DECK]
+  const handIds = new Set<string>()
+  for (const [p, values] of Object.entries(hands)) values.forEach((v, i) => {
+    const k = pool.indexOf(v); expect(k, `value ${v} exists`).toBeGreaterThanOrEqual(0); pool.splice(k, 1)
+    const id = s.players[Number(p)].cards[i]; s.truth[id] = v; handIds.add(id)
+  })
+  Object.keys(s.truth).filter(id => !handIds.has(id)).forEach((id, i) => { s.truth[id] = pool[i] })
+}
+const fresh = (players = 3) => {
+  let s = cabo.create({players, seed: 4242})
+  // Opening peeks for everyone (fixed strategy), so the state is a real “turn” state.
+  for (let i = 0; i < 50 && s.phase !== 'turn'; i++) s = cabo.act(s, s.current, cabo.decide(cabo.observe(s, s.current), 'medium', {seed: i + 1}))
+  return structuredClone(s)
+}
+
+describe('CABO scoring branches (frozen engine)', () => {
+  it('shooting the moon: 12/12/13/13 scores 0 for the shooter and +50 for everyone else', () => {
+    const s = fresh()
+    assignHands(s, {1: [12, 12, 13, 13], 0: [0, 1, 2, 3], 2: [4, 4, 5, 5]})
+    cabo.assertState(s)
+    const rows = cabo.roundScores(s)
+    expect(rows[1]).toMatchObject({gain: 0, reason: 'shootingTheMoon'})
+    expect(rows[0]).toMatchObject({gain: 50, reason: 'shootingTheMoon'})
+    expect(rows[2]).toMatchObject({gain: 50, reason: 'shootingTheMoon'})
+  })
+  it('a failed CABO adds 5; a caller tied for lowest wins alone', () => {
+    const s = fresh()
+    assignHands(s, {0: [6, 6, 7, 7], 1: [1, 1, 2, 2], 2: [3, 3, 4, 4]})
+    s.caller = 0
+    let rows = cabo.roundScores(s)
+    expect(rows[0]).toMatchObject({sum: 26, gain: 31, reason: 'caboFailed'})
+    expect(rows[1]).toMatchObject({gain: 0, reason: 'lowest'})
+    assignHands(s, {0: [1, 1, 2, 2], 1: [1, 1, 2, 2], 2: [3, 3, 4, 4]}) // seat 0 now tied with seat 1
+    rows = cabo.roundScores(s)
+    expect(rows[0]).toMatchObject({gain: 0, reason: 'lowest'})
+    expect(rows[1]).toMatchObject({gain: 6, reason: 'cardSum'})
+  })
+  it('exactly 100 resets once to 50; above 100 ends the game with the lowest total winning', () => {
+    let s = fresh()
+    assignHands(s, {0: [5, 5, 5, 5], 1: [0, 0, 1, 1], 2: [9, 9, 9, 9]})
+    s.players[0].total = 80   // 80 + 20 = 100 → back to 50 (first time)
+    s.players[2].total = 70   // 70 + 36 = 106 → game ends
+    // Seat 1 called CABO earlier; seat 0 takes the last turn of the final queue.
+    s.caller = 1; s.finalQueue = [0]; s.current = 0; s.phase = 'turn'
+    s = cabo.act(s, 0, {type: 'draw', source: 'deck'})
+    s = cabo.act(s, 0, {type: 'discard', useAbility: false})
+    const row0 = s.roundResults.find(r => r.player === 0)!
+    expect(row0).toMatchObject({rawAfter: 100, reset: true, after: 50})
+    expect(s.players[0]).toMatchObject({total: 50, resetUsed: true})
+    expect(s.ended).toBe(true)
+    expect(s.winners).toEqual([1])
+  })
+})
diff --git a/everwith-claude-frontend/tests/components.test.tsx b/everwith-claude-frontend/tests/components.test.tsx
new file mode 100644
index 00000000..66d8bcb9
--- /dev/null
+++ b/everwith-claude-frontend/tests/components.test.tsx
@@ -0,0 +1,162 @@
+/**
+ * Component-level checks in jsdom: IME-safe Enter (synthetic composition events only —
+ * a real macOS/Windows Chinese IME pass still needs a person) and hidden-information
+ * rendering on the CABO / Splendor boards.
+ */
+import {afterEach, describe, expect, it, vi} from 'vitest'
+import {useState} from 'react'
+import {cleanup, fireEvent, render} from '@testing-library/react'
+import {Composer} from '../src/chat/Composer'
+import {CaboBoard} from '../src/features/games/boards/CaboBoard'
+import {SplendorBoard} from '../src/features/games/boards/SplendorBoard'
+import * as cabo from '../src/games/engines/cabo/engine'
+import * as splendor from '../src/games/engines/splendor/splendor/rules'
+import {splendorProjection} from '../src/mock/games/modules'
+import type {GameViewJSON} from '../src/api/types'
+import {LiveStage} from '../src/live2d/LiveStage'
+import {CHARACTERS} from '../src/live2d/characters'
+import {SpotArt, StageBackdrop} from '../src/components/Art'
+import {missingUrl} from '../src/components/Portrait'
+
+afterEach(cleanup)
+
+function Harness({onSubmit}: {onSubmit: (t: string) => void}) {
+  const [v, setV] = useState('你好')
+  return <Composer value={v} onChange={setV} onSubmit={onSubmit} label="input" placeholder="input" />
+}
+
+describe('Composer IME safety', () => {
+  it('Enter sends; Shift+Enter does not', () => {
+    const sent = vi.fn()
+    const {container} = render(<Harness onSubmit={sent} />)
+    const ta = container.querySelector('textarea')!
+    fireEvent.keyDown(ta, {key: 'Enter', shiftKey: true})
+    expect(sent).not.toHaveBeenCalled()
+    fireEvent.keyDown(ta, {key: 'Enter'})
+    expect(sent).toHaveBeenCalledTimes(1)
+  })
+  it('the * button wraps the selected text as an action span', () => {
+    const {container} = render(<Harness onSubmit={() => {}} />)
+    const ta = container.querySelector('textarea')!
+    ta.focus(); ta.setSelectionRange(0, 2)
+    fireEvent.mouseDown(container.querySelector('.ew-star')!)
+    fireEvent.click(container.querySelector('.ew-star')!)
+    expect(ta.value).toBe('*你好*')
+  })
+  it('double-click on Send: one send, and the second click does not hit the Stop that replaced it', () => {
+    const sent = vi.fn(), stop = vi.fn()
+    function BusyHarness() {
+      const [v, setV] = useState('你好'), [busy, setBusy] = useState(false)
+      return <Composer value={v} onChange={setV} onSubmit={t => { sent(t); setBusy(true) }} onStop={stop} busy={busy} label="input" placeholder="input" />
+    }
+    const {container} = render(<BusyHarness />)
+    fireEvent.click(container.querySelector('.ew-send')!, {detail: 1})
+    const stopBtn = container.querySelector('.ew-send.is-stop')!
+    expect(stopBtn).toBeTruthy()
+    fireEvent.click(stopBtn, {detail: 2}) // second half of the double-click
+    expect(sent).toHaveBeenCalledTimes(1)
+    expect(stop).not.toHaveBeenCalled()
+    fireEvent.click(stopBtn, {detail: 1}) // a deliberate, separate click still stops
+    expect(stop).toHaveBeenCalledTimes(1)
+  })
+  it('no send while composing (compositionstart / isComposing / keyCode 229) nor right after compositionend', async () => {
+    const sent = vi.fn()
+    const {container} = render(<Harness onSubmit={sent} />)
+    const ta = container.querySelector('textarea')!
+    fireEvent.compositionStart(ta)
+    fireEvent.keyDown(ta, {key: 'Enter', isComposing: true})
+    fireEvent.keyDown(ta, {key: 'Enter', keyCode: 229})
+    fireEvent.compositionEnd(ta)
+    fireEvent.keyDown(ta, {key: 'Enter'}) // the trailing Enter some IMEs deliver right after commit
+    expect(sent).not.toHaveBeenCalled()
+    await new Promise(r => setTimeout(r, 80))
+    fireEvent.keyDown(ta, {key: 'Enter'})
+    expect(sent).toHaveBeenCalledTimes(1)
+  })
+})
+
+const seat = (n: number, name: string) => ({seat: n, kind: n === 0 ? 'player' as const : 'temporary' as const, identity: `id-${n}`, friend_epoch: null, name, source_id: null, source_version: null, avatar: null, live2d: null})
+const wrap = (game_id: 'cabo' | 'gems', player_view: unknown, players: number, revision = 5): GameViewJSON => ({
+  schema_version: 'everwith-game-view-v1', mode: 'rule_simulated_companions', id: 'g1', game_id, profile: game_id === 'cabo' ? 'cabo-shareful-2025-en-slice-provisional' : 'splendor-base-2024-v2',
+  seats: Array.from({length: players}, (_, i) => seat(i, i ? `NPC${i}` : 'You')), lifecycle: 'active', revision, ai_hold: false, actor_seat: 0, phase: 'x', player_view, settlement: null,
+  origin: {kind: 'discover', return_hash: '#/discover'}, created_at: '', updated_at: '', rematch_of: null, archived: false, log: [], expressions: {}, chat_count: 0,
+})
+
+describe('CABO board never renders an unknown value', () => {
+  it('opponent face-down cards are backs with no numbers; my known cards carry a badge without a number', () => {
+    let s = cabo.create({players: 3, seed: 5})
+    // Play setup + a few turns with the fixed strategy until it is seat 0's turn.
+    for (let i = 0; i < 200 && !(s.phase === 'turn' && s.current === 0 && s.setupDone.length === 3); i++) s = cabo.act(s, s.current, cabo.decide(cabo.observe(s, s.current), 'medium', {seed: i + 1}))
+    expect(s.phase).toBe('turn')
+    const o = cabo.observe(s, 0)
+    const {container} = render(<CaboBoard view={wrap('cabo', o, 3)} pending={false} act={async () => true} seatName={n => n ? `NPC${n}` : 'You'} readOnly={false} />)
+    for (const p of s.players.filter(p => p.id !== 0)) for (const id of p.cards) {
+      if (s.up[id]) continue
+      const el = container.querySelector(`[data-testid="cabo-seat${p.id}-${p.positions[id]}"]`)!
+      expect(el, `seat ${p.id} slot ${p.positions[id]}`).toBeTruthy()
+      expect(el.querySelector('.cb-front')).toBeNull()
+      expect(el.getAttribute('aria-label')).toMatch(/盖着|face down/)
+      expect(el.textContent).not.toMatch(/\d/)
+    }
+    const knownOwn = s.players[0].cards.filter(id => typeof s.knowledge[0][id] === 'number' && !s.up[id])
+    expect(knownOwn.length).toBeGreaterThan(0)
+    for (const id of knownOwn) {
+      const el = container.querySelector(`[data-testid="cabo-own-${s.players[0].positions[id]}"]`)!
+      expect(el.querySelector('.cb-known')).toBeTruthy()
+      expect(el.querySelector('.cb-front')).toBeNull()
+      expect(el.textContent).not.toMatch(/\d/)
+    }
+  })
+})
+
+describe('Splendor board hides other seats\' blind reserves', () => {
+  it('shows only a tier back: no card id, no click target, no tooltip with card data', () => {
+    let s = splendor.createGame({players: 2, seed: 'unit-blind'})
+    const take = splendor.legalActions(s, 0).find(a => a.type === 'take')!
+    s = splendor.applyAction(s, 0, take)
+    s = splendor.applyAction(s, 1, {type: 'reserve', tier: 2})
+    const hiddenId = s.players[1].reserved[0]!
+    const {container} = render(<SplendorBoard view={wrap('gems', splendorProjection(s, 0), 2)} pending={false} act={async () => true} seatName={n => n ? 'NPC1' : 'You'} readOnly={false} />)
+    expect(container.innerHTML).not.toContain(hiddenId)
+    const seat1 = container.querySelector('[data-seat="1"]')!
+    const back = seat1.querySelector('.sp-card.is-back')!
+    expect(back.tagName).toBe('SPAN')
+    expect(back.getAttribute('aria-label')).toMatch(/暗预留|Blind reserve/)
+    expect(back.getAttribute('data-card')).toBeNull()
+  })
+  it('offers exactly the engine\'s legal takes and buys to seat 0', () => {
+    const s = splendor.createGame({players: 3, seed: 'unit-legal'})
+    const {container} = render(<SplendorBoard view={wrap('gems', splendorProjection(s, 0), 3)} pending={false} act={async () => true} seatName={n => `P${n}`} readOnly={false} />)
+    const legal = container.querySelector('[data-testid="splendor-legal"]')!
+    const engineTakes = splendor.legalActions(s, 0).filter(a => a.type === 'take').map(a => [...(a as {colors: string[]}).colors].sort().join('+')).sort()
+    expect((legal.getAttribute('data-take') ?? '').split(' ').filter(Boolean).sort()).toEqual(engineTakes)
+    expect(container.querySelectorAll('button[data-testid^="splendor-bank-gold"]').length).toBe(0)
+  })
+})
+
+describe('generated art (user-provided batch) stays decorative', () => {
+  // active={false}: no WebGL in jsdom; the static layer and the backdrop are what is under test.
+  it('the stage backdrop follows the character, falls back to the generic room, and can be turned off', () => {
+    const {container, rerender} = render(<LiveStage character={CHARACTERS.nora} name="Nora" active={false} />)
+    const src = () => container.querySelector('.ew-backdrop img')?.getAttribute('src') ?? null
+    expect(src()).toBe('/generated/batch-01/backdrop-nora.webp')
+    expect(container.querySelector('.ew-backdrop')?.getAttribute('aria-hidden')).toBe('true')
+    rerender(<LiveStage character={null} name="Mine" active={false} />)
+    expect(src()).toBe('/generated/batch-01/backdrop-generic.webp')
+    rerender(<LiveStage character={CHARACTERS.nora} name="Nora" active={false} backdrop={null} />)
+    expect(container.querySelector('.ew-backdrop')).toBeNull()
+  })
+  it('the missing-assets scenario rewrites package and generated paths alike', () => {
+    expect(missingUrl('/generated/batch-01/backdrop-iris.webp')).toBe('/generated/__missing__/batch-01/backdrop-iris.webp')
+    expect(missingUrl('/handoff/assets/companions/feed/iris.webp')).toBe('/handoff/__missing__/assets/companions/feed/iris.webp')
+    expect(missingUrl('/elsewhere.png')).toBe('/elsewhere.png')
+  })
+  it('a backdrop or spot illustration that fails to load disappears instead of showing a broken image', () => {
+    const {container} = render(<div><StageBackdrop src="/generated/batch-01/backdrop-iris.webp" /><SpotArt kind="recent" /></div>)
+    expect(container.querySelectorAll('img')).toHaveLength(2)
+    expect(container.querySelector('.ew-spot')?.getAttribute('alt')).toBe('')
+    fireEvent.error(container.querySelector('.ew-backdrop img')!)
+    fireEvent.error(container.querySelector('.ew-spot')!)
+    expect(container.querySelectorAll('img')).toHaveLength(0)
+  })
+})
diff --git a/everwith-claude-frontend/tests/engines.test.ts b/everwith-claude-frontend/tests/engines.test.ts
new file mode 100644
index 00000000..87306ef2
--- /dev/null
+++ b/everwith-claude-frontend/tests/engines.test.ts
@@ -0,0 +1,118 @@
+/**
+ * Pure-engine complete games through the SAME module layer the mock authority uses,
+ * plus projection checks: what seat 0 receives never carries other seats' hidden facts.
+ * Synthetic seeds only; no UI, no network. (UI full games are in e2e/games.spec.ts.)
+ */
+import {describe, expect, it} from 'vitest'
+import {createHash} from 'node:crypto'
+import {readFileSync} from 'node:fs'
+import {resolve} from 'node:path'
+import * as royale from '../src/games/engines/royale/engine'
+import * as splendor from '../src/games/engines/splendor/splendor/rules'
+import * as cabo from '../src/games/engines/cabo/engine'
+import {GAME_MODULES} from '../src/mock/games/modules'
+import type {GameId} from '../src/mock/games/modules'
+
+const ROOT = resolve(__dirname, '..')
+
+function playOut(id: GameId, players: number, seed: number, profile?: string, inspect?: (state: unknown) => void) {
+  const m = GAME_MODULES[id]
+  let state = m.create(players, seed, profile)
+  let steps = 0
+  while (!m.ended(state) && steps < 6000) {
+    const actor = m.actor(state)
+    const seat = actor === 'any' ? 0 : actor
+    const action = m.ai(state, seat, seed + steps)
+    state = m.apply(state, seat, action)
+    m.check(state)
+    inspect?.(state)
+    steps++
+  }
+  return {state, steps, settle: m.settle(state)}
+}
+
+describe('frozen engine copies', () => {
+  it('are byte-identical to the handoff (sha256 from PROVENANCE.json)', () => {
+    const prov = JSON.parse(readFileSync(resolve(ROOT, 'src/games/engines/PROVENANCE.json'), 'utf8')) as {files: {file: string; sha256: string}[]}
+    expect(prov.files.length).toBeGreaterThanOrEqual(9)
+    for (const f of prov.files) expect(createHash('sha256').update(readFileSync(resolve(ROOT, 'src/games/engines', f.file))).digest('hex'), f.file).toBe(f.sha256)
+  })
+})
+
+describe('Royale (las-vegas-royale-broadway-zh-intro-v1)', () => {
+  for (const players of [2, 3, 4, 5]) it(`${players} players play three full rounds to a settled result`, () => {
+    const {state, settle} = playOut('vegas', players, 917 + players, undefined, s => {
+      const v = GAME_MODULES.vegas.view(s, 0) as Record<string, unknown> & {players: {id: number; earnings: unknown[]; cash: number | null}[]}
+      expect('rng' in v).toBe(false)
+      expect('deck' in v).toBe(false)
+      if ((s as royale.State).phase !== 'ended') for (const p of v.players.filter(p => p.id !== 0)) { expect(p.cash).toBeNull(); expect(p.earnings.every(e => e === null)).toBe(true) }
+    })
+    const s = state as royale.State
+    expect(s.phase).toBe('ended')
+    expect(s.round).toBe(3)
+    expect(s.roundHistory).toHaveLength(3)
+    expect(s.roundHistory.every(r => r.length === 6)).toBe(true)
+    expect(settle.winners.length).toBeGreaterThan(0)
+    expect(settle.scores).toEqual(s.players.map(royale.wealth))
+  })
+})
+
+describe('Splendor', () => {
+  for (const players of [2, 3, 4]) it(`v2 · ${players} players reach 15 and finish the round`, () => {
+    let blindSeen = false
+    const {state, settle} = playOut('gems', players, 31 + players, 'splendor-base-2024-v2', st => {
+      const s = st as splendor.SplendorState
+      const v = GAME_MODULES.gems.view(s, 0) as {decks: Record<string, unknown>; players: {reserved: {card: string | null; hidden: boolean}[]}[]; seed?: unknown}
+      expect(Object.values(v.decks).every(x => typeof x === 'number')).toBe(true)
+      expect('seed' in v).toBe(false)
+      // Other seats' blind reserves never reach seat 0 as card ids.
+      const blind = new Set<string>()
+      s.events.forEach(e => { if (e.type === 'reserve' && e.blind === true) blindSeen = true })
+      s.players.forEach((p, i) => { if (i === 0) return; p.reserved.forEach((id, k) => { if (id && v.players[i].reserved[k].hidden) blind.add(id) }) })
+      for (const id of blind) expect(JSON.stringify(v.players.slice(1))).not.toContain(`"${id}"`)
+    })
+    const s = state as splendor.SplendorState
+    expect(s.ended).toBe(true)
+    expect(Math.max(...s.players.map(splendor.score))).toBeGreaterThanOrEqual(15)
+    expect(s.current).toBe(players - 1) // the round was completed (last seat moved)
+    expect(settle.scores).toEqual(s.players.map(splendor.score))
+    void blindSeen
+  })
+  it('legacy v1 saves keep their own rules and still finish', () => {
+    const {state} = playOut('gems', 3, 7, 'splendor-legacy-v1')
+    const s = state as splendor.SplendorState
+    expect(s.version).toBe(1)
+    expect(splendor.rulesProfileFor(s)).toBe('splendor-legacy-v1')
+    expect(s.ended).toBe(true)
+  })
+  it('refuses unknown rule profiles instead of upgrading', () => {
+    expect(() => splendor.createGame({rulesProfile: 'splendor-unknown', players: 2, seed: 'x'})).toThrow()
+    expect(() => splendor.rulesProfileFor({version: 2, rulesProfile: 'other'})).toThrow()
+  })
+})
+
+describe('CABO (cabo-shareful-2025-en-slice-provisional)', () => {
+  for (const players of [2, 3, 4, 5]) it(`${players} players play to a cumulative end (>100)`, () => {
+    const {state, settle} = playOut('cabo', players, 711 + players, undefined, st => {
+      const s = st as cabo.CaboState
+      const o = GAME_MODULES.cabo.view(s, 0) as cabo.CaboObservation
+      expect(o.observer).toBe(0)
+      expect(o.deck.every(x => x === null)).toBe(true)
+      expect('truth' in (o as object)).toBe(false)
+      const inRound = !['roundEnd', 'ended'].includes(s.phase)
+      if (inRound) for (const p of o.players) for (const c of p.cards) if (!s.up[c.id]) expect(c.value).toBeNull()
+      // Knowledge only lists cards seat 0 legitimately knows.
+      for (const id of Object.keys(o.knowledge)) expect(s.knowledge[0][id]).toBe(s.truth[id])
+      if (s.drawn && s.current !== 0 && s.drawnFrom === 'deck') expect(o.drawn?.value).toBeNull()
+      if (o.privateReveal) expect(o.privateReveal.player).toBe(0)
+    })
+    const s = state as cabo.CaboState
+    expect(s.ended).toBe(true)
+    expect(s.players.some(p => p.total > 100)).toBe(true)
+    expect(settle.winners.every(w => s.players[w].total === Math.min(...s.players.map(p => p.total)))).toBe(true)
+  })
+  it('marks the component profile and ability numbers as provisional', () => {
+    expect(cabo.ability(7)).toBe('peek'); expect(cabo.ability(9)).toBe('spy'); expect(cabo.ability(11)).toBe('swap'); expect(cabo.ability(6)).toBeNull()
+    expect(cabo.DECK).toHaveLength(52)
+  })
+})
diff --git a/everwith-claude-frontend/tests/mock-api.test.ts b/everwith-claude-frontend/tests/mock-api.test.ts
new file mode 100644
index 00000000..59dbb253
--- /dev/null
+++ b/everwith-claude-frontend/tests/mock-api.test.ts
@@ -0,0 +1,241 @@
+/**
+ * Mock authority + typed client + chat controller, end to end in-process (no network).
+ * These prove the client-side guarantees against the mock; they are NOT real-service E2E.
+ */
+import {beforeAll, describe, expect, it} from 'vitest'
+import {api} from '../src/api/adapter'
+import {db, resetDB} from '../src/mock/db'
+import {WORK_COVERS} from '../src/art/generated'
+import type {StorySessionJSON} from '../src/api/types'
+import {scenarios} from '../src/mock/scenarios'
+import {createChatController} from '../src/chat/stream-controller'
+import type {ChatController, ChatTransport} from '../src/chat/stream-controller'
+import type {CompanionFriend} from '../src/contracts/companion'
+import type {PrivateSnapshot} from '../src/contracts/private-chat-client'
+
+let accountId = ''
+const until = async (pred: () => boolean, ms = 15000) => {
+  const t0 = Date.now()
+  while (!pred()) { if (Date.now() - t0 > ms) throw new Error('timeout'); await new Promise(r => setTimeout(r, 40)) }
+}
+function controllerFor(friend: CompanionFriend, snapshot: PrivateSnapshot): ChatController {
+  const conversationId = snapshot.conversation.id
+  const transport: ChatTransport = {
+    send: (cmd, signal) => api.chat.send(conversationId, cmd, accountId, friend.epoch, signal),
+    stream: (adm, signal) => api.chat.stream(adm, signal),
+    cancel: id => api.chat.cancel(id, accountId, friend.epoch),
+    receipt: id => api.chat.receipt(id),
+    retry: id => api.chat.retry(id, accountId, friend.epoch),
+    lookup: key => api.chat.lookup(conversationId, key),
+    read: () => api.chat.read(conversationId, friend.id, friend.epoch),
+  }
+  return createChatController(snapshot, {account_id: accountId, friend_id: friend.id, friend_epoch: friend.epoch, session_id: conversationId, allow_fictional_thought: false}, transport)
+}
+const playerTurns = (s: PrivateSnapshot, text: string) => s.history.turns.filter(t => t.player_expression === text).length
+
+beforeAll(async () => {
+  resetDB(); scenarios.clear()
+  const account = await api.account.register('unit@example.com', 'password123')
+  accountId = account.account!.id
+})
+
+describe('friends', () => {
+  it('add is idempotent per key; a different intent under the same key is rejected; same source makes separate people', async () => {
+    const input = {key: 'fk-1', source_id: 'official-lena', source_version: '1', name: 'Lena A', expected_account_id: accountId}
+    const a = await api.friends.add(input)
+    const again = await api.friends.add(input)
+    expect(again.id).toBe(a.id)
+    await expect(api.friends.add({...input, name: 'Someone else'})).rejects.toMatchObject({code: 'idempotency_conflict'})
+    const b = await api.friends.add({...input, key: 'fk-2', name: 'Lena B'})
+    expect(b.id).not.toBe(a.id)
+    expect(b.display_number).toBe(2)
+    const list = await api.friends.list(accountId)
+    expect(list.items.filter(f => f.source_id === 'official-lena').map(f => f.name).sort()).toEqual(['Lena A', 'Lena B'])
+  })
+  it('reset starts a new epoch and makes the old conversation read-only', async () => {
+    const f = await api.friends.add({key: 'fk-reset', source_id: 'official-marcus', source_version: '1', name: 'Marcus R', expected_account_id: accountId})
+    const before = await api.chat.open(f.id, f.epoch, accountId, 'open-r1', 'zh')
+    const reset = await api.friends.reset(f.id, f.epoch, accountId)
+    expect(reset.epoch).toBe(f.epoch + 1)
+    const old = await api.chat.read(before.conversation.id, f.id, f.epoch)
+    expect(old.conversation.status).toBe('read_only')
+    await expect(api.friends.rename(f.id, f.epoch, 'stale', accountId)).rejects.toMatchObject({code: 'friend_epoch_changed'})
+  })
+})
+
+describe('private chat controller against the mock authority', () => {
+  let friend: CompanionFriend
+  let c: ChatController
+  beforeAll(async () => {
+    friend = await api.friends.add({key: 'fk-chat', source_id: 'official-nora', source_version: '1', name: 'Nora C', expected_account_id: accountId})
+    c = controllerFor(friend, await api.chat.open(friend.id, friend.epoch, accountId, 'open-c1', 'zh'))
+  })
+  it('send → public frames → verified receipt commits exactly once; a second send while active is refused', async () => {
+    const first = c.start('你好', 'zh', 'key-hello')
+    const second = await c.start('又一条', 'zh')
+    expect(second).toBe(false)
+    await first
+    await until(() => ['committed', 'idle'].includes(c.getSnapshot().phase))
+    const v = c.getSnapshot()
+    expect(playerTurns(v.history, '你好')).toBe(1)
+    expect(v.provisional).toEqual([])
+  })
+  it('retryable failure keeps the input and an explicit Retry reuses the same operation', async () => {
+    scenarios.set('chat.retryable_failure', true)
+    await c.start('第二句', 'zh')
+    await until(() => c.getSnapshot().history.pending_operation?.status === 'retryable_failed' || c.getSnapshot().notice?.kind === 'retryable', 20000)
+    const opId = c.getSnapshot().history.pending_operation?.operation_id
+    expect(playerTurns(c.getSnapshot().history, '第二句')).toBe(0)
+    await c.retry()
+    await until(() => ['committed', 'idle'].includes(c.getSnapshot().phase), 20000)
+    expect(playerTurns(c.getSnapshot().history, '第二句')).toBe(1)
+    expect(opId).toBeTruthy()
+  })
+  it('unknown result: looks up the ORIGINAL key and never creates a second turn', async () => {
+    scenarios.set('chat.unknown_result', true)
+    await c.start('结果未知', 'zh', 'key-unknown')
+    expect(c.getSnapshot().phase).toBe('unknown')
+    await c.lookup()
+    await until(() => ['committed', 'idle'].includes(c.getSnapshot().phase) || c.getSnapshot().notice?.kind === 'lookup_missing', 20000)
+    if (c.getSnapshot().notice?.kind === 'lookup_missing') await c.resendSameKey()
+    await until(() => ['committed', 'idle'].includes(c.getSnapshot().phase), 20000)
+    expect(playerTurns(c.getSnapshot().history, '结果未知')).toBe(1)
+  })
+  it('Stop that loses to a commit reports “already completed” and keeps the result', async () => {
+    scenarios.set('chat.commit_before_cancel', true)
+    const run = c.start('停止竞争', 'zh')
+    await until(() => ['generating', 'awaiting_commit', 'starting'].includes(c.getSnapshot().phase))
+    await c.cancel()
+    await run
+    await until(() => !['sending', 'starting', 'generating', 'awaiting_commit', 'cancelling'].includes(c.getSnapshot().phase), 20000)
+    expect(c.getSnapshot().notice?.kind).toBe('commit_won')
+    expect(playerTurns(c.getSnapshot().history, '停止竞争')).toBe(1)
+  })
+  it('late frames from the old run are ignored after an explicit retry (run_epoch check)', async () => {
+    scenarios.set('chat.late_old_stream', true)
+    await c.start('晚到的旧流', 'zh')
+    await until(() => c.getSnapshot().history.pending_operation?.status === 'retryable_failed' || c.getSnapshot().notice?.kind === 'retryable', 20000)
+    await c.retry()
+    await until(() => ['committed', 'idle'].includes(c.getSnapshot().phase), 20000)
+    expect(c.getSnapshot().ignoredFrames).toBeGreaterThan(0)
+    expect(playerTurns(c.getSnapshot().history, '晚到的旧流')).toBe(1)
+  })
+  it('a real cancel leaves history unchanged and hands the text back', async () => {
+    const before = c.getSnapshot().history.history.turns.length
+    const run = c.start('取消我', 'zh')
+    await until(() => ['starting', 'generating'].includes(c.getSnapshot().phase))
+    await c.cancel()
+    await run
+    await until(() => !['sending', 'starting', 'generating', 'awaiting_commit', 'cancelling'].includes(c.getSnapshot().phase), 20000)
+    const v = c.getSnapshot()
+    expect(v.history.history.turns.length).toBe(before)
+    expect(v.restore?.text ?? v.input).toBe('取消我')
+  })
+})
+
+describe('games', () => {
+  it('start is idempotent per key, lookup finds the original, and stale revisions are refused', async () => {
+    const body = {key: 'g-key-1', game_id: 'cabo', players: 3, profile: 'cabo-shareful-2025-en-slice-provisional', expected_account_id: accountId,
+      seats: [{seat: 1, kind: 'temporary', character_id: 'official-lena'}, {seat: 2, kind: 'temporary', character_id: 'official-iris'}], origin: {kind: 'discover', return_hash: '#/discover?tab=games'}}
+    const a = await api.games.start(body)
+    const b = await api.games.start(body)
+    expect(b.id).toBe(a.id)
+    expect((await api.games.lookup('g-key-1')).id).toBe(a.id)
+    await expect(api.games.start({...body, players: 2, seats: body.seats.slice(0, 1)})).rejects.toMatchObject({code: 'idempotency_conflict'})
+    await expect(api.games.act(a.id, 'act-stale', {type: 'ack'}, a.revision + 5)).rejects.toMatchObject({code: 'game_revision_changed'})
+    // The projection never carries authority-only fields.
+    const pv = a.player_view as Record<string, unknown>
+    for (const k of ['truth', 'rng', 'up', 'seed']) expect(k in pv).toBe(false)
+  })
+  it('a friend can only take one seat', async () => {
+    const f = await api.friends.add({key: 'fk-seat', source_id: 'official-arthur', source_version: '1', name: 'Arthur S', expected_account_id: accountId})
+    await expect(api.games.start({key: 'g-key-2', game_id: 'vegas', players: 3, expected_account_id: accountId,
+      seats: [{seat: 1, kind: 'friend', friend_id: f.id, friend_epoch: f.epoch}, {seat: 2, kind: 'friend', friend_id: f.id, friend_epoch: f.epoch}]})).rejects.toMatchObject({code: 'friend_already_seated'})
+  })
+})
+
+describe('stories', () => {
+  it('rejects casting one friend twice or replacing a locked role; accepts the original cast', async () => {
+    const f = await api.friends.add({key: 'fk-story', source_id: 'official-lena', source_version: '1', name: 'Lena S', expected_account_id: accountId})
+    const base = {story_id: 'story-promise-rain', version: '1', language: 'zh' as const, expected_account_id: accountId}
+    await expect(api.stories.start({...base, key: 's-1', cast: [{role_id: 'investigator', friend_id: f.id, friend_epoch: f.epoch}, {role_id: 'stage', friend_id: f.id, friend_epoch: f.epoch}]})).rejects.toMatchObject({code: 'friend_already_cast'})
+    await expect(api.stories.start({...base, key: 's-2', cast: [{role_id: 'manager', friend_id: f.id, friend_epoch: f.epoch}]})).rejects.toMatchObject({code: 'role_locked'})
+    const s = await api.stories.start({...base, key: 's-3', cast: [{role_id: 'investigator', friend_id: f.id, friend_epoch: f.epoch}]})
+    expect(s.cast.find(c => c.role_id === 'investigator')?.friend_id).toBe(f.id)
+    expect(s.turns).toHaveLength(1)
+  })
+  it('a cast friend brings no private chat history; resetting that friend makes the run read-only', async () => {
+    const f = await api.friends.add({key: 'fk-story-2', source_id: 'official-iris', source_version: '1', name: 'Iris S', expected_account_id: accountId})
+    const chat = controllerFor(f, await api.chat.open(f.id, f.epoch, accountId, 'open-s2', 'zh'))
+    await chat.start('只属于私聊的秘密：蓝色雨伞', 'zh')
+    await until(() => ['committed', 'idle'].includes(chat.getSnapshot().phase), 20000)
+    const s = await api.stories.start({story_id: 'story-promise-rain', version: '1', language: 'zh', expected_account_id: accountId, key: 's-4', cast: [{role_id: 'investigator', friend_id: f.id, friend_epoch: f.epoch}]})
+    expect(JSON.stringify(s)).not.toContain('蓝色雨伞')
+    await api.friends.reset(f.id, f.epoch, accountId)
+    expect((await api.stories.get(s.id)).status).toBe('read_only')
+    await expect(api.stories.turn(s.id, {key: 'st-ro', kind: 'continue', language: 'zh', expected_revision: s.revision})).rejects.toMatchObject({code: 'session_read_only'})
+  })
+})
+
+describe('creation', () => {
+  it('draft sync needs the base revision; versions are explicit; sharing needs a valid saved version', async () => {
+    const w = await api.works.create('w-1', 'character', '测试角色')
+    const next = await api.works.putDraft(w.id, {...w.draft, intro: '介绍'}, w.draft_revision)
+    expect(next.draft_revision).toBe(w.draft_revision + 1)
+    await expect(api.works.putDraft(w.id, {...w.draft, intro: '旧'}, w.draft_revision)).rejects.toMatchObject({code: 'draft_revision_changed'})
+    const saved = await api.works.save(w.id, next.draft_revision)
+    expect(saved.saved_version).toBe(1)
+    await expect(api.works.share(w.id, true, 1)).rejects.toMatchObject({code: 'share_check_failed'}) // persona still empty
+    expect((await api.works.get(w.id)).share.enabled).toBe(false)
+  })
+})
+
+describe('generated art wiring in the mock data', () => {
+  /** Commits the pending story turn now instead of waiting for the simulated 1.5 s. */
+  const commit = async (s: StorySessionJSON, key: string) => {
+    await api.stories.turn(s.id, {key, kind: 'continue', language: 'zh', expected_revision: s.revision})
+    db().stories[s.id].pending!.commit_at = 0
+    return api.stories.get(s.id)
+  }
+  it('stories carry a tall and a wide cover; each beat moves the scene; open mode moves to the ending place', async () => {
+    const story = await api.catalog.story('story-last-train', '1')
+    expect(story.image).toBe('/generated/batch-01/story-last-train-cover-tall.webp')
+    expect(story.image_wide).toBe('/generated/batch-01/story-last-train-cover-wide.webp')
+    let s = await api.stories.start({story_id: 'story-last-train', version: '1', language: 'zh', expected_account_id: accountId, key: 's-art', cast: []})
+    expect(s.state).toMatchObject({scene: 'waiting-room', scene_image: '/generated/batch-01/story-last-train-scene-waiting-room.webp', scene_position: '52%', scene_label: {zh: '候车室 · 深夜'}})
+    const seen = [s.state.scene]
+    for (let i = 0; i < 4; i++) { s = await commit(s, `st-art-${i}`); seen.push(s.state.scene) }
+    expect(seen).toEqual(['waiting-room', 'waiting-room', 'corner', 'duty-room', 'platform-dawn'])
+    expect(s.state.open_mode).toBe(true)
+    expect(s.state.scene_image).toBe('/generated/batch-01/story-last-train-scene-platform-dawn.webp')
+  })
+  it('a run stored with the earlier scene keys still resolves its place from its turns', async () => {
+    let s = await api.stories.start({story_id: 'story-promise-rain', version: '1', language: 'zh', expected_account_id: accountId, key: 's-art-old', cast: []})
+    s = await commit(s, 'st-old-1'); s = await commit(s, 'st-old-2')
+    expect(s.state.scene).toBe('backstage')
+    db().stories[s.id].state.scene = 'study'
+    const reread = await api.stories.get(s.id)
+    expect(reread.state.scene).toBe('backstage')
+    expect(reread.state.scene_image).toBe('/generated/batch-01/story-promise-rain-scene-backstage.webp')
+  })
+  it('records carry the work picture (story cover / game poster)', async () => {
+    await api.games.start({key: 'g-art', game_id: 'cabo', players: 2, profile: 'cabo-shareful-2025-en-slice-provisional', expected_account_id: accountId,
+      seats: [{seat: 1, kind: 'temporary', character_id: 'official-nora'}], origin: {kind: 'discover', return_hash: '#/discover?tab=games'}})
+    const items = (await api.records.list(false)).items
+    expect(items.find(r => r.kind === 'story' && r.work_id === 'story-last-train')?.image).toBe('/generated/batch-01/story-last-train-cover-tall.webp')
+    expect(items.find(r => r.kind === 'game' && r.work_id === 'cabo')?.image).toBe('/generated/batch-01/game-cabo-cover.webp')
+  })
+  it('persona avatar: preset ids only; omitted keeps it; null clears it', async () => {
+    expect((await api.account.persona('我', '', 'persona-avatar-03')).persona?.avatar).toBe('persona-avatar-03')
+    expect((await api.account.persona('我2', '简介')).persona).toMatchObject({name: '我2', avatar: 'persona-avatar-03'})
+    await expect(api.account.persona('我', '', '/generated/batch-01/backdrop-lena.webp')).rejects.toMatchObject({code: 'invalid_avatar'})
+    expect((await api.account.persona('我', '', null)).persona?.avatar).toBeNull()
+  })
+  it('a new work starts with a preset cover; anything else is reported as invalid', async () => {
+    const w = await api.works.create('w-art', 'story', '封面测试')
+    expect(WORK_COVERS as readonly unknown[]).toContain(w.draft.cover)
+    expect(w.errors.some(e => e.field === 'cover')).toBe(false)
+    const bad = await api.works.putDraft(w.id, {...w.draft, cover: 'https://example.com/cover.png'}, w.draft_revision)
+    expect(bad.errors).toContainEqual({field: 'cover', code: 'invalid'})
+  })
+})
diff --git a/everwith-claude-frontend/tests/richtext-router.test.ts b/everwith-claude-frontend/tests/richtext-router.test.ts
new file mode 100644
index 00000000..905bd094
--- /dev/null
+++ b/everwith-claude-frontend/tests/richtext-router.test.ts
@@ -0,0 +1,50 @@
+import {describe, expect, it} from 'vitest'
+import {parseRichText} from '../src/chat/RichText'
+import {href, mapLegacy, parseHash} from '../src/app/router'
+
+describe('rich text (*action* with odd/even backslash escapes)', () => {
+  it('marks *spans* as actions and keeps newlines', () => {
+    expect(parseRichText('*nods*\nOK')).toEqual([{text: 'nods', action: true}, {text: '\nOK', action: false}])
+  })
+  it('an odd run of backslashes escapes the star (one backslash consumed)', () => {
+    expect(parseRichText('a \\*b* c')).toEqual([{text: 'a *b* c', action: false}])
+    expect(parseRichText('\\\\\\*x*')).toEqual([{text: '\\\\*x*', action: false}])
+  })
+  it('an even run keeps every backslash and the star still delimits', () => {
+    expect(parseRichText('\\\\*x*')).toEqual([{text: '\\\\', action: false}, {text: 'x', action: true}])
+  })
+  it('the same rule applies inside a span', () => {
+    expect(parseRichText('*a\\*b*')).toEqual([{text: 'a*b', action: true}])
+  })
+  it('unclosed or empty stars stay literal; HTML stays text', () => {
+    expect(parseRichText('5 * 3')).toEqual([{text: '5 * 3', action: false}])
+    expect(parseRichText('**')).toEqual([{text: '**', action: false}])
+    expect(parseRichText('<img src=x onerror=alert(1)>')).toEqual([{text: '<img src=x onerror=alert(1)>', action: false}])
+  })
+})
+
+describe('router', () => {
+  it('parses every page route', () => {
+    expect(parseHash('')).toEqual({name: 'root'})
+    expect(parseHash('#/discover?tab=games&q=abc')).toEqual({name: 'discover', tab: 'games', q: 'abc'})
+    expect(parseHash('#/discover?tab=bogus')).toEqual({name: 'discover', tab: 'all', q: ''})
+    expect(parseHash('#/friends/fr_1')).toEqual({name: 'chat', friendId: 'fr_1'})
+    expect(parseHash('#/stories/s1/prepare?v=2&with=fr_9&from=%23%2Ffriends')).toEqual({name: 'storyPrepare', id: 's1', version: '2', withFriend: 'fr_9', from: '#/friends'})
+    expect(parseHash('#/play/game/gs_1')).toEqual({name: 'gamePlay', sessionId: 'gs_1'})
+    expect(parseHash('#/recent?archived=1')).toEqual({name: 'recent', archived: true})
+    expect(parseHash('#/create/w1')).toEqual({name: 'work', workId: 'w1'})
+    expect(parseHash('#/nope').name).toBe('notFound')
+  })
+  it('maps legacy #/companions deep links to the named object, never the default home', () => {
+    expect(mapLegacy('#/companions?view=friends&gameSession=gs_7')).toBe('#/play/game/gs_7')
+    expect(mapLegacy('#/companions?storySession=ss_2')).toBe('#/play/story/ss_2')
+    expect(mapLegacy('#/companions?view=friends&friend=fr_3')).toBe('#/friends/fr_3')
+    expect(mapLegacy('#/companions?story=story-a&version=3')).toBe('#/stories/story-a?v=3')
+    expect(mapLegacy('#/companions?view=create')).toBe('#/create')
+    expect(mapLegacy('#/discover')).toBeNull()
+  })
+  it('href helpers round-trip through the parser', () => {
+    expect(parseHash(href.gamePrepare('cabo', 'fr_1', '#/friends/fr_1'))).toEqual({name: 'gamePrepare', gameId: 'cabo', withFriend: 'fr_1', from: '#/friends/fr_1'})
+    expect(parseHash(href.storyPrepare('story-x', '1'))).toMatchObject({name: 'storyPrepare', id: 'story-x', version: '1', withFriend: null})
+  })
+})
diff --git a/everwith-claude-frontend/tests/setup.ts b/everwith-claude-frontend/tests/setup.ts
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/everwith-claude-frontend/tests/setup.ts
@@ -0,0 +1 @@
+
diff --git a/everwith-claude-frontend/tsconfig.json b/everwith-claude-frontend/tsconfig.json
new file mode 100644
index 00000000..0223c968
--- /dev/null
+++ b/everwith-claude-frontend/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "allowJs": false,
+    "skipLibCheck": true,
+    "types": ["vite/client", "node"],
+    "noEmit": true
+  },
+  "include": ["src", "tests", "vite.config.ts", "playwright.config.ts", "e2e"],
+  "exclude": ["src/vendor", "node_modules", "dist"]
+}
diff --git a/everwith-claude-frontend/vite.config.ts b/everwith-claude-frontend/vite.config.ts
new file mode 100644
index 00000000..b58afeb2
--- /dev/null
+++ b/everwith-claude-frontend/vite.config.ts
@@ -0,0 +1,15 @@
+import {defineConfig} from 'vitest/config'
+import react from '@vitejs/plugin-react'
+
+// Local-only dev server. No proxy to any production service is configured.
+export default defineConfig({
+  plugins: [react()],
+  server: {host: '127.0.0.1', port: 5173, strictPort: true},
+  preview: {host: '127.0.0.1', port: 4173, strictPort: true},
+  build: {target: 'es2022', chunkSizeWarningLimit: 1200, sourcemap: false},
+  test: {
+    environment: 'jsdom',
+    include: ['tests/**/*.test.ts', 'tests/**/*.test.tsx'],
+    setupFiles: ['tests/setup.ts'],
+  },
+})