@actuate-media/cms-admin 0.16.0 → 0.17.0

package/src/views/Dashboard.tsx

@@ -15,7 +15,7 @@
  *   >= 1024 (desktop):  stat cards 5-col, main grid is `1fr 320px`
  */
 
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import {
   FileText,
   File as FileIcon,
@@ -119,6 +119,24 @@ function collectionLabel(col: CollectionMeta, plural = true): string {
   return col.labels?.singular ?? fallback
 }
 
+/**
+ * Resolve the correct editor route for a recent/queued document.
+ *
+ * Post-type documents MUST open in the section-based post editor
+ * (`/posts/:type/:id/edit`). Routing them through the generic
+ * `/:collection/:id` handler lands them in the legacy `DocumentEdit`
+ * view, which has no concept of the section model — opening + saving
+ * there silently strips a post's `sections` data. The canonical Pages
+ * collection opens in the full page editor (which wires up preview).
+ * Everything else falls through to the existing generic collection
+ * route, which already resolves correctly.
+ */
+function editPathForDoc(col: CollectionMeta | undefined, collection: string, id: string): string {
+  if (col?.type === 'post') return `/posts/${collection}/${id}/edit`
+  if (collection === 'pages') return `/pages/${id}/edit`
+  return `/${collection}/${id}`
+}
+
 function relativeTime(dateStr: string): string {
   const then = new Date(dateStr).getTime()
   const diff = Date.now() - then
@@ -199,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' }
   }
 }
 
@@ -245,15 +262,44 @@ 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')
-
-  const greeting = useMemo(() => timeOfDayGreeting(), [])
-  const dateStr = useMemo(() => todayDateString(), [])
+  // 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
+  // — without it, a tab opened at 11:58am would read "Good morning" all
+  // afternoon and show stale activity timestamps.
+  const [now, setNow] = useState(() => Date.now())
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 60_000)
+    return () => clearInterval(id)
+  }, [])
+
+  const greeting = useMemo(() => timeOfDayGreeting(), [now])
+  const dateStr = useMemo(() => todayDateString(), [now])
   const userName = useMemo(() => firstNameForGreeting(session), [session])
 
   const collections = useMemo(() => resolveCollections(config), [config])
@@ -283,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 {
@@ -292,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',
       })
     }
 
@@ -302,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}`,
       })
     }
@@ -316,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',
     })
 
@@ -330,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',
     })
 
@@ -343,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',
     })
 
@@ -396,9 +442,12 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
         relTime: relativeTime(d.updatedAt),
         avatar: authorAvatar(d.author),
         statusInfo: statusBadge(d.status),
+        editPath: editPathForDoc(col, d.collection, d.id),
       }
     })
-  }, [stats, collections, activityLimit])
+    // `now` keeps the relative timestamps fresh on a long-open tab.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stats, collections, activityLimit, now])
 
   // ── Publishing queue (scheduled docs only) ──────────────────────────────
   const publishQueue = useMemo(() => {
@@ -415,9 +464,11 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
           type: col ? collectionLabel(col, false) : d.collection,
           date: relativeTime(d.updatedAt),
           author: d.author,
+          editPath: editPathForDoc(col, d.collection, d.id),
         }
       })
-  }, [stats, collections])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stats, collections, now])
 
   // ── Content health (sourced from /stats/content-health) ─────────────────
   // Persisted by the nightly content-health cron. The four issue rows
@@ -484,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>
     )
   }
@@ -493,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
@@ -514,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>
@@ -555,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}
@@ -584,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>
@@ -618,12 +667,14 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
               <h2 className="text-foreground text-sm font-semibold">Recent Activity</h2>
               <p className="text-muted-foreground mt-0.5 text-xs">Last 7 days across all content</p>
             </div>
-            <button
-              className="text-xs font-medium text-violet-600 hover:underline dark:text-violet-400"
-              onClick={() => setActivityLimit((n) => (n >= 20 ? 8 : 20))}
-            >
-              {activity.length >= 20 ? 'Show less' : 'View all'}
-            </button>
+            {(stats?.recentDocuments?.length ?? 0) > 8 && (
+              <button
+                className="text-brand text-xs font-medium hover:underline"
+                onClick={() => setActivityLimit((n) => (n >= 20 ? 8 : 20))}
+              >
+                {activityLimit >= 20 ? 'Show less' : 'Show more'}
+              </button>
+            )}
           </header>
           {activity.length === 0 ? (
             <EmptyState
@@ -634,38 +685,40 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
           ) : (
             <ul role="list" className="divide-border divide-y">
               {activity.map((it) => (
-                <li
-                  key={it.id}
-                  className="hover:bg-accent/50 cursor-pointer px-4 py-3 transition-colors"
-                  onClick={() => nav(`/${it.collection}/${it.id}`)}
-                >
-                  <div className="flex min-w-0 items-start gap-3">
-                    <div
-                      className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white"
-                      style={{ background: it.avatar.color }}
-                      aria-hidden
-                    >
-                      {it.avatar.initials}
-                    </div>
-                    <div className="min-w-0 flex-1">
-                      <p className="text-foreground truncate text-sm leading-snug">
-                        <span className="font-semibold">
-                          &ldquo;{it.title || 'Untitled'}&rdquo;
-                        </span>{' '}
-                        <span className="text-muted-foreground">— {it.typeLabel}</span>
-                      </p>
-                      <div className="text-muted-foreground mt-1 flex flex-wrap items-center gap-2 text-[11px]">
-                        <span
-                          className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${it.statusInfo.cls}`}
-                        >
-                          {it.statusInfo.label}
-                        </span>
-                        <span className="max-w-[120px] truncate">{it.author}</span>
-                        <span aria-hidden>·</span>
-                        <span>{it.relTime}</span>
+                <li key={it.id}>
+                  <button
+                    type="button"
+                    onClick={() => nav(it.editPath)}
+                    className="hover:bg-accent/50 focus-visible:bg-accent/50 w-full cursor-pointer px-4 py-3 text-left transition-colors"
+                  >
+                    <div className="flex min-w-0 items-start gap-3">
+                      <div
+                        className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white"
+                        style={{ background: it.avatar.color }}
+                        aria-hidden
+                      >
+                        {it.avatar.initials}
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <p className="text-foreground truncate text-sm leading-snug">
+                          <span className="font-semibold">
+                            &ldquo;{it.title || 'Untitled'}&rdquo;
+                          </span>{' '}
+                          <span className="text-muted-foreground">— {it.typeLabel}</span>
+                        </p>
+                        <div className="text-muted-foreground mt-1 flex flex-wrap items-center gap-2 text-[11px]">
+                          <span
+                            className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${it.statusInfo.cls}`}
+                          >
+                            {it.statusInfo.label}
+                          </span>
+                          <span className="max-w-[120px] truncate">{it.author}</span>
+                          <span aria-hidden>·</span>
+                          <span>{it.relTime}</span>
+                        </div>
                       </div>
                     </div>
-                  </div>
+                  </button>
                 </li>
               ))}
             </ul>
@@ -684,14 +737,14 @@ 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-
                   // link to the first scheduled item — that's where authors
                   // typically need to land to reschedule or cancel.
                   const first = publishQueue[0]
-                  if (first) nav(`/${first.collection}/${first.id}`)
+                  if (first) nav(first.editPath)
                 }}
               >
                 Manage
@@ -707,21 +760,23 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
             ) : (
               <ul role="list" className="divide-border divide-y">
                 {publishQueue.map((q) => (
-                  <li
-                    key={q.id}
-                    className="hover:bg-accent/50 flex min-w-0 cursor-pointer items-center gap-2.5 px-4 py-2.5 transition-colors"
-                    onClick={() => nav(`/${q.collection}/${q.id}`)}
-                  >
-                    <span className="h-2 w-2 shrink-0 rounded-full bg-amber-500" 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]">
-                        {q.date} · {q.author}
-                      </p>
-                    </div>
-                    <span className="border-border bg-background text-muted-foreground shrink-0 rounded border px-1.5 py-0.5 text-[10px] capitalize">
-                      {q.type}
-                    </span>
+                  <li key={q.id}>
+                    <button
+                      type="button"
+                      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="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]">
+                          {q.date} · {q.author}
+                        </p>
+                      </div>
+                      <span className="border-border bg-background text-muted-foreground shrink-0 rounded border px-1.5 py-0.5 text-[10px] capitalize">
+                        {q.type}
+                      </span>
+                    </button>
                   </li>
                 ))}
               </ul>
@@ -736,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
@@ -753,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'
@@ -768,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'
@@ -786,36 +841,38 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
             ) : (
               <ul role="list" className="divide-border divide-y">
                 {contentHealth.issues.map((iss, i) => (
-                  <li
-                    key={i}
-                    className="hover:bg-accent/50 flex cursor-pointer items-center gap-2.5 px-4 py-2 transition-colors"
-                    onClick={() => nav('/seo')}
-                  >
-                    <span
-                      className={`h-1.5 w-1.5 shrink-0 rounded-full ${
-                        iss.tone === 'err'
-                          ? 'bg-red-500'
-                          : iss.tone === 'warn'
-                            ? 'bg-amber-500'
-                            : 'bg-muted-foreground'
-                      }`}
-                      aria-hidden
-                    />
-                    <span className="text-muted-foreground flex-1 truncate text-xs">
-                      {iss.label}
-                    </span>
-                    <span
-                      className={`shrink-0 text-sm font-semibold ${
-                        iss.tone === 'err'
-                          ? 'text-red-600 dark:text-red-400'
-                          : iss.tone === 'warn'
-                            ? 'text-amber-600 dark:text-amber-400'
-                            : 'text-muted-foreground'
-                      }`}
+                  <li key={i}>
+                    <button
+                      type="button"
+                      onClick={() => nav('/seo')}
+                      className="hover:bg-accent/50 focus-visible:bg-accent/50 flex w-full items-center gap-2.5 px-4 py-2 text-left transition-colors"
                     >
-                      {iss.count}
-                    </span>
-                    <ChevronRight className="text-muted-foreground/60 h-3.5 w-3.5 shrink-0" />
+                      <span
+                        className={`h-1.5 w-1.5 shrink-0 rounded-full ${
+                          iss.tone === 'err'
+                            ? 'bg-red-500'
+                            : iss.tone === 'warn'
+                              ? 'bg-warning'
+                              : 'bg-muted-foreground'
+                        }`}
+                        aria-hidden
+                      />
+                      <span className="text-muted-foreground flex-1 truncate text-xs">
+                        {iss.label}
+                      </span>
+                      <span
+                        className={`shrink-0 text-sm font-semibold ${
+                          iss.tone === 'err'
+                            ? 'text-red-600 dark:text-red-400'
+                            : iss.tone === 'warn'
+                              ? 'text-warning'
+                              : 'text-muted-foreground'
+                        }`}
+                      >
+                        {iss.count}
+                      </span>
+                      <ChevronRight className="text-muted-foreground/60 h-3.5 w-3.5 shrink-0" />
+                    </button>
                   </li>
                 ))}
               </ul>
@@ -841,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" />
@@ -996,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'