[blove]

Summary

• Wraps apps/bench in <Nav active="bench"> + <Footer> from @pretable/ui.
• Rewrites apps/bench/src/app.css against @pretable/ui design tokens using Tailwind v4 @theme inline — same pattern shipped for playground in direction A (PR feat(playground): pitch landing (direction A) #12, merged as c29da2b).
• Replaces the dark-gradient body + IBM Plex + orange/blue hardcoded hex palette with cream chrome + Fraunces-display headlines + token-driven colors throughout.
• Preserves the cream-bracket-dark rhythm from visual-system-design §2 — .viewport-card and .result-json stay on the terminal (--pt-grid-*) palette because they render structured/grid data.
• Adds @pretable/ui to prepare:deps so cold-checkout dev/build/test/typecheck resolve the CSS imports.
• vite.config.ts preserves the vitest test block (bench merges Vite + Vitest config in one file) while adding the tailwindcss() plugin and VITE_APP_VERSION define — parity with playground where possible, divergent where bench's config structure required it.

Direction B of the four-direction website initiative. Scope is narrow per spec — this PR wires the shared chrome only and does NOT touch bench-app.tsx, bench-runtime.ts, query-state.ts, or any adapter file. The visual-system-design §6 adversarial-redesign project (4-column comparison grid + scorecard + CI history + methodology) is deliberately deferred.

No new unit tests — Nav/Footer component contracts are already covered by playground's app.test.tsx from direction A.

Full spec: docs/superpowers/specs/2026-04-21-bench-ui-integration-design.md
Plan: docs/superpowers/plans/2026-04-21-bench-ui-integration.md

Known follow-ups

• Visual-system-design §6 adversarial redesign — deliberately out of scope; tracked for a future brainstorm cycle.
• Visual walkthrough in a real browser is pending human sign-off before merge. Automated checks (tests, typecheck, lint, format, build) all pass; live rendering of the cream palette, Fraunces loading, and vendor-CSS interaction (Grid Alpha, GridGamma X) needs eyeballing.
• ciStatus in <Footer> remains hardcoded "green" — same pattern as playground, same TODO comment. Real wiring is a separate future task.
• Vendor CSS interaction — Grid Alpha and GridGamma X ship their own stylesheets loaded inside their adapter surfaces. If cosmetic drift surfaces during browser review (heading fonts, hover states, etc.), the adapter-scoping fallback described in the plan (wrap adapter renders in .bench-adapter-* scope divs with isolation: isolate) is a cheap follow-up.

Test plan

• pnpm test — 42/42 bench tests pass; full monorepo suite green
• pnpm typecheck — clean
• pnpm lint — clean
• pnpm format — clean
• pnpm build — bench builds in ~650ms; Fraunces bundled correctly
• Manual: pnpm --filter @pretable/app-bench dev — verify bench renders with shared Nav + Footer, scenario panel + preview panel render against cream-hi, .viewport-card stays dark, run toolbar button is solid ink, result JSON renders mono on grid-bg, all four adapter renders remain functional