feat(web): React UI v2.0 — Phase 1 Tasks 16-20 (5 component primitives)

[aksOps]

Summary

Phase 1 Batch B of React UI v2.0 — five component primitives, dispatched in parallel via subagent-driven-development. Completes Phase 1 of the React UI v2.0 plan (modulo the deferred ESLint config, see Out of Scope).

• Task 16 — <Icon> + inline SVG sprite (13 icons: check, x, plus, stop, retry, search, alert, info, arrow-right, back, list, network, message). currentColor inheritance, 12/14/16 px sizes.
• Task 17 — <Button> with primary/secondary/ghost variants + sm size. CSS-var-driven styling, sharp corners, ink-on-bg primary.
• Task 18 — <Pill> (status: running/paused/error/resolved/neutral) + <Tag> (metadata: default/mono). SHORT_CAPS pill labels via text-transform: uppercase.
• Task 19 — <Input>, <Textarea>, <Select> form primitives. Shared 28 px height (22 sm), var(--hair) border, var(--acc-soft) 1 px focus-ring. <Select> uses native <select> since @radix-ui/react-select isn't in deps — Radix Select can be swapped in later as a non-breaking enhancement.
• Task 20 — <Modal> (Radix Dialog wrapper). Centered, 480-720 px width, 52 px header / scrollable body / optional preview band / 52 px footer. 180 ms scale 0.96→1 + fade in, 140 ms exit. Esc dismisses (browser standard). prefers-reduced-motion short-circuits to 0.01 ms.

Validation

• cd web && npm install → 0 vulnerabilities
• npm run typecheck → exit 0
• npx vitest run → 30 passed / 0 failed (Icon 2 · Button 5 · Pill 7 · Tag 3 · Input 4 · Textarea 2 · Select 2 · Modal 4 · smoke 1)
• npm run build → clean, 8.05 kB CSS, 194 kB JS

Nothing touches src/runtime/ — no dist/app.py regen needed.

Out of scope (deferred to Task 20b)

ESLint config (web/eslint.config.ts) — requires adding @eslint/js, typescript-eslint, eslint-plugin-react-hooks devDependencies which were not in package.json. Will land alongside the Phase 8 build/deploy/CI work where dep additions are batched.

@radix-ui/react-select upgrade for <Select> — current native <select> works fine; Radix swap is a separate task if needed for styling parity.

Test plan

• Vitest: 30/30 pass
• Typecheck: exit 0
• Build: clean
• Pytest backend stays green (no backend changes)
• CI: lint + type + test + sonar + bundle + skill-lint
• CI: SonarCloud quality gate

🤖 Generated with Claude Code

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud