@rmdes/indiekit-endpoint-activitypub 1.1.18 → 2.0.0

package/index.js

@@ -58,6 +58,7 @@ import {
   featuredTagsRemoveController,
 } from "./lib/controllers/featured-tags.js";
 import { resolveController } from "./lib/controllers/resolve.js";
+import { publicProfileController } from "./lib/controllers/public-profile.js";
 import {
   refollowPauseController,
   refollowResumeController,
@@ -85,6 +86,8 @@ const defaults = {
   logLevel: "warning",
   timelineRetention: 1000,
   notificationRetentionDays: 30,
+  debugDashboard: false,
+  debugPassword: "",
 };
 
 export default class ActivityPubEndpoint {
@@ -158,6 +161,10 @@ export default class ActivityPubEndpoint {
       return self._fedifyMiddleware(req, res, next);
     });
 
+    // HTML fallback for actor URL — serve a public profile page.
+    // Fedify only serves JSON-LD; browsers get 406 and fall through here.
+    router.get("/users/:identifier", publicProfileController(self));
+
     // Catch-all for federation paths that Fedify didn't handle (e.g. GET
     // on inbox). Without this, they fall through to Indiekit's auth
     // middleware and redirect to the login page.
@@ -500,7 +507,7 @@ export default class ActivityPubEndpoint {
     }
 
     try {
-      const { Follow } = await import("@fedify/fedify");
+      const { Follow } = await import("@fedify/fedify/vocab");
       const handle = this.options.actor.handle;
       const ctx = this._federation.createContext(
         new URL(this._publicationUrl),
@@ -602,7 +609,7 @@ export default class ActivityPubEndpoint {
     }
 
     try {
-      const { Follow, Undo } = await import("@fedify/fedify");
+      const { Follow, Undo } = await import("@fedify/fedify/vocab");
       const handle = this.options.actor.handle;
       const ctx = this._federation.createContext(
         new URL(this._publicationUrl),
@@ -678,12 +685,16 @@ export default class ActivityPubEndpoint {
    * Send an Update(Person) activity to all followers so remote servers
    * re-fetch the actor object (picking up profile changes, new featured
    * collections, attachments, etc.).
+   *
+   * Delivery is batched to avoid a thundering herd: hundreds of remote
+   * servers simultaneously re-fetching the actor, featured posts, and
+   * featured tags after receiving the Update all at once.
    */
   async broadcastActorUpdate() {
     if (!this._federation) return;
 
     try {
-      const { Update } = await import("@fedify/fedify");
+      const { Update } = await import("@fedify/fedify/vocab");
       const handle = this.options.actor.handle;
       const ctx = this._federation.createContext(
         new URL(this._publicationUrl),
@@ -709,21 +720,80 @@ export default class ActivityPubEndpoint {
         object: actor,
       });
 
-      await ctx.sendActivity(
-        { identifier: handle },
-        "followers",
-        update,
-        { preferSharedInbox: true },
+      // Fetch followers and deduplicate by shared inbox so each remote
+      // server only gets one delivery (same as preferSharedInbox but
+      // gives us control over batching).
+      const followers = await this._collections.ap_followers
+        .find({})
+        .project({ actorUrl: 1, inbox: 1, sharedInbox: 1 })
+        .toArray();
+
+      // Group by shared inbox (or direct inbox if none)
+      const inboxMap = new Map();
+      for (const f of followers) {
+        const key = f.sharedInbox || f.inbox;
+        if (key && !inboxMap.has(key)) {
+          inboxMap.set(key, f);
+        }
+      }
+
+      const uniqueRecipients = [...inboxMap.values()];
+      const BATCH_SIZE = 25;
+      const BATCH_DELAY_MS = 5000;
+      let delivered = 0;
+      let failed = 0;
+
+      console.info(
+        `[ActivityPub] Broadcasting Update(Person) to ${uniqueRecipients.length} ` +
+          `unique inboxes (${followers.length} followers) in batches of ${BATCH_SIZE}`,
       );
 
-      console.info("[ActivityPub] Sent Update(Person) to followers");
+      for (let i = 0; i < uniqueRecipients.length; i += BATCH_SIZE) {
+        const batch = uniqueRecipients.slice(i, i + BATCH_SIZE);
+
+        // Build Fedify-compatible Recipient objects:
+        // extractInboxes() reads: recipient.id, recipient.inboxId,
+        // recipient.endpoints?.sharedInbox
+        const recipients = batch.map((f) => ({
+          id: new URL(f.actorUrl),
+          inboxId: new URL(f.inbox || f.sharedInbox),
+          endpoints: f.sharedInbox
+            ? { sharedInbox: new URL(f.sharedInbox) }
+            : undefined,
+        }));
+
+        try {
+          await ctx.sendActivity(
+            { identifier: handle },
+            recipients,
+            update,
+            { preferSharedInbox: true },
+          );
+          delivered += batch.length;
+        } catch (error) {
+          failed += batch.length;
+          console.warn(
+            `[ActivityPub] Batch ${Math.floor(i / BATCH_SIZE) + 1} failed: ${error.message}`,
+          );
+        }
+
+        // Stagger batches so remote servers don't all re-fetch at once
+        if (i + BATCH_SIZE < uniqueRecipients.length) {
+          await new Promise((resolve) => setTimeout(resolve, BATCH_DELAY_MS));
+        }
+      }
+
+      console.info(
+        `[ActivityPub] Update(Person) broadcast complete: ` +
+          `${delivered} delivered, ${failed} failed`,
+      );
 
       await logActivity(this._collections.ap_activities, {
         direction: "outbound",
         type: "Update",
         actorUrl: this._publicationUrl,
         objectUrl: this._getActorUrl(),
-        summary: "Sent Update(Person) to followers",
+        summary: `Sent Update(Person) to ${delivered}/${uniqueRecipients.length} inboxes`,
       }).catch(() => {});
     } catch (error) {
       console.error(
@@ -899,6 +969,8 @@ export default class ActivityPubEndpoint {
       parallelWorkers: this.options.parallelWorkers,
       actorType: this.options.actorType,
       logLevel: this.options.logLevel,
+      debugDashboard: this.options.debugDashboard,
+      debugPassword: this.options.debugPassword,
     });
 
     this._federation = federation;

package/lib/batch-refollow.js

@@ -11,7 +11,7 @@
  *   import → refollow:sent → refollow:failed (after MAX_RETRIES)
  */
 
-import { Follow } from "@fedify/fedify";
+import { Follow } from "@fedify/fedify/vocab";
 import { logActivity } from "./activity-log.js";
 
 const BATCH_SIZE = 10;

package/lib/controllers/compose.js

@@ -188,7 +188,7 @@ export function submitComposeController(mountPath, plugin) {
           });
         }
 
-        const { Create, Note } = await import("@fedify/fedify");
+        const { Create, Note } = await import("@fedify/fedify/vocab");
         const handle = plugin.options.actor.handle;
         const ctx = plugin._federation.createContext(
           new URL(plugin._publicationUrl),

package/lib/controllers/interactions-boost.js

@@ -34,7 +34,7 @@ export function boostController(mountPath, plugin) {
         });
       }
 
-      const { Announce } = await import("@fedify/fedify");
+      const { Announce } = await import("@fedify/fedify/vocab");
       const handle = plugin.options.actor.handle;
       const ctx = plugin._federation.createContext(
         new URL(plugin._publicationUrl),
@@ -168,7 +168,7 @@ export function unboostController(mountPath, plugin) {
         });
       }
 
-      const { Announce, Undo } = await import("@fedify/fedify");
+      const { Announce, Undo } = await import("@fedify/fedify/vocab");
       const handle = plugin.options.actor.handle;
       const ctx = plugin._federation.createContext(
         new URL(plugin._publicationUrl),

package/lib/controllers/interactions-like.js

@@ -36,7 +36,7 @@ export function likeController(mountPath, plugin) {
         });
       }
 
-      const { Like } = await import("@fedify/fedify");
+      const { Like } = await import("@fedify/fedify/vocab");
       const handle = plugin.options.actor.handle;
       const ctx = plugin._federation.createContext(
         new URL(plugin._publicationUrl),
@@ -191,7 +191,7 @@ export function unlikeController(mountPath, plugin) {
         });
       }
 
-      const { Like, Undo } = await import("@fedify/fedify");
+      const { Like, Undo } = await import("@fedify/fedify/vocab");
       const handle = plugin.options.actor.handle;
       const ctx = plugin._federation.createContext(
         new URL(plugin._publicationUrl),

package/lib/controllers/moderation.js

@@ -144,7 +144,7 @@ export function blockController(mountPath, plugin) {
       // Send Block activity via federation
       if (plugin._federation) {
         try {
-          const { Block } = await import("@fedify/fedify");
+          const { Block } = await import("@fedify/fedify/vocab");
           const handle = plugin.options.actor.handle;
           const ctx = plugin._federation.createContext(
             new URL(plugin._publicationUrl),
@@ -223,7 +223,7 @@ export function unblockController(mountPath, plugin) {
       // Send Undo(Block) via federation
       if (plugin._federation) {
         try {
-          const { Block, Undo } = await import("@fedify/fedify");
+          const { Block, Undo } = await import("@fedify/fedify/vocab");
           const handle = plugin.options.actor.handle;
           const ctx = plugin._federation.createContext(
             new URL(plugin._publicationUrl),

package/lib/controllers/post-detail.js

@@ -1,5 +1,5 @@
 // Post detail controller — view individual AP posts/notes/articles
-import { Article, Note, Person, Service, Application } from "@fedify/fedify";
+import { Article, Note, Person, Service, Application } from "@fedify/fedify/vocab";
 import { getToken } from "../csrf.js";
 import { extractObjectData } from "../timeline-store.js";
 import { getCached, setCache } from "../lookup-cache.js";

package/lib/controllers/public-profile.js

@@ -0,0 +1,87 @@
+/**
+ * Public profile controller — renders a standalone HTML profile page
+ * for browsers visiting the actor URL (e.g. /activitypub/users/rick).
+ *
+ * Fedify handles ActivityPub clients via content negotiation; browsers
+ * that send Accept: text/html fall through to this controller.
+ */
+
+export function publicProfileController(plugin) {
+  return async (req, res, next) => {
+    const identifier = req.params.identifier;
+
+    // Only serve our own actor; unknown handles fall through to 404
+    if (identifier !== plugin.options.actor.handle) {
+      return next();
+    }
+
+    try {
+      const { application } = req.app.locals;
+      const collections = application.collections;
+
+      const apProfile = collections.get("ap_profile");
+      const apFollowers = collections.get("ap_followers");
+      const apFollowing = collections.get("ap_following");
+      const apFeatured = collections.get("ap_featured");
+      const postsCollection = collections.get("posts");
+
+      // Parallel queries for all profile data
+      const [profile, followerCount, followingCount, postCount, featuredDocs, recentPosts] =
+        await Promise.all([
+          apProfile ? apProfile.findOne({}) : null,
+          apFollowers ? apFollowers.countDocuments() : 0,
+          apFollowing ? apFollowing.countDocuments() : 0,
+          postsCollection ? postsCollection.countDocuments() : 0,
+          apFeatured
+            ? apFeatured.find().sort({ pinnedAt: -1 }).toArray()
+            : [],
+          postsCollection
+            ? postsCollection
+                .find()
+                .sort({ "properties.published": -1 })
+                .limit(20)
+                .toArray()
+            : [],
+        ]);
+
+      // Enrich pinned posts with title/type from posts collection
+      const pinned = [];
+      for (const doc of featuredDocs) {
+        if (!postsCollection) break;
+        const post = await postsCollection.findOne({
+          "properties.url": doc.postUrl,
+        });
+        if (post?.properties) {
+          pinned.push({
+            url: doc.postUrl,
+            title:
+              post.properties.name ||
+              post.properties.content?.text?.slice(0, 120) ||
+              doc.postUrl,
+            type: post.properties["post-type"] || "note",
+            published: post.properties.published,
+          });
+        }
+      }
+
+      const domain = new URL(plugin._publicationUrl).hostname;
+      const handle = plugin.options.actor.handle;
+
+      res.render("activitypub-public-profile", {
+        profile: profile || {},
+        handle,
+        domain,
+        fullHandle: `@${handle}@${domain}`,
+        actorUrl: `${plugin._publicationUrl}activitypub/users/${handle}`,
+        siteUrl: plugin._publicationUrl,
+        followerCount,
+        followingCount,
+        postCount,
+        pinned,
+        recentPosts: recentPosts.map((p) => p.properties),
+      });
+    } catch (error) {
+      next(error);
+    }
+  };
+}

package/lib/controllers/resolve.js

@@ -10,7 +10,7 @@ import {
   Application,
   Organization,
   Group,
-} from "@fedify/fedify";
+} from "@fedify/fedify/vocab";
 
 /**
  * GET /admin/reader/resolve?q=<url-or-handle>

package/lib/federation-setup.js

@@ -9,6 +9,16 @@
 import { AsyncLocalStorage } from "node:async_hooks";
 import { createRequire } from "node:module";
 import { Temporal } from "@js-temporal/polyfill";
+import {
+  createFederation,
+  InProcessMessageQueue,
+  ParallelMessageQueue,
+} from "@fedify/fedify";
+import {
+  exportJwk,
+  generateCryptoKeyPair,
+  importJwk,
+} from "@fedify/fedify/sig";
 import {
   Application,
   Article,
@@ -17,21 +27,15 @@ import {
   Group,
   Hashtag,
   Image,
-  InProcessMessageQueue,
   Note,
   Organization,
-  ParallelMessageQueue,
   Person,
   PropertyValue,
   Service,
-  createFederation,
-  exportJwk,
-  generateCryptoKeyPair,
-  importJwk,
-  importSpki,
-} from "@fedify/fedify";
+} from "@fedify/fedify/vocab";
 import { configure, getConsoleSink } from "@logtape/logtape";
 import { RedisMessageQueue } from "@fedify/redis";
+import { createFederationDebugger } from "@fedify/debugger";
 import Redis from "ioredis";
 import { MongoKvStore } from "./kv-store.js";
 import { registerInboxListeners } from "./inbox-listeners.js";
@@ -61,17 +65,21 @@ export function setupFederation(options) {
     parallelWorkers = 5,
     actorType = "Person",
     logLevel = "warning",
+    debugDashboard = false,
+    debugPassword = "",
   } = options;
 
   // Map config string to Fedify actor class
   const actorTypeMap = { Person, Service, Application, Organization, Group };
   const ActorClass = actorTypeMap[actorType] || Person;
 
-  // Configure LogTape for Fedify delivery logging (once per process)
+  // Configure LogTape for Fedify delivery logging (once per process).
+  // When the debug dashboard is enabled, skip this — the debugger
+  // auto-configures LogTape with per-trace log collection + OpenTelemetry.
   // Valid levels: "debug" | "info" | "warning" | "error" | "fatal"
   const validLevels = ["debug", "info", "warning", "error", "fatal"];
   const resolvedLevel = validLevels.includes(logLevel) ? logLevel : "warning";
-  if (!_logtapeConfigured) {
+  if (!debugDashboard && !_logtapeConfigured) {
     _logtapeConfigured = true;
     configure({
       contextLocalStorage: new AsyncLocalStorage(),
@@ -186,7 +194,7 @@ export function setupFederation(options) {
 
       if (rsaDoc?.publicKeyPem && rsaDoc?.privateKeyPem) {
         try {
-          const publicKey = await importSpki(rsaDoc.publicKeyPem);
+          const publicKey = await importSpkiPem(rsaDoc.publicKeyPem);
           const privateKey = await importPkcs8Pem(rsaDoc.privateKeyPem);
           keyPairs.push({ publicKey, privateKey });
         } catch {
@@ -284,13 +292,13 @@ export function setupFederation(options) {
   setupObjectDispatchers(federation, mountPath, handle, collections, publicationUrl);
 
   // --- NodeInfo ---
-  let softwareVersion = { major: 1, minor: 0, patch: 0 };
+  // Fedify 2.0: software.version is now a plain string (was SemVer object)
+  let softwareVersion = "1.0.0";
   try {
     const require = createRequire(import.meta.url);
     const pkg = require("@indiekit/indiekit/package.json");
-    const [major, minor, patch] = pkg.version.split(/[.-]/).map(Number);
-    if (!Number.isNaN(major)) softwareVersion = { major, minor: minor || 0, patch: patch || 0 };
-  } catch { /* fallback to 1.0.0 */ }
+    if (pkg.version) softwareVersion = pkg.version;
+  } catch { /* fallback to "1.0.0" */ }
 
   federation.setNodeInfoDispatcher("/nodeinfo/2.1", async () => {
     const postsCount = collections.posts
@@ -311,15 +319,57 @@ export function setupFederation(options) {
     };
   });
 
+  // Handle permanent delivery failures (Fedify 2.0).
+  // Fires when a remote inbox returns 404/410 — the server is gone.
+  // Log it and let the admin see which followers are unreachable.
+  federation.setOutboxPermanentFailureHandler(async (_ctx, values) => {
+    const { inbox, error, actorIds } = values;
+    const inboxUrl = inbox?.href || String(inbox);
+    const actors = actorIds?.map((id) => id?.href || String(id)) || [];
+    console.warn(
+      `[ActivityPub] Permanent delivery failure to ${inboxUrl}: ${error?.message || "unknown"}` +
+        (actors.length ? ` (actors: ${actors.join(", ")})` : ""),
+    );
+    collections.ap_activities.insertOne({
+      direction: "outbound",
+      type: "DeliveryFailed",
+      actorUrl: publicationUrl,
+      objectUrl: inboxUrl,
+      summary: `Permanent delivery failure to ${inboxUrl}: ${error?.message || "unknown"}`,
+      affectedActors: actors,
+      receivedAt: new Date().toISOString(),
+    }).catch(() => {});
+  });
+
+  // Wrap with debug dashboard if enabled. The debugger proxies the
+  // Federation object and intercepts requests at {mountPath}/__debug__/,
+  // serving a live dashboard showing traces, activities, signature
+  // verification, and correlated logs. It auto-configures OpenTelemetry
+  // tracing and LogTape per-trace log collection.
+  let activeFederation = federation;
+  if (debugDashboard) {
+    const debugOptions = {
+      path: `${mountPath}/__debug__`,
+    };
+    if (debugPassword) {
+      debugOptions.auth = { type: "password", password: debugPassword };
+    }
+    activeFederation = createFederationDebugger(federation, debugOptions);
+    console.info(
+      `[ActivityPub] Debug dashboard enabled at ${mountPath}/__debug__/` +
+        (debugPassword ? " (password-protected)" : " (WARNING: no password set)"),
+    );
+  }
+
   // Start the message queue for outbound activity delivery.
   // Without this, ctx.sendActivity() enqueues delivery tasks but the
   // InProcessMessageQueue never processes them — activities are never
   // actually POSTed to follower inboxes.
-  federation.startQueue().catch((error) => {
+  activeFederation.startQueue().catch((error) => {
     console.error("[ActivityPub] Failed to start delivery queue:", error.message);
   });
 
-  return { federation };
+  return { federation: activeFederation };
 }
 
 // --- Collection setup helpers ---
@@ -695,6 +745,25 @@ export async function buildPersonActor(
   return new ResolvedActorClass(personOptions);
 }
 
+/**
+ * Import an SPKI PEM public key using Web Crypto API.
+ * Replaces Fedify 1.x's importSpki() which was removed in 2.0.
+ */
+async function importSpkiPem(pem) {
+  const lines = pem
+    .replace("-----BEGIN PUBLIC KEY-----", "")
+    .replace("-----END PUBLIC KEY-----", "")
+    .replace(/\s/g, "");
+  const der = Uint8Array.from(atob(lines), (c) => c.charCodeAt(0));
+  return crypto.subtle.importKey(
+    "spki",
+    der,
+    { name: "RSASSA-PKCS1-v1_5", hash: "SHA-256" },
+    true,
+    ["verify"],
+  );
+}
+
 /**
  * Import a PKCS#8 PEM private key using Web Crypto API.
  * Fedify's importPem only handles PKCS#1, but Node.js crypto generates PKCS#8.

package/lib/inbox-listeners.js

@@ -21,7 +21,7 @@ import {
   Remove,
   Undo,
   Update,
-} from "@fedify/fedify";
+} from "@fedify/fedify/vocab";
 
 import { logActivity as logActivityShared } from "./activity-log.js";
 import { sanitizeContent, extractActorInfo, extractObjectData } from "./timeline-store.js";

package/lib/jf2-to-as2.js

@@ -18,7 +18,7 @@ import {
   Mention,
   Note,
   Video,
-} from "@fedify/fedify";
+} from "@fedify/fedify/vocab";
 
 // ---------------------------------------------------------------------------
 // Plain JSON-LD (content negotiation on individual post URLs)

package/lib/kv-store.js

@@ -52,4 +52,25 @@ export class MongoKvStore {
   async delete(key) {
     await this.collection.deleteOne({ _id: this._serializeKey(key) });
   }
+
+  /**
+   * List all entries whose key starts with the given prefix.
+   * Required by Fedify 2.0's KvStore interface.
+   *
+   * @param {string[]} [prefix=[]]
+   * @returns {AsyncIterable<{ key: string[], value: unknown }>}
+   */
+  async *list(prefix = []) {
+    const prefixStr = this._serializeKey(prefix);
+    const filter = prefixStr
+      ? { _id: { $regex: `^${prefixStr.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}` } }
+      : {};
+    const cursor = this.collection.find(filter);
+    for await (const doc of cursor) {
+      yield {
+        key: doc._id.split("/"),
+        value: doc.value,
+      };
+    }
+  }
 }

package/lib/timeline-store.js

@@ -3,7 +3,7 @@
  * @module timeline-store
  */
 
-import { Article } from "@fedify/fedify";
+import { Article } from "@fedify/fedify/vocab";
 import sanitizeHtml from "sanitize-html";
 
 /**

package/locales/en.json

@@ -50,6 +50,18 @@
       "authorizedFetchHint": "When enabled, only servers with valid HTTP Signatures can fetch your actor and collections. This improves privacy but may reduce compatibility with some clients.",
       "save": "Save profile",
       "saved": "Profile saved. Changes are now visible to the fediverse.",
+      "public": {
+        "followPrompt": "Follow me on the fediverse",
+        "copyHandle": "Copy handle",
+        "copied": "Copied!",
+        "pinnedPosts": "Pinned posts",
+        "recentPosts": "Recent posts",
+        "joinedDate": "Joined",
+        "posts": "Posts",
+        "followers": "Followers",
+        "following": "Following",
+        "viewOnSite": "View on site"
+      },
       "remote": {
         "follow": "Follow",
         "unfollow": "Unfollow",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-endpoint-activitypub",
-  "version": "1.1.18",
+  "version": "2.0.0",
   "description": "ActivityPub federation endpoint for Indiekit via Fedify. Adds full fediverse support: actor, inbox, outbox, followers, following, syndication, and Mastodon migration.",
   "keywords": [
     "indiekit",
@@ -37,9 +37,9 @@
     "url": "https://github.com/rmdes/indiekit-endpoint-activitypub/issues"
   },
   "dependencies": {
-    "@fedify/express": "^1.10.3",
-    "@fedify/fedify": "^1.10.3",
-    "@fedify/redis": "^1.10.3",
+    "@fedify/debugger": "^2.0.0",
+    "@fedify/fedify": "^2.0.0",
+    "@fedify/redis": "^2.0.0",
     "@js-temporal/polyfill": "^0.5.0",
     "express": "^5.0.0",
     "ioredis": "^5.9.3",

package/views/activitypub-public-profile.njk

@@ -0,0 +1,592 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{{ profile.name or handle }} (@{{ handle }}@{{ domain }})</title>
+  <meta name="description" content="{{ profile.summary | striptags | truncate(160) if profile.summary else fullHandle }}">
+  <meta property="og:title" content="{{ profile.name or handle }}">
+  <meta property="og:description" content="{{ profile.summary | striptags | truncate(160) if profile.summary else fullHandle }}">
+  {% if profile.icon %}
+    <meta property="og:image" content="{{ profile.icon }}">
+  {% endif %}
+  <meta property="og:type" content="profile">
+  <meta property="og:url" content="{{ actorUrl }}">
+  <link rel="me" href="{{ siteUrl }}">
+  <link rel="alternate" type="application/activity+json" href="{{ actorUrl }}">
+  <style>
+    /* ================================================================
+       CSS Custom Properties — light/dark mode
+       ================================================================ */
+    :root {
+      --color-bg: #fff;
+      --color-surface: #f5f5f5;
+      --color-surface-raised: #fff;
+      --color-text: #1a1a1a;
+      --color-text-muted: #666;
+      --color-text-faint: #999;
+      --color-border: #e0e0e0;
+      --color-accent: #4f46e5;
+      --color-accent-text: #fff;
+      --color-purple: #7c3aed;
+      --color-green: #16a34a;
+      --color-yellow: #ca8a04;
+      --color-blue: #2563eb;
+      --radius-s: 6px;
+      --radius-m: 10px;
+      --radius-l: 16px;
+      --radius-full: 9999px;
+      --space-xs: 4px;
+      --space-s: 8px;
+      --space-m: 16px;
+      --space-l: 24px;
+      --space-xl: 32px;
+      --space-2xl: 48px;
+      --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      --shadow-s: 0 1px 2px rgba(0,0,0,0.05);
+      --shadow-m: 0 2px 8px rgba(0,0,0,0.08);
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --color-bg: #111;
+        --color-surface: #1a1a1a;
+        --color-surface-raised: #222;
+        --color-text: #e5e5e5;
+        --color-text-muted: #999;
+        --color-text-faint: #666;
+        --color-border: #333;
+        --color-accent: #818cf8;
+        --color-accent-text: #111;
+        --color-purple: #a78bfa;
+        --color-green: #4ade80;
+        --color-yellow: #facc15;
+        --color-blue: #60a5fa;
+        --shadow-s: 0 1px 2px rgba(0,0,0,0.2);
+        --shadow-m: 0 2px 8px rgba(0,0,0,0.3);
+      }
+    }
+
+    /* ================================================================
+       Base
+       ================================================================ */
+    *, *::before, *::after { box-sizing: border-box; }
+
+    body {
+      background: var(--color-bg);
+      color: var(--color-text);
+      font-family: var(--font-sans);
+      line-height: 1.5;
+      margin: 0;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    a { color: var(--color-accent); text-decoration: none; }
+    a:hover { text-decoration: underline; }
+
+    .ap-pub {
+      margin: 0 auto;
+      max-width: 640px;
+      padding: 0 var(--space-m);
+    }
+
+    /* ================================================================
+       Header image
+       ================================================================ */
+    .ap-pub__header {
+      background: var(--color-surface);
+      height: 220px;
+      overflow: hidden;
+      position: relative;
+    }
+
+    .ap-pub__header img {
+      display: block;
+      height: 100%;
+      object-fit: cover;
+      width: 100%;
+    }
+
+    .ap-pub__header--empty {
+      background: linear-gradient(135deg, var(--color-accent), var(--color-purple));
+      height: 160px;
+    }
+
+    /* ================================================================
+       Identity — avatar, name, handle
+       ================================================================ */
+    .ap-pub__identity {
+      padding: 0 var(--space-m);
+      position: relative;
+    }
+
+    .ap-pub__avatar-wrap {
+      margin-top: -48px;
+      position: relative;
+      width: 96px;
+    }
+
+    .ap-pub__avatar {
+      background: var(--color-surface);
+      border: 4px solid var(--color-bg);
+      border-radius: var(--radius-full);
+      display: block;
+      height: 96px;
+      object-fit: cover;
+      width: 96px;
+    }
+
+    .ap-pub__avatar--placeholder {
+      align-items: center;
+      background: var(--color-surface);
+      border: 4px solid var(--color-bg);
+      border-radius: var(--radius-full);
+      color: var(--color-text-muted);
+      display: flex;
+      font-size: 2.5em;
+      font-weight: 700;
+      height: 96px;
+      justify-content: center;
+      width: 96px;
+    }
+
+    .ap-pub__name {
+      font-size: 1.5em;
+      font-weight: 700;
+      line-height: 1.2;
+      margin: var(--space-s) 0 var(--space-xs);
+    }
+
+    .ap-pub__handle {
+      color: var(--color-text-muted);
+      font-size: 0.95em;
+      margin-bottom: var(--space-m);
+    }
+
+    /* ================================================================
+       Bio
+       ================================================================ */
+    .ap-pub__bio {
+      line-height: 1.6;
+      margin-bottom: var(--space-l);
+      padding: 0 var(--space-m);
+    }
+
+    .ap-pub__bio a { color: var(--color-accent); }
+
+    .ap-pub__bio p { margin: 0 0 var(--space-s); }
+    .ap-pub__bio p:last-child { margin-bottom: 0; }
+
+    /* ================================================================
+       Profile fields
+       ================================================================ */
+    .ap-pub__fields {
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-m);
+      margin: 0 var(--space-m) var(--space-l);
+      overflow: hidden;
+    }
+
+    .ap-pub__field {
+      border-bottom: 1px solid var(--color-border);
+      display: grid;
+      grid-template-columns: 140px 1fr;
+    }
+
+    .ap-pub__field:last-child { border-bottom: 0; }
+
+    .ap-pub__field-name {
+      background: var(--color-surface);
+      color: var(--color-text-muted);
+      font-size: 0.85em;
+      font-weight: 600;
+      padding: var(--space-s) var(--space-m);
+      text-transform: uppercase;
+      letter-spacing: 0.03em;
+    }
+
+    .ap-pub__field-value {
+      font-size: 0.95em;
+      overflow: hidden;
+      padding: var(--space-s) var(--space-m);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .ap-pub__field-value a { color: var(--color-accent); }
+
+    /* ================================================================
+       Stats bar
+       ================================================================ */
+    .ap-pub__stats {
+      border-bottom: 1px solid var(--color-border);
+      border-top: 1px solid var(--color-border);
+      display: flex;
+      margin: 0 var(--space-m) var(--space-l);
+      padding: var(--space-m) 0;
+    }
+
+    .ap-pub__stat {
+      flex: 1;
+      text-align: center;
+    }
+
+    .ap-pub__stat-value {
+      display: block;
+      font-size: 1.2em;
+      font-weight: 700;
+    }
+
+    .ap-pub__stat-label {
+      color: var(--color-text-muted);
+      display: block;
+      font-size: 0.8em;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    /* ================================================================
+       Follow prompt
+       ================================================================ */
+    .ap-pub__follow {
+      background: var(--color-surface);
+      border-radius: var(--radius-m);
+      margin: 0 var(--space-m) var(--space-l);
+      padding: var(--space-l);
+      text-align: center;
+    }
+
+    .ap-pub__follow-title {
+      font-size: 1em;
+      font-weight: 600;
+      margin: 0 0 var(--space-s);
+    }
+
+    .ap-pub__follow-handle {
+      background: var(--color-surface-raised);
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-s);
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-s);
+      padding: var(--space-s) var(--space-m);
+    }
+
+    .ap-pub__follow-text {
+      color: var(--color-text);
+      font-family: monospace;
+      font-size: 0.95em;
+      user-select: all;
+    }
+
+    .ap-pub__copy-btn {
+      background: var(--color-accent);
+      border: 0;
+      border-radius: var(--radius-s);
+      color: var(--color-accent-text);
+      cursor: pointer;
+      font-size: 0.8em;
+      font-weight: 600;
+      padding: var(--space-xs) var(--space-s);
+      transition: opacity 0.2s;
+    }
+
+    .ap-pub__copy-btn:hover { opacity: 0.85; }
+
+    /* ================================================================
+       Section headings
+       ================================================================ */
+    .ap-pub__section-title {
+      border-bottom: 1px solid var(--color-border);
+      font-size: 1.1em;
+      font-weight: 600;
+      margin: 0 var(--space-m) var(--space-m);
+      padding-bottom: var(--space-s);
+    }
+
+    /* ================================================================
+       Post cards (pinned + recent)
+       ================================================================ */
+    .ap-pub__posts {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-s);
+      margin: 0 var(--space-m) var(--space-l);
+    }
+
+    .ap-pub__post {
+      background: var(--color-surface-raised);
+      border: 1px solid var(--color-border);
+      border-left: 3px solid var(--color-border);
+      border-radius: var(--radius-s);
+      display: block;
+      padding: var(--space-m);
+      text-decoration: none;
+      transition: border-color 0.15s, box-shadow 0.15s;
+    }
+
+    .ap-pub__post:hover {
+      border-color: var(--color-accent);
+      box-shadow: var(--shadow-s);
+      text-decoration: none;
+    }
+
+    .ap-pub__post--article { border-left-color: var(--color-green); }
+    .ap-pub__post--note { border-left-color: var(--color-purple); }
+    .ap-pub__post--photo { border-left-color: var(--color-yellow); }
+    .ap-pub__post--bookmark { border-left-color: var(--color-blue); }
+
+    .ap-pub__post-meta {
+      align-items: center;
+      color: var(--color-text-muted);
+      display: flex;
+      font-size: 0.8em;
+      gap: var(--space-s);
+      margin-bottom: var(--space-xs);
+    }
+
+    .ap-pub__post-type {
+      background: var(--color-surface);
+      border-radius: var(--radius-s);
+      font-size: 0.85em;
+      font-weight: 600;
+      padding: 1px 6px;
+      text-transform: capitalize;
+    }
+
+    .ap-pub__post-title {
+      color: var(--color-text);
+      font-weight: 600;
+      line-height: 1.4;
+    }
+
+    .ap-pub__post-excerpt {
+      color: var(--color-text-muted);
+      font-size: 0.9em;
+      line-height: 1.5;
+      margin-top: var(--space-xs);
+    }
+
+    .ap-pub__pinned-label {
+      color: var(--color-yellow);
+      font-size: 0.75em;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    /* ================================================================
+       Footer
+       ================================================================ */
+    .ap-pub__footer {
+      border-top: 1px solid var(--color-border);
+      color: var(--color-text-faint);
+      font-size: 0.85em;
+      margin: var(--space-xl) var(--space-m) 0;
+      padding: var(--space-l) 0;
+      text-align: center;
+    }
+
+    .ap-pub__footer a { color: var(--color-text-muted); }
+
+    /* ================================================================
+       Empty state
+       ================================================================ */
+    .ap-pub__empty {
+      color: var(--color-text-muted);
+      font-style: italic;
+      padding: var(--space-m) 0;
+      text-align: center;
+    }
+
+    /* ================================================================
+       Responsive
+       ================================================================ */
+    @media (max-width: 480px) {
+      .ap-pub__header { height: 160px; }
+      .ap-pub__header--empty { height: 120px; }
+
+      .ap-pub__field {
+        grid-template-columns: 1fr;
+      }
+
+      .ap-pub__field-name {
+        border-bottom: 0;
+        padding-bottom: var(--space-xs);
+      }
+
+      .ap-pub__field-value {
+        padding-top: 0;
+      }
+
+      .ap-pub__stats { flex-wrap: wrap; }
+
+      .ap-pub__stat {
+        flex: 0 0 50%;
+        margin-bottom: var(--space-s);
+      }
+
+      .ap-pub__follow-handle {
+        flex-direction: column;
+      }
+    }
+  </style>
+</head>
+<body>
+  {# ---- Header image ---- #}
+  {% if profile.image %}
+    <div class="ap-pub__header">
+      <img src="{{ profile.image }}" alt="">
+    </div>
+  {% else %}
+    <div class="ap-pub__header ap-pub__header--empty"></div>
+  {% endif %}
+
+  <div class="ap-pub">
+    {# ---- Avatar + identity ---- #}
+    <div class="ap-pub__identity">
+      <div class="ap-pub__avatar-wrap">
+        {% if profile.icon %}
+          <img src="{{ profile.icon }}" alt="{{ profile.name or handle }}" class="ap-pub__avatar">
+        {% else %}
+          <div class="ap-pub__avatar--placeholder">{{ (profile.name or handle)[0] | upper }}</div>
+        {% endif %}
+      </div>
+      <h1 class="ap-pub__name">{{ profile.name or handle }}</h1>
+      <div class="ap-pub__handle">{{ fullHandle }}</div>
+    </div>
+
+    {# ---- Bio ---- #}
+    {% if profile.summary %}
+      <div class="ap-pub__bio">{{ profile.summary | safe }}</div>
+    {% endif %}
+
+    {# ---- Profile fields (attachments) ---- #}
+    {% if profile.attachments and profile.attachments.length > 0 %}
+      <dl class="ap-pub__fields">
+        {% for field in profile.attachments %}
+          <div class="ap-pub__field">
+            <dt class="ap-pub__field-name">{{ field.name }}</dt>
+            <dd class="ap-pub__field-value">
+              {% if field.value and (field.value.startsWith("http://") or field.value.startsWith("https://")) %}
+                <a href="{{ field.value }}" rel="noopener nofollow" target="_blank">{{ field.value | replace("https://", "") | replace("http://", "") }}</a>
+              {% else %}
+                {{ field.value }}
+              {% endif %}
+            </dd>
+          </div>
+        {% endfor %}
+      </dl>
+    {% endif %}
+
+    {# ---- Stats bar ---- #}
+    <div class="ap-pub__stats">
+      <div class="ap-pub__stat">
+        <span class="ap-pub__stat-value">{{ postCount }}</span>
+        <span class="ap-pub__stat-label">Posts</span>
+      </div>
+      <div class="ap-pub__stat">
+        <span class="ap-pub__stat-value">{{ followingCount }}</span>
+        <span class="ap-pub__stat-label">Following</span>
+      </div>
+      <div class="ap-pub__stat">
+        <span class="ap-pub__stat-value">{{ followerCount }}</span>
+        <span class="ap-pub__stat-label">Followers</span>
+      </div>
+      {% if profile.createdAt %}
+        <div class="ap-pub__stat">
+          <span class="ap-pub__stat-value" id="joined-date">—</span>
+          <span class="ap-pub__stat-label">Joined</span>
+        </div>
+      {% endif %}
+    </div>
+
+    {# ---- Follow prompt ---- #}
+    <div class="ap-pub__follow">
+      <p class="ap-pub__follow-title">Follow me on the fediverse</p>
+      <div class="ap-pub__follow-handle">
+        <span class="ap-pub__follow-text" id="fedi-handle">{{ fullHandle }}</span>
+        <button class="ap-pub__copy-btn" id="copy-btn" type="button">Copy handle</button>
+      </div>
+    </div>
+
+    {# ---- Pinned posts ---- #}
+    {% if pinned.length > 0 %}
+      <h2 class="ap-pub__section-title">Pinned posts</h2>
+      <div class="ap-pub__posts">
+        {% for post in pinned %}
+          <a href="{{ post.url }}" class="ap-pub__post ap-pub__post--{{ post.type }}">
+            <div class="ap-pub__post-meta">
+              <span class="ap-pub__pinned-label">Pinned</span>
+              <span class="ap-pub__post-type">{{ post.type }}</span>
+              {% if post.published %}
+                <time datetime="{{ post.published }}">{{ post.published | truncate(10, true, "") }}</time>
+              {% endif %}
+            </div>
+            <div class="ap-pub__post-title">{{ post.title }}</div>
+          </a>
+        {% endfor %}
+      </div>
+    {% endif %}
+
+    {# ---- Recent posts ---- #}
+    {% if recentPosts.length > 0 %}
+      <h2 class="ap-pub__section-title">Recent posts</h2>
+      <div class="ap-pub__posts">
+        {% for post in recentPosts %}
+          {% set postType = post["post-type"] or "note" %}
+          <a href="{{ post.url }}" class="ap-pub__post ap-pub__post--{{ postType }}">
+            <div class="ap-pub__post-meta">
+              <span class="ap-pub__post-type">{{ postType }}</span>
+              {% if post.published %}
+                <time datetime="{{ post.published }}">{{ post.published | truncate(10, true, "") }}</time>
+              {% endif %}
+            </div>
+            {% if post.name %}
+              <div class="ap-pub__post-title">{{ post.name }}</div>
+            {% endif %}
+            {% if post.content and post.content.text %}
+              <div class="ap-pub__post-excerpt">{{ post.content.text | truncate(150) }}</div>
+            {% endif %}
+          </a>
+        {% endfor %}
+      </div>
+    {% endif %}
+
+    {# ---- Empty state ---- #}
+    {% if pinned.length === 0 and recentPosts.length === 0 %}
+      <p class="ap-pub__empty">No posts yet.</p>
+    {% endif %}
+
+    {# ---- Footer ---- #}
+    <footer class="ap-pub__footer">
+      <a href="{{ siteUrl }}">{{ domain }}</a>
+    </footer>
+  </div>
+
+  <script>
+    // Copy handle to clipboard
+    document.getElementById("copy-btn").addEventListener("click", function() {
+      var handle = document.getElementById("fedi-handle").textContent;
+      navigator.clipboard.writeText(handle).then(function() {
+        var btn = document.getElementById("copy-btn");
+        btn.textContent = "Copied!";
+        setTimeout(function() { btn.textContent = "Copy handle"; }, 2000);
+      });
+    });
+
+    // Format joined date
+    {% if profile.createdAt %}
+    (function() {
+      var el = document.getElementById("joined-date");
+      if (el) {
+        try {
+          var d = new Date("{{ profile.createdAt }}");
+          el.textContent = d.toLocaleDateString(undefined, { month: "short", year: "numeric" });
+        } catch(e) { el.textContent = "—"; }
+      }
+    })();
+    {% endif %}
+  </script>
+</body>
+</html>