---
estimated_steps: 10
estimated_files: 2
skills_used: []
---

# T02: Replace 'views' stat with topic-category breakdown on creator detail page

Replace the meaningless '0 views' display on the creator detail page with a compact topic-category breakdown derived from the already-fetched techniques array.

Steps:
1. In `frontend/src/pages/CreatorDetail.tsx`, find the stats span showing `{creator.view_count.toLocaleString()} views` (around line 110)
2. Compute a topic category map from the techniques array: `const topicCounts = techniques.reduce((acc, t) => { const cat = t.topic_category || 'Uncategorized'; acc[cat] = (acc[cat] || 0) + 1; return acc; }, {} as Record<string, number>);`
3. Replace the views span with the category breakdown. Format: pills or dot-separated like "Mixing: 4 · Synthesis: 2". If techniques array is empty, show nothing or a subtle 'No techniques' note.
4. In `frontend/src/App.css`, add minimal styling for the topic breakdown display if needed — the existing `.creator-detail__stats` flex layout should accommodate pills or inline text.
5. Handle edge case: if techniques haven't loaded yet (loading state), don't show stale '0 views' — wait for techniques or show nothing.
6. Run `npx tsc --noEmit` and `npm run build`
7. Rebuild web container on ub01

This task is independent of T01 — all data needed (techniques with topic_category) is already fetched by the existing `fetchTechniques` call.

## Inputs

- ``frontend/src/pages/CreatorDetail.tsx` — creator detail page with view_count display to replace`
- ``frontend/src/App.css` — existing styles for creator detail stats`

## Expected Output

- ``frontend/src/pages/CreatorDetail.tsx` — shows topic-category breakdown instead of views`
- ``frontend/src/App.css` — any additional styling for topic breakdown display`

## Verification

cd frontend && npx tsc --noEmit && npm run build && grep -q 'topic' frontend/src/pages/CreatorDetail.tsx && ! grep -q 'view_count' frontend/src/pages/CreatorDetail.tsx
