Reopen
the arcade

Get the lights on: the machine, the fleet, and the building's first real duty.

• M0.1WRITER Flip the main breaker~6h

  Install Xubuntu 24.04 LTS on the Latitude and make the shell yours: terminal fluency, apt, permissions, aliases, git configured, VS Code and nano ready.

  Deliverable — a verified, updated, configured Linux machine humming in the back office.

  Briefing

  The play

  The install walkthrough already exists, in full detail, on the Purist page: follow Phase 0 there, sections 0.A through 0.E (installer USB → install → terminal → git and SSH keys → editor). It's the one part of the classic path that isn't course-shaped; it's just correct. Do all of it, then come back for the back-office twist.

  The back-office twist (this path only)

  This machine is about to be an always-on appliance, not a lap warmer. Two settings desktop courses never mention:

  # 1) Closing the lid must not suspend the building.
  sudo nano /etc/systemd/logind.conf     # set: HandleLidSwitch=ignore
  sudo systemctl restart systemd-logind
  
  # 2) Give the arcade a fixed address. In your router's admin page,
  #    add a DHCP reservation for the Latitude's MAC address
  #    (find it with: ip addr). A building that wanders is hard to run.

  Hardware notes for always-on duty: prefer Ethernet over Wi-Fi (and if Wi-Fi is unavoidable, check the card with lspci -nnk | grep -iA3 net — Intel variants behave; the Qualcomm QCA61x4A has flaky-Linux reports). The 3490 takes two SODIMMs, 32 GB max: a cheap 2×8 GB kit is the best money this building could spend, though the whole course is planned to fit in 8 GB.

  Failure modes that matter

  • No backup before the wipe. The installer erases the whole disk. Purist task p0-1 is not optional.
  • Skipping the checksum. Verifying the ISO is the habit, not the outcome.
  • The VM temptation. On 8 GB, metal or nothing — a VM here would strangle Docker later.

  Directing your agent

  No agent this mission; the hands are yours. But keep a file of every moment that confused you. In M1.4 you'll hand that list to Claude Code and interrogate its explanations — a perfect first review exercise.

• M0.2WRITER Run wire to HQ~5h

  Keyed SSH in both directions between HQ (the rig) and the arcade, host aliases, files moved. Two machines become one operation.

  Deliverable — ssh arcade works from HQ; ssh hq works from the laptop; password auth is off.

  Briefing

  Mental model

  SSH is a client knocking on a daemon's door with a key. Each direction needs a daemon listening at the destination and the visitor's public key in the destination's authorized_keys. Private keys never travel. That's the whole protocol, socially speaking.

  Arcade side (the laptop opens its door)

  sudo apt install openssh-server
  systemctl status ssh          # should be active (running)
  
  # From HQ (PowerShell — Windows ships the OpenSSH client):
  ssh-keygen -t ed25519         # if HQ has no key yet
  type $env:USERPROFILE\.ssh\id_ed25519.pub | ssh charles@<laptop-ip> "mkdir -p ~/.ssh && cat >> ~/.ssh/authorized_keys"
  ssh charles@<laptop-ip>       # should now log in with no password

  HQ side (the rig opens its door)

  # Windows 11: Settings → System → Optional features → add "OpenSSH Server"
  # or in an admin PowerShell:
  Add-WindowsCapability -Online -Name OpenSSH.Server~~~~0.0.1.0
  Start-Service sshd; Set-Service sshd -StartupType Automatic
  
  # THE WINDOWS GOTCHA: your account is an administrator, so Windows reads keys from
  # C:\ProgramData\ssh\administrators_authorized_keys (NOT your user profile).
  # Paste the laptop's ~/.ssh/id_ed25519.pub into that file, then lock its ACL
  # (sshd refuses the file if it's too open). This one gotcha causes 90% of
  # "why is it still asking for a password" on Windows:
  icacls.exe "$env:ProgramData\ssh\administrators_authorized_keys" /inheritance:r /grant "Administrators:F" /grant "SYSTEM:F"

  Aliases, then hardening

  # Laptop ~/.ssh/config          # HQ %USERPROFILE%\.ssh\config
  Host hq                         Host arcade
    HostName <rig-ip>               HostName <laptop-ip>
    User <windows-user>             User charles
  
  # Once BOTH key logins work, turn off password auth on the laptop:
  printf 'PasswordAuthentication no\nPubkeyAuthentication yes\n' | \
    sudo tee /etc/ssh/sshd_config.d/99-hardening.conf
  sudo sshd -t && sudo systemctl restart ssh   # -t validates config BEFORE restarting

  Ubuntu quirk worth knowing: since 22.10, ssh.socket owns the listener (socket activation). Auth settings like the one above work normally, but if you ever change the port, change it on the socket (sudo systemctl edit ssh.socket), not in sshd_config, or it will be silently ignored.

  Failure modes that matter

  • Locking yourself out: never disable password auth until the key login is proven from the other machine.
  • Permissions: on Linux, ~/.ssh must be 700 and authorized_keys 600, or sshd silently ignores them.
  • The administrators_authorized_keys ACL on Windows, above.

  Prove it

  Move a file each way with scp. Then run ssh arcade htop from HQ: the arcade's guts, live, inside an HQ terminal. That feeling is the whole two-building operation in one command.

• M0.3WRITER Open the books~3h

  Create the arcade repo — home of everything you build here — push it to GitHub over SSH, and adopt a commit discipline.

  Deliverable — ~/arcade repo with README, pushed; first three commits tell a story.

  Briefing

  The play

  You configured git and GitHub keys during M0.1 (Purist 0.D). Now open the books for real: ~/arcade with README.md (what this place is), docs/ (specs live here, starting next mission), and ledger/ (the app, from Arc 1 on). Push it. Every mission from here commits into this repo; the git log becomes your course transcript.

  Commit discipline (the whole lesson)

  • One coherent change per commit; the message says why, not what.
  • Commit before every experiment, so reverting is casual, not surgery.
  • Branches are free. Anything exploratory gets one.

  Failure mode that matters

  The junk-drawer repo: secrets, ISOs, and node_modules committed in week one haunt you in month six. Write a .gitignore now; add .env to it before any .env exists.

• M0.4ARCHITECT The coin vault, v0~6h

  First architect seat: audit what on HQ deserves protecting (photos, the repos you'd cry about, documents), write the backup spec, then implement v0 — the arcade pulls from HQ nightly and records what it did.

  Deliverable — real files flowing HQ → arcade on a schedule, a vault-status.json the next arc builds UI on, and the building doing a real job by ~hour 15 of the course.

  Briefing

  The architect seat, defined

  You don't write the script first. You write the spec first, in ~/arcade/docs/vault-spec.md: WHAT is protected (exact HQ paths — audit your Pictures, repos, documents), WHERE it lands (/srv/vault/), WHEN (schedule), HOW MUCH history (v0: none, latest copy only — noted honestly as a limitation), and HOW YOU'D KNOW it worked (the status file). Then you direct the agent to implement the spec and review the result against it. The spec surviving contact is the grade.

  Design constraints worth knowing (why v0 pulls with scp)

  • HQ is Windows: rsync isn't natively there, so a classic rsync pull would need extra install on HQ. v0 stays stock: the laptop pulls over SSH with scp -r (or sftp), which needs nothing but M0.2's work.
  • v0 is deliberately naive: full re-copy, no versioning, no dedup. It will feel wasteful — good. Feeling the waste is what makes Arc 2's upgrade to restic (snapshots, dedup, encryption) land as a solution instead of a vocabulary word.
  • The vault disk is finite. Your spec's WHAT must fit; the audit includes sizes (du -sh laptop-side, right-click Properties on HQ).

  Shape of v0 (direct your agent toward this; don't paste it)

  # ~/arcade/vault/pull.sh — runs on the laptop
  # for each path in the spec:
  scp -r hq:"C:/Users/<you>/Pictures" /srv/vault/photos/
  # then write vault-status.json: { started, finished, paths, bytes, ok }
  # then: crontab -e → schedule it nightly (man 5 crontab is the reading)

  Failure modes that matter

  • No spec, just vibes: backing up everything means backing up junk and filling the disk by Thursday.
  • Silent failure: a backup that quietly stops is worse than none — that's why the status file exists, and why the Vaultkeeper gets a Tryout in Arc 2 to watch it.
  • Never testing a restore: copy one photo back the other way today, by hand. Unrestored backups are a rumor.

Frontend fundamentals, learned on the arcade's own book of record.

• M1.1REVIEWER Shadow the contractor~4h

  Read this very app's construction notes (docs/BUILD-NOTES.md) against its source, decision by decision, and file your objections.

  Deliverable — written attacks on at least two of the twenty-three decisions, in your Arc 1 notes.

  Briefing

  The reviewer seat, defined

  Reviewing is not reading; it's interrogation. For every decision the notes defend, ask the three reviewer questions: What does this actually do? What input or future change breaks it? What would I have done, and can I defend the difference? The notes were written to be argued with, and several decisions have real weaknesses. Find two. "It's fine" is a failed review; nothing is fine.

  Why this is mission one of the frontend arc

  From here on you'll read far more code than you write — every agent session is a code review. Training the interrogation reflex on a codebase with narrated intent is the gentlest on-ramp: the answers are printed, and your job is deciding whether they're good ones.

• M1.2WRITER The Ledger's first page~6h

  Hand-build the arcade status page: semantic HTML and CSS, no framework, no agent, served from the Latitude and viewed from HQ's browser.

  Deliverable — http://arcade:8080 (or the IP) renders your page anywhere on the LAN.

  Briefing

  The play

  In ~/arcade/ledger/: one index.html, one style.css. Content: the arcade's name, the premises (three machines, what each does), the vault's duties as a static list for now, and a staff wall with everyone marked "candidate." Serve it:

  cd ~/arcade/ledger && python3 -m http.server 8080
  # then from HQ's browser: http://<laptop-ip>:8080

  The moment HQ renders a page the arcade is serving, you have a two-machine web system. Every site you'll ever ship is this moment with more middlemen.

  Craft bar (this is the refresher, so hold it)

  • Semantic elements: header, nav, main, section; heading levels in order.
  • Design tokens: colors and fonts as CSS custom properties on :root, defined once, used everywhere.
  • One deliberate layout: flexbox or grid, chosen on purpose, not both by accident.

  Failure modes that matter

  • Div soup: if every element is a div, structure lives only in class names, and machines (including your future agents) can't read it.
  • Styling before structure: finish the HTML outline first; CSS on an unstable skeleton is rework.
  • Absolute positioning as layout: it's a pin, not a system. The page should survive a resize.

  Reference, not tutorial

  Odin's Foundations HTML/CSS/Flexbox sections and MDN are the reference shelf when stuck; you're past following them start-to-finish.

• M1.3WRITER The freshness dial~5h

  JavaScript state, by hand: the status page fetches vault-status.json (written by M0.4's script) and renders live backup freshness — green under 24h, amber under 48h, red past that.

  Deliverable — the page tells the truth about last night's backup without you reading a log.

  Briefing

  Mental model

  State is data; the DOM is a projection of it. The discipline that separates jQuery-era spaghetti from everything since: fetch data → compute a state object → render state to DOM. Three functions, one direction of flow. You're writing, in miniature, the idea React industrializes next arc.

  The play

  1. Have M0.4's script copy vault-status.json into the ledger folder it serves (or serve /srv/vault alongside; your call — note the tradeoff).
  2. fetch('vault-status.json') → parse → compute hoursSince(finished) → render the dial and byte counts.
  3. Handle the three ugly cases before the pretty one: file missing, JSON malformed, clock skew (finished in the "future").

  Failure modes that matter

  • file:// fetch: browsers block fetch from file:// pages — this only works because M1.2 made you serve over HTTP. Now you know why.
  • Trusting the data's shape: the JSON is written by your own script and it will STILL surprise you one day. Guard it.
  • Timezone display: store timestamps ISO/UTC, render local.
• M1.4REVIEWER The first PR~4h

  Claude Code's first feature on your codebase: a vault history strip (last 7 runs) on the status page, on a branch, reviewed like money depends on it.

  Deliverable — a merged (or rejected) PR with your written review; at least one demanded change.

  Briefing

  Setup

  Install Claude Code on the laptop (a terminal agent for a terminal building — made for each other). Point it at ~/arcade and ask for the feature as a spec: what it should do, what it must not touch, and that it works on a branch. Small diffs are a demand you're allowed to make.

  The review discipline (use it forever)

  1. Read the diff cold before running anything. Line by line. Out loud helps.
  2. For each hunk: what does it do, what breaks it, does it belong in this PR?
  3. Run it. Then feed it garbage (delete the JSON, truncate it) and watch.
  4. Demand at least one change, even on good code. Finding it is the exercise.
  5. Merge only what you can defend line by line. You are the reviewer of record.

  Also: the M0.1 confusion file

  Hand the agent your list of confusing install moments and have it explain each one. Interrogate the answers — agents state wrong things with the same confidence as right ones, and calibrating your ear for that is a course outcome.

• TRYOUTHIRE #1 The Sweeper's tryout~5h

  Your first hire, deliberately low-stakes: a disk-space reporter for the vault. An agent builds the candidate; you run the full Tryout format for the first time and make the call.

  Deliverable — the Sweeper on the wall (a cron job writing sweeper-status.json, surfaced on the Ledger), and one page of tryout notes.

  Briefing

  The candidate spec (you write this first — architect muscle)

  The Sweeper checks /srv/vault disk usage and free space, writes sweeper-status.json (used, free, biggest offenders, timestamp), and must warn when free space drops under a threshold. Runs daily by cron. Small enough to try out in an evening, real enough to matter — v0 backups WILL eat the disk eventually, and the Sweeper is who tells you.

  The Tryout format (learn it here, reuse at every hire)

  1. Paper round: read the candidate's code cold. Note every question before running anything.
  2. Floor round: run it in a sandbox, not the building — here, a scratch directory full of junk files; later Tryouts use a docker-compose clone. Probe: near-full disk, empty vault, unreadable dir.
  3. Stress question: ask the agent "what happens if X?" for your three nastiest X's, and check its answers against what the floor round showed.
  4. Ruling: hire / fix-then-hire / reject, with reasons, in writing. Rejections are wins.

  Failure mode that matters

  The polite interview. If the Tryout finds nothing, the Tryout was too soft. There is always something: a magic-number threshold, a du that follows symlinks, output that breaks on a filename with a space. Find it.

Backend, database, real snapshots; the coin vault grows up.

• M2.1WRITER The Ledger gets a voice~7h

  An Express API on the Latitude, by hand: routes serving vault and sweeper status, middleware, logging. The static page becomes a client of your first server.

  Deliverable — GET /api/vault/status answered by code you wrote.

  nodeexpressRESTmiddlewarenvm
  Briefing

  Authored when you approach Arc 2, so it reflects that month's tooling. Say "author Arc 2 briefings."

• M2.2ARCHITECT The count book~7h

  PostgreSQL on the laptop. You design the schema for backup-run history by hand (that part is sacred writer territory); the agent writes the CRUD; you review.

  Deliverable — every vault and sweeper run lands in Postgres; the API reads from it.

  postgrespsqlschema designSQLmigrations
  Briefing

  Authored when you approach Arc 2.

• M2.3ARCHITECT The coin vault, v1~6h

  Retire naive scp: restic gives the vault encrypted, deduplicated snapshots with real history (HQ pushes to the arcade over SFTP). Scheduled properly; runs recorded to the database.

  Deliverable — point-in-time restore proven: recover a file as it was last Tuesday.

  resticsnapshotsencryptionsystemd timerssftp
  Briefing

  Authored when you approach Arc 2.

• TRYOUTHIRE #2 The Vaultkeeper's tryout~6h

  The first real hire: an agent-built watcher that verifies snapshots actually restore (test-restores a sample nightly) and reports to the Ledger. Sandbox trial in a throwaway repo, then your ruling.

  Deliverable — the Vaultkeeper's badge lit; the Ledger shows verified-restore status, not just ran-status.

  debuggingrestore testingcron vs timerstryout format
  Briefing

  Authored when you approach Arc 2.

The family gets memberships, the building gets one front door, Docker arrives.

• M3.1WRITER Memberships~6h

  Auth by hand, because auth is sacred writer territory: password hashing, sessions, family accounts on the Ledger. Nobody's agent writes your first auth.

  Deliverable — family members log into the Ledger; you can explain exactly what a session cookie is.

  bcryptsessionsJWTthreat model
  Briefing

  Authored when you approach Arc 3.

• M3.2ARCHITECT Machines in crates~5h

  Docker and compose: Postgres moves into a container, the whole stack becomes one docker compose up. This also builds the sandbox-clone machinery every future Tryout uses.

  Deliverable — the stack rises with one command; a throwaway copy rises beside it and is destroyed without fear.

  docker engineimages vs containersvolumescompose
  Briefing

  Authored when you approach Arc 3.

• M3.3ARCHITECT The photo wall~4h

  Photos flow continuously from HQ into the vault and get a gallery surface behind the family login. (Tooling decided at briefing time against 8 GB reality — likely Syncthing plus a lightweight gallery.)

  Deliverable — a family member sees the photos in a browser without touching HQ.

  syncthingservicesRAM budgets
  Briefing

  Authored when you approach Arc 3.

• TRYOUTHIRE #3 The Ticket Booth's tryout~4h

  One front door for every service: a Caddy reverse proxy with local HTTPS, agent-built, tried out in the compose sandbox before it takes the keys.

  Deliverable — the Ledger, gallery, and status endpoints behind one address; ports stop being something the family sees.

  reverse proxycaddyTLSDNS on LAN
  Briefing

  Authored when you approach Arc 3.

HQ's GPU serves models to the building; retrieval built by hand at the strategy-guide rack.

• M4.1ARCHITECT Wire the counter to HQ~5h

  HQ's Ollama serves models over the LAN; the arcade's apps call it like any API. The premises earn their diagram: GPU where the GPU is, apps where the apps are.

  Deliverable — a curl from the laptop gets a completion from HQ's GPU.

  ollamaLAN servicesopenai-compatible APItokens
  Briefing

  Authored when you approach Arc 4.

• M4.2WRITER The strategy-guide rack~10h

  RAG by hand, no framework: chunk your own notes, embed into a local Chroma store, retrieve, and answer with citations. The atom of every "chat with your data" product, written where you can see all of it.

  Deliverable — ask a question about your own notes, get a cited answer, and know exactly which line of your code found the source.

  embeddingschunkingvector searchchromagrounding
  Briefing

  Authored when you approach Arc 4.

• TRYOUTHIRE #4 The Guide's tryout~6h

  An agent builds the Guide: a chat surface in the Ledger over your retrieval pipeline. The Tryout is an eval: grounding probes, hallucination bait, questions with no answer in the notes. Hire only what admits ignorance.

  Deliverable — the Guide's badge lit; your first written eval, reusable every time its index changes.

  evalshallucinationcitationsrefusal behavior
  Briefing

  Authored when you approach Arc 4.

Agents as infrastructure: tool loops, duty rosters, and the building's service entrance.

• M5.1WRITER The intercom~5h

  A tool-calling loop by hand: model gets tools (read vault status, query the DB, fetch a URL), decides, acts, loops. Forty lines that demystify the entire agent industry.

  Deliverable — a CLI agent that answers "how's the building?" by actually checking.

  tool callingagent loopcontextstop conditions
  Briefing

  Authored when you approach Arc 5.

• M5.2ARCHITECT Payroll and duty rosters~6h

  The staffing mechanics land in the Ledger: a job queue, run logs, and cost meters per staff member. Every bot's every shift becomes a row you can see.

  Deliverable — the Ledger shows who ran, when, what it cost, and what it said.

  queuesidempotencycost trackingobservability
  Briefing

  Authored when you approach Arc 5.

• M5.3ARCHITECT The service entrance~4h

  An MCP server exposing the building (vault status, staff runs, job queue) so Claude Code can query and command it from any terminal on the premises.

  Deliverable — "hours since the last verified restore?" answered by Claude Code through your MCP server.

  MCPtools as APIschemas
  Briefing

  Authored when you approach Arc 5.

• TRYOUTHIRE #5 The Night Guard's tryout~4h

  A monitoring agent: uptime checks on every service, alerts to the Ledger, metrics into HQ's Grafana. Tried out in the sandbox with services deliberately stopped: does it notice, and does it lie?

  Deliverable — the Night Guard's badge lit; HQ's Grafana grows an Arcade dashboard.

  monitoringalertinggrafanafalse positives
  Briefing

  Authored when you approach Arc 5.

Inspections, the off-site annex, and the last hire — yours.

• M6.1ARCHITECT The inspector~4h

  GitHub Actions on the arcade repo: lint, test, and build the containers on every push. Robots judge your code before it lands, the way every team works.

  Deliverable — a red X you caused, understood, and turned green.

  CI/CDgithub actionspipelines
  Briefing

  Authored when you approach Arc 6.

• M6.2ARCHITECT The off-site annex~4h

  A Warpyard node joins the premises: same SSH ritual as M0.2, the compose stack deployed off-site. Anything public-facing waits for your own explicit go.

  Deliverable — the arcade's stack runs somewhere you've never physically touched, and that feels normal now.

  cloud VMsdeploysenv parity
  Briefing

  Authored when you approach Arc 6.

• CAPALL SEATS The last hire is yours~13h

  Design a staff member this course never imagined: spec it (architect), hand-write its riskiest core (writer), direct the agent through the rest, run your own candidate's Tryout ruthlessly (reviewer/debugger), and light the badge.

  Deliverable — a working staff member of your own design in production, its spec and tryout notes in the repo. That's the diploma, and it runs.

  everything
  Briefing

  Authored when you approach the capstone; the spec you can start daydreaming now.

Five cabinets to fill the room

The arcs teach you to run the building; the Floor teaches you to fill it. Five commissions, five real web apps, each designed to train the skills that separate app designers from page builders: state modeling, motion as feedback, pointer physics, keyboard-first interfaces, accessibility in complex widgets, density and virtualization, and the geometry problems hiding inside every serious UI. Each cabinet has a client (fictional), a brief with taste and constraints (real training: designing FOR someone), staged build plans with seats and acceptance criteria, and a ship bar with no mercy. Cabinets are elective and unordered beyond their prerequisites — pick whichever one you can't stop thinking about. That's the ADHD cheat code and it's legal here.

~150 hours across all five — a second diploma's worth, tracked separately from the restoration (the sign out front only counts the arcs). A cabinet lights its screen when you start it and runs attract mode when it ships.

WAVE LAB for Marta · Spindle Records unplugged

A listening station for the record shop next door: the waveform IS the player — scrub it like tape, zoom it like a map, pin notes to the exact second the crackle gets good. Prereq: Arc 1. ~25h.

Commission brief + build plan

Client is fiction; the app is real and yours.

The brief. Marta digitizes used vinyl before selling it and wants customers to preview records on a shop tablet. She hates streaming-app sterility: "it should feel like handling the record." Constraints she gave you: warm, tactile, no playlists, no accounts, big targets for thumbs, and the annotations her staff leave ("skip intro", "the good part: 2:41") must feel like handwritten stickers, not comments sections.

What this trains: Web Audio graph, canvas at 60fps, precomputed waveform peaks, scrub/seek gesture physics, motion as feedback, requestAnimationFrame discipline.

• S1 · The deck WRITER ~3hAudio element + play/pause/seek as an explicit state machine (idle/loading/playing/seeking/error). Draw the state diagram BEFORE code; every UI bug later will be a missing arrow here.
• S2 · The waveform WRITER ~4hDecode with AudioContext, precompute min/max peak pairs per pixel bucket, render to canvas. Acceptance: a 40-minute side renders in under a second because you computed peaks once, not per frame.
• S3 · Tape hands WRITER ~5hPointer-event scrubbing with momentum: drag anywhere on the wave, audio follows DURING the drag (not on release), slight inertia on flick. Acceptance: scrubbing feels like touching tape, and clicking still just seeks.
• S4 · The zoom ARCHITECT ~4hWheel/pinch zoom into the waveform with tiled re-rendering — spec the tile cache yourself, let the agent implement, review against your spec. Acceptance: zoom from full-side to single-second with no jank on the 3490.
• S5 · Stickers ARCHITECT ~4hTimestamped annotations: pin, label, drag to adjust, persisted to your Bootcamp API (Arc 2's server earns its keep). Design the schema; agent writes CRUD; you review.
• S6 · The courtesy pass REVIEWER ~3hAgent PR: full keyboard operation (space, arrows, shift-arrows for fine seek), visible focus, prefers-reduced-motion honored, screen-reader labels on the transport. You review with the APG patterns open.
• S7 · Ship it to Marta DEBUGGER ~2hPerformance profile ON the 3490: DevTools frame chart while scrubbing + zooming. Hunt every dropped frame to its cause. Then the feel pass: does it feel like vinyl or like a form control?

Ship bar 60fps scrub on the Latitude, annotations survive reload, whole app driveable eyes-closed by keyboard, and one real record digitized end-to-end as the demo disc.

Stretch: AnalyserNode live spectrum behind the wave while playing — pure showmanship, judged on restraint.

PARTY LINE for the arcade's own birthday-party desk unplugged

The booking board for parties and floor slots: drag to book, resize to extend, and watch overlapping bookings pack themselves into columns. A calendar that refuses bad bookings — visibly, politely. Prereq: Arc 2. ~35h.

Commission brief + build plan

Client is fiction; the app is real and yours.

The brief. The party desk (okay: future-you) books birthday parties, tournaments, and maintenance blocks across the floor's zones. Rules with teeth: no double-booking a zone, parties need 30-minute cleanup gaps, tournaments can't start after 7pm. The board must make an invalid drop refuse — shrug, bounce back, explain — not fail silently or, worse, allow it.

What this trains: interval geometry (greedy column packing), custom drag/resize pointer engine, ghost previews, constraint validation as UX, UTC storage vs local rendering, DST edges, interruptible motion.

• S1 · Time is the layout WRITER ~4hDay-grid rendering from data: bookings as {startUTC, endUTC, zone} → positioned blocks. Store UTC, render local, and prove it by faking your timezone in DevTools.
• S2 · The packing problem WRITER ~5hOverlapping bookings share width: sort by start, greedily assign columns, divide the lane. This is a real algorithm on the hot path of every calendar you've ever used — write it yourself, test it with cruel fixtures (12 overlaps, zero-length, touching edges).
• S3 · The pointer engine WRITER ~6hDrag-to-create, drag-to-move, resize handles — one pointer state machine, snapping to 15-minute increments, ghost preview live DURING the drag. No library; the point is knowing what libraries do.
• S4 · The bouncer ARCHITECT ~5hConstraint validation designed as UX: spec every rule and its refusal behavior (shake? snap-back? inline reason?), agent implements, you review the feel as hard as the logic. Invalid states must be impossible to persist.
• S5 · The back office ARCHITECT ~5hPersist to Postgres via your API with optimistic updates: the block moves instantly, the server confirms behind it, conflicts roll back with an apology toast. First taste of the sync-engine mindset.
• S6 · Keyboard bookings REVIEWER ~4hAgent PR: full keyboard flow (create, move, resize via arrows, escape cancels mid-gesture) + ARIA grid semantics. Review with a screen reader running — actually running.
• S7 · The cruel week DEBUGGER ~3hLoad the DST-change week, a 14-booking Saturday, and a booking that spans closing time. Fix what breaks. Something will.
• S8 · Ship the desk ~3hFeel pass + a printed one-page "how to book a party" doc written for a 16-year-old employee. If the doc needs more than a page, the UI isn't done.

Ship bar An invalid drop visibly refuses with a reason; the DST week renders correctly both directions; every gesture is interruptible mid-flight; optimistic updates reconcile.

Stretch: a scrubbable "now" line and a day/week view transition that morphs blocks instead of cutting.

PIN MAP for Jun · boardwalk association unplugged

An infinite-canvas planning table: cards, images, and strings between pins, on a board that pans and zooms like it weighs something. You will actually use this for client workshops. Prereq: Arc 3. ~40h.

Commission brief + build plan

Client is fiction; the app is real and yours.

The brief. Jun runs planning sessions for the boardwalk association and wants one surface for moodboards, site maps, and "what goes where" arguments: drop cards and images anywhere, pin strings between related things, save named views ("the sign debate", "budget corner") and glide between them when presenting. Taste constraints: quiet surface, loud content; no toolbars covering the work; it should feel like a big table, not a diagram tool.

What this trains: screen↔world coordinate transforms, camera systems and choreography, hit testing, selection and transform handles, spatial culling for density, drop-anything ingestion.

• S1 · Two worlds WRITER ~5hThe camera: world coordinates vs screen coordinates, one transform between them, pan with space-drag, zoom to cursor (not to center — feel the difference). Get this wrong and every later feature is haunted. Write it yourself.
• S2 · Things on the table WRITER ~5hCards and images as world objects: create, drag (in world space — screen deltas divided by zoom), edit text inline. Acceptance: dragging at 25% zoom moves exactly with the cursor.
• S3 · Hands on many things WRITER ~5hHit testing against z-order, click-select, marquee-select, multi-drag, transform handles for resize. The interaction layer every canvas tool lives or dies on.
• S4 · Strings ARCHITECT ~4hPin-to-pin connections that re-route as things move. Spec the anchor model (edge? nearest point? fixed pins?); agent implements; you judge whether strings feel attached or painted.
• S5 · The thousand-card table ARCHITECT ~5hSpatial index + offscreen culling: only render what the camera sees. Spec the acceptance yourself: 1,000 cards, 60fps pan on the 3490. tldraw renders ~50 of 10,000 shapes; now you know why.
• S6 · Saved views ARCHITECT ~4hNamed camera positions with animated glides between them (eased, interruptible). Presentation mode: arrow keys walk the views. This is the demo-day feature; make the motion worth watching.
• S7 · The table remembers REVIEWER ~4hAgent PR: persistence to your API behind the family login (Arc 3's auth), autosave with visible save-state, image upload. Review the failure paths: mid-save refresh, huge image, expired session.
• S8 · Run a real session DEBUGGER ~3hUse it for an actual chuck design planning hour. Every friction you feel is a bug ticket. Fix the top three.

Ship bar 1,000 cards, 60fps pan/zoom on the Latitude; zoom-to-cursor exact; camera glides you'd happily present with; survives a real working session without a restart.

Stretch (after Arc 5): presence cursors over websockets — you and a client on the same table, live, with named cursors.

NIGHT SHIFT for the Night Guard's wall unplugged

The ops wall: every service, every backup, every bot's last shift, live, dense, and readable from across the room — with a time-travel scrubber for "what happened at 3am." Prereq: Arc 2. ~30h.

Commission brief + build plan

The client is your own building — the data is real.

The brief. One glance answers: is everything up, when was the last verified backup, what did the bots do overnight, is the disk filling. Constraints: readable at 2 meters, zero decoration that isn't data, every empty/error/stale state designed on purpose (the wall's job is precisely the moments things are wrong), and it must degrade gracefully when its own data source dies — a dashboard that lies is worse than a wall.

What this trains: streaming updates without layout thrash, stale-while-revalidate state, chart interaction (brush, crosshair, tooltip), data-dense responsive layout, designing every non-happy state. Load the dataviz discipline before S3 — chart junk fails the ship bar.

• S1 · One truth endpoint ARCHITECT ~4hSpec /api/wall: everything the wall shows in one aggregated, timestamped payload from your existing services. Agent implements; you review the shape — the frontend's simplicity is decided right here.
• S2 · The state ladder WRITER ~4hBy hand: fresh → stale → error → offline, as explicit states with explicit visuals (stale data stays visible but says so). Polling with backoff. The discipline that separates dashboards from decorations.
• S3 · Tiles that breathe WRITER ~5hThe dense grid: uptime tiles, disk gauge, backup freshness, bot shift log — updating live WITHOUT layout shift (reserve space, tabular numerals, transform-only motion). Readable at 2 meters is a real acceptance test: stand there.
• S4 · The history strip WRITER ~6hTime-series charts (SVG, by hand — line + area, axes, crosshair tooltip) of disk, uptime, backup bytes. No chart library; you'll use them forever after, but earn them once.
• S5 · Time travel ARCHITECT ~5hA brush/scrubber over history: drag across last night and the whole wall re-renders as-of that moment. Spec how "as-of" queries work; agent implements; you review the edge where history is sparse.
• S6 · The blackout drill DEBUGGER ~3hKill the API mid-view. Kill Postgres. Yank the network. The wall must degrade honestly at every step — stale badges, offline banner, no spinners-forever, no lies.
• S7 · Hang it REVIEWER ~3hAgent PR: kiosk mode (fullscreen, auto-refresh, burn-in-safe subtle drift) + light theme for daytime. Review, then actually leave it running on a screen for a week.

Ship bar Pull the network cable mid-demo and the wall tells the truth within 30 seconds; zero layout shift during live updates; the 3am question answerable by scrubbing alone.

Stretch: anomaly flags — the wall marks moments worth scrubbing to, so 3am finds you instead.

EVERYKEY for the back office's power users (you) unplugged

A command palette over the whole Ledger: every action three keystrokes away, commands that take arguments, and a trainer that teaches your own hands. Prereq: Arc 2. ~20h.

Commission brief + build plan

The client is future-you, who is tired of clicking.

The brief. ⌘K anywhere in the Ledger opens the palette: fuzzy-search every action and record ("restore photo...", "book party sat 2pm", "sweeper last run"), commands that take inline arguments, contextual scope (different commands on different pages), and — the trainer — after you mouse-click anything that had a shortcut, a quiet toast: "next time: ⌘K → rs". Superhuman holds itself to sub-100ms palette response; you'll hold yourself to sub-60.

What this trains: keyboard-first architecture, fuzzy search with ranking, composite-widget accessibility (combobox pattern, aria-activedescendant, focus trap and restore), command registries, latency budgets as a design material.

• S1 · The registry ARCHITECT ~3hSpec the command model: id, title, keywords, scope, handler, argument schema. Every Ledger action registers itself. The registry design decides whether S2-S6 are easy or hell; take the spec seriously.
• S2 · The finder WRITER ~4hFuzzy matching + ranking by hand: subsequence match, word-boundary bonus, recency bonus. Measure it: results under 60ms on the 3490 with 500 commands, or optimize until they are.
• S3 · The correct combobox WRITER ~4hThe palette as a REAL combobox: aria-activedescendant, roving highlight, focus trapped while open and restored on close, escape layering. Build it against the W3C APG pattern with a screen reader running. This is the a11y boss fight of the whole Floor.
• S4 · Arguments ARCHITECT ~3hCommands that take typed inline args ("book party [sat] [2pm] [zone B]") with per-token completion. Spec the grammar; agent implements; you review the backspace behavior — argument editing is where these tools usually break.
• S5 · The trainer REVIEWER ~3hAgent PR: the "you could have pressed X" toast + a stats view of your most-clicked-instead-of-typed actions. Review the tone — helpful exactly once, never nagging. Copy is design.
• S6 · Eyes closed DEBUGGER ~3hThe final exam: screen off- I mean monitor on, eyes closed — book a party, check the vault, open PIN MAP, by keyboard and memory alone. Every stumble is a bug. Then a full screen-reader pass, start to finish.

Ship bar Any Ledger action in ≤3 keystrokes; results under 60ms; a flawless screen-reader run; the trainer measurably changed your own habits within a week.

Stretch: palette-as-API — EVERYKEY commands exposed through your Arc 5 MCP server, so Claude Code can run the same registry you can.