Render reflection rating widget (codex)

[numnx]

🧩 Task: Render reflection rating widget

Automated task PR opened by Code UX for T03.

📋 Summary

Sprint: Sprint 163 · Bugfixes · Task: T03

Fix the Memory page header, self-reflection sprint-start gating and invocation display, and sprint completion PR timing while keeping tests and docs current.

🤖 Model & Provider

Provider	Codex CLI
Model	gpt-5.5

⏱️ Timing

Started	2026-07-07 07:24:35 UTC
Finished	2026-07-07 07:33:47 UTC
Duration	9m 12s

📊 Token Usage

Metric	Value
Input tokens	229,099
Cached input tokens	2,350,720
Output tokens	15,428
Total tokens	2,595,247
Invocations	1
Tool calls	48
Active time	8m 16s

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

✅ 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
Add the CODUXCODUX-93 dashboard widget for self-reflection invocation messages so planning and QA reflection results show star ratings, thresholds, pass/fail state, and detail text inside the invocation pane.

## Scope
- `dashboard/src/v2/components/chat/InvocationMessageBubble.tsx`
- `dashboard/src/v2/components/chat/widgets/SelfReflectionWidget.tsx` or an equivalent new widget file under `dashboard/src/v2/components/chat/widgets/`
- `dashboard/src/v2/lib/chat-widget-view-models.ts`
- `tests/dashboard/lib/chat-widget-view-models.test.ts`
- `tests/dashboard/v2/chat-message-bubbles.test.tsx`
- `docs/dashboard/design-system-chat.md`
- `docs/dashboard/design-system-live-runtime.md` if invocation-pane behavior is documented there
- `docs-web/user/dashboard/chat.md`

## Implementation Requirements
1. Add a view-model parser for `ExecutionInvocationMessageRecord.metadata.reflection` that normalizes event, purpose, attempt, criteria, scores, threshold, passed state, final decision, rationale, improvement instructions, and error message without throwing on partial legacy metadata.
2. Add a `SelfReflectionWidget` rendered by `InvocationMessageBubble` before the generic system-message fallback when `message.metadata?.reflection` is present.
3. Render each criterion with a 5-star visual rating derived from the 1-10 score, a numeric score label, threshold/pass state, criterion label, rationale, and improvement details when present; include a summary header for planning vs QA reflection and the final decision.
4. Keep the widget accessible: use semantic text labels for star ratings, avoid color-only pass/fail signaling, keep text wrapping inside the message bubble, and respect reduced-motion patterns already used by chat widgets.
5. Add tests for passing, failing/improvement-requested, and error reflection metadata, including accessible labels and visible rationale/details.
6. Update dashboard and public chat/invocation docs to describe the self-reflection widget.

## Constraints
- Do not change backend metadata persistence in this task; consume the existing `metadata.reflection` contract and tolerate any additional fields added by backend work.
- Do not alter generic reasoning, tool-call, or planning widgets except for the minimal dispatch needed in `InvocationMessageBubble`.
- Do not expose raw provider prompts or credentials in the widget.
- Do not add external UI or chart libraries.

## Verification
- Run `pnpm exec vitest run tests/dashboard/lib/chat-widget-view-models.test.ts tests/dashboard/v2/chat-message-bubbles.test.tsx`.
- Run `pnpm run typecheck:dashboard`.
- Success means reflection messages render as a dedicated rich widget with 5-star ratings and details instead of plain system text.

🌿 Branch Info

Base: feature/CODUX-163-bugfixes
Head: task/feature-codux-163-bugfixes-t03-codex-mrabpu3w

---

🤖 Generated by Code UX