@commonpub/layer 0.3.18 → 0.3.19

package/components/MessageThread.vue

@@ -7,6 +7,7 @@ defineProps<{
     senderAvatarUrl?: string | null;
     body: string;
     createdAt: string;
+    readAt?: string | null;
   }>;
   currentUserId: string;
 }>();
@@ -39,9 +40,15 @@ function handleSend(): void {
           <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' }) }}
-        </time>
+        <div class="cpub-msg-meta">
+          <time class="cpub-msg-time">
+            {{ new Date(msg.createdAt).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }) }}
+          </time>
+          <span v-if="msg.senderId === currentUserId" class="cpub-msg-receipt" :class="{ 'cpub-msg-read': msg.readAt }" :title="msg.readAt ? `Read ${new Date(msg.readAt).toLocaleString()}` : 'Sent'">
+            <i :class="msg.readAt ? 'fa-solid fa-check-double' : 'fa-solid fa-check'" aria-hidden="true"></i>
+            <span class="sr-only">{{ msg.readAt ? 'Read' : 'Sent' }}</span>
+          </span>
+        </div>
       </div>
       <p v-if="!messages.length" class="cpub-thread-empty">No messages yet. Say hello!</p>
     </div>
@@ -125,17 +132,47 @@ function handleSend(): void {
   line-height: 1.5;
 }
 
-.cpub-msg.own .cpub-msg-bubble {
+.cpub-msg.cpub-msg-own .cpub-msg-bubble {
   background: var(--accent-bg);
-  border-color: var(--accent-border);
+  border-color: var(--accent-border, var(--border));
+}
+
+.cpub-msg-meta {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 2px;
+}
+
+.cpub-msg.cpub-msg-own .cpub-msg-meta {
+  justify-content: flex-end;
 }
 
 .cpub-msg-time {
   font-size: 9px;
   color: var(--text-faint);
   font-family: var(--font-mono);
-  margin-top: 2px;
-  display: block;
+}
+
+.cpub-msg-receipt {
+  font-size: 9px;
+  color: var(--text-faint);
+}
+
+.cpub-msg-receipt.cpub-msg-read {
+  color: var(--accent);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
 }
 
 .cpub-thread-empty {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.3.18",
+  "version": "0.3.19",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -44,15 +44,15 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/config": "0.7.0",
     "@commonpub/auth": "0.5.0",
     "@commonpub/docs": "0.5.2",
+    "@commonpub/config": "0.7.0",
     "@commonpub/editor": "0.5.0",
-    "@commonpub/protocol": "0.9.4",
     "@commonpub/learning": "0.5.0",
+    "@commonpub/protocol": "0.9.4",
+    "@commonpub/server": "2.13.0",
     "@commonpub/schema": "0.8.12",
-    "@commonpub/ui": "0.7.1",
-    "@commonpub/server": "2.12.1"
+    "@commonpub/ui": "0.7.1"
   },
   "scripts": {}
 }

package/pages/auth/login.vue

@@ -7,6 +7,7 @@ useSeoMeta({
 });
 
 const { signIn } = useAuth();
+const { federation } = useFeatures();
 const route = useRoute();
 
 const identity = ref('');
@@ -14,6 +15,18 @@ const password = ref('');
 const error = ref('');
 const loading = ref(false);
 
+// Federated login state
+const federatedDomain = ref('');
+const federatedLoading = ref(false);
+const federatedError = ref('');
+
+// Federated callback context — present when redirected back from OAuth callback.
+// Only an opaque linkToken is passed; the verified identity stays server-side.
+const federatedLinkToken = computed(() => {
+  if (route.query.federated !== 'true') return null;
+  return (route.query.linkToken as string) || null;
+});
+
 const redirectTo = computed(() => {
   const raw = (route.query.redirect as string) || '/';
   if (raw.startsWith('/') && !raw.startsWith('//')) return raw;
@@ -25,15 +38,27 @@ async function handleSubmit(): Promise<void> {
   loading.value = true;
 
   try {
-    // Step 1: Resolve username to email if needed (server-side)
-    const { email } = await $fetch<{ email: string }>('/api/resolve-identity', {
-      method: 'POST',
-      body: { identity: identity.value },
-    });
-
-    // Step 2: Sign in with Better Auth (sets cookies directly)
-    await signIn(email, password.value);
-    await navigateTo(redirectTo.value);
+    if (federatedLinkToken.value) {
+      // Linking flow: authenticate + link federated account in one step
+      await $fetch('/api/auth/federated/link', {
+        method: 'POST',
+        body: {
+          identity: identity.value,
+          password: password.value,
+          linkToken: federatedLinkToken.value,
+        },
+        credentials: 'include',
+      });
+      await navigateTo('/dashboard');
+    } else {
+      // Normal login flow
+      const { email } = await $fetch<{ email: string }>('/api/resolve-identity', {
+        method: 'POST',
+        body: { identity: identity.value },
+      });
+      await signIn(email, password.value);
+      await navigateTo(redirectTo.value);
+    }
   } catch (err: unknown) {
     const fetchErr = err as { statusCode?: number; data?: { message?: string; statusMessage?: string } };
     if (fetchErr?.statusCode === 503) {
@@ -45,12 +70,48 @@ async function handleSubmit(): Promise<void> {
     loading.value = false;
   }
 }
+
+async function handleFederatedLogin(): Promise<void> {
+  federatedError.value = '';
+  const domain = federatedDomain.value.trim().toLowerCase();
+  if (!domain) return;
+
+  federatedLoading.value = true;
+
+  try {
+    const result = await $fetch<{ authorizationUrl: string }>('/api/auth/federated/login', {
+      method: 'POST',
+      body: { instanceDomain: domain },
+    });
+    // Redirect to the remote instance's OAuth consent page
+    window.location.href = result.authorizationUrl;
+  } catch (err: unknown) {
+    const fetchErr = err as { statusCode?: number; data?: { message?: string; statusMessage?: string } };
+    if (fetchErr?.statusCode === 403) {
+      federatedError.value = `${domain} is not a trusted instance.`;
+    } else if (fetchErr?.statusCode === 502) {
+      federatedError.value = `Could not connect to ${domain}. Check the domain and try again.`;
+    } else {
+      federatedError.value = fetchErr?.data?.statusMessage || fetchErr?.data?.message || 'Failed to initiate federated login.';
+    }
+  } finally {
+    federatedLoading.value = false;
+  }
+}
 </script>
 
 <template>
   <div class="login-page">
     <h1 class="login-title">Log in</h1>
 
+    <!-- Federated context banner — shown when linking an account -->
+    <div v-if="federatedLinkToken" class="cpub-federated-banner" role="status">
+      <p class="cpub-federated-banner-text">
+        Link your federated identity to a local account.
+        Log in below to complete the link.
+      </p>
+    </div>
+
     <form class="login-form" @submit.prevent="handleSubmit" aria-label="Login form">
       <div v-if="error" class="form-error" role="alert">{{ error }}</div>
 
@@ -81,12 +142,44 @@ async function handleSubmit(): Promise<void> {
       </div>
 
       <button type="submit" class="submit-btn" :disabled="loading">
-        {{ loading ? 'Logging in...' : 'Log in' }}
+        {{ loading
+          ? 'Logging in...'
+          : federatedLinkToken
+            ? 'Log in & Link Account'
+            : 'Log in'
+        }}
       </button>
 
       <NuxtLink to="/auth/forgot-password" class="forgot-link">Forgot your password?</NuxtLink>
     </form>
 
+    <!-- Federated login section — only shown when federation is enabled -->
+    <div v-if="federation && !federatedLinkToken" class="cpub-federated-section">
+      <div class="cpub-federated-divider">
+        <span class="cpub-federated-divider-text">or</span>
+      </div>
+
+      <form class="cpub-federated-form" @submit.prevent="handleFederatedLogin" aria-label="Sign in with another instance">
+        <div v-if="federatedError" class="form-error" role="alert">{{ federatedError }}</div>
+
+        <label for="federated-domain" class="field-label">Sign in with another instance</label>
+        <div class="cpub-federated-input-group">
+          <input
+            id="federated-domain"
+            v-model="federatedDomain"
+            type="text"
+            class="field-input"
+            placeholder="instance.example.com"
+            required
+            autocomplete="off"
+          />
+          <button type="submit" class="cpub-federated-btn" :disabled="federatedLoading" aria-label="Sign in with remote instance">
+            {{ federatedLoading ? 'Connecting...' : 'Go' }}
+          </button>
+        </div>
+      </form>
+    </div>
+
     <p class="login-footer">
       Don't have an account?
       <NuxtLink to="/auth/register">Register</NuxtLink>
@@ -213,4 +306,91 @@ async function handleSubmit(): Promise<void> {
   color: var(--accent);
   text-decoration: underline;
 }
+
+/* Federated login */
+.cpub-federated-banner {
+  padding: var(--space-3);
+  background: var(--blue-bg, var(--surface-raised));
+  border: var(--border-width-default) solid var(--accent);
+  border-radius: var(--radius);
+  margin-bottom: var(--space-4);
+}
+
+.cpub-federated-banner-text {
+  font-size: 13px;
+  color: var(--text);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.cpub-federated-banner-text code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.cpub-federated-section {
+  margin-top: var(--space-5);
+}
+
+.cpub-federated-divider {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  margin-bottom: var(--space-4);
+}
+
+.cpub-federated-divider::before,
+.cpub-federated-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--border);
+}
+
+.cpub-federated-divider-text {
+  font-size: 11px;
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-faint);
+}
+
+.cpub-federated-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.cpub-federated-input-group {
+  display: flex;
+  gap: var(--space-2);
+}
+
+.cpub-federated-input-group .field-input {
+  flex: 1;
+}
+
+.cpub-federated-btn {
+  padding: 7px 14px;
+  background: var(--surface-raised);
+  color: var(--text);
+  border: var(--border-width-default) solid var(--border);
+  border-radius: var(--radius);
+  font-size: 13px;
+  font-weight: 500;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s;
+}
+
+.cpub-federated-btn:hover:not(:disabled) {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.cpub-federated-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
 </style>

package/pages/dashboard.vue

@@ -8,9 +8,12 @@ useSeoMeta({
 
 const { user } = useAuth();
 const { learning: learningEnabled } = useFeatures();
+const { enabledTypeMeta } = useContentTypes();
 const reqHeaders = import.meta.server ? useRequestHeaders(['cookie']) : {};
 
 const activeTab = ref<'content' | 'bookmarks' | 'learning'>('content');
+const contentSort = ref<'newest' | 'oldest' | 'popular'>('newest');
+const contentTypeFilter = ref('');
 
 // My content (all statuses)
 const { data: myContent, status: contentStatus } = await useFetch('/api/content', {
@@ -18,6 +21,11 @@ const { data: myContent, status: contentStatus } = await useFetch('/api/content'
   headers: reqHeaders,
 });
 
+const contentTypeOptions = computed(() => [
+  { value: '', label: 'All types' },
+  ...enabledTypeMeta.value.map(m => ({ value: m.type, label: m.plural })),
+]);
+
 // Bookmarks
 const { data: bookmarkData } = await useFetch('/api/social/bookmarks', {
   query: { limit: 10 },
@@ -40,17 +48,42 @@ const { data: notifCount } = await useFetch('/api/notifications/count', {
 
 const toast = useToast();
 
+function filterByType<T extends { type: string }>(items: T[]): T[] {
+  if (!contentTypeFilter.value) return items;
+  return items.filter((i) => i.type === contentTypeFilter.value);
+}
+
+function sortItems<T extends { createdAt: string; viewCount?: number; likeCount?: number }>(items: T[]): T[] {
+  const sorted = [...items];
+  if (contentSort.value === 'oldest') {
+    sorted.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
+  } else if (contentSort.value === 'popular') {
+    sorted.sort((a, b) => ((b.viewCount ?? 0) + (b.likeCount ?? 0)) - ((a.viewCount ?? 0) + (a.likeCount ?? 0)));
+  } else {
+    sorted.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+  }
+  return sorted;
+}
+
 const drafts = computed(() =>
-  (myContent.value?.items ?? []).filter((i) => i.status === 'draft'),
+  sortItems(filterByType((myContent.value?.items ?? []).filter((i: { status: string }) => i.status === 'draft'))),
 );
 const published = computed(() =>
-  (myContent.value?.items ?? []).filter((i) => i.status === 'published'),
+  sortItems(filterByType((myContent.value?.items ?? []).filter((i: { status: string }) => i.status === 'published'))),
+);
+
+// Stats use ALL items (unfiltered) so totals don't change with filter selection
+const allPublished = computed(() =>
+  (myContent.value?.items ?? []).filter((i: { status: string }) => i.status === 'published'),
+);
+const allDrafts = computed(() =>
+  (myContent.value?.items ?? []).filter((i: { status: string }) => i.status === 'draft'),
 );
 const totalViews = computed(() =>
-  published.value.reduce((sum, item) => sum + (item.viewCount ?? 0), 0),
+  allPublished.value.reduce((sum, item) => sum + (item.viewCount ?? 0), 0),
 );
 const totalLikes = computed(() =>
-  published.value.reduce((sum, item) => sum + (item.likeCount ?? 0), 0),
+  allPublished.value.reduce((sum, item) => sum + (item.likeCount ?? 0), 0),
 );
 
 // Content actions
@@ -97,11 +130,11 @@ async function deleteItem(id: string, title: string): Promise<void> {
     <!-- Stats row -->
     <div class="cpub-dash-stats">
       <div class="cpub-dash-stat">
-        <span class="cpub-dash-stat-n">{{ published.length }}</span>
+        <span class="cpub-dash-stat-n">{{ allPublished.length }}</span>
         <span class="cpub-dash-stat-l">Published</span>
       </div>
       <div class="cpub-dash-stat">
-        <span class="cpub-dash-stat-n">{{ drafts.length }}</span>
+        <span class="cpub-dash-stat-n">{{ allDrafts.length }}</span>
         <span class="cpub-dash-stat-l">Drafts</span>
       </div>
       <div class="cpub-dash-stat">
@@ -149,6 +182,21 @@ async function deleteItem(id: string, title: string): Promise<void> {
 
     <!-- Content tab -->
     <div v-else-if="activeTab === 'content'" class="cpub-dash-panel">
+      <!-- Sort & filter controls -->
+      <div class="cpub-dash-controls">
+        <div class="cpub-dash-controls-left">
+          <select v-model="contentTypeFilter" class="cpub-dash-select" aria-label="Filter by content type">
+            <option v-for="opt in contentTypeOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+          </select>
+        </div>
+        <div class="cpub-dash-controls-right">
+          <select v-model="contentSort" class="cpub-dash-select" aria-label="Sort order">
+            <option value="newest">Newest first</option>
+            <option value="oldest">Oldest first</option>
+            <option value="popular">Most popular</option>
+          </select>
+        </div>
+      </div>
       <!-- Drafts section -->
       <div v-if="drafts.length" class="cpub-dash-section">
         <h2 class="cpub-dash-section-title">Drafts</h2>
@@ -359,6 +407,39 @@ async function deleteItem(id: string, title: string): Promise<void> {
   border-bottom-color: var(--accent);
 }
 
+/* Controls */
+.cpub-dash-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: var(--border-width-default) solid var(--border);
+  gap: 8px;
+}
+
+.cpub-dash-controls-left,
+.cpub-dash-controls-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.cpub-dash-select {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 4px 8px;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  color: var(--text-dim);
+  cursor: pointer;
+  outline: none;
+  border-radius: var(--radius);
+}
+
+.cpub-dash-select:focus {
+  border-color: var(--accent);
+}
+
 /* Panel */
 .cpub-dash-panel {
   background: var(--surface);

package/pages/explore.vue

@@ -13,11 +13,14 @@ const activeTab = ref<'content' | 'hubs' | 'learn' | 'people'>('content');
 const contentType = ref('');
 const sort = ref('recent');
 
+const CONTENT_PAGE_SIZE = 20;
+const TAB_PAGE_SIZE = 12;
+
 const contentQuery = computed(() => ({
   status: 'published',
   type: contentType.value || undefined,
   sort: sort.value,
-  limit: 20,
+  limit: CONTENT_PAGE_SIZE,
 }));
 
 const { data: content, pending: contentPending, error: contentError, refresh: refreshContent } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
@@ -25,26 +28,123 @@ const { data: content, pending: contentPending, error: contentError, refresh: re
   watch: [contentQuery],
 });
 
-const { data: hubsData } = await useFetch('/api/hubs', {
-  query: { limit: 12 },
+// Reset content pagination when filters change
+const contentAllLoaded = ref(false);
+const contentLoadingMore = ref(false);
+watch([contentType, sort], () => { contentAllLoaded.value = false; });
+
+async function loadMoreContent(): Promise<void> {
+  if (!content.value?.items) return;
+  contentLoadingMore.value = true;
+  try {
+    const more = await $fetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
+      query: { ...contentQuery.value, offset: content.value.items.length },
+    });
+    if (more?.items?.length) {
+      content.value.items.push(...more.items);
+    }
+    if (!more?.items?.length || more.items.length < CONTENT_PAGE_SIZE) {
+      contentAllLoaded.value = true;
+    }
+  } catch {
+    contentAllLoaded.value = true;
+  } finally {
+    contentLoadingMore.value = false;
+  }
+}
+
+interface HubItem { id: string; slug: string; name: string; description: string | null; hubType: string; memberCount: number }
+const { data: hubsData } = await useFetch<{ items: HubItem[]; total: number }>('/api/hubs', {
+  query: { limit: TAB_PAGE_SIZE },
   lazy: true,
 });
 
-const { data: pathsData } = await useFetch('/api/learn', {
-  query: { status: 'published', limit: 12 },
+const hubsAllLoaded = ref(false);
+const hubsLoadingMore = ref(false);
+
+async function loadMoreHubs(): Promise<void> {
+  if (!hubsData.value?.items) return;
+  hubsLoadingMore.value = true;
+  try {
+    const more = await $fetch<{ items: HubItem[]; total: number }>('/api/hubs', {
+      query: { limit: TAB_PAGE_SIZE, offset: hubsData.value.items.length },
+    });
+    if (more?.items?.length) {
+      hubsData.value.items.push(...more.items);
+    }
+    if (!more?.items?.length || more.items.length < TAB_PAGE_SIZE) {
+      hubsAllLoaded.value = true;
+    }
+  } catch {
+    hubsAllLoaded.value = true;
+  } finally {
+    hubsLoadingMore.value = false;
+  }
+}
+
+interface PathItem { id: string; slug: string; title: string; description: string | null; moduleCount: number; enrollmentCount: number }
+const { data: pathsData } = await useFetch<{ items: PathItem[]; total: number }>('/api/learn', {
+  query: { status: 'published', limit: TAB_PAGE_SIZE },
   lazy: true,
 });
 
+const pathsAllLoaded = ref(false);
+const pathsLoadingMore = ref(false);
+
+async function loadMorePaths(): Promise<void> {
+  if (!pathsData.value?.items) return;
+  pathsLoadingMore.value = true;
+  try {
+    const more = await $fetch<{ items: PathItem[]; total: number }>('/api/learn', {
+      query: { status: 'published', limit: TAB_PAGE_SIZE, offset: pathsData.value.items.length },
+    });
+    if (more?.items?.length) {
+      pathsData.value.items.push(...more.items);
+    }
+    if (!more?.items?.length || more.items.length < TAB_PAGE_SIZE) {
+      pathsAllLoaded.value = true;
+    }
+  } catch {
+    pathsAllLoaded.value = true;
+  } finally {
+    pathsLoadingMore.value = false;
+  }
+}
+
 const { data: statsData } = await useFetch('/api/stats', {
   lazy: true,
 });
 
-const { data: peopleData } = await useFetch('/api/users', {
-  query: { limit: 20 },
+interface PersonItem { id: string; username: string; displayName: string | null; headline: string | null; avatarUrl: string | null; followerCount: number }
+const { data: peopleData } = await useFetch<{ items: PersonItem[]; total: number }>('/api/users', {
+  query: { limit: TAB_PAGE_SIZE },
   lazy: true,
-  default: () => ({ items: [] }),
+  default: () => ({ items: [], total: 0 }),
 });
 
+const peopleAllLoaded = ref(false);
+const peopleLoadingMore = ref(false);
+
+async function loadMorePeople(): Promise<void> {
+  if (!peopleData.value?.items) return;
+  peopleLoadingMore.value = true;
+  try {
+    const more = await $fetch<{ items: PersonItem[]; total: number }>('/api/users', {
+      query: { limit: TAB_PAGE_SIZE, offset: peopleData.value.items.length },
+    });
+    if (more?.items?.length) {
+      peopleData.value.items.push(...more.items);
+    }
+    if (!more?.items?.length || more.items.length < TAB_PAGE_SIZE) {
+      peopleAllLoaded.value = true;
+    }
+  } catch {
+    peopleAllLoaded.value = true;
+  } finally {
+    peopleLoadingMore.value = false;
+  }
+}
+
 const contentTypes = computed(() => [
   { value: '', label: 'All' },
   ...enabledTypeMeta.value.map(m => ({ value: m.type, label: m.plural })),
@@ -125,6 +225,11 @@ const sortOptions = [
       <div v-else class="cpub-empty-state">
         <p class="cpub-empty-state-title">No content found</p>
       </div>
+      <div v-if="!contentAllLoaded && (content?.items?.length ?? 0) >= CONTENT_PAGE_SIZE" class="cpub-explore-more">
+        <button class="cpub-btn" @click="loadMoreContent" :disabled="contentLoadingMore">
+          {{ contentLoadingMore ? 'Loading...' : 'Load More' }}
+        </button>
+      </div>
     </div>
 
     <!-- Hubs tab -->
@@ -152,6 +257,11 @@ const sortOptions = [
       <div v-else class="cpub-empty-state">
         <p class="cpub-empty-state-title">No hubs yet</p>
       </div>
+      <div v-if="!hubsAllLoaded && (hubsData?.items?.length ?? 0) >= TAB_PAGE_SIZE" class="cpub-explore-more">
+        <button class="cpub-btn" @click="loadMoreHubs" :disabled="hubsLoadingMore">
+          {{ hubsLoadingMore ? 'Loading...' : 'Load More' }}
+        </button>
+      </div>
     </div>
 
     <!-- Learn tab -->
@@ -177,6 +287,11 @@ const sortOptions = [
       <div v-else class="cpub-empty-state">
         <p class="cpub-empty-state-title">No learning paths yet</p>
       </div>
+      <div v-if="!pathsAllLoaded && (pathsData?.items?.length ?? 0) >= TAB_PAGE_SIZE" class="cpub-explore-more">
+        <button class="cpub-btn" @click="loadMorePaths" :disabled="pathsLoadingMore">
+          {{ pathsLoadingMore ? 'Loading...' : 'Load More' }}
+        </button>
+      </div>
     </div>
 
     <!-- People tab -->
@@ -188,7 +303,7 @@ const sortOptions = [
           :to="`/u/${person.username}`"
           class="cpub-explore-hub-card"
         >
-          <div class="cpub-explore-hub-icon" style="border-radius: 50%">
+          <div class="cpub-explore-hub-icon">
             <img v-if="person.avatarUrl" :src="person.avatarUrl" :alt="person.displayName || person.username" class="cpub-explore-person-avatar-img" />
             <span v-else style="font-weight: 700; font-family: var(--font-mono);">{{ (person.displayName || person.username).charAt(0).toUpperCase() }}</span>
           </div>
@@ -204,6 +319,11 @@ const sortOptions = [
       <div v-else class="cpub-empty-state">
         <p class="cpub-empty-state-title">No makers yet</p>
       </div>
+      <div v-if="!peopleAllLoaded && (peopleData?.items?.length ?? 0) >= TAB_PAGE_SIZE" class="cpub-explore-more">
+        <button class="cpub-btn" @click="loadMorePeople" :disabled="peopleLoadingMore">
+          {{ peopleLoadingMore ? 'Loading...' : 'Load More' }}
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -414,6 +534,11 @@ const sortOptions = [
 /* cpub-tag → global components.css */
 .cpub-tag-xs { font-size: 9px; }
 
+.cpub-explore-more {
+  text-align: center;
+  padding: 24px 0;
+}
+
 @media (max-width: 768px) {
   .cpub-explore-grid { grid-template-columns: 1fr; }
   .cpub-explore-hub-grid { grid-template-columns: 1fr; }

package/pages/messages/[conversationId].vue

@@ -20,6 +20,7 @@ interface MessageItem {
   senderAvatarUrl?: string | null;
   body: string;
   createdAt: string;
+  readAt?: string | null;
 }
 
 const { data: convInfo } = useLazyFetch<{ id: string; participants: ConvParticipant[] }>(`/api/messages/${conversationId}/info`, {
@@ -128,8 +129,6 @@ async function handleSend(text: string): Promise<void> {
 }
 
 @media (max-width: 768px) {
-  .msg-page { padding: 12px; }
-  .msg-scroll { height: calc(100vh - 160px); }
-  .msg-compose { padding: 8px; }
+  .cpub-message-view { height: calc(100vh - 100px); }
 }
 </style>

package/pages/messages/index.vue

@@ -14,26 +14,48 @@ interface ConversationItem {
   lastMessage: string | null;
   lastMessageAt: string;
   createdAt: string;
-  unread?: boolean;
+  unreadCount?: number;
 }
 
+const { user } = useAuth();
 const { data: conversations, refresh } = await useFetch<ConversationItem[]>('/api/messages', {
   default: () => [] as ConversationItem[],
 });
 
+/** Filter out the current user from participants for display */
+function otherParticipants(conv: ConversationItem): ParticipantRef[] {
+  const others = conv.participants.filter(p => p.username !== user.value?.username);
+  return others.length > 0 ? others : conv.participants;
+}
+
 const showNewDialog = ref(false);
-const newRecipient = ref('');
+const newRecipientInput = ref('');
+const newRecipients = ref<string[]>([]);
 const newMessage = ref('');
 
 const msgError = ref('');
 
+function addRecipient(): void {
+  const val = newRecipientInput.value.trim();
+  if (!val) return;
+  if (newRecipients.value.includes(val)) return;
+  newRecipients.value.push(val);
+  newRecipientInput.value = '';
+}
+
+function removeRecipient(idx: number): void {
+  newRecipients.value.splice(idx, 1);
+}
+
 async function startConversation(): Promise<void> {
-  if (!newRecipient.value.trim()) return;
+  // Add any pending input as a recipient
+  if (newRecipientInput.value.trim()) addRecipient();
+  if (!newRecipients.value.length) return;
   msgError.value = '';
   try {
     const conv = await $fetch<{ id: string }>('/api/messages', {
       method: 'POST',
-      body: { participants: [newRecipient.value.trim()] },
+      body: { participants: newRecipients.value },
     });
     if (newMessage.value.trim()) {
       await $fetch(`/api/messages/${conv.id}` as string, {
@@ -42,7 +64,8 @@ async function startConversation(): Promise<void> {
       });
     }
     showNewDialog.value = false;
-    newRecipient.value = '';
+    newRecipients.value = [];
+    newRecipientInput.value = '';
     newMessage.value = '';
     await navigateTo(`/messages/${conv.id}`);
   } catch (err: unknown) {
@@ -62,7 +85,7 @@ async function startConversation(): Promise<void> {
     </div>
 
     <!-- New conversation dialog -->
-    <div v-if="showNewDialog" class="cpub-new-msg-overlay" @click.self="showNewDialog = false">
+    <div v-if="showNewDialog" class="cpub-new-msg-overlay" @click.self="showNewDialog = false" @keydown.escape="showNewDialog = false">
       <div class="cpub-new-msg-dialog" role="dialog" aria-label="New message">
         <div class="cpub-new-msg-header">
           <h2 class="cpub-new-msg-title">New Conversation</h2>
@@ -71,9 +94,24 @@ async function startConversation(): Promise<void> {
           </button>
         </div>
         <div class="cpub-new-msg-body">
+          <div v-if="msgError" class="cpub-new-msg-error" role="alert">{{ msgError }}</div>
           <div class="cpub-new-msg-field">
-            <label class="cpub-new-msg-label">Recipient username</label>
-            <input v-model="newRecipient" type="text" class="cpub-new-msg-input" placeholder="username or @user@remote-instance.com" />
+            <label class="cpub-new-msg-label">Recipients</label>
+            <div v-if="newRecipients.length" class="cpub-new-msg-chips">
+              <span v-for="(r, idx) in newRecipients" :key="idx" class="cpub-new-msg-chip">
+                {{ r }}
+                <button class="cpub-new-msg-chip-remove" @click="removeRecipient(idx)" :aria-label="`Remove ${r}`">&times;</button>
+              </span>
+            </div>
+            <input
+              v-model="newRecipientInput"
+              type="text"
+              class="cpub-new-msg-input"
+              placeholder="username or @user@remote-instance.com"
+              @keydown.enter.prevent="addRecipient"
+              @keydown.,.prevent="addRecipient"
+            />
+            <p class="cpub-new-msg-hint">Press Enter to add multiple recipients</p>
           </div>
           <div class="cpub-new-msg-field">
             <label class="cpub-new-msg-label">Message (optional)</label>
@@ -84,7 +122,7 @@ async function startConversation(): Promise<void> {
           <button class="cpub-btn cpub-btn-sm" @click="showNewDialog = false">Cancel</button>
           <button
             class="cpub-btn cpub-btn-sm cpub-btn-primary"
-            :disabled="!newRecipient.trim()"
+            :disabled="!newRecipients.length && !newRecipientInput.trim()"
             @click="startConversation"
           >
             Start Conversation
@@ -99,19 +137,32 @@ async function startConversation(): Promise<void> {
         :key="conv.id"
         :to="`/messages/${conv.id}`"
         class="cpub-conversation-item"
-        :class="{ unread: conv.unread }"
+        :class="{ 'cpub-conv-unread': (conv.unreadCount ?? 0) > 0 }"
+        :aria-label="`Conversation with ${otherParticipants(conv).map(p => p.displayName || p.username).join(', ')}${(conv.unreadCount ?? 0) > 0 ? `, ${conv.unreadCount} unread` : ''}`"
       >
-        <div class="cpub-conv-avatar">
-          <img v-if="conv.participants?.[0]?.avatarUrl" :src="conv.participants[0].avatarUrl" :alt="conv.participants[0].displayName || conv.participants[0].username" class="cpub-conv-avatar-img" />
-          <span v-else>{{ (conv.participants?.[0]?.displayName || conv.participants?.[0]?.username || '?').charAt(0).toUpperCase() }}</span>
+        <div v-if="otherParticipants(conv).length <= 1" class="cpub-conv-avatar">
+          <img v-if="otherParticipants(conv)[0]?.avatarUrl" :src="otherParticipants(conv)[0].avatarUrl!" :alt="otherParticipants(conv)[0].displayName ?? otherParticipants(conv)[0].username ?? ''" class="cpub-conv-avatar-img" />
+          <span v-else>{{ (otherParticipants(conv)[0]?.displayName || otherParticipants(conv)[0]?.username || '?').charAt(0).toUpperCase() }}</span>
+        </div>
+        <div v-else class="cpub-conv-avatar-group">
+          <div v-for="(p, idx) in otherParticipants(conv).slice(0, 4)" :key="idx" class="cpub-conv-avatar-mini">
+            <img v-if="p.avatarUrl" :src="p.avatarUrl" :alt="p.displayName || p.username" class="cpub-conv-avatar-img" />
+            <span v-else>{{ (p.displayName || p.username || '?').charAt(0).toUpperCase() }}</span>
+          </div>
         </div>
         <div class="cpub-conv-info">
-          <div class="cpub-conv-name">{{ conv.participants?.map(p => p.displayName || p.username).join(', ') ?? 'Unknown' }}</div>
+          <div class="cpub-conv-name">
+            {{ otherParticipants(conv).map(p => p.displayName || p.username).join(', ') }}
+            <span v-if="otherParticipants(conv).length > 2" class="cpub-conv-group-count">({{ otherParticipants(conv).length }})</span>
+          </div>
           <div class="cpub-conv-preview">{{ conv.lastMessage ?? 'No messages yet' }}</div>
         </div>
-        <time class="cpub-conv-time">
-          {{ new Date(conv.lastMessageAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) }}
-        </time>
+        <div class="cpub-conv-meta">
+          <time class="cpub-conv-time">
+            {{ new Date(conv.lastMessageAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) }}
+          </time>
+          <span v-if="(conv.unreadCount ?? 0) > 0" class="cpub-conv-badge" :aria-label="`${conv.unreadCount} unread messages`">{{ conv.unreadCount }}</span>
+        </div>
       </NuxtLink>
 
       <div v-if="!conversations.length" class="cpub-empty-state">
@@ -156,14 +207,13 @@ async function startConversation(): Promise<void> {
   background: var(--surface2);
 }
 
-.cpub-conversation-item.unread {
+.cpub-conversation-item.cpub-conv-unread {
   background: var(--accent-bg);
 }
 
 .cpub-conv-avatar {
   width: 36px;
   height: 36px;
-  border-radius: 50%;
   background: var(--surface3);
   border: var(--border-width-default) solid var(--border);
   display: flex;
@@ -177,7 +227,41 @@ async function startConversation(): Promise<void> {
   overflow: hidden;
 }
 
-.cpub-conv-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+.cpub-conv-avatar-img { width: 100%; height: 100%; object-fit: cover; }
+
+/* Group avatar stack */
+.cpub-conv-avatar-group {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  width: 36px;
+  height: 36px;
+  gap: 1px;
+  flex-shrink: 0;
+  border: var(--border-width-default) solid var(--border);
+  overflow: hidden;
+}
+
+.cpub-conv-avatar-mini {
+  background: var(--surface3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-mono);
+  font-size: 8px;
+  font-weight: 600;
+  color: var(--text-dim);
+  overflow: hidden;
+}
+
+.cpub-conv-avatar-mini .cpub-conv-avatar-img { width: 100%; height: 100%; object-fit: cover; }
+
+.cpub-conv-group-count {
+  font-size: 10px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+  font-weight: 400;
+}
 
 .cpub-conv-info {
   flex: 1;
@@ -199,11 +283,33 @@ async function startConversation(): Promise<void> {
   white-space: nowrap;
 }
 
+.cpub-conv-meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
 .cpub-conv-time {
   font-size: 10px;
   color: var(--text-faint);
   font-family: var(--font-mono);
-  flex-shrink: 0;
+}
+
+.cpub-conv-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  background: var(--accent);
+  color: var(--color-text-inverse);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 700;
+  border-radius: var(--radius);
 }
 
 /* New message dialog */
@@ -288,6 +394,55 @@ async function startConversation(): Promise<void> {
   border-color: var(--accent);
 }
 
+.cpub-new-msg-error {
+  padding: 8px 10px;
+  background: var(--red-bg);
+  color: var(--red);
+  border: var(--border-width-default) solid var(--red);
+  font-size: 12px;
+  border-radius: var(--radius);
+}
+
+.cpub-new-msg-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 4px;
+}
+
+.cpub-new-msg-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  background: var(--accent-bg);
+  border: var(--border-width-default) solid var(--accent-border, var(--border));
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.cpub-new-msg-chip-remove {
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0 2px;
+  line-height: 1;
+}
+
+.cpub-new-msg-chip-remove:hover {
+  color: var(--red);
+}
+
+.cpub-new-msg-hint {
+  font-size: 10px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+  margin-top: 2px;
+}
+
 .cpub-new-msg-footer {
   display: flex;
   justify-content: flex-end;

package/pages/tags/[slug].vue

@@ -9,23 +9,45 @@ useSeoMeta({
   description: () => `Content tagged with "${tagSlug.value}" on CommonPub`,
 });
 
-const page = ref(0);
-const { data: results, refresh } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
+const PAGE_SIZE = 20;
+const loadingMore = ref(false);
+const allLoaded = ref(false);
+
+const { data: results } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
   query: computed(() => ({
     tag: tagSlug.value,
     status: 'published',
-    limit: 20,
-    offset: page.value * 20,
+    limit: PAGE_SIZE,
   })),
+  watch: [tagSlug],
 });
 
 const items = computed(() => results.value?.items ?? []);
 const total = computed(() => results.value?.total ?? 0);
-const hasMore = computed(() => items.value.length < total.value);
+const hasMore = computed(() => !allLoaded.value && items.value.length < total.value);
+
+// Reset when tag changes
+watch(tagSlug, () => { allLoaded.value = false; });
 
 async function loadMore(): Promise<void> {
-  page.value++;
-  await refresh();
+  if (!results.value?.items) return;
+  loadingMore.value = true;
+  try {
+    const nextOffset = results.value.items.length;
+    const more = await $fetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
+      query: { tag: tagSlug.value, status: 'published', limit: PAGE_SIZE, offset: nextOffset },
+    });
+    if (more?.items?.length) {
+      results.value.items.push(...more.items);
+    }
+    if (!more?.items?.length || more.items.length < PAGE_SIZE) {
+      allLoaded.value = true;
+    }
+  } catch {
+    allLoaded.value = true;
+  } finally {
+    loadingMore.value = false;
+  }
 }
 </script>
 
@@ -53,7 +75,9 @@ async function loadMore(): Promise<void> {
     </div>
 
     <div v-if="hasMore" class="cpub-tag-more">
-      <button class="cpub-btn" @click="loadMore">Load more</button>
+      <button class="cpub-btn" @click="loadMore" :disabled="loadingMore">
+        {{ loadingMore ? 'Loading...' : 'Load more' }}
+      </button>
     </div>
   </div>
 </template>

package/server/api/admin/federation/hub-mirrors/[id]/backfill.post.ts

@@ -15,7 +15,7 @@ export default defineEventHandler(async (event) => {
       console.error('[hub-backfill] Failed:', err);
       return { processed: 0, errors: 1 };
     }),
-    fetchRemoteHubFollowers(db, id).catch((err) => {
+    fetchRemoteHubFollowers(db, id, config.instance.domain).catch((err) => {
       console.error('[hub-followers] Failed:', err);
       return { fetched: 0, errors: 1 };
     }),

package/server/api/auth/federated/callback.get.ts

@@ -1,4 +1,5 @@
-import { consumeOAuthState, exchangeCodeForToken, linkFederatedAccount } from '@commonpub/server';
+import { consumeOAuthState, exchangeCodeForToken, linkFederatedAccount, findUserByFederatedAccount, createFederatedSession, storePendingLink } from '@commonpub/server';
+import type { H3Event } from 'h3';
 import { z } from 'zod';
 
 const callbackSchema = z.object({
@@ -6,16 +7,30 @@ const callbackSchema = z.object({
   state: z.string(),
 });
 
+/**
+ * Set the Better Auth session cookie after federated login.
+ */
+function setSessionCookie(event: H3Event, token: string, expiresAt: Date): void {
+  setCookie(event, 'better-auth.session_token', token, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'lax',
+    path: '/',
+    expires: expiresAt,
+  });
+}
+
 /**
  * OAuth2 callback handler for federated login.
- * Exchanges authorization code for token, links federated account.
+ * Exchanges authorization code for token, links federated account,
+ * creates a session, and redirects.
  */
 export default defineEventHandler(async (event) => {
   requireFeature('federation');
   const db = useDB();
   const { code, state: stateToken } = parseQueryParams(event, callbackSchema);
 
-  // Retrieve and consume the stored OAuth state (single-use, 10min TTL)
+  // Retrieve and consume the stored OAuth state (single-use, atomic)
   const oauthState = await consumeOAuthState(db, stateToken);
   if (!oauthState) {
     throw createError({
@@ -33,14 +48,19 @@ export default defineEventHandler(async (event) => {
     });
   }
 
+  const ipAddress = getRequestHeader(event, 'x-forwarded-for')?.split(',')[0]?.trim()
+    ?? getRequestHeader(event, 'x-real-ip')
+    ?? undefined;
+  const userAgent = getRequestHeader(event, 'user-agent') ?? undefined;
+
   // Check if a local user is already linked to this federated account
-  const { findUserByFederatedAccount } = await import('@commonpub/server');
   const existingLink = await findUserByFederatedAccount(db, tokenResult.user.actorUri);
 
   if (existingLink) {
-    // User already linked — redirect to dashboard
-    // In a full implementation, this would also create a Better Auth session
-    return sendRedirect(event, `/dashboard?federated=linked&user=${existingLink.username}`, 302);
+    // User already linked — create session and redirect to dashboard
+    const session = await createFederatedSession(db, existingLink.userId, ipAddress, userAgent);
+    setSessionCookie(event, session.sessionToken, session.expiresAt);
+    return sendRedirect(event, '/dashboard', 302);
   }
 
   // Check if the current user is logged in — if so, link to their account
@@ -55,13 +75,15 @@ export default defineEventHandler(async (event) => {
     return sendRedirect(event, '/settings/account?federated=linked', 302);
   }
 
-  // Not logged in and no existing link — redirect to login page with federated context
-  // The user needs to either create an account or log in to link
-  const params = new URLSearchParams({
-    federated: 'true',
+  // Not logged in and no existing link — store verified identity in a server-side token.
+  // Only the opaque token is passed to the client; the actorUri is never exposed in the URL.
+  const linkToken = await storePendingLink(db, {
     actorUri: tokenResult.user.actorUri,
     username: tokenResult.user.username,
-    instance: oauthState.instanceDomain,
+    instanceDomain: oauthState.instanceDomain,
+    displayName: tokenResult.user.displayName ?? undefined,
+    avatarUrl: tokenResult.user.avatarUrl ?? undefined,
   });
-  return sendRedirect(event, `/auth/login?${params.toString()}`, 302);
+
+  return sendRedirect(event, `/auth/login?federated=true&linkToken=${linkToken}`, 302);
 });

package/server/api/auth/federated/link.post.ts

@@ -0,0 +1,82 @@
+import { linkFederatedAccount, consumePendingLink } from '@commonpub/server';
+import { z } from 'zod';
+
+const linkSchema = z.object({
+  /** Local credentials */
+  identity: z.string().min(1),
+  password: z.string().min(1),
+  /** Server-side link token from the OAuth callback — proves the federated identity was verified */
+  linkToken: z.string().min(1),
+});
+
+/**
+ * Link a verified federated identity to a local account.
+ * The linkToken is a server-side opaque token stored during the OAuth callback.
+ * It proves the federated identity was authenticated — the actorUri is never
+ * sent from the client, preventing identity hijacking.
+ */
+export default defineEventHandler(async (event) => {
+  requireFeature('federation');
+  const db = useDB();
+  const body = await parseBody(event, linkSchema);
+
+  // Step 1: Consume the pending link token (single-use, 10min TTL)
+  const pendingLink = await consumePendingLink(db, body.linkToken);
+  if (!pendingLink) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Link token is invalid or expired. Please start the federated login again.',
+    });
+  }
+
+  // Step 2: Resolve identity to email
+  const { email } = await $fetch<{ email: string }>('/api/resolve-identity', {
+    method: 'POST',
+    body: { identity: body.identity },
+  }).catch(() => {
+    throw createError({ statusCode: 401, statusMessage: 'Invalid credentials.' });
+  });
+
+  // Step 3: Authenticate via Better Auth sign-in (also creates session + sets cookie)
+  const signInResponse = await $fetch<{ user?: { id: string }; session?: { token: string; expiresAt: string } }>(
+    '/api/auth/sign-in/email',
+    {
+      method: 'POST',
+      body: { email, password: body.password },
+    },
+  ).catch(() => {
+    throw createError({ statusCode: 401, statusMessage: 'Invalid credentials.' });
+  });
+
+  if (!signInResponse?.user?.id || !signInResponse?.session?.token) {
+    throw createError({ statusCode: 401, statusMessage: 'Invalid credentials.' });
+  }
+
+  const userId = signInResponse.user.id;
+
+  // Step 4: Link the verified federated identity (from server-side token, NOT client input)
+  try {
+    await linkFederatedAccount(db, userId, pendingLink.actorUri, pendingLink.instanceDomain, {
+      preferredUsername: pendingLink.username,
+      displayName: pendingLink.displayName,
+      avatarUrl: pendingLink.avatarUrl,
+    });
+  } catch (err: unknown) {
+    const msg = err instanceof Error ? err.message : 'Failed to link account';
+    throw createError({ statusCode: 409, statusMessage: msg });
+  }
+
+  // Step 5: Use the session Better Auth created — set cookie for the client
+  setCookie(event, 'better-auth.session_token', signInResponse.session.token, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'lax',
+    path: '/',
+    expires: new Date(signInResponse.session.expiresAt),
+  });
+
+  return {
+    success: true,
+    linked: true,
+  };
+});

package/server/api/messages/index.get.ts

@@ -1,4 +1,4 @@
-import { listConversations } from '@commonpub/server';
+import { listConversations, getConversationUnreadCounts } from '@commonpub/server';
 import { users } from '@commonpub/schema';
 import { inArray } from 'drizzle-orm';
 
@@ -6,11 +6,14 @@ export default defineEventHandler(async (event) => {
   const db = useDB();
   const user = requireAuth(event);
 
-  const conversations = await listConversations(db, user.id);
+  const [conversationList, unreadCounts] = await Promise.all([
+    listConversations(db, user.id),
+    getConversationUnreadCounts(db, user.id),
+  ]);
 
   // Collect all unique participant IDs
   const allIds = new Set<string>();
-  for (const conv of conversations) {
+  for (const conv of conversationList) {
     for (const id of (conv.participants ?? [])) {
       allIds.add(id);
     }
@@ -28,9 +31,10 @@ export default defineEventHandler(async (event) => {
     }
   }
 
-  // Replace participant IDs with resolved user objects
-  return conversations.map((conv) => ({
+  // Replace participant IDs with resolved user objects, include unread count
+  return conversationList.map((conv) => ({
     ...conv,
+    unreadCount: unreadCounts[conv.id] ?? 0,
     participants: (conv.participants ?? []).map((id: string) => {
       const u = userMap.get(id);
       return u ? { username: u.username, displayName: u.displayName, avatarUrl: u.avatarUrl } : { username: id, displayName: null, avatarUrl: null };