Upload folder using huggingface_hub

Dockerfile

@@ -1,15 +1,18 @@
 FROM python:3.11-slim
 
-RUN apt-get update && apt-get install -y p7zip-full genisoimage && rm -rf /var/lib/apt/lists/*
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    p7zip-full \
+    && rm -rf /var/lib/apt/lists/*
 
 WORKDIR /app
 
 COPY requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
 
-COPY app.py .
-COPY static/ static/
+COPY . .
 
-ENV PYTHONUNBUFFERED=1
+RUN mkdir -p data/uploads data/extracted data/webapps static
+
+EXPOSE 7860
 
 CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,10 +1,66 @@
 ---
-title: Localspace Deployer
-emoji: 🐨
-colorFrom: indigo
-colorTo: yellow
+title: LocalSpace Deployer
+emoji: 📦
+colorFrom: gray
+colorTo: indigo
 sdk: docker
+app_port: 7860
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# LocalSpace Deployer
+
+Drag a DMG, GGUF, or ZIP. It gets opened on the server: extracted, inspected,
+and served. Pure FastAPI + HTML/JS. No Gradio, no Streamlit, no API keys.
+
+## Features
+
+- **DMG upload & extraction** — 7z-based server-side extraction
+- **App bundle inspection** — reads Info.plist, lists files, finds icons
+- **GGUF model inspection** — parses GGUF header, tensor count, metadata KV pairs
+- **GGUF inference** — OpenAI-compatible chat/completion via llama-cpp-python (optional)
+- **Tiny Netlify** — upload a static site ZIP, get a hosted URL with base-tag injection
+- **ChatGPT export → dApp** — upload conversations.json, get a browsable dApp with search
+- **iframe preview** — auto-discovers HTML files and serves them in a full-page viewer
+- **Web App → DMG** — paste a URL, get back a macOS .app bundle wrapper
+- **Persistent storage** — auto-detects /data mount on HF Spaces
+- **SHA-256 hashing** — every upload is hash-verified
+
+## API
+
+| Endpoint | Method | Description |
+|---|---|---|
+| `/` | GET | Landing page + deployer UI |
+| `/api/upload` | POST | Upload DMG or GGUF (multipart file) |
+| `/api/deploy-site` | POST | Deploy static site from ZIP |
+| `/api/import/chatgpt` | POST | Import ChatGPT export (JSON or ZIP) |
+| `/api/apps` | GET | List all artifacts |
+| `/api/apps/{id}` | GET | Get single artifact metadata |
+| `/api/apps/{id}` | DELETE | Delete artifact |
+| `/app/{id}` | GET | Full-page iframe preview (DMG) |
+| `/site/{id}/` | GET | Visit deployed static site |
+| `/site/{id}/{path}` | GET | Serve file from deployed site |
+| `/dapp/{id}/` | GET | Visit ChatGPT dApp |
+| `/api/preview/{id}/{path}` | GET | Serve extracted DMG file |
+| `/api/browse/{id}/{path}` | GET | Browse extracted file tree |
+| `/api/download/{id}` | GET | Download original uploaded file |
+| `/api/create-webapp` | POST | Create .app from URL |
+| `/api/storage/status` | GET | Check persistent storage status |
+| `/api/inference/status` | GET | Check inference availability |
+| `/api/inference/load/{id}` | POST | Load GGUF model into memory |
+| `/api/inference/chat/{id}` | POST | OpenAI-compatible chat completion |
+| `/api/inference/completion/{id}` | POST | Text completion |
+
+## Enable GGUF Inference
+
+Uncomment `llama-cpp-python` in `requirements.txt` and rebuild the Space.
+For GPU acceleration, use `llama-cpp-python[cuda]` and set the Space hardware to GPU.
+
+## Run locally
+
+```bash
+pip install -r requirements.txt
+uvicorn app:app --host 0.0.0.0 --port 7860
+```
+
+Requires `7z` (p7zip-full) for DMG extraction.

app.py

@@ -1,11 +1,9 @@
 #!/usr/bin/env python3
 """
 LocalSpace Deployer — Hugging Face Space (Vanilla)
-
-Drag a DMG. It gets OPENED on the server: extracted, inspected, and its
-app bundle metadata is displayed. The Space itself hosts the DMG contents.
-
-Pure FastAPI + HTML/JS. No Gradio, no Streamlit, no API keys.
+Drag a DMG or GGUF. It gets OPENED on the server: extracted, inspected, and its
+app bundle metadata or model metadata is displayed. The Space itself hosts the
+contents. Pure FastAPI + HTML/JS. No Gradio, no Streamlit, no API keys.
 Public by default.
 """
 from __future__ import annotations
@@ -16,14 +14,16 @@ import os
 import plistlib
 import re
 import shutil
+import struct
 import subprocess
 import time
 import uuid
+import zipfile
 from pathlib import Path
 from typing import Any
 
 from fastapi import FastAPI, File, Request, UploadFile
-from fastapi.responses import FileResponse, HTMLResponse, JSONResponse
+from fastapi.responses import FileResponse, HTMLResponse, JSONResponse, StreamingResponse
 from fastapi.staticfiles import StaticFiles
 
 # Try biplist for binary plists, fall back to plistlib
@@ -33,16 +33,42 @@ try:
 except ImportError:
     HAS_BIPLIST = False
 
-DATA_DIR = Path("data")
-DATA_DIR.mkdir(exist_ok=True)
+# Try llama-cpp-python for GGUF inference (optional)
+try:
+    from llama_cpp import Llama as _Llama
+    HAS_LLAMA = True
+except ImportError:
+    HAS_LLAMA = False
+
+# ─── Persistent storage detection ──────────────────────────────────────────
+# HF Spaces mounts persistent storage at /data when enabled.
+# Fall back to local ./data when running outside HF or without persistent storage.
+_PERSISTENT = Path("/data")
+if _PERSISTENT.exists() and _PERSISTENT.is_dir() and os.access(_PERSISTENT, os.W_OK):
+    DATA_DIR = _PERSISTENT / "localspace"
+else:
+    DATA_DIR = Path("data")
+DATA_DIR.mkdir(parents=True, exist_ok=True)
+
 UPLOAD_DIR = DATA_DIR / "uploads"
 UPLOAD_DIR.mkdir(exist_ok=True)
 EXTRACT_DIR = DATA_DIR / "extracted"
 EXTRACT_DIR.mkdir(exist_ok=True)
+SITES_DIR = DATA_DIR / "sites"
+SITES_DIR.mkdir(exist_ok=True)
+DAPPS_DIR = DATA_DIR / "dapps"
+DAPPS_DIR.mkdir(exist_ok=True)
 DB_PATH = DATA_DIR / "apps.json"
 
+# Inference model cache (in-memory)
+_llm_cache: dict[str, Any] = {}
+
 app = FastAPI(title="LocalSpace Deployer")
-app.mount("/static", StaticFiles(directory="static"), name="static")
+
+# Ensure static dir exists
+STATIC_DIR = Path("static")
+STATIC_DIR.mkdir(exist_ok=True)
+app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
 
 _store: dict[str, dict[str, Any]] = {}
 
@@ -62,7 +88,7 @@ def _save_db() -> None:
 
 
 def _slugify(name: str) -> str:
-    return re.sub(r"[^a-z0-9]+", "-", name.lower().replace(".dmg", "")).strip("-")
+    return re.sub(r"[^a-z0-9]+", "-", name.lower().replace(".dmg", "").replace(".gguf", "").replace(".zip", "").replace(".json", "")).strip("-")
 
 
 def _hash_file(path: Path) -> str:
@@ -73,6 +99,14 @@ def _hash_file(path: Path) -> str:
     return h.hexdigest()
 
 
+def _format_bytes(n: int) -> str:
+    for unit in ["B", "KB", "MB", "GB", "TB"]:
+        if n < 1024:
+            return f"{n:.1f} {unit}"
+        n /= 1024
+    return f"{n:.1f} PB"
+
+
 def _read_plist(path: Path) -> dict[str, Any]:
     """Read a plist file (XML or binary)."""
     try:
@@ -157,6 +191,95 @@ def _inspect_app_bundle(app_path: Path) -> dict[str, Any]:
     }
 
 
+# ─── GGUF parsing ───────────────────────────────────────────────────────────
+
+GGUF_MAGIC = 0x46554747  # "GGUF" in little-endian
+GGUF_TYPE_MAP = {
+    0: "UINT8", 1: "INT8", 2: "UINT16", 3: "INT16",
+    4: "UINT32", 5: "INT32", 6: "FLOAT32", 7: "BOOL",
+    8: "STRING", 9: "ARRAY", 10: "UINT64", 11: "INT64", 12: "FLOAT64",
+}
+
+
+def _read_gguf_string(f) -> str:
+    n = struct.unpack("<Q", f.read(8))[0]
+    return f.read(n).decode("utf-8", errors="replace")
+
+
+def _read_gguf_value(f, vtype: int) -> Any:
+    if vtype == 0: return struct.unpack("<B", f.read(1))[0]
+    if vtype == 1: return struct.unpack("<b", f.read(1))[0]
+    if vtype == 2: return struct.unpack("<H", f.read(2))[0]
+    if vtype == 3: return struct.unpack("<h", f.read(2))[0]
+    if vtype == 4: return struct.unpack("<I", f.read(4))[0]
+    if vtype == 5: return struct.unpack("<i", f.read(4))[0]
+    if vtype == 6: return struct.unpack("<f", f.read(4))[0]
+    if vtype == 7: return struct.unpack("<?", f.read(1))[0]
+    if vtype == 8: return _read_gguf_string(f)
+    if vtype == 10: return struct.unpack("<Q", f.read(8))[0]
+    if vtype == 11: return struct.unpack("<q", f.read(8))[0]
+    if vtype == 12: return struct.unpack("<d", f.read(8))[0]
+    if vtype == 9:
+        inner = struct.unpack("<I", f.read(4))[0]
+        n = struct.unpack("<Q", f.read(8))[0]
+        return {"type": GGUF_TYPE_MAP.get(inner, str(inner)), "count": n}
+    return None
+
+
+def _inspect_gguf(gguf_path: Path) -> dict[str, Any]:
+    """Parse GGUF header: version, tensor count, metadata KV pairs."""
+    try:
+        with open(gguf_path, "rb") as f:
+            magic = struct.unpack("<I", f.read(4))[0]
+            if magic != GGUF_MAGIC:
+                return {"valid": False, "error": f"Not a GGUF file (magic={magic:#x})"}
+
+            version = struct.unpack("<I", f.read(4))[0]
+            tensor_count = struct.unpack("<Q", f.read(8))[0]
+            kv_count = struct.unpack("<Q", f.read(8))[0]
+
+            metadata = {}
+            for _ in range(kv_count):
+                key = _read_gguf_string(f)
+                vtype = struct.unpack("<I", f.read(4))[0]
+                value = _read_gguf_value(f, vtype)
+                metadata[key] = {
+                    "type": GGUF_TYPE_MAP.get(vtype, str(vtype)),
+                    "value": value,
+                }
+
+            # Read tensor info (names + shapes)
+            tensors = []
+            for _ in range(min(tensor_count, 200)):
+                n_dims = struct.unpack("<I", f.read(4))[0]
+                name = _read_gguf_string(f)
+                dims = [struct.unpack("<Q", f.read(8))[0] for _ in range(n_dims)]
+                dtype = struct.unpack("<I", f.read(4))[0]
+                offset = struct.unpack("<Q", f.read(8))[0]
+                tensors.append({
+                    "name": name,
+                    "dims": dims,
+                    "dtype": GGUF_TYPE_MAP.get(dtype, str(dtype)),
+                    "offset": offset,
+                })
+
+            return {
+                "valid": True,
+                "version": version,
+                "tensor_count": tensor_count,
+                "kv_count": kv_count,
+                "metadata": metadata,
+                "tensors": tensors,
+                "architecture": metadata.get("general.architecture", {}).get("value", "unknown"),
+                "name": metadata.get("general.name", {}).get("value", ""),
+                "quantization": metadata.get("general.quantization_version", {}).get("value", ""),
+                "context_length": metadata.get("general.context_length", {}).get("value", 0),
+                "file_size": gguf_path.stat().st_size,
+            }
+    except Exception as exc:
+        return {"valid": False, "error": str(exc)}
+
+
 def _open_dmg(app_id: str, dmg_path: Path) -> dict[str, Any]:
     """Open a DMG: extract it, find apps, inspect them."""
     extract_to = EXTRACT_DIR / app_id
@@ -211,8 +334,15 @@ def index(request: Request) -> HTMLResponse:
 
 @app.post("/api/upload")
 async def upload_file(file: UploadFile = File(...)) -> JSONResponse:
-    if not file.filename or not file.filename.lower().endswith(".dmg"):
-        return JSONResponse({"error": "Only .dmg files are accepted."}, status_code=400)
+    if not file.filename:
+        return JSONResponse({"error": "No filename provided."}, status_code=400)
+
+    fname = file.filename.lower()
+    is_dmg = fname.endswith(".dmg")
+    is_gguf = fname.endswith(".gguf")
+
+    if not is_dmg and not is_gguf:
+        return JSONResponse({"error": "Only .dmg and .gguf files are accepted."}, status_code=400)
 
     app_id = str(uuid.uuid4())
     slug = _slugify(file.filename)
@@ -222,7 +352,8 @@ async def upload_file(file: UploadFile = File(...)) -> JSONResponse:
         slug = f"{base_slug}-{counter}"
         counter += 1
 
-    dest = UPLOAD_DIR / f"{app_id}.dmg"
+    ext = ".dmg" if is_dmg else ".gguf"
+    dest = UPLOAD_DIR / f"{app_id}{ext}"
     with open(dest, "wb") as f:
         while True:
             chunk = await file.read(65536)
@@ -233,31 +364,51 @@ async def upload_file(file: UploadFile = File(...)) -> JSONResponse:
     sha256 = _hash_file(dest)
     size = dest.stat().st_size
 
-    opened = _open_dmg(app_id, dest)
+    if is_dmg:
+        opened = _open_dmg(app_id, dest)
+        entry = {
+            "app_id": app_id,
+            "slug": slug,
+            "filename": file.filename,
+            "file_type": "dmg",
+            "size": size,
+            "size_human": _format_bytes(size),
+            "sha256": sha256,
+            "download_url": f"/api/download/{app_id}",
+            "opened": opened.get("opened", False),
+            "apps_found": opened.get("apps_found", 0),
+            "apps": opened.get("apps", []),
+            "tree": opened.get("tree", []),
+            "html_files": opened.get("html_files", []),
+            "has_preview": opened.get("has_preview", False),
+            "preview_entry": opened.get("preview_entry", None),
+            "error": opened.get("error"),
+            "created_at": time.time(),
+        }
+        msg = "DMG uploaded and opened." if entry["opened"] else f"DMG uploaded but could not be opened: {entry.get('error', '')}"
+    else:
+        gguf_info = _inspect_gguf(dest)
+        entry = {
+            "app_id": app_id,
+            "slug": slug,
+            "filename": file.filename,
+            "file_type": "gguf",
+            "size": size,
+            "size_human": _format_bytes(size),
+            "sha256": sha256,
+            "download_url": f"/api/download/{app_id}",
+            "gguf": gguf_info,
+            "opened": gguf_info.get("valid", False),
+            "has_preview": False,
+            "preview_entry": None,
+            "created_at": time.time(),
+        }
+        msg = "GGUF uploaded and inspected." if gguf_info.get("valid") else f"GGUF uploaded but inspection failed: {gguf_info.get('error', '')}"
 
-    entry = {
-        "app_id": app_id,
-        "slug": slug,
-        "filename": file.filename,
-        "size": size,
-        "sha256": sha256,
-        "download_url": f"/api/download/{app_id}",
-        "opened": opened.get("opened", False),
-        "apps_found": opened.get("apps_found", 0),
-        "apps": opened.get("apps", []),
-        "tree": opened.get("tree", []),
-        "html_files": opened.get("html_files", []),
-        "has_preview": opened.get("has_preview", False),
-        "preview_entry": opened.get("preview_entry", None),
-        "created_at": time.time(),
-    }
     _store[app_id] = entry
     _save_db()
 
-    return JSONResponse({
-        "app": entry,
-        "message": "DMG uploaded and opened." if entry["opened"] else "DMG uploaded but could not be opened.",
-    }, status_code=201)
+    return JSONResponse({"app": entry, "message": msg}, status_code=201)
 
 
 @app.get("/api/apps")
@@ -340,18 +491,16 @@ def download_app(app_id: str):
     if not entry:
         return JSONResponse({"error": "Not found"}, status_code=404)
 
-    path = UPLOAD_DIR / f"{app_id}.dmg"
+    ext = ".dmg" if entry.get("file_type", "dmg") == "dmg" else ".gguf"
+    path = UPLOAD_DIR / f"{app_id}{ext}"
     if not path.exists():
         return JSONResponse({
             "error": "File not found on disk",
-            "detail": "This upload was stored in temporary storage that was cleared during a Space restart. Please re-upload the DMG."
+            "detail": "This upload was stored in temporary storage that was cleared during a Space restart. Please re-upload."
         }, status_code=404)
 
-    return FileResponse(
-        path=path,
-        filename=entry["filename"],
-        media_type="application/x-apple-diskimage",
-    )
+    media = "application/x-apple-diskimage" if ext == ".dmg" else "application/octet-stream"
+    return FileResponse(path=path, filename=entry["filename"], media_type=media)
 
 
 @app.get("/api/browse/{app_id}/{path:path}")
@@ -367,7 +516,7 @@ def browse_extracted(app_id: str, path: str):
     if not base.exists():
         return JSONResponse({
             "error": "Extracted files not found",
-            "detail": "This upload was stored in temporary storage that was cleared during a Space restart. Please re-upload the DMG."
+            "detail": "This upload was stored in temporary storage that was cleared during a Space restart. Please re-upload."
         }, status_code=404)
 
     try:
@@ -404,16 +553,14 @@ def preview_content(app_id: str, path: str):
     if not base.exists():
         return JSONResponse({
             "error": "Extracted files not found",
-            "detail": "This upload was stored in temporary storage that was cleared during a Space restart. Please re-upload the DMG."
+            "detail": "This upload was stored in temporary storage that was cleared during a Space restart. Please re-upload."
         }, status_code=404)
 
     if path:
         target = base / path
     else:
-        # Default to index.html if no path
         target = base / "index.html"
         if not target.exists():
-            # Find any HTML file
             for f in base.rglob("*.html"):
                 target = f
                 break
@@ -421,14 +568,12 @@ def preview_content(app_id: str, path: str):
     if not target.exists():
         return JSONResponse({"error": "Not found"}, status_code=404)
 
-    # Security check
     try:
         target.resolve().relative_to(base.resolve())
     except ValueError:
         return JSONResponse({"error": "Access denied"}, status_code=403)
 
     if target.is_dir():
-        # Look for index.html in directory
         idx = target / "index.html"
         if idx.exists():
             target = idx
@@ -453,10 +598,8 @@ def preview_content(app_id: str, path: str):
     suffix = target.suffix.lower()
     media_type = mime_types.get(suffix, "application/octet-stream")
 
-    # For HTML, inject base tag to handle relative paths
     if media_type == "text/html":
         content = target.read_text(errors="replace")
-        # Inject base tag after <head>
         if "<base" not in content:
             rel_dir = str(target.parent.relative_to(base)) if target.parent != base else ""
             base_tag = f'<base href="/api/preview/{app_id}/{rel_dir}/">' if rel_dir else f'<base href="/api/preview/{app_id}/">'
@@ -485,7 +628,6 @@ def _create_app_bundle(url: str, app_name: str, bundle_id: str, version: str) ->
     macos.mkdir(parents=True)
     resources.mkdir(parents=True)
 
-    # Info.plist
     plist = {
         "CFBundleDevelopmentRegion": "en",
         "CFBundleExecutable": app_name.replace(" ", ""),
@@ -501,7 +643,6 @@ def _create_app_bundle(url: str, app_name: str, bundle_id: str, version: str) ->
     with open(contents / "Info.plist", "wb") as f:
         plistlib.dump(plist, f)
 
-    # Wrapper script that opens URL
     script_path = macos / app_name.replace(" ", "")
     script_content = f'''#!/bin/bash
 # Auto-generated web app wrapper
@@ -509,14 +650,12 @@ URL="{url}"
 if command -v open >/dev/null 2>&1; then
     open "$URL"
 else
-    # Fallback for Linux testing
     xdg-open "$URL" 2>/dev/null || python3 -m webbrowser "$URL"
 fi
 '''
     script_path.write_text(script_content)
     script_path.chmod(0o755)
 
-    # Create a local HTML file as backup/embedded view
     html_path = resources / "index.html"
     html_path.write_text(f'''<!DOCTYPE html>
 <html><head><meta charset="utf-8"><title>{app_name}</title>
@@ -531,7 +670,6 @@ def _create_dmg_from_app(app_bundle: Path, output_name: str) -> Path | None:
     """Best-effort DMG creation. Returns path to DMG or None."""
     dmg_path = WEBAPP_DIR / f"{output_name}.dmg"
 
-    # Try genisoimage + dmg if available (Linux)
     try:
         iso_path = WEBAPP_DIR / f"{output_name}.iso"
         result = subprocess.run(
@@ -540,7 +678,6 @@ def _create_dmg_from_app(app_bundle: Path, output_name: str) -> Path | None:
             capture_output=True, text=True, timeout=30,
         )
         if result.returncode == 0:
-            # Try converting ISO to DMG
             dmg_result = subprocess.run(
                 ["dmg", "iso", str(iso_path), str(dmg_path)],
                 capture_output=True, text=True, timeout=30,
@@ -553,7 +690,6 @@ def _create_dmg_from_app(app_bundle: Path, output_name: str) -> Path | None:
     except Exception:
         pass
 
-    # Fallback: create a ZIP that user can extract on Mac and run hdiutil
     zip_path = WEBAPP_DIR / f"{output_name}.zip"
     shutil.make_archive(
         base_name=str(WEBAPP_DIR / output_name),
@@ -585,7 +721,6 @@ async def create_webapp(request: Request) -> JSONResponse:
     if not app_name:
         return JSONResponse({"error": "App name is required"}, status_code=400)
 
-    # Sanitize
     app_name_safe = re.sub(r'[^a-zA-Z0-9 ]+', '', app_name).strip()
     if not app_name_safe:
         app_name_safe = "WebApp"
@@ -605,7 +740,9 @@ async def create_webapp(request: Request) -> JSONResponse:
             "app_id": pkg_id,
             "slug": _slugify(app_name_safe),
             "filename": dest.name,
+            "file_type": "webapp",
             "size": dest.stat().st_size,
+            "size_human": _format_bytes(dest.stat().st_size),
             "sha256": _hash_file(dest),
             "download_url": f"/api/download/{pkg_id}",
             "source_url": url,
@@ -620,21 +757,686 @@ async def create_webapp(request: Request) -> JSONResponse:
 
         return JSONResponse({
             "app": entry,
-            "message": f"'{app_name_safe}' packaged. Download and extract on macOS, then run 'hdiutil create -srcfolder {app_name_safe}.app {app_name_safe}.dmg' to convert to DMG." if pkg.suffix == ".zip" else f"'{app_name_safe}' DMG created.",
+            "message": f"'{app_name_safe}' packaged." if pkg.suffix == ".zip" else f"'{app_name_safe}' DMG created.",
         }, status_code=201)
     except Exception as exc:
         return JSONResponse({"error": str(exc)}, status_code=500)
 
 
+# ─── Tiny Netlify: deploy static sites from ZIP ─────────────────────────────
+
+def _find_index_html(root: Path) -> str | None:
+    """Find the entry HTML file in a deployed site."""
+    candidates = ["index.html", "index.htm"]
+    for c in candidates:
+        if (root / c).exists():
+            return c
+    # Search one level deep
+    for item in sorted(root.iterdir()):
+        if item.is_dir():
+            for c in candidates:
+                if (item / c).exists():
+                    return f"{item.name}/{c}"
+    # Fallback: any HTML file
+    for f in root.rglob("*.html"):
+        return str(f.relative_to(root))
+    return None
+
+
+def _build_site_tree(root: Path, max_depth: int = 3) -> list[dict[str, Any]]:
+    """Build a file tree for a deployed site."""
+    tree = []
+    try:
+        for item in sorted(root.iterdir()):
+            entry: dict[str, Any] = {
+                "name": item.name,
+                "type": "directory" if item.is_dir() else "file",
+                "size": item.stat().st_size if item.is_file() else 0,
+            }
+            if item.is_dir() and max_depth > 0:
+                entry["children"] = _build_site_tree(item, max_depth - 1)
+            tree.append(entry)
+    except Exception:
+        pass
+    return tree
+
+
+@app.post("/api/deploy-site")
+async def deploy_site(file: UploadFile = File(...)) -> JSONResponse:
+    """Deploy a static site from a ZIP file. Returns a hosted URL."""
+    if not file.filename or not file.filename.lower().endswith(".zip"):
+        return JSONResponse({"error": "Only .zip files are accepted for site deployment."}, status_code=400)
+
+    site_id = str(uuid.uuid4())
+    slug = _slugify(file.filename) or f"site-{site_id[:8]}"
+    base_slug = slug
+    counter = 1
+    while any(a.get("slug") == slug and a.get("file_type") == "site" for a in _store.values()):
+        slug = f"{base_slug}-{counter}"
+        counter += 1
+
+    # Save ZIP
+    zip_path = UPLOAD_DIR / f"{site_id}.zip"
+    with open(zip_path, "wb") as f:
+        while True:
+            chunk = await file.read(65536)
+            if not chunk:
+                break
+            f.write(chunk)
+
+    # Extract
+    site_root = SITES_DIR / site_id
+    site_root.mkdir(parents=True, exist_ok=True)
+    try:
+        with zipfile.ZipFile(zip_path, "r") as zf:
+            zf.extractall(site_root)
+    except zipfile.BadZipFile:
+        shutil.rmtree(site_root)
+        zip_path.unlink(missing_ok=True)
+        return JSONResponse({"error": "Invalid ZIP file."}, status_code=400)
+
+    # Handle nested root: if ZIP contains a single top-level dir, use that as root
+    top_items = list(site_root.iterdir())
+    if len(top_items) == 1 and top_items[0].is_dir():
+        real_root = top_items[0]
+    else:
+        real_root = site_root
+
+    index_file = _find_index_html(real_root)
+    if not index_file:
+        return JSONResponse({"error": "No HTML file found in ZIP."}, status_code=400)
+
+    sha256 = _hash_file(zip_path)
+    file_count = sum(1 for _ in real_root.rglob("*") if _.is_file())
+    total_size = sum(f.stat().st_size for f in real_root.rglob("*") if f.is_file())
+    tree = _build_site_tree(real_root)
+
+    entry = {
+        "app_id": site_id,
+        "slug": slug,
+        "filename": file.filename,
+        "file_type": "site",
+        "size": zip_path.stat().st_size,
+        "size_human": _format_bytes(zip_path.stat().st_size),
+        "sha256": sha256,
+        "site_url": f"/site/{site_id}/",
+        "site_preview": f"/site/{site_id}/{index_file}",
+        "index_file": index_file,
+        "file_count": file_count,
+        "total_size": total_size,
+        "total_size_human": _format_bytes(total_size),
+        "tree": tree,
+        "has_preview": True,
+        "preview_entry": index_file,
+        "opened": True,
+        "created_at": time.time(),
+    }
+    _store[site_id] = entry
+    _save_db()
+
+    return JSONResponse({
+        "app": entry,
+        "message": f"Site deployed. {file_count} files, {entry['size_human']}.",
+        "site_url": entry["site_url"],
+    }, status_code=201)
+
+
+@app.get("/site/{site_id}/", response_class=HTMLResponse)
+@app.get("/site/{site_id}", response_class=HTMLResponse)
+def serve_site_root(site_id: str) -> HTMLResponse:
+    """Serve a deployed static site's index page."""
+    entry = _store.get(site_id)
+    if not entry or entry.get("file_type") != "site":
+        return HTMLResponse("<h1>Site not found</h1>", status_code=404)
+
+    site_root = SITES_DIR / site_id
+    if not site_root.exists():
+        return HTMLResponse("<h1>Site files not found. Storage may have been cleared.</h1>", status_code=404)
+
+    index_file = entry.get("index_file", "index.html")
+    target = site_root / index_file
+    if not target.exists():
+        for f in site_root.rglob("*.html"):
+            target = f
+            break
+
+    if not target.exists():
+        return HTMLResponse("<h1>No HTML found</h1>", status_code=404)
+
+    content = target.read_text(errors="replace")
+    rel_dir = str(target.parent.relative_to(site_root))
+    if "<base" not in content:
+        base_href = f"/site/{site_id}/{rel_dir}/" if rel_dir and rel_dir != "." else f"/site/{site_id}/"
+        base_tag = f'<base href="{base_href}">'
+        content = content.replace("<head>", f"<head>{base_tag}", 1)
+        content = content.replace("<HEAD>", f"<HEAD>{base_tag}", 1)
+
+    return HTMLResponse(content=content)
+
+
+@app.get("/site/{site_id}/{path:path}")
+def serve_site_file(site_id: str, path: str):
+    """Serve any file from a deployed static site."""
+    entry = _store.get(site_id)
+    if not entry or entry.get("file_type") != "site":
+        return JSONResponse({"error": "Site not found"}, status_code=404)
+
+    site_root = SITES_DIR / site_id
+    if not site_root.exists():
+        return JSONResponse({"error": "Site storage cleared"}, status_code=404)
+
+    target = site_root / path
+
+    try:
+        target.resolve().relative_to(site_root.resolve())
+    except ValueError:
+        return JSONResponse({"error": "Access denied"}, status_code=403)
+
+    if not target.exists():
+        return JSONResponse({"error": "File not found"}, status_code=404)
+
+    if target.is_dir():
+        idx = target / "index.html"
+        if idx.exists():
+            content = idx.read_text(errors="replace")
+            rel_dir = str(idx.parent.relative_to(site_root))
+            if "<base" not in content:
+                base_href = f"/site/{site_id}/{rel_dir}/" if rel_dir and rel_dir != "." else f"/site/{site_id}/"
+                content = content.replace("<head>", f'<head><base href="{base_href}">', 1)
+            return HTMLResponse(content=content)
+        return JSONResponse({"error": "No index.html in directory"}, status_code=404)
+
+    mime_types = {
+        ".html": "text/html", ".htm": "text/html",
+        ".js": "application/javascript", ".mjs": "application/javascript",
+        ".css": "text/css",
+        ".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg",
+        ".gif": "image/gif", ".svg": "image/svg+xml", ".webp": "image/webp",
+        ".ico": "image/x-icon",
+        ".json": "application/json", ".xml": "application/xml",
+        ".woff2": "font/woff2", ".woff": "font/woff", ".ttf": "font/ttf",
+        ".otf": "font/otf",
+        ".txt": "text/plain", ".md": "text/markdown",
+        ".wasm": "application/wasm",
+        ".map": "application/json",
+    }
+    media_type = mime_types.get(target.suffix.lower(), "application/octet-stream")
+    return FileResponse(path=target, media_type=media_type)
+
+
+# ─── GGUF Inference ─────────────────────────────────────────────────────────
+
+def _get_llm(app_id: str) -> Any | None:
+    """Load a GGUF model into memory, with caching."""
+    if not HAS_LLAMA:
+        return None
+
+    if app_id in _llm_cache:
+        return _llm_cache[app_id]
+
+    entry = _store.get(app_id)
+    if not entry or entry.get("file_type") != "gguf":
+        return None
+
+    gguf_path = UPLOAD_DIR / f"{app_id}.gguf"
+    if not gguf_path.exists():
+        return None
+
+    try:
+        ctx = entry.get("gguf", {}).get("context_length", 2048)
+        n_ctx = min(int(ctx) if ctx else 2048, 4096)
+        llm = _Llama(model_path=str(gguf_path), n_ctx=n_ctx, verbose=False)
+        _llm_cache[app_id] = llm
+        return llm
+    except Exception:
+        return None
+
+
+@app.get("/api/inference/status")
+def inference_status() -> JSONResponse:
+    """Check if GGUF inference is available."""
+    loaded = list(_llm_cache.keys())
+    gguf_apps = [a for a in _store.values() if a.get("file_type") == "gguf"]
+    return JSONResponse({
+        "available": HAS_LLAMA,
+        "loaded_models": len(loaded),
+        "loaded_ids": loaded,
+        "gguf_apps": [{"app_id": a["app_id"], "filename": a["filename"]} for a in gguf_apps],
+    })
+
+
+@app.post("/api/inference/load/{app_id}")
+def load_model(app_id: str) -> JSONResponse:
+    """Load a GGUF model into memory for inference."""
+    if not HAS_LLAMA:
+        return JSONResponse({
+            "error": "llama-cpp-python not installed. Inference unavailable.",
+            "hint": "Add llama-cpp-python to requirements.txt to enable inference.",
+        }, status_code=503)
+
+    entry = _store.get(app_id)
+    if not entry or entry.get("file_type") != "gguf":
+        return JSONResponse({"error": "Not a GGUF artifact."}, status_code=400)
+
+    llm = _get_llm(app_id)
+    if llm is None:
+        return JSONResponse({"error": "Failed to load model."}, status_code=500)
+
+    return JSONResponse({
+        "ok": True,
+        "message": f"Model '{entry['filename']}' loaded.",
+        "context_length": entry.get("gguf", {}).get("context_length", 2048),
+    })
+
+
+@app.post("/api/inference/chat/{app_id}")
+async def inference_chat(app_id: str, request: Request) -> JSONResponse:
+    """OpenAI-compatible chat completion endpoint using a loaded GGUF model."""
+    if not HAS_LLAMA:
+        return JSONResponse({"error": "Inference unavailable. llama-cpp-python not installed."}, status_code=503)
+
+    llm = _get_llm(app_id)
+    if llm is None:
+        return JSONResponse({"error": "Model not loaded. POST /api/inference/load/{app_id} first."}, status_code=400)
+
+    try:
+        data = await request.json()
+    except Exception:
+        return JSONResponse({"error": "Invalid JSON"}, status_code=400)
+
+    messages = data.get("messages", [])
+    if not messages:
+        return JSONResponse({"error": "messages is required"}, status_code=400)
+
+    max_tokens = min(int(data.get("max_tokens", 512)), 2048)
+    temperature = float(data.get("temperature", 0.7))
+    stream = bool(data.get("stream", False))
+
+    if stream:
+        def gen():
+            for chunk in llm.create_chat_completion(
+                messages=messages, max_tokens=max_tokens,
+                temperature=temperature, stream=True,
+            ):
+                yield f"data: {json.dumps(chunk)}\n\n"
+            yield "data: [DONE]\n\n"
+        return StreamingResponse(gen(), media_type="text/event-stream")
+
+    result = llm.create_chat_completion(
+        messages=messages, max_tokens=max_tokens, temperature=temperature,
+    )
+    return JSONResponse(result)
+
+
+@app.post("/api/inference/completion/{app_id}")
+async def inference_completion(app_id: str, request: Request) -> JSONResponse:
+    """Text completion endpoint using a loaded GGUF model."""
+    if not HAS_LLAMA:
+        return JSONResponse({"error": "Inference unavailable. llama-cpp-python not installed."}, status_code=503)
+
+    llm = _get_llm(app_id)
+    if llm is None:
+        return JSONResponse({"error": "Model not loaded."}, status_code=400)
+
+    try:
+        data = await request.json()
+    except Exception:
+        return JSONResponse({"error": "Invalid JSON"}, status_code=400)
+
+    prompt = data.get("prompt", "")
+    if not prompt:
+        return JSONResponse({"error": "prompt is required"}, status_code=400)
+
+    max_tokens = min(int(data.get("max_tokens", 256)), 2048)
+    temperature = float(data.get("temperature", 0.7))
+
+    result = llm(prompt=prompt, max_tokens=max_tokens, temperature=temperature)
+    return JSONResponse(result)
+
+
+# ─── ChatGPT Export → dApp ──────────────────────────────────────────────────
+
+def _parse_chatgpt_export(data: Any) -> dict[str, Any]:
+    """Parse a ChatGPT export conversations.json structure."""
+    conversations = []
+    raw = data if isinstance(data, list) else data.get("conversations", data) if isinstance(data, dict) else []
+
+    for conv in raw:
+        if not isinstance(conv, dict):
+            continue
+        title = conv.get("title", "Untitled")
+        conv_id = conv.get("id", conv.get("uuid", str(uuid.uuid4())))
+        create_time = conv.get("create_time", 0)
+        update_time = conv.get("update_time", 0)
+
+        messages = []
+        mapping = conv.get("mapping", {})
+        if isinstance(mapping, dict):
+            for node_id, node in mapping.items():
+                if not isinstance(node, dict):
+                    continue
+                msg = node.get("message")
+                if not msg or not isinstance(msg, dict):
+                    continue
+                author = msg.get("author", {})
+                role = author.get("role", "unknown")
+                content = msg.get("content", {})
+                parts = content.get("parts", [])
+                text = ""
+                for p in parts:
+                    if isinstance(p, str):
+                        text += p
+                    elif isinstance(p, dict):
+                        text += p.get("text", str(p))
+                if text.strip():
+                    messages.append({
+                        "role": role,
+                        "text": text[:50000],
+                        "create_time": msg.get("create_time", 0),
+                    })
+
+        messages.sort(key=lambda m: m.get("create_time", 0) or 0)
+        conversations.append({
+            "id": str(conv_id),
+            "title": title,
+            "message_count": len(messages),
+            "create_time": create_time,
+            "update_time": update_time,
+            "messages": messages,
+        })
+
+    conversations.sort(key=lambda c: c.get("create_time", 0) or 0, reverse=True)
+    return {"conversations": conversations, "total": len(conversations)}
+
+
+def _generate_dapp_html(parsed: dict[str, Any], title: str) -> str:
+    """Generate a self-contained dApp HTML for browsing ChatGPT conversations."""
+    convs = parsed["conversations"]
+    convs_json = json.dumps(convs[:500])  # Limit to 500 conversations
+
+    return f'''<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>{title} — ChatGPT Archive dApp</title>
+<style>
+* {{ box-sizing: border-box; margin: 0; padding: 0; }}
+body {{ background: #0a0a0f; color: #e2e2e8; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; height: 100vh; display: flex; overflow: hidden; }}
+.sidebar {{ width: 300px; min-width: 300px; background: #14141a; border-right: 1px solid #2a2a35; overflow-y: auto; display: flex; flex-direction: column; }}
+.sidebar-header {{ padding: 16px; border-bottom: 1px solid #2a2a35; }}
+.sidebar-header h2 {{ font-size: 1rem; margin-bottom: 4px; }}
+.sidebar-header .count {{ font-size: 0.8rem; color: #888898; }}
+.search {{ padding: 12px 16px; border-bottom: 1px solid #2a2a35; }}
+.search input {{ width: 100%; background: #0a0a0f; border: 1px solid #2a2a35; color: #e2e2e8; padding: 8px 12px; border-radius: 8px; font-size: 0.85rem; outline: none; }}
+.search input:focus {{ border-color: #6366f1; }}
+.conv-list {{ flex: 1; overflow-y: auto; }}
+.conv-item {{ padding: 12px 16px; border-bottom: 1px solid #1c1c24; cursor: pointer; transition: background 0.15s; }}
+.conv-item:hover {{ background: #1c1c24; }}
+.conv-item.active {{ background: rgba(99,102,241,0.15); border-left: 3px solid #6366f1; }}
+.conv-item .title {{ font-size: 0.88rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }}
+.conv-item .meta {{ font-size: 0.75rem; color: #5a5a68; margin-top: 2px; }}
+.main {{ flex: 1; overflow-y: auto; padding: 24px 32px; }}
+.welcome {{ display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #5a5a68; }}
+.welcome .icon {{ font-size: 3rem; margin-bottom: 12px; }}
+.welcome h3 {{ font-size: 1.1rem; margin-bottom: 4px; color: #888898; }}
+.msg {{ margin-bottom: 20px; max-width: 800px; }}
+.msg .role {{ font-size: 0.78rem; font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; }}
+.msg .role.user {{ color: #6366f1; }}
+.msg .role.assistant {{ color: #22c55e; }}
+.msg .role.system {{ color: #eab300; }}
+.msg .bubble {{ background: #14141a; border: 1px solid #2a2a35; border-radius: 12px; padding: 14px 18px; font-size: 0.9rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }}
+.msg .bubble.user {{ border-left: 3px solid #6366f1; }}
+.msg .bubble.assistant {{ border-left: 3px solid #22c55e; }}
+.empty {{ text-align: center; padding: 40px; color: #5a5a68; }}
+</style>
+</head>
+<body>
+<div class="sidebar">
+  <div class="sidebar-header">
+    <h2>⬡ {title}</h2>
+    <div class="count">{parsed["total"]} conversations</div>
+  </div>
+  <div class="search">
+    <input type="text" id="search" placeholder="Search conversations..." oninput="filterConvs()">
+  </div>
+  <div class="conv-list" id="conv-list"></div>
+</div>
+<div class="main" id="main">
+  <div class="welcome">
+    <div class="icon">💬</div>
+    <h3>ChatGPT Archive dApp</h3>
+    <p>Select a conversation to browse</p>
+  </div>
+</div>
+<script>
+const CONVS = {convs_json};
+let activeId = null;
+
+function renderConvList(filter) {{
+  filter = (filter || "").toLowerCase();
+  const list = document.getElementById("conv-list");
+  const filtered = CONVS.filter(c => c.title.toLowerCase().includes(filter));
+  list.innerHTML = filtered.map(c => `
+    <div class="conv-item ${{c.id === activeId ? 'active' : ''}}" onclick="selectConv('${{c.id}}')">
+      <div class="title">${{escHtml(c.title)}}</div>
+      <div class="meta">${{c.message_count}} messages</div>
+    </div>
+  `).join('') || '<div class="empty">No matches</div>';
+}}
+
+function selectConv(id) {{
+  activeId = id;
+  const conv = CONVS.find(c => c.id === id);
+  if (!conv) return;
+  const main = document.getElementById("main");
+  main.innerHTML = `<div style="margin-bottom:20px"><h2 style="font-size:1.2rem">${{escHtml(conv.title)}}</h2><div style="font-size:0.8rem;color:#888898">${{conv.message_count}} messages</div></div>` +
+    conv.messages.map(m => `
+      <div class="msg">
+        <div class="role ${{m.role}}">${{m.role}}</div>
+        <div class="bubble ${{m.role}}">${{escHtml(m.text)}}</div>
+      </div>
+    `).join('');
+  renderConvList(document.getElementById("search").value);
+  main.scrollTop = 0;
+}}
+
+function filterConvs() {{
+  renderConvList(document.getElementById("search").value);
+}}
+
+function escHtml(s) {{
+  if (!s) return '';
+  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}}
+
+renderConvList();
+</script>
+</body>
+</html>'''
+
+
+@app.post("/api/import/chatgpt")
+async def import_chatgpt(file: UploadFile = File(...)) -> JSONResponse:
+    """Import a ChatGPT export (conversations.json) and deploy as a browsable dApp."""
+    if not file.filename:
+        return JSONResponse({"error": "No filename provided."}, status_code=400)
+
+    fname = file.filename.lower()
+    if not (fname.endswith(".json") or fname.endswith(".zip")):
+        return JSONResponse({"error": "Only .json or .zip ChatGPT exports are accepted."}, status_code=400)
+
+    app_id = str(uuid.uuid4())
+    slug = _slugify(file.filename) or f"chatgpt-archive-{app_id[:8]}"
+
+    # Save the uploaded file
+    if fname.endswith(".zip"):
+        zip_path = UPLOAD_DIR / f"{app_id}.zip"
+        with open(zip_path, "wb") as f:
+            while True:
+                chunk = await file.read(65536)
+                if not chunk:
+                    break
+                f.write(chunk)
+        # Extract and find conversations.json
+        extract_to = EXTRACT_DIR / app_id
+        extract_to.mkdir(parents=True, exist_ok=True)
+        try:
+            with zipfile.ZipFile(zip_path, "r") as zf:
+                zf.extractall(extract_to)
+        except zipfile.BadZipFile:
+            shutil.rmtree(extract_to)
+            zip_path.unlink(missing_ok=True)
+            return JSONResponse({"error": "Invalid ZIP file."}, status_code=400)
+
+        # Find conversations.json
+        conv_file = None
+        for f in extract_to.rglob("conversations.json"):
+            conv_file = f
+            break
+        if not conv_file:
+            shutil.rmtree(extract_to)
+            return JSONResponse({"error": "No conversations.json found in ZIP export."}, status_code=400)
+        raw_data = json.loads(conv_file.read_text(encoding="utf-8"))
+        sha256 = _hash_file(zip_path)
+        stored_size = zip_path.stat().st_size
+    else:
+        # Direct JSON upload
+        json_path = UPLOAD_DIR / f"{app_id}.json"
+        with open(json_path, "wb") as f:
+            while True:
+                chunk = await file.read(65536)
+                if not chunk:
+                    break
+                f.write(chunk)
+        try:
+            raw_data = json.loads(json_path.read_text(encoding="utf-8"))
+        except json.JSONDecodeError:
+            json_path.unlink(missing_ok=True)
+            return JSONResponse({"error": "Invalid JSON file."}, status_code=400)
+        sha256 = _hash_file(json_path)
+        stored_size = json_path.stat().st_size
+
+    # Parse the ChatGPT export
+    parsed = _parse_chatgpt_export(raw_data)
+    if parsed["total"] == 0:
+        return JSONResponse({"error": "No conversations found in export."}, status_code=400)
+
+    # Generate dApp HTML
+    title = f"ChatGPT Archive ({parsed['total']} conversations)"
+    dapp_html = _generate_dapp_html(parsed, title)
+
+    # Deploy as a site
+    dapp_root = DAPPS_DIR / app_id
+    dapp_root.mkdir(parents=True, exist_ok=True)
+    (dapp_root / "index.html").write_text(dapp_html, encoding="utf-8")
+
+    entry = {
+        "app_id": app_id,
+        "slug": slug,
+        "filename": file.filename,
+        "file_type": "chatgpt",
+        "size": stored_size,
+        "size_human": _format_bytes(stored_size),
+        "sha256": sha256,
+        "dapp_url": f"/dapp/{app_id}/",
+        "conversation_count": parsed["total"],
+        "total_messages": sum(c["message_count"] for c in parsed["conversations"]),
+        "has_preview": True,
+        "preview_entry": "index.html",
+        "opened": True,
+        "created_at": time.time(),
+    }
+    _store[app_id] = entry
+    _save_db()
+
+    return JSONResponse({
+        "app": entry,
+        "message": f"ChatGPT archive deployed as dApp. {parsed['total']} conversations, {entry['total_messages']} messages.",
+        "dapp_url": entry["dapp_url"],
+    }, status_code=201)
+
+
+@app.get("/dapp/{app_id}/", response_class=HTMLResponse)
+@app.get("/dapp/{app_id}", response_class=HTMLResponse)
+def serve_dapp(app_id: str) -> HTMLResponse:
+    """Serve a deployed ChatGPT dApp."""
+    entry = _store.get(app_id)
+    if not entry or entry.get("file_type") != "chatgpt":
+        return HTMLResponse("<h1>dApp not found</h1>", status_code=404)
+
+    dapp_root = DAPPS_DIR / app_id
+    if not dapp_root.exists():
+        return HTMLResponse("<h1>dApp files not found. Storage may have been cleared.</h1>", status_code=404)
+
+    index = dapp_root / "index.html"
+    if not index.exists():
+        return HTMLResponse("<h1>dApp index not found</h1>", status_code=404)
+
+    return HTMLResponse(content=index.read_text(encoding="utf-8"))
+
+
+@app.get("/dapp/{app_id}/{path:path}")
+def serve_dapp_file(app_id: str, path: str):
+    """Serve any file from a deployed dApp."""
+    entry = _store.get(app_id)
+    if not entry or entry.get("file_type") != "chatgpt":
+        return JSONResponse({"error": "dApp not found"}, status_code=404)
+
+    dapp_root = DAPPS_DIR / app_id
+    if not dapp_root.exists():
+        return JSONResponse({"error": "dApp storage cleared"}, status_code=404)
+
+    target = dapp_root / path
+    try:
+        target.resolve().relative_to(dapp_root.resolve())
+    except ValueError:
+        return JSONResponse({"error": "Access denied"}, status_code=403)
+
+    if not target.exists():
+        return JSONResponse({"error": "File not found"}, status_code=404)
+
+    return FileResponse(path=target)
+
+
+@app.get("/api/storage/status")
+def storage_status() -> JSONResponse:
+    """Check if persistent storage is attached."""
+    persistent = str(DATA_DIR).startswith("/data")
+    return JSONResponse({
+        "persistent": persistent,
+        "data_dir": str(DATA_DIR),
+        "has_uploads": UPLOAD_DIR.exists(),
+        "has_extracted": EXTRACT_DIR.exists(),
+        "has_sites": SITES_DIR.exists(),
+        "has_dapps": DAPPS_DIR.exists(),
+        "inference_available": HAS_LLAMA,
+        "artifact_count": len(_store),
+    })
+
+
 @app.delete("/api/apps/{app_id}")
 def delete_app(app_id: str) -> JSONResponse:
     entry = _store.pop(app_id, None)
     if entry:
-        dmg = UPLOAD_DIR / f"{app_id}.dmg"
-        if dmg.exists():
-            dmg.unlink()
+        # Clean up uploads (all possible extensions)
+        for suffix in [".dmg", ".gguf", ".zip", ".json"]:
+            f = UPLOAD_DIR / f"{app_id}{suffix}"
+            if f.exists():
+                f.unlink()
+        # Clean up extracted files
         extracted = EXTRACT_DIR / app_id
         if extracted.exists():
             shutil.rmtree(extracted)
+        # Clean up deployed sites
+        site = SITES_DIR / app_id
+        if site.exists():
+            shutil.rmtree(site)
+        # Clean up dapps
+        dapp = DAPPS_DIR / app_id
+        if dapp.exists():
+            shutil.rmtree(dapp)
+        # Unload model from inference cache
+        _llm_cache.pop(app_id, None)
         _save_db()
     return JSONResponse({"ok": True})

requirements.txt

@@ -1,5 +1,8 @@
-fastapi==0.115.0
-uvicorn[standard]==0.34.0
-python-multipart==0.0.20
-biplist==1.0.3
-
+fastapi>=0.104.0
+uvicorn[standard]>=0.24.0
+python-multipart>=0.0.6
+biplist>=1.0.3
+# llama-cpp-python enables GGUF inference endpoints.
+# Uncomment to enable /api/inference/* endpoints.
+# On HF Spaces with GPU, use: llama-cpp-python[cuda]
+# llama-cpp-python>=0.2.0

static/index.html

@@ -1,1508 +1,393 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>⬡ LocalSpace Deployer</title>
-  <style>
-    * {
-      box-sizing: border-box;
-    }
-
-    :root {
-      --bg: #0a0a0f;
-      --surface: #14141a;
-      --surface-hover: #1c1c24;
-      --border: #2a2a35;
-      --accent: #3b82f6;
-      --accent-hover: #2563eb;
-      --text: #e2e2e8;
-      --text-muted: #888898;
-      --success: #22c55e;
-      --warn: #f59e0b;
-      --radius: 12px;
-      --radius-sm: 8px;
-    }
-
-    body {
-      margin: 0;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      background: var(--bg);
-      color: var(--text);
-      min-height: 100vh;
-    }
-
-    .container {
-      max-width: 1100px;
-      margin: 0 auto;
-      padding: 40px 24px;
-    }
-
-    header {
-      text-align: center;
-      margin-bottom: 48px;
-      position: relative;
-      min-height: 200px;
-    }
-
-    header h1 {
-      margin: 0 0 8px;
-      font-size: 2.2rem;
-      font-weight: 700;
-      letter-spacing: -0.02em;
-    }
-
-    header p {
-      margin: 0;
-      color: var(--text-muted);
-      font-size: 1.05rem;
-    }
-
-    /* ─── Landing Carousel ───────────────────────────────── */
-    .landing-carousel {
-      position: relative;
-      overflow: hidden;
-      min-height: 220px;
-    }
-
-    .landing-slide {
-      position: absolute;
-      inset: 0;
-      opacity: 0;
-      transform: translateY(20px);
-      transition: opacity 1.2s ease, transform 1.2s ease;
-      pointer-events: none;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      padding: 20px 0;
-    }
-
-    .landing-slide.active {
-      opacity: 1;
-      transform: translateY(0);
-      pointer-events: auto;
-    }
-
-    .landing-slide .icon {
-      font-size: 4rem;
-      margin-bottom: 12px;
-      line-height: 1;
-    }
-
-    .landing-slide .slide-title {
-      font-size: 2.4rem;
-      font-weight: 700;
-      margin: 0 0 10px;
-      letter-spacing: -0.02em;
-    }
-
-    .landing-slide .slide-subtitle {
-      color: var(--text-muted);
-      font-size: 1.1rem;
-      max-width: 520px;
-      line-height: 1.5;
-    }
-
-    .landing-slide .slide-cta {
-      margin-top: 16px;
-      padding: 10px 24px;
-      background: linear-gradient(135deg, var(--accent), #8b5cf6);
-      color: #fff;
-      border: none;
-      border-radius: var(--radius-sm);
-      font-size: 0.95rem;
-      cursor: pointer;
-      transition: transform 0.2s, box-shadow 0.2s;
-    }
-
-    .landing-slide .slide-cta:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
-    }
-
-    .landing-dots {
-      display: flex;
-      gap: 8px;
-      justify-content: center;
-      margin-top: 16px;
-    }
-
-    .landing-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: var(--border);
-      cursor: pointer;
-      transition: background 0.3s, transform 0.3s;
-    }
-
-    .landing-dot.active {
-      background: var(--accent);
-      transform: scale(1.3);
-    }
-
-    .landing-timer {
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 120px;
-      height: 3px;
-      background: var(--border);
-      border-radius: 2px;
-      overflow: hidden;
-    }
-
-    .landing-timer .fill {
-      height: 100%;
-      background: var(--accent);
-      width: 0%;
-      border-radius: 2px;
-    }
-
-    /* Drop zone */
-    .dropzone {
-      border: 2px dashed var(--border);
-      border-radius: var(--radius);
-      padding: 64px 32px;
-      text-align: center;
-      background: var(--surface);
-      transition: all 0.2s ease;
-      cursor: pointer;
-      position: relative;
-    }
-
-    .dropzone:hover,
-    .dropzone.dragover {
-      border-color: var(--accent);
-      background: var(--surface-hover);
-    }
-
-    .dropzone .icon {
-      font-size: 3rem;
-      margin-bottom: 16px;
-      opacity: 0.7;
-    }
-
-    .dropzone h3 {
-      margin: 0 0 8px;
-      font-size: 1.2rem;
-    }
-
-    .dropzone p {
-      margin: 0;
-      color: var(--text-muted);
-      font-size: 0.9rem;
-    }
-
-    .dropzone input[type="file"] {
-      position: absolute;
-      inset: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0;
-      cursor: pointer;
-    }
-
-    /* Progress */
-    .progress-wrap {
-      margin-top: 24px;
-      display: none;
-    }
-
-    .progress-wrap.active {
-      display: block;
-    }
-
-    .progress-bar {
-      height: 6px;
-      background: var(--border);
-      border-radius: 3px;
-      overflow: hidden;
-    }
-
-    .progress-bar .fill {
-      height: 100%;
-      background: var(--accent);
-      width: 0%;
-      transition: width 0.3s ease;
-      border-radius: 3px;
-    }
-
-    .progress-text {
-      text-align: center;
-      margin-top: 8px;
-      font-size: 0.85rem;
-      color: var(--text-muted);
-    }
-
-    /* Result */
-    .result {
-      margin-top: 24px;
-      padding: 20px;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      display: none;
-    }
-
-    .result.active {
-      display: block;
-    }
-
-    .result h4 {
-      margin: 0 0 12px;
-      color: var(--accent);
-    }
-
-    .result .field {
-      display: flex;
-      justify-content: space-between;
-      padding: 8px 0;
-      border-bottom: 1px solid var(--border);
-      font-size: 0.92rem;
-    }
-
-    .result .field:last-child {
-      border-bottom: none;
-    }
-
-    .result .field .label {
-      color: var(--text-muted);
-    }
-
-    .result .field .value {
-      font-family: ui-monospace, monospace;
-      font-size: 0.85rem;
-    }
-
-    .result .actions {
-      margin-top: 16px;
-      display: flex;
-      gap: 12px;
-    }
-
-    .btn {
-      padding: 10px 20px;
-      border-radius: var(--radius-sm);
-      border: none;
-      font-size: 0.92rem;
-      cursor: pointer;
-      text-decoration: none;
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      transition: background 0.15s;
-    }
-
-    .btn-primary {
-      background: var(--accent);
-      color: #fff;
-    }
-
-    .btn-primary:hover {
-      background: var(--accent-hover);
-    }
-
-    .btn-secondary {
-      background: var(--surface-hover);
-      color: var(--text);
-      border: 1px solid var(--border);
-    }
-
-    .btn-secondary:hover {
-      background: var(--border);
-    }
-
-    /* App bundles */
-    .app-bundle {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      padding: 20px;
-      margin-top: 20px;
-    }
-
-    .app-bundle .bundle-header {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      margin-bottom: 16px;
-    }
-
-    .app-bundle .bundle-icon {
-      width: 56px;
-      height: 56px;
-      border-radius: var(--radius-sm);
-      background: var(--surface-hover);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1.6rem;
-      flex-shrink: 0;
-    }
-
-    .app-bundle .bundle-title {
-      flex: 1;
-      min-width: 0;
-    }
-
-    .app-bundle .bundle-title .name {
-      font-weight: 600;
-      font-size: 1.1rem;
-      margin-bottom: 4px;
-    }
-
-    .app-bundle .bundle-title .meta {
-      font-size: 0.82rem;
-      color: var(--text-muted);
-    }
-
-    .app-bundle .badge {
-      display: inline-block;
-      padding: 4px 10px;
-      border-radius: 999px;
-      font-size: 0.75rem;
-      font-weight: 500;
-      margin-left: 8px;
-    }
-
-    .badge-success {
-      background: rgba(34, 197, 94, 0.15);
-      color: var(--success);
-    }
-
-    .badge-warn {
-      background: rgba(245, 158, 11, 0.15);
-      color: var(--warn);
-    }
-
-    /* File tree */
-    .file-tree {
-      margin-top: 16px;
-      padding: 12px;
-      background: var(--bg);
-      border-radius: var(--radius-sm);
-      max-height: 300px;
-      overflow-y: auto;
-    }
-
-    .file-tree .item {
-      padding: 4px 0;
-      font-size: 0.85rem;
-      font-family: ui-monospace, monospace;
-      color: var(--text-muted);
-    }
-
-    .file-tree .item::before {
-      content: "📄 ";
-    }
-
-    .file-tree .item.dir::before {
-      content: "📁 ";
-    }
-
-    /* Section */
-    .section {
-      margin-top: 48px;
-    }
-
-    .section h2 {
-      margin: 0 0 20px;
-      font-size: 1.3rem;
-    }
-
-    .app-grid {
-      display: grid;
-      gap: 12px;
-    }
-
-    .app-card {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      padding: 16px 20px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 16px;
-      transition: border-color 0.15s;
-    }
-
-    .app-card:hover {
-      border-color: var(--accent);
-    }
-
-    .app-card .info {
-      flex: 1;
-      min-width: 0;
-    }
-
-    .app-card .info .name {
-      font-weight: 600;
-      margin-bottom: 4px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .app-card .info .meta {
-      font-size: 0.82rem;
-      color: var(--text-muted);
-    }
-
-    .app-card .actions {
-      display: flex;
-      gap: 8px;
-      flex-shrink: 0;
-    }
-
-    .app-card .actions a {
-      padding: 6px 14px;
-      border-radius: var(--radius-sm);
-      background: var(--surface-hover);
-      color: var(--text);
-      text-decoration: none;
-      font-size: 0.82rem;
-      border: 1px solid var(--border);
-    }
-
-    .app-card .actions a:hover {
-      background: var(--border);
-    }
-
-    .empty {
-      text-align: center;
-      padding: 40px;
-      color: var(--text-muted);
-    }
-
-    /* Toast */
-    .toast {
-      position: fixed;
-      bottom: 24px;
-      left: 50%;
-      transform: translateX(-50%) translateY(100px);
-      background: var(--surface);
-      border: 1px solid var(--border);
-      padding: 12px 24px;
-      border-radius: var(--radius-sm);
-      font-size: 0.9rem;
-      opacity: 0;
-      transition: all 0.3s ease;
-      z-index: 1000;
-    }
-
-    .toast.show {
-      opacity: 1;
-      transform: translateX(-50%) translateY(0);
-    }
-
-    .toast.error {
-      border-color: #ef4444;
-      color: #fca5a5;
-    }
-
-    .toast.success {
-      border-color: #22c55e;
-      color: #86efac;
-    }
-
-    /* ─── Context Menu ───────────────────────────────────── */
-    .ctx-menu {
-      position: fixed;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      padding: 6px 0;
-      min-width: 200px;
-      z-index: 2000;
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-      display: none;
-    }
-
-    .ctx-menu-item {
-      padding: 8px 16px;
-      font-size: 0.88rem;
-      color: var(--text);
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      transition: background 0.1s;
-    }
-
-    .ctx-menu-item:hover {
-      background: var(--surface-hover);
-    }
-
-    .ctx-menu-sep {
-      height: 1px;
-      background: var(--border);
-      margin: 4px 0;
-    }
-
-    /* ─── Links Table ────────────────────────────────────── */
-    .links-table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 0.9rem;
-    }
-
-    .links-table th,
-    .links-table td {
-      padding: 10px 12px;
-      text-align: left;
-      border-bottom: 1px solid var(--border);
-    }
-
-    .links-table th {
-      color: var(--text-muted);
-      font-weight: 500;
-      font-size: 0.82rem;
-      text-transform: uppercase;
-      letter-spacing: 0.03em;
-    }
-
-    .links-table td {
-      color: var(--text);
-    }
-
-    .links-table .link-cell {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .links-table input {
-      flex: 1;
-      background: var(--bg);
-      border: 1px solid var(--border);
-      color: var(--text);
-      padding: 6px 10px;
-      border-radius: var(--radius-sm);
-      font-size: 0.82rem;
-      font-family: ui-monospace, monospace;
-    }
-
-    .links-table .copy-btn {
-      padding: 5px 10px;
-      border-radius: var(--radius-sm);
-      background: var(--surface-hover);
-      border: 1px solid var(--border);
-      color: var(--text);
-      font-size: 0.8rem;
-      cursor: pointer;
-    }
-
-    .links-table .copy-btn:hover {
-      background: var(--border);
-    }
-
-    /* ─── Microspaces Dashboard ────────────────────────────── */
-    .view-toggle {
-      display: flex;
-      gap: 8px;
-      justify-content: center;
-      margin-bottom: 24px;
-    }
-
-    .view-toggle button {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      color: var(--text);
-      padding: 8px 18px;
-      border-radius: var(--radius-sm);
-      cursor: pointer;
-      font-size: 0.9rem;
-      transition: all 0.15s;
-    }
-
-    .view-toggle button.active {
-      background: var(--accent);
-      border-color: var(--accent);
-      color: #fff;
-    }
-
-    .microspaces-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      grid-template-rows: repeat(2, 320px);
-      gap: 12px;
-      margin-bottom: 40px;
-    }
-
-    @media (max-width: 900px) {
-      .microspaces-grid {
-        grid-template-columns: repeat(2, 1fr);
-        grid-template-rows: repeat(3, 280px);
-      }
-    }
-
-    @media (max-width: 600px) {
-      .microspaces-grid {
-        grid-template-columns: 1fr;
-        grid-template-rows: repeat(6, 260px);
-      }
-    }
-
-    .microspace {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .microspace-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 6px 10px;
-      background: var(--surface-hover);
-      border-bottom: 1px solid var(--border);
-      font-size: 0.8rem;
-      color: var(--text-muted);
-    }
-
-    .microspace-header select {
-      background: var(--bg);
-      border: 1px solid var(--border);
-      color: var(--text);
-      font-size: 0.78rem;
-      padding: 3px 6px;
-      border-radius: 4px;
-      max-width: 160px;
-    }
-
-    .microspace-body {
-      flex: 1;
-      position: relative;
-      overflow: hidden;
-    }
-
-    .microspace-body iframe {
-      width: 100%;
-      height: 100%;
-      border: none;
-      display: block;
-    }
-
-    .microspace-empty {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      color: var(--text-muted);
-      font-size: 0.85rem;
-    }
-
-    /* ─── Terminal ───────────────────────────────────────── */
-    .terminal {
-      background: #0c0c12;
-      color: #e2e2e8;
-      font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
-      font-size: 0.82rem;
-      line-height: 1.5;
-      height: 100%;
-      overflow-y: auto;
-      padding: 10px;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .terminal-output {
-      flex: 1;
-      overflow-y: auto;
-      white-space: pre-wrap;
-      word-break: break-word;
-    }
-
-    .terminal-output .cmd {
-      color: #22c55e;
-    }
-
-    .terminal-output .err {
-      color: #f87171;
-    }
-
-    .terminal-output .info {
-      color: #60a5fa;
-    }
-
-    .terminal-output .warn {
-      color: #fbbf24;
-    }
-
-    .terminal-input-line {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      padding-top: 4px;
-    }
-
-    .terminal-prompt {
-      color: #22c55e;
-      white-space: nowrap;
-    }
-
-    .terminal-input {
-      flex: 1;
-      background: transparent;
-      border: none;
-      color: #e2e2e8;
-      font-family: inherit;
-      font-size: inherit;
-      outline: none;
-      padding: 0;
-      margin: 0;
-    }
-  </style>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>LocalSpace Deployer — DMG, GGUF, Sites & Inference</title>
+<style>
+:root {
+  --bg: #0a0a0f; --bg-card: #14141a; --bg-hover: #1c1c24; --border: #2a2a35;
+  --text: #e2e2e8; --text-dim: #888898; --text-muted: #5a5a68;
+  --accent: #6366f1; --accent-hover: #818cf8; --accent-dim: rgba(99,102,241,0.15);
+  --green: #22c55e; --green-dim: rgba(34,197,94,0.15);
+  --red: #ef4444; --red-dim: rgba(239,68,68,0.15);
+  --yellow: #eab300; --yellow-dim: rgba(234,179,0,0.15);
+  --cyan: #06b6d4; --cyan-dim: rgba(6,182,212,0.15);
+  --radius: 12px; --radius-sm: 8px;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; min-height: 100vh; line-height: 1.6; }
+a { color: var(--accent-hover); text-decoration: none; }
+a:hover { text-decoration: underline; }
+nav { position: sticky; top: 0; z-index: 100; background: rgba(10,10,15,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; }
+nav .logo { font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
+nav .logo span { color: var(--accent); }
+nav .links { display: flex; gap: 20px; align-items: center; }
+nav .links a { color: var(--text-dim); font-size: 0.9rem; }
+nav .links a:hover { color: var(--text); text-decoration: none; }
+nav .cta { background: var(--accent); color: #fff; padding: 7px 16px; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; }
+nav .cta:hover { background: var(--accent-hover); text-decoration: none; }
+.hero { text-align: center; padding: 80px 24px 60px; max-width: 720px; margin: 0 auto; }
+.hero h1 { font-size: 2.8rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 16px; background: linear-gradient(135deg, #e2e2e8 0%, #818cf8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+.hero p { font-size: 1.15rem; color: var(--text-dim); margin-bottom: 32px; }
+.hero .badges { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
+.hero .badge { background: var(--bg-card); border: 1px solid var(--border); padding: 6px 14px; border-radius: 999px; font-size: 0.82rem; color: var(--text-dim); }
+.hero .badge strong { color: var(--text); }
+.features { max-width: 900px; margin: 0 auto 60px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; padding: 0 24px; }
+.feature { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: border-color 0.2s; }
+.feature:hover { border-color: var(--accent); }
+.feature .icon { font-size: 1.6rem; margin-bottom: 12px; }
+.feature h3 { font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
+.feature p { font-size: 0.88rem; color: var(--text-dim); }
+.section { max-width: 900px; margin: 0 auto 80px; padding: 0 24px; }
+.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
+.section-header h2 { font-size: 1.4rem; font-weight: 700; }
+.section-header .count { background: var(--bg-card); border: 1px solid var(--border); padding: 4px 12px; border-radius: 999px; font-size: 0.82rem; color: var(--text-dim); }
+.tabs { display: flex; gap: 4px; margin-bottom: 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; }
+.tab { flex: 1; padding: 10px 16px; border-radius: var(--radius-sm); font-size: 0.88rem; font-weight: 500; color: var(--text-dim); cursor: pointer; border: none; background: none; text-align: center; }
+.tab:hover { color: var(--text); }
+.tab.active { background: var(--accent); color: #fff; }
+.tab-content { display: none; }
+.tab-content.active { display: block; }
+.dropzone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 48px 24px; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--bg-card); }
+.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: var(--accent-dim); }
+.dropzone .dz-icon { font-size: 2.5rem; margin-bottom: 12px; }
+.dropzone .dz-text { font-size: 1.05rem; font-weight: 600; margin-bottom: 4px; }
+.dropzone .dz-sub { font-size: 0.85rem; color: var(--text-dim); }
+.dropzone .dz-formats { margin-top: 16px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
+.dropzone .dz-format { background: var(--bg); border: 1px solid var(--border); padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; color: var(--text-dim); }
+.dropzone input[type=file] { display: none; }
+.upload-progress { margin-top: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: none; }
+.upload-progress.active { display: block; }
+.upload-progress .bar-wrap { background: var(--bg); border-radius: 999px; height: 6px; overflow: hidden; margin-top: 8px; }
+.upload-progress .bar { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.2s; width: 0%; }
+.upload-progress .status { font-size: 0.88rem; color: var(--text-dim); }
+.creator-box { margin-top: 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
+.creator-box h3 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
+.creator-box p { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 16px; }
+.creator-box .row { display: flex; gap: 10px; flex-wrap: wrap; }
+.creator-box input { flex: 1; min-width: 180px; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.9rem; outline: none; }
+.creator-box input:focus { border-color: var(--accent); }
+.creator-box button { background: var(--accent); color: #fff; border: none; padding: 10px 20px; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; cursor: pointer; }
+.creator-box button:hover { background: var(--accent-hover); }
+.creator-box button:disabled { opacity: 0.5; }
+.inference-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
+.inference-panel .inf-status { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 0.88rem; }
+.inference-panel .inf-status .dot { width: 8px; height: 8px; border-radius: 50%; }
+.inference-panel .inf-status .dot.on { background: var(--green); }
+.inference-panel .inf-status .dot.off { background: var(--red); }
+.inference-panel .model-select { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
+.inference-panel select { flex: 1; min-width: 200px; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.9rem; outline: none; }
+.inference-panel .chat-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; min-height: 200px; max-height: 400px; overflow-y: auto; margin-bottom: 12px; }
+.inference-panel .chat-msg { margin-bottom: 12px; }
+.inference-panel .chat-msg .role { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; margin-bottom: 2px; }
+.inference-panel .chat-msg .role.user { color: var(--accent); }
+.inference-panel .chat-msg .role.assistant { color: var(--green); }
+.inference-panel .chat-msg .bubble { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 0.88rem; white-space: pre-wrap; }
+.inference-panel .chat-input { display: flex; gap: 10px; }
+.inference-panel .chat-input input { flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.9rem; outline: none; }
+.inference-panel .chat-input button { background: var(--accent); color: #fff; border: none; padding: 10px 20px; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; cursor: pointer; }
+.inference-panel .chat-input button:disabled { opacity: 0.5; }
+.inference-panel .inf-hint { font-size: 0.82rem; color: var(--text-muted); margin-top: 12px; padding: 10px; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); }
+.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 24px; }
+.app-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: border-color 0.2s, transform 0.15s; }
+.app-card:hover { border-color: var(--accent); transform: translateY(-2px); }
+.app-card .card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
+.app-card .card-title { font-weight: 600; font-size: 0.95rem; word-break: break-all; }
+.app-card .card-type { font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; font-weight: 600; white-space: nowrap; margin-left: 8px; }
+.app-card .card-type.dmg { background: var(--accent-dim); color: var(--accent-hover); }
+.app-card .card-type.gguf { background: var(--green-dim); color: var(--green); }
+.app-card .card-type.webapp { background: var(--yellow-dim); color: var(--yellow); }
+.app-card .card-type.site { background: var(--cyan-dim); color: var(--cyan); }
+.app-card .card-type.chatgpt { background: var(--green-dim); color: var(--green); }
+.app-card .card-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 12px; }
+.app-card .card-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; margin-bottom: 12px; }
+.app-card .card-status.ok { color: var(--green); }
+.app-card .card-status.err { color: var(--red); }
+.app-card .card-status .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
+.app-card .card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.app-card .card-actions a, .app-card .card-actions button { background: var(--bg-hover); border: 1px solid var(--border); color: var(--text); padding: 6px 12px; border-radius: var(--radius-sm); font-size: 0.82rem; text-decoration: none; cursor: pointer; }
+.app-card .card-actions a:hover, .app-card .card-actions button:hover { background: var(--border); text-decoration: none; }
+.app-card .card-actions .danger:hover { background: var(--red-dim); border-color: var(--red); }
+.app-card .card-details { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; font-size: 0.82rem; color: var(--text-dim); }
+.app-card .card-details .detail-row { display: flex; justify-content: space-between; padding: 2px 0; }
+.app-card .card-details .detail-row strong { color: var(--text); }
+.app-card .gguf-meta { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; font-size: 0.8rem; color: var(--text-dim); max-height: 200px; overflow-y: auto; }
+.app-card .gguf-meta .meta-row { display: flex; justify-content: space-between; padding: 2px 0; }
+.app-card .gguf-meta .meta-row strong { color: var(--text); }
+.empty { text-align: center; padding: 48px 24px; color: var(--text-muted); }
+.empty .icon { font-size: 2rem; margin-bottom: 8px; }
+footer { border-top: 1px solid var(--border); padding: 32px 24px; text-align: center; font-size: 0.82rem; color: var(--text-muted); }
+.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; z-index: 200; padding: 24px; }
+.modal-overlay.active { display: flex; }
+.modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); max-width: 700px; width: 100%; max-height: 80vh; overflow-y: auto; padding: 28px; }
+.modal h2 { font-size: 1.2rem; margin-bottom: 16px; }
+.modal .close { float: right; cursor: pointer; color: var(--text-dim); font-size: 1.3rem; }
+.modal .close:hover { color: var(--text); }
+.modal pre { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; overflow-x: auto; font-size: 0.82rem; color: var(--text-dim); }
+@media (max-width: 640px) { .hero h1 { font-size: 2rem; } .hero p { font-size: 1rem; } .features { grid-template-columns: 1fr; } .apps-grid { grid-template-columns: 1fr; } nav .links a:not(.cta) { display: none; } .tab { font-size: 0.78rem; padding: 8px 8px; } }
+.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+</style>
 </head>
-
 <body>
-  <div class="container">
-    <header>
-      <div class="landing-carousel" id="landingCarousel">
-        <!-- Slide 1: Deploy -->
-        <div class="landing-slide active" data-slide="0">
-          <div class="icon">📦</div>
-          <div class="slide-title">Deploy Any DMG</div>
-          <div class="slide-subtitle">Drag a macOS app bundle onto the Space. We extract it, inspect it, and serve it
-            live — no setup required.</div>
-          <button class="slide-cta" onclick="switchView('deploy')">Start Deploying →</button>
-        </div>
-        <!-- Slide 2: Microspaces -->
-        <div class="landing-slide" data-slide="1">
-          <div class="icon">🪟</div>
-          <div class="slide-title">Six Microspaces</div>
-          <div class="slide-subtitle">Run 5 apps side-by-side in a grid, plus a built-in terminal. Mix web apps and
-            native previews in one dashboard.</div>
-          <button class="slide-cta" onclick="switchView('micro')">Open Microspaces →</button>
-        </div>
-        <!-- Slide 3: Share -->
-        <div class="landing-slide" data-slide="2">
-          <div class="icon">🔗</div>
-          <div class="slide-title">Share Instantly</div>
-          <div class="slide-subtitle">Every upload gets permanent public URLs. Right-click any app to copy its link.
-            Shareable app viewers for anyone.</div>
-          <button class="slide-cta" onclick="switchView('links')">View Links →</button>
-        </div>
-      </div>
-      <div class="landing-dots" id="landingDots">
-        <div class="landing-dot active" onclick="goToSlide(0)"></div>
-        <div class="landing-dot" onclick="goToSlide(1)"></div>
-        <div class="landing-dot" onclick="goToSlide(2)"></div>
-      </div>
-      <div class="landing-timer">
-        <div class="fill" id="landingTimerFill"></div>
-      </div>
-    </header>
+<nav>
+  <div class="logo">⬡ <span>LocalSpace</span> Deployer</div>
+  <div class="links">
+    <a href="#features">Features</a>
+    <a href="#deploy">Deploy</a>
+    <a href="https://huggingface.co/spaces/josephrw/localspace-deployer" target="_blank">HF Space</a>
+    <a href="#deploy" class="cta">Get Started</a>
+  </div>
+</nav>
+
+<section class="hero">
+  <h1>Drag a DMG, GGUF, or ZIP.<br>It gets opened on the server.</h1>
+  <p>Upload macOS disk images, GGUF model files, or static site ZIPs. LocalSpace extracts, inspects, serves, and runs inference — all in one Hugging Face Space. No Gradio. No API keys. Pure FastAPI.</p>
+  <div class="badges">
+    <div class="badge"><strong>DMG</strong> extraction</div>
+    <div class="badge"><strong>GGUF</strong> inference</div>
+    <div class="badge"><strong>Tiny Netlify</strong> site deploy</div>
+    <div class="badge"><strong>ChatGPT export</strong> → dApp</div>
+    <div class="badge"><strong>Persistent</strong> storage</div>
+  </div>
+</section>
+
+<section class="features" id="features">
+  <div class="feature"><div class="icon">📦</div><h3>DMG Extraction</h3><p>Upload .dmg → 7z extracts server-side, finds .app bundles, reads Info.plist, lists files, SHA-256 hashes.</p></div>
+  <div class="feature"><div class="icon">🧠</div><h3>GGUF Inference</h3><p>Upload .gguf → parse metadata, load with llama-cpp-python, serve OpenAI-compatible /api/inference/chat endpoint.</p></div>
+  <div class="feature"><div class="icon">🌐</div><h3>Tiny Netlify</h3><p>Upload a static site ZIP → get a hosted URL. Base-tag injection, full MIME support, file tree browsing.</p></div>
+  <div class="feature"><div class="icon">💬</div><h3>ChatGPT → dApp</h3><p>Upload ChatGPT export (conversations.json or .zip) → get a browsable dApp with sidebar, search, and message viewer.</p></div>
+  <div class="feature"><div class="icon">🔗</div><h3>Web App → DMG</h3><p>Paste any URL → get a macOS .app bundle wrapper. Creates Info.plist, executable, and HTML fallback.</p></div>
+  <div class="feature"><div class="icon">💾</div><h3>Persistent Storage</h3><p>Auto-detects /data mount on HF Spaces. Falls back to local storage. All artifacts survive restarts when mounted.</p></div>
+</section>
+
+<section class="section" id="deploy">
+  <div class="section-header">
+    <h2>Artifact Deployer</h2>
+    <div class="count" id="app-count">0 artifacts</div>
+  </div>
+  <div class="tabs">
+    <button class="tab active" onclick="switchTab(event,'dmg-gguf')">📦 DMG / GGUF</button>
+    <button class="tab" onclick="switchTab(event,'site')">🌐 Deploy Site</button>
+    <button class="tab" onclick="switchTab(event,'chatgpt')">💬 ChatGPT Export</button>
+    <button class="tab" onclick="switchTab(event,'inference')">🧠 Inference</button>
+    <button class="tab" onclick="switchTab(event,'webapp')">🔗 Web App</button>
+  </div>
 
-    <div class="view-toggle">
-      <button id="viewDeployBtn" class="active" onclick="switchView('deploy')">📦 Deploy</button>
-      <button id="viewMicroBtn" onclick="switchView('micro')">🪟 Microspaces</button>
-      <button id="viewLinksBtn" onclick="switchView('links')">🔗 Links</button>
+  <div class="tab-content active" id="tab-dmg-gguf">
+    <div class="dropzone" id="dropzone">
+      <div class="dz-icon">⬆️</div>
+      <div class="dz-text">Drop a DMG or GGUF file here</div>
+      <div class="dz-sub">or click to browse</div>
+      <div class="dz-formats"><div class="dz-format">.dmg</div><div class="dz-format">.gguf</div></div>
+      <input type="file" id="file-input" accept=".dmg,.gguf">
     </div>
-
-    <!-- ─── Microspaces Dashboard ─────────────────────────── -->
-    <div id="microspacesView" style="display:none;">
-      <div class="microspaces-grid" id="microGrid">
-        <!-- 6 microspaces generated by JS -->
-      </div>
+    <div class="upload-progress" id="upload-progress">
+      <div class="status" id="upload-status">Uploading...</div>
+      <div class="bar-wrap"><div class="bar" id="upload-bar"></div></div>
     </div>
+  </div>
 
-    <!-- ─── Links View ────────────────────────────────────── -->
-    <div id="linksView" style="display:none;">
-      <div class="section">
-        <h2>🔗 App Links</h2>
-        <p style="color:var(--text-muted);margin:-12px 0 20px;">Every app gets permanent shareable URLs. Right-click any
-          card to copy a link.</p>
-        <div id="linksTableWrap">
-          <div class="empty">Loading...</div>
-        </div>
-      </div>
+  <div class="tab-content" id="tab-site">
+    <div class="dropzone" id="site-dropzone">
+      <div class="dz-icon">🌐</div>
+      <div class="dz-text">Drop a static site ZIP here</div>
+      <div class="dz-sub">index.html will be served at /site/{id}/</div>
+      <div class="dz-formats"><div class="dz-format">.zip</div></div>
+      <input type="file" id="site-file-input" accept=".zip">
     </div>
+    <div class="upload-progress" id="site-upload-progress">
+      <div class="status" id="site-upload-status">Deploying...</div>
+      <div class="bar-wrap"><div class="bar" id="site-upload-bar"></div></div>
+    </div>
+  </div>
 
-    <!-- ─── Deploy View (existing content) ────────────────── -->
-    <div id="deployView">
-      <div class="dropzone" id="dropzone">
-        <input type="file" id="fileInput" accept=".dmg">
-        <div class="icon">📦</div>
-        <h3>Drop a DMG here</h3>
-        <p>or click to browse. The DMG will be opened and its contents shown below.</p>
-      </div>
-
-      <div class="progress-wrap" id="progressWrap">
-        <div class="progress-bar">
-          <div class="fill" id="progressFill"></div>
-        </div>
-        <div class="progress-text" id="progressText">Uploading and opening...</div>
-      </div>
-
-      <div class="result" id="result">
-        <h4 id="resTitle">Registered</h4>
-        <div class="field"><span class="label">Slug</span><span class="value" id="resSlug">-</span></div>
-        <div class="field"><span class="label">Filename</span><span class="value" id="resFilename">-</span></div>
-        <div class="field"><span class="label">Size</span><span class="value" id="resSize">-</span></div>
-        <div class="field"><span class="label">SHA-256</span><span class="value" id="resHash">-</span></div>
-        <div class="actions">
-          <a href="#" class="btn btn-primary" id="launchBtn" target="_blank"
-            style="display:none;background:linear-gradient(135deg,#3b82f6,#8b5cf6);">🚀 Launch App</a>
-          <a href="#" class="btn btn-secondary" id="downloadBtn" target="_blank" style="display:none;">⬇ Download</a>
-          <button class="btn btn-secondary" id="copyBtn">📋 Copy Link</button>
-        </div>
-        <div id="bundles"></div>
-
-        <div id="previewWrap" style="margin-top:24px;display:none;">
-          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
-            <h4 style="margin:0;color:var(--accent)">🌐 Live Preview</h4>
-            <div style="display:flex;gap:8px;">
-              <select id="previewFileSelect"
-                style="padding:6px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:0.85rem;max-width:220px;"></select>
-              <button class="btn btn-secondary" id="previewNewTabBtn" style="padding:6px 14px;font-size:0.82rem;">↗ New
-                Tab</button>
-              <button class="btn btn-secondary" id="previewFullscreenBtn" style="padding:6px 14px;font-size:0.82rem;">⛶
-                Fullscreen</button>
-            </div>
-          </div>
-          <div id="previewContainer"
-            style="position:relative;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:#fff;">
-            <iframe id="previewFrame" style="width:100%;height:500px;border:none;display:block;"></iframe>
-            <div id="previewLoading"
-              style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,10,15,0.9);color:var(--text-muted);">
-              <span style="animation:pulse 1.4s infinite;">Loading preview...</span>
-            </div>
-          </div>
-          <style>
-            @keyframes pulse {
-
-              0%,
-              100% {
-                opacity: 0.4
-              }
+  <div class="tab-content" id="tab-chatgpt">
+    <div class="dropzone" id="chatgpt-dropzone">
+      <div class="dz-icon">💬</div>
+      <div class="dz-text">Drop a ChatGPT export here</div>
+      <div class="dz-sub">conversations.json or export ZIP → browsable dApp</div>
+      <div class="dz-formats"><div class="dz-format">.json</div><div class="dz-format">.zip</div></div>
+      <input type="file" id="chatgpt-file-input" accept=".json,.zip">
+    </div>
+    <div class="upload-progress" id="chatgpt-upload-progress">
+      <div class="status" id="chatgpt-upload-status">Importing...</div>
+      <div class="bar-wrap"><div class="bar" id="chatgpt-upload-bar"></div></div>
+    </div>
+  </div>
 
-              50% {
-                opacity: 1
-              }
-            }
-          </style>
-        </div>
+  <div class="tab-content" id="tab-inference">
+    <div class="inference-panel">
+      <div class="inf-status"><span class="dot" id="inf-dot"></span><span id="inf-status-text">Checking...</span></div>
+      <div class="model-select">
+        <select id="inf-model-select"><option value="">Select a GGUF model...</option></select>
+        <button onclick="loadModel()" id="inf-load-btn">Load Model</button>
       </div>
-
-      <div class="section">
-        <h2>🧪 Create App from URL</h2>
-        <p style="color:var(--text-muted);margin-bottom:16px;">Turn any website into a downloadable macOS app bundle.
-          Enter a URL, get an .app/.dmg.</p>
-        <div style="display:grid;gap:12px;max-width:600px;">
-          <input type="text" id="webUrl" placeholder="https://example.com"
-            style="padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:0.95rem;">
-          <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
-            <input type="text" id="webAppName" placeholder="App Name" value="MyApp"
-              style="padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:0.95rem;">
-            <input type="text" id="webBundleId" placeholder="Bundle ID" value="app.localspace.myapp"
-              style="padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:0.95rem;">
-          </div>
-          <input type="text" id="webVersion" placeholder="Version" value="1.0.0"
-            style="padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:0.95rem;">
-          <button class="btn btn-primary" id="createWebappBtn" style="justify-self:start;">📦 Package as App</button>
-        </div>
-        <div id="webappResult" style="margin-top:16px;display:none;" class="result"></div>
+      <div class="chat-box" id="inf-chat-box"><div style="color:var(--text-muted);text-align:center;padding:40px">Load a GGUF model to start chatting</div></div>
+      <div class="chat-input">
+        <input type="text" id="inf-chat-input" placeholder="Type a message..." onkeydown="if(event.key==='Enter')sendChat()" disabled>
+        <button onclick="sendChat()" id="inf-send-btn" disabled>Send</button>
       </div>
+      <div class="inf-hint" id="inf-hint"></div>
+    </div>
+  </div>
 
-      <div class="section">
-        <h2>📦 Published Apps Gallery</h2>
-        <p style="color:var(--text-muted);margin:-12px 0 20px;">Every uploaded app with a web preview gets its own
-          public
-          URL. Click Launch to open it.</p>
-        <div class="app-grid" id="appGrid">
-          <div class="empty">No apps yet. Upload a DMG above to open it.</div>
-        </div>
+  <div class="tab-content" id="tab-webapp">
+    <div class="creator-box">
+      <h3>🔗 Create macOS App from URL</h3>
+      <p>Paste a web app URL to generate a .app bundle wrapper that opens it on macOS.</p>
+      <div class="row">
+        <input type="text" id="webapp-url" placeholder="https://your-web-app-url.com">
+        <input type="text" id="webapp-name" placeholder="App name" style="max-width:180px">
+        <button id="webapp-btn" onclick="createWebapp()">Create App</button>
       </div>
     </div>
-
-    <div class="toast" id="toast"></div>
-
-    <script>
-      const $ = id => document.getElementById(id);
-      const dropzone = $('dropzone'), fileInput = $('fileInput');
-      const progressWrap = $('progressWrap'), progressFill = $('progressFill'), progressText = $('progressText');
-      const result = $('result'), bundlesEl = $('bundles');
-      const toast = $('toast');
-
-      function showToast(msg, type = 'success') {
-        toast.textContent = msg; toast.className = 'toast ' + type + ' show';
-        setTimeout(() => toast.classList.remove('show'), 3000);
-      }
-
-      ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => {
-        dropzone.addEventListener(e, ev => { ev.preventDefault(); ev.stopPropagation(); });
-      });
-      ['dragenter', 'dragover'].forEach(e => dropzone.addEventListener(e, () => dropzone.classList.add('dragover')));
-      ['dragleave', 'drop'].forEach(e => dropzone.addEventListener(e, () => dropzone.classList.remove('dragover')));
-
-      dropzone.addEventListener('drop', e => { if (e.dataTransfer.files.length) handleFile(e.dataTransfer.files[0]); });
-      fileInput.addEventListener('change', e => { if (fileInput.files.length) handleFile(fileInput.files[0]); });
-
-      async function handleFile(file) {
-        if (!file.name.toLowerCase().endsWith('.dmg')) { showToast('Only .dmg files.', 'error'); return; }
-        progressWrap.classList.add('active'); result.classList.remove('active'); progressFill.style.width = '0%';
-        progressText.textContent = 'Uploading and opening DMG...';
-
-        const form = new FormData(); form.append('file', file);
-        try {
-          const xhr = new XMLHttpRequest();
-          xhr.open('POST', '/api/upload');
-          xhr.upload.onprogress = e => {
-            if (e.lengthComputable) {
-              const pct = Math.round((e.loaded / e.total) * 60);
-              progressFill.style.width = pct + '%';
-              progressText.textContent = `Uploading... ${pct}%`;
-            }
-          };
-          xhr.onload = () => {
-            progressWrap.classList.remove('active');
-            if (xhr.status === 201) {
-              const data = JSON.parse(xhr.responseText);
-              showApp(data.app);
-              showToast(data.message || 'Opened!');
-              loadApps();
-            } else {
-              const err = JSON.parse(xhr.responseText || '{}');
-              showToast(err.error || 'Upload failed', 'error');
-            }
-          };
-          xhr.onerror = () => { progressWrap.classList.remove('active'); showToast('Network error', 'error'); };
-          xhr.send(form);
-        } catch (err) { progressWrap.classList.remove('active'); showToast(String(err), 'error'); }
-      }
-
-      function showApp(app) {
-        $('resTitle').textContent = app.opened ? '✅ DMG Opened' : '⚠️ Uploaded (could not open)';
-        $('resTitle').style.color = app.opened ? 'var(--success)' : 'var(--warn)';
-        $('resSlug').textContent = app.slug;
-        $('resFilename').textContent = app.filename;
-        $('resSize').textContent = app.size.toLocaleString() + ' bytes';
-        $('resHash').textContent = app.sha256.substring(0, 32) + '...';
-        $('copyBtn').onclick = () => { navigator.clipboard.writeText(window.location.origin + app.download_url); showToast('Link copied!'); };
-
-        // Launch = primary for web-previewable apps; Download = only for non-preview
-        const launchBtn = $('launchBtn');
-        const downloadBtn = $('downloadBtn');
-        if (app.has_preview) {
-          launchBtn.href = `/app/${app.app_id}`;
-          launchBtn.style.display = 'inline-flex';
-          downloadBtn.style.display = 'none';
-        } else {
-          launchBtn.style.display = 'none';
-          downloadBtn.href = app.download_url;
-          downloadBtn.style.display = 'inline-flex';
-        }
-
-        bundlesEl.innerHTML = '';
-        if (app.apps && app.apps.length) {
-          app.apps.forEach((bundle, i) => {
-            const div = document.createElement('div');
-            div.className = 'app-bundle';
-            const filesHtml = (bundle.files || []).slice(0, 50).map(f => `<div class="item">${escapeHtml(f)}</div>`).join('');
-            div.innerHTML = `
-        <div class="bundle-header">
-          <div class="bundle-icon">🚀</div>
-          <div class="bundle-title">
-            <div class="name">${escapeHtml(bundle.display_name || bundle.bundle_name)} <span class="badge badge-success">v${escapeHtml(bundle.version || '?')}</span></div>
-            <div class="meta">${escapeHtml(bundle.bundle_id || '')} · ${bundle.file_count} files · executable: ${escapeHtml(bundle.executable || 'N/A')}</div>
-          </div>
-        </div>
-        ${filesHtml ? `<div class="file-tree">${filesHtml}</div>` : ''}
-      `;
-            bundlesEl.appendChild(div);
-          });
-        } else if (app.opened) {
-          bundlesEl.innerHTML = '<p style="color:var(--text-muted);margin-top:12px;">No .app bundles found inside this DMG.</p>';
-        }
-
-        // Show iframe preview for web content
-        const previewWrap = $('previewWrap');
-        const previewFrame = $('previewFrame');
-        const previewLoading = $('previewLoading');
-        const previewFileSelect = $('previewFileSelect');
-        previewWrap.style.display = 'none';
-        previewFileSelect.innerHTML = '';
-
-        if (app.has_preview && app.html_files && app.html_files.length) {
-          previewWrap.style.display = 'block';
-          previewLoading.style.display = 'flex';
-
-          // Populate file selector
-          app.html_files.forEach((hf, idx) => {
-            const opt = document.createElement('option');
-            opt.value = hf.path;
-            opt.textContent = hf.path;
-            if (hf.path === app.preview_entry) opt.selected = true;
-            previewFileSelect.appendChild(opt);
-          });
-
-          // Load the default entry point
-          const entryPath = app.preview_entry || app.html_files[0].path;
-          previewFrame.src = `/api/preview/${app.app_id}/${entryPath}`;
-          previewFrame.onload = () => { previewLoading.style.display = 'none'; };
-
-          // File selector change
-          previewFileSelect.onchange = () => {
-            previewLoading.style.display = 'flex';
-            previewFrame.src = `/api/preview/${app.app_id}/${previewFileSelect.value}`;
-          };
-
-          // New tab button
-          $('previewNewTabBtn').onclick = () => {
-            window.open(`/api/preview/${app.app_id}/${previewFileSelect.value || entryPath}`, '_blank');
-          };
-
-          // Fullscreen button
-          $('previewFullscreenBtn').onclick = () => {
-            const container = $('previewContainer');
-            if (container.requestFullscreen) container.requestFullscreen();
-            else if (container.webkitRequestFullscreen) container.webkitRequestFullscreen();
-          };
-        }
-
-        result.classList.add('active');
-      }
-
-      async function loadApps() {
-        try {
-          const res = await fetch('/api/apps');
-          const data = await res.json();
-          const grid = $('appGrid');
-          if (!data.apps || !data.apps.length) {
-            grid.innerHTML = '<div class="empty">No apps yet. Upload a DMG above to open it.</div>';
-            return;
-          }
-          grid.innerHTML = '';
-          data.apps.forEach(a => {
-            const date = new Date(a.created_at * 1000).toLocaleString();
-            let status;
-            if (a.is_webapp) {
-              status = `<span class="badge" style="background:rgba(59,130,246,0.15);color:var(--accent);">Web App</span>`;
-            } else if (a.opened) {
-              status = `<span class="badge badge-success">Opened</span>`;
-            } else {
-              status = `<span class="badge badge-warn">Closed</span>`;
-            }
-            const apps = (a.apps || []).map(b => `<div style="font-size:0.82rem;color:var(--text-muted);margin-top:4px;">🚀 ${escapeHtml(b.display_name || b.bundle_name)} ${b.version ? 'v' + b.version : ''}</div>`).join('');
-            const sourceUrl = a.source_url ? `<div style="font-size:0.82rem;color:var(--text-muted);margin-top:4px;">🔗 ${escapeHtml(a.source_url)}</div>` : '';
-            const launchLink = a.has_preview
-              ? `<a href="/app/${a.app_id}" target="_blank" style="background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;border:none;">🚀 Launch</a>`
-              : `<a href="${a.download_url}" download>⬇ Download</a>`;
-            const card = document.createElement('div');
-            card.className = 'app-card';
-            card.innerHTML = `
-        <div class="info">
-          <div class="name">${escapeHtml(a.filename)} ${status}</div>
-          <div class="meta">${escapeHtml(a.slug)} · ${a.size.toLocaleString()} bytes · ${date}</div>
-          ${apps}${sourceUrl}
-        </div>
-        <div class="actions">${launchLink}</div>`;
-            attachContextMenu(card, a.app_id);
-            grid.appendChild(card);
-          });
-        } catch (e) { console.error(e); }
-      }
-
-      function escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text || '';
-        return div.innerHTML;
-      }
-
-      // ─── Create Web App from URL ───────────────────────────────────────────
-      $('createWebappBtn').addEventListener('click', async () => {
-        const url = $('webUrl').value.trim();
-        const appName = $('webAppName').value.trim();
-        const bundleId = $('webBundleId').value.trim();
-        const version = $('webVersion').value.trim();
-        if (!url) { showToast('Enter a URL.', 'error'); return; }
-        if (!url.startsWith('http')) { showToast('URL must start with http:// or https://', 'error'); return; }
-        $('createWebappBtn').textContent = 'Packaging...';
-        $('createWebappBtn').disabled = true;
-        try {
-          const res = await fetch('/api/create-webapp', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ url, app_name: appName, bundle_id: bundleId, version }),
-          });
-          const data = await res.json();
-          const resultDiv = $('webappResult');
-          if (res.status === 201) {
-            const app = data.app;
-            resultDiv.innerHTML = `
-            <h4 style="margin:0 0 12px;color:var(--success)">✅ ${escapeHtml(app.app_name)} Packaged</h4>
-            <div class="field"><span class="label">Source URL</span><span class="value">${escapeHtml(app.source_url)}</span></div>
-            <div class="field"><span class="label">Bundle ID</span><span class="value">${escapeHtml(app.bundle_id)}</span></div>
-            <div class="field"><span class="label">Version</span><span class="value">${escapeHtml(app.version)}</span></div>
-            <div class="field"><span class="label">Download</span><span class="value"><a href="${app.download_url}">${escapeHtml(app.filename)}</a></span></div>
-            <p style="margin-top:12px;color:var(--text-muted);font-size:0.85rem;">${escapeHtml(data.message)}</p>
-          `;
-            resultDiv.style.display = 'block';
-            showToast('App packaged!');
-            loadApps();
-          } else {
-            showToast(data.error || 'Failed to package app.', 'error');
-          }
-        } catch (err) {
-          showToast(String(err), 'error');
-        } finally {
-          $('createWebappBtn').textContent = '📦 Package as App';
-          $('createWebappBtn').disabled = false;
-        }
-      });
-
-      // ─── Microspaces & Terminal ───────────────────────────────
-      let _appsCache = [];
-      let _kvStore = {};
-
-      function switchView(view) {
-        $('deployView').style.display = view === 'deploy' ? 'block' : 'none';
-        $('microspacesView').style.display = view === 'micro' ? 'block' : 'none';
-        $('linksView').style.display = view === 'links' ? 'block' : 'none';
-        $('viewDeployBtn').classList.toggle('active', view === 'deploy');
-        $('viewMicroBtn').classList.toggle('active', view === 'micro');
-        $('viewLinksBtn').classList.toggle('active', view === 'links');
-        if (view === 'micro') renderMicrospaces();
-        if (view === 'links') renderLinks();
-      }
-
-      // ─── Links View ─────────────────────────────────────────
-      async function renderLinks() {
-        const wrap = $('linksTableWrap');
-        try {
-          const res = await fetch('/api/apps');
-          const data = await res.json();
-          const apps = data.apps || [];
-          if (!apps.length) {
-            wrap.innerHTML = '<div class="empty">No apps yet. Upload a DMG to generate links.</div>';
-            return;
-          }
-          const origin = window.location.origin;
-          let html = `<table class="links-table"><thead><tr><th>App</th><th>App Viewer</th><th>Preview</th><th>Download</th></tr></thead><tbody>`;
-          apps.forEach(a => {
-            const appUrl = a.has_preview ? `${origin}/app/${a.app_id}` : '';
-            const previewUrl = a.has_preview && a.preview_entry ? `${origin}/api/preview/${a.app_id}/${a.preview_entry}` : (a.has_preview ? `${origin}/api/preview/${a.app_id}` : '');
-            const downloadUrl = `${origin}${a.download_url}`;
-            html += `<tr><td><strong>${escapeHtml(a.filename)}</strong><div style="font-size:0.78rem;color:var(--text-muted);margin-top:2px;">${a.slug}</div></td>`;
-            html += `<td>${appUrl ? `<div class="link-cell"><input value="${appUrl}" readonly onclick="this.select()"><button class="copy-btn" onclick="navigator.clipboard.writeText('${appUrl}');showToast('Copied!')">Copy</button></div>` : '<span style="color:var(--text-muted)">—</span>'}</td>`;
-            html += `<td>${previewUrl ? `<div class="link-cell"><input value="${previewUrl}" readonly onclick="this.select()"><button class="copy-btn" onclick="navigator.clipboard.writeText('${previewUrl}');showToast('Copied!')">Copy</button></div>` : '<span style="color:var(--text-muted)">—</span>'}</td>`;
-            html += `<td><div class="link-cell"><input value="${downloadUrl}" readonly onclick="this.select()"><button class="copy-btn" onclick="navigator.clipboard.writeText('${downloadUrl}');showToast('Copied!')">Copy</button></div></td></tr>`;
-          });
-          html += '</tbody></table>';
-          wrap.innerHTML = html;
-        } catch (e) { wrap.innerHTML = '<div class="empty">Error loading links.</div>'; console.error(e); }
-      }
-
-      // ─── Context Menu ───────────────────────────────────────
-      let _ctxAppId = null;
-      document.addEventListener('click', () => { $('ctxMenu').style.display = 'none'; });
-      document.addEventListener('scroll', () => { $('ctxMenu').style.display = 'none'; }, true);
-
-      function attachContextMenu(el, appId) {
-        el.addEventListener('contextmenu', e => {
-          e.preventDefault();
-          _ctxAppId = appId;
-          const menu = $('ctxMenu');
-          menu.style.display = 'block';
-          const x = Math.min(e.clientX, window.innerWidth - 220);
-          const y = Math.min(e.clientY, window.innerHeight - 200);
-          menu.style.left = x + 'px';
-          menu.style.top = y + 'px';
-        });
-      }
-      function ctxOpenApp() { if (_ctxAppId) window.location.href = `/app/${_ctxAppId}`; }
-      function ctxLaunchNewTab() { if (_ctxAppId) window.open(`/app/${_ctxAppId}`, '_blank'); }
-      function ctxCopyLink(type) {
-        if (!_ctxAppId) return;
-        const app = _appsCache.find(a => a.app_id === _ctxAppId); if (!app) return;
-        const origin = window.location.origin;
-        let url = '';
-        if (type === 'app') url = `${origin}/app/${_ctxAppId}`;
-        else if (type === 'preview') url = app.preview_entry ? `${origin}/api/preview/${_ctxAppId}/${app.preview_entry}` : `${origin}/api/preview/${_ctxAppId}`;
-        else if (type === 'download') url = `${origin}${app.download_url}`;
-        navigator.clipboard.writeText(url); showToast(`${type} link copied!`); $('ctxMenu').style.display = 'none';
-      }
-      function ctxCopyId() { if (_ctxAppId) { navigator.clipboard.writeText(_ctxAppId); showToast('App ID copied!'); $('ctxMenu').style.display = 'none'; } }
-
-      async function renderMicrospaces() {
-        const grid = $('microGrid');
-        // Build 6 panels if not already built
-        if (!grid.dataset.built) {
-          grid.innerHTML = '';
-          for (let i = 0; i < 6; i++) {
-            const isTerminal = i === 5; // last cell = terminal
-            const div = document.createElement('div');
-            div.className = 'microspace';
-            div.id = `micro-${i}`;
-            div.innerHTML = `
-            <div class="microspace-header">
-              <span>🪟 Space ${i + 1}</span>
-              ${isTerminal ? '<span>⌨️ Terminal</span>' : `<select id="microSel-${i}" onchange="updateMicrospace(${i})"><option value="">— Select app —</option></select>`}
-            </div>
-            <div class="microspace-body" id="microBody-${i}">
-              ${isTerminal ? buildTerminalHTML() : '<div class="microspace-empty">Select an app above</div>'}
-            </div>
-          `;
-            grid.appendChild(div);
-            if (isTerminal) initTerminal();
-          }
-          grid.dataset.built = '1';
-        }
-        // Refresh selectors with current apps
-        try {
-          const res = await fetch('/api/apps');
-          const data = await res.json();
-          _appsCache = data.apps || [];
-          const previewApps = _appsCache.filter(a => a.has_preview);
-          for (let i = 0; i < 5; i++) {
-            const sel = $(`microSel-${i}`);
-            if (!sel) continue;
-            const prevVal = sel.value;
-            sel.innerHTML = '<option value="">— Select app —</option>';
-            previewApps.forEach(a => {
-              const opt = document.createElement('option');
-              opt.value = a.app_id;
-              opt.textContent = a.filename;
-              sel.appendChild(opt);
-            });
-            if (prevVal) sel.value = prevVal;
-          }
-        } catch (e) { console.error(e); }
-      }
-
-      function updateMicrospace(idx) {
-        const sel = $(`microSel-${idx}`);
-        const body = $(`microBody-${idx}`);
-        const appId = sel.value;
-        if (!appId) {
-          body.innerHTML = '<div class="microspace-empty">Select an app above</div>';
-          return;
-        }
-        const app = _appsCache.find(a => a.app_id === appId);
-        const entryPath = app && app.preview_entry ? app.preview_entry : '';
-        const src = entryPath ? `/api/preview/${appId}/${entryPath}` : `/api/preview/${appId}`;
-        body.innerHTML = `<iframe src="${src}" loading="lazy"></iframe>`;
-      }
-
-      function buildTerminalHTML() {
-        return `
-        <div class="terminal" id="termContainer" onclick="document.getElementById('termInput').focus()">
-          <div class="terminal-output" id="termOutput"></div>
-          <div class="terminal-input-line">
-            <span class="terminal-prompt">localspace$</span>
-            <input type="text" class="terminal-input" id="termInput" autocomplete="off" spellcheck="false" onkeydown="handleTerminalKey(event)">
-          </div>
-        </div>
-      `;
-      }
-
-      function initTerminal() {
-        const out = $('termOutput');
-        if (!out) return;
-        out.innerHTML = '';
-        termPrint('LocalSpace Terminal v1.0', 'info');
-        termPrint('Type \'help\' for available commands.', 'info');
-        termPrint('');
-      }
-
-      function termPrint(text, cls = '') {
-        const out = $('termOutput');
-        if (!out) return;
-        const line = document.createElement('div');
-        if (cls) line.className = cls;
-        line.textContent = text;
-        out.appendChild(line);
-        out.scrollTop = out.scrollHeight;
-      }
-
-      async function handleTerminalKey(e) {
-        if (e.key !== 'Enter') return;
-        const input = $('termInput');
-        const cmd = input.value.trim();
-        input.value = '';
-        termPrint(`localspace$ ${cmd}`, 'cmd');
-        if (!cmd) return;
-        await runTerminalCommand(cmd);
-      }
-
-      async function runTerminalCommand(cmd) {
-        const parts = cmd.split(/\s+/);
-        const action = parts[0].toLowerCase();
-
-        // ─── KV Memory (session-only, per-tab) ──────────────────
-        if (action === 'set') {
-          if (parts.length < 3) { termPrint('Usage: set <key> <value>', 'err'); return; }
-          const key = parts[1]; const val = parts.slice(2).join(' ');
-          if (!_kvStore) _kvStore = {};
-          _kvStore[key] = val;
-          termPrint(`Set "${key}" = "${val}"`, 'success');
-          return;
-        }
-        if (action === 'get') {
-          if (parts.length < 2) { termPrint('Usage: get <key>', 'err'); return; }
-          const val = _kvStore?.[parts[1]];
-          if (val === undefined) termPrint(`Key "${parts[1]}" not found.`, 'warn');
-          else termPrint(`${parts[1]} = ${val}`, 'info');
-          return;
-        }
-        if (action === 'del') {
-          if (parts.length < 2) { termPrint('Usage: del <key>', 'err'); return; }
-          if (_kvStore) delete _kvStore[parts[1]];
-          termPrint(`Deleted "${parts[1]}"`, 'success');
-          return;
-        }
-        if (action === 'keys') {
-          const keys = _kvStore ? Object.keys(_kvStore) : [];
-          if (!keys.length) { termPrint('No KV entries.', 'warn'); return; }
-          termPrint('KV Keys:', 'info');
-          keys.forEach(k => termPrint(`  ${k} = ${_kvStore[k]}`, 'muted'));
-          termPrint(`${keys.length} entries.`);
-          return;
-        }
-        if (action === 'clear_kv') {
-          _kvStore = {};
-          termPrint('KV memory cleared.', 'success');
-          return;
-        }
-
-        if (action === 'help' || action === 'h') {
-          termPrint('Commands:', 'info');
-          termPrint('  help              Show this message');
-          termPrint('  apps              List all apps with previews');
-          termPrint('  open <id>         Open app preview URL');
-          termPrint('  launch <id>       Launch app in new tab');
-          termPrint('  set <k> <v>       Store KV pair (session)');
-          termPrint('  get <k>           Retrieve KV value');
-          termPrint('  del <k>           Delete KV pair');
-          termPrint('  keys              List all KV keys');
-          termPrint('  clear_kv          Clear KV memory');
-          termPrint('  status            Server status');
-          termPrint('  clear             Clear terminal');
-          termPrint('  reload            Reload app list');
-          return;
-        }
-
-        if (action === 'clear') {
-          $('termOutput').innerHTML = '';
-          return;
-        }
-
-        if (action === 'status') {
-          termPrint('Server: ONLINE', 'success');
-          termPrint(`Apps cached: ${_appsCache.length}`);
-          const previewCount = _appsCache.filter(a => a.has_preview).length;
-          termPrint(`Apps with preview: ${previewCount}`);
-          return;
-        }
-
-        if (action === 'apps') {
-          const previewApps = _appsCache.filter(a => a.has_preview);
-          if (!previewApps.length) { termPrint('No apps with web preview.', 'warn'); return; }
-          previewApps.forEach(a => {
-            termPrint(`  ${a.app_id.substring(0, 8)}…  ${a.filename}`, 'info');
-          });
-          return;
-        }
-
-        if (action === 'reload') {
-          await renderMicrospaces();
-          termPrint('App list reloaded.', 'success');
-          return;
-        }
-
-        if (action === 'open' || action === 'launch') {
-          const id = parts[1];
-          if (!id) { termPrint('Usage: open <app-id>', 'err'); return; }
-          const app = _appsCache.find(a => a.app_id.startsWith(id) || a.app_id === id);
-          if (!app) { termPrint(`App not found: ${id}`, 'err'); return; }
-          const entryPath = app.preview_entry || '';
-          const url = entryPath ? `/api/preview/${app.app_id}/${entryPath}` : `/api/preview/${app.app_id}`;
-          if (action === 'launch') {
-            window.open(url, '_blank');
-            termPrint(`Launched ${app.filename} in new tab.`, 'success');
-          } else {
-            termPrint(`Preview URL: ${window.location.origin}${url}`, 'info');
-          }
-          return;
-        }
-
-        termPrint(`Unknown command: ${action}. Type 'help' for commands.`, 'err');
-      }
-
-      // ─── Landing Carousel ───────────────────────────────────
-      let _currentSlide = 0;
-      const _slideInterval = 40000; // 40 seconds
-      let _slideTimer = null;
-      let _timerStart = 0;
-
-      function goToSlide(idx) {
-        const slides = document.querySelectorAll('.landing-slide');
-        const dots = document.querySelectorAll('.landing-dot');
-        slides.forEach((s, i) => s.classList.toggle('active', i === idx));
-        dots.forEach((d, i) => d.classList.toggle('active', i === idx));
-        _currentSlide = idx;
-        _timerStart = Date.now();
-      }
-
-      function nextSlide() {
-        const total = document.querySelectorAll('.landing-slide').length;
-        goToSlide((_currentSlide + 1) % total);
-      }
-
-      function startCarousel() {
-        if (_slideTimer) clearInterval(_slideTimer);
-        _timerStart = Date.now();
-        _slideTimer = setInterval(nextSlide, _slideInterval);
-        animateTimerBar();
-      }
-
-      function animateTimerBar() {
-        const fill = $('landingTimerFill');
-        if (!fill) return;
-        function tick() {
-          if (!_timerStart) return;
-          const elapsed = Date.now() - _timerStart;
-          const pct = Math.min((elapsed / _slideInterval) * 100, 100);
-          fill.style.width = pct + '%';
-          if (pct < 100) requestAnimationFrame(tick);
-        }
-        requestAnimationFrame(tick);
-      }
-
-      // Pause carousel when user interacts, resume after
-      document.querySelectorAll('.landing-slide').forEach(s => {
-        s.addEventListener('mouseenter', () => { if (_slideTimer) clearInterval(_slideTimer); });
-        s.addEventListener('mouseleave', () => startCarousel());
-      });
-
-      startCarousel();
-
-      loadApps();
-    </script>
-  </div> <!-- /deployView -->
-  </div> <!-- /container -->
-
-  <!-- ─── Context Menu ─────────────────────────────────── -->
-  <div class="ctx-menu" id="ctxMenu">
-    <div class="ctx-menu-item" onclick="ctxOpenApp()">🚀 Open App</div>
-    <div class="ctx-menu-item" onclick="ctxLaunchNewTab()">↗ Open in New Tab</div>
-    <div class="ctx-menu-sep"></div>
-    <div class="ctx-menu-item" onclick="ctxCopyLink('app')">📋 Copy App Link</div>
-    <div class="ctx-menu-item" onclick="ctxCopyLink('preview')">🌐 Copy Preview Link</div>
-    <div class="ctx-menu-item" onclick="ctxCopyLink('download')">⬇ Copy Download Link</div>
-    <div class="ctx-menu-sep"></div>
-    <div class="ctx-menu-item" onclick="ctxCopyId()"># Copy App ID</div>
   </div>
-</body>
 
-</html>
+  <div class="apps-grid" id="apps-grid"></div>
+</section>
+
+<div class="modal-overlay" id="modal-overlay" onclick="if(event.target===this)closeModal()">
+  <div class="modal"><span class="close" onclick="closeModal()">&times;</span><h2 id="modal-title">Details</h2><div id="modal-body"></div></div>
+</div>
+
+<footer>
+  LocalSpace Deployer — DMG, GGUF, Sites & Inference on Hugging Face Spaces<br>
+  <a href="https://huggingface.co/spaces/josephrw/localspace-deployer" target="_blank">huggingface.co/spaces/josephrw/localspace-deployer</a>
+</footer>
+
+<script>
+let apps = [];
+let loadedModelId = null;
+
+document.addEventListener('DOMContentLoaded', () => { loadApps(); setupDropzones(); checkInference(); });
+
+function switchTab(e, name) {
+  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+  document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+  e.target.classList.add('active');
+  document.getElementById('tab-' + name).classList.add('active');
+}
+
+function setupDropzones() {
+  setupDropzone('dropzone', 'file-input', uploadDmgGguf);
+  setupDropzone('site-dropzone', 'site-file-input', uploadSite);
+  setupDropzone('chatgpt-dropzone', 'chatgpt-file-input', uploadChatGpt);
+}
+function setupDropzone(dzId, inputId, handler) {
+  const dz = document.getElementById(dzId); const input = document.getElementById(inputId);
+  if (!dz || !input) return;
+  dz.addEventListener('click', () => input.click());
+  input.addEventListener('change', e => { if (e.target.files[0]) handler(e.target.files[0]); });
+  dz.addEventListener('dragover', e => { e.preventDefault(); dz.classList.add('drag'); });
+  dz.addEventListener('dragleave', () => dz.classList.remove('drag'));
+  dz.addEventListener('drop', e => { e.preventDefault(); dz.classList.remove('drag'); if (e.dataTransfer.files[0]) handler(e.dataTransfer.files[0]); });
+}
+
+function uploadFile(file, url, progId, barId, statusId, okMsg) {
+  const prog = document.getElementById(progId); const bar = document.getElementById(barId); const status = document.getElementById(statusId);
+  prog.classList.add('active'); bar.style.width = '0%'; status.textContent = `Uploading ${file.name}...`;
+  const fd = new FormData(); fd.append('file', file);
+  const xhr = new XMLHttpRequest(); xhr.open('POST', url);
+  xhr.upload.onprogress = e => { if (e.lengthComputable) { const pct = Math.round((e.loaded/e.total)*100); bar.style.width = pct+'%'; status.textContent = `Uploading ${file.name}... ${pct}%`; } };
+  xhr.onload = () => {
+    if (xhr.status === 201) { const d = JSON.parse(xhr.responseText); status.textContent = `✓ ${d.message||okMsg}`; bar.style.width = '100%'; setTimeout(() => prog.classList.remove('active'), 2500); loadApps(); }
+    else { let m='Upload failed'; try{m=JSON.parse(xhr.responseText).error||m;}catch{} status.textContent = `✗ ${m}`; setTimeout(() => prog.classList.remove('active'), 4000); }
+  };
+  xhr.onerror = () => { status.textContent = '✗ Network error'; setTimeout(() => prog.classList.remove('active'), 3000); };
+  xhr.send(fd);
+}
+function uploadDmgGguf(f) { const e=f.name.toLowerCase().split('.').pop(); if(e!=='dmg'&&e!=='gguf'){alert('Only .dmg and .gguf');return;} uploadFile(f,'/api/upload','upload-progress','upload-bar','upload-status','Uploaded.'); }
+function uploadSite(f) { if(!f.name.toLowerCase().endsWith('.zip')){alert('Only .zip');return;} uploadFile(f,'/api/deploy-site','site-upload-progress','site-upload-bar','site-upload-status','Site deployed.'); }
+function uploadChatGpt(f) { const e=f.name.toLowerCase().split('.').pop(); if(e!=='json'&&e!=='zip'){alert('Only .json or .zip');return;} uploadFile(f,'/api/import/chatgpt','chatgpt-upload-progress','chatgpt-upload-bar','chatgpt-upload-status','dApp deployed.'); }
+
+async function loadApps() {
+  try { const r = await fetch('/api/apps'); const d = await r.json(); apps = d.apps||[]; renderApps(); updateModelSelect(); } catch(e) { console.error(e); }
+}
+function renderApps() {
+  const g = document.getElementById('apps-grid'); const c = document.getElementById('app-count');
+  c.textContent = `${apps.length} artifact${apps.length!==1?'s':''}`;
+  if (!apps.length) { g.innerHTML = `<div class="empty" style="grid-column:1/-1"><div class="icon">📦</div><div>No artifacts yet. Upload something to get started.</div></div>`; return; }
+  g.innerHTML = apps.map(renderCard).join('');
+}
+function renderCard(a) {
+  const t = a.file_type||'dmg';
+  const tc = ['dmg','gguf','webapp','site','chatgpt'].includes(t)?t:'dmg';
+  const tl = {dmg:'DMG',gguf:'GGUF',webapp:'WEB APP',site:'SITE',chatgpt:'CHATGPT'}[t]||t.toUpperCase();
+  const ok = a.opened||a.is_webapp;
+  const st = a.opened ? (t==='gguf'?'Inspected':'Opened') : (a.is_webapp?'Packaged':(a.error||'Failed'));
+  const sc = ok?'ok':'err';
+  let det = '';
+  if (t==='dmg'&&a.apps&&a.apps.length) { const app=a.apps[0]; det=`<div class="card-details"><div class="detail-row"><span>Bundle</span><strong>${esc(app.bundle_name||'—')}</strong></div><div class="detail-row"><span>Bundle ID</span><strong>${esc(app.bundle_id||'—')}</strong></div><div class="detail-row"><span>Version</span><strong>${esc(app.version||'—')}</strong></div><div class="detail-row"><span>Files</span><strong>${app.file_count||0}</strong></div></div>`; }
+  if (t==='site') { det=`<div class="card-details"><div class="detail-row"><span>Files</span><strong>${a.file_count||0}</strong></div><div class="detail-row"><span>Total size</span><strong>${a.total_size_human||'—'}</strong></div><div class="detail-row"><span>Index</span><strong>${esc(a.index_file||'index.html')}</strong></div></div>`; }
+  if (t==='chatgpt') { det=`<div class="card-details"><div class="detail-row"><span>Conversations</span><strong>${a.conversation_count||0}</strong></div><div class="detail-row"><span>Messages</span><strong>${a.total_messages||0}</strong></div></div>`; }
+  let gm = '';
+  if (t==='gguf'&&a.gguf&&a.gguf.valid) { const g=a.gguf; const mr=Object.entries(g.metadata||{}).slice(0,15).map(([k,v])=>`<div class="meta-row"><span>${esc(k)}</span><strong>${esc(String(v.value)).substring(0,60)}</strong></div>`).join(''); gm=`<div class="gguf-meta"><div class="meta-row"><span>Architecture</span><strong>${esc(g.architecture||'—')}</strong></div><div class="meta-row"><span>Version</span><strong>GGUF v${g.version}</strong></div><div class="meta-row"><span>Tensors</span><strong>${g.tensor_count}</strong></div><div class="meta-row"><span>KV pairs</span><strong>${g.kv_count}</strong></div>${g.context_length?`<div class="meta-row"><span>Context</span><strong>${g.context_length}</strong></div>`:''}${mr}</div>`; }
+  let pl = '';
+  if (a.has_preview) { if (t==='site') pl=`<a href="/site/${a.app_id}/" target="_blank">🌐 Visit</a>`; else if (t==='chatgpt') pl=`<a href="/dapp/${a.app_id}/" target="_blank">💬 Open dApp</a>`; else pl=`<a href="/app/${a.app_id}" target="_blank">▶ Preview</a>`; }
+  const dl=`<a href="/api/download/${a.app_id}" download>⬇ Download</a>`;
+  const db=(t==='dmg'||t==='gguf'||t==='site')?`<button onclick="showDetails('${a.app_id}')">📋 Details</button>`:'';
+  const lb=(t==='gguf')?`<button onclick="loadModelById('${a.app_id}')">🧠 Load</button>`:'';
+  const xb=`<button class="danger" onclick="deleteApp('${a.app_id}')">🗑 Delete</button>`;
+  return `<div class="app-card"><div class="card-header"><div class="card-title">${esc(a.filename||a.app_name||'Unknown')}</div><div class="card-type ${tc}">${tl}</div></div><div class="card-meta"><span>📏 ${a.size_human||formatBytes(a.size)}</span><span>🕐 ${timeAgo(a.created_at)}</span></div><div class="card-status ${sc}"><span class="dot"></span>${esc(st)}</div>${det}${gm}<div class="card-actions">${pl}${dl}${lb}${db}${xb}</div></div>`;
+}
+
+async function checkInference() {
+  try {
+    const r = await fetch('/api/inference/status'); const d = await r.json();
+    const dot = document.getElementById('inf-dot'); const txt = document.getElementById('inf-status-text'); const hint = document.getElementById('inf-hint');
+    if (d.available) { dot.className='dot on'; txt.textContent=`Inference available — ${d.loaded_models} model(s) loaded`; hint.textContent='Select a GGUF model and click Load Model.'; }
+    else { dot.className='dot off'; txt.textContent='Inference unavailable — llama-cpp-python not installed'; hint.textContent='Add llama-cpp-python to requirements.txt to enable inference.'; }
+    updateModelSelect();
+  } catch(e) { document.getElementById('inf-dot').className='dot off'; document.getElementById('inf-status-text').textContent='Failed to check'; }
+}
+function updateModelSelect() {
+  const sel = document.getElementById('inf-model-select'); if (!sel) return;
+  const gguf = apps.filter(a => a.file_type==='gguf');
+  sel.innerHTML = '<option value="">Select a GGUF model...</option>' + gguf.map(a => `<option value="${a.app_id}">${esc(a.filename)}</option>`).join('');
+}
+async function loadModelById(appId) {
+  try { const r = await fetch(`/api/inference/load/${appId}`, { method: 'POST' }); const d = await r.json();
+    if (r.ok) { loadedModelId = appId; document.getElementById('inf-model-select').value = appId; document.getElementById('inf-chat-input').disabled = false; document.getElementById('inf-send-btn').disabled = false; document.getElementById('inf-chat-box').innerHTML = `<div style="color:var(--green);text-align:center;padding:20px">✓ ${d.message}</div>`; }
+    else { alert(d.error||'Failed to load'); }
+  } catch(e) { alert('Error: '+e.message); }
+}
+async function loadModel() { const sel = document.getElementById('inf-model-select'); if (!sel.value) { alert('Select a model'); return; } await loadModelById(sel.value); }
+async function sendChat() {
+  const inp = document.getElementById('inf-chat-input'); const msg = inp.value.trim(); if (!msg||!loadedModelId) return;
+  inp.value = ''; const box = document.getElementById('inf-chat-box');
+  box.innerHTML += `<div class="chat-msg"><div class="role user">You</div><div class="bubble">${esc(msg)}</div></div>`; box.scrollTop = box.scrollHeight;
+  const btn = document.getElementById('inf-send-btn'); btn.disabled = true; btn.innerHTML = '<span class="spinner"></span>';
+  try { const r = await fetch(`/api/inference/chat/${loadedModelId}`, { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ messages: [{role:'user',content:msg}], max_tokens: 512 }) });
+    const d = await r.json();
+    if (r.ok && d.choices && d.choices[0]) { box.innerHTML += `<div class="chat-msg"><div class="role assistant">Assistant</div><div class="bubble">${esc(d.choices[0].message.content)}</div></div>`; }
+    else { box.innerHTML += `<div class="chat-msg"><div class="role assistant">Error</div><div class="bubble">${esc(d.error||'Failed')}</div></div>`; }
+    box.scrollTop = box.scrollHeight;
+  } catch(e) { box.innerHTML += `<div class="chat-msg"><div class="role assistant">Error</div><div class="bubble">${esc(e.message)}</div></div>`; }
+  btn.disabled = false; btn.textContent = 'Send';
+}
+
+async function createWebapp() {
+  const url = document.getElementById('webapp-url').value.trim(); const name = document.getElementById('webapp-name').value.trim()||'WebApp'; const btn = document.getElementById('webapp-btn');
+  if (!url) { alert('URL required'); return; }
+  btn.disabled = true; btn.innerHTML = '<span class="spinner"></span> Creating...';
+  try { const r = await fetch('/api/create-webapp', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ url, app_name: name }) });
+    const d = await r.json(); if (r.ok) { document.getElementById('webapp-url').value=''; document.getElementById('webapp-name').value=''; loadApps(); } else { alert(d.error||'Failed'); }
+  } catch(e) { alert('Error: '+e.message); }
+  btn.disabled = false; btn.textContent = 'Create App';
+}
+
+function showDetails(appId) { const a = apps.find(x=>x.app_id===appId); if(!a) return; document.getElementById('modal-title').textContent = a.filename||a.app_name||'Details';
+  let b=''; if (a.gguf) b=`<pre>${esc(JSON.stringify(a.gguf,null,2))}</pre>`; else if (a.apps&&a.apps.length) b=`<pre>${esc(JSON.stringify(a.apps,null,2))}</pre>`; else if (a.tree) b=`<pre>${esc(JSON.stringify(a.tree,null,2))}</pre>`; else b=`<pre>${esc(JSON.stringify(a,null,2))}</pre>`;
+  document.getElementById('modal-body').innerHTML = b; document.getElementById('modal-overlay').classList.add('active');
+}
+function closeModal() { document.getElementById('modal-overlay').classList.remove('active'); }
+async function deleteApp(appId) { if(!confirm('Delete?')) return; try { await fetch(`/api/apps/${appId}`,{method:'DELETE'}); loadApps(); } catch(e) { alert('Failed: '+e.message); } }
+
+function esc(s) { if(!s) return ''; return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
+function formatBytes(n) { if(!n) return '0 B'; const u=['B','KB','MB','GB','TB']; let i=0; while(n>=1024&&i<u.length-1){n/=1024;i++;} return n.toFixed(1)+' '+u[i]; }
+function timeAgo(ts) { if(!ts) return '—'; const d=Date.now()/1000-ts; if(d<60) return 'just now'; if(d<3600) return Math.floor(d/60)+'m ago'; if(d<86400) return Math.floor(d/3600)+'h ago'; return Math.floor(d/86400)+'d ago'; }
+</script>
+</body>
+</html>