@drunkcoding/agents-and-skills 0.0.13 → 0.0.15

package/plugins/html-effectiveness/templates/18-editor-triage-board.html.tmpl

@@ -0,0 +1,541 @@
+<!--
+template: 18-editor-triage-board
+upstream: 18-editor-triage-board.html
+slots:
+  title: string  # replaces first <h1> innerHTML
+-->
+<div class="wrap">
+
+  <header>
+    <div class="eyebrow">Acme / editor / triage</div>
+    <h1>{{title}}</h1>
+    <p class="sub">
+      Twenty-four open Linear tickets, pre-sorted into a best guess. Drag them
+      across Now / Next / Later / Cut until the cut feels right, then copy the
+      result back into the planning doc as markdown.
+    </p>
+    <div class="hintline">drag tickets between columns &nbsp;·&nbsp; click a tag to filter</div>
+  </header>
+
+  <div class="toolbar">
+    <div class="summary" id="summary"></div>
+    <div class="spacer"></div>
+    <button class="filter-active" id="filterBadge"></button>
+    <button class="ghost" id="resetBtn">Reset</button>
+    <button class="primary" id="copyBtn">Copy as markdown</button>
+  </div>
+
+  <div class="board" id="board"></div>
+
+</div>
+
+<style>
+* { box-sizing: border-box; }
+.wrap {
+    max-width: 1180px;
+    margin: 0 auto;
+    padding: 48px 32px 64px;
+  }
+/* ---------- header ---------- */
+  header { margin-bottom: 22px; }
+.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: 620px;
+    margin: 0;
+  }
+.hintline {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--gray-500);
+    margin-top: 10px;
+  }
+.hintline::before {
+    content: "›";
+    color: var(--clay);
+    margin-right: 6px;
+  }
+/* ---------- toolbar ---------- */
+  .toolbar {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    background: var(--ivory);
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 14px 0 12px;
+    margin-bottom: 14px;
+    border-bottom: 1.5px solid var(--gray-200);
+  }
+.summary {
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--gray-800);
+    letter-spacing: 0.01em;
+  }
+.summary b { color: var(--slate); font-weight: 600; }
+.summary .dot { color: var(--gray-200); margin: 0 4px; }
+.spacer { flex: 1; }
+.filter-active {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--clay-d);
+    background: #F5E6DE;
+    border: 1.5px solid #E8C9BA;
+    border-radius: 999px;
+    padding: 4px 10px;
+    cursor: pointer;
+    display: none;
+  }
+.filter-active.on { display: inline-block; }
+.filter-active:hover { border-color: var(--clay); }
+button.primary {
+    background: var(--slate);
+    color: var(--ivory);
+    border: 1.5px solid var(--slate);
+    border-radius: 999px;
+    font-family: var(--mono);
+    font-size: 12px;
+    padding: 9px 16px;
+    cursor: pointer;
+    letter-spacing: 0.01em;
+  }
+button.primary:hover { background: var(--gray-800); }
+button.primary.copied { background: var(--olive); border-color: var(--olive); }
+button.ghost {
+    background: transparent;
+    color: var(--gray-800);
+    border: 1.5px solid var(--gray-200);
+    border-radius: 999px;
+    font-family: var(--mono);
+    font-size: 12px;
+    padding: 9px 16px;
+    cursor: pointer;
+  }
+button.ghost:hover { border-color: var(--gray-500); }
+/* ---------- board ---------- */
+  .board {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16px;
+    align-items: start;
+  }
+.col {
+    background: var(--white);
+    border: 1.5px solid var(--gray-200);
+    border-radius: 12px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    min-height: 200px;
+  }
+.col[data-col="now"] { border-top: 3px solid var(--clay); }
+.col[data-col="next"] { border-top: 3px solid var(--olive); }
+.col[data-col="later"] { border-top: 3px solid var(--gray-500); }
+.col[data-col="cut"] { border-top: 3px solid var(--gray-200); }
+.col.dragover {
+    outline: 2px dashed var(--clay);
+    outline-offset: -6px;
+    background: #FBF6F2;
+  }
+.col-head {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: var(--white);
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    padding: 14px 14px 10px;
+    border-bottom: 1.5px solid var(--gray-50);
+  }
+.col-head h2 {
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: 17px;
+    margin: 0;
+    letter-spacing: -0.01em;
+  }
+.col-head .count {
+    margin-left: auto;
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--gray-500);
+    background: var(--gray-50);
+    border: 1.5px solid var(--gray-200);
+    border-radius: 999px;
+    padding: 1px 8px;
+    min-width: 26px;
+    text-align: center;
+  }
+.col-body {
+    padding: 10px 10px 6px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
+    min-height: 60px;
+  }
+.col-foot {
+    border-top: 1.5px solid var(--gray-50);
+    padding: 8px 14px 12px;
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--gray-500);
+    display: flex;
+    justify-content: space-between;
+  }
+.col-foot b { color: var(--gray-800); font-weight: 600; }
+/* ---------- ticket card ---------- */
+  .ticket {
+    background: var(--white);
+    border: 1.5px solid var(--gray-200);
+    border-radius: 8px;
+    padding: 10px 11px 9px;
+    cursor: grab;
+    user-select: none;
+    transition: border-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
+  }
+.ticket:hover { border-color: var(--gray-500); box-shadow: 0 1px 3px rgba(20,20,19,0.06); }
+.ticket:active { cursor: grabbing; }
+.ticket.dragging { opacity: .4; }
+.ticket.dim { opacity: .25; }
+.ticket-top {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 5px;
+  }
+.tid {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--gray-500);
+    letter-spacing: 0.01em;
+  }
+.tag {
+    font-family: var(--mono);
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-radius: 999px;
+    padding: 1px 7px 2px;
+    border: 1px solid transparent;
+    cursor: pointer;
+  }
+.tag:hover { filter: brightness(0.96); }
+.tag-bug { background: #F5E2D8; color: var(--clay-d); border-color: #E8C9BA; }
+.tag-feat { background: #E8EDE0; color: #5C6F44; border-color: #CFDAC0; }
+.tag-chore { background: var(--gray-50); color: var(--gray-800); border-color: var(--gray-200); }
+.tag-debt { background: var(--gray-50); color: var(--gray-800); border-color: var(--gray-200); }
+.est {
+    margin-left: auto;
+    font-family: var(--mono);
+    font-size: 10px;
+    color: var(--gray-500);
+    border: 1.5px solid var(--gray-200);
+    border-radius: 4px;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+.ttitle {
+    font-size: 13px;
+    line-height: 1.35;
+    color: var(--slate);
+    margin-bottom: 7px;
+  }
+.ticket-bot {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+.owner {
+    font-family: var(--mono);
+    font-size: 10px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: var(--oat);
+    color: var(--gray-800);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    letter-spacing: 0.02em;
+  }
+.owner.o2 { background: #DCE4D2; }
+.owner.o3 { background: #ECD9CE; }
+.owner.o4 { background: var(--gray-50); }
+@media (max-width: 920px) {
+    .board { grid-template-columns: repeat(2, 1fr); }
+  }
+</style>
+
+<script>
+// ---------- data ----------
+  var COLUMNS = [
+    { key: 'now',   label: 'Now',   rationale: 'Blocking the v2.4 release or actively losing user data.' },
+    { key: 'next',  label: 'Next',  rationale: 'High-leverage and well-scoped — start the moment Now clears.' },
+    { key: 'later', label: 'Later', rationale: 'Real, but can ride to a future cycle without anyone noticing.' },
+    { key: 'cut',   label: 'Cut',   rationale: 'Not this quarter — close, dedupe, or push back to the requester.' }
+  ];
+
+  var EST_PTS = { S: 1, M: 2, L: 3 };
+
+  // tag, est, owner, col
+  var INITIAL = [
+    { id: 'BIR-241', title: 'Fix sync conflict toast firing twice on reconnect', tag: 'bug',   est: 'M', owner: 'AK', col: 'now' },
+    { id: 'BIR-238', title: 'Comments lost when editing offline then reloading', tag: 'bug',   est: 'L', owner: 'JM', col: 'now' },
+    { id: 'BIR-252', title: 'Billing webhook 500s on annual → monthly downgrade', tag: 'bug',   est: 'M', owner: 'RS', col: 'now' },
+    { id: 'BIR-219', title: 'Migrate workspace permissions to new ACL table',    tag: 'debt',  est: 'L', owner: 'AK', col: 'now' },
+    { id: 'BIR-260', title: 'SSO login loop on Safari 17 with strict cookies',   tag: 'bug',   est: 'S', owner: 'TN', col: 'now' },
+
+    { id: 'BIR-244', title: 'Inline @-mention picker in doc comments',           tag: 'feat',  est: 'M', owner: 'JM', col: 'next' },
+    { id: 'BIR-231', title: 'Bulk-archive completed projects from the sidebar',  tag: 'feat',  est: 'S', owner: 'EL', col: 'next' },
+    { id: 'BIR-247', title: 'Activity feed: collapse repeated edit events',      tag: 'feat',  est: 'M', owner: 'TN', col: 'next' },
+    { id: 'BIR-228', title: 'Notification preferences per project',              tag: 'feat',  est: 'L', owner: 'EL', col: 'next' },
+    { id: 'BIR-255', title: 'Keyboard shortcut cheat-sheet overlay (⌘/)',        tag: 'feat',  est: 'S', owner: 'RS', col: 'next' },
+    { id: 'BIR-236', title: 'Empty-state illustrations for new workspaces',      tag: 'chore', est: 'S', owner: 'EL', col: 'next' },
+    { id: 'BIR-249', title: 'Audit log export to CSV for admins',                tag: 'feat',  est: 'M', owner: 'AK', col: 'next' },
+
+    { id: 'BIR-213', title: 'Dark mode pass on settings + billing pages',        tag: 'chore', est: 'M', owner: 'EL', col: 'later' },
+    { id: 'BIR-258', title: 'Slack integration: post on milestone close',        tag: 'feat',  est: 'M', owner: 'RS', col: 'later' },
+    { id: 'BIR-221', title: 'Replace moment.js with date-fns across web',        tag: 'debt',  est: 'L', owner: 'TN', col: 'later' },
+    { id: 'BIR-263', title: 'Drag-to-reorder columns on the board view',         tag: 'feat',  est: 'M', owner: 'JM', col: 'later' },
+    { id: 'BIR-209', title: 'Upgrade Postgres minor + reindex search vectors',   tag: 'chore', est: 'M', owner: 'AK', col: 'later' },
+    { id: 'BIR-251', title: 'Per-doc read receipts in the share dialog',         tag: 'feat',  est: 'L', owner: 'JM', col: 'later' },
+    { id: 'BIR-240', title: 'Onboarding checklist resurfaces after dismissal',   tag: 'bug',   est: 'S', owner: 'TN', col: 'later' },
+    { id: 'BIR-265', title: 'Add request-id to client error reports',            tag: 'debt',  est: 'S', owner: 'RS', col: 'later' },
+
+    { id: 'BIR-198', title: 'Custom emoji reactions on comments',                tag: 'feat',  est: 'M', owner: 'EL', col: 'cut' },
+    { id: 'BIR-204', title: 'Native Windows desktop wrapper',                    tag: 'feat',  est: 'L', owner: 'TN', col: 'cut' },
+    { id: 'BIR-217', title: 'AI summary of long comment threads',                tag: 'feat',  est: 'L', owner: 'JM', col: 'cut' },
+    { id: 'BIR-233', title: 'Public roadmap page with voting',                   tag: 'feat',  est: 'L', owner: 'RS', col: 'cut' }
+  ];
+
+  var OWNER_CLASS = { AK: 'o1', JM: 'o2', RS: 'o3', TN: 'o4', EL: 'o1' };
+
+  var tickets = [];          // live state
+  var activeFilter = null;   // tag string or null
+  var dragId = null;
+
+  // ---------- build DOM ----------
+  var board = document.getElementById('board');
+  var colBodies = {};
+  var colCounts = {};
+  var colFoots = {};
+
+  COLUMNS.forEach(function (c) {
+    var col = document.createElement('section');
+    col.className = 'col';
+    col.dataset.col = c.key;
+
+    var head = document.createElement('div');
+    head.className = 'col-head';
+    var h2 = document.createElement('h2');
+    h2.textContent = c.label;
+    var count = document.createElement('span');
+    count.className = 'count';
+    head.appendChild(h2);
+    head.appendChild(count);
+
+    var body = document.createElement('div');
+    body.className = 'col-body';
+
+    var foot = document.createElement('div');
+    foot.className = 'col-foot';
+
+    col.appendChild(head);
+    col.appendChild(body);
+    col.appendChild(foot);
+    board.appendChild(col);
+
+    colBodies[c.key] = body;
+    colCounts[c.key] = count;
+    colFoots[c.key] = foot;
+
+    // drop targets
+    col.addEventListener('dragover', function (e) {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+      col.classList.add('dragover');
+    });
+    col.addEventListener('dragleave', function (e) {
+      if (!col.contains(e.relatedTarget)) col.classList.remove('dragover');
+    });
+    col.addEventListener('drop', function (e) {
+      e.preventDefault();
+      col.classList.remove('dragover');
+      if (!dragId) return;
+      var t = tickets.find(function (x) { return x.id === dragId; });
+      if (t && t.col !== c.key) { t.col = c.key; render(); }
+    });
+  });
+
+  function makeCard(t) {
+    var card = document.createElement('article');
+    card.className = 'ticket';
+    card.draggable = true;
+    card.dataset.id = t.id;
+    if (activeFilter && t.tag !== activeFilter) card.classList.add('dim');
+
+    var top = document.createElement('div');
+    top.className = 'ticket-top';
+    var tid = document.createElement('span');
+    tid.className = 'tid';
+    tid.textContent = t.id;
+    var tag = document.createElement('button');
+    tag.type = 'button';
+    tag.className = 'tag tag-' + t.tag;
+    tag.textContent = t.tag;
+    tag.addEventListener('click', function (e) {
+      e.stopPropagation();
+      activeFilter = (activeFilter === t.tag) ? null : t.tag;
+      render();
+    });
+    var est = document.createElement('span');
+    est.className = 'est';
+    est.textContent = t.est;
+    top.appendChild(tid);
+    top.appendChild(tag);
+    top.appendChild(est);
+
+    var title = document.createElement('div');
+    title.className = 'ttitle';
+    title.textContent = t.title;
+
+    var bot = document.createElement('div');
+    bot.className = 'ticket-bot';
+    var owner = document.createElement('span');
+    owner.className = 'owner ' + (OWNER_CLASS[t.owner] || 'o1');
+    owner.textContent = t.owner;
+    bot.appendChild(owner);
+
+    card.appendChild(top);
+    card.appendChild(title);
+    card.appendChild(bot);
+
+    card.addEventListener('dragstart', function (e) {
+      dragId = t.id;
+      card.classList.add('dragging');
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('text/plain', t.id);
+    });
+    card.addEventListener('dragend', function () {
+      dragId = null;
+      card.classList.remove('dragging');
+      document.querySelectorAll('.col.dragover').forEach(function (el) {
+        el.classList.remove('dragover');
+      });
+    });
+
+    return card;
+  }
+
+  function render() {
+    COLUMNS.forEach(function (c) { colBodies[c.key].innerHTML = ''; });
+    var counts = {};
+    var pts = {};
+    COLUMNS.forEach(function (c) { counts[c.key] = 0; pts[c.key] = 0; });
+
+    tickets.forEach(function (t) {
+      colBodies[t.col].appendChild(makeCard(t));
+      counts[t.col] += 1;
+      pts[t.col] += EST_PTS[t.est] || 0;
+    });
+
+    COLUMNS.forEach(function (c) {
+      colCounts[c.key].textContent = counts[c.key];
+      colFoots[c.key].innerHTML = 'estimate <b>' + pts[c.key] + ' pt' + (pts[c.key] === 1 ? '' : 's') + '</b>';
+    });
+
+    var summary = document.getElementById('summary');
+    summary.innerHTML = COLUMNS.map(function (c) {
+      return '<b>' + counts[c.key] + '</b>&nbsp;' + c.key;
+    }).join('<span class="dot">·</span>');
+
+    var badge = document.getElementById('filterBadge');
+    if (activeFilter) {
+      badge.textContent = 'filter: ' + activeFilter + ' ×';
+      badge.classList.add('on');
+    } else {
+      badge.classList.remove('on');
+    }
+  }
+
+  document.getElementById('filterBadge').addEventListener('click', function () {
+    activeFilter = null;
+    render();
+  });
+
+  // ---------- export ----------
+  function buildMarkdown() {
+    var lines = [];
+    lines.push('# Acme — Cycle 14 triage');
+    lines.push('');
+    COLUMNS.forEach(function (c) {
+      var rows = tickets.filter(function (t) { return t.col === c.key; });
+      var pts = rows.reduce(function (s, t) { return s + (EST_PTS[t.est] || 0); }, 0);
+      lines.push('## ' + c.label + ' (' + rows.length + ' · ' + pts + ' pts)');
+      lines.push('');
+      lines.push('_' + c.rationale + '_');
+      lines.push('');
+      rows.forEach(function (t) {
+        lines.push('- **' + t.id + '** ' + t.title + ' — ' + t.tag + ', ' + t.est + ', ' + t.owner);
+      });
+      lines.push('');
+    });
+    return lines.join('\n');
+  }
+
+  var copyBtn = document.getElementById('copyBtn');
+  var copyTimer = null;
+  copyBtn.addEventListener('click', function () {
+    var md = buildMarkdown();
+    function flash() {
+      copyBtn.textContent = 'Copied ✓';
+      copyBtn.classList.add('copied');
+      clearTimeout(copyTimer);
+      copyTimer = setTimeout(function () {
+        copyBtn.textContent = 'Copy as markdown';
+        copyBtn.classList.remove('copied');
+      }, 1200);
+    }
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(md).then(flash, flash);
+    } else {
+      var ta = document.createElement('textarea');
+      ta.value = md;
+      document.body.appendChild(ta);
+      ta.select();
+      try { document.execCommand('copy'); } catch (e) {}
+      document.body.removeChild(ta);
+      flash();
+    }
+  });
+
+  document.getElementById('resetBtn').addEventListener('click', function () {
+    tickets = INITIAL.map(function (t) { return Object.assign({}, t); });
+    activeFilter = null;
+    render();
+  });
+
+  // ---------- init ----------
+  tickets = INITIAL.map(function (t) { return Object.assign({}, t); });
+  render();
+</script>