muxmind-ai 2.1.1

package/.env.example

@@ -0,0 +1,11 @@
+# MuxMind AI — Local Environment Configuration
+# Copy this file to ".env" and adjust as needed.
+# NOTE: Provider API keys are NOT set here — they are entered by each user
+# directly into the in-browser API Vault (stored in localStorage only).
+
+PORT=8080
+
+# Set to "off" to disable Node cluster mode and run a single process
+# (useful for debugging).
+MUXMIND_CLUSTER=on
+MUXMIND_PASSWORD=muxmind2026

package/README.md

@@ -0,0 +1,81 @@
+# MuxMind AI — v2.0
+
+Multi-provider AI orchestration: 12 free/paid providers, a smart single-
+model-per-reply router with automatic failover, persistent local chat
+history, an image generation studio, full Arabic/English UI (with RTL),
+in-app password management, and a multi-core Node.js backend.
+
+## Quick Start
+
+```bash
+npm install
+cp .env.example .env
+npm start
+```
+
+Then open **http://localhost:8080**. First login uses password
+`muxmind2026` unless you set `MUXMIND_PASSWORD` in `.env` before first
+boot — either way, change it any time from **Settings → Change password**
+once you're signed in.
+
+## How It Works
+
+1. **API Vault** — Click "🔐 API Vault" in the top bar. Add a provider
+   (OpenAI, Anthropic, Groq, Gemini, OpenRouter, Mistral, DeepSeek, xAI,
+   Cohere, Together AI, Cerebras, Perplexity), give it a label, paste your
+   key. The app immediately runs a live health-check (a real completion
+   probe, not just a listing call) and keeps only the models that actually
+   respond — the Smart Token Saver only ever routes to these proven-live
+   models, never a guessed one.
+2. **Keys stay local** — Every key is stored exclusively in your browser's
+   `localStorage`. Nothing is written to disk on the server (except the
+   hashed login password, see below) and nothing is committed to the repo.
+3. **One model per reply** — Each answer is streamed start-to-finish from a
+   single chosen model. If that model errors out *before* producing any
+   text, the router fails over cleanly to the next-best live candidate —
+   answers are never stitched together out of multiple models.
+4. **Chat history** — Every conversation is auto-saved to the left sidebar
+   (local browser storage), searchable, renameable by first message, and
+   deletable individually or all at once from Settings.
+5. **Image Studio** — Generate images from any OpenAI or Gemini key already
+   in your Vault, from the 🎨 rail icon.
+6. **File attachments** — `.js .html .css .py .pdf .txt .png .jpg .json .md`
+   are supported via the 📎 button; click any attached file chip (before or
+   after sending) to open it in the in-app viewer.
+7. **Language** — Toggle English/Arabic from Settings; Arabic switches the
+   whole UI to RTL.
+8. **TTS** — Cycle the 🔇/🔊 button to hear responses read aloud in English
+   or Arabic via the browser's Web Speech API.
+
+## Project Structure
+
+```
+muxmind-ai/
+├── package.json
+├── server.js                # Clustered Express backend
+├── index.html                # App shell markup
+├── style.css                  # Glassmorphism styling (dark/light/RTL)
+├── src-client/
+│   ├── app.js                 # Client application logic
+│   └── i18n.js                # EN/AR dictionary + RTL switcher
+└── src/
+    ├── config.js               # Provider catalog & fallback chain
+    ├── api-manager.js          # Vault health-check logic
+    ├── router.js                # Single-model-per-reply routing + failover
+    ├── image-engine.js          # Image generation (OpenAI/Gemini)
+    ├── auth.js                  # Login + in-app password change (hashed)
+    ├── tts-engine.js             # Speech job builder (AR/EN)
+    ├── file-parser.js            # Upload parsing/validation
+    └── ui-render.js              # Task tracker + SVG status icon helpers
+```
+
+## Notes
+
+- The server never reads provider keys from `process.env` for chat
+  requests — only `PORT`, `MUXMIND_CLUSTER`, and the *initial* login
+  password seed are read from `.env`.
+- The login password is stored as a salted hash in a local, gitignored
+  `.muxmind-auth.json` file, created on first boot. Changing it from
+  Settings updates that file directly — no restart needed.
+- Set `MUXMIND_CLUSTER=off` in `.env` to run a single process while
+  debugging.

package/bin/cli.js

@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+/**
+ * MuxMind AI — CLI launcher
+ * Entry point when the package is installed globally and run as
+ * `muxmind-ai` (or via `npx muxmind-ai`). Starts the local server and
+ * opens the app in the user's default browser.
+ *
+ * Flags:
+ *   --port <n>        Port to listen on (default 8080, or $PORT)
+ *   --no-open          Don't auto-open the browser
+ *   --cluster          Use one worker process per CPU core (default: off,
+ *                       single process — simplest for a personal/local tool)
+ */
+
+'use strict';
+
+const path = require('path');
+const { spawn } = require('child_process');
+
+const args = process.argv.slice(2);
+
+function getFlagValue(flag) {
+  const idx = args.indexOf(flag);
+  if (idx === -1) return null;
+  return args[idx + 1];
+}
+
+const port = getFlagValue('--port') || process.env.PORT || '8080';
+const shouldOpen = !args.includes('--no-open');
+const useCluster = args.includes('--cluster');
+
+if (args.includes('--help') || args.includes('-h')) {
+  console.log(`
+MuxMind AI — Multi-Provider AI Orchestration Engine
+
+Usage:
+  muxmind-ai [options]
+
+Options:
+  --port <n>     Port to run on (default: 8080)
+  --no-open      Don't automatically open your browser
+  --cluster      Run one worker per CPU core (default: single process)
+  -h, --help     Show this help message
+
+On first run, a login screen appears. Default password: muxmind2026
+(set MUXMIND_PASSWORD in your environment before first run to choose your
+own, or change it later from the in-app Settings page.)
+`);
+  process.exit(0);
+}
+
+const serverPath = path.join(__dirname, '..', 'server.js');
+
+const child = spawn(process.execPath, [serverPath], {
+  stdio: 'inherit',
+  env: {
+    ...process.env,
+    PORT: port,
+    MUXMIND_CLUSTER: useCluster ? 'on' : 'off',
+  },
+});
+
+const url = `http://localhost:${port}`;
+
+if (shouldOpen) {
+  // Give the server a moment to bind before opening the browser.
+  setTimeout(() => openBrowser(url), 900);
+}
+
+console.log(`\n[MuxMind AI] Starting on ${url} ...\n`);
+
+function openBrowser(target) {
+  const platform = process.platform;
+  let cmd, cmdArgs;
+
+  if (platform === 'darwin') {
+    cmd = 'open';
+    cmdArgs = [target];
+  } else if (platform === 'win32') {
+    cmd = 'cmd';
+    cmdArgs = ['/c', 'start', '""', target];
+  } else {
+    cmd = 'xdg-open';
+    cmdArgs = [target];
+  }
+
+  try {
+    spawn(cmd, cmdArgs, { stdio: 'ignore', detached: true }).unref();
+  } catch {
+    // Non-fatal — just means the user opens the URL manually.
+    console.log(`[MuxMind AI] Open ${target} in your browser to continue.`);
+  }
+}
+
+child.on('exit', (code) => process.exit(code ?? 0));
+
+process.on('SIGINT', () => { child.kill('SIGINT'); });
+process.on('SIGTERM', () => { child.kill('SIGTERM'); });

package/index.html

@@ -0,0 +1,293 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>MuxMind AI — Enterprise Orchestration Engine</title>
+<link rel="icon" type="image/png" href="assets/favicon.png" />
+<link rel="stylesheet" href="style.css" />
+</head>
+<body>
+
+<!-- ===================== LOGIN SCREEN ===================== -->
+<div class="login-screen" id="login-screen">
+  <div class="login-card">
+    <div class="logo-wrap logo-chip" id="login-logo" style="width:72px;height:72px;padding:12px;"></div>
+    <h1 data-i18n="login.title">MuxMind AI</h1>
+    <p data-i18n="login.subtitle">Enterprise Orchestration Engine — sign in to continue</p>
+    <form class="login-form" id="login-form">
+      <input type="password" id="login-password" data-i18n-placeholder="login.password" placeholder="Password" autocomplete="current-password" required />
+      <button type="submit" data-i18n="login.unlock">Unlock</button>
+      <div class="login-error" id="login-error"></div>
+    </form>
+    <div class="login-hint" data-i18n="login.hint">
+      First run only: default password is <strong>muxmind2026</strong>. Change it any time from Settings once signed in.
+    </div>
+  </div>
+</div>
+
+<!-- ===================== APP SHELL ===================== -->
+<div class="app-shell hidden" id="app-shell">
+
+  <!-- ===================== LEFT ICON RAIL ===================== -->
+  <nav class="rail">
+    <div class="rail-logo logo-chip" id="rail-logo" style="width:34px;height:34px;padding:5px;"></div>
+    <button class="rail-btn active" id="rail-chat" title="Chat" data-page="chat" data-i18n-title="rail.chat">💬</button>
+    <button class="rail-btn" id="rail-image" title="Image Studio" data-page="image" data-i18n-title="rail.image">🎨</button>
+    <button class="rail-btn" id="rail-providers" title="Providers" data-page="providers" data-i18n-title="rail.providers">🔌</button>
+    <button class="rail-btn" id="rail-map" title="Network Map" data-page="map" data-i18n-title="rail.map">🗺️</button>
+    <div class="rail-spacer"></div>
+    <button class="rail-btn" id="rail-settings" title="Settings" data-page="settings" data-i18n-title="rail.settings">⚙️</button>
+    <button class="rail-btn" id="rail-logout" title="Log out" data-i18n-title="rail.logout">🔒</button>
+  </nav>
+
+  <!-- ===================== CHAT HISTORY RAIL ===================== -->
+  <aside class="history-rail" id="history-rail">
+    <div class="history-header">
+      <h3 data-i18n="history.title">Chats</h3>
+    </div>
+    <div style="padding:0 12px 8px;">
+      <button class="btn-new-chat" id="btn-new-chat">➕ <span data-i18n="history.new">New chat</span></button>
+    </div>
+    <div class="history-search">
+      <input type="text" id="history-search-input" data-i18n-placeholder="history.search" placeholder="Search chats..." />
+    </div>
+    <div class="history-list" id="history-list"></div>
+  </aside>
+
+  <div class="page-container">
+
+    <!-- ===================== TOP NAVIGATION BAR ===================== -->
+    <header class="top-nav">
+      <div class="brand" style="display:flex;align-items:center;gap:8px;">
+        <button class="btn-toggle-history" id="btn-toggle-history" title="Toggle chat list">☰</button>
+        MuxMind AI <span style="color:var(--text-muted); font-weight:400; font-size:0.75rem;">v2.0</span>
+      </div>
+
+      <div class="nav-controls">
+        <select id="model-selector-dropdown" title="Model / Routing Mode">
+          <option value="auto" data-i18n="nav.smartRouting">🧠 Smart Auto-Routing</option>
+        </select>
+
+        <button id="btn-tts-toggle" class="nav-btn" title="Text-to-Speech" data-state="mute">🔇 Mute</button>
+
+        <span id="status-badge">[Engine: Idle | Savings: 0%]</span>
+
+        <button id="btn-api-manager" class="nav-btn">🔐 <span data-i18n="nav.vault">API Vault</span></button>
+        <button id="btn-clear-chat" class="icon-btn" title="Clear chat">🗑️</button>
+      </div>
+    </header>
+
+    <!-- ===================== CHAT PAGE ===================== -->
+    <div class="page-view active" id="page-chat">
+      <div class="chat-area">
+        <div id="chat-messages" class="chat-messages">
+          <div class="empty-state" id="empty-state">
+            <div class="glow-title">MuxMind AI</div>
+            <p data-i18n="chat.emptyHint">Configure your provider keys in the API Vault, then start chatting.<br/>
+            The smart router picks the best model for each reply and fails over automatically if a provider goes down.</p>
+          </div>
+          <button class="jump-latest" id="jump-latest" data-i18n="chat.jumpLatest">↓ New messages</button>
+        </div>
+
+        <div class="input-toolbar">
+          <div class="file-chip-row" id="file-chip-row"></div>
+
+          <div class="input-wrap">
+            <div class="toolbar-icons">
+              <button id="btn-attach" title="Attach file">📎</button>
+              <input type="file" id="file-upload-input" multiple hidden
+                accept=".js,.html,.css,.py,.pdf,.txt,.png,.jpg,.jpeg,.json,.md" />
+            </div>
+
+            <textarea id="user-prompt-input" rows="1" data-i18n-placeholder="chat.placeholder" placeholder="Ask MuxMind anything..."></textarea>
+
+            <div class="toolbar-icons">
+              <button id="btn-mic" title="Voice input" data-state="idle">🎤</button>
+              <button id="btn-stop" title="Stop generation">⏹️</button>
+              <button id="btn-send" title="Send">➤</button>
+            </div>
+          </div>
+
+          <div class="compression-row">
+            <span data-i18n="chat.tokenSaver">Smart Token Saver</span>
+            <input type="range" id="token-compression-slider" min="0" max="99" value="50" step="1" />
+            <span id="compression-value">Balanced (50%)</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ===================== IMAGE STUDIO PAGE ===================== -->
+    <div class="page-view" id="page-image">
+      <div class="page-scroll">
+        <div class="page-header">
+          <h1 data-i18n="image.title">🎨 Image Studio</h1>
+          <p data-i18n="image.subtitle">Generate images using an OpenAI or Gemini key from your Vault.</p>
+        </div>
+        <div class="imagegen-panel">
+          <form class="imagegen-form" id="imagegen-form">
+            <select id="imagegen-provider"></select>
+            <textarea id="imagegen-prompt" data-i18n-placeholder="image.promptPlaceholder" placeholder="Describe the image you want..." rows="1"></textarea>
+            <button type="submit" id="imagegen-submit" data-i18n="image.generate">Generate</button>
+          </form>
+          <div id="imagegen-results" class="imagegen-results"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ===================== PROVIDERS PAGE ===================== -->
+    <div class="page-view" id="page-providers">
+      <div class="page-scroll">
+        <div class="page-header">
+          <h1 data-i18n="providers.title">🔌 Providers</h1>
+          <p data-i18n="providers.subtitle">Where to get an API key for each provider MuxMind can orchestrate — free and paid. Add the key in the Vault once you have it.</p>
+        </div>
+        <div class="provider-grid" id="provider-grid"></div>
+      </div>
+    </div>
+
+    <!-- ===================== NETWORK MAP PAGE ===================== -->
+    <div class="page-view" id="page-map">
+      <div class="map-page">
+        <div class="map-canvas-wrap" id="map-canvas-wrap">
+          <div id="map-logo-host" style="position:absolute; z-index:2;"></div>
+          <svg id="map-svg" width="100%" height="100%" style="position:absolute; inset:0;"></svg>
+          <div class="map-empty-state" id="map-empty-state">
+            <div class="map-empty-icon" id="map-empty-logo"></div>
+            <div data-i18n="map.empty">No providers connected yet. Add a key in the API Vault and it will appear here automatically.</div>
+          </div>
+          <div class="map-legend" id="map-legend" style="display:none;">
+            <div class="map-legend-item"><span class="map-legend-dot" style="background:var(--accent-green);"></span> <span data-i18n="map.active">Active provider</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ===================== SETTINGS PAGE ===================== -->
+    <div class="page-view" id="page-settings">
+      <div class="page-scroll">
+        <div class="page-header">
+          <h1 data-i18n="settings.title">⚙️ Settings</h1>
+          <p data-i18n="settings.subtitle">Appearance, language, security, and session preferences.</p>
+        </div>
+
+        <div class="settings-section">
+          <h3 data-i18n="settings.appearance">Appearance</h3>
+          <div class="settings-row">
+            <div class="settings-row-label"><strong data-i18n="settings.theme">Theme</strong><span data-i18n="settings.themeDesc">Switch between dark and light interface.</span></div>
+            <div class="theme-toggle" id="theme-toggle">
+              <button data-theme-choice="dark" id="theme-btn-dark">🌙 <span data-i18n="settings.dark">Dark</span></button>
+              <button data-theme-choice="light" id="theme-btn-light">☀️ <span data-i18n="settings.light">Light</span></button>
+            </div>
+          </div>
+          <div class="settings-row">
+            <div class="settings-row-label"><strong data-i18n="settings.language">Language</strong><span data-i18n="settings.languageDesc">Switch the interface language.</span></div>
+            <div class="lang-toggle" id="lang-toggle">
+              <button data-lang-choice="en" id="lang-btn-en">English</button>
+              <button data-lang-choice="ar" id="lang-btn-ar">العربية</button>
+            </div>
+          </div>
+        </div>
+
+        <div class="settings-section">
+          <h3 data-i18n="settings.security">Security</h3>
+          <div class="settings-row">
+            <div class="settings-row-label"><strong data-i18n="settings.session">Session</strong><span data-i18n="settings.sessionDesc">You're currently signed in on this device.</span></div>
+            <button class="settings-btn danger" id="btn-settings-logout" data-i18n="rail.logout">Log out</button>
+          </div>
+          <div class="settings-row" style="flex-direction:column; align-items:flex-start;">
+            <div class="settings-row-label"><strong data-i18n="settings.changePassword">Change password</strong><span data-i18n="settings.changePasswordDesc">Update your login password right here — no server restart needed.</span></div>
+            <form class="password-form" id="password-form">
+              <input type="password" id="pw-current" data-i18n-placeholder="settings.currentPassword" placeholder="Current password" autocomplete="current-password" required />
+              <input type="password" id="pw-new" data-i18n-placeholder="settings.newPassword" placeholder="New password (min 6 chars)" autocomplete="new-password" required minlength="6" />
+              <input type="password" id="pw-confirm" data-i18n-placeholder="settings.confirmPassword" placeholder="Confirm new password" autocomplete="new-password" required minlength="6" />
+              <button type="submit" data-i18n="settings.updatePassword">Update Password</button>
+              <div class="form-msg" id="pw-form-msg"></div>
+            </form>
+          </div>
+          <div class="settings-row">
+            <div class="settings-row-label"><strong data-i18n="settings.clearVault">Clear local vault</strong><span data-i18n="settings.clearVaultDesc">Removes all saved provider keys from this browser.</span></div>
+            <button class="settings-btn danger" id="btn-clear-vault" data-i18n="settings.clearVaultBtn">Clear Vault</button>
+          </div>
+          <div class="settings-row">
+            <div class="settings-row-label"><strong data-i18n="settings.clearHistory">Clear chat history</strong><span data-i18n="settings.clearHistoryDesc">Deletes all saved conversations from this browser.</span></div>
+            <button class="settings-btn danger" id="btn-clear-history" data-i18n="settings.clearHistoryBtn">Clear History</button>
+          </div>
+        </div>
+
+        <div class="settings-section">
+          <h3 data-i18n="settings.smartRouter">Smart Router</h3>
+          <div class="settings-row">
+            <div class="settings-row-label"><strong data-i18n="settings.singleModel">Single model per reply</strong><span data-i18n="settings.singleModelDesc">Each answer is generated by one model start-to-finish — never a mix of models in the same reply.</span></div>
+            <span style="color:var(--accent-green); font-size:0.8rem;">● <span data-i18n="settings.enabled">Enabled</span></span>
+          </div>
+          <div class="settings-row">
+            <div class="settings-row-label"><strong data-i18n="settings.autoTier">Auto tier-matching</strong><span data-i18n="settings.autoTierDesc">Router estimates task complexity and prefers a matching model tier automatically.</span></div>
+            <span style="color:var(--accent-green); font-size:0.8rem;">● <span data-i18n="settings.enabled">Enabled</span></span>
+          </div>
+          <div class="settings-row">
+            <div class="settings-row-label"><strong data-i18n="settings.liveOnly">Live models only</strong><span data-i18n="settings.liveOnlyDesc">Only keys that pass a real completion probe are ever used to route a request.</span></div>
+            <span style="color:var(--accent-green); font-size:0.8rem;">● <span data-i18n="settings.enabled">Enabled</span></span>
+          </div>
+          <div class="settings-row">
+            <div class="settings-row-label"><strong data-i18n="settings.adaptiveFallback">Adaptive fallback</strong><span data-i18n="settings.adaptiveFallbackDesc">If a model fails before producing output, MuxMind fails over to the next best live model.</span></div>
+            <span style="color:var(--accent-green); font-size:0.8rem;">● <span data-i18n="settings.enabled">Enabled</span></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <!-- ===================== SIDE VAULT PANEL ===================== -->
+  <div class="vault-overlay" id="vault-overlay"></div>
+  <aside class="vault-panel" id="vault-panel">
+    <div class="vault-header">
+      <h2 data-i18n="vault.title">🔐 API Key Vault</h2>
+      <button class="icon-btn" id="btn-vault-close">✕</button>
+    </div>
+    <div class="vault-body">
+      <div class="vault-note" data-i18n="vault.note">
+        Keys are stored <strong>only</strong> in this browser's local storage. Each key is validated with a
+        real completion probe (not just a listing check) so only genuinely callable models appear —
+        this eliminates false "404" model entries. Nothing is committed to the repo or sent anywhere except
+        directly to the provider you choose.
+      </div>
+
+      <form class="vault-form" id="vault-form">
+        <label for="vault-provider" data-i18n="vault.provider">Provider</label>
+        <select id="vault-provider"></select>
+
+        <label for="vault-label" data-i18n="vault.label">Custom Label</label>
+        <input type="text" id="vault-label" data-i18n-placeholder="vault.labelPlaceholder" placeholder="e.g. My Groq Key" />
+
+        <label for="vault-key" data-i18n="vault.key">API Key</label>
+        <input type="password" id="vault-key" data-i18n-placeholder="vault.keyPlaceholder" placeholder="Paste your API key" required />
+
+        <button type="submit" data-i18n="vault.save">➕ Save &amp; Smart-Validate</button>
+      </form>
+
+      <div id="vault-entries"></div>
+    </div>
+  </aside>
+
+</div>
+
+<!-- ===================== FILE VIEWER MODAL ===================== -->
+<div class="modal-overlay" id="file-viewer-overlay">
+  <div class="file-viewer-modal">
+    <div class="file-viewer-header">
+      <h3 id="file-viewer-title">File</h3>
+      <button class="icon-btn" id="file-viewer-close">✕</button>
+    </div>
+    <div class="file-viewer-body" id="file-viewer-body"></div>
+  </div>
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script src="src-client/i18n.js"></script>
+<script src="src-client/app.js"></script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "muxmind-ai",
+  "version": "2.1.1",
+  "description": "MuxMind AI - Multi-Provider AI Orchestration Engine with smart routing, failover, voice input, and image generation.",
+  "main": "server.js",
+  "type": "commonjs",
+  "bin": {
+    "muxmind-ai": "bin/cli.js"
+  },
+  "files": [
+    "bin/",
+    "src/",
+    "src-client/",
+    "assets/",
+    "server.js",
+    "index.html",
+    "style.css",
+    ".env.example",
+    "README.md"
+  ],
+  "scripts": {
+    "start": "node server.js",
+    "dev": "node server.js"
+  },
+  "dependencies": {
+    "express": "^4.19.2",
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.5",
+    "express-rate-limit": "^7.4.0",
+    "multer": "^1.4.5-lts.1"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "keywords": [
+    "ai",
+    "chat",
+    "llm",
+    "openai",
+    "anthropic",
+    "gemini",
+    "multi-provider",
+    "cli",
+    "orchestration"
+  ],
+  "license": "MIT"
+}