flare-ui/src/app/components/test/test.component.html

<div class="test-container">
  <h2>System Tests</h2>

  <div class="test-controls">
    <button mat-raised-button color="primary" (click)="runAllTests()" [disabled]="running">
      <mat-icon>play_arrow</mat-icon>
      Run All Tests
    </button>
    <button mat-raised-button (click)="runSelectedTests()" 
            [disabled]="running || selectedTests.length === 0">
      <mat-icon>play_circle_outline</mat-icon>
      Run Selected ({{ selectedTests.length }})
    </button>
    <button mat-raised-button color="warn" (click)="stopTests()" [disabled]="!running">
      <mat-icon>stop</mat-icon>
      Stop
    </button>
  </div>

  <mat-card class="test-categories">
    <mat-checkbox [(ngModel)]="allSelected" (change)="toggleAll()">
      <strong>All Tests ({{ totalTests }} tests)</strong>
    </mat-checkbox>

    <mat-accordion>
      <mat-expansion-panel *ngFor="let category of categories" 
                           [(expanded)]="category.expanded">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <mat-checkbox [checked]="allSelected" (change)="toggleAll()">
              <strong>All Tests ({{ totalTests }} tests)</strong>
            </mat-checkbox>
          </mat-panel-title>
          <mat-panel-description>
            <div class="category-status" *ngIf="getCategoryResults(category).total > 0">
              <mat-chip-listbox>
                <mat-chip-option *ngIf="getCategoryResults(category).passed > 0" 
                                 class="success-chip">
                  {{ getCategoryResults(category).passed }} passed
                </mat-chip-option>
                <mat-chip-option *ngIf="getCategoryResults(category).failed > 0" 
                                 class="error-chip">
                  {{ getCategoryResults(category).failed }} failed
                </mat-chip-option>
              </mat-chip-listbox>
            </div>
          </mat-panel-description>
        </mat-expansion-panel-header>

        <mat-list>
          <mat-list-item *ngFor="let test of category.tests">
            <mat-icon matListItemIcon [class]="'status-' + (getTestResult(test.name)?.status || 'pending')">
              {{ getTestResult(test.name)?.status === 'PASS' ? 'check_circle' :
                 getTestResult(test.name)?.status === 'FAIL' ? 'cancel' :
                 getTestResult(test.name)?.status === 'RUNNING' ? 'hourglass_empty' :
                 'radio_button_unchecked' }}
            </mat-icon>
            <div matListItemTitle>{{ test.name }}</div>
            <div matListItemLine *ngIf="getTestResult(test.name)">
              <span class="test-duration" *ngIf="getTestResult(test.name)?.duration_ms">
                {{ getTestResult(test.name)?.duration_ms }}ms
              </span>
              <span class="test-details" *ngIf="getTestResult(test.name)?.details">
                • {{ getTestResult(test.name)?.details }}
              </span>
              <span class="test-error" *ngIf="getTestResult(test.name)?.error">
                • {{ getTestResult(test.name)?.error }}
              </span>
            </div>
            <mat-icon matListItemMeta *ngIf="currentTest === test.name" class="running-icon">
              sync
            </mat-icon>
          </mat-list-item>
        </mat-list>
      </mat-expansion-panel>
    </mat-accordion>
  </mat-card>

  <mat-card class="test-results" *ngIf="testResults.length > 0 || running">
    <mat-card-header>
      <mat-card-title>Test Progress</mat-card-title>
    </mat-card-header>
    
    <mat-card-content>
      <mat-progress-bar [value]="progress" 
                        [mode]="running ? 'determinate' : 'determinate'"
                        [color]="failedTests > 0 ? 'warn' : 'primary'">
      </mat-progress-bar>

      <div class="test-summary">
        <div class="summary-item">
          <mat-icon class="success">check_circle</mat-icon>
          <span>Passed: {{ passedTests }}</span>
        </div>
        <div class="summary-item">
          <mat-icon class="error">cancel</mat-icon>
          <span>Failed: {{ failedTests }}</span>
        </div>
        <div class="summary-item">
          <mat-icon>timer</mat-icon>
          <span>Total: {{ testResults.length }}/{{ selectedTests.length }}</span>
        </div>
      </div>

      <div class="current-test" *ngIf="currentTest">
        <mat-icon class="spin">sync</mat-icon>
        Running: {{ currentTest }}
      </div>
    </mat-card-content>
  </mat-card>

  <div class="empty-state" *ngIf="!running && testResults.length === 0">
    <mat-icon>assignment_turned_in</mat-icon>
    <p>No test results yet. Select tests and click "Run Selected" to start.</p>
  </div>
</div>