@nanocollective/roster 0.1.0-alpha.5 → 0.1.0-alpha.51

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,
@@ -80,63 +120,97 @@ export function paste(opts) {
       result.replaceChildren(el("p", { className: "err", textContent: String(err.message || err) }));
       return;
     }
-    result.replaceChildren();
-
-    /* Problems first, each with the sentence that gets a better answer. A model that replied in
-       prose is the common case and it is not the person's mistake, so it reads as a next step
-       rather than as an error. */
-    for (const p of data.problems ?? []) {
-      const note = el("div", { className: "problem" });
-      note.append(el("b", { textContent: p.message }));
-      if (p.retry) {
-        const retry = el("pre", { className: "cmd", textContent: p.retry });
-        const again = el("button", { className: "btn", textContent: "Copy this reply" });
-        again.onclick = () => toClipboard(p.retry, again, "Copied");
-        note.append(retry, again);
-      }
-      result.append(note);
-    }
+    showPasteResult(result, data, answer.value, opts.onSaved);
+  };
 
-    for (const file of data.files ?? []) {
-      if (file.unchanged) continue;
-      const card = el("div", { className: "pastefile" });
-      const stat = diffStat(file.before, file.text);
-      card.append(
-        el("b", { textContent: file.path }),
-        el("span", {
-          className: "meta",
-          textContent: `+${stat.added} −${stat.removed}` + (file.writable ? "" : " · not writable"),
-        }),
-      );
-      const diff = el("pre", { className: "diff" });
-      diff.textContent = unifiedDiff(file.before, file.text, file.path);
-      card.append(diff);
-
-      if (file.writable) {
-        const save = el("button", { className: "btn primary", textContent: "Save and commit" });
-        save.onclick = async () => {
-          save.disabled = true;
-          save.textContent = "Saving…";
-          try {
-            await saveFile(file.path, file.text, `portal: write ${file.path}`);
-            save.textContent = "Saved";
-            card.classList.add("saved");
-            opts.onSaved?.();
-          } catch (err) {
-            save.disabled = false;
-            save.textContent = "Save and commit";
-            card.append(el("p", { className: "err", textContent: String(err.message || err) }));
-          }
-        };
-        card.append(save);
-      }
+  return box;
+}
+
+/**
+ * What a pasted reply turned into: problems first, then each file with its diff and a Save.
+ * Shared by every copy-a-prompt, paste-the-answer loop, whichever endpoint parsed it.
+ */
+export function showPasteResult(result, data, answerText, onSaved) {
+  result.replaceChildren();
+
+  /* Problems first, each with the sentence that gets a better answer. A model that replied in
+     prose is the common case and it is not the person's mistake, so it reads as a next step
+     rather than as an error. */
+  for (const p of data.problems ?? []) {
+    const note = el("div", { className: "problem" });
+    note.append(el("b", { textContent: p.message }));
+    if (p.retry) {
+      const retry = el("pre", { className: "cmd", textContent: p.retry });
+      const again = el("button", { className: "btn", textContent: "Copy this reply" });
+      again.onclick = () => toClipboard(p.retry, again, "Copied");
+      note.append(retry, again);
+    }
+    result.append(note);
+  }
+
+  // What the AI said around the file: its caveats and "check these" are worth reading first.
+  const notes = String(answerText ?? "")
+    .replace(/<<<ROSTER FILE [^>]+>>>[\s\S]*?<<<ROSTER END>>>/g, "")
+    .trim();
+
+  for (const file of data.files ?? []) {
+    const card = el("div", { className: "pastefile" });
+    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;
     }
-
-    if (!(data.problems ?? []).length && !(data.files ?? []).length) {
-      result.append(el("p", { className: "sub", textContent: "Nothing to do." }));
+    card.append(
+      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.",
+      }),
+    );
+    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);
     }
-  };
 
-  return box;
+    const diff = el("pre", { className: "diff", hidden: true });
+    diff.textContent = unifiedDiff(file.before, file.text, file.path);
+    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" });
+      save.onclick = async () => {
+        save.disabled = true;
+        save.textContent = "Saving…";
+        try {
+          await saveFile(file.path, file.text, `portal: write ${file.path}`);
+          save.textContent = "Saved";
+          card.classList.add("saved");
+          onSaved?.();
+        } catch (err) {
+          save.disabled = false;
+          save.textContent = "Save";
+          card.append(el("p", { className: "err", textContent: String(err.message || err) }));
+        }
+      };
+      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: "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 { askYes, sheet } from "../dialog.js";
 import { el, esc, grow, kb, toClipboard } from "../dom.js";
 import { icon } from "../icons.js";
 import { mdlite } from "../md.js";
@@ -18,6 +19,7 @@ import { render } from "../router.js";
 import { S, staff, writeHash } from "../state.js";
 import { diffStat, unifiedDiff } from "../textdiff.js";
 import { renderDiff } from "./changed.js";
+import { showPasteResult } from "./paste.js";
 
 const KINDS = [
   ["daily", "Daily", "the scheduled run"],
@@ -25,48 +27,98 @@ const KINDS = [
 ];
 
 /**
- * Build the paste-ready brief on the server, where compose.mjs lives, and copy it.
+ * Fix a prompt with your own AI, in a side sheet: what is wrong, what you want changed, the
+ * prompt as it is today, a brief to copy, and a box for the reply. The reply is parsed into
+ * whole files and shown as diffs; nothing is saved until you press Save on one.
  *
- * 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.
+ * @param {{handle: string, name?: string, kind: string, want?: string, title?: string,
+ *   detail?: string}} o
+ * @returns {{box: object | null, body: HTMLElement, want: HTMLTextAreaElement}} what it built,
+ *   so a caller (or a test, where there is no <dialog>) can see it.
  */
-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,
+export function amendSheet(o) {
+  const body = el("div", { className: "amend" });
+  const x = el("button", { className: "iconbtn", title: "Close (Esc)", ariaLabel: "Close" });
+  x.append(icon("close"));
+  body.append(el("div", { className: "sidebar-x" }, [x]));
+
+  body.append(el("h3", { className: "sheettitle", textContent: o.title ?? "Change what they are told" }));
+  if (o.detail) body.append(el("p", { className: "sub", textContent: o.detail }));
+
+  const want = el("textarea", {
+    className: "pastebox",
+    rows: 3,
+    value: o.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";
+  body.append(el("label", { className: "amendlabel", textContent: "1. What you want changed" }), want);
+
+  const copy = el("button", { className: "btn primary", textContent: "Copy the prompt" });
+  const copied = el("span", { className: "meta" });
+  copy.onclick = async () => {
+    copy.disabled = true;
+    try {
+      const url =
+        "/api/amend?staff=" + encodeURIComponent(o.handle) +
+        "&kind=" + encodeURIComponent(o.kind) +
+        "&want=" + encodeURIComponent(want.value);
+      const text = await (await fetch(url, { cache: "no-store" })).text();
+      await toClipboard(text, copy, "Copy the prompt");
+      copied.textContent = "Paste it into Claude, ChatGPT or any other AI.";
+      copied.className = "meta";
+    } catch (e) {
+      copied.textContent = String(e.message || e);
+      copied.className = "meta err";
+    } finally {
+      copy.disabled = false;
     }
-  } catch (e) {
-    btn.disabled = false;
-    btn.textContent = label;
-    if (note) {
-      note.textContent = e.message;
-      note.className = "meta err";
+  };
+  body.append(
+    el("label", { className: "amendlabel", textContent: "2. Copy the prompt into your AI" }),
+    el("div", { className: "row" }, [copy, copied]),
+  );
+
+  // The prompt this is about, to read before deciding what to ask for.
+  const today = el("details", { className: "amendtoday" });
+  const summary = el("summary", { textContent: "The " + o.kind + " prompt as it is today" });
+  const text = el("pre", { className: "briefpreview", textContent: "Composing…" });
+  today.append(summary, text);
+  body.append(today);
+  fetch("/api/prompt?staff=" + encodeURIComponent(o.handle) + "&kind=" + encodeURIComponent(o.kind), { cache: "no-store" })
+    .then((r) => r.json())
+    .then((v) => {
+      if (v.error) throw new Error(v.error);
+      const words = String(v.composed ?? "").split(/\s+/).filter(Boolean).length;
+      summary.textContent = "The " + o.kind + " prompt as it is today · " + words.toLocaleString() + " words";
+      text.textContent = v.composed ?? "";
+    })
+    .catch((e) => {
+      text.textContent = String(e.message || e);
+    });
+
+  const answer = el("textarea", { className: "pastebox", rows: 8, placeholder: "Paste its whole reply here." });
+  const check = el("button", { className: "btn", textContent: "Check the answer" });
+  const result = el("div", { className: "pasteresult" });
+  check.onclick = async () => {
+    if (!answer.value.trim()) return;
+    result.replaceChildren(el("p", { className: "sub", textContent: "Reading…" }));
+    try {
+      const data = await post({ staff: o.handle, kind: o.kind, answer: answer.value }, "/api/amend/check");
+      showPasteResult(result, data, answer.value, () => {});
+    } catch (e) {
+      result.replaceChildren(el("p", { className: "err", textContent: String(e.message || e) }));
     }
-  }
+  };
+  body.append(
+    el("label", { className: "amendlabel", textContent: "3. Paste its reply" }),
+    answer,
+    el("div", { className: "row" }, [check]),
+    result,
+  );
+
+  const box = sheet({ node: body, side: true });
+  if (box) x.onclick = () => box.close();
+  return { box, body, want };
 }
 
 export function viewPrompt(m) {
@@ -90,7 +142,7 @@ export function viewPrompt(m) {
   };
   /* The point of the screen: you can see the prompt, and you can get help changing it
      without first working out which of eight files to open. */
-  const help = el("button", { className: "ghbtn primary", textContent: "Copy a brief for changing this" });
+  const help = el("button", { className: "ghbtn primary", textContent: "Change this with your AI" });
   help.onclick = () => copyAmend("");
   const copy = el("button", { className: "ghbtn", textContent: "Copy the prompt" });
   copy.onclick = () => {
@@ -99,7 +151,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]));
 
-  const copyAmend = (want, btn) => copyAmendBrief(s.handle, S.promptKind, want, btn ?? help, note);
+  const copyAmend = (want) => amendSheet({ handle: s.handle, name: s.name, kind: S.promptKind, want });
 
   const split = el("div", { className: "split" });
   const tree = el("div", { className: "tree" });
@@ -351,8 +403,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 +429,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";

package/templates/portal/js/views/repos.js

@@ -5,31 +5,36 @@
  * spelling a repo name exactly right in a YAML file, which is the kind of thing that fails
  * quietly and reads as the tool being broken. */
 
-import { addRepo, listRepos } from "../api.js";
+import { addRepo, getRepos, listRepos } from "../api.js";
 import { el } from "../dom.js";
 
 /**
- * @param {{org: string, known: string[], onAdded?: () => void}} opts
+ * @param {{org: string, known?: string[], onAdded?: () => void}} opts  without `known`, what
+ *   org.yaml already lists is read off disk, which is how the Org screen uses it long after setup.
  */
 export function repoPicker(opts) {
-  const box = el("div", { className: "manual" });
-  box.append(
-    el("b", { textContent: "Which repos the staff work in" }),
-    el("p", {
-      textContent:
-        "Repos marked as products are the ones staff contribute to without owning. A new hire " +
-        "picks them up automatically.",
-    }),
-  );
+  const box = el("div", { className: opts.bare ? "" : "manual" });
+  if (!opts.bare) {
+    box.append(
+      el("b", { textContent: "Which repos the staff work in" }),
+      el("p", {
+        textContent:
+          "Add the repos your staff should work on. New hires get access to them automatically.",
+      }),
+    );
+  }
 
   const out = el("div", { style: "margin-top:9px" });
   box.append(out);
   out.replaceChildren(el("p", { className: "sub", textContent: "Reading your repos…" }));
 
-  listRepos(opts.org)
-    .then((data) => {
+  const known = opts.known
+    ? Promise.resolve(opts.known)
+    : getRepos().then((d) => (d.repos ?? []).map((r) => r.name));
+  Promise.all([listRepos(opts.org), known])
+    .then(([data, listed]) => {
       if (data.error) throw new Error(data.error);
-      const already = new Set(opts.known ?? []);
+      const already = new Set(listed);
       const candidates = (data.repos ?? []).filter((r) => !already.has(r.name));
 
       if (!candidates.length) {
@@ -52,7 +57,7 @@ export function repoPicker(opts) {
           add.disabled = true;
           add.textContent = "Adding…";
           try {
-            await addRepo(repo.name, "product");
+            await addRepo(repo.name, "product", repo.visibility);
             add.textContent = "Added";
             row.classList.add("added");
             opts.onAdded?.();

package/templates/portal/js/views/runonce.js

@@ -0,0 +1,94 @@
+/* One daily run, now, followed to the end.
+ *
+ * The last step of setting anybody up. Doctor calls a workflow that has never run unproven,
+ * because nothing short of a finished run shows the App, its grant, the secrets and the
+ * callers all work together. This starts one, and says how it ended. */
+
+import { runStatus, startRun } from "../api.js";
+import { askYes } from "../dialog.js";
+import { el } from "../dom.js";
+
+/**
+ * @param {{staff: string, name: string, onDone?: (ok: boolean) => void}} opts
+ */
+export function runOnce(opts) {
+  const box = el("div", { className: "manual" });
+  box.append(
+    el("b", { textContent: "Run " + opts.name + " once, now" }),
+    el("p", {
+      className: "sub",
+      textContent:
+        "A real daily run: it does a day's work and spends what a scheduled one would. " +
+        "When it finishes you get the outcome and the log.",
+    }),
+  );
+  const go = el("button", { className: "btn primary", textContent: "Run once now" });
+  const out = el("div", { style: "margin-top:9px" });
+  box.append(el("div", { className: "row" }, [go]), out);
+
+  go.onclick = async () => {
+    const yes = await askYes({
+      title: "Start a daily run for " + opts.name + " now?",
+      hint: "It is a real run, and it costs what one does.",
+      confirm: "Start the run",
+    });
+    if (!yes) return;
+    go.disabled = true;
+    const say = (text, cls) => out.replaceChildren(el("p", { className: cls ?? "sub", textContent: text }));
+    say("Starting…");
+    let run;
+    try {
+      run = await startRun(opts.staff);
+    } catch (err) {
+      say(String(err.message || err), "err");
+      go.disabled = false;
+      return;
+    }
+    const link = el("a", { href: run.url, target: "_blank", rel: "noopener", textContent: "the log" });
+    if (!run.id) {
+      out.replaceChildren(el("p", { className: "sub" }, ["Started. It has not shown up yet; follow it at ", link, "."]));
+      go.disabled = false;
+      return;
+    }
+
+    /* Polled rather than streamed: a run takes minutes, the status changes a handful of times,
+       and a clock beside it is what shows the page has not hung. */
+    const began = Date.now();
+    const tick = async () => {
+      let now;
+      try {
+        now = await runStatus(opts.staff, run.id);
+        if (now.error) throw new Error(now.error);
+      } catch (err) {
+        say(String(err.message || err), "err");
+        go.disabled = false;
+        return;
+      }
+      const mins = Math.floor((Date.now() - began) / 60000);
+      if (now.status !== "completed") {
+        out.replaceChildren(
+          el("p", { className: "sub" }, [now.status.replace("_", " ") + ", " + mins + " min so far. ", link]),
+        );
+        setTimeout(tick, 15000);
+        return;
+      }
+      go.disabled = false;
+      const ok = now.conclusion === "success";
+      const done = el("div");
+      done.append(
+        el("p", { className: ok ? "" : "err" }, [
+          ok
+            ? "It worked. The App, its grant, the secrets and the callers are proven, and Health now says so. "
+            : "It ended " + (now.conclusion || "without a conclusion") + ". ",
+          el("a", { href: now.url, target: "_blank", rel: "noopener", textContent: "The log" }),
+        ]),
+      );
+      for (const f of now.failedAt ?? []) done.append(el("p", { className: "sub", textContent: "Failed at " + f }));
+      if (!ok) done.append(el("p", { className: "sub", textContent: "Troubleshooting, in the docs, has what each failure usually means." }));
+      out.replaceChildren(done);
+      opts.onDone?.(ok);
+    };
+    tick();
+  };
+  return box;
+}