@drunkcoding/agents-and-skills 0.0.44 → 0.0.46

package/plugins/html-effectiveness/templates/20-editor-prompt-tuner.html.tmpl

@@ -1,687 +0,0 @@
-<!--
-template: 20-editor-prompt-tuner
-upstream: 20-editor-prompt-tuner.html
-slots:
-  title: string  # replaces first <h1> innerHTML
--->
-<div class="wrap">
-
-  <header>
-    <div class="eyebrow">Acme / editor / prompt-tuner</div>
-    <h1>{{title}}</h1>
-    <p class="sub">Edit the system prompt on the left and watch three sample tickets re-render the filled template on the right, live as you type. When it reads well across all three moods, copy the template out.</p>
-  </header>
-
-  <div class="toolbar">
-    <button id="copyBtn" class="btn-primary">Copy prompt</button>
-    <button id="resetBtn" class="btn-ghost">Reset</button>
-    <div class="spacer"></div>
-    <div class="hint">slots use <strong>{{double_brace}}</strong> syntax</div>
-  </div>
-
-  <div class="cols">
-
-    <!-- left -->
-    <section class="panel">
-      <div class="ed-toolbar">
-        <span class="ed-label">Template</span>
-        <div class="spacer"></div>
-        <span id="counter" class="counter">0 chars · ~0 tokens</span>
-      </div>
-      <div id="editor" class="editor" contenteditable="true" spellcheck="false" autocapitalize="off" autocorrect="off"></div>
-      <div class="legend">
-        <div class="legend-label">Available slots</div>
-        <div id="legendChips" class="legend-chips"></div>
-      </div>
-    </section>
-
-    <!-- right -->
-    <section class="panel preview-panel">
-      <div class="preview-head">Live preview · 3 sample tickets</div>
-      <div id="samples"></div>
-    </section>
-
-  </div>
-
-  <footer>Highlighted slots fill from each sample's ticket fields. Anything underlined in dashed clay isn't a known field and will pass through unfilled.</footer>
-
-</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: 640px;
-  }
-/* ---------- toolbar ---------- */
-  .toolbar {
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    background: var(--ivory);
-    padding: 10px 0 14px;
-    margin-bottom: 6px;
-    border-bottom: 1px solid var(--gray-200);
-  }
-.toolbar .spacer { flex: 1; }
-.toolbar .hint {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--gray-500);
-    letter-spacing: 0.02em;
-  }
-button {
-    font-family: var(--mono);
-    font-size: 12px;
-    cursor: pointer;
-    -webkit-appearance: none;
-    appearance: none;
-  }
-.btn-primary {
-    background: var(--slate);
-    color: var(--ivory);
-    border: 1.5px solid var(--slate);
-    border-radius: 999px;
-    padding: 9px 16px;
-    transition: background 140ms ease, transform 80ms ease;
-  }
-.btn-primary:hover { background: var(--gray-800); }
-.btn-primary:active { transform: translateY(1px); }
-.btn-primary.copied { background: var(--olive); border-color: var(--olive); }
-.btn-ghost {
-    background: transparent;
-    color: var(--gray-800);
-    border: 1.5px solid var(--gray-200);
-    border-radius: 999px;
-    padding: 8px 15px;
-    transition: border-color 140ms ease, color 140ms ease;
-  }
-.btn-ghost:hover { border-color: var(--gray-500); color: var(--slate); }
-/* ---------- two-column layout ---------- */
-  .cols {
-    display: grid;
-    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
-    gap: 24px;
-    align-items: start;
-    margin-top: 18px;
-  }
-@media (max-width: 880px) {
-    .cols { grid-template-columns: 1fr; }
-  }
-.panel {
-    background: var(--white);
-    border: 1.5px solid var(--gray-200);
-    border-radius: 12px;
-    overflow: hidden;
-  }
-/* ---------- left: editor ---------- */
-  .ed-toolbar {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 11px 16px;
-    border-bottom: 1.5px solid var(--gray-200);
-    background: var(--gray-50);
-  }
-.ed-label {
-    font-family: var(--mono);
-    font-size: 11px;
-    letter-spacing: 0.1em;
-    color: var(--gray-500);
-    text-transform: uppercase;
-  }
-.ed-toolbar .spacer { flex: 1; }
-.counter {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--gray-800);
-    background: var(--white);
-    border: 1.5px solid var(--gray-200);
-    border-radius: 999px;
-    padding: 3px 10px;
-    white-space: nowrap;
-    font-variant-numeric: tabular-nums;
-  }
-.editor {
-    font-family: var(--mono);
-    font-size: 13px;
-    line-height: 1.7;
-    padding: 18px;
-    min-height: 360px;
-    white-space: pre-wrap;
-    word-break: break-word;
-    background: var(--white);
-    color: var(--slate);
-    outline: none;
-    caret-color: var(--clay);
-    tab-size: 2;
-  }
-.editor:focus-visible { outline: none; }
-.slot {
-    background: var(--oat);
-    color: var(--clay-d);
-    border-radius: 4px;
-    padding: 0 3px;
-    font-weight: 600;
-  }
-.slot.warn {
-    background: rgba(217, 119, 87, 0.14);
-    color: var(--clay-d);
-    text-decoration: underline dashed var(--clay) 1.5px;
-    text-underline-offset: 3px;
-  }
-.legend {
-    border-top: 1.5px solid var(--gray-200);
-    padding: 12px 16px 14px;
-    background: var(--gray-50);
-  }
-.legend-label {
-    font-family: var(--mono);
-    font-size: 10px;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: var(--gray-500);
-    margin-bottom: 8px;
-  }
-.legend-chips { display: flex; flex-wrap: wrap; gap: 6px; }
-.chip {
-    font-family: var(--mono);
-    font-size: 11px;
-    background: var(--oat);
-    color: var(--clay-d);
-    border-radius: 4px;
-    padding: 2px 7px;
-    font-weight: 600;
-  }
-/* ---------- right: preview ---------- */
-  .preview-panel { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
-.preview-head {
-    font-family: var(--mono);
-    font-size: 11px;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: var(--gray-500);
-    padding: 0 2px 2px;
-  }
-.sample {
-    border: 1.5px solid var(--gray-200);
-    border-radius: 10px;
-    overflow: hidden;
-  }
-.sample-head {
-    display: flex;
-    align-items: center;
-    gap: 9px;
-    padding: 9px 13px;
-    border-bottom: 1.5px solid var(--gray-200);
-    background: var(--gray-50);
-  }
-.badge {
-    font-family: var(--mono);
-    font-size: 10px;
-    letter-spacing: 0.08em;
-    color: var(--gray-500);
-  }
-.cust {
-    font-family: var(--serif);
-    font-size: 14px;
-    font-weight: 500;
-    letter-spacing: -0.005em;
-  }
-.sample-head .spacer { flex: 1; }
-.plan {
-    font-family: var(--mono);
-    font-size: 10px;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    border-radius: 999px;
-    padding: 2px 8px;
-    border: 1.5px solid var(--gray-200);
-    color: var(--gray-800);
-    background: var(--white);
-  }
-.plan.team { background: var(--oat);   border-color: var(--oat);   color: var(--clay-d); }
-.plan.studio { background: var(--olive); border-color: var(--olive); color: var(--ivory); }
-.rendered {
-    font-family: var(--mono);
-    font-size: 12.5px;
-    line-height: 1.6;
-    color: var(--gray-800);
-    white-space: pre-wrap;
-    word-break: break-word;
-    padding: 12px 13px 14px;
-  }
-.filled {
-    background: var(--gray-50);
-    border-radius: 3px;
-    padding: 0 2px;
-    box-shadow: inset 0 0 0 1px var(--gray-200);
-  }
-.missing {
-    background: rgba(217, 119, 87, 0.12);
-    color: var(--clay-d);
-    border-radius: 3px;
-    padding: 0 2px;
-    font-weight: 600;
-  }
-footer {
-    margin-top: 36px;
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--gray-500);
-    letter-spacing: 0.02em;
-  }
-</style>
-
-<script>
-(function () {
-  "use strict";
-
-  // ---------------------------------------------------------------------------
-  // Data
-  // ---------------------------------------------------------------------------
-
-  var DEFAULT_TEMPLATE =
-'You are a support agent for Acme, a project workspace for small teams.\n' +
-'\n' +
-'A customer named {{customer_name}} on the {{plan_tier}} plan wrote in about:\n' +
-'"{{ticket_subject}}"\n' +
-'\n' +
-'Their message:\n' +
-'{{ticket_body}}\n' +
-'\n' +
-'Write a reply that is {{tone}}, no more than 120 words, and ends with a single concrete next step.\n' +
-'Never promise a refund without escalating. Sign off as "The Acme team."';
-
-  var SAMPLES = [
-    {
-      label: 'SAMPLE 1',
-      planClass: 'free',
-      data: {
-        customer_name: 'Priya N.',
-        plan_tier: 'Free',
-        ticket_subject: 'Where did my board go?',
-        ticket_body: 'Hi — I made a board yesterday called "Spring launch" with my coworker and today I can’t find it anywhere. I’m new to Acme and I’m not sure if I deleted it by accident or if I’m just looking in the wrong place. Can you help?',
-        tone: 'warm and patient'
-      }
-    },
-    {
-      label: 'SAMPLE 2',
-      planClass: 'team',
-      data: {
-        customer_name: 'Marcus D.',
-        plan_tier: 'Team',
-        ticket_subject: 'Sync keeps dropping comments',
-        ticket_body: 'This is the third time this week. I leave comments on cards from my laptop, switch to my phone on the train, and they’re gone. My team thinks I’m ignoring them. We pay for 14 seats and this is genuinely making us look bad to a client.',
-        tone: 'direct and apologetic'
-      }
-    },
-    {
-      label: 'SAMPLE 3',
-      planClass: 'studio',
-      data: {
-        customer_name: 'Lena K.',
-        plan_tier: 'Studio',
-        ticket_subject: 'Update billing entity on next invoice',
-        ticket_body: 'Hey folks! We just spun up a new holding company (ACME Corp Oy) and finance would love the May invoice to use that name + our new VAT ID, FI00000000. No rush at all, just want it sorted before the cycle runs. Thanks a million.',
-        tone: 'brisk and friendly'
-      }
-    }
-  ];
-
-  var KNOWN_SLOTS = ['customer_name', 'plan_tier', 'ticket_subject', 'ticket_body', 'tone'];
-  var SLOT_RE = /\{\{\s*([a-zA-Z0-9_]+)\s*\}\}/g;
-
-  // ---------------------------------------------------------------------------
-  // DOM refs
-  // ---------------------------------------------------------------------------
-
-  var editor      = document.getElementById('editor');
-  var counterEl   = document.getElementById('counter');
-  var samplesEl   = document.getElementById('samples');
-  var legendEl    = document.getElementById('legendChips');
-  var copyBtn     = document.getElementById('copyBtn');
-  var resetBtn    = document.getElementById('resetBtn');
-
-  // ---------------------------------------------------------------------------
-  // Helpers
-  // ---------------------------------------------------------------------------
-
-  function escapeHtml(s) {
-    return s
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;');
-  }
-
-  // Read plain text out of the contenteditable. We rely on white-space:pre-wrap
-  // and only ever insert text + inline <span>s, so textContent is faithful as
-  // long as the browser hasn't injected block elements or <br>s. Normalize both.
-  function getPlainText() {
-    var out = '';
-    var walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, null);
-    var node;
-    while ((node = walker.nextNode())) {
-      if (node.nodeType === Node.TEXT_NODE) {
-        out += node.nodeValue;
-      } else if (node.nodeType === Node.ELEMENT_NODE) {
-        var tag = node.tagName;
-        if (tag === 'BR') out += '\n';
-        // Some browsers wrap new lines in <div>; emit a newline before a div
-        // that isn't the first child and doesn't already start after one.
-        if (tag === 'DIV' && node !== editor.firstChild && out.length && out[out.length - 1] !== '\n') {
-          out += '\n';
-        }
-      }
-    }
-    return out;
-  }
-
-  // ---- Caret save/restore by character offset ----
-
-  function getCaretOffset() {
-    var sel = window.getSelection();
-    if (!sel || sel.rangeCount === 0) return null;
-    var range = sel.getRangeAt(0);
-    if (!editor.contains(range.startContainer)) return null;
-
-    var pre = range.cloneRange();
-    pre.selectNodeContents(editor);
-    pre.setEnd(range.startContainer, range.startOffset);
-
-    // Count characters by walking text nodes within the pre-range. We mirror
-    // getPlainText's newline handling so offsets line up.
-    var frag = pre.cloneContents();
-    var off = 0;
-    var walker = document.createTreeWalker(frag, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, null);
-    var node, lastChar = '';
-    var first = true;
-    while ((node = walker.nextNode())) {
-      if (node.nodeType === Node.TEXT_NODE) {
-        off += node.nodeValue.length;
-        if (node.nodeValue.length) lastChar = node.nodeValue[node.nodeValue.length - 1];
-      } else {
-        if (node.tagName === 'BR') { off += 1; lastChar = '\n'; }
-        if (node.tagName === 'DIV' && !first && lastChar !== '\n') { off += 1; lastChar = '\n'; }
-      }
-      first = false;
-    }
-    return off;
-  }
-
-  function setCaretOffset(offset) {
-    if (offset == null) return;
-    var sel = window.getSelection();
-    if (!sel) return;
-
-    var walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT, null);
-    var node;
-    var remaining = offset;
-    var lastNode = null;
-
-    while ((node = walker.nextNode())) {
-      lastNode = node;
-      var len = node.nodeValue.length;
-      if (remaining <= len) {
-        var range = document.createRange();
-        range.setStart(node, remaining);
-        range.collapse(true);
-        sel.removeAllRanges();
-        sel.addRange(range);
-        return;
-      }
-      remaining -= len;
-    }
-
-    // Past the end — place at end of last text node, or at end of editor.
-    var range2 = document.createRange();
-    if (lastNode) {
-      range2.setStart(lastNode, lastNode.nodeValue.length);
-    } else {
-      range2.selectNodeContents(editor);
-      range2.collapse(false);
-    }
-    range2.collapse(true);
-    sel.removeAllRanges();
-    sel.addRange(range2);
-  }
-
-  // ---- Highlighting ----
-
-  function highlightHtml(text) {
-    var html = '';
-    var last = 0;
-    SLOT_RE.lastIndex = 0;
-    var m;
-    while ((m = SLOT_RE.exec(text)) !== null) {
-      html += escapeHtml(text.slice(last, m.index));
-      var name = m[1];
-      var cls = KNOWN_SLOTS.indexOf(name) !== -1 ? 'slot' : 'slot warn';
-      html += '<span class="' + cls + '">' + escapeHtml(m[0]) + '</span>';
-      last = m.index + m[0].length;
-    }
-    html += escapeHtml(text.slice(last));
-    return html;
-  }
-
-  function renderEditor(text, caret) {
-    editor.innerHTML = highlightHtml(text);
-    if (caret != null && document.activeElement === editor) {
-      setCaretOffset(caret);
-    }
-  }
-
-  // ---- Preview ----
-
-  function fillHtml(text, data) {
-    var html = '';
-    var last = 0;
-    SLOT_RE.lastIndex = 0;
-    var m;
-    while ((m = SLOT_RE.exec(text)) !== null) {
-      html += escapeHtml(text.slice(last, m.index));
-      var name = m[1];
-      if (Object.prototype.hasOwnProperty.call(data, name)) {
-        html += '<span class="filled">' + escapeHtml(String(data[name])) + '</span>';
-      } else {
-        html += '<span class="missing">' + escapeHtml(m[0]) + '</span>';
-      }
-      last = m.index + m[0].length;
-    }
-    html += escapeHtml(text.slice(last));
-    return html;
-  }
-
-  var sampleNodes = [];
-
-  function buildSamples() {
-    samplesEl.innerHTML = '';
-    sampleNodes = [];
-    SAMPLES.forEach(function (s) {
-      var card = document.createElement('div');
-      card.className = 'sample';
-
-      var head = document.createElement('div');
-      head.className = 'sample-head';
-
-      var badge = document.createElement('span');
-      badge.className = 'badge';
-      badge.textContent = s.label;
-
-      var cust = document.createElement('span');
-      cust.className = 'cust';
-      cust.textContent = s.data.customer_name;
-
-      var spacer = document.createElement('span');
-      spacer.className = 'spacer';
-
-      var plan = document.createElement('span');
-      plan.className = 'plan ' + s.planClass;
-      plan.textContent = s.data.plan_tier;
-
-      head.appendChild(badge);
-      head.appendChild(cust);
-      head.appendChild(spacer);
-      head.appendChild(plan);
-
-      var body = document.createElement('div');
-      body.className = 'rendered';
-
-      card.appendChild(head);
-      card.appendChild(body);
-      samplesEl.appendChild(card);
-      sampleNodes.push({ body: body, data: s.data });
-    });
-    samplesEl.style.display = 'flex';
-    samplesEl.style.flexDirection = 'column';
-    samplesEl.style.gap = '14px';
-  }
-
-  function buildLegend() {
-    legendEl.innerHTML = '';
-    KNOWN_SLOTS.forEach(function (name) {
-      var c = document.createElement('span');
-      c.className = 'chip';
-      c.textContent = '{{' + name + '}}';
-      legendEl.appendChild(c);
-    });
-  }
-
-  // ---- Counter ----
-
-  function updateCounter(text) {
-    var chars = text.length;
-    var tokens = Math.round(chars / 4.2);
-    counterEl.textContent = chars + ' chars · ~' + tokens + ' tokens';
-  }
-
-  // ---- Master refresh ----
-
-  function refresh(opts) {
-    opts = opts || {};
-    var text = opts.text != null ? opts.text : getPlainText();
-    var caret = opts.preserveCaret ? getCaretOffset() : null;
-
-    renderEditor(text, caret);
-    updateCounter(text);
-    sampleNodes.forEach(function (sn) {
-      sn.body.innerHTML = fillHtml(text, sn.data);
-    });
-  }
-
-  // ---------------------------------------------------------------------------
-  // Events
-  // ---------------------------------------------------------------------------
-
-  var raf = null;
-  editor.addEventListener('input', function () {
-    if (raf) cancelAnimationFrame(raf);
-    raf = requestAnimationFrame(function () {
-      raf = null;
-      refresh({ preserveCaret: true });
-    });
-  });
-
-  // Force plain-text paste so we never inherit foreign HTML.
-  editor.addEventListener('paste', function (e) {
-    e.preventDefault();
-    var txt = (e.clipboardData || window.clipboardData).getData('text/plain');
-    var sel = window.getSelection();
-    if (!sel || !sel.rangeCount) return;
-    var range = sel.getRangeAt(0);
-    range.deleteContents();
-    range.insertNode(document.createTextNode(txt));
-    range.collapse(false);
-    sel.removeAllRanges();
-    sel.addRange(range);
-    refresh({ preserveCaret: true });
-  });
-
-  // Insert literal newline on Enter so we don't get nested <div>s.
-  editor.addEventListener('keydown', function (e) {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      var sel = window.getSelection();
-      if (!sel || !sel.rangeCount) return;
-      var range = sel.getRangeAt(0);
-      range.deleteContents();
-      var nl = document.createTextNode('\n');
-      range.insertNode(nl);
-      range.setStartAfter(nl);
-      range.collapse(true);
-      sel.removeAllRanges();
-      sel.addRange(range);
-      refresh({ preserveCaret: true });
-    }
-  });
-
-  var copyTimer = null;
-  copyBtn.addEventListener('click', function () {
-    var text = getPlainText();
-    var done = function () {
-      copyBtn.textContent = 'Copied ✓';
-      copyBtn.classList.add('copied');
-      if (copyTimer) clearTimeout(copyTimer);
-      copyTimer = setTimeout(function () {
-        copyBtn.textContent = 'Copy prompt';
-        copyBtn.classList.remove('copied');
-      }, 1200);
-    };
-    if (navigator.clipboard && navigator.clipboard.writeText) {
-      navigator.clipboard.writeText(text).then(done, function () {
-        fallbackCopy(text); done();
-      });
-    } else {
-      fallbackCopy(text); done();
-    }
-  });
-
-  function fallbackCopy(text) {
-    var 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);
-  }
-
-  resetBtn.addEventListener('click', function () {
-    refresh({ text: DEFAULT_TEMPLATE });
-  });
-
-  // ---------------------------------------------------------------------------
-  // Boot
-  // ---------------------------------------------------------------------------
-
-  buildLegend();
-  buildSamples();
-  refresh({ text: DEFAULT_TEMPLATE });
-})();
-</script>