feat(dashboard): 重构 Bot 配置为聚焦式分类编辑

[deepcoldy]

背景

当前 Bot 配置页在 1280–1440px 常见桌面宽度下仍强制双栏，单张卡片实际只有约 356–436px；同时 15 个配置区块连续铺开，形成明显的“设置墙”，查找和编辑成本较高。

改动

• 将配置按任务拆为 常用 / 会话 / 权限与安全 / 消息卡片 / 高级 5 个页签
• 页签面板保持挂载，切换分类不会丢失尚未保存的组件输入；保留原有分区保存与 API 语义
• 支持 ← / → / Home / End 键盘导航，并补齐 tablist / tabpanel ARIA 关系
• 卡片改为内容宽度驱动：窄详情区单列，空间足够时自动双列，避免 356px 窄卡挤压
• 桌面端固定机器人档案与分类导航；移动端改为有界纵向名册，页签可横向滚动且无页面级横向溢出
• 收敛头像、状态胶囊、改名按钮、输入框圆角与装饰噪音，并兼容暗色、亮色和 reduced-motion
• 增加机器人数量提示与中英文文案

影响面

• 仅修改 dashboard 的 Bot 配置 React/CSS/i18n 与对应测试、截图，不改 API、daemon、worker、IM、PTY/Tmux/Herdr 等运行时路径
• 所有 CLI 共用同一页面结构；riff 的本地 backend/sandbox 隐藏逻辑保持不变
• 已覆盖 sandbox 开/关分支；重放最新 master 时保留了新增的 SessionCapSection.putCardPref 保存链路
• 原有 loading / error / read-only 和各分区独立保存行为未改

验证

• pnpm build：通过
• pnpm exec vitest run --project unit test/dashboard-bot-defaults-cliid.test.ts test/dashboard-bot-defaults-layout.test.ts test/dashboard-rebase-ui-regressions.test.ts test/dashboard-mobile-layout.test.ts test/dashboard-i18n.test.ts：5 files / 28 tests 全部通过
• pnpm test：10873 通过、4 失败；4 条均在同一 upstream/master（10456c5f）原样复现：3 条 host-local timezone 断言、1 条 root 环境下 bwrap mode-000 断言，与本改动无关
• pnpm switch:here && pnpm daemon:restart：已部署当前 checkout
• 实机浏览器：320 / 390 / 1280 / 1440 / 1920px、明暗主题、键盘页签、草稿跨页签保留、riff、sandbox on/off 均通过

截图

桌面（1440 × 900）

移动端（390 × 844）

[deepcoldy]

首审(Claude)—— 结论:✅ 无阻塞,代码可合(待 @codex 复审 + 申晗拍板)

改动逻辑

把 Bot 配置页 15 个配置区块从旧的强制两列(.bd-grid/.bd-column,单卡 356–436px)重组进 5 个 role=tabpanel 页签:常用 / 会话 / 权限与安全 / 消息卡片 / 高级。核心是 5 个面板全程挂载、仅用 hidden 隐藏,所以跨页签切换不会丢失未保存的分区草稿;各分区独立保存与 API 语义保持不变。附带 ←/→/Home/End 键盘导航 + 完整 tablist/tabpanel ARIA、内容宽度驱动的自适应单/双列、移动端有界纵向名册。

验证(本地实跑)

• 本 worktree 初始无 node_modules,pnpm install --frozen-lockfile 后:
  • pnpm build ✅
  • pnpm exec vitest run --project unit test/dashboard-*.test.ts → 61 files / 1088 tests 全过(含新增页签测试 + dashboard-bot-defaults-layout.test.ts)
• 逐一比对重构前后的 15 个配置 section:集合完全一致,无丢失/无重复,纯搬家。
• riff 沙盒隐藏(cliId !== 'riff')与 sandbox === true 门控 SandboxPathsSection 均保留。
• i18n 9 个新键 zh/en 双语齐全,tr() 引用无笔误。
• 影响面:纯 dashboard 前端(tsx/css/i18n + 测试),未触及 API/daemon/worker/IM/PTY/Tmux。

一个已排除的疑点(记录验证深度)

PR 新增 .bd-detail { container-type: inline-size },而飞书扫码登录全屏蒙层(position: fixed; inset: 0)渲染在该容器子树内。曾怀疑 container-query 经典坑会把 fixed 蒙层困在卡片盒内。用 Playwright 带正对照实测证伪:同条件下 contain: layout / transform 确实困住蒙层(锚到卡片,top 变负),而 container-type: inline-size 对 fixed 与 absolute 均不建立 containing block,蒙层仍铺满视口。→ 非 bug。

两个非阻塞观察(不挡合,复审可一并决定是否合并前收掉)

1. 新增的 container-type: inline-size 目前 inert:全仓 0 个 @container 查询消费它;真正的响应式双列来自 .bd-tab-grid 的 repeat(auto-fit, minmax(min(100%, 500px), 1fr)) grid。留着无害但无实际作用。
2. 旧 .bd-grid / .bd-column CSS 规则(style.css 9918/9925/11921)已无任何 tsx 引用 → 孤儿死 CSS,可顺手清。

cc @codex 请复审(重点:5 面板全挂载的草稿保留有无副作用、移动端有界名册滚动、以上两个小观察)。未经申晗确认不合码。

[chatgpt-codex-connector]

To use Codex here, create a Codex account and connect to github.

[deepcoldy]

Codex 复审：❌ 发现 1 个合并前需修复的移动端回归

Blocker：移动端名册被裁掉，并没有形成可滚动区域

位置：src/dashboard/web/style.css 的 @media (max-width: 980px) 内，.bd-roster / .bd-roster-list。

我在当前 PR head 477f7cbb 的 live dashboard 上，用 390×844 视口和真实 45-bot 名册复现两次：

• .bd-roster：高度 340px、overflow:hidden
• .bd-roster-list：clientHeight=2477、scrollHeight=2477、overflow-y:auto
• 在名册上向下滚动后：scrollTop 仍为 0

也就是说，子列表仍按完整内容高度排版，自身没有滚动范围；父层只是把超出 340px 的内容裁掉。页面上只能直接选择前约 5 个 bot，其余只能绕道搜索。旧版至少可以横向滚到全部 bot，因此这是本 PR 引入的功能回归。

根因是 capped grid 容器没有把列表那一行收缩为剩余空间。已用 DevTools 动态验证下面的修正方向有效：列表变成 253px 的真实滚动区，scrollHeight=2477，scrollTop=500 可生效。

.bot-defaults-page .bd-roster {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.bot-defaults-page .bd-roster-list {
  min-height: 0;
}

建议补一个能验证真实布局/滚动范围的回归测试；当前 dashboard-bot-defaults-layout.test.ts 只正则检查 overflow-y:auto 文本，因此 CSS 看似具备滚动声明、实际不可滚时仍会通过。

其余复审结论

• 5 个 tabpanel 均持续挂载，切换时恰好 4 个带 hidden；在工作目录输入未保存草稿后用 End 切到高级、再用 Home 返回，草稿仍在，焦点与 aria-selected 同步正确。
• 常驻挂载没有新增组件生命周期副作用：重构前 15 个配置区块本来就同时挂载；本次只是用 hidden 改可见性。
• 320px 英文页签形成横向滚动，文档宽度等于视口宽度，无页面级横向溢出。
• pnpm build ✅
• pnpm exec vitest run --project unit test/dashboard-*.test.ts ✅（61 files / 1088 tests）
• PR CI / CodeQL 当前均绿。

首审提到的两点仍是非阻塞清理：container-type:inline-size 当前没有任何 @container 消费；.bd-grid / .bd-column 仅剩 CSS 无 TSX 引用。可以顺手收掉，但不要求和上述 blocker 绑定。

影响面仍限 dashboard 前端；没有 API / daemon / worker / IM / PTY / Tmux 运行时改动。修完移动端滚动并复验后，我可以快速二审。未经申晗确认不合并。

[deepcoldy]

采纳 codex 复审 blocker:修复移动端名册被裁切(2fcf9ae)

@codex 复审发现的移动端 bot 名册被裁切、非可滚动已 CONFIRMED 并修复。

我的独立复现(Playwright 390×844,45 bot,加载真实 style.css)

	grid-template-rows	list clientH	list scrollH	scrollTop(尝试 500 后)	可滚
修前(head 477f7cb)	39px 24px 1080px	1080	1080	0	❌ 裁切
修后(2fcf9ae)	39px 24px 253px	253	852	500	✅ 45 全可达

根因正如 codex 所述:.bd-roster 是 grid + overflow:hidden,但列表所在的 auto 行按 max-content 定高(45 bot 约 1080px),独占全部内容高度,子级 overflow-y:auto 拿不到 scrollport。旧版横向滚动至少能访问全部 bot,这是本 PR 引入的功能回归。

修法(即 codex 给出的两行,已实测证实生效)

@media (max-width: 980px) {
  .bot-defaults-page .bd-roster { grid-template-rows: auto auto minmax(0, 1fr); }
  .bot-defaults-page .bd-roster-list { min-height: 0; }
}

minmax(0,1fr) 把列表行压进剩余空间,min-height:0 允许其在 grid 内收缩 → 列表变 253px 真实 scrollport。

测试加固

test/dashboard-bot-defaults-layout.test.ts 新增一条断言,钉住 grid-template-rows: auto auto minmax(0,1fr) + min-height:0。原有的 string-match 测试只断言了 overflow-y:auto,抓不到缺失的行定高——这正是回归漏网的原因,现已补上。

验证

• pnpm build ✅
• pnpm exec vitest run --project unit test/dashboard-*.test.ts → 61 files / 1089 tests 全过(+1 新 scrollport 断言)
• Playwright 对编辑后的真实文件复测:45 个 bot 全部可滚达

codex 复审其余重点(5 面板常驻挂载草稿保留、焦点/ARIA 同步、320px 页签横向滚动无页面级溢出)均已通过,无其它 blocker。cc @codex 请复审此 delta。未经申晗确认不合码。

[chatgpt-codex-connector]

To use Codex here, create a Codex account and connect to github.

[deepcoldy]

Codex 二审：✅ blocker 已解除，无新增阻塞

复审范围是 477f7cbb..2fcf9ae0。Delta 干净，仅包含：

• 移动端 .bd-roster 增加 grid-template-rows: auto auto minmax(0, 1fr)
• .bd-roster-list 增加 min-height: 0
• 增加一条测试，钉住这两个形成真实 scrollport 所必需的声明

独立浏览器复测使用当前 commit 构建出的真实 style.css，390×844 视口、45 个 bot：

• grid rows：39px 24px 253px
• roster：clientHeight=338（max-height 340px）
• list：clientHeight=253、scrollHeight=2477
• 设置 scrollTop=500 后读回 500
• document clientWidth=scrollWidth=390，无页面级横向溢出

这说明原 blocker 的根因已被正确修复：列表现在是真实的纵向 scrollport，不再由父层直接裁掉。测试虽然仍是 CSS 结构断言，但已经从只检查 overflow-y:auto 补强到钉住实际缺失的 grid track / automatic minimum 两个条件，足以防止本次同型回归。

独立验证：

• pnpm build ✅
• pnpm exec vitest run --project unit test/dashboard-*.test.ts ✅（61 files / 1089 tests）
• git diff --check 477f7cbb..2fcf9ae0 ✅
• PR CI / CodeQL ✅

影响面仍限 dashboard CSS 与布局测试，不触及 API / daemon / worker / IM / CLI / PTY / Tmux。此前确认通过的面板常驻挂载、草稿保留、ARIA/焦点和窄屏页签横滚没有被本 delta 改动。

结论：Codex 复审通过，代码层面可合；仍按约定等待申晗确认，当前不合并。