phase: 07_canvas_client_and_hud

**Final report — phase 07 final verification pass**

- **Verified:** all 5 tasks present in `complete/`; app boots (`/healthz` 200, `/` 200, static + atlas + `/api/levels` served); `docs/CLIENT.md` module map matches the on-disk `app/static/` tree; no code defects found.
- **Tests/lint/coverage:** `bash .agents/validate.sh` → ruff clean, pyright 0 errors, `undercooked-levels validate` pass, **full pytest 1838 passed, 97.21% coverage (floor 90%)**, slow sim stage 2 passed, repo hygiene clean. `uv run pytest tests/e2e -q` → **53 passed** (all 8 suites added this phase).
- **Criteria:** (1) two tabs create→join→ready→start→serve one dish, keyboard only — green via `test_us01/02/03/04` ✔; (2) e2e green ✔; (3) canvas non-blank, pixels change after a move — `test_us04_render_smoke` ✔; (4) HUD score within 200 ms of the `served` event — asserted, green ✔; (5) zero console errors + zero off-origin requests — `test_atlas_loads` / `test_us01_landing_surface` ✔; (6) `docs/CLIENT.md` matches layout ✔; (7) 100% suite + 97.21% ✔; (8) docs pass below ✔; (9) no regression in completed phases (all prior suites green) ✔.
- **README.md fixed:** status still said "next pending phase is 07" → now 07 complete, 08 pending; the phase-07 client text buried in the phase-05 bullet → its own "canvas client, art, HUD (phase 07)" bullet; stale "What does not exist yet" (claimed movement/controls missing) → rewritten to phases 08–14; "once the room flow ships" → "live in the browser today"; Layout `app/static/` "renderer arrives with the rest of phase 07" → full shipped-client map; Layout `docs/` "CLIENT lands with phase 07" → `CLIENT.md` listed; added `gen_art_index.py` Layout entry.
- **AGENTS.md fixed:** "the eight screens" (7 listed) → "the seven screens" (+ `dom.js` is the shared builder, not a screen); e2e naming line → notes the non-story guard `test_atlas_loads.py`.
- **Decisions:** no code changes were needed; only the two doc fixes above. Docs re-verified by `test_docs_commands`/`test_docs_index` (44 passed) plus the final full gate.
- **Next pending phase:** `08_client_prediction_and_touch`.

app/static/index.html

@@ -13,6 +13,7 @@
          while keeping every byte same-origin (PLAN.md A12). -->
     <link rel="icon" href="data:," />
     <link rel="stylesheet" href="/static/css/base.css" />
+    <link rel="stylesheet" href="/static/css/screens.css" />
   </head>
   <body>
     <main id="app" class="shell">
@@ -21,47 +22,12 @@
         <p class="tagline">Anonymous co-op kitchen chaos. No accounts, no install, 1&ndash;4 cooks.</p>
       </header>
 
-      <section id="screen-lobby" class="panel" aria-labelledby="lobby-heading">
-        <h2 id="lobby-heading">Kitchen lobby</h2>
-        <p id="lobby-help">
-          Create a kitchen and read its 5-character code out loud, or join a kitchen that is
-          already open. Nothing is saved and nothing is asked for.
-        </p>
-
-        <button id="create-lobby" class="btn btn-primary" type="button">Create lobby</button>
-
-        <form id="join-form" class="join" autocomplete="off">
-          <label for="join-code">Room code</label>
-          <div class="join-row">
-            <input
-              id="join-code"
-              name="code"
-              type="text"
-              inputmode="text"
-              autocapitalize="characters"
-              spellcheck="false"
-              size="5"
-              maxlength="5"
-              placeholder="ABCDE"
-              aria-describedby="join-hint"
-              required
-            />
-            <button class="btn" type="submit">Join</button>
-          </div>
-        </form>
-        <p id="join-hint" class="hint">
-          Five characters, letters and digits, never <code>I</code>, <code>L</code>, <code>O</code>
-          or <code>U</code>.
-        </p>
-
-        <div id="status" class="status" role="status" aria-live="polite">
-          Pick a kitchen to start.
-        </div>
-      </section>
-
-      <!-- The renderer (phase 07) sizes and unhides this canvas; it stays out of
-           the layout and the a11y tree until then. -->
-      <canvas id="kcanvas" hidden aria-hidden="true"></canvas>
+      <!-- The screen state machine (app/static/js/app.js) mounts exactly one
+           screen here at a time: landing, connecting, lobby, countdown,
+           playing, round_end or error. The playing screen owns #kcanvas
+           (hidden until the phase-07 task-04 renderer sizes and unhides it)
+           and the #hud root. -->
+      <div id="screen-root" class="screen-root"></div>
     </main>
 
     <footer class="colophon">
@@ -71,6 +37,6 @@
       </p>
     </footer>
 
-    <script type="module" src="/static/js/app.js"></script>
+    <script type="module" src="/static/js/main.js"></script>
   </body>
 </html>