@commonpub/layer 0.8.2 → 0.8.4

package/components/contest/ContestSidebar.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { Serialized, ContestDetail } from '@commonpub/server';
+
+defineProps<{
+  contest: Serialized<ContestDetail> | null;
+  isOwner?: boolean;
+  isJudge?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'copy-link'): void;
+}>();
+
+function statusClass(status: string): string {
+  const map: Record<string, string> = {
+    upcoming: 'cpub-status-upcoming',
+    active: 'cpub-status-active',
+    judging: 'cpub-status-judging',
+    completed: 'cpub-status-completed',
+    cancelled: 'cpub-status-cancelled',
+  };
+  return map[status] ?? '';
+}
+</script>
+
+<template>
+  <div class="cpub-sidebar">
+    <!-- STATUS -->
+    <div class="cpub-sb-card">
+      <div class="cpub-sb-title"><i class="fa-solid fa-circle-info"></i> Status</div>
+      <div class="cpub-sb-body">
+        <div class="cpub-sb-row">
+          <strong>Status:</strong>
+          <span class="cpub-sb-status" :class="statusClass(contest?.status ?? '')">{{ contest?.status ?? 'unknown' }}</span>
+        </div>
+        <div v-if="contest?.startDate" class="cpub-sb-row"><strong>Starts:</strong> {{ new Date(contest.startDate).toLocaleDateString() }}</div>
+        <div v-if="contest?.endDate" class="cpub-sb-row"><strong>Ends:</strong> {{ new Date(contest.endDate).toLocaleDateString() }}</div>
+        <div v-if="contest?.judgingEndDate" class="cpub-sb-row"><strong>Judging ends:</strong> {{ new Date(contest.judgingEndDate).toLocaleDateString() }}</div>
+        <div class="cpub-sb-row"><strong>Entries:</strong> {{ contest?.entryCount ?? 0 }}</div>
+      </div>
+    </div>
+
+    <!-- LINKS -->
+    <div class="cpub-sb-card">
+      <div class="cpub-sb-title"><i class="fa-solid fa-share-nodes"></i> Share</div>
+      <div class="cpub-sb-actions">
+        <button class="cpub-btn cpub-btn-sm cpub-sb-btn" @click="emit('copy-link')"><i class="fa fa-link"></i> Copy Link</button>
+      </div>
+    </div>
+
+    <NuxtLink v-if="isOwner" :to="`/contests/${contest?.slug}/edit`" class="cpub-btn cpub-sb-link">
+      <i class="fa-solid fa-pen-to-square"></i> Edit Contest
+    </NuxtLink>
+
+    <NuxtLink v-if="isJudge && (contest?.status === 'judging')" :to="`/contests/${contest?.slug}/judge`" class="cpub-btn cpub-sb-link cpub-sb-judge">
+      <i class="fa-solid fa-gavel"></i> Judge Entries
+    </NuxtLink>
+
+    <NuxtLink v-if="contest?.status === 'completed'" :to="`/contests/${contest.slug}/results`" class="cpub-btn cpub-sb-link">
+      <i class="fa-solid fa-ranking-star"></i> View Results
+    </NuxtLink>
+
+    <NuxtLink to="/contests" class="cpub-btn cpub-sb-link"><i class="fa fa-arrow-left"></i> All Contests</NuxtLink>
+  </div>
+</template>
+
+<style scoped>
+.cpub-sb-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow-md); }
+.cpub-sb-title { font-size: 11px; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; display: flex; align-items: center; gap: 5px; }
+.cpub-sb-body { font-size: 12px; color: var(--text-dim); display: flex; flex-direction: column; gap: 8px; }
+.cpub-sb-row { display: flex; align-items: center; gap: 6px; }
+.cpub-sb-status { font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; padding: 2px 8px; border: var(--border-width-default) solid; }
+.cpub-status-upcoming { color: var(--yellow); border-color: var(--yellow-border); background: var(--yellow-bg); }
+.cpub-status-active { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
+.cpub-status-judging { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }
+.cpub-status-completed { color: var(--text-faint); border-color: var(--border2); background: var(--surface2); }
+.cpub-status-cancelled { color: var(--red); border-color: var(--red-border); background: var(--red-bg); }
+
+.cpub-sb-actions { display: flex; gap: 6px; flex-wrap: wrap; }
+.cpub-sb-btn { flex: 1; justify-content: center; }
+.cpub-sb-link { width: 100%; text-align: center; display: block; margin-top: 12px; }
+.cpub-sb-judge { color: var(--accent); border-color: var(--accent-border); }
+</style>

package/components/editors/ArticleEditor.vue

@@ -97,6 +97,24 @@ const uploadedFiles = ref<UploadedAsset[]>([]);
 const uploadError = ref('');
 const uploading = ref(false);
 
+// Load existing uploads on mount
+onMounted(async () => {
+  try {
+    const files = await $fetch<Array<{ originalName: string; sizeBytes: number; mimeType: string; url: string }>>('/api/files/mine?limit=30');
+    uploadedFiles.value = files.map((f) => ({
+      name: f.originalName,
+      size: f.sizeBytes < 1024 * 1024
+        ? `${(f.sizeBytes / 1024).toFixed(0)} KB`
+        : `${(f.sizeBytes / 1024 / 1024).toFixed(1)} MB`,
+      type: f.mimeType.startsWith('image/') ? 'image' as const : 'file' as const,
+      url: f.url,
+      mimeType: f.mimeType,
+    }));
+  } catch {
+    // Not logged in or API unavailable — empty assets is fine
+  }
+});
+
 function onAssetUpload(event: Event): void {
   const input = event.target as HTMLInputElement;
   if (!input.files?.length) return;
@@ -143,7 +161,7 @@ function insertAsset(asset: UploadedAsset): void {
     const idx = props.blockEditor.selectedBlockId.value
       ? props.blockEditor.getBlockIndex(props.blockEditor.selectedBlockId.value) + 1
       : undefined;
-    props.blockEditor.addBlock('image', { url: asset.url, alt: asset.name }, idx);
+    props.blockEditor.addBlock('image', { src: asset.url, alt: asset.name }, idx);
   } else {
     // Copy URL to clipboard for non-image files
     navigator.clipboard.writeText(asset.url).catch(() => {});

package/components/editors/BlogEditor.vue

@@ -549,7 +549,7 @@ const canvasMaxWidth = computed(() => {
   background: var(--text-faint); top: 2px; left: 2px; transition: all 0.15s;
 }
 .cpub-be-toggle-switch input:checked + .cpub-be-toggle-track { background: var(--accent); border-color: var(--border); }
-.cpub-be-toggle-switch input:checked + .cpub-be-toggle-track::after { left: 16px; background: #fff; }
+.cpub-be-toggle-switch input:checked + .cpub-be-toggle-track::after { left: 16px; background: var(--color-text-inverse); }
 .cpub-be-toggle-label { font-size: 12px; color: var(--text-dim); }
 
 /* Author row */

package/components/editors/DocsPageTree.vue

@@ -21,6 +21,7 @@ const emit = defineEmits<{
   select: [pageId: string];
   create: [parentId: string | null, title: string];
   rename: [pageId: string, title: string];
+  duplicate: [pageId: string];
   delete: [pageId: string];
   reorder: [pageIds: string[]];
   reparent: [pageId: string, newParentId: string | null];
@@ -145,6 +146,12 @@ function contextDelete(): void {
   closeContext();
 }
 
+function contextDuplicate(): void {
+  if (!contextMenu.value) return;
+  emit('duplicate', contextMenu.value.pageId);
+  closeContext();
+}
+
 function contextAddChild(): void {
   if (!contextMenu.value) return;
   const parentId = contextMenu.value.pageId;
@@ -333,6 +340,9 @@ onUnmounted(() => {
         <button class="cpub-tree-context-item" @click="contextRename">
           <i class="fa-solid fa-pen" /> Rename
         </button>
+        <button class="cpub-tree-context-item" @click="contextDuplicate">
+          <i class="fa-solid fa-copy" /> Duplicate
+        </button>
         <button class="cpub-tree-context-item" @click="contextAddChild">
           <i class="fa-solid fa-folder-plus" /> Add Child
         </button>

package/components/hub/HubHero.vue

@@ -63,7 +63,7 @@ const isCompanyHub = computed(() => hubType.value === 'company');
 
 .cpub-hub-banner {
   height: 180px;
-  background: linear-gradient(135deg, var(--accent) 0%, #006b6b 50%, var(--accent-border) 100%);
+  background: linear-gradient(135deg, var(--accent) 0%, var(--teal) 50%, var(--accent-border) 100%);
   position: relative;
   overflow: hidden;
   border-bottom: var(--border-width-default) solid var(--border);

package/composables/useSanitize.ts

@@ -1,15 +1,118 @@
-// HTML sanitization for v-html bindings.
-//
-// Content is sanitized at the API/storage layer:
-// - Local content: structured blocks via TipTap (no raw HTML injection)
-// - Federated content: sanitized on ingest (inboxHandlers.ts → sanitizeHtml)
-//
-// This composable provides the interface for components that use v-html,
-// passing content through since it's already clean.
+/**
+ * Client-side HTML sanitizer for v-html bindings.
+ *
+ * Defense-in-depth: content is also sanitized server-side at ingest
+ * (protocol/sanitize.ts for federated content, TipTap for local content).
+ * This provides a second barrier in case of any server-side bypass.
+ *
+ * Mirrors the allowlist from @commonpub/protocol/sanitize.ts.
+ */
+
+const ALLOWED_ELEMENTS = new Set([
+  'p', 'br', 'hr',
+  'a',
+  'img',
+  'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+  'ul', 'ol', 'li',
+  'blockquote',
+  'pre', 'code',
+  'em', 'strong', 'b', 'i', 'u', 's', 'del', 'ins',
+  'sub', 'sup',
+  'table', 'thead', 'tbody', 'tr', 'th', 'td',
+  'dl', 'dt', 'dd',
+  'details', 'summary',
+  'span',
+]);
+
+const ALLOWED_ATTRIBUTES: Record<string, Set<string>> = {
+  a: new Set(['href', 'rel', 'title', 'class']),
+  img: new Set(['src', 'alt', 'title', 'width', 'height', 'class']),
+  td: new Set(['colspan', 'rowspan']),
+  th: new Set(['colspan', 'rowspan', 'scope']),
+  ol: new Set(['start', 'type']),
+  code: new Set(['class']),
+  span: new Set(['class']),
+  pre: new Set(['class']),
+  blockquote: new Set(['class']),
+  p: new Set(['class']),
+};
+
+const SAFE_URL_SCHEMES = new Set(['https:', 'http:', 'mailto:']);
+const DANGEROUS_URL_PATTERNS = [/^javascript:/i, /^vbscript:/i, /^blob:/i];
+const SAFE_DATA_URI_PATTERN = /^data:image\/(png|jpeg|jpg|gif|webp|svg\+xml);base64,/i;
+
+function isSafeUrl(url: string): boolean {
+  const trimmed = url.trim();
+  for (const pattern of DANGEROUS_URL_PATTERNS) {
+    if (pattern.test(trimmed)) return false;
+  }
+  if (/^data:/i.test(trimmed)) {
+    return SAFE_DATA_URI_PATTERN.test(trimmed);
+  }
+  try {
+    const parsed = new URL(trimmed, 'https://placeholder.invalid');
+    if (!SAFE_URL_SCHEMES.has(parsed.protocol)) return false;
+  } catch {
+    // Relative URLs are fine
+  }
+  return true;
+}
+
+function escapeAttrValue(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
 
 /** Sanitize HTML for safe rendering via v-html */
 export function sanitizeBlockHtml(html: string): string {
-  return html;
+  if (!html || typeof html !== 'string') return '';
+
+  let result = html;
+
+  // Strip HTML comments
+  result = result.replace(/<!--[\s\S]*?-->/g, '');
+
+  // Process all HTML tags
+  result = result.replace(/<\/?([a-zA-Z][a-zA-Z0-9]*)\b([^>]*)?\/?>/g, (match, tagName, attrs) => {
+    const tag = (tagName as string).toLowerCase();
+
+    if (!ALLOWED_ELEMENTS.has(tag)) return '';
+    if (match.startsWith('</')) return `</${tag}>`;
+
+    const allowedAttrs = ALLOWED_ATTRIBUTES[tag];
+    if (!attrs || !allowedAttrs) {
+      const selfClose = match.endsWith('/>') ? ' /' : '';
+      return `<${tag}${selfClose}>`;
+    }
+
+    const safeAttrs: string[] = [];
+    const attrRegex = /([a-zA-Z_][\w-]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|(\S+)))?/g;
+    let attrMatch: RegExpExecArray | null;
+
+    while ((attrMatch = attrRegex.exec(attrs as string)) !== null) {
+      const attrName = attrMatch[1]!.toLowerCase();
+      const attrValue = attrMatch[2] ?? attrMatch[3] ?? attrMatch[4] ?? '';
+
+      if (attrName.startsWith('on')) continue;
+      if (attrName === 'style') continue;
+      if (!allowedAttrs.has(attrName)) continue;
+
+      if ((attrName === 'href' || attrName === 'src') && !isSafeUrl(attrValue)) {
+        continue;
+      }
+
+      safeAttrs.push(`${attrName}="${escapeAttrValue(attrValue)}"`);
+    }
+
+    const attrsStr = safeAttrs.length > 0 ? ' ' + safeAttrs.join(' ') : '';
+    const selfClose = match.endsWith('/>') ? ' /' : '';
+    return `<${tag}${attrsStr}${selfClose}>`;
+  });
+
+  return result;
 }
 
 /** Composable wrapper for template use */

package/layouts/default.vue

@@ -85,7 +85,7 @@ const userUsername = computed(() => user.value?.username ?? '');
 
         <!-- Learn dropdown -->
         <div v-if="learning || docs" class="cpub-nav-dropdown">
-          <button class="cpub-nav-link cpub-nav-trigger" :class="{ 'cpub-nav-trigger--open': openDropdown === 'learn' }" @click.stop="toggleDropdown('learn')">
+          <button class="cpub-nav-link cpub-nav-trigger" :class="{ 'cpub-nav-trigger--open': openDropdown === 'learn' }" aria-haspopup="true" :aria-expanded="openDropdown === 'learn'" @click.stop="toggleDropdown('learn')">
             <i class="fa-solid fa-graduation-cap"></i> Learn <i class="fa-solid fa-chevron-down cpub-nav-caret" />
           </button>
           <div v-if="openDropdown === 'learn'" class="cpub-nav-panel">
@@ -97,7 +97,7 @@ const userUsername = computed(() => user.value?.username ?? '');
 
         <!-- Build dropdown -->
         <div class="cpub-nav-dropdown">
-          <button class="cpub-nav-link cpub-nav-trigger" :class="{ 'cpub-nav-trigger--open': openDropdown === 'build' }" @click.stop="toggleDropdown('build')">
+          <button class="cpub-nav-link cpub-nav-trigger" :class="{ 'cpub-nav-trigger--open': openDropdown === 'build' }" aria-haspopup="true" :aria-expanded="openDropdown === 'build'" @click.stop="toggleDropdown('build')">
             <i class="fa-solid fa-hammer"></i> Build <i class="fa-solid fa-chevron-down cpub-nav-caret" />
           </button>
           <div v-if="openDropdown === 'build'" class="cpub-nav-panel">
@@ -108,7 +108,7 @@ const userUsername = computed(() => user.value?.username ?? '');
 
         <!-- Read dropdown -->
         <div class="cpub-nav-dropdown">
-          <button class="cpub-nav-link cpub-nav-trigger" :class="{ 'cpub-nav-trigger--open': openDropdown === 'read' }" @click.stop="toggleDropdown('read')">
+          <button class="cpub-nav-link cpub-nav-trigger" :class="{ 'cpub-nav-trigger--open': openDropdown === 'read' }" aria-haspopup="true" :aria-expanded="openDropdown === 'read'" @click.stop="toggleDropdown('read')">
             <i class="fa-solid fa-newspaper"></i> Read <i class="fa-solid fa-chevron-down cpub-nav-caret" />
           </button>
           <div v-if="openDropdown === 'read'" class="cpub-nav-panel">
@@ -118,7 +118,7 @@ const userUsername = computed(() => user.value?.username ?? '');
 
         <!-- Watch dropdown -->
         <div v-if="video" class="cpub-nav-dropdown">
-          <button class="cpub-nav-link cpub-nav-trigger" :class="{ 'cpub-nav-trigger--open': openDropdown === 'watch' }" @click.stop="toggleDropdown('watch')">
+          <button class="cpub-nav-link cpub-nav-trigger" :class="{ 'cpub-nav-trigger--open': openDropdown === 'watch' }" aria-haspopup="true" :aria-expanded="openDropdown === 'watch'" @click.stop="toggleDropdown('watch')">
             <i class="fa-solid fa-play"></i> Watch <i class="fa-solid fa-chevron-down cpub-nav-caret" />
           </button>
           <div v-if="openDropdown === 'watch'" class="cpub-nav-panel">
@@ -145,11 +145,11 @@ const userUsername = computed(() => user.value?.username ?? '');
         <template v-if="isAuthenticated">
           <NuxtLink to="/messages" class="cpub-icon-btn" title="Messages" aria-label="Messages">
             <i class="fa-solid fa-envelope"></i>
-            <span v-if="unreadMessages > 0" class="cpub-notif-dot" />
+            <span v-if="unreadMessages > 0" class="cpub-notif-badge" aria-label="unread messages">{{ unreadMessages > 99 ? '99+' : unreadMessages }}</span>
           </NuxtLink>
           <NuxtLink to="/notifications" class="cpub-icon-btn" title="Notifications" aria-label="Notifications">
             <i class="fa-solid fa-bell"></i>
-            <span v-if="unreadCount > 0" class="cpub-notif-dot" />
+            <span v-if="unreadCount > 0" class="cpub-notif-badge" aria-label="unread notifications">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
           </NuxtLink>
           <NuxtLink to="/create" class="cpub-btn-new" aria-label="Create new content">
             <i class="fa-solid fa-plus"></i> <span class="cpub-new-text">New</span>
@@ -336,7 +336,7 @@ const userUsername = computed(() => user.value?.username ?? '');
 
 .cpub-icon-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: var(--border-width-default) solid transparent; color: var(--text-dim); font-size: 13px; position: relative; transition: all 0.15s; text-decoration: none; }
 .cpub-icon-btn:hover { background: var(--surface2); border-color: var(--border); color: var(--text); }
-.cpub-notif-dot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--surface); }
+.cpub-notif-badge { position: absolute; top: 2px; right: 0; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--accent); color: var(--color-text-inverse, #000); font-size: 9px; font-weight: 700; font-family: var(--font-mono); line-height: 14px; text-align: center; border: 1.5px solid var(--surface); }
 
 .cpub-btn-new { display: flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--accent); border: var(--border-width-default) solid var(--border); color: var(--color-text-inverse); font-size: 12px; font-weight: 600; transition: all 0.15s; box-shadow: var(--shadow-sm); text-decoration: none; cursor: pointer; }
 .cpub-btn-new:hover { box-shadow: var(--shadow-md); transform: translate(-1px, -1px); }

package/middleware/feature-gate.global.ts

@@ -0,0 +1,24 @@
+// Global client-side middleware that mirrors server/middleware/features.ts.
+// Prevents client-side navigation to feature-gated pages when the flag is disabled.
+
+const ROUTE_FEATURE_MAP: Record<string, keyof import('../composables/useFeatures').FeatureFlags> = {
+  '/learn': 'learning',
+  '/docs': 'docs',
+  '/videos': 'video',
+  '/admin': 'admin',
+  '/contests': 'contests',
+  '/explainer': 'explainers',
+};
+
+export default defineNuxtRouteMiddleware((to) => {
+  for (const [prefix, feature] of Object.entries(ROUTE_FEATURE_MAP)) {
+    if (to.path === prefix || to.path.startsWith(prefix + '/')) {
+      const config = useRuntimeConfig();
+      const flags = config.public.features as Record<string, boolean>;
+      if (!flags[feature]) {
+        throw createError({ statusCode: 404, statusMessage: 'Not Found' });
+      }
+      return;
+    }
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -28,6 +28,9 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1010.0",
+    "@commonpub/explainer": "^0.7.11",
+    "@commonpub/schema": "^0.9.11",
+    "@commonpub/server": "^2.29.1",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bold": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.0",
@@ -50,15 +53,12 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/editor": "0.7.9",
+    "@commonpub/auth": "0.5.1",
     "@commonpub/config": "0.9.1",
-    "@commonpub/explainer": "0.7.10",
-    "@commonpub/docs": "0.6.2",
-    "@commonpub/auth": "0.5.0",
+    "@commonpub/protocol": "0.9.9",
     "@commonpub/ui": "0.8.5",
-    "@commonpub/schema": "0.9.6",
-    "@commonpub/protocol": "0.9.8",
-    "@commonpub/server": "2.28.0",
+    "@commonpub/editor": "0.7.9",
+    "@commonpub/docs": "0.6.2",
     "@commonpub/learning": "0.5.0"
   },
   "devDependencies": {

package/pages/[type]/index.vue

@@ -14,7 +14,7 @@ useSeoMeta({
 const sortBy = ref('recent');
 const sortOptions = ['recent', 'popular'] as const;
 
-const { data } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
+const { data, pending } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
   query: computed(() => ({
     status: 'published',
     type: contentType.value,
@@ -38,10 +38,11 @@ const { data } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>(
       </div>
     </div>
 
-    <div class="cpub-listing-grid" v-if="data?.items?.length">
+    <p v-if="pending" class="cpub-listing-empty"><i class="fa-solid fa-circle-notch fa-spin"></i> Loading...</p>
+    <div v-else-if="data?.items?.length" class="cpub-listing-grid">
       <ContentCard v-for="item in data.items" :key="item.id" :item="item" />
     </div>
-    <p class="cpub-listing-empty" v-else>No {{ contentType }}s published yet.</p>
+    <p v-else class="cpub-listing-empty">No {{ contentType }}s published yet.</p>
   </div>
 </template>
 

package/pages/admin/audit.vue

@@ -3,7 +3,7 @@ definePageMeta({ layout: 'admin', middleware: 'auth' });
 
 useSeoMeta({ title: `Audit Log — Admin — ${useSiteName()}` });
 
-const { data: logsData } = await useFetch('/api/admin/audit');
+const { data: logsData, pending } = await useFetch('/api/admin/audit');
 
 interface AuditEntry {
   id: string;
@@ -27,7 +27,8 @@ const logs = computed<AuditEntry[]>(() => {
   <div class="admin-audit">
     <h1 class="admin-page-title">Audit Log</h1>
 
-    <table class="admin-table" v-if="logs.length">
+    <p v-if="pending" class="admin-empty"><i class="fa-solid fa-circle-notch fa-spin"></i> Loading audit log...</p>
+    <table class="admin-table" v-else-if="logs.length">
       <thead>
         <tr>
           <th>Action</th>

package/pages/admin/federation.vue

@@ -4,7 +4,7 @@ useSeoMeta({ title: `Federation — Admin — ${useSiteName()}` });
 
 const activeTab = ref<'activity' | 'mirrors' | 'clients' | 'trusted' | 'tools'>('activity');
 
-const { data: statsData } = await useFetch('/api/admin/federation/stats', {
+const { data: statsData, pending } = await useFetch('/api/admin/federation/stats', {
   default: () => ({ inbound: 0, outbound: 0, pending: 0, failed: 0, followers: 0, following: 0 }),
 });
 
@@ -178,6 +178,12 @@ async function refederate(): Promise<void> {
   <div>
     <h1 class="cpub-admin-title">Federation</h1>
 
+    <!-- Loading -->
+    <div v-if="pending" class="cpub-fed-loading">
+      <i class="fa-solid fa-circle-notch fa-spin"></i> Loading...
+    </div>
+    <template v-else>
+
     <!-- Stats -->
     <div class="cpub-fed-stats">
       <div class="cpub-fed-stat">
@@ -395,10 +401,12 @@ async function refederate(): Promise<void> {
         </div>
       </div>
     </div>
+    </template>
   </div>
 </template>
 
 <style scoped>
+.cpub-fed-loading { display: flex; align-items: center; gap: 8px; padding: 32px; color: var(--text-faint); font-family: var(--font-mono); font-size: 0.8125rem; }
 .cpub-admin-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 20px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
 
 .cpub-fed-stats {

package/pages/admin/index.vue

@@ -2,13 +2,17 @@
 definePageMeta({ layout: 'admin', middleware: 'auth' });
 useSeoMeta({ title: `Admin Dashboard — ${useSiteName()}` });
 
-const { data: stats } = await useFetch('/api/admin/stats');
+const { data: stats, pending } = await useFetch('/api/admin/stats');
 </script>
 
 <template>
   <div class="cpub-admin-dashboard">
     <h1 class="cpub-admin-title">Platform Dashboard</h1>
 
+    <div v-if="pending" class="cpub-admin-loading">
+      <i class="fa-solid fa-circle-notch fa-spin"></i> Loading...
+    </div>
+    <template v-else>
     <div class="cpub-stats-grid" v-if="stats">
       <div class="cpub-stat-card" v-for="stat in [
         { label: 'Users', value: stats.users?.total ?? 0, icon: 'fa-solid fa-users' },
@@ -43,10 +47,12 @@ const { data: stats } = await useFetch('/api/admin/stats');
         </NuxtLink>
       </div>
     </div>
+    </template>
   </div>
 </template>
 
 <style scoped>
+.cpub-admin-loading { display: flex; align-items: center; gap: 8px; padding: var(--space-8, 32px); color: var(--text-faint); }
 .cpub-admin-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-6); }
 .cpub-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-8); }
 .cpub-stat-card { padding: var(--space-5); background: var(--surface); border: var(--border-width-default) solid var(--border); box-shadow: var(--shadow-md); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }