@agent-native/core 0.114.16 → 0.115.3

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",

package/corpus/templates/plan/changelog/2026-07-22-high-fidelity-mockup-requests-now-preserve-branded-css-use-d.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-22
+---
+
+High-fidelity mockup requests now preserve branded CSS, use Design mode, and update existing plans in place.

package/corpus/templates/plan/shared/plan-content.ts

@@ -854,6 +854,15 @@ export type PlanContentPatch =
       title?: string;
       brief?: string;
     }
+  | {
+      /**
+       * Persist the artifact's visual treatment for every viewer. `design`
+       * disables sketch rendering and preserves authored HTML/CSS; it is not
+       * the same as the viewer-local clean/sketchy preference.
+       */
+      op: "set-visual-render-mode";
+      renderMode: PlanVisualCanvasMode;
+    }
   | {
       op: "set-prototype";
       prototype: PlanPrototype;
@@ -2666,7 +2675,7 @@ const prototypeScreenPatchSchema = z
  * Raw (uncast) discriminated union behind `planContentPatchSchema`, kept as a
  * named const so `agentPlanContentPatchSchema` below can walk `.options` and
  * swap only the block-carrying ops for the compact `agentPlanBlockSchema`
- * instead of duplicating this whole 20-branch union.
+ * instead of duplicating this whole discriminated union.
  */
 const planContentPatchUnion = z.discriminatedUnion("op", [
   z
@@ -2678,6 +2687,12 @@ const planContentPatchUnion = z.discriminatedUnion("op", [
     .refine((patch) => patch.title !== undefined || patch.brief !== undefined, {
       message: "Metadata patch must include title or brief.",
     }),
+  z.object({
+    op: z.literal("set-visual-render-mode"),
+    renderMode: visualCanvasModeSchema.describe(
+      "`design` persists polished HTML/CSS rendering and disables rough.js for every viewer; `wireframe` restores the viewer-controlled sketchy/clean treatment.",
+    ),
+  }),
   z.object({
     op: z.literal("set-prototype"),
     prototype: prototypeSchema,
@@ -2871,7 +2886,7 @@ const AGENT_WIREFRAME_NODE_PATCH_DESCRIPTION =
 
 /**
  * Compact ADVERTISED-ONLY stand-in for `planContentPatchSchema`, for use as
- * part of `defineAction`'s `agentInputSchema`. Same 20 `op` branches as the
+ * part of `defineAction`'s `agentInputSchema`. Same `op` branches as the
  * real union — only the ops that carry a deep block/wireframe union swap in
  * their compact stand-ins:
  * - `replace-block` / `append-block` / `replace-blocks`: `agentPlanBlockSchema`
@@ -2934,6 +2949,7 @@ export function applyPlanContentPatches(
   patches: PlanContentPatch[],
 ): PlanContent {
   const next = cloneJson(planContentSchema.parse(content));
+  let pendingVisualRenderMode: PlanVisualCanvasMode | undefined;
 
   for (const patch of planContentPatchesSchema.parse(patches)) {
     if (patch.op === "set-metadata") {
@@ -2941,6 +2957,10 @@ export function applyPlanContentPatches(
       if (patch.brief !== undefined) next.brief = patch.brief;
       continue;
     }
+    if (patch.op === "set-visual-render-mode") {
+      pendingVisualRenderMode = patch.renderMode;
+      continue;
+    }
     if (patch.op === "set-prototype") {
       next.prototype = prototypeSchema.parse(patch.prototype);
       continue;
@@ -3274,6 +3294,9 @@ export function applyPlanContentPatches(
     }
   }
 
+  if (pendingVisualRenderMode) {
+    setVisualRenderMode(next, pendingVisualRenderMode);
+  }
   syncCanvasWireframes(next);
   return planContentSchema.parse(next);
 }
@@ -3282,6 +3305,91 @@ function cloneJson<T>(value: T): T {
   return JSON.parse(JSON.stringify(value)) as T;
 }
 
+function setVisualRenderMode(
+  content: PlanContent,
+  renderMode: PlanVisualCanvasMode,
+) {
+  const hasLegacyBlock = (blocks: PlanBlock[]): boolean =>
+    blocks.some((block) => {
+      if (block.type === "legacy-wireframe") return true;
+      if (block.type === "tabs") {
+        return block.data.tabs.some((tab) => hasLegacyBlock(tab.blocks));
+      }
+      if (block.type === "columns") {
+        return block.data.columns.some((column) =>
+          hasLegacyBlock(column.blocks),
+        );
+      }
+      return false;
+    });
+  const hasLegacyFrame = content.canvas?.frames.some(
+    (frame) => frame.legacyWireframe,
+  );
+  if (hasLegacyBlock(content.blocks) || hasLegacyFrame) {
+    throw new Error(
+      "Cannot set visual render mode while the plan contains legacy-wireframe content. Replace legacy-wireframe blocks and canvas legacyWireframe fields with current wireframes in the same update, then set the render mode.",
+    );
+  }
+
+  let changed = false;
+
+  const updateBlock = (block: PlanBlock): PlanBlock => {
+    if (block.type === "wireframe") {
+      changed = true;
+      return { ...block, data: { ...block.data, renderMode } };
+    }
+    if (block.type === "tabs") {
+      return {
+        ...block,
+        data: {
+          ...block.data,
+          tabs: block.data.tabs.map((tab) => ({
+            ...tab,
+            blocks: tab.blocks.map(updateBlock),
+          })),
+        },
+      };
+    }
+    if (block.type === "columns") {
+      return {
+        ...block,
+        data: {
+          ...block.data,
+          columns: block.data.columns.map((column) => ({
+            ...column,
+            blocks: column.blocks.map(updateBlock),
+          })),
+        },
+      };
+    }
+    return block;
+  };
+
+  content.blocks = content.blocks.map(updateBlock);
+
+  if (content.canvas) {
+    content.canvas.mode = renderMode;
+    changed = true;
+    for (const frame of content.canvas.frames) {
+      if (!frame.wireframe) continue;
+      frame.wireframe.renderMode = renderMode;
+    }
+  }
+
+  if (content.prototype) {
+    for (const screen of content.prototype.screens) {
+      screen.renderMode = renderMode;
+      changed = true;
+    }
+  }
+
+  if (!changed) {
+    throw new Error(
+      "Cannot set visual render mode because the plan has no wireframes or prototype screens.",
+    );
+  }
+}
+
 function isWireframeBlock(
   block: PlanBlock | null | undefined,
 ): block is PlanWireframeBlock | PlanLegacyWireframeBlock {