@commonpub/layer 0.3.26 → 0.3.28

package/README.md

@@ -65,7 +65,7 @@ API routes for all CommonPub features, auth middleware, federation endpoints, an
 
 ### Theme
 
-CSS custom properties with 4 built-in themes (base, deepwood, hackbuild, deveco). Override with your own `theme.css`.
+CSS custom properties with 3 built-in themes (base, dark, generics). Consumer apps override with their own `theme.css`.
 
 ## Customization
 

package/components/FeedItem.vue

@@ -17,6 +17,13 @@ const props = defineProps<{
 
 const emit = defineEmits<{ vote: [] }>();
 
+/** Strip HTML tags for safe plain-text preview */
+function stripHtml(html: string): string {
+  return html.replace(/<[^>]*>/g, '').trim();
+}
+
+const previewText = computed(() => stripHtml(props.body));
+
 const typeBadgeClass = computed((): string => {
   const map: Record<string, string> = {
     discussion: 'cpub-feed-badge-accent',
@@ -55,7 +62,7 @@ const formattedDate = computed((): string => {
 
       <h3 class="cpub-feed-item-title">{{ title }}</h3>
 
-      <p class="cpub-feed-item-preview">{{ body }}</p>
+      <p class="cpub-feed-item-preview">{{ previewText }}</p>
 
       <div class="cpub-feed-item-meta">
         <div class="cpub-feed-item-author">

package/components/__tests__/FederatedContentCard.test.ts

@@ -0,0 +1,340 @@
+/**
+ * Component tests for FederatedContentCard.
+ *
+ * Tests rendering of federated content from CommonPub and non-CommonPub sources,
+ * computed properties (typeLabel, actorHandle, timeAgo), event emission, and
+ * conditional rendering (avatar, cover image, tags, title link).
+ */
+import { describe, it, expect } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/vue';
+import { defineComponent, h } from 'vue';
+import FederatedContentCard from '../FederatedContentCard.vue';
+
+// Stub NuxtLink as a plain <a> tag
+const NuxtLink = defineComponent({
+  name: 'NuxtLink',
+  props: { to: String },
+  setup(props, { slots }) {
+    return () => h('a', { href: props.to }, slots.default?.());
+  },
+});
+
+const stubs = { NuxtLink };
+
+function makeContent(overrides: Record<string, unknown> = {}) {
+  return {
+    id: 'fed-1',
+    objectUri: 'https://remote.example.com/content/test',
+    apType: 'Article',
+    title: 'LED Cube Build',
+    content: '<p>Build a 4x4x4 LED cube</p>',
+    summary: '<p>A <strong>complete</strong> LED cube tutorial</p>',
+    url: 'https://remote.example.com/project/led-cube',
+    coverImageUrl: null,
+    tags: [],
+    attachments: [],
+    inReplyTo: null,
+    cpubType: 'project',
+    cpubMetadata: null,
+    cpubBlocks: null,
+    localLikeCount: 5,
+    localCommentCount: 2,
+    localViewCount: 100,
+    publishedAt: new Date(Date.now() - 3600000).toISOString(), // 1 hour ago
+    receivedAt: new Date().toISOString(),
+    originDomain: 'remote.example.com',
+    actor: {
+      actorUri: 'https://remote.example.com/users/alice',
+      preferredUsername: 'alice',
+      displayName: 'Alice Builder',
+      avatarUrl: 'https://remote.example.com/avatars/alice.png',
+      instanceDomain: 'remote.example.com',
+    },
+    ...overrides,
+  };
+}
+
+describe('FederatedContentCard', () => {
+  // --- Basic rendering ---
+
+  it('renders title', () => {
+    render(FederatedContentCard, {
+      props: { content: makeContent() },
+      global: { stubs },
+    });
+    expect(screen.getByText('LED Cube Build')).toBeInTheDocument();
+  });
+
+  it('renders actor name and handle', () => {
+    render(FederatedContentCard, {
+      props: { content: makeContent() },
+      global: { stubs },
+    });
+    expect(screen.getByText('Alice Builder')).toBeInTheDocument();
+    expect(screen.getByText('@alice@remote.example.com')).toBeInTheDocument();
+  });
+
+  it('renders origin domain badge', () => {
+    render(FederatedContentCard, {
+      props: { content: makeContent() },
+      global: { stubs },
+    });
+    expect(screen.getByText('remote.example.com')).toBeInTheDocument();
+  });
+
+  it('strips HTML from summary', () => {
+    render(FederatedContentCard, {
+      props: { content: makeContent() },
+      global: { stubs },
+    });
+    const summary = screen.getByText('A complete LED cube tutorial');
+    expect(summary).toBeInTheDocument();
+    // Should NOT contain HTML tags
+    expect(summary.innerHTML).not.toContain('<strong>');
+    expect(summary.innerHTML).not.toContain('<p>');
+  });
+
+  // --- Type label computed ---
+
+  it('shows cpubType as type badge when present', () => {
+    render(FederatedContentCard, {
+      props: { content: makeContent({ cpubType: 'project' }) },
+      global: { stubs },
+    });
+    expect(screen.getByText('project')).toBeInTheDocument();
+  });
+
+  it('shows "article" for AP Article without cpubType', () => {
+    render(FederatedContentCard, {
+      props: { content: makeContent({ cpubType: null, apType: 'Article' }) },
+      global: { stubs },
+    });
+    expect(screen.getByText('article')).toBeInTheDocument();
+  });
+
+  it('shows "post" for AP Note without cpubType', () => {
+    render(FederatedContentCard, {
+      props: { content: makeContent({ cpubType: null, apType: 'Note' }) },
+      global: { stubs },
+    });
+    expect(screen.getByText('post')).toBeInTheDocument();
+  });
+
+  // --- Avatar rendering ---
+
+  it('renders avatar image when actor has avatarUrl', () => {
+    render(FederatedContentCard, {
+      props: { content: makeContent() },
+      global: { stubs },
+    });
+    const img = screen.getByAltText('Alice Builder avatar');
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute('src', 'https://remote.example.com/avatars/alice.png');
+  });
+
+  it('renders placeholder when actor has no avatarUrl', () => {
+    const { container } = render(FederatedContentCard, {
+      props: {
+        content: makeContent({
+          actor: {
+            actorUri: 'https://remote.example.com/users/bob',
+            preferredUsername: 'bob',
+            displayName: 'Bob',
+            avatarUrl: null,
+            instanceDomain: 'remote.example.com',
+          },
+        }),
+      },
+      global: { stubs },
+    });
+    const placeholder = container.querySelector('.cpub-fed-card__avatar--placeholder');
+    expect(placeholder).toBeInTheDocument();
+    expect(placeholder?.textContent).toBe('B');
+  });
+
+  // --- Cover image ---
+
+  it('renders cover image through proxy when coverImageUrl present', () => {
+    const { container } = render(FederatedContentCard, {
+      props: {
+        content: makeContent({
+          coverImageUrl: 'https://remote.example.com/img/cover.jpg',
+        }),
+      },
+      global: { stubs },
+    });
+    const cover = container.querySelector('.cpub-fed-card__cover img');
+    expect(cover).toBeInTheDocument();
+    expect(cover?.getAttribute('src')).toContain('/api/image-proxy');
+    expect(cover?.getAttribute('src')).toContain(encodeURIComponent('https://remote.example.com/img/cover.jpg'));
+  });
+
+  it('does not render cover image when coverImageUrl is null', () => {
+    const { container } = render(FederatedContentCard, {
+      props: { content: makeContent({ coverImageUrl: null }) },
+      global: { stubs },
+    });
+    expect(container.querySelector('.cpub-fed-card__cover')).not.toBeInTheDocument();
+  });
+
+  // --- Tags ---
+
+  it('renders tags when present', () => {
+    render(FederatedContentCard, {
+      props: {
+        content: makeContent({
+          tags: [
+            { type: 'Hashtag', name: '#electronics' },
+            { type: 'Hashtag', name: '#led' },
+          ],
+        }),
+      },
+      global: { stubs },
+    });
+    expect(screen.getByText('#electronics')).toBeInTheDocument();
+    expect(screen.getByText('#led')).toBeInTheDocument();
+  });
+
+  it('limits tags to 5', () => {
+    const tags = Array.from({ length: 8 }, (_, i) => ({
+      type: 'Hashtag',
+      name: `#tag${i}`,
+    }));
+    const { container } = render(FederatedContentCard, {
+      props: { content: makeContent({ tags }) },
+      global: { stubs },
+    });
+    const tagElements = container.querySelectorAll('.cpub-fed-card__tag');
+    expect(tagElements.length).toBe(5);
+  });
+
+  it('hides tags section when empty', () => {
+    const { container } = render(FederatedContentCard, {
+      props: { content: makeContent({ tags: [] }) },
+      global: { stubs },
+    });
+    expect(container.querySelector('.cpub-fed-card__tags')).not.toBeInTheDocument();
+  });
+
+  // --- Like count ---
+
+  it('shows like count when > 0', () => {
+    render(FederatedContentCard, {
+      props: { content: makeContent({ localLikeCount: 5 }) },
+      global: { stubs },
+    });
+    expect(screen.getByLabelText('Like this project')).toHaveTextContent('5 Like');
+  });
+
+  it('hides like count when 0', () => {
+    render(FederatedContentCard, {
+      props: { content: makeContent({ localLikeCount: 0 }) },
+      global: { stubs },
+    });
+    expect(screen.getByLabelText('Like this project')).toHaveTextContent('Like');
+    expect(screen.getByLabelText('Like this project').textContent?.trim()).toBe('Like');
+  });
+
+  // --- Events ---
+
+  it('emits like event with content id', async () => {
+    const { emitted } = render(FederatedContentCard, {
+      props: { content: makeContent() },
+      global: { stubs },
+    });
+    await fireEvent.click(screen.getByLabelText('Like this project'));
+    expect(emitted().like).toBeTruthy();
+    expect(emitted().like[0]).toEqual(['fed-1']);
+  });
+
+  it('emits boost event with content id', async () => {
+    const { emitted } = render(FederatedContentCard, {
+      props: { content: makeContent() },
+      global: { stubs },
+    });
+    await fireEvent.click(screen.getByLabelText('Boost this project'));
+    expect(emitted().boost).toBeTruthy();
+    expect(emitted().boost[0]).toEqual(['fed-1']);
+  });
+
+  // --- Title link ---
+
+  it('renders title as link when url is present', () => {
+    render(FederatedContentCard, {
+      props: { content: makeContent() },
+      global: { stubs },
+    });
+    const link = screen.getByText('LED Cube Build').closest('a');
+    expect(link).toHaveAttribute('href', 'https://remote.example.com/project/led-cube');
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+
+  it('renders title as plain text when url is null', () => {
+    render(FederatedContentCard, {
+      props: { content: makeContent({ url: null }) },
+      global: { stubs },
+    });
+    const title = screen.getByText('LED Cube Build');
+    expect(title.tagName).toBe('SPAN');
+  });
+
+  // --- View Original link ---
+
+  it('shows View Original link when url present', () => {
+    render(FederatedContentCard, {
+      props: { content: makeContent() },
+      global: { stubs },
+    });
+    const link = screen.getByText('View Original');
+    expect(link).toHaveAttribute('href', 'https://remote.example.com/project/led-cube');
+    expect(link).toHaveAttribute('rel', 'noopener');
+  });
+
+  it('hides View Original when no url', () => {
+    render(FederatedContentCard, {
+      props: { content: makeContent({ url: null }) },
+      global: { stubs },
+    });
+    expect(screen.queryByText('View Original')).not.toBeInTheDocument();
+  });
+
+  // --- Time ago ---
+
+  it('shows relative time for recent content', () => {
+    const { container } = render(FederatedContentCard, {
+      props: {
+        content: makeContent({
+          publishedAt: new Date(Date.now() - 30 * 60000).toISOString(),
+        }),
+      },
+      global: { stubs },
+    });
+    const time = container.querySelector('.cpub-fed-card__time');
+    expect(time?.textContent).toBe('30m');
+  });
+
+  it('shows hours for content from today', () => {
+    const { container } = render(FederatedContentCard, {
+      props: {
+        content: makeContent({
+          publishedAt: new Date(Date.now() - 5 * 3600000).toISOString(),
+        }),
+      },
+      global: { stubs },
+    });
+    const time = container.querySelector('.cpub-fed-card__time');
+    expect(time?.textContent).toBe('5h');
+  });
+
+  // --- Fallback values ---
+
+  it('shows Unknown when actor is null', () => {
+    render(FederatedContentCard, {
+      props: { content: makeContent({ actor: null }) },
+      global: { stubs },
+    });
+    // Both actorName and actorHandle render "Unknown" fallback
+    const unknowns = screen.getAllByText('Unknown');
+    expect(unknowns.length).toBeGreaterThanOrEqual(1);
+  });
+});

package/components/hub/HubDiscussions.vue

@@ -5,8 +5,15 @@ const props = defineProps<{
   posts: HubPostViewModel[]
 }>();
 
+function stripHtml(html: string): string {
+  return html.replace(/<[^>]*>/g, '').trim();
+}
+
 const discussionPosts = computed(() => {
-  return props.posts.filter((p) => p.type === 'text' || p.type === 'link' || p.type === 'discussion' || p.type === 'question');
+  return props.posts.filter((p) =>
+    (p.type === 'text' || p.type === 'link' || p.type === 'discussion' || p.type === 'question')
+    && !p.sharedContent,
+  );
 });
 </script>
 
@@ -18,7 +25,7 @@ const discussionPosts = computed(() => {
     <template v-for="post in discussionPosts" :key="post.id">
       <NuxtLink v-if="post.linkTo" :to="post.linkTo" class="cpub-feed-link">
         <DiscussionItem
-          :title="post.content?.slice(0, 80) || 'Untitled'"
+          :title="stripHtml(post.content || '').slice(0, 80) || 'Untitled'"
           :author="post.author.name"
           :reply-count="post.replyCount"
           :vote-count="post.likeCount"
@@ -26,7 +33,7 @@ const discussionPosts = computed(() => {
       </NuxtLink>
       <div v-else>
         <DiscussionItem
-          :title="post.content?.slice(0, 80) || 'Untitled'"
+          :title="stripHtml(post.content || '').slice(0, 80) || 'Untitled'"
           :author="post.author.name"
           :reply-count="post.replyCount"
           :vote-count="post.likeCount"

package/components/hub/HubFeed.vue

@@ -9,6 +9,11 @@ const props = defineProps<{
 
 const emit = defineEmits<{ 'post-vote': [postId: string] }>();
 
+/** Strip HTML tags for plain-text display in feed items */
+function stripHtml(html: string): string {
+  return html.replace(/<[^>]*>/g, '').trim();
+}
+
 const feedFilter = ref('all');
 
 const feedFilters = [
@@ -30,8 +35,8 @@ const filteredPosts = computed(() => {
   <AnnouncementBand
     v-for="post in filteredPosts.filter(p => p.isPinned && p.type === 'announcement')"
     :key="`ann-${post.id}`"
-    :title="post.content?.slice(0, 80) || 'Announcement'"
-    :body="post.content || ''"
+    :title="stripHtml(post.content || '').slice(0, 80) || 'Announcement'"
+    :body="stripHtml(post.content || '')"
     :author="post.author.name"
     :created-at="new Date(post.createdAt)"
     :pinned="true"
@@ -105,7 +110,7 @@ const filteredPosts = computed(() => {
         <NuxtLink v-if="post.linkTo" :to="post.linkTo" class="cpub-feed-link">
           <FeedItem
             :type="(post.type as 'discussion' | 'question' | 'showcase' | 'announcement') || 'discussion'"
-            :title="post.content?.slice(0, 80) || ''"
+            :title="stripHtml(post.content || '').slice(0, 80) || ''"
             :author="post.author.name"
             :author-avatar="post.author.avatarUrl ?? undefined"
             :author-handle="post.author.handle ?? undefined"
@@ -123,7 +128,7 @@ const filteredPosts = computed(() => {
         <div v-else>
           <FeedItem
             :type="(post.type as 'discussion' | 'question' | 'showcase' | 'announcement') || 'discussion'"
-            :title="post.content?.slice(0, 80) || ''"
+            :title="stripHtml(post.content || '').slice(0, 80) || ''"
             :author="post.author.name"
             :author-avatar="post.author.avatarUrl ?? undefined"
             :author-handle="post.author.handle ?? undefined"

package/composables/__tests__/useMirrorContent.test.ts

@@ -0,0 +1,208 @@
+/**
+ * Unit tests for useMirrorContent composable.
+ *
+ * Tests the contentType resolution logic which determines how federated
+ * content is displayed — critical for distinguishing CommonPub vs non-CommonPub
+ * content types.
+ */
+import { describe, it, expect } from 'vitest';
+import { ref, nextTick } from 'vue';
+import { useMirrorContent } from '../useMirrorContent';
+
+function makeFedContent(overrides: Record<string, unknown> = {}) {
+  return {
+    id: 'fed-1',
+    objectUri: 'https://remote.example.com/content/test',
+    apType: 'Article',
+    cpubType: null,
+    title: 'Test Content',
+    content: '<p>Hello world</p>',
+    summary: 'A test',
+    url: 'https://remote.example.com/article/test',
+    coverImageUrl: null,
+    tags: [],
+    attachments: [],
+    cpubMetadata: null,
+    cpubBlocks: null,
+    localLikeCount: 0,
+    localCommentCount: 0,
+    localViewCount: 0,
+    publishedAt: '2026-03-20T10:00:00Z',
+    receivedAt: '2026-03-20T11:00:00Z',
+    originDomain: 'remote.example.com',
+    actor: {
+      actorUri: 'https://remote.example.com/users/alice',
+      preferredUsername: 'alice',
+      displayName: 'Alice',
+      avatarUrl: null,
+      instanceDomain: 'remote.example.com',
+    },
+    ...overrides,
+  };
+}
+
+describe('useMirrorContent', () => {
+  // --- contentType resolution ---
+
+  describe('contentType', () => {
+    it('returns cpubType when present (CommonPub project)', () => {
+      const fedContent = ref(makeFedContent({ cpubType: 'project' }));
+      const { contentType } = useMirrorContent(fedContent);
+      expect(contentType.value).toBe('project');
+    });
+
+    it('returns cpubType when present (CommonPub article)', () => {
+      const fedContent = ref(makeFedContent({ cpubType: 'article' }));
+      const { contentType } = useMirrorContent(fedContent);
+      expect(contentType.value).toBe('article');
+    });
+
+    it('returns cpubType when present (CommonPub blog)', () => {
+      const fedContent = ref(makeFedContent({ cpubType: 'blog' }));
+      const { contentType } = useMirrorContent(fedContent);
+      expect(contentType.value).toBe('blog');
+    });
+
+    it('returns cpubType when present (CommonPub explainer)', () => {
+      const fedContent = ref(makeFedContent({ cpubType: 'explainer' }));
+      const { contentType } = useMirrorContent(fedContent);
+      expect(contentType.value).toBe('explainer');
+    });
+
+    it('falls back to apType lowercase for non-CommonPub Article', () => {
+      const fedContent = ref(makeFedContent({ cpubType: null, apType: 'Article' }));
+      const { contentType } = useMirrorContent(fedContent);
+      expect(contentType.value).toBe('article');
+    });
+
+    it('falls back to apType lowercase for Note', () => {
+      const fedContent = ref(makeFedContent({ cpubType: null, apType: 'Note' }));
+      const { contentType } = useMirrorContent(fedContent);
+      expect(contentType.value).toBe('note');
+    });
+
+    it('falls back to "article" when both cpubType and apType are null', () => {
+      const fedContent = ref(makeFedContent({ cpubType: null, apType: null }));
+      const { contentType } = useMirrorContent(fedContent);
+      expect(contentType.value).toBe('article');
+    });
+
+    it('prefers cpubType over apType', () => {
+      const fedContent = ref(makeFedContent({ cpubType: 'project', apType: 'Article' }));
+      const { contentType } = useMirrorContent(fedContent);
+      expect(contentType.value).toBe('project');
+    });
+  });
+
+  // --- transformedContent ---
+
+  describe('transformedContent', () => {
+    it('returns null when fedContent is null', () => {
+      const fedContent = ref(null);
+      const { transformedContent } = useMirrorContent(fedContent);
+      expect(transformedContent.value).toBeNull();
+    });
+
+    it('maps title correctly', () => {
+      const fedContent = ref(makeFedContent({ title: 'LED Cube Build' }));
+      const { transformedContent } = useMirrorContent(fedContent);
+      expect(transformedContent.value?.title).toBe('LED Cube Build');
+    });
+
+    it('uses "Untitled" when title is null', () => {
+      const fedContent = ref(makeFedContent({ title: null }));
+      const { transformedContent } = useMirrorContent(fedContent);
+      expect(transformedContent.value?.title).toBe('Untitled');
+    });
+
+    it('preserves cpubBlocks when present (CommonPub-to-CommonPub)', () => {
+      const blocks = [['paragraph', { text: 'Hello' }], ['heading', { level: 2, text: 'World' }]];
+      const fedContent = ref(makeFedContent({ cpubBlocks: blocks }));
+      const { transformedContent } = useMirrorContent(fedContent);
+      expect(transformedContent.value?.content).toEqual(blocks);
+    });
+
+    it('wraps HTML content as paragraph block (non-CommonPub)', () => {
+      const fedContent = ref(makeFedContent({
+        cpubBlocks: null,
+        content: '<p>Hello from Mastodon</p>',
+      }));
+      const { transformedContent } = useMirrorContent(fedContent);
+      expect(transformedContent.value?.content).toEqual([
+        ['paragraph', { html: '<p>Hello from Mastodon</p>' }],
+      ]);
+    });
+
+    it('extracts metadata from cpubMetadata', () => {
+      const fedContent = ref(makeFedContent({
+        cpubType: 'project',
+        cpubMetadata: { difficulty: 'intermediate', buildTime: '4h', estimatedCost: '$50' },
+      }));
+      const { transformedContent } = useMirrorContent(fedContent);
+      expect(transformedContent.value?.difficulty).toBe('intermediate');
+      expect(transformedContent.value?.buildTime).toBe('4h');
+      expect(transformedContent.value?.estimatedCost).toBe('$50');
+    });
+
+    it('maps tags to expected format', () => {
+      const fedContent = ref(makeFedContent({
+        tags: [
+          { type: 'Hashtag', name: '#electronics' },
+          { type: 'Hashtag', name: '#led' },
+        ],
+      }));
+      const { transformedContent } = useMirrorContent(fedContent);
+      expect(transformedContent.value?.tags).toHaveLength(2);
+      expect(transformedContent.value?.tags[0]?.name).toBe('#electronics');
+    });
+
+    it('maps actor to author format', () => {
+      const fedContent = ref(makeFedContent({
+        actor: {
+          actorUri: 'https://remote.example.com/users/bob',
+          preferredUsername: 'bob',
+          displayName: 'Bob Builder',
+          avatarUrl: 'https://remote.example.com/avatar.png',
+          instanceDomain: 'remote.example.com',
+          followerCount: 42,
+        },
+      }));
+      const { transformedContent } = useMirrorContent(fedContent);
+      expect(transformedContent.value?.author.username).toBe('bob');
+      expect(transformedContent.value?.author.displayName).toBe('Bob Builder');
+      expect(transformedContent.value?.author.avatarUrl).toBe('https://remote.example.com/avatar.png');
+    });
+  });
+
+  // --- originDomain ---
+
+  describe('originDomain', () => {
+    it('extracts origin domain', () => {
+      const fedContent = ref(makeFedContent({ originDomain: 'mastodon.social' }));
+      const { originDomain } = useMirrorContent(fedContent);
+      expect(originDomain.value).toBe('mastodon.social');
+    });
+
+    it('falls back to "unknown" when null', () => {
+      const fedContent = ref(makeFedContent({ originDomain: null }));
+      const { originDomain } = useMirrorContent(fedContent);
+      expect(originDomain.value).toBe('unknown');
+    });
+  });
+
+  // --- authorHandle ---
+
+  describe('authorHandle', () => {
+    it('formats as @user@domain', () => {
+      const fedContent = ref(makeFedContent());
+      const { authorHandle } = useMirrorContent(fedContent);
+      expect(authorHandle.value).toBe('@alice@remote.example.com');
+    });
+
+    it('returns empty string when no actor', () => {
+      const fedContent = ref(makeFedContent({ actor: null }));
+      const { authorHandle } = useMirrorContent(fedContent);
+      expect(authorHandle.value).toBe('');
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.3.26",
+  "version": "0.3.28",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -44,15 +44,22 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/auth": "0.5.0",
     "@commonpub/config": "0.7.1",
     "@commonpub/protocol": "0.9.5",
-    "@commonpub/docs": "0.5.2",
-    "@commonpub/learning": "0.5.0",
+    "@commonpub/auth": "0.5.0",
     "@commonpub/editor": "0.5.0",
-    "@commonpub/server": "2.15.0",
-    "@commonpub/ui": "0.7.1",
-    "@commonpub/schema": "0.8.12"
+    "@commonpub/learning": "0.5.0",
+    "@commonpub/schema": "0.8.13",
+    "@commonpub/server": "2.16.0",
+    "@commonpub/docs": "0.5.2",
+    "@commonpub/ui": "0.7.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/vue": "^8.1.0",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "jsdom": "^25.0.1",
+    "vitest": "^3.2.4"
   },
   "scripts": {}
 }

package/pages/auth/oauth/authorize.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 definePageMeta({
   layout: 'auth',
-  middleware: 'auth',
+  // No middleware: 'auth' — this page must be accessible to unauthenticated users
+  // arriving from remote instances during federated OAuth login
 });
 
 useHead({ title: 'Authorize Application' });
 
 const route = useRoute();
+const { isAuthenticated, signIn } = useAuth();
 
 const clientId = computed(() => route.query.client_id as string ?? '');
 const redirectUri = computed(() => route.query.redirect_uri as string ?? '');
@@ -17,6 +19,25 @@ const state = computed(() => route.query.state as string ?? '');
 const loading = ref(false);
 const error = ref<string | null>(null);
 
+// Login form state (shown when not authenticated)
+const loginEmail = ref('');
+const loginPassword = ref('');
+const loginLoading = ref(false);
+const loginError = ref<string | null>(null);
+
+async function handleLogin() {
+  loginLoading.value = true;
+  loginError.value = null;
+  try {
+    await signIn(loginEmail.value, loginPassword.value);
+    // After login, stay on this page — consent form will appear
+  } catch (err: unknown) {
+    loginError.value = err instanceof Error ? err.message : 'Login failed';
+  } finally {
+    loginLoading.value = false;
+  }
+}
+
 async function approve() {
   loading.value = true;
   error.value = null;
@@ -48,47 +69,111 @@ function deny() {
     window.location.href = url.toString();
   }
 }
+
+// Extract requesting domain from client_id for display
+const requestingDomain = computed(() => {
+  const id = clientId.value;
+  if (id.startsWith('cpub_')) return id.slice(5);
+  try { return new URL(id).hostname; } catch { return id; }
+});
 </script>
 
 <template>
   <div class="cpub-oauth-consent">
-    <h1 class="cpub-oauth-consent__title">Authorize Access</h1>
+    <!-- Unauthenticated: show login form with context -->
+    <template v-if="!isAuthenticated">
+      <h1 class="cpub-oauth-consent__title">Sign in to Continue</h1>
+
+      <p class="cpub-oauth-consent__desc">
+        <strong>{{ requestingDomain }}</strong> is requesting access to your account.
+        Sign in to review and approve this request.
+      </p>
+
+      <form class="cpub-oauth-login-form" @submit.prevent="handleLogin">
+        <div v-if="loginError" class="cpub-oauth-consent__error" role="alert">
+          {{ loginError }}
+        </div>
+
+        <label class="cpub-oauth-login-label">
+          <span>Email</span>
+          <input
+            v-model="loginEmail"
+            type="email"
+            autocomplete="email"
+            required
+            class="cpub-oauth-login-input"
+          />
+        </label>
+
+        <label class="cpub-oauth-login-label">
+          <span>Password</span>
+          <input
+            v-model="loginPassword"
+            type="password"
+            autocomplete="current-password"
+            required
+            class="cpub-oauth-login-input"
+          />
+        </label>
+
+        <button
+          type="submit"
+          class="cpub-oauth-consent__btn cpub-oauth-consent__btn--approve"
+          :disabled="loginLoading"
+        >
+          {{ loginLoading ? 'Signing in...' : 'Sign in' }}
+        </button>
+      </form>
 
-    <p class="cpub-oauth-consent__desc">
-      An application is requesting access to your account.
-    </p>
+      <p class="cpub-oauth-login-alt">
+        Don't have an account? <NuxtLink :to="`/auth/register?redirect=${encodeURIComponent(route.fullPath)}`">Sign up</NuxtLink>
+      </p>
+    </template>
 
-    <div class="cpub-oauth-consent__details">
-      <div class="cpub-oauth-consent__field">
-        <span class="cpub-oauth-consent__label">Client</span>
-        <span class="cpub-oauth-consent__value">{{ clientId }}</span>
+    <!-- Authenticated: show consent form -->
+    <template v-else>
+      <h1 class="cpub-oauth-consent__title">Authorize Access</h1>
+
+      <p class="cpub-oauth-consent__desc">
+        <strong>{{ requestingDomain }}</strong> is requesting access to your account.
+      </p>
+
+      <div class="cpub-oauth-consent__details">
+        <div class="cpub-oauth-consent__field">
+          <span class="cpub-oauth-consent__label">Instance</span>
+          <span class="cpub-oauth-consent__value">{{ requestingDomain }}</span>
+        </div>
+        <div v-if="scope" class="cpub-oauth-consent__field">
+          <span class="cpub-oauth-consent__label">Scope</span>
+          <span class="cpub-oauth-consent__value">{{ scope }}</span>
+        </div>
       </div>
-      <div v-if="scope" class="cpub-oauth-consent__field">
-        <span class="cpub-oauth-consent__label">Scope</span>
-        <span class="cpub-oauth-consent__value">{{ scope }}</span>
+
+      <p class="cpub-oauth-consent__permissions">
+        This will allow <strong>{{ requestingDomain }}</strong> to verify your identity and access your public profile information.
+      </p>
+
+      <div v-if="error" class="cpub-oauth-consent__error" role="alert">
+        {{ error }}
       </div>
-    </div>
-
-    <div v-if="error" class="cpub-oauth-consent__error" role="alert">
-      {{ error }}
-    </div>
-
-    <div class="cpub-oauth-consent__actions">
-      <button
-        class="cpub-oauth-consent__btn cpub-oauth-consent__btn--approve"
-        :disabled="loading"
-        @click="approve"
-      >
-        {{ loading ? 'Authorizing...' : 'Approve' }}
-      </button>
-      <button
-        class="cpub-oauth-consent__btn cpub-oauth-consent__btn--deny"
-        :disabled="loading"
-        @click="deny"
-      >
-        Deny
-      </button>
-    </div>
+
+      <div class="cpub-oauth-consent__actions">
+        <button
+          class="cpub-oauth-consent__btn cpub-oauth-consent__btn--approve"
+          :disabled="loading"
+          @click="approve"
+        >
+          {{ loading ? 'Authorizing...' : 'Approve' }}
+        </button>
+        <button
+          class="cpub-oauth-consent__btn cpub-oauth-consent__btn--deny"
+          :disabled="loading"
+          @click="deny"
+        >
+          Deny
+        </button>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -136,6 +221,15 @@ function deny() {
   color: var(--text-1);
 }
 
+.cpub-oauth-consent__permissions {
+  color: var(--text-2);
+  font-size: var(--font-size-sm);
+  margin-bottom: var(--space-4);
+  padding: var(--space-2) var(--space-3);
+  background: var(--surface-2);
+  border: var(--border-width-default) solid var(--border);
+}
+
 .cpub-oauth-consent__error {
   padding: var(--space-2) var(--space-3);
   border: var(--border-width-default) solid var(--error);
@@ -175,4 +269,46 @@ function deny() {
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+/* Login form styles */
+.cpub-oauth-login-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  margin-bottom: var(--space-4);
+}
+
+.cpub-oauth-login-label {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-2);
+}
+
+.cpub-oauth-login-input {
+  padding: var(--space-2);
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  color: var(--text-1);
+  font-size: var(--font-size-base);
+}
+
+.cpub-oauth-login-input:focus {
+  border-color: var(--accent);
+  outline: none;
+}
+
+.cpub-oauth-login-alt {
+  font-size: var(--font-size-sm);
+  color: var(--text-2);
+  text-align: center;
+}
+
+.cpub-oauth-login-alt a {
+  color: var(--accent);
+}
 </style>

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

@@ -90,13 +90,16 @@ const postsVM = computed<HubPostViewModel[]>(() => {
   });
 });
 
-// Extract shared content posts for "Projects" tab
+// Extract shared content posts for "Projects" tab — filter by type to avoid lumping discussions
 const sharedContentPosts = computed(() =>
-  postsVM.value.filter(p => p.sharedContent),
+  postsVM.value.filter(p => p.sharedContent?.type === 'project'),
 );
 
 const discussionPosts = computed(() =>
-  postsVM.value.filter(p => p.type === 'text' || p.type === 'discussion' || p.type === 'question'),
+  postsVM.value.filter(p =>
+    (p.type === 'text' || p.type === 'discussion' || p.type === 'question')
+    && !p.sharedContent,
+  ),
 );
 
 // Hub rules (from federated metadata)

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

@@ -87,9 +87,13 @@ async function handleReply(): Promise<void> {
   }
 }
 
+function stripHtml(html: string): string {
+  return html.replace(/<[^>]*>/g, '').trim();
+}
+
 useSeoMeta({
-  title: () => post.value ? `${post.value.content?.slice(0, 60)} — ${hub.value?.name ?? 'Hub'}` : 'Post',
-  description: () => post.value?.content?.slice(0, 160) ?? '',
+  title: () => post.value ? `${stripHtml(post.value.content || '').slice(0, 60)} — ${hub.value?.name ?? 'Hub'}` : 'Post',
+  description: () => stripHtml(post.value?.content ?? '').slice(0, 160),
 });
 
 useHead({
@@ -128,7 +132,9 @@ useHead({
         <span class="cpub-post-type-badge">{{ post.postType }}</span>
       </div>
 
-      <div class="cpub-post-content">{{ post.content }}</div>
+      <!-- Content is sanitized server-side via sanitizeHtml() before storage -->
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div class="cpub-post-content cpub-prose" v-html="post.content"></div>
 
       <div class="cpub-post-meta">
         <div class="cpub-post-author">

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

@@ -161,7 +161,7 @@ useSeoMeta({
         </div>
       </div>
       <div v-else class="cpub-post-content">
-        {{ post.content }}
+        <MentionText :text="post.content || ''" />
         <div v-if="post.updatedAt && post.updatedAt !== post.createdAt" class="cpub-post-edited">
           <i class="fa-solid fa-pen"></i> edited
         </div>

package/pages/search.vue

@@ -2,7 +2,7 @@
 import type { Serialized, ContentListItem, PaginatedResponse } from '@commonpub/server';
 
 useSeoMeta({
-  title: 'Search -- devEco.io',
+  title: `Search — ${useSiteName()}`,
   description: 'Search for projects, articles, people, and communities.',
 });
 

package/pages/settings/appearance.vue

@@ -3,8 +3,9 @@ definePageMeta({ middleware: 'auth' });
 
 const { themeId: theme, setTheme } = useTheme();
 const themes = [
-  { id: 'base', name: 'Light', desc: 'Sharp corners, offset shadows' },
-  { id: 'dark', name: 'Dark', desc: 'Dark surfaces, same aesthetic' },
+  { id: 'base', name: 'Light', desc: 'Sharp corners, offset shadows, blue accent' },
+  { id: 'dark', name: 'Dark', desc: 'Dark surfaces, same offset shadow aesthetic' },
+  { id: 'generics', name: 'Generics', desc: 'Dark minimal with soft glow' },
 ];
 </script>
 
@@ -35,7 +36,7 @@ const themes = [
 <style scoped>
 .cpub-theme-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   gap: 12px;
 }
 
@@ -74,7 +75,7 @@ const themes = [
   color: var(--text-dim);
 }
 
-@media (max-width: 480px) {
+@media (max-width: 640px) {
   .cpub-theme-grid { grid-template-columns: 1fr; }
 }
 </style>

package/server/plugins/federation-hub-sync.ts

@@ -6,6 +6,7 @@
 import {
   refreshFederatedHubMetadata,
   backfillHubFromOutbox,
+  fetchRemoteHubFollowers,
 } from '@commonpub/server';
 import { federatedHubs } from '@commonpub/schema';
 import { eq, and, or, lt, isNull } from 'drizzle-orm';
@@ -83,6 +84,19 @@ export default defineNitroPlugin((nitro) => {
           // Refresh metadata (name, description, icon, member count)
           await refreshFederatedHubMetadata(db, hub.id, hub.actorUri);
 
+          // Fetch followers to populate members list (first sync or periodic refresh)
+          if (!hub.lastSyncAt) {
+            // First sync — fetch followers to seed the members table
+            try {
+              const result = await fetchRemoteHubFollowers(db, hub.id, domain);
+              if (result.fetched > 0) {
+                console.log(`[hub-sync] Fetched ${result.fetched} followers for ${hub.name}`);
+              }
+            } catch (err) {
+              console.warn(`[hub-sync] Followers fetch failed for ${hub.name}:`, err instanceof Error ? err.message : err);
+            }
+          }
+
           // Optionally backfill new posts from outbox
           if (backfillOnSync) {
             const result = await backfillHubFromOutbox(db, hub.id, domain);

package/server/routes/content/[slug].ts

@@ -0,0 +1,71 @@
+import { contentToArticle } from '@commonpub/protocol';
+import { contentItems, users } from '@commonpub/schema';
+import { eq, and, isNull } from 'drizzle-orm';
+
+/**
+ * Content AP Article endpoint.
+ * Serves Article JSON-LD when requested with AP Accept header.
+ * Remote instances dereference this URI when processing:
+ * - Create activities (content federation)
+ * - Announce activities (hub share federation)
+ * - Like/Boost activities targeting content
+ */
+export default defineEventHandler(async (event) => {
+  const accept = getRequestHeader(event, 'accept') ?? '';
+  const isAPRequest =
+    accept.includes('application/activity+json') ||
+    accept.includes('application/ld+json');
+
+  if (!isAPRequest) return;
+
+  const config = useConfig();
+  if (!config.features.federation) return;
+
+  const slug = getRouterParam(event, 'slug');
+  if (!slug) return;
+
+  const db = useDB();
+  const domain = config.instance.domain;
+
+  const [row] = await db
+    .select({
+      content: contentItems,
+      author: {
+        username: users.username,
+        displayName: users.displayName,
+      },
+    })
+    .from(contentItems)
+    .innerJoin(users, eq(contentItems.authorId, users.id))
+    .where(and(
+      eq(contentItems.slug, slug),
+      eq(contentItems.status, 'published'),
+      isNull(contentItems.deletedAt),
+    ))
+    .limit(1);
+
+  if (!row) return;
+
+  setResponseHeader(event, 'content-type', 'application/activity+json');
+
+  // Render the content as an AP Article with all CommonPub extensions
+  const article = contentToArticle(
+    {
+      id: row.content.id,
+      type: row.content.type,
+      title: row.content.title,
+      slug: row.content.slug,
+      description: row.content.description,
+      content: typeof row.content.content === 'string'
+        ? row.content.content
+        : JSON.stringify(row.content.content),
+      coverImageUrl: row.content.coverImageUrl,
+      publishedAt: row.content.publishedAt,
+      updatedAt: row.content.updatedAt,
+    },
+    { username: row.author.username, displayName: row.author.displayName ?? row.author.username },
+    domain,
+  );
+
+  return article;
+});

package/server/routes/hubs/[slug]/posts/[postId].ts

@@ -33,8 +33,10 @@ export default defineEventHandler(async (event) => {
     .select({
       id: hubPosts.id,
       content: hubPosts.content,
+      type: hubPosts.type,
       createdAt: hubPosts.createdAt,
       authorUsername: users.username,
+      authorDisplayName: users.displayName,
     })
     .from(hubPosts)
     .innerJoin(users, eq(hubPosts.authorId, users.id))
@@ -49,15 +51,43 @@ export default defineEventHandler(async (event) => {
 
   setResponseHeader(event, 'content-type', 'application/activity+json');
 
+  // Build Note content — share posts need special handling
+  let noteContent = escapeHtmlForAP(post.content);
+  const ext: Record<string, unknown> = {};
+
+  if (post.type === 'share') {
+    try {
+      const shared = JSON.parse(post.content) as Record<string, unknown>;
+      ext['cpub:sharedContent'] = {
+        type: shared.type ?? 'article',
+        title: shared.title ?? '',
+        summary: shared.description ?? null,
+        coverImageUrl: shared.coverImageUrl ?? null,
+        originUrl: shared.slug
+          ? `https://${domain}/${shared.type}/${shared.slug}`
+          : null,
+        originDomain: domain,
+      };
+      const displayName = post.authorDisplayName ?? post.authorUsername;
+      const title = shared.title ? String(shared.title) : 'content';
+      noteContent = escapeHtmlForAP(`${displayName} shared: ${title}`);
+    } catch { /* fallback to raw content */ }
+  }
+
+  if (post.type && post.type !== 'text') {
+    ext['cpub:postType'] = post.type;
+  }
+
   return {
     '@context': AP_CONTEXT,
     type: 'Note',
     id: noteUri,
     attributedTo: actorUri,
-    content: escapeHtmlForAP(post.content),
+    content: noteContent,
     published: post.createdAt.toISOString(),
     to: [AP_PUBLIC],
     cc: [`${hubActorUri}/followers`],
     context: hubActorUri,
+    ...ext,
   };
 });