From 3056374f8014b47a0148172c713f53a60f04744b Mon Sep 17 00:00:00 2001
From: gimenes <tlgimenes@gmail.com>
Date: Thu, 8 Oct 2026 15:04:47 -0300
Subject: [PATCH] feat(web): protocol fields: browser-encrypted secrets, asset
 uploads

Protocol-aware fields: secrets are encrypted in the browser with the
server's `secrets.pub`, and file/image fields upload assets to `deco
serve`. `renderField` routes secrets to the backend-aware field and
edits `Lazy<T>` fields as their `T` (the `schema-form.tsx` hunks its
tests exercise; the new-blocks-editor hunks of that file are in the
next PR).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WNwbSEePYNcY5YCgqZURig
---
 .../sections-editor/fields/enum-field.tsx     |   4 +-
 .../sections-editor/fields/file-field.tsx     |  66 ++++++++--
 .../sections-editor/fields/image-field.tsx    |  87 ++++++++++---
 .../fields/protocol-secret-field.tsx          | 121 ++++++++++++++++++
 .../fields/protocol-secret.test.ts            |  66 ++++++++++
 .../sections-editor/fields/protocol-secret.ts |  19 +++
 .../fields/secret-field.test.ts               |  10 +-
 .../sections-editor/fields/secret-field.tsx   |   6 +-
 .../fields/use-image-upload.ts                |  23 +++-
 .../fields/use-serve-asset-upload.ts          |  91 +++++++++++++
 .../sections-editor/schema-form.tsx           |  29 ++++-
 apps/web/src/hooks/use-file-configs.ts        |   4 +-
 apps/web/src/sdk/hooks/use-collections.ts     |   3 +-
 apps/web/src/sdk/hooks/use-virtual-mcp.ts     |  19 ++-
 packages/shared/src/secret-ciphertext.ts      |  92 +++++++++++++
 15 files changed, 586 insertions(+), 54 deletions(-)
 create mode 100644 apps/web/src/components/sections-editor/fields/protocol-secret-field.tsx
 create mode 100644 apps/web/src/components/sections-editor/fields/protocol-secret.test.ts
 create mode 100644 apps/web/src/components/sections-editor/fields/protocol-secret.ts
 create mode 100644 apps/web/src/components/sections-editor/fields/use-serve-asset-upload.ts
 create mode 100644 packages/shared/src/secret-ciphertext.ts

diff --git a/apps/web/src/components/sections-editor/fields/enum-field.tsx b/apps/web/src/components/sections-editor/fields/enum-field.tsx
index cd097eda59..65931c0ccd 100644
--- a/apps/web/src/components/sections-editor/fields/enum-field.tsx
+++ b/apps/web/src/components/sections-editor/fields/enum-field.tsx
@@ -40,7 +40,9 @@ export function EnumField({
         virtualMcpId={sandbox?.virtualMcpId}
       />
       <Select
-        value={selectValue}
+        // "" (no selection, the placeholder) rather than undefined keeps the
+        // Select controlled when a value arrives later.
+        value={selectValue ?? ""}
         onValueChange={(v) => onChange(selectValueToFormValue(v, options))}
       >
         <SelectTrigger id={path} className="h-10 w-full min-w-0">
diff --git a/apps/web/src/components/sections-editor/fields/file-field.tsx b/apps/web/src/components/sections-editor/fields/file-field.tsx
index b8d408c80b..d9cd2773ec 100644
--- a/apps/web/src/components/sections-editor/fields/file-field.tsx
+++ b/apps/web/src/components/sections-editor/fields/file-field.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { File02, Film01, Trash01, Upload01 } from "@untitledui/icons";
 import { toast } from "sonner";
 import { Button } from "@decocms/ui/components/button.tsx";
@@ -12,6 +12,10 @@ import {
 import { matchSiteSlugConfig } from "@/components/file-picker/match-site-slug-config";
 import { useFileConfigsQuery } from "@/hooks/use-file-configs";
 import { useFilePickerUpload } from "@/hooks/use-file-picker";
+import {
+  useServeAssetSrc,
+  useServeAssetUpload,
+} from "./use-serve-asset-upload";
 import { ClickToReplaceOverlay } from "./click-to-replace-overlay";
 import { extractUrl } from "./extract-url";
 import { FieldLabel } from "./field-label";
@@ -45,8 +49,16 @@ export function FileField({
   const fileName = strValue ? basename(strValue) : "";
   const ext = fileName ? extension(fileName) : "";
 
-  const configsQuery = useFileConfigsQuery();
+  // A connected `deco serve` writes uploads into the repository instead, so
+  // Studio's file storage (and its bucket picker) is left out.
+  const serveUpload = useServeAssetUpload(sandbox);
+  const configsQuery = useFileConfigsQuery({ enabled: !serveUpload });
   const upload = useFilePickerUpload();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  /** Choose a file: the system file dialog for `deco serve`, else the picker. */
+  const browse = () =>
+    serveUpload ? fileInputRef.current?.click() : setPickerOpen(true);
+  const previewSrc = useServeAssetSrc(sandbox, strValue);
   const lockedConfig = matchSiteSlugConfig(
     configsQuery.data?.configs ?? [],
     sandbox?.siteSlug,
@@ -64,6 +76,19 @@ export function FileField({
       }
     }
 
+    if (serveUpload) {
+      try {
+        onChange(await serveUpload(list[0]!));
+      } catch (err) {
+        toast.error(
+          err instanceof Error
+            ? err.message
+            : t("sectionsEditor.fileField.uploadFailed"),
+        );
+      }
+      return;
+    }
+
     const targetConfigId = resolveTargetConfigId(
       configsQuery.data?.configs ?? [],
       lockedConfig?.id,
@@ -146,13 +171,13 @@ export function FileField({
             <>
               <button
                 type="button"
-                onClick={() => setPickerOpen(true)}
+                onClick={browse}
                 aria-label={t("sectionsEditor.fileField.replaceVideoLabel")}
                 className="relative block h-40 w-full cursor-pointer overflow-hidden bg-black"
               >
                 <video
                   key={strValue}
-                  src={strValue}
+                  src={previewSrc}
                   preload="metadata"
                   className="h-full w-full object-contain"
                 />
@@ -169,7 +194,7 @@ export function FileField({
           ) : (
             <button
               type="button"
-              onClick={() => setPickerOpen(true)}
+              onClick={browse}
               aria-label={t("sectionsEditor.fileField.replaceFileLabel")}
               className="flex w-full cursor-pointer items-center gap-3 px-3 py-2.5 text-left hover:bg-muted/60"
             >
@@ -188,7 +213,7 @@ export function FileField({
         ) : (
           <button
             type="button"
-            onClick={() => setPickerOpen(true)}
+            onClick={browse}
             className="flex w-full flex-col items-center justify-center gap-2 py-8 text-sm text-muted-foreground hover:bg-muted/60 hover:text-foreground"
           >
             {isVideo ? <Film01 size={20} /> : <File02 size={20} />}
@@ -228,7 +253,7 @@ export function FileField({
             type="button"
             variant="outline"
             size="sm"
-            onClick={() => setPickerOpen(true)}
+            onClick={browse}
             className="h-9 shrink-0"
           >
             <Upload01 size={14} />
@@ -256,13 +281,26 @@ export function FileField({
         )}
       </div>
 
-      <FilePickerDialog
-        open={pickerOpen}
-        onOpenChange={setPickerOpen}
-        mode="any"
-        onSelect={(url) => onChange(url)}
-        lockedConfigId={lockedConfig?.id ?? null}
-      />
+      {serveUpload ? (
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept={isVideo ? "video/*" : undefined}
+          className="hidden"
+          onChange={(e) => {
+            void handleFiles(e.target.files);
+            e.target.value = "";
+          }}
+        />
+      ) : (
+        <FilePickerDialog
+          open={pickerOpen}
+          onOpenChange={setPickerOpen}
+          mode="any"
+          onSelect={(url) => onChange(url)}
+          lockedConfigId={lockedConfig?.id ?? null}
+        />
+      )}
     </div>
   );
 }
diff --git a/apps/web/src/components/sections-editor/fields/image-field.tsx b/apps/web/src/components/sections-editor/fields/image-field.tsx
index 12a9ace1fc..a95eefbfa1 100644
--- a/apps/web/src/components/sections-editor/fields/image-field.tsx
+++ b/apps/web/src/components/sections-editor/fields/image-field.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Image01, Trash01, Upload01 } from "@untitledui/icons";
 import { Button } from "@decocms/ui/components/button.tsx";
 import { Input } from "@decocms/ui/components/input.tsx";
@@ -12,7 +12,14 @@ import type { FieldProps } from "./field-props";
 import { basename, extension } from "./media-filename";
 import { MediaTransformControls } from "./media-transform-controls";
 import { isSafeImageUrl, safeImageSrc } from "./safe-image-url";
-import { useImageUpload } from "./use-image-upload";
+import { ACCEPTED_IMAGE_TYPES, useImageUpload } from "./use-image-upload";
+import {
+  useServeAssetSrc,
+  useServeAssetUpload,
+} from "./use-serve-asset-upload";
+
+/** How many times a thumbnail served by the site's dev app is retried. */
+const SERVED_SRC_RETRIES = 3;
 
 export function ImageField({
   schema,
@@ -30,7 +37,18 @@ export function ImageField({
   const [imageErrored, setImageErrored] = useState(false);
   // An author types this field, so the value is untrusted until it has been
   // through `safeImageSrc`; an unsafe scheme reduces to "".
-  const src = safeImageSrc(strValue);
+  // On a connected `deco serve` (v8), `/assets/*` loads from the site's dev
+  // app; everywhere else this is `strValue` unchanged.
+  const servedSrc = useServeAssetSrc(sandbox, strValue);
+  // A file just uploaded to `deco serve` can 404 for a moment, until the dev
+  // app's file watcher sees it: a dev-app thumbnail is retried a few times
+  // before it shows as unavailable.
+  const [loadRetry, setLoadRetry] = useState(0);
+  const src = safeImageSrc(
+    loadRetry > 0
+      ? `${servedSrc}${servedSrc.includes("?") ? "&" : "?"}retry=${loadRetry}`
+      : servedSrc,
+  );
   const unsafe = !!strValue && !src;
   const fileName = strValue ? basename(strValue) : "";
   const ext = fileName ? extension(fileName) : "";
@@ -46,6 +64,7 @@ export function ImageField({
   function setValue(next: string) {
     setImageLoaded(false);
     setImageErrored(false);
+    setLoadRetry(0);
     onChange(next);
   }
 
@@ -87,11 +106,19 @@ export function ImageField({
     if (urlDraft.trim() && !isSafeImageUrl(urlDraft)) setUrlDraft(strValue);
   }
 
-  const { isDragging, isPending, lockedConfigId, dropProps } = useImageUpload({
-    siteSlug: sandbox?.siteSlug,
-    onUploaded: setValue,
-    onNeedsPicker: () => setPickerOpen(true),
-  });
+  const serveUpload = useServeAssetUpload(sandbox);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  /** Choose a file: the system file dialog for `deco serve`, else the picker. */
+  const browse = () =>
+    serveUpload ? fileInputRef.current?.click() : setPickerOpen(true);
+
+  const { isDragging, isPending, lockedConfigId, dropProps, handleFiles } =
+    useImageUpload({
+      siteSlug: sandbox?.siteSlug,
+      onUploaded: setValue,
+      onNeedsPicker: () => setPickerOpen(true),
+      serveUpload,
+    });
 
   return (
     // grid-cols-[minmax(0,1fr)] forces every child to be at most 100% of
@@ -124,7 +151,7 @@ export function ImageField({
           <>
             <button
               type="button"
-              onClick={() => setPickerOpen(true)}
+              onClick={browse}
               aria-label={t("sectionsEditor.imageField.replaceImage")}
               className={cn(
                 "relative block w-full cursor-pointer bg-[image:linear-gradient(45deg,rgba(0,0,0,0.04)_25%,transparent_25%,transparent_75%,rgba(0,0,0,0.04)_75%),linear-gradient(45deg,rgba(0,0,0,0.04)_25%,transparent_25%,transparent_75%,rgba(0,0,0,0.04)_75%)] bg-[position:0_0,8px_8px] [background-size:16px_16px]",
@@ -144,7 +171,16 @@ export function ImageField({
                     !imageLoaded && "opacity-0",
                   )}
                   onLoad={() => setImageLoaded(true)}
-                  onError={() => setImageErrored(true)}
+                  onError={() => {
+                    if (
+                      servedSrc !== strValue &&
+                      loadRetry < SERVED_SRC_RETRIES
+                    ) {
+                      setTimeout(() => setLoadRetry((n) => n + 1), 600);
+                    } else {
+                      setImageErrored(true);
+                    }
+                  }}
                 />
               )}
               {(imageErrored || unsafe) && (
@@ -176,7 +212,7 @@ export function ImageField({
         ) : (
           <button
             type="button"
-            onClick={() => setPickerOpen(true)}
+            onClick={browse}
             className={cn(
               "flex w-full flex-col items-center justify-center gap-2 text-sm text-muted-foreground hover:bg-muted/60 hover:text-foreground",
               compact ? "h-28" : "h-40",
@@ -223,7 +259,7 @@ export function ImageField({
             type="button"
             variant="outline"
             size="sm"
-            onClick={() => setPickerOpen(true)}
+            onClick={browse}
             className="h-9 shrink-0"
           >
             <Upload01 size={14} />
@@ -247,13 +283,26 @@ export function ImageField({
         )}
       </div>
 
-      <FilePickerDialog
-        open={pickerOpen}
-        onOpenChange={setPickerOpen}
-        mode="image"
-        onSelect={(url) => setValue(url)}
-        lockedConfigId={lockedConfigId}
-      />
+      {serveUpload ? (
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept={[...ACCEPTED_IMAGE_TYPES].join(",")}
+          className="hidden"
+          onChange={(e) => {
+            void handleFiles(e.target.files);
+            e.target.value = "";
+          }}
+        />
+      ) : (
+        <FilePickerDialog
+          open={pickerOpen}
+          onOpenChange={setPickerOpen}
+          mode="image"
+          onSelect={(url) => setValue(url)}
+          lockedConfigId={lockedConfigId}
+        />
+      )}
     </div>
   );
 }
diff --git a/apps/web/src/components/sections-editor/fields/protocol-secret-field.tsx b/apps/web/src/components/sections-editor/fields/protocol-secret-field.tsx
new file mode 100644
index 0000000000..54662d3e72
--- /dev/null
+++ b/apps/web/src/components/sections-editor/fields/protocol-secret-field.tsx
@@ -0,0 +1,121 @@
+import { encryptSecret } from "@decocms/blocks/secrets";
+import { SECRET_BLOCK_TYPE } from "@decocms/shared/secret-ciphertext";
+import { isSecretBlock as isV7SecretBlock } from "@decocms/shared/decofile";
+import { useT } from "@/i18n/use-t.ts";
+import { useContentBackend } from "../use-content-backend";
+import { FieldLabel } from "./field-label";
+import type { FieldProps } from "./field-props";
+import { EncryptedSecretInput, SecretField } from "./secret-field";
+import { protocolSecretState } from "./protocol-secret";
+
+/**
+ * Secret fields, by backend. On the content protocol a `Secret` field is
+ * write-only: what an editor types is encrypted in the browser with the
+ * site's public key (`describe.secrets`) and only the `secret` block with its
+ * ciphertext is ever saved. v7 secrets need the site's own encrypt action,
+ * which the protocol never runs, so they can't be edited there.
+ */
+export function SecretFieldForBackend(props: FieldProps) {
+  const backend = useContentBackend(
+    props.sandbox?.virtualMcpId,
+    props.sandbox?.branch,
+  );
+  // A masked plain string, or a v7 site: the site's own encrypt action.
+  if (backend.kind === "legacy" || props.schema.format === "password") {
+    return <SecretField {...props} />;
+  }
+  // Undecided or unreachable: the legacy field would post plaintext to a site
+  // that may be a protocol one, so nothing is editable until it's known.
+  // Still being decided (briefly, while org settings load), it says nothing:
+  // most sites are v7 and get their usual field a moment later.
+  if (backend.kind !== "protocol") {
+    return (
+      <SecretMessage
+        {...props}
+        message={
+          backend.kind === "unavailable"
+            ? "sectionsEditor.secretField.backendUnavailableMessage"
+            : null
+        }
+      />
+    );
+  }
+  if (isV7SecretBlock(props.value)) {
+    return (
+      <SecretMessage
+        {...props}
+        message="sectionsEditor.secretField.legacySecretUnavailableMessage"
+      />
+    );
+  }
+  return (
+    <ProtocolSecretField
+      {...props}
+      publicKey={backend.describe.secrets?.publicKey ?? null}
+    />
+  );
+}
+
+function ProtocolSecretField({
+  schema,
+  value,
+  onChange,
+  label,
+  path,
+  sandbox,
+  publicKey,
+}: FieldProps & { publicKey: string | null }) {
+  const t = useT();
+  return (
+    <div className="space-y-2">
+      <FieldLabel
+        htmlFor={path}
+        label={label}
+        description={schema.description}
+        virtualMcpId={sandbox?.virtualMcpId}
+      />
+      {publicKey ? (
+        <EncryptedSecretInput
+          id={path}
+          stored={protocolSecretState(value)}
+          encrypt={async (plaintext) =>
+            (await encryptSecret(publicKey, plaintext)).ciphertext
+          }
+          onEncrypted={(ciphertext) =>
+            onChange({ __resolveType: SECRET_BLOCK_TYPE, ciphertext })
+          }
+        />
+      ) : (
+        <p role="alert" className="text-xs text-muted-foreground">
+          {t("sectionsEditor.secretField.noPublicKeyMessage")}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function SecretMessage({
+  schema,
+  label,
+  path,
+  sandbox,
+  message,
+}: FieldProps & {
+  message:
+    | "sectionsEditor.secretField.backendUnavailableMessage"
+    | "sectionsEditor.secretField.legacySecretUnavailableMessage"
+    | null;
+}) {
+  const t = useT();
+  return (
+    <div className="space-y-2">
+      <FieldLabel
+        htmlFor={path}
+        label={label}
+        description={schema.description}
+        virtualMcpId={sandbox?.virtualMcpId}
+      />
+      {message && <p className="text-xs text-muted-foreground">{t(message)}</p>}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/sections-editor/fields/protocol-secret.test.ts b/apps/web/src/components/sections-editor/fields/protocol-secret.test.ts
new file mode 100644
index 0000000000..b0681c19d0
--- /dev/null
+++ b/apps/web/src/components/sections-editor/fields/protocol-secret.test.ts
@@ -0,0 +1,66 @@
+import { describe, expect, test } from "bun:test";
+import { encryptSecret } from "@decocms/blocks/secrets";
+import {
+  decodeBase64Url,
+  parseCiphertext,
+  publicKeyPemFromDer,
+} from "@decocms/shared/secret-ciphertext";
+import { protocolSecretState } from "./protocol-secret";
+
+async function keyPair() {
+  const pair = (await crypto.subtle.generateKey(
+    {
+      name: "RSA-OAEP",
+      modulusLength: 2048,
+      publicExponent: new Uint8Array([1, 0, 1]),
+      hash: "SHA-256",
+    },
+    true,
+    ["encrypt", "decrypt"],
+  )) as CryptoKeyPair;
+  const spki = new Uint8Array(
+    await crypto.subtle.exportKey("spki", pair.publicKey),
+  );
+  return { privateKey: pair.privateKey, publicKey: publicKeyPemFromDer(spki) };
+}
+
+async function decrypt(privateKey: CryptoKey, ciphertext: string) {
+  const parts = parseCiphertext(ciphertext)!;
+  const raw = await crypto.subtle.decrypt(
+    { name: "RSA-OAEP" },
+    privateKey,
+    parts.wrappedKey as BufferSource,
+  );
+  const aes = await crypto.subtle.importKey("raw", raw, "AES-GCM", false, [
+    "decrypt",
+  ]);
+  const plain = await crypto.subtle.decrypt(
+    { name: "AES-GCM", iv: parts.iv as BufferSource },
+    aes,
+    parts.ciphertext as BufferSource,
+  );
+  return new TextDecoder().decode(plain);
+}
+
+describe("protocol secrets", () => {
+  test("encrypts in the browser so only the private key reads it", async () => {
+    const { privateKey, publicKey } = await keyPair();
+    const { ciphertext } = await encryptSecret(publicKey, "sk_live_123");
+    expect(ciphertext).not.toContain("sk_live_123");
+    expect(decodeBase64Url(ciphertext.split(".")[1]!)).not.toBeNull();
+    expect(await decrypt(privateKey, ciphertext)).toBe("sk_live_123");
+    expect(protocolSecretState({ __resolveType: "secret", ciphertext })).toBe(
+      "encrypted",
+    );
+  });
+
+  test("reports what a field holds", () => {
+    expect(protocolSecretState(undefined)).toBe("none");
+    expect(protocolSecretState("")).toBe("none");
+    // A plain string in a Secret field is exactly what must never be saved.
+    expect(protocolSecretState("sk_live_123")).toBe("plaintext");
+    expect(
+      protocolSecretState({ __resolveType: "secret", ciphertext: "nope" }),
+    ).toBe("plaintext");
+  });
+});
diff --git a/apps/web/src/components/sections-editor/fields/protocol-secret.ts b/apps/web/src/components/sections-editor/fields/protocol-secret.ts
new file mode 100644
index 0000000000..959b1c8437
--- /dev/null
+++ b/apps/web/src/components/sections-editor/fields/protocol-secret.ts
@@ -0,0 +1,19 @@
+import {
+  isWellFormedCiphertext,
+  SECRET_BLOCK_TYPE,
+} from "@decocms/shared/secret-ciphertext";
+import type { StoredSecretState } from "./secret-field";
+
+/** What a next-major `Secret` field holds now. */
+export function protocolSecretState(value: unknown): StoredSecretState {
+  if (value === undefined || value === null || value === "") return "none";
+  if (
+    typeof value === "object" &&
+    !Array.isArray(value) &&
+    (value as Record<string, unknown>).__resolveType === SECRET_BLOCK_TYPE &&
+    isWellFormedCiphertext((value as Record<string, unknown>).ciphertext)
+  ) {
+    return "encrypted";
+  }
+  return "plaintext";
+}
diff --git a/apps/web/src/components/sections-editor/fields/secret-field.test.ts b/apps/web/src/components/sections-editor/fields/secret-field.test.ts
index a9f4803461..bc85151b37 100644
--- a/apps/web/src/components/sections-editor/fields/secret-field.test.ts
+++ b/apps/web/src/components/sections-editor/fields/secret-field.test.ts
@@ -2,7 +2,7 @@ import { describe, expect, test } from "bun:test";
 import { isValidElement } from "react";
 import { renderField } from "../schema-form";
 import type { SchemaProperty } from "../resolve-schema";
-import { SecretField } from "./secret-field";
+import { SecretFieldForBackend } from "./protocol-secret-field";
 
 const secretFormat: SchemaProperty = { type: "string", format: "secret" };
 
@@ -21,7 +21,7 @@ describe("renderField secret routing", () => {
       { type: "object" },
       { __resolveType: "website/loaders/secret.ts", encrypted: "a1b2" },
     ],
-  ] as const)("renders SecretField for %s", (_, schema, value) => {
+  ] as const)("routes %s to the secret field", (_, schema, value) => {
     const element = renderField({
       schema,
       value,
@@ -29,7 +29,7 @@ describe("renderField secret routing", () => {
       path: "encrypted",
       label: "Secret Value",
     });
-    expect(isValidElement(element) && element.type).toBe(SecretField);
+    expect(isValidElement(element) && element.type).toBe(SecretFieldForBackend);
   });
 
   test("a plain string still renders as a plain field", () => {
@@ -40,6 +40,8 @@ describe("renderField secret routing", () => {
       path: "title",
       label: "Title",
     });
-    expect(isValidElement(element) && element.type).not.toBe(SecretField);
+    expect(isValidElement(element) && element.type).not.toBe(
+      SecretFieldForBackend,
+    );
   });
 });
diff --git a/apps/web/src/components/sections-editor/fields/secret-field.tsx b/apps/web/src/components/sections-editor/fields/secret-field.tsx
index 0f02c93d22..db1bee4369 100644
--- a/apps/web/src/components/sections-editor/fields/secret-field.tsx
+++ b/apps/web/src/components/sections-editor/fields/secret-field.tsx
@@ -26,7 +26,7 @@ export function isSecretField(schema: SchemaProperty, value: unknown): boolean {
   );
 }
 
-type EncryptSecret = (value: string) => Promise<string>;
+export type EncryptSecret = (value: string) => Promise<string>;
 
 /**
  * Deco API secrets are `website/loaders/secret.ts` blocks (`name` + `encrypted`).
@@ -110,7 +110,7 @@ export function SecretField({
   );
 }
 
-type StoredSecretState = "none" | "encrypted" | "plaintext";
+export type StoredSecretState = "none" | "encrypted" | "plaintext";
 
 function storedSecretState(encrypted: unknown): StoredSecretState {
   if (encrypted === undefined || encrypted === null || encrypted === "") {
@@ -124,7 +124,7 @@ function storedSecretState(encrypted: unknown): StoredSecretState {
  * button, and emits nothing but the site's hex. A failed encryption emits
  * nothing, so the pending secret can't reach the autosave.
  */
-function EncryptedSecretInput({
+export function EncryptedSecretInput({
   id,
   stored,
   encrypt,
diff --git a/apps/web/src/components/sections-editor/fields/use-image-upload.ts b/apps/web/src/components/sections-editor/fields/use-image-upload.ts
index b553ab98a1..0fb2207f0f 100644
--- a/apps/web/src/components/sections-editor/fields/use-image-upload.ts
+++ b/apps/web/src/components/sections-editor/fields/use-image-upload.ts
@@ -23,7 +23,7 @@ function httpUrl(value: string): string {
   }
 }
 
-const ACCEPTED_IMAGE_TYPES = new Set([
+export const ACCEPTED_IMAGE_TYPES = new Set([
   "image/png",
   "image/jpeg",
   "image/gif",
@@ -42,14 +42,20 @@ export function useImageUpload({
   siteSlug,
   onUploaded,
   onNeedsPicker,
+  serveUpload,
 }: {
   siteSlug?: string | null;
   onUploaded: (publicUrl: string) => void;
   /** No deterministic bucket — the caller opens the picker to choose one. */
   onNeedsPicker: () => void;
+  /**
+   * A connected `deco serve` (v8 only): uploads go into the repository
+   * instead, so Studio's file storage is left out.
+   */
+  serveUpload?: ((file: File) => Promise<string>) | null;
 }) {
   const t = useT();
-  const configsQuery = useFileConfigsQuery();
+  const configsQuery = useFileConfigsQuery({ enabled: !serveUpload });
   const upload = useFilePickerUpload();
   const [isDragging, setIsDragging] = useState(false);
   const lockedConfig = matchSiteSlugConfig(
@@ -67,6 +73,19 @@ export function useImageUpload({
       return;
     }
 
+    if (serveUpload) {
+      try {
+        onUploaded(await serveUpload(list[0]!));
+      } catch (err) {
+        toast.error(
+          err instanceof Error
+            ? err.message
+            : t("sectionsEditor.imageField.uploadFailed"),
+        );
+      }
+      return;
+    }
+
     const targetConfigId = resolveTargetConfigId(
       configsQuery.data?.configs ?? [],
       lockedConfig?.id,
diff --git a/apps/web/src/components/sections-editor/fields/use-serve-asset-upload.ts b/apps/web/src/components/sections-editor/fields/use-serve-asset-upload.ts
new file mode 100644
index 0000000000..c24638c52a
--- /dev/null
+++ b/apps/web/src/components/sections-editor/fields/use-serve-asset-upload.ts
@@ -0,0 +1,91 @@
+import { useDecoServeConnection } from "@/hooks/use-deco-serve-connection";
+import { useT } from "@/i18n/use-t.ts";
+import { buildSandboxUrl } from "@/sdk/sandbox-url";
+import { servePreviewUrl } from "../content-backend";
+import { useContentBackend } from "../use-content-backend";
+import type { SandboxConfig } from "./field-props";
+
+/**
+ * Uploads to a connected `deco serve`, when it takes them (`describe.assets`):
+ * `PUT <server>/assets/<name>`, answered with the path the
+ * field stores (`/assets/<name>`). A sandbox's daemon takes them the same way,
+ * through Studio's sandbox proxy, into its working tree. `null` otherwise —
+ * on GitHub uploads keep going to Studio's file storage.
+ */
+export function useServeAssetUpload(
+  sandbox: SandboxConfig | null | undefined,
+): ((file: File) => Promise<string>) | null {
+  const t = useT();
+  const backend = useContentBackend(sandbox?.virtualMcpId, sandbox?.branch);
+  const { connection } = useDecoServeConnection(sandbox?.virtualMcpId);
+  if (
+    backend.kind !== "protocol" ||
+    !backend.describe.assets ||
+    !sandbox ||
+    (backend.source === "local" ? !connection : backend.source !== "sandbox")
+  ) {
+    return null;
+  }
+  const { maxBytes } = backend.describe.assets;
+  const uploadUrl = (name: string) =>
+    backend.source === "sandbox"
+      ? buildSandboxUrl(sandbox, `assets/${encodeURIComponent(name)}`)
+      : `${new URL(connection!.endpoint).origin}/assets/${encodeURIComponent(name)}`;
+  return async (file) => {
+    if (file.size > maxBytes) {
+      throw new Error(
+        t("sectionsEditor.fileField.tooLarge", {
+          max: `${Math.floor(maxBytes / (1024 * 1024))} MB`,
+        }),
+      );
+    }
+    if (backend.describe.readOnly) {
+      throw new Error(t("decoServe.upload.readOnly", { name: file.name }));
+    }
+    let res: Response;
+    try {
+      res = await fetch(uploadUrl(file.name), {
+        method: "PUT",
+        headers: {
+          "content-type": file.type || "application/octet-stream",
+        },
+        body: file,
+      });
+    } catch {
+      throw new Error(t("decoServe.upload.serverGone", { name: file.name }));
+    }
+    const body = (await res.json().catch(() => null)) as {
+      path?: unknown;
+      error?: { message?: unknown };
+    } | null;
+    if (!res.ok || typeof body?.path !== "string") {
+      const message = body?.error?.message;
+      throw new Error(
+        t("decoServe.upload.failed", {
+          name: file.name,
+          detail: typeof message === "string" ? message : `HTTP ${res.status}`,
+        }),
+      );
+    }
+    return body.path;
+  };
+}
+
+/**
+ * Where a stored path such as `/assets/logo.png` loads from: on a connected
+ * `deco serve`, the site's own dev app, not Studio's origin; in a sandbox,
+ * its dev server.
+ */
+export function useServeAssetSrc(
+  sandbox: SandboxConfig | null | undefined,
+  path: string,
+): string {
+  const backend = useContentBackend(sandbox?.virtualMcpId, sandbox?.branch);
+  const preview =
+    backend.kind === "protocol" && backend.source === "sandbox"
+      ? (sandbox?.previewUrl ?? null)
+      : servePreviewUrl(backend);
+  return preview && path.startsWith("/") && !path.startsWith("//")
+    ? new URL(path, preview).href
+    : path;
+}
diff --git a/apps/web/src/components/sections-editor/schema-form.tsx b/apps/web/src/components/sections-editor/schema-form.tsx
index b3098e9c1f..86103365f8 100644
--- a/apps/web/src/components/sections-editor/schema-form.tsx
+++ b/apps/web/src/components/sections-editor/schema-form.tsx
@@ -19,7 +19,9 @@ import { LocationField } from "./fields/location-field";
 import { MapField } from "./fields/map-field";
 import { MultivariateFieldWrapper } from "./fields/multivariate-field-wrapper";
 import { isSecretBlock } from "@decocms/shared/decofile";
-import { isSecretField, SecretField } from "./fields/secret-field";
+import { isSecretField } from "./fields/secret-field";
+import { SecretFieldForBackend } from "./fields/protocol-secret-field";
+import { isLazyFieldSchema, unwrapLazy, wrapLazy } from "./lazy-value";
 import {
   isEmptyFieldValue,
   RequiredFieldProvider,
@@ -171,6 +173,21 @@ function renderResolvedBlockRefValue(props: FieldProps): ReactNode | null {
 export function renderField(props: FieldProps) {
   const { schema, value } = props;
 
+  // `Lazy<T>`: edit the `T`; the stored value is the `lazy` block around it.
+  if (isLazyFieldSchema(schema)) {
+    const inner = schema.properties.value;
+    return renderField({
+      ...props,
+      schema: {
+        ...inner,
+        title: schema.title ?? inner.title,
+        description: schema.description ?? inner.description,
+      },
+      value: unwrapLazy(value),
+      onChange: (next) => props.onChange(wrapLazy(next)),
+    });
+  }
+
   if (isMultivariateArrayWrapper(value)) {
     const multivariateArray = unwrapMultivariateArrayValue(value);
     const arraySchema = arraySchemaForValue(schema);
@@ -343,7 +360,7 @@ export function renderField(props: FieldProps) {
 
   // Deco secrets (loader blocks and their `@format secret` value) must never hit a plain text input.
   if (isSecretField(schema, value)) {
-    return <SecretField key={props.path} {...props} />;
+    return <SecretFieldForBackend key={props.path} {...props} />;
   }
 
   // Resolved block-ref value whose schema lost its picker branch — see renderResolvedBlockRefValue. Skip when a format/enum widget owns the field.
@@ -364,7 +381,13 @@ export function renderField(props: FieldProps) {
   if (effectiveValue === null || effectiveValue === undefined) return null;
 
   if (isSecretBlock(effectiveValue)) {
-    return <SecretField key={props.path} {...props} value={effectiveValue} />;
+    return (
+      <SecretFieldForBackend
+        key={props.path}
+        {...props}
+        value={effectiveValue}
+      />
+    );
   }
 
   const effectiveProps = { ...props, value: effectiveValue };
diff --git a/apps/web/src/hooks/use-file-configs.ts b/apps/web/src/hooks/use-file-configs.ts
index e2a1c9bf70..7f34860fd5 100644
--- a/apps/web/src/hooks/use-file-configs.ts
+++ b/apps/web/src/hooks/use-file-configs.ts
@@ -47,12 +47,14 @@ export function useFileConfigs() {
  * (1 config → drop-upload directly; 2+ → open the picker) without
  * blocking the form render. Shares the cache key with useFileConfigs.
  */
-export function useFileConfigsQuery() {
+export function useFileConfigsQuery({ enabled = true } = {}) {
   const { org } = useProjectContext();
   const studio = useStudioTools();
 
   return useQuery({
     queryKey: KEYS.fileConfigs(org.id),
+    // No org (the account-less `/site-editor`) has no file storage to list.
+    enabled: enabled && !!org.id,
     staleTime: 60_000,
     queryFn: () => studio.call("FILE_CONFIG_LIST", {}),
   });
diff --git a/apps/web/src/sdk/hooks/use-collections.ts b/apps/web/src/sdk/hooks/use-collections.ts
index c7a41bef45..bab1333f83 100644
--- a/apps/web/src/sdk/hooks/use-collections.ts
+++ b/apps/web/src/sdk/hooks/use-collections.ts
@@ -273,7 +273,8 @@ export function useCollectionItem<T extends CollectionEntity>(
   scopeKey: string,
   collectionName: string,
   itemId: string | undefined,
-  client: Client,
+  /** null reads as no item, without a request. */
+  client: Client | null,
 ) {
   const { data } = useSuspenseQuery(
     collectionItemQueryOptions<T>(scopeKey, collectionName, itemId, client),
diff --git a/apps/web/src/sdk/hooks/use-virtual-mcp.ts b/apps/web/src/sdk/hooks/use-virtual-mcp.ts
index ed192e2888..d0daceb41c 100644
--- a/apps/web/src/sdk/hooks/use-virtual-mcp.ts
+++ b/apps/web/src/sdk/hooks/use-virtual-mcp.ts
@@ -23,6 +23,7 @@ import {
   mcpClientQueryOptions,
   useMCPClient,
   useMCPClientNonBlocking,
+  useMCPClientOptional,
 } from "./use-mcp-client";
 import { SELF_MCP_ALIAS_ID } from "@decocms/shared/sdk/lib/constants";
 import { KEYS } from "@/lib/query-keys";
@@ -111,10 +112,14 @@ export function useVirtualMCPNonBlocking(
   virtualMcpId: string | null | undefined,
 ): VirtualMCPEntity | null {
   const { org } = useProjectContext();
-  const client = useMCPClientNonBlocking({
-    connectionId: SELF_MCP_ALIAS_ID,
-    orgId: org.id,
-    orgSlug: org.slug,
+  // No org (`/site-editor`): nothing to connect to.
+  const { data: client = null } = useQuery({
+    ...mcpClientQueryOptions({
+      connectionId: SELF_MCP_ALIAS_ID,
+      orgId: org.id,
+      orgSlug: org.slug,
+    }),
+    enabled: !!org.id,
   });
 
   const { data } = useQuery({
@@ -208,8 +213,10 @@ export function useVirtualMCP(
   virtualMcpId: string | null | undefined,
 ): VirtualMCPEntity | null {
   const { org } = useProjectContext();
-  const client = useMCPClient({
-    connectionId: SELF_MCP_ALIAS_ID,
+  // Outside an org (the account-less `/site-editor`) there's no project to
+  // read: skip the client, and the item reads as null without a request.
+  const client = useMCPClientOptional({
+    connectionId: org.id ? SELF_MCP_ALIAS_ID : undefined,
     orgId: org.id,
     orgSlug: org.slug,
   });
diff --git a/packages/shared/src/secret-ciphertext.ts b/packages/shared/src/secret-ciphertext.ts
new file mode 100644
index 0000000000..1e3f989883
--- /dev/null
+++ b/packages/shared/src/secret-ciphertext.ts
@@ -0,0 +1,92 @@
+/**
+ * The `secret` block's ciphertext format, as the Blocks spec documents it
+ * (`@decocms/blocks/secrets` produces it, the content protocol checks it):
+ *
+ * ```
+ * v1.<wrappedKey>.<iv>.<ciphertext>
+ * ```
+ *
+ * Each segment is unpadded, canonical base64url: the RSA-OAEP (SHA-256)
+ * wrapped AES-256-GCM key (256, 384 or 512 bytes), the 12-byte AES-GCM nonce,
+ * and the AES-GCM output with its 16-byte tag (at least 16 bytes).
+ *
+ * `@decocms/blocks` keeps its own parser private, so Studio carries this small
+ * reading of the format: enough to tell an encrypted field from plain text and
+ * for tests to decrypt what `encryptSecret` wrote. Encrypting goes through
+ * `encryptSecret` from `@decocms/blocks/secrets`.
+ */
+
+/** The built-in block type that holds an encrypted value. */
+export const SECRET_BLOCK_TYPE = "secret";
+
+const WRAPPED_KEY_BYTES = [256, 384, 512];
+const IV_BYTES = 12;
+const GCM_TAG_BYTES = 16;
+const CIPHERTEXT_PATTERN =
+  /^v1\.[A-Za-z0-9_-]+\.[A-Za-z0-9_-]+\.[A-Za-z0-9_-]+$/;
+
+/** The decoded segments of a ciphertext. */
+export interface CiphertextParts {
+  wrappedKey: Uint8Array;
+  iv: Uint8Array;
+  ciphertext: Uint8Array;
+}
+
+function encodeBase64Url(bytes: Uint8Array): string {
+  let binary = "";
+  for (const byte of bytes) binary += String.fromCharCode(byte);
+  return btoa(binary)
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+    .replace(/=+$/, "");
+}
+
+/** Decodes unpadded base64url; `null` when `text` isn't canonical base64url. */
+export function decodeBase64Url(text: string): Uint8Array | null {
+  if (!/^[A-Za-z0-9_-]*$/.test(text) || text.length % 4 === 1) return null;
+  const padded =
+    text.replace(/-/g, "+").replace(/_/g, "/") +
+    "=".repeat((4 - (text.length % 4)) % 4);
+  let binary: string;
+  try {
+    binary = atob(padded);
+  } catch {
+    return null;
+  }
+  const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
+  // One value, one spelling: reject stray low bits.
+  return encodeBase64Url(bytes) === text ? bytes : null;
+}
+
+/** Splits and decodes a ciphertext; `null` when it isn't well formed. */
+export function parseCiphertext(text: unknown): CiphertextParts | null {
+  if (typeof text !== "string" || !CIPHERTEXT_PATTERN.test(text)) return null;
+  const [, rawKey = "", rawIv = "", rawCiphertext = ""] = text.split(".");
+  const wrappedKey = decodeBase64Url(rawKey);
+  const iv = decodeBase64Url(rawIv);
+  const ciphertext = decodeBase64Url(rawCiphertext);
+  if (!wrappedKey || !iv || !ciphertext) return null;
+  if (
+    !WRAPPED_KEY_BYTES.includes(wrappedKey.byteLength) ||
+    iv.byteLength !== IV_BYTES ||
+    ciphertext.byteLength < GCM_TAG_BYTES
+  ) {
+    return null;
+  }
+  return { wrappedKey, iv, ciphertext };
+}
+
+/** True when `ciphertext` is a well-formed `v1` ciphertext. */
+export function isWellFormedCiphertext(
+  ciphertext: unknown,
+): ciphertext is string {
+  return parseCiphertext(ciphertext) !== null;
+}
+
+/** A `PUBLIC KEY` PEM block for SPKI `der` bytes, with 64-character lines. */
+export function publicKeyPemFromDer(der: Uint8Array): string {
+  let binary = "";
+  for (const byte of der) binary += String.fromCharCode(byte);
+  const lines = btoa(binary).match(/.{1,64}/g) ?? [];
+  return `-----BEGIN PUBLIC KEY-----\n${lines.join("\n")}\n-----END PUBLIC KEY-----\n`;
+}