@agent-native/core 0.80.11 → 0.81.0

package/corpus/templates/design/app/pages/Index.tsx

@@ -249,6 +249,7 @@ export default function Index() {
       prompt: string,
       files: UploadedFile[],
       options: PromptComposerSubmitOptions,
+      pendingOptions?: { skipQuestions?: boolean },
     ) => {
       // Derive a short title from the prompt — first line, ~40 chars max,
       // word-boundary truncated. The full prompt still drives generation;
@@ -266,6 +267,7 @@ export default function Index() {
         files,
         title,
         designSystemId,
+        skipQuestions: pendingOptions?.skipQuestions,
         ...options,
       });
 
@@ -425,7 +427,9 @@ export default function Index() {
         ) : designs.length === 0 ? (
           <EmptyState
             onCreateDesign={openNewDesign}
-            onStarterPrompt={(prompt) => handleSubmitPrompt(prompt, [], {})}
+            onStarterPrompt={(prompt) =>
+              handleSubmitPrompt(prompt, [], {}, { skipQuestions: true })
+            }
           />
         ) : (
           <>

package/corpus/templates/design/changelog/2026-06-30-applying-the-one-click-fix-for-a-small-tap-target-accessibil.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Applying the one-click fix for a small tap-target accessibility finding now clears it on re-audit instead of having it reappear

package/corpus/templates/design/changelog/2026-06-30-canvas-creation-screen-dragging-undo-redo-and-image-fill-edi.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Canvas creation, screen dragging, undo/redo, and image fill edits are more reliable in the visual editor.

package/corpus/templates/design/changelog/2026-06-30-component-prop-edits-and-shader-fills-now-preserve-rapid-sam.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Component prop edits and shader fills now preserve rapid same-tab Design Studio changes.

package/corpus/templates/design/changelog/2026-06-30-design-can-browse-figma-library-components-and-insert-them-i.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-30
+---
+
+Design can browse Figma library components and insert them into the active screen with source provenance.

package/corpus/templates/design/changelog/2026-06-30-design-now-has-a-figma-style-left-rail-for-file-agent-assets.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+
+Design now has a Figma-style left rail for File, Agent, Assets, Tools, and Tokens.

package/corpus/templates/design/changelog/2026-06-30-design-now-has-native-components-embedded-media-and-figma-im.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-30
+---
+
+Design now has native components, embedded media, and Figma imports as separate asset tabs.

package/corpus/templates/design/changelog/2026-06-30-design-preview-now-includes-a-publish-app-waitlist-option-fr.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+
+Design preview now includes a publish app waitlist option from the play menu.

package/corpus/templates/design/changelog/2026-06-30-design-s-left-rail-now-matches-the-sidebar-chrome-and-uses-t.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+
+Design's left rail now matches the sidebar chrome and uses tighter labels.

package/corpus/templates/design/changelog/2026-06-30-design-s-tools-create-menu-now-stays-compact-instead-of-rend.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Design's Tools create menu now stays compact instead of rendering the full chat setup flow.

package/corpus/templates/design/changelog/2026-06-30-design-starter-prompts-now-begin-generating-immediately-and-.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Design starter prompts now begin generating immediately and avoid stalled native tool calls.

package/corpus/templates/design/changelog/2026-06-30-design-tools-now-use-a-quieter-figma-style-list-layout.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+
+Design tools now use a quieter Figma-style list layout.

package/corpus/templates/design/changelog/2026-06-30-drawing-rectangles-on-the-all-screens-canvas-no-longer-flash.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Drawing rectangles on the all screens canvas no longer flashes a default-size preview and selects the new rectangle.

package/corpus/templates/design/changelog/2026-06-30-fixed-code-native-design-studio-edits-so-component-props-mot.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Fixed Code-Native Design Studio edits so component props, motion CSS, shader fills, audits, and exports persist cleanly.

package/corpus/templates/design/changelog/2026-06-30-fixed-visual-editing-hover-overlays-and-spacing-handles-so-s.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Fixed visual editing hover overlays and spacing handles so selection stays steady.

package/corpus/templates/design/changelog/2026-06-30-motion-edits-now-save-automatically-without-a-separate-css-a.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+
+Motion edits now save automatically without a separate CSS apply button.

package/corpus/templates/design/changelog/2026-06-30-motion-timelines-now-reopen-as-editable-tracks-after-writing.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+
+Motion timelines now reopen as editable tracks after writing keyframes to CSS.

package/corpus/templates/design/changelog/2026-06-30-new-design-prompts-with-uploaded-screenshots-work-reliably-o.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+New design prompts with uploaded screenshots work reliably on hosted deployments.

package/corpus/templates/design/changelog/2026-06-30-screen-previews-in-all-screens-view-now-keep-rounded-outline.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Screen previews in all-screens view now keep rounded outlines visible at the corners.

package/corpus/templates/design/changelog/2026-06-30-selection-outlines-now-sit-flush-on-rectangles-drawn-directl.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Selection outlines now sit flush on rectangles drawn directly on the all screens canvas.

package/corpus/templates/design/changelog/2026-06-30-share-options-use-a-tighter-design-editor-popover-with-compa.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+
+Share options use a tighter Design editor popover with compact tabs and controls.

package/corpus/templates/design/changelog/2026-06-30-the-collapsed-motion-panel-now-stays-tucked-under-the-left-s.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+
+The Motion timeline now opens from a quiet footer row in the Layers panel.

package/corpus/templates/design/changelog/2026-06-30-the-design-inspector-now-shows-states-and-review-in-a-tighte.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-30
+---
+
+The Design inspector now shows States and Review in a tighter, less noisy sidebar layout.

package/corpus/templates/design/changelog/2026-06-30-the-sidebar-keeps-the-organization-picker-space-stable-while.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+The sidebar keeps the organization picker space stable while account details load.

package/corpus/templates/design/changelog/2026-06-30-tokens-can-now-be-imported-from-pasted-notes-code-files-fold.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-30
+---
+
+Tokens can now be imported from pasted notes, code files, folders, or the current design instead of entering each one by hand.

package/corpus/templates/design/e2e/helpers.ts

@@ -1,7 +1,14 @@
 import { readFile } from "node:fs/promises";
 import path from "node:path";
 
-import { expect, type Page, type FrameLocator } from "@playwright/test";
+import {
+  expect,
+  type Page,
+  type FrameLocator,
+  type Locator,
+} from "@playwright/test";
+
+import { FIXTURE_HTML, SEED_TITLE } from "./global-setup";
 
 /**
  * Helpers for driving the Design visual editor in real Chrome.
@@ -25,15 +32,122 @@ export async function readSeedDesignId(): Promise<string> {
   return designId;
 }
 
+function e2eBaseUrl(page: Page): string {
+  const currentUrl = page.url();
+  if (currentUrl && currentUrl !== "about:blank") {
+    return new URL(currentUrl).origin;
+  }
+  return (
+    process.env.E2E_BASE_URL ??
+    `http://127.0.0.1:${process.env.E2E_PORT ?? "9333"}`
+  );
+}
+
+async function postAction(
+  page: Page,
+  name: string,
+  input: Record<string, unknown>,
+): Promise<any> {
+  const res = await page.request.post(
+    `${e2eBaseUrl(page)}/_agent-native/actions/${name}`,
+    {
+      data: input,
+      headers: { "Content-Type": "application/json" },
+    },
+  );
+  if (!res.ok()) {
+    throw new Error(
+      `action ${name} failed: ${res.status()} ${await res.text()}`,
+    );
+  }
+  return res.json();
+}
+
+export async function createFixtureDesign(
+  page: Page,
+  title = SEED_TITLE,
+): Promise<string> {
+  const created = await postAction(page, "create-design", {
+    title,
+    projectType: "prototype",
+  });
+  const designId: string | undefined =
+    created?.id ?? created?.data?.id ?? created?.design?.id;
+  if (!designId) {
+    throw new Error(
+      `create-design did not return an id: ${JSON.stringify(created)}`,
+    );
+  }
+  await postAction(page, "create-file", {
+    designId,
+    filename: "index.html",
+    content: FIXTURE_HTML,
+    fileType: "html",
+  });
+  return designId;
+}
+
 const DESIGN_PREVIEW_IFRAME_SELECTOR = "iframe[data-design-preview-iframe]";
+const E2E_BASE_URL = process.env.E2E_BASE_URL;
+const E2E_BASE_PATH = (() => {
+  if (!E2E_BASE_URL) return "";
+  try {
+    return new URL(E2E_BASE_URL).pathname.replace(/\/$/, "");
+  } catch {
+    return "";
+  }
+})();
+
+export function appPath(path: string): string {
+  const route = new URL(path, "http://agent-native.local");
+  if (E2E_BASE_URL && E2E_BASE_PATH) {
+    const url = new URL(E2E_BASE_URL);
+    // dev-lazy strips the app mount (/design) before handing the request to the
+    // app, so the editor's own /design/:id route intentionally becomes
+    // /design/design/:id when E2E_BASE_URL points at the gateway mount.
+    url.pathname = `${E2E_BASE_PATH}${route.pathname}`;
+    url.search = route.search;
+    url.hash = route.hash;
+    return url.toString();
+  }
+  return `${route.pathname}${route.search}${route.hash}`;
+}
 
 export function designFrame(page: Page): FrameLocator {
-  return page.locator(DESIGN_PREVIEW_IFRAME_SELECTOR).first().contentFrame();
+  return page.locator(DESIGN_PREVIEW_IFRAME_SELECTOR).last().contentFrame();
+}
+
+async function selectableNodeByText(
+  page: Page,
+  text: string,
+): Promise<Locator> {
+  const candidates = designFrame(page).locator("[data-agent-native-node-id]", {
+    hasText: text,
+  });
+  const fallback = designFrame(page).getByText(text, { exact: false }).first();
+  const count = await candidates.count();
+  if (count === 0) return fallback;
+
+  let bestIndex = 0;
+  let bestArea = Number.POSITIVE_INFINITY;
+  for (let index = 0; index < count; index += 1) {
+    const candidate = candidates.nth(index);
+    const box = await candidate.boundingBox().catch(() => null);
+    if (!box || box.width <= 0 || box.height <= 0) continue;
+    const area = box.width * box.height;
+    if (area < bestArea) {
+      bestIndex = index;
+      bestArea = area;
+    }
+  }
+  return candidates.nth(bestIndex);
 }
 
 /** Open the editor for a design and wait for the toolbar + iframe to be ready. */
 export async function gotoEditor(page: Page, designId: string): Promise<void> {
-  await page.goto(`/design/${designId}`, { waitUntil: "domcontentloaded" });
+  await page.goto(appPath(`/design/${designId}`), {
+    waitUntil: "domcontentloaded",
+  });
   await expect(
     page.getByRole("button", { name: "Move", exact: true }),
   ).toBeVisible({ timeout: 30_000 });
@@ -44,9 +158,16 @@ async function waitForDesignBridgeReady(page: Page): Promise<void> {
   await expect(
     page.locator(DESIGN_PREVIEW_IFRAME_SELECTOR).first(),
   ).toBeVisible();
-  await expect(
-    designFrame(page).locator('[data-agent-native-edit-overlay="shield"]'),
-  ).toBeVisible({ timeout: 10_000 });
+  const overviewChromeVisible = await page
+    .getByRole("button", { name: "Full view", exact: true })
+    .first()
+    .isVisible()
+    .catch(() => false);
+  if (!overviewChromeVisible) {
+    await expect(
+      designFrame(page).locator('[data-agent-native-edit-overlay="shield"]'),
+    ).toBeVisible({ timeout: 10_000 });
+  }
   // Wait for the iframe bridge to stamp at least one selectable node.
   await expect
     .poll(
@@ -57,6 +178,25 @@ async function waitForDesignBridgeReady(page: Page): Promise<void> {
       { timeout: 20_000 },
     )
     .toBeGreaterThan(0);
+  if (overviewChromeVisible) {
+    await expect(page.locator("[data-screen-shell]").first()).toBeVisible({
+      timeout: 10_000,
+    });
+    await expect
+      .poll(
+        async () => {
+          const box = await page
+            .locator("[data-screen-shell]")
+            .first()
+            .locator("[data-screen-card]")
+            .boundingBox();
+          return box && box.width > 0 && box.height > 0;
+        },
+        { timeout: 10_000 },
+      )
+      .toBeTruthy();
+    await page.waitForTimeout(750);
+  }
 }
 
 export async function enterDirectMode(page: Page): Promise<void> {
@@ -76,7 +216,7 @@ export async function enterDirectMode(page: Page): Promise<void> {
         (
           await page
             .locator(DESIGN_PREVIEW_IFRAME_SELECTOR)
-            .first()
+            .last()
             .boundingBox()
         )?.width ?? 0,
       { timeout: 10_000 },
@@ -135,7 +275,7 @@ export async function selectByText(page: Page, text: string): Promise<any> {
   await enterDirectMode(page);
   await installBridge(page);
   await page.evaluate(() => ((window as any).__bridge = []));
-  const target = designFrame(page).getByText(text, { exact: false }).first();
+  const target = await selectableNodeByText(page, text);
   await target.waitFor({ state: "visible", timeout: 8_000 });
   const box = await target.boundingBox();
   if (!box) throw new Error(`no bounding box for "${text}"`);
@@ -157,60 +297,25 @@ async function dispatchShieldClickByText(
   page: Page,
   text: string,
 ): Promise<void> {
+  const target = await selectableNodeByText(page, text);
+  await target.waitFor({ state: "visible", timeout: 8_000 });
+  const rect = await target.boundingBox();
+  if (!rect) throw new Error(`unable to dispatch selection for "${text}"`);
+  const frameRect = await page
+    .locator(DESIGN_PREVIEW_IFRAME_SELECTOR)
+    .last()
+    .boundingBox();
+  if (!frameRect) throw new Error("unable to locate design iframe");
   await designFrame(page)
-    .locator("body")
-    .evaluate((_, targetText) => {
-      const normalizeText = (element: HTMLElement) =>
-        (element.textContent ?? "").replace(/\s+/g, " ").trim();
-      const isVisible = (element: HTMLElement) => {
-        const rect = element.getBoundingClientRect();
-        const styles = window.getComputedStyle(element);
-        return (
-          rect.width > 0 &&
-          rect.height > 0 &&
-          styles.display !== "none" &&
-          styles.visibility !== "hidden"
-        );
-      };
-      const shield = document.querySelector<HTMLElement>(
-        '[data-agent-native-edit-overlay="shield"]',
-      );
-      const leafCandidates = Array.from(
-        document.querySelectorAll<HTMLElement>(
-          "h1, h2, h3, h4, h5, h6, p, button, a, label, span, input, textarea",
-        ),
-      ).filter(isVisible);
-      const nodeCandidates = Array.from(
-        document.querySelectorAll<HTMLElement>("[data-agent-native-node-id]"),
-      ).filter(isVisible);
-      const target =
-        nodeCandidates.find(
-          (element) => normalizeText(element) === targetText,
-        ) ??
-        leafCandidates.find(
-          (element) => normalizeText(element) === targetText,
-        ) ??
-        nodeCandidates.find((element) =>
-          normalizeText(element).includes(targetText),
-        ) ??
-        leafCandidates.find((element) =>
-          normalizeText(element).includes(targetText),
-        );
-      if (!shield || !target) {
-        throw new Error(`unable to dispatch selection for "${targetText}"`);
-      }
-      const rect = target.getBoundingClientRect();
-      shield.dispatchEvent(
-        new MouseEvent("click", {
-          bubbles: true,
-          cancelable: true,
-          view: window,
-          clientX: rect.left + rect.width / 2,
-          clientY: rect.top + rect.height / 2,
-          detail: 1,
-        }),
-      );
-    }, text);
+    .locator('[data-agent-native-edit-overlay="shield"]')
+    .first()
+    .dispatchEvent("click", {
+      bubbles: true,
+      cancelable: true,
+      clientX: rect.x - frameRect.x + rect.width / 2,
+      clientY: rect.y - frameRect.y + rect.height / 2,
+      detail: 1,
+    });
 }
 
 /** Number of inputs in the right-hand inspector (proxy for "inspector populated"). */
@@ -231,10 +336,8 @@ export async function dragCanvasByText(
 ): Promise<string[]> {
   await selectByText(page, text);
   await page.evaluate(() => ((window as any).__bridge = []));
-  const box = await designFrame(page)
-    .getByText(text, { exact: false })
-    .first()
-    .boundingBox();
+  const target = await selectableNodeByText(page, text);
+  const box = await target.boundingBox();
   if (!box) throw new Error(`no bounding box for "${text}"`);
   const cx = box.x + box.width / 2;
   const cy = box.y + box.height / 2;

package/corpus/templates/design/package.json

@@ -8,7 +8,8 @@
     "build": "agent-native build",
     "start": "agent-native start",
     "test": "vitest --run",
-    "typecheck": "agent-native typecheck",
+    "typecheck": "agent-native typecheck && pnpm exec tsc --noEmit -p app/components/design/bridge/tsconfig.json",
+    "codegen:bridge": "tsx app/components/design/bridge/codegen.ts",
     "action": "agent-native action",
     "script": "agent-native script",
     "e2e": "playwright test",
@@ -78,6 +79,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "embla-carousel-react": "^8.6.0",
+    "esbuild": "^0.27.7",
     "input-otp": "^1.4.2",
     "next-themes": "^0.4.6",
     "oxfmt": "catalog:",

package/corpus/templates/design/server/db/schema.ts

@@ -75,6 +75,7 @@ export const designLocalhostConnections = table(
       .notNull()
       .default("connected"),
     lastSeenAt: text("last_seen_at"),
+    bridgeToken: text("bridge_token"),
     ownerEmail: text("owner_email").notNull(),
     orgId: text("org_id"),
     createdAt: text("created_at").default(now()),
@@ -178,6 +179,28 @@ export const designState = table("design_state", {
   ...ownableColumns(),
 });
 
+/**
+ * Localhost write-consent grants minted when the user explicitly allows file
+ * writes for a specific design + connection pair. Expire after 8 hours.
+ * Only HTML/CSS files may be written (enforced at the action layer).
+ */
+export const designLocalhostWriteGrants = table(
+  "design_localhost_write_grants",
+  {
+    id: text("id").primaryKey(),
+    designId: text("design_id").notNull(),
+    connectionId: text("connection_id").notNull(),
+    /** Filesystem root that was visible when the grant was created. */
+    rootPath: text("root_path").notNull(),
+    /** Short-lived token passed in the X-Bridge-Token header. */
+    bridgeToken: text("bridge_token").notNull(),
+    /** ISO timestamp after which the grant is considered expired (8 hours). */
+    grantedUntil: text("granted_until").notNull(),
+    createdAt: text("created_at").default(now()),
+    ...ownableColumns(),
+  },
+);
+
 /**
  * Cached accessibility audit + visual diff results for a design.
  * Keyed by design + optional base/compare design_versions pair + source ref.

package/corpus/templates/design/server/handlers/uploads.ts

@@ -1,5 +1,6 @@
 import crypto from "crypto";
 import fs from "fs";
+import os from "os";
 import path from "path";
 
 import { getSession } from "@agent-native/core/server";
@@ -11,7 +12,27 @@ import {
 } from "h3";
 import { nanoid } from "nanoid";
 
-const UPLOADS_ROOT = path.join(process.cwd(), "data", "uploads");
+function isServerlessRuntime(env: NodeJS.ProcessEnv = process.env): boolean {
+  return Boolean(
+    env.NETLIFY ||
+    env.VERCEL ||
+    env.AWS_LAMBDA_FUNCTION_NAME ||
+    env.LAMBDA_TASK_ROOT ||
+    env.CF_PAGES,
+  );
+}
+
+export function uploadsRootForRuntime(
+  cwd = process.cwd(),
+  env: NodeJS.ProcessEnv = process.env,
+): string {
+  const baseDir = isServerlessRuntime(env)
+    ? path.join(os.tmpdir(), "agent-native-design")
+    : cwd;
+  return path.join(baseDir, "data", "uploads");
+}
+
+const UPLOADS_ROOT = uploadsRootForRuntime();
 const MAX_EXTRACTED_TEXT_CHARS = 8_000;
 const TEXT_EXTENSIONS = new Set([
   ".html",

package/corpus/templates/design/server/lib/provider-api.ts

@@ -19,18 +19,21 @@ export type { ProviderApiMethod, ProviderApiRequestArgs };
 const resolveDesignCredential: ProviderApiCredentialResolver = async (
   options,
 ) => {
-  if (options.provider !== "github" || options.key !== "GITHUB_TOKEN") {
+  const supported =
+    (options.provider === "github" && options.key === "GITHUB_TOKEN") ||
+    (options.provider === "figma" && options.key === "FIGMA_ACCESS_TOKEN");
+  if (!supported) {
     return null;
   }
 
-  const value = await resolveSecret("GITHUB_TOKEN");
+  const value = await resolveSecret(options.key);
   if (!value) return null;
 
   return {
-    key: "GITHUB_TOKEN",
+    key: options.key,
     value,
     source: `${DESIGN_APP_ID}_secret`,
-    provider: "github",
+    provider: options.provider,
     scope: "request",
   };
 };