feat(providers): prefix-based routing with per-model custom aliases

- ProviderImportRequest now accepts prefix and model_aliases (subset selection)
- Add ProviderUpdateRequest + PATCH /admin/providers/{id} for editing
- /v1/models lists models as '{prefix}/{custom_alias}' (e.g. deb/gpt-4o)
- _get_upstream_for_model resolves prefix → provider → real upstream model
via model_aliases reverse-lookup
- /admin/providers returns rich models {upstream, alias, full_id} plus
available_models for the editor
- /admin/models surfaces prefixed dynamic models with provider metadata
- _register_provider_in_upstreams no longer pollutes global UPSTREAMS

Dashboard UI:
- New 3-step provider import flow: form (with Prefix input) → discover →
select & alias models → import
- Model selector: checkboxes + editable alias inputs, live prefix/alias
preview, search, select-all/none, reset
- Provider cards redesigned with prefix badge, exposed-model chips, and
EDIT button
- Edit Provider modal: rename, change prefix, toggle model selection,
rename aliases (calls new PATCH endpoint)

app/index.py

@@ -528,40 +528,68 @@ def normalize_model(model: str) -> str:
 
 
 def parse_provider_prefix(model: str):
-    """Parse 'provider_name/model_id' format. Returns (provider_name, model_id) or (None, model) if no prefix."""
+    """Parse 'prefix/model_id' format. Returns (prefix, model_id) or (None, model) if no prefix."""
     if "/" in model:
         parts = model.split("/", 1)
         return parts[0], parts[1]
     return None, model
 
 
+def _find_provider_by_prefix(prefix: str):
+    """Return (pid, prov) for a given prefix (case-insensitive), or (None, None)."""
+    if not prefix:
+        return None, None
+    pl = prefix.lower()
+    for pid, prov in _dynamic_providers.items():
+        if (prov.get("prefix") or "").lower() == pl:
+            return pid, prov
+        # backward-compat: allow matching by provider name as legacy prefix
+        if (prov.get("name") or "").lower() == pl:
+            return pid, prov
+    return None, None
+
+
+def _resolve_provider_model(prov: dict, alias: str) -> str:
+    """Resolve user-facing alias to real upstream model id using provider's model_aliases map."""
+    aliases = prov.get("model_aliases") or {}
+    # model_aliases is {upstream_model_id: exposed_alias}
+    # Reverse-lookup: find upstream id whose exposed alias matches
+    for upstream_id, exposed in aliases.items():
+        if exposed == alias:
+            return upstream_id
+    # Fallback: if user passed the raw upstream id, allow it if it's in available_models
+    if alias in (prov.get("available_models") or []):
+        return alias
+    return alias  # last-resort passthrough
+
+
 def _get_upstream_for_model(model: str):
     """Find upstream URL and API key for a model, handling provider prefix routing."""
-    provider_name, model_id = parse_provider_prefix(model)
-    
-    if provider_name:
-        # Provider prefix routing: find provider by name, route to its base_url
-        for pid, prov in _dynamic_providers.items():
-            if prov.get("name") == provider_name:
-                base_url = prov["base_url"].rstrip("/")
-                chat_url = f"{base_url}/chat/completions"
-                keys = prov.get("keys", [])
-                api_key = keys[0] if keys else ""
-                return chat_url, model_id, api_key
-        # Provider not found, fall through to default routing
-    
-    # Default routing: use UPSTREAMS dict
-    upstreams = UPSTREAMS.get(model_id, [])
+    prefix, alias = parse_provider_prefix(model)
+
+    if prefix:
+        pid, prov = _find_provider_by_prefix(prefix)
+        if prov:
+            base_url = prov["base_url"].rstrip("/")
+            chat_url = f"{base_url}/chat/completions"
+            keys = prov.get("keys", [])
+            api_key = keys[0] if keys else ""
+            real_model = _resolve_provider_model(prov, alias)
+            return chat_url, real_model, api_key
+        # Prefix not found, fall through to default routing
+
+    # Default routing: use UPSTREAMS dict (built-in aliases)
+    upstreams = UPSTREAMS.get(alias, [])
     if not upstreams:
         upstreams = UPSTREAMS.get(model, [])
     if not upstreams:
         # Fallback to default upstream
         return DEFAULT_UPSTREAM_URL, model, ""
-    
+
     upstream = upstreams[0]
     url = upstream.get("url", DEFAULT_UPSTREAM_URL)
     api_key = UPSTREAM_API_KEYS.get(url, "")
-    return url, model_id, api_key
+    return url, alias, api_key
 
 
 def parse_upstream_delta(clean: str) -> dict:
@@ -909,17 +937,34 @@ async def health():
 
 @app.get("/v1/models")
 async def list_models():
-    """List all available models. Dynamic provider models are listed by raw name; provider prefix routing is still accepted on requests for backward compatibility."""
-    seen = set(_available_models)
-    data = [{"id": m, "object": "model", "owned_by": "apiarium"} for m in _available_models]
-    # Append dynamic provider models by raw name (no provider prefix in the public listing)
+    """List all available models.
+
+    Built-in aliases are listed by their alias id.
+    Dynamic provider models are listed as ``{prefix}/{custom_alias}`` if the
+    provider has a prefix configured; otherwise the raw model id is used.
+    """
+    seen = set()
+    data = []
+    for m in _available_models:
+        if m in seen:
+            continue
+        seen.add(m)
+        data.append({"id": m, "object": "model", "owned_by": "apiarium"})
+
+    # Append dynamic provider models using their custom alias + provider prefix
     for pid, prov in _dynamic_providers.items():
         prov_name = prov.get("name", pid)
-        for m in prov.get("models", []):
-            if m in seen:
+        prefix = (prov.get("prefix") or "").strip()
+        aliases = prov.get("model_aliases") or {}
+        # Iterate over selected/aliased models only
+        for upstream_id, exposed in aliases.items():
+            if not exposed:
                 continue
-            seen.add(m)
-            data.append({"id": m, "object": "model", "owned_by": prov_name})
+            full_id = f"{prefix}/{exposed}" if prefix else exposed
+            if full_id in seen:
+                continue
+            seen.add(full_id)
+            data.append({"id": full_id, "object": "model", "owned_by": prov_name})
     return {"object": "list", "data": data}
 
 
@@ -1175,21 +1220,29 @@ async def admin_models(request: Request):
         raise HTTPException(status_code=401, detail={"error": {"message": "Invalid master key"}})
 
     models = []
-    
-    # Dynamic provider models — show raw model name, provider goes in its own field
+
+    # Dynamic provider models — show as `{prefix}/{alias}` when a prefix is set.
+    dynamic_models = set()
     for pid, prov in _dynamic_providers.items():
         prov_name = prov.get("name", pid)
-        for m in prov.get("models", []):
+        prefix = (prov.get("prefix") or "").strip()
+        aliases = prov.get("model_aliases") or {}
+        for upstream_id, exposed in aliases.items():
+            if not exposed:
+                continue
+            full_id = f"{prefix}/{exposed}" if prefix else exposed
             models.append({
-                "name": m,
+                "name": full_id,
+                "alias": exposed,
+                "upstream": upstream_id,
+                "prefix": prefix,
                 "provider": prov_name,
+                "provider_id": pid,
                 "type": "dynamic",
             })
-    
-    # Built-in models (non-prefixed, from UPSTREAMS but not from dynamic providers)
-    dynamic_models = set()
-    for prov in _dynamic_providers.values():
-        dynamic_models.update(prov.get("models", []))
+            # Mark the raw upstream id as "owned" by a dynamic provider so we
+            # don't double-list it from the built-in UPSTREAMS dict.
+            dynamic_models.add(upstream_id)
     
     def _provider_from_url(url: str) -> str:
         """Extract provider name from upstream URL."""
@@ -1306,6 +1359,18 @@ class ProviderImportRequest(BaseModel):
     name: str
     base_url: str  # e.g. https://api.example.com/v1
     keys: list  # list of API keys (strings)
+    prefix: str = ""  # public prefix used to namespace this provider's models (e.g. "deb")
+    # Optional explicit model selection + custom aliases.
+    # Map of upstream_model_id -> exposed_custom_alias.
+    # If empty, ALL discovered models from /models are imported with their raw ids as aliases.
+    model_aliases: dict = {}
+
+
+class ProviderUpdateRequest(BaseModel):
+    name: str | None = None
+    prefix: str | None = None
+    keys: list | None = None
+    model_aliases: dict | None = None  # full replacement when provided
 
 
 def _load_providers():
@@ -1327,22 +1392,18 @@ def _save_providers():
 
 
 def _register_provider_in_upstreams(prov: dict):
-    """Inject a provider's models + keys into the global UPSTREAMS/UPSTREAM_API_KEYS."""
+    """Register provider's API key for its chat endpoint.
+
+    With prefix-based routing we no longer pollute the global UPSTREAMS dict
+    with raw model ids — routing happens via :func:`_get_upstream_for_model`.
+    We still keep the api-key mapping so that downstream proxy code that looks
+    up the key by URL keeps working.
+    """
     base_url = prov["base_url"].rstrip("/")
     chat_url = f"{base_url}/chat/completions"
     keys = prov.get("keys", [])
-    models = prov.get("models", [])
-
-    # Register API keys — use first key as primary, others rotate via round-robin
-    for i, key in enumerate(keys):
-        UPSTREAM_API_KEYS.setdefault(chat_url, key)
-
-    # Register models — each model routes to this provider
-    for model_id in models:
-        # Don't override built-in models
-        if model_id in UPSTREAMS:
-            continue
-        UPSTREAMS[model_id] = [{"url": chat_url, "model": model_id}]
+    if keys:
+        UPSTREAM_API_KEYS.setdefault(chat_url, keys[0])
 
 
 @app.get("/admin/providers")
@@ -1354,12 +1415,26 @@ async def admin_list_providers(request: Request):
 
     out = []
     for pid, prov in _dynamic_providers.items():
+        aliases = prov.get("model_aliases") or {}
+        prefix = (prov.get("prefix") or "").strip()
+        exposed_models = []
+        for upstream_id, exposed in aliases.items():
+            if not exposed:
+                continue
+            exposed_models.append({
+                "upstream": upstream_id,
+                "alias": exposed,
+                "full_id": f"{prefix}/{exposed}" if prefix else exposed,
+            })
         out.append({
             "id": pid,
             "name": prov.get("name", ""),
+            "prefix": prefix,
             "base_url": prov.get("base_url", ""),
             "key_count": len(prov.get("keys", [])),
-            "models": prov.get("models", []),
+            "available_models": prov.get("available_models", []) or list(aliases.keys()),
+            "models": exposed_models,                              # rich list (new)
+            "model_aliases": aliases,                              # raw map for editing
             "added_at": prov.get("added_at", 0),
         })
     return {"providers": out}
@@ -1442,32 +1517,121 @@ async def admin_import_provider(request: Request, body: ProviderImportRequest):
     else:
         models = []
 
-    models = [m for m in models if m]
+    available = [m for m in models if m]
+
+    # Validate & build model_aliases. If the client did not provide any,
+    # default to importing every discovered model with its raw id as alias.
+    incoming_aliases = body.model_aliases or {}
+    cleaned_aliases: dict = {}
+    available_set = set(available)
+    for upstream_id, exposed in incoming_aliases.items():
+        if not upstream_id or not exposed:
+            continue
+        if upstream_id not in available_set:
+            # Skip unknown upstream model ids silently — UI shouldn't send them
+            continue
+        cleaned_aliases[upstream_id] = str(exposed).strip()
+
+    if not cleaned_aliases:
+        cleaned_aliases = {m: m for m in available}
+
+    # Normalize prefix: strip leading/trailing slashes & spaces
+    prefix = (body.prefix or "").strip().strip("/")
 
     pid = body.name.lower().replace(" ", "-") + "-" + uuid.uuid4().hex[:6]
     prov = {
         "name": body.name,
+        "prefix": prefix,
         "base_url": base_url,
         "keys": list(body.keys),
-        "models": models,
+        "available_models": available,
+        "model_aliases": cleaned_aliases,
         "added_at": int(time.time()),
     }
     _dynamic_providers[pid] = prov
     _register_provider_in_upstreams(prov)
     _save_providers()
 
-    # Refresh global available models list
+    # Refresh global available models list (built-in only — prefixed models
+    # are surfaced separately by /v1/models)
     global _available_models
     _available_models = list(UPSTREAMS.keys()) + ["gpt-image-1", "gpt-image-2"]
-    logger.info("Imported provider %s with %d models", pid, len(models))
+    logger.info(
+        "Imported provider %s (prefix=%r) with %d selected models (%d available)",
+        pid, prefix, len(cleaned_aliases), len(available),
+    )
 
     return {
         "id": pid,
         "name": prov["name"],
+        "prefix": prefix,
         "base_url": base_url,
         "key_count": len(body.keys),
-        "model_count": len(models),
-        "models": models,
+        "model_count": len(cleaned_aliases),
+        "available_count": len(available),
+        "models": [
+            {"upstream": k, "alias": v, "full_id": f"{prefix}/{v}" if prefix else v}
+            for k, v in cleaned_aliases.items()
+        ],
+    }
+
+
+@app.patch("/admin/providers/{provider_id}")
+async def admin_update_provider(request: Request, provider_id: str, body: ProviderUpdateRequest):
+    """Update an existing dynamic provider: rename, change prefix, edit model selection/aliases, or replace keys."""
+    auth = request.headers.get("authorization", "")
+    if not auth.startswith("Bearer ") or auth.replace("Bearer ", "") != MASTER_KEY:
+        raise HTTPException(status_code=401, detail={"error": {"message": "Invalid master key"}})
+
+    if provider_id not in _dynamic_providers:
+        raise HTTPException(status_code=404, detail={"error": {"message": "Provider not found"}})
+
+    prov = _dynamic_providers[provider_id]
+
+    if body.name is not None:
+        new_name = body.name.strip()
+        if new_name:
+            prov["name"] = new_name
+
+    if body.prefix is not None:
+        prov["prefix"] = body.prefix.strip().strip("/")
+
+    if body.keys is not None:
+        new_keys = [k for k in body.keys if k]
+        prov["keys"] = new_keys
+        base_url = prov["base_url"].rstrip("/")
+        chat_url = f"{base_url}/chat/completions"
+        if new_keys:
+            UPSTREAM_API_KEYS[chat_url] = new_keys[0]
+        elif chat_url in UPSTREAM_API_KEYS:
+            del UPSTREAM_API_KEYS[chat_url]
+
+    if body.model_aliases is not None:
+        available = set(prov.get("available_models") or [])
+        cleaned: dict = {}
+        for upstream_id, exposed in body.model_aliases.items():
+            if not upstream_id or not exposed:
+                continue
+            # If we know the available set, restrict to it; otherwise accept.
+            if available and upstream_id not in available:
+                continue
+            cleaned[upstream_id] = str(exposed).strip()
+        prov["model_aliases"] = cleaned
+
+    _save_providers()
+
+    aliases = prov.get("model_aliases") or {}
+    return {
+        "success": True,
+        "id": provider_id,
+        "name": prov.get("name", ""),
+        "prefix": prov.get("prefix", ""),
+        "key_count": len(prov.get("keys", [])),
+        "model_count": len(aliases),
+        "models": [
+            {"upstream": k, "alias": v, "full_id": f"{prov.get('prefix','')}/{v}" if prov.get('prefix') else v}
+            for k, v in aliases.items()
+        ],
     }
 
 
@@ -1485,15 +1649,20 @@ async def admin_delete_provider(request: Request, provider_id: str):
     base_url = prov["base_url"].rstrip("/")
     chat_url = f"{base_url}/chat/completions"
 
-    # Remove model routes that pointed to this provider
-    for model_id in prov.get("models", []):
+    # Backward-compat clean-up: older imports registered raw model ids in UPSTREAMS.
+    legacy_models = list((prov.get("model_aliases") or {}).keys()) + (prov.get("available_models") or [])
+    for model_id in legacy_models:
         if model_id in UPSTREAMS:
             UPSTREAMS[model_id] = [u for u in UPSTREAMS[model_id] if u.get("url") != chat_url]
             if not UPSTREAMS[model_id]:
                 del UPSTREAMS[model_id]
 
-    # Remove API key mapping if no other provider uses it
-    if chat_url in UPSTREAM_API_KEYS:
+    # Remove API key mapping (no other provider is sharing this exact url)
+    sharing = any(
+        p.get("base_url", "").rstrip("/") == base_url
+        for p in _dynamic_providers.values()
+    )
+    if not sharing and chat_url in UPSTREAM_API_KEYS:
         del UPSTREAM_API_KEYS[chat_url]
 
     _save_providers()

app/templates/dashboard.html

@@ -405,48 +405,105 @@
                     </div>
 
                     <div class="space-y-3.5">
-                        <div>
-                            <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 font-mono">Friendly Provider Name</label>
-                            <input id="prov-name" type="text" placeholder="e.g. Hermit AI Cloud" 
-                                class="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 text-slate-100 font-sans text-sm focus:outline-none focus:border-amber-500/60 transition-all">
+                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
+                            <div>
+                                <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 font-mono">Provider Name</label>
+                                <input id="prov-name" type="text" placeholder="e.g. DeepBricks"
+                                    class="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 text-slate-100 font-sans text-sm focus:outline-none focus:border-amber-500/60 transition-all">
+                            </div>
+                            <div>
+                                <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 font-mono flex items-center gap-1.5">
+                                    Prefix
+                                    <span class="text-[9px] font-mono text-amber-400/80 bg-amber-500/10 border border-amber-500/20 px-1.5 py-0.5 rounded">{prefix}/model</span>
+                                </label>
+                                <input id="prov-prefix" type="text" placeholder="e.g. deb"
+                                    class="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 text-amber-200 font-mono text-xs focus:outline-none focus:border-amber-500/60 transition-all">
+                            </div>
                         </div>
                         <div>
                             <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 font-mono">Upstream Endpoint URL</label>
-                            <input id="prov-url" type="url" placeholder="https://api.yourprovider.com/v1" 
+                            <input id="prov-url" type="url" placeholder="https://api.yourprovider.com/v1"
                                 class="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 text-slate-100 font-mono text-xs focus:outline-none focus:border-amber-500/60 transition-all">
                         </div>
                         <div>
                             <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5 font-mono">Bearer Access Keys (one per line)</label>
-                            <textarea id="prov-keys" rows="3" placeholder="sk-provider-..." 
+                            <textarea id="prov-keys" rows="3" placeholder="sk-provider-..."
                                 class="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-2.5 text-slate-100 font-mono text-xs focus:outline-none focus:border-amber-500/60 transition-all resize-none"></textarea>
                         </div>
 
-                        <!-- Action Controls -->
+                        <!-- Step 1: Discover Models -->
                         <div class="flex gap-2 pt-2">
-                            <button id="prov-preview-btn" class="flex-1 bg-white/5 hover:bg-white/10 text-slate-200 text-xs font-semibold py-2.5 px-4 rounded-xl transition border border-white/15 flex items-center justify-center gap-1.5">
+                            <button id="prov-preview-btn" class="flex-1 bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-400 hover:to-amber-500 text-black text-xs font-bold py-2.5 px-4 rounded-xl transition shadow-md shadow-amber-500/10 flex items-center justify-center gap-1.5">
                                 <i data-lucide="stethoscope" class="w-3.5 h-3.5"></i>
-                                <span>Preview Models</span>
+                                <span>Discover Models</span>
                             </button>
-                            <button id="prov-import-btn" class="flex-1 bg-amber-500 hover:bg-amber-400 text-black text-xs font-bold py-2.5 px-4 rounded-xl transition flex items-center justify-center gap-1.5">
-                                <i data-lucide="import" class="w-3.5 h-3.5"></i>
-                                <span>Import Provider</span>
+                            <button id="prov-reset-btn" class="bg-white/5 hover:bg-white/10 text-slate-300 text-xs font-semibold py-2.5 px-3 rounded-xl transition border border-white/10 flex items-center justify-center" title="Reset form">
+                                <i data-lucide="rotate-ccw" class="w-3.5 h-3.5"></i>
                             </button>
                         </div>
 
-                        <!-- Provider probe output state -->
+                        <!-- Status line -->
                         <div id="prov-status" class="text-xs font-mono hidden"></div>
+                    </div>
+                </div>
 
-                        <!-- Live Interactive preview block -->
-                        <div id="prov-preview" class="hidden bg-black/45 rounded-xl p-4 border border-white/5 space-y-2">
-                            <div class="flex items-center justify-between">
-                                <span class="text-[11px] text-slate-400 uppercase font-mono">Auto-probed routes:</span>
-                                <span id="prov-preview-count" class="text-xs font-mono text-amber-400 bg-amber-500/10 px-2 py-0.5 rounded-full">0 models</span>
-                            </div>
-                            <div id="prov-preview-list" class="max-h-[140px] overflow-y-auto flex flex-wrap gap-1.5 pt-1">
-                                <!-- Dynamic dynamic previews loaded here -->
-                            </div>
+                <!-- Step 2: Model Selection + Alias Editor (full width when active) -->
+                <div id="prov-selector" class="hidden lg:col-span-12 glass rounded-2xl p-6 space-y-4 border border-amber-500/20 shadow-amber-glow">
+                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-white/5 pb-3">
+                        <div>
+                            <h3 class="text-sm font-semibold text-amber-300 flex items-center gap-2">
+                                <i data-lucide="list-checks" class="w-4 h-4"></i>
+                                Step 2 — Choose & Alias Models
+                            </h3>
+                            <p class="text-[11px] text-slate-400 mt-1">Tick the models you want to expose. Edit the right column to set custom IDs. They'll show in <code class="font-mono text-amber-400">/v1/models</code> as <code class="font-mono text-amber-400" id="prov-selector-prefix-preview">{prefix}/&lt;alias&gt;</code>.</p>
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <span id="prov-selected-count" class="text-xs font-mono text-amber-400 bg-amber-500/10 border border-amber-500/20 px-2.5 py-1 rounded-full">0 / 0 selected</span>
                         </div>
                     </div>
+
+                    <div class="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center">
+                        <div class="relative flex-1">
+                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500">
+                                <i data-lucide="search" class="w-4 h-4"></i>
+                            </span>
+                            <input id="prov-selector-search" type="text" placeholder="Filter models..."
+                                class="w-full bg-black/40 border border-white/10 rounded-xl pl-9 pr-4 py-2 text-xs text-slate-100 font-mono focus:outline-none focus:border-amber-500/50 transition-all">
+                        </div>
+                        <div class="flex gap-2 text-[11px] font-mono">
+                            <button id="prov-select-all" class="bg-white/5 hover:bg-white/10 text-slate-200 px-3 py-1.5 rounded-lg border border-white/10 transition flex items-center gap-1">
+                                <i data-lucide="check-square" class="w-3 h-3"></i> All
+                            </button>
+                            <button id="prov-select-none" class="bg-white/5 hover:bg-white/10 text-slate-200 px-3 py-1.5 rounded-lg border border-white/10 transition flex items-center gap-1">
+                                <i data-lucide="square" class="w-3 h-3"></i> None
+                            </button>
+                            <button id="prov-reset-aliases" class="bg-white/5 hover:bg-white/10 text-slate-200 px-3 py-1.5 rounded-lg border border-white/10 transition flex items-center gap-1" title="Reset aliases to upstream id">
+                                <i data-lucide="undo-2" class="w-3 h-3"></i> Reset
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Table header -->
+                    <div class="grid grid-cols-12 gap-3 text-[10px] uppercase font-mono text-slate-500 px-3">
+                        <div class="col-span-1"></div>
+                        <div class="col-span-5">Upstream Model ID</div>
+                        <div class="col-span-6">Exposed Alias <span class="text-amber-400/70">(editable)</span></div>
+                    </div>
+
+                    <div id="prov-selector-list" class="max-h-[420px] overflow-y-auto pr-1 space-y-1.5">
+                        <!-- Rows injected here -->
+                    </div>
+
+                    <div class="flex flex-col sm:flex-row gap-2 pt-3 border-t border-white/5">
+                        <button id="prov-cancel-import" class="flex-1 sm:flex-none bg-white/5 hover:bg-white/10 text-slate-300 text-xs font-semibold py-2.5 px-5 rounded-xl transition border border-white/10 flex items-center justify-center gap-1.5">
+                            <i data-lucide="x" class="w-3.5 h-3.5"></i>
+                            <span>Cancel</span>
+                        </button>
+                        <button id="prov-import-btn" class="flex-1 bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-400 hover:to-emerald-500 text-black text-xs font-bold py-2.5 px-5 rounded-xl transition shadow-md shadow-emerald-500/10 flex items-center justify-center gap-1.5">
+                            <i data-lucide="import" class="w-3.5 h-3.5"></i>
+                            <span>Import Selected Models</span>
+                        </button>
+                    </div>
                 </div>
 
                 <!-- Existing active dynamic upstreams -->
@@ -676,8 +733,26 @@
     };
 
     const mockProviders = [
-        { id: "prov_hermit", name: "Hermit Enterprise Cloud", base_url: "https://api.hermit-ai.com/v1", key_count: 3, models: ["gpt-4o-mini", "gpt-4o", "text-embedding-3"] },
-        { id: "prov_gemini_ext", name: "Gemini Reverse Endpoints", base_url: "https://gateway.internal-ai.net/gemini", key_count: 2, models: ["gemini-2.5-pro", "gemini-2.5-flash"] }
+        {
+            id: "prov_deepbricks", name: "DeepBricks", prefix: "deb",
+            base_url: "https://api.deepbricks.ai/v1", key_count: 2,
+            available_models: ["gpt-4o", "gpt-4o-mini", "claude-3-5-sonnet", "text-embedding-3"],
+            model_aliases: { "gpt-4o": "gpt-4o", "gpt-4o-mini": "mini" },
+            models: [
+                { upstream: "gpt-4o", alias: "gpt-4o", full_id: "deb/gpt-4o" },
+                { upstream: "gpt-4o-mini", alias: "mini", full_id: "deb/mini" }
+            ]
+        },
+        {
+            id: "prov_gemini_ext", name: "Gemini Reverse", prefix: "rev",
+            base_url: "https://gateway.internal-ai.net/gemini", key_count: 1,
+            available_models: ["gemini-2.5-pro", "gemini-2.5-flash", "gemini-1.5-pro"],
+            model_aliases: { "gemini-2.5-pro": "pro", "gemini-2.5-flash": "flash" },
+            models: [
+                { upstream: "gemini-2.5-pro", alias: "pro", full_id: "rev/pro" },
+                { upstream: "gemini-2.5-flash", alias: "flash", full_id: "rev/flash" }
+            ]
+        }
     ];
 
     const mockModels = [
@@ -1146,7 +1221,122 @@
 
     // ── Dynamic Provider Management ─────────────────────────────────────
     function escapeHtml(s) {
-        return String(s || '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+        return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+    }
+    function escapeAttr(s) { return escapeHtml(s).replace(/`/g, '&#96;'); }
+    function slugifyAlias(s) {
+        return String(s || '').toLowerCase().replace(/[^a-z0-9._-]+/g, '-').replace(/^-+|-+$/g, '');
+    }
+
+    // ── Selector State (Step 2: choose & alias models before import) ─────
+    const selectorState = {
+        active: false,
+        available: [],         // array of upstream model ids
+        selected: new Set(),   // selected upstream ids
+        aliases: {},           // upstream_id -> custom alias
+        filter: '',
+    };
+
+    function updateSelectorPrefixPreview() {
+        const p = (($('prov-prefix') || {}).value || '').trim();
+        const el = $('prov-selector-prefix-preview');
+        if (!el) return;
+        el.textContent = p ? `${p}/<alias>` : `<alias>  (no prefix)`;
+    }
+
+    function renderSelectorList() {
+        const list = $('prov-selector-list');
+        if (!list) return;
+        const q = (selectorState.filter || '').toLowerCase();
+        const items = selectorState.available
+            .filter(id => !q || id.toLowerCase().includes(q));
+        if (items.length === 0) {
+            list.innerHTML = `<div class="text-center text-slate-500 text-xs font-mono py-8">No models match this filter.</div>`;
+            return;
+        }
+        const prefix = (($('prov-prefix') || {}).value || '').trim();
+        list.innerHTML = items.map(id => {
+            const isSel = selectorState.selected.has(id);
+            const alias = selectorState.aliases[id] != null ? selectorState.aliases[id] : id;
+            const full = prefix ? `${prefix}/${alias}` : alias;
+            return `
+            <div class="grid grid-cols-12 gap-3 items-center bg-black/30 hover:bg-black/50 rounded-lg border ${isSel ? 'border-amber-500/30' : 'border-white/5'} px-3 py-2 transition-all" data-upstream="${escapeAttr(id)}">
+                <div class="col-span-1 flex justify-center">
+                    <label class="relative inline-flex items-center cursor-pointer">
+                        <input type="checkbox" class="prov-sel-check sr-only peer" ${isSel ? 'checked' : ''} data-upstream="${escapeAttr(id)}">
+                        <span class="w-4 h-4 rounded border ${isSel ? 'bg-amber-500 border-amber-500' : 'bg-black/40 border-white/20'} flex items-center justify-center transition-all">
+                            ${isSel ? '<svg class="w-3 h-3 text-black" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg>' : ''}
+                        </span>
+                    </label>
+                </div>
+                <div class="col-span-5 min-w-0">
+                    <div class="font-mono text-[11px] text-slate-200 truncate" title="${escapeAttr(id)}">${escapeHtml(id)}</div>
+                </div>
+                <div class="col-span-6">
+                    <div class="flex items-center gap-2">
+                        <input type="text"
+                            class="prov-sel-alias flex-1 bg-black/40 border border-white/10 focus:border-amber-500/50 rounded-md px-2 py-1 text-[11px] font-mono text-amber-200 focus:outline-none ${isSel ? '' : 'opacity-40'}"
+                            value="${escapeAttr(alias)}"
+                            data-upstream="${escapeAttr(id)}"
+                            ${isSel ? '' : 'disabled'}
+                            placeholder="alias">
+                        <span class="text-[10px] font-mono text-slate-500 truncate flex-shrink-0 min-w-0" title="${escapeAttr(full)}">→ ${escapeHtml(full)}</span>
+                    </div>
+                </div>
+            </div>`;
+        }).join('');
+
+        // Bind checkbox events
+        list.querySelectorAll('.prov-sel-check').forEach(cb => {
+            cb.addEventListener('change', (e) => {
+                const id = e.target.getAttribute('data-upstream');
+                if (e.target.checked) selectorState.selected.add(id);
+                else selectorState.selected.delete(id);
+                renderSelectorList();
+                updateSelectedCount();
+            });
+        });
+        list.querySelectorAll('.prov-sel-alias').forEach(inp => {
+            inp.addEventListener('input', (e) => {
+                const id = e.target.getAttribute('data-upstream');
+                selectorState.aliases[id] = e.target.value;
+                // Live-update the visible "→ prefix/alias" text without full re-render
+                const row = e.target.closest('[data-upstream]');
+                const prefix = (($('prov-prefix') || {}).value || '').trim();
+                const alias = e.target.value || id;
+                const full = prefix ? `${prefix}/${alias}` : alias;
+                const tail = row.querySelector('span[title]');
+                if (tail) { tail.textContent = '→ ' + full; tail.title = full; }
+            });
+        });
+    }
+
+    function updateSelectedCount() {
+        const el = $('prov-selected-count');
+        if (el) el.textContent = `${selectorState.selected.size} / ${selectorState.available.length} selected`;
+    }
+
+    function openSelector(models) {
+        selectorState.active = true;
+        selectorState.available = [...models];
+        selectorState.selected = new Set(models); // default: all selected
+        selectorState.aliases = {};
+        models.forEach(m => { selectorState.aliases[m] = m; });
+        selectorState.filter = '';
+        const search = $('prov-selector-search');
+        if (search) search.value = '';
+        const sel = $('prov-selector');
+        if (sel) sel.classList.remove('hidden');
+        updateSelectorPrefixPreview();
+        renderSelectorList();
+        updateSelectedCount();
+        if (sel) sel.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        lucide.createIcons();
+    }
+    function closeSelector() {
+        selectorState.active = false;
+        const sel = $('prov-selector');
+        if (sel) sel.classList.add('hidden');
     }
 
     async function loadProviders() {
@@ -1173,165 +1363,198 @@
             lucide.createIcons();
             return;
         }
-        
-        list.innerHTML = providers.map(p => `
-            <div class="bg-black/35 rounded-xl p-4 flex items-center justify-between border border-white/5 hover:border-amber-500/20 transition-all">
-                <div class="flex-1 min-w-0 pr-4">
-                    <div class="flex items-center gap-2">
-                        <span class="font-bold text-slate-200 text-sm tracking-tight">${escapeHtml(p.name)}</span>
-                        <span class="text-[10px] font-mono bg-amber-500/10 border border-amber-500/20 text-amber-400 px-2 py-0.2 rounded-md">${p.id}</span>
-                    </div>
-                    <div class="text-[11px] text-slate-400 font-mono mt-1.5 truncate flex items-center gap-1.5">
-                        <i data-lucide="link-2" class="w-3.5 h-3.5 text-slate-500"></i>
-                        <span>${escapeHtml(p.base_url)}</span>
+
+        list.innerHTML = providers.map(p => {
+            const prefix = p.prefix || '';
+            // p.models can be either rich objects {upstream,alias,full_id} (new) or plain strings (legacy)
+            const richModels = (p.models || []).map(m => typeof m === 'string'
+                ? { upstream: m, alias: m, full_id: prefix ? `${prefix}/${m}` : m }
+                : m);
+            const previewChips = richModels.slice(0, 6).map(m => `
+                <span class="text-[10px] font-mono bg-emerald-500/10 border border-emerald-500/20 text-emerald-300 px-2 py-0.5 rounded-md truncate max-w-[200px]" title="upstream: ${escapeAttr(m.upstream)}">
+                    ${escapeHtml(m.full_id)}
+                </span>`).join('');
+            const moreCount = Math.max(0, richModels.length - 6);
+            const prefixBadge = prefix
+                ? `<span class="text-[10px] font-mono bg-amber-500/15 border border-amber-500/30 text-amber-300 px-2 py-0.5 rounded-md tracking-wider">${escapeHtml(prefix)}/</span>`
+                : `<span class="text-[10px] font-mono bg-slate-500/10 border border-slate-500/20 text-slate-400 px-2 py-0.5 rounded-md">no prefix</span>`;
+            return `
+            <div class="bg-gradient-to-br from-black/45 to-black/25 rounded-2xl p-4 border border-white/5 hover:border-amber-500/25 transition-all group">
+                <div class="flex items-start justify-between gap-3">
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center gap-2 flex-wrap">
+                            <span class="font-bold text-slate-100 text-sm tracking-tight">${escapeHtml(p.name)}</span>
+                            ${prefixBadge}
+                            <span class="text-[9px] font-mono bg-white/5 border border-white/10 text-slate-400 px-1.5 py-0.5 rounded">${escapeHtml(p.id)}</span>
+                        </div>
+                        <div class="text-[11px] text-slate-400 font-mono mt-1.5 truncate flex items-center gap-1.5">
+                            <i data-lucide="link-2" class="w-3 h-3 text-slate-500"></i>
+                            <span class="truncate">${escapeHtml(p.base_url)}</span>
+                        </div>
                     </div>
-                    <div class="flex gap-4 mt-3">
-                        <span class="text-[11px] text-slate-500 font-mono flex items-center gap-1">
-                            <i data-lucide="key-round" class="w-3.5 h-3.5"></i> ${p.key_count} dynamic keys
-                        </span>
-                        <span class="text-[11px] text-slate-500 font-mono flex items-center gap-1">
-                            <i data-lucide="box" class="w-3.5 h-3.5"></i> ${(p.models || []).length} route models
-                        </span>
+                    <div class="flex flex-col sm:flex-row gap-1.5 flex-shrink-0">
+                        <button onclick="window.__editProvider('${escapeAttr(p.id)}')" class="text-amber-300/80 hover:text-amber-300 bg-amber-500/5 hover:bg-amber-500/15 border border-amber-500/20 text-[10px] font-mono font-bold px-2.5 py-1.5 rounded-lg transition flex items-center gap-1" title="Edit prefix & models">
+                            <i data-lucide="settings-2" class="w-3 h-3"></i> EDIT
+                        </button>
+                        <button onclick="window.__deleteProvider('${escapeAttr(p.id)}')" class="text-red-400/80 hover:text-red-400 bg-red-500/5 hover:bg-red-500/15 border border-red-500/20 text-[10px] font-mono font-bold px-2.5 py-1.5 rounded-lg transition flex items-center gap-1">
+                            <i data-lucide="trash-2" class="w-3 h-3"></i> DEL
+                        </button>
                     </div>
                 </div>
-                <button onclick="window.__deleteProvider('${p.id}')" class="ml-3 text-red-400/80 hover:text-red-400 bg-red-500/5 hover:bg-red-500/15 border border-red-500/10 text-xs font-mono font-bold px-3 py-1.5 rounded-lg transition flex items-center gap-1">
-                    <i data-lucide="trash-2" class="w-3.5 h-3.5"></i> DELETE
-                </button>
-            </div>
-        `).join('');
+                <div class="flex flex-wrap gap-3 mt-3 text-[11px] text-slate-500 font-mono">
+                    <span class="flex items-center gap-1"><i data-lucide="key-round" class="w-3 h-3"></i> ${p.key_count} keys</span>
+                    <span class="flex items-center gap-1"><i data-lucide="box" class="w-3 h-3"></i> ${richModels.length} exposed</span>
+                    <span class="flex items-center gap-1 text-slate-600"><i data-lucide="database" class="w-3 h-3"></i> ${(p.available_models || []).length} available upstream</span>
+                </div>
+                ${richModels.length > 0 ? `
+                <div class="mt-3 pt-3 border-t border-white/5 flex flex-wrap gap-1.5">
+                    ${previewChips}
+                    ${moreCount > 0 ? `<span class="text-[10px] font-mono text-slate-500 px-2 py-0.5">+${moreCount} more</span>` : ''}
+                </div>` : ''}
+            </div>`;
+        }).join('');
         lucide.createIcons();
     }
 
     window.__deleteProvider = async function(id) {
-        if (!confirm('Warning: Delete this AI provider and instantly un-route all matched downstream nodes?')) return;
+        if (!confirm('Delete this provider? All its prefixed models (e.g. prefix/alias) will stop routing immediately.')) return;
         try {
             const r = await api('/admin/providers/' + id, { method: 'DELETE' });
             if (!r || !r.ok) throw new Error('Delete failed on live server');
             toast('Provider removed from routing list', 'success');
             await loadProviders();
+            await loadModels();
         } catch (e) {
-            // Simulated playground deletions
-            mockProviders.splice(mockProviders.findIndex(p => p.id === id), 1);
+            const idx = mockProviders.findIndex(p => p.id === id);
+            if (idx >= 0) mockProviders.splice(idx, 1);
             renderProvidersList([...mockProviders]);
-            toast('Removed provider from simulated interface routes', 'success');
+            toast('Removed provider (offline mode)', 'success');
         }
     };
 
-    async function previewProvider() {
-        const name = $('prov-name').value.trim();
-        const baseUrl = $('prov-url').value.trim();
-        const keysText = $('prov-keys').value.trim();
+    // ── Step 1: Discover models, then open Step 2 selector ─────────────
+    async function discoverProvider() {
+        const name = ($('prov-name').value || '').trim();
+        const baseUrl = ($('prov-url').value || '').trim();
+        const prefix = (($('prov-prefix') || {}).value || '').trim();
+        const keysText = ($('prov-keys').value || '').trim();
         const keys = keysText.split('\n').map(k => k.trim()).filter(k => k);
         const status = $('prov-status');
 
-        if (!name || !baseUrl) { 
-            toast('Please enter Provider Name and Base URL', 'error'); 
-            return; 
+        if (!name || !baseUrl) {
+            toast('Provider Name and Base URL are required', 'error');
+            return;
+        }
+        if (keys.length === 0) {
+            toast('At least one API key is required', 'error');
+            return;
         }
 
         const btn = $('prov-preview-btn');
-        btn.disabled = true; 
-        btn.innerHTML = `<span>Probing...</span> <div class="animate-spin rounded-full h-3 w-3 border-b-2 border-slate-300"></div>`;
-        status.textContent = '';
+        btn.disabled = true;
+        btn.innerHTML = `<div class="animate-spin rounded-full h-3.5 w-3.5 border-b-2 border-black"></div><span>Discovering...</span>`;
         status.classList.remove('hidden');
-        
+        status.textContent = 'Probing upstream /models endpoint...';
+        status.className = 'text-xs font-mono text-slate-400 bg-white/5 px-2.5 py-1.5 rounded-lg border border-white/10';
+
+        let discovered = [];
         try {
             const r = await api('/admin/providers/preview', {
                 method: 'POST',
-                body: JSON.stringify({ name, base_url: baseUrl, keys })
+                body: JSON.stringify({ name, base_url: baseUrl, keys, prefix })
             });
-            
             if (!r || !r.ok) {
                 const d = await r.json().catch(() => ({}));
-                throw new Error(d?.error?.message || 'Upstream probe timed out');
+                throw new Error(d?.error?.message || 'Probe failed');
             }
-            
             const data = await r.json();
-            const preview = $('prov-preview');
-            preview.classList.remove('hidden');
-            $('prov-preview-count').textContent = `${data.models.length} models`;
-            $('prov-preview-list').innerHTML = data.models.map(m => 
-                `<span class="bg-indigo-950/40 border border-indigo-500/20 text-indigo-300 text-[10px] font-mono px-2 py-0.5 rounded">${escapeHtml(m)}</span>`
-            ).join('');
-            status.textContent = `✓ Active connection confirmed: ${data.models.length} models resolved`;
+            discovered = (data.models || []).filter(Boolean);
+            status.textContent = `✓ Discovered ${discovered.length} models from ${name}. Pick the ones to expose below.`;
             status.className = 'text-xs font-mono text-emerald-400 bg-emerald-500/5 px-2.5 py-1.5 rounded-lg border border-emerald-500/10';
         } catch (e) {
-            // Simulate probe models on fallback sandbox automatically
-            const simulatedModels = ["custom-llama-3-extra", "custom-embedding-model", "deepseek-pro-r1", "qwq-32b-preview"];
-            const preview = $('prov-preview');
-            preview.classList.remove('hidden');
-            $('prov-preview-count').textContent = `${simulatedModels.length} models discovered`;
-            $('prov-preview-list').innerHTML = simulatedModels.map(m => 
-                `<span class="bg-indigo-950/40 border border-indigo-500/20 text-indigo-300 text-[10px] font-mono px-2.5 py-1 rounded-lg">${escapeHtml(m)}</span>`
-            ).join('');
-            status.textContent = `✓ Dynamic probe simulation success: resolved 4 model-paths`;
-            status.className = 'text-xs font-mono text-emerald-400 bg-emerald-500/5 px-2.5 py-1.5 rounded-lg border border-emerald-500/10';
+            discovered = ["gpt-4o", "gpt-4o-mini", "claude-3-5-sonnet", "text-embedding-3", "deepseek-coder-v2"];
+            status.textContent = `(offline preview) Using ${discovered.length} simulated models.`;
+            status.className = 'text-xs font-mono text-amber-400 bg-amber-500/5 px-2.5 py-1.5 rounded-lg border border-amber-500/10';
         } finally {
-            btn.disabled = false; 
-            btn.innerHTML = `<i data-lucide="stethoscope" class="w-3.5 h-3.5"></i> <span>Preview Models</span>`;
+            btn.disabled = false;
+            btn.innerHTML = `<i data-lucide="stethoscope" class="w-3.5 h-3.5"></i><span>Discover Models</span>`;
             lucide.createIcons();
         }
+
+        if (discovered.length > 0) openSelector(discovered);
     }
 
+    // ── Step 3: Import with selected models + custom aliases ───────────
     async function importProvider() {
-        const name = $('prov-name').value.trim();
-        const baseUrl = $('prov-url').value.trim();
-        const keysText = $('prov-keys').value.trim();
+        if (!selectorState.active || selectorState.selected.size === 0) {
+            toast('Select at least one model to import', 'error');
+            return;
+        }
+        const name = ($('prov-name').value || '').trim();
+        const baseUrl = ($('prov-url').value || '').trim();
+        const prefix = (($('prov-prefix') || {}).value || '').trim();
+        const keysText = ($('prov-keys').value || '').trim();
         const keys = keysText.split('\n').map(k => k.trim()).filter(k => k);
-        const status = $('prov-status');
 
         if (!name || !baseUrl || keys.length === 0) {
-            toast('Name, URL and at least one credential token required to import', 'error'); 
+            toast('Form is incomplete', 'error');
             return;
         }
 
+        // Build model_aliases map (only for selected models)
+        const model_aliases = {};
+        const seenAliases = new Set();
+        for (const id of selectorState.selected) {
+            let alias = (selectorState.aliases[id] || id).trim();
+            alias = alias || id;
+            if (seenAliases.has(alias)) {
+                toast(`Duplicate alias "${alias}" — aliases must be unique within a provider`, 'error');
+                return;
+            }
+            seenAliases.add(alias);
+            model_aliases[id] = alias;
+        }
+
         const btn = $('prov-import-btn');
-        btn.disabled = true; 
-        btn.innerHTML = `<span>Importing...</span> <div class="animate-spin rounded-full h-3 w-3 border-b-2 border-slate-900"></div>`;
-        status.textContent = '';
-        
+        btn.disabled = true;
+        btn.innerHTML = `<div class="animate-spin rounded-full h-3.5 w-3.5 border-b-2 border-black"></div><span>Importing...</span>`;
+
         try {
             const r = await api('/admin/providers/import', {
                 method: 'POST',
-                body: JSON.stringify({ name, base_url: baseUrl, keys })
+                body: JSON.stringify({ name, base_url: baseUrl, keys, prefix, model_aliases })
             });
             if (!r || !r.ok) {
                 const d = await r.json().catch(() => ({}));
-                throw new Error(d?.error?.message || 'Import process aborted');
+                throw new Error(d?.error?.message || 'Import failed');
             }
             const data = await r.json();
-            toast(`Imported ${data.model_count} models from ${data.name}`, 'success');
+            const exampleId = prefix ? `${prefix}/${Object.values(model_aliases)[0]}` : Object.values(model_aliases)[0];
+            toast(`Imported ${data.model_count} models. Try: ${exampleId}`, 'success');
             resetProviderForm();
             await loadProviders();
+            await loadModels();
         } catch (e) {
-            // Simulated local add to active list
-            const mockId = "prov_" + name.toLowerCase().replace(/\s+/g, '_');
-            const newSimulatedProv = {
-                id: mockId,
-                name: name,
-                base_url: baseUrl,
-                key_count: keys.length,
-                models: ["custom-llama-3-extra", "deepseek-pro-r1", "qwq-32b-preview"]
-            };
-            mockProviders.push(newSimulatedProv);
-            
-            // Inject into catalog
-            newSimulatedProv.models.forEach(modelName => {
-                mockModels.push({
-                    id: Math.random().toString(),
-                    name: modelName,
-                    provider: name,
-                    upstreams: 1
-                });
+            // Offline fallback
+            const mockId = "prov_" + slugifyAlias(name);
+            const richModels = Object.entries(model_aliases).map(([up, al]) => ({
+                upstream: up, alias: al, full_id: prefix ? `${prefix}/${al}` : al
+            }));
+            mockProviders.push({
+                id: mockId, name, prefix, base_url: baseUrl, key_count: keys.length,
+                available_models: selectorState.available,
+                model_aliases, models: richModels,
             });
-
-            toast(`Simulated dynamic import successful for ${name}`, 'success');
+            richModels.forEach(m => mockModels.push({
+                id: Math.random().toString(), name: m.full_id, provider: name, upstreams: 1
+            }));
+            toast(`Imported ${richModels.length} models (offline mode)`, 'success');
             resetProviderForm();
             renderProvidersList([...mockProviders]);
             renderModels('');
         } finally {
-            btn.disabled = false; 
-            btn.innerHTML = `<i data-lucide="import" class="w-3.5 h-3.5"></i> <span>Import Provider</span>`;
+            btn.disabled = false;
+            btn.innerHTML = `<i data-lucide="import" class="w-3.5 h-3.5"></i><span>Import Selected Models</span>`;
             lucide.createIcons();
         }
     }
@@ -1340,12 +1563,226 @@
         $('prov-name').value = '';
         $('prov-url').value = '';
         $('prov-keys').value = '';
-        $('prov-preview').classList.add('hidden');
+        const px = $('prov-prefix'); if (px) px.value = '';
         $('prov-status').classList.add('hidden');
+        closeSelector();
     }
 
-    if ($('prov-preview-btn')) $('prov-preview-btn').addEventListener('click', previewProvider);
+    // Wire up Step 1/2 controls
+    if ($('prov-preview-btn')) $('prov-preview-btn').addEventListener('click', discoverProvider);
     if ($('prov-import-btn')) $('prov-import-btn').addEventListener('click', importProvider);
+    if ($('prov-cancel-import')) $('prov-cancel-import').addEventListener('click', () => { closeSelector(); toast('Import cancelled'); });
+    if ($('prov-reset-btn')) $('prov-reset-btn').addEventListener('click', () => { resetProviderForm(); toast('Form reset'); });
+    if ($('prov-prefix')) $('prov-prefix').addEventListener('input', () => {
+        updateSelectorPrefixPreview();
+        if (selectorState.active) renderSelectorList();
+    });
+    if ($('prov-selector-search')) $('prov-selector-search').addEventListener('input', (e) => {
+        selectorState.filter = e.target.value || '';
+        renderSelectorList();
+    });
+    if ($('prov-select-all')) $('prov-select-all').addEventListener('click', () => {
+        selectorState.available.forEach(id => selectorState.selected.add(id));
+        renderSelectorList(); updateSelectedCount();
+    });
+    if ($('prov-select-none')) $('prov-select-none').addEventListener('click', () => {
+        selectorState.selected.clear(); renderSelectorList(); updateSelectedCount();
+    });
+    if ($('prov-reset-aliases')) $('prov-reset-aliases').addEventListener('click', () => {
+        selectorState.available.forEach(id => { selectorState.aliases[id] = id; });
+        renderSelectorList();
+        toast('Aliases reset to upstream IDs');
+    });
+
+    // ── Edit Provider Modal ─────────────────────────────────────────────
+    const editState = {
+        providerId: null,
+        original: null,
+        prefix: '',
+        name: '',
+        available: [],
+        selected: new Set(),
+        aliases: {},
+        filter: '',
+    };
+
+    function renderEditList() {
+        const list = $('edit-prov-list');
+        if (!list) return;
+        const q = (editState.filter || '').toLowerCase();
+        const items = editState.available.filter(id => !q || id.toLowerCase().includes(q));
+        if (items.length === 0) {
+            list.innerHTML = `<div class="text-center text-slate-500 text-xs font-mono py-8">No models match this filter.</div>`;
+            return;
+        }
+        list.innerHTML = items.map(id => {
+            const isSel = editState.selected.has(id);
+            const alias = editState.aliases[id] != null ? editState.aliases[id] : id;
+            const full = editState.prefix ? `${editState.prefix}/${alias}` : alias;
+            return `
+            <div class="grid grid-cols-12 gap-3 items-center bg-black/30 hover:bg-black/50 rounded-lg border ${isSel ? 'border-amber-500/30' : 'border-white/5'} px-3 py-2 transition-all" data-upstream="${escapeAttr(id)}">
+                <div class="col-span-1 flex justify-center">
+                    <label class="relative inline-flex items-center cursor-pointer">
+                        <input type="checkbox" class="edit-prov-check sr-only peer" ${isSel ? 'checked' : ''} data-upstream="${escapeAttr(id)}">
+                        <span class="w-4 h-4 rounded border ${isSel ? 'bg-amber-500 border-amber-500' : 'bg-black/40 border-white/20'} flex items-center justify-center transition-all">
+                            ${isSel ? '<svg class="w-3 h-3 text-black" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg>' : ''}
+                        </span>
+                    </label>
+                </div>
+                <div class="col-span-5 min-w-0">
+                    <div class="font-mono text-[11px] text-slate-200 truncate" title="${escapeAttr(id)}">${escapeHtml(id)}</div>
+                </div>
+                <div class="col-span-6">
+                    <div class="flex items-center gap-2">
+                        <input type="text"
+                            class="edit-prov-alias flex-1 bg-black/40 border border-white/10 focus:border-amber-500/50 rounded-md px-2 py-1 text-[11px] font-mono text-amber-200 focus:outline-none ${isSel ? '' : 'opacity-40'}"
+                            value="${escapeAttr(alias)}"
+                            data-upstream="${escapeAttr(id)}"
+                            ${isSel ? '' : 'disabled'}>
+                        <span class="text-[10px] font-mono text-slate-500 truncate flex-shrink-0 min-w-0" title="${escapeAttr(full)}">→ ${escapeHtml(full)}</span>
+                    </div>
+                </div>
+            </div>`;
+        }).join('');
+        list.querySelectorAll('.edit-prov-check').forEach(cb => {
+            cb.addEventListener('change', (e) => {
+                const id = e.target.getAttribute('data-upstream');
+                if (e.target.checked) editState.selected.add(id);
+                else editState.selected.delete(id);
+                renderEditList();
+                $('edit-prov-count').textContent = `${editState.selected.size} / ${editState.available.length} selected`;
+            });
+        });
+        list.querySelectorAll('.edit-prov-alias').forEach(inp => {
+            inp.addEventListener('input', (e) => {
+                const id = e.target.getAttribute('data-upstream');
+                editState.aliases[id] = e.target.value;
+                const row = e.target.closest('[data-upstream]');
+                const alias = e.target.value || id;
+                const full = editState.prefix ? `${editState.prefix}/${alias}` : alias;
+                const tail = row.querySelector('span[title]');
+                if (tail) { tail.textContent = '→ ' + full; tail.title = full; }
+            });
+        });
+    }
+
+    window.__editProvider = async function(id) {
+        // Resolve provider snapshot. Try API first, then mock.
+        let prov = null;
+        try {
+            const r = await api('/admin/providers');
+            if (r && r.ok) {
+                const data = await r.json();
+                prov = (data.providers || []).find(p => p.id === id);
+            }
+        } catch (_) {}
+        if (!prov) prov = mockProviders.find(p => p.id === id);
+        if (!prov) { toast('Provider not found', 'error'); return; }
+
+        editState.providerId = prov.id;
+        editState.original = prov;
+        editState.name = prov.name || '';
+        editState.prefix = prov.prefix || '';
+        editState.available = [...(prov.available_models || Object.keys(prov.model_aliases || {}))];
+        editState.aliases = Object.assign({}, prov.model_aliases || {});
+        editState.selected = new Set(Object.keys(editState.aliases));
+        editState.available.forEach(m => { if (!(m in editState.aliases)) editState.aliases[m] = m; });
+        editState.filter = '';
+
+        $('edit-prov-modal-title').textContent = `Edit: ${prov.name}`;
+        $('edit-prov-name').value = editState.name;
+        $('edit-prov-prefix').value = editState.prefix;
+        $('edit-prov-search').value = '';
+        $('edit-prov-count').textContent = `${editState.selected.size} / ${editState.available.length} selected`;
+        renderEditList();
+
+        $('edit-prov-modal').classList.remove('hidden');
+        lucide.createIcons();
+    };
+
+    function closeEditModal() {
+        $('edit-prov-modal').classList.add('hidden');
+        editState.providerId = null;
+    }
+
+    async function saveEditProvider() {
+        if (!editState.providerId) return;
+        const newName = ($('edit-prov-name').value || '').trim() || editState.name;
+        const newPrefix = ($('edit-prov-prefix').value || '').trim();
+
+        // Build model_aliases map from selection
+        const model_aliases = {};
+        const seen = new Set();
+        for (const id of editState.selected) {
+            let alias = (editState.aliases[id] || id).trim() || id;
+            if (seen.has(alias)) {
+                toast(`Duplicate alias "${alias}"`, 'error');
+                return;
+            }
+            seen.add(alias);
+            model_aliases[id] = alias;
+        }
+
+        const btn = $('edit-prov-save');
+        btn.disabled = true;
+        const oldHtml = btn.innerHTML;
+        btn.innerHTML = `<div class="animate-spin rounded-full h-3.5 w-3.5 border-b-2 border-black"></div><span>Saving...</span>`;
+
+        try {
+            const r = await api('/admin/providers/' + editState.providerId, {
+                method: 'PATCH',
+                body: JSON.stringify({ name: newName, prefix: newPrefix, model_aliases })
+            });
+            if (!r || !r.ok) {
+                const d = await r.json().catch(() => ({}));
+                throw new Error(d?.error?.message || 'Save failed');
+            }
+            toast('Provider updated', 'success');
+            closeEditModal();
+            await loadProviders();
+            await loadModels();
+        } catch (e) {
+            // Offline: mutate mock
+            const p = mockProviders.find(x => x.id === editState.providerId);
+            if (p) {
+                p.name = newName;
+                p.prefix = newPrefix;
+                p.model_aliases = model_aliases;
+                p.models = Object.entries(model_aliases).map(([up, al]) => ({
+                    upstream: up, alias: al, full_id: newPrefix ? `${newPrefix}/${al}` : al
+                }));
+            }
+            renderProvidersList([...mockProviders]);
+            toast('Updated provider (offline mode)', 'success');
+            closeEditModal();
+        } finally {
+            btn.disabled = false;
+            btn.innerHTML = oldHtml;
+            lucide.createIcons();
+        }
+    }
+
+    if ($('edit-prov-close')) $('edit-prov-close').addEventListener('click', closeEditModal);
+    if ($('edit-prov-cancel')) $('edit-prov-cancel').addEventListener('click', closeEditModal);
+    if ($('edit-prov-save')) $('edit-prov-save').addEventListener('click', saveEditProvider);
+    if ($('edit-prov-search')) $('edit-prov-search').addEventListener('input', (e) => {
+        editState.filter = e.target.value || '';
+        renderEditList();
+    });
+    if ($('edit-prov-prefix')) $('edit-prov-prefix').addEventListener('input', (e) => {
+        editState.prefix = (e.target.value || '').trim();
+        renderEditList();
+    });
+    if ($('edit-prov-select-all')) $('edit-prov-select-all').addEventListener('click', () => {
+        editState.available.forEach(id => editState.selected.add(id));
+        renderEditList();
+        $('edit-prov-count').textContent = `${editState.selected.size} / ${editState.available.length} selected`;
+    });
+    if ($('edit-prov-select-none')) $('edit-prov-select-none').addEventListener('click', () => {
+        editState.selected.clear();
+        renderEditList();
+        $('edit-prov-count').textContent = `${editState.selected.size} / ${editState.available.length} selected`;
+    });
 
     // ── Models Catalog ─────────────────────────────────────────
     let _modelsCache = [];
@@ -1424,5 +1861,81 @@
     initAuth();
 })();
 </script>
+
+<!-- ── Edit Provider Modal ─────────────────────────────────────────── -->
+<div id="edit-prov-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm">
+    <div class="glass-bright rounded-2xl w-full max-w-4xl max-h-[90vh] flex flex-col shadow-2xl border border-amber-500/20">
+        <!-- Header -->
+        <div class="flex items-center justify-between px-6 py-4 border-b border-white/10">
+            <div class="flex items-center gap-3 min-w-0">
+                <div class="p-2 bg-amber-500/15 text-amber-400 rounded-lg flex-shrink-0">
+                    <i data-lucide="settings-2" class="w-4 h-4"></i>
+                </div>
+                <div class="min-w-0">
+                    <h3 id="edit-prov-modal-title" class="font-bold text-slate-100 truncate">Edit Provider</h3>
+                    <p class="text-[11px] text-slate-400 font-mono">Update prefix, model selection, and aliases</p>
+                </div>
+            </div>
+            <button id="edit-prov-close" class="text-slate-400 hover:text-slate-100 bg-white/5 hover:bg-white/10 rounded-lg p-1.5 transition">
+                <i data-lucide="x" class="w-4 h-4"></i>
+            </button>
+        </div>
+
+        <!-- Top: name + prefix -->
+        <div class="px-6 py-4 grid grid-cols-1 sm:grid-cols-2 gap-4 border-b border-white/5">
+            <div>
+                <label class="block text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5 font-mono">Display Name</label>
+                <input id="edit-prov-name" type="text" class="w-full bg-black/40 border border-white/10 rounded-xl px-3 py-2 text-slate-100 text-sm focus:outline-none focus:border-amber-500/60 transition-all">
+            </div>
+            <div>
+                <label class="block text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5 font-mono flex items-center gap-1.5">
+                    Prefix <span class="text-[9px] text-amber-400/80 bg-amber-500/10 border border-amber-500/20 px-1.5 py-0.5 rounded">{prefix}/model</span>
+                </label>
+                <input id="edit-prov-prefix" type="text" class="w-full bg-black/40 border border-white/10 rounded-xl px-3 py-2 text-amber-200 font-mono text-xs focus:outline-none focus:border-amber-500/60 transition-all" placeholder="e.g. deb">
+            </div>
+        </div>
+
+        <!-- Filter & bulk -->
+        <div class="px-6 py-3 flex flex-col sm:flex-row gap-3 items-stretch sm:items-center border-b border-white/5">
+            <div class="relative flex-1">
+                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500">
+                    <i data-lucide="search" class="w-4 h-4"></i>
+                </span>
+                <input id="edit-prov-search" type="text" placeholder="Filter models..."
+                    class="w-full bg-black/40 border border-white/10 rounded-xl pl-9 pr-4 py-2 text-xs text-slate-100 font-mono focus:outline-none focus:border-amber-500/50 transition-all">
+            </div>
+            <div class="flex gap-2 text-[11px] font-mono">
+                <button id="edit-prov-select-all" class="bg-white/5 hover:bg-white/10 text-slate-200 px-3 py-1.5 rounded-lg border border-white/10 transition flex items-center gap-1">
+                    <i data-lucide="check-square" class="w-3 h-3"></i> All
+                </button>
+                <button id="edit-prov-select-none" class="bg-white/5 hover:bg-white/10 text-slate-200 px-3 py-1.5 rounded-lg border border-white/10 transition flex items-center gap-1">
+                    <i data-lucide="square" class="w-3 h-3"></i> None
+                </button>
+                <span id="edit-prov-count" class="text-xs font-mono text-amber-400 bg-amber-500/10 border border-amber-500/20 px-2.5 py-1.5 rounded-lg">0 / 0 selected</span>
+            </div>
+        </div>
+
+        <!-- Table -->
+        <div class="px-6 pt-3 grid grid-cols-12 gap-3 text-[10px] uppercase font-mono text-slate-500">
+            <div class="col-span-1"></div>
+            <div class="col-span-5">Upstream Model ID</div>
+            <div class="col-span-6">Exposed Alias <span class="text-amber-400/70">(editable)</span></div>
+        </div>
+        <div id="edit-prov-list" class="px-6 py-3 flex-1 overflow-y-auto space-y-1.5">
+            <!-- Rows injected -->
+        </div>
+
+        <!-- Footer -->
+        <div class="px-6 py-4 border-t border-white/10 flex flex-col sm:flex-row gap-2 justify-end">
+            <button id="edit-prov-cancel" class="bg-white/5 hover:bg-white/10 text-slate-300 text-xs font-semibold py-2.5 px-5 rounded-xl transition border border-white/10 flex items-center justify-center gap-1.5">
+                <i data-lucide="x" class="w-3.5 h-3.5"></i><span>Cancel</span>
+            </button>
+            <button id="edit-prov-save" class="bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-400 hover:to-amber-500 text-black text-xs font-bold py-2.5 px-5 rounded-xl transition shadow-md shadow-amber-500/10 flex items-center justify-center gap-1.5">
+                <i data-lucide="save" class="w-3.5 h-3.5"></i><span>Save Changes</span>
+            </button>
+        </div>
+    </div>
+</div>
+
 </body>
 </html>