From 1d08c7595ef9904f5de485c2b04a5cfa4cdbef78 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 20 Jun 2026 04:27:04 +0000
Subject: [PATCH] UI overhaul Phase 4a: adopt primitives, drop duplicate Signal
 Monitor title

Self-contained primitive-adoption + declutter, no monolith surgery:

- DiagnosticLog: static accent dot -> LedIndicator(status="active"), a live
  pulsing readout fitting the "System Diagnostics" affordance.
- WaveformPlayer: remove the internal "Signal Monitor" header row. The parent
  DeviceRack (App.tsx) already titles the panel and carries a status LED, so
  the inline title + Activity icon were a duplicate. The readiness strip
  (ONLINE/SYNCING) and 600ms load-flash are preserved.
- Phase2ConsistencyReport: raw <table> -> ui/DataTable, unifying the
  violations table onto the shared table primitive. Severity colour preserved
  via a render fn; truncation and dev-audience filtering unchanged.

Verify: tsc clean; 830/830 unit tests pass (incl. phase2ConsistencyReport +
diagnosticLogUi pinning suites); vite build OK.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016to3B8Hf9eAGxAbzpQNvku
---
 apps/ui/src/components/DiagnosticLog.tsx      |  3 +-
 .../components/Phase2ConsistencyReport.tsx    | 52 ++++++-------------
 apps/ui/src/components/WaveformPlayer.tsx     |  8 +--
 3 files changed, 19 insertions(+), 44 deletions(-)

diff --git a/apps/ui/src/components/DiagnosticLog.tsx b/apps/ui/src/components/DiagnosticLog.tsx
index d9196d65..cd914dcb 100644
--- a/apps/ui/src/components/DiagnosticLog.tsx
+++ b/apps/ui/src/components/DiagnosticLog.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
 import { Phase2ConsistencyReport } from './Phase2ConsistencyReport';
+import { LedIndicator } from './ui';
 import { BackendTimingDiagnostics, DiagnosticLogEntry, DiagnosticLogStatus } from '../types';
 import { assertNever } from '../utils/assertNever';
 
@@ -71,7 +72,7 @@ export function DiagnosticLog({ logs, defaultExpanded }: DiagnosticLogProps) {
         aria-expanded={isExpanded}
         aria-label="Toggle diagnostic log"
       >
-        <span className="w-2 h-2 bg-accent rounded-full mr-2"></span>
+        <LedIndicator status="active" className="mr-2" />
         System Diagnostics
         <span className="ml-2 text-meta">{isExpanded ? '▾' : '▸'}</span>
         <span className="ml-auto text-meta text-text-secondary/50">{logs.length} {logs.length === 1 ? 'entry' : 'entries'}</span>
diff --git a/apps/ui/src/components/Phase2ConsistencyReport.tsx b/apps/ui/src/components/Phase2ConsistencyReport.tsx
index dbaf9751..ab5e34c7 100644
--- a/apps/ui/src/components/Phase2ConsistencyReport.tsx
+++ b/apps/ui/src/components/Phase2ConsistencyReport.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { DataTable, type DataTableColumn } from './ui';
 import type { ValidationReport, ValidationViolation } from '../services/phase2Validator';
 
 interface Phase2ConsistencyReportProps {
@@ -27,6 +28,19 @@ function severityClass(severity: ValidationViolation['severity']): string {
   return severity === 'ERROR' ? 'text-error' : 'text-warning';
 }
 
+const violationColumns: DataTableColumn<ValidationViolation>[] = [
+  {
+    key: 'severity',
+    label: 'Severity',
+    render: (v) => (
+      <span className={`font-mono ${severityClass(v.severity)}`}>{v.severity}</span>
+    ),
+  },
+  { key: 'type', label: 'Type', render: (v) => formatViolationType(v.type) },
+  { key: 'field', label: 'Field', render: (v) => v.field },
+  { key: 'detail', label: 'Detail', render: (v) => truncateDetail(v.message) },
+];
+
 export function Phase2ConsistencyReport({ report, hideWhenClean = false }: Phase2ConsistencyReportProps) {
   // Audit Finding #1E: dev-audience violations (currently NEW_FIELD_UNCITED
   // coverage signals) stay in `report.violations` and `report.summary` so
@@ -59,43 +73,7 @@ export function Phase2ConsistencyReport({ report, hideWhenClean = false }: Phase
         {report.summary.checkedFields} checked fields
       </div>
 
-      <div className="overflow-x-auto">
-        <table className="w-full text-sm border-collapse">
-          <thead>
-            <tr className="border-b border-border">
-              {['Severity', 'Type', 'Field', 'Detail'].map((label) => (
-                <th
-                  key={label}
-                  className="px-2 py-1 text-left text-meta font-mono uppercase tracking-wide text-text-secondary font-normal"
-                >
-                  {label}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {userVisible.map((violation, rowIndex) => (
-              <tr
-                key={`${violation.field}-${violation.type}-${rowIndex}`}
-                className={`border-b border-border ${
-                  rowIndex % 2 === 0 ? 'bg-bg-secondary' : ''
-                }`}
-              >
-                <td className={`px-2 py-1 text-sm font-mono ${severityClass(violation.severity)}`}>
-                  {violation.severity}
-                </td>
-                <td className="px-2 py-1 text-sm text-text-primary">
-                  {formatViolationType(violation.type)}
-                </td>
-                <td className="px-2 py-1 text-sm text-text-primary">{violation.field}</td>
-                <td className="px-2 py-1 text-sm text-text-primary">
-                  {truncateDetail(violation.message)}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+      <DataTable data={userVisible} columns={violationColumns} />
     </div>
   );
 }
diff --git a/apps/ui/src/components/WaveformPlayer.tsx b/apps/ui/src/components/WaveformPlayer.tsx
index c9c4bbc5..14d86b17 100644
--- a/apps/ui/src/components/WaveformPlayer.tsx
+++ b/apps/ui/src/components/WaveformPlayer.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import WaveSurfer from 'wavesurfer.js';
-import { Play, Pause, Loader2, Activity } from 'lucide-react';
+import { Play, Pause, Loader2 } from 'lucide-react';
 
 import { RetroVisualizer } from './RetroVisualizer';
 
@@ -269,11 +269,7 @@ export function WaveformPlayer({ audioUrl, audioFile, onAudioElement }: Waveform
         beatPulse ? 'border-accent/50' : 'border-border'
       }`}
     >
-      <div className={`flex items-center justify-between px-4 pt-1 border-b border-border/30 pb-2 transition-colors duration-200 ${hasJustLoaded ? 'bg-accent/8' : ''}`}>
-        <div className="flex items-center space-x-2">
-          <Activity className="w-4 h-4 text-accent" />
-          <span className="text-xs font-bold text-text-primary tracking-widest uppercase">Signal Monitor</span>
-        </div>
+      <div className={`flex items-center justify-end px-4 pt-1 border-b border-border/30 pb-2 transition-colors duration-200 ${hasJustLoaded ? 'bg-accent/8' : ''}`}>
         <div className="flex items-center space-x-1">
           <div className={`w-2 h-2 rounded-full transition-all duration-200 ${
             isReady