chore: sync installer from monorepo

app.py

@@ -1,566 +1,368 @@
 """
-HomePilot Installer — Enterprise Edition
-
-Premium installer wizard that deploys HomePilot into a user's own
-private HF Space. Design language matches ruslanmv.com/HomePilot:
-dark theme, cyan→blue→purple gradients, glass cards, smooth transitions.
+HomePilot Installer — Enterprise Edition v2
+
+Conversion-optimized installer following enterprise UX best practices:
+  1. Lead with outcome, not setup
+  2. Progressive disclosure (show value before asking credentials)
+  3. One clear CTA
+  4. Trust signals
+  5. Branding consistency with ruslanmv.com/HomePilot
 """
 
-import json
 import os
 import shutil
 import subprocess
 import tempfile
-from pathlib import Path
 
 import gradio as gr
 
 TEMPLATE_REPO = os.environ.get("TEMPLATE_REPO", "ruslanmv/HomePilot")
 
-# ── Persona data ─────────────────────────────────────────
-
-PERSONAS = {
-    "starter": [
-        ("🌙", "LunaLite", "Soft Greeter"),
-        ("😎", "ChillBro", "Casual Regular"),
-        ("🔍", "Curiosa", "Question Driver"),
-        ("⚡", "HypeKid", "Reaction Engine"),
-    ],
-    "retro": [
-        ("🔋", "VoltBuddy", "Electric Companion"),
-        ("⚔️", "RoninZero", "Lone Warrior"),
-        ("🦖", "RivalKaiju", "Chaos Rival"),
-        ("💾", "Glitchbyte", "Digital Glitch"),
-        ("🗺️", "QuestKid", "Young Adventurer"),
-        ("🧠", "SigmaSage", "Quiet Strategist"),
-        ("🃏", "Wildcard", "Trickster"),
-        ("🌳", "OldRoot", "Ancient Mentor"),
-        ("🔮", "MorphlingX", "Transformer"),
-        ("🌌", "NovaVoid", "Cosmic Entity"),
-    ],
-}
-
-# ── CSS: HomePilot enterprise theme ──────────────────────
-
-CSS = """
-/* ── Base ── */
-:root {
-    --hp-bg: #09090b;
-    --hp-surface: #111113;
-    --hp-card: #161618;
-    --hp-border: rgba(255,255,255,0.06);
-    --hp-border-hover: rgba(255,255,255,0.14);
-    --hp-text: #e4e4e7;
-    --hp-muted: #71717a;
-    --hp-cyan: #06b6d4;
-    --hp-blue: #3b82f6;
-    --hp-purple: #8b5cf6;
-    --hp-gradient: linear-gradient(135deg, #06b6d4, #3b82f6, #8b5cf6);
-    --hp-glow: 0 0 24px rgba(59,130,246,0.15);
-    --hp-radius: 12px;
-}
-
-.gradio-container {
-    background: var(--hp-bg) !important;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
-    max-width: 900px !important;
-    margin: 0 auto !important;
-}
-
-/* Remove default Gradio chrome */
-.gradio-container .main, footer { background: transparent !important; }
-footer { display: none !important; }
-
-/* ── Hero ── */
-.hp-hero {
-    text-align: center;
-    padding: 56px 24px 40px;
-    position: relative;
-    overflow: hidden;
-}
-.hp-hero::before {
-    content: '';
-    position: absolute;
-    top: -40%;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 120%;
-    height: 100%;
-    background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(59,130,246,0.08), transparent);
-    pointer-events: none;
-}
-.hp-hero h1 {
-    font-size: clamp(2rem, 5vw, 2.8rem);
-    font-weight: 800;
-    letter-spacing: -0.03em;
-    line-height: 1.1;
-    margin: 0;
-    position: relative;
-}
-.hp-hero h1 .gradient-text {
-    background: var(--hp-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-.hp-hero .subtitle {
-    color: var(--hp-muted);
-    font-size: 15px;
-    font-weight: 500;
-    margin-top: 12px;
-    position: relative;
-}
-.hp-hero .badges {
-    display: flex;
-    justify-content: center;
-    gap: 8px;
-    margin-top: 20px;
-    flex-wrap: wrap;
-    position: relative;
-}
-.hp-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 14px;
-    border-radius: 999px;
-    font-size: 12px;
-    font-weight: 600;
-    letter-spacing: 0.02em;
-    border: 1px solid var(--hp-border);
-    background: var(--hp-surface);
-    color: var(--hp-text);
-    transition: all 0.2s;
-}
-.hp-badge:hover { border-color: var(--hp-border-hover); }
-.hp-badge .dot {
-    width: 6px; height: 6px;
-    border-radius: 50%;
-    background: var(--hp-gradient);
-}
-
-/* ── Step cards ── */
-.hp-step {
-    background: var(--hp-card) !important;
-    border: 1px solid var(--hp-border) !important;
-    border-radius: var(--hp-radius) !important;
-    padding: 28px !important;
-    margin-bottom: 16px !important;
-    transition: border-color 0.2s !important;
-}
-.hp-step:hover { border-color: var(--hp-border-hover) !important; }
-.hp-step-header {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 16px;
-}
-.hp-step-num {
-    width: 32px; height: 32px;
-    border-radius: 10px;
-    background: var(--hp-gradient);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 14px;
-    font-weight: 800;
-    color: white;
-    flex-shrink: 0;
-}
-.hp-step-title {
-    font-size: 17px;
-    font-weight: 700;
-    color: var(--hp-text);
-    letter-spacing: -0.01em;
-}
-.hp-step-desc {
-    font-size: 13px;
-    color: var(--hp-muted);
-    margin-top: 2px;
-}
-
-/* ── Inputs ── */
-.hp-step input, .hp-step textarea {
-    background: var(--hp-bg) !important;
-    border: 1px solid var(--hp-border) !important;
-    border-radius: 10px !important;
-    color: var(--hp-text) !important;
-    font-size: 15px !important;
-    padding: 12px 16px !important;
-    transition: border-color 0.2s !important;
-}
-.hp-step input:focus, .hp-step textarea:focus {
-    border-color: var(--hp-blue) !important;
-    box-shadow: 0 0 0 3px rgba(59,130,246,0.1) !important;
-}
-.hp-step label { color: var(--hp-muted) !important; font-weight: 600 !important; font-size: 13px !important; }
-
-/* ── Persona grid ── */
-.hp-personas {
-    background: var(--hp-card);
-    border: 1px solid var(--hp-border);
-    border-radius: var(--hp-radius);
-    padding: 24px;
-    margin-top: 16px;
-}
-.hp-personas-title {
-    font-size: 14px;
-    font-weight: 700;
-    color: var(--hp-text);
-    margin-bottom: 4px;
-}
-.hp-personas-sub {
-    font-size: 12px;
-    color: var(--hp-muted);
-    margin-bottom: 16px;
-}
-.hp-pack-label {
-    font-size: 10px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    color: var(--hp-muted);
-    margin-bottom: 8px;
-    margin-top: 16px;
-}
-.hp-pack-label:first-child { margin-top: 0; }
-.hp-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-    gap: 8px;
-}
-.hp-chip {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 12px;
-    border-radius: 10px;
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--hp-text);
-    background: var(--hp-bg);
-    border: 1px solid var(--hp-border);
-    transition: all 0.2s;
-    white-space: nowrap;
-    overflow: hidden;
-}
-.hp-chip:hover {
-    border-color: var(--hp-border-hover);
-    transform: translateY(-1px);
-}
-.hp-chip .emoji { font-size: 14px; }
-
-/* ── Install button ── */
-.hp-install-btn {
-    background: var(--hp-gradient) !important;
-    border: none !important;
-    border-radius: 12px !important;
-    color: white !important;
-    font-size: 16px !important;
-    font-weight: 700 !important;
-    letter-spacing: -0.01em !important;
-    padding: 14px 32px !important;
-    cursor: pointer !important;
-    box-shadow: var(--hp-glow) !important;
-    transition: all 0.2s !important;
-    width: 100% !important;
-}
-.hp-install-btn:hover {
-    transform: translateY(-1px) !important;
-    box-shadow: 0 0 32px rgba(59,130,246,0.25) !important;
-}
-
-/* ── Log output ── */
-.hp-log {
-    background: var(--hp-bg) !important;
-    border: 1px solid var(--hp-border) !important;
-    border-radius: var(--hp-radius) !important;
-    padding: 20px !important;
-    font-family: 'SF Mono', 'Fira Code', monospace !important;
-    font-size: 13px !important;
-    line-height: 1.7 !important;
-    color: var(--hp-text) !important;
-    min-height: 60px !important;
-}
-
-/* ── Footer ── */
-.hp-footer {
-    text-align: center;
-    padding: 32px 16px;
-    border-top: 1px solid var(--hp-border);
-    margin-top: 32px;
-}
-.hp-footer p { color: var(--hp-muted); font-size: 12px; margin: 4px 0; }
-.hp-footer a { color: var(--hp-blue); text-decoration: none; }
-.hp-footer a:hover { color: var(--hp-cyan); }
-"""
-
 # ── Core functions ───────────────────────────────────────
 
-
-def validate_token(token: str) -> tuple[str, str, str]:
+def validate_token(token: str):
     if not token or len(token) < 10:
-        return "error", "", "Token vacío o inválido"
+        return "❌ Ingresa un token válido", ""
     try:
         import requests
-        r = requests.get(
-            "https://huggingface.co/api/whoami-v2",
-            headers={"Authorization": f"Bearer {token}"},
-            timeout=10,
-        )
+        r = requests.get("https://huggingface.co/api/whoami-v2",
+                         headers={"Authorization": f"Bearer {token}"}, timeout=10)
         if r.ok:
             name = r.json().get("name", "")
-            return "ok", name, f"Autenticado como **{name}**"
-        return "error", "", f"Token rechazado (HTTP {r.status_code})"
+            return f"✅ Conectado como **{name}**", name
+        return f"❌ Token rechazado (HTTP {r.status_code})", ""
     except Exception as e:
-        return "error", "", f"Error de conexión: {e}"
+        return f"❌ Error: {e}", ""
 
 
 def install_space(token, username, space_name, private, model):
     if not username:
-        yield "⚠️ Primero verifica tu token en el Paso 1"
+        yield "⚠️ Conecta tu cuenta primero (Paso 1)"
         return
 
     repo_id = f"{username}/{space_name}"
     lines = []
-
     def log(msg):
         lines.append(msg)
         return "\n".join(lines)
 
-    yield log(f"▸ Creando Space **{repo_id}**...")
+    yield log(f"▸ Creando **{repo_id}**...")
 
     try:
         import requests
-
         r = requests.post(
             "https://huggingface.co/api/repos/create",
             headers={"Authorization": f"Bearer {token}", "Content-Type": "application/json"},
             json={"type": "space", "name": space_name, "private": private, "sdk": "docker"},
-            timeout=30,
-        )
+            timeout=30)
         if r.ok:
-            yield log("✓ Space creado")
+            yield log("✅ Space creado")
         elif r.status_code == 409:
-            yield log("✓ Space ya existe — actualizando")
+            yield log("✅ Space existente — actualizando")
         else:
-            yield log(f"✗ Error: {r.status_code} {r.text[:200]}")
+            yield log(f"❌ Error: {r.text[:200]}")
             return
 
-        yield log("▸ Clonando template HomePilot...")
-
-        with tempfile.TemporaryDirectory() as tmpdir:
+        yield log("▸ Descargando HomePilot...")
+        with tempfile.TemporaryDirectory() as tmp:
             remote = f"https://user:{token}@huggingface.co/spaces/{repo_id}"
-            template_remote = f"https://user:{token}@huggingface.co/spaces/{TEMPLATE_REPO}"
-
-            subprocess.run(
-                ["git", "-c", "credential.helper=", "clone", "--depth", "1",
-                 template_remote, f"{tmpdir}/template"],
-                capture_output=True, timeout=60,
-            )
+            tpl_remote = f"https://user:{token}@huggingface.co/spaces/{TEMPLATE_REPO}"
 
-            clone = subprocess.run(
-                ["git", "-c", "credential.helper=", "clone", "--depth", "1",
-                 remote, f"{tmpdir}/space"],
-                capture_output=True, timeout=30,
-            )
+            subprocess.run(["git", "-c", "credential.helper=", "clone", "--depth", "1",
+                            tpl_remote, f"{tmp}/tpl"], capture_output=True, timeout=60)
+            clone = subprocess.run(["git", "-c", "credential.helper=", "clone", "--depth", "1",
+                                    remote, f"{tmp}/sp"], capture_output=True, timeout=30)
             if clone.returncode != 0:
-                os.makedirs(f"{tmpdir}/space", exist_ok=True)
-                subprocess.run(["git", "init", "-b", "main", f"{tmpdir}/space"], capture_output=True)
-                subprocess.run(["git", "-C", f"{tmpdir}/space", "remote", "add", "origin", remote], capture_output=True)
+                os.makedirs(f"{tmp}/sp", exist_ok=True)
+                subprocess.run(["git", "init", "-b", "main", f"{tmp}/sp"], capture_output=True)
+                subprocess.run(["git", "-C", f"{tmp}/sp", "remote", "add", "origin", remote], capture_output=True)
 
-            space_dir = f"{tmpdir}/space"
-            for item in Path(space_dir).iterdir():
+            from pathlib import Path
+            sp = Path(f"{tmp}/sp")
+            for item in sp.iterdir():
                 if item.name != ".git":
                     shutil.rmtree(item) if item.is_dir() else item.unlink()
 
-            yield log("▸ Copiando archivos...")
-            for item in Path(f"{tmpdir}/template").iterdir():
-                if item.name == ".git":
-                    continue
-                dest = Path(space_dir) / item.name
+            yield log("▸ Configurando...")
+            for item in Path(f"{tmp}/tpl").iterdir():
+                if item.name == ".git": continue
+                dest = sp / item.name
                 shutil.copytree(item, dest) if item.is_dir() else shutil.copy2(item, dest)
 
-            start_sh = Path(space_dir) / "start.sh"
-            if start_sh.exists():
-                content = start_sh.read_text()
-                content = content.replace("OLLAMA_MODEL=${OLLAMA_MODEL:-qwen2.5:1.5b}",
-                                          f"OLLAMA_MODEL=${{OLLAMA_MODEL:-{model}}}")
-                start_sh.write_text(content)
+            start = sp / "start.sh"
+            if start.exists():
+                start.write_text(start.read_text().replace(
+                    "OLLAMA_MODEL=${OLLAMA_MODEL:-qwen2.5:1.5b}",
+                    f"OLLAMA_MODEL=${{OLLAMA_MODEL:-{model}}}"))
 
             yield log(f"▸ Modelo: **{model}**")
-            yield log("▸ Subiendo a Hugging Face...")
+            yield log("▸ Subiendo...")
 
-            subprocess.run(["git", "lfs", "install", "--local"], capture_output=True, cwd=space_dir)
+            subprocess.run(["git", "lfs", "install", "--local"], capture_output=True, cwd=str(sp))
             subprocess.run(["git", "lfs", "track", "*.hpersona", "*.png", "*.webp"],
-                           capture_output=True, cwd=space_dir)
-            subprocess.run(["git", "-C", space_dir, "-c", "user.email=installer@homepilot.dev",
-                            "-c", "user.name=HomePilot Installer", "add", "-A"],
-                           capture_output=True, timeout=30)
-            subprocess.run(["git", "-C", space_dir, "-c", "user.email=installer@homepilot.dev",
-                            "-c", "user.name=HomePilot Installer", "commit", "-m",
-                            f"HomePilot installed ({model})"],
+                           capture_output=True, cwd=str(sp))
+            subprocess.run(["git", "-C", str(sp), "-c", "user.email=i@hp.dev",
+                            "-c", "user.name=HP", "add", "-A"], capture_output=True, timeout=30)
+            subprocess.run(["git", "-C", str(sp), "-c", "user.email=i@hp.dev",
+                            "-c", "user.name=HP", "commit", "-m", f"HomePilot ({model})"],
                            capture_output=True, timeout=30)
-            push = subprocess.run(
-                ["git", "-C", space_dir, "push", "--force", remote, "HEAD:main"],
-                capture_output=True, text=True, timeout=120,
-            )
-
-            if push.returncode == 0:
-                yield log("✓ Subido exitosamente")
-            else:
-                yield log(f"✗ Push error: {push.stderr[:300]}")
+            push = subprocess.run(["git", "-C", str(sp), "push", "--force", remote, "HEAD:main"],
+                                  capture_output=True, text=True, timeout=120)
+            if push.returncode != 0:
+                yield log(f"❌ {push.stderr[:200]}")
                 return
 
-        space_url = f"https://huggingface.co/spaces/{repo_id}"
-        yield log(f"""
-✓ **Instalación completa**
+        url = f"https://huggingface.co/spaces/{repo_id}"
+        yield log(f"""✅ **¡Listo!**
 
-Tu HomePilot está en: [{repo_id}]({space_url})
+🔗 Tu HomePilot: [{repo_id}]({url})
 
 **Próximos pasos:**
-1. Ve a **Settings → Hardware** y selecciona GPU (opcional)
-2. Espera ~3 min para el primer arranque
-3. El modelo se descarga automáticamente
-
-**14 Chata personas** listas para usar.""")
-
+1. Espera ~3 min para el build
+2. El modelo se descarga automáticamente
+3. 14 personas AI listas para usar""")
     except Exception as e:
-        yield log(f"✗ Error: {e}")
-
+        yield log(f"❌ {e}")
 
-# ── Build personas HTML ──────────────────────────────────
 
-def _persona_html():
-    parts = ['<div class="hp-personas">']
-    parts.append('<div class="hp-personas-title">Personas pre-instaladas</div>')
-    parts.append('<div class="hp-personas-sub">14 AI personas de Chata — se importan automáticamente al iniciar</div>')
+# ── UI ───────────────────────────────────────────────────
 
-    parts.append('<div class="hp-pack-label">Starter Pack</div>')
-    parts.append('<div class="hp-grid">')
-    for emoji, name, _ in PERSONAS["starter"]:
-        parts.append(f'<div class="hp-chip"><span class="emoji">{emoji}</span>{name}</div>')
-    parts.append('</div>')
+CSS = """
+/* Force dark theme on everything */
+.gradio-container, .gradio-container .main { background: #09090b !important; }
+footer { display: none !important; }
 
-    parts.append('<div class="hp-pack-label">Retro Pack</div>')
-    parts.append('<div class="hp-grid">')
-    for emoji, name, _ in PERSONAS["retro"]:
-        parts.append(f'<div class="hp-chip"><span class="emoji">{emoji}</span>{name}</div>')
-    parts.append('</div>')
+/* Fix Gradio Group cards to dark */
+.gradio-container .gr-group, .gradio-container .gr-box,
+.gradio-container .group, .gradio-container [class*="group"] {
+    background: #111113 !important;
+    border-color: rgba(255,255,255,0.08) !important;
+}
 
-    parts.append('</div>')
-    return "\n".join(parts)
+/* Fix all inputs to dark */
+.gradio-container input, .gradio-container textarea, .gradio-container select,
+.gradio-container .wrap, .gradio-container .input-wrap {
+    background: #09090b !important;
+    border-color: rgba(255,255,255,0.1) !important;
+    color: #e4e4e7 !important;
+}
+.gradio-container label, .gradio-container .label-wrap {
+    color: #a1a1aa !important;
+}
 
+/* Fix checkbox */
+.gradio-container input[type="checkbox"] {
+    accent-color: #3b82f6 !important;
+}
 
-# ── Gradio UI ────────────────────────────────────────────
+/* Dropdown */
+.gradio-container .dropdown-arrow { color: #71717a !important; }
+.gradio-container ul[role="listbox"] {
+    background: #161618 !important;
+    border-color: rgba(255,255,255,0.1) !important;
+}
+.gradio-container ul[role="listbox"] li {
+    color: #e4e4e7 !important;
+}
+.gradio-container ul[role="listbox"] li:hover {
+    background: rgba(59,130,246,0.15) !important;
+}
+"""
 
 def build_ui():
-    with gr.Blocks(css=CSS, title="HomePilot Installer", theme=gr.themes.Soft(
-        primary_hue="blue", secondary_hue="purple", neutral_hue="zinc",
+    with gr.Blocks(css=CSS, title="HomePilot Installer", theme=gr.themes.Base(
+        primary_hue="blue", neutral_hue="zinc",
+    ).set(
+        body_background_fill="#09090b",
+        body_text_color="#e4e4e7",
+        block_background_fill="#111113",
+        block_border_color="rgba(255,255,255,0.08)",
+        input_background_fill="#09090b",
+        input_border_color="rgba(255,255,255,0.1)",
+        button_primary_background_fill="linear-gradient(135deg, #06b6d4, #3b82f6, #8b5cf6)",
+        button_primary_text_color="white",
+        button_primary_border_color="transparent",
     )) as app:
 
-        # ── Hero ──
+        # ── HERO: Lead with outcome ──
         gr.HTML("""
-        <div class="hp-hero">
-            <h1>🏠 <span class="gradient-text">HomePilot Installer</span></h1>
-            <p class="subtitle">Instala tu propio HomePilot con IA privada en Hugging Face Spaces</p>
-            <div class="badges">
-                <span class="hp-badge"><span class="dot"></span>14 Chata Personas</span>
-                <span class="hp-badge"><span class="dot"></span>Ollama Built-in</span>
-                <span class="hp-badge"><span class="dot"></span>GPU Ready</span>
-                <span class="hp-badge"><span class="dot"></span>Private Space</span>
+        <div style="text-align:center; padding:48px 20px 12px; position:relative;">
+            <div style="position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:120%;height:100%;
+                        background:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(59,130,246,0.1), transparent);
+                        pointer-events:none;"></div>
+            <div style="position:relative;">
+                <p style="font-size:48px; margin:0; line-height:1;">🏠</p>
+                <h1 style="font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; letter-spacing:-0.03em;
+                           margin:12px 0 0; line-height:1.15;">
+                    <span style="background:linear-gradient(135deg,#06b6d4,#3b82f6,#8b5cf6);
+                                 -webkit-background-clip:text;-webkit-text-fill-color:transparent;">
+                        Tu IA privada en 2 minutos
+                    </span>
+                </h1>
+                <p style="color:#71717a; font-size:15px; margin:10px auto 0; max-width:480px; line-height:1.5;">
+                    Despliega HomePilot con Ollama y 14 personas AI en tu propio
+                    Hugging Face Space. Sin código. Privado por defecto.
+                </p>
             </div>
         </div>
         """)
 
-        # ── Step 1: Auth ──
-        with gr.Group(elem_classes="hp-step"):
-            gr.HTML("""
-            <div class="hp-step-header">
-                <div class="hp-step-num">1</div>
-                <div>
-                    <div class="hp-step-title">Autenticación</div>
-                    <div class="hp-step-desc">Necesitas un <a href="https://huggingface.co/settings/tokens" target="_blank" style="color: var(--hp-blue)">token de HF</a> con permisos de write.</div>
+        # ── TRUST SIGNALS ──
+        gr.HTML("""
+        <div style="display:flex; justify-content:center; gap:24px; padding:20px 0 32px; flex-wrap:wrap;">
+            <div style="display:flex; align-items:center; gap:6px; color:#a1a1aa; font-size:13px; font-weight:500;">
+                <span style="color:#22c55e;">🔒</span> Privado por defecto
+            </div>
+            <div style="display:flex; align-items:center; gap:6px; color:#a1a1aa; font-size:13px; font-weight:500;">
+                <span style="color:#3b82f6;">🧠</span> Ollama integrado
+            </div>
+            <div style="display:flex; align-items:center; gap:6px; color:#a1a1aa; font-size:13px; font-weight:500;">
+                <span style="color:#8b5cf6;">⚡</span> GPU ready
+            </div>
+            <div style="display:flex; align-items:center; gap:6px; color:#a1a1aa; font-size:13px; font-weight:500;">
+                <span style="color:#f59e0b;">🎭</span> 14 personas
+            </div>
+        </div>
+        """)
+
+        # ── STEP 1: Connect ──
+        gr.HTML("""
+        <div style="display:flex; align-items:center; gap:10px; padding:0 4px 8px;">
+            <div style="width:28px;height:28px;border-radius:8px;
+                        background:linear-gradient(135deg,#06b6d4,#3b82f6);
+                        display:flex;align-items:center;justify-content:center;
+                        font-size:13px;font-weight:800;color:white;flex-shrink:0;">1</div>
+            <div>
+                <div style="font-size:15px;font-weight:700;color:#e4e4e7;">Conecta tu cuenta</div>
+                <div style="font-size:12px;color:#71717a;">
+                    Solo necesitamos un <a href="https://huggingface.co/settings/tokens" target="_blank"
+                    style="color:#3b82f6;text-decoration:none;">token de HF</a> con permiso write.
+                    No almacenamos credenciales.
                 </div>
             </div>
-            """)
+        </div>
+        """)
+        with gr.Group():
             with gr.Row():
-                token_input = gr.Textbox(label="HF Token", placeholder="hf_...", type="password", scale=3)
-                verify_btn = gr.Button("Verificar", variant="primary", scale=1)
+                token_input = gr.Textbox(label="Token", placeholder="hf_...", type="password", scale=3)
+                verify_btn = gr.Button("Conectar", variant="primary", scale=1)
             auth_status = gr.Markdown("")
             username_state = gr.State("")
 
-        # ── Step 2: Config ──
-        with gr.Group(elem_classes="hp-step"):
-            gr.HTML("""
-            <div class="hp-step-header">
-                <div class="hp-step-num">2</div>
-                <div>
-                    <div class="hp-step-title">Configuración</div>
-                    <div class="hp-step-desc">Personaliza tu instalación</div>
-                </div>
+        gr.HTML('<div style="height:16px"></div>')
+
+        # ── STEP 2: Configure ──
+        gr.HTML("""
+        <div style="display:flex; align-items:center; gap:10px; padding:0 4px 8px;">
+            <div style="width:28px;height:28px;border-radius:8px;
+                        background:linear-gradient(135deg,#3b82f6,#8b5cf6);
+                        display:flex;align-items:center;justify-content:center;
+                        font-size:13px;font-weight:800;color:white;flex-shrink:0;">2</div>
+            <div>
+                <div style="font-size:15px;font-weight:700;color:#e4e4e7;">Configura</div>
+                <div style="font-size:12px;color:#71717a;">Todo tiene valores por defecto — solo cambia si quieres.</div>
             </div>
-            """)
+        </div>
+        """)
+        with gr.Group():
             with gr.Row():
-                space_name = gr.Textbox(label="Nombre del Space", value="HomePilot", scale=2)
+                space_name = gr.Textbox(label="Nombre", value="HomePilot", scale=2)
                 private_toggle = gr.Checkbox(label="Privado", value=True, scale=1)
             model_choice = gr.Dropdown(
-                label="Modelo LLM",
+                label="Modelo",
                 choices=[
-                    ("Qwen 2.5 1.5B (rápido, ligero)", "qwen2.5:1.5b"),
-                    ("Qwen 2.5 3B (mejor calidad)", "qwen2.5:3b"),
-                    ("Llama 3 8B (poderoso, necesita GPU)", "llama3:8b"),
-                    ("Gemma 2B (equilibrado)", "gemma:2b"),
-                    ("Phi 3 Mini (compacto)", "phi3:mini"),
+                    ("Qwen 2.5 1.5B — rápido, ideal para empezar", "qwen2.5:1.5b"),
+                    ("Qwen 2.5 3B — mejor calidad", "qwen2.5:3b"),
+                    ("Llama 3 8B — poderoso (necesita GPU)", "llama3:8b"),
+                    ("Gemma 2B — equilibrado", "gemma:2b"),
                 ],
                 value="qwen2.5:1.5b",
             )
 
-        # ── Persona preview ──
-        gr.HTML(_persona_html())
-
-        # ── Step 3: Install ──
-        with gr.Group(elem_classes="hp-step"):
+        # ── PERSONAS PREVIEW (collapsed) ──
+        with gr.Accordion("🎭 14 personas AI incluidas", open=False):
             gr.HTML("""
-            <div class="hp-step-header">
-                <div class="hp-step-num">3</div>
-                <div>
-                    <div class="hp-step-title">Instalación</div>
-                    <div class="hp-step-desc">Un clic para desplegar tu HomePilot privado</div>
+            <div style="padding:8px 0;">
+                <p style="color:#71717a;font-size:12px;margin:0 0 12px;">
+                    Se importan automáticamente al iniciar. Listas para chatear.
+                </p>
+                <div style="display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px;">
+                    <span style="font-size:10px;font-weight:700;color:#71717a;text-transform:uppercase;
+                                 letter-spacing:0.05em;width:100%;margin-bottom:4px;">Starter Pack</span>
+                    <span style="padding:5px 10px;border-radius:8px;font-size:12px;font-weight:500;
+                                 color:#e4e4e7;background:#161618;border:1px solid rgba(255,255,255,0.06);">🌙 LunaLite</span>
+                    <span style="padding:5px 10px;border-radius:8px;font-size:12px;font-weight:500;
+                                 color:#e4e4e7;background:#161618;border:1px solid rgba(255,255,255,0.06);">😎 ChillBro</span>
+                    <span style="padding:5px 10px;border-radius:8px;font-size:12px;font-weight:500;
+                                 color:#e4e4e7;background:#161618;border:1px solid rgba(255,255,255,0.06);">🔍 Curiosa</span>
+                    <span style="padding:5px 10px;border-radius:8px;font-size:12px;font-weight:500;
+                                 color:#e4e4e7;background:#161618;border:1px solid rgba(255,255,255,0.06);">⚡ HypeKid</span>
+                </div>
+                <div style="display:flex;gap:4px;flex-wrap:wrap;">
+                    <span style="font-size:10px;font-weight:700;color:#71717a;text-transform:uppercase;
+                                 letter-spacing:0.05em;width:100%;margin-bottom:4px;">Retro Pack</span>
+                    <span style="padding:5px 10px;border-radius:8px;font-size:12px;font-weight:500;
+                                 color:#e4e4e7;background:#161618;border:1px solid rgba(255,255,255,0.06);">🔋 Volt</span>
+                    <span style="padding:5px 10px;border-radius:8px;font-size:12px;font-weight:500;
+                                 color:#e4e4e7;background:#161618;border:1px solid rgba(255,255,255,0.06);">⚔️ Ronin</span>
+                    <span style="padding:5px 10px;border-radius:8px;font-size:12px;font-weight:500;
+                                 color:#e4e4e7;background:#161618;border:1px solid rgba(255,255,255,0.06);">🦖 Kaiju</span>
+                    <span style="padding:5px 10px;border-radius:8px;font-size:12px;font-weight:500;
+                                 color:#e4e4e7;background:#161618;border:1px solid rgba(255,255,255,0.06);">💾 Glitch</span>
+                    <span style="padding:5px 10px;border-radius:8px;font-size:12px;font-weight:500;
+                                 color:#e4e4e7;background:#161618;border:1px solid rgba(255,255,255,0.06);">🗺️ Quest</span>
+                    <span style="padding:5px 10px;border-radius:8px;font-size:12px;font-weight:500;
+                                 color:#e4e4e7;background:#161618;border:1px solid rgba(255,255,255,0.06);">🧠 Sigma</span>
+                    <span style="padding:5px 10px;border-radius:8px;font-size:12px;font-weight:500;
+                                 color:#e4e4e7;background:#161618;border:1px solid rgba(255,255,255,0.06);">🃏 Loki</span>
+                    <span style="padding:5px 10px;border-radius:8px;font-size:12px;font-weight:500;
+                                 color:#e4e4e7;background:#161618;border:1px solid rgba(255,255,255,0.06);">🌳 OldRoot</span>
+                    <span style="padding:5px 10px;border-radius:8px;font-size:12px;font-weight:500;
+                                 color:#e4e4e7;background:#161618;border:1px solid rgba(255,255,255,0.06);">🔮 Morphling</span>
+                    <span style="padding:5px 10px;border-radius:8px;font-size:12px;font-weight:500;
+                                 color:#e4e4e7;background:#161618;border:1px solid rgba(255,255,255,0.06);">🌌 Nova</span>
                 </div>
             </div>
             """)
-            install_btn = gr.Button("Instalar HomePilot →", variant="primary",
-                                     size="lg", elem_classes="hp-install-btn")
-            install_log = gr.Markdown("", elem_classes="hp-log")
 
-        # ── Footer ──
+        gr.HTML('<div style="height:16px"></div>')
+
+        # ── STEP 3: Deploy ──
+        gr.HTML("""
+        <div style="display:flex; align-items:center; gap:10px; padding:0 4px 8px;">
+            <div style="width:28px;height:28px;border-radius:8px;
+                        background:linear-gradient(135deg,#8b5cf6,#ec4899);
+                        display:flex;align-items:center;justify-content:center;
+                        font-size:13px;font-weight:800;color:white;flex-shrink:0;">3</div>
+            <div>
+                <div style="font-size:15px;font-weight:700;color:#e4e4e7;">Despliega</div>
+                <div style="font-size:12px;color:#71717a;">Un clic. Tu HomePilot estará listo en ~3 minutos.</div>
+            </div>
+        </div>
+        """)
+        install_btn = gr.Button("🚀 Desplegar HomePilot", variant="primary", size="lg")
+        install_log = gr.Markdown("")
+
+        # ── FOOTER ──
         gr.HTML("""
-        <div class="hp-footer">
-            <p style="font-size: 13px; color: var(--hp-text); font-weight: 600;">HomePilot — Enterprise AI Assistant</p>
-            <p>
-                <a href="https://github.com/ruslanmv/HomePilot">GitHub</a> ·
-                <a href="https://huggingface.co/spaces/ruslanmv/HomePilot">Template</a> ·
-                <a href="https://huggingface.co/spaces/ruslanmv/Chata">Chata</a> ·
-                <a href="https://ruslanmv.com/HomePilot/">Web</a>
+        <div style="text-align:center; padding:40px 16px 20px; border-top:1px solid rgba(255,255,255,0.06); margin-top:32px;">
+            <p style="color:#52525b; font-size:12px; margin:0;">
+                <a href="https://ruslanmv.com/HomePilot/" style="color:#3b82f6;text-decoration:none;">HomePilot</a> ·
+                <a href="https://huggingface.co/spaces/ruslanmv/HomePilot" style="color:#3b82f6;text-decoration:none;">Template</a> ·
+                <a href="https://huggingface.co/spaces/ruslanmv/Chata" style="color:#3b82f6;text-decoration:none;">Chata</a> ·
+                <a href="https://github.com/ruslanmv/HomePilot" style="color:#3b82f6;text-decoration:none;">GitHub</a>
             </p>
         </div>
         """)
 
         # ── Events ──
-        def on_verify(token):
-            status, username, message = validate_token(token)
-            icon = "✓" if status == "ok" else "✗"
-            return f"{icon} {message}", username
-
-        verify_btn.click(fn=on_verify, inputs=[token_input], outputs=[auth_status, username_state])
+        verify_btn.click(fn=validate_token, inputs=[token_input], outputs=[auth_status, username_state])
         install_btn.click(fn=install_space,
                           inputs=[token_input, username_state, space_name, private_toggle, model_choice],
                           outputs=[install_log])
 
     return app
 
-
 if __name__ == "__main__":
     app = build_ui()
     app.launch(server_name="0.0.0.0", server_port=int(os.environ.get("PORT", "7860")), share=False)