Center Tabs 与复合分屏 Tab 设计

01 OpenProgram 的设计结论

02 原问题与实施结果

scrollIntoView() 只会放大可见跳动，不是状态错误的来源。只删除滚动或动画不能修复 Web 固定、成员选中和自动 regroup。

03 概念、所有权与不变量

硬性不变量

1. 每个 leaf tab 恰好属于一个 entry；不能同时是普通 tab 和某个 split entry 的成员。
2. split entry 恰好有两个不同成员；本设计不支持第三个 pane。
3. 顶部顺序由规范化后的 tabs[] 与 groups[] 投影；group 的两个成员在 leaf 顺序中保持连续。
4. 顶部只有一个条目级选中样式。activeId 与 focusedId 仍用于路由和内部 bookkeeping，但不产生成员 segment 或 pane-level active 样式。
5. 点击 pane 内部可以更新内部会话路由，但不能改变 entry membership、entry order 或顶部复合条目的整体选中样式。
6. 选择另一个顶部 entry 必须整体替换 center body；旧 split 的两个 pane 同时停止显示。
7. 打开、关闭、分屏、拆分、显式移动和 transfer 可以改变 entries；普通 activation 不得改变 entries。

04 官方参考与取舍

Chrome 官方设计中的 pane active 状态不是本设计的要求。OpenProgram 的修改点是：复合条目整体选中，pane 只保留各自局部控件和自然 DOM focus。

05 已实施状态模型

本次采用兼容性最小改动，持久化格式保持 version 2。groups[] 是复合条目的所有权；centerTabStripEntries() 在显示层把 leaf tabs 和 groups 投影为一个有序顶部列表。这样不需要迁移已有窗口数据，也不改变 transfer journal 的 payload 边界。

interface CenterTabsPersistedPayload {
  version: 2;
  tabs: CenterTab[];
  activeId: string | null;       // 内部路由；顶部按所属 entry 整体选中
  groups: CenterTabGroup[];      // 每组恰好两个成员
  splitWebTabId: string | null;  // 兼容旧入口，不再触发跨 group reparent
  splitRatio: number;            // 当前兼容格式仍为窗口级比例
}

不保存的状态

• 不增加 pane-level selected 状态。DOM focus 与内部 focusedId 不映射为 pane 边框或顶部成员高亮。
• 不增加新的窗口级 Web pin。Web 是否可见由包含它的 active group 决定；splitWebTabId 只保留旧入口兼容。
• 不增加成员级顶部 selected 状态。两个 leaf tab 各自提供图标、标题、dirty 和成员关闭入口，但 active 状态仍只属于外层复合条目。
• 本次不升级 ratio schema；version 2 的 splitRatio 仍按原兼容行为保存。

复合标签结构

复合条目使用一个外层容器和两个 1fr 等宽成员槽位。每个槽位显示自己的 favicon/类型图标、单独截断的标题和成员关闭按钮；标题长度不得改变两侧宽度。外层只有一个背景、一个 active 状态、一个 role="tab" 和一个 group drag target。不再显示额外的前置分屏图标或拖动手柄。

06 状态转移

Web toolbar 与 Runtime

• Web toolbar 从 single(W) 创建 split 时始终显示现有 SplitViewPicker。W 固定为 source，候选项来自 splitCandidates(tabs, groups, W)；只有用户选择 target 后才通过 groupTab(target, W, 1) 创建复合条目。
• groupTab() 接受一个此前未组成 pair 的 source/target 后，在同一次持久状态提交中写入新 group、把 activeId 设为用户刚选择的成员，并写入 splitRatio=0.5。选择 session 时，这个 activeId 变化还会触发现有 session route 同步，保证 composer 与所选 pane 使用同一 session；不能只激活 Web 成员而保留旧会话路由，也不能继承旧 ratio。
• 关闭 picker、按 Escape、点外部或没有候选项都不修改 tabs、groups、activeId、route 或 session store；不得为创建分屏自动创建 draft/session。
• openWebTabInSplit(url) 在当前复合条目已有 Web 时复用该 Web 成员并导航，不创建不可见的第三成员。
• 相同 deterministic URL 已属于另一个非活动复合条目时，激活该 owner composite；不能把 Web 移到当前会话，也不能在不可见状态下返回成功。
• session 已属于完整 split 时，不替换现有成员、不创建第三 pane。普通顶部 activation 不能重新组合成员。

07 顶部显示、pane 显示与无障碍

顶部 tab strip

• 每个 entry 对应一个 role="tab"。split entry 仍只有一个 tab target；两个成员槽位是视觉内容，不是两个可独立选择的 tab。
• 只有包含 activeId 的 entry 使用 active 背景与 aria-selected="true"。
• active 背景由共享 --tab-active-bg 控制，普通条目与复合条目必须一致。浏览器模式保持 --bg-primary，继续与内容区及 fillet 连续；桌面模式根据元素实际 color-scheme 使用 light-dark(black, white)：浅色向黑色、深色向白色混合 18%。因此内置主题和声明了正确 color-scheme 的 custom 主题使用同一规则。未选中条目继续透明显示 --tabrow-bg，不增加边框或 active 动画。
• 桌面最顶部全局 tab strip 固定为 40px；普通 tab 与复合分屏 tab 都固定为 28px 并垂直居中，使上下各保留 6px。tab 使用固定 8px 圆角，不使用半高圆角或悬浮阴影形成胶囊。成员关闭按钮继续使用 20px 点击区域；独立的新增与主菜单按钮保持 28px。
• 条目生命周期保留可见的几何动画：普通 Tab 新建时以 180ms ease-out 展开，关闭时以 160ms ease-in 收缩；关闭 split 的单个成员时，该成员淡出，外层复合条目同步在 160ms 内收缩为 single 宽度。active 切换仍然即时，split 仍只有整个条目可拖动。
• 两个成员槽位固定等宽，各自显示图标和省略标题；长标题只在本侧截断，不能压缩另一侧。两侧使用相同背景和文字层级，不显示当前侧高亮。
• 可访问名称为“Split tab: {left label} and {right label}”。两个成员关闭按钮分别标记“Close {member label}”；关闭后复合条目原位降为剩余 single tab。
• 拖动、键盘移动、中键关闭和跨窗口 transfer 都作用于整个 entry。成员槽位不注册 drag subject；移动单个成员前必须通过右键菜单或 pane 内按钮执行 Separate split。

两个 pane

• 两个 pane 使用相同背景、边框宽度和视觉层级。点击后不得新增强调边框或改变 divider 方向图标。
• divider 只表示可调整尺寸，不表示哪侧 active；键盘 focus outline 只满足操作可见性，不等于 pane 被产品选中。
• 拖动 divider 或使用其左右方向键后，第一 pane 的实际宽度必须随 splitRatio 改变；会话 pane 作为第一 pane 时不得被通用 .center-pane-chat flex 规则重新均分。比例继续限制在既有最小宽度范围内并通过 version 2 payload 持久化。
• 本次不新增基于宽度或 focus 隐藏、重排任一 pane 的逻辑。两个 pane 继续使用既有左右布局、最小宽度和 divider 约束。
• split entry 变为 inactive 时，两个 pane 都从可见布局中移除。Electron native WebContentsView 同步隐藏并注销 visible bounds。

08 操作路由与会话语义

取消 pane-level active 状态不等于取消精确目标。所有操作必须从事件来源或显式 tab id 路由，不能读取“最后聚焦 pane”作为业务所有权。

共享 session UI

• split 中只有一个 session 时，窗口级 session 摘要可绑定该唯一 session。
• split 中有两个 session 时，pane 交互可以更新内部 session 路由和控件归属，但顶部仍只显示整个复合条目选中，不显示当前侧。
• 两个 session 各自的消息、composer、任务状态和局部控件由各自 pane 持有。

09 持久化、恢复与兼容

Version 2 normalization

• 按首次出现去重 tabs 和 group 成员；每个 leaf tab 最多属于一个 group。
• group 只保留前两个合法成员；少于两个成员时 group 解散，剩余 leaf tab 继续作为普通顶部条目。
• 旧三成员 group 恢复为一个双成员复合条目和一个普通条目，不丢失第三个 leaf tab。
• 当 splitWebTabId 已属于某个合法 group 时，normalization 保留该所有权；切换 activeId 不得重新组合。
• 只有 Web 尚未属于 group 且兼容入口明确请求 split 时，才允许与当前 session 建组。
• activeId 无效时选择第一个 leaf tab；顶部再根据它所属的 group 派生整个 active entry。

兼容边界

1. 不修改 storage key、payload version、tab id、group id 或 transfer journal 版本。
2. focusedId 保留给会话路由、URL 和内部控件所有权；顶部不根据它渲染成员 selected 状态。
3. visibleIds 在两成员上限下等于可显示成员集合，不再用于隐藏第三成员。
4. 跨窗口 group payload 超过两个成员时返回 group-full，不部分插入。

10 关闭、移动、跨窗口转移与失败

失败与并发

• native WebContentsView 未 ready、CDP target 丢失或 bounds 暂时不可用时，split entry 不自动拆分或替换成员；对应 pane 显示现有加载/错误状态。
• inactive split entry 的后台 title、favicon、dirty 或任务状态更新只更新 leaf tab 数据，不激活 entry。
• 连续顶部 activation 同步更新 activeId；不增加队列或锁，且不能修改 group membership。
• transfer 继续使用现有 journal；group 与 tabs 在同一 payload transaction 中提交。

11 实施边界与可执行验收

顶部复合 tab 视觉约束

分屏宽度回归修复任务说明

Web toolbar 显式成员选择任务说明

当前实现约束

1. version 2 normalization 保持已被 group 拥有的 Web owner，不随 activeId 改变。
2. group 最多包含两个成员；恢复旧三成员状态时，第三个成员保留为普通条目。
3. CompoundTabItem 只有一个 tab target 和一个 drag target；菜单、键盘、拖动和 Cmd+W 以完整条目为单位。
4. Runtime Web open、非活动 owner composite 激活、dirty 关闭、roving tabindex、drag root 与 post-drag synthetic click 均由现有检查覆盖。
5. 顶部条目显示两个等宽成员格、成员图标、标题和关闭入口，不显示前置 Columns2 图标；成员展示层不截获 pointer focus。
6. 成员最小宽度为 136px；关闭中的按钮使用 aria-disabled 并继续截获 pointer，避免下一次按压触发 group drag。
7. 默认 18100 安装版中，两个成员宽度为 131.67px / 131.67px，包含一个 role=tab、一个 selected target 和两个关闭按钮；从任一成员正文拖动均保持成员 ID 与 group 不变。
8. 组合选择器保证 ratio 变化会反映到两侧 pane 宽度；定向检查、Web 全量检查、TypeScript、production build、desktop checks、Python checks 与文档检查覆盖该约束。
9. 默认 18100 安装版中，会话位于第一 pane 时从 557.27px / 480.01px 拖到 460.26px / 577.01px，反向拖动为 533.25px / 504.02px；交换成员顺序后两侧同样随 ratio 改变。重新选择复合条目和刷新页面后，ratio 与 bounding width 均保持一致，并已恢复原成员顺序。

验收标准

1. 整体选中：顶部 split(A,W) 只有一个 active 背景和一个 aria-selected=true，内部没有两个 tab target；同时必须清楚显示两个成员身份。
2. 顶部几何：Electron 最顶部全局 tab strip 为 40px；普通与复合 tab 都为 28px，上下间距各为 6px。关闭按钮保持 20px 点击区域，新增与主菜单按钮保持 28px。
3. 主题对比：桌面深色主题的选中条目明显亮于未选中栏面；桌面 light 与 beige-light 的选中条目明显深于未选中栏面。普通 tab 与 split tab 使用同一个 active token，hover、focus、drag 和非选中背景不改变。
4. 等宽成员：两个成员槽位的 bounding width 相等；任一标题变长后仍相等，并且只在自己的槽位内省略。
5. 无 pane 选中：依次点击左右 pane，顶部 DOM、class、entry 状态和 pane 边框不变化；只允许自然 DOM focus 变化。
6. 整体切换：从 split(A,W) 选择 B 后，A 与 W 同时不可见，B 单独显示；Electron 中 W 的 native view 同时隐藏。
7. 整体恢复：重新选择 split(A,W) 后，两侧内容、滚动/会话状态和 ratio 恢复。
8. 宽度调整：从 divider 向左或向右拖动后，两侧 bounding width 按受约束的 splitRatio 改变；刷新或重新选择该 split entry 后恢复相同比例。会话位于第一 pane 与第二 pane 两种顺序都成立。
9. 不固定 Web：连续选择 session、file、builtin、NTP 和另一个 web entry，W 都不跟随、不 regroup、不改变 entry order。
10. 局部路由：左右 toolbar、composer、close 与 Computer Use 都作用于事件来源的精确 tab/session/target。
11. 创建与拆分：两个 single entries 合成一个 split entry；Separate 后恢复为相邻 singles，顺序确定。
12. 显式成员选择：从 Web toolbar 点击 Split 后，当前 Web 固定为 source，必须选择另一个可用 tab 才创建分屏；取消前后 tabs、groups、activeId 和 session 数量完全不变。
13. 新组合初始状态：在 ratio=0.35、0.5、0.65 三种旧状态下分别提交新 pair，成功后都必须得到 splitRatio=0.5，activeId 等于用户刚选择的成员，center body 立即只显示这两个成员；若该成员是 session，pathname、runtimeState.currentSessionId、composer 和 Page binding 必须全部指向它。同一次 store mutation 只写一个持久 payload。
14. 并发与焦点：picker 打开后 target 若被其他操作分组，旧选择提交必须拒绝且原 group 不变；空候选时 Close 获得焦点；outside click 关闭后焦点停留在实际点击目标。
15. 关闭：两个成员关闭按钮分别关闭对应 leaf 并原位折叠为 single；Cmd+W/entry close 关闭整个 split；dirty 拒绝不产生半状态。
16. 移动与 transfer：从任一成员的非按钮区域拖动都只产生 group drag，复合 tab 作为一个单位 reorder 和跨窗口转移；不存在成员 drag 或拖动拆分，rollback 同时恢复两个成员。
17. 显式拆分：Separate split 只由右键菜单或 pane 内现有退出分屏按钮触发；拖动不能调用 ungroupTab。
18. 恢复：version 2 payload 不新增错误 pair；三成员 group 规范化为一个双成员 split 加一个 single。
19. 窄窗口：两个 pane 仍属于同一 active entry，保持既有左右布局与最小宽度约束，不根据 focus 隐藏或重排一侧。
20. 回归：single tab、Home/NTP 原位替换、bookmark、file draft、session composer、browser iframe 和 native WebContentsView 不退化。

明确排除

• 窗口级 Web pin、pane active/inactive 状态、active pane 视觉、pane-local tab strip。
• 三个以上 pane、三成员复合 tab、任意二维网格。
• tab group 名称、颜色、云同步、收藏或自动分类。
• 新的 MRU、动画系统、拖动算法重写或新增依赖。
• 外部浏览器 profile、隐藏浏览器、sidecar 或 headless fallback。
• Windows 专用实现、测试、打包、兼容，以及 OS Keychain/keyring/Credential Manager。

Full gate manifest

npm --prefix web run check:center-tabs
npm --prefix web run check:compound-tabs
npm --prefix web run check:web-split
npm --prefix web run check
web/node_modules/.bin/tsc -p web/tsconfig.json --noEmit
npm --prefix web run build
npm --prefix desktop run check:webtabs
npm --prefix desktop run check:tab-transfer-store
python -m pytest -q tests/component/webui/test_desktop_checks.py
python -m tools.docs_site.checklinks
git diff --check

12 实现与验证状态