fedipod-server 0.9.0 → 0.11.0

package/web/admin/bar.css

@@ -4,18 +4,9 @@
    page's left edge and the buttons over its right rather than out at the window
    borders. `width: 100%` with `box-sizing: border-box` keeps the padding inside
    that 960 instead of adding to it, which is what makes the two margins equal. */
-/* Phanpy's own colours, read off the running client. --surface is the one you
-   see behind Phanpy — its --bg-faded-color — and that is the PAGE. --raised is
-   Phanpy's --bg-color, and that is the bar sitting on top of it. Declared here
-   because bar.css is on all three pages, so they cannot drift. */
-:root { --surface: #f0f2f5; --raised: #fff;
-  --ink: #1b1c1e; --field-bg: #ffffff; --field-bg-hover: #f7f4ee; --field-edge: #767676;
-  --chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23444444' stroke-width='1.6' stroke-linecap='round'/></svg>"); }
-@media (prefers-color-scheme: dark) {
-  :root { --surface: #18191a; --raised: #242526;
-    --ink: #e8eaed; --field-bg: #383d44; --field-bg-hover: #40464e; --field-edge: #9aa0a6;
-    --chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23dddddd' stroke-width='1.6' stroke-linecap='round'/></svg>"); }
-}
+/* Colours come from tokens.css (the front's palette), linked by every page
+   before this file, so the bar matches the front and the record rather than
+   Phanpy: --surface is the page ground, --raised the bar band on top of it. */
 body { background: var(--surface); }
 /* The BAND spans the window; its CONTENTS stay in the 960 column. Constraining
    the element itself left the colour as a stripe with bare page either side.
@@ -51,8 +42,13 @@ body { background: var(--surface); }
 #bar select:hover { background-color: var(--field-bg-hover); }
 /* The app title, in px rather than rem: it is chrome, the same on every page,
    not something that should move when a page changes its base size. */
-#bar .name { flex: 1 1 auto; font-weight: 600; font-size: 24px; color: var(--heading);
+#bar .name { flex: 1 1 auto; font-weight: 600; font-size: 40px; color: var(--heading);
   margin: 0; line-height: 1.1; }
+/* The browser build wraps the brand text in a link (to /?add) — the general
+   #bar a rule below would otherwise pin it back down to nav-link size and
+   colour, since a rule on the anchor itself always wins over inheriting the
+   heading's size. */
+#bar .name a { font: inherit; color: inherit; text-decoration: none; }
 /* Plain text, not chrome: three destinations in a row read better without a
    box round each. */
 #bar button, #bar a { font: inherit; font-size: .95rem; padding: .15rem .2rem;

package/web/admin/bar.js

@@ -17,7 +17,7 @@
   // open windows apart without putting the handle in the page twice.
   // /status, not /config: an agent that is not set up yet answers this one and
   // 409s the other, which logged a failed request on every setup page.
-  fetch(location.pathname.replace(/\/admin\/.*$/u, '') + '/status').then(r => (r.ok ? r.json() : null)).then((s) => {
+  fetch(location.pathname.replace(/\/admin\/.*$/u, '') + '/status', { headers: { 'x-fedipod-page': '1' } }).then(r => (r.ok ? r.json() : null)).then((s) => {
     if (s?.handle) document.title = `FediPod — ${s.handle}`;
     // The full fediverse handle, centred in the bar on every page.
     const el = document.getElementById('bar-handle');
@@ -32,7 +32,7 @@
   const pick = document.getElementById('actor-pick');
   if (pick && !document.getElementById('new-actor-form')) {
     const base = location.pathname.replace(/\/admin\/.*$/u, '');
-    fetch(base + '/profiles').then(r => (r.ok ? r.json() : null)).then((j) => {
+    fetch(base + '/profiles', { headers: { 'x-fedipod-page': '1' } }).then(r => (r.ok ? r.json() : null)).then((j) => {
       const actors = j?.identities || [];
       pick.textContent = '';
       const label = (r) => (r.address || r.handle || r.name)

package/web/admin/client/client.js

@@ -27,7 +27,7 @@
   // "which account logged in here" is a different question, and it is the one
   // that goes wrong when the two origins get mixed.
   const base = location.pathname.replace(/\/admin\/.*$/u, '');
-  const status = await fetch(base + '/status').then(r => (r.ok ? r.json() : null)).catch(() => null);
+  const status = await fetch(base + '/status', { headers: { 'x-fedipod-page': '1' } }).then(r => (r.ok ? r.json() : null)).catch(() => null);
   if (!status?.actor) return;                 // not set up yet; setup owns that
 
   // A deep link into the client — the record links an actor's own page this way

package/web/admin/client/index.html

@@ -4,18 +4,17 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>FediPod — client</title>
+<link rel="stylesheet" href="../tokens.css">
 <style>
-:root { color-scheme: light dark; font-size: 112.5%; --link: #1a4f8a; --heading: #5b3a8e; }
-/* The bar is fixed height, the client takes the rest — the page never scrolls,
-   the frame does. */
+/* Colours are the shared tokens (tokens.css); only layout is here. The bar is
+   a fixed height, the client takes the rest — the page never scrolls, the frame
+   does. */
+:root { color-scheme: light dark; font-size: 125%; }
 html { height: 100%; }
 body { font: 1rem/1.5 system-ui, sans-serif; margin: 0; height: 100dvh;
   display: flex; flex-direction: column; overflow: hidden; }
 main { flex: 1 1 auto; min-height: 0; display: flex; }
 #client { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; }
-@media (prefers-color-scheme: dark) {
-  :root { --link: #7fb3e8; --heading: #b9a3e3; }
-}
 </style>
 <link rel="stylesheet" href="../bar.css">
 </head>

package/web/admin/index.html

@@ -4,30 +4,14 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>FediPod — record</title>
+<link rel="stylesheet" href="tokens.css">
 <style>
-/* 20px on the root, not on body, so every rem below scales with it.
-   Two accents, kept apart on purpose: --link is anything you can act on,
-   --heading is structure. Using one colour for both made the headings
-   look clickable. */
-/* One control chassis, one selector per element kind so nothing can fall
-   through unstyled: every control sits in the same light well; a select
-   carries a drawn chevron, a button carries the action-blue text. */
-:root { color-scheme: light dark; font-size: 112.5%;
-  --bar-col: 1280px;                 /* the bar centres on the same column */
-  --link: #1a4f8a; --heading: #5b3a8e;
-  --ink: #1b1c1e; --muted: #4a4e53;
-  --btn-bg: #f4efe6; --btn-bg-hover: #ece3d2; --btn-bg-active: #e2d5bd; --btn-edge: #8a7a61;
-  --field-bg: #ffffff; --field-bg-hover: #f7f4ee; --field-edge: #767676;
-  --danger: #b00020; --ring: var(--link);
-  --chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23444444' stroke-width='1.6' stroke-linecap='round'/></svg>"); }
-@media (prefers-color-scheme: dark) {
-  :root { --link: #7fb3e8; --heading: #b9a3e3;
-    --ink: #e8eaed; --muted: #b9bdc2;
-    --btn-bg: #35302a; --btn-bg-hover: #423b31; --btn-bg-active: #4d4436; --btn-edge: #9a8d7a;
-    --field-bg: #383d44; --field-bg-hover: #40464e; --field-edge: #9aa0a6;
-    --danger: #ff8a8a;
-    --chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23dddddd' stroke-width='1.6' stroke-linecap='round'/></svg>"); }
-}
+/* Colours are the shared tokens (tokens.css, the front's palette), so the
+   record, the front and the bar are one visual system; only the layout root —
+   the base scale and the bar's column — stays here. Controls share one look: a
+   field is a light well with a drawn chevron, a button is the front's filled
+   green. */
+:root { color-scheme: light dark; font-size: 125%; --bar-col: 1280px; }
 /* The page itself never scrolls: the body is exactly the window; the content
    column beside the rail is the scroll container. */
 html { height: 100%; }
@@ -95,7 +79,7 @@ h3 { margin: 1.25rem 0 .35rem; }
 #moderation label { display: inline; margin: 0 .3rem 0 .5rem; font-weight: normal; color: var(--muted); }
 p { margin: .5rem 0; }
 .sub { color: var(--muted); margin-top: 0; }
-fieldset { border: 1px solid #bbb; border-radius: .4rem; margin: 1rem 0; padding: .75rem 1rem 1rem; }
+fieldset { border: 1px solid var(--line); border-radius: .4rem; margin: 1rem 0; padding: .75rem 1rem 1rem; }
 legend { padding: 0 .3rem; font-weight: 600; color: var(--heading); }
 label { display: block; margin: .75rem 0 .2rem; }
 .hint { color: var(--muted); font-size: 1rem; margin: .15rem 0 0; }
@@ -114,12 +98,12 @@ select { font: inherit; appearance: none; max-width: 100%; min-width: 0;
   background-repeat: no-repeat; background-position: right .55rem center;
   background-size: .6rem auto; }
 select:hover { background-color: var(--field-bg-hover); }
-/* ACTIONS: identical to the settings — same well, same border, same ink,
-   Retire included. One control look for the whole page. */
-button { font: inherit; padding: .45rem 1rem; border-radius: .3rem; border: 1px solid var(--field-edge);
-  background: var(--field-bg); color: var(--ink); cursor: pointer; }
-button:hover { background: var(--field-bg-hover); }
-button:active { background: var(--field-bg-hover); }
+/* ACTIONS: the front's filled-green button, one look for the whole page,
+   Retire included — the typed-handle confirm, not a colour, is what guards the
+   destructive ones. */
+button { font: inherit; padding: .45rem 1rem; border-radius: .3rem; border: 1px solid var(--btn);
+  background: var(--btn); color: var(--btn-text); cursor: pointer; }
+button:hover, button:active { background: var(--btn-hover); border-color: var(--btn-hover); }
 button.primary { font-weight: 600; }
 button:disabled { opacity: .55; cursor: default; }
 /* Small buttons that sit in a line of text. */
@@ -139,12 +123,29 @@ dt.under { padding-left: 1.25rem; }
 dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
 .rows { list-style: none; padding: 0; margin: .3rem 0; }
 .rows li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
-  padding: .4rem 0; border-top: 1px solid #ddd; }
+  padding: .4rem 0; border-top: 1px solid var(--line); }
 .rows li span { flex: 1 1 18rem; overflow-wrap: anywhere; }
 .muted { color: var(--muted); }
 /* The actors dropdown rides the bar, at the bar's own text scale. */
 #bar select { font-size: .95rem; }
-#bsky-ctl { display: inline-flex; gap: .6rem; align-items: baseline; margin-left: .6rem; }
+/* The per-account Options disclosure: only where storage is not a real choice
+   (the Node agent's Bluesky, cross-post instead) — a summary opening
+   Show/Hide in Feed, Cross-post On/Off, Connected/Disconnect. Where storage
+   IS a choice, two dropdowns sit in the row directly instead (admin.js
+   connectionControls). */
+details.opts { display: inline-block; }
+details.opts > summary { cursor: pointer; color: var(--link); list-style: none; }
+details.opts > summary::-webkit-details-marker { display: none; }
+details.opts > summary::after { content: ' \25be'; }
+details.opts[open] > summary::after { content: ' \25b4'; }
+details.opts > div { margin: .4rem 0 .2rem; padding: .5rem .6rem; display: flex; flex-direction: column;
+  gap: .4rem; align-items: stretch; border: 1px solid var(--line); border-radius: .3rem;
+  background: var(--raised); min-width: 11rem; }
+details.opts > div select { width: 100%; }
+.opt-hint { color: var(--muted); font-size: .9rem; margin: -.1rem 0 .1rem; }
+/* The connection and storage dropdowns that sit in the row itself (admin.js
+   connectionControls) — extra room from the account name before them. */
+.conn-controls { display: inline-flex; align-items: center; gap: .4rem; margin-left: 1rem; }
 /* The alias row inside the Transfer-an-account-here panel. */
 #alias-ctl { display: flex; gap: .5rem; align-items: center; margin-top: .3rem; }
 #alias-ctl input { flex: 1 1 12rem; width: auto; }
@@ -155,15 +156,15 @@ dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
    below the control. */
 .choice { display: block; margin: .35rem 0; font-weight: normal; }
 .choice input { width: auto; margin-right: .4rem; }
-.warn { border-left: .25rem solid #c60; padding-left: .75rem; }
+.warn { border-left: .25rem solid var(--warn); padding-left: .75rem; }
 .err { border-left: .25rem solid var(--danger); padding-left: .75rem; color: var(--danger); }
-.ok { border-left: .25rem solid #2a7; padding-left: .75rem; }
+.ok { border-left: .25rem solid var(--ok); padding-left: .75rem; }
 pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem; font-size: .9rem; }
 @media (prefers-color-scheme: dark) {
   fieldset { border-color: #555; } .rows li { border-color: #444; }
 }
 </style>
-<link rel="stylesheet" href="bar.css">
+<link rel="stylesheet" href="bar.css?v=3">
 <link rel="stylesheet" href="window.css">
 </head>
 <body>
@@ -309,13 +310,6 @@ pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem;
   <span id="ident-ctl" hidden>
     <button type="button" id="ident-open" class="inline" title="   Connect an account you hold on another network, so its timeline joins the one you read here">Connect an identity</button>
   </span>
-  <span id="bsky-ctl" hidden>
-    <select id="bsky-crosspost" aria-label="Bluesky crossposting" title="   Whether your public posts also go to the Bluesky account">
-      <option value="on">crosspost on</option>
-      <option value="off">crosspost off</option>
-    </select>
-    <button type="button" id="bsky-disconnect" class="inline danger" title="   Forget the Bluesky session and remove the stored credential">Disconnect</button>
-  </span>
 </section>
 
 <span id="gateway-ctl" hidden>
@@ -470,7 +464,7 @@ pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem;
       Keep my pod-based handle: <strong id="gw-pod-preview"></strong><br>
       <span class="hint">Your address stays tied to your own pod — you can drop the
         gateway any time and keep everything.</span></label>
-    <label class="choice"><input type="radio" name="gwShape" value="front">
+    <label class="choice" id="gw-shape-front"><input type="radio" name="gwShape" value="front">
       Create a handle at the gateway:
       @<input type="text" id="gw-name" placeholder="name" autocomplete="off"
         autocapitalize="off" spellcheck="false">@<span id="gw-front-host">fedipod.net</span><br>
@@ -498,6 +492,15 @@ pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem;
   <div id="warn-rotate-key" class="warn" hidden>
     <p>A new keypair replaces the one in this home and the actor is republished so other
       servers learn it. Any other device still holding the old key stops being able to sign.</p>
+    <!-- Browser build only: there the key on the pod is locked under the account
+         password, so a new one has to be locked too. The Node agent keeps its key
+         on disk and needs nothing here — stage-site.mjs reveals this row. -->
+    <div id="rotate-pw-row" hidden>
+      <label for="rotate-password">Your account password</label>
+      <input type="password" id="rotate-password" autocomplete="current-password">
+      <p class="hint">Your signing key is kept on your pod locked under this, so the
+        replacement has to be locked under it too. It is not sent anywhere else.</p>
+    </div>
   </div>
   <div id="warn-retire" class="warn" hidden>
     <p><strong>This cannot be undone.</strong> A Delete goes to every follower's inbox telling
@@ -513,28 +516,13 @@ pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem;
     <label for="confirm-handle">Type the handle to confirm</label>
     <input type="text" id="confirm-handle" autocomplete="off">
   </div>
-  <div id="warn-move-state" class="warn" hidden>
-    <p>Your timeline, contacts, blocklist and notifications move to the place you choose.
-      Everything is copied and checked before the agent switches over, and the old copy is
-      left where it was for you to delete. The agent keeps running.</p>
-    <fieldset>
-      <legend>Where to</legend>
-      <label class="choice"><input type="radio" name="stateWhere" value="path" checked>
-        another place on this device</label>
-      <label class="choice"><input type="radio" name="stateWhere" value="url">
-        another device</label>
-      <label class="choice"><input type="radio" name="stateWhere" value="pod">
-        onto the pod</label>
-      <div id="state-row-path">
-        <label for="state-path">Directory</label>
-        <input type="text" id="state-path" autocomplete="off" placeholder="~/somewhere/private/">
-      </div>
-      <div id="state-row-url" hidden>
-        <label for="state-url">Address the other device serves</label>
-        <input type="url" id="state-url" autocomplete="off" placeholder="https://other-device.example/private/">
-      </div>
-    </fieldset>
-  </div>
+  <!-- "Move private data" (POST /state-move) had a panel here and no way to
+       open it: nothing in this page has ever carried data-confirm="move-state",
+       so the panel was only ever hidden. Removed 2026-09-09 rather than left as
+       markup that looks like a feature. The route is still there for the CLI,
+       which is where moving the private half between a directory and the pod
+       belongs — it is about filesystem paths and credential.json, neither of
+       which a browser has. -->
   <div id="warn-move" class="warn" hidden>
     <p>A <code>Move</code> goes to every follower's inbox and their servers migrate them to the
       account you name, so they end up following that one instead. The actor left behind

package/web/admin/setup/index.html

@@ -4,9 +4,10 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>FediPod — setup</title>
+<link rel="stylesheet" href="../tokens.css">
 <style>
 /* 20px on the root, not on body, so every rem below scales with it. */
-:root { color-scheme: light dark; font-size: 112.5%; --heading: #1a4f8a; }
+:root { color-scheme: light dark; font-size: 125%; --heading: #1a4f8a; }
 body { font: 1rem/1.5 system-ui, sans-serif; margin: 0; }
 /* The bar spans the window; the form stays in a centred column under it. */
 /* The same 960 column the bar and the record use, so the three pages line up. */

package/web/admin/setup/setup.js

@@ -17,7 +17,7 @@ const show = (id) => { for (const s of document.querySelectorAll('section[id^="p
 // the page's own address, so one build serves both.
 const BASE = location.pathname.replace(/\/admin\/.*$/u, '');
 const api = async (path, init) => {
-  const res = await fetch(BASE + path, init);
+  const res = await fetch(BASE + path, { ...init, headers: { ...(init?.headers || {}), 'x-fedipod-page': '1' } });
   return { status: res.status, json: await res.json().catch(() => null) };
 };
 const postJson = (path, body) => api(path, {

package/web/admin/tokens.css

@@ -0,0 +1,56 @@
+/* tokens.css — the FediPod design tokens: the front page's palette
+   (web/app/index.html), so the front, the record page, the bar and the client
+   shell are one visual system. The front is the reference; these values mirror
+   its :root. Declared under every name the pages already use — plus aliases
+   (--ink=--fg, --muted=--sub, --link=--accent, --field-edge=--field-border,
+   --danger=--err, --ring=--focus) — so a page only has to drop its own :root
+   colours and inherit these. */
+:root {
+  color-scheme: light dark;
+
+  /* ground + text */
+  --bg: #ffffff; --fg: #1a1a1a; --ink: #1a1a1a;
+  --surface: #f0f2f5;          /* the page ground behind cards */
+  --raised: #ffffff;           /* cards, the rail, the bar band, dialogs */
+
+  /* structure + action */
+  --heading: #123f74; --accent: #12467e; --link: #12467e;
+  --sub: #565656; --muted: #565656; --line: #b0b0b0;
+
+  /* fields */
+  --field-bg: #ececec; --field-bg-hover: #e2e4e8; --field-hover: #e2e4e8;
+  --field-text: #141414; --field-edge: #6f6f6f; --field-border: #6f6f6f;
+
+  /* buttons — filled, muted forest green (like the front) */
+  --btn: #3a5f43; --btn-hover: #30503a; --btn-text: #ffffff;
+  --btn-bg: #ececec; --btn-bg-hover: #e2e4e8; --btn-bg-active: #d8dade; --btn-edge: #6f6f6f;
+
+  /* status + focus */
+  --err: #b00020; --danger: #b00020; --warn: #8a4b00; --ok: #1f7a3d;
+  --focus: #12467e; --ring: #12467e;
+
+  --chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23124f8a' stroke-width='1.6' stroke-linecap='round'/></svg>");
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #191919; --fg: #f3f3f3; --ink: #f3f3f3;
+    --surface: #18191a; --raised: #242526;
+
+    --heading: #8fc2f2; --accent: #8fc2f2; --link: #8fc2f2;
+    --sub: #d2d2d2; --muted: #d2d2d2; --line: #6d6d6d;
+
+    --field-bg: #474747; --field-bg-hover: #515151; --field-hover: #515151;
+    --field-text: #f5f5f5; --field-edge: #9aa0a6; --field-border: #9aa0a6;
+
+    /* a touch brighter on the dark page so white text and the fill-vs-page edge
+       both clear their contrast floors — still muted (kept in sync with the front) */
+    --btn: #4a7a54; --btn-hover: #3f6a49; --btn-text: #ffffff;
+    --btn-bg: #474747; --btn-bg-hover: #515151; --btn-bg-active: #5b5b5b; --btn-edge: #9aa0a6;
+
+    --err: #ff9b9b; --danger: #ff9b9b; --warn: #ffb366; --ok: #7fd39a;
+    --focus: #8fc2f2; --ring: #8fc2f2;
+
+    --chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23bcd8f0' stroke-width='1.6' stroke-linecap='round'/></svg>");
+  }
+}

package/web/app/README.md

@@ -0,0 +1,77 @@
+# web/app — FediPod in the browser
+
+The in-browser build: sign up and run a FediPod account in a tab, no install.
+See `claude/plans/browser-agent.md` for the whole design and status.
+
+| file | what |
+|---|---|
+| `pod-auth.mjs` | The pod side of sign-in, browser-native: create a CSS account + pod, mint a client credential, and a DPoP-bound `fetch` that writes to the pod. The twin of `lib/account.mjs` + `vendor/idp-grant.cjs`. |
+| `keystore.mjs` | WebCrypto RSA/Ed25519 key generation, and wrapping the keys under the account password (PBKDF2-SHA256 + AES-GCM-256). The pod holds only the wrapped form, so the pod's host cannot sign as you. |
+| `keys-browser.mjs` | Importing a keys record for signing, and finding one: this browser's opened copy in IndexedDB first, else the pod's. A wrapped one the browser has not opened yet raises `KeyPasswordNeeded`, which `boot.mjs` answers with the unlock pane — once per browser. |
+| `signup.mjs` | The `fedipod setup` flow, in the browser, up to publish: account, pod, credential, keys locked on the pod (owner-only ACL written *before* the key). Produces the credential/keys/config shapes the agent already reads. |
+| `shims/fedify-sig.mjs` | Browser stand-in for `@fedify/fedify/sig` (which will not bundle for a browser). `sign()` returns signed headers as data for the relay; `signRequest()` wraps it Fedify-shaped. Proven byte-identical to Fedify. |
+| `shims/node-crypto.mjs` | Browser stand-in for `node:crypto` — the small synchronous slice the agent uses, via crypto-browserify, plus native WebCrypto. |
+| `shims/safefetch.mjs` | Browser stand-in for `lib/safefetch.mjs`. Pinning and the private-address checks are unnecessary here (a browser closes DNS rebinding itself); the BYTE BUDGET is not, so `readCapped` streams and stops at the cap exactly as the Node one does. |
+| `dist/` | The bundled agent, built by `scripts/build-app.mjs`. Committed like `phanpy/dist`, regenerated on release. (Not present until the agent entry is built.) |
+
+Build: `node scripts/build-app.mjs`. Tests live in `claude/validation/`:
+`signup-browser/`, `signing-shim/`, `agent-bundle/`.
+
+## The agent (built 2026-09-07)
+
+| file | what |
+|---|---|
+| `pod-remote.mjs` | RemotePod over the DPoP session — the agent's pod I/O, ACLs and deletion deny-list, browser-native. |
+| `keys-browser.mjs` | Load the signing key into WebCrypto. |
+| `deliver-relay.mjs` | lib's Deliverer, sending through the relay (a browser cannot set Date/Host). |
+| `agent.mjs` | Wires lib's store, publisher, intake and Mastodon facade with the browser edges. |
+| `sw-src.mjs` | The service worker that hosts the agent and answers the facade (Mastodon paths + the owner/manage paths); static files fall through. Built to `dist/sw.js`. |
+| `boot.mjs` | Page side: sign up / sign in, register the worker, hand it the boot material, route into `/admin/client/`; `?signout` / `?add` teardown. Built to `dist/boot.js`. |
+| `shims/` | Browser stand-ins the bundle needs: `node-crypto`, `node-path`, `node-url`, `node-fs`, `web-push`, `safefetch`, `prelude` (process + Buffer). |
+
+## The manage surface & connected accounts (built 2026-09-08)
+
+The owner's record/manage page is the SAME `web/admin` UI the Node agent serves,
+reused as static files under `/admin/` (staged by `scripts/stage-site.mjs`); the
+worker answers the data endpoints it calls. See
+`claude/plans/browser-manage-surface.md` for the whole design and status, and
+`claude/plans/post-as-connected-account.md` for the deferred "post as" plan.
+
+| file | what |
+|---|---|
+| `admin-facade.mjs` | Answers the owner/manage endpoints (`/status`, `/config`, `/gateway`, `/alias`, `/rotate-key`, `/rebuild`, `/move`, `/retire`, `/inbox/prune`, `/deadletter`, `/blocks`, `/atproto*`, `/fediacct*`) over the browser agent, mirroring `lib/admin.mjs`. Personal only. |
+| `atproto-browser.mjs` | The Bluesky connection (`lib/atproto.mjs`) with a per-connection storage choice — IndexedDB (this browser) or owner-only pod state — plus pause. |
+| `fediacct-browser.mjs` | Connections to fediverse accounts on other servers (`lib/fediacct.mjs`): the OAuth dance, the same storage choice, and a best-effort server-side revoke on disconnect. |
+| `idb-kv.mjs` | The per-origin IndexedDB key/value store the two connectors use for "on this device, never the pod" credentials. |
+
+`agent.mjs` also holds the single-active-agent **lease** (`lib/lease.mjs`) — a
+second device runs read-only until it takes over — and starts the drain/mirrors
+only when it is the active holder.
+
+Build: `node scripts/build-app.mjs --entry web/app/sw-src.mjs --out web/app/dist/sw.js` and `--entry web/app/boot.mjs --out web/app/dist/boot.js`, then `node scripts/stage-site.mjs` to assemble `web/app/site/` (the front, the worker, Phanpy under `/app/`, and `web/admin` under `/admin/`).
+
+Tests: `claude/smoke-tests/admin-facade-smoke.mjs`, and eight harnesses in
+`claude/validation/browser-agent/` that drive a real Chrome against a scratch
+Solid server — `run` (the agent and the facade), `sw-run` (the same through the
+service worker, plus media upload and notification paging), `full-run` (the
+staged site, sign-up to Phanpy rendering), `unlock-run` (a browser with no opened
+key), `oidc-run`, `resume-run`, `gateway-run`, and `provider-csp-run` (the
+sign-up page's own policy, read from the browser's refusal reports). Three
+helpers sit beside them: `idp-login.mjs` fills the pod's login and consent
+screens, `worker-log.mjs` reads the agent's console out of the service worker,
+and the attach and relay stubs in `sw-run.mjs` stand in for the front.
+
+## What this build does not have
+
+Declared rather than pretended: each is omitted from the instance document, so
+a client hides the control instead of offering one that quietly does nothing.
+See the `MastoApi` options in `agent.mjs`.
+
+| | why |
+|---|---|
+| **Streaming** | a service worker answers fetches, not sockets. No streaming URL is advertised, so clients poll. |
+| **Web push** | `shims/web-push.mjs` is a no-op. `vapid` is omitted, and a client that subscribes anyway gets a 422 rather than a subscription nothing will push to. |
+| **Scheduled posts** | nothing runs between now and the scheduled time. A `scheduled_at` is refused with a 422 that says so — accepting one was silent loss. |
+| **Groups** | sign-up makes personal identities only (`signup.mjs`), and the moderation surface is not here. Joining a group works; hosting one needs the installed agent. See `groups.md`. |
+| **A fronted `@you@front` handle** | the browser model is `@you@yourpod` with the gateway as a mail door. `admin-facade.mjs` refuses a fronted attach, and `stage-site.mjs` hides the radio that offered it. |
+| **Moving the private half** | `/state-move` is about filesystem paths and `credential.json`. A browser has neither; its private half is always on the pod. |