App Screens — from Ben's design to the SOT app

The journey a test walks: welcome + 3 explainers → profile (name / badge / tone) → create wizard (mode, identity, invite, battle days, 200 target, handicap review, exercises, season length, stake, power-up toggles, review) → group created with invite code + QR-style share → season live → Battle Home (adjusted hero, DZ ramp, close-call, live bombs) → Rep Steal (pure gain, asserted in state) → quick log with undo → keypad to 200 → first Daily Win (confetti, canvas PNG share card) → rival banks the day (streak) → deadline → failed days recorded → recap → season hub (1:1 standings, pot maths) → Surprise Bomb HIT and MISS → Lightning ×3 on a real log → second Daily Win → season ends → charity chooser ($38.00 after the disclosed $2.00 fee) → receipt → join flow as a second player → language + console gates.

Where the copy rules live: tone-aware lines (cheeky / neutral / corporate-safe) on every winner and failure moment; "reps" always, RUF never (enforced by the e2e's language gate).

Offline / reconnecting (#103 + #104 + #120). The app is local-first, so the realtime link is a simulated connection shim — demo-toggleable from Settings ("Simulate offline"), which makes the whole surface testable. Offline: an amber banner leads every screen ("you can keep logging"), submitted sets land in a queue (a badge counts them on the central LOG button), and the queue survives reloads. Back online: a visible reconnecting beat, then the queue replays through the real engine and a toast reports the outcome.

Sync conflict (#105) + duplicate warning (#119). Duplicate detection runs on every submit — same exercise + same reps (post-conversion) inside 60 seconds by the same player. Live, that's the "did that set count?" sheet: log it anyway (confirm) or undo back to the confirm step. On replay, a queued set that raced an already-landed log becomes a sync conflict: keep both sets or drop mine — resolved one by one, with the outcome toast tallying kept vs dropped.

Rest-day home (#29 + #101). When the next battle is more than three hours out, Battle Home becomes the rest-day state: "REST DAY", streak-safe messaging (the returning player's 🔥 streak named and kept safe), the next battle day + live countdown, the season's progress, and a season-hub jump. Rest days never touch streaks — stated, and true in the engine.

Battle complete but season live (#102). Two halves of one transition. Winner-known while the battle rolls on: a purple card names the Daily Win taker, pushes bank-your-own-day, and frames tomorrow (next battle, season points on the line). Battle ended while the season runs: the completed battle stays framed on the next battle's home — winner, banked/missed counts, tomorrow's angle, and the recap one tap away.

What. First paint: wordmark, tagline, the gold/lime theme toggle — the entry to onboarding.

How it works. Hash router (#/auth-008 style routes matching Ben's Figma frame names). The theme toggle flips data-theme="gold" — see Design System for what that means.

What. Three screens: pick a display name (avatar initials derive live), pick a fitness tier (couch / casual / fit / athlete — the handicap decision), done.

How it works. Draft state accumulates then persists the player object to rwf.figma.v1. The tier chosen here is the multiplier applied to every rep this player ever logs (see Game Rules).

What. Your battle cards: name, target, days, live standings snapshot, temporal state (which play day, when it closes). Empty state → create your first battle.

How it works. Renders from the matches array in state; each card recomputes its countdown chip via the daily layer, so the home screen is always temporal-state aware. The 6-player shot is the deliberate overflow/edge-case test from the design audit.

What. Name the battle, pick play days (week chips), pick a target preset.

How it works. Creates a match through the real engine: createMatch(config, players) with you + 3 demo mates (the demo roster), status open, and generates a CREW-XXXX code — the bridge token the bots use (link CREW-…).

What. The pre-match lobby: who's in, the crew code, how mates join from WhatsApp/Slack, and a START EARLY button.

How it works. The share card shows the exact bot grammar (link CREW-XXXX) — the app↔bot bridge is a shared code, not a shared login (state unification is tracked in Status → T5). START EARLY flips the match to live immediately.

What. The main screen: your progress ring (raw / target), the full leaderboard (adjusted score + verified %), the dual-clock countdown, comeback banner, danger-zone chrome, the big LOG button and the power-up button.

How it works. Leaderboard rows come from engine.standings(state) — the same function the bots use for their standings card. The ring tracks your raw reps against target; the board sorts by adjusted. Countdown + DZ chrome from the daily layer ticker (see Game Rules → danger zone).

What. The core loop surface: tap LOG → tap a rep count chip → tap the CTA. Done, mid-workout, with sweaty hands.

How it works. The sheet shows your live conversion ("×1.5" for couch — what those reps are worth) and the CTA text mirrors the selection ("LOG 20 PUSH-UPS"). Confirming chains the engine's tag functions — applyComeback then applyLightning — appends the entry, and if the raw total crosses the target the match closes right there. Camera verify is offered inline for supported exercises.

What. The full power-up journey: discover the button → open the arsenal → inspect a card → activate → feel it in toasts and on the live board.

How it works. All mechanics are specified in Game Rules → power-ups (×3/10min, 10% steal, shield-block, +30min freeze). The UI layer adds the feedback: steal shows a preview against the current leader before committing; a blocked steal explains that the shield was consumed and the card kept; lightning leaves a persistent countdown on the battle screen while the window is open.

What. The finale: final standings with medals, the closure bonus applied, the charity pot total, the winner's designation flow, and the one-tap REMATCH.

How it works. Result = finalStandings() (bonus applied, re-ranked) with confetti + count-up finale (motion budget: 1200ms — see Design). The pot panel shows the ledger total and, for the winner, the designation picker. Rematch creates a new match with the same roster and rules — "run it back" also exists as a bot command (rematch).

What. Profile: identity, tier (changeable between matches), match record. Season ladder: the 4-week points table with MVP counts and division movement.

How it works. The ladder is seasonLadder() over recorded match results (3/2/1 + MVP — see Game Rules → seasons). The profile doubles as the settings surface for HR straps (resting HR / age → Karvonen) in the first-party app build.

How it works. Every Figma frame was extracted with exact fills and bounding boxes from figma/assets/file.json and rebuilt as HTML/CSS (lane F4). The offline shot proves the service worker: with the network cut, the app still boots from cache — it's installable as a PWA (manifest.webmanifest + sw.js).

The full walk lives in apps/screenshots/figma-app/ (67 PNGs: auth-*, battle-*, create-*, corp-*, edge-*, home-*, integ-*, join-*, log-*, profile-*, pwr-*, result-*, set-*, social-*, wager-*, _offline-*) — the wiki ships the highlights.

How it works. Built from apps/web/src (bundled with Bun, deployed to /app), it shares the same engine port and adds the verifier surfaces: the camera sheet (MoveNet) and BLE HR pairing that feed verified:true + avgHrrPct entries — the wiki's Verification chapter documents those mechanics. The figma-app remains the design reference; this is the shipping surface.