Update app.py

app.py

@@ -1,126 +1,25 @@
 import os
 import json
-from datetime import datetime
-from typing import Any, Dict, List, Optional, Tuple
+import time
+from dataclasses import dataclass
+from typing import Dict, List, Any, Tuple, Optional
 
 import gradio as gr
 from huggingface_hub import snapshot_download
 
 
-# -----------------------------
+# =========================
 # Config
-# -----------------------------
-DATASET_REPO_ID = "PeacebinfLow/mindseye-android-os-data"
-DATASET_REPO_TYPE = "dataset"
-
-# If dataset missing / empty, Space still runs using fallback apps.
-FALLBACK_APPS = [
-    {
-        "id": "workspace-automation",
-        "name": "Workspace Automation",
-        "category": "google-integration",
-        "version": "1.0.0",
-        "icon": "workspace",
-        "color": "purple",
-        "github_repo": "https://github.com/PEACEBINFLOW/mindseye-workspace-automation",
-        "metadata": {
-            "description": "Automates Google Workspace activity into ledger events (Gmail, Drive, Calendar).",
-            "tags": ["google", "workspace", "automation", "ledger"],
-            "status": "active",
-        },
-        "features": [
-            "Gmail event capture",
-            "Drive change tracking",
-            "Calendar timeline ingestion",
-            "Ledger-first memory",
-        ],
-        "functions": {
-            "launch": {"type": "app_launch", "action": "open_main_screen", "parameters": {"screen": "overview"}},
-            "open_docs": {"type": "navigation_action", "action": "open_screen", "parameters": {"screen": "docs"}},
-        },
-        "connections": [
-            {"to_app": "google-ledger", "type": "data_flow", "direction": "outbound", "description": "workspace events → ledger"}
-        ],
-        "ui": {"default_screen": "overview", "screens": ["overview", "functions", "connections", "docs"]},
-    },
-    {
-        "id": "google-ledger",
-        "name": "Google Ledger",
-        "category": "google-integration",
-        "version": "1.0.0",
-        "icon": "ledger",
-        "color": "cyan",
-        "github_repo": "https://github.com/PEACEBINFLOW/mindseye-google-ledger",
-        "metadata": {
-            "description": "Central ledger for time-labeled organizational memory built from Google signals.",
-            "tags": ["ledger", "memory", "google"],
-            "status": "active",
-        },
-        "features": [
-            "Time-labeled ledger entries",
-            "Auditable event history",
-            "Queryable memory",
-        ],
-        "functions": {
-            "launch": {"type": "app_launch", "action": "open_main_screen", "parameters": {"screen": "overview"}},
-            "search": {"type": "search_index", "action": "query_ledger", "parameters": {"scope": "all"}},
-        },
-        "connections": [
-            {"to_app": "dashboard", "type": "query", "direction": "outbound", "description": "ledger → dashboard"}
-        ],
-        "ui": {"default_screen": "overview", "screens": ["overview", "functions", "connections"]},
-    },
-    {
-        "id": "law-n-network",
-        "name": "LAW-N Network",
-        "category": "core-system",
-        "version": "1.0.0",
-        "icon": "network",
-        "color": "violet",
-        "github_repo": "https://github.com/PEACEBINFLOW/minds-eye-law-n-network",
-        "metadata": {
-            "description": "Network-native routing of signals and workflows across the system.",
-            "tags": ["network", "routing", "signals", "law-n"],
-            "status": "active",
-        },
-        "features": ["Signal routing", "Policy-aware transport", "Network-native intelligence"],
-        "functions": {
-            "launch": {"type": "app_launch", "action": "open_main_screen", "parameters": {"screen": "overview"}}
-        },
-        "connections": [
-            {"to_app": "data-splitter", "type": "routing", "direction": "outbound", "description": "signals → splitter"}
-        ],
-        "ui": {"default_screen": "overview", "screens": ["overview", "connections"]},
-    },
-]
-
-FALLBACK_TUTORIALS = [
-    {
-        "id": "lesson-01",
-        "title": "Lesson 01 — What is MindsEye?",
-        "level": "beginner",
-        "goal": "Explain ledger-first organizational memory and why it matters.",
-        "sections": [
-            {"type": "text", "content": "MindsEye records prompts, executions, decisions, and outcomes as immutable, time-labeled events."},
-            {"type": "concepts", "items": ["ledger-first memory", "immutability", "auditability", "replayable intelligence"]},
-        ],
-    },
-    {
-        "id": "lesson-02",
-        "title": "Lesson 02 — Google Integration",
-        "level": "beginner",
-        "goal": "Show how Workspace signals become structured ledger events.",
-        "sections": [
-            {"type": "text", "content": "Google apps produce signals. MindsEye converts those into ledger entries you can query and audit."},
-        ],
-    },
-]
+# =========================
+DATASET_REPO_ID = os.getenv("MINDSEYE_DATASET", "PeacebinfLow/mindseye-android-os-data")
+DATASET_REVISION = os.getenv("MINDSEYE_DATASET_REVISION", None)  # optional pin
+MAX_APPS = int(os.getenv("MINDSEYE_MAX_APPS", "200"))
 
 
-# -----------------------------
-# Helpers: Loading dataset files
-# -----------------------------
-def _read_json(path: str) -> Optional[Dict[str, Any]]:
+# =========================
+# Helpers
+# =========================
+def _safe_read_json(path: str) -> Optional[dict]:
     try:
         with open(path, "r", encoding="utf-8") as f:
             return json.load(f)
@@ -128,730 +27,711 @@ def _read_json(path: str) -> Optional[Dict[str, Any]]:
         return None
 
 
-def _safe_listdir(path: str) -> List[str]:
-    try:
-        return os.listdir(path)
-    except Exception:
-        return []
-
-
-def load_dataset_snapshot(repo_id: str) -> Tuple[Dict[str, Any], List[Dict[str, Any]], List[Dict[str, Any]]]:
-    """
-    Returns: (meta, apps, tutorials)
-    - meta contains categories, tags, version-info, connections graph if found
-    - apps is a flat list of app documents
-    - tutorials is a list of tutorial documents
-    """
-    meta: Dict[str, Any] = {
-        "repo_id": repo_id,
-        "loaded_from": "fallback",
-        "loaded_at": datetime.utcnow().isoformat() + "Z",
-    }
-    apps: List[Dict[str, Any]] = []
-    tutorials: List[Dict[str, Any]] = []
-
-    try:
-        local_dir = snapshot_download(repo_id=repo_id, repo_type=DATASET_REPO_TYPE)
-        meta["loaded_from"] = "snapshot_download"
-        meta["local_dir"] = local_dir
-    except Exception as e:
-        meta["error"] = f"snapshot_download failed: {e}"
-        return meta, FALLBACK_APPS, FALLBACK_TUTORIALS
-
-    # metadata
-    metadata_dir = os.path.join(local_dir, "metadata")
-    if os.path.isdir(metadata_dir):
-        for name in ["categories.json", "tags.json", "version-info.json", "connections-graph.json"]:
-            p = os.path.join(metadata_dir, name)
-            if os.path.isfile(p):
-                meta[name.replace(".json", "")] = _read_json(p)
-
-    # tutorials
-    tutorials_dir = os.path.join(local_dir, "tutorials")
-    if os.path.isdir(tutorials_dir):
-        for fname in _safe_listdir(tutorials_dir):
-            if fname.endswith(".json"):
-                doc = _read_json(os.path.join(tutorials_dir, fname))
-                if isinstance(doc, dict):
-                    tutorials.append(doc)
-
-    # apps (walk)
-    apps_dir = os.path.join(local_dir, "apps")
-    if os.path.isdir(apps_dir):
-        for cat in _safe_listdir(apps_dir):
-            cat_dir = os.path.join(apps_dir, cat)
-            if not os.path.isdir(cat_dir):
-                continue
-            for fname in _safe_listdir(cat_dir):
-                if not fname.endswith(".json"):
-                    continue
-                doc = _read_json(os.path.join(cat_dir, fname))
-                if isinstance(doc, dict) and doc.get("id") and doc.get("name"):
-                    apps.append(doc)
-
-    # Fallback if empty
-    if not apps:
-        meta["warning"] = "No apps found in dataset. Using fallback apps."
-        apps = FALLBACK_APPS
-
-    if not tutorials:
-        meta["warning_tutorials"] = "No tutorials found in dataset. Using fallback tutorials."
-        tutorials = FALLBACK_TUTORIALS
-
-    return meta, apps, tutorials
-
-
-def group_apps_by_category(apps: List[Dict[str, Any]]) -> Dict[str, List[Dict[str, Any]]]:
-    grouped: Dict[str, List[Dict[str, Any]]] = {}
-    for app in apps:
-        cat = (app.get("category") or "other").strip()
-        grouped.setdefault(cat, []).append(app)
-    # sort apps by name
-    for cat in grouped:
-        grouped[cat] = sorted(grouped[cat], key=lambda x: (x.get("name") or "").lower())
-    return grouped
-
-
-def find_app(apps: List[Dict[str, Any]], app_id: str) -> Optional[Dict[str, Any]]:
-    for a in apps:
-        if a.get("id") == app_id:
-            return a
-    return None
-
-
-def compact_json(obj: Any) -> str:
-    return json.dumps(obj, indent=2, ensure_ascii=False)
-
-
-# -----------------------------
-# UI Rendering
-# -----------------------------
-ANDROID_CSS = """
-:root{
-  --bg: #0b1220;
-  --surface: #0f172a;
-  --surface2: #111c33;
-  --text: #e5e7eb;
-  --muted: #94a3b8;
-  --accent: #7c3aed;
-  --good: #22c55e;
-  --warn: #f59e0b;
-  --bad: #ef4444;
-  --card: rgba(255,255,255,0.06);
-  --card2: rgba(255,255,255,0.09);
-  --border: rgba(255,255,255,0.10);
-  --shadow: 0 12px 30px rgba(0,0,0,0.35);
-}
-
-body {
-  background: radial-gradient(1200px 600px at 20% 0%, rgba(124,58,237,0.22), transparent),
-              radial-gradient(1200px 600px at 80% 20%, rgba(34,197,94,0.10), transparent),
-              var(--bg) !important;
-}
-
-#android_shell {
-  max-width: 980px;
-  margin: 0 auto;
-}
-
-.status_bar {
-  display:flex;
-  align-items:center;
-  justify-content:space-between;
-  padding: 10px 14px;
-  border: 1px solid var(--border);
-  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
-  border-radius: 18px;
-  box-shadow: var(--shadow);
-}
-
-.status_left, .status_center, .status_right {
-  display:flex;
-  align-items:center;
-  gap: 10px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  color: var(--text);
-  font-size: 13px;
-}
-
-.status_center {
-  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
-  font-weight: 650;
-  letter-spacing: 0.2px;
-}
-
-.pill {
-  padding: 4px 10px;
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  background: rgba(255,255,255,0.05);
-  color: var(--muted);
-}
-
-.launcher_grid {
-  display:grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
-  margin-top: 14px;
-}
+def _slug(s: str) -> str:
+    return "".join(ch.lower() if ch.isalnum() else "-" for ch in s).strip("-")
 
-@media (max-width: 640px){
-  .launcher_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-}
 
-.app_tile {
-  border: 1px solid var(--border);
-  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
-  border-radius: 18px;
-  padding: 14px 12px;
-  box-shadow: var(--shadow);
-  cursor: pointer;
-  transition: transform 120ms ease, background 120ms ease;
-}
+def _now_hhmm() -> str:
+    return time.strftime("%-I:%M %p") if os.name != "nt" else time.strftime("%I:%M %p").lstrip("0")
 
-.app_tile:hover {
-  transform: translateY(-2px);
-  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
-}
 
-.app_icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 14px;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  font-weight: 800;
-  letter-spacing: 0.3px;
-  color: white;
-  background: rgba(124,58,237,0.9);
-  border: 1px solid rgba(255,255,255,0.12);
-}
+# =========================
+# Data Model
+# =========================
+@dataclass
+class AppItem:
+    id: str
+    name: str
+    category: str
+    description: str
+    repo: str
+    version: str
+    color: str
+    icon_label: str
+    tags: List[str]
 
-.app_name {
-  margin-top: 10px;
-  color: var(--text);
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 1.2;
-}
 
-.app_meta {
-  margin-top: 6px;
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.panel {
-  margin-top: 14px;
-  border: 1px solid var(--border);
-  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
-  border-radius: 18px;
-  padding: 14px;
-  box-shadow: var(--shadow);
-}
-
-.h2 {
-  font-size: 16px;
-  font-weight: 800;
-  color: var(--text);
-  margin: 0 0 10px 0;
-}
-
-.small {
-  color: var(--muted);
-  font-size: 12px;
-}
+CATEGORY_ORDER = [
+    "google-integration",
+    "core-system",
+    "binary-runtime",
+    "protocol",
+    "mindscript",
+    "sql-cloud",
+]
 
-.nav_bar {
-  display:flex;
-  gap: 10px;
-  margin-top: 14px;
+CATEGORY_LABELS = {
+    "google-integration": "GOOGLE INTEGRATION",
+    "core-system": "CORE SYSTEM",
+    "binary-runtime": "BINARY & RUNTIME",
+    "protocol": "PROTOCOL",
+    "mindscript": "MINDSCRIPT",
+    "sql-cloud": "SQL & CLOUD",
 }
 
-.nav_btn {
-  flex: 1;
-  border-radius: 14px !important;
-  border: 1px solid var(--border) !important;
-  background: rgba(255,255,255,0.06) !important;
-  color: var(--text) !important;
-  font-weight: 700 !important;
-}
 
-.nav_btn:hover {
-  background: rgba(255,255,255,0.10) !important;
+DEFAULT_CATEGORY_COLORS = {
+    "google-integration": "#7C3AED",
+    "core-system": "#2563EB",
+    "binary-runtime": "#0EA5E9",
+    "protocol": "#F59E0B",
+    "mindscript": "#A855F7",
+    "sql-cloud": "#06B6D4",
 }
 
-.kv {
-  display:grid;
-  grid-template-columns: 160px 1fr;
-  gap: 8px 12px;
-  font-size: 13px;
-}
 
-.k {
-  color: var(--muted);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-}
-
-.v {
-  color: var(--text);
-}
+def load_dataset_repo_apps() -> Tuple[List[AppItem], List[dict], str]:
+    """
+    Pulls the dataset repo snapshot and loads all apps JSON.
+    Returns: (apps, tutorials, source_string)
+    """
+    local_dir = snapshot_download(
+        repo_id=DATASET_REPO_ID,
+        repo_type="dataset",
+        revision=DATASET_REVISION,
+        ignore_patterns=["*.png", "*.jpg", "*.jpeg", "*.gif", "*.mp4", "*.zip"],
+    )
 
-code, pre {
-  background: rgba(0,0,0,0.35) !important;
-  border: 1px solid var(--border) !important;
-  border-radius: 14px !important;
-}
+    apps: List[AppItem] = []
+    tutorials: List[dict] = []
 
-a { color: #93c5fd !important; }
-"""
+    apps_root = os.path.join(local_dir, "apps")
+    tutorials_root = os.path.join(local_dir, "tutorials")
 
+    # Load apps
+    if os.path.isdir(apps_root):
+        for category in sorted(os.listdir(apps_root)):
+            cat_dir = os.path.join(apps_root, category)
+            if not os.path.isdir(cat_dir):
+                continue
+            for fn in sorted(os.listdir(cat_dir)):
+                if not fn.endswith(".json"):
+                    continue
+                path = os.path.join(cat_dir, fn)
+                data = _safe_read_json(path)
+                if not data:
+                    continue
 
-def color_to_css(color: str) -> str:
-    # Simple palette mapping
-    palette = {
-        "purple": "rgba(124,58,237,0.90)",
-        "cyan": "rgba(34,211,238,0.85)",
-        "indigo": "rgba(99,102,241,0.85)",
-        "amber": "rgba(245,158,11,0.85)",
-        "emerald": "rgba(16,185,129,0.85)",
-        "sky": "rgba(56,189,248,0.85)",
-        "violet": "rgba(139,92,246,0.85)",
-        "slate": "rgba(100,116,139,0.75)",
-        "teal": "rgba(20,184,166,0.80)",
-        "lime": "rgba(163,230,53,0.70)",
-        "blue": "rgba(59,130,246,0.85)",
-        "rose": "rgba(244,63,94,0.80)",
-        "orange": "rgba(249,115,22,0.80)",
-        "zinc": "rgba(161,161,170,0.65)",
-        "red": "rgba(239,68,68,0.80)",
-        "green": "rgba(34,197,94,0.80)",
-        "stone": "rgba(168,162,158,0.70)",
-        "fuchsia": "rgba(217,70,239,0.75)",
-        "gray": "rgba(148,163,184,0.65)",
-    }
-    return palette.get((color or "").lower().strip(), "rgba(124,58,237,0.90)")
-
-
-def render_status_bar(title: str, meta: Dict[str, Any]) -> str:
-    now = datetime.now().strftime("%H:%M")
-    loaded_from = meta.get("loaded_from", "unknown")
-    badge = f"source:{loaded_from}"
-    return f"""
-<div class="status_bar">
-  <div class="status_left">
-    <span class="pill">{now}</span>
-    <span class="pill">{badge}</span>
-  </div>
-  <div class="status_center">{title}</div>
-  <div class="status_right">
-    <span class="pill">battery 95%</span>
-    <span class="pill">signal ●●●●</span>
-  </div>
-</div>
-"""
+                app_id = data.get("id") or _slug(data.get("name", fn.replace(".json", "")))
+                name = data.get("name") or fn.replace(".json", "")
+                desc = (data.get("metadata", {}).get("description") or data.get("description") or "").strip()
+                repo = data.get("github_repo") or data.get("repo") or ""
+                version = data.get("version") or data.get("metadata", {}).get("version") or "v1.0.0"
+                color = data.get("color") or DEFAULT_CATEGORY_COLORS.get(category, "#334155")
+
+                tags = data.get("metadata", {}).get("tags") or data.get("tags") or []
+                if isinstance(tags, str):
+                    tags = [tags]
+
+                icon_label = (data.get("icon_label") or data.get("icon") or name[:2]).upper()
+                icon_label = icon_label[:2] if len(icon_label) > 2 else icon_label
+
+                apps.append(
+                    AppItem(
+                        id=app_id,
+                        name=name,
+                        category=category,
+                        description=desc,
+                        repo=repo,
+                        version=version if str(version).startswith("v") else f"v{version}",
+                        color=color,
+                        icon_label=icon_label,
+                        tags=tags[:12],
+                    )
+                )
+                if len(apps) >= MAX_APPS:
+                    break
+
+    # Load tutorials (optional)
+    if os.path.isdir(tutorials_root):
+        for fn in sorted(os.listdir(tutorials_root)):
+            if fn.endswith(".json"):
+                t = _safe_read_json(os.path.join(tutorials_root, fn))
+                if t:
+                    tutorials.append(t)
+
+    source = "snapshot_download"
+    return apps, tutorials, source
+
+
+def group_by_category(apps: List[AppItem]) -> Dict[str, List[AppItem]]:
+    grouped: Dict[str, List[AppItem]] = {}
+    for a in apps:
+        grouped.setdefault(a.category, []).append(a)
+    # apply preferred order
+    ordered: Dict[str, List[AppItem]] = {}
+    for cat in CATEGORY_ORDER:
+        if cat in grouped:
+            ordered[cat] = grouped[cat]
+    for cat, items in grouped.items():
+        if cat not in ordered:
+            ordered[cat] = items
+    return ordered
 
 
-def render_launcher(apps: List[Dict[str, Any]], meta: Dict[str, Any], query: str = "", category_filter: str = "all") -> str:
+# =========================
+# UI Renderers
+# =========================
+def render_launcher(apps: List[AppItem], query: str = "", category: str = "all") -> str:
     q = (query or "").strip().lower()
+
     filtered = []
     for a in apps:
-        if category_filter != "all" and (a.get("category") != category_filter):
+        if category != "all" and a.category != category:
             continue
-        if not q:
-            filtered.append(a)
-            continue
-        hay = " ".join([
-            str(a.get("id", "")),
-            str(a.get("name", "")),
-            str(a.get("category", "")),
-            " ".join((a.get("metadata") or {}).get("tags", []) or []),
-            str((a.get("metadata") or {}).get("description", "")),
-        ]).lower()
-        if q in hay:
-            filtered.append(a)
-
-    grouped = group_apps_by_category(filtered)
-
-    # Build grid tiles as HTML buttons (we’ll use a dropdown to select app, then a launch button)
-    # In gradio, direct click handlers on arbitrary HTML tiles are not reliable without JS hacks.
-    # So we keep the launcher grid visual + use a “Launch” control under it.
-    tiles = ""
+        if q:
+            blob = " ".join([a.name, a.id, a.description, " ".join(a.tags)]).lower()
+            if q not in blob:
+                continue
+        filtered.append(a)
+
+    grouped = group_by_category(filtered)
+
+    # Build launcher sections
+    sections_html = []
     for cat, items in grouped.items():
-        tiles += f'<div class="panel"><div class="h2">{cat}</div>'
-        tiles += '<div class="launcher_grid">'
-        for app in items:
-            bg = color_to_css(app.get("color", "purple"))
-            initials = (app.get("name", "App")[:2]).upper()
-            tiles += f"""
-              <div class="app_tile">
-                <div class="app_icon" style="background:{bg}">{initials}</div>
-                <div class="app_name">{app.get("name","")}</div>
-                <div class="app_meta">{app.get("id","")} · v{app.get("version","1.0.0")}</div>
+        label = CATEGORY_LABELS.get(cat, cat.upper())
+        sections_html.append(
+            f"""
+            <div class="section">
+              <div class="section-title">{label} <span class="count">({len(items)})</span></div>
+              <div class="grid">
+                {''.join([render_app_tile(a) for a in items])}
               </div>
+            </div>
             """
-        tiles += "</div></div>"
-
-    header = render_status_bar("MindsEye OS — Launcher", meta)
-    hint = f"""
-<div class="panel">
-  <div class="h2">How to use</div>
-  <div class="small">
-    Search or filter apps, then select an app from the dropdown and press <b>Launch App</b>.
-    This keeps the UI stable in Gradio without sketchy JS click hooks.
-  </div>
-</div>
-"""
-    return f'<div id="android_shell">{header}{hint}{tiles}</div>'
-
-
-def render_app_detail(app: Dict[str, Any], meta: Dict[str, Any]) -> str:
-    header = render_status_bar(f"App — {app.get('name','')}", meta)
-
-    md = app.get("metadata") or {}
-    desc = md.get("description", "")
-    tags = md.get("tags") or []
-    features = app.get("features") or []
-    functions = app.get("functions") or {}
-    connections = app.get("connections") or []
-
-    info = f"""
-<div class="panel">
-  <div class="h2>Overview</div>
-  <div class="kv">
-    <div class="k">App ID</div><div class="v">{app.get("id","")}</div>
-    <div class="k">Category</div><div class="v">{app.get("category","")}</div>
-    <div class="k">Version</div><div class="v">{app.get("version","")}</div>
-    <div class="k">Repo</div><div class="v"><a href="{app.get("github_repo","")}" target="_blank">{app.get("github_repo","")}</a></div>
-  </div>
-  <p class="small" style="margin-top:10px;">{desc}</p>
-  <div class="small"><b>Tags:</b> {", ".join(tags) if tags else "—"}</div>
-</div>
-"""
-
-    feats = "<div class='panel'><div class='h2'>Features</div>"
-    if features:
-        feats += "<ul>"
-        for f in features:
-            feats += f"<li class='small'>{f}</li>"
-        feats += "</ul>"
-    else:
-        feats += "<div class='small'>No features listed.</div>"
-    feats += "</div>"
-
-    funcs = "<div class='panel'><div class='h2'>Functions</div>"
-    if functions:
-        funcs += "<pre><code>" + compact_json(functions) + "</code></pre>"
-    else:
-        funcs += "<div class='small'>No functions defined.</div>"
-    funcs += "</div>"
-
-    conns = "<div class='panel'><div class='h2'>Connections</div>"
-    if connections:
-        conns += "<pre><code>" + compact_json(connections) + "</code></pre>"
-    else:
-        conns += "<div class='small'>No connections defined.</div>"
-    conns += "</div>"
-
-    return f'<div id="android_shell">{header}{info}{feats}{funcs}{conns}</div>'
-
-
-def render_tutorials(tutorials: List[Dict[str, Any]], meta: Dict[str, Any], selected_id: Optional[str] = None) -> str:
-    header = render_status_bar("MindsEye OS — Tutorials", meta)
-    if not selected_id and tutorials:
-        selected_id = tutorials[0].get("id")
-
-    lesson = None
-    for t in tutorials:
-        if t.get("id") == selected_id:
-            lesson = t
-            break
-    if not lesson and tutorials:
-        lesson = tutorials[0]
-
-    left = "<div class='panel'><div class='h2'>Lessons</div><ul>"
-    for t in tutorials:
-        tid = t.get("id", "")
-        title = t.get("title", tid)
-        left += f"<li class='small'><b>{tid}</b> — {title}</li>"
-    left += "</ul></div>"
-
-    right = "<div class='panel'><div class='h2'>Lesson Detail</div>"
-    if lesson:
-        right += f"<div class='small'><b>{lesson.get('title','')}</b> · level: {lesson.get('level','')}</div>"
-        right += f"<div class='small' style='margin-top:8px;'><b>Goal:</b> {lesson.get('goal','')}</div>"
-        sections = lesson.get("sections") or []
-        right += "<div style='margin-top:10px;'>"
-        for s in sections:
-            st = s.get("type")
-            if st == "text":
-                right += f"<p class='small'>{s.get('content','')}</p>"
-            elif st == "concepts":
-                items = s.get("items") or []
-                right += "<div class='small'><b>Concepts:</b><ul>"
-                for it in items:
-                    right += f"<li>{it}</li>"
-                right += "</ul></div>"
-            elif st == "apps":
-                items = s.get("items") or []
-                right += "<div class='small'><b>Apps:</b> " + ", ".join(items) + "</div>"
-            elif st == "exercise":
-                right += "<div class='small'><b>Exercise:</b> " + str(s.get("prompt", "")) + "</div>"
-        right += "</div>"
-    else:
-        right += "<div class='small'>No tutorials found.</div>"
-    right += "</div>"
+        )
 
     return f"""
-<div id="android_shell">
-  {header}
-  <div style="display:grid;grid-template-columns: 1fr; gap: 14px; margin-top:14px;">
-    {left}
-    {right}
-  </div>
-</div>
-"""
-
-
-def render_recents(recents: List[str], apps: List[Dict[str, Any]], meta: Dict[str, Any]) -> str:
-    header = render_status_bar("MindsEye OS — Recents", meta)
-    items = []
-    for app_id in recents[::-1]:
-        a = find_app(apps, app_id)
-        if a:
-            items.append(a)
-
-    body = "<div class='panel'><div class='h2'>Recent Apps</div>"
-    if not items:
-        body += "<div class='small'>No recent apps yet. Launch something from the launcher.</div>"
-    else:
-        body += "<ul>"
-        for a in items:
-            body += f"<li class='small'><b>{a.get('name')}</b> — {a.get('id')}</li>"
-        body += "</ul>"
-    body += "</div>"
-    return f'<div id="android_shell">{header}{body}</div>'
+    <div class="phone">
+      <div class="statusbar">
+        <div class="sb-left">{_now_hhmm()}</div>
+        <div class="sb-mid">MindsEye</div>
+        <div class="sb-right">
+          <span class="sb-signal">▮▮▮▯</span>
+          <span class="sb-batt">87%</span>
+        </div>
+      </div>
+
+      <div class="hero">
+        <div class="hero-title">MindsEye OS</div>
+        <div class="hero-sub">35+ Cognitive Automation Modules</div>
+      </div>
+
+      <div class="searchwrap">
+        <div class="searchicon">⌕</div>
+        <div class="searchtext">{escape_html(query) if query else "Search apps..."}</div>
+      </div>
+
+      <div class="scroll">
+        {''.join(sections_html) if sections_html else '<div class="empty">No apps match your search.</div>'}
+      </div>
+
+      <div class="navbar">
+        <div class="navbtn" data-nav="back">‹</div>
+        <div class="navbtn home" data-nav="home">●</div>
+        <div class="navbtn" data-nav="recents">▢</div>
+      </div>
+    </div>
+    """
 
 
-# -----------------------------
-# Gradio App Logic
-# -----------------------------
-def boot() -> Tuple[Dict[str, Any], List[Dict[str, Any]], List[Dict[str, Any]]]:
-    return load_dataset_snapshot(DATASET_REPO_ID)
+def render_app_tile(app: AppItem) -> str:
+    # tile click triggers JS to press hidden gradio button
+    return f"""
+    <div class="tile" onclick="window.__ME_LAUNCH_APP('{escape_attr(app.id)}')">
+      <div class="icon" style="border-color:{escape_attr(app.color)}; box-shadow: 0 0 0 2px rgba(255,255,255,0.04) inset;">
+        <div class="icon-inner" style="background: color-mix(in srgb, {escape_attr(app.color)} 35%, #0b1220);">
+          {escape_html(app.icon_label)}
+        </div>
+      </div>
+      <div class="label">{escape_html(app.name)}</div>
+    </div>
+    """
 
 
-def build_category_choices(apps: List[Dict[str, Any]], meta: Dict[str, Any]) -> List[Tuple[str, str]]:
-    # value, label
-    base = [("all", "All Categories")]
-    categories_doc = (meta.get("categories") or {}).get("categories") if isinstance(meta.get("categories"), dict) else None
-    if categories_doc:
-        for c in categories_doc:
-            base.append((c["id"], c["label"]))
-        return base
+def render_app_detail(app: AppItem) -> str:
+    tags = "".join([f"<span class='tag'>{escape_html(t)}</span>" for t in (app.tags or [])])
+    repo = escape_html(app.repo) if app.repo else "—"
 
-    # fallback: derive from apps
-    cats = sorted(list({(a.get("category") or "other") for a in apps}))
-    for c in cats:
-        base.append((c, c))
-    return base
+    return f"""
+    <div class="phone">
+      <div class="statusbar">
+        <div class="sb-left">{_now_hhmm()}</div>
+        <div class="sb-mid">{escape_html(app.name)}</div>
+        <div class="sb-right">
+          <span class="sb-signal">▮▮▮▯</span>
+          <span class="sb-batt">87%</span>
+        </div>
+      </div>
+
+      <div class="detail">
+        <div class="detail-head">
+          <div class="icon big" style="border-color:{escape_attr(app.color)};">
+            <div class="icon-inner" style="background: color-mix(in srgb, {escape_attr(app.color)} 35%, #0b1220);">
+              {escape_html(app.icon_label)}
+            </div>
+          </div>
+          <div class="detail-meta">
+            <div class="detail-title">{escape_html(app.name)}</div>
+            <div class="detail-sub">{escape_html(app.category)} • {escape_html(app.version)}</div>
+          </div>
+        </div>
+
+        <div class="card">
+          <div class="card-title">Description</div>
+          <div class="card-body">{escape_html(app.description or "No description provided yet.")}</div>
+        </div>
+
+        <div class="card">
+          <div class="card-title">Repository</div>
+          <div class="card-body mono">{repo}</div>
+        </div>
+
+        <div class="card">
+          <div class="card-title">Tags</div>
+          <div class="card-body tags">{tags if tags else "—"}</div>
+        </div>
+
+        <div class="card subtle">
+          <div class="card-title">Educational Mode</div>
+          <div class="card-body">
+            This app is a documented module in the MindsEye ecosystem. In the portfolio version,
+            modules are presented as learnable “apps” rather than live backend services.
+          </div>
+        </div>
+      </div>
+
+      <div class="navbar">
+        <div class="navbtn" data-nav="back">‹</div>
+        <div class="navbtn home" data-nav="home">●</div>
+        <div class="navbtn" data-nav="recents">▢</div>
+      </div>
+    </div>
+    """
 
 
-def on_refresh(meta: Dict[str, Any], apps: List[Dict[str, Any]], tutorials: List[Dict[str, Any]]):
-    meta2, apps2, tutorials2 = boot()
-    categories = build_category_choices(apps2, meta2)
-    # default views
-    launcher_html = render_launcher(apps2, meta2)
-    return meta2, apps2, tutorials2, categories, launcher_html
+def render_recents(recents: List[AppItem]) -> str:
+    tiles = "".join([render_app_tile(a) for a in recents]) if recents else "<div class='empty'>No recent apps yet.</div>"
+    return f"""
+    <div class="phone">
+      <div class="statusbar">
+        <div class="sb-left">{_now_hhmm()}</div>
+        <div class="sb-mid">Recents</div>
+        <div class="sb-right">
+          <span class="sb-signal">▮▮▮▯</span>
+          <span class="sb-batt">87%</span>
+        </div>
+      </div>
+
+      <div class="hero" style="padding-top:14px;">
+        <div class="hero-title">Recent Apps</div>
+        <div class="hero-sub">Your latest opened modules</div>
+      </div>
+
+      <div class="scroll">
+        <div class="section">
+          <div class="grid">{tiles}</div>
+        </div>
+      </div>
+
+      <div class="navbar">
+        <div class="navbtn" data-nav="back">‹</div>
+        <div class="navbtn home" data-nav="home">●</div>
+        <div class="navbtn" data-nav="recents">▢</div>
+      </div>
+    </div>
+    """
 
 
-def nav_home(meta: Dict[str, Any], apps: List[Dict[str, Any]], query: str, cat: str):
-    return render_launcher(apps, meta, query=query, category_filter=cat)
+def escape_html(s: str) -> str:
+    if s is None:
+        return ""
+    return (
+        str(s)
+        .replace("&", "&amp;")
+        .replace("<", "&lt;")
+        .replace(">", "&gt;")
+        .replace('"', "&quot;")
+        .replace("'", "&#39;")
+    )
 
 
-def nav_recents(meta: Dict[str, Any], apps: List[Dict[str, Any]], recents: List[str]):
-    return render_recents(recents, apps, meta)
+def escape_attr(s: str) -> str:
+    return escape_html(s).replace("\n", " ")
 
 
-def nav_back(meta: Dict[str, Any], apps: List[Dict[str, Any]], stack: List[str], current: Optional[str], query: str, cat: str):
-    # stack stores previous app_ids
-    if stack:
-        prev = stack.pop()
-        app = find_app(apps, prev)
-        if app:
-            return stack, prev, render_app_detail(app, meta)
-    # if no stack, go home
-    return stack, None, render_launcher(apps, meta, query=query, category_filter=cat)
+# =========================
+# App Logic
+# =========================
+def refresh_data():
+    apps, tutorials, source = load_dataset_repo_apps()
+    return apps, tutorials, source
 
 
-def launch_app(meta: Dict[str, Any], apps: List[Dict[str, Any]], app_id: str, stack: List[str], current: Optional[str], recents: List[str]):
-    app = find_app(apps, app_id)
-    if not app:
-        # fallback: do nothing, keep launcher
-        return stack, current, recents, "<div class='panel'><div class='h2'>Error</div><div class='small'>App not found.</div></div>"
+def find_app(apps: List[AppItem], app_id: str) -> Optional[AppItem]:
+    for a in apps:
+        if a.id == app_id:
+            return a
+    return None
 
-    # push current to back stack
-    if current:
-        stack.append(current)
 
-    # add to recents (unique, keep last 8)
-    if app_id in recents:
-        recents = [x for x in recents if x != app_id]
-    recents.append(app_id)
-    recents = recents[-8:]
+# =========================
+# Gradio App
+# =========================
+CSS = r"""
+/* Hide Gradio chrome */
+footer { display: none !important; }
+#root > .wrap { max-width: 1200px; }
 
-    return stack, app_id, recents, render_app_detail(app, meta)
+/* Full background */
+body, .gradio-container {
+  background: radial-gradient(1200px 800px at 30% 40%, rgba(124,58,237,0.25), transparent 60%),
+              radial-gradient(900px 700px at 70% 60%, rgba(34,211,238,0.18), transparent 60%),
+              #050814 !important;
+}
 
+/* Remove default component borders */
+.gr-box, .gr-form, .gr-panel { border: none !important; background: transparent !important; }
 
-def select_tutorial(meta: Dict[str, Any], tutorials: List[Dict[str, Any]], tutorial_id: str):
-    return render_tutorials(tutorials, meta, selected_id=tutorial_id)
+/* Phone mock */
+.phone {
+  width: 420px;
+  height: 840px;
+  margin: 16px auto;
+  border-radius: 34px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
+  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
+  border: 1px solid rgba(255,255,255,0.08);
+  overflow: hidden;
+  position: relative;
+}
 
+.statusbar {
+  height: 52px;
+  padding: 0 18px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: rgba(255,255,255,0.85);
+  font-family: ui-sans-serif, system-ui;
+  font-size: 14px;
+  background: rgba(0,0,0,0.12);
+}
 
-with gr.Blocks(css=ANDROID_CSS, theme=gr.themes.Soft()) as demo:
-    meta_state = gr.State({})
-    apps_state = gr.State([])
-    tutorials_state = gr.State([])
-    back_stack_state = gr.State([])   # list of app_ids
-    current_app_state = gr.State(None)  # app_id
-    recents_state = gr.State([])      # list of app_ids
-
-    gr.Markdown("")
-
-    with gr.Row():
-        refresh_btn = gr.Button("Refresh Dataset", variant="secondary")
-        status = gr.Markdown("")
+.sb-mid { font-weight: 600; letter-spacing: 0.3px; opacity: 0.9; }
+.sb-right { display: flex; gap: 10px; align-items: center; opacity: 0.85; }
 
-    with gr.Row():
-        search_query = gr.Textbox(label="Search apps", placeholder="Search name / id / tags / description…", scale=2)
-        category_filter = gr.Dropdown(label="Category", choices=[("all", "All Categories")], value="all", scale=1)
+.hero {
+  padding: 18px 20px 10px 20px;
+  text-align: center;
+  color: rgba(255,255,255,0.92);
+  font-family: ui-sans-serif, system-ui;
+}
+.hero-title { font-size: 32px; font-weight: 800; letter-spacing: 0.2px; }
+.hero-sub { font-size: 14px; opacity: 0.75; margin-top: 2px; }
+
+.searchwrap {
+  margin: 10px 18px 10px 18px;
+  height: 48px;
+  border-radius: 16px;
+  border: 1px solid rgba(255,255,255,0.08);
+  background: rgba(0,0,0,0.20);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 14px;
+  color: rgba(255,255,255,0.70);
+  font-family: ui-sans-serif, system-ui;
+}
+.searchicon { opacity: 0.85; }
+.searchtext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+.scroll {
+  position: absolute;
+  top: 52px;
+  left: 0;
+  right: 0;
+  bottom: 78px;
+  padding: 186px 18px 18px 18px; /* leaves room for hero+search */
+  overflow-y: auto;
+}
 
-    launcher_view = gr.HTML()
+.section { margin-top: 14px; }
+.section-title {
+  font-family: ui-sans-serif, system-ui;
+  font-size: 12px;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+  color: rgba(255,255,255,0.55);
+  margin: 6px 0 10px 2px;
+}
+.section-title .count { opacity: 0.6; margin-left: 6px; }
 
-    with gr.Row():
-        app_select = gr.Dropdown(label="Select app to launch", choices=[], value=None, scale=2)
-        launch_btn = gr.Button("Launch App", variant="primary", scale=1)
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 14px 10px;
+}
 
-    with gr.Row():
-        home_btn = gr.Button("Home", elem_classes=["nav_btn"])
-        back_btn = gr.Button("Back", elem_classes=["nav_btn"])
-        recents_btn = gr.Button("Recents", elem_classes=["nav_btn"])
+.tile { cursor: pointer; user-select: none; text-align: center; }
+.icon {
+  width: 66px;
+  height: 66px;
+  border-radius: 18px;
+  border: 2px solid rgba(255,255,255,0.08);
+  margin: 0 auto;
+  display: grid;
+  place-items: center;
+}
+.icon.big { width: 78px; height: 78px; border-radius: 22px; }
+.icon-inner {
+  width: 58px;
+  height: 58px;
+  border-radius: 16px;
+  display: grid;
+  place-items: center;
+  font-family: ui-sans-serif, system-ui;
+  font-weight: 800;
+  color: rgba(255,255,255,0.88);
+  letter-spacing: 0.8px;
+}
+.icon.big .icon-inner { width: 70px; height: 70px; border-radius: 20px; font-size: 18px; }
 
-    gr.Markdown("")
+.label {
+  margin-top: 8px;
+  font-family: ui-sans-serif, system-ui;
+  font-size: 12px;
+  line-height: 1.1;
+  color: rgba(255,255,255,0.80);
+  padding: 0 2px;
+}
 
-    with gr.Tab("Tutorials"):
-        tutorial_select = gr.Dropdown(label="Select lesson", choices=[], value=None)
-        tutorial_view = gr.HTML()
+/* Detail screen */
+.detail { padding: 18px; padding-bottom: 92px; color: rgba(255,255,255,0.9); }
+.detail-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
+.detail-title { font-size: 20px; font-weight: 800; }
+.detail-sub { font-size: 12px; opacity: 0.65; margin-top: 2px; }
+
+.card {
+  margin-top: 12px;
+  padding: 12px 12px;
+  border-radius: 16px;
+  border: 1px solid rgba(255,255,255,0.08);
+  background: rgba(0,0,0,0.22);
+}
+.card.subtle { background: rgba(0,0,0,0.16); opacity: 0.95; }
+.card-title { font-size: 12px; opacity: 0.70; letter-spacing: 0.8px; text-transform: uppercase; }
+.card-body { margin-top: 8px; font-size: 13px; line-height: 1.45; opacity: 0.88; }
+.card-body.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono"; font-size: 12px; }
+.tags { display: flex; flex-wrap: wrap; gap: 8px; }
+.tag {
+  font-size: 12px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(255,255,255,0.10);
+  background: rgba(255,255,255,0.04);
+  opacity: 0.9;
+}
 
-    with gr.Tab("Raw Debug"):
-        debug_meta = gr.JSON(label="Meta")
-        debug_counts = gr.JSON(label="Counts")
+/* Navbar */
+.navbar {
+  position: absolute;
+  left: 0; right: 0; bottom: 0;
+  height: 78px;
+  background: rgba(0,0,0,0.24);
+  border-top: 1px solid rgba(255,255,255,0.08);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+.navbtn {
+  width: 90px;
+  height: 44px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  color: rgba(255,255,255,0.80);
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.08);
+  font-size: 20px;
+  cursor: pointer;
+  user-select: none;
+}
+.navbtn.home { font-size: 16px; }
+.empty {
+  color: rgba(255,255,255,0.65);
+  font-family: ui-sans-serif, system-ui;
+  padding: 14px;
+}
+"""
 
-    # Boot
-    def _boot_ui():
-        meta, apps, tutorials = boot()
-        categories = build_category_choices(apps, meta)
-        launcher_html = render_launcher(apps, meta)
 
-        app_choices = [(a["id"], f'{a["name"]} ({a["id"]})') for a in apps]
-        tutorial_choices = [(t["id"], t.get("title", t["id"])) for t in tutorials]
-        tutorial_default = tutorials[0]["id"] if tutorials else None
+JS = r"""
+// Hooks from HTML tiles -> hidden Gradio button
+window.__ME_LAUNCH_APP = (app_id) => {
+  const el = document.querySelector("button#me-hidden-launch");
+  const inp = document.querySelector("input#me-hidden-appid");
+  if (inp) inp.value = app_id;
+  if (el) el.click();
+};
+
+// Navbar nav -> hidden buttons
+window.__ME_NAV = (target) => {
+  const btn = document.querySelector(`button#me-hidden-nav-${target}`);
+  if (btn) btn.click();
+};
+
+document.addEventListener("click", (e) => {
+  const nav = e.target?.closest?.("[data-nav]")?.getAttribute("data-nav");
+  if (nav) window.__ME_NAV(nav);
+});
+"""
 
-        meta_msg = f"Loaded {len(apps)} apps · {len(tutorials)} tutorials · source: {meta.get('loaded_from')}"
-        debug_c = {"apps": len(apps), "tutorials": len(tutorials)}
 
-        return (
-            meta, apps, tutorials,
-            categories, launcher_html,
-            app_choices,
-            tutorial_choices, tutorial_default,
-            render_tutorials(tutorials, meta, selected_id=tutorial_default),
-            meta, debug_c,
-            meta_msg
+def build_ui():
+    with gr.Blocks(css=CSS, js=JS, theme=gr.themes.Base()) as demo:
+        apps_state = gr.State([])          # List[AppItem]
+        tutorials_state = gr.State([])     # List[dict]
+        source_state = gr.State("—")
+
+        screen_state = gr.State("launcher")  # launcher | detail | recents
+        selected_app_state = gr.State("")    # app_id
+        history_state = gr.State([])         # stack of screen tuples
+        recents_state = gr.State([])         # List[str] of app_ids
+
+        query_state = gr.State("")
+        category_state = gr.State("all")
+
+        # Main rendered phone
+        phone = gr.HTML(value="<div style='color:white; text-align:center; padding:20px;'>Booting…</div>")
+
+        # Hidden controls (we keep them, but user never sees them)
+        hidden_appid = gr.Textbox(value="", elem_id="me-hidden-appid", visible=False)
+        hidden_launch = gr.Button("launch", elem_id="me-hidden-launch", visible=False)
+
+        nav_back = gr.Button("back", elem_id="me-hidden-nav-back", visible=False)
+        nav_home = gr.Button("home", elem_id="me-hidden-nav-home", visible=False)
+        nav_recents = gr.Button("recents", elem_id="me-hidden-nav-recents", visible=False)
+
+        # Top “Refresh dataset” action (optional but useful)
+        with gr.Row():
+            refresh_btn = gr.Button("Refresh Dataset")
+            status = gr.Markdown("")
+
+        def _render(apps: List[AppItem], screen: str, selected_id: str, recents_ids: List[str], q: str, cat: str):
+            if screen == "detail" and selected_id:
+                a = find_app(apps, selected_id)
+                if a:
+                    return render_app_detail(a)
+                return render_launcher(apps, q, cat)
+            if screen == "recents":
+                recent_apps = []
+                for rid in recents_ids[-20:][::-1]:
+                    a = find_app(apps, rid)
+                    if a:
+                        recent_apps.append(a)
+                return render_recents(recent_apps)
+            return render_launcher(apps, q, cat)
+
+        def do_refresh():
+            apps, tutorials, source = refresh_data()
+            html = _render(apps, "launcher", "", [], "", "all")
+            return (
+                apps, tutorials, source,
+                "launcher", "", [], [],
+                "", "all",
+                html,
+                f"Loaded **{len(apps)} apps** • **{len(tutorials)} tutorials** • source: `{source}`"
+            )
+
+        refresh_btn.click(
+            do_refresh,
+            inputs=[],
+            outputs=[
+                apps_state, tutorials_state, source_state,
+                screen_state, selected_app_state, history_state, recents_state,
+                query_state, category_state,
+                phone,
+                status
+            ],
         )
 
-    demo.load(
-        _boot_ui,
-        inputs=[],
-        outputs=[
-            meta_state, apps_state, tutorials_state,
-            category_filter, launcher_view,
-            app_select,
-            tutorial_select, tutorial_select,
-            tutorial_view,
-            debug_meta, debug_counts,
-            status
-        ],
-    )
-
-    # Refresh
-    def _do_refresh(meta, apps, tutorials):
-        meta2, apps2, tutorials2 = boot()
-        categories = build_category_choices(apps2, meta2)
-        launcher_html = render_launcher(apps2, meta2)
-
-        app_choices = [(a["id"], f'{a["name"]} ({a["id"]})') for a in apps2]
-        tutorial_choices = [(t["id"], t.get("title", t["id"])) for t in tutorials2]
-        tutorial_default = tutorials2[0]["id"] if tutorials2 else None
-
-        msg = f"Refreshed. Loaded {len(apps2)} apps · {len(tutorials2)} tutorials · source: {meta2.get('loaded_from')}"
-        debug_c = {"apps": len(apps2), "tutorials": len(tutorials2)}
-
-        return (
-            meta2, apps2, tutorials2,
-            categories, launcher_html,
-            app_choices,
-            tutorial_choices, tutorial_default,
-            render_tutorials(tutorials2, meta2, selected_id=tutorial_default),
-            meta2, debug_c,
-            msg
+        def launch_app(apps: List[AppItem], screen: str, selected_id: str, history: List[Any], recents: List[str], app_id: str):
+            # push current state to history
+            history = list(history or [])
+            history.append({"screen": screen, "selected": selected_id})
+
+            # update recents
+            recents = list(recents or [])
+            if app_id:
+                if app_id in recents:
+                    recents.remove(app_id)
+                recents.append(app_id)
+
+            html = _render(apps, "detail", app_id, recents, "", "all")
+            return "detail", app_id, history, recents, html
+
+        hidden_launch.click(
+            launch_app,
+            inputs=[apps_state, screen_state, selected_app_state, history_state, recents_state, hidden_appid],
+            outputs=[screen_state, selected_app_state, history_state, recents_state, phone],
         )
 
-    refresh_btn.click(
-        _do_refresh,
-        inputs=[meta_state, apps_state, tutorials_state],
-        outputs=[
-            meta_state, apps_state, tutorials_state,
-            category_filter, launcher_view,
-            app_select,
-            tutorial_select, tutorial_select,
-            tutorial_view,
-            debug_meta, debug_counts,
-            status
-        ]
-    )
+        def nav_home_fn(apps: List[AppItem], recents: List[str], q: str, cat: str):
+            return "launcher", "", [], _render(apps, "launcher", "", recents or [], q or "", cat or "all")
 
-    # Search + Filter updates launcher view
-    def _update_launcher(meta, apps, q, cat):
-        return render_launcher(apps, meta, query=q, category_filter=cat)
+        nav_home.click(
+            nav_home_fn,
+            inputs=[apps_state, recents_state, query_state, category_state],
+            outputs=[screen_state, selected_app_state, history_state, phone],
+        )
 
-    search_query.change(_update_launcher, inputs=[meta_state, apps_state, search_query, category_filter], outputs=[launcher_view])
-    category_filter.change(_update_launcher, inputs=[meta_state, apps_state, search_query, category_filter], outputs=[launcher_view])
+        def nav_back_fn(apps: List[AppItem], history: List[Any], recents: List[str], q: str, cat: str):
+            history = list(history or [])
+            if not history:
+                # if no history, stay launcher
+                return "launcher", "", history, _render(apps, "launcher", "", recents or [], q or "", cat or "all")
+
+            prev = history.pop()
+            prev_screen = prev.get("screen", "launcher")
+            prev_selected = prev.get("selected", "")
+            html = _render(apps, prev_screen, prev_selected, recents or [], q or "", cat or "all")
+            return prev_screen, prev_selected, history, html
+
+        nav_back.click(
+            nav_back_fn,
+            inputs=[apps_state, history_state, recents_state, query_state, category_state],
+            outputs=[screen_state, selected_app_state, history_state, phone],
+        )
 
-    # Launch selected app
-    def _launch(meta, apps, app_id, stack, current, recents):
-        if not app_id:
-            return stack, current, recents, render_launcher(apps, meta)
-        return launch_app(meta, apps, app_id, stack, current, recents)
+        def nav_recents_fn(apps: List[AppItem], recents: List[str], history: List[Any], screen: str, selected: str):
+            history = list(history or [])
+            history.append({"screen": screen, "selected": selected})
+            html = _render(apps, "recents", "", recents or [], "", "all")
+            return "recents", "", history, html
 
-    launch_btn.click(
-        _launch,
-        inputs=[meta_state, apps_state, app_select, back_stack_state, current_app_state, recents_state],
-        outputs=[back_stack_state, current_app_state, recents_state, launcher_view]
-    )
-
-    # Nav buttons
-    home_btn.click(nav_home, inputs=[meta_state, apps_state, search_query, category_filter], outputs=[launcher_view])
-    recents_btn.click(nav_recents, inputs=[meta_state, apps_state, recents_state], outputs=[launcher_view])
+        nav_recents.click(
+            nav_recents_fn,
+            inputs=[apps_state, recents_state, history_state, screen_state, selected_app_state],
+            outputs=[screen_state, selected_app_state, history_state, phone],
+        )
 
-    back_btn.click(
-        nav_back,
-        inputs=[meta_state, apps_state, back_stack_state, current_app_state, search_query, category_filter],
-        outputs=[back_stack_state, current_app_state, launcher_view]
-    )
+        # Auto-refresh on load
+        demo.load(
+            do_refresh,
+            inputs=[],
+            outputs=[
+                apps_state, tutorials_state, source_state,
+                screen_state, selected_app_state, history_state, recents_state,
+                query_state, category_state,
+                phone,
+                status
+            ],
+        )
 
-    # Tutorials selector
-    tutorial_select.change(select_tutorial, inputs=[meta_state, tutorials_state, tutorial_select], outputs=[tutorial_view])
+    return demo
 
 
 if __name__ == "__main__":
-    demo.launch()
+    build_ui().launch()