# Video Sync Multi-Session · Next Session Pickup (2026-05-20)

> 给下一个新 session AI 接上这个任务。**起手前必读本文件 + 链接的真源**。

## 1. 当前状态快照

### Figma 真源（Micro-Apps-20250923, fileKey `DtZcMkhNy6qh6jbQQnhreQ`）

| Section / Frame | Node ID | 状态 | 说明 |
|---|---|---|---|
| Target page | `4083:8424` | — | 工作目标 page |
| **PRD spec section** | `4093:85` | ✅ done | 5 卡 EN/ZH 双语（Background / Goals / Scope / Requirements / Baseline ref）|
| **Plan A section** (Mockup v7) | `4119:198` | ✅ done | 4 帧 + State chips + Design Rules card (11 条规则双语) |
| M0 · Single Session | `4139:1376` | ✅ | 1-session auto-expanded |
| M1 · Default Multi-Session | `4119:199` | ✅ | 5 rows，Row 1 ON selected collapsed |
| M2 · ON Row Expanded | `4139:988` | ✅ | Row 1 ON 展开 with Stream A/B |
| M3 · OFF Row Selected | `4165:950` | ✅ | Row 3 TV2_Feed OFF 选中+展开 |
| **M4 · Sync Completion Event** | `4210:1715` | ⚠️ 部分完成 | Toast overlay + Row 1 "Synced just now" 已建，但 Toast 视觉需优化（见 backlog #1） |
| **Plan B section** (Switch alt) | `4186:1478` | ✅ done | 单 frame Switch toggle 替代 Badge |
| Design Rules card | `4166:1231` | ✅ done | 11 条双语规则（Layout / Cardinality / State / Selection / Editing entry / RIGHT button / Sessions persist / TVU library / Delta trend / Row meta format / Selected indicator）|

### 关键决策（已 frozen）

- **2-state model**: ON (Syncing) / OFF (Inactive) — 无 Failed/Done/Idle 独立状态
- **PP 是页面级共享 (1:N)** — LEFT 顶部 PP sub-panel 持有，下方 Sessions sub-panel 跟随
- **Parameters per-session** — RIGHT panel header BRAND 绿色绑定选中 session 名
- **Layout**: LEFT 1168 / RIGHT 680 + Body vertical center (y=232) + LEFT panel 高度 FIXED 680 + Sessions sub-panel FILL height 跟 RIGHT 对齐
- **Selected indicator**: 1-side left BRAND accent rail (3px) + Layer_3 fill — 4 处统一
- **Badge → State Pill**: 复用 MicroApps file-local `State Pill` (3261:1480) — Preview→Syncing / Inactive (绿/灰 line + 18% bg + dot)
- **Switch** for Plan B alt: TVU `Switch` library variants `dark/on/yes/no` + `dark/off/yes/no`
- **Slot > Ch hierarchy**: 用 `icon/Arrow/Next` (TVU library) 作为二级菜单连接器
- **Source → Destination**: 用 `icon/file/synced` (TVU library) BLUE tint 作 sync indicator
- **Row meta format**:
  - ON: `Started HH:MM · {dur} ago`
  - OFF + history: `Last ran HH:MM → HH:MM · {dur} · last delta {N} ms`（无停止原因）
  - OFF + never-ran: `Never started`
  - OFF + just-synced: `Synced just now · offset {N} ms`（BRAND 绿色）/ 2 分钟后改 `Synced X m ago · offset {N} ms`

## 2. Pending Backlog（按优先级）

### 🔴 高（v8 收尾）

**(a) Toast 视觉优化 — 用 TVU `Notification` 库组件替代自建**
- 当前 M4 Toast: 自建 HORIZONTAL frame + 绿色 4px 左 rail + 1px BRAND 边 + Unicode `×` close — 用户反馈"绿框太重 / close 应用库 icon / 需要 drop shadow"
- 库内有：**TVU `Notification` SET `23535120dbdc93bf90af9a118b5091e58b590dc6`** — 14 variants
- **Side-pop variant** (`1408:17127` theme=dark, status=side pop, 320×110) 正是 toast 用途
- 关闭 icon 用 `icon/Edit/Close` (`6d8d8ef02c72e60cab409c8443d9da0c880abb2b`, 16×16)
- 替换步骤：
  1. 删 M4 现有 self-built toast
  2. `importComponentSetByKeyAsync('23535120dbdc93bf90af9a118b5091e58b590dc6')` 找 side-pop dark variant `1408:17127`
  3. createInstance + 改文字 "Sync complete · Premier_League_Main · offset 12 ms"
  4. 定位 top-right (1920-24-320, 64+24)
  5. drop shadow 应该自带在 Notification component 内部（库已配 effect style）

**(b) M3 design walkthrough 修复**（用户在 message 9 提的 4 项）
- Session 间区分要否更强（当前 1px divider 偏弱）
- 顶/底大块 dead space（y=0-232 + y=912-1080 = ~400px 空）是否合理还是该压缩
- Delta 位置已经在右（最远右），但视觉权重是否够（22px Mono 字号）
- Slot > Ch + sync icon + Slot > Ch 是否表达"两个 slot 在同步"清晰？或者用更显式的"Stream A | Stream B" 视觉分组

**(c) v8 加 M4 后 section auto-fit + chip + connector 已就绪**，但 toast 重做后需重 fit

### 🟠 中（结构性）

**(d) 多页重复模块抽 file-local component**（M36 / R17）
- session row 模式在 M0/M1/M2/M3/M4/PlanB 6 帧 clone 而非 instance — 应抽 `MicroApp Video Sync Session Row`
- PP strip cloned from Plan B Content 同样可抽
- Stream A/B column 同样
- 评估每个 → 决定是否 TVU library promotion proposal

**(e) Empty state frame (0 session)** — PRD 没要求但 dev 实现必需
- 中央大号 "+ New Sync" CTA + 引导文字 "No sync sessions yet under this Producer Program"

### 🟢 低（待批量做的回流）

**(f) 回流剩余 3 个真源文件**（用户已 say "Yes" 做回流，但我中途暂停做其它）
- `design-process.md`: M-PRD-EG / M-CARDINALITY / M-IA-FIRST 3 条
- `figma-component-catalog.md` Badge Extension scenarios: ON=BRAND Green + Tag=Line 注释
- `MICROAPPS_PRODUCT_CONTEXT.md §5.5`: TVU-general 规则改 reference link 指向 tvu-design-system 真源（避免双写漂移）

已回流到 TVU 真源的（不需要再动）：
- `figma-technical-reference.md` Q9-Q12（section auto-fit / mixed-font / clone-inherits-state / negative-y）
- `mockup-conventions.md` M36/M37/M38/M-FONT/M-TXT-ICON-AUDIT + M31 viewport 例外
- `code-conventions.md` R17/R18/R19

## 3. 起手必读链路（新 session AI 起手按序读）

1. 本文件（next-pickup snapshot）
2. `MicroApps/docs/MICROAPPS_PRODUCT_CONTEXT.md` §5.5（layout 硬规则）
3. `MicroApps/docs/2026-05-19-video-sync-multi-session-handoff.md`（完整 handoff 含 11 条 design decisions）
4. `tvu-design-system/docs/internal/mockup-conventions.md` 全文（M0-M40 + M-FONT + M-TXT-ICON-AUDIT）
5. `tvu-design-system/docs/internal/figma-component-catalog.md` （查 Badge / Button/dark M / Tab/Item / Switch / Notification / State Pill local 等）
6. `tvu-design-system/docs/internal/figma-technical-reference.md` Q9-Q12（本 session 实证的新 Q-rules）

## 4. 新 session 起手协议（必走流程）

```
Step 1: Read this pickup doc + 起手必读链路 ↑
Step 2: 跑 5 个 cardinality 问题 self-check 当前任务
        (a) element transient/persistent?
        (b) state count + lifecycle?
        (c) 历史 visibility?
        (d) cardinality 各对象 (1:1 / 1:N / N:M)?
        (e) parent switch 时子对象怎么变?
Step 3: 若 PRD 含 "例如/e.g." → 显式问 user "哪几个 in-scope"
Step 4: 若用户给 reference image/链接 → 先产 5-row probe table（layout split / body pattern / components / interactions / spacing）
Step 5: 进 Phase 0 / 实施
Step 6: post-build 自审 — 跑 audit checklist：
        - M31 layout audit (filter viewport / library-internal / overlay)
        - M32 library compliance
        - M-FONT grid (12/14/16/18/20/22/24 only)
        - M-TXT-ICON-AUDIT (no Unicode → ← ↑ ↓ ✓ ✗ ▾ ▸ ⚠ as icons)
        - M-LOCAL-COMP (count repeated patterns, audit if抽 file-local)
        - Selected indicator unification (1-side left rail)
        - Page state label terminology check
Step 7: handoff doc update + ledger append + section auto-fit (Q9)
```

## 5. 关键 ID 速查

| 用途 | Node ID / Key |
|---|---|
| Section | `4119:198` (Plan A) / `4186:1478` (Plan B) |
| Imported library masters | Badge `4db5246d...` / Button/dark M `12b38c8b...` / Tab/Item `2267405386...` / Switch `bf16e8f5...` / Notification `23535120...` / icon/Arrow/Next `d9dfd8e0...` / icon/Arrow/Dropdown `eba15c0b...` / icon/file/synced `bc428d1b...` / icon/Edit/Close `6d8d8ef0...` |
| File-local Components | State Pill SET `3261:1480` (variants: Inactive `3261:1468` / Preview `3261:1471` / On-air `3261:1474` / Analyzing `3261:1477`) |
| Plan B baseline (clone source) | Top bar `842:24310` / Producer Program select `842:34886` / Stream A/B inner dropdown `861:35252` / Parameters/Video Sync master `915:24487` / Plan B `842:34818` Content frame |
| TVU dark palette hex | `#141414` L1 / `#1F1F1F` L2 / `#262626` L3 / `#353535` L4+Deep Divider / `#FFFFFF` Head / `#F8F8F8` T1 / `#CCCCCC` T2 / `#9E9E9E` Tips / `#7B7B7B` Placeholder / `#2FB54E` Brand / `#EA4233` Red / `#F68512` Orange / `#3892F3` Blue / `#000000` Top Bar |
| Annotation palette | `#2B2D42` M23 navy chip / `#33A4FD` M23 blue accent |