@actuate-media/cms-admin 0.14.1 → 0.16.0

package/src/lib/preview-link.ts

@@ -0,0 +1,63 @@
+import { cmsApi } from './api.js'
+
+/**
+ * Mint a signed, time-boxed preview token for a single document. The token is
+ * bound to the (collection, documentId) pair server-side, so it can only
+ * unlock the exact draft it was issued for. Used to build public preview URLs
+ * (`/<prefix>/<slug>?preview=<token>`) that render a draft through the
+ * consumer's real front-end — see {@link buildPublicPreviewUrl}.
+ */
+export async function createPreviewToken(
+  collection: string,
+  documentId: string,
+  ttlSeconds?: number,
+): Promise<{ token: string; expiresAt: string; slug?: string | null }> {
+  const res = await cmsApi<{ token: string; expiresAt: string; slug?: string | null }>(
+    '/preview/token',
+    {
+      method: 'POST',
+      body: JSON.stringify({ collection, documentId, ttlSeconds }),
+    },
+  )
+  if (res.error || !res.data) {
+    throw new Error(res.error ?? 'Failed to create preview token')
+  }
+  return res.data
+}
+
+export interface PublicPreviewUrlParts {
+  /** Absolute site origin, e.g. `https://example.com`. Trailing slash optional. */
+  siteUrl: string
+  /** Collection URL prefix (e.g. `blog`). Empty for top-level page collections. */
+  urlPrefix?: string | null
+  /** Document slug used in the public path. */
+  slug: string
+  /** Signed preview token from {@link createPreviewToken}. */
+  token: string
+}
+
+/**
+ * Build the public URL a draft preview opens at — the SAME path the
+ * `/resolve` endpoint matches: `<urlPrefix>/<slug>` (or `/<slug>` for
+ * top-level pages), with the preview token on the query string so the
+ * public route can drop the `PUBLISHED` filter for this one document.
+ */
+export function buildPublicPreviewUrl({
+  siteUrl,
+  urlPrefix,
+  slug,
+  token,
+}: PublicPreviewUrlParts): string {
+  const base = (siteUrl ?? '').replace(/\/+$/, '')
+  const prefix = (urlPrefix ?? '').replace(/^\/+|\/+$/g, '')
+  const cleanSlug = slug.replace(/^\/+|\/+$/g, '')
+  const path = prefix ? `/${prefix}/${cleanSlug}` : `/${cleanSlug}`
+  return `${base}${path}?preview=${encodeURIComponent(token)}`
+}
+
+/** Resolve the public site origin: explicit config first, else the current tab's origin. */
+export function resolveSiteUrl(configSiteUrl?: string | null): string {
+  if (configSiteUrl && configSiteUrl.trim()) return configSiteUrl.trim()
+  if (typeof window !== 'undefined') return window.location.origin
+  return ''
+}

package/src/router/index.ts

@@ -44,6 +44,15 @@ export function useAdminRouter(basePath = '/admin', serverPath = '/') {
     window.history.pushState({ adminPath: normalizedPath }, '', fullUrl)
   }, [])
 
+  // Build an absolute (basePath-prefixed) admin URL without navigating. Used
+  // for links that must load a real document — e.g. opening a preview in a
+  // new browser tab, where `pushState` (which only mutates the current tab)
+  // is not an option.
+  const buildHref = useCallback((path: string) => {
+    const normalizedPath = path.startsWith('/') ? path : `/${path}`
+    return normalizedPath === '/' ? baseRef.current : `${baseRef.current}${normalizedPath}`
+  }, [])
+
   const matchRoute = useCallback(
     (pattern: string): RouteParams | null => {
       const patternParts = pattern.split('/').filter(Boolean)
@@ -75,5 +84,5 @@ export function useAdminRouter(basePath = '/admin', serverPath = '/') {
     [currentPath],
   )
 
-  return { currentPath, navigate, matchRoute }
+  return { currentPath, navigate, matchRoute, buildHref }
 }

package/src/views/Dashboard.tsx

@@ -33,6 +33,10 @@ import {
   Database,
   ChevronRight,
   Loader2,
+  TrendingUp,
+  TrendingDown,
+  Gauge,
+  AlertCircle,
   type LucideIcon,
 } from 'lucide-react'
 import { useApiData } from '../lib/useApiData.js'
@@ -64,6 +68,28 @@ interface HealthData {
   models: Record<string, boolean>
 }
 
+interface DeliveryStats {
+  hasData: boolean
+  requests24h: number
+  requestsPrev24h: number
+  deltaPercent: number | null
+  errorRate: number
+  errorCount: number
+  avgLatencyMs: number
+  p95LatencyMs: number
+  maxLatencyMs: number
+  webhookCount: number
+  webhookActiveCount: number
+}
+
+interface ContentHealthData {
+  score: number
+  label: 'Good' | 'Fair' | 'Poor'
+  counts: Record<string, number>
+  totalIssues: number
+  lastScanAt: string | null
+}
+
 interface CollectionMeta {
   slug: string
   type?: string
@@ -114,6 +140,27 @@ function timeOfDayGreeting(): string {
   return 'Good evening'
 }
 
+/**
+ * Return the user's first name for the greeting. Falls back to the
+ * email local-part, then a generic "there". Strips role-style names
+ * like "Admin" / "Administrator" / "Editor" — a literal
+ * `Good morning, Admin` reads as bot-output, not a person.
+ */
+function firstNameForGreeting(session: any): string {
+  const raw = (session?.user?.name ?? session?.name ?? '').trim()
+  const email = session?.user?.email ?? session?.email
+  const generic = new Set(['admin', 'administrator', 'editor', 'user', 'root'])
+  if (raw) {
+    const first = raw.split(/\s+/)[0] ?? raw
+    if (!generic.has(first.toLowerCase())) return first
+  }
+  if (typeof email === 'string' && email.length > 0) {
+    const local = email.split('@')[0] ?? email
+    return local.charAt(0).toUpperCase() + local.slice(1)
+  }
+  return 'there'
+}
+
 function todayDateString(): string {
   return new Date().toLocaleDateString('en-US', {
     weekday: 'long',
@@ -200,10 +247,14 @@ 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(), [])
-  const userName = session?.name ?? session?.email?.split('@')[0] ?? 'there'
+  const userName = useMemo(() => firstNameForGreeting(session), [session])
 
   const collections = useMemo(() => resolveCollections(config), [config])
 
@@ -301,18 +352,35 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
   }, [stats, collections])
 
   // ── Quick actions ───────────────────────────────────────────────────────
-  // "New Post" lives only in the hero CTA above; this row is the secondary
-  // surface and intentionally omits the primary action to avoid the obvious
-  // duplication. Order mirrors the natural authoring flow.
+  // 5-button strip matching the reference dashboard. The "+ New Post" entry
+  // intentionally duplicates the top-bar primary action: the top bar
+  // surface is for chrome-level navigation, the quick-action row is the
+  // dashboard's content-creation toolbar. Order mirrors the natural
+  // authoring flow (post → page → media → form → integration).
   const quickActions = useMemo(() => {
+    const postTypes = collections.filter((c) => c.type === 'post')
     const pages = collections.find((c) => c.slug === 'pages' || c.type === 'page')
-    const items: { label: string; icon: LucideIcon; onClick: () => void }[] = []
-    if (pages)
-      items.push({ label: 'New Page', icon: Plus, onClick: () => nav(`/${pages.slug}/new`) })
-    items.push({ label: 'Upload Media', icon: Upload, onClick: () => nav('/media') })
-    items.push({ label: 'New Form', icon: Plus, onClick: () => nav('/forms') })
-    items.push({ label: 'Manage SEO', icon: Search, onClick: () => nav('/seo') })
-    items.push({ label: 'View API', icon: Globe, onClick: () => nav('/api-keys') })
+    const pagesSlug = pages?.slug ?? 'pages'
+    // "New Post": one Post Type → straight to its editor; several →
+    // the picker; none → the Post Type setup instructions (avoids a
+    // broken slug-based new URL).
+    const newPostPath =
+      postTypes.length === 1
+        ? `/${postTypes[0]!.slug}/new`
+        : postTypes.length > 1
+          ? '/posts/new'
+          : '/posts/types/new'
+    const items: { label: string; icon: LucideIcon; onClick: () => void }[] = [
+      {
+        label: 'New Post',
+        icon: Plus,
+        onClick: () => nav(newPostPath),
+      },
+      { label: 'New Page', icon: Plus, onClick: () => nav(`/${pagesSlug}/new`) },
+      { label: 'Upload Media', icon: Upload, onClick: () => nav('/media') },
+      { label: 'New Form', icon: Plus, onClick: () => nav('/forms') },
+      { label: 'View API', icon: Globe, onClick: () => nav('/api-keys') },
+    ]
     return items
   }, [collections, onNavigate]) // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -351,51 +419,63 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
       })
   }, [stats, collections])
 
-  // ── Content health summary (derived from /stats) ────────────────────────
+  // ── Content health (sourced from /stats/content-health) ─────────────────
+  // Persisted by the nightly content-health cron. The four issue rows
+  // map 1:1 to ContentIssueType in the schema; the labels are
+  // user-facing and intentionally read like the reference dashboard.
   const contentHealth = useMemo(() => {
-    const score = stats?.avgSeoScore ?? 0
-    const counts = stats?.statusCounts ?? {}
-    const totalDrafts = counts['DRAFT'] ?? 0
-    const totalScheduled = counts['SCHEDULED'] ?? 0
-    const totalInReview = counts['IN_REVIEW'] ?? 0
-    const issues: { label: string; count: number; tone: 'warn' | 'err' | 'muted' }[] = []
-    if (totalDrafts > 0) {
-      issues.push({ label: 'Drafts pending publish', count: totalDrafts, tone: 'warn' })
-    }
-    if (totalInReview > 0) {
-      issues.push({ label: 'Awaiting review', count: totalInReview, tone: 'warn' })
-    }
-    if (totalScheduled > 0) {
-      issues.push({ label: 'Scheduled to publish', count: totalScheduled, tone: 'muted' })
-    }
-    if (score > 0 && score < 70) {
+    const counts = contentHealthData?.counts ?? {}
+    const score = contentHealthData?.score ?? 100
+    const label = contentHealthData?.label ?? 'Good'
+    const tone: 'ok' | 'warn' | 'err' | 'muted' =
+      score >= 70 ? 'ok' : score >= 40 ? 'warn' : score > 0 ? 'err' : 'muted'
+
+    // Issue list — only render rows that have non-zero counts so the
+    // card stays compact when the corpus is healthy. The empty state
+    // below picks up when all four are zero.
+    const issues: { kind: string; label: string; count: number; tone: 'warn' | 'err' }[] = []
+    const missingMeta = counts['MISSING_META_DESCRIPTION'] ?? 0
+    const brokenLinks = counts['BROKEN_INTERNAL_LINK'] ?? 0
+    const missingAlt = counts['MISSING_ALT_TEXT'] ?? 0
+    const outdated = counts['OUTDATED_CONTENT'] ?? 0
+    if (missingMeta > 0)
       issues.push({
-        label: 'Pages with weak SEO',
-        count: Math.max(1, Math.round((70 - score) / 10)),
-        tone: score < 40 ? 'err' : 'warn',
+        kind: 'MISSING_META_DESCRIPTION',
+        label: 'Missing meta descriptions',
+        count: missingMeta,
+        tone: 'warn',
       })
-    }
+    if (brokenLinks > 0)
+      issues.push({
+        kind: 'BROKEN_INTERNAL_LINK',
+        label: 'Broken internal links',
+        count: brokenLinks,
+        tone: 'err',
+      })
+    if (missingAlt > 0)
+      issues.push({
+        kind: 'MISSING_ALT_TEXT',
+        label: 'Missing alt text',
+        count: missingAlt,
+        tone: 'warn',
+      })
+    if (outdated > 0)
+      issues.push({
+        kind: 'OUTDATED_CONTENT',
+        label: 'Outdated content (90+ days)',
+        count: outdated,
+        tone: 'warn',
+      })
+
     return {
       score,
-      label: score >= 70 ? 'Good' : score >= 40 ? 'Fair' : score > 0 ? 'Poor' : 'No data',
-      tone: score >= 70 ? 'ok' : score >= 40 ? 'warn' : score > 0 ? 'err' : 'muted',
+      label,
+      tone,
       issues,
+      hasData: contentHealthData !== null,
+      loading: contentHealthLoading,
     } as const
-  }, [stats])
-
-  // ── Content delivery tiles ──────────────────────────────────────────────
-  const delivery = useMemo(() => {
-    const sched = stats?.statusCounts?.['SCHEDULED'] ?? 0
-    return {
-      totalDocs: stats?.totalDocuments ?? 0,
-      forms: stats?.formCount ?? 0,
-      scheduled: sched,
-      webhooks: {
-        total: stats?.webhookCount ?? 0,
-        active: stats?.webhookActiveCount ?? 0,
-      },
-    }
-  }, [stats])
+  }, [contentHealthData, contentHealthLoading])
 
   const totalIssues = contentHealth.issues.reduce((s, i) => s + i.count, 0)
 
@@ -409,10 +489,6 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
     )
   }
 
-  const heroPostSlug =
-    collections.find((c) => c.slug === 'posts' || c.type === 'post')?.slug ?? 'posts'
-  const siteUrl = config?.site?.url ?? config?.seo?.siteUrl ?? null
-
   return (
     <div className="w-full space-y-5 p-4 sm:p-6 lg:px-8">
       {/* Health banners ────────────────────────────────────────────── */}
@@ -452,40 +528,25 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
         </div>
       )}
 
-      {/* Header ─────────────────────────────────────────────────────── */}
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-        <div className="min-w-0">
-          <h1 className="text-foreground text-xl font-semibold tracking-tight sm:text-2xl">
-            {greeting}, {userName} <span aria-hidden>👋</span>
-          </h1>
-          <p className="text-muted-foreground mt-0.5 text-sm">
-            {dateStr}
-            {totalIssues > 0 && (
-              <span className="hidden sm:inline">
-                {' · '}
-                {totalIssues} content item{totalIssues === 1 ? '' : 's'} need attention
-              </span>
-            )}
-          </p>
-        </div>
-        <div className="flex shrink-0 items-center gap-2">
-          <button
-            onClick={() => nav(`/${heroPostSlug}/new`)}
-            className="inline-flex items-center gap-1.5 rounded-lg bg-violet-600 px-3.5 py-2 text-sm font-medium text-white transition-colors hover:bg-violet-700"
-          >
-            <Plus className="h-3.5 w-3.5" /> New Post
-          </button>
-          {siteUrl && (
-            <a
-              href={siteUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="border-border bg-card hover:bg-accent hover:text-accent-foreground hidden items-center gap-1.5 rounded-lg border px-3 py-2 text-sm transition-colors sm:inline-flex"
-            >
-              <ExternalLink className="h-3.5 w-3.5" /> View Site
-            </a>
+      {/* Hero greeting ─────────────────────────────────────────────────
+          Primary "+ New Post" and "View Site" actions live in the top bar
+          (Header.tsx page-action slot), not here, so the hero is purely
+          informational and the dashboard's chrome-level affordances stay
+          consistent across navigation. The on-page secondary action row
+          below covers the same creation paths plus authoring shortcuts. */}
+      <div className="flex flex-col gap-1 sm:gap-0.5">
+        <h1 className="text-foreground text-xl font-semibold tracking-tight sm:text-2xl">
+          {greeting}, {userName} <span aria-hidden>👋</span>
+        </h1>
+        <p className="text-muted-foreground text-sm">
+          {dateStr}
+          {totalIssues > 0 && (
+            <span className="hidden sm:inline">
+              {' · '}
+              {totalIssues} content item{totalIssues === 1 ? '' : 's'} need attention
+            </span>
           )}
-        </div>
+        </p>
       </div>
 
       {/* Quick actions ──────────────────────────────────────────────── */}
@@ -763,12 +824,21 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
         </aside>
       </div>
 
-      {/* Content Delivery ──────────────────────────────────────────── */}
+      {/* Delivery API ──────────────────────────────────────────────────
+          Headless content delivery metrics aggregated over the last
+          24h from `actuate_api_request_metrics`. Populated in real-time
+          by the request logger in handler-factory.ts — no cron
+          required. Empty-state messaging differentiates "we haven't
+          collected enough data yet" from "we have data and it shows
+          0" so editors don't think the dashboard is broken on a
+          quiet weekend. */}
       <section className="bg-card border-border overflow-hidden rounded-xl border shadow-sm">
         <header className="border-border flex items-center justify-between border-b px-4 py-3">
           <div className="min-w-0">
-            <h2 className="text-foreground text-sm font-semibold">Content Delivery</h2>
-            <p className="text-muted-foreground mt-0.5 text-xs">Real-time platform activity</p>
+            <h2 className="text-foreground text-sm font-semibold">Delivery API</h2>
+            <p className="text-muted-foreground mt-0.5 text-xs">
+              Headless content delivery · last 24 hours
+            </p>
           </div>
           <button
             className="inline-flex items-center gap-1 text-xs font-medium text-violet-600 hover:underline dark:text-violet-400"
@@ -777,52 +847,114 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
             API docs <ExternalLink className="h-3 w-3" />
           </button>
         </header>
-        <div className="divide-border grid grid-cols-2 divide-x divide-y lg:grid-cols-4 lg:divide-y-0">
-          <DeliveryTile
-            icon={Activity}
-            label="Total Documents"
-            value={delivery.totalDocs.toLocaleString()}
-            sub="across all collections"
-          />
-          <DeliveryTile
-            icon={Clock}
-            label="Scheduled Posts"
-            value={delivery.scheduled.toLocaleString()}
-            sub={delivery.scheduled > 0 ? 'in publishing queue' : 'none queued'}
-            tone={delivery.scheduled > 0 ? 'ok' : 'muted'}
-          />
-          <DeliveryTile
-            icon={ClipboardList}
-            label="Form Responses"
-            value={delivery.forms.toLocaleString()}
-            sub={delivery.forms > 0 ? 'total received' : 'none yet'}
-            tone={delivery.forms > 0 ? 'ok' : 'muted'}
-          />
-          <DeliveryTile
-            icon={Zap}
-            label="Active Webhooks"
-            value={`${delivery.webhooks.active} / ${delivery.webhooks.total || 0}`}
-            sub={
-              delivery.webhooks.total === 0
-                ? 'none configured'
-                : delivery.webhooks.active === delivery.webhooks.total
-                  ? 'all active'
-                  : `${delivery.webhooks.total - delivery.webhooks.active} paused`
-            }
-            tone={
-              delivery.webhooks.total === 0
-                ? 'muted'
-                : delivery.webhooks.active === delivery.webhooks.total
-                  ? 'ok'
-                  : 'warn'
-            }
-          />
-        </div>
+        <DeliveryGrid delivery={delivery} loading={deliveryLoading} />
       </section>
     </div>
   )
 }
 
+// ─── Delivery API grid ──────────────────────────────────────────────────────
+
+function DeliveryGrid({ delivery, loading }: { delivery: DeliveryStats | null; loading: boolean }) {
+  if (loading && !delivery) {
+    return (
+      <div
+        className="divide-border grid grid-cols-2 divide-x divide-y lg:grid-cols-4 lg:divide-y-0"
+        aria-busy
+      >
+        {[0, 1, 2, 3].map((i) => (
+          <div key={i} className="px-4 py-3.5">
+            <div className="bg-muted mb-2 h-3 w-24 rounded" />
+            <div className="bg-muted mb-1.5 h-7 w-20 rounded" />
+            <div className="bg-muted h-3 w-28 rounded" />
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  const hasData = delivery?.hasData ?? false
+  const requests = delivery?.requests24h ?? 0
+  const delta: number | null = delivery?.deltaPercent ?? null
+  const errorRate = delivery?.errorRate ?? 0
+  const avgLatency = delivery?.avgLatencyMs ?? 0
+  const p95Latency = delivery?.p95LatencyMs ?? 0
+  const webhookTotal = delivery?.webhookCount ?? 0
+  const webhookActive = delivery?.webhookActiveCount ?? 0
+
+  // Pretty-print large numbers (14_823 → "14.8K") so the tile stays
+  // readable at the dashboard's compact density.
+  const requestsLabel = formatLargeNumber(requests)
+  const errorRatePct = (errorRate * 100).toFixed(2)
+
+  return (
+    <div className="divide-border grid grid-cols-2 divide-x divide-y lg:grid-cols-4 lg:divide-y-0">
+      <DeliveryTile
+        icon={Activity}
+        label="API Requests (24h)"
+        value={hasData ? requestsLabel : '—'}
+        sub={
+          !hasData
+            ? 'no traffic recorded yet'
+            : delta === null
+              ? 'no prior baseline'
+              : `${delta >= 0 ? '+' : ''}${delta.toFixed(1)}% vs yesterday`
+        }
+        subIcon={
+          hasData && typeof delta === 'number'
+            ? delta >= 0
+              ? TrendingUp
+              : TrendingDown
+            : undefined
+        }
+        tone={hasData ? (delta && delta >= 0 ? 'ok' : 'muted') : 'muted'}
+      />
+      <DeliveryTile
+        icon={AlertCircle}
+        label="Error Rate"
+        value={hasData ? `${errorRatePct}%` : '—'}
+        sub={
+          !hasData
+            ? 'no traffic recorded yet'
+            : errorRate < 0.005
+              ? 'healthy'
+              : errorRate < 0.05
+                ? 'elevated'
+                : 'investigate'
+        }
+        tone={!hasData ? 'muted' : errorRate < 0.005 ? 'ok' : errorRate < 0.05 ? 'warn' : 'err'}
+      />
+      <DeliveryTile
+        icon={Gauge}
+        label="Avg Response Time"
+        value={hasData ? `${Math.round(avgLatency)}ms` : '—'}
+        sub={hasData ? `p95: ${p95Latency}ms` : 'no traffic recorded yet'}
+        tone={!hasData ? 'muted' : avgLatency < 200 ? 'ok' : avgLatency < 600 ? 'warn' : 'err'}
+      />
+      <DeliveryTile
+        icon={Zap}
+        label="Active Webhooks"
+        value={`${webhookActive} / ${webhookTotal}`}
+        sub={
+          webhookTotal === 0
+            ? 'none configured'
+            : webhookActive === webhookTotal
+              ? 'All active'
+              : `${webhookTotal - webhookActive} paused`
+        }
+        tone={webhookTotal === 0 ? 'muted' : webhookActive === webhookTotal ? 'ok' : 'warn'}
+      />
+    </div>
+  )
+}
+
+function formatLargeNumber(n: number): string {
+  if (n < 1000) return n.toLocaleString()
+  if (n < 10_000) return `${(n / 1000).toFixed(1)}K`
+  if (n < 1_000_000) return `${(n / 1000).toFixed(0)}K`
+  return `${(n / 1_000_000).toFixed(1)}M`
+}
+
 // ─── Sub-components (kept in-file: smaller bundle, no extra module hops) ────
 
 function EmptyState({
@@ -852,12 +984,14 @@ function DeliveryTile({
   label,
   value,
   sub,
+  subIcon: SubIcon,
   tone = 'muted',
 }: {
   icon: LucideIcon
   label: string
   value: string
   sub?: string
+  subIcon?: LucideIcon
   tone?: 'ok' | 'warn' | 'err' | 'muted'
 }) {
   const subTone =
@@ -875,7 +1009,12 @@ function DeliveryTile({
         <span className="text-[11px] font-medium">{label}</span>
       </div>
       <p className="text-foreground text-xl leading-tight font-semibold tracking-tight">{value}</p>
-      {sub && <p className={`mt-0.5 text-[11px] ${subTone}`}>{sub}</p>}
+      {sub && (
+        <p className={`mt-0.5 inline-flex items-center gap-1 text-[11px] ${subTone}`}>
+          {SubIcon && <SubIcon className="h-3 w-3 shrink-0" aria-hidden />}
+          {sub}
+        </p>
+      )}
     </div>
   )
 }