toolroll 0.9.85 → 0.9.87

package/CHANGELOG.md

@@ -1,5 +1,88 @@
 # Changelog
 
+## 0.9.87 — 2026-11-03
+
+- **The whole app is redesigned.** Every page, from sign-in to Settings,
+  now has one calm look: the same buttons, forms, status words and phone
+  layout everywhere, and amber only for what needs you.
+- **A new Home.** One summary of where things stand and one Needs-you count,
+  the same count you see in the side rail, the phone dock and the tab title.
+- **A new task page.** One column with a five-step progress line (Plan ·
+  Approval · Build · Checks · Ready), then Plan or Result, Activity and
+  Attempts. Approving asks for a password only when one is needed: with
+  Passwordless or a remembered password it is one click, and an automatic
+  rule shows nothing to press. The box keeps the exact terms it showed you;
+  if they change, it offers Reload, never a yes.
+- **Tasks, as a list or a board.** Filter by project and by Needs you,
+  Running, Queued or Finished, each with its count; each waiting task says
+  what it asks for and offers one action.
+- **Ship shows how long each check took**, every pull request check on one
+  timeline.
+- **Release progress.** A release task shows every step in order, where it
+  stands ("Deploy to this Mac · Step 6 of 13") and why it stopped.
+- **A new lead chat**, plus **⌘K search** from anywhere and a `/search` page.
+- **Flows on the phone.** The flow canvas pans and pinch-zooms on a phone,
+  and the Flows list, templates, kits and starter flows are on the new look.
+- **Settings in eight groups**, with what needs you at the top. Each section
+  saves on its own. Spend and Models live in Settings too.
+- **A first-run guide at `/welcome`**: set a password, add a project, pick an
+  agent and models, turn on phone alerts, file a first task. The next step is
+  always the one highlighted.
+- **New task is one box**: pick the project, type, send. Everything else is
+  under More options.
+- **Some Settings saves work again.** Turning sign-in with a provider on or
+  off, turning Passwordless on, request limits and adding a tool no longer
+  fail with "Toolroll refused this (404)", and a save that stays on the same
+  page now shows what was saved.
+- **From the terminal:** `toolroll task ship <task>` shows a task's pull
+  request checks, `toolroll release status [<task>]` shows release progress,
+  `toolroll task list --view queued` lists queued work, and `toolroll release
+  --branch <name>` releases a branch named like one of the command's words.
+
+### Safety
+
+- **Approving a flow's script is bound to the exact version you read.** If
+  the script changes after you looked, the approval doesn't count.
+- **Changing a flow ends its "run on its own" approvals**; it waits for you
+  again.
+- **Password pages open no live connection** to the rest of the app.
+- **Project credential forms always show the password field**, even with
+  Passwordless on (Where builds write, Home folder, Check access, Network).
+  Before, they hid it and every save was refused.
+- **Choosing providers no longer widens by accident.** "Any provider" now
+  means every provider ticked; ticking some saves exactly those.
+- **Releases ignore the advisory youiyoux check**, so a design warning never
+  holds up a release.
+
+### For developers
+
+- **youiyoux enforces the kit in CI.** A pull request that adds design drift
+  against the shared kit (`src/design/KIT.md`) fails the youiyoux job.
+
+## 0.9.86 — 2026-11-02
+
+- **Old tasks tidy themselves.** A routine's newer run puts away its older
+  ones, a release task goes once its version ships or a newer attempt
+  replaces it, and a "Checks failed on main" notice goes once main passes
+  again. Running work, tasks you filed, and tasks handed to a person are
+  never touched. Each one says why it was put away.
+- **Put away old tasks, in one step.** Needs you → **Put away old tasks**
+  shows exactly what would go and why, grouped, with a box to untick each
+  one; your password puts away exactly that list. **Put away** works on a
+  single task too. Nothing is deleted: the **Archived** view keeps every
+  task's history and has **Restore**. The same from the terminal:
+  `toolroll task tidy --preview`, then the `--apply --digest` command it
+  prints; `task archive`, `task restore`, `task list --view archived`.
+- **Flows can drive a browser, once you allow it.** A flow step that starts a
+  browser (like the nightly journeys) now runs in its sandbox when a person
+  has allowed it: **Allow browser** on the flow page shows the exact script
+  and asks for your password, or `toolroll flows browser <flow> on`. Changing
+  the script ends the approval. Without it, the step waits with one line
+  saying what to allow, instead of crashing.
+- **Deploys no longer stop halfway.** A deploy now proves the release
+  read-only and writes its "deploying" marker separately, so it finishes
+  instead of stopping with "attempt to write a readonly database".
+
 ## 0.9.85 — 2026-11-01
 
 - **Point at the exact screenshot.** Choose **Comment** beside a result's

package/dist/agent-fence.d.ts

@@ -98,8 +98,9 @@ export type FenceGrants = {
      * SEATBELT_NO_KEYCHAIN). Only fenceFor gives it, to a build's agent. Never a check's (one with sign-ins gets those in
      * its environment, invoke.ts keychainSignIns), never a tool server's (serverGrantsOf). */
     keychain?: true;
-    /** macOS: a project check's launch, whose Chromium may start (sandbox-runtime.ts SEATBELT_CHROMIUM). Only fenceFor
-     * sets it, only for kind "check". */
+    /** macOS: a project check's launch, or a flow script zone's with approved browser use, whose Chromium may start
+     * (sandbox-runtime.ts SEATBELT_CHROMIUM). Only fenceFor sets it: always for kind "check", for kind "flow" only when
+     * its caller proved the approval (flow-browser.ts). */
     browser?: true;
     /** A `sign-ins` check's exact sign-in files, read again inside the home denies (check-access.ts, signInGrants). */
     signIns?: SignInGrants;
@@ -391,6 +392,9 @@ export type FenceContext = {
     provider?: string;
     /** Scratch folders (a flow's) that stay denied whole inside the pool, whatever the policy. */
     scratchRoots?: readonly string[];
+    /** A flow's script zone whose browser use a person approved, proved at launch (flow-browser.ts browserStanding):
+     * Chromium's one service, as a check gets it. Read for kind "flow" only; every other kind ignores it. */
+    browser?: true;
 };
 /** A launch's sealed sandbox terms (builder.ts launchSandboxOf): its policy version, read denies and mach services. A
  * launch with none sealed is v1 with none of them. */

package/dist/agent-fence.js

@@ -1167,8 +1167,9 @@ export function fenceFor(kind, ctx) {
         ...(written === null ? {} : { writes: written.writes, readOnly: [...new Set([...made.readOnly, ...written.readOnly])].sort() }),
         ...(ctx.network === undefined ? {} : { network: ctx.network }),
         ...(ctx.machLookup === undefined || ctx.machLookup.length === 0 ? {} : { machLookup: [...ctx.machLookup] }),
-        // A project's checks may drive a browser (Playwright's Chromium); builds, flows and tool servers don't get it.
-        ...(kind === "check" ? { browser: true } : {}),
+        // A project's checks may drive a browser (Playwright's Chromium), and so may a flow's script zone whose browser use
+        // a person approved (the caller proves it at launch); builds, tool servers and every other flow launch don't get it.
+        ...(kind === "check" || (kind === "flow" && ctx.browser === true) ? { browser: true } : {}),
         // A build's agent signs in from the keychain (Claude Code does); nothing else it launches reaches it.
         ...(kind === "build" ? { keychain: true } : {}),
         // Under a write allowlist these are out of reach already; where the launch writes anywhere, they are denied by name.

package/dist/agents-board.d.ts

@@ -130,4 +130,16 @@ export declare function laneNewestBuildSql(): string;
 export declare function agentLanesOf(store: Store, now: Date, access: {
     repos: readonly string[] | null;
 }, account: string, window: AgentLaneWindow, path?: string): BrowserAgentLanes | null;
+/**
+ * The Agents list's every live agent, not only builds (UI revamp wave B): the build board's groups, with each running
+ * planner, scout and reviewer in the admitted projects added under Working (or Needs you when it asks). Reads the
+ * open leases only (store.liveRuns), then each run through the same admitted read the opened view uses.
+ */
+export declare function agentsListOf(store: Store, now: Date, access: {
+    repos: readonly string[] | null;
+}, account: string, root?: string): {
+    key: AgentGroupKey;
+    label: string;
+    rows: BrowserAgentRow[];
+}[];
 export {};

package/dist/agents-board.js

@@ -332,3 +332,29 @@ export function agentLanesOf(store, now, access, account, window, path = "/agent
         running: tasks.length === 0 ? 0 : Number(tasks[0]["running"]),
     };
 }
+/** The word a running planner, scout or reviewer wears on the Agents list (a build keeps its own state word). */
+const ROLE_WORDS = { planner: "Planning", scout: "Investigating", reviewer: "Reviewing" };
+/**
+ * The Agents list's every live agent, not only builds (UI revamp wave B): the build board's groups, with each running
+ * planner, scout and reviewer in the admitted projects added under Working (or Needs you when it asks). Reads the
+ * open leases only (store.liveRuns), then each run through the same admitted read the opened view uses.
+ */
+export function agentsListOf(store, now, access, account, root) {
+    const groups = agentsBoardOf(store, now, access, account, root);
+    const shown = new Set(groups.flatMap(group => group.rows.map(row => row.runId)));
+    const extra = [];
+    for (const run of store.liveRuns(now)) {
+        const role = run.role;
+        if (!(role in ROLE_WORDS) || shown.has(run.id))
+            continue;
+        const facts = agentFactsFor(store, run.id, access, account);
+        if (facts === null)
+            continue;
+        const row = agentRowOf(store, facts, now, root);
+        extra.push(row.group === "working" || row.group === "stuck" ? { ...row, group: "working", label: ROLE_WORDS[role] } : row);
+    }
+    if (extra.length === 0)
+        return groups;
+    const all = [...groups.flatMap(group => group.rows), ...extra];
+    return AGENT_GROUPS.map(group => ({ ...group, rows: all.filter(row => row.group === group.key) })).filter(group => group.rows.length > 0);
+}

package/dist/approval-rules-ui.d.ts

@@ -30,7 +30,10 @@ export type ReleaseApprovalView = {
     at: string | null;
     canChange: boolean;
 };
-export declare function releaseApprovalHtml(view: ReleaseApprovalView): Html;
+export declare function releaseApprovalHtml(view: ReleaseApprovalView, notice?: {
+    said?: string | null;
+    problem?: string | null;
+}): Html;
 export declare function approvalRulesHtml(view: ApprovalRulesView, notice: {
     said?: string | null;
     problem?: string | null;

package/dist/approval-rules-ui.js

@@ -4,7 +4,9 @@
  * the identity provider); everyone else reads them. Every change is in the
  * ledger, before → after.
  */
-import { html, postForm, reauth } from "./html.js";
+import { joinHtml } from "./html.js";
+import { formRow, note, radios, settingsSection, switchInput, textarea } from "./server/kit.js";
+import { kitSectionForm } from "./settings-kit.js";
 const RULES_CSS = `.approval-rules{max-width:720px;min-width:0}.approval-rules fieldset{border:0;padding:0;margin:18px 0 0;min-width:0}` +
     `.approval-rules legend{font-weight:600;font-size:.875rem;margin-bottom:8px}.approval-rules .choice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;margin:0 0 10px;font-weight:400}` +
     `.approval-rules .choice input{margin:.2rem 0 0}.approval-rules .choice strong{display:block;font-size:.875rem;font-weight:500}.approval-rules .choice small{display:block;color:var(--muted-foreground);font-size:.8125rem;margin-top:2px}` +
@@ -24,23 +26,37 @@ export function rulesSummary(rules) {
         parts.push(`Work touching ${rules.protectedPaths.join(", ")} is protected: two people approve it, never a subagent or an operating mode.`);
     return parts.length === 0 ? "No approval rules: anyone who can approve on this project can approve its work, including their own." : parts.join(" ");
 }
-export function releaseApprovalHtml(view) {
-    const since = view.setBy === null ? "" : html ` <span class="meta">Changed by ${view.setBy} on ${(view.at ?? "").slice(0, 10)}.</span>`;
-    const current = html `<p class="current">${view.auto ? "Releases approve themselves once the pull request's CI and the release check pass on the exact commit. Anything red still asks you." : "Every release waits for your approval."}${since}</p>`;
-    const heading = html `<h2>Release approval</h2>`;
+export function releaseApprovalHtml(view, notice = {}) {
+    const since = view.setBy === null ? "" : ` · changed by ${view.setBy} on ${(view.at ?? "").slice(0, 10)}`;
+    const current = view.auto ? "Releases approve themselves once the pull request’s CI and the release check pass on the exact commit. Anything red still asks you." : "Every release waits for your approval.";
     if (!view.canChange)
-        return html `<section class="release-approval">${heading}${current}<p class="meta">An approver of this project sets this.</p></section>`;
-    const choice = (value, title, hint) => html `<label class="choice"><input type="radio" name="action" value="${value}"${(view.auto ? "auto" : "ask") === value ? html ` checked` : ""}><span><strong>${title}</strong><small>${hint}</small></span></label>`;
-    return html `<section class="release-approval">${heading}${current}${postForm("/settings/release-approval", html `<fieldset aria-label="Release approval">${choice("ask", "Ask me", "A release deploys only after you approve it.")}${choice("auto", "Approve automatically when checks pass", "You're told when a release approves itself. A failed check, red CI or a CI failure after the deploy still stops and asks you.")}</fieldset><div class="step-up"><label>Your Toolroll password (to approve automatically)<input type="password" name="password" autocomplete="current-password"></label></div><button type="submit">Save</button>`, { hidden: { repo: view.repo } })}</section>`;
+        return settingsSection({ id: "release-approval", title: "Releases", state: since, body: joinHtml([note(current), note("An approver of this project sets this.")]) });
+    return settingsSection({ id: "release-approval", title: "Releases", state: since, lead: current,
+        body: kitSectionForm({ proof: "release-approval", action: "/settings/release-approval", id: "release-form", gate: true, hidden: { repo: view.repo }, proofWhen: ["action", "auto"],
+            confirm: "Approve releases automatically", said: notice.said ?? null, problem: notice.problem ?? null,
+            body: formRow("Releases", "Turning this on asks for your password, every time, even with Passwordless on.", radios({ name: "action", legend: "Releases", current: view.auto ? "auto" : "ask", items: [
+                    { value: "ask", label: "Ask me", text: "A release deploys only after you approve it." },
+                    { value: "auto", label: "Approve automatically when checks pass", text: "You’re told when a release approves itself. A failed check, red CI or a CI failure after the deploy still stops and asks you." }
+                ] }), "wide") }) });
 }
 export function approvalRulesHtml(view, notice) {
-    const note = notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : notice.said ? html `<p role="status">${notice.said}</p>` : "";
-    const changed = view.rules.updatedBy === null ? "" : html ` <span class="meta">Changed by ${view.rules.updatedBy} on ${(view.rules.updatedAt ?? "").slice(0, 10)}.</span>`;
-    const current = html `<p class="current">${rulesSummary(view.rules)}${changed}</p>`;
+    const changed = view.rules.updatedBy === null ? "" : ` · changed by ${view.rules.updatedBy} on ${(view.rules.updatedAt ?? "").slice(0, 10)}`;
+    const current = rulesSummary(view.rules);
     if (!view.canChange)
-        return html `<section class="approval-rules">${note}${current}<p class="meta">An instance operator sets these.</p></section>`;
+        return settingsSection({ id: "rules", title: `Approval rules · ${view.name}`, state: changed, body: joinHtml([note(current), note("An instance operator sets these.")]) });
     const protect = view.rules.protectProject ? "project" : view.rules.protectedPaths.length > 0 ? "paths" : "none";
-    const radio = (value, title, hint) => html `<label class="choice"><input type="radio" name="protect" value="${value}"${protect === value ? html ` checked` : ""}><span><strong>${title}</strong><small>${hint}</small></span></label>`;
-    const few = view.approvers < 2 ? html `<p class="meta">Only ${view.approvers === 1 ? "one person" : "no one"} can approve on this project, so protected work would wait for a second approver. Add one in People first.</p>` : "";
-    return html `<section class="approval-rules">${note}${current}${postForm("/settings/approval", html `<fieldset><legend>Who approves</legend><label class="choice"><input type="checkbox" name="not_requester" value="1"${view.rules.notRequester ? html ` checked` : ""}><span><strong>Someone other than the requester</strong><small>The person who filed a task, or asked for a revision, can't approve it. Operating modes stop approving their signer's own filings here.</small></span></label></fieldset><fieldset><legend>Protected work</legend>${radio("none", "Nothing protected", html `One approval is enough.`)}${radio("project", "The whole project", html `Every task needs two different people to approve the same scope.`)}${radio("paths", "Only these paths", html `Tasks that touch them, or don't say what they touch, need two people.`)}<div class="paths"><label>Protected paths, one per line<textarea name="paths" spellcheck="false" placeholder="infra/**&#10;migrations/**">${view.rules.protectedPaths.join("\n")}</textarea></label></div>${few}</fieldset><div class="step-up">${reauth(html `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password"></label>`)}</div><button type="submit">Save rules</button>`, { hidden: { repo: view.repo } })}</section>`;
+    const few = view.approvers < 2 ? note(`Only ${view.approvers === 1 ? "one person" : "no one"} can approve on this project, so protected work would wait for a second approver. Add one in People first.`) : "";
+    return settingsSection({ id: "rules", title: `Approval rules · ${view.name}`, state: changed, lead: current,
+        body: kitSectionForm({ proof: "approval", action: "/settings/approval", id: "rules-form", gate: true, hidden: { repo: view.repo }, confirm: "Change approval rules",
+            said: notice.said ?? null, problem: notice.problem ?? null,
+            body: joinHtml([
+                formRow("Someone other than the requester", "The person who filed a task, or asked for a revision, can’t approve it. Operating modes stop approving their signer’s own filings here.", switchInput({ id: "rules-not-requester", name: "not_requester", label: "Required", on: view.rules.notRequester, attrs: { value: "1", "aria-label": "Someone other than the requester" } }), "inline"),
+                formRow("Protected work", "Changes here always wait for two people, never a subagent or an operating mode.", radios({ name: "protect", legend: "Protected work", current: protect, items: [
+                        { value: "none", label: "Nothing protected", text: "One approval is enough." },
+                        { value: "project", label: "The whole project", text: "Every task needs two different people to approve the same scope." },
+                        { value: "paths", label: "Only these paths", text: "Tasks that touch them, or don’t say what they touch, need two people." }
+                    ] }), "wide"),
+                formRow("Protected paths", "One per line. Used when “Only these paths” is chosen.", textarea({ id: "rules-paths", name: "paths", value: view.rules.protectedPaths.join("\n"), rows: 3, attrs: { spellcheck: "false", placeholder: "infra/**\nmigrations/**", "aria-label": "Protected paths" } }), "top"),
+                few,
+            ]) }) });
 }

package/dist/assignment-ui.js

@@ -29,7 +29,7 @@ export function assignmentActionHref(assignment) {
     if (action.code === 'inspect-decisions')
         return '/';
     if (action.code === 'sign-in')
-        return '/settings#providers';
+        return '/settings/agents#providers';
     // The confirmation sits on the task page, behind the password.
     if (action.code === 'confirm-stopped')
         return `/t/${encodeURIComponent(assignment.rootId)}#confirm-stopped`;

package/dist/assignment.js

@@ -6,7 +6,7 @@ import { currentActor, withActor } from "./actor.js";
 import { replacedWords } from "./task-status.js";
 import { COMPLETER_ACTOR, COMPLETION_ACTION, COMPLETION_BY_MACHINE, COMPLETION_BY_PERSON, familyChangedFiles, landedReasonOf, personCompletionOwed } from "./result-completion.js";
 import { homedir } from "node:os";
-import { readSchemaVersion, stopFactOf } from "./store.js";
+import { readSchemaVersion, refArchived, stopFactOf } from "./store.js";
 import { approvalOf, liveReleaseOf, machineActing } from "./scope.js";
 import { openWorkDecisionOf, taskWorkSummaryOf, workDecisionAction } from "./work-summary.js";
 import { evidenceRoot, readVerifiedArtifact, readVerifiedReport, verifyArtifact } from "./evidence.js";
@@ -170,14 +170,15 @@ export function assignmentOf(store, taskId, now, access, root, memo) {
     const attention = family.problem === null ? [] : [family.problem];
     // Family admission above precedes question bodies. The newest result
     // does not settle an unanswered question on any earlier version.
-    const questions = [current, ...family.versions.filter(version => version.id !== current.id)].flatMap(version => {
+    // A put-away earlier version (v145) is history: its question and its queue place never hold the current one up.
+    const questions = [current, ...family.versions.filter(version => version.id !== current.id && !refArchived(store, version.refId))].flatMap(version => {
         const decision = openWorkDecisionOf(store, version.refId, now);
         return decision === null ? [] : [{ taskId: version.id, decision }];
     });
     // A finished task label cannot hide a lease or an unfinished process record.
     const busy = (version) => version.state === "running" || store.currentLiveLease(version.refId, now) !== null ||
         store.runsFor(version.refId).some(run => run.outcome === null || store.stopQuiescenceProblem(run.id) !== null);
-    const earlierActive = family.versions.filter(version => version.id !== current.id && (version.state === "queued" || busy(version)));
+    const earlierActive = family.versions.filter(version => version.id !== current.id && ((version.state === "queued" && !refArchived(store, version.refId)) || busy(version)));
     // Of those, how many have work under way (the rest only wait in the queue).
     const earlierRunning = earlierActive.filter(busy).length;
     const unfinished = store.runsFor(current.refId).find(run => run.outcome === null) ?? null;

package/dist/backup-ui.d.ts

@@ -1,7 +1,7 @@
 /**
  * Settings → Backups (sprint 8): how the last backup went and one button to
- * back up now, then the schedule. Past backups and how to restore sit in
- * disclosures.
+ * back up now, then the schedule, past backups and how to restore. Built from
+ * the revamp kit (src/design/KIT.md); the Settings frame adds the title.
  */
 import { type Html } from "./html.js";
 import type { BackupRun, BackupSettings, LiveBackupState } from "./store.js";
@@ -10,7 +10,8 @@ export declare const BACKUP_EVERY_HOURS: readonly [1, 6, 12, 24];
 /** The continuous copy's choices, in minutes (live-backup.ts LIVE_EVERY_MINUTES; here so the page never loads it). */
 export declare const LIVE_EVERY: readonly [1, 5, 15, 30];
 export declare const MAX_KEEP = 100;
-export declare const BACKUP_CSS: string;
+/** The page is kit pieces now; nothing of the old look is left. Kept as an export for the shared stylesheet. */
+export declare const BACKUP_CSS = "";
 export type BackupView = {
     settings: BackupSettings;
     folder: string;
@@ -25,7 +26,7 @@ export type BackupView = {
         defaultFolder: string;
     };
 };
-export declare function backupHtml(view: BackupView, notice: {
+export declare function backupHtml(view: BackupView, said: {
     said?: string | null;
     problem?: string | null;
 }): Html;

package/dist/backup-ui.js

@@ -1,11 +1,13 @@
 /**
  * Settings → Backups (sprint 8): how the last backup went and one button to
- * back up now, then the schedule. Past backups and how to restore sit in
- * disclosures.
+ * back up now, then the schedule, past backups and how to restore. Built from
+ * the revamp kit (src/design/KIT.md); the Settings frame adds the title.
  */
-import { html, postForm, reauth } from "./html.js";
+import { html, joinHtml, postForm } from "./html.js";
 import { bytesWords } from "./storage.js";
 import { whenUtc } from "./when-html.js";
+import { btn, chip, codeLine, formRow, infoLine, input, note, notice, select, settingsRecord, settingsSection } from "./server/kit.js";
+import { kitSectionForm } from "./settings-kit.js";
 /** The schedules on offer and the most copies kept. Here rather than in backup.ts so the page never loads `node:sqlite`. */
 export const BACKUP_EVERY_HOURS = [1, 6, 12, 24];
 /** The continuous copy's choices, in minutes (live-backup.ts LIVE_EVERY_MINUTES; here so the page never loads it). */
@@ -15,53 +17,80 @@ const when = (at) => whenUtc(at);
 const whenWords = (at) => `${at.slice(0, 16).replace("T", " ")} UTC`;
 const everyWords = (hours) => hours === 1 ? "Every hour" : hours === 24 ? "Every day" : `Every ${hours} hours`;
 const fileName = (path) => path.slice(path.lastIndexOf("/") + 1);
-export const BACKUP_CSS = `.backups{max-width:720px;min-width:0;overflow-wrap:anywhere}.backups .backup-state{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}` +
-    `.backups .backup-state>div{flex:1 1 320px;min-width:0}.backups .backup-state h2{margin:0;font-size:1.0625rem}.backups .backup-state p{margin:4px 0 0}.backups .backup-state .problem{color:var(--danger)}` +
-    `.backups .backup-state form{margin:0}.backups .backup-state button{white-space:nowrap}` +
-    `.backups fieldset{border:0;padding:0;margin:0;min-width:0}.backups label{display:grid;gap:4px;margin:12px 0 0;font-size:.875rem}` +
-    `.backups input[type=text],.backups input[type=number],.backups input[type=password],.backups select{width:100%;box-sizing:border-box;max-width:100%}` +
-    `.backups .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.backups button[type=submit]{margin-top:14px}` +
-    `.backups details{margin-top:16px}.backups summary{cursor:pointer}.backups ol{list-style:none;padding:0;margin:8px 0 0}` +
-    `.backups li{display:flex;gap:8px 12px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line, rgba(0,0,0,.08));font-size:.875rem}` +
-    `.backups li .failed{color:var(--danger)}.backups code{white-space:nowrap}.backups pre{overflow-x:auto;margin:8px 0}` +
-    `@media (max-width:900px){.backups .backup-state form,.backups .backup-state button{width:100%}.backups .pair{grid-template-columns:1fr}}`;
+/** The page is kit pieces now; nothing of the old look is left. Kept as an export for the shared stylesheet. */
+export const BACKUP_CSS = "";
 /** The continuous copy in one line: its latest verified copy, or why there is none. */
 function liveLine(view) {
     const live = view.live;
     if (live === undefined)
         return "";
     if (!live.state.settings.enabled)
-        return html `<p class="meta">Continuous copy is off.</p>`;
+        return note("Continuous copy is off.");
     if (live.state.problem !== null)
-        return html `<p class="problem" role="alert">The continuous copy failed: ${live.state.problem}</p>`;
+        return notice(`The continuous copy failed: ${live.state.problem}`);
     if (live.state.latest === null)
-        return html `<p class="meta">The first continuous copy is made within a few minutes of Toolroll starting.</p>`;
-    return html `<p class="meta" data-live-copy>Continuous copy checked ${when(live.state.latest.madeAt)}, every ${live.state.settings.everyMinutes === 1 ? "minute" : `${live.state.settings.everyMinutes} minutes`}.</p>`;
+        return note("The first continuous copy is made within a few minutes of Toolroll starting.");
+    return html `<p class="k-note" data-live-copy>Continuous copy checked ${when(live.state.latest.madeAt)}, every ${live.state.settings.everyMinutes === 1 ? "minute" : `${live.state.settings.everyMinutes} minutes`}.</p>`;
 }
-/** The state in one line, and the next backup (if any), for the top of the page. */
+/** The last backup as one record: what happened, the next one, and Back up now. */
 function state(view) {
     const last = view.runs[0];
     const good = view.runs.find(one => one.ok === true);
     const next = !view.settings.enabled ? "Scheduled backups are off."
         : good === undefined ? "The first scheduled backup runs within a minute or two of the console starting."
             : `Next one about ${whenWords(new Date(Date.parse(good.startedAt) + view.settings.everyHours * 3_600_000).toISOString())}.`;
+    const now = postForm("/settings/backups/now", btn("Back up now", { sm: true, type: "submit" }));
     if (last === undefined)
-        return html `<h2>No backups yet</h2><p class="meta">${next}</p>${liveLine(view)}`;
+        return settingsRecord({ title: "No backups yet", sub: next, action: now });
     if (last.ok === null)
-        return html `<h2>Backing up</h2><p class="meta">Started ${when(last.startedAt)}.</p>`;
+        return settingsRecord({ title: html `Backing up ${chip("Running", "live")}`, sub: html `Started ${when(last.startedAt)}.`, action: now });
     if (last.ok === false) {
-        return html `<h2 data-backup-state="failed">Last backup failed</h2><p class="problem" role="alert">${when(last.startedAt)}: ${last.error ?? "no reason was recorded"}</p><p class="meta">${good === undefined ? "No backup has succeeded yet." : html `Last good backup ${when(good.startedAt)}.`} ${next}</p>`;
+        return settingsRecord({ title: html `Last backup failed ${chip("Failed", "failed")}`, attrs: { "data-backup-state": "failed" }, action: now,
+            sub: html `${good === undefined ? "No backup has succeeded yet." : html `Last good backup ${when(good.startedAt)}.`} ${next}`,
+            more: notice(html `${when(last.startedAt)}: ${last.error ?? "no reason was recorded"}`) });
     }
-    return html `<h2 data-backup-state="ok">Backed up ${when(last.startedAt)}</h2><p class="meta">${last.bytes === null ? "" : `${bytesWords(last.bytes)} · `}${next}</p>${liveLine(view)}`;
+    return settingsRecord({ title: html `Backed up ${when(last.startedAt)}`, attrs: { "data-backup-state": "ok" }, action: now,
+        sub: `${last.bytes === null ? "" : `${bytesWords(last.bytes)} · `}${next}` });
 }
-export function backupHtml(view, notice) {
+/** One past backup: when, how it went, its file, and whether it was by hand. */
+function runRow(run) {
+    const how = run.trigger === "manual" ? "By hand" : "Scheduled";
+    const attrs = { "data-backup-run": run.id };
+    if (run.ok === true) {
+        return settingsRecord({ title: when(run.startedAt), attrs, when: chip("Finished", "done"),
+            sub: html `${how}${run.bytes === null ? "" : ` · ${bytesWords(run.bytes)}`}${run.file === null ? "" : html ` · <span class="k-mono">${fileName(run.file)}</span>`}` });
+    }
+    if (run.ok === false)
+        return settingsRecord({ title: when(run.startedAt), attrs, when: chip("Failed", "failed"), sub: `${how} · ${run.error ?? "no reason recorded"}` });
+    return settingsRecord({ title: when(run.startedAt), attrs, when: chip("Running", "live"), sub: how });
+}
+export function backupHtml(view, said) {
     const s = view.settings;
-    const note = notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : notice.said ? html `<p role="status">${notice.said}</p>` : "";
-    const choices = [html `<option value="off"${s.enabled ? "" : html ` selected`}>Off</option>`,
-        ...BACKUP_EVERY_HOURS.map(hours => html `<option value="${hours}"${s.enabled && s.everyHours === hours ? html ` selected` : ""}>${everyWords(hours)}</option>`)];
-    const runs = view.runs.map(run => html `<li data-backup-run="${run.id}"><span>${when(run.startedAt)}</span>${run.ok === true ? html `<span>Succeeded${run.bytes === null ? "" : ` · ${bytesWords(run.bytes)}`}</span>${run.file === null ? "" : html `<span class="mono meta">${fileName(run.file)}</span>`}`
-        : run.ok === false ? html `<span class="failed">Failed: ${run.error ?? "no reason recorded"}</span>` : html `<span>Running</span>`}<span class="meta">${run.trigger === "manual" ? "by hand" : "scheduled"}</span></li>`);
-    return html `<section class="backups">${note}<div class="card backup-state"><div>${state(view)}</div>${postForm("/settings/backups/now", html `<button type="submit">Back up now</button>`)}</div><h2>Schedule</h2>${postForm("/settings/backups", html `<fieldset><div class="pair"><label>Back up<select name="every">${choices}</select></label><label>Keep the newest<input type="number" name="keep" min="1" max="${MAX_KEEP}" step="1" value="${s.keep}" required></label></div><label>Folder<input type="text" name="folder" value="${s.folder ?? ""}" placeholder="${view.defaultFolder}" spellcheck="false"></label>${liveFields(view)}${reauth(html `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password"></label>`)}</fieldset><button type="submit">Save</button>`)}<details><summary>Recent backups${view.runs.length === 0 ? "" : ` (${view.runs.length})`}</summary>${runs.length === 0 ? html `<p class="meta">None yet.</p>` : html `<ol>${runs}</ol>`}<p class="meta">In <span class="mono">${view.folder}</span>. Only the database is copied: provider keys and sign-in files stay out.</p></details><details><summary>Restore a backup</summary><p>Stop Toolroll, then run:</p><pre><code>toolroll restore &lt;file&gt; --dry-run</code></pre><p class="meta">The dry run checks the backup (its version and ledger chain) and changes nothing. Run it again without <code>--dry-run</code> to restore; the current database is kept as a copy first.</p>${view.live === undefined ? "" : html `<p class="meta">Continuous copies are in <span class="mono">${view.live.folder}</span>; restore one the same way.</p>`}</details></section>`;
+    const answer = said.problem ? notice(said.problem) : said.said ? infoLine(said.said) : "";
+    const now = settingsSection({ id: "backup-now", title: "Last backup", body: joinHtml([answer, state(view), liveLine(view)]) });
+    const every = select({ id: "backup-every", name: "every", label: "Back up", current: s.enabled ? String(s.everyHours) : "off",
+        items: [["off", "Off"], ...BACKUP_EVERY_HOURS.map(hours => [String(hours), everyWords(hours)])] });
+    const schedule = settingsSection({ id: "backup-schedule", title: "Schedule", lead: "Only the database is copied: provider keys and sign-in files stay out.",
+        body: kitSectionForm({ proof: "backups", action: "/settings/backups", id: "backup-form", gate: true,
+            body: joinHtml([
+                formRow("Back up", null, every, "inline"),
+                formRow("Keep the newest", "How many backups to keep. Older ones are removed.", input({ id: "backup-keep", name: "keep", type: "number", value: String(s.keep),
+                    attrs: { min: 1, max: MAX_KEEP, step: 1, required: true, "aria-label": "Keep the newest" } }), "inline"),
+                formRow("Folder", "Blank: the default folder.", input({ id: "backup-folder", name: "folder", value: s.folder ?? "",
+                    attrs: { placeholder: view.defaultFolder, spellcheck: "false", "aria-label": "Folder" } })),
+                liveFields(view),
+            ]) }) });
+    const runs = view.runs.map(runRow);
+    const history = settingsSection({ id: "backup-history", title: "Past backups", state: view.runs.length === 0 ? "" : ` · ${view.runs.length}`,
+        lead: html `In <span class="k-mono">${view.folder}</span>.`,
+        body: runs.length === 0 ? note("None yet.") : joinHtml(runs) });
+    const restore = settingsSection({ id: "backup-restore", title: "Restore a backup", lead: "Stop Toolroll, then run:",
+        body: joinHtml([
+            codeLine("toolroll restore <file> --dry-run"),
+            note(html `The dry run checks the backup (its version and ledger chain) and changes nothing. Run it again without <code class="k-mono">--dry-run</code> to restore; the current database is kept as a copy first.`),
+            view.live === undefined ? "" : note(html `Continuous copies are in <span class="k-mono">${view.live.folder}</span>; restore one the same way.`),
+        ]) });
+    return joinHtml([now, schedule, history, restore]);
 }
 /** The continuous copy's two choices, beside the schedule's: how often, and where (blank: beside the database). */
 function liveFields(view) {
@@ -69,7 +98,11 @@ function liveFields(view) {
     if (live === undefined)
         return "";
     const on = live.state.settings;
-    const choices = [html `<option value="off"${on.enabled ? "" : html ` selected`}>Off</option>`,
-        ...LIVE_EVERY.map(minutes => html `<option value="${minutes}"${on.enabled && on.everyMinutes === minutes ? html ` selected` : ""}>${minutes === 1 ? "Every minute" : `Every ${minutes} minutes`}</option>`)];
-    return html `<div class="pair"><label>Copy continuously<select name="live_every">${choices}</select></label><label>Copy folder<input type="text" name="live_folder" value="${on.folder ?? ""}" placeholder="${live.defaultFolder}" spellcheck="false"></label></div>`;
+    const every = select({ id: "backup-live-every", name: "live_every", label: "Copy continuously", current: on.enabled ? String(on.everyMinutes) : "off",
+        items: [["off", "Off"], ...LIVE_EVERY.map(minutes => [String(minutes), minutes === 1 ? "Every minute" : `Every ${minutes} minutes`])] });
+    return joinHtml([
+        formRow("Copy continuously", "A checked copy of the database every few minutes, between backups.", every, "inline"),
+        formRow("Copy folder", "Blank: beside the database.", input({ id: "backup-live-folder", name: "live_folder", value: on.folder ?? "",
+            attrs: { placeholder: live.defaultFolder, spellcheck: "false", "aria-label": "Copy folder" } })),
+    ]);
 }