clavarium 0.2.385-next.1 → 0.2.386-next.1

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "clavarium",
-  "version": "0.2.385-next.1",
+  "version": "0.2.386-next.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "clavarium",
-      "version": "0.2.385-next.1",
+      "version": "0.2.386-next.1",
       "license": "MIT",
       "dependencies": {
         "@xterm/addon-fit": "^0.11.0",
@@ -14,7 +14,7 @@
         "clavarium-binder": "0.1.62-next.1",
         "clavarium-docket": "0.1.2-next.2",
         "clavarium-parley": "0.17.88-next.1",
-        "clavarium-tether": "0.1.0-next.57",
+        "clavarium-tether": "0.1.0-next.58",
         "mammoth": "1.13.0",
         "mermaid": "11.17.2",
         "node-pty": "^1.1.0",
@@ -800,9 +800,9 @@
       }
     },
     "node_modules/clavarium-tether": {
-      "version": "0.1.0-next.57",
-      "resolved": "https://registry.npmjs.org/clavarium-tether/-/clavarium-tether-0.1.0-next.57.tgz",
-      "integrity": "sha512-klagmTU3NdzMO6fA+nMvLg9UTW9XOWN1QYa1JF4ywykeliJsAMNOIWzAvlsVFEMPSg0t4IkcZq/Ui7dyTdDHDg==",
+      "version": "0.1.0-next.58",
+      "resolved": "https://registry.npmjs.org/clavarium-tether/-/clavarium-tether-0.1.0-next.58.tgz",
+      "integrity": "sha512-doQf9RcohN4WIA2kQZeuBI6JlRlV9d+yTMw/iT14aqVJBaBh7i1ZIloIxhX2dRxAOFsGLNxuYUdSC4zShoIGJQ==",
       "license": "MIT",
       "bin": {
         "tether": "bin/cli.mjs",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clavarium",
-  "version": "0.2.385-next.1",
+  "version": "0.2.386-next.1",
   "license": "MIT",
   "type": "module",
   "description": "A conversation is a VM with a terminal in it. Everything else is a folder.",
@@ -36,6 +36,7 @@
     "check:hooks": "node tools/check-hooks.mjs",
     "test:e2e": "node --test --test-concurrency=1 \"e2e/*.e2e.mjs\"",
     "toolbox": "node deploy/parley-archive.mjs",
+    "extension": "node tools/extension-zips.mjs",
     "acceptance": "node acceptance/run.mjs"
   },
   "engines": {
@@ -47,7 +48,7 @@
     "clavarium-binder": "0.1.62-next.1",
     "clavarium-docket": "0.1.2-next.2",
     "clavarium-parley": "0.17.88-next.1",
-    "clavarium-tether": "0.1.0-next.57",
+    "clavarium-tether": "0.1.0-next.58",
     "mammoth": "1.13.0",
     "mermaid": "11.17.2",
     "node-pty": "^1.1.0",

package/server/api.mjs

@@ -360,7 +360,9 @@ export async function handleApi(request, response, conversations, headers, resou
                 const r = await tethers.act('state', { agent: query.get('agent') ?? undefined }, '');
                 const data = r.data ?? {};
                 const approvals = Array.isArray(data.approvals) ? data.approvals.map((q) => { try { return { ...q, view: demandeView(q) }; } catch { return q; } }) : data.approvals;
-                return send(200, { given: tethers.given(), changes: tethers.changes(), ...data, ...(approvals ? { approvals } : {}) }), true;
+                /* Each paired browser: connected or not, and the tabs its person granted (browsers.mjs). Never a token. */
+                const browsersNow = tethers.browsers ? { browsers: tethers.browsers.all(), browsersWaiting: tethers.browsers.waiting() } : {};
+                return send(200, { given: tethers.given(), changes: tethers.changes(), ...data, ...(approvals ? { approvals } : {}), ...browsersNow }), true;
             }
             /* Every device, each with all it was given. */
             if (pathname === '/api/devices' && sharing) return send(200, sharing.devices.all()), true;
@@ -623,10 +625,17 @@ export async function handleApi(request, response, conversations, headers, resou
             const done = await { add: mcpAdd, import: mcpImport, refresh: mcpRefresh, rights: mcpRights, seen: mcpSeen }[mcpOp[1]](ctx, body ?? {});
             return send(mcpOp[1] === 'add' || mcpOp[1] === 'import' ? 201 : 200, done), true;
         }
+        /* A browser paired through the Tether extension (browsers.mjs): the code its popup shows, and its name; or paired
+           again ({ code, target }). The token it is handed is never in the answer. */
+        /* The sites a conversation acts on without asking, at frame: { target, agent, sites: [host | *.host] }. */
+        if (pathname === '/api/tether/browser-sites' && tethers?.browsers) return send(200, await tethers.browsers.setSites(tethers, body ?? {})), true;
+        if (pathname === '/api/tether/browser-pair' && tethers?.browsers) return send(201, tethers.browsers.pair({ code: body?.code, name: body?.name, target: body?.target })), true;
         /* A server taken away: the key kept for it goes too. */
         const mcpGone = pathname === '/api/tether/remove-target' && tethers ? tethers.store().target(String(body?.target ?? '')) : null;
         const tetherOp = /^\/api\/tether\/(level|allow|unallow|decide|remove-target|stop|resume|job-done|job-file)$/.exec(pathname);
         if (tetherOp && tethers && mcpGone?.kind === 'mcp') { const r = await tethers.act('remove-target', body, ''); if (!r.ok) throw new Refusal(400, r.text); forgetKey(secrets, mcpGone); return send(200, r.data ?? { ok: true }), true; }
+        /* A browser taken away: its tokens and its socket go too. */
+        if (tetherOp && tethers && mcpGone?.kind === 'browser') { const r = await tethers.act('remove-target', body, ''); if (!r.ok) throw new Refusal(400, r.text); tethers.browsers?.forget(mcpGone.id); return send(200, r.data ?? { ok: true }), true; }
         if (tetherOp && tethers) { const r = await tethers.act(tetherOp[1], body, ''); if (!r.ok) throw new Refusal(400, r.text); return send(200, r.data ?? { ok: true }), true; }
         /* A mailbox's signature (Markdown), added under what the agent sends from it. */
         if (pathname === '/api/tether/signature' && tethers) {

package/server/browsers.mjs

@@ -0,0 +1,295 @@
+/* BROWSERS, THROUGH TETHER (08-11): a person's real Chrome or Firefox, paired once through the Tether extension, is a
+ * target like a mailbox -- an asset given to a conversation at a level (Off / Read / All with approval / All / Custom).
+ * The tabs the person grants in the extension's popup are all an AI can touch; Tether's browser connector refuses any
+ * other tab before anything is sent, and the extension refuses it again on its side.
+ *
+ * THE EXTENSION CONNECTS OUT, to BROWSER_PATH on this server's public address (wss://), under /c/: the front lets /c/
+ * through without the web sign-in (deploy/install.sh, skip_auth_routes), as it does for paired devices and voice boxes.
+ * The extension cannot sign in; its right is the token it was handed when it was paired, and nothing else.
+ *
+ * PAIRING. A new extension says { t:"pair", code }: it waits here, in the lobby, its code shown in its popup. The person
+ * types that code in Assets › New › Browser (pair): the socket goes to that target's own connector (one per browser,
+ * Tether's `browser()`), which mints a long-lived token and hands it over. From then on the extension says
+ * { t:"hello", token } each time it connects -- every start of the browser -- and is that browser again, with no code.
+ * Paired again only when the person removes it (or pairs it again from its panel).
+ *
+ * TOKENS ARE NEVER KEPT IN CLEAR: only their SHA-256 (tether-browser-tokens.json). Never logged, never answered, never
+ * journaled (Tether journals no token either). A code is never logged.
+ *
+ * RATE LIMITS, since the endpoint is open to anyone who reaches the address: new sockets per address and minute, sockets
+ * waiting unpaired (per address and in all), a waiting socket dropped after a while, a message of a socket not yet paired
+ * kept small; and on the person's side, wrong codes counted -- too many in a while, pairing waits. Two sockets offering
+ * the same code are both refused (nobody can take a code someone else shows).
+ */
+import { createHash } from 'node:crypto';
+import { browser as browserConnector } from 'clavarium-tether/connectors/browser';
+import { no } from 'clavarium-tether/verbs';
+import { JsonFile } from './store.mjs';
+import { Refusal } from './conversations.mjs';
+
+export const BROWSER_PATH = '/c/api/browser';
+export const VERBS = ['browser.tabs', 'browser.open', 'browser.shot', 'browser.html', 'browser.console', 'browser.eval', 'browser.click', 'browser.type', 'browser.key', 'browser.scroll', 'browser.drag'];
+/* The acting verbs, each set Yes or Ask under Custom (a verb rule of Tether's, at level frame). */
+export const ACTS = ['browser.open', 'browser.click', 'browser.type', 'browser.key', 'browser.scroll', 'browser.drag', 'browser.eval'];
+/* A socket's message: a screenshot comes back as a data URL. */
+export const MESSAGE_MAX = 32 * 1024 * 1024;
+/* What a socket not yet paired may say at once (hello, pair, its tabs). */
+export const LOBBY_MESSAGE_MAX = 256 * 1024;
+export const LOBBY_MAX = 50;
+export const LOBBY_PER_ADDRESS = 4;
+export const LOBBY_MS = 15 * 60_000;
+export const CONNECTS_PER_MINUTE = 20;
+export const WRONG_MAX = 5;
+export const WRONG_WINDOW_MS = 10 * 60_000;
+const TITLE_MAX = 80;
+export const SITES_MAX = 100;
+
+const hash = (token) => createHash('sha256').update(String(token)).digest('hex');
+const slug = (s) => String(s ?? '').normalize('NFKD').replace(/[̀-ͯ]/g, '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 40).replace(/-+$/, '');
+const isLoop = (ip) => /^(127\.|::1$|::ffff:127\.)/.test(String(ip ?? ''));
+
+/* Who connects: the address the front saw (the last one before it in X-Forwarded-For), else the socket's own. */
+export function addressOf(request) {
+    const own = request?.socket?.remoteAddress ?? '';
+    if (!isLoop(own)) return own;
+    const list = String(request?.headers?.['x-forwarded-for'] ?? '').split(',').map((s) => s.trim()).filter(Boolean);
+    for (let i = list.length - 1; i >= 0; i--) if (!isLoop(list[i])) return list[i];
+    return own;
+}
+
+export class Browsers {
+    #tokens; #store; #now; #log; #make;
+    #inst = new Map();          /* target id -> Tether's browser connector for it */
+    #lobby = new Set();         /* sockets not paired yet */
+    #connects = new Map();      /* address -> times of its recent sockets */
+    #wrong = [];                /* times of recent wrong codes */
+    #listeners = new Set();
+    #timer = null;
+
+    /* `store()`: Tether's store (targets). `log(line)`: never handed a token or a code. `make`: the connector (tests). */
+    constructor({ dataDir, store, now = () => Date.now(), log = () => {}, make = browserConnector } = {}) {
+        this.#tokens = new JsonFile(dataDir ? `${dataDir}/tether-browser-tokens.json` : '', {});
+        this.#store = store; this.#now = now; this.#log = log; this.#make = make;
+        this.#timer = setInterval(() => this.#sweep(), 60_000); this.#timer.unref?.();
+    }
+
+    onChange(fn) { this.#listeners.add(fn); return () => this.#listeners.delete(fn); }
+    #changed() { for (const fn of this.#listeners) { try { fn(); } catch { /* its fault */ } } }
+
+    /* ONE TARGET'S TOKENS, as Tether's connector asks for them: kept as hashes. */
+    #tokensOf(id) {
+        const read = () => this.#tokens.get()[id] ?? [];
+        const write = (list) => { const all = this.#tokens.get(); if (list.length) all[id] = list; else delete all[id]; this.#tokens.set(all); };
+        return {
+            has: (t) => read().includes(hash(t)),
+            add: (t) => { const h = hash(t); const l = read(); if (!l.includes(h)) write([...l, h]); },
+            remove: (t) => { const h = hash(t); write(read().filter((x) => x !== h)); },
+            list: () => [],
+        };
+    }
+    #of(id) {
+        let i = this.#inst.get(id);
+        if (!i) { i = this.#make({ tokens: this.#tokensOf(id) }); i.onChange(() => this.#changed()); this.#inst.set(id, i); }
+        return i;
+    }
+    #targets() { try { return (this.#store()?.targets() ?? []).filter((t) => t.kind === 'browser' && t.connector === 'browser'); } catch { return []; } }
+
+    /* THE CONNECTOR THE KEEPER IS GIVEN (connectors.browser): each call goes to its own browser's connector. Rights and
+       approvals were applied by the keeper before; this only carries the call. */
+    get connector() {
+        const self = this;
+        return {
+            name: 'browser',
+            verbs: VERBS,
+            async run(verb, target, a, ctx) {
+                const i = self.#inst.get(target.id);
+                if (!i?.status().connected) no(`${target.title} is not connected: open that browser, with the Tether extension on`);
+                return i.run(verb, target, a, ctx);
+            },
+            /* The site of a granted tab's page, for Tether's site rules (frame: the sites the person allowed). */
+            siteOf(target, a) { try { return self.#inst.get(target.id)?.siteOf?.(target, a) ?? ''; } catch { return ''; } },
+            /* What a card shows of the act (Tether puts it in card.about): the tab, by its title and address, and what
+               the card of Tether's leaves out (a script, a point, a drag). Never a token. */
+            async describe(verb, target, a) {
+                const tabs = self.#inst.get(target.id)?.status().tabs ?? [];
+                const tab = a.tab !== undefined ? tabs.find((x) => String(x.id) === String(a.tab)) : null;
+                const out = {};
+                if (tab) out.tab = { id: tab.id, title: String(tab.title ?? '').slice(0, 200), url: String(tab.url ?? '').slice(0, 500), site: String(tab.site ?? '') };
+                for (const k of ['script', 'selector', 'from', 'to', 'key']) if (typeof a[k] === 'string') out[k] = a[k];
+                for (const k of ['x', 'y', 'dx', 'dy']) if (Number.isFinite(Number(a[k])) && a[k] !== undefined) out[k] = Number(a[k]);
+                return out;
+            },
+            close(agent = '*') { for (const i of self.#inst.values()) { try { i.close(agent); } catch { /* gone */ } } },
+            shutdown() { self.shutdown(); },
+        };
+    }
+
+    /* A SOCKET THE EXTENSION OPENED, wrapped as Tether's channel: { send, onMessage, onClose, close }, and `size` of
+       each message (the lobby keeps them small). Returns false when it was turned away. */
+    accept(raw, address = '') {
+        const now = this.#now();
+        const recent = (this.#connects.get(address) ?? []).filter((t) => now - t < 60_000);
+        recent.push(now); this.#connects.set(address, recent);
+        const waiting = [...this.#lobby].filter((c) => c.address === address).length;
+        if (recent.length > CONNECTS_PER_MINUTE || this.#lobby.size >= LOBBY_MAX || waiting >= LOBBY_PER_ADDRESS) { try { raw.close(); } catch { /* gone */ } return false; }
+        const conn = { raw, address, since: now, code: null, tabs: null, handler: null, closers: new Set(), taken: false };
+        this.#lobby.add(conn);
+        raw.onMessage((msg, size = 0) => {
+            if (conn.handler) { conn.handler(msg); return; }
+            if (size > LOBBY_MESSAGE_MAX) { this.#drop(conn); return; }
+            this.#lobbyMessage(conn, msg);
+        });
+        raw.onClose(() => { this.#lobby.delete(conn); for (const fn of conn.closers) { try { fn(); } catch { /* its fault */ } } if (conn.code) this.#changed(); });
+        return true;
+    }
+    #drop(conn) { this.#lobby.delete(conn); try { conn.raw.close(); } catch { /* gone */ } }
+
+    #lobbyMessage(conn, msg) {
+        if (!msg || typeof msg !== 'object') return;
+        if (msg.t === 'ping') { conn.raw.send({ t: 'pong' }); return; }
+        if (msg.t === 'tabs') { conn.tabs = msg; return; }
+        if (msg.t === 'pair') {
+            const code = typeof msg.code === 'string' ? msg.code.trim() : '';
+            if (/^[0-9A-Za-z-]{4,32}$/.test(code)) { conn.code = code; this.#changed(); }
+            return;
+        }
+        if (msg.t === 'hello' && typeof msg.token === 'string' && msg.token) {
+            const h = hash(msg.token);
+            const all = this.#tokens.get();
+            const id = Object.keys(all).find((k) => (all[k] ?? []).includes(h));
+            if (id && this.#targets().some((t) => t.id === id)) { this.#hand(conn, id, [msg]); return; }
+            conn.raw.send({ t: 'pair-needed' });
+        }
+    }
+
+    /* The socket leaves the lobby for its browser's connector, what it said replayed there. */
+    #hand(conn, id, said) {
+        this.#lobby.delete(conn);
+        conn.taken = true;
+        const channel = { send: (o) => conn.raw.send(o), onMessage: (fn) => { conn.handler = fn; }, onClose: (fn) => { conn.closers.add(fn); }, close: () => { try { conn.raw.close(); } catch { /* gone */ } } };
+        const i = this.#of(id);
+        i.accept(channel);
+        for (const m of said) conn.handler?.(m);
+        if (conn.tabs) conn.handler?.(conn.tabs);
+        return i;
+    }
+
+    /* Is a browser waiting with a code (the page says so while the person types it)? */
+    waiting() { return [...this.#lobby].filter((c) => c.code).length; }
+
+    /* THE PERSON TYPED THE CODE: { code, name?, target? } -> the target, made (or the same one, paired again). */
+    pair({ code, name = '', target = '' } = {}) {
+        const now = this.#now();
+        this.#wrong = this.#wrong.filter((t) => now - t < WRONG_WINDOW_MS);
+        if (this.#wrong.length >= WRONG_MAX) throw new Refusal(429, 'Too many wrong codes. Wait a few minutes.');
+        const given = String(code ?? '').replace(/\s+/g, '');
+        if (!given) throw new Refusal(400, 'Type the code the extension shows.');
+        const offered = [...this.#lobby].filter((c) => c.code === given);
+        if (offered.length !== 1) {
+            this.#wrong.push(now);
+            this.#log(`browser: a pairing code was refused (${offered.length ? 'offered twice' : 'unknown'})`);
+            /* Two sockets with one code: neither is trusted. */
+            for (const c of offered) this.#drop(c);
+            throw new Refusal(400, offered.length ? 'That code was offered twice. Open the popup again.' : 'No browser shows that code. Check it, and the address.');
+        }
+        const store = this.#store();
+        let t;
+        if (target) {
+            t = store.target(String(target));
+            if (!t || t.kind !== 'browser') throw new Refusal(404, 'No such browser.');
+            /* Paired again: its old tokens go, the old socket too. */
+            this.forget(t.id, { keepTarget: true });
+        } else {
+            const title = String(name ?? '').trim().slice(0, TITLE_MAX) || 'Browser';
+            const base = `browser-${slug(title) || 'browser'}`;
+            let id = base;
+            for (let n = 2; store.target(id); n++) id = `${base}-${n}`;
+            t = store.putTarget({ id, title, kind: 'browser', connector: 'browser', config: {} });
+        }
+        const [conn] = offered;
+        const i = this.#hand(conn, t.id, [{ t: 'pair', code: given }]);
+        i.pair(given);
+        this.#log(`browser: ${t.id} paired`);
+        this.#changed();
+        return { id: t.id, title: t.title, kind: 'browser' };
+    }
+
+    /* THE SITES A CONVERSATION MAY ACT ON WITHOUT ASKING, at frame (« Encadrer »): Tether's site rules on its grant,
+       replaced by this list (one host each, *.host allowed). Empty: nothing runs freely. -> the list kept. */
+    async setSites(tethers, { target, agent, sites } = {}) {
+        const t = this.#store().target(String(target ?? ''));
+        if (!t || t.kind !== 'browser') throw new Refusal(404, 'No such browser.');
+        const who = String(agent ?? '');
+        if (!/^conversation:./.test(who)) throw new Refusal(400, 'Sites are given to a conversation.');
+        const g = t.grants?.[who];
+        if (!g) throw new Refusal(400, 'Give it the browser first.');
+        const given = (Array.isArray(sites) ? sites : String(sites ?? '').split(/[\n,]+/)).map((x) => String(x).trim()).filter(Boolean);
+        if (given.length > SITES_MAX) throw new Refusal(400, `${SITES_MAX} sites at most.`);
+        const want = [];
+        for (const x of given) {
+            const v = x.toLowerCase().replace(/^https?:\/\//, '').replace(/[/?#].*$/, '').replace(/:\d+$/, '').replace(/\.$/, '');
+            if (!/^(\*\.)?[a-z0-9-]+(\.[a-z0-9-]+)*$/.test(v)) throw new Refusal(400, `Not a site: ${x.slice(0, 80)}. A host, or *.host.`);
+            if (!want.includes(v)) want.push(v);
+        }
+        const had = (g.rules ?? []).filter((r) => r.kind === 'site').map((r) => r.value);
+        for (const v of had) if (!want.includes(v)) { const r = await tethers.act('unallow', { target: t.id, agent: who, rule: { kind: 'site', value: v } }, ''); if (!r.ok) throw new Refusal(400, r.text); }
+        for (const v of want) if (!had.includes(v)) { const r = await tethers.act('allow', { target: t.id, agent: who, rule: { kind: 'site', value: v } }, ''); if (!r.ok) throw new Refusal(400, r.text); }
+        return { sites: (this.#store().target(t.id).grants?.[who]?.rules ?? []).filter((r) => r.kind === 'site').map((r) => r.value) };
+    }
+
+    /* Wrong codes counted now (the tests; the page says only that it must wait). */
+    wrongCodes() { const now = this.#now(); return this.#wrong.filter((t) => now - t < WRONG_WINDOW_MS).length; }
+
+    status(id) {
+        const s = this.#inst.get(id)?.status();
+        return { connected: !!s?.connected, tabs: (s?.tabs ?? []).map((x) => ({ id: x.id, title: x.title, url: x.url, site: x.site })) };
+    }
+    /* Every browser's state, for the page: { id: { connected, tabs } }. */
+    all() { return Object.fromEntries(this.#targets().map((t) => [t.id, this.status(t.id)])); }
+
+    /* A browser removed (or paired again): its tokens and its socket go. */
+    forget(id, { keepTarget = false } = {}) {
+        const all = this.#tokens.get();
+        if (all[id]) { delete all[id]; this.#tokens.set(all); }
+        const i = this.#inst.get(id);
+        if (i) { try { i.shutdown(); } catch { /* gone */ } this.#inst.delete(id); }
+        if (!keepTarget) this.#log(`browser: ${id} unpaired`);
+        this.#changed();
+    }
+
+    #sweep() {
+        const now = this.#now();
+        for (const c of [...this.#lobby]) if (now - c.since > LOBBY_MS) this.#drop(c);
+        for (const [a, list] of this.#connects) { const keep = list.filter((t) => now - t < 60_000); if (keep.length) this.#connects.set(a, keep); else this.#connects.delete(a); }
+    }
+
+    /* THE ENDPOINT on this server: a WebSocket at BROWSER_PATH. No sign-in is looked at (the front lets /c/ through
+       without one); the token said on the socket is the right. */
+    attach(server, WebSocketServer) {
+        const wss = new WebSocketServer({ noServer: true, maxPayload: MESSAGE_MAX });
+        server.on('upgrade', (request, socket, head) => {
+            const { pathname } = new URL(request.url ?? '/', 'http://local');
+            if (pathname !== BROWSER_PATH) return;
+            const address = addressOf(request);
+            wss.handleUpgrade(request, socket, head, (ws) => this.accept(channelOf(ws), address));
+        });
+        return wss;
+    }
+
+    shutdown() {
+        clearInterval(this.#timer);
+        for (const i of this.#inst.values()) { try { i.shutdown(); } catch { /* gone */ } }
+        this.#inst.clear();
+        for (const c of [...this.#lobby]) this.#drop(c);
+    }
+}
+
+/* A `ws` socket as a channel: JSON each way, each message's size given with it. */
+export function channelOf(ws) {
+    return {
+        send: (obj) => { if (ws.readyState === 1) ws.send(JSON.stringify(obj)); },
+        onMessage: (fn) => ws.on('message', (data, binary) => { if (binary) return; let m; try { m = JSON.parse(String(data)); } catch { return; } fn(m, data.length ?? 0); }),
+        onClose: (fn) => ws.on('close', () => fn()),
+        close: () => { try { ws.close(); } catch { /* gone */ } },
+    };
+}

package/server/demandes.mjs

@@ -60,6 +60,55 @@ function mcpCard(c, v, sub) {
     v.irreversible = cls === 'destructive';
 }
 
+/* AN ACT IN A PERSON'S BROWSER (Tether's card { kind: 'browser', action, url?, selector?, text?, key? }, and what the
+ * browser connector adds in card.about: the tab by its title and address, the script, the point, the drag; browsers.mjs).
+ * Which tab, on which site, and what will be done there; a script shown whole, said to run with the page's own rights
+ * (irreversible: never in Accept all). Parley has words only for Open: the others carry their English (`t`). */
+const BROWSER_SAID = {
+    click: ['req-browser-click', 'Click in the tab {tab}', 'click'],
+    type: ['req-browser-type', 'Type in the tab {tab}', 'type'],
+    key: ['req-browser-key', 'Press {key} in the tab {tab}', 'press'],
+    scroll: ['req-browser-scroll', 'Scroll in the tab {tab}', 'scroll'],
+    drag: ['req-browser-drag', 'Drag in the tab {tab}', 'drag'],
+    eval: ['req-browser-eval', 'Run a script in {tab}', 'run'],
+};
+/* Parley says Run and Type; the others, here. */
+const YES_SAID = { click: 'Click', press: 'Press', scroll: 'Scroll', drag: 'Drag' };
+function browserCard(c, about, v, sub, where) {
+    const tab = about.tab ?? null;
+    const site = String(tab?.site || (() => { try { return new URL(tab?.url ?? '').hostname; } catch { return ''; } })());
+    const tabName = tab ? String(tab.title || site || tab.url || '').slice(0, 80) : '';
+    const it = tabName ? `« ${tabName} »` : '';
+    if (c.action === 'open') {
+        v.title = w('req-browser-open', { url: String(c.url ?? '') }); v.yes = 'open';
+        if (where) sub.push(where);
+        if (tab) v.facts.push([said('req-fact-tab', 'Tab'), tabName]);
+        return;
+    }
+    const [k, t, yes] = BROWSER_SAID[c.action] ?? ['req-browser-act', 'Act in the tab {tab}', 'accept'];
+    const key = String(c.key ?? about.key ?? '');
+    /* No tab named: the one the AI is in (the extension's last), said so. */
+    const plain = it ? t : t.replace(/(the tab )?\{tab\}/, 'the active tab');
+    v.title = said(it ? k : `${k}-active`, plain.replace('{key}', key).replace('{tab}', it), it || c.action === 'key' ? { ...(it ? { tab: it } : {}), ...(c.action === 'key' ? { key } : {}) } : undefined);
+    v.yes = yes;
+    if (yes in YES_SAID) v.yesSaid = said(`req-yes-${yes}`, YES_SAID[yes]);
+    if (site) sub.push(site);
+    if (where) sub.push(where);
+    if (tab?.url) v.facts.push([said('req-fact-page', 'Page'), String(tab.url)]);
+    const selector = String(c.selector ?? about.selector ?? '');
+    if (selector) v.facts.push([said('req-fact-element', 'Element'), selector]);
+    if (c.action === 'click' && !selector && about.x !== undefined) v.facts.push([said('req-fact-point', 'Point'), `${about.x}, ${about.y ?? 0}`]);
+    if (c.action === 'scroll') v.facts.push([said('req-fact-by', 'By'), `${about.dx ?? 0}, ${about.dy ?? 0}`]);
+    if (c.action === 'drag') { v.before = [String(about.from ?? '')]; v.after = [String(about.to ?? '')]; }
+    if (c.action === 'type' && c.text !== undefined) v.quote = String(c.text);
+    if (c.action === 'eval') {
+        const script = String(about.script ?? '');
+        if (script) v.code = script;
+        v.risk.push(said('req-risk-script', 'Has this page\'s rights: it can do anything there'));
+        v.irreversible = true;
+    }
+}
+
 export function demandeView(q) {
     const c = q?.card ?? {}; const about = c.about ?? {};
     const kind = KINDS.has(c.kind) ? c.kind : 'other';
@@ -179,7 +228,7 @@ export function demandeView(q) {
         else if (c.path) v.facts.push(fact('path', String(c.path)));
         v.yes = c.action === 'delete' ? 'delete' : c.action === 'move' ? 'move' : 'write';
         if (c.action === 'delete') { v.irreversible = true; v.risk.push(w('req-risk-final')); }
-    } else if (c.kind === 'browser' && c.action === 'open') { v.title = w('req-browser-open', { url: String(c.url) }); v.yes = 'open'; if (where) sub.push(where); }
+    } else if (c.kind === 'browser') browserCard(c, about, v, sub, where);
     else if (c.kind === 'mcp') mcpCard(c, v, sub);
     else { v.title = `${q?.verb ?? 'action'}${q?.detail ? ` ${q.detail}` : ''}`; if (where) sub.push(where); }
     const id = String(q?.id ?? '');
@@ -192,7 +241,7 @@ export function demandeView(q) {
         /* The technical line, in "See all" only. */
         detail: [q?.verb, q?.detail].filter(Boolean).join(' — '),
         irreversible: v.irreversible,
-        yes: { id: `allow:${id}`, label: w(`req-yes-${v.yes}`) }, no: { id: `deny:${id}`, label: w('req-no') },
+        yes: { id: `allow:${id}`, label: v.yesSaid ?? w(`req-yes-${v.yes}`) }, no: { id: `deny:${id}`, label: w('req-no') },
         /* "Always allow ...": behind "⋯", as before. */
         ...(q?.rule ? { others: [{ id: `always:${id}`, label: q.rule.value ? w('req-always', { what: String(q.rule.value) }) : w('req-always-this') }] } : {}),
         hold: HOLD_S,

package/server/main.mjs

@@ -73,6 +73,7 @@ import { Wifi } from './wifi.mjs';
 import { MeshCentral } from './meshcentral.mjs';
 import { Binders } from './binders.mjs';
 import { Tethers } from './tethers.mjs';
+import { Browsers } from './browsers.mjs';
 import { Accounts } from './accounts.mjs';
 import { ServerLogs } from './serverlogs.mjs';
 import { History, STEP_MS as HISTORY_STEP_MS } from './history.mjs';
@@ -475,7 +476,10 @@ export async function startHome({ port, host, dataDir, mntDir = dataDir, gitRese
        mailbox, a calendar, an address book -- held here with their secrets read from
        the vault by name, never in a machine: see tethers.mjs. */
     /* Voice boxes are Tether targets too (boxes.mjs): their connector reaches them through `boxes`, made below. */
-    const tethers = new Tethers({ dataDir, resources: folders, conversations: () => all.list().map((c) => c.name), secrets, dockets, connectors: { voicebox: { run: (...a) => voiceboxConnector(boxes).run(...a) }, ...(tetherConnectors ?? {}) } });
+    /* A person's own browser, paired through the Tether extension, which connects out to this server (browsers.mjs). */
+    let tethers = null;
+    const browsers = new Browsers({ dataDir, store: () => tethers?.store(), log: (line) => console.log(line) });
+    tethers = new Tethers({ dataDir, resources: folders, conversations: () => all.list().map((c) => c.name), secrets, dockets, browsers, connectors: { voicebox: { run: (...a) => voiceboxConnector(boxes).run(...a) }, ...(tetherConnectors ?? {}) } });
     const stopTethers = tethers.start();
     /* Connecting a mailbox, calendar or address book by token: the consent happens
        in the owner's browser, the refresh token is kept host-only (never in a
@@ -794,6 +798,7 @@ export async function startHome({ port, host, dataDir, mntDir = dataDir, gitRese
     server.on('close', () => { closing = true; stopBinders(); stopTethers(); clearInterval(historyTimer); clearInterval(secretsTimer); history.save(); stopVmWatch(); stopShelf(); stopHealth(); stopNetworkWatch(); stopUpdates(); stopWatch(); clearInterval(mailTimer); clearInterval(restartTimer); clearInterval(expiryTimer); clearInterval(answerTimer); clearInterval(wakeTimer); clearInterval(docketTimer); dockets.stop(); clearInterval(gitTimer); talk.stop(); });
     let closing = false;
     boxes.attach(server, WebSocketServer);
+    browsers.attach(server, WebSocketServer); server.on('close', () => browsers.shutdown());
     /* The wake word's weekly threshold tuning (Sunday from 03:00, each box's own time): looked at every 10 minutes. */
     const wakeWeekly = setInterval(() => { try { boxes.wakeWeekly(); } catch (error) { console.error(`wake tuning: ${error.message}`); } }, 10 * 60_000); wakeWeekly.unref?.(); server.on('close', () => clearInterval(wakeWeekly));
     /* A collect session's clock: the stations asked, its end, the speaker told to stop (boxcollect.mjs). */

package/server/settingswords.mjs

@@ -171,6 +171,26 @@ export const SETTINGS_WORDS_FR = {
     'set-rt-mcp-hint-none': 'Pas donné', 'set-rt-mcp-hint-watch': 'Ses outils en lecture seule',
     'set-rt-mcp-hint-propose': 'Tous les outils, chaque modification approuvée', 'set-rt-mcp-hint-free': 'Tous les outils ; suppressions demandées',
     'set-rt-mcp-hint-frame': 'Votre choix pour chaque sorte d\'outil',
+    /* A browser paired through the Tether extension (browsers.mjs): the form, its panel, Frame's sites. */
+    'set-na-k-browser': 'Navigateur', 'set-br-head': 'Associer un navigateur',
+    'set-br-step-install': 'Installez l\'extension Tether.', 'set-br-step-address': 'Dans sa fenêtre, mettez l\'adresse ci-dessous.',
+    'set-br-step-code': 'Tapez ici le code qu\'elle affiche.', 'set-br-address': 'Adresse pour l\'extension', 'set-br-copy': 'Copier', 'set-br-copied': 'Copié',
+    'set-br-name': 'Nom', 'set-br-code': 'Code', 'set-br-pair': 'Associer', 'set-br-pair-again': 'Associer à nouveau', 'set-br-pairing': 'Association',
+    'set-br-connected': 'Connecté · {n} onglet(s) donné(s)', 'set-br-offline': 'Non connecté : ouvrez ce navigateur',
+    'set-br-tabs': 'Onglets', 'set-br-no-tabs': 'Aucun onglet donné : voyez sa fenêtre.',
+    'set-br-frame': 'Encadrer : sites', 'set-br-sites': 'Sites autorisés (un par ligne, *.exemple.fr)',
+    'set-br-sites-hint': 'Autres sites : demandé à chaque fois.', 'set-br-save': 'Enregistrer', 'set-br-saved': 'Enregistré.',
+    /* Its approval cards (demandes.mjs), said by the chat screen too. */
+    'req-browser-click': 'Cliquer dans l\'onglet {tab}', 'req-browser-click-active': 'Cliquer dans l\'onglet actif',
+    'req-browser-type': 'Écrire dans l\'onglet {tab}', 'req-browser-type-active': 'Écrire dans l\'onglet actif',
+    'req-browser-key': 'Appuyer sur {key} dans l\'onglet {tab}', 'req-browser-key-active': 'Appuyer sur {key} dans l\'onglet actif',
+    'req-browser-scroll': 'Défiler dans l\'onglet {tab}', 'req-browser-scroll-active': 'Défiler dans l\'onglet actif',
+    'req-browser-drag': 'Glisser dans l\'onglet {tab}', 'req-browser-drag-active': 'Glisser dans l\'onglet actif',
+    'req-browser-eval': 'Exécuter un script dans {tab}', 'req-browser-eval-active': 'Exécuter un script dans l\'onglet actif',
+    'req-browser-act': 'Agir dans l\'onglet {tab}', 'req-browser-act-active': 'Agir dans l\'onglet actif',
+    'req-risk-script': 'Droits de la page : il peut tout y faire',
+    'req-fact-tab': 'Onglet', 'req-fact-page': 'Page', 'req-fact-element': 'Élément', 'req-fact-point': 'Point', 'req-fact-by': 'De',
+    'req-yes-click': 'Cliquer', 'req-yes-press': 'Appuyer', 'req-yes-scroll': 'Défiler', 'req-yes-drag': 'Glisser',
     'set-cx-ssh': 'machine', 'set-cx-computer': 'ordinateur', 'set-cx-browser': 'navigateur', 'set-cx-screen': 'écran', 'set-cx-device': 'appareil',
     'set-acc-share': 'Partager avec un appareil…', 'set-acc-in-assets': 'Ouvrir dans Assets',
     'set-acc-used-1': 'Utilisé par 1 conversation : mettez « Aucun »', 'set-acc-used-n': 'Utilisé par {n} conversations : mettez « Aucun »',

package/server/tethers.mjs

@@ -16,8 +16,9 @@
  * that must be decided waits, and the person decides it.
  *
  * The SSH and online-folder connectors are wired by the keeper itself (each a client that holds
- * nothing until a target asks it to connect). The screen and browser connectors, which need an engine
- * or a paired socket, are wired in a later step.
+ * nothing until a target asks it to connect). The browser connector needs a paired socket: the
+ * extension connects out to this server (browsers.mjs, `browsers`), each paired browser a target of
+ * its own. The screen connector, which needs an engine, is wired in a later step.
  */
 import { mkdirSync, lstatSync } from 'node:fs';
 import { keeper } from 'clavarium-tether/host';
@@ -110,7 +111,10 @@ export class Tethers {
     /* `resources`: Resources (workFolder). `conversations()`: the names of the conversations.
        `secrets`: the vault, read by name for a connector only (reveal). `dockets`: { on(name), post(name,
        {kind, text, data}) } (dockets.mjs): what wakes an agent told of a notice. `make`: the keeper (tests). */
-    constructor({ dataDir, resources, conversations, secrets, connectors, dockets = null, now = () => Date.now(), make = keeper }) {
+    /* `browsers`: the paired browsers (browsers.mjs), set by the constructor when it is given one; their connector is the keeper's `browser`. */
+    browsers = null;
+    constructor({ dataDir, resources, conversations, secrets, connectors, browsers = null, dockets = null, now = () => Date.now(), make = keeper }) {
+        if (browsers) { connectors = { ...(connectors ?? {}), browser: browsers.connector }; this.browsers = browsers; }
         this.#resources = resources; this.#conversations = conversations; this.#secrets = secrets; this.#dockets = dockets;
         this.#offered = new JsonFile(`${dataDir}/tether-offered.json`, []);
         this.#noticed = new JsonFile(`${dataDir}/tether-notices-seen.json`, []);
@@ -127,6 +131,8 @@ export class Tethers {
                when it ends (ok, or its error). */
             if (what?.journal) this.#tellResult(what.journal);
         });
+        /* A browser connected, gone, or its granted tabs changed: the page reads again. */
+        browsers?.onChange(() => { this.#changes++; });
         /* A device plugged into the owner's computer: one target, always there, flashed from the
            owner's browser (Tether's device connector). The owner gives it to a conversation as any other. */
         try {

package/web/app.js

@@ -3853,7 +3853,7 @@
         line.append(summary, el('pre', '', rest));
         return line;
     }
-    const kindIcon = (kind) => { const name = kind === 'send' || kind === 'demandes' ? 'arrow-up' : kind === 'box' ? 'mic' : kind === 'device' ? 'smartphone' : kind === 'mcp' ? 'link' : ASSET_KINDS.find((k) => k[0] === kind)?.[2]; const holder = el('span', 'as-ic'); holder.dataset.kind = kind; const svg = kind === 'list' ? listIcon() : name ? window.clavariumIcons?.icon(name) : null; if (svg) holder.append(svg); return holder; };
+    const kindIcon = (kind) => { const name = kind === 'send' || kind === 'demandes' ? 'arrow-up' : kind === 'box' ? 'mic' : kind === 'device' ? 'smartphone' : kind === 'mcp' ? 'link' : kind === 'browser' ? 'globe' : ASSET_KINDS.find((k) => k[0] === kind)?.[2]; const holder = el('span', 'as-ic'); holder.dataset.kind = kind; const svg = kind === 'list' ? listIcon() : name ? window.clavariumIcons?.icon(name) : null; if (svg) holder.append(svg); return holder; };
     /* A list (Binder's): the set has no such sign, so it is drawn here, in its style. */
     function listIcon() {
         const SVG = 'http://www.w3.org/2000/svg';
@@ -5025,7 +5025,7 @@
     const newKinds = () => [['folder', uiSaid('set-na-k-folder', 'Folder')], ['git', uiSaid('set-na-k-git', 'Git repository')], ['mailbox', uiSaid('set-na-k-mailbox', 'Mailbox')],
         ['agenda', uiSaid('set-na-k-agenda', 'Calendar')], ['contacts', uiSaid('set-na-k-contacts', 'Contacts')], ['secret', uiSaid('set-na-k-secret', 'Secret')], ['list', uiSaid('set-na-k-list', LISTS_WORD.one)],
         /* Step 4: a voice box (paired with a code) and a device (the share sheet, its code) are two kinds of it too. */
-        ['box', uiSaid('set-na-k-box', 'Voice box')], ['device', uiSaid('set-na-k-device', 'Device')], ['mcp', uiSaid('set-na-k-mcp', 'MCP server')]]
+        ['box', uiSaid('set-na-k-box', 'Voice box')], ['device', uiSaid('set-na-k-device', 'Device')], ['mcp', uiSaid('set-na-k-mcp', 'MCP server')], ['browser', uiSaid('set-na-k-browser', 'Browser')]]
         .map(([kind, label]) => ({ kind, label, icon: kindIcon(kind) }));
     /* A voice box's steps after its kind (the flow: "A NEW VOICE BOX", with the boxes), and the one under way. */
     const BOX_STEPS = ['where', 'plug', 'pair'];
@@ -5056,6 +5056,7 @@
                 const form = $(`${addForm(kind)}-box`); form.hidden = false;
                 if (kind === 'git') { fillKeyChoice(); showVia(); }
                 if (kind === 'list') void fillTemplates();
+                if (kind === 'browser') $('browser-address').value = browserAddress();
                 return form;
             },
         });
@@ -5190,6 +5191,59 @@
         }
         return out;
     }
+    /* A BROWSER PAIRED THROUGH THE TETHER EXTENSION (browsers.mjs): connected or not, the tabs its person granted (all an
+       AI can touch), the address the extension connects to, « Pair again »; then, for each conversation at Frame, the
+       sites it acts on without asking. */
+    const browserAddress = () => `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/c/api/browser`;
+    function browserParts(t, tether = {}) {
+        const out = [];
+        const now = tether.browsers?.[t.id] ?? { connected: false, tabs: [] };
+        const state = el('p', now.connected ? 'hint br-on' : 'hint br-off', now.connected
+            ? uiSaid('set-br-connected', 'Connected · {n} tab(s) granted', { n: now.tabs.length }) : uiSaid('set-br-offline', 'Not connected: open that browser'));
+        state.dataset.act = 'browser-state';
+        const list = el('ul', 'br-tabs');
+        for (const x of now.tabs) { const li = el('li', '', x.title || x.url || String(x.id)); li.title = x.url ?? ''; list.append(li); }
+        const body = [state];
+        body.push(now.tabs.length ? list : el('p', 'hint', uiSaid('set-br-no-tabs', 'No tab granted: grant them in its popup.')));
+        out.push({ title: uiSaid('set-br-tabs', 'Tabs'), body, cls: 'as-br-tabs' });
+        /* Paired again (the extension reinstalled, its pairing reset): its new code, the same asset. */
+        const again = el('div', 'br-again');
+        const code = el('input'); code.inputMode = 'numeric'; code.autocomplete = 'off'; code.placeholder = uiSaid('set-br-code', 'Code'); code.setAttribute('aria-label', uiSaid('set-br-code', 'Code'));
+        const go = el('button', '', uiSaid('set-br-pair-again', 'Pair again')); go.type = 'button'; go.dataset.act = 'browser-pair-again';
+        go.addEventListener('click', async () => {
+            go.disabled = true; $(asErrId()).hidden = true;
+            try { await post(`${API}/tether/browser-pair`, { code: code.value.trim(), target: t.id }); } catch (error) { sayAsErr(error); }
+            go.disabled = false; await repaintAsset();
+        });
+        again.append(el('p', 'hint br-address', browserAddress()), code, go);
+        out.push({ title: uiSaid('set-br-pairing', 'Pairing'), body: [again], cls: 'as-br-pair' });
+        /* Frame: the sites each conversation acts on without a card (Tether's site rules). Empty: everything asked. */
+        const framed = Object.entries(t.grants ?? {}).filter(([id, g]) => id.startsWith('conversation:') && g?.level === 'frame');
+        if (framed.length) {
+            const rows = framed.map(([id, g]) => {
+                const name = id.slice('conversation:'.length);
+                const box = el('div', 'br-sites'); box.dataset.conversation = name;
+                const who = conversations.find((c) => c.name === name);
+                const lab = el('label', '', uiSaid('set-br-sites', 'Allowed sites (one per line, *.example.com)'));
+                const ta = el('textarea'); ta.rows = 3; ta.spellcheck = false; ta.autocapitalize = 'off'; ta.placeholder = 'shop.example.com\n*.example.org';
+                ta.value = (g.rules ?? []).filter((r) => r.kind === 'site').map((r) => r.value).join('\n');
+                const id2 = `br-sites-${t.id}-${name}`.replace(/[^a-zA-Z0-9-]/g, '-'); ta.id = id2; lab.htmlFor = id2;
+                const save = el('button', '', uiSaid('set-br-save', 'Save')); save.type = 'button'; save.dataset.act = 'browser-sites';
+                const said = el('small', 'hint');
+                save.addEventListener('click', async () => {
+                    save.disabled = true; $(asErrId()).hidden = true;
+                    try { const r = await post(`${API}/tether/browser-sites`, { target: t.id, agent: id, sites: ta.value.split('\n') }); ta.value = (r.sites ?? []).join('\n'); said.textContent = uiSaid('set-br-saved', 'Saved.'); }
+                    catch (error) { sayAsErr(error); }
+                    save.disabled = false;
+                });
+                const row = el('div', 'row'); row.append(save, said);
+                box.append(el('b', '', (who && shownName(who)) || name), lab, ta, el('p', 'hint', uiSaid('set-br-sites-hint', 'Other sites: asked each time.')), row);
+                return box;
+            });
+            out.push({ title: uiSaid('set-br-frame', 'Frame: sites'), body: rows, cls: 'as-br-frame' });
+        }
+        return out;
+    }
     /* `detail`: where it is drawn. `from`: the conversation it is seen from ('' : the menu). `back`: the way back (a phone).
        `tether`, `groups`: as the page read them. `gits`: the conversation's repositories (To send, beside). */
     async function assetPanel(detail, chosen, { from = '', back, tether = {}, groups = [], gits = [], stale = () => false } = {}) {
@@ -5276,6 +5330,7 @@
                 parts.push(box);
             }
             if (t.kind === 'mcp') parts.push(...mcpParts(t));
+            if (t.kind === 'browser') parts.push(...browserParts(t, tether));
             if (chosen.siblings?.length) {
                 const a = el('p', 'as-assoc hint');
                 a.append(el('b', '', 'Linked'), document.createTextNode(` to the same account: ${chosen.siblings.join(', ')}. They share the account's sign-in (kept on the server); rights are given separately.`));
@@ -8886,6 +8941,24 @@
         btn.disabled = false;
         await paintAssets();
     });
+    /* PAIR A BROWSER (browsers.mjs): the code the Tether extension's popup shows, once; it reconnects by itself after. */
+    $('browser-new').addEventListener('submit', async (event) => {
+        event.preventDefault();
+        $('browser-error').hidden = true;
+        const btn = $('browser-pair'); btn.disabled = true;
+        try {
+            const made = await post(`${API}/tether/browser-pair`, { name: $('browser-name').value.trim(), code: $('browser-code').value.trim() });
+            $('browser-new').reset();
+            await assetMade($('browser-box'), { key: `connexion:${made.id}`, name: made.title, give: (to, level) => grantTarget(made.id, to, targetLevel(level)) });
+        } catch (error) { $('browser-error').textContent = error.message; $('browser-error').hidden = false; }
+        btn.disabled = false;
+        await paintAssets();
+    });
+    $('browser-address').value = browserAddress();
+    $('browser-copy').addEventListener('click', async () => {
+        try { await navigator.clipboard.writeText($('browser-address').value); $('browser-copy').textContent = uiSaid('set-br-copied', 'Copied'); }
+        catch { $('browser-address').select(); }
+    });
     $('mcp-import').addEventListener('click', async () => {
         $('mcp-error').hidden = true;
         const btn = $('mcp-import'); btn.disabled = true;

package/web/index.html

@@ -882,6 +882,19 @@
             <p id="mcp-error" class="error" role="alert" hidden></p>
           </form>
           </div>
+          <div id="browser-box" class="as-form" data-kind="browser"><h3 data-said="set-br-head">Pair a browser</h3>
+          <ol class="hint br-steps"><li data-said="set-br-step-install">Install the Tether extension.</li><li data-said="set-br-step-address">In its popup, set the address below.</li><li data-said="set-br-step-code">Type here the code it shows.</li></ol>
+          <form id="browser-new" autocomplete="off">
+            <label for="browser-address" data-said="set-br-address">Address for the extension</label>
+            <div class="row"><input id="browser-address" readonly spellcheck="false"><button type="button" id="browser-copy" data-said="set-br-copy">Copy</button></div>
+            <label for="browser-name" data-said="set-br-name">Name</label>
+            <input id="browser-name" maxlength="80" spellcheck="false" placeholder="Laptop · Firefox">
+            <label for="browser-code" data-said="set-br-code">Code</label>
+            <input id="browser-code" inputmode="numeric" autocomplete="off" maxlength="32" placeholder="123456" required>
+            <div class="row"><button type="submit" id="browser-pair" class="primary" data-said="set-br-pair">Pair</button></div>
+            <p id="browser-error" class="error" role="alert" hidden></p>
+          </form>
+          </div>
           <div id="list-box" class="as-form" data-kind="list"><h3 id="listnew-head">New binder</h3>
         <form id="list-new" autocomplete="off">
           <label for="listnew-template">Template</label>

package/web/style.css

@@ -2171,6 +2171,16 @@ details.commit > pre { margin: 6px 0 0 1.6em; white-space: pre-wrap; overflow-wr
 .mcp-custom { display: flex; flex-direction: column; gap: 4px; margin: .4rem 0 .8rem; }
 .mcp-custom-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
 #mcp-config { width: 100%; font: .8125rem var(--mono, monospace); }
+/* A paired browser (app.js browserParts): its granted tabs, the address, Frame's sites per conversation. */
+.br-steps { margin: .2rem 0 .6rem; padding-left: 1.3rem; }
+#browser-address, .br-address { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--mono, monospace); }
+.br-tabs { list-style: none; margin: .3rem 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
+.br-tabs li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 0; border-bottom: 1px solid var(--line); }
+.br-on { color: var(--ok, inherit); }
+.br-again { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.br-again input { width: 8em; }
+.br-sites { display: flex; flex-direction: column; gap: 4px; margin: .4rem 0 .8rem; }
+.br-sites textarea { width: 100%; font: .8125rem var(--mono, monospace); }
 .as-drag-ghost { position: fixed; z-index: 90; pointer-events: none; opacity: .9; box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); border-radius: 10px; background: var(--panel); }
 .kit-aslist-group.as-drop-over { outline: 2px dashed var(--brass); outline-offset: 2px; border-radius: 10px; background: color-mix(in srgb, var(--brass) 7%, transparent); }
 body.as-dragging { user-select: none; -webkit-user-select: none; }