muxmind-ai 2.1.1

package/src-client/app.js

@@ -0,0 +1,1306 @@
+'use strict';
+
+/* ==========================================================================
+   MUXMIND AI — CLIENT APPLICATION LOGIC
+   ========================================================================== */
+
+const STORAGE_KEY = 'muxmind_vault_v1';
+const TOKEN_KEY = 'muxmind_session_token';
+const THEME_KEY = 'muxmind_theme';
+const HISTORY_KEY = 'muxmind_chat_history_v1';
+const MAX_HISTORY_ITEMS = 200;
+
+let PROVIDER_META = {};       // populated from /api/providers after login
+let vault = loadVault();      // [{ id, providerId, apiKey, label, models:[{id,tier,power}], status }]
+let conversation = [];
+let attachedFiles = [];
+let ttsState = 'mute';
+let isStreaming = false;
+let authToken = sessionStorage.getItem(TOKEN_KEY) || null;
+let userScrolledUp = false;
+
+let chatHistory = loadHistory();   // [{ id, title, updatedAt, messages: [] }]
+let activeChatId = null;
+
+const $ = (id) => document.getElementById(id);
+
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str ?? '';
+  return div.innerHTML;
+}
+
+function showToast(message, kind = '') {
+  const toast = $('toast');
+  toast.textContent = message;
+  toast.className = `toast visible ${kind}`;
+  clearTimeout(showToast._t);
+  showToast._t = setTimeout(() => toast.classList.remove('visible'), 3200);
+}
+
+function injectLogo(hostEl, sizePx) {
+  if (!hostEl) return;
+  hostEl.innerHTML = '';
+  const img = document.createElement('img');
+  img.src = 'assets/muxmind-logo-icon.png';
+  img.alt = 'MuxMind AI';
+  img.style.width = '100%';
+  img.style.height = '100%';
+  img.style.objectFit = 'contain';
+  img.style.display = 'block';
+  hostEl.appendChild(img);
+  if (sizePx) { hostEl.style.width = sizePx + 'px'; hostEl.style.height = sizePx + 'px'; }
+}
+
+function authHeaders(extra = {}) {
+  return { ...extra, Authorization: `Bearer ${authToken}` };
+}
+
+async function apiFetch(url, options = {}) {
+  const res = await fetch(url, {
+    ...options,
+    headers: { ...(options.headers || {}), ...authHeaders(options.jsonBody ? { 'Content-Type': 'application/json' } : {}) },
+    body: options.jsonBody ? JSON.stringify(options.jsonBody) : options.body,
+  });
+  if (res.status === 401) {
+    logout('Session expired. Please log in again.');
+    throw new Error('Unauthorized');
+  }
+  return res;
+}
+
+// ==========================================================================
+// THEME
+// ==========================================================================
+
+function applyTheme(theme) {
+  document.documentElement.setAttribute('data-theme', theme);
+  localStorage.setItem(THEME_KEY, theme);
+  const dark = $('theme-btn-dark'), light = $('theme-btn-light');
+  if (dark && light) {
+    dark.classList.toggle('active', theme === 'dark');
+    light.classList.toggle('active', theme === 'light');
+  }
+}
+
+(function initTheme() {
+  const saved = localStorage.getItem(THEME_KEY) ||
+    (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+  applyTheme(saved);
+})();
+
+// ==========================================================================
+// LOGIN
+// ==========================================================================
+
+const loginScreen = $('login-screen');
+const appShell = $('app-shell');
+const loginForm = $('login-form');
+const loginError = $('login-error');
+
+injectLogo($('login-logo'));
+injectLogo($('rail-logo'));
+
+function showApp() {
+  loginScreen.style.display = 'none';
+  appShell.classList.remove('hidden');
+  bootstrapApp();
+}
+
+function showLogin(message) {
+  appShell.classList.add('hidden');
+  loginScreen.style.display = 'flex';
+  if (message) loginError.textContent = message;
+}
+
+function logout(message) {
+  authToken = null;
+  sessionStorage.removeItem(TOKEN_KEY);
+  showLogin(message || '');
+}
+
+loginForm.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  loginError.textContent = '';
+  const password = $('login-password').value;
+  try {
+    const res = await fetch('/api/auth/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ password }),
+    });
+    const data = await res.json();
+    if (!res.ok || !data.ok) {
+      loginError.textContent = data.error || 'Login failed.';
+      return;
+    }
+    authToken = data.token;
+    sessionStorage.setItem(TOKEN_KEY, authToken);
+    $('login-password').value = '';
+    showApp();
+  } catch (err) {
+    loginError.textContent = 'Could not reach the server.';
+  }
+});
+
+$('rail-logout').addEventListener('click', () => logout());
+$('btn-settings-logout').addEventListener('click', () => logout());
+
+// Try existing session token first (uses an authenticated call, not the
+// public /api/ping, so a stale/expired token is actually detected).
+if (authToken) {
+  apiFetch('/api/providers').then(() => showApp()).catch(() => showLogin());
+} else {
+  showLogin();
+}
+
+// ==========================================================================
+// APP BOOTSTRAP (runs once after successful login)
+// ==========================================================================
+
+let appBooted = false;
+
+async function bootstrapApp() {
+  applyI18n(currentLang);
+
+  if (appBooted) return;
+  appBooted = true;
+
+  await loadProviderMeta();
+  populateVaultProviderSelect();
+  populateImageProviderSelect();
+  renderVaultEntries();
+  rebuildModelSelector();
+  renderProvidersPage();
+  renderNetworkMap();
+  setupRailNavigation();
+  setupChatUI();
+  setupVaultUI();
+  setupSettingsUI();
+  setupHistoryUI();
+  setupImageStudioUI();
+  setupFileViewer();
+  updateCompressionLabel();
+  renderHistoryList();
+
+  fetch('/api/ping').then((r) => r.json()).then((d) => console.log('[MuxMind AI] Connected to worker', d.pid));
+}
+
+window.onLangChanged = function onLangChanged() {
+  renderProvidersPage();
+  renderNetworkMap();
+  renderHistoryList();
+  populateImageProviderSelect();
+};
+
+async function loadProviderMeta() {
+  try {
+    const res = await apiFetch('/api/providers');
+    const data = await res.json();
+    if (data.ok) {
+      PROVIDER_META = {};
+      for (const p of data.providers) PROVIDER_META[p.id] = p;
+    }
+  } catch (err) {
+    console.error('Failed to load provider metadata', err);
+  }
+}
+
+// ==========================================================================
+// RAIL NAVIGATION (sidebar pages)
+// ==========================================================================
+
+function setupRailNavigation() {
+  const railButtons = document.querySelectorAll('.rail-btn[data-page]');
+  railButtons.forEach((btn) => {
+    btn.addEventListener('click', () => {
+      railButtons.forEach((b) => b.classList.remove('active'));
+      btn.classList.add('active');
+      document.querySelectorAll('.page-view').forEach((p) => p.classList.remove('active'));
+      $(`page-${btn.dataset.page}`).classList.add('active');
+      if (btn.dataset.page === 'map') renderNetworkMap();
+    });
+  });
+}
+
+// ==========================================================================
+// VAULT (LOCAL STORAGE) MANAGEMENT
+// ==========================================================================
+
+function loadVault() {
+  try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); } catch { return []; }
+}
+function persistVault() { localStorage.setItem(STORAGE_KEY, JSON.stringify(vault)); }
+function maskKey(key) {
+  if (!key || key.length <= 8) return '****';
+  return `${key.slice(0, 6)}...${'*'.repeat(4)}`;
+}
+
+function populateVaultProviderSelect() {
+  const sel = $('vault-provider');
+  sel.innerHTML = '';
+  for (const id of Object.keys(PROVIDER_META)) {
+    const opt = document.createElement('option');
+    opt.value = id;
+    opt.textContent = PROVIDER_META[id].label;
+    sel.appendChild(opt);
+  }
+}
+
+function setupVaultUI() {
+  const vaultPanel = $('vault-panel');
+  const vaultOverlay = $('vault-overlay');
+
+  $('btn-api-manager').addEventListener('click', () => {
+    vaultPanel.classList.add('open'); vaultOverlay.classList.add('open');
+  });
+  $('btn-vault-close').addEventListener('click', closeVault);
+  vaultOverlay.addEventListener('click', closeVault);
+  function closeVault() { vaultPanel.classList.remove('open'); vaultOverlay.classList.remove('open'); }
+
+  $('vault-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const providerId = $('vault-provider').value;
+    const label = $('vault-label').value.trim() || (PROVIDER_META[providerId]?.label || providerId);
+    const apiKey = $('vault-key').value.trim();
+    if (!apiKey) return;
+
+    const entry = { id: `vault_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`, providerId, apiKey, label, status: 'checking', models: [] };
+    vault.push(entry);
+    persistVault();
+    renderVaultEntries();
+    $('vault-form').reset();
+    populateVaultProviderSelect();
+
+    await healthCheckEntry(entry.id);
+  });
+}
+
+async function healthCheckEntry(entryId) {
+  const entry = vault.find((v) => v.id === entryId);
+  if (!entry) return;
+  entry.status = 'checking';
+  renderVaultEntries();
+
+  try {
+    const res = await apiFetch('/api/vault/health-check', {
+      method: 'POST',
+      jsonBody: { entries: [{ providerId: entry.providerId, apiKey: entry.apiKey, label: entry.label }] },
+    });
+    const data = await res.json();
+    const result = data.results?.[0];
+    if (result && result.ok) {
+      entry.status = 'active';
+      entry.models = result.models || [];
+      entry.activeModel = entry.models[0]?.id || null;
+      showToast(`${entry.label}: ${entry.models.length} live model(s) verified`, 'success');
+    } else {
+      entry.status = 'dead';
+      entry.error = result?.error || 'Health check failed';
+      showToast(`${entry.label}: ${entry.error}`, 'error');
+    }
+  } catch (err) {
+    entry.status = 'dead';
+    entry.error = err.message;
+  }
+  persistVault();
+  renderVaultEntries();
+  rebuildModelSelector();
+  renderProvidersPage();
+  renderNetworkMap();
+  populateImageProviderSelect();
+}
+
+function removeVaultEntry(entryId) {
+  vault = vault.filter((v) => v.id !== entryId);
+  persistVault();
+  renderVaultEntries();
+  rebuildModelSelector();
+  renderProvidersPage();
+  renderNetworkMap();
+  populateImageProviderSelect();
+}
+
+function renderVaultEntries() {
+  const vaultEntries = $('vault-entries');
+  vaultEntries.innerHTML = '';
+  if (vault.length === 0) {
+    vaultEntries.innerHTML = `<div class="vault-note">${t('vault.empty')}</div>`;
+    return;
+  }
+  for (const entry of vault) {
+    const div = document.createElement('div');
+    div.className = 'vault-entry';
+    const statusClass = entry.status === 'active' ? 'active' : entry.status === 'checking' ? 'checking' : 'dead';
+    const statusLabel = entry.status === 'active'
+      ? `✓ ${entry.models.length} ${t('vault.liveCount')}`
+      : entry.status === 'checking' ? `⏳ ${t('vault.checking')}` : `✕ ${t('vault.dead')}`;
+    const label = PROVIDER_META[entry.providerId]?.label || entry.providerId;
+
+    div.innerHTML = `
+      <div class="vault-entry-info">
+        <span class="vault-entry-name">${escapeHtml(entry.label)} <span style="color:var(--text-muted);font-weight:400;">(${escapeHtml(label)})</span></span>
+        <span class="vault-entry-key">${maskKey(entry.apiKey)}</span>
+      </div>
+      <div style="display:flex;align-items:center;gap:8px;">
+        <span class="vault-entry-status ${statusClass}">${statusLabel}</span>
+        <div class="vault-entry-actions">
+          <button title="Re-check" data-action="recheck" data-id="${entry.id}">🔄</button>
+          <button title="Remove" data-action="remove" data-id="${entry.id}">🗑️</button>
+        </div>
+      </div>
+    `;
+    vaultEntries.appendChild(div);
+  }
+  vaultEntries.querySelectorAll('[data-action="recheck"]').forEach((btn) => btn.addEventListener('click', () => healthCheckEntry(btn.dataset.id)));
+  vaultEntries.querySelectorAll('[data-action="remove"]').forEach((btn) => btn.addEventListener('click', () => removeVaultEntry(btn.dataset.id)));
+}
+
+function rebuildModelSelector() {
+  const modelSelector = $('model-selector-dropdown');
+  modelSelector.innerHTML = `<option value="auto">${t('nav.smartRouting')}</option>`;
+  for (const entry of vault) {
+    if (entry.status !== 'active') continue;
+    for (const model of entry.models.slice(0, 8)) {
+      const opt = document.createElement('option');
+      opt.value = `${entry.id}::${model.id}`;
+      const label = PROVIDER_META[entry.providerId]?.label || entry.providerId;
+      opt.textContent = `${label} — ${model.id} (${model.tier})`;
+      modelSelector.appendChild(opt);
+    }
+  }
+}
+
+// ==========================================================================
+// PROVIDERS PAGE
+// ==========================================================================
+
+function renderProvidersPage() {
+  const grid = $('provider-grid');
+  grid.innerHTML = '';
+
+  for (const id of Object.keys(PROVIDER_META)) {
+    const meta = PROVIDER_META[id];
+    const configuredEntries = vault.filter((v) => v.providerId === id);
+    const liveModels = configuredEntries.flatMap((e) => (e.status === 'active' ? e.models : []));
+
+    const card = document.createElement('div');
+    card.className = 'provider-card';
+
+    const modelsHtml = liveModels.length > 0
+      ? liveModels.slice(0, 6).map((m) => `<span class="live-model-chip">${escapeHtml(m.id)}</span>`).join('')
+      : `<span class="live-model-chip none">${t('providers.noKey')}</span>`;
+
+    card.innerHTML = `
+      <div class="provider-card-top">
+        <span class="provider-dot" style="background:${meta.color}"></span>
+        <h3>${escapeHtml(meta.label)}</h3>
+      </div>
+      <span class="prefix">Key format: ${escapeHtml(meta.keyPrefix || 'varies')}...</span>
+      <div class="live-models-strip">${modelsHtml}</div>
+      <div class="provider-card-links">
+        <a href="${meta.keyConsoleUrl}" target="_blank" rel="noopener noreferrer" class="primary">${t('providers.getKey')}</a>
+        <a href="${meta.docsUrl}" target="_blank" rel="noopener noreferrer">${t('providers.docs')}</a>
+      </div>
+    `;
+    grid.appendChild(card);
+  }
+}
+
+// ==========================================================================
+// NETWORK MAP PAGE — starts empty; nodes appear as providers get added,
+// each labeled with its live model name + provider logo/color chip.
+// ==========================================================================
+
+// Builds a gently wavy SVG path between two points (instead of a straight
+// line) by offsetting a handful of points perpendicular to the line in an
+// alternating sine pattern, then connecting them with a smooth curve.
+function buildWavyPath(x1, y1, x2, y2, { waves = 3, amplitude = 10 } = {}) {
+  const dx = x2 - x1, dy = y2 - y1;
+  const len = Math.sqrt(dx * dx + dy * dy) || 1;
+  const ux = dx / len, uy = dy / len; // unit vector along the line
+  const px = -uy, py = ux; // perpendicular unit vector
+
+  const segments = Math.max(waves * 2, 4);
+  const pts = [];
+  for (let i = 0; i <= segments; i++) {
+    const t = i / segments;
+    const baseX = x1 + dx * t;
+    const baseY = y1 + dy * t;
+    // taper the wave to zero at both ends so it meets the node/center cleanly
+    const taper = Math.sin(Math.PI * t);
+    const offset = Math.sin(t * Math.PI * 2 * waves) * amplitude * taper;
+    pts.push([baseX + px * offset, baseY + py * offset]);
+  }
+
+  // Smooth the point sequence into a curve: each interior point acts as the
+  // control point for a quadratic segment ending at the midpoint to the
+  // next point, so the path bends smoothly through every wave crest.
+  const f = (n) => n.toFixed(2);
+  let d = `M ${f(pts[0][0])} ${f(pts[0][1])}`;
+  for (let i = 1; i < pts.length - 1; i++) {
+    const [ctrlX, ctrlY] = pts[i];
+    const [nextX, nextY] = pts[i + 1];
+    const midX = (ctrlX + nextX) / 2, midY = (ctrlY + nextY) / 2;
+    d += ` Q ${f(ctrlX)} ${f(ctrlY)}, ${f(midX)} ${f(midY)}`;
+  }
+  const last = pts[pts.length - 1];
+  d += ` L ${f(last[0])} ${f(last[1])}`;
+  return d;
+}
+
+function renderNetworkMap() {
+  const wrap = $('map-canvas-wrap');
+  const svg = $('map-svg');
+  const logoHost = $('map-logo-host');
+  const emptyState = $('map-empty-state');
+  const legend = $('map-legend');
+  if (!wrap || !svg) return;
+
+  const configuredIds = [...new Set(vault.filter((v) => v.status === 'active').map((v) => v.providerId))];
+
+  if (configuredIds.length === 0) {
+    svg.innerHTML = '';
+    logoHost.innerHTML = '';
+    emptyState.style.display = 'flex';
+    legend.style.display = 'none';
+    injectLogo($('map-empty-logo'));
+    return;
+  }
+
+  emptyState.style.display = 'none';
+  legend.style.display = 'block';
+
+  const w = wrap.clientWidth || 800;
+  const h = wrap.clientHeight || 500;
+  const cx = w / 2, cy = h / 2;
+  const radius = Math.min(w, h) * 0.32;
+  const n = configuredIds.length;
+
+  svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
+
+  const logoSize = 84;
+  logoHost.style.left = `${cx - logoSize / 2}px`;
+  logoHost.style.top = `${cy - logoSize / 2}px`;
+  injectLogo(logoHost, logoSize);
+
+  let linesHtml = '';
+  let nodesHtml = '';
+
+  configuredIds.forEach((id, i) => {
+    const angle = (i / n) * Math.PI * 2 - Math.PI / 2;
+    const nx = cx + radius * Math.cos(angle);
+    const ny = cy + radius * Math.sin(angle);
+    const meta = PROVIDER_META[id];
+    if (!meta) return;
+    const entry = vault.find((v) => v.providerId === id && v.status === 'active');
+    const modelName = entry?.activeModel || entry?.models?.[0]?.id || '';
+
+    const wavyD = buildWavyPath(cx, cy, nx, ny, { waves: 3, amplitude: Math.min(14, radius * 0.06) });
+    linesHtml += `<path d="${wavyD}" fill="none" stroke="${meta.color}" stroke-width="2" opacity="0.85" stroke-linecap="round">
+      <animate attributeName="opacity" values="0.85;0.35;0.85" dur="2.4s" repeatCount="indefinite"/>
+    </path>`;
+
+    nodesHtml += `
+      <g transform="translate(${nx},${ny})">
+        <circle r="28" fill="${meta.color}" opacity="0.16" stroke="${meta.color}" stroke-width="1.5"/>
+        <circle r="5" fill="${meta.color}"/>
+        <text y="44" text-anchor="middle" font-size="12" fill="var(--text-primary)" font-family="Segoe UI, sans-serif" font-weight="600">${escapeHtml(meta.label)}</text>
+        <text y="58" text-anchor="middle" font-size="9" fill="var(--accent-green)" font-family="monospace">${t('map.online')}</text>
+        ${modelName ? `<text y="70" text-anchor="middle" font-size="8" fill="var(--text-muted)" font-family="monospace">${escapeHtml(modelName.slice(0, 22))}</text>` : ''}
+      </g>`;
+  });
+
+  svg.innerHTML = linesHtml + nodesHtml;
+}
+
+window.addEventListener('resize', () => {
+  if ($('page-map').classList.contains('active')) renderNetworkMap();
+});
+
+// ==========================================================================
+// SETTINGS PAGE
+// ==========================================================================
+
+function setupSettingsUI() {
+  $('theme-btn-dark').addEventListener('click', () => applyTheme('dark'));
+  $('theme-btn-light').addEventListener('click', () => applyTheme('light'));
+  applyTheme(localStorage.getItem(THEME_KEY) || 'dark');
+
+  $('lang-btn-en').addEventListener('click', () => applyI18n('en'));
+  $('lang-btn-ar').addEventListener('click', () => applyI18n('ar'));
+  applyI18n(currentLang);
+
+  $('btn-clear-vault').addEventListener('click', () => {
+    if (!confirm('Remove all saved provider keys from this browser?')) return;
+    vault = [];
+    persistVault();
+    renderVaultEntries();
+    rebuildModelSelector();
+    renderProvidersPage();
+    renderNetworkMap();
+    populateImageProviderSelect();
+    showToast('Vault cleared.', 'success');
+  });
+
+  $('btn-clear-history').addEventListener('click', () => {
+    if (!confirm(t('history.confirmClear'))) return;
+    chatHistory = [];
+    persistHistory();
+    renderHistoryList();
+    showToast(t('history.cleared'), 'success');
+  });
+
+  $('password-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const msgEl = $('pw-form-msg');
+    msgEl.textContent = ''; msgEl.className = 'form-msg';
+    const currentPassword = $('pw-current').value;
+    const newPassword = $('pw-new').value;
+    const confirmPassword = $('pw-confirm').value;
+
+    if (newPassword !== confirmPassword) {
+      msgEl.textContent = t('settings.pwMismatch');
+      msgEl.className = 'form-msg error';
+      return;
+    }
+
+    try {
+      const res = await apiFetch('/api/auth/change-password', {
+        method: 'POST',
+        jsonBody: { currentPassword, newPassword },
+      });
+      const data = await res.json();
+      if (!res.ok || !data.ok) {
+        msgEl.textContent = data.error || 'Failed to update password.';
+        msgEl.className = 'form-msg error';
+        return;
+      }
+      authToken = data.token;
+      sessionStorage.setItem(TOKEN_KEY, authToken);
+      $('password-form').reset();
+      msgEl.textContent = t('settings.pwSuccess');
+      msgEl.className = 'form-msg success';
+      showToast(t('settings.pwSuccess'), 'success');
+    } catch (err) {
+      msgEl.textContent = err.message;
+      msgEl.className = 'form-msg error';
+    }
+  });
+}
+
+// ==========================================================================
+// CHAT HISTORY (persisted conversations sidebar)
+// ==========================================================================
+
+function loadHistory() {
+  try { return JSON.parse(localStorage.getItem(HISTORY_KEY) || '[]'); } catch { return []; }
+}
+function persistHistory() {
+  const trimmed = chatHistory
+    .sort((a, b) => b.updatedAt - a.updatedAt)
+    .slice(0, MAX_HISTORY_ITEMS);
+  localStorage.setItem(HISTORY_KEY, JSON.stringify(trimmed));
+  chatHistory = trimmed;
+}
+
+function setupHistoryUI() {
+  $('btn-new-chat').addEventListener('click', () => startNewChat());
+  $('btn-toggle-history').addEventListener('click', () => {
+    $('app-shell').classList.toggle('history-collapsed');
+  });
+  $('history-search-input').addEventListener('input', () => renderHistoryList());
+}
+
+function startNewChat() {
+  activeChatId = null;
+  clearChatUIOnly();
+  renderHistoryList();
+}
+
+function currentChatTitle() {
+  const firstUserMsg = conversation.find((m) => m.role === 'user');
+  if (!firstUserMsg) return t('history.untitled');
+  const text = (firstUserMsg.content || '').replace(/\s+/g, ' ').trim();
+  return text.length > 46 ? text.slice(0, 46) + '…' : (text || t('history.untitled'));
+}
+
+function saveActiveChat() {
+  if (conversation.length === 0) return;
+  if (!activeChatId) {
+    activeChatId = `chat_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
+  }
+  const existingIdx = chatHistory.findIndex((c) => c.id === activeChatId);
+  const record = {
+    id: activeChatId,
+    title: currentChatTitle(),
+    updatedAt: Date.now(),
+    messages: conversation,
+  };
+  if (existingIdx >= 0) chatHistory[existingIdx] = record;
+  else chatHistory.push(record);
+  persistHistory();
+  renderHistoryList();
+}
+
+function loadChat(chatId) {
+  const record = chatHistory.find((c) => c.id === chatId);
+  if (!record) return;
+  activeChatId = chatId;
+  conversation = JSON.parse(JSON.stringify(record.messages));
+  attachedFiles = [];
+  renderFileChips();
+
+  const chatMessages = $('chat-messages');
+  chatMessages.innerHTML = '';
+  const empty = $('empty-state');
+  chatMessages.appendChild(empty);
+  empty.style.display = 'none';
+  const jump = document.createElement('button');
+  jump.className = 'jump-latest'; jump.id = 'jump-latest'; jump.textContent = t('chat.jumpLatest');
+  chatMessages.appendChild(jump);
+  jump.addEventListener('click', () => { userScrolledUp = false; chatMessages.scrollTop = chatMessages.scrollHeight; jump.classList.remove('visible'); });
+
+  for (const msg of conversation) {
+    if (msg.role === 'user' || msg.role === 'assistant') {
+      appendMessage(msg.role, msg.content);
+    }
+  }
+  userScrolledUp = false;
+  chatMessages.scrollTop = chatMessages.scrollHeight;
+  renderHistoryList();
+
+  document.querySelectorAll('.rail-btn[data-page]').forEach((b) => b.classList.remove('active'));
+  $('rail-chat').classList.add('active');
+  document.querySelectorAll('.page-view').forEach((p) => p.classList.remove('active'));
+  $('page-chat').classList.add('active');
+}
+
+function deleteChat(chatId, evt) {
+  if (evt) evt.stopPropagation();
+  if (!confirm(t('history.confirmDelete'))) return;
+  chatHistory = chatHistory.filter((c) => c.id !== chatId);
+  persistHistory();
+  if (activeChatId === chatId) startNewChat();
+  else renderHistoryList();
+}
+
+function renderHistoryList() {
+  const list = $('history-list');
+  if (!list) return;
+  const query = ($('history-search-input')?.value || '').trim().toLowerCase();
+  const items = chatHistory
+    .filter((c) => !query || c.title.toLowerCase().includes(query))
+    .sort((a, b) => b.updatedAt - a.updatedAt);
+
+  list.innerHTML = '';
+  if (items.length === 0) {
+    list.innerHTML = `<div class="history-empty">${t('history.untitled')}</div>`;
+    return;
+  }
+  for (const item of items) {
+    const div = document.createElement('div');
+    div.className = `history-item ${item.id === activeChatId ? 'active' : ''}`;
+    div.innerHTML = `
+      <span class="history-item-title">${escapeHtml(item.title)}</span>
+      <div class="history-item-actions">
+        <button title="Delete" data-id="${item.id}">🗑️</button>
+      </div>
+    `;
+    div.addEventListener('click', () => loadChat(item.id));
+    div.querySelector('[data-id]').addEventListener('click', (e) => deleteChat(item.id, e));
+    list.appendChild(div);
+  }
+}
+
+// ==========================================================================
+// COMPRESSION SLIDER
+// ==========================================================================
+
+const COMPRESSION_LABELS = [[0, 'Off'], [25, 'Light'], [50, 'Balanced'], [75, 'Aggressive'], [99, 'Extreme (99%)']];
+
+function updateCompressionLabel() {
+  const slider = $('token-compression-slider');
+  const val = Number(slider.value);
+  let label = 'Off';
+  for (const [threshold, l] of COMPRESSION_LABELS) if (val >= threshold) label = l;
+  $('compression-value').textContent = `${label} (${val}%)`;
+}
+
+// ==========================================================================
+// CHAT UI SETUP
+// ==========================================================================
+
+function setupChatUI() {
+  const promptInput = $('user-prompt-input');
+  const compressionSlider = $('token-compression-slider');
+  const chatMessages = $('chat-messages');
+  const jumpLatestBtn = $('jump-latest');
+
+  compressionSlider.addEventListener('input', updateCompressionLabel);
+
+  promptInput.addEventListener('input', () => {
+    promptInput.style.height = 'auto';
+    promptInput.style.height = Math.min(promptInput.scrollHeight, 200) + 'px';
+  });
+
+  promptInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
+  });
+
+  $('btn-send').addEventListener('click', sendMessage);
+  $('btn-stop').addEventListener('click', stopGeneration);
+  $('btn-attach').addEventListener('click', () => $('file-upload-input').click());
+  initVoiceInput();
+  $('file-upload-input').addEventListener('change', handleFileUpload);
+  $('btn-clear-chat').addEventListener('click', clearChat);
+  $('btn-tts-toggle').addEventListener('click', toggleTts);
+
+  // FIX: "scroll up shows old messages but keeps yanking back down".
+  // We only auto-scroll to bottom if the user is already near the bottom.
+  chatMessages.addEventListener('scroll', () => {
+    const distanceFromBottom = chatMessages.scrollHeight - chatMessages.scrollTop - chatMessages.clientHeight;
+    userScrolledUp = distanceFromBottom > 80;
+    jumpLatestBtn.classList.toggle('visible', userScrolledUp);
+  });
+
+  jumpLatestBtn.addEventListener('click', () => {
+    userScrolledUp = false;
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+    jumpLatestBtn.classList.remove('visible');
+  });
+}
+
+function scrollToBottomIfAllowed() {
+  const chatMessages = $('chat-messages');
+  if (!userScrolledUp) {
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+  } else {
+    $('jump-latest').classList.add('visible');
+  }
+}
+
+// ==========================================================================
+// FILE ATTACHMENTS + VIEWER
+// ==========================================================================
+
+async function handleFileUpload() {
+  const fileInput = $('file-upload-input');
+  const files = Array.from(fileInput.files || []);
+  if (files.length === 0) return;
+
+  const formData = new FormData();
+  files.forEach((f) => formData.append('files', f));
+
+  try {
+    const res = await apiFetch('/api/upload', { method: 'POST', body: formData });
+    const data = await res.json();
+    if (data.ok) {
+      attachedFiles.push(...data.parsed.filter((p) => p.ok));
+      renderFileChips();
+    }
+  } catch (err) {
+    console.error('Upload failed', err);
+  }
+  fileInput.value = '';
+}
+
+function renderFileChips() {
+  const fileChipRow = $('file-chip-row');
+  fileChipRow.innerHTML = '';
+  attachedFiles.forEach((file, idx) => {
+    const chip = document.createElement('div');
+    chip.className = 'file-chip';
+    const icon = file.type === 'image' ? '🖼️' : file.type === 'pdf' ? '📄' : '📝';
+    chip.innerHTML = `<span class="chip-open" data-idx="${idx}">${icon} ${escapeHtml(file.filename)}</span> <span class="remove" data-idx="${idx}">✕</span>`;
+    fileChipRow.appendChild(chip);
+  });
+  fileChipRow.querySelectorAll('.remove').forEach((el) => {
+    el.addEventListener('click', (e) => { e.stopPropagation(); attachedFiles.splice(Number(el.dataset.idx), 1); renderFileChips(); });
+  });
+  fileChipRow.querySelectorAll('.chip-open').forEach((el) => {
+    el.addEventListener('click', () => openFileViewer(attachedFiles[Number(el.dataset.idx)]));
+  });
+}
+
+function setupFileViewer() {
+  $('file-viewer-close').addEventListener('click', closeFileViewer);
+  $('file-viewer-overlay').addEventListener('click', (e) => {
+    if (e.target.id === 'file-viewer-overlay') closeFileViewer();
+  });
+}
+
+function openFileViewer(file) {
+  if (!file) return;
+  $('file-viewer-title').textContent = file.filename;
+  const body = $('file-viewer-body');
+  body.innerHTML = '';
+
+  if (file.type === 'image') {
+    const img = document.createElement('img');
+    img.src = `data:${file.mimeType};base64,${file.base64}`;
+    body.appendChild(img);
+  } else if (file.type === 'pdf') {
+    const iframe = document.createElement('iframe');
+    iframe.src = `data:application/pdf;base64,${file.base64}`;
+    body.appendChild(iframe);
+  } else {
+    const pre = document.createElement('pre');
+    pre.textContent = file.content || '';
+    body.appendChild(pre);
+  }
+  $('file-viewer-overlay').classList.add('open');
+}
+
+function closeFileViewer() {
+  $('file-viewer-overlay').classList.remove('open');
+}
+
+// ==========================================================================
+// CHAT RENDERING
+// ==========================================================================
+
+function appendMessage(role, text, meta = {}) {
+  $('empty-state').style.display = 'none';
+  const chatMessages = $('chat-messages');
+  const wrap = document.createElement('div');
+  wrap.className = `msg ${role}`;
+
+  const bubble = document.createElement('div');
+  bubble.className = 'msg-bubble';
+  bubble.textContent = text;
+  wrap.appendChild(bubble);
+
+  if (meta.attachments && meta.attachments.length) {
+    const attWrap = document.createElement('div');
+    attWrap.className = 'msg-attachments';
+    meta.attachments.forEach((file, idx) => {
+      const chip = document.createElement('div');
+      chip.className = 'msg-attachment-chip';
+      if (file.type === 'image') {
+        chip.innerHTML = `<img class="thumb" src="data:${file.mimeType};base64,${file.base64}" /> ${escapeHtml(file.filename)}`;
+      } else {
+        const icon = file.type === 'pdf' ? '📄' : '📝';
+        chip.textContent = `${icon} ${file.filename}`;
+      }
+      chip.addEventListener('click', () => openFileViewer(file));
+      attWrap.appendChild(chip);
+    });
+    wrap.appendChild(attWrap);
+  }
+
+  if (meta.providers && meta.providers.length) {
+    const metaEl = document.createElement('div');
+    metaEl.className = 'msg-meta';
+    metaEl.innerHTML = meta.providers.map((p) => `<span class="provider-tag">${escapeHtml(p)}</span>`).join('');
+    wrap.appendChild(metaEl);
+  }
+
+  chatMessages.insertBefore(wrap, $('jump-latest'));
+  scrollToBottomIfAllowed();
+  return bubble;
+}
+
+function appendTypingIndicator() {
+  $('empty-state').style.display = 'none';
+  const chatMessages = $('chat-messages');
+  const wrap = document.createElement('div');
+  wrap.className = 'msg assistant';
+  wrap.id = 'typing-indicator';
+  wrap.innerHTML = `<div class="msg-bubble"><span class="typing-dots"><span></span><span></span><span></span></span></div>`;
+  chatMessages.insertBefore(wrap, $('jump-latest'));
+  scrollToBottomIfAllowed();
+}
+
+function removeTypingIndicator() { const el = $('typing-indicator'); if (el) el.remove(); }
+
+// ==========================================================================
+// SEND / STREAM
+// ==========================================================================
+
+function getActiveVaultForRequest() {
+  const modelSelector = $('model-selector-dropdown');
+  // Smart Token Saver must only ever see providers proven live this
+  // session — never guessed or stale entries.
+  const activeEntries = vault.filter((v) => v.status === 'active' && v.models && v.models.length > 0);
+  const selectedValue = modelSelector.value;
+
+  if (selectedValue && selectedValue !== 'auto') {
+    const [entryId, model] = selectedValue.split('::');
+    const entry = activeEntries.find((v) => v.id === entryId);
+    if (entry) return [{ providerId: entry.providerId, apiKey: entry.apiKey, model }];
+    return [];
+  }
+
+  return activeEntries.map((entry) => ({
+    providerId: entry.providerId,
+    apiKey: entry.apiKey,
+    model: entry.activeModel || entry.models[0]?.id,
+  })).filter((e) => e.model);
+}
+
+async function sendMessage() {
+  const promptInput = $('user-prompt-input');
+  const text = promptInput.value.trim();
+  if (!text && attachedFiles.length === 0) return;
+  if (isStreaming) return;
+
+  const activeVault = getActiveVaultForRequest();
+  if (activeVault.length === 0) {
+    appendMessage('assistant', t('chat.noProvider'));
+    return;
+  }
+
+  let fullPrompt = text;
+  const messageAttachments = [...attachedFiles];
+  if (attachedFiles.length > 0) {
+    const textFiles = attachedFiles.filter((f) => f.type === 'text');
+    if (textFiles.length > 0) {
+      const context = textFiles.map((f) => `--- FILE: ${f.filename} ---\n${f.content}\n--- END FILE ---`).join('\n\n');
+      fullPrompt = `${context}\n\n${text}`;
+    }
+  }
+
+  appendMessage('user', text || t('chat.attachedFiles'), { attachments: messageAttachments });
+  conversation.push({ role: 'user', content: fullPrompt });
+  promptInput.value = '';
+  promptInput.style.height = 'auto';
+  attachedFiles = [];
+  renderFileChips();
+
+  appendTypingIndicator();
+  setStreamingState(true);
+
+  let assistantBubble = null;
+  let accumulatedText = '';
+  const providersUsed = new Set();
+
+  try {
+    const res = await apiFetch('/api/chat/stream', {
+      method: 'POST',
+      jsonBody: {
+        vault: activeVault,
+        messages: conversation,
+        compressionLevel: Number($('token-compression-slider').value),
+        taskId: `task_${Date.now()}`,
+      },
+    });
+
+    if (!res.ok || !res.body) {
+      const errData = await res.json().catch(() => ({}));
+      throw new Error(errData.error || `HTTP ${res.status}`);
+    }
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+
+    setStatus('streaming', 'Engine: Streaming (smart routing)');
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+
+      const events = buffer.split('\n\n');
+      buffer = events.pop();
+
+      for (const evt of events) {
+        const lines = evt.split('\n');
+        const eventType = lines.find((l) => l.startsWith('event:'))?.slice(6).trim();
+        const dataLine = lines.find((l) => l.startsWith('data:'))?.slice(5).trim();
+        if (!eventType || !dataLine) continue;
+
+        let data;
+        try { data = JSON.parse(dataLine); } catch { continue; }
+
+        if (eventType === 'chunk') {
+          removeTypingIndicator();
+          if (!assistantBubble) assistantBubble = appendMessage('assistant', '');
+          accumulatedText += data.text;
+          assistantBubble.textContent = accumulatedText;
+          scrollToBottomIfAllowed();
+        } else if (eventType === 'provider') {
+          providersUsed.add(`${data.provider}:${data.model}`);
+          setStatus('streaming', `Engine: ${data.provider} → ${data.model}`);
+        } else if (eventType === 'done') {
+          const savings = estimateSavings(Number($('token-compression-slider').value));
+          setStatus('idle', `Engine: Complete | Savings: ${savings}%`);
+        } else if (eventType === 'error') {
+          throw new Error(data.error);
+        }
+      }
+    }
+
+    removeTypingIndicator();
+    conversation.push({ role: 'assistant', content: accumulatedText });
+
+    if (providersUsed.size > 0 && assistantBubble) {
+      const metaEl = document.createElement('div');
+      metaEl.className = 'msg-meta';
+      metaEl.innerHTML = [...providersUsed].map((p) => `<span class="provider-tag">${escapeHtml(p)}</span>`).join('');
+      assistantBubble.parentElement.appendChild(metaEl);
+    }
+
+    if (ttsState !== 'mute' && accumulatedText) speakText(accumulatedText, ttsState);
+
+    saveActiveChat();
+  } catch (err) {
+    removeTypingIndicator();
+    appendMessage('assistant', `⚠️ Error: ${err.message}`);
+    setStatus('error', `Engine: Error`);
+    saveActiveChat();
+  } finally {
+    setStreamingState(false);
+  }
+}
+
+function stopGeneration() {
+  setStreamingState(false);
+  setStatus('idle', 'Engine: Stopped');
+}
+
+function setStreamingState(streaming) {
+  isStreaming = streaming;
+  $('btn-stop').classList.toggle('active', streaming);
+  $('btn-send').disabled = streaming;
+}
+
+function setStatus(kind, text) {
+  const badge = $('status-badge');
+  badge.textContent = `[${text}]`;
+  badge.className = kind === 'streaming' ? 'streaming' : kind === 'error' ? 'error' : '';
+}
+
+function estimateSavings(level) {
+  if (level >= 99) return 99;
+  if (level >= 75) return 75;
+  if (level >= 50) return 50;
+  if (level >= 25) return 25;
+  return 0;
+}
+
+function clearChatUIOnly() {
+  conversation = [];
+  attachedFiles = [];
+  renderFileChips();
+  const chatMessages = $('chat-messages');
+  chatMessages.innerHTML = '';
+  const empty = $('empty-state');
+  chatMessages.appendChild(empty);
+  const jump = document.createElement('button');
+  jump.className = 'jump-latest'; jump.id = 'jump-latest'; jump.textContent = t('chat.jumpLatest');
+  chatMessages.appendChild(jump);
+  jump.addEventListener('click', () => { userScrolledUp = false; chatMessages.scrollTop = chatMessages.scrollHeight; jump.classList.remove('visible'); });
+  empty.style.display = 'flex';
+  setStatus('idle', 'Engine: Idle | Savings: 0%');
+}
+
+function clearChat() {
+  clearChatUIOnly();
+  activeChatId = null;
+  renderHistoryList();
+}
+
+// ==========================================================================
+// IMAGE STUDIO
+// ==========================================================================
+
+const IMAGE_CAPABLE_PROVIDERS = new Set(['openai', 'gemini']);
+
+function populateImageProviderSelect() {
+  const sel = $('imagegen-provider');
+  if (!sel) return;
+  const capable = vault.filter((v) => v.status === 'active' && IMAGE_CAPABLE_PROVIDERS.has(v.providerId));
+  sel.innerHTML = '';
+  if (capable.length === 0) {
+    sel.innerHTML = `<option value="">${t('image.noProvider')}</option>`;
+    sel.disabled = true;
+    return;
+  }
+  sel.disabled = false;
+  for (const entry of capable) {
+    const opt = document.createElement('option');
+    opt.value = entry.id;
+    const label = PROVIDER_META[entry.providerId]?.label || entry.providerId;
+    opt.textContent = `${label} (${entry.label})`;
+    sel.appendChild(opt);
+  }
+}
+
+function setupImageStudioUI() {
+  const form = $('imagegen-form');
+  const promptInput = $('imagegen-prompt');
+  promptInput.addEventListener('input', () => {
+    promptInput.style.height = 'auto';
+    promptInput.style.height = Math.min(promptInput.scrollHeight, 120) + 'px';
+  });
+
+  renderImageResultsEmpty();
+
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const prompt = promptInput.value.trim();
+    const entryId = $('imagegen-provider').value;
+    if (!prompt || !entryId) return;
+    const entry = vault.find((v) => v.id === entryId);
+    if (!entry) return;
+
+    const submitBtn = $('imagegen-submit');
+    submitBtn.disabled = true;
+    submitBtn.textContent = t('image.generating');
+    $('imagegen-results').innerHTML = `<div class="imagegen-loading">${t('image.generating')}</div>`;
+
+    try {
+      const res = await apiFetch('/api/image/generate', {
+        method: 'POST',
+        jsonBody: { providerId: entry.providerId, apiKey: entry.apiKey, prompt },
+      });
+      const data = await res.json();
+      if (!res.ok || !data.ok) throw new Error(data.error || 'Image generation failed.');
+      renderImageResults(data.images, prompt);
+    } catch (err) {
+      $('imagegen-results').innerHTML = `<div class="imagegen-empty">⚠️ ${escapeHtml(err.message)}</div>`;
+      showToast(err.message, 'error');
+    } finally {
+      submitBtn.disabled = false;
+      submitBtn.textContent = t('image.generate');
+    }
+  });
+}
+
+function renderImageResultsEmpty() {
+  $('imagegen-results').innerHTML = `<div class="imagegen-empty">${t('image.empty')}</div>`;
+}
+
+function renderImageResults(images, prompt) {
+  const container = $('imagegen-results');
+  container.innerHTML = '';
+  images.forEach((src, idx) => {
+    const card = document.createElement('div');
+    card.className = 'imagegen-result';
+    card.innerHTML = `<img src="${src}" alt="${escapeHtml(prompt)}" /><a class="dl-btn" download="muxmind-image-${idx + 1}.png" href="${src}">${t('image.download')}</a>`;
+    container.appendChild(card);
+  });
+}
+
+// ==========================================================================
+// VOICE INPUT (Speech-to-Text) — press mic, speak, auto-fills + sends
+// ==========================================================================
+
+let recognizer = null;
+let isListening = false;
+
+function initVoiceInput() {
+  const btnMic = $('btn-mic');
+  if (!btnMic) return;
+
+  const SpeechRecognitionCtor = window.SpeechRecognition || window.webkitSpeechRecognition;
+  if (!SpeechRecognitionCtor) {
+    btnMic.disabled = true;
+    btnMic.title = 'Voice input not supported in this browser';
+    btnMic.style.opacity = '0.4';
+    return;
+  }
+
+  btnMic.addEventListener('click', () => {
+    if (isListening) {
+      stopVoiceInput();
+    } else {
+      startVoiceInput(SpeechRecognitionCtor);
+    }
+  });
+}
+
+function startVoiceInput(SpeechRecognitionCtor) {
+  const btnMic = $('btn-mic');
+  const promptInput = $('user-prompt-input');
+
+  recognizer = new SpeechRecognitionCtor();
+  // Match recognition language to whatever UI language is active so
+  // Arabic and English speech both transcribe correctly out of the box.
+  recognizer.lang = currentLang === 'ar' ? 'ar-SA' : 'en-US';
+  recognizer.interimResults = true;
+  recognizer.continuous = false;
+  recognizer.maxAlternatives = 1;
+
+  let finalTranscript = '';
+
+  recognizer.onstart = () => {
+    isListening = true;
+    btnMic.dataset.state = 'listening';
+    btnMic.textContent = '🔴';
+    btnMic.title = 'Listening… click to stop';
+    setStatus('listening', currentLang === 'ar' ? 'جارِ الاستماع...' : 'Listening...');
+  };
+
+  recognizer.onresult = (event) => {
+    let interim = '';
+    for (let i = event.resultIndex; i < event.results.length; i++) {
+      const transcript = event.results[i][0].transcript;
+      if (event.results[i].isFinal) finalTranscript += transcript;
+      else interim += transcript;
+    }
+    promptInput.value = (finalTranscript + interim).trim();
+    promptInput.style.height = 'auto';
+    promptInput.style.height = `${promptInput.scrollHeight}px`;
+  };
+
+  recognizer.onerror = (event) => {
+    if (event.error === 'no-speech') {
+      showToast(currentLang === 'ar' ? 'لم يُسمع أي كلام، حاول مرة أخرى' : 'No speech detected, try again', 'error');
+    } else if (event.error === 'not-allowed' || event.error === 'service-not-allowed') {
+      showToast(currentLang === 'ar' ? 'يرجى السماح بالوصول إلى الميكروفون' : 'Microphone access denied', 'error');
+    } else {
+      showToast(`Voice input error: ${event.error}`, 'error');
+    }
+  };
+
+  recognizer.onend = () => {
+    isListening = false;
+    btnMic.dataset.state = 'idle';
+    btnMic.textContent = '🎤';
+    btnMic.title = 'Voice input';
+    setStatus('idle', '');
+    // Auto-send once speech has ended, if we actually captured something.
+    if (finalTranscript.trim()) {
+      sendMessage();
+    }
+  };
+
+  finalTranscript = '';
+  recognizer.start();
+}
+
+function stopVoiceInput() {
+  if (recognizer && isListening) recognizer.stop();
+}
+
+// ==========================================================================
+// TEXT-TO-SPEECH
+// ==========================================================================
+
+function toggleTts() {
+  if (ttsState === 'mute') ttsState = 'en';
+  else if (ttsState === 'en') ttsState = 'ar';
+  else ttsState = 'mute';
+
+  const btnTts = $('btn-tts-toggle');
+  const labels = { mute: '🔇 Mute', en: '🔊 English', ar: '🔊 Arabic' };
+  btnTts.textContent = labels[ttsState];
+  btnTts.dataset.state = ttsState;
+  if (ttsState === 'mute') window.speechSynthesis.cancel();
+}
+
+function speakText(text, langKey) {
+  if (!('speechSynthesis' in window)) return;
+  window.speechSynthesis.cancel();
+  const langMap = { en: 'en-US', ar: 'ar-SA' };
+  const segments = text.split(/(?<=[.!?؟])\s+/).filter(Boolean);
+  segments.forEach((segment) => {
+    const utterance = new SpeechSynthesisUtterance(segment);
+    utterance.lang = langMap[langKey] || 'en-US';
+    utterance.rate = 1.0; utterance.pitch = 1.0;
+    window.speechSynthesis.speak(utterance);
+  });
+}