@fraziym/axoniz 0.1.0

package/dist/web/static/js/colorPicker.js

@@ -0,0 +1,453 @@
+// In-house color picker with live-feedback HSV square, hue bar,
+// eyedropper, recent colors, and harmony suggestions.
+// Non-invasive: wraps existing <input type="color"> elements —
+// their .value stays the source of truth, and we dispatch 'input'
+// events so existing listeners keep working.
+
+const LS_RECENT = 'zero-recent-colors';
+const MAX_RECENT = 12;
+
+let _popover = null;
+let _input = null;
+let _h = 0, _s = 100, _v = 100;   // HSV
+let _drag = null;                  // 'sl' | 'hue' | null
+let _onOutside = null;
+
+// ── Color math ────────────────────────────────────────────────────────
+function clamp(v, min, max) { return Math.max(min, Math.min(max, v)); }
+
+function hexToRgb(hex) {
+  hex = String(hex || '').replace('#', '');
+  if (hex.length === 3) hex = hex.split('').map(c => c + c).join('');
+  if (!/^[0-9a-f]{6}$/i.test(hex)) return { r: 0, g: 0, b: 0 };
+  const n = parseInt(hex, 16);
+  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
+}
+
+function rgbToHex(r, g, b) {
+  return '#' + [r, g, b].map(v =>
+    Math.round(clamp(v, 0, 255)).toString(16).padStart(2, '0')
+  ).join('');
+}
+
+function rgbToHsv(r, g, b) {
+  r /= 255; g /= 255; b /= 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  const d = max - min;
+  let h;
+  const s = max === 0 ? 0 : d / max;
+  const v = max;
+  if (d === 0) h = 0;
+  else if (max === r) h = ((g - b) / d + (g < b ? 6 : 0));
+  else if (max === g) h = (b - r) / d + 2;
+  else h = (r - g) / d + 4;
+  return { h: h * 60, s: s * 100, v: v * 100 };
+}
+
+function hsvToRgb(h, s, v) {
+  h = ((h % 360) + 360) % 360;
+  h /= 60; s /= 100; v /= 100;
+  const i = Math.floor(h);
+  const f = h - i;
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+  let r, g, b;
+  switch (i % 6) {
+    case 0: r = v; g = t; b = p; break;
+    case 1: r = q; g = v; b = p; break;
+    case 2: r = p; g = v; b = t; break;
+    case 3: r = p; g = q; b = v; break;
+    case 4: r = t; g = p; b = v; break;
+    case 5: r = v; g = p; b = q; break;
+  }
+  return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
+}
+
+function hsvToHex(h, s, v) { const { r, g, b } = hsvToRgb(h, s, v); return rgbToHex(r, g, b); }
+
+function hexToHsv(hex) { const { r, g, b } = hexToRgb(hex); return rgbToHsv(r, g, b); }
+
+// ── Storage ───────────────────────────────────────────────────────────
+function getRecents() {
+  try { return JSON.parse(localStorage.getItem(LS_RECENT) || '[]'); }
+  catch { return []; }
+}
+
+function addRecent(hex) {
+  if (!/^#[0-9a-f]{6}$/i.test(hex)) return;
+  let recents = getRecents().filter(c => c.toLowerCase() !== hex.toLowerCase());
+  recents.unshift(hex.toLowerCase());
+  recents = recents.slice(0, MAX_RECENT);
+  try { localStorage.setItem(LS_RECENT, JSON.stringify(recents)); } catch {}
+}
+
+// ── Suggestions based on current color (5 harmony swatches) ──────────
+function computeSuggestions() {
+  // Complement, analogous ±30°, split-complement (+150), tone shift
+  return [
+    { hex: hsvToHex(_h + 180, _s, _v),                                   label: 'Complement' },
+    { hex: hsvToHex(_h + 30, _s, _v),                                    label: 'Analogous +30°' },
+    { hex: hsvToHex(_h - 30, _s, _v),                                    label: 'Analogous -30°' },
+    { hex: hsvToHex(_h + 150, _s, _v),                                   label: 'Split-complement' },
+    { hex: hsvToHex(_h, _s, clamp(_v > 50 ? _v - 30 : _v + 30, 10, 95)), label: 'Tone shift' },
+  ];
+}
+
+// ── Popover build ─────────────────────────────────────────────────────
+function buildPopover() {
+  const p = document.createElement('div');
+  p.className = 'cp-popover';
+  p.innerHTML = `
+    <div class="cp-sl" data-drag="sl">
+      <div class="cp-sl-white"></div>
+      <div class="cp-sl-black"></div>
+      <div class="cp-sl-handle"></div>
+    </div>
+    <div class="cp-hue" data-drag="hue">
+      <div class="cp-hue-handle"></div>
+    </div>
+    <div class="cp-row">
+      <div class="cp-preview"></div>
+      <input type="text" class="cp-hex" maxlength="7" spellcheck="false" autocomplete="off">
+      <button class="cp-eyedropper" title="Eyedropper" type="button">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M2 22l4-4m0 0l3-3 5 5-3 3a2 2 0 01-2.8 0l-2.2-2.2a2 2 0 010-2.8z"/>
+          <path d="M14 8l3-3a3 3 0 014.2 4.2l-3 3-4.2-4.2z"/>
+        </svg>
+      </button>
+    </div>
+    <div class="cp-section-label">Suggestions</div>
+    <div class="cp-swatches cp-suggestions"></div>
+    <div class="cp-section-label">Recent</div>
+    <div class="cp-swatches cp-recent"></div>
+  `;
+  document.body.appendChild(p);
+  wireHandlers(p);
+  return p;
+}
+
+// ── UI sync ───────────────────────────────────────────────────────────
+function syncUI() {
+  if (!_popover) return;
+  const sl = _popover.querySelector('.cp-sl');
+  const slH = _popover.querySelector('.cp-sl-handle');
+  const hue = _popover.querySelector('.cp-hue');
+  const hueH = _popover.querySelector('.cp-hue-handle');
+  const hex = _popover.querySelector('.cp-hex');
+  const preview = _popover.querySelector('.cp-preview');
+
+  const pureHue = hsvToHex(_h, 100, 100);
+  sl.style.background = pureHue;   // base hue — white/black layers stacked on top via CSS
+
+  slH.style.left = (_s) + '%';
+  slH.style.top = (100 - _v) + '%';
+
+  hueH.style.left = (_h / 360 * 100) + '%';
+
+  const current = hsvToHex(_h, _s, _v);
+  preview.style.background = current;
+  if (document.activeElement !== hex) hex.value = current;
+
+  // Suggestions
+  const sContainer = _popover.querySelector('.cp-suggestions');
+  const sugs = computeSuggestions();
+  sContainer.innerHTML = sugs.map(s =>
+    `<button class="cp-swatch" title="${s.label}: ${s.hex}" data-hex="${s.hex}" style="background:${s.hex}"></button>`
+  ).join('');
+
+  // Recents
+  const rContainer = _popover.querySelector('.cp-recent');
+  const recs = getRecents();
+  rContainer.innerHTML = recs.length
+    ? recs.map(h => `<button class="cp-swatch" title="${h}" data-hex="${h}" style="background:${h}"></button>`).join('')
+    : '<div class="cp-recent-empty">(none yet)</div>';
+}
+
+function applyToInput(pushChange) {
+  if (!_input) return;
+  const hex = hsvToHex(_h, _s, _v);
+  _input.value = hex;  // setter also updates style.background
+  if (pushChange) _input.dispatchEvent(new Event('input', { bubbles: true }));
+  syncUI();
+}
+
+function setFromHex(hex) {
+  const v = hexToHsv(hex);
+  _h = v.h; _s = v.s; _v = v.v;
+}
+
+// ── Handlers ──────────────────────────────────────────────────────────
+// Window-level pointer listeners — installed ONCE, not per-popover, so they
+// don't leak when the popover is rebuilt on every open.
+let _windowPointerInstalled = false;
+function _installWindowPointer() {
+  if (_windowPointerInstalled) return;
+  _windowPointerInstalled = true;
+  window.addEventListener('pointermove', (e) => { if (_drag) handleDrag(e); });
+  window.addEventListener('pointerup', () => {
+    if (_drag) {
+      _drag = null;
+      commitCurrent();
+    }
+  });
+}
+
+function wireHandlers(p) {
+  const sl = p.querySelector('.cp-sl');
+  const hue = p.querySelector('.cp-hue');
+  const hex = p.querySelector('.cp-hex');
+  const eye = p.querySelector('.cp-eyedropper');
+
+  const onDown = (type) => (e) => {
+    _drag = type;
+    handleDrag(e);
+    e.preventDefault();
+  };
+  sl.addEventListener('pointerdown', onDown('sl'));
+  hue.addEventListener('pointerdown', onDown('hue'));
+  _installWindowPointer();
+
+  hex.addEventListener('input', () => {
+    let v = hex.value.trim();
+    if (!v.startsWith('#')) v = '#' + v;
+    if (/^#[0-9a-f]{6}$/i.test(v)) {
+      setFromHex(v);
+      applyToInput(true);
+    }
+  });
+  hex.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') { commitCurrent(); close(); }
+    if (e.key === 'Escape') { close(); }
+  });
+
+  p.addEventListener('click', (e) => {
+    const sw = e.target.closest('.cp-swatch');
+    if (sw && sw.dataset.hex) {
+      setFromHex(sw.dataset.hex);
+      applyToInput(true);
+      commitCurrent();
+    }
+  });
+
+  if (window.EyeDropper) {
+    eye.addEventListener('click', async (ev) => {
+      ev.stopPropagation();
+      // Suppress the outside-click close while the OS eyedropper is open.
+      // Without this, the user's pixel-pick fires a window click that
+      // hits our document-capture listener and closes the popover.
+      const wasOnOutside = _onOutside;
+      _detachOutsideHandlers();
+      try {
+        const r = await new window.EyeDropper().open();
+        if (r && r.sRGBHex) {
+          setFromHex(r.sRGBHex);
+          applyToInput(true);
+          commitCurrent();
+        }
+      } catch (_) { /* user cancelled */ }
+      // Re-arm outside-click handler after a frame so the eyedropper's
+      // own pick-click doesn't immediately re-close us.
+      if (wasOnOutside && _popover) {
+        requestAnimationFrame(() => {
+          if (!_popover) return;
+          _onOutside = wasOnOutside;
+          _onEsc = (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); } };
+          document.addEventListener('click', _onOutside, true);
+          document.addEventListener('keydown', _onEsc, true);
+        });
+      }
+    });
+  } else {
+    eye.disabled = true;
+    eye.style.opacity = '0.3';
+    eye.title = 'Eyedropper not supported in this browser';
+  }
+}
+
+function handleDrag(e) {
+  if (_drag === 'sl') {
+    const sl = _popover.querySelector('.cp-sl');
+    const r = sl.getBoundingClientRect();
+    const x = clamp((e.clientX - r.left) / r.width, 0, 1);
+    const y = clamp((e.clientY - r.top) / r.height, 0, 1);
+    _s = x * 100;
+    _v = (1 - y) * 100;
+    applyToInput(true);
+  } else if (_drag === 'hue') {
+    const hue = _popover.querySelector('.cp-hue');
+    const r = hue.getBoundingClientRect();
+    const x = clamp((e.clientX - r.left) / r.width, 0, 1);
+    _h = x * 360;
+    applyToInput(true);
+  }
+}
+
+function commitCurrent() {
+  if (!_input) return;
+  addRecent(_input.value);
+  syncUI();
+}
+
+// ── Open / close ──────────────────────────────────────────────────────
+function position(p, anchor) {
+  const rect = anchor.getBoundingClientRect();
+  const pRect = p.getBoundingClientRect();
+  let left = rect.left;
+  let top = rect.bottom + 6;
+  if (left + pRect.width > window.innerWidth - 8) left = window.innerWidth - pRect.width - 8;
+  if (top + pRect.height > window.innerHeight - 8) top = rect.top - pRect.height - 6;
+  if (left < 8) left = 8;
+  if (top < 8) top = 8;
+  p.style.left = left + 'px';
+  p.style.top = top + 'px';
+}
+
+let _onEsc = null;
+
+function _detachOutsideHandlers() {
+  if (_onOutside) {
+    document.removeEventListener('click', _onOutside, true);
+    document.removeEventListener('mousedown', _onOutside, true);
+    document.removeEventListener('pointerdown', _onOutside, true);
+    _onOutside = null;
+  }
+  if (_onEsc) {
+    document.removeEventListener('keydown', _onEsc, true);
+    _onEsc = null;
+  }
+}
+
+function _destroyPopover() {
+  _detachOutsideHandlers();
+  if (_popover && _popover.parentNode) {
+    _popover.parentNode.removeChild(_popover);
+  }
+  _popover = null;
+  _input = null;
+  _drag = null;
+}
+
+function open(inputEl) {
+  // Always tear down any previous popover so we never inherit stale state
+  // (orphaned listeners, hidden-but-mispositioned div, etc.).
+  _destroyPopover();
+  _popover = buildPopover();
+  _input = inputEl;
+  setFromHex(inputEl.value || '#000000');
+  _popover.style.display = 'block';
+  _popover.style.visibility = 'visible';
+  _popover.style.opacity = '1';
+  _popover.style.pointerEvents = 'auto';
+  // Let it render with its natural size, then position
+  requestAnimationFrame(() => {
+    if (_popover && _input) position(_popover, _input);
+  });
+  syncUI();
+
+  _onOutside = (e) => {
+    if (_drag) return;                        // ignore during drag
+    if (!_popover) return;
+    if (_popover.contains(e.target)) return;
+    if (e.target === _input) return;
+    // If the click landed on a modal close button (X), swallow it so the
+    // popover-close doesn't also dismiss the enclosing modal. The user
+    // wants their first click to just close the color picker.
+    const closeBtn = e.target.closest && e.target.closest('.close-btn, [aria-label*="lose" i]');
+    if (closeBtn) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (typeof e.stopImmediatePropagation === 'function') e.stopImmediatePropagation();
+    }
+    close();
+  };
+  _onEsc = (e) => {
+    if (e.key === 'Escape') {
+      // Same idea for the keyboard: Escape closes the picker first; the
+      // modal's own Esc handler only fires on the next press.
+      e.preventDefault();
+      e.stopPropagation();
+      if (typeof e.stopImmediatePropagation === 'function') e.stopImmediatePropagation();
+      close();
+    }
+  };
+  // Defer install so the click that opened us doesn't immediately close us.
+  // Use requestAnimationFrame instead of setTimeout(0) to be sure the current
+  // click event has fully bubbled before we register the listener.
+  requestAnimationFrame(() => {
+    document.addEventListener('click', _onOutside, true);
+    // pointerdown fires before click on touch devices, and reliably even
+    // when the tap target swallows the click. Catching it ensures
+    // outside-touches close the picker on mobile.
+    document.addEventListener('pointerdown', _onOutside, true);
+    document.addEventListener('keydown', _onEsc, true);
+  });
+}
+
+function close() {
+  _destroyPopover();
+}
+
+// ── Attach to inputs ──────────────────────────────────────────────────
+// Standard setter we need to call after wrapping .value with a custom setter.
+const _NATIVE_VALUE_DESC = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+
+function _syncSwatch(el) {
+  const v = _NATIVE_VALUE_DESC.get.call(el);
+  if (/^#[0-9a-f]{6}$/i.test(v || '')) el.style.background = v;
+}
+
+export function attachColorPicker(inputEl) {
+  if (!inputEl || inputEl.dataset.cpAttached === '1') return;
+  inputEl.dataset.cpAttached = '1';
+
+  // Neutralize the native color dialog by changing the element's type.
+  // Existing `.value` reads + `input` event listeners continue to work.
+  const initialAttr = inputEl.getAttribute('value');
+  const initial = inputEl.value || initialAttr || '#000000';
+  inputEl.setAttribute('data-cp-original-type', inputEl.type || 'color');
+  inputEl.type = 'text';
+  inputEl.readOnly = true;
+  inputEl.classList.add('cp-swatch-input');
+
+  // Wrap .value so ANY assignment (from theme.js applyColors etc.) auto-updates the swatch bg.
+  Object.defineProperty(inputEl, 'value', {
+    configurable: true,
+    get() { return _NATIVE_VALUE_DESC.get.call(this); },
+    set(v) {
+      _NATIVE_VALUE_DESC.set.call(this, v);
+      _syncSwatch(this);
+    },
+  });
+
+  // Apply initial value so swatch shows color even before any programmatic set.
+  inputEl.value = initial;
+
+  // Use mousedown so we fire BEFORE any document-level click handler
+  // (e.g. our own _onOutside listener) can decide to close.
+  inputEl.addEventListener('mousedown', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // If the same input already has the picker open, close it (toggle).
+    // Otherwise always (re)open — never get stuck in a "won't reopen" state.
+    if (_input === inputEl && _popover) {
+      close();
+    } else {
+      open(inputEl);
+    }
+  });
+  // Suppress the trailing click so it can't bubble to overlays/listeners.
+  inputEl.addEventListener('click', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  });
+}
+
+export function initColorPickers(root = document) {
+  root.querySelectorAll('input[type="color"]').forEach(attachColorPicker);
+}
+
+// Re-run on new inputs that may mount after init
+export function refreshColorPickers(root = document) {
+  initColorPickers(root);
+}

package/dist/web/static/js/compare/icons.js

@@ -0,0 +1,77 @@
+// compare/icons.js — SVG icons, prompt templates, and constants
+
+// ── SVG Icons ──
+
+export const EYE_OPEN = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>';
+export const EYE_CLOSED = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><line x1="8" y1="16" x2="16" y2="8"/><line x1="8" y1="8" x2="16" y2="16"/></svg>';
+export const SAVE_ICON = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>';
+export const CHAT_ICON = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';
+export const ICON_COPY = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+export const ICON_REROLL = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>';
+export const ICON_EXPAND = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>';
+export const ICON_COLLAPSE = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/></svg>';
+export const ICON_DICE = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="3"/><circle cx="8" cy="8" r="1.5" fill="currentColor"/><circle cx="16" cy="8" r="1.5" fill="currentColor"/><circle cx="8" cy="16" r="1.5" fill="currentColor"/><circle cx="16" cy="16" r="1.5" fill="currentColor"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></svg>';
+export const ICON_PLAY = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="5,3 19,12 5,21"/></svg>';
+export const ICON_CODE = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>';
+export const ICON_CLOSE = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
+// Parallel = lines side by side, Sequential = numbered list
+export const ICON_PARALLEL = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>';
+export const ICON_SEQUENTIAL = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="8" y1="6" x2="20" y2="6"/><line x1="8" y1="12" x2="20" y2="12"/><line x1="8" y1="18" x2="20" y2="18"/><circle cx="4" cy="6" r="1.5" fill="currentColor"/><circle cx="4" cy="12" r="1.5" fill="currentColor"/><circle cx="4" cy="18" r="1.5" fill="currentColor"/></svg>';
+export const SEND_SVG = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>';
+
+// ── Animation ──
+
+export const WAVE_FRAMES = ['▁▂▃', '▂▃▄', '▃▄▅', '▄▅▆', '▅▆▇', '▆▅▄', '▅▄▃', '▄▃▂'];
+
+// ── Storage keys & limits ──
+
+export const VOTES_STORAGE_KEY = 'zero-compare-votes';
+export const VOTES_MAX = 200;
+export const POOL_STORAGE_KEY = 'zero-shuffle-pool-excluded';
+
+// ── Evaluation prompt templates ──
+//
+// Five high-signal prompts per category — each picked to differentiate models
+// on a distinct capability. The Visual / SVG-render prompt in `chat` ends with
+// the subject as the last words, so swapping "a pelican riding a bicycle" for
+// anything else is a one-line edit.
+
+export const EVAL_PROMPTS = {
+  chat: [
+    // ── ★ Featured — prompts that have actually broken frontier models ──
+    { sub: '★ Featured', label: 'Sum digits 2^100', answer: '115', prompt: 'Compute the sum of the decimal digits of 2^100. Do NOT use code execution — work it out by reasoning about the number. Show every step, then end with the final number on its own line.' },
+    { sub: '★ Featured', label: 'Three jugs',       answer: '4 pours: 7→5, 5→3, 3→7, 5→3', prompt: 'You have three jugs of capacities 7, 5, and 3 liters. The 7-liter jug starts full; the others empty. Using only pouring (no markings), produce the shortest sequence of pours that leaves exactly 2 liters in the 3-liter jug. Output each step as `pour A → B` on its own line. Then state the total number of pours on a final line.' },
+
+    { sub: 'Visual',         label: 'Draw SVG',         prompt: 'Output a complete self-contained HTML file (```html block, no explanation, no other text) that centers a single SVG illustration on a simple background. The SVG must use only inline shapes — no <img>, no external assets, no JavaScript. Make it expressive and detailed. The SVG should depict: a friendly robot' },
+    { sub: 'Visual explain', label: 'Black hole HTML',  prompt: 'Output a complete HTML file (```html block, no explanation outside the code) that visually explains how a black hole forms. Use four labeled "frames" laid out left-to-right (or stacked on small screens) showing: 1) a glowing massive star, 2) the star going supernova with shockwave rings, 3) collapse into a singularity, 4) the final black hole with a curved accretion disk and bent light around it. Use only vanilla HTML, CSS, and inline SVG — no JavaScript, no images. Each frame should have a one-sentence caption.' },
+    { sub: 'Visual explain', label: 'Butterfly ASCII',  prompt: 'Explain the butterfly lifecycle using ASCII art. Produce four separate frames in fenced code blocks, in order: egg, caterpillar, chrysalis, adult butterfly. Each frame must be drawn with monospace ASCII characters only and be visually recognizable as the creature/stage. Below each frame add one playful one-line caption (no longer than 15 words) describing what is happening at that stage.' },
+  ],
+  code: [
+    { sub: 'Algorithms',   label: 'LRU cache',       prompt: 'Implement an LRU cache with O(1) get and put operations. Support a configurable max capacity. Write it in any language with full comments.' },
+    { sub: 'Debugging',    label: 'Race condition',  prompt: 'This Go code has a race condition. Find it, explain why it happens, and fix it:\n\nvar counter int\nfunc increment(wg *sync.WaitGroup) {\n    defer wg.Done()\n    for i := 0; i < 1000; i++ {\n        counter++\n    }\n}' },
+    { sub: 'Debugging',    label: 'Security review', prompt: 'Review this code for bugs, security issues, and performance problems:\n\napp.get("/user/:id", (req, res) => {\n  const query = `SELECT * FROM users WHERE id = ${req.params.id}`;\n  db.query(query, (err, result) => {\n    res.json(result[0]);\n  });\n});' },
+    { sub: 'Architecture', label: 'URL shortener',   prompt: 'Design a URL shortener service. Cover the API, database schema, and how you would handle 1000 requests per second.' },
+    { sub: 'Refactoring',  label: 'Clean up',        prompt: 'Refactor this code to be more idiomatic and efficient:\n\nresults = []\nfor i in range(len(data)):\n    if data[i]["status"] == "active":\n        if data[i]["score"] > 50:\n            results.append(data[i]["name"].upper())' },
+  ],
+  agent: [
+    { sub: 'Web tasks',  label: 'Multi-step',     prompt: 'Search the web for the current population of the 3 largest cities in the world, then calculate what percentage of the world\'s total population lives in those cities.', toggles: ['web'] },
+    { sub: 'Web tasks',  label: 'Fact check',     prompt: 'Fact-check these claims: 1) The Great Wall of China is visible from space. 2) Humans only use 10% of their brains. 3) Lightning never strikes the same place twice. Cite sources.', toggles: ['web'] },
+    { sub: 'Web tasks',  label: 'Compare prices', prompt: 'Find and compare the pricing, features, and limitations of the top 3 cloud GPU providers for machine learning training. Create a markdown comparison table.', toggles: ['web'] },
+    { sub: 'Code tasks', label: 'Script + run',   prompt: 'Write a Python script that generates a bar chart of the 5 most common programming languages in 2025 and save it as chart.png. Then run it.' },
+    { sub: 'Math',       label: 'Proof + verify', prompt: 'Prove that the square root of 2 is irrational. Then write a Python program that approximates it using Newton\'s method to 50 decimal places and verify.' },
+  ],
+  html: [
+    { sub: 'Games',      label: 'Snake',         prompt: 'Output a complete HTML file (```html block) for a Snake game. ONLY use vanilla HTML, CSS, and JavaScript — no libraries, no Python, no imports, no external files. Canvas-based, neon green snake on dark grid, glowing food, score counter, speed increases, game over + restart. Skip any explanation, just output the code.' },
+    { sub: 'Games',      label: 'Breakout',      prompt: 'Output a complete HTML file (```html block) for a Breakout brick breaker game. ONLY use vanilla HTML, CSS, and JavaScript — no libraries, no Python, no imports, no external files. Canvas-based, colorful gradient brick rows, glowing paddle, ball with trail, score + lives, particle explosions on break. Skip any explanation, just output the code.' },
+    { sub: 'Animation',  label: 'Solar system',  prompt: 'Output a complete HTML file (```html block) for an animated solar system. ONLY use vanilla HTML, CSS, and JavaScript — no libraries, no Python, no imports, no external files. Canvas-based, glowing Sun center, 8 planets orbiting at correct relative speeds with real colors, orbit trails, starfield background, labels on hover. Skip any explanation, just output the code.' },
+    { sub: 'Animation',  label: 'Matrix rain',   prompt: 'Output a complete HTML file (```html block) for the Matrix digital rain effect. ONLY use vanilla HTML, CSS, and JavaScript — no libraries, no Python, no imports, no external files. Full-screen canvas, green katakana characters falling at varying speeds, glowing heads, fading trails, scan-line overlay. Skip any explanation, just output the code.' },
+    { sub: 'Generative', label: 'Fractal tree',  prompt: 'Output a complete HTML file (```html block) for an interactive fractal tree. ONLY use vanilla HTML, CSS, and JavaScript — no libraries, no Python, no imports, no external files. Canvas-based, tree grows from bottom with recursive branches, sliders for angle/depth/length/wind, gradient colors from brown trunk to green leaves. Skip any explanation, just output the code.' },
+  ],
+  search: [
+    { sub: 'Factual',    label: 'Current events', prompt: 'latest AI regulation news 2025' },
+    { sub: 'Technical',  label: 'Programming',    prompt: 'Rust vs Go performance benchmarks 2025' },
+    { sub: 'Research',   label: 'Academic',       prompt: 'transformer architecture improvements since attention is all you need' },
+    { sub: 'Comparison', label: 'GPU providers',  prompt: 'cloud GPU providers pricing comparison 2025' },
+    { sub: 'Factual',    label: 'Science',        prompt: 'CRISPR gene therapy breakthroughs' },
+  ],
+};