opencode-claude-code-ua 0.3.6 → 0.3.9

package/ui/accounts.js

@@ -4,25 +4,118 @@ export function formatAmount(value, signed = false) {
   return signed && value > 0 ? `+${text}` : text;
 }
 
+function formatConnectionTime(value) {
+  if (!value) return '尚未查询';
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? '尚未查询' : date.toLocaleString('zh-CN');
+}
+
+/** Classify a connection reading without ever borrowing site-account totals. */
+export function connectionBalanceSource(result) {
+  if (!result) return 'unknown';
+  const usage = result.usage && typeof result.usage === 'object' ? result.usage : null;
+  if (!usage) return result.error ? 'error' : 'unknown';
+  if (typeof usage.error === 'string' && usage.error.trim()) return 'error';
+  if (typeof usage.balance === 'string' && usage.balance.trim()) return 'key';
+  if (Array.isArray(usage.windows) && usage.windows.some(window => typeof window?.display === 'string' && window.display.trim())) return 'key';
+  return 'unknown';
+}
+
+/** Format one configured connection row; bindings are shown, never auto-selected. */
+export function connectionBalanceView(connection = {}, result = null, accounts = []) {
+  const usage = result?.usage && typeof result.usage === 'object' ? result.usage : null;
+  const windows = Array.isArray(usage?.windows) ? usage.windows : [];
+  const windowsText = windows
+    .map(item => typeof item?.display === 'string' ? item.display.trim() : '')
+    .filter(Boolean)
+    .join(' ');
+  const balance = typeof usage?.balance === 'string' && usage.balance.trim() ? usage.balance.trim() : '余额未知';
+  const source = connectionBalanceSource(result);
+  const accountId = connection.newApiAccountId ?? '';
+  const bound = accountId ? (Array.isArray(accounts) ? accounts : []).find(account => account.id === accountId) : null;
+  const boundAccount = !accountId
+    ? '未绑定签到账号'
+    : bound ? `签到账号：${bound.name}` : '绑定的签到账号已失效';
+  return {
+    name: String(connection.name ?? '').trim() || '未命名连接',
+    root: String(connection.baseURL ?? '').trim() || '—',
+    balance,
+    windows: windowsText,
+    source,
+    sourceLabel: source === 'key' ? '已配置连接 Key 用量' : source === 'error' ? '查询失败' : '尚未查询',
+    boundAccount,
+    lastAt: formatConnectionTime(result?.at),
+    error: typeof usage?.error === 'string' && usage.error.trim()
+      ? usage.error
+      : typeof result?.error === 'string' ? result.error : '',
+  };
+}
+
+/** A reading is valid only for the exact id, Key revision and address it came from. */
+export function connectionResultMatches(connection = {}, result = null) {
+  return Boolean(connection && result
+    && result.connectionId === connection.id
+    && result.revision === connection.revision
+    && result.baseURL === connection.baseURL);
+}
+
+/** Drop readings after a list reload changes the Key revision or address. */
+export function pruneConnectionResults(connections = [], results = {}) {
+  const kept = {};
+  for (const connection of Array.isArray(connections) ? connections : []) {
+    const result = results?.[connection.id];
+    if (connectionResultMatches(connection, result)) kept[connection.id] = result;
+  }
+  return kept;
+}
+
+/** Explicit same-origin refresh; the network is never touched by the initial list load. */
+export async function requestConnectionUsage(fetcher, connection = {}) {
+  let response;
+  try {
+    response = await fetcher('./api/accounts/connection-usage', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ connectionId: connection.id, confirmNetwork: true }),
+    });
+  } catch {
+    return { ok: false, error: 'Key 用量查询未完成，请检查站点地址与网络' };
+  }
+  let data = null;
+  try { data = await response.json(); } catch { data = null; }
+  if (!response.ok) {
+    return { ok: false, error: data && typeof data.error === 'string' && data.error ? data.error : 'Key 用量查询未完成' };
+  }
+  if (!data || typeof data !== 'object' || data.connectionId !== connection.id
+    || !data.usage || typeof data.usage !== 'object') {
+    return { ok: false, error: 'Key 用量响应无法确认，请稍后重试' };
+  }
+  return { ok: true, data };
+}
+
+
 export function accountValues(account = {}) {
   return {
-    id: account.id, name: account.name ?? '', siteUrl: account.siteUrl ?? '', userId: account.userId ?? '',
-    authMode: account.authMode ?? 'token', accessToken: '', cookie: '',
+    id: account.id, name: account.name ?? '', siteType: account.siteType === 'agentrouter' ? 'agentrouter' : 'newapi',
+    siteUrl: account.siteUrl ?? '', userId: account.userId ?? '', username: account.username ?? '',
+    authMode: account.authMode ?? 'token', accessToken: '', cookie: '', password: '',
     quotaPerUnit: account.quotaPerUnit ?? 500000, unit: account.unit ?? 'USD',
     enabled: account.enabled ?? true, checkinEnabled: account.checkinEnabled ?? true,
     scheduleEnabled: account.schedule?.enabled ?? false,
     scheduleTime: account.schedule?.time ?? '09:00',
     scheduleTimeZone: account.schedule?.timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone ?? 'UTC',
-    clearAccessToken: false, clearCookie: false,
+    clearAccessToken: false, clearCookie: false, clearPassword: false,
   };
 }
 
 export function accountPayload(values) {
-  const { clearAccessToken, clearCookie, scheduleEnabled = false, scheduleTime = '09:00', scheduleTimeZone = 'UTC', ...raw } = values;
-  const account = { ...raw, quotaPerUnit: Number(raw.quotaPerUnit), schedule: { enabled: scheduleEnabled, time: scheduleTime, timeZone: scheduleTimeZone } };
+  const { clearAccessToken, clearCookie, clearPassword, scheduleEnabled = false, scheduleTime = '09:00', scheduleTimeZone = 'UTC', ...raw } = values;
+  const account = { ...raw, siteType: raw.siteType === 'agentrouter' ? 'agentrouter' : 'newapi', username: String(raw.username ?? '').trim(), quotaPerUnit: Number(raw.quotaPerUnit), schedule: { enabled: scheduleEnabled, time: scheduleTime, timeZone: scheduleTimeZone } };
+  if (!account.password) delete account.password;
   const clearSecrets = [];
   if (clearAccessToken) { clearSecrets.push('accessToken'); account.accessToken = ''; }
   if (clearCookie) { clearSecrets.push('cookie'); account.cookie = ''; }
+  if (clearPassword) { clearSecrets.push('password'); account.password = ''; }
   if (!account.id) delete account.id;
   return { account, clearSecrets };
 }
@@ -40,7 +133,7 @@ export function accountSummary(account) {
     deltaRequests: snapshot?.deltaRequests == null ? '—' : String(snapshot.deltaRequests),
     state: !account.enabled ? '已停用' : account.status?.stale ? '缓存读数' : snapshot ? '已更新' : '尚未查询',
     error: account.status?.error ?? '',
-    checkin: labels[account.checkin?.state] ?? account.checkin?.state ?? '尚未签到',
+    checkin: account.checkin?.state === 'unknown' && account.checkin.lastAttemptAt ? '结果未确认' : labels[account.checkin?.state] ?? account.checkin?.state ?? '尚未签到',
     schedule: !account.schedule?.enabled ? '自动签到未开启' : !account.enabled || !account.checkinEnabled
       ? '自动签到已暂停（账号或签到已停用）' : `每天 ${account.schedule.time} · ${account.schedule.timeZone}`,
     reward: amount(account.checkin?.reward), reset: snapshot?.reset ?? false,
@@ -65,8 +158,10 @@ export function normalizedAccountDraft(values = {}, secrets = {}) {
   return {
     id: text(values.id),
     name: text(values.name),
+    siteType: values.siteType === 'agentrouter' ? 'agentrouter' : 'newapi',
     siteUrl: text(values.siteUrl),
     userId: text(values.userId),
+    username: text(values.username),
     authMode: values.authMode === 'cookie' ? 'cookie' : 'token',
     quotaPerUnit: number(values.quotaPerUnit),
     unit: text(values.unit),
@@ -77,17 +172,38 @@ export function normalizedAccountDraft(values = {}, secrets = {}) {
     scheduleTimeZone: text(values.scheduleTimeZone),
     accessToken: secretIntent(values, 'accessToken', 'clearAccessToken', Boolean(secrets.accessToken)),
     cookie: secretIntent(values, 'cookie', 'clearCookie', Boolean(secrets.cookie)),
+    password: secretIntent(values, 'password', 'clearPassword', Boolean(secrets?.password)),
   };
 }
 
+/** Client-side field validation; the backend repeats it authoritatively. */
+export function accountFieldErrors(values = {}, secrets = {}) {
+  const text = (value) => value === null || value === undefined ? '' : String(value).trim();
+  const errors = {};
+  if (!text(values.name)) errors.name = '请填写账号名称';
+  if (!text(values.siteUrl)) errors.siteUrl = '请填写站点地址';
+  const siteType = values.siteType === 'agentrouter' ? 'agentrouter' : 'newapi';
+  const userId = text(values.userId);
+  if (siteType === 'newapi') {
+    if (!/^[1-9]\d*$/.test(userId)) errors.userId = '请填写正整数用户 ID';
+  } else {
+    if (userId && !/^[1-9]\d*$/.test(userId)) errors.userId = '用户 ID 必须为正整数，或留空由登录结果确定';
+    if (!text(values.username)) errors.username = '请填写 AgentRouter 登录用户名';
+    if (!text(values.password) && !values.clearPassword && !secrets?.password) {
+      errors.password = '请填写登录密码；已保存的密码可留空保留';
+    }
+  }
+  return errors;
+}
+
 export function accountDraftDirty(baseline, draft) {
   if (!baseline || !draft) return false;
   return JSON.stringify(baseline) !== JSON.stringify(draft);
 }
 
-export function bulkEligibility(accounts = []) {
+export function bulkEligibility(accounts = [], connections = []) {
   const list = Array.isArray(accounts) ? accounts : [];
-  const refresh = list.some((account) => account?.enabled === true);
+  const refresh = list.some((account) => account?.enabled === true) || (Array.isArray(connections) && connections.some(connection => connection?.enabled === true));
   const checkin = list.some((account) => account?.enabled === true && account?.checkinEnabled === true);
   return {
     refresh,
@@ -141,15 +257,18 @@ export async function initializeAccounts() {
   const get = (id) => document.getElementById(id);
   const editor = get('account-editor');
   const history = get('account-history');
-  const controls = { name: 'account-name', siteUrl: 'site-url', userId: 'user-id', authMode: 'auth-mode', accessToken: 'access-token', cookie: 'account-cookie', quotaPerUnit: 'quota-per-unit', unit: 'unit', enabled: 'account-enabled', checkinEnabled: 'checkin-enabled', scheduleEnabled: 'schedule-enabled', scheduleTime: 'schedule-time', scheduleTimeZone: 'schedule-timezone', clearAccessToken: 'clear-token', clearCookie: 'clear-cookie' };
-  const checks = new Set(['enabled', 'checkinEnabled', 'scheduleEnabled', 'clearAccessToken', 'clearCookie']);
-  const fieldIds = { name: 'account-name', siteUrl: 'site-url', userId: 'user-id', authMode: 'auth-mode',
-    accessToken: 'access-token', cookie: 'account-cookie', quotaPerUnit: 'quota-per-unit', unit: 'unit',
+  const controls = { name: 'account-name', siteType: 'site-type', siteUrl: 'site-url', userId: 'user-id', username: 'agent-username', authMode: 'auth-mode', accessToken: 'access-token', cookie: 'account-cookie', password: 'agent-password', quotaPerUnit: 'quota-per-unit', unit: 'unit', enabled: 'account-enabled', checkinEnabled: 'checkin-enabled', scheduleEnabled: 'schedule-enabled', scheduleTime: 'schedule-time', scheduleTimeZone: 'schedule-timezone', clearAccessToken: 'clear-token', clearCookie: 'clear-cookie', clearPassword: 'clear-password' };
+  const checks = new Set(['enabled', 'checkinEnabled', 'scheduleEnabled', 'clearAccessToken', 'clearCookie', 'clearPassword']);
+  const fieldIds = { name: 'account-name', siteUrl: 'site-url', userId: 'user-id', username: 'agent-username',
+    authMode: 'auth-mode', accessToken: 'access-token', cookie: 'account-cookie', password: 'agent-password',
+    quotaPerUnit: 'quota-per-unit', unit: 'unit',
     'schedule.enabled': 'schedule-enabled', 'schedule.time': 'schedule-time', 'schedule.timeZone': 'schedule-timezone' };
   const actionStatus = { refresh: '正在刷新账号余额…', checkin: '正在签到并刷新余额…',
     bind: '正在更新当前连接绑定…', remove: '正在删除账号…' };
   let accounts = [];
   let binding = null;
+  let connections = [];
+  let connectionResults = {};
   let editing;
   let running = false;
   let unknownOutcome = null;
@@ -217,10 +336,11 @@ export async function initializeAccounts() {
     return window.confirm('有未保存的账号修改。确定放弃修改并继续吗？选择“取消”可返回继续编辑。');
   }
   function syncControls() {
-    const bulk = bulkEligibility(accounts);
+    const bulk = bulkEligibility(accounts, connections);
     const blocked = running || Boolean(unknownOutcome);
     get('refresh-all').disabled = blocked || loading || !bulk.refresh;
     get('checkin-all').disabled = blocked || loading || !bulk.checkin;
+    get('connection-refresh-all').disabled = blocked || loading || connections.length === 0;
     get('account-new').disabled = blocked;
     get('accounts-done').disabled = blocked;
     get('account-save').disabled = blocked;
@@ -287,8 +407,11 @@ export async function initializeAccounts() {
     syncControls();
   }
   function credentialFields() {
-    get('token-field').hidden = get('auth-mode').value !== 'token' && !editing?.secrets.accessToken;
-    get('cookie-field').hidden = get('auth-mode').value !== 'cookie' && !editing?.secrets.cookie;
+    const agentRouter = get('site-type').value === 'agentrouter';
+    get('agentrouter-fields').hidden = !agentRouter;
+    get('user-id').required = !agentRouter;
+    get('token-field').hidden = get('auth-mode').value !== 'token' && !editing?.secrets?.accessToken;
+    get('cookie-field').hidden = get('auth-mode').value !== 'cookie' && !editing?.secrets?.cookie;
   }
   function scheduleFields() {
     get('schedule-settings').hidden = !get('schedule-enabled').checked;
@@ -302,8 +425,9 @@ export async function initializeAccounts() {
       else get(id).value = values[key];
     }
     get('editor-title').textContent = account ? '编辑站点账号' : '添加站点账号';
-    get('token-state').textContent = account?.secrets.accessToken ? '已保存；留空保留原令牌' : '尚未保存系统访问令牌';
-    get('cookie-state').textContent = account?.secrets.cookie ? '已保存；留空保留原 Cookie' : '尚未保存 Cookie';
+    get('token-state').textContent = account?.secrets?.accessToken ? '已保存；留空保留原令牌' : '尚未保存系统访问令牌';
+    get('cookie-state').textContent = account?.secrets?.cookie ? '已保存；留空保留原 Cookie' : '尚未保存 Cookie';
+    get('agent-password-state').textContent = account?.secrets?.password ? '已保存；留空保留原密码' : '尚未保存登录密码';
     error('', true);
     clearFieldErrors();
     credentialFields(); scheduleFields();
@@ -339,15 +463,81 @@ export async function initializeAccounts() {
       return;
     }
     if (!result.ok) error(result.error);
-    busy(false);
     await load();
+    try {
+      if (action === 'refresh' && !id) await refreshConnections();
+    } finally {
+      busy(false);
+    }
   }
   function statusSummary() {
     if (accounts.length === 0) return '尚未添加站点账号。添加后可刷新余额或签到。';
-    return `${accounts.length} 个账号，${accounts.filter((account) => account.enabled).length} 个启用。${binding ? `当前连接 ${binding.account}；绑定需点击完成后保存。` : '从 Magpie 当前账号的管理入口可绑定余额与签到。'}`;
+    return `${accounts.length} 个账号，${accounts.filter((account) => account.enabled).length} 个启用。${binding ? `当前连接 ${binding.account}；绑定需点击完成后保存。` : '签到账号绑定请在连接与模型选择中操作。'}`;
+  }
+  function renderConnections() {
+    connectionResults = pruneConnectionResults(connections, connectionResults);
+    const list = get('connection-balance-list');
+    const empty = connections.length === 0;
+    list.hidden = empty;
+    get('connection-balance-rows').replaceChildren(...connections.map((connection) => {
+      const result = connectionResults[connection.id] ?? null;
+      const view = connectionBalanceView(connection, result, accounts);
+      const row = element('tr');
+      const identity = element('td');
+      identity.append(element('strong', view.name), element('div', view.root, 'detail'), element('div', view.boundAccount, 'detail'));
+      const balance = element('td');
+      balance.append(element('div', view.balance, 'primary-value'), element('div', view.sourceLabel, 'detail'));
+      const usage = element('td');
+      usage.append(element('div', view.windows || '—', 'detail'));
+      if (view.error && !view.windows.includes(view.error)) usage.append(element('div', view.error, 'detail'));
+      const last = element('td');
+      last.append(element('div', view.lastAt, 'detail'));
+      for (const [cell, label] of [[identity, '连接 / 站点'], [balance, 'Key 余额'], [usage, 'Key 用量'], [last, '最近查询']]) cell.dataset.label = label;
+      row.append(identity, balance, usage, last);
+      return row;
+    }));
+    if (empty) {
+      get('connection-balance-status').textContent = '尚未读取到已配置连接；请先在连接与模型选择中保存连接。';
+    } else if (Object.keys(connectionResults).length === 0) {
+      get('connection-balance-status').textContent = `已读取 ${connections.length} 个连接，Key 余额尚未查询；请手动刷新。`;
+    }
+  }
+  async function refreshConnections() {
+    const targets = connections.slice();
+    if (targets.length === 0) {
+      get('connection-balance-status').textContent = '尚未读取到已配置连接；没有可刷新的 Key 用量。';
+      return;
+    }
+    get('connection-balance-status').textContent = `正在刷新 ${targets.length} 个连接的 Key 用量…`;
+    let completed = 0;
+    let failed = 0;
+    let discarded = 0;
+    for (const target of targets) {
+      const current = connections.find((connection) => connection.id === target.id);
+      if (!current || current.revision !== target.revision || current.baseURL !== target.baseURL) continue;
+      const result = await requestConnectionUsage(fetch.bind(globalThis), current);
+      const latest = connections.find((connection) => connection.id === current.id);
+      if (!latest || latest.revision !== current.revision || latest.baseURL !== current.baseURL) { discarded++; continue; }
+      if (result.ok && result.data.revision !== current.revision) { discarded++; continue; }
+      connectionResults[current.id] = result.ok
+        ? { connectionId: current.id, revision: current.revision, baseURL: current.baseURL, usage: result.data.usage, at: result.data.at || new Date().toISOString() }
+        : { connectionId: current.id, revision: current.revision, baseURL: current.baseURL, error: result.error, at: new Date().toISOString() };
+      if (result.ok) completed++;
+      else failed++;
+      renderConnections();
+      get('connection-balance-status').textContent = `正在刷新连接 Key 用量…（${completed + failed}/${targets.length}）`;
+    }
+    renderConnections();
+    get('connection-balance-status').textContent = discarded
+      ? `已刷新 ${completed + failed} 个连接；${discarded} 个结果因 Key 或站点已变化而丢弃，请重新读取列表。`
+      : failed
+        ? `已刷新 ${completed + failed} 个连接；${failed} 个查询失败，详见各行站点返回的安全提示。`
+        : `已刷新 ${completed} 个连接的 Key 用量；不与站点账号汇总合并。`;
   }
   function render(data) {
     accounts = Array.isArray(data.accounts) ? data.accounts : [];
+    connections = Array.isArray(data.connections) ? data.connections : [];
+    connectionResults = pruneConnectionResults(connections, connectionResults);
     binding = data.binding ?? null;
     const empty = accounts.length === 0;
     get('account-empty').hidden = !empty;
@@ -355,7 +545,7 @@ export async function initializeAccounts() {
     get('accounts-table').hidden = empty;
     get('accounts-status').textContent = statusSummary();
     get('account-totals').replaceChildren(...Object.entries(data.totals ?? {}).map(([unit, total]) => {
-      const node = element('section', undefined, 'unit-total'); node.append(element('h2', `${unit} 账号汇总`));
+      const node = element('section', undefined, 'unit-total'); node.append(element('h2', `${unit} 站点账号汇总`));
       const metrics = element('div', undefined, 'total-values');
       for (const [name, value] of [['剩余额度', total.remaining], ['累计消耗', total.used], ['消耗增量', total.deltaUsed]]) {
         const metric = element('div', undefined, 'total-metric'); metric.append(element('small', name), element('strong', formatAmount(value))); metrics.append(metric);
@@ -364,7 +554,7 @@ export async function initializeAccounts() {
     }));
     get('account-list').replaceChildren(...accounts.map((account) => {
       const row = element('tr'); const view = accountSummary(account);
-      const identity = element('td'); identity.append(element('strong', account.name), element('div', `${account.siteUrl} · ID ${account.userId}`, 'detail'), element('span', view.state, `account-state${account.status?.stale ? ' stale' : ''}`));
+      const identity = element('td'); identity.append(element('strong', account.name), element('div', `${account.siteType === 'agentrouter' ? 'AgentRouter' : 'New API'} · ${account.siteUrl} · ID ${account.userId || (account.siteType === 'agentrouter' ? '登录后确定' : '—')}`, 'detail'), element('span', view.state, `account-state${account.status?.stale ? ' stale' : ''}`));
       if (view.error) identity.append(element('div', view.error, 'detail'));
       if (data.binding?.selected === account.id) identity.append(element('span', '已选为当前连接', 'account-state'));
       const remaining = element('td'); remaining.append(element('div', view.remaining, 'primary-value'), element('div', view.at, 'detail'));
@@ -390,6 +580,7 @@ export async function initializeAccounts() {
       for (const [cell, label] of [[identity, '账号 / 站点'], [remaining, '剩余额度'], [used, '累计消耗'], [delta, '相较上次成功刷新'], [checkin, '签到'], [actions, '操作']]) cell.dataset.label = label;
       return row;
     }));
+    renderConnections();
     syncControls();
   }
   async function load() {
@@ -434,10 +625,14 @@ export async function initializeAccounts() {
       get('accounts-retry').hidden = false;
       if (!hasLoaded) {
         accounts = [];
+        connections = [];
+        connectionResults = {};
         get('account-empty').hidden = true;
         get('accounts-table-scroll').hidden = true;
         get('accounts-table').hidden = true;
         get('account-totals').replaceChildren();
+        renderConnections();
+        get('connection-balance-status').textContent = '连接列表尚未读取；请先重新读取账号列表。';
       }
     } finally {
       loading = false;
@@ -458,6 +653,7 @@ export async function initializeAccounts() {
   });
   get('history-close').addEventListener('click', () => history.close());
   get('auth-mode').addEventListener('change', credentialFields);
+  get('site-type').addEventListener('change', credentialFields);
   get('schedule-enabled').addEventListener('change', scheduleFields);
   get('accounts-retry').addEventListener('click', () => { if (!running && !loading) void load(); });
   get('editor-recheck').addEventListener('click', () => { if (!running && !loading) void load(); });
@@ -465,6 +661,17 @@ export async function initializeAccounts() {
   get('editor-ack').addEventListener('click', acknowledgeUnknown);
   get('refresh-all').addEventListener('click', () => perform('refresh'));
   get('checkin-all').addEventListener('click', () => perform('checkin'));
+  get('connection-refresh-all').addEventListener('click', async () => {
+    if (running || unknownOutcome) return;
+    busy(true); error('');
+    try {
+      await refreshConnections();
+    } catch {
+      error('连接 Key 用量刷新未完成，请稍后重试。');
+    } finally {
+      busy(false);
+    }
+  });
   get('account-form').addEventListener('input', (event) => {
     const target = event.target;
     if (target && typeof target.matches === 'function' && target.matches('[aria-invalid]')) {
@@ -526,12 +733,9 @@ export async function initializeAccounts() {
     event.preventDefault();
     if (running || unknownOutcome) return;
     const values = fields();
-    const missing = {};
-    if (!values.name.trim()) missing.name = true;
-    if (!values.siteUrl.trim()) missing.siteUrl = true;
-    if (!/^[1-9]\d*$/.test(values.userId)) missing.userId = true;
+    const missing = accountFieldErrors(values, editing?.secrets ?? {});
     if (Object.keys(missing).length) {
-      error('请填写账号名称、站点地址与正整数用户 ID', true);
+      error('请补充或修正标记的字段。', true);
       markFieldErrors(missing);
       return;
     }

package/ui/pro.css

@@ -562,6 +562,7 @@ dd {
 
 .overview-item {
   display: flex;
+  align-items: flex-start;
   justify-content: space-between;
   gap: 15px;
   padding: 16px 0;

package/ui/pro.html

@@ -13,7 +13,7 @@
 <body>
   <div id="pro-shell" class="pro-shell" data-ready="false">
     <aside class="pro-side">
-      <a class="pro-brand" href="#overview" aria-label="UA PRO 概览"><span class="pro-mark" aria-hidden="true"><img src="./icon.svg" width="40" height="40" alt=""></span><span class="pro-brand-text"><span class="pro-eyebrow">MAGPIE</span><strong>UA PRO</strong><small>Claude Code · Codex 出站兼容</small></span></a>
+      <a class="pro-brand" href="#overview" data-view-link="overview" aria-label="UA PRO 概览"><span class="pro-mark" aria-hidden="true"><img src="./icon.svg" width="40" height="40" alt=""></span><span class="pro-brand-text"><span class="pro-eyebrow">MAGPIE</span><strong>UA PRO</strong><small>Claude Code · Codex 出站兼容</small></span></a>
       <p class="pro-side-copy">配置连接，选择模板，<br>用真实模型验证请求。</p>
       <nav id="pro-nav" class="pro-nav" data-nav aria-label="UA PRO 分区">
         <a href="#overview" data-view-link="overview">概览</a>
@@ -25,6 +25,7 @@
       </nav>
       <dl class="pro-side-meta">
         <div class="pro-local-note"><dt>本地保存</dt><dd>密钥只存本机，不会显示在页面上。</dd></div>
+        <div><dt>运行版本</dt><dd id="pro-version">—</dd></div>
         <div><dt>配置 generation</dt><dd id="pro-generation" class="mono">—</dd></div>
         <div><dt>运行</dt><dd id="pro-runtime">读取中</dd></div>
       </dl>
@@ -33,7 +34,7 @@
     <main class="pro-main" id="pro-main">
       <header class="pro-head">
         <div class="pro-head-text"><h1 id="pro-title">概览</h1><p id="pro-status" role="status">正在读取 UA PRO 状态…</p></div>
-        <div class="pro-head-actions"><button id="pro-reload" type="button" class="ghost">重新读取</button><button id="pro-close" type="button" class="ghost">完成并关闭</button></div>
+        <div class="pro-head-actions"><button id="host-sync" type="button" class="ghost" hidden>同步到宿主</button><button id="pro-reload" type="button" class="ghost">重新读取</button><button id="pro-close" type="button" class="ghost">完成并关闭</button></div>
       </header>
       <div id="pro-error" class="pro-alert" role="alert" tabindex="-1" hidden></div>
       <div id="pro-pending" class="pro-pending" role="status" hidden>
@@ -49,10 +50,10 @@
           <button type="button" class="primary" data-action="connection-new">添加连接</button>
         </div>
         <div class="panel">
-          <div class="panel-head"><h2>连接与生效状态</h2><a href="#connections" class="link">管理连接</a></div>
+          <div class="panel-head"><h2>连接与生效状态</h2><a id="overview-manage-connections" href="#connections" data-view-link="connections" class="link">管理连接</a></div>
           <div id="overview-connections" class="overview-list"></div>
         </div>
-        <p class="note">保存成功只表示配置已写入文件；正在运行的宿主是否已采用，以实际请求观察到的 generation 为准。</p>
+        <p class="note">普通连接位于 Magpie 的 UA PRO 供应商账号列表；勾选独立显示后才会有单独供应商。注册状态与实际请求记录分别显示，页面测试不会自动代表宿主已载入。</p>
       </section>
 
       <section id="view-connections" data-view="connections" aria-labelledby="pro-title" hidden>
@@ -104,8 +105,12 @@
               <fieldset class="group">
                 <legend>站点与绑定</legend>
                 <label class="check"><input id="conn-enabled" type="checkbox" checked>启用此连接</label>
-                <label class="check"><input id="conn-independent" type="checkbox">在 Magpie 中独立显示此站点（需重载宿主）</label>
+                <label class="check"><input id="conn-independent" type="checkbox">作为独立供应商显示（不勾选时，位于 UA PRO 的账号列表）</label>
                 <label class="field" id="conn-site-field">站点 ID<input id="conn-site" maxlength="64" spellcheck="false" placeholder="main"></label>
+                <p class="hint">新增独立供应商保存后需重载 UA PRO 插件，再到 Magpie 供应商列表查看。</p>
+                <label class="field" id="conn-site-account-field">余额与签到账号<select id="conn-site-account"><option value="">不绑定签到账号（仅查询 Key 用量）</option></select></label>
+                <p id="conn-site-account-hint" class="hint">绑定只影响余额与签到，不复制凭据，也不改变模型请求；保存时按站点根地址校验。</p>
+                <p class="hint"><a id="conn-accounts-link" href="./accounts">管理签到账号</a>：补 Cookie、用户名或密码等凭据；旧绑定失效时会保留选项并提示重新选择。</p>
                 <label class="field" id="conn-binding-field">初始模板绑定<select id="conn-binding"></select></label>
                 <p id="conn-binding-note" class="hint" hidden>已有连接的模板绑定只能通过“应用模板”更改，保存连接不会改变它。</p>
               </fieldset>
@@ -296,12 +301,6 @@
             <p class="hint">在独立页面管理站点账号、余额与签到，打开前会确认未保存的草稿。</p>
             <div class="link-row"><a href="./accounts" class="btn ghost" data-leave="accounts">余额与签到</a></div>
           </div>
-          <div class="panel wide">
-            <h2>迁移旧 Claude 配置</h2>
-            <p class="hint">把本机旧 Claude 独立配置复制为 UA PRO 新连接，并绑定 14 头自定义模板。不修改、不停用原配置和原插件；写入前先预览映射。</p>
-            <div class="link-row"><button id="migration-preview" type="button" class="ghost">预览迁移</button><button id="migration-apply" type="button" class="primary" hidden>确认迁移</button></div>
-            <div id="migration-result" class="migration-result"></div>
-          </div>
           <div class="panel wide">
             <h2>本次配置会话</h2>
             <dl id="session-info" class="kv"></dl>