feat(queue-tracker): mirror GitHub Primer Toast shell

[fathiraz]

Summary

• Repaint the live queue tracker in src/features/queue-tracker.tsx so each ProcessCard mirrors GitHub's native Primer .Toast bulk-update tracker (shell, padding, header composition, motion, ARIA)
• Factor the shared Toast shell into a reusable primerCss.toastShell preset in src/lib/primer-css-helper.ts so future toast-like surfaces stay DRY
• Add src/features/__tests__/queue-tracker.test.tsx covering the new title formatter, ARIA attributes, data-testid count, and done-state fraction hide

Changes

Queue tracker (src/features/queue-tracker.tsx)

• New local helper formatTrackerTitle(entry) producing Label · N items with U+00B7 separator (Label · 1 item singular, plain Label when total === 0)
• Outer Box now uses primerCss.toastShell({...}): canvas.overlay bg, border.default 1px border, borderRadius: 2, no boxShadow, tightened to 12px padding (was Primer p: 3 = 16px)
• Header row: title and ${completed}/${total} fraction both render in fontWeight: 'semibold'; × dismiss button stays at the end of the outer flex row
• Entry animation: rgp-tracker-in keyframe (slide-up + fade, 180ms cubic-bezier(0.4, 0, 0.2, 1)) co-located in the outer sx with a @media (prefers-reduced-motion: reduce) guard. No exit animation
• Each card gets role="status", aria-live="polite", and data-testid="rgp-queue-tracker-card"
• Behaviour preserved: Primer Spinner / CheckIcon icon column, linear ProgressBar with status-driven bg colour, rate-limit Flash countdown, failed-items expander (Retry Failed, Copy Error Log), pulsing left-accent status footer, bottom-right placement, 380px width

Primer CSS helper (src/lib/primer-css-helper.ts)

• New toastShell preset exposing the shared Toast tokens through makePreset, callable as primerCss.toastShell({...overrides})

Tests (src/features/__tests__/queue-tracker.test.tsx)

• Title formatter: total === 0 → plain label, total === 1 → singular noun, total > 1 → plural noun, separator is U+00B7
• Rendered card carries role="status" and aria-live="polite"
• N rendered entries yield N [data-testid="rgp-queue-tracker-card"] nodes
• entry.done === true hides the n/total fraction; entry.done === false shows it

OpenSpec change

• openspec/changes/queue-tracker-github-toast-parity/ proposal, design, spec, and tasks

Test Plan

• pnpm install completes without errors
• pnpm test — all suites pass (new queue-tracker.test.tsx included)
• pnpm typecheck reports zero TS errors
• pnpm build:chrome completes without errors
• pnpm build:firefox completes without errors
• pnpm build:edge completes without errors
• Manual smoke: trigger a bulk update on a GitHub Projects table — confirm the tracker shell, header (Label · N items), entry animation, and accessibility attributes match the GitHub .Toast reference
• Verify prefers-reduced-motion: reduce disables the entry animation

---

Summary by cubic

Repaints the queue tracker to match GitHub’s Primer Toast and adds a reusable primerCss.toastShell. Improves accessibility and motion while keeping behavior unchanged.

• Refactors
  • Recompose ProcessCard with primerCss.toastShell (12px padding, overlay bg, 1px border, radius 2, no shadow).
  • Add formatTrackerTitle for "Label · N items" (U+00B7); semibold header; hide n/total when done.
  • Add slide-up + fade-in entry animation (~180ms) with a reduced-motion guard.
  • Set role="status", aria-live="polite", and data-testid="rgp-queue-tracker-card".
  • Add tests for title formatting, ARIA attributes, test id count, and done-state fraction.

^{Written for commit 02b4143. Summary will update on new commits.}

[github-actions]

Cursor auto review

No actionable issues found on changed lines.

No actionable issues found.

Generated automatically when this PR was submitted using Cursor CLI with --model auto.

[cubic-dev-ai]

No issues found across 8 files

_{Re-trigger cubic}