@actuate-media/cms-admin 0.16.1 → 0.18.0

package/src/lib/pages-service.ts

@@ -94,13 +94,28 @@ export interface PagesQuery {
 
 export interface PagesResult {
   pages: Page[]
+  /** number of pages matching the active query (post-filter) */
   total: number
+  /** total pages in the collection, ignoring the active query/filters */
+  grandTotal: number
   page: number
   pageSize: number
   tags: PageTag[]
   authors: PageAuthor[]
 }
 
+/**
+ * The full, unfiltered page set plus its tags and authors. The list view
+ * fetches this once and applies search / sort / group / paging in memory
+ * (see `applyPagesQuery` + `groupPages`), so typing in the search box or
+ * changing the sort never re-downloads the dataset.
+ */
+export interface PagesDataset {
+  pages: Page[]
+  tags: PageTag[]
+  authors: PageAuthor[]
+}
+
 // ─── API row shapes ──────────────────────────────────────────────────
 
 interface DocumentApiRow {
@@ -371,7 +386,13 @@ function statusLabel(s: PageStatus): string {
   return s.charAt(0) + s.slice(1).toLowerCase()
 }
 
-export async function fetchPages(query: PagesQuery = {}): Promise<PagesResult> {
+/**
+ * Fetch the entire page dataset (unfiltered) plus tags and authors. This
+ * is the single network read backing the list view; callers apply query
+ * shaping in memory. Tag page counts and the author list are derived from
+ * the full set so they reflect the dataset, not any active filter.
+ */
+export async function fetchPagesDataset(): Promise<PagesDataset> {
   const authorsMap = await fetchAuthorsMap()
 
   const [pagesRes, tagDocs] = await Promise.all([
@@ -383,8 +404,6 @@ export async function fetchPages(query: PagesQuery = {}): Promise<PagesResult> {
     docToPage(d, authorsMap),
   )
 
-  // Tag page counts come from the full (unfiltered) set so chips and the
-  // tag manager reflect the dataset, not the active query.
   const counts = new Map<string, number>()
   for (const p of allPages) {
     for (const slug of p.tags) counts.set(slug, (counts.get(slug) ?? 0) + 1)
@@ -393,16 +412,6 @@ export async function fetchPages(query: PagesQuery = {}): Promise<PagesResult> {
     .map((d) => docToTag(d, counts.get(d.slug ?? d.id) ?? 0))
     .sort((a, b) => a.sortOrder - b.sortOrder || a.name.localeCompare(b.name))
 
-  const filtered = applyPagesQuery(allPages, query)
-
-  // Pagination only applies to the flat (ungrouped) view; grouped views
-  // render every match so the buckets stay complete.
-  const grouped = query.groupBy && query.groupBy !== 'none'
-  const page = Math.max(1, query.page ?? 1)
-  const pageSize = Math.max(1, query.pageSize ?? 25)
-  const paged = grouped ? filtered : filtered.slice((page - 1) * pageSize, page * pageSize)
-
-  // Authors present in the dataset (for the Author filter dropdown).
   const seen = new Set<string>()
   const authors: PageAuthor[] = []
   for (const p of allPages) {
@@ -413,7 +422,35 @@ export async function fetchPages(query: PagesQuery = {}): Promise<PagesResult> {
   }
   authors.sort((a, b) => a.name.localeCompare(b.name))
 
-  return { pages: paged, total: filtered.length, page, pageSize, tags, authors }
+  return { pages: allPages, tags, authors }
+}
+
+/**
+ * Query a paginated, filtered page list. Retained for non-list callers
+ * (tag detach/merge) and tests; the list view uses `fetchPagesDataset`
+ * directly and shapes the result in memory.
+ */
+export async function fetchPages(query: PagesQuery = {}): Promise<PagesResult> {
+  const { pages: allPages, tags, authors } = await fetchPagesDataset()
+
+  const filtered = applyPagesQuery(allPages, query)
+
+  // Pagination only applies to the flat (ungrouped) view; grouped views
+  // render every match so the buckets stay complete.
+  const grouped = query.groupBy && query.groupBy !== 'none'
+  const page = Math.max(1, query.page ?? 1)
+  const pageSize = Math.max(1, query.pageSize ?? 25)
+  const paged = grouped ? filtered : filtered.slice((page - 1) * pageSize, page * pageSize)
+
+  return {
+    pages: paged,
+    total: filtered.length,
+    grandTotal: allPages.length,
+    page,
+    pageSize,
+    tags,
+    authors,
+  }
 }
 
 export async function fetchPageById(pageId: string): Promise<Page | null> {
@@ -432,34 +469,54 @@ export interface BulkResult {
   failed: number
 }
 
+/**
+ * Run `task` over `items` with a bounded number of concurrent requests so
+ * a large selection doesn't fire one-at-a-time (slow) or all-at-once
+ * (overwhelms the API / rate limiter). Each task resolves to `true` on
+ * success; failures are counted, never thrown, so one bad row can't abort
+ * the batch.
+ */
+async function mapWithConcurrency<T>(
+  items: T[],
+  limit: number,
+  task: (item: T) => Promise<boolean>,
+): Promise<BulkResult> {
+  let ok = 0
+  let failed = 0
+  let cursor = 0
+  const workerCount = Math.max(1, Math.min(limit, items.length))
+  const worker = async () => {
+    while (cursor < items.length) {
+      const item = items[cursor++]!
+      const success = await task(item).catch(() => false)
+      if (success) ok++
+      else failed++
+    }
+  }
+  await Promise.all(Array.from({ length: workerCount }, worker))
+  return { ok, failed }
+}
+
 export async function bulkUpdatePages(
   ids: string[],
   payload: { status?: PageStatus; data?: Record<string, unknown> },
 ): Promise<BulkResult> {
-  let ok = 0
-  let failed = 0
-  for (const id of ids) {
+  return mapWithConcurrency(ids, 5, async (id) => {
     const res = await cmsApi(`/collections/${PAGES_COLLECTION}/${encodeURIComponent(id)}`, {
       method: 'PUT',
       body: JSON.stringify(payload),
     })
-    if (res.error) failed++
-    else ok++
-  }
-  return { ok, failed }
+    return !res.error
+  })
 }
 
 export async function bulkDeletePages(ids: string[]): Promise<BulkResult> {
-  let ok = 0
-  let failed = 0
-  for (const id of ids) {
+  return mapWithConcurrency(ids, 5, async (id) => {
     const res = await cmsApi(`/collections/${PAGES_COLLECTION}/${encodeURIComponent(id)}`, {
       method: 'DELETE',
     })
-    if (res.error) failed++
-    else ok++
-  }
-  return { ok, failed }
+    return !res.error
+  })
 }
 
 /**
@@ -472,11 +529,9 @@ export async function bulkChangePageTags(
   pages: Pick<Page, 'id' | 'tags' | 'primaryTagId'>[],
   change: { add?: string[]; remove?: string[] },
 ): Promise<BulkResult> {
-  let ok = 0
-  let failed = 0
   const add = new Set(change.add ?? [])
   const remove = new Set(change.remove ?? [])
-  for (const p of pages) {
+  return mapWithConcurrency(pages, 5, async (p) => {
     const next = new Set(p.tags)
     for (const t of add) next.add(t)
     for (const t of remove) next.delete(t)
@@ -487,10 +542,8 @@ export async function bulkChangePageTags(
       method: 'PUT',
       body: JSON.stringify({ data: { tags, primaryTag } }),
     })
-    if (res.error) failed++
-    else ok++
-  }
-  return { ok, failed }
+    return !res.error
+  })
 }
 
 // ─── Tag CRUD ────────────────────────────────────────────────────────

package/src/lib/useApiData.ts

@@ -6,6 +6,34 @@ export interface UseApiDataOptions {
   maxRetries?: number
   /** Base delay in ms for exponential backoff (default 1000). Actual delay = base * 2^attempt. */
   retryBaseMs?: number
+  /**
+   * When set, successful responses are cached in-memory keyed by endpoint
+   * for this many ms and reused on the next mount, skipping the network
+   * (cache-first). Opt-in — omit to keep the default always-fetch
+   * behaviour. `refetch()` always bypasses the cache. Useful for views
+   * that remount frequently (e.g. dashboard navigation) so they don't
+   * re-issue the same requests on every visit.
+   */
+  cacheMs?: number
+}
+
+/**
+ * Process-wide response cache for `cacheMs` consumers. Keyed by endpoint
+ * (note: the locale query param is appended downstream by `cmsApi`, so a
+ * locale switch is not reflected here — only enable `cacheMs` for
+ * locale-invariant endpoints like `/stats`).
+ */
+const responseCache = new Map<string, { data: unknown; at: number }>()
+
+function readCache<T>(endpoint: string, cacheMs: number): { value: T | null } | null {
+  const hit = responseCache.get(endpoint)
+  if (hit && Date.now() - hit.at < cacheMs) return { value: hit.data as T | null }
+  return null
+}
+
+/** Test-only: drop all cached responses so cases don't bleed into each other. */
+export function __clearApiDataCache(): void {
+  responseCache.clear()
 }
 
 export interface UseApiDataResult<T> {
@@ -22,9 +50,12 @@ export function useApiData<T>(
   defaultValue: T | null = null,
   options: UseApiDataOptions = {},
 ): UseApiDataResult<T> {
-  const { maxRetries = 3, retryBaseMs = 1000 } = options
-  const [data, setData] = useState<T | null>(defaultValue)
-  const [loading, setLoading] = useState(endpoint !== null)
+  const { maxRetries = 3, retryBaseMs = 1000, cacheMs } = options
+  // Read the cache synchronously for the initial state so a warm cache
+  // hit paints immediately instead of flashing a loading spinner.
+  const cachedInitial = endpoint && cacheMs ? readCache<T>(endpoint, cacheMs) : null
+  const [data, setData] = useState<T | null>(cachedInitial ? cachedInitial.value : defaultValue)
+  const [loading, setLoading] = useState(endpoint !== null && !cachedInitial)
   const [error, setError] = useState<string | null>(null)
   const [exhausted, setExhausted] = useState(false)
   const abortRef = useRef<AbortController | null>(null)
@@ -32,12 +63,24 @@ export function useApiData<T>(
   const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   const fetchData = useCallback(
-    async (isRetry = false) => {
+    async (isRetry = false, forceRefresh = false) => {
       if (!endpoint) {
         setLoading(false)
         return
       }
 
+      // Cache-first: a fresh cached response short-circuits the network.
+      // `refetch()` passes `forceRefresh` to bypass this.
+      if (!isRetry && !forceRefresh && cacheMs) {
+        const hit = readCache<T>(endpoint, cacheMs)
+        if (hit) {
+          setData(hit.value)
+          setError(null)
+          setLoading(false)
+          return
+        }
+      }
+
       abortRef.current?.abort()
       const controller = new AbortController()
       abortRef.current = controller
@@ -65,12 +108,14 @@ export function useApiData<T>(
         setExhausted(true)
         setLoading(false)
       } else {
-        setData(res.data ?? null)
+        const value = res.data ?? null
+        setData(value)
         setLoading(false)
         retryCountRef.current = 0
+        if (cacheMs) responseCache.set(endpoint, { data: value, at: Date.now() })
       }
     },
-    [endpoint, maxRetries, retryBaseMs],
+    [endpoint, maxRetries, retryBaseMs, cacheMs],
   )
 
   const manualRefetch = useCallback(() => {
@@ -80,7 +125,7 @@ export function useApiData<T>(
     }
     retryCountRef.current = 0
     setExhausted(false)
-    fetchData(false)
+    fetchData(false, true)
   }, [fetchData])
 
   useEffect(() => {

package/src/styles/theme.css

@@ -18,6 +18,27 @@
   --accent-foreground: #030213;
   --destructive: #d4183d;
   --destructive-foreground: #ffffff;
+  /*
+   * Semantic status + brand tokens.
+   * ----------------------------------------------------------------
+   * `destructive` already covers the "error/danger" state; these add
+   * the remaining semantic states the admin needs (success / warning /
+   * info) plus the violet brand accent used for links and primary
+   * affordances. Values are tuned to read as TEXT on both the card
+   * surface and their own `/10` tint (badge backgrounds), and as a
+   * solid fill (dots, progress bars). The `*-foreground` variants are
+   * for text placed on a SOLID fill. Light values match the previous
+   * emerald/amber/blue/violet-600 palette so tokenizing is a no-op
+   * visually; dark values track the *-300/*-400 tints used before.
+   */
+  --success: oklch(0.5 0.13 155);
+  --success-foreground: #ffffff;
+  --warning: oklch(0.52 0.13 73);
+  --warning-foreground: oklch(0.205 0 0);
+  --info: oklch(0.5 0.17 254);
+  --info-foreground: #ffffff;
+  --brand: oklch(0.54 0.23 293);
+  --brand-foreground: #ffffff;
   --border: rgba(0, 0, 0, 0.1);
   --input: transparent;
   --input-background: #f3f3f5;
@@ -59,6 +80,14 @@
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.396 0.141 25.723);
   --destructive-foreground: oklch(0.637 0.237 25.331);
+  --success: oklch(0.72 0.15 155);
+  --success-foreground: oklch(0.205 0 0);
+  --warning: oklch(0.8 0.13 80);
+  --warning-foreground: oklch(0.205 0 0);
+  --info: oklch(0.72 0.14 252);
+  --info-foreground: oklch(0.205 0 0);
+  --brand: oklch(0.72 0.18 293);
+  --brand-foreground: oklch(0.205 0 0);
   --border: oklch(0.269 0 0);
   --input: oklch(0.269 0 0);
   --input-background: oklch(0.205 0 0);
@@ -98,6 +127,14 @@
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-brand: var(--brand);
+  --color-brand-foreground: var(--brand-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-input-background: var(--input-background);

package/src/views/Dashboard.tsx

@@ -217,33 +217,32 @@ function authorAvatar(name: string | null | undefined): { color: string; initial
   return { color, initials }
 }
 
+/**
+ * Semantic state styling uses theme tokens (`success` / `warning` / `info`
+ * / `brand`) so the dashboard tracks the design system in both light and
+ * dark mode. Two deliberate exceptions remain as raw values:
+ *   - Error states keep `text-red-*` / `bg-red-*`. The `--destructive`
+ *     token's dark value is intentionally dark (low contrast as TEXT on a
+ *     dark card), so tokenizing error text here would regress contrast.
+ *     Promoting error to a token is a separate, admin-wide change.
+ *   - `AVATAR_COLORS` are dynamic per-author hashes (allowed: truly
+ *     dynamic values, applied via inline style).
+ */
 function statusBadge(status: string): {
   label: string
   cls: string
 } {
   switch (status) {
     case 'PUBLISHED':
-      return {
-        label: 'Published',
-        cls: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950/60 dark:text-emerald-300',
-      }
+      return { label: 'Published', cls: 'bg-success/10 text-success' }
     case 'DRAFT':
-      return {
-        label: 'Draft',
-        cls: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
-      }
+      return { label: 'Draft', cls: 'bg-muted text-muted-foreground' }
     case 'SCHEDULED':
-      return {
-        label: 'Scheduled',
-        cls: 'bg-amber-100 text-amber-800 dark:bg-amber-950/60 dark:text-amber-300',
-      }
+      return { label: 'Scheduled', cls: 'bg-warning/10 text-warning' }
     case 'IN_REVIEW':
-      return {
-        label: 'In Review',
-        cls: 'bg-blue-100 text-blue-800 dark:bg-blue-950/60 dark:text-blue-300',
-      }
+      return { label: 'In Review', cls: 'bg-info/10 text-info' }
     default:
-      return { label: status, cls: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300' }
+      return { label: status, cls: 'bg-muted text-muted-foreground' }
   }
 }
 
@@ -263,12 +262,31 @@ interface StatCardData {
 
 export function Dashboard({ config, session, onNavigate }: DashboardProps) {
   const nav = (path: string) => onNavigate?.(path)
-  const { data: stats, loading, error, exhausted, refetch } = useApiData<DashboardStats>('/stats')
-  const { data: health } = useApiData<HealthData>('/health')
-  const { data: delivery, loading: deliveryLoading } =
-    useApiData<DeliveryStats>('/stats/api-delivery')
-  const { data: contentHealthData, loading: contentHealthLoading } =
-    useApiData<ContentHealthData>('/stats/content-health')
+  // Cache responses for 30s so navigating away and back doesn't re-fire
+  // all four dashboard requests on every visit. First load is unaffected
+  // (cold cache) and each request still streams independently; `refetch`
+  // (the Retry button) bypasses the cache.
+  const DASH_CACHE_MS = 30_000
+  const {
+    data: stats,
+    loading,
+    error,
+    exhausted,
+    refetch,
+  } = useApiData<DashboardStats>('/stats', null, {
+    cacheMs: DASH_CACHE_MS,
+  })
+  const { data: health } = useApiData<HealthData>('/health', null, { cacheMs: DASH_CACHE_MS })
+  const { data: delivery, loading: deliveryLoading } = useApiData<DeliveryStats>(
+    '/stats/api-delivery',
+    null,
+    { cacheMs: DASH_CACHE_MS },
+  )
+  const { data: contentHealthData, loading: contentHealthLoading } = useApiData<ContentHealthData>(
+    '/stats/content-health',
+    null,
+    { cacheMs: DASH_CACHE_MS },
+  )
 
   // A slow ticker (60s) so the greeting, calendar date, and "x minutes
   // ago" relative times stay correct on a dashboard left open for hours
@@ -311,8 +329,8 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
         label: collectionLabel(primary[0]),
         value: String(counts[primary[0].slug] ?? 0),
         icon: primary[0].type === 'page' ? FileIcon : FileText,
-        iconBg: 'bg-violet-100 dark:bg-violet-950/60',
-        iconColor: 'text-violet-600 dark:text-violet-300',
+        iconBg: 'bg-chart-1/15',
+        iconColor: 'text-chart-1',
         href: `/${primary[0].slug}`,
       })
     } else {
@@ -320,8 +338,8 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
         label: 'Documents',
         value: String(stats?.totalDocuments ?? 0),
         icon: FileText,
-        iconBg: 'bg-violet-100 dark:bg-violet-950/60',
-        iconColor: 'text-violet-600 dark:text-violet-300',
+        iconBg: 'bg-chart-1/15',
+        iconColor: 'text-chart-1',
       })
     }
 
@@ -330,8 +348,8 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
         label: collectionLabel(primary[1]),
         value: String(counts[primary[1].slug] ?? 0),
         icon: primary[1].type === 'page' ? FileIcon : FileText,
-        iconBg: 'bg-cyan-100 dark:bg-cyan-950/60',
-        iconColor: 'text-cyan-600 dark:text-cyan-300',
+        iconBg: 'bg-chart-2/15',
+        iconColor: 'text-chart-2',
         href: `/${primary[1].slug}`,
       })
     }
@@ -344,8 +362,8 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
           ? `${stats.totalMedia} file${stats.totalMedia === 1 ? '' : 's'}`
           : undefined,
       icon: ImageIcon,
-      iconBg: 'bg-emerald-100 dark:bg-emerald-950/60',
-      iconColor: 'text-emerald-600 dark:text-emerald-300',
+      iconBg: 'bg-chart-3/15',
+      iconColor: 'text-chart-3',
       href: '/media',
     })
 
@@ -358,8 +376,8 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
       value: String(formsCount),
       hint: submissions > 0 ? `${submissions} response${submissions === 1 ? '' : 's'}` : undefined,
       icon: ClipboardList,
-      iconBg: 'bg-amber-100 dark:bg-amber-950/60',
-      iconColor: 'text-amber-600 dark:text-amber-300',
+      iconBg: 'bg-chart-4/15',
+      iconColor: 'text-chart-4',
       href: '/forms',
     })
 
@@ -371,8 +389,8 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
       hint: seo > 0 ? (seo >= 70 ? 'Good' : seo >= 40 ? 'Fair' : 'Needs work') : 'No content yet',
       hintUp: seo >= 70,
       icon: Search,
-      iconBg: 'bg-indigo-100 dark:bg-indigo-950/60',
-      iconColor: 'text-indigo-600 dark:text-indigo-300',
+      iconBg: 'bg-chart-5/15',
+      iconColor: 'text-chart-5',
       href: '/seo',
     })
 
@@ -517,7 +535,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
   if (loading && !stats) {
     return (
       <div className="flex h-64 items-center justify-center p-4 sm:p-6">
-        <Loader2 className="h-6 w-6 animate-spin text-violet-600" />
+        <Loader2 className="text-brand h-6 w-6 animate-spin" />
       </div>
     )
   }
@@ -526,13 +544,11 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
     <div className="w-full space-y-5 p-4 sm:p-6 lg:px-8">
       {/* Health banners ────────────────────────────────────────────── */}
       {health && health.status === 'degraded' && (
-        <div className="flex items-start gap-3 rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-900 dark:bg-blue-950/40">
-          <Database className="mt-0.5 h-5 w-5 shrink-0 text-blue-600 dark:text-blue-400" />
+        <div className="border-info/30 bg-info/10 flex items-start gap-3 rounded-lg border p-3">
+          <Database className="text-info mt-0.5 h-5 w-5 shrink-0" />
           <div className="min-w-0 flex-1">
-            <span className="text-sm font-medium text-blue-900 dark:text-blue-200">
-              Database setup required
-            </span>
-            <p className="mt-0.5 text-xs text-blue-700 dark:text-blue-300">
+            <span className="text-info text-sm font-medium">Database setup required</span>
+            <p className="text-muted-foreground mt-0.5 text-xs">
               {!health.databaseConnected
                 ? 'Cannot connect to the database. Check your DATABASE_URL environment variable.'
                 : !health.secretConfigured
@@ -547,14 +563,14 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
       )}
 
       {error && exhausted && (
-        <div className="flex items-center gap-3 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900 dark:bg-amber-950/40">
-          <AlertTriangle className="h-5 w-5 shrink-0 text-amber-600 dark:text-amber-400" />
-          <span className="flex-1 text-sm text-amber-800 dark:text-amber-200">
+        <div className="border-warning/30 bg-warning/10 flex items-center gap-3 rounded-lg border p-3">
+          <AlertTriangle className="text-warning h-5 w-5 shrink-0" />
+          <span className="text-warning flex-1 text-sm">
             Some dashboard data may be unavailable.
           </span>
           <button
             onClick={refetch}
-            className="rounded-lg border border-amber-300 px-3 py-1 text-sm text-amber-700 transition-colors hover:bg-amber-100 dark:border-amber-700 dark:text-amber-200 dark:hover:bg-amber-900/40"
+            className="border-warning/40 text-warning hover:bg-warning/10 rounded-lg border px-3 py-1 text-sm transition-colors"
           >
             Retry
           </button>
@@ -588,7 +604,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
           <button
             key={a.label}
             onClick={a.onClick}
-            className="border-border bg-card inline-flex shrink-0 items-center gap-1.5 rounded-lg border px-3.5 py-2 text-sm shadow-sm transition-colors hover:border-violet-400 hover:bg-violet-50 hover:text-violet-700 dark:hover:bg-violet-950/40 dark:hover:text-violet-300"
+            className="border-border bg-card hover:border-brand/50 hover:bg-brand/10 hover:text-brand inline-flex shrink-0 items-center gap-1.5 rounded-lg border px-3.5 py-2 text-sm shadow-sm transition-colors"
           >
             <a.icon className="h-3.5 w-3.5" />
             {a.label}
@@ -617,7 +633,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
               <p className="text-muted-foreground mt-1 text-xs">{card.label}</p>
               {card.hint && (
                 <p
-                  className={`mt-1.5 text-[11px] ${card.hintUp ? 'text-emerald-600 dark:text-emerald-400' : 'text-muted-foreground'}`}
+                  className={`mt-1.5 text-[11px] ${card.hintUp ? 'text-success' : 'text-muted-foreground'}`}
                 >
                   {card.hint}
                 </p>
@@ -653,7 +669,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
             </div>
             {(stats?.recentDocuments?.length ?? 0) > 8 && (
               <button
-                className="text-xs font-medium text-violet-600 hover:underline dark:text-violet-400"
+                className="text-brand text-xs font-medium hover:underline"
                 onClick={() => setActivityLimit((n) => (n >= 20 ? 8 : 20))}
               >
                 {activityLimit >= 20 ? 'Show less' : 'Show more'}
@@ -721,7 +737,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                 </p>
               </div>
               <button
-                className="text-xs font-medium text-violet-600 hover:underline disabled:cursor-default disabled:no-underline disabled:opacity-50 dark:text-violet-400"
+                className="text-brand text-xs font-medium hover:underline disabled:cursor-default disabled:no-underline disabled:opacity-50"
                 disabled={publishQueue.length === 0}
                 onClick={() => {
                   // We don't have a dedicated "scheduled" admin page, so deep-
@@ -750,7 +766,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                       onClick={() => nav(q.editPath)}
                       className="hover:bg-accent/50 focus-visible:bg-accent/50 flex w-full min-w-0 cursor-pointer items-center gap-2.5 px-4 py-2.5 text-left transition-colors"
                     >
-                      <span className="h-2 w-2 shrink-0 rounded-full bg-amber-500" aria-hidden />
+                      <span className="bg-warning h-2 w-2 shrink-0 rounded-full" aria-hidden />
                       <div className="min-w-0 flex-1">
                         <p className="text-foreground truncate text-sm font-medium">{q.title}</p>
                         <p className="text-muted-foreground truncate text-[11px]">
@@ -775,7 +791,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                 <p className="text-muted-foreground mt-0.5 text-xs">SEO &amp; quality issues</p>
               </div>
               <button
-                className="text-xs font-medium text-violet-600 hover:underline dark:text-violet-400"
+                className="text-brand text-xs font-medium hover:underline"
                 onClick={() => nav('/seo')}
               >
                 Fix issues
@@ -792,9 +808,9 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                 <span
                   className={`text-xs font-medium ${
                     contentHealth.tone === 'ok'
-                      ? 'text-emerald-600 dark:text-emerald-400'
+                      ? 'text-success'
                       : contentHealth.tone === 'warn'
-                        ? 'text-amber-600 dark:text-amber-400'
+                        ? 'text-warning'
                         : contentHealth.tone === 'err'
                           ? 'text-red-600 dark:text-red-400'
                           : 'text-muted-foreground'
@@ -807,9 +823,9 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                 <div
                   className={`h-full rounded-full transition-all ${
                     contentHealth.tone === 'ok'
-                      ? 'bg-emerald-500'
+                      ? 'bg-success'
                       : contentHealth.tone === 'warn'
-                        ? 'bg-amber-500'
+                        ? 'bg-warning'
                         : contentHealth.tone === 'err'
                           ? 'bg-red-500'
                           : 'bg-muted-foreground/40'
@@ -836,7 +852,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                           iss.tone === 'err'
                             ? 'bg-red-500'
                             : iss.tone === 'warn'
-                              ? 'bg-amber-500'
+                              ? 'bg-warning'
                               : 'bg-muted-foreground'
                         }`}
                         aria-hidden
@@ -849,7 +865,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                           iss.tone === 'err'
                             ? 'text-red-600 dark:text-red-400'
                             : iss.tone === 'warn'
-                              ? 'text-amber-600 dark:text-amber-400'
+                              ? 'text-warning'
                               : 'text-muted-foreground'
                         }`}
                       >
@@ -882,7 +898,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
             </p>
           </div>
           <button
-            className="inline-flex items-center gap-1 text-xs font-medium text-violet-600 hover:underline dark:text-violet-400"
+            className="text-brand inline-flex items-center gap-1 text-xs font-medium hover:underline"
             onClick={() => nav('/api-keys')}
           >
             API docs <ExternalLink className="h-3 w-3" />
@@ -1037,9 +1053,9 @@ function DeliveryTile({
 }) {
   const subTone =
     tone === 'ok'
-      ? 'text-emerald-600 dark:text-emerald-400'
+      ? 'text-success'
       : tone === 'warn'
-        ? 'text-amber-600 dark:text-amber-400'
+        ? 'text-warning'
         : tone === 'err'
           ? 'text-red-600 dark:text-red-400'
           : 'text-muted-foreground'