muxmind-ai 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muxmind-ai",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "MuxMind AI - Multi-Provider AI Orchestration Engine with smart routing, failover, voice input, and image generation.",
   "main": "server.js",
   "type": "commonjs",
@@ -27,7 +27,7 @@
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
     "express-rate-limit": "^7.4.0",
-    "multer": "^1.4.5-lts.1"
+    "multer": "^2.0.1"
   },
   "engines": {
     "node": ">=18.0.0"

package/server.js

@@ -114,6 +114,8 @@ function startWorker() {
       keyConsoleUrl: p.keyConsoleUrl,
       docsUrl: p.docsUrl,
       keyPrefix: p.keyPrefix,
+      free: !!p.free,
+      tierNote: p.tierNote || '',
     }));
     res.json({ ok: true, providers: list });
   });

package/src/config.js

@@ -21,6 +21,8 @@ const PROVIDERS = {
     keyConsoleUrl: 'https://platform.openai.com/api-keys',
     docsUrl: 'https://platform.openai.com/docs/api-reference',
     keyPrefix: 'sk-',
+    free: false,
+    tierNote: 'Paid — usage-based billing, no ongoing free tier',
   },
   anthropic: {
     id: 'anthropic',
@@ -34,6 +36,8 @@ const PROVIDERS = {
     keyConsoleUrl: 'https://console.anthropic.com/settings/keys',
     docsUrl: 'https://docs.claude.com',
     keyPrefix: 'sk-ant-',
+    free: false,
+    tierNote: 'Paid — small free trial credit for new accounts',
   },
   groq: {
     id: 'groq',
@@ -47,6 +51,8 @@ const PROVIDERS = {
     keyConsoleUrl: 'https://console.groq.com/keys',
     docsUrl: 'https://console.groq.com/docs',
     keyPrefix: 'gsk_',
+    free: true,
+    tierNote: 'Free tier — generous rate limits, no card required',
   },
   gemini: {
     id: 'gemini',
@@ -61,6 +67,8 @@ const PROVIDERS = {
     keyConsoleUrl: 'https://aistudio.google.com/app/apikey',
     docsUrl: 'https://ai.google.dev/gemini-api/docs',
     keyPrefix: 'AIza',
+    free: true,
+    tierNote: 'Free tier via Google AI Studio',
   },
   openrouter: {
     id: 'openrouter',
@@ -74,6 +82,8 @@ const PROVIDERS = {
     keyConsoleUrl: 'https://openrouter.ai/settings/keys',
     docsUrl: 'https://openrouter.ai/docs',
     keyPrefix: 'sk-or-',
+    free: true,
+    tierNote: 'Free ":free" model pool + paid models on the same key',
   },
   mistral: {
     id: 'mistral',
@@ -87,6 +97,8 @@ const PROVIDERS = {
     keyConsoleUrl: 'https://console.mistral.ai/api-keys',
     docsUrl: 'https://docs.mistral.ai',
     keyPrefix: '',
+    free: true,
+    tierNote: 'Free experiment tier available on signup',
   },
   deepseek: {
     id: 'deepseek',
@@ -100,6 +112,8 @@ const PROVIDERS = {
     keyConsoleUrl: 'https://platform.deepseek.com/api_keys',
     docsUrl: 'https://api-docs.deepseek.com',
     keyPrefix: 'sk-',
+    free: false,
+    tierNote: 'Paid — very low per-token pricing',
   },
   xai: {
     id: 'xai',
@@ -113,6 +127,8 @@ const PROVIDERS = {
     keyConsoleUrl: 'https://console.x.ai',
     docsUrl: 'https://docs.x.ai',
     keyPrefix: 'xai-',
+    free: false,
+    tierNote: 'Paid — usage-based billing',
   },
   cohere: {
     id: 'cohere',
@@ -126,6 +142,8 @@ const PROVIDERS = {
     keyConsoleUrl: 'https://dashboard.cohere.com/api-keys',
     docsUrl: 'https://docs.cohere.com',
     keyPrefix: '',
+    free: true,
+    tierNote: 'Free trial key with rate limits, no card required',
   },
   together: {
     id: 'together',
@@ -139,6 +157,8 @@ const PROVIDERS = {
     keyConsoleUrl: 'https://api.together.xyz/settings/api-keys',
     docsUrl: 'https://docs.together.ai',
     keyPrefix: '',
+    free: true,
+    tierNote: 'Free-tagged models available alongside paid ones',
   },
   cerebras: {
     id: 'cerebras',
@@ -152,6 +172,8 @@ const PROVIDERS = {
     keyConsoleUrl: 'https://cloud.cerebras.ai',
     docsUrl: 'https://inference-docs.cerebras.ai',
     keyPrefix: 'csk-',
+    free: true,
+    tierNote: 'Free tier — fast inference, daily request caps',
   },
   perplexity: {
     id: 'perplexity',
@@ -165,11 +187,88 @@ const PROVIDERS = {
     keyConsoleUrl: 'https://www.perplexity.ai/settings/api',
     docsUrl: 'https://docs.perplexity.ai',
     keyPrefix: 'pplx-',
+    free: false,
+    tierNote: 'Paid — usage-based billing',
+  },
+  huggingface: {
+    id: 'huggingface',
+    label: 'Hugging Face',
+    color: '#ffcc4d',
+    baseUrl: 'https://api-inference.huggingface.co',
+    modelsEndpoint: '/models',
+    chatEndpoint: '/v1/chat/completions',
+    authHeader: (key) => ({ Authorization: `Bearer ${key}` }),
+    defaultModels: ['meta-llama/Llama-3.1-8B-Instruct', 'Qwen/Qwen2.5-7B-Instruct'],
+    keyConsoleUrl: 'https://huggingface.co/settings/tokens',
+    docsUrl: 'https://huggingface.co/docs/api-inference',
+    keyPrefix: 'hf_',
+    free: true,
+    tierNote: 'Free Inference API tier with monthly credits',
+  },
+  fireworks: {
+    id: 'fireworks',
+    label: 'Fireworks AI',
+    color: '#6620ff',
+    baseUrl: 'https://api.fireworks.ai/inference/v1',
+    modelsEndpoint: '/models',
+    chatEndpoint: '/chat/completions',
+    authHeader: (key) => ({ Authorization: `Bearer ${key}` }),
+    defaultModels: ['accounts/fireworks/models/llama-v3p1-8b-instruct'],
+    keyConsoleUrl: 'https://fireworks.ai/api-keys',
+    docsUrl: 'https://docs.fireworks.ai',
+    keyPrefix: 'fw_',
+    free: true,
+    tierNote: 'Free trial credits on signup',
+  },
+  deepinfra: {
+    id: 'deepinfra',
+    label: 'DeepInfra',
+    color: '#00b894',
+    baseUrl: 'https://api.deepinfra.com/v1/openai',
+    modelsEndpoint: '/models',
+    chatEndpoint: '/chat/completions',
+    authHeader: (key) => ({ Authorization: `Bearer ${key}` }),
+    defaultModels: ['meta-llama/Meta-Llama-3.1-8B-Instruct'],
+    keyConsoleUrl: 'https://deepinfra.com/dash/api_keys',
+    docsUrl: 'https://deepinfra.com/docs',
+    keyPrefix: '',
+    free: true,
+    tierNote: 'Free trial credits, then low pay-as-you-go pricing',
+  },
+  githubmodels: {
+    id: 'githubmodels',
+    label: 'GitHub Models',
+    color: '#24292e',
+    baseUrl: 'https://models.inference.ai.azure.com',
+    modelsEndpoint: '/models',
+    chatEndpoint: '/chat/completions',
+    authHeader: (key) => ({ Authorization: `Bearer ${key}` }),
+    defaultModels: ['gpt-4o-mini', 'Meta-Llama-3.1-8B-Instruct'],
+    keyConsoleUrl: 'https://github.com/marketplace/models',
+    docsUrl: 'https://docs.github.com/en/github-models',
+    keyPrefix: 'github_pat_',
+    free: true,
+    tierNote: 'Free with a GitHub account, rate-limited playground',
+  },
+  novita: {
+    id: 'novita',
+    label: 'Novita AI',
+    color: '#6c5ce7',
+    baseUrl: 'https://api.novita.ai/v3/openai',
+    modelsEndpoint: '/models',
+    chatEndpoint: '/chat/completions',
+    authHeader: (key) => ({ Authorization: `Bearer ${key}` }),
+    defaultModels: ['meta-llama/llama-3.1-8b-instruct'],
+    keyConsoleUrl: 'https://novita.ai/settings/key-management',
+    docsUrl: 'https://novita.ai/docs',
+    keyPrefix: '',
+    free: true,
+    tierNote: 'Free trial credits on signup',
   },
 };
 
 // Priority order for the staggered round-robin token optimizer.
-const FALLBACK_CHAIN = ['groq', 'cerebras', 'gemini', 'deepseek', 'mistral', 'together', 'xai', 'cohere', 'openai', 'anthropic', 'perplexity', 'openrouter'];
+const FALLBACK_CHAIN = ['groq', 'cerebras', 'gemini', 'deepseek', 'mistral', 'together', 'huggingface', 'fireworks', 'deepinfra', 'githubmodels', 'novita', 'xai', 'cohere', 'openai', 'anthropic', 'perplexity', 'openrouter'];
 
 // Providers with a documented image-generation endpoint we can drive from
 // the same vault key the user already validated for chat.

package/src-client/app.js

@@ -375,36 +375,68 @@ function rebuildModelSelector() {
 // PROVIDERS PAGE
 // ==========================================================================
 
+function buildProviderCard(id, meta) {
+  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 ${meta.free ? 'is-free' : 'is-paid'}`;
+
+  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>`;
+
+  const badgeLabel = meta.free ? t('providers.freeBadge') : t('providers.paidBadge');
+  const badgeClass = meta.free ? 'badge-free' : 'badge-paid';
+
+  card.innerHTML = `
+    <div class="provider-card-top">
+      <span class="provider-dot" style="background:${meta.color}"></span>
+      <h3>${escapeHtml(meta.label)}</h3>
+      <span class="provider-tier-badge ${badgeClass}">${badgeLabel}</span>
+    </div>
+    <span class="prefix">Key format: ${escapeHtml(meta.keyPrefix || 'varies')}...</span>
+    ${meta.tierNote ? `<span class="tier-note">${escapeHtml(meta.tierNote)}</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>
+  `;
+  return card;
+}
+
 function renderProvidersPage() {
   const grid = $('provider-grid');
+  if (!grid) return;
   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>
+  const ids = Object.keys(PROVIDER_META);
+  const freeIds = ids.filter((id) => PROVIDER_META[id].free);
+  const paidIds = ids.filter((id) => !PROVIDER_META[id].free);
+
+  const buildSection = (titleKey, descKey, sectionClass, sectionIds) => {
+    if (sectionIds.length === 0) return null;
+    const section = document.createElement('div');
+    section.className = `provider-section ${sectionClass}`;
+    section.innerHTML = `
+      <div class="provider-section-header">
+        <h2>${t(titleKey)}</h2>
+        <p>${t(descKey)}</p>
       </div>
+      <div class="provider-section-grid"></div>
     `;
-    grid.appendChild(card);
-  }
+    const sectionGrid = section.querySelector('.provider-section-grid');
+    for (const id of sectionIds) {
+      sectionGrid.appendChild(buildProviderCard(id, PROVIDER_META[id]));
+    }
+    return section;
+  };
+
+  const freeSection = buildSection('providers.freeSection', 'providers.freeSectionDesc', 'section-free', freeIds);
+  const paidSection = buildSection('providers.paidSection', 'providers.paidSectionDesc', 'section-paid', paidIds);
+  if (freeSection) grid.appendChild(freeSection);
+  if (paidSection) grid.appendChild(paidSection);
 }
 
 // ==========================================================================
@@ -449,6 +481,38 @@ function buildWavyPath(x1, y1, x2, y2, { waves = 3, amplitude = 10 } = {}) {
   return d;
 }
 
+// Node positions persist across re-renders (and across sessions) so a
+// user's manual drag layout isn't reset every time a key is verified.
+const MAP_LAYOUT_KEY = 'muxmind_map_layout_v1';
+let mapNodePositions = loadMapLayout();
+let mapDragState = null;
+
+function loadMapLayout() {
+  try { return JSON.parse(localStorage.getItem(MAP_LAYOUT_KEY) || '{}'); } catch { return {}; }
+}
+function persistMapLayout() {
+  localStorage.setItem(MAP_LAYOUT_KEY, JSON.stringify(mapNodePositions));
+}
+
+function showMapTooltip(el, html) {
+  let tip = $('map-tooltip');
+  if (!tip) {
+    tip = document.createElement('div');
+    tip.id = 'map-tooltip';
+    tip.className = 'map-tooltip';
+    document.body.appendChild(tip);
+  }
+  tip.innerHTML = html;
+  tip.classList.add('visible');
+  const rect = el.getBoundingClientRect();
+  tip.style.left = `${rect.left + rect.width / 2}px`;
+  tip.style.top = `${rect.top - 12}px`;
+}
+function hideMapTooltip() {
+  const tip = $('map-tooltip');
+  if (tip) tip.classList.remove('visible');
+}
+
 function renderNetworkMap() {
   const wrap = $('map-canvas-wrap');
   const svg = $('map-svg');
@@ -469,7 +533,12 @@ function renderNetworkMap() {
   }
 
   emptyState.style.display = 'none';
-  legend.style.display = 'block';
+  legend.style.display = 'flex';
+  legend.innerHTML = `
+    <div class="map-legend-item"><span class="map-legend-dot" style="background:var(--accent-green);"></span> <span>${t('map.legendFree')}</span></div>
+    <div class="map-legend-item"><span class="map-legend-dot" style="background:var(--accent-amber);"></span> <span>${t('map.legendPaid')}</span></div>
+    <div class="map-legend-hint">${t('map.hint')}</div>
+  `;
 
   const w = wrap.clientWidth || 800;
   const h = wrap.clientHeight || 500;
@@ -484,34 +553,121 @@ function renderNetworkMap() {
   logoHost.style.top = `${cy - logoSize / 2}px`;
   injectLogo(logoHost, logoSize);
 
-  let linesHtml = '';
+  // Resolve each node's position: a saved drag position if present and
+  // still in-bounds, otherwise the default ring layout.
+  const positions = {};
+  configuredIds.forEach((id, i) => {
+    const saved = mapNodePositions[id];
+    if (saved && saved.nx <= 1 && saved.ny <= 1) {
+      positions[id] = { x: saved.nx * w, y: saved.ny * h };
+    } else {
+      const angle = (i / n) * Math.PI * 2 - Math.PI / 2;
+      positions[id] = { x: cx + radius * Math.cos(angle), y: cy + radius * Math.sin(angle) };
+    }
+  });
+
+  let defsHtml = `<defs>
+    <radialGradient id="mapCoreGlow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="var(--accent-cyan)" stop-opacity="0.28"/>
+      <stop offset="100%" stop-color="var(--accent-cyan)" stop-opacity="0"/>
+    </radialGradient>
+  </defs>`;
+  let linesHtml = `<circle cx="${cx}" cy="${cy}" r="${radius * 1.5}" fill="url(#mapCoreGlow)"/>`;
   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);
+  configuredIds.forEach((id) => {
     const meta = PROVIDER_META[id];
     if (!meta) return;
+    const { x: nx, y: ny } = positions[id];
     const entry = vault.find((v) => v.providerId === id && v.status === 'active');
     const modelName = entry?.activeModel || entry?.models?.[0]?.id || '';
+    const tierColor = meta.free ? 'var(--accent-green)' : 'var(--accent-amber)';
 
     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>`;
+    // Traveling pulse along each connection for a "live traffic" feel.
+    linesHtml += `<circle r="3.2" fill="${meta.color}">
+      <animateMotion dur="${(2.6 + Math.random() * 1.6).toFixed(2)}s" repeatCount="indefinite" path="${wavyD}"/>
+    </circle>`;
 
     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 class="map-node" data-provider-id="${id}" transform="translate(${nx},${ny})" style="cursor:grab;">
+        <circle r="30" fill="${meta.color}" opacity="0.14" stroke="${meta.color}" stroke-width="1.5">
+          <animate attributeName="r" values="30;33;30" dur="3s" repeatCount="indefinite"/>
+        </circle>
+        <circle r="5.5" fill="${meta.color}"/>
+        <circle r="2" fill="${tierColor}" cx="9" cy="-9"/>
+        <text y="46" text-anchor="middle" font-size="12" fill="var(--text-primary)" font-family="Segoe UI, sans-serif" font-weight="700">${escapeHtml(meta.label)}</text>
+        <text y="60" text-anchor="middle" font-size="9" fill="${tierColor}" font-family="monospace">${t('map.online')}</text>
+        ${modelName ? `<text y="72" text-anchor="middle" font-size="8" fill="var(--text-muted)" font-family="monospace">${escapeHtml(modelName.slice(0, 22))}</text>` : ''}
       </g>`;
   });
 
-  svg.innerHTML = linesHtml + nodesHtml;
+  svg.innerHTML = defsHtml + linesHtml + nodesHtml;
+
+  // --- Interactivity: drag to reposition, hover for detail tooltip, click
+  // (without drag) to jump into the Vault for that provider. ---
+  svg.querySelectorAll('.map-node').forEach((nodeEl) => {
+    const id = nodeEl.dataset.providerId;
+    const meta = PROVIDER_META[id];
+    const entry = vault.find((v) => v.providerId === id && v.status === 'active');
+
+    nodeEl.addEventListener('mouseenter', () => {
+      if (mapDragState) return;
+      const badge = meta.free ? t('providers.freeBadge') : t('providers.paidBadge');
+      showMapTooltip(nodeEl, `
+        <strong>${escapeHtml(meta.label)}</strong> <span class="map-tooltip-badge">${badge}</span>
+        <div>${t('map.status')}: <span style="color:var(--accent-green)">${t('map.online')}</span></div>
+        ${entry?.activeModel ? `<div>${t('map.model')}: ${escapeHtml(entry.activeModel)}</div>` : ''}
+      `);
+    });
+    nodeEl.addEventListener('mouseleave', () => { if (!mapDragState) hideMapTooltip(); });
+    nodeEl.addEventListener('mousedown', (e) => startNodeDrag(e, id, nodeEl));
+    nodeEl.addEventListener('touchstart', (e) => startNodeDrag(e, id, nodeEl), { passive: true });
+    nodeEl.addEventListener('click', () => {
+      if (nodeEl._didDrag) { nodeEl._didDrag = false; return; }
+      hideMapTooltip();
+      $('btn-api-manager')?.click();
+    });
+  });
+}
+
+function startNodeDrag(evt, id, nodeEl) {
+  const svg = $('map-svg');
+  const wrap = $('map-canvas-wrap');
+  if (!svg || !wrap) return;
+  nodeEl.style.cursor = 'grabbing';
+  hideMapTooltip();
+  mapDragState = { id, nodeEl };
+
+  const rect = wrap.getBoundingClientRect();
+  const w = rect.width, h = rect.height;
+
+  const move = (e) => {
+    mapDragState.moved = true;
+    const point = e.touches ? e.touches[0] : e;
+    const x = Math.max(20, Math.min(w - 20, point.clientX - rect.left));
+    const y = Math.max(20, Math.min(h - 20, point.clientY - rect.top));
+    nodeEl.setAttribute('transform', `translate(${x},${y})`);
+    mapNodePositions[id] = { nx: x / w, ny: y / h };
+  };
+  const up = () => {
+    if (mapDragState?.moved) nodeEl._didDrag = true;
+    persistMapLayout();
+    nodeEl.style.cursor = 'grab';
+    mapDragState = null;
+    document.removeEventListener('mousemove', move);
+    document.removeEventListener('mouseup', up);
+    document.removeEventListener('touchmove', move);
+    document.removeEventListener('touchend', up);
+    renderNetworkMap();
+  };
+  document.addEventListener('mousemove', move);
+  document.addEventListener('mouseup', up);
+  document.addEventListener('touchmove', move, { passive: true });
+  document.addEventListener('touchend', up);
 }
 
 window.addEventListener('resize', () => {
@@ -613,6 +769,8 @@ function setupHistoryUI() {
 }
 
 function startNewChat() {
+  // Make sure the chat we're leaving is safely on disk before we clear it.
+  if (conversation.length > 0) saveActiveChat();
   activeChatId = null;
   clearChatUIOnly();
   renderHistoryList();
@@ -643,6 +801,37 @@ function saveActiveChat() {
   renderHistoryList();
 }
 
+// While an assistant reply is streaming in, persist the in-progress text
+// every couple of seconds (throttled) so closing the tab mid-stream never
+// loses the conversation — only the final few chunks are ever at risk.
+let _partialSaveTimer = null;
+function schedulePartialSave(partialText) {
+  if (_partialSaveTimer) return;
+  _partialSaveTimer = setTimeout(() => {
+    _partialSaveTimer = null;
+    const snapshot = [...conversation, { role: 'assistant', content: partialText }];
+    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: snapshot };
+    if (existingIdx >= 0) chatHistory[existingIdx] = record;
+    else chatHistory.push(record);
+    persistHistory();
+  }, 1500);
+}
+
+// Final safety net: flush whatever we have the instant the tab is hidden,
+// backgrounded, or closed — covers mobile app-switching and desktop
+// tab-close alike (visibilitychange fires reliably in both cases, unlike
+// beforeunload on some mobile browsers).
+function flushChatOnExit() {
+  try { saveActiveChat(); } catch {}
+}
+document.addEventListener('visibilitychange', () => {
+  if (document.visibilityState === 'hidden') flushChatOnExit();
+});
+window.addEventListener('pagehide', flushChatOnExit);
+window.addEventListener('beforeunload', flushChatOnExit);
+
 function loadChat(chatId) {
   const record = chatHistory.find((c) => c.id === chatId);
   if (!record) return;
@@ -968,6 +1157,10 @@ async function sendMessage() {
   attachedFiles = [];
   renderFileChips();
 
+  // Persist immediately so the message survives a closed tab / crash even
+  // before the assistant reply finishes streaming.
+  saveActiveChat();
+
   appendTypingIndicator();
   setStreamingState(true);
 
@@ -1020,6 +1213,7 @@ async function sendMessage() {
           accumulatedText += data.text;
           assistantBubble.textContent = accumulatedText;
           scrollToBottomIfAllowed();
+          schedulePartialSave(accumulatedText);
         } else if (eventType === 'provider') {
           providersUsed.add(`${data.provider}:${data.model}`);
           setStatus('streaming', `Engine: ${data.provider} → ${data.model}`);
@@ -1097,6 +1291,7 @@ function clearChatUIOnly() {
 }
 
 function clearChat() {
+  if (conversation.length > 0) saveActiveChat();
   clearChatUIOnly();
   activeChatId = null;
   renderHistoryList();

package/src-client/i18n.js

@@ -47,10 +47,22 @@ const I18N_DICT = {
     'providers.getKey': 'Get API Key ↗',
     'providers.docs': 'Docs ↗',
     'providers.noKey': 'No key configured yet',
+    'providers.freeSection': '🆓 Free Providers',
+    'providers.freeSectionDesc': 'No card required to start — generous free tiers or trial credits.',
+    'providers.paidSection': '💳 Paid Providers',
+    'providers.paidSectionDesc': 'Usage-based billing — best raw quality and highest limits.',
+    'providers.freeBadge': 'Free',
+    'providers.paidBadge': 'Paid',
     'map.empty': 'No providers connected yet. Add a key in the API Vault and it will appear here automatically.',
     'map.active': 'Active provider',
     'map.notConfigured': 'NOT CONFIGURED',
     'map.online': 'ONLINE',
+    'map.hint': 'Drag to rearrange · hover a node for details · click to open in Vault',
+    'map.legendFree': 'Free provider',
+    'map.legendPaid': 'Paid provider',
+    'map.model': 'Model',
+    'map.status': 'Status',
+    'map.tier': 'Tier',
     'settings.title': '⚙️ Settings',
     'settings.subtitle': 'Appearance, language, security, and session preferences.',
     'settings.appearance': 'Appearance',
@@ -140,6 +152,18 @@ const I18N_DICT = {
     'providers.getKey': 'احصل على مفتاح ↗',
     'providers.docs': 'التوثيق ↗',
     'providers.noKey': 'لم يُضَف مفتاح بعد',
+    'providers.freeSection': '🆓 مزوّدون مجانيون',
+    'providers.freeSectionDesc': 'لا تحتاج بطاقة دفع للبدء — حدود مجانية سخية أو رصيد تجريبي.',
+    'providers.paidSection': '💳 مزوّدون مدفوعون',
+    'providers.paidSectionDesc': 'فوترة حسب الاستخدام — أفضل جودة وأعلى الحدود.',
+    'providers.freeBadge': 'مجاني',
+    'providers.paidBadge': 'مدفوع',
+    'map.hint': 'اسحب لإعادة الترتيب · مرّر المؤشر لرؤية التفاصيل · اضغط لفتح الخزنة',
+    'map.legendFree': 'مزوّد مجاني',
+    'map.legendPaid': 'مزوّد مدفوع',
+    'map.model': 'النموذج',
+    'map.status': 'الحالة',
+    'map.tier': 'الفئة',
     'map.empty': 'لا يوجد مزوّدون متصلون بعد. أضف مفتاحًا في خزنة API وسيظهر هنا تلقائيًا.',
     'map.active': 'مزوّد نشط',
     'map.notConfigured': 'غير مُهيّأ',

package/style.css

@@ -481,31 +481,85 @@ select#model-selector-dropdown {
 .page-header h1 { font-size: 1.4rem; margin-bottom: 6px; }
 .page-header p { color: var(--text-secondary); font-size: 0.88rem; }
 
-.provider-grid {
+.provider-section { margin-bottom: 32px; }
+.provider-section:last-child { margin-bottom: 0; }
+
+.provider-section-header { margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
+.provider-section-header h2 {
+  font-size: 1.05rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+.provider-section-header p { color: var(--text-secondary); font-size: 0.82rem; }
+
+.provider-section.section-free .provider-section-header h2 { color: var(--accent-green); }
+.provider-section.section-paid .provider-section-header h2 { color: var(--accent-amber); }
+
+.provider-section-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 16px;
 }
 
 .provider-card {
+  position: relative;
   background: var(--bg-panel);
   backdrop-filter: blur(14px);
   border: 1px solid var(--border-glass);
   border-radius: var(--radius-lg);
   padding: 18px;
   display: flex; flex-direction: column; gap: 10px;
-  transition: transform 0.18s ease, box-shadow 0.18s ease;
+  overflow: hidden;
+  transition: transform 0.2s cubic-bezier(.2,.8,.2,1), box-shadow 0.2s ease, border-color 0.2s ease;
 }
 
-.provider-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow); }
+.provider-card::before {
+  content: '';
+  position: absolute; inset: 0;
+  background: linear-gradient(135deg, rgba(255,255,255,0.05), transparent 60%);
+  pointer-events: none;
+}
+
+.provider-card:hover {
+  transform: translateY(-4px) scale(1.01);
+  box-shadow: var(--shadow-glow), var(--shadow-deep);
+  border-color: var(--accent-cyan-dim);
+}
+
+.provider-card.is-free:hover { border-color: rgba(46,230,166,0.45); }
+.provider-card.is-paid:hover { border-color: rgba(255,176,32,0.45); }
 
 .provider-card-top { display: flex; align-items: center; gap: 10px; }
 
-.provider-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
+.provider-dot {
+  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
+  box-shadow: 0 0 10px currentColor;
+}
+
+.provider-card h3 { font-size: 1rem; flex: 1; }
 
-.provider-card h3 { font-size: 1rem; }
+.provider-tier-badge {
+  font-size: 0.62rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 3px 9px;
+  border-radius: 20px;
+  flex-shrink: 0;
+}
+.provider-tier-badge.badge-free {
+  background: linear-gradient(135deg, rgba(46,230,166,0.22), rgba(46,230,166,0.08));
+  color: var(--accent-green);
+  border: 1px solid rgba(46,230,166,0.4);
+}
+.provider-tier-badge.badge-paid {
+  background: linear-gradient(135deg, rgba(255,176,32,0.22), rgba(255,176,32,0.08));
+  color: var(--accent-amber);
+  border: 1px solid rgba(255,176,32,0.4);
+}
 
 .provider-card .prefix { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
+.provider-card .tier-note { font-size: 0.74rem; color: var(--text-secondary); line-height: 1.4; }
 
 .provider-card-links { display: flex; gap: 8px; margin-top: auto; }
 
@@ -687,7 +741,54 @@ select#model-selector-dropdown {
   position: relative;
   display: flex; align-items: center; justify-content: center;
   overflow: hidden;
+  border-radius: var(--radius-lg);
+  background:
+    radial-gradient(circle at 50% 45%, rgba(0,242,254,0.05), transparent 60%),
+    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
+  background-size: auto, 34px 34px, 34px 34px;
+  border: 1px solid var(--border-glass);
+}
+[data-theme="light"] .map-canvas-wrap {
+  background:
+    radial-gradient(circle at 50% 45%, rgba(0,144,168,0.05), transparent 60%),
+    linear-gradient(rgba(10,20,40,0.035) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(10,20,40,0.035) 1px, transparent 1px);
+  background-size: auto, 34px 34px, 34px 34px;
+}
+
+.map-node { transition: filter 0.15s ease; }
+.map-node:hover { filter: brightness(1.25); }
+
+.map-tooltip {
+  position: fixed;
+  transform: translate(-50%, -100%);
+  background: var(--bg-panel-solid);
+  border: 1px solid var(--accent-cyan-dim);
+  border-radius: var(--radius-sm);
+  padding: 10px 14px;
+  font-size: 0.76rem;
+  color: var(--text-primary);
+  box-shadow: var(--shadow-deep), var(--shadow-glow);
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease;
+  z-index: 50;
+  white-space: nowrap;
 }
+.map-tooltip.visible { opacity: 1; visibility: visible; }
+.map-tooltip strong { color: var(--accent-cyan); }
+.map-tooltip-badge {
+  font-size: 0.6rem;
+  font-weight: 800;
+  padding: 1px 7px;
+  border-radius: 10px;
+  background: rgba(0,242,254,0.12);
+  color: var(--accent-cyan);
+  margin-inline-start: 6px;
+}
+.map-tooltip div { color: var(--text-secondary); margin-top: 2px; }
 
 .map-legend {
   position: absolute; bottom: 20px; left: 20px;
@@ -699,10 +800,13 @@ select#model-selector-dropdown {
   font-size: 0.74rem;
   color: var(--text-secondary);
   display: flex; flex-direction: column; gap: 6px;
+  box-shadow: var(--shadow-deep);
 }
+[dir="rtl"] .map-legend { left: auto; right: 20px; }
 
 .map-legend-item { display: flex; align-items: center; gap: 8px; }
-.map-legend-dot { width: 9px; height: 9px; border-radius: 50%; }
+.map-legend-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
+.map-legend-hint { font-size: 0.68rem; color: var(--text-muted); border-top: 1px solid var(--border-glass); padding-top: 6px; margin-top: 2px; }
 
 /* ---------------------------------------------------------------------- */
 /* Empty state                                                            */