astro-atmosphere-comments 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.2.0 (4 November 2026)
+
+- The sign-in form is shown straight away under each post: a handle box and a **Sign in with Atmosphere** button, both with the Atmosphere logo. The "Respond with your Atmosphere Account" button that opened it is gone.
+- `label` is now the form's heading (default "Sign in to leave a comment, like or repost"). If you set it for the old button's small text, change or remove it.
+- As readers type in the handle box, **matching accounts are suggested** with their avatar, name and handle, so they can see they've found the right one; picking one signs in with it. Enter still signs in with exactly what was typed.
+- Under the sign-in form, **"Rather not sign in here? Reply on Bluesky instead →"** links to the announcement, for readers who'd rather reply in the Bluesky app (`blueskyLink={false}` hides it). If your page already says this in the `after-box` slot, remove one.
+- Readers can **delete their own comments**: a Delete button under each of them, with a confirmation. Signing in no longer asks for permission to delete posts; the first delete asks the reader's account host for it (one more approval), then finishes. The server only ever deletes the reader's own replies under your announcements. Fires `atmosphere:deleted` (`detail`: `uri`).
+- The site's OAuth client metadata moved to `/oauth-client-metadata.json` at the site's root (was `/atmosphere/client-metadata.json`), so Bluesky's approval page names the site by its address ("saltedlolly.com") instead of showing a file address. **Readers already signed in will need to sign in once more**, because their sign-in belonged to the old address. If your site already serves a file at that address, the two will clash.
+- The handle box keeps `name="handle"` (the name most atproto apps use, so browsers can suggest handles typed elsewhere) and asks password managers to leave it alone: it isn't a login for your site, so they offered the wrong one. This follows the community's emerging convention and may change (see AGENTS.md).
+- `--atmo-danger` sets the colour of the confirming Delete button.
+- Pressing Reply, Like or Repost on a comment while signed out moves to the form and puts the cursor in the handle box.
+
+## 0.1.1 (3 November 2026)
+
+- The credit link now goes to a permanent address, saltedlolly.com/atmosphere-comments-for-astro/.
+
 ## 0.1.0 (3 November 2026)
 
 First release, as used on [saltedlolly.com](https://saltedlolly.com).

package/README.md

@@ -2,12 +2,13 @@
 
 Bluesky comments for your Astro site, without the reader leaving the page. (On npm: [`astro-atmosphere-comments`](https://www.npmjs.com/package/astro-atmosphere-comments).)
 
-Readers press **Respond with your Atmosphere Account**, sign in with their Bluesky handle (or any other [Atmosphere account](https://atmosphereaccount.com)), and can then:
+Under each post, readers type their Bluesky handle (or that of any other [Atmosphere account](https://atmosphereaccount.com)) into the **Sign in with Atmosphere** form, which suggests matching accounts with their avatars as they type, and can then:
 
 - **comment** on your post, and **reply** to other comments;
 - **like** and **repost** your post, or any comment under it;
 - **quote** your post on their own profile, with a Bluesky-style preview;
-- **@mention** people, with suggestions as they type.
+- **@mention** people, with suggestions as they type;
+- **delete** their own comments.
 
 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.
 
@@ -18,11 +19,13 @@ See it on [saltedlolly.com](https://saltedlolly.com/2005/07/13/summer-jam-party-
 ## How it works
 
 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). 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 and delete posts, likes and reposts, and to see which posts the reader has already liked or reposted. Readers can revoke it at any time in their Bluesky settings.
+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. 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.
 
-Images (avatars, link-card pictures) and @mention searches go through your server, so readers' browsers never contact Bluesky directly.
+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.
 
 ## Requirements
 
@@ -67,7 +70,7 @@ To find an account's DID: `https://bsky.social/xrpc/com.atproto.identity.resolve
 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`. Set the same variable on your server, keep `.env` out of Git, and keep a backup: **a new key signs every reader out.**
+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.
 
@@ -97,7 +100,7 @@ Locally the integration uses the protocol's development mode, so no key is neede
 
 | Option | Required | What it does |
 | --- | --- | --- |
-| `clientName` | yes | Your site's name on the reader's sign-in screen. |
+| `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. |
@@ -109,13 +112,14 @@ Locally the integration uses the protocol's development mode, so no key is neede
 | Prop | What it does |
 | --- | --- |
 | `post` | The announcement: bsky.app address or AT URI. Optional with Standard.site (above). |
-| `label` | The small words on the button above "Atmosphere Account". Default "Respond with your". |
+| `label` | The sign-in form's heading. Default "Sign in to leave a comment, like or repost". |
 | `authorLabel` | The badge on your own comments. Default "Author". |
+| `blueskyLink` | "Rather not sign in here? Reply on Bluesky instead →" under the sign-in form, linking to the announcement (with `u-syndication`, so microformats readers learn it's the post's copy on Bluesky). Default `true`; `blueskyLink={false}` hides it. |
 | `credit` | A small "Powered by Atmosphere Comments for Astro" link at the end. Default `true`; set `credit={false}` to hide it. |
 
 **Slots:** `after-box` goes between the comment box and the comments (a note about other ways to respond, say); the default slot goes after the comments (other responses, older comments).
 
-**Layout, top to bottom:** likes and reposts, the button (or, signed in, Like, Repost, Quote and the comment box), your `after-box` content, the comments, your default slot content.
+**Layout, top to bottom:** likes and reposts, the sign-in form and the "Reply on Bluesky instead" line (or, signed in, Like, Repost, Quote and the comment box), your `after-box` content, the comments, your default slot content.
 
 ## Styling
 
@@ -130,8 +134,9 @@ It has a plain default look and takes your text colour. Colours come from CSS cu
   --atmo-border: #ddd;
   --atmo-field-bg: #f6f6f6;   /* text boxes */
   --atmo-card-bg: #fafafa;    /* comments */
-  --atmo-menu-bg: #fff;       /* @mention suggestions */
+  --atmo-menu-bg: #fff;       /* account and @mention suggestions */
   --atmo-ring: #fff;          /* the outline round faces */
+  --atmo-danger: #c0392b;     /* Delete, when confirming */
   --atmo-radius: 10px;
 }
 ```
@@ -144,11 +149,12 @@ 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`).
 
 ## 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), 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; comments, likes and searches are rate-limited per account; the image route only passes on avatars and link pictures it has just shown.
+- **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.
 

package/components/AtmosphereComments.astro

@@ -1,19 +1,22 @@
 ---
-// The comment box under a post: "Respond with your Atmosphere Account", then,
-// once signed in, Like, Repost and Quote buttons and a box to write a
+// The comment box under a post: a form to sign in with an Atmosphere account
+// (Bluesky or any other), then, once signed in, Like, Repost and Quote buttons and a box to write a
 // comment (a reply to the post's announcement, or to one of its comments).
 //
 // Props:
 //   post   the announcement's AT URI (at://did/app.bsky.feed.post/rkey).
-//   label   the small words on the button above "Atmosphere Account"
-//           (default "Respond with your").
+//   label   the sign-in form's heading
+//           (default "Sign in to leave a comment, like or repost").
+//   blueskyLink  "Rather not sign in here? Reply on Bluesky instead →" under the
+//           sign-in form (default true; false hides it).
 //   credit  a small "Powered by Atmosphere Comments for Astro" link under the
 //           comments (default true; false hides it).
 //
 // Quote shows a preview of the reader's post with the announcement quoted
 // inside, avatars and link-card picture included (passed on by this site).
 //
-// Typing @ and the start of a handle suggests accounts to mention.
+// Typing @ and the start of a handle suggests accounts to mention, and typing
+// in the sign-in box suggests matching accounts to sign in with.
 //
 // Comments: under every element on the page with a `data-atmosphere-uri`
 // attribute (a comment's AT URI) the component adds Reply, Like and Repost.
@@ -38,15 +41,32 @@ interface Props {
    * is used to find it.
    */
   post?: string;
+  /** The sign-in form's heading. */
   label?: string;
   /** The badge on comments by the site's own accounts. */
   authorLabel?: string;
   /** A small "Powered by Atmosphere Comments for Astro" link under the comments. Default true. */
   credit?: boolean;
+  /** "Rather not sign in here? Reply on Bluesky instead →" under the sign-in form. Default true. */
+  blueskyLink?: boolean;
 }
 
-const { post = "", label = "Respond with your", authorLabel = "Author", credit = true } = Astro.props;
-const CREDIT_URL = "https://saltedlolly.com/2026/11/03/comment-like-and-repost-with-your-bluesky-account/";
+const {
+  post = "",
+  label = "Sign in to leave a comment, like or repost",
+  authorLabel = "Author",
+  credit = true,
+  blueskyLink = true,
+} = Astro.props;
+// The announcement on bsky.app, when the page is given it (otherwise the
+// script fills it in once the thread has loaded).
+const atUri = post.match(/^at:\/\/([^/]+)\/app\.bsky\.feed\.post\/([^/]+)$/);
+const blueskyUrl = atUri
+  ? `https://bsky.app/profile/${atUri[1]}/post/${atUri[2]}`
+  : /^https:\/\/bsky\.app\/profile\/[^/]+\/post\/[^/]+$/.test(post)
+    ? post
+    : "";
+const CREDIT_URL = "https://saltedlolly.com/atmosphere-comments-for-astro/";
 const { base } = settings;
 const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
 ---
@@ -55,30 +75,33 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
   <div class="atmo-reactions" data-reactions data-pagefind-ignore hidden></div>
 
   <div class="atmo__signed-out" data-view="signed-out" data-pagefind-ignore>
-    <button type="button" class="atmo__badge-button" data-open-login aria-expanded="false" aria-controls="atmo-login" hidden>
-      <span class="atmo__logo" style={`--atmo-logo: url("${logo}")`} aria-hidden="true"></span>
-      <span class="atmo__badge-text">
-        <span class="atmo__badge-small">{label}</span>
-        <span class="atmo__badge-big">Atmosphere Account</span>
-      </span>
-    </button>
     <form class="atmo__login" id="atmo-login" method="post" action={`${base}/login`} data-login-form>
-      <label for="atmo-handle">Sign in to leave a comment, like or repost</label>
+      <label for="atmo-handle">{label}</label>
       <p class="atmo__hint">Any <a href="https://atmosphereaccount.com">Atmosphere account</a> works, including <a href="https://bsky.app">Bluesky</a>: one account for a whole network of open apps.</p>
       <div class="atmo__row">
-        <input
+        <span class="atmo__handle">
+          <span class="atmo__logo" style={`--atmo-logo: url("${logo}")`} aria-hidden="true"></span>
+          <input
           id="atmo-handle"
           name="handle"
           type="text"
           inputmode="url"
-          autocomplete="username"
+          data-1p-ignore
+          data-lpignore="true"
+          data-bwignore
+          data-form-type="other"
           autocapitalize="none"
           spellcheck="false"
           placeholder="alice.bsky.social"
           required
-        />
+          />
+          <ul class="atmo__suggestions" id="atmo-handle-suggestions" role="listbox" aria-label="Matching accounts" data-handle-suggestions hidden></ul>
+        </span>
         <input type="hidden" name="returnTo" value={returnTo} />
-        <button type="submit" class="atmo__button">Continue</button>
+        <button type="submit" class="atmo__button atmo__button--sign-in">
+          <span class="atmo__logo" style={`--atmo-logo: url("${logo}")`} aria-hidden="true"></span>
+          Sign in with Atmosphere
+        </button>
       </div>
       <p class="atmo__hint">
         You'll approve this on your account's own site (Bluesky's, for most people); your password
@@ -86,6 +109,14 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         No account yet? <a href="https://atmosphereaccount.com">Create a free Atmosphere account</a>.
       </p>
     </form>
+    {blueskyLink && (
+      <p class="atmo__elsewhere" data-elsewhere hidden={!blueskyUrl}>
+        Rather not sign in here?{" "}
+        {/* u-syndication: microformats readers learn this is the post's copy on Bluesky. */}
+        <a class="atmo__elsewhere-link u-syndication" href={blueskyUrl || undefined} data-elsewhere-link>Reply on Bluesky instead →</a>{" "}
+        It shows up here just the same, as do likes and reposts.
+      </p>
+    )}
   </div>
 
   <div class="atmo__signed-in" data-view="signed-in" data-pagefind-ignore hidden>
@@ -185,6 +216,8 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
     "account-not-found": "We couldn't find that account. Check the handle and try again.",
     "invalid-handle": "That doesn't look like a handle. It's usually something like alice.bsky.social.",
     "signed-out": "You've been signed out. Please sign in again.",
+    "needs-permission": "To delete comments here, this site needs one more permission from your account.",
+    "not-allowed": "That can't be done here.",
     "new-permissions": "This site can now also like and repost for you, so it needs your permission again. Please sign in again.",
     "too-long": `Posts can be up to ${MAX} characters.`,
     "too-many": "You're going quickly. Please wait a minute and try again.",
@@ -206,7 +239,6 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       const composer = $<HTMLFormElement>("[data-composer]");
       // A clean copy of the comment box, for reply boxes under comments.
       const template = composer.cloneNode(true) as HTMLFormElement;
-      const loginButton = $<HTMLButtonElement>("[data-open-login]");
       const loginForm = $<HTMLFormElement>("[data-login-form]");
       const status = $<HTMLElement>("[data-status]");
       let isSignedIn = false;
@@ -245,7 +277,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         likeCount: number;
         repostCount: number;
       };
-      type Thread = { uri: string; likeCount: number; repostCount: number; likes: Person[]; reposts: Person[]; replies: Reply[] };
+      type Thread = { uri: string; url: string; likeCount: number; repostCount: number; likes: Person[]; reposts: Person[]; replies: Reply[] };
       let thread: Thread | null = null;
       const reactionsBox = $<HTMLElement>("[data-reactions]");
       const repliesList = $<HTMLOListElement>("[data-replies]");
@@ -359,6 +391,11 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
           }
           thread = data.thread;
           post = thread.uri;
+          const elsewhere = this.querySelector<HTMLElement>("[data-elsewhere]");
+          if (elsewhere && thread.url) {
+            elsewhere.querySelector("a")!.href = thread.url;
+            elsewhere.hidden = false;
+          }
           renderReactions();
           repliesList.replaceChildren(...thread.replies.map(replyElement));
         } catch {
@@ -404,19 +441,100 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         renderReactions();
       };
 
-      // With JavaScript, the handle form opens from the Atmosphere button.
-      loginButton.hidden = false;
-      loginForm.hidden = true;
-      const openLogin = () => {
-        loginForm.hidden = false;
-        loginButton.setAttribute("aria-expanded", "true");
-        loginForm.querySelector("input")?.focus();
-      };
-      loginButton.addEventListener("click", () => {
-        if (loginForm.hidden) return openLogin();
-        loginForm.hidden = true;
-        loginButton.setAttribute("aria-expanded", "false");
-      });
+      const openLogin = () => loginForm.querySelector("input")?.focus({ preventScroll: true });
+
+      // Matching accounts under the handle box as the reader types, with their
+      // avatars, so they can see they've found the right one. Picking one signs
+      // in with it. Without JavaScript the box works as a plain text box.
+      {
+        const input = loginForm.querySelector<HTMLInputElement>("#atmo-handle")!;
+        const list = loginForm.querySelector<HTMLUListElement>("[data-handle-suggestions]")!;
+        let found: Suggestion[] = [];
+        let active = -1;
+        let latest = "";
+        let timer: number | undefined;
+        input.setAttribute("role", "combobox");
+        input.setAttribute("aria-autocomplete", "list");
+        input.setAttribute("aria-controls", list.id);
+        input.setAttribute("aria-expanded", "false");
+
+        const close = () => {
+          list.hidden = true;
+          list.replaceChildren();
+          found = [];
+          active = -1;
+          input.setAttribute("aria-expanded", "false");
+          input.removeAttribute("aria-activedescendant");
+        };
+        const highlight = (index: number) => {
+          active = index;
+          list.querySelectorAll("li").forEach((item, i) => item.setAttribute("aria-selected", String(i === index)));
+          if (index >= 0) input.setAttribute("aria-activedescendant", `${list.id}-option-${index}`);
+          else input.removeAttribute("aria-activedescendant");
+        };
+        const choose = (index: number) => {
+          const option = found[index];
+          if (!option) return;
+          input.value = option.handle;
+          close();
+          loginForm.requestSubmit();
+        };
+        const show = (actors: Suggestion[]) => {
+          found = actors.slice(0, 5);
+          if (!found.length || document.activeElement !== input) return close();
+          list.replaceChildren(
+            ...found.map((option, index) => {
+              const item = make("li");
+              item.id = `${list.id}-option-${index}`;
+              item.setAttribute("role", "option");
+              const avatar = make("span", "atmo__avatar atmo__avatar--small");
+              avatar.setAttribute("aria-hidden", "true");
+              setAvatar(avatar, option.displayName || option.handle, option.avatar);
+              item.append(avatar, make("strong", "", option.displayName || option.handle), make("span", "", `@${option.handle}`));
+              // mousedown keeps the focus in the handle box.
+              item.addEventListener("mousedown", (event) => event.preventDefault());
+              item.addEventListener("click", () => choose(index));
+              return item;
+            }),
+          );
+          list.hidden = false;
+          input.setAttribute("aria-expanded", "true");
+          // Nothing is picked until the reader chooses, so Enter still signs in
+          // with exactly what they typed.
+          highlight(-1);
+        };
+
+        input.addEventListener("input", () => {
+          window.clearTimeout(timer);
+          const query = input.value.trim().replace(/^@/, "");
+          latest = query;
+          if (query.length < 2 || query.startsWith("did:") || /\s/.test(query)) return close();
+          timer = window.setTimeout(async () => {
+            try {
+              const response = await fetch(`${base}/typeahead?q=${encodeURIComponent(query)}`, { credentials: "same-origin" });
+              const data = (await response.json()) as { actors?: Suggestion[] };
+              if (query === latest) show(data.actors ?? []);
+            } catch {
+              close();
+            }
+          }, 250);
+        });
+        input.addEventListener("keydown", (event) => {
+          if (list.hidden) return;
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            const step = event.key === "ArrowDown" ? 1 : -1;
+            highlight(active < 0 && step < 0 ? found.length - 1 : (active + step + found.length) % found.length);
+          } else if (event.key === "Enter" && active >= 0) {
+            event.preventDefault();
+            choose(active);
+          } else if (event.key === "Escape") {
+            event.preventDefault();
+            close();
+          }
+        });
+        input.addEventListener("blur", () => window.setTimeout(close, 150));
+      }
 
       // An avatar picture, or the name's first letter if there isn't one.
       const setAvatar = (slot: HTMLElement, name: string, src?: string) => {
@@ -765,9 +883,89 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
           actions.append(reply, commentButton("like", comment), commentButton("repost", comment));
           (comment.querySelector("article") ?? comment).append(actions);
         });
+        addDeleteButtons();
         return added;
       };
 
+      // Delete, under the signed-in reader's own comments only.
+      const isMine = (comment: HTMLElement) => !!me.did && !!comment.dataset.atmosphereUri?.startsWith(`at://${me.did}/`);
+
+      const deleteComment = async (comment: HTMLElement, panel: HTMLElement) => {
+        const uri = comment.dataset.atmosphereUri!;
+        panel.replaceChildren(make("span", "atmo-comment-delete__text", "Deleting…"));
+        try {
+          const response = await send("delete", { post: uri });
+          const data = (await response.json()) as { error?: string };
+          if (response.ok) {
+            comment.remove();
+            say("Your comment was deleted.");
+            this.dispatchEvent(new CustomEvent("atmosphere:deleted", { detail: { uri }, bubbles: true }));
+            return;
+          }
+          if (data.error === "needs-permission") return askDeletePermission(comment, panel);
+          panel.remove();
+          handleError(data.error ?? "error");
+        } catch {
+          panel.remove();
+          say(MESSAGES.error);
+        }
+      };
+
+      // 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", "Continue to approve"), { type: "submit" });
+        const cancel = Object.assign(make("button", "atmo-comment-action", "Cancel"), { type: "button" });
+        cancel.addEventListener("click", () => panel.remove());
+        form.append(go, cancel);
+        panel.replaceChildren(
+          make(
+            "span",
+            "atmo-comment-delete__text",
+            "To delete comments here, this site needs one more permission from your account. You can also delete it in any Bluesky app.",
+          ),
+          form,
+        );
+        go.focus();
+      };
+
+      const deleteButton = (comment: HTMLElement) => {
+        const button = Object.assign(make("button", "atmo-comment-action atmo-comment-action--delete", "Delete"), { type: "button" });
+        button.setAttribute("aria-label", "Delete your comment");
+        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", "Delete"), { type: "button" });
+          const no = Object.assign(make("button", "atmo-comment-action", "Cancel"), { type: "button" });
+          yes.addEventListener("click", () => deleteComment(comment, panel));
+          no.addEventListener("click", () => {
+            panel.remove();
+            button.focus();
+          });
+          panel.append(make("span", "atmo-comment-delete__text", "Delete this comment from Bluesky?"), yes, no);
+          panel.setAttribute("role", "group");
+          panel.setAttribute("aria-label", "Delete your comment");
+          actions.after(panel);
+          no.focus();
+        });
+        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));
+        });
+      };
+
       // Which of the post and its comments the reader has already liked or reposted.
       const loadState = async () => {
         if (!post) return;
@@ -809,9 +1007,26 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         isSignedIn = signed;
         signedOut.hidden = signed;
         signedIn.hidden = !signed;
-        if (!signed) return closeReplies();
+        if (!signed) {
+          document.querySelectorAll(".atmo-comment-action--delete, .atmo-comment-delete").forEach((part) => part.remove());
+          return closeReplies();
+        }
         addCommentActions();
         await loadState();
+        // Back from approving the delete permission: finish the delete they asked for.
+        const pending = location.hash.match(/^#atmo-delete=(.+)$/);
+        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);
+            comment.scrollIntoView({ block: "center" });
+            await deleteComment(comment, panel);
+          }
+        }
       };
 
       // A message from the sign-in round trip (?atmosphere=…), then tidy the address.
@@ -900,50 +1115,49 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
     display: none !important;
   }
 
-  /* The button follows the Atmosphere Account sign-in badge: the logo, then
-     two lines of monospaced text, in a rounded outline. */
-  .atmo__badge-button {
-    display: inline-flex;
-    align-items: center;
-    gap: 12px;
-    padding: 9px 16px 9px 12px;
-    border: 2px solid currentColor;
-    border-radius: 12px;
-    background: none;
-    color: var(--atmo-text, currentColor);
-    font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-    text-align: left;
-    cursor: pointer;
+  /* The Atmosphere Account logo inside the handle box, on the left, and at
+     the start of the sign-in button. It is single-colour, so it is drawn in
+     the muted text colour in the box and the button's text colour on it. */
+  .atmo__handle {
+    position: relative;
+    display: flex;
+    flex: 1 1 220px;
+    min-width: 0;
   }
 
-  .atmo__badge-button:hover,
-  .atmo__badge-button:focus-visible,
-  .atmo__badge-button[aria-expanded="true"] {
-    color: var(--atmo-accent, #1185fe);
+  /* Matching accounts sit under the handle box, as wide as it. */
+  .atmo__handle .atmo__suggestions {
+    width: 100%;
   }
 
-  /* The logo is single-colour, so it is drawn in the text colour. */
-  .atmo__logo {
-    flex: none;
-    width: 40px;
-    height: 40px;
-    background-color: currentColor;
+  .atmo__handle .atmo__logo {
+    position: absolute;
+    top: 50%;
+    left: 11px;
+    width: 20px;
+    height: 20px;
+    transform: translateY(-50%);
+    background-color: var(--atmo-muted, currentColor);
     mask: var(--atmo-logo) center / contain no-repeat;
+    pointer-events: none;
   }
 
-  .atmo__badge-text {
-    display: grid;
-    line-height: 1.15;
+  .atmo .atmo__handle input[type="text"] {
+    padding-left: 40px;
   }
 
-  .atmo__badge-small {
-    font-size: 13px;
+  .atmo__button--sign-in {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
   }
 
-  .atmo__badge-big {
-    font-size: 19px;
-    font-weight: 700;
-    white-space: nowrap;
+  .atmo__button--sign-in .atmo__logo {
+    flex: none;
+    width: 20px;
+    height: 20px;
+    background-color: currentColor;
+    mask: var(--atmo-logo) center / contain no-repeat;
   }
 
   /* The comment box when it sits under a comment being replied to. */
@@ -955,6 +1169,16 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
     margin-top: 10px;
   }
 
+  .atmo__elsewhere {
+    max-width: 560px;
+    margin: 14px 0 0;
+    font-size: 0.9em;
+  }
+
+  .atmo__elsewhere-link {
+    font-weight: 700;
+  }
+
   .atmo__login,
   .atmo__composer {
     display: grid;
@@ -1459,6 +1683,24 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
     margin-top: 8px;
   }
 
+  :global(.atmo-comment-delete) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px 12px;
+    margin-top: 8px;
+    font-size: 0.9em;
+  }
+
+  :global(.atmo-comment-delete form) {
+    display: contents;
+  }
+
+  :global(.atmo-comment-delete__text) {
+    color: var(--atmo-muted, inherit);
+  }
+
+
   :global(.atmo-comment-action) {
     display: inline-flex;
     align-items: center;
@@ -1473,6 +1715,15 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
     cursor: pointer;
   }
 
+  :global(.atmo-comment-action--delete) {
+    margin-left: auto;
+  }
+
+  :global(.atmo-comment-action--danger) {
+    color: var(--atmo-danger, #c0392b);
+    font-weight: 700;
+  }
+
   :global(.atmo-comment-action:hover),
   :global(.atmo-comment-action:focus-visible),
   :global(.atmo-comment-action[aria-pressed="true"]) {

package/index.mjs

@@ -6,11 +6,13 @@
 //
 // Sign-in uses AT Protocol OAuth straight to the reader's own account host:
 // no third-party login service is involved. This site only ever holds a
-// grant to create and delete posts, likes and reposts (see SCOPE in
-// lib/oauth.ts).
+// grant to create posts and to create and delete likes and reposts, plus, if
+// a reader allows it when they first delete a comment, to delete posts (see
+// SCOPE and DELETE_SCOPE in lib/oauth.ts).
 //
-// It adds these routes under `base` (default /atmosphere):
-//   client-metadata.json, jwks.json  what account hosts read to know the site
+// It adds /oauth-client-metadata.json at the site's root (what account hosts
+// read to know the site), and these routes under `base` (default /atmosphere):
+//   jwks.json                        the public half of the site's signing key
 //   login (POST)                     starts sign-in with the reader's handle
 //   callback                         where the reader's host sends them back
 //   logout (POST)                    signs out and revokes the site's grant
@@ -30,7 +32,6 @@ import { fileURLToPath } from "node:url";
 const VIRTUAL_ID = "virtual:atmosphere-comments/settings";
 
 const ROUTES = {
-  "client-metadata.json": "client-metadata.json.ts",
   "jwks.json": "jwks.json.ts",
   login: "login.ts",
   callback: "callback.ts",
@@ -39,6 +40,7 @@ const ROUTES = {
   comment: "comment.ts",
   state: "state.ts",
   react: "react.ts",
+  delete: "delete.ts",
   post: "post.ts",
   media: "media.ts",
   typeahead: "typeahead.ts",
@@ -80,6 +82,15 @@ export default function atmosphereComments(options) {
           hidden: options.hidden ?? [],
         };
 
+        // The client metadata lives at the address account hosts treat as the
+        // convention, so Bluesky's approval page names the app by the site's
+        // address alone (saltedlolly.com) rather than the full file address.
+        injectRoute({
+          pattern: "/oauth-client-metadata.json",
+          entrypoint: fileURLToPath(new URL("./routes/client-metadata.json.ts", import.meta.url)),
+          prerender: false,
+        });
+
         for (const [path, file] of Object.entries(ROUTES)) {
           injectRoute({
             pattern: `${base}/${path}`,

package/lib/oauth.ts

@@ -2,7 +2,7 @@
 // permission to post comments on their behalf.
 //
 // - Live, the site is a "confidential client": account hosts read its
-//   client-metadata.json, and it proves who it is with a private key
+//   /oauth-client-metadata.json, and it proves who it is with a private key
 //   (ATMOSPHERE_PRIVATE_JWK, server-only). Sign-ins can then last for months.
 // - In `astro dev`, it uses the protocol's local-testing client (no key, no
 //   public address needed). Open the site at http://127.0.0.1:<port>, not
@@ -19,31 +19,42 @@ import { getSecret } from "astro:env/server";
 import settings from "./settings";
 import { fileStore } from "./store";
 
-// Only what commenting needs: create (and delete again) posts, likes and
-// reposts, and read posts as the reader sees them (to know whether they've
+// Only what commenting needs: create posts, create (and delete again) likes
+// and reposts, and read posts as the reader sees them (to know whether they've
 // already liked or reposted), through Bluesky's AppView.
 export const SCOPE = [
   "atproto",
-  "repo:app.bsky.feed.post?action=create&action=delete",
+  "repo:app.bsky.feed.post?action=create",
   "repo:app.bsky.feed.like?action=create&action=delete",
   "repo:app.bsky.feed.repost?action=create&action=delete",
   "rpc:app.bsky.feed.getPosts?aud=did:web:api.bsky.app%23bsky_appview",
 ].join(" ");
 
+// Deleting posts is asked for separately, only when a reader first deletes a
+// comment here, so most readers never grant it. (A permission can only name a
+// kind of record, not particular posts: the delete route itself makes sure it
+// is only used on the reader's own comments under the site's posts.)
+export const DELETE_SCOPE = "repo:app.bsky.feed.post?action=delete";
+
+// Everything the site may ask for, which its client metadata has to list.
+const ALL_SCOPES = `${SCOPE} ${DELETE_SCOPE}`;
+
 const KEY_ID = "atmosphere-comments-1";
 
 export const callbackPath = `${settings.base}/callback`;
 
 export function clientMetadata() {
   return {
-    client_id: `${settings.site}${settings.base}/client-metadata.json`,
+    // At the site's root, the address account hosts treat as the convention:
+    // Bluesky's approval page then shows just the site's address.
+    client_id: `${settings.site}/oauth-client-metadata.json`,
     client_name: settings.clientName,
     client_uri: settings.site,
     ...(settings.logoUri && { logo_uri: settings.logoUri }),
     ...(settings.policyUri && { policy_uri: settings.policyUri }),
     ...(settings.tosUri && { tos_uri: settings.tosUri }),
     redirect_uris: [`${settings.site}${callbackPath}`] as [string],
-    scope: SCOPE,
+    scope: ALL_SCOPES,
     grant_types: ["authorization_code", "refresh_token"] as ["authorization_code", "refresh_token"],
     response_types: ["code"] as ["code"],
     application_type: "web" as const,
@@ -84,7 +95,7 @@ export function oauthClient(origin: string): Promise<NodeOAuthClient> {
       return new NodeOAuthClient({
         ...common,
         clientMetadata: buildAtprotoLoopbackClientMetadata({
-          scope: SCOPE,
+          scope: ALL_SCOPES,
           redirect_uris: [`${local.origin}${callbackPath}`],
         }),
       });

package/lib/reader.ts

@@ -9,7 +9,7 @@ import { oauthClient, SCOPE } from "./oauth";
 import settings from "./settings";
 import { signedInDid, signOut } from "./visitor";
 
-export type Reader = { did: string; session: OAuthSession };
+export type Reader = { did: string; session: OAuthSession; scopes: string[] };
 
 const APPVIEW_PROXY = "did:web:api.bsky.app#bsky_appview";
 const POST_URI = /^at:\/\/(did:[a-z0-9]+:[a-zA-Z0-9._:%-]+)\/app\.bsky\.feed\.post\/([a-zA-Z0-9._~-]+)$/;
@@ -29,12 +29,13 @@ export async function reader(request: Request, url: URL, cookies: AstroCookies):
     const session = await (await oauthClient(url.origin)).restore(did);
     // Compared by permission name ("repo:app.bsky.feed.like"), since a host
     // may write the parameters after it differently.
-    const granted = (await session.getTokenInfo(false)).scope.split(" ").map((part) => part.split("?")[0]);
+    const scopes = (await session.getTokenInfo(false)).scope.split(" ");
+    const granted = scopes.map((part) => part.split("?")[0]);
     if (!SCOPE.split(" ").every((part) => granted.includes(part.split("?")[0]))) {
       await signOut(cookies);
       return json({ error: "new-permissions" }, 401);
     }
-    return { did, session };
+    return { did, session, scopes };
   } catch {
     // The grant has expired or been revoked: the reader needs to sign in again.
     await signOut(cookies);
@@ -42,6 +43,20 @@ export async function reader(request: Request, url: URL, cookies: AstroCookies):
   }
 }
 
+/**
+ * Whether the reader's grant allows `action` on records of `collection`: a
+ * repo permission for that collection (or all of them) listing the action,
+ * or listing no actions, which means all of them.
+ */
+export function allows(reader: Reader, collection: string, action: string): boolean {
+  return reader.scopes.some((scope) => {
+    const [name, query = ""] = scope.split("?");
+    if (name !== `repo:${collection}` && name !== "repo:*") return false;
+    const actions = new URLSearchParams(query).getAll("action");
+    return !actions.length || actions.includes(action);
+  });
+}
+
 /** True for a post by one of the site's own accounts (an announcement). */
 export function isSitePost(uri: unknown): uri is string {
   const match = typeof uri === "string" ? POST_URI.exec(uri) : null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-atmosphere-comments",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Atmosphere Comments for Astro: Bluesky comments, likes, reposts and quote posts for Astro sites; readers sign in with their Atmosphere (AT Protocol) account and respond without leaving the page.",
   "type": "module",
   "license": "MIT",
@@ -31,7 +31,7 @@
   },
   "types": "./index.d.ts",
   "bin": {
-    "astro-atmosphere-comments": "./bin/cli.mjs"
+    "astro-atmosphere-comments": "bin/cli.mjs"
   },
   "files": [
     "index.mjs",

package/routes/delete.ts

@@ -0,0 +1,41 @@
+// Deletes one of the signed-in reader's own comments: a post of theirs that
+// is a reply somewhere under one of the site's announcements. Nothing else,
+// even though the permission behind it covers all of the reader's posts.
+// Body: { post }. Readers who haven't allowed deleting yet get
+// "needs-permission", and the page offers to ask their account host for it.
+import type { APIRoute } from "astro";
+import { json } from "../lib/http";
+import { allows, deleteRecord, isPostUri, isSitePost, postsAsReader, rateLimit, reader } from "../lib/reader";
+import { forgetThread } from "../lib/thread";
+
+const tooMany = rateLimit(10, 60);
+
+export const POST: APIRoute = async ({ request, url, cookies }) => {
+  const signedIn = await reader(request, url, cookies);
+  if (signedIn instanceof Response) return signedIn;
+
+  let body: { post?: unknown };
+  try {
+    body = await request.json();
+  } catch {
+    return json({ error: "bad-request" }, 400);
+  }
+  const { post } = body;
+  if (!isPostUri(post) || !post.startsWith(`at://${signedIn.did}/`)) return json({ error: "not-allowed" }, 400);
+  if (!allows(signedIn, "app.bsky.feed.post", "delete")) return json({ error: "needs-permission" }, 403);
+  if (tooMany(signedIn.did)) return json({ error: "too-many" }, 429);
+
+  try {
+    const [view] = await postsAsReader(signedIn.session, [post]);
+    if (!view) return json({ error: "not-found" }, 404);
+    // Only a reply under one of the site's announcements, never a post of its own.
+    const root = view.record?.reply?.root?.uri;
+    if (!isSitePost(root)) return json({ error: "not-allowed" }, 400);
+    await deleteRecord(signedIn, view.uri);
+    forgetThread(root);
+    return json({ deleted: view.uri });
+  } catch (error) {
+    console.warn("[atmosphere] delete failed:", error instanceof Error ? error.message : error);
+    return json({ error: "post-failed" }, 502);
+  }
+};

package/routes/login.ts

@@ -3,7 +3,7 @@
 // approve this site's request to post comments for them.
 import type { APIRoute } from "astro";
 import { safeReturnPath, withStatus } from "../lib/http";
-import { oauthClient, SCOPE } from "../lib/oauth";
+import { DELETE_SCOPE, oauthClient, SCOPE } from "../lib/oauth";
 
 export const POST: APIRoute = async ({ request, url, redirect }) => {
   const form = await request.formData();
@@ -19,7 +19,9 @@ export const POST: APIRoute = async ({ request, url, redirect }) => {
   try {
     const client = await oauthClient(url.origin);
     const authorizeUrl = await client.authorize(handle, {
-      scope: SCOPE,
+      // The delete route sends readers back here (with permission=delete) when
+      // they first delete a comment and haven't allowed that yet.
+      scope: form.get("permission") === "delete" ? `${SCOPE} ${DELETE_SCOPE}` : SCOPE,
       state: JSON.stringify({ returnTo }),
     });
     return redirect(authorizeUrl.href, 303);

package/routes/typeahead.ts

@@ -1,6 +1,10 @@
-// Suggestions for an @mention as the reader types (?q=start of a handle or
-// name), from Bluesky's public typeahead search. Only for signed-in readers,
-// so it can't be used as a free search proxy; avatars come through this site.
+// Account suggestions as the reader types (?q=start of a handle or name), from
+// Bluesky's public typeahead search: for @mentions in the comment box, and for
+// the handle box when signing in, so readers can see they've found the right
+// account. Avatars come through this site. Signed-in readers are limited per
+// account; everyone else per address, with an overall cap as well (behind a
+// proxy every visitor may share one address), so the site can't be used to
+// flood Bluesky's search. Answers are remembered for a minute.
 import type { APIRoute } from "astro";
 import { json } from "../lib/http";
 import { rateLimit } from "../lib/reader";
@@ -8,24 +12,50 @@ import settings from "../lib/settings";
 import { rememberAvatar } from "../lib/avatars";
 import { signedInDid } from "../lib/visitor";
 
-const tooMany = rateLimit(60, 1200);
+const perReader = rateLimit(60, 1200);
+const perAddress = rateLimit(30, 300);
+const signedOutOverall = rateLimit(300, 6000);
 
-export const GET: APIRoute = async ({ url, cookies }) => {
+type Actor = { did: string; handle: string; displayName?: string; avatar?: string };
+const recent = new Map<string, { actors: Actor[]; at: number }>();
+const REMEMBER_MS = 60 * 1000;
+const MAX_REMEMBERED = 500;
+
+async function search(q: string): Promise<Actor[]> {
+  const key = q.toLowerCase();
+  const known = recent.get(key);
+  if (known && Date.now() - known.at < REMEMBER_MS) return known.actors;
+  const response = await fetch(
+    `https://public.api.bsky.app/xrpc/app.bsky.actor.searchActorsTypeahead?q=${encodeURIComponent(q)}&limit=6`,
+    { signal: AbortSignal.timeout(4000) },
+  );
+  if (!response.ok) return [];
+  const actors = ((await response.json()) as { actors?: Actor[] }).actors ?? [];
+  if (recent.size >= MAX_REMEMBERED) recent.delete(recent.keys().next().value!);
+  recent.set(key, { actors, at: Date.now() });
+  return actors;
+}
+
+export const GET: APIRoute = async ({ url, cookies, clientAddress }) => {
+  const q = (url.searchParams.get("q") ?? "").trim().replace(/^@/, "");
   const did = await signedInDid(cookies);
-  if (!did) return json({ error: "signed-out" }, 401);
-  const q = (url.searchParams.get("q") ?? "").trim();
-  if (!q || q.length > 64 || /[\s<>"]/.test(q)) return json({ actors: [] });
-  if (tooMany(did)) return json({ error: "too-many" }, 429);
+  // One letter is enough for an @mention; signing in needs two.
+  if (!q || (!did && q.length < 2) || q.length > 64 || /[\s<>"]/.test(q)) return json({ actors: [] });
+
+  if (did) {
+    if (perReader(did)) return json({ error: "too-many" }, 429);
+  } else {
+    let address = "unknown";
+    try {
+      address = clientAddress;
+    } catch {
+      // Some adapters can't tell; the overall cap still applies.
+    }
+    if (perAddress(address) || signedOutOverall("all")) return json({ error: "too-many" }, 429);
+  }
+
   try {
-    const response = await fetch(
-      `https://public.api.bsky.app/xrpc/app.bsky.actor.searchActorsTypeahead?q=${encodeURIComponent(q)}&limit=6`,
-      { signal: AbortSignal.timeout(4000) },
-    );
-    if (!response.ok) return json({ actors: [] });
-    const data = (await response.json()) as {
-      actors?: { did: string; handle: string; displayName?: string; avatar?: string }[];
-    };
-    const actors = (data.actors ?? []).map((actor) => {
+    const actors = (await search(q)).map((actor) => {
       if (actor.avatar) rememberAvatar(actor.did, actor.avatar);
       return {
         handle: actor.handle,