@commonpub/layer 0.3.17 → 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>
@@ -54,7 +61,7 @@ function handleSend(): void {
         aria-label="Message"
         @keyup.enter="handleSend"
       />
-      <button class="cpub-btn cpub-btn-primary" :disabled="!newMessage.trim()" @click="handleSend">
+      <button class="cpub-btn cpub-btn-primary" :disabled="!newMessage.trim()" aria-label="Send message" @click="handleSend">
         <i class="fa-solid fa-paper-plane"></i>
       </button>
     </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/components/views/ArticleView.vue

@@ -132,15 +132,15 @@ useJsonLd({
       <div class="cpub-engagement-row">
         <div class="cpub-eng-stat"><i class="fa-regular fa-eye"></i> {{ content.viewCount?.toLocaleString() || '0' }} views</div>
         <div class="cpub-eng-sep"></div>
-        <button class="cpub-eng-btn" :class="{ liked }" @click="toggleLike">
+        <button class="cpub-eng-btn" :class="{ liked }" :aria-label="liked ? 'Unlike' : 'Like'" :aria-pressed="liked" @click="toggleLike">
           <i class="fa-solid fa-heart"></i> {{ likeCount }}
         </button>
-        <button class="cpub-eng-btn" :class="{ bookmarked }" @click="toggleBookmark">
+        <button class="cpub-eng-btn" :class="{ bookmarked }" :aria-label="bookmarked ? 'Remove bookmark' : 'Bookmark'" :aria-pressed="bookmarked" @click="toggleBookmark">
           <i class="fa-solid fa-bookmark"></i> Bookmark
         </button>
         <div class="cpub-eng-spacer"></div>
-        <button class="cpub-eng-btn" @click="share"><i class="fa-solid fa-share-nodes"></i> Share</button>
-        <button class="cpub-eng-btn"><i class="fa-solid fa-ellipsis"></i></button>
+        <button class="cpub-eng-btn" aria-label="Share" @click="share"><i class="fa-solid fa-share-nodes"></i> Share</button>
+        <button class="cpub-eng-btn" aria-label="More options"><i class="fa-solid fa-ellipsis"></i></button>
       </div>
 
       <!-- ARTICLE BODY WITH TOC SIDEBAR -->

package/components/views/BlogView.vue

@@ -85,15 +85,15 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
       <div class="cpub-engagement-row">
         <div class="cpub-eng-stat"><i class="fa-regular fa-eye"></i> {{ content.viewCount?.toLocaleString() || '0' }} views</div>
         <div class="cpub-eng-sep"></div>
-        <button class="cpub-eng-btn" :class="{ liked }" @click="toggleLike">
+        <button class="cpub-eng-btn" :class="{ liked }" :aria-label="liked ? 'Unlike' : 'Like'" :aria-pressed="liked" @click="toggleLike">
           <i class="fa-solid fa-heart"></i> {{ likeCount }}
         </button>
-        <button class="cpub-eng-btn" :class="{ bookmarked }" @click="toggleBookmark">
+        <button class="cpub-eng-btn" :class="{ bookmarked }" :aria-label="bookmarked ? 'Remove bookmark' : 'Bookmark'" :aria-pressed="bookmarked" @click="toggleBookmark">
           <i class="fa-solid fa-bookmark"></i> Bookmark
         </button>
         <div class="cpub-eng-spacer"></div>
-        <button class="cpub-eng-btn" @click="share"><i class="fa-solid fa-share-nodes"></i> Share</button>
-        <button class="cpub-eng-btn"><i class="fa-solid fa-ellipsis"></i></button>
+        <button class="cpub-eng-btn" aria-label="Share" @click="share"><i class="fa-solid fa-share-nodes"></i> Share</button>
+        <button class="cpub-eng-btn" aria-label="More options"><i class="fa-solid fa-ellipsis"></i></button>
       </div>
 
       <!-- BLOG BODY (PROSE) -->

package/components/views/ExplainerView.vue

@@ -168,21 +168,21 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
       <span class="cpub-progress-text">Section {{ activeSection + 1 }} of {{ totalSections }}</span>
       <div class="cpub-topbar-divider"></div>
       <div class="cpub-nav-btn-group">
-        <button class="cpub-icon-btn" :disabled="activeSection === 0" title="Previous section" @click="prevSection">
+        <button class="cpub-icon-btn" :disabled="activeSection === 0" aria-label="Previous section" @click="prevSection">
           <i class="fa-solid fa-arrow-left"></i>
         </button>
-        <button class="cpub-icon-btn" :disabled="activeSection === totalSections - 1" title="Next section" @click="nextSection">
+        <button class="cpub-icon-btn" :disabled="activeSection === totalSections - 1" aria-label="Next section" @click="nextSection">
           <i class="fa-solid fa-arrow-right"></i>
         </button>
       </div>
       <div class="cpub-topbar-divider"></div>
-      <button class="cpub-icon-btn" :class="{ active: liked }" title="Like" @click="toggleLike">
+      <button class="cpub-icon-btn" :class="{ active: liked }" :aria-label="liked ? 'Unlike' : 'Like'" :aria-pressed="liked" @click="toggleLike">
         <i :class="liked ? 'fa-solid fa-heart' : 'fa-regular fa-heart'"></i>
       </button>
-      <button class="cpub-icon-btn" :class="{ active: bookmarked }" title="Bookmark" @click="toggleBookmark">
+      <button class="cpub-icon-btn" :class="{ active: bookmarked }" :aria-label="bookmarked ? 'Remove bookmark' : 'Bookmark'" :aria-pressed="bookmarked" @click="toggleBookmark">
         <i :class="bookmarked ? 'fa-solid fa-bookmark' : 'fa-regular fa-bookmark'"></i>
       </button>
-      <button class="cpub-icon-btn" title="Share" @click="share">
+      <button class="cpub-icon-btn" aria-label="Share" @click="share">
         <i class="fa-solid fa-arrow-up-from-bracket"></i>
       </button>
       <NuxtLink
@@ -208,14 +208,14 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
             class="cpub-toc-item"
             :class="{ completed: completedSections.has(i), active: activeSection === i }"
           >
-            <a @click="goToSection(i)">
+            <button type="button" :aria-label="`Go to section ${i + 1}: ${section.title}`" @click="goToSection(i)">
               <span class="cpub-toc-icon">
                 <i v-if="completedSections.has(i)" class="fa-solid fa-check"></i>
                 <i v-else-if="activeSection === i" class="fa-solid fa-arrow-right"></i>
               </span>
               <span class="cpub-toc-num">{{ String(i + 1).padStart(2, '0') }}</span>
               <span class="cpub-toc-label">{{ section.title }}</span>
-            </a>
+            </button>
           </li>
         </ul>
 
@@ -291,14 +291,17 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
               </button>
               <div v-else></div>
 
-              <div class="cpub-progress-dots">
-                <div
+              <div class="cpub-progress-dots" role="group" aria-label="Section progress">
+                <button
                   v-for="(_, i) in totalSections"
                   :key="i"
+                  type="button"
                   class="cpub-dot"
                   :class="{ done: completedSections.has(i), active: i === activeSection }"
+                  :aria-label="`Section ${i + 1}`"
+                  :aria-current="i === activeSection ? 'step' : undefined"
                   @click="goToSection(i)"
-                ></div>
+                ></button>
               </div>
 
               <button v-if="activeSection < totalSections - 1" class="cpub-next-btn" @click="nextSection">
@@ -430,22 +433,26 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
   border-bottom: 1px solid var(--border);
 }
 .cpub-toc-list { list-style: none; padding: 6px 0; }
-.cpub-toc-item a {
+.cpub-toc-item button {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 14px;
-  text-decoration: none;
+  width: 100%;
+  background: none;
+  border: none;
+  text-align: left;
   color: var(--text-dim);
   font-size: 12px;
+  font-family: inherit;
   line-height: 1.4;
   border-left: 3px solid transparent;
   transition: background 0.1s, color 0.1s, border-color 0.1s;
   cursor: pointer;
 }
-.cpub-toc-item a:hover { background: var(--surface2); color: var(--text); }
-.cpub-toc-item.active a { background: var(--accent-bg); border-left-color: var(--accent); color: var(--accent); font-weight: 500; }
-.cpub-toc-item.completed a { color: var(--text-dim); }
+.cpub-toc-item button:hover { background: var(--surface2); color: var(--text); }
+.cpub-toc-item.active button { background: var(--accent-bg); border-left-color: var(--accent); color: var(--accent); font-weight: 500; }
+.cpub-toc-item.completed button { color: var(--text-dim); }
 .cpub-toc-icon { width: 14px; font-size: 10px; flex-shrink: 0; text-align: center; }
 .cpub-toc-item.completed .cpub-toc-icon { color: var(--green); }
 .cpub-toc-item.active .cpub-toc-icon { color: var(--accent); }
@@ -669,6 +676,8 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
 .cpub-dot {
   width: 7px;
   height: 7px;
+  padding: 0;
+  border: none;
   border-radius: 50%;
   background: var(--border2);
   transition: background 0.15s, transform 0.15s;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.3.17",
+  "version": "0.3.19",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -45,14 +45,14 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.5.0",
-    "@commonpub/config": "0.7.0",
     "@commonpub/docs": "0.5.2",
+    "@commonpub/config": "0.7.0",
     "@commonpub/editor": "0.5.0",
-    "@commonpub/protocol": "0.9.4",
-    "@commonpub/server": "2.12.1",
     "@commonpub/learning": "0.5.0",
-    "@commonpub/ui": "0.7.1",
-    "@commonpub/schema": "0.8.12"
+    "@commonpub/protocol": "0.9.4",
+    "@commonpub/server": "2.13.0",
+    "@commonpub/schema": "0.8.12",
+    "@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);