Phase 06: US4 — Interactive Report Rendering

This phase implements the full interactive report: collapsible test result cards with colour-coded severity, hop chain flow visualisation, security appliances summary, search/filter bar, and export to HTML/JSON. By the end of this phase, users receive a complete, interactive analysis report. TDD Red-Green: write all failing component tests first, then implement each component.

Spec Kit Context

Feature: 1-web-header-analyzer
Specification: .specify/specs/1-web-header-analyzer/spec.md (FR-07, FR-08, FR-09, FR-20, FR-21, FR-25)
Plan: .specify/specs/1-web-header-analyzer/plan.md
Tasks: .specify/specs/1-web-header-analyzer/tasks.md
Data Model: .specify/specs/1-web-header-analyzer/data-model.md (TestResult, HopChainNode, SecurityAppliance, AnalysisReport)
User Story: US4 — Interactive Report Rendering (Scenario 1, steps 7–8)
Constitution: .specify/memory/constitution.md (TDD: P6, UX: P7)

Dependencies

Requires Phase 05 completed (analysis results available to render)

Severity Colour Mapping

Spam: #ff5555 (red) — FontAwesome warning/ban icon
Suspicious: #ffb86c (amber) — FontAwesome exclamation icon
Clean: #50fa7b (green) — FontAwesome check icon
Info: #bd93f9 (purple) — FontAwesome info icon
Error: error indicator with failure explanation (FR-25)

Component Architecture

ReportContainer
├── Summary Stats (total tests, passed, failed, severity breakdown)
├── ReportSearchBar (filter by text match)
├── ReportExport (HTML / JSON download buttons)
├── SecurityAppliancesSummary (detected security products as badges)
├── HopChainVisualisation (vertical flow diagram of mail server hops)
└── TestResultCard[] (one per test result, collapsible, severity-coloured)

Tasks

T030 [US4] Write failing tests (TDD Red) in frontend/src/__tests__/report/TestResultCard.test.tsx (each severity level, expand/collapse, error indicator), HopChainVisualisation.test.tsx (render with sample hops), ReportSearchBar.test.tsx (filter simulation), ReportExport.test.tsx (export trigger), SecurityAppliancesSummary.test.tsx (render with sample appliances, empty state), ReportContainer.test.tsx (full report with mixed results)
T031 [P] [US4] Create frontend/src/components/report/TestResultCard.tsx — collapsible card per test result. Severity-coloured indicator (red=spam, amber=suspicious, green=clean per FR-09), header name, monospace value, analysis text. Failed tests show error indicator (FR-25). Expand/collapse with animation, keyboard accessible (NFR-02). Verify TestResultCard.test.tsx passes (TDD Green)
T032 [P] [US4] Create frontend/src/components/report/HopChainVisualisation.tsx — vertical flow diagram of mail server hop chain (FR-08): hostname, IP, timestamp, server version, connecting arrows. FontAwesome server/network icons. Responsive. Verify HopChainVisualisation.test.tsx passes (TDD Green)
T033 [P] [US4] Create frontend/src/components/report/ReportSearchBar.tsx — search/filter bar above report (FR-20). Filters by text match against test name, header name, or analysis text. Highlights matches, shows count. FontAwesome search icon, Escape to clear. Verify ReportSearchBar.test.tsx passes (TDD Green)
T034 [P] [US4] Create frontend/src/components/report/ReportExport.tsx — export as HTML (styled standalone page) or JSON (raw data) per FR-21. FontAwesome download icons, triggers browser download. Verify ReportExport.test.tsx passes (TDD Green)
T035 [US4] Create frontend/src/components/report/SecurityAppliancesSummary.tsx — summary listing detected email security products as badges/tags with FontAwesome shield icons. Handle empty state (no appliances detected). Verify SecurityAppliancesSummary.test.tsx passes (TDD Green)
T036 [US4] Create frontend/src/components/report/ReportContainer.tsx — top-level wrapper receiving AnalysisReport. Renders: summary stats (total tests, passed, failed, severity breakdown), TestResultCard list, HopChainVisualisation, SecurityAppliancesSummary, ReportSearchBar, ReportExport. FontAwesome summary icons. Verify ReportContainer.test.tsx passes (TDD Green)

Completion

All vitest tests pass: npx vitest run src/__tests__/report/
Report renders all test results as collapsible cards with correct severity colours
Hop chain displays as a vertical visual flow with server details and connecting arrows
Security appliances show as badges; empty state handled gracefully
Search filters results in real-time across test name, header name, and analysis text
Export JSON produces a valid JSON file containing all results
Export HTML produces a styled standalone page viewable in any browser
All report components are keyboard accessible
Linting passes (npx eslint src/, npx prettier --check src/)
Run /speckit.analyze to verify consistency

5.0 KiB Raw Blame History Unescape Escape