@fraziym/axoniz 0.1.0

package/dist/web/static/js/chatStream.js

@@ -0,0 +1,276 @@
+// static/js/chatStream.js
+// SSE event handlers extracted from chat.js handleChatSubmit
+// Handles: ui_control events, background stream management
+
+import uiModule from './ui.js';
+import Storage from './storage.js';
+import themeModule from './theme.js';
+import markdownModule from './markdown.js';
+import sessionModule from './sessions.js';
+
+/**
+ * Handle a ui_control SSE event — AI-driven UI manipulation.
+ * Extracted from the duplicated ui_control + tool_output.ui_event handlers.
+ */
+export function handleUIControl(uiData) {
+  var uiEvent = uiData.ui_event || uiData;
+  var esc = uiModule.esc;
+
+  try {
+    if (uiEvent === 'toggle' || uiData.ui_event === 'toggle') {
+      var toggleMap = {
+        web: 'web-toggle', bash: 'bash-toggle', rag: 'rag-toggle',
+        research: 'research-toggle', incognito: 'incognito-toggle',
+      };
+      var btnMap = {
+        web: 'web-toggle-btn', bash: 'bash-toggle-btn', rag: 'rag-indicator-btn',
+      };
+      var chkId = toggleMap[uiData.toggle_name];
+      var btnId = btnMap[uiData.toggle_name];
+      if (uiData.toggle_name === 'rag' && window._syncRagIndicator) {
+        window._syncRagIndicator(!!uiData.state);
+      } else {
+        if (chkId) {
+          var chk = document.getElementById(chkId);
+          if (chk) chk.checked = !!uiData.state;
+        }
+        if (btnId) {
+          var btn = document.getElementById(btnId);
+          if (btn) btn.classList.toggle('active', !!uiData.state);
+        }
+      }
+      var ts = Storage.getJSON(Storage.KEYS.TOGGLES, {});
+      ts[uiData.toggle_name] = !!uiData.state;
+      Storage.setJSON(Storage.KEYS.TOGGLES, ts);
+
+    } else if (uiEvent === 'set_mode' || uiData.ui_event === 'set_mode') {
+      var modeVal = uiData.mode;
+      var agentBtn = document.getElementById('mode-agent-btn');
+      var chatBtn = document.getElementById('mode-chat-btn');
+      if (agentBtn && chatBtn) {
+        agentBtn.classList.toggle('active', modeVal === 'agent');
+        chatBtn.classList.toggle('active', modeVal !== 'agent');
+      }
+      var ts2 = Storage.getJSON(Storage.KEYS.TOGGLES, {});
+      ts2.mode = modeVal;
+      Storage.setJSON(Storage.KEYS.TOGGLES, ts2);
+      document.querySelectorAll('[data-mode-tool]').forEach(function(b) {
+        b.style.display = modeVal === 'agent' ? '' : 'none';
+      });
+
+    } else if (uiEvent === 'switch_model' || uiData.ui_event === 'switch_model') {
+      var modelDisplay = document.querySelector('.current-model-name, #current-model');
+      if (modelDisplay) modelDisplay.textContent = uiData.model;
+
+    } else if (uiEvent === 'set_theme' || uiData.ui_event === 'set_theme') {
+      var tm = themeModule;
+      if (tm && tm.THEMES && tm.applyColors && tm.save) {
+        var themeName = uiData.theme_name;
+        if (themeName === 'chatgpt') themeName = 'gpt';  // renamed preset
+        var customThemes = tm.getCustomThemes ? tm.getCustomThemes() : {};
+        var colors = tm.THEMES[themeName] || customThemes[themeName] || uiData.colors;
+        if (colors) {
+          tm.applyColors(colors);
+          tm.save(themeName, colors);
+          var grid = document.getElementById('themeGrid');
+          if (grid) {
+            grid.querySelectorAll('.theme-swatch').forEach(function(s) { s.classList.remove('active'); });
+            var sw = grid.querySelector('[data-theme="' + themeName + '"]');
+            if (sw) sw.classList.add('active');
+          }
+        }
+      }
+
+    } else if (uiEvent === 'create_theme' || uiData.ui_event === 'create_theme') {
+      var tm2 = themeModule;
+      if (tm2 && tm2.applyColors && tm2.save) {
+        var colors2 = uiData.colors;
+        var name = uiData.theme_name || 'custom';
+        if (colors2) {
+          tm2.applyColors(colors2);
+          tm2.save(name, colors2);
+          // Background effects (animated pattern / frosted glass) the model
+          // optionally set — apply them live and persist with the theme so
+          // they survive re-applying it later.
+          var bg = uiData.bg || null;
+          var opts = {};
+          if (bg) {
+            if (bg.pattern && tm2.applyBgPattern) { tm2.applyBgPattern(bg.pattern); opts.bgPattern = bg.pattern; }
+            if (bg.effectColor && tm2.applyBgEffectColor) { tm2.applyBgEffectColor(bg.effectColor); opts.bgEffectColor = bg.effectColor; }
+            if (bg.effectIntensity != null && tm2.applyBgEffectIntensity) { tm2.applyBgEffectIntensity(bg.effectIntensity); opts.bgEffectIntensity = bg.effectIntensity; }
+            if (bg.effectSize != null && tm2.applyBgEffectSize) { tm2.applyBgEffectSize(bg.effectSize); opts.bgEffectSize = bg.effectSize; }
+            if (bg.frosted != null && tm2.applyFrostedGlass) { tm2.applyFrostedGlass(bg.frosted); opts.frosted = bg.frosted; }
+          }
+          if (tm2.saveCustomTheme) tm2.saveCustomTheme(name, colors2, Object.keys(opts).length ? opts : undefined);
+        }
+      }
+
+    } else if (uiEvent === 'highlight' || uiData.ui_event === 'highlight') {
+      document.querySelectorAll('.zero-highlight').forEach(function(e) { e.classList.remove('zero-highlight'); });
+      document.querySelectorAll('.zero-hl-label').forEach(function(e) { e.remove(); });
+      var target = document.querySelector(uiData.selector);
+      if (target) {
+        target.classList.add('zero-highlight');
+        target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        if (uiData.label) {
+          var lbl = document.createElement('div');
+          lbl.className = 'zero-hl-label';
+          lbl.textContent = uiData.label;
+          if (!target.style.position) target.style.position = 'relative';
+          target.appendChild(lbl);
+        }
+      }
+
+    } else if (uiEvent === 'clear_highlight' || uiData.ui_event === 'clear_highlight') {
+      document.querySelectorAll('.zero-highlight').forEach(function(e) { e.classList.remove('zero-highlight'); });
+      document.querySelectorAll('.zero-hl-label').forEach(function(e) { e.remove(); });
+
+    } else if (uiEvent === 'research_started' || uiData.ui_event === 'research_started') {
+      // Agent kicked off deep research — adopt the session into the
+      // sidebar immediately so the user sees it without waiting for
+      // the 12s active-poll.
+      var rsid = uiData.research_session_id || uiData.session_id;
+      if (rsid) {
+        import('./research/jobs.js').then(function(mod) {
+          var fn = mod.adoptSession || (mod.default && mod.default.adoptSession);
+          if (fn) fn(rsid);
+        }).catch(function(){});
+        // The clickable "Open in Deep Research" link is now emitted by the
+        // agent loop as a `#research-<id>` markdown anchor in the assistant's
+        // response text — it renders as a regular clickable chat link AND
+        // persists across refresh (saved with the message). No ephemeral
+        // chip injection needed here anymore.
+      }
+
+    } else if (uiEvent === 'open_panel' || uiData.ui_event === 'open_panel') {
+      var panel = uiData.panel;
+      if (panel === 'documents') {
+        import('./documentLibrary.js').then(function(mod) {
+          var fn = mod.openLibrary || (mod.default && mod.default.openLibrary);
+          if (fn) fn();
+        }).catch(function(){});
+      } else if (panel === 'gallery') {
+        import('./gallery.js').then(function(mod) {
+          var fn = mod.openGallery || (mod.default && mod.default.openGallery);
+          if (fn) fn();
+        }).catch(function(){});
+      } else if (panel === 'email') {
+        import('./emailLibrary.js').then(function(mod) {
+          var fn = mod.openEmailLibrary || (mod.default && mod.default.openEmailLibrary);
+          if (fn) fn();
+        }).catch(function(){});
+      } else if (panel === 'sessions') {
+        import('./sessions.js').then(function(mod) {
+          var fn = mod.openLibrary || (mod.default && mod.default.openLibrary);
+          if (fn) fn();
+        }).catch(function(){});
+      } else if (panel === 'cookbook') {
+        import('./cookbook.js').then(function(mod) {
+          var fn = mod.open || (mod.default && mod.default.open);
+          if (fn) fn();
+        }).catch(function(){});
+      } else if (panel === 'notes') {
+        import('./notes.js').then(function(mod) {
+          var fn = mod.openPanel || mod.openNotes || (mod.default && (mod.default.openPanel || mod.default.openNotes));
+          if (fn) fn();
+        }).catch(function(){});
+      } else if (panel === 'memories' || panel === 'skills' || panel === 'settings') {
+        // These live in the sidebar / settings drawer — most just need
+        // an existing button click.
+        var ids = { memories: 'tool-memory-btn', skills: 'skills-btn', settings: 'open-settings-btn' };
+        var btn = document.getElementById(ids[panel]);
+        if (btn) btn.click();
+      }
+
+    } else if (uiEvent === 'open_email_reply' || uiData.ui_event === 'open_email_reply') {
+      import('./emailInbox.js').then(function(mod) {
+        var fn = mod.openReplyDraft || (mod.default && mod.default.openReplyDraft);
+        if (fn) fn(uiData.uid, uiData.folder || 'INBOX', uiData.mode || 'reply');
+      }).catch(function(e) {
+        console.warn('open_email_reply failed:', e);
+      });
+    }
+  } catch(e) {
+    console.warn('ui_control handler error:', e);
+  }
+}
+
+/**
+ * Notify user when a background stream completes.
+ */
+export function notifyStreamComplete(sessionId, query) {
+  var isHidden = document.hidden;
+  var isOtherSession = sessionModule && sessionModule.getCurrentSessionId() !== sessionId;
+  if (!isHidden && !isOtherSession) return;
+  if (!('Notification' in window) || Notification.permission !== 'granted') return;
+  var body = query ? 'Response to "' + query.substring(0, 60) + '" is ready' : 'Your chat response has completed';
+  var notification = new Notification('Response Complete', {
+    body: body,
+    tag: 'stream-' + sessionId,
+  });
+  notification.onclick = function() {
+    window.focus();
+    if (isOtherSession && sessionModule) {
+      sessionModule.selectSession(sessionId);
+    }
+    notification.close();
+  };
+  setTimeout(function() { notification.close(); }, 10000);
+}
+
+/**
+ * Insert a clickable in-chat toast when a background stream finishes.
+ */
+export function insertStreamDoneToast(sessionId, query) {
+  var box = document.getElementById('chat-history');
+  if (!box) return;
+  var sessions = sessionModule ? sessionModule.getSessions() : [];
+  var sess = sessions.find(function(s) { return s.id === sessionId; });
+  var name = sess ? sess.name : 'another session';
+  var preview = query ? '"' + query.substring(0, 50) + (query.length > 50 ? '...' : '') + '"' : '';
+  var div = document.createElement('div');
+  div.className = 'msg msg-system stream-done-toast';
+  div.innerHTML = '<div class="body">'
+    + '<span class="stream-done-indicator">●</span>'
+    + '<span>Response ready in <strong>' + (name || 'session').replace(/</g, '&lt;') + '</strong>'
+    + (preview ? ' &mdash; ' + preview.replace(/</g, '&lt;') : '')
+    + '</span>'
+    + '</div>';
+  div.addEventListener('click', function() {
+    if (sessionModule) sessionModule.selectSession(sessionId);
+  });
+  box.appendChild(div);
+  uiModule.scrollHistory();
+}
+
+/**
+ * Notify when research completes (browser notification).
+ */
+export function notifyResearchComplete(sessionId, query) {
+  var isHidden = document.hidden;
+  var isOtherSession = sessionModule && sessionModule.getCurrentSessionId() !== sessionId;
+  if (!isHidden && !isOtherSession) return;
+  if (!('Notification' in window) || Notification.permission !== 'granted') return;
+  var body = query ? 'Research on "' + query.substring(0, 60) + '" is ready' : 'Your deep research has completed';
+  var notification = new Notification('Research Complete', {
+    body: body,
+    tag: 'research-' + sessionId,
+  });
+  notification.onclick = function() {
+    window.focus();
+    if (isOtherSession && sessionModule) {
+      sessionModule.selectSession(sessionId);
+    }
+    notification.close();
+  };
+  setTimeout(function() { notification.close(); }, 10000);
+}
+
+const chatStream = {
+  handleUIControl,
+  notifyStreamComplete,
+  insertStreamDoneToast,
+  notifyResearchComplete,
+};
+
+export default chatStream;

package/dist/web/static/js/codeRunner.js

@@ -0,0 +1,398 @@
+// static/js/codeRunner.js
+
+import * as uiModule from './ui.js';
+
+/**
+ * In-browser code runner for Python (Pyodide), JavaScript, and HTML
+ */
+
+let pyodideInstance = null;
+let pyodideLoading = false;
+const pyodideQueue = [];
+
+/**
+ * Get or create an output panel below the <pre> element
+ */
+function getOrCreatePanel(pre) {
+  let panel = pre.nextElementSibling;
+  if (panel && panel.classList.contains('code-runner-output')) {
+    panel.innerHTML = '';
+    panel.style.display = 'block';
+    return panel;
+  }
+  panel = document.createElement('div');
+  panel.className = 'code-runner-output';
+  pre.parentNode.insertBefore(panel, pre.nextSibling);
+  return panel;
+}
+
+/**
+ * Show a loading message in the panel
+ */
+function showLoading(panel, msg) {
+  panel.innerHTML = `<div class="code-runner-loading">${msg}</div>`;
+}
+
+/**
+ * Show output text in the panel
+ */
+function showOutput(panel, text, isError) {
+  const el = document.createElement('pre');
+  el.className = isError ? 'code-runner-pre code-runner-error' : 'code-runner-pre';
+  el.textContent = text;
+  panel.innerHTML = '';
+  panel.appendChild(el);
+  // Copy button — visible labeled pill at the top-right of the panel
+  // itself (no separate footer / divider, no tiny icon corner).
+  if (text) {
+    const cbtn = document.createElement('button');
+    cbtn.type = 'button';
+    cbtn.className = 'code-runner-copy-inline';
+    cbtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><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>Copy';
+    cbtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      let ok = false;
+      try {
+        const ta = document.createElement('textarea');
+        ta.value = text;
+        ta.style.cssText = 'position:fixed;left:0;top:0;width:1px;height:1px;opacity:0;';
+        document.body.appendChild(ta);
+        ta.focus();
+        ta.select();
+        ta.setSelectionRange(0, text.length);
+        ok = document.execCommand && document.execCommand('copy');
+        ta.remove();
+      } catch (_) {}
+      if (!ok && navigator.clipboard && window.isSecureContext) {
+        navigator.clipboard.writeText(text).then(() => {
+          if (uiModule.showToast) uiModule.showToast('Copied');
+          cbtn.textContent = 'Copied!';
+          setTimeout(() => { cbtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px;"><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>Copy'; }, 1500);
+        }).catch(() => { if (uiModule.showToast) uiModule.showToast('Copy failed'); });
+        return;
+      }
+      if (uiModule.showToast) uiModule.showToast(ok ? 'Copied' : 'Copy failed');
+      const orig = cbtn.innerHTML;
+      cbtn.textContent = ok ? 'Copied!' : 'Copy failed';
+      setTimeout(() => { cbtn.innerHTML = orig; }, 1500);
+    });
+    // Button lives directly in the panel — no wrapping bar. The panel is
+    // position:relative so the button can sit absolute-top-right of it.
+    panel.appendChild(cbtn);
+  }
+  if (isError) {
+    setTimeout(() => { if (panel) panel.style.display = 'none'; }, 7000);
+  }
+}
+
+/**
+ * Legacy absolute-positioned copy button — replaced by the inline bar in
+ * showOutput. Kept here as no-op so any earlier callers don't crash.
+ */
+function addCopyBtn_unused(panel, text) {
+  if (!text) return;
+  const btn = document.createElement('button');
+  btn.type = 'button';  // Default <button> type is 'submit' — explicit "button" avoids any accidental form submission.
+  btn.className = 'code-runner-copy';
+  btn.title = 'Copy output';
+  btn.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>';
+  btn.addEventListener('click', async (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    // Synchronous copy via a hidden textarea + execCommand — this is the
+    // single most reliable path across browsers / non-secure contexts /
+    // mobile Firefox. Run BEFORE any async navigator.clipboard attempt so
+    // the user-gesture context is preserved.
+    let ok = false;
+    try {
+      const ta = document.createElement('textarea');
+      ta.value = text;
+      ta.style.cssText = 'position:fixed;left:0;top:0;width:1px;height:1px;opacity:0;';
+      document.body.appendChild(ta);
+      ta.focus();
+      ta.select();
+      ta.setSelectionRange(0, text.length);
+      ok = document.execCommand && document.execCommand('copy');
+      ta.remove();
+    } catch (_) {}
+    // As a backup, also try the modern clipboard API (won't hurt if the
+    // legacy path already copied).
+    if (!ok && navigator.clipboard && window.isSecureContext) {
+      try { await navigator.clipboard.writeText(text); ok = true; } catch (_) {}
+    }
+    if (uiModule && uiModule.showToast) {
+      uiModule.showToast(ok ? 'Copied' : 'Copy failed');
+    }
+    const _orig = btn.innerHTML;
+    btn.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
+    btn.classList.add('copied');
+    setTimeout(() => { btn.innerHTML = _orig; btn.classList.remove('copied'); }, 1500);
+  });
+  panel.prepend(btn);
+}
+
+/**
+ * Add a collapse/close button to the panel.
+ * Disabled \u2014 the run-output panel is now closed via the unified Code\u2194Run
+ * toggle in the editor footer, so a separate X was redundant + cluttered.
+ */
+function addCloseBtn(_panel) { /* no-op */ }
+
+/**
+ * Lazy-load Pyodide from CDN
+ */
+function loadPyodide() {
+  if (pyodideInstance) return Promise.resolve(pyodideInstance);
+  if (pyodideLoading) {
+    return new Promise((resolve, reject) => {
+      pyodideQueue.push({ resolve, reject });
+    });
+  }
+  pyodideLoading = true;
+
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = 'https://cdn.jsdelivr.net/pyodide/v0.27.5/full/pyodide.js';
+    script.onload = () => {
+      window.loadPyodide({ indexURL: 'https://cdn.jsdelivr.net/pyodide/v0.27.5/full/' })
+        .then(py => {
+          pyodideInstance = py;
+          pyodideLoading = false;
+          pyodideQueue.forEach(q => q.resolve(py));
+          pyodideQueue.length = 0;
+          resolve(py);
+        })
+        .catch(err => {
+          pyodideLoading = false;
+          pyodideQueue.forEach(q => q.reject(err));
+          pyodideQueue.length = 0;
+          reject(err);
+        });
+    };
+    script.onerror = () => {
+      pyodideLoading = false;
+      const err = new Error('Failed to load Pyodide');
+      pyodideQueue.forEach(q => q.reject(err));
+      pyodideQueue.length = 0;
+      reject(err);
+    };
+    document.head.appendChild(script);
+  });
+}
+
+/**
+ * Run Python code via Pyodide
+ */
+export async function runPython(code, panel) {
+  showLoading(panel, 'Loading Python runtime (first time ~10 MB)...');
+
+  let py;
+  try {
+    py = await loadPyodide();
+  } catch (e) {
+    showOutput(panel, 'Failed to load Python runtime: ' + e.message, true);
+    addCloseBtn(panel);
+    return;
+  }
+
+  showLoading(panel, 'Running...');
+
+  const wrapper = `
+import sys, io
+_stdout = io.StringIO()
+_stderr = io.StringIO()
+sys.stdout = _stdout
+sys.stderr = _stderr
+try:
+    exec(${JSON.stringify(code)})
+except Exception as _e:
+    _stderr.write(str(_e))
+finally:
+    sys.stdout = sys.__stdout__
+    sys.stderr = sys.__stderr__
+(_stdout.getvalue(), _stderr.getvalue())
+`;
+
+  try {
+    const result = await Promise.race([
+      py.runPythonAsync(wrapper),
+      new Promise((_, reject) => setTimeout(() => reject(new Error('Execution timed out (10 s)')), 10000))
+    ]);
+
+    const stdout = result.toJs ? result.toJs()[0] : (result[0] || '');
+    const stderr = result.toJs ? result.toJs()[1] : (result[1] || '');
+    if (result.destroy) result.destroy();
+
+    panel.innerHTML = '';
+    if (stderr) {
+      showOutput(panel, stderr, true);
+    } else if (stdout) {
+      showOutput(panel, stdout, false);
+    } else {
+      showOutput(panel, '(no output)', false);
+    }
+  } catch (e) {
+    showOutput(panel, e.message, true);
+  }
+  addCloseBtn(panel);
+}
+
+/**
+ * Run JavaScript code in a sandboxed iframe
+ */
+export function runJavaScript(code, panel) {
+  showLoading(panel, 'Running...');
+
+  const iframe = document.createElement('iframe');
+  iframe.style.display = 'none';
+  iframe.sandbox = 'allow-scripts';
+  document.body.appendChild(iframe);
+
+  let settled = false;
+  const cleanup = () => {
+    if (iframe.parentNode) iframe.remove();
+  };
+
+  const failsafe = setTimeout(() => {
+    if (!settled) {
+      settled = true;
+      showOutput(panel, 'Execution timed out (10 s)', true);
+      addCloseBtn(panel);
+      cleanup();
+    }
+  }, 15000);
+
+  const onMessage = (e) => {
+    if (e.source !== iframe.contentWindow) return;
+    if (settled) return;
+    settled = true;
+    clearTimeout(failsafe);
+    window.removeEventListener('message', onMessage);
+
+    const data = e.data;
+    panel.innerHTML = '';
+    if (data.error) {
+      showOutput(panel, data.error, true);
+    } else if (data.logs && data.logs.length > 0) {
+      showOutput(panel, data.logs.join('\n'), false);
+    } else {
+      showOutput(panel, '(no output)', false);
+    }
+    addCloseBtn(panel);
+    cleanup();
+  };
+
+  window.addEventListener('message', onMessage);
+
+  const wrappedCode = `
+<!DOCTYPE html><html><body><script>
+var _logs = [];
+var _origLog = console.log;
+console.log = function() { _logs.push([].map.call(arguments, function(a) { try { return typeof a === 'object' ? JSON.stringify(a) : String(a); } catch(e) { return String(a); } }).join(' ')); };
+console.warn = function() { _logs.push('[warn] ' + [].map.call(arguments, String).join(' ')); };
+console.error = function() { _logs.push('[error] ' + [].map.call(arguments, String).join(' ')); };
+try {
+  var _timer = setTimeout(function() { parent.postMessage({error:'Execution timed out (10 s)'},'*'); }, 10000);
+  ${code.replace(/<\/script>/gi, '<\\/script>')}
+  clearTimeout(_timer);
+  parent.postMessage({logs: _logs}, '*');
+} catch(e) {
+  parent.postMessage({error: e.toString()}, '*');
+}
+<\/script></body></html>`;
+
+  iframe.srcdoc = wrappedCode;
+}
+
+/**
+ * Run code server-side via POST /api/shell/exec
+ */
+export async function runServer(code, panel, lang) {
+  showLoading(panel, 'Running on server...');
+  var command;
+  if (lang === 'python' || lang === 'py') {
+    command = 'python3 -c ' + JSON.stringify(code);
+  } else {
+    command = 'bash -c ' + JSON.stringify(code);
+  }
+  try {
+    var res = await fetch('/api/shell/exec', {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ command: command }),
+    });
+    var data = await res.json();
+    panel.innerHTML = '';
+    if (data.stderr && data.stderr.trim()) {
+      showOutput(panel, data.stderr, true);
+      if (data.stdout && data.stdout.trim()) {
+        var stdoutEl = document.createElement('pre');
+        stdoutEl.className = 'code-runner-pre';
+        stdoutEl.textContent = data.stdout;
+        panel.appendChild(stdoutEl);
+      }
+    } else if (data.stdout && data.stdout.trim()) {
+      showOutput(panel, data.stdout, false);
+    } else {
+      showOutput(panel, '(no output)' + (data.exit_code ? ' — exit code ' + data.exit_code : ''), !data.exit_code ? false : true);
+    }
+    if (data.exit_code && data.exit_code !== 0) {
+      var exitEl = document.createElement('div');
+      exitEl.style.cssText = 'font-size:0.75rem;opacity:0.5;padding:2px 8px;';
+      exitEl.textContent = 'Exit code: ' + data.exit_code;
+      panel.appendChild(exitEl);
+    }
+  } catch (e) {
+    showOutput(panel, 'Execution failed: ' + e.message, true);
+  }
+  addCloseBtn(panel);
+}
+
+/**
+ * Run HTML code in its own popup window
+ */
+export function runHTML(code, panel) {
+  panel.innerHTML = '';
+
+  const win = window.open('', '_blank', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no');
+  if (!win) {
+    showOutput(panel, 'Popup blocked — please allow popups for this site.', true);
+    addCloseBtn(panel);
+    return;
+  }
+  win.document.open();
+  win.document.write(code);
+  win.document.close();
+
+  showOutput(panel, 'Opened in new window', false);
+  addCloseBtn(panel);
+}
+
+/**
+ * Main entry point — called when a Run button is clicked
+ */
+export function run(btn) {
+  const code = btn.getAttribute('data-code');
+  const lang = (btn.getAttribute('data-lang') || '').toLowerCase();
+  if (!code) return;
+
+  const pre = btn.closest('pre');
+  if (!pre) return;
+
+  const panel = getOrCreatePanel(pre);
+
+  if (lang === 'bash' || lang === 'sh' || lang === 'shell' || lang === 'zsh') {
+    runServer(code, panel, 'bash');
+  } else if (lang === 'python' || lang === 'py') {
+    runServer(code, panel, 'python');
+  } else if (lang === 'javascript' || lang === 'js') {
+    runJavaScript(code, panel);
+  } else if (lang === 'html') {
+    runHTML(code, panel);
+  }
+}
+
+const codeRunnerModule = { run, runPython, runJavaScript, runHTML, runServer };
+export default codeRunnerModule;

package/dist/web/static/js/color/hex.js

@@ -0,0 +1,14 @@
+// static/js/color/hex.js
+//
+// Parse a CSS hex color into {r, g, b}. Pure — no DOM — so it can be reused
+// across modules and unit-tested under node.
+
+// Accepts "#rgb", "#rrggbb" (with or without the leading '#'). Returns null
+// for anything that isn't a valid 3- or 6-digit hex color.
+export function hexToRgb(hex) {
+  let h = String(hex || '').trim().replace(/^#/, '');
+  if (h.length === 3) h = h.split('').map((c) => c + c).join('');
+  if (!/^[0-9a-fA-F]{6}$/.test(h)) return null;
+  const n = parseInt(h, 16);
+  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
+}