magpie-page-token-widget 0.2.0 → 0.3.3

package/lib/tailnet.mjs

@@ -1,4 +1,4 @@
-import { execFile } from 'node:child_process';
+import { execFile, spawnSync } from 'node:child_process';
 import { existsSync } from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
@@ -89,6 +89,38 @@ export async function status(runner) {
   }
 }
 
+// The same command, but without waiting: it is used at the end of a run,
+// where there is no time left for a promise. The runner may be given as well,
+// but then it has to answer at once.
+export function callSync(args, timeout = 15000, runner) {
+  if (runner) {
+    const result = runner(args);
+    if (result && typeof result.then === 'function') {
+      return { ok: false, error: 'The runner has to answer at once.' };
+    }
+    return result;
+  }
+  const binary = find();
+  if (!binary) return { ok: false, error: 'Tailscale is not installed on this computer.' };
+  try {
+    const result = IS_WINDOWS
+      ? spawnSync('cmd.exe', ['/d', '/s', '/c', windowsCommand(binary, args)], {
+        timeout,
+        windowsHide: true,
+        windowsVerbatimArguments: true,
+        encoding: 'utf8',
+      })
+      : spawnSync(binary, args, { timeout, windowsHide: true, encoding: 'utf8' });
+    if (result.error) return { ok: false, error: String(result.error.message || result.error) };
+    if (result.status !== 0) {
+      return { ok: false, error: String(result.stderr || '').trim() || 'tailscale failed' };
+    }
+    return { ok: true, stdout: String(result.stdout || '') };
+  } catch (error) {
+    return { ok: false, error: String(error?.message || error) };
+  }
+}
+
 // The address of this computer inside the tailnet: 100.64.0.0/10.
 export function pickIP(data) {
   const self = data?.Self || {};
@@ -261,6 +293,37 @@ export function dnsName(data) {
   return name.endsWith('.ts.net') ? name : null;
 }
 
+// The addresses of this computer that a phone of the own network of the user
+// could use: the cards of a cable, of a wi-fi, and the tunnels of a network
+// of one's own. The loopback is never a way in from outside. The 100.64/10
+// range IS in: a Headscale of the user's own hands out the same range
+// Tailscale uses, on an adapter that is not Tailscale's.
+export const isCgnatIPv4 = (ip) => /^100\.(6[4-9]|[789]\d|1[01]\d|12[0-7])\./.test(ip);
+
+export function bindCandidates(list = os.networkInterfaces()) {
+  const found = [];
+  for (const [name, addresses] of Object.entries(list || {})) {
+    if (!Array.isArray(addresses) || !addresses.length) continue;
+    const kind = interfaceKind(name, addresses);
+    // The loopback is never a way in from outside. The adapter of a tailnet
+    // is: it may be a Tailscale of this computer or a Headscale of the
+    // user's own, and the phone reaches the service on that address.
+    if (kind === 'loopback') continue;
+    for (const entry of addresses) {
+      if (!entry || entry.internal) continue;
+      const family = entry.family === 'IPv4' || entry.family === 4 ? 'IPv4' : 'IPv6';
+      if (family === 'IPv4') {
+        // The private addresses of a house or an office, and the range a
+        // Headscale of the user's own hands out (the same range Tailscale
+        // uses, on an adapter that is not Tailscale's).
+        if (!isPrivateIPv4(entry.address) && !isCgnatIPv4(entry.address)) continue;
+      } else if (!isUlaIPv6(entry.address)) continue;
+      found.push({ name, kind, address: entry.address });
+    }
+  }
+  return found;
+}
+
 export async function detect(runner) {
   const result = await status(runner);
   if (!result.ok) {

package/mobile/app.js

@@ -177,7 +177,7 @@ function speedText(metrics) {
 }
 function render(data, offline = false) {
   const stale = offline || Object.values(data.sources).some(source => source.state !== 'ok');
-  $('connection').textContent = offline ? '离线· 显示缓存' : stale ? '部分数据待更新' : '已连接· Tailscale';
+  $('connection').textContent = offline ? '离线· 显示缓存' : stale ? '部分数据待更新' : '已连接';
   $('status-dot').className = 'status-dot ' + (stale ? 'warn' : 'ok');
   const notices = [];
   if (data.demo) notices.push('演示模式· 所有数字、模型和设备用量均为虚构数据。');
@@ -228,7 +228,7 @@ async function load() {
     $('auth').close(); render(data);
   } catch {
     if (last) render(last, true);
-    else { $('connection').textContent = '连接失败'; $('notice').hidden = false; $('notice').textContent = '无法连接服务。请检查 PC 服务和 iPhone 的 Tailscale 连接。'; }
+    else { $('connection').textContent = '连接失败'; $('notice').hidden = false; $('notice').textContent = '无法连接服务。请检查 PC 服务和 iPhone 的网络（尾网或内网）。'; }
   } finally { $('refresh').disabled = false; }
 }
 $('auth-form').addEventListener('submit', event => {

package/mobile/index.html

@@ -48,7 +48,7 @@
       </section>
       <details class="install">
         <summary>添加到 iPhone 桌面 <span aria-hidden="true">↗</span></summary>
-        <ol><li>在 iPhone 安装 Scriptable，并保持 Tailscale 已连接。</li><li>新建脚本，粘贴 <a href="/scriptable/SetupUsageWidget.js">SetupUsageWidget.js</a> 的完整内容并运行。</li><li>输入本服务地址与只读令牌。安装器会自动下载桌面组件。</li><li>长按桌面添加 Scriptable，选择 UsageWidget；推荐中号。</li></ol>
+        <ol><li>在 iPhone 安装 Scriptable。手机要能访问这个服务地址：默认是 Tailscale 地址，也可以是你自己配好的内网地址或 HTTPS 地址。</li><li>新建脚本，粘贴 <a href="/scriptable/SetupUsageWidget.js">SetupUsageWidget.js</a> 的完整内容并运行。</li><li>输入服务地址与只读令牌（控制台「扫码配对」里有）。安装器会自动下载桌面组件。</li><li>长按桌面添加 Scriptable，选择 UsageWidget；推荐中号。</li></ol>
         <p>小号组件参数：<code>codex</code>、<code>minimax</code> 或 <code>glm</code>；追加 <code>|used</code> 改显已用（如 <code>glm|used</code>），中号组件填 <code>used</code> 可整体切换。令牌只保存在本机 Keychain。</p>
       </details>
       <footer><span>OBSERVED BY MAGPIE <span class="footer-separator">/</span> MADE FOR YOUR IPHONE</span><span id="updated">尚未更新</span></footer>

package/mobile/style.css

@@ -1,9 +1,9 @@
 @font-face{font-family:UsageSystem;src:local("SF Pro Display"),local("Segoe UI")}
 :root{color-scheme:light dark;--bg:#f7f7f5;--panel:#fff;--text:#232523;--muted:#888c86;--line:#e9ebe5;--track:#eef0eb;--fill:#4c544a;--accent:#6d8067;--warn:#b77c36;--bad:#b35447;--soft:#f2f4ef;--shadow:0 3px 18px #22270503}
 *{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:UsageSystem,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}a{color:inherit;text-underline-offset:4px}.shell{max-width:1120px;margin:auto;padding:0 44px}.topbar{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-size:27px;font-weight:650;letter-spacing:-1.4px;text-decoration:none}.brand-mark{display:inline-block;font-size:32px;line-height:1;transform:rotate(-35deg)}.brand-dot{margin-left:-9px;color:var(--accent)}.top-actions{display:flex;align-items:center;gap:13px}.theme-toggle{border:0;background:transparent;color:var(--muted);font-size:20px;padding:5px;line-height:1}.connection{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.status-dot{height:6px;width:6px;background:var(--muted);border-radius:50%}.status-dot.ok{background:var(--accent)}.status-dot.warn{background:var(--warn)}main{padding:46px 0 28px}.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:40px}.eyebrow{font-size:9px;font-weight:600;letter-spacing:2.8px;color:var(--muted);margin:0 0 13px}h1{font-size:32px;letter-spacing:-1px;font-weight:600;margin:0 0 12px}.intro{margin:0;font-size:13px;color:var(--muted);letter-spacing:.3px}button{cursor:pointer}.refresh{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);border-radius:24px;padding:9px 15px;color:var(--text);font-size:12px}.refresh>span:first-child{font-size:20px;line-height:1}.refresh:disabled{opacity:.45;cursor:wait}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.section-heading h2{font-size:13px;font-weight:550;letter-spacing:.3px;margin:0}.muted{font-size:10px;color:var(--muted)}.quota-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:26px}.panel{border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:25px;box-shadow:var(--shadow);min-width:0}.quota-card{padding:22px 24px}.provider-heading{display:flex;align-items:center;gap:10px;margin-bottom:25px}.provider-monogram{border:1px solid var(--line);border-radius:9px;width:31px;height:31px;display:grid;place-items:center;font-size:14px;font-weight:650}.provider-name{font-size:15px;font-weight:600;letter-spacing:-.4px}.tag{padding:4px 7px;background:var(--soft);color:var(--muted);font-size:9px;border-radius:4px;text-transform:uppercase;letter-spacing:.7px}.provider-heading .tag{margin-left:auto;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.window{margin:17px 0 0}.window.primary{margin-top:0}.window-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}.window-name{font-size:11px;color:var(--muted)}.window-value{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}.primary .window-value{font-size:36px;font-weight:500;letter-spacing:-1.6px}.primary .window-value small{font-size:17px;letter-spacing:0;margin-left:3px;color:var(--muted)}progress{width:100%;height:4px;display:block;border:0;border-radius:3px;overflow:hidden;background:var(--track);color:var(--fill);accent-color:var(--fill)}progress::-webkit-progress-bar{background:var(--track);border-radius:3px}progress::-webkit-progress-value{background:var(--fill);border-radius:3px}progress::-moz-progress-bar{background:var(--fill);border-radius:3px}.low{--fill:var(--warn)}.critical{--fill:var(--bad)}.window-reset{font-size:10px;color:var(--muted);margin:8px 0 0}.stale-label{font-size:10px;color:var(--warn);margin:14px 0 0}.activity-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;margin:0 0 20px}.daily-number{font-size:57px;line-height:1.1;letter-spacing:-3px;font-weight:450;font-variant-numeric:tabular-nums;margin:28px 0 9px}.metric-caption{font-size:10px;color:var(--muted);margin:0}.breakdown{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 16px;margin:27px 0 24px}.breakdown-item{display:flex;align-items:baseline;justify-content:space-between;font-size:10px;gap:6px;color:var(--muted)}.breakdown-item strong{font-size:12px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}.reasoning{font-size:9px;color:var(--muted);margin:-8px 0 18px}.card-foot{border-top:1px solid var(--line);padding-top:15px;display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--muted)}.week-heading{display:flex;align-items:baseline;gap:10px;margin:27px 0 0}.week-heading strong{font-size:29px;letter-spacing:-1px;font-weight:500}.chart{height:175px;margin:6px 0 12px}.chart svg{width:100%;height:100%;overflow:visible}.chart rect{fill:#cfd5ca}.chart rect.last{fill:var(--fill)}.chart text{fill:var(--muted);font-size:9px;font-family:inherit}.chart .gridline{stroke:var(--line);stroke-width:1}.ranking-row{padding:13px 0;border-bottom:1px solid var(--line)}.ranking-row:last-child{border-bottom:0}.ranking-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;margin-bottom:9px}.ranking-heading span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking-heading strong{font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}.ranking-row progress{height:3px;--fill:#c7cec2}.fine-print{font-size:10px;line-height:1.9;color:var(--muted);margin:22px 0 0}.empty{color:var(--muted);font-size:12px;padding:24px 0}.quota-grid>.empty{padding:30px;grid-column:1/-1}.install{border-top:1px solid var(--line);margin-top:35px;padding-top:22px;font-size:11px;color:var(--muted);line-height:2}.install summary{cursor:pointer;list-style:none;color:var(--text);display:flex;justify-content:space-between;font-size:12px}.install li{padding:3px 0}.install code{color:var(--text)}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:30px 0 12px;font-size:8px;color:var(--muted);letter-spacing:1px}.footer-separator{margin:0 8px;color:#c5c9bf}.method{font-size:9px;color:var(--muted);line-height:1.9;margin:0}.notice{border:1px solid var(--line);background:var(--soft);font-size:11px;padding:12px 16px;border-radius:9px;margin-bottom:24px;line-height:1.7}.notice[hidden]{display:none}dialog{border:1px solid var(--line);border-radius:18px;padding:30px;background:var(--panel);color:var(--text);width:min(400px,calc(100% - 32px));box-shadow:0 20px 100px #0002}dialog::backdrop{background:#272b2777;backdrop-filter:blur(5px)}dialog h2{font-size:22px;font-weight:550;margin:22px 0 12px}dialog p{font-size:12px;color:var(--muted);line-height:1.8}dialog label{display:block;font-size:11px;margin:22px 0 9px}dialog input{width:100%;padding:12px;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:8px;font-size:13px}dialog button{width:100%;margin-top:13px;padding:12px;border:0;border-radius:8px;background:var(--text);color:var(--panel);font-size:13px}.auth-error{color:var(--bad);min-height:18px;margin-bottom:0}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
-@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#171916;--panel:#1f221e;--text:#ebeee7;--muted:#92998d;--line:#31362e;--track:#30362d;--fill:#b9c8b0;--accent:#a6bb9a;--warn:#d2a061;--bad:#e09c88;--soft:#292e26}:root:not([data-theme="light"]) .chart rect{fill:#525f4b}:root:not([data-theme="light"]) .ranking-row progress{--fill:#66765c}}
+@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#171916;--panel:#1f221e;--text:#ebeee7;--muted:#92998d;--line:#31362e;--track:#30362d;--fill:#8b9384;--accent:#a6bb9a;--warn:#d2a061;--bad:#e09c88;--soft:#292e26}:root:not([data-theme="light"]) .chart rect{fill:#525f4b}:root:not([data-theme="light"]) .ranking-row progress{--fill:#66765c}}
 @media(max-width:700px){.shell{padding:0 22px}.topbar{height:79px}main{padding-top:30px}.page-heading{margin-bottom:30px}h1{font-size:28px}.eyebrow{font-size:8px;letter-spacing:2px}.intro{font-size:11px}.quota-grid{grid-template-columns:1fr;gap:12px;margin-bottom:18px}.quota-card{padding:19px 21px}.provider-heading{margin-bottom:15px}.quota-card .windows{display:grid;grid-template-columns:1fr 1fr;gap:25px}.quota-card .window{margin:0}.quota-card .window-value,.quota-card .primary .window-value{font-size:27px;letter-spacing:-1px}.quota-card .primary .window-value small{font-size:14px}.quota-card .window-heading{flex-wrap:wrap;gap:4px}.quota-card .window-name{order:2;width:100%;font-size:10px}.quota-card .window-reset{font-size:9px}.activity-grid{grid-template-columns:1fr;gap:16px}.panel{border-radius:13px}.today-card,.trend-card,.detail-panel{padding:23px}.daily-number{font-size:51px;margin-top:24px}.breakdown{margin-top:25px}.chart{height:165px}.section-heading{margin-bottom:14px}.section-heading>.muted{font-size:9px}.detail-grid .ranking-row{padding:13px 0}footer{align-items:flex-start;line-height:1.8;flex-direction:column;gap:8px}.connection{font-size:10px}.brand{font-size:25px}.refresh{padding:9px 12px}.refresh>span:last-child{display:none}.method{font-size:8px}.install{margin-top:26px}.week-heading{margin-top:22px}}
-:root[data-theme="dark"]{--bg:#171916;--panel:#1f221e;--text:#ebeee7;--muted:#92998d;--line:#31362e;--track:#30362d;--fill:#b9c8b0;--accent:#a6bb9a;--warn:#d2a061;--bad:#e09c88;--soft:#292e26}:root[data-theme="dark"] .chart rect{fill:#525f4b}:root[data-theme="dark"] .ranking-row progress{--fill:#66765c}
+:root[data-theme="dark"]{--bg:#171916;--panel:#1f221e;--text:#ebeee7;--muted:#92998d;--line:#31362e;--track:#30362d;--fill:#8b9384;--accent:#a6bb9a;--warn:#d2a061;--bad:#e09c88;--soft:#292e26}:root[data-theme="dark"] .chart rect{fill:#525f4b}:root[data-theme="dark"] .ranking-row progress{--fill:#66765c}
 :root[data-theme="dark"] .chart rect.last{fill:var(--fill)}@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .chart rect.last{fill:var(--fill)}}
-
+
 .segmented{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}.segmented button{border:0;background:transparent;color:var(--muted);font-size:11px;padding:6px 12px;letter-spacing:.3px;cursor:pointer}.segmented button+button{border-left:1px solid var(--line)}.segmented button.active{background:var(--soft);color:var(--text);font-weight:550}.window-amount{font-size:10px;color:var(--muted);margin:6px 0 0;font-variant-numeric:tabular-nums}.extras{font-size:9px;color:var(--muted);margin:-8px 0 18px;font-variant-numeric:tabular-nums}.rank-note{margin:16px 0 0;font-size:10px}.ranking-value{display:inline-flex;align-items:baseline;gap:8px}.ranking-cost{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}@media(max-width:700px){.segmented button{padding:5px 9px;font-size:10px}.rank-note{font-size:9px}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "magpie-page-token-widget",
-  "version": "0.2.0",
+  "version": "0.3.3",
   "description": "An iPhone home screen widget for Magpie subscription quotas: install the plugin, scan a code, and the widget shows each subscription's remaining quota.",
   "type": "module",
   "main": "./index.mjs",
@@ -10,13 +10,17 @@
     "mobile",
     "page",
     "scriptable",
+    "scripts",
     "ui",
     "README.md",
+    "README.en.md",
+    "CHANGELOG.md",
     "LICENSE",
     "NOTICE"
   ],
   "scripts": {
-    "test": "node --test test/*.test.mjs"
+    "test": "node scripts/run-tests.mjs",
+    "check:syntax": "node scripts/check-syntax.mjs"
   },
   "engines": {
     "magpie": ">=0.1.3681",

package/scriptable/SetupUsageWidget.js

@@ -7,7 +7,7 @@ let saved = {};
 try { saved = JSON.parse(Keychain.get(SETTINGS_KEY)) || {}; } catch {}
 const alert = new Alert();
 alert.title = "连接你的用量";
-alert.message = "先连接 Tailscale。输入 PC 上生成的服务地址与只读令牌。无需填写模型 API Key。";
+alert.message = "确保 iPhone 能访问你填写的服务地址。该地址可以是 Tailscale 地址，也可以是你自己配好的可信内网地址，或你自己的 HTTPS 域名。输入 PC 上生成的服务地址与只读令牌。无需填写模型 API Key。";
 alert.addTextField("http://你的 Tailscale IP:" + DEFAULT_PORT, typeof saved.baseURL === "string" ? saved.baseURL : "");
 alert.addSecureTextField("只读访问令牌", typeof saved.token === "string" ? saved.token : "");
 alert.addAction("验证并安装"); alert.addCancelAction("取消");
@@ -15,13 +15,67 @@ if (await alert.presentAlert() !== -1) {
   const baseURL = alert.textFieldValue(0).trim().replace(/\/+$/, "");
   const token = alert.textFieldValue(1).trim();
   try {
-    if (!/^https?:\/\/[^/?#\s]+$/i.test(baseURL) || /@/.test(baseURL)) throw new Error("请输入完整服务地址，不含路径或登录信息。");
-    const host = baseURL.replace(/^https?:\/\//i, "").split(":")[0].toLowerCase();
-    const parts = host.split(".").map(Number);
-    const tailnet = parts.length === 4 && parts[0] === 100 && parts[1] >= 64 && parts[1] <= 127 && parts.every(n => Number.isInteger(n) && n >= 0 && n <= 255);
-    if (/^http:/i.test(baseURL) && !tailnet && host !== "localhost" && host !== "127.0.0.1" && !/\.ts\.net$/.test(host)) {
-      throw new Error("HTTP 地址必须是 Tailscale 地址或本机回环地址。");
-    }
+    // The same rules as the service itself (lib/network.mjs): HTTPS may be
+    // any name, plain HTTP only a name or an address of a network that is
+    // trusted. The service refuses the same addresses, so the phone and the
+    // service never disagree about what may be used.
+    const PLAIN_TEXT_REFUSAL = "公网的明文 HTTP 地址不接受：令牌会在路上被看见。请用 HTTPS，或者换成内网地址（Tailscale、RFC1918、ULA）。";
+    const isTrustedHost = (name) => {
+      if (/^\d{1,3}(\.\d{1,3}){3}$/.test(name)) {
+        const p = name.split(".").map(Number);
+        if (p.some(o => !Number.isInteger(o) || o < 0 || o > 255)) return false;
+        if (p[0] === 127) return true;
+        if (p[0] === 10 || (p[0] === 192 && p[1] === 168) || (p[0] === 172 && p[1] >= 16 && p[1] <= 31)) return true;
+        if (p[0] === 100 && p[1] >= 64 && p[1] <= 127) return true;
+        if (p[0] === 169 && p[1] === 254) return true;
+        return false;
+      }
+      if (name.includes(":")) {
+        if (name === "::1") return true;
+        if (/^f[cd][0-9a-f]{2}:/.test(name)) return true;
+        if (/^fe[89ab][0-9a-f]:/.test(name)) return true;
+        return false;
+      }
+      const bare = name.replace(/\.$/, "");
+      if (!bare.includes(".")) return true;
+      return [".localhost", ".local", ".lan", ".home.arpa", ".internal", ".ts.net"].some(s => bare.endsWith(s));
+    };
+    const checkServiceAddress = (value) => {
+      const text = String(value || "").trim();
+      if (!text) return { ok: true, empty: true };
+      if (text.includes("?") || text.includes("#")) return { ok: false, error: "地址里不能带问号后面的参数。" };
+      const match = /^(https?):\/\/([^/]+)(\/.*)?$/i.exec(text);
+      if (!match) return { ok: false, error: "请输入完整的服务地址，例如 https://example.com 或 http://192.168.1.50:8791。" };
+      const scheme = match[1].toLowerCase();
+      const authority = match[2];
+      if (authority.includes("@")) return { ok: false, error: "地址里不能带用户名或密码。" };
+      const path = match[3] || "";
+      if (path && path !== "/") return { ok: false, error: "这个版本不支持带路径的地址。反向代理请用一个独立域名，把它的根路径转到插件服务。" };
+      let host = authority, portText = "";
+      if (authority.startsWith("[")) {
+        const end = authority.indexOf("]");
+        if (end < 0) return { ok: false, error: "IPv6 的地址要写成 [::1] 这样的方括号。" };
+        host = authority.slice(1, end);
+        const tail = authority.slice(end + 1);
+        if (tail && !tail.startsWith(":")) return { ok: false, error: "端口不对。" };
+        portText = tail.slice(1);
+      } else {
+        const colon = authority.lastIndexOf(":");
+        if (colon >= 0) { host = authority.slice(0, colon); portText = authority.slice(colon + 1); }
+      }
+      if (!host) return { ok: false, error: "地址里没有主机名。" };
+      if (portText) {
+        if (!/^\d+$/.test(portText)) return { ok: false, error: "端口不对。" };
+        const port = Number(portText);
+        if (port < 1 || port > 65535) return { ok: false, error: "端口不对。" };
+      }
+      const name = host.toLowerCase();
+      if (scheme === "http" && !isTrustedHost(name)) return { ok: false, error: PLAIN_TEXT_REFUSAL };
+      return { ok: true, secure: scheme === "https" };
+    };
+    const checked = checkServiceAddress(baseURL);
+    if (!checked.ok) throw new Error(checked.error);
+    if (checked.empty) throw new Error("请填写服务地址。");
     if (token.length < 32) throw new Error("令牌不完整，请复制 PC 上生成的完整只读令牌。");
     const probe = new Request(baseURL + "/api/v1/overview");
     probe.headers = { Authorization: "Bearer " + token }; probe.timeoutInterval = 12;
@@ -51,7 +105,7 @@ if (await alert.presentAlert() !== -1) {
   } catch (error) {
     const failed = new Alert();
     failed.title = "连接未完成";
-    failed.message = String(error.message || "请检查 PC 服务和 Tailscale，再重试。");
+    failed.message = String(error.message || "请检查 PC 服务，以及 iPhone 能不能访问你填的那个地址，再重试。");
     failed.addAction("知道了"); await failed.presentAlert();
   }
 }

package/scriptable/UsageWidget.js

@@ -58,7 +58,10 @@ const colors = {
   text: Color.dynamic(new Color("#232523"), new Color("#ebeee7")),
   muted: Color.dynamic(new Color("#8a8f85"), new Color("#92998d")),
   track: dark ? new Color("#30362d") : new Color("#eef0eb"),
-  fill: dark ? new Color("#b9c8b0") : new Color("#4c544a"),
+  // Ink in both appearances. A bright bar in the night mode was read as a
+  // warning, and a warning that really means "plenty left" turns the reading
+  // of the whole card upside down.
+  fill: dark ? new Color("#8b9384") : new Color("#6b7268"),
   warning: new Color(dark ? "#d2a061" : "#b77c36"),
   critical: new Color(dark ? "#e09c88" : "#b35447")
 };
@@ -139,6 +142,15 @@ function shortenName(label, size, width) {
   while (keep > 1 && nameWidth(label.slice(0, keep) + "…") * size * minimumScale > width) keep--;
   return label.slice(0, keep) + "…";
 }
+// The word in front of every number. Without it the bar and the number can
+// be read the wrong way round, and the night mode makes that worse.
+function direction() { return showUsed ? "已用" : "剩余"; }
+// The name of a card is the name of the vendor and, when it has one, the
+// account of it.
+function splitLabel(label) {
+  const parts = String(label).split("·").map(part => part.trim()).filter(Boolean);
+  return { vendor: parts[0] || String(label), account: parts.slice(1).join(" · ") };
+}
 function expired(window) {
   return window.expired || !!window.resetsAt && Date.parse(window.resetsAt) <= Date.now();
 }
@@ -203,7 +215,7 @@ function bar(parent, window, width) {
 function header(status) {
   const row = widget.addStack(); row.centerAlignContent();
   if (family !== "small") row.size = new Size(layout.width, layout.header);
-  text(row, "usage.", 15, colors.text, "medium"); row.addSpacer();
+  text(row, "usage.", 12, colors.muted, "medium"); row.addSpacer();
   text(row, status, 9, cached ? colors.warning : colors.muted);
 }
 // The parameter is read once: a subscription to show, a page and a direction.
@@ -225,17 +237,22 @@ function subscriptionGrid(parent, cards, sharedWindow) {
   const tight = large ? dimensions.height < 345 : dimensions.height < 155;
   // A cell that has several accounts of one vendor carries a longer name, so a
   // narrow cell takes a smaller title font to keep the account readable.
+  // The account of a card needs a line of its own; the weekly limit needs
+  // one too. Where there is no room for them, they are left out.
   const style = large
     ? dense
-      ? { name: tight ? 10 : 11, value: tight ? 20 : 24, reset: 8, secondary: 8, titleGap: 2, barGap: 3, resetGap: 3, rowGap: 8 }
-      : { name: 12, value: 34, reset: 10, secondary: 10, titleGap: 4, barGap: 6, resetGap: 5, rowGap: 16 }
+      ? { name: tight ? 11 : 12, value: tight ? 20 : 24, reset: 8, secondary: 8, account: 9, titleGap: 2, barGap: 3, resetGap: 3, rowGap: 8 }
+      : { name: 13, value: 34, reset: 10, secondary: 10, account: 9, titleGap: 4, barGap: 6, resetGap: 5, rowGap: 16 }
     : dense
-      ? { name: tight ? 9 : 10, value: tight ? 18 : 20, titleGap: 1, barGap: 1, rowGap: tight ? 4 : 6 }
-      : { name: cellWidth < 67 ? 9 : 11, value: cellWidth < 67 ? 24 : 28, reset: cellWidth < 64 ? 9 : 10, titleGap: 4, barGap: 6, resetGap: 6, rowGap: 0 };
+      ? { name: tight ? 10 : 11, value: tight ? 18 : 20, titleGap: 1, barGap: 1, resetGap: 3, rowGap: tight ? 4 : 6, account: 0, secondary: 0, reset: 9 }
+      : { name: 12, value: cellWidth < 67 ? 22 : 25, reset: cellWidth < 64 ? 9 : 10, titleGap: 3, barGap: 5, resetGap: 5, rowGap: 0, account: 9, secondary: 9 };
   const grid = parent.addStack(); grid.layoutVertically(); grid.size = new Size(layout.width, 0);
   // Every name of the page takes the size that fits the narrowest of them, so
   // the cards keep one title size.
-  const names = cards.map(card => fitName(card.label, style.name, cellWidth));
+  // The dense large family has no line of its own for the account, so it
+  // goes with the name of the vendor.
+  const titleText = card => large && dense ? card.label : splitLabel(card.label).vendor;
+  const names = cards.map(card => fitName(titleText(card), style.name, cellWidth));
   const nameSize = names.length ? Math.min(...names.map(name => name.size)) : style.name;
   for (let start = 0; start < cards.length; start += columns) {
     if (start) grid.addSpacer(style.rowGap);
@@ -246,25 +263,54 @@ function subscriptionGrid(parent, cards, sharedWindow) {
       const card = cards[start + index];
       if (!card) continue; // Keep the final card aligned with the previous rows.
       const primary = card.windows[0] || emptyWindow;
-      text(column, shortenName(card.label, nameSize, cellWidth), nameSize, colors.muted, "medium");
+      // The name of the vendor is the name of the card; the account of it goes
+      // under it when there is a line for it.
+      const parts = splitLabel(card.label);
+      const inline = large && dense && parts.account;
+      const accountSize = Math.max(7, Math.min(9, nameSize - 3));
+      const vendor = inline ? parts.vendor + " · " + parts.account : parts.vendor;
+      text(column, shortenName(vendor, inline ? accountSize : nameSize, cellWidth), inline ? accountSize : nameSize, colors.text, "medium");
+      if (parts.account && style.account && !inline) {
+        column.addSpacer(1);
+        text(column, shortenName(parts.account, accountSize, cellWidth), accountSize, colors.muted);
+      }
       column.addSpacer(style.titleGap);
       const valueRow = column.addStack(); valueRow.centerAlignContent();
+      // A narrow cell has no room for the whole word, and the footer of the
+      // widget says which way the numbers are read.
+      const word = large || cellWidth >= 78 ? direction() : (showUsed ? "用" : "剩");
+      text(valueRow, word, large ? 12 : 9, colors.muted);
+      valueRow.addSpacer(2);
       text(valueRow, percent(primary), style.value, accent(primary), "medium");
       if (!large && dense && !sharedWindow) {
         valueRow.addSpacer(); text(valueRow, windowLabel(primary), 8, colors.muted);
       }
       column.addSpacer(style.barGap);
       bar(column, primary, cellWidth);
-      if (large || !dense) {
+      const secondary = card.windows[1];
+      if (large) {
+        if (!dense) {
+          column.addSpacer(style.resetGap);
+          const label = (sharedWindow ? "" : windowLabel(primary) + " · ") + shortReset(primary);
+          const size = sharedWindow ? style.reset : Math.min(style.reset, cellWidth < 64 ? 8 : 9);
+          text(column, label, size, colors.muted);
+        }
+        // The second window is the weekly limit. The large family has a line
+        // of its own for it.
+        if (secondary) {
+          column.addSpacer(dense ? 2 : 3);
+          text(column, windowLabel(secondary) + (showUsed ? " 已用 " : " 剩余 ") + percent(secondary), style.secondary, accent(secondary));
+        }
+      } else if (!dense) {
+        // The medium family has one line for the reset and for the weekly
+        // limit; two lines do not fit above the bar of a cell.
         column.addSpacer(style.resetGap);
-        const label = (sharedWindow ? "" : windowLabel(primary) + " · ") + shortReset(primary);
-        const size = sharedWindow ? style.reset : Math.min(style.reset, cellWidth < 64 ? 8 : 9);
-        text(column, label, size, colors.muted);
-      }
-      if (large && card.windows[1]) {
-        const secondary = card.windows[1];
-        column.addSpacer(dense ? 2 : 4);
-        text(column, windowLabel(secondary) + (showUsed ? " 已用 " : " 剩余 ") + percent(secondary), style.secondary, accent(secondary));
+        const parts = [];
+        if (!sharedWindow) parts.push(windowLabel(primary) + " · ");
+        parts.push(shortReset(primary));
+        if (secondary && style.secondary) parts.push(" · " + windowLabel(secondary) + " " + percent(secondary));
+        const size = Math.min(style.reset, cellWidth < 64 ? 8 : 9);
+        text(column, shortenName(parts.join(""), size, cellWidth), size, colors.muted);
       }
     }
   }
@@ -288,15 +334,32 @@ if (!settings || !data || data.schemaVersion !== 1) {
     // it is written: two accounts of one vendor may differ in their case only.
     const exact = data.subscriptions.find(c => c.id === requested);
     const same = data.subscriptions.filter(c => String(c.id).toLowerCase() === requested.toLowerCase());
-    const card = exact || (same.length === 1 ? same[0] : null)
-      || data.subscriptions.find(c => c.provider === requested.toLowerCase());
+    // A vendor is matched before an account: an account of another vendor
+    // may carry the name of this one.
+    const byProvider = data.subscriptions.find(c => c.provider === requested.toLowerCase());
+    const byAccount = data.subscriptions.find(c => String(c.account || "").toLowerCase() === requested.toLowerCase());
+    const found = exact || (same.length === 1 ? same[0] : null) || byProvider || byAccount;
+    // The account of a card can be renamed; an old parameter then finds
+    // nothing. The first card is shown instead, and the note says so.
+    const card = found || data.subscriptions[0];
+    const missing = !found && Boolean(card);
     widget.addSpacer(12);
     const primary = card && card.windows[0] || emptyWindow;
     const name = widget.addStack();
     const title = fitName(card ? card.label : "暂无该套餐", 12, layout.width - 60);
-    text(name, title.label, title.size, colors.muted, "medium");
-    name.addSpacer(4); text(name, windowLabel(primary), 9, colors.muted);
-    widget.addSpacer(3); text(widget, percent(primary), 34, accent(primary), "medium");
+    text(name, title.label, title.size, colors.text, "medium");
+    name.addSpacer(4);
+    if (missing) {
+      // The note is shortened to the room that is left, so the name of the
+      // card and the note never fight for the same line.
+      text(name, shortenName("没有找到 " + requested, 8, Math.max(60, layout.width * 0.42)), 8, colors.warning);
+    }
+    else text(name, windowLabel(primary), 9, colors.muted);
+    widget.addSpacer(3);
+    const value = widget.addStack(); value.centerAlignContent();
+    text(value, direction(), 13, colors.muted);
+    value.addSpacer(4);
+    text(value, percent(primary), 34, accent(primary), "medium");
     widget.addSpacer(7); bar(widget, primary, 120); widget.addSpacer(7);
     text(widget, reset(primary), 9, colors.muted);
     if (card && card.windows[1]) {

package/scripts/check-syntax.mjs

@@ -0,0 +1,43 @@
+// Checks that every source file of the plugin parses.
+// The browser and Scriptable files are ES modules (they use import or a top level await),
+// so each one is checked through a copy with the .mjs extension: node --check then reads
+// them as modules, on every platform the same way.
+import { copyFileSync, mkdtempSync, readdirSync, statSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { spawnSync } from 'node:child_process';
+
+const roots = ['index.mjs', 'lib', 'test', 'ui', 'mobile', 'page', 'scriptable', 'scripts'];
+const files = [];
+
+const walk = (target) => {
+  const state = statSync(target);
+  if (state.isDirectory()) {
+    for (const entry of readdirSync(target)) walk(path.join(target, entry));
+    return;
+  }
+  if (target.endsWith('.mjs') || target.endsWith('.js')) files.push(target);
+};
+
+for (const root of roots) walk(root);
+
+const scratch = mkdtempSync(path.join(tmpdir(), 'magpie-syntax-'));
+let broken = 0;
+
+files.forEach((file, index) => {
+  const copy = path.join(scratch, `file-${index}.mjs`);
+  copyFileSync(file, copy);
+  const result = spawnSync(process.execPath, ['--check', copy], { encoding: 'utf8' });
+  if (result.status !== 0) {
+    broken += 1;
+    console.error(`syntax error in ${file}`);
+    console.error(result.stderr || result.stdout);
+  }
+});
+
+if (broken > 0) {
+  console.error(`${broken} file(s) did not parse`);
+  process.exit(1);
+}
+
+console.log(`${files.length} files parsed`);

package/scripts/run-tests.mjs

@@ -0,0 +1,28 @@
+// The tests are run by a small script of our own, so that the same command
+// works the same way on every platform and on every version of Node.
+//
+// The shell of Windows does not expand the names of the files, and Node 20
+// does not expand them either, so "node --test test/*.test.mjs" works on a
+// Linux machine and fails on a Windows one. Here the names are read and
+// handed over one by one, which every version understands.
+import { readdir } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { spawn } from 'node:child_process';
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const folder = path.join(root, 'test');
+
+const names = (await readdir(folder)).filter((name) => name.endsWith('.test.mjs')).sort();
+if (!names.length) {
+  console.error('There is no test file in ' + folder);
+  process.exit(1);
+}
+
+const child = spawn(process.execPath, ['--test', ...names.map((name) => path.join('test', name))], {
+  cwd: root,
+  stdio: 'inherit',
+});
+child.on('exit', (code, signal) => {
+  process.exit(signal ? 1 : (code ?? 1));
+});