@commonpub/layer 0.1.0

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

@@ -0,0 +1,385 @@
+<script setup lang="ts">
+import type { FederatedHubListItem, FederatedHubPostItem } from '@commonpub/server';
+import type { HubViewModel, HubPostViewModel, HubTabDef } from '../../../types/hub';
+
+const route = useRoute();
+const id = route.params.id as string;
+
+const { data: hub, pending, error, refresh: refreshHub } = await useFetch<FederatedHubListItem>(`/api/federated-hubs/${id}`);
+const { data: posts, refresh: refreshPosts } = useLazyFetch<{ items: FederatedHubPostItem[]; total: number }>(`/api/federated-hubs/${id}/posts`, {
+  default: () => ({ items: [], total: 0 }),
+});
+
+useSeoMeta({
+  title: () => hub.value ? `${hub.value.name} (${hub.value.originDomain})` : 'Federated Hub',
+  description: () => hub.value?.description || '',
+});
+
+if (hub.value?.url) {
+  useHead({
+    link: [{ rel: 'canonical', href: hub.value.url }],
+    meta: [{ name: 'robots', content: 'noindex, follow' }],
+  });
+}
+
+const { isAuthenticated } = useAuth();
+const toast = useToast();
+const activeTab = ref('feed');
+
+// --- Map to view models ---
+const hubVM = computed<HubViewModel | null>(() => {
+  if (!hub.value) return null;
+  return {
+    name: hub.value.name,
+    description: hub.value.description,
+    iconUrl: hub.value.iconUrl,
+    bannerUrl: hub.value.bannerUrl,
+    hubType: (hub.value.hubType as 'community' | 'product' | 'company') ?? 'community',
+    memberCount: hub.value.memberCount,
+    postCount: hub.value.postCount,
+    foundedLabel: null,
+    isOfficial: false,
+    joinPolicy: null,
+    categories: null,
+    website: null,
+  };
+});
+
+const postsVM = computed<HubPostViewModel[]>(() => {
+  return (posts.value?.items ?? []).map((p) => {
+    const sc = p.sharedContentMeta;
+    return {
+      id: p.id,
+      type: p.postType || 'text',
+      content: p.content || '',
+      author: {
+        name: p.author.displayName || p.author.preferredUsername || 'Unknown',
+        handle: `@${p.author.preferredUsername}@${p.author.instanceDomain}`,
+        avatarUrl: p.author.avatarUrl,
+      },
+      createdAt: String(p.publishedAt ?? p.receivedAt),
+      likeCount: (p.localLikeCount ?? 0) + (p.remoteLikeCount ?? 0),
+      replyCount: (p.localReplyCount ?? 0) + (p.remoteReplyCount ?? 0),
+      isPinned: p.isPinned ?? false,
+      isLocked: false,
+      linkTo: `/federated-hubs/${id}/posts/${p.id}`,
+      sharedContent: sc ? {
+        type: sc.type,
+        slug: '',
+        title: sc.title,
+        description: sc.summary ?? null,
+        coverImageUrl: sc.coverImageUrl ?? null,
+        url: sc.originUrl ?? null,
+      } : undefined,
+    };
+  });
+});
+
+const discussionPosts = computed(() =>
+  postsVM.value.filter(p => p.type === 'text' || p.type === 'discussion' || p.type === 'question'),
+);
+
+const tabDefs = computed<HubTabDef[]>(() => [
+  { value: 'feed', label: 'Feed', icon: 'fa-solid fa-rss', count: hub.value?.postCount },
+  { value: 'discussions', label: 'Discussions', icon: 'fa-solid fa-comments', count: discussionPosts.value.length || undefined },
+]);
+
+// --- Compose (posts to remote hub via federation) ---
+const newPostContent = ref('');
+const posting = ref(false);
+
+async function handlePost(): Promise<void> {
+  if (!newPostContent.value.trim() || !hub.value?.actorUri) return;
+  posting.value = true;
+  try {
+    await $fetch('/api/federation/hub-post' as string, {
+      method: 'POST',
+      body: {
+        federatedHubId: id,
+        hubActorUri: hub.value.actorUri,
+        content: newPostContent.value,
+      },
+    });
+    newPostContent.value = '';
+    toast.success('Post sent to hub');
+    await Promise.all([refreshHub(), refreshPosts()]);
+  } catch {
+    toast.error('Failed to post — the remote hub may not accept posts from this instance');
+  } finally {
+    posting.value = false;
+  }
+}
+
+// --- Follow hub ---
+const followStatus = computed(() => hub.value?.followStatus ?? 'pending');
+const following = ref(false);
+
+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' ? 'Already following!' : 'Follow request sent');
+  } catch {
+    toast.error('Failed to follow hub');
+  } finally {
+    following.value = false;
+  }
+}
+
+// --- Like state tracking ---
+const likedPostIds = ref<Set<string>>(new Set());
+
+async function fetchLikedState(): Promise<void> {
+  if (!isAuthenticated.value || !posts.value?.items.length) return;
+  try {
+    const ids = posts.value.items.map(p => p.id).join(',');
+    const result = await $fetch<{ likedPostIds: string[] }>(`/api/federation/hub-post-likes?postIds=${ids}`);
+    likedPostIds.value = new Set(result.likedPostIds);
+  } catch { /* best-effort */ }
+}
+
+watch(() => posts.value?.items.length, () => { fetchLikedState(); }, { immediate: true });
+
+// --- Vote/like toggle on posts ---
+async function handlePostVote(postId: string): Promise<void> {
+  if (!isAuthenticated.value) {
+    await navigateTo(`/auth/login?redirect=/federated-hubs/${id}`);
+    return;
+  }
+  try {
+    const result = await $fetch<{ liked: boolean }>('/api/federation/hub-post-like' as string, {
+      method: 'POST',
+      body: { federatedHubPostId: postId },
+    });
+    const post = posts.value?.items.find(p => p.id === postId);
+    if (post) {
+      if (result.liked) {
+        post.localLikeCount = (post.localLikeCount ?? 0) + 1;
+        likedPostIds.value.add(postId);
+      } else {
+        post.localLikeCount = Math.max((post.localLikeCount ?? 0) - 1, 0);
+        likedPostIds.value.delete(postId);
+      }
+    }
+    toast.success(result.liked ? 'Liked!' : 'Unliked');
+  } catch {
+    toast.error('Failed to toggle like');
+  }
+}
+
+// --- Discussion compose ---
+const newDiscContent = ref('');
+const discPosting = ref(false);
+
+async function handleDiscPost(): Promise<void> {
+  if (!newDiscContent.value.trim() || !hub.value?.actorUri) return;
+  discPosting.value = true;
+  try {
+    await $fetch('/api/federation/hub-post' as string, {
+      method: 'POST',
+      body: {
+        federatedHubId: id,
+        hubActorUri: hub.value.actorUri,
+        content: newDiscContent.value,
+        type: 'discussion',
+      },
+    });
+    newDiscContent.value = '';
+    toast.success('Discussion posted');
+    await Promise.all([refreshHub(), refreshPosts()]);
+  } catch {
+    toast.error('Failed to post discussion');
+  } finally {
+    discPosting.value = false;
+  }
+}
+</script>
+
+<template>
+  <div v-if="pending" class="cpub-loading" style="padding: 64px 24px; text-align: center">Loading hub...</div>
+  <div v-else-if="error" class="cpub-not-found">
+    <h1>Hub not found</h1>
+    <p>This federated hub may have been removed or the mirror may be paused.</p>
+    <NuxtLink to="/hubs">Back to Hubs</NuxtLink>
+  </div>
+
+  <HubLayout v-else-if="hubVM" v-model:active-tab="activeTab" :tabs="tabDefs">
+    <template #hero>
+      <HubHero :hub="hubVM">
+        <template #banner-overlay>
+          <div class="cpub-fed-banner">
+            <div class="cpub-fed-banner-inner">
+              <i class="fa-solid fa-globe"></i>
+              <span>Mirrored from <strong>{{ hub?.originDomain }}</strong></span>
+              <a v-if="hub?.url" :href="hub.url" target="_blank" rel="noopener noreferrer" class="cpub-fed-banner-link">
+                Visit original <i class="fa-solid fa-arrow-up-right-from-square"></i>
+              </a>
+            </div>
+          </div>
+        </template>
+        <template #actions>
+          <button
+            v-if="followStatus !== 'accepted'"
+            class="cpub-btn cpub-btn-sm 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-btn cpub-btn-sm" style="cursor: default; opacity: 0.8">
+            <i class="fa-solid fa-check"></i> Following
+          </span>
+          <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 on {{ hub?.originDomain }}
+          </a>
+        </template>
+        <template #badges>
+          <span class="cpub-tag"><i class="fa-solid fa-globe" style="margin-right: 3px"></i>{{ hub?.originDomain }}</span>
+        </template>
+      </HubHero>
+    </template>
+
+    <!-- Feed tab -->
+    <HubFeed v-if="activeTab === 'feed'" :posts="postsVM" :interactive="isAuthenticated" :liked-post-ids="likedPostIds" @post-vote="handlePostVote">
+      <template v-if="isAuthenticated" #compose>
+        <div class="cpub-compose-bar">
+          <div class="cpub-compose-row">
+            <input
+              v-model="newPostContent"
+              class="cpub-compose-input"
+              type="text"
+              placeholder="Post to this hub (sent via federation)..."
+              @keydown.enter="handlePost"
+            />
+            <button class="cpub-btn cpub-btn-sm cpub-btn-primary" :disabled="posting" @click="handlePost">
+              <i class="fa-solid fa-paper-plane"></i> Post
+            </button>
+          </div>
+          <p class="cpub-fed-compose-hint">
+            <i class="fa-solid fa-globe"></i> Your post will be sent to {{ hub?.originDomain }} via ActivityPub
+          </p>
+        </div>
+      </template>
+    </HubFeed>
+
+    <!-- Discussions tab -->
+    <HubDiscussions v-else-if="activeTab === 'discussions'" :posts="discussionPosts">
+      <template v-if="isAuthenticated" #compose>
+        <div class="cpub-compose-bar" style="margin-bottom: 16px">
+          <div class="cpub-compose-row">
+            <input
+              v-model="newDiscContent"
+              class="cpub-compose-input"
+              type="text"
+              placeholder="Start a discussion (sent via federation)..."
+              @keydown.enter="handleDiscPost"
+            />
+            <button class="cpub-btn cpub-btn-sm cpub-btn-primary" :disabled="discPosting" @click="handleDiscPost">
+              <i class="fa-solid fa-paper-plane"></i> Post
+            </button>
+          </div>
+        </div>
+      </template>
+    </HubDiscussions>
+
+    <template #sidebar>
+      <HubSidebar>
+        <HubSidebarCard title="About">
+          <p v-if="hub?.description" class="cpub-sidebar-desc">{{ hub.description }}</p>
+          <div class="cpub-sidebar-stats">
+            <div class="cpub-sidebar-stat">
+              <strong>{{ hub?.memberCount ?? 0 }}</strong>
+              <span>members</span>
+            </div>
+            <div class="cpub-sidebar-stat">
+              <strong>{{ hub?.postCount ?? 0 }}</strong>
+              <span>posts</span>
+            </div>
+          </div>
+        </HubSidebarCard>
+        <HubSidebarCard title="Origin Instance">
+          <div class="cpub-origin-info">
+            <div class="cpub-origin-domain">
+              <i class="fa-solid fa-globe"></i>
+              <strong>{{ hub?.originDomain }}</strong>
+            </div>
+            <p class="cpub-origin-desc">Content is mirrored from this remote CommonPub instance via ActivityPub.</p>
+            <a v-if="hub?.url" :href="hub.url" target="_blank" rel="noopener noreferrer" class="cpub-btn cpub-btn-sm" style="margin-top: 8px; display: inline-flex">
+              <i class="fa-solid fa-arrow-up-right-from-square"></i> Visit Original
+            </a>
+          </div>
+        </HubSidebarCard>
+      </HubSidebar>
+    </template>
+  </HubLayout>
+</template>
+
+<style scoped>
+/* Origin banner */
+.cpub-fed-banner { background: var(--accent-bg); border-bottom: 1px solid var(--accent-border); }
+.cpub-fed-banner-inner {
+  max-width: 1200px; margin: 0 auto; padding: 8px 24px;
+  display: flex; align-items: center; gap: 8px;
+  font-size: 12px; color: var(--text-dim);
+}
+.cpub-fed-banner-inner > i { color: var(--accent); }
+.cpub-fed-banner-link {
+  margin-left: auto; color: var(--accent); font-weight: 600;
+  text-decoration: none; white-space: nowrap;
+  display: flex; align-items: center; gap: 4px; font-size: 11px;
+}
+.cpub-fed-banner-link:hover { text-decoration: underline; }
+
+/* Compose */
+.cpub-compose-bar {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
+  display: flex; flex-direction: column; gap: 6px;
+}
+.cpub-compose-row { display: flex; gap: 10px; align-items: center; }
+.cpub-compose-input {
+  flex: 1; background: var(--surface2); border: 1px solid var(--border);
+  border-radius: 8px; padding: 10px 14px; font-size: 0.8125rem;
+  color: var(--text); font-family: inherit;
+}
+.cpub-compose-input::placeholder { color: var(--text-faint); }
+.cpub-fed-compose-hint {
+  font-size: 11px; color: var(--text-faint);
+  display: flex; align-items: center; gap: 5px;
+}
+.cpub-fed-compose-hint i { font-size: 10px; color: var(--accent); }
+
+/* Sidebar */
+.cpub-sidebar-desc { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin-bottom: 12px; }
+.cpub-sidebar-stats { display: flex; gap: 16px; }
+.cpub-sidebar-stat { display: flex; flex-direction: column; font-size: 11px; color: var(--text-faint); }
+.cpub-sidebar-stat strong { font-size: 16px; color: var(--text); font-weight: 700; }
+
+/* Origin */
+.cpub-origin-info { font-size: 12px; }
+.cpub-origin-domain {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 13px; margin-bottom: 8px;
+}
+.cpub-origin-domain i { color: var(--accent); font-size: 11px; }
+.cpub-origin-desc { color: var(--text-dim); line-height: 1.5; }
+
+.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; }
+
+@media (max-width: 768px) {
+  .cpub-fed-banner-inner { padding: 8px 16px; font-size: 11px; flex-wrap: wrap; }
+  .cpub-compose-bar { padding: 10px 12px; }
+  .cpub-compose-input { padding: 8px 10px; font-size: 13px; }
+  .cpub-sidebar-stats { gap: 12px; }
+}
+</style>

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

@@ -0,0 +1,309 @@
+<script setup lang="ts">
+import type { FederatedHubListItem, FederatedHubPostItem } from '@commonpub/server';
+
+const route = useRoute();
+const id = route.params.id as string;
+const postId = route.params.postId as string;
+
+const { isAuthenticated } = useAuth();
+const toast = useToast();
+
+const { data: hub } = useLazyFetch<FederatedHubListItem>(`/api/federated-hubs/${id}`);
+const { data: post, refresh: refreshPost } = useLazyFetch<FederatedHubPostItem>(`/api/federated-hubs/${id}/posts/${postId}`);
+
+function formatDate(d: string | Date | null): string {
+  if (!d) return '';
+  return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' });
+}
+
+const authorHandle = computed(() => {
+  if (!post.value?.author) return '';
+  return `@${post.value.author.preferredUsername ?? 'unknown'}@${post.value.author.instanceDomain}`;
+});
+
+const likeCount = computed(() => (post.value?.localLikeCount ?? 0) + (post.value?.remoteLikeCount ?? 0));
+const replyCount = computed(() => (post.value?.localReplyCount ?? 0) + (post.value?.remoteReplyCount ?? 0));
+
+// Like toggle
+const liking = ref(false);
+const liked = ref(false);
+
+async function fetchLikedState(): Promise<void> {
+  if (!isAuthenticated.value) return;
+  try {
+    const result = await $fetch<{ likedPostIds: string[] }>(`/api/federation/hub-post-likes?postIds=${postId}`);
+    liked.value = result.likedPostIds.includes(postId);
+  } catch { /* best-effort */ }
+}
+
+onMounted(fetchLikedState);
+
+async function handleLike(): Promise<void> {
+  if (!isAuthenticated.value) {
+    await navigateTo(`/auth/login?redirect=/federated-hubs/${id}/posts/${postId}`);
+    return;
+  }
+  liking.value = true;
+  try {
+    const result = await $fetch<{ liked: boolean }>('/api/federation/hub-post-like' as string, {
+      method: 'POST',
+      body: { federatedHubPostId: postId },
+    });
+    liked.value = result.liked;
+    if (post.value) {
+      if (result.liked) {
+        post.value.localLikeCount = (post.value.localLikeCount ?? 0) + 1;
+      } else {
+        post.value.localLikeCount = Math.max((post.value.localLikeCount ?? 0) - 1, 0);
+      }
+    }
+    toast.success(result.liked ? 'Liked!' : 'Unliked');
+  } catch {
+    toast.error('Failed to toggle like');
+  } finally {
+    liking.value = false;
+  }
+}
+
+// Reply
+const replyContent = ref('');
+const replying = ref(false);
+
+async function handleReply(): Promise<void> {
+  if (!replyContent.value.trim()) return;
+  replying.value = true;
+  try {
+    await $fetch('/api/federation/hub-post-reply' as string, {
+      method: 'POST',
+      body: { federatedHubPostId: postId, content: replyContent.value },
+    });
+    replyContent.value = '';
+    toast.success('Reply sent via federation');
+    await refreshPost();
+  } catch {
+    toast.error('Failed to send reply');
+  } finally {
+    replying.value = false;
+  }
+}
+
+useSeoMeta({
+  title: () => post.value ? `${post.value.content?.slice(0, 60)} — ${hub.value?.name ?? 'Hub'}` : 'Post',
+  description: () => post.value?.content?.slice(0, 160) ?? '',
+});
+
+if (hub.value?.url) {
+  useHead({
+    link: [{ rel: 'canonical', href: hub.value.url }],
+    meta: [{ name: 'robots', content: 'noindex, follow' }],
+  });
+}
+</script>
+
+<template>
+  <div v-if="post" class="cpub-post-page">
+    <!-- Federation banner -->
+    <div class="cpub-fed-banner">
+      <div class="cpub-fed-banner-inner">
+        <i class="fa-solid fa-globe"></i>
+        <span>Mirrored from <strong>{{ hub?.originDomain }}</strong></span>
+        <a v-if="hub?.url" :href="hub.url" target="_blank" rel="noopener noreferrer" class="cpub-fed-banner-link">
+          Visit original <i class="fa-solid fa-arrow-up-right-from-square"></i>
+        </a>
+      </div>
+    </div>
+
+    <!-- Breadcrumb -->
+    <div class="cpub-post-breadcrumb">
+      <NuxtLink :to="`/federated-hubs/${id}`" class="cpub-breadcrumb-link">
+        <i class="fa-solid fa-arrow-left"></i> {{ hub?.name ?? 'Hub' }}
+      </NuxtLink>
+    </div>
+
+    <!-- Post -->
+    <article class="cpub-post-card">
+      <div v-if="post.isPinned" class="cpub-post-pin">
+        <i class="fa-solid fa-thumbtack"></i> Pinned
+      </div>
+
+      <div class="cpub-post-header">
+        <span class="cpub-post-type-badge">{{ post.postType }}</span>
+      </div>
+
+      <div class="cpub-post-content">{{ post.content }}</div>
+
+      <div class="cpub-post-meta">
+        <div class="cpub-post-author">
+          <div class="cpub-post-avatar">
+            <img v-if="post.author?.avatarUrl" :src="post.author.avatarUrl" :alt="post.author?.displayName || post.author?.preferredUsername || 'User'" class="cpub-post-avatar-img" />
+            <span v-else>{{ (post.author?.displayName || post.author?.preferredUsername || 'U').charAt(0).toUpperCase() }}</span>
+          </div>
+          <span class="cpub-post-author-name">{{ post.author?.displayName || post.author?.preferredUsername || 'Unknown' }}</span>
+          <span class="cpub-post-handle">{{ authorHandle }}</span>
+          <span class="cpub-post-sep">&middot;</span>
+          <time class="cpub-post-time">{{ formatDate(post.publishedAt ?? post.receivedAt) }}</time>
+        </div>
+
+        <div class="cpub-post-actions">
+          <button class="cpub-post-action-btn" :class="{ active: liked }" :disabled="liking" @click="handleLike" :title="isAuthenticated ? (liked ? 'Unlike' : 'Like') : 'Log in to like'">
+            <i :class="liked ? 'fa-solid fa-heart' : 'fa-regular fa-heart'"></i>
+            {{ likeCount }}
+          </button>
+          <span class="cpub-post-action-btn" style="cursor: default">
+            <i class="fa-solid fa-comment"></i> {{ replyCount }}
+          </span>
+        </div>
+      </div>
+    </article>
+
+    <!-- Reply form -->
+    <div v-if="isAuthenticated" class="cpub-reply-form">
+      <div class="cpub-reply-row">
+        <input
+          v-model="replyContent"
+          class="cpub-reply-input"
+          type="text"
+          placeholder="Write a reply (sent via federation)..."
+          @keydown.enter="handleReply"
+        />
+        <button class="cpub-btn cpub-btn-sm cpub-btn-primary" :disabled="replying || !replyContent.trim()" @click="handleReply">
+          <i class="fa-solid fa-paper-plane"></i> Reply
+        </button>
+      </div>
+      <p class="cpub-fed-reply-hint">
+        <i class="fa-solid fa-globe"></i> Your reply will be sent to {{ hub?.originDomain }} via ActivityPub
+      </p>
+    </div>
+
+    <!-- Empty state for replies -->
+    <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-desc">
+          Reply threads live on <strong>{{ hub?.originDomain }}</strong>.
+          <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>
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div v-else class="cpub-loading" style="padding: 64px 24px; text-align: center">Loading post...</div>
+</template>
+
+<style scoped>
+.cpub-post-page { max-width: 800px; margin: 0 auto; padding: 0 16px 40px; }
+
+.cpub-fed-banner { background: var(--accent-bg); border-bottom: 1px solid var(--accent-border); margin: 0 -16px 16px; }
+.cpub-fed-banner-inner {
+  max-width: 800px; margin: 0 auto; padding: 8px 16px;
+  display: flex; align-items: center; gap: 8px;
+  font-size: 12px; color: var(--text-dim);
+}
+.cpub-fed-banner-inner > i { color: var(--accent); flex-shrink: 0; }
+.cpub-fed-banner-link {
+  margin-left: auto; color: var(--accent); font-weight: 600;
+  text-decoration: none; white-space: nowrap;
+  display: flex; align-items: center; gap: 4px; font-size: 11px;
+}
+.cpub-fed-banner-link:hover { text-decoration: underline; }
+
+.cpub-post-breadcrumb { margin-bottom: 16px; }
+.cpub-breadcrumb-link {
+  font-size: 13px; color: var(--text-dim); text-decoration: none;
+  display: inline-flex; align-items: center; gap: 6px;
+}
+.cpub-breadcrumb-link:hover { color: var(--accent); }
+
+.cpub-post-card {
+  background: var(--surface); border: var(--border-width-default) solid var(--border);
+  padding: 20px; margin-bottom: 16px;
+}
+
+.cpub-post-pin {
+  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
+  letter-spacing: 0.05em; color: var(--accent); margin-bottom: 8px;
+}
+
+.cpub-post-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
+
+.cpub-post-type-badge {
+  display: inline-block; padding: 2px 8px; font-family: var(--font-mono);
+  font-size: 10px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.05em; color: var(--accent); background: var(--accent-bg);
+  border: 1px solid var(--accent-border);
+}
+
+.cpub-post-content {
+  font-size: 15px; line-height: 1.7; color: var(--text);
+  margin-bottom: 16px; white-space: pre-wrap;
+}
+
+.cpub-post-meta {
+  display: flex; align-items: center; justify-content: space-between;
+  flex-wrap: wrap; gap: 8px;
+}
+
+.cpub-post-author { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-faint); }
+
+.cpub-post-avatar {
+  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
+  background: var(--surface2); border: 1px solid var(--border);
+  font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--text-dim);
+  border-radius: 50%; overflow: hidden;
+}
+.cpub-post-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+
+.cpub-post-author-name { font-weight: 500; color: var(--text-dim); }
+.cpub-post-handle { color: var(--text-faint); font-size: 11px; }
+.cpub-post-sep { color: var(--text-faint); }
+.cpub-post-time { color: var(--text-faint); }
+
+.cpub-post-actions { display: flex; align-items: center; gap: 12px; }
+
+.cpub-post-action-btn {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 12px; color: var(--text-faint); background: none; border: none; cursor: pointer;
+  padding: 4px 8px; border: 1px solid var(--border); transition: all 0.1s;
+}
+.cpub-post-action-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-border); }
+.cpub-post-action-btn.active { color: var(--red); border-color: var(--red); }
+.cpub-post-action-btn:disabled { opacity: 0.5; cursor: default; }
+
+/* Reply form */
+.cpub-reply-form { margin-bottom: 16px; }
+.cpub-reply-row { display: flex; gap: 8px; }
+.cpub-reply-input {
+  flex: 1; padding: 8px 12px; background: var(--surface); border: var(--border-width-default) solid var(--border);
+  color: var(--text); font-size: 13px;
+}
+.cpub-reply-input:focus { outline: none; border-color: var(--accent); }
+
+.cpub-fed-reply-hint {
+  font-size: 11px; color: var(--text-faint); margin-top: 6px;
+  display: flex; align-items: center; gap: 5px;
+}
+.cpub-fed-reply-hint i { font-size: 10px; color: var(--accent); }
+
+/* Replies section */
+.cpub-replies-section {}
+.cpub-empty-state { text-align: center; }
+.cpub-empty-state-title { font-size: 14px; font-weight: 600; color: var(--text-dim); margin-bottom: 4px; }
+.cpub-empty-state-desc { font-size: 12px; color: var(--text-faint); line-height: 1.5; }
+.cpub-inline-link { color: var(--accent); text-decoration: none; white-space: nowrap; }
+.cpub-inline-link:hover { text-decoration: underline; }
+
+.cpub-loading { color: var(--text-dim); }
+
+@media (max-width: 768px) {
+  .cpub-post-page { padding: 0 12px 32px; }
+  .cpub-fed-banner { margin: 0 -12px 12px; }
+  .cpub-post-card { padding: 16px; }
+  .cpub-post-content { font-size: 14px; }
+  .cpub-post-meta { flex-direction: column; align-items: flex-start; }
+  .cpub-post-author { flex-wrap: wrap; }
+  .cpub-reply-row { flex-direction: column; }
+  .cpub-reply-input { width: 100%; }
+}
+</style>