From 302b4d11d79c6c4adc68f4f0be7b15f3e821b751 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Tue, 12 May 2026 20:30:08 -0700
Subject: [PATCH] fix(chat): minimal tool-call styling + breathing room before
 downstream content

Tool calls are an advanced-user signal that competes with the actual
rendered content (A2UI surfaces, markdown) inside assistant messages.
Reduce their visual weight and add space below the group:

- Dim and shrink the tool name (muted color, 13px, weight 400)
- Replace saturated green/red status pill color with monochrome muted
  text regardless of status; trim pill font to 10px and icon to 10px
- Add 2px left padding on the name so it breathes from the trace chevron
- chat-tool-calls host now contributes 20px bottom margin so downstream
  content (e.g. rendered surface, markdown) gets clear separation; the
  inter-group spacing inside tightens to 4px since the host carries the
  breathing room
---
 .../chat-tool-call-card.component.ts          | 20 +++++++++++--------
 .../chat-tool-calls.component.spec.ts         | 14 +++++++++++++
 .../chat-tool-calls.component.ts              |  4 ++--
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/libs/chat/src/lib/compositions/chat-tool-call-card/chat-tool-call-card.component.ts b/libs/chat/src/lib/compositions/chat-tool-call-card/chat-tool-call-card.component.ts
index af1e9425..50207a19 100644
--- a/libs/chat/src/lib/compositions/chat-tool-call-card/chat-tool-call-card.component.ts
+++ b/libs/chat/src/lib/compositions/chat-tool-call-card/chat-tool-call-card.component.ts
@@ -21,23 +21,27 @@ export interface ToolCallInfo {
   changeDetection: ChangeDetectionStrategy.OnPush,
   styles: [CHAT_HOST_TOKENS, `
     :host { display: block; }
-    .tcc__name { font-family: var(--ngaf-chat-font-mono); color: var(--ngaf-chat-text); }
+    .tcc__name {
+      font-family: var(--ngaf-chat-font-mono);
+      font-size: var(--ngaf-chat-font-size-sm, 13px);
+      color: var(--ngaf-chat-text-muted);
+      font-weight: 400;
+      padding-left: 2px;
+    }
     .tcc__pill {
       display: inline-flex;
       align-items: center;
-      gap: 4px;
-      padding: 1px 7px;
+      gap: 3px;
+      padding: 1px 6px;
       border-radius: 9999px;
       background: var(--ngaf-chat-surface-alt);
       color: var(--ngaf-chat-text-muted);
-      font-size: 11px;
-      font-weight: 600;
+      font-size: 10px;
+      font-weight: 500;
       margin-left: 6px;
       line-height: 1.4;
     }
-    .tcc__pill[data-status="complete"] { color: var(--ngaf-chat-success); }
-    .tcc__pill[data-status="error"]    { color: var(--ngaf-chat-error-text); }
-    .tcc__pill svg { width: 11px; height: 11px; }
+    .tcc__pill svg { width: 10px; height: 10px; }
     .tcc__pill[data-status="running"] svg { animation: tcc-spin 0.8s linear infinite; }
     @keyframes tcc-spin { to { transform: rotate(360deg); } }
     .tcc__section { padding: 8px 0; }
diff --git a/libs/chat/src/lib/primitives/chat-tool-calls/chat-tool-calls.component.spec.ts b/libs/chat/src/lib/primitives/chat-tool-calls/chat-tool-calls.component.spec.ts
index dc392200..470f6923 100644
--- a/libs/chat/src/lib/primitives/chat-tool-calls/chat-tool-calls.component.spec.ts
+++ b/libs/chat/src/lib/primitives/chat-tool-calls/chat-tool-calls.component.spec.ts
@@ -312,3 +312,17 @@ describe('ChatToolCallsComponent — excludeToolNames filter', () => {
     expect(text).not.toContain('research');
   });
 });
+
+describe('ChatToolCallsComponent — breathing room before downstream content', () => {
+  it('host has bottom margin >= 16px so the next sibling gets clear separation', () => {
+    TestBed.configureTestingModule({ imports: [FilterHost] });
+    const fx = TestBed.createComponent(FilterHost);
+    fx.detectChanges();
+    const host = fx.nativeElement.querySelector('chat-tool-calls') as HTMLElement;
+    document.body.appendChild(host);
+    const computed = getComputedStyle(host);
+    const marginBottom = parseFloat(computed.marginBottom || '0');
+    expect(marginBottom).toBeGreaterThanOrEqual(16);
+    document.body.removeChild(host);
+  });
+});
diff --git a/libs/chat/src/lib/primitives/chat-tool-calls/chat-tool-calls.component.ts b/libs/chat/src/lib/primitives/chat-tool-calls/chat-tool-calls.component.ts
index 03613520..87fdc548 100644
--- a/libs/chat/src/lib/primitives/chat-tool-calls/chat-tool-calls.component.ts
+++ b/libs/chat/src/lib/primitives/chat-tool-calls/chat-tool-calls.component.ts
@@ -22,11 +22,11 @@ interface Group {
   imports: [NgTemplateOutlet, ChatToolCallCardComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   styles: [`
-    :host { display: block; }
+    :host { display: block; margin-bottom: 20px; }
     .ctc__group {
       border: 1px solid var(--ngaf-chat-separator);
       border-radius: var(--ngaf-chat-radius-card);
-      margin: 0 0 8px;
+      margin: 0 0 4px;
     }
     .ctc__group-header {
       display: flex;