From 6bcccec151c52881371925f075087dc787dc7e41 Mon Sep 17 00:00:00 2001 From: QAyong Date: Tue, 15 Sep 2026 20:05:25 +0800 Subject: [PATCH] fix(chat): flatten tool detail indentation --- apps/desktop/src/styles/messages.css | 6 ++++++ apps/desktop/test/transcript-style.test.mjs | 12 ++++++++++++ docs/spec/04-ux/08-component-spec.md | 5 ++++- docs/spec/06-delivery/04-e2e-test-plan.md | 19 +++++++++++-------- 4 files changed, 33 insertions(+), 9 deletions(-) diff --git a/apps/desktop/src/styles/messages.css b/apps/desktop/src/styles/messages.css index 1e5373c01e..d5ae5d5b43 100644 --- a/apps/desktop/src/styles/messages.css +++ b/apps/desktop/src/styles/messages.css @@ -2727,6 +2727,12 @@ color: var(--ds-text-secondary); } +/* Tool details stay in the tool row's level rather than adding a second inset. */ +.tool-row:not(.thinking):not(.subagent-topology-node) > .tool-row-body { + margin-left: 0; + padding-left: 0; +} + .disclosure-collapse-rail { position: absolute; inset-block: 0; diff --git a/apps/desktop/test/transcript-style.test.mjs b/apps/desktop/test/transcript-style.test.mjs index 0b2356b803..df374ec6a7 100644 --- a/apps/desktop/test/transcript-style.test.mjs +++ b/apps/desktop/test/transcript-style.test.mjs @@ -104,6 +104,18 @@ test("tool block bodies stay bounded and role-coded", () => { assert.doesNotMatch(permissionArgs, /white-space|font-family/); }); +test("tool details do not add a second visual indent", () => { + const toolDetailStyles = stylesSource.match( + /\.tool-row:not\(\.thinking\):not\(\.subagent-topology-node\) > \.tool-row-body \{([^}]*)\}/ + )?.[1]; + assert.ok(toolDetailStyles); + assert.match(toolDetailStyles, /margin-left:\s*0;/); + assert.match(toolDetailStyles, /padding-left:\s*0;/); + // Thinking and topology have separate visual hierarchies and keep their + // dedicated layout rules rather than inheriting the flat tool detail rule. + assert.match(stylesSource, /\.subagent-topology-node > \.tool-row-body,[\s\S]*?margin-left:\s*38px;/); +}); + test("assistant turns stay transparent full-width prose", () => { assert.match( stylesSource, diff --git a/docs/spec/04-ux/08-component-spec.md b/docs/spec/04-ux/08-component-spec.md index 55db6184be..0a05486a2f 100644 --- a/docs/spec/04-ux/08-component-spec.md +++ b/docs/spec/04-ux/08-component-spec.md @@ -1948,7 +1948,10 @@ twice. - Outer row: transparent, borderless, shadowless, approximately 24px high - Icon: 15–16px; disclosure chevron: 12px -- Header gap: 4px; expanded body inset: 24px +- Header gap: 4px; expanded tool-call details align with the row's own content + start and do not add a second horizontal inset. The collapse rail remains + available beside the expanded body. Thinking disclosures and subagent + topology nodes retain their dedicated hierarchy insets. - Chips: monospace `--text-2xs`, `--ds-tile-deep` fill (no border, D297), error hue for exit codes - Code, file list, match list and field blocks: `font-mono text-sm`, independently copyable, capped at 260px with internal scrolling diff --git a/docs/spec/06-delivery/04-e2e-test-plan.md b/docs/spec/06-delivery/04-e2e-test-plan.md index 1f1585e27c..303f901b83 100644 --- a/docs/spec/06-delivery/04-e2e-test-plan.md +++ b/docs/spec/06-delivery/04-e2e-test-plan.md @@ -2195,14 +2195,17 @@ identify the platform validation still needed. The header shows its localized processing label, elapsed time, and step count without an additional status capsule. When the turn settles, the automatic thinking disclosure closes, while a group or row touched by the user keeps - its chosen state. Expanded calls use transparent semantic activity rows with - an action icon, natural-language verb, monospace primary argument, and quiet - disclosure. The processing group uses the full assistant-column width, so a - short label or payload does not shrink expanded details into a content-sized - chip. Each expanded-content vertical rule is a pointer and keyboard-focusable - collapse control for its owning disclosure. Nested expansion shows output - before raw input in clamped scroll regions. Live partial output updates in - place. Reloaded rows preserve the tool name, arguments, result, and status. + its chosen state. A user-expanded tool call keeps its detail heading and + content aligned with the tool row rather than introducing another horizontal + indent; the collapse rail remains usable beside the body. Expanded calls use + transparent semantic activity rows with an action icon, natural-language verb, + monospace primary argument, and quiet disclosure. The processing group uses + the full assistant-column width, so a short label or payload does not shrink + expanded details into a content-sized chip. Each expanded-content vertical rule + is a pointer and keyboard-focusable collapse control for its owning disclosure. + Nested expansion shows output before raw input in clamped scroll regions. Live + partial output updates in place. Reloaded rows preserve the tool name, + arguments, result, and status. - **Specs linked**: `04-ux/01-ui-ia.md`, `04-ux/07-ui-design-system.md`, `04-ux/08-component-spec.md`, `04-ux/09-interaction-patterns.md`