Build interactive HTML dashboard with treemap visualization

[rudra496]

Summary

The project has a dashboard/ directory but needs a polished, interactive HTML report that developers actually want to use.

What to build

An HTML report that includes:

1. Overview Section

• Overall trust score with a circular gauge/progress bar
• Total issues breakdown (pie chart: critical/high/medium/low)
• Files analyzed count, analysis time

2. Treemap Visualization

• Files as rectangles, sized by number of issues
• Color-coded by severity (red=critical, orange=high, yellow=medium, green=clean)
• Click to drill down into file details

3. Issue Timeline

• Show when issues were introduced (if using git integration)
• Trend chart of trust scores over time

4. Per-File Breakdown

• Sortable table: filename, trust score, critical/high/medium/low counts
• Click to expand and see individual issues with line numbers
• "Jump to code" links (if used in IDE)

5. Category Deep-Dive

• Security, Hallucination, Logic, Best Practices tabs
• Each with specific issues, suggestions, and affected lines

Tech Stack

• Single HTML file with inline CSS/JS (no build step needed)
• Use Chart.js or D3.js from CDN for visualizations
• Dark theme (developers love dark mode)
• Print-friendly CSS

Acceptance Criteria

• aitrust report src/ --format html --output report.html generates beautiful report
• Treemap visualization works
• Charts are interactive (hover, click)
• Dark theme
• Works offline (no external APIs, only CDN for charts)
• Under 500KB HTML file for typical projects

Difficulty

Intermediate — HTML/CSS/JS work with chart libraries.