@agent-native/core 0.80.2 → 0.80.5

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

@@ -45,7 +45,7 @@ interface UploadedFile {
   textContent?: string;
 }
 
-interface FigImportResult {
+interface BuilderIndexResult {
   ok: boolean;
   source: "builder";
   suggestedTitle: string;
@@ -54,6 +54,9 @@ interface FigImportResult {
   designSystemId: string;
   builderUrl: string;
   status: "in-progress";
+  localDesignSystemId?: string;
+  uploadedFileCount?: number;
+  instructions?: string;
 }
 
 export default function DesignSystemSetup() {
@@ -68,7 +71,6 @@ export default function DesignSystemSetup() {
   const [githubUrl, setGithubUrl] = useState("");
   const [githubLinks, setGithubLinks] = useState<GitHubLink[]>([]);
   const [codeFiles, setCodeFiles] = useState<UploadedFile[]>([]);
-  const [figFiles] = useState<UploadedFile[]>([]);
   const [docFiles, setDocFiles] = useState<UploadedFile[]>([]);
   const [imageFiles, setImageFiles] = useState<UploadedFile[]>([]);
   const [assets, setAssets] = useState<UploadedFile[]>([]);
@@ -96,42 +98,48 @@ export default function DesignSystemSetup() {
 
   // --- Figma .fig import (Builder design-system indexing) -----------------
   const realFigInputRef = useRef<HTMLInputElement>(null);
-  const [figParsing, setFigParsing] = useState(false);
-  const [figResult, setFigResult] = useState<FigImportResult | null>(null);
-  const [figError, setFigError] = useState<string | null>(null);
+  const [builderIndexing, setBuilderIndexing] = useState(false);
+  const [builderIndexResult, setBuilderIndexResult] =
+    useState<BuilderIndexResult | null>(null);
+  const [builderIndexError, setBuilderIndexError] = useState<string | null>(
+    null,
+  );
 
-  const handleFigImport = useCallback(
+  const handleBuilderIndexUpload = useCallback(
     async (e: React.ChangeEvent<HTMLInputElement>) => {
       const file = e.target.files?.[0];
       e.target.value = "";
       if (!file) return;
       if (!file.name.toLowerCase().endsWith(".fig")) {
-        setFigError(t("designSystemSetup.errors.chooseFig"));
+        setBuilderIndexError(t("designSystemSetup.errors.chooseFig"));
         return;
       }
-      setFigError(null);
-      setFigResult(null);
-      setFigParsing(true);
+      setBuilderIndexError(null);
+      setBuilderIndexResult(null);
+      setBuilderIndexing(true);
       try {
         const body = new FormData();
         body.append("file", file);
-        const res = await fetch(appApiPath("/api/import-figma-system"), {
-          method: "POST",
-          body,
-        });
+        const res = await fetch(
+          appApiPath("/api/index-design-system-with-builder"),
+          {
+            method: "POST",
+            body,
+          },
+        );
         const json = await res.json();
         if (!res.ok || json?.error) {
           throw new Error(json?.error || `Upload failed (${res.status})`);
         }
-        setFigResult(json as FigImportResult);
+        setBuilderIndexResult(json as BuilderIndexResult);
       } catch (err) {
-        setFigError(
+        setBuilderIndexError(
           err instanceof Error
             ? err.message
             : t("designSystemSetup.errors.parseFig"),
         );
       } finally {
-        setFigParsing(false);
+        setBuilderIndexing(false);
       }
     },
     [t],
@@ -155,7 +163,7 @@ export default function DesignSystemSetup() {
       githubUrl.trim() ||
       githubLinks.length > 0 ||
       codeFiles.length > 0 ||
-      figFiles.length > 0 ||
+      builderIndexResult ||
       docFiles.length > 0 ||
       imageFiles.length > 0 ||
       assets.length > 0 ||
@@ -170,7 +178,7 @@ export default function DesignSystemSetup() {
     githubUrl,
     githubLinks,
     codeFiles,
-    figFiles,
+    builderIndexResult,
     docFiles,
     imageFiles,
     assets,
@@ -383,9 +391,9 @@ export default function DesignSystemSetup() {
       }
     }
 
-    if (figFiles.length > 0) {
+    if (builderIndexResult) {
       parts.push(
-        `\n## Figma Files\nCall \`import-figma\` and describe the design system from:\n${figFiles.map((f) => `- ${f.name}`).join("\n")}`,
+        `\n## Builder-Indexed Figma File\nBuilder design-system indexing has already started.\n- Design system: ${builderIndexResult.designSystemId}\n- Local selectable design system: ${builderIndexResult.localDesignSystemId ?? "(not returned)"}\n- Project: ${builderIndexResult.projectId}\n- Job: ${builderIndexResult.jobId}\n- URL: ${builderIndexResult.builderUrl}\n\nUse Builder as the source of truth for extracted tokens, assets, and guidance. Do not call \`create-design-system\` again for this Builder-indexed source.`,
       );
     }
 
@@ -450,7 +458,7 @@ export default function DesignSystemSetup() {
     githubUrl,
     githubLinks,
     codeFiles,
-    figFiles,
+    builderIndexResult,
     docFiles,
     imageFiles,
     assets,
@@ -517,15 +525,15 @@ export default function DesignSystemSetup() {
               title={t("designSystemSetup.sections.figma.title")}
               description={t("designSystemSetup.sections.figma.description")}
             >
-              {!figResult ? (
+              {!builderIndexResult ? (
                 <>
                   <button
                     type="button"
                     onClick={() => realFigInputRef.current?.click()}
-                    disabled={figParsing}
+                    disabled={builderIndexing}
                     className="w-full rounded-xl border border-dashed border-border bg-card p-8 text-center hover:border-[#609FF8]/40 cursor-pointer disabled:cursor-wait disabled:opacity-70"
                   >
-                    {figParsing ? (
+                    {builderIndexing ? (
                       <div className="flex flex-col items-center gap-2">
                         <Spinner className="size-6 text-[#609FF8]" />
                         <p className="text-sm text-foreground/80">
@@ -553,24 +561,24 @@ export default function DesignSystemSetup() {
                     ref={realFigInputRef}
                     type="file"
                     accept=".fig"
-                    onChange={handleFigImport}
+                    onChange={handleBuilderIndexUpload}
                     className="hidden"
                   />
-                  {figError && (
+                  {builderIndexError && (
                     <div
                       role="alert"
                       className="mt-3 rounded-md border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-300"
                     >
-                      {figError}
+                      {builderIndexError}
                     </div>
                   )}
                 </>
               ) : (
-                <FigImportPreview
-                  result={figResult}
+                <BuilderIndexPreview
+                  result={builderIndexResult}
                   onReset={() => {
-                    setFigResult(null);
-                    setFigError(null);
+                    setBuilderIndexResult(null);
+                    setBuilderIndexError(null);
                   }}
                 />
               )}
@@ -1036,11 +1044,11 @@ function FileList({
   );
 }
 
-function FigImportPreview({
+function BuilderIndexPreview({
   result,
   onReset,
 }: {
-  result: FigImportResult;
+  result: BuilderIndexResult;
   onReset: () => void;
 }) {
   const t = useT();

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

@@ -0,0 +1,100 @@
+import { agentNativePath, useSession, useT } from "@agent-native/core/client";
+import {
+  IconArrowUpRight,
+  IconBrush,
+  IconDeviceDesktop,
+  IconDeviceFloppy,
+  IconLayoutGrid,
+} from "@tabler/icons-react";
+import { Link } from "react-router";
+
+import { Button } from "@/components/ui/button";
+
+function buildSignInHref(): string {
+  const ret = "/?intent=save";
+  return `${agentNativePath("/_agent-native/sign-in")}?return=${encodeURIComponent(ret)}`;
+}
+
+export default function VisualEditPage() {
+  const t = useT();
+  const { session } = useSession();
+  const hasSession = Boolean(session?.email);
+  const primaryHref = hasSession ? "/" : buildSignInHref();
+
+  return (
+    <main className="min-h-[100dvh] bg-background text-foreground">
+      <div className="mx-auto flex min-h-[100dvh] w-full max-w-6xl flex-col px-5 py-5 sm:px-8 lg:px-10">
+        <header className="flex h-12 shrink-0 items-center justify-between gap-4">
+          <Link
+            to="/"
+            className="text-sm font-semibold tracking-tight text-foreground"
+          >
+            {t("navigation.brand")}
+          </Link>
+          <Button asChild variant="outline" size="sm">
+            <a href={primaryHref}>
+              {hasSession
+                ? t("visualEdit.openDesign")
+                : t("visualEdit.saveCta")}
+              <IconArrowUpRight className="size-4" />
+            </a>
+          </Button>
+        </header>
+
+        <section className="grid flex-1 items-center gap-10 py-10 lg:grid-cols-[minmax(0,1fr)_26rem] lg:py-14">
+          <div className="max-w-2xl">
+            <div className="mb-4 inline-flex items-center gap-2 rounded-md border border-border bg-muted/40 px-2.5 py-1 text-xs font-medium text-muted-foreground">
+              <IconBrush className="size-3.5" />
+              {t("visualEdit.eyebrow")}
+            </div>
+            <h1 className="max-w-2xl text-4xl font-semibold tracking-normal text-foreground sm:text-5xl">
+              {t("visualEdit.title")}
+            </h1>
+            <p className="mt-4 max-w-xl text-base leading-7 text-muted-foreground">
+              {t("visualEdit.description")}
+            </p>
+            <div className="mt-7 flex flex-wrap items-center gap-3">
+              <Button asChild size="lg" className="gap-2">
+                <a href={primaryHref}>
+                  <IconDeviceFloppy className="size-4" />
+                  {hasSession
+                    ? t("visualEdit.openDesign")
+                    : t("visualEdit.saveCta")}
+                </a>
+              </Button>
+              <Button asChild variant="ghost" size="lg">
+                <Link to="/templates">{t("visualEdit.templatesCta")}</Link>
+              </Button>
+            </div>
+          </div>
+
+          <div className="rounded-lg border border-border bg-card p-3 shadow-sm">
+            <div className="rounded-md border border-border bg-background">
+              <div className="flex h-10 items-center gap-2 border-b border-border px-3">
+                <span className="h-2.5 w-2.5 rounded-full bg-destructive/70" />
+                <span className="h-2.5 w-2.5 rounded-full bg-amber-400" />
+                <span className="h-2.5 w-2.5 rounded-full bg-emerald-500" />
+                <div className="ms-auto flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <IconDeviceDesktop className="size-3.5" />
+                  {t("visualEdit.previewLabel")}
+                </div>
+              </div>
+              <div className="grid gap-3 p-4">
+                <div className="h-28 rounded-md border border-dashed border-border bg-muted/40" />
+                <div className="grid grid-cols-3 gap-3">
+                  <div className="h-20 rounded-md border border-border bg-background" />
+                  <div className="h-20 rounded-md border border-border bg-background" />
+                  <div className="h-20 rounded-md border border-border bg-background" />
+                </div>
+                <div className="flex items-center gap-2 rounded-md border border-border bg-muted/40 px-3 py-2 text-xs text-muted-foreground">
+                  <IconLayoutGrid className="size-3.5" />
+                  {t("visualEdit.layoutLabel")}
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}

package/corpus/templates/design/app/root.tsx

@@ -9,13 +9,21 @@ import {
   getThemeInitScript,
   getBrowserTabId,
   configureTracking,
+  useSession,
   useT,
 } from "@agent-native/core/client";
 import { IconSun, IconMoon } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useTheme } from "next-themes";
 import { useCallback, useState } from "react";
-import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useLocation,
+} from "react-router";
 import type { LinksFunction } from "react-router";
 
 import { Layout as AppLayout } from "@/components/layout/Layout";
@@ -132,18 +140,43 @@ function DesignCommandMenu({
   );
 }
 
+function RootContent() {
+  const location = useLocation();
+  const { session } = useSession();
+  const [cmdkOpen, setCmdkOpen] = useState(false);
+  const hasSession = Boolean(session?.email);
+  const isPublicVisualEdit = location.pathname === "/visual-edit";
+  useCommandMenuShortcut(
+    useCallback(() => {
+      if (hasSession && !isPublicVisualEdit) setCmdkOpen(true);
+    }, [hasSession, isPublicVisualEdit]),
+  );
+
+  const content = isPublicVisualEdit ? (
+    <Outlet />
+  ) : (
+    <AppLayout>
+      <Outlet />
+    </AppLayout>
+  );
+
+  return (
+    <>
+      {hasSession && <DbSyncSetup />}
+      <Toaster richColors position="bottom-left" />
+      {hasSession && !isPublicVisualEdit && (
+        <DesignCommandMenu open={cmdkOpen} onOpenChange={setCmdkOpen} />
+      )}
+      {content}
+    </>
+  );
+}
+
 export default function Root() {
   const [queryClient] = useState(() => createAgentNativeQueryClient());
-  const [cmdkOpen, setCmdkOpen] = useState(false);
-  useCommandMenuShortcut(useCallback(() => setCmdkOpen(true), []));
   return (
     <AppProviders queryClient={queryClient} i18n={{ catalog: i18nCatalog }}>
-      <DbSyncSetup />
-      <Toaster richColors position="bottom-left" />
-      <DesignCommandMenu open={cmdkOpen} onOpenChange={setCmdkOpen} />
-      <AppLayout>
-        <Outlet />
-      </AppLayout>
+      <RootContent />
     </AppProviders>
   );
 }

package/corpus/templates/design/app/routes/visual-edit.tsx

@@ -0,0 +1,7 @@
+import { messagesByLocale } from "@/i18n-data";
+
+export { default } from "../pages/VisualEdit";
+
+export function meta() {
+  return [{ title: messagesByLocale["en-US"].routeTitles.visualEdit }];
+}

package/corpus/templates/design/changelog/2026-06-28-live-cursors-now-keep-names-beside-a-cleaner-pointer-marker.md

@@ -3,4 +3,4 @@ type: improved
 date: 2026-06-28
 ---
 
-Live cursors now look closer to Figma, with a sharper pointer and cleaner name tag.
+Live cursors now use a sharper pointer with a cleaner adjacent name tag.

package/corpus/templates/design/changelog/2026-06-28-mode-switching-now-lives-in-a-compact-bottom-right-icon-dock.md

@@ -3,4 +3,4 @@ type: improved
 date: 2026-06-28
 ---
 
-The bottom toolbar now groups Figma-style tool menus with a distinct mode section.
+The bottom toolbar now groups tool menus with a distinct mode section.

package/corpus/templates/design/changelog/2026-06-28-visual-code-design-mode.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-28
+---
+
+Design mode now has a full-featured visual code canvas with adaptive inspection, patch proof, artboard duplication, clarify cards, and annotation queues.

package/corpus/templates/design/changelog/2026-06-29-design-generation-prompts-now-show-connect-ai-before-sending.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Design generation now shows Connect AI before sending when no LLM is connected and switches into loading as soon as generation starts.

package/corpus/templates/design/changelog/2026-06-29-design-mode-top-chrome-now-groups-collaborators-preview-shar.md

@@ -3,4 +3,4 @@ type: improved
 date: 2026-06-29
 ---
 
-Design mode top chrome now groups collaborators, preview, Share, and chat closer to Figma.
+Design mode top chrome now groups collaborators, preview, Share, and chat in a cleaner editor bar.

package/corpus/templates/design/changelog/2026-06-29-fixed-design-editor-exports-and-gradient-edits-so-multi-scre.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Fixed Design editor exports and gradient edits so multi-screen outputs and paint settings stay faithful.

package/corpus/templates/design/changelog/2026-06-29-longer-hosted-agent-turns.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Hosted design generation and editing chats have a longer background run window, reducing timeouts during complex creative turns.

package/corpus/templates/design/changelog/2026-06-29-png-export-handles-modern-css-color-functions-more-reliably.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+PNG export handles modern CSS color functions more reliably.

package/corpus/templates/design/changelog/2026-06-29-png-export-now-ignores-duplicate-clicks-while-a-download-is-.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+PNG export now ignores duplicate clicks while a download is already running.

package/corpus/templates/design/changelog/2026-06-29-public-visual-edit-and-shared-design-links-now-invite-visito.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Public visual-edit and shared design links now invite visitors to create a free account when they save or share.

package/corpus/templates/design/changelog/2026-06-29-visual-edit-actions-now-reject-missing-design-targets-before.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Visual edit actions now reject missing design targets before running.

package/corpus/templates/design/e2e/README.md

@@ -0,0 +1,71 @@
+# Design editor — real-browser E2E
+
+End-to-end tests that drive the **visual editor** in real Chromium with
+`@playwright/test`. They exercise the things unit tests can't: selecting,
+resizing, moving/reparenting, the layers panel, and the iframe bridge.
+
+## Run
+
+```bash
+pnpm e2e          # headless
+pnpm e2e:headed   # watch it drive a real browser
+pnpm e2e:ui       # Playwright UI mode
+```
+
+- `playwright.config.ts` starts its own dev server on **:9333** backed by a
+  throwaway SQLite db (`data/e2e.db`) — `APP_NAME=design` +
+  `DESIGN_DATABASE_URL=file:...` so a `.env` Postgres URL can never leak in.
+- Locally, if a server is already running on :9333 it is **reused**
+  (`reuseExistingServer`). The most reliable local loop is to keep a server up
+  yourself and run against it:
+  ```bash
+  APP_NAME=design DESIGN_DATABASE_URL="file:./data/e2e.db" PORT=9333 pnpm dev   # one terminal
+  E2E_BASE_URL=http://localhost:9333 pnpm e2e                                   # another
+  ```
+  `E2E_BASE_URL` makes Playwright skip server management entirely and just use
+  yours — handy when the cold Vite optimize is slow under Playwright's spawn.
+
+`e2e/global-setup.ts` signs up a test user (email/password — there is **no dev
+auth bypass**), saves the signed session to `e2e/.auth/state.json`, and seeds
+one design with a known fixture (`e2e/.auth/seed.json`) via the authenticated
+action endpoints. Both `.auth/` files are gitignored.
+
+## Why the editor needs special handling (the hard-won bits)
+
+The design renders inside a `sandbox="allow-scripts"` iframe with **no
+`allow-same-origin`**, and a pointer-capturing shield overlay sits on top. So:
+
+| Symptom                                                                 | Wrong approach                         | Right approach                                                                                                                                                                                             |
+| ----------------------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Can't read iframe DOM                                                   | `iframe.contentDocument` → `null`      | `page.frameLocator('iframe').locator(...)` — CDP targets the frame directly                                                                                                                                |
+| Clicks "intercepted by `<div data-agent-native-edit-overlay="shield">`" | normal click (actionability fails)     | `.click({ force: true })` — the shield is _meant_ to get the event and drive selection                                                                                                                     |
+| Asserting an edit happened                                              | reading iframe state                   | listen for the bridge's parent `postMessage`s: `element-select`, `element-hover`, `visual-style-change`, `visual-structure-change` (see `installBridge`/`waitForBridge`)                                   |
+| `page.screenshot()` hangs forever                                       | `page.screenshot()`                    | `cdpScreenshot()` — CDP `Page.captureScreenshot`, no stability wait (the page never idles; the agent-chat panel polls)                                                                                     |
+| Node ids change between runs                                            | hardcoding `data-agent-native-node-id` | select by **text/role**, then read the stamped id back from the `element-select` payload                                                                                                                   |
+| Drag move/resize                                                        | HTML5 `dragTo` on the canvas           | `page.mouse.move/down/up` with intermediate steps at `boundingBox()` coords (the canvas uses raw pointer events). The **layers panel** is in the parent doc and _does_ use HTML5 DnD → `locator.dragTo()`. |
+
+`helpers.ts` wraps all of this: `gotoEditor`, `selectByText`, `dragCanvasByText`,
+`installBridge`/`waitForBridge`, `cdpScreenshot`, `readSeedDesignId`.
+
+## Driving your REAL, logged-in Chrome (chrome-devtools-mcp)
+
+Playwright (above) is best for deterministic CI against a local throwaway DB.
+To exercise the **deployed app with your actual Google session** — no test
+user, no seeding — drive a real Chrome over CDP:
+
+```bash
+# 1. Launch Chrome (144+) with remote debugging. Use a separate profile dir so
+#    you can sign in normally without touching your main profile.
+"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
+  --remote-debugging-port=9222 \
+  --user-data-dir="$HOME/.chrome-e2e" &
+# 2. Sign in to the deployed Design app in that window.
+```
+
+Then attach the agent's **`chrome-devtools-mcp`** built-in (the `/qa` skill
+toggles it; it runs `npx chrome-devtools-mcp@latest --autoConnect`) and drive it
+with `navigate_page` / `take_snapshot` / `evaluate_script` / `click`. The exact
+same editor techniques apply — `evaluate_script` can install the bridge listener
+and read frame content; clicks go through the shield. This path uses your live
+auth and data, so it's ideal for manual/exploratory verification and smoke-
+testing prod, while the Playwright suite stays the deterministic regression net.