Skip to content

frontend: approval prediction — badge + detail panel + i18n #654

Description

@babltiga

Part of #645 (approval-outcome prediction epic — read it first for the big picture).

Goal

Show the prediction to reviewers: a compact badge on review-queue rows and a small panel on the query detail page. Neutral, advisory wording only.

Depends on the backend read-side sub-issue.

Steps

  1. Typesfrontend/src/types/api.ts: ApprovalPredictionDetail interface (mirror the backend response: id, probability, skipped, skipped_reason, failed, created_at); extend the query-detail type and the pending-review item type (approval_probability?: number | null). frontend/src/types/ws.ts: add the query.prediction_complete event type.
  2. WS invalidationfrontend/src/realtime/websocketManager.ts: on query.prediction_complete, invalidate ['queries', queryId] and ['reviews', 'queue'] (follow the query.estimate_complete handler).
  3. frontend/src/components/review/ApprovalPredictionBadge.tsx — compact display for queue rows: probability as a percentage with an info Tooltip. States: value present → "78%" badge; skipped → muted "—" with the reason in the tooltip ("Not enough review history yet"); failed/absent → render nothing. Use Ant Design components and the existing badge conventions in components/common/ — no hardcoded hex colors (theme tokens only), and don't reuse risk colors: this is not a risk level.
  4. Query detail — on QueryDetailPage, render a small panel/stat next to CostEstimatePanel with the same loading/absent fallbacks that panel uses.
  5. Wording (important): strictly neutral — "Historical approval likelihood: 78%", tooltip: "Statistical estimate based on this organization's past review decisions. Advisory only — it never approves or rejects anything." Never phrase it as a recommendation to approve/reject.
  6. i18n — all strings via t(): add approval_prediction.* keys to frontend/src/locales/en.json and every other registered locale file (the locale-parity test fails CI otherwise).

Acceptance criteria

  • ApprovalPredictionBadge.test.tsx (React Testing Library, query by role/label): renders percentage, skipped tooltip reason, and the absent/failed → nothing branch.
  • Extended QueryDetailPage / review-queue page tests for the new panel/column.
  • npm run lint && npm run typecheck && npm run test:coverage && npm run build all green (locale parity included).
  • E2E: no new Playwright spec for v1 — the model needs 50+ decided queries to activate, so only the cold-start "skipped" state would be observable; per the CLAUDE.md e2e rule, state this explicitly in the PR description. Ensure no existing spec's selectors break.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions