From 1461507866b970162259e960b49e58bf15914aa4 Mon Sep 17 00:00:00 2001
From: explosion3975 <explosion3975@gmail.com>
Date: Thu, 22 Oct 2026 13:54:48 +0800
Subject: [PATCH] Match setup page to the lobby theme

The first-run form no longer matched the lobby, and its required
LiveKit fields were hard to distinguish from the optional Google AI key.
Align the layout and colors with the lobby while preserving credential
handling. Keep the two palettes in sync as the theme evolves and make
status updates available to screen readers. Align the CLI check with
the revised optional-key guidance.
---
 src/web/setup.rs                 | 223 ++++++++++++++++++++++++++-----
 tests/browser/setup-page.test.js | 164 +++++++++++++++++++++++
 tests/cli.rs                     |   9 +-
 3 files changed, 359 insertions(+), 37 deletions(-)
 create mode 100644 tests/browser/setup-page.test.js

diff --git a/src/web/setup.rs b/src/web/setup.rs
index 7266bb6a0..58723b0da 100644
--- a/src/web/setup.rs
+++ b/src/web/setup.rs
@@ -111,46 +111,201 @@ async fn setup_page() -> Html<&'static str> {
 /// launch with no console to print it on. Blank is a server that looks
 /// finished: the lobby loads, the interview starts, and nothing ever joins.
 const SETUP_PAGE: &str = r#"<!doctype html>
-<html>
+<html lang="en">
 <head>
 <meta charset="utf-8">
-<title>codetrial Setup</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>CodeTrial - Setup</title>
 <style>
-  body { font-family: system-ui, sans-serif; max-width: 32rem; margin: 2rem auto; padding: 0 1rem; }
-  label { display: block; margin-top: 1rem; font-weight: 600; }
-  input { display: block; width: 100%; margin-top: .25rem; padding: .4rem; box-sizing: border-box; }
-  small { display: block; color: #555; margin-top: .15rem; }
-  button { margin-top: 1.5rem; padding: .5rem 1rem; }
-  #status { margin-top: 1rem; white-space: pre-wrap; }
-  #status.error { color: #b00020; }
-  #status.ok { color: #0a7a2f; }
+  :root {
+    color-scheme: light;
+    --page: #f6f6f9;
+    --surface: #ffffff;
+    --ink: #171d2d;
+    --sub: #4f5b73;
+    --hairline: #e3e5ec;
+    --control-border: #858fa3;
+    --accent: #6e2bf0;
+    --accent-fill: #6e2bf0;
+    --accent-deep: #5520c4;
+    --accent-ink: #5520c4;
+    --practice-tint: #f3edff;
+    --practice-tint-edge: #ddd0fb;
+    --good: #137b56;
+    --critical: #c52d43;
+    --shadow-card: 0 1px 2px rgb(23 29 45 / 4%), 0 8px 24px rgb(23 29 45 / 6%);
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      color-scheme: dark;
+      --page: #11110f;
+      --surface: #1b1b18;
+      --ink: #f6f3ea;
+      --sub: #b7b2a5;
+      --hairline: #2d2b26;
+      --control-border: #8a8473;
+      --accent: #a291ff;
+      --accent-fill: #744ce6;
+      --accent-deep: #6437d2;
+      --accent-ink: #ab9eff;
+      --practice-tint: color-mix(in oklch, var(--accent-fill) 16%, var(--surface));
+      --practice-tint-edge: #473983;
+      --good: #24b47e;
+      --critical: #ff6b6b;
+      --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 24%);
+    }
+  }
+  * { box-sizing: border-box; }
+  body {
+    min-height: 100vh;
+    margin: 0;
+    background: var(--page);
+    color: var(--ink);
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+  main { width: min(100%, 52rem); margin: 0 auto; padding: 2.5rem 1.25rem; }
+  header { margin-bottom: 2rem; }
+  .brand { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }
+  .hero { margin-bottom: 2rem; }
+  .badge {
+    display: inline-block;
+    margin-bottom: 1rem;
+    padding: 0.375rem 0.875rem;
+    border: 1px solid var(--practice-tint-edge);
+    border-radius: 999px;
+    background: var(--practice-tint);
+    color: var(--accent-ink);
+    font-size: 0.8125rem;
+    font-weight: 600;
+  }
+  h1 {
+    margin: 0;
+    font-size: clamp(2rem, 5vw, 3.25rem);
+    line-height: 1.1;
+    letter-spacing: -0.035em;
+  }
+  .lead { margin: 0.875rem 0 0; color: var(--sub); font-size: 1.125rem; line-height: 1.55; }
+  form {
+    padding: 1.5rem;
+    border: 1px solid var(--hairline);
+    border-radius: 20px;
+    background: var(--surface);
+    box-shadow: var(--shadow-card);
+  }
+  fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
+  fieldset + fieldset { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); }
+  legend { padding: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
+  .requirement {
+    margin-left: 0.5rem;
+    color: var(--accent-ink);
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+  .group-note { margin: 0.5rem 0 1.25rem; color: var(--sub); line-height: 1.5; }
+  .field + .field, .field-row { margin-top: 1rem; }
+  .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
+  .field-row > .field + .field { margin-top: 0; }
+  label { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 600; }
+  input {
+    display: block;
+    width: 100%;
+    min-height: 2.5rem;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--control-border);
+    border-radius: 8px;
+    background: var(--surface);
+    color: var(--ink);
+    font: inherit;
+  }
+  small { display: block; margin-top: 0.375rem; color: var(--sub); font-size: 0.8125rem; line-height: 1.5; }
+  a { color: var(--accent-ink); }
+  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+  .action-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem 1rem;
+    margin-top: 1.5rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--hairline);
+  }
+  button {
+    min-height: 2.75rem;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--accent);
+    border-radius: 8px;
+    background: var(--accent-fill);
+    color: #ffffff;
+    cursor: pointer;
+    font: inherit;
+    font-weight: 700;
+    transition: background 120ms ease;
+  }
+  button:not(:disabled):hover { background: var(--accent-deep); }
+  button:disabled { cursor: not-allowed; opacity: 0.6; }
+  #status { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
+  #status.error { color: var(--critical); }
+  #status.ok { color: var(--good); }
+  @media (max-width: 600px) {
+    main { padding: 1.25rem; }
+    header { margin-bottom: 1.25rem; }
+    .hero { margin-bottom: 1.5rem; }
+    .lead { font-size: 1rem; }
+    form { padding: 1.25rem; }
+    .field-row { grid-template-columns: minmax(0, 1fr); }
+    input { font-size: 1rem; }
+    .action-row { align-items: stretch; }
+    .action-row button { width: 100%; }
+  }
 </style>
 </head>
 <body>
-<h1>Setup</h1>
-<p>Enter your LiveKit and Google credentials to get started.</p>
-<form id="setup-form">
-  <label for="livekitUrl">LiveKit URL</label>
-  <input id="livekitUrl" name="livekitUrl" type="text" placeholder="wss://your-project.livekit.cloud" required>
-  <small>From your project at <a href="https://cloud.livekit.io" target="_blank" rel="noopener">cloud.livekit.io</a>.</small>
-
-  <label for="livekitApiKey">LiveKit API Key</label>
-  <input id="livekitApiKey" name="livekitApiKey" type="text" required>
-
-  <label for="livekitApiSecret">LiveKit API Secret</label>
-  <input id="livekitApiSecret" name="livekitApiSecret" type="password" required>
-  <small>Both come from the same project's Keys page.</small>
-
-  <label for="googleApiKey">Google API Key</label>
-  <input id="googleApiKey" name="googleApiKey" type="password">
-  <small>From <a href="https://aistudio.google.com/apikey" target="_blank" rel="noopener">aistudio.google.com</a>.
-  Optional, and what it decides is whether this server hosts the interviewer. Without it
-  the app still loads and an interview still starts, but nobody joins the room: something
-  running elsewhere would have to.</small>
-
-  <button id="submit" type="submit">Save and continue</button>
-</form>
-<div id="status"></div>
+<main>
+  <header><div class="brand">CODETRIAL</div></header>
+  <section class="hero" aria-labelledby="setup-title">
+    <span class="badge">First-time setup</span>
+    <h1 id="setup-title">Set up CodeTrial</h1>
+    <p class="lead">Connect your services to start practicing live technical interviews.</p>
+  </section>
+  <form id="setup-form">
+    <fieldset>
+      <legend>LiveKit credentials <span class="requirement">Required</span></legend>
+      <p class="group-note">Use the URL and keys from the same LiveKit project.</p>
+      <div class="field">
+        <label for="livekitUrl">LiveKit URL</label>
+        <input id="livekitUrl" name="livekitUrl" type="text" placeholder="wss://your-project.livekit.cloud" required>
+        <small>Find it at <a href="https://cloud.livekit.io" target="_blank" rel="noopener">cloud.livekit.io</a>.</small>
+      </div>
+      <div class="field-row">
+        <div class="field">
+          <label for="livekitApiKey">LiveKit API Key</label>
+          <input id="livekitApiKey" name="livekitApiKey" type="text" required>
+        </div>
+        <div class="field">
+          <label for="livekitApiSecret">LiveKit API Secret</label>
+          <input id="livekitApiSecret" name="livekitApiSecret" type="password" required>
+        </div>
+      </div>
+      <small>Find both on the project's Keys page.</small>
+    </fieldset>
+    <fieldset>
+      <legend>Google AI <span class="requirement">Optional</span></legend>
+      <p class="group-note">Add a key if this server will host the interviewer.</p>
+      <div class="field">
+        <label for="googleApiKey">Google API Key</label>
+        <input id="googleApiKey" name="googleApiKey" type="password">
+        <small>Get a key from <a href="https://aistudio.google.com/apikey" target="_blank" rel="noopener">aistudio.google.com</a>.</small>
+        <small>Without a key, the app still loads and an interview can start, but an interviewer running elsewhere must join the room.</small>
+      </div>
+    </fieldset>
+    <div class="action-row">
+      <button id="submit" type="submit">Save and continue</button>
+      <div id="status" role="status" aria-live="polite"></div>
+    </div>
+  </form>
+</main>
 <script>
   const form = document.getElementById('setup-form');
   const status = document.getElementById('status');
diff --git a/tests/browser/setup-page.test.js b/tests/browser/setup-page.test.js
new file mode 100644
index 000000000..abbd0b26a
--- /dev/null
+++ b/tests/browser/setup-page.test.js
@@ -0,0 +1,164 @@
+// Run with: node --test tests/browser/setup-page.test.js
+// The setup page is embedded in Rust, so serve that exact HTML to Chromium.
+
+import { after, before, test } from "node:test";
+import assert from "node:assert/strict";
+
+import { launchChromium, read, startStaticServer } from "./source.js";
+
+const source = read("src/web/setup.rs");
+const start = source.indexOf('const SETUP_PAGE: &str = r#"');
+assert.notEqual(start, -1, "setup page constant exists");
+const htmlStart = start + 'const SETUP_PAGE: &str = r#"'.length;
+const htmlEnd = source.indexOf('"#;', htmlStart);
+assert.notEqual(htmlEnd, -1, "setup page constant ends");
+const html = source.slice(htmlStart, htmlEnd);
+const lobbyCss = read("web/styles.css");
+const paletteTokens = [
+  ...new Set([...html.matchAll(/^\s+(--[a-z-]+):/gm)].map((match) => match[1])),
+];
+assert.ok(paletteTokens.length > 0, "setup palette tokens exist");
+
+let browser = null;
+let server = null;
+let base = "";
+let submissions = [];
+
+before(async () => {
+  browser = await launchChromium();
+  if (!browser) return;
+  ({ server, base } = await startStaticServer({
+    handle: async (request, response, url) => {
+      if (url.pathname === "/setup") {
+        response.setHeader("content-type", "text/html");
+        response.end(html);
+        return true;
+      }
+      if (url.pathname === "/api/setup") {
+        let body = "";
+        for await (const chunk of request) body += chunk;
+        submissions.push(JSON.parse(body));
+        response.statusCode = 400;
+        response.setHeader("content-type", "application/json");
+        response.end(
+          JSON.stringify({ error: "Check the LiveKit credentials" }),
+        );
+        return true;
+      }
+      return false;
+    },
+  }));
+});
+
+after(async () => {
+  await browser?.close();
+  await new Promise((closed) => (server ? server.close(closed) : closed()));
+});
+
+test("setup palette stays aligned with the lobby", async (t) => {
+  if (!browser) return t.skip("playwright chromium unavailable");
+  for (const colorScheme of ["light", "dark"]) {
+    const setupPage = await browser.newPage({ colorScheme });
+    const lobbyPage = await browser.newPage({ colorScheme });
+    t.after(() => Promise.all([setupPage.close(), lobbyPage.close()]));
+    await setupPage.goto(`${base}/setup`);
+    await lobbyPage.setContent('<body class="practice-page"></body>');
+    await lobbyPage.addStyleTag({ content: lobbyCss });
+
+    const tokensOn = (page, selector) =>
+      page.locator(selector).evaluate((element, names) => {
+        const style = getComputedStyle(element);
+        return Object.fromEntries(
+          names.map((name) => [name, style.getPropertyValue(name)]),
+        );
+      }, paletteTokens);
+    const setupTokens = await tokensOn(setupPage, ":root");
+    const lobbyTokens = await tokensOn(lobbyPage, ".practice-page");
+    for (const name of paletteTokens) {
+      const compact = (value) => value.replace(/\s+/g, "");
+      assert.equal(
+        compact(setupTokens[name]),
+        compact(lobbyTokens[name]),
+        `${colorScheme} ${name} differs from the lobby`,
+      );
+    }
+  }
+});
+
+test("setup shows distinct credential groups without narrow-screen overflow", async (t) => {
+  if (!browser) return t.skip("playwright chromium unavailable");
+  for (const colorScheme of ["light", "dark"]) {
+    const page = await browser.newPage({
+      viewport: { width: 320, height: 800 },
+      colorScheme,
+    });
+    t.after(() => page.close());
+    await page.goto(`${base}/setup`);
+    assert.equal(await page.locator("fieldset").count(), 2);
+    assert.match(
+      await page.locator("fieldset").first().innerText(),
+      /Required/i,
+    );
+    assert.match(
+      await page.locator("fieldset").last().innerText(),
+      /Optional/i,
+    );
+    assert.equal(await page.locator("input:required").count(), 3);
+    assert.equal(await page.locator("#googleApiKey:required").count(), 0);
+    assert.equal(
+      await page.evaluate(
+        () => document.documentElement.scrollWidth <= window.innerWidth,
+      ),
+      true,
+      `${colorScheme} setup overflows a 320px viewport`,
+    );
+    const button = page.locator("#submit");
+    const bodyColor = await page
+      .locator("body")
+      .evaluate((el) => getComputedStyle(el).backgroundColor);
+    assert.equal(
+      bodyColor,
+      colorScheme === "light" ? "rgb(246, 246, 249)" : "rgb(17, 17, 15)",
+    );
+    assert.equal(
+      await button.evaluate((el) => getComputedStyle(el).backgroundColor),
+      colorScheme === "light" ? "rgb(110, 43, 240)" : "rgb(116, 76, 230)",
+    );
+  }
+});
+
+test("setup validates required fields and preserves retry after server error", async (t) => {
+  if (!browser) return t.skip("playwright chromium unavailable");
+  submissions = [];
+  const page = await browser.newPage();
+  t.after(() => page.close());
+  await page.goto(`${base}/setup`);
+  assert.notEqual(
+    await page
+      .locator("#status")
+      .evaluate((element) => getComputedStyle(element).display),
+    "none",
+    "the live status region is present before its first update",
+  );
+  await page.locator("#submit").click();
+  assert.equal(submissions.length, 0, "empty required fields block submission");
+
+  await page.locator("#livekitUrl").fill("wss://example.livekit.cloud");
+  await page.locator("#livekitApiKey").fill("key");
+  await page.locator("#livekitApiSecret").fill("secret");
+  await page.locator("#submit").click();
+  await page.locator("#status.error").waitFor();
+  assert.equal(
+    await page.locator("#status").innerText(),
+    "Check the LiveKit credentials",
+  );
+  assert.equal(await page.locator("#submit").isEnabled(), true);
+  assert.deepEqual(submissions, [
+    {
+      livekitUrl: "wss://example.livekit.cloud",
+      livekitApiKey: "key",
+      livekitApiSecret: "secret",
+      googleApiKey: "",
+    },
+  ]);
+});
diff --git a/tests/cli.rs b/tests/cli.rs
index d34785be7..1916bed6d 100644
--- a/tests/cli.rs
+++ b/tests/cli.rs
@@ -1093,9 +1093,12 @@ fn setup_page_renders_a_form_with_all_four_credential_fields() {
     }
     assert!(response.contains("/api/setup"), "{response}");
 
-    // What leaving the optional field blank buys. The only other place that
-    // says it is a console this launch does not have.
-    assert!(response.contains("nobody joins the room"), "{response}");
+    // The setup page explains what happens when the optional key is blank: an
+    // interviewer hosted elsewhere still needs to join the room.
+    assert!(
+        response.contains("an interviewer running elsewhere must join the room"),
+        "{response}"
+    );
 }
 
 /// Accept, validate, write: the mocks answer as working credentials would,