@agent-native/core 0.84.10 → 0.84.13

package/corpus/templates/design/actions/edit-design.ts

@@ -139,20 +139,31 @@ export default defineAction({
     "`replace` adds the wrapper around the original text. For broad copy-only " +
     'changes such as translating all visible text, use `mode: "replace-file"` ' +
     "with `replacementContent`: the complete updated file content copied from " +
-    "the snapshot with only the requested copy changed. Use `generate-design` " +
-    "instead only for brand-new files or large structural rewrites.",
+    "the snapshot with only the requested copy changed. After a variant pick " +
+    "or any other selected-screen follow-up, pass the exact `fileId` from " +
+    '`get-design-snapshot` and use `mode: "replace-file"` when replacing ' +
+    "the representative placeholder with the full chosen direction. Use " +
+    "`generate-design` instead only for brand-new files.",
   schema: z
     .object({
       designId: z.string().describe("Design project ID"),
+      fileId: z
+        .string()
+        .optional()
+        .describe(
+          "Optional exact design file ID to edit. Use this after a variant pick or selected-screen snapshot; when provided, it wins over filename.",
+        ),
       filename: z
         .string()
-        .default("index.html")
-        .describe("File to edit (e.g. 'index.html')"),
+        .optional()
+        .describe(
+          "File to edit (e.g. 'index.html'). Defaults to index.html only when fileId is omitted.",
+        ),
       mode: z
         .enum(["search-replace", "replace-file"])
         .optional()
         .describe(
-          "Defaults to search-replace. Use replace-file for broad copy-only edits like translating the whole page after reading get-design-snapshot.",
+          "Defaults to search-replace. Use replace-file for selected variant expansion or broad copy-only edits after reading get-design-snapshot.",
         ),
       edits: editBlocksSchema
         .optional()
@@ -164,7 +175,7 @@ export default defineAction({
         .min(1)
         .optional()
         .describe(
-          "Complete updated file content. Use only with mode=replace-file for broad copy-only changes; preserve all HTML structure, CSS, scripts, and tweaks from get-design-snapshot.",
+          "Complete updated file content. Use only with mode=replace-file for selected variant expansion or broad copy-only changes; preserve all HTML structure, CSS, scripts, and tweaks from get-design-snapshot.",
         ),
     })
     .superRefine((value, ctx) => {
@@ -201,16 +212,31 @@ export default defineAction({
         });
       }
     }),
-  run: async ({ designId, filename, edits, mode, replacementContent }) => {
+  run: async ({
+    designId,
+    fileId,
+    filename,
+    edits,
+    mode,
+    replacementContent,
+  }) => {
     await assertAccess("design", designId, "editor");
 
     const db = getDb();
     const now = new Date().toISOString();
+    const requestedFileId = fileId?.trim();
+    const targetFilename = requestedFileId
+      ? undefined
+      : filename?.trim() || "index.html";
+    const targetCondition = requestedFileId
+      ? eq(schema.designFiles.id, requestedFileId)
+      : eq(schema.designFiles.filename, targetFilename!);
 
-    // Resolve the target file (access-scoped) by design + filename.
+    // Resolve the target file (access-scoped) by design + fileId or filename.
     const [file] = await db
       .select({
         id: schema.designFiles.id,
+        filename: schema.designFiles.filename,
         content: schema.designFiles.content,
       })
       .from(schema.designFiles)
@@ -221,14 +247,18 @@ export default defineAction({
       .where(
         and(
           eq(schema.designFiles.designId, designId),
-          eq(schema.designFiles.filename, filename),
+          targetCondition,
           accessFilter(schema.designs, schema.designShares),
         ),
       )
       .limit(1);
 
     if (!file) {
-      throw new Error(`File "${filename}" not found in design ${designId}`);
+      throw new Error(
+        requestedFileId
+          ? `File id "${requestedFileId}" not found in design ${designId}`
+          : `File "${targetFilename}" not found in design ${designId}`,
+      );
     }
 
     // Prefer live collab content so we edit in-flight changes, not a stale
@@ -265,13 +295,13 @@ export default defineAction({
           selection: firstSearch
             ? `[data-edit-target="${firstSearch.slice(0, 40)}"]`
             : null,
-          editingFile: filename,
+          editingFile: file.filename,
           designId,
         });
       } else {
         agentUpdateSelection(file.id, {
           selection: null,
-          editingFile: filename,
+          editingFile: file.filename,
           designId,
         });
       }
@@ -301,7 +331,7 @@ export default defineAction({
 
     return {
       designId,
-      filename,
+      filename: file.filename,
       fileId: file.id,
       mode: resolvedMode,
       editsApplied: applied,

package/corpus/templates/design/actions/export-html.ts

@@ -9,6 +9,7 @@ import {
   exportFilename,
   trySaveExportFile,
 } from "../server/lib/design-export.js";
+import { isBoardFile } from "../shared/board-file.js";
 import "../server/db/index.js"; // ensure registerShareableResource runs
 
 export default defineAction({
@@ -31,12 +32,13 @@ export default defineAction({
       .select()
       .from(schema.designFiles)
       .where(eq(schema.designFiles.designId, id));
+    const exportFiles = files.filter((file) => !isBoardFile(file.filename));
 
-    const html = buildStandaloneHtml({ title: row.title, files });
+    const html = buildStandaloneHtml({ title: row.title, files: exportFiles });
 
     const filename = exportFilename(row.title, "html");
     const saveResult = await trySaveExportFile(filename, html);
 
-    return { html, filename, ...saveResult, fileCount: files.length };
+    return { html, filename, ...saveResult, fileCount: exportFiles.length };
   },
 });

package/corpus/templates/design/actions/export-pdf.ts

@@ -4,6 +4,7 @@ import { eq } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
+import { isBoardFile } from "../shared/board-file.js";
 import "../server/db/index.js"; // ensure registerShareableResource runs
 
 export default defineAction({
@@ -27,6 +28,7 @@ export default defineAction({
       .select()
       .from(schema.designFiles)
       .where(eq(schema.designFiles.designId, id));
+    const exportFiles = files.filter((file) => !isBoardFile(file.filename));
 
     return {
       id: row.id,
@@ -34,7 +36,7 @@ export default defineAction({
       description: row.description,
       projectType: row.projectType,
       data: row.data ?? null,
-      files: files.map((f) => ({
+      files: exportFiles.map((f) => ({
         id: f.id,
         filename: f.filename,
         fileType: f.fileType,

package/corpus/templates/design/actions/export-svg.ts

@@ -10,6 +10,7 @@ import {
   exportFilename,
   trySaveExportFile,
 } from "../server/lib/design-export.js";
+import { isBoardFile } from "../shared/board-file.js";
 import "../server/db/index.js"; // ensure registerShareableResource runs
 
 export default defineAction({
@@ -45,8 +46,9 @@ export default defineAction({
       .select()
       .from(schema.designFiles)
       .where(eq(schema.designFiles.designId, id));
+    const exportFiles = files.filter((file) => !isBoardFile(file.filename));
 
-    const html = buildStandaloneHtml({ title: row.title, files });
+    const html = buildStandaloneHtml({ title: row.title, files: exportFiles });
     const svg = buildSvgForeignObject({
       html,
       width,
@@ -56,6 +58,6 @@ export default defineAction({
     const filename = exportFilename(row.title, "svg");
     const saveResult = await trySaveExportFile(filename, svg);
 
-    return { svg, filename, ...saveResult, fileCount: files.length };
+    return { svg, filename, ...saveResult, fileCount: exportFiles.length };
   },
 });

package/corpus/templates/design/actions/export-zip.ts

@@ -8,6 +8,7 @@ import {
   exportFilename,
   trySaveExportFile,
 } from "../server/lib/design-export.js";
+import { isBoardFile } from "../shared/board-file.js";
 import "../server/db/index.js"; // ensure registerShareableResource runs
 
 const METADATA_ARCHIVE_DIR = "agent-native-metadata";
@@ -40,6 +41,7 @@ export default defineAction({
       .select()
       .from(schema.designFiles)
       .where(eq(schema.designFiles.designId, id));
+    const exportFiles = files.filter((file) => !isBoardFile(file.filename));
 
     // Dynamic import JSZip
     const JSZip = (await import("jszip")).default;
@@ -57,14 +59,14 @@ export default defineAction({
       "",
       "## Files",
       "",
-      ...files.map((f) => `- ${f.filename} (${f.fileType})`),
+      ...exportFiles.map((f) => `- ${f.filename} (${f.fileType})`),
     ].join("\n");
 
     zip.file(`${METADATA_ARCHIVE_DIR}/README.md`, readme);
 
     // Preserve design-relative paths so exported HTML keeps working with
     // sibling CSS/assets. Strip traversal segments defensively for legacy rows.
-    for (const [index, file] of files.entries()) {
+    for (const [index, file] of exportFiles.entries()) {
       const filename = safeArchivePath(
         file.filename,
         `design-file-${index + 1}.txt`,
@@ -84,6 +86,11 @@ export default defineAction({
     const filename = exportFilename(row.title, "zip");
     const saveResult = await trySaveExportFile(filename, zipBuffer);
 
-    return { zipBase64, filename, ...saveResult, fileCount: files.length };
+    return {
+      zipBase64,
+      filename,
+      ...saveResult,
+      fileCount: exportFiles.length,
+    };
   },
 });

package/corpus/templates/design/actions/generate-design.ts

@@ -81,7 +81,8 @@ const generateDesignAgentParameters = {
       type: "string",
       description:
         "JSON array of files to save. Pass one compact, complete, renderable index.html first, e.g. " +
-        '[{"filename":"index.html","fileType":"html","content":"<!doctype html>..."}].',
+        '[{"filename":"index.html","fileType":"html","content":"<!doctype html>..."}]. ' +
+        "Do not use generate-design to replace a selected variant screen after a variant pick; snapshot that fileId and use edit-design instead.",
     },
     designSystemId: {
       type: ["string", "null"],
@@ -117,6 +118,9 @@ const generateDesignAction = defineAction({
     "version then refine individual files with `edit-design` (search/replace) rather " +
     "than resending a big multi-file payload — a single oversized payload can get cut " +
     "off mid-stream and stall the turn. " +
+    "Do not use this action to replace a selected variant screen after a " +
+    "variant pick; call `get-design-snapshot` for the selected `fileId` and " +
+    "`edit-design` that same `fileId` instead. " +
     "Do not report a design as ready until this action succeeds. " +
     "When adding multiple screens or states, pass canvasFrames with filenames " +
     "and x/y/width/height so the new screens appear placed on the overview canvas.",

package/corpus/templates/design/actions/present-design-variants.ts

@@ -41,16 +41,19 @@ const FALLBACK_INSTRUCTIONS =
   "overview board. The chat shows one button per screen. Ask the user to pick " +
   "a screen by name if the inline buttons are not available; after they pick, " +
   "delete the other variant screens, call get-design-snapshot with fileId for " +
-  "the kept screen, and continue from that one file in a bounded pass.";
+  "the kept screen, then call edit-design on that same fileId in a bounded pass. " +
+  'Use mode "replace-file" when expanding the representative placeholder. ' +
+  "Do not call generate-design after a variant pick.";
 
 const VARIANT_PICK_SUBMIT_MESSAGE =
   "Use this design direction. Delete the other variant screens, call " +
   "get-design-snapshot with the selected option's fileId (or filename if " +
-  "needed) for the kept file, then continue from that current HTML in a " +
-  "bounded single-file pass. Prefer edit-design for refinements; if " +
-  "generate-design is needed, update only the kept file compactly. Do not " +
-  "generate a full multi-screen rewrite or resend a huge payload. Stop after " +
-  "the first successful save.";
+  "needed) for the kept file, then call edit-design with that same fileId in " +
+  'a bounded single-file pass. Use mode "replace-file" when replacing the ' +
+  "representative placeholder with the full chosen direction, or search/replace " +
+  "for smaller refinements. Do not call generate-design after a variant pick, " +
+  "do not create index.html, and do not resend a huge payload. Stop after the " +
+  "first successful edit-design save.";
 
 const variantSchema = z.object({
   id: z.string().min(1).describe("Stable variant id, e.g. 'minimal-focus'"),
@@ -421,9 +424,11 @@ export default defineAction({
     "exploration before follow-up refinement. After the user's choice, keep " +
     "the chosen screen, delete the other generated variant screens, and " +
     "call get-design-snapshot with fileId for the kept screen before " +
-    "continuing from that single file in a bounded pass. Prefer edit-design " +
-    "for refinements; if generate-design is needed, update only the kept file " +
-    "compactly and stop after the first successful save. For complex apps, " +
+    "calling edit-design on that same fileId in a bounded pass. Use " +
+    '`mode: "replace-file"` when expanding the representative placeholder ' +
+    "into the full chosen direction. Do not call generate-design after a " +
+    "variant pick. Stop after the first successful edit-design save. For " +
+    "complex apps, " +
     "make each variant a " +
     "compact representative screen; pass concise labels/descriptions/features " +
     "and omit content when full HTML would be too large. Design will render " +
@@ -577,7 +582,7 @@ export default defineAction({
     await writeAppStateForCurrentTab("guided-questions", {
       title: prompt ?? "Pick a direction",
       description:
-        "All options are on the board. Choose one to keep; I will delete the others, read only the kept screen, and continue from that single file in a bounded pass.",
+        "All options are on the board. Choose one to keep; I will delete the others, read only the kept screen, and edit that same file in a bounded pass.",
       submitLabel: "Use selected direction",
       submitMessage: VARIANT_PICK_SUBMIT_MESSAGE,
       skipLabel: "Show another set",
@@ -605,7 +610,7 @@ export default defineAction({
               value:
                 `Keep "${screen.label}" (${screen.filename}, file id ${screen.id}) ` +
                 `from variant set ${variantSetId}. Delete the other variant screens: ${otherScreens}. ` +
-                `Then call get-design-snapshot with designId ${designId} and fileId ${screen.id} (filename ${screen.filename}) and continue from that current HTML in a bounded single-file pass. Prefer edit-design for refinements; if generate-design is needed, update only this kept file compactly. Do not generate a full multi-screen rewrite or resend a huge payload. Stop after the first successful save.`,
+                `Then call get-design-snapshot with designId ${designId} and fileId ${screen.id} (filename ${screen.filename}), then call edit-design with fileId ${screen.id} on that same kept file in a bounded single-file pass. Use mode "replace-file" when replacing the representative placeholder with the full chosen direction, or search/replace for smaller refinements. Do not call generate-design after this variant pick, do not create index.html, and do not resend a huge payload. Stop after the first successful edit-design save.`,
             };
           }),
         },
@@ -623,7 +628,7 @@ export default defineAction({
       embed: true,
       fallbackInstructions: FALLBACK_INSTRUCTIONS,
       nextRequiredAction:
-        "Wait for the user to pick a screen in chat. Then delete the unchosen variant screens with delete-file, call get-design-snapshot with fileId for the chosen screen, and continue from that single file in a bounded pass. Prefer edit-design; if generate-design is needed, update only the kept file compactly and stop after the first successful save.",
+        'Wait for the user to pick a screen in chat. Then delete the unchosen variant screens with delete-file, call get-design-snapshot with fileId for the chosen screen, and call edit-design with that same fileId in a bounded pass. Use mode "replace-file" when expanding the placeholder into the full chosen direction. Do not call generate-design after a variant pick. Stop after the first successful edit-design save.',
     };
   },
   link: ({ result }) => {

package/corpus/templates/design/actions/update-file.ts

@@ -4,12 +4,24 @@ import {
   applyText,
   seedFromText,
 } from "@agent-native/core/collab";
+import { isPostgres } from "@agent-native/core/db";
 import { accessFilter, assertAccess } from "@agent-native/core/sharing";
-import { and, eq } from "drizzle-orm";
+import { and, eq, sql } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
 
+function rowsAffected(result: unknown): number | undefined {
+  const candidate = result as {
+    rowsAffected?: unknown;
+    rowCount?: unknown;
+    changes?: unknown;
+  } | null;
+  const value =
+    candidate?.rowsAffected ?? candidate?.rowCount ?? candidate?.changes;
+  return typeof value === "number" ? value : undefined;
+}
+
 export default defineAction({
   description:
     "Update an existing file in a design project. " +
@@ -70,13 +82,19 @@ export default defineAction({
 
     await assertAccess("design", file.designId, "editor");
 
-    // Reject a rename that would collide with an existing filename in the same
-    // design. The collision check and the write run in one transaction so they
-    // can't be interleaved by a concurrent rename. (A DB-level UNIQUE index on
-    // (designId, filename) would be the strongest guarantee but is a non-additive
-    // schema change on existing data, so it's deferred.)
-    await db.transaction(async (tx) => {
-      if (filename !== undefined) {
+    const updates: Record<string, unknown> = { updatedAt: now };
+    if (content !== undefined) updates.content = content;
+    if (filename !== undefined) updates.filename = filename;
+    if (fileType !== undefined) updates.fileType = fileType;
+
+    if (filename !== undefined && isPostgres()) {
+      await db.transaction(async (tx) => {
+        // Postgres evaluates concurrent NOT EXISTS updates under MVCC, so a
+        // guarded UPDATE alone can still race. Serialize design-file renames in
+        // this rare path without using SQLite's fragile async savepoint wrapper.
+        await (
+          tx as unknown as { execute: (query: unknown) => Promise<unknown> }
+        ).execute(sql`LOCK TABLE design_files IN SHARE ROW EXCLUSIVE MODE`);
         const [collision] = await tx
           .select({ id: schema.designFiles.id })
           .from(schema.designFiles)
@@ -92,18 +110,51 @@ export default defineAction({
             `File "${filename}" already exists in design ${file.designId}`,
           );
         }
-      }
+        await tx
+          .update(schema.designFiles)
+          .set(updates)
+          .where(eq(schema.designFiles.id, id));
+      });
+    } else {
+      // Reject colliding SQLite renames as part of the write. SQLite's local
+      // async transaction wrapper can fail under concurrent editor/collab writes,
+      // so keep this to one guarded UPDATE instead of a SELECT-then-UPDATE window.
+      const updateWhere =
+        filename === undefined
+          ? eq(schema.designFiles.id, id)
+          : and(
+              eq(schema.designFiles.id, id),
+              sql`NOT EXISTS (
+                SELECT 1 FROM design_files AS sibling
+                WHERE sibling.design_id = ${file.designId}
+                  AND sibling.filename = ${filename}
+                  AND sibling.id <> ${id}
+              )`,
+            );
 
-      const updates: Record<string, unknown> = { updatedAt: now };
-      if (content !== undefined) updates.content = content;
-      if (filename !== undefined) updates.filename = filename;
-      if (fileType !== undefined) updates.fileType = fileType;
-
-      await tx
+      const updateResult = await db
         .update(schema.designFiles)
         .set(updates)
-        .where(eq(schema.designFiles.id, id));
-    });
+        .where(updateWhere);
+
+      if (filename !== undefined && rowsAffected(updateResult) === 0) {
+        const [collision] = await db
+          .select({ id: schema.designFiles.id })
+          .from(schema.designFiles)
+          .where(
+            and(
+              eq(schema.designFiles.designId, file.designId),
+              eq(schema.designFiles.filename, filename),
+            ),
+          )
+          .limit(1);
+        if (collision && collision.id !== id) {
+          throw new Error(
+            `File "${filename}" already exists in design ${file.designId}`,
+          );
+        }
+      }
+    }
 
     // Push content through the collab layer so live editors see the change
     if (content !== undefined && syncCollab) {

package/corpus/templates/design/app/components/design/DesignCanvas.tsx

@@ -1811,14 +1811,15 @@ export function DesignCanvas({
             : "allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin"
         }
         data-design-preview-iframe
-        data-screen-iframe-id={screenId ?? undefined}
+        data-screen-iframe-id={
+          boardSurface ? undefined : (screenId ?? undefined)
+        }
         data-design-source-type={
           sourceType ??
           (externalPreviewUrl
             ? "localhost" // inferred — content is a URL
             : "inline")
         }
-        allowTransparency={transparentBackground || undefined}
         className="block h-full w-full border-0 bg-transparent"
         style={{
           background: iframeBackgroundColor,

package/corpus/templates/design/app/components/design/EditPanel.tsx

@@ -138,7 +138,7 @@ import type { StatesPanelProps } from "./StatesPanel";
 import { TweaksPanelContent } from "./TweaksPanel";
 import type { ElementInfo } from "./types";
 
-export type InspectorTab = "design" | "tweaks";
+export type InspectorTab = "design" | "tweaks" | "extensions";
 
 const MIXED_VALUE = "Mixed";
 
@@ -216,6 +216,7 @@ interface EditPanelProps {
   tweakValues?: Record<string, string | number | boolean>;
   onTweakChange?: (id: string, value: string | number | boolean) => void;
   onRequestTweaks?: (anchor: HTMLElement) => void;
+  extensionsPanel?: ReactNode;
   onStyleChange: (property: string, value: string) => void;
   onStylesChange?: (styles: Record<string, string>) => void;
   onExport?: (settings: ExportSettingsValue[]) => void;
@@ -283,6 +284,8 @@ interface EditPanelProps {
   defaultComponentName?: string;
   /** Code-inspection data for the "Inspect code" popover. */
   inspectCode?: InspectCodeData;
+  /** Optional compact AI edit controls for selected/local source elements. */
+  aiActions?: ReactNode;
 }
 
 /**
@@ -2960,10 +2963,12 @@ function InspectorTabsHeader({
   activeTab,
   onActiveTabChange,
   trailing,
+  showExtensions,
 }: {
   activeTab: InspectorTab;
   onActiveTabChange: (tab: InspectorTab) => void;
   trailing?: ReactNode;
+  showExtensions?: boolean;
 }) {
   const t = useT();
 
@@ -2986,6 +2991,14 @@ function InspectorTabsHeader({
           >
             {t("designEditor.tweaks")}
           </TabsTrigger>
+          {showExtensions ? (
+            <TabsTrigger
+              value="extensions"
+              className="h-6 rounded-md px-1.5 !text-[11px] font-semibold text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:bg-[var(--design-editor-panel-raised-bg)] data-[state=active]:text-foreground data-[state=active]:shadow-none"
+            >
+              {"Extensions" /* i18n-ignore design inspector tab */}
+            </TabsTrigger>
+          ) : null}
         </TabsList>
       </Tabs>
       {trailing ? <div className="shrink-0">{trailing}</div> : null}
@@ -3282,7 +3295,7 @@ function CornerRadiusControl({
         value={radius}
         onChange={commitRadius}
         min={0}
-        precision={1}
+        precision={0}
       />
       <Tooltip>
         <TooltipTrigger asChild>
@@ -3308,6 +3321,7 @@ function CornerRadiusControl({
         <>
           <AppearanceScrubField
             label={t("editPanel.labels.topLeft")}
+            ariaLabel="Top left"
             icon={IconRadiusTopLeft}
             value={corners.topLeft}
             onChange={(value) =>
@@ -3321,6 +3335,7 @@ function CornerRadiusControl({
           />
           <AppearanceScrubField
             label={t("editPanel.labels.topRight")}
+            ariaLabel="Top right"
             icon={IconRadiusTopRight}
             value={corners.topRight}
             onChange={(value) =>
@@ -3335,6 +3350,7 @@ function CornerRadiusControl({
           <span aria-hidden="true" />
           <AppearanceScrubField
             label={t("editPanel.labels.bottomLeft")}
+            ariaLabel="Bottom left"
             icon={IconRadiusBottomLeft}
             value={corners.bottomLeft}
             onChange={(value) =>
@@ -3348,6 +3364,7 @@ function CornerRadiusControl({
           />
           <AppearanceScrubField
             label={t("editPanel.labels.bottomRight")}
+            ariaLabel="Bottom right"
             icon={IconRadiusBottomRight}
             value={corners.bottomRight}
             onChange={(value) =>
@@ -3368,6 +3385,7 @@ function CornerRadiusControl({
 
 function AppearanceScrubField({
   label,
+  ariaLabel,
   icon,
   value,
   onChange,
@@ -3379,6 +3397,7 @@ function AppearanceScrubField({
   precision,
 }: {
   label: string;
+  ariaLabel?: string;
   icon: (props: { className?: string }) => ReactNode;
   value: number;
   onChange: (value: number) => void;
@@ -3392,7 +3411,7 @@ function AppearanceScrubField({
   return (
     <ScrubInput
       label={label}
-      ariaLabel={label}
+      ariaLabel={ariaLabel ?? label}
       icon={icon}
       value={value}
       onChange={onChange}
@@ -6842,6 +6861,7 @@ export function EditPanel({
   tweakValues = {},
   onTweakChange,
   onRequestTweaks,
+  extensionsPanel,
   onStyleChange,
   onStylesChange,
   onExport,
@@ -6858,6 +6878,7 @@ export function EditPanel({
   selectedElementAlreadyComponent = false,
   defaultComponentName = "Component",
   inspectCode,
+  aiActions,
 }: EditPanelProps) {
   const t = useT();
   const [createComponentOpen, setCreateComponentOpen] = useState(false);
@@ -6950,6 +6971,7 @@ export function EditPanel({
         activeTab={activeTab}
         onActiveTabChange={handleActiveTabChange}
         trailing={headerTrailing}
+        showExtensions={!!extensionsPanel}
       />
 
       {activeTab === "design" ? (
@@ -7058,6 +7080,12 @@ export function EditPanel({
               />
             )}
 
+            {aiActions ? (
+              <div className="border-b border-[var(--design-editor-control-border)] px-2 py-1.5">
+                {aiActions}
+              </div>
+            ) : null}
+
             {!inspectorElement && (
               <PageProperties
                 styles={pageStyles}
@@ -7228,6 +7256,10 @@ export function EditPanel({
             />
           </div>
         </div>
+      ) : activeTab === "extensions" && extensionsPanel ? (
+        <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+          {extensionsPanel}
+        </div>
       ) : null}
     </div>
   );