---
id: S03
parent: M008
milestone: M008
provides:
  - key_moment_count field on TechniquePageRead schema and API response
  - Topic tag pills on homepage cards
  - Topic-category breakdown on creator detail pages
requires:
  []
affects:
  []
key_files:
  - backend/schemas.py
  - backend/routers/techniques.py
  - frontend/src/api/public-client.ts
  - frontend/src/pages/Home.tsx
  - frontend/src/pages/CreatorDetail.tsx
  - frontend/src/App.css
key_decisions:
  - Used correlated COUNT subquery for key_moment_count matching creators.py pattern
  - Computed topic counts client-side from existing techniques array rather than adding a new API endpoint
  - Sorted categories by count descending for readability
patterns_established:
  - Correlated COUNT subquery pattern for adding aggregate counts to list endpoints without schema migration
observability_surfaces:
  - none
drill_down_paths:
  - .gsd/milestones/M008/slices/S03/tasks/T01-SUMMARY.md
  - .gsd/milestones/M008/slices/S03/tasks/T02-SUMMARY.md
duration: ""
verification_result: passed
completed_at: 2026-03-31T05:27:37.324Z
blocker_discovered: false
---

# S03: Homepage Cards & Creator Metric Polish

**Homepage technique cards now show topic tag pills and key moment counts; creator detail pages show technique-count-by-topic instead of meaningless '0 views'.**

## What Happened

Two targeted UI credibility fixes, one with a backend component:

**T01 — Homepage card enrichment (backend + frontend):** Added `key_moment_count` field to `TechniquePageRead` schema and populated it via a correlated COUNT subquery in `list_techniques`, matching the existing pattern from `creators.py`. Frontend renders `topic_tags` as colored pill badges and `key_moment_count` as an inline label on homepage "Recently Added" cards. API verification confirmed real counts (4, 4, 2) returning for technique items.

**T02 — Creator detail metric replacement (frontend only):** Removed the `view_count` display (always showed 0) from `CreatorDetail.tsx` and replaced it with a computed topic-category breakdown derived from the already-fetched techniques array. Categories are sorted by count descending and rendered inline with dot separators. No new API endpoint needed — all data was already available.

Both changes deployed to ub01:8096 and verified via API curl, TypeScript compilation, production build, and browser inspection.

## Verification

All slice-level verifications passed:
1. API: `curl http://ub01:8096/api/v1/techniques?limit=3` returns items with `key_moment_count` field (values: 4, 4, 2)
2. Frontend: `npx tsc --noEmit` passes, `npm run build` succeeds (787ms)
3. CreatorDetail: grep confirms `topic_category` usage present and `view_count` reference removed

## Requirements Advanced

- R005 — Homepage cards now show richer metadata (topic tags, moment counts) improving search-to-content navigation
- R007 — Creator detail pages show meaningful technique-by-topic metrics instead of '0 views'

## Requirements Validated

None.

## New Requirements Surfaced

None.

## Requirements Invalidated or Re-scoped

None.

## Deviations

T01 used a separate base_stmt for the total count query instead of stmt.subquery() to handle join filters cleanly — minor structural deviation, same result. Docker service name is chrysopedia-web not chrysopedia-web-8096 as stated in the plan.

## Known Limitations

Topic categories from pipeline stage 4 have inconsistent casing ('Sound design' vs 'Sound Design'), causing them to appear as separate entries in the creator detail breakdown. This is an upstream data quality issue, not a UI bug.

## Follow-ups

Normalize topic category casing in pipeline stage 4 or add a post-processing normalization step.

## Files Created/Modified

- `backend/schemas.py` — Added key_moment_count: int = 0 to TechniquePageRead
- `backend/routers/techniques.py` — Added correlated COUNT subquery for key moments in list_techniques
- `frontend/src/api/public-client.ts` — Added key_moment_count to TechniqueListItem interface
- `frontend/src/pages/Home.tsx` — Rendered topic_tags as pill badges and key_moment_count on homepage cards
- `frontend/src/pages/CreatorDetail.tsx` — Replaced view_count with topic-category breakdown from techniques array
- `frontend/src/App.css` — Added .recent-card__moments styling for moment count display
