@actuate-media/cms-admin 0.73.0 → 0.75.0

package/src/lib/seo-service.ts

@@ -9,6 +9,7 @@
  * `packages/cms-core/src/api/handlers.ts` across phases 2-3 and 6.
  */
 import type { BrandAlignmentScoreResult } from '@actuate-media/cms-core/brand-voice'
+import type { SEOAnalysisResult } from '@actuate-media/cms-core/seo/analysis'
 import { cmsApi } from './api.js'
 
 /**
@@ -163,7 +164,12 @@ export interface SeoContentRecord {
   title: string
   url: string
   canonicalUrl: string | null
+  /** Rendered public title (after site title template). */
   metaTitle: string | null
+  /** Stored page-specific portion for the `%page%` token. */
+  metaTitlePage?: string | null
+  siteName?: string | null
+  titleTemplate?: string | null
   metaDescription: string | null
   focusKeyword: string | null
   keyTakeaway: string | null
@@ -234,6 +240,12 @@ export interface SeoFieldPayload {
   llmsOptional?: boolean
 }
 
+export async function fetchDocumentSeoAnalysis(documentId: string): Promise<SEOAnalysisResult> {
+  const res = await cmsApi<SEOAnalysisResult>(`/seo/analysis/${encodeURIComponent(documentId)}`)
+  throwIfError(res)
+  return res.data ?? { score: 0, checks: [] }
+}
+
 export async function updateSeoFields(
   entityType: string,
   entityId: string,
@@ -368,6 +380,7 @@ export interface SeoFixFieldChange {
 export interface SeoIssueFixSuggestion {
   autoFixable: boolean
   source?: 'deterministic' | 'ai'
+  fixStrategy?: 'redirect' | 'fix-link'
   aiUnavailable?: boolean
   fingerprint: string
   patch: Record<string, unknown>
@@ -447,6 +460,7 @@ export const SEO_INLINE_FIX_ISSUE_TYPES = new Set([
   'duplicate-meta-title',
   'duplicate-meta-description',
   'missing-structured-data',
+  'broken-internal-link',
 ])
 
 export function isInlineSeoFixIssue(type: string): boolean {
@@ -890,11 +904,39 @@ export async function fetchRedirectSuggestions(): Promise<RedirectSuggestion[]>
   return res.data?.suggestions ?? []
 }
 
-export async function generate404RecoverySuggestions(): Promise<{ error?: string }> {
-  const res = await cmsApi('/seo/redirects/suggest', { method: 'POST' })
+export interface RedirectRecoverySettings {
+  aiRerank: boolean
+  autoApply: boolean
+  autoApplyMinConfidence: number
+}
+
+export async function fetchRedirectRecoverySettings(): Promise<RedirectRecoverySettings | null> {
+  const res = await cmsApi<RedirectRecoverySettings>('/seo/redirects/recovery-settings')
+  throwIfError(res)
+  return res.data ?? null
+}
+
+export async function saveRedirectRecoverySettings(
+  settings: Partial<RedirectRecoverySettings>,
+): Promise<{ error?: string }> {
+  const res = await cmsApi<RedirectRecoverySettings>('/seo/redirects/recovery-settings', {
+    method: 'PUT',
+    body: JSON.stringify(settings),
+  })
   return res.error ? { error: res.error } : {}
 }
 
+export async function generate404RecoverySuggestions(): Promise<{
+  error?: string
+  autoApplied?: number
+}> {
+  const res = await cmsApi<{ created?: number; autoApplied?: number }>('/seo/redirects/suggest', {
+    method: 'POST',
+  })
+  if (res.error) return { error: res.error }
+  return { autoApplied: res.data?.autoApplied ?? 0 }
+}
+
 export async function acceptRedirectSuggestion(suggestionId: string): Promise<{ error?: string }> {
   const res = await cmsApi(
     `/seo/redirects/suggestions/${encodeURIComponent(suggestionId)}/accept`,
@@ -995,3 +1037,109 @@ export async function summarizeSeoAudit(): Promise<SeoAiResult> {
   if (isAiUnavailable(res.status)) return { unavailable: true }
   return res.data ?? {}
 }
+
+// ─── Link graph & AI suggestions ───────────────────────────────────────────
+
+export interface LinkGraphEntityRef {
+  id: string
+  title: string
+  url: string
+  path: string
+  collection: string
+  entityType: 'page' | 'post'
+  isHome: boolean
+}
+
+export interface LinkGraphSnapshot {
+  scannedAt: string
+  postsCrawled: number
+  internalLinks: number
+  externalLinks: number
+  internalRatio: number
+  orphanCount: number
+  orphaned: LinkGraphEntityRef[]
+  linkCoveragePercent: number
+  underLinked: Array<LinkGraphEntityRef & { outboundInternal: number }>
+  brokenLinkCount: number
+  aiIndexLastRunAt: string | null
+  aiIndexReady: boolean
+}
+
+export interface LinkHealthIssue {
+  id: string
+  page: string
+  url: string
+  status: number
+  type: string
+}
+
+export interface LinkSuggestion {
+  sourceEntityId: string
+  sourceTitle: string
+  sourceUrl: string
+  anchorText: string
+  confidence: number
+  excerpt: string
+}
+
+export async function fetchLinkGraphSnapshot(): Promise<LinkGraphSnapshot> {
+  const res = await cmsApi<LinkGraphSnapshot>('/seo/links/snapshot')
+  throwIfError(res)
+  if (!res.data) throw new Error('No link snapshot data')
+  return res.data
+}
+
+export async function runLinkAiIndex(): Promise<{
+  data?: {
+    indexedAt: string
+    entitiesIndexed: number
+    aiAvailable: boolean
+    message: string
+  }
+  error?: string
+}> {
+  const res = await cmsApi<{
+    indexedAt: string
+    entitiesIndexed: number
+    aiAvailable: boolean
+    message: string
+  }>('/seo/links/ai-index', { method: 'POST' })
+  if (res.error) return { error: res.error }
+  return { data: res.data }
+}
+
+export async function fetchLinkSuggestions(input: {
+  targetEntityId: string
+  targetEntityType: 'page' | 'post'
+  limit?: number
+}): Promise<{
+  data?: {
+    target: { id: string; title: string; url: string }
+    suggestions: LinkSuggestion[]
+  }
+  error?: string
+}> {
+  const res = await cmsApi<{
+    target: { id: string; title: string; url: string }
+    suggestions: LinkSuggestion[]
+  }>('/seo/links/suggest', { method: 'POST', body: JSON.stringify(input) })
+  if (res.error) return { error: res.error }
+  return { data: res.data }
+}
+
+export async function fetchLinkHealthIssues(): Promise<{
+  data?: { issues: LinkHealthIssue[]; checked: number; truncated: boolean }
+  error?: string
+}> {
+  const res = await cmsApi<{ truncated: boolean; checked: number; issues: LinkHealthIssue[] }>(
+    '/seo/link-health',
+  )
+  if (res.error) return { error: res.error }
+  return {
+    data: {
+      issues: res.data?.issues ?? [],
+      checked: res.data?.checked ?? 0,
+      truncated: res.data?.truncated ?? false,
+    },
+  }
+}

package/src/views/ApiKeys.tsx

@@ -134,7 +134,7 @@ export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
         {error && (
           <div
             role="alert"
-            className="border-destructive/30 bg-destructive/10 text-destructive mb-4 flex items-center gap-3 rounded-lg border p-3 text-sm"
+            className="border-destructive/30 bg-destructive/10 text-destructive mb-4 flex items-center gap-3 rounded-lg border p-4 text-sm"
           >
             <AlertTriangle size={20} className="shrink-0" aria-hidden="true" />
             <span className="flex-1">{error}</span>
@@ -506,7 +506,7 @@ function RevealKeyDialog({
             Copy this key now — it will not be shown again. Treat it like a password.
           </Dialog.Description>
 
-          <div className="border-warning/30 bg-warning/10 mb-4 flex items-start gap-2 rounded-lg border p-3">
+          <div className="border-warning/30 bg-warning/10 mb-4 flex items-start gap-2 rounded-lg border p-4">
             <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
             <p className="text-foreground text-xs">
               We only store a hash of this key. If you lose it, you&apos;ll need to revoke and

package/src/views/Dashboard.tsx

@@ -42,6 +42,7 @@ import {
 import { useApiData } from '../lib/useApiData.js'
 import { editPathForDoc } from '../lib/collection-routes.js'
 import { authorAvatar } from '../components/ui/AuthorAvatar.js'
+import { PanelSection, PANEL_LIST_ROW_CLASS } from '../components/ui/PanelSection.js'
 import { OnboardingBlock, shouldShowOnboarding } from './dashboard/OnboardingBlock.js'
 import type { OnboardingSignals } from './dashboard/OnboardingBlock.js'
 
@@ -542,7 +543,7 @@ 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="border-info/30 bg-info/10 flex items-start gap-3 rounded-lg border p-3">
+        <div className="border-info/30 bg-info/10 flex items-start gap-3 rounded-lg border p-4">
           <Database className="text-info mt-0.5 h-5 w-5 shrink-0" />
           <div className="min-w-0 flex-1">
             <span className="text-info text-sm font-medium">Database setup required</span>
@@ -561,7 +562,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
       )}
 
       {error && exhausted && (
-        <div className="border-warning/30 bg-warning/10 flex items-center gap-3 rounded-lg border p-3">
+        <div className="border-warning/30 bg-warning/10 flex items-center gap-3 rounded-lg border p-4">
           <AlertTriangle className="text-warning h-5 w-5 shrink-0" />
           <span className="text-warning flex-1 text-sm">
             Some dashboard data may be unavailable.
@@ -685,23 +686,20 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
       ) : (
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,1fr)_320px]">
           {/* Recent Activity ───────────────────────────────────────── */}
-          <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-medium">Recent Activity</h2>
-                <p className="text-muted-foreground mt-0.5 text-xs">
-                  Last 7 days across all content
-                </p>
-              </div>
-              {(stats?.recentDocuments?.length ?? 0) > 8 && (
+          <PanelSection
+            title="Recent Activity"
+            description="Last 7 days across all content"
+            action={
+              (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>
+              ) : undefined
+            }
+          >
             {activity.length === 0 ? (
               <EmptyState
                 icon={Activity}
@@ -715,7 +713,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                     <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"
+                      className={PANEL_LIST_ROW_CLASS}
                     >
                       <div className="flex min-w-0 items-start gap-3">
                         <div
@@ -749,33 +747,27 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                 ))}
               </ul>
             )}
-          </section>
+          </PanelSection>
 
           {/* Right column ─────────────────────────────────────────── */}
           <aside className="flex min-w-0 flex-col gap-4">
             {/* Publishing Queue */}
-            <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-medium">Publishing Queue</h2>
-                  <p className="text-muted-foreground mt-0.5 text-xs">
-                    {publishQueue.length} item{publishQueue.length === 1 ? '' : 's'} scheduled
-                  </p>
-                </div>
+            <PanelSection
+              title="Publishing Queue"
+              description={`${publishQueue.length} item${publishQueue.length === 1 ? '' : 's'} scheduled`}
+              action={
                 <button
                   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.editPath)
                   }}
                 >
                   Manage
                 </button>
-              </header>
+              }
+            >
               {publishQueue.length === 0 ? (
                 <EmptyState
                   icon={Clock}
@@ -790,7 +782,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                       <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"
+                        className={`${PANEL_LIST_ROW_CLASS} flex min-w-0 cursor-pointer items-center gap-2.5`}
                       >
                         <span className="bg-warning h-2 w-2 shrink-0 rounded-full" aria-hidden />
                         <div className="min-w-0 flex-1">
@@ -807,23 +799,21 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                   ))}
                 </ul>
               )}
-            </section>
+            </PanelSection>
 
-            {/* Content Health */}
-            <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-medium">Content Health</h2>
-                  <p className="text-muted-foreground mt-0.5 text-xs">SEO &amp; quality issues</p>
-                </div>
+            <PanelSection
+              title="Content Health"
+              description="SEO & quality issues"
+              action={
                 <button
                   className="text-brand text-xs font-medium hover:underline"
                   onClick={() => nav('/seo')}
                 >
                   Fix issues
                 </button>
-              </header>
-              <div className="px-4 pt-3.5 pb-2.5">
+              }
+            >
+              <div className="px-6 pt-4 pb-2.5">
                 <div className="mb-1.5 flex items-baseline justify-between">
                   <p className="text-foreground text-2xl leading-none font-medium tracking-tight">
                     {contentHealth.score > 0 ? contentHealth.score : '—'}
@@ -861,7 +851,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                 </div>
               </div>
               {contentHealth.issues.length === 0 ? (
-                <div className="text-muted-foreground px-4 pt-1 pb-4 text-xs">
+                <div className="text-muted-foreground px-6 pt-1 pb-4 text-xs">
                   No outstanding issues. Nice work.
                 </div>
               ) : (
@@ -871,7 +861,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                       <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"
+                        className={`${PANEL_LIST_ROW_CLASS} flex items-center gap-2.5 py-3.5`}
                       >
                         <span
                           className={`h-1.5 w-1.5 shrink-0 rounded-full ${
@@ -903,7 +893,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                   ))}
                 </ul>
               )}
-            </section>
+            </PanelSection>
           </aside>
         </div>
       )}
@@ -916,23 +906,20 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
           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-medium">Delivery API</h2>
-            <p className="text-muted-foreground mt-0.5 text-xs">
-              Headless content delivery · last 24 hours
-            </p>
-          </div>
+      <PanelSection
+        title="Delivery API"
+        description="Headless content delivery · last 24 hours"
+        action={
           <button
             className="text-brand inline-flex items-center gap-1 text-xs font-medium hover:underline"
             onClick={() => nav('/settings?tab=api-keys')}
           >
             API docs <ExternalLink className="h-3 w-3" />
           </button>
-        </header>
+        }
+      >
         <DeliveryGrid delivery={delivery} loading={deliveryLoading} />
-      </section>
+      </PanelSection>
     </div>
   )
 }
@@ -947,7 +934,7 @@ function DeliveryGrid({ delivery, loading }: { delivery: DeliveryStats | null; l
         aria-busy
       >
         {[0, 1, 2, 3].map((i) => (
-          <div key={i} className="px-4 py-3.5">
+          <div key={i} className="px-6 py-4">
             <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" />
@@ -1087,7 +1074,7 @@ function DeliveryTile({
           ? 'text-destructive dark:text-red-400'
           : 'text-muted-foreground'
   return (
-    <div className="px-4 py-3.5">
+    <div className="px-6 py-4">
       <div className="text-muted-foreground mb-1 flex items-center gap-1.5">
         <Icon className="h-3.5 w-3.5" aria-hidden />
         <span className="text-[11px] font-medium">{label}</span>

package/src/views/MediaBrowser.tsx

@@ -47,6 +47,8 @@ interface MediaItem {
   dimensions?: string
   format?: string
   altTag?: string
+  /** Pending AI alt suggestion (`aiAltText` column) awaiting editor approval. */
+  aiAltSuggestion?: string
   title?: string
   caption?: string
   description?: string
@@ -321,10 +323,13 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
       return
     }
 
-    const res = await cmsApi<{ alt?: string; title?: string; alternatives?: string[] }>(
-      '/ai/media-metadata',
-      { method: 'POST', body: JSON.stringify({ mediaId: activeItem.id }) },
-    )
+    const res = await cmsApi<{
+      alt?: string
+      title?: string
+      alternatives?: string[]
+      isDecorative?: boolean
+      usedVision?: boolean
+    }>('/ai/media-metadata', { method: 'POST', body: JSON.stringify({ mediaId: activeItem.id }) })
 
     if (res.error) {
       // AI plugin/provider not configured (e.g. local dev): fall back to a
@@ -344,8 +349,17 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
     }
 
     if (field === 'alt') {
-      setEditAlt(res.data?.alt ?? '')
-      toast.success('Alt tag generated by AI')
+      if (res.data?.isDecorative) {
+        setEditAlt('')
+        toast.success('AI marked this image as decorative (empty alt)')
+      } else {
+        setEditAlt(res.data?.alt ?? '')
+        toast.success(
+          res.data?.usedVision
+            ? 'Alt tag generated from image analysis'
+            : 'Alt tag suggested — review before saving',
+        )
+      }
     } else {
       setEditTitle(res.data?.title ?? '')
       toast.success('Title generated by AI')
@@ -395,6 +409,24 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
           toast.success(`Uploaded ${file.name}`)
         }
         successCount++
+
+        const uploaded = res.data
+        const isImage =
+          file.type.startsWith('image/') || (uploaded?.type ?? '').startsWith('image/')
+        if (isImage && uploaded?.id) {
+          void cmsApi<{ alt?: string; isDecorative?: boolean }>('/ai/media-metadata', {
+            method: 'POST',
+            body: JSON.stringify({ mediaId: String(uploaded.id) }),
+          }).then((altRes) => {
+            if (altRes.error) return
+            if (altRes.data?.isDecorative) {
+              toast.info(`${file.name}: AI suggests decorative (empty alt). Open to review.`)
+            } else if (altRes.data?.alt) {
+              toast.info(`${file.name}: AI alt text ready. Open the item to review and save.`)
+            }
+            refetch()
+          })
+        }
       }
     }
 
@@ -467,7 +499,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
   return (
     <div className="flex h-full flex-col p-3 pr-6 sm:p-4 sm:pr-8">
       {error && (
-        <div className="border-destructive/30 bg-destructive/10 mb-4 flex items-center gap-3 rounded-lg border p-3">
+        <div className="border-destructive/30 bg-destructive/10 mb-4 flex items-center gap-3 rounded-lg border p-4">
           <AlertTriangle className="text-destructive h-5 w-5 shrink-0" />
           <span className="text-destructive flex-1 text-sm">{error}</span>
           <button
@@ -635,7 +667,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
             </div>
 
             {selectedMedia.length > 0 && (
-              <div className="border-primary/30 bg-primary/10 mb-4 rounded-lg border p-3">
+              <div className="border-primary/30 bg-primary/10 mb-4 rounded-lg border p-4">
                 <div className="flex items-center justify-between">
                   <span className="text-primary text-sm">
                     {selectedMedia.length} file{selectedMedia.length !== 1 ? 's' : ''} selected
@@ -901,7 +933,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                       </div>
 
                       {issues.length > 0 && (
-                        <div className="border-warning/30 bg-warning/10 mx-4 mt-4 rounded-lg border p-3">
+                        <div className="border-warning/30 bg-warning/10 mx-4 mt-4 rounded-lg border p-4">
                           <div className="flex items-start gap-2">
                             <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" />
                             <div>
@@ -1006,6 +1038,24 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                             rows={2}
                             className="border-input focus:ring-ring w-full resize-none rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
                           />
+                          {activeItem.aiAltSuggestion !== undefined &&
+                            editAlt !== activeItem.aiAltSuggestion && (
+                              <div className="border-warning/40 bg-warning/10 mt-2 flex items-start justify-between gap-2 rounded-lg border p-4 text-xs">
+                                <span className="text-foreground">
+                                  AI suggestion:{' '}
+                                  {activeItem.aiAltSuggestion.trim()
+                                    ? activeItem.aiAltSuggestion
+                                    : '(decorative — empty alt)'}
+                                </span>
+                                <button
+                                  type="button"
+                                  onClick={() => setEditAlt(activeItem.aiAltSuggestion ?? '')}
+                                  className="text-primary shrink-0 font-medium hover:opacity-80"
+                                >
+                                  Apply
+                                </button>
+                              </div>
+                            )}
                           {!editAlt && (
                             <p className="text-destructive mt-1 text-xs">
                               Required for accessibility and SEO
@@ -1121,7 +1171,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                             ))}
                           </div>
                         ) : (
-                          <div className="border-warning/30 bg-warning/10 rounded-lg border p-3">
+                          <div className="border-warning/30 bg-warning/10 rounded-lg border p-4">
                             <div className="flex items-start gap-2">
                               <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" />
                               <div>
@@ -1144,7 +1194,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                           type="button"
                           onClick={() => handleAiGenerate('optimize')}
                           disabled={aiGenerating === 'optimize'}
-                          className="border-primary/30 bg-primary/10 hover:bg-primary/15 flex w-full items-center gap-2 rounded-lg border p-3 text-left transition-colors disabled:opacity-50"
+                          className="border-primary/30 bg-primary/10 hover:bg-primary/15 flex w-full items-center gap-2 rounded-lg border p-4 text-left transition-colors disabled:opacity-50"
                         >
                           <Sparkles
                             className={`text-primary h-5 w-5 shrink-0 ${aiGenerating === 'optimize' ? 'animate-spin' : ''}`}
@@ -1160,7 +1210,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                         </button>
                         <button
                           type="button"
-                          className="border-border hover:bg-muted flex w-full items-center gap-2 rounded-lg border p-3 text-left transition-colors"
+                          className="border-border hover:bg-muted flex w-full items-center gap-2 rounded-lg border p-4 text-left transition-colors"
                         >
                           <Bot className="text-muted-foreground h-5 w-5 shrink-0" />
                           <div className="flex-1">

package/src/views/PageEditor.tsx

@@ -100,7 +100,7 @@ export function PageEditor({ id, onNavigate }: PageEditorProps) {
         </div>
       )}
 
-      <div className="border-border border-b px-4 py-3">
+      <div className="border-border border-b px-6 py-4">
         <div className="flex items-center justify-between">
           <button
             onClick={() => onNavigate?.('/pages')}

package/src/views/Posts/PostTypeEditor.tsx

@@ -136,7 +136,7 @@ function EditorToolbar({
 }) {
   const palette = paletteFor(detail.color)
   return (
-    <div className="border-border bg-card flex flex-wrap items-center gap-3 border-b px-4 py-3 sm:px-6">
+    <div className="border-border bg-card flex flex-wrap items-center gap-3 border-b px-6 py-4 sm:px-6">
       <nav aria-label="Breadcrumb" className="flex min-w-0 items-center gap-1.5 text-sm">
         <button
           type="button"
@@ -284,7 +284,7 @@ function FieldBuilder({ detail }: { detail: PostTypeDetail }) {
 function FieldList({ detail }: { detail: PostTypeDetail }) {
   return (
     <div className="bg-card border-border rounded-xl border shadow-sm">
-      <div className="border-border flex items-center gap-2 border-b px-4 py-3">
+      <div className="border-border flex items-center gap-2 border-b px-6 py-4">
         <Lock className="text-muted-foreground h-3.5 w-3.5" aria-hidden />
         <span className="text-foreground text-sm font-medium">Fields</span>
         <span className="bg-muted text-muted-foreground ml-auto rounded-full px-2 py-0.5 text-xs font-medium">
@@ -525,7 +525,7 @@ function AddFieldCard({ detail }: { detail: PostTypeDetail }) {
 function EditorSkeleton() {
   return (
     <div className="flex h-full flex-col">
-      <div className="border-border bg-card border-b px-4 py-3 sm:px-6">
+      <div className="border-border bg-card border-b px-6 py-4 sm:px-6">
         <div className="bg-muted h-5 w-48 animate-pulse rounded" />
       </div>
       <div className="flex flex-col gap-6 p-4 sm:p-6 lg:flex-row">

package/src/views/SEO.tsx

@@ -15,6 +15,7 @@ import {
   ClipboardCheck,
   RefreshCw,
   Bot,
+  Link2,
 } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
@@ -30,6 +31,7 @@ import { ContentTab } from './seo/ContentTab.js'
 import { TechnicalTab } from './seo/TechnicalTab.js'
 import { RedirectsTab } from './seo/RedirectsTab.js'
 import { AuditTab } from './seo/AuditTab.js'
+import { LinksTab } from './seo/LinksTab.js'
 
 export interface SEOProps {
   onNavigate?: (path: string) => void
@@ -39,6 +41,7 @@ export interface SEOProps {
 const TABS = [
   { id: 'overview', label: 'Overview', icon: LayoutDashboard },
   { id: 'content', label: 'Content SEO', icon: FileText },
+  { id: 'links', label: 'Links', icon: Link2 },
   { id: 'technical', label: 'Technical', icon: Settings2 },
   { id: 'redirects', label: 'Redirects', icon: ArrowRightLeft },
   { id: 'audit', label: 'Audit', icon: ClipboardCheck },
@@ -212,6 +215,9 @@ export function SEO({ onNavigate, initialTab = 'overview' }: SEOProps) {
                 />
               )}
             </Tabs.Content>
+            <Tabs.Content value="links" tabIndex={-1}>
+              {activeTab === 'links' && <LinksTab onNavigate={onNavigate} />}
+            </Tabs.Content>
             <Tabs.Content value="technical" tabIndex={-1}>
               {activeTab === 'technical' && <TechnicalTab />}
             </Tabs.Content>