From d101fd6a8f9e01a2907b7f0e22dfa28d0ca3fb37 Mon Sep 17 00:00:00 2001
From: guitavano <tavano62@gmail.com>
Date: Fri, 15 May 2026 08:23:33 -0300
Subject: [PATCH 01/12] feat(preview): add sections editor panel and pages
 dropdown to preview toolbar

Adds a schema-driven form editor for deco.cx page sections, integrated as a
side panel in the Preview tab. The URL bar now shows a pages dropdown (from the
decofile) for quick navigation. Saves go through a new vm-file API proxy that
writes block JSON files to the sandbox.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/mesh/src/api/routes/org-scoped.ts        |   2 +
 apps/mesh/src/api/routes/vm-file.ts           |  90 +++++
 .../sections-editor/fields/any-of-field.tsx   | 120 ++++++
 .../sections-editor/fields/array-field.tsx    |  79 ++++
 .../sections-editor/fields/boolean-field.tsx  |  29 ++
 .../sections-editor/fields/enum-field.tsx     |  42 +++
 .../sections-editor/fields/field-props.ts     |   9 +
 .../sections-editor/fields/image-field.tsx    |  42 +++
 .../sections-editor/fields/number-field.tsx   |  31 ++
 .../sections-editor/fields/object-field.tsx   |  43 +++
 .../sections-editor/fields/string-field.tsx   |  78 ++++
 .../components/sections-editor/page-list.tsx  |  80 ++++
 .../sections-editor/resolve-schema.ts         | 198 ++++++++++
 .../components/sections-editor/save-bar.tsx   |  28 ++
 .../sections-editor/schema-form.tsx           |  97 +++++
 .../sections-editor/section-list.tsx          |  63 ++++
 .../sections-editor/sections-editor.tsx       | 253 +++++++++++++
 .../sections-editor/use-decofile.ts           |  15 +
 .../sections-editor/use-live-meta.ts          |  16 +
 .../sections-editor/use-save-block.ts         |  52 +++
 .../src/web/components/vm/preview/preview.tsx | 344 ++++++++++++------
 apps/mesh/src/web/lib/query-keys.ts           |   4 +
 22 files changed, 1606 insertions(+), 109 deletions(-)
 create mode 100644 apps/mesh/src/api/routes/vm-file.ts
 create mode 100644 apps/mesh/src/web/components/sections-editor/fields/any-of-field.tsx
 create mode 100644 apps/mesh/src/web/components/sections-editor/fields/array-field.tsx
 create mode 100644 apps/mesh/src/web/components/sections-editor/fields/boolean-field.tsx
 create mode 100644 apps/mesh/src/web/components/sections-editor/fields/enum-field.tsx
 create mode 100644 apps/mesh/src/web/components/sections-editor/fields/field-props.ts
 create mode 100644 apps/mesh/src/web/components/sections-editor/fields/image-field.tsx
 create mode 100644 apps/mesh/src/web/components/sections-editor/fields/number-field.tsx
 create mode 100644 apps/mesh/src/web/components/sections-editor/fields/object-field.tsx
 create mode 100644 apps/mesh/src/web/components/sections-editor/fields/string-field.tsx
 create mode 100644 apps/mesh/src/web/components/sections-editor/page-list.tsx
 create mode 100644 apps/mesh/src/web/components/sections-editor/resolve-schema.ts
 create mode 100644 apps/mesh/src/web/components/sections-editor/save-bar.tsx
 create mode 100644 apps/mesh/src/web/components/sections-editor/schema-form.tsx
 create mode 100644 apps/mesh/src/web/components/sections-editor/section-list.tsx
 create mode 100644 apps/mesh/src/web/components/sections-editor/sections-editor.tsx
 create mode 100644 apps/mesh/src/web/components/sections-editor/use-decofile.ts
 create mode 100644 apps/mesh/src/web/components/sections-editor/use-live-meta.ts
 create mode 100644 apps/mesh/src/web/components/sections-editor/use-save-block.ts

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/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..7cbe369b06
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/fields/any-of-field.tsx
@@ -0,0 +1,120 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@deco/ui/components/select.tsx";
+import { Label } from "@deco/ui/components/label.tsx";
+import { useState } from "react";
+import type { FieldProps } from "./field-props";
+import { SchemaForm } from "../schema-form";
+
+export function AnyOfField({
+  schema,
+  value,
+  onChange,
+  path,
+  label,
+}: FieldProps) {
+  const variants = schema.anyOf ?? [];
+
+  // Try to figure out which variant is active based on current value
+  const detectVariantIndex = (): number => {
+    if (value == null) return 0;
+
+    // If value has __resolveType, match on that
+    if (typeof value === "object" && !Array.isArray(value)) {
+      const rt = (value as Record<string, unknown>).__resolveType;
+      if (typeof rt === "string") {
+        const idx = variants.findIndex(
+          (v) => v.const === rt || v.enum?.[0] === rt,
+        );
+        if (idx >= 0) return idx;
+      }
+    }
+
+    // Match on const value
+    const idx = variants.findIndex((v) => v.const === value);
+    if (idx >= 0) return idx;
+
+    return 0;
+  };
+
+  const [selectedIdx, setSelectedIdx] = useState(detectVariantIndex);
+  const activeVariant = variants[selectedIdx];
+
+  const handleVariantChange = (idx: string) => {
+    const i = Number(idx);
+    setSelectedIdx(i);
+    const v = variants[i];
+    // Reset to default for this variant
+    if (v?.const !== undefined) {
+      onChange(v.const);
+    } else if (v?.default !== undefined) {
+      onChange(v.default);
+    } else if (v?.type === "object") {
+      onChange({});
+    } else {
+      onChange(undefined);
+    }
+  };
+
+  if (variants.length === 0) return null;
+
+  // Simple enum-like anyOf (all variants are const strings)
+  const allConst = variants.every((v) => v.const !== undefined);
+  if (allConst) {
+    return (
+      <div className="space-y-1.5">
+        <Label htmlFor={path}>{label}</Label>
+        <Select value={String(selectedIdx)} onValueChange={handleVariantChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select..." />
+          </SelectTrigger>
+          <SelectContent>
+            {variants.map((v, i) => (
+              <SelectItem key={i} value={String(i)}>
+                {v.title ?? String(v.const)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={path}>{label}</Label>
+      {variants.length > 1 && (
+        <Select value={String(selectedIdx)} onValueChange={handleVariantChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select type..." />
+          </SelectTrigger>
+          <SelectContent>
+            {variants.map((v, i) => (
+              <SelectItem key={i} value={String(i)}>
+                {v.title ?? `Option ${i + 1}`}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )}
+      {activeVariant?.properties && (
+        <div className="border rounded-md p-3">
+          <SchemaForm
+            schema={activeVariant}
+            value={
+              typeof value === "object" && value !== null
+                ? (value as Record<string, unknown>)
+                : {}
+            }
+            onChange={onChange}
+            basePath={`${path}.$${selectedIdx}`}
+          />
+        </div>
+      )}
+    </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..bd785dd673
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/fields/array-field.tsx
@@ -0,0 +1,79 @@
+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 defaultVal =
+      itemSchema?.type === "object" ? {} : (itemSchema?.default ?? "");
+    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..ce061e577a
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/fields/enum-field.tsx
@@ -0,0 +1,42 @@
+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 names = schema.enumNames ?? [];
+  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) => onChange(v)}>
+        <SelectTrigger>
+          <SelectValue placeholder="Select..." />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((opt, i) => (
+            <SelectItem key={String(opt)} value={String(opt)}>
+              {names[i] ?? 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/page-list.tsx b/apps/mesh/src/web/components/sections-editor/page-list.tsx
new file mode 100644
index 0000000000..ef0febb89e
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/page-list.tsx
@@ -0,0 +1,80 @@
+import { cn } from "@deco/ui/lib/utils.js";
+
+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 >= 4) {
+      name = name.slice(0, lastDash);
+    }
+  }
+  return decodeURIComponent(name);
+}
+
+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.path === "string" && Array.isArray(obj.sections)) {
+        pages.push({
+          key,
+          name: parsePageName(key),
+          path: obj.path,
+        });
+      }
+    }
+  }
+  return pages;
+}
+
+export function PageList({
+  pages,
+  selectedKey,
+  onSelect,
+}: {
+  pages: PageEntry[];
+  selectedKey: string | null;
+  onSelect: (key: string) => void;
+}) {
+  if (pages.length === 0) {
+    return (
+      <p className="text-xs text-muted-foreground px-2 py-3">No pages found.</p>
+    );
+  }
+
+  return (
+    <div className="space-y-0.5">
+      {pages.map((page) => (
+        <button
+          key={page.key}
+          type="button"
+          onClick={() => onSelect(page.key)}
+          className={cn(
+            "w-full text-left px-2 py-1.5 rounded-md text-sm transition-colors",
+            selectedKey === page.key
+              ? "bg-accent text-accent-foreground"
+              : "hover:bg-muted",
+          )}
+        >
+          <div className="font-medium truncate">{page.name}</div>
+          <div className="text-xs text-muted-foreground truncate">
+            {page.path}
+          </div>
+        </button>
+      ))}
+    </div>
+  );
+}
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..c414d43f7a
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/resolve-schema.ts
@@ -0,0 +1,198 @@
+/**
+ * Pure schema resolution for /live/_meta JSON Schemas.
+ *
+ * Resolves $ref, allOf, anyOf into a flat SchemaProperty tree
+ * that the form renderer can iterate over.
+ */
+
+const MAX_DEPTH = 15;
+
+export interface SchemaProperty {
+  type: string;
+  title?: string;
+  description?: string;
+  format?: string;
+  enum?: unknown[];
+  enumNames?: string[];
+  default?: unknown;
+  const?: unknown;
+  properties?: Record<string, SchemaProperty>;
+  items?: SchemaProperty;
+  anyOf?: SchemaProperty[];
+  required?: string[];
+}
+
+export interface LiveMeta {
+  manifest: {
+    blocks: {
+      sections: Record<string, { $ref: string; namespace: string }>;
+    };
+  };
+  schema: {
+    definitions: Record<string, unknown>;
+  };
+}
+
+type RawSchema = Record<string, unknown>;
+
+function isObj(v: unknown): v is RawSchema {
+  return v !== null && typeof v === "object" && !Array.isArray(v);
+}
+
+/**
+ * Resolve a $ref pointer like "#/definitions/abc" into the actual schema.
+ */
+function resolveRef(
+  ref: string,
+  definitions: Record<string, unknown>,
+): RawSchema | null {
+  const prefix = "#/definitions/";
+  if (!ref.startsWith(prefix)) return null;
+  const key = ref.slice(prefix.length);
+  const resolved = definitions[key];
+  return isObj(resolved) ? resolved : null;
+}
+
+/**
+ * Recursively dereference a schema, resolving $ref, merging allOf,
+ * and flattening into a SchemaProperty.
+ */
+function flatten(
+  raw: unknown,
+  definitions: Record<string, unknown>,
+  depth: number,
+): SchemaProperty | null {
+  if (depth > MAX_DEPTH || !isObj(raw)) return null;
+
+  let schema = raw;
+
+  // Resolve $ref
+  if (typeof schema.$ref === "string") {
+    const resolved = resolveRef(schema.$ref, definitions);
+    if (!resolved) return null;
+    // Merge sibling properties (title, description) with resolved
+    const { $ref: _, ...siblings } = schema;
+    schema = { ...resolved, ...siblings };
+  }
+
+  // Merge allOf
+  if (Array.isArray(schema.allOf)) {
+    let merged: RawSchema = {};
+    for (const entry of schema.allOf) {
+      const flat = flatten(entry, definitions, depth + 1);
+      if (flat?.properties) {
+        merged = {
+          ...merged,
+          properties: {
+            ...(merged.properties as Record<string, unknown> | undefined),
+            ...flat.properties,
+          },
+        };
+      }
+    }
+    const { allOf: _, ...rest } = schema;
+    schema = { ...rest, ...merged };
+    if (rest.properties && merged.properties) {
+      schema.properties = {
+        ...(merged.properties as Record<string, unknown>),
+        ...(rest.properties as Record<string, unknown>),
+      };
+    }
+  }
+
+  // Determine type
+  let type = "string";
+  const rawType = schema.type;
+  if (typeof rawType === "string") {
+    type = rawType;
+  } else if (Array.isArray(rawType)) {
+    // ["string", "null"] -> "string"
+    type = (rawType.find((t: unknown) => t !== "null") as string) ?? "string";
+  }
+
+  const result: SchemaProperty = { type };
+
+  if (typeof schema.title === "string") result.title = schema.title;
+  if (typeof schema.description === "string")
+    result.description = schema.description;
+  if (typeof schema.format === "string") result.format = schema.format;
+  if (Array.isArray(schema.enum)) result.enum = schema.enum;
+  if (Array.isArray(schema.enumNames))
+    result.enumNames = schema.enumNames as string[];
+  if (schema.default !== undefined) result.default = schema.default;
+  if (schema.const !== undefined) result.const = schema.const;
+
+  // anyOf
+  if (Array.isArray(schema.anyOf)) {
+    const variants: SchemaProperty[] = [];
+    for (const variant of schema.anyOf) {
+      const flat = flatten(variant, definitions, depth + 1);
+      if (flat) variants.push(flat);
+    }
+    if (variants.length > 0) {
+      result.anyOf = variants;
+      result.type = "anyOf";
+    }
+  }
+
+  // Properties (object)
+  if (isObj(schema.properties)) {
+    const props: Record<string, SchemaProperty> = {};
+    const required = Array.isArray(schema.required)
+      ? (schema.required as string[])
+      : [];
+    for (const [key, val] of Object.entries(
+      schema.properties as Record<string, unknown>,
+    )) {
+      const flat = flatten(val, definitions, depth + 1);
+      if (flat) props[key] = flat;
+    }
+    if (Object.keys(props).length > 0) {
+      result.properties = props;
+      result.type = "object";
+    }
+    if (required.length > 0) result.required = required;
+  }
+
+  // Items (array)
+  if (type === "array" && isObj(schema.items)) {
+    const flat = flatten(schema.items, definitions, depth + 1);
+    if (flat) result.items = flat;
+  }
+
+  return result;
+}
+
+/**
+ * Get the list of available sections from /live/_meta.
+ */
+export function getSectionTypes(meta: LiveMeta): string[] {
+  return Object.keys(meta.manifest.blocks.sections);
+}
+
+/**
+ * Resolve the schema for a given __resolveType.
+ * Returns null if the type is not found or is a named block reference.
+ */
+export function resolveSchema(
+  resolveType: string,
+  meta: LiveMeta,
+): SchemaProperty | null {
+  const definitions = meta.schema.definitions;
+
+  // Look up the section in manifest
+  const sectionEntry = meta.manifest.blocks.sections[resolveType];
+  if (!sectionEntry) {
+    // Not a known section type — could be a named block reference
+    return null;
+  }
+
+  // Resolve the $ref from the manifest entry
+  const refKey = sectionEntry.$ref?.replace("#/definitions/", "");
+  if (!refKey) return null;
+
+  const sectionSchema = definitions[refKey];
+  if (!isObj(sectionSchema)) return null;
+
+  return flatten(sectionSchema, definitions, 0);
+}
diff --git a/apps/mesh/src/web/components/sections-editor/save-bar.tsx b/apps/mesh/src/web/components/sections-editor/save-bar.tsx
new file mode 100644
index 0000000000..04f236208d
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/save-bar.tsx
@@ -0,0 +1,28 @@
+import { Button } from "@deco/ui/components/button.tsx";
+import { Loading01 } from "@untitledui/icons";
+
+export function SaveBar({
+  dirty,
+  saving,
+  onSave,
+  onDiscard,
+}: {
+  dirty: boolean;
+  saving: boolean;
+  onSave: () => void;
+  onDiscard: () => void;
+}) {
+  if (!dirty) return null;
+
+  return (
+    <div className="sticky bottom-0 border-t bg-background px-4 py-2 flex items-center justify-end gap-2">
+      <Button type="button" variant="outline" size="sm" onClick={onDiscard}>
+        Discard
+      </Button>
+      <Button type="button" size="sm" onClick={onSave} disabled={saving}>
+        {saving && <Loading01 size={14} className="animate-spin mr-1.5" />}
+        Save
+      </Button>
+    </div>
+  );
+}
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..e0119e4910
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/schema-form.tsx
@@ -0,0 +1,97 @@
+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"]);
+
+const IMAGE_FORMATS = new Set(["image-uri", "file-uri"]);
+
+export function renderField(props: FieldProps) {
+  const { schema } = props;
+
+  // Image format
+  if (schema.format && IMAGE_FORMATS.has(schema.format)) {
+    return <ImageField key={props.path} {...props} />;
+  }
+
+  // Enum
+  if (schema.enum && schema.enum.length > 0) {
+    return <EnumField key={props.path} {...props} />;
+  }
+
+  // anyOf
+  if (schema.type === "anyOf" || (schema.anyOf && schema.anyOf.length > 0)) {
+    return <AnyOfField key={props.path} {...props} />;
+  }
+
+  switch (schema.type) {
+    case "string":
+      return <StringField key={props.path} {...props} />;
+    case "number":
+    case "integer":
+      return <NumberField key={props.path} {...props} />;
+    case "boolean":
+      return <BooleanField key={props.path} {...props} />;
+    case "array":
+      return <ArrayField key={props.path} {...props} />;
+    case "object":
+      if (schema.properties) {
+        return <ObjectField key={props.path} {...props} />;
+      }
+      return null;
+    default:
+      // Unknown type — render as string input
+      return <StringField key={props.path} {...props} />;
+  }
+}
+
+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 updateField = (key: string, fieldValue: unknown) => {
+    onChange({ ...objValue, [key]: fieldValue });
+  };
+
+  return (
+    <div className="space-y-4">
+      {Object.entries(properties).map(([key, propSchema]) => {
+        if (HIDDEN_PROPS.has(key)) return null;
+
+        const fieldPath = basePath ? `${basePath}.${key}` : key;
+        const label = propSchema.title ?? 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..c3371fd630
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/section-list.tsx
@@ -0,0 +1,63 @@
+import { cn } from "@deco/ui/lib/utils.js";
+
+interface SectionEntry {
+  __resolveType: string;
+  [key: string]: unknown;
+}
+
+function sectionLabel(resolveType: string): string {
+  // "site/sections/Images/Carousel.tsx" -> "Carousel"
+  // "website/sections/Rendering/Lazy.tsx" -> "Lazy"
+  // Named blocks (no "/") stay as-is: "Header" -> "Header"
+  if (!resolveType.includes("/")) return resolveType;
+  const filename = resolveType.split("/").pop() ?? resolveType;
+  return filename.replace(/\.tsx?$/, "");
+}
+
+export function SectionList({
+  sections,
+  selectedIndex,
+  onSelect,
+}: {
+  sections: SectionEntry[];
+  selectedIndex: number | null;
+  onSelect: (index: number) => void;
+}) {
+  if (sections.length === 0) {
+    return (
+      <p className="text-xs text-muted-foreground px-2 py-3">
+        No sections in this page.
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-0.5">
+      {sections.map((section, i) => {
+        const rt = section.__resolveType ?? "Unknown";
+        const isNamedBlock = !rt.includes("/");
+
+        return (
+          <button
+            key={`${rt}-${i}`}
+            type="button"
+            onClick={() => onSelect(i)}
+            className={cn(
+              "w-full text-left px-2 py-1.5 rounded-md text-sm transition-colors",
+              selectedIndex === i
+                ? "bg-accent text-accent-foreground"
+                : "hover:bg-muted",
+            )}
+          >
+            <div className="font-medium truncate">{sectionLabel(rt)}</div>
+            {isNamedBlock && (
+              <div className="text-xs text-muted-foreground truncate">
+                block ref
+              </div>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
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..9d6f887f3c
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/sections-editor.tsx
@@ -0,0 +1,253 @@
+import { useState } from "react";
+import { Loading01 } from "@untitledui/icons";
+import { ScrollArea } from "@deco/ui/components/scroll-area.tsx";
+import { toast } from "sonner";
+import { useDecofile } from "./use-decofile";
+import { useLiveMeta } from "./use-live-meta";
+import { useSaveBlock } from "./use-save-block";
+import { PageList, extractPages } from "./page-list";
+import { SectionList } from "./section-list";
+import { SchemaForm } from "./schema-form";
+import { SaveBar } from "./save-bar";
+import { resolveSchema } from "./resolve-schema";
+
+interface SectionData {
+  __resolveType: string;
+  [key: string]: unknown;
+}
+
+/**
+ * Side panel for editing deco.cx page sections.
+ * Renders page/section navigation and a schema-driven form.
+ * Meant to be embedded alongside the preview iframe.
+ */
+export function SectionsEditor({
+  previewUrl,
+  orgSlug,
+  virtualMcpId,
+  branch,
+  onNavigate,
+}: {
+  previewUrl: string;
+  orgSlug: string;
+  virtualMcpId: string;
+  branch: string;
+  /** Called with the page path when a page is selected, so the parent can navigate the iframe. */
+  onNavigate?: (path: string) => void;
+}) {
+  const { data: decofile, isLoading: decofileLoading } =
+    useDecofile(previewUrl);
+  const { data: meta, isLoading: metaLoading } = useLiveMeta(previewUrl);
+
+  const [selectedPageKey, setSelectedPageKey] = useState<string | null>(null);
+  const [selectedSectionIndex, setSelectedSectionIndex] = useState<
+    number | null
+  >(null);
+  const [formValue, setFormValue] = useState<Record<string, unknown> | null>(
+    null,
+  );
+  const [originalValue, setOriginalValue] = useState<string>("");
+
+  const saveBlock = useSaveBlock({ previewUrl, orgSlug, virtualMcpId, branch });
+
+  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 selectedPage =
+    selectedPageKey && decofile[selectedPageKey]
+      ? (decofile[selectedPageKey] as { sections?: SectionData[] })
+      : null;
+  const sections: SectionData[] = selectedPage?.sections ?? [];
+
+  const selectedSection =
+    selectedSectionIndex !== null
+      ? (sections[selectedSectionIndex] ?? null)
+      : null;
+
+  const resolvedSchema =
+    selectedSection && meta
+      ? resolveSchema(selectedSection.__resolveType, meta)
+      : null;
+
+  const isNamedBlock =
+    selectedSection && !selectedSection.__resolveType.includes("/");
+  const namedBlockData =
+    isNamedBlock && selectedSection
+      ? (decofile[selectedSection.__resolveType] as
+          | Record<string, unknown>
+          | undefined)
+      : null;
+  const namedBlockResolveType = namedBlockData?.__resolveType as
+    | string
+    | undefined;
+  const namedBlockSchema =
+    namedBlockResolveType && meta
+      ? resolveSchema(namedBlockResolveType, meta)
+      : null;
+
+  const activeSchema = isNamedBlock ? namedBlockSchema : resolvedSchema;
+
+  const handleSelectSection = (index: number) => {
+    setSelectedSectionIndex(index);
+    const section = sections[index];
+    if (!section) return;
+
+    const isNamed = !section.__resolveType.includes("/");
+    const data = isNamed
+      ? ((decofile[section.__resolveType] as Record<string, unknown>) ?? {})
+      : section;
+
+    setFormValue({ ...(data as Record<string, unknown>) });
+    setOriginalValue(JSON.stringify(data));
+  };
+
+  const handleSelectPage = (key: string) => {
+    setSelectedPageKey(key);
+    setSelectedSectionIndex(null);
+    setFormValue(null);
+    setOriginalValue("");
+
+    // Navigate the preview iframe to the page's path
+    const page = pages.find((p) => p.key === key);
+    if (page && onNavigate) {
+      onNavigate(page.path);
+    }
+  };
+
+  const dirty =
+    formValue !== null && JSON.stringify(formValue) !== originalValue;
+
+  const handleSave = () => {
+    if (!formValue || selectedSectionIndex === null || !selectedSection) return;
+
+    if (isNamedBlock) {
+      saveBlock.mutate(
+        { blockKey: selectedSection.__resolveType, data: formValue },
+        {
+          onSuccess: () => {
+            setOriginalValue(JSON.stringify(formValue));
+            toast.success("Block saved");
+          },
+          onError: (err) => toast.error(`Save failed: ${err.message}`),
+        },
+      );
+    } else {
+      if (!selectedPageKey) return;
+      const pageData = {
+        ...(decofile[selectedPageKey] as Record<string, unknown>),
+      };
+      const updatedSections = [...sections];
+      updatedSections[selectedSectionIndex] = formValue as SectionData;
+      pageData.sections = updatedSections;
+
+      saveBlock.mutate(
+        { blockKey: selectedPageKey, data: pageData },
+        {
+          onSuccess: () => {
+            setOriginalValue(JSON.stringify(formValue));
+            toast.success("Section saved");
+          },
+          onError: (err) => toast.error(`Save failed: ${err.message}`),
+        },
+      );
+    }
+  };
+
+  const handleDiscard = () => {
+    if (originalValue) {
+      setFormValue(JSON.parse(originalValue));
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Pages */}
+      <div className="px-3 py-2 border-b">
+        <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+          Pages
+        </h3>
+      </div>
+      <ScrollArea className="max-h-40">
+        <div className="p-2">
+          <PageList
+            pages={pages}
+            selectedKey={selectedPageKey}
+            onSelect={handleSelectPage}
+          />
+        </div>
+      </ScrollArea>
+
+      {/* Sections */}
+      {selectedPageKey && (
+        <>
+          <div className="px-3 py-2 border-t border-b">
+            <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+              Sections
+            </h3>
+          </div>
+          <ScrollArea className="max-h-40">
+            <div className="p-2">
+              <SectionList
+                sections={sections}
+                selectedIndex={selectedSectionIndex}
+                onSelect={handleSelectSection}
+              />
+            </div>
+          </ScrollArea>
+        </>
+      )}
+
+      {/* Form */}
+      <div className="flex-1 flex flex-col min-h-0 border-t">
+        {activeSchema && formValue ? (
+          <>
+            <ScrollArea className="flex-1">
+              <div className="p-4">
+                <h2 className="text-sm font-semibold mb-4">
+                  {activeSchema.title ??
+                    selectedSection?.__resolveType ??
+                    "Section"}
+                </h2>
+                <SchemaForm
+                  schema={activeSchema}
+                  value={formValue}
+                  onChange={(val) =>
+                    setFormValue(val as Record<string, unknown>)
+                  }
+                  basePath=""
+                />
+              </div>
+            </ScrollArea>
+            <SaveBar
+              dirty={dirty}
+              saving={saveBlock.isPending}
+              onSave={handleSave}
+              onDiscard={handleDiscard}
+            />
+          </>
+        ) : (
+          <div className="flex-1 flex items-center justify-center text-sm text-muted-foreground">
+            {selectedPageKey
+              ? "Select a section to edit"
+              : "Select a page to get started"}
+          </div>
+        )}
+      </div>
+    </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..77b044fcc8 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,9 +11,12 @@ import {
 import {
   ArrowLeft,
   ArrowRight,
+  ChevronDown,
   CursorClick01,
   DotsHorizontal,
+  LayersTwo01,
   LinkExternal01,
+  Loading01,
   Monitor04,
   RefreshCw01,
   Server01,
@@ -34,6 +37,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 +66,12 @@ 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,
+  })),
+);
+
 function drawerStatusFromPreview(
   state: PreviewState,
   vmStartPending: boolean,
@@ -101,6 +113,13 @@ export function PreviewContent() {
     useState<VisualEditorPayload | null>(null);
   const previewIframeRef = useRef<HTMLIFrameElement>(null);
 
+  // Sections editor panel
+  const [sectionsOpen, setSectionsOpen] = useState(false);
+
+  // Pages dropdown in URL bar
+  const [pagesOpen, setPagesOpen] = useState(false);
+  const pagesContainerRef = useRef<HTMLDivElement>(null);
+
   // vmMap[userId][branch] -> { vmId, previewUrl, runnerKind? }
   const userId = session?.user?.id;
   const metadata = inset?.entity?.metadata;
@@ -108,6 +127,10 @@ 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) : [];
+
   // "reload" fires on config edits framework HMR won't catch (.ts/.tsx use HMR).
   const vmEvents = useVmEvents();
   useVmReloadHandler(() => {
@@ -354,6 +377,18 @@ 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);
+    };
+    document.addEventListener("pointerdown", handler);
+    return () => document.removeEventListener("pointerdown", handler);
+  }, [pagesOpen]);
+
   const injectVisualEditor = () => {
     const win = previewIframeRef.current?.contentWindow;
     if (!win) return;
@@ -413,16 +448,30 @@ 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"
+              />
+            )}
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant={sectionsOpen ? "secondary" : "ghost"}
+                  size="icon"
+                  onClick={() => setSectionsOpen((prev) => !prev)}
+                >
+                  <LayersTwo01 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 +514,54 @@ 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={`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">
+                  <ScrollArea className="max-h-80">
+                    <div className="p-1.5">
+                      {pages.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"
+                          onMouseDown={(e) => {
+                            e.preventDefault();
+                            setPagesOpen(false);
+                            // 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>
+                      ))}
+                    </div>
+                  </ScrollArea>
+                </div>
+              )}
             </div>
           </div>
 
@@ -508,107 +601,140 @@ 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>
-        )}
+      <div className="flex-1 flex overflow-hidden">
+        <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 === "starting-now" && (
-          <div className="absolute inset-0 z-30">
-            <VmStateCard
-              kind="starting-now"
-              progress={progress}
-              claimPhase={claimPhase}
-            />
-          </div>
-        )}
+          {previewState.kind === "starting-now" && (
+            <div className="absolute inset-0 z-30">
+              <VmStateCard
+                kind="starting-now"
+                progress={progress}
+                claimPhase={claimPhase}
+              />
+            </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 === "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 === "suspended" && (
-          <div className="absolute inset-0 z-30">
-            <VmStateCard kind="suspended" onResume={retryAutoStart} />
-          </div>
-        )}
+          {previewState.kind === "suspended" && (
+            <div className="absolute inset-0 z-30">
+              <VmStateCard kind="suspended" onResume={retryAutoStart} />
+            </div>
+          )}
 
-        {previewState.kind === "crashed" && (
-          <div className="absolute inset-0 z-30">
-            <VmStateCard kind="crashed" onOpenTerminal={openDrawer} />
-          </div>
-        )}
+          {previewState.kind === "crashed" && (
+            <div className="absolute inset-0 z-30">
+              <VmStateCard kind="crashed" onOpenTerminal={openDrawer} />
+            </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 === "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"
-            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();
+          {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();
+                }
+              }}
+            />
+          )}
+        </div>
+
+        {/* Sections editor side panel */}
+        {sectionsOpen && previewUrl && branch && virtualMcpId && (
+          <div className="w-96 shrink-0 border-l 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}
+                onNavigate={(path) => {
+                  const iframe = previewIframeRef.current;
+                  if (!iframe || !previewUrl) return;
+                  const url = new URL(path, previewUrl);
+                  iframe.src = url.href;
+                }}
+              />
+            </Suspense>
+          </div>
         )}
       </div>
       <PreviewDrawer
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,

From fb332ff7f2334fc4d54e18ae314443a66ea1f23c Mon Sep 17 00:00:00 2001
From: guitavano <tavano62@gmail.com>
Date: Fri, 15 May 2026 11:36:25 -0300
Subject: [PATCH 02/12] feat(sections-editor): match admin-mcp patterns,
 draggable sections, editable page fields
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rewrite resolve-schema.ts to mirror admin-mcp buildProperty/collectProps
- Rewrite section-list.tsx with parseSections() for lazy/hidden/saved-block/multivariate detection
- Add drag-and-drop reordering with @dnd-kit/sortable
- Add editable page name/path inputs with auto-save
- Drill-down layout: section list → section form with back navigation
- Unwrap lazy/hidden/multivariate wrappers for form editing and re-wrap on save
- Detect lazy-wrapped saved blocks (e.g. Lazy → Header)
- Use TextInput icon for CMS toggle button
- Attempt to preserve focus during iframe reload

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../sections-editor/fields/any-of-field.tsx   | 109 +---
 .../sections-editor/fields/enum-field.tsx     |   2 +-
 .../sections-editor/resolve-schema.ts         | 471 ++++++++++------
 .../sections-editor/schema-form.tsx           | 131 ++++-
 .../sections-editor/section-list.tsx          | 377 +++++++++++--
 .../sections-editor/sections-editor.tsx       | 501 ++++++++++++------
 .../src/web/components/vm/preview/preview.tsx |  91 ++--
 7 files changed, 1191 insertions(+), 491 deletions(-)

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
index 7cbe369b06..01d585c7e6 100644
--- 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
@@ -6,9 +6,7 @@ import {
   SelectValue,
 } from "@deco/ui/components/select.tsx";
 import { Label } from "@deco/ui/components/label.tsx";
-import { useState } from "react";
 import type { FieldProps } from "./field-props";
-import { SchemaForm } from "../schema-form";
 
 export function AnyOfField({
   schema,
@@ -17,104 +15,43 @@ export function AnyOfField({
   path,
   label,
 }: FieldProps) {
-  const variants = schema.anyOf ?? [];
+  // ── 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 });
+    };
 
-  // Try to figure out which variant is active based on current value
-  const detectVariantIndex = (): number => {
-    if (value == null) return 0;
-
-    // If value has __resolveType, match on that
-    if (typeof value === "object" && !Array.isArray(value)) {
-      const rt = (value as Record<string, unknown>).__resolveType;
-      if (typeof rt === "string") {
-        const idx = variants.findIndex(
-          (v) => v.const === rt || v.enum?.[0] === rt,
-        );
-        if (idx >= 0) return idx;
-      }
-    }
-
-    // Match on const value
-    const idx = variants.findIndex((v) => v.const === value);
-    if (idx >= 0) return idx;
-
-    return 0;
-  };
-
-  const [selectedIdx, setSelectedIdx] = useState(detectVariantIndex);
-  const activeVariant = variants[selectedIdx];
-
-  const handleVariantChange = (idx: string) => {
-    const i = Number(idx);
-    setSelectedIdx(i);
-    const v = variants[i];
-    // Reset to default for this variant
-    if (v?.const !== undefined) {
-      onChange(v.const);
-    } else if (v?.default !== undefined) {
-      onChange(v.default);
-    } else if (v?.type === "object") {
-      onChange({});
-    } else {
-      onChange(undefined);
-    }
-  };
-
-  if (variants.length === 0) return null;
-
-  // Simple enum-like anyOf (all variants are const strings)
-  const allConst = variants.every((v) => v.const !== undefined);
-  if (allConst) {
     return (
       <div className="space-y-1.5">
         <Label htmlFor={path}>{label}</Label>
-        <Select value={String(selectedIdx)} onValueChange={handleVariantChange}>
+        <Select value={currentRt} onValueChange={handleRefChange}>
           <SelectTrigger>
             <SelectValue placeholder="Select..." />
           </SelectTrigger>
           <SelectContent>
-            {variants.map((v, i) => (
-              <SelectItem key={i} value={String(i)}>
-                {v.title ?? String(v.const)}
+            {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>
     );
   }
 
-  return (
-    <div className="space-y-2">
-      <Label htmlFor={path}>{label}</Label>
-      {variants.length > 1 && (
-        <Select value={String(selectedIdx)} onValueChange={handleVariantChange}>
-          <SelectTrigger>
-            <SelectValue placeholder="Select type..." />
-          </SelectTrigger>
-          <SelectContent>
-            {variants.map((v, i) => (
-              <SelectItem key={i} value={String(i)}>
-                {v.title ?? `Option ${i + 1}`}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      )}
-      {activeVariant?.properties && (
-        <div className="border rounded-md p-3">
-          <SchemaForm
-            schema={activeVariant}
-            value={
-              typeof value === "object" && value !== null
-                ? (value as Record<string, unknown>)
-                : {}
-            }
-            onChange={onChange}
-            basePath={`${path}.$${selectedIdx}`}
-          />
-        </div>
-      )}
-    </div>
-  );
+  // No variants available
+  return null;
 }
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
index ce061e577a..3ea6b37e77 100644
--- a/apps/mesh/src/web/components/sections-editor/fields/enum-field.tsx
+++ b/apps/mesh/src/web/components/sections-editor/fields/enum-field.tsx
@@ -16,7 +16,7 @@ export function EnumField({
   label,
 }: FieldProps) {
   const options = schema.enum ?? [];
-  const names = schema.enumNames ?? [];
+  const names: string[] = [];
   const strValue = value != null ? String(value) : "";
 
   return (
diff --git a/apps/mesh/src/web/components/sections-editor/resolve-schema.ts b/apps/mesh/src/web/components/sections-editor/resolve-schema.ts
index c414d43f7a..82e397d889 100644
--- a/apps/mesh/src/web/components/sections-editor/resolve-schema.ts
+++ b/apps/mesh/src/web/components/sections-editor/resolve-schema.ts
@@ -1,198 +1,363 @@
 /**
- * Pure schema resolution for /live/_meta JSON Schemas.
+ * Schema resolution for /live/_meta JSON Schemas.
  *
- * Resolves $ref, allOf, anyOf into a flat SchemaProperty tree
- * that the form renderer can iterate over.
+ * 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.
  */
 
-const MAX_DEPTH = 15;
-
 export interface SchemaProperty {
   type: string;
   title?: string;
   description?: string;
   format?: string;
   enum?: unknown[];
-  enumNames?: string[];
   default?: unknown;
-  const?: unknown;
   properties?: Record<string, SchemaProperty>;
   items?: SchemaProperty;
-  anyOf?: SchemaProperty[];
-  required?: string[];
+  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: {
-      sections: Record<string, { $ref: string; namespace: string }>;
-    };
-  };
-  schema: {
-    definitions: Record<string, unknown>;
+    blocks: Record<
+      string,
+      Record<string, { $ref?: string; namespace?: string }>
+    >;
   };
+  schema: Record<string, unknown>;
 }
 
 type RawSchema = Record<string, unknown>;
 
-function isObj(v: unknown): v is RawSchema {
-  return v !== null && typeof v === "object" && !Array.isArray(v);
-}
-
 /**
- * Resolve a $ref pointer like "#/definitions/abc" into the actual schema.
+ * Resolve the schema for a given __resolveType by searching across ALL
+ * block types in the manifest (sections, loaders, matchers, etc.).
  */
-function resolveRef(
-  ref: string,
-  definitions: Record<string, unknown>,
-): RawSchema | null {
-  const prefix = "#/definitions/";
-  if (!ref.startsWith(prefix)) return null;
-  const key = ref.slice(prefix.length);
-  const resolved = definitions[key];
-  return isObj(resolved) ? resolved : null;
-}
-
-/**
- * Recursively dereference a schema, resolving $ref, merging allOf,
- * and flattening into a SchemaProperty.
- */
-function flatten(
-  raw: unknown,
-  definitions: Record<string, unknown>,
-  depth: number,
+export function resolveSchema(
+  resolveType: string,
+  meta: LiveMeta,
 ): SchemaProperty | null {
-  if (depth > MAX_DEPTH || !isObj(raw)) return null;
+  const globalSchema = meta.schema ?? {};
+  const allBlockTypes = meta.manifest?.blocks ?? {};
 
-  let schema = raw;
-
-  // Resolve $ref
-  if (typeof schema.$ref === "string") {
-    const resolved = resolveRef(schema.$ref, definitions);
-    if (!resolved) return null;
-    // Merge sibling properties (title, description) with resolved
-    const { $ref: _, ...siblings } = schema;
-    schema = { ...resolved, ...siblings };
+  // 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 allOf
-  if (Array.isArray(schema.allOf)) {
-    let merged: RawSchema = {};
-    for (const entry of schema.allOf) {
-      const flat = flatten(entry, definitions, depth + 1);
-      if (flat?.properties) {
-        merged = {
-          ...merged,
-          properties: {
-            ...(merged.properties as Record<string, unknown> | undefined),
-            ...flat.properties,
-          },
-        };
-      }
-    }
-    const { allOf: _, ...rest } = schema;
-    schema = { ...rest, ...merged };
-    if (rest.properties && merged.properties) {
-      schema.properties = {
-        ...(merged.properties as Record<string, unknown>),
-        ...(rest.properties as Record<string, unknown>),
-      };
+  // 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,
+      );
     }
-  }
 
-  // Determine type
-  let type = "string";
-  const rawType = schema.type;
-  if (typeof rawType === "string") {
-    type = rawType;
-  } else if (Array.isArray(rawType)) {
-    // ["string", "null"] -> "string"
-    type = (rawType.find((t: unknown) => t !== "null") as string) ?? "string";
-  }
+    let props: RawSchema = {};
 
-  const result: SchemaProperty = { type };
-
-  if (typeof schema.title === "string") result.title = schema.title;
-  if (typeof schema.description === "string")
-    result.description = schema.description;
-  if (typeof schema.format === "string") result.format = schema.format;
-  if (Array.isArray(schema.enum)) result.enum = schema.enum;
-  if (Array.isArray(schema.enumNames))
-    result.enumNames = schema.enumNames as string[];
-  if (schema.default !== undefined) result.default = schema.default;
-  if (schema.const !== undefined) result.const = schema.const;
-
-  // anyOf
-  if (Array.isArray(schema.anyOf)) {
-    const variants: SchemaProperty[] = [];
-    for (const variant of schema.anyOf) {
-      const flat = flatten(variant, definitions, depth + 1);
-      if (flat) variants.push(flat);
+    if (s.properties && typeof s.properties === "object") {
+      props = { ...props, ...(s.properties as RawSchema) };
     }
-    if (variants.length > 0) {
-      result.anyOf = variants;
-      result.type = "anyOf";
+
+    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) };
+      }
     }
-  }
 
-  // Properties (object)
-  if (isObj(schema.properties)) {
-    const props: Record<string, SchemaProperty> = {};
-    const required = Array.isArray(schema.required)
-      ? (schema.required as string[])
-      : [];
-    for (const [key, val] of Object.entries(
-      schema.properties as Record<string, unknown>,
-    )) {
-      const flat = flatten(val, definitions, depth + 1);
-      if (flat) props[key] = flat;
+    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);
     }
-    if (Object.keys(props).length > 0) {
-      result.properties = props;
-      result.type = "object";
+
+    // 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));
+        }
+      }
     }
-    if (required.length > 0) result.required = required;
-  }
 
-  // Items (array)
-  if (type === "array" && isObj(schema.items)) {
-    const flat = flatten(schema.items, definitions, depth + 1);
-    if (flat) result.items = flat;
-  }
+    // Determine type
+    let type: string | undefined;
+    if (resolved.type) {
+      type = Array.isArray(resolved.type)
+        ? String(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),
+      );
 
-  return result;
-}
+      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,
+          };
+        }
 
-/**
- * Get the list of available sections from /live/_meta.
- */
-export function getSectionTypes(meta: LiveMeta): string[] {
-  return Object.keys(meta.manifest.blocks.sections);
-}
+        // 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 rtEnum = (
+              (branch.properties as RawSchema)?.__resolveType as RawSchema
+            ).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,
+          };
+        }
 
-/**
- * Resolve the schema for a given __resolveType.
- * Returns null if the type is not found or is a named block reference.
- */
-export function resolveSchema(
-  resolveType: string,
-  meta: LiveMeta,
-): SchemaProperty | null {
-  const definitions = meta.schema.definitions;
+        // 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,
+          };
+        }
 
-  // Look up the section in manifest
-  const sectionEntry = meta.manifest.blocks.sections[resolveType];
-  if (!sectionEntry) {
-    // Not a known section type — could be a named block reference
-    return null;
-  }
+        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);
+      }
+    }
 
-  // Resolve the $ref from the manifest entry
-  const refKey = sectionEntry.$ref?.replace("#/definitions/", "");
-  if (!refKey) return null;
+    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,
+    };
+  };
 
-  const sectionSchema = definitions[refKey];
-  if (!isObj(sectionSchema)) return null;
+  // 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 flatten(sectionSchema, definitions, 0);
+  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
index e0119e4910..b291ebd67f 100644
--- a/apps/mesh/src/web/components/sections-editor/schema-form.tsx
+++ b/apps/mesh/src/web/components/sections-editor/schema-form.tsx
@@ -10,46 +10,123 @@ 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"]);
+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 } = props;
+  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 format
+  // Image formats
   if (schema.format && IMAGE_FORMATS.has(schema.format)) {
     return <ImageField key={props.path} {...props} />;
   }
 
-  // Enum
+  // Enum (including extracted const enums)
   if (schema.enum && schema.enum.length > 0) {
     return <EnumField key={props.path} {...props} />;
   }
 
-  // anyOf
-  if (schema.type === "anyOf" || (schema.anyOf && schema.anyOf.length > 0)) {
+  // anyOf without anyOfRefs (legacy path)
+  if (schema.type === "anyOf") {
     return <AnyOfField key={props.path} {...props} />;
   }
 
-  switch (schema.type) {
-    case "string":
-      return <StringField 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} {...props} />;
-    case "boolean":
-      return <BooleanField key={props.path} {...props} />;
-    case "array":
-      return <ArrayField key={props.path} {...props} />;
+      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 (schema.properties) {
-        return <ObjectField key={props.path} {...props} />;
+      if (
+        effectiveValue !== null &&
+        typeof effectiveValue === "object" &&
+        !Array.isArray(effectiveValue)
+      ) {
+        return <ObjectField key={props.path} {...effectiveProps} />;
       }
       return null;
     default:
-      // Unknown type — render as string input
-      return <StringField key={props.path} {...props} />;
+      return <StringField key={props.path} {...effectiveProps} />;
   }
 }
 
@@ -72,17 +149,27 @@ export function SchemaForm({
       ? (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">
-      {Object.entries(properties).map(([key, propSchema]) => {
-        if (HIDDEN_PROPS.has(key)) return null;
-
+      {keys.map((key) => {
+        const propSchema = properties[key];
+        if (!propSchema) return null;
         const fieldPath = basePath ? `${basePath}.${key}` : key;
-        const label = propSchema.title ?? key;
+        const label = propSchema.title ?? humanize(key);
 
         return renderField({
           schema: propSchema,
diff --git a/apps/mesh/src/web/components/sections-editor/section-list.tsx b/apps/mesh/src/web/components/sections-editor/section-list.tsx
index c3371fd630..00bdf9bbe6 100644
--- a/apps/mesh/src/web/components/sections-editor/section-list.tsx
+++ b/apps/mesh/src/web/components/sections-editor/section-list.tsx
@@ -1,28 +1,339 @@
 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,
+  arrayMove,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 
-interface SectionEntry {
+// ─── 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;
 }
 
-function sectionLabel(resolveType: string): string {
-  // "site/sections/Images/Carousel.tsx" -> "Carousel"
-  // "website/sections/Rendering/Lazy.tsx" -> "Lazy"
-  // Named blocks (no "/") stay as-is: "Header" -> "Header"
-  if (!resolveType.includes("/")) return resolveType;
-  const filename = resolveType.split("/").pop() ?? resolveType;
-  return filename.replace(/\.tsx?$/, "");
+// ─── parsing helpers ───────────────────────────────────────────────────────────
+
+const LAZY_SUFFIXES = [
+  "website/sections/Rendering/Lazy.tsx",
+  "website/sections/Rendering/SingleDeferred.tsx",
+];
+
+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}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") onSelect();
+      }}
+      className={cn(
+        "group flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-2.5 transition-colors",
+        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",
+      )}
+    >
+      {/* Drag handle */}
+      <button
+        type="button"
+        className="shrink-0 cursor-grab touch-none text-muted-foreground/40 hover:text-muted-foreground active:cursor-grabbing"
+        {...attributes}
+        {...listeners}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <DotsGrid className="h-4 w-4" />
+      </button>
+
+      <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: SectionEntry[];
+  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">
@@ -32,32 +343,26 @@ export function SectionList({
   }
 
   return (
-    <div className="space-y-0.5">
-      {sections.map((section, i) => {
-        const rt = section.__resolveType ?? "Unknown";
-        const isNamedBlock = !rt.includes("/");
-
-        return (
-          <button
-            key={`${rt}-${i}`}
-            type="button"
-            onClick={() => onSelect(i)}
-            className={cn(
-              "w-full text-left px-2 py-1.5 rounded-md text-sm transition-colors",
-              selectedIndex === i
-                ? "bg-accent text-accent-foreground"
-                : "hover:bg-muted",
-            )}
-          >
-            <div className="font-medium truncate">{sectionLabel(rt)}</div>
-            {isNamedBlock && (
-              <div className="text-xs text-muted-foreground truncate">
-                block ref
-              </div>
-            )}
-          </button>
-        );
-      })}
-    </div>
+    <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
index 9d6f887f3c..2302ab64d0 100644
--- a/apps/mesh/src/web/components/sections-editor/sections-editor.tsx
+++ b/apps/mesh/src/web/components/sections-editor/sections-editor.tsx
@@ -1,54 +1,192 @@
-import { useState } from "react";
-import { Loading01 } from "@untitledui/icons";
+import { useState, useRef } from "react";
+import { ArrowLeft, Loading01 } from "@untitledui/icons";
 import { ScrollArea } from "@deco/ui/components/scroll-area.tsx";
 import { toast } from "sonner";
 import { useDecofile } from "./use-decofile";
 import { useLiveMeta } from "./use-live-meta";
 import { useSaveBlock } from "./use-save-block";
-import { PageList, extractPages } from "./page-list";
-import { SectionList } from "./section-list";
+import { extractPages } from "./page-list";
+import { SectionList, parseSections } from "./section-list";
+import { arrayMove } from "@dnd-kit/sortable";
+import type { ParsedSection } from "./section-list";
 import { SchemaForm } from "./schema-form";
-import { SaveBar } from "./save-bar";
 import { resolveSchema } from "./resolve-schema";
 
-interface SectionData {
+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;
+
+/**
+ * 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 prevKeyRef = useRef(pageKey);
+
+  // Reset local state when navigating to a different page
+  if (prevKeyRef.current !== pageKey) {
+    prevKeyRef.current = 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>
+  );
+}
+
+const LAZY_SUFFIXES = [
+  "website/sections/Rendering/Lazy.tsx",
+  "website/sections/Rendering/SingleDeferred.tsx",
+];
+
+function isLazyResolveType(rt: string): boolean {
+  return LAZY_SUFFIXES.some((suffix) => rt.endsWith(suffix));
+}
+
+/**
+ * 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 page/section navigation and a schema-driven form.
- * Meant to be embedded alongside the preview iframe.
+ * 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,
-  onNavigate,
+  currentPath,
+  onSaved,
 }: {
   previewUrl: string;
   orgSlug: string;
   virtualMcpId: string;
   branch: string;
-  /** Called with the page path when a page is selected, so the parent can navigate the iframe. */
-  onNavigate?: (path: string) => void;
+  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 [selectedPageKey, setSelectedPageKey] = useState<string | null>(null);
   const [selectedSectionIndex, setSelectedSectionIndex] = useState<
     number | null
   >(null);
   const [formValue, setFormValue] = useState<Record<string, unknown> | null>(
     null,
   );
-  const [originalValue, setOriginalValue] = useState<string>("");
+  const [activeResolveType, setActiveResolveType] = useState<string | null>(
+    null,
+  );
 
   const saveBlock = useSaveBlock({ previewUrl, orgSlug, virtualMcpId, branch });
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const pageDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   if (decofileLoading || metaLoading) {
     return (
@@ -67,187 +205,226 @@ export function SectionsEditor({
   }
 
   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 selectedPage =
-    selectedPageKey && decofile[selectedPageKey]
-      ? (decofile[selectedPageKey] as { sections?: SectionData[] })
+  const pageData =
+    activePageKey && decofile[activePageKey]
+      ? (decofile[activePageKey] as { sections?: RawSection[] })
       : null;
-  const sections: SectionData[] = selectedPage?.sections ?? [];
+  const rawSections: RawSection[] = pageData?.sections ?? [];
+  const parsedSections = parseSections(rawSections, decofile);
 
-  const selectedSection =
-    selectedSectionIndex !== null
-      ? (sections[selectedSectionIndex] ?? null)
-      : null;
+  const activeSchema =
+    activeResolveType && meta ? resolveSchema(activeResolveType, meta) : null;
 
-  const resolvedSchema =
-    selectedSection && meta
-      ? resolveSchema(selectedSection.__resolveType, meta)
-      : null;
+  const scheduleAutoSave = (
+    nextValue: Record<string, unknown>,
+    sectionIndex: number,
+  ) => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
 
-  const isNamedBlock =
-    selectedSection && !selectedSection.__resolveType.includes("/");
-  const namedBlockData =
-    isNamedBlock && selectedSection
-      ? (decofile[selectedSection.__resolveType] as
-          | Record<string, unknown>
-          | undefined)
-      : null;
-  const namedBlockResolveType = namedBlockData?.__resolveType as
-    | string
-    | undefined;
-  const namedBlockSchema =
-    namedBlockResolveType && meta
-      ? resolveSchema(namedBlockResolveType, meta)
-      : null;
+    debounceRef.current = setTimeout(() => {
+      const rawSection = rawSections[sectionIndex];
+      if (!rawSection) return;
+      const parsed = parsedSections[sectionIndex];
+      if (!parsed) return;
 
-  const activeSchema = isNamedBlock ? namedBlockSchema : resolvedSchema;
+      // 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;
+      }
 
-  const handleSelectSection = (index: number) => {
-    setSelectedSectionIndex(index);
-    const section = sections[index];
-    if (!section) return;
+      // Inline section (possibly wrapped): rebuild the full wrapper structure
+      if (!activePageKey) return;
+      const fullPageData = {
+        ...(decofile[activePageKey] as Record<string, unknown>),
+      };
+      const updatedSections = [...rawSections];
 
-    const isNamed = !section.__resolveType.includes("/");
-    const data = isNamed
-      ? ((decofile[section.__resolveType] as Record<string, unknown>) ?? {})
-      : section;
+      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;
+      }
 
-    setFormValue({ ...(data as Record<string, unknown>) });
-    setOriginalValue(JSON.stringify(data));
+      fullPageData.sections = updatedSections;
+      saveBlock.mutate(
+        { blockKey: activePageKey, data: fullPageData },
+        {
+          onSuccess: () => onSaved?.(),
+          onError: (err) => toast.error(`Save failed: ${err.message}`),
+        },
+      );
+    }, AUTOSAVE_DELAY);
   };
 
-  const handleSelectPage = (key: string) => {
-    setSelectedPageKey(key);
-    setSelectedSectionIndex(null);
-    setFormValue(null);
-    setOriginalValue("");
+  const handleSelectSection = (index: number) => {
+    setSelectedSectionIndex(index);
+    const rawSection = rawSections[index];
+    const parsed = parsedSections[index];
+    if (!rawSection || !parsed) return;
 
-    // Navigate the preview iframe to the page's path
-    const page = pages.find((p) => p.key === key);
-    if (page && onNavigate) {
-      onNavigate(page.path);
+    const unwrapped = unwrapSection(rawSection, parsed, decofile);
+    if (!unwrapped) {
+      // Multivariate — no form editing for now
+      setFormValue(null);
+      setActiveResolveType(null);
+      return;
     }
-  };
 
-  const dirty =
-    formValue !== null && JSON.stringify(formValue) !== originalValue;
+    setFormValue(unwrapped.data);
+    setActiveResolveType(unwrapped.resolveType);
+  };
 
-  const handleSave = () => {
-    if (!formValue || selectedSectionIndex === null || !selectedSection) return;
+  const handleFormChange = (val: unknown) => {
+    const next = val as Record<string, unknown>;
+    setFormValue(next);
+    if (selectedSectionIndex !== null) {
+      scheduleAutoSave(next, selectedSectionIndex);
+    }
+  };
 
-    if (isNamedBlock) {
-      saveBlock.mutate(
-        { blockKey: selectedSection.__resolveType, data: formValue },
-        {
-          onSuccess: () => {
-            setOriginalValue(JSON.stringify(formValue));
-            toast.success("Block saved");
-          },
-          onError: (err) => toast.error(`Save failed: ${err.message}`),
-        },
-      );
-    } else {
-      if (!selectedPageKey) return;
-      const pageData = {
-        ...(decofile[selectedPageKey] as Record<string, unknown>),
+  const savePageField = (field: "name" | "path", value: string) => {
+    if (!activePageKey) return;
+    if (pageDebounceRef.current) clearTimeout(pageDebounceRef.current);
+    pageDebounceRef.current = setTimeout(() => {
+      const fullPageData = {
+        ...(decofile[activePageKey] as Record<string, unknown>),
+        [field]: value,
       };
-      const updatedSections = [...sections];
-      updatedSections[selectedSectionIndex] = formValue as SectionData;
-      pageData.sections = updatedSections;
-
+      // No onSaved/iframe reload — name/path don't affect the visual preview
       saveBlock.mutate(
-        { blockKey: selectedPageKey, data: pageData },
+        { blockKey: activePageKey, data: fullPageData },
         {
-          onSuccess: () => {
-            setOriginalValue(JSON.stringify(formValue));
-            toast.success("Section saved");
-          },
           onError: (err) => toast.error(`Save failed: ${err.message}`),
         },
       );
-    }
+    }, AUTOSAVE_DELAY);
   };
 
-  const handleDiscard = () => {
-    if (originalValue) {
-      setFormValue(JSON.parse(originalValue));
-    }
+  const handleReorder = (fromIndex: number, toIndex: number) => {
+    if (!activePageKey) return;
+    const reordered = arrayMove([...rawSections], fromIndex, toIndex);
+    const fullPageData = {
+      ...(decofile[activePageKey] as Record<string, unknown>),
+      sections: reordered,
+    };
+    saveBlock.mutate(
+      { blockKey: activePageKey, data: fullPageData },
+      {
+        onSuccess: () => onSaved?.(),
+        onError: (err) => toast.error(`Reorder failed: ${err.message}`),
+      },
+    );
   };
 
+  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">
-      {/* Pages */}
-      <div className="px-3 py-2 border-b">
-        <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-          Pages
-        </h3>
-      </div>
-      <ScrollArea className="max-h-40">
-        <div className="p-2">
-          <PageList
-            pages={pages}
-            selectedKey={selectedPageKey}
-            onSelect={handleSelectPage}
+      {/* 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>
-      </ScrollArea>
-
-      {/* Sections */}
-      {selectedPageKey && (
-        <>
-          <div className="px-3 py-2 border-t border-b">
-            <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-              Sections
-            </h3>
-          </div>
-          <ScrollArea className="max-h-40">
-            <div className="p-2">
-              <SectionList
-                sections={sections}
-                selectedIndex={selectedSectionIndex}
-                onSelect={handleSelectSection}
-              />
-            </div>
-          </ScrollArea>
-        </>
-      )}
+        )}
+      </div>
 
-      {/* Form */}
-      <div className="flex-1 flex flex-col min-h-0 border-t">
-        {activeSchema && formValue ? (
-          <>
-            <ScrollArea className="flex-1">
-              <div className="p-4">
-                <h2 className="text-sm font-semibold mb-4">
-                  {activeSchema.title ??
-                    selectedSection?.__resolveType ??
-                    "Section"}
-                </h2>
-                <SchemaForm
-                  schema={activeSchema}
-                  value={formValue}
-                  onChange={(val) =>
-                    setFormValue(val as Record<string, unknown>)
-                  }
-                  basePath=""
-                />
-              </div>
-            </ScrollArea>
-            <SaveBar
-              dirty={dirty}
-              saving={saveBlock.isPending}
-              onSave={handleSave}
-              onDiscard={handleDiscard}
+      {/* 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 className="flex-1 flex items-center justify-center text-sm text-muted-foreground">
-            {selectedPageKey
-              ? "Select a section to edit"
-              : "Select a page to get started"}
           </div>
-        )}
-      </div>
+        </ScrollArea>
+      ) : (
+        <ScrollArea className="flex-1 min-h-0">
+          <div className="p-2">
+            <SectionList
+              sections={parsedSections}
+              selectedIndex={selectedSectionIndex}
+              onSelect={handleSelectSection}
+              onReorder={handleReorder}
+            />
+          </div>
+        </ScrollArea>
+      )}
     </div>
   );
 }
diff --git a/apps/mesh/src/web/components/vm/preview/preview.tsx b/apps/mesh/src/web/components/vm/preview/preview.tsx
index 77b044fcc8..f6b626661f 100644
--- a/apps/mesh/src/web/components/vm/preview/preview.tsx
+++ b/apps/mesh/src/web/components/vm/preview/preview.tsx
@@ -14,7 +14,7 @@ import {
   ChevronDown,
   CursorClick01,
   DotsHorizontal,
-  LayersTwo01,
+  TextInput,
   LinkExternal01,
   Loading01,
   Monitor04,
@@ -120,6 +120,9 @@ export function PreviewContent() {
   const [pagesOpen, setPagesOpen] = useState(false);
   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;
@@ -466,7 +469,7 @@ export function PreviewContent() {
                   size="icon"
                   onClick={() => setSectionsOpen((prev) => !prev)}
                 >
-                  <LayersTwo01 size={14} />
+                  <TextInput size={14} />
                 </Button>
               </TooltipTrigger>
               <TooltipContent side="bottom">Sections Editor</TooltipContent>
@@ -543,6 +546,7 @@ export function PreviewContent() {
                           onMouseDown={(e) => {
                             e.preventDefault();
                             setPagesOpen(false);
+                            setCurrentPath(page.path);
                             // Navigate the iframe
                             const iframe = previewIframeRef.current;
                             if (iframe && previewUrl) {
@@ -602,6 +606,60 @@ export function PreviewContent() {
       )}
 
       <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={() => {
+                  // Wait for the dev server to pick up the file change before reloading
+                  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);
+                  }, 500);
+                }}
+              />
+            </Suspense>
+          </div>
+        )}
+
         <div className="flex-1 relative overflow-hidden">
           {previewState.kind === "never-started" && (
             <div className="absolute inset-0 z-30">
@@ -707,35 +765,6 @@ export function PreviewContent() {
             />
           )}
         </div>
-
-        {/* Sections editor side panel */}
-        {sectionsOpen && previewUrl && branch && virtualMcpId && (
-          <div className="w-96 shrink-0 border-l 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}
-                onNavigate={(path) => {
-                  const iframe = previewIframeRef.current;
-                  if (!iframe || !previewUrl) return;
-                  const url = new URL(path, previewUrl);
-                  iframe.src = url.href;
-                }}
-              />
-            </Suspense>
-          </div>
-        )}
       </div>
       <PreviewDrawer
         // key forces a fresh drawer on each new VM so per-tab state

From 54e47d9e20ff4e83ca32026aad7dccaa04fb12c9 Mon Sep 17 00:00:00 2001
From: guitavano <tavano62@gmail.com>
Date: Fri, 15 May 2026 15:15:59 -0300
Subject: [PATCH 03/12] feat(sections-editor): make entire section row
 draggable

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/sections-editor/section-list.tsx   | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/apps/mesh/src/web/components/sections-editor/section-list.tsx b/apps/mesh/src/web/components/sections-editor/section-list.tsx
index 00bdf9bbe6..df7d1959b5 100644
--- a/apps/mesh/src/web/components/sections-editor/section-list.tsx
+++ b/apps/mesh/src/web/components/sections-editor/section-list.tsx
@@ -223,7 +223,7 @@ function SortableSectionItem({
         if (e.key === "Enter" || e.key === " ") onSelect();
       }}
       className={cn(
-        "group flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-2.5 transition-colors",
+        "group flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-2.5 touch-none transition-colors active:cursor-grabbing",
         selected
           ? "bg-accent text-accent-foreground"
           : saved
@@ -232,17 +232,10 @@ function SortableSectionItem({
               ? "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}
     >
-      {/* Drag handle */}
-      <button
-        type="button"
-        className="shrink-0 cursor-grab touch-none text-muted-foreground/40 hover:text-muted-foreground active:cursor-grabbing"
-        {...attributes}
-        {...listeners}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <DotsGrid className="h-4 w-4" />
-      </button>
+      <DotsGrid className="h-4 w-4 shrink-0 text-muted-foreground/40" />
 
       <LayoutAlt01
         className="h-4 w-4 shrink-0"

From 2ef8e86a489f24ea9769e0fca990be043bfd423a Mon Sep 17 00:00:00 2001
From: guitavano <tavano62@gmail.com>
Date: Tue, 19 May 2026 11:33:45 -0300
Subject: [PATCH 04/12] fix(sections-editor): address PR review feedback

Fix P1 issues: AnyOfField now renders a fallback input for legacy anyOf
fields instead of returning null, and form state resets when navigating
between pages to prevent stale edits.

Fix P2 issues: enum-field preserves original value types, array-field
uses type-appropriate defaults and stable keys, resolve-schema merges
allOf required arrays and skips null in type unions, page-list guards
decodeURIComponent, preview dropdown uses onClick for keyboard a11y,
section-list rows are focusable with proper role/tabIndex/onKeyDown
composition, touch-none removed from full row, and page header
autosave accumulates pending fields to avoid losing rapid edits.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../sections-editor/fields/any-of-field.tsx   | 19 +++++-
 .../sections-editor/fields/array-field.tsx    | 18 +++++-
 .../sections-editor/fields/enum-field.tsx     | 12 +++-
 .../components/sections-editor/page-list.tsx  |  8 ++-
 .../sections-editor/resolve-schema.ts         | 10 ++-
 .../sections-editor/section-list.tsx          | 16 +++--
 .../sections-editor/sections-editor.tsx       | 64 ++++++++++++++-----
 .../src/web/components/vm/preview/preview.tsx | 18 ++++--
 8 files changed, 127 insertions(+), 38 deletions(-)

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
index 01d585c7e6..84a645556b 100644
--- 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
@@ -52,6 +52,21 @@ export function AnyOfField({
     );
   }
 
-  // No variants available
-  return null;
+  // ── 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
index bd785dd673..5257c62070 100644
--- a/apps/mesh/src/web/components/sections-editor/fields/array-field.tsx
+++ b/apps/mesh/src/web/components/sections-editor/fields/array-field.tsx
@@ -15,8 +15,19 @@ export function ArrayField({
   const itemSchema = schema.items;
 
   const addItem = () => {
+    const t = itemSchema?.type;
     const defaultVal =
-      itemSchema?.type === "object" ? {} : (itemSchema?.default ?? "");
+      itemSchema?.default !== undefined
+        ? itemSchema.default
+        : t === "object"
+          ? {}
+          : t === "number" || t === "integer"
+            ? 0
+            : t === "boolean"
+              ? false
+              : t === "array"
+                ? []
+                : "";
     onChange([...items, defaultVal]);
   };
 
@@ -43,7 +54,10 @@ export function ArrayField({
         <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">
+        <div
+          key={`${path}.${i}.${items.length}`}
+          className="border rounded-md p-3 relative"
+        >
           <Button
             type="button"
             variant="ghost"
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
index 3ea6b37e77..4ebb6bc40a 100644
--- a/apps/mesh/src/web/components/sections-editor/fields/enum-field.tsx
+++ b/apps/mesh/src/web/components/sections-editor/fields/enum-field.tsx
@@ -16,7 +16,6 @@ export function EnumField({
   label,
 }: FieldProps) {
   const options = schema.enum ?? [];
-  const names: string[] = [];
   const strValue = value != null ? String(value) : "";
 
   return (
@@ -25,14 +24,21 @@ export function EnumField({
       {schema.description && (
         <p className="text-xs text-muted-foreground">{schema.description}</p>
       )}
-      <Select value={strValue} onValueChange={(v) => onChange(v)}>
+      <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, i) => (
             <SelectItem key={String(opt)} value={String(opt)}>
-              {names[i] ?? String(opt)}
+              {String(opt)}
             </SelectItem>
           ))}
         </SelectContent>
diff --git a/apps/mesh/src/web/components/sections-editor/page-list.tsx b/apps/mesh/src/web/components/sections-editor/page-list.tsx
index ef0febb89e..eb594a45b3 100644
--- a/apps/mesh/src/web/components/sections-editor/page-list.tsx
+++ b/apps/mesh/src/web/components/sections-editor/page-list.tsx
@@ -16,11 +16,15 @@ function parsePageName(key: string): string {
   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 >= 4) {
+    if (/^[a-f0-9]+$/i.test(suffix) && suffix.length >= 8) {
       name = name.slice(0, lastDash);
     }
   }
-  return decodeURIComponent(name);
+  try {
+    return decodeURIComponent(name);
+  } catch {
+    return name;
+  }
 }
 
 export function extractPages(decofile: Record<string, unknown>): PageEntry[] {
diff --git a/apps/mesh/src/web/components/sections-editor/resolve-schema.ts b/apps/mesh/src/web/components/sections-editor/resolve-schema.ts
index 82e397d889..73e2ffcd35 100644
--- a/apps/mesh/src/web/components/sections-editor/resolve-schema.ts
+++ b/apps/mesh/src/web/components/sections-editor/resolve-schema.ts
@@ -99,6 +99,14 @@ export function resolveSchema(
       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;
@@ -154,7 +162,7 @@ export function resolveSchema(
     let type: string | undefined;
     if (resolved.type) {
       type = Array.isArray(resolved.type)
-        ? String(resolved.type[0])
+        ? String(resolved.type.find((t) => t !== "null") ?? resolved.type[0])
         : String(resolved.type);
     } else if (typeof v.$ref === "string") {
       type = "object";
diff --git a/apps/mesh/src/web/components/sections-editor/section-list.tsx b/apps/mesh/src/web/components/sections-editor/section-list.tsx
index df7d1959b5..535cc3dc50 100644
--- a/apps/mesh/src/web/components/sections-editor/section-list.tsx
+++ b/apps/mesh/src/web/components/sections-editor/section-list.tsx
@@ -19,7 +19,6 @@ import {
   sortableKeyboardCoordinates,
   useSortable,
   verticalListSortingStrategy,
-  arrayMove,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 
@@ -47,12 +46,12 @@ interface RawSection {
 
 // ─── parsing helpers ───────────────────────────────────────────────────────────
 
-const LAZY_SUFFIXES = [
+export const LAZY_SUFFIXES = [
   "website/sections/Rendering/Lazy.tsx",
   "website/sections/Rendering/SingleDeferred.tsx",
 ];
 
-function isLazyResolveType(rt: string): boolean {
+export function isLazyResolveType(rt: string): boolean {
   return LAZY_SUFFIXES.some((suffix) => rt.endsWith(suffix));
 }
 
@@ -219,11 +218,8 @@ function SortableSectionItem({
       ref={setNodeRef}
       style={style}
       onClick={onSelect}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") onSelect();
-      }}
       className={cn(
-        "group flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-2.5 touch-none transition-colors active:cursor-grabbing",
+        "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
@@ -234,6 +230,12 @@ function SortableSectionItem({
       )}
       {...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" />
 
diff --git a/apps/mesh/src/web/components/sections-editor/sections-editor.tsx b/apps/mesh/src/web/components/sections-editor/sections-editor.tsx
index 2302ab64d0..ec9a4fd625 100644
--- a/apps/mesh/src/web/components/sections-editor/sections-editor.tsx
+++ b/apps/mesh/src/web/components/sections-editor/sections-editor.tsx
@@ -6,7 +6,7 @@ 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 } from "./section-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";
@@ -76,15 +76,6 @@ function PageHeaderInputs({
   );
 }
 
-const LAZY_SUFFIXES = [
-  "website/sections/Rendering/Lazy.tsx",
-  "website/sections/Rendering/SingleDeferred.tsx",
-];
-
-function isLazyResolveType(rt: string): boolean {
-  return LAZY_SUFFIXES.some((suffix) => rt.endsWith(suffix));
-}
-
 /**
  * Unwrap a raw section to get the actual editable data and its resolveType.
  * Handles lazy wrappers, hidden (multivariate+never), saved blocks, and
@@ -184,9 +175,34 @@ export function SectionsEditor({
     null,
   );
 
+  // Reset form state when the active page changes
+  const prevPathRef = useRef(currentPath);
+  if (prevPathRef.current !== currentPath) {
+    prevPathRef.current = currentPath;
+    setSelectedSectionIndex(null);
+    setFormValue(null);
+    setActiveResolveType(null);
+  }
+
   const saveBlock = useSaveBlock({ previewUrl, orgSlug, virtualMcpId, branch });
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const pageDebounceRef = 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;
+  }>({
+    rawSections: [],
+    parsedSections: [],
+    decofile: {},
+    activePageKey: null,
+  });
 
   if (decofileLoading || metaLoading) {
     return (
@@ -216,6 +232,9 @@ export function SectionsEditor({
   const rawSections: RawSection[] = pageData?.sections ?? [];
   const parsedSections = parseSections(rawSections, decofile);
 
+  // Sync ref so debounced callbacks always see the latest values.
+  latestRef.current = { rawSections, parsedSections, decofile, activePageKey };
+
   const activeSchema =
     activeResolveType && meta ? resolveSchema(activeResolveType, meta) : null;
 
@@ -226,9 +245,15 @@ export function SectionsEditor({
     if (debounceRef.current) clearTimeout(debounceRef.current);
 
     debounceRef.current = setTimeout(() => {
-      const rawSection = rawSections[sectionIndex];
+      const {
+        rawSections: latestRawSections,
+        parsedSections: latestParsedSections,
+        decofile: latestDecofile,
+        activePageKey: latestPageKey,
+      } = latestRef.current;
+      const rawSection = latestRawSections[sectionIndex];
       if (!rawSection) return;
-      const parsed = parsedSections[sectionIndex];
+      const parsed = latestParsedSections[sectionIndex];
       if (!parsed) return;
 
       // Saved block: write the block entry directly
@@ -248,11 +273,11 @@ export function SectionsEditor({
       }
 
       // Inline section (possibly wrapped): rebuild the full wrapper structure
-      if (!activePageKey) return;
+      if (!latestPageKey) return;
       const fullPageData = {
-        ...(decofile[activePageKey] as Record<string, unknown>),
+        ...(latestDecofile[latestPageKey] as Record<string, unknown>),
       };
-      const updatedSections = [...rawSections];
+      const updatedSections = [...latestRawSections];
 
       if (parsed.isHidden) {
         // Re-wrap into multivariate+never structure
@@ -287,7 +312,7 @@ export function SectionsEditor({
 
       fullPageData.sections = updatedSections;
       saveBlock.mutate(
-        { blockKey: activePageKey, data: fullPageData },
+        { blockKey: latestPageKey, data: fullPageData },
         {
           onSuccess: () => onSaved?.(),
           onError: (err) => toast.error(`Save failed: ${err.message}`),
@@ -324,11 +349,16 @@ export function SectionsEditor({
 
   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>),
-        [field]: value,
+        ...pending,
       };
       // No onSaved/iframe reload — name/path don't affect the visual preview
       saveBlock.mutate(
diff --git a/apps/mesh/src/web/components/vm/preview/preview.tsx b/apps/mesh/src/web/components/vm/preview/preview.tsx
index f6b626661f..75528f235e 100644
--- a/apps/mesh/src/web/components/vm/preview/preview.tsx
+++ b/apps/mesh/src/web/components/vm/preview/preview.tsx
@@ -72,6 +72,9 @@ const SectionsEditor = lazy(() =>
   })),
 );
 
+/** 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,
@@ -543,8 +546,7 @@ export function PreviewContent() {
                           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"
-                          onMouseDown={(e) => {
-                            e.preventDefault();
+                          onClick={() => {
                             setPagesOpen(false);
                             setCurrentPath(page.path);
                             // Navigate the iframe
@@ -626,7 +628,6 @@ export function PreviewContent() {
                 branch={branch}
                 currentPath={currentPath}
                 onSaved={() => {
-                  // Wait for the dev server to pick up the file change before reloading
                   setTimeout(() => {
                     const iframe = previewIframeRef.current;
                     if (!iframe) return;
@@ -653,7 +654,7 @@ export function PreviewContent() {
                     };
                     iframe.addEventListener("load", restore);
                     setTimeout(restore, 3000);
-                  }, 500);
+                  }, DEV_SERVER_SETTLE_MS);
                 }}
               />
             </Suspense>
@@ -758,6 +759,15 @@ export function PreviewContent() {
                   // 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();
                 }

From 5ff4dae5aeb9e30d1225d1c66adb3ab903359571 Mon Sep 17 00:00:00 2001
From: guitavano <tavano62@gmail.com>
Date: Tue, 19 May 2026 13:22:07 -0300
Subject: [PATCH 05/12] fix(sections-editor): prevent iframe reload from
 stealing input focus

When editing fields in the sections editor, the iframe reload after
autosave was stealing focus from the active input, forcing users to
click back into the field. Fix by tracking the last focused element
via a document-level blur/focusin listener and restoring it when focus
escapes into the cross-origin iframe.

Also fix array field key instability (included items.length in key,
causing unnecessary remounts) and strip --unstable-hmr from deno task
definitions in sandbox clones (crashes inside containers).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../sections-editor/fields/array-field.tsx    |   5 +-
 .../src/web/components/vm/preview/preview.tsx |  43 ++++++++
 packages/sandbox/daemon/setup/orchestrator.ts |  13 +++
 .../daemon/setup/sanitize-deno.test.ts        | 100 ++++++++++++++++++
 .../sandbox/daemon/setup/sanitize-deno.ts     |  64 +++++++++++
 5 files changed, 221 insertions(+), 4 deletions(-)
 create mode 100644 packages/sandbox/daemon/setup/sanitize-deno.test.ts
 create mode 100644 packages/sandbox/daemon/setup/sanitize-deno.ts

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
index 5257c62070..ace87891b0 100644
--- a/apps/mesh/src/web/components/sections-editor/fields/array-field.tsx
+++ b/apps/mesh/src/web/components/sections-editor/fields/array-field.tsx
@@ -54,10 +54,7 @@ export function ArrayField({
         <p className="text-xs text-muted-foreground">{schema.description}</p>
       )}
       {items.map((item, i) => (
-        <div
-          key={`${path}.${i}.${items.length}`}
-          className="border rounded-md p-3 relative"
-        >
+        <div key={`${path}.${i}`} className="border rounded-md p-3 relative">
           <Button
             type="button"
             variant="ghost"
diff --git a/apps/mesh/src/web/components/vm/preview/preview.tsx b/apps/mesh/src/web/components/vm/preview/preview.tsx
index 75528f235e..0b6f5cbf0f 100644
--- a/apps/mesh/src/web/components/vm/preview/preview.tsx
+++ b/apps/mesh/src/web/components/vm/preview/preview.tsx
@@ -118,6 +118,9 @@ export function PreviewContent() {
 
   // 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);
@@ -395,6 +398,45 @@ export function PreviewContent() {
     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;
@@ -750,6 +792,7 @@ export function PreviewContent() {
               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/>.
diff --git a/packages/sandbox/daemon/setup/orchestrator.ts b/packages/sandbox/daemon/setup/orchestrator.ts
index f71c661af0..cd10aebbce 100644
--- a/packages/sandbox/daemon/setup/orchestrator.ts
+++ b/packages/sandbox/daemon/setup/orchestrator.ts
@@ -28,6 +28,7 @@ import { configureGitIdentity } from "./identity";
 import { spawnInstall } from "./install";
 import { spawnSetupStep } from "./spawn-step";
 import { installProtectedBranchHook } from "../git/protect-branch";
+import { sanitizeDenoTasks } from "./sanitize-deno";
 
 const INSTALL_LOG_MAX_BYTES = 10 * 1024 * 1024;
 
@@ -350,6 +351,18 @@ export class SetupOrchestrator {
       );
       return;
     }
+    if (config.application?.packageManager?.name === "deno") {
+      const cwd = resolvePmRoot(
+        config.repoDir,
+        config.application?.packageManager?.path,
+      );
+      if (sanitizeDenoTasks(cwd)) {
+        this.chunk(
+          "[orchestrator] stripped --unstable-hmr from deno tasks\r\n",
+        );
+      }
+    }
+
     const command = this.buildStartCommand(config);
     if (!command) {
       const reason = this.diagnoseNoStartCommand(config);
diff --git a/packages/sandbox/daemon/setup/sanitize-deno.test.ts b/packages/sandbox/daemon/setup/sanitize-deno.test.ts
new file mode 100644
index 0000000000..958a08a0ae
--- /dev/null
+++ b/packages/sandbox/daemon/setup/sanitize-deno.test.ts
@@ -0,0 +1,100 @@
+import { describe, expect, it } from "bun:test";
+import fs from "node:fs";
+import { mkdtempSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { sanitizeDenoTasks } from "./sanitize-deno";
+
+function makeTmp(): { dir: string; cleanup: () => void } {
+  const dir = mkdtempSync(join(tmpdir(), "sanitize-deno-"));
+  return { dir, cleanup: () => rmSync(dir, { recursive: true, force: true }) };
+}
+
+describe("sanitizeDenoTasks", () => {
+  it("strips --unstable-hmr from task values", () => {
+    const { dir, cleanup } = makeTmp();
+    try {
+      fs.writeFileSync(
+        join(dir, "deno.json"),
+        JSON.stringify({
+          tasks: {
+            dev: "deno run --unstable-hmr main.ts",
+            start: "deno run main.ts",
+          },
+        }),
+      );
+      const changed = sanitizeDenoTasks(dir);
+      expect(changed).toBe(true);
+
+      const result = JSON.parse(
+        fs.readFileSync(join(dir, "deno.json"), "utf-8"),
+      );
+      expect(result.tasks.dev).toBe("deno run main.ts");
+      expect(result.tasks.start).toBe("deno run main.ts");
+    } finally {
+      cleanup();
+    }
+  });
+
+  it("strips --unstable-hmr with a value (--unstable-hmr=...)", () => {
+    const { dir, cleanup } = makeTmp();
+    try {
+      fs.writeFileSync(
+        join(dir, "deno.json"),
+        JSON.stringify({
+          tasks: { dev: "deno run --unstable-hmr=./src main.ts" },
+        }),
+      );
+      const changed = sanitizeDenoTasks(dir);
+      expect(changed).toBe(true);
+
+      const result = JSON.parse(
+        fs.readFileSync(join(dir, "deno.json"), "utf-8"),
+      );
+      expect(result.tasks.dev).toBe("deno run main.ts");
+    } finally {
+      cleanup();
+    }
+  });
+
+  it("returns false when no banned flags are present", () => {
+    const { dir, cleanup } = makeTmp();
+    try {
+      fs.writeFileSync(
+        join(dir, "deno.json"),
+        JSON.stringify({ tasks: { dev: "deno run main.ts" } }),
+      );
+      expect(sanitizeDenoTasks(dir)).toBe(false);
+    } finally {
+      cleanup();
+    }
+  });
+
+  it("returns false when no deno.json exists", () => {
+    const { dir, cleanup } = makeTmp();
+    try {
+      expect(sanitizeDenoTasks(dir)).toBe(false);
+    } finally {
+      cleanup();
+    }
+  });
+
+  it("handles deno.jsonc as well", () => {
+    const { dir, cleanup } = makeTmp();
+    try {
+      fs.writeFileSync(
+        join(dir, "deno.jsonc"),
+        JSON.stringify({ tasks: { dev: "deno run --unstable-hmr server.ts" } }),
+      );
+      const changed = sanitizeDenoTasks(dir);
+      expect(changed).toBe(true);
+
+      const result = JSON.parse(
+        fs.readFileSync(join(dir, "deno.jsonc"), "utf-8"),
+      );
+      expect(result.tasks.dev).toBe("deno run server.ts");
+    } finally {
+      cleanup();
+    }
+  });
+});
diff --git a/packages/sandbox/daemon/setup/sanitize-deno.ts b/packages/sandbox/daemon/setup/sanitize-deno.ts
new file mode 100644
index 0000000000..418328f817
--- /dev/null
+++ b/packages/sandbox/daemon/setup/sanitize-deno.ts
@@ -0,0 +1,64 @@
+import fs from "node:fs";
+import { join } from "node:path";
+
+const DENO_MANIFESTS = ["deno.json", "deno.jsonc"] as const;
+
+/**
+ * Flags that should be stripped from Deno task definitions in the sandbox.
+ * `--unstable-hmr` relies on filesystem watchers that don't work inside
+ * containers and causes Deno to crash or hang on startup.
+ */
+const BANNED_FLAGS = ["--unstable-hmr"];
+
+const BANNED_RE = new RegExp(
+  BANNED_FLAGS.map((f) => `\\s*${f.replace(/-/g, "\\-")}(?:=[^\\s]*)?`).join(
+    "|",
+  ),
+  "g",
+);
+
+/**
+ * Remove banned flags (e.g. `--unstable-hmr`) from every task value in
+ * `deno.json` / `deno.jsonc`. Writes the file back only when something
+ * actually changed. Returns `true` if the file was modified.
+ */
+export function sanitizeDenoTasks(appRoot: string): boolean {
+  for (const filename of DENO_MANIFESTS) {
+    const filepath = join(appRoot, filename);
+    let raw: string;
+    try {
+      raw = fs.readFileSync(filepath, "utf-8");
+    } catch {
+      continue;
+    }
+
+    let parsed: { tasks?: Record<string, string> };
+    try {
+      parsed = JSON.parse(raw);
+    } catch {
+      continue;
+    }
+
+    const tasks = parsed.tasks;
+    if (!tasks || typeof tasks !== "object") continue;
+
+    let changed = false;
+    for (const [name, cmd] of Object.entries(tasks)) {
+      if (typeof cmd !== "string") continue;
+      const cleaned = cmd
+        .replace(BANNED_RE, "")
+        .replace(/\s{2,}/g, " ")
+        .trim();
+      if (cleaned !== cmd) {
+        tasks[name] = cleaned;
+        changed = true;
+      }
+    }
+
+    if (changed) {
+      fs.writeFileSync(filepath, JSON.stringify(parsed, null, 2) + "\n");
+      return true;
+    }
+  }
+  return false;
+}

From 9e0b092e0677f566f165955effe47d828d0d8951 Mon Sep 17 00:00:00 2001
From: guitavano <tavano62@gmail.com>
Date: Tue, 19 May 2026 13:31:06 -0300
Subject: [PATCH 06/12] fix(sections-editor): remove unused variable in
 enum-field

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/web/components/sections-editor/fields/enum-field.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 4ebb6bc40a..df335b8297 100644
--- a/apps/mesh/src/web/components/sections-editor/fields/enum-field.tsx
+++ b/apps/mesh/src/web/components/sections-editor/fields/enum-field.tsx
@@ -36,7 +36,7 @@ export function EnumField({
           <SelectValue placeholder="Select..." />
         </SelectTrigger>
         <SelectContent>
-          {options.map((opt, i) => (
+          {options.map((opt) => (
             <SelectItem key={String(opt)} value={String(opt)}>
               {String(opt)}
             </SelectItem>

From ed133481645ad12263821f8932d0ead3e3491cbf Mon Sep 17 00:00:00 2001
From: guitavano <tavano62@gmail.com>
Date: Tue, 19 May 2026 13:37:21 -0300
Subject: [PATCH 07/12] fix(sections-editor): resolve lint errors for ref
 assignments and unsafe optional chaining

Replace useRef-based previous-value pattern with useState to avoid
banned ref.current access during render; add lint suppression for the
legitimate latestRef sync; fix unsafe optional chaining in resolve-schema.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/sections-editor/resolve-schema.ts    |  6 +++---
 .../components/sections-editor/sections-editor.tsx  | 13 +++++++------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/apps/mesh/src/web/components/sections-editor/resolve-schema.ts b/apps/mesh/src/web/components/sections-editor/resolve-schema.ts
index 73e2ffcd35..f781fea770 100644
--- a/apps/mesh/src/web/components/sections-editor/resolve-schema.ts
+++ b/apps/mesh/src/web/components/sections-editor/resolve-schema.ts
@@ -211,9 +211,9 @@ export function resolveSchema(
         });
         if (loaderBranches.length > 0) {
           const anyOfRefs = loaderBranches.map((branch) => {
-            const rtEnum = (
-              (branch.properties as RawSchema)?.__resolveType as RawSchema
-            ).enum as unknown[];
+            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,
diff --git a/apps/mesh/src/web/components/sections-editor/sections-editor.tsx b/apps/mesh/src/web/components/sections-editor/sections-editor.tsx
index ec9a4fd625..5958ba97a1 100644
--- a/apps/mesh/src/web/components/sections-editor/sections-editor.tsx
+++ b/apps/mesh/src/web/components/sections-editor/sections-editor.tsx
@@ -41,11 +41,11 @@ function PageHeaderInputs({
 }) {
   const [name, setName] = useState(initialName);
   const [path, setPath] = useState(initialPath);
-  const prevKeyRef = useRef(pageKey);
+  const [prevKey, setPrevKey] = useState(pageKey);
 
   // Reset local state when navigating to a different page
-  if (prevKeyRef.current !== pageKey) {
-    prevKeyRef.current = pageKey;
+  if (prevKey !== pageKey) {
+    setPrevKey(pageKey);
     setName(initialName);
     setPath(initialPath);
   }
@@ -176,9 +176,9 @@ export function SectionsEditor({
   );
 
   // Reset form state when the active page changes
-  const prevPathRef = useRef(currentPath);
-  if (prevPathRef.current !== currentPath) {
-    prevPathRef.current = currentPath;
+  const [prevPath, setPrevPath] = useState(currentPath);
+  if (prevPath !== currentPath) {
+    setPrevPath(currentPath);
     setSelectedSectionIndex(null);
     setFormValue(null);
     setActiveResolveType(null);
@@ -233,6 +233,7 @@ export function SectionsEditor({
   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 };
 
   const activeSchema =

From 496a9e30abbd633f0479041fb543f059e1d4bb90 Mon Sep 17 00:00:00 2001
From: guitavano <tavano62@gmail.com>
Date: Tue, 19 May 2026 13:43:16 -0300
Subject: [PATCH 08/12] fix(sections-editor): remove unused file and unexport
 dead exports

Delete unused save-bar.tsx, unexport PageList and LAZY_SUFFIXES which
have no external consumers.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/sections-editor/page-list.tsx  |  2 +-
 .../components/sections-editor/save-bar.tsx   | 28 -------------------
 .../sections-editor/section-list.tsx          |  2 +-
 3 files changed, 2 insertions(+), 30 deletions(-)
 delete mode 100644 apps/mesh/src/web/components/sections-editor/save-bar.tsx

diff --git a/apps/mesh/src/web/components/sections-editor/page-list.tsx b/apps/mesh/src/web/components/sections-editor/page-list.tsx
index eb594a45b3..a92c5cb8fc 100644
--- a/apps/mesh/src/web/components/sections-editor/page-list.tsx
+++ b/apps/mesh/src/web/components/sections-editor/page-list.tsx
@@ -44,7 +44,7 @@ export function extractPages(decofile: Record<string, unknown>): PageEntry[] {
   return pages;
 }
 
-export function PageList({
+function PageList({
   pages,
   selectedKey,
   onSelect,
diff --git a/apps/mesh/src/web/components/sections-editor/save-bar.tsx b/apps/mesh/src/web/components/sections-editor/save-bar.tsx
deleted file mode 100644
index 04f236208d..0000000000
--- a/apps/mesh/src/web/components/sections-editor/save-bar.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Button } from "@deco/ui/components/button.tsx";
-import { Loading01 } from "@untitledui/icons";
-
-export function SaveBar({
-  dirty,
-  saving,
-  onSave,
-  onDiscard,
-}: {
-  dirty: boolean;
-  saving: boolean;
-  onSave: () => void;
-  onDiscard: () => void;
-}) {
-  if (!dirty) return null;
-
-  return (
-    <div className="sticky bottom-0 border-t bg-background px-4 py-2 flex items-center justify-end gap-2">
-      <Button type="button" variant="outline" size="sm" onClick={onDiscard}>
-        Discard
-      </Button>
-      <Button type="button" size="sm" onClick={onSave} disabled={saving}>
-        {saving && <Loading01 size={14} className="animate-spin mr-1.5" />}
-        Save
-      </Button>
-    </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
index 535cc3dc50..1d34c7fe7b 100644
--- a/apps/mesh/src/web/components/sections-editor/section-list.tsx
+++ b/apps/mesh/src/web/components/sections-editor/section-list.tsx
@@ -46,7 +46,7 @@ interface RawSection {
 
 // ─── parsing helpers ───────────────────────────────────────────────────────────
 
-export const LAZY_SUFFIXES = [
+const LAZY_SUFFIXES = [
   "website/sections/Rendering/Lazy.tsx",
   "website/sections/Rendering/SingleDeferred.tsx",
 ];

From 0b3766c6e8a76022e234ef129cace00fb678fa6f Mon Sep 17 00:00:00 2001
From: guitavano <tavano62@gmail.com>
Date: Tue, 19 May 2026 13:53:06 -0300
Subject: [PATCH 09/12] fix: move HeaderActions inside ActiveTaskProvider and
 remove sanitize-deno

Move VirtualMcpHeaderInfo inside Chat.ActiveTaskProvider so HeaderActions
can access useChatStream. Remove sanitize-deno module and its usage in
the orchestrator.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../web/layouts/agent-shell-layout/index.tsx  |   2 +-
 packages/sandbox/daemon/setup/orchestrator.ts |  13 ---
 .../daemon/setup/sanitize-deno.test.ts        | 100 ------------------
 .../sandbox/daemon/setup/sanitize-deno.ts     |  64 -----------
 4 files changed, 1 insertion(+), 178 deletions(-)
 delete mode 100644 packages/sandbox/daemon/setup/sanitize-deno.test.ts
 delete mode 100644 packages/sandbox/daemon/setup/sanitize-deno.ts

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/packages/sandbox/daemon/setup/orchestrator.ts b/packages/sandbox/daemon/setup/orchestrator.ts
index cd10aebbce..f71c661af0 100644
--- a/packages/sandbox/daemon/setup/orchestrator.ts
+++ b/packages/sandbox/daemon/setup/orchestrator.ts
@@ -28,7 +28,6 @@ import { configureGitIdentity } from "./identity";
 import { spawnInstall } from "./install";
 import { spawnSetupStep } from "./spawn-step";
 import { installProtectedBranchHook } from "../git/protect-branch";
-import { sanitizeDenoTasks } from "./sanitize-deno";
 
 const INSTALL_LOG_MAX_BYTES = 10 * 1024 * 1024;
 
@@ -351,18 +350,6 @@ export class SetupOrchestrator {
       );
       return;
     }
-    if (config.application?.packageManager?.name === "deno") {
-      const cwd = resolvePmRoot(
-        config.repoDir,
-        config.application?.packageManager?.path,
-      );
-      if (sanitizeDenoTasks(cwd)) {
-        this.chunk(
-          "[orchestrator] stripped --unstable-hmr from deno tasks\r\n",
-        );
-      }
-    }
-
     const command = this.buildStartCommand(config);
     if (!command) {
       const reason = this.diagnoseNoStartCommand(config);
diff --git a/packages/sandbox/daemon/setup/sanitize-deno.test.ts b/packages/sandbox/daemon/setup/sanitize-deno.test.ts
deleted file mode 100644
index 958a08a0ae..0000000000
--- a/packages/sandbox/daemon/setup/sanitize-deno.test.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import { describe, expect, it } from "bun:test";
-import fs from "node:fs";
-import { mkdtempSync, rmSync } from "node:fs";
-import { tmpdir } from "node:os";
-import { join } from "node:path";
-import { sanitizeDenoTasks } from "./sanitize-deno";
-
-function makeTmp(): { dir: string; cleanup: () => void } {
-  const dir = mkdtempSync(join(tmpdir(), "sanitize-deno-"));
-  return { dir, cleanup: () => rmSync(dir, { recursive: true, force: true }) };
-}
-
-describe("sanitizeDenoTasks", () => {
-  it("strips --unstable-hmr from task values", () => {
-    const { dir, cleanup } = makeTmp();
-    try {
-      fs.writeFileSync(
-        join(dir, "deno.json"),
-        JSON.stringify({
-          tasks: {
-            dev: "deno run --unstable-hmr main.ts",
-            start: "deno run main.ts",
-          },
-        }),
-      );
-      const changed = sanitizeDenoTasks(dir);
-      expect(changed).toBe(true);
-
-      const result = JSON.parse(
-        fs.readFileSync(join(dir, "deno.json"), "utf-8"),
-      );
-      expect(result.tasks.dev).toBe("deno run main.ts");
-      expect(result.tasks.start).toBe("deno run main.ts");
-    } finally {
-      cleanup();
-    }
-  });
-
-  it("strips --unstable-hmr with a value (--unstable-hmr=...)", () => {
-    const { dir, cleanup } = makeTmp();
-    try {
-      fs.writeFileSync(
-        join(dir, "deno.json"),
-        JSON.stringify({
-          tasks: { dev: "deno run --unstable-hmr=./src main.ts" },
-        }),
-      );
-      const changed = sanitizeDenoTasks(dir);
-      expect(changed).toBe(true);
-
-      const result = JSON.parse(
-        fs.readFileSync(join(dir, "deno.json"), "utf-8"),
-      );
-      expect(result.tasks.dev).toBe("deno run main.ts");
-    } finally {
-      cleanup();
-    }
-  });
-
-  it("returns false when no banned flags are present", () => {
-    const { dir, cleanup } = makeTmp();
-    try {
-      fs.writeFileSync(
-        join(dir, "deno.json"),
-        JSON.stringify({ tasks: { dev: "deno run main.ts" } }),
-      );
-      expect(sanitizeDenoTasks(dir)).toBe(false);
-    } finally {
-      cleanup();
-    }
-  });
-
-  it("returns false when no deno.json exists", () => {
-    const { dir, cleanup } = makeTmp();
-    try {
-      expect(sanitizeDenoTasks(dir)).toBe(false);
-    } finally {
-      cleanup();
-    }
-  });
-
-  it("handles deno.jsonc as well", () => {
-    const { dir, cleanup } = makeTmp();
-    try {
-      fs.writeFileSync(
-        join(dir, "deno.jsonc"),
-        JSON.stringify({ tasks: { dev: "deno run --unstable-hmr server.ts" } }),
-      );
-      const changed = sanitizeDenoTasks(dir);
-      expect(changed).toBe(true);
-
-      const result = JSON.parse(
-        fs.readFileSync(join(dir, "deno.jsonc"), "utf-8"),
-      );
-      expect(result.tasks.dev).toBe("deno run server.ts");
-    } finally {
-      cleanup();
-    }
-  });
-});
diff --git a/packages/sandbox/daemon/setup/sanitize-deno.ts b/packages/sandbox/daemon/setup/sanitize-deno.ts
deleted file mode 100644
index 418328f817..0000000000
--- a/packages/sandbox/daemon/setup/sanitize-deno.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import fs from "node:fs";
-import { join } from "node:path";
-
-const DENO_MANIFESTS = ["deno.json", "deno.jsonc"] as const;
-
-/**
- * Flags that should be stripped from Deno task definitions in the sandbox.
- * `--unstable-hmr` relies on filesystem watchers that don't work inside
- * containers and causes Deno to crash or hang on startup.
- */
-const BANNED_FLAGS = ["--unstable-hmr"];
-
-const BANNED_RE = new RegExp(
-  BANNED_FLAGS.map((f) => `\\s*${f.replace(/-/g, "\\-")}(?:=[^\\s]*)?`).join(
-    "|",
-  ),
-  "g",
-);
-
-/**
- * Remove banned flags (e.g. `--unstable-hmr`) from every task value in
- * `deno.json` / `deno.jsonc`. Writes the file back only when something
- * actually changed. Returns `true` if the file was modified.
- */
-export function sanitizeDenoTasks(appRoot: string): boolean {
-  for (const filename of DENO_MANIFESTS) {
-    const filepath = join(appRoot, filename);
-    let raw: string;
-    try {
-      raw = fs.readFileSync(filepath, "utf-8");
-    } catch {
-      continue;
-    }
-
-    let parsed: { tasks?: Record<string, string> };
-    try {
-      parsed = JSON.parse(raw);
-    } catch {
-      continue;
-    }
-
-    const tasks = parsed.tasks;
-    if (!tasks || typeof tasks !== "object") continue;
-
-    let changed = false;
-    for (const [name, cmd] of Object.entries(tasks)) {
-      if (typeof cmd !== "string") continue;
-      const cleaned = cmd
-        .replace(BANNED_RE, "")
-        .replace(/\s{2,}/g, " ")
-        .trim();
-      if (cleaned !== cmd) {
-        tasks[name] = cleaned;
-        changed = true;
-      }
-    }
-
-    if (changed) {
-      fs.writeFileSync(filepath, JSON.stringify(parsed, null, 2) + "\n");
-      return true;
-    }
-  }
-  return false;
-}

From 585c64e786e26e8a011e481d9e7bec68ab63a4f5 Mon Sep 17 00:00:00 2001
From: guitavano <tavano62@gmail.com>
Date: Tue, 19 May 2026 14:44:42 -0300
Subject: [PATCH 10/12] feat(sections-editor): add variant rule editing,
 matcher picker, and page search

- Replace simple matcherLabel with comprehensive formatMatcher supporting
  device, date, random, host, pathname, location, and multi matchers
- Add MatcherPicker component (CommandDialog) to change matcher type per variant
- Show SchemaForm for variant rule editing with debounced auto-save
- Add search input to pages dropdown and show all pages (no height cap)
- Sort pages alphabetically and show current pathname in URL bar

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../sections-editor/matcher-picker.tsx        | 126 ++++++
 .../components/sections-editor/page-list.tsx  |  54 +--
 .../sections-editor/sections-editor.tsx       | 405 +++++++++++++++++-
 .../src/web/components/vm/preview/preview.tsx | 121 ++++--
 4 files changed, 619 insertions(+), 87 deletions(-)
 create mode 100644 apps/mesh/src/web/components/sections-editor/matcher-picker.tsx

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..41dbaba302
--- /dev/null
+++ b/apps/mesh/src/web/components/sections-editor/matcher-picker.tsx
@@ -0,0 +1,126 @@
+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" and "never" — always is hardcoded, never isn't user-selectable
+      if (resolveType.includes("always") || resolveType.includes("never"))
+        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
index a92c5cb8fc..45b061f235 100644
--- a/apps/mesh/src/web/components/sections-editor/page-list.tsx
+++ b/apps/mesh/src/web/components/sections-editor/page-list.tsx
@@ -1,5 +1,3 @@
-import { cn } from "@deco/ui/lib/utils.js";
-
 interface PageEntry {
   key: string;
   name: string;
@@ -27,15 +25,24 @@ function parsePageName(key: string): string {
   }
 }
 
+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.path === "string" && Array.isArray(obj.sections)) {
+      if (
+        typeof obj.__resolveType === "string" &&
+        PAGE_RESOLVE_TYPES.has(obj.__resolveType) &&
+        typeof obj.path === "string"
+      ) {
         pages.push({
           key,
-          name: parsePageName(key),
+          name: typeof obj.name === "string" ? obj.name : parsePageName(key),
           path: obj.path,
         });
       }
@@ -43,42 +50,3 @@ export function extractPages(decofile: Record<string, unknown>): PageEntry[] {
   }
   return pages;
 }
-
-function PageList({
-  pages,
-  selectedKey,
-  onSelect,
-}: {
-  pages: PageEntry[];
-  selectedKey: string | null;
-  onSelect: (key: string) => void;
-}) {
-  if (pages.length === 0) {
-    return (
-      <p className="text-xs text-muted-foreground px-2 py-3">No pages found.</p>
-    );
-  }
-
-  return (
-    <div className="space-y-0.5">
-      {pages.map((page) => (
-        <button
-          key={page.key}
-          type="button"
-          onClick={() => onSelect(page.key)}
-          className={cn(
-            "w-full text-left px-2 py-1.5 rounded-md text-sm transition-colors",
-            selectedKey === page.key
-              ? "bg-accent text-accent-foreground"
-              : "hover:bg-muted",
-          )}
-        >
-          <div className="font-medium truncate">{page.name}</div>
-          <div className="text-xs text-muted-foreground truncate">
-            {page.path}
-          </div>
-        </button>
-      ))}
-    </div>
-  );
-}
diff --git a/apps/mesh/src/web/components/sections-editor/sections-editor.tsx b/apps/mesh/src/web/components/sections-editor/sections-editor.tsx
index 5958ba97a1..61ac3ab024 100644
--- a/apps/mesh/src/web/components/sections-editor/sections-editor.tsx
+++ b/apps/mesh/src/web/components/sections-editor/sections-editor.tsx
@@ -1,6 +1,7 @@
 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";
@@ -11,6 +12,7 @@ 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;
@@ -24,6 +26,199 @@ interface RawSection {
 
 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.
@@ -174,6 +369,12 @@ export function SectionsEditor({
   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);
@@ -182,11 +383,15 @@ export function SectionsEditor({
     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>>({});
 
@@ -197,11 +402,15 @@ export function SectionsEditor({
     parsedSections: ParsedSection[];
     decofile: Record<string, unknown>;
     activePageKey: string | null;
+    pageVariants: PageVariant[];
+    variantIndex: number;
   }>({
     rawSections: [],
     parsedSections: [],
     decofile: {},
     activePageKey: null,
+    pageVariants: [],
+    variantIndex: 0,
   });
 
   if (decofileLoading || metaLoading) {
@@ -227,14 +436,28 @@ export function SectionsEditor({
 
   const pageData =
     activePageKey && decofile[activePageKey]
-      ? (decofile[activePageKey] as { sections?: RawSection[] })
+      ? (decofile[activePageKey] as Record<string, unknown>)
       : null;
-  const rawSections: RawSection[] = pageData?.sections ?? [];
+  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 };
+  latestRef.current = {
+    rawSections,
+    parsedSections,
+    decofile,
+    activePageKey,
+    pageVariants,
+    variantIndex: safeVariantIndex,
+  };
 
   const activeSchema =
     activeResolveType && meta ? resolveSchema(activeResolveType, meta) : null;
@@ -251,6 +474,8 @@ export function SectionsEditor({
         parsedSections: latestParsedSections,
         decofile: latestDecofile,
         activePageKey: latestPageKey,
+        pageVariants: latestVariants,
+        variantIndex: latestVariantIndex,
       } = latestRef.current;
       const rawSection = latestRawSections[sectionIndex];
       if (!rawSection) return;
@@ -311,7 +536,27 @@ export function SectionsEditor({
         updatedSections[sectionIndex] = nextValue as RawSection;
       }
 
-      fullPageData.sections = updatedSections;
+      // 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 },
         {
@@ -376,8 +621,23 @@ export function SectionsEditor({
     const reordered = arrayMove([...rawSections], fromIndex, toIndex);
     const fullPageData = {
       ...(decofile[activePageKey] as Record<string, unknown>),
-      sections: reordered,
     };
+    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 },
       {
@@ -387,6 +647,81 @@ export function SectionsEditor({
     );
   };
 
+  // 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">
@@ -429,6 +764,42 @@ export function SectionsEditor({
         )}
       </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">
@@ -446,6 +817,30 @@ export function SectionsEditor({
         </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}
diff --git a/apps/mesh/src/web/components/vm/preview/preview.tsx b/apps/mesh/src/web/components/vm/preview/preview.tsx
index 0b6f5cbf0f..e70cd27f20 100644
--- a/apps/mesh/src/web/components/vm/preview/preview.tsx
+++ b/apps/mesh/src/web/components/vm/preview/preview.tsx
@@ -124,6 +124,7 @@ export function PreviewContent() {
 
   // 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)
@@ -138,7 +139,9 @@ export function PreviewContent() {
 
   // Decofile pages for the URL bar dropdown
   const { data: decofile } = useDecofile(previewUrl);
-  const pages = decofile ? extractPages(decofile) : [];
+  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();
@@ -391,8 +394,10 @@ export function PreviewContent() {
   useEffect(() => {
     if (!pagesOpen) return;
     const handler = (e: PointerEvent) => {
-      if (!pagesContainerRef.current?.contains(e.target as Node))
+      if (!pagesContainerRef.current?.contains(e.target as Node)) {
         setPagesOpen(false);
+        setPagesSearch("");
+      }
     };
     document.addEventListener("pointerdown", handler);
     return () => document.removeEventListener("pointerdown", handler);
@@ -486,7 +491,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;
     }
@@ -507,18 +513,20 @@ export function PreviewContent() {
                 className="shrink-0 bg-foreground/4.5"
               />
             )}
-            <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>
+            {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 */}
@@ -581,31 +589,66 @@ export function PreviewContent() {
 
               {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">
-                  <ScrollArea className="max-h-80">
+                  <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.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);
-                            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>
-                      ))}
+                      {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>

From 50c1178188f608b337db8f7f00cc000f1dc83ce9 Mon Sep 17 00:00:00 2001
From: guitavano <tavano62@gmail.com>
Date: Tue, 19 May 2026 14:47:43 -0300
Subject: [PATCH 11/12] fix: resolve lint errors for exhaustive-deps and cn
 classname

- Stabilize flush via useRef to avoid useEffect re-firing every render
- Use cn() for conditional className in pages dropdown chevron
- Add missing cn import to preview.tsx

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../common/use-multipart-decision-form.ts     | 22 +++++++++++--------
 .../src/web/components/vm/preview/preview.tsx |  6 ++++-
 2 files changed, 18 insertions(+), 10 deletions(-)

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/vm/preview/preview.tsx b/apps/mesh/src/web/components/vm/preview/preview.tsx
index e70cd27f20..31be894be3 100644
--- a/apps/mesh/src/web/components/vm/preview/preview.tsx
+++ b/apps/mesh/src/web/components/vm/preview/preview.tsx
@@ -21,6 +21,7 @@ import {
   RefreshCw01,
   Server01,
 } from "@untitledui/icons";
+import { cn } from "@deco/ui/lib/utils.js";
 import { Button } from "@deco/ui/components/button.tsx";
 import {
   ViewModeToggle,
@@ -582,7 +583,10 @@ export function PreviewContent() {
                 {pages.length > 0 && (
                   <ChevronDown
                     size={12}
-                    className={`shrink-0 text-muted-foreground transition-transform ${pagesOpen ? "rotate-180" : ""}`}
+                    className={cn(
+                      "shrink-0 text-muted-foreground transition-transform",
+                      pagesOpen && "rotate-180",
+                    )}
                   />
                 )}
               </button>

From ebee5f911212965c3e616dc2ca7d9886776d2c60 Mon Sep 17 00:00:00 2001
From: guitavano <tavano62@gmail.com>
Date: Tue, 19 May 2026 15:11:06 -0300
Subject: [PATCH 12/12] fix(sections-editor): allow "never" matcher to be
 selectable in picker

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/web/components/sections-editor/matcher-picker.tsx    | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/mesh/src/web/components/sections-editor/matcher-picker.tsx b/apps/mesh/src/web/components/sections-editor/matcher-picker.tsx
index 41dbaba302..9c60f53d4a 100644
--- a/apps/mesh/src/web/components/sections-editor/matcher-picker.tsx
+++ b/apps/mesh/src/web/components/sections-editor/matcher-picker.tsx
@@ -28,9 +28,8 @@ export function extractMatchers(meta: LiveMeta): MatcherEntry[] {
   for (const [blockType, blockMap] of Object.entries(blocks)) {
     if (!blockType.includes("matchers")) continue;
     for (const resolveType of Object.keys(blockMap)) {
-      // Skip "always" and "never" — always is hardcoded, never isn't user-selectable
-      if (resolveType.includes("always") || resolveType.includes("never"))
-        continue;
+      // 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