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

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

@@ -14,34 +14,33 @@
  * wrong. The server validates it before writing.
  */
 
-import { getFile, getOrgLayer, post } from "../api.js";
-import { el, esc, grow, kb, skeleton } from "../dom.js";
-import { icon } from "../icons.js";
+import { getFile, getOrgLayer } from "../api.js";
+import { el, esc, kb, skeleton } from "../dom.js";
 import { mdlite } from "../md.js";
 import { humansOf, S, writeHash } from "../state.js";
 import { yamlPre } from "../yaml.js";
+import { businessForm, fileModes, prioritiesForm } from "./orgedit.js";
+import { repoPicker } from "./repos.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.",
+  "org.yaml": "The people, repos, defaults and coding agent.",
+  "org/business.md": "What the business is. Every staff member reads it.",
+  "org/priorities.md": "This month's priorities, in order, and what's out of scope.",
+  "org/operating.md": "What staff do on their own, what they ask about, and how a run starts and ends.",
+  "org/guardrails.md": "Rules every staff member must follow.",
+  "org/voice.md": "How staff write.",
+  "prompts/daily.md": "The instructions for a scheduled run.",
+  "prompts/mention.md": "The instructions when you @-mention someone.",
+  "prompts/_identity.md": "Who staff post as.",
+  "prompts/_paths.md": "Where files are during a run.",
+  "prompts/_inflight.md": "Pull requests people have open, so staff don't work on the same files.",
 };
 
 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."],
+  ["org", "Org files", "Every staff member reads these."],
+  ["prompts", "Prompts", "Roster's run instructions. Upgrades may change them."],
 ];
 
 export function viewOrg(m) {
@@ -51,8 +50,7 @@ export function viewOrg(m) {
     el("p", {
       className: "sub",
       textContent:
-        "The layer every staff member inherits. Editing one of these reaches all " +
-        org.staff.length + " of them on their next run.",
+        "Files every staff member reads. Changes apply from their next run.",
     }),
   );
 
@@ -75,6 +73,20 @@ export function viewOrg(m) {
   );
   m.append(facts);
 
+  /* Marking a product repo after setup. The picker only lived on the setup screen, so a repo
+     created later meant typing `role: product` into org.yaml by hand. Folded, because it asks
+     GitHub for every repo in the org and most visits here are to read a file. */
+  const repoPane = el("div");
+  const repos = el("button", { className: "ghbtn", textContent: "Add a product repo" });
+  repos.onclick = () => {
+    if (repoPane.children.length) {
+      repoPane.replaceChildren();
+      return;
+    }
+    repoPane.replaceChildren(repoPicker({ org: org.org, onAdded: () => open("org.yaml") }));
+  };
+  m.append(el("div", { className: "row", style: "margin-bottom:14px" }, [repos]), repoPane);
+
   const split = el("div", { className: "split" });
   const tree = el("div", { className: "tree" });
   const viewer = el("div", { className: "viewer" });
@@ -152,97 +164,25 @@ export function viewOrg(m) {
     viewer.replaceChildren();
     const head = el("div", { className: "row filehead" });
     head.append(el("span", { className: "meta", textContent: full(path) + " · " + kb(text.length) }));
-    /* 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 editor(path, text) {
-    viewer.replaceChildren();
     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?.();
-
-    cancel.onclick = () => render(path, text);
-    save.onclick = commit;
-
+    /* Every file opens on Read, with the ways to change it as tabs beside it: the same ones
+       Getting started offers, because a file is no easier to write after setup than during it.
+       org.yaml is checked by the server before it is written, so a bad one is refused. */
+    viewer.append(head, el("p", { className: "factsub", textContent: why(file) }));
+    const read = {
+      label: "Read",
+      node: isYaml ? yamlPre(text) : el("div", { className: "md doc", innerHTML: mdlite(text) }),
+    };
+    const o = { path: full(path), name: S.data.name, text, before: [read], onSaved: () => show(path) };
     viewer.append(
-      el("p", {
-        className: "editnote",
-        textContent:
-          "⌘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."
-            : ""),
-      }),
+      path === "org/business.md"
+        ? businessForm(o)
+        : path === "org/priorities.md"
+          ? prioritiesForm(o)
+          : fileModes({ ...o, lang: isYaml ? "yaml" : "md" }),
     );
-
-    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;
-      }
-      save.disabled = cancel.disabled = true;
-      status.textContent = "committing…";
-      status.className = "meta";
-      try {
-        const r = await post({ path: full(path), text: ta.value }, "/api/save");
-        status.textContent = r.pushed
-          ? "committed and pushed · " + r.sha
-          : "committed " + r.sha + ", but the push failed: " + (r.note ?? "");
-        status.className = r.pushed ? "meta ok" : "meta warn";
-        render(path, ta.value);
-      } catch (e) {
-        // A refused org.yaml is the interesting case: the reason is the whole message.
-        status.textContent = e.message;
-        status.className = "meta err";
-        save.disabled = cancel.disabled = false;
-      }
-    }
   }
 }
 

package/templates/portal/js/views/orgedit.js

@@ -0,0 +1,234 @@
+/* Ways to write the two org files a person has to write, shared by Getting started and the Org
+ * screen: plain questions, an AI interview, or the file itself. Each is one tab of a switcher,
+ * so the choice is visible rather than folded under a Save button. */
+
+import { fileUrl, saveFile } from "../api.js";
+import { el, grow } from "../dom.js";
+import { highlighted } from "../mdedit.js";
+import { paste } from "./paste.js";
+
+const BUSINESS_QUESTIONS = [
+  ["line", "What does it do, in one line?", "What this business does, in one line", true],
+  ["who", "Who is it for?", "Who the customers are, specifically", true],
+  ["key", "What does everything depend on?", "The one fact everything else follows from", false],
+  ["true", "What's already true? What's built, measured or tried?", "What is already true", false],
+  ["not", "What should staff never decide on their own?", "What is not ours to decide", false],
+];
+
+const val = (input) => String(input.value ?? "").trim();
+
+/* A file still in the shape it shipped in holds the questions, not answers, and pre-filling the
+   fields with "Not a segment. The person…" reads as if somebody had already answered them. */
+const isStub = (text) => /This file is a stub|Or answer these by hand/.test(text);
+
+/**
+ * org/business.md as five questions. With `text`, the answers already in the file fill the
+ * fields, so changing one answer does not mean retyping the other four.
+ * @param {{path: string, name: string, text?: string, onSaved: () => void, before?: object[]}} o
+ *   `before` puts extra tabs ahead of the three, which is how the Org screen adds Read.
+ */
+export function businessForm(o) {
+  const form = el("div");
+  const known = isStub(o.text ?? "") ? new Map() : sections(o.text ?? "");
+  const fields = BUSINESS_QUESTIONS.map(([id, label, heading, required]) => {
+    const input = id === "line" ? el("input", { type: "text" }) : el("textarea", { className: "pastebox", rows: 3 });
+    const had = known.get(heading.toLowerCase());
+    if (had) input.value = had.replace(/^>\s?/gm, "");
+    return { id, input, wrap: el("label", { className: "qfield" }, [el("span", { textContent: label + (required ? "" : " (optional)") }), input]) };
+  });
+  const save = el("button", { className: "btn primary", textContent: "Save" });
+  const out = el("div");
+  form.append(...fields.map((f) => f.wrap), el("div", { className: "row" }, [save]), out);
+
+  save.onclick = async () => {
+    const missing = fields.find((f, i) => BUSINESS_QUESTIONS[i][3] && !val(f.input));
+    if (missing) {
+      missing.input.focus?.();
+      out.replaceChildren(el("p", { className: "err", textContent: "Answer the first two at least." }));
+      return;
+    }
+    const text =
+      `# What ${o.name} is\n\n` +
+      fields
+        .map((f, i) => [BUSINESS_QUESTIONS[i][2], val(f.input)])
+        .filter(([, v]) => v)
+        .map(([h, v]) => `## ${h}\n\n${v}\n`)
+        .join("\n");
+    await saveAndSay(save, out, o.path, text, "portal: write org/business.md", o.onSaved);
+  };
+
+  return modes([
+    ...(o.before ?? []),
+    { label: "Answer questions", node: form },
+    { label: "Let an AI interview you", node: paste({ kind: "discover", title: "", onSaved: o.onSaved }) },
+    rawMode(o.path, o.onSaved),
+  ]);
+}
+
+/** org/priorities.md as three lines and an out-of-scope list, filled from the file if it has them. */
+export function prioritiesForm(o) {
+  const form = el("div");
+  const { items, outs } = isStub(o.text ?? "") ? { items: [], outs: [] } : parsePriorities(o.text ?? "");
+  const ranks = [1, 2, 3].map((i) => {
+    const input = el("input", { type: "text", placeholder: i === 1 ? "e.g. Tasks can be ticked off and removed" : "" });
+    if (items[i - 1]) input.value = items[i - 1];
+    return { input, wrap: el("label", { className: "qfield" }, [el("span", { textContent: "Priority " + i + (i > 1 ? " (optional)" : "") }), input]) };
+  });
+  const scope = el("textarea", { className: "pastebox", rows: 3, placeholder: "One per line" });
+  if (outs.length) scope.value = outs.join("\n");
+  const save = el("button", { className: "btn primary", textContent: "Save" });
+  const out = el("div");
+  form.append(
+    ...ranks.map((r) => r.wrap),
+    el("label", { className: "qfield" }, [el("span", { textContent: "Out of scope this month (optional)" }), scope]),
+    el("div", { className: "row" }, [save]),
+    out,
+  );
+  save.onclick = async () => {
+    const list = ranks.map((r) => val(r.input)).filter(Boolean);
+    if (!list.length) {
+      ranks[0].input.focus?.();
+      out.replaceChildren(el("p", { className: "err", textContent: "Add at least one priority." }));
+      return;
+    }
+    const scoped = val(scope).split("\n").map((l) => l.replace(/^[-*]\s*/, "").trim()).filter(Boolean);
+    const text =
+      "## What matters this month\n\n### Priorities, in order\n\n" +
+      list.map((t, i) => `${i + 1}. ${t}`).join("\n") +
+      "\n" +
+      (scoped.length ? "\n### Out of scope this month\n\n" + scoped.map((t) => `- ${t}`).join("\n") + "\n" : "");
+    await saveAndSay(save, out, o.path, text, "portal: write org/priorities.md", o.onSaved);
+  };
+  return modes([
+    ...(o.before ?? []),
+    { label: "Fill in", node: form },
+    { label: "Let an AI interview you", node: paste({ kind: "priorities", title: "", onSaved: o.onSaved }) },
+    rawMode(o.path, o.onSaved),
+  ]);
+}
+
+/** Any org file as highlighted text, with Read ahead of it on the Org screen. */
+export function fileModes(o) {
+  return modes([...(o.before ?? []), rawMode(o.path, o.onSaved, o.lang)]);
+}
+
+/**
+ * The file itself, for editing what is already there rather than starting again.
+ * @param {{label?: string, note?: string, read?: () => Promise<string>}} o
+ *   `read` starts the editor from other text than the file, once, so switching tabs does not
+ *   throw away what was typed. `note` is a line above the editor.
+ */
+export function rawMode(path, onSaved, lang = "md", o = {}) {
+  const node = el("div");
+  if (o.note) node.append(el("p", { className: "sub", textContent: o.note }));
+  const ta = el("textarea", { className: "pastebox" });
+  ta.rows = 12;
+  const save = el("button", { className: "btn primary", textContent: "Save" });
+  const out = el("div");
+  const hl = highlighted(ta, lang);
+  node.append(hl, el("div", { className: "row" }, [save]), out);
+  ta.addEventListener("input", () => grow(ta));
+  const commit = () =>
+    saveAndSay(save, out, path, ta.value, "portal: edit " + path.split("/").slice(1).join("/"), onSaved);
+  save.onclick = commit;
+  // ⌘S is what a person's hands do in a text box.
+  ta.addEventListener("keydown", (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+      e.preventDefault();
+      commit();
+    }
+  });
+  // Read when first shown, so it shows the file as it is then, not as it was at page load.
+  let read = false;
+  const load = () => {
+    if (o.read && read) return;
+    read = true;
+    return (
+      o.read
+        ? o.read()
+        : // Not getFile: an absent file answers 404 with a message, and that is not what to edit.
+          fetch(fileUrl(path), { cache: "no-store" }).then((r) => (r.ok ? r.text() : ""))
+    ).then((text) => {
+      ta.value = text;
+      grow(ta);
+      hl.repaint();
+    });
+  };
+  return { label: o.label ?? "Edit the file", node, onShow: load };
+}
+
+/** Ways to do one thing, as a switcher across the top: one shown at a time. */
+export function modes(list) {
+  const box = el("div");
+  const bar = el("div", { className: "modes" });
+  const panes = el("div");
+  const buttons = list.map((m, i) => {
+    const b = el("button", { className: "mode", textContent: m.label });
+    b.onclick = () => show(i);
+    return b;
+  });
+  bar.append(...buttons);
+  box.append(bar, panes);
+  function show(i) {
+    buttons.forEach((b, j) => b.classList.toggle("on", i === j));
+    panes.replaceChildren(list[i].node);
+    list[i].onShow?.();
+  }
+  show(0);
+  return box;
+}
+
+async function saveAndSay(btn, out, path, text, message, onSaved) {
+  btn.disabled = true;
+  const label = btn.textContent;
+  btn.textContent = "Saving…";
+  try {
+    const r = await saveFile(path, text, message);
+    out.replaceChildren(
+      el("p", {
+        className: r.pushed ? "sub" : "err",
+        textContent: r.pushed ? "Saved." : "Saved locally, but the push failed: " + (r.note ?? ""),
+      }),
+    );
+    onSaved?.();
+  } catch (err) {
+    out.replaceChildren(el("p", { className: "err", textContent: String(err.message || err) }));
+  } finally {
+    btn.disabled = false;
+    btn.textContent = label;
+  }
+}
+
+/** `## Heading` → the text under it, by lower-cased heading. */
+function sections(text) {
+  const out = new Map();
+  let key = null;
+  let buf = [];
+  const flush = () => key && out.set(key, buf.join("\n").trim());
+  for (const line of text.split("\n")) {
+    const m = /^##\s+(.*)$/.exec(line);
+    if (m) {
+      flush();
+      key = m[1].trim().toLowerCase();
+      buf = [];
+    } else if (key) buf.push(line);
+  }
+  flush();
+  return out;
+}
+
+function parsePriorities(text) {
+  const items = [];
+  const outs = [];
+  let where = "";
+  for (const line of text.split("\n")) {
+    if (/^#+\s.*priorit/i.test(line)) where = "p";
+    else if (/^#+\s.*out of scope/i.test(line)) where = "o";
+    else if (/^#/.test(line)) where = "";
+    const n = /^\s*\d+[.)]\s+(.*)$/.exec(line);
+    const b = /^\s*[-*]\s+(.*)$/.exec(line);
+    if (where === "p" && n) items.push(n[1].trim());
+    if (where === "o" && b) outs.push(b[1].trim());
+  }
+  return { items, outs };
+}

package/templates/portal/js/views/paste.js

@@ -7,19 +7,27 @@
  * Nothing here writes. The panel parses, shows a diff, and waits for a second click. */
 
 import { getBrief, parsePaste, saveFile } from "../api.js";
+import { mdlite } from "../md.js";
 import { el, toClipboard } from "../dom.js";
 import { unifiedDiff, diffStat } from "../textdiff.js";
 
 /**
- * @param {{kind: string, staff?: string, title?: string, onSaved?: () => void}} opts
+ * @param {{kind: string, staff?: string, title?: string, about?: string, onSaved?: () => void}} opts
+ *   `about` is a sentence on what the role does, added to a charter brief.
  */
 export function paste(opts) {
   const box = el("div", { className: "paste" });
-  box.append(el("h3", { textContent: opts.title ?? "Write it with your own AI" }));
+  if (opts.title !== "") box.append(el("h3", { textContent: opts.title ?? "Write it with your own AI" }));
 
   const status = el("p", { className: "sub", textContent: "Building the prompt…" });
   box.append(status);
 
+  /* A charter brief carries a worked example to model the shape on, matched to the role. The
+     choice is on the page because the match is a guess, and "none" is a fair answer. */
+  const model = el("select", { hidden: true });
+  const modelRow = el("label", { className: "sub", hidden: true }, ["Example to follow: ", model]);
+  box.append(modelRow);
+
   const actions = el("div", { className: "row" });
   const copy = el("button", { className: "btn primary", textContent: "Copy the prompt" });
   const show = el("button", { className: "btn", textContent: "Show it" });
@@ -32,8 +40,7 @@ export function paste(opts) {
   const answer = el("textarea", {
     className: "pastebox",
     placeholder:
-      "Paste the whole reply here, including anything your AI said around the file. " +
-      "Only the part between the sentinels is used.",
+      "Paste its whole reply here.",
   });
   answer.rows = 8;
 
@@ -42,16 +49,49 @@ export function paste(opts) {
 
   let brief = null;
 
-  getBrief(opts.kind, opts.staff)
+  const NAMES = {
+    cto: "the CTO example",
+    cmo: "the CMO example",
+    support: "the support example",
+    pm: "the product manager example",
+    designer: "the designer example",
+    qa: "the QA example",
+    devops: "the DevOps example",
+    writer: "the writer example",
+    analyst: "the analyst example",
+    community: "the community example",
+    none: "no example",
+  };
+  model.onchange = () => {
+    copy.disabled = true;
+    getBrief(opts.kind, opts.staff, model.value, opts.about)
+      .then((data) => {
+        if (data.error) throw new Error(data.error);
+        brief = data;
+        if (!preview.hidden) preview.textContent = brief.text;
+      })
+      .catch((err) => {
+        status.className = "err";
+        status.textContent = String(err.message || err);
+      })
+      .finally(() => {
+        copy.disabled = false;
+      });
+  };
+
+  getBrief(opts.kind, opts.staff, undefined, opts.about)
     .then((data) => {
       if (data.error) throw new Error(data.error);
       brief = data;
+      if (data.examples) {
+        model.replaceChildren(...data.examples.map((e) => el("option", { value: e, textContent: NAMES[e] ?? e })));
+        model.value = data.example ?? "none";
+        model.hidden = modelRow.hidden = false;
+      }
       status.textContent =
-        "Paste this into Claude, ChatGPT or anything else. It carries every file it refers to, " +
-        "so there is nothing to attach and nothing for it to ask you for. It will interview you " +
-        "first, then hand back the finished file.";
+        "Copy the prompt into Claude or ChatGPT and answer its questions.";
       box.append(
-        el("p", { className: "sub", textContent: "Then paste its whole reply back here:" }),
+        el("p", { className: "sub", textContent: "Then paste its reply here:" }),
         answer,
         el("div", { className: "row" }, [check]),
         result,
@@ -97,23 +137,47 @@ export function paste(opts) {
       result.append(note);
     }
 
+    // What the AI said around the file: its caveats and "check these" are worth reading first.
+    const notes = String(answer.value ?? "")
+      .replace(/<<<ROSTER FILE [^>]+>>>[\s\S]*?<<<ROSTER END>>>/g, "")
+      .trim();
+
     for (const file of data.files ?? []) {
-      if (file.unchanged) continue;
       const card = el("div", { className: "pastefile" });
-      const stat = diffStat(file.before, file.text);
+      const name = file.path.split("/").slice(-2).join("/");
+      if (file.unchanged) {
+        card.append(el("p", { className: "verdict", textContent: "✓ Same as what's already in " + name + ". Nothing to save." }));
+        result.append(card);
+        continue;
+      }
       card.append(
-        el("b", { textContent: file.path }),
-        el("span", {
-          className: "meta",
-          textContent: `+${stat.added} −${stat.removed}` + (file.writable ? "" : " · not writable"),
+        el("p", {
+          className: "verdict" + (file.writable ? " ok" : " bad"),
+          textContent: file.writable
+            ? "✓ Looks good. Saving replaces " + name + " with this:"
+            : "✗ " + file.path + " can't be written from here.",
         }),
       );
-      const diff = el("pre", { className: "diff" });
+      card.append(el("div", { className: "md doc pastepreview", innerHTML: mdlite(file.text) }));
+
+      if (notes) {
+        const said = el("details", { className: "pastenotes", open: true });
+        said.append(el("summary", { textContent: "Your AI also said" }), el("div", { className: "md doc", innerHTML: mdlite(notes) }));
+        card.append(said);
+      }
+
+      const diff = el("pre", { className: "diff", hidden: true });
       diff.textContent = unifiedDiff(file.before, file.text, file.path);
-      card.append(diff);
+      const stat = diffStat(file.before, file.text);
+      const toggle = el("button", { className: "ghbtn", textContent: `Show changes (+${stat.added} −${stat.removed})` });
+      toggle.onclick = () => {
+        diff.hidden = !diff.hidden;
+        toggle.textContent = (diff.hidden ? "Show changes" : "Hide changes") + ` (+${stat.added} −${stat.removed})`;
+      };
 
+      const row = el("div", { className: "row" });
       if (file.writable) {
-        const save = el("button", { className: "btn primary", textContent: "Save and commit" });
+        const save = el("button", { className: "btn primary", textContent: "Save" });
         save.onclick = async () => {
           save.disabled = true;
           save.textContent = "Saving…";
@@ -124,17 +188,19 @@ export function paste(opts) {
             opts.onSaved?.();
           } catch (err) {
             save.disabled = false;
-            save.textContent = "Save and commit";
+            save.textContent = "Save";
             card.append(el("p", { className: "err", textContent: String(err.message || err) }));
           }
         };
-        card.append(save);
+        row.append(save);
       }
+      row.append(toggle);
+      card.append(row, diff);
       result.append(card);
     }
 
     if (!(data.problems ?? []).length && !(data.files ?? []).length) {
-      result.append(el("p", { className: "sub", textContent: "Nothing to do." }));
+      result.append(el("p", { className: "verdict bad", textContent: "✗ No file found in that reply." }));
     }
   };
 

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

@@ -9,8 +9,9 @@
  * changing a byte of the composed text, and nothing said so before.
  */
 
+import { highlighted } from "../mdedit.js";
 import { getFile, post } from "../api.js";
-import { askText } from "../dialog.js";
+import { askText, askYes } from "../dialog.js";
 import { el, esc, grow, kb, toClipboard } from "../dom.js";
 import { icon } from "../icons.js";
 import { mdlite } from "../md.js";
@@ -351,8 +352,10 @@ export function viewPrompt(m) {
     );
 
     const ta = el("textarea", { value: text, className: "editor" });
-    viewer.append(ta);
+    const hl = highlighted(ta, "md");
+    viewer.append(hl);
     grow(ta);
+    hl.repaint();
     ta.addEventListener("input", () => grow(ta));
 
     const status = el("span", { className: "meta" });
@@ -375,8 +378,12 @@ export function viewPrompt(m) {
         status.textContent = "nothing changed";
         return;
       }
-      if (!confirm("Commit " + layer.path + " to " + layer.repo + " and push?\n\n" +
-                   "Picked up by " + reach + ".")) return;
+      const yes = await askYes({
+        title: "Commit " + layer.path + " to " + layer.repo + " and push?",
+        hint: "Picked up by " + reach + ".",
+        confirm: "Commit and push",
+      });
+      if (!yes) return;
       save.disabled = cancel.disabled = true;
       status.textContent = "committing…";
       status.className = "meta";