diff --git a/apps/web/src/components/sections-editor/site-editor-guide.test.tsx b/apps/web/src/components/sections-editor/site-editor-guide.test.tsx
new file mode 100644
index 0000000000..f001e0c50d
--- /dev/null
+++ b/apps/web/src/components/sections-editor/site-editor-guide.test.tsx
@@ -0,0 +1,260 @@
+import { setupComponentTest } from "../../../test/setup";
+setupComponentTest();
+
+import { afterEach, beforeEach, describe, expect, mock, test } from "bun:test";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  fireEvent,
+  render as renderBare,
+  waitFor,
+} from "@testing-library/react";
+import type { ReactNode } from "react";
+import { PROTOCOL_NAME } from "@decocms/blocks/protocol";
+import {
+  DEFAULT_SERVE_ENDPOINT,
+  serveCandidates,
+} from "./deco-serve-connection";
+import {
+  isServeLost,
+  LocalServeSwitch,
+  SiteEditorGuide,
+} from "./site-editor-guide";
+
+function wrapper({ children }: { children: ReactNode }) {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false, gcTime: 0 } },
+  });
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+}
+const render = (ui: Parameters<typeof renderBare>[0]) =>
+  renderBare(ui, { wrapper });
+
+/** A `deco serve` answering on `ports` (changeable later); everything else refuses. */
+function serveOn(ports: number[]) {
+  return mock(async (input: RequestInfo | URL) => {
+    const request = input instanceof Request ? input : new Request(input);
+    const port = Number(new URL(request.url).port);
+    if (!ports.includes(port)) throw new TypeError("Failed to fetch");
+    const calls = (await request.json()) as { id: number; method: string }[];
+    return Response.json(
+      calls.map((call) =>
+        call.method === "describe"
+          ? {
+              jsonrpc: "2.0",
+              id: call.id,
+              result: {
+                protocol: PROTOCOL_NAME,
+                version: { major: 1, minor: 0 },
+                readOnly: false,
+              },
+            }
+          : { jsonrpc: "2.0", id: call.id, result: { schema: {} } },
+      ),
+    );
+  });
+}
+
+const originalFetch = globalThis.fetch;
+beforeEach(() => {
+  sessionStorage.clear();
+  localStorage.clear();
+});
+afterEach(() => {
+  globalThis.fetch = originalFetch;
+});
+
+describe("SiteEditorGuide", () => {
+  test("with nothing answering, shows the guide, not an error", async () => {
+    globalThis.fetch = serveOn([]) as unknown as typeof fetch;
+    const view = render(
+      <SiteEditorGuide
+        candidates={[DEFAULT_SERVE_ENDPOINT]}
+        onConnect={() => {}}
+      />,
+    );
+
+    // A short "Looking…" first, then the guide once nothing answered.
+    expect(view.getByText("Looking for deco serve…")).toBeInTheDocument();
+    expect(
+      await view.findByRole("heading", {
+        level: 1,
+        name: "Edit your site's content on your computer",
+      }),
+    ).toBeInTheDocument();
+    expect(view.queryByText(/incomplete/i)).toBeNull();
+    // The two steps, in order; no address field and no way to disconnect.
+    const steps = view.getAllByRole("heading", { level: 2 });
+    expect(steps.map((step) => step.textContent)).toEqual([
+      "Start deco serve in your site's folder",
+      "This page connects on its own",
+    ]);
+    expect(view.queryByRole("textbox")).toBeNull();
+    expect(view.queryByRole("button", { name: /disconnect/i })).toBeNull();
+    // The same command on any Studio origin: deco serve answers them all.
+    expect(
+      view.getByText(
+        (_, element) =>
+          element?.tagName === "CODE" &&
+          element.textContent?.replace(/^\$\s*/, "") ===
+            "npx @decocms/blocks serve",
+      ),
+    ).toBeInTheDocument();
+    expect(
+      view.getByRole("button", { name: "Copy command" }),
+    ).toBeInTheDocument();
+    expect(
+      await view.findByText("Looking for deco serve on localhost:4545…"),
+    ).toBeInTheDocument();
+    // Docs links open in a new tab, from the one docs base.
+    const docs = view.getByRole("navigation", { name: "Learn more" });
+    const links = [...docs.querySelectorAll("a")];
+    expect(links.length).toBe(4);
+    for (const link of links) {
+      expect(link.getAttribute("href")).toStartWith(
+        "https://docs.decocms.com/storefront/blocks/next/",
+      );
+      expect(link.getAttribute("target")).toBe("_blank");
+    }
+  });
+
+  test("connects on its own when deco serve answers on 4545", async () => {
+    globalThis.fetch = serveOn([4545]) as unknown as typeof fetch;
+    const onConnect = mock(() => {});
+    render(
+      <SiteEditorGuide
+        candidates={[DEFAULT_SERVE_ENDPOINT]}
+        onConnect={onConnect}
+      />,
+    );
+    await waitFor(() =>
+      expect(onConnect).toHaveBeenCalledWith({
+        endpoint: "http://localhost:4545/rpc",
+      }),
+    );
+  });
+
+  test("explains an invalid link above the steps", () => {
+    globalThis.fetch = serveOn([]) as unknown as typeof fetch;
+    const view = render(
+      <SiteEditorGuide
+        candidates={[DEFAULT_SERVE_ENDPOINT]}
+        invalidLink
+        onConnect={() => {}}
+      />,
+    );
+    expect(
+      view.getByText("This link doesn't point to deco serve on your computer"),
+    ).toBeInTheDocument();
+  });
+});
+
+/** The editor stand-in: names its server, and stops when the server does. */
+function editor(
+  connection: { endpoint: string },
+  onLost: () => void,
+): ReactNode {
+  return (
+    <div>
+      <p>Editing {connection.endpoint}</p>
+      <button type="button" onClick={onLost}>
+        server stopped
+      </button>
+    </div>
+  );
+}
+
+const GUIDE_TITLE = "Edit your site's content on your computer";
+
+describe("LocalServeSwitch", () => {
+  test("no link and nothing answering: the empty state", async () => {
+    globalThis.fetch = serveOn([]) as unknown as typeof fetch;
+    const view = render(
+      <LocalServeSwitch
+        candidates={serveCandidates(null, null)}
+        editor={editor}
+      />,
+    );
+    expect(
+      await view.findByRole("heading", { level: 1, name: GUIDE_TITLE }),
+    ).toBeInTheDocument();
+    expect(view.queryByText(/^Editing/)).toBeNull();
+  });
+
+  test("the default port answering: the editor", async () => {
+    globalThis.fetch = serveOn([4545]) as unknown as typeof fetch;
+    const view = render(
+      <LocalServeSwitch
+        candidates={serveCandidates(null, null)}
+        editor={editor}
+      />,
+    );
+    expect(
+      await view.findByText(`Editing ${DEFAULT_SERVE_ENDPOINT}`),
+    ).toBeInTheDocument();
+    expect(view.queryByRole("heading", { name: GUIDE_TITLE })).toBeNull();
+  });
+
+  test("the server stopping: the empty state, then the editor once it's back", async () => {
+    const ports = [4545];
+    globalThis.fetch = serveOn(ports) as unknown as typeof fetch;
+    const view = render(
+      <LocalServeSwitch
+        candidates={serveCandidates(null, null)}
+        editor={editor}
+      />,
+    );
+    await view.findByText(`Editing ${DEFAULT_SERVE_ENDPOINT}`);
+
+    ports.length = 0;
+    fireEvent.click(view.getByRole("button", { name: "server stopped" }));
+    expect(
+      await view.findByRole("heading", { level: 1, name: GUIDE_TITLE }),
+    ).toBeInTheDocument();
+
+    ports.push(4545);
+    expect(
+      await view.findByText(
+        `Editing ${DEFAULT_SERVE_ENDPOINT}`,
+        {},
+        { timeout: 4_000 },
+      ),
+    ).toBeInTheDocument();
+  }, 10_000);
+
+  test("a link's endpoint wins over the default port", async () => {
+    globalThis.fetch = serveOn([4545, 4547]) as unknown as typeof fetch;
+    const view = render(
+      <LocalServeSwitch
+        candidates={serveCandidates(
+          { endpoint: "http://127.0.0.1:4547/rpc" },
+          null,
+        )}
+        editor={editor}
+      />,
+    );
+    expect(
+      await view.findByText("Editing http://localhost:4547/rpc"),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("isServeLost", () => {
+  test("only a local server that stopped answering", () => {
+    expect(
+      isServeLost({
+        kind: "unavailable",
+        source: "local",
+        problem: { reason: "not-answering" },
+      }),
+    ).toBe(true);
+    expect(
+      isServeLost({
+        kind: "unavailable",
+        source: "local",
+        problem: { reason: "outdated" },
+      }),
+    ).toBe(false);
+    expect(isServeLost({ kind: "unavailable", source: "github" })).toBe(false);
+    expect(isServeLost({ kind: "pending" })).toBe(false);
+  });
+});
diff --git a/apps/web/src/components/sections-editor/site-editor-guide.tsx b/apps/web/src/components/sections-editor/site-editor-guide.tsx
new file mode 100644
index 0000000000..dfde27eaf1
--- /dev/null
+++ b/apps/web/src/components/sections-editor/site-editor-guide.tsx
@@ -0,0 +1,256 @@
+/**
+ * `/site-editor`'s one rule: while `deco serve` answers, the editor; while it
+ * doesn't, this guide, which keeps looking for it (backing off, paused while
+ * the tab is hidden) and opens the editor as soon as it answers. The guide
+ * explains what the site editor is and how to start `deco serve`.
+ */
+
+import { type ReactNode, useId, useState } from "react";
+import { Monitor04 } from "@untitledui/icons";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@decocms/ui/components/alert.tsx";
+import { Button } from "@decocms/ui/components/button.tsx";
+import { Spinner } from "@decocms/ui/components/spinner.tsx";
+import { useDecoServeDiscovery } from "@/hooks/use-deco-serve-discovery";
+import { usePreferences } from "@/hooks/use-preferences";
+import { useT } from "@/i18n/use-t.ts";
+import type { ContentBackend } from "./content-backend";
+import {
+  type DecoServeConnection,
+  endpointHost,
+  SERVE_COMMAND,
+} from "./deco-serve-connection";
+import {
+  CommandSnippet,
+  DocsLinks,
+  RichCode,
+  ServeProblemAlert,
+} from "./deco-serve-notices";
+
+/** The editor's server stopped answering: back to the guide until it's back. */
+export function isServeLost(backend: ContentBackend): boolean {
+  return (
+    backend.kind === "unavailable" &&
+    backend.source === "local" &&
+    (backend.problem?.reason ?? "not-answering") === "not-answering"
+  );
+}
+
+const bare = (guide: ReactNode) => guide;
+
+/**
+ * The guide until one of `candidates` answers, then `editor`, until it calls
+ * `onLost` (the server stopped answering), then the guide again.
+ */
+export function LocalServeSwitch({
+  candidates,
+  invalidLink = false,
+  shell = bare,
+  editor,
+}: {
+  candidates: readonly string[];
+  /** The page was opened with a link that isn't a usable one. */
+  invalidLink?: boolean;
+  /** Frames the guide (the app shell). */
+  shell?: (guide: ReactNode) => ReactNode;
+  editor: (connection: DecoServeConnection, onLost: () => void) => ReactNode;
+}) {
+  const [connection, setConnection] = useState<DecoServeConnection | null>(
+    null,
+  );
+  if (connection) return editor(connection, () => setConnection(null));
+  return shell(
+    <SiteEditorGuide
+      candidates={candidates}
+      invalidLink={invalidLink}
+      onConnect={setConnection}
+    />,
+  );
+}
+
+function Step({
+  index,
+  title,
+  children,
+}: {
+  index: number;
+  title: string;
+  children: ReactNode;
+}) {
+  const headingId = useId();
+  return (
+    <li
+      aria-labelledby={headingId}
+      className="surface flex flex-col gap-3 p-4 sm:p-5"
+    >
+      <div className="flex items-center gap-3">
+        <span
+          aria-hidden="true"
+          className="flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium tabular-nums text-foreground"
+        >
+          {index}
+        </span>
+        <h2 id={headingId} className="text-sm font-medium text-foreground">
+          {title}
+        </h2>
+      </div>
+      <div className="flex min-w-0 flex-col gap-3 sm:pl-9">{children}</div>
+    </li>
+  );
+}
+
+export function SiteEditorGuide({
+  candidates,
+  invalidLink = false,
+  onConnect,
+}: {
+  /** The endpoints looked for, in order (see `serveCandidates`). */
+  candidates: readonly string[];
+  /** The page was opened with a link that isn't a usable one. */
+  invalidLink?: boolean;
+  onConnect: (connection: DecoServeConnection) => void;
+}) {
+  const t = useT();
+  const [{ language }] = usePreferences();
+  const discovery = useDecoServeDiscovery({
+    candidates,
+    onFound: (endpoint) => onConnect({ endpoint }),
+  });
+  const { state, access, needsGesture } = discovery;
+  const hosts = new Intl.ListFormat(language, {
+    style: "long",
+    type: "conjunction",
+  }).format(candidates.map(endpointHost));
+
+  // While the first look runs, a short "Looking…", not a flash of the guide
+  // before the editor opens.
+  const firstLook =
+    !invalidLink &&
+    access !== "denied" &&
+    !needsGesture &&
+    !state.firstRoundDone &&
+    state.status !== "found";
+  if (firstLook) {
+    return (
+      <div
+        role="status"
+        className="flex h-full w-full flex-col items-center justify-center gap-3 p-6"
+      >
+        <Spinner className="size-6 text-muted-foreground" />
+        <p className="text-sm text-muted-foreground">
+          {t("decoServe.guide.checkingFirst")}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full w-full overflow-y-auto">
+      <div className="mx-auto flex w-full max-w-xl flex-col gap-6 px-4 py-8 sm:py-12">
+        <header className="flex flex-col items-center gap-3 text-center">
+          <span
+            aria-hidden="true"
+            className="flex size-10 items-center justify-center rounded-xl bg-muted text-muted-foreground sm:size-12"
+          >
+            <Monitor04 className="size-5 sm:size-6" />
+          </span>
+          <h1
+            tabIndex={-1}
+            className="text-balance text-lg font-medium text-foreground outline-none sm:text-xl"
+          >
+            {t("decoServe.guide.title")}
+          </h1>
+          <p className="text-pretty text-sm text-muted-foreground">
+            {t("decoServe.guide.lead")}
+          </p>
+        </header>
+
+        {invalidLink && (
+          <Alert variant="warning">
+            <div className="flex min-w-0 flex-col gap-1">
+              <AlertTitle className="line-clamp-none text-foreground">
+                {t("decoServe.link.invalidTitle")}
+              </AlertTitle>
+              <AlertDescription>
+                {t("decoServe.link.invalidBody")}
+              </AlertDescription>
+            </div>
+          </Alert>
+        )}
+        {access === "denied" && (
+          <Alert variant="destructive">
+            <div className="flex min-w-0 flex-col gap-1">
+              <AlertTitle className="line-clamp-none">
+                {t("decoServe.lna.deniedTitle")}
+              </AlertTitle>
+              <AlertDescription>
+                {t("decoServe.lna.deniedBody")}
+              </AlertDescription>
+            </div>
+          </Alert>
+        )}
+
+        <ol className="flex flex-col gap-3">
+          <Step index={1} title={t("decoServe.guide.step1.title")}>
+            <p className="text-sm text-muted-foreground">
+              <RichCode text={t("decoServe.guide.step1.body")} />
+            </p>
+            <CommandSnippet command={SERVE_COMMAND} />
+            <p className="text-sm text-muted-foreground">
+              <RichCode text={t("decoServe.guide.step1.preview")} />
+            </p>
+          </Step>
+
+          <Step index={2} title={t("decoServe.guide.step2.title")}>
+            <p className="text-sm text-muted-foreground">
+              {t("decoServe.guide.step2.body")}
+            </p>
+            {state.problem && (
+              <ServeProblemAlert
+                problem={state.problem}
+                host={endpointHost(state.problem.endpoint)}
+              />
+            )}
+            {needsGesture ? (
+              <Button
+                variant="outline"
+                className="self-start"
+                onClick={discovery.start}
+              >
+                {t("decoServe.guide.step2.start")}
+              </Button>
+            ) : (
+              access !== "denied" && (
+                <p
+                  role="status"
+                  className="flex items-center gap-2 text-sm text-muted-foreground"
+                >
+                  {state.status === "paused" ? (
+                    t("decoServe.guide.step2.paused")
+                  ) : (
+                    <>
+                      <Spinner className="size-4" />
+                      {t("decoServe.guide.step2.looking", { hosts })}
+                    </>
+                  )}
+                </p>
+              )
+            )}
+          </Step>
+        </ol>
+
+        <p className="text-sm text-muted-foreground">
+          {t("decoServe.guide.v7")}
+        </p>
+
+        <DocsLinks
+          className="border-t border-border pt-4"
+          links={["quickstart", "siteEditor", "serve", "troubleshooting"]}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/knip.jsonc b/knip.jsonc
index de48c57c6f..5996d8a27e 100644
--- a/knip.jsonc
+++ b/knip.jsonc
@@ -79,14 +79,7 @@
     "**/*": ["types"],
     // Temporary while the v8 stack lands: each export below gets its
     // consumer in a later PR of the stack, which removes its entry.
-    "apps/web/src/components/sections-editor/deco-serve-connection.ts": [
-      "exports"
-    ],
     "apps/web/src/hooks/use-deco-serve-connection.ts": ["exports"],
-    "apps/web/src/components/sections-editor/deco-serve-notices.tsx": [
-      "exports"
-    ],
-    "apps/web/src/hooks/use-deco-serve-discovery.ts": ["exports"],
     "apps/web/src/components/sections-editor/deco-serve-chip.tsx": ["exports"]
   }
 }