feat(web): the Local draft option connects deco serve

apps/web/src/components/sections-editor/content-version-badge.tsx

@@ -0,0 +1,42 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@decocms/ui/components/tooltip.tsx";
+import { useT } from "@/i18n/use-t.ts";
+import { useContentBackend } from "./use-content-backend";
+
+/**
+ * Marks a Blocks v8 site: one edited over the content protocol, from a
+ * GitHub schema with `"blocksMajor": 8` or a `deco serve` (connected or
+ * reconnecting). v7 sites, and sites still being detected, show nothing:
+ * the editor looks as it did before next-major Blocks.
+ */
+export function ContentVersionBadge({
+  virtualMcpId,
+  branch,
+}: {
+  virtualMcpId: string;
+  branch: string | null;
+}) {
+  const t = useT();
+  const backend = useContentBackend(virtualMcpId, branch);
+  if (backend.kind !== "protocol" && backend.kind !== "unavailable") {
+    return null;
+  }
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span
+          data-testid="content-version-badge"
+          className="shrink-0 rounded border border-border px-1.5 py-px font-mono text-[11px] leading-4 text-muted-foreground"
+        >
+          v8
+        </span>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" className="max-w-xs">
+        {t("decoServe.version.v8")}
+      </TooltipContent>
+    </Tooltip>
+  );
+}

apps/web/src/components/sections-editor/deco-serve-chip.tsx

@@ -0,0 +1,99 @@
+import type { ReactNode } from "react";
+import { cn } from "@decocms/ui/lib/utils.ts";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@decocms/ui/components/tooltip.tsx";
+import { useDecoServeConnection } from "@/hooks/use-deco-serve-connection";
+import { useT } from "@/i18n/use-t.ts";
+import { endpointHost } from "./deco-serve-connection";
+import { RichCode, serveProblemShort } from "./deco-serve-notices";
+import { useContentBackend } from "./use-content-backend";
+
+/** The site editor's "Local server" chip: what it edits and its state. */
+export function DecoServeChip({
+  virtualMcpId,
+  branch,
+}: {
+  virtualMcpId: string;
+  branch: string | null;
+}) {
+  const t = useT();
+  const { connection } = useDecoServeConnection(virtualMcpId);
+  const backend = useContentBackend(virtualMcpId, branch);
+  if (!connection) return null;
+  const problem =
+    backend.kind === "unavailable"
+      ? serveProblemShort(
+          t,
+          backend.problem ?? { reason: "not-answering" },
+          endpointHost(connection.endpoint),
+        )
+      : null;
+  const readOnly =
+    backend.kind === "protocol" &&
+    backend.source === "local" &&
+    backend.describe.readOnly;
+  return (
+    <div className="flex shrink-0 items-center gap-1">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            tabIndex={0}
+            data-testid="deco-serve-chip"
+            className={cn(
+              "rounded-full px-2 py-0.5 text-xs font-medium",
+              problem
+                ? "bg-destructive/10 text-destructive"
+                : "bg-muted text-muted-foreground",
+            )}
+          >
+            {t("decoServe.chip.label")}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" className="max-w-xs">
+          {problem ?? t("decoServe.chip.tooltip")}
+        </TooltipContent>
+      </Tooltip>
+      {readOnly && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span
+              tabIndex={0}
+              data-testid="deco-serve-read-only"
+              className="rounded-full bg-warning/10 px-2 py-0.5 text-xs font-medium text-foreground"
+            >
+              {t("decoServe.chip.readOnly")}
+            </span>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" className="max-w-xs">
+            <RichCode text={t("decoServe.chip.readOnlyTooltip")} />
+          </TooltipContent>
+        </Tooltip>
+      )}
+    </div>
+  );
+}
+
+/** The connect flow's centered column; `fullScreen` outside the app shell. */
+export function ConnectCentered({
+  children,
+  fullScreen = false,
+}: {
+  children: ReactNode;
+  fullScreen?: boolean;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex w-full items-center justify-center p-6",
+        fullScreen ? "min-h-screen bg-background" : "h-full",
+      )}
+    >
+      <div className="flex w-full max-w-md flex-col items-center gap-4 text-center">
+        {children}
+      </div>
+    </div>
+  );
+}

apps/web/src/components/sections-editor/sections-editor.tsx

@@ -48,6 +48,7 @@ import { PageSeoForm } from "./page-seo-form";
 import { extractMatcherGlobals, extractMatchers } from "./matcher-picker";
 import { PageVariantTabs, VariantTabIcon } from "./page-variant-tabs";
 import { MakeReusableModal } from "./make-reusable-modal";
+import { errorDetail, errorDetailsDescription } from "./site-editor-toast";
 import { AddSectionModal } from "./add-section-modal";
 import { useSectionPreviewBase } from "./use-section-preview-base";
 import { useContentBackend } from "./use-content-backend";
@@ -1470,11 +1471,9 @@ export function SectionsEditor({
       );
       onSaved?.();
     } catch (err) {
-      toast.error(
-        err instanceof Error
-          ? err.message
-          : t("sectionsEditor.sectionsEditor.failedToSaveGlobalBlock"),
-      );
+      toast.error(t("sectionsEditor.sectionsEditor.failedToSaveGlobalBlock"), {
+        description: errorDetailsDescription(t, errorDetail(err)),
+      });
     }
   };
 
@@ -1529,9 +1528,10 @@ export function SectionsEditor({
       await deleteBlock.mutateAsync({ blockKey });
     } catch (err) {
       toast.error(
-        err instanceof Error
-          ? err.message
-          : t("sectionsEditor.sectionsEditor.couldNotDeleteMatcherBlock"),
+        t("sectionsEditor.sectionsEditor.couldNotDeleteMatcherBlock"),
+        {
+          description: errorDetailsDescription(t, errorDetail(err)),
+        },
       );
     }
   };
@@ -1682,11 +1682,9 @@ export function SectionsEditor({
       }
       onSaved?.();
     } catch (err) {
-      toast.error(
-        err instanceof Error
-          ? err.message
-          : t("sectionsEditor.sectionsEditor.couldNotApplySavedRule"),
-      );
+      toast.error(t("sectionsEditor.sectionsEditor.couldNotApplySavedRule"), {
+        description: errorDetailsDescription(t, errorDetail(err)),
+      });
     }
   };
 
@@ -1874,11 +1872,9 @@ export function SectionsEditor({
       }
       onSaved?.();
     } catch (err) {
-      toast.error(
-        err instanceof Error
-          ? err.message
-          : t("sectionsEditor.sectionsEditor.couldNotApplySavedRule"),
-      );
+      toast.error(t("sectionsEditor.sectionsEditor.couldNotApplySavedRule"), {
+        description: errorDetailsDescription(t, errorDetail(err)),
+      });
     }
   };
 
@@ -2459,11 +2455,9 @@ export function SectionsEditor({
       );
       onSaved?.();
     } catch (err) {
-      toast.error(
-        err instanceof Error
-          ? err.message
-          : t("sectionsEditor.sectionsEditor.failedToRenameVariant"),
-      );
+      toast.error(t("sectionsEditor.sectionsEditor.failedToRenameVariant"), {
+        description: errorDetailsDescription(t, errorDetail(err)),
+      });
     } finally {
       setRenameVariantPending(false);
     }
@@ -2621,11 +2615,9 @@ export function SectionsEditor({
       );
       onSaved?.();
     } catch (err) {
-      toast.error(
-        err instanceof Error
-          ? err.message
-          : t("sectionsEditor.sectionsEditor.failedToRenameVariant"),
-      );
+      toast.error(t("sectionsEditor.sectionsEditor.failedToRenameVariant"), {
+        description: errorDetailsDescription(t, errorDetail(err)),
+      });
     } finally {
       setRenameVariantPending(false);
     }
@@ -2754,11 +2746,9 @@ export function SectionsEditor({
       );
       onSaved?.();
     } catch (err) {
-      toast.error(
-        err instanceof Error
-          ? err.message
-          : t("sectionsEditor.sectionsEditor.failedToRenameVariant"),
-      );
+      toast.error(t("sectionsEditor.sectionsEditor.failedToRenameVariant"), {
+        description: errorDetailsDescription(t, errorDetail(err)),
+      });
     } finally {
       setRenameVariantPending(false);
     }
@@ -2809,11 +2799,9 @@ export function SectionsEditor({
       }
       onSaved?.();
     } catch (err) {
-      toast.error(
-        err instanceof Error
-          ? err.message
-          : t("sectionsEditor.sectionsEditor.couldNotApplySavedRule"),
-      );
+      toast.error(t("sectionsEditor.sectionsEditor.couldNotApplySavedRule"), {
+        description: errorDetailsDescription(t, errorDetail(err)),
+      });
     }
   };
 

apps/web/src/components/sections-editor/site-editor-toast.tsx

@@ -29,7 +29,7 @@ function ErrorDetails({ label, detail }: { label: string; detail: string }) {
 }
 
 /** A toast `description` for `detail`, or nothing when there is none. */
-function errorDetailsDescription(t: TFunction, detail: string | null) {
+export function errorDetailsDescription(t: TFunction, detail: string | null) {
   return detail ? (
     <ErrorDetails label={t("siteEditor.details")} detail={detail} />
   ) : undefined;
@@ -46,3 +46,9 @@ export function toastSaveError(
     description: errorDetailsDescription(t, saveErrorDetail(error, source)),
   });
 }
+
+/** The developer detail of a failed request, for Details. */
+export function errorDetail(error: unknown): string | null {
+  if (error instanceof Error) return error.message || null;
+  return error == null ? null : String(error);
+}