ai-zero-token 1.0.7 → 1.0.9

package/dist/server/admin-page.js

@@ -27,6 +27,9 @@ function renderAdminPage() {
       --orange-soft: rgba(245, 158, 11, 0.12);
       --red: #ef4444;
       --red-soft: rgba(239, 68, 68, 0.12);
+      --plan-color: #94a3b8;
+      --plan-soft: rgba(148, 163, 184, 0.12);
+      --plan-border: var(--line);
       --shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
       --radius: 16px;
       --radius-sm: 12px;
@@ -341,6 +344,45 @@ function renderAdminPage() {
       min-height: 112px;
     }
 
+    .summary-card-head {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      min-width: 0;
+    }
+
+    .summary-icon {
+      width: 22px;
+      height: 22px;
+      border-radius: 999px;
+      display: inline-grid;
+      place-items: center;
+      flex: 0 0 auto;
+      color: var(--brand);
+      background: var(--brand-soft);
+    }
+
+    .summary-icon svg {
+      width: 14px;
+      height: 14px;
+      display: block;
+    }
+
+    .summary-icon.blue {
+      color: var(--blue);
+      background: var(--blue-soft);
+    }
+
+    .summary-icon.green {
+      color: #15803d;
+      background: var(--green-soft);
+    }
+
+    .summary-icon.orange {
+      color: #b45309;
+      background: var(--orange-soft);
+    }
+
     .summary-card label {
       color: var(--text-muted);
       font-size: 12px;
@@ -368,6 +410,60 @@ function renderAdminPage() {
       overflow-wrap: anywhere;
     }
 
+    .summary-card.account-status-summary {
+      gap: 12px;
+      min-height: 112px;
+    }
+
+    .account-status-list {
+      display: grid;
+      gap: 8px;
+    }
+
+    .account-status-line {
+      display: grid;
+      grid-template-columns: 20px auto minmax(0, 1fr);
+      align-items: center;
+      gap: 8px;
+      min-width: 0;
+      color: var(--text-soft);
+      font-size: 13px;
+      line-height: 1.45;
+    }
+
+    .account-status-line svg {
+      width: 18px;
+      height: 18px;
+      padding: 3px;
+      border-radius: 999px;
+      flex: 0 0 auto;
+    }
+
+    .account-status-line.gateway svg {
+      color: var(--blue);
+      background: var(--blue-soft);
+    }
+
+    .account-status-line.codex svg {
+      color: #15803d;
+      background: var(--green-soft);
+    }
+
+    .account-status-line span {
+      color: var(--text-muted);
+      font-weight: 700;
+      white-space: nowrap;
+    }
+
+    .account-status-line strong {
+      min-width: 0;
+      color: var(--text);
+      font-size: clamp(16px, 1.05vw, 18px);
+      line-height: 1.25;
+      letter-spacing: -0.02em;
+      overflow-wrap: anywhere;
+    }
+
     .main-grid {
       display: grid;
       grid-template-columns: minmax(0, 1fr) minmax(460px, 560px);
@@ -487,6 +583,88 @@ function renderAdminPage() {
       display: flex;
     }
 
+    .drawer-backdrop {
+      position: fixed;
+      inset: 0;
+      display: none;
+      justify-content: flex-end;
+      background: rgba(15, 23, 42, 0.38);
+      backdrop-filter: blur(4px);
+      z-index: 60;
+    }
+
+    .drawer-backdrop.is-open {
+      display: flex;
+    }
+
+    .settings-drawer {
+      width: min(460px, 100vw);
+      height: 100vh;
+      background: var(--panel);
+      border-left: 1px solid var(--line);
+      box-shadow: -18px 0 48px rgba(15, 23, 42, 0.16);
+      display: grid;
+      grid-template-rows: auto minmax(0, 1fr) auto;
+    }
+
+    .settings-drawer-head,
+    .settings-drawer-footer {
+      padding: 18px 20px;
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 14px;
+      border-bottom: 1px solid var(--line);
+    }
+
+    .settings-drawer-footer {
+      align-items: center;
+      border-top: 1px solid var(--line);
+      border-bottom: 0;
+      background: #fbfdff;
+    }
+
+    .settings-drawer-head h3 {
+      margin: 0;
+      font-size: 22px;
+      line-height: 1.2;
+      letter-spacing: -0.03em;
+    }
+
+    .settings-drawer-head p {
+      margin: 6px 0 0;
+      color: var(--text-muted);
+      font-size: 13px;
+      line-height: 1.6;
+    }
+
+    .settings-drawer-body {
+      padding: 18px 20px;
+      overflow: auto;
+      display: grid;
+      align-content: start;
+      gap: 16px;
+    }
+
+    .settings-section {
+      display: grid;
+      gap: 12px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid var(--line);
+    }
+
+    .settings-section:last-child {
+      border-bottom: 0;
+      padding-bottom: 0;
+    }
+
+    .settings-section h4 {
+      margin: 0;
+      color: var(--text);
+      font-size: 14px;
+      line-height: 1.4;
+    }
+
     .modal-card {
       width: min(760px, calc(100vw - 32px));
       background: var(--panel);
@@ -662,35 +840,89 @@ function renderAdminPage() {
 
     .account-grid {
       display: grid;
-      grid-auto-rows: 1fr;
       gap: 16px;
-      justify-content: start;
+      align-items: start;
+      justify-content: stretch;
+      width: 100%;
     }
 
     .account-grid.profile-count-1 {
-      grid-template-columns: minmax(300px, 440px);
+      grid-template-columns: minmax(340px, 520px);
     }
 
     .account-grid.profile-count-2 {
-      grid-template-columns: repeat(2, minmax(280px, 360px));
+      grid-template-columns: repeat(2, minmax(340px, 1fr));
     }
 
     .account-grid.profile-count-3 {
-      grid-template-columns: repeat(3, minmax(260px, 320px));
+      grid-template-columns: repeat(3, minmax(320px, 1fr));
     }
 
     .account-grid.profile-count-many {
-      grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
+      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
     }
 
     .account-card {
+      --plan-color: #94a3b8;
+      --plan-soft: rgba(148, 163, 184, 0.12);
+      --plan-border: var(--line);
+      --usage-color: #16a34a;
+      --usage-soft: rgba(22, 163, 74, 0.12);
+      position: relative;
       border-radius: 16px;
       padding: 14px;
       display: grid;
       grid-template-rows: auto auto auto 1fr auto;
       gap: 12px;
       min-width: 0;
-      height: 100%;
+      border-color: var(--plan-border);
+      overflow: hidden;
+    }
+
+    .account-card::before {
+      content: "";
+      position: absolute;
+      inset: 0 0 auto;
+      height: 3px;
+      background: var(--plan-color);
+    }
+
+    .account-card.plan-free {
+      --plan-color: #94a3b8;
+      --plan-soft: rgba(148, 163, 184, 0.12);
+      --plan-border: var(--line);
+    }
+
+    .account-card.plan-plus {
+      --plan-color: #635bff;
+      --plan-soft: rgba(99, 91, 255, 0.11);
+      --plan-border: rgba(99, 91, 255, 0.2);
+    }
+
+    .account-card.plan-pro {
+      --plan-color: #4f46e5;
+      --plan-soft: rgba(79, 70, 229, 0.11);
+      --plan-border: rgba(79, 70, 229, 0.22);
+    }
+
+    .account-card.plan-team {
+      --plan-color: #0f766e;
+      --plan-soft: rgba(15, 118, 110, 0.11);
+      --plan-border: rgba(15, 118, 110, 0.22);
+    }
+
+    .account-card.plan-premium {
+      --plan-color: #d97706;
+      --plan-soft: rgba(217, 119, 6, 0.12);
+      --plan-border: rgba(217, 119, 6, 0.34);
+      box-shadow: 0 10px 26px rgba(180, 83, 9, 0.1), var(--shadow);
+    }
+
+    .account-card.plan-enterprise {
+      --plan-color: #a16207;
+      --plan-soft: rgba(161, 98, 7, 0.14);
+      --plan-border: rgba(71, 85, 105, 0.28);
+      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1), var(--shadow);
     }
 
     .account-head {
@@ -698,6 +930,7 @@ function renderAdminPage() {
       align-items: flex-start;
       justify-content: space-between;
       gap: 12px;
+      padding-top: 8px;
     }
 
     .account-title {
@@ -713,6 +946,7 @@ function renderAdminPage() {
       gap: 6px;
       min-height: 28px;
       padding: 0 8px;
+      margin-top: 28px;
       border: 1px solid var(--line);
       border-radius: 8px;
       background: #fff;
@@ -742,11 +976,12 @@ function renderAdminPage() {
       height: 24px;
       border-radius: 999px;
       background: var(--panel-soft);
-      border: 1px solid var(--line);
+      border: 1px solid var(--plan-color);
+      box-shadow: 0 0 0 3px var(--plan-soft);
       display: grid;
       place-items: center;
       font-size: 11px;
-      color: var(--brand);
+      color: var(--plan-color);
       font-weight: 700;
       flex: 0 0 auto;
     }
@@ -783,8 +1018,66 @@ function renderAdminPage() {
     }
 
     .badge.brand {
-      color: var(--brand);
-      background: var(--brand-soft);
+      color: var(--plan-color);
+      background: var(--plan-soft);
+    }
+
+    .usage-corner {
+      position: absolute;
+      top: 10px;
+      right: 12px;
+      min-height: 24px;
+      padding: 0 10px 0 8px;
+      border-radius: 999px;
+      color: #047857;
+      background: linear-gradient(135deg, #ecfdf5, #d1fae5);
+      border: 1px solid rgba(16, 185, 129, 0.28);
+      box-shadow: 0 8px 18px rgba(16, 185, 129, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82);
+      font-size: 10px;
+      font-weight: 800;
+      line-height: 22px;
+      letter-spacing: 0;
+      pointer-events: none;
+      z-index: 1;
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+    }
+
+    .usage-corner::before {
+      content: "";
+      width: 6px;
+      height: 6px;
+      border-radius: 999px;
+      background: currentColor;
+      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
+      flex: 0 0 auto;
+    }
+
+    .usage-corner span {
+      line-height: 1;
+    }
+
+    .usage-corner.codex-only {
+      color: #1d4ed8;
+      background: linear-gradient(135deg, #eff6ff, #dbeafe);
+      border-color: rgba(37, 99, 235, 0.24);
+      box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82);
+    }
+
+    .usage-corner.codex-only::before {
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
+    }
+
+    .usage-corner.dual {
+      color: #4f46e5;
+      background: linear-gradient(135deg, #f5f3ff, #ede9fe);
+      border-color: rgba(99, 91, 255, 0.25);
+      box-shadow: 0 8px 18px rgba(99, 91, 255, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.82);
+    }
+
+    .usage-corner.dual::before {
+      box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.12);
     }
 
     .badge.blue {
@@ -812,6 +1105,145 @@ function renderAdminPage() {
       gap: 10px;
     }
 
+    .usage-status-row {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      padding: 8px 10px;
+      border-radius: 10px;
+      background: var(--panel-soft);
+      color: var(--text-muted);
+      font-size: 11px;
+      line-height: 1.4;
+    }
+
+    .usage-status {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      min-width: 0;
+      white-space: nowrap;
+      font-weight: 700;
+    }
+
+    .usage-status svg {
+      width: 12px;
+      height: 12px;
+      color: var(--text-muted);
+      flex: 0 0 auto;
+    }
+
+    .usage-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 999px;
+      background: #cbd5e1;
+      flex: 0 0 auto;
+    }
+
+    .usage-dot.active {
+      background: #22c55e;
+      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
+    }
+
+    .usage-state-text {
+      color: var(--text-muted);
+      font-weight: 700;
+    }
+
+    .usage-status.is-active .usage-state-text {
+      color: #15803d;
+    }
+
+    .compact-meta-row {
+      display: grid;
+      gap: 8px;
+      min-width: 0;
+      color: var(--text-muted);
+      font-size: 11px;
+      line-height: 1.45;
+    }
+
+    .compact-reset-list {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      gap: 10px;
+      min-width: 0;
+    }
+
+    .compact-meta-item {
+      display: flex;
+      align-items: baseline;
+      gap: 5px;
+      min-width: 0;
+      flex: 1 1 0;
+    }
+
+    .compact-meta-item label {
+      color: var(--text-muted);
+      font-size: 10px;
+      line-height: 1.4;
+      white-space: nowrap;
+    }
+
+    .compact-meta-item strong {
+      color: var(--text-soft);
+      font-size: 11px;
+      line-height: 1.4;
+      text-align: left;
+      overflow-wrap: anywhere;
+    }
+
+    .compact-meta-actions {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      margin-top: 2px;
+    }
+
+    .compact-meta-actions::before,
+    .compact-meta-actions::after {
+      content: "";
+      height: 1px;
+      background: var(--line);
+      flex: 1 1 auto;
+      min-width: 18px;
+    }
+
+    .details-toggle {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 5px;
+      min-height: 24px;
+      padding: 0 6px;
+      border: 0;
+      background: transparent;
+      color: var(--brand);
+      font-size: 11px;
+      font-weight: 700;
+      white-space: nowrap;
+      cursor: pointer;
+    }
+
+    .details-toggle:hover {
+      color: #4338ca;
+    }
+
+    .details-toggle svg {
+      width: 12px;
+      height: 12px;
+      transition: transform 0.16s ease;
+    }
+
+    .details-toggle.is-expanded svg {
+      transform: rotate(180deg);
+    }
+
     .quota-row {
       display: grid;
       gap: 6px;
@@ -871,6 +1303,8 @@ function renderAdminPage() {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 8px 12px;
+      padding-top: 10px;
+      border-top: 1px solid var(--line);
     }
 
     .meta-item {
@@ -911,6 +1345,38 @@ function renderAdminPage() {
       font-size: 12px;
     }
 
+    .account-actions .btn-secondary.is-current {
+      position: relative;
+      opacity: 1;
+      color: #047857;
+      background: linear-gradient(135deg, #f0fdf4, #dcfce7);
+      border-color: rgba(16, 185, 129, 0.36);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 14px rgba(16, 185, 129, 0.08);
+      cursor: default;
+    }
+
+    .account-actions .btn-secondary.is-current::before {
+      content: "";
+      width: 7px;
+      height: 7px;
+      border-radius: 999px;
+      background: #22c55e;
+      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
+      flex: 0 0 auto;
+    }
+
+    .account-actions .btn-secondary.is-current.codex {
+      color: #1d4ed8;
+      background: linear-gradient(135deg, #eff6ff, #dbeafe);
+      border-color: rgba(37, 99, 235, 0.32);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 14px rgba(37, 99, 235, 0.08);
+    }
+
+    .account-actions .btn-secondary.is-current.codex::before {
+      background: #3b82f6;
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
+    }
+
     .account-status {
       display: inline-flex;
       align-items: center;
@@ -1325,6 +1791,10 @@ function renderAdminPage() {
         padding: 12px;
       }
 
+      .settings-drawer {
+        width: 100vw;
+      }
+
       .modal-head,
       .modal-body {
         padding-left: 16px;
@@ -1366,7 +1836,7 @@ function renderAdminPage() {
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M8 6h13"></path><path d="M8 12h13"></path><path d="M8 18h13"></path><path d="M3 6h.01"></path><path d="M3 12h.01"></path><path d="M3 18h.01"></path></svg>
           \u8BF7\u6C42\u65E5\u5FD7
         </button>
-        <button class="nav-item" type="button" data-nav-target="settings">
+        <button class="nav-item" type="button" data-open-settings>
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.6 1.6 0 0 0 .33 1.76l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.6 1.6 0 0 0-1.76-.33 1.6 1.6 0 0 0-.97 1.46V21a2 2 0 0 1-4 0v-.09a1.6 1.6 0 0 0-.97-1.46 1.6 1.6 0 0 0-1.76.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.6 1.6 0 0 0 .33-1.76 1.6 1.6 0 0 0-1.46-.97H3a2 2 0 0 1 0-4h.09a1.6 1.6 0 0 0 1.46-.97 1.6 1.6 0 0 0-.33-1.76l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.6 1.6 0 0 0 1.76.33H9a1.6 1.6 0 0 0 .97-1.46V3a2 2 0 0 1 4 0v.09a1.6 1.6 0 0 0 .97 1.46 1.6 1.6 0 0 0 1.76-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.6 1.6 0 0 0-.33 1.76V9c0 .64.38 1.22.97 1.46H21a2 2 0 0 1 0 4h-.09c-.64 0-1.22.38-1.46.97Z"></path></svg>
           \u7CFB\u7EDF\u8BBE\u7F6E
         </button>
@@ -1389,6 +1859,7 @@ function renderAdminPage() {
         </div>
         <div class="top-actions">
           <a class="btn-link" href="https://github.com/fchangjun/AI-Zero-Token" target="_blank" rel="noreferrer">GitHub \u4ED3\u5E93</a>
+          <button class="btn-secondary" id="openSettingsBtn" type="button">\u8BBE\u7F6E</button>
           <button class="btn-secondary" id="contactBtn" type="button">\u4EA4\u6D41\u53CD\u9988</button>
           <button class="btn-secondary" id="toggleEmailBtn" type="button">\u8131\u654F\u6A21\u5F0F</button>
           <button class="btn-primary" id="loginBtn" type="button">+ \u65B0\u589E\u8D26\u53F7</button>
@@ -1428,7 +1899,7 @@ function renderAdminPage() {
                 <option value="healthy">\u5065\u5EB7</option>
                 <option value="warning">\u5373\u5C06\u8017\u5C3D</option>
                 <option value="expired">\u5DF2\u8FC7\u671F</option>
-                <option value="active">\u5F53\u524D\u4F7F\u7528</option>
+                <option value="active">\u4F7F\u7528\u4E2D</option>
               </select>
               <select class="control" id="profileSort">
                 <option value="quota-desc">\u6309\u4E3B\u989D\u5EA6\u6392\u5E8F</option>
@@ -1508,32 +1979,6 @@ function renderAdminPage() {
               <select class="control" id="endpointSelect"></select>
             </div>
 
-            <div class="field" id="settings">
-              <label for="defaultModel">\u9ED8\u8BA4\u6A21\u578B</label>
-              <select class="control" id="defaultModel"></select>
-              <p class="hint">\u5207\u6362\u540E\u4F1A\u5F71\u54CD\u672A\u663E\u5F0F\u4F20 <code>model</code> \u7684\u8BF7\u6C42\u3002</p>
-              <p class="hint" id="modelCatalogHint"></p>
-              <div class="actions">
-                <button class="btn-secondary" id="refreshModelsBtn" type="button">\u540C\u6B65 Codex \u6A21\u578B</button>
-                <button class="btn-primary" id="saveModelBtn" type="button">\u4FDD\u5B58\u9ED8\u8BA4\u6A21\u578B</button>
-              </div>
-            </div>
-
-            <div class="field">
-              <label class="checkbox-row" for="proxyEnabled">
-                <input id="proxyEnabled" type="checkbox" />
-                \u542F\u7528\u4E0A\u6E38\u4EE3\u7406
-              </label>
-              <label for="proxyUrl">\u4EE3\u7406\u5730\u5740</label>
-              <input class="input" id="proxyUrl" type="text" placeholder="\u586B\u5199\u4F60\u7684\u4EE3\u7406\u5730\u5740" />
-              <label for="proxyNoProxy">\u76F4\u8FDE\u5730\u5740</label>
-              <input class="input" id="proxyNoProxy" type="text" placeholder="localhost,127.0.0.1,::1" />
-              <p class="hint">\u542F\u7528\u540E\uFF0COAuth \u6362\u53D6 token\u3001\u6A21\u578B\u5237\u65B0\u548C\u63A5\u53E3\u8F6C\u53D1\u4F1A\u901A\u8FC7\u6B64\u4EE3\u7406\u8BBF\u95EE\u6D77\u5916\u4E0A\u6E38\u3002</p>
-              <div class="actions">
-                <button class="btn-primary" id="saveProxyBtn" type="button">\u4FDD\u5B58\u4EE3\u7406\u914D\u7F6E</button>
-              </div>
-            </div>
-
             <div class="field">
               <label for="requestBody">\u8BF7\u6C42\u4F53 JSON</label>
               <textarea class="textarea" id="requestBody" spellcheck="false"></textarea>
@@ -1597,6 +2042,65 @@ function renderAdminPage() {
     </main>
   </div>
 
+  <div class="drawer-backdrop" id="settingsDrawerBackdrop" aria-hidden="true">
+    <aside class="settings-drawer" role="dialog" aria-modal="true" aria-labelledby="settingsDrawerTitle">
+      <div class="settings-drawer-head">
+        <div>
+          <h3 id="settingsDrawerTitle">\u7CFB\u7EDF\u8BBE\u7F6E</h3>
+          <p>\u96C6\u4E2D\u7BA1\u7406\u9ED8\u8BA4\u6A21\u578B\u3001\u4E0A\u6E38\u4EE3\u7406\u548C\u989D\u5EA6\u8017\u5C3D\u540E\u7684\u81EA\u52A8\u5207\u6362\u7B56\u7565\u3002</p>
+        </div>
+        <button class="btn-secondary" id="closeSettingsDrawerBtn" type="button">\u5173\u95ED</button>
+      </div>
+      <div class="settings-drawer-body">
+        <section class="settings-section">
+          <h4>\u9ED8\u8BA4\u6A21\u578B</h4>
+          <div class="field">
+            <label for="defaultModel">\u9ED8\u8BA4\u6A21\u578B</label>
+            <select class="control" id="defaultModel"></select>
+            <p class="hint">\u5F71\u54CD\u672A\u663E\u5F0F\u4F20 <code>model</code> \u7684\u8BF7\u6C42\u3002</p>
+            <p class="hint" id="modelCatalogHint"></p>
+            <div class="actions">
+              <button class="btn-secondary" id="refreshModelsBtn" type="button">\u540C\u6B65 Codex \u6A21\u578B</button>
+            </div>
+          </div>
+        </section>
+
+        <section class="settings-section">
+          <h4>\u4E0A\u6E38\u4EE3\u7406</h4>
+          <div class="field">
+            <label class="checkbox-row" for="proxyEnabled">
+              <input id="proxyEnabled" type="checkbox" />
+              \u542F\u7528\u4E0A\u6E38\u4EE3\u7406
+            </label>
+            <label for="proxyUrl">\u4EE3\u7406\u5730\u5740</label>
+            <input class="input" id="proxyUrl" type="text" placeholder="\u586B\u5199\u4F60\u7684\u4EE3\u7406\u5730\u5740" />
+            <label for="proxyNoProxy">\u76F4\u8FDE\u5730\u5740</label>
+            <input class="input" id="proxyNoProxy" type="text" placeholder="localhost,127.0.0.1,::1" />
+            <p class="hint">\u542F\u7528\u540E\uFF0COAuth \u6362\u53D6 token\u3001\u6A21\u578B\u5237\u65B0\u548C\u63A5\u53E3\u8F6C\u53D1\u4F1A\u901A\u8FC7\u6B64\u4EE3\u7406\u8BBF\u95EE\u6D77\u5916\u4E0A\u6E38\u3002</p>
+            <div class="actions">
+              <button class="btn-secondary" id="testProxyBtn" type="button">\u6D4B\u8BD5\u4EE3\u7406</button>
+            </div>
+          </div>
+        </section>
+
+        <section class="settings-section">
+          <h4>\u8D26\u53F7\u5207\u6362</h4>
+          <div class="field">
+            <label class="checkbox-row" for="autoSwitchEnabled">
+              <input id="autoSwitchEnabled" type="checkbox" />
+              \u989D\u5EA6\u8017\u5C3D\u81EA\u52A8\u5207\u6362
+            </label>
+            <p class="hint">\u5F00\u542F\u540E\uFF0C\u5F53\u524D API \u8D26\u53F7\u989D\u5EA6\u5FEB\u7167\u5DF2\u8017\u5C3D\u65F6\uFF0C\u7F51\u5173\u4F1A\u6309\u8D26\u53F7\u6C60\u987A\u5E8F\u5207\u5230\u4ECD\u6709\u989D\u5EA6\u7684\u8D26\u53F7\uFF0C\u5E76\u5C3D\u91CF\u907F\u5F00 Codex \u6B63\u5728\u4F7F\u7528\u7684\u8D26\u53F7\u3002</p>
+          </div>
+        </section>
+      </div>
+      <div class="settings-drawer-footer">
+        <p class="status-inline" id="settingsStatus"></p>
+        <button class="btn-primary" id="saveSettingsBtn" type="button">\u4FDD\u5B58\u8BBE\u7F6E</button>
+      </div>
+    </aside>
+  </div>
+
   <div class="modal-backdrop" id="imagePreviewModal" aria-hidden="true">
     <section class="modal-card preview-modal-card" role="dialog" aria-modal="true" aria-labelledby="imagePreviewTitle">
       <div class="modal-head">
@@ -1686,7 +2190,8 @@ function renderAdminPage() {
   </div>
 
   <script>
-    const RUNTIME_AUTO_REFRESH_MS = 10 * 60 * 1000;
+    const RUNTIME_AUTO_REFRESH_MS = 5 * 60 * 1000;
+    const ACTIVE_PROFILE_REFRESH_MS = 15 * 1000;
 
     const state = {
       config: null,
@@ -1698,7 +2203,9 @@ function renderAdminPage() {
         sort: "quota-desc",
       },
       selectedProfileIds: {},
+      expandedProfileIds: {},
       testerResultTab: "response",
+      settingsDirty: false,
     };
 
     const endpointMeta = {
@@ -1743,6 +2250,7 @@ function renderAdminPage() {
     const accountModal = document.getElementById("accountModal");
     const contactModal = document.getElementById("contactModal");
     const imagePreviewModal = document.getElementById("imagePreviewModal");
+    const settingsDrawerBackdrop = document.getElementById("settingsDrawerBackdrop");
     const contactBtn = document.getElementById("contactBtn");
     const previewModalImage = document.getElementById("previewModalImage");
     const previewModalMeta = document.getElementById("previewModalMeta");
@@ -1759,6 +2267,10 @@ function renderAdminPage() {
     const proxyEnabled = document.getElementById("proxyEnabled");
     const proxyUrl = document.getElementById("proxyUrl");
     const proxyNoProxy = document.getElementById("proxyNoProxy");
+    const testProxyBtn = document.getElementById("testProxyBtn");
+    const autoSwitchEnabled = document.getElementById("autoSwitchEnabled");
+    const settingsStatus = document.getElementById("settingsStatus");
+    const saveSettingsBtn = document.getElementById("saveSettingsBtn");
 
     function setBusy(button, busy) {
       if (button) {
@@ -1850,6 +2362,9 @@ function renderAdminPage() {
       if (minutes === 60 * 24) {
         return "\u65E5\u989D\u5EA6";
       }
+      if (minutes === 60 * 5) {
+        return "5 \u5C0F\u65F6\u989D\u5EA6";
+      }
       if (minutes === 60 * 24 * 7) {
         return "\u5468\u989D\u5EA6";
       }
@@ -1862,6 +2377,68 @@ function renderAdminPage() {
         : "unknown";
     }
 
+    function getPlanRank(profile) {
+      const plan = getPlanType(profile).toLowerCase();
+      if (plan.indexOf("enterprise") !== -1 || plan.indexOf("business") !== -1) {
+        return 60;
+      }
+      if (plan.indexOf("team") !== -1) {
+        return 50;
+      }
+      if (plan.indexOf("pro") !== -1 || plan.indexOf("premium") !== -1) {
+        return 40;
+      }
+      if (plan.indexOf("plus") !== -1) {
+        return 30;
+      }
+      if (plan.indexOf("free") !== -1) {
+        return 10;
+      }
+      return 0;
+    }
+
+    function getPlanKey(profile) {
+      const plan = getPlanType(profile).toLowerCase();
+      if (plan.indexOf("enterprise") !== -1 || plan.indexOf("business") !== -1) {
+        return "enterprise";
+      }
+      if (plan.indexOf("team") !== -1) {
+        return "team";
+      }
+      if (plan.indexOf("pro") !== -1 || plan.indexOf("premium") !== -1) {
+        return plan.indexOf("premium") !== -1 ? "premium" : "pro";
+      }
+      if (plan.indexOf("plus") !== -1) {
+        return "plus";
+      }
+      if (plan.indexOf("free") !== -1) {
+        return "free";
+      }
+      return "unknown";
+    }
+
+    function getUsageCorner(profile, isCodexActive) {
+      if (profile.isActive && isCodexActive) {
+        return {
+          className: "dual",
+          label: "API + Codex",
+        };
+      }
+      if (profile.isActive) {
+        return {
+          className: "api-only",
+          label: "API",
+        };
+      }
+      if (isCodexActive) {
+        return {
+          className: "codex-only",
+          label: "Codex",
+        };
+      }
+      return null;
+    }
+
     function getQuotaSnapshotTime(profile) {
       return profile && profile.quota && typeof profile.quota.capturedAt === "number"
         ? profile.quota.capturedAt
@@ -1933,12 +2510,12 @@ function renderAdminPage() {
       title.textContent = "\u53D1\u73B0\u65B0\u7248\u672C\u53EF\u66F4\u65B0";
       detail.textContent = "\u5F53\u524D\u7248\u672C " + versionStatus.currentVersion + "\uFF0C\u6700\u65B0\u7248\u672C "
         + versionStatus.latestVersion + "\u3002\u66F4\u65B0\u540E\u53EF\u83B7\u5F97\u6700\u65B0\u6A21\u578B\u5217\u8868\u903B\u8F91\u3001\u7BA1\u7406\u9875\u4F53\u9A8C\u548C\u63A5\u53E3\u4FEE\u590D\u3002";
-      command.textContent = "npm install -g " + versionStatus.packageName + "@latest";
+      command.textContent = "npm install -g " + versionStatus.packageName;
       panel.classList.add("is-visible");
     }
 
     function supportsImageGeneration(profile) {
-      return getPlanType(profile) !== "free";
+      return Boolean(profile);
     }
 
     function getImageCapability(profile) {
@@ -1954,10 +2531,10 @@ function renderAdminPage() {
       const planType = getPlanType(profile);
       if (planType === "free") {
         return {
-          supported: false,
-          label: "\u751F\u56FE\u53D7\u9650",
-          detail: "free \u5957\u9910\u8D26\u53F7\u4E0D\u652F\u6301\u56FE\u7247\u751F\u6210\uFF0C\u8BF7\u5207\u6362\u5230 Plus \u6216\u66F4\u9AD8\u5957\u9910\u8D26\u53F7\u3002",
-          badgeClass: "red",
+          supported: true,
+          label: "\u53EF\u5C1D\u8BD5\u751F\u56FE",
+          detail: "free \u8D26\u53F7\u53EF\u5C1D\u8BD5\u56FE\u7247\u751F\u6210\uFF0C\u989D\u5EA6\u548C\u53EF\u7528\u6027\u4EE5\u4E0A\u6E38\u8FD4\u56DE\u4E3A\u51C6\u3002",
+          badgeClass: "orange",
         };
       }
 
@@ -2050,6 +2627,41 @@ function renderAdminPage() {
       return Math.max(0, Math.min(100, value));
     }
 
+    function isProfileQuotaExhausted(profile) {
+      if (!profile || !profile.quota) {
+        return false;
+      }
+
+      return getPrimaryUsage(profile) >= 100 || getSecondaryUsage(profile) >= 100;
+    }
+
+    function findProfileById(profileId) {
+      const profiles = state.config && Array.isArray(state.config.profiles) ? state.config.profiles : [];
+      return profiles.find(function (profile) {
+        return profile.profileId === profileId;
+      }) || null;
+    }
+
+    function confirmQuotaSwitch(action, profileId) {
+      if (action !== "activate" && action !== "apply-codex") {
+        return true;
+      }
+
+      const profile = findProfileById(profileId);
+      if (!isProfileQuotaExhausted(profile)) {
+        return true;
+      }
+
+      const target = action === "activate" ? "\u7F51\u5173" : "Codex";
+      const label = getProfileDisplayLabel(profile);
+      const message = "\u8D26\u53F7 \u201C" + label + "\u201D \u7684\u989D\u5EA6\u5FEB\u7167\u663E\u793A\u5DF2\u8017\u5C3D\u3002\\n\\n\u4ECD\u8981\u5E94\u7528\u5230 " + target + " \u5417\uFF1F";
+      const confirmed = window.confirm(message);
+      if (!confirmed) {
+        authStatus.textContent = "\u5DF2\u53D6\u6D88\u5E94\u7528\u5230 " + target + "\u3002";
+      }
+      return confirmed;
+    }
+
     function getProfileHealth(profile) {
       const now = Date.now();
       if (profile && profile.expiresAt && profile.expiresAt <= now) {
@@ -2105,6 +2717,37 @@ function renderAdminPage() {
       return "\u672A\u77E5";
     }
 
+    function formatCompactDateTime(value) {
+      if (!value) {
+        return "\u6682\u65E0\u6570\u636E";
+      }
+      const date = new Date(value);
+      if (Number.isNaN(date.getTime())) {
+        return "\u672A\u77E5";
+      }
+      const month = String(date.getMonth() + 1);
+      const day = String(date.getDate());
+      const time = date.toLocaleTimeString("zh-CN", { hour12: false, hour: "2-digit", minute: "2-digit" });
+      return month + "/" + day + " " + time;
+    }
+
+    function describeCompactReset(profile, slot) {
+      if (!profile || !profile.quota) {
+        return "\u6682\u65E0\u6570\u636E";
+      }
+
+      const quota = profile.quota;
+      const resetAt = slot === "primary" ? quota.primaryResetAt : quota.secondaryResetAt;
+      const resetAfter = slot === "primary" ? quota.primaryResetAfterSeconds : quota.secondaryResetAfterSeconds;
+      if (typeof resetAt === "number" && resetAt > 0) {
+        return formatCompactDateTime(resetAt * 1000);
+      }
+      if (typeof resetAfter === "number" && resetAfter > 0) {
+        return formatCompactDuration(resetAfter) + "\u540E";
+      }
+      return "\u672A\u77E5";
+    }
+
     function getQuotaWindowLabel(profile, slot) {
       const quota = profile && profile.quota ? profile.quota : null;
       if (!quota) {
@@ -2114,6 +2757,17 @@ function renderAdminPage() {
       return formatWindowLabel(quota && quota[field]);
     }
 
+    function getResetLabel(profile, slot) {
+      const label = getQuotaWindowLabel(profile, slot);
+      if (label === "5 \u5C0F\u65F6\u989D\u5EA6") {
+        return "5\u5C0F\u65F6\u91CD\u7F6E";
+      }
+      if (label === "\u5468\u989D\u5EA6") {
+        return "\u5468\u91CD\u7F6E";
+      }
+      return label.replace("\u989D\u5EA6", "") + "\u91CD\u7F6E";
+    }
+
     function formatQuotaUsage(percent, profile, slot) {
       if (!profile || !profile.quota) {
         return "\u7B49\u5F85\u5237\u65B0";
@@ -2362,50 +3016,58 @@ function renderAdminPage() {
       const codexProfile = codexAccountId && Array.isArray(config.profiles)
         ? config.profiles.find(function (profile) { return profile.accountId === codexAccountId; })
         : null;
+      const gatewayLabel = config.profile ? getProfileDisplayLabel(config.profile) : "\u672A\u6FC0\u6D3B\u8D26\u53F7";
+      const codexLabel = codexProfile
+        ? getProfileDisplayLabel(codexProfile)
+        : (codexAccountId ? maskIdentifier(codexAccountId) : "\u672A\u68C0\u6D4B\u5230");
 
       return [
         {
+          icon: "users",
+          iconClass: "blue",
           label: "\u8D26\u53F7\u603B\u6570",
           value: String(config.status.profileCount || 0),
           detail: "\u5DF2\u4FDD\u5B58\u5230\u672C\u5730\u8D26\u53F7\u6C60",
         },
         {
-          label: "\u5F53\u524D\u4F7F\u7528\u8D26\u53F7",
-          value: getProfileDisplayLabel(config.profile),
-          detail: config.profile && config.profile.profileId
-            ? "Profile ID: " + config.profile.profileId + " \xB7 " + getPlanType(config.profile)
-            : "\u5C1A\u672A\u6FC0\u6D3B\u8D26\u53F7",
-          compact: true,
+          kind: "account-status",
+          label: "\u5F53\u524D\u8D26\u53F7\u72B6\u6001",
+          gatewayLabel: gatewayLabel,
+          codexLabel: codexLabel,
         },
         {
+          icon: "model",
+          iconClass: "brand",
           label: "\u9ED8\u8BA4\u6A21\u578B",
           value: config.settings.defaultModel || "-",
           detail: "\u672A\u663E\u5F0F\u6307\u5B9A model \u65F6\u751F\u6548",
           compact: true,
         },
         {
-          label: "Codex \u5F53\u524D\u8D26\u53F7",
-          value: codexProfile ? getProfileDisplayLabel(codexProfile) : (codexAccountId ? maskIdentifier(codexAccountId) : "\u672A\u68C0\u6D4B\u5230"),
-          detail: config.codex && config.codex.exists ? "\u6765\u81EA ~/.codex/auth.json" : "\u5C1A\u672A\u5E94\u7528\u5230 Codex",
-          compact: true,
-        },
-        {
+          icon: "version",
+          iconClass: config.versionStatus && config.versionStatus.needsUpdate ? "orange" : "green",
           label: "\u5F53\u524D\u7248\u672C",
           value: getVersionValue(config),
           detail: getVersionDetail(config),
           compact: true,
         },
         {
+          icon: "requests",
+          iconClass: "blue",
           label: "\u4ECA\u65E5\u8BF7\u6C42\u6570",
           value: String(requests.length),
           detail: "\u57FA\u4E8E\u672C\u9875\u6700\u8FD1\u6D4B\u8BD5\u8BB0\u5F55",
         },
         {
+          icon: "latency",
+          iconClass: "orange",
           label: "\u5E73\u5747\u8017\u65F6",
           value: requests.length ? (avg / 1000).toFixed(2) + " s" : "--",
           detail: requests.length ? "\u7EDF\u8BA1\u6700\u8FD1 " + String(requests.length) + " \u6B21" : "\u7B49\u5F85\u8BF7\u6C42\u6837\u672C",
         },
         {
+          icon: "service",
+          iconClass: config.status.loggedIn ? "green" : "orange",
           label: "\u670D\u52A1\u72B6\u6001",
           value: config.status.loggedIn ? "\u8FD0\u884C\u4E2D" : "\u5F85\u767B\u5F55",
           detail: config.status.loggedIn ? "\u7F51\u5173\u53EF\u8F6C\u53D1\u8BF7\u6C42" : "\u8BF7\u5148\u5B8C\u6210 OAuth \u767B\u5F55",
@@ -2414,14 +3076,63 @@ function renderAdminPage() {
       ];
     }
 
+    function getSummaryIcon(name) {
+      if (name === "users") {
+        return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>';
+      }
+      if (name === "model") {
+        return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"></rect><path d="M9 9h6v6H9z"></path><path d="M9 1v3"></path><path d="M15 1v3"></path><path d="M9 20v3"></path><path d="M15 20v3"></path><path d="M20 9h3"></path><path d="M20 15h3"></path><path d="M1 9h3"></path><path d="M1 15h3"></path></svg>';
+      }
+      if (name === "version") {
+        return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6 9 17l-5-5"></path></svg>';
+      }
+      if (name === "requests") {
+        return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h18"></path><path d="m15 6 6 6-6 6"></path></svg>';
+      }
+      if (name === "latency") {
+        return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="9"></circle></svg>';
+      }
+      if (name === "service") {
+        return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3 4 7v6c0 5 3.4 7.7 8 8 4.6-.3 8-3 8-8V7l-8-4Z"></path><path d="m9 12 2 2 4-4"></path></svg>';
+      }
+      return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"></circle></svg>';
+    }
+
     function renderOverview(config) {
       const container = document.getElementById("summaryGrid");
       const cards = getOverviewCards(config);
       container.innerHTML = cards.map(function (card) {
+        if (card.kind === "account-status") {
+          return ""
+            + '<article class="summary-card account-status-summary">'
+            +   '<div class="summary-card-head">'
+            +     '<span class="summary-icon green">'
+            +       '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 17 10 11 4 5"></path><path d="M12 19h8"></path></svg>'
+            +     "</span>"
+            +     "<label>" + escapeHtml(card.label) + "</label>"
+            +   "</div>"
+            +   '<div class="account-status-list">'
+            +     '<div class="account-status-line gateway">'
+            +       '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"></circle><path d="M3 12h18"></path><path d="M12 3c2.5 2.7 3.8 5.7 3.8 9S14.5 18.3 12 21"></path><path d="M12 3c-2.5 2.7-3.8 5.7-3.8 9s1.3 6.3 3.8 9"></path></svg>'
+            +       "<span>\u7F51\u5173\uFF1A</span>"
+            +       "<strong>" + escapeHtml(card.gatewayLabel) + "</strong>"
+            +     "</div>"
+            +     '<div class="account-status-line codex">'
+            +       '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 17 10 11 4 5"></path><path d="M12 19h8"></path></svg>'
+            +       "<span>Codex\uFF1A</span>"
+            +       "<strong>" + escapeHtml(card.codexLabel) + "</strong>"
+            +     "</div>"
+            +   "</div>"
+            + "</article>";
+        }
         const valueClass = card.compact ? "summary-value-sm" : "";
+        const iconClass = card.iconClass ? " " + card.iconClass : "";
         return ""
           + '<article class="summary-card">'
-          +   "<label>" + escapeHtml(card.label) + "</label>"
+          +   '<div class="summary-card-head">'
+          +     '<span class="summary-icon' + iconClass + '">' + getSummaryIcon(card.icon) + "</span>"
+          +     "<label>" + escapeHtml(card.label) + "</label>"
+          +   "</div>"
           +   '<strong class="' + valueClass + '">' + escapeHtml(card.value) + "</strong>"
           +   "<span>" + escapeHtml(card.detail) + "</span>"
           + "</article>";
@@ -2433,6 +3144,7 @@ function renderAdminPage() {
       const search = state.filters.search.trim().toLowerCase();
       const status = state.filters.status;
       const sort = state.filters.sort;
+      const codexAccountId = config.codex && config.codex.accountId ? config.codex.accountId : "";
 
       const filtered = profiles.filter(function (profile) {
         const label = getProfileDisplayLabel(profile).toLowerCase();
@@ -2447,7 +3159,8 @@ function renderAdminPage() {
         }
 
         const health = getProfileHealth(profile);
-        if (status === "active" && !profile.isActive) {
+        const isCodexActive = Boolean(codexAccountId && profile.accountId === codexAccountId);
+        if (status === "active" && !profile.isActive && !isCodexActive) {
           return false;
         }
         if (status === "healthy" && health.key !== "healthy") {
@@ -2463,6 +3176,24 @@ function renderAdminPage() {
       });
 
       filtered.sort(function (a, b) {
+        const aCodexActive = Boolean(codexAccountId && a.accountId === codexAccountId);
+        const bCodexActive = Boolean(codexAccountId && b.accountId === codexAccountId);
+        const activeDiff = Number(b.isActive || bCodexActive) - Number(a.isActive || aCodexActive);
+        if (activeDiff !== 0) {
+          return activeDiff;
+        }
+        const gatewayDiff = Number(b.isActive) - Number(a.isActive);
+        if (gatewayDiff !== 0) {
+          return gatewayDiff;
+        }
+        const codexDiff = Number(bCodexActive) - Number(aCodexActive);
+        if (codexDiff !== 0) {
+          return codexDiff;
+        }
+        const planDiff = getPlanRank(b) - getPlanRank(a);
+        if (planDiff !== 0) {
+          return planDiff;
+        }
         if (sort === "latency-asc") {
           const aCapturedAt = getQuotaSnapshotTime(a) || 0;
           const bCapturedAt = getQuotaSnapshotTime(b) || 0;
@@ -2499,6 +3230,11 @@ function renderAdminPage() {
           delete state.selectedProfileIds[profileId];
         }
       });
+      Object.keys(state.expandedProfileIds).forEach(function (profileId) {
+        if (!availableIds[profileId]) {
+          delete state.expandedProfileIds[profileId];
+        }
+      });
     }
 
     function updateSelectedProfileControls() {
@@ -2512,6 +3248,7 @@ function renderAdminPage() {
       syncSelectedProfiles(config);
       updateSelectedProfileControls();
       const profiles = getFilteredProfiles(config);
+      const codexAccountId = config.codex && config.codex.accountId ? config.codex.accountId : "";
       const gridClass = profiles.length <= 0
         ? ""
         : profiles.length === 1
@@ -2530,22 +3267,29 @@ function renderAdminPage() {
 
       container.innerHTML = profiles.map(function (profile) {
         const selected = !!state.selectedProfileIds[profile.profileId];
-        const isSingleProfile = profiles.length === 1;
+        const expanded = !!state.expandedProfileIds[profile.profileId];
         const health = getProfileHealth(profile);
         const planType = getPlanType(profile);
+        const planKey = getPlanKey(profile);
         const imageCapability = getImageCapability(profile);
         const primary = getPrimaryUsage(profile);
         const secondary = getSecondaryUsage(profile);
         const primaryClass = health.barClass || "blue";
         const secondaryClass = secondary >= 85 ? "orange" : "blue";
+        const isCodexActive = Boolean(codexAccountId && profile.accountId === codexAccountId);
+        const usageCorner = getUsageCorner(profile, isCodexActive);
+        const apiUsageClass = profile.isActive ? " is-active" : "";
+        const codexUsageClass = isCodexActive ? " is-active" : "";
         const actionButton = profile.isActive
-          ? (isSingleProfile
-            ? '<span class="account-status">\u5F53\u524D\u4F7F\u7528\u4E2D</span>'
-            : '<button class="btn-secondary" type="button" disabled>\u5F53\u524D\u4F7F\u7528\u4E2D</button>')
-          : '<button class="btn-secondary" type="button" data-profile-action="activate" data-profile-id="' + escapeHtml(profile.profileId) + '">\u5207\u6362</button>';
+          ? '<button class="btn-secondary is-current" type="button" disabled>\u7F51\u5173\u4F7F\u7528\u4E2D</button>'
+          : '<button class="btn-secondary" type="button" data-profile-action="activate" data-profile-id="' + escapeHtml(profile.profileId) + '">\u5E94\u7528\u7F51\u5173</button>';
+        const codexButton = isCodexActive
+          ? '<button class="btn-secondary is-current codex" type="button" disabled>Codex \u4F7F\u7528\u4E2D</button>'
+          : '<button class="btn-secondary" type="button" data-profile-action="apply-codex" data-profile-id="' + escapeHtml(profile.profileId) + '">\u5E94\u7528 Codex</button>';
 
         return ""
-          + '<article class="account-card" data-profile-card="' + escapeHtml(profile.profileId) + '">'
+          + '<article class="account-card plan-' + escapeHtml(planKey) + '" data-profile-card="' + escapeHtml(profile.profileId) + '">'
+          +   (usageCorner ? '<span class="usage-corner ' + escapeHtml(usageCorner.className) + '"><span>' + escapeHtml(usageCorner.label) + "</span></span>" : "")
           +   '<div class="account-head">'
           +     '<div class="account-title">'
           +       '<div class="account-name">'
@@ -2553,7 +3297,6 @@ function renderAdminPage() {
           +         "<strong>" + escapeHtml(getProfileDisplayLabel(profile)) + "</strong>"
           +       "</div>"
           +       '<div class="badge-row">'
-          +         (profile.isActive ? '<span class="badge blue">\u5F53\u524D\u4F7F\u7528</span>' : "")
           +         '<span class="badge brand">' + escapeHtml(planType) + "</span>"
           +         '<span class="badge ' + escapeHtml(health.badgeClass) + '">' + escapeHtml(health.label) + "</span>"
           +         '<span class="badge ' + escapeHtml(imageCapability.badgeClass) + '">' + escapeHtml(imageCapability.label) + "</span>"
@@ -2571,18 +3314,45 @@ function renderAdminPage() {
           +       '<div class="progress-track"><div class="progress-bar ' + escapeHtml(secondaryClass) + '" style="width:' + escapeHtml(String(secondary)) + '%"></div></div>'
           +     "</div>"
           +   "</div>"
-          +   '<div class="meta-grid">'
-          +     '<div class="meta-item"><label>\u5957\u9910</label><strong>' + escapeHtml(planType) + "</strong></div>"
-          +     '<div class="meta-item"><label>\u751F\u56FE\u80FD\u529B</label><strong>' + escapeHtml(imageCapability.detail) + "</strong></div>"
-          +     '<div class="meta-item"><label>\u91CD\u7F6E\u65F6\u95F4</label><strong>' + escapeHtml(describeReset(profile, "primary")) + "</strong></div>"
-          +     '<div class="meta-item"><label>\u989D\u5EA6\u5FEB\u7167</label><strong>' + escapeHtml(describeQuotaSnapshot(profile)) + "</strong></div>"
-          +     '<div class="meta-item"><label>\u989D\u5EA6\u9650\u5236</label><strong>' + escapeHtml(describeQuotaLimit(profile)) + "</strong></div>"
-          +     '<div class="meta-item"><label>Account ID</label><code>' + escapeHtml(state.showEmails ? (profile.accountId || "\u672A\u63D0\u4F9B") : maskIdentifier(profile.accountId || "\u672A\u63D0\u4F9B")) + "</code></div>"
-          +     '<div class="meta-item"><label>\u8FC7\u671F\u65F6\u95F4</label><span>' + escapeHtml(formatTime(profile.expiresAt)) + "</span></div>"
+          +   '<div class="usage-status-row">'
+          +     '<span class="usage-status' + apiUsageClass + '">'
+          +       '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"></circle><path d="M3 12h18"></path><path d="M12 3c2.5 2.7 3.8 5.7 3.8 9S14.5 18.3 12 21"></path><path d="M12 3c-2.5 2.7-3.8 5.7-3.8 9s1.3 6.3 3.8 9"></path></svg>'
+          +       "<span>API</span>"
+          +       '<span class="usage-dot' + (profile.isActive ? " active" : "") + '"></span>'
+          +       '<span class="usage-state-text">' + (profile.isActive ? "\u4F7F\u7528\u4E2D" : "\u672A\u4F7F\u7528") + "</span>"
+          +     "</span>"
+          +     '<span class="usage-status' + codexUsageClass + '">'
+          +       '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 17 10 11 4 5"></path><path d="M12 19h8"></path></svg>'
+          +       "<span>Codex</span>"
+          +       '<span class="usage-dot' + (isCodexActive ? " active" : "") + '"></span>'
+          +       '<span class="usage-state-text">' + (isCodexActive ? "\u4F7F\u7528\u4E2D" : "\u672A\u4F7F\u7528") + "</span>"
+          +     "</span>"
           +   "</div>"
+          +   '<div class="compact-meta-row">'
+          +     '<div class="compact-reset-list">'
+          +       '<div class="compact-meta-item"><label>' + escapeHtml(getResetLabel(profile, "primary")) + '</label><strong>' + escapeHtml(describeCompactReset(profile, "primary")) + "</strong></div>"
+          +       '<div class="compact-meta-item"><label>' + escapeHtml(getResetLabel(profile, "secondary")) + '</label><strong>' + escapeHtml(describeCompactReset(profile, "secondary")) + "</strong></div>"
+          +     "</div>"
+          +     '<div class="compact-meta-actions">'
+          +       '<button class="details-toggle' + (expanded ? " is-expanded" : "") + '" type="button" data-profile-action="toggle-details" data-profile-id="' + escapeHtml(profile.profileId) + '">'
+          +         "<span>" + (expanded ? "\u6536\u8D77\u8BE6\u60C5" : "\u67E5\u770B\u8BE6\u60C5") + "</span>"
+          +         '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"></path></svg>'
+          +       "</button>"
+          +     "</div>"
+          +   "</div>"
+          +   (expanded
+            ? '<div class="meta-grid">'
+              + '<div class="meta-item"><label>\u5957\u9910</label><strong>' + escapeHtml(planType) + "</strong></div>"
+              + '<div class="meta-item"><label>\u751F\u56FE\u80FD\u529B</label><strong>' + escapeHtml(imageCapability.detail) + "</strong></div>"
+              + '<div class="meta-item"><label>\u989D\u5EA6\u5FEB\u7167</label><strong>' + escapeHtml(describeQuotaSnapshot(profile)) + "</strong></div>"
+              + '<div class="meta-item"><label>\u989D\u5EA6\u9650\u5236</label><strong>' + escapeHtml(describeQuotaLimit(profile)) + "</strong></div>"
+              + '<div class="meta-item"><label>Account ID</label><code>' + escapeHtml(state.showEmails ? (profile.accountId || "\u672A\u63D0\u4F9B") : maskIdentifier(profile.accountId || "\u672A\u63D0\u4F9B")) + "</code></div>"
+              + '<div class="meta-item"><label>\u8FC7\u671F\u65F6\u95F4</label><span>' + escapeHtml(formatTime(profile.expiresAt)) + "</span></div>"
+              + "</div>"
+            : "")
           +   '<div class="account-actions">'
           +     actionButton
-          +     '<button class="btn-secondary" type="button" data-profile-action="apply-codex" data-profile-id="' + escapeHtml(profile.profileId) + '">\u5E94\u7528\u5230 Codex</button>'
+          +     codexButton
           +     '<button class="btn-secondary" type="button" data-profile-action="export" data-profile-id="' + escapeHtml(profile.profileId) + '">\u5BFC\u51FA</button>'
           +     '<button class="btn-danger" type="button" data-profile-action="remove" data-profile-id="' + escapeHtml(profile.profileId) + '">\u5220\u9664</button>'
           +   "</div>"
@@ -2747,6 +3517,7 @@ function renderAdminPage() {
         ["Provider", config.status.activeProvider || "openai-codex"],
         ["\u9ED8\u8BA4\u6A21\u578B", config.settings.defaultModel],
         ["\u4E0A\u6E38\u4EE3\u7406", config.settings.networkProxy && config.settings.networkProxy.enabled ? "\u5DF2\u542F\u7528" : "\u672A\u542F\u7528"],
+        ["\u81EA\u52A8\u5207\u6362", config.settings.autoSwitch && config.settings.autoSwitch.enabled ? "\u5DF2\u542F\u7528" : "\u672A\u542F\u7528"],
         ["\u5F53\u524D\u7248\u672C", getVersionValue(config)],
         ["\u5F53\u524D\u5957\u9910", config.profile ? getPlanType(config.profile) : "\u672A\u767B\u5F55"],
         ["\u751F\u56FE\u80FD\u529B", getImageCapability(config.profile).detail],
@@ -2766,6 +3537,7 @@ function renderAdminPage() {
         ["\u5F53\u524D\u8D26\u53F7", getProfileDisplayLabel(config.profile)],
         ["\u9ED8\u8BA4\u6A21\u578B", config.settings.defaultModel],
         ["\u4E0A\u6E38\u4EE3\u7406", config.settings.networkProxy && config.settings.networkProxy.enabled ? config.settings.networkProxy.url : "\u672A\u542F\u7528"],
+        ["\u81EA\u52A8\u5207\u6362", config.settings.autoSwitch && config.settings.autoSwitch.enabled ? "\u5DF2\u542F\u7528" : "\u672A\u542F\u7528"],
         ["\u7248\u672C\u72B6\u6001", getVersionDetail(config)],
         ["\u5F53\u524D\u5957\u9910", config.profile ? getPlanType(config.profile) : "\u672A\u767B\u5F55"],
         ["\u751F\u56FE\u80FD\u529B", getImageCapability(config.profile).detail],
@@ -2832,6 +3604,47 @@ function renderAdminPage() {
       proxyNoProxy.value = proxy.noProxy || "localhost,127.0.0.1,::1";
     }
 
+    function renderAutoSwitchSettings(config) {
+      const autoSwitch = config.settings.autoSwitch || {
+        enabled: false,
+      };
+      autoSwitchEnabled.checked = !!autoSwitch.enabled;
+    }
+
+    function isSettingsDrawerOpen() {
+      return settingsDrawerBackdrop.classList.contains("is-open");
+    }
+
+    function renderSettingsFields(config, options) {
+      if (!config) {
+        return;
+      }
+
+      if (!(options && options.force) && state.settingsDirty && isSettingsDrawerOpen()) {
+        return;
+      }
+
+      renderModelOptions(config);
+      renderModelCatalogStatus(config);
+      renderProxySettings(config);
+      renderAutoSwitchSettings(config);
+      state.settingsDirty = false;
+    }
+
+    function markSettingsDirty() {
+      state.settingsDirty = true;
+    }
+
+    function resetSettingsDraft() {
+      state.settingsDirty = false;
+      if (state.config) {
+        renderSettingsFields(state.config, {
+          force: true,
+        });
+      }
+      settingsStatus.textContent = "";
+    }
+
     function syncHero(config) {
       const profileText = config.profile
         ? "\u5F53\u524D\u8D26\u53F7\u4E3A " + getProfileDisplayLabel(config.profile) + "\uFF0C\u5957\u9910 " + getPlanType(config.profile) + "\uFF0C\u53EF\u5728\u53F3\u4FA7\u5B8C\u6210\u6A21\u578B\u5207\u6362\u548C\u63A5\u53E3\u8C03\u8BD5\u3002"
@@ -2844,10 +3657,10 @@ function renderAdminPage() {
       const isImageEndpoint = endpointSelect.value === "/v1/images/generations" || endpointSelect.value === "/v1/images/edits";
       imageCapabilityHint.textContent = capability.detail;
       imageCapabilityHint.className = capability.supported && !isImageEndpoint ? "hint" : "hint warn";
-      runTestBtn.disabled = isImageEndpoint && !capability.supported;
+      runTestBtn.disabled = isImageEndpoint && !config.profile;
       if (isImageEndpoint && !capability.supported) {
         testerMeta.textContent = capability.label;
-      } else if (testerMeta.textContent === capability.label || testerMeta.textContent === "\u751F\u56FE\u53D7\u9650") {
+      } else if (testerMeta.textContent === capability.label || testerMeta.textContent === "\u751F\u56FE\u53D7\u9650" || testerMeta.textContent === "\u53EF\u5C1D\u8BD5\u751F\u56FE") {
         testerMeta.textContent = "\u51C6\u5907\u5C31\u7EEA";
       }
     }
@@ -2866,9 +3679,7 @@ function renderAdminPage() {
       syncHero(config);
       renderOverview(config);
       renderProfiles(config);
-      renderModelOptions(config);
-      renderModelCatalogStatus(config);
-      renderProxySettings(config);
+      renderSettingsFields(config);
       renderUpdatePanel(config);
       renderEndpoints(config);
       renderServiceInfo(config);
@@ -2878,7 +3689,7 @@ function renderAdminPage() {
       authStatus.textContent = config.status.loggedIn
         ? (supportsImageGeneration(config.profile)
           ? "\u7F51\u5173\u5DF2\u53EF\u76F4\u63A5\u8F6C\u53D1\u8BF7\u6C42\uFF0C\u53EF\u4EE5\u5728\u4E0B\u65B9\u5207\u6362\u9ED8\u8BA4\u6A21\u578B\u5E76\u53D1\u9001\u6D4B\u8BD5\u8BF7\u6C42\u3002"
-          : "\u5F53\u524D\u8D26\u53F7\u53EF\u7528\u4E8E\u6587\u672C\u63A5\u53E3\uFF0C\u4F46\u4E0D\u652F\u6301\u56FE\u7247\u751F\u6210\u3002\u8BF7\u5207\u6362\u5230 Plus \u6216\u66F4\u9AD8\u5957\u9910\u8D26\u53F7\u3002")
+          : "\u5F53\u524D\u8D26\u53F7\u672A\u5C31\u7EEA\uFF0C\u8BF7\u91CD\u65B0\u767B\u5F55\u540E\u518D\u6D4B\u8BD5\u63A5\u53E3\u3002")
         : "\u8BF7\u5148\u70B9\u51FB\u201C\u65B0\u589E\u8D26\u53F7\u201D\uFF0C\u5B8C\u6210 OAuth \u540E\u518D\u6D4B\u8BD5\u63A5\u53E3\u3002";
       if (!requestBody.value) {
         requestBody.value = buildExample(endpointSelect.value || "/v1/chat/completions");
@@ -2926,6 +3737,8 @@ function renderAdminPage() {
       const silent = !!(options && options.silent);
       const url = syncRuntime ? "/_gateway/admin/runtime-refresh" : "/_gateway/admin/config";
       const requestOptions = syncRuntime ? { method: "POST" } : undefined;
+      const previousProfileId = state.config && state.config.profile ? state.config.profile.profileId : "";
+      const previousStatus = authStatus.textContent;
 
       if (!silent) {
         testerMeta.textContent = syncRuntime ? "\u540C\u6B65\u989D\u5EA6\u4E0E\u7248\u672C\u72B6\u6001" : "\u5237\u65B0\u7BA1\u7406\u72B6\u6001";
@@ -2933,9 +3746,14 @@ function renderAdminPage() {
 
       const config = await fetchJson(url, requestOptions);
       renderConfig(config);
+      const nextProfileId = config && config.profile ? config.profile.profileId : "";
 
       if (!silent) {
         testerMeta.textContent = "\u51C6\u5907\u5C31\u7EEA";
+      } else if (previousProfileId && nextProfileId && previousProfileId !== nextProfileId) {
+        authStatus.textContent = "\u68C0\u6D4B\u5230\u989D\u5EA6\u8017\u5C3D\uFF0C\u7F51\u5173\u5DF2\u81EA\u52A8\u5207\u6362\u5230: " + getProfileDisplayLabel(config.profile);
+      } else {
+        authStatus.textContent = previousStatus;
       }
 
       return config;
@@ -2956,6 +3774,20 @@ function renderAdminPage() {
       }, RUNTIME_AUTO_REFRESH_MS);
     }
 
+    function scheduleActiveProfileRefresh() {
+      window.setInterval(function () {
+        if (document.hidden || !state.config || !state.config.settings || !state.config.settings.autoSwitch || !state.config.settings.autoSwitch.enabled) {
+          return;
+        }
+
+        refreshConfig({
+          silent: true,
+        }).catch(function (error) {
+          console.warn("[admin] active profile refresh failed", error && error.message ? error.message : String(error));
+        });
+      }, ACTIVE_PROFILE_REFRESH_MS);
+    }
+
     async function syncQuotaAfterProfileChange(config, sourceLabel) {
       if (!config || !config.profile || config.profile.quota) {
         return config;
@@ -3018,6 +3850,10 @@ function renderAdminPage() {
     }
 
     async function runProfileAction(action, profileId, button) {
+      if (!confirmQuotaSwitch(action, profileId)) {
+        return;
+      }
+
       if (action === "export") {
         await exportProfile(profileId, button);
         return;
@@ -3075,7 +3911,7 @@ function renderAdminPage() {
         const config = result.config || await fetchJson("/_gateway/admin/config");
         renderConfig(config);
         const codex = result.codex || config.codex || {};
-        authStatus.textContent = "\u5DF2\u5E94\u7528\u5230 Codex\u3002\u65B0\u5F00\u7684 Codex \u4F1A\u8BDD\u5C06\u4F7F\u7528\u8BE5\u8D26\u53F7\u3002"
+        authStatus.textContent = "\u5DF2\u5E94\u7528\u5230 Codex\u3002\u8BF7\u5173\u95ED Codex \u5E94\u7528\u5E76\u91CD\u65B0\u6253\u5F00\u540E\u751F\u6548\u3002"
           + (codex.backupPath ? " \u5DF2\u5907\u4EFD\u539F auth.json\u3002" : "");
       } catch (error) {
         authStatus.textContent = error.message;
@@ -3194,11 +4030,15 @@ function renderAdminPage() {
       });
     }
 
-    async function saveModel() {
-      const button = document.getElementById("saveModelBtn");
+    async function saveSettings() {
       const select = document.getElementById("defaultModel");
-      setBusy(button, true);
-      authStatus.textContent = "\u6B63\u5728\u4FDD\u5B58\u9ED8\u8BA4\u6A21\u578B...";
+      const savedProxy = state.config && state.config.settings && state.config.settings.networkProxy
+        ? state.config.settings.networkProxy
+        : { url: "", noProxy: "localhost,127.0.0.1,::1" };
+      const nextProxyUrl = proxyUrl.value.trim() || (!proxyEnabled.checked ? savedProxy.url || "" : "");
+      setBusy(saveSettingsBtn, true);
+      settingsStatus.textContent = "\u6B63\u5728\u4FDD\u5B58\u8BBE\u7F6E...";
+      authStatus.textContent = "\u6B63\u5728\u4FDD\u5B58\u8BBE\u7F6E...";
       try {
         const config = await fetchJson("/_gateway/admin/settings", {
           method: "PUT",
@@ -3207,24 +4047,36 @@ function renderAdminPage() {
           },
           body: formatJson({
             defaultModel: select.value,
+            networkProxy: {
+              enabled: proxyEnabled.checked,
+              url: nextProxyUrl,
+              noProxy: proxyNoProxy.value,
+            },
+            autoSwitch: {
+              enabled: autoSwitchEnabled.checked,
+            },
           }),
         });
+        state.settingsDirty = false;
         renderConfig(config);
-        authStatus.textContent = "\u9ED8\u8BA4\u6A21\u578B\u5DF2\u66F4\u65B0\u3002";
+        settingsStatus.textContent = "\u8BBE\u7F6E\u5DF2\u4FDD\u5B58\u3002";
+        authStatus.textContent = "\u8BBE\u7F6E\u5DF2\u4FDD\u5B58\u3002";
       } catch (error) {
-        authStatus.textContent = error.message;
+        const message = error && error.message ? error.message : String(error);
+        settingsStatus.textContent = message;
+        authStatus.textContent = message;
       } finally {
-        setBusy(button, false);
+        setBusy(saveSettingsBtn, false);
       }
     }
 
-    async function saveProxy() {
-      const button = document.getElementById("saveProxyBtn");
-      setBusy(button, true);
-      authStatus.textContent = "\u6B63\u5728\u4FDD\u5B58\u4EE3\u7406\u914D\u7F6E...";
+    async function testProxy() {
+      setBusy(testProxyBtn, true);
+      settingsStatus.textContent = "\u6B63\u5728\u6D4B\u8BD5\u4EE3\u7406\u8FDE\u63A5...";
+      authStatus.textContent = "\u6B63\u5728\u6D4B\u8BD5\u4EE3\u7406\u8FDE\u63A5...";
       try {
-        const config = await fetchJson("/_gateway/admin/settings", {
-          method: "PUT",
+        const result = await fetchJson("/_gateway/admin/settings/proxy-test", {
+          method: "POST",
           headers: {
             "Content-Type": "application/json",
           },
@@ -3236,18 +4088,23 @@ function renderAdminPage() {
             },
           }),
         });
-        renderConfig(config);
-        authStatus.textContent = proxyEnabled.checked ? "\u4EE3\u7406\u914D\u7F6E\u5DF2\u542F\u7528\u3002" : "\u4EE3\u7406\u914D\u7F6E\u5DF2\u5173\u95ED\u3002";
+        const message = "\u4EE3\u7406\u6D4B\u8BD5\u901A\u8FC7: HTTP " + String(result.status)
+          + "\uFF0C\u8017\u65F6 " + String(result.elapsedMs) + " ms\u3002";
+        settingsStatus.textContent = message;
+        authStatus.textContent = message;
       } catch (error) {
-        authStatus.textContent = error.message;
+        const message = "\u4EE3\u7406\u6D4B\u8BD5\u5931\u8D25: " + (error && error.message ? error.message : String(error));
+        settingsStatus.textContent = message;
+        authStatus.textContent = message;
       } finally {
-        setBusy(button, false);
+        setBusy(testProxyBtn, false);
       }
     }
 
     async function refreshModels() {
       const button = document.getElementById("refreshModelsBtn");
       setBusy(button, true);
+      settingsStatus.textContent = "\u6B63\u5728\u540C\u6B65 Codex \u6A21\u578B\u5217\u8868...";
       authStatus.textContent = "\u6B63\u5728\u540C\u6B65 Codex \u6A21\u578B\u5217\u8868...";
       try {
         await fetchJson("/_gateway/models/refresh", {
@@ -3255,9 +4112,12 @@ function renderAdminPage() {
         });
         const config = await fetchJson("/_gateway/admin/config");
         renderConfig(config);
+        settingsStatus.textContent = "Codex \u6A21\u578B\u5217\u8868\u5DF2\u540C\u6B65\u3002";
         authStatus.textContent = "Codex \u6A21\u578B\u5217\u8868\u5DF2\u540C\u6B65\u3002";
       } catch (error) {
-        authStatus.textContent = error.message;
+        const message = error && error.message ? error.message : String(error);
+        settingsStatus.textContent = message;
+        authStatus.textContent = message;
       } finally {
         setBusy(button, false);
       }
@@ -3278,6 +4138,7 @@ function renderAdminPage() {
       const meta = endpointMeta[endpoint];
       const button = document.getElementById("runTestBtn");
       const tracker = createTimingTracker();
+      const initialProfileId = state.config && state.config.profile ? state.config.profile.profileId : "";
       setBusy(button, true);
       setTesterResultTab("response");
       testerMeta.textContent = "\u8BF7\u6C42\u4E2D: " + meta.method + " " + endpoint;
@@ -3359,6 +4220,13 @@ function renderAdminPage() {
         testerMeta.textContent = "\u8BF7\u6C42\u5931\u8D25";
         clearPreview();
       } finally {
+        if (initialProfileId) {
+          await refreshConfig({
+            silent: true,
+          }).catch(function (error) {
+            console.warn("[admin] refresh after gateway request failed", error && error.message ? error.message : String(error));
+          });
+        }
         setBusy(button, false);
       }
     }
@@ -3392,7 +4260,27 @@ function renderAdminPage() {
       contactModal.setAttribute("aria-hidden", "true");
     }
 
+    function openSettingsDrawer() {
+      if (state.config && !state.settingsDirty) {
+        renderSettingsFields(state.config, {
+          force: true,
+        });
+      }
+      settingsDrawerBackdrop.classList.add("is-open");
+      settingsDrawerBackdrop.setAttribute("aria-hidden", "false");
+    }
+
+    function closeSettingsDrawer() {
+      resetSettingsDraft();
+      settingsDrawerBackdrop.classList.remove("is-open");
+      settingsDrawerBackdrop.setAttribute("aria-hidden", "true");
+    }
+
     document.getElementById("loginBtn").addEventListener("click", openAccountModal);
+    document.getElementById("openSettingsBtn").addEventListener("click", openSettingsDrawer);
+    document.querySelectorAll("[data-open-settings]").forEach(function (button) {
+      button.addEventListener("click", openSettingsDrawer);
+    });
     document.getElementById("refreshBtn").addEventListener("click", function () {
       authStatus.textContent = "\u6B63\u5728\u540C\u6B65\u989D\u5EA6\u4E0E\u7248\u672C\u72B6\u6001...";
       refreshConfig({
@@ -3412,9 +4300,14 @@ function renderAdminPage() {
     contactBtn.addEventListener("click", openContactModal);
     document.getElementById("closeContactBtn").addEventListener("click", closeContactModal);
     document.getElementById("closeImagePreviewBtn").addEventListener("click", closeImagePreviewModal);
+    document.getElementById("closeSettingsDrawerBtn").addEventListener("click", closeSettingsDrawer);
     document.getElementById("refreshModelsBtn").addEventListener("click", refreshModels);
-    document.getElementById("saveModelBtn").addEventListener("click", saveModel);
-    document.getElementById("saveProxyBtn").addEventListener("click", saveProxy);
+    testProxyBtn.addEventListener("click", testProxy);
+    saveSettingsBtn.addEventListener("click", saveSettings);
+    [document.getElementById("defaultModel"), proxyEnabled, proxyUrl, proxyNoProxy, autoSwitchEnabled].forEach(function (element) {
+      element.addEventListener("input", markSettingsDirty);
+      element.addEventListener("change", markSettingsDirty);
+    });
     runTestBtn.addEventListener("click", runTest);
     document.querySelectorAll("[data-result-tab]").forEach(function (button) {
       button.addEventListener("click", function () {
@@ -3445,6 +4338,18 @@ function renderAdminPage() {
         return;
       }
 
+      if (action === "toggle-details") {
+        if (state.expandedProfileIds[profileId]) {
+          delete state.expandedProfileIds[profileId];
+        } else {
+          state.expandedProfileIds[profileId] = true;
+        }
+        if (state.config) {
+          renderProfiles(state.config);
+        }
+        return;
+      }
+
       runProfileAction(action, profileId, button);
     });
 
@@ -3544,6 +4449,12 @@ function renderAdminPage() {
       }
     });
 
+    settingsDrawerBackdrop.addEventListener("click", function (event) {
+      if (event.target === settingsDrawerBackdrop) {
+        closeSettingsDrawer();
+      }
+    });
+
     imagePreviewModal.addEventListener("click", function (event) {
       if (event.target === imagePreviewModal) {
         closeImagePreviewModal();
@@ -3560,10 +4471,14 @@ function renderAdminPage() {
       if (event.key === "Escape" && accountModal.classList.contains("is-open")) {
         closeAccountModal();
       }
+      if (event.key === "Escape" && settingsDrawerBackdrop.classList.contains("is-open")) {
+        closeSettingsDrawer();
+      }
     });
 
     setTesterResultTab(state.testerResultTab);
     scheduleRuntimeRefresh();
+    scheduleActiveProfileRefresh();
     refreshConfig().catch(function (error) {
       authStatus.textContent = error && error.message ? error.message : String(error);
       testerMeta.textContent = "\u52A0\u8F7D\u5931\u8D25";