From 89e842d077cc40f346df49ac8b22133f310e8be5 Mon Sep 17 00:00:00 2001
From: Suzumiya <suzmii@qq.com>
Date: Tue, 15 Sep 2026 17:44:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E5=85=B7=E8=B0=83=E7=94=A8=E6=8A=98?=
 =?UTF-8?q?=E5=8F=A0=E5=9D=97=E6=A0=B7=E5=BC=8F=EF=BC=9A=E6=95=B4=E8=A1=8C?=
 =?UTF-8?q?=E6=B5=85=E5=BA=95=E5=9D=97=E5=A4=B4=20+=20=E5=8F=B3=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=E8=80=97=E6=97=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- styles.css 工具调用区块重写：块头做成一整行浅底圆角条目（图标 / 汇总 / 结束时间 / 总用时 / 折角），只用现有 --platform-* 变量
- 展开态每行一条：行内不换行、超长命令 text-overflow: ellipsis，耗时 margin-left: auto 右对齐、tabular-nums 对齐数字
- 行二级明细改用 agent-tool-call-row-command / -output / -changes 样式，命令与输出沿用中性底 + 细边框
- 补 [hidden] 显式 display: none，避免折叠态被 display: grid 顶掉后仍占位
- 展开箭头只做 rotate 过渡，不引入布局跳动；failed 行用 --platform-button-danger-text
- 删除旧 agent-tool-call-* 卡片样式；输入盒 / 面板留白 / 顶栏相关规则未动
---
 apps/ai-game-creator-shell/src/styles.css | 187 ++++++++++++++++------
 1 file changed, 139 insertions(+), 48 deletions(-)

diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css
index 57b125c85..13cc06f9b 100644
--- a/apps/ai-game-creator-shell/src/styles.css
+++ b/apps/ai-game-creator-shell/src/styles.css
@@ -11293,59 +11293,64 @@ button.design-workspace-tree__entry:hover,
 }
 
 /* ============================================================
-   工具调用卡片（2026-09）：Codex 风格可折叠卡片
+   工具调用折叠块（2026-09）：一回合一个块，Codex 风格
    ============================================================
    契约见 `docs/technical/【技术方案】GameAgent对话工具调用卡片-2026-09-14.md`：
-   折叠态一行摘要（图标 / 标题 / 摘要 / 状态点 / 状态 / 折角），展开态看命令、文件明细与输出。
+   块头一行浅底圆角条目（图标 / 汇总 / 结束时间 / 总用时 / 折角），展开态每行一条工具，
+   行右侧是对齐的耗时，行可二级展开看命令、文件明细与输出。
    折叠由 `<button aria-expanded>` + `hidden` 控制（不改消息气泡与列表滚动模型），
    配色只用现有 `--platform-*` 变量。 */
 
-/* 卡片不进气泡：它是消息流里跟在 assistant 消息之后的一个块，左右与消息对齐。 */
+/* 块不进气泡：它是消息流里插在该回合 assistant 消息之前的一个块，左右与消息对齐。 */
 .game-workbench-chat
   .project-supervisor-surface.is-direct-codex
   .project-supervisor-message-list
-  > .agent-tool-call {
+  > .agent-tool-call-group {
   display: grid;
   width: 100%;
   min-width: 0;
-  margin-top: -4px;
+  margin-top: 10px;
+  margin-bottom: 2px;
 }
 
-.agent-tool-call {
+.agent-tool-call-group {
   display: grid;
   width: 100%;
   min-width: 0;
   margin-top: 10px;
   overflow: hidden;
-  border: 1px solid var(--platform-surface-border);
   border-radius: 12px;
   background: var(--platform-button-secondary-fill);
   color: var(--platform-text-base);
 }
 
-.agent-tool-call-head {
+/* 块头：点整行展开，浅底条目本身是块头。 */
+.agent-tool-call-group-head {
   display: flex;
   align-items: center;
   gap: 8px;
   width: 100%;
   min-width: 0;
-  padding: 8px 10px;
+  min-height: 32px;
+  padding: 6px 10px;
   border: 0;
+  border-radius: 12px;
   background: transparent;
   color: inherit;
   font: inherit;
   text-align: left;
   cursor: pointer;
+  transition: background-color 120ms ease;
 }
 
-.agent-tool-call-head:hover,
-.agent-tool-call-head:focus-visible {
+.agent-tool-call-group-head:hover,
+.agent-tool-call-group-head:focus-visible {
   background: var(--platform-button-ghost-fill);
   color: var(--platform-text-strong);
   outline: none;
 }
 
-.agent-tool-call-icon {
+.agent-tool-call-group-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -11353,68 +11358,139 @@ button.design-workspace-tree__entry:hover,
   color: var(--platform-text-soft);
 }
 
-.agent-tool-call-title {
-  flex: 0 0 auto;
-  color: var(--platform-text-strong);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-/* 摘要压在标题后面：窄面板下靠 ellipsis 收窄，不换行、不把状态挤出可视区。 */
-.agent-tool-call-summary {
+/* 汇总压在图标后面：窄面板下靠 ellipsis 收窄，不换行、不把时间与用时挤出可视区。 */
+.agent-tool-call-group-summary {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
-  color: var(--platform-text-soft);
+  color: var(--platform-text-strong);
   font-size: 12px;
+  font-weight: 600;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.agent-tool-call-status {
+.agent-tool-call-group-time,
+.agent-tool-call-group-duration {
   flex: 0 0 auto;
   color: var(--platform-text-soft);
   font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 }
 
-.agent-tool-call-running-dot {
-  width: 6px;
-  height: 6px;
-  flex: 0 0 6px;
-  border-radius: 50%;
-  background: var(--platform-accent);
-}
-
-.agent-tool-call-chevron {
+.agent-tool-call-group-chevron {
   flex: 0 0 auto;
   color: var(--platform-text-soft);
   transition: transform 120ms ease;
 }
 
-.agent-tool-call-head[aria-expanded='true'] .agent-tool-call-chevron {
+.agent-tool-call-group-head[aria-expanded='true']
+  .agent-tool-call-group-chevron {
   transform: rotate(180deg);
 }
 
-/* `failed` 用错误色语义变量：标题、状态文案与图标一起变，不新增色值。 */
-.agent-tool-call[data-status='failed'] .agent-tool-call-title,
-.agent-tool-call[data-status='failed'] .agent-tool-call-status,
-.agent-tool-call[data-status='failed'] .agent-tool-call-icon {
-  color: var(--platform-button-danger-text);
+/* `hidden` 必须压过下面的 `display: grid`，否则折叠态只是内容不可见却仍占位。 */
+.agent-tool-call-group-body[hidden],
+.agent-tool-call-row-detail[hidden] {
+  display: none;
 }
 
-.agent-tool-call[data-status='failed'] {
-  border-color: var(--platform-button-danger-border);
-  background: var(--platform-button-danger-fill);
+.agent-tool-call-group-body {
+  display: grid;
+  gap: 2px;
+  padding: 0 6px 8px;
 }
 
-.agent-tool-call-body {
+.agent-tool-call-group-rows {
+  display: grid;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.agent-tool-call-group-row {
+  min-width: 0;
+}
+
+/* 一行一条工具：单行不换行，超长命令靠 ellipsis 收窄，耗时右对齐。 */
+.agent-tool-call-row-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  padding: 4px 8px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+  line-height: 1.45;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.agent-tool-call-row-head:hover,
+.agent-tool-call-row-head:focus-visible {
+  background: var(--platform-button-ghost-fill);
+  color: var(--platform-text-strong);
+  outline: none;
+}
+
+.agent-tool-call-row-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  color: var(--platform-text-soft);
+}
+
+.agent-tool-call-row-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-tool-call-row-status {
+  flex: 0 0 auto;
+  color: var(--platform-text-soft);
+  font-size: 11px;
+}
+
+/* 耗时贴右边缘：`margin-left: auto` 把「执行中 / 失败」与耗时分开，窄面板下也不会互相挤压。 */
+.agent-tool-call-row-duration {
+  flex: 0 0 auto;
+  margin-left: auto;
+  color: var(--platform-text-soft);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.agent-tool-call-row-chevron {
+  flex: 0 0 auto;
+  color: var(--platform-text-soft);
+  transition: transform 120ms ease;
+}
+
+.agent-tool-call-row-head[aria-expanded='true'] .agent-tool-call-row-chevron {
+  transform: rotate(180deg);
+}
+
+.agent-tool-call-row-detail {
   display: grid;
   gap: 8px;
-  padding: 0 10px 10px;
+  padding: 6px 8px 8px;
 }
 
-.agent-tool-call-command,
-.agent-tool-call-output {
+.agent-tool-call-row-command,
+.agent-tool-call-row-output {
   margin: 0;
   max-height: 220px;
   padding: 8px 9px;
@@ -11429,7 +11505,7 @@ button.design-workspace-tree__entry:hover,
   overflow-wrap: anywhere;
 }
 
-.agent-tool-call-changes {
+.agent-tool-call-row-changes {
   display: grid;
   gap: 4px;
   margin: 0;
@@ -11437,7 +11513,7 @@ button.design-workspace-tree__entry:hover,
   list-style: none;
 }
 
-.agent-tool-call-changes li {
+.agent-tool-call-row-changes li {
   display: flex;
   align-items: baseline;
   gap: 6px;
@@ -11447,12 +11523,27 @@ button.design-workspace-tree__entry:hover,
   overflow-wrap: anywhere;
 }
 
-.agent-tool-call-changes li small {
+.agent-tool-call-row-changes li small {
   flex: 0 0 auto;
   color: var(--platform-text-soft);
   font-size: 10px;
 }
 
+.agent-tool-call-group-foot {
+  margin: 0;
+  padding: 0 8px 2px;
+  color: var(--platform-text-soft);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* `failed` 行用错误色语义变量：行文案、状态与图标一起变，不新增色值。 */
+.agent-tool-call-group-row[data-status='failed'] .agent-tool-call-row-text,
+.agent-tool-call-group-row[data-status='failed'] .agent-tool-call-row-status,
+.agent-tool-call-group-row[data-status='failed'] .agent-tool-call-row-icon {
+  color: var(--platform-button-danger-text);
+}
+
 /* ============================================================
    右侧对话面板：输入盒内文字与控件的对齐（2026-09）
    ============================================================