Skip to content

feat: Implement a web dashboard UI for interactive audit report visualization #9

Description

@Nanle-code

Overview

ChainProof currently outputs audit results as Markdown, JSON, or a terminal table. While these formats are useful for CI pipelines and developers comfortable with the terminal, they provide a poor experience for security reviewers, project managers, and stakeholders who need to triage and track findings interactively. A web dashboard would unlock significantly 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
  • "Copy fix recommendation" button

Summary Dashboard

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

Finding Detail Panel

  • Full description and recommendation
  • SWC registry deep link
  • LLM-enhanced explanation rendered as rich text (if present)
  • Exploit scenario section (if present)
  • Code diff preview showing vulnerable vs fixed snippet

Technical Design

packages/
  dashboard/
    src/
      server.ts       # Express server, serves static build + /api/results
      index.tsx       # React SPA entry point
      components/
        FindingsTable.tsx
        SeverityChart.tsx
        FindingDetail.tsx
        FileHeatmap.tsx
    package.json

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 (Chart.js or Recharts)
  • Finding detail panel with code snippet
  • chainproof dashboard <results.json> CLI subcommand
  • Auto-opens browser on server start
  • Accessible: keyboard navigable, ARIA labels on interactive elements
  • Builds to static HTML for offline sharing (chainproof dashboard --export report.html)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions