From 39351c4728bf15034cec93c92160646b83f8dfd4 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Sat, 14 Mar 2026 16:34:56 +0100
Subject: [PATCH] feat: reply-to-interactions frontend

- Owner detection via Alpine.js global store (shared across components)
- Inline reply form for native comments with threaded display
- Micropub reply support for social/webmention interactions
- Provenance badges (Mastodon/Bluesky/ActivityPub/IndieWeb) on webmentions
- detectPlatform() for both build-time and client-side webmentions
- Reply buttons on webmention cards (owner only)
- Threaded owner reply display under matching webmentions
- Auto-expand comments section when comments exist
- Hide IndieAuth sign-in when admin session detected
- Author badge on owner comments and replies

Confab-Link: http://localhost:8080/sessions/184584f4-67e1-485a-aba8-02ac34a600fe
---
 _includes/components/comments.njk    |  95 +++++++++++---
 _includes/components/webmentions.njk |  20 ++-
 js/comments.js                       | 153 +++++++++++++++++++++-
 js/webmentions.js                    | 188 +++++++++++++++++++++++++++
 4 files changed, 430 insertions(+), 26 deletions(-)

diff --git a/_includes/components/comments.njk b/_includes/components/comments.njk
index dacd261..1344079 100644
--- a/_includes/components/comments.njk
+++ b/_includes/components/comments.njk
@@ -30,7 +30,7 @@
       </div>
 
       {# Sign-in form (shown when not authenticated) #}
-      <div x-show="!user" x-cloak>
+      <div x-show="!user && !isOwner" x-cloak>
         <p class="text-sm text-surface-600 dark:text-surface-400 mb-3">Sign in with your website to comment:</p>
         <form x-on:submit.prevent="startAuth()" class="flex gap-2 items-end flex-wrap">
           <div class="flex-1 min-w-[200px]">
@@ -76,28 +76,83 @@
           <p class="text-sm text-surface-600 dark:text-surface-400">Loading comments...</p>
         </template>
 
-        <template x-for="comment in comments" x-bind:key="comment.published">
-          <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
-            <div class="flex items-start gap-3">
-              <template x-if="comment.author?.photo">
-                <img x-bind:src="comment.author.photo" x-bind:alt="comment.author.name"
-                     class="w-8 h-8 rounded-full flex-shrink-0" loading="lazy">
-              </template>
-              <template x-if="!comment.author?.photo">
-                <div class="w-8 h-8 rounded-full bg-surface-200 dark:bg-surface-700 flex-shrink-0 flex items-center justify-center text-xs font-bold"
-                     x-text="(comment.author?.name || '?')[0].toUpperCase()">
+        <template x-for="comment in comments.filter(c => !c.parent_id)" x-bind:key="comment._id || comment.published">
+          <div>
+            {# Parent comment #}
+            <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
+              <div class="flex items-start gap-3">
+                <template x-if="comment.author?.photo">
+                  <img x-bind:src="comment.author.photo" x-bind:alt="comment.author.name"
+                       class="w-8 h-8 rounded-full flex-shrink-0" loading="lazy">
+                </template>
+                <template x-if="!comment.author?.photo">
+                  <div class="w-8 h-8 rounded-full bg-surface-200 dark:bg-surface-700 flex-shrink-0 flex items-center justify-center text-xs font-bold"
+                       x-text="(comment.author?.name || '?')[0].toUpperCase()">
+                  </div>
+                </template>
+                <div class="flex-1">
+                  <div class="flex items-center gap-2 flex-wrap">
+                    <a x-bind:href="comment.author?.url" class="font-medium text-sm hover:underline" target="_blank" rel="noopener"
+                       x-text="comment.author?.name || comment.author?.url"></a>
+                    <span x-show="comment.is_owner || (ownerProfile && comment.author?.url === ownerProfile.url)"
+                          class="inline-flex items-center px-1.5 py-0.5 text-xs font-medium bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full">
+                      Author
+                    </span>
+                    <time class="text-xs text-surface-600 dark:text-surface-400 font-mono" x-bind:datetime="comment.published"
+                          x-text="new Date(comment.published).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })"></time>
+                  </div>
+                  <div class="mt-1 text-sm prose dark:prose-invert" x-html="comment.content?.html || comment.content?.text"></div>
+                  <div class="mt-2" x-show="isOwner && !(comment.is_owner || (ownerProfile && comment.author?.url === ownerProfile.url))">
+                    <button class="text-xs text-primary-600 dark:text-primary-400 hover:underline"
+                            @click="startReply(comment._id, 'comment', null, null)">
+                      Reply
+                    </button>
+                  </div>
                 </div>
-              </template>
-              <div class="flex-1">
-                <div class="flex items-center gap-2">
-                  <a x-bind:href="comment.author?.url" class="font-medium text-sm hover:underline" target="_blank" rel="noopener"
-                     x-text="comment.author?.name || comment.author?.url"></a>
-                  <time class="text-xs text-surface-600 dark:text-surface-400 font-mono" x-bind:datetime="comment.published"
-                        x-text="new Date(comment.published).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })"></time>
-                </div>
-                <div class="mt-1 text-sm prose dark:prose-invert" x-html="comment.content?.html || comment.content?.text"></div>
               </div>
             </div>
+
+            {# Inline reply form #}
+            <div x-show="replyingTo && replyingTo.commentId === comment._id && replyingTo.platform === 'comment'"
+                 class="ml-8 mt-2 p-3 bg-surface-100 dark:bg-surface-900 rounded-lg border-l-2 border-primary-400" x-cloak>
+              <textarea x-model="replyText" rows="3" placeholder="Write your reply..."
+                        class="w-full px-3 py-2 border rounded-lg text-sm dark:bg-surface-800 dark:border-surface-700 dark:text-surface-100"></textarea>
+              <div class="flex gap-2 mt-2">
+                <button class="button text-sm" @click="submitReply()" x-bind:disabled="replySubmitting">
+                  <span x-show="!replySubmitting">Send Reply</span>
+                  <span x-show="replySubmitting" x-cloak>Sending...</span>
+                </button>
+                <button class="text-xs text-surface-500 hover:underline" @click="cancelReply()">Cancel</button>
+              </div>
+            </div>
+
+            {# Threaded child replies #}
+            <template x-for="reply in comments.filter(c => c.parent_id === comment._id)" x-bind:key="reply._id || reply.published">
+              <div class="ml-8 mt-2 p-3 bg-surface-100 dark:bg-surface-900 rounded-lg border-l-2 border-amber-400 dark:border-amber-600">
+                <div class="flex items-start gap-2">
+                  <template x-if="reply.author?.photo">
+                    <img x-bind:src="reply.author.photo" x-bind:alt="reply.author.name"
+                         class="w-6 h-6 rounded-full flex-shrink-0" loading="lazy">
+                  </template>
+                  <template x-if="!reply.author?.photo">
+                    <div class="w-6 h-6 rounded-full bg-amber-100 dark:bg-amber-900 flex-shrink-0 flex items-center justify-center text-xs font-bold"
+                         x-text="(reply.author?.name || '?')[0].toUpperCase()">
+                    </div>
+                  </template>
+                  <div class="flex-1">
+                    <div class="flex items-center gap-2 flex-wrap">
+                      <span class="font-medium text-sm" x-text="reply.author?.name || 'Owner'"></span>
+                      <span class="inline-flex items-center px-1.5 py-0.5 text-xs font-medium bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full">
+                        Author
+                      </span>
+                      <time class="text-xs text-surface-600 dark:text-surface-400 font-mono" x-bind:datetime="reply.published"
+                            x-text="new Date(reply.published).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })"></time>
+                    </div>
+                    <div class="mt-1 text-sm prose dark:prose-invert" x-html="reply.content?.html || reply.content?.text"></div>
+                  </div>
+                </div>
+              </div>
+            </template>
           </div>
         </template>
 
diff --git a/_includes/components/webmentions.njk b/_includes/components/webmentions.njk
index f891e45..c29ce46 100644
--- a/_includes/components/webmentions.njk
+++ b/_includes/components/webmentions.njk
@@ -30,7 +30,7 @@
     <is-land on:visible>
     <ul class="facepile" role="list">
       {% for like in likes %}
-      <li class="inline">
+      <li class="inline" data-wm-source="{{ like['wm-source'] if like['wm-source'] else '' }}" data-author-url="{{ like.author.url }}">
         <a href="{{ like.author.url }}"
            class="facepile-avatar"
            aria-label="{{ like.author.name }} (opens in new tab)"
@@ -60,7 +60,7 @@
     <is-land on:visible>
     <ul class="facepile" role="list">
       {% for repost in reposts %}
-      <li class="inline">
+      <li class="inline" data-wm-source="{{ repost['wm-source'] if repost['wm-source'] else '' }}" data-author-url="{{ repost.author.url }}">
         <a href="{{ repost.author.url }}"
            class="facepile-avatar"
            aria-label="{{ repost.author.name }} (opens in new tab)"
@@ -90,7 +90,7 @@
     <is-land on:visible>
     <ul class="facepile" role="list">
       {% for bookmark in bookmarks %}
-      <li class="inline">
+      <li class="inline" data-wm-source="{{ bookmark['wm-source'] if bookmark['wm-source'] else '' }}" data-author-url="{{ bookmark.author.url }}">
         <a href="{{ bookmark.author.url }}"
            class="facepile-avatar"
            aria-label="{{ bookmark.author.name }} (opens in new tab)"
@@ -119,7 +119,10 @@
     </h3>
     <ul class="space-y-4">
       {% for reply in replies %}
-      <li class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
+      <li class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm"
+          data-wm-url="{{ reply.url }}"
+          data-wm-source="{{ reply['wm-source'] if reply['wm-source'] else '' }}"
+          data-author-url="{{ reply.author.url }}">
         <div class="flex gap-3">
           <a href="{{ reply.author.url }}" target="_blank" rel="noopener">
             <img
@@ -130,13 +133,14 @@
             >
           </a>
           <div class="flex-1 min-w-0">
-            <div class="flex items-baseline gap-2 mb-1">
+            <div class="flex items-center gap-2 mb-1 flex-wrap">
               <a href="{{ reply.author.url }}"
                  class="font-semibold text-surface-900 dark:text-surface-100 hover:underline"
                  target="_blank"
                  rel="noopener">
                 {{ reply.author.name }}
               </a>
+              <span class="wm-provenance-badge" data-detect="true"></span>
               <a href="{{ reply.url }}"
                  class="text-xs text-surface-600 dark:text-surface-400 hover:underline"
                  target="_blank"
@@ -149,8 +153,14 @@
             <div class="text-surface-700 dark:text-surface-300 prose dark:prose-invert prose-sm max-w-none">
               {{ reply.content.html | safe if reply.content.html else reply.content.text }}
             </div>
+            <button class="wm-reply-btn hidden text-xs text-primary-600 dark:text-primary-400 hover:underline mt-2"
+                    data-reply-url="{{ reply.url }}"
+                    data-platform="">
+              Reply
+            </button>
           </div>
         </div>
+        <div class="wm-owner-reply-slot ml-13 mt-2"></div>
       </li>
       {% endfor %}
     </ul>
diff --git a/js/comments.js b/js/comments.js
index 11219e4..6305a3a 100644
--- a/js/comments.js
+++ b/js/comments.js
@@ -1,12 +1,20 @@
 /**
  * Client-side comments component (Alpine.js)
- * Handles IndieAuth flow, comment submission, and display
+ * Handles IndieAuth flow, comment submission, display, and owner replies
  *
  * Registered via Alpine.data() so the component is available
  * regardless of script loading order.
  */
 
 document.addEventListener("alpine:init", () => {
+  // Global owner state store — shared across components
+  Alpine.store("owner", {
+    isOwner: false,
+    profile: null,
+    syndicationTargets: {},
+    replies: [],
+  });
+
   Alpine.data("commentsSection", (targetUrl) => ({
     targetUrl,
     user: null,
@@ -20,10 +28,20 @@ document.addEventListener("alpine:init", () => {
     statusType: "info",
     maxLength: 2000,
     showForm: false,
+    isOwner: false,
+    ownerProfile: null,
+    syndicationTargets: {},
+    replyingTo: null,
+    replyText: "",
+    replySubmitting: false,
 
     async init() {
       await this.checkSession();
+      await this.checkOwner();
       await this.loadComments();
+      if (this.isOwner) {
+        await this.loadOwnerReplies();
+      }
       this.handleAuthReturn();
     },
 
@@ -41,6 +59,135 @@ document.addEventListener("alpine:init", () => {
       }
     },
 
+    async checkOwner() {
+      try {
+        const res = await fetch("/comments/api/is-owner", {
+          credentials: "include",
+        });
+        if (res.ok) {
+          const data = await res.json();
+          if (data.isOwner) {
+            this.isOwner = true;
+            this.ownerProfile = {
+              name: data.name,
+              url: data.url,
+              photo: data.photo,
+            };
+            this.syndicationTargets = data.syndicationTargets || {};
+
+            // Also update global store for webmentions component
+            Alpine.store("owner").isOwner = true;
+            Alpine.store("owner").profile = this.ownerProfile;
+            Alpine.store("owner").syndicationTargets = this.syndicationTargets;
+          }
+        }
+      } catch {
+        // Not owner
+      }
+    },
+
+    async loadOwnerReplies() {
+      try {
+        const url = `/comments/api/owner-replies?target=${encodeURIComponent(this.targetUrl)}`;
+        const res = await fetch(url);
+        if (res.ok) {
+          const data = await res.json();
+          // Store for webmentions component to use via Alpine store
+          Alpine.store("owner").replies = data.children || [];
+        }
+      } catch {
+        // Silently fail
+      }
+    },
+
+    startReply(commentId, platform, replyUrl, syndicateTo) {
+      this.replyingTo = { commentId, platform, replyUrl, syndicateTo };
+      this.replyText = "";
+    },
+
+    cancelReply() {
+      this.replyingTo = null;
+      this.replyText = "";
+    },
+
+    async submitReply() {
+      if (!this.replyText.trim() || !this.replyingTo) return;
+      this.replySubmitting = true;
+
+      try {
+        if (this.replyingTo.platform === "comment") {
+          // Native comment reply — POST to comments API
+          const res = await fetch("/comments/api/reply", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            credentials: "include",
+            body: JSON.stringify({
+              parent_id: this.replyingTo.commentId,
+              content: this.replyText,
+              target: this.targetUrl,
+            }),
+          });
+
+          if (res.ok) {
+            const data = await res.json();
+            if (data.comment) {
+              this.comments.push(data.comment);
+            }
+            this.showStatus("Reply posted!", "success");
+          } else {
+            const data = await res.json();
+            this.showStatus(data.error || "Failed to reply", "error");
+          }
+        } else {
+          // Micropub reply — POST to /micropub
+          const micropubBody = {
+            type: ["h-entry"],
+            properties: {
+              content: [this.replyText],
+              "in-reply-to": [this.replyingTo.replyUrl],
+            },
+          };
+
+          // Only add syndication target for the matching platform
+          if (this.replyingTo.syndicateTo) {
+            micropubBody.properties["mp-syndicate-to"] = [
+              this.replyingTo.syndicateTo,
+            ];
+          } else {
+            // IndieWeb webmention — no syndication, empty array
+            micropubBody.properties["mp-syndicate-to"] = [];
+          }
+
+          const res = await fetch("/micropub", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              Accept: "application/json",
+            },
+            credentials: "include",
+            body: JSON.stringify(micropubBody),
+          });
+
+          if (res.ok || res.status === 201 || res.status === 202) {
+            this.showStatus("Reply posted and syndicated!", "success");
+          } else {
+            const data = await res.json().catch(() => ({}));
+            this.showStatus(
+              data.error_description || data.error || "Failed to post reply",
+              "error",
+            );
+          }
+        }
+
+        this.replyingTo = null;
+        this.replyText = "";
+      } catch (error) {
+        this.showStatus("Error posting reply: " + error.message, "error");
+      } finally {
+        this.replySubmitting = false;
+      }
+    },
+
     handleAuthReturn() {
       const params = new URLSearchParams(window.location.search);
       const authError = params.get("auth_error");
@@ -62,6 +209,10 @@ document.addEventListener("alpine:init", () => {
         if (res.ok) {
           const data = await res.json();
           this.comments = data.children || [];
+          // Auto-expand if comments exist
+          if (this.comments.length > 0) {
+            this.showForm = true;
+          }
         }
       } catch (e) {
         console.error("[Comments] Load error:", e);
diff --git a/js/webmentions.js b/js/webmentions.js
index f558471..5b630ab 100644
--- a/js/webmentions.js
+++ b/js/webmentions.js
@@ -247,6 +247,8 @@
       const li = document.createElement('li');
       li.className = 'p-4 bg-surface-100 dark:bg-surface-800 rounded-lg ring-2 ring-accent-500';
       li.dataset.new = 'true';
+      li.dataset.platform = detectPlatform(item);
+      li.dataset.wmUrl = item.url || '';
 
       // Build reply card using DOM methods
       const wrapper = document.createElement('div');
@@ -296,6 +298,9 @@
       newBadge.textContent = 'NEW';
 
       headerDiv.appendChild(authorLink);
+      // Add provenance badge
+      var platform = detectPlatform(item);
+      headerDiv.appendChild(createProvenanceBadge(platform));
       headerDiv.appendChild(dateLink);
       headerDiv.appendChild(newBadge);
 
@@ -471,4 +476,187 @@
       year: 'numeric',
     });
   }
+
+  function detectPlatform(item) {
+    var source = item['wm-source'] || '';
+    var authorUrl = (item.author && item.author.url) || '';
+    if (source.includes('brid.gy/') && source.includes('/mastodon/')) return 'mastodon';
+    if (source.includes('brid.gy/') && source.includes('/bluesky/')) return 'bluesky';
+    if (source.includes('fed.brid.gy')) return 'activitypub';
+    if (authorUrl.includes('bsky.app')) return 'bluesky';
+    if (authorUrl.includes('mstdn') || authorUrl.includes('mastodon') || authorUrl.includes('social.') ||
+        authorUrl.includes('fosstodon.') || authorUrl.includes('hachyderm.') || authorUrl.includes('infosec.exchange') ||
+        authorUrl.includes('pleroma.') || authorUrl.includes('misskey.') || authorUrl.includes('pixelfed.')) return 'mastodon';
+    return 'webmention';
+  }
+
+  function createSvgIcon(viewBox, fillAttr, paths, strokeAttrs) {
+    var NS = 'http://www.w3.org/2000/svg';
+    var svg = document.createElementNS(NS, 'svg');
+    svg.setAttribute('class', 'w-3 h-3');
+    svg.setAttribute('viewBox', viewBox);
+    svg.setAttribute('fill', fillAttr || 'currentColor');
+    if (strokeAttrs) {
+      svg.setAttribute('stroke', strokeAttrs.stroke || 'currentColor');
+      svg.setAttribute('stroke-width', strokeAttrs.strokeWidth || '2');
+      svg.setAttribute('stroke-linecap', strokeAttrs.strokeLinecap || 'round');
+      svg.setAttribute('stroke-linejoin', strokeAttrs.strokeLinejoin || 'round');
+    }
+    paths.forEach(function(p) {
+      var el = document.createElementNS(NS, p.tag || 'path');
+      var attrs = p.attrs || {};
+      Object.keys(attrs).forEach(function(attr) {
+        el.setAttribute(attr, attrs[attr]);
+      });
+      svg.appendChild(el);
+    });
+    return svg;
+  }
+
+  function createProvenanceBadge(platform) {
+    var span = document.createElement('span');
+    var svg;
+    if (platform === 'mastodon') {
+      span.className = 'inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 rounded-full';
+      span.title = 'Mastodon';
+      svg = createSvgIcon('0 0 24 24', 'currentColor', [
+        { tag: 'path', attrs: { d: 'M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.668 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z' } }
+      ]);
+    } else if (platform === 'bluesky') {
+      span.className = 'inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-sky-100 dark:bg-sky-900/30 text-sky-600 dark:text-sky-400 rounded-full';
+      span.title = 'Bluesky';
+      svg = createSvgIcon('0 0 568 501', 'currentColor', [
+        { tag: 'path', attrs: { d: 'M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z' } }
+      ]);
+    } else if (platform === 'activitypub') {
+      span.className = 'inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-full';
+      span.title = 'Fediverse (ActivityPub)';
+      svg = createSvgIcon('0 0 24 24', 'currentColor', [
+        { tag: 'path', attrs: { d: 'M13.09 4.43L24 10.73v2.51L13.09 19.58v-2.51L21.83 12 13.09 6.98v-2.55zM13.09 9.49L17.44 12l-4.35 2.51V9.49z' } },
+        { tag: 'path', attrs: { d: 'M10.91 4.43L0 10.73v2.51l8.74-5.03v10.09l2.18 1.28V4.43zM6.56 12L2.18 14.51l4.35 2.51V12z' } }
+      ]);
+    } else {
+      span.className = 'inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-rose-100 dark:bg-rose-900/30 text-rose-600 dark:text-rose-400 rounded-full';
+      span.title = 'IndieWeb';
+      svg = createSvgIcon('0 0 24 24', 'none', [
+        { tag: 'circle', attrs: { cx: '12', cy: '12', r: '10' } },
+        { tag: 'line', attrs: { x1: '2', y1: '12', x2: '22', y2: '12' } },
+        { tag: 'path', attrs: { d: 'M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z' } }
+      ], { stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' });
+    }
+    span.appendChild(svg);
+    return span;
+  }
+
+  // Populate provenance badges on build-time reply cards
+  document.querySelectorAll('.webmention-replies li[data-wm-url]').forEach(function(li) {
+    var source = li.dataset.wmSource || '';
+    var authorUrl = li.dataset.authorUrl || '';
+    var platform = detectPlatform({ 'wm-source': source, author: { url: authorUrl } });
+    li.dataset.platform = platform;
+
+    var badgeSlot = li.querySelector('.wm-provenance-badge');
+    if (badgeSlot) {
+      badgeSlot.replaceWith(createProvenanceBadge(platform));
+    }
+
+    // Set platform on reply button
+    var replyBtn = li.querySelector('.wm-reply-btn');
+    if (replyBtn) {
+      replyBtn.dataset.platform = platform;
+    }
+  });
+
+  // Show reply buttons and wire click handlers if owner is detected
+  // Wait for Alpine to initialize the store
+  document.addEventListener('alpine:initialized', function() {
+    var ownerStore = Alpine.store && Alpine.store('owner');
+    if (!ownerStore || !ownerStore.isOwner) return;
+
+    document.querySelectorAll('.wm-reply-btn').forEach(function(btn) {
+      btn.classList.remove('hidden');
+      btn.addEventListener('click', function() {
+        var replyUrl = btn.dataset.replyUrl;
+        var platform = btn.dataset.platform || 'webmention';
+        var syndicateTo = null;
+        if (platform === 'bluesky') syndicateTo = ownerStore.syndicationTargets.bluesky || null;
+        if (platform === 'mastodon') syndicateTo = ownerStore.syndicationTargets.mastodon || null;
+
+        // Find the commentsSection Alpine component and call startReply
+        var commentsEl = document.querySelector('[x-data*="commentsSection"]');
+        if (commentsEl && commentsEl.__x) {
+          commentsEl.__x.$data.startReply(replyUrl, platform, replyUrl, syndicateTo);
+          // Scroll to the comments section where the form will appear
+          commentsEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        } else if (window.Alpine) {
+          // Alternative: dispatch event for Alpine component to handle
+          var evt = new CustomEvent('owner-reply', {
+            detail: { replyUrl: replyUrl, platform: platform, syndicateTo: syndicateTo },
+            bubbles: true
+          });
+          btn.dispatchEvent(evt);
+        }
+      });
+    });
+
+    // Render threaded owner replies under matching webmention cards
+    var ownerReplies = ownerStore.replies || [];
+    ownerReplies.forEach(function(reply) {
+      var inReplyTo = reply['in-reply-to'];
+      if (!inReplyTo) return;
+
+      // Find the webmention card whose URL matches
+      var matchingLi = document.querySelector('.webmention-replies li[data-wm-url="' + CSS.escape(inReplyTo) + '"]');
+      if (!matchingLi) return;
+
+      var slot = matchingLi.querySelector('.wm-owner-reply-slot');
+      if (!slot) return;
+
+      // Build owner reply card
+      var replyCard = document.createElement('div');
+      replyCard.className = 'p-3 bg-surface-100 dark:bg-surface-900 rounded-lg border-l-2 border-amber-400 dark:border-amber-600';
+
+      var innerDiv = document.createElement('div');
+      innerDiv.className = 'flex items-start gap-2';
+
+      var avatar = document.createElement('div');
+      avatar.className = 'w-6 h-6 rounded-full bg-amber-100 dark:bg-amber-900 flex-shrink-0 flex items-center justify-center text-xs font-bold';
+      avatar.textContent = (reply.author && reply.author.name ? reply.author.name[0] : 'O').toUpperCase();
+
+      var contentArea = document.createElement('div');
+      contentArea.className = 'flex-1';
+
+      var headerRow = document.createElement('div');
+      headerRow.className = 'flex items-center gap-2 flex-wrap';
+
+      var nameSpan = document.createElement('span');
+      nameSpan.className = 'font-medium text-sm';
+      nameSpan.textContent = (reply.author && reply.author.name) || 'Owner';
+
+      var authorBadge = document.createElement('span');
+      authorBadge.className = 'inline-flex items-center px-1.5 py-0.5 text-xs font-medium bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full';
+      authorBadge.textContent = 'Author';
+
+      var timeEl = document.createElement('time');
+      timeEl.className = 'text-xs text-surface-600 dark:text-surface-400 font-mono';
+      timeEl.dateTime = reply.published || '';
+      timeEl.textContent = formatDate(reply.published);
+
+      headerRow.appendChild(nameSpan);
+      headerRow.appendChild(authorBadge);
+      headerRow.appendChild(timeEl);
+
+      var textDiv = document.createElement('div');
+      textDiv.className = 'mt-1 text-sm prose dark:prose-invert';
+      textDiv.textContent = (reply.content && reply.content.text) || '';
+
+      contentArea.appendChild(headerRow);
+      contentArea.appendChild(textDiv);
+
+      innerDiv.appendChild(avatar);
+      innerDiv.appendChild(contentArea);
+      replyCard.appendChild(innerDiv);
+      slot.appendChild(replyCard);
+    });
+  });
 })();