create-nextblock 0.15.10 → 0.16.2

package/templates/nextblock-template/app/cms/messages/page.tsx

@@ -1,87 +1,87 @@
-import { redirect } from 'next/navigation';
-import { createClient } from '@nextblock-cms/db/server';
-
-import { isEmailConfigured } from '../../../lib/config/email-settings';
-import {
-  getStoreContactEmail,
-  resolveSellerContactEmail,
-} from '../../../lib/commerce/seller-contact';
-import { loadInbox, loadThreadDetail, type ThreadDetail } from './loadInbox';
-import MessagesClient from './MessagesClient';
-
-export const metadata = {
-  title: 'Messages | NextBlock™ CMS',
-};
-
-// Messages arrive from the public site at any moment; a cached page would show an admin
-// an empty inbox that is not.
-export const dynamic = 'force-dynamic';
-
-export default async function MessagesPage({
-  searchParams,
-}: {
-  searchParams: Promise<{ source?: string; page?: string; thread?: string; handled?: string }>;
-}) {
-  const params = await searchParams;
-
-  const supabase = createClient();
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
-  if (!user) redirect('/sign-in');
-
-  const { data: profile } = await supabase
-    .from('profiles')
-    .select('role')
-    .eq('id', user.id)
-    .maybeSingle();
-
-  if (profile?.role !== 'ADMIN' && profile?.role !== 'WRITER') {
-    redirect('/unauthorized');
-  }
-
-  const isAdmin = profile?.role === 'ADMIN';
-
-  const [inbox, storeContactEmail, resolvedFallback, smtpConfigured] = await Promise.all([
-    loadInbox({
-      source: params.source,
-      page: params.page ? Number(params.page) : 0,
-      isAdmin,
-      showHandled: params.handled === '1',
-    }),
-    isAdmin ? getStoreContactEmail() : Promise.resolve(''),
-    isAdmin
-      ? resolveSellerContactEmail()
-      : Promise.resolve({ email: null, source: 'none' as const }),
-    isEmailConfigured().catch(() => false),
-  ]);
-
-  // Only the open conversation's history is loaded, not every thread's.
-  let openThread: ThreadDetail | null = null;
-  if (isAdmin && params.thread) {
-    openThread = await loadThreadDetail(params.thread);
-  }
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-bold">Messages</h1>
-        <p className="text-sm text-muted-foreground">
-          Everything people send you — product enquiries, contact forms, reviews and
-          comments — in one place.
-        </p>
-      </div>
-
-      <MessagesClient
-        inbox={inbox}
-        openThread={openThread}
-        isAdmin={isAdmin}
-        activeSource={params.source ?? ''}
-        showHandled={params.handled === '1'}
-        storeContactEmail={storeContactEmail}
-        resolvedFallback={{ email: resolvedFallback.email, source: resolvedFallback.source }}
-        smtpConfigured={smtpConfigured}
-      />
-    </div>
-  );
-}
+import { redirect } from 'next/navigation';
+import { createClient } from '@nextblock-cms/db/server';
+
+import { isEmailConfigured } from '../../../lib/config/email-settings';
+import {
+  getStoreContactEmail,
+  resolveSellerContactEmail,
+} from '../../../lib/commerce/seller-contact';
+import { loadInbox, loadThreadDetail, type ThreadDetail } from './loadInbox';
+import MessagesClient from './MessagesClient';
+
+export const metadata = {
+  title: 'Messages | NextBlock™ CMS',
+};
+
+// Messages arrive from the public site at any moment; a cached page would show an admin
+// an empty inbox that is not.
+export const dynamic = 'force-dynamic';
+
+export default async function MessagesPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ source?: string; page?: string; thread?: string; handled?: string }>;
+}) {
+  const params = await searchParams;
+
+  const supabase = createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) redirect('/sign-in');
+
+  const { data: profile } = await supabase
+    .from('profiles')
+    .select('role')
+    .eq('id', user.id)
+    .maybeSingle();
+
+  if (profile?.role !== 'ADMIN' && profile?.role !== 'WRITER') {
+    redirect('/unauthorized');
+  }
+
+  const isAdmin = profile?.role === 'ADMIN';
+
+  const [inbox, storeContactEmail, resolvedFallback, smtpConfigured] = await Promise.all([
+    loadInbox({
+      source: params.source,
+      page: params.page ? Number(params.page) : 0,
+      isAdmin,
+      showHandled: params.handled === '1',
+    }),
+    isAdmin ? getStoreContactEmail() : Promise.resolve(''),
+    isAdmin
+      ? resolveSellerContactEmail()
+      : Promise.resolve({ email: null, source: 'none' as const }),
+    isEmailConfigured().catch(() => false),
+  ]);
+
+  // Only the open conversation's history is loaded, not every thread's.
+  let openThread: ThreadDetail | null = null;
+  if (isAdmin && params.thread) {
+    openThread = await loadThreadDetail(params.thread);
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold">Messages</h1>
+        <p className="text-sm text-muted-foreground">
+          Everything people send you — product enquiries, contact forms, reviews and
+          comments — in one place.
+        </p>
+      </div>
+
+      <MessagesClient
+        inbox={inbox}
+        openThread={openThread}
+        isAdmin={isAdmin}
+        activeSource={params.source ?? ''}
+        showHandled={params.handled === '1'}
+        storeContactEmail={storeContactEmail}
+        resolvedFallback={{ email: resolvedFallback.email, source: resolvedFallback.source }}
+        smtpConfigured={smtpConfigured}
+      />
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/messages/require-admin.ts

@@ -1,37 +1,37 @@
-import { createClient } from '@nextblock-cms/db/server';
-
-/**
- * Admin gate shared by the Messages server actions.
- *
- * Lives outside `actions.ts` because that file is `'use server'`, where every export
- * must itself be a valid server action — a helper returning a Supabase client cannot be
- * exported from there.
- *
- * This is the check standing between a WRITER and every private conversation on the
- * site: visitor names, addresses, and free text. RLS enforces the same rule
- * independently, so a bug here fails closed rather than open, but the redundancy is the
- * point.
- */
-export async function requireAdminSupabaseClient() {
-  const supabase = createClient();
-  const {
-    data: { user },
-    error: userError,
-  } = await supabase.auth.getUser();
-
-  if (userError || !user) {
-    throw new Error('You must be logged in to manage messages.');
-  }
-
-  const { data: profile, error: profileError } = await supabase
-    .from('profiles')
-    .select('role, full_name')
-    .eq('id', user.id)
-    .single();
-
-  if (profileError || !profile || profile.role !== 'ADMIN') {
-    throw new Error('You do not have permission to manage messages.');
-  }
-
-  return { supabase, userId: user.id, fullName: profile.full_name as string | null };
-}
+import { createClient } from '@nextblock-cms/db/server';
+
+/**
+ * Admin gate shared by the Messages server actions.
+ *
+ * Lives outside `actions.ts` because that file is `'use server'`, where every export
+ * must itself be a valid server action — a helper returning a Supabase client cannot be
+ * exported from there.
+ *
+ * This is the check standing between a WRITER and every private conversation on the
+ * site: visitor names, addresses, and free text. RLS enforces the same rule
+ * independently, so a bug here fails closed rather than open, but the redundancy is the
+ * point.
+ */
+export async function requireAdminSupabaseClient() {
+  const supabase = createClient();
+  const {
+    data: { user },
+    error: userError,
+  } = await supabase.auth.getUser();
+
+  if (userError || !user) {
+    throw new Error('You must be logged in to manage messages.');
+  }
+
+  const { data: profile, error: profileError } = await supabase
+    .from('profiles')
+    .select('role, full_name')
+    .eq('id', user.id)
+    .single();
+
+  if (profileError || !profile || profile.role !== 'ADMIN') {
+    throw new Error('You do not have permission to manage messages.');
+  }
+
+  return { supabase, userId: user.id, fullName: profile.full_name as string | null };
+}

package/templates/nextblock-template/app/cms/navigation/components/NavigationMenuDnd.tsx

@@ -176,9 +176,9 @@ interface NavigationMenuDndProps {
   initialItems: NavigationItem[];
 }
 
-export default function NavigationMenuDnd({ menuKey, languageCode, initialItems }: NavigationMenuDndProps) {
-  void menuKey;
-  // Prevent SSR/hydration mismatches from dnd-kit by rendering on client only
+export default function NavigationMenuDnd({ menuKey, languageCode, initialItems }: NavigationMenuDndProps) {
+  void menuKey;
+  // Prevent SSR/hydration mismatches from dnd-kit by rendering on client only
   // Keep hooks order stable; move early return after hooks
   const [isMounted, setIsMounted] = useState(false);
   useEffect(() => { setIsMounted(true); }, []);

package/templates/nextblock-template/app/cms/pages/[id]/edit/EditPageClient.tsx

@@ -14,6 +14,8 @@ import CopyContentFromLanguage from "../../../components/CopyContentFromLanguage
 import RevisionHistoryButton from "../../../revisions/RevisionHistoryButton";
 import { UploadFolderProvider } from '../../../media/UploadFolderContext';
 import { CortexAiPageContextRegistrar } from "../../../components/CortexAiPageContext";
+import { PageSeoAuditSection } from "../../../../../components/seo/PageSeoAuditSection";
+import { PageSeoProvider } from "../../../../../lib/seo/page-audit-context";
 import type { Database } from "@nextblock-cms/db";
 import DraftStatusActions from "../../../components/DraftStatusActions";
 
@@ -76,6 +78,20 @@ export default function EditPageClient({
           translationGroupId: page.translation_group_id,
         }}
       />
+      {/*
+        The provider has to enclose both `PageForm` and `BlockEditorArea`,
+        because the page-level SEO audit is assembled from halves they each own:
+        the form publishes the meta title and description, the block editor
+        publishes the live block array, and neither knows the other exists. It is
+        seeded from the server-rendered row so the panel has a real document to
+        grade on first paint rather than an empty one that scores zero until the
+        block editor finishes mounting.
+      */}
+      <PageSeoProvider
+        initialBlocks={page.blocks}
+        initialMetaDescription={page.meta_description}
+        initialMetaTitle={page.meta_title}
+      >
       <div className="space-y-8 w-full mx-auto px-6">
         <div className="flex justify-between items-center flex-wrap gap-4 w-full">
           <div className="flex items-center gap-3">
@@ -151,6 +167,9 @@ export default function EditPageClient({
         <PageForm
           page={page}
           formAction={updatePageAction}
+        // Read-only: the form never writes blocks, it only lets Cortex AI read them so it
+        // can summarize the page when drafting meta title and description.
+        contentBlocks={page.blocks}
         actionButtonText="Update Page Metadata"
         isEditing={true}
         availableLanguagesProp={allSiteLanguages}
@@ -158,6 +177,14 @@ export default function EditPageClient({
         initialFeatureImageId={initialFeatureImageId}
       />
 
+        {/*
+          Sits between the metadata form and the blocks because that is what it
+          grades: everything above it and everything below it, together. It
+          collapses to a single summary row so the block editor keeps its place
+          on the screen.
+        */}
+        <PageSeoAuditSection />
+
         <Separator className="my-8" />
 
         <div className="w-full mx-auto px-6">
@@ -170,6 +197,7 @@ export default function EditPageClient({
           />
         </div>
       </div>
+      </PageSeoProvider>
     </UploadFolderProvider>
   );
 }

package/templates/nextblock-template/app/cms/pages/components/PageForm.tsx

@@ -1,7 +1,7 @@
 // app/cms/pages/components/PageForm.tsx
 "use client";
 
-import { useEffect, useRef, useState, useTransition } from "react";
+import { useEffect, useMemo, useRef, useState, useTransition } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Button } from "@nextblock-cms/ui";
 import { Spinner, Alert, AlertDescription } from "@nextblock-cms/ui";
@@ -19,11 +19,27 @@ import type { Database } from "@nextblock-cms/db";
 import { useAuth } from '../../../../context/AuthContext';
 import { useHotkeys } from '../../../../hooks/use-hotkeys';
 import FeatureImageField from "../../components/FeatureImageField";
+import { useCortexAiActive } from "../../components/CortexAiActiveContext";
+import GenerateMetaButton, {
+  type GeneratedSeoMetadata,
+} from "../../../../components/seo/GenerateMetaButton";
+import SocialPreviewDialog from "../../../../components/seo/SocialPreviewDialog";
+import { buildSeoContentForGeneration } from "../../../../lib/seo/block-content";
+import { usePageSeo } from "../../../../lib/seo/page-audit-context";
+import { resolveSiteUrl } from "../../../../lib/site-url";
 
 type Page = Database['public']['Tables']['pages']['Row'];
 type Language = Database['public']['Tables']['languages']['Row'];
 // Remove: import { getActiveLanguagesClientSide } from "@nextblock-cms/db";
 
+/**
+ * Google truncates a title around 60 characters and a description around 160. These are
+ * soft advice, not validation — the same numbers `SiteSeoSettingsForm` shows, and the same
+ * amber-past-the-limit treatment, so the counter means one thing everywhere in the CMS.
+ */
+const META_TITLE_RECOMMENDED_MAX = 60;
+const META_DESCRIPTION_RECOMMENDED_MAX = 160;
+
 interface PageFormProps {
   page?: (Page & { feature_image_id?: string | null }) | null;
   formAction: (formData: FormData) => Promise<{ error?: string } | void>;
@@ -34,6 +50,16 @@ interface PageFormProps {
   target_lang_id?: string;
   initialFeatureImageUrl?: string | null;
   initialFeatureImageId?: string | null;
+  /**
+   * The page's block rows, read-only, purely so Cortex AI can be asked to summarize the
+   * page it is writing metadata for.
+   *
+   * Deliberately NOT a form field and NOT persisted by this form: nothing here is added to
+   * the FormData, to `hasChanges`, or to the autosave dependency list. It flows one way,
+   * parent → form → AI request. Blocks have their own editor and their own save path
+   * (`BlockEditorArea`); this form must never become a second writer of them.
+   */
+  contentBlocks?: unknown;
 }
 
 export default function PageForm({
@@ -46,6 +72,7 @@ export default function PageForm({
   target_lang_id,
   initialFeatureImageUrl,
   initialFeatureImageId,
+  contentBlocks,
 }: PageFormProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -83,6 +110,58 @@ export default function PageForm({
   const [featureImageId, setFeatureImageId] = useState<string | null>(
     initialFeatureImageId || page?.feature_image_id || null
   );
+  /**
+   * The resolved URL of the feature image, for the share preview only.
+   *
+   * This one is exempt from everything the autosave path looks at, and the exemption is
+   * deliberate rather than an oversight: it is absent from the FormData, from `hasChanges`,
+   * and from the autosave effect's dependency array. `feature_image_id` is the persisted
+   * field — `FeatureImageField` renders it as the hidden input and the diff above already
+   * watches it — and the URL is nothing but that id resolved against the `media` row, which
+   * the server redoes on the next render. Persisting it would store a duplicate that can go
+   * stale, and adding it to the autosave deps would only schedule a second save for the
+   * change `featureImageId` already covers.
+   *
+   * It exists because the preview was previously bound to `initialFeatureImageUrl`, which
+   * is fixed for the life of the render — so picking an image left the share card showing
+   * the old one (or a placeholder) until a full reload, which defeats a live preview.
+   */
+  const [featureImageUrl, setFeatureImageUrl] = useState<string | null>(
+    initialFeatureImageUrl || null
+  );
+
+  const isCortexAiActive = useCortexAiActive();
+  /**
+   * The social-specific copy Cortex AI returns alongside the meta fields.
+   *
+   * This is held in component state and never written anywhere. There are no
+   * `og_title` / `og_description` columns on `pages`, and adding one is not a one-line
+   * change — a new persisted field needs the useState, the sync-from-prop effect AND its
+   * dependency array, `hasChanges`, the autosave deps, the FormData fallback list, the JSX
+   * `name`, the server action's rawFormData/updateData/payload type, and the draft overlay
+   * in the edit RSC, and missing any one of those makes the field silently never save.
+   * So the OG copy exists to inform the meta fields, which DO persist, and the operator can
+   * fold it in with one click. The live share card is built from the meta title and
+   * description below plus the feature image.
+   */
+  const [socialSuggestion, setSocialSuggestion] = useState<{
+    ogDescription: string;
+    ogTitle: string;
+  } | null>(null);
+
+  /**
+   * Prose for the metadata call. Memoized because this form re-renders on every keystroke
+   * (each one re-arms the autosave timer) and flattening a page's whole block tree on each
+   * of those would be real, pointless work — the blocks themselves cannot change while
+   * this form is mounted, since they are edited by `BlockEditorArea` below.
+   *
+   * On a brand-new page with no blocks the title is a thin but genuine brief, which beats
+   * a permanently disabled button on day one.
+   */
+  const seoContent = useMemo(
+    () => buildSeoContentForGeneration(contentBlocks, title),
+    [contentBlocks, title]
+  );
 
   // Use the passed-in languages
   const [availableLanguages] = useState<Language[]>(availableLanguagesProp);
@@ -120,8 +199,13 @@ export default function PageForm({
     setMetaDescription(page.meta_description || "");
     setCustomCanonical(page.custom_canonical || "");
     setFeatureImageId(initialFeatureImageId || page.feature_image_id || null);
+    // Re-seeded in lockstep with the id above. Both come from the same server-resolved
+    // media row, so letting the id snap back to the props while the URL kept a newer value
+    // would put the preview and the field it previews out of step.
+    setFeatureImageUrl(initialFeatureImageUrl || null);
   }, [
     initialFeatureImageId,
+    initialFeatureImageUrl,
     page?.id,
     page?.custom_canonical,
     page?.language_id,
@@ -225,6 +309,32 @@ export default function PageForm({
     // meant editing only the canonical URL never scheduled a save.
   }, [title, slug, languageId, metaTitle, metaDescription, customCanonical, featureImageId, page, isEditing]);
 
+  /**
+   * Hand the live meta fields to the page-level SEO audit.
+   *
+   * The panel that grades a page cannot read this form's state directly — it renders as a
+   * sibling, not a child — so the title and description have to be published outward. This
+   * is a one-way broadcast of values this form ALREADY owns and already persists; it adds
+   * no field, changes nothing about what `hasChanges` above compares, and puts nothing in
+   * the FormData. The autosave diff is deliberately untouched, because publishing a value
+   * is not the same event as changing one: were `setMeta` wired into that diff, merely
+   * mounting the audit panel would look like an edit and schedule a draft write.
+   *
+   * `usePageSeo()` returns null when no provider is above this form, which is a supported
+   * arrangement rather than a bug — some surfaces embed these fields without a page-level
+   * panel — so the call is optional all the way through.
+   *
+   * The dependency is `setPageSeoMeta`, not the whole context value: the setter is a stable
+   * `useCallback`, whereas the context object is rebuilt whenever the blocks array changes,
+   * which would re-run this effect on every keystroke elsewhere in the editor. The setter
+   * also bails when the values are unchanged, so there is no path from this effect back into
+   * a render of this form and therefore no loop.
+   */
+  const setPageSeoMeta = usePageSeo()?.setMeta;
+  useEffect(() => {
+    setPageSeoMeta?.({ metaDescription, metaTitle });
+  }, [metaDescription, metaTitle, setPageSeoMeta]);
+
   // Removed languagesLoading from this condition
   if (authLoading) {
     return <div>Loading form...</div>;
@@ -234,6 +344,46 @@ export default function PageForm({
     return <div>Please log in to manage pages.</div>;
   }
 
+  const selectedLanguageCode =
+    availableLanguages.find((lang) => lang.id.toString() === languageId)?.code ?? null;
+  // What the share card will actually show. Meta title wins when set, because that is what
+  // `buildSocialMetadata` uses; otherwise the page title, exactly as the public site does.
+  const previewTitle = metaTitle.trim() || title.trim();
+  const previewUrl = `${resolveSiteUrl()}/${(slug || "").replace(/^\/+/, "")}`;
+
+  /**
+   * Fold a generation into the form.
+   *
+   * Setting state is the whole persistence story here: the autosave effect above diffs
+   * this state against the `page` prop and calls `formAction` a second later, writing into
+   * `content_drafts`. A direct row UPDATE from this handler would bypass the draft and
+   * mutate the live page — precisely the thing draft mode exists to prevent.
+   */
+  /**
+   * Track the picked image for the preview as well as for the save.
+   *
+   * The id half feeds `hasChanges` and therefore the autosave; the URL half is purely
+   * presentational (see the state declaration above) and stops here.
+   */
+  const handleFeatureImageChange = (imageId: string | null, imageUrl: string | null) => {
+    setFeatureImageId(imageId);
+    setFeatureImageUrl(imageUrl);
+  };
+
+  const handleGeneratedMetadata = (result: GeneratedSeoMetadata) => {
+    if (result.metaTitle) {
+      setMetaTitle(result.metaTitle);
+    }
+    if (result.metaDescription) {
+      setMetaDescription(result.metaDescription);
+    }
+    setSocialSuggestion(
+      result.ogTitle || result.ogDescription
+        ? { ogDescription: result.ogDescription, ogTitle: result.ogTitle }
+        : null
+    );
+  };
+
   return (
     <form ref={formRef} onSubmit={handleSubmit} className="space-y-4 w-full mx-auto px-6">
       {isEditing && (
@@ -330,11 +480,52 @@ export default function PageForm({
         </div>
       </div>
 
-      {/* Row 2: SEO Settings. Canonical override (optional): blank = self-referencing canonical. */}
+      {/* Row 2: SEO Settings. Canonical override (optional): blank = self-referencing canonical.
+
+          This header is no longer gated on `isCortexAiActive`. It now carries the share-card
+          trigger, which has nothing to do with the AI package and must be reachable on every
+          install; only the generate button remains premium-gated, inside the row. */}
+      <div className="flex flex-wrap items-center justify-between gap-2 pt-1">
+        <span className="text-[11px] uppercase tracking-wider text-muted-foreground/80 font-semibold">
+          Search &amp; social
+        </span>
+        <div className="flex flex-wrap items-center gap-2">
+          {isCortexAiActive && (
+            <GenerateMetaButton
+              content={seoContent}
+              locale={selectedLanguageCode}
+              onGenerated={handleGeneratedMetadata}
+              title={title}
+            />
+          )}
+          {/* The share-card rehearsal lives in a modal rather than inline: it is a glance,
+              not a field, and inline it added roughly four hundred pixels to a form that
+              already scrolls. Sitting here it is adjacent to the two inputs it previews.
+              Every prop is live form state, so the card repaints while the dialog is open,
+              and none of it is written anywhere — see `SocialPreviewDialog`. */}
+          <SocialPreviewDialog
+            description={metaDescription}
+            imageUrl={featureImageUrl}
+            title={previewTitle}
+            url={previewUrl}
+          />
+        </div>
+      </div>
       <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
         {/* Meta Title */}
         <div className="md:col-span-4 flex flex-col gap-1">
-          <Label htmlFor="meta_title" className="text-xs font-medium">Meta Title (SEO)</Label>
+          <div className="flex items-center justify-between gap-2">
+            <Label htmlFor="meta_title" className="text-xs font-medium">Meta Title (SEO)</Label>
+            <span
+              className={`text-[10px] ${
+                metaTitle.length > META_TITLE_RECOMMENDED_MAX
+                  ? 'text-amber-600'
+                  : 'text-muted-foreground'
+              }`}
+            >
+              {metaTitle.length}/{META_TITLE_RECOMMENDED_MAX}
+            </span>
+          </div>
           <Input
             id="meta_title"
             name="meta_title"
@@ -346,7 +537,18 @@ export default function PageForm({
 
         {/* Meta Description */}
         <div className="md:col-span-4 flex flex-col gap-1">
-          <Label htmlFor="meta_description" className="text-xs font-medium">Meta Description (SEO)</Label>
+          <div className="flex items-center justify-between gap-2">
+            <Label htmlFor="meta_description" className="text-xs font-medium">Meta Description (SEO)</Label>
+            <span
+              className={`text-[10px] ${
+                metaDescription.length > META_DESCRIPTION_RECOMMENDED_MAX
+                  ? 'text-amber-600'
+                  : 'text-muted-foreground'
+              }`}
+            >
+              {metaDescription.length}/{META_DESCRIPTION_RECOMMENDED_MAX}
+            </span>
+          </div>
           <Textarea
             id="meta_description"
             name="meta_description"
@@ -372,10 +574,51 @@ export default function PageForm({
         </div>
       </div>
 
+      {/* Social-specific copy Cortex AI suggested. It is shown, not stored: pages have no
+          Open Graph columns, so the only way it can survive is by being folded into the
+          meta fields — hence the one-click apply rather than a read-only curiosity. */}
+      {socialSuggestion && (
+        <div className="rounded-md border border-border bg-muted/30 p-3 space-y-2">
+          <p className="text-[11px] font-medium text-muted-foreground">
+            Cortex AI also drafted social-specific copy. Pages have no separate Open Graph
+            fields, so this is only a suggestion for the meta fields above.
+          </p>
+          {socialSuggestion.ogTitle && (
+            <p className="text-xs text-foreground"><strong>Social title:</strong> {socialSuggestion.ogTitle}</p>
+          )}
+          {socialSuggestion.ogDescription && (
+            <p className="text-xs text-foreground"><strong>Social description:</strong> {socialSuggestion.ogDescription}</p>
+          )}
+          <div className="flex gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="h-7 px-2 text-[11px]"
+              onClick={() => {
+                if (socialSuggestion.ogTitle) setMetaTitle(socialSuggestion.ogTitle);
+                if (socialSuggestion.ogDescription) setMetaDescription(socialSuggestion.ogDescription);
+              }}
+            >
+              Use for meta fields
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2 text-[11px]"
+              onClick={() => setSocialSuggestion(null)}
+            >
+              Dismiss
+            </Button>
+          </div>
+        </div>
+      )}
+
       <FeatureImageField
         initialImageId={initialFeatureImageId || page?.feature_image_id || null}
         initialImageUrl={initialFeatureImageUrl || null}
-        onImageIdChange={setFeatureImageId}
+        onImageIdChange={handleFeatureImageChange}
         uploadFolder={`pages/${(slug || 'untitled').toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-_]/g, '')}/`}
       />