@agent-native/core 0.115.1 → 0.115.4

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,23 @@
 # @agent-native/core
 
+## 0.115.4
+
+### Patch Changes
+
+- 2154ad1: Fix Builder preview credential relay failing behind a proxy. The relay handler now derives the request origin from `x-forwarded-host`/`x-forwarded-proto` (via `getBuilderBrowserOriginForEvent`) instead of the internal loopback host, so `targetOrigin` verification passes on hosted preview deployments.
+
+## 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.4",
   "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/core/src/server/builder-browser.ts

@@ -26,6 +26,8 @@ export const BUILDER_RELAY_STATE_PARAM = "_an_relay";
 export const BUILDER_RELAY_SECRET_ENV = "AGENT_NATIVE_BUILDER_RELAY_SECRET";
 export const BUILDER_RELAY_TARGET_ORIGINS_ENV =
   "AGENT_NATIVE_BUILDER_RELAY_TARGET_ORIGINS";
+export const BUILDER_RELAY_TARGET_DOMAIN_SUFFIXES_ENV =
+  "AGENT_NATIVE_BUILDER_RELAY_TARGET_DOMAIN_SUFFIXES";
 export const BUILDER_RELAY_TIMESTAMP_HEADER = "x-agent-native-relay-timestamp";
 export const BUILDER_RELAY_FLOW_HEADER = "x-agent-native-relay-flow";
 export const BUILDER_RELAY_SIGNATURE_HEADER = "x-agent-native-relay-signature";
@@ -151,15 +153,18 @@ export function isTrustedBuilderRelayTargetOrigin(value: string): boolean {
   ) {
     return false;
   }
-  const configured = process.env[BUILDER_RELAY_TARGET_ORIGINS_ENV];
-  if (!configured) return false;
-  return configured
+  const exactOriginMatch = (process.env[BUILDER_RELAY_TARGET_ORIGINS_ENV] ?? "")
     .split(",")
     .map((origin) => origin.trim())
     .filter(Boolean)
     .some((origin) => origin === value && !origin.includes("*"));
+  return (
+    exactOriginMatch ||
+    builderRelayTargetDomainSuffixes().some((suffix) =>
+      hostname.endsWith(suffix),
+    )
+  );
 }
-
 export function signBuilderPreviewRelayState(input: {
   ownerEmail: string;
   targetOrigin: string;
@@ -191,6 +196,31 @@ export function signBuilderPreviewRelayState(input: {
   return { state: `${encoded}.${builderRelayMac(encoded)}`, payload };
 }
 
+function builderRelayTargetDomainSuffixes(): string[] {
+  return (process.env[BUILDER_RELAY_TARGET_DOMAIN_SUFFIXES_ENV] ?? "")
+    .split(",")
+    .map((suffix) => suffix.trim().toLowerCase())
+    .filter((suffix) => {
+      if (!suffix.startsWith(".") || suffix.includes("*")) return false;
+      const hostname = suffix.slice(1);
+      if (!hostname.includes(".") || hostname.length > 253) return false;
+      if (
+        !hostname
+          .split(".")
+          .every((label) =>
+            /^[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?$/.test(label),
+          )
+      ) {
+        return false;
+      }
+      try {
+        return new URL(`https://${hostname}`).hostname === hostname;
+      } catch {
+        return false;
+      }
+    });
+}
+
 export function verifyBuilderPreviewRelayState(
   state: string | null | undefined,
   options: { now?: number } = {},

package/corpus/core/src/server/core-routes-plugin.ts

@@ -2345,7 +2345,7 @@ export function createCoreRoutesPlugin(
               timestamp: getHeader(event, BUILDER_RELAY_TIMESTAMP_HEADER),
               flowId: getHeader(event, BUILDER_RELAY_FLOW_HEADER),
               signature: getHeader(event, BUILDER_RELAY_SIGNATURE_HEADER),
-              requestOrigin: getFrameworkRouteRequestUrl(event).origin,
+              requestOrigin: getBuilderBrowserOriginForEvent(event),
               requestBasePath: getAppBasePath(),
             },
             {

package/corpus/templates/clips/desktop/src-tauri/src/native_screen/custom_capture.rs

@@ -2612,7 +2612,7 @@ fn source_asbd(
 }
 
 /// Decode one audio buffer's raw bytes into f32 samples according to the
-/// stream's sample format (float32/float64 or signed int16/int32).
+/// stream's sample format (float32/float64 or signed int16/int24/int32).
 fn decode_samples_to_f32(bytes: &[u8], is_float: bool, bits: u32) -> Vec<f32> {
     match (is_float, bits) {
         (true, 32) => bytes_to_f32_vec(bytes),
@@ -2624,6 +2624,15 @@ fn decode_samples_to_f32(bytes: &[u8], is_float: bool, bits: u32) -> Vec<f32> {
             .chunks_exact(2)
             .map(|c| i16::from_le_bytes([c[0], c[1]]) as f32 / 32768.0)
             .collect(),
+        (false, 24) => bytes
+            .chunks_exact(3)
+            .map(|c| {
+                // Reconstruct a 24-bit little-endian signed integer and sign-extend to i32.
+                let raw = (c[0] as i32) | ((c[1] as i32) << 8) | ((c[2] as i32) << 16);
+                let signed = if raw & 0x800000 != 0 { raw | !0x00FF_FFFFi32 } else { raw };
+                signed as f32 / 8_388_608.0
+            })
+            .collect(),
         (false, 32) => bytes
             .chunks_exact(4)
             .map(|c| i32::from_le_bytes(c.try_into().unwrap()) as f32 / 2_147_483_648.0)

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" };
+}