diff --git a/apps/mesh/src/api/routes/org-scoped.ts b/apps/mesh/src/api/routes/org-scoped.ts
index 132454c521..c1045c2b6c 100644
--- a/apps/mesh/src/api/routes/org-scoped.ts
+++ b/apps/mesh/src/api/routes/org-scoped.ts
@@ -19,6 +19,7 @@ import { createTriggerCallbackRoutes } from "./trigger-callback";
 import { createVirtualMcpRoutes } from "./virtual-mcp";
 import { createVmEventsRoutes } from "./vm-events";
 import { createVmExecRoutes } from "./vm-exec";
+import { createVmFileRoutes } from "./vm-file";
 import { createVmSetupRoutes } from "./vm-setup";
 
 interface OrgScopedDeps {
@@ -66,6 +67,7 @@ export const createOrgScopedApi = (deps: OrgScopedDeps) => {
   app.route("/", createKVRoutes({ kvStorage: deps.kvStorage }));
   app.route("/vm-events", createVmEventsRoutes()); // /api/:org/vm-events
   app.route("/vm-exec", createVmExecRoutes()); // /api/:org/vm-exec/{exec,kill}/:script
+  app.route("/vm-file", createVmFileRoutes()); // /api/:org/vm-file/{write,read}
   app.route("/vm-setup", createVmSetupRoutes()); // /api/:org/vm-setup/:step
   app.route("/deco-sites", createDecoSitesOrgRoutes()); // /api/:org/deco-sites
   app.route("/sso", createSsoRoutes()); // /api/:org/sso/* (renamed from /api/org-sso)
diff --git a/apps/mesh/src/api/routes/vm-file.ts b/apps/mesh/src/api/routes/vm-file.ts
new file mode 100644
index 0000000000..865ba349cb
--- /dev/null
+++ b/apps/mesh/src/api/routes/vm-file.ts
@@ -0,0 +1,90 @@
+/**
+ * Browser-facing proxy for the daemon's file read/write endpoints.
+ *
+ * Same auth + claim + proxy pattern as `vm-exec.ts`. The browser doesn't hold
+ * the daemon bearer token, so we authenticate the user and forward through
+ * `runner.proxyDaemonRequest`.
+ */
+
+import { Hono, type Context } from "hono";
+import { composeSandboxRef } from "@decocms/sandbox/runner";
+import { computeClaimHandle } from "../../sandbox/claim-handle";
+import { getOrInitSharedRunner } from "../../sandbox/lifecycle";
+import {
+  getUserId,
+  requireAuth,
+  requireOrganization,
+} from "../../core/mesh-context";
+import type { Env } from "../hono-env";
+
+async function proxy(c: Context<Env>, daemonPath: string) {
+  const ctx = c.var.meshContext;
+  try {
+    requireAuth(ctx);
+  } catch {
+    return c.json({ error: "Unauthorized" }, 401);
+  }
+  const userId = getUserId(ctx);
+  if (!userId) return c.json({ error: "Unauthorized" }, 401);
+
+  let organization: ReturnType<typeof requireOrganization>;
+  try {
+    organization = requireOrganization(ctx);
+  } catch {
+    return c.json({ error: "Organization scope required" }, 403);
+  }
+
+  const virtualMcpId = c.req.query("virtualMcpId");
+  const branch = c.req.query("branch");
+  if (!virtualMcpId || !branch) {
+    return c.json({ error: "virtualMcpId and branch are required" }, 400);
+  }
+
+  const virtualMcp = await ctx.storage.virtualMcps.findById(virtualMcpId);
+  if (!virtualMcp || virtualMcp.organization_id !== organization.id) {
+    return c.json({ error: "Virtual MCP not found" }, 404);
+  }
+
+  const projectRef = composeSandboxRef({
+    orgId: organization.id,
+    virtualMcpId,
+    branch,
+  });
+  const claimName = computeClaimHandle({ userId, projectRef }, branch);
+
+  const runner = await getOrInitSharedRunner();
+  if (!runner) {
+    return c.json({ error: "No sandbox runner configured" }, 503);
+  }
+
+  // Daemon expects base64-encoded JSON bodies (Cloudflare WAF bypass).
+  const rawBody = await c.req.text();
+  const encodedBody = Buffer.from(rawBody, "utf-8").toString("base64");
+
+  let upstream: Response;
+  try {
+    upstream = await runner.proxyDaemonRequest(claimName, daemonPath, {
+      method: "POST",
+      headers: new Headers({ "content-type": "application/json" }),
+      body: encodedBody,
+    });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    return c.json({ error: `Daemon unreachable: ${message}` }, 502);
+  }
+
+  const text = await upstream.text();
+  return new Response(text, {
+    status: upstream.status,
+    headers: { "content-type": "application/json" },
+  });
+}
+
+export const createVmFileRoutes = () => {
+  const app = new Hono<Env>();
+
+  app.post("/write", (c) => proxy(c, "/_decopilot_vm/write"));
+  app.post("/read", (c) => proxy(c, "/_decopilot_vm/read"));
+
+  return app;
+};
diff --git a/apps/mesh/src/web/components/chat/highlight/common/use-multipart-decision-form.ts b/apps/mesh/src/web/components/chat/highlight/common/use-multipart-decision-form.ts
index 8d8015efb9..9e6bcf958e 100644
--- a/apps/mesh/src/web/components/chat/highlight/common/use-multipart-decision-form.ts
+++ b/apps/mesh/src/web/components/chat/highlight/common/use-multipart-decision-form.ts
@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { type FieldValues, type UseFormReturn, useForm } from "react-hook-form";
 import type { ZodTypeAny } from "zod";
 import {
@@ -114,10 +114,15 @@ export function useMultiPartDecisionForm<TPart, TValues extends FieldValues>(
     })();
   };
 
+  // Stable ref so the effect below doesn't re-fire on every render.
+  const flushRef = useRef(flush);
+  // oxlint-disable-next-line ban-ref-current-assignment/ban-ref-current-assignment -- keep ref in sync with latest closure
+  flushRef.current = flush;
+
   const submit = () => {
     if (!canSubmit) return;
     setPendingFlush(false);
-    flush();
+    flushRef.current();
   };
 
   const submitOrAdvance = () => {
@@ -130,7 +135,7 @@ export function useMultiPartDecisionForm<TPart, TValues extends FieldValues>(
         return;
       }
       setPendingFlush(false);
-      flush();
+      flushRef.current();
     } else {
       const nextKey = findNextUnansweredKey(
         parts,
@@ -145,10 +150,9 @@ export function useMultiPartDecisionForm<TPart, TValues extends FieldValues>(
 
   // Auto-flush deferred submissions when the stream finishes. The
   // streaming-finished transition is an external event, so this is a
-  // legitimate effect. `flush` is in deps so the latest closure (with
-  // current `parts` / `onSubmit`) fires when `isStreaming` flips false;
-  // `pendingFlush` gates one-shot semantics so spurious re-runs from
-  // `flush` identity changes short-circuit at the first guard.
+  // legitimate effect. `flushRef` is stable so the dep array only
+  // reacts to the meaningful state changes (`pendingFlush`, `isStreaming`,
+  // `allAnswered`). The ref always holds the latest closure.
   // oxlint-disable-next-line ban-use-effect/ban-use-effect -- streaming-finished is an external event
   useEffect(() => {
     if (!pendingFlush) return;
@@ -158,8 +162,8 @@ export function useMultiPartDecisionForm<TPart, TValues extends FieldValues>(
       return;
     }
     setPendingFlush(false);
-    flush();
-  }, [pendingFlush, isStreaming, allAnswered, flush]);
+    flushRef.current();
+  }, [pendingFlush, isStreaming, allAnswered]);
 
   return {
     form,
diff --git a/apps/mesh/src/web/components/sections-editor/fields/any-of-field.tsx b/apps/mesh/src/web/components/sections-editor/fields/any-of-field.tsx
new file mode 100644
index 0000000000..84a645556b
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/fields/any-of-field.tsx
@@ -0,0 +1,72 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@deco/ui/components/select.tsx";
+import { Label } from "@deco/ui/components/label.tsx";
+import type { FieldProps } from "./field-props";
+
+export function AnyOfField({
+  schema,
+  value,
+  onChange,
+  path,
+  label,
+}: FieldProps) {
+  // ── block-ref mode (anyOfRefs from schema resolution) ─────────────
+  if (schema.anyOfRefs && schema.anyOfRefs.length > 0) {
+    const refs = schema.anyOfRefs;
+    const currentRt =
+      value !== null &&
+      typeof value === "object" &&
+      !Array.isArray(value) &&
+      typeof (value as Record<string, unknown>).__resolveType === "string"
+        ? ((value as Record<string, unknown>).__resolveType as string)
+        : (refs[0]?.resolveType ?? "");
+
+    const handleRefChange = (rt: string) => {
+      onChange({ __resolveType: rt });
+    };
+
+    return (
+      <div className="space-y-1.5">
+        <Label htmlFor={path}>{label}</Label>
+        <Select value={currentRt} onValueChange={handleRefChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select..." />
+          </SelectTrigger>
+          <SelectContent>
+            {refs.map((ref) => (
+              <SelectItem key={ref.resolveType} value={ref.resolveType}>
+                {ref.title}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {schema.description && (
+          <p className="text-xs text-muted-foreground">{schema.description}</p>
+        )}
+      </div>
+    );
+  }
+
+  // ── Fallback: render a basic text input for unresolved anyOf fields ──
+  return (
+    <div className="space-y-1.5">
+      <Label htmlFor={path}>{label}</Label>
+      <input
+        id={path}
+        type="text"
+        value={value != null ? String(value) : ""}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full rounded-md border bg-background px-3 py-1.5 text-sm"
+        placeholder={schema.description ?? ""}
+      />
+      {schema.description && (
+        <p className="text-xs text-muted-foreground">{schema.description}</p>
+      )}
+    </div>
+  );
+}
diff --git a/apps/mesh/src/web/components/sections-editor/fields/array-field.tsx b/apps/mesh/src/web/components/sections-editor/fields/array-field.tsx
new file mode 100644
index 0000000000..ace87891b0
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/fields/array-field.tsx
@@ -0,0 +1,90 @@
+import { Button } from "@deco/ui/components/button.tsx";
+import { Plus, Trash01 } from "@untitledui/icons";
+import type { FieldProps } from "./field-props";
+import { SchemaForm } from "../schema-form";
+import { renderField } from "../schema-form";
+
+export function ArrayField({
+  schema,
+  value,
+  onChange,
+  path,
+  label,
+}: FieldProps) {
+  const items = Array.isArray(value) ? value : [];
+  const itemSchema = schema.items;
+
+  const addItem = () => {
+    const t = itemSchema?.type;
+    const defaultVal =
+      itemSchema?.default !== undefined
+        ? itemSchema.default
+        : t === "object"
+          ? {}
+          : t === "number" || t === "integer"
+            ? 0
+            : t === "boolean"
+              ? false
+              : t === "array"
+                ? []
+                : "";
+    onChange([...items, defaultVal]);
+  };
+
+  const removeItem = (index: number) => {
+    onChange(items.filter((_, i) => i !== index));
+  };
+
+  const updateItem = (index: number, val: unknown) => {
+    const next = [...items];
+    next[index] = val;
+    onChange(next);
+  };
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <span className="text-sm font-medium">{label}</span>
+        <Button type="button" variant="outline" size="sm" onClick={addItem}>
+          <Plus size={14} />
+          Add
+        </Button>
+      </div>
+      {schema.description && (
+        <p className="text-xs text-muted-foreground">{schema.description}</p>
+      )}
+      {items.map((item, i) => (
+        <div key={`${path}.${i}`} className="border rounded-md p-3 relative">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="absolute top-1 right-1 h-7 w-7 p-0"
+            onClick={() => removeItem(i)}
+          >
+            <Trash01 size={14} />
+          </Button>
+          {itemSchema?.type === "object" && itemSchema.properties ? (
+            <SchemaForm
+              schema={itemSchema}
+              value={item}
+              onChange={(val) => updateItem(i, val)}
+              basePath={`${path}.${i}`}
+            />
+          ) : itemSchema ? (
+            renderField({
+              schema: itemSchema,
+              value: item,
+              onChange: (val) => updateItem(i, val),
+              path: `${path}.${i}`,
+              label: itemSchema.title ?? `Item ${i + 1}`,
+            })
+          ) : null}
+        </div>
+      ))}
+      {items.length === 0 && (
+        <p className="text-xs text-muted-foreground py-2">No items yet.</p>
+      )}
+    </div>
+  );
+}
diff --git a/apps/mesh/src/web/components/sections-editor/fields/boolean-field.tsx b/apps/mesh/src/web/components/sections-editor/fields/boolean-field.tsx
new file mode 100644
index 0000000000..416e280c46
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/fields/boolean-field.tsx
@@ -0,0 +1,29 @@
+import { Switch } from "@deco/ui/components/switch.tsx";
+import { Label } from "@deco/ui/components/label.tsx";
+import type { FieldProps } from "./field-props";
+
+export function BooleanField({
+  value,
+  onChange,
+  path,
+  label,
+  schema,
+}: FieldProps) {
+  const checked = typeof value === "boolean" ? value : false;
+
+  return (
+    <div className="flex items-center justify-between gap-2 py-1">
+      <div>
+        <Label htmlFor={path}>{label}</Label>
+        {schema.description && (
+          <p className="text-xs text-muted-foreground">{schema.description}</p>
+        )}
+      </div>
+      <Switch
+        id={path}
+        checked={checked}
+        onCheckedChange={(v) => onChange(v)}
+      />
+    </div>
+  );
+}
diff --git a/apps/mesh/src/web/components/sections-editor/fields/enum-field.tsx b/apps/mesh/src/web/components/sections-editor/fields/enum-field.tsx
new file mode 100644
index 0000000000..df335b8297
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/fields/enum-field.tsx
@@ -0,0 +1,48 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@deco/ui/components/select.tsx";
+import { Label } from "@deco/ui/components/label.tsx";
+import type { FieldProps } from "./field-props";
+
+export function EnumField({
+  schema,
+  value,
+  onChange,
+  path,
+  label,
+}: FieldProps) {
+  const options = schema.enum ?? [];
+  const strValue = value != null ? String(value) : "";
+
+  return (
+    <div className="space-y-1.5">
+      <Label htmlFor={path}>{label}</Label>
+      {schema.description && (
+        <p className="text-xs text-muted-foreground">{schema.description}</p>
+      )}
+      <Select
+        value={strValue}
+        onValueChange={(v) => {
+          // Map the string back to the original enum value to preserve type
+          const original = options.find((opt) => String(opt) === v);
+          onChange(original !== undefined ? original : v);
+        }}
+      >
+        <SelectTrigger>
+          <SelectValue placeholder="Select..." />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((opt) => (
+            <SelectItem key={String(opt)} value={String(opt)}>
+              {String(opt)}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
diff --git a/apps/mesh/src/web/components/sections-editor/fields/field-props.ts b/apps/mesh/src/web/components/sections-editor/fields/field-props.ts
new file mode 100644
index 0000000000..2bcc99cd63
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/fields/field-props.ts
@@ -0,0 +1,9 @@
+import type { SchemaProperty } from "../resolve-schema";
+
+export interface FieldProps {
+  schema: SchemaProperty;
+  value: unknown;
+  onChange: (value: unknown) => void;
+  path: string;
+  label: string;
+}
diff --git a/apps/mesh/src/web/components/sections-editor/fields/image-field.tsx b/apps/mesh/src/web/components/sections-editor/fields/image-field.tsx
new file mode 100644
index 0000000000..51d76df5b6
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/fields/image-field.tsx
@@ -0,0 +1,42 @@
+import { Input } from "@deco/ui/components/input.tsx";
+import { Label } from "@deco/ui/components/label.tsx";
+import type { FieldProps } from "./field-props";
+
+export function ImageField({
+  schema,
+  value,
+  onChange,
+  path,
+  label,
+}: FieldProps) {
+  const strValue = typeof value === "string" ? value : "";
+
+  return (
+    <div className="space-y-1.5">
+      <Label htmlFor={path}>{label}</Label>
+      {schema.description && (
+        <p className="text-xs text-muted-foreground">{schema.description}</p>
+      )}
+      <div className="flex gap-2 items-start">
+        <Input
+          id={path}
+          type="url"
+          value={strValue}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder="https://..."
+          className="flex-1"
+        />
+        {strValue && (
+          <img
+            src={strValue}
+            alt={label}
+            className="h-10 w-10 rounded border object-cover shrink-0"
+            onError={(e) => {
+              (e.target as HTMLImageElement).style.display = "none";
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/mesh/src/web/components/sections-editor/fields/number-field.tsx b/apps/mesh/src/web/components/sections-editor/fields/number-field.tsx
new file mode 100644
index 0000000000..9caeac0876
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/fields/number-field.tsx
@@ -0,0 +1,31 @@
+import { Input } from "@deco/ui/components/input.tsx";
+import { Label } from "@deco/ui/components/label.tsx";
+import type { FieldProps } from "./field-props";
+
+export function NumberField({
+  schema,
+  value,
+  onChange,
+  path,
+  label,
+}: FieldProps) {
+  const numValue = typeof value === "number" ? value : "";
+
+  return (
+    <div className="space-y-1.5">
+      <Label htmlFor={path}>{label}</Label>
+      {schema.description && (
+        <p className="text-xs text-muted-foreground">{schema.description}</p>
+      )}
+      <Input
+        id={path}
+        type="number"
+        value={numValue}
+        onChange={(e) => {
+          const v = e.target.value;
+          onChange(v === "" ? undefined : Number(v));
+        }}
+      />
+    </div>
+  );
+}
diff --git a/apps/mesh/src/web/components/sections-editor/fields/object-field.tsx b/apps/mesh/src/web/components/sections-editor/fields/object-field.tsx
new file mode 100644
index 0000000000..ed1de46528
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/fields/object-field.tsx
@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { ChevronDown, ChevronRight } from "@untitledui/icons";
+import type { FieldProps } from "./field-props";
+import { SchemaForm } from "../schema-form";
+
+export function ObjectField({
+  schema,
+  value,
+  onChange,
+  path,
+  label,
+}: FieldProps) {
+  const [open, setOpen] = useState(false);
+  const objValue =
+    value != null && typeof value === "object" && !Array.isArray(value)
+      ? (value as Record<string, unknown>)
+      : {};
+
+  if (!schema.properties) return null;
+
+  return (
+    <div className="border rounded-md">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-1.5 w-full px-3 py-2 text-sm font-medium text-left hover:bg-muted/50"
+      >
+        {open ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+        {label}
+      </button>
+      {open && (
+        <div className="px-3 pb-3">
+          <SchemaForm
+            schema={schema}
+            value={objValue}
+            onChange={onChange}
+            basePath={path}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/mesh/src/web/components/sections-editor/fields/string-field.tsx b/apps/mesh/src/web/components/sections-editor/fields/string-field.tsx
new file mode 100644
index 0000000000..2558a0f00e
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/fields/string-field.tsx
@@ -0,0 +1,78 @@
+import { Input } from "@deco/ui/components/input.tsx";
+import { Textarea } from "@deco/ui/components/textarea.tsx";
+import { Label } from "@deco/ui/components/label.tsx";
+import type { FieldProps } from "./field-props";
+
+export function StringField({
+  schema,
+  value,
+  onChange,
+  path,
+  label,
+}: FieldProps) {
+  const strValue = typeof value === "string" ? value : "";
+  const format = schema.format;
+
+  if (
+    format === "textarea" ||
+    format === "rich-text" ||
+    format === "rich-text-inline" ||
+    format === "markdown"
+  ) {
+    return (
+      <div className="space-y-1.5">
+        <Label htmlFor={path}>{label}</Label>
+        {schema.description && (
+          <p className="text-xs text-muted-foreground">{schema.description}</p>
+        )}
+        <Textarea
+          id={path}
+          value={strValue}
+          onChange={(e) => onChange(e.target.value)}
+          rows={4}
+        />
+      </div>
+    );
+  }
+
+  if (format === "color-input") {
+    return (
+      <div className="space-y-1.5">
+        <Label htmlFor={path}>{label}</Label>
+        <div className="flex gap-2 items-center">
+          <input
+            type="color"
+            value={strValue || "#000000"}
+            onChange={(e) => onChange(e.target.value)}
+            className="h-8 w-8 rounded border cursor-pointer"
+          />
+          <Input
+            id={path}
+            value={strValue}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder="#000000"
+            className="flex-1"
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1.5">
+      <Label htmlFor={path}>{label}</Label>
+      {schema.description && (
+        <p className="text-xs text-muted-foreground">{schema.description}</p>
+      )}
+      <Input
+        id={path}
+        type={format === "url" ? "url" : "text"}
+        value={strValue}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={
+          schema.default != null ? String(schema.default) : undefined
+        }
+      />
+    </div>
+  );
+}
diff --git a/apps/mesh/src/web/components/sections-editor/matcher-picker.tsx b/apps/mesh/src/web/components/sections-editor/matcher-picker.tsx
new file mode 100644
index 0000000000..9c60f53d4a
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/matcher-picker.tsx
@@ -0,0 +1,125 @@
+import { useState } from "react";
+import { ChevronDown } from "@untitledui/icons";
+import { cn } from "@deco/ui/lib/utils.js";
+import {
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandGroup,
+  CommandItem,
+  CommandEmpty,
+} from "@deco/ui/components/command.tsx";
+import type { LiveMeta } from "./resolve-schema";
+
+export interface MatcherEntry {
+  resolveType: string;
+  title: string;
+  description?: string;
+}
+
+/**
+ * Extract the list of available matcher block types from live meta.
+ * Looks for block-type keys that contain "matchers" (e.g. "matchers",
+ * "website/matchers") and collects each entry's resolveType + title.
+ */
+export function extractMatchers(meta: LiveMeta): MatcherEntry[] {
+  const blocks = meta.manifest?.blocks ?? {};
+  const result: MatcherEntry[] = [];
+  for (const [blockType, blockMap] of Object.entries(blocks)) {
+    if (!blockType.includes("matchers")) continue;
+    for (const resolveType of Object.keys(blockMap)) {
+      // Skip "always" — it's hardcoded as the first option in the picker
+      if (resolveType.includes("always")) continue;
+      const segments = resolveType.split("/");
+      const filename = segments[segments.length - 1] ?? resolveType;
+      const title = filename
+        .replace(/\.(tsx?|jsx?)$/, "")
+        .replace(/[-_]/g, " ")
+        .replace(/\b\w/g, (c) => c.toUpperCase());
+      result.push({ resolveType, title });
+    }
+  }
+  return result;
+}
+
+/**
+ * A button + CommandDialog that lets users pick a matcher type for a variant rule.
+ */
+export function MatcherPicker({
+  currentRt,
+  currentLabel,
+  matchers,
+  onSelect,
+}: {
+  currentRt: string;
+  currentLabel: string;
+  matchers: MatcherEntry[];
+  onSelect: (resolveType: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const handleSelect = (rt: string) => {
+    onSelect(rt);
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className="flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 text-left text-sm shadow-xs transition-colors hover:bg-accent/40"
+      >
+        <span className="flex-1 truncate">{currentLabel}</span>
+        <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+      </button>
+
+      <CommandDialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Choose a rule"
+        description="Pick how to target users for this variant"
+        className="sm:max-w-lg"
+      >
+        <CommandInput placeholder="Search rules..." />
+        <CommandList>
+          <CommandEmpty>No rules found.</CommandEmpty>
+          <CommandGroup>
+            <CommandItem
+              value="always Target all users"
+              onSelect={() => handleSelect("")}
+              className={cn("gap-2.5", !currentRt && "bg-accent/60")}
+            >
+              <div className="flex min-w-0 flex-1 flex-col">
+                <span className="text-sm">Always</span>
+                <span className="text-xs text-muted-foreground">
+                  Target all users
+                </span>
+              </div>
+            </CommandItem>
+            {matchers.map((m) => (
+              <CommandItem
+                key={m.resolveType}
+                value={`${m.title} ${m.resolveType} ${m.description ?? ""}`}
+                onSelect={() => handleSelect(m.resolveType)}
+                className={cn(
+                  "gap-2.5",
+                  currentRt === m.resolveType && "bg-accent/60",
+                )}
+              >
+                <div className="flex min-w-0 flex-1 flex-col">
+                  <span className="text-sm">{m.title}</span>
+                  {m.description && (
+                    <span className="truncate text-xs text-muted-foreground">
+                      {m.description}
+                    </span>
+                  )}
+                </div>
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </CommandList>
+      </CommandDialog>
+    </>
+  );
+}
diff --git a/apps/mesh/src/web/components/sections-editor/page-list.tsx b/apps/mesh/src/web/components/sections-editor/page-list.tsx
new file mode 100644
index 0000000000..45b061f235
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/page-list.tsx
@@ -0,0 +1,52 @@
+interface PageEntry {
+  key: string;
+  name: string;
+  path: string;
+}
+
+function parsePageName(key: string): string {
+  // "pages-home-c4bcbfb771e9" -> "home"
+  // "pages-Category%20Page-69217" -> "Category Page"
+  let name = key;
+  if (name.startsWith("pages-")) name = name.slice(6);
+  // Remove trailing hash suffix (last segment after last -)
+  const lastDash = name.lastIndexOf("-");
+  if (lastDash > 0) {
+    const suffix = name.slice(lastDash + 1);
+    // Only strip if suffix looks like a hash (hex or short number)
+    if (/^[a-f0-9]+$/i.test(suffix) && suffix.length >= 8) {
+      name = name.slice(0, lastDash);
+    }
+  }
+  try {
+    return decodeURIComponent(name);
+  } catch {
+    return name;
+  }
+}
+
+const PAGE_RESOLVE_TYPES = new Set([
+  "website/pages/Page.tsx",
+  "$live/pages/LivePage.tsx",
+]);
+
+export function extractPages(decofile: Record<string, unknown>): PageEntry[] {
+  const pages: PageEntry[] = [];
+  for (const [key, val] of Object.entries(decofile)) {
+    if (val && typeof val === "object" && !Array.isArray(val)) {
+      const obj = val as Record<string, unknown>;
+      if (
+        typeof obj.__resolveType === "string" &&
+        PAGE_RESOLVE_TYPES.has(obj.__resolveType) &&
+        typeof obj.path === "string"
+      ) {
+        pages.push({
+          key,
+          name: typeof obj.name === "string" ? obj.name : parsePageName(key),
+          path: obj.path,
+        });
+      }
+    }
+  }
+  return pages;
+}
diff --git a/apps/mesh/src/web/components/sections-editor/resolve-schema.ts b/apps/mesh/src/web/components/sections-editor/resolve-schema.ts
new file mode 100644
index 0000000000..f781fea770
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/resolve-schema.ts
@@ -0,0 +1,371 @@
+/**
+ * Schema resolution for /live/_meta JSON Schemas.
+ *
+ * Mirrors the admin-mcp `buildProperty` / `collectProps` pattern:
+ * resolves $ref, merges allOf/anyOf/oneOf, detects enum-from-const
+ * patterns, and identifies block-ref (loader selector) fields.
+ */
+
+export interface SchemaProperty {
+  type: string;
+  title?: string;
+  description?: string;
+  format?: string;
+  enum?: unknown[];
+  default?: unknown;
+  properties?: Record<string, SchemaProperty>;
+  items?: SchemaProperty;
+  titleBy?: string;
+  /**
+   * Present on "block-ref" fields — a union of compatible block types
+   * (loaders, sections, etc.). The UI renders a selector instead of
+   * a flat form.
+   */
+  anyOfRefs?: Array<{
+    resolveType: string;
+    title: string;
+    description?: string;
+  }>;
+}
+
+export interface LiveMeta {
+  manifest: {
+    blocks: Record<
+      string,
+      Record<string, { $ref?: string; namespace?: string }>
+    >;
+  };
+  schema: Record<string, unknown>;
+}
+
+type RawSchema = Record<string, unknown>;
+
+/**
+ * Resolve the schema for a given __resolveType by searching across ALL
+ * block types in the manifest (sections, loaders, matchers, etc.).
+ */
+export function resolveSchema(
+  resolveType: string,
+  meta: LiveMeta,
+): SchemaProperty | null {
+  const globalSchema = meta.schema ?? {};
+  const allBlockTypes = meta.manifest?.blocks ?? {};
+
+  // Find the per-block schema for this resolveType across all block types
+  let blockSchema: RawSchema = {};
+  for (const blockTypeMap of Object.values(allBlockTypes)) {
+    if (blockTypeMap[resolveType]) {
+      blockSchema = blockTypeMap[resolveType] as RawSchema;
+      break;
+    }
+  }
+
+  // Merge exactly as admin-mcp does: { ...schema, ...blockSchema }
+  const merged: RawSchema = { ...globalSchema, ...blockSchema };
+  const defs = (merged.$defs ?? merged.definitions ?? {}) as Record<
+    string,
+    unknown
+  >;
+
+  const resolveRef = (ref: string): RawSchema => {
+    const key = ref.split("/").pop() ?? "";
+    return (defs[key] as RawSchema | undefined) ?? {};
+  };
+
+  /**
+   * Recursively follow $ref / allOf / anyOf / oneOf and merge all
+   * `properties` objects found. seenRefs guards against cycles.
+   */
+  const collectProps = (
+    s: RawSchema,
+    seenRefs: Set<string> = new Set(),
+    depth = 0,
+  ): RawSchema => {
+    if (depth > 5) return {};
+
+    if (typeof s.$ref === "string") {
+      const key = s.$ref.split("/").pop() ?? "";
+      if (seenRefs.has(key)) return {};
+      return collectProps(
+        resolveRef(s.$ref),
+        new Set([...seenRefs, key]),
+        depth + 1,
+      );
+    }
+
+    let props: RawSchema = {};
+
+    if (s.properties && typeof s.properties === "object") {
+      props = { ...props, ...(s.properties as RawSchema) };
+    }
+
+    // Merge required arrays from allOf/anyOf/oneOf members
+    if (Array.isArray(s.required)) {
+      const existing = Array.isArray(props.__required)
+        ? (props.__required as string[])
+        : [];
+      props.__required = [...existing, ...(s.required as string[])];
+    }
+
+    for (const k of ["allOf", "anyOf", "oneOf"] as const) {
+      const arr = (s as Record<string, unknown>)[k];
+      if (!Array.isArray(arr)) continue;
+      for (const part of arr as RawSchema[]) {
+        props = { ...props, ...collectProps(part, seenRefs, depth + 1) };
+      }
+    }
+
+    return props;
+  };
+
+  /**
+   * Converts a raw schema entry into a typed SchemaProperty, resolving
+   * nested properties for object types (up to depth 3).
+   */
+  const buildProperty = (v: RawSchema, depth = 0): SchemaProperty => {
+    let resolved = v;
+    if (typeof v.$ref === "string") {
+      resolved = resolveRef(v.$ref);
+    }
+
+    // Extract enum values from anyOf/oneOf const/enum branches
+    let enumFromConsts: unknown[] | undefined;
+    {
+      const unionArr = (resolved.anyOf ?? resolved.oneOf) as
+        | RawSchema[]
+        | undefined;
+      if (Array.isArray(unionArr)) {
+        const nonNullUnion = unionArr.filter(
+          (a) => !(a.type === "null" || a.type === null),
+        );
+        const getScalar = (a: RawSchema): unknown => {
+          if (typeof a.const === "string" || typeof a.const === "number")
+            return a.const;
+          if (
+            Array.isArray(a.enum) &&
+            a.enum.length === 1 &&
+            (typeof a.enum[0] === "string" || typeof a.enum[0] === "number")
+          )
+            return a.enum[0];
+          return undefined;
+        };
+        if (
+          nonNullUnion.length > 0 &&
+          nonNullUnion.every((a) => getScalar(a) !== undefined)
+        ) {
+          enumFromConsts = nonNullUnion.map((a) => getScalar(a));
+        }
+      }
+    }
+
+    // Determine type
+    let type: string | undefined;
+    if (resolved.type) {
+      type = Array.isArray(resolved.type)
+        ? String(resolved.type.find((t) => t !== "null") ?? resolved.type[0])
+        : String(resolved.type);
+    } else if (typeof v.$ref === "string") {
+      type = "object";
+    } else if (resolved.anyOf || resolved.allOf || resolved.oneOf) {
+      const arr = (resolved.anyOf ??
+        resolved.allOf ??
+        resolved.oneOf) as RawSchema[];
+      const nonNull = arr.filter(
+        (a) => !(a.type === "null" || a.type === null),
+      );
+
+      if (nonNull.length === 0) {
+        type = "null";
+      } else if (nonNull.length === 1) {
+        const first = nonNull[0]!;
+        type = first.type
+          ? Array.isArray(first.type)
+            ? String(first.type[0])
+            : String(first.type)
+          : typeof first.$ref === "string"
+            ? "object"
+            : "string";
+      } else {
+        // const-only branches: TypeScript string/number enum
+        if (enumFromConsts) {
+          return {
+            type: "string",
+            title:
+              typeof resolved.title === "string" ? resolved.title : undefined,
+            description:
+              typeof resolved.description === "string"
+                ? resolved.description
+                : undefined,
+            enum: enumFromConsts,
+          };
+        }
+
+        // deco.cx inline loader branches
+        const loaderBranches = nonNull.filter((a) => {
+          const rtEnum = (
+            (a.properties as RawSchema | undefined)?.__resolveType as
+              | RawSchema
+              | undefined
+          )?.enum;
+          return Array.isArray(rtEnum) && typeof rtEnum[0] === "string";
+        });
+        if (loaderBranches.length > 0) {
+          const anyOfRefs = loaderBranches.map((branch) => {
+            const rtSchema = (branch.properties as RawSchema | undefined)
+              ?.__resolveType as RawSchema | undefined;
+            const rtEnum = (rtSchema?.enum ?? []) as unknown[];
+            const rt = String(rtEnum[0]);
+            return {
+              resolveType: rt,
+              title:
+                typeof branch.title === "string"
+                  ? branch.title
+                  : (rt
+                      .split("/")
+                      .pop()
+                      ?.replace(/\.tsx?$/, "")
+                      .replace(/[-_]/g, " ") ?? rt),
+              description:
+                typeof branch.description === "string"
+                  ? branch.description
+                  : undefined,
+            };
+          });
+          return {
+            type: "block-ref",
+            title:
+              typeof resolved.title === "string" ? resolved.title : undefined,
+            description:
+              typeof resolved.description === "string"
+                ? resolved.description
+                : undefined,
+            anyOfRefs,
+          };
+        }
+
+        // All branches are $refs to block/loader defs
+        const allRefs = nonNull.every((a) => typeof a.$ref === "string");
+        if (allRefs) {
+          const anyOfRefs: Array<{
+            resolveType: string;
+            title: string;
+            description?: string;
+          }> = [];
+          for (const branch of nonNull) {
+            const def = resolveRef(branch.$ref as string);
+            let rt: string | undefined;
+            if (Array.isArray(def.allOf)) {
+              for (const part of def.allOf as RawSchema[]) {
+                const props = (part.properties ?? {}) as RawSchema;
+                const rtProp = (props.__resolveType ?? {}) as RawSchema;
+                const e = rtProp.enum;
+                if (Array.isArray(e) && typeof e[0] === "string") {
+                  rt = e[0];
+                  break;
+                }
+              }
+            }
+            if (!rt) {
+              rt = (branch.$ref as string).split("/").pop() ?? "";
+            }
+            anyOfRefs.push({
+              resolveType: rt,
+              title:
+                typeof def.title === "string"
+                  ? def.title
+                  : (rt
+                      .split("/")
+                      .pop()
+                      ?.replace(/\.tsx?$/, "")
+                      .replace(/[-_]/g, " ") ?? rt),
+              description:
+                typeof def.description === "string"
+                  ? def.description
+                  : undefined,
+            });
+          }
+          return {
+            type: "block-ref",
+            title:
+              typeof resolved.title === "string" ? resolved.title : undefined,
+            description:
+              typeof resolved.description === "string"
+                ? resolved.description
+                : undefined,
+            anyOfRefs,
+          };
+        }
+
+        type = "object";
+      }
+    }
+
+    // Nested properties for object types (depth < 3)
+    let nestedProperties: Record<string, SchemaProperty> | undefined;
+    if (depth < 3) {
+      const nestedRaw = collectProps(resolved);
+      const nestedEntries = Object.entries(nestedRaw).filter(
+        ([k]) => !k.startsWith("__") && k !== "@type",
+      );
+      if (nestedEntries.length > 0) {
+        nestedProperties = {};
+        for (const [k, raw] of nestedEntries) {
+          nestedProperties[k] = buildProperty(raw as RawSchema, depth + 1);
+        }
+      }
+    }
+
+    // Array items
+    let itemsSchema: SchemaProperty | undefined;
+    if ((type === "array" || resolved.type === "array") && depth < 3) {
+      let rawItems = resolved.items as RawSchema | undefined;
+      if (rawItems) {
+        if (typeof rawItems.$ref === "string") {
+          rawItems = resolveRef(rawItems.$ref);
+        }
+        itemsSchema = buildProperty(rawItems, depth + 1);
+      }
+    }
+
+    return {
+      type: type ?? "string",
+      title:
+        typeof v.title === "string"
+          ? v.title
+          : typeof resolved.title === "string"
+            ? resolved.title
+            : undefined,
+      description:
+        typeof v.description === "string"
+          ? v.description
+          : typeof resolved.description === "string"
+            ? resolved.description
+            : undefined,
+      default: v.default ?? resolved.default,
+      enum: Array.isArray(resolved.enum)
+        ? resolved.enum
+        : (enumFromConsts ?? undefined),
+      format: typeof resolved.format === "string" ? resolved.format : undefined,
+      properties: nestedProperties,
+      items: itemsSchema,
+      titleBy:
+        typeof resolved.titleBy === "string" ? resolved.titleBy : undefined,
+    };
+  };
+
+  // Collect top-level properties and build typed map
+  const topRaw = collectProps(merged);
+  const properties: Record<string, SchemaProperty> = {};
+  for (const [key, raw] of Object.entries(topRaw)) {
+    if (key.startsWith("__") || key === "@type") continue;
+    properties[key] = buildProperty(raw as RawSchema, 0);
+  }
+
+  if (Object.keys(properties).length === 0) return null;
+
+  return {
+    type: "object",
+    title: typeof merged.title === "string" ? merged.title : undefined,
+    properties,
+  };
+}
diff --git a/apps/mesh/src/web/components/sections-editor/schema-form.tsx b/apps/mesh/src/web/components/sections-editor/schema-form.tsx
new file mode 100644
index 0000000000..b291ebd67f
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/schema-form.tsx
@@ -0,0 +1,184 @@
+import type { SchemaProperty } from "./resolve-schema";
+import type { FieldProps } from "./fields/field-props";
+import { StringField } from "./fields/string-field";
+import { NumberField } from "./fields/number-field";
+import { BooleanField } from "./fields/boolean-field";
+import { EnumField } from "./fields/enum-field";
+import { ArrayField } from "./fields/array-field";
+import { ObjectField } from "./fields/object-field";
+import { AnyOfField } from "./fields/any-of-field";
+import { ImageField } from "./fields/image-field";
+
+/** Skip internal deco properties that shouldn't be user-editable. */
+const HIDDEN_PROPS = new Set(["__resolveType", "@type"]);
+
+const IMAGE_FORMATS = new Set(["image-uri", "file-uri"]);
+
+function humanize(key: string): string {
+  return key
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .replace(/[_-]/g, " ")
+    .replace(/^\w/, (c) => c.toUpperCase());
+}
+
+function defaultForType(
+  type: string | undefined,
+  defaultVal: unknown,
+): unknown {
+  if (defaultVal !== undefined) return defaultVal;
+  switch (type) {
+    case "string":
+      return "";
+    case "number":
+    case "integer":
+      return 0;
+    case "boolean":
+      return false;
+    case "array":
+      return [];
+    case "object":
+      return {};
+    default:
+      return null;
+  }
+}
+
+export function renderField(props: FieldProps) {
+  const { schema, value } = props;
+
+  // Block-ref field (loader/section selector with anyOfRefs)
+  if (
+    schema.type === "block-ref" ||
+    (value !== null &&
+      typeof value === "object" &&
+      !Array.isArray(value) &&
+      typeof (value as Record<string, unknown>).__resolveType === "string" &&
+      schema.anyOfRefs)
+  ) {
+    // For now render as object if we have properties, otherwise skip
+    if (schema.anyOfRefs) {
+      return <AnyOfField key={props.path} {...props} />;
+    }
+    return null;
+  }
+
+  // Image formats
+  if (schema.format && IMAGE_FORMATS.has(schema.format)) {
+    return <ImageField key={props.path} {...props} />;
+  }
+
+  // Enum (including extracted const enums)
+  if (schema.enum && schema.enum.length > 0) {
+    return <EnumField key={props.path} {...props} />;
+  }
+
+  // anyOf without anyOfRefs (legacy path)
+  if (schema.type === "anyOf") {
+    return <AnyOfField key={props.path} {...props} />;
+  }
+
+  // If value is null/undefined, try to produce a typed default from schema
+  const effectiveValue =
+    value === null || value === undefined
+      ? defaultForType(schema.type, schema.default)
+      : value;
+
+  if (effectiveValue === null || effectiveValue === undefined) return null;
+
+  const effectiveProps = { ...props, value: effectiveValue };
+
+  // Determine render type
+  const renderType: string =
+    value === null || value === undefined
+      ? (schema.type ?? typeof effectiveValue)
+      : Array.isArray(effectiveValue)
+        ? "array"
+        : typeof effectiveValue;
+
+  if (renderType === "array" || Array.isArray(effectiveValue)) {
+    return <ArrayField key={props.path} {...effectiveProps} />;
+  }
+
+  switch (renderType) {
+    case "boolean":
+      return <BooleanField key={props.path} {...effectiveProps} />;
+    case "number":
+    case "integer":
+      return <NumberField key={props.path} {...effectiveProps} />;
+    case "string": {
+      // Format-based widgets
+      const fmt = schema.format;
+      if (fmt === "color-input") {
+        return <StringField key={props.path} {...effectiveProps} />;
+      }
+      if (fmt === "textarea" || fmt === "rich-text" || fmt === "html") {
+        return <StringField key={props.path} {...effectiveProps} />;
+      }
+      return <StringField key={props.path} {...effectiveProps} />;
+    }
+    case "object":
+      if (
+        effectiveValue !== null &&
+        typeof effectiveValue === "object" &&
+        !Array.isArray(effectiveValue)
+      ) {
+        return <ObjectField key={props.path} {...effectiveProps} />;
+      }
+      return null;
+    default:
+      return <StringField key={props.path} {...effectiveProps} />;
+  }
+}
+
+export function SchemaForm({
+  schema,
+  value,
+  onChange,
+  basePath,
+}: {
+  schema: SchemaProperty;
+  value: unknown;
+  onChange: (value: unknown) => void;
+  basePath: string;
+}) {
+  const properties = schema.properties;
+  if (!properties) return null;
+
+  const objValue =
+    value != null && typeof value === "object" && !Array.isArray(value)
+      ? (value as Record<string, unknown>)
+      : {};
+
+  const keys = Object.keys(properties).filter((k) => !HIDDEN_PROPS.has(k));
+
+  if (keys.length === 0) {
+    return (
+      <div className="px-3 py-6 text-center text-xs text-muted-foreground">
+        No editable fields on this section.
+      </div>
+    );
+  }
+
+  const updateField = (key: string, fieldValue: unknown) => {
+    onChange({ ...objValue, [key]: fieldValue });
+  };
+
+  return (
+    <div className="space-y-4">
+      {keys.map((key) => {
+        const propSchema = properties[key];
+        if (!propSchema) return null;
+        const fieldPath = basePath ? `${basePath}.${key}` : key;
+        const label = propSchema.title ?? humanize(key);
+
+        return renderField({
+          schema: propSchema,
+          value: objValue[key],
+          onChange: (val) => updateField(key, val),
+          path: fieldPath,
+          label,
+        });
+      })}
+    </div>
+  );
+}
diff --git a/apps/mesh/src/web/components/sections-editor/section-list.tsx b/apps/mesh/src/web/components/sections-editor/section-list.tsx
new file mode 100644
index 0000000000..1d34c7fe7b
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/section-list.tsx
@@ -0,0 +1,363 @@
+import { cn } from "@deco/ui/lib/utils.js";
+import { DotsGrid, Eye, EyeOff, LayoutAlt01, Zap } from "@untitledui/icons";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@deco/ui/components/tooltip.tsx";
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  KeyboardSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+// ─── types ─────────────────────────────────────────────────────────────────────
+
+export interface ParsedSection {
+  index: number;
+  resolveType: string;
+  label: string;
+  isLazy?: boolean;
+  isHidden?: boolean;
+  isSavedBlock?: boolean;
+  isMultivariate?: boolean;
+}
+
+interface RawSection {
+  __resolveType: string;
+  section?: { __resolveType?: string };
+  variants?: Array<{
+    value?: Record<string, unknown>;
+    rule?: Record<string, unknown>;
+  }>;
+  [key: string]: unknown;
+}
+
+// ─── parsing helpers ───────────────────────────────────────────────────────────
+
+const LAZY_SUFFIXES = [
+  "website/sections/Rendering/Lazy.tsx",
+  "website/sections/Rendering/SingleDeferred.tsx",
+];
+
+export function isLazyResolveType(rt: string): boolean {
+  return LAZY_SUFFIXES.some((suffix) => rt.endsWith(suffix));
+}
+
+function labelFromResolveType(rt: string): string {
+  const parts = rt.split("/");
+  const filename = parts[parts.length - 1] ?? rt;
+  return filename.replace(/\.(tsx|ts|jsx|js)$/, "") || rt;
+}
+
+/**
+ * Parse raw decofile sections into display-ready entries with
+ * isLazy / isHidden / isSavedBlock / isMultivariate flags.
+ * Mirrors admin-mcp's `parseSectionsFromArray()`.
+ */
+export function parseSections(
+  rawSections: RawSection[],
+  decofile: Record<string, unknown>,
+): ParsedSection[] {
+  return rawSections.map((s, idx) => {
+    const rt = s.__resolveType ?? "";
+    const isLazy = isLazyResolveType(rt);
+
+    // ── Saved block (named block ref — no "/" in resolveType) ────────
+    if (!isLazy && rt !== "" && !rt.includes("/") && rt in decofile) {
+      const resolvedBlock = decofile[rt] as Record<string, unknown> | undefined;
+      const label =
+        (typeof resolvedBlock?.name === "string" && resolvedBlock.name) ||
+        rt.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()) ||
+        `Section ${idx + 1}`;
+      return {
+        index: idx,
+        resolveType: rt,
+        label,
+        isLazy: false,
+        isSavedBlock: true,
+      };
+    }
+
+    // ── Multivariate detection ──────────────────────────────────────
+    const innerSection = isLazy
+      ? (s.section as RawSection | undefined)
+      : undefined;
+    const mvRt = isLazy ? (innerSection?.__resolveType ?? "") : rt;
+
+    if (mvRt.includes("flags/multivariate")) {
+      const mvObj = (isLazy ? innerSection : s) as RawSection;
+      const rawVariants = Array.isArray(mvObj?.variants) ? mvObj.variants : [];
+
+      // ── Hidden: single variant with "never" matcher ───────────────
+      const NEVER_TYPES = ["website/matchers/never.ts"];
+      if (
+        rawVariants.length === 1 &&
+        NEVER_TYPES.includes(
+          (rawVariants[0]?.rule?.__resolveType as string) ?? "",
+        )
+      ) {
+        const innerValue = (rawVariants[0]?.value ?? {}) as Record<
+          string,
+          unknown
+        >;
+        let innerRt = (innerValue.__resolveType as string) ?? "";
+        const innerIsLazy = isLazyResolveType(innerRt);
+        if (innerIsLazy) {
+          const nested = innerValue.section as
+            | Record<string, unknown>
+            | undefined;
+          innerRt = (nested?.__resolveType as string) ?? innerRt;
+        }
+        return {
+          index: idx,
+          resolveType: rt,
+          label: labelFromResolveType(innerRt) || `Section ${idx + 1}`,
+          isHidden: true,
+          isLazy: innerIsLazy,
+        };
+      }
+
+      // Regular multivariate
+      const firstValueRt = (
+        rawVariants[0]?.value as Record<string, unknown> | undefined
+      )?.__resolveType as string | undefined;
+      const sectionLabel = firstValueRt
+        ? labelFromResolveType(firstValueRt)
+        : "Section";
+      return {
+        index: idx,
+        resolveType: rt,
+        label: `Variants of ${sectionLabel}`,
+        isMultivariate: true,
+        isLazy,
+      };
+    }
+
+    // ── Lazy-wrapped saved block (e.g. Lazy → Header) ──────────────
+    const effectiveRt = isLazy ? (s.section?.__resolveType ?? rt) : rt;
+    if (
+      isLazy &&
+      effectiveRt !== "" &&
+      !effectiveRt.includes("/") &&
+      effectiveRt in decofile
+    ) {
+      const resolvedBlock = decofile[effectiveRt] as
+        | Record<string, unknown>
+        | undefined;
+      const label =
+        (typeof resolvedBlock?.name === "string" && resolvedBlock.name) ||
+        effectiveRt
+          .replace(/[-_]/g, " ")
+          .replace(/\b\w/g, (c) => c.toUpperCase()) ||
+        `Section ${idx + 1}`;
+      return {
+        index: idx,
+        resolveType: rt,
+        label,
+        isLazy: true,
+        isSavedBlock: true,
+      };
+    }
+
+    // ── Normal section (possibly lazy-wrapped) ──────────────────────
+    return {
+      index: idx,
+      resolveType: rt,
+      label: labelFromResolveType(effectiveRt) || `Section ${idx + 1}`,
+      isLazy,
+    };
+  });
+}
+
+// ─── sortable item ──────────────────────────────────────────────────────────────
+
+function SortableSectionItem({
+  section,
+  selected,
+  onSelect,
+}: {
+  section: ParsedSection;
+  selected: boolean;
+  onSelect: () => void;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: String(section.index) });
+
+  const style = {
+    transform: CSS.Transform.toString(
+      transform ? { ...transform, x: 0 } : null,
+    ),
+    transition,
+    opacity: isDragging ? 0.5 : undefined,
+    zIndex: isDragging ? 100 : undefined,
+  };
+
+  const saved = section.isSavedBlock === true;
+  const multivariate = section.isMultivariate === true;
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      onClick={onSelect}
+      className={cn(
+        "group flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-2.5 transition-colors active:cursor-grabbing",
+        selected
+          ? "bg-accent text-accent-foreground"
+          : saved
+            ? "text-[oklch(0.45_0.15_289)] hover:bg-[oklch(0.7278_0.151_289/0.12)] dark:text-[oklch(0.78_0.15_289)] dark:hover:bg-[oklch(0.7278_0.151_289/0.15)]"
+            : multivariate
+              ? "text-[oklch(0.45_0.15_160)] hover:bg-[oklch(0.65_0.15_160/0.12)] dark:text-[oklch(0.78_0.15_160)] dark:hover:bg-[oklch(0.65_0.15_160/0.15)]"
+              : "text-foreground/80 hover:bg-accent hover:text-accent-foreground",
+      )}
+      {...attributes}
+      {...listeners}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        listeners?.onKeyDown?.(e);
+        if (e.key === "Enter" || e.key === " ") onSelect();
+      }}
+    >
+      <DotsGrid className="h-4 w-4 shrink-0 text-muted-foreground/40" />
+
+      <LayoutAlt01
+        className="h-4 w-4 shrink-0"
+        style={
+          saved
+            ? { color: "oklch(0.7278 0.151 289)" }
+            : multivariate
+              ? { color: "oklch(0.65 0.15 160)" }
+              : undefined
+        }
+      />
+      <span
+        className={cn(
+          "flex-1 truncate text-sm font-medium",
+          section.isHidden && "line-through opacity-50",
+        )}
+      >
+        {section.label}
+      </span>
+
+      {/* Hidden toggle */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            className={cn(
+              "shrink-0 rounded p-1 transition-colors",
+              section.isHidden
+                ? "text-muted-foreground"
+                : "text-muted-foreground/60 opacity-0 group-hover:opacity-100",
+            )}
+          >
+            {section.isHidden ? (
+              <EyeOff className="h-3.5 w-3.5" />
+            ) : (
+              <Eye className="h-3.5 w-3.5" />
+            )}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="top">
+          {section.isHidden ? "Hidden section" : "Visible"}
+        </TooltipContent>
+      </Tooltip>
+
+      {/* Lazy indicator */}
+      {section.isLazy && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="shrink-0 rounded p-1 text-yellow-500">
+              <Zap className="h-3.5 w-3.5" />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent side="top">Lazy loaded</TooltipContent>
+        </Tooltip>
+      )}
+    </div>
+  );
+}
+
+// ─── component ─────────────────────────────────────────────────────────────────
+
+export function SectionList({
+  sections,
+  selectedIndex,
+  onSelect,
+  onReorder,
+}: {
+  sections: ParsedSection[];
+  selectedIndex: number | null;
+  onSelect: (index: number) => void;
+  onReorder?: (fromIndex: number, toIndex: number) => void;
+}) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const sortableIds = sections.map((s) => String(s.index));
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+
+    const oldIndex = sortableIds.indexOf(String(active.id));
+    const newIndex = sortableIds.indexOf(String(over.id));
+    if (oldIndex === -1 || newIndex === -1) return;
+
+    onReorder?.(oldIndex, newIndex);
+  };
+
+  if (sections.length === 0) {
+    return (
+      <p className="text-xs text-muted-foreground px-2 py-3">
+        No sections in this page.
+      </p>
+    );
+  }
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext
+        items={sortableIds}
+        strategy={verticalListSortingStrategy}
+      >
+        <div className="space-y-1">
+          {sections.map((section) => (
+            <SortableSectionItem
+              key={`${section.resolveType}-${section.index}`}
+              section={section}
+              selected={selectedIndex === section.index}
+              onSelect={() => onSelect(section.index)}
+            />
+          ))}
+        </div>
+      </SortableContext>
+    </DndContext>
+  );
+}
diff --git a/apps/mesh/src/web/components/sections-editor/sections-editor.tsx b/apps/mesh/src/web/components/sections-editor/sections-editor.tsx
new file mode 100644
index 0000000000..61ac3ab024
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/sections-editor.tsx
@@ -0,0 +1,856 @@
+import { useState, useRef } from "react";
+import { ArrowLeft, Loading01 } from "@untitledui/icons";
+import { ScrollArea } from "@deco/ui/components/scroll-area.tsx";
+import { cn } from "@deco/ui/lib/utils.js";
+import { toast } from "sonner";
+import { useDecofile } from "./use-decofile";
+import { useLiveMeta } from "./use-live-meta";
+import { useSaveBlock } from "./use-save-block";
+import { extractPages } from "./page-list";
+import { SectionList, parseSections, isLazyResolveType } from "./section-list";
+import { arrayMove } from "@dnd-kit/sortable";
+import type { ParsedSection } from "./section-list";
+import { SchemaForm } from "./schema-form";
+import { resolveSchema } from "./resolve-schema";
+import { MatcherPicker, extractMatchers } from "./matcher-picker";
+
+interface RawSection {
+  __resolveType: string;
+  section?: { __resolveType?: string; [key: string]: unknown };
+  variants?: Array<{
+    value?: Record<string, unknown>;
+    rule?: Record<string, unknown>;
+  }>;
+  [key: string]: unknown;
+}
+
+const AUTOSAVE_DELAY = 700;
+
+interface PageVariant {
+  label: string;
+  sections: RawSection[];
+  rule?: Record<string, unknown>;
+}
+
+const capitalize = (s: string) =>
+  s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
+
+function labelFromResolveType(rt: string): string {
+  const segments = rt.split("/");
+  const filename = segments[segments.length - 1] ?? rt;
+  return (
+    filename
+      .replace(/\.(tsx?|jsx?)$/, "")
+      .replace(/[-_]/g, " ")
+      .replace(/\b\w/g, (c) => c.toUpperCase()) || rt
+  );
+}
+
+function formatMatcher(rule: Record<string, unknown> | undefined): string {
+  if (!rule) return "Default";
+  const rt = (rule.__resolveType as string) ?? "";
+
+  const alwaysTypes = [
+    "website/matchers/always.ts",
+    "$live/matchers/MatchAlways.ts",
+  ];
+  if (alwaysTypes.includes(rt) || rt === "") return "Default";
+
+  switch (rt) {
+    case "website/matchers/never.ts":
+      return "Hidden";
+
+    case "website/matchers/device.ts":
+    case "$live/matchers/MatchDevice.ts": {
+      const {
+        mobile,
+        tablet,
+        desktop,
+        devices: devList = [],
+      } = rule as {
+        mobile?: boolean;
+        tablet?: boolean;
+        desktop?: boolean;
+        devices?: string[];
+      };
+      const devices = [...(devList as string[])];
+      if (mobile) devices.push("Mobile");
+      if (tablet) devices.push("Tablet");
+      if (desktop) devices.push("Desktop");
+      return devices.length > 0
+        ? devices.map(capitalize).join(" & ")
+        : labelFromResolveType(rt);
+    }
+
+    case "website/matchers/date.ts":
+    case "$live/matchers/MatchDate.ts": {
+      const { start, end } = rule as { start?: string; end?: string };
+      if (!start && !end) return labelFromResolveType(rt);
+      const fmt = new Intl.DateTimeFormat("en", {
+        dateStyle: "medium",
+        timeStyle: "short",
+      });
+      if (start && end) {
+        try {
+          return `${fmt.format(new Date(start))} \u2192 ${fmt.format(new Date(end))}`;
+        } catch {
+          return labelFromResolveType(rt);
+        }
+      }
+      if (start) {
+        try {
+          return `From ${fmt.format(new Date(start))}`;
+        } catch {
+          return labelFromResolveType(rt);
+        }
+      }
+      if (end) {
+        try {
+          return `Until ${fmt.format(new Date(end))}`;
+        } catch {
+          return labelFromResolveType(rt);
+        }
+      }
+      return labelFromResolveType(rt);
+    }
+
+    case "website/matchers/random.ts":
+    case "$live/matchers/MatchRandom.ts": {
+      const { traffic } = rule as { traffic?: number };
+      if (typeof traffic === "number") {
+        return `${Math.ceil(traffic * 100)}% of sessions`;
+      }
+      return labelFromResolveType(rt);
+    }
+
+    case "website/matchers/host.ts":
+    case "$live/matchers/MatchHost.ts": {
+      const { includes, match } = rule as {
+        includes?: string;
+        match?: string;
+      };
+      const parts: string[] = [];
+      if (includes) parts.push(includes);
+      if (match) parts.push(match);
+      return parts.length > 0 ? parts.join(" - ") : labelFromResolveType(rt);
+    }
+
+    case "website/matchers/pathname.ts": {
+      const caseObj = rule.case as
+        | { type?: string; pathname?: string }
+        | undefined;
+      const { type, pathname } = caseObj ?? {};
+      if (type && pathname) return `Pathname ${type} ${pathname}`;
+      return labelFromResolveType(rt);
+    }
+
+    case "website/matchers/location.ts":
+    case "$live/matchers/MatchLocation.ts": {
+      const { includeLocations, excludeLocations } = rule as {
+        includeLocations?: Array<{
+          city?: string;
+          regionCode?: string;
+          country?: string;
+        }>;
+        excludeLocations?: Array<{
+          city?: string;
+          regionCode?: string;
+          country?: string;
+        }>;
+      };
+      const fmtLoc = (loc: {
+        city?: string;
+        regionCode?: string;
+        country?: string;
+      }) => [loc.city, loc.regionCode, loc.country].filter(Boolean).join(" - ");
+      const first = includeLocations?.[0];
+      if (first) {
+        const rest = (includeLocations?.length ?? 0) - 1;
+        return `${fmtLoc(first)}${rest > 0 ? ` +${rest}` : ""}`;
+      }
+      const firstEx = excludeLocations?.[0];
+      if (firstEx) {
+        const rest = (excludeLocations?.length ?? 0) - 1;
+        return `Except ${fmtLoc(firstEx)}${rest > 0 ? ` +${rest}` : ""}`;
+      }
+      return "Any location";
+    }
+
+    case "website/matchers/multi.ts":
+    case "$live/matchers/MatchMulti.ts": {
+      const { matchers, op = "AND" } = rule as {
+        matchers?: Array<Record<string, unknown>>;
+        op?: string;
+      };
+      if (matchers && matchers.length > 0) {
+        return matchers.map(formatMatcher).join(` ${op} `);
+      }
+      return labelFromResolveType(rt);
+    }
+
+    default:
+      return labelFromResolveType(rt) || "Default";
+  }
+}
+
+/**
+ * Parse page-level `sections` into an array of variants.
+ * - Plain array → single variant labelled "Default"
+ * - Multivariate flag object → one variant per entry in `variants`
+ */
+function parsePageVariants(sections: unknown): PageVariant[] {
+  if (Array.isArray(sections)) {
+    return [{ label: "Default", sections }];
+  }
+  if (sections && typeof sections === "object") {
+    const obj = sections as Record<string, unknown>;
+    if (Array.isArray(obj.variants)) {
+      const raw = obj.variants as Array<{
+        rule?: Record<string, unknown>;
+        value?: unknown;
+      }>;
+      return raw.map((v, i) => ({
+        label: formatMatcher(v.rule) || `Variant ${i + 1}`,
+        sections: Array.isArray(v.value) ? (v.value as RawSection[]) : [],
+        rule: v.rule,
+      }));
+    }
+  }
+  return [];
+}
+
+/**
+ * Editable page name + path inputs that hold local state to prevent
+ * focus loss when the parent re-renders after decofile invalidation.
+ */
+function PageHeaderInputs({
+  pageKey,
+  initialName,
+  initialPath,
+  onFieldChange,
+}: {
+  pageKey: string;
+  initialName: string;
+  initialPath: string;
+  onFieldChange: (field: "name" | "path", value: string) => void;
+}) {
+  const [name, setName] = useState(initialName);
+  const [path, setPath] = useState(initialPath);
+  const [prevKey, setPrevKey] = useState(pageKey);
+
+  // Reset local state when navigating to a different page
+  if (prevKey !== pageKey) {
+    setPrevKey(pageKey);
+    setName(initialName);
+    setPath(initialPath);
+  }
+
+  return (
+    <div className="space-y-1">
+      <input
+        type="text"
+        value={name}
+        onChange={(e) => {
+          setName(e.target.value);
+          onFieldChange("name", e.target.value);
+        }}
+        className="w-full bg-transparent text-sm font-semibold truncate outline-none border-none p-0 focus:ring-0 placeholder:text-muted-foreground"
+        placeholder="Page name"
+      />
+      <input
+        type="text"
+        value={path}
+        onChange={(e) => {
+          setPath(e.target.value);
+          onFieldChange("path", e.target.value);
+        }}
+        className="w-full bg-transparent text-xs text-muted-foreground truncate outline-none border-none p-0 focus:ring-0 placeholder:text-muted-foreground"
+        placeholder="/path"
+      />
+    </div>
+  );
+}
+
+/**
+ * Unwrap a raw section to get the actual editable data and its resolveType.
+ * Handles lazy wrappers, hidden (multivariate+never), saved blocks, and
+ * multivariate sections — mirrors admin-mcp's handleCmsSelectSection.
+ */
+function unwrapSection(
+  raw: RawSection,
+  parsed: ParsedSection,
+  decofile: Record<string, unknown>,
+): { data: Record<string, unknown>; resolveType: string } | null {
+  // Multivariate: don't load form data (would need variant selector)
+  if (parsed.isMultivariate) {
+    return null;
+  }
+
+  // Saved block: load from decofile entry
+  // May be direct (rt = "Header") or lazy-wrapped (rt = "Lazy.tsx", section.rt = "Header")
+  if (parsed.isSavedBlock) {
+    const blockKey = parsed.isLazy
+      ? ((raw.section?.__resolveType as string) ?? raw.__resolveType)
+      : raw.__resolveType;
+    const blockData = (decofile[blockKey] as Record<string, unknown>) ?? {};
+    const rt = (blockData.__resolveType as string) ?? blockKey;
+    return { data: { ...blockData }, resolveType: rt };
+  }
+
+  // Hidden section: unwrap multivariate → variants[0].value → possibly lazy
+  if (parsed.isHidden) {
+    const isLazy = isLazyResolveType(raw.__resolveType);
+    const mvObj = isLazy ? (raw.section as RawSection | undefined) : raw;
+    const innerValue =
+      (mvObj?.variants?.[0]?.value as Record<string, unknown>) ??
+      (raw as Record<string, unknown>);
+    const innerRt = (innerValue.__resolveType as string) ?? "";
+    // Inner value might itself be lazy-wrapped
+    if (isLazyResolveType(innerRt)) {
+      const nested = (innerValue.section as Record<string, unknown>) ?? {};
+      return {
+        data: { ...nested },
+        resolveType: (nested.__resolveType as string) ?? innerRt,
+      };
+    }
+    return { data: { ...innerValue }, resolveType: innerRt };
+  }
+
+  // Lazy section: unwrap .section
+  if (parsed.isLazy) {
+    const inner =
+      (raw.section as Record<string, unknown>) ??
+      (raw as Record<string, unknown>);
+    return {
+      data: { ...inner },
+      resolveType: (inner.__resolveType as string) ?? raw.__resolveType,
+    };
+  }
+
+  // Normal section
+  return {
+    data: { ...(raw as Record<string, unknown>) },
+    resolveType: raw.__resolveType,
+  };
+}
+
+/**
+ * Side panel for editing deco.cx page sections.
+ * Renders sections for the currently active page and a schema-driven form.
+ * The active page is determined by `currentPath` (from the iframe URL).
+ * Changes auto-save after a debounce.
+ */
+export function SectionsEditor({
+  previewUrl,
+  orgSlug,
+  virtualMcpId,
+  branch,
+  currentPath,
+  onSaved,
+}: {
+  previewUrl: string;
+  orgSlug: string;
+  virtualMcpId: string;
+  branch: string;
+  currentPath: string;
+  /** Called after a successful auto-save so the parent can reload the preview. */
+  onSaved?: () => void;
+}) {
+  const { data: decofile, isLoading: decofileLoading } =
+    useDecofile(previewUrl);
+  const { data: meta, isLoading: metaLoading } = useLiveMeta(previewUrl);
+
+  const [selectedSectionIndex, setSelectedSectionIndex] = useState<
+    number | null
+  >(null);
+  const [formValue, setFormValue] = useState<Record<string, unknown> | null>(
+    null,
+  );
+  const [activeResolveType, setActiveResolveType] = useState<string | null>(
+    null,
+  );
+  const [activeVariantIndex, setActiveVariantIndex] = useState(0);
+  const [ruleFormValue, setRuleFormValue] = useState<Record<
+    string,
+    unknown
+  > | null>(null);
+  const [ruleResolveType, setRuleResolveType] = useState<string | null>(null);
+
+  // Reset form state when the active page changes
+  const [prevPath, setPrevPath] = useState(currentPath);
+  if (prevPath !== currentPath) {
+    setPrevPath(currentPath);
+    setSelectedSectionIndex(null);
+    setFormValue(null);
+    setActiveResolveType(null);
+    setActiveVariantIndex(0);
+    setRuleFormValue(null);
+    setRuleResolveType(null);
+  }
+
+  const saveBlock = useSaveBlock({ previewUrl, orgSlug, virtualMcpId, branch });
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const pageDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const ruleDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Accumulates pending page header field changes to avoid losing edits
+  const pendingPageFieldsRef = useRef<Record<string, string>>({});
+
+  // Keep a ref to the latest render-scope values so debounced callbacks
+  // always read fresh data instead of a stale closure.
+  const latestRef = useRef<{
+    rawSections: RawSection[];
+    parsedSections: ParsedSection[];
+    decofile: Record<string, unknown>;
+    activePageKey: string | null;
+    pageVariants: PageVariant[];
+    variantIndex: number;
+  }>({
+    rawSections: [],
+    parsedSections: [],
+    decofile: {},
+    activePageKey: null,
+    pageVariants: [],
+    variantIndex: 0,
+  });
+
+  if (decofileLoading || metaLoading) {
+    return (
+      <div className="h-full w-full flex items-center justify-center">
+        <Loading01 size={20} className="animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (!decofile || !meta) {
+    return (
+      <div className="h-full w-full flex items-center justify-center text-sm text-muted-foreground">
+        Could not load site data.
+      </div>
+    );
+  }
+
+  const pages = extractPages(decofile);
+  const norm = (s: string) => s.replace(/\/+$/, "") || "/";
+  const activePage = pages.find((p) => norm(p.path) === norm(currentPath));
+  const activePageKey = activePage?.key ?? null;
+
+  const pageData =
+    activePageKey && decofile[activePageKey]
+      ? (decofile[activePageKey] as Record<string, unknown>)
+      : null;
+  const pageVariants = parsePageVariants(pageData?.sections);
+  const hasMultipleVariants = pageVariants.length > 1;
+  const safeVariantIndex = Math.min(
+    activeVariantIndex,
+    pageVariants.length - 1,
+  );
+  const activeVariant = pageVariants[safeVariantIndex];
+  const rawSections: RawSection[] = activeVariant?.sections ?? [];
+  const parsedSections = parseSections(rawSections, decofile);
+
+  // Sync ref so debounced callbacks always see the latest values.
+  // oxlint-disable-next-line ban-ref-current-assignment/ban-ref-current-assignment -- ref is only read in setTimeout callbacks, not during render
+  latestRef.current = {
+    rawSections,
+    parsedSections,
+    decofile,
+    activePageKey,
+    pageVariants,
+    variantIndex: safeVariantIndex,
+  };
+
+  const activeSchema =
+    activeResolveType && meta ? resolveSchema(activeResolveType, meta) : null;
+
+  const scheduleAutoSave = (
+    nextValue: Record<string, unknown>,
+    sectionIndex: number,
+  ) => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+
+    debounceRef.current = setTimeout(() => {
+      const {
+        rawSections: latestRawSections,
+        parsedSections: latestParsedSections,
+        decofile: latestDecofile,
+        activePageKey: latestPageKey,
+        pageVariants: latestVariants,
+        variantIndex: latestVariantIndex,
+      } = latestRef.current;
+      const rawSection = latestRawSections[sectionIndex];
+      if (!rawSection) return;
+      const parsed = latestParsedSections[sectionIndex];
+      if (!parsed) return;
+
+      // Saved block: write the block entry directly
+      if (parsed.isSavedBlock) {
+        const blockKey = parsed.isLazy
+          ? ((rawSection.section?.__resolveType as string) ??
+            rawSection.__resolveType)
+          : rawSection.__resolveType;
+        saveBlock.mutate(
+          { blockKey, data: nextValue },
+          {
+            onSuccess: () => onSaved?.(),
+            onError: (err) => toast.error(`Save failed: ${err.message}`),
+          },
+        );
+        return;
+      }
+
+      // Inline section (possibly wrapped): rebuild the full wrapper structure
+      if (!latestPageKey) return;
+      const fullPageData = {
+        ...(latestDecofile[latestPageKey] as Record<string, unknown>),
+      };
+      const updatedSections = [...latestRawSections];
+
+      if (parsed.isHidden) {
+        // Re-wrap into multivariate+never structure
+        const isLazy = isLazyResolveType(rawSection.__resolveType);
+        const mvObj = isLazy
+          ? { ...(rawSection.section as Record<string, unknown>) }
+          : { ...rawSection };
+        const variants = Array.isArray(mvObj.variants)
+          ? [...(mvObj.variants as Array<Record<string, unknown>>)]
+          : [];
+        if (variants[0]) {
+          variants[0] = { ...variants[0], value: nextValue };
+        }
+        mvObj.variants = variants;
+        if (isLazy) {
+          updatedSections[sectionIndex] = {
+            ...rawSection,
+            section: mvObj,
+          } as RawSection;
+        } else {
+          updatedSections[sectionIndex] = mvObj as RawSection;
+        }
+      } else if (parsed.isLazy) {
+        // Re-wrap into lazy structure
+        updatedSections[sectionIndex] = {
+          ...rawSection,
+          section: nextValue,
+        } as RawSection;
+      } else {
+        updatedSections[sectionIndex] = nextValue as RawSection;
+      }
+
+      // Write back into the correct variant or directly
+      if (latestVariants.length > 1) {
+        // Multivariate page: update the specific variant's value
+        const currentSections = fullPageData.sections as Record<
+          string,
+          unknown
+        >;
+        const variants = [
+          ...((currentSections?.variants as Array<Record<string, unknown>>) ??
+            []),
+        ];
+        if (variants[latestVariantIndex]) {
+          variants[latestVariantIndex] = {
+            ...variants[latestVariantIndex],
+            value: updatedSections,
+          };
+        }
+        fullPageData.sections = { ...currentSections, variants };
+      } else {
+        fullPageData.sections = updatedSections;
+      }
+      saveBlock.mutate(
+        { blockKey: latestPageKey, data: fullPageData },
+        {
+          onSuccess: () => onSaved?.(),
+          onError: (err) => toast.error(`Save failed: ${err.message}`),
+        },
+      );
+    }, AUTOSAVE_DELAY);
+  };
+
+  const handleSelectSection = (index: number) => {
+    setSelectedSectionIndex(index);
+    const rawSection = rawSections[index];
+    const parsed = parsedSections[index];
+    if (!rawSection || !parsed) return;
+
+    const unwrapped = unwrapSection(rawSection, parsed, decofile);
+    if (!unwrapped) {
+      // Multivariate — no form editing for now
+      setFormValue(null);
+      setActiveResolveType(null);
+      return;
+    }
+
+    setFormValue(unwrapped.data);
+    setActiveResolveType(unwrapped.resolveType);
+  };
+
+  const handleFormChange = (val: unknown) => {
+    const next = val as Record<string, unknown>;
+    setFormValue(next);
+    if (selectedSectionIndex !== null) {
+      scheduleAutoSave(next, selectedSectionIndex);
+    }
+  };
+
+  const savePageField = (field: "name" | "path", value: string) => {
+    if (!activePageKey) return;
+    // Accumulate all pending field changes so rapid edits to name+path
+    // are merged into a single save instead of overwriting each other.
+    pendingPageFieldsRef.current[field] = value;
+    if (pageDebounceRef.current) clearTimeout(pageDebounceRef.current);
+    pageDebounceRef.current = setTimeout(() => {
+      const pending = pendingPageFieldsRef.current;
+      pendingPageFieldsRef.current = {};
+      const fullPageData = {
+        ...(decofile[activePageKey] as Record<string, unknown>),
+        ...pending,
+      };
+      // No onSaved/iframe reload — name/path don't affect the visual preview
+      saveBlock.mutate(
+        { blockKey: activePageKey, data: fullPageData },
+        {
+          onError: (err) => toast.error(`Save failed: ${err.message}`),
+        },
+      );
+    }, AUTOSAVE_DELAY);
+  };
+
+  const handleReorder = (fromIndex: number, toIndex: number) => {
+    if (!activePageKey) return;
+    const reordered = arrayMove([...rawSections], fromIndex, toIndex);
+    const fullPageData = {
+      ...(decofile[activePageKey] as Record<string, unknown>),
+    };
+    if (hasMultipleVariants) {
+      const currentSections = fullPageData.sections as Record<string, unknown>;
+      const variants = [
+        ...((currentSections?.variants as Array<Record<string, unknown>>) ??
+          []),
+      ];
+      if (variants[safeVariantIndex]) {
+        variants[safeVariantIndex] = {
+          ...variants[safeVariantIndex],
+          value: reordered,
+        };
+      }
+      fullPageData.sections = { ...currentSections, variants };
+    } else {
+      fullPageData.sections = reordered;
+    }
+    saveBlock.mutate(
+      { blockKey: activePageKey, data: fullPageData },
+      {
+        onSuccess: () => onSaved?.(),
+        onError: (err) => toast.error(`Reorder failed: ${err.message}`),
+      },
+    );
+  };
+
+  // Sync rule form state when variant changes
+  const activeRule = activeVariant?.rule;
+  const activeRuleRt = (activeRule?.__resolveType as string) ?? "";
+  // Initialize rule form state when switching variants
+  if (
+    hasMultipleVariants &&
+    selectedSectionIndex === null &&
+    ruleResolveType === null &&
+    activeRule
+  ) {
+    setRuleResolveType(activeRuleRt);
+    const { __resolveType: _, ...ruleData } = activeRule;
+    setRuleFormValue(ruleData);
+  }
+
+  const availableMatchers = meta ? extractMatchers(meta) : [];
+
+  const ruleSchema =
+    ruleResolveType && meta ? resolveSchema(ruleResolveType, meta) : null;
+
+  const scheduleRuleSave = (newRule: Record<string, unknown>) => {
+    if (ruleDebounceRef.current) clearTimeout(ruleDebounceRef.current);
+    ruleDebounceRef.current = setTimeout(() => {
+      const {
+        activePageKey: latestPageKey,
+        decofile: latestDecofile,
+        variantIndex: latestVariantIndex,
+      } = latestRef.current;
+      if (!latestPageKey) return;
+
+      const fullPageData = {
+        ...(latestDecofile[latestPageKey] as Record<string, unknown>),
+      };
+      const mv = {
+        ...(fullPageData.sections as Record<string, unknown>),
+      };
+      const variants = [
+        ...((mv.variants as Array<Record<string, unknown>>) ?? []),
+      ];
+      if (variants[latestVariantIndex]) {
+        variants[latestVariantIndex] = {
+          ...variants[latestVariantIndex],
+          rule: newRule,
+        };
+      }
+      fullPageData.sections = { ...mv, variants };
+
+      saveBlock.mutate(
+        { blockKey: latestPageKey, data: fullPageData },
+        {
+          onSuccess: () => onSaved?.(),
+          onError: (err) => toast.error(`Save failed: ${err.message}`),
+        },
+      );
+    }, AUTOSAVE_DELAY);
+  };
+
+  const handleMatcherTypeChange = (newRt: string) => {
+    setRuleResolveType(newRt);
+    const newRule: Record<string, unknown> = newRt
+      ? { __resolveType: newRt }
+      : {};
+    setRuleFormValue({});
+    scheduleRuleSave(newRule);
+  };
+
+  const handleRuleFormChange = (val: unknown) => {
+    const next = val as Record<string, unknown>;
+    setRuleFormValue(next);
+    const newRule: Record<string, unknown> = ruleResolveType
+      ? { __resolveType: ruleResolveType, ...next }
+      : { ...next };
+    scheduleRuleSave(newRule);
+  };
+
+  if (!activePage) {
+    return (
+      <div className="h-full w-full flex items-center justify-center text-sm text-muted-foreground">
+        No page found for {currentPath}
+      </div>
+    );
+  }
+
+  const selectedParsed =
+    selectedSectionIndex !== null
+      ? (parsedSections[selectedSectionIndex] ?? null)
+      : null;
+
+  const isEditing = activeSchema && formValue && selectedParsed;
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Page header */}
+      <div className="px-3 py-2.5 border-b shrink-0">
+        {isEditing ? (
+          <button
+            type="button"
+            onClick={() => {
+              setSelectedSectionIndex(null);
+              setFormValue(null);
+              setActiveResolveType(null);
+            }}
+            className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <ArrowLeft className="h-3.5 w-3.5" />
+            <span>{activePage.name}</span>
+          </button>
+        ) : (
+          <PageHeaderInputs
+            pageKey={activePageKey!}
+            initialName={activePage.name}
+            initialPath={activePage.path}
+            onFieldChange={savePageField}
+          />
+        )}
+      </div>
+
+      {/* Variant selector (when page sections are multivariate) */}
+      {hasMultipleVariants && !isEditing && (
+        <div className="flex gap-1 px-3 py-1.5 border-b shrink-0 overflow-x-auto">
+          {pageVariants.map((variant, i) => (
+            <button
+              key={i}
+              type="button"
+              onClick={() => {
+                setActiveVariantIndex(i);
+                setSelectedSectionIndex(null);
+                setFormValue(null);
+                setActiveResolveType(null);
+                const variantRule = pageVariants[i]?.rule;
+                const variantRuleRt =
+                  (variantRule?.__resolveType as string) ?? "";
+                setRuleResolveType(variantRuleRt);
+                if (variantRule) {
+                  const { __resolveType: _, ...ruleData } = variantRule;
+                  setRuleFormValue(ruleData);
+                } else {
+                  setRuleFormValue(null);
+                }
+              }}
+              className={cn(
+                "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
+                i === safeVariantIndex
+                  ? "bg-accent text-accent-foreground"
+                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
+              )}
+            >
+              {variant.label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Drill-down: section list OR section form */}
+      {isEditing ? (
+        <ScrollArea className="flex-1 min-h-0">
+          <div className="p-4">
+            <h2 className="text-sm font-semibold mb-4">
+              {selectedParsed.label}
+            </h2>
+            <SchemaForm
+              schema={activeSchema}
+              value={formValue}
+              onChange={handleFormChange}
+              basePath=""
+            />
+          </div>
+        </ScrollArea>
+      ) : (
+        <ScrollArea className="flex-1 min-h-0">
+          {/* Variant rule editor */}
+          {hasMultipleVariants && ruleResolveType !== null && (
+            <div className="px-3 py-3 border-b space-y-2">
+              <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                Rule
+              </span>
+              <MatcherPicker
+                currentRt={ruleResolveType}
+                currentLabel={formatMatcher(activeVariant?.rule)}
+                matchers={availableMatchers}
+                onSelect={handleMatcherTypeChange}
+              />
+              {ruleSchema && ruleFormValue && (
+                <div className="pt-1">
+                  <SchemaForm
+                    schema={ruleSchema}
+                    value={ruleFormValue}
+                    onChange={handleRuleFormChange}
+                    basePath=""
+                  />
+                </div>
+              )}
+            </div>
+          )}
+          <div className="p-2">
+            <SectionList
+              sections={parsedSections}
+              selectedIndex={selectedSectionIndex}
+              onSelect={handleSelectSection}
+              onReorder={handleReorder}
+            />
+          </div>
+        </ScrollArea>
+      )}
+    </div>
+  );
+}
diff --git a/apps/mesh/src/web/components/sections-editor/use-decofile.ts b/apps/mesh/src/web/components/sections-editor/use-decofile.ts
new file mode 100644
index 0000000000..e1689942bb
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/use-decofile.ts
@@ -0,0 +1,15 @@
+import { useQuery } from "@tanstack/react-query";
+import { KEYS } from "@/web/lib/query-keys";
+
+export function useDecofile(previewUrl: string | null) {
+  return useQuery({
+    queryKey: KEYS.decofile(previewUrl ?? ""),
+    queryFn: async () => {
+      const res = await fetch(`${previewUrl}/.decofile`);
+      if (!res.ok) throw new Error(`Failed to fetch decofile: ${res.status}`);
+      return (await res.json()) as Record<string, unknown>;
+    },
+    enabled: !!previewUrl,
+    staleTime: 30_000,
+  });
+}
diff --git a/apps/mesh/src/web/components/sections-editor/use-live-meta.ts b/apps/mesh/src/web/components/sections-editor/use-live-meta.ts
new file mode 100644
index 0000000000..7d30ece659
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/use-live-meta.ts
@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query";
+import { KEYS } from "@/web/lib/query-keys";
+import type { LiveMeta } from "./resolve-schema";
+
+export function useLiveMeta(previewUrl: string | null) {
+  return useQuery({
+    queryKey: KEYS.liveMeta(previewUrl ?? ""),
+    queryFn: async () => {
+      const res = await fetch(`${previewUrl}/live/_meta`);
+      if (!res.ok) throw new Error(`Failed to fetch live meta: ${res.status}`);
+      return (await res.json()) as LiveMeta;
+    },
+    enabled: !!previewUrl,
+    staleTime: 300_000,
+  });
+}
diff --git a/apps/mesh/src/web/components/sections-editor/use-save-block.ts b/apps/mesh/src/web/components/sections-editor/use-save-block.ts
new file mode 100644
index 0000000000..be0b603099
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/use-save-block.ts
@@ -0,0 +1,52 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { KEYS } from "@/web/lib/query-keys";
+
+interface UseSaveBlockParams {
+  previewUrl: string;
+  orgSlug: string;
+  virtualMcpId: string;
+  branch: string;
+}
+
+export function useSaveBlock({
+  previewUrl,
+  orgSlug,
+  virtualMcpId,
+  branch,
+}: UseSaveBlockParams) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      blockKey,
+      data,
+    }: {
+      blockKey: string;
+      data: unknown;
+    }) => {
+      const path = `.deco/blocks/${blockKey}.json`;
+      const content = JSON.stringify(data, null, 2);
+      const params = new URLSearchParams({ virtualMcpId, branch });
+      const res = await fetch(
+        `/api/${orgSlug}/vm-file/write?${params.toString()}`,
+        {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ path, content }),
+        },
+      );
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error(
+          (body as { error?: string }).error ?? `Write failed (${res.status})`,
+        );
+      }
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: KEYS.decofile(previewUrl),
+      });
+    },
+  });
+}
diff --git a/apps/mesh/src/web/components/vm/preview/preview.tsx b/apps/mesh/src/web/components/vm/preview/preview.tsx
index b428abcba3..31be894be3 100644
--- a/apps/mesh/src/web/components/vm/preview/preview.tsx
+++ b/apps/mesh/src/web/components/vm/preview/preview.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, Suspense, lazy } from "react";
 import { useInsetContext } from "@/web/layouts/agent-shell-layout";
 import { authClient } from "@/web/lib/auth-client";
 import { useChatTask } from "@/web/components/chat/context";
@@ -11,13 +11,17 @@ import {
 import {
   ArrowLeft,
   ArrowRight,
+  ChevronDown,
   CursorClick01,
   DotsHorizontal,
+  TextInput,
   LinkExternal01,
+  Loading01,
   Monitor04,
   RefreshCw01,
   Server01,
 } from "@untitledui/icons";
+import { cn } from "@deco/ui/lib/utils.js";
 import { Button } from "@deco/ui/components/button.tsx";
 import {
   ViewModeToggle,
@@ -34,6 +38,9 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@deco/ui/components/dropdown-menu.tsx";
+import { ScrollArea } from "@deco/ui/components/scroll-area.tsx";
+import { useDecofile } from "@/web/components/sections-editor/use-decofile";
+import { extractPages } from "@/web/components/sections-editor/page-list";
 import {
   VISUAL_EDITOR_SCRIPT,
   VisualEditorPayloadSchema,
@@ -60,6 +67,15 @@ import { invalidateVirtualMcpQueries } from "@/web/lib/query-keys";
 import { useQueryClient } from "@tanstack/react-query";
 import { track } from "@/web/lib/posthog-client";
 
+const SectionsEditor = lazy(() =>
+  import("@/web/components/sections-editor/sections-editor").then((m) => ({
+    default: m.SectionsEditor,
+  })),
+);
+
+/** Delay before reloading the preview iframe after a save, giving the dev server time to pick up file changes. */
+const DEV_SERVER_SETTLE_MS = 500;
+
 function drawerStatusFromPreview(
   state: PreviewState,
   vmStartPending: boolean,
@@ -101,6 +117,20 @@ export function PreviewContent() {
     useState<VisualEditorPayload | null>(null);
   const previewIframeRef = useRef<HTMLIFrameElement>(null);
 
+  // Sections editor panel
+  const [sectionsOpen, setSectionsOpen] = useState(false);
+  // Tracks the last focused element outside the iframe so we can restore it
+  // when the iframe reload steals focus.
+  const focusBeforeIframeRef = useRef<HTMLElement | null>(null);
+
+  // Pages dropdown in URL bar
+  const [pagesOpen, setPagesOpen] = useState(false);
+  const [pagesSearch, setPagesSearch] = useState("");
+  const pagesContainerRef = useRef<HTMLDivElement>(null);
+
+  // Current iframe path (for sections editor)
+  const [currentPath, setCurrentPath] = useState("/");
+
   // vmMap[userId][branch] -> { vmId, previewUrl, runnerKind? }
   const userId = session?.user?.id;
   const metadata = inset?.entity?.metadata;
@@ -108,6 +138,12 @@ export function PreviewContent() {
     userId && branch ? metadata?.vmMap?.[userId]?.[branch] : undefined;
   const previewUrl = vmEntry?.previewUrl ?? null;
 
+  // Decofile pages for the URL bar dropdown
+  const { data: decofile } = useDecofile(previewUrl);
+  const pages = decofile
+    ? extractPages(decofile).sort((a, b) => a.name.localeCompare(b.name))
+    : [];
+
   // "reload" fires on config edits framework HMR won't catch (.ts/.tsx use HMR).
   const vmEvents = useVmEvents();
   useVmReloadHandler(() => {
@@ -354,6 +390,59 @@ export function PreviewContent() {
     return () => window.removeEventListener("message", handler);
   }, [previewUrl]);
 
+  // Close pages dropdown on outside click
+  // oxlint-disable-next-line ban-use-effect/ban-use-effect — DOM event subscription for outside-click dismiss
+  useEffect(() => {
+    if (!pagesOpen) return;
+    const handler = (e: PointerEvent) => {
+      if (!pagesContainerRef.current?.contains(e.target as Node)) {
+        setPagesOpen(false);
+        setPagesSearch("");
+      }
+    };
+    document.addEventListener("pointerdown", handler);
+    return () => document.removeEventListener("pointerdown", handler);
+  }, [pagesOpen]);
+
+  // Prevent the iframe from stealing focus away from sections-editor inputs.
+  // When focus leaves an element and lands on the iframe (or body, which
+  // happens for cross-origin iframe focus), restore the previously focused
+  // element. We track the last non-iframe focused element via `focusin`, and
+  // detect the steal via a rAF after `blur` (by that time activeElement has
+  // settled to body/iframe when focus entered the iframe content window).
+  // oxlint-disable-next-line ban-use-effect/ban-use-effect — DOM event subscription for focus tracking
+  useEffect(() => {
+    if (!sectionsOpen) return;
+
+    const onFocusIn = (e: FocusEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (target && target !== previewIframeRef.current) {
+        focusBeforeIframeRef.current = target;
+      }
+    };
+
+    const onBlur = () => {
+      requestAnimationFrame(() => {
+        const active = document.activeElement;
+        // When focus enters a cross-origin iframe, activeElement becomes
+        // <body> or the <iframe> element itself.
+        if (
+          (active === document.body || active === previewIframeRef.current) &&
+          focusBeforeIframeRef.current
+        ) {
+          focusBeforeIframeRef.current.focus();
+        }
+      });
+    };
+
+    document.addEventListener("focusin", onFocusIn);
+    document.addEventListener("blur", onBlur, true);
+    return () => {
+      document.removeEventListener("focusin", onFocusIn);
+      document.removeEventListener("blur", onBlur, true);
+    };
+  }, [sectionsOpen]);
+
   const injectVisualEditor = () => {
     const win = previewIframeRef.current?.contentWindow;
     if (!win) return;
@@ -403,7 +492,8 @@ export function PreviewContent() {
     if (!previewUrl) return "No server running";
     try {
       const url = new URL(previewUrl);
-      return `${url.host}${url.pathname === "/" ? "" : url.pathname}`;
+      const path = currentPath === "/" ? "" : currentPath;
+      return `${url.host}${path}`;
     } catch {
       return previewUrl;
     }
@@ -413,16 +503,32 @@ export function PreviewContent() {
     <div className="flex flex-col w-full h-full">
       {previewState.kind === "iframe" && (
         <div className="flex h-12 shrink-0 items-center gap-4 border-b border-border/60 px-3 md:px-4">
-          {/* Group 1: view mode toggle */}
-          {hasHtmlPreview && (
-            <ViewModeToggle
-              value={viewMode}
-              onValueChange={handleViewModeChange}
-              options={VIEW_MODE_OPTIONS}
-              size="sm"
-              className="shrink-0 bg-foreground/4.5"
-            />
-          )}
+          {/* Group 1: view mode toggle + sections */}
+          <div className="flex shrink-0 items-center gap-1">
+            {hasHtmlPreview && (
+              <ViewModeToggle
+                value={viewMode}
+                onValueChange={handleViewModeChange}
+                options={VIEW_MODE_OPTIONS}
+                size="sm"
+                className="shrink-0 bg-foreground/4.5"
+              />
+            )}
+            {pages.length > 0 && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant={sectionsOpen ? "secondary" : "ghost"}
+                    size="icon"
+                    onClick={() => setSectionsOpen((prev) => !prev)}
+                  >
+                    <TextInput size={14} />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">Sections Editor</TooltipContent>
+              </Tooltip>
+            )}
+          </div>
 
           {/* Group 2: nav + url */}
           <div className="flex min-w-0 flex-1 items-center gap-0.5">
@@ -465,10 +571,92 @@ export function PreviewContent() {
               <TooltipContent side="bottom">Refresh</TooltipContent>
             </Tooltip>
 
-            <div className="flex h-8 min-w-0 flex-1 items-center rounded-md bg-background px-2 transition-colors duration-200 hover:bg-accent">
-              <span className="min-w-0 flex-1 truncate text-[12px] text-foreground/88">
-                {previewLabel}
-              </span>
+            <div ref={pagesContainerRef} className="relative min-w-0 flex-1">
+              <button
+                type="button"
+                className="flex h-8 w-full min-w-0 items-center gap-1 rounded-md bg-background px-2 transition-colors duration-200 hover:bg-accent"
+                onClick={() => setPagesOpen((prev) => !prev)}
+              >
+                <span className="min-w-0 flex-1 truncate text-left text-[12px] text-foreground/88">
+                  {previewLabel}
+                </span>
+                {pages.length > 0 && (
+                  <ChevronDown
+                    size={12}
+                    className={cn(
+                      "shrink-0 text-muted-foreground transition-transform",
+                      pagesOpen && "rotate-180",
+                    )}
+                  />
+                )}
+              </button>
+
+              {pagesOpen && pages.length > 0 && (
+                <div className="absolute left-0 right-0 top-full z-50 mt-1.5 overflow-hidden rounded-lg border bg-popover shadow-lg">
+                  <div className="px-2 pt-2 pb-1">
+                    <input
+                      type="text"
+                      value={pagesSearch}
+                      onChange={(e) => setPagesSearch(e.target.value)}
+                      placeholder="Search pages..."
+                      className="w-full rounded-md border border-input bg-transparent px-2.5 py-1.5 text-xs outline-none placeholder:text-muted-foreground focus:ring-1 focus:ring-ring"
+                      autoFocus
+                    />
+                  </div>
+                  <ScrollArea className="max-h-[60vh]">
+                    <div className="p-1.5">
+                      {pages
+                        .filter((page) => {
+                          if (!pagesSearch) return true;
+                          const q = pagesSearch.toLowerCase();
+                          return (
+                            page.name.toLowerCase().includes(q) ||
+                            page.path.toLowerCase().includes(q)
+                          );
+                        })
+                        .map((page) => (
+                          <button
+                            key={page.key}
+                            type="button"
+                            className="flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-left text-sm hover:bg-accent hover:text-accent-foreground"
+                            onClick={() => {
+                              setPagesOpen(false);
+                              setPagesSearch("");
+                              setCurrentPath(page.path);
+                              // Navigate the iframe
+                              const iframe = previewIframeRef.current;
+                              if (iframe && previewUrl) {
+                                iframe.src = new URL(
+                                  page.path,
+                                  previewUrl,
+                                ).href;
+                              }
+                            }}
+                          >
+                            <span className="min-w-0 flex-1 truncate font-medium">
+                              {page.name}
+                            </span>
+                            <span className="shrink-0 text-xs text-muted-foreground">
+                              {page.path}
+                            </span>
+                          </button>
+                        ))}
+                      {pagesSearch &&
+                        pages.every((page) => {
+                          const q = pagesSearch.toLowerCase();
+                          return (
+                            !page.name.toLowerCase().includes(q) &&
+                            !page.path.toLowerCase().includes(q)
+                          );
+                        }) && (
+                          <div className="px-3 py-4 text-center text-xs text-muted-foreground">
+                            No pages match "{pagesSearch}"
+                          </div>
+                        )}
+                    </div>
+                  </ScrollArea>
+                </div>
+              )}
             </div>
           </div>
 
@@ -508,108 +696,175 @@ export function PreviewContent() {
         </div>
       )}
 
-      <div className="flex-1 relative overflow-hidden">
-        {previewState.kind === "never-started" && (
-          <div className="absolute inset-0 z-30">
-            <VmStateCard
-              kind="never-started"
-              onStart={() => {
-                // Force the drawer closed so transitioning out of
-                // never-started doesn't unmask a persisted "open" preference
-                // and visually toggle the setup tab button.
-                handleDrawerOpenChange(false);
-                triggerStart("auto-start");
-              }}
-            />
+      <div className="flex-1 flex overflow-hidden">
+        {/* Sections editor side panel (left) */}
+        {sectionsOpen && previewUrl && branch && virtualMcpId && (
+          <div className="w-96 shrink-0 border-r overflow-hidden">
+            <Suspense
+              fallback={
+                <div className="h-full flex items-center justify-center">
+                  <Loading01
+                    size={20}
+                    className="animate-spin text-muted-foreground"
+                  />
+                </div>
+              }
+            >
+              <SectionsEditor
+                previewUrl={previewUrl}
+                orgSlug={org.slug}
+                virtualMcpId={virtualMcpId}
+                branch={branch}
+                currentPath={currentPath}
+                onSaved={() => {
+                  setTimeout(() => {
+                    const iframe = previewIframeRef.current;
+                    if (!iframe) return;
+                    // Prevent iframe from stealing focus during reload
+                    const focused =
+                      document.activeElement as HTMLElement | null;
+                    const prevTabIndex = iframe.tabIndex;
+                    iframe.tabIndex = -1;
+                    iframe.style.pointerEvents = "none";
+                    iframe.blur();
+                    try {
+                      iframe.contentWindow?.location.reload();
+                    } catch {
+                      // Cross-origin fallback
+                      // biome-ignore lint/correctness/noSelfAssign: reloads the iframe
+                      // oxlint-disable-next-line no-self-assign
+                      iframe.src = iframe.src;
+                    }
+                    const restore = () => {
+                      iframe.tabIndex = prevTabIndex;
+                      iframe.style.pointerEvents = "";
+                      focused?.focus();
+                      iframe.removeEventListener("load", restore);
+                    };
+                    iframe.addEventListener("load", restore);
+                    setTimeout(restore, 3000);
+                  }, DEV_SERVER_SETTLE_MS);
+                }}
+              />
+            </Suspense>
           </div>
         )}
 
-        {previewState.kind === "starting-now" && (
-          <div className="absolute inset-0 z-30">
-            <VmStateCard
-              kind="starting-now"
-              progress={progress}
-              claimPhase={claimPhase}
-            />
-          </div>
-        )}
+        <div className="flex-1 relative overflow-hidden">
+          {previewState.kind === "never-started" && (
+            <div className="absolute inset-0 z-30">
+              <VmStateCard
+                kind="never-started"
+                onStart={() => {
+                  // Force the drawer closed so transitioning out of
+                  // never-started doesn't unmask a persisted "open" preference
+                  // and visually toggle the setup tab button.
+                  handleDrawerOpenChange(false);
+                  triggerStart("auto-start");
+                }}
+              />
+            </div>
+          )}
 
-        {previewState.kind === "errored" && (
-          <div className="absolute inset-0 z-40">
-            <VmStateCard
-              kind="errored"
-              progress={progress}
-              logSource="setup"
-              errorLine={previewState.error.split("\n")[0] ?? "Failed to start"}
-              onRetry={retryAutoStart}
-              drawerOpen={drawerOpenEffective}
-            />
-          </div>
-        )}
+          {previewState.kind === "starting-now" && (
+            <div className="absolute inset-0 z-30">
+              <VmStateCard
+                kind="starting-now"
+                progress={progress}
+                claimPhase={claimPhase}
+              />
+            </div>
+          )}
 
-        {previewState.kind === "suspended" && (
-          <div className="absolute inset-0 z-30">
-            <VmStateCard kind="suspended" onResume={retryAutoStart} />
-          </div>
-        )}
+          {previewState.kind === "errored" && (
+            <div className="absolute inset-0 z-40">
+              <VmStateCard
+                kind="errored"
+                progress={progress}
+                logSource="setup"
+                errorLine={
+                  previewState.error.split("\n")[0] ?? "Failed to start"
+                }
+                onRetry={retryAutoStart}
+                drawerOpen={drawerOpenEffective}
+              />
+            </div>
+          )}
 
-        {previewState.kind === "crashed" && (
-          <div className="absolute inset-0 z-30">
-            <VmStateCard kind="crashed" onOpenTerminal={openDrawer} />
-          </div>
-        )}
+          {previewState.kind === "suspended" && (
+            <div className="absolute inset-0 z-30">
+              <VmStateCard kind="suspended" onResume={retryAutoStart} />
+            </div>
+          )}
 
-        {previewState.kind === "no-html" && (
-          <div className="absolute inset-0 z-30 flex flex-col items-center justify-center gap-4 bg-background">
-            <Server01 size={48} className="text-muted-foreground/40" />
-            <h3 className="text-lg font-medium">No web page at this URL</h3>
-            <p className="text-sm text-muted-foreground text-center max-w-sm">
-              The server is running, but doesn't serve a web page at /. This
-              preview only renders web pages.
-            </p>
-            <Button onClick={openDrawer}>
-              <Server01 size={14} />
-              View Logs
-            </Button>
-          </div>
-        )}
+          {previewState.kind === "crashed" && (
+            <div className="absolute inset-0 z-30">
+              <VmStateCard kind="crashed" onOpenTerminal={openDrawer} />
+            </div>
+          )}
 
-        {viewMode === "visual" && !visualElement && (
-          <div className="absolute top-2 left-1/2 -translate-x-1/2 z-20 flex items-center gap-1.5 rounded-full border border-violet-400/40 bg-violet-500/90 px-3 py-1 text-xs font-medium text-white shadow-md backdrop-blur-sm pointer-events-none select-none">
-            <CursorClick01 size={12} />
-            Click any element to ask the AI
-          </div>
-        )}
-        {viewMode === "visual" && visualElement && (
-          <VisualEditorPrompt
-            element={visualElement}
-            onDismiss={() => setVisualElement(null)}
-          />
-        )}
-        {previewState.kind === "iframe" && (
-          <iframe
-            // Key on previewUrl: `src` mutations don't reliably refetch in all
-            // browsers and leak in-frame state across branches.
-            key={previewState.previewUrl}
-            ref={previewIframeRef}
-            src={previewState.previewUrl}
-            className="w-full h-full border-0"
-            title="Dev Server Preview"
-            onLoad={() => {
-              // This is the VM dev-server preview (sandboxed running app),
-              // NOT an MCP app. MCP apps render via <MCPAppRenderer/>.
-              track("vm_preview_loaded", {
-                view_mode: viewMode,
-                vm_id: vmEntry?.vmId ?? null,
-                // Intentionally excluding the full previewUrl — it can contain
-                // ephemeral tokens / user data in the query string.
-              });
-              if (viewMode === "visual") {
-                injectVisualEditor();
-              }
-            }}
-          />
-        )}
+          {previewState.kind === "no-html" && (
+            <div className="absolute inset-0 z-30 flex flex-col items-center justify-center gap-4 bg-background">
+              <Server01 size={48} className="text-muted-foreground/40" />
+              <h3 className="text-lg font-medium">No web page at this URL</h3>
+              <p className="text-sm text-muted-foreground text-center max-w-sm">
+                The server is running, but doesn't serve a web page at /. This
+                preview only renders web pages.
+              </p>
+              <Button onClick={openDrawer}>
+                <Server01 size={14} />
+                View Logs
+              </Button>
+            </div>
+          )}
+
+          {viewMode === "visual" && !visualElement && (
+            <div className="absolute top-2 left-1/2 -translate-x-1/2 z-20 flex items-center gap-1.5 rounded-full border border-violet-400/40 bg-violet-500/90 px-3 py-1 text-xs font-medium text-white shadow-md backdrop-blur-sm pointer-events-none select-none">
+              <CursorClick01 size={12} />
+              Click any element to ask the AI
+            </div>
+          )}
+          {viewMode === "visual" && visualElement && (
+            <VisualEditorPrompt
+              element={visualElement}
+              onDismiss={() => setVisualElement(null)}
+            />
+          )}
+          {previewState.kind === "iframe" && (
+            <iframe
+              // Key on previewUrl: `src` mutations don't reliably refetch in all
+              // browsers and leak in-frame state across branches.
+              key={previewState.previewUrl}
+              ref={previewIframeRef}
+              src={previewState.previewUrl}
+              className="w-full h-full border-0"
+              title="Dev Server Preview"
+              tabIndex={sectionsOpen ? -1 : undefined}
+              onLoad={() => {
+                // This is the VM dev-server preview (sandboxed running app),
+                // NOT an MCP app. MCP apps render via <MCPAppRenderer/>.
+                track("vm_preview_loaded", {
+                  view_mode: viewMode,
+                  vm_id: vmEntry?.vmId ?? null,
+                  // Intentionally excluding the full previewUrl — it can contain
+                  // ephemeral tokens / user data in the query string.
+                });
+                // Sync currentPath with the iframe's actual location so the
+                // sections editor always reflects the displayed page.
+                try {
+                  const iframePath =
+                    previewIframeRef.current?.contentWindow?.location?.pathname;
+                  if (iframePath) setCurrentPath(iframePath);
+                } catch {
+                  // Cross-origin — can't read, keep current value
+                }
+                if (viewMode === "visual") {
+                  injectVisualEditor();
+                }
+              }}
+            />
+          )}
+        </div>
       </div>
       <PreviewDrawer
         // key forces a fresh drawer on each new VM so per-tab state
diff --git a/apps/mesh/src/web/layouts/agent-shell-layout/index.tsx b/apps/mesh/src/web/layouts/agent-shell-layout/index.tsx
index 2915541408..f7d2d20067 100644
--- a/apps/mesh/src/web/layouts/agent-shell-layout/index.tsx
+++ b/apps/mesh/src/web/layouts/agent-shell-layout/index.tsx
@@ -516,12 +516,12 @@ function AgentInsetProvider() {
             hasActiveGithubRepo={hasActiveGithubRepo}
             vmMap={entity?.metadata?.vmMap}
           >
-            <VirtualMcpHeaderInfo virtualMcp={entity} />
             <NewTaskBridge
               onNewTaskRef={onNewTask}
               createNewTask={layout.createNewTask}
             />
             <Chat.ActiveTaskProvider key={layout.taskId} taskId={layout.taskId}>
+              <VirtualMcpHeaderInfo virtualMcp={entity} />
               <Suspense fallback={<Chat.Skeleton />}>
                 <ChatMainPanelGroup
                   virtualMcpId={virtualMcpId}
diff --git a/apps/mesh/src/web/lib/query-keys.ts b/apps/mesh/src/web/lib/query-keys.ts
index 726360323c..f4c02a7408 100644
--- a/apps/mesh/src/web/lib/query-keys.ts
+++ b/apps/mesh/src/web/lib/query-keys.ts
@@ -323,6 +323,10 @@ export const KEYS = {
   // Web search blob content (fetched from object storage)
   webSearchBlob: (url: string) => ["web-search-blob", url] as const,
 
+  // Deco sections editor (sandbox preview)
+  decofile: (previewUrl: string) => ["decofile", previewUrl] as const,
+  liveMeta: (previewUrl: string) => ["live-meta", previewUrl] as const,
+
   // GitHub integration
   githubUserOrgs: (orgId: string, connectionId: string) =>
     ["github-user-orgs", orgId, connectionId] as const,