@commonpub/layer 0.3.6 → 0.3.8

package/components/CommentSection.vue

@@ -24,22 +24,22 @@ const { user } = useAuth();
 
 const isFederated = computed(() => !!props.federatedContentId);
 const commentLimit = 20;
+const replySent = ref(false);
 
-const queryParams = computed(() => ({
-  targetType: props.targetType,
-  targetId: props.targetId,
-  limit: commentLimit,
-}));
+const commentUrl = computed(() =>
+  isFederated.value
+    ? `/api/federation/content/${props.federatedContentId}/replies`
+    : '/api/social/comments',
+);
 
-// Skip comment fetch for federated content — local comments table has no record for remote IDs
-const { data: comments, refresh } = await useFetch<Comment[]>('/api/social/comments', {
-  query: queryParams,
-  lazy: true,
-  immediate: !props.federatedContentId,
-});
+const queryParams = computed(() =>
+  isFederated.value ? undefined : { targetType: props.targetType, targetId: props.targetId, limit: commentLimit },
+);
+
+const { data: comments, refresh } = await useFetch<Comment[]>(commentUrl, { query: queryParams, lazy: true });
 
 const allCommentsLoaded = ref(false);
-const hasMore = computed(() => !allCommentsLoaded.value && (comments.value?.length ?? 0) >= commentLimit);
+const hasMore = computed(() => !isFederated.value && !allCommentsLoaded.value && (comments.value?.length ?? 0) >= commentLimit);
 const loadingMore = ref(false);
 
 async function loadMoreComments(): Promise<void> {
@@ -91,9 +91,11 @@ async function submitComment(): Promise<void> {
       });
     }
     newComment.value = '';
-    if (!props.federatedContentId) {
-      await refresh();
+    if (props.federatedContentId) {
+      replySent.value = true;
+      setTimeout(() => { replySent.value = false; }, 5000);
     }
+    await refresh();
   } finally {
     submitting.value = false;
   }
@@ -138,6 +140,11 @@ async function deleteComment(id: string): Promise<void> {
       <NuxtLink to="/auth/login" class="cpub-link">Log in</NuxtLink> to comment.
     </p>
 
+    <!-- Reply sent confirmation -->
+    <div v-if="replySent" class="cpub-reply-sent">
+      <i class="fa-solid fa-check-circle"></i> Reply sent to the original instance.
+    </div>
+
     <!-- Comments list -->
     <div class="cpub-comment-list">
       <div v-for="comment in (comments || [])" :key="comment.id" class="cpub-comment">
@@ -165,7 +172,7 @@ async function deleteComment(id: string): Promise<void> {
           </button>
         </div>
       </div>
-      <p v-if="!comments?.length" class="cpub-comments-empty">No comments yet. Be the first!</p>
+      <p v-if="!comments?.length" class="cpub-comments-empty">{{ isFederated ? 'No replies received yet.' : 'No comments yet. Be the first!' }}</p>
       <div v-if="hasMore" class="cpub-comments-more">
         <button class="cpub-btn cpub-btn-sm" :disabled="loadingMore" @click="loadMoreComments">
           {{ loadingMore ? 'Loading...' : 'Load more comments' }}
@@ -327,4 +334,16 @@ async function deleteComment(id: string): Promise<void> {
   text-align: center;
   padding: var(--space-4) 0;
 }
+
+.cpub-reply-sent {
+  font-size: 12px;
+  color: var(--green, #22c55e);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  background: var(--green-bg, rgba(34, 197, 94, 0.08));
+  border: 1px solid var(--green-border, rgba(34, 197, 94, 0.2));
+}
 </style>

package/components/RemoteFollowDialog.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+const props = defineProps<{
+  /** The AP actor URI to follow (user or Group hub) */
+  actorUri: string;
+  /** Label for what's being followed */
+  label?: string;
+}>();
+
+const open = ref(false);
+const handle = ref('');
+const error = ref('');
+
+function show(): void {
+  open.value = true;
+  handle.value = '';
+  error.value = '';
+}
+
+function close(): void {
+  open.value = false;
+}
+
+function submit(): void {
+  error.value = '';
+  const input = handle.value.trim().replace(/^@/, '');
+  const parts = input.split('@');
+  if (parts.length !== 2 || !parts[0] || !parts[1]) {
+    error.value = 'Enter a valid handle like @user@instance.social';
+    return;
+  }
+  const domain = parts[1];
+  // Standard Mastodon/AP remote interaction endpoint
+  const url = `https://${domain}/authorize_interaction?uri=${encodeURIComponent(props.actorUri)}`;
+  window.open(url, '_blank', 'noopener,noreferrer');
+  close();
+}
+
+defineExpose({ show });
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="open" class="cpub-rfd-overlay" @click.self="close">
+      <div class="cpub-rfd-dialog" role="dialog" aria-modal="true">
+        <div class="cpub-rfd-header">
+          <h3>Follow from your instance</h3>
+          <button class="cpub-rfd-close" aria-label="Close" @click="close">
+            <i class="fa-solid fa-xmark"></i>
+          </button>
+        </div>
+        <p class="cpub-rfd-desc">
+          Enter your fediverse handle to follow {{ label || 'this account' }} from your instance.
+        </p>
+        <form class="cpub-rfd-form" @submit.prevent="submit">
+          <input
+            v-model="handle"
+            type="text"
+            class="cpub-input"
+            placeholder="@you@your-instance.social"
+            aria-label="Your fediverse handle"
+            autofocus
+          />
+          <p v-if="error" class="cpub-rfd-error">{{ error }}</p>
+          <div class="cpub-rfd-actions">
+            <button type="button" class="cpub-btn cpub-btn-sm" @click="close">Cancel</button>
+            <button type="submit" class="cpub-btn cpub-btn-primary cpub-btn-sm" :disabled="!handle.trim()">
+              <i class="fa-solid fa-arrow-up-right-from-square"></i> Follow
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.cpub-rfd-overlay {
+  position: fixed; inset: 0; z-index: 9999;
+  background: rgba(0, 0, 0, 0.5); display: flex;
+  align-items: center; justify-content: center;
+  padding: 16px;
+}
+.cpub-rfd-dialog {
+  background: var(--bg); border: var(--border-width-default) solid var(--border);
+  width: 100%; max-width: 420px; padding: 24px;
+  box-shadow: 4px 4px 0 var(--shadow);
+}
+.cpub-rfd-header {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 12px;
+}
+.cpub-rfd-header h3 { font-size: 14px; font-weight: 700; margin: 0; }
+.cpub-rfd-close {
+  background: none; border: none; cursor: pointer;
+  color: var(--text-dim); font-size: 14px; padding: 4px;
+}
+.cpub-rfd-close:hover { color: var(--text); }
+.cpub-rfd-desc { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin-bottom: 16px; }
+.cpub-rfd-form { display: flex; flex-direction: column; gap: 12px; }
+.cpub-rfd-form .cpub-input {
+  width: 100%; font-size: 13px; padding: 8px 12px;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface); color: var(--text);
+}
+.cpub-rfd-error { font-size: 11px; color: var(--red, #ef4444); margin: 0; }
+.cpub-rfd-actions { display: flex; justify-content: flex-end; gap: 8px; }
+</style>

package/components/views/ArticleView.vue

@@ -15,6 +15,12 @@ onMounted(() => {
   fetchInitialState(props.content?.likeCount ?? 0);
 });
 
+const authorUrl = computed(() =>
+  isFederated.value && props.content.author?.profileUrl
+    ? props.content.author.profileUrl
+    : `/u/${props.content.author?.username}`,
+);
+
 // Extract headings from block content for TOC
 const tocHeadings = computed(() => {
   const blocks = props.content?.content;
@@ -99,12 +105,12 @@ useJsonLd({
 
       <!-- AUTHOR ROW -->
       <div class="cpub-author-row">
-        <NuxtLink v-if="content.author" :to="`/u/${content.author.username}`" style="text-decoration:none;">
+        <NuxtLink v-if="content.author" :to="authorUrl" :external="isFederated" :target="isFederated ? '_blank' : undefined" style="text-decoration:none;">
           <img v-if="content.author?.avatarUrl" :src="content.author.avatarUrl" :alt="content.author?.displayName ?? content.author?.username ?? ''" class="cpub-av cpub-av-lg" style="object-fit:cover;border:2px solid var(--border);" />
           <div v-else class="cpub-av cpub-av-lg">{{ content.author?.displayName?.slice(0, 2).toUpperCase() || 'CP' }}</div>
         </NuxtLink>
         <div class="cpub-author-info">
-          <NuxtLink v-if="content.author" :to="`/u/${content.author.username}`" class="cpub-author-name">
+          <NuxtLink v-if="content.author" :to="authorUrl" :external="isFederated" :target="isFederated ? '_blank' : undefined" class="cpub-author-name">
             {{ content.author.displayName || content.author.username }}
             <i v-if="content.author.verified" class="fa-solid fa-circle-check cpub-verified" title="Verified"></i>
           </NuxtLink>
@@ -116,7 +122,7 @@ useJsonLd({
             <span><i class="fa-regular fa-clock"></i> {{ content.readTime || '5 min read' }}</span>
             <template v-if="content.tags?.length">
               <span class="cpub-sep">·</span>
-              <span class="cpub-tag cpub-tag-teal">{{ content.tags[0]?.name || content.tags[0] }}</span>
+              <NuxtLink :to="`/tags/${content.tags[0]?.slug || (content.tags[0]?.name || String(content.tags[0])).toLowerCase().replace(/\s+/g, '-')}`" class="cpub-tag cpub-tag-teal">{{ content.tags[0]?.name || content.tags[0] }}</NuxtLink>
             </template>
           </div>
         </div>
@@ -157,14 +163,15 @@ useJsonLd({
       <!-- TAGS -->
       <div v-if="content.tags?.length" class="cpub-tags-row">
         <div class="cpub-tags-label">Filed under</div>
-        <span
+        <NuxtLink
           v-for="(tag, i) in content.tags"
           :key="tag.id || tag.name || i"
+          :to="`/tags/${tag.slug || (tag.name || String(tag)).toLowerCase().replace(/\s+/g, '-')}`"
           class="cpub-tag"
           :class="{ 'cpub-tag-accent': i === 0 }"
         >
           {{ tag.name || tag }}
-        </span>
+        </NuxtLink>
       </div>
 
       <!-- AUTHOR CARD -->
@@ -412,7 +419,9 @@ useJsonLd({
   border: 1px solid var(--border2);
   color: var(--text-dim);
   background: var(--surface2);
+  text-decoration: none;
 }
+.cpub-tag:hover { color: var(--accent); border-color: var(--accent-border); }
 
 .cpub-tag-accent {
   border-color: var(--accent-border);

package/components/views/BlogView.vue

@@ -15,6 +15,12 @@ onMounted(() => {
   fetchInitialState(props.content?.likeCount ?? 0);
 });
 
+const authorUrl = computed(() =>
+  isFederated.value && props.content.author?.profileUrl
+    ? props.content.author.profileUrl
+    : `/u/${props.content.author?.username}`,
+);
+
 const config = useRuntimeConfig();
 useJsonLd({
   type: 'article',
@@ -47,12 +53,12 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
 
       <!-- AUTHOR ROW -->
       <div class="cpub-author-row">
-        <NuxtLink v-if="content.author" :to="`/u/${content.author.username}`" style="text-decoration:none;">
+        <NuxtLink v-if="content.author" :to="authorUrl" :external="isFederated" :target="isFederated ? '_blank' : undefined" style="text-decoration:none;">
           <img v-if="content.author?.avatarUrl" :src="content.author.avatarUrl" :alt="content.author?.displayName ?? content.author?.username ?? ''" class="cpub-av cpub-av-lg" style="object-fit:cover;border:2px solid var(--border);" />
           <div v-else class="cpub-av cpub-av-lg">{{ content.author?.displayName?.slice(0, 2).toUpperCase() || 'CP' }}</div>
         </NuxtLink>
         <div class="cpub-author-info">
-          <NuxtLink v-if="content.author" :to="`/u/${content.author.username}`" class="cpub-author-name">
+          <NuxtLink v-if="content.author" :to="authorUrl" :external="isFederated" :target="isFederated ? '_blank' : undefined" class="cpub-author-name">
             {{ content.author.displayName || content.author.username }}
           </NuxtLink>
           <div class="cpub-author-meta">
@@ -140,14 +146,15 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
       <!-- TAGS -->
       <div v-if="content.tags?.length" class="cpub-tags-row">
         <div class="cpub-tags-label">Tags</div>
-        <span
+        <NuxtLink
           v-for="(tag, i) in content.tags"
           :key="tag.id || tag.name || i"
+          :to="`/tags/${tag.slug || (tag.name || String(tag)).toLowerCase().replace(/\s+/g, '-')}`"
           class="cpub-tag"
           :class="{ 'cpub-tag-pink': i === 0 }"
         >
           {{ tag.name || tag }}
-        </span>
+        </NuxtLink>
       </div>
 
       <!-- AUTHOR CARD -->
@@ -276,7 +283,9 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
   border: 1px solid var(--border2);
   color: var(--text-dim);
   background: var(--surface2);
+  text-decoration: none;
 }
+.cpub-tag:hover { color: var(--accent); border-color: var(--accent-border); }
 
 .cpub-tag-pink {
   border-color: var(--pink-border);

package/components/views/ExplainerView.vue

@@ -80,11 +80,21 @@ const completedSections = ref<Set<number>>(new Set());
 const contentId = computed(() => props.content?.id);
 const contentType = computed(() => props.content?.type ?? 'explainer');
 const fedId = computed(() => props.federatedId);
-const { bookmarked, toggleBookmark, share } = useEngagement({ contentId, contentType, federatedContentId: fedId });
+const { liked, bookmarked, likeCount, isFederated, toggleLike, toggleBookmark, share, fetchInitialState } = useEngagement({ contentId, contentType, federatedContentId: fedId });
+
+onMounted(() => {
+  fetchInitialState(props.content?.likeCount ?? 0);
+});
 
 const { user } = useAuth();
 const isOwner = computed(() => user.value?.id === props.content?.author?.id);
 
+const authorUrl = computed(() =>
+  isFederated.value && props.content.author?.profileUrl
+    ? props.content.author.profileUrl
+    : `/u/${props.content.author?.username}`,
+);
+
 const runtimeConfig = useRuntimeConfig();
 useJsonLd({
   type: 'article',
@@ -166,6 +176,9 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
         </button>
       </div>
       <div class="cpub-topbar-divider"></div>
+      <button class="cpub-icon-btn" :class="{ active: liked }" title="Like" @click="toggleLike">
+        <i :class="liked ? 'fa-solid fa-heart' : 'fa-regular fa-heart'"></i>
+      </button>
       <button class="cpub-icon-btn" :class="{ active: bookmarked }" title="Bookmark" @click="toggleBookmark">
         <i :class="bookmarked ? 'fa-solid fa-bookmark' : 'fa-regular fa-bookmark'"></i>
       </button>
@@ -208,12 +221,12 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
 
         <!-- Author info -->
         <div v-if="content.author" class="cpub-sidebar-author">
-          <NuxtLink :to="`/u/${content.author.username}`" class="cpub-sidebar-author-avatar">
+          <NuxtLink :to="authorUrl" :external="isFederated" :target="isFederated ? '_blank' : undefined" class="cpub-sidebar-author-avatar">
             <img v-if="content.author.avatarUrl" :src="content.author.avatarUrl" :alt="content.author.displayName || content.author.username" />
             <span v-else class="cpub-sidebar-author-initials">{{ (content.author.displayName || content.author.username).charAt(0).toUpperCase() }}</span>
           </NuxtLink>
           <div class="cpub-sidebar-author-info">
-            <NuxtLink :to="`/u/${content.author.username}`" class="cpub-sidebar-author-name">
+            <NuxtLink :to="authorUrl" :external="isFederated" :target="isFederated ? '_blank' : undefined" class="cpub-sidebar-author-name">
               {{ content.author.displayName || content.author.username }}
             </NuxtLink>
             <time class="cpub-sidebar-author-date" :datetime="new Date(content.publishedAt || content.createdAt).toISOString()">
@@ -233,7 +246,7 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
 
             <!-- Author byline (mobile only — desktop shows in sidebar) -->
             <div v-if="activeSection === 0 && content.author" class="cpub-mobile-author">
-              <NuxtLink :to="`/u/${content.author.username}`" class="cpub-mobile-author-link">
+              <NuxtLink :to="authorUrl" :external="isFederated" :target="isFederated ? '_blank' : undefined" class="cpub-mobile-author-link">
                 {{ content.author.displayName || content.author.username }}
               </NuxtLink>
               <span class="cpub-mobile-author-sep">&middot;</span>

package/components/views/ProjectView.vue

@@ -66,6 +66,12 @@ const difficultyLevel = computed(() => {
   return 3;
 });
 
+const authorUrl = computed(() =>
+  isFederated.value && props.content.author?.profileUrl
+    ? props.content.author.profileUrl
+    : `/u/${props.content.author?.username}`,
+);
+
 const formattedDate = computed(() => {
   const date = props.content?.publishedAt || props.content?.createdAt;
   if (!date) return '';
@@ -258,7 +264,10 @@ const forking = ref(false);
 async function handleFork(): Promise<void> {
   forking.value = true;
   try {
-    const result = await $fetch<{ slug: string; type: string }>(`/api/content/${props.content.id}/fork`, { method: 'POST' });
+    const url = isFederated.value
+      ? `/api/federation/content/${props.federatedId}/fork`
+      : `/api/content/${props.content.id}/fork`;
+    const result = await $fetch<{ slug: string; type: string }>(url, { method: 'POST' });
     await navigateTo(`/${result.type}/${result.slug}/edit`);
   } catch {
     // fork failed silently
@@ -274,7 +283,10 @@ const buildToggling = ref(false);
 async function handleBuild(): Promise<void> {
   buildToggling.value = true;
   try {
-    const result = await $fetch<{ marked: boolean; count: number }>(`/api/content/${props.content.id}/build`, { method: 'POST' });
+    const url = isFederated.value
+      ? `/api/federation/content/${props.federatedId}/build`
+      : `/api/content/${props.content.id}/build`;
+    const result = await $fetch<{ marked: boolean; count: number }>(url, { method: 'POST' });
     buildMarked.value = result.marked;
     localBuildCount.value = result.count;
   } catch {
@@ -326,7 +338,7 @@ async function handleBuild(): Promise<void> {
 
         <!-- Author Row -->
         <div class="cpub-author-row">
-          <NuxtLink :to="`/u/${content.author?.username}`" class="cpub-av-link">
+          <NuxtLink :to="authorUrl" :external="isFederated" :target="isFederated ? '_blank' : undefined" class="cpub-av-link">
             <img
               v-if="content.author?.avatarUrl"
               :src="content.author.avatarUrl"
@@ -336,7 +348,7 @@ async function handleBuild(): Promise<void> {
             <div v-else class="cpub-av cpub-av-lg">{{ content.author?.displayName?.slice(0, 2).toUpperCase() || 'CP' }}</div>
           </NuxtLink>
           <div>
-            <NuxtLink :to="`/u/${content.author?.username}`" class="cpub-author-name cpub-author-link">
+            <NuxtLink :to="authorUrl" :external="isFederated" :target="isFederated ? '_blank' : undefined" class="cpub-author-name cpub-author-link">
               {{ content.author?.displayName || content.author?.username || 'Author' }}
             </NuxtLink>
             <div class="cpub-author-meta-row">
@@ -351,7 +363,7 @@ async function handleBuild(): Promise<void> {
           <a v-if="content.githubUrl" :href="content.githubUrl" target="_blank" rel="noopener" class="cpub-author-detail cpub-author-detail-link"><i class="fa-brands fa-github"></i> Source</a>
           <template v-if="content.tags?.length">
             <span class="cpub-meta-sep">&bull;</span>
-            <span v-for="tag in content.tags.slice(0, 5)" :key="tag.id || tag.name || String(tag)" class="cpub-author-tag">{{ tag.name || tag }}</span>
+            <NuxtLink v-for="tag in content.tags.slice(0, 5)" :key="tag.id || tag.name || String(tag)" :to="`/tags/${tag.slug || (tag.name || String(tag)).toLowerCase().replace(/\s+/g, '-')}`" class="cpub-author-tag">{{ tag.name || tag }}</NuxtLink>
           </template>
         </div>
 
@@ -773,8 +785,9 @@ async function handleBuild(): Promise<void> {
 .cpub-author-tag {
   font-size: 9px; font-family: var(--font-mono); text-transform: uppercase;
   letter-spacing: 0.04em; color: var(--text-faint); padding: 1px 6px;
-  border: 1px solid var(--border); background: var(--surface);
+  border: 1px solid var(--border); background: var(--surface); text-decoration: none;
 }
+.cpub-author-tag:hover { color: var(--accent); border-color: var(--accent); }
 
 .cpub-fork-count {
   font-size: 11px;

package/composables/useEngagement.ts

@@ -55,6 +55,8 @@ export interface ContentViewData {
     username: string;
     displayName: string | null;
     avatarUrl: string | null;
+    /** Remote actor URI — set for federated content, used as external profile link */
+    profileUrl?: string | null;
     bio?: string | null;
     headline?: string | null;
     verified?: boolean;
@@ -130,8 +132,6 @@ export function useEngagement(opts: EngagementOptions) {
 
   async function toggleBookmark(): Promise<void> {
     if (!contentId.value) return;
-    // Bookmarks are local-only — skip for federated content (no local record to target)
-    if (isFederated.value) return;
     const prev = bookmarked.value;
     bookmarked.value = !bookmarked.value;
 
@@ -164,19 +164,25 @@ export function useEngagement(opts: EngagementOptions) {
   async function fetchInitialState(likes: number): Promise<void> {
     likeCount.value = likes;
     if (!contentId.value) return;
-    // Skip state fetch for federated content — no local like/bookmark records
-    if (isFederated.value) return;
     try {
-      const [likeRes, bmRes] = await Promise.all([
-        $fetch<{ liked: boolean }>('/api/social/like', {
-          params: { targetType: contentType.value, targetId: contentId.value },
-        }).catch(() => ({ liked: false })),
-        $fetch<{ bookmarked: boolean }>('/api/social/bookmark', {
+      if (isFederated.value) {
+        // Federated: likes are tracked via AP (no local like record), but bookmarks are local
+        const bmRes = await $fetch<{ bookmarked: boolean }>('/api/social/bookmark', {
           params: { targetType: contentType.value, targetId: contentId.value },
-        }).catch(() => ({ bookmarked: false })),
-      ]);
-      liked.value = likeRes.liked;
-      bookmarked.value = bmRes.bookmarked;
+        }).catch(() => ({ bookmarked: false }));
+        bookmarked.value = bmRes.bookmarked;
+      } else {
+        const [likeRes, bmRes] = await Promise.all([
+          $fetch<{ liked: boolean }>('/api/social/like', {
+            params: { targetType: contentType.value, targetId: contentId.value },
+          }).catch(() => ({ liked: false })),
+          $fetch<{ bookmarked: boolean }>('/api/social/bookmark', {
+            params: { targetType: contentType.value, targetId: contentId.value },
+          }).catch(() => ({ bookmarked: false })),
+        ]);
+        liked.value = likeRes.liked;
+        bookmarked.value = bmRes.bookmarked;
+      }
     } catch {
       // Non-critical — default to false
     }

package/composables/useMirrorContent.ts

@@ -77,6 +77,7 @@ export function useMirrorContent(fedContent: Ref<Record<string, unknown> | null>
         username: (actor.value?.preferredUsername as string) || 'unknown',
         displayName: (actor.value?.displayName as string) || (actor.value?.preferredUsername as string) || 'Unknown',
         avatarUrl: (actor.value?.avatarUrl as string) || null,
+        profileUrl: (actor.value?.actorUri as string) || null,
       },
       buildCount: 0,
       bookmarkCount: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -46,13 +46,13 @@
     "zod": "^4.3.6",
     "@commonpub/auth": "0.5.0",
     "@commonpub/config": "0.7.0",
-    "@commonpub/docs": "0.5.2",
     "@commonpub/editor": "0.5.0",
+    "@commonpub/docs": "0.5.2",
     "@commonpub/learning": "0.5.0",
     "@commonpub/protocol": "0.9.4",
-    "@commonpub/server": "2.7.0",
-    "@commonpub/ui": "0.7.1",
-    "@commonpub/schema": "0.8.8"
+    "@commonpub/server": "2.8.0",
+    "@commonpub/schema": "0.8.9",
+    "@commonpub/ui": "0.7.1"
   },
   "scripts": {}
 }

package/pages/federated-hubs/[id]/index.vue

@@ -10,6 +10,18 @@ const { data: posts, refresh: refreshPosts } = useLazyFetch<{ items: FederatedHu
   default: () => ({ items: [], total: 0 }),
 });
 
+interface FederatedMember {
+  actorUri: string;
+  preferredUsername: string | null;
+  displayName: string | null;
+  avatarUrl: string | null;
+  instanceDomain: string;
+  postCount: number;
+}
+const { data: members } = useLazyFetch<FederatedMember[]>(`/api/federated-hubs/${id}/members`, {
+  default: () => [],
+});
+
 useSeoMeta({
   title: () => hub.value ? `${hub.value.name} — ${useSiteName()}` : 'Federated Hub',
   description: () => hub.value?.description || '',
@@ -187,29 +199,10 @@ async function handleDiscPost(): Promise<void> {
   }
 }
 
-// --- Follow hub ---
-const followStatus = computed(() => hub.value?.followStatus ?? 'pending');
-const following = ref(false);
+// --- Instance mirror status (not user-level follow) ---
+const mirrorStatus = computed(() => hub.value?.followStatus ?? 'pending');
 
-async function handleFollowHub(): Promise<void> {
-  if (!isAuthenticated.value) {
-    await navigateTo(`/auth/login?redirect=/federated-hubs/${id}`);
-    return;
-  }
-  following.value = true;
-  try {
-    const result = await $fetch<{ status: string }>('/api/federation/hub-follow' as string, {
-      method: 'POST',
-      body: { federatedHubId: id },
-    });
-    if (hub.value) (hub.value as unknown as Record<string, unknown>).followStatus = result.status;
-    toast.success(result.status === 'accepted' ? 'Following!' : 'Follow request sent');
-  } catch {
-    toast.error('Failed to follow hub');
-  } finally {
-    following.value = false;
-  }
-}
+const remoteFollowRef = ref<InstanceType<typeof RemoteFollowDialog> | null>(null);
 
 // --- Like state tracking ---
 const likedPostIds = ref<Set<string>>(new Set());
@@ -273,20 +266,14 @@ async function handlePostVote(postId: string): Promise<void> {
           </div>
         </template>
         <template #actions>
-          <button
-            v-if="followStatus !== 'accepted'"
-            class="cpub-btn cpub-btn-primary"
-            :disabled="following || followStatus === 'pending'"
-            @click="handleFollowHub"
-          >
-            <i class="fa-solid fa-rss"></i>
-            {{ followStatus === 'pending' ? 'Follow Pending...' : 'Follow Hub' }}
-          </button>
-          <span v-else class="cpub-member-badge">
-            <i class="fa-solid fa-check"></i> Following
+          <span v-if="mirrorStatus === 'accepted'" class="cpub-member-badge cpub-member-badge-mirrored">
+            <i class="fa-solid fa-globe"></i> Mirrored
           </span>
+          <button v-if="hub?.actorUri" class="cpub-btn cpub-btn-primary cpub-btn-sm" @click="remoteFollowRef?.show()">
+            <i class="fa-solid fa-user-plus"></i> Join from your instance
+          </button>
           <a v-if="hub?.url" :href="hub.url" target="_blank" rel="noopener noreferrer" class="cpub-btn cpub-btn-sm">
-            <i class="fa-solid fa-arrow-up-right-from-square"></i> Visit
+            <i class="fa-solid fa-arrow-up-right-from-square"></i> Visit original
           </a>
         </template>
         <template #badges>
@@ -389,18 +376,35 @@ async function handlePostVote(postId: string): Promise<void> {
 
     <!-- Members tab -->
     <div v-else-if="activeTab === 'members'" class="cpub-hub-members-tab">
-      <div class="cpub-fed-members-info">
-        <div class="cpub-fed-members-stat">
-          <i class="fa-solid fa-users"></i>
-          <strong>{{ hub?.memberCount ?? 0 }}</strong> members
-        </div>
-        <p class="cpub-fed-members-note">
-          Members are managed on <strong>{{ hub?.originDomain }}</strong>. Visit the original hub to see the full member list and join.
-        </p>
-        <a v-if="hub?.url" :href="hub.url" target="_blank" rel="noopener noreferrer" class="cpub-btn cpub-btn-sm" style="margin-top: 12px; display: inline-flex">
-          <i class="fa-solid fa-arrow-up-right-from-square"></i> View Members on {{ hub?.originDomain }}
+      <div class="cpub-fed-members-stat">
+        <i class="fa-solid fa-users"></i>
+        <strong>{{ hub?.memberCount ?? 0 }}</strong> members on {{ hub?.originDomain }}
+        <span v-if="members?.length" class="cpub-fed-members-known">&middot; {{ members.length }} known</span>
+      </div>
+
+      <div v-if="members?.length" class="cpub-fed-members-list">
+        <a
+          v-for="m in members"
+          :key="m.actorUri"
+          :href="m.actorUri"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="cpub-fed-member"
+        >
+          <img v-if="m.avatarUrl" :src="m.avatarUrl" :alt="m.displayName || m.preferredUsername || ''" class="cpub-fed-member-avatar" />
+          <div v-else class="cpub-fed-member-avatar cpub-fed-member-avatar-fallback">{{ (m.displayName || m.preferredUsername || '?').charAt(0).toUpperCase() }}</div>
+          <div class="cpub-fed-member-info">
+            <div class="cpub-fed-member-name">{{ m.displayName || m.preferredUsername || 'Unknown' }}</div>
+            <div class="cpub-fed-member-handle">@{{ m.preferredUsername || 'unknown' }}@{{ m.instanceDomain }}</div>
+          </div>
+          <div class="cpub-fed-member-posts">{{ m.postCount }} {{ m.postCount === 1 ? 'post' : 'posts' }}</div>
         </a>
       </div>
+      <p v-else class="cpub-fed-members-empty">No known members yet. Members appear here as they post to the hub.</p>
+
+      <a v-if="hub?.url" :href="hub.url" target="_blank" rel="noopener noreferrer" class="cpub-btn cpub-btn-sm cpub-fed-members-origin-link">
+        <i class="fa-solid fa-arrow-up-right-from-square"></i> View all members on {{ hub?.originDomain }}
+      </a>
     </div>
 
     <!-- Overview tab (product/company hubs) -->
@@ -450,6 +454,8 @@ async function handlePostVote(postId: string): Promise<void> {
       </HubSidebar>
     </template>
   </HubLayout>
+
+  <RemoteFollowDialog v-if="hub?.actorUri" ref="remoteFollowRef" :actor-uri="hub.actorUri" :label="hub?.name" />
 </template>
 
 <style scoped>
@@ -539,18 +545,39 @@ async function handlePostVote(postId: string): Promise<void> {
 
 /* Members tab (federated) */
 .cpub-hub-members-tab { padding: 0; }
-.cpub-fed-members-info {
-  background: var(--surface); border: var(--border-width-default) solid var(--border);
-  padding: 32px; text-align: center;
-}
 .cpub-fed-members-stat {
-  font-size: 20px; font-weight: 700; color: var(--text);
-  display: flex; align-items: center; justify-content: center; gap: 8px;
-  margin-bottom: 12px;
+  font-size: 14px; font-weight: 600; color: var(--text-dim);
+  display: flex; align-items: center; gap: 8px;
+  margin-bottom: 16px; padding: 0 4px;
 }
 .cpub-fed-members-stat i { color: var(--accent); }
-.cpub-fed-members-note {
-  font-size: 13px; color: var(--text-dim); line-height: 1.5; max-width: 400px; margin: 0 auto;
+.cpub-fed-members-known { color: var(--text-faint); font-weight: 400; }
+.cpub-fed-members-list { display: flex; flex-direction: column; gap: 2px; }
+.cpub-fed-member {
+  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
+  text-decoration: none; color: var(--text); border: var(--border-width-default) solid transparent;
+  transition: border-color 0.15s;
+}
+.cpub-fed-member:hover { border-color: var(--border); background: var(--surface); }
+.cpub-fed-member-avatar {
+  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
+  border: var(--border-width-default) solid var(--border); flex-shrink: 0;
+}
+.cpub-fed-member-avatar-fallback {
+  display: flex; align-items: center; justify-content: center;
+  background: var(--surface2); font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-dim);
+}
+.cpub-fed-member-info { flex: 1; min-width: 0; }
+.cpub-fed-member-name { font-size: 13px; font-weight: 600; }
+.cpub-fed-member-handle { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
+.cpub-fed-member-posts { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); white-space: nowrap; }
+.cpub-fed-members-empty { font-size: 13px; color: var(--text-faint); text-align: center; padding: 32px 16px; }
+.cpub-fed-members-origin-link { margin-top: 16px; display: inline-flex; }
+.cpub-member-badge-mirrored {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 0.6875rem; font-weight: 600;
+  color: var(--accent); background: var(--accent-bg);
+  padding: 4px 12px; border: 1px solid var(--accent-border);
 }
 
 /* Sidebar */
@@ -586,6 +613,6 @@ async function handlePostVote(postId: string): Promise<void> {
   .cpub-fed-indicator { padding: 6px 16px; font-size: 11px; flex-wrap: wrap; }
   .cpub-compose-bar { padding: 10px 12px; }
   .cpub-shared-grid { grid-template-columns: 1fr; }
-  .cpub-fed-members-info { padding: 24px 16px; }
+  .cpub-fed-member { padding: 10px 8px; }
 }
 </style>

package/pages/federation/index.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import type { FederatedContentItem } from '@commonpub/server';
 
-definePageMeta({
-  middleware: 'auth',
-});
+definePageMeta({});
 
 useHead({
   title: 'Federated Timeline',

package/pages/federation/search.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-definePageMeta({
-  middleware: 'auth',
-});
+definePageMeta({});
 
 useHead({
   title: 'Find Remote Users — Federation',

package/pages/federation/users/[handle].vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { RemoteActorProfile, FederatedContentItem } from '@commonpub/server';
 
-definePageMeta({ middleware: 'auth' });
+definePageMeta({});
 
 const route = useRoute();
 const handle = computed(() => decodeURIComponent(route.params.handle as string));

package/pages/mirror/[id].vue

@@ -8,12 +8,33 @@ const { data: fedContent, error, pending } = await useFetch<Record<string, unkno
 
 const {
   contentType,
+  actor,
   transformedContent,
   originDomain,
   originUrl,
   authorHandle,
 } = useMirrorContent(fedContent);
 
+const { user } = useAuth();
+const following = ref(false);
+const followState = ref<'idle' | 'sent' | 'error'>('idle');
+const remoteFollowRef = ref<InstanceType<typeof RemoteFollowDialog> | null>(null);
+
+async function followAuthor(): Promise<void> {
+  const uri = actor.value?.actorUri as string | undefined;
+  if (!uri) return;
+  following.value = true;
+  followState.value = 'idle';
+  try {
+    await $fetch('/api/federation/follow', { method: 'POST', body: { actorUri: uri } });
+    followState.value = 'sent';
+  } catch {
+    followState.value = 'error';
+  } finally {
+    following.value = false;
+  }
+}
+
 // SEO
 if (originUrl.value) {
   useHead({
@@ -45,6 +66,20 @@ useSeoMeta({
           Federated from <strong>{{ originDomain }}</strong>
           <span v-if="authorHandle" class="cpub-fed-banner-handle">{{ authorHandle }}</span>
         </span>
+        <button
+          v-if="user && actor?.actorUri && followState !== 'sent'"
+          class="cpub-fed-banner-follow"
+          :class="{ 'cpub-fed-banner-follow-error': followState === 'error' }"
+          :disabled="following"
+          @click="followAuthor"
+        >
+          <i :class="followState === 'error' ? 'fa-solid fa-rotate-right' : 'fa-solid fa-user-plus'"></i>
+          {{ following ? 'Following...' : followState === 'error' ? 'Retry' : 'Follow' }}
+        </button>
+        <span v-if="followState === 'sent'" class="cpub-fed-banner-followed"><i class="fa-solid fa-check"></i> Follow sent</span>
+        <button v-if="actor?.actorUri && !user" class="cpub-fed-banner-follow" @click="remoteFollowRef?.show()">
+          <i class="fa-solid fa-user-plus"></i> Follow from your instance
+        </button>
         <a v-if="originUrl" :href="originUrl" target="_blank" rel="noopener noreferrer" class="cpub-fed-banner-link">
           View Original <i class="fa-solid fa-arrow-up-right-from-square"></i>
         </a>
@@ -69,11 +104,13 @@ useSeoMeta({
         </div>
         <div v-if="typeof transformedContent.content === 'string'" class="cpub-mirror-body prose" v-html="transformedContent.content" />
         <div v-if="transformedContent.tags?.length" class="cpub-mirror-tags">
-          <span v-for="tag in transformedContent.tags" :key="tag.name" class="cpub-mirror-tag">{{ tag.name }}</span>
+          <NuxtLink v-for="tag in transformedContent.tags" :key="tag.name" :to="`/tags/${tag.slug || tag.name.toLowerCase().replace(/\s+/g, '-')}`" class="cpub-mirror-tag">{{ tag.name }}</NuxtLink>
         </div>
       </div>
     </article>
   </template>
+
+  <RemoteFollowDialog v-if="actor?.actorUri" ref="remoteFollowRef" :actor-uri="(actor.actorUri as string)" :label="transformedContent?.author?.displayName || authorHandle" />
 </template>
 
 <style scoped>
@@ -92,6 +129,14 @@ useSeoMeta({
   text-decoration: none; white-space: nowrap;
   display: flex; align-items: center; gap: 4px; font-size: 11px;
 }
+.cpub-fed-banner-follow {
+  margin-left: auto; background: var(--accent); color: #fff; border: none;
+  font-size: 11px; font-weight: 600; padding: 3px 10px; cursor: pointer;
+  display: flex; align-items: center; gap: 4px; white-space: nowrap;
+}
+.cpub-fed-banner-follow:hover { opacity: 0.9; }
+.cpub-fed-banner-follow:disabled { opacity: 0.6; cursor: default; }
+.cpub-fed-banner-followed { margin-left: auto; font-size: 11px; color: var(--green, #22c55e); font-weight: 600; display: flex; align-items: center; gap: 4px; }
 .cpub-fed-banner-link:hover { text-decoration: underline; }
 
 /* Fallback for non-CommonPub content */
@@ -106,7 +151,8 @@ useSeoMeta({
 .cpub-mirror-body :deep(a) { color: var(--accent); }
 .cpub-mirror-body :deep(pre) { background: var(--surface2); padding: 12px; overflow-x: auto; }
 .cpub-mirror-tags { display: flex; flex-wrap: wrap; gap: 6px; }
-.cpub-mirror-tag { font-size: 0.75rem; padding: 3px 8px; background: var(--surface2); color: var(--text-dim); }
+.cpub-mirror-tag { font-size: 0.75rem; padding: 3px 8px; background: var(--surface2); color: var(--text-dim); text-decoration: none; }
+.cpub-mirror-tag:hover { color: var(--accent); }
 
 .cpub-not-found { text-align: center; padding: 60px 20px; color: var(--text-dim); }
 .cpub-not-found h1 { font-size: 1.5rem; color: var(--text); margin-bottom: 8px; }

package/server/api/admin/federation/refederate.post.ts

@@ -11,7 +11,14 @@ import { extractDomain } from '../../../utils/inbox';
  * Body: { contentId?: string, hubsOnly?: boolean } — if omitted, re-federates ALL
  */
 export default defineEventHandler(async (event) => {
-  requireAdmin(event);
+  // Allow CLI trigger via AUTH_SECRET header (for server-side automation)
+  const cliSecret = getRequestHeader(event, 'x-admin-secret');
+  const runtimeConfig = useRuntimeConfig();
+  if (cliSecret && cliSecret === runtimeConfig.authSecret) {
+    // Authorized via shared secret
+  } else {
+    requireAdmin(event);
+  }
 
   const config = useConfig();
   if (!config.features.federation) {
@@ -23,7 +30,6 @@ export default defineEventHandler(async (event) => {
   const hubsOnly = body?.hubsOnly === true;
 
   const db = useDB();
-  const runtimeConfig = useRuntimeConfig();
   const domain = extractDomain((runtimeConfig.public?.siteUrl as string) || `https://${config.instance.domain}`);
 
   if (contentId) {

package/server/api/federated-hubs/[id]/members.get.ts

@@ -0,0 +1,11 @@
+import { listFederatedHubMembers } from '@commonpub/server';
+
+export default defineEventHandler(async (event) => {
+  requireFeature('federation');
+  requireFeature('federateHubs');
+
+  const db = useDB();
+  const { id } = parseParams(event, { id: 'uuid' });
+
+  return listFederatedHubMembers(db, id);
+});

package/server/api/federation/content/[id]/build.post.ts

@@ -0,0 +1,10 @@
+import { toggleFederatedBuildMark } from '@commonpub/server';
+
+export default defineEventHandler(async (event): Promise<{ marked: boolean; count: number }> => {
+  requireFeature('federation');
+  const user = requireAuth(event);
+  const db = useDB();
+  const { id } = parseParams(event, { id: 'uuid' });
+
+  return toggleFederatedBuildMark(db, id, user.id);
+});

package/server/api/federation/content/[id]/fork.post.ts

@@ -0,0 +1,11 @@
+import { forkFederatedContent } from '@commonpub/server';
+import type { ContentDetail } from '@commonpub/server';
+
+export default defineEventHandler(async (event): Promise<ContentDetail> => {
+  requireFeature('federation');
+  const user = requireAuth(event);
+  const db = useDB();
+  const { id } = parseParams(event, { id: 'uuid' });
+
+  return forkFederatedContent(db, id, user.id);
+});

package/server/api/federation/content/[id]/replies.get.ts

@@ -0,0 +1,30 @@
+import { getFederatedContent, listRemoteReplies } from '@commonpub/server';
+
+export default defineEventHandler(async (event) => {
+  requireFeature('federation');
+  const db = useDB();
+  const { id } = parseParams(event, { id: 'uuid' });
+
+  // Get the parent content to find its objectUri
+  const content = await getFederatedContent(db, id);
+  if (!content) {
+    throw createError({ statusCode: 404, statusMessage: 'Federated content not found' });
+  }
+
+  const replies = await listRemoteReplies(db, content.objectUri);
+
+  // Transform to comment-like shape for the UI
+  return replies.map((r) => ({
+    id: r.id,
+    content: r.content ?? r.summary ?? '',
+    createdAt: r.publishedAt ?? r.receivedAt,
+    author: r.actor ? {
+      id: '',
+      username: r.actor.preferredUsername ?? 'unknown',
+      displayName: r.actor.displayName ?? r.actor.preferredUsername ?? 'Unknown',
+      avatarUrl: r.actor.avatarUrl ?? null,
+    } : null,
+    federated: true,
+    originDomain: r.originDomain,
+  }));
+});

package/server/api/federation/remote-actor.get.ts

@@ -8,12 +8,12 @@ const querySchema = z.object({
 
 export default defineEventHandler(async (event): Promise<RemoteActorProfile> => {
   requireFeature('federation');
-  const user = requireAuth(event);
+  const user = getOptionalUser(event);
   const db = useDB();
   const config = useConfig();
   const { uri } = parseQueryParams(event, querySchema);
 
-  const profile = await getRemoteActorProfile(db, uri, config.instance.domain, user.id);
+  const profile = await getRemoteActorProfile(db, uri, config.instance.domain, user?.id);
   if (!profile) {
     throw createError({ statusCode: 404, statusMessage: 'Remote actor not found' });
   }

package/server/api/federation/search.post.ts

@@ -8,10 +8,10 @@ const searchSchema = z.object({
 
 export default defineEventHandler(async (event): Promise<RemoteActorProfile | null> => {
   requireFeature('federation');
-  const user = requireAuth(event);
+  const user = getOptionalUser(event);
   const db = useDB();
   const config = useConfig();
   const { query } = await parseBody(event, searchSchema);
 
-  return searchRemoteActor(db, query, config.instance.domain, user.id);
+  return searchRemoteActor(db, query, config.instance.domain, user?.id);
 });

package/server/api/federation/timeline.get.ts

@@ -13,7 +13,6 @@ const querySchema = z.object({
 export default defineEventHandler(
   async (event): Promise<{ items: FederatedContentItem[]; total: number }> => {
     requireFeature('federation');
-    requireAuth(event);
     const db = useDB();
     const opts = parseQueryParams(event, querySchema);