feat(web): isolate pairing views and add Storybook previews

[Asuka109]

What this PR does

Pairing views are coupled to request handling, which makes their states difficult to preview and refine independently. This PR extracts controlled views and adds Storybook previews with a global English/Chinese switch.

Request cards keep actions on the right at wider widths and place them below the identity on narrow cards. Long IDs use middle truncation with a full-value tooltip. Resolved statuses replace the actions, with the actor and timestamp in a tooltip. The requests section adds explanatory copy and a responsive loading skeleton.

This draft is stacked on #298. Its base is codex/issue-181-pairing-rebuild, so the review covers only the component extraction and presentation changes. Merge #298 first, then update this PR's base and branch as needed.

Design & Invariants

• The container owns queries, mutations, clipboard access, and notifications. Views receive data and callbacks while retaining translation and shared UI primitives.
• Approval, rejection, expiration, and verification-code behavior remain consistent with the base branch.
• Storybook previews exercise the views without backend services. See the Storybook guide.

Test plan

• pnpm typecheck
• pnpm test:unit
• pnpm build:storybook
• Scoped Biome checks and git diff --check
• 11 Storybook browser checks using host Chrome, including interactions, responsive layout, tooltips, locale changes, and reduced motion
• Visual inspection of desktop and narrow layouts, including expanded verification codes and loading skeletons
• pnpm dev:all and container startup verification: Docker is unavailable on this host. Host checks used Node 24.20.0 and pnpm 11.6.0, outside the Nix devShell.

[zoolsher]

🔁 This review has been superseded. See the latest review.

[zoolsher]

Code Review: ✅ APPROVE

This PR moves pairing rendering into controlled view components, retains queries, mutations, clipboard access, notifications, and routing in the container, and adds isolated Storybook states plus locale switching. The dependency direction and state modeling are appropriate, and no security, correctness, or maintainability regressions were found.

I verified all changed files and traced the public components through Activity, Connections, development fixtures, and tests. Web typechecking and all nine targeted unit tests passed locally; all ten new pairing Playwright checks passed locally, and the PR’s complete CI suite is green.

Verdict: APPROVE — The extraction preserves pairing behavior while cleanly separating service-owned state from controlled presentation components, with comprehensive passing coverage.

No issues found. Code looks good!

---

Automated review by RomeOS Code Review · commit 168f689