# MicroApps Console — Session Handoff (2026-05-11)

> Per TVU [`code-conventions.md`](../../tvu-design-system/docs/internal/code-conventions.md) **R5** convention.

## 1. Context

MicroApps Console = TVU 直播 / 媒体处理基础设施的监控 + 操控台 UX demo。位于 TVU Design System sibling 目录（`/Users/nancy/Documents/AICoding/VS_Code/MicroApps Console/`），不在 TVU 仓库内部。目的：**给 PM / 客户演示 + 同时作为 TVU library 的 Figma↔Code bridge stress test**。

## 2. 必读 onboarding 顺序

1. [`../tvu-design-system/AGENTS.md`](../../tvu-design-system/AGENTS.md) — TVU 跨工具入口
2. [`../tvu-design-system/docs/internal/code-conventions.md`](../../tvu-design-system/docs/internal/code-conventions.md) — R1-R5（图标 / token / canonical / 不先实现 / handoff convention）
3. [`../tvu-design-system/docs/internal/mockup-conventions.md`](../../tvu-design-system/docs/internal/mockup-conventions.md) — M1-M20（仅 Figma 任务时需读）
4. [`./docs/MICROAPPS_PRODUCT_CONTEXT.md`](./MICROAPPS_PRODUCT_CONTEXT.md) — 重点 §1-3（产品模型）+ §10.5（当前状态 + 已知 gap）+ §11-13（实现规则链路）
5. **本 handoff 文档**

R1-R4 onboarding mandatory commands：
```
ls /Users/nancy/Documents/AICoding/VS_Code/tvu-design-system/dist/icons/svg/
ls /Users/nancy/Documents/AICoding/VS_Code/tvu-design-system/src/canonical/
cat /Users/nancy/Documents/AICoding/VS_Code/tvu-design-system/src/tokens/variables.css | head -100
```

## 3. Current State

**产物**：`microapps-console-demo.html`（~2300 行单 HTML 文件，Vue 3 CDN）

**已落实**：
- ✅ 17 个 inline `<symbol>` 图标全部 sourced from TVU `dist/icons/svg/`（每个带 `<!-- icon/<Category>/<name> -->` 注释）
- ✅ Token 值正确（手抄自 `src/tokens/variables.css`；值一致但是 copy 不是 import）
- ✅ App icon 8 张 PNG base64 from Figma Card Header screenshots（5 真 + 3 placeholder per doc §1）
- ✅ 状态机 / Action matrix / 角色矩阵 / Page architecture 按 PRODUCT_CONTEXT §2-5 实现
- ✅ Stop confirm dialog / Auto-refresh countdown / Hash routing / Mock data 26 sessions / M8 自动展开 / MC read-only / MS sort-by-recent / Inactive 数据齐全
- ✅ `+ New Session` / `Open in MicroApp` 用 Blob URL 打开黑底大字 GUI 占位 tab

**已确认 working**：
- HTML 单文件双击可打开（已多次浏览器验证）
- TVU library 路径 `/Users/nancy/Documents/AICoding/VS_Code/tvu-design-system/` 存在且 dist/icons/svg/ 完整

## 4. 已知 Gap

| Gap | 严重度 | 解决路径 |
|---|---|---|
| **Canonical components 完全旁路** — TopBar / Tab / Button / Badge / Input / Radio / Modal / Notification 全部手写，0 个 import `src/canonical/*.vue` | 🔴 高 — 当前 demo 没真正 stress test bridge | 切到 Vue + Vite + `file:../tvu-design-system` 项目（"A+B 双 build" 提案），用 `vite-plugin-singlefile` 出单 HTML 给 PM |
| **Token copy 不 import** | 🟡 中 | 同上，A+B 都通过 npm 链路 import `style.css` |
| **App icon 是 PNG**（非 scalable / 非 currentColor） | 🟡 中 | TVU library 5 个 App icon 已发布 → 改 import SVG（R1）；3 个待补等设计师 |
| **新 session bootstrap rule 缺位** — 陌生目录起 session 提到"TVU 设计系统"AI 不知道在哪 | 🟡 中（user 已规划） | user 已说在下个 session 加 `~/.claude/CLAUDE.md` 跨项目 TVU 规则（提案见 2026-05-11 chat 末段）|

## 5. 下一步优先级

| # | 任务 | 是否需 user 决策 |
|---|---|---|
| **P1** | **全局 `~/.claude/CLAUDE.md` 加 TVU 跨项目规则段** —— 让任何陌生目录起 session 提到 TVU 都能自动 onboard，不污染 TVU 仓库 | ✅ 用户主导（提案已在上一 session 给出，30 行内容）|
| **P2** | **A+B 双 build 项目重建** —— Vue + Vite + `file:../tvu-design-system` for 真 canonical 消费；`vite-plugin-singlefile` 输出单 HTML 给 PM；当前 HTML 留作 PoC 归档到 `legacy/` | ✅ 用户决定：保留当前 HTML 位置（根 / legacy/）+ 项目结构（扁平 / 嵌套 app/） |
| **P3** | **Bridge stress test 报告** —— P2 跑 `pnpm build` 时记录每一个 canonical 用不了 / 缺 prop / 缺 variant 的真实 gap，写入 `tvu-design-system/docs/internal/backlog.md` BRIDGE-MOCKUP 段（这才是 demo 对 design system 的真正贡献）| 不需要，P2 完成后自然产出 |

## 6. Quick-start prompt（可直接 copy 到新 session）

```
继续 MicroApps Console 工作。
工作目录：/Users/nancy/Documents/AICoding/VS_Code/MicroApps Console
按 docs/2026-05-11-handoff.md §2 onboarding 顺序读完后，
告诉我 P1 / P2 / P3 哪一个先做。
```

### Quick-start prompt 变体 1：先做 P1（全局 CLAUDE.md 规则）

```
帮我把 TVU Design System 跨项目使用规则加到 ~/.claude/CLAUDE.md。
提案见 /Users/nancy/Documents/AICoding/VS_Code/MicroApps Console/docs/2026-05-11-handoff.md §4 第 4 条。
按 ../tvu-design-system/docs/internal/code-conventions.md R5 handoff convention 起手。
```

### Quick-start prompt 变体 2：直接做 P2（A+B 项目重建）

```
继续 MicroApps Console 工作 — 启动 A+B 双 build 项目重建（P2）。
按 docs/2026-05-11-handoff.md §2 全部读完，
然后初始化 Vue + Vite + file:../tvu-design-system，
保留当前 microapps-console-demo.html 在原位（不删）。
起手 mandatory：ls ../tvu-design-system/src/canonical/
```