feat(report-list): add collapsible prompt badge list component

Extract prompt name badges into a dedicated `PromptBadgeList` component
that automatically truncates overflow badges to a single row and shows a
"+N more" toggle. Uses ResizeObserver and afterNextRender to measure badge
layout after each render cycle and reacts to container width changes.

- Add `PromptBadgeList` component with overflow detection via DOM measurement
- Hide the container during measurement to avoid layout flicker
- Show "Show less" / "+N more" toggle badge when names overflow one row
- Move prompt-names styles from report-list.scss into the component
- Replace inline badge list in report-list.html with the new component

Author: danymarques

report-app/src/app/pages/report-list/prompt-badge/prompt-badge-list.html

@@ -0,0 +1,21 @@
+<ul
+  #container
+  class="status-badge-group prompt-names"
+  [style.visibility]="measuring() ? 'hidden' : 'visible'"
+>
+  @for (name of visibleNames(); track name) {
+    <li class="status-badge neutral" data-badge>{{ name }}</li>
+  }
+  @if (showToggle()) {
+    <li
+      class="status-badge neutral toggle-badge"
+      (click)="toggle($event)"
+    >
+      @if (expanded()) {
+        Show less
+      } @else {
+        +{{ hiddenCount() }} more
+      }
+    </li>
+  }
+</ul>

report-app/src/app/pages/report-list/prompt-badge/prompt-badge-list.ts

@@ -0,0 +1,140 @@
+import {
+  Component,
+  ElementRef,
+  Injector,
+  PLATFORM_ID,
+  afterNextRender,
+  computed,
+  effect,
+  inject,
+  input,
+  signal,
+  viewChild,
+} from '@angular/core';
+import {isPlatformServer} from '@angular/common';
+
+@Component({
+  selector: 'prompt-badge-list',
+  templateUrl: './prompt-badge-list.html',
+  styles: `
+    .prompt-names {
+      margin-top: 0.4rem;
+      display: flex;
+      width: 100%;
+    }
+
+    .status-badge {
+      font-size: 0.75rem;
+      font-weight: 400;
+    }
+
+    .toggle-badge {
+      cursor: pointer;
+      font-weight: 500;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  `,
+})
+export class PromptBadgeList {
+  readonly promptNames = input.required<string[]>();
+
+  private readonly isServer = isPlatformServer(inject(PLATFORM_ID));
+  private readonly injector = inject(Injector);
+  private lastContainerWidth = 0;
+  private pendingMeasure = false;
+  private containerRef = viewChild.required<ElementRef<HTMLElement>>('container');
+
+  protected measuring = signal(true);
+  protected expanded = signal(false);
+  protected visibleCount = signal<number>(Infinity);
+
+  protected visibleNames = computed(() => {
+    const names = this.promptNames();
+    if (this.expanded() || this.measuring()) {
+      return names;
+    }
+    const count = this.visibleCount();
+    return isFinite(count) ? names.slice(0, count) : names;
+  });
+
+  protected hiddenCount = computed(() => {
+    if (this.expanded() || this.measuring() || !isFinite(this.visibleCount())) {
+      return 0;
+    }
+    return Math.max(0, this.promptNames().length - this.visibleCount());
+  });
+
+  protected showToggle = computed(() => {
+    if (this.measuring()) {
+      return false;
+    }
+    if (this.expanded()) {
+      return isFinite(this.visibleCount());
+    }
+    return this.hiddenCount() > 0;
+  });
+
+  constructor() {
+    effect(onCleanup => {
+      if (this.isServer) {
+        this.measuring.set(false);
+        return;
+      }
+      const el = this.containerRef().nativeElement;
+      const observer = new ResizeObserver(entries => {
+        if (this.pendingMeasure) {
+          return;
+        }
+        const newWidth = Math.round(entries[0].contentRect.width);
+        if (newWidth !== this.lastContainerWidth) {
+          this.lastContainerWidth = newWidth;
+          this.scheduleMeasure();
+        }
+      });
+      observer.observe(el);
+      this.scheduleMeasure();
+
+      onCleanup(() => observer.disconnect());
+    });
+  }
+
+  protected toggle(event: Event): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.expanded.update(v => !v);
+    if (!this.expanded()) {
+      this.scheduleMeasure();
+    }
+  }
+
+  private scheduleMeasure(): void {
+    if (this.pendingMeasure) {
+      return;
+    }
+    this.pendingMeasure = true;
+    this.measuring.set(true);
+    afterNextRender({read: () => this.doMeasure()}, {injector: this.injector});
+  }
+
+  private doMeasure(): void {
+    this.pendingMeasure = false;
+
+    const container = this.containerRef().nativeElement;
+    const badges = Array.from(container.querySelectorAll('[data-badge]')) as HTMLElement[];
+
+    if (badges.length === 0) {
+      this.measuring.set(false);
+      return;
+    }
+
+    const firstTop = badges[0].offsetTop;
+    const overflowIdx = badges.findIndex(b => b.offsetTop > firstTop);
+
+    // If overflow is detected, reserve one slot for the toggle badge
+    this.visibleCount.set(overflowIdx === -1 ? Infinity : Math.max(1, overflowIdx - 1));
+    this.measuring.set(false);
+  }
+}

report-app/src/app/pages/report-list/report-list.html

@@ -38,11 +38,7 @@
                 }
               </div>
               @if (group.promptNames.length) {
-                <ul class="status-badge-group prompt-names">
-                  @for (name of group.promptNames; track name) {
-                    <li class="status-badge neutral">{{ name }}</li>
-                  }
-                </ul>
+                <prompt-badge-list [promptNames]="group.promptNames" />
               }
             </div>
             <div class="run-meta-container">

report-app/src/app/pages/report-list/report-list.scss

@@ -106,14 +106,6 @@ h1, h2 {
   padding: 0 20px;
 }
 
-.prompt-names {
-  margin-top: 0.4rem;
-
-  .status-badge {
-    font-size: 0.75rem;
-    font-weight: 400;
-  }
-}
 
 .select-for-comparison input[type='checkbox'] {
   width: 20px;

report-app/src/app/pages/report-list/report-list.ts

@@ -1,4 +1,4 @@
-import {Component, computed, inject, PLATFORM_ID, signal} from '@angular/core';
+import {Component, inject, PLATFORM_ID, signal} from '@angular/core';
 import {Router, RouterLink} from '@angular/router';
 import {ReportsFetcher} from '../../services/reports-fetcher';
 import {DatePipe, isPlatformServer} from '@angular/common';
@@ -12,6 +12,7 @@ import {Score} from '../../shared/score/score';
 import {ProviderLabel} from '../../shared/provider-label';
 import {bucketToScoreVariable} from '../../shared/scoring';
 import {ReportFilters} from '../../shared/report-filters/report-filters';
+import {PromptBadgeList} from './prompt-badge/prompt-badge-list';
 
 @Component({
   selector: 'app-report-list',
@@ -23,6 +24,7 @@ import {ReportFilters} from '../../shared/report-filters/report-filters';
     Score,
     ProviderLabel,
     ReportFilters,
+    PromptBadgeList,
   ],
   templateUrl: './report-list.html',
   styleUrls: ['./report-list.scss'],