toolroll 0.9.83 → 0.9.85

package/dist/server/pages.js

@@ -1,3 +1,4 @@
+import { projectOutcomes } from '../project-outcomes.js';
 import { steerControlsFor } from "../steer-controls.js";
 import { canReveal, cdCommandOf, localCheckoutOf } from "../checkout-proof.js";
 import { instanceHttpAnswer } from "../console-instance.js";
@@ -8,7 +9,8 @@ import { createHmac, randomBytes } from "node:crypto";
 import { realpathSync } from "node:fs";
 import {} from "node:http";
 import { homedir, hostname } from "node:os";
-import { dirname, join, resolve } from "node:path";
+import { basename, dirname, join, resolve } from "node:path";
+import { buildersFor } from "../dispatch.js";
 import { listFolder, localOrigins } from "../folder-look.js";
 import { Readable } from "node:stream";
 import { pipeline } from "node:stream/promises";
@@ -50,7 +52,7 @@ import { refuse, regionScript, screen, settingsRows, WORKSPACE_STYLE, workToolRo
 import { redirect, respond, safeReturn, SAFETY, taskHref } from "./http.js";
 import { assignmentOf } from "../assignment.js";
 import { assignmentTaskStatusOf } from "../assignment-presentation.js";
-import { browsePage, fleetBody, fleetScript, githubIdentityOf, githubReposPage, homePage, portfolioOverview, projectsPage, systemPage, workbenchRail } from "./render-pages.js";
+import { browsePage, fleetBody, fleetScript, githubIdentityOf, githubReposPage, homePage, portfolioOverview, projectsPage, startBuilderHtml, systemPage, workbenchRail } from "./render-pages.js";
 import { capsPage } from "./render-settings.js";
 import { decisionAnswerScript, taskBody } from "./render-tasks.js";
 import {} from "./session.js";
@@ -640,6 +642,7 @@ export function createPagesHandlers(runtime) {
         }
         const askedPath = (body.get("path") ?? "").trim();
         // Resolved off the console's thread (project-identity.ts): a folder that doesn't answer is said, never waited on.
+        const decidedOn = identities.generation();
         const picked = askedPath === "" ? null : await identities.resolveNow(askedPath);
         if (picked === "no-answer")
             return refuse(response, who, 503, "That project's folder didn't answer. It may be on a drive that's disconnected, or waiting on macOS. Try again in a moment.");
@@ -647,6 +650,9 @@ export function createPagesHandlers(runtime) {
         if ((askedPath !== "" && canonicalPick === null) || (canonicalPick !== null && (!visible(canonicalPick) || !(await authorizedProject(liveCeiling(), canonicalPick))))) {
             return refuse(response, who, 403, "that project is outside this console's reach");
         }
+        // An identity that changed during the awaits above undoes what they proved.
+        if (identities.generation() !== decidedOn)
+            return refuse(response, who, 409, "a project folder changed while this was being checked — try again");
         who.session.project = canonicalPick;
         who.session.projectRevision += 1;
         sessions.persist(who.session);
@@ -680,6 +686,7 @@ export function createPagesHandlers(runtime) {
             return refuse(response, who, 403, "opening a project is a browser session's act");
         }
         const asked = (body.get("path") ?? "").trim();
+        const decidedOn = identities.generation();
         const resolved = asked === "" ? null : await identities.resolveNow(asked);
         if (resolved === "no-answer") {
             return void projectsScreen(response, who, "that folder didn't answer — it may be on a drive that's disconnected, or waiting on macOS; try again in a moment", 503, safeReturn(body.get("return")));
@@ -702,13 +709,21 @@ export function createPagesHandlers(runtime) {
         if (!visible(canonical)) {
             return void projectsScreen(response, who, "That project is outside your access.", 403, safeReturn(body.get("return")));
         }
+        // An identity that changed during the awaits above undoes what they proved.
+        if (identities.generation() !== decidedOn)
+            return void projectsScreen(response, who, "a project folder changed while this was being checked — try again", 409, safeReturn(body.get("return")));
         // Opening an allowed repository admits it the same way `repos add` does
         // (project-admission.ts). A co-located `up` notices the durable list and
         // connects its builder; there is no separate restart or binding step.
-        const admitted = await admitProject(store, { registryFile: options.registryPath ?? null, path: canonical, actor: { label: who.name, origin: "console" }, now });
+        // The admission asks again, inside its registry lock and its transaction, about the repo it proves.
+        const stillAllowed = (repo) => identities.generation() === decidedOn && visible(repo);
+        const admitted = await admitProject(store, { registryFile: options.registryPath ?? null, path: canonical, actor: { label: who.name, origin: "console" }, now, stillAllowed });
         if (!admitted.ok) {
-            return void projectsScreen(response, who, admitted.reason === "not-git" ? "that path is not a git repository" : `that project is valid, but it could not be added — ${admitted.message}`, 400, safeReturn(body.get("return")));
+            return void projectsScreen(response, who, admitted.reason === "not-git" ? "that path is not a git repository" : `that project is valid, but it could not be added — ${admitted.message}`, admitted.reason === "moved" ? 409 : 400, safeReturn(body.get("return")));
         }
+        // And once more before the session follows it.
+        if (!stillAllowed(admitted.repo))
+            return void projectsScreen(response, who, "a project folder changed while this was being checked — try again", 409, safeReturn(body.get("return")));
         deletedRepos.delete(admitted.repo);
         who.session.project = admitted.repo;
         who.session.projectRevision++;
@@ -858,6 +873,8 @@ export function createPagesHandlers(runtime) {
             return projectsScreen(response, who, "that preview expired or was already used — preview again", 400);
         }
         live.onboard?.delete(nonce); // consumed BEFORE the first await
+        // Identities as this confirmation found them: the admission below re-checks against them (project-identity.ts).
+        const decidedOn = identities.generation();
         if (record.large && body.get("big-ok") !== "1") {
             return projectsScreen(response, who, "that repository is large (or its size is unknown) — tick the box to clone it anyway", 400);
         }
@@ -887,10 +904,13 @@ export function createPagesHandlers(runtime) {
         if (admitted === null) {
             return projectsScreen(response, who, `the clone landed at ${cloned.target} but did not prove under the ceiling — it was left in place; enroll it by hand`, 400);
         }
-        const joined = await admitProject(store, { registryFile: options.registryPath ?? null, path: admitted, actor: { label: who.name, origin: "console" }, now });
+        const stillAllowed = (repo) => identities.generation() === decidedOn && visible(repo);
+        const joined = await admitProject(store, { registryFile: options.registryPath ?? null, path: admitted, actor: { label: who.name, origin: "console" }, now, stillAllowed });
         if (!joined.ok) {
-            return projectsScreen(response, who, `${cloned.target} is cloned but not added — ${joined.message}`, 400);
+            return projectsScreen(response, who, `${cloned.target} is cloned but not added — ${joined.message}`, joined.reason === "moved" ? 409 : 400);
         }
+        if (!stillAllowed(joined.repo))
+            return projectsScreen(response, who, `${cloned.target} is cloned but wasn't opened — a project folder changed while it was being checked; try again`, 409);
         deletedRepos.delete(admitted);
         who.session.project = admitted;
         who.session.projectRevision += 1;
@@ -948,7 +968,16 @@ export function createPagesHandlers(runtime) {
             peeks[one.path] = peekOf(one.path);
         for (const path of candidates)
             peeks[path] = peekOf(path);
-        return sendScreen(response, status, projectsPage(chromeFor(open, "projects"), recent, [...candidates], open, problem, !restricted() && unscopedMode, !restricted() && (ceiling.roots.length > 0 || unscopedMode), onboardState, peeks, returnTo, who.via === "cookie" ? (path) => publishingOf(store, path).on : undefined, who.via === "cookie" ? (path) => projectCheckLevel(store, path).level : undefined));
+        let activity;
+        if (open !== null && !returnTo.startsWith("/tasks/new") && visible(open) && store.accountCanAccess(who.name, open)) {
+            try {
+                activity = { project: projectName(open), report: projectOutcomes(store, open, now, { principal: 'operator', repos: [open] }) };
+            }
+            catch {
+                activity = { project: projectName(open), report: null };
+            }
+        }
+        return sendScreen(response, status, projectsPage(chromeFor(open, "projects"), recent, [...candidates], open, problem, !restricted() && unscopedMode, !restricted() && (ceiling.roots.length > 0 || unscopedMode), onboardState, peeks, returnTo, who.via === "cookie" ? (path) => publishingOf(store, path).on : undefined, who.via === "cookie" ? (path) => projectCheckLevel(store, path).level : undefined, activity));
     }
     async function instanceEdge(ctx) {
         const { request, response, url } = ctx;
@@ -1058,6 +1087,22 @@ export function createPagesHandlers(runtime) {
             return respond(response, 404, "application/json", JSON.stringify({ error: "run" }));
         return respond(response, 200, "application/json", JSON.stringify(window.ok ? window : { error: window.reason }));
     }
+    /** Start a builder (Settings revamp S4): the command, and whether a builder that may build the open project is
+     * checking in, as dispatch decides. Read-only; a project-limited person sees only a project they may see. */
+    async function startBuilderPage(ctx) {
+        const { response, now, project, url, who } = ctx;
+        // ?task=<id>: that task's own saved project (a builder there, as dispatch decides for it), never the open one; the
+        // session's selection is left alone. Unknown, unplaced or not visible to this person: 404, the same answer.
+        const taskId = url.searchParams.get("task");
+        const ref = taskId === null ? null : store.lookupRef(taskId.slice(0, 200));
+        if (taskId !== null && (ref === null || ref.repo === null || !visible(ref.repo)))
+            return refuse(response, who, 404, "That task is not available.", "/work");
+        const shown = ref !== null ? ref.repo : project !== null && visible(project) ? project : null;
+        const connected = shown === null ? null : buildersFor(store, shown, now, ref?.assignedRunner ?? null).alive.length > 0;
+        return sendScreen(response, 200, screen("Start a builder", startBuilderHtml({
+            heading: "h1", project: shown === null ? null : basename(shown), connected, managed: !restricted(),
+        }), { chrome: chromeFor(project, "none") }));
+    }
     const registrations = handlersOf("pages", {
         "projects.browse": projectsBrowse,
         "projects.github": projectsGithub,
@@ -1069,6 +1114,7 @@ export function createPagesHandlers(runtime) {
         "ledger": ledgerPage,
         "activity": activityPage,
         "system": systemScreen,
+        "start-builder": startBuilderPage,
         "peek": peekPage,
         "agents": agentsPage,
         "agents.live": agentsLive,

package/dist/server/people-tokens.js

@@ -12,7 +12,7 @@ import { SSO_CALLBACK } from "../sso-settings.js";
 import { personChip, refuse, screen } from "./chrome.js";
 import { redirect, respond, sayTo } from "./http.js";
 /** people handlers, moved without changing their route bodies. */
-import { randomBytes, timingSafeEqual } from "node:crypto";
+import { randomBytes } from "node:crypto";
 import {} from "node:http";
 import {} from "../contracts/console-api.js";
 import { listCoordinators } from "../coordinator.js";
@@ -22,8 +22,9 @@ import { personAuditHtml, personHref } from "../people-audit-ui.js";
 import { cursorOf as auditCursorOf, remoteAudit } from "../remote-audit.js";
 import { credentialProof, hashPassword, proveAccountNow } from "../scope.js";
 import { form, HANDOFF_STYLE, loginHref, loginReturn, page, SIGN_IN_COOKIE, signInSpent, startedHere } from "./http.js";
-import { joinDeadPage, joinFormPage, loginPage, signupPage } from "./render-people.js";
+import { joinDeadPage, joinFormPage, loginPage, SIGNUP_NAME, SIGNUP_PASSWORD_MIN, signupPage } from "./render-people.js";
 import { SESSION_COOKIE, SIGN_IN_LINK_PATH } from "./session.js";
+import { setupCodeMatches, signupCookie, signupFromHere } from "./signup-gate.js";
 /** Clock skew allowed between the provider and this server when reading auth_time — forward only (a provider clock
  * running ahead). auth_time is in whole seconds, so a check made in the visit's own second is floored below startedAt:
  * the one allowance backward is that rounding, never a check made before the visit began. */
@@ -39,7 +40,7 @@ export function sameVisitCheck(authTime, startedAt, now) {
     return Math.min(Math.max(at, startedAt), now);
 }
 export function createPeopleHandlers(runtime) {
-    const { joinBySource, ssoOffer, ssoVisits, ssoSettings, options, clock, ssoHandoffs, managedRepos, store, visible, admissionList, sendScreen, chromeFor, restricted, sessions, consoleProjects, authenticateApprover, authenticateCredential, bustBadge, projectOf, signInLinks, linkKey, fromThisComputer, recordSignIn, passwordAllowed, arrival, defaultProject, cookieSecure, consoleOrigin, providerFor, providerKnown, joinSourceOf, signInBudget, signInActor, minutesWords } = runtime;
+    const { joinBySource, ssoOffer, ssoVisits, ssoSettings, options, clock, ssoHandoffs, managedRepos, store, visible, admissionList, sendScreen, chromeFor, restricted, sessions, consoleProjects, authenticateApprover, authenticateCredential, bustBadge, projectOf, signInLinks, linkKey, fromThisComputer, recordSignIn, passwordAllowed, arrival, cookieSecure, consoleOrigin, providerFor, providerKnown, joinSourceOf, signInBudget, signInActor, minutesWords } = runtime;
     // v101: Settings → Sessions & tokens: where you're signed in, and your API tokens. An instance operator can see everyone's.
     async function sessionsPage(ctx) {
         const { url, who, response, project } = ctx;
@@ -307,6 +308,11 @@ ${reauth(html `<label>Password <input type="password" name="token" autocomplete=
     async function signInPage(ctx) {
         const { url, response } = ctx;
         if (options.setupCode !== undefined && store.listApprovers().length === 0) {
+            // The form's same-site proof (signup-gate.ts): a post without it never reaches the setup code.
+            if (runtime.setupAttemptsLeft > 0)
+                response.setHeader("Set-Cookie", signupCookie(cookieSecure));
+            // Its own post then carries this console's Origin (the console's default no-referrer sends `null`).
+            response.setHeader("Referrer-Policy", "same-origin");
             return page(response, 200, signupPage(null, runtime.setupAttemptsLeft));
         }
         return page(response, 200, loginPage(null, loginReturn(url.searchParams.get("return")), ssoOffer()));
@@ -334,7 +340,7 @@ ${reauth(html `<label>Password <input type="password" name="token" autocomplete=
             return page(response, 403, loginPage(`Sign in with ${ssoSettings()?.label ?? "your identity provider"}.`, "/chat", ssoOffer()));
         const id = randomBytes(32).toString("hex");
         sessions.set(id, { ...arrival(request), name: held.account, csrf: randomBytes(32).toString("hex"), role: account.role, generation: account.generation, createdAt: Date.now(), sawBoardAt: null, lastSeen: Date.now(),
-            project: defaultProject, projectRevision: 1 });
+            project: runtime.defaultProject, projectRevision: 1 });
         recordSignIn(held.account, "signed in", "one-time link");
         response.setHeader("Set-Cookie", `${SESSION_COOKIE}=${id}; HttpOnly; SameSite=Strict; Path=/${cookieSecure}`);
         return redirect(response, "/chat");
@@ -429,44 +435,58 @@ ${reauth(html `<label>Password <input type="password" name="token" autocomplete=
         const account = store.accountOf(signedIn.account);
         const id = randomBytes(32).toString("hex");
         sessions.set(id, { ...arrival(request), name: signedIn.account, csrf: randomBytes(32).toString("hex"), role: account.role, generation: account.generation, createdAt: Date.now(), sawBoardAt: null, lastSeen: Date.now(),
-            project: defaultProject, projectRevision: 1, sso: { at: handoff.checkedAt ?? 0 } });
+            project: runtime.defaultProject, projectRevision: 1, sso: { at: handoff.checkedAt ?? 0 } });
         recordSignIn(signedIn.account, "signed in", settings.label);
         response.setHeader("Set-Cookie", [signInSpent("/login/sso/finish"), `${SESSION_COOKIE}=${id}; HttpOnly; SameSite=Strict; Path=/${cookieSecure}`]);
         return redirect(response, handoff.returnTo);
     }
     async function signupSend(ctx) {
         const { request, response } = ctx;
+        // A re-shown form posts again: its Origin must name this console too (signup-gate.ts).
+        response.setHeader("Referrer-Policy", "same-origin");
         // Only while the table is empty, only with the printed code, only
         // five tries: the bootstrap door underneath is atomic, so two first
         // visitors serialize to one owner.
         if (options.setupCode === undefined || store.listApprovers().length > 0) {
-            return page(response, 409, loginPage("an account already exists — sign in"));
+            return page(response, 409, loginPage("An account already exists. Sign in."));
         }
         if (runtime.setupAttemptsLeft <= 0) {
-            return page(response, 403, signupPage("too many wrong codes — restart the server to get a fresh code", 0));
+            return page(response, 403, signupPage(null, 0));
+        }
+        // Another site's post (or one without this page's cookie) is refused before it can spend a try.
+        if (!signupFromHere(request, runtime.allowedHost)) {
+            request.resume();
+            response.setHeader("Set-Cookie", signupCookie(cookieSecure));
+            return page(response, 403, signupPage("This form had expired, so it was reloaded. Enter the details again.", runtime.setupAttemptsLeft));
         }
         const body = readForm(await form(request), CONSOLE_FORMS.signup);
         const code = (body.get("code") ?? "").trim();
         const name = (body.get("name") ?? "").trim();
         const password = body.get("password") ?? "";
-        const given = Buffer.from(code.padEnd(64, " "), "utf8");
-        const wanted = Buffer.from(options.setupCode.padEnd(64, " "), "utf8");
-        if (code === "" || !timingSafeEqual(given, wanted)) {
+        // Re-read after the body: concurrent posts all waited above, and only the tries still left may be compared.
+        // From here to the decrement nothing awaits, so check and spend are one step.
+        if (runtime.setupAttemptsLeft <= 0) {
+            return page(response, 403, signupPage(null, 0));
+        }
+        if (!setupCodeMatches(code, options.setupCode)) {
             runtime.setupAttemptsLeft -= 1;
-            return page(response, 403, signupPage("that is not the setup code the server printed", runtime.setupAttemptsLeft));
+            // What was typed comes back except the code and the password (never echoed); the count rides the code's note.
+            return page(response, 403, signupPage(runtime.setupAttemptsLeft > 0
+                ? { field: "code", text: "That isn't the setup code Toolroll printed. Check the terminal and try again." }
+                : "That wasn't the setup code, and that was the last try. Restart Toolroll to get a new code.", runtime.setupAttemptsLeft, name));
         }
-        if (!/^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/.test(name)) {
-            return page(response, 400, signupPage("a username is letters, digits, dots, dashes — up to 64", runtime.setupAttemptsLeft));
+        if (!SIGNUP_NAME.test(name)) {
+            return page(response, 400, signupPage({ field: "name", text: "Use only letters, digits, dots, dashes or underscores, starting with a letter or digit." }, runtime.setupAttemptsLeft, name));
         }
-        if (password.length < 8) {
-            return page(response, 400, signupPage("a password is at least 8 characters", runtime.setupAttemptsLeft));
+        if (password.length < SIGNUP_PASSWORD_MIN) {
+            return page(response, 400, signupPage({ field: "password", text: `Use at least ${SIGNUP_PASSWORD_MIN} characters.` }, runtime.setupAttemptsLeft, name));
         }
         const made = store.bootstrapApproverIfNone(name, hashPassword(password), clock());
         if (!made.ok)
-            return page(response, 409, loginPage("an account already exists — sign in"));
+            return page(response, 409, loginPage("An account already exists. Sign in."));
         const authenticated = authenticateAccount(store, name, password);
         if (authenticated === null || !authenticated.ok)
-            return page(response, 500, loginPage("the account was created but could not sign in — try again"));
+            return page(response, 500, loginPage("The account was created, but signing in failed. Sign in with it now."));
         const id = randomBytes(32).toString("hex");
         sessions.set(id, {
             ...arrival(request),
@@ -477,7 +497,7 @@ ${reauth(html `<label>Password <input type="password" name="token" autocomplete=
             createdAt: Date.now(),
             sawBoardAt: null,
             lastSeen: Date.now(),
-            project: defaultProject,
+            project: runtime.defaultProject,
             projectRevision: 1,
             // A password typed on this computer starts this session's freshness window (cockpit B2); from anywhere else, never.
             ...(fromThisComputer(request) ? { passwordAt: Date.now() } : {}),
@@ -528,7 +548,7 @@ ${reauth(html `<label>Password <input type="password" name="token" autocomplete=
             createdAt: Date.now(),
             sawBoardAt: null,
             lastSeen: Date.now(),
-            project: defaultProject,
+            project: runtime.defaultProject,
             projectRevision: 1,
             // A password typed to sign in on this computer starts this session's freshness window (cockpit B2); from anywhere
             // else (a phone, a proxy) it signs in and proves nothing more.
@@ -615,7 +635,7 @@ ${reauth(html `<label>Password <input type="password" name="token" autocomplete=
             createdAt: Date.now(),
             sawBoardAt: null,
             lastSeen: Date.now(),
-            project: defaultProject,
+            project: runtime.defaultProject,
             projectRevision: 1,
         });
         response.setHeader("Set-Cookie", `${SESSION_COOKIE}=${id}; HttpOnly; SameSite=Strict; Path=/${cookieSecure}`);

package/dist/server/render-chat.js

@@ -1,3 +1,4 @@
+import { parseFeedbackImage } from "../result-review.js";
 import { assignmentSummaryHtml } from "../assignment-ui.js";
 import {} from "../assignment.js";
 import {} from "../browser-workspace.js";
@@ -610,8 +611,8 @@ export function proposalCardParts(view, inert, decision, returnTo = null) {
         const snapshot = payload["snapshot"];
         const ids = Array.isArray(payload["notes"]) ? payload["notes"] : [];
         const selected = snapshot?.notes.filter(one => ids.includes(one.id)) ?? [];
-        const notes = [...selected, ...(text("note") === "" ? [] : [{ note: text("note"), path: text("path") || null, line: typeof payload["line"] === "number" ? payload["line"] : null }])];
-        what = html `<h3>${text("taskTitle") || task}</h3><ul class="proposal-review-notes">${notes.map(one => html `<li>${one.path === null ? "" : html `<span class="mono">${one.path}${one.line === null ? "" : html `:${one.line}`}</span> · `}${one.note}</li>`)}</ul>${text("operation") === "revise" ? html `<p class="meta">Updates this task. Your approval settings apply.</p>` : html `<p class="meta">No work starts.</p>`}`;
+        const notes = [...selected, ...(text("note") === "" ? [] : [{ note: text("note"), path: text("path") || null, line: typeof payload["line"] === "number" ? payload["line"] : null, image: parseFeedbackImage(payload["image"]) || null }])];
+        what = html `<h3>${text("taskTitle") || task}</h3><ul class="proposal-review-notes">${notes.map(one => html `<li>${one.image == null ? "" : html `<a href="/r/${one.image.run}/evidence/${one.image.artifact}">Screenshot ${one.image.artifact} · result #${one.image.run}</a><br>`}${one.path === null ? "" : html `<span class="mono">${one.path}${one.line === null ? "" : html `:${one.line}`}</span> · `}${one.note}</li>`)}</ul>${text("operation") === "revise" ? html `<p class="meta">Updates this task. Your approval settings apply.</p>` : html `<p class="meta">No work starts.</p>`}`;
     }
     else if (view.kind === "next") {
         what = html `<h3>Move <a href="${taskHref(task)}">${task}</a> to the front</h3>${facts(["current position", html `${String(payload["position"] ?? "?")} of ${String(payload["of"] ?? "?")}`], ["project", mono(repoId)])}`;

package/dist/server/render-pages.d.ts

@@ -3,7 +3,7 @@ import { type TaskOrigin } from "../task-source.js";
 import { type Html } from "../html.js";
 import { type AssignmentSnapshot } from "../assignment.js";
 import { type BoardCard } from "../board.js";
-import { type BrowserLimits } from "../browser-workspace.js";
+import { type BrowserLimits, type BrowserProjectsView } from "../browser-workspace.js";
 import { type CheckLevel } from "../check-levels.js";
 import { type DispatchDiagnosis } from "../dispatch.js";
 import { type FirstRunStep } from "../first-run.js";
@@ -112,6 +112,16 @@ export declare function inboxPage(chrome: Chrome, data: {
     unread?: readonly InboxTab[];
 }): Screen;
 /** System: the machinery — workers, background service, workspaces. */
+/** Start a builder: the one command, as text to select (/start-builder, where every "Connect a builder" leads, and
+ * /system#builder). `project`: the open project's name, when the viewer may see it; `connected`: whether a builder
+ * that may build there is checking in (null: say nothing); `managed`: whether this person can start one themselves
+ * (registering a builder takes an instance operator), else who to ask. */
+export declare function startBuilderHtml(data: {
+    heading: "h1" | "h2";
+    project: string | null;
+    connected: boolean | null;
+    managed: boolean;
+}): Html;
 export declare function systemPage(chrome: Chrome, data: {
     agents: {
         phase: "plan" | "build" | "repair" | "review";
@@ -441,7 +451,7 @@ export declare function projectsPage(chrome: Chrome, recent: {
     path: string;
     name: string;
     lastOpenedAt: string;
-}[], candidates: string[], open: string | null, problem: string | null, _unscopedMode: boolean, browsable?: boolean, onboard?: OnboardCardState | null, peeks?: Record<string, ProjectPeek | null>, returnTo?: string, pullRequestsOn?: (path: string) => boolean, checkLevelOf?: (path: string) => CheckLevel): Screen;
+}[], candidates: string[], open: string | null, problem: string | null, _unscopedMode: boolean, browsable?: boolean, onboard?: OnboardCardState | null, peeks?: Record<string, ProjectPeek | null>, returnTo?: string, pullRequestsOn?: (path: string) => boolean, checkLevelOf?: (path: string) => CheckLevel, activity?: BrowserProjectsView["activity"]): Screen;
 /** The no-script "move to the front" sentinel: the form cannot name the
  * front of a partition, so the handler resolves it (slice 1b, fix 1). */
 export declare const QUEUE_FRONT = "__TOP__";

package/dist/server/render-pages.js

@@ -1,3 +1,4 @@
+import { activityMetrics, activityScope, activityLimit } from '../project-activity.js';
 /** Everyday console pages: home, inbox, board, work, projects, fleet and the queue. */
 import { originNote } from "../task-source.js";
 import { html, htmlString, joinHtml, postForm, replaceMarkup, reauth } from "../html.js";
@@ -9,13 +10,14 @@ import {} from "../dispatch.js";
 import {} from "../first-run.js";
 import {} from "../gaps.js";
 import { limitsHtml } from "../limits-ui.js";
-import { ASK_LABEL, ASKS } from "../needs-you.js";
+import { ASK_LABEL, ASKS, START_BUILDER_COMMAND } from "../needs-you.js";
 import {} from "../onboard.js";
 import {} from "../peek.js";
 import { projectName } from "../project.js";
 import {} from "../proof.js";
 import {} from "../quality.js";
 import { isAlive as runnerAlive } from "../runner.js";
+import { agentModelName, modelName } from "../model-names.js";
 import {} from "../scope.js";
 import {} from "../store.js";
 import { runCostWords, spendLine, tally } from "../summary.js";
@@ -80,9 +82,10 @@ export function inboxPage(chrome, data) {
         : html `<h2>Supply a requirement</h2><p class="hint">approved work is ready except for these — fill one and its tasks start</p>${joinHtml(data.gaps.map(gap => html `<p class="row"><a href="/caps">${gap.key}</a> <span class="meta">frees ${gap.unblocks.length} task${gap.unblocks.length > 1 ? "s" : ""}</span><span class="right meta">how to fix →</span></p>`), "\n")}`;
     // The first-run steps, until the first Ready result: each is done or
     // shows the one action that does it.
-    const wizard = data.wizard === null
+    const steps = data.wizard;
+    const wizard = steps === null
         ? null
-        : html `<div class="card" data-first-run><p><strong>Get to your first result</strong></p>${joinHtml(data.wizard.map(step => html `<p class="row" data-step="${step.key}"><span class="mono" aria-hidden="true">${step.done ? "✓" : "○"}</span> <strong>${step.title}</strong>${step.checking ? html ` <span class="meta">checking…</span>` : step.action === null ? html ` <span class="meta">done</span>`
+        : html `<div class="card" data-first-run><p><strong>Get to your first result</strong></p>${joinHtml(steps.map(step => html `<p class="row" data-step="${step.key}"><span class="mono" aria-hidden="true">${step.done ? "✓" : "○"}</span> <strong>${step.title}</strong>${step.checking ? html ` <span class="meta">checking…</span>` : step.action === null ? html ` <span class="meta">done</span>`
             : step.action.kind === "link" ? html ` <a href="${step.action.href}">${step.action.label}</a>`
                 : html ` <code>${step.action.command}</code>`}</p>`), "\n")}</div>`;
     const noWorker = data.worker.answering > 0
@@ -146,6 +149,20 @@ export function inboxPage(chrome, data) {
     });
 }
 /** System: the machinery — workers, background service, workspaces. */
+/** Start a builder: the one command, as text to select (/start-builder, where every "Connect a builder" leads, and
+ * /system#builder). `project`: the open project's name, when the viewer may see it; `connected`: whether a builder
+ * that may build there is checking in (null: say nothing); `managed`: whether this person can start one themselves
+ * (registering a builder takes an instance operator), else who to ask. */
+export function startBuilderHtml(data) {
+    const where = data.project === null ? null : html ` to <strong>${data.project}</strong>`;
+    const state = data.connected === null ? null
+        : data.connected ? html `<p>A builder is connected${where}. Approved tasks there start on their own.</p>`
+            : html `<p><strong>No builder is connected</strong>${where}. Tasks wait until one is.</p>`;
+    const title = data.heading === "h1" ? html `<h1 id="builder-heading">Start a builder</h1>` : html `<h2 id="builder-heading">Start a builder</h2>`;
+    return html `<section id="builder" aria-labelledby="builder-heading">${title}<div class="card">${state}<p>On the computer where ${data.project ?? "the project"} lives, open the project's folder in a terminal and run:</p><p><code class="start-builder-command" style="user-select:all">${START_BUILDER_COMMAND}</code></p>${data.managed
+        ? html `<p class="meta">Keep it running. Approved tasks start on their own. The console alone (<code>toolroll serve</code>) doesn't build.</p>`
+        : html `<p class="meta">Starting a builder takes someone who manages this Toolroll. Ask them to run it there; your tasks start on their own once it connects.</p>`}</div></section>`;
+}
 export function systemPage(chrome, data) {
     const nowMs = data.now.getTime();
     const runnerCards = data.runners
@@ -186,16 +203,15 @@ export function systemPage(chrome, data) {
                 ? html `set for the whole installation${one.setBy === null ? null : html ` by ${one.setBy}`}`
                 : html `the default — nothing configured`;
         const dollars = one.provider === "claude" ? null : html ` · <span title="this provider reports tokens, not dollars — its runs land as unmeasured spend">no dollar costs</span>`;
-        return html `<p class="row"><span class="mono">${one.phase}</span> <strong>${one.provider ?? ""}</strong>${one.model === null || one.model === undefined ? html ` <span class="meta">(its default model)</span>` : html ` · <span class="mono">${one.model}</span>`}<span class="right meta">${who}${dollars}</span></p><p class="meta" style="margin-top:0">${PHASE_SAID[one.phase] ?? ""}</p>`;
+        return html `<p class="row"><span class="mono">${one.phase}</span> <strong>${one.provider === null || one.provider === undefined ? "" : agentModelName(one.provider, one.model ?? null)}</strong>${one.model === null || one.model === undefined ? html ` <span class="meta">(its default model)</span>` : null}<span class="right meta">${who}${dollars}</span></p><p class="meta" style="margin-top:0">${PHASE_SAID[one.phase] ?? ""}</p>`;
     }), "\n");
-    const agentsCard = html `<h2>Agents</h2><p class="meta">Which AI provider runs each phase — changed from the terminal with your credentials (<code>toolroll config</code>), never by a browser click</p><div class="card">${agentLines}<p class="meta">Repair always stays on the provider that built — only its model can differ. A schedule's task filed under an approval moved from a routine is pinned to the agents approved then.</p></div>`;
+    const agentsCard = html `<h2>Agents</h2><p class="meta">Which AI provider runs each phase. An instance operator changes them in <a href="/settings/models">Settings → Models</a> with their password, or with <code>toolroll config</code>.</p><div class="card">${agentLines}<p class="meta">Repair always stays on the provider that built — only its model can differ. A schedule's task filed under an approval moved from a routine is pinned to the agents approved then.</p></div>`;
     return screen("system", joinHtml([
         html `<h1>System</h1>`,
         html `<p class="hint">builders execute tasks in isolated temporary copies of each project</p>`,
         agentsCard,
-        cards.length === 0
-            ? html `<p class="meta">No builder is connected yet. On the machine where the project lives, open that folder and run <code>toolroll up</code>.</p>`
-            : html `<div class="cards">${cards}</div>`,
+        cards.length === 0 ? null : html `<div class="cards">${cards}</div>`,
+        startBuilderHtml({ heading: "h2", project: null, connected: data.runners.some(one => one.retiredAt === null && runnerAlive(one, data.now)) ? null : false, managed: true }),
         data.outboxPending > 0 ? html `<p class="meta">Notifications: ${data.outboxPending} pending delivery</p>` : null,
         (data.externalWork ?? []).length === 0
             ? null
@@ -372,11 +388,11 @@ export function boardBody(data, ciRed) {
             ? null
             : html `<span class="steps" role="img" aria-label="${`step ${step + 1} of ${BUILD_STEPS.length}: ${BUILD_STEPS[step]}`}">${BUILD_STEPS.map((_, index) => html `<i class="${index < step ? "on" : index === step ? "now" : ""}"></i>`)}</span>`;
         // Who, which model and which branch, as one muted line: words in Geist, the model and branch in mono.
-        const model = claim.model === null ? null : `${claim.provider !== null && claim.provider !== "claude" ? `${claim.provider} · ` : ""}${claim.model}`;
+        const model = claim.model === null ? null : claim.provider === null ? modelName(null, claim.model) : agentModelName(claim.provider, claim.model);
         const branch = claim.branch === null ? null : `${claim.branch}${workspace === null ? "" : ` · ${workspace}`}`;
         const who = joinHtml([
             html `<span>${claim.runner}</span>`,
-            model === null ? null : html `<span class="mono">${model}</span>`,
+            model === null ? null : html `<span>${model}</span>`,
             branch === null ? null : html `<span class="mono">${branch}</span>`,
         ].filter((one) => one !== null), html `<span aria-hidden="true"> · </span>`);
         return html `<a class="lane-card building" href="${card.href}" data-vt="${card.taskId}"><span class="t"><span class="dot dot-ok pulse"></span>${card.title}</span>${steps}<span class="live-line"><span class="stage">${live}</span>${tickingClock(claim.claimedAt, data.now)}</span><span class="id">${card.taskId}</span><span class="who">${who}</span>${chips([
@@ -477,7 +493,7 @@ export function homePage(chrome, data) {
     // an operator actually watches this page, so it re-renders itself.
     const building = data.building.length === 0
         ? null
-        : html `<h2>Building now</h2><p class="hint">live builds — this page refreshes itself every 10 seconds while anything runs</p><div class="cards">${data.building.map(claim => html `<a class="stat-card" href="${taskHref(claim.taskId)}" style="text-decoration:none"><span class="k"><span class="dot dot-ok pulse"></span>${claim.taskId}</span><span class="v">${claim.runner} · ${Math.max(1, Math.round((data.now.getTime() - new Date(claim.claimedAt).getTime()) / 60_000))}m elapsed${claim.model === null ? null : html ` · ${claim.model}`}</span></a>`)}</div>`;
+        : html `<h2>Building now</h2><p class="hint">live builds — this page refreshes itself every 10 seconds while anything runs</p><div class="cards">${data.building.map(claim => html `<a class="stat-card" href="${taskHref(claim.taskId)}" style="text-decoration:none"><span class="k"><span class="dot dot-ok pulse"></span>${claim.taskId}</span><span class="v">${claim.runner} · ${Math.max(1, Math.round((data.now.getTime() - new Date(claim.claimedAt).getTime()) / 60_000))}m elapsed${claim.model === null ? null : html ` · ${modelName(null, claim.model)}`}</span></a>`)}</div>`;
     // THE FLEET: runners by heartbeat age, worktrees by lease state, the watch.
     const nowMs = data.now.getTime();
     const runnerCards = data.runners
@@ -797,7 +813,7 @@ export function portfolioOverview(data) {
     const outcomeWords = groups.filter(([, count]) => count > 0).map(([word, count]) => `${count} ${word}`).join(" · ");
     const summary = tally(data.runs24);
     // ---- running: current live claims, project chips on ----
-    const liveRows = joinHtml(data.live.map(one => html `<p class="row"><a href="${taskHref(one.taskId)}">${one.taskId}</a>${projectChip(one.repo)} <span class="badge badge-running">Running</span> <span class="mono meta">${one.runner}${one.model === null ? null : html ` · ${one.model}`} · <time data-elapsed-since="${one.claimedAt}"></time></span></p>`), "\n");
+    const liveRows = joinHtml(data.live.map(one => html `<p class="row"><a href="${taskHref(one.taskId)}">${one.taskId}</a>${projectChip(one.repo)} <span class="badge badge-running">Running</span> <span class="meta"><span class="mono">${one.runner}</span>${one.model === null ? null : html ` · ${modelName(null, one.model)}`} · <time data-elapsed-since="${one.claimedAt}"></time></span></p>`), "\n");
     // ---- the ledger: terminal runs started in the window, one chip each ----
     const chipClass = (outcome) => outcome === "built" || outcome === "no-change" ? "badge-done" : outcome === "failed" ? "badge-failed" : "";
     const prLink = (one) => {
@@ -808,7 +824,7 @@ export function portfolioOverview(data) {
         const safe = safePrUrl(one.prUrl);
         return safe === null ? html ` · PR #${one.prNumber}` : html ` · <a href="${safe}">PR #${one.prNumber}</a>`;
     };
-    const ledgerRows = joinHtml(data.ledger.map(one => html `<p class="row"><a href="/r/${one.runId}">${one.title}</a>${projectChip(one.repo)} <span class="badge ${chipClass(one.outcome)}">${sentenceCase(one.outcome)}</span> ${one.role === "scout" ? html `<a class="badge" href="${taskHref(one.taskId)}#report">Report</a> ` : null}<span class="mono meta">${one.provider === null ? "" : one.provider}${one.model === null ? null : html ` · ${one.model}`}${one.ranMinutes === null ? null : html ` · ${one.ranMinutes}m`} · ${runCostWords({ authMode: one.authMode, costUsd: one.costUsd, tokensIn: null, tokensOut: null })}${prLink(one)}</span></p>`), "\n");
+    const ledgerRows = joinHtml(data.ledger.map(one => html `<p class="row"><a href="/r/${one.runId}">${one.title}</a>${projectChip(one.repo)} <span class="badge ${chipClass(one.outcome)}">${sentenceCase(one.outcome)}</span> ${one.role === "scout" ? html `<a class="badge" href="${taskHref(one.taskId)}#report">Report</a> ` : null}<span class="meta">${one.provider === null ? (one.model === null ? "" : modelName(null, one.model)) : agentModelName(one.provider, one.model)}${one.ranMinutes === null ? null : html ` · ${one.ranMinutes}m`} · ${runCostWords({ authMode: one.authMode, costUsd: one.costUsd, tokensIn: null, tokensOut: null })}${prLink(one)}</span></p>`), "\n");
     return joinHtml([
         html `<div class="control-room-head"><div><h1>Portfolio</h1><p class="meta">Every project and live build in one place</p></div><div class="actions"><a class="badge" href="/tasks/new">+ New task</a><a class="badge" href="/board?scope=all">Full board →</a></div></div>`,
         data.saturated ? html `<div class="problem">This overview reached its 200-task display cap; the task list holds the rest.</div>` : null,
@@ -906,7 +922,10 @@ export function githubReposPage(chrome, data) {
         html `<p class="row" style="margin-top:.6rem"><a class="badge" href="/projects">← back to projects</a></p>`,
     ], "\n"), { chrome });
 }
-export function projectsPage(chrome, recent, candidates, open, problem, _unscopedMode, browsable = false, onboard = null, peeks = {}, returnTo = "/", pullRequestsOn, checkLevelOf) {
+export function projectsPage(chrome, recent, candidates, open, problem, _unscopedMode, browsable = false, onboard = null, peeks = {}, returnTo = "/", pullRequestsOn, checkLevelOf, activity) {
+    const activityHtml = activity === undefined ? null : html `<details><summary>Activity · ${activity.project}</summary>${activity.report === null
+        ? html `<p role="alert">Activity is unavailable.</p><a href="/projects">Reload</a>`
+        : html `<p>${activityScope(activity.report)}</p>${activity.report.truncated ? html `<p>${activityLimit(activity.report)}</p>` : null}${activityMetrics(activity.report).map(metric => html `<details><summary>${metric.label} · ${metric.value}</summary><p>${metric.detail}</p>${metric.rows.length === 0 ? html `<p>No tasks in this group.</p>` : html `<ul>${metric.rows.map(row => html `<li><a href="${row.href}">${row.title}</a> · Recorded checks: ${row.checks}</li>`)}</ul>`}</details>`)}`}</details>`;
     // The onboarding card (repo onboarding, findings 1-39): preview first,
     // then a password-confirmed clone into a configured root. Disabled
     // states explain themselves in words (finding 28/39).
@@ -1032,11 +1051,12 @@ export function projectsPage(chrome, recent, candidates, open, problem, _unscope
         recentItems.length === 0 && candidateItems.length === 0
             ? html `<div class="card"><p><strong>Nothing to open yet.</strong></p><p class="meta">Add one below — opening it registers it here for next time.</p></div>`
             : null,
+        activityHtml,
         recentItems.length > 0 ? html `<h2>Recent</h2>${cards(recentItems)}` : null,
         candidateItems.length > 0 ? html `<h2>Available</h2>${cards(candidateItems)}` : null,
         addCard,
     ], "\n"), { chrome, workspace: { view: {
-                kind: "projects", choosing, problem, returnTo,
+                kind: "projects", choosing, problem, returnTo, ...(activity === undefined ? {} : { activity }),
                 recent: recent.map(one => rowOf(one.path, one.name, one.lastOpenedAt)),
                 available: candidates.map(path => rowOf(path, projectName(path), null)),
                 add: { browse: browsable ? "/projects/browse" : null, github: onboard === null ? null : "/projects/github", html: htmlString(addForms) },
@@ -1099,7 +1119,7 @@ export function fleetBody(queued, building, runners, queueRevision, visibleRepo)
         const head = retired
             ? html `<p class="meta">This worker is retired — drag these elsewhere, or register the name again</p>`
             : html `${postForm("/queue/note", html `<input type="text" name="note" class="runner-note" value="${runner.queueNote ?? ""}" data-initial="${runner.queueNote ?? ""}" placeholder="what this worker is working through" aria-label="column note" maxlength="200">`, { attrs: { class: "row" }, hidden: { from: "fleet", runner: runner.name } })}<p class="meta">${runnerAlive(runner, new Date()) ? "alive" : "quiet"} · ${live.length}/${runner.capacity} building</p>`;
-        const buildingCards = joinHtml(live.map(claim => html `<div class="lane-card" data-taken="1"><p class="row"><span class="dot dot-ok pulse"></span> ${claim.taskId}</p><p class="row meta">building${chip(claim.repo ?? null)}${claim.model === null ? null : html ` · ${claim.model}`} · ${Math.max(1, Math.round((Date.now() - new Date(claim.claimedAt).getTime()) / 60_000))}m</p></div>`), "\n");
+        const buildingCards = joinHtml(live.map(claim => html `<div class="lane-card" data-taken="1"><p class="row"><span class="dot dot-ok pulse"></span> ${claim.taskId}</p><p class="row meta">building${chip(claim.repo ?? null)}${claim.model === null ? null : html ` · ${modelName(null, claim.model)}`} · ${Math.max(1, Math.round((Date.now() - new Date(claim.claimedAt).getTime()) / 60_000))}m</p></div>`), "\n");
         const queuedCards = joinHtml(own.map(queuedCardOf), "\n");
         const empty = live.length === 0 && own.length === 0
             ? html `<p class="meta lane-empty">${retired ? "nothing left" : "idle — will take from the shared queue"}</p>`

package/dist/server/render-people.d.ts

@@ -29,5 +29,17 @@ export declare function wrongHostPage(facts: {
     served: string;
     command: string | null;
 }): Html;
-/** The first-account page (setup review): shown only while no approver exists. */
-export declare function signupPage(problem: string | null, attemptsLeft: number): Html;
+/** Which field a first-account refusal is about (null: the page itself, as when the tries are spent). */
+export type SignupProblem = {
+    field: "code" | "name" | "password" | null;
+    text: string;
+};
+/** The username rule, said once for the server's check, the input's `pattern` (anchored by the browser; `\-` so the
+ * v-flag parse accepts it) and the hint. */
+export declare const SIGNUP_NAME: RegExp;
+export declare const SIGNUP_PASSWORD_MIN = 8;
+/** The first-account page (setup review): shown only while no approver exists. Rules are stated up front and match
+ * the inputs' own constraints. On a refusal the typed username comes back; the setup code and the password never do.
+ * The message sits under the field it is about, announced (role="alert"), with that field aria-invalid, described by
+ * it and focused, so it works without script (this page has none). */
+export declare function signupPage(problem: SignupProblem | string | null, attemptsLeft: number, typedName?: string): Html;

package/dist/server/render-people.js

@@ -99,21 +99,44 @@ ${facts.command === null ? "" : html `<p>To use this address, stop Toolroll (Ctr
 <p class="meta">On that computer, ${code(`http://${facts.served}/`)} always works. Other addresses need your say-so, so no other website can reach it.</p>
 </main></body></html>`;
 }
-/** The first-account page (setup review): shown only while no approver exists. */
-export function signupPage(problem, attemptsLeft) {
-    return shell("Toolroll", joinHtml([
-        html `<div class="login-viewport"><div class="login-shell">`,
-        html `<h1 class="so-wordmark login-brand">${BRAND_HTML}</h1>`,
+/** The username rule, said once for the server's check, the input's `pattern` (anchored by the browser; `\-` so the
+ * v-flag parse accepts it) and the hint. */
+export const SIGNUP_NAME = /^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/;
+const SIGNUP_NAME_PATTERN = "[A-Za-z0-9][A-Za-z0-9._\\-]{0,63}";
+export const SIGNUP_PASSWORD_MIN = 8;
+/** The first-account page (setup review): shown only while no approver exists. Rules are stated up front and match
+ * the inputs' own constraints. On a refusal the typed username comes back; the setup code and the password never do.
+ * The message sits under the field it is about, announced (role="alert"), with that field aria-invalid, described by
+ * it and focused, so it works without script (this page has none). */
+export function signupPage(problem, attemptsLeft, typedName = "") {
+    const open = attemptsLeft > 0;
+    // Out of tries, the page always says why and what to do, also when it is simply opened again.
+    const said = typeof problem === "string" ? { field: null, text: problem }
+        : problem ?? (open ? null : { field: null, text: "Too many wrong setup codes. Restart Toolroll to get a new code." });
+    const field = open ? said?.field ?? null : null;
+    const error = (which) => field === which && said !== null ? html `<p class="problem signup-problem" id="signup-problem" role="alert">${said.text}</p>` : "";
+    const describe = (which, hint) => field === which ? html ` aria-invalid="true" aria-describedby="${hint} signup-problem" autofocus` : html ` aria-describedby="${hint}"`;
+    const tries = attemptsLeft === 1 ? "1 try left" : `${attemptsLeft} tries left`;
+    return shell("Create the first account · Toolroll", joinHtml([
+        // Inputs on this page reach a 44px target; the console's shared input rule stops at 36px.
+        html `<style>.signup h1{margin-bottom:1rem}.signup input{min-height:2.75rem}.signup .field-note{margin:.375rem 0 0;font-size:.75rem;line-height:1.45;color:var(--muted-foreground)}.signup .signup-problem{margin:.5rem 0 0}</style>`,
+        html `<div class="login-viewport"><div class="login-shell signup">`,
+        html `<p class="so-wordmark login-brand">${BRAND_HTML}</p>`,
+        html `<h1>Create the first account</h1>`,
         html `<div class="login-card">`,
-        html `<p><strong>Create the first account</strong></p>`,
-        html `<p class="meta">There are no accounts yet. The terminal that started Toolroll printed a setup code; enter it here with the username and password you want.</p>`,
-        problem === null ? "" : html `<div class="problem">${problem}</div>`,
-        attemptsLeft <= 0
+        !open || field === null ? (said === null ? "" : html `<div class="problem" role="alert">${said.text}</div>`) : "",
+        !open
             ? ""
             : postForm("/signup", joinHtml([
-                html `<label>Setup code<input type="text" name="code" inputmode="numeric" autocomplete="one-time-code" autofocus></label>`,
-                html `<label>Username<input type="text" name="name" autocomplete="username" autocapitalize="none" spellcheck="false" required></label>`,
-                html `<label>Password<input type="password" name="password" autocomplete="new-password"></label>`,
+                html `<label>Setup code<input type="text" name="code" inputmode="numeric" autocomplete="one-time-code" autocapitalize="none" spellcheck="false" required${describe("code", "signup-code-note")}${field === null ? " autofocus" : ""}></label>`,
+                html `<p class="field-note" id="signup-code-note">Printed in the terminal that started Toolroll. ${tries}.</p>`,
+                error("code"),
+                html `<label>Username<input type="text" name="name" value="${typedName}" autocomplete="username" autocapitalize="none" spellcheck="false" required maxlength="64" pattern="${SIGNUP_NAME_PATTERN}"${describe("name", "signup-name-note")}></label>`,
+                html `<p class="field-note" id="signup-name-note">Letters, digits, dots, dashes or underscores, starting with a letter or digit. Up to 64.</p>`,
+                error("name"),
+                html `<label>Password<input type="password" name="password" autocomplete="new-password" required minlength="${SIGNUP_PASSWORD_MIN}"${describe("password", "signup-password-note")}></label>`,
+                html `<p class="field-note" id="signup-password-note">At least ${SIGNUP_PASSWORD_MIN} characters.</p>`,
+                error("password"),
                 html `<button type="submit">Create account and sign in</button>`,
             ], "\n"), { signedOut: true }),
         html `</div>`,