astro-atmosphere-comments 0.4.2 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 0.5.0 (4 November 2026)
+
+**Readers' sign-ins now stay in their own browsers.** This changes how the package works, so read "Upgrading" below.
+
+- **Browser sign-in:** readers sign in as a browser ("public") OAuth client, with `@atproto/oauth-client-browser`. Their sign-in is kept in their browser's storage, with a key the browser won't let even the page's code read out, and comments, likes, reposts, deletes and follows go from their browser straight to their own account host. Your server never sees a sign-in, sets no cookies and stores nothing, so it has no way to post for anyone. Signing out cancels the sign-in at the reader's host and deletes it from their browser. Account hosts give browser sign-ins a shorter life (Bluesky's last about two weeks).
+- **One approval for everything:** signing in asks for all that readers can do here at once (posting; liking and reposting; deleting their comments; following your accounts), plus hiding comments when the account is one of your own (`allowedAuthors`). Deleting and following were asked for separately before; with the sign-in in the browser, separate trips to the account host only confused readers. Permissions are grouped in `lib/permissions.ts`. Readers whose sign-in lacks a group (one from before it was added) are asked for it when it's first needed, after the page says what it's for, which account, and that their account host may ask them to sign in again first. `SignInForm` takes a `permissions` prop for anything more.
+- **Hide comments:** signed in as the account that posted the announcement, a Hide button under other people's comments hides them here and on Bluesky (the announcement's threadgate, as the Bluesky app does). The first hide asks for that permission. Show them again in the Bluesky app. Fires `atmosphere:hidden` (`detail`: `uri`).
+- **Respecting "logged-out" privacy:** accounts that use Bluesky's "Discourage apps from showing my account to logged-out users" are no longer shown on the page, which is public. Their comments become a short "Not shown here" placeholder (nothing about them reaches the page) with the replies under them kept, and they're left out of the like and repost faces. New wording key `comment.withheld`; style `.atmo-comment__withheld`.
+- **Fewer third parties:** account lookups while signing in go through your server (`/atmosphere/identity`), so readers' browsers contact only their own account host.
+- Under the sign-in button, a line says the sign-in stays in the browser, with a link to your privacy policy if you set `policyUri`.
+- Routes: `login`, `logout`, `me`, `comment`, `react`, `delete`, `follow`, `state` and `jwks.json` are gone. New: `identity`, `profile`, `richtext` (links and mentions in a comment, before it's posted) and `following`; `callback` is now a page; `POST /atmosphere/thread` refreshes a thread after a reader posts. The `typeahead` limits are per address for everyone.
+- The `keygen` command is gone: there's no key.
+- New wording keys (`signIn.access`, `signIn.policy`, `composer.needsPermission`, `comment.hide…`, `comment.deleteElsewhere`, `permission.…`, `callback.signingIn`) in all eight languages; `messages.newPermissions` is gone and `messages.needsPermission` is now general.
+
+### Upgrading from 0.4
+
+- Remove `ATMOSPHERE_PRIVATE_JWK` and `ATMOSPHERE_DATA_DIR` from your server's environment (and your deploy's secrets), and delete the data folder (default `.data/atmosphere`). The sign-ins in it can't be used without it: their tokens only work with keys kept in those files.
+- **Readers will need to sign in again.** Their old sign-ins (made with the server key) may still be listed at their account host until they expire; they can remove them there.
+- If you set a Content Security Policy, allow `connect-src` to readers' account hosts (any `https:` address), since the browser now talks to them directly.
+- The site no longer needs a disk that persists.
+
 ## 0.4.2 (4 November 2026)
 
 - Links open in a new tab: those in the sign-in form, "Reply on Bluesky instead", the credit, and the thread's names, dates, faces and links in comments, so readers don't lose their place (and a half-written comment).

package/README.md

@@ -10,6 +10,8 @@ Under each post, readers type their Bluesky handle (or that of any other [Atmosp
 - **@mention** people, with suggestions as they type;
 - **delete** their own comments.
 
+And signed in as one of your own accounts, you can **hide** comments under your posts, here and on Bluesky.
+
 Everything they post is written to **their own account**, as ordinary Bluesky posts, likes and reposts: comments are replies to your post's announcement on Bluesky. They can delete them in any Bluesky app, and people who prefer the app can reply there instead; it all shows up on your page the same way.
 
 The component also **shows the thread**: who liked and reposted your post, and the comments, nested, with their own Reply, Like and Repost.
@@ -20,17 +22,17 @@ See it on [saltedlolly.com](https://saltedlolly.com/2005/07/13/summer-jam-party-
 
 1. You announce each post on Bluesky (a post linking to it). That post's thread is the comment section.
 2. A reader signs in with **AT Protocol OAuth, straight to their own account host** (Bluesky's, for most people), which asks them to approve your site, named by its address (example.com). There is no third-party login service in between, and your site never sees a password.
-3. Your site asks only for what commenting needs: to create posts, to create and delete likes and reposts, and to see which posts the reader has already liked or reposted. Permission to delete posts is asked for separately, only the first time a reader deletes one of their comments on your site, and the site only ever uses it on their own comments under your posts. Permission to follow is asked for the same way, the first time a reader presses Follow, and only your own accounts can be followed through it. Readers can revoke it all at any time in their Bluesky settings.
-4. Your server keeps each reader's sign-in (a random cookie in their browser; their tokens on your server), and posts on their behalf when they press a button.
+3. **The sign-in stays in the reader's browser.** Your server never sees it: comments, likes and reposts go from the reader's browser straight to their own account host. So your server has no way to post for anyone, a copy of your server's files holds nothing about your readers, and when a reader signs out, the sign-in is cancelled at their host and deleted from their browser. That's it: nothing is left anywhere.
+4. Your site asks, in one approval, only for what readers can do on it: to create posts, to like and repost, to delete their comments and to follow your accounts (and, when one of your own accounts signs in, to hide comments). Each is used only on your posts, the comments under them and your accounts. Readers can see and cancel it all at their account host.
 
 Readers who'd rather not sign in can use the **Reply on Bluesky instead** link under the form.
 
-Images (avatars, link-card pictures) and account searches (the suggestions under the sign-in box and for @mentions) go through your server, so readers' browsers never contact Bluesky directly.
+Images (avatars, link-card pictures), account searches (the suggestions under the sign-in box and for @mentions) and account lookups when signing in go through your server, so readers' browsers contact only their own account host, never Bluesky's other servers.
 
 ## Requirements
 
 - **Astro 7** with an on-demand (server) adapter, such as [`@astrojs/node`](https://docs.astro.build/en/guides/integrations-guide/node/). The pages themselves can stay static; the integration adds a few server routes.
-- **Node 20.19 or later**, with a **disk that persists** between deploys and restarts: sign-ins are stored as files. (Serverless hosts without a lasting disk aren't supported yet.)
+- **Node 20.19 or later.** Nothing is stored on your server (no sign-ins, no cookies, no files), so no disk or database is needed.
 - A **Bluesky account that announces your posts**. Each post needs its announcement's address, or a [Standard.site](https://standard.site) record that points to it (see below).
 - Your site's **`site`** set in `astro.config`.
 
@@ -64,17 +66,9 @@ export default defineConfig({
 
 To find an account's DID: `https://bsky.social/xrpc/com.atproto.identity.resolveHandle?handle=you.bsky.social`.
 
-### 2. Create your site's signing key
-
-```sh
-npx astro-atmosphere-comments keygen
-```
-
-This adds `ATMOSPHERE_PRIVATE_JWK` to your `.env` without printing it. Your site signs its requests to readers' account hosts with it; the public half is published at `/atmosphere/jwks.json`, and the site's details for account hosts (its name, logo and permissions) at `/oauth-client-metadata.json`. That second file has to be at your site's root: it's the conventional address, and only then does Bluesky's approval page name your site by its address alone. Set the same variable on your server, keep `.env` out of Git, and keep a backup: **a new key signs every reader out.**
-
-On the server, also set `ATMOSPHERE_DATA_DIR` to a folder **outside your deploy folder** (for example `/var/lib/example-com/atmosphere`), so deploys don't sign readers out. It defaults to `.data/atmosphere` in the project.
+The integration also publishes your site's details for account hosts (its name, logo and permissions) at `/oauth-client-metadata.json`. That file has to be at your site's root: it's the conventional address, and only then does Bluesky's approval page name your site by its address alone. There's no key or secret to set up.
 
-### 3. Put the component under your posts
+### 2. Put the component under your posts
 
 ```astro
 ---
@@ -86,7 +80,7 @@ import AtmosphereComments from "astro-atmosphere-comments/AtmosphereComments.ast
 
 `post` can be the announcement's **bsky.app address** or its **AT URI**. Leave it out and the component uses the page's **Standard.site** record instead: if your page has `<link rel="site.standard.document" href="at://…">` and that record's `bskyPostRef` points to the announcement (as Standard.site publishers do), it just works. With no announcement to respond to, the component shows nothing (apart from your slot content).
 
-### 4. Optional: likes and reposts on your other Bluesky posts
+### 3. Optional: likes and reposts on your other Bluesky posts
 
 If your pages show your Bluesky posts elsewhere (a "latest posts" feed on your homepage, say), readers can like and repost them there too. Put `AtmosphereReactions` once in your layout, and mark each post's element:
 
@@ -109,7 +103,7 @@ import AtmosphereReactions from "astro-atmosphere-comments/AtmosphereReactions.a
 
 Each marked post gets a row of icons: Reply, Repost, Quote and Like, with counts for Repost and Like. Readers already signed in on your site like and repost straight away, and Reply and Quote open the comment box in an overlay (with the quote preview); what they post goes to Bluesky, not your page, and the overlay says so with a link to it. Anyone else is offered the sign-in form in an overlay when they press Like or Repost (their like or repost is done when they come back), and Reply and Quote open the post on Bluesky. It works with posts from loaders such as [`@ascorbic/bluesky-loader`](https://www.npmjs.com/package/@ascorbic/bluesky-loader) or embeds such as [`@astro-community/astro-embed-bluesky`](https://www.npmjs.com/package/@astro-community/astro-embed-bluesky) (wrap the embed in the marked element). Only posts by your `allowedAuthors` can be liked or reposted through your site.
 
-A "follow me" link can become a **Follow** button for signed-in readers: mark it with the account's DID and handle. It shows "Following" once they do (a second press unfollows, as on Bluesky). The first follow asks the reader's account host for one more permission. Only your `allowedAuthors` can be followed through your site, and the account's owner (who can't follow themselves) keeps the plain link.
+A "follow me" link can become a **Follow** button for signed-in readers: mark it with the account's DID and handle. It shows "Following" once they do (a second press unfollows, as on Bluesky). Only your `allowedAuthors` can be followed through your site, and the account's owner (who can't follow themselves) keeps the plain link.
 
 ```astro
 <a href="https://bsky.app/profile/you.bsky.social"
@@ -130,7 +124,7 @@ Run the dev server on `127.0.0.1` and open the site there, not at `localhost`:
 npx astro dev --host 127.0.0.1
 ```
 
-Locally the integration uses the protocol's development mode, so no key is needed and it works without a public address. Bluesky's approval screen will say a development app is asking; that's expected.
+Locally the integration uses the protocol's development mode, so it works without a public address. Bluesky's approval screen will say a development app is asking, and sign-ins last only about a day; that's expected.
 
 ## Options
 
@@ -139,7 +133,7 @@ Locally the integration uses the protocol's development mode, so no key is neede
 | `clientName` | yes | Your site's name, given to readers' account hosts. (Bluesky's approval page shows your site's address instead, unless Bluesky has marked your site as trusted.) |
 | `allowedAuthors` | yes | DIDs of the accounts whose posts can be commented on through your site. Comments from these accounts get the Author badge. |
 | `logoUri` | | A square logo for the sign-in screen (absolute `https://` address). |
-| `policyUri`, `tosUri` | | Your privacy policy and terms, shown on the sign-in screen. |
+| `policyUri`, `tosUri` | | Your privacy policy and terms, shown on the sign-in screen. The privacy policy is also linked under the sign-in form. |
 | `hidden` | | Comments never to show: bsky.app post or profile addresses, AT URIs, handles or DIDs. Replies you hide in the Bluesky app, and posts with Bluesky's moderation labels (spam and so on), are left out anyway. |
 | `base` | | Where the integration's routes live. Default `/atmosphere`. |
 | `locale` | | The language of the wording, such as `"fr"` or `"pt-BR"` (see Languages). |
@@ -207,17 +201,21 @@ The component fires (bubbling):
 - `atmosphere:commented` after a comment, reply or quote is posted (`detail`: `uri`, `url`, `text`, `author`, `createdAt`, `quote`, `parent`);
 - `atmosphere:reacted` after a like or repost of the post, or undoing one (`detail`: `kind`, `on`, `author`).
 - `atmosphere:deleted` after a reader deletes one of their comments (`detail`: `uri`).
+- `atmosphere:hidden` after the announcement's author hides a comment (`detail`: `uri`).
 
 ## Security and privacy
 
-- **What your server stores:** for each signed-in reader, their DID and their OAuth tokens (which can only post, like and repost as described above, and delete posts if the reader allowed it), plus a random cookie value. Files are readable only by your site's user. Mention this in your privacy policy.
-- **What it refuses:** requests that change something must come from your own pages (checked by `Origin`); only your announcements and comments in their threads can be acted on; only a reader's own replies under your announcements can be deleted; comments, likes and searches are rate-limited per account, and searches by readers who aren't signed in per address and overall; the image route only passes on avatars and link pictures it has just shown.
-- **Moderation:** comments appear automatically. Hide one in the Bluesky app (it disappears here too), block the account, or add it to `hidden`.
-- Comments are plain text, as on Bluesky: links, @mentions and #hashtags become links.
+- **Readers' sign-ins stay in their browsers.** The OAuth library (`@atproto/oauth-client-browser`) keeps the tokens in the browser's storage, together with a key the browser makes and won't let even the page's own code read out; the tokens only work with that key. Your server never receives them, sets no cookies and stores nothing about readers. Signing out cancels the sign-in at the reader's account host and deletes it from the browser.
+- **What that does and doesn't promise.** Your server can't act for anyone, ever. While a reader has your page open, though, your page's code can use their sign-in, as with any web app they sign in to, so the code that runs matters: it's this package's open source code, and comments are only ever shown as plain text (links, @mentions and #hashtags become links; nothing is rendered as HTML). A [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) on your site adds a second line of defence.
+- **What's checked before anything is sent** (by the browser code, `lib/client/account.ts`): only your announcements and the comments under them can be replied to, liked, reposted or quoted; only a reader's own replies under your announcements can be deleted; only your `allowedAuthors` can be followed; only an announcement's author can hide comments under it.
+- **What your server does:** it shows the threads, looks up accounts and suggestions, finds the links and mentions in a comment before it's posted, and passes on avatars and link pictures it has just shown. None of it needs to know who a reader is. Each route that calls Bluesky is rate-limited per address, with an overall cap; requests that aren't simple reads must come from your own pages (checked by `Origin`). Readers' addresses are used only for those limits, never stored.
+- **Trade-off:** account hosts trust browser sign-ins less than ones kept on a server, so they last less long (Bluesky's currently last about two weeks), and there's no way for a site to sign everyone out at once. For a reader who'd rather not trust your server, that's the point.
+- **People who'd rather not be shown publicly:** Bluesky's setting "Discourage apps from showing my account to logged-out users" is respected, as your page is public. A comment from such an account shows only as "Not shown here…" (no name, picture or words reach the page), the replies under it stay, and the account is left out of the faces of who liked and reposted.
+- **Moderation:** comments appear automatically. Hide one with Hide under it (signed in as the account that posted the announcement) or in the Bluesky app; it disappears here too. Show it again in the Bluesky app. You can also block the account, or add it to `hidden`.
 
 ## Limitations (for now)
 
-- Needs a Node server with a lasting disk (no serverless or edge hosts yet).
+- Needs an on-demand (server) adapter, for the few routes above. Serverless hosts should work, as nothing is stored, but haven't been tried.
 - Rate limits are kept in memory, so they apply per server process.
 - Quoting individual comments isn't supported.
 

package/components/AtmosphereComments.astro

@@ -121,6 +121,16 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       </button>
     </div>
 
+    {/* A sign-in from before posting was asked for: one more permission. */}
+    <div class="atmo__permission" data-permission hidden>
+      <p data-permission-text>{t("composer.needsPermission")}</p>
+      <p class="atmo__hint">{t("permission.approve")}</p>
+      <div class="atmo__row">
+        <button type="button" class="atmo__button" data-permission-continue>{t("comment.continue")}</button>
+        <button type="button" class="atmo__link-button" data-permission-sign-out>{t("composer.signOut")}</button>
+      </div>
+    </div>
+
     <Composer id="atmo" messages={messages} lang={lang} signOut />
   </div>
 
@@ -143,6 +153,9 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
   import { translate } from "../lib/translate";
   import { enhanceHandleBox } from "../lib/client/handle-suggestions";
   import { MAX, quotePreview, setUpComposer, type ComposerBehaviour, type Posted } from "../lib/client/composer";
+  import { handleSignInForm, me as whoIsSignedIn, send, signIn, signOut, state } from "../lib/client/account";
+  import type { Permission } from "../lib/permissions";
+  import { authorOf } from "../lib/uris";
 
 
   // The error and status codes the routes and the sign-in round trip send,
@@ -155,7 +168,6 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
     "signed-out": "messages.signedOut",
     "needs-permission": "messages.needsPermission",
     "not-allowed": "messages.notAllowed",
-    "new-permissions": "messages.newPermissions",
     "too-long": "messages.tooLong",
     "too-many": "messages.tooMany",
     error: "messages.error",
@@ -177,23 +189,32 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       const signedOut = $<HTMLElement>("[data-view='signed-out']");
       const signedIn = $<HTMLElement>("[data-view='signed-in']");
       const composer = $<HTMLFormElement>("[data-composer]");
+      const permissionPanel = $<HTMLElement>("[data-permission]");
       // A clean copy of the comment box, for reply boxes under comments.
       const template = composer.cloneNode(true) as HTMLFormElement;
       const loginForm = $<HTMLFormElement>("[data-login-form]");
       const status = $<HTMLElement>("[data-status]");
       let isSignedIn = false;
-      let me: { did?: string; handle?: string; displayName?: string; avatar?: string } = {};
+      let me: { did?: string; handle?: string; displayName?: string; avatar?: string; can?: string[] } = {};
+      const can = (permission: Permission) => !!me.can?.includes(permission);
       // What the main box is doing: a comment on the post, or a quote post.
       let mainMode: "comment" | "quote" = "comment";
 
       const say = (message: string) => (status.textContent = message);
-      const send = (path: string, body: unknown) =>
-        fetch(`${base}/${path}`, {
-          method: "POST",
-          credentials: "same-origin",
-          headers: { "content-type": "application/json" },
-          body: JSON.stringify(body),
-        });
+      // Sends the reader to their account host for one more permission,
+      // coming back to `hash` on this page (to finish what they asked).
+      const askPermission = (permission: Permission, hash = "#atmosphere-comments") =>
+        signIn(me.did!, { permissions: [permission], returnTo: `${location.pathname}${location.search}${hash}`, lang });
+      // Says what the permission is for before going (the account host may
+      // ask the reader to sign in again first, which is puzzling unexplained),
+      // with Continue to approve. Delete and Hide do the same in their panels.
+      const explainPermission = (permission: "post" | "react") => {
+        const go = Object.assign(make("button", "atmo__link-button", t("comment.continue")), { type: "button" });
+        go.addEventListener("click", () => void askPermission(permission));
+        status.replaceChildren(`${t(`permission.${permission}`)} ${t("permission.approve")} `, go);
+        status.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        go.focus({ preventScroll: true });
+      };
       // Elements this script creates get the component's marker attribute, so
       // Astro's scoped styles still reach them.
       const scoped = <T extends HTMLElement>(element: T): T => {
@@ -216,6 +237,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         depth: number;
         likeCount: number;
         repostCount: number;
+        withheld?: true;
       };
       type Thread = { uri: string; url: string; likeCount: number; repostCount: number; likes: Person[]; reposts: Person[]; replies: Reply[] };
       let thread: Thread | null = null;
@@ -272,7 +294,17 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       const replyElement = (reply: Reply) => {
         const item = make("li", `atmo-comment${reply.byAuthor ? " atmo-comment--author" : ""}${reply.depth ? " atmo-comment--nested" : ""}`);
         if (reply.depth) item.style.setProperty("--depth", String(Math.min(reply.depth, 3)));
+        // Its author asks not to be shown to logged-out people: a placeholder,
+        // keeping the replies under it in place. (No AT URI, so no actions.)
+        if (reply.withheld) {
+          item.classList.add("atmo-comment--withheld");
+          const article = make("article");
+          article.append(make("p", "atmo-comment__withheld", t("comment.withheld")));
+          item.append(article);
+          return item;
+        }
         item.dataset.atmosphereUri = reply.uri;
+        item.dataset.atmosphereUrl = reply.url;
         item.dataset.atmosphereAuthor = nameOf(reply.author);
         item.dataset.atmosphereLikes = String(reply.likeCount);
         item.dataset.atmosphereReposts = String(reply.repostCount);
@@ -385,6 +417,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       const openLogin = () => loginForm.querySelector("input")?.focus({ preventScroll: true });
 
       enhanceHandleBox(loginForm, base);
+      handleSignInForm(loginForm, lang);
 
       // An avatar picture, or the name's first letter if there isn't one.
       const setAvatar = (slot: HTMLElement, name: string, src?: string) => {
@@ -395,8 +428,10 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         img.onload = () => slot.replaceChildren(img);
       };
 
-      const handleError = (error: string, tell: (message: string) => void = say) => {
-        if (error === "signed-out" || error === "new-permissions") void show(false);
+      const handleError = (error: string, tell: (message: string) => void = say, permission?: string) => {
+        if (error === "signed-out") void show(false);
+        // The page checks before it starts, so this is rare: ask now.
+        if (error === "needs-permission" && (permission === "post" || permission === "react")) return explainPermission(permission);
         tell(message(error));
       };
 
@@ -453,6 +488,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         main.textarea.focus();
       });
       $<HTMLButtonElement>("[data-quote]").addEventListener("click", () => {
+        if (!can("post")) return explainPermission("post");
         setMainMode("quote");
         main.textarea.focus();
       });
@@ -537,7 +573,8 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
           } catch (problem) {
             button.setAttribute("aria-pressed", String(!on));
             setCount(before);
-            handleError((problem as { error?: string })?.error ?? "error");
+            const { error, permission } = (problem ?? {}) as { error?: string; permission?: string };
+            handleError(error ?? "error", say, permission);
           }
         });
         return button;
@@ -559,6 +596,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
           reply.setAttribute("aria-label", t("comment.replyTo", { name: author }));
           reply.addEventListener("click", () => {
             if (!isSignedIn) return signInFirst(t("signInFirst.reply"));
+            if (!can("post")) return explainPermission("post");
             openReply(comment, author);
           });
           actions.append(reply, commentButton("like", comment), commentButton("repost", comment));
@@ -583,7 +621,8 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
             this.dispatchEvent(new CustomEvent("atmosphere:deleted", { detail: { uri }, bubbles: true }));
             return;
           }
-          if (data.error === "needs-permission") return askDeletePermission(comment, panel);
+          // The page checks first, so this is rare: ask now.
+          if (data.error === "needs-permission") return void askPermission("delete", `#atmo-delete=${encodeURIComponent(uri)}`);
           panel.remove();
           handleError(data.error ?? "error");
         } catch {
@@ -592,58 +631,112 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         }
       };
 
-      // Deleting posts isn't part of signing in, so the first delete asks the
-      // reader's account host for it, then carries on when they come back.
-      const askDeletePermission = (comment: HTMLElement, panel: HTMLElement) => {
-        const form = Object.assign(document.createElement("form"), { method: "post", action: `${base}/login` });
-        const field = (name: string, value: string) =>
-          form.append(Object.assign(document.createElement("input"), { type: "hidden", name, value }));
-        field("handle", me.did!);
-        field("permission", "delete");
-        field("returnTo", `${location.pathname}#atmo-delete=${encodeURIComponent(comment.dataset.atmosphereUri!)}`);
-        const go = Object.assign(make("button", "atmo-comment-action atmo-comment-action--danger", t("comment.continue")), { type: "submit" });
-        const cancel = Object.assign(make("button", "atmo-comment-action", t("comment.cancel")), { type: "button" });
-        cancel.addEventListener("click", () => panel.remove());
-        form.append(go, cancel);
-        panel.replaceChildren(
-          make(
-            "span",
-            "atmo-comment-delete__text",
-            t("comment.deletePermission"),
-          ),
-          form,
-        );
-        go.focus();
+      // Hide, for the announcement's own author: hides a comment here and on
+      // Bluesky. Showing it again is done in the Bluesky app.
+      const isOwner = () => !!me.did && !!post && authorOf(post) === me.did;
+
+      const hideComment = async (comment: HTMLElement, panel: HTMLElement) => {
+        const uri = comment.dataset.atmosphereUri!;
+        panel.replaceChildren(make("span", "atmo-comment-delete__text", t("comment.hiding")));
+        try {
+          const response = await send("hide", { post: uri, root: post });
+          const data = (await response.json()) as { error?: string };
+          if (response.ok) {
+            comment.remove();
+            say(t("comment.hidden"));
+            this.dispatchEvent(new CustomEvent("atmosphere:hidden", { detail: { uri }, bubbles: true }));
+            return;
+          }
+          if (data.error === "needs-permission") return void askPermission("moderate", `#atmo-hide=${encodeURIComponent(uri)}`);
+          panel.remove();
+          handleError(data.error ?? "error");
+        } catch {
+          panel.remove();
+          say(message("error"));
+        }
       };
 
-      const deleteButton = (comment: HTMLElement) => {
-        const button = Object.assign(make("button", "atmo-comment-action atmo-comment-action--delete", t("comment.delete")), { type: "button" });
-        button.setAttribute("aria-label", t("comment.deleteLabel"));
-        button.addEventListener("click", () => {
-          const actions = button.parentElement!;
-          if (actions.nextElementSibling?.matches(".atmo-comment-delete")) return;
-          const panel = make("div", "atmo-comment-delete");
-          const yes = Object.assign(make("button", "atmo-comment-action atmo-comment-action--danger", t("comment.delete")), { type: "button" });
-          const no = Object.assign(make("button", "atmo-comment-action", t("comment.cancel")), { type: "button" });
-          yes.addEventListener("click", () => deleteComment(comment, panel));
-          no.addEventListener("click", () => {
-            panel.remove();
-            button.focus();
-          });
-          panel.append(make("span", "atmo-comment-delete__text", t("comment.deleteConfirm")), yes, no);
-          panel.setAttribute("role", "group");
-          panel.setAttribute("aria-label", t("comment.deleteLabel"));
+      // Delete and Hide each need one more permission than signing in gives.
+      // Readers who haven't given it yet are asked for it first; once they
+      // have (straight away, or back from approving), they confirm.
+      const STEPS = {
+        delete: {
+          permission: "delete",
+          action: "comment.delete",
+          label: "comment.deleteLabel",
+          confirm: "comment.deleteConfirm",
+          needs: "comment.deletePermission",
+          // "{{link}}" in the wording: the comment on Bluesky, to delete it there instead.
+          elsewhere: "comment.deleteElsewhere",
+          run: deleteComment,
+        },
+        hide: {
+          permission: "moderate",
+          action: "comment.hide",
+          label: "comment.hideLabel",
+          confirm: "comment.hideConfirm",
+          needs: "comment.hidePermission",
+          elsewhere: "",
+          run: hideComment,
+        },
+      } as const;
+
+      const openPanel = (comment: HTMLElement, kind: keyof typeof STEPS) => {
+        const actions = comment.querySelector<HTMLElement>(":scope .atmo-comment-actions");
+        if (!actions || actions.nextElementSibling?.matches(".atmo-comment-delete")) return;
+        const step = STEPS[kind];
+        const panel = make("div", "atmo-comment-delete");
+        panel.setAttribute("role", "group");
+        panel.setAttribute("aria-label", t(step.label));
+        const button = (text: string, danger = false) =>
+          Object.assign(make("button", `atmo-comment-action${danger ? " atmo-comment-action--danger" : ""}`, text), { type: "button" });
+        const no = button(t("comment.cancel"));
+        no.addEventListener("click", () => {
+          panel.remove();
+          actions.querySelector<HTMLElement>(`.atmo-comment-action--${kind}`)?.focus();
+        });
+        if (can(step.permission)) {
+          const yes = button(t(step.action), true);
+          yes.addEventListener("click", () => step.run(comment, panel));
+          panel.append(make("span", "atmo-comment-delete__text", t(step.confirm)), yes, no);
           actions.after(panel);
           no.focus();
-        });
+        } else {
+          const go = button(t("comment.continue"), true);
+          go.addEventListener("click", () =>
+            void askPermission(step.permission, `#atmo-${kind}=${encodeURIComponent(comment.dataset.atmosphereUri!)}`),
+          );
+          const text = make("span", "atmo-comment-delete__text");
+          const [before, after = ""] = t(step.needs, { link: "\u0000" }).split("\u0000");
+          text.append(before);
+          if (step.elsewhere) {
+            const url = comment.dataset.atmosphereUrl;
+            text.append(
+              url
+                ? Object.assign(make("a", "", t(step.elsewhere)), { href: url, target: "_blank", rel: "noopener noreferrer" })
+                : t(step.elsewhere),
+              after,
+            );
+          }
+          panel.append(text, go, no);
+          actions.after(panel);
+          go.focus();
+        }
+      };
+
+      const panelButton = (comment: HTMLElement, kind: keyof typeof STEPS) => {
+        const button = Object.assign(make("button", `atmo-comment-action atmo-comment-action--${kind}`, t(STEPS[kind].action)), { type: "button" });
+        button.setAttribute("aria-label", t(STEPS[kind].label));
+        button.addEventListener("click", () => openPanel(comment, kind));
         return button;
       };
 
       const addDeleteButtons = () => {
         document.querySelectorAll<HTMLElement>("[data-atmosphere-uri]").forEach((comment) => {
           const actions = comment.querySelector<HTMLElement>(":scope .atmo-comment-actions");
-          if (!actions || actions.querySelector(".atmo-comment-action--delete")) return;
-          if (isSignedIn && isMine(comment)) actions.append(deleteButton(comment));
+          if (!actions || actions.querySelector(".atmo-comment-action--delete, .atmo-comment-action--hide")) return;
+          if (isSignedIn && isMine(comment)) actions.append(panelButton(comment, "delete"));
+          else if (isSignedIn && isOwner()) actions.append(panelButton(comment, "hide"));
         });
       };
 
@@ -653,14 +746,13 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         const comments = [...document.querySelectorAll<HTMLElement>("[data-atmosphere-uri]")];
         const uris = [post, ...comments.map((comment) => comment.dataset.atmosphereUri!)];
         try {
-          const query = uris.map((uri) => `post=${encodeURIComponent(uri)}`).join("&");
-          const response = await fetch(`${base}/state?${query}`, { credentials: "same-origin" });
-          const state = (await response.json()) as {
+          const response = await state(uris);
+          const found = (await response.json()) as {
             error?: string;
             posts?: Record<string, { liked: boolean; reposted: boolean }>;
           };
-          if (!response.ok) return handleError(state.error ?? "error");
-          const posts = state.posts ?? {};
+          if (!response.ok) return handleError(found.error ?? "error");
+          const posts = found.posts ?? {};
           known = { ...known, ...posts };
           setPressed("like", !!posts[post]?.liked);
           setPressed("repost", !!posts[post]?.reposted);
@@ -689,23 +781,28 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         signedOut.hidden = signed;
         signedIn.hidden = !signed;
         if (!signed) {
-          document.querySelectorAll(".atmo-comment-action--delete, .atmo-comment-delete").forEach((part) => part.remove());
+          document.querySelectorAll(".atmo-comment-action--delete, .atmo-comment-action--hide, .atmo-comment-delete").forEach((part) => part.remove());
           return closeReplies();
         }
+        // A sign-in without posting (from an older version, which asked for
+        // less): one more permission, asked for before they type.
+        composer.hidden = !can("post");
+        permissionPanel.hidden = can("post");
+        // Which account, as they may have more than one.
+        $<HTMLElement>("[data-permission-text]").textContent = t("composer.needsPermission", { handle: handle ? `@${handle}` : "" });
         addCommentActions();
+        addDeleteButtons();
         await loadState();
-        // Back from approving the delete permission: finish the delete they asked for.
-        const pending = location.hash.match(/^#atmo-delete=(.+)$/);
+        // Back from approving the delete or hide permission: ask them to
+        // confirm the delete or hide they started.
+        const pending = location.hash.match(/^#atmo-(delete|hide)=(.+)$/);
         if (pending) {
           history.replaceState(history.state, "", `${location.pathname}${location.search}#atmosphere-comments`);
-          const uri = decodeURIComponent(pending[1]);
-          const comment = document.querySelector<HTMLElement>(`[data-atmosphere-uri="${CSS.escape(uri)}"]`);
-          const actions = comment?.querySelector<HTMLElement>(":scope .atmo-comment-actions");
-          if (comment && actions && isMine(comment)) {
-            const panel = make("div", "atmo-comment-delete");
-            actions.after(panel);
+          const kind = pending[1] as keyof typeof STEPS;
+          const comment = document.querySelector<HTMLElement>(`[data-atmosphere-uri="${CSS.escape(decodeURIComponent(pending[2]))}"]`);
+          if (comment && (kind === "delete" ? isMine(comment) : isOwner())) {
             comment.scrollIntoView({ block: "center" });
-            await deleteComment(comment, panel);
+            openPanel(comment, kind);
           }
         }
       };
@@ -720,11 +817,10 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       }
 
       this.classList.add("is-loading");
-      fetch(`${base}/me`, { credentials: "same-origin" })
-        .then((response) => response.json())
-        .then((found: { signedIn: boolean; did?: string; handle?: string; displayName?: string; avatar?: string }) => {
+      whoIsSignedIn()
+        .then((found) => {
           me = found;
-          return show(found.signedIn, found.handle, found.displayName, found.avatar);
+          return found.signedIn ? show(true, found.handle, found.displayName, found.avatar) : show(false);
         })
         .catch(() => show(false))
         .finally(() => {
@@ -751,7 +847,8 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
             const response = await send("react", { post, kind, on });
             if (!response.ok) {
               setPressed(kind, !on);
-              return handleError((await response.json()).error);
+              const { error, permission } = (await response.json()) as { error?: string; permission?: string };
+              return handleError(error ?? "error", say, permission);
             }
             say(t(on ? (kind === "like" ? "status.liked" : "status.reposted") : kind === "like" ? "status.likeRemoved" : "status.repostRemoved"));
             showReaction(kind, on);
@@ -768,12 +865,16 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         });
       }
 
-      $<HTMLButtonElement>("[data-sign-out]").addEventListener("click", async () => {
-        await fetch(`${base}/logout`, { method: "POST", credentials: "same-origin" }).catch(() => undefined);
+      const signOutHere = async () => {
+        await signOut();
+        me = {};
         void show(false);
         setMainMode("comment");
         say(t("status.signedOut"));
-      });
+      };
+      $<HTMLButtonElement>("[data-sign-out]").addEventListener("click", signOutHere);
+      $<HTMLButtonElement>("[data-permission-sign-out]").addEventListener("click", signOutHere);
+      $<HTMLButtonElement>("[data-permission-continue]").addEventListener("click", () => void askPermission("post"));
     }
   }