dsh-provider-proxy 0.8.0 → 0.9.0

package/lib/client.js

@@ -39,13 +39,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var require_client = __commonJS({
   "src/client.css"(exports, module2) {
     "use strict";
-    var __dshMap = { "root": "1c0df77c_root", "lead": "5d248416_lead", "empty": "1710aef8_empty", "card": "b4a56347_card", "cardActive": "5d17f1d6_cardActive", "cardRejected": "0b12be1b_cardRejected", "defaultCard": "4dc8a19a_defaultCard", "defaultLead": "593693ac_defaultLead", "cardHead": "0c3d7976_cardHead", "cardTitles": "ba5490f7_cardTitles", "name": "fc223200_name", "id": "b54fcb50_id", "pillOn": "2d0e393c_pillOn", "pillLive": "ed98388d_pillLive", "pillOff": "07959fb6_pillOff", "pillRejected": "23916369_pillRejected", "toggle": "44052e5b_toggle", "field": "7826b254_field", "label": "fd3de42a_label", "hint": "9c1dd04c_hint", "input": "0cb12e78_input", "passwordToggle": "e7ed8e99_passwordToggle", "testButton": "3ea31502_testButton", "diag": "8093bbdb_diag", "diagSummary": "bb056060_diagSummary", "diagList": "643d5158_diagList", "chipRow": "cf7604fc_chipRow", "chip": "69584a20_chip", "chipActive": "9e9e3b3e_chipActive", "formGrid": "07283bc3_formGrid", "formGridFull": "31635992_formGridFull", "compactRow": "10f37453_compactRow", "compactRowActive": "b8d0ab91_compactRowActive", "compactRowRejected": "518f0c81_compactRowRejected", "copyButton": "4b86d627_copyButton" };
+    var __dshMap = { "root": "53783ebc_root", "lead": "87ded16f_lead", "empty": "f139472e_empty", "card": "99d44a8a_card", "cardActive": "6bfd1d28_cardActive", "cardRejected": "ea4afe84_cardRejected", "defaultCard": "6c49773c_defaultCard", "defaultLead": "8e32da71_defaultLead", "cardHead": "d2cf61e5_cardHead", "cardTitles": "c6ef43cd_cardTitles", "name": "6dad9d13_name", "id": "dd160a22_id", "pillOn": "4b27b813_pillOn", "pillLive": "6e7a5d11_pillLive", "pillOff": "7951c4c2_pillOff", "pillRejected": "4756f162_pillRejected", "toggle": "7c4f39f6_toggle", "field": "ebe8e1a3_field", "label": "d6a07995_label", "hint": "5b4fb148_hint", "input": "30a51506_input", "passwordToggle": "fcfbab02_passwordToggle", "testButton": "b3231562_testButton", "diag": "184b2d06_diag", "diagSummary": "49005df6_diagSummary", "diagList": "7f1b6335_diagList", "chipRow": "406f7239_chipRow", "chip": "446f9f30_chip", "chipActive": "152509e7_chipActive", "formGrid": "6fb245a3_formGrid", "formGridFull": "c89ac7ba_formGridFull", "controlRow": "763cfc36_controlRow", "toolbarRow": "97a483ad_toolbarRow", "compactRow": "342803fe_compactRow", "compactRowActive": "b8cadbfb_compactRowActive", "compactRowRejected": "9ccd93bd_compactRowRejected", "copyButton": "dcf70ff1_copyButton", "profileCard": "9889cd73_profileCard", "panel": "64d062a3_panel" };
     var __dshStyles = globalThis.__dshPluginStyles || (globalThis.__dshPluginStyles = /* @__PURE__ */ new Set());
     if (!__dshStyles.has("dsh-provider-proxy/client.css")) {
       __dshStyles.add("dsh-provider-proxy/client.css");
       __dshStyle = document.createElement("style");
       __dshStyle.setAttribute("data-plugin-css", "dsh-provider-proxy/client.css");
-      __dshStyle.textContent = '/* dsh-provider-proxy \u2014 provider proxy settings page.\r\n   Tokens only: no literal colours, matching the shared --dsw-* system. */\r\n\r\n.1c0df77c_root {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 12px;\r\n  max-width: 640px;\r\n}\r\n\r\n.5d248416_lead {\r\n  margin: 0 0 4px;\r\n  font-size: 12px;\r\n  line-height: 1.6;\r\n  color: var(--dsw-alias-label-secondary);\r\n}\r\n\r\n.1710aef8_empty {\r\n  margin: 0;\r\n  padding: 16px;\r\n  border: 1px dashed var(--dsw-alias-border-l1);\r\n  border-radius: 8px;\r\n  font-size: 12px;\r\n  text-align: center;\r\n  color: var(--dsw-alias-state-idle-primary);\r\n}\r\n\r\n/* ---- provider card ---- */\r\n\r\n.b4a56347_card,\r\n.5d17f1d6_cardActive,\r\n.0b12be1b_cardRejected {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 10px;\r\n  padding: 12px 14px;\r\n  border: 1px solid var(--dsw-alias-border-l1);\r\n  border-radius: 10px;\r\n  background: var(--dsw-alias-bg-layer-1);\r\n}\r\n\r\n.5d17f1d6_cardActive {\r\n  border-color: var(--dsw-alias-state-success-primary);\r\n  background: var(--dsw-alias-bg-layer-2);\r\n}\r\n\r\n/* An enabled route the Host refused: never dress it as active. */\r\n.0b12be1b_cardRejected {\r\n  border-color: var(--dsw-alias-state-error-primary, #f85149);\r\n  background: var(--dsw-alias-bg-layer-2);\r\n}\r\n\r\n/* ---- shared default endpoint ---- */\r\n\r\n/* A distinct outer layer, so it reads as "one setting for the page" rather than\r\n   as one more provider card. */\r\n.4dc8a19a_defaultCard {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 10px;\r\n  padding: 14px 16px;\r\n  border: 1px solid var(--dsw-alias-border-l2);\r\n  border-radius: 10px;\r\n  background: var(--dsw-alias-bg-layer-2);\r\n}\r\n\r\n.593693ac_defaultLead {\r\n  margin: -2px 0 0;\r\n  font-size: 11px;\r\n  line-height: 1.5;\r\n  color: var(--dsw-alias-label-secondary);\r\n}\r\n\r\n.0c3d7976_cardHead {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 12px;\r\n}\r\n\r\n.ba5490f7_cardTitles {\r\n  display: flex;\r\n  align-items: baseline;\r\n  gap: 8px;\r\n  min-width: 0;\r\n}\r\n\r\n.fc223200_name {\r\n  overflow: hidden;\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  color: var(--dsw-alias-label-primary);\r\n}\r\n\r\n.b54fcb50_id {\r\n  flex: none;\r\n  padding: 1px 6px;\r\n  border-radius: 4px;\r\n  background: var(--dsw-alias-bg-layer-2);\r\n  font-family: ui-monospace, monospace;\r\n  font-size: 11px;\r\n  color: var(--dsw-alias-label-secondary);\r\n}\r\n\r\n/* ---- status pill ---- */\r\n\r\n.2d0e393c_pillOn,\r\n.ed98388d_pillLive,\r\n.07959fb6_pillOff,\r\n.23916369_pillRejected {\r\n  flex: none;\r\n  padding: 2px 8px;\r\n  border-radius: 999px;\r\n  font-size: 11px;\r\n  font-weight: 500;\r\n  white-space: nowrap;\r\n}\r\n\r\n.2d0e393c_pillOn {\r\n  background: var(--dsw-alias-state-success-primary);\r\n  color: var(--dsw-alias-bg-base);\r\n}\r\n\r\n.ed98388d_pillLive {\r\n  border: 1px solid var(--dsw-alias-border-l2);\r\n  color: var(--dsw-alias-label-secondary);\r\n}\r\n\r\n.07959fb6_pillOff {\r\n  color: var(--dsw-alias-state-idle-primary);\r\n}\r\n\r\n.23916369_pillRejected {\r\n  border: 1px solid var(--dsw-alias-state-error-primary, #f85149);\r\n  color: var(--dsw-alias-state-error-primary, #f85149);\r\n}\r\n\r\n/* ---- toggle ---- */\r\n\r\n.44052e5b_toggle {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding-top: 2px;\r\n  font-size: 12px;\r\n  color: var(--dsw-alias-label-primary);\r\n  cursor: pointer;\r\n}\r\n\r\n.44052e5b_toggle input {\r\n  accent-color: var(--dsw-alias-brand-primary);\r\n  cursor: pointer;\r\n}\r\n\r\n/* ---- fields ---- */\r\n\r\n.7826b254_field {\r\n  display: grid;\r\n  grid-template-columns: 76px 1fr;\r\n  align-items: center;\r\n  gap: 8px;\r\n  font-size: 12px;\r\n  min-width: 0;\r\n}\r\n\r\n.fd3de42a_label {\r\n  color: var(--dsw-alias-label-secondary);\r\n}\r\n\r\n.9c1dd04c_hint {\r\n  grid-column: 1 / -1;\r\n  margin-top: 2px;\r\n  font-size: 11px;\r\n  color: var(--dsw-alias-state-warn-primary, #d29922);\r\n}\r\n\r\n.0cb12e78_input {\r\n  box-sizing: border-box;\r\n  width: 100%;\r\n  min-width: 0;\r\n  padding: 5px 8px;\r\n  border: 1px solid var(--dsw-alias-border-l1);\r\n  border-radius: 6px;\r\n  outline: none;\r\n  background: var(--dsw-alias-bg-layer-1);\r\n  color: var(--dsw-alias-label-primary);\r\n  font: inherit;\r\n  font-size: 12px;\r\n  transition: border-color 120ms ease, background 120ms ease;\r\n}\r\n\r\n/* The base look of every input is INLINE too, so these three state rules only\r\n   ever take effect as author-important declarations \u2014 same reason as the\r\n   self-check button above. `cursor` has no inline base and needs none, and the\r\n   hover border uses `l3` because `l1`\u2192`l2` is a 4%\u219210% black step nobody can\r\n   see. */\r\n\r\n.0cb12e78_input:hover:not(:disabled) {\r\n  border-color: var(--dsw-alias-border-l3) !important;\r\n}\r\n\r\n.0cb12e78_input:focus {\r\n  border-color: var(--dsw-alias-brand-primary) !important;\r\n}\r\n\r\n.0cb12e78_input:disabled {\r\n  color: var(--dsw-alias-state-idle-primary) !important;\r\n  background: var(--dsw-alias-bg-layer-2) !important;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* The icon sits inside the input, so its hover/focus feedback must be local\r\n   and must outrank the transparent inline base. */\r\n.e7ed8e99_passwordToggle {\r\n  transition: background 120ms ease, color 120ms ease;\r\n}\r\n\r\n.e7ed8e99_passwordToggle:hover:not(:disabled) {\r\n  background: var(--dsw-alias-interactive-bg-hover) !important;\r\n  color: var(--dsw-alias-label-primary) !important;\r\n}\r\n\r\n.e7ed8e99_passwordToggle:focus-visible {\r\n  outline: 2px solid var(--dsw-alias-brand-primary);\r\n  outline-offset: 1px;\r\n}\r\n\r\n/* ---- self-check ---- */\r\n\r\n/* The hover state is the one thing an inline style cannot express, which is why\r\n   this element carries a class at all. Layout stays inline.\r\n\r\n   Two traps, both hit before this comment existed:\r\n   - `!important` is load-bearing: the base border and background are INLINE, and\r\n     the cascade sorts a style attribute after every author rule, so a plain\r\n     declaration here would ship, match, and still lose.\r\n   - the TOKENS must be visible ones. `bg-layer-1/2/3` all resolve to\r\n     `neutral-bluish-00` in the light theme, so a layer swap is a no-op there, and\r\n     `border-l1`\u2192`l2` is 4%\u219210% black on a 1px line. The app\'s own hovers use\r\n     `interactive-bg-hover`; using it here is what makes the feedback exist. */\r\n.3ea31502_testButton {\r\n  transition: border-color 120ms ease, background 120ms ease;\r\n}\r\n\r\n.3ea31502_testButton:hover:not(:disabled) {\r\n  border-color: var(--dsw-alias-border-l3) !important;\r\n  background: var(--dsw-alias-interactive-bg-hover) !important;\r\n}\r\n\r\n/* ---- diagnostics ---- */\r\n\r\n.8093bbdb_diag {\r\n  margin-top: 2px;\r\n  padding: 8px 10px;\r\n  border: 1px solid var(--dsw-alias-border-l1);\r\n  border-radius: 8px;\r\n  font-size: 11px;\r\n  color: var(--dsw-alias-label-secondary);\r\n}\r\n\r\n.bb056060_diagSummary {\r\n  cursor: pointer;\r\n  color: var(--dsw-alias-state-warn-primary);\r\n}\r\n\r\n.643d5158_diagList {\r\n  margin: 6px 0 0;\r\n  padding-left: 18px;\r\n  font-family: ui-monospace, monospace;\r\n  word-break: break-all;\r\n}\r\n\r\n/* ---- v0.8.0 N9 additions: status filter chips ---- */\r\n\r\n.cf7604fc_chipRow {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.69584a20_chip {\r\n  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;\r\n}\r\n\r\n.69584a20_chip:hover:not(:disabled) {\r\n  border-color: var(--dsw-alias-border-l3) !important;\r\n  background: var(--dsw-alias-interactive-bg-hover) !important;\r\n  color: var(--dsw-alias-label-primary) !important;\r\n}\r\n\r\n.9e9e3b3e_chipActive {\r\n  border-color: var(--dsw-alias-brand-primary) !important;\r\n  background: var(--dsw-alias-interactive-bg-hover) !important;\r\n  color: var(--dsw-alias-brand-primary) !important;\r\n}\r\n\r\n/* ---- v0.8.0 N11 additions: form grid ---- */\r\n\r\n.07283bc3_formGrid {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, minmax(0, 1fr));\r\n  align-items: start;\r\n  gap: 10px 14px;\r\n}\r\n\r\n.31635992_formGridFull {\r\n  grid-column: 1 / -1;\r\n}\r\n\r\n@media (max-width: 520px) {\r\n  .07283bc3_formGrid {\r\n    grid-template-columns: 1fr !important;\r\n  }\r\n  .31635992_formGridFull {\r\n    grid-column: auto !important;\r\n  }\r\n}\r\n\r\n/* ---- v0.8.0 N10 additions: compact view ---- */\r\n\r\n.10f37453_compactRow,\r\n.b8d0ab91_compactRowActive,\r\n.518f0c81_compactRowRejected {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 10px;\r\n  padding: 10px 14px;\r\n  border: 1px solid var(--dsw-alias-border-l1);\r\n  border-radius: 8px;\r\n  background: var(--dsw-alias-bg-layer-1);\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.b8d0ab91_compactRowActive {\r\n  border-color: var(--dsw-alias-state-success-primary);\r\n  background: var(--dsw-alias-bg-layer-2);\r\n}\r\n\r\n.518f0c81_compactRowRejected {\r\n  border-color: var(--dsw-alias-state-error-primary, #f85149);\r\n  background: var(--dsw-alias-bg-layer-2);\r\n}\r\n\r\n/* ---- v0.8.0 N13 additions: quick copy ---- */\r\n.4b86d627_copyButton {\r\n  transition: background 120ms ease, color 120ms ease;\r\n}\r\n\r\n.4b86d627_copyButton:hover:not(:disabled) {\r\n  background: var(--dsw-alias-interactive-bg-hover) !important;\r\n  color: var(--dsw-alias-label-primary) !important;\r\n}\r\n';
+      __dshStyle.textContent = "/* dsh-provider-proxy \u2014 provider proxy settings page.\r\n   Tokens only: no literal colours, matching the shared --dsw-* system. */\r\n\r\n.53783ebc_root {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 14px;\r\n  max-width: 760px;\r\n}\r\n\r\n.87ded16f_lead {\r\n  margin: 0 0 4px;\r\n  font-size: 12px;\r\n  line-height: 1.6;\r\n  color: var(--dsw-alias-label-secondary);\r\n}\r\n\r\n.f139472e_empty {\r\n  margin: 0;\r\n  padding: 16px;\r\n  border: 1px dashed var(--dsw-alias-border-l1);\r\n  border-radius: 8px;\r\n  font-size: 12px;\r\n  text-align: center;\r\n  color: var(--dsw-alias-state-idle-primary);\r\n}\r\n\r\n/* ---- provider card ---- */\r\n\r\n.99d44a8a_card,\r\n.6bfd1d28_cardActive,\r\n.ea4afe84_cardRejected {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 12px;\r\n  padding: 14px 16px;\r\n  border: 1px solid var(--dsw-alias-border-l1);\r\n  border-radius: 10px;\r\n  background: var(--dsw-alias-bg-layer-1);\r\n}\r\n\r\n.6bfd1d28_cardActive {\r\n  border-color: var(--dsw-alias-state-success-primary);\r\n  background: var(--dsw-alias-bg-layer-2);\r\n}\r\n\r\n/* An enabled route the Host refused: never dress it as active. */\r\n.ea4afe84_cardRejected {\r\n  border-color: var(--dsw-alias-state-error-primary, #f85149);\r\n  background: var(--dsw-alias-bg-layer-2);\r\n}\r\n\r\n/* ---- shared default endpoint ---- */\r\n\r\n/* A distinct outer layer, so it reads as \"one setting for the page\" rather than\r\n   as one more provider card. */\r\n.6c49773c_defaultCard {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 12px;\r\n  padding: 14px 16px;\r\n  border: 1px solid var(--dsw-alias-border-l2);\r\n  border-radius: 10px;\r\n  background: var(--dsw-alias-bg-layer-2);\r\n}\r\n\r\n.8e32da71_defaultLead {\r\n  margin: -2px 0 0;\r\n  font-size: 11px;\r\n  line-height: 1.5;\r\n  color: var(--dsw-alias-label-secondary);\r\n}\r\n\r\n.d2cf61e5_cardHead {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 12px;\r\n}\r\n\r\n.c6ef43cd_cardTitles {\r\n  display: flex;\r\n  align-items: baseline;\r\n  gap: 8px;\r\n  min-width: 0;\r\n}\r\n\r\n.6dad9d13_name {\r\n  overflow: hidden;\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  color: var(--dsw-alias-label-primary);\r\n}\r\n\r\n.dd160a22_id {\r\n  flex: none;\r\n  padding: 1px 6px;\r\n  border-radius: 4px;\r\n  background: var(--dsw-alias-bg-layer-2);\r\n  font-family: ui-monospace, monospace;\r\n  font-size: 11px;\r\n  color: var(--dsw-alias-label-secondary);\r\n}\r\n\r\n/* ---- status pill ---- */\r\n\r\n.4b27b813_pillOn,\r\n.6e7a5d11_pillLive,\r\n.7951c4c2_pillOff,\r\n.4756f162_pillRejected {\r\n  flex: none;\r\n  padding: 2px 8px;\r\n  border-radius: 999px;\r\n  font-size: 11px;\r\n  font-weight: 500;\r\n  white-space: nowrap;\r\n}\r\n\r\n.4b27b813_pillOn {\r\n  background: var(--dsw-alias-state-success-primary);\r\n  color: var(--dsw-alias-bg-base);\r\n}\r\n\r\n.6e7a5d11_pillLive {\r\n  border: 1px solid var(--dsw-alias-border-l2);\r\n  color: var(--dsw-alias-label-secondary);\r\n}\r\n\r\n.7951c4c2_pillOff {\r\n  color: var(--dsw-alias-state-idle-primary);\r\n}\r\n\r\n.4756f162_pillRejected {\r\n  border: 1px solid var(--dsw-alias-state-error-primary, #f85149);\r\n  color: var(--dsw-alias-state-error-primary, #f85149);\r\n}\r\n\r\n/* ---- toggle ---- */\r\n\r\n.7c4f39f6_toggle {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding-top: 2px;\r\n  font-size: 12px;\r\n  color: var(--dsw-alias-label-primary);\r\n  cursor: pointer;\r\n}\r\n\r\n.7c4f39f6_toggle input {\r\n  accent-color: var(--dsw-alias-brand-primary);\r\n  cursor: pointer;\r\n}\r\n\r\n/* ---- fields ---- */\r\n\r\n.ebe8e1a3_field {\r\n  display: grid;\r\n  grid-template-columns: 76px 1fr;\r\n  align-items: center;\r\n  gap: 8px;\r\n  font-size: 12px;\r\n  min-width: 0;\r\n}\r\n\r\n.d6a07995_label {\r\n  color: var(--dsw-alias-label-secondary);\r\n}\r\n\r\n.5b4fb148_hint {\r\n  grid-column: 1 / -1;\r\n  margin-top: 2px;\r\n  font-size: 11px;\r\n  color: var(--dsw-alias-state-warn-primary, #d29922);\r\n}\r\n\r\n.30a51506_input {\r\n  box-sizing: border-box;\r\n  width: 100%;\r\n  min-width: 0;\r\n  padding: 5px 8px;\r\n  border: 1px solid var(--dsw-alias-border-l1);\r\n  border-radius: 6px;\r\n  outline: none;\r\n  background: var(--dsw-alias-bg-layer-1);\r\n  color: var(--dsw-alias-label-primary);\r\n  font: inherit;\r\n  font-size: 12px;\r\n  transition: border-color 120ms ease, background 120ms ease;\r\n}\r\n\r\n/* The base look of every input is INLINE too, so these three state rules only\r\n   ever take effect as author-important declarations \u2014 same reason as the\r\n   self-check button above. `cursor` has no inline base and needs none, and the\r\n   hover border uses `l3` because `l1`\u2192`l2` is a 4%\u219210% black step nobody can\r\n   see. */\r\n\r\n.30a51506_input:hover:not(:disabled) {\r\n  border-color: var(--dsw-alias-border-l3) !important;\r\n}\r\n\r\n.30a51506_input:focus {\r\n  border-color: var(--dsw-alias-brand-primary) !important;\r\n}\r\n\r\n.30a51506_input:disabled {\r\n  color: var(--dsw-alias-state-idle-primary) !important;\r\n  background: var(--dsw-alias-bg-layer-2) !important;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* The icon sits inside the input, so its hover/focus feedback must be local\r\n   and must outrank the transparent inline base. */\r\n.fcfbab02_passwordToggle {\r\n  transition: background 120ms ease, color 120ms ease;\r\n}\r\n\r\n.fcfbab02_passwordToggle:hover:not(:disabled) {\r\n  background: var(--dsw-alias-interactive-bg-hover) !important;\r\n  color: var(--dsw-alias-label-primary) !important;\r\n}\r\n\r\n.fcfbab02_passwordToggle:focus-visible {\r\n  outline: 2px solid var(--dsw-alias-brand-primary);\r\n  outline-offset: 1px;\r\n}\r\n\r\n/* ---- self-check ---- */\r\n\r\n/* The hover state is the one thing an inline style cannot express, which is why\r\n   this element carries a class at all. Layout stays inline.\r\n\r\n   Two traps, both hit before this comment existed:\r\n   - `!important` is load-bearing: the base border and background are INLINE, and\r\n     the cascade sorts a style attribute after every author rule, so a plain\r\n     declaration here would ship, match, and still lose.\r\n   - the TOKENS must be visible ones. `bg-layer-1/2/3` all resolve to\r\n     `neutral-bluish-00` in the light theme, so a layer swap is a no-op there, and\r\n     `border-l1`\u2192`l2` is 4%\u219210% black on a 1px line. The app's own hovers use\r\n     `interactive-bg-hover`; using it here is what makes the feedback exist. */\r\n.b3231562_testButton {\r\n  transition: border-color 120ms ease, background 120ms ease;\r\n}\r\n\r\n.b3231562_testButton:hover:not(:disabled) {\r\n  border-color: var(--dsw-alias-border-l3) !important;\r\n  background: var(--dsw-alias-interactive-bg-hover) !important;\r\n}\r\n\r\n/* ---- diagnostics ---- */\r\n\r\n.184b2d06_diag {\r\n  padding: 10px 14px;\r\n  border: 1px solid var(--dsw-alias-border-l1);\r\n  border-radius: 10px;\r\n  font-size: 11px;\r\n  color: var(--dsw-alias-label-secondary);\r\n}\r\n\r\n.49005df6_diagSummary {\r\n  cursor: pointer;\r\n  color: var(--dsw-alias-state-warn-primary);\r\n}\r\n\r\n.7f1b6335_diagList {\r\n  margin: 6px 0 0;\r\n  padding-left: 18px;\r\n  font-family: ui-monospace, monospace;\r\n  word-break: break-all;\r\n}\r\n\r\n/* ---- v0.8.0 N9 additions: status filter chips ---- */\r\n\r\n.406f7239_chipRow {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.446f9f30_chip {\r\n  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;\r\n}\r\n\r\n/* Hover is a HINT, never a selection.\r\n\r\n   Two earlier versions of this rule were wrong in the same direction:\r\n   it painted the active background (any hovered chip looked selected), and\r\n   then it painted an outline (a deselected chip still looked framed). An\r\n   unselected chip is bare text; hovering gives it a faint surface, nothing\r\n   more. Selection is the only state allowed a border and a solid fill. */\r\n.446f9f30_chip:hover:not(:disabled) {\r\n  border-color: transparent !important;\r\n  background: var(--dsw-alias-interactive-bg-hover) !important;\r\n  color: var(--dsw-alias-label-primary) !important;\r\n}\r\n\r\n/* The selected chip, driven by STATE rather than by class precedence, so it\r\n   cannot be outranked by `:hover` on a sibling. */\r\n.152509e7_chipActive,\r\n.446f9f30_chip[aria-pressed='true'] {\r\n  border-color: var(--dsw-alias-brand-primary) !important;\r\n  background: var(--dsw-alias-brand-primary) !important;\r\n  color: var(--dsw-alias-bg-base) !important;\r\n  font-weight: 600;\r\n}\r\n\r\n/* A selected chip keeps its own surface while hovered: the pointer is on it,\r\n   which must not read as \"about to become something else\". */\r\n.152509e7_chipActive:hover:not(:disabled),\r\n.446f9f30_chip[aria-pressed='true']:hover:not(:disabled) {\r\n  border-color: var(--dsw-alias-brand-primary) !important;\r\n  background: var(--dsw-alias-brand-primary) !important;\r\n  color: var(--dsw-alias-bg-base) !important;\r\n}\r\n\r\n/* ---- v0.8.0 N11 additions: form grid ---- */\r\n\r\n.6fb245a3_formGrid {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, minmax(0, 1fr));\r\n  align-items: start;\r\n  gap: 10px 14px;\r\n}\r\n\r\n.c89ac7ba_formGridFull {\r\n  grid-column: 1 / -1;\r\n}\r\n\r\n@media (max-width: 520px) {\r\n  .6fb245a3_formGrid {\r\n    grid-template-columns: 1fr !important;\r\n  }\r\n  .c89ac7ba_formGridFull {\r\n    grid-column: auto !important;\r\n  }\r\n  /* The endpoint-source picker and the enable switch stack too, instead of\r\n     shrinking the picker until its option text is unreadable. */\r\n  .763cfc36_controlRow {\r\n    grid-template-columns: 1fr !important;\r\n  }\r\n  /* The list toolbar's buttons drop below the search box at this width. */\r\n  .97a483ad_toolbarRow > * {\r\n    flex: 1 1 100% !important;\r\n  }\r\n}\r\n\r\n/* ---- v0.8.0 N10 additions: compact view ---- */\r\n\r\n.342803fe_compactRow,\r\n.b8cadbfb_compactRowActive,\r\n.9ccd93bd_compactRowRejected {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: stretch;\r\n  gap: 8px;\r\n  padding: 12px 16px;\r\n  border: 1px solid var(--dsw-alias-border-l1);\r\n  border-radius: 10px;\r\n  background: var(--dsw-alias-bg-layer-1);\r\n}\r\n\r\n.b8cadbfb_compactRowActive {\r\n  border-color: var(--dsw-alias-state-success-primary);\r\n  background: var(--dsw-alias-bg-layer-2);\r\n}\r\n\r\n.9ccd93bd_compactRowRejected {\r\n  border-color: var(--dsw-alias-state-error-primary, #f85149);\r\n  background: var(--dsw-alias-bg-layer-2);\r\n}\r\n\r\n/* ---- v0.8.0 N13 additions: quick copy ---- */\r\n.dcf70ff1_copyButton {\r\n  transition: background 120ms ease, color 120ms ease;\r\n}\r\n\r\n.dcf70ff1_copyButton:hover:not(:disabled) {\r\n  background: var(--dsw-alias-interactive-bg-hover) !important;\r\n  color: var(--dsw-alias-label-primary) !important;\r\n}\r\n\r\n/* ---- v0.9.0 N14 additions: named proxy presets ----\r\n   The manager reuses the diagnostics/details shell, so only the per-preset row\r\n   needs its own rules: an inset card whose border lights up while it is being\r\n   edited, which is the only way to tell several identical rows apart. */\r\n\r\n.9889cd73_profileCard {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n  padding: 12px 14px;\r\n  border: 1px solid var(--dsw-alias-border-l1);\r\n  border-radius: 10px;\r\n  background: var(--dsw-alias-bg-layer-1);\r\n  transition: border-color 120ms ease;\r\n}\r\n\r\n.9889cd73_profileCard:focus-within {\r\n  border-color: var(--dsw-alias-brand-primary) !important;\r\n}\r\n\r\n/* ---- v0.9.0 N19 additions: one layout scale ----\r\n   These classes exist only so the narrow-screen rules above can reach the\r\n   containers. Their visible properties stay inline, for the same reason every\r\n   other box on this page does: the stylesheet has silently failed to bind here\r\n   before, and layout must survive that. */\r\n\r\n.763cfc36_controlRow,\r\n.97a483ad_toolbarRow,\r\n.64d062a3_panel {\r\n  min-width: 0;\r\n}\r\n";
       document.head.appendChild(__dshStyle);
     }
     var __dshStyle;
@@ -71,6 +71,9 @@ function splitHostRules(raw) {
 function normalizeHostRule(raw) {
   return raw.trim().replace(/^\*?\./, "").toLowerCase();
 }
+function parseHostList(raw) {
+  return splitHostRules(raw).map(normalizeHostRule).filter((entry) => entry.length > 0);
+}
 function isBracketedIpv6(token) {
   return /^\[[0-9a-f:.]+\]$/i.test(token);
 }
@@ -88,6 +91,30 @@ function hostRuleProblem(raw) {
 function deadRuleEntries(raw) {
   return splitHostRules(raw).filter((entry) => hostRuleProblem(entry) !== void 0);
 }
+var PROVIDER_HOST_TEMPLATES = {
+  openai: { label: "OpenAI", hosts: "api.openai.com, *.openai.com" },
+  anthropic: { label: "Anthropic", hosts: "api.anthropic.com" },
+  google: { label: "Google", hosts: "generativelanguage.googleapis.com" },
+  deepseek: { label: "DeepSeek", hosts: "api.deepseek.com" }
+};
+function providerHostTemplate(providerId) {
+  const key = providerId.trim().toLowerCase().split(/[-_/:.]/)[0] ?? "";
+  const template = PROVIDER_HOST_TEMPLATES[key];
+  return template === void 0 ? void 0 : { id: key, ...template };
+}
+function appendHostRules(raw, hosts) {
+  const existing = new Set(parseHostList(raw));
+  const additions = [];
+  for (const token of splitHostRules(hosts)) {
+    const normalized = normalizeHostRule(token);
+    if (normalized.length === 0 || existing.has(normalized)) continue;
+    existing.add(normalized);
+    additions.push(token);
+  }
+  if (additions.length === 0) return raw.trim();
+  const prefix = raw.trim();
+  return prefix.length === 0 ? additions.join(", ") : `${prefix}, ${additions.join(", ")}`;
+}
 
 // src/proxy-address.ts
 var PROXY_HOST_INVALID = "\u4EE3\u7406\u5730\u5740\u53EA\u80FD\u586B IPv4\u3001IPv6 \u6216\u57DF\u540D";
@@ -125,6 +152,233 @@ function defaultProxyProblem(endpoint) {
   return void 0;
 }
 
+// src/presets.ts
+var DEFAULT_PROFILE_LABEL = "\u9ED8\u8BA4\u9884\u8BBE (Default)";
+var DEFAULT_PROFILE_BINDING = "__default__";
+function routeBindingOf(route) {
+  const profileId = (route?.profileId ?? "").trim();
+  if (profileId.length > 0) return { kind: "profile", profileId };
+  if (route?.useDefault === true) return { kind: "default" };
+  return { kind: "own" };
+}
+function bindingFields(binding) {
+  switch (binding.kind) {
+    case "profile":
+      return { profileId: binding.profileId, useDefault: false };
+    case "default":
+      return { profileId: "", useDefault: true };
+    case "own":
+      return { profileId: "", useDefault: false };
+  }
+}
+function profileNameProblem(raw) {
+  const name = raw.trim();
+  if (name.length === 0) return "\u9884\u8BBE\u540D\u79F0\u4E0D\u80FD\u4E3A\u7A7A";
+  if (name.length > 40) return "\u9884\u8BBE\u540D\u79F0\u4E0D\u80FD\u8D85\u8FC7 40 \u4E2A\u5B57\u7B26";
+  if (/[\u0000-\u001f\u007f]/.test(name)) return "\u9884\u8BBE\u540D\u79F0\u4E0D\u80FD\u5305\u542B\u63A7\u5236\u5B57\u7B26";
+  if (name === DEFAULT_PROFILE_LABEL) return "\u8BE5\u540D\u79F0\u7531\u5185\u7F6E\u9ED8\u8BA4\u9884\u8BBE\u4FDD\u7559\uFF0C\u8BF7\u6362\u4E00\u4E2A\u540D\u79F0";
+  if (name === DEFAULT_PROFILE_BINDING) return "\u8BE5\u540D\u79F0\u7531\u63D2\u4EF6\u4FDD\u7559\uFF0C\u8BF7\u6362\u4E00\u4E2A\u540D\u79F0";
+  return void 0;
+}
+function profileNames(profiles) {
+  return Object.keys(profiles ?? {}).sort((a, b) => a.localeCompare(b));
+}
+function routesBoundTo(routes, profileId) {
+  const out = [];
+  for (const [id, route] of Object.entries(routes ?? {})) {
+    if ((route?.profileId ?? "").trim() === profileId) out.push(id);
+  }
+  return out.sort();
+}
+function endpointSummary(endpoint) {
+  const protocol = endpoint?.protocol ?? "http";
+  const host = (endpoint?.host ?? "").trim() || "\u2014";
+  const port = endpoint?.port ?? 0;
+  return `${protocol}://${host}:${port === 0 ? "\u2014" : port}`;
+}
+function endpointAddress(endpoint) {
+  const host = (endpoint?.host ?? "").trim();
+  const port = endpoint?.port ?? 0;
+  if (host.length === 0 || port === 0) return "\u672A\u914D\u7F6E";
+  return `${host}:${port}`;
+}
+
+// src/proxy-clients.ts
+var PROXY_CLIENT_PRESETS = [
+  { id: "clash", label: "Clash / Mihomo (127.0.0.1:7890)", protocol: "http", host: "127.0.0.1", port: 7890 },
+  { id: "clash-verge", label: "Clash Verge / Meta (127.0.0.1:7897)", protocol: "http", host: "127.0.0.1", port: 7897 },
+  { id: "v2ray-http", label: "V2Ray / Xray HTTP (127.0.0.1:10809)", protocol: "http", host: "127.0.0.1", port: 10809 },
+  { id: "v2ray-socks", label: "V2Ray / Xray SOCKS5 (127.0.0.1:10808)", protocol: "socks5", host: "127.0.0.1", port: 10808 }
+];
+function proxyClientPreset(id) {
+  return PROXY_CLIENT_PRESETS.find((preset) => preset.id === id);
+}
+
+// src/backup.ts
+var PROTOCOLS = ["http", "https", "socks5"];
+function normalizeEndpoint(raw) {
+  const value = raw ?? {};
+  return {
+    protocol: PROTOCOLS.includes(value.protocol) ? value.protocol : "http",
+    host: typeof value.host === "string" ? value.host.trim() : "",
+    port: typeof value.port === "number" && Number.isFinite(value.port) ? value.port : 0,
+    username: typeof value.username === "string" ? value.username.trim() : "",
+    password: typeof value.password === "string" ? value.password : ""
+  };
+}
+var FALLBACK_TEST_URL = "https://api.ipify.org?format=json";
+function fillRoute(raw) {
+  const value = raw ?? {};
+  return {
+    enabled: value.enabled === true,
+    profileId: typeof value.profileId === "string" ? value.profileId.trim() : "",
+    useDefault: value.useDefault === true,
+    protocol: PROTOCOLS.includes(value.protocol) ? value.protocol : "http",
+    host: typeof value.host === "string" ? value.host.trim() : "",
+    port: typeof value.port === "number" && Number.isFinite(value.port) ? value.port : 0,
+    username: typeof value.username === "string" ? value.username.trim() : "",
+    password: typeof value.password === "string" ? value.password : "",
+    onlyHosts: typeof value.onlyHosts === "string" ? value.onlyHosts : "",
+    bypassHosts: typeof value.bypassHosts === "string" ? value.bypassHosts : "",
+    testTarget: typeof value.testTarget === "string" ? value.testTarget : ""
+  };
+}
+function buildBackup(source, options = { includePasswords: false }) {
+  const include = options.includePasswords === true;
+  const hide = (password) => include ? password : "";
+  const providers = {};
+  for (const [id, raw] of Object.entries(source.providers ?? {})) {
+    const filled = fillRoute(raw);
+    providers[id] = { ...filled, password: hide(filled.password) };
+  }
+  const proxyProfiles = {};
+  for (const [name, raw] of Object.entries(source.proxyProfiles ?? {})) {
+    const filled = normalizeEndpoint(raw);
+    proxyProfiles[name] = { ...filled, password: hide(filled.password) };
+  }
+  const defaultProxy = normalizeEndpoint(source.defaultProxy);
+  return {
+    version: 1,
+    exportedAt: (options.now ?? /* @__PURE__ */ new Date()).toISOString(),
+    providers,
+    proxyProfiles,
+    defaultProxy: { ...defaultProxy, password: hide(defaultProxy.password) },
+    localDirect: source.localDirect !== false,
+    testUrl: typeof source.testUrl === "string" && source.testUrl.trim().length > 0 ? source.testUrl : FALLBACK_TEST_URL
+  };
+}
+function backupFileName(now = /* @__PURE__ */ new Date()) {
+  const pad = (n) => String(n).padStart(2, "0");
+  return `dsh-proxy-backup-${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}.json`;
+}
+function isPlainObject(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function parseBackup(text) {
+  let parsed;
+  try {
+    parsed = JSON.parse(text);
+  } catch (error) {
+    return {
+      ok: false,
+      error: `\u4E0D\u662F\u5408\u6CD5\u7684 JSON\uFF1A${error instanceof Error ? error.message : String(error)}`
+    };
+  }
+  if (!isPlainObject(parsed)) return { ok: false, error: "\u5907\u4EFD\u6587\u4EF6\u7684\u9876\u5C42\u5FC5\u987B\u662F\u4E00\u4E2A\u5BF9\u8C61" };
+  const root = parsed;
+  if (root.providers === void 0 && root.defaultProxy === void 0 && root.proxyProfiles === void 0) {
+    return {
+      ok: false,
+      error: "\u5907\u4EFD\u6587\u4EF6\u7F3A\u5C11 providers / proxyProfiles / defaultProxy\uFF0C\u65E0\u6CD5\u8BC6\u522B\u4E3A\u4EE3\u7406\u914D\u7F6E"
+    };
+  }
+  if (root.providers !== void 0 && !isPlainObject(root.providers)) {
+    return { ok: false, error: "providers \u5FC5\u987B\u662F\u4E00\u4E2A\u5BF9\u8C61" };
+  }
+  if (root.proxyProfiles !== void 0 && !isPlainObject(root.proxyProfiles)) {
+    return { ok: false, error: "proxyProfiles \u5FC5\u987B\u662F\u4E00\u4E2A\u5BF9\u8C61" };
+  }
+  if (root.defaultProxy !== void 0 && !isPlainObject(root.defaultProxy)) {
+    return { ok: false, error: "defaultProxy \u5FC5\u987B\u662F\u4E00\u4E2A\u5BF9\u8C61" };
+  }
+  if (root.localDirect !== void 0 && typeof root.localDirect !== "boolean") {
+    return { ok: false, error: "localDirect \u5FC5\u987B\u662F\u5E03\u5C14\u503C" };
+  }
+  if (root.testUrl !== void 0 && typeof root.testUrl !== "string") {
+    return { ok: false, error: "testUrl \u5FC5\u987B\u662F\u5B57\u7B26\u4E32" };
+  }
+  const endpoint = (value, label) => {
+    if (value.protocol !== void 0 && !PROTOCOLS.includes(value.protocol)) {
+      return `${label}.protocol \u5FC5\u987B\u662F ${PROTOCOLS.join(" / ")}`;
+    }
+    for (const key of ["host", "username", "password"]) {
+      if (value[key] !== void 0 && typeof value[key] !== "string") {
+        return `${label}.${key} \u5FC5\u987B\u662F\u5B57\u7B26\u4E32`;
+      }
+    }
+    if (value.port !== void 0 && (typeof value.port !== "number" || !Number.isFinite(value.port))) {
+      return `${label}.port \u5FC5\u987B\u662F\u6570\u5B57`;
+    }
+    return void 0;
+  };
+  const providers = {};
+  for (const [id, value] of Object.entries(root.providers ?? {})) {
+    if (!isPlainObject(value)) return { ok: false, error: `providers.${id} \u5FC5\u987B\u662F\u4E00\u4E2A\u5BF9\u8C61` };
+    const why = endpoint(value, `providers.${id}`);
+    if (why !== void 0) return { ok: false, error: why };
+    for (const key of ["enabled", "useDefault"]) {
+      if (value[key] !== void 0 && typeof value[key] !== "boolean") {
+        return { ok: false, error: `providers.${id}.${key} \u5FC5\u987B\u662F\u5E03\u5C14\u503C` };
+      }
+    }
+    for (const key of ["profileId", "onlyHosts", "bypassHosts", "testTarget"]) {
+      if (value[key] !== void 0 && typeof value[key] !== "string") {
+        return { ok: false, error: `providers.${id}.${key} \u5FC5\u987B\u662F\u5B57\u7B26\u4E32` };
+      }
+    }
+    providers[id] = fillRoute(value);
+  }
+  const proxyProfiles = {};
+  for (const [name, value] of Object.entries(
+    root.proxyProfiles ?? {}
+  )) {
+    if (!isPlainObject(value)) return { ok: false, error: `proxyProfiles.${name} \u5FC5\u987B\u662F\u4E00\u4E2A\u5BF9\u8C61` };
+    const why = endpoint(value, `proxyProfiles.${name}`);
+    if (why !== void 0) return { ok: false, error: why };
+    proxyProfiles[name] = normalizeEndpoint(value);
+  }
+  if (root.defaultProxy !== void 0) {
+    const why = endpoint(root.defaultProxy, "defaultProxy");
+    if (why !== void 0) return { ok: false, error: why };
+  }
+  const document2 = {
+    version: 1,
+    exportedAt: typeof root.exportedAt === "string" ? root.exportedAt : "",
+    providers,
+    proxyProfiles,
+    defaultProxy: normalizeEndpoint(root.defaultProxy ?? {}),
+    localDirect: root.localDirect !== false,
+    testUrl: typeof root.testUrl === "string" && root.testUrl.trim().length > 0 ? root.testUrl : FALLBACK_TEST_URL
+  };
+  return { ok: true, document: document2 };
+}
+function backupOps(document2) {
+  return [
+    { op: "set", path: ["providers"], value: document2.providers },
+    { op: "set", path: ["proxyProfiles"], value: document2.proxyProfiles },
+    { op: "set", path: ["defaultProxy"], value: document2.defaultProxy },
+    { op: "set", path: ["localDirect"], value: document2.localDirect },
+    { op: "set", path: ["testUrl"], value: document2.testUrl }
+  ];
+}
+function backupCounts(document2) {
+  return {
+    providers: Object.keys(document2.providers).length,
+    profiles: Object.keys(document2.proxyProfiles).length,
+    enabled: Object.values(document2.providers).filter((route) => route.enabled).length
+  };
+}
+
 // src/client.ts
 var ReactCache;
 function react() {
@@ -139,7 +393,7 @@ function react() {
   }
   return ReactCache;
 }
-var PROTOCOLS = ["http", "https", "socks5"];
+var PROTOCOLS2 = ["http", "https", "socks5"];
 var NAMESPACE = "provider-proxy";
 var PLUGINS = ["slots"];
 var inject = PLUGINS;
@@ -357,7 +611,24 @@ async function fetchCatalog() {
       };
     }
   }
-  return { rows, publishedRows: rows, hits, problems, lastUse };
+  const environmentProxy = (() => {
+    const raw = body?.environment?.proxy;
+    if (raw === null || typeof raw !== "object") return null;
+    const candidate = raw;
+    const protocol = candidate.protocol;
+    if (protocol !== "http" && protocol !== "https" && protocol !== "socks5") return null;
+    if (typeof candidate.host !== "string" || candidate.host.length === 0) return null;
+    const port = candidate.port;
+    if (typeof port !== "number" || !Number.isInteger(port) || port < 1 || port > 65535) return null;
+    return {
+      source: typeof candidate.source === "string" ? candidate.source : "environment",
+      protocol,
+      host: candidate.host,
+      port,
+      hadCredentials: candidate.hadCredentials === true
+    };
+  })();
+  return { rows, publishedRows: rows, hits, problems, lastUse, environmentProxy };
 }
 var CATALOG_REFRESH_MS = 1e4;
 var catalogPoll;
@@ -378,8 +649,9 @@ var byName = (a, b) => a.name.localeCompare(b.name);
 function view(route) {
   return {
     enabled: route?.enabled === true,
+    profileId: typeof route?.profileId === "string" ? route.profileId : "",
     useDefault: route?.useDefault === true,
-    protocol: PROTOCOLS.includes(route?.protocol) ? route.protocol : "http",
+    protocol: PROTOCOLS2.includes(route?.protocol) ? route.protocol : "http",
     host: route?.host ?? "",
     port: route?.port ?? 0,
     username: route?.username ?? "",
@@ -389,6 +661,15 @@ function view(route) {
     testTarget: route?.testTarget ?? ""
   };
 }
+function profileView(profile) {
+  return {
+    protocol: PROTOCOLS2.includes(profile?.protocol) ? profile.protocol : "http",
+    host: typeof profile?.host === "string" ? profile.host : "",
+    port: typeof profile?.port === "number" ? profile.port : 0,
+    username: typeof profile?.username === "string" ? profile.username : "",
+    password: typeof profile?.password === "string" ? profile.password : ""
+  };
+}
 function unbracket(hostname) {
   return hostname.startsWith("[") && hostname.endsWith("]") ? hostname.slice(1, -1) : hostname;
 }
@@ -411,7 +692,7 @@ function splitProxyUrl(text) {
   }
   const scheme = url.protocol.slice(0, -1).toLowerCase();
   const protocol = scheme === "socks" ? "socks5" : scheme;
-  if (!PROTOCOLS.includes(protocol)) return void 0;
+  if (!PROTOCOLS2.includes(protocol)) return void 0;
   if (url.hostname.length === 0) return void 0;
   const decode = (value) => {
     try {
@@ -431,6 +712,30 @@ function splitProxyUrl(text) {
 }
 var WRITE_DELAY_MS = 300;
 var pendingWrites = /* @__PURE__ */ new Map();
+var VIEW_PREFS_KEY = "dsh-provider-proxy:view";
+function readViewPrefs() {
+  try {
+    const raw = globalThis.localStorage?.getItem(VIEW_PREFS_KEY);
+    if (typeof raw !== "string" || raw.length === 0) return {};
+    const parsed = JSON.parse(raw);
+    if (parsed === null || typeof parsed !== "object") return {};
+    const out = {};
+    if (parsed.viewMode === "card" || parsed.viewMode === "compact") out.viewMode = parsed.viewMode;
+    if (parsed.statusFilter === "all" || parsed.statusFilter === "proxied" || parsed.statusFilter === "direct" || parsed.statusFilter === "rejected") {
+      out.statusFilter = parsed.statusFilter;
+    }
+    return out;
+  } catch {
+    return {};
+  }
+}
+function writeViewPrefs(patch) {
+  try {
+    const next = { ...readViewPrefs(), ...patch };
+    globalThis.localStorage?.setItem(VIEW_PREFS_KEY, JSON.stringify(next));
+  } catch {
+  }
+}
 var writeQueue = Promise.resolve();
 function enqueueWrite(run) {
   const next = writeQueue.then(run, run);
@@ -472,16 +777,43 @@ var S = {
   root: {
     display: "flex",
     flexDirection: "column",
-    gap: "12px",
-    maxWidth: "720px"
+    gap: "14px",
+    maxWidth: "760px"
+  },
+  /**
+   * One vertical group of page-level blocks.
+   *
+   * Page settings (default endpoint, presets, backup, advanced) are one visual
+   * unit; the provider list is another. Without the grouping every block was a
+   * sibling at the same level, so the list controls ended up four blocks below
+   * the list they operate on.
+   */
+  group: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px",
+    minWidth: "0"
+  },
+  /** A small heading that separates the page's groups. */
+  groupTitle: {
+    margin: "6px 0 -2px",
+    fontSize: "11px",
+    fontWeight: "600",
+    letterSpacing: "0.04em",
+    textTransform: "uppercase",
+    color: "var(--dsw-alias-label-secondary)"
   },
   card: {
     display: "flex",
     flexDirection: "column",
     gap: "12px",
     padding: "14px 16px",
-    marginBottom: "12px",
-    border: "1px solid var(--dsw-alias-border-l1)",
+    // Longhands, for the same reason as `chip`: `cardActive`/`cardRejected`
+    // override ONLY `borderColor`, and a shorthand here would lose its colour
+    // the moment a card went back to the resting state.
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "var(--dsw-alias-border-l1)",
     borderRadius: "10px",
     background: "var(--dsw-alias-bg-layer-1)"
   },
@@ -631,7 +963,7 @@ var S = {
   defaultCard: {
     display: "flex",
     flexDirection: "column",
-    gap: "10px",
+    gap: "12px",
     padding: "14px 16px",
     border: "1px solid var(--dsw-alias-border-l2)",
     borderRadius: "10px",
@@ -672,6 +1004,21 @@ var S = {
     fontSize: "12px",
     minWidth: "0"
   },
+  /** A row of peer controls, each with its own label above it. */
+  controlRow: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
+    alignItems: "end",
+    gap: "10px 14px"
+  },
+  /** One cell of `controlRow`: a small label over its control. */
+  controlCell: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px",
+    fontSize: "12px",
+    minWidth: "0"
+  },
   label: { color: "var(--dsw-alias-label-secondary)" },
   input: {
     boxSizing: "border-box",
@@ -687,10 +1034,9 @@ var S = {
     fontSize: "12px"
   },
   diag: {
-    marginTop: "4px",
-    padding: "8px 10px",
+    padding: "10px 14px",
     border: "1px solid var(--dsw-alias-border-l1)",
-    borderRadius: "8px",
+    borderRadius: "10px",
     fontSize: "11px",
     color: "var(--dsw-alias-label-secondary)"
   },
@@ -699,6 +1045,42 @@ var S = {
     fontSize: "11px",
     color: "var(--dsw-alias-state-warn-primary, #d29922)"
   },
+  /** The shared shell of every collapsible panel on the page. */
+  panelBody: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px",
+    marginTop: "8px"
+  },
+  /** The bordered block of list controls, directly above the list. */
+  toolbar: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    padding: "10px 12px",
+    border: "1px solid var(--dsw-alias-border-l1)",
+    borderRadius: "10px",
+    background: "var(--dsw-alias-bg-layer-1)"
+  },
+  toolbarRow: {
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "8px",
+    minWidth: "0"
+  },
+  /** The backup bar: explanation on the left, its two actions on the right. */
+  backupBar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexWrap: "wrap",
+    gap: "10px",
+    padding: "10px 12px",
+    border: "1px solid var(--dsw-alias-border-l1)",
+    borderRadius: "10px",
+    background: "var(--dsw-alias-bg-layer-1)"
+  },
   chipRow: {
     display: "flex",
     alignItems: "center",
@@ -711,30 +1093,84 @@ var S = {
     alignItems: "center",
     padding: "3px 10px",
     borderRadius: "999px",
-    border: "1px solid var(--dsw-alias-border-l1)",
-    background: "var(--dsw-alias-bg-layer-1)",
+    // An UNSELECTED chip is bare text: no outline, no fill.
+    //
+    // It used to carry a faint 1px border, which is the same shape as the
+    // selected chip's outline — so after switching filters the old chip still
+    // read as "selected, just with dimmer text". The border is kept in the
+    // declaration as `transparent` rather than removed, so selecting a chip
+    // cannot shift the row by a pixel.
+    //
+    // WRITTEN AS THREE LONGHANDS, NOT AS THE `border` SHORTHAND. This is not
+    // style: React diffs inline styles key by key, and `chipActive` only
+    // overrides `borderColor`. Deselecting a chip therefore DELETES the
+    // `borderColor` key, React writes `style.borderColor = ''`, and the
+    // shorthand's transparent value is NOT restored — the border falls back to
+    // the CSS initial value `currentColor`, leaving a text-coloured outline on
+    // a chip that is supposed to have none. Keeping all three longhands present
+    // in every state means only the VALUE changes, never the key.
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "transparent",
+    background: "transparent",
     color: "var(--dsw-alias-label-secondary)",
     fontSize: "11px",
     fontWeight: "500",
     cursor: "pointer",
     userSelect: "none"
   },
+  /** The one selected chip: a solid fill, unmistakable at a glance. */
   chipActive: {
     borderColor: "var(--dsw-alias-brand-primary)",
-    background: "var(--dsw-alias-interactive-bg-hover)",
-    color: "var(--dsw-alias-brand-primary)",
+    background: "var(--dsw-alias-brand-primary)",
+    color: "var(--dsw-alias-bg-base)",
     fontWeight: "600"
   },
   compactRow: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    padding: "12px 16px",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "var(--dsw-alias-border-l1)",
+    borderRadius: "10px",
+    background: "var(--dsw-alias-bg-layer-1)"
+  },
+  /** Row 1 of a compact entry: identity and the proxy it uses. */
+  compactLine: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "space-between",
-    gap: "10px",
-    padding: "10px 14px",
-    border: "1px solid var(--dsw-alias-border-l1)",
-    borderRadius: "8px",
-    background: "var(--dsw-alias-bg-layer-1)",
-    marginBottom: "8px"
+    flexWrap: "wrap",
+    gap: "8px",
+    minWidth: "0"
+  },
+  /** Row 2 of a compact entry: every control, right-aligned. */
+  compactActions: {
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "8px",
+    minWidth: "0"
+  },
+  /**
+   * Row 3 of a compact entry: the self-check outcome.
+   *
+   * Its own line, so a running or failing check never shifts the picker or the
+   * buttons, and a long failure message gets the full width instead of being
+   * squeezed between two controls.
+   */
+  compactResultLine: {
+    display: "flex",
+    alignItems: "baseline",
+    flexWrap: "wrap",
+    gap: "6px",
+    paddingTop: "6px",
+    borderTop: "1px solid var(--dsw-alias-border-l1)",
+    fontSize: "11px",
+    color: "var(--dsw-alias-label-secondary)",
+    minWidth: "0",
+    wordBreak: "break-all"
   },
   compactRowActive: {
     borderColor: "var(--dsw-alias-state-success-primary)",
@@ -808,6 +1244,7 @@ function renderPage(ctx) {
       hits: {},
       problems: {},
       lastUse: {},
+      environmentProxy: null,
       error: void 0,
       pending: true
     };
@@ -818,6 +1255,7 @@ function renderPage(ctx) {
     hits: catalog.hits,
     problems: catalog.problems,
     lastUse: catalog.lastUse,
+    environmentProxy: catalog.environmentProxy ?? null,
     error: catalog.error,
     pending: false
   });
@@ -854,6 +1292,24 @@ function renderPage(ctx) {
   const [defaultDraft, setDefaultDraft] = (React.useState ?? ((v) => [v, () => {
   }]))({});
   const editDefault = (field2, value) => setDefaultDraft((current) => ({ ...current, [field2]: value }));
+  const [profileDraft, setProfileDraft] = (React.useState ?? ((v) => [v, () => {
+  }]))({});
+  const editProfile = (name, field2, value) => setProfileDraft((current) => ({
+    ...current,
+    [name]: { ...current[name], [field2]: value }
+  }));
+  const [newProfileName, setNewProfileName] = (React.useState ?? ((v) => [v, () => {
+  }]))("");
+  const [renamingProfile, setRenamingProfile] = (React.useState ?? ((v) => [v, () => {
+  }]))(
+    void 0
+  );
+  const [renameDraft, setRenameDraft] = (React.useState ?? ((v) => [v, () => {
+  }]))("");
+  const [profileManagerOpen, setProfileManagerOpen] = (React.useState ?? ((v) => [v, () => {
+  }]))(
+    false
+  );
   const [passwordVisible, setPasswordVisible] = (React.useState ?? ((v) => [v, () => {
   }]))({});
   const [defaultPasswordVisible, setDefaultPasswordVisible] = (React.useState ?? ((v) => [v, () => {
@@ -921,9 +1377,13 @@ function renderPage(ctx) {
   const [filter, setFilter] = (React.useState ?? ((v) => [v, () => {
   }]))("");
   const [statusFilter, setStatusFilter] = (React.useState ?? ((v) => [v, () => {
-  }]))("all");
+  }]))(
+    () => readViewPrefs().statusFilter ?? "all"
+  );
   const [viewMode, setViewMode] = (React.useState ?? ((v) => [v, () => {
-  }]))("card");
+  }]))(
+    () => readViewPrefs().viewMode ?? "card"
+  );
   const [expandedCards, setExpandedCards] = (React.useState ?? ((v) => [v, () => {
   }]))({});
   const [batchProgress, setBatchProgress] = (React.useState ?? ((v) => [v, () => {
@@ -1211,6 +1671,50 @@ function renderPage(ctx) {
     event.preventDefault?.();
     apply2(parts);
   };
+  const quickImportSelect = (key, apply2) => {
+    const detected = state.environmentProxy ?? null;
+    const select = h(
+      "select",
+      {
+        className: import_client.default.input,
+        style: { ...S.input, flex: "none", width: "auto" },
+        key: `${key}:select`,
+        value: "",
+        "aria-label": t.quickImport,
+        onChange: (event) => {
+          const value = String(event.target.value ?? "");
+          if (value.length === 0) return;
+          if (value === "environment") {
+            if (detected === null) return;
+            apply2({
+              protocol: detected.protocol,
+              host: detected.host,
+              port: detected.port
+            });
+            return;
+          }
+          const preset = proxyClientPreset(value);
+          if (preset === void 0) return;
+          apply2({ protocol: preset.protocol, host: preset.host, port: preset.port });
+        }
+      },
+      h("option", { key: "none", value: "" }, t.quickImport),
+      ...PROXY_CLIENT_PRESETS.map(
+        (preset) => h("option", { key: preset.id, value: preset.id }, preset.label)
+      ),
+      h(
+        "option",
+        { key: "environment", value: "environment", disabled: detected === null },
+        detected === null ? t.quickImportEnvNone : `${t.quickImportEnv}${detected.source}`
+      )
+    );
+    return h(
+      "div",
+      { key, style: { display: "flex", flexDirection: "column", gap: "2px", minWidth: "0" } },
+      select,
+      detected !== null && detected.hadCredentials ? h("span", { style: { ...S.hint, gridColumn: "auto" } }, t.quickImportEnvCredentials) : null
+    );
+  };
   const field = (label, control, hint, hintError, fullWidth) => h(
     "label",
     {
@@ -1238,12 +1742,206 @@ function renderPage(ctx) {
       hint
     )
   );
+  const panel = (options) => h(
+    "details",
+    {
+      className: `${import_client.default.diag} ${import_client.default.panel}`,
+      style: S.diag,
+      key: options.key,
+      ...options.open === void 0 ? {} : { open: options.open },
+      ...options.onToggle === void 0 ? {} : {
+        onToggle: (event) => {
+          const open = event?.currentTarget?.open;
+          if (typeof open === "boolean") options.onToggle?.(open);
+        }
+      }
+    },
+    h("summary", { className: import_client.default.diagSummary }, options.summary),
+    h(
+      "div",
+      { style: S.panelBody },
+      options.lead === void 0 ? null : h("p", { className: import_client.default.defaultLead, style: S.defaultLead }, options.lead),
+      ...options.children
+    )
+  );
   const storedDefault = snapshot.value?.defaultProxy ?? {};
   const defaultView = view({ ...storedDefault, ...defaultDraft });
   const defaultWhy = defaultProxyProblem(defaultView);
   const defaultHostWhy = defaultView.host.trim().length === 0 ? void 0 : proxyHostProblem(defaultView.host);
   const defaultComplete = defaultWhy === void 0;
   const defaultOrigin = `${defaultView.protocol}://${defaultView.host}:${defaultView.port}`;
+  const cardEndpoint = (route) => {
+    const binding = routeBindingOf(route);
+    if (binding.kind === "profile") {
+      const endpoint = profileValueOf(binding.profileId);
+      if (endpoint === void 0) return { binding, missingProfile: binding.profileId, complete: false };
+      const why = defaultProxyProblem(endpoint);
+      return { binding, endpoint, why, complete: why === void 0 };
+    }
+    if (binding.kind === "default") {
+      return { binding, endpoint: defaultView, why: defaultWhy, complete: defaultComplete };
+    }
+    const complete = route.host.trim().length > 0 && Number.isInteger(route.port) && route.port >= 1 && route.port <= 65535;
+    return { binding, why: defaultProxyProblem(route), complete };
+  };
+  const cardProblemText = (state2) => {
+    if (state2.missingProfile !== void 0) {
+      return `${t.profileMissing}${state2.missingProfile}${t.profileMissingSuffix}`;
+    }
+    if (state2.why === void 0) return void 0;
+    if (state2.binding.kind === "profile") {
+      return `${t.profileUnusable}${state2.binding.profileId}${t.profileUnusableSuffix}${state2.why}`;
+    }
+    if (state2.binding.kind === "default") return `${t.defaultMissing}${state2.why}`;
+    return state2.why;
+  };
+  const storedProfiles = snapshot.value?.proxyProfiles ?? {};
+  const profileEntries = profileNames({ ...storedProfiles, ...profileDraft }).map((name) => ({
+    name,
+    value: profileView({ ...storedProfiles[name], ...profileDraft[name] })
+  }));
+  const profileValueOf = (name) => {
+    if (storedProfiles[name] === void 0 && profileDraft[name] === void 0) return void 0;
+    return profileView({ ...storedProfiles[name], ...profileDraft[name] });
+  };
+  const writeProfiles = (key, next, label, onRefused) => {
+    const full = {};
+    for (const [name, value] of Object.entries(next)) full[name] = profileView(value);
+    saveMany(key, [{ op: "set", path: ["proxyProfiles"], value: full }], label, onRefused);
+  };
+  const addProfile = () => {
+    const name = String(newProfileName ?? "").trim();
+    const problem = profileNameProblem(name);
+    if (problem !== void 0) {
+      setSavedNote(void 0);
+      setSaveError({ label: t.profileNameLabel, message: problem });
+      return;
+    }
+    if (storedProfiles[name] !== void 0 || profileDraft[name] !== void 0) {
+      setSavedNote(void 0);
+      setSaveError({ label: t.profileNameLabel, message: t.profileNameTaken });
+      return;
+    }
+    const next = { ...storedProfiles, ...profileDraft };
+    next[name] = profileView({});
+    setNewProfileName("");
+    setProfileDraft((current) => ({ ...current, [name]: profileView({}) }));
+    setProfileManagerOpen(true);
+    writeProfiles(`\0profile\0add`, next, `${t.profileNameLabel} ${name}`, () => {
+      setProfileDraft((current) => {
+        if (current[name] === void 0) return current;
+        const nextDraft = { ...current };
+        delete nextDraft[name];
+        return nextDraft;
+      });
+    });
+  };
+  const renameProfile = (from) => {
+    const to = String(renameDraft ?? "").trim();
+    setRenamingProfile(void 0);
+    setRenameDraft("");
+    if (to === from) return;
+    const problem = profileNameProblem(to);
+    if (problem !== void 0) {
+      setSavedNote(void 0);
+      setSaveError({ label: t.profileNameLabel, message: problem });
+      return;
+    }
+    if (storedProfiles[to] !== void 0 || profileDraft[to] !== void 0) {
+      setSavedNote(void 0);
+      setSaveError({ label: t.profileNameLabel, message: t.profileNameTaken });
+      return;
+    }
+    const source = profileValueOf(from) ?? profileView({});
+    const next = { ...storedProfiles, ...profileDraft };
+    delete next[from];
+    next[to] = source;
+    const bound = routesBoundTo({ ...configured, ...draft }, from);
+    setProfileDraft((current) => {
+      const nextDraft = { ...current };
+      delete nextDraft[from];
+      nextDraft[to] = source;
+      return nextDraft;
+    });
+    if (bound.length > 0) {
+      setDraft((current) => {
+        const nextDraft = { ...current };
+        for (const id of bound) nextDraft[id] = { ...nextDraft[id], profileId: to };
+        return nextDraft;
+      });
+    }
+    invalidateTests(bound);
+    saveMany(
+      "\0profile\0rename",
+      [
+        { op: "set", path: ["proxyProfiles"], value: next },
+        ...bound.map((id) => ({ op: "set", path: ["providers", id, "profileId"], value: to }))
+      ],
+      `${t.profileNameLabel} ${from} \u2192 ${to}`,
+      () => void 0
+    );
+  };
+  const deleteProfile = (name) => {
+    const bound = routesBoundTo({ ...configured, ...draft }, name);
+    if (globalThis.window?.confirm?.(
+      bound.length === 0 ? t.profileDeleteConfirm : `${t.profileDeleteInUse}${bound.join("\u3001")}
+
+${t.profileDeleteConfirm}`
+    ) !== true) {
+      return;
+    }
+    const next = { ...storedProfiles, ...profileDraft };
+    delete next[name];
+    setProfileDraft((current) => {
+      const nextDraft = { ...current };
+      delete nextDraft[name];
+      return nextDraft;
+    });
+    invalidateTests(bound);
+    writeProfiles(`\0profile\0delete`, next, `${t.profileNameLabel} ${name}`, () => void 0);
+  };
+  const bindProfile = (name, field2) => (value) => {
+    editProfile(name, field2, value);
+    invalidateTests(routesBoundTo({ ...configured, ...draft }, name));
+    save(
+      `\0profile\0${name}\0${field2}`,
+      ["proxyProfiles", name, field2],
+      `${name}.${field2}`,
+      value,
+      () => {
+        setProfileDraft((current) => {
+          const entry = current[name];
+          if (entry === void 0 || entry[field2] === void 0) return current;
+          const nextEntry = { ...entry };
+          delete nextEntry[field2];
+          const nextDraft = { ...current };
+          if (Object.keys(nextEntry).length === 0) delete nextDraft[name];
+          else nextDraft[name] = nextEntry;
+          return nextDraft;
+        });
+      }
+    );
+  };
+  const bindRouteProfile = (id) => (value) => {
+    const fields = bindingFields(
+      value === DEFAULT_PROFILE_BINDING ? { kind: "default" } : value.length === 0 ? { kind: "own" } : { kind: "profile", profileId: value }
+    );
+    edit(id, "profileId", fields.profileId);
+    edit(id, "useDefault", fields.useDefault);
+    invalidateTests([id]);
+    saveMany(
+      `${id}\0*profile`,
+      [
+        { op: "set", path: ["providers", id, "profileId"], value: fields.profileId },
+        { op: "set", path: ["providers", id, "useDefault"], value: fields.useDefault }
+      ],
+      `${id}.profileId`,
+      () => {
+        rollbackRouteField(id, "profileId");
+        rollbackRouteField(id, "useDefault");
+      }
+    );
+  };
   const defaultBlock = h(
     "div",
     { className: import_client.default.defaultCard, style: S.defaultCard, key: "default-proxy" },
@@ -1265,6 +1963,11 @@ function renderPage(ctx) {
       )
     ),
     h("p", { className: import_client.default.defaultLead, style: S.defaultLead }, t.defaultLead),
+    h(
+      "div",
+      { style: S.testRow, key: "default:quick-import" },
+      quickImportSelect("default:quick-import", applyDefaultUrl)
+    ),
     h(
       "div",
       { className: import_client.default.formGrid, style: S.formGrid, key: "default:form-grid" },
@@ -1278,7 +1981,7 @@ function renderPage(ctx) {
             value: defaultView.protocol,
             onChange: (event) => bindDefault("protocol")(event.target.value)
           },
-          ...PROTOCOLS.map(
+          ...PROTOCOLS2.map(
             (protocol) => h("option", { key: protocol, value: protocol }, protocol.toUpperCase())
           )
         )
@@ -1363,79 +2066,446 @@ function renderPage(ctx) {
     )
   );
   const storedTestUrl = typeof snapshot.value?.testUrl === "string" ? snapshot.value.testUrl : DEFAULT_TEST_URL;
+  const profileManager = panel({
+    key: "profile-manager",
+    summary: `${t.profileManagerTitle} (${profileEntries.length})`,
+    lead: t.profileManagerLead,
+    open: profileManagerOpen === true,
+    onToggle: (open) => setProfileManagerOpen(open),
+    children: [
+      h(
+        "div",
+        { style: { ...S.testRow, alignItems: "stretch" }, key: "profile:add" },
+        h("input", {
+          className: import_client.default.input,
+          style: { ...S.input, flex: "1 1 160px", minWidth: "0" },
+          placeholder: t.profileNamePlaceholder,
+          value: newProfileName,
+          "aria-label": t.profileNameLabel,
+          onChange: (event) => setNewProfileName(event.target.value),
+          // Enter is the obvious gesture in a one-field form; without it the user
+          // has to reach for the button after typing, which is the same dead end
+          // the native prompt left them in.
+          onKeyDown: (event) => {
+            if (event?.key !== "Enter") return;
+            event.preventDefault?.();
+            addProfile();
+          }
+        }),
+        h(
+          "button",
+          {
+            className: import_client.default.testButton,
+            style: { ...S.testButton, flex: "none" },
+            type: "button",
+            onClick: addProfile
+          },
+          t.profileAdd
+        )
+      ),
+      // The built-in preset is EDITED in the default block above (one source of
+      // truth); here it is only listed, so the picker's options and this list
+      // agree.
+      h(
+        "div",
+        { key: "profile:builtin", style: S.inheritNote },
+        `${DEFAULT_PROFILE_LABEL} \u2014 ${endpointSummary(defaultView)}`
+      ),
+      ...profileEntries.map((entry) => {
+        const bound = routesBoundTo({ ...configured, ...draft }, entry.name);
+        const why = defaultProxyProblem(entry.value);
+        return h(
+          "div",
+          {
+            key: `profile:${entry.name}`,
+            className: import_client.default.profileCard,
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "8px",
+              padding: "12px 14px",
+              border: "1px solid var(--dsw-alias-border-l1)",
+              borderRadius: "10px",
+              background: "var(--dsw-alias-bg-layer-1)"
+            }
+          },
+          h(
+            "div",
+            { style: S.head },
+            h(
+              "div",
+              { style: S.titles },
+              h("span", { style: S.name }, entry.name),
+              h(
+                "span",
+                {
+                  className: why === void 0 ? import_client.default.pillOn : import_client.default.pillOff,
+                  style: { ...S.pill, ...why === void 0 ? S.pillOn : S.pillOff }
+                },
+                why === void 0 ? t.complete : t.notConfigured
+              )
+            ),
+            h(
+              "div",
+              { style: { display: "flex", gap: "6px", flex: "none" } },
+              h(
+                "button",
+                {
+                  className: import_client.default.testButton,
+                  style: { ...S.testButton, padding: "3px 8px", fontSize: "11px" },
+                  type: "button",
+                  onClick: () => {
+                    setRenamingProfile(entry.name);
+                    setRenameDraft(entry.name);
+                  }
+                },
+                t.profileRename
+              ),
+              h(
+                "button",
+                {
+                  className: import_client.default.testButton,
+                  style: { ...S.testButton, padding: "3px 8px", fontSize: "11px" },
+                  type: "button",
+                  onClick: () => deleteProfile(entry.name)
+                },
+                t.profileDelete
+              )
+            )
+          ),
+          // The rename field, shown in place of the row title's edit gesture.
+          // Inline rather than a modal, for the same reason the add field is
+          // inline: the Desktop build has no `window.prompt`.
+          renamingProfile !== entry.name ? null : h(
+            "div",
+            { style: { ...S.testRow, alignItems: "stretch" }, key: `profile:${entry.name}:rename` },
+            h("input", {
+              className: import_client.default.input,
+              style: { ...S.input, flex: "1 1 160px", minWidth: "0" },
+              value: renameDraft,
+              placeholder: t.profileRenamePrompt,
+              "aria-label": t.profileRenamePrompt,
+              autoFocus: true,
+              onChange: (event) => setRenameDraft(event.target.value),
+              onKeyDown: (event) => {
+                if (event?.key === "Escape") {
+                  setRenamingProfile(void 0);
+                  setRenameDraft("");
+                  return;
+                }
+                if (event?.key !== "Enter") return;
+                event.preventDefault?.();
+                renameProfile(entry.name);
+              }
+            }),
+            h(
+              "button",
+              {
+                className: import_client.default.testButton,
+                style: { ...S.testButton, flex: "none" },
+                type: "button",
+                onClick: () => renameProfile(entry.name)
+              },
+              t.profileRenameConfirm
+            ),
+            h(
+              "button",
+              {
+                className: import_client.default.testButton,
+                style: { ...S.testButton, flex: "none" },
+                type: "button",
+                onClick: () => {
+                  setRenamingProfile(void 0);
+                  setRenameDraft("");
+                }
+              },
+              t.cancel
+            )
+          ),
+          bound.length === 0 ? null : h("p", { style: S.inheritNote }, `${t.profileUsedBy}${bound.join("\u3001")}`),
+          h(
+            "div",
+            { style: S.testRow },
+            quickImportSelect(`profile:${entry.name}:quick-import`, (parts) => {
+              setProfileDraft((current) => ({
+                ...current,
+                [entry.name]: { ...current[entry.name], ...parts }
+              }));
+              invalidateTests(bound);
+              saveMany(
+                `\0profile\0${entry.name}\0*quick`,
+                Object.keys(parts).map((field2) => ({
+                  op: "set",
+                  path: ["proxyProfiles", entry.name, field2],
+                  value: parts[field2]
+                })),
+                `${entry.name}\uFF08\u5FEB\u6377\u5BFC\u5165\uFF09`,
+                () => {
+                  setProfileDraft((current) => {
+                    const value = current[entry.name];
+                    if (value === void 0) return current;
+                    const nextValue = { ...value };
+                    for (const field2 of Object.keys(parts)) delete nextValue[field2];
+                    const next = { ...current };
+                    if (Object.keys(nextValue).length === 0) delete next[entry.name];
+                    else next[entry.name] = nextValue;
+                    return next;
+                  });
+                }
+              );
+            })
+          ),
+          h(
+            "div",
+            { className: import_client.default.formGrid, style: S.formGrid },
+            field(
+              t.protocol,
+              h(
+                "select",
+                {
+                  className: import_client.default.input,
+                  style: S.input,
+                  value: entry.value.protocol,
+                  onChange: (event) => bindProfile(entry.name, "protocol")(event.target.value)
+                },
+                ...PROTOCOLS2.map(
+                  (protocol) => h("option", { key: protocol, value: protocol }, protocol.toUpperCase())
+                )
+              ),
+              void 0
+            ),
+            field(
+              t.host,
+              h("input", {
+                className: import_client.default.input,
+                style: S.input,
+                placeholder: "127.0.0.1",
+                value: entry.value.host,
+                onChange: (event) => bindProfile(entry.name, "host")(event.target.value)
+              }),
+              entry.value.host.trim().length === 0 ? void 0 : proxyHostProblem(entry.value.host),
+              entry.value.host.trim().length > 0 && proxyHostProblem(entry.value.host) !== void 0
+            ),
+            field(
+              t.port,
+              h("input", {
+                className: import_client.default.input,
+                style: S.input,
+                type: "number",
+                min: 1,
+                max: 65535,
+                placeholder: "7891",
+                value: entry.value.port === 0 ? "" : String(entry.value.port),
+                onChange: (event) => {
+                  const parsed = Number.parseInt(event.target.value, 10);
+                  bindProfile(entry.name, "port")(Number.isNaN(parsed) ? 0 : parsed);
+                }
+              }),
+              void 0
+            ),
+            field(
+              t.username,
+              h("input", {
+                className: import_client.default.input,
+                style: S.input,
+                autoComplete: "off",
+                value: entry.value.username,
+                onChange: (event) => bindProfile(entry.name, "username")(event.target.value)
+              }),
+              void 0
+            ),
+            field(
+              t.password,
+              h(
+                "div",
+                { style: S.passwordControl },
+                h("input", {
+                  className: import_client.default.input,
+                  style: { ...S.input, paddingRight: "36px" },
+                  type: "password",
+                  autoComplete: "off",
+                  value: entry.value.password,
+                  onChange: (event) => bindProfile(entry.name, "password")(event.target.value)
+                })
+              ),
+              t.passwordHintProxy,
+              false,
+              true
+            )
+          )
+        );
+      })
+    ]
+  });
   const storedLocalDirect = snapshot.value?.localDirect !== false;
   const globalTestUrl = typeof globalDraft.testUrl === "string" ? globalDraft.testUrl : storedTestUrl;
   const globalLocalDirect = typeof globalDraft.localDirect === "boolean" ? globalDraft.localDirect : storedLocalDirect;
   const globalTestUrlHint = testUrlHint(globalTestUrl, t);
-  const globalBlock = h(
-    "details",
-    {
-      className: import_client.default.diag,
-      style: {
-        ...S.diag,
-        marginTop: "0"
+  const exportBackup = () => {
+    const includePasswords = globalThis.window?.confirm?.(t.backupIncludePasswords) === true;
+    const document2 = buildBackup(
+      {
+        providers: { ...configured, ...draft },
+        proxyProfiles: { ...storedProfiles, ...profileDraft },
+        defaultProxy: { ...storedDefault, ...defaultDraft },
+        localDirect: globalLocalDirect,
+        testUrl: globalTestUrl
       },
-      key: "global-settings"
-    },
-    h("summary", { className: import_client.default.diagSummary }, t.globalTitle),
-    h("p", { className: import_client.default.defaultLead, style: S.defaultLead }, t.globalLead),
+      { includePasswords }
+    );
+    try {
+      const text = JSON.stringify(document2, null, 2);
+      const blob = new globalThis.Blob([text], { type: "application/json" });
+      const url = globalThis.URL.createObjectURL(blob);
+      const anchor = globalThis.document.createElement("a");
+      anchor.href = url;
+      anchor.download = backupFileName();
+      anchor.click();
+      globalThis.setTimeout(() => globalThis.URL.revokeObjectURL(url), 0);
+      setSavedNote(`${t.backupExported}${includePasswords ? t.backupWithPasswords : t.backupWithoutPasswords}`);
+    } catch (error) {
+      setSavedNote(void 0);
+      setSaveError({ label: t.backupExport, message: String(error?.message ?? error) });
+    }
+  };
+  const importBackupFile = async (file) => {
+    let text;
+    try {
+      text = await file.text();
+    } catch (error) {
+      setSaveError({ label: t.backupImport, message: String(error?.message ?? error) });
+      return;
+    }
+    const parsed = parseBackup(text);
+    if (!parsed.ok) {
+      setSavedNote(void 0);
+      setSaveError({ label: t.backupImport, message: parsed.error });
+      return;
+    }
+    const counts = backupCounts(parsed.document);
+    const confirmed = globalThis.window?.confirm?.(
+      `${t.backupConfirm}${counts.providers}${t.backupConfirmProviders}${counts.profiles}${t.backupConfirmProfiles}`
+    );
+    if (confirmed !== true) return;
+    try {
+      await enqueueWrite(() => writeConfig(ctx, backupOps(parsed.document)));
+      setSaveError(void 0);
+      setSavedNote(`${t.backupRestored}${counts.providers}`);
+      setDraft({});
+      setDefaultDraft({});
+      setProfileDraft({});
+      setGlobalDraft({});
+    } catch (error) {
+      setSavedNote(void 0);
+      setSaveError({ label: t.backupImport, message: String(error?.message ?? error) });
+    }
+  };
+  const backupBlock = h(
+    "div",
+    { style: S.backupBar, key: "backup" },
     h(
-      "label",
-      { className: import_client.default.field, style: S.field },
-      h("span", { className: import_client.default.label, style: S.label }, t.testUrl),
-      h("input", {
-        className: import_client.default.input,
-        style: S.input,
-        value: globalTestUrl,
-        onChange: (event) => bindGlobal("testUrl")(event.target.value)
-      }),
-      globalTestUrlHint === void 0 ? h("span", { className: import_client.default.hint, style: S.hint }, t.testUrlHint) : h(
-        "span",
-        {
-          className: import_client.default.hint,
-          style: {
-            ...S.hint,
-            color: "var(--dsw-alias-state-error-primary, #f85149)"
-          }
-        },
-        globalTestUrlHint
-      )
+      "div",
+      { style: { display: "flex", flexDirection: "column", gap: "2px", minWidth: "0" } },
+      h("span", { style: { ...S.name, fontSize: "12px" } }, t.backupTitle),
+      h("span", { style: S.defaultLead }, t.backupLead)
     ),
     h(
       "div",
-      { style: S.testRow },
+      { style: { ...S.testRow, flex: "none" } },
       h(
         "button",
         {
           className: import_client.default.testButton,
           style: S.testButton,
           type: "button",
-          onClick: () => bindGlobal("testUrl")(DEFAULT_TEST_URL)
+          onClick: exportBackup
+        },
+        t.backupExport
+      ),
+      h(
+        "label",
+        {
+          className: import_client.default.testButton,
+          style: { ...S.testButton, display: "inline-flex", alignItems: "center" },
+          key: "backup:import"
         },
-        t.restoreDefaultTestUrl
+        t.backupImport,
+        h("input", {
+          type: "file",
+          accept: "application/json,.json",
+          style: { display: "none" },
+          onChange: (event) => {
+            const file = event?.target?.files?.[0];
+            if (file !== void 0) void importBackupFile(file);
+            if (event?.target !== void 0) event.target.value = "";
+          }
+        })
       )
-    ),
-    h(
-      "label",
-      { className: import_client.default.toggle, style: S.toggle },
-      h("input", {
-        type: "checkbox",
-        checked: globalLocalDirect,
-        onChange: (event) => bindGlobal("localDirect")(event.target.checked === true)
-      }),
-      h("span", null, t.localDirect)
-    ),
-    h(
-      "p",
-      { className: import_client.default.hint, style: { ...S.hint, margin: "2px 0 0" } },
-      globalLocalDirect ? t.localDirectOnHint : t.localDirectOffHint
     )
   );
+  const globalBlock = panel({
+    key: "global-settings",
+    summary: t.globalTitle,
+    lead: t.globalLead,
+    children: [
+      h(
+        "label",
+        { className: import_client.default.field, style: S.field },
+        h("span", { className: import_client.default.label, style: S.label }, t.testUrl),
+        h("input", {
+          className: import_client.default.input,
+          style: S.input,
+          value: globalTestUrl,
+          onChange: (event) => bindGlobal("testUrl")(event.target.value)
+        }),
+        globalTestUrlHint === void 0 ? h("span", { className: import_client.default.hint, style: S.hint }, t.testUrlHint) : h(
+          "span",
+          {
+            className: import_client.default.hint,
+            style: {
+              ...S.hint,
+              color: "var(--dsw-alias-state-error-primary, #f85149)"
+            }
+          },
+          globalTestUrlHint
+        )
+      ),
+      h(
+        "div",
+        { style: S.testRow },
+        h(
+          "button",
+          {
+            className: import_client.default.testButton,
+            style: S.testButton,
+            type: "button",
+            onClick: () => bindGlobal("testUrl")(DEFAULT_TEST_URL)
+          },
+          t.restoreDefaultTestUrl
+        )
+      ),
+      h(
+        "label",
+        { className: import_client.default.toggle, style: S.toggle },
+        h("input", {
+          type: "checkbox",
+          checked: globalLocalDirect,
+          onChange: (event) => bindGlobal("localDirect")(event.target.checked === true)
+        }),
+        h("span", null, t.localDirect)
+      ),
+      h(
+        "p",
+        { className: import_client.default.hint, style: { ...S.hint, margin: "2px 0 0" } },
+        globalLocalDirect ? t.localDirectOnHint : t.localDirectOffHint
+      )
+    ]
+  });
   const routeStateOf = (row) => {
     const route = view({ ...configured[row.id], ...draft[row.id] });
     const recorded = problems[row.id];
-    const useDefault = route.useDefault === true;
-    const problemText = recorded !== void 0 ? recorded : useDefault ? defaultComplete ? void 0 : `${t.defaultMissing}${defaultWhy}` : route.enabled ? defaultProxyProblem(route) : void 0;
+    const state2 = cardEndpoint(route);
+    const problemText = recorded !== void 0 ? recorded : route.enabled ? cardProblemText(state2) : void 0;
     if (route.enabled && problemText !== void 0) return "rejected";
     if (route.enabled) return "proxied";
     return "direct";
@@ -1449,40 +2519,50 @@ function renderPage(ctx) {
     if (statusFilter === "all") return true;
     return routeStateOf(row) === statusFilter;
   });
-  const chipRow = rows.length === 0 ? null : h(
+  const listToolbar = rows.length === 0 ? null : h(
     "div",
-    { className: import_client.default.chipRow, style: S.chipRow, key: "status-chips" },
-    [
-      { id: "all", label: `${t.filterStatusAll} (${matchedKeywordRows.length})` },
-      { id: "proxied", label: `${t.filterStatusProxied} (${countActive})` },
-      { id: "direct", label: `${t.filterStatusDirect} (${countDirect})` },
-      { id: "rejected", label: `${t.filterStatusRejected} (${countRejected})` }
-    ].map(
-      ({ id, label }) => h(
-        "button",
-        {
-          key: id,
-          type: "button",
-          className: statusFilter === id ? import_client.default.chipActive : import_client.default.chip,
-          style: {
-            ...S.chip,
-            ...statusFilter === id ? S.chipActive : {}
+    { style: S.toolbar, key: "list-toolbar" },
+    h(
+      "div",
+      { className: import_client.default.chipRow, style: S.chipRow, key: "status-chips" },
+      [
+        { id: "all", label: `${t.filterStatusAll} (${matchedKeywordRows.length})` },
+        { id: "proxied", label: `${t.filterStatusProxied} (${countActive})` },
+        { id: "direct", label: `${t.filterStatusDirect} (${countDirect})` },
+        { id: "rejected", label: `${t.filterStatusRejected} (${countRejected})` }
+      ].map(
+        ({ id, label }) => h(
+          "button",
+          {
+            key: id,
+            type: "button",
+            className: statusFilter === id ? import_client.default.chipActive : import_client.default.chip,
+            style: {
+              ...S.chip,
+              ...statusFilter === id ? S.chipActive : {}
+            },
+            // Selection is a STATE, not a decoration: `aria-pressed`
+            // makes exactly one chip self-describing to assistive tech,
+            // and it is what the regression test reads instead of
+            // trusting a colour.
+            "aria-pressed": statusFilter === id,
+            onClick: () => {
+              setStatusFilter(id);
+              writeViewPrefs({ statusFilter: id });
+            }
           },
-          onClick: () => setStatusFilter(id)
-        },
-        label
+          label
+        )
       )
-    )
-  );
-  const filterRow = rows.length === 0 ? null : field(
-    t.filterLabel,
+    ),
     h(
       "div",
-      { style: { display: "flex", alignItems: "center", gap: "8px" } },
+      { className: import_client.default.toolbarRow, style: S.toolbarRow, key: "list-actions" },
       h("input", {
         className: import_client.default.input,
-        style: S.input,
+        style: { ...S.input, flex: "1 1 180px", minWidth: "0" },
         placeholder: t.filterPlaceholder,
+        "aria-label": t.filterLabel,
         value: filter,
         onChange: (event) => setFilter(event.target.value)
       }),
@@ -1503,7 +2583,11 @@ function renderPage(ctx) {
           className: import_client.default.testButton,
           style: { ...S.testButton, flex: "none", whiteSpace: "nowrap" },
           type: "button",
-          onClick: () => setViewMode((m) => m === "card" ? "compact" : "card")
+          onClick: () => setViewMode((m) => {
+            const next = m === "card" ? "compact" : "card";
+            writeViewPrefs({ viewMode: next });
+            return next;
+          })
         },
         viewMode === "card" ? t.viewCompact : t.viewCard
       )
@@ -1540,14 +2624,16 @@ function renderPage(ctx) {
     const result = tests[row.id];
     const onlyDead = deadRuleEntries(route.onlyHosts);
     const bypassDead = deadRuleEntries(route.bypassHosts);
+    const hostTemplate = providerHostTemplate(row.id);
     const useDefault = route.useDefault === true;
-    const endpointStored = route.useDefault ? defaultComplete : route.host.trim().length > 0 && Number.isInteger(route.port) && route.port >= 1 && route.port <= 65535;
+    const boundProfile = route.profileId.trim();
+    const endpointState = cardEndpoint(route);
+    const endpointStored = endpointState.complete;
     const showTest = route.enabled || endpointStored;
     const problemText = (() => {
       const recorded = problems[row.id];
       if (recorded !== void 0) return recorded;
-      if (useDefault) return defaultComplete ? void 0 : `${t.defaultMissing}${defaultWhy}`;
-      return route.enabled ? defaultProxyProblem(route) : void 0;
+      return route.enabled ? cardProblemText(endpointState) : void 0;
     })();
     const rejected = route.enabled && problemText !== void 0;
     const endpointFields = [
@@ -1561,7 +2647,7 @@ function renderPage(ctx) {
             value: route.protocol,
             onChange: (event) => bind(row.id, "protocol")(event.target.value)
           },
-          ...PROTOCOLS.map(
+          ...PROTOCOLS2.map(
             (protocol) => h("option", { key: protocol, value: protocol }, protocol.toUpperCase())
           )
         ),
@@ -1669,36 +2755,94 @@ function renderPage(ctx) {
         ),
         h("span", { className: pill.className, style: pill.style }, pill.text)
       ),
+      // The two route-level controls, on ONE row and in ONE shape: each is
+      // a label over its control. They were a bare `label` (checkbox) next to
+      // a two-column `field` (picker), so the card's own row looked like two
+      // unrelated widgets stacked.
       h(
-        "label",
-        { className: import_client.default.toggle, style: S.toggle },
-        h("input", {
-          type: "checkbox",
-          checked: route.enabled,
-          onChange: (event) => bind(row.id, "enabled")(event.target.checked === true)
-        }),
-        h("span", null, t.useProxy)
-      ),
-      // Opting into the shared endpoint. The card then shows the address it
-      // will actually use — or, when the default is not configured, why the
-      // route is refused — instead of a set of empty inputs the user never
-      // filled and cannot interpret.
-      h(
-        "label",
-        { className: import_client.default.toggle, style: S.toggle, key: `${row.id}:usedefault` },
-        h("input", {
-          type: "checkbox",
-          checked: useDefault,
-          onChange: (event) => bind(row.id, "useDefault")(event.target.checked === true)
-        }),
-        h("span", null, t.useDefault)
+        "div",
+        { className: import_client.default.controlRow, style: S.controlRow, key: `${row.id}:controls` },
+        h(
+          "label",
+          { style: S.controlCell },
+          h("span", { className: import_client.default.label, style: S.label }, t.enableLabel),
+          h(
+            "span",
+            { className: import_client.default.toggle, style: { ...S.toggle, paddingTop: "0" } },
+            h("input", {
+              type: "checkbox",
+              checked: route.enabled,
+              onChange: (event) => bind(row.id, "enabled")(event.target.checked === true)
+            }),
+            h("span", { style: { fontSize: "12px" } }, t.useProxy)
+          )
+        ),
+        // Which endpoint this card takes.
+        //
+        // Always a picker, never a checkbox: the decision has three possible
+        // shapes (own fields / the built-in default / a named preset), and a
+        // checkbox can only express the first two. Every option carries the
+        // address it will use, because "预设: 香港专线" alone does not tell a
+        // user which port it points at.
+        h(
+          "label",
+          { style: S.controlCell, key: `${row.id}:profile` },
+          h("span", { className: import_client.default.label, style: S.label }, t.profileBinding),
+          h(
+            "select",
+            {
+              className: import_client.default.input,
+              style: S.input,
+              value: boundProfile.length > 0 ? boundProfile : useDefault ? DEFAULT_PROFILE_BINDING : "",
+              onChange: (event) => {
+                const value = String(event.target.value);
+                bindRouteProfile(row.id)(value);
+              }
+            },
+            h("option", { key: "own", value: "" }, t.profileBindingOwn),
+            h(
+              "option",
+              { key: "default", value: DEFAULT_PROFILE_BINDING },
+              `${t.profileBindingPrefix}${DEFAULT_PROFILE_LABEL.replace(
+                " (Default)",
+                ""
+              )} (${endpointAddress(defaultView)})`
+            ),
+            ...profileEntries.map(
+              (entry) => h(
+                "option",
+                { key: entry.name, value: entry.name },
+                `${t.profileBindingPrefix}${entry.name} (${endpointAddress(entry.value)})`
+              )
+            ),
+            // A route may still point at a preset that was deleted while this
+            // page was open. Without an option for it the select would render
+            // blank, which reads as "no choice made".
+            boundProfile.length > 0 && !profileEntries.some((entry) => entry.name === boundProfile) ? h(
+              "option",
+              { key: `missing:${boundProfile}`, value: boundProfile },
+              `${t.profileBindingPrefix}${boundProfile}${t.profileMissingOption}`
+            ) : null
+          )
+        )
       ),
-      problemText !== void 0 ? h("p", { key: `${row.id}:problem`, style: S.inheritWarning }, problemText) : useDefault ? h(
+      problemText !== void 0 ? h("p", { key: `${row.id}:problem`, style: S.inheritWarning }, problemText) : boundProfile.length > 0 ? h(
+        "p",
+        { key: `${row.id}:profile-note`, style: S.inheritNote },
+        `${t.inheritingProfile}${boundProfile}\uFF1A${endpointSummary(endpointState.endpoint ?? {})}`
+      ) : useDefault ? h(
         "p",
         { key: `${row.id}:inherit`, style: S.inheritNote },
         `${t.inheritingDefault}${defaultOrigin}`
       ) : null,
-      ...useDefault ? [] : [h("div", { className: import_client.default.formGrid, style: S.formGrid, key: `${row.id}:form-grid` }, ...endpointFields)],
+      ...useDefault || boundProfile.length > 0 ? [] : [
+        h(
+          "div",
+          { style: S.testRow, key: `${row.id}:quick-import` },
+          quickImportSelect(`${row.id}:quick-import`, (parts) => applyCardUrl(row.id, parts))
+        ),
+        h("div", { className: import_client.default.formGrid, style: S.formGrid, key: `${row.id}:form-grid` }, ...endpointFields)
+      ],
       // The self-check is offered whenever there is something to check: an
       // enabled route (the Host's table carries it, and a rejected one still
       // reports WHY), or a disabled one whose endpoint is already complete —
@@ -1794,7 +2938,7 @@ function renderPage(ctx) {
         // Promote this card's endpoint to the shared default. Offered only
         // when the card carries its OWN endpoint: an inheriting card would
         // just be copying the default onto itself.
-        endpointStored && !useDefault ? h(
+        endpointStored && !useDefault && boundProfile.length === 0 ? h(
           "button",
           {
             className: import_client.default.testButton,
@@ -1822,6 +2966,26 @@ function renderPage(ctx) {
           onlyDead.length === 0 ? t.onlyHostsHint : `${t.ruleDeadHint}${onlyDead.join("\u3001")}`,
           onlyDead.length > 0
         ),
+        // The official-upstream pill. Offered only for a provider whose id
+        // maps to a known template: a button that guessed a hostname for an
+        // arbitrary relay would be worse than no button at all.
+        hostTemplate === void 0 ? null : h(
+          "div",
+          { style: S.chipRow, key: `${row.id}:host-template` },
+          h(
+            "button",
+            {
+              className: import_client.default.chip,
+              style: S.chip,
+              type: "button",
+              title: hostTemplate.hosts,
+              onClick: () => bind(row.id, "onlyHosts")(
+                appendHostRules(route.onlyHosts, hostTemplate.hosts)
+              )
+            },
+            `${t.loadHostTemplate}${hostTemplate.label}: ${hostTemplate.hosts}`
+          )
+        ),
         field(
           t.bypassHosts,
           h("input", {
@@ -1851,6 +3015,7 @@ function renderPage(ctx) {
       )
     );
     const isExpanded = expandedCards[row.id] === true;
+    const endpointText = endpointState.missingProfile !== void 0 ? `${t.profileBindingPrefix}${endpointState.missingProfile}${t.profileMissingOption}` : boundProfile.length > 0 ? `${t.profileBindingPrefix}${boundProfile}: ${endpointSummary(endpointState.endpoint ?? {})}` : useDefault ? `${t.useDefault}: ${defaultOrigin}` : `${route.protocol}://${route.host || "\u2014"}:${route.port || "\u2014"}`;
     const compactRowElement = h(
       "section",
       {
@@ -1858,22 +3023,83 @@ function renderPage(ctx) {
         style: rejected ? { ...S.compactRow, ...S.compactRowRejected } : route.enabled ? { ...S.compactRow, ...S.compactRowActive } : S.compactRow,
         key: `compact:${row.id}`
       },
+      // Row 1 — who this is and which proxy actually carries it. The
+      // endpoint shown is the RESOLVED one, so a preset-bound row never
+      // claims an address it will not use.
       h(
         "div",
-        { style: { display: "flex", alignItems: "center", gap: "8px", minWidth: "0" } },
-        h("input", {
-          type: "checkbox",
-          checked: route.enabled,
-          onChange: (event) => bind(row.id, "enabled")(event.target.checked === true)
-        }),
-        h("span", { className: import_client.default.name, style: { ...S.name, maxWidth: "140px" } }, row.name),
+        { style: S.compactLine, key: `compact:${row.id}:info` },
+        h("span", { className: import_client.default.name, style: { ...S.name, maxWidth: "160px" } }, row.name),
         h("span", { className: import_client.default.id, style: S.id }, row.id),
-        useDefault ? h("span", { style: S.compactEndpoint }, `${t.useDefault}: ${defaultOrigin}`) : h("span", { style: S.compactEndpoint }, `${route.protocol.toUpperCase()}://${route.host || "\u2014"}:${route.port || "\u2014"}`)
+        h(
+          "span",
+          {
+            style: {
+              ...S.compactEndpoint,
+              ...endpointState.missingProfile !== void 0 || endpointState.why !== void 0 ? { color: "var(--dsw-alias-state-error-primary, #f85149)" } : {}
+            },
+            title: endpointText
+          },
+          endpointText
+        ),
+        lastText === void 0 ? null : h(
+          "span",
+          {
+            style: {
+              ...S.compactEndpoint,
+              ...lastUse[row.id]?.ok === false ? S.inheritWarning : {}
+            }
+          },
+          lastText
+        )
       ),
+      // Row 2 — everything actionable, including the endpoint source. The
+      // source picker lives here rather than in row 1 because it is a
+      // CONTROL: putting it among the read-only facts made the row look
+      // uniform while one element was silently editable.
       h(
         "div",
-        { style: { display: "flex", alignItems: "center", gap: "8px", flex: "none" } },
-        result?.pending === true ? h("span", { style: { fontSize: "11px", color: "var(--dsw-alias-label-secondary)" } }, t.testRunning) : result?.ok === true ? h("span", { style: { fontSize: "11px", color: latencyColor(result.ms), fontWeight: "500" } }, `\u2713 ${result.ms ?? "\u2014"} ms`) : result?.ok === false ? h("span", { style: { fontSize: "11px", color: "var(--dsw-alias-state-error-primary, #f85149)", fontWeight: "500" } }, `\u2717 ${result.error}`) : lastText !== void 0 ? h("span", { style: { fontSize: "11px", color: "var(--dsw-alias-label-secondary)" } }, lastText) : null,
+        { style: S.compactActions, key: `compact:${row.id}:actions` },
+        h(
+          "label",
+          {
+            style: { display: "inline-flex", alignItems: "center", gap: "6px", flex: "none" }
+          },
+          h("input", {
+            type: "checkbox",
+            checked: route.enabled,
+            onChange: (event) => bind(row.id, "enabled")(event.target.checked === true)
+          }),
+          h("span", { style: { fontSize: "11px", color: "var(--dsw-alias-label-secondary)" } }, t.useProxy)
+        ),
+        h(
+          "select",
+          {
+            className: import_client.default.input,
+            style: { ...S.input, flex: "0 1 190px", minWidth: "120px", padding: "3px 6px" },
+            "aria-label": t.profileBinding,
+            value: boundProfile.length > 0 ? boundProfile : useDefault ? DEFAULT_PROFILE_BINDING : "",
+            onChange: (event) => bindRouteProfile(row.id)(String(event.target.value))
+          },
+          h("option", { key: "own", value: "" }, t.profileBindingOwn),
+          h(
+            "option",
+            { key: "default", value: DEFAULT_PROFILE_BINDING },
+            `${t.profileBindingPrefix}${DEFAULT_PROFILE_LABEL.replace(" (Default)", "")} (${endpointAddress(defaultView)})`
+          ),
+          ...profileEntries.map(
+            (entry) => h(
+              "option",
+              { key: entry.name, value: entry.name },
+              `${t.profileBindingPrefix}${entry.name} (${endpointAddress(entry.value)})`
+            )
+          ),
+          boundProfile.length > 0 && !profileEntries.some((entry) => entry.name === boundProfile) ? h(
+            "option",
+            { key: `missing:${boundProfile}`, value: boundProfile },
+            `${t.profileBindingPrefix}${boundProfile}${t.profileMissingOption}`
+          ) : null
+        ),
         h("span", { className: pill.className, style: pill.style }, pill.text),
         showTest ? h(
           "button",
@@ -1896,6 +3122,44 @@ function renderPage(ctx) {
           },
           isExpanded ? t.collapseDetails : t.expandDetails
         )
+      ),
+      // Row 3 — the self-check outcome, on its OWN line.
+      //
+      // Kept out of the control line so a running or failing check can never
+      // shift the picker or the buttons under the cursor, and so a long
+      // failure message has the full width instead of being squeezed
+      // between two controls. It appears only when there is something to
+      // report: an always-present empty row is just extra height.
+      result === void 0 || result.ok === void 0 ? null : h(
+        "div",
+        { style: S.compactResultLine, key: `compact:${row.id}:result` },
+        result.pending === true ? h("span", { style: { color: "var(--dsw-alias-label-secondary)" } }, t.testRunning) : result.ok === true ? [
+          h(
+            "span",
+            { key: "lat", style: { color: latencyColor(result.ms), fontWeight: "500" } },
+            `\u2713 ${result.ms ?? "\u2014"} ms`
+          ),
+          typeof result.status === "number" ? h("span", { key: "status" }, `HTTP ${result.status}`) : null,
+          result.ip === void 0 ? null : h(
+            "span",
+            { key: "ip", style: { display: "inline-flex", alignItems: "center", gap: "3px" } },
+            `${t.exitIpLabel}${result.ip}`,
+            copyButton(`${row.id}:compact:ip`, String(result.ip), t.copy)
+          ),
+          result.direct === true ? h("span", { key: "direct" }, t.directLabel) : null,
+          result.cached === true ? h("span", { key: "cached" }, t.cachedLabel) : null
+        ] : [
+          h(
+            "span",
+            {
+              key: "err",
+              style: { ...S.testFailure, display: "inline-flex", alignItems: "center", gap: "3px" }
+            },
+            `\u2717 ${result.error}`,
+            copyButton(`${row.id}:compact:err`, String(result.error), t.copy)
+          ),
+          typeof result.status === "number" ? h("span", { key: "status" }, `HTTP ${result.status}`) : null
+        ]
       )
     );
     if (viewMode === "compact") {
@@ -1939,45 +3203,42 @@ function renderPage(ctx) {
         t.close
       )
     ),
-    defaultBlock,
-    globalBlock,
-    catalogueNotice,
-    chipRow,
-    filterRow,
-    ...body,
+    // Page-level settings, as one group: they apply to the whole page, not to
+    // one provider.
     h(
-      "details",
-      {
-        className: import_client.default.diag,
-        key: "diag",
-        style: {
-          marginTop: "4px",
-          padding: "8px 10px",
-          border: "1px solid var(--dsw-alias-border-l1)",
-          borderRadius: "8px",
-          fontSize: "11px",
-          color: "var(--dsw-alias-label-secondary)"
-        }
-      },
-      // The count is the only visible signal while the panel is collapsed: a
-      // rejected route is not a page that refuses to render, it is one that
-      // quietly does nothing.
-      h(
-        "summary",
-        { className: import_client.default.diagSummary },
-        problemCount === 0 ? t.diagnostics : `${t.diagnostics} (${problemCount})`
-      ),
-      h(
-        "ul",
-        { className: import_client.default.diagList, style: { margin: "6px 0 0", paddingLeft: "18px" } },
-        ...problemCount === 0 && diagnostics.length === 0 && savedNote === void 0 ? [h("li", { key: "none" }, t.diagPending)] : [
-          ...problemLines,
-          ...catalogueMismatchLine === void 0 ? [] : [catalogueMismatchLine],
-          ...savedNote === void 0 ? [] : [h("li", { key: "saved" }, savedNote)],
-          ...diagnostics.map((line, index) => h("li", { key: `d${index}` }, line))
-        ]
-      )
-    )
+      "div",
+      { style: S.group, key: "page-settings" },
+      h("h3", { style: S.groupTitle }, t.sectionSettings),
+      defaultBlock,
+      profileManager,
+      globalBlock,
+      backupBlock
+    ),
+    // The provider list, as its own group: heading, toolbar, then the cards.
+    h(
+      "div",
+      { style: S.group, key: "provider-list" },
+      h("h3", { style: S.groupTitle }, t.sectionProviders),
+      catalogueNotice,
+      listToolbar,
+      ...body
+    ),
+    panel({
+      key: "diag",
+      summary: problemCount === 0 ? t.diagnostics : `${t.diagnostics} (${problemCount})`,
+      children: [
+        h(
+          "ul",
+          { className: import_client.default.diagList, style: { margin: "6px 0 0", paddingLeft: "18px" } },
+          ...problemCount === 0 && diagnostics.length === 0 && savedNote === void 0 ? [h("li", { key: "none" }, t.diagPending)] : [
+            ...problemLines,
+            ...catalogueMismatchLine === void 0 ? [] : [catalogueMismatchLine],
+            ...savedNote === void 0 ? [] : [h("li", { key: "saved" }, savedNote)],
+            ...diagnostics.map((line, index) => h("li", { key: `d${index}` }, line))
+          ]
+        )
+      ]
+    })
   );
 }
 var EN = {
@@ -2071,7 +3332,50 @@ var EN = {
   saveFailedPrefix: "Save failed: ",
   close: "Close",
   copy: "Copy",
-  copied: "Copied"
+  copied: "Copied",
+  profileManagerTitle: "Proxy presets",
+  profileManagerLead: 'Named endpoints you can reuse across providers. The built-in "Default preset" is the default proxy block above; edit it there.',
+  profileAdd: "Add preset",
+  profileRename: "Rename",
+  profileDelete: "Delete",
+  profileNameLabel: "Preset name",
+  profileNamePlaceholder: "New preset name, e.g. HK-Proxy",
+  profileNamePrompt: "Name for the new proxy preset:",
+  profileRenamePrompt: "New name for this proxy preset:",
+  profileRenameConfirm: "Save name",
+  cancel: "Cancel",
+  profileNameTaken: "A preset with that name already exists.",
+  profileDeleteConfirm: "Delete this proxy preset?",
+  profileDeleteInUse: "These providers are bound to this preset and will stop being proxied until they are rebound:\n",
+  profileUsedBy: "Used by: ",
+  profileBinding: "Endpoint",
+  profileBindingOwn: "Custom (this card)",
+  profileBindingPrefix: "Preset: ",
+  inheritingProfile: "Using preset ",
+  profileMissing: 'The bound preset "',
+  profileMissingSuffix: '" no longer exists, so this provider is not proxied.',
+  profileMissingOption: " (missing)",
+  profileUnusable: 'The bound preset "',
+  profileUnusableSuffix: '" is not usable, so this provider is not proxied: ',
+  quickImport: "Quick import\u2026",
+  quickImportEnv: "From environment: ",
+  quickImportEnvNone: "From environment (none detected)",
+  quickImportEnvCredentials: "The environment variable also carried credentials; enter them below.",
+  loadHostTemplate: "Load official upstream hosts: ",
+  backupExport: "Back up configuration",
+  backupImport: "Restore configuration",
+  backupIncludePasswords: "Include proxy passwords in the backup?\n\nOK = include, Cancel = leave every password empty.",
+  backupWithPasswords: "Exported backup (passwords included \u2014 store it safely)",
+  backupWithoutPasswords: "Exported backup (passwords omitted)",
+  backupConfirm: "Restore this backup? The current configuration will be replaced.\n\nProviders: ",
+  backupConfirmProviders: ", presets: ",
+  backupConfirmProfiles: " entry/entries.",
+  backupRestored: "Restored from backup, providers: ",
+  backupTitle: "Backup and restore",
+  backupLead: "Save the whole proxy configuration to a JSON file, or load one back.",
+  sectionSettings: "Page settings",
+  sectionProviders: "Providers",
+  enableLabel: "Enabled"
 };
 var ZH = {
   lead: "\u8BA9\u6307\u5B9A\u7684 provider \u8D70\u4F60\u81EA\u5DF1\u7684\u6B63\u5411\u4EE3\u7406\uFF0C\u5176\u5B83 provider \u4FDD\u6301\u76F4\u8FDE\u3002\u6307\u5411\u672C\u673A\u6216\u5185\u7F51\u5730\u5740\uFF08localhost\u3001127.x\u3001\u79C1\u6709\u7F51\u6BB5\uFF09\u7684\u8BF7\u6C42\u9ED8\u8BA4\u76F4\u8FDE\uFF0C\u9876\u5C42 localDirect \u8BBE\u4E3A false \u65F6\u6062\u590D\u8D70\u4EE3\u7406\u2014\u2014\u6B63\u5411\u4EE3\u7406\u901A\u5E38\u591F\u4E0D\u5230\u4F60\u81EA\u5DF1\u7684\u673A\u5668\u3002",
@@ -2164,7 +3468,50 @@ var ZH = {
   saveFailedPrefix: "\u4FDD\u5B58\u5931\u8D25\uFF1A",
   close: "\u5173\u95ED",
   copy: "\u590D\u5236",
-  copied: "\u5DF2\u590D\u5236"
+  copied: "\u5DF2\u590D\u5236",
+  profileManagerTitle: "\u4EE3\u7406\u9884\u8BBE",
+  profileManagerLead: "\u53EF\u88AB\u591A\u4E2A provider \u590D\u7528\u7684\u547D\u540D\u7AEF\u70B9\u3002\u5185\u7F6E\u7684\u300C\u9ED8\u8BA4\u9884\u8BBE\u300D\u5C31\u662F\u4E0A\u65B9\u300C\u9ED8\u8BA4\u4EE3\u7406\u300D\u533A\u5757\uFF0C\u76F4\u63A5\u5728\u90A3\u91CC\u7F16\u8F91\u3002",
+  profileAdd: "\u6DFB\u52A0\u9884\u8BBE",
+  profileRename: "\u91CD\u547D\u540D",
+  profileDelete: "\u5220\u9664",
+  profileNameLabel: "\u9884\u8BBE\u540D\u79F0",
+  profileNamePlaceholder: "\u65B0\u9884\u8BBE\u540D\u79F0\uFF0C\u4F8B\u5982 HK-Proxy",
+  profileNamePrompt: "\u65B0\u4EE3\u7406\u9884\u8BBE\u7684\u540D\u79F0\uFF1A",
+  profileRenamePrompt: "\u8BE5\u4EE3\u7406\u9884\u8BBE\u7684\u65B0\u540D\u79F0\uFF1A",
+  profileRenameConfirm: "\u4FDD\u5B58\u540D\u79F0",
+  cancel: "\u53D6\u6D88",
+  profileNameTaken: "\u5DF2\u5B58\u5728\u540C\u540D\u9884\u8BBE\u3002",
+  profileDeleteConfirm: "\u786E\u8BA4\u5220\u9664\u8BE5\u4EE3\u7406\u9884\u8BBE\uFF1F",
+  profileDeleteInUse: "\u4EE5\u4E0B provider \u7ED1\u5B9A\u5728\u8BE5\u9884\u8BBE\u4E0A\uFF0C\u5220\u9664\u540E\u5C06\u4E0D\u518D\u8D70\u4EE3\u7406\uFF0C\u76F4\u5230\u91CD\u65B0\u7ED1\u5B9A\uFF1A\n",
+  profileUsedBy: "\u88AB\u4EE5\u4E0B provider \u4F7F\u7528\uFF1A",
+  profileBinding: "\u7AEF\u70B9\u6765\u6E90",
+  profileBindingOwn: "\u72EC\u7ACB\u81EA\u5B9A\u4E49\u914D\u7F6E",
+  profileBindingPrefix: "\u9884\u8BBE\uFF1A",
+  inheritingProfile: "\u4F7F\u7528\u9884\u8BBE ",
+  profileMissing: "\u7ED1\u5B9A\u7684\u9884\u8BBE\u300C",
+  profileMissingSuffix: "\u300D\u5DF2\u4E0D\u5B58\u5728\uFF0C\u8BE5 provider \u4E0D\u4F1A\u8D70\u4EE3\u7406\u3002",
+  profileMissingOption: "\uFF08\u5DF2\u7F3A\u5931\uFF09",
+  profileUnusable: "\u7ED1\u5B9A\u7684\u9884\u8BBE\u300C",
+  profileUnusableSuffix: "\u300D\u4E0D\u53EF\u7528\uFF0C\u8BE5 provider \u4E0D\u4F1A\u8D70\u4EE3\u7406\uFF1A",
+  quickImport: "\u5E38\u7528\u5BA2\u6237\u7AEF\u2026",
+  quickImportEnv: "\u4ECE\u73AF\u5883\u53D8\u91CF\uFF1A",
+  quickImportEnvNone: "\u4ECE\u73AF\u5883\u53D8\u91CF\uFF08\u672A\u68C0\u6D4B\u5230\uFF09",
+  quickImportEnvCredentials: "\u8BE5\u73AF\u5883\u53D8\u91CF\u8FD8\u5E26\u4E86\u51ED\u636E\uFF0C\u8BF7\u5728\u4E0B\u65B9\u8865\u586B\u3002",
+  loadHostTemplate: "\u8F7D\u5165\u5B98\u65B9\u4E0A\u6E38\u57DF\u540D\uFF1A",
+  backupExport: "\u5907\u4EFD\u914D\u7F6E",
+  backupImport: "\u6062\u590D\u914D\u7F6E",
+  backupIncludePasswords: "\u5907\u4EFD\u4E2D\u662F\u5426\u5305\u542B\u4EE3\u7406\u5BC6\u7801\uFF1F\n\n\u786E\u5B9A = \u5305\u542B\uFF1B\u53D6\u6D88 = \u6240\u6709\u5BC6\u7801\u5B57\u6BB5\u7559\u7A7A\u3002",
+  backupWithPasswords: "\u5DF2\u5BFC\u51FA\u5907\u4EFD\uFF08\u5305\u542B\u5BC6\u7801\uFF0C\u8BF7\u59A5\u5584\u4FDD\u7BA1\uFF09",
+  backupWithoutPasswords: "\u5DF2\u5BFC\u51FA\u5907\u4EFD\uFF08\u672A\u5305\u542B\u5BC6\u7801\uFF09",
+  backupConfirm: "\u786E\u8BA4\u7528\u8BE5\u5907\u4EFD\u8986\u76D6\u5F53\u524D\u914D\u7F6E\uFF1F\n\nprovider\uFF1A",
+  backupConfirmProviders: "\uFF0C\u9884\u8BBE\uFF1A",
+  backupConfirmProfiles: " \u4E2A\u3002",
+  backupRestored: "\u5DF2\u4ECE\u5907\u4EFD\u6062\u590D\uFF0Cprovider\uFF1A",
+  backupTitle: "\u5907\u4EFD\u4E0E\u6062\u590D",
+  backupLead: "\u628A\u6574\u4EFD\u4EE3\u7406\u914D\u7F6E\u5B58\u6210 JSON \u6587\u4EF6\uFF0C\u6216\u4ECE\u6587\u4EF6\u6062\u590D\u3002",
+  sectionSettings: "\u9875\u9762\u8BBE\u7F6E",
+  sectionProviders: "Provider \u5217\u8868",
+  enableLabel: "\u542F\u7528"
 };
 function stringsFor(ctx) {
   const language = localeOf(ctx);