@drunkcoding/agents-and-skills 0.0.13 → 0.0.14

package/plugins/html-effectiveness/templates/19-editor-feature-flags.html.tmpl

@@ -0,0 +1,627 @@
+<!--
+template: 19-editor-feature-flags
+upstream: 19-editor-feature-flags.html
+slots:
+  title: string  # replaces first <h1> innerHTML
+-->
+<div class="wrap">
+
+  <header>
+    <div class="eyebrow">Acme / editor / feature-flags</div>
+    <h1>{{title}}</h1>
+    <p class="sub">A form-based editor for the production feature-flag config.
+      Toggle flags, fix dependency warnings as they surface, then copy out
+      only the lines that changed.</p>
+  </header>
+
+  <div class="layout">
+    <div class="banner" id="banner">
+      <span class="glyph">&#9888;</span>
+      <span id="bannerText">1 flag is enabled without its prerequisite</span>
+    </div>
+
+    <div class="form-col" id="formCol"><!-- groups injected --></div>
+
+    <aside class="sidebar">
+      <div>
+        <div class="side-label">Pending changes</div>
+        <div class="side-count" id="sideCount">0 changed</div>
+      </div>
+      <pre class="diff" id="diff"><span class="empty">// no changes yet</span></pre>
+      <div class="btn-stack">
+        <button class="btn primary" id="copyDiff" disabled>Copy diff</button>
+        <button class="btn ghost" id="copyJson">Copy full JSON</button>
+        <button class="btn ghost" id="reset">Reset</button>
+      </div>
+    </aside>
+  </div>
+
+</div>
+
+<style>
+* { box-sizing: border-box; }
+.wrap {
+    max-width: 1080px;
+    margin: 0 auto;
+    padding: 48px 32px 64px;
+  }
+/* ---------- header ---------- */
+  header { margin-bottom: 28px; }
+.eyebrow {
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--gray-500);
+  }
+h1 {
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: 30px;
+    letter-spacing: -0.01em;
+    margin: 6px 0 4px;
+  }
+.sub {
+    color: var(--gray-500);
+    max-width: 600px;
+  }
+/* ---------- layout ---------- */
+  .layout {
+    display: grid;
+    grid-template-columns: 1fr 320px;
+    gap: 24px;
+    align-items: start;
+  }
+@media (max-width: 880px) {
+    .layout { grid-template-columns: 1fr; }
+    .sidebar { position: static !important; }
+  }
+/* ---------- warning banner ---------- */
+  .banner {
+    grid-column: 1 / -1;
+    display: none;
+    align-items: baseline;
+    gap: 8px;
+    padding: 10px 14px;
+    border: 1.5px solid #E8C2AE;
+    background: #F8E9E0;
+    color: var(--clay-d);
+    border-radius: 10px;
+    font-size: 13px;
+  }
+.banner.show { display: flex; }
+.banner .glyph { font-size: 13px; line-height: 1; transform: translateY(1px); }
+/* ---------- groups / panels ---------- */
+  .form-col { display: flex; flex-direction: column; gap: 16px; }
+.group {
+    background: var(--white);
+    border: 1.5px solid var(--gray-200);
+    border-radius: 12px;
+    overflow: hidden;
+  }
+.group-head {
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--gray-500);
+    padding: 12px 18px 11px;
+    border-bottom: 1.5px solid var(--gray-50);
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+  }
+.group-head .name { color: var(--gray-800); }
+.group-head .meta { letter-spacing: 0.04em; }
+/* ---------- flag rows ---------- */
+  .flag {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    padding: 14px 18px;
+    border-bottom: 1px solid var(--gray-50);
+    border-left: 3px solid transparent;
+    transition: border-left-color 140ms ease, background 140ms ease;
+  }
+.flag:last-child { border-bottom: none; }
+.flag.warn {
+    border-left-color: var(--clay);
+    background: #FBF3EE;
+  }
+.flag-info { flex: 1; min-width: 0; }
+.flag-key {
+    font-family: var(--mono);
+    font-size: 13px;
+    color: var(--gray-800);
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    flex-wrap: wrap;
+  }
+.dot {
+    display: none;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--clay);
+    flex: none;
+  }
+.flag.changed .dot { display: inline-block; }
+.rollout {
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.03em;
+    color: var(--gray-500);
+    background: var(--gray-50);
+    border: 1px solid var(--gray-200);
+    border-radius: 999px;
+    padding: 1px 7px 2px;
+  }
+.flag-desc {
+    color: var(--gray-500);
+    font-size: 12.5px;
+    margin-top: 2px;
+  }
+.req-chip {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 5px;
+    margin-top: 7px;
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--gray-500);
+    background: var(--gray-50);
+    border: 1px solid var(--gray-200);
+    border-radius: 999px;
+    padding: 2px 9px 3px;
+  }
+.req-chip .warn-glyph { display: none; }
+.flag.warn .req-chip {
+    color: var(--clay-d);
+    background: #F8E1D5;
+    border-color: #E8C2AE;
+  }
+.flag.warn .req-chip .warn-glyph { display: inline; }
+/* ---------- toggle switch ---------- */
+  .toggle {
+    position: relative;
+    flex: none;
+    width: 38px;
+    height: 22px;
+    margin-top: 1px;
+  }
+.toggle input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+.toggle .track {
+    position: absolute;
+    inset: 0;
+    background: var(--gray-200);
+    border-radius: 999px;
+    transition: background 160ms ease;
+    pointer-events: none;
+  }
+.toggle .track::after {
+    content: "";
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--white);
+    box-shadow: 0 1px 2px rgba(20,20,19,0.18);
+    transition: transform 160ms ease;
+  }
+.toggle input:checked + .track { background: var(--olive); }
+.toggle input:checked + .track::after { transform: translateX(16px); }
+.toggle input:focus-visible + .track {
+    outline: 2px solid var(--slate);
+    outline-offset: 2px;
+  }
+/* ---------- sidebar ---------- */
+  .sidebar {
+    position: sticky;
+    top: 24px;
+    background: var(--white);
+    border: 1.5px solid var(--gray-200);
+    border-radius: 12px;
+    padding: 18px;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+.side-label {
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--gray-500);
+  }
+.side-count {
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: 19px;
+    letter-spacing: -0.01em;
+  }
+.side-count .warn-n { color: var(--clay-d); }
+.side-count .sep { color: var(--gray-200); margin: 0 4px; }
+.diff {
+    margin: 0;
+    font-family: var(--mono);
+    font-size: 12px;
+    line-height: 1.7;
+    background: var(--gray-50);
+    border: 1px solid var(--gray-200);
+    border-radius: 8px;
+    padding: 12px 14px;
+    overflow-x: auto;
+    max-height: 320px;
+    overflow-y: auto;
+    white-space: pre;
+  }
+.diff .minus { color: var(--gray-500); }
+.diff .plus { color: var(--olive); }
+.diff .empty { color: var(--gray-500); }
+.btn {
+    display: block;
+    width: 100%;
+    border: none;
+    border-radius: 999px;
+    font-family: var(--mono);
+    font-size: 12px;
+    padding: 9px 16px;
+    cursor: pointer;
+    text-align: center;
+    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
+  }
+.btn.primary {
+    background: var(--slate);
+    color: var(--ivory);
+  }
+.btn.primary:hover:not(:disabled) { background: var(--gray-800); }
+.btn.primary:disabled {
+    background: var(--gray-200);
+    color: var(--gray-500);
+    cursor: not-allowed;
+  }
+.btn.primary.copied { background: var(--olive); }
+.btn.ghost {
+    background: transparent;
+    color: var(--gray-800);
+    border: 1.5px solid var(--gray-200);
+  }
+.btn.ghost:hover { border-color: var(--gray-500); }
+.btn.ghost.copied { border-color: var(--olive); color: var(--olive); }
+.btn-stack { display: flex; flex-direction: column; gap: 8px; }
+</style>
+
+<script>
+"use strict";
+
+// ---------------------------------------------------------------------------
+// data — the production flag set, as it exists right now
+// ---------------------------------------------------------------------------
+
+const GROUPS = [
+  {
+    id: "onboarding",
+    label: "Onboarding",
+    flags: [
+      { key: "onboarding.checklist_v2",
+        desc: "New three-step setup checklist replacing the modal tour.",
+        on: true },
+      { key: "onboarding.invite_nudge",
+        desc: "Nudge owners to invite teammates after creating their first project.",
+        on: true },
+      { key: "onboarding.workspace_templates",
+        desc: "Offer prebuilt workspace templates during signup.",
+        on: false, requires: "onboarding.checklist_v2" },
+      { key: "onboarding.skip_email_verify",
+        desc: "Let SSO-domain users in before email verification completes.",
+        on: false }
+    ]
+  },
+  {
+    id: "sync",
+    label: "Sync engine",
+    flags: [
+      { key: "sync.delta_compression",
+        desc: "Send field-level deltas instead of full document snapshots.",
+        on: true },
+      { key: "sync.offline_queue_v2",
+        desc: "Persist offline edits to IndexedDB and replay on reconnect.",
+        on: false, requires: "sync.delta_compression" },
+      { key: "sync.presence_cursors",
+        desc: "Show live collaborator cursors in board and doc views.",
+        on: true },
+      { key: "sync.conflict_banner",
+        desc: "Surface a merge banner instead of silently last-write-wins.",
+        on: false, requires: "sync.offline_queue_v2" },
+      { key: "sync.binary_ws_frames",
+        desc: "Switch the realtime channel to binary WebSocket frames.",
+        on: false, rollout: 10 }
+    ]
+  },
+  {
+    id: "billing",
+    label: "Billing",
+    flags: [
+      { key: "billing.usage_meter",
+        desc: "Show per-seat usage meter on the workspace billing page.",
+        on: false },
+      { key: "billing.annual_discount_banner",
+        desc: "Promote the annual-plan discount in the upgrade flow.",
+        on: true },
+      { key: "billing.proration_preview",
+        desc: "Preview the prorated charge before confirming a plan change.",
+        on: false, requires: "billing.usage_meter" },
+      { key: "billing.dunning_emails_v3",
+        desc: "Use the rewritten dunning sequence with a 14-day grace window.",
+        on: true, rollout: 25 }
+    ]
+  },
+  {
+    id: "internal",
+    label: "Internal",
+    flags: [
+      { key: "internal.shadow_traffic",
+        desc: "Mirror 1% of API traffic to the staging cluster for diffing.",
+        on: false },
+      { key: "internal.query_tracing",
+        desc: "Attach OpenTelemetry spans to every Postgres query.",
+        on: true },
+      { key: "internal.kill_switch_ui",
+        desc: "Expose the emergency kill-switch panel in the admin console.",
+        on: true, requires: "internal.query_tracing" }
+    ]
+  }
+];
+
+// flat lookup, plus a frozen copy of initial state
+const FLAGS = {};
+const INITIAL = {};
+GROUPS.forEach(g => g.flags.forEach(f => {
+  FLAGS[f.key] = f;
+  INITIAL[f.key] = f.on;
+}));
+
+// ---------------------------------------------------------------------------
+// render the form once; state lives in the checkboxes
+// ---------------------------------------------------------------------------
+
+const formCol   = document.getElementById("formCol");
+const banner    = document.getElementById("banner");
+const bannerTxt = document.getElementById("bannerText");
+const sideCount = document.getElementById("sideCount");
+const diffEl    = document.getElementById("diff");
+const copyDiffBtn = document.getElementById("copyDiff");
+const copyJsonBtn = document.getElementById("copyJson");
+const resetBtn    = document.getElementById("reset");
+
+function esc(s) {
+  return String(s).replace(/[&<>"]/g, c =>
+    ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
+}
+
+function buildForm() {
+  formCol.innerHTML = "";
+  for (const g of GROUPS) {
+    const panel = document.createElement("section");
+    panel.className = "group";
+    panel.dataset.group = g.id;
+
+    const head = document.createElement("div");
+    head.className = "group-head";
+    head.innerHTML =
+      '<span class="name">' + esc(g.label) + '</span>' +
+      '<span class="meta" data-meta></span>';
+    panel.appendChild(head);
+
+    for (const f of g.flags) {
+      const row = document.createElement("div");
+      row.className = "flag";
+      row.dataset.key = f.key;
+
+      const rolloutBadge = (typeof f.rollout === "number")
+        ? '<span class="rollout">' + f.rollout + '%</span>'
+        : "";
+
+      const reqChip = f.requires
+        ? '<div class="req-chip"><span class="warn-glyph">&#9888;</span>' +
+          '<span>requires ' + esc(f.requires) + '</span></div>'
+        : "";
+
+      row.innerHTML =
+        '<label class="toggle">' +
+          '<input type="checkbox" data-key="' + esc(f.key) + '"' +
+            (f.on ? " checked" : "") +
+            ' aria-label="' + esc(f.key) + '">' +
+          '<span class="track"></span>' +
+        '</label>' +
+        '<div class="flag-info">' +
+          '<div class="flag-key"><span class="dot"></span>' +
+            '<span>' + esc(f.key) + '</span>' + rolloutBadge +
+          '</div>' +
+          '<div class="flag-desc">' + esc(f.desc) + '</div>' +
+          reqChip +
+        '</div>';
+
+      panel.appendChild(row);
+    }
+    formCol.appendChild(panel);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// state helpers
+// ---------------------------------------------------------------------------
+
+function currentState() {
+  const state = {};
+  formCol.querySelectorAll("input[type=checkbox]").forEach(cb => {
+    state[cb.dataset.key] = cb.checked;
+  });
+  return state;
+}
+
+function computeDiff(state) {
+  const lines = [];
+  for (const g of GROUPS) {
+    for (const f of g.flags) {
+      if (state[f.key] !== INITIAL[f.key]) {
+        lines.push({ key: f.key, from: INITIAL[f.key], to: state[f.key] });
+      }
+    }
+  }
+  return lines;
+}
+
+function diffText(lines) {
+  return lines.map(l =>
+    '- "' + l.key + '": ' + l.from + '\n' +
+    '+ "' + l.key + '": ' + l.to
+  ).join("\n");
+}
+
+function fullJson(state) {
+  // grouped, ordered, pretty-printed — what you'd actually paste into the file
+  let out = "{\n";
+  GROUPS.forEach((g, gi) => {
+    g.flags.forEach((f, fi) => {
+      const last = gi === GROUPS.length - 1 && fi === g.flags.length - 1;
+      out += '  "' + f.key + '": ' + state[f.key] + (last ? "" : ",") + "\n";
+    });
+  });
+  out += "}";
+  return out;
+}
+
+// ---------------------------------------------------------------------------
+// the live update pass
+// ---------------------------------------------------------------------------
+
+function update() {
+  const state = currentState();
+  let warnCount = 0;
+
+  // per-row decorations
+  for (const g of GROUPS) {
+    let onCount = 0;
+    for (const f of g.flags) {
+      const row = formCol.querySelector('.flag[data-key="' + CSS.escape(f.key) + '"]');
+      const on = state[f.key];
+      if (on) onCount++;
+
+      const changed = on !== INITIAL[f.key];
+      row.classList.toggle("changed", changed);
+
+      let warn = false;
+      if (f.requires && on && !state[f.requires]) warn = true;
+      row.classList.toggle("warn", warn);
+      if (warn) warnCount++;
+    }
+    const meta = formCol.querySelector(
+      '.group[data-group="' + g.id + '"] [data-meta]');
+    meta.textContent = g.flags.length + " flags, " + onCount + " on";
+  }
+
+  // diff + sidebar
+  const lines = computeDiff(state);
+  if (lines.length === 0) {
+    diffEl.innerHTML = '<span class="empty">// no changes yet</span>';
+    copyDiffBtn.disabled = true;
+  } else {
+    diffEl.innerHTML = lines.map(l =>
+      '<span class="minus">- "' + esc(l.key) + '": ' + l.from + '</span>\n' +
+      '<span class="plus">+ "' + esc(l.key) + '": ' + l.to + '</span>'
+    ).join("\n");
+    copyDiffBtn.disabled = false;
+  }
+
+  sideCount.innerHTML =
+    lines.length + " changed" +
+    '<span class="sep">&middot;</span>' +
+    '<span class="' + (warnCount ? "warn-n" : "") + '">' +
+      warnCount + " warning" + (warnCount === 1 ? "" : "s") +
+    "</span>";
+
+  // banner
+  if (warnCount > 0) {
+    bannerTxt.textContent =
+      warnCount === 1
+        ? "1 flag is enabled without its prerequisite"
+        : warnCount + " flags are enabled without their prerequisites";
+    banner.classList.add("show");
+  } else {
+    banner.classList.remove("show");
+  }
+}
+
+// ---------------------------------------------------------------------------
+// clipboard + buttons
+// ---------------------------------------------------------------------------
+
+function flash(btn, label) {
+  const orig = btn.textContent;
+  btn.textContent = label;
+  btn.classList.add("copied");
+  btn.disabled = true;
+  setTimeout(() => {
+    btn.textContent = orig;
+    btn.classList.remove("copied");
+    btn.disabled = false;
+    update(); // restore disabled state on copyDiff if needed
+  }, 1200);
+}
+
+function writeClipboard(text) {
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    return navigator.clipboard.writeText(text);
+  }
+  // fallback for file:// contexts without clipboard permission
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.style.position = "fixed";
+  ta.style.left = "-9999px";
+  document.body.appendChild(ta);
+  ta.select();
+  try { document.execCommand("copy"); } catch (e) { /* ignore */ }
+  document.body.removeChild(ta);
+  return Promise.resolve();
+}
+
+copyDiffBtn.addEventListener("click", () => {
+  const lines = computeDiff(currentState());
+  if (!lines.length) return;
+  writeClipboard(diffText(lines)).then(() => flash(copyDiffBtn, "Copied ✓"));
+});
+
+copyJsonBtn.addEventListener("click", () => {
+  writeClipboard(fullJson(currentState())).then(() => flash(copyJsonBtn, "Copied ✓"));
+});
+
+resetBtn.addEventListener("click", () => {
+  formCol.querySelectorAll("input[type=checkbox]").forEach(cb => {
+    cb.checked = INITIAL[cb.dataset.key];
+  });
+  update();
+});
+
+formCol.addEventListener("change", e => {
+  if (e.target.matches("input[type=checkbox]")) update();
+});
+
+// ---------------------------------------------------------------------------
+// boot
+// ---------------------------------------------------------------------------
+
+buildForm();
+update();
+</script>