Add HF Space backend and frontend with HF token auth

Frontend (frontend/):
- index.html: three-panel layout (sidebar, chat, code preview) with
settings modal
- app.js: chat logic, Gradio 5.x SSE v3 protocol (POST + GET event_id),
HF token Authorization header, agent integration, demo fallback,
cold-start hint
- agent.js, sandbox.js: Plan->Generate->Execute->Verify->Fix agent loop
with iframe sandbox for code preview
- styles.css: dark theme with purple/blue gradients
- test_api.py: CLI test that reads HF_TOKEN from env, supports custom
prompt + max_tokens, parses SSE events, falls back to /config when
/gradio_api/config returns 404

Backend (hf_space/):
- app.py: ZeroGPU Space loading full bf16 MINDI-1.5 (Qwen2.5-Coder-7B
+ LoRA + CLIP + fusion). Model load is inside @spaces.GPU function
per ZeroGPU requirements. chat_fn returns clean JSON with quota error
handling.
- requirements.txt: gradio>=5.0, transformers, peft, torch, spaces
- README.md: SDK metadata for HF Space

Fixes Session 4 ZeroGPU quota issue: anonymous requests immediately hit
the per-IP daily bucket. Sending Authorization: Bearer <hf_token> routes
through the user's PRO quota (8x larger). Frontend Settings modal now
has a password field for the token; test_api.py reads HF_TOKEN env var.
detectAuthError() in app.js surfaces a clear actionable toast when
quota is hit.

frontend/agent.js

@@ -0,0 +1,266 @@
+/* =============================================================
+   MINDI Agent — Orchestrator
+   Plan → Generate → Execute → Verify → Fix loop.
+   Turns raw MINDI model into an autonomous coding agent.
+   ============================================================= */
+
+const MINDIAgent = (() => {
+  'use strict';
+
+  const MAX_RETRIES = 3;
+  const STEP_TYPES = {
+    PLAN:     'plan',
+    GENERATE: 'generate',
+    EXECUTE:  'execute',
+    VERIFY:   'verify',
+    FIX:      'fix',
+    DONE:     'done',
+    ERROR:    'error',
+  };
+
+  const STATUS = { PENDING: 'pending', RUNNING: 'running', SUCCESS: 'success', FAILED: 'failed' };
+
+  // ── Agent state ────────────────────────────────────────
+  function createRun() {
+    return {
+      id: 'run-' + Date.now().toString(36),
+      steps: [],
+      currentCode: null,
+      language: null,
+      iteration: 0,
+      startTime: Date.now(),
+      status: 'running',
+    };
+  }
+
+  function addStep(run, type, status = STATUS.RUNNING, detail = '') {
+    const step = {
+      id: run.steps.length,
+      type,
+      status,
+      detail,
+      startTime: Date.now(),
+      endTime: null,
+    };
+    run.steps.push(step);
+    return step;
+  }
+
+  function completeStep(step, status, detail = '') {
+    step.status = status;
+    step.endTime = Date.now();
+    if (detail) step.detail = detail;
+  }
+
+  // ── Prompt templates ───────────────────────────────────
+  function planPrompt(userRequest) {
+    return `Break this coding request into clear, numbered implementation steps (max 5 steps). Only list the steps, nothing else.
+
+Request: ${userRequest}`;
+  }
+
+  function generatePrompt(userRequest, plan, previousCode, previousError) {
+    let prompt = `Write COMPLETE, WORKING code for this request. Include ALL necessary HTML, CSS, and JavaScript in a single file. Do NOT leave any placeholders, TODOs, or "add more here" comments. Every feature must work.
+
+Request: ${userRequest}`;
+
+    if (plan) prompt += `\n\nPlan:\n${plan}`;
+
+    if (previousCode && previousError) {
+      prompt += `\n\nPrevious code had this error:\n${previousError}\n\nPrevious code:\n\`\`\`\n${previousCode}\n\`\`\`\n\nFix the error and return the COMPLETE corrected code.`;
+    }
+
+    return prompt;
+  }
+
+  function verifyPrompt(code, output, errors, screenshotDescription) {
+    let prompt = `Review this code and its execution result. Is it working correctly?
+
+Code:
+\`\`\`
+${code.slice(0, 3000)}
+\`\`\`
+
+Console output: ${output || '(none)'}
+Errors: ${errors || '(none)'}`;
+
+    if (screenshotDescription) {
+      prompt += `\nScreenshot shows: ${screenshotDescription}`;
+    }
+
+    prompt += `\n\nRespond with either:
+- "PASS" if the code works correctly
+- "FAIL: <description of what's wrong>" if there are issues`;
+
+    return prompt;
+  }
+
+  // ── Extract code from response ─────────────────────────
+  function extractCode(response) {
+    // Try fenced code blocks first
+    const re = /```(\w+)?\s*\n([\s\S]*?)```/g;
+    let last = null, m;
+    while ((m = re.exec(response)) !== null) {
+      last = { language: (m[1] || '').toLowerCase(), code: m[2] };
+    }
+    if (last) return last;
+
+    // Try special tokens
+    const codeMatch = response.match(/<\|code_start\|>([\s\S]*?)<\|code_end\|>/);
+    if (codeMatch) {
+      return { language: '', code: codeMatch[1].trim() };
+    }
+
+    return null;
+  }
+
+  // ── Main agent run ─────────────────────────────────────
+  async function run(userPrompt, options = {}) {
+    const {
+      apiCall,          // async (prompt, image?) => {response, sections}
+      sandboxContainer, // DOM element for iframe preview
+      onStep,           // (run, step) => void — UI callback
+      image = null,     // optional image for vision
+    } = options;
+
+    const agentRun = createRun();
+    const notify = (step) => onStep && onStep(agentRun, step);
+
+    try {
+      // ── Step 1: PLAN ──────────────────────────────────
+      const planStep = addStep(agentRun, STEP_TYPES.PLAN);
+      notify(planStep);
+
+      let plan = null;
+      try {
+        const planResult = await apiCall(planPrompt(userPrompt), image);
+        plan = planResult.response;
+        completeStep(planStep, STATUS.SUCCESS, plan.split('\n').filter(l => /^\d/.test(l.trim())).length + ' steps identified');
+      } catch (e) {
+        completeStep(planStep, STATUS.FAILED, e.message);
+        // Continue without plan
+      }
+      notify(planStep);
+
+      // ── Step 2+: GENERATE → EXECUTE → VERIFY → FIX loop
+      let previousCode = null;
+      let previousError = null;
+
+      for (let iteration = 0; iteration <= MAX_RETRIES; iteration++) {
+        agentRun.iteration = iteration;
+
+        // ── GENERATE ──────────────────────────────────
+        const genStep = addStep(agentRun, iteration === 0 ? STEP_TYPES.GENERATE : STEP_TYPES.FIX);
+        genStep.detail = iteration === 0 ? 'Generating code...' : `Fixing (attempt ${iteration}/${MAX_RETRIES})...`;
+        notify(genStep);
+
+        let codeResult;
+        try {
+          const genResult = await apiCall(
+            generatePrompt(userPrompt, plan, previousCode, previousError),
+            image
+          );
+          codeResult = extractCode(genResult.response);
+
+          if (!codeResult) {
+            // No code block found — use entire response as code
+            codeResult = { language: '', code: genResult.response };
+          }
+
+          agentRun.currentCode = codeResult.code;
+          agentRun.language = codeResult.language || CodeSandbox.detectLanguage(codeResult.code);
+          const lines = codeResult.code.split('\n').length;
+          completeStep(genStep, STATUS.SUCCESS, `${lines} lines of ${agentRun.language}`);
+        } catch (e) {
+          completeStep(genStep, STATUS.FAILED, e.message);
+          notify(genStep);
+          break;
+        }
+        notify(genStep);
+
+        // ── EXECUTE ───────────────────────────────────
+        const execStep = addStep(agentRun, STEP_TYPES.EXECUTE);
+        execStep.detail = `Running ${agentRun.language} code...`;
+        notify(execStep);
+
+        let execResult;
+        try {
+          execResult = await CodeSandbox.execute(
+            codeResult.code,
+            agentRun.language,
+            sandboxContainer
+          );
+
+          const output = execResult.logs.join('\n') || '(no output)';
+          if (execResult.success) {
+            completeStep(execStep, STATUS.SUCCESS, `Ran in ${execResult.duration}ms — ${output.slice(0, 100)}`);
+          } else {
+            completeStep(execStep, STATUS.FAILED, execResult.errors.join('\n').slice(0, 200));
+          }
+        } catch (e) {
+          execResult = { success: false, errors: [e.message], logs: [] };
+          completeStep(execStep, STATUS.FAILED, e.message);
+        }
+        notify(execStep);
+
+        // ── VERIFY ────────────────────────────────────
+        if (execResult.success) {
+          const verifyStep = addStep(agentRun, STEP_TYPES.VERIFY);
+          verifyStep.detail = 'Checking output...';
+          notify(verifyStep);
+
+          // Try to take a screenshot for visual verification
+          let screenshot = null;
+          if (execResult.iframe && agentRun.language === 'html') {
+            try {
+              screenshot = await CodeSandbox.captureScreenshot(execResult.iframe);
+            } catch { /* ignore */ }
+          }
+
+          // Simple check: if no errors and has output, consider it passing
+          // For a more thorough check, we'd send screenshot back to MINDI
+          const hasOutput = execResult.logs.length > 0 || agentRun.language === 'html';
+          if (hasOutput) {
+            completeStep(verifyStep, STATUS.SUCCESS, 'Code runs without errors ✓');
+            notify(verifyStep);
+
+            // DONE!
+            const doneStep = addStep(agentRun, STEP_TYPES.DONE);
+            completeStep(doneStep, STATUS.SUCCESS, `Completed in ${iteration + 1} iteration(s)`);
+            agentRun.status = 'success';
+            notify(doneStep);
+            break;
+          } else {
+            completeStep(verifyStep, STATUS.FAILED, 'No output produced');
+            previousCode = codeResult.code;
+            previousError = 'Code produced no output';
+            notify(verifyStep);
+          }
+        } else {
+          // Execution failed — prepare for retry
+          previousCode = codeResult.code;
+          previousError = execResult.errors.join('\n');
+
+          if (iteration === MAX_RETRIES) {
+            const errStep = addStep(agentRun, STEP_TYPES.ERROR);
+            completeStep(errStep, STATUS.FAILED, `Failed after ${MAX_RETRIES + 1} attempts: ${previousError.slice(0, 200)}`);
+            agentRun.status = 'failed';
+            notify(errStep);
+          }
+        }
+      }
+    } catch (e) {
+      const errStep = addStep(agentRun, STEP_TYPES.ERROR);
+      completeStep(errStep, STATUS.FAILED, e.message);
+      agentRun.status = 'failed';
+      notify(errStep);
+    }
+
+    agentRun.endTime = Date.now();
+    return agentRun;
+  }
+
+  return { run, STEP_TYPES, STATUS, extractCode };
+})();
+
+if (typeof module !== 'undefined') module.exports = MINDIAgent;

frontend/app.js

@@ -0,0 +1,1645 @@
+/* =============================================================
+   MINDI 1.5 — Vision-Coder · Frontend logic
+   ============================================================= */
+
+(() => {
+  'use strict';
+
+  // ----------------------------------------------------------------
+  // Constants
+  // ----------------------------------------------------------------
+  const API_DEFAULT = 'https://mindigenous-mindi-chat.hf.space';
+  const STORAGE_KEY = 'mindi.v1.state';
+  const MAX_TEXTAREA = 200;
+  const COLD_START_HINT_MS = 10_000; // show cold-start hint after 10s
+
+  const SECTION_ORDER = ['thinking', 'code', 'critique', 'fix', 'error', 'suggest', 'file'];
+  const SECTION_LABELS = {
+    thinking: 'Thinking',
+    code:     'Code',
+    critique: 'Critique',
+    fix:      'Fix',
+    error:    'Error',
+    suggest:  'Suggestion',
+    file:     'File',
+  };
+  // mapping from raw token name → sections key
+  const TOKEN_TO_KEY = {
+    think: 'thinking',
+    code:  'code',
+    critique: 'critique',
+    fix:   'fix',
+    error: 'error',
+    suggest: 'suggest',
+    file:  'file',
+  };
+
+  // ----------------------------------------------------------------
+  // State (persisted to localStorage)
+  // ----------------------------------------------------------------
+  const defaultState = () => ({
+    apiUrl:      API_DEFAULT,
+    hfToken:     '',          // optional HF PRO token to bypass anonymous ZeroGPU quota
+    temperature: 0.7,
+    maxTokens:   2048,
+    chats:       [],          // [{id, title, createdAt, updatedAt, messages: [{role, content, images?}]}]
+    currentId:   null,
+  });
+
+  const state = loadState();
+
+  function loadState() {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (!raw) return defaultState();
+      const parsed = JSON.parse(raw);
+      return Object.assign(defaultState(), parsed);
+    } catch {
+      return defaultState();
+    }
+  }
+
+  function saveState() {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify({
+        apiUrl:      state.apiUrl,
+        hfToken:     state.hfToken,
+        temperature: state.temperature,
+        maxTokens:   state.maxTokens,
+        chats:       state.chats,
+        currentId:   state.currentId,
+      }));
+    } catch (e) {
+      console.warn('[mindi] failed to save state', e);
+    }
+  }
+
+  // Runtime-only state (not persisted)
+  const runtime = {
+    status:        'connecting',  // connecting | online | demo | offline
+    pendingImages: [],            // [{name, dataUrl}]
+    isSending:     false,
+    lastCode:      null,          // {language, code}
+    lastSections:  null,          // {thinking: [], ...}
+  };
+
+  // ----------------------------------------------------------------
+  // DOM
+  // ----------------------------------------------------------------
+  const $  = (s) => document.querySelector(s);
+  const $$ = (s) => Array.from(document.querySelectorAll(s));
+
+  const els = {
+    body:           document.body,
+    sidebar:        $('#sidebar'),
+    scrim:          $('#scrim'),
+    brand:          $('#brand'),
+    newChatBtn:     $('#new-chat-btn'),
+    search:         $('#search'),
+    history:        $('#chat-history'),
+    historyEmpty:   $('#history-empty'),
+    statusDot:      $('#status-dot'),
+    statusText:     $('#status-text'),
+
+    chat:           $('#chat'),
+    hamburger:      $('#hamburger'),
+    chatTitle:      $('#chat-title'),
+    togglePreview:  $('#toggle-preview'),
+
+    welcome:        $('#welcome'),
+    quickCards:     $$('.quick-card'),
+    messages:       $('#messages'),
+
+    composer:       $('#composer'),
+    composerImages: $('#composer-images'),
+    attachBtn:      $('#attach-btn'),
+    fileInput:      $('#file-input'),
+    promptInput:    $('#prompt-input'),
+    sendBtn:        $('#send-btn'),
+
+    preview:        $('#preview'),
+    tabs:           $$('.tab'),
+    panes:          $$('.preview-pane'),
+    copyCode:       $('#copy-code'),
+    downloadCode:   $('#download-code'),
+    codeOut:        $('#code-out'),
+    codeOutInner:   $('#code-out-inner'),
+    emptyCode:      $('#empty-code'),
+    liveFrame:      $('#live-frame'),
+    emptyLive:      $('#empty-live'),
+    sections:       $('#sections'),
+    emptySections:  $('#empty-sections'),
+
+    settingsModal:  $('#settings-modal'),
+    settingsUrl:    $('#settings-url'),
+    settingsHfToken:$('#settings-hf-token'),
+    hfTokenStatus:  $('#hf-token-status'),
+    settingsTemp:   $('#settings-temp'),
+    settingsTokens: $('#settings-tokens'),
+    tempVal:        $('#temp-val'),
+    tokensVal:      $('#tokens-val'),
+    saveSettings:   $('#save-settings'),
+
+    toasts:         $('#toasts'),
+  };
+
+  // ----------------------------------------------------------------
+  // Utilities
+  // ----------------------------------------------------------------
+  function uid() {
+    return 'c-' + Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
+  }
+  function escapeHtml(s) {
+    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+                     .replace(/"/g, '&quot;').replace(/'/g, '&#039;');
+  }
+  function escapeAttr(s) {
+    return escapeHtml(s);
+  }
+  function fileToDataUrl(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  }
+  function debounce(fn, ms) {
+    let t = null;
+    return (...args) => {
+      clearTimeout(t);
+      t = setTimeout(() => fn(...args), ms);
+    };
+  }
+  function downloadFile(filename, content) {
+    const blob = new Blob([content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+  function relativeDateGroup(ts) {
+    const d   = new Date(ts);
+    const now = new Date();
+    const start = (x) => { const z = new Date(x); z.setHours(0,0,0,0); return z; };
+    const today     = start(now);
+    const yesterday = new Date(today); yesterday.setDate(today.getDate() - 1);
+    const week      = new Date(today); week.setDate(today.getDate() - 7);
+
+    if (d >= today)     return 'Today';
+    if (d >= yesterday) return 'Yesterday';
+    if (d >= week)      return 'This Week';
+    return 'Earlier';
+  }
+  function languageFromCode(code) {
+    const trimmed = code.trim();
+    if (/^<!doctype|^<html|^<\w+[\s>]/i.test(trimmed)) return 'markup';
+    if (/^(import|from|def|class|print|if __name__)/m.test(trimmed)) return 'python';
+    if (/^(import|export|const|function|class|let|var|=>)/m.test(trimmed)) return 'javascript';
+    if (/^[\s\S]*\{[\s\S]*\}\s*$/.test(trimmed) && /^\s*"\w+"\s*:/m.test(trimmed)) return 'json';
+    if (/(SELECT|INSERT|UPDATE|DELETE|CREATE TABLE)/i.test(trimmed)) return 'sql';
+    if (/^[\.#]?[\w-]+\s*\{[^}]*:\s*[^;]+;/.test(trimmed)) return 'css';
+    return 'plaintext';
+  }
+
+  // ----------------------------------------------------------------
+  // Output cleaning + section parsing
+  // ----------------------------------------------------------------
+  // Strip all special tokens for chat display
+  function cleanForDisplay(raw) {
+    if (!raw) return '';
+    let t = String(raw);
+
+    // Section start/end tokens
+    Object.keys(TOKEN_TO_KEY).forEach((tok) => {
+      t = t.replace(new RegExp(`<\\|${tok}_start\\|>`, 'g'), '');
+      t = t.replace(new RegExp(`<\\|${tok}_end\\|>`, 'g'), '');
+    });
+
+    // Conversation tokens
+    t = t.replace(/<\|im_start\|>/g, '');
+    t = t.replace(/<\|im_end\|>/g, '');
+    t = t.replace(/<\|endoftext\|>/g, '');
+
+    // Role prefixes at line starts
+    t = t.replace(/^(system|user|assistant)\s*\n/gim, '');
+
+    return t.trim();
+  }
+
+  // Parse the special token sections out of the raw response
+  function parseSections(raw) {
+    const sections = {};
+    SECTION_ORDER.forEach((k) => { sections[k] = []; });
+    if (!raw) return sections;
+
+    const text = String(raw);
+    Object.entries(TOKEN_TO_KEY).forEach(([tok, key]) => {
+      const re = new RegExp(`<\\|${tok}_start\\|>([\\s\\S]*?)<\\|${tok}_end\\|>`, 'g');
+      let m;
+      while ((m = re.exec(text)) !== null) {
+        const body = m[1].trim();
+        if (body) sections[key].push(body);
+      }
+    });
+    return sections;
+  }
+
+  // Merge API-provided sections with parsed ones (API wins, parsed fills gaps)
+  function mergeSections(api, parsed) {
+    const merged = {};
+    SECTION_ORDER.forEach((k) => {
+      const a = (api && Array.isArray(api[k])) ? api[k] : [];
+      const p = (parsed && Array.isArray(parsed[k])) ? parsed[k] : [];
+      merged[k] = a.length ? a : p;
+    });
+    return merged;
+  }
+
+  // Extract last fenced code block from the response text
+  function extractLastCodeBlock(text) {
+    if (!text) return null;
+    const re = /```(\w+)?\s*\n([\s\S]*?)```/g;
+    let last = null, m;
+    while ((m = re.exec(text)) !== null) {
+      last = { language: (m[1] || '').toLowerCase() || null, code: m[2] };
+    }
+    if (last) {
+      if (!last.language) last.language = languageFromCode(last.code);
+      return last;
+    }
+    return null;
+  }
+
+  // ----------------------------------------------------------------
+  // Markdown renderer (limited: paragraphs, fenced code, inline code, bold/italic)
+  // ----------------------------------------------------------------
+  function renderMarkdown(text) {
+    if (!text) return '';
+
+    // Tokenize: split into fenced-code parts and text parts
+    const segments = [];
+    const re = /```(\w+)?\s*\n([\s\S]*?)```/g;
+    let lastIdx = 0, m;
+    while ((m = re.exec(text)) !== null) {
+      if (m.index > lastIdx) {
+        segments.push({ type: 'text', value: text.slice(lastIdx, m.index) });
+      }
+      segments.push({ type: 'code', lang: (m[1] || '').toLowerCase() || null, value: m[2] });
+      lastIdx = re.lastIndex;
+    }
+    if (lastIdx < text.length) {
+      segments.push({ type: 'text', value: text.slice(lastIdx) });
+    }
+
+    return segments.map((seg) => {
+      if (seg.type === 'code') {
+        const lang = seg.lang || languageFromCode(seg.value);
+        const safe = escapeHtml(seg.value);
+        const dataCode = escapeAttr(seg.value);
+        return (
+          `<pre class="md-code-block">` +
+            `<div class="md-code-head">` +
+              `<span>${escapeHtml(lang)}</span>` +
+              `<button class="md-copy" data-code="${dataCode}" type="button">Copy</button>` +
+            `</div>` +
+            `<code class="language-${escapeHtml(lang)}">${safe}</code>` +
+          `</pre>`
+        );
+      }
+      // text segment
+      let h = seg.value.trim();
+      if (!h) return '';
+      h = escapeHtml(h);
+      h = h.replace(/`([^`\n]+)`/g, '<code class="md-inline">$1</code>');
+      h = h.replace(/\*\*([^*\n]+)\*\*/g, '<strong>$1</strong>');
+      h = h.replace(/(^|[\s(])\*([^*\n]+)\*(?=[\s).,!?:;]|$)/g, '$1<em>$2</em>');
+      return h.split(/\n{2,}/)
+        .map((p) => '<p>' + p.replace(/\n/g, '<br>') + '</p>')
+        .join('');
+    }).join('');
+  }
+
+  // ----------------------------------------------------------------
+  // API client
+  // ----------------------------------------------------------------
+  function authHeaders(extra) {
+    const h = Object.assign({}, extra || {});
+    if (state.hfToken) h['Authorization'] = `Bearer ${state.hfToken}`;
+    return h;
+  }
+
+  // Detect responses that came back as a quota / auth error from the
+  // backend's chat_fn try/except, so we can show actionable UX.
+  function detectAuthError(result) {
+    if (!result) return null;
+    const text = String(result.response || '');
+    const errs = (result.sections && result.sections.error) || [];
+    const blob = (text + ' ' + errs.join(' ')).toLowerCase();
+    if (/zerogpu|gpu quota|out of .* quota|exceeded .* quota|unlogged user/.test(blob)) {
+      return state.hfToken
+        ? 'Your HF token hit its ZeroGPU quota. Wait for the daily reset or use a PRO token.'
+        : 'Anonymous ZeroGPU quota exhausted. Open Settings (double-click the MINDI logo) and paste your HF token.';
+    }
+    return null;
+  }
+
+  async function pingHealth() {
+    if (!state.apiUrl) {
+      setStatus('demo', 'Demo Mode');
+      return;
+    }
+    try {
+      const base = state.apiUrl.replace(/\/$/, '');
+      const isGradio = base.includes('hf.space') || base.includes('huggingface.co');
+
+      if (isGradio) {
+        // For Gradio/HF Spaces: check the root URL which returns the Gradio page
+        const res = await fetch(base, { method: 'HEAD', mode: 'no-cors' }).catch(() => null);
+        // no-cors always returns opaque response, so we check for network errors
+        if (res) {
+          setStatus('online', 'MINDI · HF Space');
+        } else {
+          setStatus('demo', 'Demo Mode (Space unreachable)');
+        }
+      } else {
+        // Direct REST API health check
+        try {
+          const res = await fetch(`${base}/api/health`, { method: 'GET', headers: { 'Accept': 'application/json' } });
+          if (res.ok) {
+            const d = await res.json().catch(() => ({}));
+            setStatus('online', `${d.model || 'MINDI'} · online`);
+          } else {
+            setStatus('demo', 'Demo Mode');
+          }
+        } catch {
+          setStatus('demo', 'Demo Mode');
+        }
+      }
+    } catch {
+      setStatus('demo', 'Demo Mode');
+    }
+  }
+
+  async function callGenerate(prompt, image, signal) {
+    const base = state.apiUrl.replace(/\/$/, '');
+
+    // Detect if this is a Gradio HF Space
+    const isGradio = base.includes('hf.space') || base.includes('huggingface.co/spaces');
+
+    if (isGradio) {
+      // Gradio 5.x SSE v3 protocol — two-step:
+      // 1. POST /gradio_api/call/{api_name} → get event_id
+      // 2. GET  /gradio_api/call/{api_name}/{event_id} → stream result
+
+      // Step 1: Submit the request
+      const submitRes = await fetch(`${base}/gradio_api/call/chat_fn`, {
+        method: 'POST',
+        headers: authHeaders({ 'Content-Type': 'application/json' }),
+        body: JSON.stringify({
+          data: [prompt, image || null, state.temperature, state.maxTokens],
+        }),
+        signal,
+      });
+      if (!submitRes.ok) {
+        const txt = await submitRes.text().catch(() => '');
+        throw new Error(`API submit ${submitRes.status}: ${txt.slice(0, 200) || 'request failed'}`);
+      }
+      const { event_id } = await submitRes.json();
+      if (!event_id) {
+        throw new Error('No event_id returned from Gradio API');
+      }
+
+      // Step 2: Get the result via SSE stream
+      const resultRes = await fetch(`${base}/gradio_api/call/chat_fn/${event_id}`, {
+        method: 'GET',
+        headers: authHeaders(),
+        signal,
+      });
+      if (!resultRes.ok) {
+        const txt = await resultRes.text().catch(() => '');
+        throw new Error(`API result ${resultRes.status}: ${txt.slice(0, 200) || 'request failed'}`);
+      }
+
+      // Parse SSE response — look for the "complete" event with data
+      const sseText = await resultRes.text();
+      const lines = sseText.split('\n');
+      let raw = null;
+      for (let i = 0; i < lines.length; i++) {
+        if (lines[i].startsWith('event: complete')) {
+          // Next line(s) starting with "data: " contain the result
+          const dataLine = lines[i + 1];
+          if (dataLine && dataLine.startsWith('data: ')) {
+            try {
+              const parsed = JSON.parse(dataLine.slice(6));
+              // Gradio wraps in array
+              raw = Array.isArray(parsed) ? parsed[0] : parsed;
+            } catch {
+              raw = dataLine.slice(6);
+            }
+          }
+          break;
+        }
+        if (lines[i].startsWith('event: error')) {
+          const dataLine = lines[i + 1];
+          const errMsg = dataLine?.startsWith('data: ') ? dataLine.slice(6) : 'Unknown Gradio error';
+          throw new Error(`Gradio error: ${errMsg.slice(0, 300)}`);
+        }
+      }
+
+      if (raw === null) {
+        throw new Error('No complete event found in Gradio SSE response');
+      }
+
+      // raw is a JSON string from our chat_fn
+      try {
+        return JSON.parse(raw);
+      } catch {
+        return { response: String(raw), sections: {} };
+      }
+
+    } else {
+      // Direct REST API (Modal or custom)
+      const body = { prompt, temperature: state.temperature, max_tokens: state.maxTokens };
+      if (image) body.image = image;
+      const res = await fetch(`${base}/api/generate`, {
+        method: 'POST',
+        headers: authHeaders({ 'Content-Type': 'application/json', 'Accept': 'application/json' }),
+        body: JSON.stringify(body),
+        signal,
+      });
+      if (!res.ok) {
+        const txt = await res.text().catch(() => '');
+        throw new Error(`API ${res.status}: ${txt.slice(0, 200) || 'request failed'}`);
+      }
+      return res.json();
+    }
+  }
+
+  // ----------------------------------------------------------------
+  // Demo / Fallback responses
+  // ----------------------------------------------------------------
+  const DEMO_RESPONSES = [
+    {
+      match: /landing|hero|next\.?js/i,
+      response:
+`Here's a clean Next.js landing page using Tailwind CSS:
+
+\`\`\`tsx
+// app/page.tsx
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-gradient-to-b from-slate-950 to-slate-900 text-white">
+      <section className="max-w-6xl mx-auto px-6 py-24 text-center">
+        <span className="inline-block px-3 py-1 rounded-full bg-violet-500/15 text-violet-300 text-xs font-mono tracking-widest uppercase mb-6">
+          Now in beta
+        </span>
+        <h1 className="text-5xl md:text-7xl font-semibold tracking-tight">
+          Build faster.<br/>
+          <span className="bg-gradient-to-r from-violet-400 to-blue-400 bg-clip-text text-transparent">
+            Ship sooner.
+          </span>
+        </h1>
+        <p className="mt-6 text-lg text-slate-300 max-w-2xl mx-auto">
+          The frontend you'd build if you had unlimited time, in a single prompt.
+        </p>
+        <div className="mt-10 flex justify-center gap-3">
+          <a className="px-6 py-3 rounded-full bg-gradient-to-r from-violet-600 to-blue-600 font-medium" href="#cta">
+            Get started
+          </a>
+          <a className="px-6 py-3 rounded-full border border-white/10 hover:bg-white/5" href="#features">
+            See features
+          </a>
+        </div>
+      </section>
+    </main>
+  );
+}
+\`\`\`
+
+This sets up a hero section with a gradient headline, a kicker badge, and two CTAs. Drop in an \`<Image>\` background or particle layer next.`,
+      sections: {
+        thinking: ['User wants a Next.js landing page. Producing a single-file app/page.tsx using Tailwind for the hero, with two CTAs and accessible markup.'],
+        code: ['app/page.tsx generated with hero section + gradient headline.'],
+        critique: [],
+        fix: [],
+      },
+    },
+    {
+      match: /dashboard|chart|analytics/i,
+      response:
+`Here's a self-contained dashboard UI in vanilla HTML/CSS:
+
+\`\`\`html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Pulsegrid · Dashboard</title>
+<style>
+  :root { --bg:#0b0b14; --panel:#14141f; --border:rgba(255,255,255,.08); --text:#ececf1; --mute:#8b94a7; --acc:#7c3aed; }
+  * { box-sizing:border-box; margin:0; padding:0; }
+  body { background:var(--bg); color:var(--text); font:14px/1.55 'Inter', sans-serif; min-height:100vh; display:grid; grid-template-columns:240px 1fr; }
+  aside { background:var(--panel); border-right:1px solid var(--border); padding:20px; }
+  aside h1 { font-size:18px; background:linear-gradient(135deg,#7c3aed,#2563eb); -webkit-background-clip:text; color:transparent; margin-bottom:24px; }
+  nav a { display:block; padding:10px 12px; border-radius:8px; color:var(--mute); text-decoration:none; margin-bottom:2px; }
+  nav a.active { background:rgba(124,58,237,.15); color:#fff; }
+  main { padding:24px; overflow-y:auto; }
+  .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
+  .stat { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px; }
+  .stat .v { font-size:24px; font-weight:600; margin-top:6px; }
+  .stat .l { color:var(--mute); font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
+  .chart { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:18px; height:260px; display:flex; align-items:end; gap:8px; }
+  .bar { flex:1; background:linear-gradient(180deg,#7c3aed,#2563eb); border-radius:6px 6px 0 0; }
+</style>
+</head>
+<body>
+<aside>
+  <h1>Pulsegrid</h1>
+  <nav>
+    <a class="active">Overview</a>
+    <a>Customers</a>
+    <a>Revenue</a>
+    <a>Settings</a>
+  </nav>
+</aside>
+<main>
+  <div class="stats">
+    <div class="stat"><div class="l">Revenue</div><div class="v">$48,210</div></div>
+    <div class="stat"><div class="l">Active users</div><div class="v">12,840</div></div>
+    <div class="stat"><div class="l">Conversion</div><div class="v">4.2%</div></div>
+    <div class="stat"><div class="l">Churn</div><div class="v">1.1%</div></div>
+  </div>
+  <div class="chart">
+    <div class="bar" style="height:40%"></div>
+    <div class="bar" style="height:65%"></div>
+    <div class="bar" style="height:30%"></div>
+    <div class="bar" style="height:80%"></div>
+    <div class="bar" style="height:55%"></div>
+    <div class="bar" style="height:90%"></div>
+    <div class="bar" style="height:70%"></div>
+  </div>
+</main>
+</body>
+</html>
+\`\`\`
+
+Hit the **Preview** tab to see it rendered live.`,
+      sections: {
+        thinking: ['User wants a dashboard. Building a self-contained HTML page with sidebar nav, stat cards, and a CSS-only bar chart so it can render in the iframe preview.'],
+        code: ['Single-file dashboard.html with grid layout, stats, sidebar.'],
+        critique: ['No real charting library — bars are static. For production, swap in Recharts/Chart.js.'],
+        fix: [],
+      },
+    },
+    {
+      match: /api|fastapi|backend|jwt|postgres/i,
+      response:
+`Here's a minimal but production-shaped FastAPI service:
+
+\`\`\`python
+# main.py
+from datetime import datetime, timedelta
+from fastapi import FastAPI, Depends, HTTPException, status
+from fastapi.security import OAuth2PasswordBearer, OAuth2PasswordRequestForm
+from sqlalchemy.orm import Session
+from passlib.context import CryptContext
+from jose import jwt
+from pydantic import BaseModel
+
+from .database import SessionLocal, engine
+from . import models, schemas
+
+models.Base.metadata.create_all(bind=engine)
+
+app = FastAPI(title="Notes API")
+SECRET_KEY = "change-me"
+ALGORITHM  = "HS256"
+EXPIRES    = timedelta(hours=24)
+pwd        = CryptContext(schemes=["bcrypt"])
+oauth2     = OAuth2PasswordBearer(tokenUrl="/auth/login")
+
+def get_db():
+    db = SessionLocal()
+    try: yield db
+    finally: db.close()
+
+def make_token(sub: str) -> str:
+    return jwt.encode({"sub": sub, "exp": datetime.utcnow() + EXPIRES}, SECRET_KEY, ALGORITHM)
+
+@app.post("/auth/login")
+def login(form: OAuth2PasswordRequestForm = Depends(), db: Session = Depends(get_db)):
+    user = db.query(models.User).filter_by(email=form.username).first()
+    if not user or not pwd.verify(form.password, user.hashed_password):
+        raise HTTPException(401, "Invalid credentials")
+    return {"access_token": make_token(user.email), "token_type": "bearer"}
+
+@app.get("/notes", response_model=list[schemas.Note])
+def list_notes(db: Session = Depends(get_db), token: str = Depends(oauth2)):
+    payload = jwt.decode(token, SECRET_KEY, [ALGORITHM])
+    return db.query(models.Note).filter_by(owner_email=payload["sub"]).all()
+\`\`\`
+
+Pair this with \`models.py\`, \`schemas.py\`, and a \`.env\` containing \`DATABASE_URL=postgresql://…\`.`,
+      sections: {
+        thinking: ['User asked for FastAPI + JWT + Postgres. Sketching the service entrypoint with auth flow and a protected GET endpoint.'],
+        code: ['main.py with /auth/login and /notes endpoints.'],
+        critique: ['SECRET_KEY hardcoded — move to env. bcrypt rounds are default — increase for production.'],
+        suggest: ['Add Alembic migrations and pytest fixtures next.'],
+      },
+    },
+    {
+      match: /bug|fix|debug|divide/i,
+      response:
+`Two bugs in that snippet:
+
+1. **No zero-divisor guard** — \`divide_list([1,2], 0)\` throws \`ZeroDivisionError\`.
+2. **No type validation** — non-numeric items raise \`TypeError\` deep in the loop.
+
+Here's the fix:
+
+\`\`\`python
+def divide_list(numbers, divisor):
+    if divisor == 0:
+        raise ValueError("divisor must be non-zero")
+    result = []
+    for n in numbers:
+        if not isinstance(n, (int, float)):
+            raise TypeError(f"non-numeric item: {n!r}")
+        result.append(n / divisor)
+    return result
+\`\`\`
+
+For very large lists, switch to a generator (\`yield\` instead of \`append\`) to keep memory flat.`,
+      sections: {
+        thinking: ['Two issues: zero-divisor crash, non-numeric crash. Adding explicit guards and a clearer error message.'],
+        critique: ['Function silently coerces booleans because bool ⊂ int in Python — may want to exclude them explicitly.'],
+        fix: ['Added divisor==0 guard, added isinstance validation, kept the original signature.'],
+        code: ['Patched divide_list with safe input checking.'],
+      },
+    },
+  ];
+
+  const DEFAULT_DEMO = {
+    response:
+`I'm running in **Demo Mode** because the live API isn't reachable.
+
+Try one of the quick-action prompts on the welcome screen, or open Settings (double-click the brand logo) and paste your MINDI API URL.
+
+\`\`\`javascript
+// You sent a prompt and I'm a placeholder.
+// Connect the real API to see actual generations.
+console.log("MINDI 1.5 — awaiting connection");
+\`\`\``,
+    sections: {
+      thinking: ['No API URL configured or the endpoint is unreachable. Returning a demo response.'],
+      code: ['Stub response.'],
+    },
+  };
+
+  function pickDemo(prompt) {
+    const found = DEMO_RESPONSES.find((d) => d.match.test(prompt));
+    return found || DEFAULT_DEMO;
+  }
+
+  async function generateDemo(prompt) {
+    await new Promise((r) => setTimeout(r, 1200 + Math.random() * 700));
+    const demo = pickDemo(prompt);
+    return { response: demo.response, sections: demo.sections || {} };
+  }
+
+  // ----------------------------------------------------------------
+  // Status
+  // ----------------------------------------------------------------
+  function setStatus(status, label) {
+    runtime.status = status;
+    els.statusDot.classList.remove('status-dot--gray', 'status-dot--green', 'status-dot--yellow', 'status-dot--red');
+    const map = { connecting: 'gray', online: 'green', demo: 'yellow', offline: 'red' };
+    els.statusDot.classList.add(`status-dot--${map[status] || 'gray'}`);
+    els.statusText.textContent = label;
+  }
+
+  // ----------------------------------------------------------------
+  // Toasts
+  // ----------------------------------------------------------------
+  function toast(msg, kind = 'info', ms = 2400) {
+    const el = document.createElement('div');
+    el.className = `toast toast--${kind}`;
+    el.innerHTML = `<span class="toast-icon"></span><span>${escapeHtml(msg)}</span>`;
+    els.toasts.appendChild(el);
+    setTimeout(() => {
+      el.classList.add('is-leaving');
+      setTimeout(() => el.remove(), 260);
+    }, ms);
+  }
+
+  // ----------------------------------------------------------------
+  // Chat data helpers
+  // ----------------------------------------------------------------
+  function currentChat() {
+    return state.chats.find((c) => c.id === state.currentId) || null;
+  }
+  function ensureChat() {
+    let chat = currentChat();
+    if (!chat) {
+      chat = { id: uid(), title: 'New chat', createdAt: Date.now(), updatedAt: Date.now(), messages: [] };
+      state.chats.unshift(chat);
+      state.currentId = chat.id;
+    }
+    return chat;
+  }
+  function deriveTitle(text) {
+    const t = (text || '').replace(/\s+/g, ' ').trim();
+    if (!t) return 'New chat';
+    return t.length > 42 ? t.slice(0, 42).trim() + '…' : t;
+  }
+
+  // ----------------------------------------------------------------
+  // Render: messages
+  // ----------------------------------------------------------------
+  function renderMessages() {
+    const chat = currentChat();
+    const hasMessages = !!(chat && chat.messages.length);
+    els.chat.classList.toggle('has-messages', hasMessages);
+    els.messages.innerHTML = '';
+    if (!hasMessages) return;
+
+    chat.messages.forEach((m) => els.messages.appendChild(renderMessageEl(m)));
+
+    // Highlight after insertion
+    if (window.Prism) {
+      try { Prism.highlightAllUnder(els.messages); } catch { /* noop */ }
+    }
+    scrollMessagesToBottom();
+  }
+
+  function renderMessageEl(m) {
+    const wrap = document.createElement('div');
+    wrap.className = `msg msg--${m.role === 'user' ? 'user' : 'asst'}`;
+
+    const avatar = document.createElement('div');
+    avatar.className = 'msg-avatar';
+    avatar.textContent = m.role === 'user' ? 'You'.slice(0,1) : 'M';
+
+    const body = document.createElement('div');
+    body.className = 'msg-body';
+
+    const meta = document.createElement('div');
+    meta.className = 'msg-meta';
+    meta.innerHTML = `<span class="msg-meta-name">${m.role === 'user' ? 'You' : 'MINDI 1.5'}</span>`;
+    body.appendChild(meta);
+
+    if (Array.isArray(m.images) && m.images.length) {
+      const imgsWrap = document.createElement('div');
+      imgsWrap.className = 'msg-images';
+      m.images.forEach((src) => {
+        const img = document.createElement('img');
+        img.src = src;
+        img.alt = 'Attached image';
+        imgsWrap.appendChild(img);
+      });
+      body.appendChild(imgsWrap);
+    }
+
+    const bubble = document.createElement('div');
+    bubble.className = 'msg-bubble';
+    if (m.loading) {
+      bubble.innerHTML = `<span>${escapeHtml(m.content || 'Thinking')}</span><span class="dots"><span></span><span></span><span></span></span>`;
+      wrap.classList.add('msg-loading');
+    } else {
+      bubble.innerHTML = renderMarkdown(cleanForDisplay(m.content));
+    }
+    body.appendChild(bubble);
+
+    wrap.appendChild(avatar);
+    wrap.appendChild(body);
+    return wrap;
+  }
+
+  function scrollMessagesToBottom() {
+    requestAnimationFrame(() => {
+      els.messages.scrollTop = els.messages.scrollHeight;
+    });
+  }
+
+  // ----------------------------------------------------------------
+  // Render: history sidebar
+  // ----------------------------------------------------------------
+  function renderHistory() {
+    const q = (els.search.value || '').toLowerCase().trim();
+    const filtered = q
+      ? state.chats.filter((c) => c.title.toLowerCase().includes(q) ||
+          c.messages.some((m) => (m.content || '').toLowerCase().includes(q)))
+      : state.chats;
+
+    els.history.innerHTML = '';
+
+    if (!filtered.length) {
+      els.history.innerHTML = `
+        <div class="history-empty">
+          <p>${q ? 'No matches.' : 'No chats yet.'}</p>
+          <p class="muted">${q ? 'Try a different search.' : 'Start a conversation to see it here.'}</p>
+        </div>`;
+      return;
+    }
+
+    // Group by date
+    const groupOrder = ['Today', 'Yesterday', 'This Week', 'Earlier'];
+    const groups = {};
+    filtered.forEach((c) => {
+      const g = relativeDateGroup(c.updatedAt || c.createdAt);
+      (groups[g] ||= []).push(c);
+    });
+
+    groupOrder.forEach((g) => {
+      if (!groups[g]) return;
+      const wrap = document.createElement('div');
+      wrap.className = 'history-group';
+      wrap.innerHTML = `<div class="history-group-title">${g}</div>`;
+      groups[g].forEach((c) => {
+        const btn = document.createElement('button');
+        btn.className = 'history-item';
+        if (c.id === state.currentId) btn.classList.add('is-active');
+        btn.textContent = c.title || 'New chat';
+        btn.title = c.title;
+        btn.addEventListener('click', () => loadChat(c.id));
+        wrap.appendChild(btn);
+      });
+      els.history.appendChild(wrap);
+    });
+  }
+
+  function loadChat(id) {
+    state.currentId = id;
+    const chat = currentChat();
+    if (chat) {
+      els.chatTitle.textContent = chat.title || 'New chat';
+      // recompute preview panels from last assistant message
+      const lastAssistant = [...chat.messages].reverse().find((m) => m.role === 'assistant' && !m.loading);
+      if (lastAssistant) updatePreviewFromAssistant(lastAssistant);
+      else clearPreview();
+    }
+    renderMessages();
+    renderHistory();
+    saveState();
+    closeMobileSidebar();
+  }
+
+  // ----------------------------------------------------------------
+  // Preview panel updates
+  // ----------------------------------------------------------------
+  function clearPreview() {
+    runtime.lastCode = null;
+    runtime.lastSections = null;
+    els.codeOut.hidden = true;
+    els.emptyCode.hidden = false;
+    els.liveFrame.hidden = true;
+    els.emptyLive.hidden = false;
+    els.sections.hidden = true;
+    els.emptySections.hidden = false;
+    els.sections.innerHTML = '';
+    els.codeOutInner.textContent = '';
+  }
+
+  function updatePreviewFromAssistant(msg) {
+    const cleaned = cleanForDisplay(msg.content);
+    const block = extractLastCodeBlock(cleaned);
+    runtime.lastCode = block;
+    if (block) renderCodeOut(block);
+    else { els.codeOut.hidden = true; els.emptyCode.hidden = false; }
+
+    // Live HTML preview
+    if (block && /^(markup|html)$/i.test(block.language || '')) {
+      renderLivePreview(block.code);
+    } else {
+      els.liveFrame.hidden = true;
+      els.emptyLive.hidden = false;
+    }
+
+    // Sections
+    const apiSections = msg.sections || {};
+    const parsedSections = parseSections(msg.content);
+    runtime.lastSections = mergeSections(apiSections, parsedSections);
+    renderSections(runtime.lastSections);
+  }
+
+  function renderCodeOut(block) {
+    const lang = block.language || 'plaintext';
+    els.codeOutInner.className = `language-${lang}`;
+    els.codeOutInner.textContent = block.code;
+    els.emptyCode.hidden = true;
+    els.codeOut.hidden = false;
+    if (window.Prism) {
+      try { Prism.highlightElement(els.codeOutInner); } catch { /* noop */ }
+    }
+  }
+
+  function renderLivePreview(html) {
+    els.emptyLive.hidden = true;
+    els.liveFrame.hidden = false;
+    const doc = els.liveFrame.contentDocument || els.liveFrame.contentWindow.document;
+    doc.open();
+    doc.write(html);
+    doc.close();
+  }
+
+  function renderSections(sections) {
+    const hasAny = SECTION_ORDER.some((k) => (sections[k] || []).length);
+    if (!hasAny) {
+      els.sections.hidden = true;
+      els.emptySections.hidden = false;
+      els.sections.innerHTML = '';
+      return;
+    }
+    els.emptySections.hidden = true;
+    els.sections.hidden = false;
+    els.sections.innerHTML = '';
+
+    SECTION_ORDER.forEach((kind) => {
+      const items = sections[kind] || [];
+      items.forEach((body, i) => {
+        const card = document.createElement('div');
+        card.className = 'section-card';
+        card.dataset.kind = kind;
+        card.innerHTML = `
+          <div class="section-card-head">
+            <span class="section-tag">${SECTION_LABELS[kind]}</span>
+            <span>${items.length > 1 ? `${i + 1} / ${items.length}` : ''}</span>
+          </div>
+          <div class="section-card-body">${escapeHtml(body)}</div>
+        `;
+        els.sections.appendChild(card);
+      });
+    });
+  }
+
+  // ----------------------------------------------------------------
+  // Send flow
+  // ----------------------------------------------------------------
+  async function send() {
+    if (runtime.isSending) return;
+    const text = els.promptInput.value.trim();
+    if (!text && !runtime.pendingImages.length) return;
+
+    const chat = ensureChat();
+    const wasEmpty = chat.messages.length === 0;
+
+    const userMsg = {
+      role:    'user',
+      content: text,
+      images:  runtime.pendingImages.map((p) => p.dataUrl),
+      ts:      Date.now(),
+    };
+    chat.messages.push(userMsg);
+    chat.updatedAt = Date.now();
+
+    if (wasEmpty) {
+      chat.title = deriveTitle(text);
+      els.chatTitle.textContent = chat.title;
+    }
+
+    // Reset input
+    const imageForApi = runtime.pendingImages[0]?.dataUrl || null;
+    els.promptInput.value = '';
+    autosizeTextarea();
+    clearPendingImages();
+    updateSendEnabled();
+
+    // Loading message
+    const loadingMsg = { role: 'assistant', content: 'Thinking', loading: true, ts: Date.now() };
+    chat.messages.push(loadingMsg);
+    renderMessages();
+    renderHistory();
+    saveState();
+
+    runtime.isSending = true;
+    let coldStartTimer = setTimeout(() => {
+      loadingMsg.content = 'Cold start — booting the GPU. First request can take ~4 minutes';
+      renderMessages();
+    }, COLD_START_HINT_MS);
+
+    let result, errored = null;
+    try {
+      if (runtime.status === 'demo' || !state.apiUrl) {
+        result = await generateDemo(text);
+      } else {
+        result = await callGenerate(text, imageForApi);
+      }
+    } catch (e) {
+      errored = e;
+      // Auto-fallback to demo so the UI never feels dead
+      result = await generateDemo(text).catch(() => ({ response: 'Generation failed.' }));
+      if (!/cold|abort|signal/i.test(String(e?.message || ''))) {
+        toast('API error — falling back to demo', 'error', 3500);
+      }
+    } finally {
+      clearTimeout(coldStartTimer);
+      runtime.isSending = false;
+    }
+
+    // If the API returned a quota / auth error, surface it clearly
+    const authMsg = detectAuthError(result);
+    if (authMsg) {
+      toast(authMsg, 'error', 7000);
+      setStatus('demo', state.hfToken ? 'Quota exhausted' : 'Auth required');
+    }
+
+    // Remove loading, push assistant
+    const idx = chat.messages.indexOf(loadingMsg);
+    if (idx !== -1) chat.messages.splice(idx, 1);
+
+    const assistantMsg = {
+      role:     'assistant',
+      content:  result?.response || '(no response)',
+      sections: result?.sections || null,
+      ts:       Date.now(),
+    };
+    chat.messages.push(assistantMsg);
+    chat.updatedAt = Date.now();
+
+    renderMessages();
+    renderHistory();
+    updatePreviewFromAssistant(assistantMsg);
+    saveState();
+
+    if (errored) console.warn('[mindi] generate error:', errored);
+  }
+
+  // ----------------------------------------------------------------
+  // Composer interactions
+  // ----------------------------------------------------------------
+  function autosizeTextarea() {
+    const ta = els.promptInput;
+    ta.style.height = 'auto';
+    const next = Math.min(ta.scrollHeight, MAX_TEXTAREA);
+    ta.style.height = next + 'px';
+  }
+  function updateSendEnabled() {
+    const has = els.promptInput.value.trim().length > 0 || runtime.pendingImages.length > 0;
+    els.sendBtn.disabled = !has || runtime.isSending;
+  }
+  function clearPendingImages() {
+    runtime.pendingImages = [];
+    renderPendingImages();
+  }
+  function renderPendingImages() {
+    if (!runtime.pendingImages.length) {
+      els.composerImages.hidden = true;
+      els.composerImages.innerHTML = '';
+      return;
+    }
+    els.composerImages.hidden = false;
+    els.composerImages.innerHTML = '';
+    runtime.pendingImages.forEach((p, i) => {
+      const tile = document.createElement('div');
+      tile.className = 'composer-image';
+      tile.style.backgroundImage = `url("${p.dataUrl}")`;
+      tile.title = p.name;
+      const rm = document.createElement('button');
+      rm.className = 'composer-image-remove';
+      rm.setAttribute('aria-label', 'Remove image');
+      rm.textContent = '×';
+      rm.addEventListener('click', () => {
+        runtime.pendingImages.splice(i, 1);
+        renderPendingImages();
+        updateSendEnabled();
+      });
+      tile.appendChild(rm);
+      els.composerImages.appendChild(tile);
+    });
+  }
+
+  async function handleFileChosen(file) {
+    if (!file || !file.type.startsWith('image/')) {
+      toast('Only image files are supported.', 'error');
+      return;
+    }
+    if (file.size > 6 * 1024 * 1024) {
+      toast('Image too large (max 6 MB).', 'error');
+      return;
+    }
+    try {
+      const dataUrl = await fileToDataUrl(file);
+      runtime.pendingImages = [{ name: file.name, dataUrl }]; // single image per request
+      renderPendingImages();
+      updateSendEnabled();
+    } catch {
+      toast('Could not read that image.', 'error');
+    }
+  }
+
+  // ----------------------------------------------------------------
+  // Tabs
+  // ----------------------------------------------------------------
+  function activateTab(tabName) {
+    els.tabs.forEach((t) => {
+      const on = t.dataset.tab === tabName;
+      t.classList.toggle('is-active', on);
+      t.setAttribute('aria-selected', on ? 'true' : 'false');
+    });
+    els.panes.forEach((p) => {
+      p.classList.toggle('is-active', p.dataset.pane === tabName);
+    });
+  }
+
+  // ----------------------------------------------------------------
+  // Settings modal
+  // ----------------------------------------------------------------
+  function maskToken(t) {
+    if (!t) return 'none';
+    if (t.length <= 8) return 'set';
+    return `${t.slice(0, 4)}…${t.slice(-4)}`;
+  }
+  function refreshTokenStatus() {
+    if (els.hfTokenStatus) els.hfTokenStatus.textContent = maskToken(state.hfToken);
+  }
+  function openSettings() {
+    els.settingsUrl.value      = state.apiUrl || '';
+    if (els.settingsHfToken) els.settingsHfToken.value = state.hfToken || '';
+    els.settingsTemp.value     = state.temperature;
+    els.settingsTokens.value   = state.maxTokens;
+    els.tempVal.textContent    = Number(state.temperature).toFixed(2);
+    els.tokensVal.textContent  = state.maxTokens;
+    refreshTokenStatus();
+    els.settingsModal.hidden   = false;
+    setTimeout(() => els.settingsUrl.focus(), 50);
+  }
+  function closeSettings() {
+    els.settingsModal.hidden = true;
+  }
+  function applySettings() {
+    const url    = els.settingsUrl.value.trim();
+    const token  = els.settingsHfToken ? els.settingsHfToken.value.trim() : '';
+    const temp   = parseFloat(els.settingsTemp.value);
+    const tokens = parseInt(els.settingsTokens.value, 10);
+    state.apiUrl      = url || API_DEFAULT;
+    state.hfToken     = token;
+    state.temperature = isFinite(temp) ? temp : 0.7;
+    state.maxTokens   = isFinite(tokens) ? tokens : 2048;
+    saveState();
+    refreshTokenStatus();
+    closeSettings();
+    toast('Settings saved', 'success');
+    pingHealth();
+  }
+
+  // ----------------------------------------------------------------
+  // Mobile sidebar / preview toggling
+  // ----------------------------------------------------------------
+  function openMobileSidebar()  { els.body.classList.add('sidebar-open'); }
+  function closeMobileSidebar() { els.body.classList.remove('sidebar-open'); }
+  function togglePreview() {
+    if (window.matchMedia('(max-width: 1024px)').matches) {
+      els.body.classList.toggle('preview-open');
+    } else {
+      els.body.classList.toggle('preview-hidden');
+    }
+  }
+
+  // ----------------------------------------------------------------
+  // Copy / download from preview panel
+  // ----------------------------------------------------------------
+  async function copyLastCode() {
+    if (!runtime.lastCode) {
+      toast('No code to copy yet', 'info');
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(runtime.lastCode.code);
+      toast('Copied to clipboard', 'success', 1600);
+    } catch {
+      toast('Clipboard unavailable', 'error');
+    }
+  }
+  function downloadLastCode() {
+    if (!runtime.lastCode) {
+      toast('No code to download yet', 'info');
+      return;
+    }
+    const ext = (() => {
+      const m = { javascript: 'js', typescript: 'ts', tsx: 'tsx', jsx: 'jsx',
+                  python: 'py', markup: 'html', html: 'html', css: 'css',
+                  json: 'json', sql: 'sql', bash: 'sh' };
+      return m[runtime.lastCode.language] || 'txt';
+    })();
+    downloadFile(`mindi-output.${ext}`, runtime.lastCode.code);
+  }
+
+  // ----------------------------------------------------------------
+  // Bind events
+  // ----------------------------------------------------------------
+  // The active send handler — overridden by agent init if available
+  let activeSend = send;
+
+  function bind() {
+    // Composer
+    els.promptInput.addEventListener('input', () => { autosizeTextarea(); updateSendEnabled(); });
+    els.promptInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        activeSend();
+      }
+    });
+    els.sendBtn.addEventListener('click', () => activeSend());
+
+    // Attach
+    els.attachBtn.addEventListener('click', () => els.fileInput.click());
+    els.fileInput.addEventListener('change', (e) => {
+      const f = e.target.files?.[0];
+      if (f) handleFileChosen(f);
+      e.target.value = '';
+    });
+
+    // Drag & drop on composer
+    ['dragenter', 'dragover'].forEach((ev) => {
+      els.composer.addEventListener(ev, (e) => { e.preventDefault(); els.composer.style.borderColor = 'rgba(124, 58, 237, .6)'; });
+    });
+    ['dragleave', 'drop'].forEach((ev) => {
+      els.composer.addEventListener(ev, (e) => { e.preventDefault(); els.composer.style.borderColor = ''; });
+    });
+    els.composer.addEventListener('drop', (e) => {
+      const file = e.dataTransfer?.files?.[0];
+      if (file) handleFileChosen(file);
+    });
+
+    // Quick action cards
+    els.quickCards.forEach((card) => {
+      card.addEventListener('click', () => {
+        els.promptInput.value = card.dataset.prompt || '';
+        autosizeTextarea();
+        updateSendEnabled();
+        els.promptInput.focus();
+      });
+    });
+
+    // Sidebar
+    els.newChatBtn.addEventListener('click', () => {
+      state.currentId = null;
+      ensureChat();
+      els.chatTitle.textContent = 'New chat';
+      clearPreview();
+      renderMessages();
+      renderHistory();
+      saveState();
+      els.promptInput.focus();
+      closeMobileSidebar();
+    });
+    els.search.addEventListener('input', debounce(renderHistory, 120));
+    els.hamburger.addEventListener('click', openMobileSidebar);
+    els.scrim.addEventListener('click', () => { closeMobileSidebar(); els.body.classList.remove('preview-open'); });
+    els.togglePreview.addEventListener('click', togglePreview);
+
+    // Tabs
+    els.tabs.forEach((t) => t.addEventListener('click', () => activateTab(t.dataset.tab)));
+
+    // Code copy / download
+    els.copyCode.addEventListener('click', copyLastCode);
+    els.downloadCode.addEventListener('click', downloadLastCode);
+
+    // Click handler for inline copy buttons inside messages (delegated)
+    els.messages.addEventListener('click', async (e) => {
+      const btn = e.target.closest('.md-copy');
+      if (!btn) return;
+      try {
+        await navigator.clipboard.writeText(btn.dataset.code || '');
+        const prev = btn.textContent;
+        btn.textContent = 'Copied!';
+        setTimeout(() => { btn.textContent = prev; }, 1400);
+      } catch {
+        toast('Clipboard unavailable', 'error');
+      }
+    });
+
+    // Brand → settings (double-click)
+    els.brand.addEventListener('dblclick', openSettings);
+
+    // Settings modal
+    els.settingsModal.addEventListener('click', (e) => {
+      if (e.target.matches('[data-close]') || e.target.closest('[data-close]')) closeSettings();
+    });
+    els.settingsTemp.addEventListener('input', () => {
+      els.tempVal.textContent = Number(els.settingsTemp.value).toFixed(2);
+    });
+    els.settingsTokens.addEventListener('input', () => {
+      els.tokensVal.textContent = els.settingsTokens.value;
+    });
+    els.saveSettings.addEventListener('click', applySettings);
+
+    // Esc to close modal / mobile drawers
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        if (!els.settingsModal.hidden) closeSettings();
+        closeMobileSidebar();
+        els.body.classList.remove('preview-open');
+      }
+      // Cmd/Ctrl + K → focus search
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+        e.preventDefault();
+        els.search.focus();
+      }
+    });
+
+    // Keep textarea sized after window resize (font reflow)
+    window.addEventListener('resize', autosizeTextarea);
+  }
+
+  // ----------------------------------------------------------------
+  // Agent integration
+  // ----------------------------------------------------------------
+  const agentEls = {
+    log:         document.getElementById('agent-log'),
+    sandbox:     document.getElementById('agent-sandbox'),
+    console:     document.getElementById('agent-console'),
+    consoleBody: document.getElementById('agent-console-body'),
+    emptyAgent:  document.getElementById('empty-agent'),
+  };
+
+  const STEP_ICONS = {
+    plan:     '📋',
+    generate: '⚡',
+    execute:  '▶️',
+    verify:   '✅',
+    fix:      '🔧',
+    done:     '🎉',
+    error:    '❌',
+  };
+
+  const STEP_LABELS = {
+    plan:     'Planning',
+    generate: 'Generating Code',
+    execute:  'Executing',
+    verify:   'Verifying Output',
+    fix:      'Fixing Error',
+    done:     'Complete',
+    error:    'Error',
+  };
+
+  function isCodeRequest(text) {
+    return /\b(build|create|make|write|generate|code|html|css|app|page|website|component|function|class|api|dashboard|landing|todo|form|navbar|button|layout|design)\b/i.test(text);
+  }
+
+  function renderAgentStep(run, step) {
+    if (!agentEls.log) return;
+
+    // Show agent panel, hide empty state
+    agentEls.emptyAgent && (agentEls.emptyAgent.hidden = true);
+    agentEls.log.hidden = false;
+
+    // Switch to agent tab
+    const agentTab = document.querySelector('.tab[data-tab="agent"]');
+    if (agentTab && !agentTab.classList.contains('is-active')) {
+      agentTab.click();
+    }
+
+    // Find or create step element
+    let el = agentEls.log.querySelector(`[data-step-id="${step.id}"]`);
+    if (!el) {
+      el = document.createElement('div');
+      el.className = 'agent-step';
+      el.dataset.stepId = step.id;
+      el.innerHTML = `
+        <div class="agent-step-icon"></div>
+        <div class="agent-step-body">
+          <div class="agent-step-title"></div>
+          <div class="agent-step-detail"></div>
+        </div>`;
+      agentEls.log.appendChild(el);
+    }
+
+    // Update status class
+    el.className = `agent-step agent-step--${step.status}`;
+
+    // Update icon
+    const iconEl = el.querySelector('.agent-step-icon');
+    const statusIcons = { running: '⏳', success: '✅', failed: '❌', pending: '⏺' };
+    iconEl.textContent = step.status === 'success' || step.status === 'failed'
+      ? statusIcons[step.status]
+      : (STEP_ICONS[step.type] || '⏳');
+
+    // Update title
+    el.querySelector('.agent-step-title').textContent = STEP_LABELS[step.type] || step.type;
+
+    // Update detail
+    el.querySelector('.agent-step-detail').textContent = step.detail || '';
+
+    // Auto-scroll
+    agentEls.log.scrollTop = agentEls.log.scrollHeight;
+
+    // Show sandbox and console when executing
+    if (step.type === 'execute') {
+      agentEls.sandbox.hidden = false;
+      agentEls.console.hidden = false;
+    }
+
+    // Update console on execution results
+    if (step.type === 'execute' && (step.status === 'success' || step.status === 'failed')) {
+      const run_ = run;  // closure
+      if (run_.currentCode) {
+        // Show code in the Code tab too
+        const block = { language: run_.language || 'javascript', code: run_.currentCode };
+        runtime.lastCode = block;
+        renderCodeOut(block);
+      }
+    }
+
+    // When done, show final code in preview
+    if (step.type === 'done' && step.status === 'success' && run.currentCode) {
+      const lang = run.language || 'javascript';
+      if (/^(html|markup)$/i.test(lang)) {
+        // Render in live preview
+        els.liveFrame.hidden = false;
+        const emptyLive = document.getElementById('empty-live');
+        if (emptyLive) emptyLive.hidden = true;
+        els.liveFrame.srcdoc = run.currentCode;
+      }
+    }
+  }
+
+  function clearAgentUI() {
+    if (agentEls.log) {
+      agentEls.log.innerHTML = '';
+      agentEls.log.hidden = true;
+    }
+    if (agentEls.sandbox) {
+      agentEls.sandbox.innerHTML = '';
+      agentEls.sandbox.hidden = true;
+    }
+    if (agentEls.console) {
+      agentEls.console.hidden = true;
+    }
+    if (agentEls.consoleBody) {
+      agentEls.consoleBody.textContent = '';
+    }
+    if (agentEls.emptyAgent) {
+      agentEls.emptyAgent.hidden = false;
+    }
+  }
+
+  async function runAgent(prompt, image) {
+    clearAgentUI();
+
+    const apiCall = async (p, img) => {
+      if (runtime.status === 'demo' || !state.apiUrl) {
+        return generateDemo(p);
+      }
+      return callGenerate(p, img);
+    };
+
+    const result = await MINDIAgent.run(prompt, {
+      apiCall,
+      sandboxContainer: agentEls.sandbox,
+      image,
+      onStep: (run, step) => {
+        renderAgentStep(run, step);
+
+        // Update console output
+        if (step.type === 'execute' && agentEls.consoleBody) {
+          const detail = step.detail || '';
+          if (step.status === 'failed') {
+            agentEls.consoleBody.innerHTML += `<span class="console-error">${escapeHtml(detail)}</span>\n`;
+          } else if (step.status === 'success') {
+            agentEls.consoleBody.textContent += detail + '\n';
+          }
+        }
+      },
+    });
+
+    return result;
+  }
+
+  // Agent-aware send handler: delegates to agent for code requests, standard send otherwise
+  async function handleSendWithAgent() {
+    const text = els.promptInput.value.trim();
+    if (!text && !runtime.pendingImages.length) return;
+
+    // Determine if this should use the agent
+    const useAgent = typeof MINDIAgent !== 'undefined' && isCodeRequest(text);
+
+    if (!useAgent) {
+      return send();
+    }
+
+    // Agent mode
+    const chat = ensureChat();
+    const wasEmpty = chat.messages.length === 0;
+
+    const userMsg = {
+      role:    'user',
+      content: text,
+      images:  runtime.pendingImages.map((p) => p.dataUrl),
+      ts:      Date.now(),
+    };
+    chat.messages.push(userMsg);
+    chat.updatedAt = Date.now();
+
+    if (wasEmpty) {
+      chat.title = deriveTitle(text);
+      els.chatTitle.textContent = chat.title;
+    }
+
+    const imageForApi = runtime.pendingImages[0]?.dataUrl || null;
+    els.promptInput.value = '';
+    autosizeTextarea();
+    clearPendingImages();
+    updateSendEnabled();
+
+    // Show loading
+    const loadingMsg = { role: 'assistant', content: '🤖 Agent working', loading: true, ts: Date.now() };
+    chat.messages.push(loadingMsg);
+    renderMessages();
+    renderHistory();
+    saveState();
+
+    runtime.isSending = true;
+
+    try {
+      const agentResult = await runAgent(text, imageForApi);
+
+      // Remove loading
+      const idx = chat.messages.indexOf(loadingMsg);
+      if (idx !== -1) chat.messages.splice(idx, 1);
+
+      // Build response from agent
+      const iterations = agentResult.iteration + 1;
+      const status = agentResult.status === 'success' ? '✅' : '❌';
+      let responseText = `${status} Agent completed in ${iterations} iteration(s).\n\n`;
+
+      if (agentResult.currentCode) {
+        const lang = agentResult.language || 'javascript';
+        responseText += `\`\`\`${lang}\n${agentResult.currentCode}\n\`\`\``;
+      } else {
+        // Fallback: get the last generate step's detail
+        const lastGen = [...agentResult.steps].reverse().find(s => s.type === 'generate' || s.type === 'fix');
+        if (lastGen) responseText += lastGen.detail || 'No code generated.';
+      }
+
+      const assistantMsg = {
+        role:     'assistant',
+        content:  responseText,
+        ts:       Date.now(),
+      };
+      chat.messages.push(assistantMsg);
+      chat.updatedAt = Date.now();
+
+      renderMessages();
+      renderHistory();
+      updatePreviewFromAssistant(assistantMsg);
+      saveState();
+
+    } catch (e) {
+      const idx = chat.messages.indexOf(loadingMsg);
+      if (idx !== -1) chat.messages.splice(idx, 1);
+
+      const errorMsg = { role: 'assistant', content: `Agent error: ${e.message}`, ts: Date.now() };
+      chat.messages.push(errorMsg);
+      renderMessages();
+      toast('Agent encountered an error', 'error');
+    } finally {
+      runtime.isSending = false;
+    }
+  }
+
+  // ----------------------------------------------------------------
+  // Init
+  // ----------------------------------------------------------------
+  function init() {
+    bind();
+
+    // Override the active send handler with agent-aware version
+    if (typeof MINDIAgent !== 'undefined') {
+      activeSend = handleSendWithAgent;
+    }
+
+    renderHistory();
+    renderMessages();
+
+    // Restore current chat title
+    const c = currentChat();
+    if (c) {
+      els.chatTitle.textContent = c.title || 'New chat';
+      const lastAssistant = [...c.messages].reverse().find((m) => m.role === 'assistant' && !m.loading);
+      if (lastAssistant) updatePreviewFromAssistant(lastAssistant);
+    }
+
+    autosizeTextarea();
+    updateSendEnabled();
+
+    // Health check (after a tick so UI paints first)
+    setTimeout(pingHealth, 80);
+
+    // Periodically re-check health (every 60s)
+    setInterval(pingHealth, 60_000);
+
+    console.log('[MINDI] Agent system loaded:', typeof MINDIAgent !== 'undefined' ? '✅' : '❌');
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init, { once: true });
+  } else {
+    init();
+  }
+})();

frontend/index.html

@@ -0,0 +1,340 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="MINDI 1.5 Vision-Coder — generate production-ready code from text prompts and UI screenshots." />
+  <title>MINDI 1.5 — Vision-Coder AI</title>
+
+  <!-- Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
+
+  <!-- Prism syntax highlighting -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" />
+
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+
+  <!-- ============ AMBIENT BACKGROUND ============ -->
+  <div class="ambient" aria-hidden="true">
+    <div class="grid-pattern"></div>
+    <div class="blob blob--purple"></div>
+    <div class="blob blob--blue"></div>
+  </div>
+
+  <!-- Mobile sidebar scrim -->
+  <div class="scrim" id="scrim" aria-hidden="true"></div>
+
+  <!-- ============ APP SHELL ============ -->
+  <div class="app">
+
+    <!-- ============ LEFT SIDEBAR ============ -->
+    <aside class="sidebar" id="sidebar" aria-label="Sidebar">
+      <div class="sidebar-head">
+        <button class="brand" id="brand" title="Double-click for settings" aria-label="MINDIGENOUS.AI brand — double-click for settings">
+          <span class="brand-mark">
+            <svg viewBox="0 0 32 32" fill="none" aria-hidden="true">
+              <defs>
+                <linearGradient id="bgrad" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
+                  <stop offset="0%" stop-color="#7c3aed" />
+                  <stop offset="100%" stop-color="#2563eb" />
+                </linearGradient>
+              </defs>
+              <path d="M16 2 L28 9 L28 23 L16 30 L4 23 L4 9 Z" fill="url(#bgrad)" />
+              <path d="M11.5 12 L7.5 16 L11.5 20 M20.5 12 L24.5 16 L20.5 20" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+              <circle cx="16" cy="16" r="1.6" fill="#fff" />
+            </svg>
+          </span>
+          <span class="brand-text">
+            <span class="brand-name">MINDIGENOUS<span class="brand-dot">.AI</span></span>
+            <span class="brand-version">MINDI 1.5 · Vision-Coder</span>
+          </span>
+        </button>
+      </div>
+
+      <div class="sidebar-actions">
+        <button class="btn btn--new" id="new-chat-btn" title="Start a new chat">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <line x1="12" y1="5" x2="12" y2="19"></line>
+            <line x1="5" y1="12" x2="19" y2="12"></line>
+          </svg>
+          New chat
+        </button>
+
+        <div class="search-wrap">
+          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <circle cx="11" cy="11" r="8"></circle>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+          </svg>
+          <input id="search" type="search" placeholder="Search conversations…" autocomplete="off" />
+        </div>
+      </div>
+
+      <nav class="chat-history" id="chat-history" aria-label="Chat history">
+        <div class="history-empty" id="history-empty">
+          <p>No chats yet.</p>
+          <p class="muted">Start a conversation to see it here.</p>
+        </div>
+      </nav>
+
+      <div class="sidebar-foot">
+        <div class="status" id="status" title="Model status">
+          <span class="status-dot status-dot--gray" id="status-dot"></span>
+          <span class="status-text" id="status-text">Connecting…</span>
+        </div>
+        <a class="hf-link" href="https://huggingface.co/mindigenous-ai" target="_blank" rel="noopener noreferrer" title="MINDI on HuggingFace">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+            <polyline points="15 3 21 3 21 9"></polyline>
+            <line x1="10" y1="14" x2="21" y2="3"></line>
+          </svg>
+          HuggingFace
+        </a>
+      </div>
+    </aside>
+
+    <!-- ============ CENTER: CHAT ============ -->
+    <main class="chat" id="chat">
+      <header class="chat-head">
+        <button class="icon-btn icon-btn--menu" id="hamburger" aria-label="Open sidebar">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <line x1="3" y1="6" x2="21" y2="6"></line>
+            <line x1="3" y1="12" x2="21" y2="12"></line>
+            <line x1="3" y1="18" x2="21" y2="18"></line>
+          </svg>
+        </button>
+        <h1 class="chat-title" id="chat-title">New chat</h1>
+        <div class="chat-head-actions">
+          <button class="icon-btn" id="toggle-preview" aria-label="Toggle preview panel" title="Toggle preview panel">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <rect x="3" y="3" width="18" height="18" rx="2"></rect>
+              <line x1="15" y1="3" x2="15" y2="21"></line>
+            </svg>
+          </button>
+        </div>
+      </header>
+
+      <!-- Welcome screen -->
+      <section class="welcome" id="welcome">
+        <div class="welcome-icon" aria-hidden="true">
+          <svg viewBox="0 0 120 120" class="welcome-svg">
+            <defs>
+              <linearGradient id="wgrad" x1="0" y1="0" x2="120" y2="120" gradientUnits="userSpaceOnUse">
+                <stop offset="0%" stop-color="#7c3aed" />
+                <stop offset="100%" stop-color="#2563eb" />
+              </linearGradient>
+              <filter id="wglow" x="-30%" y="-30%" width="160%" height="160%">
+                <feGaussianBlur stdDeviation="8" />
+              </filter>
+            </defs>
+            <path d="M60 10 L102 33 L102 87 L60 110 L18 87 L18 33 Z" fill="url(#wgrad)" filter="url(#wglow)" opacity=".55" />
+            <path d="M60 12 L100 34 L100 86 L60 108 L20 86 L20 34 Z" fill="url(#wgrad)" />
+            <path d="M44 50 L30 60 L44 70 M76 50 L90 60 L76 70" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+            <circle cx="60" cy="60" r="4.5" fill="#fff" />
+            <circle cx="60" cy="60" r="9" fill="none" stroke="#fff" stroke-opacity=".4" stroke-width="1.5" />
+          </svg>
+        </div>
+
+        <h2 class="welcome-title">Welcome to <span class="grad-text">MINDI 1.5</span></h2>
+        <p class="welcome-sub">A custom-trained 8B parameter Vision-Coder. Describe what you want to build, drop in a UI screenshot, and watch it generate production-ready code.</p>
+
+        <div class="quick-actions">
+          <button class="quick-card" data-prompt="Build a Next.js landing page with a responsive hero section, features grid, testimonial carousel, and a clear call-to-action. Use Tailwind CSS.">
+            <span class="qc-icon">🚀</span>
+            <h3>Landing Page</h3>
+            <p>Next.js + responsive hero section</p>
+          </button>
+          <button class="quick-card" data-prompt="Create a modern dashboard UI with a sidebar nav, top stats cards, a line chart, a recent activity table, and a user profile menu. Use HTML, CSS, and vanilla JS.">
+            <span class="qc-icon">📊</span>
+            <h3>Dashboard UI</h3>
+            <p>Charts, stats &amp; navigation</p>
+          </button>
+          <button class="quick-card" data-prompt="Write a FastAPI backend for a notes app with JWT authentication, PostgreSQL via SQLAlchemy, and CRUD endpoints. Include Pydantic models and an example .env.">
+            <span class="qc-icon">⚡</span>
+            <h3>API Backend</h3>
+            <p>FastAPI + JWT + PostgreSQL</p>
+          </button>
+          <button class="quick-card" data-prompt="Find and fix the bugs in this Python function. Explain each issue and provide the corrected code:&#10;&#10;```python&#10;def divide_list(numbers, divisor):&#10;    result = []&#10;    for n in numbers:&#10;        result.append(n / divisor)&#10;    return result&#10;```">
+            <span class="qc-icon">🔧</span>
+            <h3>Debug Code</h3>
+            <p>Find &amp; fix bugs in your code</p>
+          </button>
+        </div>
+      </section>
+
+      <!-- Messages -->
+      <section class="messages" id="messages" aria-live="polite"></section>
+
+      <!-- Composer (input) -->
+      <div class="composer-wrap">
+        <div class="composer" id="composer">
+          <div class="composer-images" id="composer-images" hidden></div>
+          <div class="composer-row">
+            <button class="composer-btn" id="attach-btn" title="Attach image" aria-label="Attach image">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                <circle cx="8.5" cy="8.5" r="1.5"></circle>
+                <polyline points="21 15 16 10 5 21"></polyline>
+              </svg>
+            </button>
+            <textarea id="prompt-input" rows="1" placeholder="Describe the code you want to generate…" autocomplete="off" autocorrect="off" spellcheck="false"></textarea>
+            <button class="composer-send" id="send-btn" disabled title="Send (Enter)" aria-label="Send message">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <line x1="22" y1="2" x2="11" y2="13"></line>
+                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <p class="composer-foot">
+          <span class="grad-text">MINDI 1.5 Vision-Coder</span> · 8B params · Trained on code &amp; UI data
+        </p>
+      </div>
+
+      <input type="file" id="file-input" accept="image/*" hidden />
+    </main>
+
+    <!-- ============ RIGHT: PREVIEW PANEL ============ -->
+    <aside class="preview" id="preview" aria-label="Code preview panel">
+      <div class="preview-head">
+        <div class="tabs" role="tablist">
+          <button class="tab is-active" data-tab="code" role="tab" aria-selected="true">Code</button>
+          <button class="tab" data-tab="live" role="tab" aria-selected="false">Preview</button>
+          <button class="tab" data-tab="agent" role="tab" aria-selected="false">Agent</button>
+          <button class="tab" data-tab="sections" role="tab" aria-selected="false">Sections</button>
+        </div>
+        <div class="preview-actions">
+          <button class="icon-btn" id="copy-code" title="Copy code" aria-label="Copy code">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+            </svg>
+          </button>
+          <button class="icon-btn" id="download-code" title="Download code" aria-label="Download code">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+              <polyline points="7 10 12 15 17 10"></polyline>
+              <line x1="12" y1="15" x2="12" y2="3"></line>
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- Code tab -->
+      <div class="preview-pane is-active" data-pane="code">
+        <div class="preview-empty" id="empty-code">
+          <div class="preview-empty-icon">{ }</div>
+          <p>Generated code will appear here</p>
+          <p class="muted">Send a prompt to see the last code block from the response.</p>
+        </div>
+        <pre class="code-out" id="code-out" hidden><code class="language-javascript" id="code-out-inner"></code></pre>
+      </div>
+
+      <!-- Live preview tab -->
+      <div class="preview-pane" data-pane="live">
+        <div class="preview-empty" id="empty-live">
+          <div class="preview-empty-icon">⚡</div>
+          <p>Live HTML preview</p>
+          <p class="muted">When the response contains an HTML code block, it'll render here in a sandboxed iframe.</p>
+        </div>
+        <iframe id="live-frame" sandbox="allow-scripts allow-same-origin" title="Live HTML preview" hidden></iframe>
+      </div>
+
+      <!-- Agent tab -->
+      <div class="preview-pane" data-pane="agent">
+        <div class="preview-empty" id="empty-agent">
+          <div class="preview-empty-icon">🤖</div>
+          <p>Agent Workspace</p>
+          <p class="muted">MINDI Agent will plan, generate, execute, verify, and fix code automatically. Steps appear here in real-time.</p>
+        </div>
+        <div class="agent-log" id="agent-log" hidden></div>
+        <div class="agent-sandbox" id="agent-sandbox" hidden></div>
+        <div class="agent-console" id="agent-console" hidden>
+          <div class="agent-console-head">Console Output</div>
+          <pre class="agent-console-body" id="agent-console-body"></pre>
+        </div>
+      </div>
+
+      <!-- Sections tab -->
+      <div class="preview-pane" data-pane="sections">
+        <div class="preview-empty" id="empty-sections">
+          <div class="preview-empty-icon">⌘</div>
+          <p>Parsed model sections</p>
+          <p class="muted">The model emits structured tokens — thinking, code, critique, fix, error, suggest, file. They'll show up here as colored cards.</p>
+        </div>
+        <div class="sections" id="sections" hidden></div>
+      </div>
+    </aside>
+  </div>
+
+  <!-- ============ SETTINGS MODAL ============ -->
+  <div class="modal" id="settings-modal" hidden role="dialog" aria-modal="true" aria-labelledby="settings-title">
+    <div class="modal-backdrop" data-close></div>
+    <div class="modal-card" role="document">
+      <div class="modal-head">
+        <h3 id="settings-title">Settings</h3>
+        <button class="icon-btn" data-close aria-label="Close">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+
+      <div class="modal-body">
+        <label class="field">
+          <span class="field-label">API URL</span>
+          <input id="settings-url" type="url" placeholder="https://mindigenous-mindi-chat.hf.space" autocomplete="off" />
+          <span class="field-hint">Base URL for the MINDI API (HF Space or Modal). Endpoints are appended automatically.</span>
+        </label>
+
+        <label class="field">
+          <span class="field-label">HuggingFace token <em class="field-value" id="hf-token-status">none</em></span>
+          <input id="settings-hf-token" type="password" placeholder="hf_xxxxxxxxxxxxxxxxxxxx" autocomplete="off" spellcheck="false" />
+          <span class="field-hint">Paste a PRO HF token to bypass anonymous ZeroGPU quota. Stored only in this browser. <a href="https://huggingface.co/settings/tokens" target="_blank" rel="noopener">Get a token →</a></span>
+        </label>
+
+        <label class="field">
+          <span class="field-label">Temperature <em class="field-value" id="temp-val">0.7</em></span>
+          <input id="settings-temp" type="range" min="0" max="2" step="0.05" value="0.7" />
+          <span class="field-hint">Lower = more focused. Higher = more creative.</span>
+        </label>
+
+        <label class="field">
+          <span class="field-label">Max tokens <em class="field-value" id="tokens-val">2048</em></span>
+          <input id="settings-tokens" type="range" min="128" max="4096" step="128" value="2048" />
+          <span class="field-hint">Maximum length of the generated response.</span>
+        </label>
+      </div>
+
+      <div class="modal-foot">
+        <button class="btn btn--ghost" data-close>Cancel</button>
+        <button class="btn btn--primary" id="save-settings">Save settings</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ============ TOAST CONTAINER ============ -->
+  <div class="toasts" id="toasts" aria-live="polite" aria-atomic="true"></div>
+
+  <!-- Prism.js core + languages -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-jsx.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-tsx.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
+
+  <script src="sandbox.js"></script>
+  <script src="agent.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>

frontend/sandbox.js

@@ -0,0 +1,305 @@
+/* =============================================================
+   MINDI Agent — Code Sandbox
+   Executes code in isolated environments (iframe for HTML/JS, 
+   Pyodide for Python). Captures output, errors, and screenshots.
+   ============================================================= */
+
+const CodeSandbox = (() => {
+  'use strict';
+
+  // ── Pyodide loader ─────────────────────────────────────
+  let pyodideInstance = null;
+  let pyodideLoading = false;
+
+  async function loadPyodide() {
+    if (pyodideInstance) return pyodideInstance;
+    if (pyodideLoading) {
+      // Wait for existing load
+      while (pyodideLoading) await new Promise(r => setTimeout(r, 200));
+      return pyodideInstance;
+    }
+    pyodideLoading = true;
+    try {
+      // Load Pyodide from CDN
+      if (!window.loadPyodide) {
+        const script = document.createElement('script');
+        script.src = 'https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js';
+        document.head.appendChild(script);
+        await new Promise((res, rej) => { script.onload = res; script.onerror = rej; });
+      }
+      pyodideInstance = await window.loadPyodide();
+      console.log('[Sandbox] Pyodide loaded');
+      return pyodideInstance;
+    } finally {
+      pyodideLoading = false;
+    }
+  }
+
+  // ── HTML/JS execution in sandboxed iframe ──────────────
+  function executeHTML(code, containerEl) {
+    return new Promise((resolve) => {
+      const logs = [];
+      const errors = [];
+      const startTime = Date.now();
+
+      // Create sandboxed iframe
+      let iframe = containerEl.querySelector('.sandbox-iframe');
+      if (iframe) iframe.remove();
+
+      iframe = document.createElement('iframe');
+      iframe.className = 'sandbox-iframe';
+      iframe.sandbox = 'allow-scripts allow-modals';
+      iframe.style.cssText = 'width:100%;height:100%;border:none;background:#fff;border-radius:8px;';
+      containerEl.appendChild(iframe);
+
+      // Inject console capture + error handling into the code
+      const wrappedCode = `
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<script>
+  // Override console to send messages to parent
+  const _origLog = console.log;
+  const _origErr = console.error;
+  const _origWarn = console.warn;
+  
+  function _send(type, args) {
+    try {
+      parent.postMessage({ 
+        type: 'sandbox-' + type, 
+        data: Array.from(args).map(a => {
+          try { return typeof a === 'object' ? JSON.stringify(a, null, 2) : String(a); }
+          catch { return String(a); }
+        }).join(' ')
+      }, '*');
+    } catch {}
+  }
+  
+  console.log = function() { _origLog.apply(console, arguments); _send('log', arguments); };
+  console.error = function() { _origErr.apply(console, arguments); _send('error', arguments); };
+  console.warn = function() { _origWarn.apply(console, arguments); _send('warn', arguments); };
+  
+  window.onerror = function(msg, src, line, col, err) {
+    _send('error', [msg + ' (line ' + line + ')']);
+    return true;
+  };
+  window.addEventListener('unhandledrejection', function(e) {
+    _send('error', ['Unhandled promise rejection: ' + e.reason]);
+  });
+  
+  // Signal ready after load
+  window.addEventListener('load', function() {
+    _send('ready', ['Page loaded in ' + (performance.now()|0) + 'ms']);
+  });
+</script>
+</head>
+<body>
+${code.includes('<body') ? code.replace(/.*<body[^>]*>/is, '').replace(/<\/body>.*/is, '') : (code.includes('<html') ? '' : code)}
+</body>
+</html>`;
+
+      // If code is a full HTML document, use it directly with console injection
+      const finalCode = code.includes('<!DOCTYPE') || code.includes('<html')
+        ? code.replace('<head>', `<head>
+<script>
+  const _origLog = console.log;
+  const _origErr = console.error;
+  function _send(t, a) { try { parent.postMessage({type:'sandbox-'+t,data:Array.from(a).map(x=>{try{return typeof x==='object'?JSON.stringify(x,null,2):String(x)}catch{return String(x)}}).join(' ')},'*'); } catch{} }
+  console.log = function() { _origLog.apply(console,arguments); _send('log',arguments); };
+  console.error = function() { _origErr.apply(console,arguments); _send('error',arguments); };
+  window.onerror = function(m,s,l) { _send('error',[m+' (line '+l+')']); return true; };
+  window.addEventListener('load', function() { _send('ready', ['loaded']); });
+</script>`)
+        : wrappedCode;
+
+      // Listen for messages from iframe
+      const handler = (event) => {
+        if (!event.data || !event.data.type) return;
+        const { type, data } = event.data;
+        if (type === 'sandbox-log') logs.push(data);
+        else if (type === 'sandbox-error') errors.push(data);
+        else if (type === 'sandbox-warn') logs.push(`[warn] ${data}`);
+        else if (type === 'sandbox-ready') {
+          // Give a moment for rendering, then resolve
+          setTimeout(() => {
+            window.removeEventListener('message', handler);
+            resolve({
+              success: errors.length === 0,
+              logs,
+              errors,
+              duration: Date.now() - startTime,
+              iframe,
+            });
+          }, 500);
+        }
+      };
+      window.addEventListener('message', handler);
+
+      // Set content
+      iframe.srcdoc = finalCode;
+
+      // Timeout fallback (10 seconds)
+      setTimeout(() => {
+        window.removeEventListener('message', handler);
+        resolve({
+          success: errors.length === 0,
+          logs,
+          errors: errors.length ? errors : ['Timeout: page did not signal ready within 10s'],
+          duration: Date.now() - startTime,
+          iframe,
+        });
+      }, 10000);
+    });
+  }
+
+  // ── JavaScript execution ───────────────────────────────
+  function executeJS(code) {
+    return new Promise((resolve) => {
+      const logs = [];
+      const errors = [];
+      const startTime = Date.now();
+
+      // Create a sandboxed execution context
+      const origLog = console.log;
+      const origErr = console.error;
+
+      console.log = (...args) => {
+        logs.push(args.map(a => typeof a === 'object' ? JSON.stringify(a, null, 2) : String(a)).join(' '));
+      };
+      console.error = (...args) => {
+        errors.push(args.map(String).join(' '));
+      };
+
+      try {
+        // Execute in indirect eval (global scope)
+        const result = (0, eval)(code);
+        if (result !== undefined) logs.push(String(result));
+      } catch (e) {
+        errors.push(`${e.name}: ${e.message}`);
+      } finally {
+        console.log = origLog;
+        console.error = origErr;
+      }
+
+      resolve({
+        success: errors.length === 0,
+        logs,
+        errors,
+        duration: Date.now() - startTime,
+      });
+    });
+  }
+
+  // ── Python execution via Pyodide ───────────────────────
+  async function executePython(code) {
+    const logs = [];
+    const errors = [];
+    const startTime = Date.now();
+
+    try {
+      const pyodide = await loadPyodide();
+
+      // Redirect stdout/stderr
+      pyodide.runPython(`
+import sys, io
+sys.stdout = io.StringIO()
+sys.stderr = io.StringIO()
+`);
+
+      try {
+        await pyodide.runPythonAsync(code);
+      } catch (e) {
+        errors.push(String(e));
+      }
+
+      // Capture output
+      const stdout = pyodide.runPython('sys.stdout.getvalue()');
+      const stderr = pyodide.runPython('sys.stderr.getvalue()');
+      if (stdout) logs.push(stdout);
+      if (stderr) errors.push(stderr);
+
+      // Reset streams
+      pyodide.runPython(`
+sys.stdout = sys.__stdout__
+sys.stderr = sys.__stderr__
+`);
+    } catch (e) {
+      errors.push(`Pyodide error: ${e.message}`);
+    }
+
+    return {
+      success: errors.length === 0,
+      logs,
+      errors,
+      duration: Date.now() - startTime,
+    };
+  }
+
+  // ── Screenshot capture ─────────────────────────────────
+  async function captureScreenshot(iframe) {
+    try {
+      if (!window.html2canvas) {
+        const script = document.createElement('script');
+        script.src = 'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js';
+        document.head.appendChild(script);
+        await new Promise((res, rej) => { script.onload = res; script.onerror = rej; });
+      }
+      const canvas = await html2canvas(iframe, { useCORS: true, scale: 1 });
+      return canvas.toDataURL('image/png');
+    } catch (e) {
+      console.warn('[Sandbox] Screenshot failed:', e);
+      return null;
+    }
+  }
+
+  // ── Language detection ─────────────────────────────────
+  function detectLanguage(code) {
+    const t = code.trim();
+    if (/^<!doctype|^<html|^<div|^<section|^<main/i.test(t)) return 'html';
+    if (/^<style|^[.#]?\w+\s*\{/.test(t)) return 'css';
+    if (/^(import|from|def |class |print\(|if __name__)/m.test(t)) return 'python';
+    if (/^(import |export |const |function |class |let |var |=>)/m.test(t)) return 'javascript';
+    if (/^(package |func |type |import ")/m.test(t)) return 'go';
+    if (/^(use |fn |let |struct |impl |pub )/m.test(t)) return 'rust';
+    return 'javascript'; // default
+  }
+
+  // ── Main execute function ──────────────────────────────
+  async function execute(code, language = null, containerEl = null) {
+    const lang = language || detectLanguage(code);
+
+    switch (lang) {
+      case 'html':
+      case 'markup':
+      case 'css':
+        if (!containerEl) {
+          return { success: false, errors: ['No container for HTML preview'], logs: [], duration: 0 };
+        }
+        return executeHTML(code, containerEl);
+
+      case 'python':
+        return executePython(code);
+
+      case 'javascript':
+      case 'typescript':
+      case 'js':
+      case 'ts':
+        return executeJS(code);
+
+      default:
+        return {
+          success: false,
+          logs: [],
+          errors: [`Language "${lang}" execution not supported in browser. Supported: HTML, JavaScript, Python.`],
+          duration: 0,
+        };
+    }
+  }
+
+  return { execute, executeHTML, executeJS, executePython, detectLanguage, captureScreenshot };
+})();
+
+// Export for module usage
+if (typeof module !== 'undefined') module.exports = CodeSandbox;

frontend/styles.css

@@ -0,0 +1,1364 @@
+/* =============================================================
+   MINDI 1.5 — Vision-Coder
+   Premium dark UI · glassmorphism · gradient brand
+   ============================================================= */
+
+/* ============ TOKENS ============ */
+:root {
+  /* Surfaces */
+  --bg-0:        #08080d;
+  --bg-1:        #0b0b14;
+  --bg-2:        #0e0e16;
+  --panel:       #14141f;
+  --panel-2:     #1a1a2e;
+  --elevated:    #1f1f33;
+  --hover:       rgba(255, 255, 255, .04);
+  --hover-2:     rgba(255, 255, 255, .07);
+
+  /* Lines */
+  --border:      rgba(255, 255, 255, .06);
+  --border-2:    rgba(255, 255, 255, .10);
+  --border-3:    rgba(255, 255, 255, .16);
+
+  /* Text */
+  --text:        #ececf1;
+  --text-2:      #b4b4c4;
+  --text-mute:   #7a7a8c;
+  --text-dim:    #565669;
+
+  /* Brand */
+  --purple:      #7c3aed;
+  --blue:        #2563eb;
+  --grad:        linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
+  --grad-soft:   linear-gradient(135deg, rgba(124, 58, 237, .18) 0%, rgba(37, 99, 235, .18) 100%);
+  --grad-glow:   linear-gradient(135deg, rgba(124, 58, 237, .55) 0%, rgba(37, 99, 235, .55) 100%);
+
+  /* Status colors */
+  --ok:          #10b981;
+  --warn:        #f59e0b;
+  --err:         #ef4444;
+
+  /* Section card colors */
+  --c-thinking:  #a78bfa; /* purple */
+  --c-code:      #34d399; /* green */
+  --c-critique:  #fbbf24; /* yellow */
+  --c-fix:       #60a5fa; /* blue */
+  --c-error:     #f87171; /* red */
+  --c-suggest:   #5eead4; /* teal */
+  --c-file:      #cbd5e1; /* gray */
+
+  /* Geometry */
+  --r-xs:  6px;
+  --r-sm:  8px;
+  --r-md:  12px;
+  --r-lg:  16px;
+  --r-xl:  20px;
+
+  --sidebar-w:   280px;
+  --preview-w:   420px;
+  --header-h:    56px;
+
+  /* Motion */
+  --ease:        cubic-bezier(.16, 1, .3, 1);
+  --ease-2:      cubic-bezier(.4, 0, .2, 1);
+
+  /* Fonts */
+  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+}
+
+/* ============ RESET ============ */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { height: 100%; }
+body {
+  font-family: var(--sans);
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--text);
+  background: linear-gradient(180deg, var(--bg-0), var(--bg-2));
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+button, input, textarea, select {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  outline: 0;
+}
+button { cursor: pointer; }
+input, textarea { font-family: inherit; }
+a { color: inherit; text-decoration: none; }
+[hidden] { display: none !important; }
+img, svg { display: block; }
+
+/* Scrollbars */
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, .06);
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .12); background-clip: content-box; }
+* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .08) transparent; }
+
+::selection { background: rgba(124, 58, 237, .35); color: #fff; }
+
+/* ============ AMBIENT BACKGROUND ============ */
+.ambient {
+  position: fixed; inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+}
+.grid-pattern {
+  position: absolute; inset: 0;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
+  background-size: 64px 64px;
+  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
+  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
+}
+.blob {
+  position: absolute;
+  width: 640px; height: 640px;
+  border-radius: 50%;
+  filter: blur(120px);
+  opacity: .35;
+  will-change: transform;
+}
+.blob--purple {
+  background: radial-gradient(circle, var(--purple), transparent 70%);
+  top: -180px; left: -120px;
+  animation: drift-1 26s ease-in-out infinite alternate;
+}
+.blob--blue {
+  background: radial-gradient(circle, var(--blue), transparent 70%);
+  bottom: -180px; right: -120px;
+  animation: drift-2 30s ease-in-out infinite alternate;
+}
+@keyframes drift-1 {
+  to { transform: translate(80px, 60px) scale(1.1); }
+}
+@keyframes drift-2 {
+  to { transform: translate(-60px, -80px) scale(1.15); }
+}
+
+/* ============ APP SHELL ============ */
+.app {
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--sidebar-w) 1fr var(--preview-w);
+  height: 100vh;
+  z-index: 1;
+}
+.scrim {
+  position: fixed; inset: 0;
+  background: rgba(0, 0, 0, .55);
+  backdrop-filter: blur(2px);
+  z-index: 30;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .25s var(--ease);
+}
+body.sidebar-open .scrim { opacity: 1; pointer-events: auto; }
+
+/* ============ SIDEBAR ============ */
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: rgba(20, 20, 31, .72);
+  border-right: 1px solid var(--border);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  z-index: 35;
+}
+.sidebar-head {
+  padding: 18px 16px 10px;
+}
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 8px;
+  border-radius: var(--r-md);
+  text-align: left;
+  transition: background .2s var(--ease);
+}
+.brand:hover { background: var(--hover); }
+.brand-mark {
+  flex-shrink: 0;
+  width: 36px; height: 36px;
+  display: grid; place-items: center;
+  border-radius: var(--r-sm);
+  box-shadow: 0 0 24px rgba(124, 58, 237, .4);
+}
+.brand-mark svg { width: 100%; height: 100%; }
+.brand-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.brand-name {
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: -.01em;
+  white-space: nowrap;
+}
+.brand-dot {
+  background: var(--grad);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.brand-version {
+  font-family: var(--mono);
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--text-mute);
+  letter-spacing: .04em;
+}
+
+/* Sidebar actions */
+.sidebar-actions {
+  padding: 8px 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: var(--r-md);
+  font-size: 13px;
+  font-weight: 500;
+  background: var(--panel);
+  border: 1px solid var(--border-2);
+  color: var(--text);
+  transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
+}
+.btn:hover { background: var(--panel-2); border-color: var(--border-3); }
+.btn:active { transform: translateY(1px); }
+.btn svg { width: 16px; height: 16px; }
+.btn--primary {
+  background: var(--grad);
+  border-color: transparent;
+  color: #fff;
+  box-shadow: 0 8px 24px -8px rgba(124, 58, 237, .55);
+}
+.btn--primary:hover { filter: brightness(1.1); box-shadow: 0 10px 30px -8px rgba(124, 58, 237, .7); }
+.btn--ghost { background: transparent; border-color: var(--border-2); }
+.btn--ghost:hover { background: var(--hover); }
+.btn--new {
+  background: var(--grad-soft);
+  border-color: rgba(124, 58, 237, .35);
+  color: var(--text);
+  font-weight: 500;
+  position: relative;
+  overflow: hidden;
+}
+.btn--new::before {
+  content: "";
+  position: absolute; inset: 0;
+  background: var(--grad);
+  opacity: 0;
+  transition: opacity .25s var(--ease);
+  z-index: 0;
+}
+.btn--new:hover::before { opacity: 1; }
+.btn--new > * { position: relative; z-index: 1; }
+.btn--new:hover {
+  border-color: transparent;
+  color: #fff;
+  box-shadow: 0 10px 28px -10px rgba(124, 58, 237, .6);
+}
+
+/* Search */
+.search-wrap {
+  position: relative;
+}
+.search-wrap input {
+  width: 100%;
+  padding: 9px 12px 9px 34px;
+  border-radius: var(--r-md);
+  background: var(--panel);
+  border: 1px solid var(--border);
+  font-size: 13px;
+  color: var(--text);
+  transition: border-color .2s var(--ease), background .2s var(--ease);
+}
+.search-wrap input::placeholder { color: var(--text-mute); }
+.search-wrap input:focus {
+  border-color: rgba(124, 58, 237, .5);
+  background: var(--panel-2);
+  box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
+}
+.search-icon {
+  position: absolute;
+  top: 50%;
+  left: 11px;
+  width: 14px; height: 14px;
+  color: var(--text-mute);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+/* Chat history */
+.chat-history {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 8px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+.history-empty {
+  text-align: center;
+  padding: 32px 12px;
+  color: var(--text-mute);
+}
+.history-empty p { font-size: 13px; }
+.history-empty .muted { color: var(--text-dim); margin-top: 4px; font-size: 12px; }
+
+.history-group { display: flex; flex-direction: column; gap: 2px; }
+.history-group-title {
+  padding: 6px 10px;
+  font-family: var(--mono);
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: .15em;
+  color: var(--text-dim);
+}
+.history-item {
+  display: block;
+  width: 100%;
+  padding: 9px 10px;
+  border-radius: var(--r-sm);
+  font-size: 13px;
+  color: var(--text-2);
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid transparent;
+  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
+}
+.history-item:hover { background: var(--hover); color: var(--text); }
+.history-item.is-active {
+  background: var(--grad-soft);
+  border-color: rgba(124, 58, 237, .25);
+  color: var(--text);
+}
+
+/* Sidebar foot */
+.sidebar-foot {
+  padding: 12px 14px 16px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--text-mute);
+  letter-spacing: .04em;
+}
+.status-dot {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: var(--text-dim);
+  position: relative;
+}
+.status-dot--gray   { background: var(--text-dim); }
+.status-dot--green  { background: var(--ok); box-shadow: 0 0 0 3px rgba(16, 185, 129, .18), 0 0 8px rgba(16, 185, 129, .8); }
+.status-dot--yellow { background: var(--warn); box-shadow: 0 0 0 3px rgba(245, 158, 11, .15), 0 0 8px rgba(245, 158, 11, .7); }
+.status-dot--red    { background: var(--err); box-shadow: 0 0 0 3px rgba(239, 68, 68, .15), 0 0 8px rgba(239, 68, 68, .7); }
+.status-dot--green::after,
+.status-dot--yellow::after {
+  content: ""; position: absolute; inset: 0;
+  border-radius: 50%;
+  background: inherit;
+  animation: ping 2s var(--ease) infinite;
+}
+@keyframes ping {
+  0%   { transform: scale(1); opacity: .8; }
+  100% { transform: scale(2.6); opacity: 0; }
+}
+.hf-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: var(--r-sm);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-2);
+  border: 1px solid var(--border-2);
+  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
+}
+.hf-link:hover { background: var(--hover); color: var(--text); border-color: var(--border-3); }
+.hf-link svg { width: 12px; height: 12px; }
+
+/* ============ CHAT (CENTER) ============ */
+.chat {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: transparent;
+  position: relative;
+  min-width: 0;
+}
+.chat-head {
+  height: var(--header-h);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 18px;
+  border-bottom: 1px solid var(--border);
+  background: rgba(8, 8, 13, .65);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  z-index: 5;
+}
+.chat-title {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: -.005em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.chat-head-actions { display: flex; gap: 4px; }
+.icon-btn {
+  width: 36px; height: 36px;
+  display: grid; place-items: center;
+  border-radius: var(--r-sm);
+  color: var(--text-2);
+  background: transparent;
+  border: 1px solid transparent;
+  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
+}
+.icon-btn:hover { background: var(--hover); color: var(--text); border-color: var(--border-2); }
+.icon-btn svg { width: 18px; height: 18px; }
+.icon-btn--menu { display: none; }
+
+/* Welcome screen */
+.welcome {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 24px 24px;
+  overflow-y: auto;
+  text-align: center;
+}
+.chat.has-messages .welcome { display: none; }
+.welcome-icon {
+  margin-bottom: 28px;
+  animation: float 5.5s ease-in-out infinite;
+}
+.welcome-svg {
+  width: 96px; height: 96px;
+  filter: drop-shadow(0 16px 48px rgba(124, 58, 237, .35));
+}
+@keyframes float {
+  0%, 100% { transform: translateY(0) rotate(-1deg); }
+  50%      { transform: translateY(-12px) rotate(1deg); }
+}
+.welcome-title {
+  font-size: 36px;
+  font-weight: 600;
+  letter-spacing: -.02em;
+  margin-bottom: 12px;
+}
+.grad-text {
+  background: var(--grad);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.welcome-sub {
+  font-size: 15px;
+  color: var(--text-2);
+  max-width: 540px;
+  margin-bottom: 36px;
+  line-height: 1.6;
+}
+.quick-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 240px));
+  gap: 12px;
+  width: 100%;
+  max-width: 520px;
+}
+.quick-card {
+  text-align: left;
+  padding: 18px;
+  border-radius: var(--r-lg);
+  background: rgba(20, 20, 31, .55);
+  border: 1px solid var(--border);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  position: relative;
+  overflow: hidden;
+  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
+}
+.quick-card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: var(--grad);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+  opacity: 0;
+  transition: opacity .25s var(--ease);
+  pointer-events: none;
+}
+.quick-card:hover {
+  transform: translateY(-3px);
+  background: rgba(26, 26, 46, .7);
+  border-color: rgba(124, 58, 237, .25);
+  box-shadow: 0 24px 48px -24px rgba(124, 58, 237, .4);
+}
+.quick-card:hover::after { opacity: 1; }
+.qc-icon {
+  display: inline-block;
+  font-size: 22px;
+  margin-bottom: 8px;
+  filter: drop-shadow(0 4px 12px rgba(124, 58, 237, .35));
+}
+.quick-card h3 {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 4px;
+  letter-spacing: -.005em;
+}
+.quick-card p {
+  font-size: 12.5px;
+  color: var(--text-mute);
+}
+
+/* Messages list */
+.messages {
+  flex: 1;
+  display: none;
+  flex-direction: column;
+  gap: 24px;
+  padding: 28px 24px 16px;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+}
+.chat.has-messages .messages { display: flex; }
+
+.msg {
+  display: flex;
+  gap: 14px;
+  max-width: 880px;
+  margin-inline: auto;
+  width: 100%;
+  animation: msg-in .35s var(--ease) both;
+}
+@keyframes msg-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.msg-avatar {
+  flex-shrink: 0;
+  width: 32px; height: 32px;
+  border-radius: var(--r-sm);
+  display: grid; place-items: center;
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  letter-spacing: -.01em;
+}
+.msg--user .msg-avatar {
+  background: var(--panel-2);
+  border: 1px solid var(--border-2);
+  color: var(--text-2);
+}
+.msg--asst .msg-avatar {
+  background: var(--grad);
+  box-shadow: 0 4px 16px -4px rgba(124, 58, 237, .55);
+}
+.msg-body {
+  flex: 1;
+  min-width: 0;
+}
+.msg-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-mute);
+  margin-bottom: 6px;
+}
+.msg-meta-name {
+  font-weight: 600;
+  color: var(--text);
+}
+.msg--user { flex-direction: row-reverse; }
+.msg--user .msg-body { display: flex; flex-direction: column; align-items: flex-end; }
+.msg--user .msg-meta { justify-content: flex-end; }
+.msg-bubble {
+  font-size: 14.5px;
+  line-height: 1.65;
+  color: var(--text);
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+}
+.msg--user .msg-bubble {
+  background: var(--panel-2);
+  border: 1px solid var(--border-2);
+  border-radius: var(--r-lg);
+  padding: 12px 16px;
+  max-width: 720px;
+}
+.msg-bubble p { margin: 0 0 10px; }
+.msg-bubble p:last-child { margin-bottom: 0; }
+.msg-bubble strong { font-weight: 600; color: #fff; }
+.msg-bubble em { font-style: italic; color: var(--text-2); }
+
+.msg-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.msg-images img {
+  max-width: 220px;
+  max-height: 160px;
+  width: auto; height: auto;
+  border-radius: var(--r-sm);
+  border: 1px solid var(--border-2);
+}
+
+/* Inline / fenced code inside messages */
+.md-inline {
+  font-family: var(--mono);
+  font-size: 13px;
+  background: rgba(124, 58, 237, .15);
+  color: #d8c8ff;
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid rgba(124, 58, 237, .2);
+}
+.md-code-block {
+  margin: 12px 0;
+  background: #0c0c14;
+  border: 1px solid var(--border-2);
+  border-radius: var(--r-md);
+  overflow: hidden;
+  position: relative;
+}
+.md-code-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 14px;
+  font-family: var(--mono);
+  font-size: 11px;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+  color: var(--text-mute);
+  background: rgba(255, 255, 255, .025);
+  border-bottom: 1px solid var(--border);
+}
+.md-code-head span:first-child { color: var(--c-code); font-weight: 500; }
+.md-copy {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--text-mute);
+  padding: 4px 10px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
+}
+.md-copy:hover { background: var(--hover); color: var(--text); border-color: var(--border-2); }
+.md-code-block code {
+  display: block;
+  font-family: var(--mono);
+  font-size: 13px;
+  line-height: 1.6;
+  padding: 14px 16px;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+/* Loading message */
+.msg-loading .msg-bubble {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--r-lg);
+  color: var(--text-mute);
+  font-size: 13px;
+}
+.dots { display: inline-flex; gap: 4px; }
+.dots span {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--purple);
+  opacity: .4;
+  animation: bounce 1.2s var(--ease-2) infinite;
+}
+.dots span:nth-child(2) { animation-delay: .2s; background: #5a4ee9; }
+.dots span:nth-child(3) { animation-delay: .4s; background: var(--blue); }
+@keyframes bounce {
+  0%, 80%, 100% { transform: translateY(0); opacity: .4; }
+  40%           { transform: translateY(-4px); opacity: 1; }
+}
+
+/* ============ COMPOSER ============ */
+.composer-wrap {
+  padding: 12px 24px 16px;
+  flex-shrink: 0;
+}
+.composer {
+  max-width: 880px;
+  margin: 0 auto;
+  background: rgba(20, 20, 31, .85);
+  border: 1px solid var(--border-2);
+  border-radius: var(--r-xl);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
+  overflow: hidden;
+}
+.composer:focus-within {
+  border-color: rgba(124, 58, 237, .55);
+  background: rgba(26, 26, 46, .9);
+  box-shadow:
+    0 0 0 4px rgba(124, 58, 237, .12),
+    0 24px 60px -28px rgba(124, 58, 237, .55);
+}
+.composer-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 12px 14px 4px;
+}
+.composer-image {
+  position: relative;
+  width: 64px; height: 64px;
+  border-radius: var(--r-sm);
+  background-size: cover;
+  background-position: center;
+  border: 1px solid var(--border-2);
+}
+.composer-image-remove {
+  position: absolute;
+  top: -6px; right: -6px;
+  width: 20px; height: 20px;
+  border-radius: 50%;
+  display: grid; place-items: center;
+  background: var(--panel-2);
+  border: 1px solid var(--border-3);
+  color: var(--text);
+  font-size: 11px;
+  line-height: 1;
+  transition: background .2s var(--ease), transform .2s var(--ease);
+}
+.composer-image-remove:hover { background: var(--err); transform: scale(1.1); }
+
+.composer-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  padding: 10px 12px;
+}
+.composer-btn {
+  width: 36px; height: 36px;
+  flex-shrink: 0;
+  display: grid; place-items: center;
+  border-radius: var(--r-sm);
+  color: var(--text-mute);
+  transition: background .2s var(--ease), color .2s var(--ease);
+}
+.composer-btn:hover { background: var(--hover); color: var(--text); }
+.composer-btn svg { width: 18px; height: 18px; }
+
+.composer textarea {
+  flex: 1;
+  font-family: var(--sans);
+  font-size: 14.5px;
+  line-height: 1.55;
+  padding: 8px 4px;
+  color: var(--text);
+  background: transparent;
+  resize: none;
+  max-height: 200px;
+  min-height: 24px;
+  overflow-y: auto;
+}
+.composer textarea::placeholder { color: var(--text-mute); }
+
+.composer-send {
+  flex-shrink: 0;
+  width: 36px; height: 36px;
+  border-radius: var(--r-sm);
+  display: grid; place-items: center;
+  background: var(--grad);
+  color: #fff;
+  transition: filter .2s var(--ease), transform .15s var(--ease), opacity .2s var(--ease), box-shadow .2s var(--ease);
+  box-shadow: 0 4px 16px -6px rgba(124, 58, 237, .5);
+}
+.composer-send:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(124, 58, 237, .7); }
+.composer-send:active:not(:disabled) { transform: translateY(0); }
+.composer-send:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
+.composer-send svg { width: 16px; height: 16px; }
+
+.composer-foot {
+  text-align: center;
+  font-family: var(--mono);
+  font-size: 10.5px;
+  color: var(--text-dim);
+  margin-top: 10px;
+  letter-spacing: .03em;
+}
+
+/* ============ PREVIEW PANEL (RIGHT) ============ */
+.preview {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: rgba(14, 14, 22, .8);
+  border-left: 1px solid var(--border);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  overflow: hidden;
+}
+body.preview-hidden .preview { display: none; }
+.preview-head {
+  height: var(--header-h);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 14px;
+  border-bottom: 1px solid var(--border);
+}
+.tabs {
+  display: inline-flex;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  padding: 3px;
+  gap: 2px;
+}
+.tab {
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-mute);
+  border-radius: 6px;
+  transition: background .2s var(--ease), color .2s var(--ease);
+}
+.tab:hover { color: var(--text); }
+.tab.is-active {
+  background: var(--grad);
+  color: #fff;
+  box-shadow: 0 4px 14px -4px rgba(124, 58, 237, .5);
+}
+.preview-actions { display: flex; gap: 4px; }
+
+/* Preview panes */
+.preview-pane {
+  flex: 1;
+  display: none;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+.preview-pane.is-active { display: flex; }
+.preview-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 24px;
+  text-align: center;
+  color: var(--text-mute);
+  gap: 8px;
+}
+.preview-empty-icon {
+  width: 56px; height: 56px;
+  display: grid; place-items: center;
+  border-radius: var(--r-md);
+  font-family: var(--mono);
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--purple);
+  background: var(--grad-soft);
+  border: 1px solid rgba(124, 58, 237, .25);
+  margin-bottom: 8px;
+}
+.preview-empty p { font-size: 13px; }
+.preview-empty .muted { color: var(--text-dim); font-size: 12px; max-width: 260px; line-height: 1.55; }
+
+/* Code output */
+.code-out {
+  flex: 1;
+  overflow: auto;
+  margin: 0;
+  background: #0c0c14;
+}
+.code-out code {
+  display: block;
+  font-family: var(--mono);
+  font-size: 13px;
+  line-height: 1.65;
+  padding: 16px 18px;
+  white-space: pre;
+}
+
+/* Live HTML preview */
+#live-frame {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  border: 0;
+}
+
+/* Sections */
+.sections {
+  flex: 1;
+  overflow-y: auto;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.section-card {
+  border-radius: var(--r-md);
+  border: 1px solid var(--border-2);
+  background: var(--panel);
+  overflow: hidden;
+}
+.section-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 9px 14px;
+  font-family: var(--mono);
+  font-size: 11px;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  background: rgba(255, 255, 255, .02);
+  border-bottom: 1px solid var(--border);
+}
+.section-card-head .section-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.section-card-head .section-tag::before {
+  content: "";
+  width: 7px; height: 7px;
+  border-radius: 50%;
+  background: var(--c, var(--text-dim));
+  box-shadow: 0 0 8px var(--c, transparent);
+}
+.section-card-head span:last-child {
+  color: var(--text-dim);
+  letter-spacing: .04em;
+  font-size: 10px;
+}
+.section-card-body {
+  padding: 12px 14px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-2);
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+}
+.section-card-body code {
+  font-family: var(--mono);
+  font-size: 12.5px;
+  background: rgba(255, 255, 255, .04);
+  padding: 1px 4px;
+  border-radius: 3px;
+}
+
+.section-card[data-kind="thinking"] { --c: var(--c-thinking); }
+.section-card[data-kind="thinking"] .section-tag { color: var(--c-thinking); }
+.section-card[data-kind="code"]     { --c: var(--c-code); }
+.section-card[data-kind="code"] .section-tag { color: var(--c-code); }
+.section-card[data-kind="critique"] { --c: var(--c-critique); }
+.section-card[data-kind="critique"] .section-tag { color: var(--c-critique); }
+.section-card[data-kind="fix"]      { --c: var(--c-fix); }
+.section-card[data-kind="fix"] .section-tag { color: var(--c-fix); }
+.section-card[data-kind="error"]    { --c: var(--c-error); }
+.section-card[data-kind="error"] .section-tag { color: var(--c-error); }
+.section-card[data-kind="suggest"]  { --c: var(--c-suggest); }
+.section-card[data-kind="suggest"] .section-tag { color: var(--c-suggest); }
+.section-card[data-kind="file"]     { --c: var(--c-file); }
+.section-card[data-kind="file"] .section-tag { color: var(--c-file); }
+
+/* ============ SETTINGS MODAL ============ */
+.modal {
+  position: fixed; inset: 0;
+  display: grid;
+  place-items: center;
+  z-index: 80;
+  padding: 24px;
+  animation: fade-in .2s var(--ease);
+}
+@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
+.modal-backdrop {
+  position: absolute; inset: 0;
+  background: rgba(0, 0, 0, .55);
+  backdrop-filter: blur(6px);
+}
+.modal-card {
+  position: relative;
+  width: min(440px, 100%);
+  background: var(--panel);
+  border: 1px solid var(--border-2);
+  border-radius: var(--r-lg);
+  box-shadow: 0 30px 80px -10px rgba(0, 0, 0, .6);
+  overflow: hidden;
+  animation: pop-in .25s var(--ease);
+}
+@keyframes pop-in {
+  from { opacity: 0; transform: scale(.95) translateY(6px); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
+}
+.modal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--border);
+}
+.modal-head h3 {
+  font-size: 15px;
+  font-weight: 600;
+}
+.modal-body {
+  padding: 16px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.field-label {
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--text);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.field-value {
+  font-family: var(--mono);
+  font-style: normal;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--purple);
+  background: var(--grad-soft);
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid rgba(124, 58, 237, .2);
+}
+.field-hint {
+  font-size: 11.5px;
+  color: var(--text-mute);
+  line-height: 1.5;
+}
+.field input[type="url"],
+.field input[type="password"] {
+  padding: 9px 12px;
+  border-radius: var(--r-sm);
+  border: 1px solid var(--border-2);
+  background: var(--bg-1);
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12.5px;
+  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
+}
+.field input[type="url"]:focus,
+.field input[type="password"]:focus {
+  border-color: rgba(124, 58, 237, .5);
+  box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
+}
+.field input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  background: var(--bg-1);
+  border-radius: 2px;
+  border: 1px solid var(--border);
+}
+.field input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px; height: 16px;
+  border-radius: 50%;
+  background: var(--grad);
+  border: 2px solid #fff;
+  cursor: pointer;
+  box-shadow: 0 0 0 2px rgba(124, 58, 237, .25), 0 4px 12px -2px rgba(124, 58, 237, .55);
+  transition: transform .15s var(--ease);
+}
+.field input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
+.field input[type="range"]::-moz-range-thumb {
+  width: 16px; height: 16px;
+  border-radius: 50%;
+  background: var(--purple);
+  border: 2px solid #fff;
+  cursor: pointer;
+}
+
+.modal-foot {
+  padding: 12px 18px 16px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  border-top: 1px solid var(--border);
+}
+
+/* ============ TOASTS ============ */
+.toasts {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  z-index: 100;
+  pointer-events: none;
+}
+.toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 11px 16px;
+  border-radius: var(--r-md);
+  background: var(--panel-2);
+  border: 1px solid var(--border-2);
+  box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .55);
+  font-size: 13px;
+  color: var(--text);
+  min-width: 240px;
+  max-width: 360px;
+  animation: toast-in .35s var(--ease);
+}
+@keyframes toast-in {
+  from { opacity: 0; transform: translateX(20px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+.toast.is-leaving {
+  animation: toast-out .25s var(--ease) forwards;
+}
+@keyframes toast-out {
+  to { opacity: 0; transform: translateX(20px); }
+}
+.toast-icon {
+  flex-shrink: 0;
+  width: 8px; height: 8px;
+  border-radius: 50%;
+}
+.toast--success .toast-icon { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
+.toast--error   .toast-icon { background: var(--err); box-shadow: 0 0 8px var(--err); }
+.toast--info    .toast-icon { background: var(--blue); box-shadow: 0 0 8px var(--blue); }
+
+/* ============ PRISM OVERRIDES ============ */
+pre[class*="language-"], code[class*="language-"] {
+  background: transparent !important;
+  text-shadow: none !important;
+  font-family: var(--mono) !important;
+}
+.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #6a6a85 !important; font-style: italic; }
+.token.punctuation { color: #b4b4c4 !important; }
+.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #fbbf24 !important; }
+.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #34d399 !important; }
+.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #5eead4 !important; }
+.token.atrule, .token.attr-value, .token.keyword { color: #a78bfa !important; }
+.token.function, .token.class-name { color: #60a5fa !important; }
+.token.regex, .token.important, .token.variable { color: #f87171 !important; }
+
+/* ============ RESPONSIVE ============ */
+@media (max-width: 1180px) {
+  :root { --preview-w: 380px; }
+}
+@media (max-width: 1024px) {
+  .app { grid-template-columns: var(--sidebar-w) 1fr; }
+  .preview {
+    position: fixed;
+    top: 0; right: 0;
+    width: min(420px, 100%);
+    height: 100vh;
+    z-index: 40;
+    transform: translateX(100%);
+    transition: transform .35s var(--ease);
+    border-left: 1px solid var(--border);
+  }
+  body.preview-open .preview { transform: translateX(0); }
+}
+@media (max-width: 768px) {
+  .app { grid-template-columns: 1fr; }
+  .icon-btn--menu { display: grid; }
+  .sidebar {
+    position: fixed;
+    top: 0; left: 0;
+    width: var(--sidebar-w);
+    height: 100vh;
+    transform: translateX(-100%);
+    transition: transform .35s var(--ease);
+  }
+  body.sidebar-open .sidebar { transform: translateX(0); }
+  .welcome-title { font-size: 28px; }
+  .welcome-svg { width: 80px; height: 80px; }
+  .quick-actions { grid-template-columns: 1fr; max-width: 360px; }
+  .composer-wrap { padding: 10px 14px 14px; }
+  .messages { padding: 18px 14px 12px; }
+  .preview { width: 100%; }
+}
+@media (max-width: 480px) {
+  .welcome { padding: 24px 16px 16px; }
+  .welcome-title { font-size: 24px; }
+  .welcome-sub { font-size: 14px; margin-bottom: 24px; }
+}
+
+/* ============ AGENT WORKSPACE ============ */
+.agent-log {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+  overflow-y: auto;
+  max-height: 50%;
+}
+.agent-step {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 14px;
+  border-radius: var(--r-md);
+  background: var(--panel);
+  border: 1px solid var(--border);
+  animation: msg-in .3s var(--ease) both;
+}
+.agent-step-icon {
+  width: 24px; height: 24px;
+  flex-shrink: 0;
+  display: grid; place-items: center;
+  border-radius: 50%;
+  font-size: 12px;
+}
+.agent-step--running .agent-step-icon {
+  background: rgba(124, 58, 237, .2);
+  color: var(--purple);
+  animation: spin 1.2s linear infinite;
+}
+.agent-step--success .agent-step-icon {
+  background: rgba(16, 185, 129, .15);
+  color: var(--ok);
+}
+.agent-step--failed .agent-step-icon {
+  background: rgba(239, 68, 68, .15);
+  color: var(--err);
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.agent-step-body { flex: 1; min-width: 0; }
+.agent-step-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 2px;
+}
+.agent-step-detail {
+  font-size: 12px;
+  color: var(--text-mute);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.agent-sandbox {
+  height: 260px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  margin: 0 14px;
+  overflow: hidden;
+  background: #fff;
+}
+.agent-sandbox .sandbox-iframe {
+  width: 100%; height: 100%;
+  border: none; border-radius: var(--r-md);
+}
+
+.agent-console {
+  margin: 10px 14px 14px;
+  border-radius: var(--r-md);
+  background: #0a0a12;
+  border: 1px solid var(--border);
+  overflow: hidden;
+}
+.agent-console-head {
+  padding: 8px 14px;
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: .1em;
+  color: var(--text-mute);
+  background: rgba(255,255,255,.02);
+  border-bottom: 1px solid var(--border);
+}
+.agent-console-body {
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--c-code);
+  padding: 12px 14px;
+  max-height: 160px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+.agent-console-body .console-error {
+  color: var(--err);
+}
+
+/* ============ REDUCE MOTION ============ */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: .01ms !important;
+    transition-duration: .01ms !important;
+  }
+}

frontend/test_api.py

@@ -0,0 +1,103 @@
+"""Quick test: check if the HF Space API is alive and responsive.
+
+Reads HF_TOKEN from environment (fallback: HUGGINGFACE_TOKEN).
+A PRO token bypasses the anonymous ZeroGPU daily quota.
+"""
+import os, sys, time, json
+import requests
+
+BASE   = os.environ.get("MINDI_API", "https://mindigenous-mindi-chat.hf.space")
+TOKEN  = os.environ.get("HF_TOKEN") or os.environ.get("HUGGINGFACE_TOKEN")
+PROMPT = sys.argv[1] if len(sys.argv) > 1 else "Write hello world in Python"
+MAXTOK = int(sys.argv[2]) if len(sys.argv) > 2 else 256
+
+HEADERS = {"Content-Type": "application/json"}
+if TOKEN:
+    HEADERS["Authorization"] = f"Bearer {TOKEN}"
+    print(f"[auth] HF_TOKEN detected (len={len(TOKEN)}) -> sending Authorization header")
+else:
+    print("[auth] No HF_TOKEN found in env -> anonymous (will likely hit ZeroGPU quota).")
+    print("       Set HF_TOKEN to your PRO HuggingFace token to bypass.")
+
+# 1. Config check
+print("\n=== Step 1: Config check ===")
+for path in ("/gradio_api/config", "/config"):
+    try:
+        r = requests.get(BASE + path, headers=HEADERS, timeout=15)
+        print(f"GET {path} -> {r.status_code}")
+        if r.status_code == 200:
+            d = r.json()
+            print("  Version :", d.get("version", "?"))
+            print("  Protocol:", d.get("protocol", "?"))
+            apis = [x["api_name"] for x in d.get("dependencies", []) if x.get("api_name")]
+            print("  APIs    :", apis)
+            break
+    except Exception as e:
+        print(f"  {path} failed:", e)
+
+# 2. Quick generation test
+print("\n=== Step 2: API generation test ===")
+print(f"Prompt: {PROMPT!r}  |  max_tokens={MAXTOK}")
+try:
+    start = time.time()
+    resp = requests.post(
+        BASE + "/gradio_api/call/chat_fn",
+        headers=HEADERS,
+        json={"data": [PROMPT, None, 0.7, MAXTOK]},
+        timeout=30,
+    )
+    print("Submit status:", resp.status_code)
+    if resp.status_code != 200:
+        print("Error body:", resp.text[:400])
+        sys.exit(1)
+
+    event_id = resp.json().get("event_id")
+    print("Event ID:", event_id)
+    if not event_id:
+        print("No event_id returned:", resp.text[:300])
+        sys.exit(1)
+
+    sse = requests.get(
+        BASE + "/gradio_api/call/chat_fn/" + event_id,
+        headers=HEADERS, timeout=180, stream=True,
+    )
+    print("SSE status :", sse.status_code)
+
+    last_event = None
+    got_complete = False
+    for line in sse.iter_lines(decode_unicode=True):
+        if not line:
+            continue
+        if line.startswith("event: "):
+            last_event = line[7:].strip()
+            continue
+        if not line.startswith("data: "):
+            continue
+        payload = line[6:]
+        if payload in ("null", ""):
+            continue
+        try:
+            parsed = json.loads(payload)
+            raw = parsed[0] if isinstance(parsed, list) else parsed
+            output = json.loads(raw) if isinstance(raw, str) else raw
+            resp_text = output.get("response", "") if isinstance(output, dict) else str(output)
+            sections  = list(output.get("sections", {}).keys()) if isinstance(output, dict) else []
+            elapsed = time.time() - start
+            print(f"\n--- {last_event or 'data'} ({elapsed:.1f}s) ---")
+            print("Length  :", len(resp_text), "chars")
+            print("Sections:", sections)
+            print("Preview :")
+            print(resp_text[:1200])
+            if len(resp_text) > 1200:
+                print(f"... ({len(resp_text)-1200} more chars)")
+            if last_event == "complete":
+                got_complete = True
+        except Exception as e:
+            print(f"Parse error on {last_event}: {e} | raw: {payload[:200]}")
+
+    if not got_complete:
+        print("\n[!] No 'complete' event received.")
+except Exception as e:
+    print("API test failed:", e)
+
+print("\nDone!")

hf_space/README.md

@@ -0,0 +1,11 @@
+---
+title: MINDI 1.5 Vision-Coder API
+emoji: 🧠
+colorFrom: purple
+colorTo: blue
+sdk: gradio
+sdk_version: 5.23.0
+app_file: app.py
+pinned: true
+license: apache-2.0
+---

hf_space/app.py

@@ -0,0 +1,283 @@
+"""
+MINDI 1.5 Vision-Coder — HuggingFace Space (ZeroGPU)
+
+Uses ZeroGPU for free A100 access (40GB VRAM).
+Full bf16 model — NO quantization.
+
+IMPORTANT: All .to("cuda") calls MUST be inside @spaces.GPU decorated functions.
+ZeroGPU only provides GPU access inside those functions.
+"""
+
+import os
+import re
+import gc
+import json
+import torch
+import spaces
+import gradio as gr
+from pathlib import Path
+from PIL import Image
+from huggingface_hub import snapshot_download
+
+# ── Global model reference ──────────────────────────────
+MODEL = None
+TOKENIZER = None
+IS_LOADED = False
+
+# ── Special token definitions ───────────────────────────
+SECTION_TOKENS = {
+    "thinking":  ("<|think_start|>",    "<|think_end|>"),
+    "file":      ("<|file_start|>",     "<|file_end|>"),
+    "code":      ("<|code_start|>",     "<|code_end|>"),
+    "critique":  ("<|critique_start|>", "<|critique_end|>"),
+    "suggest":   ("<|suggest_start|>",  "<|suggest_end|>"),
+    "search":    ("<|search_start|>",   "<|search_end|>"),
+    "error":     ("<|error_start|>",    "<|error_end|>"),
+    "fix":       ("<|fix_start|>",      "<|fix_end|>"),
+}
+
+
+def parse_output(text: str) -> dict:
+    result = {}
+    for section, (start_tok, end_tok) in SECTION_TOKENS.items():
+        pattern = re.escape(start_tok) + r"(.*?)" + re.escape(end_tok)
+        matches = re.findall(pattern, text, flags=re.DOTALL)
+        if matches:
+            result[section] = [m.strip() for m in matches]
+    return result
+
+
+def clean_output(text: str) -> str:
+    text = text.replace("<|im_end|>", "").replace("<|im_start|>", "")
+    text = re.sub(r"^(system|user|assistant)\n?", "", text).strip()
+    return text
+
+
+def download_checkpoint():
+    """Download checkpoint (CPU-safe, no CUDA needed)."""
+    ckpt_dir = Path("/tmp/mindi_ckpt")
+    if not ckpt_dir.exists():
+        print("[MINDI] Downloading checkpoint from HuggingFace...")
+        snapshot_download(
+            "Mindigenous/MINDI-1.5-Vision-Coder",
+            local_dir=str(ckpt_dir),
+            allow_patterns=[
+                "checkpoints/phase3_final/**",
+                "data/tokenizer/**",
+            ],
+        )
+        print("[MINDI] Download complete")
+    return ckpt_dir
+
+
+def load_tokenizer(ckpt_dir):
+    """Load tokenizer (CPU-safe)."""
+    global TOKENIZER
+    if TOKENIZER is not None:
+        return
+
+    from transformers import AutoTokenizer
+    tok_path = ckpt_dir / "data" / "tokenizer" / "mindi_tokenizer"
+    if not tok_path.exists():
+        tok_path = "Qwen/Qwen2.5-Coder-7B-Instruct"
+    TOKENIZER = AutoTokenizer.from_pretrained(str(tok_path), trust_remote_code=True)
+    print(f"[MINDI] Tokenizer loaded: {len(TOKENIZER)} tokens")
+
+
+def load_model_to_gpu(ckpt_dir):
+    """Load model TO GPU — MUST be called inside @spaces.GPU function."""
+    global MODEL, IS_LOADED
+
+    if IS_LOADED:
+        return
+
+    from transformers import (
+        AutoModelForCausalLM,
+        CLIPVisionModel, CLIPImageProcessor,
+    )
+    from peft import PeftModel
+    import torch.nn as nn
+
+    print("[MINDI] Loading full bf16 model to GPU...")
+
+    # Base LLM
+    base_model = AutoModelForCausalLM.from_pretrained(
+        "Qwen/Qwen2.5-Coder-7B-Instruct",
+        torch_dtype=torch.bfloat16,
+        device_map="auto",
+        trust_remote_code=True,
+    )
+    base_model.resize_token_embeddings(len(TOKENIZER))
+    print("[MINDI] Base model loaded (bf16)")
+
+    # LoRA
+    lora_path = ckpt_dir / "checkpoints" / "phase3_final" / "lora"
+    if lora_path.exists():
+        base_model = PeftModel.from_pretrained(base_model, str(lora_path))
+        print("[MINDI] LoRA loaded")
+
+    # CLIP
+    clip_model = CLIPVisionModel.from_pretrained(
+        "openai/clip-vit-large-patch14",
+        torch_dtype=torch.bfloat16,
+    ).to("cuda").eval()
+    clip_processor = CLIPImageProcessor.from_pretrained("openai/clip-vit-large-patch14")
+    print("[MINDI] CLIP loaded")
+
+    # Vision projection
+    class VisionProjection(nn.Module):
+        def __init__(self, clip_dim=1024, llm_dim=3584):
+            super().__init__()
+            self.projection = nn.Linear(clip_dim, llm_dim)
+            self.layer_norm = nn.LayerNorm(llm_dim)
+        def forward(self, x):
+            return self.layer_norm(self.projection(x))
+
+    vision_proj = VisionProjection().to("cuda").to(torch.bfloat16)
+    vision_ckpt = ckpt_dir / "checkpoints" / "phase3_final" / "vision"
+    if vision_ckpt.exists():
+        for f in vision_ckpt.iterdir():
+            if f.suffix in (".pt", ".bin", ".safetensors"):
+                state = torch.load(f, map_location="cuda", weights_only=True)
+                vision_proj.load_state_dict(state, strict=False)
+                print("[MINDI] Vision projection loaded")
+                break
+
+    # Fusion
+    class SimpleFusion(nn.Module):
+        def __init__(self, hidden_size=3584):
+            super().__init__()
+            self.visual_gate = nn.Linear(hidden_size, hidden_size)
+            self.text_gate_param = nn.Parameter(torch.zeros(1))
+            self.layer_norm = nn.LayerNorm(hidden_size)
+        def forward(self, text_embeds, visual_embeds):
+            gated_visual = torch.sigmoid(self.visual_gate(visual_embeds)) * visual_embeds
+            combined = torch.cat([gated_visual, text_embeds], dim=1)
+            return self.layer_norm(combined)
+
+    fusion = SimpleFusion().to("cuda").to(torch.bfloat16)
+    fusion_file = ckpt_dir / "checkpoints" / "phase3_final" / "fusion" / "fusion.pt"
+    if fusion_file.exists():
+        state = torch.load(fusion_file, map_location="cuda", weights_only=True)
+        fusion.load_state_dict(state, strict=False)
+        print("[MINDI] Fusion loaded")
+
+    MODEL = {
+        "llm": base_model,
+        "clip": clip_model,
+        "clip_processor": clip_processor,
+        "vision_proj": vision_proj,
+        "fusion": fusion,
+    }
+    IS_LOADED = True
+
+    vram = torch.cuda.memory_allocated() / 1e9
+    print(f"[MINDI] Ready! VRAM: {vram:.1f} GB")
+
+
+# Pre-download checkpoint and tokenizer at startup (CPU-safe)
+_ckpt_dir = download_checkpoint()
+load_tokenizer(_ckpt_dir)
+
+
+@spaces.GPU(duration=60)
+def generate(prompt: str, image: Image.Image = None,
+             temperature: float = 0.7, max_tokens: int = 2048) -> str:
+    """Generate with full bf16 model. GPU allocated by ZeroGPU."""
+
+    # Load model INSIDE the GPU function
+    load_model_to_gpu(_ckpt_dir)
+
+    system_msg = (
+        "You are MINDI 1.5 Vision-Coder, an expert AI coding assistant. "
+        "When asked for code, respond with complete, working implementations. "
+        "Be concise and provide actual code, not descriptions."
+    )
+    formatted = (
+        f"<|im_start|>system\n{system_msg}<|im_end|>\n"
+        f"<|im_start|>user\n{prompt}<|im_end|>\n"
+        f"<|im_start|>assistant\n"
+    )
+
+    inputs = TOKENIZER(formatted, return_tensors="pt").to("cuda")
+
+    # Vision path
+    if image is not None and MODEL["clip"] is not None:
+        try:
+            pixel_values = MODEL["clip_processor"](
+                images=image, return_tensors="pt"
+            ).pixel_values.to("cuda", dtype=torch.bfloat16)
+
+            with torch.no_grad():
+                clip_out = MODEL["clip"](pixel_values).last_hidden_state
+                visual_tokens = MODEL["vision_proj"](clip_out)
+                text_embeds = MODEL["llm"].get_input_embeddings()(inputs["input_ids"])
+                fused = MODEL["fusion"](text_embeds, visual_tokens)
+
+                outputs = MODEL["llm"].generate(
+                    inputs_embeds=fused,
+                    attention_mask=torch.ones(fused.shape[:2], device="cuda"),
+                    max_new_tokens=int(max_tokens),
+                    temperature=max(float(temperature), 0.01),
+                    do_sample=float(temperature) > 0,
+                    pad_token_id=TOKENIZER.pad_token_id or TOKENIZER.eos_token_id,
+                )
+            return clean_output(TOKENIZER.decode(outputs[0], skip_special_tokens=False))
+        except Exception as e:
+            print(f"[WARN] Vision failed: {e}")
+
+    # Text-only path
+    with torch.no_grad():
+        outputs = MODEL["llm"].generate(
+            **inputs,
+            max_new_tokens=int(max_tokens),
+            temperature=max(float(temperature), 0.01),
+            do_sample=float(temperature) > 0,
+            pad_token_id=TOKENIZER.pad_token_id or TOKENIZER.eos_token_id,
+        )
+    generated = outputs[:, inputs["input_ids"].shape[1]:]
+    return clean_output(TOKENIZER.decode(generated[0], skip_special_tokens=False))
+
+
+# ── Gradio endpoint ─────────────────────────────────────
+
+def chat_fn(message: str, image: Image.Image = None,
+            temperature: float = 0.7, max_tokens: int = 2048) -> str:
+    """Exposed via Gradio API — wraps generate."""
+    try:
+        response = generate(message, image, temperature, max_tokens)
+        sections = parse_output(response)
+        return json.dumps({"response": response, "sections": sections})
+    except Exception as e:
+        error_msg = str(e)
+        if "quota" in error_msg.lower() or "gpu" in error_msg.lower():
+            return json.dumps({"response": f"⚠️ GPU quota exceeded. Please try again later or reduce Max Tokens. Error: {error_msg}", "sections": {"error": [error_msg]}})
+        return json.dumps({"response": f"Error during generation: {error_msg}", "sections": {"error": [error_msg]}})
+
+
+# ── Gradio App ──────────────────────────────────────────
+
+with gr.Blocks(title="MINDI 1.5 API", theme=gr.themes.Soft(
+    primary_hue="purple", secondary_hue="blue",
+)) as demo:
+    gr.Markdown("# 🧠 MINDI 1.5 Vision-Coder API\nFull bf16 on ZeroGPU A100 · No quantization")
+
+    with gr.Row():
+        with gr.Column(scale=3):
+            prompt = gr.Textbox(label="Prompt", placeholder="Write code...", lines=4)
+            image = gr.Image(label="Image (optional)", type="pil")
+        with gr.Column(scale=1):
+            temperature = gr.Slider(0, 2, value=0.7, step=0.1, label="Temperature")
+            max_tokens = gr.Slider(128, 4096, value=2048, step=128, label="Max Tokens")
+            submit_btn = gr.Button("Generate", variant="primary")
+
+    output = gr.Textbox(label="Response (JSON)", lines=20)
+
+    submit_btn.click(
+        fn=chat_fn,
+        inputs=[prompt, image, temperature, max_tokens],
+        outputs=output,
+    )
+
+demo.queue()
+demo.launch()

hf_space/requirements.txt

@@ -0,0 +1,11 @@
+torch
+transformers>=4.40.0
+peft>=0.10.0
+accelerate>=0.30.0
+safetensors
+sentencepiece
+protobuf
+pillow
+gradio>=5.0.0
+huggingface_hub
+spaces