papercliped 1.1.0-beta.2 → 2.2.0

package/dist/manage/routes.js

@@ -1,65 +1,40 @@
-import { createHmac, timingSafeEqual } from "node:crypto";
 import { displayName } from "../accounts/alias.js";
-import { randomToken, sha256Hex } from "../oauth/crypto.js";
-import { managePage } from "./page.js";
-const COOKIE = "pcp_manage";
 const HEADERS = { "Cache-Control": "no-store", "X-Content-Type-Options": "nosniff", "Referrer-Policy": "no-referrer" };
+/** A DNS name or IPv4 literal, optionally with a port; undefined when it is anything else. */
+function cleanHost(v) {
+    if (typeof v !== "string")
+        return undefined;
+    const h = v.trim().toLowerCase();
+    if (!h)
+        return null;
+    if (h.length > 255 || !/^[a-z0-9]([a-z0-9.-]*[a-z0-9])?(:\d{1,5})?$/.test(h))
+        return undefined;
+    try {
+        return new URL(`https://${h}`).host;
+    }
+    catch {
+        return undefined;
+    }
+}
+const cleanUid = (v) => (v == null ? null : typeof v === "string" && v.length <= 100 ? v : undefined);
 /**
- * The connection manager for beta accounts: sign in with username + secret key, then see every connected app, change what each
- * may do, disconnect, switch anonymity, rotate the secret key, or disconnect/delete everything. Every action is limited to the
- * signed-in account; sensitive ones ask for the secret key again.
+ * The manage API behind the Papercliped plugin for Paperclip (there is no web page for it any more: managing happens inside
+ * Paperclip). The plugin signs in once with username + secret key and gets a plugin token; with it, it can list and change
+ * connected apps, switch anonymity, and list or remove plugin links. Sensitive actions (new secret key, disconnect Paperclip,
+ * delete account) need the secret key again in the request. Every action is limited to the token's own account.
  *
- * CSRF: the session cookie is SameSite=Strict, and every state-changing call must be JSON with a custom header, which a
- * cross-site page cannot send without a CORS preflight (which we never approve).
+ * Only bearer tokens are accepted, and a cross-site page cannot attach one without a CORS preflight (which we never approve),
+ * so there is no cookie and no CSRF surface.
  */
 export class ManageRoutes {
     p;
-    o;
-    key;
-    now;
-    ttl;
-    constructor(p, o) {
+    constructor(p, _o = {}) {
         this.p = p;
-        this.o = o;
-        this.key = p.manageSigningKey();
-        this.now = o.now ?? Date.now;
-        this.ttl = (o.sessionHours ?? 8) * 3600;
-    }
-    fp(a) {
-        return sha256Hex(a.secretHash).slice(0, 12);
-    }
-    mac(accountId, exp, fp) {
-        return createHmac("sha256", this.key).update(`${accountId}|${exp}|${fp}`).digest("base64url");
-    }
-    cookie(a) {
-        if (!a)
-            return `${COOKIE}=; Path=/; HttpOnly; SameSite=Strict; Max-Age=0${this.o.secureCookie ? "; Secure" : ""}`;
-        const exp = Math.floor(this.now() / 1000) + this.ttl;
-        const fp = this.fp(a);
-        return `${COOKIE}=${a.id}~${exp}~${fp}~${this.mac(a.id, exp, fp)}; Path=/; HttpOnly; SameSite=Strict; Max-Age=${this.ttl}${this.o.secureCookie ? "; Secure" : ""}`;
-    }
-    async session(req) {
-        const m = new RegExp(`(?:^|; )${COOKIE}=([^;]+)`).exec(req.headers.cookie ?? "");
-        if (!m)
-            return null;
-        const [id, exp, fp, mac] = m[1].split("~");
-        if (!id || !exp || !fp || !mac || Number(exp) * 1000 < this.now())
-            return null;
-        const want = Buffer.from(this.mac(id, Number(exp), fp));
-        const got = Buffer.from(mac);
-        if (want.length !== got.length || !timingSafeEqual(want, got))
-            return null;
-        const a = await this.p.manageAccount(id);
-        // Changing the secret key changes the fingerprint, which ends every session signed with the old one.
-        return a && !a.disabled && this.fp(a) === fp ? a : null;
-    }
-    send(res, status, body, type, extra = {}) {
-        res.writeHead(status, { "Content-Type": type, ...HEADERS, ...extra });
-        res.end(body);
-        return true;
     }
     json(res, status, body, extra = {}) {
-        return this.send(res, status, JSON.stringify(body), "application/json", extra);
+        res.writeHead(status, { "Content-Type": "application/json", ...HEADERS, ...extra });
+        res.end(JSON.stringify(body));
+        return true;
     }
     async body(req) {
         if (!/^application\/json\b/i.test(String(req.headers["content-type"] ?? "")))
@@ -81,50 +56,42 @@ export class ManageRoutes {
     async handle(req, res, url) {
         const path = url.pathname.replace(/\/+$/, "") || "/";
         const m = req.method ?? "GET";
-        if (m === "GET" && path === "/manage") {
-            const nonce = randomToken(12);
-            return this.send(res, 200, managePage(nonce), "text/html; charset=utf-8", {
-                "Content-Security-Policy": `default-src 'none'; img-src data:; style-src 'unsafe-inline'; script-src 'nonce-${nonce}'; connect-src 'self'; frame-ancestors 'none'; base-uri 'none'; form-action 'none'`,
-            });
+        // The old browser page: managing now happens in Paperclip, with the plugin.
+        if (path === "/manage") {
+            res.writeHead(302, { Location: "/docs/paperclip-plugin", ...HEADERS });
+            res.end();
+            return true;
         }
         if (!path.startsWith("/api/manage"))
             return false;
-        if (m !== "GET") {
-            // CSRF guard (see class comment).
-            if (req.headers["x-papercliped"] !== "1")
-                return this.json(res, 400, { error: "Missing request header" });
-        }
         const route = path.slice("/api/manage".length) || "/";
-        if (m === "POST" && route === "/login") {
+        // The plugin proves the secret key once and gets its token. Throttled exactly like the sign-in page.
+        if (m === "POST" && route === "/plugin-link/sign-in") {
             const b = await this.body(req);
             if (!b)
                 return this.json(res, 400, { error: "Send JSON" });
+            const host = b.instanceHost == null ? null : cleanHost(b.instanceHost);
+            const uid = cleanUid(b.paperclipUserId);
+            if (host === undefined || uid === undefined)
+                return this.json(res, 400, { error: "Invalid instanceHost or paperclipUserId" });
             const r = await this.p.manageLogin(req, String(b.username ?? ""), String(b.secret ?? ""));
             if (!r.ok)
                 return r.reason === "throttled" ? this.json(res, 429, { error: "Too many attempts. Wait a few minutes." }) : this.json(res, 401, { error: "That username and secret key don't match." });
-            return this.json(res, 200, { ok: true }, { "Set-Cookie": this.cookie(r.account) });
+            const { token } = await this.p.manageLinkPlugin(r.account, { instanceHost: host, paperclipUserId: uid });
+            return this.json(res, 200, { token });
         }
-        const a = await this.session(req);
-        if (!a)
-            return this.json(res, 401, { error: "Sign in first" });
+        const bearer = /^Bearer\s+(\S+)$/i.exec(String(req.headers.authorization ?? ""))?.[1] ?? null;
+        const pr = bearer ? await this.p.managePluginPrincipal(bearer) : null;
+        if (!pr)
+            return this.json(res, 401, { error: "Link the Papercliped plugin again" });
+        const a = pr.account;
+        const linkId = pr.linkId;
         if (!(await this.p.store.hit(`manage:${a.id}`, 120, 60_000)))
             return this.json(res, 429, { error: "Slow down" });
-        if (m === "POST" && route === "/logout")
-            return this.json(res, 200, { ok: true }, { "Set-Cookie": this.cookie(null) });
         if (m === "GET" && route === "/me") {
             const link = await this.p.manageInstanceLabel(a.id);
-            return this.json(res, 200, { name: displayName(a), anonymous: !!a.anonymous, alias: a.alias ?? null, beta: !!a.beta, paperclip: link.label, connected: link.connected, createdAt: a.createdAt });
-        }
-        if (m === "POST" && route === "/beta") {
-            const b = await this.body(req);
-            if (!b || typeof b.beta !== "boolean")
-                return this.json(res, 400, { error: "beta must be true or false" });
-            await this.p.manageSetBeta(a, b.beta);
-            return this.json(res, 200, { beta: b.beta });
+            return this.json(res, 200, { name: displayName(a), anonymous: !!a.anonymous, alias: a.alias ?? null, paperclip: link.label, connected: link.connected, createdAt: a.createdAt });
         }
-        // Everything below is part of the beta.
-        if (!a.beta)
-            return this.json(res, 403, { error: "Join the beta to use the connection manager", code: "beta_required" });
         if (m === "GET" && route === "/connections")
             return this.json(res, 200, { connections: await this.p.manageConnections(a.id) });
         const c = /^\/connections\/([A-Za-z0-9_-]{1,80})$/.exec(route);
@@ -137,6 +104,13 @@ export class ManageRoutes {
         }
         if (c && m === "DELETE")
             return (await this.p.manageRevoke(a, c[1])) ? this.json(res, 200, { ok: true }) : this.json(res, 404, { error: "No such connection" });
+        if (m === "GET" && route === "/plugin-links")
+            return this.json(res, 200, { links: (await this.p.manageListPluginLinks(a.id)).map((l) => ({ id: l.id, host: l.host, createdAt: l.createdAt, lastUsedAt: l.lastUsedAt, current: l.id === linkId })) });
+        const pl = /^\/plugin-links\/([A-Za-z0-9_-]{1,80})$/.exec(route);
+        if (pl && m === "DELETE") {
+            const id = pl[1] === "self" ? linkId : pl[1];
+            return (await this.p.manageRevokePluginLink(a, id)) ? this.json(res, 200, { ok: true }) : this.json(res, 404, { error: "No such link" });
+        }
         if (m === "POST" && route === "/privacy") {
             const b = await this.body(req);
             if (!b || typeof b.anonymous !== "boolean")
@@ -158,9 +132,13 @@ export class ManageRoutes {
             if (!(await this.p.manageReauth(a.id, String(b.secret ?? ""))))
                 return this.json(res, 403, { error: "That secret key is not right (or too many attempts)." });
             if (route === "/secret/rotate") {
+                // Every plugin link ends with the old key; this plugin gets a fresh token so it stays linked.
+                const links = await this.p.manageListPluginLinks(a.id);
+                const here = links.find((l) => l.id === linkId);
                 const secret = await this.p.manageRotateSecret(a);
                 const fresh = (await this.p.manageAccount(a.id));
-                return this.json(res, 200, { secret }, { "Set-Cookie": this.cookie(fresh) });
+                const { token } = await this.p.manageLinkPlugin(fresh, { instanceHost: here?.host ?? null, paperclipUserId: here?.paperclipUserId ?? null });
+                return this.json(res, 200, { secret, token });
             }
             if (route === "/paperclip/disconnect") {
                 await this.p.manageDisconnectPaperclip(a);
@@ -169,7 +147,7 @@ export class ManageRoutes {
             if (String(b.confirm ?? "").toLowerCase() !== a.username.toLowerCase())
                 return this.json(res, 400, { error: "Type your username to confirm." });
             await this.p.manageDeleteAccount(a);
-            return this.json(res, 200, { ok: true }, { "Set-Cookie": this.cookie(null) });
+            return this.json(res, 200, { ok: true });
         }
         return this.json(res, 404, { error: "Not found" });
     }

package/dist/oauth/pages.js

@@ -1,29 +1,42 @@
 import { USERNAME_MAX, USERNAME_MIN } from "../accounts/username.js";
 import { FAVICON_LINK } from "../site/favicon.js";
-import { grantableScopes, scopesUpTo } from "./scopes.js";
+import { grantableScopes } from "./scopes.js";
 export const esc = (s) => s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 /**
  * Papercliped sign-in pages. The look follows Paperclip's own sign-in screen (warm cream page, left-aligned form, olive
  * accents, no card chrome) so connecting feels native; colours were sampled from it and the enabled button is darkened so text
  * meets WCAG AA (contrast is asserted in the tests). One self-contained document per page: no external fonts, scripts or images.
  */
+/**
+ * The website's type and colours, for the server-rendered pages. Fonts load from /fonts/ when the website is deployed with the
+ * bridge (web/dist); otherwise the system fallbacks are used.
+ */
+export const FONTS_CSS = `@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2-variations")}
+@font-face{font-family:"Bricolage Grotesque Variable";font-style:normal;font-display:swap;font-weight:200 800;src:url(/fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2-variations")}
+@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}`;
+export const SANS = `"Inter Variable",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif`;
+export const DISPLAY = `"Bricolage Grotesque Variable","Inter Variable",ui-sans-serif,system-ui,sans-serif`;
+export const MONO = `"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace`;
+/** The default "clip" theme in dark mode (same values as web/src/theme/palettes.ts). */
+export const THEME_DARK = { bg: "#16150f", ink: "#f4f1d6", ink2: "#e9e4b0", muted: "#bdb99f", line: "#5c5a49", btn: "#e9e4b0", btnText: "#16150f", disabled: "#7d7a64" };
 export const THEME = { bg: "#fffddc", ink: "#0b0a07", ink2: "#47463c", muted: "#6b6959", line: "#b0a993", btn: "#47463c", btnText: "#fffddc", disabled: "#8c8a77", errBg: "#fde8e3", errInk: "#8a1f11", warnBg: "#fff1c2" };
-const CSS = `
-:root{--bg:${THEME.bg};--ink:${THEME.ink};--ink2:${THEME.ink2};--muted:${THEME.muted};--line:${THEME.line};--btn:${THEME.btn};--btntext:${THEME.btnText};--off:${THEME.disabled}}
+const CSS = `${FONTS_CSS}
+:root{--bg:${THEME.bg};--ink:${THEME.ink};--ink2:${THEME.ink2};--muted:${THEME.muted};--line:${THEME.line};--btn:${THEME.btn};--btntext:${THEME.btnText};--off:${THEME.disabled};color-scheme:light}
+@media (prefers-color-scheme:dark){:root{--bg:${THEME_DARK.bg};--ink:${THEME_DARK.ink};--ink2:${THEME_DARK.ink2};--muted:${THEME_DARK.muted};--line:${THEME_DARK.line};--btn:${THEME_DARK.btn};--btntext:${THEME_DARK.btnText};--off:${THEME_DARK.disabled};color-scheme:dark}}
 *{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
-body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;position:relative;overflow-x:hidden}
+body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:15px/1.55 ${SANS};position:relative;overflow-x:hidden}
 body::before{content:"";position:fixed;right:5vw;top:5vh;width:min(26vw,300px);height:min(48vh,420px);pointer-events:none;opacity:.55;
 background-image:radial-gradient(var(--line) 1.1px,transparent 1.3px);background-size:13px 13px;-webkit-mask-image:linear-gradient(135deg,#000 0%,transparent 75%);mask-image:linear-gradient(135deg,#000 0%,transparent 75%)}
 @media (max-width:900px){body::before{display:none}}
 main{position:relative;width:min(400px,100% - 40px);margin:9vh 0 6vh max(20px,min(14vw,240px))}
 @media (max-width:900px){main{margin:6vh auto}}
-.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:17px;margin-bottom:34px}.brand svg{width:20px;height:20px}
-h1{font-size:21px;line-height:1.25;font-weight:600;margin:0 0 6px}
+.brand{display:flex;align-items:center;gap:8px;font-family:${DISPLAY};font-weight:700;font-size:19px;text-transform:lowercase;margin-bottom:34px}.brand svg{width:20px;height:20px}
+h1{font-family:${DISPLAY};font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
 p.lede{margin:0 0 20px;color:var(--muted)}
 label.f{display:block;font-size:12px;color:var(--muted);margin:14px 0 5px}
 input[type=text],input[type=password]{width:100%;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font:inherit}
 input:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--ink2);outline-offset:2px}
-.btn{display:block;width:100%;height:42px;margin-top:18px;border:1px solid var(--btn);border-radius:8px;background:var(--btn);color:var(--btntext);font:inherit;font-weight:600;cursor:pointer}
+.btn{display:block;width:100%;height:42px;margin-top:18px;border:1px solid var(--btn);border-radius:8px;background:var(--btn);color:var(--btntext);font:inherit;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.12)}.btn:active{transform:translateY(0) scale(.98)}@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}
 .btn:hover{filter:brightness(1.15)}.btn:disabled{background:var(--off);border-color:var(--off);cursor:not-allowed;filter:none}
 .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}.btn.ghost:hover{background:rgba(71,70,60,.07);filter:none}
 .row{display:flex;gap:10px}.row .btn{margin-top:18px}
@@ -33,7 +46,7 @@ input:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{o
 .opt{display:block;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:8px 0;cursor:pointer}.opt:has(input:checked){border-color:var(--ink2);box-shadow:0 0 0 1px var(--ink2)}
 .opt strong{font-weight:600}.opt small{display:block;color:var(--muted);margin-top:2px;font-size:13px}
 small.hint{display:block;color:var(--muted);font-size:12.5px;margin-top:6px}
-code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
+code,.mono{font-family:${MONO}}
 .secret{display:block;margin:14px 0 8px;padding:14px 12px;border:1px dashed var(--ink2);border-radius:8px;font-size:13px;letter-spacing:0;overflow-wrap:normal;background:rgba(255,255,255,.35);user-select:all}
 a{color:var(--ink)}
 .fine{color:var(--muted);font-size:12.5px;margin-top:22px}
@@ -42,7 +55,7 @@ ul.rules{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:13px}
 `;
 const CLIP = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>`;
 function shell(title, body, nonce, script) {
-    return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="color-scheme" content="light"><title>${esc(title)} · Papercliped</title>${FAVICON_LINK}<style>${CSS}</style></head><body><main><div class="brand">${CLIP}<span>Papercliped</span></div>${body}</main>${script ? `<script nonce="${nonce}">${script}</script>` : ""}</body></html>`;
+    return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="color-scheme" content="light dark"><title>${esc(title)} · Papercliped</title>${FAVICON_LINK}<style>${CSS}</style></head><body><main><div class="brand">${CLIP}<span>Papercliped</span></div>${body}</main>${script ? `<script nonce="${nonce}">${script}</script>` : ""}</body></html>`;
 }
 const hidden = (rid, csrf) => `<input type="hidden" name="rid" value="${esc(rid)}"><input type="hidden" name="csrf" value="${esc(csrf)}">`;
 const errBox = (e) => (e ? `<div class="err" role="alert">${esc(e)}</div>` : "");
@@ -73,6 +86,10 @@ export function instancePage(v) {
        <label class="f" for="inst">Paperclip address</label>
        <input id="inst" name="instance" type="text" inputmode="url" autocomplete="off" spellcheck="false" placeholder="https://paperclip.example.com" value="${esc(v.value ?? "")}" required>
        <small class="hint">The bridge contacts this address to sign you in and to run what you allow. Only enter an address you own.</small>
+       <label class="f" style="display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-weight:400">
+         <input id="plug" name="install_plugin" type="checkbox" value="on" style="width:auto;margin-top:3px"${v.installPlugin === false ? "" : " checked"}>
+         <span>Also install the Papercliped plugin in my Paperclip<br><small class="hint">Adds a Papercliped page to Paperclip for managing connected apps. It is installed through Paperclip's own installer, only if you are its instance admin, and you can remove it any time from Settings &rarr; Plugins.</small></span>
+       </label>
        <div class="row"><button class="btn" name="action" value="continue">Continue</button>${cancel}</div>
      </form>
      <p class="fine">You'll return to <code>${esc(v.redirectHost)}</code> afterwards.</p>`);
@@ -90,7 +107,7 @@ export function approvePage(v) {
        <div class="row"><button class="btn" name="action" value="continue">Continue</button>${cancel}</div>
      </form>`, v.nonce, poll);
 }
-const ANON_TEXT = "Appear anonymously in the operator's logs and panel (as a name like Ann02), and hide my Paperclip's address there.";
+const ANON_TEXT = "Appear anonymously in the operator's logs and dashboard (as a name like Ann02), and hide my Paperclip's address there.";
 export function usernamePage(v) {
     return shell("Choose a username", `<h1>Choose your username</h1>
      <p class="lede">Your Paperclip is connected. Pick a username so you can log in later without approving again.</p>
@@ -128,13 +145,12 @@ export function welcomePage(v) {
 }
 const LEVELS = [
     { scope: "paperclip:read", label: "Read only", blurb: "View agents, tasks, goals, costs and reports. Cannot change anything." },
-    { scope: "paperclip:control", label: "Full control (beta)", blurb: "Everything above, plus pause, resume or wake agents, create and update issues and goals, and comment." },
-    { scope: "paperclip:admin", label: "Admin (advanced)", blurb: "Everything above, plus decide approvals, change budgets, terminate agents and send arbitrary API writes." },
+    { scope: "paperclip:control", label: "Full control", blurb: "Everything: pause, resume, wake or terminate agents, assign and update issues and goals, comment, decide approvals, set budgets and send any API request." },
 ];
 /** Final step of the account flow: pick how much the app may do. */
 export function scopePage(v) {
     const allowed = new Set(grantableScopes(v.requestedMax));
-    const def = v.requestedMax === "paperclip:admin" ? "paperclip:control" : v.requestedMax;
+    const def = v.requestedMax;
     const opts = LEVELS.filter((l) => allowed.has(l.scope))
         .map((l) => `<label class="opt"><input type="radio" name="level" value="${l.scope}"${l.scope === def ? " checked" : ""}> <strong>${l.label}</strong><small>${esc(l.blurb)}</small></label>`)
         .join("");
@@ -148,15 +164,13 @@ export function scopePage(v) {
        ${opts}${where}
        <input type="hidden" name="privacy_present" value="1">
        <label class="chk"><input type="checkbox" name="anonymous"${v.anonymous ? " checked" : ""}><span>${esc(ANON_TEXT)}${v.alias ? ` <small class="hint">${v.anonymous ? "You appear as" : "You would appear as"} <strong>${esc(v.alias)}</strong>.</small>` : ""}</span></label>
-       <input type="hidden" name="beta_present" value="1">
-       <label class="chk"><input type="checkbox" name="beta"${v.beta ? " checked" : ""}><span>Join the beta: manage your connections (see them, change what each may do, disconnect) at <code>/manage</code>.</span></label>
        <div class="row"><button class="btn" name="action" value="allow">Allow</button>${cancel}</div>
      </form>
-     <p class="fine">Disconnect any time from the app. Access levels are enforced by Papercliped; your Paperclip key stays encrypted on our side and is never shown to the app.</p>`);
+     <p class="fine">Disconnect any time from the app, or manage every connection inside Paperclip with the Papercliped plugin. Access levels are enforced by Papercliped; your Paperclip key stays encrypted on our side and is never shown to the app.</p>`);
 }
 export function consentPage(v) {
-    const allowed = new Set(scopesUpTo(v.requestedMax));
-    const def = v.requestedMax === "paperclip:admin" ? "paperclip:control" : v.requestedMax;
+    const allowed = new Set(grantableScopes());
+    const def = v.requestedMax;
     const opts = LEVELS.filter((l) => allowed.has(l.scope))
         .map((l) => `<label class="opt"><input type="radio" name="level" value="${l.scope}"${l.scope === def ? " checked" : ""}> <strong>${l.label}</strong><small>${esc(l.blurb)}</small></label>`)
         .join("");

package/dist/oauth/paperclip-login.js

@@ -1,5 +1,7 @@
 const UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 const APPROVAL_PATH = /^\/cli-auth\/[0-9a-f-]{36}\?token=[A-Za-z0-9_\-.~%]{8,300}$/i;
+/** Paperclip runs npm install server-side, which can take a while. */
+const PLUGIN_INSTALL_TIMEOUT_MS = 120_000;
 const TOKENISH = /^[\x21-\x7e]{8,600}$/; // printable ASCII, no whitespace
 export class LoginError extends Error {
     status;
@@ -80,6 +82,42 @@ export class PaperclipLogin {
         const r = await json(await this.t.fetch(`${this.t.apiUrl}/cli-auth/me`, { headers: { Authorization: `Bearer ${token}`, Accept: "application/json" }, ...this.sig() }));
         return { userId: typeof r?.userId === "string" ? r.userId.slice(0, 200) : null };
     }
+    /**
+     * The Papercliped plugin's state in this Paperclip: absent, or installed with its version.
+     * `unsupported` = no plugin system there (older Paperclip) or the key may not manage plugins.
+     */
+    async pluginState(token, pluginKey) {
+        const res = await this.t.fetch(`${this.t.apiUrl}/plugins`, { headers: { Authorization: `Bearer ${token}`, Accept: "application/json" }, ...this.sig() });
+        if (res.status === 403 || res.status === 404)
+            return { state: "unsupported" };
+        const list = await json(res);
+        if (!Array.isArray(list))
+            throw new LoginError("Paperclip returned an unexpected plugin list");
+        const hit = list.find((x) => x && typeof x === "object" && x.pluginKey === pluginKey);
+        if (!hit)
+            return { state: "absent" };
+        return { state: "installed", version: typeof hit.version === "string" ? hit.version.slice(0, 40) : null };
+    }
+    /**
+     * Install one fixed npm package at one exact version through Paperclip's own installer. Only an instance
+     * admin's key is accepted there; anyone else gets a 403, reported as "denied". Nothing user-supplied reaches this call.
+     */
+    async installPlugin(token, packageName, version) {
+        const res = await this.t.fetch(`${this.t.apiUrl}/plugins/install`, {
+            method: "POST",
+            headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json", Accept: "application/json" },
+            body: JSON.stringify({ packageName, version }),
+            signal: AbortSignal.timeout(Math.max(this.t.timeoutMs, PLUGIN_INSTALL_TIMEOUT_MS)),
+        });
+        if (res.status === 403)
+            return "denied";
+        if (res.status === 404)
+            return "unsupported";
+        const out = await json(res);
+        if (out?.packageName !== packageName)
+            throw new LoginError("Paperclip installed something other than the Papercliped plugin");
+        return "installed";
+    }
     /** Best effort: invalidate the board key we were issued when a grant is revoked. */
     async revoke(token) {
         try {

package/dist/oauth/pg-store.js

@@ -429,16 +429,3 @@ export class PgStore {
         await this.pool.end();
     }
 }
-/**
- * The operator panel's data access. Connects with the read-only `panel_ro` role (docs/panel-role.sql) and reads accounts and grants
- * ONLY through the safe views, so it cannot see a secret hash, a sealed credential or a real username of an anonymous account.
- * Write methods inherited from PgStore are never called by the panel, and the role could not execute them anyway.
- */
-export class PgPanelStore extends PgStore {
-    async countAccounts() {
-        return num((await this.q("select count(*) as n from bridge.panel_accounts")).rows[0].n);
-    }
-    async liveGrantCount() {
-        return num((await this.q("select count(*) as n from bridge.panel_grants where not revoked")).rows[0].n);
-    }
-}