1e: Performance tab in dashboard — transaction list + waterfall chart

[ajianaz]

Parent: #231 · Blocked by: #238

Scope

Add a "Performance" tab to the SvelteKit dashboard showing transaction data.

UI Components

Performance Tab (per project)

• Transaction list table: name, duration (ms), status badge, timestamp, release
• Sort by: newest, slowest, most frequent
• Filter by: transaction name, status, release
• Pagination

Transaction Detail Page

• Header: transaction name, total duration, release, environment, timestamp
• Waterfall chart: visual timeline of child spans
  • Each span = horizontal bar showing start_offset and duration
  • Color by op category (db=yellow, http=blue, default=gray)
  • Hover to see span details (op, description, status, data)
• Span list: op, description, duration, status

Slowest Widget

• Top 5 slowest transactions (configurable)
• Shows: name, avg duration, count

API Endpoints Needed

• GET /api/projects/:id/transactions — list
• GET /api/projects/:id/transactions/:txn_id — detail with spans
• GET /api/projects/:id/transactions/slowest?limit=5 — widget data

Tasks

• Create +page.svelte for performance tab
• Transaction list component with sort/filter/pagination
• Transaction detail page with waterfall chart
• Span color coding by op category
• Slowest transactions widget
• Responsive layout (mobile-friendly)
• Empty state: "No transactions yet" with setup hint

Effort: ~4 hours