Skip to content

Web Frontend -- Phase 14 Addendum

This addendum extends the Web Frontend Guided Demo with Phase 14 evaluation and compliance features added to the React frontend.

New Dashboard Cards

Evaluation Metrics Card

The Dashboard page now includes an Evaluation Metrics stat card showing the latest CLEAR+ benchmark summary:

Metric Value Description
Benchmarks 3+ Number of benchmark specs in the active suite
Pass Rate 100% Percentage of specs meeting all thresholds
Avg Efficacy 0.95 Mean efficacy across all benchmark specs
Avg Coverage 0.90 Mean persona coverage across all specs

The card refreshes when new benchmark.completed events arrive via the WebSocket connection.

Compliance Status Card

A Compliance Status card summarises the latest audit results:

Metric Value
Regulation EU AI Act
Checks 1,224
Pass Rate 96.4%
Warnings 44
High-Risk Personas 8

Evaluation Page

The new Evaluation page (pages/Evaluation.tsx) provides an interactive view of CLEAR+ benchmark results.

Radar Chart

A D3 radar chart (visualizations/RadarChart.tsx) renders all seven CLEAR+ dimensions for a selected benchmark spec. Dimensions are arranged radially with the value plotted as a filled polygon.

Benchmark History

A timeline chart shows CLEAR+ dimension trends across benchmark runs. Each run is a column; dimensions are colour-coded rows showing improvement or regression.

Threshold Overlay

The radar chart supports a threshold overlay that draws the pass/fail boundary as a dashed polygon. Dimensions falling below the threshold are highlighted in red.

Compliance Page

The new Compliance page (pages/Compliance.tsx) provides an interactive view of audit results.

Risk Distribution

A donut chart shows the distribution of personas across EU AI Act risk tiers:

  • HIGH (red) -- Personas with 3+ hard-stops or governance category
  • LIMITED (amber) -- Decision-making roles or mandatory patterns
  • MINIMAL (green) -- Default classification

Findings Table

A sortable table lists all audit findings with columns:

Column Description
Requirement EU AI Act article reference
Status PASS / FAIL / WARNING / N/A
Persona Which persona was audited
Evidence Evidence source and confidence
Remediation Recommended fix (if any)

Evidence Graph Visualisation

The evidence graph is rendered as a force-directed graph using the existing ForceGraph component. Nodes are coloured by type:

  • Requirements (blue)
  • Evidence items (green)
  • Personas (orange)
  • Constitutions (purple)

WebSocket Events

Phase 14 adds new event types to the WebSocket feed:

Event Type Source Payload
benchmark.started BenchmarkRunner Suite name, spec count
benchmark.completed BenchmarkRunner Results summary
benchmark.regression BenchmarkRunner Regression details
compliance.audit.started CompliancePipeline Regulation, persona count
compliance.finding.raised CompliancePipeline Requirement ID, status
compliance.remediation.required CompliancePipeline Action ID, priority
compliance.audit.completed CompliancePipeline Full audit summary

The Protocol Explorer page now includes these events in its event feed.

The sidebar navigation has been updated with two new entries:

  • Evaluation -- CLEAR+ benchmark results and radar charts
  • Compliance -- Audit findings, risk distribution, evidence graphs

Tips

  • Use the radar chart to quickly identify which CLEAR+ dimensions need attention for a given benchmark spec
  • Filter the findings table by risk tier to focus on HIGH-risk personas
  • Export evidence graphs via the download button for external tools