magpie-page-token-widget 0.1.0 → 0.1.1

package/README.md

@@ -14,6 +14,7 @@
 - 组件里显示每家订阅的剩余额度、5 小时与周额度窗口的百分比、重置倒计时、今日 Token、七日趋势和各家排行。参数可以选订阅（`codex`、`minimax`、`glm`，或 `codex@账号名`），也可以把百分比换成已用（`|used`）。
 - 插件页还能改中号和大号组件里显示哪些订阅，能看到 Tailscale 的状态和同一尾网里的 iPhone。
   - 勾一个厂商＝这个厂商的所有账号都显示；只勾一个账号＝只有这个账号。勾选框显示的就是手机上会出现的卡片。
+- 点一下手机上的组件，Safari 会打开手机版用量页：每家订阅的剩余额度、今日与近七日的 Token、模型／厂商／客户端排行，和电脑上看到的是同一份数据。
 - 服务只读 Magpie 的本地接口，只在本机打开，手机经 Tailscale 的端口转发进来，令牌存放在 Magpie 自己的目录里。
 
 ## 需要什么
@@ -48,6 +49,12 @@ magpie plugin add ./magpie-page-token-widget
 
 不想扫码也行：插件页上有「只读令牌」，把它和「服务地址」填进 `scriptable/SetupUsageWidget.js`（在 Scriptable 里新建一个脚本粘贴运行）也行。
 
+## 手机上的用量页
+
+点一下桌面上的组件，Safari 会打开手机版的用量页：每家订阅的剩余额度、今日与近七日的 Token、模型／厂商／客户端排行，和电脑上看到的是同一份数据。
+
+页面用组件里的那个只读令牌打开，令牌只走地址栏的 `#token=` 一段，页面打开后立刻把它抹掉，之后由 Scriptable 自己记着。手机版页面只在尾网这一侧提供，电脑上的控制台仍然只在本机。
+
 ## 组件参数
 
 | 尺寸 | 内容 | Widget Parameter |
@@ -128,6 +135,12 @@ From a checkout: `magpie plugin add ./magpie-page-token-widget`.
 
 The pairing code works once. The script carries only that one-time code; on its first run it exchanges the code for a token of its own and keeps it in the keychain of Scriptable.
 
+## The page on the phone
+
+Tapping the widget opens the usage page on the phone: the remaining quota of every subscription, today's tokens, the last seven days and the rankings by model, vendor and client, the same numbers the computer shows.
+
+The page opens with the read-only token of the widget. The token travels in the `#token=` part of the address and is wiped from there as soon as the page is open; Scriptable keeps it from then on. The page is served on the tailnet side only, the console of the computer stays on this computer.
+
 ## Widget parameter
 
 | Size | Shows | Widget Parameter |

package/lib/server.mjs

@@ -300,6 +300,26 @@ export async function startServer({ root, dataDir, magpieDir, options = {} }) {
     response.end(body);
   };
 
+  // The page of the phone. It carries no token: the phone brings its own in
+  // the address, and the page drops it as soon as it has read it.
+  const phoneCsp =
+    "default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'self'; base-uri 'none'; form-action 'none'";
+
+  const serveMobile = async (response, name, type) => {
+    try {
+      const body = await readFile(path.join(root, 'mobile', name), 'utf8');
+      response.writeHead(200, {
+        'Content-Type': type,
+        'Content-Security-Policy': phoneCsp,
+        'Cache-Control': 'no-store',
+        'X-Content-Type-Options': 'nosniff',
+      });
+      response.end(body);
+    } catch {
+      text(response, 404, 'Not found');
+    }
+  };
+
   const serveUi = async (response, name, type, port) => {
     try {
       const body = await readFile(path.join(root, 'ui', name), 'utf8');
@@ -441,6 +461,18 @@ export async function startServer({ root, dataDir, magpieDir, options = {} }) {
     }
 
     if (!consoleScope) {
+      // The phone opens the page of the phone here. It carries no token: the
+      // phone brings its own in the address and drops it as soon as it has
+      // read it.
+      if ((pathname === '/' || pathname === '/index.html') && method === 'GET') {
+        return serveMobile(response, 'index.html', 'text/html; charset=utf-8');
+      }
+      if (pathname === '/app.js' && method === 'GET') {
+        return serveMobile(response, 'app.js', 'text/javascript; charset=utf-8');
+      }
+      if (pathname === '/style.css' && method === 'GET') {
+        return serveMobile(response, 'style.css', 'text/css; charset=utf-8');
+      }
       return json(response, 403, { error: 'This page is only opened on the computer of the service.' });
     }
     if (!consoleOpen) {

package/mobile/app.js

@@ -0,0 +1,242 @@
+const $ = id => document.getElementById(id);
+const savedTheme = sessionStorage.getItem('usage-theme');
+if (savedTheme) document.documentElement.dataset.theme = savedTheme;
+$('theme').addEventListener('click', () => {
+  const dark = document.documentElement.dataset.theme === 'dark' || !document.documentElement.dataset.theme && matchMedia('(prefers-color-scheme: dark)').matches;
+  const theme = dark ? 'light' : 'dark';
+  document.documentElement.dataset.theme = theme;
+  sessionStorage.setItem('usage-theme', theme);
+});
+const compact = value => value == null ? '—' : new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 2 }).format(value);
+const exact = value => new Intl.NumberFormat('en').format(value);
+const money = value => value == null ? '—' : value >= 100 ? value.toFixed(0) : value.toFixed(2);
+const time = value => value ? new Intl.DateTimeFormat('zh-CN', { timeZone: 'Asia/Shanghai', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false }).format(new Date(value)) : '未知';
+const node = (tag, className, text) => {
+  const element = document.createElement(tag);
+  if (className) element.className = className;
+  if (text != null) element.textContent = text;
+  return element;
+};
+let token = new URLSearchParams(location.hash.slice(1)).get('token');
+history.replaceState(null, '', location.pathname);
+if (token) sessionStorage.setItem('usage-token', token);
+token ||= sessionStorage.getItem('usage-token');
+let last;
+try { last = JSON.parse(sessionStorage.getItem('usage-overview')); } catch { /* No cached response. */ }
+// Percent direction and ranking tab are per-device viewing choices,
+// not changes to what the service projects.
+let quotaMode = sessionStorage.getItem('usage-quota-mode') === 'used' ? 'used' : 'remaining';
+const RANKING_TABS = ['models', 'providers', 'agents', 'computers'];
+let rankTab = RANKING_TABS.includes(sessionStorage.getItem('usage-ranking')) ? sessionStorage.getItem('usage-ranking') : 'models';
+function syncQuotaToggle() {
+  for (const mode of ['remaining', 'used']) {
+    const button = $('mode-' + mode);
+    button.classList.toggle('active', quotaMode === mode);
+    button.setAttribute('aria-pressed', String(quotaMode === mode));
+  }
+}
+function syncRankTabs() {
+  for (const id of RANKING_TABS) {
+    const button = $('tab-' + id);
+    button.classList.toggle('active', rankTab === id);
+    button.setAttribute('aria-pressed', String(rankTab === id));
+  }
+}
+for (const mode of ['remaining', 'used']) $('mode-' + mode).addEventListener('click', () => {
+  quotaMode = mode;
+  sessionStorage.setItem('usage-quota-mode', mode);
+  syncQuotaToggle();
+  if (last) renderQuotas(last.subscriptions);
+});
+for (const id of RANKING_TABS) $('tab-' + id).addEventListener('click', () => {
+  rankTab = id;
+  sessionStorage.setItem('usage-ranking', id);
+  syncRankTabs();
+  if (last) renderRankings(last);
+});
+syncQuotaToggle();
+syncRankTabs();
+function resetLabel(window) {
+  if (window.expired) return '窗口已到期· 等待更新';
+  if (!window.resetsAt) return '重置时间未提供';
+  const minutes = Math.ceil((Date.parse(window.resetsAt) - Date.now()) / 60000);
+  if (minutes <= 0) return '窗口已到期· 等待更新';
+  const duration = minutes < 60 ? minutes + ' 分钟' : minutes < 1440 ? Math.floor(minutes / 60) + ' 小时 ' + minutes % 60 + ' 分钟' : Math.floor(minutes / 1440) + ' 天 ' + Math.floor(minutes % 1440 / 60) + ' 小时';
+  return duration + '后重置';
+}
+function windowName(name) {
+  const suffix = quotaMode === 'used' ? '已用' : '剩余';
+  return /5\s*h|5\s*hour/i.test(name) ? '5 小时' + suffix : /7\s*d|7\s*day|week/i.test(name) ? '本周' + suffix : name + suffix;
+}
+function progress(value, className, label) {
+  const bar = node('progress', className);
+  bar.max = 100;
+  bar.value = value || 0;
+  bar.setAttribute('aria-label', (label || '剩余') + ' ' + (value == null ? '未知' : Math.round(value) + '%'));
+  return bar;
+}
+function quotaValue(window) {
+  return window.expired ? null : quotaMode === 'used' ? window.usedPercent : window.remainingPercent;
+}
+function quotaState(value) {
+  if (value == null) return '';
+  const consumed = quotaMode === 'used' ? value : 100 - value;
+  return consumed >= 90 ? 'critical' : consumed >= 75 ? 'low' : '';
+}
+function renderQuotas(cards) {
+  const parent = $('quotas'); parent.replaceChildren();
+  if (!cards.length) { parent.append(node('div', 'empty panel', '尚未读取到有效套餐。请确认 Magpie 已登录订阅并更新额度。')); return; }
+  for (const card of cards) {
+    const article = node('article', 'panel quota-card');
+    const heading = node('div', 'provider-heading');
+    heading.append(node('span', 'provider-monogram', card.label[0]), node('span', 'provider-name', card.label), node('span', 'tag', card.plan));
+    article.append(heading);
+    const windows = node('div', 'windows');
+    card.windows.forEach((window, i) => {
+      const value = quotaValue(window);
+      const state = quotaState(value);
+      const block = node('div', 'window ' + (i ? '' : 'primary ') + state);
+      const row = node('div', 'window-heading');
+      const valueNode = node('span', 'window-value', value == null ? '—' : String(Math.round(value)));
+      if (value != null) valueNode.append(node('small', '', '%'));
+      row.append(node('span', 'window-name', windowName(window.label)), valueNode);
+      block.append(row, progress(value, state, quotaMode === 'used' ? '已用' : '剩余'), node('p', 'window-reset', resetLabel(window)));
+      if (window.amount != null && window.limit != null) {
+        block.append(node('p', 'window-amount', '读数 ' + compact(window.amount) + ' / ' + compact(window.limit)));
+      }
+      windows.append(block);
+    });
+    article.append(windows);
+    if (!card.windows.length) article.append(node('p', 'fine-print', '此套餐未提供额度窗口'));
+    if (card.usage && card.usage.today) {
+      const today = card.usage.today;
+      const line = '今日 ' + compact(today.totalTokens) + ' Token';
+      const detail = Number.isFinite(today.requests) ? ' · ' + today.requests + ' 次请求' : '';
+      article.append(node('p', 'fine-print', line + detail + (card.usageStale ? ' · 缓存读数' : '')));
+    } else {
+      // The usage of this subscription is unknown; the total of all is never
+      // shown in its place.
+      article.append(node('p', 'fine-print', '今日用量未知'));
+    }
+    if (card.stale) article.append(node('p', 'stale-label', '缓存额度· ' + (card.updatedAt ? time(card.updatedAt) : '读取时间未知')));
+    article.title = '额度读数：' + time(card.updatedAt);
+    parent.append(article);
+  }
+}
+const RANKING_NOTES = {
+  models: '同名模型已合并，含不同厂商前缀与大小写',
+  providers: '按上游稳定 id 解析厂商',
+  agents: 'Magpie 识别的调用客户端',
+  computers: '发起请求的设备，沿用 Magpie 的合并结果',
+};
+function renderRanking(rows, total) {
+  const parent = $('rank-body'); parent.replaceChildren();
+  if (!rows.length) { parent.append(node('p', 'empty', '此周期暂无记录')); return; }
+  for (const item of rows) {
+    const row = node('div', 'ranking-row'), heading = node('div', 'ranking-heading');
+    const value = node('span', 'ranking-value');
+    value.append(node('strong', '', compact(item.totalTokens)));
+    if (item.cost > 0) value.append(node('span', 'ranking-cost', money(item.cost)));
+    heading.append(node('span', '', item.label), value);
+    const bar = progress(total ? item.totalTokens / total * 100 : 0);
+    bar.setAttribute('aria-label', item.label + '：' + exact(item.totalTokens) + ' Token' + (item.cost > 0 ? '· 预估费用 ' + money(item.cost) : ''));
+    row.append(heading, bar); parent.append(row);
+  }
+}
+function renderRankings(data) {
+  renderRanking(data.rankings[rankTab] || [], data.usage.week?.totalTokens);
+  $('rank-note').textContent = RANKING_NOTES[rankTab] || '';
+}
+const NS = 'http://www.w3.org/2000/svg';
+function svgNode(tag, attrs, text) {
+  const element = document.createElementNS(NS, tag);
+  for (const [key, value] of Object.entries(attrs)) element.setAttribute(key, value);
+  if (text != null) element.textContent = text;
+  return element;
+}
+function renderChart(rows) {
+  const parent = $('chart'); parent.replaceChildren();
+  if (!rows.length) { parent.append(node('p', 'empty', '暂无趋势数据')); return; }
+  const svg = svgNode('svg', { viewBox: '0 0 420 175', role: 'img', 'aria-label': '近七日 Token 用量' });
+  const max = Math.max(1, ...rows.map(row => row.totalTokens));
+  for (const y of [35, 80, 125]) svg.append(svgNode('line', { x1: 0, x2: 420, y1: y, y2: y, class: 'gridline' }));
+  rows.forEach((row, i) => {
+    const x = 420 / rows.length * (i + .5), height = row.totalTokens / max * 100;
+    const rect = svgNode('rect', { x: x - 12, y: 139 - height, width: 24, height: Math.max(2, height), rx: 3, class: i === rows.length - 1 ? 'last' : '' });
+    rect.append(svgNode('title', {}, row.label + '：' + exact(row.totalTokens) + ' Token'));
+    const date = row.at ? new Intl.DateTimeFormat('zh-CN', { timeZone: 'Asia/Shanghai', month: 'numeric', day: 'numeric' }).format(new Date(row.at)) : row.label;
+    svg.append(rect, svgNode('text', { x, y: 159, 'text-anchor': 'middle' }, date));
+  });
+  parent.append(svg);
+}
+function speedText(metrics) {
+  const parts = [];
+  if (metrics?.outputTokensPerSecond != null) parts.push('输出 约' + metrics.outputTokensPerSecond + ' tok/s');
+  if (metrics?.ttftMs != null) parts.push('首字 约' + (metrics.ttftMs >= 1000 ? (metrics.ttftMs / 1000).toFixed(1) + ' 秒' : metrics.ttftMs + ' 毫秒'));
+  return parts.join('· ');
+}
+function render(data, offline = false) {
+  const stale = offline || Object.values(data.sources).some(source => source.state !== 'ok');
+  $('connection').textContent = offline ? '离线· 显示缓存' : stale ? '部分数据待更新' : '已连接· Tailscale';
+  $('status-dot').className = 'status-dot ' + (stale ? 'warn' : 'ok');
+  const notices = [];
+  if (data.demo) notices.push('演示模式· 所有数字、模型和设备用量均为虚构数据。');
+  if (stale) notices.push('当前显示最后成功的统计，请查看下方更新时间；未获取到的数据以 — 表示。');
+  $('notice').hidden = !notices.length; $('notice').textContent = notices.join(' ');
+  renderQuotas(data.subscriptions);
+  const day = value => new Date(value + 8 * 3600000).toISOString().slice(0, 10);
+  const oldDay = data.sources.today.outdated || data.sources.today.observedAt && day(Date.parse(data.sources.today.observedAt)) !== day(Date.now());
+  const today = oldDay ? null : data.usage.today, week = data.usage.week;
+  $('today-total').textContent = compact(today?.totalTokens);
+  $('today-total').title = today ? exact(today.totalTokens) + ' Token' : '';
+  $('today-caption').textContent = today ? exact(today.totalTokens) + ' Token·上海时间今日累计' : '尚未读取到今日用量';
+  const breakdown = $('breakdown'); breakdown.replaceChildren();
+  for (const [text, field] of [['输入', 'inputTokens'], ['输出', 'outputTokens'], ['缓存读取', 'cacheReadTokens'], ['缓存写入', 'cacheWriteTokens']]) {
+    const item = node('div', 'breakdown-item');
+    item.append(node('span', '', text), node('strong', '', compact(today?.[field]))); breakdown.append(item);
+  }
+  $('reasoning').textContent = '推理 ' + (today ? compact(today.reasoningTokens) : '—') + ' Token· 已包含在输出中';
+  const extras = [speedText(today), today && today.cost != null ? '预估费用 ' + money(today.cost) : ''].filter(Boolean).join('· ');
+  $('today-extras').textContent = extras;
+  $('today-extras').title = today && today.unpriced > 0 ? '有 ' + today.unpriced + ' 条未计价请求，费用估算可能偏低' : '';
+  $('requests').textContent = (today ? exact(today.requests) : '—') + ' 次请求' + (today && today.errors > 0 ? '·失败 ' + today.errors : '');
+  $('cache-hit').textContent = (today?.cacheHitPercent == null ? '—' : today.cacheHitPercent.toFixed(1) + '%') + ' 缓存命中';
+  $('week-total').textContent = compact(week?.totalTokens);
+  $('week-requests').textContent = (week ? exact(week.requests) : '—') + ' 次请求' + (week && week.cost != null ? '· 预估费用 ' + money(week.cost) : '');
+  $('week-requests').title = week && week.unpriced > 0 ? '有 ' + week.unpriced + ' 条未计价请求，费用估算可能偏低' : '';
+  renderChart(data.trend);
+  renderRankings(data);
+  const observations = Object.values(data.sources).map(source => source.observedAt).filter(Boolean).sort();
+  $('updated').textContent = '汇总更新于 ' + time(observations[0]);
+}
+function auth(message = '') {
+  $('auth-error').textContent = message;
+  if (!$('auth').open) $('auth').showModal();
+}
+async function load() {
+  if (!token) { auth(); return; }
+  $('refresh').disabled = true;
+  try {
+    const response = await fetch('/api/v1/overview', { headers: { Authorization: 'Bearer ' + token }, cache: 'no-store', signal: AbortSignal.timeout(10000) });
+    if (response.status === 401) {
+      token = null; sessionStorage.removeItem('usage-token'); auth('令牌无效，请重新输入。'); return;
+    }
+    if (!response.ok) throw new Error('Unavailable');
+    const data = await response.json();
+    if (data.schemaVersion !== 1) throw new Error('Unsupported response');
+    last = data; sessionStorage.setItem('usage-overview', JSON.stringify(data));
+    $('auth').close(); render(data);
+  } catch {
+    if (last) render(last, true);
+    else { $('connection').textContent = '连接失败'; $('notice').hidden = false; $('notice').textContent = '无法连接服务。请检查 PC 服务和 iPhone 的 Tailscale 连接。'; }
+  } finally { $('refresh').disabled = false; }
+}
+$('auth-form').addEventListener('submit', event => {
+  event.preventDefault(); token = $('token').value.trim(); sessionStorage.setItem('usage-token', token); void load();
+});
+$('auth').addEventListener('cancel', event => event.preventDefault());
+$('refresh').addEventListener('click', () => void load());
+document.addEventListener('visibilitychange', () => { if (!document.hidden) void load(); });
+if (last) render(last, true);
+void load();
+setInterval(() => { if (!document.hidden && token) void load(); }, 60000);

package/mobile/index.html

@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="color-scheme" content="light dark">
+  <meta name="theme-color" content="#f7f7f5">
+  <title>Usage · 用量总览</title>
+  <link rel="stylesheet" href="/style.css">
+  <script src="/app.js" defer></script>
+</head>
+<body>
+  <div class="shell">
+    <header class="topbar">
+      <a class="brand" href="/" aria-label="Usage 首页"><span class="brand-mark">◒</span> usage<span class="brand-dot">.</span></a>
+      <div class="top-actions"><span class="connection"><span class="status-dot" id="status-dot"></span><span id="connection">正在连接</span></span><button class="theme-toggle" id="theme" aria-label="切换深浅色" title="切换深浅色">◐</button></div>
+    </header>
+    <main>
+      <div class="page-heading">
+        <div><p class="eyebrow">A LITTLE ROOM TO CREATE</p><h1>用量总览</h1><p class="intro">套餐余量与跨设备用量，一处查看。</p></div>
+        <button class="refresh" id="refresh" aria-label="刷新数据"><span aria-hidden="true">↻</span><span>刷新</span></button>
+      </div>
+      <div class="notice" id="notice" role="status" hidden></div>
+      <section aria-labelledby="quota-heading">
+        <div class="section-heading"><h2 id="quota-heading">订阅额度</h2><div class="segmented" role="group" aria-label="额度视图"><button type="button" id="mode-remaining" aria-pressed="true">剩余</button><button type="button" id="mode-used" aria-pressed="false">已用</button></div><span class="muted">按套餐实际窗口更新</span></div>
+        <div class="quota-grid" id="quotas"><div class="empty panel">正在读取套餐额度…</div></div>
+      </section>
+      <section class="activity-grid" aria-label="Token 用量">
+        <article class="panel today-card">
+          <div class="section-heading"><h2>今日 Token</h2><span class="tag">含缓存</span></div>
+          <div class="daily-number" id="today-total">—</div>
+          <p class="metric-caption" id="today-caption">正在读取用量</p>
+          <div class="breakdown" id="breakdown"></div>
+          <p class="reasoning" id="reasoning">推理用量尚未读取</p>
+          <p class="extras" id="today-extras"></p>
+          <div class="card-foot"><span id="requests">— 次请求</span><span id="cache-hit">— 缓存命中</span></div>
+        </article>
+        <article class="panel trend-card">
+          <div class="section-heading"><h2>近七日节奏</h2><span class="muted">Asia / Shanghai</span></div>
+          <div class="week-heading"><strong id="week-total">—</strong><span class="metric-caption">累计 Token，含缓存</span></div>
+          <div class="chart" id="chart" aria-label="近七日 Token 柱状图"></div>
+          <div class="card-foot"><span>包含本机与已同步的服务器用量</span><span id="week-requests">— 次请求</span></div>
+        </article>
+      </section>
+      <section aria-label="近七日分布">
+        <div class="section-heading"><h2>近七日分布</h2><div class="segmented" role="group" aria-label="分布维度"><button type="button" id="tab-models" aria-pressed="true">模型</button><button type="button" id="tab-providers" aria-pressed="false">厂商</button><button type="button" id="tab-agents" aria-pressed="false">客户端</button><button type="button" id="tab-computers" aria-pressed="false">设备</button></div></div>
+        <article class="panel detail-panel"><div id="rank-body"></div><p class="muted rank-note" id="rank-note"></p></article>
+      </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>
+        <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>
+      <p class="method">Token = 输入 + 输出 + 缓存读取 + 缓存写入；推理用量已包含在输出中，不重复相加。额度比例由套餐提供，与 Token 统计独立。费用与速度为 Magpie 按实效价格的估算值，仅供参考。</p>
+    </main>
+  </div>
+  <dialog id="auth">
+    <form id="auth-form">
+      <span class="brand-mark">◒</span><h2>连接你的用量</h2><p>输入本服务的只读令牌。它与模型 API Key 无关。</p>
+      <label for="token">只读访问令牌</label><input id="token" type="password" autocomplete="off" required placeholder="粘贴本地生成的令牌">
+      <button type="submit">连接</button><p class="auth-error" id="auth-error" role="alert"></p>
+    </form>
+  </dialog>
+</body>
+</html>

package/mobile/style.css

@@ -0,0 +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(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"] .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,12 +1,13 @@
 {
   "name": "magpie-page-token-widget",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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",
   "files": [
     "index.mjs",
     "lib",
+    "mobile",
     "page",
     "scriptable",
     "ui",