Rig — Frontend Design Mockup

Screen 1 — The Board (Mobile)

rig set up vite + react + tailwind project structure with routing opus-4 2m

expense-tracker add dark mode toggle to settings page with system preference detection sonnet-4 14m

blog fix RSS feed generation — dates are wrong and missing descriptions sonnet-4 1h

linkrunner implement webhook retry logic with exponential backoff opus-4 3h

rig design the websocket protocol for proxying pi rpc commands opus-4 5h

upsc-learning build quiz mode with spaced repetition algorithm gemini-3 1d

expense-tracker add CSV export with date range filter sonnet-4 1d

blog migrate from gatsby to astro — keep all content and URLs opus-4 2d

The Board is the home screen. All sessions across all projects, newest first. Active sessions rise to the top with an amber pulse. Project badges use deterministic colors from path hash — you learn to recognize projects by color. No project-first navigation; projects are filters, sessions are the primary unit.

Screen 2 — Session Log (Mobile)

← rig ◆ high opus-4 ▾

today 15:02

set up vite + react + tailwind project structure with routing

15:02:14 read package.json

15:02:15 bash npm create vite@latest frontend -- --template react-ts

15:02:22 bash cd frontend && npm install

15:02:31 bash npm install -D tailwindcss @tailwindcss/vite

I've initialized the Vite + React + TypeScript project and installed Tailwind CSS. Now I'll configure Tailwind and set up the routing with react-router-dom.

15:02:33 bash cd frontend && npm install react-router-dom

15:02:38 write frontend/src/index.css new

15:02:39 edit frontend/vite.config.ts +8 -2

15:02:40 write frontend/src/App.tsx new

15:02:41 write frontend/src/pages/Home.tsx new

15:02:42 write frontend/src/pages/About.tsx new

Project structure is ready. I've configured Tailwind with the Vite plugin, set up React Router with a Home and About page, and the dev server is ready to run with npm run dev.

Files touched 6

EDIT frontend/vite.config.ts

NEW frontend/src/index.css

NEW frontend/src/App.tsx

NEW frontend/src/pages/Home.tsx

NEW frontend/src/pages/About.tsx

follow up...

Not chat bubbles — a work log. User directives get a left amber border. Tool calls are first-class log lines: timestamp, tool name (color-coded), path, and diff stats. Agent prose flows between tool call clusters. The files panel collapses at the bottom — tap to expand/collapse.

Screen 3 — New Dispatch (Bottom Sheet)

rigset up vite + react projectopus-42m

expense-trackeradd dark mode togglesonnet-414m

New Dispatch

Project

~/Projects/personal/rig ▾

Directive

add websocket handler that spawns pi rpc processes and proxies messages

opus-4 · high

<5 seconds from tap to sent. Bottom sheet slides up over the board. Project selector defaults to your most recent. Model defaults to settings.json default. Type your directive, hit Dispatch. The sheet can also be triggered by the "+" button or a keyboard shortcut on desktop.

Screen 4 — Desktop Layout (Master-Detail)

rig.tail1abc2.ts.net

rig set up vite + react + tailwind opus-4 2m

expense-tracker add dark mode toggle sonnet-4 14m

blog fix RSS feed generation sonnet-4 1h

linkrunner webhook retry logic opus-4 3h

rig websocket protocol design opus-4 5h

upsc quiz mode + spaced repetition gemini-3 1d

rig set up vite + react + tailwind ◆ high opus-4 ▾

today 15:02

set up vite + react + tailwind project structure with routing

15:02:14readpackage.json

15:02:15bashnpm create vite@latest frontend

15:02:22bashcd frontend && npm install

15:02:31bashnpm install -D tailwindcss

Initialized Vite + React + TypeScript. Installing Tailwind CSS and setting up routing.

15:02:33bashnpm install react-router-dom

15:02:38writefrontend/src/index.cssnew

15:02:39editfrontend/vite.config.ts+8 -2

15:02:40writefrontend/src/App.tsxnew

Project structure is ready with Tailwind configured via the Vite plugin and React Router set up with Home and About pages.

Files 6

EDITvite.config.ts

NEWsrc/index.css

NEWsrc/App.tsx

NEWsrc/pages/Home.tsx

NEWsrc/pages/About.tsx

READpackage.json

follow up...

Desktop: master-detail. Board on the left (~400px), session log on the right. Files panel docks as a side column on the right edge. No three-column project hierarchy — the board IS the navigation. The selected session gets the amber highlight.

Design Rationale

Not a chatbot

Sessions are work orders, not conversations. The log format makes tool calls scannable and gives each session its rhythm. You see what the agent DID, not just what it SAID.

Flat board, not nested nav

Projects → Sessions → Chat is three clicks to see anything. The board shows everything in one scroll. Projects are color-coded badges, not navigation levels. Your brain pattern-matches faster than it reads.

Warm industrial palette

Amber on charcoal. Not tech-blue, not startup-purple. "Rig" is equipment — the colors should feel like brass fittings on dark steel. Warm, competent, personal.

Dispatch in <5 seconds

The whole point is kicking off work from your phone. The new dispatch sheet is one tap, one dropdown, one text field, one button. Project defaults to most recent. Model defaults to settings.json.

Rig Frontend