diff --git a/apps/website/content/docs/chat/api/api-docs.json b/apps/website/content/docs/chat/api/api-docs.json
index 115c207bd..ea318860c 100644
--- a/apps/website/content/docs/chat/api/api-docs.json
+++ b/apps/website/content/docs/chat/api/api-docs.json
@@ -5873,6 +5873,12 @@
         "type": "string",
         "description": "Present when role === 'tool'.",
         "optional": true
+      },
+      {
+        "name": "toolCallIds",
+        "type": "string[]",
+        "description": "IDs of tool calls emitted BY this assistant message. Populated by\nadapters from provider-native fields (LangGraph: `tool_calls[].id`;\nAnthropic: `tool_use` content blocks). Used by `<chat-tool-calls>` to\nscope its rendering to a single message — otherwise it falls back to\nthe agent's global toolCalls list, which renders duplicates across\nevery AI message in a thread.",
+        "optional": true
       }
     ],
     "examples": []
diff --git a/cockpit/chat/generative-ui/angular/src/app/views/bar-chart.component.ts b/cockpit/chat/generative-ui/angular/src/app/views/bar-chart.component.ts
index cd7e155ed..56f315ce8 100644
--- a/cockpit/chat/generative-ui/angular/src/app/views/bar-chart.component.ts
+++ b/cockpit/chat/generative-ui/angular/src/app/views/bar-chart.component.ts
@@ -5,25 +5,94 @@ import { Component, computed, input } from '@angular/core';
   selector: 'app-bar-chart',
   standalone: true,
   template: `
-    <div class="rounded-lg border border-white/10 bg-white/5 p-4 backdrop-blur-sm">
-      <div class="text-sm font-medium text-white/60 mb-3">{{ title() }}</div>
+    <div class="chart-card">
+      <div class="chart-card__title">{{ title() }}</div>
       @if (isSkeleton()) {
         <div class="skeleton skeleton-chart"></div>
       } @else {
-        <svg [attr.viewBox]="'0 0 ' + width + ' ' + height" class="w-full" preserveAspectRatio="xMidYMid meet">
+        <svg
+          [attr.viewBox]="'0 0 ' + width + ' ' + height"
+          class="chart-card__svg"
+          preserveAspectRatio="xMidYMid meet"
+          role="img"
+          [attr.aria-label]="title()"
+        >
+          <!-- Baseline -->
+          <line
+            [attr.x1]="padding.left"
+            [attr.x2]="width - padding.right"
+            [attr.y1]="height - padding.bottom"
+            [attr.y2]="height - padding.bottom"
+            stroke="rgba(255,255,255,0.08)"
+            stroke-width="1"
+          />
           @for (bar of bars(); track $index) {
-            <!-- Bar -->
-            <rect class="bar" [attr.x]="bar.x" [attr.y]="bar.y" [attr.width]="bar.w" [attr.height]="bar.h" fill="#d4aa6a" rx="2" />
-            <!-- Value above bar -->
-            <text [attr.x]="bar.x + bar.w / 2" [attr.y]="bar.y - 6" text-anchor="middle" fill="rgba(255,255,255,0.5)" font-size="10">{{ bar.value }}</text>
-            <!-- Label below bar -->
-            <text [attr.x]="bar.x + bar.w / 2" [attr.y]="height - 4" text-anchor="middle" fill="rgba(255,255,255,0.3)" font-size="10">{{ bar.label }}</text>
+            <rect
+              class="bar"
+              [attr.x]="bar.x"
+              [attr.y]="bar.y"
+              [attr.width]="bar.w"
+              [attr.height]="bar.h"
+              [attr.rx]="3"
+              fill="url(#bar-gradient)"
+            />
+            <text
+              [attr.x]="bar.x + bar.w / 2"
+              [attr.y]="bar.y - 6"
+              text-anchor="middle"
+              fill="rgba(255,255,255,0.7)"
+              font-size="11"
+              font-weight="500"
+            >{{ bar.value }}</text>
+            <text
+              [attr.x]="bar.x + bar.w / 2"
+              [attr.y]="height - padding.bottom + 16"
+              text-anchor="middle"
+              fill="rgba(255,255,255,0.5)"
+              font-size="11"
+            >{{ bar.label }}</text>
           }
+          <defs>
+            <linearGradient id="bar-gradient" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stop-color="#e0b87a" stop-opacity="1"/>
+              <stop offset="100%" stop-color="#d4aa6a" stop-opacity="0.75"/>
+            </linearGradient>
+          </defs>
         </svg>
       }
     </div>
   `,
   styleUrls: ['./skeleton.css'],
+  styles: [`
+    .chart-card {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 16px 18px;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 10px;
+      background: rgba(255, 255, 255, 0.03);
+      backdrop-filter: blur(4px);
+    }
+    .chart-card__title {
+      font-size: 13px;
+      font-weight: 600;
+      color: rgba(255, 255, 255, 0.65);
+      letter-spacing: 0.01em;
+    }
+    .chart-card__svg {
+      width: 100%;
+      height: auto;
+      max-height: 280px;
+      display: block;
+    }
+    .bar {
+      transition: opacity 120ms ease;
+    }
+    .bar:hover {
+      opacity: 0.85;
+    }
+  `],
 })
 export class BarChartComponent {
   readonly title = input<string>('');
@@ -32,8 +101,8 @@ export class BarChartComponent {
   readonly valueKey = input<string>('');
 
   readonly width = 400;
-  readonly height = 200;
-  readonly padding = { top: 30, right: 20, bottom: 30, left: 20 };
+  readonly height = 220;
+  readonly padding = { top: 28, right: 16, bottom: 28, left: 16 };
 
   readonly isSkeleton = computed(() => this.data() == null);
 
@@ -46,7 +115,7 @@ export class BarChartComponent {
     const maxVal = Math.max(...values) || 1;
     const plotW = this.width - this.padding.left - this.padding.right;
     const plotH = this.height - this.padding.top - this.padding.bottom;
-    const gap = 8;
+    const gap = 12;
     const barW = (plotW - gap * (d.length - 1)) / d.length;
 
     return d.map((item, i) => {
diff --git a/cockpit/chat/generative-ui/angular/src/app/views/container.component.spec.ts b/cockpit/chat/generative-ui/angular/src/app/views/container.component.spec.ts
index 9f7029a84..f12f7a565 100644
--- a/cockpit/chat/generative-ui/angular/src/app/views/container.component.spec.ts
+++ b/cockpit/chat/generative-ui/angular/src/app/views/container.component.spec.ts
@@ -37,21 +37,19 @@ describe('ContainerComponent', () => {
     fixture = TestBed.createComponent(ContainerComponent);
   });
 
-  it('applies column flex classes by default', () => {
+  it('sets column direction attribute by default', () => {
     fixture.componentRef.setInput('spec', emptySpec);
     fixture.detectChanges();
-    const wrapper = fixture.nativeElement.querySelector('div');
-    expect(wrapper?.className).toContain('flex-col');
-    expect(wrapper?.className).not.toContain('flex-row');
+    const wrapper = fixture.nativeElement.querySelector('div.container');
+    expect(wrapper?.getAttribute('data-direction')).toBe('column');
   });
 
-  it('applies row flex classes when direction is "row"', () => {
+  it('sets row direction attribute when direction is "row"', () => {
     fixture.componentRef.setInput('spec', emptySpec);
     fixture.componentRef.setInput('direction', 'row');
     fixture.detectChanges();
-    const wrapper = fixture.nativeElement.querySelector('div');
-    expect(wrapper?.className).toContain('flex-row');
-    expect(wrapper?.className).not.toContain('flex-col');
+    const wrapper = fixture.nativeElement.querySelector('div.container');
+    expect(wrapper?.getAttribute('data-direction')).toBe('row');
   });
 
   it('renders one render-element per childKey', () => {
diff --git a/cockpit/chat/generative-ui/angular/src/app/views/container.component.ts b/cockpit/chat/generative-ui/angular/src/app/views/container.component.ts
index 2065775ea..8dc91a7e3 100644
--- a/cockpit/chat/generative-ui/angular/src/app/views/container.component.ts
+++ b/cockpit/chat/generative-ui/angular/src/app/views/container.component.ts
@@ -8,21 +8,41 @@ import { RenderElementComponent } from '@ngaf/render';
   standalone: true,
   imports: [RenderElementComponent],
   template: `
-    <div [class]="layoutClass()">
+    <div class="container" [attr.data-direction]="direction()" [style.--container-cols]="rowChildCount()">
       @for (key of childKeys(); track key) {
         <render-element [elementKey]="key" [spec]="spec()" />
       }
     </div>
   `,
+  styles: [`
+    .container {
+      display: grid;
+      gap: 12px;
+      min-width: 0;
+    }
+    .container[data-direction="column"] {
+      grid-template-columns: 1fr;
+    }
+    .container[data-direction="row"] {
+      grid-template-columns: repeat(var(--container-cols, 1), minmax(0, 1fr));
+    }
+    /* Responsive collapse: at narrow widths, row containers stack to single column */
+    @media (max-width: 720px) {
+      .container[data-direction="row"] {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
+    @media (max-width: 480px) {
+      .container[data-direction="row"] {
+        grid-template-columns: 1fr;
+      }
+    }
+  `],
 })
 export class ContainerComponent {
   readonly childKeys = input<string[]>([]);
   readonly spec = input.required<Spec>();
   readonly direction = input<'row' | 'column'>('column');
 
-  readonly layoutClass = computed(() =>
-    this.direction() === 'row'
-      ? 'flex flex-row flex-wrap gap-3'
-      : 'flex flex-col gap-3'
-  );
+  readonly rowChildCount = computed(() => Math.max(1, this.childKeys().length));
 }
diff --git a/cockpit/chat/generative-ui/angular/src/app/views/dashboard-grid.component.spec.ts b/cockpit/chat/generative-ui/angular/src/app/views/dashboard-grid.component.spec.ts
index 5556b16b8..5aa26daed 100644
--- a/cockpit/chat/generative-ui/angular/src/app/views/dashboard-grid.component.spec.ts
+++ b/cockpit/chat/generative-ui/angular/src/app/views/dashboard-grid.component.spec.ts
@@ -34,12 +34,11 @@ describe('DashboardGridComponent', () => {
     fixture = TestBed.createComponent(DashboardGridComponent);
   });
 
-  it('applies vertical flex layout with section spacing', () => {
+  it('applies the dashboard-grid layout class', () => {
     fixture.componentRef.setInput('spec', emptySpec);
     fixture.detectChanges();
-    const wrapper = fixture.nativeElement.querySelector('div');
-    expect(wrapper?.className).toContain('flex-col');
-    expect(wrapper?.className).toContain('gap-6');
+    const wrapper = fixture.nativeElement.querySelector('div.dashboard-grid');
+    expect(wrapper).toBeTruthy();
   });
 
   it('renders one render-element per childKey', () => {
diff --git a/cockpit/chat/generative-ui/angular/src/app/views/dashboard-grid.component.ts b/cockpit/chat/generative-ui/angular/src/app/views/dashboard-grid.component.ts
index 81a14ef97..eb2b8d942 100644
--- a/cockpit/chat/generative-ui/angular/src/app/views/dashboard-grid.component.ts
+++ b/cockpit/chat/generative-ui/angular/src/app/views/dashboard-grid.component.ts
@@ -8,12 +8,22 @@ import { RenderElementComponent } from '@ngaf/render';
   standalone: true,
   imports: [RenderElementComponent],
   template: `
-    <div class="flex flex-col gap-6 p-4">
+    <div class="dashboard-grid">
       @for (key of childKeys(); track key) {
         <render-element [elementKey]="key" [spec]="spec()" />
       }
     </div>
   `,
+  styles: [`
+    .dashboard-grid {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      padding: 4px 0;
+      width: 100%;
+      min-width: 0;
+    }
+  `],
 })
 export class DashboardGridComponent {
   readonly childKeys = input<string[]>([]);
diff --git a/cockpit/chat/generative-ui/angular/src/app/views/data-grid.component.ts b/cockpit/chat/generative-ui/angular/src/app/views/data-grid.component.ts
index 56d3d1a8e..0ec2b71d3 100644
--- a/cockpit/chat/generative-ui/angular/src/app/views/data-grid.component.ts
+++ b/cockpit/chat/generative-ui/angular/src/app/views/data-grid.component.ts
@@ -5,35 +5,88 @@ import { Component, computed, input } from '@angular/core';
   selector: 'app-data-grid',
   standalone: true,
   template: `
-    <div class="rounded-lg border border-white/10 bg-white/5 p-4 backdrop-blur-sm">
-      <div class="text-sm font-medium text-white/60 mb-3">{{ title() }}</div>
+    <div class="data-grid">
+      <div class="data-grid__title">{{ title() }}</div>
       @if (isSkeleton()) {
         @for (i of skeletonRows; track i) {
           <div class="skeleton skeleton-row"></div>
         }
       } @else {
-        <table class="w-full text-sm">
-          <thead>
-            <tr class="border-b border-white/10">
-              @for (col of formattedColumns(); track col.key) {
-                <th class="text-left text-xs font-medium uppercase tracking-wider text-white/40 py-2 px-2">{{ col.label }}</th>
-              }
-            </tr>
-          </thead>
-          <tbody>
-            @for (row of rows(); track $index) {
-              <tr class="border-b border-white/5" [class.bg-white/5]="$index % 2 === 1">
+        <div class="data-grid__scroll">
+          <table class="data-grid__table">
+            <thead>
+              <tr>
                 @for (col of formattedColumns(); track col.key) {
-                  <td class="py-2 px-2 text-white/80">{{ row[col.key] }}</td>
+                  <th>{{ col.label }}</th>
                 }
               </tr>
-            }
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              @for (row of rows(); track $index) {
+                <tr>
+                  @for (col of formattedColumns(); track col.key) {
+                    <td>{{ row[col.key] }}</td>
+                  }
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
       }
     </div>
   `,
   styleUrls: ['./skeleton.css'],
+  styles: [`
+    .data-grid {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 16px 18px;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 10px;
+      background: rgba(255, 255, 255, 0.03);
+      backdrop-filter: blur(4px);
+    }
+    .data-grid__title {
+      font-size: 13px;
+      font-weight: 600;
+      color: rgba(255, 255, 255, 0.65);
+      letter-spacing: 0.01em;
+    }
+    .data-grid__scroll {
+      overflow-x: auto;
+      margin: 0 -4px;
+    }
+    .data-grid__table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 13px;
+      font-variant-numeric: tabular-nums;
+    }
+    .data-grid__table th {
+      text-align: left;
+      padding: 8px 10px;
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      color: rgba(255, 255, 255, 0.45);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      white-space: nowrap;
+    }
+    .data-grid__table td {
+      padding: 10px;
+      color: rgba(255, 255, 255, 0.85);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+      white-space: nowrap;
+    }
+    .data-grid__table tbody tr:nth-child(even) td {
+      background: rgba(255, 255, 255, 0.02);
+    }
+    .data-grid__table tbody tr:last-child td {
+      border-bottom: none;
+    }
+  `],
 })
 export class DataGridComponent {
   readonly title = input<string>('');
diff --git a/cockpit/chat/generative-ui/angular/src/app/views/line-chart.component.ts b/cockpit/chat/generative-ui/angular/src/app/views/line-chart.component.ts
index 19edcdaca..249144ec2 100644
--- a/cockpit/chat/generative-ui/angular/src/app/views/line-chart.component.ts
+++ b/cockpit/chat/generative-ui/angular/src/app/views/line-chart.component.ts
@@ -5,32 +5,100 @@ import { Component, computed, input } from '@angular/core';
   selector: 'app-line-chart',
   standalone: true,
   template: `
-    <div class="rounded-lg border border-white/10 bg-white/5 p-4 backdrop-blur-sm">
-      <div class="text-sm font-medium text-white/60 mb-3">{{ title() }}</div>
+    <div class="chart-card">
+      <div class="chart-card__title">{{ title() }}</div>
       @if (isSkeleton()) {
         <div class="skeleton skeleton-chart"></div>
       } @else {
-        <svg [attr.viewBox]="'0 0 ' + width + ' ' + height" class="w-full" preserveAspectRatio="xMidYMid meet">
-          <!-- Grid lines -->
+        <svg
+          [attr.viewBox]="'0 0 ' + width + ' ' + height"
+          class="chart-card__svg"
+          preserveAspectRatio="xMidYMid meet"
+          role="img"
+          [attr.aria-label]="title()"
+        >
+          <!-- Gridlines -->
           @for (y of yGridLines(); track y.value) {
-            <line [attr.x1]="padding.left" [attr.y1]="y.y" [attr.x2]="width - padding.right" [attr.y2]="y.y" stroke="rgba(255,255,255,0.06)" />
-            <text [attr.x]="padding.left - 6" [attr.y]="y.y + 4" text-anchor="end" fill="rgba(255,255,255,0.3)" font-size="10">{{ y.label }}</text>
+            <line
+              [attr.x1]="padding.left"
+              [attr.y1]="y.y"
+              [attr.x2]="width - padding.right"
+              [attr.y2]="y.y"
+              stroke="rgba(255,255,255,0.06)"
+              stroke-width="1"
+            />
+            <text
+              [attr.x]="padding.left - 8"
+              [attr.y]="y.y + 4"
+              text-anchor="end"
+              fill="rgba(255,255,255,0.45)"
+              font-size="11"
+            >{{ y.label }}</text>
           }
+          <!-- Area fill under the line -->
+          <path
+            [attr.d]="areaPath()"
+            fill="url(#line-area-gradient)"
+            stroke="none"
+          />
           <!-- Line -->
-          <polyline [attr.points]="polylinePoints()" fill="none" stroke="#d4aa6a" stroke-width="2" stroke-linejoin="round" />
+          <polyline
+            [attr.points]="polylinePoints()"
+            fill="none"
+            stroke="#d4aa6a"
+            stroke-width="2"
+            stroke-linejoin="round"
+            stroke-linecap="round"
+          />
           <!-- Data points -->
           @for (pt of points(); track $index) {
-            <circle [attr.cx]="pt.x" [attr.cy]="pt.y" r="3" fill="#d4aa6a" />
+            <circle [attr.cx]="pt.x" [attr.cy]="pt.y" r="3" fill="#1a1a1a" stroke="#d4aa6a" stroke-width="2" />
           }
           <!-- X-axis labels -->
           @for (pt of xLabels(); track $index) {
-            <text [attr.x]="pt.x" [attr.y]="height - 4" text-anchor="middle" fill="rgba(255,255,255,0.3)" font-size="10">{{ pt.label }}</text>
+            <text
+              [attr.x]="pt.x"
+              [attr.y]="height - 6"
+              text-anchor="middle"
+              fill="rgba(255,255,255,0.45)"
+              font-size="11"
+            >{{ pt.label }}</text>
           }
+          <defs>
+            <linearGradient id="line-area-gradient" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stop-color="#d4aa6a" stop-opacity="0.28"/>
+              <stop offset="100%" stop-color="#d4aa6a" stop-opacity="0"/>
+            </linearGradient>
+          </defs>
         </svg>
       }
     </div>
   `,
   styleUrls: ['./skeleton.css'],
+  styles: [`
+    .chart-card {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 16px 18px;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 10px;
+      background: rgba(255, 255, 255, 0.03);
+      backdrop-filter: blur(4px);
+    }
+    .chart-card__title {
+      font-size: 13px;
+      font-weight: 600;
+      color: rgba(255, 255, 255, 0.65);
+      letter-spacing: 0.01em;
+    }
+    .chart-card__svg {
+      width: 100%;
+      height: auto;
+      max-height: 280px;
+      display: block;
+    }
+  `],
 })
 export class LineChartComponent {
   readonly title = input<string>('');
@@ -39,8 +107,8 @@ export class LineChartComponent {
   readonly yKey = input<string>('');
 
   readonly width = 400;
-  readonly height = 200;
-  readonly padding = { top: 20, right: 20, bottom: 30, left: 50 };
+  readonly height = 220;
+  readonly padding = { top: 16, right: 16, bottom: 28, left: 44 };
 
   readonly isSkeleton = computed(() => this.data() == null);
 
@@ -67,6 +135,14 @@ export class LineChartComponent {
     this.points().map(p => `${p.x},${p.y}`).join(' ')
   );
 
+  readonly areaPath = computed((): string => {
+    const pts = this.points();
+    if (pts.length === 0) return '';
+    const baseline = this.padding.top + (this.height - this.padding.top - this.padding.bottom);
+    const top = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
+    return `${top} L ${pts[pts.length - 1].x} ${baseline} L ${pts[0].x} ${baseline} Z`;
+  });
+
   readonly xLabels = computed(() => {
     const pts = this.points();
     if (pts.length <= 6) return pts;
diff --git a/cockpit/chat/generative-ui/angular/src/app/views/stat-card.component.spec.ts b/cockpit/chat/generative-ui/angular/src/app/views/stat-card.component.spec.ts
index 021e5667d..714f99720 100644
--- a/cockpit/chat/generative-ui/angular/src/app/views/stat-card.component.spec.ts
+++ b/cockpit/chat/generative-ui/angular/src/app/views/stat-card.component.spec.ts
@@ -31,21 +31,21 @@ describe('StatCardComponent', () => {
     expect(el.textContent).toContain('+8.2%');
   });
 
-  it('applies positive color to positive delta', () => {
+  it('marks positive delta with up trend', () => {
     fixture.componentRef.setInput('label', 'MRR');
     fixture.componentRef.setInput('value', 42000);
     fixture.componentRef.setInput('delta', '+8.2%');
     fixture.detectChanges();
     const deltaEl = fixture.nativeElement.querySelector('[data-testid="delta"]');
-    expect(deltaEl?.classList.contains('text-emerald-400')).toBe(true);
+    expect(deltaEl?.getAttribute('data-trend')).toBe('up');
   });
 
-  it('applies negative color to negative delta', () => {
+  it('marks negative delta with down trend', () => {
     fixture.componentRef.setInput('label', 'Churn');
     fixture.componentRef.setInput('value', '3.2%');
     fixture.componentRef.setInput('delta', '-0.4%');
     fixture.detectChanges();
     const deltaEl = fixture.nativeElement.querySelector('[data-testid="delta"]');
-    expect(deltaEl?.classList.contains('text-red-400')).toBe(true);
+    expect(deltaEl?.getAttribute('data-trend')).toBe('down');
   });
 });
diff --git a/cockpit/chat/generative-ui/angular/src/app/views/stat-card.component.ts b/cockpit/chat/generative-ui/angular/src/app/views/stat-card.component.ts
index a8815c01e..cc74fdcb4 100644
--- a/cockpit/chat/generative-ui/angular/src/app/views/stat-card.component.ts
+++ b/cockpit/chat/generative-ui/angular/src/app/views/stat-card.component.ts
@@ -5,20 +5,57 @@ import { Component, computed, input } from '@angular/core';
   selector: 'app-stat-card',
   standalone: true,
   template: `
-    <div class="rounded-lg border border-white/10 bg-white/5 p-4 backdrop-blur-sm">
-      <div class="text-xs font-medium uppercase tracking-wider text-white/40 mb-1">{{ label() }}</div>
+    <div class="stat-card">
+      <div class="stat-card__label">{{ label() }}</div>
       @if (isSkeleton()) {
-        <div class="skeleton skeleton-value mt-2"></div>
-        <div class="skeleton skeleton-text mt-1" style="width: 30%"></div>
+        <div class="skeleton skeleton-value"></div>
+        <div class="skeleton skeleton-text" style="width: 30%"></div>
       } @else {
-        <div class="text-xl font-semibold text-white">{{ formattedValue() }}</div>
+        <div class="stat-card__value">{{ formattedValue() }}</div>
         @if (delta()) {
-          <div data-testid="delta" class="text-xs mt-1" [class]="deltaColor()">{{ delta() }}</div>
+          <div data-testid="delta" class="stat-card__delta" [attr.data-trend]="deltaTrend()">
+            {{ delta() }}
+          </div>
         }
       }
     </div>
   `,
   styleUrls: ['./skeleton.css'],
+  styles: [`
+    .stat-card {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      padding: 16px 18px;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 10px;
+      background: rgba(255, 255, 255, 0.03);
+      backdrop-filter: blur(4px);
+      min-width: 0;
+    }
+    .stat-card__label {
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: rgba(255, 255, 255, 0.45);
+    }
+    .stat-card__value {
+      font-size: 24px;
+      font-weight: 600;
+      line-height: 1.1;
+      color: rgba(255, 255, 255, 0.95);
+      font-variant-numeric: tabular-nums;
+    }
+    .stat-card__delta {
+      font-size: 12px;
+      font-weight: 500;
+      font-variant-numeric: tabular-nums;
+      color: rgba(255, 255, 255, 0.55);
+    }
+    .stat-card__delta[data-trend="up"] { color: #5cd393; }
+    .stat-card__delta[data-trend="down"] { color: #f08585; }
+  `],
 })
 export class StatCardComponent {
   readonly label = input<string>('');
@@ -34,11 +71,11 @@ export class StatCardComponent {
     return String(v);
   });
 
-  readonly deltaColor = computed(() => {
+  readonly deltaTrend = computed((): 'up' | 'down' | 'flat' => {
     const d = this.delta();
-    if (!d) return '';
-    if (d.startsWith('+')) return 'text-emerald-400';
-    if (d.startsWith('-')) return 'text-red-400';
-    return 'text-white/60';
+    if (!d) return 'flat';
+    if (d.startsWith('+')) return 'up';
+    if (d.startsWith('-') || d.startsWith('−')) return 'down';
+    return 'flat';
   });
 }
diff --git a/examples/chat/angular/e2e/model-picker.spec.ts b/examples/chat/angular/e2e/model-picker.spec.ts
index 0ad36e399..2dee1a4cb 100644
--- a/examples/chat/angular/e2e/model-picker.spec.ts
+++ b/examples/chat/angular/e2e/model-picker.spec.ts
@@ -18,8 +18,7 @@ test('model picker: configured models render, persist, and reach backend state',
   // Open the chat-select menu and assert the three model options are listed.
   await modelTrigger.click();
   const modelMenu = page
-    .locator('.demo-shell__field')
-    .filter({ hasText: 'Model' })
+    .locator('.demo-shell__field[data-field="model"]')
     .locator('chat-select .chat-select__menu');
   await expect(modelMenu.locator('.chat-select__option')).toHaveText([
     'gpt-5',
diff --git a/examples/chat/angular/e2e/test-helpers.ts b/examples/chat/angular/e2e/test-helpers.ts
index 69d5ee104..c5ab320bd 100644
--- a/examples/chat/angular/e2e/test-helpers.ts
+++ b/examples/chat/angular/e2e/test-helpers.ts
@@ -50,11 +50,27 @@ export function sendButton(page: Page): Locator {
  * The toolbar's four dropdowns (Model, Effort, Gen UI, Theme) use the
  * @ngaf/chat `chat-select` primitive — not native <select>. The trigger
  * is the button users click to open the popover.
+ *
+ * After PR #444 dropped the visible label text from the toolbar, the
+ * fields are now identified by stable `data-field` attributes on the
+ * `.demo-shell__field` wrapper. The label argument is mapped to the
+ * matching attribute value so call sites stay unchanged.
  */
+const LABEL_TO_FIELD: Record<string, string> = {
+  Model: 'model',
+  Effort: 'effort',
+  'Gen UI': 'genui',
+  Theme: 'theme',
+};
+
+function labelToFieldAttr(label: string): string {
+  return LABEL_TO_FIELD[label] ?? label.toLowerCase().replace(/\s+/g, '');
+}
+
 export function toolbarSelect(page: Page, label: string): Locator {
+  const field = labelToFieldAttr(label);
   return page
-    .locator('.demo-shell__field')
-    .filter({ hasText: label })
+    .locator(`.demo-shell__field[data-field="${field}"]`)
     .locator('chat-select .chat-select__trigger');
 }
 
@@ -71,11 +87,11 @@ export async function selectToolbarOption(
   label: string,
   option: string
 ): Promise<void> {
+  const field = labelToFieldAttr(label);
   const trigger = toolbarSelect(page, label);
   await trigger.click();
   const menu = page
-    .locator('.demo-shell__field')
-    .filter({ hasText: label })
+    .locator(`.demo-shell__field[data-field="${field}"]`)
     .locator('chat-select .chat-select__menu');
   await menu.waitFor({ state: 'visible' });
   const optionButton = menu
diff --git a/examples/chat/angular/src/app/shell/demo-shell.component.html b/examples/chat/angular/src/app/shell/demo-shell.component.html
index fd5264092..31ed127d2 100644
--- a/examples/chat/angular/src/app/shell/demo-shell.component.html
+++ b/examples/chat/angular/src/app/shell/demo-shell.component.html
@@ -75,7 +75,7 @@
         }
       </div>
 
-      <div class="demo-shell__field demo-shell__field--first">
+      <div class="demo-shell__field demo-shell__field--first" data-field="model">
         <chat-select
           [options]="modelOptions()"
           [value]="model()"
@@ -84,7 +84,7 @@
         />
       </div>
 
-      <div class="demo-shell__field">
+      <div class="demo-shell__field" data-field="effort">
         <chat-select
           [options]="effortOptions()"
           [value]="effort()"
@@ -93,7 +93,7 @@
         />
       </div>
 
-      <div class="demo-shell__field">
+      <div class="demo-shell__field" data-field="genui">
         <chat-select
           [options]="genUiOptions()"
           [value]="genUiMode()"
@@ -102,7 +102,7 @@
         />
       </div>
 
-      <div class="demo-shell__field">
+      <div class="demo-shell__field" data-field="theme">
         <chat-select
           [options]="themeOptions()"
           [value]="theme()"
diff --git a/libs/chat/src/lib/agent/message.ts b/libs/chat/src/lib/agent/message.ts
index 5f2766a06..f898fffd8 100644
--- a/libs/chat/src/lib/agent/message.ts
+++ b/libs/chat/src/lib/agent/message.ts
@@ -33,6 +33,15 @@ export interface Message {
   extra?: Record<string, unknown>;
   /** Provider-agnostic citation list. Populated by adapters. */
   citations?: Citation[];
+  /**
+   * IDs of tool calls emitted BY this assistant message. Populated by
+   * adapters from provider-native fields (LangGraph: `tool_calls[].id`;
+   * Anthropic: `tool_use` content blocks). Used by `<chat-tool-calls>` to
+   * scope its rendering to a single message — otherwise it falls back to
+   * the agent's global toolCalls list, which renders duplicates across
+   * every AI message in a thread.
+   */
+  toolCallIds?: string[];
 }
 
 export function isUserMessage(m: Message): m is Message & { role: 'user' } {
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 87fdc5480..5d60ede30 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
@@ -113,11 +113,26 @@ export class ChatToolCallsComponent {
 
   readonly toolCalls = computed((): ToolCall[] => {
     const msg = this.message();
-    if (msg && msg.role === 'assistant' && Array.isArray(msg.content)) {
-      const blocks = msg.content.filter((b) => b.type === 'tool_use');
+    if (msg && msg.role === 'assistant') {
       const all = this.agent().toolCalls();
-      return blocks.map(b => all.find(tc => tc.id === b.id)).filter((x): x is ToolCall => !!x);
+      // Prefer adapter-provided `toolCallIds` (LangGraph populates it from
+      // raw `tool_calls`). This is the per-message scope that prevents
+      // every AI bubble from re-rendering the entire thread's tool-call
+      // list when content is a flat string (the LangGraph adapter's
+      // default — extractTextContent reduces complex content to string).
+      if (msg.toolCallIds && msg.toolCallIds.length > 0) {
+        return msg.toolCallIds.map(id => all.find(tc => tc.id === id)).filter((x): x is ToolCall => !!x);
+      }
+      // Anthropic-style content-block path: extract tool_use IDs inline.
+      if (Array.isArray(msg.content)) {
+        const blocks = msg.content.filter((b) => b.type === 'tool_use');
+        return blocks.map(b => all.find(tc => tc.id === b.id)).filter((x): x is ToolCall => !!x);
+      }
+      // Assistant message provided but no tool-call linkage available:
+      // this message didn't emit any tool calls. Return empty.
+      return [];
     }
+    // No message context at all (e.g. agent-level pinning) → global list.
     return this.agent().toolCalls();
   });
 
diff --git a/libs/langgraph/src/lib/agent.fn.ts b/libs/langgraph/src/lib/agent.fn.ts
index 3c1fdfaff..db30bd746 100644
--- a/libs/langgraph/src/lib/agent.fn.ts
+++ b/libs/langgraph/src/lib/agent.fn.ts
@@ -585,6 +585,10 @@ function toMessage(
   };
   const citations = extractCitations(raw as { additional_kwargs?: Record<string, unknown> });
   if (citations) result.citations = citations;
+  if (role === 'assistant') {
+    const tcIds = getToolCallIds(m as CoreAIMessage);
+    if (tcIds.length > 0) result.toolCallIds = tcIds;
+  }
   return result;
 }