Audit Phase 5: Web UI

[nycomp]

Phase 5: Web UI

Parent: #424

Tasks

• Create
  • Navigation, CSS/JS includes, base layout
• Create
  • Trace list table with filters (path, status, since, until)
  • Pagination cursor display
  • Link to trace detail pages
• Create
  • Trace metadata (trace_id, status, duration, client, user)
  • Waterfall visualization (offset, duration, method, path, status)
  • Span details drawer (full headers/bodies)
• Create
  • Waterfall timeline styling
  • Span bars with color by status
  • Responsive layout
• Create
  • • Draw waterfall from span data
  • Filter form handling
  • Async data fetching from API
  • Span detail expand/collapse
• Register UI routes (serve from and )

Acceptance Criteria

• Trace list loads and displays recent traces
• Filters work (path, status, time range)
• Trace detail shows waterfall correctly
• Clicking span shows full headers/bodies
• Manual browser testing passes

References

• PRD §2: Goals (Web frontend for exploring traces)
• PRD §6: Trace Reconstruction (waterfall display)
• Plan §5: Web UI