@agent-native/core 0.84.9 → 0.84.12

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

@@ -40,7 +40,17 @@ const FALLBACK_INSTRUCTIONS =
   "The generated directions have been saved as normal screens on the Design " +
   "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 and continue from the kept screen.";
+  "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.";
+
+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.";
 
 const variantSchema = z.object({
   id: z.string().min(1).describe("Stable variant id, e.g. 'minimal-focus'"),
@@ -410,7 +420,11 @@ export default defineAction({
     "Provide 2-5 variants (3 is the sweet spot). Use this for design " +
     "exploration before follow-up refinement. After the user's choice, keep " +
     "the chosen screen, delete the other generated variant screens, and " +
-    "continue from the kept screen. For complex apps, make each variant a " +
+    "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, " +
+    "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 " +
     "compact screens from the direction data. Expand the chosen direction " +
@@ -563,9 +577,9 @@ export default defineAction({
     await writeAppStateForCurrentTab("guided-questions", {
       title: prompt ?? "Pick a direction",
       description:
-        "All options are on the board. Choose the one to keep and I will continue from it.",
+        "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.",
       submitLabel: "Use selected direction",
-      submitMessage: "Use this design direction.",
+      submitMessage: VARIANT_PICK_SUBMIT_MESSAGE,
       skipLabel: "Show another set",
       skipMessage: "None of these directions are right.",
       questions: [
@@ -590,7 +604,8 @@ export default defineAction({
               label: screen.label || optionName(index),
               value:
                 `Keep "${screen.label}" (${screen.filename}, file id ${screen.id}) ` +
-                `from variant set ${variantSetId}. Delete the other variant screens: ${otherScreens}.`,
+                `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.`,
             };
           }),
         },
@@ -608,7 +623,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 and continue from the chosen screen.",
+        "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.",
     };
   },
   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>
   );

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

@@ -117,6 +117,14 @@ export interface MotionDockProps {
   canvasIframeRef?: React.RefObject<HTMLIFrameElement | null>;
   /** Whether the parent autosave mutation is in flight. */
   applying?: boolean;
+  /** Controlled auto-keyframe state. */
+  autoKeyframe?: boolean;
+  /** Called when the auto-keyframe toggle changes. */
+  onAutoKeyframeChange?: (enabled: boolean) => void;
+  /** Controlled playhead position, normalized to [0, 1]. */
+  playhead?: number;
+  /** Called whenever the playhead moves. */
+  onPlayheadChange?: (t: number) => void;
   /**
    * The currently-selected canvas element, if any. Required to create the FIRST
    * track for a layer: the picker animates this node's
@@ -139,6 +147,10 @@ export function MotionDock({
   onDurationChange,
   canvasIframeRef,
   applying = false,
+  autoKeyframe: autoKeyframeProp,
+  onAutoKeyframeChange,
+  playhead: playheadProp,
+  onPlayheadChange,
   selectedTarget = null,
 }: MotionDockProps) {
   // Controlled / uncontrolled open state.
@@ -153,13 +165,36 @@ export function MotionDock({
   );
 
   // Playhead position: normalised [0, 1].
-  const [playhead, setPlayhead] = useState(0);
+  const [playhead, setPlayhead] = useState(playheadProp ?? 0);
   const [playing, setPlaying] = useState(false);
   const playRafRef = useRef<number | null>(null);
   const playStartRef = useRef<{ wallMs: number; startT: number } | null>(null);
-
-  // Auto-keyframe mode: clicking the canvas at a time scrubs without writing.
-  const [autoKeyframe, setAutoKeyframe] = useState(false);
+  useEffect(() => {
+    if (playheadProp === undefined) return;
+    setPlayhead(Math.max(0, Math.min(1, playheadProp)));
+  }, [playheadProp]);
+
+  // Auto-keyframe mode: inspector/style edits create keyframes at the playhead.
+  const [autoKeyframeInternal, setAutoKeyframeInternal] = useState(false);
+  const autoKeyframe = autoKeyframeProp ?? autoKeyframeInternal;
+  const setAutoKeyframe = useCallback(
+    (next: boolean | ((current: boolean) => boolean)) => {
+      const resolved =
+        typeof next === "function"
+          ? (next as (current: boolean) => boolean)(autoKeyframe)
+          : next;
+      setAutoKeyframeInternal(resolved);
+      onAutoKeyframeChange?.(resolved);
+    },
+    [autoKeyframe, onAutoKeyframeChange],
+  );
+  const setPlayheadValue = useCallback(
+    (next: number) => {
+      setPlayhead(next);
+      onPlayheadChange?.(next);
+    },
+    [onPlayheadChange],
+  );
 
   // Dock height (resizable via the top drag handle).
   const [dockHeight, setDockHeight] = useState(DEFAULT_DOCK_HEIGHT);
@@ -235,7 +270,7 @@ export function MotionDock({
       if (!playStartRef.current) return;
       const elapsed = now - playStartRef.current.wallMs;
       const t = Math.min(1, playStartRef.current.startT + elapsed / durationMs);
-      setPlayhead(t);
+      setPlayheadValue(t);
       sendPreview(t);
       if (t < 1) {
         playRafRef.current = requestAnimationFrame(tick);
@@ -244,7 +279,7 @@ export function MotionDock({
       }
     };
     playRafRef.current = requestAnimationFrame(tick);
-  }, [durationMs, playhead, sendPreview, stopPlayback]);
+  }, [durationMs, playhead, sendPreview, setPlayheadValue, stopPlayback]);
 
   useEffect(() => {
     return () => {
@@ -263,10 +298,10 @@ export function MotionDock({
       (e.target as HTMLElement).setPointerCapture(e.pointerId);
       const rect = trackAreaRef.current.getBoundingClientRect();
       const t = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-      setPlayhead(t);
+      setPlayheadValue(t);
       sendPreview(t);
     },
-    [sendPreview, stopPlayback],
+    [sendPreview, setPlayheadValue, stopPlayback],
   );
 
   const handleRulerPointerMove = useCallback(
@@ -274,10 +309,10 @@ export function MotionDock({
       if (!isDraggingPlayhead.current || !trackAreaRef.current) return;
       const rect = trackAreaRef.current.getBoundingClientRect();
       const t = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-      setPlayhead(t);
+      setPlayheadValue(t);
       sendPreview(t);
     },
-    [sendPreview],
+    [sendPreview, setPlayheadValue],
   );
 
   const handleRulerPointerUp = useCallback(() => {
@@ -493,7 +528,7 @@ export function MotionDock({
                   className="size-6 shrink-0"
                   onClick={() => {
                     stopPlayback();
-                    setPlayhead(0);
+                    setPlayheadValue(0);
                     sendPreview(0);
                   }}
                   aria-label="Reset playhead"