# Video Sync · Phase B Step 3 Frame Timeline Build · Done (2026-05-26)

> 接 [Phase B Step 2 收尾 handoff](./2026-05-26-video-sync-phaseB-step2-pickup.md)。本 session 一鼓作气把 Step 3 frame timeline 全部建完 + 清掉 legacy frames + 补 Design Rules。剩 state-label fan-out + section 整版调整为下个 session 任务。

## 1. 完成清单

### Step 3 — Frame timeline 全部按 PM-confirmed accordion 模型重建 ✅

10 个 frame 全部使用 Session Row component set `4559:3148` 的 instance：

| New # | Name | Frame ID | 状态 |
|---|---|---|---|
| M1 | Empty · No PP selected | `4573:3658` | 新建（chip 0/4 + 引导文案） |
| M2 | PP Selected · Session #1 Bootstrap (NS expanded) | `4139:1376` | 由原 M0 重塑 |
| M3 | Session #1 Syncing (1 session sync exp live Δ) | `4574:4244` | 新建（M2 clone） |
| M4 | Sync Completion Toast (1 session just-synced + 2 toasts) | `4210:1715` | 由原 M4 简化 |
| M5 | 2 Sessions · #1 selected | `4571:3206` | 新建（M6 clone） |
| M6 | 3 Sessions · Mixed States | `4119:199` | 由原 M1 重塑（5→3） |
| M7 | Cap Full · 4 Sessions + bottom Cap chip | `4528:2768` | 由原 Cap-Full 重塑（8→4 + chip 移底 + 删 PP-header dup chip） |
| M8 | Manual Collapse (4 collapsed) | `4572:2869` | 新建（M7 clone, #1 swap to unsel/collapsed） |
| M9 | Remove Confirmation (M7 + dialog overlay) | `4573:3611` + dialog overlay clone | 新建 |
| M10 | After Remove · Renumbered (3 sessions + Add restored) | `4572:3410` | 新建（M7 clone - 1 row, rename #4→#3） |

### Cleanup ✅
- 删 legacy M2 `4139:988`
- 删 old M3 `4165:950`
- 删对应 state-label `4166:1227`、`4166:1223` + 连接器 `4177:1986`、`4177:1987`
- 删 M7 PP-header 重复 cap chip `4528:2776`

### Design Rules card 补充 ✅
新增 4 条 accordion 模型规则 (节点 `4578:4536`-`4578:4548`)：
1. Row default state · accordion model
2. Manual expand · ▼ arrow toggle
3. Renumber on Remove · sequence not name
4. Vertical scroll · when expanded rows exceed container

### Section 拓展 ✅
Plan A section `4119:198` height 5379 → 7600，容纳 M9 + M1-Empty 等新增 frames。

## 2. 当前 section 几何 layout

```
section x=1640 y=67 w=6373 h=7600 (page absolute)
所有 frames 1920×1080:
  M6   (100,231)       M5   (2220,231)      rules-card (4380,121, w=520 h=now更长)
  M2   (100,1511)      M8   (2220,1511)     M10  (4280,1511)
  M4   (100,2991)      M7   (2209,2981)     M-Remove-Dialog (4380,3284, 1580x474)
  M3   (100,4500)                            M9   (4380,4500) + dialog overlay (4550,4803)
                                             M1-E (4380,5800)
Variant Lab    (1740,4367, 1288x1968)
  └ Session Row component set (Lab-relative 60,2526, 1288x1968) ← node 4559:3148
```

排序按 reading order M1→M10 是混乱的；下个 session 可考虑统一重排（2 cols × 5 rows 或 5 cols × 2 rows）。

## 3. 下个 session 任务

### ✅ 已完成（同 session 后段补做）
- **Section reading-order 重排为 2 cols × 5 rows** — 10 个 frame 按 M1→M10 阅读顺序物理排列。Col 1 x=1740, Col 2 x=3860, 行 pitch 1280, 起始 y=281。
- **State-label fan-out** — 4 个旧 label 重用（M0→M2 / 旧M1→M6 / M4 keep / Cap-Full→M7）+ 6 个新 label clone（M1/M3/M5/M8/M9/M10）。每个 label 920×~148 居于其 frame 正上方。
- **Col 3 整理** — rules-card (5980, 281) + Session Row component set (5980, 3147) + M-Remove-Dialog 源 artifact (5980, 5215)
- **Variant Lab 删除** — 草稿工作区移除，只保留 production component set（已 reparent 到 section 顶层）
- **2 个 vestigial connector 清掉** (`4177:1984`, `4177:1985` 指向已删 frame)
- **Section 收紧到 7660×6581** — 仅剩 M9 frame + dialog overlay 的有意重叠（dialog 浮在 base 上）

### 当前 section 几何 layout（最终）

```
section x=1640 y=67 w=7660 h=6581 (page absolute, right=9300, bottom=6648)

Col 1 (x=1740)        Col 2 (x=3860)        Col 3 (x=5980)
─────────────         ─────────────         ─────────────────────
M1  y=281             M2  y=281             rules-card y=281 (h=2766)
M3  y=1561            M4  y=1561
M5  y=2841            M6  y=2841            Session Row set y=3147 (h=1968)
M7  y=4121            M8  y=4121
M9  y=5401            M10 y=5401            M-Remove-Dialog y=5215 (h=474)
  + dialog overlay
  at (1910, 5704)

每个 frame 上方 ~5px gap 是其 state-label (h≈148, w=920)
```

### 下个 session 留任务
- **Walkthrough audit** — 跑 `design-walkthrough` skill 全套 6-section 走查（PRD / sibling visual contract / 规则合规 / anti-patterns / data feasibility）
- **(可选) Component properties 抽 text override** — 把 title/subtitle/slot/delta 抽成 component properties，instance 编辑就不用手改 detach 文本
- **(可选) Persona simulation** — F2-late 验证视觉 UX 是否真的服务于 PM persona (Mateus + Ahmed bein sports 场景)
- **(可选) Dev handoff gate** — F1 final pass 确认进开发就绪

### Step 3 之后补做 — RIGHT panel button 4 态（2026-05-26 同 session，最终版）

按 Plan B section `861:35362` 参考 + 用户决策（其它 Micro Apps 已同步态用单红 Stop）：

| 态 | RIGHT panel button(s) | label | 应用 frame |
|---|---|---|---|
| **未同步 Default** | Cancel `ghost/gray1/default` + Sync `filling/green/default` | "Cancel" + "Sync" | **M2** |
| **同步中 Loading（短暂态）** | Cancel `ghost/gray1/disable` + `filling/green/disable` | "Cancel" + "Syncing..." | **M3**（row 内**无 delta 数值** + 副标题 "Starting sync... measuring offset"）|
| **已同步 / Running** | **单红 Stop**（Cancel `visible=false` 隐藏）| "Stop" | **M4 / M5 / M6 / M7 / M8 / M10 / M-MultiExp** |
| **N/A（无 PP 选 / modal 覆盖）** | Cancel `disable` + Sync `disable` | "Cancel" + "Sync" | **M1 / M9** |

**关键设计决策**（user 2026-05-26）：
- 已同步态 = **单红 Stop**（不用 "Synced ✓" 灰按钮）—— 与其它 Micro Apps 一致，让 user 一眼看到 stop 入口
- 左侧 row 已显示 Syncing state pill + delta，右侧不需冗余显示"已同步"信息，只放 destructive Stop action
- Loading 短暂态（M3）= row 内 **无 delta**（measuring 还没出值）+ subtitle 反映 "starting sync"，按钮 disable

Component variant IDs (Button/dark L set `3926:92413`)：
- `filling/green/default`: `3926:92469`（M2 Sync）
- `filling/green/disable`: `3926:92415`（M3 Syncing... loading）
- `filling/red/default`: `3926:92416`（M4+ Stop）
- `ghost/gray1/default`: `3926:92431`（M2 Cancel）
- `ghost/gray1/disable`: `3926:92433`（M3 Cancel）

### M9 dialog state-label enrich

User 改了 dialog 内 destructive button "Delete" → "Remove"，state-label 同步：
- Title 格式：`"Remove Sync session #N?"`
- 双 button：ghost 灰 `"Cancel"` 取消 + **红 filling `"Remove"`** 确认（destructive）
- 术语一致性：与 row 上 remove-control 文案一致，**不用 "Delete"**

### 下轮 session 起点

**Row inline action chrome 扩展** — M38 第 3 层 chrome 加 Stop / Restart inline button（不只 Remove）。Persona simulation 显示 SRE + operator 需 quick intervention 不切 RIGHT panel。注：RIGHT panel 现已是单红 Stop，但**逐 row inline Stop** 仍有价值（多 sync 并行时按特定 row 操作不需 select 切换）。

### 建议
- **Component properties 抽出 row text** — 当前 instance 的 title/subtitle/slot/delta/timing 都是手改 override。下次可把这些字段抽成 `Session Row` 的 component properties（type=TEXT），instance 上直接通过 properties 改，不用 detach。会大幅简化未来 frame 编辑。
- **Walkthrough audit** — `design-walkthrough` skill 跑一次完整 audit，验证：visual contract 与 sibling 一致 / data feasibility / anti-patterns。

### 验收点
- M9 dialog overlay 位置是否合理（当前是简单居中，可能与 M7 base 比例感觉差）
- M1-Empty 引导文案是否需更突出 / 加 icon
- M10 chip 当前 PP-header 没显示 chip 文本（M7 删 chip 时连带丢了 M10 的 chip 位置）—— 是否需要在 M10 重新加 chip 显示 "3/4 sessions"

## 4. Memory 已更新

[figma-video-sync-source.md](../../../../.claude/projects/-Users-nancy-Documents-AICoding-VS-Code-MicroApps/memory/figma-video-sync-source.md) 已加 Step 3 frame timeline 完成状态。