[liuzq1103]

What this changes

Adds packages/page-token-widget: a page in Magpie's window that puts a quota widget on the home screen of an iPhone.

The window shows a QR code. The camera of the phone opens the pairing page in Safari, the widget script is downloaded, Scriptable opens it, and the widget goes on the home screen. The widget shows the remaining quota of every subscription, the percentage and the reset countdown of the 5-hour and the weekly window, today's tokens, the last seven days and the ranking per provider. The plugin page picks which subscriptions the medium and the large widget show, and shows the state of Tailscale and the iPhones in the same tailnet.

Tapping the widget opens the page of the phone in Safari: the same numbers, written for a narrow screen. The page carries no token of its own — the phone brings its own in the address and the page drops it as soon as it has read it.

The plugin runs the service itself: no install script, no Node.js, no scheduled task, no manual port forwarding. It finds the tailnet address through Tailscale and publishes the port with a tailscale serve --tcp forwarding of its own.

How it is put together:

• page/ holds a launcher only. The page is in a sandbox frame whose CSP is connect-src 'none', so it cannot fetch anything; it navigates its frame to the local service and the service answers with the console.
• The host part (index.mjs) starts the service on 127.0.0.1. It listens first and asks Tailscale afterwards, because the host is only given a few seconds to come up.
• The service reads the local quota API of Magpie (127.0.0.1:3425) and writes nothing in the configuration of Magpie.
• The phone pairs with a one-time code. The widget exchanges that code for a token of its own and keeps it in the keychain of Scriptable.
• The service knows two rooms instead of one. The console listens on 127.0.0.1:<port> and the phone side on 127.0.0.1:<phonePort>; the forwarding of Tailscale points at the phone side, so a request that comes in through the tailnet is never taken for a request of this computer. The Host header decides nothing: a device in the tailnet cannot read the console or the token whatever it puts in it. Every console route answers 403 on the phone side; the page of the phone and the API of the phone (/api/v1/overview, /api/v1/session, /scriptable/*) answer there instead. The page that carries the token may only be opened by hand (sec-fetch-mode: navigate), so another page cannot fetch it either.

Registry text (verbatim)

{ "package": "@magpie-community/page-token-widget", "name": "iPhone Quota Widget", "kind": "page", "community": true,
  "summary": { "en": "A quota widget on the home screen of your iPhone: scan one code and the widget shows the remaining quota, the reset countdown and the real token usage of Codex, MiniMax and GLM. Unlike the usage pages listed above, the numbers land on another device, and the quota stays the quota window of the subscription rather than a per-model split of tokens; the phone reaches the local service over your Tailscale tailnet.", "zh": "把额度组件放到 iPhone 桌面：扫一次码，组件显示 Codex、MiniMax、GLM 各家套餐的剩余额度、重置倒计时和真实 Token 用量。和上面那些用量页面不同，数字落在另一台设备上；额度保持订阅本身的额度窗口，而不是按模型摊开的 token；手机通过 Tailscale 尾网连进本机服务。" } },

Difference declaration: the registry entry, magpie.summary in package.json and this description carry the same text.

The listed usage pages answer on the machine that runs Magpie. This one answers on another device: the home screen of an iPhone, over the tailnet of the user, with the quota window of the subscription itself rather than a per-model split of tokens.

Testing

• bun scripts/check.mjs — every package of the repository passes, the new one included. (This machine has no bun, so the same script ran under node with import.meta.dir replaced by import.meta.dirname: exit 0, every package ✓, including the new one.)
• node --test test/*.test.mjs in packages/page-token-widget — 18 pass, 0 fail.
• On a real Magpie (0.1.3681) the page of the plugin opens in the window and draws the console: the QR code, the tailnet address, the subscriptions and the state of Tailscale.
• The same service answers on the tailnet address, and the phone of the tailnet fetches the widget script with the one-time code.
• The root of the phone side answers with the page of the phone (200); every console route answers 403 there, with a Host header of 127.0.0.1:<port> and without one. The page of the phone carries no token of the service.

Standards kept: the page reads nothing of Magpie and reaches no network (the page files carry no fetch, no magpie.read); the package has no runtime dependency; the port is declared in package.json and the launcher falls back to it; the summary is in English and Chinese; the README has a Chinese part.

Not tried: the phone side was not run through the whole pair by someone else than the author of the package; the widget on a device without a tailnet was not checked.

🤖 Generated with Claude Code

[yetone]

Harm scan at 1f6c0af: nothing hostile. The vendored qrcode-generator is npm's 1.4.4 with one change (row/col in renderTo2dContext's fillRect). The plugin talks to the local gateway and to tailscale only.

One security gap to fix before merge: local in lib/server.mjs (line 304) is decided by the Host header, not by where the connection came from. The server also listens on the tailnet IP (line 494), and allowedHosts accepts 127.0.0.1/localhost there. So any device in the tailnet can do

curl -H 'Host: 127.0.0.1:3498' http://<tailnet-ip>:3498/

and get ui/index.html with __SERVICE_TOKEN__ filled in (no Sec-Fetch-Mode from curl, so the navigate check passes), and reach /api/v1/console/state, /console/pair and /console/options. The same holds through the tailscale serve --tcp forward, whose connections arrive from 127.0.0.1 too. A shared-in node or anyone the tailnet ACL lets in reads every subscription's quota and changes the plugin's settings.

Decide "local" by the socket: the 127.0.0.1 listener's requests are local, the tailnet listener's never are, whatever their Host says. Two listeners already exist, so a flag per listener is enough. A test: a request on the tailnet listener with Host: 127.0.0.1:<port> gets 403 on / and the console routes.

Also worth saying in the README: tailscale serve --bg --tcp=3498 is a standing Tailscale setting that outlives the plugin until it is removed.