Townhouse

UI/UX prototype for the TOON Protocol operator console — a single place to run and monitor your Town relay, Mill swap peer, and DVM worker.

Based on epic-21. Design language: Vercel DESIGN.md (Geist + monochrome + workflow accents).

All data is mocked. Jonathan wires the backend.

Rooms

• / — Home: today's earnings, node health cards, settlement chains, live activity feed
• /town — Town relay: bandwidth, write-fee policy, recent paid events
• /mill — Mill swap: liquidity allocation, fee slider, swap volume, recent swaps
• /dvm — DVM worker: Arweave rate sheet, storage/revenue, job queue
• /wallet — Wallet: HD keys by node branch, balances, derivation tree, seed backup
• /setup — Setup wizard: 5-step first-run flow

Run locally

pnpm install
pnpm dev     # localhost:3000
pnpm build   # production build

Requires Node 20+ and pnpm (enable via corepack enable pnpm if needed).

Stack

• Next.js 16 (App Router) + React 19 + TypeScript
• Tailwind CSS 4 (CSS-based @theme config in globals.css)
• Geist font via the official geist npm package
• Zero runtime dependencies beyond React/Next — all icons and charts are inline SVG

Design tokens

Vercel's shadow-as-border philosophy drives everything. See globals.css:

• --shadow-ring — 0 0 0 1px rgba(0,0,0,0.08) replaces traditional CSS borders
• --shadow-card — ring + 2px ambient
• --shadow-card-hover — ring + 2px + 8px drop + inner #fafafa glow

Workflow accent colors map to node types:

Node	Color	Hex
Town	Develop Blue	#0a72ef
Mill	Preview Pink	#de1d8d
DVM	Ship Red	#ff5b4f
ATOR	Console Purple	#7928ca

Structure

app/
  (console)/       # shell layout: sidebar + topbar
    layout.tsx
    page.tsx       # Home
    town/page.tsx
    mill/page.tsx
    dvm/page.tsx
    wallet/page.tsx
  setup/page.tsx   # wizard (no shell)
  layout.tsx       # root html/body + Geist font
  globals.css      # Vercel design tokens

components/
  shell/           # Sidebar, TopBar
  ui/              # Card, Pill, Button, MetricStat, Sparkline, DataTable, NodeIcon, Slider
  room/            # PageHeader, NodeHealthCard, ChainsStrip, ActivityFeed

lib/
  nodes.ts         # Node type registry (name, color, route)
  types.ts         # Data model interfaces
  mock.ts          # Fake data + currency formatter