@rmdes/indiekit-endpoint-activitypub 1.0.28 → 1.1.1

package/locales/en.json

@@ -38,10 +38,27 @@
       "imageHint": "URL to a banner image shown at the top of your profile",
       "manualApprovalLabel": "Manually approve followers",
       "manualApprovalHint": "When enabled, follow requests require your approval before they take effect",
+      "actorTypeLabel": "Actor type",
+      "actorTypeHint": "How your account appears in the fediverse. Person for individuals, Service for bots or automated accounts, Organization for groups or companies.",
+      "linksLabel": "Profile links",
+      "linksHint": "Links shown on your fediverse profile. Add your website, social accounts, or other URLs. Pages that link back with rel=\"me\" will show as verified on Mastodon.",
+      "linkNameLabel": "Label",
+      "linkValueLabel": "URL",
+      "addLink": "Add link",
+      "removeLink": "Remove",
       "authorizedFetchLabel": "Require authorized fetch (secure mode)",
       "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."
+      "saved": "Profile saved. Changes are now visible to the fediverse.",
+      "remote": {
+        "follow": "Follow",
+        "unfollow": "Unfollow",
+        "viewOn": "View on",
+        "postsTitle": "Posts",
+        "noPosts": "No posts from this account yet.",
+        "followToSee": "Follow this account to see their posts in your timeline.",
+        "notFound": "Could not find this account. It may have been deleted or the server may be unavailable."
+      }
     },
     "migrate": {
       "title": "Mastodon migration",
@@ -86,6 +103,80 @@
         "paused": "Paused",
         "completed": "Completed"
       }
+    },
+    "moderation": {
+      "title": "Moderation",
+      "blockedTitle": "Blocked accounts",
+      "mutedActorsTitle": "Muted accounts",
+      "mutedKeywordsTitle": "Muted keywords",
+      "noBlocked": "No blocked accounts.",
+      "noMutedActors": "No muted accounts.",
+      "noMutedKeywords": "No muted keywords.",
+      "unblock": "Unblock",
+      "unmute": "Unmute",
+      "addKeywordTitle": "Add muted keyword",
+      "keywordPlaceholder": "Enter keyword or phrase…",
+      "addKeyword": "Add",
+      "muteActor": "Mute",
+      "blockActor": "Block"
+    },
+    "compose": {
+      "title": "Compose reply",
+      "modeLabel": "Reply mode",
+      "modeMicropub": "Post as blog reply",
+      "modeMicropubHint": "Creates a permanent post on your blog, syndicated to the fediverse",
+      "modeQuick": "Quick reply",
+      "modeQuickHint": "Sends a reply directly to the fediverse (no blog post created)",
+      "placeholder": "Write your reply…",
+      "syndicateLabel": "Syndicate to",
+      "submitMicropub": "Post reply",
+      "submitQuick": "Send reply",
+      "cancel": "Cancel",
+      "errorEmpty": "Reply content cannot be empty"
+    },
+    "notifications": {
+      "title": "Notifications",
+      "empty": "No notifications yet. Interactions from other fediverse users will appear here.",
+      "liked": "liked your post",
+      "boostedPost": "boosted your post",
+      "followedYou": "followed you",
+      "repliedTo": "replied to your post",
+      "mentionedYou": "mentioned you"
+    },
+    "reader": {
+      "title": "Reader",
+      "tabs": {
+        "all": "All",
+        "notes": "Notes",
+        "articles": "Articles",
+        "replies": "Replies",
+        "boosts": "Boosts",
+        "media": "Media"
+      },
+      "pagination": {
+        "newer": "← Newer",
+        "older": "Older →"
+      },
+      "empty": "Your timeline is empty. Follow some accounts to see their posts here.",
+      "boosted": "boosted",
+      "replyingTo": "Replying to",
+      "showContent": "Show content",
+      "hideContent": "Hide content",
+      "sensitiveContent": "Sensitive content",
+      "videoNotSupported": "Your browser does not support the video element.",
+      "audioNotSupported": "Your browser does not support the audio element.",
+      "actions": {
+        "reply": "Reply",
+        "boost": "Boost",
+        "unboost": "Undo boost",
+        "like": "Like",
+        "unlike": "Unlike",
+        "viewOriginal": "View original",
+        "liked": "Liked",
+        "boosted": "Boosted",
+        "likeError": "Could not like this post",
+        "boostError": "Could not boost this post"
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-endpoint-activitypub",
-  "version": "1.0.28",
+  "version": "1.1.1",
   "description": "ActivityPub federation endpoint for Indiekit via Fedify. Adds full fediverse support: actor, inbox, outbox, followers, following, syndication, and Mastodon migration.",
   "keywords": [
     "indiekit",
@@ -42,7 +42,8 @@
     "@fedify/redis": "^1.10.3",
     "@js-temporal/polyfill": "^0.5.0",
     "express": "^5.0.0",
-    "ioredis": "^5.9.3"
+    "ioredis": "^5.9.3",
+    "sanitize-html": "^2.13.1"
   },
   "peerDependencies": {
     "@indiekit/error": "^1.0.0-beta.25",

package/views/activitypub-compose.njk

@@ -0,0 +1,94 @@
+{% extends "layouts/reader.njk" %}
+
+{% from "heading/macro.njk" import heading with context %}
+
+{% block content %}
+  {{ heading({
+    text: title,
+    level: 1,
+    parent: { text: __("activitypub.reader.title"), href: mountPath + "/admin/reader" }
+  }) }}
+
+  {# Reply context — show the post being replied to #}
+  {% if replyContext %}
+    <div class="ap-compose__context">
+      <div class="ap-compose__context-label">{{ __("activitypub.reader.replyingTo") }}</div>
+      {% if replyContext.author %}
+        <div class="ap-compose__context-author">
+          <a href="{{ replyContext.author.url }}">{{ replyContext.author.name }}</a>
+        </div>
+      {% endif %}
+      {% if replyContext.content and replyContext.content.text %}
+        <blockquote class="ap-compose__context-text">
+          {{ replyContext.content.text | truncate(300) }}
+        </blockquote>
+      {% endif %}
+      <a href="{{ replyTo }}" class="ap-compose__context-link" target="_blank" rel="noopener">{{ replyTo }}</a>
+    </div>
+  {% endif %}
+
+  <form method="post" action="{{ mountPath }}/admin/reader/compose" class="ap-compose__form"
+    x-data="{
+      mode: 'micropub',
+      content: '',
+      maxChars: 500,
+      get remaining() { return this.maxChars - this.content.length; }
+    }">
+    <input type="hidden" name="_csrf" value="{{ csrfToken }}">
+    {% if replyTo %}
+      <input type="hidden" name="in-reply-to" value="{{ replyTo }}">
+    {% endif %}
+
+    {# Mode toggle #}
+    <fieldset class="ap-compose__mode">
+      <legend>{{ __("activitypub.compose.modeLabel") }}</legend>
+      <label class="ap-compose__mode-option">
+        <input type="radio" name="mode" value="micropub" x-model="mode" checked>
+        {{ __("activitypub.compose.modeMicropub") }}
+        <span class="ap-compose__mode-hint">{{ __("activitypub.compose.modeMicropubHint") }}</span>
+      </label>
+      <label class="ap-compose__mode-option">
+        <input type="radio" name="mode" value="quick" x-model="mode">
+        {{ __("activitypub.compose.modeQuick") }}
+        <span class="ap-compose__mode-hint">{{ __("activitypub.compose.modeQuickHint") }}</span>
+      </label>
+    </fieldset>
+
+    {# Content textarea #}
+    <div class="ap-compose__editor">
+      <textarea name="content" class="ap-compose__textarea"
+        rows="6"
+        :maxlength="mode === 'quick' ? maxChars : undefined"
+        x-model="content"
+        placeholder="{{ __('activitypub.compose.placeholder') }}"
+        required></textarea>
+      <div class="ap-compose__counter" x-show="mode === 'quick'" x-cloak>
+        <span :class="{ 'ap-compose__counter--warn': remaining < 50, 'ap-compose__counter--over': remaining < 0 }"
+          x-text="remaining"></span>
+      </div>
+    </div>
+
+    {# Syndication targets (Micropub mode only) #}
+    {% if syndicationTargets.length > 0 %}
+      <fieldset class="ap-compose__syndication" x-show="mode === 'micropub'">
+        <legend>{{ __("activitypub.compose.syndicateLabel") }}</legend>
+        {% for target in syndicationTargets %}
+          <label class="ap-compose__syndication-target">
+            <input type="checkbox" name="mp-syndicate-to" value="{{ target.uid }}" checked>
+            {{ target.name }}
+          </label>
+        {% endfor %}
+      </fieldset>
+    {% endif %}
+
+    <div class="ap-compose__actions">
+      <button type="submit" class="ap-compose__submit">
+        <span x-show="mode === 'micropub'">{{ __("activitypub.compose.submitMicropub") }}</span>
+        <span x-show="mode === 'quick'">{{ __("activitypub.compose.submitQuick") }}</span>
+      </button>
+      <a href="{{ mountPath }}/admin/reader" class="ap-compose__cancel">
+        {{ __("activitypub.compose.cancel") }}
+      </a>
+    </div>
+  </form>
+{% endblock %}

package/views/activitypub-moderation.njk

@@ -0,0 +1,118 @@
+{% extends "layouts/reader.njk" %}
+
+{% from "heading/macro.njk" import heading with context %}
+{% from "prose/macro.njk" import prose with context %}
+
+{% block content %}
+  {{ heading({
+    text: title,
+    level: 1,
+    parent: { text: __("activitypub.reader.title"), href: mountPath + "/admin/reader" }
+  }) }}
+
+  {# Blocked actors #}
+  <section class="ap-moderation__section">
+    <h2>{{ __("activitypub.moderation.blockedTitle") }}</h2>
+    {% if blocked.length > 0 %}
+      <ul class="ap-moderation__list">
+        {% for entry in blocked %}
+          <li class="ap-moderation__entry"
+            x-data="{ removing: false }">
+            <a href="{{ entry.url }}">{{ entry.url }}</a>
+            <button class="ap-moderation__remove"
+              :disabled="removing"
+              @click="
+                removing = true;
+                fetch('{{ mountPath }}/admin/reader/unblock', {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': '{{ csrfToken }}' },
+                  body: JSON.stringify({ url: '{{ entry.url }}' })
+                }).then(r => r.json()).then(d => { if (d.success) $el.closest('li').remove(); else removing = false; }).catch(() => removing = false);
+              ">{{ __("activitypub.moderation.unblock") }}</button>
+          </li>
+        {% endfor %}
+      </ul>
+    {% else %}
+      {{ prose({ text: __("activitypub.moderation.noBlocked") }) }}
+    {% endif %}
+  </section>
+
+  {# Muted actors #}
+  <section class="ap-moderation__section">
+    <h2>{{ __("activitypub.moderation.mutedActorsTitle") }}</h2>
+    {% set mutedActors = muted | selectattr("url") %}
+    {% if mutedActors | length > 0 %}
+      <ul class="ap-moderation__list">
+        {% for entry in mutedActors %}
+          <li class="ap-moderation__entry"
+            x-data="{ removing: false }">
+            <a href="{{ entry.url }}">{{ entry.url }}</a>
+            <button class="ap-moderation__remove"
+              :disabled="removing"
+              @click="
+                removing = true;
+                fetch('{{ mountPath }}/admin/reader/unmute', {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': '{{ csrfToken }}' },
+                  body: JSON.stringify({ url: '{{ entry.url }}' })
+                }).then(r => r.json()).then(d => { if (d.success) $el.closest('li').remove(); else removing = false; }).catch(() => removing = false);
+              ">{{ __("activitypub.moderation.unmute") }}</button>
+          </li>
+        {% endfor %}
+      </ul>
+    {% else %}
+      {{ prose({ text: __("activitypub.moderation.noMutedActors") }) }}
+    {% endif %}
+  </section>
+
+  {# Muted keywords #}
+  <section class="ap-moderation__section">
+    <h2>{{ __("activitypub.moderation.mutedKeywordsTitle") }}</h2>
+    {% set mutedKeywords = muted | selectattr("keyword") %}
+    {% if mutedKeywords | length > 0 %}
+      <ul class="ap-moderation__list">
+        {% for entry in mutedKeywords %}
+          <li class="ap-moderation__entry"
+            x-data="{ removing: false }">
+            <code>{{ entry.keyword }}</code>
+            <button class="ap-moderation__remove"
+              :disabled="removing"
+              @click="
+                removing = true;
+                fetch('{{ mountPath }}/admin/reader/unmute', {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': '{{ csrfToken }}' },
+                  body: JSON.stringify({ keyword: '{{ entry.keyword }}' })
+                }).then(r => r.json()).then(d => { if (d.success) $el.closest('li').remove(); else removing = false; }).catch(() => removing = false);
+              ">{{ __("activitypub.moderation.unmute") }}</button>
+          </li>
+        {% endfor %}
+      </ul>
+    {% else %}
+      {{ prose({ text: __("activitypub.moderation.noMutedKeywords") }) }}
+    {% endif %}
+  </section>
+
+  {# Add keyword mute form #}
+  <section class="ap-moderation__section">
+    <h2>{{ __("activitypub.moderation.addKeywordTitle") }}</h2>
+    <form class="ap-moderation__add-form"
+      x-data="{ keyword: '', submitting: false }"
+      @submit.prevent="
+        if (!keyword.trim()) return;
+        submitting = true;
+        fetch('{{ mountPath }}/admin/reader/mute', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': '{{ csrfToken }}' },
+          body: JSON.stringify({ keyword: keyword.trim() })
+        }).then(r => r.json()).then(d => { if (d.success) location.reload(); submitting = false; }).catch(() => submitting = false);
+      ">
+      <input type="text" x-model="keyword"
+        placeholder="{{ __('activitypub.moderation.keywordPlaceholder') }}"
+        class="ap-moderation__input">
+      <button type="submit" :disabled="submitting" class="ap-moderation__add-btn">
+        {{ __("activitypub.moderation.addKeyword") }}
+      </button>
+    </form>
+  </section>
+{% endblock %}

package/views/activitypub-notifications.njk

@@ -0,0 +1,31 @@
+{% extends "layouts/reader.njk" %}
+
+{% from "heading/macro.njk" import heading with context %}
+{% from "prose/macro.njk" import prose with context %}
+
+{% block content %}
+  {{ heading({
+    text: __("activitypub.notifications.title"),
+    level: 1,
+    parent: { text: __("activitypub.reader.title"), href: mountPath + "/admin/reader" }
+  }) }}
+
+  {% if items.length > 0 %}
+    <div class="ap-timeline">
+      {% for item in items %}
+        {% include "partials/ap-notification-card.njk" %}
+      {% endfor %}
+    </div>
+
+    {# Pagination #}
+    {% if before %}
+      <nav class="ap-pagination">
+        <a href="?before={{ before }}" class="ap-pagination__next">
+          {{ __("activitypub.reader.pagination.older") }}
+        </a>
+      </nav>
+    {% endif %}
+  {% else %}
+    {{ prose({ text: __("activitypub.notifications.empty") }) }}
+  {% endif %}
+{% endblock %}

package/views/activitypub-profile.njk

@@ -4,6 +4,7 @@
 {% from "input/macro.njk" import input with context %}
 {% from "textarea/macro.njk" import textarea with context %}
 {% from "checkboxes/macro.njk" import checkboxes with context %}
+{% from "radios/macro.njk" import radios with context %}
 {% from "button/macro.njk" import button with context %}
 {% from "notification-banner/macro.njk" import notificationBanner with context %}
 {% from "prose/macro.njk" import prose with context %}
@@ -57,6 +58,50 @@
       type: "url"
     }) }}
 
+    {{ radios({
+      name: "actorType",
+      fieldset: {
+        legend: __("activitypub.profile.actorTypeLabel")
+      },
+      hint: __("activitypub.profile.actorTypeHint"),
+      items: [{
+        label: "Person",
+        value: "Person"
+      }, {
+        label: "Service",
+        value: "Service"
+      }, {
+        label: "Organization",
+        value: "Organization"
+      }],
+      values: [profile.actorType or "Person"]
+    }) }}
+
+    <fieldset class="fieldset" style="margin-block-end: var(--space-l);">
+      <legend class="label">{{ __("activitypub.profile.linksLabel") }}</legend>
+      <p class="hint">{{ __("activitypub.profile.linksHint") }}</p>
+
+      <div id="profile-links">
+        {% if profile.attachments and profile.attachments.length > 0 %}
+          {% for att in profile.attachments %}
+            <div class="profile-link-row" style="display: grid; grid-template-columns: 1fr 2fr auto; gap: var(--space-s); align-items: end; margin-block-end: var(--space-s);">
+              <div>
+                <label class="label" for="link_name_{{ loop.index }}">{{ __("activitypub.profile.linkNameLabel") }}</label>
+                <input class="input" type="text" id="link_name_{{ loop.index }}" name="link_name[]" value="{{ att.name }}" placeholder="Website">
+              </div>
+              <div>
+                <label class="label" for="link_value_{{ loop.index }}">{{ __("activitypub.profile.linkValueLabel") }}</label>
+                <input class="input" type="url" id="link_value_{{ loop.index }}" name="link_value[]" value="{{ att.value }}" placeholder="https://example.com">
+              </div>
+              <button type="button" class="button button--small" onclick="this.closest('.profile-link-row').remove()" style="margin-block-end: 4px;">{{ __("activitypub.profile.removeLink") }}</button>
+            </div>
+          {% endfor %}
+        {% endif %}
+      </div>
+
+      <button type="button" class="button button--small" id="add-link-btn">{{ __("activitypub.profile.addLink") }}</button>
+    </fieldset>
+
     {{ checkboxes({
       name: "manuallyApprovesFollowers",
       items: [
@@ -83,4 +128,57 @@
 
     {{ button({ text: __("activitypub.profile.save") }) }}
   </form>
+
+  <script>
+    (function() {
+      var linkCount = {{ (profile.attachments.length if profile.attachments) or 0 }};
+      document.getElementById('add-link-btn').addEventListener('click', function() {
+        linkCount++;
+        var container = document.getElementById('profile-links');
+        var row = document.createElement('div');
+        row.className = 'profile-link-row';
+        row.style.cssText = 'display: grid; grid-template-columns: 1fr 2fr auto; gap: var(--space-s); align-items: end; margin-block-end: var(--space-s);';
+
+        var nameDiv = document.createElement('div');
+        var nameLabel = document.createElement('label');
+        nameLabel.className = 'label';
+        nameLabel.setAttribute('for', 'link_name_' + linkCount);
+        nameLabel.textContent = 'Label';
+        var nameInput = document.createElement('input');
+        nameInput.className = 'input';
+        nameInput.type = 'text';
+        nameInput.id = 'link_name_' + linkCount;
+        nameInput.name = 'link_name[]';
+        nameInput.placeholder = 'Website';
+        nameDiv.appendChild(nameLabel);
+        nameDiv.appendChild(nameInput);
+
+        var valueDiv = document.createElement('div');
+        var valueLabel = document.createElement('label');
+        valueLabel.className = 'label';
+        valueLabel.setAttribute('for', 'link_value_' + linkCount);
+        valueLabel.textContent = 'URL';
+        var valueInput = document.createElement('input');
+        valueInput.className = 'input';
+        valueInput.type = 'url';
+        valueInput.id = 'link_value_' + linkCount;
+        valueInput.name = 'link_value[]';
+        valueInput.placeholder = 'https://example.com';
+        valueDiv.appendChild(valueLabel);
+        valueDiv.appendChild(valueInput);
+
+        var removeBtn = document.createElement('button');
+        removeBtn.type = 'button';
+        removeBtn.className = 'button button--small';
+        removeBtn.style.cssText = 'margin-block-end: 4px;';
+        removeBtn.textContent = 'Remove';
+        removeBtn.addEventListener('click', function() { row.remove(); });
+
+        row.appendChild(nameDiv);
+        row.appendChild(valueDiv);
+        row.appendChild(removeBtn);
+        container.appendChild(row);
+      });
+    })();
+  </script>
 {% endblock %}

package/views/activitypub-reader.njk

@@ -0,0 +1,61 @@
+{% extends "layouts/reader.njk" %}
+
+{% from "heading/macro.njk" import heading with context %}
+{% from "prose/macro.njk" import prose with context %}
+
+{% block content %}
+  {{ heading({
+    text: __("activitypub.reader.title"),
+    level: 1,
+    parent: { text: __("activitypub.title"), href: mountPath }
+  }) }}
+
+  {# Tab navigation #}
+  <nav class="ap-tabs" role="tablist">
+    <a href="?tab=all" class="ap-tab{% if tab == 'all' %} ap-tab--active{% endif %}" role="tab">
+      {{ __("activitypub.reader.tabs.all") }}
+    </a>
+    <a href="?tab=notes" class="ap-tab{% if tab == 'notes' %} ap-tab--active{% endif %}" role="tab">
+      {{ __("activitypub.reader.tabs.notes") }}
+    </a>
+    <a href="?tab=articles" class="ap-tab{% if tab == 'articles' %} ap-tab--active{% endif %}" role="tab">
+      {{ __("activitypub.reader.tabs.articles") }}
+    </a>
+    <a href="?tab=replies" class="ap-tab{% if tab == 'replies' %} ap-tab--active{% endif %}" role="tab">
+      {{ __("activitypub.reader.tabs.replies") }}
+    </a>
+    <a href="?tab=boosts" class="ap-tab{% if tab == 'boosts' %} ap-tab--active{% endif %}" role="tab">
+      {{ __("activitypub.reader.tabs.boosts") }}
+    </a>
+    <a href="?tab=media" class="ap-tab{% if tab == 'media' %} ap-tab--active{% endif %}" role="tab">
+      {{ __("activitypub.reader.tabs.media") }}
+    </a>
+  </nav>
+
+  {# Timeline items #}
+  {% if items.length > 0 %}
+    <div class="ap-timeline">
+      {% for item in items %}
+        {% include "partials/ap-item-card.njk" %}
+      {% endfor %}
+    </div>
+
+    {# Pagination #}
+    {% if before or after %}
+      <nav class="ap-pagination">
+        {% if after %}
+          <a href="?tab={{ tab }}&after={{ after }}" class="ap-pagination__prev">
+            {{ __("activitypub.reader.pagination.newer") }}
+          </a>
+        {% endif %}
+        {% if before %}
+          <a href="?tab={{ tab }}&before={{ before }}" class="ap-pagination__next">
+            {{ __("activitypub.reader.pagination.older") }}
+          </a>
+        {% endif %}
+      </nav>
+    {% endif %}
+  {% else %}
+    {{ prose({ text: __("activitypub.reader.empty") }) }}
+  {% endif %}
+{% endblock %}

package/views/activitypub-remote-profile.njk

@@ -0,0 +1,117 @@
+{% extends "layouts/reader.njk" %}
+
+{% from "heading/macro.njk" import heading with context %}
+{% from "prose/macro.njk" import prose with context %}
+
+{% block content %}
+  {{ heading({
+    text: title,
+    level: 1,
+    parent: { text: __("activitypub.reader.title"), href: mountPath + "/admin/reader" }
+  }) }}
+
+  <div class="ap-profile"
+    x-data="{
+      following: {{ 'true' if isFollowing else 'false' }},
+      muted: {{ 'true' if isMuted else 'false' }},
+      blocked: {{ 'true' if isBlocked else 'false' }},
+      loading: false,
+      async action(endpoint, body) {
+        if (this.loading) return;
+        this.loading = true;
+        try {
+          const res = await fetch('{{ mountPath }}/admin/reader/' + endpoint, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'X-CSRF-Token': '{{ csrfToken }}'
+            },
+            body: JSON.stringify(body)
+          });
+          const data = await res.json();
+          return data.success;
+        } catch { return false; }
+        finally { this.loading = false; }
+      }
+    }">
+
+    {# Header image #}
+    {% if image %}
+      <div class="ap-profile__header">
+        <img src="{{ image }}" alt="" class="ap-profile__header-img">
+      </div>
+    {% endif %}
+
+    {# Profile info #}
+    <div class="ap-profile__info">
+      <div class="ap-profile__avatar-wrap">
+        {% if icon %}
+          <img src="{{ icon }}" alt="{{ name }}" class="ap-profile__avatar">
+        {% else %}
+          <div class="ap-profile__avatar ap-profile__avatar--placeholder">{{ name[0] }}</div>
+        {% endif %}
+      </div>
+
+      <div class="ap-profile__details">
+        <h2 class="ap-profile__name">{{ name }}</h2>
+        {% if actorHandle %}
+          <div class="ap-profile__handle">@{{ actorHandle }}@{{ instanceHost }}</div>
+        {% endif %}
+        {% if summary %}
+          <div class="ap-profile__bio">{{ summary | safe }}</div>
+        {% endif %}
+      </div>
+
+      {# Action buttons #}
+      <div class="ap-profile__actions">
+        <button class="ap-profile__action ap-profile__action--follow"
+          :class="{ 'ap-profile__action--active': following }"
+          :disabled="loading"
+          @click="
+            const ok = await action(following ? 'unfollow' : 'follow', { url: '{{ actorUrl }}' });
+            if (ok) following = !following;
+          ">
+          <span x-text="following ? '{{ __('activitypub.profile.remote.unfollow') }}' : '{{ __('activitypub.profile.remote.follow') }}'"></span>
+        </button>
+
+        <button class="ap-profile__action"
+          :disabled="loading"
+          @click="
+            const ok = await action(muted ? 'unmute' : 'mute', { url: '{{ actorUrl }}' });
+            if (ok) muted = !muted;
+          ">
+          <span x-text="muted ? '{{ __('activitypub.moderation.unmute') }}' : '{{ __('activitypub.moderation.muteActor') }}'"></span>
+        </button>
+
+        <button class="ap-profile__action ap-profile__action--danger"
+          :disabled="loading"
+          @click="
+            const ok = await action(blocked ? 'unblock' : 'block', { url: '{{ actorUrl }}' });
+            if (ok) blocked = !blocked;
+          ">
+          <span x-text="blocked ? '{{ __('activitypub.moderation.unblock') }}' : '{{ __('activitypub.moderation.blockActor') }}'"></span>
+        </button>
+
+        <a href="{{ actorUrl }}" class="ap-profile__action" target="_blank" rel="noopener">
+          {{ __("activitypub.profile.remote.viewOn") }} {{ instanceHost }}
+        </a>
+      </div>
+    </div>
+
+    {# Posts from this actor #}
+    <div class="ap-profile__posts">
+      <h3>{{ __("activitypub.profile.remote.postsTitle") }}</h3>
+      {% if posts.length > 0 %}
+        <div class="ap-timeline">
+          {% for item in posts %}
+            {% include "partials/ap-item-card.njk" %}
+          {% endfor %}
+        </div>
+      {% elif isFollowing %}
+        {{ prose({ text: __("activitypub.profile.remote.noPosts") }) }}
+      {% else %}
+        {{ prose({ text: __("activitypub.profile.remote.followToSee") }) }}
+      {% endif %}
+    </div>
+  </div>
+{% endblock %}