fix(web): restore ui surfaces

[kilockok]

Summary

• restore web UI surface styling and chat panel presentation
• keep theme export/import UI state aligned with appearance settings
• refine desktop channel settings UI and related locale/test coverage

Scope

• UI-only branch from origin/main
• no src/services/** changes
• no src/apps/desktop/** main/preload changes

Tests

• pnpm -C src/apps/web type-check
• pnpm -C src/apps/web test -- src/__tests__/advancedSettings.test.tsx src/__tests__/appUI.test.tsx src/__tests__/appearanceStorage.test.ts src/__tests__/chatInputPersonaSelector.test.tsx src/__tests__/chatPageLoading.test.tsx src/__tests__/desktopChannelsSettings.test.tsx src/__tests__/documentPanelPreview.test.tsx
• pnpm -C src/apps/web lint (passes with existing warnings)

[qqqqqf-q]

截图展示区别 pls
such as "恢复 Web UI 界面样式及聊天面板展示效果"
whatis restore

[kilockok]

现
原

现

原

[qqqqqf-q]

代码方向正确，但有两个阻塞问题需要修复后才能合并。

阻塞问题

1. documentPanelPreview 测试失败（CI real failure）

documentPanelPreview.test.tsx 改写为 mock ArtifactHtmlPreview 后，CI 上断言 container.querySelector('[data-artifact-html-preview="preview.html"]') 返回 null。mock 在 CI 环境中未正确渲染。需要修复 mock 或改回实际组件渲染方式。

2. chatInputPersonaSelector 测试变更缺少对应组件改动

测试从"验证动态人格加载和切换"改为"验证动态人格不再加载"，但 ChatInput.tsx 的改动只有 useEffect→useLayoutEffect，没有移除动态人格加载逻辑。

如果是有意移除了该功能，需要同步修改组件代码。如果是功能已经 broken，应该修复组件而非修改测试适配 broken 状态。

非阻塞建议

• normalizeThemeBackgroundImage 返回 ThemeBackgroundImage | null | undefined 三态，undefined 表示"无效数据并 throw"。建议改为返回 { valid: true, value: T | null } | { valid: false } 或直接 throw，避免三态歧义。

[kilockok]

已修改两个测试

[qqqqqf-q]

不合。打回重拆。

阻塞

1. 大杂烩，必须拆分

29 个文件、7 个 commit 混了至少 6 件不相关的事：

1. CSS 表面层修复（theme-surface-page/sidebar/chat-surface）
2. 主题导出/导入扩展（backgroundImage, sidebarGrouping）
3. splitWorkGroup 重构（tailSegments）
4. GTD 订阅集中化（subscribeGtdEnabled）
5. QQ bot name 字段
6. 人格选择器行为变更 + scrollbarGutter 移除

这些之间没有逻辑依赖，混在一起审不动、回滚代价大。请按功能拆成 3-4 个独立 PR，每个改动自洽、测试对齐。

2. chatInputPersonaSelector 测试与组件不一致（上次 review 的 blocker 未修复）

测试改为断言 mockedListSelectablePersonas 未被调用、动态人格按钮不出现。但 ChatInput.tsx 只改了 useEffect → useLayoutEffect，没有移除动态人格加载逻辑。测试在断言组件代码中并未发生的行为变更。

要么改组件（真的移除动态人格加载），要么改测试（测试实际行为）。不能测试和组件说的不是同一件事。

3. scrollbarGutter: 'stable' 移除需要说明

AppLayout.tsx 移除了 scrollbarGutter: 'stable'，会导致内容溢出时 scrollbar 出现/消失引起布局偏移。如果是有意为之，请说明原因。

建议拆分方式

• PR A: CSS 表面层修复（theme-surface-*, gradient stop 变量）— 这部分质量没问题，可以先合
• PR B: splitWorkGroup 重构 + MessageList tailSegments 渲染
• PR C: 主题导出/导入扩展 + GTD 订阅集中化
• PR D: QQ bot name + 人格选择器 + 其他零散修复

[kilockok]

已按 review 拆分为独立 PR：#74（CSS surfaces）、#72（assistant tail segments）、#75（主题导出/导入 + GTD 订阅）、#73（QQ bot name + persona selector + preview 测试）。原 PR 不再继续审。