修复：AGC 工具调用组折叠箭头展开时仍朝下（#617） #619

2026-10-04T17:42:09+08:00

suzmii commented

2026-10-04 17:42:09 +08:00

关联

Fixes #617

现象 → 修复后

	修复前	修复后
组头「执行了 N 个操作」展开态箭头	仍朝下（与折叠态无差别，截图红框处）	朝上
同组二级工具行（`agc_browser_playtest`）	正常朝上	不变

修复前实测（真实 Chromium，aria-expanded="true"）：

.agent-process-summary-chevron        -> matrix(-1, 0, 0, -1, 0, 0)
svg.agent-tool-call-group-chevron     -> matrix(-1, 0, 0, -1, 0, 0)   # 叠加成 360°

修复后：

.agent-process-summary-chevron        -> matrix(-1, 0, 0, -1, 0, 0)   # 展开态朝上
svg.agent-tool-call-group-chevron     -> none

根因

组头 chevron 被两次 rotate(180deg)，净 360°，等价于没转：

共享 wrapper：packages/shared/src/components/AgentProcessSummary.css:48-51 —— [aria-expanded='true'] > .agent-process-summary .agent-process-summary-chevron；
app 侧重复规则：apps/ai-game-creator-shell/src/styles.css 的 .agent-tool-call-group-head[aria-expanded='true'] .agent-tool-call-group-chevron，由 ToolCallGroup.tsx 传入的 ChevronDown className="agent-tool-call-group-chevron" 命中。

两条规则命中不同元素（wrapper span 与内部 svg），各转 180° 叠加。思考过程块传的是不带自转 class 的裸 ChevronDown，二级工具行不经过 AgentProcessSummary，都只转一次，所以只有组头出问题。

落地方案

删除 app 侧那条 rotate(180deg)，换向唯一来源留在共享 AgentProcessSummary 的 wrapper 规则；
在原处补注释写明该约定，避免以后又叠一层；
DOM 结构、class 名、is-direct-codex 里 .agent-tool-call-group-chevron 的 grid 定位（styles.css:12668-12672）、折叠逻辑、aria-expanded / hidden 语义、计时与汇总文案都不动。

+/* 组头 chevron 只保留外层定位与过渡；**换向唯一来源**是共享 `AgentProcessSummary` 的
+   `[aria-expanded='true'] > .agent-process-summary .agent-process-summary-chevron`。
+   这里若再写一条 `rotate(180deg)`，会与 wrapper 的旋转叠加成 360°，展开态看起来仍是朝下。 */
 .agent-tool-call-group-chevron {
   flex: 0 0 auto;
   color: inherit;
   transition: transform 120ms ease;
 }
-
-.agent-tool-call-group-head[aria-expanded='true']
-  .agent-tool-call-group-chevron {
-  transform: rotate(180deg);
-}

验证

真实 Chromium + Vite 挂载真实 ToolCallGroup（worktree 内一次性夹具，验证后已删）：折叠态 wrapper/svg 均 none（朝下）→ 点击展开后 wrapper matrix(-1,0,0,-1,0,0)、svg none（朝上）；把删掉的旧规则作为 <style> 注回即复现原缺陷（svg 同时变 matrix(-1, 0, 0, -1, 0, 0)，展开仍朝下），确认这条规则就是唯一成因。
node scripts/check-encoding.mjs：5231 个文件通过；git diff --check 干净。
未覆盖：apps/ai-game-creator-shell/tests/appSurface.test.ts 是 jsdom 套件、不计算 CSS 级联，锁不住箭头方向；本 worktree 内该入口因 vite-node/mlly 路径解析报错无法 collect（主检出同一入口 195 passed / 9 skipped，用于确认基线）。本次改动只删了一条 CSS 声明，未触碰该套件覆盖的 DOM 契约。

## 关联 Fixes #617 ## 现象 → 修复后 | | 修复前 | 修复后 | |---|---|---| | 组头「执行了 N 个操作」展开态箭头 | 仍朝下（与折叠态无差别，截图红框处） | 朝上 | | 同组二级工具行（`agc_browser_playtest`） | 正常朝上 | 不变 | 修复前实测（真实 Chromium，`aria-expanded="true"`）： ``` .agent-process-summary-chevron -> matrix(-1, 0, 0, -1, 0, 0) svg.agent-tool-call-group-chevron -> matrix(-1, 0, 0, -1, 0, 0) # 叠加成 360° ``` 修复后： ``` .agent-process-summary-chevron -> matrix(-1, 0, 0, -1, 0, 0) # 展开态朝上 svg.agent-tool-call-group-chevron -> none ``` ## 根因组头 chevron 被**两次** `rotate(180deg)`，净 360°，等价于没转： 1. 共享 wrapper：`packages/shared/src/components/AgentProcessSummary.css:48-51` —— `[aria-expanded='true'] > .agent-process-summary .agent-process-summary-chevron`； 2. app 侧重复规则：`apps/ai-game-creator-shell/src/styles.css` 的 `.agent-tool-call-group-head[aria-expanded='true'] .agent-tool-call-group-chevron`，由 `ToolCallGroup.tsx` 传入的 `ChevronDown className="agent-tool-call-group-chevron"` 命中。两条规则命中**不同元素**（wrapper span 与内部 svg），各转 180° 叠加。思考过程块传的是不带自转 class 的裸 `ChevronDown`，二级工具行不经过 `AgentProcessSummary`，都只转一次，所以只有组头出问题。 ## 落地方案 - 删除 app 侧那条 `rotate(180deg)`，换向**唯一来源**留在共享 `AgentProcessSummary` 的 wrapper 规则； - 在原处补注释写明该约定，避免以后又叠一层； - DOM 结构、class 名、`is-direct-codex` 里 `.agent-tool-call-group-chevron` 的 grid 定位（`styles.css:12668-12672`）、折叠逻辑、`aria-expanded` / `hidden` 语义、计时与汇总文案都不动。 ```diff +/* 组头 chevron 只保留外层定位与过渡；**换向唯一来源**是共享 `AgentProcessSummary` 的 + `[aria-expanded='true'] > .agent-process-summary .agent-process-summary-chevron`。 + 这里若再写一条 `rotate(180deg)`，会与 wrapper 的旋转叠加成 360°，展开态看起来仍是朝下。 */ .agent-tool-call-group-chevron { flex: 0 0 auto; color: inherit; transition: transform 120ms ease; } - -.agent-tool-call-group-head[aria-expanded='true'] - .agent-tool-call-group-chevron { - transform: rotate(180deg); -} ``` ## 验证 - **真实 Chromium + Vite 挂载真实 `ToolCallGroup`**（worktree 内一次性夹具，验证后已删）：折叠态 wrapper/svg 均 `none`（朝下）→ 点击展开后 wrapper `matrix(-1,0,0,-1,0,0)`、svg `none`（朝上）；把删掉的旧规则作为 `<style>` 注回即复现原缺陷（svg 同时变 `matrix(-1, 0, 0, -1, 0, 0)`，展开仍朝下），确认这条规则就是唯一成因。 - `node scripts/check-encoding.mjs`：5231 个文件通过；`git diff --check` 干净。 - **未覆盖**：`apps/ai-game-creator-shell/tests/appSurface.test.ts` 是 jsdom 套件、不计算 CSS 级联，锁不住箭头方向；本 worktree 内该入口因 vite-node/mlly 路径解析报错无法 collect（主检出同一入口 195 passed / 9 skipped，用于确认基线）。本次改动只删了一条 CSS 声明，未触碰该套件覆盖的 DOM 契约。

suzmii self-assigned this 2026-10-04 17:42:09 +08:00

suzmii added 1 commit 2026-10-04 17:42:09 +08:00

修复：AGC 工具调用组折叠箭头展开时仍朝下

Project CI / AI game creator shell Rust crates (pull_request) Successful in 6m12s

Details

Project CI / AI game creator shell Rust lane 2/2 (pull_request) Successful in 7m10s

Details

Project CI / AI game creator shell Rust lane 1/2 (pull_request) Successful in 8m7s

Details

Project CI / Backend tests (pull_request) Successful in 9m2s

Details

Project CI / Frontend tests (pull_request) Successful in 2m54s

Details

Project CI / AI game creator shell web tests (pull_request) Successful in 2m55s

Details

Project CI / Native shell tests (pull_request) Successful in 6m57s

Details

Project CI / Repository checks (pull_request) Successful in 5m3s

Details

8ada23ea0e

- 删除 .agent-tool-call-group-head[aria-expanded='true'] .agent-tool-call-group-chevron 的 rotate(180deg)，消除与共享 AgentProcessSummary wrapper 叠加的 360° 旋转
- 在 .agent-tool-call-group-chevron 上方补注释，写明换向唯一来源在共享 wrapper，避免再次重复旋转

suzmii merged commit 65514328f3 into master

2026-10-04 18:25:08 +08:00

suzmii deleted branch fix/agc-tool-call-group-chevron

2026-10-04 18:25:08 +08:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: GenarrativeAI/Genarrative#619