From 2cde58b42fc2879a600033453a9483739e86d840 Mon Sep 17 00:00:00 2001
From: Miguel Palhas <mpalhas@gmail.com>
Date: Mon, 7 Sep 2026 10:41:55 +0100
Subject: [PATCH] fix(web): compact tool-call groups in structured view

Drop the per-tool name list from group headers (redundant with the rows
below), remove individual borders inside groups, and tighten padding so
20-tool blocks scan as a dense list instead of a wall of cards.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/structuredRender.ts |  9 +--------
 web/src/styles.css          | 28 +++++++++++++++-------------
 2 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/web/src/structuredRender.ts b/web/src/structuredRender.ts
index 33dad16..65c6601 100644
--- a/web/src/structuredRender.ts
+++ b/web/src/structuredRender.ts
@@ -594,14 +594,7 @@ export function buildToolGroup(
   glyph.setAttribute("aria-hidden", "true");
   const title = el("span", "st-tool-group-title");
   title.textContent = `${rows.length} tool calls`;
-  const names = el("span", "st-tool-group-names");
-  names.textContent = rows
-    .map((row) => {
-      const tool = (row.data ?? {}) as AcpToolCallLike;
-      return splitToolTitle(tool.title, tool.name, tool.kind).label;
-    })
-    .join(" · ");
-  head.append(glyph, title, names);
+  head.append(glyph, title);
 
   const body = el("div", "st-tool-group-body st-disclosure");
   const bodyClip = el("div", "st-disclosure-clip");
diff --git a/web/src/styles.css b/web/src/styles.css
index 8eb6be4..381c460 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -2828,12 +2828,12 @@ input.leaf-rename:focus {
   border: 1px solid var(--border);
   border-radius: var(--r-2);
   background: color-mix(in oklab, var(--surface-2) 55%, transparent);
-  padding: var(--sp-2) var(--sp-3);
+  padding: var(--sp-1) var(--sp-2);
   transition: background var(--dur-fast) var(--ease-out);
 }
 
 .st-tool-group:hover {
-  background: var(--surface-2);
+  background: color-mix(in oklab, var(--surface-2) 70%, transparent);
 }
 
 .st-tool-group-head {
@@ -2870,15 +2870,6 @@ input.leaf-rename:focus {
   font-weight: 500;
 }
 
-.st-tool-group-names {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--muted);
-  text-align: left;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .st-tool-group-body {
   padding-top: 0;
 }
@@ -2886,11 +2877,22 @@ input.leaf-rename:focus {
 .st-tool-group-body .st-disclosure-inner {
   display: flex;
   flex-direction: column;
-  padding-top: var(--sp-2);
+  padding-top: var(--sp-1);
 }
 
 .st-tool-group-body .st-disclosure-inner > .st-row-tool {
-  padding: var(--sp-1) 0;
+  padding: 0;
+}
+
+/* inside a group, tool cards lose their border and background —
+   the group container already provides the visual boundary. */
+.st-tool-group-body .st-tool {
+  border: 0;
+}
+
+.st-tool-group-body .st-tool-head {
+  padding: var(--sp-1) var(--sp-2);
+  border-radius: var(--r-1);
 }
 
 .st-tool-group-body[hidden] {