@fraziym/axoniz 0.1.0

package/dist/web/static/js/spinner.js

@@ -0,0 +1,406 @@
+// static/js/spinner.js
+
+/**
+ * ASCII Spinner Module for AI thinking/processing status
+ */
+
+class Spinner {
+  constructor(message = "AI is processing", style = "right", animation = "spinner") {
+    // Different animation frames
+    this.animations = {
+      spinner: ['|', '/', '-', '\\'],
+      wave: ['▁▂▃', '▂▃▄', '▃▄▅', '▄▅▆', '▅▆▅', '▆▅▄', '▅▄▃', '▄▃▂', '▃▂▁']
+    };
+
+    this.animation = animation;
+    this.frames = this.animations[animation] || this.animations.spinner;
+    this.message = message;
+    this.style = style; // "left", "right", or "clean"
+    this.isRunning = false;
+    this.currentFrame = 0;
+    this.intervalId = null;
+    this.rafId = null;
+    this.element = null;
+  }
+
+  /**
+   * Create and return the spinner HTML element
+   */
+  createElement() {
+    if (this.animation === 'sinewave') {
+      return this._createSineWaveElement();
+    }
+    if (this.animation === 'whirlpool') {
+      return this._createWhirlpoolElement();
+    }
+    const span = document.createElement('span');
+    span.className = 'ai-spinner';
+    span.style.cssText = 'font-family: monospace; white-space: pre;';
+    this.element = span;
+    this.updateDisplay();
+    return span;
+  }
+
+  _createSineWaveElement() {
+    const wrapper = document.createElement('span');
+    wrapper.className = 'ai-spinner ai-spinner-sinewave';
+    wrapper.style.cssText = 'font-family: monospace; white-space: pre; display: inline-flex; align-items: center; gap: 6px;';
+
+    const canvas = document.createElement('canvas');
+    canvas.width = 50;
+    canvas.height = 18;
+    canvas.style.cssText = 'display: inline-block; vertical-align: middle;';
+
+    const msgSpan = document.createElement('span');
+    msgSpan.textContent = this.message;
+    this._msgSpan = msgSpan;
+
+    if (this.style === 'left') {
+      wrapper.appendChild(canvas);
+      wrapper.appendChild(msgSpan);
+    } else if (this.style === 'right') {
+      wrapper.appendChild(msgSpan);
+      wrapper.appendChild(canvas);
+    } else {
+      wrapper.appendChild(msgSpan);
+    }
+
+    this._canvas = canvas;
+    this._ctx = canvas.getContext('2d');
+    this._waveT = 0;
+    this._wavePrev = performance.now();
+    this.element = wrapper;
+    return wrapper;
+  }
+
+  _drawSineWave() {
+    const ctx = this._ctx;
+    const W = this._canvas.width;
+    const H = this._canvas.height;
+    const midY = H / 2;
+    const AMP = 7;
+    const CYCLES = 2.5;
+    const PAD = 3;
+    const trackW = W - 2 * PAD;
+    const BASE_SPEED = 0.44;
+    const MIN_SPEED = 0.4;
+    const MAX_SPEED = 2.5;
+
+    const now = performance.now();
+    const dt = (now - this._wavePrev) / 1000;
+    this._wavePrev = now;
+
+    const dotPhase = 0.5 * CYCLES * 2 * Math.PI + this._waveT;
+    const norm = (1 + Math.sin(dotPhase)) / 2;
+    const speedMul = MIN_SPEED + (MAX_SPEED - MIN_SPEED) * Math.pow(norm, 1.3);
+    this._waveT += dt * BASE_SPEED * speedMul * CYCLES * 2 * Math.PI;
+
+    ctx.clearRect(0, 0, W, H);
+
+    // wave line
+    ctx.beginPath();
+    for (let i = 0; i <= 80; i++) {
+      const frac = i / 80;
+      const x = PAD + frac * trackW;
+      const phase = frac * CYCLES * 2 * Math.PI + this._waveT;
+      const y = midY + Math.sin(phase) * AMP;
+      if (i === 0) ctx.moveTo(x, y);
+      else ctx.lineTo(x, y);
+    }
+    ctx.strokeStyle = 'rgba(156, 222, 242, 0.5)';
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+
+    // dot
+    const cx = W / 2;
+    const cPhase = 0.5 * CYCLES * 2 * Math.PI + this._waveT;
+    const cy = midY + Math.sin(cPhase) * AMP;
+    ctx.beginPath();
+    ctx.arc(cx, cy, 1.5, 0, Math.PI * 2);
+    ctx.fillStyle = 'rgba(156, 222, 242, 0.9)';
+    ctx.fill();
+
+    if (this.isRunning) {
+      this.rafId = requestAnimationFrame(() => this._drawSineWave());
+    }
+  }
+
+  _createWhirlpoolElement() {
+    const wrapper = document.createElement('span');
+    wrapper.className = 'ai-spinner ai-spinner-whirlpool';
+    wrapper.style.cssText = 'font-family: monospace; white-space: pre; display: inline-flex; align-items: center; gap: 6px;';
+
+    const size = this._wpSize || 18;
+    const canvas = document.createElement('canvas');
+    canvas.width = size;
+    canvas.height = size;
+    canvas.style.cssText = 'display: inline-block; vertical-align: middle;';
+
+    const msgSpan = document.createElement('span');
+    msgSpan.textContent = this.message;
+    this._msgSpan = msgSpan;
+
+    if (this.style === 'left') {
+      wrapper.appendChild(canvas);
+      wrapper.appendChild(msgSpan);
+    } else if (this.style === 'right') {
+      wrapper.appendChild(msgSpan);
+      wrapper.appendChild(canvas);
+    } else {
+      wrapper.appendChild(canvas);
+    }
+
+    this._wpCanvas = canvas;
+    this._wpCtx = canvas.getContext('2d');
+    this._wpFrame = 60;
+    this.element = wrapper;
+    return wrapper;
+  }
+
+  _drawWhirlpool() {
+    const ctx = this._wpCtx;
+    const W = this._wpCanvas.width;
+    const H = this._wpCanvas.height;
+    const cx = W / 2, cy = H / 2;
+    const maxR = Math.min(W, H) / 2 - 1;
+    const lw = W > 30 ? 3 : W > 20 ? 2 : 1.5;
+    const TOTAL_TURNS = 4;
+    const TAIL_LEN = 0.45;
+    const SPIN_SPEED = 0.08;
+    const LAYERS = 12;
+    const STEPS = 50;
+    const t = this._wpFrame;
+
+    // Colors from CSS vars — read ONCE and cache. Calling getComputedStyle every
+    // frame forces a full style recalc per frame, which janks/freezes the canvas
+    // animation badly when it's painting over a heavy photo. (Theme changes are
+    // rare; the spinner is short-lived, so a stale cache is fine.)
+    if (!this._wpColors) {
+      const s = getComputedStyle(document.documentElement);
+      this._wpColors = {
+        fg: s.getPropertyValue('--red').trim() || s.getPropertyValue('--fg').trim() || '#9cdef2',
+        track: s.getPropertyValue('--border').trim() || '#355a66',
+      };
+    }
+    const fg = this._wpColors.fg;
+    const track = this._wpColors.track;
+
+    function spiralPoint(frac, rot) {
+      const r = maxR * (1 - frac);
+      const angle = frac * TOTAL_TURNS * Math.PI * 2 + rot;
+      return { x: cx + Math.cos(angle) * r, y: cy + Math.sin(angle) * r };
+    }
+
+    ctx.clearRect(0, 0, W, H);
+
+    // track ring
+    ctx.beginPath();
+    ctx.arc(cx, cy, maxR - lw / 2, 0, Math.PI * 2);
+    ctx.strokeStyle = track;
+    ctx.lineWidth = lw;
+    ctx.globalAlpha = 0.35;
+    ctx.stroke();
+    ctx.globalAlpha = 1;
+
+    const headPos = (t * 0.008) % 1;
+
+    // overlapping sub-paths for smooth fade
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    for (let layer = LAYERS - 1; layer >= 0; layer--) {
+      const endFrac = (layer + 1) / LAYERS;
+      const stepsForLayer = Math.ceil(STEPS * endFrac);
+      const alpha = Math.pow(1 - endFrac, 2) * 0.7;
+
+      ctx.beginPath();
+      let started = false;
+      let prevPos = -1;
+      for (let i = 0; i <= stepsForLayer; i++) {
+        const frac = i / STEPS;
+        let pos = headPos - frac * TAIL_LEN;
+        if (pos < 0) pos += 1;
+        if (started && prevPos < 0.3 && pos > 0.7) {
+          ctx.stroke();
+          ctx.beginPath();
+          started = false;
+        }
+        const pt = spiralPoint(pos, t * SPIN_SPEED);
+        if (!started) { ctx.moveTo(pt.x, pt.y); started = true; }
+        else ctx.lineTo(pt.x, pt.y);
+        prevPos = pos;
+      }
+      ctx.strokeStyle = fg;
+      ctx.lineWidth = lw * 0.8;
+      ctx.globalAlpha = alpha;
+      ctx.stroke();
+    }
+
+    // bright dot at head
+    const head = spiralPoint(headPos, t * SPIN_SPEED);
+    ctx.beginPath();
+    ctx.arc(head.x, head.y, Math.max(1, lw * 0.45), 0, Math.PI * 2);
+    ctx.fillStyle = fg;
+    ctx.globalAlpha = 0.9;
+    ctx.fill();
+    ctx.globalAlpha = 1;
+
+    this._wpFrame++;
+    if (!this.isRunning) return;
+    // Leak-safe self-terminate: stop once our element WAS in the DOM and then
+    // got removed (e.g. a loading row replaced by results). But keep spinning
+    // before it's first appended — start() runs synchronously, before the
+    // caller inserts the element, so it isn't connected on frame 1.
+    const connected = !!(this.element && this.element.isConnected);
+    if (connected) this._wpWasConnected = true;
+    if (connected || !this._wpWasConnected) {
+      this.rafId = requestAnimationFrame(() => this._drawWhirlpool());
+    } else {
+      this.isRunning = false;
+    }
+  }
+
+  /**
+   * Update the spinner display
+   */
+  updateDisplay() {
+    if (!this.element) return;
+
+    const frame = this.frames[this.currentFrame % this.frames.length];
+
+    let display = '';
+    if (this.style === "left") {
+      display = `${frame} ${this.message}`;
+    } else if (this.style === "right") {
+      display = `${this.message} ${frame}`;
+    } else { // clean
+      display = this.message;
+    }
+
+    this.element.innerHTML = display;
+  }
+
+  /**
+   * Start the spinner animation
+   */
+  start(speed = 150) {
+    if (this.isRunning) return;
+    this.isRunning = true;
+
+    if (this.animation === 'sinewave') {
+      this._wavePrev = performance.now();
+      this._drawSineWave();
+      return;
+    }
+
+    if (this.animation === 'whirlpool') {
+      this._wpFrame = 60;
+      this._drawWhirlpool();
+      return;
+    }
+
+    this.currentFrame = 0;
+    this.intervalId = setInterval(() => {
+      this.currentFrame++;
+      this.updateDisplay();
+    }, speed);
+  }
+
+  /**
+   * Stop the spinner
+   */
+  stop() {
+    this.isRunning = false;
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+    if (this.rafId) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+  }
+
+  /**
+   * Update the message while spinner is running
+   */
+  updateMessage(newMessage) {
+    this.message = newMessage;
+    if ((this.animation === 'sinewave' || this.animation === 'whirlpool') && this._msgSpan) {
+      this._msgSpan.textContent = newMessage;
+    } else {
+      this.updateDisplay();
+    }
+  }
+
+  /**
+   * Update the spinner label text
+   */
+  updateLabel(newMessage) {
+    this.message = newMessage;
+    if (this._msgSpan) {
+      this._msgSpan.textContent = newMessage;
+    } else {
+      this.updateDisplay();
+    }
+  }
+
+  /**
+   * Destroy the spinner and clean up
+   */
+  destroy() {
+    this.stop();
+    if (this.element && this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+    this.element = null;
+  }
+}
+
+/**
+ * Create a new spinner instance
+ */
+export function create(message, style = "right", animation = "wave") {
+  return new Spinner(message, style, animation);
+}
+
+/**
+ * Create a standalone whirlpool circle spinner (replaces CSS .spinner)
+ * Returns { element, start(), stop(), destroy() }
+ */
+export function createWhirlpool(size = 24) {
+  const sp = new Spinner('', 'clean', 'whirlpool');
+  sp._wpSize = size;
+  const el = sp.createElement();
+  // wrap in a div matching .spinner layout
+  const wrap = document.createElement('div');
+  wrap.className = 'spinner-whirlpool';
+  wrap.style.cssText = `width:${size}px;height:${size}px;margin:8px auto;`;
+  wrap.appendChild(el);
+  sp.start();
+  return { element: wrap, stop: () => sp.stop(), destroy: () => sp.destroy() };
+}
+
+/**
+ * A consistent inline loading row for list/library empty-states: a label plus
+ * the whirlpool spinner. Returns a detached element; the spinner self-stops
+ * once the element leaves the DOM (see _drawWhirlpool), so callers can just
+ * replace it with results — no manual cleanup needed.
+ */
+export function createLoadingRow(text = 'Loading…', size = 16) {
+  const sp = new Spinner('', 'clean', 'whirlpool');
+  sp._wpSize = size;
+  const canvas = sp.createElement();
+  const row = document.createElement('div');
+  row.className = 'lib-loading-row';
+  const label = document.createElement('span');
+  label.textContent = text;
+  row.appendChild(label);
+  row.appendChild(canvas);
+  sp.start();
+  return row;
+}
+
+export { Spinner };
+
+const spinnerModule = { create, createWhirlpool, createLoadingRow, Spinner };
+export default spinnerModule;

package/dist/web/static/js/storage.js

@@ -0,0 +1,123 @@
+// static/js/storage.js
+// Centralized localStorage access with key constants and JSON parse safety
+
+// ── Key constants ──
+export const KEYS = {
+  THEME: 'zero-theme',
+  TOGGLES: 'zero-toggles',
+  SIDEBAR_COLLAPSED: 'sidebar-collapsed',
+  SIDEBAR_WIDTH: 'sidebar-width',
+  SIDEBAR_SIDE: 'sidebar-side',
+  CURRENT_SESSION: 'currentSessionId',
+  COMPARE_SAVE: 'compare-save-results',
+  COMPARE_CHAT: 'compare-continue-chat',
+  COMPARE_BLIND: 'compare-blind',
+  COMPARE_RANDOM: 'compare-randomize',
+  MODELS_EXPANDED: 'zero-model-expanded',
+  MODEL_ENDPOINTS: 'zero-model-endpoints',
+  MODEL_SELECTED: 'zero-selected-model',
+  SORT_ORDER: 'zero-sessions-sort',
+  CHAT_SEARCH_SCOPE: 'zero-search-scope',
+  INCOGNITO: 'zero-incognito',
+  RAG_ACTIVE: 'zero-rag-active',
+  MCP_ACTIVE: 'zero-mcp-active',
+  SECTION_ORDER: 'sidebar-section-order',
+  ADMIN_LAST_TAB: 'admin-last-tab',
+  DENSITY: 'zero-density'
+};
+
+/**
+ * Safely get and parse a JSON value from localStorage.
+ * Returns fallback on any error.
+ */
+export function getJSON(key, fallback) {
+  try {
+    const raw = localStorage.getItem(key);
+    if (raw === null) return fallback !== undefined ? fallback : null;
+    return JSON.parse(raw);
+  } catch (e) {
+    console.warn('[Storage] Failed to parse key "' + key + '":', e.message);
+    return fallback !== undefined ? fallback : null;
+  }
+}
+
+/**
+ * Set a JSON-serialized value in localStorage.
+ */
+export function setJSON(key, value) {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch (e) {
+    console.warn('[Storage] Failed to set key "' + key + '":', e.message);
+  }
+}
+
+/**
+ * Get a raw string value from localStorage.
+ */
+export function get(key, fallback) {
+  try {
+    const val = localStorage.getItem(key);
+    return val !== null ? val : (fallback !== undefined ? fallback : null);
+  } catch (e) {
+    return fallback !== undefined ? fallback : null;
+  }
+}
+
+/**
+ * Set a raw string value in localStorage.
+ */
+export function set(key, value) {
+  try {
+    localStorage.setItem(key, value);
+  } catch (e) {
+    console.warn('[Storage] Failed to set key "' + key + '":', e.message);
+  }
+}
+
+/**
+ * Remove a key from localStorage.
+ */
+export function remove(key) {
+  try {
+    localStorage.removeItem(key);
+  } catch (e) {
+    // Ignore removal errors
+  }
+}
+
+// ── Toggle state helpers ──
+
+export function loadToggleState() {
+  return getJSON(KEYS.TOGGLES, {});
+}
+
+export function saveToggleState(state) {
+  setJSON(KEYS.TOGGLES, state);
+}
+
+export function getToggle(name, fallback) {
+  const state = loadToggleState();
+  return state[name] !== undefined ? state[name] : (fallback !== undefined ? fallback : false);
+}
+
+export function setToggle(name, value) {
+  const state = loadToggleState();
+  state[name] = value;
+  saveToggleState(state);
+}
+
+const Storage = {
+  KEYS,
+  getJSON,
+  setJSON,
+  get,
+  set,
+  remove,
+  loadToggleState,
+  saveToggleState,
+  getToggle,
+  setToggle
+};
+
+export default Storage;