ai-zero-token 1.0.2 → 1.0.3

package/dist/server/admin-page.js

@@ -208,11 +208,24 @@ function renderAdminPage() {
       gap: 10px;
     }
 
+    .service-list.compact {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 10px 12px;
+    }
+
     .service-row {
       display: grid;
       gap: 4px;
     }
 
+    .service-row.compact {
+      padding: 10px 12px;
+      border-radius: 14px;
+      border: 1px solid var(--line);
+      background: var(--panel-soft);
+      min-width: 0;
+    }
+
     .service-row label {
       color: var(--text-muted);
       font-size: 12px;
@@ -272,6 +285,54 @@ function renderAdminPage() {
       gap: 14px;
     }
 
+    .update-panel {
+      display: none;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 18px;
+      padding: 18px;
+      border-radius: 18px;
+      border: 1px solid rgba(245, 158, 11, 0.32);
+      background:
+        linear-gradient(135deg, rgba(255, 247, 237, 0.98), rgba(255, 251, 235, 0.92)),
+        var(--panel);
+      box-shadow: 0 18px 42px rgba(180, 83, 9, 0.12);
+    }
+
+    .update-panel.is-visible {
+      display: grid;
+    }
+
+    .update-copy {
+      display: grid;
+      gap: 7px;
+      min-width: 0;
+    }
+
+    .update-copy strong {
+      color: #9a3412;
+      font-size: 16px;
+      line-height: 1.35;
+    }
+
+    .update-copy span {
+      color: #7c2d12;
+      font-size: 13px;
+      line-height: 1.55;
+      overflow-wrap: anywhere;
+    }
+
+    .update-command {
+      padding: 10px 12px;
+      border-radius: 12px;
+      border: 1px solid rgba(180, 83, 9, 0.22);
+      background: rgba(255, 255, 255, 0.78);
+      color: #7c2d12;
+      font-size: 12px;
+      line-height: 1.4;
+      white-space: nowrap;
+    }
+
     .summary-card {
       border-radius: 16px;
       padding: 18px;
@@ -309,7 +370,7 @@ function renderAdminPage() {
 
     .main-grid {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) minmax(380px, 430px);
+      grid-template-columns: minmax(0, 1fr) minmax(460px, 560px);
       gap: 20px;
       align-items: start;
     }
@@ -588,17 +649,33 @@ function renderAdminPage() {
 
     .account-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
       grid-auto-rows: 1fr;
       gap: 16px;
+      justify-content: start;
+    }
+
+    .account-grid.profile-count-1 {
+      grid-template-columns: minmax(300px, 440px);
+    }
+
+    .account-grid.profile-count-2 {
+      grid-template-columns: repeat(2, minmax(280px, 360px));
+    }
+
+    .account-grid.profile-count-3 {
+      grid-template-columns: repeat(3, minmax(260px, 320px));
+    }
+
+    .account-grid.profile-count-many {
+      grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
     }
 
     .account-card {
-      border-radius: 18px;
-      padding: 16px;
+      border-radius: 16px;
+      padding: 14px;
       display: grid;
       grid-template-rows: auto auto auto 1fr auto;
-      gap: 14px;
+      gap: 12px;
       min-width: 0;
       height: 100%;
     }
@@ -612,34 +689,34 @@ function renderAdminPage() {
 
     .account-title {
       display: grid;
-      gap: 8px;
+      gap: 6px;
       min-width: 0;
     }
 
     .account-name {
       display: flex;
       align-items: center;
-      gap: 10px;
+      gap: 8px;
       min-width: 0;
     }
 
     .avatar {
-      width: 28px;
-      height: 28px;
+      width: 24px;
+      height: 24px;
       border-radius: 999px;
       background: var(--panel-soft);
       border: 1px solid var(--line);
       display: grid;
       place-items: center;
-      font-size: 12px;
+      font-size: 11px;
       color: var(--brand);
       font-weight: 700;
       flex: 0 0 auto;
     }
 
     .account-name strong {
-      font-size: 14px;
-      line-height: 1.4;
+      font-size: 13px;
+      line-height: 1.35;
       min-width: 0;
       display: -webkit-box;
       -webkit-line-clamp: 2;
@@ -653,17 +730,17 @@ function renderAdminPage() {
     .badge-row {
       display: flex;
       flex-wrap: wrap;
-      gap: 8px;
+      gap: 6px;
     }
 
     .badge {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      min-height: 24px;
-      padding: 0 10px;
+      min-height: 22px;
+      padding: 0 8px;
       border-radius: 999px;
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 600;
       white-space: nowrap;
     }
@@ -695,26 +772,36 @@ function renderAdminPage() {
 
     .account-metrics {
       display: grid;
-      gap: 12px;
+      gap: 10px;
     }
 
     .quota-row {
       display: grid;
-      gap: 8px;
+      gap: 6px;
     }
 
     .quota-line {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: 12px;
+      gap: 10px;
       color: var(--text-soft);
+      font-size: 11px;
+      line-height: 1.45;
+    }
+
+    .quota-line span {
+      min-width: 0;
+    }
+
+    .quota-line strong {
+      flex-shrink: 0;
+      color: var(--text);
       font-size: 12px;
-      line-height: 1.5;
     }
 
     .progress-track {
-      height: 6px;
+      height: 5px;
       width: 100%;
       border-radius: 999px;
       background: #eef2f7;
@@ -746,26 +833,26 @@ function renderAdminPage() {
     .meta-grid {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 10px 14px;
+      gap: 8px 12px;
     }
 
     .meta-item {
       display: grid;
-      gap: 4px;
+      gap: 3px;
       min-width: 0;
     }
 
     .meta-item label {
       color: var(--text-muted);
-      font-size: 11px;
+      font-size: 10px;
       line-height: 1.4;
     }
 
     .meta-item strong,
     .meta-item span,
     .meta-item code {
-      font-size: 12px;
-      line-height: 1.5;
+      font-size: 11px;
+      line-height: 1.45;
       color: var(--text-soft);
       word-break: break-word;
       overflow-wrap: anywhere;
@@ -774,13 +861,30 @@ function renderAdminPage() {
     .account-actions {
       display: flex;
       flex-wrap: wrap;
-      gap: 10px;
+      gap: 8px;
       margin-top: auto;
     }
 
     .account-actions .btn-secondary,
     .account-actions .btn-danger {
       flex: 1 1 120px;
+      min-height: 36px;
+      padding: 0 12px;
+      border-radius: 10px;
+      font-size: 12px;
+    }
+
+    .account-status {
+      display: inline-flex;
+      align-items: center;
+      min-height: 36px;
+      padding: 0 12px;
+      border-radius: 10px;
+      background: var(--panel-soft);
+      border: 1px solid var(--line);
+      color: var(--text-muted);
+      font-size: 12px;
+      font-weight: 600;
     }
 
     .empty-state {
@@ -889,7 +993,8 @@ function renderAdminPage() {
     .pre {
       margin: 0;
       padding: 14px;
-      min-height: 184px;
+      min-height: 280px;
+      max-height: 460px;
       overflow: auto;
       background: #0f172a;
       border-color: #0f172a;
@@ -908,9 +1013,44 @@ function renderAdminPage() {
       line-height: 1.6;
     }
 
+    .tester-result {
+      display: grid;
+      gap: 12px;
+    }
+
+    .tester-result-tabs {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .tester-result-tabs .tab-btn {
+      border: 1px solid var(--line);
+      background: #fff;
+    }
+
+    .tester-panel {
+      display: none;
+      gap: 12px;
+    }
+
+    .tester-panel.is-active {
+      display: grid;
+    }
+
+    .preview-empty {
+      border: 1px dashed var(--line-strong);
+      border-radius: 14px;
+      padding: 18px;
+      background: var(--panel-soft);
+      color: var(--text-muted);
+      font-size: 13px;
+      line-height: 1.7;
+    }
+
     .preview-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
       gap: 12px;
     }
 
@@ -927,11 +1067,12 @@ function renderAdminPage() {
     .preview-card img {
       display: block;
       width: 100%;
-      aspect-ratio: 1 / 1;
-      object-fit: cover;
+      aspect-ratio: 4 / 3;
+      object-fit: contain;
       border-radius: 10px;
       border: 1px solid var(--line);
       background: var(--panel-soft);
+      cursor: zoom-in;
     }
 
     .preview-card figcaption {
@@ -961,6 +1102,48 @@ function renderAdminPage() {
       font-weight: 600;
     }
 
+    .preview-modal-card {
+      width: min(1120px, calc(100vw - 32px));
+    }
+
+    .preview-modal-body {
+      padding: 18px 20px 20px;
+      display: grid;
+      gap: 16px;
+    }
+
+    .preview-modal-stage {
+      display: grid;
+      place-items: center;
+      min-height: 420px;
+      max-height: calc(100vh - 240px);
+      overflow: auto;
+      border: 1px solid var(--line);
+      border-radius: 20px;
+      background:
+        linear-gradient(135deg, rgba(99, 91, 255, 0.06), transparent 42%),
+        var(--panel-soft);
+      padding: 16px;
+    }
+
+    .preview-modal-stage img {
+      display: block;
+      max-width: 100%;
+      max-height: calc(100vh - 280px);
+      width: auto;
+      height: auto;
+      border-radius: 14px;
+      background: #fff;
+      box-shadow: var(--shadow);
+    }
+
+    .preview-modal-meta {
+      color: var(--text-soft);
+      font-size: 13px;
+      line-height: 1.7;
+      word-break: break-word;
+    }
+
     .log-table-wrap {
       border-radius: 20px;
       overflow: hidden;
@@ -1061,6 +1244,11 @@ function renderAdminPage() {
 
       .summary-grid,
       .account-grid,
+      .account-grid.profile-count-1,
+      .account-grid.profile-count-2,
+      .account-grid.profile-count-3,
+      .account-grid.profile-count-many,
+      .preview-grid,
       .meta-grid,
       .trend-labels {
         grid-template-columns: 1fr;
@@ -1150,13 +1338,21 @@ function renderAdminPage() {
         <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="contactBtn" type="button">\u4EA4\u6D41\u53CD\u9988</button>
-          <button class="btn-secondary" id="toggleEmailBtn" type="button">\u67E5\u770B\u90AE\u7BB1</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>
           <button class="btn-secondary" id="refreshBtn" type="button">\u5237\u65B0\u72B6\u6001</button>
           <button class="btn-danger" id="logoutBtn" type="button">\u6E05\u7A7A\u8D26\u53F7</button>
         </div>
       </header>
 
+      <section class="update-panel" id="updatePanel" aria-live="polite">
+        <div class="update-copy">
+          <strong id="updatePanelTitle">\u53D1\u73B0\u65B0\u7248\u672C</strong>
+          <span id="updatePanelDetail"></span>
+        </div>
+        <code class="update-command" id="updatePanelCommand">npm install -g ai-zero-token@latest</code>
+      </section>
+
       <section class="summary-grid" id="summaryGrid"></section>
 
       <section class="main-grid">
@@ -1183,7 +1379,7 @@ function renderAdminPage() {
               </select>
               <select class="control" id="profileSort">
                 <option value="quota-desc">\u6309\u4E3B\u989D\u5EA6\u6392\u5E8F</option>
-                <option value="latency-asc">\u6309\u8017\u65F6\u6392\u5E8F</option>
+                <option value="latency-asc">\u6309\u989D\u5EA6\u66F4\u65B0\u65F6\u95F4</option>
                 <option value="expiry-asc">\u6309\u8FC7\u671F\u65F6\u95F4</option>
                 <option value="name-asc">\u6309\u90AE\u7BB1\u6392\u5E8F</option>
               </select>
@@ -1262,7 +1458,9 @@ function renderAdminPage() {
               <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>
@@ -1284,33 +1482,72 @@ function renderAdminPage() {
 
             <p class="status-inline" id="authStatus"></p>
 
-            <div class="field">
-              <label for="responseBody">\u54CD\u5E94\u7ED3\u679C</label>
-              <pre class="pre" id="responseBody">\u7B49\u5F85\u8BF7\u6C42\u2026</pre>
-            </div>
+            <div class="tester-result">
+              <div class="tester-result-tabs">
+                <button class="tab-btn is-active" type="button" data-result-tab="response">\u54CD\u5E94 JSON</button>
+                <button class="tab-btn" type="button" data-result-tab="timing">\u8017\u65F6\u65E5\u5FD7</button>
+                <button class="tab-btn" type="button" data-result-tab="preview">\u56FE\u7247\u9884\u89C8</button>
+              </div>
 
-            <div class="field">
-              <label for="timingBody">\u8017\u65F6\u65E5\u5FD7</label>
-              <pre class="pre" id="timingBody">\u7B49\u5F85\u8BF7\u6C42\u2026</pre>
-            </div>
+              <div class="tester-panel is-active" data-result-panel="response">
+                <div class="field">
+                  <label for="responseBody">\u54CD\u5E94\u7ED3\u679C</label>
+                  <pre class="pre" id="responseBody">\u7B49\u5F85\u8BF7\u6C42\u2026</pre>
+                </div>
+              </div>
 
-            <div class="preview-grid" id="responsePreview" hidden></div>
+              <div class="tester-panel" data-result-panel="timing">
+                <div class="field">
+                  <label for="timingBody">\u8017\u65F6\u65E5\u5FD7</label>
+                  <pre class="pre" id="timingBody">\u7B49\u5F85\u8BF7\u6C42\u2026</pre>
+                </div>
+              </div>
+
+              <div class="tester-panel" data-result-panel="preview">
+                <div class="field">
+                  <label>\u56FE\u7247\u9884\u89C8</label>
+                  <div class="preview-empty" id="responsePreviewEmpty">\u56FE\u7247\u7ED3\u679C\u4F1A\u663E\u793A\u5728\u8FD9\u91CC\u3002\u70B9\u51FB\u7F29\u7565\u56FE\u53EF\u67E5\u770B\u5927\u56FE\u3002</div>
+                  <div class="preview-grid" id="responsePreview"></div>
+                </div>
+              </div>
+            </div>
           </section>
 
-          <section class="card">
+          <section class="card service-card">
             <div class="section-head" style="margin-bottom: 12px;">
               <div>
-                <h2>\u63A5\u53E3\u4FE1\u606F</h2>
+                <h2>\u8FDE\u63A5\u4FE1\u606F</h2>
                 <p>\u7BA1\u7406\u9875\u548C API Base \u53EF\u76F4\u63A5\u590D\u5236\u5230 SDK \u6216\u6D4B\u8BD5\u5DE5\u5177\u3002</p>
               </div>
             </div>
-            <div class="service-list" id="endpointInfo"></div>
+            <div class="service-list compact" id="endpointInfo"></div>
           </section>
         </aside>
       </section>
     </main>
   </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">
+        <div>
+          <h3 id="imagePreviewTitle">\u56FE\u7247\u9884\u89C8</h3>
+          <p>\u67E5\u770B\u751F\u56FE\u7ED3\u679C\u7684\u66F4\u5927\u7248\u672C\uFF0C\u907F\u514D\u5728\u4FA7\u680F\u5185\u6EDA\u52A8\u67E5\u770B\u3002</p>
+        </div>
+        <div class="actions">
+          <a class="btn-secondary" id="downloadPreviewBtn" href="#" download="generated-image.png">\u4E0B\u8F7D\u56FE\u7247</a>
+          <button class="btn-secondary" id="closeImagePreviewBtn" type="button">\u5173\u95ED</button>
+        </div>
+      </div>
+      <div class="preview-modal-body">
+        <div class="preview-modal-stage">
+          <img id="previewModalImage" src="" alt="\u751F\u6210\u56FE\u7247\u9884\u89C8" />
+        </div>
+        <div class="preview-modal-meta" id="previewModalMeta">\u7B49\u5F85\u56FE\u7247\u7ED3\u679C\u2026</div>
+      </div>
+    </section>
+  </div>
+
   <div class="modal-backdrop" id="contactModal" aria-hidden="true">
     <section class="modal-card" role="dialog" aria-modal="true" aria-labelledby="contactModalTitle">
       <div class="modal-head">
@@ -1344,6 +1581,8 @@ function renderAdminPage() {
   </div>
 
   <script>
+    const RUNTIME_AUTO_REFRESH_MS = 10 * 60 * 1000;
+
     const state = {
       config: null,
       recentRequests: [],
@@ -1353,6 +1592,7 @@ function renderAdminPage() {
         status: "all",
         sort: "quota-desc",
       },
+      testerResultTab: "response",
     };
 
     const endpointMeta = {
@@ -1382,6 +1622,7 @@ function renderAdminPage() {
     const requestBody = document.getElementById("requestBody");
     const responseBody = document.getElementById("responseBody");
     const responsePreview = document.getElementById("responsePreview");
+    const responsePreviewEmpty = document.getElementById("responsePreviewEmpty");
     const timingBody = document.getElementById("timingBody");
     const testerMeta = document.getElementById("testerMeta");
     const authStatus = document.getElementById("authStatus");
@@ -1389,7 +1630,11 @@ function renderAdminPage() {
     const runTestBtn = document.getElementById("runTestBtn");
     const toggleEmailBtn = document.getElementById("toggleEmailBtn");
     const contactModal = document.getElementById("contactModal");
+    const imagePreviewModal = document.getElementById("imagePreviewModal");
     const contactBtn = document.getElementById("contactBtn");
+    const previewModalImage = document.getElementById("previewModalImage");
+    const previewModalMeta = document.getElementById("previewModalMeta");
+    const downloadPreviewBtn = document.getElementById("downloadPreviewBtn");
     const profileSearch = document.getElementById("profileSearch");
     const profileStatusFilter = document.getElementById("profileStatusFilter");
     const profileSort = document.getElementById("profileSort");
@@ -1496,6 +1741,81 @@ function renderAdminPage() {
         : "unknown";
     }
 
+    function getQuotaSnapshotTime(profile) {
+      return profile && profile.quota && typeof profile.quota.capturedAt === "number"
+        ? profile.quota.capturedAt
+        : 0;
+    }
+
+    function describeQuotaSnapshot(profile) {
+      const capturedAt = getQuotaSnapshotTime(profile);
+      return capturedAt > 0 ? formatTime(capturedAt) : "\u672A\u540C\u6B65";
+    }
+
+    function describeQuotaLimit(profile) {
+      const quota = profile && profile.quota ? profile.quota : null;
+      if (!quota) {
+        return "\u7B49\u5F85\u5237\u65B0\u989D\u5EA6";
+      }
+
+      const parts = [];
+      if (typeof quota.activeLimit === "string" && quota.activeLimit) {
+        parts.push(quota.activeLimit);
+      }
+      if (typeof quota.creditsBalance === "string" && quota.creditsBalance) {
+        parts.push("\u4F59\u989D " + quota.creditsBalance);
+      }
+      if (typeof quota.primaryOverSecondaryLimitPercent === "number") {
+        parts.push("\u5171\u4EAB\u4E0A\u9650 " + Math.round(quota.primaryOverSecondaryLimitPercent) + "%");
+      }
+
+      return parts.length > 0 ? parts.join(" \xB7 ") : "\u6765\u81EA Codex \u54CD\u5E94\u5934";
+    }
+
+    function getVersionValue(config) {
+      if (!config || !config.versionStatus) {
+        return "--";
+      }
+
+      return config.versionStatus.currentVersion || "--";
+    }
+
+    function getVersionDetail(config) {
+      if (!config || !config.versionStatus) {
+        return "\u7248\u672C\u72B6\u6001\u672A\u77E5";
+      }
+
+      const versionStatus = config.versionStatus;
+      if (versionStatus.status === "update-available" && versionStatus.latestVersion) {
+        return "\u53EF\u66F4\u65B0\u5230 " + versionStatus.latestVersion;
+      }
+      if (versionStatus.status === "ok" && versionStatus.latestVersion) {
+        return "\u5DF2\u68C0\u67E5\uFF0C\u5F53\u524D\u5DF2\u662F\u6700\u65B0\u7248\u672C";
+      }
+      return versionStatus.error
+        ? "\u7248\u672C\u68C0\u67E5\u5931\u8D25: " + versionStatus.error
+        : "\u6682\u672A\u62FF\u5230\u8FDC\u7AEF\u7248\u672C\u4FE1\u606F";
+    }
+
+    function renderUpdatePanel(config) {
+      const panel = document.getElementById("updatePanel");
+      const title = document.getElementById("updatePanelTitle");
+      const detail = document.getElementById("updatePanelDetail");
+      const command = document.getElementById("updatePanelCommand");
+      const versionStatus = config && config.versionStatus ? config.versionStatus : null;
+
+      if (!versionStatus || !versionStatus.needsUpdate || !versionStatus.latestVersion) {
+        panel.classList.remove("is-visible");
+        return;
+      }
+
+      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";
+      panel.classList.add("is-visible");
+    }
+
     function supportsImageGeneration(profile) {
       return getPlanType(profile) !== "free";
     }
@@ -1547,6 +1867,23 @@ function renderAdminPage() {
       return local.slice(0, 2) + "***" + local.slice(-1) + "@" + domain;
     }
 
+    function maskIdentifier(value) {
+      if (typeof value !== "string" || !value.trim()) {
+        return value || "";
+      }
+
+      const trimmed = value.trim();
+      const parts = trimmed.split(":");
+      const suffix = parts.length > 1 ? parts.pop() || "" : trimmed;
+      const prefix = parts.length > 0 ? parts.join(":") + ":" : "";
+
+      if (suffix.length <= 10) {
+        return prefix + suffix.slice(0, 2) + "****";
+      }
+
+      return prefix + suffix.slice(0, 5) + "****" + suffix.slice(-5);
+    }
+
     function getProfileDisplayLabel(profile) {
       if (!profile) {
         return "\u672A\u767B\u5F55";
@@ -1554,11 +1891,12 @@ function renderAdminPage() {
       if (profile.email) {
         return state.showEmails ? profile.email : maskEmail(profile.email);
       }
-      return profile.accountId || profile.profileId || "\u672A\u547D\u540D\u8D26\u53F7";
+      const fallback = profile.accountId || profile.profileId || "\u672A\u547D\u540D\u8D26\u53F7";
+      return state.showEmails ? fallback : maskIdentifier(fallback);
     }
 
     function updateEmailToggleButton() {
-      toggleEmailBtn.textContent = state.showEmails ? "\u9690\u85CF\u90AE\u7BB1" : "\u67E5\u770B\u90AE\u7BB1";
+      toggleEmailBtn.textContent = state.showEmails ? "\u660E\u6587\u6A21\u5F0F" : "\u8131\u654F\u6A21\u5F0F";
     }
 
     function getProfileInitial(profile) {
@@ -1573,7 +1911,8 @@ function renderAdminPage() {
       if (item.accountEmail) {
         return state.showEmails ? item.accountEmail : maskEmail(item.accountEmail);
       }
-      return item.accountFallback || item.account || "\u672A\u767B\u5F55";
+      const fallback = item.accountFallback || item.account || "\u672A\u767B\u5F55";
+      return state.showEmails ? fallback : maskIdentifier(fallback);
     }
 
     function getPrimaryUsage(profile) {
@@ -1590,16 +1929,6 @@ function renderAdminPage() {
       return Math.max(0, Math.min(100, value));
     }
 
-    function getEstimatedLatencySeconds(profile) {
-      if (!profile || !profile.quota) {
-        return 0;
-      }
-      const primary = getPrimaryUsage(profile);
-      const secondary = getSecondaryUsage(profile);
-      const baseline = 0.62 + primary / 110 + secondary / 260;
-      return Math.round(baseline * 100) / 100;
-    }
-
     function getProfileHealth(profile) {
       const now = Date.now();
       if (profile && profile.expiresAt && profile.expiresAt <= now) {
@@ -1655,10 +1984,31 @@ function renderAdminPage() {
       return "\u672A\u77E5";
     }
 
-    function formatQuotaValue(percent, profile, slot) {
+    function getQuotaWindowLabel(profile, slot) {
       const quota = profile && profile.quota ? profile.quota : null;
+      if (!quota) {
+        return "\u672A\u540C\u6B65\u989D\u5EA6";
+      }
       const field = slot === "primary" ? "primaryWindowMinutes" : "secondaryWindowMinutes";
-      return Math.round(percent) + "% \xB7 " + formatWindowLabel(quota && quota[field]);
+      return formatWindowLabel(quota && quota[field]);
+    }
+
+    function formatQuotaUsage(percent, profile, slot) {
+      if (!profile || !profile.quota) {
+        return "\u7B49\u5F85\u5237\u65B0";
+      }
+
+      const used = Math.round(percent);
+      const remaining = Math.max(0, 100 - used);
+      return getQuotaWindowLabel(profile, slot) + " \xB7 \u5DF2\u7528 " + used + "% / \u5269\u4F59 " + remaining + "%";
+    }
+
+    function formatQuotaRemaining(percent, profile) {
+      if (!profile || !profile.quota) {
+        return "--";
+      }
+
+      return "\u5269\u4F59 " + String(Math.max(0, 100 - Math.round(percent))) + "%";
     }
 
     function createTimingTracker() {
@@ -1722,9 +2072,37 @@ function renderAdminPage() {
       return result;
     }
 
+    function setTesterResultTab(tab) {
+      state.testerResultTab = tab;
+      document.querySelectorAll("[data-result-tab]").forEach(function (button) {
+        button.classList.toggle("is-active", button.getAttribute("data-result-tab") === tab);
+      });
+      document.querySelectorAll("[data-result-panel]").forEach(function (panel) {
+        panel.classList.toggle("is-active", panel.getAttribute("data-result-panel") === tab);
+      });
+    }
+
+    function openImagePreviewModal(src, meta, filename) {
+      previewModalImage.src = src;
+      previewModalMeta.textContent = meta || "\u56FE\u7247\u9884\u89C8";
+      downloadPreviewBtn.href = src;
+      downloadPreviewBtn.download = filename || "generated-image.png";
+      imagePreviewModal.classList.add("is-open");
+      imagePreviewModal.setAttribute("aria-hidden", "false");
+    }
+
+    function closeImagePreviewModal() {
+      imagePreviewModal.classList.remove("is-open");
+      imagePreviewModal.setAttribute("aria-hidden", "true");
+      previewModalImage.src = "";
+      previewModalMeta.textContent = "\u7B49\u5F85\u56FE\u7247\u7ED3\u679C\u2026";
+      downloadPreviewBtn.href = "#";
+      downloadPreviewBtn.download = "generated-image.png";
+    }
+
     function clearPreview() {
-      responsePreview.hidden = true;
       responsePreview.innerHTML = "";
+      responsePreviewEmpty.hidden = false;
     }
 
     function renderPreview(payload) {
@@ -1755,9 +2133,6 @@ function renderAdminPage() {
         const image = document.createElement("img");
         image.alt = "\u751F\u6210\u56FE\u7247 " + String(index + 1);
         image.src = "data:" + mime + ";base64," + item.b64_json;
-        card.appendChild(image);
-
-        const caption = document.createElement("figcaption");
         const lines = [
           "\u56FE\u7247 " + String(index + 1),
           payload.size ? "\u5C3A\u5BF8: " + payload.size : "",
@@ -1765,12 +2140,36 @@ function renderAdminPage() {
           item.b64_json ? "base64 \u957F\u5EA6: " + String(item.b64_json.length) : "",
           item.revised_prompt ? "\u91CD\u5199\u63D0\u793A\u8BCD: " + item.revised_prompt : "",
         ].filter(Boolean);
-        caption.textContent = lines.join(" | ");
+        const captionText = lines.join(" | ");
+        image.addEventListener("click", function () {
+          openImagePreviewModal(
+            image.src,
+            captionText,
+            "generated-image-" + String(index + 1) + "." + format,
+          );
+        });
+        card.appendChild(image);
+
+        const caption = document.createElement("figcaption");
+        caption.textContent = captionText;
         card.appendChild(caption);
 
         const actions = document.createElement("div");
         actions.className = "preview-actions";
 
+        const view = document.createElement("button");
+        view.type = "button";
+        view.className = "btn-secondary";
+        view.textContent = "\u67E5\u770B\u5927\u56FE";
+        view.addEventListener("click", function () {
+          openImagePreviewModal(
+            image.src,
+            captionText,
+            "generated-image-" + String(index + 1) + "." + format,
+          );
+        });
+        actions.appendChild(view);
+
         const download = document.createElement("a");
         download.href = image.src;
         download.download = "generated-image-" + String(index + 1) + "." + format;
@@ -1781,7 +2180,7 @@ function renderAdminPage() {
         responsePreview.appendChild(card);
       });
 
-      responsePreview.hidden = false;
+      responsePreviewEmpty.hidden = true;
     }
 
     function buildExample(endpoint) {
@@ -1844,6 +2243,12 @@ function renderAdminPage() {
           detail: "\u672A\u663E\u5F0F\u6307\u5B9A model \u65F6\u751F\u6548",
           compact: true,
         },
+        {
+          label: "\u5F53\u524D\u7248\u672C",
+          value: getVersionValue(config),
+          detail: getVersionDetail(config),
+          compact: true,
+        },
         {
           label: "\u4ECA\u65E5\u8BF7\u6C42\u6570",
           value: String(requests.length),
@@ -1913,9 +2318,9 @@ function renderAdminPage() {
 
       filtered.sort(function (a, b) {
         if (sort === "latency-asc") {
-          const aLatency = getEstimatedLatencySeconds(a) || 9999;
-          const bLatency = getEstimatedLatencySeconds(b) || 9999;
-          return aLatency - bLatency;
+          const aCapturedAt = getQuotaSnapshotTime(a) || 0;
+          const bCapturedAt = getQuotaSnapshotTime(b) || 0;
+          return bCapturedAt - aCapturedAt;
         }
         if (sort === "expiry-asc") {
           const aExpiry = a.expiresAt || Number.MAX_SAFE_INTEGER;
@@ -1934,6 +2339,16 @@ function renderAdminPage() {
     function renderProfiles(config) {
       const container = document.getElementById("profileList");
       const profiles = getFilteredProfiles(config);
+      const gridClass = profiles.length <= 0
+        ? ""
+        : profiles.length === 1
+          ? "profile-count-1"
+          : profiles.length === 2
+            ? "profile-count-2"
+            : profiles.length === 3
+              ? "profile-count-3"
+              : "profile-count-many";
+      container.className = gridClass ? "account-grid " + gridClass : "account-grid";
 
       if (profiles.length === 0) {
         container.innerHTML = '<div class="empty-state">\u5F53\u524D\u7B5B\u9009\u6761\u4EF6\u4E0B\u6CA1\u6709\u5339\u914D\u8D26\u53F7\u3002\u4F60\u53EF\u4EE5\u6E05\u7A7A\u7B5B\u9009\uFF0C\u6216\u8005\u5148\u65B0\u589E\u4E00\u4E2A\u8D26\u53F7\u3002</div>';
@@ -1941,6 +2356,7 @@ function renderAdminPage() {
       }
 
       container.innerHTML = profiles.map(function (profile) {
+        const isSingleProfile = profiles.length === 1;
         const health = getProfileHealth(profile);
         const planType = getPlanType(profile);
         const imageCapability = getImageCapability(profile);
@@ -1949,7 +2365,9 @@ function renderAdminPage() {
         const primaryClass = health.barClass || "blue";
         const secondaryClass = secondary >= 85 ? "orange" : "blue";
         const actionButton = profile.isActive
-          ? '<button class="btn-secondary" type="button" disabled>\u5F53\u524D\u4F7F\u7528\u4E2D</button>'
+          ? (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>';
 
         return ""
@@ -1970,11 +2388,11 @@ function renderAdminPage() {
           +   "</div>"
           +   '<div class="account-metrics">'
           +     '<div class="quota-row">'
-          +       '<div class="quota-line"><span>' + escapeHtml(formatQuotaValue(primary, profile, "primary")) + '</span><strong>' + escapeHtml(Math.round(primary) + "%") + "</strong></div>"
+          +       '<div class="quota-line"><span>' + escapeHtml(formatQuotaUsage(primary, profile, "primary")) + '</span><strong>' + escapeHtml(formatQuotaRemaining(primary, profile)) + "</strong></div>"
           +       '<div class="progress-track"><div class="progress-bar ' + escapeHtml(primaryClass) + '" style="width:' + escapeHtml(String(primary)) + '%"></div></div>'
           +     "</div>"
           +     '<div class="quota-row">'
-          +       '<div class="quota-line"><span>' + escapeHtml(formatQuotaValue(secondary, profile, "secondary")) + '</span><strong>' + escapeHtml(Math.round(secondary) + "%") + "</strong></div>"
+          +       '<div class="quota-line"><span>' + escapeHtml(formatQuotaUsage(secondary, profile, "secondary")) + '</span><strong>' + escapeHtml(formatQuotaRemaining(secondary, profile)) + "</strong></div>"
           +       '<div class="progress-track"><div class="progress-bar ' + escapeHtml(secondaryClass) + '" style="width:' + escapeHtml(String(secondary)) + '%"></div></div>'
           +     "</div>"
           +   "</div>"
@@ -1982,8 +2400,9 @@ function renderAdminPage() {
           +     '<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>\u6700\u8FD1\u8BF7\u6C42\u8017\u65F6</label><strong>' + escapeHtml(profile.quota && typeof profile.quota.capturedAt === "number" ? formatRequestSeconds(getEstimatedLatencySeconds(profile)) : "--") + "</strong></div>"
-          +     '<div class="meta-item"><label>Account ID</label><code>' + escapeHtml(profile.accountId || "\u672A\u63D0\u4F9B") + "</code></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">'
@@ -2148,6 +2567,7 @@ function renderAdminPage() {
         ["Base URL", config.baseUrl],
         ["Provider", config.status.activeProvider || "openai-codex"],
         ["\u9ED8\u8BA4\u6A21\u578B", config.settings.defaultModel],
+        ["\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],
         ["\u8D26\u53F7\u72B6\u6001", loggedIn ? "\u5DF2\u767B\u5F55" : "\u672A\u767B\u5F55"],
@@ -2162,19 +2582,19 @@ function renderAdminPage() {
       }).join("");
 
       const endpointRows = [
-        ["\u7BA1\u7406\u9875\u5730\u5740", config.adminUrl],
         ["API Base URL", config.baseUrl],
-        ["\u517C\u5BB9\u63A5\u53E3", config.supportedEndpoints.map(function (item) { return item.path; }).join("\uFF0C")],
         ["\u5F53\u524D\u8D26\u53F7", getProfileDisplayLabel(config.profile)],
+        ["\u9ED8\u8BA4\u6A21\u578B", config.settings.defaultModel],
+        ["\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],
-        ["Access Token", config.profile ? config.profile.accessTokenPreview : "\u672A\u767B\u5F55"],
-        ["Refresh Token", config.profile ? config.profile.refreshTokenPreview : "\u672A\u767B\u5F55"],
+        ["\u517C\u5BB9\u63A5\u53E3", config.supportedEndpoints.map(function (item) { return item.path; }).join("\uFF0C")],
+        ["\u4EE4\u724C\u9884\u89C8", config.profile ? config.profile.accessTokenPreview : "\u672A\u767B\u5F55"],
       ];
 
       endpointInfo.innerHTML = endpointRows.map(function (row) {
         return ""
-          + '<div class="service-row">'
+          + '<div class="service-row compact">'
           +   "<label>" + escapeHtml(row[0]) + "</label>"
           +   '<code class="mono">' + escapeHtml(row[1]) + "</code>"
           + "</div>";
@@ -2201,6 +2621,25 @@ function renderAdminPage() {
       }).join("");
     }
 
+    function renderModelCatalogStatus(config) {
+      const hint = document.getElementById("modelCatalogHint");
+      if (!config || !config.modelCatalog) {
+        hint.textContent = "\u6A21\u578B\u76EE\u5F55\u72B6\u6001\u672A\u77E5\u3002";
+        return;
+      }
+
+      const parts = [
+        config.modelCatalog.source === "codex-cache" ? "\u5F53\u524D\u8BFB\u53D6 Codex \u672C\u5730\u6A21\u578B\u7F13\u5B58" : "\u5F53\u524D\u4F7F\u7528\u9879\u76EE\u5185\u7F6E\u6A21\u578B\u56DE\u9000\u5217\u8868",
+        "\u5171 " + String(config.modelCatalog.modelCount) + " \u4E2A\u6A21\u578B",
+      ];
+
+      if (config.modelCatalog.fetchedAt) {
+        parts.push("Codex \u66F4\u65B0\u65F6\u95F4 " + new Date(config.modelCatalog.fetchedAt).toLocaleString("zh-CN", { hour12: false }));
+      }
+
+      hint.textContent = parts.join("\uFF0C") + "\u3002";
+    }
+
     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"
@@ -2236,6 +2675,8 @@ function renderAdminPage() {
       renderOverview(config);
       renderProfiles(config);
       renderModelOptions(config);
+      renderModelCatalogStatus(config);
+      renderUpdatePanel(config);
       renderEndpoints(config);
       renderServiceInfo(config);
       renderTrend(config);
@@ -2287,23 +2728,76 @@ function renderAdminPage() {
       return body;
     }
 
-    async function refreshConfig() {
-      testerMeta.textContent = "\u5237\u65B0\u7BA1\u7406\u72B6\u6001";
-      const config = await fetchJson("/_gateway/admin/config");
+    async function refreshConfig(options) {
+      const syncRuntime = !!(options && options.syncRuntime);
+      const silent = !!(options && options.silent);
+      const url = syncRuntime ? "/_gateway/admin/runtime-refresh" : "/_gateway/admin/config";
+      const requestOptions = syncRuntime ? { method: "POST" } : undefined;
+
+      if (!silent) {
+        testerMeta.textContent = syncRuntime ? "\u540C\u6B65\u989D\u5EA6\u4E0E\u7248\u672C\u72B6\u6001" : "\u5237\u65B0\u7BA1\u7406\u72B6\u6001";
+      }
+
+      const config = await fetchJson(url, requestOptions);
       renderConfig(config);
-      testerMeta.textContent = "\u51C6\u5907\u5C31\u7EEA";
+
+      if (!silent) {
+        testerMeta.textContent = "\u51C6\u5907\u5C31\u7EEA";
+      }
+
+      return config;
+    }
+
+    function scheduleRuntimeRefresh() {
+      window.setInterval(function () {
+        if (document.hidden) {
+          return;
+        }
+
+        refreshConfig({
+          syncRuntime: true,
+          silent: true,
+        }).catch(function (error) {
+          console.warn("[admin] auto runtime refresh failed", error && error.message ? error.message : String(error));
+        });
+      }, RUNTIME_AUTO_REFRESH_MS);
+    }
+
+    async function syncQuotaAfterProfileChange(config, sourceLabel) {
+      if (!config || !config.profile || config.profile.quota) {
+        return config;
+      }
+
+      authStatus.textContent = "\u6B63\u5728\u540C\u6B65\u65B0\u8D26\u53F7\u7684\u989D\u5EA6\u4FE1\u606F...";
+      try {
+        const refreshedConfig = await fetchJson("/_gateway/admin/profiles/sync-quota", {
+          method: "POST",
+        });
+        renderConfig(refreshedConfig);
+        authStatus.textContent = refreshedConfig.profile && refreshedConfig.profile.quota
+          ? sourceLabel + "\uFF0C\u989D\u5EA6\u4FE1\u606F\u5DF2\u540C\u6B65\u3002"
+          : sourceLabel + "\uFF0C\u4F46\u6682\u672A\u83B7\u53D6\u5230\u989D\u5EA6\u5934\u4FE1\u606F\u3002";
+        return refreshedConfig;
+      } catch (error) {
+        authStatus.textContent = sourceLabel + "\uFF0C\u4F46\u989D\u5EA6\u540C\u6B65\u5931\u8D25: " + (error && error.message ? error.message : String(error));
+        return config;
+      }
     }
 
     async function login() {
       const button = document.getElementById("loginBtn");
       setBusy(button, true);
-      authStatus.textContent = "\u6B63\u5728\u65B0\u589E\u8D26\u53F7\u5E76\u7B49\u5F85 OAuth \u5B8C\u6210...";
+      authStatus.textContent = "\u6B63\u5728\u65B0\u589E\u8D26\u53F7\u3001\u7B49\u5F85 OAuth \u5B8C\u6210\uFF0C\u5E76\u540C\u6B65\u989D\u5EA6\u4FE1\u606F...";
       try {
-        const config = await fetchJson("/_gateway/admin/login", {
+        let config = await fetchJson("/_gateway/admin/login", {
           method: "POST",
         });
         renderConfig(config);
-        authStatus.textContent = "\u8D26\u53F7\u5DF2\u4FDD\u5B58\uFF0C\u5E76\u5DF2\u5207\u6362\u4E3A\u5F53\u524D\u4F7F\u7528\u8D26\u53F7: " + getProfileDisplayLabel(config.profile);
+        const baseMessage = "\u8D26\u53F7\u5DF2\u4FDD\u5B58\uFF0C\u5E76\u5DF2\u5207\u6362\u4E3A\u5F53\u524D\u4F7F\u7528\u8D26\u53F7: " + getProfileDisplayLabel(config.profile);
+        config = await syncQuotaAfterProfileChange(config, baseMessage);
+        if (config.profile && config.profile.quota) {
+          authStatus.textContent = "\u8D26\u53F7\u5DF2\u4FDD\u5B58\uFF0C\u5DF2\u5207\u6362\u4E3A\u5F53\u524D\u4F7F\u7528\u8D26\u53F7\u5E76\u540C\u6B65\u989D\u5EA6\u4FE1\u606F: " + getProfileDisplayLabel(config.profile);
+        }
       } catch (error) {
         authStatus.textContent = error.message;
       } finally {
@@ -2333,7 +2827,7 @@ function renderAdminPage() {
       setBusy(button, true);
       authStatus.textContent = action === "activate" ? "\u6B63\u5728\u5207\u6362\u5F53\u524D\u8D26\u53F7..." : "\u6B63\u5728\u5220\u9664\u8D26\u53F7...";
       try {
-        const config = await fetchJson(
+        let config = await fetchJson(
           action === "activate" ? "/_gateway/admin/profiles/activate" : "/_gateway/admin/profiles/remove",
           {
             method: "POST",
@@ -2346,9 +2840,15 @@ function renderAdminPage() {
           },
         );
         renderConfig(config);
-        authStatus.textContent = action === "activate"
-          ? "\u5F53\u524D\u8D26\u53F7\u5DF2\u5207\u6362\u4E3A: " + getProfileDisplayLabel(config.profile)
-          : "\u8D26\u53F7\u5DF2\u5220\u9664\u3002";
+        if (action === "activate") {
+          const baseMessage = "\u5F53\u524D\u8D26\u53F7\u5DF2\u5207\u6362\u4E3A: " + getProfileDisplayLabel(config.profile);
+          config = await syncQuotaAfterProfileChange(config, baseMessage);
+          if (config.profile && config.profile.quota) {
+            authStatus.textContent = baseMessage + "\uFF0C\u989D\u5EA6\u4FE1\u606F\u5DF2\u540C\u6B65\u3002";
+          }
+        } else {
+          authStatus.textContent = "\u8D26\u53F7\u5DF2\u5220\u9664\u3002";
+        }
       } catch (error) {
         authStatus.textContent = error.message;
       } finally {
@@ -2380,6 +2880,24 @@ function renderAdminPage() {
       }
     }
 
+    async function refreshModels() {
+      const button = document.getElementById("refreshModelsBtn");
+      setBusy(button, true);
+      authStatus.textContent = "\u6B63\u5728\u540C\u6B65 Codex \u6A21\u578B\u5217\u8868...";
+      try {
+        await fetchJson("/_gateway/models/refresh", {
+          method: "POST",
+        });
+        const config = await fetchJson("/_gateway/admin/config");
+        renderConfig(config);
+        authStatus.textContent = "Codex \u6A21\u578B\u5217\u8868\u5DF2\u540C\u6B65\u3002";
+      } catch (error) {
+        authStatus.textContent = error.message;
+      } finally {
+        setBusy(button, false);
+      }
+    }
+
     function extractModelFromPayload(payload) {
       if (!payload || typeof payload !== "object") {
         return state.config ? state.config.settings.defaultModel : "-";
@@ -2396,6 +2914,7 @@ function renderAdminPage() {
       const button = document.getElementById("runTestBtn");
       const tracker = createTimingTracker();
       setBusy(button, true);
+      setTesterResultTab("response");
       testerMeta.textContent = "\u8BF7\u6C42\u4E2D: " + meta.method + " " + endpoint;
       responseBody.textContent = "\u8BF7\u6C42\u53D1\u9001\u4E2D...";
       timingBody.textContent = "\u8BF7\u6C42\u53D1\u9001\u4E2D...";
@@ -2440,6 +2959,10 @@ function renderAdminPage() {
           tracker,
           ["HTTP \u72B6\u6001: " + response.status + " " + response.statusText],
         );
+        if (typeof parsed !== "string" && parsed && Array.isArray(parsed.data)
+          && parsed.data.some(function (item) { return item && typeof item.b64_json === "string" && item.b64_json.length > 0; })) {
+          setTesterResultTab("preview");
+        }
         testerMeta.textContent = (response.ok ? "\u6210\u529F" : "\u5931\u8D25") + ": HTTP " + response.status + " " + meta.method + " " + endpoint;
 
         upsertRequestLog({
@@ -2495,12 +3018,28 @@ function renderAdminPage() {
     }
 
     document.getElementById("loginBtn").addEventListener("click", login);
-    document.getElementById("refreshBtn").addEventListener("click", refreshConfig);
+    document.getElementById("refreshBtn").addEventListener("click", function () {
+      authStatus.textContent = "\u6B63\u5728\u540C\u6B65\u989D\u5EA6\u4E0E\u7248\u672C\u72B6\u6001...";
+      refreshConfig({
+        syncRuntime: true,
+      }).then(function () {
+        authStatus.textContent = "\u989D\u5EA6\u4E0E\u7248\u672C\u72B6\u6001\u5DF2\u5237\u65B0\u3002";
+      }).catch(function (error) {
+        authStatus.textContent = error && error.message ? error.message : String(error);
+      });
+    });
     document.getElementById("logoutBtn").addEventListener("click", logout);
     contactBtn.addEventListener("click", openContactModal);
     document.getElementById("closeContactBtn").addEventListener("click", closeContactModal);
+    document.getElementById("closeImagePreviewBtn").addEventListener("click", closeImagePreviewModal);
+    document.getElementById("refreshModelsBtn").addEventListener("click", refreshModels);
     document.getElementById("saveModelBtn").addEventListener("click", saveModel);
     runTestBtn.addEventListener("click", runTest);
+    document.querySelectorAll("[data-result-tab]").forEach(function (button) {
+      button.addEventListener("click", function () {
+        setTesterResultTab(button.getAttribute("data-result-tab"));
+      });
+    });
     toggleEmailBtn.addEventListener("click", function () {
       state.showEmails = !state.showEmails;
       updateEmailToggleButton();
@@ -2595,12 +3134,23 @@ function renderAdminPage() {
       }
     });
 
+    imagePreviewModal.addEventListener("click", function (event) {
+      if (event.target === imagePreviewModal) {
+        closeImagePreviewModal();
+      }
+    });
+
     document.addEventListener("keydown", function (event) {
+      if (event.key === "Escape" && imagePreviewModal.classList.contains("is-open")) {
+        closeImagePreviewModal();
+      }
       if (event.key === "Escape" && contactModal.classList.contains("is-open")) {
         closeContactModal();
       }
     });
 
+    setTesterResultTab(state.testerResultTab);
+    scheduleRuntimeRefresh();
     refreshConfig().catch(function (error) {
       authStatus.textContent = error && error.message ? error.message : String(error);
       testerMeta.textContent = "\u52A0\u8F7D\u5931\u8D25";