feat(frontend): Porcelain dashboard with synced light and dark mode

[OfficialAbhinavSingh]

Summary

Adds the frontend for the dashboard in frontend/, built from the two approved Figma files: Porcelain (light) and Porcelain Night (dark). Frontend only. Every screen reads from src/mock/data.ts; there is no backend call anywhere.

• 9 screens: Overview, Run workspace, New run, Agents, Work proof, Leaderboard, Integrations, Wallet and identity, Sign in.
• Light and dark mode with a toggle in the nav (and on sign in).
  • The first visit follows the OS.
  • A choice is saved. Picking the OS theme again clears it, so the app goes back to following the OS.
  • No flash on load: a small inline script sets the theme before the first paint.
  • Open tabs stay in sync, and an OS change applies live while nothing is saved.
  • The new theme grows in a circle from the toggle. Theme changes from another tab or the OS cross-fade. Reduced motion switches instantly.
• Every control does something real on demo data:
  • Run rows open their own run, and unknown run or proof ids are a 404.
  • The leaderboard range switches the ranking.
  • Approvals count down, expire, and keep the header and nav badge in sync.
  • Agent search, category, verified filter and sort all work.
  • Sign in requires an email.
• Buttons that need a backend (Fund wallet, Create agent and so on) say so instead of doing nothing.
• Code quality checks:
  • ESLint (strict type-checked, React hooks, accessibility), Prettier, and noUncheckedIndexedAccess.
  • A CI workflow runs lint, format, build and the e2e suite on every PR that touches frontend/.
• Responsive. 1440 x 900 matches the frames. Tablet and phone widths have no horizontal scroll.

The designs predate the current paper, so some copy differs on purpose:

Design	Current
Monad testnet, MON	L2 testnet, ETH
AgentPassport, ProofOfWork, Reputation	Identity, ReceiptRegistry, ReputationAnchor
Reputation score	Value density
Proof of work badge	Verified receipts

Stack: Vite, React 19, React Router, TypeScript (strict), plain CSS on design tokens, Playwright.

Part of #2.

Type of change

• paper — correction, derivation, or new section in the research
• docs — requirements, README, or other prose
• feat — new functionality
• fix — bug fix
• contracts — Solidity
• chore — dependencies, tooling, CI

What I verified

• Verified:
  • Each screen was screenshotted at 1440 x 900 in both themes and pixel-diffed against the HTML source the Figma frames were captured from.
  • The only differences left are the added theme toggle, the copy in the table above, and the agent card order: "Sort by success" now really sorts, while the design frame lists the cards in a different order.
  • npm ci && npm run build passes from a fresh clone.
  • The full CI sequence passes under Node 22 on a clean copy: lint, format check, build, and 45 Playwright tests (stable over 5 runs). The tests cover:
    • first paint follows the OS before React mounts
    • a saved choice beats the OS
    • the theme persists across reloads
    • a switch in one tab reaches the other
    • the OS is followed live until a choice is saved
    • reduced motion skips the transition
    • every route renders in both themes with the right tab active
    • no stale v0.2 terms appear
    • arrow keys move the segmented controls
    • buttons with no backend say so instead of doing nothing
    • approvals updating the header and nav, and expiring on the clock
    • each run row opening its own run, and 404s for unknown ids
    • the leaderboard range, and agent sort, search and filters
    • sign in requiring an email
    • no page scrolling sideways at 320 and 390 px, and integration cards keeping their contents inside
  • No horizontal overflow at 1024, 390 and 320 px on any route.
• Not verified:
  • Safari and Firefox. Tests ran in Chrome only, and Firefox has no View Transitions, so it gets the cross-fade path, untested.
  • Real screen readers (roles and labels are set, but no manual pass).
  • Anything against a backend, because there isn't one.
  • Figma itself: I compared against the HTML the frames were generated from, not an export from the Figma file.

Checklist

• One concern per PR — this change does one thing
• No secrets committed (no private keys, API keys, .env files, mnemonics)
• Claims in the diff are supported by something a reviewer can check

Evidence

Theme toggle and navigation:

The reveal, frame by frame (dark to light, growing from the toggle):

Design (left) and build (right):

Every screen, light and dark:

Overview
Run workspace
Agents
Work proof
Leaderboard
New run
Integrations
Wallet and identity
Sign in

Phone-width fixes in the last commit (0739be7): on a phone ", 17m ago" wraps with its block number instead of on a line of its own (desktop is unchanged from the design), integration cards stack one per row, the wallet lag chart fills its card, long diff lines scroll, and the run graph's zoom control no longer covers a node.

To run it: cd frontend && npm install && npm run dev, then npm run test:e2e.

Breaking changes / follow-ups

• None breaking. This only adds frontend/.
• Frontend #1 also adds a frontend/ (the landing page). Whichever merges second will need to fold the two apps together.
• Follow-up: wire screens to the real API once it exists, and replace the mock numbers.
• The design has no runs or proofs list screens, so those tabs open the demo run and proof directly.

[OfficialAbhinavSingh]

@Viscous106 @Divii2205 @Aspirant200715 review this once i have attached the images of how it will look on the localhost. Also if any changes are needed do comment that out/

[Viscous106]

LGTM!!

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.