@palate/cli 0.0.0-stage → 0.0.1

package/src/loop/rulereview.mjs

@@ -0,0 +1,146 @@
+// `palate rule review`: the rules palate proposed, on a board in the user's browser. One card per proposal: its
+// wording (editable), what it came from in plain words (with the pin's crop when there is one), where it should
+// apply (the scopes its evidence supports, the suggested one chosen), and Keep or Discard. Pressing Apply keeps
+// and discards them; a rule left undecided keeps waiting. Same pattern as the critique board (critique.mjs).
+import fs from "node:fs";
+import http from "node:http";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { freePort } from "../shoot.mjs";
+import { openBrowser } from "./pick.mjs";
+import { approveRule, checkWords, evidenceCount, evidenceText, proposedRules, rejectRule, scopeLabel, scopeOptions } from "./rules.mjs";
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const cap = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+
+// The board's view of one proposal.
+function card(r) {
+  const { options, suggest, why: reason } = scopeOptions(r);
+  const crops = (r.evidence ?? []).filter((e) => e.crop && fs.existsSync(e.crop)).slice(0, 3);
+  return {
+    id: r.id,
+    rule: r.rule,
+    why: `${cap(evidenceText(r))}.`,
+    count: evidenceCount(r),
+    options: options.map(({ id, label }) => ({ id, label })),
+    suggest,
+    // Why palate suggests that scope, in one line ("colour (emerald): only in palate-site").
+    reason,
+    // A measured check reads the whole page, so one component is asked of the judge instead.
+    how: checkWords({ ...r, where: undefined }),
+    inTheirWords: Boolean(r.inTheirWords),
+    crops: crops.map((e, i) => ({ n: i, alt: `${e.type === "pin" ? `Pin ${e.pin ?? ""}` : e.type === "failure" ? "The screen you called bad" : "Evidence"}${e.component ? ` on <${e.component}>` : ""}${e.route ? ` (${e.route})` : ""}`.replace("Pin  ", "Pin ") })),
+    files: crops.map((e) => e.crop),
+  };
+}
+
+export async function startRuleBoard({ open = true } = {}) {
+  const items = proposedRules().map(card);
+  if (!items.length) return null;
+  const decisions = {};
+  let applied = null;
+  let finish;
+  const done = new Promise((r) => (finish = r));
+  const body = (req) =>
+    new Promise((r) => {
+      let b = "";
+      req.on("data", (c) => (b += c));
+      req.on("end", () => r(b ? JSON.parse(b) : {}));
+    });
+  const json = (res, code, v) => {
+    res.writeHead(code, { "content-type": "application/json" });
+    res.end(JSON.stringify(v));
+  };
+  const server = http.createServer(async (req, res) => {
+    const u = new URL(req.url, "http://x");
+    try {
+      if (u.pathname === "/") {
+        res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+        return res.end(fs.readFileSync(path.join(here, "rules-board.html")));
+      }
+      if (u.pathname === "/api/state") return json(res, 200, { rules: items.map(({ files, ...c }) => c), decisions, applied });
+      if (u.pathname === "/api/decision" && req.method === "POST") {
+        const { id, decision, scope, text } = await body(req);
+        const item = items.find((c) => c.id === id);
+        if (!item) throw new Error(`No proposal ${id}`);
+        const d = (decisions[id] ??= {});
+        if (decision !== undefined) d.decision = ["keep", "discard"].includes(decision) ? decision : null;
+        if (scope !== undefined) d.scope = item.options.some((o) => o.id === scope) ? scope : null;
+        if (text !== undefined) d.text = String(text).slice(0, 600);
+        res.writeHead(204);
+        return res.end();
+      }
+      if (u.pathname === "/api/apply" && req.method === "POST") {
+        const { decisions: sent } = await body(req);
+        for (const [id, d] of Object.entries(sent ?? {})) if (items.some((c) => c.id === id)) decisions[id] = { ...decisions[id], ...d };
+        if (!applied) {
+          applied = apply();
+          setTimeout(finish, 200);
+        }
+        return json(res, 200, applied);
+      }
+      const m = /^\/img\/(R\d+)\/(\d)\.png$/.exec(u.pathname);
+      const file = m && items.find((c) => c.id === m[1])?.files[Number(m[2])];
+      if (file) {
+        res.writeHead(200, { "content-type": /\.jpe?g$/i.test(file) ? "image/jpeg" : "image/png" });
+        return fs.createReadStream(file).pipe(res);
+      }
+      res.writeHead(404);
+      res.end();
+    } catch (e) {
+      res.writeHead(400, { "content-type": "text/plain" });
+      res.end(String(e.message));
+    }
+  });
+  const port = await freePort();
+  await new Promise((r) => server.listen(port, "127.0.0.1", r));
+  const link = `http://localhost:${port}`;
+  if (open) openBrowser(link);
+  const result = done.then(() => {
+    server.close();
+    return report();
+  });
+  return { link, count: items.length, done: result, applied: () => applied };
+
+  // Keeps and discards what the user decided; the rest keeps waiting.
+  function apply() {
+    const out = { kept: [], discarded: [], waiting: [], errors: [] };
+    for (const c of items) {
+      const d = decisions[c.id] ?? {};
+      try {
+        if (d.decision === "keep") {
+          const text = d.text?.trim() && d.text.trim() !== c.rule ? d.text.trim() : undefined;
+          const { rule: r, mergedFrom } = approveRule(c.id, { scope: d.scope ?? c.suggest, text });
+          out.kept.push({ id: r.id, from: mergedFrom ?? null, rule: r.rule, scope: scopeLabel(r), how: checkWords(r) });
+        } else if (d.decision === "discard") {
+          const r = rejectRule(c.id);
+          out.discarded.push({ id: r.id, rule: r.rule });
+        } else out.waiting.push({ id: c.id, rule: c.rule });
+      } catch (e) {
+        out.errors.push({ id: c.id, error: e.message });
+      }
+    }
+    return out;
+  }
+
+  function report() {
+    const a = applied ?? { kept: [], discarded: [], waiting: items.map((c) => ({ id: c.id, rule: c.rule })), errors: [] };
+    return [
+      "# The user's answers on the proposed rules",
+      "",
+      `Kept: ${a.kept.length} · Discarded: ${a.discarded.length} · Still waiting: ${a.waiting.length}`,
+      ...(a.kept.length ? ["", "## Kept (enforced from now on, only where they apply)", ...a.kept.map((k) => `- ${k.id}${k.from ? ` (${k.from} merged into it)` : ""} [${k.scope}] ${k.rule} (${k.how})`)] : []),
+      ...(a.discarded.length ? ["", "## Discarded (one-off fixes; palate won't propose them again from the same evidence)", ...a.discarded.map((k) => `- ${k.id} ${k.rule}`)] : []),
+      ...(a.waiting.length ? ["", "## Still waiting (not applied anywhere)", ...a.waiting.map((k) => `- ${k.id} ${k.rule}`)] : []),
+      ...(a.errors.length ? ["", "## Couldn't apply", ...a.errors.map((k) => `- ${k.id}: ${k.error}`)] : []),
+    ].join("\n");
+  }
+}
+
+// CLI: open the board, wait for the user, return what they decided.
+export async function reviewRules({ open = true } = {}) {
+  const b = await startRuleBoard({ open });
+  if (!b) return "Nothing waiting for your OK. palate proposes rules when it sees a pattern: the same ask twice, a critique finding you agreed with, or a failure (palate taste learn).";
+  console.log(`Rule review board ready: ${b.link}  (${b.count} proposed rule${b.count > 1 ? "s" : ""}). Waiting for you…`);
+  return b.done;
+}

package/src/loop/rules-board.html

@@ -0,0 +1,199 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>palate rules</title>
+<link rel="icon" href="data:,">
+<style>
+  :root { --bg: #f4f4f2; --fg: #191917; --muted: #6a6964; --line: #dcdbd5; --card: #ffffff; --field: #fafaf8; --brand: #0b6e4f; --brand-hover: #095c42; --on-brand: #ffffff; --brand-tint: #e8f2ee; --ring: #0b6e4f; --strong: #191917; --on-strong: #ffffff; }
+  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #141413; --fg: #ecebe6; --muted: #9c9b94; --line: #2c2b28; --card: #1c1c1a; --field: #171716; --brand: #0b6e4f; --brand-hover: #0d7f5b; --on-brand: #ffffff; --brand-tint: #15302a; --ring: #3fb68b; --strong: #ecebe6; --on-strong: #141413; } }
+  :root[data-theme="dark"] { --bg: #141413; --fg: #ecebe6; --muted: #9c9b94; --line: #2c2b28; --card: #1c1c1a; --field: #171716; --brand: #0b6e4f; --brand-hover: #0d7f5b; --on-brand: #ffffff; --brand-tint: #15302a; --ring: #3fb68b; --strong: #ecebe6; --on-strong: #141413; }
+  * { box-sizing: border-box; }
+  html, body { height: 100%; }
+  body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; display: grid; grid-template-rows: auto 1fr auto; }
+  header.top { padding: 16px 16px 14px; border-bottom: 1px solid var(--line); }
+  header.top > div { max-width: 880px; margin: 0 auto; }
+  h1 { font-size: 17px; font-weight: 600; margin: 0 0 2px; }
+  .muted { color: var(--muted); }
+  .lede { margin: 0; color: var(--muted); max-width: 64ch; text-wrap: pretty; }
+  main { min-height: 0; overflow: auto; padding: 16px 16px 24px; }
+  .list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
+  .card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; transition: border-color .15s ease-out; }
+  .card.no-shot { grid-template-columns: minmax(0, 1fr); }
+  .card:hover, .card:focus-within { border-color: var(--muted); }
+  .card[data-decision="keep"] { border-color: var(--brand); }
+  .card[data-decision="discard"] .shots, .card[data-decision="discard"] .body > :not(.actions) { opacity: .5; }
+  .shots { display: flex; flex-direction: column; gap: 8px; }
+  .shot { display: block; width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 0; overflow: hidden; background: var(--bg); cursor: zoom-in; }
+  .shot img { display: block; width: 100%; max-height: 200px; object-fit: contain; }
+  .thumbs { display: flex; gap: 6px; }
+  .thumbs .shot { width: 72px; }
+  .thumbs .shot img { height: 48px; object-fit: contain; }
+  .body { display: grid; gap: 10px; align-content: start; }
+  .meta { display: flex; gap: 8px; font-size: 12px; color: var(--muted); }
+  .rule { width: 100%; resize: none; overflow: hidden; font: 600 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 5px 8px; margin: -6px -9px -4px; text-wrap: pretty; transition: border-color .15s ease-out, background-color .15s ease-out; }
+  .rule:hover { border-color: var(--line); }
+  .rule:focus { background: var(--field); border-color: var(--muted); }
+  .note { margin: -4px 0 0; font-size: 12px; color: var(--muted); }
+  .why { margin: 0; color: var(--muted); text-wrap: pretty; }
+  fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
+  legend { padding: 0; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
+  .opts { display: flex; flex-wrap: wrap; gap: 6px; }
+  .opt { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; background: var(--card); transition: border-color .15s ease-out, background-color .15s ease-out; }
+  .opt:hover { border-color: var(--muted); }
+  .opt input { position: absolute; opacity: 0; pointer-events: none; }
+  .opt:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
+  .opt:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
+  .opt .sug { font-size: 12px; color: var(--muted); }
+  .reason { margin: 0; font-size: 13px; color: var(--muted); }
+  .how { margin: 0; font-size: 12px; color: var(--muted); }
+  .actions { display: flex; gap: 8px; align-items: center; }
+  button { font: inherit; border: 1px solid var(--line); background: var(--card); color: var(--fg); border-radius: 6px; padding: 7px 14px; cursor: pointer; transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out; }
+  button:hover { border-color: var(--muted); }
+  button:active { transform: scale(.97); }
+  button:focus-visible, .shot:focus-visible, .rule:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+  button.keep[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
+  button.discard[aria-pressed="true"] { background: var(--strong); border-color: var(--strong); color: var(--on-strong); }
+  button.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }
+  button.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
+  .bar { border-top: 1px solid var(--line); padding: 10px 16px; }
+  .bar > div { max-width: 880px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
+  dialog { border: 0; padding: 0; background: var(--card); color: var(--fg); width: min(1200px, 96vw); max-height: 94vh; border-radius: 10px; overflow: hidden; }
+  dialog::backdrop { background: rgba(0, 0, 0, .7); }
+  dialog .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
+  dialog .inner { overflow: auto; max-height: calc(94vh - 56px); }
+  dialog img { width: 100%; display: block; }
+  .done { max-width: 880px; margin: 8vh auto 0; }
+  .done h2 { font-size: 17px; margin: 0 0 6px; }
+  .done ul { padding-left: 18px; margin: 8px 0 16px; }
+  .done li { margin: 4px 0; }
+  .empty { max-width: 880px; margin: 8vh auto 0; text-align: center; }
+  @media (max-width: 640px) { .card { grid-template-columns: minmax(0, 1fr); } .shot img { max-height: 160px; } }
+  @media (prefers-reduced-motion: reduce) { .card, button, .opt, .rule { transition: none; } button:active { transform: none; } }
+</style>
+</head>
+<body>
+<header class="top">
+  <div>
+    <h1>Keep these rules?</h1>
+    <p class="lede">palate noticed a pattern in what you asked for. Each rule below applies nowhere until you keep it, and only where you choose.</p>
+  </div>
+</header>
+<main id="main"></main>
+<div class="bar" id="bar">
+  <div>
+    <span class="muted" id="progress" aria-live="polite"></span>
+    <span class="muted">Rules you don't decide on keep waiting.</span>
+    <span style="flex:1"></span>
+    <button class="primary" id="apply">Apply</button>
+  </div>
+</div>
+<dialog id="zoom" aria-labelledby="zoomTitle">
+  <div class="head"><b id="zoomTitle"></b><button id="zoomClose">Close</button></div>
+  <div class="inner"><img id="zoomImg" alt=""></div>
+</dialog>
+<script>
+  const $ = (id) => document.getElementById(id);
+  const esc = (s) => String(s ?? "").replace(/[<>&"]/g, (c) => ({ "<": "&lt;", ">": "&gt;", "&": "&amp;", '"': "&quot;" })[c]);
+  let S;
+  const D = {};
+
+  async function load() {
+    S = await (await fetch("/api/state")).json();
+    if (S.applied) return finished(S.applied);
+    if (!S.rules.length) {
+      $("bar").hidden = true;
+      $("main").innerHTML = `<div class="empty"><h2>Nothing waiting for your OK.</h2><p class="muted">You can close this tab.</p></div>`;
+      return;
+    }
+    for (const r of S.rules) D[r.id] = { decision: null, scope: r.suggest, text: r.rule, ...(S.decisions[r.id] ?? {}) };
+    $("main").innerHTML = `<div class="list">${S.rules.map(card).join("")}</div>`;
+    document.querySelectorAll("textarea.rule").forEach((t) => {
+      fit(t);
+      let timer;
+      t.oninput = () => { fit(t); D[t.dataset.id].text = t.value; clearTimeout(timer); timer = setTimeout(() => post({ id: t.dataset.id, text: t.value }), 400); };
+    });
+    document.querySelectorAll("input[type=radio]").forEach((i) => (i.onchange = () => { D[i.dataset.id].scope = i.value; how(i.dataset.id); post({ id: i.dataset.id, scope: i.value }); }));
+    document.querySelectorAll("[data-d]").forEach((b) => (b.onclick = () => decide(b.dataset.id, b.dataset.d)));
+    document.querySelectorAll("[data-zoom]").forEach((b) => (b.onclick = () => zoom(b)));
+    for (const r of S.rules) how(r.id);
+    progress();
+  }
+  function card(r) {
+    const d = D[r.id];
+    const shots = r.crops.length
+      ? `<div class="shots">${shot(r, r.crops[0])}${r.crops.length > 1 ? `<div class="thumbs">${r.crops.slice(1).map((c) => shot(r, c)).join("")}</div>` : ""}</div>`
+      : "";
+    return `<article class="card${r.crops.length ? "" : " no-shot"}" id="c-${r.id}" data-decision="${d.decision ?? ""}" aria-labelledby="t-${r.id}">
+      ${shots}
+      <div class="body">
+        <div class="meta"><span>${esc(r.id)}</span><span aria-hidden="true">·</span><span>${esc(r.count)}</span></div>
+        <textarea class="rule" id="t-${r.id}" data-id="${r.id}" rows="1" aria-label="The rule, in words you can edit">${esc(d.text)}</textarea>
+        ${r.inTheirWords ? `<p class="note">This is in the critique's words. Say it the way you'd want it to hold.</p>` : ""}
+        <p class="why">${esc(r.why)}</p>
+        <fieldset>
+          <legend>Applies to</legend>
+          <div class="opts">${r.options.map((o) => `<label class="opt"><input type="radio" name="s-${r.id}" data-id="${r.id}" value="${esc(o.id)}"${o.id === d.scope ? " checked" : ""}>${esc(o.label)}${o.id === r.suggest ? ` <span class="sug">suggested</span>` : ""}</label>`).join("")}</div>
+        </fieldset>
+        ${r.reason ? `<p class="reason">Suggested: ${esc(r.reason)}</p>` : ""}
+        <p class="how" id="h-${r.id}"></p>
+        <div class="actions">
+          <button class="keep" data-id="${r.id}" data-d="keep" aria-pressed="${d.decision === "keep"}">Keep</button>
+          <button class="discard" data-id="${r.id}" data-d="discard" aria-pressed="${d.decision === "discard"}">Discard</button>
+        </div>
+      </div>
+    </article>`;
+  }
+  const shot = (r, c) => `<button class="shot" data-zoom="/img/${r.id}/${c.n}.png" data-alt="${esc(c.alt)}" aria-label="View ${esc(c.alt)} full size"><img src="/img/${r.id}/${c.n}.png" alt="${esc(c.alt)}"></button>`;
+  const fit = (t) => { t.style.height = "auto"; t.style.height = `${t.scrollHeight + 2}px`; };
+  // How the rule is checked depends on its scope: a measurement reads the whole page, so one component is the judge's.
+  function how(id) {
+    const r = S.rules.find((x) => x.id === id);
+    const s = D[id].scope ?? r.suggest;
+    const comp = s.startsWith("component:") ? s.slice(10) : null;
+    const route = s.startsWith("route:") ? s.slice(6) : null;
+    $(`h-${id}`).textContent = comp ? `The judge checks it on <${comp}> only.` : `${route ? `Only on ${route}: ` : ""}${r.how.charAt(0).toUpperCase()}${r.how.slice(1)}.`;
+  }
+  const post = (b) => fetch("/api/decision", { method: "POST", body: JSON.stringify(b) });
+  function decide(id, v) {
+    const next = D[id].decision === v ? null : v;
+    D[id].decision = next;
+    const c = $(`c-${id}`);
+    c.dataset.decision = next ?? "";
+    c.querySelectorAll("[data-d]").forEach((b) => b.setAttribute("aria-pressed", String(b.dataset.d === next)));
+    progress();
+    post({ id, decision: next });
+  }
+  function progress() {
+    const n = S.rules.filter((r) => D[r.id].decision).length;
+    $("progress").textContent = `${n} of ${S.rules.length} decided`;
+  }
+  function zoom(b) {
+    $("zoomTitle").textContent = b.dataset.alt;
+    $("zoomImg").src = b.dataset.zoom;
+    $("zoomImg").alt = b.dataset.alt;
+    $("zoom").showModal();
+  }
+  $("zoomClose").onclick = () => $("zoom").close();
+  // The wording wraps differently at another width: fit each box again.
+  addEventListener("resize", () => document.querySelectorAll("textarea.rule").forEach(fit));
+  $("apply").onclick = async () => {
+    $("apply").disabled = true;
+    const res = await fetch("/api/apply", { method: "POST", body: JSON.stringify({ decisions: D }) });
+    finished(await res.json());
+  };
+  function finished(a) {
+    $("bar").hidden = true;
+    const li = (k, tail) => `<li><b>${esc(k.id)}</b> ${esc(k.rule)}${tail ? ` <span class="muted">${esc(tail)}</span>` : ""}</li>`;
+    $("main").innerHTML = `<div class="done">
+      <h2>${a.kept.length} kept, ${a.discarded.length} discarded${a.waiting.length ? `, ${a.waiting.length} still waiting` : ""}.</h2>
+      <p class="muted">You can close this tab. Kept rules apply from the next build on, only where you chose. Discarded ones stay one-off fixes, and palate won't propose them again from the same evidence.</p>
+      ${a.kept.length ? `<ul>${a.kept.map((k) => li(k, k.scope)).join("")}</ul>` : ""}
+      ${a.errors?.length ? `<p class="muted">Couldn't apply: ${a.errors.map((e) => `${esc(e.id)} (${esc(e.error)})`).join(", ")}</p>` : ""}
+    </div>`;
+  }
+  load();
+</script>
+</body>
+</html>