(CODUX-69) Create rating badge UI

[numnx]

🧩 Task: Create rating badge UI

Automated task PR opened by Code UX for T03.

📋 Summary

Sprint: Sprint 180 · Self Reflection Rating · Task: T03

Expose each task agent's self-reflection as a persisted 5-star rating, surface the latest rating on Tasks and Live task cards, and show per-section ratings in an accessible hover/focus overlay.

🤖 Model & Provider

Provider	Codex CLI
Model	gpt-5.5

⏱️ Timing

Started	2026-07-07 12:52:51 UTC
Finished	2026-07-07 13:01:52 UTC
Duration	9m 1s

📊 Token Usage

Metric	Value
Input tokens	181,575
Cached input tokens	3,495,680
Output tokens	18,028
Total tokens	3,695,283
Invocations	1
Tool calls	59
Active time	8m 10s

Included usage estimate (subscription/local login): $3.20

✅ QA Review

⏳ QA review runs after this PR is opened. Check the task card in the dashboard for the outcome once it lands.

📝 Full Task Prompt

## Objective
Create the shared dashboard UI for rendering a compact 5-star self-reflection rating and a polished hover/focus overlay with each section rating.

## Scope
- Create `dashboard/src/v2/components/tasks/SelfReflectionRatingBadge.tsx`
- Create `dashboard/src/v2/lib/tasks/self-reflection-rating.ts`
- Add `tests/dashboard/v2/lib/tasks/self-reflection-rating.test.ts`
- Add `tests/dashboard/v2/components/tasks/self-reflection-rating-badge.test.tsx`
- Reuse positioning helpers from `dashboard/src/v2/lib/positioning/index.ts`

## Implementation Requirements
1. Implement pure helpers to normalize ratings, compute filled/half/empty star states, format labels, and sort section ratings consistently.
2. Implement `SelfReflectionRatingBadge` that accepts the T01 `TaskSelfReflectionRating` contract and renders nothing when rating data is absent.
3. Render an overall 5-star visual with accessible text such as `Self-reflection rating 4.2 out of 5`.
4. On hover and keyboard focus, show a viewport-positioned tooltip/overlay listing each section name, rating, stars, and optional note.
5. Use lucide-preact icons where practical, respect reduced-motion preferences, and keep the badge compact enough for dense task-card headers.

## Constraints
- Depends on T01's rating contract type but must not depend on TasksPage or LiveTaskCard implementation details.
- Do not install new UI libraries.
- Keep the overlay keyboard accessible through focus and `aria-describedby`.
- Do not use color alone to communicate rating; include screen-reader text and numeric labels.
- Avoid layout shift when the badge is present on narrow cards.

## Verification
- Run `pnpm run test:dashboard -- tests/dashboard/v2/lib/tasks/self-reflection-rating.test.ts tests/dashboard/v2/components/tasks/self-reflection-rating-badge.test.tsx`.
- Run `pnpm run lint`.
- Success means star states, clamped ratings, empty data behavior, hover/focus overlay content, and accessible labels are covered.

🌿 Branch Info

Base: feature/CODUX-180-self-reflection-rating
Head: task/feature-codux-180-self-reflection-rating-t03-codex-mrang0o7

---

🤖 Generated by Code UX