修复策划工作台窄屏输入区裁切

为窄屏策划工作台提供纵向滚动并明确面板高度
补齐窗口外壳层级及响应式断点布局回归测试
同步窄屏滚动验收合同与布局排障经验

apps/ai-game-creator-shell/src/styles.css

@@ -10197,17 +10197,23 @@ button.design-workspace-tree__entry:hover,
 }
 
 @media (max-width: 760px) {
-  .game-workbench-layout--design {
+  .game-project-workbench--design {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  /* 两块面板在固定外壳内滚动；覆盖外壳的 height: 100%，避免第二行被裁切。 */
+  .game-project-workbench--design .game-workbench-layout--design {
     height: auto;
     grid-template-columns: minmax(0, 1fr);
   }
 
-  .game-workbench-layout--design .game-workbench-stage,
-  .game-workbench-layout--design .game-workbench-chat {
-    min-height: 560px;
+  .game-workbench-layout--design .game-workbench-stage {
+    height: 560px;
   }
 
   .game-workbench-layout--design .game-workbench-chat {
+    min-height: 560px;
     height: clamp(560px, calc(100dvh - 154px), 900px);
   }
 

apps/ai-game-creator-shell/tests/chatDialogFrameLayout.test.ts

@@ -420,7 +420,13 @@ describe('陶泥儿对话区：Codex 三段式（顶栏 / 唯一滚动区 / 文
 describe('策划对话：消息伸缩与长内容边界', () => {
   function planningDeclarations(className: string, width: number) {
     const root = document.createElement('div');
-    root.innerHTML = `<div class="game-workbench-layout game-workbench-layout--design">
+    root.innerHTML = `<div class="window-chrome"><div class="window-chrome__content">
+      <div class="launcher-shell platform-theme"><aside></aside><main class="launcher-main">
+      <section class="launcher-page launcher-project-development game-project-workbench game-project-workbench--design">
+      <div class="game-workbench-layout game-workbench-layout--design">
+      <section class="game-workbench-stage"><div class="design-workspace-panel">
+        <div class="design-workspace-panel__body"><div class="design-workspace-tree"></div></div>
+      </div></section>
       <aside class="game-workbench-chat"><header>策划</header>
         <section class="project-chat-surface"><div class="project-chat-conversation">
           <section class="design-agent-controls"></section>
@@ -431,7 +437,7 @@ describe('策划对话：消息伸缩与长内容边界', () => {
           <section class="design-agent-pending-actions"></section>
           <form class="project-chat-composer"><p class="project-chat-composer-notice"></p></form>
         </div></section>
-      </aside></div>`;
+      </aside></div></section></main></div></div></div>`;
     const element = root.querySelector(className)!;
     // 从 DOM 匹配完整选择器，防止遗漏基础规则或误把 Direct 专用样式算到策划入口。
     const selectors = rules.flatMap((rule) =>
@@ -494,12 +500,47 @@ describe('策划对话：消息伸缩与长内容边界', () => {
     },
   );
 
-  it('窄屏工作台为单列，对话仍有明确高度而非随历史撑长', () => {
-    const layout = planningDeclarations('.game-workbench-layout', 390);
-    const chat = planningDeclarations('.game-workbench-chat', 390);
-    expect(declaration(layout, 'grid-template-columns')).toBe('minmax(0, 1fr)');
-    expect(declaration(chat, 'height')).toBe(
-      'clamp(560px, calc(100dvh - 154px), 900px)',
+  it.each([390, 760])(
+    '%ipx：固定外壳内工作台可滚动到对话，两块面板保持明确高度',
+    (width) => {
+      const workbench = planningDeclarations('.game-project-workbench', width);
+      const layout = planningDeclarations('.game-workbench-layout', width);
+      const stage = planningDeclarations('.game-workbench-stage', width);
+      const chat = planningDeclarations('.game-workbench-chat', width);
+      expect(declaration(workbench, 'min-height')).toBe('0');
+      expect(declaration(workbench, 'overflow-y')).toBe('auto');
+      expect(declaration(workbench, 'overflow-x')).toBe('hidden');
+      expect(declaration(layout, 'height')).toBe('auto');
+      expect(declaration(layout, 'grid-template-columns')).toBe(
+        'minmax(0, 1fr)',
+      );
+      expect(declaration(stage, 'height')).toBe('560px');
+      expect(declaration(chat, 'height')).toBe(
+        'clamp(560px, calc(100dvh - 154px), 900px)',
+      );
+      expect(
+        declaration(
+          planningDeclarations('.design-workspace-panel', width),
+          'height',
+        ),
+      ).toBe('100%');
+      expect(
+        declaration(
+          planningDeclarations('.design-workspace-tree', width),
+          'overflow',
+        ),
+      ).toBe('auto');
+    },
+  );
+
+  it.each([761, 1280])('%ipx：双栏继续填满外壳剩余高度', (width) => {
+    const workbench = planningDeclarations('.game-project-workbench', width);
+    const layout = planningDeclarations('.game-workbench-layout', width);
+    expect(declaration(workbench, 'overflow')).toBe('hidden');
+    expect(workbench.has('overflow-y')).toBe(false);
+    expect(declaration(layout, 'height')).toBe('100%');
+    expect(declaration(layout, 'grid-template-columns')).toBe(
+      'minmax(0, 1fr) minmax(380px, 0.42fr)',
     );
   });
 

docs/project-memory/shared-memory/pitfalls.md

@@ -5945,7 +5945,7 @@ Cocos Creator 根目录由 `package.json.creator.version` 与普通 `assets/`
 
 ## 策划聊天不能按可选子节点序号分配消息高度
 
-策划与开发 Agent 共用聊天类名，但布局合同不同。策划新增状态条后，按第二个子节点分配 `1fr` 会把空白给状态条、让消息框随回复增长；只给 `.is-direct-codex` 的状态样式也不会覆盖策划。策划使用纵向 Flex，仅消息列表伸缩，阶段/待处理区域限高滚动；改共用样式时同时核对两种入口。jsdom 交互通过不代表布局正确，须匹配完整 CSS 层叠并用真实浏览器核对空/短/长消息与长待办。实时正文/思考不更新持久消息数组，滚动跟随必须覆盖这些独立状态并保留用户上滚门禁；历史消息缺失的时间不得用读取时刻填补。详见 AGC 实施计划的“策划 Agent 对话显示与滚动合同”。
+策划与开发 Agent 共用聊天类名，但布局合同不同。策划新增状态条后，按第二个子节点分配 `1fr` 会把空白给状态条、让消息框随回复增长；只给 `.is-direct-codex` 的状态样式也不会覆盖策划。策划使用纵向 Flex，仅消息列表伸缩，阶段/待处理区域限高滚动；改共用样式时同时核对两种入口。jsdom 交互通过不代表布局正确，须匹配完整 CSS 层叠并用真实浏览器核对空/短/长消息与长待办。窄屏上下堆叠必须在固定外壳内提供工作台滚动容器，两块面板明确限高；低优先级的 `height: auto` 不能覆盖外壳后代规则的 `height: 100%`。布局夹具必须包含窗口外壳与启动器层级，并实际滚动验证输入框可见可操作，不能只检查输入框在聊天面板内部。实时正文/思考不更新持久消息数组，滚动跟随必须覆盖这些独立状态并保留用户上滚门禁；历史消息缺失的时间不得用读取时刻填补。详见 AGC 实施计划的“策划 Agent 对话显示与滚动合同”。
 
 ## 2026-09-22 Rust 对象快照必须对齐 CI 编译目录和 Cargo 环境
 

docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md

@@ -248,14 +248,14 @@ Rust 分片日志在失败时输出有界 stdout 尾部中的失败段，保留
 - 工作区状态条复用现有聊天状态条的字号、间距和状态点。长项目名允许换行，不能撑宽面板；长错误、澄清和批量文件导入结果在受限区域内完整可读，不能挤走输入框。输入编辑器保留原有高度上限，模型/推理菜单继续允许弹出面板。
 - 已在消息底部时，实时正文与思考增高后继续跟随；用户主动上滚阅读历史后不自动抢回底部，发送新消息后恢复跟随。阶段/待处理卡片改变消息可用高度时，仍遵守同一跟随意图。滚动仅为临时 UI 状态，不写入正式会话。
 - 历史消息只有收到真实发送时间才能显示时间。现有策划持久消息不含逐消息时间，读取或刷新时保持未知，不以当前时刻补造。当前会话刚提交的乐观消息可以显示已知发送时间；正式快照覆盖后不补造或猜配旧消息时间。
-- 窄屏下资源区与对话区单列排列，对话区仍保持受限高度，长对话不撑长整页。正式主窗最小宽度不变，窄屏验收覆盖浏览器响应式布局。
+- ≤760px 时资源区与对话区单列排列，策划工作台在固定外壳内纵向滚动，用户向下滚动可到达输入区。布局使用内容高度，并以同等或更高选择器优先级覆盖外壳的 `height: 100%`；资源区明确为 560px，对话区高度为 `clamp(560px, calc(100dvh - 154px), 900px)`。文件树与消息列表各自内部滚动，长内容不增加两块面板高度。>760px 继续共用外壳剩余高度，不启用工作台整体滚动。正式主窗最小宽度不变，窄屏验收覆盖浏览器响应式布局。
 - 审批、澄清、导入期间禁用、错误重试、项目归属和发送权限沿用现有行为。此次调整不改变 Runtime、API、持久协议或数据库，无数据迁移；不重做开发 Agent 的对话布局。
 
-验收使用策划组件与现有界面测试覆盖流式/历史跟随、未知时间、审批澄清和导入禁用；使用真实浏览器与当前样式核对桌面/窄屏的空、短、长消息，长项目名、长错误与长澄清，以及输入框和菜单位置。开发 Agent 的既有布局回归同批执行。真实 Provider 请求不作为纯展示修复的前置条件，验证记录须区分模拟事件与真实 Provider。
+验收使用策划组件与现有界面测试覆盖流式/历史跟随、未知时间、审批澄清和导入禁用；使用真实浏览器与当前样式核对桌面/窄屏的空、短、长消息，长项目名、长错误与长澄清，以及输入框和菜单位置。布局验收必须包含 `window-chrome → window-chrome__content → launcher-shell → launcher-main → game-project-workbench` 的完整外壳层级，覆盖 390px、760px、761px 和桌面尺寸；窄屏实际滚动工作台后，输入框须进入可视范围且可操作，长文件树、长消息和待确认内容不能使面板失去高度边界。不能只断言输入框位于聊天面板内部。开发 Agent 的既有布局回归同批执行。真实 Provider 请求不作为纯展示修复的前置条件，验证记录须区分模拟事件与真实 Provider。
 
 | 验收面 | 对应证据 |
 | --- | --- |
-| 策划与开发 Agent 布局隔离、伸缩与窄屏单列 | `chatDialogFrameLayout.test.ts` 的完整选择器层叠回归；Chrome 实际组件与完整样式的桌面/390px 几何和截图检查 |
+| 策划与开发 Agent 布局隔离、伸缩与窄屏滚动可达 | `chatDialogFrameLayout.test.ts` 包含外壳的选择器层叠回归；Chrome 实际组件、完整外壳与完整样式的 390px/760px/761px/桌面几何、滚动和输入操作检查 |
 | 实时正文/思考跟随、上滚停留、发送恢复 | `appSurface/design-agent.suite.ts` 的实时事件与发送恢复用例；还原旧滚动依赖时新增用例失败 |
 | 历史未知时间与乐观发送时间 | 同套界面测试覆盖读取、乐观发送和正式快照覆盖；恢复 `Date.now()` 补造时新增用例失败 |
 | 审批/澄清、文件导入禁用及共用控件 | `appSurface.test.ts` 现有交互回归与 Chrome 模型菜单位置检查；不改变原生调用和业务状态 |