@agent-native/core 0.85.5 → 0.85.7

package/corpus/templates/design/actions/connect-localhost.ts

@@ -3,7 +3,7 @@ import {
   getRequestOrgId,
   getRequestUserEmail,
 } from "@agent-native/core/server/request-context";
-import { and, eq } from "drizzle-orm";
+import { eq } from "drizzle-orm";
 import { nanoid } from "nanoid";
 import { z } from "zod";
 
@@ -159,20 +159,26 @@ export default defineAction({
         status: "available" as const,
       }));
 
+    // The id may already be taken by a DIFFERENT user (legacy ids were derived
+    // from devServerUrl + rootPath without user scoping, so two users on the
+    // same devcontainer image collide). Detect that up front and fail with a
+    // clear error instead of crashing on the primary-key insert below.
     const existing = await db
       .select({
-        id: schema.designLocalhostConnections.id,
+        ownerEmail: schema.designLocalhostConnections.ownerEmail,
         bridgeToken: schema.designLocalhostConnections.bridgeToken,
       })
       .from(schema.designLocalhostConnections)
-      .where(
-        and(
-          eq(schema.designLocalhostConnections.id, id),
-          eq(schema.designLocalhostConnections.ownerEmail, ownerEmail),
-        ),
-      )
+      .where(eq(schema.designLocalhostConnections.id, id))
       .limit(1);
 
+    if (existing[0] && existing[0].ownerEmail !== ownerEmail) {
+      throw new Error(
+        `Connection id "${id}" already belongs to another user. ` +
+          "Omit id so a per-user connection id is derived instead.",
+      );
+    }
+
     const nextBridgeToken = args.bridgeToken?.trim() || undefined;
     const values = {
       id,
@@ -191,17 +197,18 @@ export default defineAction({
       updatedAt: now,
     };
 
-    if (existing[0]) {
-      await db
-        .update(schema.designLocalhostConnections)
-        .set(values)
-        .where(eq(schema.designLocalhostConnections.id, id));
-    } else {
-      await db.insert(schema.designLocalhostConnections).values({
-        ...values,
-        createdAt: now,
+    // Atomic upsert keyed on the id primary key — no check-then-insert race.
+    // setWhere keeps a concurrent insert by another user (TOCTOU on the
+    // ownership check above) from being overwritten: on a cross-user conflict
+    // the update filters to a no-op instead of hijacking the other row.
+    await db
+      .insert(schema.designLocalhostConnections)
+      .values({ ...values, createdAt: now })
+      .onConflictDoUpdate({
+        target: schema.designLocalhostConnections.id,
+        set: values,
+        setWhere: eq(schema.designLocalhostConnections.ownerEmail, ownerEmail),
       });
-    }
 
     return {
       id,

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

@@ -142,8 +142,10 @@ export default defineAction({
     "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.",
+    "the representative placeholder with a complete but compact UI in the chosen " +
+    "direction; prioritize the primary workflow and render secondary details " +
+    "as visible controls, states, or affordances when needed. Use `generate-design` " +
+    "instead only for brand-new files.",
   schema: z
     .object({
       designId: z.string().describe("Design project ID"),
@@ -175,7 +177,7 @@ export default defineAction({
         .min(1)
         .optional()
         .describe(
-          "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.",
+          "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. For selected variants, keep the replacement complete but compact instead of expanding secondary details into an oversized payload.",
         ),
     })
     .superRefine((value, ctx) => {

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 { injectHiddenLayerExportStyle } from "../server/lib/design-export.js";
 import { isBoardFile } from "../shared/board-file.js";
 import "../server/db/index.js"; // ensure registerShareableResource runs
 
@@ -40,7 +41,13 @@ export default defineAction({
         id: f.id,
         filename: f.filename,
         fileType: f.fileType,
-        content: f.content,
+        // Layers toggled hidden in the editor are only suppressed by the live
+        // editor bridge; inject the same display:none rule so the client-side
+        // PDF render (html2canvas over this HTML) doesn't reveal them.
+        content:
+          f.fileType === "html" && f.content
+            ? injectHiddenLayerExportStyle(f.content)
+            : f.content,
       })),
       exportInfo: {
         format: "pdf",

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

@@ -6,6 +6,7 @@ import { z } from "zod";
 import { getDb, schema } from "../server/db/index.js";
 import {
   exportFilename,
+  injectHiddenLayerExportStyle,
   trySaveExportFile,
 } from "../server/lib/design-export.js";
 import { isBoardFile } from "../shared/board-file.js";
@@ -71,7 +72,15 @@ export default defineAction({
         file.filename,
         `design-file-${index + 1}.txt`,
       );
-      zip.file(filename, file.content ?? "");
+      // Layers toggled hidden in the editor are only suppressed by the live
+      // editor bridge; inject the same display:none rule into exported HTML
+      // files so opening them directly from the zip doesn't reveal layers
+      // the user hid in the editor.
+      const content =
+        file.fileType === "html"
+          ? injectHiddenLayerExportStyle(file.content ?? "")
+          : (file.content ?? "");
+      zip.file(filename, content);
     }
 
     // Add design data if present

package/corpus/templates/design/actions/get-motion-timeline.ts

@@ -1,5 +1,4 @@
 import { defineAction } from "@agent-native/core";
-import { getText, hasCollabState } from "@agent-native/core/collab";
 import { assertAccess } from "@agent-native/core/sharing";
 import { and, desc, eq } from "drizzle-orm";
 import { z } from "zod";
@@ -10,6 +9,7 @@ import {
   extractManagedMotionCss,
   hashCss,
   parse,
+  parseFirstAnimationDurationMs,
 } from "../shared/motion-compiler.js";
 import type { MotionTrack } from "../shared/motion-timeline.js";
 
@@ -30,21 +30,6 @@ interface TimelineResult {
   updatedAt: string | null;
 }
 
-async function liveFileContent(
-  fileId: string,
-  storedContent: string,
-): Promise<string> {
-  try {
-    if (await hasCollabState(fileId)) {
-      const live = await getText(fileId, "content");
-      if (typeof live === "string") return live;
-    }
-  } catch {
-    // Best-effort; SQL is the fallback.
-  }
-  return storedContent;
-}
-
 function parseTrackJson(raw: string | null): MotionTrack[] {
   try {
     const parsed: unknown = JSON.parse(raw ?? "[]");
@@ -57,7 +42,12 @@ function parseTrackJson(raw: string | null): MotionTrack[] {
 async function readManagedCssForSource(args: {
   designId: string;
   sourceRef?: string;
-}): Promise<{ css: string; hash: string; tracks: MotionTrack[] } | null> {
+}): Promise<{
+  css: string;
+  hash: string;
+  tracks: MotionTrack[];
+  durationMs: number | null;
+} | null> {
   if (!args.sourceRef) return null;
 
   const db = getDb();
@@ -77,7 +67,13 @@ async function readManagedCssForSource(args: {
 
   if (!file) return null;
 
-  const content = await liveFileContent(file.id, file.content ?? "");
+  // Read the managed block from the SQL content, NOT a live collab snapshot:
+  // apply-motion-edit persists the managed <style> block to SQL only, so a
+  // live collab session's text lags the freshest motion CSS. Comparing the
+  // stored compiledHash against stale collab CSS would flag phantom
+  // "stored-css-drift" right after every save and replace fresh tracks with
+  // stale CSS-parsed ones. SQL is the motion block's source of truth.
+  const content = file.content ?? "";
   const css = extractManagedMotionCss(content);
   if (!css) return null;
 
@@ -88,7 +84,12 @@ async function readManagedCssForSource(args: {
   );
   if (tracks.length === 0) return null;
 
-  return { css, hash: hashCss(css), tracks };
+  return {
+    css,
+    hash: hashCss(css),
+    tracks,
+    durationMs: parseFirstAnimationDurationMs(css),
+  };
 }
 
 export default defineAction({
@@ -179,7 +180,9 @@ export default defineAction({
           sourceRef: sourceRef ?? null,
           filePath: null,
           tracks: managedCss.tracks,
-          durationMs: 1000,
+          // Recover the compiled animation-duration instead of inventing a
+          // default the next save would silently persist.
+          durationMs: managedCss.durationMs ?? 1000,
           defaultEase: "ease",
           compiledHash: managedCss.hash,
           cssHash: managedCss.hash,
@@ -191,6 +194,9 @@ export default defineAction({
         timelines[0] = {
           ...first,
           tracks: managedCss.tracks,
+          // In the drift case the CSS is the runtime truth — surface its
+          // compiled duration alongside its recovered tracks.
+          durationMs: managedCss.durationMs ?? first.durationMs,
           cssHash: managedCss.hash,
           source: "stored-css-drift",
         };

package/corpus/templates/design/actions/grant-localhost-write-consent.ts

@@ -19,6 +19,16 @@ export default defineAction({
     "for a specific design + localhost connection. The grant scopes writes to the " +
     "connection's rootPath and expires after 8 hours. Requires editor access on the design. " +
     "The LocalhostWriteConsentDialog calls this after the user clicks 'Allow writes'.",
+  // This action mints/returns the real bridgeToken that unlocks the local
+  // bridge's unrestricted /read-file, /write-file, and /apply-edit. It must
+  // only ever be triggered by a human clicking "Allow writes" in
+  // LocalhostWriteConsentDialog — never by the agent itself, or an agent
+  // could self-grant local filesystem write/read access and bypass the
+  // human consent model entirely. `agentTool: false` hides it from every
+  // agent tool surface (in-app assistant, MCP, A2A) while keeping it
+  // callable from the frontend via `callAction` / `useActionMutation` and
+  // the raw `/_agent-native/actions/grant-localhost-write-consent` route.
+  agentTool: false,
   schema: z.object({
     designId: z.string().describe("Design ID."),
     connectionId: z

package/corpus/templates/design/actions/insert-asset.ts

@@ -41,6 +41,27 @@ const schemaInput = z.object({
     .string()
     .optional()
     .describe("Design editor selection owner token from current screen state."),
+  targetNodeId: z
+    .string()
+    .optional()
+    .describe(
+      "data-agent-native-node-id of an existing element to target. Required " +
+        'for mode "replace-src" and "background-fill". Ignored for the ' +
+        'default "figure" mode.',
+    ),
+  mode: z
+    .enum(["figure", "replace-src", "background-fill"])
+    .optional()
+    .default("figure")
+    .describe(
+      'How to place the asset. "figure" (default) appends a new figure/section ' +
+        "at the end of the file, styled with the design's own tokens — use " +
+        'this when there is no existing element to target. "replace-src" sets ' +
+        "the src of the <img>/<video> at targetNodeId (e.g. filling a hero " +
+        'image placeholder). "background-fill" sets a background-image style ' +
+        "on the element at targetNodeId (e.g. filling a hero/section background). " +
+        'Both "replace-src" and "background-fill" require targetNodeId.',
+    ),
 });
 
 function stringFromState(state: unknown, key: string): string | undefined {
@@ -57,6 +78,26 @@ function escapeHtml(value: string): string {
     .replace(/"/g, "&quot;");
 }
 
+/**
+ * Prepare a URL for embedding inside a single-quoted CSS `url('...')` value
+ * that itself lives inside an HTML attribute. A literal `'` in the URL would
+ * otherwise close the CSS string early — and depending on whether the
+ * surrounding HTML attribute is single- or double-quoted, everything after it
+ * becomes live CSS or, worse, live HTML/JS in the script-enabled preview
+ * iframe. Percent-encoding the quote/backslash characters that are meaningful
+ * to the CSS string-literal grammar keeps the URL functionally identical
+ * (browsers resolve %27/%22/%5C the same as the raw characters) while making
+ * it impossible to break out of the `url('...')` string. HTML-escape on top
+ * so the value is also safe as an HTML attribute (covers the "..." case).
+ */
+function cssUrlValue(value: string): string {
+  const cssSafe = value
+    .replace(/\\/g, "%5C")
+    .replace(/'/g, "%27")
+    .replace(/"/g, "%22");
+  return escapeHtml(cssSafe);
+}
+
 function createInsertedNodeId(prefix: string): string {
   const random =
     typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
@@ -88,13 +129,13 @@ function appendAssetMarkup(
     : "";
   const media =
     args.mediaType === "video"
-      ? `<video src="${escapedUrl}" controls class="w-full rounded-xl object-cover"></video>`
-      : `<img src="${escapedUrl}" alt="${escapeHtml(args.altText?.trim() || label)}" class="w-full rounded-xl object-cover" />`;
+      ? `<video src="${escapedUrl}" controls class="w-full rounded-[var(--radius,0.75rem)] object-cover"></video>`
+      : `<img src="${escapedUrl}" alt="${escapeHtml(args.altText?.trim() || label)}" class="w-full rounded-[var(--radius,0.75rem)] object-cover" />`;
   const snippet = `
     <section class="mx-auto my-8 max-w-5xl px-4" data-agent-native-asset data-agent-native-node-id="${escapeHtml(nodeId)}" data-agent-native-layer-name="${escapedLabel}"${assetIdAttr}>
-      <figure class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
+      <figure class="overflow-hidden rounded-[var(--radius,1rem)] border border-[var(--color-border,rgba(0,0,0,0.1))] bg-[var(--color-surface,#fff)] shadow-sm">
         ${media}
-        <figcaption class="px-4 py-3 text-sm text-slate-600">${escapedLabel}</figcaption>
+        <figcaption class="px-4 py-3 text-sm text-[var(--color-text-muted,#64748b)]">${escapedLabel}</figcaption>
       </figure>
     </section>`;
 
@@ -105,6 +146,119 @@ function appendAssetMarkup(
   );
 }
 
+/** Find the raw tag string for the element carrying the given node id. */
+function findTagByNodeId(html: string, nodeId: string): string | null {
+  const escapedId = nodeId.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const pattern = new RegExp(
+    `<[a-zA-Z][a-zA-Z0-9:-]*\\b[^>]*data-agent-native-node-id\\s*=\\s*(?:"${escapedId}"|'${escapedId}')[^>]*>`,
+  );
+  const match = html.match(pattern);
+  return match ? match[0] : null;
+}
+
+/** Replace the src attribute of the <img>/<video> tag at targetNodeId. */
+function replaceSrcAtNode(
+  html: string,
+  args: z.infer<typeof schemaInput>,
+): string {
+  const nodeId = args.targetNodeId!;
+  const tag = findTagByNodeId(html, nodeId);
+  if (!tag) {
+    throw new Error(
+      `No element found with data-agent-native-node-id="${nodeId}".`,
+    );
+  }
+  const escapedUrl = escapeHtml(args.assetUrl);
+  let nextTag: string;
+  if (/\bsrc\s*=\s*(?:"[^"]*"|'[^']*')/i.test(tag)) {
+    nextTag = tag.replace(
+      /\bsrc\s*=\s*(?:"[^"]*"|'[^']*')/i,
+      `src="${escapedUrl}"`,
+    );
+  } else {
+    nextTag = tag.replace(/\/?>\s*$/, ` src="${escapedUrl}">`);
+  }
+  if (args.altText?.trim()) {
+    const escapedAlt = escapeHtml(args.altText.trim());
+    nextTag = /\balt\s*=\s*(?:"[^"]*"|'[^']*')/i.test(nextTag)
+      ? nextTag.replace(
+          /\balt\s*=\s*(?:"[^"]*"|'[^']*')/i,
+          `alt="${escapedAlt}"`,
+        )
+      : nextTag.replace(/\/?>\s*$/, ` alt="${escapedAlt}">`);
+  }
+  if (args.assetId?.trim()) {
+    const escapedAssetId = escapeHtml(args.assetId.trim());
+    nextTag = /\bdata-asset-id\s*=/.test(nextTag)
+      ? nextTag.replace(
+          /\bdata-asset-id\s*=\s*(?:"[^"]*"|'[^']*')/i,
+          `data-asset-id="${escapedAssetId}"`,
+        )
+      : nextTag.replace(/\/?>\s*$/, ` data-asset-id="${escapedAssetId}">`);
+  }
+  return html.replace(tag, nextTag);
+}
+
+/** Set a background-image inline style on the element at targetNodeId. */
+function backgroundFillAtNode(
+  html: string,
+  args: z.infer<typeof schemaInput>,
+): string {
+  const nodeId = args.targetNodeId!;
+  const tag = findTagByNodeId(html, nodeId);
+  if (!tag) {
+    throw new Error(
+      `No element found with data-agent-native-node-id="${nodeId}".`,
+    );
+  }
+  const cssUrl = cssUrlValue(args.assetUrl);
+  const bgDeclaration = `background-image: url('${cssUrl}'); background-size: cover; background-position: center;`;
+  let nextTag: string;
+  if (/\bstyle\s*=\s*"/.test(tag)) {
+    nextTag = tag.replace(
+      /\bstyle\s*=\s*"([^"]*)"/i,
+      (_match, existing: string) => {
+        const trimmed = existing.trim();
+        const withoutBgImage = trimmed.replace(
+          /background-image\s*:[^;]*;?\s*/gi,
+          "",
+        );
+        const joined = withoutBgImage
+          ? `${withoutBgImage.replace(/;\s*$/, "")}; ${bgDeclaration}`
+          : bgDeclaration;
+        return `style="${joined}"`;
+      },
+    );
+  } else if (/\bstyle\s*=\s*'/.test(tag)) {
+    nextTag = tag.replace(
+      /\bstyle\s*=\s*'([^']*)'/i,
+      (_match, existing: string) => {
+        const trimmed = existing.trim();
+        const withoutBgImage = trimmed.replace(
+          /background-image\s*:[^;]*;?\s*/gi,
+          "",
+        );
+        const joined = withoutBgImage
+          ? `${withoutBgImage.replace(/;\s*$/, "")}; ${bgDeclaration}`
+          : bgDeclaration;
+        return `style='${joined}'`;
+      },
+    );
+  } else {
+    nextTag = tag.replace(/\/?>\s*$/, ` style="${bgDeclaration}">`);
+  }
+  if (args.assetId?.trim()) {
+    const escapedAssetId = escapeHtml(args.assetId.trim());
+    nextTag = /\bdata-asset-id\s*=/.test(nextTag)
+      ? nextTag.replace(
+          /\bdata-asset-id\s*=\s*(?:"[^"]*"|'[^']*')/i,
+          `data-asset-id="${escapedAssetId}"`,
+        )
+      : nextTag.replace(/\/?>\s*$/, ` data-asset-id="${escapedAssetId}">`);
+  }
+  return html.replace(tag, nextTag);
+}
+
 async function resolveTarget(args: z.infer<typeof schemaInput>) {
   const [navigation, selection] = await Promise.all([
     readAppStateForCurrentTab("navigation").catch(() => null),
@@ -149,7 +303,18 @@ function isHtmlFile(file: {
 
 export default defineAction({
   description:
-    "Insert a chosen Assets image or video URL into a Design file. Use this after the Assets picker returns chooseAsset/chooseImage context; pass designId/fileId directly when known, or pass ownerId from view-screen.designSelection when targeting the current editor selection.",
+    "Insert a chosen Assets image or video URL into a Design file. Use this " +
+    "after the Assets picker returns chooseAsset/chooseImage context; pass " +
+    "designId/fileId directly when known, or pass ownerId from " +
+    "view-screen.designSelection when targeting the current editor selection. " +
+    'Default `mode: "figure"` appends a new tokened figure/section at the end ' +
+    "of the file — use this when there is no existing element to fill. Use " +
+    '`mode: "replace-src"` with `targetNodeId` to set the src of an existing ' +
+    "<img>/<video> (e.g. filling a hero image placeholder), or " +
+    '`mode: "background-fill"` with `targetNodeId` to set a background-image ' +
+    "style on an existing element (e.g. filling a hero/section background). " +
+    "Both of those require targetNodeId (a data-agent-native-node-id) from " +
+    "get-code-layer-projection or the current selection.",
   schema: schemaInput,
   publicAgent: { expose: true, readOnly: false, requiresAuth: true },
   run: async (args) => {
@@ -200,8 +365,25 @@ export default defineAction({
       // Collab read is best-effort; fall back to stored content.
     }
 
-    const insertedNodeId = createInsertedNodeId("asset");
-    const content = appendAssetMarkup(base, args, insertedNodeId);
+    const mode = args.mode ?? "figure";
+    let content: string;
+    let insertedNodeId: string;
+    if (mode === "replace-src") {
+      if (!args.targetNodeId) {
+        throw new Error('targetNodeId is required for mode "replace-src".');
+      }
+      insertedNodeId = args.targetNodeId;
+      content = replaceSrcAtNode(base, args);
+    } else if (mode === "background-fill") {
+      if (!args.targetNodeId) {
+        throw new Error('targetNodeId is required for mode "background-fill".');
+      }
+      insertedNodeId = args.targetNodeId;
+      content = backgroundFillAtNode(base, args);
+    } else {
+      insertedNodeId = createInsertedNodeId("asset");
+      content = appendAssetMarkup(base, args, insertedNodeId);
+    }
     const now = new Date().toISOString();
     await db
       .update(schema.designFiles)
@@ -223,6 +405,7 @@ export default defineAction({
       fileId: file.id,
       filename: file.filename,
       inserted: true,
+      mode,
       insertedNodeId,
       insertedSelector: `[data-agent-native-node-id="${insertedNodeId}"]`,
       assetId: args.assetId ?? null,

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

@@ -3,6 +3,7 @@ import crypto from "node:crypto";
 import { defineAction, embedApp } from "@agent-native/core";
 import { writeAppState } from "@agent-native/core/application-state";
 import { buildDeepLink } from "@agent-native/core/server";
+import { getRequestUserEmail } from "@agent-native/core/server/request-context";
 import { eq } from "drizzle-orm";
 import { z } from "zod";
 
@@ -88,10 +89,23 @@ function isLoopbackUrl(value: string): boolean {
   );
 }
 
-function stableConnectionId(devServerUrl: string, rootPath?: string) {
+/**
+ * Derive a stable per-user connection id for a devServerUrl + rootPath pair.
+ *
+ * The owner email is embedded in the hash so two users with an identical
+ * devServerUrl + rootPath (common with devcontainers/codespaces images) derive
+ * DIFFERENT ids and never collide on the shared primary key. Connections
+ * created before user scoping keep their old ids; those users simply
+ * reconnect fresh under the new per-user id.
+ */
+function stableConnectionId(
+  devServerUrl: string,
+  rootPath: string | undefined,
+  ownerEmail: string,
+) {
   const hash = crypto
     .createHash("sha256")
-    .update(`${devServerUrl}\n${rootPath ?? ""}`)
+    .update(`${ownerEmail}\n${devServerUrl}\n${rootPath ?? ""}`)
     .digest("base64url")
     .slice(0, 16);
   return `localhost_${hash}`;
@@ -147,7 +161,7 @@ export default defineAction({
       .string()
       .optional()
       .describe(
-        "Existing localhost connection. Omit to reuse a stable connection for devServerUrl + rootPath.",
+        "Existing localhost connection. Omit to reuse a stable per-user connection for devServerUrl + rootPath.",
       ),
     title: z
       .string()
@@ -240,8 +254,16 @@ export default defineAction({
             }) ?? [],
           generatedAt: new Date().toISOString(),
         };
-    const connectionId =
-      args.connectionId ?? stableConnectionId(devServerUrl, args.rootPath);
+    let connectionId = args.connectionId;
+    if (!connectionId) {
+      const ownerEmail = getRequestUserEmail();
+      if (!ownerEmail) throw new Error("no authenticated user");
+      connectionId = stableConnectionId(
+        devServerUrl,
+        args.rootPath,
+        ownerEmail,
+      );
+    }
 
     const connection = await connectLocalhostAction.run({
       id: connectionId,

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

@@ -43,14 +43,18 @@ const FALLBACK_INSTRUCTIONS =
   "delete each other variant screen at most once, call get-design-snapshot with fileId for " +
   "the kept screen once, then call edit-design on that same fileId in a bounded pass. " +
   'Use mode "replace-file" to replace the representative direction screen with ' +
-  "the actual requested product UI; do not leave a direction board, summary card, " +
-  "or variant brief as the final result. " +
+  "the actual requested product UI; make the result complete but compact and " +
+  "prefer visible controls/affordances over exhaustive content if the request is large. " +
+  "Do not leave a direction board, summary card, or variant brief as the final result. " +
   "Do not call generate-design after a variant pick.";
 
 const VARIANT_PICK_SUBMIT_MESSAGE =
   "Use this design direction. Keep the selected screen, clean up each other " +
   "variant screen at most once, read only the kept screen, then update that " +
-  "same screen in one bounded pass into the full requested app/product UI. " +
+  "same screen in one bounded pass into the requested app/product UI. Make it " +
+  "complete but compact: prioritize the primary workflow, and if the full feature " +
+  "list is too large for one reliable edit, render secondary details as visible " +
+  "controls, states, or affordances instead of expanding the action input. " +
   "The selected screen is only a representative direction; the final saved " +
   "screen must not be a direction board, variant brief, or summary card. " +
   "If a cleanup action reports a screen was " +
@@ -246,7 +250,7 @@ function colorForVariant(
 ) {
   const provided = variant.accentColor?.trim();
   if (provided) return provided;
-  return ["#8b5cf6", "#06b6d4", "#10b981", "#f43f5e", "#f59e0b"][index % 5]!;
+  return ["#f59e0b", "#06b6d4", "#10b981", "#f43f5e", "#d97706"][index % 5]!;
 }
 
 function fallbackVariantContent(
@@ -303,7 +307,7 @@ function fallbackVariantContent(
 <style>
 :root { color-scheme: dark; --accent: ${accent}; --bg: #080a0f; --panel: rgba(18, 22, 33, 0.82); --line: rgba(255,255,255,.11); --muted: #94a3b8; }
 * { box-sizing: border-box; }
-body { margin: 0; width: ${screenWidth}px; min-height: ${screenHeight}px; overflow: hidden; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f8fafc; background:
+body { margin: 0; width: ${screenWidth}px; min-height: ${screenHeight}px; overflow: hidden; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f8fafc; background:
   radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 30%),
   linear-gradient(140deg, #05070b 0%, #111827 48%, #05070b 100%); }
 .shell { width: ${screenWidth}px; min-height: ${screenHeight}px; padding: ${compact ? "18" : "34"}px; display: grid; grid-template-columns: ${compact ? "1fr" : tablet ? "220px 1fr" : "258px 1fr 304px"}; gap: ${compact ? "14" : "22"}px; }
@@ -429,7 +433,7 @@ export default defineAction({
     "call get-design-snapshot with fileId for the kept screen before " +
     "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 " +
+    "into a complete but compact product UI in the 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 " +
@@ -613,7 +617,7 @@ export default defineAction({
               value:
                 `Keep "${screen.label}" (${screen.filename}, file id ${screen.id}) ` +
                 `from variant set ${variantSetId}. Delete each other variant screen at most once: ${otherScreens}. If delete-file says a screen is already missing, continue. ` +
-                `Then call get-design-snapshot exactly once 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" to replace the representative direction screen with the full requested app/product UI in the chosen visual style. The final saved screen must be the actual usable UI requested by the user, not a direction board, variant brief, summary card, or description of the direction. Do not call generate-design after this variant pick, do not repeat delete/snapshot cycles, do not create index.html, and do not resend a huge payload. Stop after the first successful edit-design save.`,
+                `Then call get-design-snapshot exactly once 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" to replace the representative direction screen with a complete but compact requested app/product UI in the chosen visual style. Prioritize the primary workflow; if the full feature list is too large for one reliable edit, render secondary details as visible controls, states, or affordances instead of expanding the action input. The final saved screen must be the actual usable UI requested by the user, not a direction board, variant brief, summary card, or description of the direction. Do not call generate-design after this variant pick, do not repeat delete/snapshot cycles, do not create index.html, and do not resend a huge payload. Stop after the first successful edit-design save.`,
             };
           }),
         },
@@ -631,7 +635,7 @@ export default defineAction({
       embed: true,
       fallbackInstructions: FALLBACK_INSTRUCTIONS,
       nextRequiredAction:
-        'Wait for the user to pick a screen in chat. Then delete each unchosen variant screen with delete-file at most once, call get-design-snapshot exactly once with fileId for the chosen screen, and call edit-design with that same fileId in a bounded pass. Use mode "replace-file" to replace the representative direction screen with the full requested app/product UI in the chosen visual style. Do not leave a direction board, variant brief, or summary card as the final result. Do not repeat delete/snapshot cycles. Do not call generate-design after a variant pick. Stop after the first successful edit-design save.',
+        'Wait for the user to pick a screen in chat. Then delete each unchosen variant screen with delete-file at most once, call get-design-snapshot exactly once with fileId for the chosen screen, and call edit-design with that same fileId in a bounded pass. Use mode "replace-file" to replace the representative direction screen with a complete but compact requested app/product UI in the chosen visual style. Prioritize the primary workflow and render secondary details as visible controls, states, or affordances if the full feature list is too large for one reliable edit. Do not leave a direction board, variant brief, or summary card as the final result. Do not repeat delete/snapshot cycles. Do not call generate-design after a variant pick. Stop after the first successful edit-design save.',
     };
   },
   link: ({ result }) => {