@rmdes/indiekit-endpoint-activitypub 1.1.17 → 1.1.20

package/README.md

@@ -93,6 +93,7 @@ export default {
 | `redisUrl` | string | `""` | Redis connection URL for delivery queue |
 | `parallelWorkers` | number | `5` | Number of parallel delivery workers (requires Redis) |
 | `actorType` | string | `"Person"` | Actor type: `Person`, `Service`, `Organization`, or `Group` |
+| `logLevel` | string | `"warning"` | Fedify log level: `"debug"`, `"info"`, `"warning"`, `"error"`, `"fatal"` |
 | `timelineRetention` | number | `1000` | Maximum timeline items to keep (0 = unlimited) |
 
 ### Redis (Recommended for Production)

package/index.js

@@ -1,6 +1,6 @@
 import express from "express";
 
-import { setupFederation } from "./lib/federation-setup.js";
+import { setupFederation, buildPersonActor } from "./lib/federation-setup.js";
 import {
   createFedifyMiddleware,
 } from "./lib/federation-bridge.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,
@@ -82,6 +83,7 @@ const defaults = {
   redisUrl: "",
   parallelWorkers: 5,
   actorType: "Person",
+  logLevel: "warning",
   timelineRetention: 1000,
   notificationRetentionDays: 30,
 };
@@ -157,6 +159,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.
@@ -677,6 +683,10 @@ 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;
@@ -689,9 +699,15 @@ export default class ActivityPubEndpoint {
         { handle, publicationUrl: this._publicationUrl },
       );
 
-      // Retrieve the full actor from the dispatcher (same object remote
-      // servers will get when they re-fetch the actor URL)
-      const actor = await ctx.getActor(handle);
+      // Build the full actor object (same as what the dispatcher serves).
+      // Note: ctx.getActor() only exists on RequestContext, not the base
+      // Context returned by createContext(), so we use the shared helper.
+      const actor = await buildPersonActor(
+        ctx,
+        handle,
+        this._collections,
+        this.options.actorType,
+      );
       if (!actor) {
         console.warn("[ActivityPub] broadcastActorUpdate: could not build actor");
         return;
@@ -702,21 +718,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(
@@ -891,6 +966,7 @@ export default class ActivityPubEndpoint {
       publicationUrl: this._publicationUrl,
       parallelWorkers: this.options.parallelWorkers,
       actorType: this.options.actorType,
+      logLevel: this.options.logLevel,
     });
 
     this._federation = federation;

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/federation-setup.js

@@ -60,6 +60,7 @@ export function setupFederation(options) {
     publicationUrl = "",
     parallelWorkers = 5,
     actorType = "Person",
+    logLevel = "warning",
   } = options;
 
   // Map config string to Fedify actor class
@@ -67,6 +68,9 @@ export function setupFederation(options) {
   const ActorClass = actorTypeMap[actorType] || Person;
 
   // Configure LogTape for Fedify delivery logging (once per process)
+  // Valid levels: "debug" | "info" | "warning" | "error" | "fatal"
+  const validLevels = ["debug", "info", "warning", "error", "fatal"];
+  const resolvedLevel = validLevels.includes(logLevel) ? logLevel : "warning";
   if (!_logtapeConfigured) {
     _logtapeConfigured = true;
     configure({
@@ -79,7 +83,7 @@ export function setupFederation(options) {
           // All Fedify logs — federation, vocab, delivery, HTTP signatures
           category: ["fedify"],
           sinks: ["console"],
-          lowestLevel: "info",
+          lowestLevel: resolvedLevel,
         },
       ],
     }).catch((error) => {
@@ -138,74 +142,7 @@ export function setupFederation(options) {
 
         if (identifier !== handle) return null;
 
-        const profile = await getProfile(collections);
-        const keyPairs = await ctx.getActorKeyPairs(identifier);
-
-        const personOptions = {
-          id: ctx.getActorUri(identifier),
-          preferredUsername: identifier,
-          name: profile.name || identifier,
-          url: profile.url ? new URL(profile.url) : null,
-          inbox: ctx.getInboxUri(identifier),
-          outbox: ctx.getOutboxUri(identifier),
-          followers: ctx.getFollowersUri(identifier),
-          following: ctx.getFollowingUri(identifier),
-          liked: ctx.getLikedUri(identifier),
-          featured: ctx.getFeaturedUri(identifier),
-          featuredTags: ctx.getFeaturedTagsUri(identifier),
-          endpoints: new Endpoints({ sharedInbox: ctx.getInboxUri() }),
-          manuallyApprovesFollowers:
-            profile.manuallyApprovesFollowers || false,
-        };
-
-        if (profile.summary) {
-          personOptions.summary = profile.summary;
-        }
-
-        if (profile.icon) {
-          personOptions.icon = new Image({
-            url: new URL(profile.icon),
-            mediaType: guessImageMediaType(profile.icon),
-          });
-        }
-
-        if (profile.image) {
-          personOptions.image = new Image({
-            url: new URL(profile.image),
-            mediaType: guessImageMediaType(profile.image),
-          });
-        }
-
-        if (keyPairs.length > 0) {
-          personOptions.publicKey = keyPairs[0].cryptographicKey;
-          personOptions.assertionMethods = keyPairs.map((k) => k.multikey);
-        }
-
-        if (profile.attachments?.length > 0) {
-          personOptions.attachments = profile.attachments.map(
-            (att) =>
-              new PropertyValue({
-                name: att.name,
-                value: formatAttachmentValue(att.value),
-              }),
-          );
-        }
-
-        if (profile.alsoKnownAs?.length > 0) {
-          personOptions.alsoKnownAs = profile.alsoKnownAs.map(
-            (u) => new URL(u),
-          );
-        }
-
-        if (profile.createdAt) {
-          personOptions.published = Temporal.Instant.from(profile.createdAt);
-        }
-
-        // Actor type from profile overrides config default
-        const profileActorType = profile.actorType || actorType;
-        const ResolvedActorClass = actorTypeMap[profileActorType] || ActorClass;
-
-        return new ResolvedActorClass(personOptions);
+        return buildPersonActor(ctx, identifier, collections, actorType);
       },
     )
     .mapHandle((_ctx, username) => {
@@ -674,6 +611,90 @@ async function getProfile(collections) {
   return doc || {};
 }
 
+/**
+ * Build the Person/Service/Organization actor object from the stored profile.
+ * Used by both the actor dispatcher (for serving the actor to federation
+ * requests) and broadcastActorUpdate() (for sending Update activities).
+ *
+ * @param {object} ctx - Fedify context (base Context or RequestContext)
+ * @param {string} identifier - Actor handle (e.g. "rick")
+ * @param {object} collections - MongoDB collections
+ * @param {string} [defaultActorType="Person"] - Fallback actor type
+ * @returns {Promise<import("@fedify/fedify").Actor|null>}
+ */
+export async function buildPersonActor(
+  ctx,
+  identifier,
+  collections,
+  defaultActorType = "Person",
+) {
+  const actorTypeMap = { Person, Service, Application, Organization, Group };
+  const profile = await getProfile(collections);
+  const keyPairs = await ctx.getActorKeyPairs(identifier);
+
+  const personOptions = {
+    id: ctx.getActorUri(identifier),
+    preferredUsername: identifier,
+    name: profile.name || identifier,
+    url: profile.url ? new URL(profile.url) : null,
+    inbox: ctx.getInboxUri(identifier),
+    outbox: ctx.getOutboxUri(identifier),
+    followers: ctx.getFollowersUri(identifier),
+    following: ctx.getFollowingUri(identifier),
+    liked: ctx.getLikedUri(identifier),
+    featured: ctx.getFeaturedUri(identifier),
+    featuredTags: ctx.getFeaturedTagsUri(identifier),
+    endpoints: new Endpoints({ sharedInbox: ctx.getInboxUri() }),
+    manuallyApprovesFollowers: profile.manuallyApprovesFollowers || false,
+  };
+
+  if (profile.summary) {
+    personOptions.summary = profile.summary;
+  }
+
+  if (profile.icon) {
+    personOptions.icon = new Image({
+      url: new URL(profile.icon),
+      mediaType: guessImageMediaType(profile.icon),
+    });
+  }
+
+  if (profile.image) {
+    personOptions.image = new Image({
+      url: new URL(profile.image),
+      mediaType: guessImageMediaType(profile.image),
+    });
+  }
+
+  if (keyPairs.length > 0) {
+    personOptions.publicKey = keyPairs[0].cryptographicKey;
+    personOptions.assertionMethods = keyPairs.map((k) => k.multikey);
+  }
+
+  if (profile.attachments?.length > 0) {
+    personOptions.attachments = profile.attachments.map(
+      (att) =>
+        new PropertyValue({
+          name: att.name,
+          value: formatAttachmentValue(att.value),
+        }),
+    );
+  }
+
+  if (profile.alsoKnownAs?.length > 0) {
+    personOptions.alsoKnownAs = profile.alsoKnownAs.map((u) => new URL(u));
+  }
+
+  if (profile.createdAt) {
+    personOptions.published = Temporal.Instant.from(profile.createdAt);
+  }
+
+  const profileActorType = profile.actorType || defaultActorType;
+  const ResolvedActorClass = actorTypeMap[profileActorType] || Person;
+
+  return new ResolvedActorClass(personOptions);
+}
+
 /**
  * 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/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.17",
+  "version": "1.1.20",
   "description": "ActivityPub federation endpoint for Indiekit via Fedify. Adds full fediverse support: actor, inbox, outbox, followers, following, syndication, and Mastodon migration.",
   "keywords": [
     "indiekit",

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>