Composer 底部控制栏响应式设计

范围：聊天输入框下方的 permission、more、active tools、chat model、execution model、effort 和 context 控件。

控制栏按 composer 自身可用宽度响应，而不是按窗口宽度响应。正常宽度显示图标和文字；窄到既有文字会互相覆盖时，permission、两个 model 和 effort 只保留可点击图标。菜单、当前值、键盘操作、tooltip 和 accessible name 保持不变。

当前实现与缺口

.composer-bottom-row 已声明 container-type:inline-size，因此 split pane 可以按自己的实际宽度响应。当前左右 cluster 虽然允许内部横向滚动，但 permission、两个模型和 effort 的文字仍设置为不可换行、不可收缩。分屏缩窄后，flex 会压缩 cluster，最终出现文本截断、控件覆盖或整个 execution model 触发器不可见。

现有组件已经提供四类互异图标：Shield 表示权限，Message 表示 chat model，Terminal 表示 execution model，Biceps 表示 effort。所有触发器已经具备 Popover/Menu、tooltip 或 accessible name，因此不新增图标组件和菜单。

参考与选择

参考	适用能力	采用方式
W3C CSS Containment Level 3	`@container` 根据组件容器尺寸控制后代样式，不依赖 viewport。	采用现有 `.composer-bottom-row` 容器；split pane 与普通会话共用同一规则。
WAI accessible names	隐藏可见文字时，交互控件仍需保留可计算的名称。	沿用现有 tooltip、Popover trigger 和标签；视觉隐藏不删除 DOM 语义。
横向滚动	保留任意长度的文字，但会让部分设置入口离开当前可见范围。	保留为极窄宽度的后备；不作为主要响应方式。
换成两行	全部文字可见，但会改变 composer 高度并影响 transcript 底部预留。	拒绝；本任务保持单行。

目标显示

◇Ask permissions＋

◯Chat model〉_Execution model⌁Medium◌

◇Ask permissions＋

◯Chat model〉_Execution model⌁Medium◌

控制按钮 surface 层级

上方 environment chips 使用填充与边缘层级，底部 controls 则只有 20px 高。底部 permission、more、active tools、chat model、execution model、effort 与 context 只复用主题级 --chip-bg，形成始终可见的浅色填充；常态 surface 不新增 border、内描边或外部阴影，避免压缩小控件的内部视觉空间。既有 hover 前景色和键盘 focus-visible 指示保持不变。

状态	surface	保持不变
常态	`background:var(--chip-bg)`；computed border 为 0、shadow 为 none	20px 高度、5px 圆角、图标与文字颜色
hover / open	在 `--chip-bg` 上混入 8% `--text-bright`	原菜单、tooltip、动画、既有 hover 前景色与 effort 等级色
窄态	与常态同一 surface，不因文字视觉隐藏而改变	四个核心触发器仍为 20px 图标按钮

收缩优先级

在 .composer-bottom-row ≤ 560px 时视觉隐藏四类文字。
各图标触发器保持 20px 控件尺寸和原顺序。
active tool chips 与 context ring 本来就是图标，不改变。

交互与无障碍

点击图标打开原菜单。
chat 与 execution 使用不同图标。
effort 图标颜色继续反映当前级别。
focus、tooltip 和 accessible name 不随文字隐藏而消失。

边界

不改模型、权限和 effort 状态。
不新增断点监听、ResizeObserver 或依赖。
不换行、不隐藏整个控件。
不调整 composer 高度和 splitRatio。

实施 brief 与验收

生产文件限定为 web/components/chat/composer/composer.module.css、controls/controls-cluster.tsx、controls/thinking-effort-pill.tsx 和纯函数 web/lib/effort-color.ts。纯函数只抽取既有 effort 逐级颜色计算，让原 pill 与窄宽度图标使用同一来源。回归入口使用现有 npm --prefix web run check:chat-ui。不修改 Popover、Menu、provider、session store 或提交逻辑。

public-entry RED 必须证明 .composer-bottom-row ≤ 560px 时 permission、chat model、execution model 和 effort 的文字均视觉隐藏。
同一规则必须证明四个触发器的图标仍显示；不得使用 display:none 隐藏完整 badge 或 effort host。至少两个非 max effort 级别必须生成不同图标颜色。
默认安装版在 split pane 中把 divider 向左拖到触发阈值后，右侧四个设置入口和左侧 permission/more 均可见、无重叠。
分别点击 permission、chat model、execution model 和 effort 图标，原菜单或面板正常展开。
把 pane 拉宽超过阈值后文字恢复；重新选择 split 和刷新不改变该行为。
底部所有可见控制按钮在未 hover 时均有非透明的 --chip-bg surface，computed border 为 0 且 shadow 为 none；hover 或菜单展开时背景必须比常态更明显。键盘 focus-visible 指示不属于常态边框，继续保留。

实现状态

项目	状态
设计与任务边界	完成
public-entry RED / GREEN	完成：静态入口先因缺少窄态 effort 图标失败，实施后通过；真实 App E2E 覆盖 700px 与 360px 两种容器宽度。
specification review / quality review	完成：规格审查与修复后的独立质量审查均通过。
完整检查与默认安装版可见验收	完成：Web 全量检查、TypeScript、构建、desktop webtab/transfer、单元测试和默认安装版 CDP 验收均通过。
底部控制按钮常态 surface	完成：常态仅使用 `--chip-bg` 填充，不增加边框或内描边；真实 App computed style 验证 border 为 0、shadow 为 none，hover/open 仅增强背景。

可见验收使用实际 /Applications/OpenProgram.app、默认 18100 页面和 9223 CDP。测试操作真实 permission、more、active tool、chat model、execution model、effort 与 context 触发器，确认常态无边框、hover/open 背景增强、窄态无重叠且菜单可打开，并在结束时关闭菜单、恢复焦点与原始页面样式。