Session 5: Rebuild frontend as Vite+React 3-panel website builder IDE

- Replaced vanilla JS chat with professional IDE (Bolt.new style)
- 3-panel layout: Sidebar (file tree + agent steps) | Editor (animated) | Preview (always-on)
- Plan Modal: asks tech stack + design style before generating
- Prompt Enhancer: transforms raw input into structured prompts
- Code animation: line-by-line fade-in at 15ms intervals
- File tree: real-time population during generation
- Live preview: always-visible iframe with console panel
- Demo fallback: landing page + dashboard demos when API quota exceeded
- Settings: API URL, HF token, temperature, max tokens (localStorage)
- ZeroGPU quota detection: isQuotaError() + isQuotaException() -> auto-fallback
- npm run build: 222KB JS (70KB gzip), 3.25s
- Updated context.md: full architecture + next steps for future sessions
- Updated README.md: current project state

README.md

@@ -1,40 +1,37 @@
 # MINDI 1.5 Vision-Coder
 
-**Built by [MINDIGENOUS.AI](https://mindigenous.ai)**
-
-**Builder:** Faaz ([@Mindigenous](https://huggingface.co/Mindigenous) on HuggingFace)
-
-**Started:** April 14, 2026
-
-**Target Launch:** May 5, 2026
+**Built by [MINDIGENOUS.AI](https://mindigenous.ai)**  
+**Builder:** Faaz ([@Mindigenous](https://huggingface.co/Mindigenous) on HuggingFace)  
+**Started:** April 14, 2026 | **Training Complete:** April 28, 2026 | **Frontend v2:** May 2, 2026
 
 ---
 
 ## What is MINDI 1.5?
 
-MINDI 1.5 Vision-Coder is a multimodal agentic AI coding model that:
+MINDI 1.5 Vision-Coder is a multimodal AI model that generates frontend code (HTML/CSS/JS, React, Next.js, Tailwind) from text prompts and UI screenshots.
+
+- **Architecture:** Qwen2.5-Coder-7B-Instruct + LoRA + CLIP ViT-L/14 + Vision-Language Fusion
+- **Training:** 10,000 steps across 3 phases on AMD MI300X 192GB
+- **Live API:** [Mindigenous/mindi-chat](https://huggingface.co/spaces/Mindigenous/mindi-chat) on HuggingFace Spaces
+
+## Frontend — AI Website Builder
 
-- Generates production-ready Next.js 14 + Tailwind CSS + TypeScript code
-- Sees its own output via vision capabilities (CLIP ViT-L/14)
-- Critiques its own UI/UX design and iterates
-- Searches the internet for latest packages and documentation
-- Tests code in an isolated sandbox environment
-- Fixes its own errors automatically
-- Suggests improvements to the user
+A professional 3-panel IDE (Bolt.new-style) for interacting with MINDI:
 
-## Architecture
+```powershell
+cd frontend
+npm install
+npm run dev   # → http://localhost:5173
+```
 
-- **Base Model:** Open-source coding model (3B-7B parameters, Apache 2.0 / MIT)
-- **Fine-tuning:** LoRA on AMD MI300X 192GB VRAM
-- **Vision Encoder:** CLIP ViT-L/14
-- **Agents:** Search + Sandbox + UI Critic + Code Generation
-- **Training Data:** 500,000+ curated examples
-- **Backend:** FastAPI
-- **Output Format:** Next.js 14 + Tailwind CSS + TypeScript
+Features: Plan modal, prompt enhancement, code animation, live preview, file tree, demo fallback.  
+**Read `context.md` for full architecture and next steps.**
 
 ## HuggingFace
 
-Final model will be published at: `Mindigenous/MINDI-1.5-Vision-Coder`
+- **Model:** `Mindigenous/MINDI-1.5-Vision-Coder` (private)
+- **Dataset:** `Mindigenous/MINDI-1.5-training-data` (private)
+- **Space:** `Mindigenous/mindi-chat` (live, ZeroGPU)
 
 ## License
 

context.md

@@ -1,8 +1,8 @@
 # MINDI 1.5 Vision-Coder — Complete Project Context
 
-> **Last updated:** April 30, 2026 (Session 4)
-> **Purpose:** This file contains ALL context needed to continue development with any AI assistant. 
-> It covers architecture decisions, errors encountered, fixes applied, training state, and exact next steps.
+> **Last updated:** May 2, 2026 (Session 5)
+> **Purpose:** This file contains ALL context needed to continue development with any AI assistant.
+> It covers architecture decisions, errors encountered, fixes applied, training state, frontend state, and exact next steps.
 
 ---
 
@@ -21,791 +21,481 @@
 - **GitHub:** `https://github.com/Faaz345/MINDI-1.5-Vision-Coder.git` (branch: `master`)
 - **HuggingFace Model:** `Mindigenous/MINDI-1.5-Vision-Coder` (private, push as `master:main`)
 - **HuggingFace Dataset:** `Mindigenous/MINDI-1.5-training-data` (private)
+- **HuggingFace Space:** `Mindigenous/mindi-chat` — live Gradio 5.x Space (ZeroGPU)
 - **HF Token:** Set as `HF_TOKEN` environment variable (stored separately, not in repo)
 
 ---
 
-## 2. DIRECTORY STRUCTURE
+## 2. TRAINING STATUS — COMPLETE ✅
 
-```
-MINDI-1.5-Vision-Coder/
-├── src/
-│   ├── model/
-│   │   ├── architecture.py       # Qwen2.5-Coder + LoRA wrapper (NOT nn.Module)
-│   │   ├── mindi_model.py        # MINDI15 main class (nn.Module)
-│   │   ├── vision_encoder.py     # CLIP ViT-L/14 (frozen) + trainable projection
-│   │   ├── fusion_layer.py       # VisionLanguageFusion with text_gate
-│   │   └── __init__.py
-│   ├── training/
-│   │   ├── mindi_trainer.py      # MINDITrainer: 3-phase loop, streaming data
-│   │   ├── data_pipeline.py      # Data processing pipeline
-│   │   └── __init__.py
-│   ├── agents/                   # Agentic pipeline (orchestrator, error fixer, UI critic)
-│   ├── inference/                # Generation pipeline
-│   ├── evaluation/               # Evaluation framework
-│   ├── search/                   # Tavily search agent
-│   ├── sandbox/                  # E2B/Docker code execution
-│   ├── tokenizer/                # MINDI tokenizer wrapper
-│   └── utils/                    # Config & env loaders
-├── scripts/
-│   ├── train.py                  # Master training launcher (--dry_run, --phase, --resume)
-│   ├── download_websight.py      # Download WebSight v0.2 from HF
-│   ├── upload_websight_images.py # Upload images to HF in batches (10K/dir limit)
-│   ├── gpu_diagnostic.py         # 6-stage GPU test for MI300X
-│   └── ... (data processing scripts)
-├── configs/
-│   ├── training_config.yaml      # Training hyperparameters
-│   ├── model_config.yaml         # Model architecture config
-│   ├── data_config.yaml          # Data sources and processing
-│   └── search_config.yaml        # Tavily search settings
-├── data/
-│   ├── processed/                # Text training data (train.jsonl, val.jsonl, test.jsonl)
-│   ├── websight/                 # Vision data (52,500 images in subdirs + JSONL)
-│   │   ├── train.jsonl           # 50,000 vision-code pairs
-│   │   ├── val.jsonl             # 2,500 vision-code pairs
-│   │   └── images/
-│   │       ├── 00/               # ws_0000000.jpg - ws_0009999.jpg (10K each)
-│   │       ├── 01/
-│   │       ├── 02/
-│   │       ├── 03/
-│   │       ├── 04/
-│   │       └── 05/               # ws_0050000.jpg - ws_0052499.jpg (2,500)
-│   ├── tokenizer/
-│   │   ├── mindi_tokenizer/      # Custom tokenizer (vocab 151,685)
-│   │   └── base_tokenizer/       # Original Qwen tokenizer
-│   └── raw/                      # Raw downloaded data sources
-├── api/                          # FastAPI endpoints
-├── checkpoints/                  # Model checkpoints
-├── logs/                         # Training logs
-├── requirements.txt              # Full requirements
-├── requirements-training.txt     # Lean MI300X Docker requirements
-├── setup_mi300x.sh               # MI300X Docker setup script
-├── .gitattributes                # LFS tracking for large tokenizer files
-└── .gitignore
-```
-
----
-
-## 3. ARCHITECTURE DETAILS
-
-### 3.1 Model Components
-
-| Component | Class | File | Params | Trainable |
-|-----------|-------|------|--------|-----------|
-| Base LLM | `MINDIArchitecture` | `architecture.py` | 7.62B | No (frozen) |
-| LoRA | via PEFT | `architecture.py` | 161.5M | Yes |
-| CLIP Vision | `VisionEncoder` | `vision_encoder.py` | 304M | 4.2M (projection only) |
-| Fusion | `VisionLanguageFusion` | `fusion_layer.py` | 16.8M | Yes |
-| **Total** | `MINDI15` | `mindi_model.py` | **8.1B** | **182.5M (2.25%)** |
+All 3 phases of MINDI 1.5 Vision-Coder training are COMPLETE:
 
-### 3.2 CRITICAL Architecture Notes
+| Phase | Steps | Status | Platform |
+|-------|-------|--------|----------|
+| Phase 1 (LoRA) | 5,000 | ✅ Complete | DigitalOcean MI300X |
+| Phase 2 (Vision Bridge) | 2,500 | ✅ Complete | DigitalOcean MI300X |
+| Phase 3 (Joint) 0→1500 | 1,500 | ✅ Complete | DigitalOcean MI300X |
+| Phase 3 (Joint) 1500→2500 | 1,000 | ✅ Complete | Modal A100-40GB |
 
-1. **`MINDIArchitecture` is NOT an `nn.Module`** — it's a plain Python wrapper class. The actual trainable PeftModel is accessed via `self.architecture.get_model()` and registered as `self.llm` in `MINDI15.__init__()`.
+**Final loss:** 0.25–0.40 range  
+**VRAM:** 17.2 GB on A100-40GB  
+**All checkpoints:** Uploaded to `checkpoints/` in HF model repo
 
-2. **`self.llm = self.architecture.get_model()`** — This line in `mindi_model.py` registers the PeftModel as a proper submodule so `model.parameters()` can find LoRA params. Without this, the optimizer gets zero trainable parameters.
+### HuggingFace Checkpoints (Mindigenous/MINDI-1.5-Vision-Coder)
+- Phase 1: 16 checkpoints (step250 → step5000)
+- Phase 2: 10 checkpoints (step250 → step2500)
+- Phase 3: `phase3_all_step500`, `step1000`, `step1500`, `step2000`, `phase3_all_step2500_final`, `phase3_final`
 
-3. **Vision encoder uses `float32` projection** — CLIP backbone is frozen, only `self.projection` (Linear 1024→4096) trains. The projection operates in float32 for stability even though the rest is bf16.
+---
 
-4. **Fusion layer has `text_gate`** — A learnable scalar parameter (init=0) that creates a residual path for text-only inputs. This ensures gradients flow to the fusion layer during Phase 2 even when processing text-only batches (which have no vision tokens and would otherwise be pure passthrough with no gradient).
+## 3. LIVE API — HuggingFace SPACE
 
-### 3.3 Forward Pass Flow
+**Space URL:** `https://mindigenous-mindi-chat.hf.space`  
+**Space ID:** `Mindigenous/mindi-chat`  
+**Framework:** Gradio 5.23.0 (ZeroGPU)  
+**Protocol:** SSE v3 — two-step: POST to submit → GET to stream result
 
-```
-Image → CLIP (frozen) → 256 patches (1024) → projection (4096) → visual_tokens
-Text → tokenizer → input_ids → LLM embedding layer → text_embeds
+### API Call Pattern (Gradio 5.x SSE v3)
 
-With image:   fusion = [gated_visual_tokens; text_embeds]  (prepend)
-Without image: fusion = text_embeds + sigmoid(text_gate) * (transformed - text_embeds)
+```javascript
+// Step 1: Submit job
+POST https://mindigenous-mindi-chat.hf.space/gradio_api/call/chat_fn
+Headers: { "Content-Type": "application/json", "Authorization": "Bearer hf_..." }
+Body: { "data": [prompt, imageArg, temperature, maxTokens, historyJson] }
+Response: { "event_id": "..." }
 
-fusion → LLM layers (with LoRA) → logits → loss (cross-entropy, labels=-100 for padding)
+// Step 2: Stream result
+GET https://mindigenous-mindi-chat.hf.space/gradio_api/call/chat_fn/{event_id}
+Parse SSE: find "event: complete" → next line "data: [...]"
+Parse data[0] as JSON: { response: "...", sections: {} }
 ```
 
-### 3.4 LoRA Configuration
+### ZeroGPU Quota
+- **Anonymous users:** Very low quota (hits "GPU task aborted" error quickly)
+- **Authenticated users (HF token):** ~8× higher quota
+- **Quota errors throw as exceptions** with message containing "GPU task aborted" or "zerogpu"
+- **Fix:** Always send `Authorization: Bearer <HF_TOKEN>` header
 
+### Gradio Function Signature
 ```python
-LoraConfig(
-    r=64,
-    lora_alpha=128,
-    lora_dropout=0.05,
-    target_modules=["q_proj", "k_proj", "v_proj", "o_proj", "gate_proj", "up_proj", "down_proj"],
-    bias="none",
-    task_type=TaskType.CAUSAL_LM,
-)
-```
-
-### 3.5 MINDI Special Tokens (22 total, 11 pairs)
-
-```
-<|think_start|> / <|think_end|>         — Internal reasoning
-<|code_start|> / <|code_end|>           — Generated code blocks
-<|file_start|> / <|file_end|>           — File references
-<|critique_start|> / <|critique_end|>   — Self-critique
-<|suggest_start|> / <|suggest_end|>     — Suggestions
-<|search_start|> / <|search_end|>       — Search context
-<|error_start|> / <|error_end|>         — Error messages
-<|fix_start|> / <|fix_end|>             — Fix attempts
-<|vision_start|> / <|vision_end|>       — Vision input markers
-<|sandbox_start|> / <|sandbox_end|>     — Sandbox execution
-<|context_start|> / <|context_end|>     — Context block
+# hf_space/app.py — chat_fn
+def chat_fn(prompt: str, image: dict|None, temperature: float, max_tokens: int, history_json: str) -> str:
+    # Returns JSON string: {"response": "...", "sections": {...}}
 ```
 
 ---
 
-## 4. TRAINING PIPELINE
-
-### 4.1 Three-Phase Training Strategy
+## 4. FRONTEND — NEW VITE + REACT WEBSITE BUILDER ⭐ (Session 5 Work)
 
-| Phase | Name | Steps | LR | Batch | Components | Data | Purpose |
-|-------|------|-------|-----|-------|-----------|------|---------|
-| 1 | `phase1_lora` | 5,000 | 2e-4 | 16 | LoRA only | Text-only code | Teach coding patterns |
-| 2 | `phase2_vision_bridge` | 2,500 | 1e-5 | 8 | Vision+Fusion | WebSight images | Align visual tokens |
-| 3 | `phase3_all` | 2,500 | 5e-5 | 12 | All trainable | Mixed text+vision | Joint fine-tuning |
+### What Was Built (May 2, 2026)
 
-**Total: 10,000 steps**
+The old vanilla HTML/CSS/JS chat frontend was completely replaced with a **professional 3-panel website builder IDE** (similar to Bolt.new / v0.dev), built with Vite + React.
 
-### 4.2 Training Data
+**The old frontend is backed up in:** `frontend/_legacy/`
 
-**Text data (Phase 1 + Phase 3):**
-- `data/processed/train.jsonl` — 1,304,486 examples, 4.18 GB
-- `data/processed/val.jsonl` — 72,471 examples
-- Sources: CodeAlpaca, CodeFeedback, EvolCode, MagicCoder, StarCoder (5 langs), Synthetic Next.js
+### How to Run
 
-**Vision data (Phase 2 + Phase 3):**
-- `data/websight/train.jsonl` — 50,000 image+code pairs, 114 MB JSONL
-- `data/websight/val.jsonl` — 2,500 image+code pairs, 5.7 MB JSONL
-- `data/websight/images/` — 52,500 JPG screenshots in 6 subdirectories (11.6 GB)
-- Source: HuggingFaceM4/WebSight v0.2 (UI screenshot → HTML/CSS pairs)
-
-**WebSight JSONL format:**
-```json
-{
-  "id": "websight_0000001",
-  "type": "vision_code",
-  "source": "websight_v0.2",
-  "image_path": "data/websight/images/00/ws_0000001.jpg",
-  "messages": [
-    {"role": "system", "content": "You are MINDI 1.5 Vision-Coder..."},
-    {"role": "user", "content": "<|vision_start|><|vision_end|>\nGenerate the HTML/CSS code for this UI screenshot."},
-    {"role": "assistant", "content": "<|think_start|>...<|think_end|>\n<|code_start|>\n...HTML/CSS...\n<|code_end|>"}
-  ],
-  "metadata": {"dataset": "websight", "version": "v0.2"}
-}
+```powershell
+cd "d:\Desktop 31st Jan 2026\MINDI 1.5 vision-coder\frontend"
+npm install          # only first time
+npm run dev          # starts at http://localhost:5173
 ```
 
-**IMPORTANT:** Images are organized in subdirectories of ≤10,000 files each because HuggingFace has a 10K files/directory limit. The JSONL `image_path` fields reference the subdirectory structure (e.g., `data/websight/images/00/ws_0000001.jpg`).
+### New Frontend Structure
 
-### 4.3 Data Loading
-
-- **`StreamingJSONLDataset`** (in `mindi_trainer.py`) — Streams from disk line-by-line, tokenizes on-the-fly
-- **Shuffle buffer** of 10,000 examples (reservoir-style)
-- **Image loading** via `_load_image()` — loads PIL images from relative paths
-- **Custom collate function** — stacks tensors, keeps images as a list
-- **Phase routing** — Phase 1 uses text data, Phase 2 uses WebSight, Phase 3 uses text (with inline images if present)
-
-### 4.4 Key Training Features
-
-- **bf16 precision** — Required for MI300X stability (NOT fp16)
-- **Gradient checkpointing** — Enabled even with 192GB VRAM
-- **torch.compile()** — Optional, works on ROCm
-- **Cosine LR with warmup** — Per-phase schedules
-- **Gradient accumulation** — Configurable per phase (default: 4)
-- **Emergency checkpoint** — Saved on Ctrl+C
-- **Crash checkpoint** — Saved on unhandled exceptions
-
----
-
-## 5. TRAINING HISTORY & RESULTS
-
-### 5.1 Phase 1 Dry Run — SUCCESS ✅
-
-**Date:** April 15, 2026 (on DigitalOcean MI300X)
-**Command:** `python3 scripts/train.py --dry_run --no_wandb`
-**Result:** Loss dropped from 1.94 → 0.85 in 10 steps, completed in 12.1 minutes
-**VRAM usage:** ~14.3 GB
-
-### 5.2 Phase 2 — First Attempt FAILED ❌
-
-**Error:** `element 0 of tensors does not require grad and does not have a grad_fn`
-**Root cause:** Phase 2 trains vision+fusion with LoRA frozen. Text-only data means fusion is pure passthrough (no gradient path). The fusion layer was getting zero gradients because without vision tokens, the text-only path was `return text_embeds, attention_mask` — a pure passthrough with no learnable operation.
-**Fix:** Added `text_gate` learnable residual parameter to `VisionLanguageFusion`. Text-only path changed to: `text_embeds + sigmoid(text_gate) * (transformed - text_embeds)`. Also built the WebSight vision data pipeline to provide actual image+code pairs for Phase 2.
-
-### 5.3 Full 3-Phase Dry Run — NOT YET COMPLETED
-
-The MI300X GPU kept hanging/wedging (see Section 6). Phase 2 and 3 with the new WebSight data pipeline have NOT been tested yet.
-
----
-
-## 6. ERRORS & FIXES — COMPLETE HISTORY
-
-### 6.1 GPU Hang #1 — HSA_OVERRIDE_GFX_VERSION
-
-**Symptom:** GPU completely unresponsive. `torch.cuda.get_device_name(0)` returns blank, any CUDA operation hangs.
-**Root cause:** `HSA_OVERRIDE_GFX_VERSION=11.0.0` was set in the Docker container. This conflicts with ROCm 7.0's native MI300X/gfx942 support.
-**Fix:** Do NOT set `HSA_OVERRIDE_GFX_VERSION`. ROCm 7.0 natively supports gfx942. Remove it from all scripts/env.
-**Commit:** `4a33f96 Remove HSA_OVERRIDE_GFX_VERSION`
-
-### 6.2 No Trainable Parameters in Optimizer
-
-**Symptom:** `RuntimeError: No trainable parameters in phase 'phase1_lora'`
-**Root cause:** `MINDIArchitecture` is a plain Python class (not `nn.Module`). When `MINDI15` calls `model.parameters()`, it doesn't find the LoRA parameters because the PeftModel isn't registered as a submodule.
-**Fix:** Added `self.llm = self.architecture.get_model()` in `MINDI15.__init__()` to register the PeftModel as a proper nn.Module submodule. Updated `forward()` and `generate()` to use `self.llm` instead of `self.architecture.get_model()`.
-**Commit:** `cdc806e Fix: register LLM as nn.Module submodule so optimizer finds LoRA params`
-
-### 6.3 extra_special_tokens Format Error
-
-**Symptom:** `TypeError` when loading tokenizer — transformers 4.55 expects `extra_special_tokens` as a dict, not a list.
-**Fix:** Changed `data/tokenizer/mindi_tokenizer/tokenizer_config.json`: converted `extra_special_tokens` from list format to `{"token_name": {"content": "..."}}` dict format.
-**Commit:** `02eef51 Fix extra_special_tokens: list to dict for transformers 4.55`
-
-### 6.4 Phase 2 Gradient Flow Crash
-
-**Symptom:** `element 0 of tensors does not require grad and does not have a grad_fn` during Phase 2
-**Root cause:** Text-only data → no vision tokens → fusion is pure passthrough → no gradient path to fusion parameters.
-**Fix:** (1) Added `text_gate` learnable residual gate in `VisionLanguageFusion` for text-only gradient flow. (2) Built WebSight vision data pipeline with actual image+code pairs.
-**Commit:** `4e9835e Fix Phase 2: fusion layer processes text-only via learnable residual gate`
-
-### 6.5 Git LFS Issues
+```
+frontend/
+├── index.html                    # Shell with Google Fonts (Inter + JetBrains Mono)
+├── package.json                  # Vite 8.x + React 19 + prismjs + lucide-react
+├── vite.config.js                # Vite config
+├── _legacy/                      # Old vanilla JS chat frontend (backed up)
+└── src/
+    ├── main.jsx                  # React entry point
+    ├── index.css                 # Design system (CSS tokens, reset, animations)
+    ├── App.jsx                   # Main app — all state management + generation flow
+    ├── App.css                   # All layout + component styles (3-panel IDE)
+    ├── components/
+    │   ├── Sidebar.jsx           # File tree + Agent Progress + status indicator
+    │   ├── Editor.jsx            # Code editor with line-by-line animation + tabs
+    │   ├── Preview.jsx           # Always-visible iframe preview + Console panel
+    │   ├── PromptBar.jsx         # Bottom prompt input (auto-resize, send/stop)
+    │   ├── PlanModal.jsx         # Clarifying questions (tech stack, design style)
+    │   ├── SettingsModal.jsx     # API URL, HF token, temperature, max tokens
+    │   └── Toasts.jsx            # Toast notifications
+    └── services/
+        ├── api.js                # Gradio SSE v3 integration + auth + demo fallback
+        ├── promptEnhancer.js     # Analyzes prompt → asks questions → structured prompt
+        └── fileParser.js         # Extracts files from model response markdown
+```
 
-**Symptom:** `tokenizer.json` files >10MB causing push failures to HuggingFace.
-**Fix:** Configured `.gitattributes` for LFS tracking. Ran `git lfs migrate import` to rewrite history. Force-pushed to both GitHub and HF.
-**Commit:** `161c946 Track large tokenizer files with Git LFS`
+### Layout
 
-### 6.6 HuggingFace Auth for MI300X Clone
+```
+┌──────────────┬─────────────────────────┬──────────────────┐
+│  SIDEBAR     │     CODE EDITOR          │   LIVE PREVIEW   │
+│  (260px)     │  (flex: 1)               │   (420px)        │
+│              │                          │                  │
+│  MINDI 1.5   │  🌐 index.html           │  ● Preview       │
+│  brand       │  1  <!DOCTYPE html>      │  [Rendered HTML] │
+│              │  2  <html lang="en">     │                  │
+│  FILES (1)   │  3  <head>               │                  │
+│  🌐 index.   │  ...                     │  CONSOLE         │
+│  html        │                          │  > Page rendered │
+│              │                          │                  │
+│  AGENT       │                          │                  │
+│  PROGRESS    │                          │                  │
+│  ✅ Enhancing│                          │                  │
+│  ✅ Generating│                         │                  │
+│  ✅ Complete  │                         │                  │
+│              │                          │                  │
+│  ● MINDI ·   │                          │                  │
+│    Connected │                          │                  │
+├──────────────┴─────────────────────────┴──────────────────┤
+│  [Describe what you want to build...]              [Send]  │
+│  MINDI 1.5 Vision-Coder               Shift+Enter new line │
+└───��────────────────────────────────────────────────────────┘
+```
 
-**Symptom:** `git clone` from HF failed with auth error in Docker container.
-**Fix:** Use token as both username and password: `https://hf_TOKEN:hf_TOKEN@huggingface.co/Mindigenous/MINDI-1.5-Vision-Coder.git`
-Also needed: `apt-get install -y git-lfs && git lfs install`
+### Key Features
 
-### 6.7 GPU Hang #2 — Driver Wedge After Heavy I/O
+1. **Plan Modal** — When user submits prompt without specifying tech stack or theme, a "Configure Your Project" modal appears with:
+   - Tech stack: HTML+CSS+JS / React / Next.js / Vue
+   - Design style: Dark / Light / Gradient / Minimal
+   - "Skip & Generate" and "Generate ⚡" buttons
 
-**Symptom:** After interrupted HF upload + training attempt, GPU shows 100% utilization with 0% VRAM in `rocm-smi`. Even `torch.randn(device='cuda')` hangs. Docker restart insufficient.
-**Kernel log:** `amdgpu: GPU reset begin!` → `device wedged, but recovered through reset` → But GPU% stays at 100%.
-**Fix:** 
-1. `docker stop rocm`
-2. `echo 1 > /sys/bus/pci/devices/0000:83:00.0/reset` (PCI address from `lspci | grep AMD`)
-3. If GPU% still 100%: `modprobe -r amdgpu && modprobe amdgpu`
-4. Verify `rocm-smi` shows GPU% = 0% before restarting Docker
-**Status:** Droplet was deleted. Session 2 is on `134.199.197.198`.
+2. **Prompt Enhancer** (`src/services/promptEnhancer.js`) — Transforms raw input into structured prompts with design requirements, responsiveness rules, font choices, no-placeholder rules.
 
-### 6.8 HuggingFace Upload Limits
+3. **Code Animation** — Lines appear one by one at 15ms intervals with `line-appear` CSS animation as code generates.
 
-**Symptom:** `413 Payload Too Large` (25K files/commit) and `400 Bad Request` (10K files/directory)
-**Fix:** Reorganized 52,500 images into 6 subdirectories of ≤10K files (`00/` through `05/`). Upload in separate commits per subdirectory. Updated JSONL `image_path` fields to include subdirectory.
-**Script:** `scripts/upload_websight_images.py`
+4. **File Tree** — Files parsed from model response appear in sidebar with fade-in animation. Click to switch active file in editor.
 
----
+5. **Live Preview** — Always-visible iframe on right renders HTML output. "Open in new tab" and "Copy HTML" buttons.
 
-## 7. MI300X DEPLOYMENT
+6. **Demo Fallback** — When API quota exceeded or any error occurs, pre-built demo responses for common prompts (landing page, dashboard) render automatically. No white screen.
 
-### 7.1 Infrastructure
+7. **Settings** — Click the MINDI logo (top-left) to open Settings: configure API URL, HF Token, Temperature, Max Tokens.
 
-- **Provider:** DigitalOcean GPU Droplet
-- **GPU:** AMD Instinct MI300X (192GB HBM3 VRAM)
-- **Cost:** $1.99/hr
-- **Docker container:** Named `rocm`, accessed via `docker exec -it rocm /bin/bash`
-- **ROCm/HIP:** 7.0.51831-a3e329ad8
-- **PyTorch:** 2.9.0.dev20250821+rocm7.0.0
-- **Python:** 3.10
+### Error Handling in api.js
 
-### 7.2 Critical Environment Variables
+```javascript
+// Two separate detection mechanisms:
+isQuotaError(result)     // Response-level: checks result.response + result.sections.error
+isQuotaException(errMsg) // Exception-level: checks thrown error message
 
-```bash
-export HF_TOKEN=<your-hf-token>     # Get from HF settings page
-export HF_HUB_DISABLE_PROGRESS_BARS=1
-export PYTORCH_ROCM_ARCH=gfx942
-export TOKENIZERS_PARALLELISM=false
-# DO NOT SET: HSA_OVERRIDE_GFX_VERSION (causes GPU hang on ROCm 7.0)
+// Both match: zerogpu | gpu quota | gpu task aborted | task aborted | unlogged user
 ```
 
-### 7.3 Fresh Droplet Setup Procedure
-
-```bash
-# 1. SSH into droplet
-ssh root@<DROPLET_IP>
-
-# 2. Verify GPU health on host (must show 0% GPU)
-rocm-smi
-
-# 3. Start Docker
-docker start rocm
-docker exec -it rocm /bin/bash
-
-# 4. Set environment (inside Docker)
-export HF_TOKEN=<your-hf-token>     # Get from HF settings page
-export HF_HUB_DISABLE_PROGRESS_BARS=1
-export PYTORCH_ROCM_ARCH=gfx942
-export TOKENIZERS_PARALLELISM=false
-
-# 5. Quick GPU test
-python3 -c "import torch; print('GPU:', torch.cuda.get_device_name(0)); x=torch.randn(100,device='cuda'); print('OK:', x.sum().item())"
-
-# 6. Install git-lfs (ignore AMD artifactory DNS warning — harmless)
-apt-get update && apt-get install -y git-lfs
-git lfs install
-
-# 7. Clone code repo
-cd /workspace
-git clone https://$HF_TOKEN:$HF_TOKEN@huggingface.co/Mindigenous/MINDI-1.5-Vision-Coder.git
-cd MINDI-1.5-Vision-Coder
-
-# 8. Install requirements
-pip install -r requirements-training.txt
+When quota error detected → immediately falls back to `generateDemo(prompt)` which returns pre-built HTML.
 
-# 9. Download training data from HF dataset repo
-#    NOTE: Use git clone, NOT snapshot_download (which hits HTTP 429 rate limits)
-#    NOTE: Must rm -rf data first — code repo creates an empty data/ directory
-rm -rf data
-git clone https://$HF_TOKEN:$HF_TOKEN@huggingface.co/datasets/Mindigenous/MINDI-1.5-training-data data
+### Demo Responses Available
+- `/landing|hero|page|website/i` → Lumina landing page (Tailwind, gradient, features section)
+- `/dashboard|chart|analytics|admin/i` → Pulsegrid dashboard (sidebar, stat cards, bar chart)
+- Default → Simple MINDI hello card
 
-# 10. Verify data
-wc -l data/processed/train.jsonl data/processed/val.jsonl
-wc -l data/websight/train.jsonl data/websight/val.jsonl
-for d in data/websight/images/0*/; do echo "$d: $(ls $d | wc -l) files"; done
-
-# 11. Create output directories
-mkdir -p checkpoints/training checkpoints/best logs/training
+### Settings Persistence
+Saved in `localStorage` under key `mindi.builder.v1`:
+```json
+{
+  "apiUrl": "https://mindigenous-mindi-chat.hf.space",
+  "hfToken": "hf_...",
+  "temperature": 0.7,
+  "maxTokens": 2048
+}
+```
 
-# 12. Run GPU diagnostic
-python3 scripts/gpu_diagnostic.py
+---
 
-# 13. Dry run (test all 3 phases before full training)
-python3 scripts/train.py --dry_run --no_wandb
+## 5. DIRECTORY STRUCTURE (Full Project)
 
-# 14. Full training (background, survives SSH disconnect)
-nohup python3 scripts/train.py --no_wandb > /workspace/training.log 2>&1 &
 ```
-
-### 7.4 GPU Hang Recovery (if it happens again)
-
-```bash
-# From HOST (not inside Docker):
-docker stop rocm
-echo 1 > /sys/bus/pci/devices/0000:83:00.0/reset   # PCI address may differ
-rocm-smi  # Verify GPU% = 0%
-# If still 100%:
-modprobe -r amdgpu && modprobe amdgpu
-rocm-smi  # Should show 0% now
-docker start rocm
+MINDI-1.5-Vision-Coder/
+├── src/                          # Model source code
+│   ├── model/
+│   │   ├── architecture.py       # Qwen2.5-Coder + LoRA wrapper (NOT nn.Module)
+│   │   ├── mindi_model.py        # MINDI15 main class (nn.Module)
+│   │   ├── vision_encoder.py     # CLIP ViT-L/14 (frozen) + trainable projection
+│   │   ├── fusion_layer.py       # VisionLanguageFusion with text_gate
+│   │   └── __init__.py
+│   ├── training/
+│   │   ├── mindi_trainer.py      # MINDITrainer: 3-phase loop, streaming data
+│   │   ├── data_pipeline.py      # Data processing pipeline
+│   │   └── __init__.py
+│   └── ...
+├── scripts/
+│   ├── train.py                  # Master training launcher
+│   ├── download_websight.py
+│   ├── upload_websight_images.py
+│   └── gpu_diagnostic.py
+├── hf_space/
+│   ├── app.py                    # Gradio Space — live at Mindigenous/mindi-chat
+│   └── requirements.txt
+├── frontend/                     # ⭐ NEW: Vite + React website builder
+│   ├── index.html
+│   ├── package.json
+│   ├── _legacy/                  # Old vanilla JS chat (backup)
+│   └── src/                      # (see Section 4 above)
+├── api/                          # FastAPI endpoints (future)
+├── modal_api.py                  # Modal.com A100 API server
+├── modal_train.py                # Modal.com training script
+├── data/                         # Local training data
+├── configs/                      # Training configs
+├── context.md                    # ← THIS FILE
+└── ...
 ```
 
-### 6.9 HuggingFace snapshot_download Rate Limit (HTTP 429)
+---
 
-**Symptom:** `HTTP Error 429 thrown while requesting GET .../tree/main` during `snapshot_download()`. Retries endlessly.
-**Root cause:** The dataset has 52,500+ image files. `snapshot_download` paginates through the HF tree API listing all files, causing rate limiting.
-**Fix:** Use `git clone` instead of `snapshot_download` for the dataset:
-```bash
-rm -rf data
-git clone https://$HF_TOKEN:$HF_TOKEN@huggingface.co/datasets/Mindigenous/MINDI-1.5-training-data data
-```
-This downloads everything in a single git connection without hitting the API rate limiter.
-**Discovered:** April 16, 2026 — Session 2
+## 6. ARCHITECTURE DETAILS
 
-### 6.10 Bash History Expansion with Exclamation Mark
+### 6.1 Model Components
 
-**Symptom:** `bash: !': event not found` when running `python3 -c "...print('Done!')"` in a single line.
-**Root cause:** Bash interprets `!'` inside double quotes as history expansion.
-**Fix:** Use multi-line python commands (with actual newlines between double quotes) instead of single-line. Or use single quotes around the python code.
-**Discovered:** April 16, 2026 — Session 2
+| Component | Class | File | Params | Trainable |
+|-----------|-------|------|--------|-----------|
+| Base LLM | `MINDIArchitecture` | `architecture.py` | 7.62B | No (frozen) |
+| LoRA | via PEFT | `architecture.py` | 161.5M | Yes |
+| CLIP Vision | `VisionEncoder` | `vision_encoder.py` | 304M | 4.2M (projection only) |
+| Fusion | `VisionLanguageFusion` | `fusion_layer.py` | 16.8M | Yes |
+| **Total** | `MINDI15` | `mindi_model.py` | **8.1B** | **182.5M (2.25%)** |
 
-### 6.11 Data Directory Already Exists on Clone
+### 6.2 CRITICAL Architecture Notes
 
-**Symptom:** `fatal: destination path 'data' already exists and is not an empty directory` when trying to `git clone ... data`.
-**Root cause:** The code repo clone creates an empty `data/` directory structure.
-**Fix:** `rm -rf data` before cloning the dataset repo.
-**Discovered:** April 16, 2026 — Session 2
+1. **`MINDIArchitecture` is NOT an `nn.Module`** — it's a plain Python wrapper. The actual trainable PeftModel is accessed via `self.architecture.get_model()` and registered as `self.llm` in `MINDI15.__init__()`.
 
----
+2. **`self.llm = self.architecture.get_model()`** — Required so `model.parameters()` finds LoRA params.
 
-## 8. HF DATASET REPO STRUCTURE
+3. **Fusion layer has `text_gate`** — Learnable scalar (init=0) for gradient flow during text-only batches.
 
-**Repo:** `Mindigenous/MINDI-1.5-training-data` (private, type: dataset)
+### 6.3 MINDI Special Tokens (22 total, 11 pairs)
 
 ```
-├── .gitattributes
-├── README.md
-├── processed/
-│   ├── train.jsonl              # 1.3M text examples
-│   ├── val.jsonl
-│   ├── test.jsonl
-│   ├── filter_report.json
-│   ├── mindi_filtered.jsonl
-│   └── split_meta.json
-├── raw/                         # Original data sources (11 files)
-├── tokenizer/
-│   ├── base_tokenizer/
-│   └── mindi_tokenizer/
-└── websight/
-    ├── train.jsonl              # 50K vision-code JSONL
-    ├── val.jsonl                # 2.5K vision-code JSONL
-    └── images/
-        ├── 00/                  # 10,000 JPGs
-        ├── 01/                  # 10,000 JPGs
-        ├── 02/                  # 10,000 JPGs
-        ├── 03/                  # 10,000 JPGs
-        ├── 04/                  # 10,000 JPGs (uploading as of April 16)
-        └── 05/                  # 2,500 JPGs  (uploading as of April 16)
+<|think_start|> / <|think_end|>         — Internal reasoning
+<|code_start|> / <|code_end|>           — Generated code blocks
+<|file_start|> / <|file_end|>           — File references
+<|critique_start|> / <|critique_end|>   — Self-critique
+<|suggest_start|> / <|suggest_end|>     — Suggestions
+<|search_start|> / <|search_end|>       — Search context
+<|error_start|> / <|error_end|>         — Error messages
+<|fix_start|> / <|fix_end|>             — Fix attempts
+<|vision_start|> / <|vision_end|>       — Vision input markers
+<|sandbox_start|> / <|sandbox_end|>     — Sandbox execution
+<|context_start|> / <|context_end|>     — Context block
 ```
 
-**NOTE:** As of April 16, 2026, subdirectories 00-03 are uploaded. 04 and 05 are being uploaded via `scripts/upload_websight_images.py`. If upload was interrupted, re-run the script — it skips already-uploaded subdirs.
-
 ---
 
-## 9. GIT HISTORY (CHRONOLOGICAL)
+## 7. HF SPACE — app.py KEY DETAILS
 
-```
-553fbf7 feat: initial project scaffold for MINDI 1.5 Vision-Coder
-11e0d89 Day 1 Complete: Tokenizer setup — 22 MINDI special tokens (vocab 151,685)
-59c6c97 Day 2 COMPLETE: 1.48M examples processed, 6GB dataset, WebSight done
-2ff5c54 Day 3 COMPLETE: Full model architecture (7 files)
-1c36b28 Fix train.py: mem -> memory on line 225
-f04f58b Fix setup_mi300x.sh step 2 + add project context summary
-35fd5fc Fix setup_mi300x.sh for Docker container on MI300X droplet
-5fb9ec3 Add GPU diagnostic script, fix architecture loading with sync
-161c946 Track large tokenizer files with Git LFS
-4a33f96 Remove HSA_OVERRIDE_GFX_VERSION - ROCm 7.0 native MI300X support
-24b5fb1 Add requirements-training.txt for MI300X Docker
-02eef51 Fix extra_special_tokens: list to dict for transformers 4.55
-cdc806e Fix: register LLM as nn.Module submodule so optimizer finds LoRA params
-4e9835e Fix Phase 2: fusion layer text_gate for gradient flow
-672896a Add WebSight vision data pipeline: download, image-aware loader, phase routing
-```
+**File:** `hf_space/app.py`
 
----
+### System Prompt (no identity hallucination fix)
+The system prompt explicitly states: "You are MINDI 1.5 Vision-Coder, created by Mindigenous. You are NOT GPT-4, Claude, or any other AI..."
 
-## 10. WHAT WORKS (VERIFIED) ✅
+### chat_fn Signature
+```python
+@spaces.GPU(duration=60)
+def chat_fn(prompt, image, temperature, max_tokens, history_json):
+    # history_json is a JSON string of [{"role": ..., "content": ...}, ...]
+    # Returns: JSON string {"response": "...", "sections": {...}}
+```
 
-1. **Tokenizer** — 151,685 vocab with 22 MINDI special tokens, loads correctly
-2. **Model initialization** — MINDI15 loads all 4 components, 182.5M trainable params
-3. **GPU diagnostic** — All 6 tests pass (bf16 matmul, 1GB alloc, CPU→CUDA transfer, forward pass)
-4. **Phase 1 dry run** — Loss 1.94 → 0.85 in 10 steps ✅
-5. **WebSight download** — 52,500 images (11.6 GB) downloaded and organized
-6. **Data format** — JSONL with image_path references, streaming dataset works
-7. **Git LFS** — Large tokenizer files tracked correctly
-8. **Code pushed** — All code on GitHub master + HF model repo main
+### Gradio Interface
+```python
+gr.Interface(
+    fn=chat_fn,
+    inputs=[
+        gr.Textbox(label="Prompt"),
+        gr.Image(type="filepath", label="Image"),
+        gr.Slider(0, 2, value=0.7, label="Temperature"),
+        gr.Slider(128, 4096, value=2048, label="Max Tokens"),
+        gr.Textbox(label="History JSON", visible=False),
+    ],
+    outputs=gr.Textbox(label="Response"),
+    api_name="chat_fn"
+)
+```
 
 ---
 
-## 11. WHAT REMAINS (TODO) ❌
-
-1. ~~**Complete WebSight upload to HF**~~ — Check if subdirs 04 and 05 are uploaded; re-run upload script if needed
-2. **Full 3-phase dry run** — Phase 2 (WebSight) and Phase 3 (mixed) NOT yet tested with the vision pipeline
-3. **Full production training** — 10,000 steps total (Phase 1: 5K, Phase 2: 2.5K, Phase 3: 2.5K)
-4. **Inference testing** — Generate code from screenshots after training
-5. **Commit `upload_websight_images.py` and `context.md`** — These new files need to be pushed
-
-### Session 2 Status (April 16, 2026)
-- ✅ Fresh droplet spun up at `134.199.197.198`
-- ✅ Docker container started, GPU healthy (0% util, 45°C)
-- ✅ Code repo cloned, dependencies installed
-- ✅ GPU diagnostic: All 6 tests passed (bf16 matmul, 1GB alloc, forward pass)
-- ⚠️ Data download: multiple rate limits (snapshot_download → git clone → git-lfs → hf_hub_download retries)
-- ✅ All data downloaded: 1.3M text + 50K WebSight JSONL + 52,500 images
-- ✅ Phase 1 dry run PASSED: loss 18.87 → 8.05 in 10 steps (10.8 min)
-- ✅ Phase 2 dry run PASSED: loss 1.46 → 1.19, val_loss 1.32 in 10 steps (6.2 min)
-- ✅ Phase 3 dry run PASSED: loss 14.10 → 9.71, val_loss 9.72 in 10 steps (8.2 min)
-- ✅ Checkpoint upload to HF fixed (.gitignore was blocking *.pt, *.safetensors — removed model file patterns)
-- ✅ Auto-push script running (pushes latest checkpoint to HF every 2 hours — fixed alphabetic sorting bug)
-- ✅ Resume bug fixed: train() now skips completed phases and resumes mid-phase correctly
-- ⏳ Phase 1 training: step 4500/5000, val_loss 0.5372 — on 3rd droplet (165.245.141.141)
-- ⏳ Image download running: ~8300/52500 images (needed for Phase 2)
-- 💰 Budget: ~$91 on current account, more accounts available
-- 📋 Plan: finish Phase 1 → Phase 2 → Phase 3, auto-push checkpoints to HF
+## 8. KNOWN ERRORS & FIXES HISTORY
+
+### Training Errors (all fixed ✅)
+| # | Error | Fix |
+|---|-------|-----|
+| 6.1 | GPU hang — HSA_OVERRIDE_GFX_VERSION | Do NOT set this var on ROCm 7.0 |
+| 6.2 | No trainable params in optimizer | `self.llm = self.architecture.get_model()` |
+| 6.3 | extra_special_tokens format error | Changed from list to dict in tokenizer_config.json |
+| 6.4 | Phase 2 gradient flow crash | Added `text_gate` residual in VisionLanguageFusion |
+| 6.5 | Git LFS push failures | `.gitattributes` + `git lfs migrate import` |
+| 6.6 | HF auth for MI300X clone | Use token as both username+password in git URL |
+| 6.7 | GPU hang after heavy I/O | PCI reset: `echo 1 > /sys/bus/pci/devices/0000:83:00.0/reset` |
+| 6.8 | HF upload limits (10K/dir, 25K/commit) | Reorganized images into 6 subdirs |
+| 6.9 | snapshot_download HTTP 429 | Use `git clone` instead |
+| 6.10 | Bash history expansion `!'` | Use multi-line python or single-quoted strings |
+| 6.11 | Data dir already exists on clone | `rm -rf data` before cloning dataset repo |
+
+### Frontend API Errors (all fixed ✅)
+| # | Error | Fix |
+|---|-------|-----|
+| 6.12 | `handleSend` ReferenceError in old app.js | `let activeSend = send` pattern (now in _legacy) |
+| 6.13 | Gradio 3.x → 5.x API mismatch (404 on /api/predict) | Rewrote to SSE v3 two-step flow |
+| 6.14 | Health check misdetects Space as offline | Use `fetch(base, {mode:'no-cors'})` for HF Spaces |
+| 6.15 | GPU quota blocks demo — no fallback | `isQuotaError()` + `isQuotaException()` → auto demo |
+| 6.16 | handlePlanSubmit catch had no demo fallback | Added demo fallback to all catch blocks in App.jsx |
 
 ---
 
-## 12. KNOWN ISSUES & GOTCHAS
+## 9. SESSION HISTORY
 
-### DO NOT:
-- Set `HSA_OVERRIDE_GFX_VERSION=11.0.0` — kills GPU on ROCm 7.0
-- Use `fp16` on MI300X — use `bf16` for stability
-- Try to upload >10K files to a single HF directory — split into subdirs
-- Try to commit >25K files in a single HF commit — batch commits
-- Use the global Python (base env) on Windows — use venv (global torch DLL is broken)
-
-### WATCH OUT FOR:
-- GPU hanging after heavy I/O — check `rocm-smi` shows 0% GPU before training
-- Data paths — WebSight images use **relative paths** from project root in JSONL
-- `MINDIArchitecture` is NOT `nn.Module` — always use `self.llm` inside MINDI15
-- The `text_gate` in fusion starts at 0 (sigmoid=0.5) — this is intentional
-- On MI300X, Docker container named `rocm` — always `docker exec -it rocm /bin/bash`
+| Session | Date | Key Work |
+|---------|------|----------|
+| 1 | April 15, 2026 | Phase 1 dry run. GPU hang resolved. |
+| 2 | April 16, 2026 | Phase 1 training 0→4250. WebSight data uploaded. |
+| 3 | April 19–28, 2026 | Phase 1→2→3 complete. Model deployed to HF Space. |
+| 4 | April 30, 2026 | Fixed Gradio API protocol. HF token auth. ZeroGPU quota handling. Agent scaffolded. |
+| 5 | May 2, 2026 | **Rebuilt frontend as Vite+React 3-panel IDE.** Prompt enhancer, plan modal, code animation, live preview, file tree, demo fallback. |
 
 ---
 
-## 13. COMMANDS REFERENCE
-
-### Local (Windows, PowerShell, in venv):
-```powershell
-# Activate venv
-& ".\venv\Scripts\Activate.ps1"
+## 10. WHAT WORKS ✅
+
+1. **Model training** — All 3 phases complete, checkpoints on HF
+2. **HF Space** — Live at `Mindigenous/mindi-chat`, Gradio 5.x SSE v3
+3. **New Frontend (Vite+React)** — `http://localhost:5173`
+   - 3-panel IDE (Sidebar | Editor | Preview)
+   - Plan Modal (tech stack + design style questions)
+   - Prompt Enhancer (raw input → structured prompt)
+   - Code animation (line-by-line fade-in)
+   - File tree (real-time population during generation)
+   - Live preview (always-visible iframe)
+   - Demo fallback (landing page + dashboard demos)
+   - Settings modal (API URL, HF token, temperature)
+   - ZeroGPU quota detection + auto-fallback
+4. **Build** — `npm run build` → 222KB JS (70KB gzip), 3.25s
 
-# Download WebSight
-$env:HF_TOKEN="<your-hf-token>"
-python scripts/download_websight.py --num_train 50000 --num_val 2500
-
-# Upload WebSight images to HF (handles subdirs, retry, skip)
-python scripts/upload_websight_images.py
-
-# Push code to GitHub + HF
-git push origin master
-git push hf master:main
-```
-
-### MI300X (Linux, Docker, inside container):
-```bash
-# Dry run (10 steps per phase)
-python3 scripts/train.py --dry_run --no_wandb
+---
 
-# Full training
-python3 scripts/train.py --no_wandb
+## 11. WHAT REMAINS ❌
 
-# Single phase
-python3 scripts/train.py --phase 1 --no_wandb
-python3 scripts/train.py --phase 2 --no_wandb
-python3 scripts/train.py --phase 3 --no_wandb
+### High Priority
+1. **Add HF token to Settings** — Without token, demo fallback always used. Real MINDI output requires `hf_...` token in Settings modal.
+2. **Make suggestion pills clickable** — "Landing Page", "Dashboard" etc. chips on welcome screen should trigger generation when clicked.
+3. **Syntax highlighting** — Add Prism.js token coloring to the code editor.
 
-# Resume from checkpoint
-python3 scripts/train.py --resume checkpoints/training/phase1_lora_step5000 --no_wandb
+### Medium Priority
+4. **Vision loop** — Feed preview screenshots back to MINDI for automated visual QA (captureScreenshot → base64 → callMINDI).
+5. **Multi-file support** — Model generates single-file HTML currently. Add prompt instruction for `// filename:` markers to split into HTML/CSS/JS.
+6. **Download project button** — Let user download generated files as a ZIP.
 
-# GPU diagnostic
-python3 scripts/gpu_diagnostic.py
-```
+### Low Priority
+7. **WebContainer SDK** — For projects that need Node.js execution (Next.js, npm packages).
+8. **Fine-tuning for multi-file output** — Train on structured output format with `// filename:` markers.
+9. **Deploy frontend** — Host on Vercel or GitHub Pages (free).
 
 ---
 
-## 14. NEXT SESSION CHECKLIST
+## 12. NEXT SESSION CHECKLIST
 
-When continuing with a new AI assistant:
+When starting a new AI assistant session:
 
-1. **Open this directory** in your IDE
-2. **Read this file first** to get full context
-3. **Check WebSight upload status:**
+1. **Read this file** first (most important)
+2. **Run frontend:**
    ```powershell
-   python -c "import os; from huggingface_hub import HfApi; api=HfApi(token=os.environ['HF_TOKEN']); files=[f for f in api.list_repo_files('Mindigenous/MINDI-1.5-training-data', repo_type='dataset') if 'websight/images' in f]; print(f'{len(files)} images in HF repo')"
+   cd "d:\Desktop 31st Jan 2026\MINDI 1.5 vision-coder\frontend"
+   npm run dev
+   # Opens at http://localhost:5173
    ```
-4. If <52,500: re-run `python scripts/upload_websight_images.py`
-5. **Push any uncommitted files:**
-   ```bash
-   git add scripts/upload_websight_images.py context.md
-   git commit -m "Add WebSight batch uploader and project context"
-   git push origin master
-   git push hf master:main
-   ```
-6. **Spin up fresh MI300X droplet** on DigitalOcean
-7. **Follow Section 7.3** for setup procedure
-8. **IMPORTANT:** Use `git clone` for data download (NOT `snapshot_download` — see Section 6.9)
-9. **IMPORTANT:** `rm -rf data` before cloning dataset repo (see Section 6.11)
-10. **Run dry run first** to verify all 3 phases work
-11. **Then full training** — `nohup python3 scripts/train.py --no_wandb > /workspace/training.log 2>&1 &`
+3. **Add HF token** in Settings (click MINDI logo → Settings → paste `hf_...` token)
+4. **Test with real MINDI model** — type "landing page", skip plan modal, verify real response comes back
+5. **Continue from "What Remains" section** above — start with suggestion chips or syntax highlighting
 
 ---
 
-## 15. DATA FILE LOCATIONS ON HF DATASET REPO
-
-When cloning data on MI300X using `snapshot_download`, files will land at:
-
-| HF Repo Path | Local Path (relative to project root) |
-|---|---|
-| `processed/train.jsonl` | `data/processed/train.jsonl` |
-| `processed/val.jsonl` | `data/processed/val.jsonl` |
-| `websight/train.jsonl` | `data/websight/train.jsonl` |
-| `websight/val.jsonl` | `data/websight/val.jsonl` |
-| `websight/images/00/*.jpg` | `data/websight/images/00/*.jpg` |
-| `tokenizer/mindi_tokenizer/*` | `data/tokenizer/mindi_tokenizer/*` |
-
-The `snapshot_download(local_dir='data')` call places everything correctly because the HF repo structure mirrors the local `data/` directory.
-
----
+## 13. COMMANDS REFERENCE
 
-## 16. APRIL 16, 2026 — MAIN TRAINING COMMANDS
+### Frontend (Windows PowerShell)
+```powershell
+# Run dev server
+cd "d:\Desktop 31st Jan 2026\MINDI 1.5 vision-coder\frontend"
+npm run dev                    # http://localhost:5173
 
-### Data Download (git clone — NOT snapshot_download)
+# Build for production
+npm run build                  # dist/ folder
 
-```bash
-# Inside Docker, after cloning code repo:
-rm -rf data
-git clone https://$HF_TOKEN:$HF_TOKEN@huggingface.co/datasets/Mindigenous/MINDI-1.5-training-data data
+# Check build
+npx vite build 2>&1 | Select-Object -Last 10
 ```
 
-### Training — Background (Recommended, survives SSH disconnect)
-
-```bash
-# From inside Docker:
-nohup python3 scripts/train.py --no_wandb > /workspace/training.log 2>&1 &
-echo $! > /workspace/training.pid
+### Git
+```powershell
+git add -A
+git commit -m "..."
+git push origin master         # GitHub
+git push hf master:main        # HuggingFace
 ```
 
-Or from the **host** (also survives SSH disconnect):
-
-```bash
-docker exec -d rocm bash -lc 'cd /workspace/MINDI-1.5-Vision-Coder && export HF_TOKEN=<your-hf-token> && export PYTORCH_ROCM_ARCH=gfx942 && python3 scripts/train.py --no_wandb > /workspace/training.log 2>&1'
+### Local (Windows, PowerShell, in venv)
+```powershell
+& ".\venv\Scripts\Activate.ps1"
+$env:HF_TOKEN="<your-hf-token>"
+python scripts/download_websight.py --num_train 50000 --num_val 2500
+python scripts/upload_websight_images.py
 ```
 
-### Training — Interactive (Foreground)
-
+### MI300X (if spinning up again)
 ```bash
-python3 scripts/train.py --no_wandb 2>&1 | tee /workspace/training.log
-```
+export HF_TOKEN=<your-hf-token>
+export PYTORCH_ROCM_ARCH=gfx942
+export TOKENIZERS_PARALLELISM=false
+# DO NOT SET: HSA_OVERRIDE_GFX_VERSION
 
-### Monitoring
+# GPU test
+python3 -c "import torch; print('GPU:', torch.cuda.get_device_name(0)); x=torch.randn(100,device='cuda'); print('OK:', x.sum().item())"
 
-```bash
-docker exec rocm tail -f /workspace/training.log   # Live logs
-docker exec rocm rocm-smi                           # GPU usage
-docker exec rocm ps aux | grep train.py             # Process check
+# Full training
+nohup python3 scripts/train.py --no_wandb > /workspace/training.log 2>&1 &
 ```
 
-Notes:
-- Use the background command if you want the process detached from your SSH session.
-- The `scripts/train.py` launcher does not accept a `--log_file` flag; redirect output into `/workspace/training.log` instead.
-- Line-buffered stdout has been added to `src/training/mindi_trainer.py` so logs should appear in near real-time when using `tail -f`.
-
-## 17. DROPLET HISTORY
-
-| Session | Date | Droplet IP | Status | Notes |
-|---------|------|-----------|--------|-------|
-| 1 | April 15, 2026 | `134.199.194.245` | Deleted | Phase 1 dry run passed. GPU hung during heavy I/O. |
-| 2 | April 16, 2026 | `134.199.197.198` | Deleted | Phase 1 steps 0→4250 completed. Credits exhausted. |
-| 3 | April 19, 2026 | `165.245.141.141` | Active | Phase 1 resumed at step 4250. Resume bug fixed. |
-
----
-
-*This context file was created on April 16, 2026 during Claude Opus 4.6 session to ensure project continuity.*
-*Updated on April 16, 2026 — Session 2: snapshot_download 429 fix, bash escaping, fresh droplet setup.*
-*Updated on April 28, 2026 — Training complete, frontend built, API deployed.*
-*Updated on April 30, 2026 — Session 4: Fixed critical frontend bugs, Gradio 5.x API protocol, ZeroGPU quota handling.*
-
 ---
 
-## 22. SESSION 4 — April 30, 2026
-
-### Bugs Found & Fixed
-
-**Bug 6.12: `handleSend` ReferenceError (app.js)**
-- **Symptom:** Agent integration broken on page load — `const _originalSend = handleSend` throws ReferenceError because `handleSend` was never defined (the actual function is `send`)
-- **Fix:** Changed to `let activeSend = send` pattern — init() overrides `activeSend = handleSendWithAgent` when MINDIAgent is available. Eliminated duplicate keydown event handlers.
-- **File:** `frontend/app.js`
-
-**Bug 6.13: Gradio 5.x API protocol mismatch**
-- **Symptom:** `POST /api/predict` returns 404 — the frontend used old Gradio 3.x API format
-- **Root cause:** HF Space runs Gradio 5.23.0 which uses SSE v3 protocol with `/gradio_api/call/{api_name}` (two-step: POST to submit → GET to stream result)
-- **Fix:** Rewrote `callGenerate()` to use the Gradio 5.x two-step flow: POST `/gradio_api/call/chat_fn` → get event_id → GET `/gradio_api/call/chat_fn/{event_id}` → parse SSE response for `event: complete` data
-- **File:** `frontend/app.js`
-- **Config reference:** `GET /config` returns `{"api_prefix": "/gradio_api", "protocol": "sse_v3", "dependencies": [{"api_name": "chat_fn"}]}`
-
-**Bug 6.14: Health check misdetects Gradio Space as offline**
-- **Symptom:** Status shows "Demo Mode" even when Space is running
-- **Root cause:** `pingHealth()` tried `/api/health` (doesn't exist on Gradio) then `/api/predict` (old format → 404)
-- **Fix:** For HF Spaces, use `fetch(base, {mode:'no-cors'})` which succeeds if the Space is reachable
-- **File:** `frontend/app.js`
-
-**Improvement: ZeroGPU quota error handling**
-- Reduced `@spaces.GPU(duration=120)` → `@spaces.GPU(duration=60)` (inference is fast after model cache)
-- Added try-except in `chat_fn()` to return clean JSON error instead of crashing when GPU quota exceeded
-- **File:** `hf_space/app.py`
-
-### Session 4 Status
-- ✅ Frontend bugs fixed (handleSend reference, duplicate handlers)
-- ✅ Gradio 5.x API protocol implemented (SSE v3 two-step flow)
-- ✅ Health check fixed — shows green "MINDI · HF Space" status
-- ✅ Space updated on HF — `Mindigenous/mindi-chat`
-- ⚠️ ZeroGPU daily quota limit can block visitors — PRO users get 8x more quota
-- ✅ Agent system (agent.js + sandbox.js) scaffolded — Plan→Generate→Execute→Verify→Fix loop
-- 📋 Next: Wait for quota reset, then test full end-to-end flow with real model inference
-
-### Training Summary
-All 3 phases of MINDI 1.5 Vision-Coder training are COMPLETE:
-
-| Phase | Steps | Status | Platform |
-|-------|-------|--------|----------|
-| Phase 1 (LoRA) | 5,000 | ✅ Complete | DigitalOcean MI300X |
-| Phase 2 (Vision Bridge) | 2,500 | ✅ Complete | DigitalOcean MI300X |
-| Phase 3 (Joint) steps 0-1500 | 1,500 | ✅ Complete | DigitalOcean MI300X |
-| Phase 3 (Joint) steps 1500-2500 | 1,000 | ✅ Complete | Modal A100-40GB |
-
-### Modal Training Details
-- Resumed from step 1500 checkpoint on Modal A100-40GB ($2.10/hr)
-- Config patched at runtime: batch_size=2, max_length=2048 (from 6/4096)
-- Total Modal cost: ~$28 ($30 credits)
-- Final loss: 0.25–0.40 range
-
-### HuggingFace Checkpoints (Mindigenous/MINDI-1.5-Vision-Coder)
-All checkpoints uploaded to `checkpoints/` directory:
-- Phase 1: 16 checkpoints (step250 → step5000)
-- Phase 2: 10 checkpoints (step250 → step2500)
-- Phase 3: `phase3_all_step500`, `step1000`, `step1500`, `step2000`, `phase3_all_step2500_final`, `phase3_final`
-
-### Model Test Results (April 28, 2026)
-- ✅ Code generation (text-only): Matrix exponentiation fibonacci
-- ✅ HTML/CSS generation: Gradient + responsive design
-- ✅ Vision (image input): Processed dummy image
-- ✅ Agentic (bug fix): Identified subtraction→addition bug
-- VRAM usage: 17.2 GB (A100-40GB)
-
----
-
-## 19. FRONTEND
-
-### Location: `frontend/`
-- `index.html` — Three-panel layout (sidebar + chat + code preview)
-- `styles.css` — Premium dark theme with purple/blue gradients
-- `app.js` — Chat logic, image upload, code extraction, demo mode
-
-### Features
-- Chat interface with code block rendering (Prism.js)
-- Image upload for vision-to-code
-- Code preview panel with tabs (Code / Preview / Sections)
-- Special token parsing (thinking, critique, fix, error)
-- Demo mode (works without API — simulated responses)
-- Settings modal (double-click MINDI logo) to configure API endpoint
-- Responsive design (mobile + desktop)
-
-### To Run Locally
-```bash
-cd frontend
-python -m http.server 8080
-# Open http://localhost:8080
+## 14. DESIGN SYSTEM (Frontend)
+
+CSS variables defined in `src/index.css`:
+
+```css
+--bg-0: #07070c;          /* Deepest background */
+--bg-1: #0a0a12;
+--panel: #111120;          /* Sidebar, modals */
+--border: rgba(255,255,255,.06);
+--text: #ececf1;
+--text-2: #b4b4c4;
+--text-mute: #7a7a8c;
+--purple: #7c3aed;
+--purple-light: #a78bfa;
+--blue: #2563eb;
+--grad: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
+--sans: 'Inter', ...;
+--mono: 'JetBrains Mono', ...;
+--sidebar-w: 260px;
 ```
 
----
+Key animations: `fadeIn`, `line-appear`, `float`, `pulse`, `spin`, `pop-in`, `toast-in`
 
-## 20. MODAL API SERVER
+---
 
-### File: `modal_api.py`
-FastAPI web endpoint that:
-1. Loads MINDI 1.5 from volume checkpoint on container startup
-2. Exposes `/api/generate` (POST) and `/api/health` (GET)
-3. Accepts text + optional base64 image
-4. Returns response + parsed special token sections
-5. CORS enabled for frontend
+## 15. MODEL QUALITY NOTES
 
-### Deployment
-```bash
-modal deploy modal_api.py
-# Returns a URL like: https://mindigenous-ai--mindi-api-api.modal.run
-```
+MINDI 1.5 is a 7B model with ~10K training steps. Known characteristics:
 
-### Cost
-- A100 @ $2.10/hr, scales to zero when idle
-- ~$0.01-0.05 per request
-- Container idle timeout: 5 minutes
+| Issue | Status | Mitigation |
+|-------|--------|-----------|
+| Identity hallucination ("I am GPT-4") | ✅ Fixed via system prompt | Strong MINDI identity in `hf_space/app.py` |
+| Basic/simple HTML output | ⚠️ Expected for 7B | Prompt enhancer adds design requirements |
+| Weak image understanding | ⚠️ Only 2.5K vision steps | Prompt still works for text-only generation |
+| No multi-file output | ⚠️ Not trained on it | Single complete file works fine |
 
-### Connect Frontend to API
-1. Open frontend at http://localhost:8080
-2. Double-click the MINDI logo (top-left sidebar)
-3. Enter the Modal API URL
-4. Save settings
+**The prompt enhancer compensates for most quality issues** by structuring prompts with explicit design requirements (fonts, colors, responsiveness, no-placeholders rule, complete code requirement).
 
 ---
 
-## 21. REMAINING BUDGET & NEXT STEPS
-
-### Budget
-- Modal: $2.21 remaining (~1 hour A100 time)
-- DigitalOcean: exhausted
-
-### Next Steps
-1. Deploy API when more credits available
-2. Host frontend on Vercel/GitHub Pages (free)
-3. Consider HuggingFace Spaces (free T4) with 4-bit quantization as alternative
-4. Push frontend to GitHub/HF repos
-
+*Updated May 2, 2026 — Session 5: Rebuilt frontend as Vite+React 3-panel website builder IDE.*
+*Previous sessions: April 15–30, 2026 — Model training (3 phases), HF Space deployment, API fixes.*

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

frontend/agent.js

@@ -1,266 +0,0 @@
-/* =============================================================
-   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

@@ -1,2118 +0,0 @@
-/* =============================================================
-   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
-    visionEnabled: false,       // default OFF — see notes in Settings; vision-language fusion is currently low-quality
-    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
-    authBlocked:   false,         // true if last API call hit a quota/auth error
-    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'),
-    settingsVision: $('#settings-vision'),
-    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;
-  }
-
-  // ----------------------------------------------------------------
-  // Cloud sandbox launcher (StackBlitz) — gives users real Next.js /
-  // Node / React / HTML execution by handing the generated code off
-  // to stackblitz.com via their public POST API. No backend required.
-  // Docs: https://developer.stackblitz.com/docs/platform/post-api
-  // ----------------------------------------------------------------
-  function isCloudRunnable(code, lang) {
-    const l = (lang || '').toLowerCase();
-    if (['html', 'markup', 'jsx', 'tsx', 'javascript', 'js', 'typescript', 'ts', 'json'].includes(l)) return true;
-    // Heuristic: short non-obvious snippets get the button if they parse
-    // like a web project (so the model can ship a partial JS file too).
-    return /<!doctype|<html|^\s*import |^\s*export |^\s*function |^\s*const |^\s*class /im.test(code);
-  }
-
-  // Detect the kind of project the model produced. Returns one of:
-  //   'next' | 'react' | 'node' | 'html' | 'snippet'
-  // The detection has to be permissive but ordered (Next.js before React
-  // before Node) so a Next.js file with `import 'react'` doesn't mis-route.
-  function detectProjectKind(code, lang) {
-    const l = (lang || '').toLowerCase();
-    const looksLikeNext  = /from ['"]next\/|next\.config|app\/page\.[jt]sx|pages\/index|getServerSideProps|getStaticProps/i.test(code);
-    const looksLikeReact = /from ['"]react['"]|ReactDOM\.|useState\(|useEffect\(|<\w+\s+\w+={/i.test(code);
-    const looksLikeNode  = /^\s*(?:const|import)\s+\w+\s*=?\s*require\(|process\.env|module\.exports/m.test(code);
-    const isHtmlDoc      = /<!doctype|<html/i.test(code);
-
-    if (looksLikeNext) return 'next';
-    if (looksLikeReact || l === 'jsx' || l === 'tsx') return 'react';
-    if (looksLikeNode || l === 'json') return 'node';
-    if (isHtmlDoc || l === 'html' || l === 'markup') return 'html';
-    return 'snippet';
-  }
-
-  // Human-friendly label shown on the code-block header pill so users see
-  // exactly what we detected (and why a launcher might open as HTML when
-  // they asked for Next.js).
-  function projectKindLabel(kind) {
-    return ({ next: 'Next.js', react: 'React', node: 'Node.js', html: 'HTML', snippet: 'Snippet' })[kind] || kind;
-  }
-
-  // Decide which StackBlitz template + file layout to use based on what
-  // the model produced. We try to be permissive — anything that looks
-  // like a React/Next/Node project goes into the WebContainer-backed
-  // 'node' template; raw HTML uses the static 'html' template.
-  function buildStackBlitzProject(code, lang) {
-    const kind = detectProjectKind(code, lang);
-    const l = (lang || '').toLowerCase();
-    const isHtmlDoc      = /<!doctype|<html/i.test(code);
-
-    const title = 'MINDI generated project';
-    const description = 'Generated by MINDI 1.5 Vision-Coder';
-
-    if (kind === 'next') {
-      // Minimal Next.js 14 app-router project.
-      return {
-        title, description,
-        template: 'node',
-        files: {
-          'package.json': JSON.stringify({
-            name: 'mindi-next-app',
-            private: true,
-            scripts: { dev: 'next dev', build: 'next build', start: 'next start' },
-            dependencies: { next: '^14.2.5', react: '^18.3.1', 'react-dom': '^18.3.1' },
-          }, null, 2),
-          'app/page.tsx': /export\s+default/i.test(code) ? code : `export default function Page() {\n  return (\n    <main>\n${code.split('\n').map(l => '      ' + l).join('\n')}\n    </main>\n  );\n}\n`,
-          'app/layout.tsx':
-`export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (<html lang="en"><body>{children}</body></html>);
-}
-`,
-          'tsconfig.json': JSON.stringify({
-            compilerOptions: {
-              target: 'ES2020', lib: ['dom', 'dom.iterable', 'esnext'], jsx: 'preserve',
-              module: 'esnext', moduleResolution: 'bundler', strict: true, esModuleInterop: true,
-              skipLibCheck: true, allowJs: true, isolatedModules: true, noEmit: true,
-              plugins: [{ name: 'next' }],
-            },
-            include: ['next-env.d.ts', '**/*.ts', '**/*.tsx'],
-          }, null, 2),
-          'README.md': `# ${title}\n\n${description}\n\nRun:\n\n\`\`\`bash\nnpm install\nnpm run dev\n\`\`\`\n`,
-        },
-      };
-    }
-
-    if (kind === 'react') {
-      // Vite + React project (faster boot in WebContainer than CRA).
-      const ext = (l === 'tsx' || /\:\s*\w+(\[\])?/.test(code)) ? 'tsx' : 'jsx';
-      return {
-        title, description,
-        template: 'node',
-        files: {
-          'package.json': JSON.stringify({
-            name: 'mindi-react-app',
-            private: true,
-            scripts: { dev: 'vite', build: 'vite build', preview: 'vite preview' },
-            dependencies: { react: '^18.3.1', 'react-dom': '^18.3.1' },
-            devDependencies: { '@vitejs/plugin-react': '^4.3.1', vite: '^5.4.1' },
-          }, null, 2),
-          'vite.config.js':
-`import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nexport default defineConfig({ plugins: [react()] });\n`,
-          'index.html':
-`<!doctype html><html><head><meta charset="utf-8"><title>${title}</title></head><body><div id="root"></div><script type="module" src="/src/main.${ext}"></script></body></html>`,
-          [`src/main.${ext}`]:
-`import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport App from './App.${ext}';\ncreateRoot(document.getElementById('root')).render(<App />);\n`,
-          [`src/App.${ext}`]: /export\s+default/i.test(code) ? code : `export default function App() {\n  return (<div>${'<pre>{`' + code.replace(/`/g, '\\`') + '`}</pre>'}</div>);\n}\n`,
-        },
-      };
-    }
-
-    if (kind === 'node') {
-      return {
-        title, description,
-        template: 'node',
-        files: {
-          'package.json': JSON.stringify({
-            name: 'mindi-node-app', private: true,
-            scripts: { start: 'node index.js' },
-          }, null, 2),
-          'index.js': l === 'json' ? `console.log(${code});` : code,
-        },
-      };
-    }
-
-    if (kind === 'html') {
-      return {
-        title, description,
-        template: 'html',
-        files: {
-          'index.html': isHtmlDoc ? code : `<!doctype html><html><head><meta charset="utf-8"><title>${title}</title></head><body>\n${code}\n</body></html>`,
-        },
-      };
-    }
-
-    // Fallback: static html with the code dropped into a <pre> tag so
-    // the user at least sees their snippet rendered in the StackBlitz preview.
-    return {
-      title, description,
-      template: 'html',
-      files: {
-        'index.html': `<!doctype html><html><head><meta charset="utf-8"><title>${title}</title></head><body><pre>${escapeHtml(code)}</pre></body></html>`,
-      },
-    };
-  }
-
-  // Pick the file the user most likely wants to land on when StackBlitz opens.
-  function chooseEntryFile(proj) {
-    const files = proj.files || {};
-    const preferred = [
-      'app/page.tsx', 'app/page.jsx',
-      'src/App.tsx', 'src/App.jsx',
-      'pages/index.tsx', 'pages/index.jsx',
-      'index.html', 'index.js',
-    ];
-    for (const p of preferred) if (files[p]) return p;
-    return Object.keys(files)[0] || 'index.html';
-  }
-
-  // Hand the project off to stackblitz.com. We prefer the official SDK
-  // (https://developer.stackblitz.com/platform/api/javascript-sdk) because
-  // the bare /run form-POST endpoint silently rejects some payloads and
-  // falls back to opening their default Next.js starter — exactly what
-  // the user reported. The SDK uses an iframe handshake that's more
-  // reliable across browser SameSite / referrer policies.
-  // Form POST is kept as a fallback if the SDK script fails to load.
-  function launchInStackBlitz(code, lang) {
-    const proj = buildStackBlitzProject(code, lang);
-    const sdk = window.StackBlitzSDK;
-
-    if (sdk && typeof sdk.openProject === 'function') {
-      try {
-        sdk.openProject(
-          {
-            title: proj.title,
-            description: proj.description,
-            template: proj.template,
-            files: proj.files,
-          },
-          { newWindow: true, openFile: chooseEntryFile(proj) }
-        );
-        return;
-      } catch (err) {
-        console.warn('StackBlitz SDK launch failed, falling back to form POST:', err);
-      }
-    }
-
-    // Fallback: classic form POST. Less reliable but works without the SDK
-    // script (useful if it's blocked by an offline / strict-CSP environment).
-    const form = document.createElement('form');
-    form.action = 'https://stackblitz.com/run';
-    form.method = 'POST';
-    form.target = '_blank';
-    form.rel    = 'noopener';
-    form.style.display = 'none';
-
-    const add = (name, value) => {
-      const input = document.createElement('input');
-      input.type  = 'hidden';
-      input.name  = name;
-      input.value = value;
-      form.appendChild(input);
-    };
-    add('project[title]',       proj.title);
-    add('project[description]', proj.description);
-    add('project[template]',    proj.template);
-    Object.entries(proj.files).forEach(([path, content]) => {
-      add(`project[files][${path}]`, content);
-    });
-
-    document.body.appendChild(form);
-    form.submit();
-    setTimeout(() => form.remove(), 0);
-  }
-
-  // ----------------------------------------------------------------
-  // Cloud sandbox launcher (CodeSandbox) — second cloud IDE option.
-  // Uses the public Define API which returns a sandbox_id we redirect to.
-  // Docs: https://codesandbox.io/docs/learn/sandboxes/cli-api#define-api
-  // We reuse buildStackBlitzProject() for the file shape since both IDEs
-  // accept the same package.json / file layout; CodeSandbox auto-detects
-  // the template from package.json dependencies.
-  // ----------------------------------------------------------------
-  function buildCodeSandboxFiles(code, lang) {
-    const proj = buildStackBlitzProject(code, lang);
-    const files = {};
-    Object.entries(proj.files).forEach(([path, content]) => {
-      files[path] = { content };
-    });
-    // For raw HTML projects (StackBlitz template='html'), nudge CodeSandbox
-    // toward its 'static' template so it serves index.html as-is instead of
-    // trying to npm install nothing.
-    if (proj.template === 'html' && !files['package.json']) {
-      files['sandbox.config.json'] = { content: JSON.stringify({ template: 'static' }, null, 2) };
-    }
-    return files;
-  }
-
-  async function launchInCodeSandbox(code, lang) {
-    const files = buildCodeSandboxFiles(code, lang);
-    try {
-      const res = await fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
-        body: JSON.stringify({ files }),
-      });
-      if (!res.ok) {
-        const txt = await res.text().catch(() => '');
-        throw new Error(`HTTP ${res.status}: ${txt.slice(0, 160)}`);
-      }
-      const data = await res.json();
-      if (!data || !data.sandbox_id) throw new Error('No sandbox_id in response');
-      window.open(`https://codesandbox.io/s/${data.sandbox_id}`, '_blank', 'noopener');
-    } catch (err) {
-      toast(`CodeSandbox launch failed: ${err.message || err}`, 'error');
-    }
-  }
-
-  // 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);
-        const runnable = isCloudRunnable(seg.value, lang);
-        const kind = runnable ? detectProjectKind(seg.value, lang) : null;
-        const kindPill = kind
-          ? `<span class="md-kind md-kind--${kind}" title="Project kind detected from the generated code. The launchers below open this exact code, even if it doesn't match what you originally asked for.">${projectKindLabel(kind)}</span>`
-          : '';
-        const launchBtns = runnable
-          ? (
-              `<button class="md-run" data-code="${dataCode}" data-lang="${escapeAttr(lang)}" type="button" title="Run this code on stackblitz.com (real Node.js / WebContainer sandbox, supports Next.js / React / Node)">\u25B6 StackBlitz</button>` +
-              `<button class="md-sandbox" data-code="${dataCode}" data-lang="${escapeAttr(lang)}" type="button" title="Open this code in codesandbox.io (cloud IDE with live preview)">\u25B6 CodeSandbox</button>`
-            )
-          : '';
-        return (
-          `<pre class="md-code-block">` +
-            `<div class="md-code-head">` +
-              `<span class="md-lang">${escapeHtml(lang)}${kindPill}</span>` +
-              `<div class="md-code-actions">` +
-                launchBtns +
-                `<button class="md-copy" data-code="${dataCode}" type="button">Copy</button>` +
-              `</div>` +
-            `</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;
-  }
-
-  // Convert a data: URL into a Blob (used for Gradio image uploads).
-  function dataUrlToBlob(dataUrl) {
-    const match = /^data:([^;]+);base64,(.+)$/.exec(dataUrl || '');
-    if (!match) throw new Error('Invalid image data URL');
-    const mime = match[1];
-    const b64  = match[2];
-    const bytes = Uint8Array.from(atob(b64), (c) => c.charCodeAt(0));
-    return { blob: new Blob([bytes], { type: mime }), mime };
-  }
-
-  // Upload an image to a Gradio HF Space via /gradio_api/upload.
-  // Returns the server-side file path that can be referenced as
-  // {path: ..., meta: {_type: "gradio.FileData"}} in a chat_fn data array.
-  // This is REQUIRED — gr.Image(type="pil") on the backend cannot decode
-  // a raw data URL string.
-  async function uploadImageToGradio(base, dataUrl, signal) {
-    const { blob, mime } = dataUrlToBlob(dataUrl);
-    const ext = (mime.split('/')[1] || 'png').replace('+xml', '').split(';')[0];
-    const filename = `mindi-upload-${Date.now()}.${ext}`;
-    const formData = new FormData();
-    formData.append('files', blob, filename);
-
-    // Don't pre-set Content-Type — the browser sets the multipart boundary.
-    const headers = authHeaders({});
-    delete headers['Content-Type'];
-
-    const res = await fetch(`${base}/gradio_api/upload`, {
-      method: 'POST',
-      headers,
-      body: formData,
-      signal,
-    });
-    if (!res.ok) {
-      const txt = await res.text().catch(() => '');
-      throw new Error(`Image upload ${res.status}: ${txt.slice(0, 200) || 'failed'}`);
-    }
-    const result = await res.json();
-    // Gradio 5.x returns ["/tmp/gradio/.../filename.png"]
-    const filePath = Array.isArray(result) ? result[0] : (result && result.files && result.files[0]);
-    if (!filePath || typeof filePath !== 'string') {
-      throw new Error(`Unexpected upload response: ${JSON.stringify(result).slice(0, 200)}`);
-    }
-    return filePath;
-  }
-
-  // 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;
-  }
-
-  // Build a friendly assistant message shown inline in the chat when the
-  // request is (or would be) blocked by the ZeroGPU quota / auth wall.
-  // ZeroGPU quota is per-user — there is no way to bypass it without a
-  // logged-in HF token. See https://huggingface.co/docs/hub/en/spaces-zerogpu
-  function makeAuthBlockedResponse() {
-    if (state.hfToken) {
-      return {
-        response:
-`**Your HF token hit its daily ZeroGPU quota.**
-
-ZeroGPU enforces a per-user GPU-time budget that resets every 24 hours after first use. Free HF accounts get a small daily allowance, **PRO accounts get 8\u00d7 more**, and PRO/Team/Enterprise can also top up with [pre-paid credits](https://huggingface.co/settings/billing) at \\$1 per 10 GPU-minutes.
-
-**What to do:**
-- Wait for the daily reset (24h after your first call today), **or**
-- Top up credits in your HF billing settings, **or**
-- Open **Settings** (double-click the MINDI logo) and paste a different PRO token.
-
-I'll keep further messages local until you update the token \u2014 sending them now would just hit the same wall.`,
-        sections: {},
-      };
-    }
-    return {
-      response:
-`**Sign-in needed to use the live model.**
-
-The MINDI 1.5 backend runs on HuggingFace ZeroGPU, which gives every IP a tiny anonymous quota (~3 minutes / day) before blocking further requests. That's why the first message worked but the next one didn't.
-
-**To unlock real generation:**
-1. Get a token at [huggingface.co/settings/tokens](https://huggingface.co/settings/tokens) (free account is fine; **PRO** gives 8\u00d7 more).
-2. **Double-click the MINDI logo** \u2192 paste the token in the *HuggingFace token* field \u2192 *Save settings*.
-3. Re-send your message.
-
-Your token is stored only in this browser's local storage and sent as an \`Authorization: Bearer\` header to the Space.`,
-      sections: {},
-    };
-  }
-
-  async function pingHealth() {
-    // If a previous request was blocked by ZeroGPU quota / auth, stay in
-    // 'Auth required' until the user adds a token (applySettings clears it).
-    // Otherwise this would silently flip back to 'online' every 60s and the
-    // next user message would hit the same quota wall.
-    if (runtime.authBlocked) {
-      setStatus('demo', state.hfToken ? 'Quota exhausted' : 'Auth required');
-      return;
-    }
-    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');
-    }
-  }
-
-  // Build a Qwen-style history list from the current chat, EXCLUDING the
-  // user message that's about to be sent (which is `prompt` itself) and any
-  // in-flight loading placeholder. Capped to keep the request small.
-  function buildHistory() {
-    const chat = currentChat();
-    if (!chat) return [];
-    const msgs = chat.messages || [];
-    // Drop trailing loading messages and the most-recent user message,
-    // since send() already pushed it just before calling us.
-    let end = msgs.length;
-    while (end > 0 && msgs[end - 1].loading) end--;
-    if (end > 0 && msgs[end - 1].role === 'user') end--;
-    const slice = msgs.slice(Math.max(0, end - 20), end);
-    return slice
-      .filter((m) => (m.role === 'user' || m.role === 'assistant') && !m.loading)
-      .map((m) => ({
-        role: m.role,
-        content: typeof m.content === 'string' ? m.content : String(m.content || ''),
-      }))
-      .filter((m) => m.content.trim().length > 0);
-  }
-
-  async function callGenerate(prompt, image, signal) {
-    const base = state.apiUrl.replace(/\/$/, '');
-    const history = buildHistory();
-    // Gradio expects each input as its own positional element. We pass
-    // history as a JSON-encoded string because the backend's chat_fn input
-    // is a Textbox (not a JSON component) — _coerce_history() decodes it.
-    const historyJson = history.length ? JSON.stringify(history) : '';
-
-    // 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
-
-      // ── Image: upload first, then reference by path ──
-      // gr.Image(type="pil") cannot decode a raw data: URL — it expects a
-      // FileData reference produced by /gradio_api/upload. We do this
-      // unconditionally when an image is supplied so the backend's CLIP
-      // path actually receives pixels. If vision is disabled in settings,
-      // send() drops the image before calling us.
-      let imageArg = null;
-      if (image && typeof image === 'string' && image.startsWith('data:')) {
-        try {
-          const filePath = await uploadImageToGradio(base, image, signal);
-          imageArg = {
-            path: filePath,
-            meta: { _type: 'gradio.FileData' },
-            orig_name: filePath.split('/').pop() || 'image.png',
-          };
-        } catch (e) {
-          console.warn('[mindi] Image upload to Gradio failed:', e);
-          toast(`Image upload failed: ${e.message || e}. Sending text only.`, 'error', 5000);
-          imageArg = null;
-        }
-      }
-
-      // 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, imageArg, state.temperature, state.maxTokens, historyJson],
-        }),
-        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,
-        history,
-      };
-      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.
-    // If vision is disabled in Settings, drop the image before calling
-    // the API so we don't waste an upload round-trip on something the
-    // backend will ignore. The image still appears in the user message
-    // for the chat record.
-    const imageForApi = state.visionEnabled
-      ? (runtime.pendingImages[0]?.dataUrl || null)
-      : null;
-    if (!state.visionEnabled && runtime.pendingImages.length) {
-      toast('Vision is disabled \u2014 image attached for record only. Enable it in Settings to send to the model.', 'info', 4500);
-    }
-    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 we already know auth is blocked, don't call the API again — the
-      // request would just consume more anonymous quota and return the same
-      // error. Show the inline 'add your token' card instead.
-      if (runtime.authBlocked) {
-        result = makeAuthBlockedResponse();
-      } else 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 and
-    // stop calling the API on subsequent messages until the user adds a token.
-    const authMsg = detectAuthError(result);
-    if (authMsg) {
-      runtime.authBlocked = true;
-      toast(authMsg, 'error', 7000);
-      setStatus('demo', state.hfToken ? 'Quota exhausted' : 'Auth required');
-      // Replace the raw backend error with a friendlier inline card so the
-      // chat doesn't show a wall of quota-error text.
-      result = makeAuthBlockedResponse();
-    }
-
-    // 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 || '';
-    if (els.settingsVision)  els.settingsVision.checked = !!state.visionEnabled;
-    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 vision = !!(els.settingsVision && els.settingsVision.checked);
-    const temp   = parseFloat(els.settingsTemp.value);
-    const tokens = parseInt(els.settingsTokens.value, 10);
-    const tokenChanged = token !== state.hfToken;
-    state.apiUrl        = url || API_DEFAULT;
-    state.hfToken       = token;
-    state.visionEnabled = vision;
-    state.temperature   = isFinite(temp) ? temp : 0.7;
-    state.maxTokens     = isFinite(tokens) ? tokens : 2048;
-    // If the user just saved a new (non-empty) token, give the API another shot.
-    if (tokenChanged && token) {
-      runtime.authBlocked = false;
-    }
-    saveState();
-    refreshTokenStatus();
-    closeSettings();
-    toast(tokenChanged && token ? 'Token saved — retrying API' : '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);
-
-    // Delegated click handler for code-block action buttons inside messages
-    // (Copy, Run-in-StackBlitz, Open-in-CodeSandbox).
-    els.messages.addEventListener('click', async (e) => {
-      const copyBtn = e.target.closest('.md-copy');
-      if (copyBtn) {
-        try {
-          await navigator.clipboard.writeText(copyBtn.dataset.code || '');
-          const prev = copyBtn.textContent;
-          copyBtn.textContent = 'Copied!';
-          setTimeout(() => { copyBtn.textContent = prev; }, 1400);
-        } catch {
-          toast('Clipboard unavailable', 'error');
-        }
-        return;
-      }
-
-      const runBtn = e.target.closest('.md-run');
-      if (runBtn) {
-        try {
-          launchInStackBlitz(runBtn.dataset.code || '', runBtn.dataset.lang || '');
-        } catch (err) {
-          toast(`StackBlitz launch failed: ${err.message || err}`, 'error');
-        }
-        return;
-      }
-
-      const sbxBtn = e.target.closest('.md-sandbox');
-      if (sbxBtn) {
-        const prev = sbxBtn.textContent;
-        sbxBtn.disabled = true;
-        sbxBtn.textContent = '\u25B6 Opening\u2026';
-        try {
-          await launchInCodeSandbox(sbxBtn.dataset.code || '', sbxBtn.dataset.lang || '');
-        } finally {
-          sbxBtn.textContent = prev;
-          sbxBtn.disabled = false;
-        }
-        return;
-      }
-    });
-
-    // 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 we know auth is blocked, the agent loop would just call the API
-    // multiple times and fail every iteration. Fall back to send(), which
-    // now renders the friendly inline 'add your token' card instead.
-    if (!useAgent || runtime.authBlocked) {
-      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/eslint.config.js

@@ -0,0 +1,21 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+      parserOptions: { ecmaFeatures: { jsx: true } },
+    },
+  },
+])

frontend/index.html

@@ -3,355 +3,14 @@
 <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 -->
+  <meta name="description" content="MINDI 1.5 Vision-Coder — AI Website Builder. Generate production-ready websites from text prompts." />
+  <title>MINDI 1.5 — AI Website Builder</title>
   <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" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
 </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 field-toggle">
-          <span class="field-toggle-row">
-            <span class="field-label">Vision input</span>
-            <span class="toggle">
-              <input id="settings-vision" type="checkbox" />
-              <span class="toggle-slider"></span>
-            </span>
-          </span>
-          <span class="field-hint">Send attached images to MINDI's CLIP encoder. <strong>Off by default</strong> — the current vision-language fusion is an early build and produces low-quality answers on images. Leave off until the next vision retraining ships. Attaching an image still records it in the chat.</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>
-
-  <!-- StackBlitz SDK — drives the "Run in StackBlitz" launcher.
-       The form-POST /run endpoint is unreliable (gets silently rejected
-       and falls back to the default Next.js starter); the SDK's hidden
-       iframe handshake is the maintained, robust path. -->
-  <script src="https://unpkg.com/@stackblitz/sdk@1.11.0/bundles/sdk.umd.js"></script>
-
-  <script src="sandbox.js"></script>
-  <script src="agent.js"></script>
-  <script src="app.js"></script>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
 </body>
 </html>

frontend/package-lock.json

@@ -0,0 +1,2448 @@
+{
+  "name": "frontend",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "frontend",
+      "version": "0.0.0",
+      "dependencies": {
+        "lucide-react": "^1.14.0",
+        "prismjs": "^1.30.0",
+        "react": "^19.2.5",
+        "react-dom": "^19.2.5"
+      },
+      "devDependencies": {
+        "@eslint/js": "^10.0.1",
+        "@types/react": "^19.2.14",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react": "^6.0.1",
+        "eslint": "^10.2.1",
+        "eslint-plugin-react-hooks": "^7.1.1",
+        "eslint-plugin-react-refresh": "^0.5.2",
+        "globals": "^17.5.0",
+        "vite": "^8.0.10"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
+      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.3",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.3.tgz",
+      "integrity": "sha512-LIVqM46zQWZhj17qA8wb4nW/ixr2y1Nw+r1etiAWgRM6U1IqP+LNhL1yg440jYZR72jCWcWbLWzIosH+uP1fqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
+      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-module-transforms": "^7.28.6",
+        "@babel/helpers": "^7.28.6",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/traverse": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.1",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
+      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz",
+      "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.28.6",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
+      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz",
+      "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.28.6",
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "@babel/traverse": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.2.tgz",
+      "integrity": "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.29.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.3.tgz",
+      "integrity": "sha512-b3ctpQwp+PROvU/cttc4OYl4MzfJUWy6FZg+PMXfzmt/+39iHVF0sDfqay8TQM3JA2EUOyKcFZt75jWriQijsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
+      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.28.6",
+        "@babel/parser": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
+      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.29.0",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.23.5",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.23.5.tgz",
+      "integrity": "sha512-Y3kKLvC1dvTOT+oGlqNQ1XLqK6D1HU2YXPc52NmAlJZbMMWDzGYXMiPRJ8TYD39muD/OTjlZmNJ4ib7dvSrMBA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^3.0.5",
+        "debug": "^4.3.1",
+        "minimatch": "^10.2.4"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.5.5.tgz",
+      "integrity": "sha512-eIJYKTCECbP/nsKaaruF6LW967mtbQbsw4JTtSVkUQc9MneSkbrgPJAbKl9nWr0ZeowV8BfsarBmPpBzGelA2w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^1.2.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-1.2.1.tgz",
+      "integrity": "sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-10.0.1.tgz",
+      "integrity": "sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "eslint": "^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-3.0.5.tgz",
+      "integrity": "sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.7.1.tgz",
+      "integrity": "sha512-rZAP3aVgB9ds9KOeUSL+zZ21hPmo8dh6fnIFwRQj5EAZl9gzR7wxYbYXYysAM8CTqGmUGyp2S4kUdV17MnGuWQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^1.2.1",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
+      "integrity": "sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/types": "^0.15.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.8.tgz",
+      "integrity": "sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.2",
+        "@humanfs/types": "^0.15.0",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/types": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@humanfs/types/-/types-0.15.0.tgz",
+      "integrity": "sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
+      "integrity": "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.127.0.tgz",
+      "integrity": "sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.0.0-rc.17",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.17.tgz",
+      "integrity": "sha512-s70pVGhw4zqGeFnXWvAzJDlvxhlRollagdCCKRgOsgUOH3N1l0LIxf83AtGzmb5SiVM4Hjl5HyarMRfdfj3DaQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.0.0-rc.17",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-rc.17.tgz",
+      "integrity": "sha512-4ksWc9n0mhlZpZ9PMZgTGjeOPRu8MB1Z3Tz0Mo02eWfWCHMW1zN82Qz/pL/rC+yQa+8ZnutMF0JjJe7PjwasYw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.0.0-rc.17",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-rc.17.tgz",
+      "integrity": "sha512-SUSDOI6WwUVNcWxd02QEBjLdY1VPHvlEkw6T/8nYG322iYWCTxRb1vzk4E+mWWYehTp7ERibq54LSJGjmouOsw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.0.0-rc.17",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-rc.17.tgz",
+      "integrity": "sha512-hwnz3nw9dbJ05EDO/PvcjaaewqqDy7Y1rn1UO81l8iIK1GjenME75dl16ajbvSSMfv66WXSRCYKIqfgq2KCfxw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.0.0-rc.17",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-rc.17.tgz",
+      "integrity": "sha512-IS+W7epTcwANmFSQFrS1SivEXHtl1JtuQA9wlxrZTcNi6mx+FDOYrakGevvvTwgj2JvWiK8B29/qD9BELZPyXQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.0.0-rc.17",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-rc.17.tgz",
+      "integrity": "sha512-e6usGaHKW5BMNZOymS1UcEYGowQMWcgZ71Z17Sl/h2+ZziNJ1a9n3Zvcz6LdRyIW5572wBCTH/Z+bKuZouGk9Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.0.0-rc.17",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-rc.17.tgz",
+      "integrity": "sha512-b/CgbwAJpmrRLp02RPfhbudf5tZnN9nsPWK82znefso832etkem8H7FSZwxrOI9djcdTP7U6YfNhbRnh7djErg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.0.0-rc.17",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.0-rc.17.tgz",
+      "integrity": "sha512-4EII1iNGRUN5WwGbF/kOh/EIkoDN9HsupgLQoXfY+D1oyJm7/F4t5PYU5n8SWZgG0FEwakyM8pGgwcBYruGTlA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.0.0-rc.17",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.0-rc.17.tgz",
+      "integrity": "sha512-AH8oq3XqQo4IibpVXvPeLDI5pzkpYn0WiZAfT05kFzoJ6tQNzwRdDYQ45M8I/gslbodRZwW8uxLhbSBbkv96rA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.0.0-rc.17",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-rc.17.tgz",
+      "integrity": "sha512-cLnjV3xfo7KslbU41Z7z8BH/E1y5mzUYzAqih1d1MDaIGZRCMqTijqLv76/P7fyHuvUcfGsIpqCdddbxLLK9rA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.0.0-rc.17",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-rc.17.tgz",
+      "integrity": "sha512-0phclDw1spsL7dUB37sIARuis2tAgomCJXAHZlpt8PXZ4Ba0dRP1e+66lsRqrfhISeN9bEGNjQs+T/Fbd7oYGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.0.0-rc.17",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-rc.17.tgz",
+      "integrity": "sha512-0ag/hEgXOwgw4t8QyQvUCxvEg+V0KBcA6YuOx9g0r02MprutRF5dyljgm3EmR02O292UX7UeS6HzWHAl6KgyhA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.0.0-rc.17",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-rc.17.tgz",
+      "integrity": "sha512-LEXei6vo0E5wTGwpkJ4KoT3OZJRnglwldt5ziLzOlc6qqb55z4tWNq2A+PFqCJuvWWdP53CVhG1Z9NtToDPJrA==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.10.0",
+        "@emnapi/runtime": "1.10.0",
+        "@napi-rs/wasm-runtime": "^1.1.4"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.0.0-rc.17",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.17.tgz",
+      "integrity": "sha512-gUmyzBl3SPMa6hrqFUth9sVfcLBlYsbMzBx5PlexMroZStgzGqlZ26pYG89rBb45Mnia+oil6YAIFeEWGWhoZA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.0.0-rc.17",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-rc.17.tgz",
+      "integrity": "sha512-3hkiolcUAvPB9FLb3UZdfjVVNWherN1f/skkGWJP/fgSQhYUZpSIRr0/I8ZK9TkF3F7kxvJAk0+IcKvPHk9qQg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.7.tgz",
+      "integrity": "sha512-qujRfC8sFVInYSPPMLQByRh7zhwkGFS4+tyMQ83srV1qrxL4g8E2tyxVVyxd0+8QeBM1mIk9KbWxkegRr76XzA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/esrecurse": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
+      "integrity": "sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.14",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
+      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.1.tgz",
+      "integrity": "sha512-l9X/E3cDb+xY3SWzlG1MOGt2usfEHGMNIaegaUGFsLkb3RCn/k8/TOXBcab+OndDI4TBtktT8/9BwwW8Vi9KUQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "1.0.0-rc.7"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0",
+        "babel-plugin-react-compiler": "^1.0.0",
+        "vite": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rolldown/plugin-babel": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
+      "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.25",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.25.tgz",
+      "integrity": "sha512-QO/VHsXCQdnzADMfmkeOPvHdIAkoB7i0/rGjINPJEetLx75hNttVWGQ/jycHUDP9zZ9rupbm60WRxcwViB0MiA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
+      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.10.12",
+        "caniuse-lite": "^1.0.30001782",
+        "electron-to-chromium": "^1.5.328",
+        "node-releases": "^2.0.36",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001791",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001791.tgz",
+      "integrity": "sha512-yk0l/YSrOnFZk3UROpDLQD9+kC1l4meK/wed583AXrzoarMGJcbRi2Q4RaUYbKxYAsZ8sWmaSa/DsLmdBeI1vQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.349",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.349.tgz",
+      "integrity": "sha512-QsWVGyRuY07Aqb234QytTfwd5d9AJlfNIQ5wIOl1L+PZDzI9d9+Fn0FRale/QYlFxt/bUnB0/nLd1jFPGxGK1A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-10.3.0.tgz",
+      "integrity": "sha512-XbEXaRva5cF0ZQB8w6MluHA0kZZfV2DuCMJ3ozyEOHLwDpZX2Lmm/7Pp0xdJmI0GL1W05VH5VwIFHEm1Vcw2gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.2",
+        "@eslint/config-array": "^0.23.5",
+        "@eslint/config-helpers": "^0.5.5",
+        "@eslint/core": "^1.2.1",
+        "@eslint/plugin-kit": "^0.7.1",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.14.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^9.1.2",
+        "eslint-visitor-keys": "^5.0.1",
+        "espree": "^11.2.0",
+        "esquery": "^1.7.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "minimatch": "^10.2.4",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.1.1.tgz",
+      "integrity": "sha512-f2I7Gw6JbvCexzIInuSbZpfdQ44D7iqdWX01FKLvrPgqxoE7oMj8clOfto8U6vYiz4yd5oKu39rRSVOe1zRu0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "hermes-parser": "^0.25.1",
+        "zod": "^3.25.0 || ^4.0.0",
+        "zod-validation-error": "^3.5.0 || ^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 || ^10.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react-refresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.5.2.tgz",
+      "integrity": "sha512-hmgTH57GfzoTFjVN0yBwTggnsVUF2tcqi7RJZHqi9lIezSs4eFyAMktA68YD4r5kNw1mxyY4dmkyoFDb3FIqrA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "eslint": "^9 || ^10"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-9.1.2.tgz",
+      "integrity": "sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@types/esrecurse": "^4.3.1",
+        "@types/estree": "^1.0.8",
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-11.2.0.tgz",
+      "integrity": "sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.16.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^5.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "17.6.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-17.6.0.tgz",
+      "integrity": "sha512-sepffkT8stwnIYbsMBpoCHJuJM5l98FUF2AnE07hfvE0m/qp3R586hw4jF4uadbhvg1ooIdzuu7CsfD2jzCaNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/hermes-estree": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
+      "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hermes-parser": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz",
+      "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hermes-estree": "0.25.1"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.14.0.tgz",
+      "integrity": "sha512-+1mdWcfSJVUsaTIjN9zoezmUhfXo5l0vP7ekBMPo3jcS/aIkxHnXqAPsByszMZx/Y8oQBRJxJx5xg+RH3urzxA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.5"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
+      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.38",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.38.tgz",
+      "integrity": "sha512-3qT/88Y3FbH/Kx4szpQQ4HzUbVrHPKTLVpVocKiLfoYvw9XSGOX2FmD2d6DrXbVYyAQTF2HeF6My8jmzx7/CRw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.13",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.13.tgz",
+      "integrity": "sha512-qif0+jGGZoLWdHey3UFHHWP0H7Gbmsk8T5VEqyYFbWqPr1XqvLGBbk/sl8V5exGmcYJklJOhOQq1pV9IcsiFag==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.5",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.5.tgz",
+      "integrity": "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.5",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.5.tgz",
+      "integrity": "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.5"
+      }
+    },
+    "node_modules/rolldown": {
+      "version": "1.0.0-rc.17",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.17.tgz",
+      "integrity": "sha512-ZrT53oAKrtA4+YtBWPQbtPOxIbVDbxT0orcYERKd63VJTF13zPcgXTvD4843L8pcsI7M6MErt8QtON6lrB9tyA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.127.0",
+        "@rolldown/pluginutils": "1.0.0-rc.17"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.0.0-rc.17",
+        "@rolldown/binding-darwin-arm64": "1.0.0-rc.17",
+        "@rolldown/binding-darwin-x64": "1.0.0-rc.17",
+        "@rolldown/binding-freebsd-x64": "1.0.0-rc.17",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.17",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.17",
+        "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.17",
+        "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.17",
+        "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.17",
+        "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.17",
+        "@rolldown/binding-linux-x64-musl": "1.0.0-rc.17",
+        "@rolldown/binding-openharmony-arm64": "1.0.0-rc.17",
+        "@rolldown/binding-wasm32-wasi": "1.0.0-rc.17",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.17",
+        "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.17"
+      }
+    },
+    "node_modules/rolldown/node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.17",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.17.tgz",
+      "integrity": "sha512-n8iosDOt6Ig1UhJ2AYqoIhHWh/isz0xpicHTzpKBeotdVsTEcxsSA/i3EVM7gQAj0rU27OLAxCjzlj15IWY7bg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
+      "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "8.0.10",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.10.tgz",
+      "integrity": "sha512-rZuUu9j6J5uotLDs+cAA4O5H4K1SfPliUlQwqa6YEwSrWDZzP4rhm00oJR5snMewjxF5V/K3D4kctsUTsIU9Mw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.32.0",
+        "picomatch": "^4.0.4",
+        "postcss": "^8.5.10",
+        "rolldown": "1.0.0-rc.17",
+        "tinyglobby": "^0.2.16"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.1.0",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zod": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.2.tgz",
+      "integrity": "sha512-IynmDyxsEsb9RKzO3J9+4SxXnl2FTFSzNBaKKaMV6tsSk0rw9gYw9gs+JFCq/qk2LCZ78KDwyj+Z289TijSkUw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-validation-error": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
+      "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      }
+    }
+  }
+}

frontend/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^1.14.0",
+    "prismjs": "^1.30.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.2.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.5.0",
+    "vite": "^8.0.10"
+  }
+}

frontend/sandbox.js

@@ -1,305 +0,0 @@
-/* =============================================================
-   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/src/App.css

@@ -0,0 +1,476 @@
+/* ============ APP SHELL ============ */
+.app-shell {
+  display: grid;
+  grid-template-columns: var(--sidebar-w) 1fr 420px;
+  height: 100vh;
+  position: relative;
+  z-index: 1;
+}
+
+/* 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,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
+  background-size: 64px 64px;
+  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
+}
+.blob { position: absolute; width: 500px; height: 500px; border-radius: 50%; filter: blur(120px); opacity: .25; }
+.blob--purple { background: radial-gradient(circle, var(--purple), transparent 70%); top: -150px; left: -100px; animation: drift-1 26s ease-in-out infinite alternate; }
+.blob--blue { background: radial-gradient(circle, var(--blue), transparent 70%); bottom: -150px; right: -100px; animation: drift-2 30s ease-in-out infinite alternate; }
+
+/* ============ MAIN AREA ============ */
+.main-area {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  min-width: 0;
+  position: relative;
+  z-index: 1;
+}
+
+/* ============ SIDEBAR ============ */
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: rgba(17, 17, 32, .85);
+  border-right: 1px solid var(--border);
+  backdrop-filter: blur(20px);
+  z-index: 10;
+  position: relative;
+}
+.sidebar-brand {
+  padding: 14px 16px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  transition: background .2s;
+}
+.sidebar-brand:hover { background: var(--hover); }
+.brand-icon {
+  width: 32px; height: 32px;
+  background: var(--grad);
+  border-radius: var(--r-sm);
+  display: grid; place-items: center;
+  box-shadow: 0 0 20px rgba(124, 58, 237, .3);
+  flex-shrink: 0;
+}
+.brand-icon svg { width: 20px; height: 20px; }
+.brand-info { min-width: 0; }
+.brand-name { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
+.brand-sub { font-size: 9px; font-weight: 500; color: var(--text-mute); font-family: var(--mono); letter-spacing: .04em; }
+
+/* File tree */
+.sidebar-section { padding: 12px 0; }
+.sidebar-section-title {
+  padding: 0 16px 8px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .12em;
+  color: var(--text-dim);
+}
+.file-tree { flex: 1; overflow-y: auto; padding: 0 8px; }
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: var(--r-sm);
+  font-size: 12px;
+  color: var(--text-2);
+  cursor: pointer;
+  transition: background .15s, color .15s;
+  animation: fadeInLeft .3s var(--ease) both;
+  width: 100%;
+  text-align: left;
+}
+.file-item:hover { background: var(--hover); color: var(--text); }
+.file-item.active { background: rgba(124,58,237,.12); color: #fff; border: 1px solid rgba(124,58,237,.2); }
+.file-icon { font-size: 14px; flex-shrink: 0; }
+.file-name { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+/* Agent steps */
+.agent-steps { padding: 4px 8px; display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; }
+.agent-step {
+  display: flex; align-items: center; gap: 8px;
+  padding: 7px 10px; border-radius: var(--r-sm);
+  font-size: 11px; color: var(--text-2);
+  animation: fadeIn .25s var(--ease) both;
+  background: rgba(255,255,255,.02);
+}
+.step-icon { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font-size: 10px; flex-shrink: 0; }
+.step-icon.running { background: rgba(124,58,237,.2); color: var(--purple-light); animation: pulse 1.5s ease infinite; }
+.step-icon.success { background: rgba(16,185,129,.15); color: var(--ok); }
+.step-icon.failed { background: rgba(239,68,68,.15); color: var(--err); }
+.step-detail { font-family: var(--mono); font-size: 10px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+/* Status */
+.sidebar-footer {
+  padding: 10px 14px;
+  border-top: 1px solid var(--border);
+  display: flex; align-items: center; gap: 8px;
+  font-size: 10px; color: var(--text-mute); font-family: var(--mono);
+}
+.status-dot {
+  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
+}
+.status-dot.online { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
+.status-dot.demo { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
+.status-dot.connecting { background: var(--text-dim); }
+
+/* ============ EDITOR ============ */
+.editor {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: rgba(10, 10, 18, .6);
+}
+.editor-tabs {
+  display: flex;
+  align-items: center;
+  height: 38px;
+  border-bottom: 1px solid var(--border);
+  padding: 0 8px;
+  gap: 2px;
+  overflow-x: auto;
+  flex-shrink: 0;
+  background: rgba(17, 17, 32, .5);
+}
+.editor-tab {
+  display: flex; align-items: center; gap: 6px;
+  padding: 0 14px; height: 100%;
+  font-size: 11.5px; font-family: var(--mono);
+  color: var(--text-mute);
+  border-bottom: 2px solid transparent;
+  white-space: nowrap;
+  transition: color .15s, border-color .15s;
+  cursor: pointer;
+}
+.editor-tab:hover { color: var(--text-2); }
+.editor-tab.active { color: var(--text); border-bottom-color: var(--purple); }
+.editor-tab .tab-icon { font-size: 12px; }
+
+.editor-content {
+  flex: 1;
+  overflow: auto;
+  padding: 16px 0;
+  font-family: var(--mono);
+  font-size: 13px;
+  line-height: 1.7;
+  counter-reset: line;
+}
+
+.code-line {
+  display: flex;
+  padding: 0 16px;
+  min-height: 22px;
+  animation: line-appear .2s var(--ease) both;
+}
+.code-line:hover { background: rgba(255,255,255,.02); }
+.line-number {
+  width: 48px;
+  text-align: right;
+  padding-right: 16px;
+  color: var(--text-dim);
+  font-size: 12px;
+  user-select: none;
+  flex-shrink: 0;
+}
+.line-content {
+  flex: 1;
+  white-space: pre;
+  overflow-x: auto;
+  color: var(--text-2);
+}
+
+/* Welcome state */
+.editor-welcome {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 40px;
+  gap: 16px;
+}
+.welcome-logo {
+  width: 80px; height: 80px;
+  background: var(--grad);
+  border-radius: 20px;
+  display: grid; place-items: center;
+  box-shadow: 0 16px 48px rgba(124,58,237,.3);
+  animation: float 5s ease-in-out infinite;
+}
+.welcome-logo svg { width: 44px; height: 44px; color: #fff; }
+.welcome-title { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
+.welcome-sub { font-size: 14px; color: var(--text-2); max-width: 420px; line-height: 1.6; }
+
+/* Generating overlay */
+.generating-indicator {
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 16px;
+  background: rgba(124,58,237,.1);
+  border-bottom: 1px solid rgba(124,58,237,.2);
+  font-size: 12px; color: var(--purple-light);
+  font-family: var(--mono);
+}
+.gen-spinner { width: 14px; height: 14px; border: 2px solid rgba(124,58,237,.3); border-top-color: var(--purple); border-radius: 50%; animation: spin .8s linear infinite; }
+
+/* ============ PREVIEW ============ */
+.preview-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: rgba(14, 14, 22, .9);
+  border-left: 1px solid var(--border);
+  backdrop-filter: blur(20px);
+  z-index: 5;
+  position: relative;
+}
+.preview-header {
+  height: 38px;
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 0 14px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.preview-title {
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: .1em; color: var(--text-mute);
+  display: flex; align-items: center; gap: 8px;
+}
+.preview-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
+.preview-actions { display: flex; gap: 4px; }
+.preview-btn {
+  width: 28px; height: 28px;
+  display: grid; place-items: center;
+  border-radius: var(--r-xs);
+  color: var(--text-mute);
+  transition: background .15s, color .15s;
+}
+.preview-btn:hover { background: var(--hover); color: var(--text); }
+.preview-btn svg { width: 14px; height: 14px; }
+
+.preview-frame-wrap { flex: 1; position: relative; background: #fff; }
+.preview-frame { width: 100%; height: 100%; border: 0; background: #fff; }
+.preview-empty {
+  position: absolute; inset: 0;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  background: var(--bg-1); gap: 12px; text-align: center;
+}
+.preview-empty-icon {
+  width: 48px; height: 48px; border-radius: var(--r-md);
+  background: var(--grad-soft);
+  border: 1px solid rgba(124,58,237,.2);
+  display: grid; place-items: center;
+  font-size: 20px; color: var(--purple-light);
+}
+.preview-empty p { font-size: 12px; color: var(--text-mute); }
+.preview-empty p:last-child { font-size: 11px; color: var(--text-dim); max-width: 200px; }
+
+/* Console */
+.console-panel {
+  height: 120px;
+  border-top: 1px solid var(--border);
+  display: flex; flex-direction: column;
+  flex-shrink: 0;
+}
+.console-header {
+  padding: 6px 14px;
+  font-size: 10px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: .1em; color: var(--text-dim);
+  background: rgba(255,255,255,.02);
+  border-bottom: 1px solid var(--border);
+}
+.console-body {
+  flex: 1; overflow-y: auto; padding: 8px 14px;
+  font-family: var(--mono); font-size: 11px; line-height: 1.6;
+  color: var(--ok);
+}
+.console-body .error { color: var(--err); }
+
+/* ============ PROMPT BAR ============ */
+.prompt-bar {
+  padding: 12px 16px 16px;
+  flex-shrink: 0;
+  border-top: 1px solid var(--border);
+  background: rgba(17,17,32,.7);
+  backdrop-filter: blur(16px);
+}
+.prompt-input-wrap {
+  display: flex; align-items: flex-end; gap: 8px;
+  background: rgba(20,20,36,.9);
+  border: 1px solid var(--border-2);
+  border-radius: var(--r-lg);
+  padding: 10px 14px;
+  transition: border-color .2s, box-shadow .2s;
+}
+.prompt-input-wrap:focus-within {
+  border-color: rgba(124,58,237,.5);
+  box-shadow: 0 0 0 3px rgba(124,58,237,.1), 0 20px 50px -20px rgba(124,58,237,.4);
+}
+.prompt-input {
+  flex: 1; font-size: 13.5px; line-height: 1.5;
+  color: var(--text); background: transparent;
+  resize: none; max-height: 120px; min-height: 20px;
+  font-family: var(--sans);
+}
+.prompt-input::placeholder { color: var(--text-mute); }
+.prompt-send {
+  width: 34px; height: 34px;
+  background: var(--grad);
+  border-radius: var(--r-sm);
+  display: grid; place-items: center;
+  color: #fff; flex-shrink: 0;
+  transition: filter .15s, transform .1s, box-shadow .2s;
+  box-shadow: 0 4px 14px -4px rgba(124,58,237,.4);
+}
+.prompt-send:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
+.prompt-send:disabled { opacity: .3; cursor: not-allowed; }
+.prompt-send svg { width: 16px; height: 16px; }
+.prompt-stop {
+  width: 34px; height: 34px;
+  background: var(--err);
+  border-radius: var(--r-sm);
+  display: grid; place-items: center;
+  color: #fff; flex-shrink: 0;
+  animation: pulse 1.5s ease infinite;
+}
+.prompt-stop svg { width: 14px; height: 14px; }
+.prompt-footer {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 8px 4px 0;
+  font-size: 10px; color: var(--text-dim); font-family: var(--mono);
+}
+
+/* ============ PLAN MODAL ============ */
+.modal-overlay {
+  position: fixed; inset: 0;
+  background: rgba(0,0,0,.6);
+  backdrop-filter: blur(8px);
+  z-index: 100;
+  display: grid; place-items: center;
+  animation: fadeIn .2s var(--ease);
+}
+.modal-card {
+  background: var(--panel);
+  border: 1px solid var(--border-2);
+  border-radius: var(--r-xl);
+  width: min(480px, 90%);
+  box-shadow: 0 30px 80px rgba(0,0,0,.5);
+  animation: pop-in .25s var(--ease);
+  overflow: hidden;
+}
+.modal-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+}
+.modal-header h3 { font-size: 15px; font-weight: 600; }
+.modal-close {
+  width: 32px; height: 32px; display: grid; place-items: center;
+  border-radius: var(--r-sm); color: var(--text-mute);
+  transition: background .15s;
+}
+.modal-close:hover { background: var(--hover); }
+.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
+.modal-field label { display: block; font-size: 12px; font-weight: 500; color: var(--text-2); margin-bottom: 8px; }
+.modal-options { display: flex; flex-wrap: wrap; gap: 6px; }
+.modal-option {
+  padding: 7px 14px; border-radius: var(--r-md);
+  font-size: 12px; font-weight: 500;
+  background: rgba(255,255,255,.04);
+  border: 1px solid var(--border-2);
+  color: var(--text-2);
+  transition: all .15s;
+}
+.modal-option:hover { background: rgba(255,255,255,.08); color: var(--text); }
+.modal-option.selected { background: rgba(124,58,237,.15); border-color: rgba(124,58,237,.4); color: #fff; }
+.modal-footer {
+  padding: 14px 20px;
+  border-top: 1px solid var(--border);
+  display: flex; justify-content: flex-end; gap: 8px;
+}
+.modal-btn {
+  padding: 8px 18px; border-radius: var(--r-md);
+  font-size: 12.5px; font-weight: 500;
+  transition: all .15s;
+}
+.modal-btn.ghost { color: var(--text-mute); border: 1px solid var(--border-2); }
+.modal-btn.ghost:hover { background: var(--hover); }
+.modal-btn.primary {
+  background: var(--grad); color: #fff;
+  box-shadow: 0 6px 20px -6px rgba(124,58,237,.4);
+}
+.modal-btn.primary:hover { filter: brightness(1.1); }
+
+/* Settings modal fields */
+.settings-field { display: flex; flex-direction: column; gap: 6px; }
+.settings-field label { font-size: 12px; font-weight: 500; color: var(--text-2); }
+.settings-input {
+  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: 12px;
+  transition: border-color .2s, box-shadow .2s;
+}
+.settings-input:focus {
+  border-color: rgba(124,58,237,.5);
+  box-shadow: 0 0 0 3px rgba(124,58,237,.1);
+}
+.settings-hint { font-size: 10.5px; color: var(--text-dim); line-height: 1.5; }
+.settings-range-wrap { display: flex; align-items: center; gap: 12px; }
+.settings-range {
+  flex: 1; -webkit-appearance: none; appearance: none;
+  height: 4px; background: var(--bg-1); border-radius: 2px; border: 1px solid var(--border);
+}
+.settings-range::-webkit-slider-thumb {
+  -webkit-appearance: none; width: 14px; height: 14px;
+  border-radius: 50%; background: var(--grad);
+  border: 2px solid #fff; cursor: pointer;
+  box-shadow: 0 0 0 2px rgba(124,58,237,.2);
+}
+.settings-range-val {
+  font-family: var(--mono); font-size: 12px;
+  color: var(--purple-light); min-width: 42px; text-align: right;
+}
+
+/* ============ TOASTS ============ */
+.toasts {
+  position: fixed; bottom: 20px; right: 20px;
+  display: flex; flex-direction: column; gap: 8px;
+  z-index: 200; pointer-events: none;
+}
+.toast {
+  pointer-events: auto;
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 16px;
+  border-radius: var(--r-md);
+  background: var(--panel-2);
+  border: 1px solid var(--border-2);
+  box-shadow: 0 16px 32px rgba(0,0,0,.4);
+  font-size: 12.5px; color: var(--text);
+  animation: toast-in .3s var(--ease);
+  min-width: 220px; max-width: 340px;
+}
+.toast-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+.toast-dot.success { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
+.toast-dot.error { background: var(--err); box-shadow: 0 0 8px var(--err); }
+.toast-dot.info { background: var(--info); box-shadow: 0 0 8px var(--info); }
+
+/* ============ RESPONSIVE ============ */
+@media (max-width: 1200px) { .app-shell { grid-template-columns: var(--sidebar-w) 1fr 360px; } }
+@media (max-width: 1024px) {
+  .app-shell { grid-template-columns: 1fr; }
+  .sidebar { display: none; }
+  .preview-panel { display: none; }
+}

frontend/src/App.jsx

@@ -0,0 +1,346 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import Sidebar from './components/Sidebar';
+import Editor from './components/Editor';
+import Preview from './components/Preview';
+import PromptBar from './components/PromptBar';
+import PlanModal from './components/PlanModal';
+import SettingsModal from './components/SettingsModal';
+import Toasts from './components/Toasts';
+import { callMINDI, generateDemo, isQuotaError, isQuotaException, pingAPI } from './services/api';
+import { analyzePrompt, enhancePrompt, getQuickEnhancement } from './services/promptEnhancer';
+import { parseFiles, buildPreviewHTML } from './services/fileParser';
+import './App.css';
+
+const STORAGE_KEY = 'mindi.builder.v1';
+
+function loadSettings() {
+  try {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY)) || {};
+  } catch { return {}; }
+}
+
+export default function App() {
+  const saved = loadSettings();
+  const [settings, setSettings] = useState({
+    apiUrl: saved.apiUrl || 'https://mindigenous-mindi-chat.hf.space',
+    hfToken: saved.hfToken || '',
+    temperature: saved.temperature ?? 0.7,
+    maxTokens: saved.maxTokens ?? 2048,
+  });
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [planModal, setPlanModal] = useState(null);
+  const [toasts, setToasts] = useState([]);
+  const [status, setStatus] = useState('connecting');
+  const [files, setFiles] = useState([]);
+  const [activeFile, setActiveFile] = useState(null);
+  const [previewHTML, setPreviewHTML] = useState(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [generationProgress, setGenerationProgress] = useState('');
+  const [agentSteps, setAgentSteps] = useState([]);
+  const [codeLines, setCodeLines] = useState([]);
+  const [consoleOutput, setConsoleOutput] = useState([]);
+  const [history, setHistory] = useState([]);
+  const abortRef = useRef(null);
+
+  const addToast = useCallback((msg, type = 'info', ms = 3000) => {
+    const id = Date.now() + Math.random();
+    setToasts(t => [...t, { id, msg, type }]);
+    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), ms);
+  }, []);
+
+  const saveSettings = useCallback((s) => {
+    setSettings(s);
+    try { localStorage.setItem(STORAGE_KEY, JSON.stringify(s)); } catch {}
+  }, []);
+
+  // Health check
+  useEffect(() => {
+    const check = async () => {
+      const ok = await pingAPI(settings.apiUrl, settings.hfToken);
+      setStatus(ok ? 'online' : 'demo');
+    };
+    check();
+    const iv = setInterval(check, 60000);
+    return () => clearInterval(iv);
+  }, [settings.apiUrl, settings.hfToken]);
+
+  const addAgentStep = useCallback((type, detail, status = 'running') => {
+    const step = { id: Date.now(), type, detail, status, time: new Date() };
+    setAgentSteps(prev => [...prev, step]);
+    return step.id;
+  }, []);
+
+  const updateAgentStep = useCallback((id, updates) => {
+    setAgentSteps(prev => prev.map(s => s.id === id ? { ...s, ...updates } : s));
+  }, []);
+
+  // Animate code appearing line by line
+  const animateCode = useCallback((code, fileList) => {
+    const lines = code.split('\n');
+    setCodeLines([]);
+    let i = 0;
+    const interval = setInterval(() => {
+      if (i < lines.length) {
+        setCodeLines(prev => [...prev, { text: lines[i], id: i, visible: true }]);
+        i++;
+      } else {
+        clearInterval(interval);
+      }
+    }, 15); // ~15ms per line for smooth animation
+    return () => clearInterval(interval);
+  }, []);
+
+  // Main generate function
+  const handleGenerate = useCallback(async (userPrompt, skipPlan = false) => {
+    if (!userPrompt.trim() || isGenerating) return;
+
+    // Analyze prompt for planning
+    if (!skipPlan) {
+      const analysis = analyzePrompt(userPrompt);
+      if (analysis.questions.length > 0) {
+        setPlanModal({ userPrompt, questions: analysis.questions });
+        return;
+      }
+    }
+
+    setIsGenerating(true);
+    setAgentSteps([]);
+    setConsoleOutput([]);
+    setCodeLines([]);
+    setFiles([]);
+    setPreviewHTML(null);
+    abortRef.current = new AbortController();
+
+    // Step 1: Plan
+    const planId = addAgentStep('plan', 'Analyzing your request...');
+    setGenerationProgress('Planning...');
+    await new Promise(r => setTimeout(r, 400));
+    updateAgentStep(planId, { status: 'success', detail: 'Requirements analyzed' });
+
+    // Step 2: Enhance prompt
+    const enhanceId = addAgentStep('enhance', 'Enhancing prompt for best output...');
+    const enhanced = getQuickEnhancement(userPrompt);
+    await new Promise(r => setTimeout(r, 300));
+    updateAgentStep(enhanceId, { status: 'success', detail: 'Prompt optimized' });
+
+    // Step 3: Generate
+    const genId = addAgentStep('generate', 'Generating code with MINDI 1.5...');
+    setGenerationProgress('Generating code...');
+
+    let result;
+    try {
+      if (status === 'demo' || !settings.apiUrl) {
+        result = await generateDemo(userPrompt);
+      } else {
+        result = await callMINDI({
+          prompt: enhanced,
+          temperature: settings.temperature,
+          maxTokens: settings.maxTokens,
+          history,
+          hfToken: settings.hfToken,
+          apiUrl: settings.apiUrl,
+          signal: abortRef.current.signal,
+        });
+      }
+
+      if (isQuotaError(result)) {
+        updateAgentStep(genId, { status: 'failed', detail: 'GPU quota — using demo fallback' });
+        addToast('GPU quota exceeded — showing demo. Add HF token in Settings for real generation.', 'error', 5000);
+        result = await generateDemo(userPrompt);
+      }
+
+      updateAgentStep(genId, { status: 'success', detail: `Response received (${(result.response || '').length} chars)` });
+
+      // Step 4: Parse files
+      const parseId = addAgentStep('parse', 'Extracting files...');
+      const parsedFiles = parseFiles(result.response);
+      setFiles(parsedFiles);
+      if (parsedFiles.length > 0) {
+        setActiveFile(parsedFiles[0].id);
+        // Animate the code
+        animateCode(parsedFiles[0].content, parsedFiles);
+      }
+      updateAgentStep(parseId, { status: 'success', detail: `${parsedFiles.length} file(s) extracted` });
+
+      // Step 5: Preview
+      const previewId = addAgentStep('preview', 'Rendering preview...');
+      const html = buildPreviewHTML(parsedFiles);
+      if (html) {
+        setPreviewHTML(html);
+        updateAgentStep(previewId, { status: 'success', detail: 'Preview rendered' });
+        setConsoleOutput(prev => [...prev, { type: 'log', text: '✓ Page rendered successfully' }]);
+      } else {
+        updateAgentStep(previewId, { status: 'success', detail: 'No HTML to preview' });
+      }
+
+      // Update history
+      setHistory(prev => [
+        ...prev.slice(-18),
+        { role: 'user', content: userPrompt },
+        { role: 'assistant', content: result.response },
+      ]);
+
+      // Done
+      addAgentStep('done', 'Generation complete!', 'success');
+      setGenerationProgress('');
+
+    } catch (err) {
+      updateAgentStep(genId, { status: 'failed', detail: err.message });
+      addToast(`Error: ${err.message}`, 'error');
+
+      // Fallback to demo
+      try {
+        result = await generateDemo(userPrompt);
+        const parsedFiles = parseFiles(result.response);
+        setFiles(parsedFiles);
+        if (parsedFiles.length > 0) {
+          setActiveFile(parsedFiles[0].id);
+          animateCode(parsedFiles[0].content, parsedFiles);
+        }
+        const html = buildPreviewHTML(parsedFiles);
+        if (html) setPreviewHTML(html);
+        addAgentStep('done', 'Demo response used as fallback', 'success');
+      } catch {}
+    }
+
+    setIsGenerating(false);
+    setGenerationProgress('');
+  }, [isGenerating, settings, status, history, addToast, addAgentStep, updateAgentStep, animateCode]);
+
+  const handlePlanSubmit = useCallback((userPrompt, answers) => {
+    setPlanModal(null);
+    const enhanced = enhancePrompt(userPrompt, answers);
+    // Re-call generate with the enhanced prompt, skipping plan
+    setIsGenerating(true);
+    setAgentSteps([]);
+    setConsoleOutput([]);
+    setCodeLines([]);
+    setFiles([]);
+    setPreviewHTML(null);
+
+    (async () => {
+      const genId = addAgentStep('generate', 'Generating with your preferences...');
+      setGenerationProgress('Generating...');
+      let result;
+      try {
+        if (status === 'demo') {
+          result = await generateDemo(userPrompt);
+        } else {
+          result = await callMINDI({ prompt: enhanced, temperature: settings.temperature, maxTokens: settings.maxTokens, history, hfToken: settings.hfToken, apiUrl: settings.apiUrl });
+        }
+        if (isQuotaError(result)) {
+          updateAgentStep(genId, { status: 'failed', detail: 'GPU quota — using demo' });
+          addToast('GPU quota exceeded — showing demo.', 'error', 4000);
+          result = await generateDemo(userPrompt);
+        }
+        updateAgentStep(genId, { status: 'success', detail: 'Code generated' });
+        const parsedFiles = parseFiles(result.response);
+        setFiles(parsedFiles);
+        if (parsedFiles.length > 0) { setActiveFile(parsedFiles[0].id); animateCode(parsedFiles[0].content, parsedFiles); }
+        const html = buildPreviewHTML(parsedFiles);
+        if (html) setPreviewHTML(html);
+        setHistory(prev => [...prev.slice(-18), { role: 'user', content: userPrompt }, { role: 'assistant', content: result.response }]);
+        addAgentStep('done', 'Complete!', 'success');
+      } catch (err) {
+        updateAgentStep(genId, { status: 'failed', detail: err.message });
+        // Fallback to demo on any error
+        try {
+          if (isQuotaException(err.message)) {
+            addToast('GPU quota exceeded — showing demo.', 'error', 4000);
+          }
+          result = await generateDemo(userPrompt);
+          const parsedFiles = parseFiles(result.response);
+          setFiles(parsedFiles);
+          if (parsedFiles.length > 0) { setActiveFile(parsedFiles[0].id); animateCode(parsedFiles[0].content, parsedFiles); }
+          const html = buildPreviewHTML(parsedFiles);
+          if (html) { setPreviewHTML(html); setConsoleOutput(prev => [...prev, { type: 'log', text: '✓ Demo preview rendered' }]); }
+          addAgentStep('done', 'Demo fallback used', 'success');
+        } catch {}
+      }
+      setIsGenerating(false);
+      setGenerationProgress('');
+    })();
+  }, [settings, status, history, addToast, addAgentStep, updateAgentStep, animateCode]);
+
+  const handleFileSelect = useCallback((fileId) => {
+    setActiveFile(fileId);
+    const file = files.find(f => f.id === fileId);
+    if (file) {
+      setCodeLines(file.content.split('\n').map((text, i) => ({ text, id: i, visible: true })));
+    }
+  }, [files]);
+
+  const handleStop = useCallback(() => {
+    abortRef.current?.abort();
+    setIsGenerating(false);
+    setGenerationProgress('');
+    addAgentStep('stop', 'Generation stopped by user', 'failed');
+  }, [addAgentStep]);
+
+  const activeFileData = files.find(f => f.id === activeFile);
+
+  return (
+    <div className="app-shell">
+      <div className="ambient">
+        <div className="grid-pattern" />
+        <div className="blob blob--purple" />
+        <div className="blob blob--blue" />
+      </div>
+
+      <Sidebar
+        files={files}
+        activeFile={activeFile}
+        onFileSelect={handleFileSelect}
+        agentSteps={agentSteps}
+        status={status}
+        isGenerating={isGenerating}
+        onSettingsOpen={() => setSettingsOpen(true)}
+      />
+
+      <main className="main-area">
+        <Editor
+          file={activeFileData}
+          codeLines={codeLines}
+          isGenerating={isGenerating}
+          generationProgress={generationProgress}
+          files={files}
+          activeFile={activeFile}
+          onFileSelect={handleFileSelect}
+        />
+
+        <PromptBar
+          onSubmit={handleGenerate}
+          onStop={handleStop}
+          isGenerating={isGenerating}
+          generationProgress={generationProgress}
+          status={status}
+        />
+      </main>
+
+      <Preview
+        html={previewHTML}
+        consoleOutput={consoleOutput}
+        isGenerating={isGenerating}
+      />
+
+      {planModal && (
+        <PlanModal
+          userPrompt={planModal.userPrompt}
+          questions={planModal.questions}
+          onSubmit={handlePlanSubmit}
+          onClose={() => setPlanModal(null)}
+        />
+      )}
+
+      {settingsOpen && (
+        <SettingsModal
+          settings={settings}
+          onSave={(s) => { saveSettings(s); setSettingsOpen(false); addToast('Settings saved', 'success'); }}
+          onClose={() => setSettingsOpen(false)}
+        />
+      )}
+
+      <Toasts toasts={toasts} />
+    </div>
+  );
+}

frontend/src/components/Editor.jsx

@@ -0,0 +1,77 @@
+import { getFileIcon } from '../services/fileParser';
+
+export default function Editor({ file, codeLines, isGenerating, generationProgress, files, activeFile, onFileSelect }) {
+  if (!file && !isGenerating) {
+    return (
+      <div className="editor">
+        <div className="editor-welcome">
+          <div className="welcome-logo">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+              <path d="M12 2L2 7l10 5 10-5-10-5z" />
+              <path d="M2 17l10 5 10-5" />
+              <path d="M2 12l10 5 10-5" />
+            </svg>
+          </div>
+          <h1 className="welcome-title">
+            What do you want to <span className="grad-text">build</span>?
+          </h1>
+          <p className="welcome-sub">
+            Describe your website, app, or component and MINDI will generate production-ready code with live preview.
+          </p>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', justifyContent: 'center', maxWidth: '400px' }}>
+            {['Landing Page', 'Dashboard', 'Portfolio', 'E-commerce'].map(tag => (
+              <span key={tag} style={{
+                padding: '6px 14px', borderRadius: '20px', fontSize: '11px',
+                background: 'rgba(124,58,237,.1)', border: '1px solid rgba(124,58,237,.2)',
+                color: 'var(--purple-light)', fontWeight: 500,
+              }}>{tag}</span>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="editor">
+      {/* Tabs */}
+      {files.length > 0 && (
+        <div className="editor-tabs">
+          {files.map(f => (
+            <button
+              key={f.id}
+              className={`editor-tab ${activeFile === f.id ? 'active' : ''}`}
+              onClick={() => onFileSelect(f.id)}
+            >
+              <span className="tab-icon">{getFileIcon(f.path)}</span>
+              {f.path}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Generating indicator */}
+      {isGenerating && (
+        <div className="generating-indicator">
+          <div className="gen-spinner" />
+          <span>{generationProgress || 'Generating...'}</span>
+        </div>
+      )}
+
+      {/* Code */}
+      <div className="editor-content">
+        {codeLines.map((line, i) => (
+          <div key={line.id} className="code-line" style={{ animationDelay: `${Math.min(i * 12, 600)}ms` }}>
+            <span className="line-number">{i + 1}</span>
+            <span className="line-content">{line.text}</span>
+          </div>
+        ))}
+        {isGenerating && codeLines.length === 0 && (
+          <div style={{ padding: '20px 64px', color: 'var(--text-dim)', fontFamily: 'var(--mono)', fontSize: '12px' }}>
+            Waiting for code...
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/PlanModal.jsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+
+export default function PlanModal({ userPrompt, questions, onSubmit, onClose }) {
+  const [answers, setAnswers] = useState(() => {
+    const init = {};
+    questions.forEach(q => { init[q.id] = q.default; });
+    return init;
+  });
+
+  return (
+    <div className="modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
+      <div className="modal-card">
+        <div className="modal-header">
+          <h3>🎯 Configure Your Project</h3>
+          <button className="modal-close" onClick={onClose}>✕</button>
+        </div>
+
+        <div className="modal-body">
+          <div style={{ padding: '10px 14px', background: 'rgba(124,58,237,.08)', borderRadius: 'var(--r-md)', border: '1px solid rgba(124,58,237,.15)', fontSize: '12px', color: 'var(--text-2)', lineHeight: '1.5' }}>
+            <strong style={{ color: 'var(--text)' }}>Your prompt:</strong> {userPrompt}
+          </div>
+
+          {questions.map(q => (
+            <div key={q.id} className="modal-field">
+              <label>{q.question}</label>
+              <div className="modal-options">
+                {q.options.map(opt => (
+                  <button
+                    key={opt.value}
+                    className={`modal-option ${answers[q.id] === opt.value ? 'selected' : ''}`}
+                    onClick={() => setAnswers(prev => ({ ...prev, [q.id]: opt.value }))}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="modal-footer">
+          <button className="modal-btn ghost" onClick={() => { onSubmit(userPrompt, {}); }}>
+            Skip & Generate
+          </button>
+          <button className="modal-btn primary" onClick={() => { onSubmit(userPrompt, answers); }}>
+            Generate ⚡
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/Preview.jsx

@@ -0,0 +1,80 @@
+import { useRef, useEffect } from 'react';
+
+export default function Preview({ html, consoleOutput, isGenerating }) {
+  const iframeRef = useRef(null);
+
+  useEffect(() => {
+    if (iframeRef.current && html) {
+      iframeRef.current.srcdoc = html;
+    }
+  }, [html]);
+
+  return (
+    <div className="preview-panel">
+      <div className="preview-header">
+        <div className="preview-title">
+          {html && <span className="preview-dot" />}
+          <span>Preview</span>
+        </div>
+        <div className="preview-actions">
+          {html && (
+            <button className="preview-btn" title="Open in new tab" onClick={() => {
+              const w = window.open('', '_blank');
+              if (w) { w.document.open(); w.document.write(html); w.document.close(); }
+            }}>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
+                <polyline points="15 3 21 3 21 9" />
+                <line x1="10" y1="14" x2="21" y2="3" />
+              </svg>
+            </button>
+          )}
+          {html && (
+            <button className="preview-btn" title="Copy HTML" onClick={() => {
+              navigator.clipboard.writeText(html).catch(() => {});
+            }}>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <rect x="9" y="9" width="13" height="13" rx="2" />
+                <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+              </svg>
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="preview-frame-wrap">
+        {html ? (
+          <iframe
+            ref={iframeRef}
+            className="preview-frame"
+            title="Live Preview"
+            sandbox="allow-scripts allow-same-origin"
+          />
+        ) : (
+          <div className="preview-empty">
+            <div className="preview-empty-icon">
+              {isGenerating ? '⏳' : '👁️'}
+            </div>
+            <p>{isGenerating ? 'Generating preview...' : 'Live Preview'}</p>
+            <p>{isGenerating ? 'Your website will appear here' : 'Generated code will render here in real-time'}</p>
+          </div>
+        )}
+      </div>
+
+      <div className="console-panel">
+        <div className="console-header">Console</div>
+        <div className="console-body">
+          {consoleOutput.length === 0 ? (
+            <span style={{ color: 'var(--text-dim)' }}>No output yet</span>
+          ) : (
+            consoleOutput.map((entry, i) => (
+              <div key={i} className={entry.type === 'error' ? 'error' : ''}>
+                {entry.text}
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/PromptBar.jsx

@@ -0,0 +1,68 @@
+import { useState, useRef, useEffect } from 'react';
+
+export default function PromptBar({ onSubmit, onStop, isGenerating, generationProgress, status }) {
+  const [input, setInput] = useState('');
+  const textareaRef = useRef(null);
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 120) + 'px';
+    }
+  }, [input]);
+
+  const handleSubmit = () => {
+    if (!input.trim() || isGenerating) return;
+    onSubmit(input.trim());
+    setInput('');
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <div className="prompt-bar">
+      <div className="prompt-input-wrap">
+        <textarea
+          ref={textareaRef}
+          className="prompt-input"
+          placeholder="Describe what you want to build..."
+          value={input}
+          onChange={e => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          rows={1}
+          disabled={isGenerating}
+        />
+        {isGenerating ? (
+          <button className="prompt-stop" onClick={onStop} title="Stop generation">
+            <svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2" /></svg>
+          </button>
+        ) : (
+          <button
+            className="prompt-send"
+            onClick={handleSubmit}
+            disabled={!input.trim()}
+            title="Generate"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <line x1="22" y1="2" x2="11" y2="13" />
+              <polygon points="22 2 15 22 11 13 2 9 22 2" />
+            </svg>
+          </button>
+        )}
+      </div>
+      <div className="prompt-footer">
+        <span>
+          {status === 'demo' ? '⚠ Demo mode · add HF token in Settings' : 'MINDI 1.5 Vision-Coder'}
+        </span>
+        <span>
+          {isGenerating ? generationProgress : 'Shift+Enter for new line'}
+        </span>
+      </div>
+    </div>
+  );
+}

frontend/src/components/SettingsModal.jsx

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+
+export default function SettingsModal({ settings, onSave, onClose }) {
+  const [form, setForm] = useState({ ...settings });
+
+  const update = (key, val) => setForm(prev => ({ ...prev, [key]: val }));
+
+  return (
+    <div className="modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
+      <div className="modal-card">
+        <div className="modal-header">
+          <h3>⚙️ Settings</h3>
+          <button className="modal-close" onClick={onClose}>✕</button>
+        </div>
+
+        <div className="modal-body">
+          <div className="settings-field">
+            <label>API Endpoint</label>
+            <input className="settings-input" type="url" value={form.apiUrl} onChange={e => update('apiUrl', e.target.value)} placeholder="https://mindigenous-mindi-chat.hf.space" />
+            <div className="settings-hint">HuggingFace Space or custom API URL</div>
+          </div>
+
+          <div className="settings-field">
+            <label>HuggingFace Token</label>
+            <input className="settings-input" type="password" value={form.hfToken} onChange={e => update('hfToken', e.target.value)} placeholder="hf_..." />
+            <div className="settings-hint">Required for ZeroGPU access. Get one at huggingface.co/settings/tokens</div>
+          </div>
+
+          <div className="settings-field">
+            <label>Temperature</label>
+            <div className="settings-range-wrap">
+              <input className="settings-range" type="range" min="0" max="2" step="0.05" value={form.temperature} onChange={e => update('temperature', parseFloat(e.target.value))} />
+              <span className="settings-range-val">{Number(form.temperature).toFixed(2)}</span>
+            </div>
+          </div>
+
+          <div className="settings-field">
+            <label>Max Tokens</label>
+            <div className="settings-range-wrap">
+              <input className="settings-range" type="range" min="128" max="4096" step="128" value={form.maxTokens} onChange={e => update('maxTokens', parseInt(e.target.value))} />
+              <span className="settings-range-val">{form.maxTokens}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="modal-footer">
+          <button className="modal-btn ghost" onClick={onClose}>Cancel</button>
+          <button className="modal-btn primary" onClick={() => onSave(form)}>Save Settings</button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/Sidebar.jsx

@@ -0,0 +1,74 @@
+import { getFileIcon } from '../services/fileParser';
+
+const STEP_ICONS = { plan: '📋', enhance: '✨', generate: '⚡', parse: '📦', preview: '👁️', done: '🎉', stop: '⏹️' };
+const STEP_LABELS = { plan: 'Planning', enhance: 'Enhancing', generate: 'Generating', parse: 'Parsing', preview: 'Previewing', done: 'Complete', stop: 'Stopped' };
+
+export default function Sidebar({ files, activeFile, onFileSelect, agentSteps, status, isGenerating, onSettingsOpen }) {
+  return (
+    <aside className="sidebar">
+      <button className="sidebar-brand" onClick={onSettingsOpen} title="Settings">
+        <div className="brand-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2L2 7l10 5 10-5-10-5z" /><path d="M2 17l10 5 10-5" /><path d="M2 12l10 5 10-5" /></svg>
+        </div>
+        <div className="brand-info">
+          <div className="brand-name">MINDI<span className="grad-text"> 1.5</span></div>
+          <div className="brand-sub">VISION-CODER • AI BUILDER</div>
+        </div>
+      </button>
+
+      {/* File Tree */}
+      <div className="sidebar-section">
+        <div className="sidebar-section-title">
+          {files.length > 0 ? `Files (${files.length})` : 'Project'}
+        </div>
+        <div className="file-tree">
+          {files.length === 0 ? (
+            <div style={{ padding: '8px 16px', fontSize: '11px', color: 'var(--text-dim)' }}>
+              {isGenerating ? 'Generating files...' : 'No files yet. Describe what to build.'}
+            </div>
+          ) : (
+            files.map((f, i) => (
+              <button
+                key={f.id}
+                className={`file-item ${activeFile === f.id ? 'active' : ''}`}
+                onClick={() => onFileSelect(f.id)}
+                style={{ animationDelay: `${i * 80}ms` }}
+              >
+                <span className="file-icon">{getFileIcon(f.path)}</span>
+                <span className="file-name">{f.path}</span>
+              </button>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Agent Steps */}
+      {agentSteps.length > 0 && (
+        <div className="sidebar-section" style={{ borderTop: '1px solid var(--border)', paddingTop: '8px' }}>
+          <div className="sidebar-section-title">Agent Progress</div>
+          <div className="agent-steps">
+            {agentSteps.map((step, i) => (
+              <div key={step.id} className="agent-step" style={{ animationDelay: `${i * 60}ms` }}>
+                <div className={`step-icon ${step.status}`}>
+                  {step.status === 'running' ? '⏳' : step.status === 'success' ? '✅' : step.status === 'failed' ? '❌' : (STEP_ICONS[step.type] || '⏺')}
+                </div>
+                <div>
+                  <div style={{ fontWeight: 500, color: 'var(--text)' }}>{STEP_LABELS[step.type] || step.type}</div>
+                  <div className="step-detail">{step.detail}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div style={{ flex: 1 }} />
+
+      {/* Footer */}
+      <div className="sidebar-footer">
+        <div className={`status-dot ${status}`} />
+        <span>{status === 'online' ? 'MINDI · Connected' : status === 'demo' ? 'Demo Mode' : 'Connecting...'}</span>
+      </div>
+    </aside>
+  );
+}

frontend/src/components/Toasts.jsx

@@ -0,0 +1,13 @@
+export default function Toasts({ toasts }) {
+  if (!toasts.length) return null;
+  return (
+    <div className="toasts">
+      {toasts.map(t => (
+        <div key={t.id} className="toast">
+          <div className={`toast-dot ${t.type}`} />
+          <span>{t.msg}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/index.css

@@ -0,0 +1,189 @@
+/* =============================================================
+   MINDI 1.5 — AI Website Builder
+   Design System — Premium dark IDE theme
+   ============================================================= */
+
+/* ============ TOKENS ============ */
+:root {
+  /* Surfaces */
+  --bg-0: #07070c;
+  --bg-1: #0a0a12;
+  --bg-2: #0d0d16;
+  --panel: #111120;
+  --panel-2: #16162a;
+  --panel-3: #1c1c36;
+  --elevated: #1f1f38;
+  --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;
+  --purple-light: #a78bfa;
+  --blue: #2563eb;
+  --blue-light: #60a5fa;
+  --grad: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
+  --grad-soft: linear-gradient(135deg, rgba(124, 58, 237, .15) 0%, rgba(37, 99, 235, .15) 100%);
+  --grad-glow: linear-gradient(135deg, rgba(124, 58, 237, .55) 0%, rgba(37, 99, 235, .55) 100%);
+
+  /* Status */
+  --ok: #10b981;
+  --warn: #f59e0b;
+  --err: #ef4444;
+  --info: #3b82f6;
+
+  /* Code colors */
+  --c-keyword: #a78bfa;
+  --c-string: #34d399;
+  --c-number: #fbbf24;
+  --c-comment: #6a6a85;
+  --c-function: #60a5fa;
+  --c-tag: #f87171;
+  --c-attr: #fbbf24;
+  --c-operator: #5eead4;
+
+  /* Geometry */
+  --r-xs: 4px;
+  --r-sm: 6px;
+  --r-md: 10px;
+  --r-lg: 14px;
+  --r-xl: 18px;
+  --r-2xl: 24px;
+
+  --sidebar-w: 260px;
+  --header-h: 48px;
+
+  /* Motion */
+  --ease: cubic-bezier(.16, 1, .3, 1);
+  --ease-2: cubic-bezier(.4, 0, .2, 1);
+  --ease-spring: cubic-bezier(.34, 1.56, .64, 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, #root { height: 100%; }
+body {
+  font-family: var(--sans);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text);
+  background: var(--bg-0);
+  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; }
+a { color: inherit; text-decoration: none; }
+img, svg { display: block; }
+
+/* Scrollbars */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-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; }
+
+/* ============ UTILITY CLASSES ============ */
+.grad-text {
+  background: var(--grad);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* ============ ANIMATIONS ============ */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes fadeInLeft {
+  from { opacity: 0; transform: translateX(-8px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes fadeInScale {
+  from { opacity: 0; transform: scale(.96); }
+  to { opacity: 1; transform: scale(1); }
+}
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(16px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: .4; }
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+@keyframes typewriter-cursor {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+@keyframes glow-pulse {
+  0%, 100% { box-shadow: 0 0 20px rgba(124, 58, 237, .2); }
+  50% { box-shadow: 0 0 40px rgba(124, 58, 237, .4); }
+}
+@keyframes line-appear {
+  from { opacity: 0; transform: translateX(-4px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+@keyframes drift-1 {
+  to { transform: translate(80px, 60px) scale(1.1); }
+}
+@keyframes drift-2 {
+  to { transform: translate(-60px, -80px) scale(1.15); }
+}
+@keyframes pop-in {
+  from { opacity: 0; transform: scale(.92) translateY(8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+@keyframes toast-in {
+  from { opacity: 0; transform: translateX(20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+@keyframes toast-out {
+  to { opacity: 0; transform: translateX(20px); }
+}
+
+/* ============ REDUCE MOTION ============ */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: .01ms !important;
+    transition-duration: .01ms !important;
+  }
+}

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.jsx';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

frontend/src/services/api.js

@@ -0,0 +1,148 @@
+/* =============================================================
+   MINDI API Service — Gradio SSE v3 integration
+   Connects to HuggingFace-hosted MINDI 1.5 Vision-Coder
+   ============================================================= */
+
+const API_DEFAULT = 'https://mindigenous-mindi-chat.hf.space';
+
+function authHeaders(hfToken, extra = {}) {
+  const h = { ...extra };
+  if (hfToken) h['Authorization'] = `Bearer ${hfToken}`;
+  return h;
+}
+
+function dataUrlToBlob(dataUrl) {
+  const match = /^data:([^;]+);base64,(.+)$/.exec(dataUrl || '');
+  if (!match) throw new Error('Invalid image data URL');
+  const bytes = Uint8Array.from(atob(match[2]), c => c.charCodeAt(0));
+  return { blob: new Blob([bytes], { type: match[1] }), mime: match[1] };
+}
+
+async function uploadImageToGradio(base, dataUrl, hfToken, signal) {
+  const { blob, mime } = dataUrlToBlob(dataUrl);
+  const ext = (mime.split('/')[1] || 'png').replace('+xml', '').split(';')[0];
+  const filename = `mindi-upload-${Date.now()}.${ext}`;
+  const formData = new FormData();
+  formData.append('files', blob, filename);
+
+  const headers = authHeaders(hfToken);
+  delete headers['Content-Type'];
+
+  const res = await fetch(`${base}/gradio_api/upload`, {
+    method: 'POST', headers, body: formData, signal,
+  });
+  if (!res.ok) throw new Error(`Image upload ${res.status}`);
+  const result = await res.json();
+  const filePath = Array.isArray(result) ? result[0] : result?.files?.[0];
+  if (!filePath) throw new Error('Upload failed');
+  return filePath;
+}
+
+export async function callMINDI({ prompt, image, temperature = 0.7, maxTokens = 2048, history = [], hfToken = '', apiUrl = API_DEFAULT, signal }) {
+  const base = (apiUrl || API_DEFAULT).replace(/\/$/, '');
+  const isGradio = base.includes('hf.space') || base.includes('huggingface.co');
+  const historyJson = history.length ? JSON.stringify(history) : '';
+
+  if (isGradio) {
+    let imageArg = null;
+    if (image && image.startsWith('data:')) {
+      try {
+        const filePath = await uploadImageToGradio(base, image, hfToken, signal);
+        imageArg = { path: filePath, meta: { _type: 'gradio.FileData' }, orig_name: filePath.split('/').pop() };
+      } catch { imageArg = null; }
+    }
+
+    const submitRes = await fetch(`${base}/gradio_api/call/chat_fn`, {
+      method: 'POST',
+      headers: authHeaders(hfToken, { 'Content-Type': 'application/json' }),
+      body: JSON.stringify({ data: [prompt, imageArg, temperature, maxTokens, historyJson] }),
+      signal,
+    });
+    if (!submitRes.ok) {
+      const txt = await submitRes.text().catch(() => '');
+      throw new Error(`API ${submitRes.status}: ${txt.slice(0, 200)}`);
+    }
+    const { event_id } = await submitRes.json();
+    if (!event_id) throw new Error('No event_id returned');
+
+    const resultRes = await fetch(`${base}/gradio_api/call/chat_fn/${event_id}`, {
+      method: 'GET', headers: authHeaders(hfToken), signal,
+    });
+    if (!resultRes.ok) throw new Error(`API result ${resultRes.status}`);
+
+    const sseText = await resultRes.text();
+    const lines = sseText.split('\n');
+    for (let i = 0; i < lines.length; i++) {
+      if (lines[i].startsWith('event: complete')) {
+        const dataLine = lines[i + 1];
+        if (dataLine?.startsWith('data: ')) {
+          try {
+            const parsed = JSON.parse(dataLine.slice(6));
+            const raw = Array.isArray(parsed) ? parsed[0] : parsed;
+            try { return JSON.parse(raw); } catch { return { response: String(raw), sections: {} }; }
+          } catch { return { response: dataLine.slice(6), sections: {} }; }
+        }
+        break;
+      }
+      if (lines[i].startsWith('event: error')) {
+        const errMsg = lines[i + 1]?.startsWith('data: ') ? lines[i + 1].slice(6) : 'Gradio error';
+        throw new Error(errMsg.slice(0, 300));
+      }
+    }
+    throw new Error('No complete event in response');
+  } else {
+    const body = { prompt, temperature, max_tokens: maxTokens, history };
+    if (image) body.image = image;
+    const res = await fetch(`${base}/api/generate`, {
+      method: 'POST',
+      headers: authHeaders(hfToken, { 'Content-Type': 'application/json', 'Accept': 'application/json' }),
+      body: JSON.stringify(body), signal,
+    });
+    if (!res.ok) throw new Error(`API ${res.status}`);
+    return res.json();
+  }
+}
+
+export async function pingAPI(apiUrl, hfToken) {
+  const base = (apiUrl || API_DEFAULT).replace(/\/$/, '');
+  try {
+    const res = await fetch(base, { method: 'HEAD', mode: 'no-cors' }).catch(() => null);
+    return !!res;
+  } catch { return false; }
+}
+
+export function isQuotaError(result) {
+  if (!result) return false;
+  const text = String(result.response || '');
+  const errs = result.sections?.error || [];
+  const blob = (text + ' ' + errs.join(' ')).toLowerCase();
+  return /zerogpu|gpu quota|out of .* quota|exceeded .* quota|unlogged user|gpu task aborted|task aborted/.test(blob);
+}
+
+export function isQuotaException(errMessage) {
+  const msg = (errMessage || '').toLowerCase();
+  return /gpu quota|zerogpu|gpu task aborted|task aborted|unlogged user|out of .* quota|exceeded .* quota/.test(msg);
+}
+
+// Demo responses
+const DEMOS = [
+  {
+    match: /landing|hero|page|website/i,
+    response: `Here's a complete landing page:\n\n\`\`\`html\n<!DOCTYPE html>\n<html lang="en">\n<head>\n<meta charset="UTF-8">\n<meta name="viewport" content="width=device-width, initial-scale=1.0">\n<title>Lumina — Future of Design</title>\n<script src="https://cdn.tailwindcss.com"><\/script>\n<style>\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\nbody { font-family: 'Inter', sans-serif; }\n.gradient-bg { background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); }\n.glow { box-shadow: 0 0 40px rgba(124, 58, 237, 0.3); }\n.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }\n</style>\n</head>\n<body class="gradient-bg text-white min-h-screen">\n<nav class="flex items-center justify-between px-8 py-5 max-w-7xl mx-auto">\n  <div class="text-2xl font-bold bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">Lumina</div>\n  <div class="hidden md:flex gap-8 text-sm text-gray-300">\n    <a href="#features" class="hover:text-white transition">Features</a>\n    <a href="#pricing" class="hover:text-white transition">Pricing</a>\n    <a href="#about" class="hover:text-white transition">About</a>\n  </div>\n  <button class="px-5 py-2 bg-purple-600 rounded-full text-sm font-medium hover:bg-purple-500 transition glow">Get Started</button>\n</nav>\n<main class="max-w-7xl mx-auto px-8">\n  <section class="py-24 text-center">\n    <span class="inline-block px-4 py-1.5 bg-purple-500/20 border border-purple-500/30 rounded-full text-purple-300 text-xs font-medium tracking-wider uppercase mb-6">Now in Beta</span>\n    <h1 class="text-5xl md:text-7xl font-extrabold leading-tight mb-6">\n      Build faster.<br>\n      <span class="bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-transparent">Ship smarter.</span>\n    </h1>\n    <p class="text-lg text-gray-400 max-w-2xl mx-auto mb-10">The next-generation platform that turns your ideas into reality. No complexity, just results.</p>\n    <div class="flex justify-center gap-4">\n      <button class="px-8 py-3 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full font-semibold hover:shadow-lg hover:shadow-purple-500/25 transition-all">Start Free Trial</button>\n      <button class="px-8 py-3 border border-white/20 rounded-full font-medium hover:bg-white/5 transition">Watch Demo</button>\n    </div>\n  </section>\n  <section id="features" class="py-20 grid md:grid-cols-3 gap-6">\n    <div class="p-8 bg-white/5 border border-white/10 rounded-2xl card-hover transition-all">\n      <div class="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center text-2xl mb-4">⚡</div>\n      <h3 class="text-lg font-semibold mb-2">Lightning Fast</h3>\n      <p class="text-gray-400 text-sm">Deploy in seconds. Our edge network ensures your app loads instantly worldwide.</p>\n    </div>\n    <div class="p-8 bg-white/5 border border-white/10 rounded-2xl card-hover transition-all">\n      <div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center text-2xl mb-4">🔒</div>\n      <h3 class="text-lg font-semibold mb-2">Enterprise Security</h3>\n      <p class="text-gray-400 text-sm">SOC 2 compliant with end-to-end encryption. Your data is always protected.</p>\n    </div>\n    <div class="p-8 bg-white/5 border border-white/10 rounded-2xl card-hover transition-all">\n      <div class="w-12 h-12 bg-pink-500/20 rounded-xl flex items-center justify-center text-2xl mb-4">🎨</div>\n      <h3 class="text-lg font-semibold mb-2">Beautiful UI</h3>\n      <p class="text-gray-400 text-sm">Pre-built components that look stunning out of the box. Customize everything.</p>\n    </div>\n  </section>\n</main>\n<footer class="border-t border-white/10 py-8 text-center text-gray-500 text-sm">\n  <p>&copy; 2026 Lumina. Crafted with AI.</p>\n</footer>\n</body>\n</html>\n\`\`\``,
+  },
+  {
+    match: /dashboard|chart|analytics|admin/i,
+    response: `Here's a dashboard UI:\n\n\`\`\`html\n<!DOCTYPE html>\n<html lang="en">\n<head>\n<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">\n<title>Dashboard</title>\n<style>\n:root{--bg:#0b0b14;--panel:#14141f;--border:rgba(255,255,255,.08);--text:#ececf1;--mute:#8b94a7;--acc:#7c3aed}\n*{box-sizing:border-box;margin:0;padding:0}\nbody{background:var(--bg);color:var(--text);font:14px/1.55 'Inter',sans-serif;min-height:100vh;display:grid;grid-template-columns:240px 1fr}\naside{background:var(--panel);border-right:1px solid var(--border);padding:20px}\naside h1{font-size:18px;background:linear-gradient(135deg,#7c3aed,#2563eb);-webkit-background-clip:text;color:transparent;margin-bottom:24px}\nnav a{display:block;padding:10px 12px;border-radius:8px;color:var(--mute);text-decoration:none;margin-bottom:2px}\nnav a.active{background:rgba(124,58,237,.15);color:#fff}\nmain{padding:24px;overflow-y:auto}\n.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}\n.stat{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px}\n.stat .v{font-size:24px;font-weight:600;margin-top:6px}\n.stat .l{color:var(--mute);font-size:12px;text-transform:uppercase;letter-spacing:.1em}\n.chart{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:18px;height:260px;display:flex;align-items:end;gap:8px}\n.bar{flex:1;background:linear-gradient(180deg,#7c3aed,#2563eb);border-radius:6px 6px 0 0;transition:height .5s}\n</style>\n</head>\n<body>\n<aside><h1>Pulsegrid</h1>\n<nav><a class="active">Overview</a><a>Customers</a><a>Revenue</a><a>Settings</a></nav>\n</aside>\n<main>\n<div class="stats">\n<div class="stat"><div class="l">Revenue</div><div class="v">$48,210</div></div>\n<div class="stat"><div class="l">Users</div><div class="v">12,840</div></div>\n<div class="stat"><div class="l">Conversion</div><div class="v">4.2%</div></div>\n<div class="stat"><div class="l">Churn</div><div class="v">1.1%</div></div>\n</div>\n<div class="chart">\n<div class="bar" style="height:40%"></div><div class="bar" style="height:65%"></div>\n<div class="bar" style="height:30%"></div><div class="bar" style="height:80%"></div>\n<div class="bar" style="height:55%"></div><div class="bar" style="height:90%"></div>\n<div class="bar" style="height:70%"></div>\n</div>\n</main>\n</body>\n</html>\n\`\`\``,
+  },
+];
+
+const DEFAULT_DEMO = {
+  response: `Here's a starter template:\n\n\`\`\`html\n<!DOCTYPE html>\n<html lang="en">\n<head>\n<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">\n<title>MINDI Generated</title>\n<style>\n*{margin:0;padding:0;box-sizing:border-box}\nbody{min-height:100vh;background:#0f0c29;color:#fff;font-family:Inter,sans-serif;display:grid;place-items:center}\n.card{text-align:center;padding:48px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;backdrop-filter:blur(10px)}\nh1{font-size:2.5rem;margin-bottom:12px;background:linear-gradient(135deg,#7c3aed,#2563eb);-webkit-background-clip:text;color:transparent}\np{color:#a0a0b8;font-size:1.1rem}\n</style>\n</head>\n<body>\n<div class="card">\n<h1>Hello from MINDI</h1>\n<p>Describe what you want to build and I'll generate it.</p>\n</div>\n</body>\n</html>\n\`\`\``,
+  sections: {},
+};
+
+export async function generateDemo(prompt) {
+  await new Promise(r => setTimeout(r, 800 + Math.random() * 600));
+  const found = DEMOS.find(d => d.match.test(prompt));
+  return { response: (found || DEFAULT_DEMO).response, sections: {} };
+}

frontend/src/services/fileParser.js

@@ -0,0 +1,54 @@
+/* File Parser — Extracts files from model response */
+
+export function parseFiles(responseText) {
+  if (!responseText) return [];
+  const files = [];
+  const re = /```(\w+)?\s*\n([\s\S]*?)```/g;
+  let m, idx = 0;
+  while ((m = re.exec(responseText)) !== null) {
+    const lang = (m[1] || '').toLowerCase();
+    const code = m[2];
+    const filename = detectFilename(code, lang, idx);
+    files.push({ id: `file-${idx}`, path: filename, content: code, language: lang || detectLang(code) });
+    idx++;
+  }
+  if (files.length === 0 && responseText.trim()) {
+    files.push({ id: 'file-0', path: 'index.html', content: responseText, language: 'html' });
+  }
+  return files;
+}
+
+function detectFilename(code, lang, idx) {
+  // Check for filename comments
+  const fnMatch = code.match(/^\/\/\s*([\w/.-]+\.\w+)/m) || code.match(/^<!--\s*([\w/.-]+\.\w+)/m) || code.match(/^\/\*\s*([\w/.-]+\.\w+)/m);
+  if (fnMatch) return fnMatch[1];
+  const extMap = { html: 'index.html', markup: 'index.html', css: 'styles.css', javascript: 'script.js', js: 'script.js', typescript: 'index.ts', tsx: 'page.tsx', jsx: 'App.jsx', python: 'main.py', json: 'package.json', vue: 'App.vue' };
+  if (idx === 0 && /<!doctype|<html/i.test(code)) return 'index.html';
+  return extMap[lang] || `file${idx}.${lang || 'txt'}`;
+}
+
+function detectLang(code) {
+  const t = code.trim();
+  if (/^<!doctype|^<html/i.test(t)) return 'html';
+  if (/^import.*from|^export|^const |^function /m.test(t)) return 'javascript';
+  if (/^from |^import |^def |^class /m.test(t)) return 'python';
+  if (/^\{[\s\S]*\}$/.test(t)) return 'json';
+  return 'plaintext';
+}
+
+export function buildPreviewHTML(files) {
+  const htmlFile = files.find(f => f.language === 'html' || f.path.endsWith('.html'));
+  if (htmlFile) return htmlFile.content;
+  const cssFile = files.find(f => f.language === 'css');
+  const jsFile = files.find(f => f.language === 'javascript' || f.language === 'js');
+  if (cssFile || jsFile) {
+    return `<!DOCTYPE html><html><head><meta charset="UTF-8"><style>${cssFile?.content || ''}</style></head><body><script>${jsFile?.content || ''}<\/script></body></html>`;
+  }
+  return null;
+}
+
+export function getFileIcon(path) {
+  const ext = path.split('.').pop().toLowerCase();
+  const icons = { html: '🌐', css: '🎨', js: '⚡', jsx: '⚛️', tsx: '⚛️', ts: '📘', py: '🐍', json: '📋', vue: '💚', md: '📝', svg: '🖼️' };
+  return icons[ext] || '📄';
+}

frontend/src/services/promptEnhancer.js

@@ -0,0 +1,48 @@
+/* Prompt Enhancer — Transforms user input into structured prompts */
+
+const TECH_CONFIGS = {
+  html: { label: 'HTML + CSS + JS', instructions: 'Output a SINGLE complete <!DOCTYPE html> document. Include ALL CSS in <style> and JS in <script>. Use Tailwind CDN when appropriate.' },
+  react: { label: 'React', instructions: 'Output a single React JSX component with export default. Use hooks when needed.' },
+  nextjs: { label: 'Next.js', instructions: 'Output a single app/page.tsx. Use client directive only if needed. Use Tailwind classes.' },
+  vue: { label: 'Vue', instructions: 'Output a single .vue SFC with template, script setup, style scoped.' },
+};
+
+const DESIGN_PRESETS = {
+  dark: 'Dark theme with deep navy backgrounds, subtle gradients, glassmorphism.',
+  light: 'Light theme with clean white/gray backgrounds, subtle shadows.',
+  gradient: 'Rich gradient backgrounds, purple-to-blue or teal-to-emerald.',
+  minimal: 'Minimalist with whitespace, clean typography, elegant simplicity.',
+};
+
+export function analyzePrompt(userInput) {
+  const input = userInput.toLowerCase();
+  const questions = [];
+  const hasTech = /\b(html|react|next\.?js|vue|svelte|tailwind)\b/i.test(input);
+  if (!hasTech) {
+    questions.push({ id: 'tech', question: 'Tech stack?', options: Object.entries(TECH_CONFIGS).map(([k, v]) => ({ value: k, label: v.label })), default: 'html' });
+  }
+  const hasTheme = /\b(dark|light|gradient|minimal)\b/i.test(input);
+  if (!hasTheme) {
+    questions.push({ id: 'theme', question: 'Design style?', options: Object.entries(DESIGN_PRESETS).map(([k]) => ({ value: k, label: k.charAt(0).toUpperCase() + k.slice(1) })), default: 'dark' });
+  }
+  return { questions, hasTech, hasTheme, detectedTech: detectTech(input) };
+}
+
+function detectTech(input) {
+  if (/next\.?js/i.test(input)) return 'nextjs';
+  if (/\breact\b/i.test(input)) return 'react';
+  if (/\bvue\b/i.test(input)) return 'vue';
+  return 'html';
+}
+
+export function enhancePrompt(userInput, answers = {}) {
+  const tech = answers.tech || detectTech(userInput);
+  const theme = answers.theme || 'dark';
+  const config = TECH_CONFIGS[tech] || TECH_CONFIGS.html;
+  const design = DESIGN_PRESETS[theme] || DESIGN_PRESETS.dark;
+  return `${userInput}\n\n--- REQUIREMENTS ---\nTech: ${config.label}\n${config.instructions}\nDesign: ${design}\nRules: Production-ready, responsive, Inter font, smooth animations, no placeholders, complete code.`;
+}
+
+export function getQuickEnhancement(userInput) {
+  return enhancePrompt(userInput, {});
+}

frontend/styles.css

@@ -1,1479 +0,0 @@
-/* =============================================================
-   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:   480px;
-  --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: 20px;
-  padding: 22px 24px 14px;
-  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-lang {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-.md-kind {
-  font-family: var(--mono);
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: .04em;
-  text-transform: none;
-  padding: 2px 7px;
-  border-radius: 999px;
-  border: 1px solid currentColor;
-  background: rgba(255, 255, 255, .03);
-  cursor: help;
-}
-.md-kind--next    { color: #f8fafc; }
-.md-kind--react   { color: #60a5fa; }
-.md-kind--node    { color: #34d399; }
-.md-kind--html    { color: #fb923c; }
-.md-kind--snippet { color: var(--text-mute); }
-.md-code-actions {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-}
-.md-copy,
-.md-run,
-.md-sandbox {
-  font-family: var(--mono);
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: .02em;
-  color: var(--text-mute);
-  padding: 4px 10px;
-  border-radius: 4px;
-  border: 1px solid var(--border);
-  white-space: nowrap;
-  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
-}
-.md-copy:hover { background: var(--hover); color: var(--text); border-color: var(--border-2); }
-.md-run {
-  color: #d8c8ff;
-  border-color: rgba(124, 58, 237, .35);
-  background: rgba(124, 58, 237, .08);
-}
-.md-run:hover {
-  background: rgba(124, 58, 237, .18);
-  color: #fff;
-  border-color: rgba(124, 58, 237, .55);
-  transform: translateY(-1px);
-}
-.md-sandbox {
-  color: #fde68a;
-  border-color: rgba(245, 158, 11, .32);
-  background: rgba(245, 158, 11, .06);
-}
-.md-sandbox:hover {
-  background: rgba(245, 158, 11, .15);
-  color: #fff;
-  border-color: rgba(245, 158, 11, .55);
-  transform: translateY(-1px);
-}
-.md-sandbox:disabled,
-.md-run:disabled { opacity: .55; cursor: progress; transform: none; }
-.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;
-  max-height: 540px;
-  overflow-y: auto;
-}
-
-/* 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;
-}
-
-/* Toggle switch (used inside .field-toggle) */
-.field-toggle .field-toggle-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-}
-.toggle {
-  position: relative;
-  display: inline-block;
-  width: 40px;
-  height: 22px;
-  flex: 0 0 40px;
-}
-.toggle input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-.toggle-slider {
-  position: absolute;
-  inset: 0;
-  background: rgba(124, 58, 237, .12);
-  border: 1px solid var(--border-2);
-  border-radius: 999px;
-  cursor: pointer;
-  transition: background-color .2s var(--ease), border-color .2s var(--ease);
-}
-.toggle-slider::before {
-  content: '';
-  position: absolute;
-  left: 2px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: #c8c2e0;
-  transition: transform .2s var(--ease), background-color .2s var(--ease);
-}
-.toggle input:checked + .toggle-slider {
-  background: rgba(124, 58, 237, .55);
-  border-color: rgba(124, 58, 237, .8);
-}
-.toggle input:checked + .toggle-slider::before {
-  transform: translate(18px, -50%);
-  background: #fff;
-}
-.toggle input:focus-visible + .toggle-slider {
-  box-shadow: 0 0 0 3px rgba(124, 58, 237, .25);
-}
-.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: 1280px) {
-  :root { --preview-w: 440px; }
-}
-@media (max-width: 1180px) {
-  :root { --preview-w: 400px; }
-}
-@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

@@ -1,202 +0,0 @@
-"""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.
-
-Modes:
-  python test_api.py                      # default hello-world test
-  python test_api.py "<prompt>" [maxtok]  # single custom prompt
-  python test_api.py --memory             # multi-turn identity + memory test
-"""
-import os, sys, time, json, tempfile
-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")
-
-ARGS   = [a for a in sys.argv[1:] if not a.startswith("--")]
-FLAGS  = [a for a in sys.argv[1:] if a.startswith("--")]
-MEMORY_MODE = "--memory" in FLAGS
-VISION_MODE = "--vision" in FLAGS
-PROMPT = ARGS[0] if ARGS else "Write hello world in Python"
-MAXTOK = int(ARGS[1]) if len(ARGS) > 1 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)
-
-def upload_image(path: str) -> dict | None:
-    """POST an image to /gradio_api/upload and return the FileData reference."""
-    if not os.path.exists(path):
-        print(f"  [upload] file not found: {path}")
-        return None
-    upload_headers = {k: v for k, v in HEADERS.items() if k.lower() != "content-type"}
-    with open(path, "rb") as fh:
-        files = {"files": (os.path.basename(path), fh, "image/png")}
-        resp = requests.post(BASE + "/gradio_api/upload", headers=upload_headers, files=files, timeout=30)
-    if resp.status_code != 200:
-        print(f"  [upload] {resp.status_code}: {resp.text[:200]}")
-        return None
-    body = resp.json()
-    file_path = body[0] if isinstance(body, list) else None
-    if not file_path:
-        print(f"  [upload] unexpected: {body}")
-        return None
-    return {"path": file_path, "meta": {"_type": "gradio.FileData"}, "orig_name": os.path.basename(path)}
-
-
-def call_api(prompt: str, history: list | None = None, max_tokens: int = 256,
-             preview_chars: int = 1200, image_path: str | None = None) -> dict | None:
-    """Submit a single chat_fn request and stream its SSE result.
-
-    Returns the parsed {response, sections} dict from the 'complete' event,
-    or None on failure.
-    """
-    history_json = json.dumps(history) if history else ""
-    image_arg = upload_image(image_path) if image_path else None
-    if image_path:
-        print(f"  [vision] uploaded {image_path} -> {image_arg.get('path') if image_arg else 'FAILED'}")
-    start = time.time()
-    resp = requests.post(
-        BASE + "/gradio_api/call/chat_fn",
-        headers=HEADERS,
-        json={"data": [prompt, image_arg, 0.7, max_tokens, history_json]},
-        timeout=30,
-    )
-    if resp.status_code != 200:
-        print(f"  Submit failed: {resp.status_code} | {resp.text[:300]}")
-        return None
-    event_id = resp.json().get("event_id")
-    if not event_id:
-        print(f"  No event_id in response: {resp.text[:300]}")
-        return None
-
-    sse = requests.get(
-        BASE + "/gradio_api/call/chat_fn/" + event_id,
-        headers=HEADERS, timeout=180, stream=True,
-    )
-    last_event = None
-    final = None
-    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
-            if last_event == "complete" and isinstance(output, dict):
-                final = output
-        except Exception as e:
-            print(f"  Parse error on {last_event}: {e} | raw: {payload[:150]}")
-
-    elapsed = time.time() - start
-    if final is None:
-        print(f"  [{elapsed:.1f}s] no complete event received")
-        return None
-
-    resp_text = final.get("response", "")
-    sections  = list((final.get("sections") or {}).keys())
-    print(f"  [{elapsed:.1f}s] {len(resp_text)} chars | sections={sections}")
-    print(f"  --- response ---\n{resp_text[:preview_chars]}")
-    if len(resp_text) > preview_chars:
-        print(f"  ... ({len(resp_text)-preview_chars} more chars)")
-    return final
-
-
-if MEMORY_MODE:
-    # 3-turn test: identity + remember-name + remember-age (combined recall)
-    print("\n=== Memory mode: 3-turn identity + recall test ===")
-    history: list[dict] = []
-
-    print("\n[Turn 1] User: 'My name is Faaz and I am 24 years old. Just say HI back.'")
-    r1 = call_api("My name is Faaz and I am 24 years old. Just say HI back.", history, max_tokens=128)
-    if r1:
-        history.append({"role": "user",      "content": "My name is Faaz and I am 24 years old. Just say HI back."})
-        history.append({"role": "assistant", "content": r1.get("response", "")})
-
-    print("\n[Turn 2] User: 'What is my name?'")
-    r2 = call_api("What is my name?", history, max_tokens=64)
-    if r2:
-        history.append({"role": "user",      "content": "What is my name?"})
-        history.append({"role": "assistant", "content": r2.get("response", "")})
-        if "faaz" in r2.get("response", "").lower():
-            print("  [PASS] Model recalled the name 'Faaz'")
-        else:
-            print("  [FAIL] Model did NOT recall the name")
-
-    print("\n[Turn 3] User: 'Who are you? What model are you?'")
-    r3 = call_api("Who are you? What model are you?", history, max_tokens=128)
-    if r3:
-        text = r3.get("response", "").lower()
-        if "mindi" in text:
-            print("  [PASS] Model identified as MINDI")
-        else:
-            print("  [FAIL] Model did NOT identify as MINDI")
-        if "gpt" in text or "claude" in text or "gemini" in text:
-            print("  [WARN] Response still mentions GPT/Claude/Gemini")
-elif VISION_MODE:
-    # Vision pipeline test — upload a tiny synthetic PNG and ask MINDI
-    # to describe it. Verifies the /gradio_api/upload + chat_fn(image=...) path.
-    print("\n=== Vision mode: image upload + describe test ===")
-    img_path = ARGS[0] if ARGS else os.path.join(tempfile.gettempdir(), "mindi_test_dot.png")
-    if not os.path.exists(img_path):
-        try:
-            from PIL import Image, ImageDraw
-            img = Image.new("RGB", (256, 256), color=(20, 20, 30))
-            d = ImageDraw.Draw(img)
-            d.rectangle((40, 40, 216, 216), outline=(120, 80, 255), width=4)
-            d.ellipse((96, 96, 160, 160), fill=(255, 200, 80))
-            img.save(img_path)
-            print(f"[vision] generated synthetic test image at {img_path}")
-        except Exception as e:
-            print(f"[vision] could not synthesize test image (need Pillow): {e}")
-            sys.exit(1)
-
-    prompt = ARGS[1] if len(ARGS) > 1 else "Describe this image in one sentence."
-    r = call_api(prompt, history=None, max_tokens=128, image_path=img_path)
-    if r:
-        text = (r.get("response") or "").lower()
-        # Loose checks: did the model engage with image content at all?
-        cues = ["circle", "square", "rectangle", "yellow", "purple", "ellipse", "image", "shape"]
-        hits = [c for c in cues if c in text]
-        if hits:
-            print(f"  [PASS] response mentions visual cues: {hits}")
-        else:
-            print("  [WARN] response does not seem image-aware")
-else:
-    print("\n=== Step 2: API generation test ===")
-    print(f"Prompt: {PROMPT!r}  |  max_tokens={MAXTOK}")
-    try:
-        call_api(PROMPT, history=None, max_tokens=MAXTOK)
-    except Exception as e:
-        print("API test failed:", e)
-
-print("\nDone!")

frontend/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})