@prenta/admin 1.6.2 → 1.8.0

package/src/components/seo/SeoLinkingSection.tsx

@@ -2,7 +2,21 @@
 
 import { useEffect, useState } from 'react'
 import { Link2, Loader2, Sparkles } from 'lucide-react'
-import { fetchLinkSuggestions, type LinkSuggestion } from '../../lib/seo-service.js'
+import { toast } from 'sonner'
+import { sourceEditPath } from '../../lib/collection-routes.js'
+import {
+  applySeoInternalLink,
+  fetchLinkSuggestions,
+  type LinkSuggestion,
+} from '../../lib/seo-service.js'
+import { fetchPlanInfo, hasPlanFeature, type PlanInfo } from '../../lib/plan.js'
+import { PlanUpgradeCallout } from '../PlanUpgradeCallout.js'
+
+const approveBtnCls =
+  'inline-flex items-center justify-center gap-1.5 rounded-[7px] bg-primary px-2.5 py-1.5 text-[11.5px] font-medium text-primary-foreground transition-colors hover:opacity-90 focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50'
+
+const editorBtnCls =
+  'inline-flex items-center justify-center gap-1.5 rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] px-2.5 py-1.5 text-[11.5px] font-medium text-[var(--txt)] transition-colors hover:bg-[var(--acc-l)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none'
 
 export function SeoLinkingSection({
   entityType,
@@ -11,6 +25,8 @@ export function SeoLinkingSection({
   externalLinks,
   internalLinkOk,
   externalLinkOk,
+  onNavigate,
+  planInfo: planInfoProp,
 }: {
   entityType: 'page' | 'post'
   entityId: string | null
@@ -18,10 +34,31 @@ export function SeoLinkingSection({
   externalLinks: number
   internalLinkOk: boolean
   externalLinkOk: boolean
+  onNavigate?: (path: string) => void
+  /** When omitted (page/post editors), fetched on mount. */
+  planInfo?: PlanInfo | null
 }) {
   const [loading, setLoading] = useState(false)
   const [suggestions, setSuggestions] = useState<LinkSuggestion[]>([])
   const [error, setError] = useState<string | null>(null)
+  const [applyingKey, setApplyingKey] = useState<string | null>(null)
+  const [planInfo, setPlanInfo] = useState<PlanInfo | null | undefined>(planInfoProp)
+
+  useEffect(() => {
+    if (planInfoProp !== undefined) {
+      setPlanInfo(planInfoProp)
+      return
+    }
+    let alive = true
+    void fetchPlanInfo().then((info) => {
+      if (alive) setPlanInfo(info)
+    })
+    return () => {
+      alive = false
+    }
+  }, [planInfoProp])
+
+  const inlineApplyEnabled = hasPlanFeature(planInfo, 'seo.inlineApply')
 
   useEffect(() => {
     if (!entityId) {
@@ -48,6 +85,33 @@ export function SeoLinkingSection({
     }
   }, [entityType, entityId])
 
+  async function handleApprove(suggestion: LinkSuggestion) {
+    if (!entityId) return
+    const key = `${suggestion.sourceEntityId}-${suggestion.fingerprint}`
+    setApplyingKey(key)
+    const res = await applySeoInternalLink({
+      sourceEntityId: suggestion.sourceEntityId,
+      targetEntityId: entityId,
+      anchorText: suggestion.anchorText,
+      fingerprint: suggestion.fingerprint,
+    })
+    setApplyingKey(null)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('Link added.')
+    setSuggestions((prev) =>
+      prev.filter(
+        (row) =>
+          !(
+            row.fingerprint === suggestion.fingerprint &&
+            row.sourceEntityId === suggestion.sourceEntityId
+          ),
+      ),
+    )
+  }
+
   return (
     <div className="space-y-4">
       <div className="grid grid-cols-2 gap-3">
@@ -90,22 +154,56 @@ export function SeoLinkingSection({
             <Sparkles className="h-3.5 w-3.5 text-[var(--acc)]" aria-hidden />
             Link opportunities
           </div>
+          {!inlineApplyEnabled && suggestions.some((s) => s.wrappable) ? (
+            <div className="mb-2">
+              <PlanUpgradeCallout feature="seo.inlineApply" upgradeUrl={planInfo?.upgradeUrl} />
+            </div>
+          ) : null}
           <ul className="space-y-2">
-            {suggestions.map((s) => (
-              <li
-                key={`${s.sourceEntityId}-${s.anchorText}`}
-                className="rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] p-2.5"
-              >
-                <div className="text-[12.5px] font-medium text-[var(--txt)]">{s.sourceTitle}</div>
-                <p className="mt-0.5 text-[11px] text-[var(--muted)]">{s.sourceUrl}</p>
-                <p className="mt-1 text-[11.5px] text-[var(--sub)]">
-                  Suggested anchor: <span className="text-[var(--txt)]">{s.anchorText}</span>
-                </p>
-                {s.excerpt && (
-                  <p className="mt-1 line-clamp-2 text-[11px] text-[var(--muted)]">{s.excerpt}</p>
-                )}
-              </li>
-            ))}
+            {suggestions.map((s) => {
+              const key = `${s.sourceEntityId}-${s.fingerprint || s.anchorText}`
+              const busy = applyingKey === key
+              return (
+                <li
+                  key={key}
+                  className="rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] p-2.5"
+                >
+                  <div className="text-[12.5px] font-medium text-[var(--txt)]">{s.sourceTitle}</div>
+                  <p className="mt-0.5 text-[11px] text-[var(--muted)]">{s.sourceUrl}</p>
+                  <p className="mt-1 text-[11.5px] text-[var(--sub)]">
+                    Suggested anchor: <span className="text-[var(--txt)]">{s.anchorText}</span>
+                  </p>
+                  {s.excerpt && (
+                    <p className="mt-1 line-clamp-2 text-[11px] text-[var(--muted)]">{s.excerpt}</p>
+                  )}
+                  {s.wrappable && inlineApplyEnabled ? (
+                    <div className="mt-2">
+                      <button
+                        type="button"
+                        className={approveBtnCls}
+                        disabled={busy}
+                        onClick={() => void handleApprove(s)}
+                      >
+                        {busy ? <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden /> : null}
+                        Approve link
+                      </button>
+                    </div>
+                  ) : onNavigate ? (
+                    <div className="mt-2">
+                      <button
+                        type="button"
+                        className={editorBtnCls}
+                        onClick={() =>
+                          onNavigate(sourceEditPath(s.sourceCollection, s.sourceEntityId))
+                        }
+                      >
+                        Open in editor
+                      </button>
+                    </div>
+                  ) : null}
+                </li>
+              )
+            })}
           </ul>
         </div>
       ) : (
@@ -118,8 +216,8 @@ export function SeoLinkingSection({
       <div className="flex items-start gap-2 rounded-[7px] border border-[var(--bdr)] bg-[var(--bg)] p-2.5 text-[11px] text-[var(--sub)]">
         <Link2 className="mt-0.5 h-3.5 w-3.5 shrink-0 text-[var(--acc)]" aria-hidden />
         <span>
-          Best practice: mix internal links (site structure + crawl paths) with selective outbound
-          links (trust signals). We flag counts here; apply links in the content editor.
+          Wrappable suggestions can be approved here. Others need an editor pass so we do not invent
+          a sentence.
         </span>
       </div>
     </div>

package/src/lib/collection-routes.ts

@@ -24,6 +24,19 @@ export function editPathForDoc(
   return `/${collection}/${id}`
 }
 
+/** Editor route for an inbound-link suggestion source document. */
+export function sourceEditPath(
+  sourceCollection: string | undefined,
+  sourceEntityId: string,
+): string {
+  const collection = sourceCollection ?? 'pages'
+  return editPathForDoc(
+    { type: collection === 'pages' ? 'page' : 'post' },
+    collection,
+    sourceEntityId,
+  )
+}
+
 /** The route that starts a new document in the correct editor. */
 export function newPathForCollection(
   col: CollectionRouteMeta | undefined,

package/src/lib/seo-service.ts

@@ -111,6 +111,8 @@ export interface SeoOverview {
   searchPerformance: SearchPerformanceRow[]
   searchConsoleConnected: boolean
   lastAuditRunId: string | null
+  /** True when the last audit hit AUDIT_MAX_ENTITIES. */
+  auditTruncated?: boolean
 }
 
 const EMPTY_OVERVIEW: SeoOverview = {
@@ -122,6 +124,7 @@ const EMPTY_OVERVIEW: SeoOverview = {
   searchPerformance: [],
   searchConsoleConnected: false,
   lastAuditRunId: null,
+  auditTruncated: false,
 }
 
 export async function fetchSeoOverview(): Promise<SeoOverview> {
@@ -208,10 +211,29 @@ export type LlmsInclude = 'AUTO' | 'ALWAYS' | 'NEVER'
 
 export type ContentSeoFilter = 'all' | 'pages' | 'posts'
 
-export async function fetchSeoContentRecords(): Promise<SeoContentRecord[]> {
-  const res = await cmsApi<{ records: SeoContentRecord[] }>('/seo/content')
+export interface SeoContentList {
+  records: SeoContentRecord[]
+  total: number
+  page: number
+  pageSize: number
+  truncated: boolean
+}
+
+export async function fetchSeoContentRecords(
+  opts: { page?: number; pageSize?: number } = {},
+): Promise<SeoContentList> {
+  const page = opts.page ?? 1
+  const pageSize = opts.pageSize ?? 50
+  const qs = new URLSearchParams({ page: String(page), pageSize: String(pageSize) })
+  const res = await cmsApi<SeoContentList>(`/seo/content?${qs}`)
   throwIfError(res)
-  return res.data?.records ?? []
+  return {
+    records: res.data?.records ?? [],
+    total: res.data?.total ?? 0,
+    page: res.data?.page ?? page,
+    pageSize: res.data?.pageSize ?? pageSize,
+    truncated: res.data?.truncated === true,
+  }
 }
 
 export async function fetchSeoContentRecord(
@@ -417,7 +439,7 @@ export interface SeoFixFieldChange {
 export interface SeoIssueFixSuggestion {
   autoFixable: boolean
   source?: 'deterministic' | 'ai'
-  fixStrategy?: 'redirect' | 'fix-link'
+  fixStrategy?: 'redirect' | 'fix-link' | 'insert-link'
   aiUnavailable?: boolean
   fingerprint: string
   patch: Record<string, unknown>
@@ -498,6 +520,7 @@ export const SEO_INLINE_FIX_ISSUE_TYPES = new Set([
   'duplicate-meta-description',
   'missing-structured-data',
   'broken-internal-link',
+  'orphan-page',
 ])
 
 export function isInlineSeoFixIssue(type: string): boolean {
@@ -1125,6 +1148,23 @@ export interface LinkSuggestion {
   anchorText: string
   confidence: number
   excerpt: string
+  fingerprint: string
+  wrappable: boolean
+  sourceCollection?: string
+}
+
+export async function applySeoInternalLink(input: {
+  sourceEntityId: string
+  targetEntityId: string
+  anchorText: string
+  fingerprint: string
+}): Promise<{ error?: string }> {
+  const res = await cmsApi('/seo/links/apply', {
+    method: 'POST',
+    body: JSON.stringify(input),
+  })
+  if (res.error) return { error: res.error }
+  return {}
 }
 
 export async function fetchLinkGraphSnapshot(): Promise<LinkGraphSnapshot> {

package/src/views/SEO.tsx

@@ -249,11 +249,12 @@ export function SEO({ onNavigate, initialTab = 'overview' }: SEOProps) {
                 <ContentTab
                   initialEntityType={deepLink.entityType}
                   initialEntityId={deepLink.entityId}
+                  onNavigate={onNavigate}
                 />
               )}
             </Tabs.Content>
             <Tabs.Content value="links" tabIndex={-1}>
-              {activeTab === 'links' && <LinksTab onNavigate={onNavigate} />}
+              {activeTab === 'links' && <LinksTab onNavigate={onNavigate} planInfo={planInfo} />}
             </Tabs.Content>
             <Tabs.Content value="technical" tabIndex={-1}>
               {activeTab === 'technical' && <TechnicalTab />}

package/src/views/page-editor/PageSectionEditor.tsx

@@ -1013,6 +1013,7 @@ export function PageSectionEditor({
                         onDraftChange={handlePageSettings}
                         onClose={() => setRailTab('sections')}
                         onSaved={handleSeoSaved}
+                        onNavigate={onNavigate}
                       />
                     )}
                   </div>

package/src/views/post-editor/PostSectionEditor.tsx

@@ -849,6 +849,7 @@ export function PostSectionEditor({
                         onDraftChange={handleFields}
                         onClose={() => setRailTab('sections')}
                         onSaved={handleSeoSaved}
+                        onNavigate={onNavigate}
                       />
                     )}
                   </div>

package/src/views/seo/ContentTab.tsx

@@ -44,11 +44,18 @@ function parseEntityType(value: string | null | undefined): SeoEntityType | null
 export function ContentTab({
   initialEntityType,
   initialEntityId,
+  onNavigate,
 }: {
   initialEntityType?: string | null
   initialEntityId?: string | null
+  onNavigate?: (path: string) => void
 }) {
-  const { data, loading, error, refetch } = useSeoResource(fetchSeoContentRecords, [])
+  const [page, setPage] = useState(1)
+  const pageSize = 50
+  const { data, loading, error, refetch } = useSeoResource(
+    () => fetchSeoContentRecords({ page, pageSize }),
+    [page],
+  )
   const [search, setSearch] = useState('')
   const [filter, setFilter] = useState<ContentSeoFilter>('all')
   const [selection, setSelection] = useState<Selection>(() => {
@@ -57,9 +64,13 @@ export function ContentTab({
   })
 
   const rows = useMemo(
-    () => applyContentSeoQuery(data ?? [], { search, filter }),
+    () => applyContentSeoQuery(data?.records ?? [], { search, filter }),
     [data, search, filter],
   )
+  const total = data?.total ?? 0
+  const totalPages = Math.max(1, Math.ceil(total / pageSize))
+  const rangeStart = total === 0 ? 0 : (page - 1) * pageSize + 1
+  const rangeEnd = Math.min(page * pageSize, total)
 
   const toggleRow = (type: SeoEntityType, id: string) => {
     setSelection((prev) => (prev?.type === type && prev.id === id ? null : { type, id }))
@@ -183,6 +194,32 @@ export function ContentTab({
                 </table>
               </div>
             )}
+            {total > pageSize && (
+              <div className="flex shrink-0 items-center justify-between gap-3 border-t border-[var(--bdr)] px-3 py-2">
+                <p className="text-sm text-[var(--sub)]">
+                  {rangeStart}–{rangeEnd} of {total}
+                  {data?.truncated ? ' (capped)' : ''}
+                </p>
+                <div className="flex gap-2">
+                  <button
+                    type="button"
+                    disabled={page <= 1}
+                    onClick={() => setPage((p) => Math.max(1, p - 1))}
+                    className="rounded-md px-3 py-1.5 text-sm font-medium text-[var(--txt)] hover:bg-[var(--acc-l)] disabled:cursor-not-allowed disabled:opacity-50"
+                  >
+                    Previous
+                  </button>
+                  <button
+                    type="button"
+                    disabled={page >= totalPages}
+                    onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                    className="rounded-md px-3 py-1.5 text-sm font-medium text-[var(--txt)] hover:bg-[var(--acc-l)] disabled:cursor-not-allowed disabled:opacity-50"
+                  >
+                    Next
+                  </button>
+                </div>
+              </div>
+            )}
           </SectionCard>
         </SplitPaneList>
 
@@ -194,6 +231,7 @@ export function ContentTab({
               entityId={selection.id}
               onClose={() => setSelection(null)}
               onSaved={refetch}
+              onNavigate={onNavigate}
             />
           )}
         </InspectorPane>

package/src/views/seo/LinksTab.tsx

@@ -17,6 +17,7 @@ import {
 } from 'lucide-react'
 import { toast } from 'sonner'
 import {
+  applySeoInternalLink,
   fetchLinkGraphSnapshot,
   fetchLinkHealthIssues,
   fetchLinkSuggestions,
@@ -24,7 +25,9 @@ import {
   type LinkGraphEntityRef,
   type LinkSuggestion,
 } from '../../lib/seo-service.js'
-import { editPathForDoc } from '../../lib/collection-routes.js'
+import { editPathForDoc, sourceEditPath } from '../../lib/collection-routes.js'
+import { hasPlanFeature, type PlanInfo } from '../../lib/plan.js'
+import { PlanUpgradeCallout } from '../../components/PlanUpgradeCallout.js'
 import {
   SectionCard,
   SeoLoading,
@@ -88,10 +91,39 @@ function ActionCard({
 function SuggestionList({
   suggestions,
   loading,
+  targetEntityId,
+  onNavigate,
+  onApplied,
+  planInfo,
 }: {
   suggestions: LinkSuggestion[]
   loading: boolean
+  targetEntityId: string
+  onNavigate?: (path: string) => void
+  onApplied?: (suggestion: LinkSuggestion) => void
+  planInfo?: PlanInfo | null
 }) {
+  const [applyingKey, setApplyingKey] = useState<string | null>(null)
+  const inlineApplyEnabled = hasPlanFeature(planInfo, 'seo.inlineApply')
+
+  async function handleApprove(suggestion: LinkSuggestion) {
+    const key = `${suggestion.sourceEntityId}-${suggestion.fingerprint}`
+    setApplyingKey(key)
+    const res = await applySeoInternalLink({
+      sourceEntityId: suggestion.sourceEntityId,
+      targetEntityId,
+      anchorText: suggestion.anchorText,
+      fingerprint: suggestion.fingerprint,
+    })
+    setApplyingKey(null)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('Link added.')
+    onApplied?.(suggestion)
+  }
+
   if (loading) {
     return (
       <p className="text-muted-foreground flex items-center gap-2 text-sm">
@@ -108,26 +140,64 @@ function SuggestionList({
     )
   }
   return (
-    <ul className="divide-border divide-y rounded-lg border">
-      {suggestions.map((s) => (
-        <li key={`${s.sourceEntityId}-${s.anchorText}`} className="px-4 py-3">
-          <p className="text-foreground text-sm font-medium">{s.sourceTitle}</p>
-          <p className="text-muted-foreground mt-0.5 text-xs">
-            Link &ldquo;{s.anchorText}&rdquo; → {s.sourceUrl || 'target page'}{' '}
-            <span className="text-muted-foreground/80 tabular-nums">
-              ({Math.round(s.confidence * 100)}% match)
-            </span>
-          </p>
-          {s.excerpt && (
-            <p className="text-muted-foreground mt-1 line-clamp-2 text-xs">{s.excerpt}</p>
-          )}
-        </li>
-      ))}
-    </ul>
+    <div className="space-y-3">
+      {!inlineApplyEnabled && suggestions.some((s) => s.wrappable) ? (
+        <PlanUpgradeCallout feature="seo.inlineApply" upgradeUrl={planInfo?.upgradeUrl} />
+      ) : null}
+      <ul className="divide-border divide-y rounded-lg border">
+        {suggestions.map((s) => {
+          const key = `${s.sourceEntityId}-${s.fingerprint || s.anchorText}`
+          const busy = applyingKey === key
+          return (
+            <li key={key} className="px-4 py-3">
+              <p className="text-foreground text-sm font-medium">{s.sourceTitle}</p>
+              <p className="text-muted-foreground mt-0.5 text-xs">
+                Link &ldquo;{s.anchorText}&rdquo; → {s.sourceUrl || 'target page'}{' '}
+                <span className="text-muted-foreground/80 tabular-nums">
+                  ({Math.round(s.confidence * 100)}% match)
+                </span>
+              </p>
+              {s.excerpt && (
+                <p className="text-muted-foreground mt-1 line-clamp-2 text-xs">{s.excerpt}</p>
+              )}
+              {s.wrappable && inlineApplyEnabled ? (
+                <div className="mt-2">
+                  <button
+                    type="button"
+                    className={btnPrimary}
+                    disabled={busy}
+                    onClick={() => void handleApprove(s)}
+                  >
+                    {busy ? <Loader2 className="h-4 w-4 animate-spin" aria-hidden /> : null}
+                    Approve link
+                  </button>
+                </div>
+              ) : onNavigate ? (
+                <div className="mt-2">
+                  <button
+                    type="button"
+                    className={btnSecondary}
+                    onClick={() => onNavigate(sourceEditPath(s.sourceCollection, s.sourceEntityId))}
+                  >
+                    Open in editor
+                  </button>
+                </div>
+              ) : null}
+            </li>
+          )
+        })}
+      </ul>
+    </div>
   )
 }
 
-export function LinksTab({ onNavigate }: { onNavigate?: (path: string) => void }) {
+export function LinksTab({
+  onNavigate,
+  planInfo,
+}: {
+  onNavigate?: (path: string) => void
+  planInfo?: PlanInfo | null
+}) {
   const { data, loading, error, refetch } = useSeoResource(fetchLinkGraphSnapshot, [])
   const [indexing, setIndexing] = useState(false)
   const [healthLoading, setHealthLoading] = useState(false)
@@ -379,7 +449,26 @@ export function LinksTab({ onNavigate }: { onNavigate?: (path: string) => void }
               <p className="text-foreground mb-2 text-sm font-medium">
                 AI suggestions for &ldquo;{selectedOrphan.title}&rdquo;
               </p>
-              <SuggestionList suggestions={suggestions} loading={suggestLoading} />
+              <SuggestionList
+                suggestions={suggestions}
+                loading={suggestLoading}
+                targetEntityId={selectedOrphan.id}
+                onNavigate={onNavigate}
+                planInfo={planInfo}
+                onApplied={(applied) => {
+                  setSuggestions((prev) =>
+                    prev.filter(
+                      (row) =>
+                        !(
+                          row.fingerprint === applied.fingerprint &&
+                          row.sourceEntityId === applied.sourceEntityId
+                        ),
+                    ),
+                  )
+                  refetch()
+                  void loadSuggestions(selectedOrphan)
+                }}
+              />
             </div>
           )}
         </div>