@commonpub/layer 0.3.11 → 0.3.13

package/components/ContentAttachments.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+defineProps<{
+  attachments: Array<{ type: string; url: string; name?: string }>;
+}>();
+
+function iconForType(type: string): string {
+  if (type === 'Image') return 'fa-solid fa-image';
+  if (type === 'Video') return 'fa-solid fa-film';
+  if (type === 'Audio') return 'fa-solid fa-music';
+  return 'fa-solid fa-file';
+}
+
+function fileName(att: { url: string; name?: string }): string {
+  if (att.name) return att.name;
+  try {
+    return new URL(att.url).pathname.split('/').pop() ?? 'attachment';
+  } catch {
+    return 'attachment';
+  }
+}
+</script>
+
+<template>
+  <div v-if="attachments.length > 0" class="cpub-attachments">
+    <div class="cpub-attachments-label">Attachments</div>
+    <div class="cpub-attachments-list">
+      <a
+        v-for="(att, i) in attachments"
+        :key="i"
+        :href="att.url"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="cpub-attachment-item"
+      >
+        <img v-if="att.type === 'Image'" :src="att.url" :alt="att.name ?? ''" class="cpub-attachment-thumb" loading="lazy" />
+        <div v-else class="cpub-attachment-icon"><i :class="iconForType(att.type)"></i></div>
+        <span class="cpub-attachment-name">{{ fileName(att) }}</span>
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-attachments {
+  margin: 28px 0;
+  padding-top: 16px;
+  border-top: 1px solid var(--border);
+}
+.cpub-attachments-label {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--text-faint);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+}
+.cpub-attachments-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.cpub-attachment-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  text-decoration: none;
+  color: var(--text-dim);
+  font-size: 12px;
+  transition: background var(--transition-fast);
+}
+.cpub-attachment-item:hover {
+  background: var(--surface2);
+  color: var(--accent);
+}
+.cpub-attachment-thumb {
+  width: 40px;
+  height: 40px;
+  object-fit: cover;
+  border: 1px solid var(--border2);
+}
+.cpub-attachment-icon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface2);
+  border: 1px solid var(--border2);
+  color: var(--text-faint);
+  font-size: 14px;
+}
+.cpub-attachment-name {
+  font-family: var(--font-mono);
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/components/DiscussionItem.vue

@@ -2,6 +2,7 @@
 const props = defineProps<{
   title: string;
   author: string;
+  authorAvatarUrl?: string | null;
   replyCount: number;
   voteCount: number;
   lastReplyAt?: Date;
@@ -50,6 +51,8 @@ const lastReplyFormatted = computed((): string | null => {
         </span>
       </div>
       <div class="cpub-discussion-meta">
+        <img v-if="authorAvatarUrl" :src="authorAvatarUrl" :alt="author" class="cpub-discussion-avatar" />
+        <div v-else class="cpub-discussion-avatar cpub-discussion-avatar-fallback">{{ author.charAt(0).toUpperCase() }}</div>
         <span class="cpub-discussion-author">{{ author }}</span>
         <span class="cpub-discussion-sep" aria-hidden="true">&middot;</span>
         <span class="cpub-discussion-replies">
@@ -170,6 +173,25 @@ const lastReplyFormatted = computed((): string | null => {
   flex-wrap: wrap;
 }
 
+.cpub-discussion-avatar {
+  width: 16px;
+  height: 16px;
+  object-fit: cover;
+  border: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.cpub-discussion-avatar-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface2);
+  font-family: var(--font-mono);
+  font-size: 8px;
+  font-weight: 600;
+  color: var(--text-dim);
+}
+
 .cpub-discussion-author {
   font-weight: var(--font-weight-medium);
   color: var(--text-dim);

package/components/MessageThread.vue

@@ -3,6 +3,8 @@ defineProps<{
   messages: Array<{
     id: string;
     senderId: string;
+    senderName?: string | null;
+    senderAvatarUrl?: string | null;
     body: string;
     createdAt: string;
   }>;
@@ -31,6 +33,11 @@ function handleSend(): void {
         class="cpub-msg"
         :class="{ own: msg.senderId === currentUserId }"
       >
+        <div v-if="msg.senderId !== currentUserId" class="cpub-msg-sender">
+          <img v-if="msg.senderAvatarUrl" :src="msg.senderAvatarUrl" :alt="msg.senderName ?? ''" class="cpub-msg-avatar" />
+          <div v-else class="cpub-msg-avatar cpub-msg-avatar-fallback">{{ (msg.senderName ?? '?').charAt(0).toUpperCase() }}</div>
+          <span v-if="msg.senderName" class="cpub-msg-name">{{ msg.senderName }}</span>
+        </div>
         <div class="cpub-msg-bubble">{{ msg.body }}</div>
         <time class="cpub-msg-time">
           {{ new Date(msg.createdAt).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }) }}
@@ -78,6 +85,38 @@ function handleSend(): void {
   align-self: flex-end;
 }
 
+.cpub-msg-sender {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 3px;
+}
+
+.cpub-msg-avatar {
+  width: 20px;
+  height: 20px;
+  object-fit: cover;
+  border: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.cpub-msg-avatar-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface2);
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 600;
+  color: var(--text-dim);
+}
+
+.cpub-msg-name {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-dim);
+}
+
 .cpub-msg-bubble {
   padding: 8px 12px;
   font-size: 13px;

package/components/NotificationItem.vue

@@ -5,6 +5,7 @@ defineProps<{
     type: string;
     message: string;
     actorName?: string | null;
+    actorAvatarUrl?: string | null;
     link?: string | null;
     targetUrl?: string;
     read: boolean;
@@ -23,8 +24,14 @@ const iconMap: Record<string, string> = {
 
 <template>
   <div class="cpub-notif" :class="{ unread: !notification.read }">
-    <div class="cpub-notif-icon">
-      <i :class="iconMap[notification.type] || 'fa-solid fa-bell'"></i>
+    <div class="cpub-notif-avatar-wrap">
+      <img v-if="notification.actorAvatarUrl" :src="notification.actorAvatarUrl" :alt="notification.actorName ?? ''" class="cpub-notif-avatar" />
+      <div v-else class="cpub-notif-avatar cpub-notif-avatar-fallback">
+        {{ (notification.actorName ?? '?').charAt(0).toUpperCase() }}
+      </div>
+      <div class="cpub-notif-icon-badge">
+        <i :class="iconMap[notification.type] || 'fa-solid fa-bell'"></i>
+      </div>
     </div>
     <div class="cpub-notif-body">
       <p class="cpub-notif-text">
@@ -56,17 +63,45 @@ const iconMap: Record<string, string> = {
   border-color: var(--accent-border);
 }
 
-.cpub-notif-icon {
-  width: 28px;
-  height: 28px;
+.cpub-notif-avatar-wrap {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+}
+
+.cpub-notif-avatar {
+  width: 32px;
+  height: 32px;
+  object-fit: cover;
+  border: var(--border-width-default) solid var(--border);
+}
+
+.cpub-notif-avatar-fallback {
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--surface2);
-  border: var(--border-width-default) solid var(--border);
-  font-size: 11px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-dim);
+}
+
+.cpub-notif-icon-badge {
+  position: absolute;
+  bottom: -3px;
+  right: -3px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  font-size: 8px;
   color: var(--text-dim);
-  flex-shrink: 0;
 }
 
 .cpub-notif-body {

package/components/views/ArticleView.vue

@@ -225,6 +225,9 @@ useJsonLd({
         </NuxtLink>
       </div>
 
+      <!-- ATTACHMENTS -->
+      <ContentAttachments v-if="content.attachments?.length" :attachments="content.attachments" />
+
       <!-- COMMENTS SECTION -->
       <CommentSection :target-type="content.type" :target-id="content.id" :federated-content-id="federatedId" />
 

package/components/views/BlogView.vue

@@ -43,6 +43,12 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
 
 <template>
   <div class="cpub-blog-view">
+
+    <!-- COVER IMAGE -->
+    <div v-if="content.coverImageUrl" class="cpub-cover">
+      <img :src="content.coverImageUrl" :alt="content.title" class="cpub-cover-img" />
+    </div>
+
     <div class="cpub-blog-wrap">
 
       <!-- TYPE BADGE -->
@@ -159,7 +165,8 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
 
       <!-- AUTHOR CARD -->
       <div v-if="content.author" class="cpub-author-card">
-        <div class="cpub-av cpub-av-xl">{{ content.author.displayName?.slice(0, 2).toUpperCase() || 'CP' }}</div>
+        <img v-if="content.author.avatarUrl" :src="content.author.avatarUrl" :alt="content.author.displayName ?? content.author.username ?? ''" class="cpub-av cpub-av-xl" style="object-fit:cover;border:2px solid var(--border);" />
+        <div v-else class="cpub-av cpub-av-xl">{{ content.author.displayName?.slice(0, 2).toUpperCase() || 'CP' }}</div>
         <div class="cpub-author-card-info">
           <div class="cpub-author-card-label">Posted by</div>
           <div class="cpub-author-card-name">{{ content.author.displayName || content.author.username }}</div>
@@ -175,6 +182,9 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
         </div>
       </div>
 
+      <!-- ATTACHMENTS -->
+      <ContentAttachments v-if="content.attachments?.length" :attachments="content.attachments" />
+
       <!-- COMMENTS -->
       <CommentSection :target-type="content.type" :target-id="content.id" :federated-content-id="federatedId" />
 
@@ -183,6 +193,23 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
 </template>
 
 <style scoped>
+/* ── COVER IMAGE ── */
+.cpub-cover {
+  width: 100%;
+  max-height: 420px;
+  overflow: hidden;
+  border-bottom: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+}
+
+.cpub-cover-img {
+  width: 100%;
+  height: 100%;
+  max-height: 420px;
+  object-fit: cover;
+  display: block;
+}
+
 /* ── BLOG WRAP ── */
 .cpub-blog-wrap {
   max-width: 720px;

package/components/views/ExplainerView.vue

@@ -240,6 +240,11 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
       <main class="cpub-explainer-main">
         <div class="cpub-section-viewport">
           <div class="cpub-content-wrap" :key="activeSection">
+            <!-- Cover image (first section only) -->
+            <div v-if="activeSection === 0 && content.coverImageUrl" class="cpub-explainer-cover">
+              <img :src="content.coverImageUrl" :alt="content.title" />
+            </div>
+
             <!-- Section Header (from sectionHeader block data) -->
             <div v-if="currentSection?.tag" class="cpub-section-tag">{{ currentSection.tag }}</div>
             <h1 class="cpub-section-title">{{ currentSection?.title || content.title }}</h1>
@@ -546,6 +551,22 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
   min-height: calc(100vh - 51px - 80px);
 }
 
+/* ── COVER IMAGE ── */
+.cpub-explainer-cover {
+  width: 100%;
+  max-height: 320px;
+  overflow: hidden;
+  margin-bottom: 20px;
+  border: var(--border-width-default) solid var(--border);
+}
+.cpub-explainer-cover img {
+  width: 100%;
+  height: 100%;
+  max-height: 320px;
+  object-fit: cover;
+  display: block;
+}
+
 /* ── SECTION TAG ── */
 .cpub-section-tag {
   font-family: var(--font-mono);

package/components/views/ProjectView.vue

@@ -434,6 +434,9 @@ async function handleBuild(): Promise<void> {
                 </div>
               </template>
             </div>
+
+            <!-- ATTACHMENTS -->
+            <ContentAttachments v-if="content.attachments?.length" :attachments="content.attachments" />
           </template>
 
           <!-- BOM / PARTS & STEPS TAB -->

package/composables/useEngagement.ts

@@ -82,6 +82,7 @@ export interface ContentViewData {
   seriesTotalParts?: number;
   seriesPrev?: { title: string; url: string };
   seriesNext?: { title: string; url: string };
+  attachments?: Array<{ type: string; url: string; name?: string }>;
 }
 
 export interface EngagementOptions {

package/composables/useMirrorContent.ts

@@ -83,6 +83,7 @@ export function useMirrorContent(fedContent: Ref<Record<string, unknown> | null>
       },
       buildCount: 0,
       bookmarkCount: 0,
+      attachments: Array.isArray(fc.attachments) ? (fc.attachments as Array<{ type: string; url: string; name?: string }>) : [],
     } satisfies ContentViewData;
   });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -47,12 +47,12 @@
     "@commonpub/auth": "0.5.0",
     "@commonpub/config": "0.7.0",
     "@commonpub/docs": "0.5.2",
-    "@commonpub/learning": "0.5.0",
     "@commonpub/editor": "0.5.0",
+    "@commonpub/learning": "0.5.0",
     "@commonpub/protocol": "0.9.4",
-    "@commonpub/schema": "0.8.10",
-    "@commonpub/ui": "0.7.1",
-    "@commonpub/server": "2.9.0"
+    "@commonpub/schema": "0.8.11",
+    "@commonpub/server": "2.11.0",
+    "@commonpub/ui": "0.7.1"
   },
   "scripts": {}
 }

package/pages/dashboard.vue

@@ -208,11 +208,12 @@ async function deleteItem(id: string, title: string): Promise<void> {
       <div class="cpub-dash-list">
         <div v-for="bm in bookmarkData?.items ?? []" :key="bm.id" class="cpub-dash-row">
           <template v-if="bm.content">
-            <NuxtLink :to="`/${bm.content.type}/${bm.content.slug}`" class="cpub-dash-row-title">
+            <NuxtLink :to="bm.isFederated ? `/mirror/${bm.targetId}` : `/${bm.content.type}/${bm.content.slug}`" class="cpub-dash-row-title">
               {{ bm.content.title }}
             </NuxtLink>
             <span class="cpub-dash-row-meta">
               <ContentTypeBadge :type="bm.content.type" />
+              <span v-if="bm.isFederated && bm.content.originDomain" class="cpub-dash-row-fed"><i class="fa-solid fa-globe"></i> {{ bm.content.originDomain }}</span>
               <span v-if="bm.content.author">by {{ bm.content.author.displayName || bm.content.author.username }}</span>
             </span>
           </template>

package/pages/federated-hubs/[id]/posts/[postId].vue

@@ -175,14 +175,14 @@ if (hub.value?.url) {
       </p>
     </div>
 
-    <!-- Empty state for replies -->
+    <!-- Reply thread info -->
     <div class="cpub-replies-section">
       <div class="cpub-empty-state" style="padding: 32px 16px">
-        <p class="cpub-empty-state-title">Replies are on the origin instance</p>
+        <p class="cpub-empty-state-title"><i class="fa-solid fa-globe"></i> Federated thread</p>
         <p class="cpub-empty-state-desc">
-          Reply threads live on <strong>{{ hub?.originDomain }}</strong>.
+          Replies sent here are delivered to <strong>{{ hub?.originDomain }}</strong> via ActivityPub.
           <a v-if="post.objectUri" :href="post.objectUri" target="_blank" rel="noopener noreferrer" class="cpub-inline-link">
-            View thread on origin <i class="fa-solid fa-arrow-up-right-from-square"></i>
+            View full thread on origin <i class="fa-solid fa-arrow-up-right-from-square"></i>
           </a>
         </p>
       </div>

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

@@ -7,10 +7,34 @@ const route = useRoute();
 const handle = computed(() => decodeURIComponent(route.params.handle as string));
 
 const { searchResult, searchLoading, searchError, searchRemoteUser, followRemoteUser, unfollowRemoteUser } = useFederation();
+const { user } = useAuth();
 
 const content = ref<FederatedContentItem[]>([]);
 const contentLoading = ref(false);
 
+// DM state
+const showDmForm = ref(false);
+const dmBody = ref('');
+const dmSending = ref(false);
+const dmSent = ref(false);
+
+async function sendDm(): Promise<void> {
+  if (!dmBody.value.trim() || !searchResult.value) return;
+  dmSending.value = true;
+  try {
+    const remoteHandle = `@${searchResult.value.preferredUsername}@${searchResult.value.instanceDomain}`;
+    await $fetch('/api/federation/dm', { method: 'POST', body: { handle: remoteHandle, body: dmBody.value } });
+    dmSent.value = true;
+    dmBody.value = '';
+    showDmForm.value = false;
+    setTimeout(() => { dmSent.value = false; }, 5000);
+  } catch {
+    // TODO: show error toast
+  } finally {
+    dmSending.value = false;
+  }
+}
+
 async function loadProfile() {
   const h = handle.value.startsWith('@') ? handle.value : `@${handle.value}`;
   await searchRemoteUser(h);
@@ -75,17 +99,45 @@ function stripHtml(html: string): string {
           </div>
         </div>
 
-        <button
-          class="cpub-remote-profile__follow-btn"
-          :class="{
-            'cpub-remote-profile__follow-btn--following': searchResult.isFollowing,
-            'cpub-remote-profile__follow-btn--pending': searchResult.isFollowPending,
-          }"
-          :disabled="searchResult.isFollowPending"
-          @click="searchResult.isFollowing ? onUnfollow() : onFollow()"
-        >
-          {{ searchResult.isFollowing ? 'Following' : searchResult.isFollowPending ? 'Pending' : 'Follow' }}
-        </button>
+        <div class="cpub-remote-profile__actions">
+          <button
+            class="cpub-remote-profile__follow-btn"
+            :class="{
+              'cpub-remote-profile__follow-btn--following': searchResult.isFollowing,
+              'cpub-remote-profile__follow-btn--pending': searchResult.isFollowPending,
+            }"
+            :disabled="searchResult.isFollowPending"
+            @click="searchResult.isFollowing ? onUnfollow() : onFollow()"
+          >
+            {{ searchResult.isFollowing ? 'Following' : searchResult.isFollowPending ? 'Pending' : 'Follow' }}
+          </button>
+          <button
+            v-if="user"
+            class="cpub-remote-profile__follow-btn"
+            @click="showDmForm = !showDmForm"
+          >
+            <i class="fa-solid fa-envelope"></i> Message
+          </button>
+        </div>
+      </div>
+
+      <!-- DM Form -->
+      <div v-if="showDmForm" class="cpub-remote-profile__dm-form">
+        <textarea
+          v-model="dmBody"
+          class="cpub-remote-profile__dm-textarea"
+          placeholder="Write a message..."
+          rows="3"
+        ></textarea>
+        <div class="cpub-remote-profile__dm-actions">
+          <button class="cpub-remote-profile__dm-send" :disabled="dmSending || !dmBody.trim()" @click="sendDm">
+            {{ dmSending ? 'Sending...' : 'Send' }}
+          </button>
+          <button class="cpub-remote-profile__dm-cancel" @click="showDmForm = false">Cancel</button>
+        </div>
+      </div>
+      <div v-if="dmSent" class="cpub-remote-profile__dm-sent">
+        <i class="fa-solid fa-check"></i> Message sent via ActivityPub
       </div>
 
       <p v-if="searchResult.summary" class="cpub-remote-profile__bio">
@@ -218,4 +270,55 @@ function stripHtml(html: string): string {
   flex-direction: column;
   gap: var(--space-4);
 }
+.cpub-remote-profile__actions {
+  display: flex;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+.cpub-remote-profile__dm-form {
+  margin-bottom: var(--space-4);
+  padding: var(--space-3);
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface-1, var(--surface));
+}
+.cpub-remote-profile__dm-textarea {
+  width: 100%;
+  padding: var(--space-2);
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface-2, var(--surface2));
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-sm);
+  resize: vertical;
+  margin-bottom: var(--space-2);
+}
+.cpub-remote-profile__dm-actions {
+  display: flex;
+  gap: var(--space-2);
+}
+.cpub-remote-profile__dm-send {
+  padding: var(--space-1) var(--space-3);
+  border: var(--border-width-default) solid var(--accent);
+  background: var(--accent);
+  color: var(--surface-1, var(--surface));
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+}
+.cpub-remote-profile__dm-send:disabled { opacity: 0.5; cursor: default; }
+.cpub-remote-profile__dm-cancel {
+  padding: var(--space-1) var(--space-3);
+  border: var(--border-width-default) solid var(--border);
+  background: transparent;
+  color: var(--text-2);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+}
+.cpub-remote-profile__dm-sent {
+  font-size: var(--font-size-sm);
+  color: var(--green, #22c55e);
+  font-weight: 600;
+  margin-bottom: var(--space-4);
+}
 </style>

package/pages/hubs/[slug]/posts/[postId].vue

@@ -92,6 +92,34 @@ async function deletePost(): Promise<void> {
   }
 }
 
+// Edit
+const editing = ref(false);
+const editContent = ref('');
+const saving = ref(false);
+
+function startEdit(): void {
+  editContent.value = post.value?.content ?? '';
+  editing.value = true;
+}
+
+async function saveEdit(): Promise<void> {
+  if (!editContent.value.trim()) return;
+  saving.value = true;
+  try {
+    await $fetch(`/api/hubs/${slug.value}/posts/${postId.value}`, {
+      method: 'PUT',
+      body: { content: editContent.value },
+    });
+    editing.value = false;
+    await refreshPost();
+    toast.success('Post updated');
+  } catch {
+    toast.error('Failed to update post');
+  } finally {
+    saving.value = false;
+  }
+}
+
 function formatDate(d: string | Date): string {
   return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' });
 }
@@ -121,7 +149,21 @@ useSeoMeta({
         <span v-if="post.isLocked" class="cpub-post-locked"><i class="fa-solid fa-lock"></i> Locked</span>
       </div>
 
-      <div class="cpub-post-content">{{ post.content }}</div>
+      <div v-if="editing" class="cpub-post-edit-form">
+        <textarea v-model="editContent" class="cpub-post-edit-textarea" rows="4"></textarea>
+        <div class="cpub-post-edit-actions">
+          <button class="cpub-btn cpub-btn-sm cpub-btn-primary" :disabled="saving || !editContent.trim()" @click="saveEdit">
+            {{ saving ? 'Saving...' : 'Save' }}
+          </button>
+          <button class="cpub-btn cpub-btn-sm" @click="editing = false">Cancel</button>
+        </div>
+      </div>
+      <div v-else class="cpub-post-content">
+        {{ post.content }}
+        <div v-if="post.updatedAt && post.updatedAt !== post.createdAt" class="cpub-post-edited">
+          <i class="fa-solid fa-pen"></i> edited
+        </div>
+      </div>
 
       <div class="cpub-post-meta">
         <div class="cpub-post-author">
@@ -147,6 +189,9 @@ useSeoMeta({
 
       <!-- Mod actions -->
       <div v-if="isMod || isAuthor" class="cpub-post-mod-bar">
+        <button v-if="isAuthor && !editing" class="cpub-btn cpub-btn-sm" @click="startEdit">
+          <i class="fa-solid fa-pen"></i> Edit
+        </button>
         <button v-if="isMod" class="cpub-btn cpub-btn-sm" @click="togglePin">
           <i class="fa-solid fa-thumbtack"></i> {{ post.isPinned ? 'Unpin' : 'Pin' }}
         </button>
@@ -257,6 +302,19 @@ useSeoMeta({
   font-size: 15px; line-height: 1.7; color: var(--text);
   margin-bottom: 16px; white-space: pre-wrap;
 }
+.cpub-post-edited {
+  font-size: 10px; font-family: var(--font-mono); color: var(--text-faint);
+  margin-top: 4px;
+}
+.cpub-post-edit-form { margin-bottom: 16px; }
+.cpub-post-edit-textarea {
+  width: 100%; padding: 10px 12px; background: var(--surface);
+  border: var(--border-width-default) solid var(--accent-border);
+  color: var(--text); font-size: 14px; font-family: var(--font-sans);
+  line-height: 1.6; resize: vertical;
+}
+.cpub-post-edit-textarea:focus { outline: none; border-color: var(--accent); }
+.cpub-post-edit-actions { display: flex; gap: 6px; margin-top: 8px; }
 
 .cpub-post-meta {
   display: flex; align-items: center; justify-content: space-between;
@@ -294,6 +352,9 @@ useSeoMeta({
   display: flex; gap: 6px;
 }
 
+.cpub-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
+.cpub-btn-primary:hover:not(:disabled) { opacity: 0.9; }
+.cpub-btn-primary:disabled { opacity: 0.5; cursor: default; }
 .cpub-btn-danger { color: var(--red); border-color: var(--red); }
 .cpub-btn-danger:hover { background: var(--red); color: white; }
 

package/pages/messages/[conversationId].vue

@@ -2,7 +2,7 @@
 const route = useRoute();
 const conversationId = route.params.conversationId as string;
 
-useSeoMeta({ title: 'Message -- devEco.io' });
+useSeoMeta({ title: () => `Message — ${participantLabel.value}` });
 definePageMeta({ middleware: 'auth' });
 
 const { user } = useAuth();

package/pages/mirror/[id].vue

@@ -118,6 +118,7 @@ useSeoMeta({
           </div>
         </div>
         <div v-if="typeof transformedContent.content === 'string'" class="cpub-mirror-body prose" v-html="transformedContent.content" />
+        <ContentAttachments v-if="transformedContent.attachments?.length" :attachments="transformedContent.attachments" />
         <div v-if="transformedContent.tags?.length" class="cpub-mirror-tags">
           <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>

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

@@ -0,0 +1,72 @@
+import { getFederatedHub, listFederatedHubPosts } from '@commonpub/server';
+
+function escapeXml(str: string): string {
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;');
+}
+
+function stripHtml(html: string): string {
+  return html.replace(/<[^>]*>/g, '').trim();
+}
+
+export default defineEventHandler(async (event) => {
+  requireFeature('federation');
+  requireFeature('federateHubs');
+
+  const db = useDB();
+  const config = useRuntimeConfig();
+  const siteUrl = config.public.siteUrl as string;
+  const { id } = parseParams(event, { id: 'uuid' });
+
+  const hub = await getFederatedHub(db, id);
+  if (!hub) {
+    throw createError({ statusCode: 404, statusMessage: 'Federated hub not found' });
+  }
+
+  const { items } = await listFederatedHubPosts(db, id, { limit: 50 });
+
+  const lastBuildDate = items.length > 0 && items[0]!.publishedAt
+    ? new Date(items[0]!.publishedAt).toUTCString()
+    : new Date().toUTCString();
+
+  const rssItems = items.map((item) => {
+    const title = item.sharedContentMeta?.title
+      ? `Shared: ${item.sharedContentMeta.title}`
+      : stripHtml(item.content).slice(0, 100) || 'Post';
+    const link = item.objectUri;
+    const pubDate = item.publishedAt ? new Date(item.publishedAt).toUTCString() : new Date(item.receivedAt).toUTCString();
+    const authorName = item.author.displayName ?? item.author.preferredUsername ?? 'Unknown';
+    const desc = stripHtml(item.content).slice(0, 300);
+
+    return `    <item>
+      <title>${escapeXml(title)}</title>
+      <link>${escapeXml(link)}</link>
+      <guid isPermaLink="false">${escapeXml(link)}</guid>
+      <pubDate>${pubDate}</pubDate>
+      <description>${escapeXml(desc)}</description>
+      <author>${escapeXml(authorName)}@${escapeXml(item.author.instanceDomain)}</author>
+      <category>${escapeXml(item.postType)}</category>
+    </item>`;
+  });
+
+  const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>${escapeXml(hub.name)} (via ${escapeXml(hub.originDomain)})</title>
+    <link>${escapeXml(hub.url ?? `${siteUrl}/federated-hubs/${id}`)}</link>
+    <description>${escapeXml(hub.description ?? `Posts from ${hub.name} on ${hub.originDomain}`)}</description>
+    <language>en</language>
+    <lastBuildDate>${lastBuildDate}</lastBuildDate>
+    <atom:link href="${escapeXml(siteUrl)}/api/federated-hubs/${id}/feed.xml" rel="self" type="application/rss+xml"/>
+${rssItems.join('\n')}
+  </channel>
+</rss>`;
+
+  setResponseHeader(event, 'Content-Type', 'application/rss+xml; charset=utf-8');
+  setResponseHeader(event, 'Cache-Control', 'public, max-age=600, stale-while-revalidate=300');
+  return xml;
+});

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

@@ -0,0 +1,28 @@
+import { federateDirectMessage, resolveRemoteHandle } from '@commonpub/server';
+import { z } from 'zod';
+
+const dmSchema = z.object({
+  handle: z.string().min(3),
+  body: z.string().min(1).max(10000),
+});
+
+export default defineEventHandler(async (event) => {
+  requireFeature('federation');
+  const user = requireAuth(event);
+  const db = useDB();
+  const config = useConfig();
+  const input = await parseBody(event, dmSchema);
+
+  const resolved = await resolveRemoteHandle(db, input.handle, config.instance.domain);
+  if (!resolved) {
+    throw createError({ statusCode: 404, statusMessage: 'Could not resolve remote user' });
+  }
+
+  await federateDirectMessage(db, user.id, resolved.actorUri, input.body, config.instance.domain);
+
+  return {
+    sent: true,
+    recipientActorUri: resolved.actorUri,
+    recipientName: resolved.displayName ?? resolved.preferredUsername ?? input.handle,
+  };
+});

package/server/api/hubs/[slug]/index.put.ts

@@ -1,10 +1,11 @@
-import { updateHub, getHubBySlug } from '@commonpub/server';
+import { updateHub, getHubBySlug, federateHubUpdate } from '@commonpub/server';
 import type { HubDetail } from '@commonpub/server';
 import { updateHubSchema } from '@commonpub/schema';
 
 export default defineEventHandler(async (event): Promise<HubDetail> => {
   const user = requireAuth(event);
   const db = useDB();
+  const config = useConfig();
   const { slug } = parseParams(event, { slug: 'string' });
 
   const hub = await getHubBySlug(db, slug, user.id);
@@ -18,5 +19,13 @@ export default defineEventHandler(async (event): Promise<HubDetail> => {
   if (!updated) {
     throw createError({ statusCode: 403, statusMessage: 'Not authorized to update this hub' });
   }
+
+  // Federate the hub metadata update (fire-and-forget)
+  if (config.features.federation && config.features.federateHubs) {
+    federateHubUpdate(db, hub.id, config.instance.domain).catch((err) => {
+      console.error('[hub-federation] Failed to federate hub update:', err);
+    });
+  }
+
   return updated;
 });

package/server/api/hubs/[slug]/posts/[postId]/like.post.ts

@@ -1,8 +1,9 @@
-import { likePost, unlikePost, hasLikedPost, getHubBySlug, getPostById } from '@commonpub/server';
+import { likePost, unlikePost, hasLikedPost, getHubBySlug, getPostById, federateHubPostLike } from '@commonpub/server';
 
 export default defineEventHandler(async (event) => {
   const user = requireAuth(event);
   const db = useDB();
+  const config = useConfig();
   const { slug, postId } = parseParams(event, { slug: 'string', postId: 'uuid' });
 
   const community = await getHubBySlug(db, slug);
@@ -17,5 +18,13 @@ export default defineEventHandler(async (event) => {
     return { liked: false };
   }
   await likePost(db, user.id, postId);
+
+  // Federate the like (fire-and-forget)
+  if (config.features.federation && config.features.federateHubs) {
+    federateHubPostLike(db, user.id, postId, slug, config.instance.domain).catch((err) => {
+      console.error('[hub-federation] Failed to federate post like:', err);
+    });
+  }
+
   return { liked: true };
 });

package/server/api/hubs/[slug]/posts/[postId]/replies.post.ts

@@ -1,11 +1,12 @@
-import { createReply } from '@commonpub/server';
+import { createReply, federateHubPostReply } from '@commonpub/server';
 import type { HubReplyItem } from '@commonpub/server';
 import { createReplySchema } from '@commonpub/schema';
 
 export default defineEventHandler(async (event): Promise<HubReplyItem> => {
   const user = requireAuth(event);
   const db = useDB();
-  const { postId } = parseParams(event, { postId: 'uuid' });
+  const config = useConfig();
+  const { slug, postId } = parseParams(event, { slug: 'string', postId: 'uuid' });
   const body = await readBody(event);
 
   const parsed = createReplySchema.safeParse({ ...body, postId });
@@ -17,5 +18,14 @@ export default defineEventHandler(async (event): Promise<HubReplyItem> => {
     });
   }
 
-  return createReply(db, user.id, parsed.data);
+  const reply = await createReply(db, user.id, parsed.data);
+
+  // Federate the reply as Create(Note) with inReplyTo (fire-and-forget)
+  if (config.features.federation && config.features.federateHubs) {
+    federateHubPostReply(db, user.id, parsed.data.content, postId, slug, config.instance.domain).catch((err) => {
+      console.error('[hub-federation] Failed to federate post reply:', err);
+    });
+  }
+
+  return reply;
 });

package/server/api/hubs/[slug]/posts/[postId].put.ts

@@ -0,0 +1,30 @@
+import { editPost, getHubBySlug, federateHubPostUpdate } from '@commonpub/server';
+import type { HubPostItem } from '@commonpub/server';
+import { editPostSchema } from '@commonpub/schema';
+
+export default defineEventHandler(async (event): Promise<HubPostItem> => {
+  const user = requireAuth(event);
+  const db = useDB();
+  const config = useConfig();
+  const { slug, postId } = parseParams(event, { slug: 'string', postId: 'uuid' });
+
+  const community = await getHubBySlug(db, slug);
+  if (!community) {
+    throw createError({ statusCode: 404, statusMessage: 'Hub not found' });
+  }
+
+  const input = await parseBody(event, editPostSchema);
+  const updated = await editPost(db, postId, user.id, input);
+  if (!updated) {
+    throw createError({ statusCode: 403, statusMessage: 'Not authorized to edit this post' });
+  }
+
+  // Federate the update (fire-and-forget)
+  if (config.features.federation && config.features.federateHubs) {
+    federateHubPostUpdate(db, postId, community.id, config.instance.domain).catch((err) => {
+      console.error('[hub-federation] Failed to federate post update:', err);
+    });
+  }
+
+  return updated;
+});

package/server/api/hubs/[slug]/share.post.ts

@@ -1,10 +1,11 @@
-import { shareContent, getHubBySlug, federateHubShare, getContentSlugById, buildContentUri } from '@commonpub/server';
+import { shareContent, getHubBySlug, getFederatedContent, createPost, federateHubShare, getContentSlugById, buildContentUri } from '@commonpub/server';
 import type { HubPostItem } from '@commonpub/server';
 import { z } from 'zod';
 
 const shareContentSchema = z.object({
-  contentId: z.string().uuid(),
-});
+  contentId: z.string().uuid().optional(),
+  federatedContentId: z.string().uuid().optional(),
+}).refine((d) => d.contentId || d.federatedContentId, { message: 'Either contentId or federatedContentId is required' });
 
 export default defineEventHandler(async (event): Promise<HubPostItem> => {
   const user = requireAuth(event);
@@ -18,19 +19,53 @@ export default defineEventHandler(async (event): Promise<HubPostItem> => {
     throw createError({ statusCode: 404, statusMessage: 'Hub not found' });
   }
 
-  const post = await shareContent(db, user.id, hub.id, input.contentId);
-  if (!post) {
-    throw createError({ statusCode: 400, statusMessage: 'Cannot share. You must be a hub member and the content must exist.' });
+  // Share local content
+  if (input.contentId) {
+    const post = await shareContent(db, user.id, hub.id, input.contentId);
+    if (!post) {
+      throw createError({ statusCode: 400, statusMessage: 'Cannot share. You must be a hub member and the content must exist.' });
+    }
+
+    // Federate the shared content as Announce from the hub Group actor
+    if (config.features.federation && config.features.federateHubs) {
+      getContentSlugById(db, input.contentId).then((contentSlug) => {
+        if (contentSlug) {
+          const contentUri = buildContentUri(config.instance.domain, contentSlug);
+          return federateHubShare(db, contentUri, hub.id, config.instance.domain);
+        }
+      }).catch((err) => {
+        console.error('[hub-federation] Failed to federate share:', err);
+      });
+    }
+
+    return post;
   }
 
-  // Federate the shared content as Announce from the hub Group actor
+  // Share federated content
+  const fedContent = await getFederatedContent(db, input.federatedContentId!);
+  if (!fedContent) {
+    throw createError({ statusCode: 404, statusMessage: 'Federated content not found' });
+  }
+
+  const sharePayload = JSON.stringify({
+    federatedContentId: fedContent.id,
+    title: fedContent.title,
+    type: fedContent.cpubType ?? fedContent.apType ?? 'article',
+    coverImageUrl: fedContent.coverImageUrl ?? null,
+    description: fedContent.summary ?? null,
+    originUrl: fedContent.url ?? fedContent.objectUri,
+    originDomain: fedContent.originDomain,
+  });
+
+  const post = await createPost(db, user.id, {
+    hubId: hub.id,
+    type: 'share',
+    content: sharePayload,
+  });
+
+  // Federate the share using the object URI of the federated content
   if (config.features.federation && config.features.federateHubs) {
-    getContentSlugById(db, input.contentId).then((contentSlug) => {
-      if (contentSlug) {
-        const contentUri = buildContentUri(config.instance.domain, contentSlug);
-        return federateHubShare(db, contentUri, hub.id, config.instance.domain);
-      }
-    }).catch((err) => {
+    federateHubShare(db, fedContent.objectUri, hub.id, config.instance.domain).catch((err) => {
       console.error('[hub-federation] Failed to federate share:', err);
     });
   }

package/server/api/hubs/index.post.ts

@@ -1,11 +1,21 @@
-import { createHub } from '@commonpub/server';
+import { createHub, federateHubActor } from '@commonpub/server';
 import type { HubDetail } from '@commonpub/server';
 import { createHubSchema } from '@commonpub/schema';
 
 export default defineEventHandler(async (event): Promise<HubDetail> => {
   const user = requireAuth(event);
   const db = useDB();
+  const config = useConfig();
   const input = await parseBody(event, createHubSchema);
 
-  return createHub(db, user.id, input);
+  const hub = await createHub(db, user.id, input);
+
+  // Federate new hub as Group actor Announce (fire-and-forget)
+  if (config.features.federation && config.features.federateHubs) {
+    federateHubActor(db, hub.id, config.instance.domain).catch((err) => {
+      console.error('[hub-federation] Failed to federate hub actor:', err);
+    });
+  }
+
+  return hub;
 });