feat: Build a web dashboard UI for interactive audit report visualization

[Nanle-code]

Overview

ChainProof outputs results as Markdown, JSON, or a terminal table. These formats are poor for security reviewers, managers, and stakeholders who need to triage and track findings interactively. A web dashboard unlocks broader adoption.

Proposed Feature

A new package @chainproof/dashboard that:

1. Spins up a local HTTP server serving a React SPA
2. Reads a chainproof-results.json file (or accepts piped scan output)
3. Presents findings in an interactive, filterable UI

UI Components

Findings Table

• Filterable by severity, file, rule ID
• Sortable by line number, severity, file
• Click-to-expand inline code snippet with syntax highlighting

Summary Dashboard

• Severity donut chart (critical / high / medium / low / gas)
• Per-file severity heatmap
• Trend chart for historical comparison when multiple results are loaded

Finding Detail Panel

• Full description and recommendation
• SWC registry deep link
• LLM-enhanced explanation as rich text (if present)
• Exploit scenario section (if present)

Technical Structure

packages/dashboard/
  src/
    server.ts
    index.tsx
    components/
      FindingsTable.tsx
      SeverityChart.tsx
      FindingDetail.tsx
      FileHeatmap.tsx

CLI Integration

chainproof scan contracts/ --format json --output results.json
chainproof dashboard results.json
# Opens browser to http://localhost:4242

Acceptance Criteria

• packages/dashboard scaffold with Express + React + Vite
• Findings table with severity filter and sort
• Severity summary chart
• Finding detail panel with code snippet
• chainproof dashboard <results.json> CLI subcommand
• Auto-opens browser on server start
• Keyboard navigable with ARIA labels on interactive elements
• --export flag builds to static HTML for offline sharing

[Ebenezer199914]

i will like to work on this