@agent-native/core 0.84.21 → 0.84.23

package/corpus/templates/design/.agents/skills/design-generation/SKILL.md

@@ -18,22 +18,62 @@ Every generated design uses:
 - **Google Fonts** — for distinctive typography (never Inter/Roboto/Arial)
 - **CSS Custom Properties** — for theming and tweaks panel integration
 
-## Aesthetic Quality Bar — avoid generic "AI slop"
-
-The single biggest lever on quality is refusing the defaults the model reaches
-for. Before generating, commit to a specific, opinionated direction. Banned by
-default (use only if the user explicitly asks):
-
-- **Fonts:** Inter, Roboto, Arial, system-ui, or other safe defaults. Always
-  pick a distinctive Google Font pairing (see the table below).
-- **The purple/indigo gradient on white** and other one-click hero clichés.
-- **Default shadcn/Tailwind grays** as the whole palette; flat indigo/blue
-  accents; the recurring "fingerprint" combo (teal accent + blinking status dot
-  + left accent bars + three-column hero).
-- **Predictable, evenly-weighted layouts** with no focal point.
-
-Do not converge even within your own "creative" picks — vary deliberately across
-generations so two designs never share the same fingerprint.
+## Why the workflow exists — it is the anti-slop engine
+
+Generic output ("AI slop") is a *workflow* failure, not a lack of talent. When one
+prompt has to set the taste, explore the options, and emit final code all at once,
+the safest answer is the statistical average of the training data: Inter, an
+indigo→violet gradient, a centered hero, three rounded icon cards. Design beats
+this by splitting those jobs across the tools — use them in order, don't collapse
+them:
+
+1. **Direction** — `show-design-questions` (or a stated thesis) sets taste on purpose.
+2. **Exploration** — `present-design-variants` compares genuinely different directions
+   before committing to one. **This step kills sameness; never skip it for open-ended work.**
+3. **Spec** — a linked design system and the `:root` token block capture the chosen look as reusable rules.
+4. **Code** — `generate-design` / `edit-design` execute a decision already made instead of guessing.
+
+Jumping straight to code is how you get slop. Let the phases (below) do the work.
+
+## Aesthetic quality bar — beat distributional convergence
+
+You sample toward the "on-distribution" center by default; refuse it. **Every
+"don't" here carries a "do"** — a banned default plus where to go instead —
+because banning Inter alone just makes you reach for Roboto next. Use a banned
+item only if the user explicitly asks.
+
+- **Fonts.** Don't: Inter, Roboto, Arial, Open Sans, system-ui. Do: a distinctive
+  Google Font pairing matched to the chosen aesthetic (see the table) — editorial
+  serif, grotesk display + mono, or one variable font pushed across weight extremes.
+- **Color.** Don't: the indigo/violet slop palette (`#6366F1`, `#8B5CF6`,
+  `#A855F7`), a purple gradient on white, or everything in default grays. Do:
+  anchor on one non-default family — clay/ochre/terracotta, ink/bone/mustard,
+  charcoal/lime, oxblood/cream, navy/copper, warm paper (`#FBF7F0`) over pure
+  white — with one decisive accent used sparingly for hierarchy, not decoration.
+- **Layout.** Don't: centered hero + one CTA + a row of three icon cards,
+  rounded-everything, `0.1`-opacity drop shadows, blanket glassmorphism, or the
+  badge-above-headline cliché. Do: asymmetric 60/40 or 70/30 splits, uneven
+  visual weight, one clear focal point, and flat confident surfaces.
+- **Background.** Don't: a single flat fill. Do: layered gradients, a geometric
+  pattern, grain, or a contextual texture that matches the theme.
+- **Copy & voice.** Don't: lorem ipsum or buzzword filler ("empower", "seamless",
+  "leverage", "revolutionize", "in today's fast-paced world"). Do: realistic
+  domain content in a specific voice — copy is design material.
+
+**Second-order convergence is real.** Even your "creative" picks converge (Space
+Grotesk everywhere; teal accent + blinking dot + left accent bars). Vary
+deliberately across generations so two designs never share a fingerprint.
+
+**Principles to quote back while building:** color creates hierarchy, not
+decoration · density over decoration · earn every animation · commit to one point
+of view. **Match code to the vision** — maximalist themes want elaborate motion
+and effects; minimal themes want restraint and precise spacing. Elegance is
+executing one vision fully.
+
+**References beat adjectives, but only with a reason.** "Linear: the quiet
+confidence of its spacing" or "Stripe: dense but never crowded" points somewhere
+specific; "Linear" alone collapses back to the average, and replying to your own
+output with "make it cleaner / more premium" means you're negotiating with vibes.
 
 ## Prompt the design in four layers
 
@@ -70,6 +110,23 @@ Pick a preset by `projectType`:
   `:root` CSS variable. Never hardcode `text-white` / `bg-black` / hex literals
   in the markup — that's what keeps brand + multi-screen consistency automatic.
 
+## Building on existing code, screens, or a design system
+
+When a design system, tokens, current screens, or a connected codebase already
+exist, the slop risk flips: the failure is ignoring the brand and reverting to
+defaults. The banned-defaults list above still applies, plus:
+
+- **Inspect before inventing.** Read the linked design system, the current
+  `:root` tokens, and existing screens (or the connected localhost/repo) first.
+  Derive the type scale, palette, radius, density, and component language from
+  what is actually there — don't restate a generic direction.
+- **Treat every reversion as a missing spec entry.** If output drifts to a
+  default (Inter, pill buttons, a stock radius) despite the brand, don't just
+  re-prompt — pin the explicit value into `:root` so it can't drift again.
+- **Consistency is not sameness.** Tokens alone make every screen "the same in
+  your colors". Keep structure and layout genuinely varied per screen while the
+  palette, type, and components stay on-brand.
+
 ## Generation Workflow — the canonical 4-phase flow
 
 This flow mirrors Claude Design's UX: ask → show variants → user picks → refine. Don't skip phases for new designs.
@@ -502,9 +559,8 @@ regeneration is slow, expensive, and regresses unrelated parts.
 
 ## What NOT to Do
 
-- Never use safe/generic fonts (Inter, Roboto, Arial, system-ui) or the
-  purple-on-white gradient, default shadcn grays, or the teal-accent +
-  blinking-dot + three-column-hero cliché — see the Aesthetic Quality Bar.
+- For aesthetics (fonts, palette, layout, backgrounds, copy), see the Aesthetic
+  quality bar above — every banned default there is out unless the user asks.
 - Never link prototype screens with real/relative URLs — use Alpine state,
   `data-screen`, or `#` anchors (see Multi-screen prototypes & navigation).
 - Never hardcode colors — always reference CSS custom properties (no raw

package/corpus/templates/design/.agents/skills/frontend-design/SKILL.md

@@ -53,6 +53,8 @@ Default to Apple/Linear-level restraint: make the primary workflow obvious, then
 - **Visual assets**: Websites, games, and object-focused pages need real or generated media when images help users understand the subject.
 - **Responsive fit**: Text must not overflow buttons, cards, tabs, sidebars, or fixed-format tools. Use stable dimensions for boards, grids, toolbars, and counters.
 
+**Beat convergence, not just defaults.** You sample toward the "on-distribution" center, so naming what to avoid is not enough: every "don't" needs a "do", or you converge on the next safe option (ban Inter and you reach for Roboto; ban purple gradients and you reach for Space Grotesk + a teal accent on every screen). Commit to one named direction, pair any reference with the reason it fits ("Linear: the quiet confidence of its spacing" — a bare "Linear" collapses back to the average), and match implementation effort to the vision: maximalist wants elaborate motion and effects, minimal wants restraint and precise spacing. When building on an existing app, inspect its tokens/type/components first and treat any drift back to a default as a missing token to pin, not something to re-prompt.
+
 ## Agent-Native UI Rules
 
 - Agent-native apps use React, Vite, Tailwind CSS, shadcn/ui, and `@tabler/icons-react`.

package/corpus/templates/design/AGENTS.md

@@ -222,12 +222,13 @@ patterns live in `.agents/skills/`.
   and open the editor in overview mode.
 - For human-in-the-loop UI exploration, create a design shell, call
   `present-design-variants` with 2-5 concise directions (three by default),
-  wait for the user to pick one in chat, delete the other generated variant
-  screens with `delete-file`, call `get-design-snapshot` with the selected
-  screen's `fileId`, then call `edit-design` on that same `fileId` for
-  follow-up refinement. Use `mode: "replace-file"` when expanding the
-  representative placeholder into the full chosen direction. Do not call
-  `generate-design` after a variant pick.
+  wait for the user to pick one in chat, delete each other generated variant
+  screen with `delete-file` at most once, call `get-design-snapshot` exactly
+  once with the selected screen's `fileId`, then call `edit-design` exactly once
+  on that same `fileId` for follow-up refinement. Use `mode: "replace-file"`
+  when expanding the representative placeholder into the full chosen direction.
+  Do not repeat delete/snapshot cycles, and do not call `generate-design` after
+  a variant pick.
 - If inline chat choice buttons are unavailable, the user can tell you the
   preferred screen name. Do not show a separate variant picker or ask them to
   paste a copyable handoff summary.

package/corpus/templates/design/README.md

@@ -0,0 +1,33 @@
+# Design
+
+An agent-native HTML prototyping studio — describe a screen and get a working
+Alpine/Tailwind prototype you can refine, tweak, and export. An open-source,
+self-hostable alternative to v0 and Lovable-style prototyping tools.
+
+**Live app: [design.agent-native.com](https://design.agent-native.com)**
+
+Instead of a layered drawing canvas, the agent generates complete self-contained
+HTML prototypes, renders them in an iframe, and lets you refine the result with
+prompts and visual tweak controls.
+
+## Features
+
+- Generate complete, working HTML prototypes from a prompt.
+- Compare multiple design directions, then keep refining the strongest one.
+- Visual tweak controls for common copy, layout, color, and spacing changes.
+- Save and reuse design-system preferences to stay on-brand.
+- Import existing HTML or reference material as context.
+- Export real files: HTML, ZIP, or PDF.
+
+## Develop locally
+
+Scaffold your own copy and run it:
+
+```bash
+npx @agent-native/core@latest create my-design --standalone --template design
+cd my-design
+pnpm install
+pnpm dev
+```
+
+Full docs: [agent-native.com/docs/template-design](https://agent-native.com/docs/template-design).

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

@@ -5,9 +5,72 @@ import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
 
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value && typeof value === "object" && !Array.isArray(value));
+}
+
+function parseDesignData(value: unknown): Record<string, unknown> {
+  if (typeof value !== "string" || !value.trim()) return {};
+  try {
+    const parsed = JSON.parse(value);
+    return isRecord(parsed) ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+
+function pruneKeyedRecord(
+  value: unknown,
+  fileId: string,
+): Record<string, unknown> | undefined {
+  if (!isRecord(value)) return undefined;
+  const next = { ...value };
+  delete next[fileId];
+  return next;
+}
+
+function variantScreenMatchesFile(screen: unknown, fileId: string): boolean {
+  if (typeof screen === "string") return screen === fileId;
+  return isRecord(screen) && screen.id === fileId;
+}
+
+function pruneDesignVariantSets(
+  value: unknown,
+  fileId: string,
+): Record<string, unknown> | undefined {
+  if (!isRecord(value)) return undefined;
+  const next: Record<string, unknown> = {};
+  for (const [key, rawSet] of Object.entries(value)) {
+    if (!isRecord(rawSet) || !Array.isArray(rawSet.screens)) {
+      next[key] = rawSet;
+      continue;
+    }
+    const screens = rawSet.screens.filter(
+      (screen) => !variantScreenMatchesFile(screen, fileId),
+    );
+    if (screens.length <= 1) continue;
+    next[key] = { ...rawSet, screens };
+  }
+  return next;
+}
+
+function pruneDeletedFileMetadata(
+  data: Record<string, unknown>,
+  fileId: string,
+): Record<string, unknown> {
+  return {
+    ...data,
+    canvasFrames: pruneKeyedRecord(data.canvasFrames, fileId) ?? {},
+    screenMetadata: pruneKeyedRecord(data.screenMetadata, fileId) ?? {},
+    localhostScreens: pruneKeyedRecord(data.localhostScreens, fileId) ?? {},
+    designVariantSets:
+      pruneDesignVariantSets(data.designVariantSets, fileId) ?? {},
+  };
+}
+
 export default defineAction({
   description:
-    "Delete a file from a design project. Validates ownership via the parent design's access.",
+    "Delete a file from a design project. Idempotent: if the file is already gone, returns deleted=false so cleanup retries can continue. Validates ownership via the parent design's access when the file exists.",
   schema: z.object({
     id: z.string().describe("File ID to delete"),
   }),
@@ -33,21 +96,34 @@ export default defineAction({
       )
       .limit(1);
 
-    if (!file) {
-      throw new Error(`File not found: ${id}`);
-    }
+    if (!file) return { id, deleted: false, alreadyMissing: true };
 
     await assertAccess("design", file.designId, "editor");
 
     const now = new Date().toISOString();
 
-    await db.delete(schema.designFiles).where(eq(schema.designFiles.id, id));
+    await db.transaction(async (tx) => {
+      const [currentDesign] = await tx
+        .select({ data: schema.designs.data })
+        .from(schema.designs)
+        .where(eq(schema.designs.id, file.designId))
+        .limit(1);
+      const nextData = pruneDeletedFileMetadata(
+        parseDesignData(currentDesign?.data),
+        id,
+      );
+
+      await tx.delete(schema.designFiles).where(eq(schema.designFiles.id, id));
 
-    // Update the parent design's updatedAt timestamp
-    await db
-      .update(schema.designs)
-      .set({ updatedAt: now })
-      .where(eq(schema.designs.id, file.designId));
+      // Update the parent design's board metadata and updatedAt timestamp.
+      await tx
+        .update(schema.designs)
+        .set({
+          data: JSON.stringify({ ...nextData, updatedAt: now }),
+          updatedAt: now,
+        })
+        .where(eq(schema.designs.id, file.designId));
+    });
 
     return { id, deleted: true };
   },

package/corpus/templates/design/actions/get-design-snapshot.ts

@@ -87,6 +87,7 @@ export default defineAction({
       err.statusCode = 409;
       throw err;
     }
+    const boundedFile = requestedFileId || requestedFilename ? files[0] : null;
 
     return {
       designId,
@@ -108,6 +109,18 @@ export default defineAction({
       appliedTweaks: snapshot.appliedTweaks,
       resolvedCssVars: snapshot.resolvedCssVars,
       deepLink: designDeepLink(designId),
+      ...(boundedFile
+        ? {
+            editTarget: {
+              designId,
+              fileId: boundedFile.id,
+              filename: boundedFile.filename,
+            },
+            nextRequiredAction:
+              `Call edit-design exactly once with designId ${designId} and fileId ${boundedFile.id} (${boundedFile.filename}). ` +
+              "Do not call delete-file or get-design-snapshot again unless edit-design fails with a concrete missing context error.",
+          }
+        : {}),
     };
   },
   link: ({ result }) => {

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

@@ -40,20 +40,18 @@ 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, call get-design-snapshot with fileId for " +
-  "the kept screen, then call edit-design on that same fileId in a bounded pass. " +
+  "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" when expanding the representative placeholder. ' +
   "Do not call generate-design after a variant pick.";
 
 const VARIANT_PICK_SUBMIT_MESSAGE =
-  "Use this design direction. Delete the other variant screens, call " +
-  "get-design-snapshot with the selected option's fileId (or filename if " +
-  "needed) for the kept file, then call edit-design with that same fileId in " +
-  'a bounded single-file pass. Use mode "replace-file" when replacing the ' +
-  "representative placeholder with the full chosen direction, or search/replace " +
-  "for smaller refinements. Do not call generate-design after a variant pick, " +
-  "do not create index.html, and do not resend a huge payload. Stop after the " +
-  "first successful edit-design save.";
+  "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. If a cleanup action reports a screen was " +
+  "already missing, continue. Use the exact file ids and tool instructions in " +
+  "the selected answer below. Do not repeat cleanup/read cycles, do not create " +
+  "a new index.html, and stop after the first successful screen update.";
 
 const variantSchema = z.object({
   id: z.string().min(1).describe("Stable variant id, e.g. 'minimal-focus'"),
@@ -609,8 +607,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}. ` +
-                `Then call get-design-snapshot with designId ${designId} and fileId ${screen.id} (filename ${screen.filename}), then call edit-design with fileId ${screen.id} on that same kept file in a bounded single-file pass. Use mode "replace-file" when replacing the representative placeholder with the full chosen direction, or search/replace for smaller refinements. Do not call generate-design after this variant pick, do not create index.html, and do not resend a huge payload. Stop after the first successful edit-design save.`,
+                `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" when replacing the representative placeholder with the full chosen direction, or search/replace for smaller refinements. Do not call generate-design after this variant pick, do not repeat delete/snapshot cycles, do not create index.html, and do not resend a huge payload. Stop after the first successful edit-design save.`,
             };
           }),
         },
@@ -628,7 +626,7 @@ export default defineAction({
       embed: true,
       fallbackInstructions: FALLBACK_INSTRUCTIONS,
       nextRequiredAction:
-        'Wait for the user to pick a screen in chat. Then delete the unchosen variant screens with delete-file, call get-design-snapshot with fileId for the chosen screen, and call edit-design with that same fileId in a bounded pass. Use mode "replace-file" when expanding the placeholder into the full chosen direction. Do not call generate-design after a variant pick. Stop after the first successful edit-design save.',
+        '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" when expanding the placeholder into the full chosen direction. 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 }) => {

package/corpus/templates/design/app/hooks/use-question-flow.ts

@@ -41,7 +41,7 @@ export function useQuestionFlow(
         formattedAnswers,
         "",
         designId
-          ? 'Now continue the design. Honor any answer about variations: if the user asked to explore options, call present-design-variants with 2-5 concise directions using label, description, accentColor, and feature bullets; omit large content HTML when needed because the action can render compact representative screens - wait for their chat pick, delete the unchosen variant screens, call get-design-snapshot with fileId for the kept screen, then call edit-design on that same fileId in a bounded pass. Use mode "replace-file" when expanding the representative placeholder into the full chosen direction. Do not call generate-design after a variant pick. Stop after the first successful edit-design save. Otherwise call generate-design with one complete, renderable index.html first. Do not ask another question unless a required decision is still genuinely missing.'
+          ? 'Now continue the design. Honor any answer about variations: if the user asked to explore options, call present-design-variants with 2-5 concise directions using label, description, accentColor, and feature bullets; omit large content HTML when needed because the action can render compact representative screens - wait for their chat pick, delete each unchosen variant screen at most once, call get-design-snapshot exactly once with fileId for the kept screen, then call edit-design exactly once on that same fileId in a bounded pass. Use mode "replace-file" when expanding the representative placeholder into the full chosen direction. Do not repeat delete/snapshot cycles. Do not call generate-design after a variant pick. Stop after the first successful edit-design save. Otherwise call generate-design with one complete, renderable index.html first. Do not ask another question unless a required decision is still genuinely missing.'
           : "Now continue the design. Honor any answer about variations: use variants only if requested; otherwise generate one polished direction.",
       ]
         .filter(Boolean)
@@ -79,7 +79,7 @@ export function useQuestionFlow(
         formattedAnswers,
         "",
         designId
-          ? 'Now continue the design. Honor any answer about variations: if the user asked to explore options, call present-design-variants with 2-5 concise directions using label, description, accentColor, and feature bullets; omit large content HTML when needed because the action can render compact representative screens - wait for their chat pick, delete the unchosen variant screens, call get-design-snapshot with fileId for the kept screen, then call edit-design on that same fileId in a bounded pass. Use mode "replace-file" when expanding the representative placeholder into the full chosen direction. Do not call generate-design after a variant pick. Stop after the first successful edit-design save. Otherwise call generate-design with one complete, renderable index.html first. Do not ask another question unless a required decision is still genuinely missing.'
+          ? 'Now continue the design. Honor any answer about variations: if the user asked to explore options, call present-design-variants with 2-5 concise directions using label, description, accentColor, and feature bullets; omit large content HTML when needed because the action can render compact representative screens - wait for their chat pick, delete each unchosen variant screen at most once, call get-design-snapshot exactly once with fileId for the kept screen, then call edit-design exactly once on that same fileId in a bounded pass. Use mode "replace-file" when expanding the representative placeholder into the full chosen direction. Do not repeat delete/snapshot cycles. Do not call generate-design after a variant pick. Stop after the first successful edit-design save. Otherwise call generate-design with one complete, renderable index.html first. Do not ask another question unless a required decision is still genuinely missing.'
           : "Now continue the design. Honor any answer about variations: use variants only if requested; otherwise generate one polished direction.",
       ]
         .filter(Boolean)

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

@@ -360,6 +360,16 @@ export function isScreenRootElementInfo(info: ElementInfo | null | undefined) {
   return tagName === "BODY" || tagName === "HTML";
 }
 
+export function shouldMirrorSelectedElementToAgentChat(
+  info: ElementInfo | null | undefined,
+): info is ElementInfo {
+  if (!info || isScreenRootElementInfo(info)) return false;
+  const text = info.textContent?.replace(/\s+/g, " ").trim();
+  if (!text) return true;
+  const labelText = text.replace(/^[^A-Za-z0-9]+/, "").toLowerCase();
+  return !labelText.startsWith("nothing here yet");
+}
+
 export function shouldIgnoreOverviewLayerCreationEcho(args: {
   pendingLayerId: string | null | undefined;
   pendingScreenId: string | null | undefined;
@@ -1573,7 +1583,7 @@ function designVariantGenerationDirectives(
     ...designSystemGenerationDirectives(designSystemId),
     "The user's prompt already asks to explore multiple directions, so DO NOT call `show-design-questions` first and DO NOT call `generate-design` first.",
     "Call `present-design-variants` with 2-5 concise directions (3 when unspecified). Prefer label, description, accentColor, and feature bullets; omit large content HTML when needed because the action can render compact representative screens.",
-    'Wait for the user\'s chat pick, delete the unchosen variant screens, call `get-design-snapshot` with `fileId` for the kept screen, then call `edit-design` on that same `fileId` in a bounded pass. Use `mode: "replace-file"` when expanding the representative placeholder into the full chosen direction. Do not call `generate-design` after a variant pick. Stop after the first successful `edit-design` save.',
+    'Wait for the user\'s chat pick, delete each unchosen variant screen at most once, call `get-design-snapshot` exactly once with `fileId` for the kept screen, then call `edit-design` exactly once on that same `fileId` in a bounded pass. Use `mode: "replace-file"` when expanding the representative placeholder into the full chosen direction. Do not repeat delete/snapshot cycles. Do not call `generate-design` after a variant pick. Stop after the first successful `edit-design` save.',
   ];
 }
 
@@ -1584,7 +1594,7 @@ function designGenerationDirectives(
   return [
     `Use the \`generate-design --designId="${designId}"\` action with exactly one complete, renderable \`index.html\` file first. The design already exists - DO NOT call create-design.`,
     ...designSystemGenerationDirectives(designSystemId),
-    'If the user asked to explore variations, call `present-design-variants` with 2-5 concise directions. Prefer label, description, accentColor, and feature bullets; omit large content HTML when needed because the action can render compact representative screens. Wait for their chat pick, delete the unchosen variant screens, call `get-design-snapshot` with `fileId` for the kept screen, then call `edit-design` on that same `fileId` in a bounded pass. Use `mode: "replace-file"` when expanding the representative placeholder into the full chosen direction. Do not call `generate-design` after a variant pick. Stop after the first successful `edit-design` save. Otherwise generate one polished first direction.',
+    'If the user asked to explore variations, call `present-design-variants` with 2-5 concise directions. Prefer label, description, accentColor, and feature bullets; omit large content HTML when needed because the action can render compact representative screens. Wait for their chat pick, delete each unchosen variant screen at most once, call `get-design-snapshot` exactly once with `fileId` for the kept screen, then call `edit-design` exactly once on that same `fileId` in a bounded pass. Use `mode: "replace-file"` when expanding the representative placeholder into the full chosen direction. Do not repeat delete/snapshot cycles. Do not call `generate-design` after a variant pick. Stop after the first successful `edit-design` save. Otherwise generate one polished first direction.',
     "Keep the first pass bounded enough to finish quickly: one self-contained Alpine.js + Tailwind CDN HTML document, polished but concise. Add 3-6 tweaks only when they naturally fit the design.",
     "After generate-design succeeds, stop and summarize what was created.",
   ];
@@ -9162,7 +9172,7 @@ export default function DesignEditor() {
 
   useEffect(() => {
     const key = "design:selected-element";
-    if (!id || !selectedElement) {
+    if (!id || !shouldMirrorSelectedElementToAgentChat(selectedElement)) {
       removeAgentChatContextItem(key);
       return;
     }

package/corpus/templates/design/changelog/2026-07-01-design-chat-no-longer-shows-an-empty-state-selection-chip-in-the-composer.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-01
+---
+
+Design chat no longer shows an empty-state selection chip in the composer.

package/corpus/templates/dispatch/.agents/skills/frontend-design/SKILL.md

@@ -53,6 +53,8 @@ Default to Apple/Linear-level restraint: make the primary workflow obvious, then
 - **Visual assets**: Websites, games, and object-focused pages need real or generated media when images help users understand the subject.
 - **Responsive fit**: Text must not overflow buttons, cards, tabs, sidebars, or fixed-format tools. Use stable dimensions for boards, grids, toolbars, and counters.
 
+**Beat convergence, not just defaults.** You sample toward the "on-distribution" center, so naming what to avoid is not enough: every "don't" needs a "do", or you converge on the next safe option (ban Inter and you reach for Roboto; ban purple gradients and you reach for Space Grotesk + a teal accent on every screen). Commit to one named direction, pair any reference with the reason it fits ("Linear: the quiet confidence of its spacing" — a bare "Linear" collapses back to the average), and match implementation effort to the vision: maximalist wants elaborate motion and effects, minimal wants restraint and precise spacing. When building on an existing app, inspect its tokens/type/components first and treat any drift back to a default as a missing token to pin, not something to re-prompt.
+
 ## Agent-Native UI Rules
 
 - Agent-native apps use React, Vite, Tailwind CSS, shadcn/ui, and `@tabler/icons-react`.

package/corpus/templates/dispatch/README.md

@@ -0,0 +1,34 @@
+# Dispatch
+
+The agent-native workspace control plane — a central Slack/Telegram inbox, a
+secrets vault, scheduled jobs, approvals, and an orchestrator agent that delegates
+work to the right specialist app over A2A.
+
+**Live app: [dispatch.agent-native.com](https://dispatch.agent-native.com)**
+
+Where other templates are domain apps (Mail, Calendar, Analytics, Brain),
+Dispatch is the app you run _alongside_ them to coordinate everything. It routes
+messages, holds shared credentials, runs cross-app jobs, and gates sensitive
+actions behind approvals.
+
+## Features
+
+- Central inbox for Slack DMs, Telegram, email, and A2A requests from other agents.
+- Orchestrator agent that triages and delegates domain work over A2A.
+- Secrets vault with per-app grants and an audit trail.
+- Workspace resources: shared skills, guardrails, agent profiles, and MCP servers.
+- Cross-app scheduled/recurring jobs.
+- Approval queue for destructive or external actions.
+
+## Develop locally
+
+Scaffold your own copy and run it:
+
+```bash
+npx @agent-native/core@latest create my-dispatch --standalone --template dispatch
+cd my-dispatch
+pnpm install
+pnpm dev
+```
+
+Full docs: [agent-native.com/docs/template-dispatch](https://agent-native.com/docs/template-dispatch).

package/corpus/templates/forms/.agents/skills/frontend-design/SKILL.md

@@ -53,6 +53,8 @@ Default to Apple/Linear-level restraint: make the primary workflow obvious, then
 - **Visual assets**: Websites, games, and object-focused pages need real or generated media when images help users understand the subject.
 - **Responsive fit**: Text must not overflow buttons, cards, tabs, sidebars, or fixed-format tools. Use stable dimensions for boards, grids, toolbars, and counters.
 
+**Beat convergence, not just defaults.** You sample toward the "on-distribution" center, so naming what to avoid is not enough: every "don't" needs a "do", or you converge on the next safe option (ban Inter and you reach for Roboto; ban purple gradients and you reach for Space Grotesk + a teal accent on every screen). Commit to one named direction, pair any reference with the reason it fits ("Linear: the quiet confidence of its spacing" — a bare "Linear" collapses back to the average), and match implementation effort to the vision: maximalist wants elaborate motion and effects, minimal wants restraint and precise spacing. When building on an existing app, inspect its tokens/type/components first and treat any drift back to a default as a missing token to pin, not something to re-prompt.
+
 ## Agent-Native UI Rules
 
 - Agent-native apps use React, Vite, Tailwind CSS, shadcn/ui, and `@tabler/icons-react`.

package/corpus/templates/forms/README.md

@@ -0,0 +1,34 @@
+# Forms
+
+An open-source, agent-native alternative to Typeform and Google Forms. Describe
+the form you want, refine it in the visual editor, and publish a public form that
+stores submissions in your own SQL database.
+
+**Live app: [forms.agent-native.com](https://forms.agent-native.com)**
+
+Build forms conversationally or by hand — the agent updates the schema and the
+preview updates from SQL-backed state. Route new submissions wherever you need
+them.
+
+## Features
+
+- Build and edit forms conversationally, with a live preview.
+- Visual builder for labels, validation, options, and field order.
+- Shipped field types: text, email, number, long text, select, multi-select,
+  checkbox, radio, date, rating, and scale.
+- Submissions stored in SQL with a per-response detail view and dashboard.
+- Route submissions to webhooks, Slack, Discord, or Google Sheets.
+- Publish public form URLs with a thank-you message.
+
+## Develop locally
+
+Scaffold your own copy and run it:
+
+```bash
+npx @agent-native/core@latest create my-forms --standalone --template forms
+cd my-forms
+pnpm install
+pnpm dev
+```
+
+Full docs: [agent-native.com/docs/template-forms](https://agent-native.com/docs/template-forms).

package/corpus/templates/macros/.agents/skills/frontend-design/SKILL.md

@@ -53,6 +53,8 @@ Default to Apple/Linear-level restraint: make the primary workflow obvious, then
 - **Visual assets**: Websites, games, and object-focused pages need real or generated media when images help users understand the subject.
 - **Responsive fit**: Text must not overflow buttons, cards, tabs, sidebars, or fixed-format tools. Use stable dimensions for boards, grids, toolbars, and counters.
 
+**Beat convergence, not just defaults.** You sample toward the "on-distribution" center, so naming what to avoid is not enough: every "don't" needs a "do", or you converge on the next safe option (ban Inter and you reach for Roboto; ban purple gradients and you reach for Space Grotesk + a teal accent on every screen). Commit to one named direction, pair any reference with the reason it fits ("Linear: the quiet confidence of its spacing" — a bare "Linear" collapses back to the average), and match implementation effort to the vision: maximalist wants elaborate motion and effects, minimal wants restraint and precise spacing. When building on an existing app, inspect its tokens/type/components first and treat any drift back to a default as a missing token to pin, not something to re-prompt.
+
 ## Agent-Native UI Rules
 
 - Agent-native apps use React, Vite, Tailwind CSS, shadcn/ui, and `@tabler/icons-react`.

package/corpus/templates/macros/README.md

@@ -0,0 +1,28 @@
+# Macros
+
+An agent-native, voice-driven calorie and macro tracker — an open-source take on
+MyFitnessPal-style logging. Speak or type what you ate and the agent logs the
+food, estimates calories and macros, and keeps your daily stats up to date.
+
+> **Internal/experimental template.** Macros is not shown in the public template
+> pickers. It exists as a reference app and demo.
+
+**Live app: [macros.agent-native.com](https://macros.agent-native.com)**
+
+## Features
+
+- Log foods and meals by voice or text through the agent.
+- Automatic calorie and macro estimation.
+- Voice corrections and quick edits.
+- Daily and historical stats.
+
+## Develop locally
+
+Scaffold your own copy and run it:
+
+```bash
+npx @agent-native/core@latest create my-macros --standalone --template macros
+cd my-macros
+pnpm install
+pnpm dev
+```

package/corpus/templates/mail/.agents/skills/frontend-design/SKILL.md

@@ -53,6 +53,8 @@ Default to Apple/Linear-level restraint: make the primary workflow obvious, then
 - **Visual assets**: Websites, games, and object-focused pages need real or generated media when images help users understand the subject.
 - **Responsive fit**: Text must not overflow buttons, cards, tabs, sidebars, or fixed-format tools. Use stable dimensions for boards, grids, toolbars, and counters.
 
+**Beat convergence, not just defaults.** You sample toward the "on-distribution" center, so naming what to avoid is not enough: every "don't" needs a "do", or you converge on the next safe option (ban Inter and you reach for Roboto; ban purple gradients and you reach for Space Grotesk + a teal accent on every screen). Commit to one named direction, pair any reference with the reason it fits ("Linear: the quiet confidence of its spacing" — a bare "Linear" collapses back to the average), and match implementation effort to the vision: maximalist wants elaborate motion and effects, minimal wants restraint and precise spacing. When building on an existing app, inspect its tokens/type/components first and treat any drift back to a default as a missing token to pin, not something to re-prompt.
+
 ## Agent-Native UI Rules
 
 - Agent-native apps use React, Vite, Tailwind CSS, shadcn/ui, and `@tabler/icons-react`.