企业官网建设流程全解析

• AI Agent
• 人工智能
• 代码智能体
• 交互助手

OpenChamber 1.8.3（发布日期 2026-03-02）是一次以 Chat 与 Git 体验为核心的 UI 重构版本：它把上下文面板（Context Panel）改造成支持可复用标签页并内嵌会话聊天（beta）的复合工作区，同时为聊天消息引入纯文本渲染与粘性标题等显示控制，并让模型选择器的供应商分组支持折叠且记忆展开状态。读完本文，你可以基于变更日志 changelog/1.8.3.md 与当前仓库源码，完整理解这一版本每个特性的实现方式、涉及的关键文件与持久化机制，并能在自己的环境中验证对应行为。

版本概览：App 与 VS Code 双端变更

1.8.3 的变更日志同时覆盖桌面/应用（App）与 VS Code 扩展两端。核心脉络可以归纳为四件事：

1. 上下文面板重构（beta）：可复用标签页 + 内嵌会话聊天，这是本版本的旗舰特性；
2. 聊天显示控制：用户消息支持纯文本渲染与粘性标题（sticky header），偏好持久化；
3. 模型选择器改进：供应商分组可折叠，展开/折叠状态跨会话记忆；
4. 一系列 Git / Diff / 移动端修复：批量还原（bulk revert）、暂存边界情况、worktree 分支重命名、diff 快速定位首行变更等。

下面逐项结合源码展开。

App 端新增：用户消息显示控制（纯文本渲染 + 粘性标题）

变更日志原文：

Chat: added user-message display controls for plain-text rendering and sticky headers.

这条“新增”背后有清晰的实现链路。用户消息的渲染入口在 UserTextPart.tsx，其中关键逻辑为：

• 渲染模式被归一化为'markdown' | 'plain'两种取值（normalizeUserMessageRenderingMode：当持久化值不是'markdown'时一律回落到'plain'），这保证了未知/损坏的存储值不会导致渲染异常；
• 组件从全局 UI store 读取偏好：useUIStore((state) => state.userMessageRenderingMode)，也就是说该设置是跨会话的全局偏好，而不是逐消息的状态；
• 当模式为plain时，消息内容以whitespace-pre-wrap样式直接输出纯文本；为markdown时则交给SimpleMarkdownRenderer渲染。

与纯文本渲染并列的另一项控制是粘性用户标题（Sticky User Header）。在设置文案表中可以确认该开关的存在与命名：en.settings.ts 中定义了settings.openchamber.visual.field.stickyUserHeader（显示名 "Sticky User Header"）及其无障碍标签stickyUserHeaderAria。这类视觉偏好与聊天显示设置一起，在 1.8.3 中被重新组织进设置页（见下文“设置重组织”一节）。

从源码结构看，这些显示偏好的持久化遵循项目统一的 zustand persist 模式。可参考同版本风格的 useSessionDisplayStore.ts：store 使用persist中间件并显式维护version与migrate函数（当前已迭代到 version 8），历史版本中类似stickyZoneHeaders的粘性标题开关就是经过“引入 → 改为由视图模式派生 → 迁移删除”的完整生命周期管理的。这说明 1.8.3 引入的用户消息粘性标题属于同一套可演进的持久化偏好体系，后续版本可以安全地调整默认行为而不破坏旧数据。

App 端新增：模型选择器可折叠供应商分组与状态记忆

变更日志原文：

Chat: model picker now supports collapsible provider groups and remembers expanded state between sessions.

实现位于 ModelPickerList.tsx。该组件中供应商分组头部带有标准的可访问性属性（aria-expanded={!collapsed}，见文件约 L813、L836 处），表明折叠交互是按 ARIA 展开/折叠模式实现的：分组头部作为可聚焦按钮，aria-expanded与折叠状态同步，屏幕阅读器可感知当前分组是否展开。

“记忆展开状态”体现在两点：

1. 状态不是组件本地useState一次性生命周期，而是提升到 store 层持久化，因此跨会话（between sessions）保持；
2. 这与模型选择器同时被多场景复用的事实一致——聊天输入框、多模型选择（如 ModelMultiSelect.tsx）都依赖同一套分组/展开语义，把状态提升到 store 可以避免每个入口各自维护一份不一致的记忆。

旗舰特性：上下文面板重构与内嵌会话聊天（beta）

变更日志原文：

Chat/UI: overhauled the context panel with reusable tabs and embedded session chat (beta).

这是 1.8.3 中改动面最大的特性，核心实现集中在两个文件：

• ContextPanel.tsx（1400+ 行的面板主体）
• contextPanelEmbeddedChat.ts（内嵌会话聊天的 iframe 引导协议）

可复用标签页与重视图按需加载

ContextPanel.tsx 顶部有一段注释解释了一个关键的性能决策：重视图一律走动态导入。DiffView、FilesView、GitView、WalkthroughView、LinearIssuesView、PlanView均通过lazyWithChunkRecovery按需加载，避免把 CodeMirror、@pierre/diffs等重型依赖拉进启动时的 eager 依赖图（注释明确说明“只有当对应标签页真正打开时才需要这些栈”）。面板标签条使用SortableTabsStrip组件，对应变更日志中“reusable tabs”（可复用/可排序标签）的描述。

面板的几何约束也值得注意（ContextPanel.tsx 中的常量）：

源码注释说明面板没有绝对像素上限：在大屏上用户可以把它拉到接近全宽（例如与聊天并排做双栏 diff 对照），拖动期间唯一的限制是“聊天列至少保留 400px”。这种“无上限 + 动态计算上限”的设计（maxPanelWidth基于当前可用宽度减去聊天最小列宽）让同一面板从小屏笔记本到大屏显示器都可用。

内嵌会话聊天：iframe + postMessage 引导协议

“embedded session chat (beta)”的技术方案是：在上下文面板的标签页中嵌入一个同源 iframe，iframe 指向带特殊查询参数的应用自身 URL。URL 构造逻辑在buildEmbeddedSessionChatURL（contextPanelEmbeddedChat.ts），生成的 URL 形如：

?ocPanel=session-chat &surface=desktop &sessionId=<sessionID> &readOnly=1 （只读会话时） &directory=<directory> （指定工作目录时） &themeMode=light|dark|system &lightThemeId=... &darkThemeId=... &themeVariant=light|dark &allowPromptingSubagentSessions=0|1

iframe 与父窗口之间的通信采用受控的postMessage协议，全部常量与类型在同一文件中定义：

引导请求requestEmbeddedSessionRuntimeBootstrap有明确的健壮性设计（contextPanelEmbeddedChat.ts）：

• 仅当isEmbeddedSessionChat()为真且确实处于 iframe 内（window.parent !== window）才发起；
• 用requestId（优先crypto.randomUUID）匹配响应，忽略不相关消息；
• 只接受来自window.parent且origin === window.location.origin的消息（同源校验）；
• 5 秒超时（EMBEDDED_RUNTIME_BOOTSTRAP_TIMEOUT_MS）+ 100ms 间隔重试（EMBEDDED_RUNTIME_BOOTSTRAP_RETRY_MS），防止父窗口尚未就绪时丢失引导；
• 响应载荷经过isRuntimeBootstrap结构校验，其中 relay 字段特别要求不含grant（!('grant' in relay)）——从源码结构看，这意味着敏感授权凭据不会被写入 iframe URL 或跨窗口消息，而是保留在父窗口侧。

另外，getOrCreateEmbeddedSessionChatURL用“签名缓存”避免重复构造：签名是{sessionID, directory, readOnly}的 JSON，只有签名变化才重建 URL（contextPanelEmbeddedChat.ts），减少 iframe 不必要的重载。isEmbeddedSessionChat则按 JS realm 缓存判断结果（注释说明 iframe 的“内嵌身份”在挂载时固定、src 换绑即整页重载，因此缓存是安全的），并附带resetEmbeddedSessionChatCache供测试模拟不同 realm。

这一套协议并非孤例：仓库内已有成体系的布局级测试覆盖相关边界，例如 issue-2815-sessionChatIframesMountAllTabs.test.ts 验证多个标签同时挂载会话聊天 iframe 的场景，contextPanelEscapeClosesTerminal.test.ts 与 contextPanelTerminalTarget.test.ts 覆盖面板内终端与 Esc 行为，另有 contextPanelEmbeddedChat.test.ts 对引导协议本身做单测——这也解释了 changelog 为何标注beta：核心协议已就绪且被测试保护，行为细节仍在迭代。

App 端改进：Git 侧边栏与批量还原、设置页双栏重组织

Git 侧边栏行为细化与 bulk-revert（带确认）

Git: refined Git sidebar tab behavior and spacing, plus bulk-revert with confirmations for easier cleanup.

批量还原（一次性还原多条改动，用于 Agent 产生“脏改动”后的快速清理）带有显式确认对话框，属于破坏性操作的常规防御。相关 UI 的上下文入口包括 GitView（面板重视图之一）与变更行组件 ChangeRow.tsx。

设置页双栏紧凑布局

Settings: reorganized chat display settings into a more compact two-column layout.

1.8.3 把聊天显示类设置（包括上文的用户消息渲染模式、粘性用户标题等视觉偏好）重排进更紧凑的两栏布局。设置文案集中维护在 en.settings.ts 等 10+ 语言文件中，settings.openchamber.visual.*命名空间下即可看到这些字段的 i18n 键，改动是纯 UI 层调整，不改变偏好语义。

App 端修复：代码块、Diff 快速定位、Git 暂存与 worktree 分支重命名

变更日志列出的修复（Fixes）逐条对应明确的代码位置：

代码块呈现与主题化高亮

improved code block presentation with cleaner action alignment, restored horizontal scrolling, and polished themed highlighting across chat messages and tool output (thanks to @nelsonPires5)

聊天消息与工具输出中的代码块统一走 markdown 渲染管线：MarkdownRendererImpl.tsx 与 markdownCore.ts 负责高亮与代码块结构，修复点集中在三处——头部操作按钮的对齐、横向滚动条的恢复（长代码行不再被截断换行）、主题化高亮在消息与工具输出两处的一致性。工具输出侧对应 ToolPart.tsx。

Diff 视图快速定位首行变更

Diff: added quick open-in-editor actions from diff views that jump to the first changed line.

Diff 视图（DiffView.tsx 及其 hunks 测试 覆盖的 hunk 解析）新增“打开到编辑器并跳到首个变更行”的动作，配合上文的面板懒加载设计，diff → 编辑器的工作流是 1.8.3 的重点打磨对象。

Git 暂存的陈旧已删除路径过滤

Git: fixed commit staging edge cases by filtering stale deleted paths before staging.

修复的是暂存阶段的边界情况：在把路径加入 index 之前，先过滤掉“文件已在磁盘上被删除”的陈旧路径，避免git add类操作在脏路径上报错或产生意外状态。

worktree 中草稿会话的分支重命名恢复

Git/Worktrees: restored branch rename/edit controls in draft sessions when working in a worktree directory.

在 worktree 目录中工作时，草稿会话（draft session）里的分支重命名/编辑控件曾失效，本版本恢复。这与仓库以 worktree 为核心的多工作流设计一致，相关分支/会话状态逻辑可见 gitService.worktree-bootstrap.test.js 对 worktree 引导流程的测试保护（该文件属于 VS Code 侧，但反映了两端共享的 worktree 心智模型）。

移动端紧凑标题栏的会话标题溢出

Mobile/UI: fixed session-title overflow in compact headers (thanks to @iamhenry)

移动端紧凑头部（compact header）中会话标题过长会溢出布局，本版本修复。移动端布局入口为 MobileHeader.tsx，整体移动端界面可参考 docs/references/pwa_chat_example.png。

VS Code 扩展端：与 App 对齐的聊天显示控制

VS Code 一端的变更与 App 端刻意保持对齐：

• New：Chat: added user-message display options for plain-text rendering and sticky headers, with preferences persisted in settings.
• Improvements：Chat: model picker provider groups are now collapsible, with expanded/collapsed state remembered.
• Fixes：Chat: improved code block readability with cleaner header actions, restored horizontal scrolling, and themed highlighting in markdown and tool output (thanks to @nelsonPires5).

注意两点与 App 端的差异：

1. VS Code 端强调preferences persisted in settings——即偏好写入 VS Code 的 settings 持久化体系（而非仅内存/store）。VS Code 扩展的设置与配置管理集中在 settings-files.ts、settings-registry-gate.ts 与 settings-registry.json，新增显示选项走的就是这套注册表机制；
2. VS Code 端没有内嵌会话聊天与上下文面板重构——嵌入聊天依赖宿主窗口的 iframe 能力与?ocPanel=session-chat路由，webview 形态下不适用；上下文面板的重构属于主应用布局层（MainLayout.tsx / RightSidebarTabs.tsx），因此 changelog 中该条目只出现在 App 一侧。

小结：如何验证这一版本的行为

如果你希望基于当前仓库验证 1.8.3 描述的这些行为，建议按以下路径阅读与调试（仓库为只读参考，以下均为查看/运行方式）：

• 面板与嵌入聊天：packages/ui/src/components/layout/ContextPanel.tsx、packages/ui/src/components/layout/contextPanelEmbeddedChat.ts及其__tests__目录下的布局测试；
• 用户消息渲染：packages/ui/src/components/chat/message/parts/UserTextPart.tsx（userMessageRenderingMode的'markdown' | 'plain'归一化逻辑）；
• 模型选择器分组：packages/ui/src/components/model-picker/ModelPickerList.tsx（aria-expanded折叠语义）；
• 设置文案与持久化偏好模式：packages/ui/src/lib/i18n/messages/en.settings.ts、packages/ui/src/stores/useSessionDisplayStore.ts（persist + version + migrate 范式）；
• VS Code 侧设置注册表：packages/vscode/src/settings-registry.json、packages/vscode/src/settings-files.ts。

1.8.3 的整体取向很清晰：把“会话上下文”从聊天窗口外部的孤立面板，升级为聊天旁可复用、可嵌入、受协议引导的复合工作区（beta），同时用纯文本渲染、粘性标题、可折叠模型分组等细粒度显示控制，让 Agent 密集产生的长会话在两种宿主形态（浏览器/桌面 App 与 VS Code 扩展）下都保持可读、可控、可持久化。

• AI Agent
• 人工智能
• 代码智能体
• 交互助手