@agent-native/core 0.115.1 → 0.115.3

package/corpus/README.md

@@ -30,4 +30,4 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 
 - core files: 1527
 - toolkit files: 144
-- template files: 6367
+- template files: 6369

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @agent-native/core
 
+## 0.115.3
+
+### Patch Changes
+
+- a841109: Teach visual-plan agents to create and promote full-fidelity design surfaces without losing scoped CSS or duplicating an existing plan.
+
+## 0.115.2
+
+### Patch Changes
+
+- f0601ec: Collapse duplicate assistant tool-call ids in the shared agent loop so providers do not reject replayed tool-call history.
+
 ## 0.115.1
 
 ### Patch Changes

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.115.1",
+  "version": "0.115.3",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/corpus/core/src/agent/production-agent.ts

@@ -3087,6 +3087,21 @@ function normalizeToolCallInputForHistory(
   return { rawInput: input };
 }
 
+function dedupeAssistantToolCallsById(
+  content: import("./engine/types.js").EngineContentPart[],
+): import("./engine/types.js").EngineContentPart[] {
+  const seenToolCallIds = new Set<string>();
+  const deduped: import("./engine/types.js").EngineContentPart[] = [];
+  for (const part of content) {
+    if (part.type === "tool-call") {
+      if (seenToolCallIds.has(part.id)) continue;
+      seenToolCallIds.add(part.id);
+    }
+    deduped.push(part);
+  }
+  return deduped;
+}
+
 function toolInputSchemaErrorResult(
   toolName: string,
   input: unknown,
@@ -3996,6 +4011,8 @@ export async function runAgentLoop(opts: {
       }
     }
 
+    assistantContent = dedupeAssistantToolCallsById(assistantContent);
+
     const assistantContentForHistory = assistantContent.map((part) =>
       part.type === "tool-call"
         ? {

package/corpus/core/src/cli/skills-content/visual-plan-skill.ts

@@ -301,6 +301,18 @@ and screen ids across both surfaces. The canvas is the inspectable static refere
 the prototype is the interactive version of that same flow, not a separate
 design direction.
 
+Treat “higher fidelity,” “pixel-accurate,” “polished mockup,” “production-like,”
+“real design,” and “not a sketch/wireframe” as design-first language even when
+the request also says “mockup.” For a new plan, use \`create-plan-design\`. For
+an existing plan, keep the same plan id and call \`update-visual-plan\` with a
+\`set-visual-render-mode\` patch using \`renderMode: "design"\` plus the upgraded
+screen HTML/CSS in the same update. Ground the result in the real app shell,
+tokens, typography, spacing, and states, and add stable \`data-design-id\`
+targets. Put scoped styles in each screen's \`css\` field, never in a \`<style>\`
+tag. The viewer-local Clean toggle only changes one browser's wireframe
+preference; it is not a fidelity upgrade. Do not create a duplicate plan to
+handle a fidelity follow-up.
+
 ## Wireframe quality — read \`references/wireframe.md\`
 
 UI recap/plan wireframes must meet a strict quality bar — full-width chrome,
@@ -349,7 +361,9 @@ directory before authoring a plan.
   visual surface, canvas only, or canvas + prototype.
 - \`create-ui-plan\`: start a UI-first plan when the work is primarily product UI.
 - \`create-prototype-plan\`: start a prototype-first plan with a functional top
-  review surface.
+  review surface. If the interaction itself must also be high fidelity, set each
+  screen's \`renderMode\` to \`design\` and pass scoped styles through \`css\`;
+  otherwise use \`create-plan-design\` for design-first review.
 - \`create-plan-design\`: start a full-fidelity branded Design-tab plan with an
   optional matching Prototype tab.
 - \`convert-visual-plan-to-prototype\`: convert an existing HTML wireframe canvas
@@ -357,7 +371,10 @@ directory before authoring a plan.
 - \`create-visual-questions\`: use only when the user explicitly asks for a visual
   intake questionnaire, not as \`/visual-plan\` preflight.
 - \`update-visual-plan\`: revise content, status, or comments with targeted
-  \`contentPatches\` (see Core Workflow steps 6-7). \`replace-blocks\` and full
+  \`contentPatches\` (see Core Workflow steps 6-7). Use
+  \`set-visual-render-mode\` with \`renderMode: "design"\` when promoting an
+  existing plan to high fidelity, together with deliberate screen HTML/CSS;
+  render mode alone only removes sketch treatment. \`replace-blocks\` and full
   \`content\` replacement require \`expectedUpdatedAt\` from a fresh
   \`get-visual-plan\` call.
 - \`read-visual-plan-source\`: read the normalized plan as \`plan.mdx\`,

package/corpus/core/src/client/blocks/library/wireframe.tsx

@@ -142,7 +142,7 @@ function ArtboardFrame({
   const fitRef = useRef<HTMLDivElement>(null);
   const isDark = useIsDark();
   const theme: "light" | "dark" = isDark ? "dark" : "light";
-  const style = useWireframeStyle();
+  const preferredStyle = useWireframeStyle();
   const preset = SURFACE_PRESETS[surface] ?? SURFACE_PRESETS.desktop;
   const width = canvasWidth ?? preset.width;
   // AUTO-HEIGHT: with no explicit `canvasSize` the artboard height is driven by
@@ -164,6 +164,7 @@ function ArtboardFrame({
     fixedHeight ?? null,
   );
   const designMode = renderMode === "design";
+  const style = designMode ? "clean" : preferredStyle;
   const sketchy = !designMode && style === "sketchy" && !skeleton;
   const roughEnabled = sketchy && roughOverlay;
   const frameBorder = skeleton
@@ -409,6 +410,7 @@ function KitArtboard({
       surface={data.surface}
       compact={compact}
       skeleton={data.skeleton}
+      renderMode={data.renderMode}
       showFrame={showFrame}
       selector="[data-rough]"
       caption={data.caption}

package/corpus/templates/plan/.agents/skills/visual-plan/SKILL.md

@@ -301,6 +301,18 @@ and screen ids across both surfaces. The canvas is the inspectable static refere
 the prototype is the interactive version of that same flow, not a separate
 design direction.
 
+Treat “higher fidelity,” “pixel-accurate,” “polished mockup,” “production-like,”
+“real design,” and “not a sketch/wireframe” as design-first language even when
+the request also says “mockup.” For a new plan, use `create-plan-design`. For
+an existing plan, keep the same plan id and call `update-visual-plan` with a
+`set-visual-render-mode` patch using `renderMode: "design"` plus the upgraded
+screen HTML/CSS in the same update. Ground the result in the real app shell,
+tokens, typography, spacing, and states, and add stable `data-design-id`
+targets. Put scoped styles in each screen's `css` field, never in a `<style>`
+tag. The viewer-local Clean toggle only changes one browser's wireframe
+preference; it is not a fidelity upgrade. Do not create a duplicate plan to
+handle a fidelity follow-up.
+
 ## Wireframe quality — read `references/wireframe.md`
 
 UI recap/plan wireframes must meet a strict quality bar — full-width chrome,
@@ -349,7 +361,9 @@ directory before authoring a plan.
   visual surface, canvas only, or canvas + prototype.
 - `create-ui-plan`: start a UI-first plan when the work is primarily product UI.
 - `create-prototype-plan`: start a prototype-first plan with a functional top
-  review surface.
+  review surface. If the interaction itself must also be high fidelity, set each
+  screen's `renderMode` to `design` and pass scoped styles through `css`;
+  otherwise use `create-plan-design` for design-first review.
 - `create-plan-design`: start a full-fidelity branded Design-tab plan with an
   optional matching Prototype tab.
 - `convert-visual-plan-to-prototype`: convert an existing HTML wireframe canvas
@@ -357,7 +371,10 @@ directory before authoring a plan.
 - `create-visual-questions`: use only when the user explicitly asks for a visual
   intake questionnaire, not as `/visual-plan` preflight.
 - `update-visual-plan`: revise content, status, or comments with targeted
-  `contentPatches` (see Core Workflow steps 6-7). `replace-blocks` and full
+  `contentPatches` (see Core Workflow steps 6-7). Use
+  `set-visual-render-mode` with `renderMode: "design"` when promoting an
+  existing plan to high fidelity, together with deliberate screen HTML/CSS;
+  render mode alone only removes sketch treatment. `replace-blocks` and full
   `content` replacement require `expectedUpdatedAt` from a fresh
   `get-visual-plan` call.
 - `read-visual-plan-source`: read the normalized plan as `plan.mdx`,

package/corpus/templates/plan/AGENTS.md

@@ -104,6 +104,16 @@ Design tab as the visual source of truth and the Prototype tab as the same
 direction made interactive. (`create-plan-design` is an MCP tool reached from
 `/visual-plan`, not a separate slash command.)
 
+Treat “higher fidelity,” “pixel-accurate,” “polished mockup,” “production-like,”
+“real design,” and “not a sketch/wireframe” as design-first requests, even when
+the prompt also says “mockup.” For an existing plan, do not create a duplicate:
+call `update-visual-plan` on the same plan id with a
+`set-visual-render-mode` patch using `renderMode: "design"`, and replace or patch
+the affected screen HTML/CSS in the same update. Put scoped styles in each
+screen's `css` field, never in `<style>` tags. Merely switching the viewer-local
+Clean toggle removes rough.js for one browser but does not create a high-fidelity
+artifact.
+
 Use `/visual-recap` when the user wants a high-level review surface for a PR,
 commit, branch, or git diff that already changed. Recaps are reverse plans:
 derive blocks from the real diff, call `create-visual-recap` with the recap

package/corpus/templates/plan/actions/create-prototype-plan.ts

@@ -46,6 +46,9 @@ const prototypeSurfaceSchema = z.enum([
   "panel",
   "browser",
 ]);
+const prototypeRenderModeSchema = z.enum(["wireframe", "design"]);
+const boundedPrototypeHtml = (value: string) =>
+  !/<\/?(?:html|head|body|script|style)\b/i.test(value);
 
 const prototypeScreenSchema = z.object({
   id: z.string().optional().describe("Stable screen id"),
@@ -55,11 +58,32 @@ const prototypeScreenSchema = z.object({
     .optional()
     .describe("What the reviewer should inspect on this screen"),
   surface: prototypeSurfaceSchema.optional().default("browser"),
+  renderMode: prototypeRenderModeSchema
+    .optional()
+    .describe(
+      'Set to "design" for polished, high-fidelity, production-like, or branded screens. Design mode persists on the artifact and disables the rough.js treatment for every viewer.',
+    ),
   html: z
     .string()
+    .max(40_000)
+    .refine(boundedPrototypeHtml, {
+      message:
+        "Prototype HTML must be a bounded fragment without html/head/body/script/style tags. Put scoped styles in the css field.",
+    })
+    .optional()
+    .describe(
+      'Bounded semantic HTML fragment for a real interactive prototype. Use safe Alpine-like directives (x-data, x-model, x-for, x-text, x-show, :class, @click, @keydown.enter) for local behavior; use data-goto="screen-id" only for true screen/route changes. Never include html/body/script/style tags; put visual styling in css.',
+    ),
+  css: z
+    .string()
+    .max(20_000)
+    .refine(boundedPrototypeHtml, {
+      message:
+        "Prototype CSS must not include document, script, or style tags.",
+    })
     .optional()
     .describe(
-      'Bounded semantic HTML fragment for a real interactive prototype. Use safe Alpine-like directives (x-data, x-model, x-for, x-text, x-show, :class, @click, @keydown.enter) for local behavior; use data-goto="screen-id" only for true screen/route changes. Never include html/body/script/style tags.',
+      "Scoped CSS for this screen. Required when the request is high fidelity: use real codebase or brand tokens, deliberate typography, spacing, color, and state styling instead of embedding a style tag in html.",
     ),
   state: z
     .array(
@@ -112,7 +136,7 @@ const createPrototypePlanSchema = z.object({
     .optional()
     .default([])
     .describe(
-      "Prototype screens. Default to one functional screen when local UI behavior is enough; use 2-4 screens only for true routes/steps. Screen HTML should include working local controls, inputs, toggles, lists, filters, or lightweight flows where relevant.",
+      'Prototype screens. Default to one functional screen when local UI behavior is enough; use 2-4 screens only for true routes/steps. Screen HTML should include working local controls, inputs, toggles, lists, filters, or lightweight flows where relevant. For higher-fidelity requests, prefer create-plan-design; when the interaction itself requires a polished prototype, set each screen renderMode to "design" and pass its styling in css.',
     ),
   transitions: z
     .array(prototypeTransitionSchema)
@@ -143,7 +167,7 @@ const createPrototypePlanSchema = z.object({
 
 export default defineAction({
   description:
-    "Create a plan whose primary review surface is a running interactive prototype. For a document-first plan use create-visual-plan; for a UI-first wireframe canvas use create-ui-plan; for a recap of an existing diff use create-visual-recap; for full-fidelity branded design use create-plan-design. Prototype screen HTML uses safe Alpine-like directives for local state and data-goto for screen navigation only. Publish via this tool; never deliver the plan as inline chat text.",
+    'Create a plan whose primary review surface is a running interactive prototype. For a document-first plan use create-visual-plan; for a UI-first wireframe canvas use create-ui-plan; for a recap of an existing diff use create-visual-recap; for full-fidelity branded design use create-plan-design. Prototype screen HTML uses safe Alpine-like directives for local state and data-goto for screen navigation only. If a functional prototype must also be high fidelity, set renderMode to "design" and put scoped styles in css; never embed style tags in html because they are rejected. Publish via this tool; never deliver the plan as inline chat text.',
   schema: createPrototypePlanSchema.refine(
     (args) => Boolean(args.brief || args.goal),
     { message: "Either brief or goal is required." },

package/corpus/templates/plan/actions/get-plan-blocks.ts

@@ -49,7 +49,7 @@ const AUTHORING_RULES_NOTE = `
 
 **API endpoints**: keep \`api-endpoint\` and \`openapi-spec\` blocks in normal single-column document flow. Use \`columns\` only for an explicit before/after contract comparison.
 
-**renderMode**: leave unset or set to \`wireframe\` unless a design-only editable mock is required.\``;
+**Visual fidelity and renderMode**: leave \`renderMode\` unset or set it to \`wireframe\` for normal wireframes. “Higher fidelity,” “pixel-accurate,” “polished mockup,” “production-like,” “real design,” or “not a sketch/wireframe” requires \`renderMode: "design"\`, substantial branded HTML/CSS grounded in the real app, and stable \`data-design-id\` targets. Put scoped styles in the wireframe/prototype \`css\` field — never in a \`<style>\` tag. On an existing plan, update the same plan id with \`set-visual-render-mode\` plus the upgraded HTML/CSS; do not create a duplicate. The viewer-local Clean toggle is not a fidelity upgrade.\``;
 
 /**
  * Expose the live plan block vocabulary to the agent. The list is generated from

package/corpus/templates/plan/actions/update-visual-plan.ts

@@ -112,6 +112,7 @@ function contentPatchTargetId(patch: PlanContentPatch) {
   if ("blockId" in patch) return patch.blockId;
   if ("screenId" in patch) return patch.screenId;
   if (patch.op === "set-metadata") return "plan-metadata";
+  if (patch.op === "set-visual-render-mode") return "visual-render-mode";
   if (patch.op === "set-prototype" || patch.op === "remove-prototype") {
     return "prototype";
   }
@@ -451,7 +452,7 @@ function contentPatchDetails(input: {
 const CONTENT_DESCRIPTION =
   "Destructive full structured content replacement. Read the latest plan first and pass its updatedAt as expectedUpdatedAt. Prefer granular contentPatches for ordinary edits; use this only for intentional broad restructuring.";
 const CONTENT_PATCHES_DESCRIPTION =
-  "Targeted structured content edits addressed by stable id. Prefer granular operations for live plans. The destructive replace-blocks operation requires expectedUpdatedAt from a fresh read. patch-visual-plan-source is only for exported MDX folders. Supported ops: set-metadata for title/brief, set-prototype / remove-prototype / update-prototype-screen / patch-prototype-html for live prototype surfaces; update-block / replace-block, update-rich-text, patch-wireframe-html, patch-diagram-html, update-wireframe-node, replace-wireframe-screen, update-canvas-frame, update-canvas-annotation / append-canvas-annotation, append-block / remove-block, update-custom-html.";
+  "Targeted structured content edits addressed by stable id. Prefer granular operations for live plans. The destructive replace-blocks operation requires expectedUpdatedAt from a fresh read. patch-visual-plan-source is only for exported MDX folders. Supported ops: set-metadata for title/brief; set-visual-render-mode to persist `design` (high fidelity, authored CSS, no rough.js for any viewer) or `wireframe` across canvas, linked blocks, and prototype screens; set-prototype / remove-prototype / update-prototype-screen / patch-prototype-html for live prototype surfaces; update-block / replace-block, update-rich-text, patch-wireframe-html, patch-diagram-html, update-wireframe-node, replace-wireframe-screen, update-canvas-frame, update-canvas-annotation / append-canvas-annotation, append-block / remove-block, update-custom-html. A fidelity upgrade must also replace or patch the existing screen HTML/CSS with deliberate branded design; changing render mode alone only removes the sketch treatment.";
 
 // Named so `agentInputSchema` below can `.extend()` it with compact
 // `content`/`contentPatches` fields instead of duplicating every other key.
@@ -528,7 +529,7 @@ const updateVisualPlanSchema = z.object({
 
 export default defineAction({
   description:
-    "Update an Agent-Native Plan's structured content blocks, prototype screens, sections, comments, or status. Prefer contentPatches for targeted edits. Use full content only for broad restructuring. Works on plans and recaps alike when you have editor access; with viewer access (common on PR recaps published by CI) only comment-only calls succeed — to change a recap you cannot edit, publish a replacement with create-visual-recap instead of retrying this call.",
+    "Update an Agent-Native Plan's structured content blocks, prototype screens, visual fidelity, sections, comments, or status. Prefer contentPatches for targeted edits. When a user asks for higher fidelity on an existing plan, update that same plan in place: use set-visual-render-mode with design and provide polished screen HTML/CSS in the same call instead of creating a duplicate plan or only toggling the viewer-local clean style. Use full content only for broad restructuring. Works on plans and recaps alike when you have editor access; with viewer access (common on PR recaps published by CI) only comment-only calls succeed — to change a recap you cannot edit, publish a replacement with create-visual-recap instead of retrying this call.",
   schema: updateVisualPlanSchema,
   // ADVERTISED-ONLY: same top-level shape, but `content`/`contentPatches`
   // swap the deep per-block-type union for a compact `type`-enum stand-in.

package/corpus/templates/plan/app/components/plan/PlanContentRenderer.tsx

@@ -652,10 +652,24 @@ export function PlanContentRenderer({
     hiddenChangedFileBlockIds,
     hideChangedFiles,
   ]);
-  const blockLookup = useMemo(
-    () => new Map(content.blocks.map((block) => [block.id, block])),
-    [content.blocks],
-  );
+  const blockLookup = useMemo(() => {
+    const blocks = new Map<string, PlanBlock>();
+    const visit = (block: PlanBlock) => {
+      blocks.set(block.id, block);
+      if (block.type === "tabs") {
+        for (const tab of block.data.tabs) {
+          for (const child of tab.blocks) visit(child);
+        }
+      }
+      if (block.type === "columns") {
+        for (const column of block.data.columns) {
+          for (const child of column.blocks) visit(child);
+        }
+      }
+    };
+    for (const block of content.blocks) visit(block);
+    return blocks;
+  }, [content.blocks]);
   const fileToBlockIdMap = useMemo<Map<string, string>>(() => {
     if (!isRecap) return new Map();
     const map = new Map<string, string>();

package/corpus/templates/plan/app/components/plan/PlanVisualSurface.tsx

@@ -60,7 +60,7 @@ export function PlanVisualSurface({
   onDesignElementStyleChange,
 }: PlanVisualSurfaceProps) {
   const t = useT();
-  const designCanvas = isDesignCanvas(canvas);
+  const designCanvas = isDesignCanvas(canvas, blockLookup);
   const [selectedDesignElement, setSelectedDesignElement] =
     useState<DesignElementSelection | null>(null);
   const selectedDesignElementKey = selectedDesignElement
@@ -226,10 +226,17 @@ export function PlanVisualSurface({
   return null;
 }
 
-function isDesignCanvas(canvas: PlanContent["canvas"] | undefined) {
+function isDesignCanvas(
+  canvas: PlanContent["canvas"] | undefined,
+  blockLookup: Map<string, PlanBlock>,
+) {
   return Boolean(
     canvas?.mode === "design" ||
-    canvas?.frames.some((frame) => frame.wireframe?.renderMode === "design"),
+    canvas?.frames.some((frame) => {
+      if (frame.wireframe) return frame.wireframe.renderMode === "design";
+      const block = frame.blockId ? blockLookup.get(frame.blockId) : undefined;
+      return block?.type === "wireframe" && block.data.renderMode === "design";
+    }),
   );
 }
 

package/corpus/templates/plan/app/components/plan/wireframe/Wireframe.tsx

@@ -194,7 +194,7 @@ function ArtboardFrame({
   const fitRef = useRef<HTMLDivElement>(null);
   const { resolvedTheme } = useTheme();
   const theme: "light" | "dark" = resolvedTheme === "dark" ? "dark" : "light";
-  const style = useWireframeStyle();
+  const preferredStyle = useWireframeStyle();
   const preset = SURFACE_PRESETS[surface] ?? SURFACE_PRESETS.desktop;
   const height = canvasSize ?? preset.height;
   const width = canvasWidth ?? preset.width;
@@ -202,6 +202,7 @@ function ArtboardFrame({
   const maxFrameWidth = compact ? preset.width * baseScale : width;
   const [fitScale, setFitScale] = useState(baseScale);
   const designMode = renderMode === "design";
+  const style = designMode ? "clean" : preferredStyle;
   const sketchy = !designMode && style === "sketchy" && !skeleton;
   const roughEnabled = sketchy && roughOverlay;
   const paper = designMode
@@ -560,6 +561,7 @@ function KitWireframe({
       canvasSize={canvasSize}
       canvasWidth={canvasWidth}
       skeleton={data.skeleton}
+      renderMode={data.renderMode}
       showFrame={showFrame}
       selector="[data-rough]"
       caption={data.caption}

package/corpus/templates/plan/app/i18n/en-US.ts

@@ -564,6 +564,10 @@ const messages = {
           label: "UI flow",
           description: "UI flow - wireframes and states",
         },
+        design: {
+          label: "High-fidelity design",
+          description: "High-fidelity design - polished branded screens",
+        },
         questions: {
           label: "Visual questions",
           description: "Visual questions - explicit intake",
@@ -587,6 +591,8 @@ const messages = {
           "# Implementation plan\n\nPaste the existing Codex or Claude Code plan here and turn it into a visual review document.",
       },
       assessment: {
+        design:
+          "Auto detected a high-fidelity request; the agent will create polished branded screens.",
         ui: "Auto detected UI states or flows; the agent will make a wireframe-first plan.",
         visual:
           "Auto will ask the agent for a rich technical plan with diagrams and implementation detail.",

package/corpus/templates/plan/app/lib/create-plan-routing.ts

@@ -0,0 +1,39 @@
+export type CreatePlanKind = "auto" | "design" | "ui" | "questions" | "visual";
+export type ResolvedPlanKind = Exclude<CreatePlanKind, "auto">;
+export type AutoPlanKind = Exclude<ResolvedPlanKind, "questions">;
+
+export function isProbablyImportedPlan(prompt: string) {
+  const trimmed = prompt.trim();
+  const lines = trimmed.split(/\r?\n/).filter((line) => line.trim());
+  if (trimmed.length > 900 && lines.length > 8) return true;
+  const hasHeading = lines.some((line) => /^#{1,4}\s+\S/.test(line.trim()));
+  const checklistCount = lines.filter((line) =>
+    /^[-*]\s+\[[ x]\]\s+\S/i.test(line.trim()),
+  ).length;
+  const taskCount = lines.filter((line) =>
+    /^([-*]|\d+[.)])\s+\S/.test(line.trim()),
+  ).length;
+  const hasPlanLanguage =
+    /\b(implementation plan|acceptance criteria|milestones?|phases?|risks?|open questions?|test plan)\b/i.test(
+      trimmed,
+    );
+  return (
+    trimmed.includes("```") ||
+    (hasHeading && (taskCount >= 3 || hasPlanLanguage)) ||
+    (checklistCount >= 2 && trimmed.length > 220)
+  );
+}
+
+export function assessPlanPrompt(prompt: string): { kind: AutoPlanKind } {
+  const highFidelity =
+    /\b(high(?:er)?[- ]fidelity|full[- ]fidelity|hi[- ]fi|polished(?: mockups?)?|production[- ](?:like|ready)|pixel[- ](?:perfect|accurate)|brand(?:ed|[- ]aware)|real design|not (?:a )?(?:sketch(?:y)?|wireframe)|beyond (?:the )?(?:sketch|wireframe))\b/i.test(
+      prompt,
+    );
+  if (highFidelity) return { kind: "design" };
+
+  const uiDirection =
+    /\b(ui|screen|screens|layout|wireframe|mockup|form factor|mobile|desktop|responsive|nav|sidebar|flow|redesign|empty state|loading state|error state)\b/i.test(
+      prompt,
+    );
+  return { kind: uiDirection ? "ui" : "visual" };
+}

package/corpus/templates/plan/app/pages/PlansPage.tsx

@@ -239,6 +239,11 @@ import {
   type PlanAccessStatusResponse,
   type PublishVisualPlanResult,
 } from "@/hooks/use-plans";
+import {
+  assessPlanPrompt,
+  isProbablyImportedPlan,
+  type CreatePlanKind,
+} from "@/lib/create-plan-routing";
 import {
   getDesktopPlanFiles,
   type DesktopPlanFilesFolder,
@@ -1596,9 +1601,9 @@ function buildPlanAgentContext(input: {
       : [
           "Fast iteration workflow:",
           "1. Call get-visual-plan with this plan ID to read structured content, exported HTML, sections, comments, and activity.",
-          "2. Prefer update-visual-plan contentPatches for targeted edits. Examples: update-rich-text for copy, patch-prototype-html / update-prototype-screen for live prototype states, update-wireframe-node for one kit-tree node, update-canvas-frame for frame layout, append-canvas-annotation / update-canvas-annotation for canvas markup, append-block/remove-block for document changes, or replace-block for a single block. Use full content only for broad restructuring. Use html only when preserving or importing a legacy standalone HTML artifact.",
+          '2. Prefer update-visual-plan contentPatches for targeted edits. Examples: update-rich-text for copy, patch-prototype-html / update-prototype-screen for live prototype states, update-wireframe-node for one kit-tree node, update-canvas-frame for frame layout, append-canvas-annotation / update-canvas-annotation for canvas markup, append-block/remove-block for document changes, or replace-block for a single block. When the user asks for higher fidelity, polished mockups, production-like UI, real design, or anything "not sketchy," update this same plan in place: rewrite the relevant screen HTML/CSS and include set-visual-render-mode with renderMode design. Do not create a second plan, put CSS in style tags, or treat the viewer-local Clean toggle as a fidelity upgrade. Use full content only for broad restructuring. Use html only when preserving or importing a legacy standalone HTML artifact.',
           "3. Preserve the user's existing annotation comments and intent unless the user asks to remove or resolve them.",
-          "4. Keep the output as a refined document with rich text, tables, sketch diagrams, wireframes, implementation maps, code tabs, and bounded custom HTML fragments.",
+          "4. Match the requested fidelity: ordinary UI planning can use sketch diagrams and wireframes; high-fidelity requests need the persisted Design surface with deliberate branded HTML/CSS and stable data-design-id targets.",
           "5. After applying feedback, keep the plan scannable, editable, and serious instead of turning it into a marketing page.",
           "6. Work the actionable agent comments first. Treat human-review comments as FYI/questions/approval items; do not silently resolve those unless the user explicitly asks.",
           "7. When visual screenshots are attached, each crop is centered near a comment marker and has a red ring on the exact commented point. Use the comment IDs and anchor details below to connect screenshots to threads. If a visual comment is listed as overflow, rely on its anchorDetails/coordinates and call get-plan-feedback for the full manifest.",
@@ -8323,93 +8328,6 @@ const CREATE_PLAN_PROMPTS = [
   },
 ] as const;
 
-type CreatePlanKind = "auto" | "ui" | "questions" | "visual";
-type ResolvedPlanKind = Exclude<CreatePlanKind, "auto">;
-type AutoPlanKind = Exclude<ResolvedPlanKind, "questions">;
-
-function isProbablyImportedPlan(prompt: string) {
-  const trimmed = prompt.trim();
-  const lines = trimmed.split(/\r?\n/).filter((line) => line.trim());
-  if (trimmed.length > 900 && lines.length > 8) return true;
-  const hasHeading = lines.some((line) => /^#{1,4}\s+\S/.test(line.trim()));
-  const checklistCount = lines.filter((line) =>
-    /^[-*]\s+\[[ x]\]\s+\S/i.test(line.trim()),
-  ).length;
-  const taskCount = lines.filter((line) =>
-    /^([-*]|\d+[.)])\s+\S/.test(line.trim()),
-  ).length;
-  const hasPlanLanguage =
-    /\b(implementation plan|acceptance criteria|milestones?|phases?|risks?|open questions?|test plan)\b/i.test(
-      trimmed,
-    );
-  return (
-    trimmed.includes("```") ||
-    (hasHeading && (taskCount >= 3 || hasPlanLanguage)) ||
-    (checklistCount >= 2 && trimmed.length > 220)
-  );
-}
-
-function assessPlanPrompt(prompt: string): {
-  kind: AutoPlanKind;
-} {
-  let score = 0;
-  let ambiguitySignals = 0;
-
-  const wantsExploration =
-    /\b(ask questions|questions first|intake first|show me options|explore options|help me choose|not sure|unsure|which direction|compare)\b/i.test(
-      prompt,
-    );
-  const exactOrTrivial =
-    /\b(typo|copy tweak|one line|single file|exactly|no questions|don't ask|dont ask|just implement)\b/i.test(
-      prompt,
-    );
-  const uiDirection =
-    /\b(ui|screen|screens|layout|wireframe|mockup|form factor|mobile|desktop|responsive|nav|sidebar|flow|redesign|empty state|loading state|error state)\b/i.test(
-      prompt,
-    );
-  const multipleApproaches =
-    /\b(option|variant|alternative|tradeoff|approach|architecture|data model|permission|auth|integration|migration|state machine)\b/i.test(
-      prompt,
-    );
-  const newSurface =
-    /\b(new surface|multi-screen|workflow|journey|end-to-end|dashboard|settings|checkout|onboarding|review flow)\b/i.test(
-      prompt,
-    );
-  const risky =
-    /\b(auth|permission|billing|migration|schema|integration|oauth|webhook|security|role|privacy|external)\b/i.test(
-      prompt,
-    );
-
-  if (uiDirection) {
-    score += 2;
-    ambiguitySignals += 1;
-  }
-  if (multipleApproaches) {
-    score += 2;
-    ambiguitySignals += 1;
-  }
-  if (newSurface) score += 1;
-  if (risky) score += 1;
-  if (
-    wantsExploration ||
-    /\b(best|better|improve|explore|direction|choose)\b/i.test(prompt)
-  ) {
-    score += 1;
-    ambiguitySignals += 1;
-  }
-  if (exactOrTrivial) score -= 3;
-
-  if (uiDirection) {
-    return {
-      kind: "ui",
-    };
-  }
-
-  return {
-    kind: "visual",
-  };
-}
-
 function sourceOptionDisplayLabel(
   source: PlanSource,
   t: ReturnType<typeof useT>,
@@ -8440,11 +8358,13 @@ function buildCreatePlanAgentMessage({
     planKind === "auto" ? assessPlanPrompt(prompt).kind : planKind;
   const routing = imported
     ? "Build from this existing plan while preserving its intent."
-    : resolvedPlanKind === "ui"
-      ? "Create a UI-first plan with AI-authored wireframes and state coverage."
-      : resolvedPlanKind === "questions"
-        ? "Create visual intake questions before generating the final plan."
-        : "Create a general visual plan with diagrams and implementation detail.";
+    : resolvedPlanKind === "design"
+      ? "Create a design-first plan with full-fidelity branded screens. Use create-plan-design, ground the result in the real app shell and design tokens, and treat the Design tab as the visual source of truth."
+      : resolvedPlanKind === "ui"
+        ? "Create a UI-first plan with AI-authored wireframes and state coverage."
+        : resolvedPlanKind === "questions"
+          ? "Create visual intake questions before generating the final plan."
+          : "Create a general visual plan with diagrams and implementation detail.";
 
   return [
     "Create an Agent-Native Plan from this request.",
@@ -8452,7 +8372,7 @@ function buildCreatePlanAgentMessage({
     routing,
     `Source/provenance: ${sourceOptionDisplayLabel(source, t)}.`,
     "",
-    "Use the Plan actions after you have enough substance. Generate the wireframes, diagrams, implementation map, review prompts, and concrete file/symbol notes yourself. Do not use placeholder file names, generic scaffold text, or browser-generated fallback sections as the final plan content.",
+    "Use the Plan actions after you have enough substance. Generate the requested review surface, diagrams, implementation map, review prompts, and concrete file/symbol notes yourself. Do not use placeholder file names, generic scaffold text, or browser-generated fallback sections as the final plan content.",
     "After creating the plan, open the plan link for review.",
     "",
     "Request:",
@@ -8595,11 +8515,13 @@ function CreatePlanDialog({
                             ),
                           })
                         : planKindDisplayLabel("auto", t)
-                      : planKind === "ui"
-                        ? planKindDisplayLabel("ui", t)
-                        : planKind === "questions"
-                          ? planKindDisplayLabel("questions", t)
-                          : planKindDisplayLabel("visual", t)}
+                      : planKind === "design"
+                        ? planKindDisplayLabel("design", t)
+                        : planKind === "ui"
+                          ? planKindDisplayLabel("ui", t)
+                          : planKind === "questions"
+                            ? planKindDisplayLabel("questions", t)
+                            : planKindDisplayLabel("visual", t)}
                   </span>
                   <IconChevronDown
                     className={cn(
@@ -8643,13 +8565,12 @@ function CreatePlanDialog({
                     value={planKind}
                     onValueChange={(value) =>
                       setPlanKind(
-                        value === "auto"
-                          ? "auto"
-                          : value === "visual"
-                            ? "visual"
-                            : value === "questions"
-                              ? "questions"
-                              : "ui",
+                        value === "auto" ||
+                          value === "design" ||
+                          value === "visual" ||
+                          value === "questions"
+                          ? value
+                          : "ui",
                       )
                     }
                   >
@@ -8665,6 +8586,9 @@ function CreatePlanDialog({
                       <SelectItem value="ui">
                         {t("plansPage.create.kindOptions.ui.description")}
                       </SelectItem>
+                      <SelectItem value="design">
+                        {t("plansPage.create.kindOptions.design.description")}
+                      </SelectItem>
                       <SelectItem value="questions">
                         {t(
                           "plansPage.create.kindOptions.questions.description",