cabletidy 0.2.0 → 0.3.0-rc.2

package/web/app.js

@@ -1,1782 +0,0 @@
-import { configurationId, providerIdForConfiguration, normalizeConfigurationIdentities, configurationBaseUrl } from "./config-identity.js";
-import { CLAUDE_MODEL_CATALOG, CLAUDE_MODEL_ALIASES } from "./claude-models.js";
-
-const pageContent = document.querySelector("#page-content");
-const pageTitle = document.querySelector("#page-title");
-const railStatus = document.querySelector("#rail-status");
-const revisionLabel = document.querySelector("#revision-label");
-const toastRegion = document.querySelector("#toast-region");
-const formBaselines = new WeakMap();
-const formConflicts = new WeakSet();
-const lockedControls = new WeakMap();
-let modelHintSequence = 0;
-
-// Explicit product guidance; catalog visibility does not indicate authorization.
-const SECURITY_MODELS = new Map([
-  ["gpt-daybreak-blue-latest", {
-    label: "Daybreak Blue · 需授权",
-    hint: "用于防御性安全工作，需确认上游支持并已获授权。",
-  }],
-  ["gpt-daybreak-red-latest", {
-    label: "Daybreak Red · 需专项授权",
-    hint: "用于专项授权安全研究，需单独获得 Red 授权并确认上游支持。",
-  }],
-]);
-
-const PAGE_META = {
-  overview: "配置套装",
-  "suite-create": "新建配置",
-  "suite-detail": "配置详情",
-  models: "模型管理",
-  diagnostics: "诊断",
-};
-
-const state = {
-  page: "overview",
-  config: null,
-  candidate: null,
-  runtime: null,
-  events: [],
-  codexCatalog: null,
-  createTarget: "codex",
-  busy: false,
-  pendingSecrets: {
-    upstreamSecrets: {},
-  },
-  selected: {
-    model: null,
-    virtualProvider: null,
-    suite: null,
-  },
-  artifactPreview: null,
-  resolveResult: null,
-};
-
-function clone(value) {
-  return structuredClone(value);
-}
-
-function esc(value) {
-  return String(value ?? "")
-    .replaceAll("&", "&")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;")
-    .replaceAll('"', "&quot;")
-    .replaceAll("'", "&#039;");
-}
-
-function values(record) {
-  return Object.values(record || {});
-}
-
-function entries(record) {
-  return Object.entries(record || {});
-}
-
-function commaList(value) {
-  return String(value || "")
-    .split(",")
-    .map((item) => item.trim())
-    .filter(Boolean);
-}
-
-function optionList(items, selected) {
-  return items
-    .map((item) => `<option value="${esc(item)}" ${item === selected ? "selected" : ""}>${esc(item)}</option>`)
-    .join("");
-}
-
-async function api(path, options = {}) {
-  const response = await fetch(`/api/v1${path}`, {
-    ...options,
-    headers: {
-      "content-type": "application/json",
-      ...(options.headers || {}),
-    },
-  });
-  const body = await response.json().catch(() => ({}));
-  if (!response.ok) {
-    const message = body.error?.message || body.message || `请求失败 (${response.status})`;
-    const error = new Error(message);
-    error.status = response.status;
-    error.body = body;
-    throw error;
-  }
-  return body;
-}
-
-async function bootstrap() {
-  try {
-    const [configResult, runtime, events, codexCatalog] = await Promise.all([
-      api("/config"),
-      api("/runtime"),
-      api("/events"),
-      api("/codex/models"),
-    ]);
-    state.config = configResult.config;
-    state.candidate = clone(state.config);
-    state.runtime = runtime;
-    state.codexCatalog = codexCatalog;
-    state.events = events.events || [];
-    state.selected.model = firstKey(state.candidate.models);
-    state.selected.virtualProvider = firstKey(state.candidate.virtualProviders);
-    state.selected.suite = firstKey(state.candidate.bindings);
-    railStatus.textContent = "服务运行中";
-    railStatus.parentElement.classList.remove("is-offline");
-    render();
-  } catch (error) {
-    renderUnavailable(error.message);
-  }
-}
-
-function renderUnavailable(message) {
-  railStatus.textContent = "无法连接";
-  railStatus.parentElement.classList.add("is-offline");
-  pageTitle.textContent = "无法连接到 CableTidy";
-  pageContent.innerHTML = `
-    <div class="notice warning" role="alert">
-      <p>${esc(message || "服务不可用")}</p>
-      <span>运行 <code>npm start</code> 后重试。</span>
-      <button class="button" data-action="reconnect">重试连接</button>
-    </div>
-  `;
-  pageContent.querySelector('[data-action="reconnect"]').addEventListener("click", bootstrap);
-}
-
-function render(preservedForms = []) {
-  pageTitle.textContent = state.page === "suite-detail"
-    ? selectedSuite()?.name || PAGE_META["suite-detail"]
-    : pageMeta();
-  revisionLabel.textContent = `版本 ${state.config?.revision ?? 0}`;
-  document.querySelectorAll(".nav-item").forEach((item) => {
-    const active = item.dataset.page === (state.page === "diagnostics" ? "diagnostics" : "overview");
-    item.classList.toggle("is-active", active);
-    if (active) item.setAttribute("aria-current", "page");
-    else item.removeAttribute("aria-current");
-  });
-
-  const renderers = {
-    overview: renderOverview,
-    "suite-create": renderSuiteCreate,
-    "suite-detail": renderSuiteDetail,
-    models: renderModels,
-    diagnostics: renderDiagnostics,
-  };
-  pageContent.innerHTML = renderers[state.page]();
-  for (const form of pageContent.querySelectorAll("form")) {
-    formBaselines.set(form, formSnapshot(form));
-  }
-  for (const form of preservedForms) {
-    const replacement = pageContent.querySelector(`#${CSS.escape(form.getAttribute("id"))}`);
-    if (replacement) restoreFormChanges(form, replacement);
-    else {
-      formConflicts.add(form);
-      pageContent.append(form);
-      showFormError(form, new Error("配置项已在其他窗口删除。"));
-    }
-  }
-}
-
-function fieldSnapshot(control) {
-  return [
-    control.name || "", control.type, { ...control.dataset },
-    control.closest("[data-suite-model]")?.dataset.modelId || "",
-    ["checkbox", "radio"].includes(control.type) ? control.checked
-      : control.multiple ? [...control.selectedOptions].map((option) => option.value)
-        : control.value,
-  ];
-}
-
-function formSnapshot(form) {
-  const fields = [...form.querySelectorAll("input, select, textarea")].filter((control) => {
-    // Official metadata is derived, not an editable configuration value.
-    if ("suiteModelContext" in control.dataset || "codexVision" in control.dataset) {
-      const mode = control.closest("[data-suite-model]")?.querySelector("[data-codex-metadata-mode]");
-      if (mode?.value === "official") return false;
-    }
-    return !["submit", "button", "reset"].includes(control.type);
-  });
-  return JSON.stringify(fields.map(fieldSnapshot));
-}
-
-function fieldKey(field) {
-  return JSON.stringify(field.slice(0, 4));
-}
-
-function mergeFormFields(base, local, remote) {
-  const same = (left, right) => JSON.stringify(left) === JSON.stringify(right);
-  const index = (fields) => new Map(fields.map((field) => [fieldKey(field), field]));
-  const [before, ours, theirs] = [base, local, remote].map(index);
-  // Repeated controls without stable row IDs cannot be merged safely.
-  if ([base, local, remote].some((fields, i) => fields.length !== [before, ours, theirs][i].size)) return null;
-  for (const field of base) {
-    const key = fieldKey(field);
-    if (field[0] === "id" && !same(field, theirs.get(key))) return null;
-    if (!("suiteModelClient" in field[2] || "codexMetadataMode" in field[2])) continue;
-    if (same(field, ours.get(key)) && same(field, theirs.get(key))) continue;
-    const row = (fields) => fields.filter((item) => item[3] === field[3]);
-    // A changed model or metadata mode changes the meaning of its other fields.
-    if (!same(row(base), row(local)) && !same(row(base), row(remote)) && !same(row(local), row(remote))) return null;
-  }
-  const merged = [];
-  for (const key of new Set([...before.keys(), ...ours.keys(), ...theirs.keys()])) {
-    const original = before.get(key);
-    const current = ours.get(key);
-    const latest = theirs.get(key);
-    if (same(current, original)) {
-      if (latest) merged.push(latest);
-    } else if (same(latest, original) || same(current, latest)) {
-      if (current) merged.push(current);
-    } else return null;
-  }
-  return merged;
-}
-
-function restoreFormChanges(form, replacement) {
-  const baseline = formBaselines.get(form);
-  const latest = formBaselines.get(replacement);
-  const current = formSnapshot(form);
-  const sameContext = form.getAttribute("data-suite-context") === replacement.getAttribute("data-suite-context");
-  if (sameContext && current === latest) return;
-  // Creation drafts have no remote record to merge, even after switching CLI.
-  if (form.getAttribute("id") === "suite-create-form" || (sameContext && baseline === latest)) {
-    if (formConflicts.has(form)) form.querySelector("[data-form-feedback]")?.remove();
-    formConflicts.delete(form);
-    replacement.replaceWith(form);
-    return;
-  }
-  const suiteModels = form.getAttribute("id") === "suite-models-form";
-  const savedFields = (snapshot) => JSON.parse(snapshot).filter((field) => !suiteModels || field[3]);
-  const structure = (snapshot) => JSON.stringify(JSON.parse(snapshot).map(fieldKey));
-  const sameStructure = baseline !== undefined && (suiteModels
-    || structure(baseline) === structure(current) && structure(baseline) === structure(latest));
-  const merged = sameContext && sameStructure
-    ? mergeFormFields(savedFields(baseline), savedFields(current), savedFields(latest)) : null;
-  const controls = new Map([...replacement.querySelectorAll("input, select, textarea")]
-    .map((control) => [fieldKey(fieldSnapshot(control)), control]));
-  if (!merged || merged.some((field) => !controls.has(fieldKey(field)))) {
-    // Keep the old baseline and input; never bless a stale form with a new revision.
-    formConflicts.add(form);
-    replacement.replaceWith(form);
-    showFormError(form, new Error("配置存在并发修改冲突。"));
-    return;
-  }
-  for (const field of merged) {
-    const control = controls.get(fieldKey(field));
-    if (["checkbox", "radio"].includes(control.type)) control.checked = field[4];
-    else if (control.multiple) {
-      for (const option of control.options) option.selected = field[4].includes(option.value);
-    } else control.value = field[4];
-  }
-  if (suiteModels) {
-    const retained = new Set(merged.map((field) => field[3]));
-    replacement.querySelectorAll("[data-suite-model]").forEach((row) => {
-      if (!retained.has(row.dataset.modelId)) row.remove();
-      else syncCodexMetadata(row);
-    });
-    const list = replacement.querySelector("#suite-model-list");
-    form.querySelectorAll("[data-suite-model]").forEach((row) => {
-      if (!row.dataset.modelId) {
-        list.querySelector(".empty")?.remove();
-        list.append(row);
-      }
-    });
-  }
-  replacement.querySelectorAll("[data-official-model]").forEach(updateOfficialModelHint);
-}
-
-function isFormEdited(form) {
-  const baseline = formBaselines.get(form);
-  return formConflicts.has(form) || baseline !== undefined && baseline !== formSnapshot(form);
-}
-
-function captureEditedForms(excludedForm) {
-  return [...pageContent.querySelectorAll("form")].filter(
-    (form) => form !== excludedForm && isFormEdited(form),
-  );
-}
-
-function hasUnsavedChanges() {
-  return captureEditedForms().some((form) => form.getAttribute("id") !== "resolve-form");
-}
-
-function confirmPageLeave() {
-  return !hasUnsavedChanges() || window.confirm("有未保存的修改，确定放弃并离开？");
-}
-
-function navigatePage(page) {
-  if (state.busy || !state.config || page === state.page || !confirmPageLeave()) return;
-  state.page = page;
-  render();
-}
-
-pageContent.addEventListener("click", (event) => {
-  const element = event.target.closest("[data-action], [data-page]");
-  if (!element || !pageContent.contains(element) || state.busy) return;
-  if (element.dataset.action) handleAction(element.dataset.action, element);
-  else navigatePage(element.dataset.page);
-});
-
-pageContent.addEventListener("submit", (event) => handleFormSubmit(event, event.target));
-window.addEventListener("beforeunload", (event) => {
-  if (!hasUnsavedChanges()) return;
-  event.preventDefault();
-  event.returnValue = "";
-});
-
-function pageMeta() {
-  return PAGE_META[state.page] || PAGE_META.overview;
-}
-
-function targetLabel(target) {
-  return {
-    codex: "Codex",
-    "claude-code": "Claude Code",
-    "generic-env": "Generic CLI",
-  }[target] || target || "CLI";
-}
-
-function suiteRouteBackend(route) {
-  return route?.backends?.length === 1 ? route.backends[0] : null;
-}
-
-function configurationSuites(config) {
-  return entries(config.bindings).map(([bindingId, binding]) => {
-    const virtualProvider = config.virtualProviders?.[binding.virtualProvider] || {};
-    const route = config.routes?.[virtualProvider.route] || {};
-    const routeBackend = suiteRouteBackend(route);
-    const upstreamId = routeBackend?.upstream || null;
-    const upstream = upstreamId ? config.upstreams?.[upstreamId] || null : null;
-    const modelIdSet = new Set(virtualProvider.allowedModels || []);
-    for (const modelId of routeBackend?.models || []) {
-      modelIdSet.add(modelId);
-    }
-    const modelIds = [...modelIdSet].filter((id) => config.models?.[id]);
-    const name =
-      binding.name ||
-      virtualProvider.name ||
-      `${targetLabel(binding.target)} / ${upstream?.name || upstreamId || "未配置上游"}`;
-    return {
-      id: bindingId,
-      bindingId,
-      name,
-      target: binding.target,
-      binding,
-      virtualProvider,
-      route,
-      routeBackend,
-      upstreamId,
-      upstream,
-      modelIds,
-      models: modelIds.map((id) => ({ id, profile: config.models[id] })),
-    };
-  });
-}
-
-function selectedSuite() {
-  return configurationSuites(state.candidate || {}).find(
-    (suite) => suite.id === state.selected.suite,
-  ) || null;
-}
-
-function selectSuite(id) {
-  const suite = configurationSuites(state.candidate || {}).find((item) => item.id === id);
-  state.selected.suite = id || null;
-  if (state.artifactPreview?.bindingId !== id) state.artifactPreview = null;
-  if (!suite) return;
-  state.selected.virtualProvider = suite.binding.virtualProvider;
-  state.selected.model = suite.modelIds[0] || null;
-}
-
-function suiteProviderStatus(suite) {
-  const runtimeProvider = state.runtime?.virtualProviders?.find(
-    (item) => item.id === suite.binding.virtualProvider,
-  );
-  if (runtimeProvider?.status === "paused") {
-    return { label: "已暂停", className: "warning" };
-  }
-  if (runtimeProvider?.status === "listening") {
-    return { label: "已启动", className: "" };
-  }
-  return { label: "未启动", className: "neutral" };
-}
-
-function suiteEndpoint(suite) {
-  return `${configurationBaseUrl(state.candidate, suite.bindingId)}${suite.target === "claude-code" ? "" : "/v1"}`;
-}
-
-function suiteRow(suite) {
-  const providerStatus = suiteProviderStatus(suite);
-  return `
-    <tr>
-      <th scope="row"><button class="suite-name" data-action="open-suite" data-id="${esc(suite.id)}">${esc(suite.name)}</button><span class="suite-upstream">${esc(suite.upstream?.name || suite.upstreamId || "未配置上游")}</span></th>
-      <td data-label="CLI">${esc(targetLabel(suite.target))}</td>
-      <td data-label="模型设置">${suite.modelIds.length ? `${suite.modelIds.length} 项设置` : "直接透传"}</td>
-      <td data-label="本地地址" class="mono">${esc(suiteEndpoint(suite))}</td>
-      <td data-label="本地服务"><span class="status-badge ${providerStatus.className}">${esc(providerStatus.label)}</span></td>
-    </tr>
-  `;
-}
-
-function renderOverview() {
-  const suites = configurationSuites(state.candidate);
-  return `
-    <div class="suite-toolbar">
-      <span class="muted">${suites.length} 套配置</span>
-      <button class="button button-primary" data-action="create-suite">新建配置</button>
-    </div>
-    ${
-      suites.length
-        ? `<div class="suite-list"><table class="suite-table" aria-label="配置套装"><thead><tr><th scope="col">配置名称</th><th scope="col">CLI</th><th scope="col">模型设置</th><th scope="col">本地地址</th><th scope="col">本地服务</th></tr></thead><tbody>${suites.map(suiteRow).join("")}</tbody></table></div>`
-        : `<div class="panel"><div class="empty">暂无配置</div></div>`
-    }
-  `;
-}
-
-function suiteModelEditor(suite, modelId, profile, upstreamId) {
-  const model = profile || {};
-  const isCodex = suite.target === "codex";
-  const compact = model.compact || {};
-  const binding = model.upstreams?.[upstreamId] || {};
-  const expanded = model.codex?.metadataMode === "override" || Boolean(model.compact)
-    || (isCodex && !model.codex && Boolean(model.contextWindow));
-  return `
-    <article class="suite-model-card" data-suite-model data-model-id="${esc(modelId)}">
-      <div class="suite-model-mapping">
-        ${isCodex
-          ? officialModelSelect("data-suite-model-client", model.clientModelId || model.aliases?.[0] || "")
-          : suite.target === "claude-code"
-            ? claudeModelInput("data-suite-model-client", model.clientModelId || model.aliases?.[0] || modelId)
-            : `<label class="field"><span>客户端模型 ID</span><input data-suite-model-client value="${esc(model.clientModelId || model.aliases?.[0] || modelId)}" placeholder="客户端模型 ID" required /></label>`}
-        <span class="suite-mapping-arrow" aria-hidden="true">&rarr;</span>
-        ${upstreamId
-          ? `<label class="field"><span>上游模型 ID（可选）</span><input data-suite-model-upstream="${esc(upstreamId)}" value="${esc(binding.upstreamModelId || "")}" placeholder="留空使用请求中的模型名" /></label>`
-          : `<div class="notice warning">请先配置上游连接</div>`}
-        <button class="mini-button" type="button" data-action="remove-suite-model" aria-label="移除模型 ${esc(model.clientModelId || modelId || "映射")}">移除</button>
-      </div>
-      ${suite.target === "claude-code" ? "" : `<details class="suite-model-settings" ${expanded ? "open" : ""}>
-        <summary><span>模型能力与上下文</span><span class="field-hint" data-model-policy-summary>${isCodex ? model.codex?.metadataMode === "override" ? "覆盖上游限制" : "沿用官方定义" : "自定义设置"}</span></summary>
-        <div class="form-grid suite-model-policy">
-          ${isCodex ? codexMetadataFields(model) : `
-          <label class="field full"><span>Capabilities</span><input data-suite-model-capabilities-common value="${esc((model.capabilities || ["streaming", "tools", "reasoning"]).join(", "))}" placeholder="streaming, tools, reasoning" /></label>
-          <label class="field"><span>Context window</span><input type="number" data-suite-model-context value="${esc(model.contextWindow ?? 1000000)}" placeholder="tokens" /></label>
-          <label class="field"><span>Compact strategy</span><select data-suite-model-compact>${optionList(["auto", "manual", "disabled"], compact.strategy || "auto")}</select></label>
-          <label class="field"><span>Compact token limit</span><input type="number" data-suite-model-compact-limit value="${esc(compact.tokenLimit ?? 850000)}" placeholder="tokens" /></label>
-          ${upstreamId ? `<label class="field"><span>上游能力覆盖</span><input data-suite-model-capabilities="${esc(upstreamId)}" value="${esc((binding.capabilityOverrides || []).join(", "))}" placeholder="可留空" /></label>` : ""}
-          `}
-        </div>
-      </details>`}
-    </article>
-  `;
-}
-
-function officialModel(id) {
-  return state.codexCatalog?.models?.find((model) => model.id === id);
-}
-
-function officialModelOptions(selected) {
-  const models = state.codexCatalog?.models || [];
-  const unknown = selected && !officialModel(selected);
-  const option = (model) => `<option value="${esc(model.id)}" ${selected === model.id ? "selected" : ""}>${esc(
-    SECURITY_MODELS.get(model.id)?.label || `${model.name} (${model.id})`,
-  )}</option>`;
-  const securityModels = models.filter((model) => SECURITY_MODELS.has(model.id));
-  return `
-    <option value="">选择官方模型</option>
-    ${unknown ? `<option value="${esc(selected)}" selected>${esc(SECURITY_MODELS.get(selected)?.label || selected)}（旧配置，待确认）</option>` : ""}
-    ${models.filter((model) => !SECURITY_MODELS.has(model.id)).map(option).join("")}
-    ${securityModels.length ? `<optgroup label="安全专项模型">${securityModels.map(option).join("")}</optgroup>` : ""}
-  `;
-}
-
-function officialModelHint(selected) {
-  return [
-    SECURITY_MODELS.get(selected)?.hint,
-    selected && !officialModel(selected) ? "未匹配本机官方目录" : "",
-  ].filter(Boolean).join(" ");
-}
-
-function updateOfficialModelHint(select) {
-  const hint = select.parentElement.querySelector("[data-official-model-hint]");
-  hint.textContent = officialModelHint(select.value);
-  hint.hidden = !hint.textContent;
-}
-
-function officialModelSelect(attributes, selected) {
-  const hint = officialModelHint(selected);
-  const hintId = `official-model-hint-${++modelHintSequence}`;
-  return `<label class="field"><span>Codex 官方模型</span><select ${attributes} data-official-model aria-label="Codex 官方模型" aria-describedby="${hintId}" required>
-    ${officialModelOptions(selected)}
-    </select><span class="field-hint" id="${hintId}" data-official-model-hint aria-live="polite" ${hint ? "" : "hidden"}>${esc(hint)}</span></label>`;
-}
-
-function codexCatalogStatus() {
-  return `<div class="catalog-status"><span>${esc(state.codexCatalog?.available
-    ? `${state.codexCatalog.version} / ${state.codexCatalog.models.length} 个官方模型`
-    : state.codexCatalog?.error?.message || "官方模型目录不可用")}</span>
-    <button class="mini-button" type="button" data-action="refresh-codex-models">刷新模型列表</button></div>`;
-}
-
-function codexMetadataFields(model) {
-  const definition = officialModel(model.clientModelId);
-  const override = model.codex?.metadataMode === "override";
-  const vision = override ? model.codex.inputModalities?.includes("image") ?? definition?.inputModalities.includes("image") : definition?.inputModalities.includes("image");
-  return `
-    <label class="field"><span>模型元数据</span><select data-codex-metadata-mode>
-      <option value="official" ${!override ? "selected" : ""}>沿用官方定义</option>
-      <option value="override" ${override ? "selected" : ""}>覆盖上游限制</option>
-    </select></label>
-    <label class="field"><span>上下文窗口</span><input data-suite-model-context type="number" min="1" max="${esc(definition?.maxContextWindow || "")}" value="${esc(override ? model.contextWindow ?? "" : definition?.contextWindow ?? "")}" placeholder="沿用官方" ${override ? "" : "disabled"} /></label>
-    <label class="field checkbox-field"><span><input data-codex-vision type="checkbox" ${vision ? "checked" : ""} ${override && definition?.inputModalities.includes("image") ? "" : "disabled"} /> 图片输入</span></label>
-    <div class="field"><label>基础提示词</label><span class="field-hint" data-codex-instructions>${esc(definition?.name || "待选择官方模型")} / 官方定义</span></div>
-    ${!model.codex && (model.contextWindow || model.compact) ? `<div class="notice warning full">旧策略尚未同步：context window ${esc(model.contextWindow || "未设置")}；compact ${esc(model.compact?.strategy || "未设置")} ${esc(model.compact?.tokenLimit || "")}。Compact 仍由 Codex 管理。</div>` : model.compact ? `<div class="field full"><span class="field-hint">旧 Compact 策略已保留，未同步到 Codex</span></div>` : ""}
-  `;
-}
-
-function syncCodexMetadata(row, resetOverrides = false) {
-  if (!row || !row.querySelector("[data-codex-metadata-mode]")) return;
-  const definition = officialModel(row.querySelector("[data-suite-model-client]").value);
-  const override = row.querySelector("[data-codex-metadata-mode]").value === "override";
-  const context = row.querySelector("[data-suite-model-context]");
-  const vision = row.querySelector("[data-codex-vision]");
-  if (resetOverrides || !override) {
-    context.value = definition?.contextWindow || "";
-    vision.checked = Boolean(definition?.inputModalities.includes("image"));
-  }
-  context.max = definition?.maxContextWindow || "";
-  setControlDisabled(context, !override);
-  setControlDisabled(vision, !override || !definition?.inputModalities.includes("image"));
-  row.querySelector("[data-codex-instructions]").textContent = `${definition?.name || "待选择官方模型"} / 官方定义`;
-  const summary = row.querySelector("[data-model-policy-summary]");
-  if (summary) summary.textContent = override ? "覆盖上游限制" : "沿用官方定义";
-}
-
-pageContent.addEventListener("change", (event) => {
-  if (event.target.matches('#suite-create-form [name="target"]')) {
-    state.createTarget = event.target.value;
-    const form = event.target.closest("form");
-    form.querySelector(".catalog-status-wrapper").hidden = state.createTarget !== "codex";
-    form.querySelector("[data-claude-create-auth]").hidden = state.createTarget !== "claude-code";
-    form.querySelector("[data-claude-model-suggestions]").hidden = state.createTarget !== "claude-code";
-    form.querySelectorAll("[data-claude-create-models]").forEach((section) => {
-      section.hidden = state.createTarget !== "claude-code";
-    });
-    form.querySelectorAll("[data-create-model]").forEach((row) => {
-      const wrapper = document.createElement("div");
-      wrapper.innerHTML = createModelRow({
-        clientModelId: row.querySelector('[data-create-field="clientModelId"]').value,
-        upstreamModelId: row.querySelector('[data-create-field="upstreamModelId"]').value,
-      });
-      row.replaceWith(wrapper.firstElementChild);
-    });
-    syncClaudeCreateModels(form);
-  }
-  const modelChanged = event.target.matches("[data-official-model]");
-  if (modelChanged) updateOfficialModelHint(event.target);
-  if (modelChanged || event.target.matches("[data-codex-metadata-mode]")) {
-    syncCodexMetadata(event.target.closest("[data-suite-model]"), modelChanged);
-  }
-});
-
-pageContent.addEventListener("input", (event) => {
-  if (event.target.matches('#suite-create-form [data-create-field="clientModelId"]')) {
-    syncClaudeCreateModels(event.target.closest("form"));
-  }
-});
-
-pageContent.addEventListener("invalid", (event) => {
-  // Reveal invalid controls before the browser tries to focus them.
-  const settings = event.target.closest(".suite-model-settings");
-  if (settings) settings.open = true;
-}, true);
-
-function codexModelFields(clientModelId, existing = {}, row) {
-  const definition = officialModel(clientModelId);
-  if (!definition) throw new Error("请选择本机 Codex 目录中的官方 GPT 模型；旧模型需要先确认对应关系。");
-  const mode = row?.querySelector("[data-codex-metadata-mode]")?.value || "official";
-  const codex = { metadataMode: mode };
-  const capabilities = [...definition.capabilities];
-  let contextWindow = existing.contextWindow;
-  if (mode === "override") {
-    const value = row.querySelector("[data-suite-model-context]").value.trim();
-    contextWindow = value ? Number(value) : undefined;
-    if (value && (!Number.isSafeInteger(contextWindow) || contextWindow < 1 || contextWindow > definition.maxContextWindow)) {
-      throw new Error(`${clientModelId} 的上下文窗口必须在 1 到 ${definition.maxContextWindow} 之间`);
-    }
-    const vision = row.querySelector("[data-codex-vision]").checked && definition.inputModalities.includes("image");
-    codex.inputModalities = vision ? ["text", "image"] : ["text"];
-    if (!vision && capabilities.includes("vision")) capabilities.splice(capabilities.indexOf("vision"), 1);
-  }
-  return { codex, capabilities, contextWindow };
-}
-
-function renderSuiteDetail() {
-  const suite = selectedSuite();
-  if (!suite) {
-    return `
-      <div class="panel empty-state-panel">
-        <div class="empty"><strong>配置不存在</strong><div class="form-actions"><button class="button" data-action="back-overview">返回列表</button></div></div>
-      </div>
-    `;
-  }
-  const providerStatus = suiteProviderStatus(suite);
-  const upstreamId = suite.upstreamId || "";
-  const upstream = upstreamId ? state.candidate.upstreams[upstreamId] : null;
-  const binding = suite.binding;
-  const provider = suite.virtualProvider;
-  return `
-    <div class="suite-toolbar">
-      <button class="text-button" data-action="back-overview">返回列表</button>
-      <div class="suite-status"><span>${esc(targetLabel(binding.target))} · ${suite.models.length ? `${suite.models.length} 项模型设置` : "模型名直接透传"}</span><span class="status-badge ${providerStatus.className}">${esc(providerStatus.label)}</span></div>
-    </div>
-    <div class="panel suite-editor">
-      <section class="suite-section" aria-labelledby="suite-upstream-title">
-        <div class="suite-section-heading">
-          <h2 id="suite-upstream-title">上游连接</h2>
-          <p>此配置的所有模型共用这一上游。</p>
-        </div>
-        ${upstream ? `
-          <form id="suite-upstream-form">
-            <input type="hidden" name="id" value="${esc(upstreamId)}" />
-            <input type="hidden" name="protocol" value="${esc(upstream.protocol || "openai.responses")}" />
-            <div class="form-grid suite-upstream-fields">
-              ${field("上游名称", "name", upstream.name || upstreamId, "例如 Relay A")}
-              ${field("上游地址", "baseUrl", upstream.baseUrl || "", "https://relay.example.com/v1", false, "url")}
-              ${field(suite.target === "claude-code" ? "上游凭据" : "API Key", "secret", "", upstream.secretConfigured ? "已配置，留空保留现有密钥" : "粘贴上游凭据", false, "password")}
-              ${suite.target === "claude-code" ? upstreamAuthField("authHeader", upstream.auth?.header || upstream.authHeader || "x-api-key") : ""}
-            </div>
-            <div class="suite-section-footer">
-              <span class="field-hint">保存后生效，测试使用已保存的连接。</span>
-              <div class="form-actions"><button class="button" type="submit">保存上游</button><button class="button" type="button" data-action="test-upstream" data-id="${esc(upstreamId)}">测试连通性</button></div>
-            </div>
-          </form>
-        ` : `<div class="empty"><strong>未配置上游</strong></div>`}
-      </section>
-      <section class="suite-section" aria-labelledby="suite-models-title">
-        <div class="suite-section-heading suite-models-heading">
-          <div><h2 id="suite-models-title">模型设置（可选）</h2><p>${suite.target === "claude-code" ? "默认透传模型名；改名时填写 Claude Code 请求中的完整模型 ID。模型能力、上下文和压缩由客户端与上游决定。" : "默认透传请求中的模型名；需要改名或覆盖上下文等参数时再添加设置。"}</p></div>
-          <button class="button" type="button" data-action="add-suite-model">添加模型设置</button>
-        </div>
-        ${suite.target === "codex" ? codexCatalogStatus() : ""}
-        ${suite.target === "claude-code" ? claudeModelSuggestions() : ""}
-        <form id="suite-models-form" data-suite-context="${esc(JSON.stringify([suite.bindingId, suite.target, binding.virtualProvider, suite.route?.id, upstreamId]))}">
-          <div id="suite-model-list" class="suite-model-list">
-            ${suite.models.length
-              ? suite.models.map(({ id, profile }) => suiteModelEditor(suite, id, profile, upstreamId)).join("")
-              : `<div class="empty">已启用模型名直接透传，无需添加模型设置。</div>`}
-          </div>
-          <div class="suite-section-footer">
-            <span class="field-hint">${suite.target === "claude-code" ? "上游模型 ID 留空时原样透传。" : "按需展开模型能力与上下文设置。"}</span>
-            <div class="form-actions">
-              <button class="button" type="submit">保存模型设置</button>
-              ${suite.target === "generic-env" ? `<button class="button" type="button" data-action="open-advanced-models">高级模型设置</button>` : ""}
-            </div>
-          </div>
-        </form>
-      </section>
-      ${suite.target === "claude-code" ? claudeClientForm(suite) : ""}
-    </div>
-    <section class="panel suite-connection" aria-labelledby="suite-connection-title">
-      <div class="panel-header">
-        <h2 id="suite-connection-title">${esc(targetLabel(binding.target))} 接入</h2>
-        <div class="suite-connection-actions">
-          <button class="button button-quiet" type="button" data-action="toggle-vp" data-id="${esc(provider.id)}">${provider.enabled === false ? "启动服务" : "暂停服务"}</button>
-          <button class="button" type="button" data-action="preview-artifacts">预览配置</button>
-          ${["codex", "claude-code"].includes(binding.target) ? `<button class="button button-primary" type="button" data-action="apply-target">应用到 ${esc(targetLabel(binding.target))}</button>` : ""}
-          ${binding.target === "claude-code" ? `<button class="button" type="button" data-action="restore-target">撤销接入</button>` : ""}
-        </div>
-      </div>
-      <div class="panel-body">
-        <dl class="suite-connection-facts">
-          <div><dt>本地地址</dt><dd class="mono">${esc(suiteEndpoint(suite))}</dd></div>
-          <div><dt>Virtual Provider ID</dt><dd class="mono">${esc(binding.virtualProvider)}</dd></div>
-        </dl>
-        ${state.artifactPreview ? artifactPanel(state.artifactPreview) : ""}
-      </div>
-    </section>
-  `;
-}
-
-function upstreamAuthField(name, header = "x-api-key") {
-  const options = [
-    ["x-api-key", "API Key (x-api-key / ANTHROPIC_API_KEY)"],
-    ["authorization", "Bearer Token (Authorization / ANTHROPIC_AUTH_TOKEN)"],
-  ];
-  if (!options.some(([value]) => value === header)) options.push([header, `保留现有认证 (${header})`]);
-  return `<label class="field"><span>上游认证方式</span><select name="${esc(name)}">${options.map(([value, label]) => `<option value="${esc(value)}" ${value === header ? "selected" : ""}>${esc(label)}</option>`).join("")}</select><span class="field-hint">环境变量名用于对照 Claude 直连上游的配置；这里选择的是 CableTidy 访问上游的认证方式。</span></label>`;
-}
-
-function claudeDefaultModel(suite) {
-  if (suite.binding.claude?.setModel === false) return "";
-  return suite.binding.defaultModel || suite.virtualProvider.defaultModel || "";
-}
-
-function claudeModelInput(attributes, value) {
-  return `<label class="field"><span>客户端模型 ID</span><input ${attributes} list="claude-model-suggestions" value="${esc(value)}" placeholder="搜索官方建议或手动填写" autocomplete="off" required /></label>`;
-}
-
-function claudeModelSuggestions() {
-  return `<p class="field-hint">官方建议来自 <a href="${esc(CLAUDE_MODEL_CATALOG.sources[0])}" target="_blank" rel="noreferrer">Anthropic 文档</a>（${esc(CLAUDE_MODEL_CATALOG.updatedAt)}），随 CableTidy 发版更新，无需额外 API Key；可手动填写其他模型 ID。</p>
-    <datalist id="claude-model-suggestions">${CLAUDE_MODEL_CATALOG.models.map((id) => `<option value="${esc(id)}"></option>`).join("")}</datalist>`;
-}
-
-function claudeAliasSelect(suite, family) {
-  const selected = suite?.binding.claude?.models?.[family] || "";
-  const ids = (suite?.models || []).map(({ id, profile }) => profile.clientModelId || profile.aliases?.[0] || id);
-  return `<label class="field"><span>${family[0].toUpperCase() + family.slice(1)} 别名指向</span><select name="${family}">
-    ${claudeAliasOptions(ids, selected)}
-  </select></label>`;
-}
-
-function claudeAliasOptions(ids, selected = "") {
-  return `<option value="" ${selected ? "" : "selected"}>由 Claude 默认决定</option>
-    ${selected && !ids.includes(selected) ? `<option value="${esc(selected)}" selected disabled>${esc(selected)}（未配置，请重新选择）</option>` : ""}
-    ${optionList(ids, selected)}`;
-}
-
-function claudeModelChoice(name, ids, value) {
-  const selected = String(value || "").trim();
-  return CLAUDE_MODEL_ALIASES[name].includes(selected) || ids.includes(selected) ? selected : "";
-}
-
-function claudeDefaultModelOptions(name, ids, value = "") {
-  const selected = claudeModelChoice(name, ids, value);
-  const aliases = CLAUDE_MODEL_ALIASES[name];
-  const clientIds = [...new Set(ids)].filter((id) => !aliases.includes(id));
-  return `<optgroup label="默认行为"><option value="" ${selected ? "" : "selected"}>${name === "defaultModel" ? "由 Claude 默认决定" : "沿用 Claude 默认行为"}</option></optgroup>
-    <optgroup label="模型别名">${optionList(aliases, selected)}</optgroup>
-    ${clientIds.length ? `<optgroup label="当前配置的客户端模型 ID">${optionList(clientIds, selected)}</optgroup>` : ""}`;
-}
-
-function claudeDefaultModelSelect(name, ids, value = "") {
-  return `<label class="field"><span>${name === "defaultModel" ? "启动模型（可选）" : "子代理模型（可选）"}</span>
-    <select name="${name}" data-claude-default-model>${claudeDefaultModelOptions(name, ids, value)}</select></label>`;
-}
-
-function syncClaudeCreateModels(form) {
-  if (!form || state.createTarget !== "claude-code") return;
-  const ids = [...new Set([...form.querySelectorAll('[data-create-field="clientModelId"]')]
-    .map((input) => input.value.trim()).filter(Boolean))];
-  for (const select of form.querySelectorAll("[data-claude-create-models] select")) {
-    select.innerHTML = select.hasAttribute("data-claude-default-model")
-      ? claudeDefaultModelOptions(select.name, ids, select.value)
-      : claudeAliasOptions(ids, ids.includes(select.value) ? select.value : "");
-  }
-}
-
-function claudeModelGroups(suite = null) {
-  const ids = (suite?.models || []).map(({ id, profile }) => profile.clientModelId || profile.aliases?.[0] || id);
-  return `<section class="subsection" aria-labelledby="claude-aliases-title">
-        <div class="subsection-header"><h3 id="claude-aliases-title">模型别名</h3></div>
-        <p class="field-hint">${suite ? "从当前配置已保存的" : "可选。从本次填写的"}客户端模型 ID 中选择，或由 Claude 默认决定。</p>
-        <div class="form-grid">
-          ${["opus", "sonnet", "fable", "haiku"].map((family) => claudeAliasSelect(suite, family)).join("")}
-        </div>
-      </section>
-      <section class="subsection" aria-labelledby="claude-defaults-title">
-        <div class="subsection-header"><h3 id="claude-defaults-title">默认模型</h3></div>
-        <div class="form-grid">
-          ${claudeDefaultModelSelect("defaultModel", ids, suite ? claudeDefaultModel(suite) : "")}
-          ${claudeDefaultModelSelect("subagent", ids, suite?.binding.claude?.models?.subagent || "")}
-        </div>
-        <p class="field-hint">可选。选择适用的官方别名或当前配置的客户端模型 ID；默认行为不主动覆盖 Claude 的模型选择。</p>
-      </section>`;
-}
-
-function claudeClientForm(suite) {
-  const options = suite.binding.claude || {};
-  return `<section class="suite-section">
-    <div class="suite-section-heading"><h2>Claude Code 模型选择</h2><p>设置模型别名和默认模型。上游改名在模型设置中配置。</p></div>
-    <form id="claude-client-form" data-suite-context="${esc(JSON.stringify([suite.bindingId, suite.models.map(({ id, profile }) => profile.clientModelId || profile.aliases?.[0] || id)]))}">
-      ${claudeModelGroups(suite)}
-      <div class="form-actions">
-        ${checkboxField("在 /model 中发现此配置的模型", "discoverModels", options.discoverModels === true)}
-      </div>
-      <p class="field-hint">模型发现只列出已配置模型，不限制其他模型请求。Claude Code 可能过滤不含 claude 或 anthropic 的模型 ID。保存后需重新应用客户端配置。</p>
-      <div class="form-actions"><button class="button" type="submit">保存客户端设置</button></div>
-    </form>
-  </section>`;
-}
-
-function renderSuiteCreate() {
-  return `
-    <button class="text-button" data-action="back-overview">返回列表</button>
-    <form id="suite-create-form" class="config-form panel">
-      <section class="config-section" aria-labelledby="config-basics">
-        <h2 id="config-basics">基本信息</h2>
-        <div class="form-grid">
-          ${field("配置名称（可选）", "suiteName", "", "例如 my-relay；留空自动生成")}
-          ${selectField("CLI", "target", state.createTarget, ["codex", "claude-code"])}
-        </div>
-      </section>
-      <section class="config-section" aria-labelledby="config-upstream">
-        <h2 id="config-upstream">上游连接</h2>
-        <div class="form-grid">
-          ${field("上游地址", "upstreamBaseUrl", "", "https://relay.example.com/v1", false, "url", false, true)}
-          ${field("API Key", "upstreamSecret", "", "", false, "password", false, true)}
-          <div data-claude-create-auth ${state.createTarget === "claude-code" ? "" : "hidden"}>${upstreamAuthField("upstreamAuth")}</div>
-        </div>
-      </section>
-      <section class="config-section" aria-labelledby="config-models">
-        <div class="subsection-header">
-          <h2 id="config-models">模型设置（可选）</h2>
-          <button class="mini-button" type="button" data-action="add-create-model">添加模型设置</button>
-        </div>
-        <p class="field-hint">默认透传请求中的模型名。需要改名时添加设置，客户端选项可在创建后调整。</p>
-        <div ${state.createTarget === "codex" ? "" : "hidden"} class="catalog-status-wrapper">${codexCatalogStatus()}</div>
-        <div data-claude-model-suggestions ${state.createTarget === "claude-code" ? "" : "hidden"}>${claudeModelSuggestions()}</div>
-        <div id="create-model-list" class="create-model-list"></div>
-      </section>
-      <section class="config-section" data-claude-create-models aria-labelledby="config-claude-models" ${state.createTarget === "claude-code" ? "" : "hidden"}>
-        <h2 id="config-claude-models">Claude Code 模型选择</h2>
-        <p class="field-hint">以下两组均为可选；创建后需应用到 Claude Code 才会写入客户端配置。</p>
-        <div>${claudeModelGroups()}</div>
-      </section>
-      <div class="config-form-footer">
-        <button class="button" type="button" data-action="back-overview">取消</button>
-        <button class="button button-primary" type="submit">创建配置</button>
-      </div>
-    </form>
-  `;
-}
-
-function createModelRow(values = {}, target = state.createTarget) {
-  const model = {
-    clientModelId: values.clientModelId || "",
-    upstreamModelId: values.upstreamModelId || "",
-  };
-  return `
-    <div class="create-model-row" data-create-model>
-      ${target === "claude-code" ? claudeModelInput('data-create-field="clientModelId"', model.clientModelId) : officialModelSelect('data-create-field="clientModelId"', model.clientModelId)}
-      <label class="field"><span>上游模型 ID（可选）</span><input data-create-field="upstreamModelId" value="${esc(model.upstreamModelId)}" placeholder="留空使用请求中的模型名" /></label>
-      <button class="mini-button" type="button" data-action="remove-create-model" aria-label="移除模型映射">移除</button>
-    </div>
-  `;
-}
-
-function suiteDefaults(target = "codex") {
-  const upstreamId = nextConfigId(state.candidate?.upstreams, "relay-main");
-  const bindingId = nextConfigId(state.candidate?.bindings, target === "claude-code" ? "claude-main" : "codex-main");
-  const routeId = nextConfigId(state.candidate?.routes, `${upstreamId}-route`);
-  return { upstreamId, bindingId, routeId };
-}
-
-function nextConfigId(record, base) {
-  const source = record || {};
-  if (!source[base]) return base;
-  let suffix = 2;
-  while (source[`${base}-${suffix}`]) suffix += 1;
-  return `${base}-${suffix}`;
-}
-
-function modelProfileId(clientModelId, existingModels, reservedIds) {
-  const normalized = String(clientModelId || "")
-    .trim()
-    .toLowerCase()
-    .replace(/[^a-z0-9._-]+/g, "-")
-    .replace(/^-+|-+$/g, "")
-    .replace(/^[^a-z0-9]+/, "")
-    .slice(0, 56) || "model";
-  const occupiedIds = new Set([...Object.keys(existingModels || {}), ...reservedIds]);
-  let id = normalized;
-  let suffix = 2;
-  while (occupiedIds.has(id)) id = `${normalized}-${suffix++}`;
-  reservedIds.add(id);
-  return id;
-}
-
-function upstreamDisplayName(baseUrl, fallback) {
-  try {
-    return new URL(baseUrl).hostname || fallback;
-  } catch {
-    return fallback;
-  }
-}
-
-function renderModels() {
-  const config = state.candidate;
-  const selectedId = state.selected.model;
-  const selected = selectedId ? config.models[selectedId] : null;
-  const compact = selected?.compact || {};
-  const upstreamId = firstKey(selected?.upstreams) || firstKey(config.upstreams) || "";
-  const mapping = selected?.upstreams?.[upstreamId] || {};
-  return `
-    <button class="text-button" data-action="back-overview">返回列表</button>
-    <div class="form-layout">
-      <div class="panel">
-        <div class="panel-header">
-          <h2>模型列表</h2>
-          <button class="button button-primary" data-action="new-model">新增模型</button>
-        </div>
-        <div class="panel-body">
-          ${
-            Object.keys(config.models).length
-              ? `<div class="list">${entries(config.models).map(([id, item]) => modelRow(id, item, id === selectedId)).join("")}</div>`
-              : `<div class="empty">暂无模型</div>`
-          }
-        </div>
-      </div>
-      <div class="panel">
-        <div class="panel-header"><h2>${selected ? esc(selected.name || selectedId) : "新增模型"}</h2></div>
-        <div class="panel-body">
-          <form id="model-form">
-            <div class="form-grid">
-              ${field("CableTidy Model ID", "id", selectedId || "", "例如 gpt56-sol", false, "text", Boolean(selectedId))}
-              ${field("Client model ID", "clientModelId", selected?.clientModelId || selected?.aliases?.[0] || "", "Codex 请求里的 model")}
-              ${field("Aliases", "aliases", (selected?.aliases || []).join(", "), "son, codex-default")}
-              ${field("Family", "family", selected?.family || "codex", "codex")}
-              ${field("Capabilities", "capabilities", (selected?.capabilities || ["streaming", "tools", "reasoning"]).join(", "), "streaming, tools, reasoning", true)}
-              ${field("Context window", "contextWindow", selected?.contextWindow ?? 1000000, "tokens")}
-              ${selectField("Compact strategy", "compactStrategy", compact.strategy || "auto", ["auto", "manual", "disabled"])}
-              ${field("Compact token limit", "compactTokenLimit", compact.tokenLimit ?? 850000, "tokens")}
-            </div>
-            <div class="subsection">
-              <div class="subsection-header"><h3>上游模型映射</h3></div>
-              <div class="form-grid">
-                ${selectField("Upstream", "upstreamId", upstreamId, Object.keys(config.upstreams))}
-                ${field("上游模型 ID（可选）", "upstreamModelId", mapping.upstreamModelId || "", "留空使用请求中的模型名")}
-                ${field("能力覆盖", "capabilityOverrides", (mapping.capabilityOverrides || []).join(", "), "可留空")}
-              </div>
-            </div>
-            <div class="form-actions"><button class="button button-primary" type="submit">保存</button>${selected ? `<button class="button button-danger" type="button" data-action="delete-model" data-id="${esc(selectedId)}">删除</button>` : ""}</div>
-          </form>
-        </div>
-      </div>
-    </div>
-  `;
-}
-
-function renderDiagnostics() {
-  const config = state.config;
-  const resolveResult = state.resolveResult;
-  return `
-    <div class="panel">
-      <div class="panel-header"><h2>模型解析测试</h2></div>
-      <div class="panel-body">
-        <form id="resolve-form">
-          <div class="form-grid">
-            ${selectField("Virtual Provider", "virtualProviderId", state.selected.virtualProvider || "", Object.keys(config.virtualProviders))}
-            ${field("Client model ID", "model", "", "sonnet 或 codex-gpt56-sol")}
-            ${checkboxField("stream", "stream", true)}
-            ${checkboxField("reasoning", "reasoning", false)}
-          </div>
-          <div class="form-actions"><button class="button button-primary" type="submit">解析路径</button></div>
-        </form>
-        ${resolveResult ? resolveResultPanel(resolveResult) : ""}
-      </div>
-    </div>
-    <div class="panel">
-      <div class="panel-header"><h2>事件记录</h2><button class="mini-button" data-action="refresh">刷新</button></div>
-      <div class="panel-body">${state.events.length ? `<div class="list">${state.events.map(eventRow).join("")}</div>` : `<div class="empty">暂无事件</div>`}</div>
-    </div>
-  `;
-}
-
-function modelRow(id, item, active = false) {
-  const context = item.contextWindow ? `${item.contextWindow.toLocaleString()} ctx` : "context unset";
-  const compact = item.compact?.tokenLimit ? `${item.compact.tokenLimit.toLocaleString()} compact` : "compact unset";
-  return `<button class="list-row ${active ? "is-selected" : ""}" data-action="select-model" data-id="${esc(id)}"><div><h3>${esc(item.clientModelId || item.aliases?.[0] || id)}</h3><p>${esc(id)} · ${(item.capabilities || []).join(" · ")} · ${esc(context)} · ${esc(compact)}</p></div><span class="status-badge">${Object.keys(item.upstreams || {}).length} bindings</span></button>`;
-}
-
-function eventRow(event) {
-  return `<div class="list-row"><div><h3>${esc(event.type)}</h3><p>${esc(new Date(event.at).toLocaleString())} · ${esc(event.data?.upstreamId || event.data?.revision || "control")}</p></div><span class="table-meta">${esc(event.id)}</span></div>`;
-}
-
-function field(label, name, value, placeholder = "", full = false, type = "text", readonly = false, required = false) {
-  return `<label class="field ${full ? "full" : ""}"><span>${esc(label)}</span><input name="${esc(name)}" type="${esc(type)}" value="${esc(value)}" placeholder="${esc(placeholder)}" ${readonly ? "readonly" : ""} ${required ? "required" : ""} /></label>`;
-}
-
-function selectField(label, name, value, items) {
-  return `<label class="field"><span>${esc(label)}</span><select name="${esc(name)}" aria-label="${esc(label)}" >${optionList(items, value)}</select></label>`;
-}
-
-function checkboxField(label, name, checked) {
-  return `<label class="field checkbox-field"><span><input name="${esc(name)}" type="checkbox" ${checked ? "checked" : ""} /> ${esc(label)}</span></label>`;
-}
-
-function resolveResultPanel(result) {
-  if (!result.ok) {
-    return `<div class="subsection"><div class="notice warning">${esc(result.error?.message || "模型解析失败")}</div></div>`;
-  }
-  return `<div class="subsection"><h3>解析结果</h3><pre class="code-preview">${esc(
-    `client model  : ${result.clientModelId}\nprofile        : ${result.profileId}\nroute          : ${result.routeId}\nupstream       : ${result.upstreamId}\nupstream model : ${result.upstreamModelId}\ncapabilities   : ${(result.capabilities || []).join(", ")}`,
-  )}</pre></div>`;
-}
-
-function artifactPanel(artifacts) {
-  const isClaude = artifacts.target === "claude-code";
-  const title = isClaude
-    ? "Claude Code settings.json 应用预览"
-    : artifacts.target === "generic-env"
-      ? "Generic environment preview"
-      : "Codex local config.toml preview";
-  const settingsPath = artifacts.settingsPath || (isClaude ? artifacts.applied?.[0] : null);
-  const instructions = isClaude
-    ? ["以下内容合并到 settings.json 的 env 中，保留其他设置；原值保存以便撤销接入。"]
-    : artifacts.instructions || [];
-  const files = isClaude
-    ? [{ path: "settings.json", contents: JSON.stringify({ env: artifacts.environment?.vars || {} }, null, 2) }]
-    : artifacts.files || [];
-  const variables = !isClaude && Object.keys(artifacts.environment?.vars || {}).length
-    ? `<div class="subsection"><div class="table-meta">ENVIRONMENT</div><pre class="code-preview">${esc(Object.entries(artifacts.environment.vars).map(([key, value]) => `${key}=${value}`).join("\n"))}</pre></div>`
-    : "";
-  return `
-    <div class="subsection">
-      <div class="subsection-header"><h3>${title}</h3>${isClaude ? "" : `<span class="field-hint">${esc(artifacts.mode || "managed_proxy")}</span>`}</div>
-      ${artifacts.catalogSummary ? `<div class="field-hint">${esc(artifacts.catalogSummary.sourceVersion)} / ${artifacts.catalogSummary.mode === "managed" ? "生成模型目录" : "沿用当前 Codex 目录"}</div>` : ""}
-      ${(artifacts.warnings || []).map((message) => `<div class="notice warning">${esc(message)}</div>`).join("")}
-      ${settingsPath ? `<p>应用位置：<code>${esc(settingsPath)}</code>，仅合并管理字段。</p>` : ""}
-      ${instructions.map((message) => `<p class="field-hint">${esc(message)}</p>`).join("")}
-      ${artifacts.changes?.length ? `<p class="field-hint">修改字段：${esc(artifacts.changes.join(", "))}</p>` : ""}
-      ${artifacts.conflicts?.length ? `<div class="notice warning">应用已阻止：这些字段在上次应用后被手工修改：${esc(artifacts.conflicts.join(", "))}</div>` : ""}
-      ${files.map((file) => file.kind === "json"
-        ? `<details class="subsection"><summary>${esc(file.path)}</summary><pre class="code-preview">${esc(file.contents)}</pre></details>`
-        : `<div class="subsection"><div class="table-meta">${esc(file.path)}</div><pre class="code-preview">${esc(file.contents)}</pre></div>`).join("")}
-      ${variables}
-      ${!isClaude && artifacts.environment?.shell ? `<div class="subsection"><div class="table-meta">SETUP COMMAND</div><pre class="code-preview">${esc(artifacts.environment.shell)}</pre></div>` : ""}
-      ${!isClaude && artifacts.environment?.powershell ? `<details class="subsection"><summary>PowerShell</summary><pre class="code-preview">${esc(artifacts.environment.powershell)}</pre></details>` : ""}
-    </div>
-  `;
-}
-
-async function handleAction(action, element) {
-  if (state.busy) return;
-  if ([
-    "create-suite", "open-suite", "back-overview", "select-model",
-    "new-model", "open-advanced-models",
-  ].includes(action)) {
-    if (!confirmPageLeave()) return;
-  }
-  const unlock = lockControls();
-  try {
-    if (action === "refresh") {
-      await refresh();
-    } else if (action === "refresh-codex-models") {
-      state.codexCatalog = await api("/codex/models?refresh=1");
-      // Refresh choices without discarding unsaved form inputs or secrets.
-      pageContent.querySelectorAll("[data-official-model]").forEach((select) => {
-        select.innerHTML = officialModelOptions(select.value);
-        updateOfficialModelHint(select);
-        syncCodexMetadata(select.closest("[data-suite-model]"));
-      });
-      pageContent.querySelectorAll(".catalog-status").forEach((status) => {
-        status.querySelector("span").textContent = state.codexCatalog.available ? `${state.codexCatalog.version} / ${state.codexCatalog.models.length} 个官方模型` : state.codexCatalog.error.message;
-      });
-      toast(state.codexCatalog.available ? "模型列表已刷新。" : state.codexCatalog.error.message, !state.codexCatalog.available);
-    } else if (action === "reload-form") {
-      if (!window.confirm("放弃此表单的本地修改并加载最新配置？")) return;
-      render(captureEditedForms(element.closest("form")));
-    } else if (action === "create-suite") {
-      state.createTarget = "codex";
-      state.selected.suite = null;
-      state.page = "suite-create";
-      render();
-    } else if (action === "open-suite") {
-      selectSuite(element.dataset.id);
-      state.page = "suite-detail";
-      render();
-    } else if (action === "back-overview") {
-      state.page = "overview";
-      render();
-    } else if (action === "select-model") {
-      state.selected.model = element.dataset.id;
-      state.page = "models";
-      render();
-    } else if (action === "new-model") {
-      state.selected.model = null;
-      state.page = "models";
-      render();
-    } else if (action === "add-suite-model") {
-      const list = pageContent.querySelector("#suite-model-list");
-      if (!list) return;
-      const wrapper = document.createElement("div");
-      const suite = selectedSuite();
-      const upstreamId = suite?.upstreamId || null;
-      wrapper.innerHTML = suiteModelEditor(suite || {}, "", {
-        clientModelId: "",
-        ...(suite?.target === "codex" ? { codex: { metadataMode: "official" } } : suite?.target === "claude-code" ? {} : { capabilities: ["streaming", "tools", "reasoning"] }),
-        upstreams: {},
-      }, upstreamId);
-      const row = wrapper.firstElementChild;
-      list.querySelector(".empty")?.remove();
-      list.appendChild(row);
-    } else if (action === "remove-suite-model") {
-      element.closest("[data-suite-model]")?.remove();
-    } else if (action === "add-create-model") {
-      const list = pageContent.querySelector("#create-model-list");
-      if (!list) return;
-      const wrapper = document.createElement("div");
-      wrapper.innerHTML = createModelRow();
-      const row = wrapper.firstElementChild;
-      list.appendChild(row);
-    } else if (action === "remove-create-model") {
-      const form = element.closest("form");
-      element.closest("[data-create-model]")?.remove();
-      syncClaudeCreateModels(form);
-    } else if (action === "delete-model") {
-      if (!window.confirm("删除此配置项？删除后立即生效。")) return;
-      await saveChanges(() => removeModel(element.dataset.id), element.closest("form"));
-    } else if (action === "test-upstream") {
-      await testUpstream(element.dataset.id);
-    } else if (action === "toggle-vp") {
-      await toggleVirtualProvider(element.dataset.id);
-    } else if (action === "preview-artifacts") {
-      await previewArtifacts();
-    } else if (action === "apply-target") {
-      await applyTarget();
-    } else if (action === "restore-target") {
-      if (hasUnsavedChanges()) throw new Error("请先保存当前编辑，再撤销接入。");
-      const suite = selectedSuite();
-      if (suite?.target !== "claude-code") throw new Error("请选择 Claude Code 配置");
-      await api("/targets/restore", { method: "POST", body: JSON.stringify({ bindingId: suite.bindingId }) });
-      state.artifactPreview = null;
-      toast("Claude Code 原接入配置已恢复，请重启客户端。");
-      render();
-    } else if (action === "open-advanced-models") {
-      state.page = "models";
-      state.selected.model = selectedSuite()?.modelIds?.[0] || firstKey(state.candidate.models);
-      render();
-    }
-  } catch (error) {
-    const form = element?.closest("form");
-    if (form) showFormError(form, error);
-    else toast(error.message, true);
-  } finally {
-    unlock();
-  }
-}
-
-function lockControls() {
-  state.busy = true;
-  const controls = [...document.querySelectorAll("button, input, select, textarea")];
-  for (const control of controls) {
-    lockedControls.set(control, control.disabled);
-    control.disabled = true;
-  }
-  return () => {
-    for (const control of controls) {
-      control.disabled = lockedControls.get(control);
-      lockedControls.delete(control);
-    }
-    state.busy = false;
-  };
-}
-
-function setControlDisabled(control, disabled) {
-  // Metadata may change while an async action temporarily locks all controls.
-  if (lockedControls.has(control)) lockedControls.set(control, disabled);
-  else control.disabled = disabled;
-}
-
-function showFormError(form, error) {
-  form.querySelector("[data-form-feedback]")?.remove();
-  const feedback = document.createElement("div");
-  feedback.className = "notice warning form-feedback";
-  feedback.dataset.formFeedback = "";
-  feedback.setAttribute("role", "alert");
-  feedback.tabIndex = -1;
-  const conflict = formConflicts.has(form);
-  const message = conflict
-    ? "此表单与其他窗口的修改冲突，已暂停保存并保留当前输入。请先复制需要保留的内容，再加载最新配置后重新编辑。"
-    : error.status === 409
-    ? "配置已在其他窗口变更。点击页面顶部的“刷新”合并最新配置后重试；无法自动合并的修改会提示处理。"
-    : error.message || "保存失败，请重试。";
-  const errors = error.body?.errors || [];
-  feedback.innerHTML = esc(message) + (errors.length
-    ? "<ul>" + errors.map((item) => "<li>" + esc(item.path || "") + ": " + esc(item.message) + "</li>").join("") + "</ul>"
-    : "") + (conflict ? '<div class="form-actions"><button class="button" type="button" data-action="reload-form">加载最新配置</button></div>' : "");
-  form.prepend(feedback);
-  feedback.focus({ preventScroll: true });
-  feedback.scrollIntoView({ block: "nearest" });
-}
-
-async function handleFormSubmit(event, form) {
-  event.preventDefault();
-  if (state.busy) return;
-  if (formConflicts.has(form)) {
-    showFormError(form, new Error("请先处理并发修改冲突。"));
-    return;
-  }
-  // Read FormData before disabling controls; disabled inputs are omitted.
-  const data = new FormData(form);
-  const unlock = lockControls();
-  const submitButton = form.querySelector('[type="submit"]');
-  const buttonLabel = submitButton?.textContent;
-  form.setAttribute("aria-busy", "true");
-  form.querySelector("[data-form-feedback]")?.remove();
-  try {
-    // Inputs named "id" shadow the form.id property in the browser.
-    const formId = form.getAttribute("id");
-    if (formId === "resolve-form") {
-      if (submitButton) submitButton.textContent = "解析中...";
-      await resolveModel(data);
-      render([form]);
-      toast("模型解析已完成。");
-      return;
-    }
-    if (submitButton) submitButton.textContent = "保存中...";
-    const handlers = {
-      "suite-create-form": () => saveSuiteCreate(data, form),
-      "suite-upstream-form": () => saveSuiteUpstream(data),
-      "suite-models-form": () => saveSuiteModels(form),
-      "claude-client-form": () => saveClaudeClient(data),
-      "model-form": () => saveModel(data, form),
-    };
-    if (!handlers[formId]) throw new Error("无法保存此表单，请刷新页面后重试。");
-    await saveChanges(handlers[formId], form);
-  } catch (error) {
-    showFormError(form, error);
-  } finally {
-    if (submitButton) submitButton.textContent = buttonLabel;
-    form.removeAttribute("aria-busy");
-    unlock();
-  }
-}
-
-function removeModel(id) {
-  delete state.candidate.models[id];
-  for (const provider of values(state.candidate.virtualProviders)) {
-    provider.allowedModels = (provider.allowedModels || []).filter((modelId) => modelId !== id);
-    if (provider.defaultModel === id) delete provider.defaultModel;
-  }
-  for (const route of values(state.candidate.routes)) {
-    for (const backend of route.backends || []) {
-      backend.models = (backend.models || []).filter((modelId) => modelId !== id);
-    }
-  }
-  for (const binding of values(state.candidate.bindings)) {
-    if (binding.defaultModel === id) delete binding.defaultModel;
-  }
-  state.selected.model = firstKey(state.candidate.models);
-}
-
-function saveSuiteModels(form) {
-  const suite = selectedSuite();
-  if (!suite) throw new Error("找不到当前配置套装");
-  const modelRows = [...form.querySelectorAll("[data-suite-model]")];
-
-  const upstreamId = suite.upstreamId;
-  if (!upstreamId || !state.candidate.upstreams[upstreamId]) {
-    throw new Error("当前配置套装没有可用的上游");
-  }
-
-  const clientModelIds = modelRows.map(
-    (row) => row.querySelector("[data-suite-model-client]")?.value.trim() || "",
-  );
-  if (clientModelIds.some((id) => !id)) throw new Error("每个模型都必须填写客户端模型 ID");
-  if (new Set(clientModelIds).size !== clientModelIds.length) {
-    throw new Error("客户端模型 ID 不能重复");
-  }
-
-  const reservedIds = new Set();
-  const nextModels = {};
-  for (const row of modelRows) {
-    const oldId = row.dataset.modelId || "";
-    const existing = state.candidate.models[oldId] || {};
-    const clientModelId = row.querySelector("[data-suite-model-client]").value.trim();
-    const profileId = oldId || modelProfileId(clientModelId, state.candidate.models, reservedIds);
-    if (nextModels[profileId]) throw new Error(`模型 ID 冲突: ${profileId}`);
-
-    const upstreams = {};
-    const upstreamInput = row.querySelector(
-      `[data-suite-model-upstream="${CSS.escape(upstreamId)}"]`,
-    );
-    const capabilityInput = row.querySelector(
-      `[data-suite-model-capabilities="${CSS.escape(upstreamId)}"]`,
-    );
-    const upstreamModelId = upstreamInput?.value.trim() || "";
-    const capabilityOverrides = capabilityInput ? commaList(capabilityInput.value) : existing.upstreams?.[upstreamId]?.capabilityOverrides || [];
-    upstreams[upstreamId] = { ...(existing.upstreams?.[upstreamId] || {}) };
-    if (upstreamModelId) upstreams[upstreamId].upstreamModelId = upstreamModelId;
-    else delete upstreams[upstreamId].upstreamModelId;
-    if (capabilityOverrides.length) upstreams[upstreamId].capabilityOverrides = capabilityOverrides;
-    else delete upstreams[upstreamId].capabilityOverrides;
-
-    const aliases = [...new Set([
-      ...(existing.aliases || []).filter((alias) => alias !== existing.clientModelId),
-      clientModelId,
-    ])];
-    const capabilities = commaList(
-      row.querySelector("[data-suite-model-capabilities-common]")?.value,
-    );
-    nextModels[profileId] = {
-      ...existing,
-      id: profileId,
-      name: clientModelId,
-      clientModelId,
-      aliases,
-      family: existing.family || (suite.target === "claude-code" ? "claude" : "codex"),
-      ...(suite.target === "claude-code" ? {
-        description: undefined,
-      } : { capabilities: capabilities.length ? capabilities : ["streaming", "tools", "reasoning"] }),
-      ...(suite.target === "codex" ? codexModelFields(clientModelId, existing, row) : suite.target === "claude-code" ? {} : {
-        contextWindow: Number(row.querySelector("[data-suite-model-context]")?.value || 1000000),
-        compact: {
-        strategy: row.querySelector("[data-suite-model-compact]")?.value || "auto",
-        tokenLimit: Number(
-          row.querySelector("[data-suite-model-compact-limit]")?.value || 850000,
-        ),
-        },
-      }),
-      upstreams,
-    };
-  }
-
-  const routeId = suite.route?.id;
-  if (!routeId) throw new Error("当前配置套装没有可编辑的 Route");
-  const existingRouteBackend = suite.routeBackend || {};
-  const nextRouteBackend = {
-    ...existingRouteBackend,
-    upstream: upstreamId,
-    models: Object.keys(nextModels),
-    enabled: true,
-  };
-
-  const oldModelIds = new Set(suite.modelIds);
-  const nextModelIds = new Set(Object.keys(nextModels));
-  for (const oldModelId of oldModelIds) {
-    if (nextModelIds.has(oldModelId)) continue;
-    const usedByOtherProvider = values(state.candidate.virtualProviders).some(
-      (provider) =>
-        provider !== suite.virtualProvider &&
-        (provider.allowedModels || []).includes(oldModelId),
-    );
-    const usedByOtherRoute = entries(state.candidate.routes).some(
-      ([id, route]) =>
-        id !== routeId &&
-        (route.backends || []).some((backend) => (backend.models || []).includes(oldModelId)),
-    );
-    if (!usedByOtherProvider && !usedByOtherRoute) delete state.candidate.models[oldModelId];
-  }
-  Object.assign(state.candidate.models, nextModels);
-  state.candidate.routes[routeId] = {
-    ...state.candidate.routes[routeId],
-    backends: [nextRouteBackend],
-  };
-  state.candidate.virtualProviders[suite.binding.virtualProvider] = {
-    ...state.candidate.virtualProviders[suite.binding.virtualProvider],
-    allowedModels: Object.keys(nextModels),
-    defaultModel: oldModelIds.has(suite.virtualProvider.defaultModel) && !nextModelIds.has(suite.virtualProvider.defaultModel)
-      ? undefined : suite.virtualProvider.defaultModel,
-  };
-  state.candidate.bindings[suite.bindingId] = {
-    ...state.candidate.bindings[suite.bindingId],
-    defaultModel: oldModelIds.has(suite.binding.defaultModel) && !nextModelIds.has(suite.binding.defaultModel)
-      ? undefined : suite.binding.defaultModel,
-  };
-  if (suite.target === "claude-code") {
-    // Keep client-ID selections attached to their row; Claude resolves aliases itself.
-    const syncSelection = (value, aliases = []) => {
-      if (!value) return undefined;
-      if (aliases.includes(value)) return value;
-      const previous = suite.models.find(({ id, profile }) => (profile.clientModelId || profile.aliases?.[0] || id) === value);
-      if (previous && nextModels[previous.id]) return nextModels[previous.id].clientModelId;
-      return Object.values(nextModels).some((model) => model.clientModelId === value) ? value : undefined;
-    };
-    const models = { ...suite.binding.claude?.models };
-    for (const family of ["opus", "sonnet", "fable", "haiku"]) {
-      const value = syncSelection(models[family]);
-      if (value) models[family] = value;
-      else delete models[family];
-    }
-    const subagent = syncSelection(models.subagent, CLAUDE_MODEL_ALIASES.subagent);
-    if (subagent) models.subagent = subagent;
-    else delete models.subagent;
-    const defaultModel = syncSelection(claudeDefaultModel(suite), CLAUDE_MODEL_ALIASES.defaultModel);
-    state.candidate.virtualProviders[suite.binding.virtualProvider].defaultModel = defaultModel;
-    state.candidate.bindings[suite.bindingId].defaultModel = defaultModel;
-    state.candidate.bindings[suite.bindingId].claude = { ...suite.binding.claude, models, setModel: Boolean(defaultModel) };
-  }
-  selectSuite(suite.bindingId);
-
-}
-
-function saveClaudeClient(data) {
-  const suite = selectedSuite();
-  if (suite?.target !== "claude-code") throw new Error("请选择 Claude Code 配置");
-  const clientIds = suite.models.map(({ id, profile }) => profile.clientModelId || profile.aliases?.[0] || id);
-  const defaultModel = claudeModelChoice("defaultModel", clientIds, data.get("defaultModel"));
-  const models = Object.fromEntries(["opus", "sonnet", "fable", "haiku", "subagent"].map((family) =>
-    [family, String(data.get(family) || "").trim()]).filter(([, value]) => value));
-  const subagent = claudeModelChoice("subagent", clientIds, models.subagent);
-  if (subagent) models.subagent = subagent;
-  else delete models.subagent;
-  const ids = new Set(clientIds);
-  for (const family of ["opus", "sonnet", "fable", "haiku"]) {
-    const previous = suite.binding.claude?.models?.[family];
-    if (data.get(family) == null && previous && !ids.has(previous)) throw new Error(`${family} 别名指向未配置的模型，请重新选择`);
-    if (models[family] && !ids.has(models[family])) throw new Error(`${family} 别名请选择当前配置中已保存的客户端模型 ID`);
-  }
-  suite.binding.defaultModel = defaultModel || undefined;
-  suite.virtualProvider.defaultModel = defaultModel || undefined;
-  suite.binding.claude = { ...suite.binding.claude, setModel: Boolean(defaultModel), models, discoverModels: data.get("discoverModels") === "on" };
-}
-
-function saveSuiteCreate(data, form) {
-  const upstreamBaseUrl = String(data.get("upstreamBaseUrl") || "").trim();
-  const upstreamSecret = String(data.get("upstreamSecret") || "").trim();
-  const target = String(data.get("target") || "codex").trim();
-  if (!["codex", "claude-code"].includes(target)) throw new Error("请选择 Codex 或 Claude Code");
-  const defaults = suiteDefaults(target);
-  const isClaude = target === "claude-code";
-  const protocol = isClaude ? "anthropic.messages" : "openai.responses";
-  const suiteName = String(data.get("suiteName") || "").trim();
-  const modelEntries = [...form.querySelectorAll("[data-create-model]")].map((row) => {
-    const read = (key) =>
-      row.querySelector(`[data-create-field="${CSS.escape(key)}"]`)?.value.trim() || "";
-    return {
-      clientModelId: read("clientModelId"),
-      upstreamModelId: read("upstreamModelId"),
-    };
-  });
-  if (!upstreamBaseUrl || !upstreamSecret) {
-    throw new Error("请填写上游地址和上游 API Key");
-  }
-  const missingModelField = modelEntries.find(
-    (model) => !model.clientModelId,
-  );
-  if (missingModelField) {
-    throw new Error("添加模型设置时请选择客户端模型");
-  }
-  const clientModelIds = modelEntries.map((model) => model.clientModelId);
-  if (new Set(clientModelIds).size !== clientModelIds.length) {
-    throw new Error("Client model ID 不能重复");
-  }
-  const defaultModel = isClaude ? claudeModelChoice("defaultModel", clientModelIds, data.get("defaultModel")) : "";
-  const claudeModels = isClaude ? Object.fromEntries(["opus", "sonnet", "fable", "haiku", "subagent"]
-    .map((family) => [family, String(data.get(family) || "").trim()]).filter(([, value]) => value)) : {};
-  const subagent = claudeModelChoice("subagent", clientModelIds, claudeModels.subagent);
-  if (subagent) claudeModels.subagent = subagent;
-  else delete claudeModels.subagent;
-  for (const family of ["opus", "sonnet", "fable", "haiku"]) {
-    if (claudeModels[family] && !clientModelIds.includes(claudeModels[family])) {
-      throw new Error(`${family} 别名请选择本次填写的客户端模型 ID`);
-    }
-  }
-
-  const upstreamId = defaults.upstreamId;
-  const upstreamName = upstreamDisplayName(upstreamBaseUrl, upstreamId);
-  const routeId = defaults.routeId;
-  const name = suiteName || `${targetLabel(target)} / ${upstreamName}`;
-  const bindingId = configurationId(name, defaults.bindingId);
-  const virtualProviderId = providerIdForConfiguration(bindingId);
-  if (Object.hasOwn(state.candidate.bindings, bindingId) || Object.hasOwn(state.candidate.virtualProviders, virtualProviderId)) {
-    throw new Error(`配置名称对应的 ID 已存在: ${bindingId}，请使用不同的配置名称`);
-  }
-  const reservedModelIds = new Set();
-  const models = Object.fromEntries(
-    modelEntries.map((model) => {
-      const profileId = modelProfileId(
-        model.clientModelId,
-        state.candidate.models,
-        reservedModelIds,
-      );
-      return [
-        profileId,
-        {
-          id: profileId,
-          name: model.clientModelId,
-          clientModelId: model.clientModelId,
-          aliases: [model.clientModelId],
-          family: isClaude ? "claude" : "codex",
-          ...(isClaude ? {} : codexModelFields(model.clientModelId)),
-          upstreams: {
-            [upstreamId]: {
-              ...(model.upstreamModelId ? { upstreamModelId: model.upstreamModelId } : {}),
-            },
-          },
-        },
-      ];
-    }),
-  );
-  const modelIds = Object.keys(models);
-
-  state.candidate.upstreams[upstreamId] = {
-    id: upstreamId,
-    name: upstreamName,
-    ...(isClaude ? { auth: { header: data.get("upstreamAuth") || "x-api-key" } } : { integration: "codex-native-provider" }),
-    protocol,
-    baseUrl: upstreamBaseUrl,
-    secretRef: `secret://upstreams/${upstreamId}`,
-    enabled: true,
-  };
-  for (const modelId of modelIds) delete state.candidate.models[modelId];
-  Object.assign(state.candidate.models, models);
-  state.candidate.routes[routeId] = {
-    id: routeId,
-    name: `${upstreamName} route`,
-    backends: [
-      {
-        upstream: upstreamId,
-        models: modelIds,
-        enabled: true,
-      },
-    ],
-  };
-  state.candidate.virtualProviders[virtualProviderId] = {
-    id: virtualProviderId,
-    name: `${targetLabel(target)} via ${upstreamName}`,
-    ingressProtocol: protocol,
-    route: routeId,
-    allowedModels: modelIds,
-    ...(defaultModel ? { defaultModel } : {}),
-    enabled: true,
-  };
-  state.candidate.bindings[bindingId] = {
-    id: bindingId,
-    name,
-    target,
-    ...(isClaude ? {} : { integration: "codex-native-provider" }),
-    targetFormat: isClaude ? "claude.settings.json.v1" : "codex.config.toml.v1",
-    mode: "config",
-    virtualProvider: virtualProviderId,
-    ...(isClaude ? {
-      ...(defaultModel ? { defaultModel } : {}),
-      claude: {
-        ...(defaultModel ? { setModel: true } : {}),
-        ...(Object.keys(claudeModels).length ? { models: claudeModels } : {}),
-      },
-    } : { codex: {} }),
-  };
-
-  state.pendingSecrets.upstreamSecrets[upstreamId] = upstreamSecret;
-
-  state.selected.model = modelIds[0] || null;
-  state.selected.virtualProvider = virtualProviderId;
-  state.selected.suite = bindingId;
-  state.page = "suite-detail";
-
-}
-
-function saveSuiteUpstream(data) {
-  const id = String(data.get("id") || "").trim();
-  if (!id) throw new Error("upstream ID 不能为空");
-  const existing = state.candidate.upstreams[id] || {};
-  state.candidate.upstreams[id] = {
-    ...existing,
-    id,
-    name: String(data.get("name") || id).trim(),
-    ...(data.get("protocol") === "openai.responses"
-      ? { integration: "codex-native-provider" }
-      : {}),
-    protocol: data.get("protocol"),
-    baseUrl: String(data.get("baseUrl") || "").trim(),
-    secretRef: existing.secretRef || `secret://upstreams/${id}`,
-    enabled: existing.enabled !== false,
-  };
-  if (data.get("protocol") !== "openai.responses") {
-    delete state.candidate.upstreams[id].integration;
-  }
-  if (data.get("protocol") === "anthropic.messages" && data.get("authHeader")) {
-    const header = String(data.get("authHeader"));
-    const previous = existing.auth?.header || existing.authHeader || "x-api-key";
-    if (header !== previous) {
-      state.candidate.upstreams[id].auth = { header, ...(header === "authorization" ? { scheme: "Bearer" } : {}) };
-      delete state.candidate.upstreams[id].authHeader;
-    }
-  }
-  const secret = String(data.get("secret") || "").trim();
-  if (secret) {
-    state.pendingSecrets.upstreamSecrets[id] = secret;
-  }
-  state.page = "suite-detail";
-}
-
-function saveModel(data, form) {
-  const id = String(data.get("id") || "").trim();
-  if (!id) throw new Error("CableTidy Model ID 不能为空");
-  const existing = state.candidate.models[id] || {};
-  const upstreamId = String(data.get("upstreamId") || "").trim();
-  const upstreamModelId = String(data.get("upstreamModelId") || "").trim();
-  if (!upstreamId) throw new Error("请选择一个 upstream");
-  const upstreams = {
-    [upstreamId]: {
-      ...(existing.upstreams?.[upstreamId] || {}),
-      ...(upstreamModelId ? { upstreamModelId } : {}),
-      capabilityOverrides: commaList(data.get("capabilityOverrides")),
-    },
-  };
-  if (!upstreamModelId) delete upstreams[upstreamId].upstreamModelId;
-  const clientModelId = String(data.get("clientModelId") || "").trim();
-  state.candidate.models[id] = {
-    ...existing,
-    id,
-    clientModelId: clientModelId || id,
-    aliases: commaList(data.get("aliases")),
-    family: String(data.get("family") || "codex").trim(),
-    capabilities: commaList(data.get("capabilities")),
-    contextWindow: Number(data.get("contextWindow") || 1000000),
-    compact: {
-      strategy: String(data.get("compactStrategy") || "auto").trim(),
-      tokenLimit: Number(data.get("compactTokenLimit") || 850000),
-    },
-    upstreams,
-  };
-  state.selected.model = id;
-
-}
-
-async function testUpstream(id) {
-  const result = await api("/tests/upstream", {
-    method: "POST",
-    body: JSON.stringify({ id }),
-  });
-  toast(`${id}: ${result.message}，${result.latencyMs}ms${result.secretConfigured ? "" : "，未找到 API key"}`, !result.ok);
-  await refresh(false);
-}
-
-async function toggleVirtualProvider(id) {
-  const provider = state.config.virtualProviders?.[id];
-  if (!provider) throw new Error("Virtual Provider 不存在");
-  const enabled = provider.enabled === false;
-  await api(`/virtual-providers/${encodeURIComponent(id)}/${enabled ? "start" : "pause"}`, {
-    method: "POST",
-    body: JSON.stringify({}),
-  });
-  await refresh(false);
-  toast(enabled ? "Virtual Provider 已启动。" : "Virtual Provider 已暂停。");
-}
-
-
-async function resolveModel(data) {
-  try {
-    state.resolveResult = await api("/tests/model-resolve", {
-      method: "POST",
-      body: JSON.stringify({
-        config: state.config,
-        virtualProviderId: data.get("virtualProviderId"),
-        model: String(data.get("model") || "").trim(),
-        stream: data.get("stream") === "on",
-        reasoning: data.get("reasoning") === "on",
-      }),
-    });
-  } catch (error) {
-    state.resolveResult = error.body || {
-      ok: false,
-      error: { message: error.message },
-    };
-  }
-}
-
-async function previewArtifacts() {
-  const preservedForms = captureEditedForms();
-  const result = await api("/config/preview-target-artifacts", {
-    method: "POST",
-    body: JSON.stringify({
-      config: state.config,
-      bindingId: state.selected.suite,
-    }),
-  });
-  state.artifactPreview = result.artifacts;
-  const target = result.artifacts?.target;
-  toast(target === "codex" ? "已生成 Codex 本地 config.toml 预览。" : target === "claude-code" ? "已生成 Claude Code 配置预览；预览不会写入文件。" : "已生成环境配置预览；请将这些变量注入对应客户端。");
-  render(preservedForms);
-}
-
-async function applyTarget() {
-  if (hasUnsavedChanges()) {
-    throw new Error("请先保存当前编辑，再应用到 CLI。");
-  }
-  const suite = selectedSuite();
-  if (!suite) throw new Error("请先选择一个配置套装。");
-  const binding = suite.binding;
-  if (!["codex", "claude-code"].includes(binding?.target)) {
-    await previewArtifacts();
-    return;
-  }
-  const result = await api("/targets/apply", {
-    method: "POST",
-    body: JSON.stringify({ bindingId: suite.bindingId }),
-  });
-  state.artifactPreview = result.report ? {
-    ...result.report,
-    target: result.target,
-    bindingId: suite.bindingId,
-    mode: result.report.mode || "managed_proxy",
-  } : null;
-  toast(`${targetLabel(binding.target)} 配置已应用，请重启客户端。`);
-  render();
-}
-
-async function saveChanges(update, form) {
-  const previous = {
-    page: state.page,
-    selected: clone(state.selected),
-  };
-  const preservedForms = captureEditedForms(form);
-  state.candidate = clone(state.config);
-  state.pendingSecrets = { upstreamSecrets: {} };
-  try {
-    update();
-    const identities = normalizeConfigurationIdentities(state.candidate);
-    state.selected.suite = identities.bindingIds.get(state.selected.suite) ?? state.selected.suite;
-    state.selected.virtualProvider = identities.providerIds.get(state.selected.virtualProvider) ?? state.selected.virtualProvider;
-    // The commit endpoint validates and applies the change atomically.
-    const result = await api("/config/commit", {
-      method: "POST",
-      body: JSON.stringify({
-        baseRevision: state.config.revision,
-        config: state.candidate,
-        upstreamSecrets: state.pendingSecrets.upstreamSecrets,
-      }),
-    });
-    state.config = result.config;
-    state.runtime = result.runtime;
-    state.artifactPreview = null;
-    state.resolveResult = null;
-    state.events.unshift({
-      id: "local-" + Date.now(),
-      type: "config.commit",
-      at: new Date().toISOString(),
-      data: { revision: result.revision },
-    });
-  } catch (error) {
-    Object.assign(state, previous);
-    throw error;
-  } finally {
-    state.candidate = clone(state.config);
-    state.pendingSecrets = { upstreamSecrets: {} };
-  }
-  render(state.page === previous.page ? preservedForms : []);
-  toast("配置已保存并生效。");
-}
-
-async function refresh(showToast = true) {
-  const preservedForms = captureEditedForms();
-  const [configResult, runtime, events] = await Promise.all([
-    api("/config"),
-    api("/runtime"),
-    api("/events"),
-  ]);
-  state.config = configResult.config;
-  state.candidate = clone(state.config);
-  state.pendingSecrets = { upstreamSecrets: {} };
-  state.runtime = runtime;
-  state.events = events.events || [];
-  if (showToast) toast("状态已刷新。");
-  render(preservedForms);
-}
-
-function firstKey(record, excluded = new Set()) {
-  return Object.keys(record || {}).find((key) => !excluded.has(key)) || null;
-}
-
-function toast(message, error = false) {
-  const node = document.createElement("div");
-  node.className = `toast ${error ? "error" : ""}`;
-  node.textContent = message;
-  toastRegion.append(node);
-  setTimeout(() => node.remove(), 4200);
-}
-
-document.querySelectorAll(".nav-item").forEach((item) => {
-  item.addEventListener("click", () => navigatePage(item.dataset.page));
-});
-
-document.querySelector("#refresh-button").addEventListener("click", () => {
-  if (state.busy) return;
-  if (!state.config) bootstrap();
-  else handleAction("refresh");
-});
-
-bootstrap();