@nanocollective/roster 0.1.0-alpha.2 → 0.1.0-alpha.4

package/templates/portal/js/views/memory.js

@@ -13,6 +13,19 @@ import { inline } from "../md.js";
 import { S } from "../state.js";
 import { matchesFact } from "./brain.js";
 
+/**
+ * Which of the three kinds of provenance a tag is, as a class the stylesheet knows.
+ *
+ * A fact is measured, derived, or ruled on by a human — and the third one is written with that
+ * human's own marker, `[will]` or `[sam]` or whatever the org chose. The class used to be the
+ * marker itself against a stylesheet that knew one word, so every org but the one this was
+ * written in lost the "a person decided this" colour, which is the one that matters most.
+ */
+export function provenanceKind(provenance) {
+  const word = String(provenance).toLowerCase();
+  return word === "measured" || word === "derived" ? word : "ruled";
+}
+
 export function showMemory(viewer, s, key, pick) {
   const section = key.startsWith("mem:") ? key.slice(4) : null;
   const slug = key.startsWith("fact:") ? key.slice(5) : null;
@@ -61,7 +74,9 @@ export function showMemory(viewer, s, key, pick) {
     d.innerHTML =
       '<span class="slug" data-goto="' + esc(f.slug) + '" title="Show just this fact">' +
         esc(f.slug) + "</span>" +
-      (f.provenance ? '<span class="tag ' + esc(f.provenance) + '">' + esc(f.provenance) + "</span>" : "") +
+      (f.provenance
+        ? '<span class="tag ' + provenanceKind(f.provenance) + '">' + esc(f.provenance) + "</span>"
+        : "") +
       (f.note ? '<span class="notelink" data-note="' + esc(f.note) + '">' + esc(f.note) + "</span>" : "") +
       '<p class="stmt">' + inline(f.statement) + "</p>" +
       (f.consequence

package/templates/portal/js/views/org.js

@@ -1,27 +1,47 @@
 /* The org layer, in one place.
  *
- * These five files are what every staff member inherits. Editing `org/voice.md` once is the
- * whole extensibility story — the thing this arrangement exists to make possible — and until
- * now you reached them through a staff member's Prompt screen, which is a strange route to a
- * file that belongs to nobody in particular.
+ * These files are what every staff member inherits. Editing `org/voice.md` once is the whole
+ * extensibility story — the thing this arrangement exists to make possible — and until recently
+ * you reached them through a staff member's Prompt screen, which is a strange route to a file
+ * that belongs to nobody in particular.
+ *
+ * The list comes off disk rather than out of this file. It used to be five paths written here,
+ * which meant a tenant that added `org/pricing.md` could not open it at all, and one that had
+ * not written `org/business.md` yet got "not found" with nothing to do about it. Both are the
+ * same mistake: a list of what a tenant *should* have, standing in for what it has.
  *
  * `org.yaml` is here too, and is the one file that stops every prompt composing when it is
  * wrong. The server validates it before writing.
  */
 
-import { getFile, post } from "../api.js";
-import { el, esc, grow, kb } from "../dom.js";
+import { getFile, getOrgLayer, post } from "../api.js";
+import { el, esc, grow, kb, skeleton } from "../dom.js";
+import { icon } from "../icons.js";
 import { mdlite } from "../md.js";
-import { S, writeHash } from "../state.js";
-
-/* What each file is for, in one line, because a list of five filenames tells you nothing
-   about which one to open. */
-const DOCS = [
-  ["org.yaml", "Who and what: the humans, the repos, the defaults, which agent runs them.", "yaml"],
-  ["org/business.md", "What the business actually is. Every prompt is composed on top of it, and it is the file that stops the agents writing generic slop.", "md"],
-  ["org/operating.md", "The autonomy contract: what they do without asking, what they escalate, how a run starts and ends.", "md"],
-  ["org/guardrails.md", "The non-negotiables. Every staff member is bound by these and cannot argue with them.", "md"],
-  ["org/voice.md", "How everything they write reads. Change it once, and every surface changes on the next run.", "md"],
+import { humansOf, S, writeHash } from "../state.js";
+import { yamlPre } from "../yaml.js";
+
+/* What the files roster itself ships are for, in one line each. A filename says nothing about
+   which one to open; anything a tenant has added of its own falls back to its first heading. */
+const KNOWN = {
+  "org.yaml": "Who and what: the humans, the repos, the defaults, which agent runs them.",
+  "org/business.md":
+    "What the business actually is. Every prompt is composed on top of it, and it is the file that stops the agents writing generic slop.",
+  "org/operating.md":
+    "The autonomy contract: what they do without asking, what they escalate, how a run starts and ends.",
+  "org/guardrails.md":
+    "The non-negotiables. Every staff member is bound by these and cannot argue with them.",
+  "org/voice.md":
+    "How everything they write reads. Change it once, and every surface changes on the next run.",
+  "prompts/daily.md": "The whole of a scheduled run, before the fragments are pulled into it.",
+  "prompts/mention.md": "What they are sent when you @-mention them.",
+  "prompts/_identity.md": "Who they post as, and what wakes you.",
+  "prompts/_paths.md": "Where everything is in the runner's checkout.",
+};
+
+const GROUPS = [
+  ["org", "The org layer", "Inherited by everybody, on their next run."],
+  ["prompts", "The prompts", "The runs themselves. Edit these last: they are the framework's."],
 ];
 
 export function viewOrg(m) {
@@ -37,10 +57,20 @@ export function viewOrg(m) {
   );
 
   const facts = el("div", { className: "grid", style: "margin-bottom:18px" });
-  const human = org.human ?? {};
+  const humans = humansOf();
   facts.append(
     kv("Organisation", esc(org.org), org.name),
-    kv("They answer to", esc(human.name ?? human.github ?? "nobody"), human.github ? "@" + human.github : "no github handle in org.yaml"),
+    /* Plural on purpose. An org can answer to more than one person, and a card that names one
+       of two is worse than one that names neither: it reads as the only one who counts. */
+    kv(
+      "They answer to",
+      humans.length
+        ? humans.map((h) => esc(h.name ?? h.github)).join(", ")
+        : "nobody",
+      humans.length
+        ? humans.map((h) => (h.github ? "@" + h.github : "no github handle")).join(" · ")
+        : "org.yaml names no human, so nothing can wake an agent",
+    ),
     kv("Staff", String(org.staff.length), org.staff.map((s) => s.handle).join(", ")),
   );
   m.append(facts);
@@ -51,30 +81,53 @@ export function viewOrg(m) {
   split.append(tree, viewer);
   m.append(split);
 
-  const group = el("div", { className: "navgroup" });
-  group.append(el("div", { className: "ghead", textContent: "The org layer" }));
-  for (const [path, why] of DOCS) {
-    const b = el("button", { className: "tfile tlayer", title: why });
-    b.dataset.key = path;
-    const t = el("span", { className: "t" });
-    t.append(
-      el("span", { className: "lname", textContent: path.replace(/^org\//, "") }),
-      el("span", { className: "lrepo", textContent: why }),
-    );
-    b.append(t);
-    b.onclick = () => open(path);
-    group.append(b);
-  }
-  tree.append(group);
-
-  /* Declared before the first `open()`, not after: `const` is not hoisted, and putting it
-     below the call made the first paint fail with "cannot access 'full' before
-     initialization" rather than rendering anything. */
   const full = (path) => S.data.opsName + "/" + path;
 
-  open(S.orgOpen ?? DOCS[0][0]);
+  tree.replaceChildren(...skeleton("row", 6));
+  getOrgLayer()
+    .then(({ files }) => {
+      S.orgFiles = files ?? [];
+      paintTree();
+      const first = S.orgFiles[0]?.path;
+      open(S.orgFiles.some((f) => f.path === S.orgOpen) ? S.orgOpen : first);
+    })
+    .catch((e) => {
+      tree.replaceChildren(el("p", { className: "empty err", textContent: e.message }));
+    });
+
+  function why(file) {
+    return KNOWN[file.path] ?? file.title ?? "";
+  }
+
+  function paintTree() {
+    tree.replaceChildren();
+    if (!S.orgFiles.length) {
+      tree.append(el("p", { className: "empty", textContent: "No org files here." }));
+      return;
+    }
+    for (const [id, heading, note] of GROUPS) {
+      const mine = S.orgFiles.filter((f) => (f.group ?? "org") === id);
+      if (!mine.length) continue;
+      const group = el("div", { className: "navgroup" });
+      group.append(el("div", { className: "ghead", textContent: heading, title: note }));
+      for (const f of mine) {
+        const b = el("button", { className: "tfile tlayer", title: why(f) });
+        b.dataset.key = f.path;
+        const t = el("span", { className: "t" });
+        t.append(
+          el("span", { className: "lname", textContent: f.path.replace(/^(org|prompts)\//, "") }),
+          el("span", { className: "lrepo", textContent: why(f) }),
+        );
+        b.append(t);
+        b.onclick = () => open(f.path);
+        group.append(b);
+      }
+      tree.append(group);
+    }
+  }
 
   function open(path) {
+    if (!path) return;
     S.orgOpen = path;
     writeHash(false);
     for (const o of tree.querySelectorAll(".tfile")) {
@@ -84,7 +137,7 @@ export function viewOrg(m) {
   }
 
   async function show(path) {
-    viewer.replaceChildren(el("p", { className: "empty", textContent: "Loading…" }));
+    viewer.replaceChildren(...skeleton("head", 1), ...skeleton("line", 7));
     let text;
     try {
       text = await getFile(full(path));
@@ -97,55 +150,82 @@ export function viewOrg(m) {
 
   function render(path, text) {
     viewer.replaceChildren();
-    const why = DOCS.find(([p]) => p === path)?.[1] ?? "";
-    const head = el("div", { className: "row", style: "margin-bottom:4px" });
+    const head = el("div", { className: "row filehead" });
     head.append(el("span", { className: "meta", textContent: full(path) + " · " + kb(text.length) }));
-    head.append(el("button", { className: "ghbtn", textContent: "Edit", onclick: () => edit(path, text) }));
-    viewer.append(head, el("p", { className: "factsub", textContent: why }));
-
-    if (path.endsWith(".yaml")) {
-      viewer.append(el("pre", { className: "code", textContent: text }));
+    /* The edit control used to be a word in a row of grey text, which is why "there is no easy
+       way to edit the org docs" was a fair thing to say about a screen that could edit them. */
+    const edit = el("button", { className: "ghbtn primary editbtn", onclick: () => editor(path, text) });
+    edit.append(icon("edit", "ic"), el("span", { textContent: "Edit" }));
+    head.append(edit);
+    const file = S.orgFiles.find((f) => f.path === path) ?? { path };
+    viewer.append(head, el("p", { className: "factsub", textContent: why(file) }));
+
+    if (path.endsWith(".yaml") || path.endsWith(".yml")) {
+      viewer.append(yamlPre(text));
       return;
     }
     viewer.append(el("div", { className: "md doc", innerHTML: mdlite(text) }));
   }
 
-  function edit(path, text) {
+  function editor(path, text) {
     viewer.replaceChildren();
-    viewer.append(
-      el("div", { className: "row", style: "margin-bottom:10px" }, [
-        el("span", { className: "meta", textContent: full(path) }),
-      ]),
-    );
+    const isYaml = /\.ya?ml$/.test(path);
+
+    const status = el("span", { className: "meta" });
+    const save = el("button", { className: "ghbtn primary", textContent: "Save and commit" });
+    const cancel = el("button", { className: "ghbtn", textContent: "Cancel" });
+
+    const bar = el("div", { className: "row filehead" });
+    bar.append(el("span", { className: "meta", textContent: full(path) }), save, cancel, status);
+    viewer.append(bar);
 
     const ta = el("textarea", { value: text, className: "editor" });
     viewer.append(ta);
     grow(ta);
     ta.addEventListener("input", () => grow(ta));
+    // ⌘S is what a person's hands do in a text box. Without it, saving means finding a button
+    // above a screenful of textarea you have just scrolled past.
+    ta.addEventListener("keydown", (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+        e.preventDefault();
+        commit();
+      }
+    });
+    ta.focus?.();
 
-    const status = el("span", { className: "meta" });
-    const save = el("button", { className: "ghbtn primary", textContent: "Save and commit" });
-    const cancel = el("button", { className: "ghbtn", textContent: "Cancel" });
     cancel.onclick = () => render(path, text);
-    viewer.append(el("div", { className: "row", style: "margin-top:10px" }, [save, cancel, status]));
+    save.onclick = commit;
+
     viewer.append(
       el("p", {
         className: "editnote",
         textContent:
-          "Commits to " + S.data.opsName + " and pushes. Picked up by every staff member on their " +
-          "next run." +
-          (path.endsWith(".yaml")
+          "⌘S saves. Commits to " + S.data.opsName + " and pushes, and every staff member picks " +
+          "it up on their next run." +
+          (isYaml
             ? " org.yaml is checked before it is written: bad YAML, or a missing org or name, is refused rather than committed."
             : ""),
       }),
     );
 
-    save.onclick = async () => {
+    async function commit() {
       if (ta.value === text) {
         status.textContent = "nothing changed";
+        status.className = "meta";
+        return;
+      }
+      /* Only the manifest asks. A prose edit is one commit to revert and the agents pick it up
+         on their next run; org.yaml is the file that can stop every prompt composing, and the
+         portal has just told you it validates it. Asking every time taught people to click
+         through the question, which is worse than not asking. */
+      if (
+        isYaml &&
+        !confirm(
+          "Commit " + full(path) + " and push?\n\nEvery staff member picks this up on their next run.",
+        )
+      ) {
         return;
       }
-      if (!confirm("Commit " + full(path) + " and push?\n\nEvery staff member picks this up on their next run.")) return;
       save.disabled = cancel.disabled = true;
       status.textContent = "committing…";
       status.className = "meta";
@@ -162,7 +242,7 @@ export function viewOrg(m) {
         status.className = "meta err";
         save.disabled = cancel.disabled = false;
       }
-    };
+    }
   }
 }
 

package/templates/portal/js/views/prompt.js

@@ -14,6 +14,7 @@ import { askText } from "../dialog.js";
 import { el, esc, grow, kb, toClipboard } from "../dom.js";
 import { icon } from "../icons.js";
 import { mdlite } from "../md.js";
+import { render } from "../router.js";
 import { S, staff, writeHash } from "../state.js";
 import { diffStat, unifiedDiff } from "../textdiff.js";
 import { renderDiff } from "./changed.js";
@@ -21,9 +22,53 @@ import { renderDiff } from "./changed.js";
 const KINDS = [
   ["daily", "Daily", "the scheduled run"],
   ["mention", "Mention", "someone typed @them in an issue"],
-  ["pr-mention", "PR mention", "someone typed @them on a pull request"],
 ];
 
+/**
+ * Build the paste-ready brief on the server, where compose.mjs lives, and copy it.
+ *
+ * A finding pre-fills the box rather than skipping it: what it wrote is a starting point, and
+ * "and keep it in operating.md" is exactly the sort of thing you want to add.
+ *
+ * Exported because the findings themselves live on Health now, and the fix for one of them is
+ * the same brief whichever screen you asked from.
+ */
+export async function copyAmendBrief(handle, kind, want, btn, note) {
+  const label = btn.textContent;
+  const asked = await askText({
+    title: "What do you want changed?",
+    hint:
+      "This goes at the top of a brief carrying the whole prompt and every file it is " +
+      "made of. Say it the way you would say it to a person.",
+    value: want,
+    placeholder: "stop opening decision issues for anything reversible",
+    confirm: "Copy the brief",
+  });
+  if (!asked) return;
+  btn.disabled = true;
+  btn.textContent = "building…";
+  try {
+    const url =
+      "/api/amend?staff=" + encodeURIComponent(handle) +
+      "&kind=" + encodeURIComponent(kind) +
+      "&want=" + encodeURIComponent(asked);
+    const text = await (await fetch(url, { cache: "no-store" })).text();
+    btn.disabled = false;
+    toClipboard(text, btn, label);
+    if (note) {
+      note.textContent = "paste it into whatever agent you use";
+      note.className = "meta";
+    }
+  } catch (e) {
+    btn.disabled = false;
+    btn.textContent = label;
+    if (note) {
+      note.textContent = e.message;
+      note.className = "meta err";
+    }
+  }
+}
+
 export function viewPrompt(m) {
   const s = staff();
   if (!S.promptKind) S.promptKind = "daily";
@@ -54,40 +99,7 @@ export function viewPrompt(m) {
   const note = el("span", { className: "meta" });
   m.append(el("div", { className: "row", style: "margin-bottom:16px" }, [kind, help, copy, note]));
 
-  /* Build the paste-ready brief on the server, where compose.mjs lives, and copy it.
-     A finding pre-fills the box rather than skipping it: what it wrote is a starting point,
-     and "and keep it in operating.md" is exactly the sort of thing you want to add. */
-  async function copyAmend(want, btn) {
-    const target = btn ?? help;
-    const label = target.textContent;
-    const asked = await askText({
-      title: "What do you want changed?",
-      hint:
-        "This goes at the top of a brief carrying the whole prompt and every file it is " +
-        "made of. Say it the way you would say it to a person.",
-      value: want,
-      placeholder: "stop opening decision issues for anything reversible",
-      confirm: "Copy the brief",
-    });
-    if (!asked) return;
-    target.disabled = true;
-    target.textContent = "building…";
-    try {
-      const url =
-        "/api/amend?staff=" + encodeURIComponent(s.handle) +
-        "&kind=" + encodeURIComponent(S.promptKind) +
-        "&want=" + encodeURIComponent(asked);
-      const text = await (await fetch(url, { cache: "no-store" })).text();
-      target.disabled = false;
-      toClipboard(text, target, label);
-      note.textContent = "paste it into whatever agent you use";
-    } catch (e) {
-      target.disabled = false;
-      target.textContent = label;
-      note.textContent = e.message;
-      note.className = "meta err";
-    }
-  }
+  const copyAmend = (want, btn) => copyAmendBrief(s.handle, S.promptKind, want, btn ?? help, note);
 
   const split = el("div", { className: "split" });
   const tree = el("div", { className: "tree" });
@@ -140,12 +152,9 @@ export function viewPrompt(m) {
     for (const l of view.layers) inlined.append(layerRow(l));
     tree.append(inlined);
 
-    if (view.problems?.length) {
-      const bad = group("Problems", String(view.problems.length));
-      for (const p of view.problems) bad.append(problemRow(p));
-      tree.append(bad);
-    }
-
+    /* No Problems section. This screen answers "what is sent"; whether what is sent is any
+       good is a health question, and it is asked and answered on Health. Having both here
+       made the tree beside the prompt half prompt and half complaints. */
     const named = group("Named, not inlined");
     named.append(
       el("p", {
@@ -160,28 +169,6 @@ export function viewPrompt(m) {
     open(S.promptOpen ?? "composed");
   }
 
-  /* A finding is only half useful. The other half is the sentence that goes into the brief,
-     which is why every one of them carries a `want`. */
-  function problemRow(p) {
-    const b = el("div", { className: "prob " + p.level });
-    b.append(el("div", { className: "ptitle", textContent: p.title }));
-    b.append(el("div", { className: "pdetail", textContent: p.detail }));
-    const fix = el("button", { className: "ghbtn", textContent: "Copy a prompt to fix this" });
-    fix.onclick = () => copyAmend(p.want, fix);
-    const row = el("div", { className: "row", style: "margin-top:8px" }, [fix]);
-    if (p.path) {
-      row.append(
-        el("button", {
-          className: "ghbtn",
-          textContent: "Open the file",
-          onclick: () => open(p.path),
-        }),
-      );
-    }
-    b.append(row);
-    return b;
-  }
-
   function group(title, right) {
     const g = el("div", { className: "navgroup" });
     const h = el("div", { className: "ghead", textContent: title });

package/templates/portal/js/views/setup.js

@@ -19,6 +19,11 @@ export async function viewSetup(main) {
 }
 
 function render(main) {
+  /* The sidebar is written by boot() before any of this is known. Once a tenant has been
+     adopted, leaving it on "no org yet" contradicts the card directly below it. */
+  const brand = $("#orgname");
+  if (brand) brand.textContent = S.tenant.found ? (S.tenant.org ?? "set up") : "no org yet";
+
   main.replaceChildren();
   main.append(el("h1", { textContent: "Set up your org" }));
   main.append(
@@ -156,10 +161,11 @@ function stepOrg(main) {
   const human = field("human", "Your GitHub login", S.gh.login ?? "", "The person the agents answer to.");
 
   card.append(form);
+  const agentHead = el("h3", { textContent: "Which coding agent runs a session" });
 
   /* The agent. Its id decides the secret name later, so setup can name it exactly rather than
      saying "it depends on the runner". */
-  card.append(el("h3", { textContent: "Which coding agent runs a session" }));
+  card.append(agentHead);
   const agents = el("div", { className: "choices" });
   S.agents.forEach((a, i) => {
     const opt = el("label", { className: "choice" });
@@ -170,14 +176,13 @@ function stepOrg(main) {
     agents.append(opt);
   });
   card.append(agents);
-  card.append(
-    el("p", {
-      className: "sub",
-      textContent:
-        "Anything else works too: a runner is an install command, a run command and the name of " +
-        "the secret holding its credential. Write those three into org.yaml afterwards.",
-    }),
-  );
+  const agentNote = el("p", {
+    className: "sub",
+    textContent:
+      "Anything else works too: a runner is an install command, a run command and the name of " +
+      "the secret holding its credential. Write those three into org.yaml afterwards.",
+  });
+  card.append(agentNote);
 
   const params = () => ({
     org: org.value === "__other" ? other.input.value.trim() : org.value,
@@ -200,11 +205,29 @@ function stepOrg(main) {
     join.hidden = !joining;
     plan.hidden = joining;
     if (joining) go.hidden = true;
+
+    /* An org that already runs roster has answered all of these: its own org.yaml names the
+       business, the human and the agent. Leaving them on screen asks for values that will be
+       thrown away, and implies the checkout is going to use them. */
+    for (const bit of [name.wrap, human.wrap, agentHead, agents, agentNote]) bit.hidden = joining;
   }
 
   join.onclick = async () => {
     join.disabled = true;
-    out.replaceChildren(el("p", { className: "sub", textContent: "Cloning…" }));
+    /* Cloning an ops repo and every brain took 38 seconds against a real org, behind a word
+       that never changed. A static "Cloning…" for that long reads as hung, so this says what
+       it is doing and keeps a clock running to show it is alive. */
+    const clock = el("p", { className: "sub" });
+    out.replaceChildren(clock);
+    const started = Date.now();
+    const tick = () => {
+      const s = Math.round((Date.now() - started) / 1000);
+      clock.textContent =
+        `Cloning ${existing}: the ops repo and one for each staff member. ${s}s. ` +
+        "A first checkout usually takes under a minute.";
+    };
+    tick();
+    const ticking = setInterval(tick, 1000);
     try {
       const result = await joinOrg(existing);
       if (!result.ok) throw new Error(result.error);
@@ -219,6 +242,7 @@ function stepOrg(main) {
     } catch (err) {
       out.replaceChildren(el("p", { className: "err", textContent: String(err.message || err) }));
     } finally {
+      clearInterval(ticking);
       join.disabled = false;
     }
   };
@@ -279,12 +303,12 @@ function stepOrg(main) {
 /* ------------------------- 5 · the two GitHub insists on ------------------------- */
 
 function afterCreate() {
-  const card = step(3, "Two things only you can do", false);
+  const card = step(3, "What is left", false);
   card.append(
     el("p", {
       textContent:
-        "Neither can be automated, and the first one fails in a way that wastes an afternoon if " +
-        "you skip it.",
+        "None of these can be done for you, and the first fails in a way that wastes an " +
+        "afternoon if you skip it.",
     }),
   );
 

package/templates/portal/js/views/staff.js

@@ -15,6 +15,7 @@ import { icon } from "../icons.js";
 import { refreshAll } from "../refresh.js";
 import { S } from "../state.js";
 import { appPanel } from "./app.js";
+import { cronText } from "./health.js";
 import { paste } from "./paste.js";
 
 export function viewStaff(m) {
@@ -110,7 +111,7 @@ export function viewStaff(m) {
     const handle = field("handle", "cfo", "lowercase, digits and dashes");
     const name = field("name", "Chief Financial Officer", "defaults to the handle, uppercased");
     const dir = field("dir", "finance", "directory and repo name; defaults to the handle");
-    const schedule = field("schedule", "0 9 * * 1-5", "defaults to a slot clear of everyone else");
+    const schedule = scheduleField();
     for (const f of [handle, name, dir, schedule]) box.append(f.row);
 
     const status = el("span", { className: "meta" });
@@ -134,7 +135,8 @@ export function viewStaff(m) {
       out.replaceChildren();
       const params = new URLSearchParams({ handle: handle.input.value.trim() });
       for (const [key, f] of [["name", name], ["dir", dir], ["schedule", schedule]]) {
-        if (f.input.value.trim()) params.set(key, f.input.value.trim());
+        const value = (f.value ? f.value() : f.input.value).trim();
+        if (value) params.set(key, value);
       }
       try {
         const data = await (await fetch("/api/staff/plan?" + params, { cache: "no-store" })).json();
@@ -281,6 +283,64 @@ function field(label, placeholder, hint) {
   return { row, input };
 }
 
+/**
+ * When the daily run happens, as a time and a set of days rather than as cron.
+ *
+ * The value on the wire is still a cron expression, because that is what goes in the workflow
+ * and what `roster hire` takes. But nobody hiring their first staff member knows that
+ * `0 9 * * 1-5` is nine in the morning on weekdays, and a field that demands it is a field
+ * that gets a wrong answer or an empty one.
+ *
+ * UTC, said out loud, with the local equivalent beside it: GitHub schedules in UTC, and an
+ * agent that starts an hour off twice a year is worse than one you had to think about once.
+ */
+function scheduleField() {
+  const time = el("input", { type: "time", value: "", step: "60", style: "width:130px" });
+  const days = el("select");
+  days.append(
+    el("option", { value: "1-5", textContent: "Weekdays" }),
+    el("option", { value: "*", textContent: "Every day" }),
+    el("option", { value: "1", textContent: "Mondays" }),
+    el("option", { value: "1,3,5", textContent: "Mon, Wed, Fri" }),
+  );
+  // Said rather than relying on "the first option is selected", which is true of a rendered
+  // <select> and not of one that has only been built.
+  days.value = "1-5";
+
+  const said = el("small");
+  const value = () => {
+    if (!time.value) return "";
+    const [h, m] = time.value.split(":");
+    return `${Number(m)} ${Number(h)} * * ${days.value}`;
+  };
+  const say = () => {
+    const cron = value();
+    said.textContent = cron
+      ? cronText(cron) + local(time.value)
+      : "Leave it empty for a slot clear of everyone else.";
+  };
+  time.oninput = say;
+  days.onchange = say;
+  say();
+
+  const row = el("div", { className: "ffield" });
+  row.append(
+    el("label", { textContent: "schedule" }),
+    el("div", { className: "row" }, [time, days, el("span", { className: "meta", textContent: "UTC" })]),
+    said,
+  );
+  return { row, input: time, value };
+}
+
+/** What that UTC time is where the person reading it is, when the two differ. */
+function local(hhmm) {
+  if (!hhmm) return "";
+  const [h, m] = hhmm.split(":").map(Number);
+  const at = new Date(Date.UTC(2026, 0, 5, h, m));
+  const here = at.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
+  return here === hhmm ? "" : " · " + here + " where you are";
+}
+
 const MARK = { ok: "check", stop: "closed", keep: "issue-open", todo: "dash", warn: "label" };
 
 function line(kind, text) {