toolroll 0.9.86 → 0.9.88

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

@@ -1,7 +1,19 @@
 import { type Html } from "../html.js";
-/** The invite's front door: cookie-free, script-free, sensitive by shape.
- * Rendered only for a LIVE token — everything dead gets joinDeadPage. */
-export declare function joinFormPage(token: string, problem: string | null, name: string): Html;
+/** What a live invite grants, said on its join page ("Your access"). Project names only, never paths. */
+export type InviteTerms = {
+    role: "approver" | "viewer";
+    mintedBy: string;
+    expiresAt: string;
+    projects: readonly string[] | null;
+};
+/** Which join field a refusal is about. */
+export type JoinProblem = {
+    field: "name" | "password";
+    text: string;
+};
+/** The invite's front door: cookie-free, script-free, sensitive by shape. Rendered only for a LIVE token — everything
+ * dead gets joinDeadPage. A live token's holder reads what it grants before choosing a name and a password. */
+export declare function joinFormPage(token: string, problem: JoinProblem | null, name: string, terms?: InviteTerms | null): Html;
 /** Unknown, expired, revoked, consumed, attempts spent: ONE page (D6). */
 export declare function joinDeadPage(): Html;
 /**
@@ -43,3 +55,12 @@ export declare const SIGNUP_PASSWORD_MIN = 8;
  * 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;
+/** The page a browser sees when answering broke (Wave E): what happened, whether anything changed, a reference for the
+ * log, and two ways on. `read`: the request only read, so nothing can have changed. Holds no error text. */
+export declare function serverErrorPage(options: {
+    updating: boolean;
+    read: boolean;
+    reference: string;
+    at: Date;
+    retry: string | null;
+}): Html;

package/dist/server/render-people.js

@@ -1,34 +1,40 @@
-/** Sign-in, sign-up, join and wrong-host pages. */
+/** Sign-in, sign-up, join and wrong-host pages: pages outside the shell, built from the kit (server/kit.ts outPage).
+ * They carry no script and no session; every refusal names the field it is about. */
 import { BRAND_HTML, shell } from "./chrome.js";
 import { html, joinHtml, postForm, replaceMarkup } from "../html.js";
-/** The invite's front door: cookie-free, script-free, sensitive by shape.
- * Rendered only for a LIVE token — everything dead gets joinDeadPage. */
-export function joinFormPage(token, problem, name) {
-    return shell("Join Toolroll", joinHtml([
-        html `<div class="login-viewport"><div class="login-shell">`,
-        html `<h1 class="so-wordmark login-brand">${BRAND_HTML}</h1>`,
-        html `<p class="meta hint">You were invited. Pick a name and a password to sign in.</p>`,
-        html `<div class="login-card">`,
-        problem === null ? "" : html `<div class="problem" role="alert">${problem}</div>`,
-        postForm(`/join/${token}`, joinHtml([
-            html `<label>Username<input type="text" name="name" autocomplete="username" autocapitalize="none" spellcheck="false" required value="${name}" autofocus></label>`,
-            html `<label>Password<input type="password" name="password" autocomplete="new-password"></label>`,
-            html `<button type="submit">Create my sign-in</button>`,
-        ], "\n"), { signedOut: true }),
-        html `</div>`,
-        html `<p class="login-foot">This link works once, for you.</p>`,
-        html `</div></div>`,
-    ], "\n"), { nav: false });
+import { btn, disclose, facts, notice, outField, outPage } from "./kit.js";
+import { projectName } from "../project.js";
+const ACCESS_WORDS = { approver: ["Can manage and approve", "Create, manage and approve work."], viewer: ["Can view", "Read work and results."] };
+/** The invite's front door: cookie-free, script-free, sensitive by shape. Rendered only for a LIVE token — everything
+ * dead gets joinDeadPage. A live token's holder reads what it grants before choosing a name and a password. */
+export function joinFormPage(token, problem, name, terms = null) {
+    const [access, accessLine] = terms === null ? [null, null] : ACCESS_WORDS[terms.role];
+    const grants = terms === null ? "" : facts([
+        ["Your access", html `${access} · <span class="k-muted">${accessLine}</span>`],
+        ["Projects", terms.projects === null ? "Every project" : terms.projects.length === 0 ? "None yet" : terms.projects.map(one => projectName(one)).join(", ")],
+        ["Expires", `${expiryWords(terms.expiresAt)} · works once`],
+    ]);
+    const form = postForm(`/join/${token}`, joinHtml([
+        outField({ id: "join-name", label: "Choose a username", name: "name", value: name, error: problem?.field === "name" ? problem.text : null,
+            attrs: { autocomplete: "username", autocapitalize: "none", spellcheck: "false", required: true, ...(problem === null ? { autofocus: true } : {}) } }),
+        outField({ id: "join-password", label: "Choose a password", name: "password", type: "password", hint: "At least 8 characters.", error: problem?.field === "password" ? problem.text : null,
+            attrs: { autocomplete: "new-password" } }),
+        btn("Join", { variant: "primary", type: "submit", className: "k-wide" }),
+    ]), { signedOut: true, attrs: { class: "k-form" } });
+    return shell("Join Toolroll", outPage({
+        brand: BRAND_HTML, brandHref: "/login", title: "Join Toolroll",
+        sub: terms === null ? "You were invited. Choose a username and a password to sign in." : html `<b>${terms.mintedBy}</b> invited you. This is what the invite grants:`,
+        body: joinHtml([grants, form]),
+        foot: "This link works once, for you. Joining creates your own account; whoever runs this Toolroll can change what it can do later.",
+    }), { nav: false });
 }
 /** Unknown, expired, revoked, consumed, attempts spent: ONE page (D6). */
 export function joinDeadPage() {
-    return shell("Join Toolroll", html `<div class="login-viewport"><div class="login-shell">
-<h1 class="so-wordmark login-brand">${BRAND_HTML}</h1>
-<div class="login-card">
-<p>This invite link can't be used.</p>
-<p class="meta">Links work once and expire. Ask the person who invited you for a fresh one.</p>
-</div>
-</div></div>`, { nav: false });
+    return shell("Join Toolroll", outPage({
+        brand: BRAND_HTML, brandHref: "/login", title: "This invite link can't be used",
+        sub: "Links work once and expire. Ask the person who invited you for a fresh one.",
+        body: html `<div class="k-acts">${btn("Sign in instead", { href: "/login" })}</div>`,
+    }), { nav: false });
 }
 /**
  * v100: for someone signed in with the identity provider, every step-up
@@ -48,27 +54,31 @@ export function ssoStepUps(page, sso, returnTo) {
     const labelled = replaceMarkup(page, /<label>[^<]*<input\b([^>]*)>\s*<\/label>/g, (_whole, attributes) => stepUp(attributes) ? swap(attributes) : null);
     return replaceMarkup(labelled, /<input\b([^>]*)>/g, (_whole, attributes) => stepUp(attributes) ? swap(attributes) : null);
 }
+/** An expiry as a person reads it: "Thu 5 Nov, 10:42". */
+function expiryWords(iso) {
+    const at = new Date(iso);
+    if (Number.isNaN(at.getTime()))
+        return iso.slice(0, 16).replace("T", " ");
+    return at.toLocaleString("en-GB", { weekday: "short", day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" });
+}
 export function loginPage(problem, returnTo = "/", sso = null) {
+    const form = postForm("/login", joinHtml([
+        outField({ id: "login-name", label: "Username", name: "name", attrs: { autocomplete: "username", autocapitalize: "none", spellcheck: "false", required: true, ...(sso === null ? { autofocus: true } : {}) } }),
+        outField({ id: "login-password", label: "Password", name: "token", type: "password", attrs: { autocomplete: "current-password" } }),
+        btn("Sign in", { variant: sso === null ? "primary" : "outline", type: "submit", className: "k-wide" }),
+    ]), { signedOut: true, returnTo: returnTo === "/" ? null : returnTo, attrs: { class: "k-form" } });
     // v100: with an identity provider, its button comes first and passwords wait behind "Use a password".
-    const provider = sso === null ? "" : html `<a class="button-link login-sso" href="/login/sso${returnTo === "/" ? "" : `?return=${encodeURIComponent(returnTo)}`}">Sign in with ${sso.label}</a>`;
-    return shell("Toolroll", joinHtml([
-        html `<div class="login-viewport"><div class="login-shell">`,
-        html `<h1 class="so-wordmark login-brand">${BRAND_HTML}</h1>`,
-        problem === null || sso === null ? "" : html `<div class="problem" role="alert">${problem}</div>`,
-        provider,
-        sso === null ? "" : html `<details class="login-password"><summary>${sso.operatorsOnly ? "Instance operators: use a password" : "Use a password"}</summary>`,
-        html `<div class="login-card">`,
-        problem === null || sso !== null ? "" : html `<div class="problem" role="alert">${problem}</div>`,
-        postForm("/login", joinHtml([
-            html `<label>Username<input type="text" name="name" autocomplete="username" autocapitalize="none" spellcheck="false" required autofocus></label>`,
-            html `<label>Password<input type="password" name="token" autocomplete="current-password"></label>`,
-            html `<button type="submit">Sign in</button>`,
-        ], "\n"), { signedOut: true, returnTo: returnTo === "/" ? null : returnTo }),
-        html `</div>`,
-        sso === null ? "" : html `</details>`,
-        html `<p class="login-foot">${sso === null ? html `Your login was shown when Toolroll first started, and saved beside its database as <code>up-login.txt</code>.<br>` : ""}No account? Ask whoever runs it for an invite link.</p>`,
-        html `</div></div>`,
-    ], "\n"), { nav: false });
+    const body = sso === null
+        ? joinHtml([problem === null ? "" : html `<div class="k-refusal">${notice(problem)}</div>`, form])
+        : joinHtml([
+            problem === null ? "" : html `<div class="k-refusal">${notice(problem)}</div>`,
+            btn(`Sign in with ${sso.label}`, { variant: "primary", href: `/login/sso${returnTo === "/" ? "" : `?return=${encodeURIComponent(returnTo)}`}`, className: "k-wide" }),
+            disclose(sso.operatorsOnly ? "Instance operators: use a password" : "Use a password", form),
+        ]);
+    return shell("Sign in · Toolroll", outPage({
+        brand: BRAND_HTML, brandHref: "/login", title: "Sign in", body,
+        foot: html `${sso === null ? html `Forgot it? Your first login was shown when Toolroll started, and saved beside its database as <code>up-login.txt</code> on the computer running it.<br>` : ""}No account? Ask whoever runs this Toolroll for an invite link.`,
+    }), { nav: false });
 }
 /**
  * The page for an address the console doesn't answer to (onboarding): what was opened, where it answers, and the exact
@@ -114,32 +124,43 @@ export function signupPage(problem, attemptsLeft, typedName = "") {
     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 error = (which) => field === which && said !== null ? said.text : null;
     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">`,
-        !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" 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>`,
-        html `</div></div>`,
-    ], "\n"), { nav: false });
+    const pageProblem = !open || field === null ? (said === null ? "" : notice(said.text)) : "";
+    const form = !open ? "" : postForm("/signup", joinHtml([
+        outField({ id: "signup-code", label: "Setup code", name: "code", hint: `Printed in the terminal that started Toolroll. ${tries}.`, error: error("code"),
+            attrs: { inputmode: "numeric", autocomplete: "one-time-code", autocapitalize: "none", spellcheck: "false", required: true, ...(field === null ? { autofocus: true } : {}) } }),
+        outField({ id: "signup-name", label: "Username", name: "name", value: typedName, hint: "Letters, digits, dots, dashes or underscores, starting with a letter or digit. Up to 64.", error: error("name"),
+            attrs: { autocomplete: "username", autocapitalize: "none", spellcheck: "false", required: true, maxlength: 64, pattern: SIGNUP_NAME_PATTERN } }),
+        outField({ id: "signup-password", label: "Password", name: "password", type: "password", hint: `At least ${SIGNUP_PASSWORD_MIN} characters. You'll type it again to approve work.`, error: error("password"),
+            attrs: { autocomplete: "new-password", required: true, minlength: SIGNUP_PASSWORD_MIN } }),
+        btn("Create account", { variant: "primary", type: "submit", className: "k-wide" }),
+    ]), { signedOut: true, attrs: { class: "k-form" } });
+    return shell("Create the first account · Toolroll", outPage({
+        brand: BRAND_HTML, brandHref: "/login", title: "Create the first account",
+        sub: "This Toolroll has no accounts yet. The first one can approve work and invite others.",
+        body: joinHtml([pageProblem, form]),
+        foot: "Lost the code? Restart Toolroll and it prints a new one.",
+    }), { nav: false });
+}
+/** The page a browser sees when answering broke (Wave E): what happened, whether anything changed, a reference for the
+ * log, and two ways on. `read`: the request only read, so nothing can have changed. Holds no error text. */
+export function serverErrorPage(options) {
+    if (options.updating) {
+        return shell("Toolroll is updating", outPage({
+            brand: BRAND_HTML, title: "Toolroll is updating",
+            sub: "Work that is running can finish. New work starts again after the update, usually within two minutes.",
+            body: html `<div class="k-acts">${options.retry === null ? "" : btn("Try again", { variant: "primary", href: options.retry })}${btn("Go to Home", { href: "/" })}</div>`,
+        }), { nav: false });
+    }
+    return shell("Something went wrong", outPage({
+        brand: BRAND_HTML, title: "Something went wrong on our side",
+        sub: options.read ? "Toolroll couldn't load this page. Nothing you did was lost, and nothing was approved or sent."
+            : "Toolroll couldn't finish that. Open the page again to see what changed before you try again.",
+        body: joinHtml([
+            facts([["Reference", html `<span class="k-mono">${options.reference}</span>`], ["When", options.at.toISOString().slice(0, 16).replace("T", " ")]]),
+            html `<div class="k-acts">${options.retry === null ? "" : btn("Try again", { variant: "primary", href: options.retry })}${btn("Go to Home", { href: "/" })}</div>`,
+        ]),
+        foot: "If it keeps happening, the reference helps whoever runs this Toolroll find it in the log.",
+    }), { nav: false });
 }

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

@@ -0,0 +1,103 @@
+import { type Html } from "../html.js";
+import { type ListOutcome } from "../onboard.js";
+import { type ProjectOutcomes } from "../project-outcomes.js";
+import { type Chrome, type Screen } from "./chrome.js";
+import { type OnboardCardState, type ProjectPeek } from "./render-pages.js";
+/** A path as a person reads it: the home folder as ~. */
+export declare function shortPathOf(path: string): string;
+/** A project's page address. Names are folder names, so two projects can share one: then the path picks. */
+export declare function projectHref(name: string, path: string, ambiguous: boolean): string;
+/** What a project's counts say on one line ("2 need you · 1 running"); null when it wasn't scanned. */
+export declare function peekWords(peek: ProjectPeek | null): string | null;
+/** Where a message belongs: next to the GitHub link, in the clone review, the page's own refusal, or a neutral line
+ * (a finished clone). */
+export type ProblemAt = "link" | "clone" | "open" | "said" | null;
+/** The add ways, as the drawer (and the no-script page) shows them: GitHub, then this computer. */
+export declare function addWaysHtml(data: {
+    browsable: boolean;
+    onboard: OnboardCardState | null;
+    returnTo: string;
+    linkProblem: string | null;
+}): Html;
+/** The clone review a preview minted (single use, ten minutes): what lands where, then the step-up. */
+export declare function cloneReviewHtml(onboard: OnboardCardState | null, problem: string | null): Html | null;
+/** The projects list: the React view draws it from `workspace.view`; the body is the same page for a browser
+ * without the workspace script (and what the sensitivity check reads). */
+export declare function projectsPage(chrome: Chrome, data: {
+    recent: readonly {
+        path: string;
+        name: string;
+        lastOpenedAt: string;
+    }[];
+    candidates: readonly string[];
+    open: string | null;
+    problem: string | null;
+    problemAt: ProblemAt;
+    browsable: boolean;
+    onboard: OnboardCardState | null;
+    peeks: Readonly<Record<string, ProjectPeek | null>>;
+    returnTo: string;
+}): Screen;
+export type ProjectPageTask = {
+    href: string;
+    title: string;
+    reason: string;
+    needs: boolean;
+    since: string | null;
+};
+/** One project's reading page. Reads only: Open project posts to /projects/select, which switches this session. */
+export declare function projectPage(chrome: Chrome, data: {
+    name: string;
+    path: string;
+    selfHref: string;
+    open: boolean;
+    openedAt: string | null;
+    peek: ProjectPeek | null;
+    tasks: readonly ProjectPageTask[];
+    moreTasks: number;
+    checks: {
+        href: string;
+        level: string;
+    } | null;
+    pullRequests: {
+        href: string;
+        on: boolean;
+    } | null;
+    knowledgeHref: string;
+    settingsHref: string | null;
+    activity: {
+        report: ProjectOutcomes | null;
+    } | null;
+    now: Date;
+}): Screen;
+export declare function browsePage(chrome: Chrome, data: {
+    at: string;
+    root: string;
+    roots: readonly string[];
+    parent: string | null;
+    entries: readonly {
+        name: string;
+        path: string;
+        git: boolean;
+    }[];
+    /** Projects already added here: their row says Open, not Add and open. */
+    registered: ReadonlySet<string>;
+}): Screen;
+/** The account's repositories with ONE honest action each: open (already a project here), add and open (a clone
+ * under a projects folder), or the existing preview-and-password clone ceremony. */
+export declare function githubReposPage(chrome: Chrome, data: {
+    /** The last listing; null until someone lists (a POST: listing asks GitHub, so a page visit never does). */
+    listed: ListOutcome | null;
+    local: ReadonlyMap<string, string>;
+    registered: ReadonlySet<string>;
+    cloneReady: boolean;
+    openProject: string | null;
+    /** A projects folder didn't answer in time: local copies weren't matched this time. */
+    localUnanswered?: boolean;
+    now: Date;
+}): Screen;
+/** A project name nobody can see answers the same as one that doesn't exist. */
+export declare const unknownProject: (name: string) => {
+    title: string;
+    text: string;
+};

package/dist/server/render-projects.js

@@ -0,0 +1,247 @@
+/**
+ * Projects on the kit (src/design/KIT.md): the list's server parts (the add ways, the clone review), the project's
+ * reading page, folder browse and the GitHub listing. Names, descriptions and paths are gh or filesystem data,
+ * escaped at the sink like everything else (html.ts).
+ */
+import { ACTIVITY_ACTORS, activityAge, activityLimit, activityMetrics, activityScope } from "../project-activity.js";
+import {} from "../browser-workspace.js";
+import { html, htmlString, joinHtml, postForm } from "../html.js";
+import {} from "../onboard.js";
+import {} from "../project-outcomes.js";
+import { projectName } from "../project.js";
+import { homedir } from "node:os";
+import { relativeAge, screen } from "./chrome.js";
+import { acts, approvalFactsNow, approvalTerms, approveForm, btn, chip, count, disclose, doc, docHeader, dock, empty, facts, field, group, infoLine, input, linkTabs, note, notice, pageHeader, phoneHeader, row, slots, status, } from "./kit.js";
+import {} from "./render-pages.js";
+/** A path as a person reads it: the home folder as ~. */
+export function shortPathOf(path) {
+    const home = homedir();
+    return path.startsWith(`${home}/`) ? `~${path.slice(home.length)}` : path;
+}
+/** A project's page address. Names are folder names, so two projects can share one: then the path picks. */
+export function projectHref(name, path, ambiguous) {
+    return `/projects/${encodeURIComponent(name)}${ambiguous ? `?path=${encodeURIComponent(path)}` : ""}`;
+}
+/** What a project's counts say on one line ("2 need you · 1 running"); null when it wasn't scanned. */
+export function peekWords(peek) {
+    if (peek === null)
+        return null;
+    const words = [
+        peek.waiting > 0 ? `${peek.waiting} need${peek.waiting === 1 ? "s" : ""} you` : "",
+        peek.running > 0 ? `${peek.running} running` : "",
+        peek.queued > 0 ? `${peek.queued} queued` : "",
+    ].filter(Boolean);
+    return words.length === 0 ? "Nothing waiting" : words.join(" · ");
+}
+const mono = (text) => html `<span class="k-mono">${text}</span>`;
+const sentence = (text) => text === "" ? text : `${text.charAt(0).toUpperCase()}${text.slice(1)}`;
+/** A refusal says what didn't change. */
+const refused = (text) => /nothing (changed|was)/i.test(text) ? sentence(text) : `${sentence(text).replace(/[.\s]+$/, "")}. Nothing changed.`;
+// ---- the list's server parts -------------------------------------------------------------------------------------
+/** The add ways, as the drawer (and the no-script page) shows them: GitHub, then this computer. */
+export function addWaysHtml(data) {
+    const onboard = data.onboard;
+    const github = onboard === null
+        ? null
+        : html `<section class="k-sec" aria-labelledby="add-gh"><h3 id="add-gh">From GitHub</h3>${!onboard.enabled
+            ? note(sentence(onboard.why))
+            : joinHtml([
+                acts(btn("Choose a GitHub repository", { sm: true, href: "/projects/github" })),
+                postForm("/projects/onboard-preview", joinHtml([
+                    field({ id: "add-link", label: "Or paste a GitHub link", hint: "You review it before anything is downloaded.", error: data.linkProblem === null ? null : refused(data.linkProblem),
+                        control: input({ id: "add-link", name: "repo", hint: true, error: data.linkProblem !== null, attrs: { placeholder: "owner/name or https://github.com/owner/name", autocomplete: "off", spellcheck: "false" } }) }),
+                    onboard.roots.length > 1
+                        ? field({ id: "add-root", label: "Clone into", control: html `<span class="k-selw wide"><select class="k-sel" id="add-root" name="root">${onboard.roots.map((one, index) => html `<option value="${index}">${shortPathOf(one)}</option>`)}</select></span>` })
+                        : html `<input type="hidden" name="root" value="0">`,
+                    acts(btn("Review", { sm: true, type: "submit" })),
+                    onboard.roots.length === 1 ? note(html `Clones into ${mono(shortPathOf(onboard.roots[0] ?? ""))}.`) : "",
+                ]), { attrs: { class: "k-sec" } }),
+            ])}</section>`;
+    const local = html `<section class="k-sec" aria-labelledby="add-local"><h3 id="add-local">From this computer</h3>${joinHtml([
+        data.browsable ? acts(btn("Choose a folder", { sm: true, href: "/projects/browse" })) : note(html `Choose a projects folder once with ${mono("toolroll up --project-root <dir>")}. Toolroll remembers it after that.`),
+        postForm("/projects/open", joinHtml([
+            field({ id: "add-path", label: "Or enter an exact path", hint: "It must be a git repository.",
+                control: input({ id: "add-path", name: "path", hint: true, attrs: { placeholder: "/Users/you/code/your-repo", autocomplete: "off", spellcheck: "false" } }) }),
+            acts(btn("Add and open", { sm: true, type: "submit" })),
+        ]), { attrs: { class: "k-sec" }, returnTo: data.returnTo }),
+    ])}</section>`;
+    return html `<div class="k-sec">${github ?? ""}${local}</div>`;
+}
+/** The clone review a preview minted (single use, ten minutes): what lands where, then the step-up. */
+export function cloneReviewHtml(onboard, problem) {
+    if (onboard === null || !onboard.enabled || onboard.record === null)
+        return null;
+    const [nonce, record] = onboard.record;
+    const kind = "step-up";
+    const factsNow = approvalFactsNow();
+    const size = record.diskUsageKib === null ? "Unknown" : `${Math.max(1, Math.round(record.diskUsageKib / 1024))} MiB`;
+    const bigOk = record.large
+        ? html `<div class="k-checks"><label><input type="checkbox" name="big-ok" value="1" required>${record.nameWithOwner} is ${record.diskUsageKib === null ? "of unknown size" : size}. Clone it anyway</label></div>`
+        : html ``;
+    return html `${slots({
+        status: html `<h2>Clone ${record.nameWithOwner}</h2>`,
+        text: html `Review before anything is downloaded. Clones into ${mono(shortPathOf(record.target))} and adds it as a project. Large-file (LFS) objects aren’t downloaded.`,
+        acts: approveForm({ action: "/projects/onboard-confirm", kind, facts: factsNow, label: "Clone and add", form: { hidden: { nonce } }, before: bigOk }),
+        terms: `${approvalTerms(kind, factsNow)} The review expires in 10 minutes.`,
+        err: problem === null ? null : refused(problem),
+        attrs: { "aria-label": `Clone ${record.nameWithOwner}` },
+    })}${facts([["Repository", mono(`github.com/${record.nameWithOwner}`)], ["Size", size], ["Into", mono(shortPathOf(record.target))]])}`;
+}
+/** The projects list: the React view draws it from `workspace.view`; the body is the same page for a browser
+ * without the workspace script (and what the sensitivity check reads). */
+export function projectsPage(chrome, data) {
+    const choosing = data.returnTo.startsWith("/tasks/new");
+    const names = new Map();
+    for (const name of [...data.recent.map(one => one.name), ...data.candidates.map(projectName)])
+        names.set(name, (names.get(name) ?? 0) + 1);
+    const rowOf = (path, name, openedAt) => {
+        const peek = data.peeks[path] ?? null;
+        return {
+            name, path, shortPath: shortPathOf(path), href: projectHref(name, path, (names.get(name) ?? 0) > 1),
+            open: data.open !== null && data.open === path, openedAt,
+            status: peek === null ? null : peek.waiting > 0 ? "needs" : peek.running > 0 ? "running" : null,
+            summary: peekWords(peek),
+        };
+    };
+    const recent = data.recent.map(one => rowOf(one.path, one.name, one.lastOpenedAt));
+    const available = data.candidates.map(path => rowOf(path, projectName(path), null));
+    const linkProblem = data.problemAt === "link" ? data.problem : null;
+    const review = cloneReviewHtml(data.onboard, data.problemAt === "clone" ? data.problem : null);
+    const reviewHasProblem = review !== null && data.problemAt === "clone";
+    const said = data.problemAt === "said" && data.problem !== null ? sentence(data.problem) : null;
+    const topProblem = data.problem === null || said !== null || linkProblem !== null || reviewHasProblem ? null : data.problemAt === "clone" ? sentence(data.problem) : refused(data.problem);
+    const addHtml = addWaysHtml({ browsable: data.browsable, onboard: data.onboard, returnTo: data.returnTo, linkProblem });
+    // Without the workspace script: the same rows, the add ways as a section.
+    const rowHtml = (one) => row({
+        href: one.href, chip: one.status === null ? html `` : status(one.status), title: one.name, wait: one.status === "needs",
+        desc: mono(one.shortPath), meta: html `<span>${one.summary ?? "Not scanned"}</span>${one.open ? html `<span>Open now</span>` : ""}`,
+        action: one.open && !choosing ? btn("New task", { sm: true, href: "/tasks/new" })
+            : postForm("/projects/open", btn(choosing ? "Choose" : "Open", { sm: true, type: "submit" }), { returnTo: data.returnTo, hidden: { path: one.path } }),
+    });
+    const title = choosing ? "New task" : "Projects";
+    const body = joinHtml([
+        pageHeader(title, { ...(choosing ? { ctx: "Choose the project it belongs to" } : {}) }),
+        topProblem === null ? null : notice(topProblem),
+        said === null ? null : infoLine(said),
+        review,
+        recent.length > 0 ? html `${group("Projects", count(recent.length))}${recent.map(rowHtml)}` : null,
+        available.length > 0 ? html `${group("Available", count(available.length))}${available.map(rowHtml)}` : null,
+        recent.length === 0 && available.length === 0 ? empty({ title: "No projects yet.", text: "A project is a git repository your agents work in." }) : null,
+        html `<section class="k-doc" id="add-project" aria-label="Add a project">${addHtml}</section>`,
+    ], "\n");
+    return screen(title, body, { chrome, workspace: { view: {
+                kind: "projects", choosing, problem: topProblem, said, returnTo: data.returnTo, recent, available,
+                add: { html: htmlString(addHtml), review: review === null ? null : htmlString(review), openOnLoad: linkProblem !== null },
+            } } });
+}
+function activityHtml(report) {
+    if (report === null)
+        return notice("Activity is unavailable right now. Nothing changed. Reload the page to try again.");
+    const familyLine = (one) => row({
+        href: one.href, chip: html ``, title: one.title,
+        desc: `${one.actor === null ? one.state === "ready" ? "Ready" : "History unavailable" : ACTIVITY_ACTORS[one.actor]} · ${one.kind} · Recorded checks: ${one.checks}`,
+        meta: one.state === "completed" ? html `<span class="k-num">${activityAge(one.elapsedMs)}</span>` : "",
+    });
+    return html `${note(activityScope(report))}${report.truncated ? note(activityLimit(report)) : ""}${activityMetrics(report).map(metric => disclose(`${metric.label} · ${metric.value}`, html `${note(metric.detail)}${metric.rows.length === 0 ? note("No tasks in this group.") : metric.rows.map(familyLine)}`))}`;
+}
+/** One project's reading page. Reads only: Open project posts to /projects/select, which switches this session. */
+export function projectPage(chrome, data) {
+    const opened = data.open ? "Open now" : data.openedAt === null ? "Not opened here yet" : `Opened ${relativeAge(data.openedAt, data.now)}`;
+    // The one primary: in the header at a desk, in the dock on a phone (the dock's button submits the header's form).
+    const primary = data.open
+        ? btn("New task", { variant: "primary", lead: "plus", href: "/tasks/new", className: "k-desk-only" })
+        : postForm("/projects/select", btn("Open project", { variant: "primary", type: "submit", className: "k-desk-only" }), { returnTo: data.selfHref, hidden: { path: data.path }, attrs: { id: "project-open" } });
+    const docked = data.open
+        ? btn("New task", { variant: "primary", lead: "plus", href: "/tasks/new" })
+        : btn("Open project", { variant: "primary", type: "submit", attrs: { form: "project-open" } });
+    const peek = data.peek;
+    const countWords = (n, words, href) => data.open && n > 0 ? html `<a class="k-link" href="${href}">${String(n)} ${words}</a>` : html `<span>${String(n)} ${words}</span>`;
+    const counts = peek === null
+        ? note("Not scanned yet.")
+        : html `<p>${joinHtml([
+            countWords(peek.waiting, peek.waiting === 1 ? "needs you" : "need you", "/work"),
+            countWords(peek.running, "running", "/work"),
+            countWords(peek.queued, "queued", "/board?view=order"),
+            countWords(peek.doneRecently, "built today", "/done"),
+        ], " · ")}</p>`;
+    const tasks = data.tasks.length === 0
+        ? note(`Nothing needs you or is running in ${data.name}.`)
+        : html `${data.tasks.map(task => row({
+            href: task.href, chip: task.needs ? status("needs") : status("running"), title: task.title, desc: task.reason, wait: task.needs,
+            meta: task.since === null ? "" : html `<span class="k-num">${relativeAge(task.since, data.now)}</span>`,
+        }))}${data.moreTasks > 0 ? note(data.open ? html `<a class="k-link" href="/work">${data.moreTasks} more in Tasks</a>` : `${data.moreTasks} more`) : ""}`;
+    const setup = facts([
+        ["Folder", mono(data.path)],
+        ...(data.checks === null ? [] : [["Checks", html `<a class="k-link" href="${data.checks.href}">${data.checks.level}</a>`]]),
+        ...(data.pullRequests === null ? [] : [["Pull requests", html `<a class="k-link" href="${data.pullRequests.href}">${data.pullRequests.on ? "On" : "Off"}</a>`]]),
+        ["Knowledge", html `<a class="k-link" href="${data.knowledgeHref}">Open knowledge</a>`],
+    ]);
+    const body = joinHtml([
+        phoneHeader(data.name, { back: "/projects" }),
+        doc(docHeader({ back: ["/projects", "Projects"], title: data.name, meta: html `${mono(shortPathOf(data.path))} · ${opened}`, right: primary, same: true }), html `<section class="k-sec" aria-labelledby="p-now"><h3 id="p-now">Now</h3>${counts}</section>`, html `<section class="k-sec" aria-labelledby="p-tasks"><h3 id="p-tasks">Tasks</h3>${tasks}</section>`, html `<section class="k-sec" aria-labelledby="p-setup"><h3 id="p-setup">Setup</h3>${setup}${data.settingsHref === null ? "" : note(html `Network access, the sandbox and removing the project are in <a class="k-link" href="${data.settingsHref}">Settings → Project</a>.`)}</section>`, data.activity === null ? "" : html `<section class="k-sec" aria-labelledby="p-activity"><h3 id="p-activity">Activity</h3>${activityHtml(data.activity.report)}</section>`),
+        dock(docked),
+    ], "\n");
+    return screen(data.name, body, { chrome });
+}
+// ---- folder browse -----------------------------------------------------------------------------------------------
+export function browsePage(chrome, data) {
+    const browseHref = (path) => `/projects/browse?at=${encodeURIComponent(path)}`;
+    const here = data.at === data.root ? shortPathOf(data.root) : `${shortPathOf(data.root)}${data.at.slice(data.root.length)}`;
+    const openForm = (path, label) => postForm("/projects/open", btn(label, { sm: true, type: "submit" }), { hidden: { path } });
+    const rows = data.entries.length === 0
+        ? note("This folder has no folders inside.")
+        : html `${data.entries.map(one => row({
+            href: browseHref(one.path), chip: html ``, title: one.name,
+            desc: data.registered.has(one.path) ? "Project" : one.git ? "Git repository" : "Folder",
+            action: one.git ? openForm(one.path, data.registered.has(one.path) ? "Open" : "Add and open") : btn("Open folder", { sm: true, variant: "ghost", href: browseHref(one.path) }),
+        }))}`;
+    const body = joinHtml([
+        phoneHeader("Choose a folder", { back: "/projects" }),
+        doc(docHeader({ back: ["/projects", "Projects"], title: "Choose a folder", meta: mono(here), same: true,
+            ...(data.parent === null ? {} : { right: btn("Up one folder", { sm: true, variant: "ghost", lead: "back", href: browseHref(data.parent) }) }) }), data.roots.length > 1 ? linkTabs("Projects folders", data.root, data.roots.map(one => ({ key: one, label: projectName(one), href: browseHref(one) }))) : "", html `<div>${rows}</div>`, note(html `Git repositories are listed first and can be added. Showing folders under ${mono(shortPathOf(data.root))}.`)),
+    ], "\n");
+    return screen("Choose a folder", body, { chrome });
+}
+// ---- the GitHub listing --------------------------------------------------------------------------------------------
+/** The account's repositories with ONE honest action each: open (already a project here), add and open (a clone
+ * under a projects folder), or the existing preview-and-password clone ceremony. */
+export function githubReposPage(chrome, data) {
+    const openForm = (path, label) => postForm("/projects/open", btn(label, { sm: true, type: "submit" }), { hidden: { path } });
+    const cloneForm = (nameWithOwner) => postForm("/projects/onboard-preview", btn("Clone here", { sm: true, type: "submit" }), { hidden: { repo: nameWithOwner, root: "0" } });
+    const list = (label, primary) => postForm("/projects/github", btn(label, { sm: true, variant: primary ? "primary" : "outline", type: "submit" }));
+    const listed = data.listed;
+    const instead = btn("Choose a folder instead", { sm: true, variant: "ghost", href: "/projects/browse" });
+    const rows = listed === null
+        ? empty({ title: "Your repositories aren’t listed yet.", text: "Toolroll asks the GitHub CLI signed in on this computer.", action: acts(list("List repositories", true)) })
+        : !listed.ok
+            ? listed.reason === "gh-missing"
+                ? empty({ title: "The GitHub CLI isn’t installed on this computer.", text: "Install gh on the computer running Toolroll (brew install gh), sign in with gh auth login, then check again.", action: acts(list("Check again", false), instead) })
+                : listed.reason === "gh-auth"
+                    ? empty({ title: "The GitHub CLI isn’t signed in.", text: "In a terminal on the computer running Toolroll, run gh auth login, then check again.", action: acts(list("Check again", false), instead) })
+                    : html `${notice(`${sentence(listed.message)}. Nothing changed.`)}${acts(list("Try again", false))}`
+            : listed.repos.length === 0
+                ? empty({ title: "No repositories to list.", text: "The GitHub account signed in on this computer has none." })
+                : html `${group("Repositories", count(listed.repos.length))}${listed.repos.map(repo => {
+                    const localPath = data.local.get(repo.nameWithOwner.toLowerCase()) ?? null;
+                    const action = localPath !== null && data.openProject === localPath
+                        ? btn("Open now", { sm: true, variant: "ghost", href: projectHref(projectName(localPath), localPath, false) })
+                        : localPath !== null
+                            ? openForm(localPath, data.registered.has(localPath) ? "Open" : "Add and open")
+                            : data.cloneReady
+                                ? cloneForm(repo.nameWithOwner)
+                                : html `<span class="k-muted">Choose a projects folder first</span>`;
+                    const where = localPath === null
+                        ? `${repo.isPrivate ? "Private" : "Public"}${/^\d{4}-\d{2}-\d{2}T/.test(repo.updatedAt) ? ` · updated ${relativeAge(repo.updatedAt, data.now)}` : ""}`
+                        : data.registered.has(localPath) ? html `Project ${mono(projectName(localPath))}` : html `Already cloned at ${mono(shortPathOf(localPath))}`;
+                    return row({ href: `https://github.com/${repo.nameWithOwner}`, chip: html ``, title: repo.nameWithOwner,
+                        desc: repo.description === "" ? where : html `${repo.description} · ${where}`, action });
+                })}`;
+    const body = joinHtml([
+        phoneHeader("Add from GitHub", { back: "/projects" }),
+        doc(docHeader({ back: ["/projects", "Projects"], title: "Add from GitHub", meta: "Repositories the GitHub CLI on this computer can see.", same: true,
+            ...(listed === null ? {} : { right: list("Refresh list", false) }) }), data.localUnanswered === true ? notice("Your projects folder didn’t answer, so copies already on this computer aren’t matched yet. Try again in a moment.") : "", html `<div>${rows}</div>`),
+    ], "\n");
+    return screen("Add from GitHub", body, { chrome });
+}
+/** A project name nobody can see answers the same as one that doesn't exist. */
+export const unknownProject = (name) => ({ title: `There is no project called ${name} here.`, text: "It may have been removed, or the link is for another Toolroll." });