@agent-native/core 0.82.0 → 0.83.0

package/corpus/templates/content/actions/update-document.ts

@@ -10,6 +10,7 @@ import {
   parseDocumentHideFromSearch,
 } from "../server/lib/documents.js";
 import type { DocumentUpdateResponse } from "../shared/api.js";
+import { BUILDER_CMS_BODY_CONTENT_KEY } from "./_builder-cms-source-adapter.js";
 import { reconcileInlineDatabasesForDocument } from "./_content-database-lifecycle.js";
 import { serializeDocumentSource } from "./_document-source.js";
 import {
@@ -33,6 +34,60 @@ function canManageRole(role: string) {
   return role === "owner" || role === "admin";
 }
 
+function builderBodyWithoutImageSourceComponentMarkers(
+  content: string | null | undefined,
+) {
+  return (content ?? "")
+    .replace(/(?:^|\n)<SourceComponent\b[\s\S]*?\/>[ \t]*(?=\n|$)/g, (marker) =>
+      marker.includes('componentName="Image"') ? "\n" : marker,
+    )
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+}
+
+function builderBodyWithoutMarkdownImages(content: string | null | undefined) {
+  return (content ?? "")
+    .replace(
+      /(?:^|\n)!\[(?:\\.|[^\]\\])*\]\(\S+?(?:\s+"[^"]*")?\)[ \t]*(?=\n|$)/g,
+      "\n",
+    )
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+}
+
+function normalizedBuilderBodyProse(content: string | null | undefined) {
+  return (content ?? "")
+    .normalize("NFKC")
+    .replace(/\u00a0/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+export function isStaleBuilderImageSourceComponentSave(args: {
+  incomingContent: string;
+  currentContent: string;
+  sourceContent: string | null | undefined;
+}) {
+  const sourceContent = args.sourceContent ?? "";
+  const currentMatchesSource =
+    normalizedBuilderBodyProse(args.currentContent) ===
+    normalizedBuilderBodyProse(sourceContent);
+  if (
+    !args.incomingContent.includes('componentName="Image"') ||
+    !sourceContent.includes("![") ||
+    sourceContent.includes('componentName="Image"') ||
+    !currentMatchesSource
+  ) {
+    return false;
+  }
+  return (
+    normalizedBuilderBodyProse(
+      builderBodyWithoutImageSourceComponentMarkers(args.incomingContent),
+    ) ===
+    normalizedBuilderBodyProse(builderBodyWithoutMarkdownImages(sourceContent))
+  );
+}
+
 export default defineAction({
   description:
     "Update an existing document's title, content, icon, or favorite status.",
@@ -79,6 +134,44 @@ export default defineAction({
           content = content.slice(h1Match[0].length).trimStart();
         }
       }
+      if (
+        content.includes('componentName="Image"') &&
+        existing.content.includes("![")
+      ) {
+        const [builderBody] = await db
+          .select({
+            sourceValuesJson: schema.contentDatabaseSourceRows.sourceValuesJson,
+          })
+          .from(schema.contentDatabaseSourceRows)
+          .innerJoin(
+            schema.contentDatabaseSources,
+            eq(
+              schema.contentDatabaseSources.id,
+              schema.contentDatabaseSourceRows.sourceId,
+            ),
+          )
+          .where(
+            and(
+              eq(schema.contentDatabaseSourceRows.documentId, id),
+              eq(schema.contentDatabaseSources.sourceType, "builder-cms"),
+            ),
+          )
+          .limit(1);
+        const sourceValues = JSON.parse(
+          builderBody?.sourceValuesJson ?? "{}",
+        ) as Record<string, unknown>;
+        const sourceContent = sourceValues[BUILDER_CMS_BODY_CONTENT_KEY];
+        if (
+          typeof sourceContent === "string" &&
+          isStaleBuilderImageSourceComponentSave({
+            incomingContent: content,
+            currentContent: existing.content,
+            sourceContent,
+          })
+        ) {
+          content = existing.content;
+        }
+      }
     }
 
     // Detect actual changes — a no-op call (e.g. the editor echoing back the

package/corpus/templates/content/app/blocks/SourceComponentBlock.tsx

@@ -0,0 +1,277 @@
+import type { BlockReadProps, BlockSpec } from "@agent-native/core/blocks";
+import { useT } from "@agent-native/core/client";
+import {
+  sourceComponentBlockConfig,
+  type SourceComponentData,
+} from "@shared/source-component-block";
+import {
+  IconBox,
+  IconDatabase,
+  IconExternalLink,
+  IconPhoto,
+  IconLink,
+  IconTable,
+} from "@tabler/icons-react";
+
+function providerLabel(provider: string) {
+  if (provider === "builder") return "Builder";
+  return provider.trim() || "Source";
+}
+
+function safeHttpUrl(value: string | undefined) {
+  if (!value) return null;
+  try {
+    const url = new URL(value);
+    if (url.protocol !== "https:" && url.protocol !== "http:") return null;
+    return url;
+  } catch {
+    return null;
+  }
+}
+
+function youtubeEmbedUrl(value: string | undefined) {
+  const url = safeHttpUrl(value);
+  if (!url) return null;
+  if (url.hostname === "youtu.be") {
+    const id = url.pathname.replace(/^\/+/, "").split("/")[0];
+    return id ? `https://www.youtube.com/embed/${id}` : null;
+  }
+  if (
+    url.hostname === "youtube.com" ||
+    url.hostname === "www.youtube.com" ||
+    url.hostname === "m.youtube.com"
+  ) {
+    const id = url.searchParams.get("v");
+    if (id) return `https://www.youtube.com/embed/${id}`;
+    if (url.pathname.startsWith("/embed/")) return url.toString();
+  }
+  return null;
+}
+
+function SourceImagePreview({ url, alt }: { url: string; alt?: string }) {
+  return (
+    <figure className="mt-2 overflow-hidden rounded-md border bg-background">
+      <img
+        src={url}
+        alt={alt || ""}
+        loading="lazy"
+        className="max-h-[520px] w-full object-contain"
+      />
+      {alt ? (
+        <figcaption className="border-t px-2.5 py-2 text-xs leading-5 text-muted-foreground">
+          {alt}
+        </figcaption>
+      ) : null}
+    </figure>
+  );
+}
+
+function SourceEmbedPreview({ url }: { url: string }) {
+  const embedUrl = youtubeEmbedUrl(url);
+  if (embedUrl) {
+    return (
+      <div className="mt-2 overflow-hidden rounded-md border bg-background">
+        <iframe
+          data-plan-interactive
+          className="aspect-video w-full"
+          src={embedUrl}
+          title="Builder embedded video"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          allowFullScreen
+        />
+      </div>
+    );
+  }
+  return (
+    <a
+      data-plan-interactive
+      className="mt-2 flex min-w-0 items-center gap-2 rounded-md border bg-background px-2.5 py-2 text-xs text-muted-foreground hover:text-foreground"
+      href={url}
+      target="_blank"
+      rel="noreferrer"
+    >
+      <IconLink className="size-4 shrink-0" />
+      <span className="truncate">{url}</span>
+    </a>
+  );
+}
+
+function SourceComponentPreview({ data }: { data: SourceComponentData }) {
+  const t = useT();
+  const preview = data.preview;
+  const previewUrl = preview?.url ?? data.previewUrl;
+  const safePreviewUrl = safeHttpUrl(previewUrl)?.toString();
+  const imageAlt =
+    preview?.fields?.find((field) => field.label.toLowerCase() === "alt")
+      ?.value ?? preview?.summary;
+  if (data.componentName === "Image" && safePreviewUrl) {
+    return <SourceImagePreview url={safePreviewUrl} alt={imageAlt} />;
+  }
+  if (preview?.kind === "table" && preview.table) {
+    return (
+      <div className="mt-2 overflow-hidden rounded-md border bg-background text-xs">
+        <table className="w-full table-fixed border-collapse">
+          <thead className="bg-muted/60 text-muted-foreground">
+            <tr>
+              {preview.table.columns.map((column) => (
+                <th
+                  key={column.id}
+                  className="border-b px-2 py-1.5 text-left font-medium"
+                >
+                  <span className="block truncate">{column.label}</span>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {preview.table.rows.length ? (
+              preview.table.rows.map((row, index) => (
+                <tr key={index} className="border-b last:border-b-0">
+                  {preview.table?.columns.map((column) => (
+                    <td key={column.id} className="px-2 py-1.5">
+                      <span className="block truncate">
+                        {row[column.id] ?? ""}
+                      </span>
+                    </td>
+                  ))}
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td
+                  className="px-2 py-2 text-muted-foreground"
+                  colSpan={Math.max(preview.table.columns.length, 1)}
+                >
+                  {t("editor.sourceComponent.noPreviewRows")}
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+        {preview.table.truncated ? (
+          <div className="border-t px-2 py-1.5 text-muted-foreground">
+            {t("editor.sourceComponent.previewTruncated")}
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+  if (preview?.kind === "embed" && preview.url) {
+    return <SourceEmbedPreview url={preview.url} />;
+  }
+  if (preview?.fields?.length) {
+    return (
+      <div className="mt-2 flex flex-wrap gap-1.5 text-xs text-muted-foreground">
+        {preview.fields.map((field) => (
+          <span
+            key={`${field.label}:${field.value}`}
+            className="rounded border bg-background px-1.5 py-0.5"
+          >
+            {field.label}: {field.value}
+          </span>
+        ))}
+      </div>
+    );
+  }
+  if (data.previewKind === "table") {
+    return (
+      <div className="mt-2 flex flex-wrap items-center gap-2 rounded-md border bg-background px-2.5 py-2 text-xs text-muted-foreground">
+        <IconTable className="size-4 shrink-0" />
+        {(data.previewItems?.length ? data.previewItems : ["Table"]).map(
+          (item) => (
+            <span
+              key={item}
+              className="rounded border bg-muted/40 px-1.5 py-0.5"
+            >
+              {item}
+            </span>
+          ),
+        )}
+      </div>
+    );
+  }
+  if (data.previewKind === "embed" && data.previewUrl) {
+    return <SourceEmbedPreview url={data.previewUrl} />;
+  }
+  if (data.previewItems?.length) {
+    return (
+      <div className="mt-2 flex flex-wrap gap-1.5 text-xs text-muted-foreground">
+        {data.previewItems.map((item) => (
+          <span
+            key={item}
+            className="rounded border bg-background px-1.5 py-0.5"
+          >
+            {item}
+          </span>
+        ))}
+      </div>
+    );
+  }
+  return null;
+}
+
+export function SourceComponentRead({
+  data,
+  blockId,
+}: BlockReadProps<SourceComponentData>) {
+  const t = useT();
+  const label =
+    data.title ||
+    data.componentName ||
+    t("editor.sourceComponent.defaultTitle");
+  const status = data.preview?.status ?? data.previewStatus ?? "unavailable";
+  const statusLabel =
+    status === "available"
+      ? t("editor.sourceComponent.previewAvailable")
+      : status === "warning"
+        ? t("editor.sourceComponent.needsAttention")
+        : t("editor.sourceComponent.previewUnavailable");
+
+  return (
+    <section
+      data-block-id={blockId}
+      data-plan-interactive
+      className="an-block rounded-md border border-dashed bg-muted/20 px-3 py-3 text-sm"
+    >
+      <div className="flex min-w-0 items-start justify-between gap-3">
+        <div className="flex min-w-0 items-start gap-2">
+          {data.componentName === "Image" ? (
+            <IconPhoto className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+          ) : (
+            <IconBox className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+          )}
+          <div className="min-w-0">
+            <div className="truncate font-medium text-foreground">{label}</div>
+            <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
+              <span className="inline-flex items-center gap-1">
+                <IconDatabase className="size-3.5" />
+                {providerLabel(data.provider)}
+              </span>
+              <span>{data.componentName}</span>
+              {data.sourceLabel ? <span>{data.sourceLabel}</span> : null}
+            </div>
+          </div>
+        </div>
+        <span className="shrink-0 rounded-full border bg-background px-2 py-0.5 text-[11px] text-muted-foreground">
+          {statusLabel}
+        </span>
+      </div>
+      {data.summary ? (
+        <div className="mt-2 text-sm leading-6 text-muted-foreground">
+          {data.summary}
+        </div>
+      ) : null}
+      <SourceComponentPreview data={data} />
+      <div className="mt-2 flex min-w-0 items-center gap-1 truncate text-[11px] text-muted-foreground">
+        <IconExternalLink className="size-3.5 shrink-0" />
+        <span className="truncate">{data.rawRef}</span>
+      </div>
+    </section>
+  );
+}
+
+export const sourceComponentBlock: BlockSpec<SourceComponentData> = {
+  ...sourceComponentBlockConfig,
+  Read: SourceComponentRead,
+  icon: IconBox,
+};

package/corpus/templates/content/app/blocks/contentBlockRegistry.tsx

@@ -26,6 +26,7 @@ import {
   ContentBlockMarkdownEditor,
 } from "./ContentBlockMarkdown";
 import { inlineDatabaseBlock } from "./InlineDatabaseBlock";
+import { sourceComponentBlock } from "./SourceComponentBlock";
 
 /**
  * Content's BROWSER block registry. Registers the same structured-block library
@@ -58,6 +59,7 @@ registerLibraryBlocks(contentBlockRegistry, {
 for (const block of builderDocsBlocks) {
   contentBlockRegistry.register(block);
 }
+contentBlockRegistry.register(sourceComponentBlock);
 contentBlockRegistry.register(inlineDatabaseBlock);
 
 type ContentBlockRenderContext = BlockRenderContext & {

package/corpus/templates/content/app/components/editor/DocumentEditor.tsx

@@ -34,6 +34,7 @@ import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent } from "@/components/ui/sheet";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useComments } from "@/hooks/use-comments";
+import { useProcessBuilderBodyHydration } from "@/hooks/use-content-database";
 import {
   useDocument,
   useDocuments,
@@ -85,14 +86,18 @@ function adoptConfirmedSaveWatermarks({
   savedAt: string;
   title: string;
   content: string;
-  updates: Record<string, string>;
+  updates: {
+    title?: string;
+    content?: string;
+    icon?: string | null;
+  };
   lastSavedTitleRef: MutableRefObject<FieldSaveWatermark>;
   lastSavedContentRef: MutableRefObject<ContentSaveWatermark>;
 }) {
   if (updates.title !== undefined) {
     lastSavedTitleRef.current = { title, updatedAt: savedAt };
   } else if (
-    updates.content !== undefined &&
+    (updates.content !== undefined || updates.icon !== undefined) &&
     saved?.title === lastSavedTitleRef.current.title
   ) {
     lastSavedTitleRef.current = {
@@ -103,7 +108,7 @@ function adoptConfirmedSaveWatermarks({
   if (updates.content !== undefined) {
     lastSavedContentRef.current = { content, updatedAt: savedAt };
   } else if (
-    updates.title !== undefined &&
+    (updates.title !== undefined || updates.icon !== undefined) &&
     saved?.content === lastSavedContentRef.current.content
   ) {
     lastSavedContentRef.current = {
@@ -326,6 +331,9 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
   const t = useT();
   const updateDocument = useUpdateDocument();
   const queryClient = useQueryClient();
+  const processBuilderBodies = useProcessBuilderBodyHydration(
+    document.databaseMembership?.databaseDocumentId ?? documentId,
+  );
   const canEdit = document.canEdit ?? true;
   const canEditRef = useRef(canEdit);
   canEditRef.current = canEdit;
@@ -358,6 +366,7 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
     string | null
   >(document.updatedAt ?? null);
   const saveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const promotedBuilderBodyRef = useRef<string | null>(null);
   const pendingDocumentSaveRef = useRef<PendingDocumentSave | null>(null);
   // Separate freshness watermarks for title and content so that a content save
   // never suppresses adopting a newer external title and vice versa.
@@ -388,6 +397,26 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
     },
     [t],
   );
+
+  useEffect(() => {
+    const membership = document.databaseMembership;
+    const hydration = membership?.bodyHydration;
+    if (
+      !membership?.sourceId ||
+      !hydration ||
+      (hydration.status !== "pending" && hydration.status !== "error")
+    ) {
+      return;
+    }
+    const promotionKey = `${membership.sourceId}:${documentId}:${hydration.status}:${hydration.version ?? ""}`;
+    if (promotedBuilderBodyRef.current === promotionKey) return;
+    promotedBuilderBodyRef.current = promotionKey;
+    processBuilderBodies.mutate({
+      sourceId: membership.sourceId,
+      documentId,
+      limit: 1,
+    });
+  }, [document.databaseMembership, documentId, processBuilderBodies.mutate]);
   const titleFocusedRef = useRef(false);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const titleInputRef = useRef<HTMLTextAreaElement>(null);
@@ -1160,7 +1189,19 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
                           }
                           onSelect={(emoji) => {
                             void (async () => {
-                              await persistDocumentUpdates({ icon: emoji });
+                              const saved = await persistDocumentUpdates({
+                                icon: emoji,
+                              });
+                              adoptConfirmedSaveWatermarks({
+                                saved,
+                                savedAt:
+                                  saved?.updatedAt ?? new Date().toISOString(),
+                                title: localTitleRef.current,
+                                content: localContentRef.current,
+                                updates: { icon: emoji },
+                                lastSavedTitleRef,
+                                lastSavedContentRef,
+                              });
                             })().catch(handleBackgroundSaveError);
                           }}
                         />

package/corpus/templates/content/app/components/editor/VisualEditor.tsx

@@ -66,7 +66,10 @@ import {
   type NotionPageLink,
 } from "./extensions/NotionExtensions";
 import { notionFidelityExtensions } from "./extensions/NotionFidelity";
-import { RegistryBlockNode } from "./extensions/registryBlocks";
+import {
+  LockedSourceComponentBlocks,
+  RegistryBlockNode,
+} from "./extensions/registryBlocks";
 import { VideoNode } from "./extensions/VideoNode";
 import {
   getImageFiles,
@@ -1307,6 +1310,7 @@ export function createVisualEditorExtensions({
       // `VisualEditor` below. Mounted after the Notion nodes and before the
       // Markdown extension so the NFM <-> doc round-trip recognizes the node.
       RegistryBlockNode,
+      LockedSourceComponentBlocks,
       ContentReferenceNode.configure({
         currentPath: localFilePath ?? null,
         referenceDepth,

package/corpus/templates/content/app/components/editor/database/DatabaseView.tsx

@@ -151,6 +151,7 @@ import {
   useExecuteBuilderSourceExecution,
   useMoveDatabaseItem,
   usePrepareBuilderSourceReview,
+  useProcessBuilderBodyHydration,
   useRefreshContentDatabaseSource,
   useSetContentDatabaseSourceWriteMode,
   useSuggestSourceJoinKey,
@@ -479,6 +480,7 @@ function DatabaseTable({
   const changeSourceRole = useChangeContentDatabaseSourceRole(document.id);
   const refreshSource = useRefreshContentDatabaseSource(document.id);
   const disconnectSource = useDisconnectContentDatabaseSource(document.id);
+  const processBuilderBodies = useProcessBuilderBodyHydration(document.id);
   const prepareBuilderReview = usePrepareBuilderSourceReview(document.id);
   const executeBuilderExecution = useExecuteBuilderSourceExecution(document.id);
   const setSourceWriteMode = useSetContentDatabaseSourceWriteMode(document.id);
@@ -1570,6 +1572,9 @@ function DatabaseTable({
             sourceId,
           })
         }
+        onHydrateBuilderBodies={(sourceId) =>
+          processBuilderBodies.mutate({ sourceId })
+        }
         onDisconnectSource={(sourceId) =>
           disconnectSource.mutate(
             {
@@ -1635,6 +1640,7 @@ function DatabaseTable({
           attachSource.isPending ||
           changeSourceRole.isPending ||
           refreshSource.isPending ||
+          processBuilderBodies.isPending ||
           disconnectSource.isPending ||
           prepareBuilderReview.isPending ||
           executeBuilderExecution.isPending ||
@@ -3539,6 +3545,7 @@ function DatabaseSettingsPanelSheet({
   onChangeSourceRole,
   onDisconnectSecondary,
   onRefreshSource,
+  onHydrateBuilderBodies,
   onDisconnectSource,
   onReviewBuilderUpdate,
   onSetBuilderLiveWrites,
@@ -3580,6 +3587,7 @@ function DatabaseSettingsPanelSheet({
   ) => Promise<ContentDatabaseResponse>;
   onDisconnectSecondary: (sourceId: string) => void;
   onRefreshSource: (sourceId?: string) => void;
+  onHydrateBuilderBodies: (sourceId: string) => void;
   onDisconnectSource: (sourceId?: string) => void;
   onReviewBuilderUpdate: () => void;
   onSetBuilderLiveWrites: (enabled: boolean) => void;
@@ -3677,6 +3685,7 @@ function DatabaseSettingsPanelSheet({
               setSourceNavStack([]);
             }}
             onRefreshSource={onRefreshSource}
+            onHydrateBuilderBodies={onHydrateBuilderBodies}
             onDisconnectSource={onDisconnectSource}
             onReviewBuilderUpdate={onReviewBuilderUpdate}
             onSetBuilderLiveWrites={onSetBuilderLiveWrites}
@@ -3976,6 +3985,7 @@ function DatabaseSettingsSourcePanel({
   onChangeSourceRole,
   onDisconnectSecondary,
   onRefreshSource,
+  onHydrateBuilderBodies,
   onDisconnectSource,
   onReviewBuilderUpdate,
   onSetBuilderLiveWrites,
@@ -4004,6 +4014,7 @@ function DatabaseSettingsSourcePanel({
   ) => Promise<ContentDatabaseResponse>;
   onDisconnectSecondary: (sourceId: string) => void;
   onRefreshSource: (sourceId?: string) => void;
+  onHydrateBuilderBodies: (sourceId: string) => void;
   onDisconnectSource: (sourceId?: string) => void;
   onReviewBuilderUpdate: () => void;
   onSetBuilderLiveWrites: (enabled: boolean) => void;
@@ -4442,6 +4453,15 @@ function DatabaseSettingsSourcePanel({
           </div>
         ) : null}
 
+        {isBuilderSource && source.bodyHydration ? (
+          <BuilderBodyHydrationCard
+            source={source}
+            canEdit={canEdit}
+            pending={sourceActionPending}
+            onHydrate={() => onHydrateBuilderBodies(source.id)}
+          />
+        ) : null}
+
         {isCodeMode ? (
           <>
             <div className="grid min-w-0 gap-2 rounded-lg border border-border bg-background p-3 text-sm">
@@ -5173,6 +5193,78 @@ function SourceRoleCard({
   );
 }
 
+function BuilderBodyHydrationCard({
+  source,
+  canEdit,
+  pending,
+  onHydrate,
+}: {
+  source: ContentDatabaseSource;
+  canEdit: boolean;
+  pending: boolean;
+  onHydrate: () => void;
+}) {
+  const summary = source.bodyHydration;
+  if (!summary || summary.total === 0) return null;
+  const activeCount = summary.pending + summary.hydrating;
+  const needsWork = activeCount > 0 || summary.error > 0;
+  const hydratedLabel = dbText("builderBodiesHydrated", {
+    hydrated: summary.hydrated,
+    total: summary.total,
+  });
+  const detail = needsWork
+    ? [
+        activeCount > 0
+          ? dbText("builderBodiesQueued", { count: activeCount })
+          : null,
+        summary.error > 0
+          ? dbText("builderBodySyncFailed", { count: summary.error })
+          : null,
+      ]
+        .filter(Boolean)
+        .join(" · ")
+    : dbText("builderBodiesReadyLocally");
+
+  return (
+    <div className="grid min-w-0 gap-2 rounded-lg border border-border bg-background p-3">
+      <div className="flex min-w-0 items-start justify-between gap-3">
+        <div className="min-w-0">
+          <div className="text-xs font-medium">{dbText("builderBodySync")}</div>
+          <div className="mt-0.5 text-xs text-muted-foreground">
+            {hydratedLabel}
+          </div>
+        </div>
+        {needsWork ? (
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            className="h-7 shrink-0 px-2 text-xs"
+            disabled={!canEdit || pending}
+            onClick={onHydrate}
+          >
+            {pending ? (
+              <Spinner className="mr-1 size-3.5" />
+            ) : (
+              <IconRefresh className="mr-1 size-3.5" />
+            )}
+            {summary.error > 0 ? dbText("retry") : dbText("resume")}
+          </Button>
+        ) : null}
+      </div>
+      <div className="h-1.5 overflow-hidden rounded-full bg-muted">
+        <div
+          className="h-full rounded-full bg-foreground transition-[width]"
+          style={{
+            width: `${Math.round((summary.hydrated / summary.total) * 100)}%`,
+          }}
+        />
+      </div>
+      <div className="break-words text-xs text-muted-foreground">{detail}</div>
+    </div>
+  );
+}
+
 const DETAIL_FIELD_NAME_HINTS = [
   "name",
   "title",