toolroll 0.9.86 → 0.9.88

package/CHANGELOG.md

@@ -1,5 +1,91 @@
 # Changelog
 
+## 0.9.88 — 2026-11-03
+
+- **Every text box looks the same, and calmer.** Wherever you type or pick
+  something, the field is one soft filled shape with its label above and any
+  hint or error below, with no outlines at rest. Text boxes grow as you
+  write, so there are no resize grips. On a phone, fields are larger and easy
+  to tap.
+- **A message box like the chat apps you know.** The lead chat has one
+  rounded box with a **+** menu, a chip that shows the project, and a solid
+  round send button that turns into Stop while the lead works. The task
+  conversation's box has the same look.
+- **Conversation settings moved into the + menu.** The automatic crew
+  updates, conversation details, End the conversation and the link to Lead
+  settings now open from **+ → Conversation settings** instead of sitting
+  under the chat box. Escape closes it.
+- **New task matches.** Pick the project from the chip in the box, and turn on
+  "Read code before planning" with one tap.
+- **A filled phone dock**, matching the new look.
+
+### For developers
+
+- **Faster checks.** Pull request CI finishes in about 8 minutes instead of
+  about 19: test shards are balanced by measured time, and macOS runs only
+  the tests that depend on macOS (the nightly run still covers everything).
+  The scripted end-to-end journeys now run on every pull request, as an
+  advisory check. The Mac release check uses more of a busy machine.
+
+## 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

package/dist/acp-check.d.ts

@@ -5,6 +5,9 @@ export declare const CHECK_PROMPTS: {
     readonly ok: "Create a file named done.txt in the current folder containing exactly the word ok. Then stop. Do nothing else.";
     readonly stop: "Run the shell command `sleep 120` and wait for it to finish.";
 };
+/** How long the stop step waits for the agent to start its command, and for the cancel to be answered. Every product
+ * path waits exactly this: runAcpChecks takes no other value (src/acp-check-timing.test.ts holds it). */
+export declare const STOP_WAIT_MS = 60000;
 export type AcpCheckJob = {
     store: Store;
     runner: string;
@@ -26,3 +29,9 @@ export type AcpCheckJob = {
 /** Close what no live watch holds any more, let go of what finished checks still hold, then run this runner's next
  * check, if one is waiting. */
 export declare function runAcpChecks(job: AcpCheckJob): Promise<void>;
+/**
+ * Tests only: runAcpChecks with a shorter stop-step window, so a test whose agent never starts its command doesn't
+ * wait out the product's minute. No product code may import it (src/acp-check-timing.test.ts fails if any does); the
+ * job carries no wait of its own, so no CLI, environment or config value can change the product's.
+ */
+export declare function runAcpChecksForTests(job: AcpCheckJob, stopWaitMs: number): Promise<void>;

package/dist/acp-check.js

@@ -28,33 +28,15 @@ export const CHECK_PROMPTS = {
     ok: "Create a file named done.txt in the current folder containing exactly the word ok. Then stop. Do nothing else.",
     stop: "Run the shell command `sleep 120` and wait for it to finish.",
 };
-/** How long the stop step waits for the agent to start its command, and for the cancel to be answered. */
-const STOP_WAIT_MS = 60_000;
+/** How long the stop step waits for the agent to start its command, and for the cancel to be answered. Every product
+ * path waits exactly this: runAcpChecks takes no other value (src/acp-check-timing.test.ts holds it). */
+export const STOP_WAIT_MS = 60_000;
 /** How long the agent has to answer the cancel. */
 const CANCEL_ANSWER_MS = 15_000;
 /** Close what no live watch holds any more, let go of what finished checks still hold, then run this runner's next
  * check, if one is waiting. */
 export async function runAcpChecks(job) {
-    const clock = job.clock ?? (() => new Date());
-    job.store.expireAcpChecks(clock());
-    for (const abandoned of job.store.abandonedAcpChecks(job.runner, clock()))
-        job.store.failAcpCheck(abandoned.id, "interrupted", clock());
-    await settleChecks(job, clock);
-    if (process.platform === "win32")
-        return;
-    const request = job.store.claimAcpCheck(job.runner, job.watch, clock());
-    if (request === null)
-        return;
-    const name = isAcpProvider(request.provider) ? ACP_AGENTS[request.provider].name : request.provider;
-    job.progress?.(`agents: checking ${name} (${request.model}) on ${job.runner}`);
-    try {
-        const verdict = await check(job, request, clock);
-        job.progress?.(`agents: ${name} ${verdict === null ? "passed its check" : `failed its check — ${verdict}`}`);
-    }
-    catch (error) {
-        job.store.failAcpCheck(request.id, `the check stopped: ${error instanceof Error ? error.message : String(error)}`, clock());
-    }
-    await settleChecks(job, clock);
+    return runChecks(job, STOP_WAIT_MS);
 }
 /**
  * Let go of what finished checks hold — their checkout, their task, their claim — once nothing of theirs can still be
@@ -139,8 +121,38 @@ async function settleChecks(job, clock) {
         }
     }
 }
+/**
+ * Tests only: runAcpChecks with a shorter stop-step window, so a test whose agent never starts its command doesn't
+ * wait out the product's minute. No product code may import it (src/acp-check-timing.test.ts fails if any does); the
+ * job carries no wait of its own, so no CLI, environment or config value can change the product's.
+ */
+export async function runAcpChecksForTests(job, stopWaitMs) {
+    return runChecks(job, stopWaitMs);
+}
+async function runChecks(job, stopWaitMs) {
+    const clock = job.clock ?? (() => new Date());
+    job.store.expireAcpChecks(clock());
+    for (const abandoned of job.store.abandonedAcpChecks(job.runner, clock()))
+        job.store.failAcpCheck(abandoned.id, "interrupted", clock());
+    await settleChecks(job, clock);
+    if (process.platform === "win32")
+        return;
+    const request = job.store.claimAcpCheck(job.runner, job.watch, clock());
+    if (request === null)
+        return;
+    const name = isAcpProvider(request.provider) ? ACP_AGENTS[request.provider].name : request.provider;
+    job.progress?.(`agents: checking ${name} (${request.model}) on ${job.runner}`);
+    try {
+        const verdict = await check(job, request, clock, stopWaitMs);
+        job.progress?.(`agents: ${name} ${verdict === null ? "passed its check" : `failed its check — ${verdict}`}`);
+    }
+    catch (error) {
+        job.store.failAcpCheck(request.id, `the check stopped: ${error instanceof Error ? error.message : String(error)}`, clock());
+    }
+    await settleChecks(job, clock);
+}
 /** Run one claimed check; null when it passed (and was published), else why not. */
-async function check(job, request, clock) {
+async function check(job, request, clock, stopWaitMs) {
     const { store } = job;
     const fail = (words) => { store.failAcpCheck(request.id, words, clock()); return words; };
     if (!isAcpProvider(request.provider))
@@ -185,7 +197,7 @@ async function check(job, request, clock) {
     const canaryFile = join(stateDir, `acp-check-secret-${request.id}`);
     let verdict = null;
     try {
-        verdict = await steps(job, request, { ref, leaseId, worktree, canaryFile }, clock);
+        verdict = await steps(job, request, { ref, leaseId, worktree, canaryFile }, clock, stopWaitMs);
     }
     finally {
         rmSync(canaryFile, { force: true });
@@ -200,17 +212,17 @@ function finishCheckRun(store, run, clock) {
         store.finishRun(run, { outcome: "refused", reason: "agent-check", now: clock() });
 }
 /** The two steps; whatever throws, the step's run in flight is finished (cleanup still waits for its processes). */
-async function steps(job, request, at, clock) {
+async function steps(job, request, at, clock, stopWaitMs) {
     let current = null;
     try {
-        return await runSteps(job, request, at, clock, run => { current = run; });
+        return await runSteps(job, request, at, clock, run => { current = run; }, stopWaitMs);
     }
     finally {
         if (current !== null)
             finishCheckRun(job.store, current, clock);
     }
 }
-async function runSteps(job, request, at, clock, track) {
+async function runSteps(job, request, at, clock, track, stopWaitMs) {
     const { store } = job;
     const spec = { provider: request.provider, model: request.model };
     const ask = (brief) => ({ phase: "build", brief, maxTurns: 1, permissionMode: "bypassPermissions", skipPermissions: true, resumeSession: null });
@@ -290,7 +302,7 @@ async function runSteps(job, request, at, clock, track) {
         },
         acp: { prompt: "", model: "", expect: null, onControl: (control) => {
                 // The agent's word only times the cancel: what the plane itself sees alive is what is graded.
-                const until = Date.now() + STOP_WAIT_MS;
+                const until = Date.now() + stopWaitMs;
                 const poll = setInterval(() => {
                     if (Date.now() > until) {
                         clearInterval(poll);

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/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" } })),
+    ]);
 }