dsh-provider-proxy 0.6.1 → 0.8.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": "bcf3ba25_root", "lead": "86cd7a9a_lead", "empty": "4ec3d74d_empty", "card": "61dfce67_card", "cardActive": "56b6c433_cardActive", "cardRejected": "24b300e2_cardRejected", "defaultCard": "665ef72b_defaultCard", "defaultLead": "351db191_defaultLead", "cardHead": "9ee651d9_cardHead", "cardTitles": "bb118443_cardTitles", "name": "a1b940d4_name", "id": "1870f756_id", "pillOn": "e9cfdcad_pillOn", "pillLive": "3d3b7405_pillLive", "pillOff": "a517f862_pillOff", "pillRejected": "3e11f4ea_pillRejected", "toggle": "31ab2dc8_toggle", "field": "52ffb01c_field", "label": "b8d05488_label", "hint": "d8b3bd46_hint", "input": "0b74e44b_input", "testButton": "47b71ed7_testButton", "diag": "f395d2a5_diag", "diagSummary": "84895b20_diagSummary", "diagList": "9ecca3cd_diagList" };
+    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 __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.\n   Tokens only: no literal colours, matching the shared --dsw-* system. */\n\n.bcf3ba25_root {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  max-width: 640px;\n}\n\n.86cd7a9a_lead {\n  margin: 0 0 4px;\n  font-size: 12px;\n  line-height: 1.6;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.4ec3d74d_empty {\n  margin: 0;\n  padding: 16px;\n  border: 1px dashed var(--dsw-alias-border-l1);\n  border-radius: 8px;\n  font-size: 12px;\n  text-align: center;\n  color: var(--dsw-alias-state-idle-primary);\n}\n\n/* ---- provider card ---- */\n\n.61dfce67_card,\n.56b6c433_cardActive,\n.24b300e2_cardRejected {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 12px 14px;\n  border: 1px solid var(--dsw-alias-border-l1);\n  border-radius: 10px;\n  background: var(--dsw-alias-bg-layer-1);\n}\n\n.56b6c433_cardActive {\n  border-color: var(--dsw-alias-state-success-primary);\n  background: var(--dsw-alias-bg-layer-2);\n}\n\n/* An enabled route the Host refused: never dress it as active. */\n.24b300e2_cardRejected {\n  border-color: var(--dsw-alias-state-error-primary, #f85149);\n  background: var(--dsw-alias-bg-layer-2);\n}\n\n/* ---- shared default endpoint ---- */\n\n/* A distinct outer layer, so it reads as "one setting for the page" rather than\n   as one more provider card. */\n.665ef72b_defaultCard {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 14px 16px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 10px;\n  background: var(--dsw-alias-bg-layer-2);\n}\n\n.351db191_defaultLead {\n  margin: -2px 0 0;\n  font-size: 11px;\n  line-height: 1.5;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.9ee651d9_cardHead {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n\n.bb118443_cardTitles {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  min-width: 0;\n}\n\n.a1b940d4_name {\n  overflow: hidden;\n  font-size: 13px;\n  font-weight: 600;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  color: var(--dsw-alias-label-primary);\n}\n\n.1870f756_id {\n  flex: none;\n  padding: 1px 6px;\n  border-radius: 4px;\n  background: var(--dsw-alias-bg-layer-2);\n  font-family: ui-monospace, monospace;\n  font-size: 11px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n/* ---- status pill ---- */\n\n.e9cfdcad_pillOn,\n.3d3b7405_pillLive,\n.a517f862_pillOff,\n.3e11f4ea_pillRejected {\n  flex: none;\n  padding: 2px 8px;\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.e9cfdcad_pillOn {\n  background: var(--dsw-alias-state-success-primary);\n  color: var(--dsw-alias-bg-base);\n}\n\n.3d3b7405_pillLive {\n  border: 1px solid var(--dsw-alias-border-l2);\n  color: var(--dsw-alias-label-secondary);\n}\n\n.a517f862_pillOff {\n  color: var(--dsw-alias-state-idle-primary);\n}\n\n.3e11f4ea_pillRejected {\n  border: 1px solid var(--dsw-alias-state-error-primary, #f85149);\n  color: var(--dsw-alias-state-error-primary, #f85149);\n}\n\n/* ---- toggle ---- */\n\n.31ab2dc8_toggle {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding-top: 2px;\n  font-size: 12px;\n  color: var(--dsw-alias-label-primary);\n  cursor: pointer;\n}\n\n.31ab2dc8_toggle input {\n  accent-color: var(--dsw-alias-brand-primary);\n  cursor: pointer;\n}\n\n/* ---- fields ---- */\n\n.52ffb01c_field {\n  display: grid;\n  grid-template-columns: 96px 1fr;\n  align-items: center;\n  gap: 10px;\n  font-size: 12px;\n}\n\n.b8d05488_label {\n  color: var(--dsw-alias-label-secondary);\n}\n\n.d8b3bd46_hint {\n  grid-column: 2;\n  margin-top: -2px;\n  font-size: 11px;\n  color: var(--dsw-alias-state-warn-primary);\n}\n\n.0b74e44b_input {\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  padding: 5px 8px;\n  border: 1px solid var(--dsw-alias-border-l1);\n  border-radius: 6px;\n  outline: none;\n  background: var(--dsw-alias-bg-layer-1);\n  color: var(--dsw-alias-label-primary);\n  font: inherit;\n  font-size: 12px;\n  transition: border-color 120ms ease, background 120ms ease;\n}\n\n/* The base look of every input is INLINE too, so these three state rules only\n   ever take effect as author-important declarations \u2014 same reason as the\n   self-check button above. `cursor` has no inline base and needs none, and the\n   hover border uses `l3` because `l1`\u2192`l2` is a 4%\u219210% black step nobody can\n   see. */\n\n.0b74e44b_input:hover:not(:disabled) {\n  border-color: var(--dsw-alias-border-l3) !important;\n}\n\n.0b74e44b_input:focus {\n  border-color: var(--dsw-alias-brand-primary) !important;\n}\n\n.0b74e44b_input:disabled {\n  color: var(--dsw-alias-state-idle-primary) !important;\n  background: var(--dsw-alias-bg-layer-2) !important;\n  cursor: not-allowed;\n}\n\n/* ---- self-check ---- */\n\n/* The hover state is the one thing an inline style cannot express, which is why\n   this element carries a class at all. Layout stays inline.\n\n   Two traps, both hit before this comment existed:\n   - `!important` is load-bearing: the base border and background are INLINE, and\n     the cascade sorts a style attribute after every author rule, so a plain\n     declaration here would ship, match, and still lose.\n   - the TOKENS must be visible ones. `bg-layer-1/2/3` all resolve to\n     `neutral-bluish-00` in the light theme, so a layer swap is a no-op there, and\n     `border-l1`\u2192`l2` is 4%\u219210% black on a 1px line. The app\'s own hovers use\n     `interactive-bg-hover`; using it here is what makes the feedback exist. */\n.47b71ed7_testButton {\n  transition: border-color 120ms ease, background 120ms ease;\n}\n\n.47b71ed7_testButton:hover:not(:disabled) {\n  border-color: var(--dsw-alias-border-l3) !important;\n  background: var(--dsw-alias-interactive-bg-hover) !important;\n}\n\n/* ---- diagnostics ---- */\n\n.f395d2a5_diag {\n  margin-top: 2px;\n  padding: 8px 10px;\n  border: 1px solid var(--dsw-alias-border-l1);\n  border-radius: 8px;\n  font-size: 11px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.84895b20_diagSummary {\n  cursor: pointer;\n  color: var(--dsw-alias-state-warn-primary);\n}\n\n.9ecca3cd_diagList {\n  margin: 6px 0 0;\n  padding-left: 18px;\n  font-family: ui-monospace, monospace;\n  word-break: break-all;\n}\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.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';
       document.head.appendChild(__dshStyle);
     }
     var __dshStyle;
@@ -357,7 +357,7 @@ async function fetchCatalog() {
       };
     }
   }
-  return { rows, hits, problems, lastUse };
+  return { rows, publishedRows: rows, hits, problems, lastUse };
 }
 var CATALOG_REFRESH_MS = 1e4;
 var catalogPoll;
@@ -540,6 +540,29 @@ var S = {
     fontSize: "12px",
     cursor: "pointer"
   },
+  /** The reveal/hide control sits inside the password field's right edge. */
+  passwordControl: {
+    position: "relative",
+    minWidth: "0"
+  },
+  passwordToggle: {
+    position: "absolute",
+    top: "50%",
+    right: "4px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "26px",
+    height: "26px",
+    padding: "0",
+    border: "0",
+    borderRadius: "6px",
+    background: "transparent",
+    color: "var(--dsw-alias-label-secondary)",
+    lineHeight: "1",
+    transform: "translateY(-50%)",
+    cursor: "pointer"
+  },
   testResult: {
     // A flex row so the target can drop onto its own line: the container was a
     // plain span, where `flexBasis: 100%` does nothing and the target ran into
@@ -566,6 +589,10 @@ var S = {
   diagProblem: {
     color: "var(--dsw-alias-state-error-primary, #f85149)"
   },
+  /** Informational catalogue mismatch: not a rejected route, so no error red. */
+  diagNote: {
+    color: "var(--dsw-alias-label-secondary)"
+  },
   advanced: {
     marginTop: "4px",
     fontSize: "12px"
@@ -639,10 +666,11 @@ var S = {
   },
   field: {
     display: "grid",
-    gridTemplateColumns: "88px 1fr",
+    gridTemplateColumns: "76px 1fr",
     alignItems: "center",
-    gap: "10px",
-    fontSize: "12px"
+    gap: "8px",
+    fontSize: "12px",
+    minWidth: "0"
   },
   label: { color: "var(--dsw-alias-label-secondary)" },
   input: {
@@ -667,9 +695,83 @@ var S = {
     color: "var(--dsw-alias-label-secondary)"
   },
   hint: {
-    gridColumn: "2",
+    gridColumn: "1 / -1",
     fontSize: "11px",
-    color: "var(--dsw-alias-label-secondary)"
+    color: "var(--dsw-alias-state-warn-primary, #d29922)"
+  },
+  chipRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    flexWrap: "wrap",
+    marginBottom: "2px"
+  },
+  chip: {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "3px 10px",
+    borderRadius: "999px",
+    border: "1px solid var(--dsw-alias-border-l1)",
+    background: "var(--dsw-alias-bg-layer-1)",
+    color: "var(--dsw-alias-label-secondary)",
+    fontSize: "11px",
+    fontWeight: "500",
+    cursor: "pointer",
+    userSelect: "none"
+  },
+  chipActive: {
+    borderColor: "var(--dsw-alias-brand-primary)",
+    background: "var(--dsw-alias-interactive-bg-hover)",
+    color: "var(--dsw-alias-brand-primary)",
+    fontWeight: "600"
+  },
+  compactRow: {
+    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"
+  },
+  compactRowActive: {
+    borderColor: "var(--dsw-alias-state-success-primary)",
+    background: "var(--dsw-alias-bg-layer-2)"
+  },
+  compactRowRejected: {
+    borderColor: "var(--dsw-alias-state-error-primary, #f85149)",
+    background: "var(--dsw-alias-bg-layer-2)"
+  },
+  compactEndpoint: {
+    fontSize: "11px",
+    color: "var(--dsw-alias-label-secondary)",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    maxWidth: "180px"
+  },
+  formGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+    alignItems: "start",
+    gap: "10px 14px"
+  },
+  formGridFull: {
+    gridColumn: "1 / -1"
+  },
+  copyButton: {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "2px 4px",
+    border: "none",
+    borderRadius: "4px",
+    background: "transparent",
+    color: "var(--dsw-alias-label-secondary)",
+    cursor: "pointer",
+    fontSize: "11px",
+    lineHeight: "1"
   }
 };
 function renderPage(ctx) {
@@ -693,6 +795,7 @@ function renderPage(ctx) {
     void fetchCatalog().then((catalog) => catalogueSetter?.(catalog)).catch((error) => {
       catalogueSetter?.({
         rows: [],
+        publishedRows: [],
         hits: {},
         problems: {},
         lastUse: {},
@@ -701,6 +804,7 @@ function renderPage(ctx) {
     });
     return {
       rows: void 0,
+      publishedRows: void 0,
       hits: {},
       problems: {},
       lastUse: {},
@@ -710,6 +814,7 @@ function renderPage(ctx) {
   });
   catalogueSetter = (catalog) => setState({
     rows: catalog.rows,
+    publishedRows: catalog.publishedRows,
     hits: catalog.hits,
     problems: catalog.problems,
     lastUse: catalog.lastUse,
@@ -718,6 +823,7 @@ function renderPage(ctx) {
   });
   touchCatalogPolling();
   const published = state.rows ?? [];
+  const publishedRows = state.publishedRows ?? [];
   const hits = state.hits ?? {};
   const lastUse = state.lastUse ?? {};
   const lastUseText = (id) => {
@@ -731,7 +837,14 @@ function renderPage(ctx) {
   const problemLines = Object.entries(problems).map(
     ([id, message]) => h("li", { key: `p:${id}`, style: S.diagProblem }, `${id}\uFF1A${message}`)
   );
-  const problemCount = problemLines.length;
+  const publishedIds = new Set(publishedRows.map((row) => row.id));
+  const missingFromCatalog = state.pending === true || state.error !== void 0 ? [] : Object.keys(configured).filter((id) => !publishedIds.has(id)).sort();
+  const catalogueMismatchLine = missingFromCatalog.length === 0 ? void 0 : h(
+    "li",
+    { key: "catalogue-mismatch", style: S.diagNote },
+    `${t.catalogueMismatch}${missingFromCatalog.join("\u3001")}${t.catalogueMismatchSuffix}`
+  );
+  const problemCount = problemLines.length + (catalogueMismatchLine === void 0 ? 0 : 1);
   note(
     `provider \u5217\u8868\uFF1A\u6765\u81EA Host \u5171 ${published.length} \u4E2A\uFF08${published.map((r) => r.id).join("\u3001") || "\u65E0"}\uFF09`
   );
@@ -741,6 +854,45 @@ function renderPage(ctx) {
   const [defaultDraft, setDefaultDraft] = (React.useState ?? ((v) => [v, () => {
   }]))({});
   const editDefault = (field2, value) => setDefaultDraft((current) => ({ ...current, [field2]: value }));
+  const [passwordVisible, setPasswordVisible] = (React.useState ?? ((v) => [v, () => {
+  }]))({});
+  const [defaultPasswordVisible, setDefaultPasswordVisible] = (React.useState ?? ((v) => [v, () => {
+  }]))(false);
+  const togglePassword = (id) => setPasswordVisible((current) => ({ ...current, [id]: current[id] !== true }));
+  const toggleDefaultPassword = () => setDefaultPasswordVisible((current) => current !== true);
+  const passwordToggle = (visible, onToggle) => h(
+    "button",
+    {
+      className: import_client.default.passwordToggle,
+      style: S.passwordToggle,
+      type: "button",
+      "aria-label": visible ? t.hidePassword : t.showPassword,
+      "aria-pressed": visible,
+      title: visible ? t.hidePassword : t.showPassword,
+      onClick: onToggle
+    },
+    h(
+      "svg",
+      {
+        width: 16,
+        height: 16,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        focusable: "false"
+      },
+      h("path", {
+        key: "eye",
+        d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"
+      }),
+      h("circle", { key: "pupil", cx: 12, cy: 12, r: 3 }),
+      visible ? h("path", { key: "slash", d: "m3 3 18 18" }) : null
+    )
+  );
   const [globalDraft, setGlobalDraft] = (React.useState ?? ((v) => [v, () => {
   }]))({});
   const editGlobal = (field2, value) => setGlobalDraft((current) => ({ ...current, [field2]: value }));
@@ -768,11 +920,77 @@ function renderPage(ctx) {
   };
   const [filter, setFilter] = (React.useState ?? ((v) => [v, () => {
   }]))("");
+  const [statusFilter, setStatusFilter] = (React.useState ?? ((v) => [v, () => {
+  }]))("all");
+  const [viewMode, setViewMode] = (React.useState ?? ((v) => [v, () => {
+  }]))("card");
+  const [expandedCards, setExpandedCards] = (React.useState ?? ((v) => [v, () => {
+  }]))({});
+  const [batchProgress, setBatchProgress] = (React.useState ?? ((v) => [v, () => {
+  }]))(null);
+  const [copiedKey, setCopiedKey] = (React.useState ?? ((v) => [v, () => {
+  }]))(void 0);
+  const copyToClipboard = (key, text) => {
+    try {
+      if (typeof globalThis.navigator?.clipboard?.writeText === "function") {
+        void globalThis.navigator.clipboard.writeText(text).then(() => {
+          setCopiedKey(key);
+          setTimeout(() => setCopiedKey((prev) => prev === key ? void 0 : prev), 1500);
+        }).catch(() => void 0);
+      }
+    } catch {
+    }
+  };
+  const copyButton = (key, text, ariaLabel) => h(
+    "button",
+    {
+      className: import_client.default.copyButton,
+      style: S.copyButton,
+      type: "button",
+      "aria-label": ariaLabel,
+      title: copiedKey === key ? t.copied : ariaLabel,
+      onClick: (e) => {
+        e.stopPropagation?.();
+        copyToClipboard(key, text);
+      }
+    },
+    copiedKey === key ? h(
+      "svg",
+      {
+        width: 12,
+        height: 12,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "var(--dsw-alias-state-success-primary, #2ea043)",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true"
+      },
+      h("path", { d: "M20 6 9 17l-5-5" })
+    ) : h(
+      "svg",
+      {
+        width: 12,
+        height: 12,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true"
+      },
+      h("rect", { width: 14, height: 14, x: 8, y: 8, rx: 2, ry: 2 }),
+      h("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+    ),
+    copiedKey === key ? h("span", { style: { marginLeft: "3px", fontSize: "10px", color: "var(--dsw-alias-state-success-primary, #2ea043)" } }, t.copied) : null
+  );
   const runTest = (id) => {
     const generation = (testGeneration.get(id) ?? 0) + 1;
     testGeneration.set(id, generation);
     setTests((current) => ({ ...current, [id]: { pending: true } }));
-    void (async () => {
+    return (async () => {
       try {
         for (const [key, entry] of [...pendingWrites]) {
           if (key.startsWith(`${id}\0`) || key.startsWith("\0default\0") || key.startsWith("\0global\0")) {
@@ -798,6 +1016,28 @@ function renderPage(ctx) {
       }
     })();
   };
+  const runBatchTest = () => {
+    const activeIds = rows.filter((row) => view({ ...configured[row.id], ...draft[row.id] }).enabled).map((row) => row.id);
+    if (activeIds.length === 0 || batchProgress !== null) return;
+    setBatchProgress({ done: 0, total: activeIds.length });
+    void (async () => {
+      let index = 0;
+      let completed = 0;
+      const concurrency = Math.min(3, activeIds.length);
+      const worker = async () => {
+        while (index < activeIds.length) {
+          const id = activeIds[index++];
+          await runTest(id);
+          completed++;
+          setBatchProgress({ done: completed, total: activeIds.length });
+        }
+      };
+      await Promise.all(Array.from({ length: concurrency }, () => worker()));
+      setTimeout(() => {
+        setBatchProgress(null);
+      }, 2e3);
+    })();
+  };
   const rows = knownProviders({ ...configured, ...draft }, published);
   const inheritingIds = () => rows.filter((row) => view({ ...configured[row.id], ...draft[row.id] }).useDefault === true).map((row) => row.id);
   const save = (key, path, label, value, onRefused) => {
@@ -924,6 +1164,9 @@ function renderPage(ctx) {
     );
   };
   const promoteToDefault = (id) => {
+    if (defaultComplete && inheritingIds().length > 0 && globalThis.window?.confirm?.(t.confirmPromoteToDefault) !== true) {
+      return;
+    }
     const route = view({ ...configured[id], ...draft[id] });
     applyDefaultUrl({
       protocol: route.protocol,
@@ -945,7 +1188,7 @@ function renderPage(ctx) {
     saveMany(
       "\0default\0applyAll",
       ids.map((id) => ({ op: "set", path: ["providers", id, "useDefault"], value: true })),
-      "\u6240\u6709 provider \u7684 useDefault",
+      `\u6240\u6709 provider \u7684 useDefault\uFF08${ids.length} \u4E2A\uFF09`,
       () => setDraft((current) => {
         const next = { ...current };
         for (const id of ids) {
@@ -968,9 +1211,16 @@ function renderPage(ctx) {
     event.preventDefault?.();
     apply2(parts);
   };
-  const field = (label, control, hint, hintError) => h(
+  const field = (label, control, hint, hintError, fullWidth) => h(
     "label",
-    { className: import_client.default.field, style: S.field, key: label },
+    {
+      className: `${import_client.default.field}${fullWidth ? ` ${import_client.default.formGridFull}` : ""}`,
+      style: {
+        ...S.field,
+        ...fullWidth ? S.formGridFull : {}
+      },
+      key: label
+    },
     h("span", { className: import_client.default.label, style: S.label }, label),
     control,
     hint === void 0 ? null : h(
@@ -978,8 +1228,8 @@ function renderPage(ctx) {
       {
         className: import_client.default.hint,
         style: {
-          gridColumn: "2",
-          fontSize: "11px",
+          ...S.hint,
+          marginTop: "2px",
           // A warning that a value can never work is an answer, not
           // decoration — same rule as the failed self-check text.
           ...hintError === true ? { color: "var(--dsw-alias-state-error-primary, #f85149)" } : {}
@@ -1015,73 +1265,84 @@ function renderPage(ctx) {
       )
     ),
     h("p", { className: import_client.default.defaultLead, style: S.defaultLead }, t.defaultLead),
-    field(
-      t.protocol,
-      h(
-        "select",
-        {
+    h(
+      "div",
+      { className: import_client.default.formGrid, style: S.formGrid, key: "default:form-grid" },
+      field(
+        t.protocol,
+        h(
+          "select",
+          {
+            className: import_client.default.input,
+            style: S.input,
+            value: defaultView.protocol,
+            onChange: (event) => bindDefault("protocol")(event.target.value)
+          },
+          ...PROTOCOLS.map(
+            (protocol) => h("option", { key: protocol, value: protocol }, protocol.toUpperCase())
+          )
+        )
+      ),
+      field(
+        t.host,
+        h("input", {
           className: import_client.default.input,
           style: S.input,
-          value: defaultView.protocol,
-          onChange: (event) => bindDefault("protocol")(event.target.value)
-        },
-        ...PROTOCOLS.map(
-          (protocol) => h("option", { key: protocol, value: protocol }, protocol.toUpperCase())
-        )
+          placeholder: "127.0.0.1",
+          value: defaultView.host,
+          onChange: (event) => bindDefault("host")(event.target.value),
+          // Same convenience as the cards: a full URL fills the whole block.
+          onPaste: onProxyUrlPaste(applyDefaultUrl)
+        }),
+        defaultHostWhy ?? t.hostHint,
+        defaultHostWhy !== void 0
+      ),
+      field(
+        t.port,
+        h("input", {
+          className: import_client.default.input,
+          style: S.input,
+          type: "number",
+          min: 1,
+          max: 65535,
+          placeholder: "7890",
+          value: defaultView.port === 0 ? "" : String(defaultView.port),
+          onChange: (event) => {
+            const parsed = Number.parseInt(event.target.value, 10);
+            bindDefault("port")(Number.isNaN(parsed) ? 0 : parsed);
+          }
+        })
+      ),
+      field(
+        t.username,
+        h("input", {
+          className: import_client.default.input,
+          style: S.input,
+          autoComplete: "off",
+          value: defaultView.username,
+          onChange: (event) => bindDefault("username")(event.target.value)
+        })
+      ),
+      field(
+        t.password,
+        h(
+          "div",
+          { style: S.passwordControl },
+          h("input", {
+            className: import_client.default.input,
+            style: { ...S.input, paddingRight: "36px" },
+            type: defaultPasswordVisible === true ? "text" : "password",
+            autoComplete: "off",
+            value: defaultView.password,
+            onChange: (event) => bindDefault("password")(event.target.value)
+          }),
+          passwordToggle(defaultPasswordVisible === true, toggleDefaultPassword)
+        ),
+        t.passwordHintProxy,
+        false,
+        true
       )
     ),
-    field(
-      t.host,
-      h("input", {
-        className: import_client.default.input,
-        style: S.input,
-        placeholder: "127.0.0.1",
-        value: defaultView.host,
-        onChange: (event) => bindDefault("host")(event.target.value),
-        // Same convenience as the cards: a full URL fills the whole block.
-        onPaste: onProxyUrlPaste(applyDefaultUrl)
-      }),
-      defaultHostWhy ?? t.hostHint,
-      defaultHostWhy !== void 0
-    ),
-    field(
-      t.port,
-      h("input", {
-        className: import_client.default.input,
-        style: S.input,
-        type: "number",
-        min: 1,
-        max: 65535,
-        placeholder: "7890",
-        value: defaultView.port === 0 ? "" : String(defaultView.port),
-        onChange: (event) => {
-          const parsed = Number.parseInt(event.target.value, 10);
-          bindDefault("port")(Number.isNaN(parsed) ? 0 : parsed);
-        }
-      })
-    ),
-    field(
-      t.username,
-      h("input", {
-        className: import_client.default.input,
-        style: S.input,
-        autocomplete: "off",
-        value: defaultView.username,
-        onChange: (event) => bindDefault("username")(event.target.value)
-      })
-    ),
-    field(
-      t.password,
-      h("input", {
-        className: import_client.default.input,
-        style: S.input,
-        type: "password",
-        autocomplete: "off",
-        value: defaultView.password,
-        onChange: (event) => bindDefault("password")(event.target.value)
-      }),
-      t.passwordHintProxy
-    ),
     // Bulk opt-in, in ONE write: a per-card walk would rebuild the table N times.
     // Disabled while the default configuration is incomplete, because pointing every card at an
     // empty endpoint would just refuse them all.
@@ -1097,7 +1358,7 @@ function renderPage(ctx) {
           disabled: !defaultComplete || rows.length === 0,
           onClick: applyDefaultToAll
         },
-        t.applyDefaultAll
+        `${t.applyDefaultAll}\uFF08${rows.length}\uFF09`
       )
     )
   );
@@ -1128,7 +1389,7 @@ function renderPage(ctx) {
         value: globalTestUrl,
         onChange: (event) => bindGlobal("testUrl")(event.target.value)
       }),
-      globalTestUrlHint === void 0 ? h("span", { style: S.hint }, t.testUrlHint) : h(
+      globalTestUrlHint === void 0 ? h("span", { className: import_client.default.hint, style: S.hint }, t.testUrlHint) : h(
         "span",
         {
           className: import_client.default.hint,
@@ -1166,21 +1427,87 @@ function renderPage(ctx) {
     ),
     h(
       "p",
-      { style: S.hint },
+      { 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;
+    if (route.enabled && problemText !== void 0) return "rejected";
+    if (route.enabled) return "proxied";
+    return "direct";
+  };
   const query = filter.trim().toLowerCase();
-  const shown = query.length === 0 ? rows : rows.filter((row) => `${row.id} ${row.name}`.toLowerCase().includes(query));
+  const matchedKeywordRows = query.length === 0 ? rows : rows.filter((row) => `${row.id} ${row.name}`.toLowerCase().includes(query));
+  const countActive = matchedKeywordRows.filter((r) => routeStateOf(r) === "proxied").length;
+  const countDirect = matchedKeywordRows.filter((r) => routeStateOf(r) === "direct").length;
+  const countRejected = matchedKeywordRows.filter((r) => routeStateOf(r) === "rejected").length;
+  const shown = matchedKeywordRows.filter((row) => {
+    if (statusFilter === "all") return true;
+    return routeStateOf(row) === statusFilter;
+  });
+  const chipRow = 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 : {}
+          },
+          onClick: () => setStatusFilter(id)
+        },
+        label
+      )
+    )
+  );
   const filterRow = rows.length === 0 ? null : field(
     t.filterLabel,
-    h("input", {
-      className: import_client.default.input,
-      style: S.input,
-      placeholder: t.filterPlaceholder,
-      value: filter,
-      onChange: (event) => setFilter(event.target.value)
-    })
+    h(
+      "div",
+      { style: { display: "flex", alignItems: "center", gap: "8px" } },
+      h("input", {
+        className: import_client.default.input,
+        style: S.input,
+        placeholder: t.filterPlaceholder,
+        value: filter,
+        onChange: (event) => setFilter(event.target.value)
+      }),
+      h(
+        "button",
+        {
+          className: import_client.default.testButton,
+          style: { ...S.testButton, flex: "none", whiteSpace: "nowrap" },
+          type: "button",
+          disabled: countActive === 0 || batchProgress !== null,
+          onClick: runBatchTest
+        },
+        batchProgress !== null ? `${t.batchTesting} (${batchProgress.done}/${batchProgress.total})` : `${t.batchTest} (${countActive})`
+      ),
+      h(
+        "button",
+        {
+          className: import_client.default.testButton,
+          style: { ...S.testButton, flex: "none", whiteSpace: "nowrap" },
+          type: "button",
+          onClick: () => setViewMode((m) => m === "card" ? "compact" : "card")
+        },
+        viewMode === "card" ? t.viewCompact : t.viewCard
+      )
+    )
   );
   const catalogueStatus = rows.length === 0 ? state.pending ? { text: t.catalogueLoading, error: false } : state.error !== void 0 ? { text: `${t.catalogueError}${state.error}`, error: true } : void 0 : void 0;
   const catalogueNotice = state.error !== void 0 && rows.length > 0 ? h(
@@ -1274,7 +1601,7 @@ function renderPage(ctx) {
         h("input", {
           className: import_client.default.input,
           style: S.input,
-          autocomplete: "off",
+          autoComplete: "off",
           value: route.username,
           onChange: (event) => bind(row.id, "username")(event.target.value)
         })
@@ -1286,19 +1613,26 @@ function renderPage(ctx) {
       // config; the diagnostics only ever surface a credential-free origin.
       field(
         t.password,
-        h("input", {
-          className: import_client.default.input,
-          style: S.input,
-          type: "password",
-          autocomplete: "off",
-          value: route.password,
-          onChange: (event) => bind(row.id, "password")(event.target.value)
-        }),
-        route.protocol === "socks5" ? t.passwordHint : t.passwordHintProxy
+        h(
+          "div",
+          { style: S.passwordControl },
+          h("input", {
+            className: import_client.default.input,
+            style: { ...S.input, paddingRight: "36px" },
+            type: passwordVisible[row.id] === true ? "text" : "password",
+            autoComplete: "off",
+            value: route.password,
+            onChange: (event) => bind(row.id, "password")(event.target.value)
+          }),
+          passwordToggle(passwordVisible[row.id] === true, () => togglePassword(row.id))
+        ),
+        route.protocol === "socks5" ? t.passwordHint : t.passwordHintProxy,
+        false,
+        true
       )
     ];
     const pill = rejected ? { className: import_client.default.pillRejected, style: { ...S.pill, ...S.pillRejected }, text: t.rejected } : route.enabled ? { className: import_client.default.pillOn, style: { ...S.pill, ...S.pillOn }, text: t.on } : { className: import_client.default.pillLive, style: { ...S.pill, ...S.pillLive }, text: t.off };
-    return h(
+    const cardSection = h(
       "section",
       {
         className: rejected ? import_client.default.cardRejected : route.enabled ? import_client.default.cardActive : import_client.default.card,
@@ -1364,7 +1698,7 @@ function renderPage(ctx) {
         { key: `${row.id}:inherit`, style: S.inheritNote },
         `${t.inheritingDefault}${defaultOrigin}`
       ) : null,
-      ...useDefault ? [] : endpointFields,
+      ...useDefault ? [] : [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 —
@@ -1405,7 +1739,12 @@ function renderPage(ctx) {
               { key: "status" },
               `HTTP ${result.status}`
             ) : null,
-            result.ip === void 0 ? null : h("span", { key: "ip" }, `${t.exitIpLabel}${result.ip}`),
+            result.ip === void 0 ? null : h(
+              "span",
+              { key: "ip", style: { display: "inline-flex", alignItems: "center", gap: "3px" } },
+              `${t.exitIpLabel}${result.ip}`,
+              copyButton(`${row.id}:ip`, result.ip, t.copy)
+            ),
             result.direct === true ? h("span", { key: "direct" }, t.directLabel) : null,
             result.cached === true ? h("span", { key: "cached" }, t.cachedLabel) : null,
             result.target === void 0 ? null : h(
@@ -1416,13 +1755,22 @@ function renderPage(ctx) {
                   flexBasis: "100%",
                   fontSize: "11px",
                   color: "var(--dsw-alias-label-secondary)",
-                  wordBreak: "break-all"
+                  wordBreak: "break-all",
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: "3px"
                 }
               },
-              `${t.testTargetLabel}${result.target}${targetSourceSuffix(result, t)}`
+              `${t.testTargetLabel}${result.target}${targetSourceSuffix(result, t)}`,
+              copyButton(`${row.id}:target`, result.target, t.copy)
             )
           ] : [
-            h("span", { key: "err", style: S.testFailure }, `\u2717 ${result.error}`),
+            h(
+              "span",
+              { key: "err", style: { ...S.testFailure, display: "inline-flex", alignItems: "center", gap: "3px" } },
+              `\u2717 ${result.error}`,
+              copyButton(`${row.id}:err`, String(result.error), t.copy)
+            ),
             typeof result.status === "number" ? h("span", { key: "status" }, `HTTP ${result.status}`) : null,
             result.target === void 0 ? null : h(
               "span",
@@ -1432,10 +1780,14 @@ function renderPage(ctx) {
                   flexBasis: "100%",
                   fontSize: "11px",
                   color: "var(--dsw-alias-label-secondary)",
-                  wordBreak: "break-all"
+                  wordBreak: "break-all",
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: "3px"
                 }
               },
-              `${t.testTargetLabel}${result.target}${targetSourceSuffix(result, t)}`
+              `${t.testTargetLabel}${result.target}${targetSourceSuffix(result, t)}`,
+              copyButton(`${row.id}:target`, result.target, t.copy)
             )
           ]
         ) : null,
@@ -1498,6 +1850,58 @@ function renderPage(ctx) {
         )
       )
     );
+    const isExpanded = expandedCards[row.id] === true;
+    const compactRowElement = h(
+      "section",
+      {
+        className: rejected ? import_client.default.compactRowRejected : route.enabled ? import_client.default.compactRowActive : import_client.default.compactRow,
+        style: rejected ? { ...S.compactRow, ...S.compactRowRejected } : route.enabled ? { ...S.compactRow, ...S.compactRowActive } : S.compactRow,
+        key: `compact:${row.id}`
+      },
+      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),
+        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(
+        "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,
+        h("span", { className: pill.className, style: pill.style }, pill.text),
+        showTest ? h(
+          "button",
+          {
+            className: import_client.default.testButton,
+            style: { ...S.testButton, padding: "3px 8px", fontSize: "11px" },
+            type: "button",
+            disabled: result?.pending === true,
+            onClick: () => runTest(row.id)
+          },
+          result?.pending === true ? t.testRunning : t.testButton
+        ) : null,
+        h(
+          "button",
+          {
+            className: import_client.default.testButton,
+            style: { ...S.testButton, padding: "3px 8px", fontSize: "11px" },
+            type: "button",
+            onClick: () => setExpandedCards((curr) => ({ ...curr, [row.id]: !curr[row.id] }))
+          },
+          isExpanded ? t.collapseDetails : t.expandDetails
+        )
+      )
+    );
+    if (viewMode === "compact") {
+      return isExpanded ? h("div", { key: `compact-wrap:${row.id}` }, compactRowElement, cardSection) : compactRowElement;
+    }
+    return cardSection;
   });
   return h(
     "div",
@@ -1538,6 +1942,7 @@ function renderPage(ctx) {
     defaultBlock,
     globalBlock,
     catalogueNotice,
+    chipRow,
     filterRow,
     ...body,
     h(
@@ -1567,6 +1972,7 @@ function renderPage(ctx) {
         { 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))
         ]
@@ -1588,6 +1994,10 @@ var EN = {
   defaultMissing: "The default proxy configuration is incomplete, so this provider is not proxied: ",
   filterLabel: "Filter",
   filterPlaceholder: "Filter by name or id\u2026",
+  filterStatusAll: "All",
+  filterStatusProxied: "Proxied",
+  filterStatusDirect: "Direct",
+  filterStatusRejected: "Rejected",
   noMatch: "No provider matches the filter.",
   setAsDefault: "Set as the default proxy",
   applyDefaultAll: "Use the default proxy for all providers",
@@ -1596,7 +2006,10 @@ var EN = {
   port: "Port",
   username: "Username",
   password: "Password",
-  hostHint: "Only an IPv4, IPv6, or domain name is allowed. A full proxy URL (socks5://user:pass@host:1080) can be pasted instead \u2014 it is split into the fields.",
+  showPassword: "Show",
+  hidePassword: "Hide",
+  confirmPromoteToDefault: "The default proxy is already in use by one or more providers. Replace it with this card's endpoint?",
+  hostHint: "IP or domain only; paste full URL supported",
   passwordHint: "Sent to the SOCKS5 proxy for authentication; stored with this setting.",
   passwordHintProxy: "Sent to the proxy as an authentication password; stored with this setting.",
   hitCountPrefix: "",
@@ -1609,6 +2022,12 @@ var EN = {
   minutesAgo: " min ago",
   hoursAgo: " h ago",
   daysAgo: " d ago",
+  viewCard: "Card view",
+  viewCompact: "Compact view",
+  expandDetails: "Edit",
+  collapseDetails: "Collapse",
+  batchTest: "Test active",
+  batchTesting: "Testing",
   testButton: "Test",
   testRunning: "Testing\u2026",
   testDisabledNote: "Not enabled \u2014 test only: ",
@@ -1647,8 +2066,12 @@ var EN = {
   notConfigured: "not configured",
   diagnostics: "Connection diagnostics",
   diagPending: "(collecting\u2026)",
+  catalogueMismatch: "Saved but not listed by the Host catalogue: ",
+  catalogueMismatchSuffix: ". Their proxy settings are kept.",
   saveFailedPrefix: "Save failed: ",
-  close: "Close"
+  close: "Close",
+  copy: "Copy",
+  copied: "Copied"
 };
 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",
@@ -1664,6 +2087,10 @@ var ZH = {
   defaultMissing: "\u9876\u5C42\u9ED8\u8BA4\u4EE3\u7406\u914D\u7F6E\u4E0D\u5B8C\u6574\uFF0C\u8BE5 provider \u4E0D\u4F1A\u8D70\u4EE3\u7406\uFF1A",
   filterLabel: "\u8FC7\u6EE4",
   filterPlaceholder: "\u6309\u540D\u79F0\u6216 id \u8FC7\u6EE4\u2026",
+  filterStatusAll: "\u5168\u90E8",
+  filterStatusProxied: "\u8D70\u4EE3\u7406",
+  filterStatusDirect: "\u76F4\u8FDE",
+  filterStatusRejected: "\u914D\u7F6E\u88AB\u62D2",
   noMatch: "\u6CA1\u6709\u5339\u914D\u7684 provider\u3002",
   setAsDefault: "\u8BBE\u4E3A\u9ED8\u8BA4\u4EE3\u7406",
   applyDefaultAll: "\u6240\u6709 provider \u4F7F\u7528\u9ED8\u8BA4\u4EE3\u7406",
@@ -1672,7 +2099,10 @@ var ZH = {
   port: "\u7AEF\u53E3",
   username: "\u7528\u6237\u540D",
   password: "\u5BC6\u7801",
-  hostHint: "\u53EA\u5141\u8BB8\u586B\u5199 IPv4\u3001IPv6 \u6216\u57DF\u540D\uFF1B\u4E5F\u53EF\u4EE5\u76F4\u63A5\u7C98\u8D34\u5B8C\u6574\u4EE3\u7406 URL\uFF08\u5982 socks5://user:pass@host:1080\uFF09\uFF0C\u4F1A\u81EA\u52A8\u62C6\u5206\u5230\u5404\u5B57\u6BB5\u3002",
+  showPassword: "\u663E\u793A",
+  hidePassword: "\u9690\u85CF",
+  confirmPromoteToDefault: "\u5DF2\u6709 provider \u6B63\u5728\u4F7F\u7528\u9ED8\u8BA4\u4EE3\u7406\u3002\u8981\u7528\u8FD9\u5F20\u5361\u7247\u7684\u7AEF\u70B9\u8986\u76D6\u5B83\u5417\uFF1F",
+  hostHint: "\u4EC5\u9650 IP \u6216\u57DF\u540D\uFF0C\u652F\u6301\u7C98\u8D34\u5B8C\u6574\u4EE3\u7406 URL",
   passwordHint: "\u4EC5\u4F5C\u4E3A SOCKS5 \u8BA4\u8BC1\u53E3\u4EE4\u53D1\u9001\u7ED9\u4EE3\u7406\uFF1B\u968F\u8BE5\u8BBE\u7F6E\u4E00\u8D77\u4FDD\u5B58\u3002",
   passwordHintProxy: "\u4F5C\u4E3A\u4EE3\u7406\u8BA4\u8BC1\u53E3\u4EE4\u53D1\u9001\u7ED9\u4EE3\u7406\uFF1B\u968F\u8BE5\u8BBE\u7F6E\u4E00\u8D77\u4FDD\u5B58\u3002",
   hitCountPrefix: "\u5DF2\u4EE3\u7406 ",
@@ -1685,6 +2115,12 @@ var ZH = {
   minutesAgo: " \u5206\u949F\u524D",
   hoursAgo: " \u5C0F\u65F6\u524D",
   daysAgo: " \u5929\u524D",
+  viewCard: "\u5361\u7247\u89C6\u56FE",
+  viewCompact: "\u7D27\u51D1\u89C6\u56FE",
+  expandDetails: "\u7F16\u8F91",
+  collapseDetails: "\u6536\u8D77",
+  batchTest: "\u6D4B\u8BD5\u5DF2\u542F\u7528",
+  batchTesting: "\u6B63\u5728\u6D4B\u8BD5",
   testButton: "\u6D4B\u8BD5",
   testRunning: "\u6D4B\u8BD5\u4E2D\u2026",
   testDisabledNote: "\u672A\u542F\u7528\uFF0C\u4EC5\u6D4B\u8BD5\uFF1A",
@@ -1723,8 +2159,12 @@ var ZH = {
   notConfigured: "\u672A\u914D\u7F6E",
   diagnostics: "\u8FDE\u63A5\u8BCA\u65AD",
   diagPending: "\uFF08\u6B63\u5728\u6536\u96C6\u2026\uFF09",
+  catalogueMismatch: "\u5DF2\u4FDD\u5B58\u4F46\u672A\u51FA\u73B0\u5728 Host \u76EE\u5F55\u4E2D\u7684 provider\uFF1A",
+  catalogueMismatchSuffix: "\u3002\u4EE3\u7406\u914D\u7F6E\u4ECD\u4F1A\u4FDD\u7559\u3002",
   saveFailedPrefix: "\u4FDD\u5B58\u5931\u8D25\uFF1A",
-  close: "\u5173\u95ED"
+  close: "\u5173\u95ED",
+  copy: "\u590D\u5236",
+  copied: "\u5DF2\u590D\u5236"
 };
 function stringsFor(ctx) {
   const language = localeOf(ctx);