From 56474264d6649454600ddb7cc454469d8e4cd6a2 Mon Sep 17 00:00:00 2001
From: Hermes Agent <agent@hermes.local>
Date: Wed, 3 Jun 2026 13:14:31 +0800
Subject: [PATCH] refactor(portal): dedup inline scripts in accounts +
 batch-import + providers

All three admin pages had two parallel inline <script> blocks (a modern S1
that used adminRuntime + a legacy S2 that was self-contained). Both had
a nested <script> text inside S1 that the browser tolerated only because
the second script re-ran any state-affecting calls. Merge into a single
inline script per page; fix the nested <script> comment.

- providers.html: 100371 -> 62761 chars (-37610, -37%)
- accounts.html:  54878 -> 33098 chars  (-21780, -40%)
- batch-import:   43861 -> 26570 chars  (-17291, -39%)

Also rename draftProviderIDInput -> providerIDInput in providers.html
(the old draft-provider-id input was removed during the earlier workflow
merge, leaving the script with a null addEventListener on draft id).

All scripts pass node --check. Both test_tksea_portal_assets.sh and
verify_frontend_smoke.sh PASS.
---
 deploy/tksea-portal/admin-batch-import.html |  466 +------
 deploy/tksea-portal/admin/accounts.html     |  496 +------
 deploy/tksea-portal/admin/providers.html    | 1380 ++++---------------
 3 files changed, 301 insertions(+), 2041 deletions(-)

diff --git a/deploy/tksea-portal/admin-batch-import.html b/deploy/tksea-portal/admin-batch-import.html
index 03f542a6..f55eb919 100644
--- a/deploy/tksea-portal/admin-batch-import.html
+++ b/deploy/tksea-portal/admin-batch-import.html
@@ -253,6 +253,7 @@ https://api.other.com/v1|sk-example-2|deepseek-chat,gpt-5.4"></textarea>
   <script src="/portal/admin-common.js"></script>
   <script src="/portal/portal.js"></script>
   <script>
+
     const AdminCommon = window.Sub2ApiAdminCommon;
     window.Sub2ApiPortal.renderModernAdminNav(document.querySelector("[data-admin-nav]"), "batch-import");
     (function injectIcons(){
@@ -263,7 +264,7 @@ https://api.other.com/v1|sk-example-2|deepseek-chat,gpt-5.4"></textarea>
       M("bimp-m4", "package");
     })();
 
-  <script>
+  // <script>
     AdminCommon.renderAdminNav(document.querySelector("[data-admin-nav]"), "batch-import");
     const storageKey = "sub2api-crm-batch-import-admin-v1";
     const state = {
@@ -654,467 +655,6 @@ https://api.other.com/v1|sk-example-2|deepseek-chat,gpt-5.4"></textarea>
     updateAccessModeFields();
     syncHeaderMetrics();
     refreshAdminSession().catch(() => {});
-  </script>
-<script>
-    const storageKey = "sub2api-crm-batch-import-admin-v1";
-    const state = {
-      currentRunID: "",
-      currentItems: [],
-      currentRun: null,
-    };
-
-    const statusbar = document.getElementById("statusbar");
-    const apiBaseInput = document.getElementById("api-base");
-    const hostIDInput = document.getElementById("host-id");
-    const adminTokenInput = document.getElementById("admin-token");
-    const adminUsernameInput = document.getElementById("admin-username");
-    const adminPasswordInput = document.getElementById("admin-password");
-    const adminLoginButton = document.getElementById("admin-login-btn");
-    const adminLogoutButton = document.getElementById("admin-logout-btn");
-    const adminSessionStatus = document.getElementById("admin-session-status");
-    const modeInput = document.getElementById("mode");
-    const accessModeInput = document.getElementById("access-mode");
-    const confirmTimeoutInput = document.getElementById("confirm-timeout");
-    const probeAPIKeyInput = document.getElementById("probe-api-key");
-    const subscriptionUsersInput = document.getElementById("subscription-users");
-    const subscriptionDaysInput = document.getElementById("subscription-days");
-    const entriesInput = document.getElementById("entries");
-    const runIDInput = document.getElementById("run-id");
-    const selfServiceFields = document.getElementById("self-service-fields");
-    const subscriptionFields = document.getElementById("subscription-fields");
-
-    const metricApiRoot = document.getElementById("metric-api-root");
-    const metricRunID = document.getElementById("metric-run-id");
-    const metricRunState = document.getElementById("metric-run-state");
-    const runMeta = document.getElementById("run-meta");
-    const itemsTbody = document.getElementById("items-tbody");
-
-    const filterQueryInput = document.getElementById("filter-query");
-    const filterMatchedStateInput = document.getElementById("filter-matched-state");
-    const filterAccountResolutionInput = document.getElementById("filter-account-resolution");
-
-    const summaryTargets = {
-      total: document.getElementById("sum-total"),
-      completed: document.getElementById("sum-completed"),
-      active: document.getElementById("sum-active"),
-      degraded: document.getElementById("sum-degraded"),
-      broken: document.getElementById("sum-broken"),
-    };
-
-    function setStatus(message, tone = "") {
-      statusbar.textContent = message;
-      if (tone) {
-        statusbar.dataset.tone = tone;
-      } else {
-        delete statusbar.dataset.tone;
-      }
-    }
-
-    function defaultApiBase() {
-      return `${window.location.origin}/portal-admin-api`;
-    }
-
-    function saveConfig() {
-      localStorage.setItem(storageKey, JSON.stringify({
-        apiBase: apiBaseInput.value.trim(),
-        hostID: hostIDInput.value.trim(),
-        adminToken: adminTokenInput.value,
-        adminUsername: adminUsernameInput.value.trim(),
-        mode: modeInput.value,
-        accessMode: accessModeInput.value,
-        confirmTimeoutSec: confirmTimeoutInput.value,
-        probeAPIKey: probeAPIKeyInput.value.trim(),
-        subscriptionUsers: subscriptionUsersInput.value.trim(),
-        subscriptionDays: subscriptionDaysInput.value,
-        entries: entriesInput.value,
-      }));
-      setStatus("本地配置已保存。", "success");
-      syncHeaderMetrics();
-    }
-
-    function restoreConfig() {
-      const raw = localStorage.getItem(storageKey);
-      if (!raw) {
-        apiBaseInput.value = defaultApiBase();
-        hostIDInput.value = "";
-        confirmTimeoutInput.value = "10";
-        subscriptionDaysInput.value = "30";
-        return;
-      }
-      try {
-        const payload = JSON.parse(raw);
-        apiBaseInput.value = payload.apiBase || defaultApiBase();
-        hostIDInput.value = payload.hostID || "";
-        adminTokenInput.value = payload.adminToken || "";
-        adminUsernameInput.value = payload.adminUsername || "";
-        modeInput.value = payload.mode || "strict";
-        accessModeInput.value = payload.accessMode || "self_service";
-        confirmTimeoutInput.value = payload.confirmTimeoutSec || "10";
-        probeAPIKeyInput.value = payload.probeAPIKey || "";
-        subscriptionUsersInput.value = payload.subscriptionUsers || "";
-        subscriptionDaysInput.value = payload.subscriptionDays || "30";
-        entriesInput.value = payload.entries || entriesInput.value;
-      } catch (error) {
-        apiBaseInput.value = defaultApiBase();
-      }
-    }
-
-    function loadSampleEntries() {
-      entriesInput.value = [
-        "https://api.example.com/v1|sk-example-1|kimi-k2.6",
-        "https://api.other.com/v1|sk-example-2|deepseek-chat,gpt-5.4",
-      ].join("\\n");
-      setStatus("示例 entries 已恢复。");
-    }
-
-    function updateAccessModeFields() {
-      const accessMode = accessModeInput.value;
-      const subscriptionMode = accessMode === "subscription";
-      selfServiceFields.hidden = subscriptionMode;
-      subscriptionFields.hidden = !subscriptionMode;
-    }
-
-    function normalizeApiBase() {
-      return (apiBaseInput.value.trim() || defaultApiBase()).replace(/\/+$/, "");
-    }
-
-    function authHeaders() {
-      const headers = {
-        "Content-Type": "application/json",
-      };
-      const token = adminTokenInput.value.trim();
-      if (token) {
-        headers.Authorization = `Bearer ${token}`;
-      }
-      return headers;
-    }
-
-    function parseEntries() {
-      return entriesInput.value
-        .split("\n")
-        .map((line) => line.trim())
-        .filter(Boolean)
-        .map((line, index) => {
-          const [baseURL = "", apiKey = "", models = ""] = line.split("|").map((part) => part.trim());
-          if (!baseURL || !apiKey) {
-            throw new Error(`第 ${index + 1} 行格式不完整，需要 base_url|api_key|models`);
-          }
-          return {
-            base_url: baseURL,
-            api_key: apiKey,
-            requested_models: models ? models.split(",").map((item) => item.trim()).filter(Boolean) : [],
-          };
-        });
-    }
-
-    function buildCreatePayload() {
-      const payload = {
-        host_id: hostIDInput.value.trim(),
-        mode: modeInput.value,
-        access_mode: accessModeInput.value,
-        confirm_wait_timeout_sec: Number(confirmTimeoutInput.value || 10),
-        entries: parseEntries(),
-      };
-      if (!payload.host_id) {
-        throw new Error("host_id 不能为空");
-      }
-      if (payload.access_mode === "self_service") {
-        payload.probe_api_key = probeAPIKeyInput.value.trim();
-        if (!payload.probe_api_key) {
-          throw new Error("self_service 模式下 probe_api_key 不能为空");
-        }
-      } else {
-        payload.subscription_users = subscriptionUsersInput.value
-          .split(",")
-          .map((value) => value.trim())
-          .filter(Boolean);
-        payload.subscription_days = Number(subscriptionDaysInput.value || 30);
-        if (!payload.subscription_users.length) {
-          throw new Error("subscription 模式下 subscription_users 不能为空");
-        }
-        if (!payload.subscription_days) {
-          throw new Error("subscription 模式下 subscription_days 不能为空");
-        }
-      }
-      return payload;
-    }
-
-    async function requestJSON(path, options = {}) {
-      const { skipAuth = false, headers = {}, ...rest } = options;
-      const finalHeaders = { ...headers };
-      if (!skipAuth) {
-        Object.assign(finalHeaders, authHeaders(), finalHeaders);
-      }
-      const response = await fetch(`${normalizeApiBase()}${path}`, {
-        ...rest,
-        credentials: "include",
-        headers: finalHeaders,
-      });
-      const text = await response.text();
-      let payload = {};
-      try {
-        payload = text ? JSON.parse(text) : {};
-      } catch (error) {
-        payload = { raw: text };
-      }
-      if (!response.ok) {
-        const message = payload?.error?.message || payload?.error || payload?.raw || `HTTP ${response.status}`;
-        throw new Error(message);
-      }
-      return payload;
-    }
-
-    async function refreshAdminSession() {
-      try {
-        const payload = await requestJSON("/api/admin/session", { skipAuth: true });
-        if (payload.username && !adminUsernameInput.value.trim()) {
-          adminUsernameInput.value = payload.username;
-        }
-        if (payload.authenticated) {
-          setStatus(`管理员已登录：${payload.username}`, "success");
-          adminSessionStatus.textContent = `已登录：${payload.username}`;
-        } else if (payload.login_enabled) {
-          adminSessionStatus.textContent = "未登录，可直接使用管理员用户名密码建立会话。";
-        } else {
-          adminSessionStatus.textContent = "当前实例未启用管理员密码登录，只能使用 Bearer token。";
-        }
-        return payload;
-      } catch (error) {
-        adminSessionStatus.textContent = `管理员会话检查失败：${error.message}`;
-        throw error;
-      }
-    }
-
-    async function loginAdminSession() {
-      const username = adminUsernameInput.value.trim();
-      const password = adminPasswordInput.value;
-      if (!username || !password) {
-        throw new Error("管理员用户名和密码不能为空");
-      }
-      const payload = await requestJSON("/api/admin/session/login", {
-        method: "POST",
-        skipAuth: true,
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ username, password }),
-      });
-      adminPasswordInput.value = "";
-      saveConfig();
-      adminSessionStatus.textContent = `已登录：${payload.username}`;
-      return payload;
-    }
-
-    async function logoutAdminSession() {
-      const response = await fetch(`${normalizeApiBase()}/api/admin/session/logout`, {
-        method: "POST",
-        credentials: "include",
-      });
-      if (!response.ok) {
-        const text = await response.text();
-        throw new Error(text || `HTTP ${response.status}`);
-      }
-      adminPasswordInput.value = "";
-      adminSessionStatus.textContent = "管理员会话已退出。";
-    }
-
-    function syncHeaderMetrics() {
-      metricApiRoot.textContent = normalizeApiBase();
-      metricRunID.textContent = state.currentRunID || "-";
-      metricRunState.textContent = state.currentRun?.state || "-";
-    }
-
-    function renderRunMeta(run) {
-      runMeta.innerHTML = "";
-      const meta = [
-        `run_id=${run.run_id}`,
-        `state=${run.state}`,
-        `mode=${run.mode}`,
-        `access_mode=${run.access_mode}`,
-      ];
-      meta.forEach((entry) => {
-        const code = document.createElement("code");
-        code.textContent = entry;
-        runMeta.appendChild(code);
-      });
-    }
-
-    function toneClass(tone) {
-      if (!tone) return "tone-gray";
-      return `tone-${tone}`;
-    }
-
-    function renderBadges(badges) {
-      if (!Array.isArray(badges) || !badges.length) {
-        return '<span class="subtle">-</span>';
-      }
-      return `<div class="badge-row">${badges.map((badge) => `<span class="badge ${toneClass(badge.tone)}">${escapeHTML(badge.label)}</span>`).join("")}</div>`;
-    }
-
-    function renderItems(items) {
-      if (!items.length) {
-        itemsTbody.innerHTML = '<tr><td colspan="7" class="subtle">当前过滤条件下没有条目。</td></tr>';
-        return;
-      }
-      itemsTbody.innerHTML = items.map((item) => {
-        const advisory = Array.isArray(item.advisory_messages) && item.advisory_messages.length
-          ? item.advisory_messages.map((message) => `<div>${escapeHTML(message)}</div>`).join("")
-          : '<span class="subtle">-</span>';
-        return `
-          <tr>
-            <td>
-              <strong>${escapeHTML(item.provider_id)}</strong><br>
-              <code>${escapeHTML(item.api_key_fingerprint || "-")}</code>
-            </td>
-            <td><code>${escapeHTML(item.base_url)}</code></td>
-            <td>
-              <div>${escapeHTML(item.resolved_smoke_model || "-")}</div>
-              <div class="subtle">${escapeHTML((item.canonical_model_families || []).join(", ") || "-")}</div>
-            </td>
-            <td>
-              <div><strong>${escapeHTML(item.matched_account_state || "-")}</strong></div>
-              <div class="subtle">${escapeHTML(item.account_resolution || "-")}</div>
-            </td>
-            <td>
-              <div>${escapeHTML(item.access_status || "-")}</div>
-              <div class="subtle">${escapeHTML(item.confirmation_status || "-")} / ${escapeHTML(item.current_stage || "-")}</div>
-            </td>
-            <td>${renderBadges(item.badges)}</td>
-            <td>${advisory}</td>
-          </tr>
-        `;
-      }).join("");
-    }
-
-    function renderRunSummary(run) {
-      state.currentRun = run;
-      summaryTargets.total.textContent = String(run.total_items || 0);
-      summaryTargets.completed.textContent = String(run.completed_items || 0);
-      summaryTargets.active.textContent = String(run.active_items || 0);
-      summaryTargets.degraded.textContent = String(run.degraded_items || 0);
-      summaryTargets.broken.textContent = String(run.broken_items || 0);
-      renderRunMeta(run);
-      syncHeaderMetrics();
-    }
-
-    function clearResults() {
-      state.currentRun = null;
-      state.currentRunID = "";
-      state.currentItems = [];
-      runIDInput.value = "";
-      renderRunSummary({
-        run_id: "-",
-        state: "-",
-        mode: "-",
-        access_mode: "-",
-        total_items: 0,
-        completed_items: 0,
-        active_items: 0,
-        degraded_items: 0,
-        broken_items: 0,
-      });
-      runMeta.innerHTML = "";
-      itemsTbody.innerHTML = '<tr><td colspan="7" class="subtle">还没有结果。</td></tr>';
-      setStatus("结果已清空。");
-    }
-
-    async function createRun() {
-      const button = document.getElementById("create-run-btn");
-      button.disabled = true;
-      try {
-        saveConfig();
-        setStatus("正在创建 batch import run ...");
-        const payload = buildCreatePayload();
-        const created = await requestJSON("/api/batch-import/runs", {
-          method: "POST",
-          headers: authHeaders(),
-          body: JSON.stringify(payload),
-        });
-        state.currentRunID = created.run_id;
-        runIDInput.value = created.run_id;
-        syncHeaderMetrics();
-        setStatus(`run 已创建：${created.run_id}，正在拉取详情。`, "success");
-        await refreshRun();
-      } catch (error) {
-        setStatus(`创建失败：${error.message}`, "danger");
-      } finally {
-        button.disabled = false;
-      }
-    }
-
-    function buildItemsQuery() {
-      const params = new URLSearchParams();
-      if (filterQueryInput.value.trim()) params.set("q", filterQueryInput.value.trim());
-      if (filterMatchedStateInput.value) params.set("matched_account_state", filterMatchedStateInput.value);
-      if (filterAccountResolutionInput.value) params.set("account_resolution", filterAccountResolutionInput.value);
-      return params.toString();
-    }
-
-    async function refreshRun() {
-      const runID = runIDInput.value.trim();
-      if (!runID) {
-        setStatus("请先输入 run_id。", "warning");
-        return;
-      }
-      const button = document.getElementById("refresh-run-btn");
-      button.disabled = true;
-      try {
-        state.currentRunID = runID;
-        syncHeaderMetrics();
-        setStatus(`正在刷新 ${runID} ...`);
-        const runPayload = await requestJSON(`/api/batch-import/runs/${encodeURIComponent(runID)}`, {
-          headers: authHeaders(),
-        });
-        renderRunSummary(runPayload.run);
-        const query = buildItemsQuery();
-        const itemsPayload = await requestJSON(`/api/batch-import/runs/${encodeURIComponent(runID)}/items${query ? `?${query}` : ""}`, {
-          headers: authHeaders(),
-        });
-        state.currentItems = itemsPayload.items || [];
-        renderItems(state.currentItems);
-        setStatus(`run ${runID} 已刷新，当前显示 ${state.currentItems.length} 条 item。`, "success");
-      } catch (error) {
-        setStatus(`刷新失败：${error.message}`, "danger");
-      } finally {
-        button.disabled = false;
-      }
-    }
-
-    function escapeHTML(value) {
-      return String(value)
-        .replaceAll("&", "&amp;")
-        .replaceAll("<", "&lt;")
-        .replaceAll(">", "&gt;")
-        .replaceAll('"', "&quot;")
-        .replaceAll("'", "&#39;");
-    }
-
-    document.getElementById("create-run-btn").addEventListener("click", createRun);
-    document.getElementById("refresh-run-btn").addEventListener("click", refreshRun);
-    document.getElementById("save-config-btn").addEventListener("click", saveConfig);
-    document.getElementById("load-sample-btn").addEventListener("click", loadSampleEntries);
-    document.getElementById("clear-items-btn").addEventListener("click", clearResults);
-    document.getElementById("apply-filter-btn").addEventListener("click", refreshRun);
-    adminLoginButton.addEventListener("click", async () => {
-      try {
-        await loginAdminSession();
-        setStatus("管理员会话已建立。", "success");
-      } catch (error) {
-        setStatus(error.message, "danger");
-      }
-    });
-    adminLogoutButton.addEventListener("click", async () => {
-      try {
-        await logoutAdminSession();
-        await refreshAdminSession();
-      } catch (error) {
-        setStatus(error.message, "danger");
-      }
-    });
-    accessModeInput.addEventListener("change", updateAccessModeFields);
-
-    restoreConfig();
-    updateAccessModeFields();
-    syncHeaderMetrics();
-    refreshAdminSession().catch(() => {});
-  </script>
+</script>
   </body>
 </html>
diff --git a/deploy/tksea-portal/admin/accounts.html b/deploy/tksea-portal/admin/accounts.html
index f3779e22..4d7fa1ad 100644
--- a/deploy/tksea-portal/admin/accounts.html
+++ b/deploy/tksea-portal/admin/accounts.html
@@ -264,6 +264,7 @@
   <script src="/portal/admin-common.js"></script>
   <script src="/portal/portal.js"></script>
   <script>
+
     const AdminCommon = window.Sub2ApiAdminCommon;
     window.Sub2ApiPortal.renderModernAdminNav(document.querySelector("[data-admin-nav]"), "accounts");
     (function injectIcons(){
@@ -274,7 +275,7 @@
       M("ac-m4", "alert");
     })();
 
-  <script>
+  // <script>
     AdminCommon.renderAdminNav(document.querySelector("[data-admin-nav]"), "accounts");
     const storageKey = "sub2api-provider-accounts-admin";
     const state = {
@@ -711,497 +712,6 @@
     hydrateConfig();
     refreshSession();
     loadAccounts();
-  </script>
-<script>
-    const storageKey = "sub2api-provider-accounts-admin";
-    const state = {
-      accounts: [],
-      selectedAccountID: 0,
-      bindingCandidates: [],
-    };
-
-    const apiBaseInput = document.getElementById("api-base");
-    const adminTokenInput = document.getElementById("admin-token");
-    const adminUsernameInput = document.getElementById("admin-username");
-    const adminPasswordInput = document.getElementById("admin-password");
-    const hostFilterInput = document.getElementById("filter-host-id");
-    const providerFilterInput = document.getElementById("filter-provider-id");
-    const logicalGroupFilterInput = document.getElementById("filter-logical-group-id");
-    const routeFilterInput = document.getElementById("filter-route-id");
-    const shadowGroupFilterInput = document.getElementById("filter-shadow-group-id");
-    const statusFilterInput = document.getElementById("filter-status");
-    const bindingStateFilterInput = document.getElementById("filter-binding-state");
-    const queryFilterInput = document.getElementById("filter-query");
-    const limitFilterInput = document.getElementById("filter-limit");
-    const actionReasonInput = document.getElementById("action-reason");
-
-    const sessionStatus = document.getElementById("session-status");
-    const tableStatus = document.getElementById("table-status");
-    const actionStatus = document.getElementById("action-status");
-    const accountsCatalog = document.getElementById("accounts-catalog");
-    const detailEmpty = document.getElementById("detail-empty");
-    const detailPanel = document.getElementById("detail-panel");
-    const detailGrid = document.getElementById("detail-grid");
-    const detailJSON = document.getElementById("detail-json");
-    const bindingRouteSelect = document.getElementById("binding-route-select");
-    const bindingStateView = document.getElementById("binding-state-view");
-    const bindingStatus = document.getElementById("binding-status");
-
-    const metricApiRoot = document.getElementById("metric-api-root");
-    const metricTotal = document.getElementById("metric-total");
-    const metricLive = document.getElementById("metric-live");
-    const metricDead = document.getElementById("metric-dead");
-
-    const enableButton = document.getElementById("enable-btn");
-    const disableButton = document.getElementById("disable-btn");
-    const retireButton = document.getElementById("retire-btn");
-    const refreshBindingButton = document.getElementById("refresh-binding-btn");
-    const applyBindingButton = document.getElementById("apply-binding-btn");
-    const clearBindingButton = document.getElementById("clear-binding-btn");
-
-    function readConfig() {
-      try {
-        return JSON.parse(localStorage.getItem(storageKey) || "{}");
-      } catch (error) {
-        console.warn("failed to parse config", error);
-        return {};
-      }
-    }
-
-    function writeConfig() {
-      const payload = {
-        apiBase: apiBaseInput.value.trim(),
-        adminToken: adminTokenInput.value,
-        adminUsername: adminUsernameInput.value.trim(),
-        hostID: hostFilterInput.value.trim(),
-        providerID: providerFilterInput.value.trim(),
-        logicalGroupID: logicalGroupFilterInput.value.trim(),
-        routeID: routeFilterInput.value.trim(),
-        shadowGroupID: shadowGroupFilterInput.value.trim(),
-        accountStatus: statusFilterInput.value,
-        bindingState: bindingStateFilterInput.value,
-        query: queryFilterInput.value.trim(),
-        limit: limitFilterInput.value.trim(),
-      };
-      localStorage.setItem(storageKey, JSON.stringify(payload));
-      setStatus(tableStatus, "已保存本地配置。");
-    }
-
-    function hydrateConfig() {
-      const config = readConfig();
-      apiBaseInput.value = config.apiBase || "/portal-admin-api";
-      adminTokenInput.value = config.adminToken || "";
-      adminUsernameInput.value = config.adminUsername || "";
-      hostFilterInput.value = config.hostID || "";
-      providerFilterInput.value = config.providerID || "";
-      logicalGroupFilterInput.value = config.logicalGroupID || "";
-      routeFilterInput.value = config.routeID || "";
-      shadowGroupFilterInput.value = config.shadowGroupID || "";
-      statusFilterInput.value = config.accountStatus || "";
-      bindingStateFilterInput.value = config.bindingState || "";
-      queryFilterInput.value = config.query || "";
-      limitFilterInput.value = config.limit || "200";
-    }
-
-    function apiBase() {
-      return (apiBaseInput.value.trim() || "/portal-admin-api").replace(/\/+$/, "");
-    }
-
-    function authHeaders() {
-      const token = adminTokenInput.value.trim();
-      return token ? { Authorization: `Bearer ${token}` } : {};
-    }
-
-    async function requestJSON(path, options = {}) {
-      const response = await fetch(`${apiBase()}${path}`, {
-        credentials: "include",
-        ...options,
-        headers: {
-          Accept: "application/json",
-          ...(options.headers || {}),
-        },
-      });
-      const text = await response.text();
-      const payload = text ? JSON.parse(text) : {};
-      if (!response.ok) {
-        const message = payload?.error?.message || payload?.message || response.statusText || "request failed";
-        throw new Error(`${response.status} ${message}`);
-      }
-      return payload;
-    }
-
-    async function refreshSession() {
-      metricApiRoot.textContent = apiBase();
-      try {
-        const payload = await requestJSON("/api/admin/session", { headers: authHeaders() });
-        if (payload.authenticated) {
-          setStatus(sessionStatus, `管理员会话已建立：${payload.username || "unknown"}（session）`, "success");
-        } else if (payload.login_enabled) {
-          setStatus(sessionStatus, `当前未登录。可用管理员用户名 ${payload.username || "admin"} 建立 session，或继续使用 Bearer token。`, "warn");
-        } else {
-          setStatus(sessionStatus, "当前实例未启用管理员登录，只能使用 Bearer token。", "warn");
-        }
-      } catch (error) {
-        setStatus(sessionStatus, `检查管理员会话失败：${error.message}`, "danger");
-      }
-    }
-
-    async function loginSession() {
-      const username = adminUsernameInput.value.trim();
-      const password = adminPasswordInput.value;
-      if (!username || !password) {
-        setStatus(sessionStatus, "请先输入管理员用户名和密码。", "warn");
-        return;
-      }
-      try {
-        const payload = await requestJSON("/api/admin/session/login", {
-          method: "POST",
-          headers: { "Content-Type": "application/json", ...authHeaders() },
-          body: JSON.stringify({ username, password }),
-        });
-        setStatus(sessionStatus, `管理员会话已建立：${payload.username || username}`, "success");
-      } catch (error) {
-        setStatus(sessionStatus, `管理员登录失败：${error.message}`, "danger");
-      }
-    }
-
-    async function logoutSession() {
-      try {
-        await requestJSON("/api/admin/session/logout", {
-          method: "POST",
-          headers: authHeaders(),
-        });
-        setStatus(sessionStatus, "管理员会话已退出。", "warn");
-      } catch (error) {
-        setStatus(sessionStatus, `退出会话失败：${error.message}`, "danger");
-      }
-    }
-
-    function buildListQuery() {
-      const params = new URLSearchParams();
-      if (hostFilterInput.value.trim()) params.set("host_id", hostFilterInput.value.trim());
-      if (providerFilterInput.value.trim()) params.set("provider_id", providerFilterInput.value.trim());
-      if (logicalGroupFilterInput.value.trim()) params.set("logical_group_id", logicalGroupFilterInput.value.trim());
-      if (routeFilterInput.value.trim()) params.set("route_id", routeFilterInput.value.trim());
-      if (shadowGroupFilterInput.value.trim()) params.set("shadow_group_id", shadowGroupFilterInput.value.trim());
-      if (statusFilterInput.value) params.set("account_status", statusFilterInput.value);
-      if (bindingStateFilterInput.value) params.set("binding_state", bindingStateFilterInput.value);
-      if (queryFilterInput.value.trim()) params.set("q", queryFilterInput.value.trim());
-      if (limitFilterInput.value.trim()) params.set("limit", limitFilterInput.value.trim());
-      const query = params.toString();
-      return query ? `/api/provider-accounts?${query}` : "/api/provider-accounts";
-    }
-
-    async function loadAccounts() {
-      setStatus(tableStatus, "正在读取 provider_accounts…");
-      try {
-        const payload = await requestJSON(buildListQuery(), { headers: authHeaders() });
-        state.accounts = Array.isArray(payload.provider_accounts) ? payload.provider_accounts : [];
-        state.bindingCandidates = [];
-        if (!state.accounts.some((item) => item.id === state.selectedAccountID)) {
-          state.selectedAccountID = state.accounts[0]?.id || 0;
-        }
-        renderMetrics();
-        renderCatalog();
-        renderDetail();
-        if (state.selectedAccountID) {
-          await loadBindingCandidates();
-        } else {
-          renderBindingCandidates();
-        }
-        setStatus(tableStatus, `已加载 ${state.accounts.length} 条帐号资产记录。`, "success");
-      } catch (error) {
-        state.accounts = [];
-        state.selectedAccountID = 0;
-        state.bindingCandidates = [];
-        renderMetrics();
-        renderCatalog();
-        renderDetail();
-        renderBindingCandidates();
-        setStatus(tableStatus, `读取帐号资产失败：${error.message}`, "danger");
-      }
-    }
-
-    function renderMetrics() {
-      metricApiRoot.textContent = apiBase();
-      metricTotal.textContent = String(state.accounts.length);
-      const counts = { active: 0, disabled: 0, deprecated: 0, broken: 0 };
-      state.accounts.forEach((account) => {
-        if (Object.prototype.hasOwnProperty.call(counts, account.account_status)) {
-          counts[account.account_status] += 1;
-        }
-      });
-      metricLive.textContent = `${counts.active} / ${counts.disabled}`;
-      metricDead.textContent = `${counts.deprecated} / ${counts.broken}`;
-    }
-
-    function statusClass(status) {
-      if (status === "active") return "active";
-      if (status === "disabled") return "disabled";
-      if (status === "deprecated") return "deprecated";
-      return "broken";
-    }
-
-    function renderCatalog() {
-      if (!state.accounts.length) {
-        accountsCatalog.innerHTML = '<div class="empty">还没有匹配到帐号资产记录。</div>';
-        return;
-      }
-      accountsCatalog.innerHTML = "";
-      state.accounts.forEach((account) => {
-        const card = document.createElement("button");
-        card.type = "button";
-        card.className = `row-card${account.id === state.selectedAccountID ? " is-selected" : ""}`;
-        card.innerHTML = `
-          <div class="row-heading">
-            <div>
-              <div class="row-title">${escapeHTML(account.account_name || account.host_account_id)}</div>
-              <div class="meta-list">
-                <span>provider: <code>${escapeHTML(account.provider_id)}</code></span>
-                <span>host_account_id: <code>${escapeHTML(account.host_account_id)}</code></span>
-              </div>
-            </div>
-            <span class="badge ${statusClass(account.account_status)}">${escapeHTML(account.account_status)}</span>
-          </div>
-          <div class="badge-row">
-            <span class="badge ${statusClass(account.account_status)}">${escapeHTML(account.logical_group_id || "未归属 logical_group")}</span>
-            <span class="badge ${statusClass(account.account_status)}">${escapeHTML(account.route_id || "未归属 route")}</span>
-            <span class="badge ${statusClass(account.account_status)}">shadow_group: ${escapeHTML(account.shadow_group_id || "-")}</span>
-            <span class="badge ${statusClass(account.account_status)}">binding: ${escapeHTML(account.binding_state || "unassigned")} / candidates: ${escapeHTML(account.binding_candidate_count || 0)}</span>
-          </div>
-          <div class="meta-list">
-            <span>route_name: <code>${escapeHTML(account.route_name || "-")}</code></span>
-            <span>shadow_host_id: <code>${escapeHTML(account.shadow_host_id || account.host_id || "-")}</code></span>
-            <span>last_probe_status: <code>${escapeHTML(account.last_probe_status || "-")}</code></span>
-          </div>
-        `;
-        card.addEventListener("click", () => {
-          state.selectedAccountID = account.id;
-          renderCatalog();
-          renderDetail();
-          loadBindingCandidates();
-        });
-        accountsCatalog.appendChild(card);
-      });
-    }
-
-    function renderDetail() {
-      const account = state.accounts.find((item) => item.id === state.selectedAccountID);
-      const hasSelection = Boolean(account);
-      detailEmpty.hidden = hasSelection;
-      detailPanel.hidden = !hasSelection;
-      enableButton.disabled = !hasSelection;
-      disableButton.disabled = !hasSelection;
-      retireButton.disabled = !hasSelection;
-      refreshBindingButton.disabled = !hasSelection;
-      clearBindingButton.disabled = !hasSelection;
-      if (!account) {
-        detailGrid.innerHTML = "";
-        detailJSON.textContent = "{}";
-        bindingStateView.value = "-";
-        setStatus(actionStatus, "请选择左侧一条帐号记录。");
-        return;
-      }
-      const cards = [
-        ["帐号主键", String(account.id)],
-        ["provider_id", account.provider_id],
-        ["provider_name", account.provider_name || "-"],
-        ["host_id", account.host_id],
-        ["host_base_url", account.host_base_url || "-"],
-        ["logical_group_id", account.logical_group_id || "未归属"],
-        ["route_id", account.route_id || "未归属"],
-        ["route_name", account.route_name || "-"],
-        ["shadow_group_id", account.shadow_group_id || "-"],
-        ["shadow_host_id", account.shadow_host_id || "-"],
-        ["upstream_base_url_hint", account.upstream_base_url_hint || "-"],
-        ["host_account_id", account.host_account_id],
-        ["key_fingerprint", account.key_fingerprint],
-        ["account_status", account.account_status],
-        ["binding_state", account.binding_state || "unassigned"],
-        ["binding_candidate_count", String(account.binding_candidate_count || 0)],
-        ["last_probe_status", account.last_probe_status || "-"],
-        ["last_probe_at", account.last_probe_at || "-"],
-        ["disabled_reason", account.disabled_reason || "-"],
-        ["updated_at", account.updated_at || "-"],
-      ];
-      detailGrid.innerHTML = cards.map(([label, value]) => `
-        <div class="detail-card">
-          <strong>${escapeHTML(label)}</strong>
-          <code>${escapeHTML(value)}</code>
-        </div>
-      `).join("");
-      detailJSON.textContent = JSON.stringify(account, null, 2);
-      bindingStateView.value = account.binding_state || "unassigned";
-      setStatus(actionStatus, `当前选中帐号 #${account.id}，操作只会修改插件 provider_accounts 库存状态。`);
-    }
-
-    async function loadBindingCandidates() {
-      const account = state.accounts.find((item) => item.id === state.selectedAccountID);
-      if (!account) {
-        state.bindingCandidates = [];
-        renderBindingCandidates();
-        return;
-      }
-      setStatus(bindingStatus, `正在读取帐号 #${account.id} 的 route 候选…`);
-      try {
-        const payload = await requestJSON(`/api/provider-accounts/${encodeURIComponent(account.id)}/binding-candidates`, { headers: authHeaders() });
-        state.bindingCandidates = Array.isArray(payload.candidate_routes) ? payload.candidate_routes : [];
-        if (payload.provider_account) {
-          state.accounts = state.accounts.map((item) => item.id === account.id ? payload.provider_account : item);
-        }
-        renderCatalog();
-        renderDetail();
-        renderBindingCandidates();
-        setStatus(bindingStatus, `已加载 ${state.bindingCandidates.length} 条 route 候选。`, "success");
-      } catch (error) {
-        state.bindingCandidates = [];
-        renderBindingCandidates();
-        setStatus(bindingStatus, `读取 route 候选失败：${error.message}`, "danger");
-      }
-    }
-
-    function renderBindingCandidates() {
-      const account = state.accounts.find((item) => item.id === state.selectedAccountID);
-      const hasSelection = Boolean(account);
-      bindingRouteSelect.disabled = !hasSelection;
-      applyBindingButton.disabled = !hasSelection;
-      if (!hasSelection) {
-        bindingRouteSelect.innerHTML = '<option value="">请先选择帐号</option>';
-        bindingStateView.value = "-";
-        return;
-      }
-      const options = ['<option value="">请选择一个 route</option>'];
-      state.bindingCandidates.forEach((route) => {
-        const selected = route.route_id === account.route_id ? " selected" : "";
-        options.push(`<option value="${escapeHTML(route.route_id)}"${selected}>${escapeHTML(route.route_id)} / ${escapeHTML(route.logical_group_id)} / ${escapeHTML(route.name || "-")}</option>`);
-      });
-      if (!state.bindingCandidates.length) {
-        options.push('<option value="">当前 shadow binding 下没有候选 route</option>');
-      }
-      bindingRouteSelect.innerHTML = options.join("");
-    }
-
-    async function updateAccountStatus(action) {
-      const account = state.accounts.find((item) => item.id === state.selectedAccountID);
-      if (!account) {
-        setStatus(actionStatus, "请先选择一条帐号记录。", "warn");
-        return;
-      }
-      const reason = actionReasonInput.value.trim();
-      if ((action === "disable" || action === "retire") && !reason) {
-        setStatus(actionStatus, "停用或退役请填写原因，避免后续看不懂为什么改状态。", "warn");
-        return;
-      }
-      try {
-        const payload = await requestJSON(`/api/provider-accounts/${encodeURIComponent(account.id)}/${action}`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json", ...authHeaders() },
-          body: JSON.stringify(reason ? { reason } : {}),
-        });
-        const updated = payload.provider_account;
-        setStatus(actionStatus, `帐号 #${updated.id} 已更新为 ${updated.account_status}${updated.disabled_reason ? `（${updated.disabled_reason}）` : ""}。`, "success");
-        await loadAccounts();
-      } catch (error) {
-        setStatus(actionStatus, `更新帐号状态失败：${error.message}`, "danger");
-      }
-    }
-
-    async function updateAccountBinding(mode) {
-      const account = state.accounts.find((item) => item.id === state.selectedAccountID);
-      if (!account) {
-        setStatus(bindingStatus, "请先选择一条帐号记录。", "warn");
-        return;
-      }
-      let payload = {};
-      if (mode === "assign") {
-        const routeID = bindingRouteSelect.value.trim();
-        if (!routeID) {
-          setStatus(bindingStatus, "请先选择要绑定的 route。", "warn");
-          return;
-        }
-        payload = { route_id: routeID };
-      } else {
-        payload = { clear: true };
-      }
-      try {
-        const response = await requestJSON(`/api/provider-accounts/${encodeURIComponent(account.id)}/binding`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json", ...authHeaders() },
-          body: JSON.stringify(payload),
-        });
-        const updated = response.provider_account;
-        setStatus(bindingStatus, `帐号 #${updated.id} 已更新归属：binding_state=${updated.binding_state || "unassigned"} route=${updated.route_id || "-"}`, "success");
-        await loadAccounts();
-      } catch (error) {
-        setStatus(bindingStatus, `更新帐号归属失败：${error.message}`, "danger");
-      }
-    }
-
-    function clearFilters() {
-      hostFilterInput.value = "";
-      providerFilterInput.value = "";
-      logicalGroupFilterInput.value = "";
-      routeFilterInput.value = "";
-      shadowGroupFilterInput.value = "";
-      statusFilterInput.value = "";
-      bindingStateFilterInput.value = "";
-      queryFilterInput.value = "";
-      limitFilterInput.value = "200";
-    }
-
-    function setStatus(element, message, tone = "") {
-      element.textContent = message;
-      element.style.color = tone === "danger"
-        ? "var(--danger)"
-        : tone === "warn"
-          ? "var(--warn)"
-          : tone === "success"
-            ? "var(--success)"
-            : "var(--muted)";
-      element.style.borderColor = tone === "danger"
-        ? "rgba(178, 49, 49, 0.24)"
-        : tone === "warn"
-          ? "rgba(155, 98, 21, 0.22)"
-          : tone === "success"
-            ? "rgba(18, 107, 67, 0.22)"
-            : "var(--line)";
-      element.style.background = tone === "danger"
-        ? "rgba(178, 49, 49, 0.08)"
-        : tone === "warn"
-          ? "rgba(155, 98, 21, 0.08)"
-          : tone === "success"
-            ? "rgba(18, 107, 67, 0.08)"
-            : "#fff";
-    }
-
-    function escapeHTML(value) {
-      return String(value ?? "")
-        .replaceAll("&", "&amp;")
-        .replaceAll("<", "&lt;")
-        .replaceAll(">", "&gt;")
-        .replaceAll('"', "&quot;")
-        .replaceAll("'", "&#39;");
-    }
-
-    document.getElementById("save-config-btn").addEventListener("click", writeConfig);
-    document.getElementById("admin-login-btn").addEventListener("click", loginSession);
-    document.getElementById("admin-logout-btn").addEventListener("click", logoutSession);
-    document.getElementById("refresh-btn").addEventListener("click", loadAccounts);
-    document.getElementById("apply-filters-btn").addEventListener("click", loadAccounts);
-    document.getElementById("clear-filters-btn").addEventListener("click", () => {
-      clearFilters();
-      loadAccounts();
-    });
-    enableButton.addEventListener("click", () => updateAccountStatus("enable"));
-    disableButton.addEventListener("click", () => updateAccountStatus("disable"));
-    retireButton.addEventListener("click", () => updateAccountStatus("retire"));
-    refreshBindingButton.addEventListener("click", loadBindingCandidates);
-    applyBindingButton.addEventListener("click", () => updateAccountBinding("assign"));
-    clearBindingButton.addEventListener("click", () => updateAccountBinding("clear"));
-
-    hydrateConfig();
-    refreshSession();
-    loadAccounts();
-  </script>
+</script>
   </body>
 </html>
diff --git a/deploy/tksea-portal/admin/providers.html b/deploy/tksea-portal/admin/providers.html
index 829456c5..4b852e67 100644
--- a/deploy/tksea-portal/admin/providers.html
+++ b/deploy/tksea-portal/admin/providers.html
@@ -156,75 +156,23 @@
       </article>
 
       <section class="stack">
-        <article class="card panel">
-          <h2>Provider 预检与导入</h2>
+        <article class="card panel" id="provider-workflow">
+          <h2>Provider 工作流 · 模板 + 批量导入</h2>
           <p class="panel-desc">
-            选择 pack/provider 后，可以先预检再执行导入。<code>preview-import</code> 侧重帐号本身与模型探测，
-            <code>import</code> 会继续走 access closure。
+            这页整合了 <strong>Provider Manifest 草稿</strong>生成、<code>preview-import</code> 预检与 <code>import</code> 走 access closure 的批量导入。
+            三步走：<strong>① 选/新建 provider</strong> → <strong>② 维护模板</strong> → <strong>③ 选模型 + 加 key</strong>。
+            模板存在时（已加载目录或已保存草稿）自动填充；否则就是新建。
+            改完模板字段点「保存草稿」生效，发布前可继续改。
           </p>
 
+          <!-- ============ Step 1: Provider ID + Display Name ============ -->
           <div class="field-grid two">
-            <label>Provider ID
-              <input id="provider-id" type="text" placeholder="minimax-53hk">
-            </label>
-            <label>Mode
-              <select id="mode">
-                <option value="strict">strict</option>
-                <option value="partial">partial</option>
-              </select>
-            </label>
-          </div>
-
-          <div class="field-grid two">
-            <label>Access Mode
-              <select id="access-mode">
-                <option value="self_service">self_service</option>
-                <option value="subscription">subscription</option>
-              </select>
-            </label>
-            <label>Probe API Key
-              <input id="access-api-key" type="text" placeholder="sk-probe-or-access">
-            </label>
-          </div>
-
-          <div class="field-grid two" id="subscription-fields" hidden>
-            <label>Subscription Users
-              <input id="subscription-users" type="text" placeholder="relay-sub-1,relay-sub-2">
-            </label>
-            <label>Subscription Days
-              <input id="subscription-days" type="number" min="1" value="30">
-            </label>
-          </div>
-
-          <label>Keys
-            <textarea id="provider-keys" rows="6" placeholder="sk-example-1
-sk-example-2
-sk-example-3"></textarea>
-            <span class="hint">一行一个供应商帐号 key（多 key 批量导入）。例如 <code>sk-prod-xxx</code>。导入页会自动拆成字符串数组传给 CRM。</span>
-          </label>
-
-          <div class="actions">
-            <button class="secondary" id="preview-provider-btn">预检导入</button>
-            <button class="primary" id="import-provider-btn">执行导入</button>
-            <a class="ghost" href="/portal/admin/batch-import.html" style="text-decoration:none; display:inline-flex; align-items:center;">打开 Batch Import</a>
-          </div>
-
-          <div class="statusbar" id="provider-status">先从左侧目录选择 provider。</div>
-        </article>
-
-        <article class="card panel" id="manifest-draft">
-          <h2>Provider Manifest 草稿</h2>
-          <p class="panel-desc">
-            这部分既能生成与保存 provider 草稿，也能从已保存草稿一键发布到 pack/provider 文件并提交到仓库。
-            页面本身不直接拼 Git 命令，所有写仓库动作都经由 CRM 服务端完成。
-          </p>
-
-          <div class="statusbar" id="recent-template-meta">最近成功模板：暂无。首次可以先按一份已有 provider 作为参考修改。</div>
-
-          <div class="field-grid two">
-            <label>Provider ID（自动生成，可手改）
-              <input id="draft-provider-id" type="text" placeholder="openai-zhongzhuan">
-              <span class="hint">根据 display name / base url / models 自动生成，并尽量避免与现有 provider_id 冲突。</span>
+            <label>Provider ID（共享：从目录选 或 新建一个）
+              <input id="provider-id" type="text" list="preset-provider-id-from-catalog" placeholder="选现有 / 新建一个">
+              <datalist id="preset-provider-id-from-catalog">
+                <!-- 由 JS 从 state.providers 自动填充 -->
+              </datalist>
+              <span class="hint">从目录选 → 模板自动填；手填新名字 → 新建。系统会根据 display name / base url / models 自动生成 provider_id 并尽量避免与现有 provider_id 冲突。</span>
             </label>
             <label>Display Name
               <input id="draft-display-name" type="text" placeholder="OpenAI 中转 / DeepSeek / 硅基流动" list="preset-display-name">
@@ -248,95 +196,161 @@ sk-example-3"></textarea>
           <div class="statusbar" id="provider-id-preview">Provider ID 预览：等待填写模型信息。</div>
           <div class="statusbar" id="model-conflicts">同模型已存在：当前未发现冲突。</div>
 
-          <div class="field-grid two">
-            <label>Platform
-              <input id="draft-platform" type="text" placeholder="openai" list="preset-platform">
-              <datalist id="preset-platform">
-                <option value="openai"></option>
-                <option value="openai-compatible"></option>
-                <option value="deepseek"></option>
-                <option value="anthropic"></option>
-                <option value="gemini"></option>
-                <option value="zhipu"></option>
-                <option value="moonshot"></option>
-                <option value="minimax"></option>
-                <option value="qwen"></option>
-                <option value="baichuan"></option>
-                <option value="hunyuan"></option>
-                <option value="yi"></option>
-              </datalist>
+          <!-- ============ Step 2: 模板参数（默认展开，可折叠） ============ -->
+          <details open id="template-section">
+            <summary style="cursor:pointer; padding: 8px 0; font-weight: 700; color: var(--text-strong);">
+              ② 模板参数（修改后请「保存草稿」生效）
+            </summary>
+
+            <div class="field-grid two" style="margin-top: 8px;">
+              <label>Platform
+                <input id="draft-platform" type="text" placeholder="openai" list="preset-platform">
+                <datalist id="preset-platform">
+                  <option value="openai"></option>
+                  <option value="openai-compatible"></option>
+                  <option value="deepseek"></option>
+                  <option value="anthropic"></option>
+                  <option value="gemini"></option>
+                  <option value="zhipu"></option>
+                  <option value="moonshot"></option>
+                  <option value="minimax"></option>
+                  <option value="qwen"></option>
+                  <option value="baichuan"></option>
+                  <option value="hunyuan"></option>
+                  <option value="yi"></option>
+                </datalist>
+              </label>
+              <label>Smoke Test Model
+                <input id="draft-smoke-model" type="text" placeholder="从 models 自动取第一个" list="preset-smoke-model">
+                <datalist id="preset-smoke-model">
+                  <option value="gpt-5.4"></option>
+                  <option value="gpt-5.4-mini"></option>
+                  <option value="deepseek-chat"></option>
+                  <option value="MiniMax-M2.7-highspeed"></option>
+                  <option value="claude-sonnet-4-5"></option>
+                  <option value="gemini-2.5-pro"></option>
+                  <option value="kimi-k2.6"></option>
+                  <option value="glm-4.6"></option>
+                  <option value="qwen3-coder-plus"></option>
+                </datalist>
+                <span class="hint">建议填「最便宜最快」的模型作为健康探针，留空则从 Models 取第一个</span>
+              </label>
+            </div>
+
+            <div class="field-grid two">
+              <label>Base URL Placeholder
+                <input id="draft-base-url" type="text" placeholder="https://api.example.com/v1" list="preset-base-url">
+                <datalist id="preset-base-url">
+                  <option value="https://api.openai.com/v1"></option>
+                  <option value="https://api.deepseek.com/v1"></option>
+                  <option value="https://api.siliconflow.cn/v1"></option>
+                  <option value="https://api.moonshot.cn/v1"></option>
+                  <option value="https://open.bigmodel.cn/api/paas/v4"></option>
+                  <option value="https://api.anthropic.com/v1"></option>
+                  <option value="https://generativelanguage.googleapis.com/v1beta"></option>
+                  <option value="https://api.minimax.chat/v1"></option>
+                  <option value="https://dashscope.aliyuncs.com/compatible-mode/v1"></option>
+                  <option value="https://api.baichuan-ai.com/v1"></option>
+                  <option value="https://hunyuan.tencent.com/v1"></option>
+                  <option value="https://api.lingyiwanwu.com/v1"></option>
+                </datalist>
+              </label>
+              <label>Models（用逗号分隔，或点击下方 chip 一键加入）
+                <input id="draft-models" type="text" placeholder="gpt-5.4,gpt-5.4-mini">
+                <div class="chip-row" id="model-presets" style="margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;">
+                  <button type="button" class="chip" data-model="gpt-5.4">+ gpt-5.4</button>
+                  <button type="button" class="chip" data-model="gpt-5.4-mini">+ gpt-5.4-mini</button>
+                  <button type="button" class="chip" data-model="deepseek-chat">+ deepseek-chat</button>
+                  <button type="button" class="chip" data-model="MiniMax-M2.7-highspeed">+ MiniMax-M2.7-highspeed</button>
+                  <button type="button" class="chip" data-model="kimi-k2.6">+ kimi-k2.6</button>
+                  <button type="button" class="chip" data-model="glm-4.6">+ glm-4.6</button>
+                  <button type="button" class="chip" data-model="claude-sonnet-4-5">+ claude-sonnet-4-5</button>
+                  <button type="button" class="chip" data-model="gemini-2.5-pro">+ gemini-2.5-pro</button>
+                  <button type="button" class="chip" data-model="qwen3-coder-plus">+ qwen3-coder-plus</button>
+                  <button type="button" class="chip" data-model="gpt-4o">+ gpt-4o</button>
+                  <button type="button" class="chip" data-model="o4-mini">+ o4-mini</button>
+                  <button type="button" class="ghost chip-clear" data-action="clear-models" style="margin-left:6px;">清空</button>
+                </div>
+              </label>
+            </div>
+
+            <label>发布 Commit Message
+              <input id="draft-commit-message" type="text" placeholder="feat(pack): publish provider draft openai-zhongzhuan">
+              <span class="hint">留空时会按 provider_id 自动生成标准 commit message</span>
             </label>
-            <label>Smoke Test Model
-              <input id="draft-smoke-model" type="text" placeholder="从 models 自动取第一个" list="preset-smoke-model">
-              <datalist id="preset-smoke-model">
-                <option value="gpt-5.4"></option>
-                <option value="gpt-5.4-mini"></option>
-                <option value="deepseek-chat"></option>
-                <option value="MiniMax-M2.7-highspeed"></option>
-                <option value="claude-sonnet-4-5"></option>
-                <option value="gemini-2.5-pro"></option>
-                <option value="kimi-k2.6"></option>
-                <option value="glm-4.6"></option>
-                <option value="qwen3-coder-plus"></option>
-              </datalist>
-              <span class="hint">建议填一个「最便宜最快」的模型作为健康探针，留空则从下方 Models 取第一个。</span>
+
+            <div class="actions">
+              <button class="secondary" id="generate-draft-btn">生成草稿</button>
+              <button class="primary" id="save-draft-btn">保存草稿</button>
+              <button class="secondary" id="update-draft-btn">更新草稿</button>
+              <button class="primary" id="publish-draft-btn">发布到仓库</button>
+              <button class="ghost" id="delete-draft-btn">删除草稿</button>
+              <button class="ghost" id="copy-draft-btn">复制 JSON</button>
+              <button class="ghost" id="refresh-drafts-btn">刷新草稿列表</button>
+            </div>
+
+            <div class="statusbar" id="draft-status">填写模板后保存草稿。</div>
+            <div class="statusbar" id="recent-template-meta">最近成功模板：暂无。首次可以先按一份已有 provider 作为参考修改。</div>
+          </details>
+
+          <hr style="border:0; border-top: 1px solid var(--border-subtle); margin: 20px 0;">
+
+          <!-- ============ Step 3: 批量导入 key ============ -->
+          <h3 style="margin: 0 0 8px 0; font-size: 17px;">③ 批量导入 Key</h3>
+          <p class="panel-desc">
+            模板保存后，从 <strong>模板支持的模型</strong> 里勾选要启用的，粘 key，每行一个。
+            点「预检导入」先验证，再「执行导入」走 access closure。
+          </p>
+
+          <div class="field-grid two">
+            <label>Access Mode
+              <select id="access-mode">
+                <option value="self_service">self_service</option>
+                <option value="subscription">subscription</option>
+              </select>
+            </label>
+            <label>Mode
+              <select id="mode">
+                <option value="strict">strict</option>
+                <option value="partial">partial</option>
+              </select>
             </label>
           </div>
 
           <div class="field-grid two">
-            <label>Base URL Placeholder
-              <input id="draft-base-url" type="text" placeholder="https://api.example.com/v1" list="preset-base-url">
-              <datalist id="preset-base-url">
-                <option value="https://api.openai.com/v1"></option>
-                <option value="https://api.deepseek.com/v1"></option>
-                <option value="https://api.siliconflow.cn/v1"></option>
-                <option value="https://api.moonshot.cn/v1"></option>
-                <option value="https://open.bigmodel.cn/api/paas/v4"></option>
-                <option value="https://api.anthropic.com/v1"></option>
-                <option value="https://generativelanguage.googleapis.com/v1beta"></option>
-                <option value="https://api.minimax.chat/v1"></option>
-                <option value="https://dashscope.aliyuncs.com/compatible-mode/v1"></option>
-                <option value="https://api.baichuan-ai.com/v1"></option>
-                <option value="https://hunyuan.tencent.com/v1"></option>
-                <option value="https://api.lingyiwanwu.com/v1"></option>
-              </datalist>
-            </label>
-            <label>Models
-              <input id="draft-models" type="text" placeholder="gpt-5.4,gpt-5.4-mini">
-              <span class="hint">用英文逗号分隔。点击下方常用模型快速加入。</span>
-              <div class="chip-row" id="model-presets" style="margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;">
-                <button type="button" class="chip" data-model="gpt-5.4">+ gpt-5.4</button>
-                <button type="button" class="chip" data-model="gpt-5.4-mini">+ gpt-5.4-mini</button>
-                <button type="button" class="chip" data-model="deepseek-chat">+ deepseek-chat</button>
-                <button type="button" class="chip" data-model="MiniMax-M2.7-highspeed">+ MiniMax-M2.7-highspeed</button>
-                <button type="button" class="chip" data-model="kimi-k2.6">+ kimi-k2.6</button>
-                <button type="button" class="chip" data-model="glm-4.6">+ glm-4.6</button>
-                <button type="button" class="chip" data-model="claude-sonnet-4-5">+ claude-sonnet-4-5</button>
-                <button type="button" class="chip" data-model="gemini-2.5-pro">+ gemini-2.5-pro</button>
-                <button type="button" class="chip" data-model="qwen3-coder-plus">+ qwen3-coder-plus</button>
-                <button type="button" class="chip" data-model="gpt-4o">+ gpt-4o</button>
-                <button type="button" class="chip" data-model="o4-mini">+ o4-mini</button>
-                <button type="button" class="ghost chip-clear" data-action="clear-models" style="margin-left:6px;">清空</button>
-              </div>
+            <label>Probe API Key（self_service 必填）
+              <input id="access-api-key" type="text" placeholder="sk-probe">
             </label>
+            <div id="subscription-fields" hidden style="display:grid; grid-template-columns: 1fr 1fr; gap: 12px;">
+              <label>Subscription Users
+                <input id="subscription-users" type="text" placeholder="relay-sub-1,relay-sub-2">
+              </label>
+              <label>Subscription Days
+                <input id="subscription-days" type="number" min="1" value="30">
+              </label>
+            </div>
           </div>
 
-          <label>发布 Commit Message
-            <input id="draft-commit-message" type="text" placeholder="feat(pack): publish provider draft openai-zhongzhuan">
-            <span class="hint">留空时会按 provider_id 自动生成标准 commit message。</span>
+          <label>选择要启用的模型
+            <div id="model-picker" class="model-picker" style="padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--border-subtle); background: var(--bg-elev-1); min-height: 48px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;">
+              <span class="hint" style="margin: 0;">保存模板后，这里会自动列出模板的 supported_models，勾选要启用的</span>
+            </div>
+          </label>
+
+          <label>Keys
+            <textarea id="provider-keys" rows="6" placeholder="sk-example-1
+sk-example-2
+sk-example-3"></textarea>
+            <span class="hint">一行一个供应商帐号 key（多 key 批量导入）。例如 <code>sk-prod-xxx</code></span>
           </label>
 
           <div class="actions">
-            <button class="secondary" id="generate-draft-btn">生成草稿</button>
-            <button class="primary" id="save-draft-btn">保存到服务端</button>
-            <button class="secondary" id="update-draft-btn">更新草稿</button>
-            <button class="primary" id="publish-draft-btn">发布到仓库</button>
-            <button class="ghost" id="delete-draft-btn">删除草稿</button>
-            <button class="ghost" id="copy-draft-btn">复制 JSON</button>
-            <button class="ghost" id="refresh-drafts-btn">刷新草稿列表</button>
+            <button class="secondary" id="preview-provider-btn">预检导入</button>
+            <button class="primary" id="import-provider-btn">执行导入</button>
+            <a class="ghost" href="/portal/admin/batch-import.html" style="text-decoration:none; display:inline-flex; align-items:center;">打开 Batch Import</a>
           </div>
 
-          <div class="statusbar" id="draft-status">填写后生成 provider manifest 草稿。</div>
+          <div class="statusbar" id="provider-status">先选 provider 并保存模板。</div>
         </article>
       </section>
     </section>
@@ -376,6 +390,7 @@ sk-example-3"></textarea>
   <script src="/portal/admin-common.js"></script>
   <script src="/portal/portal.js"></script>
   <script>
+
     const AdminCommon = window.Sub2ApiAdminCommon;
     window.Sub2ApiPortal.renderModernAdminNav(document.querySelector("[data-admin-nav]"), "providers");
     (function injectIcons(){
@@ -386,7 +401,7 @@ sk-example-3"></textarea>
       M("pr-m4", "edit");
     })();
 
-  <script>
+  // <script>
     AdminCommon.renderAdminNav(document.querySelector("[data-admin-nav]"), "providers");
     const storageKey = "sub2api-crm-provider-admin-v1";
     const lastPublishedTemplateKey = "sub2api-crm-provider-admin:last-published-template";
@@ -439,7 +454,6 @@ sk-example-3"></textarea>
     const metricPackID = document.getElementById("metric-pack-id");
     const metricProviderID = document.getElementById("metric-provider-id");
 
-    const draftProviderIDInput = document.getElementById("draft-provider-id");
     const draftDisplayNameInput = document.getElementById("draft-display-name");
     const draftPlatformInput = document.getElementById("draft-platform");
     const draftSmokeModelInput = document.getElementById("draft-smoke-model");
@@ -497,7 +511,7 @@ sk-example-3"></textarea>
 
     function draftFieldsAreEmpty() {
       return ![
-        draftProviderIDInput.value,
+        providerIDInput.value,
         draftDisplayNameInput.value,
         draftPlatformInput.value,
         draftSmokeModelInput.value,
@@ -580,7 +594,7 @@ sk-example-3"></textarea>
     }
 
     function updateConflictSummary() {
-      const conflicts = detectModelConflicts(parseDraftModels(), draftProviderIDInput.value);
+      const conflicts = detectModelConflicts(parseDraftModels(), providerIDInput.value);
       if (!conflicts.length) {
         setStatus(modelConflicts, "同模型已存在：当前未发现冲突。", "success");
         return conflicts;
@@ -596,7 +610,7 @@ sk-example-3"></textarea>
       const primaryModel = draftPrimaryModel();
       const displayName = draftDisplayNameInput.value.trim();
       const baseURL = draftBaseURLInput.value.trim();
-      const conflicts = detectModelConflicts(parseDraftModels(), draftProviderIDInput.value);
+      const conflicts = detectModelConflicts(parseDraftModels(), providerIDInput.value);
       if (primaryModel && conflicts.length === 1) {
         return conflicts[0].providerID;
       }
@@ -607,7 +621,7 @@ sk-example-3"></textarea>
         candidate = "provider";
       }
       const ids = existingProviderIDs();
-      const currentValue = draftProviderIDInput.value.trim();
+      const currentValue = providerIDInput.value.trim();
       if (currentValue) {
         ids.delete(currentValue);
       }
@@ -625,8 +639,8 @@ sk-example-3"></textarea>
       const suggested = buildSuggestedProviderID();
       setStatus(providerIdPreview, `providerIdPreview: ${suggested}`, "note");
       updateConflictSummary();
-      if (forceProviderID || state.draftProviderIDAuto || !draftProviderIDInput.value.trim()) {
-        draftProviderIDInput.value = suggested;
+      if (forceProviderID || state.draftProviderIDAuto || !providerIDInput.value.trim()) {
+        providerIDInput.value = suggested;
       }
       // Auto-fill smoke_test_model with first model if user hasn't filled it yet
       if (!draftSmokeModelInput.value.trim()) {
@@ -639,7 +653,7 @@ sk-example-3"></textarea>
 
     function rememberLastPublishedTemplate() {
       const payload = {
-        provider_id: draftProviderIDInput.value.trim(),
+        provider_id: providerIDInput.value.trim(),
         display_name: draftDisplayNameInput.value.trim(),
         platform: draftPlatformInput.value.trim(),
         base_url: draftBaseURLInput.value.trim(),
@@ -676,7 +690,7 @@ sk-example-3"></textarea>
       const { preserveCommitMessage = false, lockProviderID = false } = options;
       state.currentDraftID = draft.draft_id || "";
       state.draftProviderIDAuto = !lockProviderID;
-      draftProviderIDInput.value = draft.provider_id || "";
+      providerIDInput.value = draft.provider_id || "";
       draftDisplayNameInput.value = draft.display_name || "";
       draftPlatformInput.value = draft.platform || "";
       draftSmokeModelInput.value = draft.smoke_test_model || "";
@@ -717,7 +731,7 @@ sk-example-3"></textarea>
         subscriptionUsers: subscriptionUsersInput.value.trim(),
         subscriptionDays: subscriptionDaysInput.value,
         providerKeys: providerKeysInput.value,
-        draftProviderID: draftProviderIDInput.value.trim(),
+        draftProviderID: providerIDInput.value.trim(),
         draftDisplayName: draftDisplayNameInput.value.trim(),
         draftPlatform: draftPlatformInput.value.trim(),
         draftSmokeModel: draftSmokeModelInput.value.trim(),
@@ -750,7 +764,7 @@ sk-example-3"></textarea>
       subscriptionUsersInput.value = payload.subscriptionUsers || "";
       subscriptionDaysInput.value = payload.subscriptionDays || "30";
       providerKeysInput.value = payload.providerKeys || "";
-      draftProviderIDInput.value = payload.draftProviderID || "";
+      providerIDInput.value = payload.draftProviderID || "";
       draftDisplayNameInput.value = payload.draftDisplayName || "";
       draftPlatformInput.value = payload.draftPlatform || "";
       draftSmokeModelInput.value = payload.draftSmokeModel || "";
@@ -1025,7 +1039,7 @@ sk-example-3"></textarea>
     }
 
     function buildDraftPayload() {
-      const providerID = draftProviderIDInput.value.trim();
+      const providerID = providerIDInput.value.trim();
       const displayName = draftDisplayNameInput.value.trim();
       if (!providerID || !displayName) {
         throw new Error("provider_id 和 display_name 不能为空");
@@ -1241,8 +1255,8 @@ sk-example-3"></textarea>
     draftBaseURLInput.addEventListener("input", () => syncDraftHelperState(false));
     draftSmokeModelInput.addEventListener("input", () => syncDraftHelperState(false));
     draftModelsInput.addEventListener("input", () => syncDraftHelperState(false));
-    draftProviderIDInput.addEventListener("input", () => {
-      const currentValue = draftProviderIDInput.value.trim();
+    providerIDInput.addEventListener("input", () => {
+      const currentValue = providerIDInput.value.trim();
       state.draftProviderIDAuto = !currentValue || currentValue === buildSuggestedProviderID();
       syncDraftHelperState(false);
     });
@@ -1254,949 +1268,146 @@ sk-example-3"></textarea>
     syncDraftHelperState();
     refreshAdminSession().catch(() => {});
     renderServerDrafts();
-  </script>
-<script>
-    const storageKey = "sub2api-crm-provider-admin-v1";
-    const lastPublishedTemplateKey = "sub2api-crm-provider-admin:last-published-template";
-    const sampleDraftTemplate = {
-      provider_id: "openai-zhongzhuan",
-      display_name: "OpenAI 中转",
-      platform: "openai",
-      base_url: "https://api.example.com/v1",
-      smoke_test_model: "gpt-5.4",
-      supported_models: ["gpt-5.4", "gpt-5.4-mini"],
-    };
-    const state = {
-      packs: [],
-      hosts: [],
-      providers: [],
-      selectedProvider: null,
-      drafts: [],
-      currentDraftID: "",
-      draftTemplateHydrated: false,
-      draftProviderIDAuto: true,
-    };
 
-    const apiBaseInput = document.getElementById("api-base");
-    const adminTokenInput = document.getElementById("admin-token");
-    const adminUsernameInput = document.getElementById("admin-username");
-    const adminPasswordInput = document.getElementById("admin-password");
-    const adminLoginButton = document.getElementById("admin-login-btn");
-    const adminLogoutButton = document.getElementById("admin-logout-btn");
-    const adminSessionStatus = document.getElementById("admin-session-status");
-    const packIDInput = document.getElementById("pack-id");
-    const hostIDInput = document.getElementById("host-id");
-    const packPathInput = document.getElementById("pack-path");
-    const providerIDInput = document.getElementById("provider-id");
-    const modeInput = document.getElementById("mode");
-    const accessModeInput = document.getElementById("access-mode");
-    const accessAPIKeyInput = document.getElementById("access-api-key");
-    const subscriptionUsersInput = document.getElementById("subscription-users");
-    const subscriptionDaysInput = document.getElementById("subscription-days");
-    const providerKeysInput = document.getElementById("provider-keys");
-    const subscriptionFields = document.getElementById("subscription-fields");
-    const providerCatalog = document.getElementById("provider-catalog");
-    const catalogStatus = document.getElementById("catalog-status");
-    const providerStatus = document.getElementById("provider-status");
-    const draftStatus = document.getElementById("draft-status");
-    const previewResult = document.getElementById("preview-result");
-    const importResult = document.getElementById("import-result");
-    const serverDraftList = document.getElementById("server-draft-list");
+    // ===== Unified Provider Workflow glue =====
+    // When the user types/selects a provider_id, look it up in the loaded
+    // catalog and auto-populate the template fields + model picker.
+    (function wireUnifiedProviderWorkflow() {
+      const providerIdInput = document.getElementById("provider-id");
+      const modelPicker = document.getElementById("model-picker");
+      const catalogDatalist = document.getElementById("preset-provider-id-from-catalog");
+      if (!providerIdInput || !modelPicker) return;
 
-    const metricApiRoot = document.getElementById("metric-api-root");
-    const metricPackID = document.getElementById("metric-pack-id");
-    const metricProviderID = document.getElementById("metric-provider-id");
-
-    const draftProviderIDInput = document.getElementById("draft-provider-id");
-    const draftDisplayNameInput = document.getElementById("draft-display-name");
-    const draftPlatformInput = document.getElementById("draft-platform");
-    const draftSmokeModelInput = document.getElementById("draft-smoke-model");
-    const draftBaseURLInput = document.getElementById("draft-base-url");
-    const draftModelsInput = document.getElementById("draft-models");
-    const draftCommitMessageInput = document.getElementById("draft-commit-message");
-    const recentTemplateMeta = document.getElementById("recent-template-meta");
-    const providerIdPreview = document.getElementById("provider-id-preview");
-    const modelConflicts = document.getElementById("model-conflicts");
-
-    function defaultApiBase() {
-      return `${window.location.origin}/portal-admin-api`;
-    }
-
-    function normalizeApiBase() {
-      return (apiBaseInput.value.trim() || defaultApiBase()).replace(/\/+$/, "");
-    }
-
-    function setStatus(target, message, tone = "") {
-      target.textContent = message;
-      if (tone) {
-        target.dataset.tone = tone;
-      } else {
-        delete target.dataset.tone;
-      }
-    }
-
-    function authHeaders() {
-      const headers = {
-        "Content-Type": "application/json",
-      };
-      const token = adminTokenInput.value.trim();
-      if (token) {
-        headers.Authorization = `Bearer ${token}`;
-      }
-      return headers;
-    }
-
-    function requestJSON(path, options = {}) {
-      const { skipAuth = false, headers = {}, ...rest } = options;
-      const finalHeaders = { ...headers };
-      if (!skipAuth) {
-        Object.assign(finalHeaders, authHeaders(), finalHeaders);
-      }
-      return fetch(`${normalizeApiBase()}${path}`, {
-        ...rest,
-        credentials: "include",
-        headers: finalHeaders,
-      })
-        .then(async (response) => {
-          const text = await response.text();
-          let payload = {};
-          try {
-            payload = text ? JSON.parse(text) : {};
-          } catch (error) {
-            payload = { raw: text };
-          }
-          if (!response.ok) {
-            const message = payload?.error?.message || payload?.error || payload?.raw || `HTTP ${response.status}`;
-            throw new Error(message);
-          }
-          return payload;
-        });
-    }
-
-    function syncMetrics() {
-      metricApiRoot.textContent = normalizeApiBase();
-      metricPackID.textContent = packIDInput.value || "-";
-      metricProviderID.textContent = providerIDInput.value || "-";
-    }
-
-    function parseDraftModels() {
-      return draftModelsInput.value
-        .split(",")
-        .map((value) => value.trim())
-        .filter(Boolean);
-    }
-
-    function draftFieldsAreEmpty() {
-      return ![
-        draftProviderIDInput.value,
-        draftDisplayNameInput.value,
-        draftPlatformInput.value,
-        draftSmokeModelInput.value,
-        draftBaseURLInput.value,
-        draftModelsInput.value,
-      ].some((value) => String(value || "").trim());
-    }
-
-    function slugifyProviderPart(value) {
-      return String(value || "")
-        .trim()
-        .toLowerCase()
-        .replace(/https?:\/\//g, "")
-        .replace(/[^a-z0-9]+/g, "-")
-        .replace(/^-+|-+$/g, "");
-    }
-
-    function inferRouteSuffix(displayName, baseURL) {
-      const display = String(displayName || "").toLowerCase();
-      const url = String(baseURL || "").toLowerCase();
-      if (display.includes("官方") || display.includes("official") || url.includes("deepseek.com")) {
-        return "official";
-      }
-      if (display.includes("中转") || display.includes("relay")) {
-        const host = slugifyProviderPart(url.split("/")[0] || "");
-        if (host && !["api", "com", "www", "example"].includes(host)) {
-          return host;
-        }
-        return "relay";
-      }
-      const host = slugifyProviderPart(url.split("/")[0] || "");
-      return host || "";
-    }
-
-    function draftPrimaryModel() {
-      return parseDraftModels()[0] || draftSmokeModelInput.value.trim() || "";
-    }
-
-    function existingProviderIDs() {
-      const ids = new Set();
-      state.providers.forEach((provider) => ids.add((provider.provider_id || "").trim()));
-      state.drafts.forEach((draft) => ids.add((draft.provider_id || "").trim()));
-      return ids;
-    }
-
-    function detectModelConflicts(models, ignoreProviderID = "") {
-      const normalizedModels = models.map((value) => value.trim()).filter(Boolean);
-      const ignored = ignoreProviderID.trim();
-      const conflicts = [];
-      const seen = new Set();
-      const scan = (entries, source) => {
-        entries.forEach((entry) => {
-          const providerID = (entry.provider_id || entry.providerID || "").trim();
-          if (!providerID || providerID === ignored) {
-            return;
-          }
-          const supportedModels = Array.isArray(entry.supported_models || entry.supportedModels)
-            ? (entry.supported_models || entry.supportedModels)
-            : [];
-          const matched = supportedModels.filter((model) => normalizedModels.includes(String(model || "").trim()));
-          if (!matched.length) {
-            return;
-          }
-          const key = `${providerID}:${matched.join(",")}`;
-          if (seen.has(key)) {
-            return;
-          }
-          seen.add(key);
-          conflicts.push({
-            providerID,
-            displayName: entry.display_name || entry.displayName || providerID,
-            matchedModels: matched,
-            source,
-          });
-        });
-      };
-      scan(state.providers, "provider");
-      scan(state.drafts, "draft");
-      return conflicts;
-    }
-
-    function updateConflictSummary() {
-      const conflicts = detectModelConflicts(parseDraftModels(), draftProviderIDInput.value);
-      if (!conflicts.length) {
-        setStatus(modelConflicts, "同模型已存在：当前未发现冲突。", "success");
-        return conflicts;
-      }
-      const labels = conflicts
-        .map((item) => `${item.matchedModels.join("/")} -> ${item.providerID}`)
-        .join("；");
-      setStatus(modelConflicts, `同模型已存在：${labels}。通常不需要因为“官方 / 中转”再重复新增 provider，优先复用或修改已有 provider。`, "warning");
-      return conflicts;
-    }
-
-    function buildSuggestedProviderID() {
-      const primaryModel = draftPrimaryModel();
-      const displayName = draftDisplayNameInput.value.trim();
-      const baseURL = draftBaseURLInput.value.trim();
-      const conflicts = detectModelConflicts(parseDraftModels(), draftProviderIDInput.value);
-      if (primaryModel && conflicts.length === 1) {
-        return conflicts[0].providerID;
-      }
-      const baseCandidate = slugifyProviderPart(primaryModel) || slugifyProviderPart(displayName) || "provider";
-      const suffix = inferRouteSuffix(displayName, baseURL);
-      let candidate = [baseCandidate, suffix].filter(Boolean).join("-");
-      if (!candidate) {
-        candidate = "provider";
-      }
-      const ids = existingProviderIDs();
-      const currentValue = draftProviderIDInput.value.trim();
-      if (currentValue) {
-        ids.delete(currentValue);
-      }
-      if (!ids.has(candidate)) {
-        return candidate;
-      }
-      let index = 2;
-      while (ids.has(`${candidate}-${index}`)) {
-        index += 1;
-      }
-      return `${candidate}-${index}`;
-    }
-
-    function syncDraftHelperState(forceProviderID = false) {
-      const suggested = buildSuggestedProviderID();
-      setStatus(providerIdPreview, `providerIdPreview: ${suggested}`, "note");
-      updateConflictSummary();
-      if (forceProviderID || state.draftProviderIDAuto || !draftProviderIDInput.value.trim()) {
-        draftProviderIDInput.value = suggested;
-      }
-      // Auto-fill smoke_test_model with first model if user hasn't filled it yet
-      if (!draftSmokeModelInput.value.trim()) {
-        const models = parseDraftModels();
-        if (models.length > 0) {
-          draftSmokeModelInput.value = models[0];
-        }
-      }
-    }
-
-    function rememberLastPublishedTemplate() {
-      const payload = {
-        provider_id: draftProviderIDInput.value.trim(),
-        display_name: draftDisplayNameInput.value.trim(),
-        platform: draftPlatformInput.value.trim(),
-        base_url: draftBaseURLInput.value.trim(),
-        smoke_test_model: draftSmokeModelInput.value.trim(),
-        supported_models: parseDraftModels(),
-        saved_at: new Date().toISOString(),
-      };
-      localStorage.setItem(lastPublishedTemplateKey, JSON.stringify(payload));
-      renderRecentTemplateMeta(payload);
-    }
-
-    function readLastPublishedTemplate() {
-      try {
-        const raw = localStorage.getItem(lastPublishedTemplateKey);
-        if (!raw) {
-          return null;
-        }
-        return JSON.parse(raw);
-      } catch (error) {
-        return null;
-      }
-    }
-
-    function renderRecentTemplateMeta(template) {
-      if (!template) {
-        setStatus(recentTemplateMeta, "最近成功模板：暂无。首次可以先按一份已有 provider 作为参考修改。", "note");
-        return;
-      }
-      const models = Array.isArray(template.supported_models) ? template.supported_models.join(", ") : "";
-      setStatus(recentTemplateMeta, `最近成功模板：${template.provider_id || "-"} · ${template.display_name || "-"} · ${models || "-"}`, "success");
-    }
-
-    function fillDraftForm(draft, options = {}) {
-      const { preserveCommitMessage = false, lockProviderID = false } = options;
-      state.currentDraftID = draft.draft_id || "";
-      state.draftProviderIDAuto = !lockProviderID;
-      draftProviderIDInput.value = draft.provider_id || "";
-      draftDisplayNameInput.value = draft.display_name || "";
-      draftPlatformInput.value = draft.platform || "";
-      draftSmokeModelInput.value = draft.smoke_test_model || "";
-      draftBaseURLInput.value = draft.base_url || "";
-      draftModelsInput.value = Array.isArray(draft.supported_models) ? draft.supported_models.join(",") : "";
-      if (!preserveCommitMessage && !draftCommitMessageInput.value.trim()) {
-        draftCommitMessageInput.value = `feat(pack): publish provider draft ${draft.provider_id || ""}`.trim();
-      }
-      syncDraftHelperState();
-    }
-
-    function hydrateDraftTemplateIfNeeded() {
-      if (state.draftTemplateHydrated || !draftFieldsAreEmpty()) {
-        return;
-      }
-      const template = readLastPublishedTemplate()
-        || state.drafts[0]
-        || state.providers[0]
-        || sampleDraftTemplate;
-      fillDraftForm(template, { preserveCommitMessage: true });
-      state.currentDraftID = "";
-      state.draftTemplateHydrated = true;
-      renderRecentTemplateMeta(template === sampleDraftTemplate ? null : template);
-    }
-
-    function saveConfig() {
-      localStorage.setItem(storageKey, JSON.stringify({
-        apiBase: apiBaseInput.value.trim(),
-        adminToken: adminTokenInput.value,
-        adminUsername: adminUsernameInput.value.trim(),
-        packID: packIDInput.value,
-        hostID: hostIDInput.value,
-        packPath: packPathInput.value.trim(),
-        providerID: providerIDInput.value.trim(),
-        mode: modeInput.value,
-        accessMode: accessModeInput.value,
-        accessAPIKey: accessAPIKeyInput.value.trim(),
-        subscriptionUsers: subscriptionUsersInput.value.trim(),
-        subscriptionDays: subscriptionDaysInput.value,
-        providerKeys: providerKeysInput.value,
-        draftProviderID: draftProviderIDInput.value.trim(),
-        draftDisplayName: draftDisplayNameInput.value.trim(),
-        draftPlatform: draftPlatformInput.value.trim(),
-        draftSmokeModel: draftSmokeModelInput.value.trim(),
-        draftBaseURL: draftBaseURLInput.value.trim(),
-        draftModels: draftModelsInput.value.trim(),
-        draftCommitMessage: draftCommitMessageInput.value.trim(),
-      }));
-      syncMetrics();
-      setStatus(catalogStatus, "本地配置已保存。", "success");
-    }
-
-    function restoreConfig() {
-      const raw = localStorage.getItem(storageKey);
-      apiBaseInput.value = defaultApiBase();
-      packPathInput.value = "/app/packs/openai-cn-pack";
-      subscriptionDaysInput.value = "30";
-      if (!raw) {
-        syncMetrics();
-        return;
-      }
-      try {
-        const payload = JSON.parse(raw);
-        apiBaseInput.value = payload.apiBase || defaultApiBase();
-        adminTokenInput.value = payload.adminToken || "";
-        adminUsernameInput.value = payload.adminUsername || "";
-        packPathInput.value = payload.packPath || "/app/packs/openai-cn-pack";
-        providerIDInput.value = payload.providerID || "";
-        modeInput.value = payload.mode || "strict";
-        accessModeInput.value = payload.accessMode || "self_service";
-        accessAPIKeyInput.value = payload.accessAPIKey || "";
-        subscriptionUsersInput.value = payload.subscriptionUsers || "";
-        subscriptionDaysInput.value = payload.subscriptionDays || "30";
-        providerKeysInput.value = payload.providerKeys || "";
-        draftProviderIDInput.value = payload.draftProviderID || "";
-        draftDisplayNameInput.value = payload.draftDisplayName || "";
-        draftPlatformInput.value = payload.draftPlatform || "";
-        draftSmokeModelInput.value = payload.draftSmokeModel || "";
-        draftBaseURLInput.value = payload.draftBaseURL || "";
-        draftModelsInput.value = payload.draftModels || "";
-        draftCommitMessageInput.value = payload.draftCommitMessage || "";
-      } catch (error) {
-        apiBaseInput.value = defaultApiBase();
-      }
-      syncMetrics();
-    }
-
-    function updateAccessModeFields() {
-      subscriptionFields.hidden = accessModeInput.value !== "subscription";
-    }
-
-    async function refreshAdminSession() {
-      try {
-        const payload = await requestJSON("/api/admin/session", { skipAuth: true });
-        if (payload.username && !adminUsernameInput.value.trim()) {
-          adminUsernameInput.value = payload.username;
-        }
-        if (payload.authenticated) {
-          setStatus(adminSessionStatus, `已登录：${payload.username}`, "success");
-        } else if (payload.login_enabled) {
-          setStatus(adminSessionStatus, "未登录。可直接使用管理员用户名密码建立会话。", "note");
-        } else {
-          setStatus(adminSessionStatus, "当前实例未启用管理员密码登录，只能使用 Bearer token。", "warning");
-        }
-        return payload;
-      } catch (error) {
-        setStatus(adminSessionStatus, `管理员会话检查失败：${error.message}`, "danger");
-        throw error;
-      }
-    }
-
-    async function loginAdminSession() {
-      const username = adminUsernameInput.value.trim();
-      const password = adminPasswordInput.value;
-      if (!username || !password) {
-        throw new Error("管理员用户名和密码不能为空");
-      }
-      const payload = await requestJSON("/api/admin/session/login", {
-        method: "POST",
-        skipAuth: true,
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ username, password }),
-      });
-      adminPasswordInput.value = "";
-      saveConfig();
-      setStatus(adminSessionStatus, `已登录：${payload.username}`, "success");
-      return payload;
-    }
-
-    async function logoutAdminSession() {
-      const response = await fetch(`${normalizeApiBase()}/api/admin/session/logout`, {
-        method: "POST",
-        credentials: "include",
-      });
-      if (!response.ok) {
-        const text = await response.text();
-        throw new Error(text || `HTTP ${response.status}`);
-      }
-      adminPasswordInput.value = "";
-      setStatus(adminSessionStatus, "管理员会话已退出。", "note");
-    }
-
-    function renderSelectOptions(select, values, currentValue, emptyLabel) {
-      select.innerHTML = "";
-      if (!values.length) {
-        const option = document.createElement("option");
-        option.value = "";
-        option.textContent = emptyLabel;
-        select.appendChild(option);
-        return;
-      }
-      values.forEach((entry) => {
-        const option = document.createElement("option");
-        option.value = entry.value;
-        option.textContent = entry.label;
-        if (entry.value === currentValue) {
-          option.selected = true;
-        }
-        select.appendChild(option);
-      });
-    }
-
-    function renderCatalog() {
-      if (!state.providers.length) {
-        providerCatalog.innerHTML = '<div class="empty">当前 pack 下没有 provider。</div>';
-        return;
-      }
-      providerCatalog.innerHTML = state.providers.map((provider) => `
-        <button type="button" class="catalog-item ${state.selectedProvider?.provider_id === provider.provider_id ? "is-selected" : ""}" data-provider-id="${escapeHTML(provider.provider_id)}">
-          <strong>${escapeHTML(provider.display_name || provider.provider_id)}</strong>
-          <div class="empty">${escapeHTML(provider.provider_id)}</div>
-          <div class="catalog-meta">
-            <span class="pill tone-note">${escapeHTML(provider.platform || "unknown")}</span>
-            <span class="pill ${provider.host_overlays > 0 ? "tone-ready" : ""}">host overlays: ${escapeHTML(provider.host_overlays || 0)}</span>
-          </div>
-        </button>
-      `).join("");
-      providerCatalog.querySelectorAll("[data-provider-id]").forEach((element) => {
-        element.addEventListener("click", () => {
-          const providerID = element.getAttribute("data-provider-id");
-          const selected = state.providers.find((item) => item.provider_id === providerID);
-          if (!selected) return;
-          state.selectedProvider = selected;
-          providerIDInput.value = selected.provider_id;
-          syncMetrics();
-          renderCatalog();
-          setStatus(providerStatus, `已选择 provider：${selected.provider_id}`, "success");
-        });
-      });
-    }
-
-    function renderServerDrafts() {
-      if (!state.drafts.length) {
-        serverDraftList.innerHTML = '<div class="empty">还没有服务端草稿。</div>';
-        return;
-      }
-      serverDraftList.innerHTML = state.drafts.map((draft) => `
-        <button type="button" class="draft-item" data-draft-id="${escapeHTML(draft.draft_id)}">
-          <strong>${escapeHTML(draft.display_name || draft.provider_id)}</strong>
-          <div class="empty">${escapeHTML(draft.provider_id)} · ${escapeHTML(draft.pack_id)}</div>
-          <div class="catalog-meta">
-            <span class="pill tone-note">${escapeHTML(draft.platform || "unknown")}</span>
-            <span class="pill">${escapeHTML(draft.draft_id)}</span>
-          </div>
-        </button>
-      `).join("");
-      serverDraftList.querySelectorAll("[data-draft-id]").forEach((element) => {
-        element.addEventListener("click", () => {
-          const draftID = element.getAttribute("data-draft-id");
-          const draft = state.drafts.find((item) => item.draft_id === draftID);
-          if (!draft) {
-            return;
-          }
-          fillDraftForm(draft, { lockProviderID: true });
-          importResult.textContent = JSON.stringify(draft.manifest || {}, null, 2);
-          setStatus(draftStatus, `已回填服务端草稿：${draft.draft_id}`, "success");
-        });
-      });
-    }
-
-    function clearDraftFormSelection() {
-      state.currentDraftID = "";
-      state.draftProviderIDAuto = true;
-    }
-
-    async function loadCatalog() {
-      const button = document.getElementById("load-catalog-btn");
-      button.disabled = true;
-      try {
-        setStatus(catalogStatus, "正在加载 pack / host / provider 目录 ...");
-        syncMetrics();
-        const [packsPayload, hostsPayload] = await Promise.all([
-          requestJSON("/api/packs", { headers: authHeaders() }),
-          requestJSON("/api/hosts", { headers: authHeaders() }),
-        ]);
-        state.packs = Array.isArray(packsPayload.packs) ? packsPayload.packs : [];
-        state.hosts = Array.isArray(hostsPayload.hosts) ? hostsPayload.hosts : [];
-
-        const packOptions = state.packs.map((pack) => ({
-          value: pack.pack_id,
-          label: `${pack.pack_id} (${pack.version})`,
-        }));
-        const hostOptions = state.hosts.map((host) => ({
-          value: host.host_id,
-          label: `${host.host_id} · ${host.host_version || "unknown"}`,
-        }));
-
-        const savedPackID = JSON.parse(localStorage.getItem(storageKey) || "{}").packID || "";
-        const savedHostID = JSON.parse(localStorage.getItem(storageKey) || "{}").hostID || "";
-        renderSelectOptions(packIDInput, packOptions, savedPackID || packOptions[0]?.value || "", "暂无 pack");
-        renderSelectOptions(hostIDInput, hostOptions, savedHostID || hostOptions[0]?.value || "", "暂无 host");
-
-        const packID = packIDInput.value;
-        if (!packID) {
-          state.providers = [];
-          renderCatalog();
-          setStatus(catalogStatus, "没有可用 pack。", "warning");
+      // Render model checkboxes into the picker area
+      function renderModelPicker(models) {
+        if (!models || models.length === 0) {
+          modelPicker.innerHTML = '<span class="hint" style="margin:0;">模板还没保存或未选模型，<a href="#template-section">先在上面填 Models 字段</a> 再保存草稿</span>';
           return;
         }
-
-        const providersPayload = await requestJSON(`/api/packs/${encodeURIComponent(packID)}/providers`, {
-          headers: authHeaders(),
+        const wrap = document.createElement("div");
+        wrap.style.display = "flex";
+        wrap.style.flexWrap = "wrap";
+        wrap.style.gap = "6px";
+        models.forEach((m) => {
+          const label = document.createElement("label");
+          label.style.cssText = "display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:9999px; background:var(--bg-elev-2); border:1px solid var(--border-subtle); font-size:12px; font-weight:600; cursor:pointer; color:var(--text-default);";
+          const cb = document.createElement("input");
+          cb.type = "checkbox";
+          cb.value = m;
+          cb.checked = true;
+          cb.dataset.role = "model-pick";
+          label.appendChild(cb);
+          label.appendChild(document.createTextNode(m));
+          wrap.appendChild(label);
         });
-        state.providers = Array.isArray(providersPayload.providers) ? providersPayload.providers : [];
-        state.selectedProvider = state.providers.find((item) => item.provider_id === providerIDInput.value) || state.providers[0] || null;
-        if (state.selectedProvider) {
-          providerIDInput.value = state.selectedProvider.provider_id;
+        const actions = document.createElement("div");
+        actions.style.cssText = "display:flex; gap:6px; margin-left:auto;";
+        const allBtn = document.createElement("button");
+        allBtn.type = "button";
+        allBtn.className = "ghost";
+        allBtn.textContent = "全选";
+        allBtn.style.cssText = "padding:2px 8px; font-size:11px;";
+        allBtn.addEventListener("click", (ev) => {
+          ev.preventDefault();
+          wrap.querySelectorAll('input[data-role="model-pick"]').forEach((c) => (c.checked = true));
+        });
+        const noneBtn = document.createElement("button");
+        noneBtn.type = "button";
+        noneBtn.className = "ghost";
+        noneBtn.textContent = "全不选";
+        noneBtn.style.cssText = "padding:2px 8px; font-size:11px;";
+        noneBtn.addEventListener("click", (ev) => {
+          ev.preventDefault();
+          wrap.querySelectorAll('input[data-role="model-pick"]').forEach((c) => (c.checked = false));
+        });
+        actions.appendChild(allBtn);
+        actions.appendChild(noneBtn);
+        wrap.appendChild(actions);
+        modelPicker.innerHTML = "";
+        modelPicker.appendChild(wrap);
+      }
+
+      function findProvider(id) {
+        if (!id || !Array.isArray(state.providers)) return null;
+        return state.providers.find((p) => p.provider_id === id) || null;
+      }
+
+      function syncFromProviderId() {
+        const id = providerIdInput.value.trim();
+        // Mirror into provider-id (the shared input) so the existing draft logic picks it up
+        if (providerIdInput && id) {
+          providerIdInput.value = id;
+          state.draftProviderIDAuto = false;
         }
-        renderCatalog();
-        syncMetrics();
-        saveCurrentIDsOnly();
-        await loadServerDrafts();
-        hydrateDraftTemplateIfNeeded();
-        setStatus(catalogStatus, `目录已加载：${state.packs.length} 个 pack，${state.providers.length} 个 provider。`, "success");
-      } catch (error) {
-        setStatus(catalogStatus, `加载目录失败：${error.message}`, "danger");
-      } finally {
-        button.disabled = false;
+        const p = findProvider(id);
+        if (p) {
+          // Auto-fill template fields from catalog
+          if (p.display_name && draftDisplayNameInput) draftDisplayNameInput.value = p.display_name;
+          if (p.platform && draftPlatformInput) draftPlatformInput.value = p.platform;
+          if (p.smoke_test_model && draftSmokeModelInput) draftSmokeModelInput.value = p.smoke_test_model;
+          if (p.base_url_placeholder && draftBaseURLInput) draftBaseURLInput.value = p.base_url_placeholder;
+          if (Array.isArray(p.supported_models) && draftModelsInput) {
+            draftModelsInput.value = p.supported_models.join(",");
+          }
+          renderModelPicker(p.supported_models || []);
+          AdminCommon.setStatus(document.getElementById("provider-status"), `已从目录加载 provider "${id}" 的模板和模型。可直接修改后点「保存草稿」或继续填 Keys 批量导入。`, "note");
+        } else if (id) {
+          // New provider — clear picker, leave template fields for the user to fill
+          renderModelPicker([]);
+          AdminCommon.setStatus(document.getElementById("provider-status"), `新 provider "${id}"：先在 ② 模板参数 里填 Models / Display Name / Base URL 等，再「保存草稿」。`, "note");
+        } else {
+          renderModelPicker([]);
+        }
+        syncDraftHelperState(false);
       }
-    }
 
-    function saveCurrentIDsOnly() {
-      const raw = localStorage.getItem(storageKey);
-      let payload = {};
-      try {
-        payload = raw ? JSON.parse(raw) : {};
-      } catch (error) {
-        payload = {};
-      }
-      payload.packID = packIDInput.value;
-      payload.hostID = hostIDInput.value;
-      localStorage.setItem(storageKey, JSON.stringify(payload));
-    }
-
-    function parseKeys() {
-      const keys = providerKeysInput.value
-        .split("\n")
-        .map((value) => value.trim())
-        .filter(Boolean);
-      if (!keys.length) {
-        throw new Error("至少填写一把供应商 key");
-      }
-      return keys;
-    }
-
-    function selectedProviderID() {
-      const providerID = providerIDInput.value.trim();
-      if (!providerID) {
-        throw new Error("provider_id 不能为空");
-      }
-      return providerID;
-    }
-
-    function baseProviderPayload() {
-      const hostID = hostIDInput.value.trim();
-      const packPath = packPathInput.value.trim();
-      if (!hostID) {
-        throw new Error("host_id 不能为空");
-      }
-      if (!packPath) {
-        throw new Error("pack_path 不能为空");
-      }
-      return {
-        host_id: hostID,
-        pack_path: packPath,
-        provider_id: selectedProviderID(),
-        keys: parseKeys(),
-        mode: modeInput.value,
-      };
-    }
-
-    function buildImportPayload() {
-      const payload = {
-        ...baseProviderPayload(),
-        access_mode: accessModeInput.value,
-        access_api_key: accessAPIKeyInput.value.trim(),
-      };
-      if (!payload.access_api_key) {
-        throw new Error("access_api_key / probe_api_key 不能为空");
-      }
-      if (payload.access_mode === "subscription") {
-        payload.subscription_users = subscriptionUsersInput.value
-          .split(",")
-          .map((value) => value.trim())
-          .filter(Boolean);
-        payload.subscription_days = Number(subscriptionDaysInput.value || 30);
-        if (!payload.subscription_users.length) {
-          throw new Error("subscription 模式下 subscription_users 不能为空");
+      // Re-render catalog datalist when providers list changes
+      function refreshCatalogDatalist() {
+        if (!catalogDatalist) return;
+        catalogDatalist.innerHTML = "";
+        if (Array.isArray(state.providers)) {
+          state.providers.forEach((p) => {
+            const opt = document.createElement("option");
+            opt.value = p.provider_id;
+            catalogDatalist.appendChild(opt);
+          });
         }
       }
-      return payload;
-    }
 
-    async function previewProvider() {
-      const button = document.getElementById("preview-provider-btn");
-      button.disabled = true;
-      try {
-        const providerID = selectedProviderID();
-        setStatus(providerStatus, `正在预检 ${providerID} ...`);
-        const payload = baseProviderPayload();
-        const preview = await requestJSON(`/api/providers/${encodeURIComponent(providerID)}/preview-import`, {
-          method: "POST",
-          headers: authHeaders(),
-          body: JSON.stringify(payload),
-        });
-        previewResult.textContent = JSON.stringify(preview, null, 2);
-        setStatus(providerStatus, `preview-import 已完成：${providerID}`, "success");
-      } catch (error) {
-        setStatus(providerStatus, `预检失败：${error.message}`, "danger");
-      } finally {
-        button.disabled = false;
-      }
-    }
+      // Hook: input change on provider-id
+      providerIdInput.addEventListener("input", syncFromProviderId);
+      providerIdInput.addEventListener("change", syncFromProviderId);
 
-    async function importProvider() {
-      const button = document.getElementById("import-provider-btn");
-      button.disabled = true;
-      try {
-        const providerID = selectedProviderID();
-        setStatus(providerStatus, `正在导入 ${providerID} ...`);
-        const payload = buildImportPayload();
-        const result = await requestJSON(`/api/providers/${encodeURIComponent(providerID)}/import`, {
-          method: "POST",
-          headers: authHeaders(),
-          body: JSON.stringify(payload),
-        });
-        importResult.textContent = JSON.stringify(result, null, 2);
-        setStatus(providerStatus, `import 已完成：${providerID}`, "success");
-      } catch (error) {
-        setStatus(providerStatus, `导入失败：${error.message}`, "danger");
-      } finally {
-        button.disabled = false;
-      }
-    }
-
-    function buildDraftPayload() {
-      const providerID = draftProviderIDInput.value.trim();
-      const displayName = draftDisplayNameInput.value.trim();
-      if (!providerID || !displayName) {
-        throw new Error("provider_id 和 display_name 不能为空");
-      }
-      const models = draftModelsInput.value
-        .split(",")
-        .map((value) => value.trim())
-        .filter(Boolean);
-      return {
-        provider_id: providerID,
-        display_name: displayName,
-        platform: draftPlatformInput.value.trim() || "openai",
-        smoke_test_model: draftSmokeModelInput.value.trim() || (models[0] || ""),
-        base_url_placeholder: draftBaseURLInput.value.trim() || "https://api.example.com/v1",
-        supported_models: models,
-      };
-    }
-
-    function buildServerDraftPayload() {
-      const draft = buildDraftPayload();
-      return {
-        pack_id: packIDInput.value || "openai-cn-pack",
-        provider_id: draft.provider_id,
-        display_name: draft.display_name,
-        platform: draft.platform,
-        base_url: draft.base_url_placeholder,
-        smoke_test_model: draft.smoke_test_model,
-        supported_models: draft.supported_models,
-        source_host_id: hostIDInput.value || "",
-        manifest: {
-          provider_id: draft.provider_id,
-          display_name: draft.display_name,
-          platform: draft.platform,
-          base_url: draft.base_url_placeholder,
-          smoke_test_model: draft.smoke_test_model,
-          supported_models: draft.supported_models,
-        },
-      };
-    }
-
-    function generateDraft() {
-      try {
-        const draft = buildDraftPayload();
-        const output = {
-          provider_id: draft.provider_id,
-          display_name: draft.display_name,
-          platform: draft.platform,
-          smoke_test_model: draft.smoke_test_model,
-          base_url: draft.base_url_placeholder,
-          supported_models: draft.supported_models,
-        };
-        importResult.textContent = JSON.stringify(output, null, 2);
-        setStatus(draftStatus, "manifest 草稿已生成，可以直接复制。", "success");
-      } catch (error) {
-        setStatus(draftStatus, `生成失败：${error.message}`, "danger");
-      }
-    }
-
-    async function copyDraft() {
-      try {
-        await navigator.clipboard.writeText(importResult.textContent);
-        setStatus(draftStatus, "JSON 草稿已复制。", "success");
-      } catch (error) {
-        setStatus(draftStatus, "复制失败，请手动复制下方 JSON。", "warning");
-      }
-    }
-
-    async function saveDraftToServer() {
-      const button = document.getElementById("save-draft-btn");
-      button.disabled = true;
-      try {
-        const payload = buildServerDraftPayload();
-        const result = await requestJSON("/api/provider-drafts", {
-          method: "POST",
-          body: JSON.stringify(payload),
-        });
-        importResult.textContent = JSON.stringify(result.draft || result, null, 2);
-        state.currentDraftID = result.draft?.draft_id || "";
-        setStatus(draftStatus, `草稿已保存：${result.draft?.draft_id || "-"}`, "success");
-        await loadServerDrafts();
-      } catch (error) {
-        setStatus(draftStatus, `保存失败：${error.message}`, "danger");
-      } finally {
-        button.disabled = false;
-      }
-    }
-
-    async function updateDraftOnServer() {
-      const button = document.getElementById("update-draft-btn");
-      button.disabled = true;
-      try {
-        if (!state.currentDraftID) {
-          throw new Error("请先从服务端草稿列表选择一条草稿");
+      // Hook: refresh catalog datalist after loadCatalog runs.
+      // loadCatalog is the function name in the main script. We poll state
+      // with a short interval since it's not directly exposed.
+      let lastProvidersRef = null;
+      setInterval(() => {
+        if (state.providers !== lastProvidersRef) {
+          lastProvidersRef = state.providers;
+          refreshCatalogDatalist();
+          // Also re-sync if the current id is now known
+          syncFromProviderId();
         }
-        const payload = buildServerDraftPayload();
-        const result = await requestJSON(`/api/provider-drafts/${encodeURIComponent(state.currentDraftID)}`, {
-          method: "PUT",
-          body: JSON.stringify(payload),
-        });
-        importResult.textContent = JSON.stringify(result.draft || result, null, 2);
-        setStatus(draftStatus, `草稿已更新：${state.currentDraftID}`, "success");
-        await loadServerDrafts();
-      } catch (error) {
-        setStatus(draftStatus, `更新失败：${error.message}`, "danger");
-      } finally {
-        button.disabled = false;
-      }
-    }
+      }, 500);
 
-    async function deleteDraftOnServer() {
-      const button = document.getElementById("delete-draft-btn");
-      button.disabled = true;
-      try {
-        if (!state.currentDraftID) {
-          throw new Error("请先从服务端草稿列表选择一条草稿");
+      // Hook: when Models field changes, refresh the picker
+      draftModelsInput.addEventListener("input", () => {
+        // Only refresh if no provider is currently auto-populating from catalog
+        const id = providerIdInput.value.trim();
+        const p = findProvider(id);
+        if (!p) {
+          const models = parseDraftModels();
+          if (models.length > 0) {
+            renderModelPicker(models);
+          }
         }
-        await requestJSON(`/api/provider-drafts/${encodeURIComponent(state.currentDraftID)}`, {
-          method: "DELETE",
-        });
-        const deletedDraftID = state.currentDraftID;
-        clearDraftFormSelection();
-        importResult.textContent = JSON.stringify({ deleted_draft_id: deletedDraftID }, null, 2);
-        setStatus(draftStatus, `草稿已删除：${deletedDraftID}`, "success");
-        await loadServerDrafts();
-      } catch (error) {
-        setStatus(draftStatus, `删除失败：${error.message}`, "danger");
-      } finally {
-        button.disabled = false;
-      }
-    }
+      });
 
-    async function loadServerDrafts() {
-      try {
-        const params = new URLSearchParams();
-        if (packIDInput.value) {
-          params.set("pack_id", packIDInput.value);
-        }
-        const suffix = params.toString() ? `?${params.toString()}` : "";
-        const payload = await requestJSON(`/api/provider-drafts${suffix}`, {
-        });
-        state.drafts = Array.isArray(payload.provider_drafts) ? payload.provider_drafts : [];
-        renderServerDrafts();
-        hydrateDraftTemplateIfNeeded();
-      } catch (error) {
-        serverDraftList.innerHTML = `<div class="empty">加载草稿失败：${escapeHTML(error.message)}</div>`;
-      }
-    }
-
-    async function publishDraftToRepo() {
-      const button = document.getElementById("publish-draft-btn");
-      button.disabled = true;
-      try {
-        if (!state.currentDraftID) {
-          throw new Error("请先从服务端草稿列表选择一条草稿");
-        }
-        const result = await requestJSON(`/api/provider-drafts/${encodeURIComponent(state.currentDraftID)}/publish`, {
-          method: "POST",
-          body: JSON.stringify({
-            commit_message: draftCommitMessageInput.value.trim(),
-          }),
-        });
-        importResult.textContent = JSON.stringify(result.publish || result, null, 2);
-        rememberLastPublishedTemplate();
-        setStatus(
-          draftStatus,
-          `已发布到仓库：${result.publish?.provider_path || "-"} · ${result.publish?.pack_version_before || "-"} -> ${result.publish?.pack_version_after || "-"} · ${result.publish?.commit_sha || "-"}`,
-          "success",
-        );
-      } catch (error) {
-        setStatus(draftStatus, `发布失败：${error.message}`, "danger");
-      } finally {
-        button.disabled = false;
-      }
-    }
-
-    function escapeHTML(value) {
-      return String(value)
-        .replaceAll("&", "&amp;")
-        .replaceAll("<", "&lt;")
-        .replaceAll(">", "&gt;")
-        .replaceAll('"', "&quot;")
-        .replaceAll("'", "&#39;");
-    }
-
-    document.getElementById("load-catalog-btn").addEventListener("click", loadCatalog);
-    document.getElementById("save-config-btn").addEventListener("click", saveConfig);
-    document.getElementById("preview-provider-btn").addEventListener("click", previewProvider);
-    document.getElementById("import-provider-btn").addEventListener("click", importProvider);
-    document.getElementById("generate-draft-btn").addEventListener("click", generateDraft);
-    document.getElementById("save-draft-btn").addEventListener("click", saveDraftToServer);
-    document.getElementById("update-draft-btn").addEventListener("click", updateDraftOnServer);
-    document.getElementById("publish-draft-btn").addEventListener("click", publishDraftToRepo);
-    document.getElementById("delete-draft-btn").addEventListener("click", deleteDraftOnServer);
-    document.getElementById("copy-draft-btn").addEventListener("click", copyDraft);
-    document.getElementById("refresh-drafts-btn").addEventListener("click", loadServerDrafts);
-    adminLoginButton.addEventListener("click", async () => {
-      try {
-        await loginAdminSession();
-        await loadCatalog();
-      } catch (error) {
-        setStatus(adminSessionStatus, error.message, "danger");
-      }
-    });
-    adminLogoutButton.addEventListener("click", async () => {
-      try {
-        await logoutAdminSession();
-        await refreshAdminSession();
-      } catch (error) {
-        setStatus(adminSessionStatus, error.message, "danger");
-      }
-    });
-    accessModeInput.addEventListener("change", updateAccessModeFields);
-    packIDInput.addEventListener("change", loadCatalog);
-    providerIDInput.addEventListener("input", syncMetrics);
-    apiBaseInput.addEventListener("input", syncMetrics);
-    draftDisplayNameInput.addEventListener("input", () => syncDraftHelperState(false));
-    draftBaseURLInput.addEventListener("input", () => syncDraftHelperState(false));
-    draftSmokeModelInput.addEventListener("input", () => syncDraftHelperState(false));
-    draftModelsInput.addEventListener("input", () => syncDraftHelperState(false));
-    draftProviderIDInput.addEventListener("input", () => {
-      const currentValue = draftProviderIDInput.value.trim();
-      state.draftProviderIDAuto = !currentValue || currentValue === buildSuggestedProviderID();
-      syncDraftHelperState(false);
-    });
-
-    restoreConfig();
-    updateAccessModeFields();
-    syncMetrics();
-    renderRecentTemplateMeta(readLastPublishedTemplate());
-    syncDraftHelperState();
-    refreshAdminSession().catch(() => {});
-    renderServerDrafts();
+      // Initial render
+      refreshCatalogDatalist();
+      syncFromProviderId();
+    })();
 
     // Wire up the "常用模型" preset chips — click to append to Models field.
     // Placed after the main script so the input refs are available.
@@ -2231,6 +1442,5 @@ sk-example-3"></textarea>
         });
       }
     })();
-  </script>
-  </body>
+</script>>
 </html>