@mindstudio-ai/remy 0.1.275 → 0.1.276

package/dist/headless.js

@@ -289,7 +289,7 @@ function isRetryableError(error) {
   /Unable to download/i.test(error);
 }
 function sleep(ms) {
-  return new Promise((resolve3) => setTimeout(resolve3, ms));
+  return new Promise((resolve4) => setTimeout(resolve4, ms));
 }
 async function* streamChatWithRetry(params, options) {
   for (let attempt = 0; attempt < MAX_RETRIES; attempt++) {
@@ -433,7 +433,7 @@ var MODEL_SURFACES = {
     userPickable: true
   },
   imageGeneration: {
-    default: "seedream-4.5",
+    default: "gpt-image-2",
     label: "Image Generation",
     description: "Creates images for your product \u2014 icons, illustrations, photos, and any other visual assets.",
     modelType: "image_generation",
@@ -692,9 +692,9 @@ function parseFrontmatter(content) {
   }
   const fields = {};
   for (const line of match[1].split("\n")) {
-    const sep = line.indexOf(":");
-    if (sep > 0) {
-      fields[line.slice(0, sep).trim()] = line.slice(sep + 1).trim();
+    const sep2 = line.indexOf(":");
+    if (sep2 > 0) {
+      fields[line.slice(0, sep2).trim()] = line.slice(sep2 + 1).trim();
     }
   }
   return fields;
@@ -1663,7 +1663,7 @@ function formatCliResult(r) {
   return logBlock + body + truncNote;
 }
 function runCli(command, args, options) {
-  return new Promise((resolve3) => {
+  return new Promise((resolve4) => {
     const timeout = options?.timeout ?? 6e4;
     const maxBuffer = options?.maxBuffer ?? 1024 * 1024;
     let finalArgs = args;
@@ -1692,7 +1692,7 @@ function runCli(command, args, options) {
       if (killTimer) {
         clearTimeout(killTimer);
       }
-      resolve3(result);
+      resolve4(result);
     };
     const child = spawn(command, finalArgs, {
       stdio: [options?.stdin ? "pipe" : "ignore", "pipe", "pipe"]
@@ -2389,7 +2389,7 @@ var bashTool = {
   async execute(input, context) {
     const maxLines = input.maxLines === 0 ? Infinity : input.maxLines || DEFAULT_MAX_LINES2;
     const timeoutMs = input.timeout ? input.timeout * 1e3 : DEFAULT_TIMEOUT_MS;
-    return new Promise((resolve3) => {
+    return new Promise((resolve4) => {
       const child = spawn2("sh", ["-c", input.command], {
         // Pinned rather than inherited. `undefined` here means "wherever the
         // process happens to be", which is the project root only by luck.
@@ -2414,9 +2414,9 @@ var bashTool = {
         clearTimeout(timer);
         if (!output) {
           if (code && code !== 0) {
-            resolve3(`Error: process exited with code ${code}`);
+            resolve4(`Error: process exited with code ${code}`);
           } else {
-            resolve3("(no output)");
+            resolve4("(no output)");
           }
           return;
         }
@@ -2442,18 +2442,18 @@ var bashTool = {
               `${(MAX_OUTPUT_BYTES / 1024).toFixed(0)}KB of ${(totalBytes / 1024).toFixed(0)}KB`
             );
           }
-          resolve3(
+          resolve4(
             truncated + `
 
 (truncated at ${reasons.join(" / ")} \u2014 narrow the command (grep, head/tail, smaller paths) instead of increasing limits)`
           );
         } else {
-          resolve3(output);
+          resolve4(output);
         }
       });
       child.on("error", (err) => {
         clearTimeout(timer);
-        resolve3(`Error: ${err.message}`);
+        resolve4(`Error: ${err.message}`);
       });
     });
   }
@@ -2570,17 +2570,17 @@ var grepTool = {
     }
     const rgCmd = `rg ${rgFlags}${globFlag} '${escaped}' ${searchPath}`;
     const grepCmd = `grep ${grepFlags} '${escaped}' ${searchPath} --include='*.ts' --include='*.tsx' --include='*.js' --include='*.json' --include='*.md'`;
-    return new Promise((resolve3) => {
+    return new Promise((resolve4) => {
       exec(rgCmd, { maxBuffer: 512 * 1024 }, (err, stdout) => {
         if (stdout?.trim()) {
-          resolve3(formatResults(stdout, max, mode));
+          resolve4(formatResults(stdout, max, mode));
           return;
         }
         exec(grepCmd, { maxBuffer: 512 * 1024 }, (_err, grepStdout) => {
           if (grepStdout?.trim()) {
-            resolve3(formatResults(grepStdout, max, mode));
+            resolve4(formatResults(grepStdout, max, mode));
           } else {
-            resolve3("No matches found.");
+            resolve4("No matches found.");
           }
         });
       });
@@ -2896,7 +2896,7 @@ var restartProcessTool = {
   async execute(input) {
     const data = await lspRequest("/restart-process", { name: input.name });
     if (data.ok) {
-      await new Promise((resolve3) => setTimeout(resolve3, 5e3));
+      await new Promise((resolve4) => setTimeout(resolve4, 5e3));
       return `Restarted ${input.name}.`;
     }
     return `Error: unexpected response: ${JSON.stringify(data)}`;
@@ -3123,6 +3123,26 @@ ${opts.styleMap}
 ${ANALYSIS_RESPONSE_FORMAT}`;
   return p;
 }
+async function renderHtmlViaSidecar(opts) {
+  const result = await sidecarRequest(
+    "/render-html",
+    {
+      html: opts.html,
+      width: opts.width,
+      height: opts.height,
+      ...opts.transparent ? { transparent: true } : {},
+      ...opts.scale != null ? { scale: opts.scale } : {}
+    },
+    { timeout: VIEWPORT_CAPTURE_TIMEOUT_MS }
+  );
+  const url = result?.url;
+  if (!url) {
+    throw new Error(
+      `No URL in sidecar render response. The browser may not be ready yet. Response: ${JSON.stringify(result)}`
+    );
+  }
+  return { url, width: result.width, height: result.height };
+}
 async function streamScreenshotAnalysis(opts) {
   const { image, prompt, styleMap, onLog, model, apiConfig } = opts;
   const url = await resolveImageRef(image, apiConfig);
@@ -4262,10 +4282,10 @@ function parseFrontmatter2(filePath) {
     }
     const fm = {};
     for (const line of match[1].split("\n")) {
-      const sep = line.indexOf(":");
-      if (sep > 0) {
-        const key = line.slice(0, sep).trim();
-        const val = line.slice(sep + 1).trim();
+      const sep2 = line.indexOf(":");
+      if (sep2 > 0) {
+        const key = line.slice(0, sep2).trim();
+        const val = line.slice(sep2 + 1).trim();
         fm[key] = val;
       }
     }
@@ -4569,7 +4589,7 @@ var browserAutomationTool = {
 // src/tools/code/screenshot.ts
 var screenshotDefinition = {
   name: "screenshot",
-  description: "Capture a screenshot of the app preview and get a description of what's on screen. Choose `fullPage`: `false` captures just the visible viewport (fast \u2014 for a specific section the page is scrolled to), `true` captures the entire page top-to-bottom (slower \u2014 for overall composition or content past the fold). Captures the settled page state \u2014 it cannot catch animations, transitions, or transient state. The analysis is not precise about every detail \u2014 for example it cannot reliably identify specific fonts by name, only describe what the letterforms look like. Optionally provide specific questions about what you're looking for. Use a bulleted list to ask many questions at once. To ask additional questions about a screenshot you have already captured, pass its URL as `imageUrl` to skip recapture; `imageUrl` also accepts the disk path of an image file (a user upload, a saved asset) to analyze that instead of the preview. If the screenshot requires interaction first (logging in, clicking a tab, dismissing a modal, scrolling to a section), use the instructions param to describe the steps. To render a fixed-size image such as an Open Graph share card, set `width` and `height` (e.g. 1200 \xD7 630) and `format: 'png'`: the tool navigates to `path`, clips to exactly those pixel dimensions, and returns the image URL.",
+  description: "Capture a screenshot of the app preview and get a description of what's on screen. Choose `fullPage`: `false` captures just the visible viewport (fast \u2014 for a specific section the page is scrolled to), `true` captures the entire page top-to-bottom (slower \u2014 for overall composition or content past the fold). Captures the settled page state \u2014 it cannot catch animations, transitions, or transient state. The analysis is not precise about every detail \u2014 for example it cannot reliably identify specific fonts by name, only describe what the letterforms look like. Optionally provide specific questions about what you're looking for. Use a bulleted list to ask many questions at once. To ask additional questions about a screenshot you have already captured, pass its URL as `imageUrl` to skip recapture; `imageUrl` also accepts the disk path of an image file (a user upload, a saved asset) to analyze that instead of the preview. If the screenshot requires interaction first (logging in, clicking a tab, dismissing a modal, scrolling to a section), use the instructions param to describe the steps. To capture at exact pixel dimensions, set `width` and `height`: the tool clips to exactly that viewport and returns the image URL.",
   inputSchema: {
     type: "object",
     properties: {
@@ -4600,7 +4620,7 @@ var screenshotDefinition = {
       format: {
         type: "string",
         enum: ["png", "jpeg"],
-        description: "Output image format. Defaults to 'jpeg'. Use 'png' for crisp flat graphics like share cards, where JPEG artifacts show on sharp type and edges."
+        description: "Output image format. Defaults to 'jpeg'. Use 'png' for crisp flat graphics where JPEG artifacts show on sharp type and edges."
       },
       instructions: {
         type: "string",
@@ -4922,7 +4942,36 @@ ${brief}
 }
 
 // src/subagents/designExpert/tools/images/imageGenerator.ts
-var ANALYZE_PROMPT = 'You are reviewing this image for a visual designer sourcing assets for a project. Describe: what the image depicts, the mood and color palette, how the lighting and composition work, any text present in the image, whether there are any issues (artifacts, distortions), and how it could be used in a layout for an app or website. Be concise and practical. Respond only with your analysis as Markdown (starting with the title "Asset Review") and absolutely no other text. Do not use emojis - use unicode if you need symbols.';
+var ANALYZE_PROMPT = 'You are reviewing this image for a visual designer sourcing assets for a project. Describe: what the image depicts, the mood and color palette, how the lighting and composition work, any text present in the image, whether there are any issues (artifacts, distortions), whether the artwork extends fully to all four edges of the canvas or sits inset (call out any baked-in border, frame, rounded-corner mask, drop-shadow margin, or mockup presentation such as an icon rendered on a background or device), and how it could be used in a layout for an app or website. Be concise and practical. Respond only with your analysis as Markdown (starting with the title "Asset Review") and absolutely no other text. Do not use emojis - use unicode if you need symbols.';
+var OPENAI_IMAGE_SIZES = [
+  [768, 1024],
+  [1024, 768],
+  [1024, 1024],
+  [1024, 1536],
+  [1536, 1024],
+  [1280, 2560],
+  [2560, 1280],
+  [1440, 2560],
+  [2560, 1440],
+  [1792, 2400],
+  [2400, 1792],
+  [2400, 2880],
+  [2560, 2560]
+];
+function snapToOpenAiImageSize(width, height) {
+  let best = OPENAI_IMAGE_SIZES[0];
+  let bestScore = Infinity;
+  for (const [w, h] of OPENAI_IMAGE_SIZES) {
+    const aspectDiff = Math.abs(Math.log(w / h / (width / height)));
+    const areaDiff = Math.abs(Math.log(w * h / (width * height)));
+    const score = aspectDiff * 8 + areaDiff;
+    if (score < bestScore) {
+      bestScore = score;
+      best = [w, h];
+    }
+  }
+  return `${best[0]}x${best[1]}`;
+}
 async function generateImageAssets(opts) {
   const {
     prompts,
@@ -4937,7 +4986,11 @@ async function generateImageAssets(opts) {
   const sourceImages = opts.sourceImages?.length ? await resolveImageRefs(opts.sourceImages, apiConfig) : void 0;
   const width = opts.width || 2048;
   const height = opts.height || 2048;
-  const config = { width, height };
+  const config = {
+    width,
+    height,
+    size: snapToOpenAiImageSize(width, height)
+  };
   if (sourceImages?.length) {
     const [firstImage] = sourceImages;
     config.images = sourceImages;
@@ -5189,11 +5242,143 @@ async function execute6(input, onLog, context) {
   });
 }
 
+// src/subagents/designExpert/tools/images/renderImage.ts
+var renderImage_exports = {};
+__export(renderImage_exports, {
+  definition: () => definition7,
+  execute: () => execute7
+});
+import { mkdir, unlink, writeFile } from "fs/promises";
+import { tmpdir } from "os";
+import { dirname, join, resolve as resolve2, sep } from "path";
+import { randomUUID } from "crypto";
+var MIN_DIMENSION = 16;
+var MAX_DIMENSION = 4096;
+var RENDER_ANALYZE_PROMPT = 'You are reviewing a browser-rendered graphic (composed from HTML/CSS by a designer) for fidelity. Report: whether the composition fills the full canvas or leaves unintended gaps at any edge, any clipped or overflowing text, whether custom webfonts appear to have loaded (distinctive letterforms vs generic fallback serif/sans), any misalignment or uneven spacing, any unintended scrollbars or default-styling artifacts, and \u2014 if the background is transparent \u2014 any fringing or stray opaque pixels at the edges. Then briefly describe the overall composition and how polished it looks. Be concise and practical. Respond only with your analysis as Markdown (starting with the title "Render Review") and absolutely no other text. Do not use emojis - use unicode if you need symbols.';
+var definition7 = {
+  name: "renderImage",
+  description: "Render a self-contained HTML document in a real browser and capture it as a hosted PNG at exact pixel dimensions, with a fidelity review included. Deterministic \u2014 exact hex colors, real loaded webfonts, precise geometry \u2014 unlike generateImages, which is an image model. Use for token-exact graphics: Open Graph share cards, wordmarks, flat/geometric icon tiles, badges, any composition where letterforms and spacing carry the design. Compose with HTML/CSS (link webfonts from CDNs \u2014 the renderer waits for them to load); inline existing SVG markup when needed, but never hand-write new SVG path data.",
+  inputSchema: {
+    type: "object",
+    properties: {
+      html: {
+        type: "string",
+        description: "A complete, self-contained HTML document sized to fill the viewport (style html/body to the full dimensions with margin 0). External webfonts and images from CDNs are fine \u2014 loading is awaited before capture."
+      },
+      width: {
+        type: "number",
+        description: "Viewport width in CSS pixels (e.g. 1200 for an OG card, 512 for an icon tile). Range: 16-4096."
+      },
+      height: {
+        type: "number",
+        description: "Viewport height in CSS pixels. Range: 16-4096."
+      },
+      scale: {
+        type: "number",
+        description: "Device scale factor, 1-3. Output pixels = css \xD7 scale. Use 2 for crisp icon masters (e.g. a 512\xD7512 document captured at 1024\xD71024)."
+      },
+      transparentBackground: {
+        type: "boolean",
+        description: "Capture with true alpha: leave the document background transparent (no background on html/body) and the PNG keeps it. No background-removal model involved."
+      },
+      savePath: {
+        type: "string",
+        description: "Optional project-relative path to also save the PNG into the app (e.g. 'dist/interfaces/web/public/og-image.png' so the deployed site self-hosts it)."
+      }
+    },
+    required: ["html", "width", "height"]
+  }
+};
+async function execute7(input, onLog, context) {
+  const html = typeof input.html === "string" ? input.html : "";
+  const width = Math.round(Number(input.width));
+  const height = Math.round(Number(input.height));
+  if (!html || !Number.isFinite(width) || !Number.isFinite(height) || width < MIN_DIMENSION || width > MAX_DIMENSION || height < MIN_DIMENSION || height > MAX_DIMENSION) {
+    return `Error: renderImage requires an html string plus width/height between ${MIN_DIMENSION} and ${MAX_DIMENSION}.`;
+  }
+  const release = await acquireBrowserLock();
+  let rendered;
+  try {
+    onLog?.("Rendering document in the sandbox browser...");
+    rendered = await renderHtmlViaSidecar({
+      html,
+      width,
+      height,
+      transparent: input.transparentBackground === true,
+      scale: typeof input.scale === "number" ? input.scale : void 0
+    });
+  } catch (err) {
+    return `Error: render failed: ${err?.message ?? err}`;
+  } finally {
+    release();
+  }
+  let bytes;
+  try {
+    const res = await fetch(rendered.url);
+    if (!res.ok) {
+      throw new Error(`fetch returned ${res.status}`);
+    }
+    bytes = Buffer.from(await res.arrayBuffer());
+  } catch (err) {
+    return `Error: rendered but could not download the capture (${err?.message ?? err}). Temporary URL: ${rendered.url}`;
+  }
+  let savedPath;
+  if (typeof input.savePath === "string" && input.savePath) {
+    const absolute = resolve2(PROJECT_ROOT, input.savePath);
+    if (!absolute.startsWith(PROJECT_ROOT + sep)) {
+      return "Error: savePath must resolve inside the project.";
+    }
+    await mkdir(dirname(absolute), { recursive: true });
+    await writeFile(absolute, bytes);
+    savedPath = input.savePath;
+  }
+  onLog?.("Hosting the capture...");
+  const tmpPath = join(tmpdir(), `render-${randomUUID()}.png`);
+  let url = rendered.url;
+  let temporary = true;
+  try {
+    await writeFile(tmpPath, bytes);
+    const upload = await runMindstudioCliResult(["upload", tmpPath], {
+      timeout: 6e4,
+      onLog,
+      caller: "designExpert"
+    });
+    const match = upload.ok ? upload.value.match(/https:\/\/\S+/g) : null;
+    if (match?.length) {
+      url = match[match.length - 1];
+      temporary = false;
+    }
+  } finally {
+    await unlink(tmpPath).catch(() => {
+    });
+  }
+  const analysis = await analyzeImage({
+    prompt: RENDER_ANALYZE_PROMPT,
+    image: url,
+    onLog,
+    model: resolveModel("imageAnalysis", context?.models, context?.model)
+  }).then((r) => r.analysis).catch((err) => `Could not review this image: ${err.message}`);
+  return JSON.stringify({
+    images: [
+      {
+        url,
+        ...temporary ? {
+          note: "Durable hosting failed \u2014 this URL is dev-session scratch storage and may expire. Do not use it for app metadata; retry if a durable URL is needed."
+        } : {},
+        ...savedPath ? { savedPath } : {},
+        analysis,
+        width: rendered.width,
+        height: rendered.height
+      }
+    ]
+  });
+}
+
 // src/subagents/designExpert/tools/polishCopy.ts
 var polishCopy_exports = {};
 __export(polishCopy_exports, {
-  definition: () => definition7,
-  execute: () => execute7
+  definition: () => definition8,
+  execute: () => execute8
 });
 
 // src/subagents/copyEditor/tools.ts
@@ -5249,7 +5434,7 @@ var copyEditorTool = {
 };
 
 // src/subagents/designExpert/tools/polishCopy.ts
-var definition7 = {
+var definition8 = {
   name: "polishCopy",
   description: "Hand off any user-facing copy you've written \u2014 headlines, captions, labels, body text \u2014 and get back a sharper version: better built for its audience and free of the fingerprints that make writing read as AI. It elevates how the copy communicates without inventing facts or claims you didn't give it. Give it the text plus what it's for (where it appears, the audience).",
   inputSchema: {
@@ -5263,7 +5448,7 @@ var definition7 = {
     required: ["task"]
   }
 };
-async function execute7(input, _onLog, context) {
+async function execute8(input, _onLog, context) {
   return copyEditorTool.execute(input, context);
 }
 
@@ -5279,6 +5464,7 @@ var tools = {
   screenshot: { definition: screenshotDefinition, execute: executeScreenshot },
   generateImages: generateImages_exports,
   editImages: editImages_exports,
+  renderImage: renderImage_exports,
   polishCopy: polishCopy_exports
 };
 var DESIGN_EXPERT_TOOLS = [
@@ -5698,13 +5884,13 @@ var PITCH_DECK_SHELL = readAsset(
   "subagents/productVision",
   "pitch-deck-shell.html"
 );
-function resolve2(filePath) {
+function resolve3(filePath) {
   return path10.join(ROADMAP_DIR, filePath);
 }
 async function executeVisionTool(name, input, context) {
   switch (name) {
     case "writeFile": {
-      const filePath = resolve2(input.path);
+      const filePath = resolve3(input.path);
       try {
         fs19.mkdirSync(ROADMAP_DIR, { recursive: true });
         let oldContent = null;
@@ -5722,7 +5908,7 @@ ${unifiedDiff(filePath, oldContent ?? "", input.content)}`;
       }
     }
     case "deleteFile": {
-      const filePath = resolve2(input.path);
+      const filePath = resolve3(input.path);
       try {
         if (!fs19.existsSync(filePath)) {
           return `Error: ${filePath} does not exist`;
@@ -5739,7 +5925,7 @@ ${unifiedDiff(filePath, oldContent, "")}`;
       if (!context) {
         return "Error: writePitchDeck requires execution context for design expert delegation";
       }
-      const filePath = resolve2("pitch.html");
+      const filePath = resolve3("pitch.html");
       try {
         fs19.mkdirSync(ROADMAP_DIR, { recursive: true });
         const exists = fs19.existsSync(filePath);
@@ -7360,14 +7546,14 @@ function buildCorpus() {
       });
     }
   }
-  const sep = "\n\n---\n\n";
+  const sep2 = "\n\n---\n\n";
   const sections = [];
   let usedChars = 0;
   for (const { path: p, content } of files) {
     const section = `## File: ${p}
 
 ${content}`;
-    const added = section.length + (sections.length > 0 ? sep.length : 0);
+    const added = section.length + (sections.length > 0 ? sep2.length : 0);
     if (sections.length > 0 && usedChars + added > BRAND_CORPUS_CHAR_LIMIT) {
       sections.push(
         `(brand corpus truncated: included ${sections.length} of ${files.length} files, ~${(usedChars / 1024).toFixed(0)}KB; brand-relevant files were prioritized.)`
@@ -7377,7 +7563,7 @@ ${content}`;
     sections.push(section);
     usedChars += added;
   }
-  return sections.join(sep);
+  return sections.join(sep2);
 }
 function headSlice(content) {
   if (content.length <= HEAD_SLICE_CHARS) {
@@ -8474,8 +8660,8 @@ async function runTurn(params) {
 
 // src/headless/attachments.ts
 import { mkdirSync, existsSync } from "fs";
-import { writeFile } from "fs/promises";
-import { basename as basename2, join, extname as extname2 } from "path";
+import { writeFile as writeFile2 } from "fs/promises";
+import { basename as basename2, join as join2, extname as extname2 } from "path";
 var log15 = createLogger("headless:attachments");
 var UPLOADS_DIR = "src/.user-uploads";
 function filenameFromUrl(url) {
@@ -8488,7 +8674,7 @@ function filenameFromUrl(url) {
   }
 }
 function resolveUniqueFilename(name, claimed) {
-  const isFree = (candidate) => !claimed.has(candidate) && !existsSync(join(UPLOADS_DIR, candidate));
+  const isFree = (candidate) => !claimed.has(candidate) && !existsSync(join2(UPLOADS_DIR, candidate));
   if (isFree(name)) {
     return name;
   }
@@ -8523,7 +8709,7 @@ async function persistAttachments(attachments) {
   const results = await Promise.allSettled(
     nonVoice.map(async (att, i) => {
       const name = names[i];
-      const localPath = join(UPLOADS_DIR, name);
+      const localPath = join2(UPLOADS_DIR, name);
       const res = await fetch(att.url, {
         signal: AbortSignal.timeout(3e4)
       });
@@ -8531,7 +8717,7 @@ async function persistAttachments(attachments) {
         throw new Error(`HTTP ${res.status} downloading ${att.url}`);
       }
       const buffer = Buffer.from(await res.arrayBuffer());
-      await writeFile(localPath, buffer);
+      await writeFile2(localPath, buffer);
       log15.info("Attachment saved", {
         filename: name,
         path: localPath,
@@ -8545,7 +8731,7 @@ async function persistAttachments(attachments) {
           });
           if (textRes.ok) {
             extractedTextPath = `${localPath}.txt`;
-            await writeFile(extractedTextPath, await textRes.text(), "utf-8");
+            await writeFile2(extractedTextPath, await textRes.text(), "utf-8");
             log15.info("Extracted text saved", { path: extractedTextPath });
           }
         } catch {
@@ -9132,17 +9318,17 @@ var HeadlessSession = class {
       return Promise.resolve(early);
     }
     const shouldTimeout = !USER_FACING_TOOLS.has(name);
-    return new Promise((resolve3) => {
+    return new Promise((resolve4) => {
       const timeout = shouldTimeout ? setTimeout(() => {
         this.pendingTools.delete(id);
-        resolve3(
+        resolve4(
           "Error: Tool timed out \u2014 no response from the app environment after 5 minutes."
         );
       }, EXTERNAL_TOOL_TIMEOUT_MS) : void 0;
       this.pendingTools.set(id, {
         resolve: (result) => {
           clearTimeout(timeout);
-          resolve3(result);
+          resolve4(result);
         },
         timeout
       });

package/dist/index.js

@@ -270,7 +270,7 @@ function isRetryableError(error) {
   /Unable to download/i.test(error);
 }
 function sleep(ms) {
-  return new Promise((resolve3) => setTimeout(resolve3, ms));
+  return new Promise((resolve4) => setTimeout(resolve4, ms));
 }
 async function* streamChatWithRetry(params, options) {
   for (let attempt = 0; attempt < MAX_RETRIES; attempt++) {
@@ -1203,7 +1203,7 @@ function formatCliResult(r) {
   return logBlock + body + truncNote;
 }
 function runCli(command, args2, options) {
-  return new Promise((resolve3) => {
+  return new Promise((resolve4) => {
     const timeout = options?.timeout ?? 6e4;
     const maxBuffer = options?.maxBuffer ?? 1024 * 1024;
     let finalArgs = args2;
@@ -1232,7 +1232,7 @@ function runCli(command, args2, options) {
       if (killTimer) {
         clearTimeout(killTimer);
       }
-      resolve3(result);
+      resolve4(result);
     };
     const child = spawn(command, finalArgs, {
       stdio: [options?.stdin ? "pipe" : "ignore", "pipe", "pipe"]
@@ -2173,7 +2173,7 @@ var init_surfaces = __esm({
         userPickable: true
       },
       imageGeneration: {
-        default: "seedream-4.5",
+        default: "gpt-image-2",
         label: "Image Generation",
         description: "Creates images for your product \u2014 icons, illustrations, photos, and any other visual assets.",
         modelType: "image_generation",
@@ -3025,9 +3025,9 @@ function parseFrontmatter(content) {
   }
   const fields = {};
   for (const line of match[1].split("\n")) {
-    const sep = line.indexOf(":");
-    if (sep > 0) {
-      fields[line.slice(0, sep).trim()] = line.slice(sep + 1).trim();
+    const sep2 = line.indexOf(":");
+    if (sep2 > 0) {
+      fields[line.slice(0, sep2).trim()] = line.slice(sep2 + 1).trim();
     }
   }
   return fields;
@@ -3482,7 +3482,7 @@ var init_bash = __esm({
       async execute(input, context) {
         const maxLines = input.maxLines === 0 ? Infinity : input.maxLines || DEFAULT_MAX_LINES2;
         const timeoutMs = input.timeout ? input.timeout * 1e3 : DEFAULT_TIMEOUT_MS;
-        return new Promise((resolve3) => {
+        return new Promise((resolve4) => {
           const child = spawn2("sh", ["-c", input.command], {
             // Pinned rather than inherited. `undefined` here means "wherever the
             // process happens to be", which is the project root only by luck.
@@ -3507,9 +3507,9 @@ var init_bash = __esm({
             clearTimeout(timer);
             if (!output) {
               if (code && code !== 0) {
-                resolve3(`Error: process exited with code ${code}`);
+                resolve4(`Error: process exited with code ${code}`);
               } else {
-                resolve3("(no output)");
+                resolve4("(no output)");
               }
               return;
             }
@@ -3535,18 +3535,18 @@ var init_bash = __esm({
                   `${(MAX_OUTPUT_BYTES / 1024).toFixed(0)}KB of ${(totalBytes / 1024).toFixed(0)}KB`
                 );
               }
-              resolve3(
+              resolve4(
                 truncated + `
 
 (truncated at ${reasons.join(" / ")} \u2014 narrow the command (grep, head/tail, smaller paths) instead of increasing limits)`
               );
             } else {
-              resolve3(output);
+              resolve4(output);
             }
           });
           child.on("error", (err) => {
             clearTimeout(timer);
-            resolve3(`Error: ${err.message}`);
+            resolve4(`Error: ${err.message}`);
           });
         });
       }
@@ -3669,17 +3669,17 @@ var init_grep = __esm({
         }
         const rgCmd = `rg ${rgFlags}${globFlag} '${escaped}' ${searchPath}`;
         const grepCmd = `grep ${grepFlags} '${escaped}' ${searchPath} --include='*.ts' --include='*.tsx' --include='*.js' --include='*.json' --include='*.md'`;
-        return new Promise((resolve3) => {
+        return new Promise((resolve4) => {
           exec(rgCmd, { maxBuffer: 512 * 1024 }, (err, stdout) => {
             if (stdout?.trim()) {
-              resolve3(formatResults(stdout, max, mode));
+              resolve4(formatResults(stdout, max, mode));
               return;
             }
             exec(grepCmd, { maxBuffer: 512 * 1024 }, (_err, grepStdout) => {
               if (grepStdout?.trim()) {
-                resolve3(formatResults(grepStdout, max, mode));
+                resolve4(formatResults(grepStdout, max, mode));
               } else {
-                resolve3("No matches found.");
+                resolve4("No matches found.");
               }
             });
           });
@@ -4041,7 +4041,7 @@ var init_restartProcess = __esm({
       async execute(input) {
         const data = await lspRequest("/restart-process", { name: input.name });
         if (data.ok) {
-          await new Promise((resolve3) => setTimeout(resolve3, 5e3));
+          await new Promise((resolve4) => setTimeout(resolve4, 5e3));
           return `Restarted ${input.name}.`;
         }
         return `Error: unexpected response: ${JSON.stringify(data)}`;
@@ -4299,6 +4299,26 @@ ${opts.styleMap}
 ${ANALYSIS_RESPONSE_FORMAT}`;
   return p;
 }
+async function renderHtmlViaSidecar(opts) {
+  const result = await sidecarRequest(
+    "/render-html",
+    {
+      html: opts.html,
+      width: opts.width,
+      height: opts.height,
+      ...opts.transparent ? { transparent: true } : {},
+      ...opts.scale != null ? { scale: opts.scale } : {}
+    },
+    { timeout: VIEWPORT_CAPTURE_TIMEOUT_MS }
+  );
+  const url = result?.url;
+  if (!url) {
+    throw new Error(
+      `No URL in sidecar render response. The browser may not be ready yet. Response: ${JSON.stringify(result)}`
+    );
+  }
+  return { url, width: result.width, height: result.height };
+}
 async function streamScreenshotAnalysis(opts) {
   const { image, prompt, styleMap, onLog, model, apiConfig } = opts;
   const url = await resolveImageRef(image, apiConfig);
@@ -5280,10 +5300,10 @@ function parseFrontmatter2(filePath) {
     }
     const fm = {};
     for (const line of match[1].split("\n")) {
-      const sep = line.indexOf(":");
-      if (sep > 0) {
-        const key = line.slice(0, sep).trim();
-        const val = line.slice(sep + 1).trim();
+      const sep2 = line.indexOf(":");
+      if (sep2 > 0) {
+        const key = line.slice(0, sep2).trim();
+        const val = line.slice(sep2 + 1).trim();
         fm[key] = val;
       }
     }
@@ -5677,7 +5697,7 @@ var init_screenshot2 = __esm({
     init_surfaces();
     screenshotDefinition = {
       name: "screenshot",
-      description: "Capture a screenshot of the app preview and get a description of what's on screen. Choose `fullPage`: `false` captures just the visible viewport (fast \u2014 for a specific section the page is scrolled to), `true` captures the entire page top-to-bottom (slower \u2014 for overall composition or content past the fold). Captures the settled page state \u2014 it cannot catch animations, transitions, or transient state. The analysis is not precise about every detail \u2014 for example it cannot reliably identify specific fonts by name, only describe what the letterforms look like. Optionally provide specific questions about what you're looking for. Use a bulleted list to ask many questions at once. To ask additional questions about a screenshot you have already captured, pass its URL as `imageUrl` to skip recapture; `imageUrl` also accepts the disk path of an image file (a user upload, a saved asset) to analyze that instead of the preview. If the screenshot requires interaction first (logging in, clicking a tab, dismissing a modal, scrolling to a section), use the instructions param to describe the steps. To render a fixed-size image such as an Open Graph share card, set `width` and `height` (e.g. 1200 \xD7 630) and `format: 'png'`: the tool navigates to `path`, clips to exactly those pixel dimensions, and returns the image URL.",
+      description: "Capture a screenshot of the app preview and get a description of what's on screen. Choose `fullPage`: `false` captures just the visible viewport (fast \u2014 for a specific section the page is scrolled to), `true` captures the entire page top-to-bottom (slower \u2014 for overall composition or content past the fold). Captures the settled page state \u2014 it cannot catch animations, transitions, or transient state. The analysis is not precise about every detail \u2014 for example it cannot reliably identify specific fonts by name, only describe what the letterforms look like. Optionally provide specific questions about what you're looking for. Use a bulleted list to ask many questions at once. To ask additional questions about a screenshot you have already captured, pass its URL as `imageUrl` to skip recapture; `imageUrl` also accepts the disk path of an image file (a user upload, a saved asset) to analyze that instead of the preview. If the screenshot requires interaction first (logging in, clicking a tab, dismissing a modal, scrolling to a section), use the instructions param to describe the steps. To capture at exact pixel dimensions, set `width` and `height`: the tool clips to exactly that viewport and returns the image URL.",
       inputSchema: {
         type: "object",
         properties: {
@@ -5708,7 +5728,7 @@ var init_screenshot2 = __esm({
           format: {
             type: "string",
             enum: ["png", "jpeg"],
-            description: "Output image format. Defaults to 'jpeg'. Use 'png' for crisp flat graphics like share cards, where JPEG artifacts show on sharp type and edges."
+            description: "Output image format. Defaults to 'jpeg'. Use 'png' for crisp flat graphics where JPEG artifacts show on sharp type and edges."
           },
           instructions: {
             type: "string",
@@ -6016,6 +6036,20 @@ var init_enhancePrompt = __esm({
 });
 
 // src/subagents/designExpert/tools/images/imageGenerator.ts
+function snapToOpenAiImageSize(width, height) {
+  let best = OPENAI_IMAGE_SIZES[0];
+  let bestScore = Infinity;
+  for (const [w, h] of OPENAI_IMAGE_SIZES) {
+    const aspectDiff = Math.abs(Math.log(w / h / (width / height)));
+    const areaDiff = Math.abs(Math.log(w * h / (width * height)));
+    const score = aspectDiff * 8 + areaDiff;
+    if (score < bestScore) {
+      bestScore = score;
+      best = [w, h];
+    }
+  }
+  return `${best[0]}x${best[1]}`;
+}
 async function generateImageAssets(opts) {
   const {
     prompts,
@@ -6030,7 +6064,11 @@ async function generateImageAssets(opts) {
   const sourceImages = opts.sourceImages?.length ? await resolveImageRefs(opts.sourceImages, apiConfig) : void 0;
   const width = opts.width || 2048;
   const height = opts.height || 2048;
-  const config = { width, height };
+  const config = {
+    width,
+    height,
+    size: snapToOpenAiImageSize(width, height)
+  };
   if (sourceImages?.length) {
     const [firstImage] = sourceImages;
     config.images = sourceImages;
@@ -6149,7 +6187,7 @@ async function generateImageAssets(opts) {
   );
   return JSON.stringify({ images });
 }
-var ANALYZE_PROMPT;
+var ANALYZE_PROMPT, OPENAI_IMAGE_SIZES;
 var init_imageGenerator = __esm({
   "src/subagents/designExpert/tools/images/imageGenerator.ts"() {
     "use strict";
@@ -6157,7 +6195,22 @@ var init_imageGenerator = __esm({
     init_analyzeImage();
     init_uploadImage();
     init_enhancePrompt();
-    ANALYZE_PROMPT = 'You are reviewing this image for a visual designer sourcing assets for a project. Describe: what the image depicts, the mood and color palette, how the lighting and composition work, any text present in the image, whether there are any issues (artifacts, distortions), and how it could be used in a layout for an app or website. Be concise and practical. Respond only with your analysis as Markdown (starting with the title "Asset Review") and absolutely no other text. Do not use emojis - use unicode if you need symbols.';
+    ANALYZE_PROMPT = 'You are reviewing this image for a visual designer sourcing assets for a project. Describe: what the image depicts, the mood and color palette, how the lighting and composition work, any text present in the image, whether there are any issues (artifacts, distortions), whether the artwork extends fully to all four edges of the canvas or sits inset (call out any baked-in border, frame, rounded-corner mask, drop-shadow margin, or mockup presentation such as an icon rendered on a background or device), and how it could be used in a layout for an app or website. Be concise and practical. Respond only with your analysis as Markdown (starting with the title "Asset Review") and absolutely no other text. Do not use emojis - use unicode if you need symbols.';
+    OPENAI_IMAGE_SIZES = [
+      [768, 1024],
+      [1024, 768],
+      [1024, 1024],
+      [1024, 1536],
+      [1536, 1024],
+      [1280, 2560],
+      [2560, 1280],
+      [1440, 2560],
+      [2560, 1440],
+      [1792, 2400],
+      [2400, 1792],
+      [2400, 2880],
+      [2560, 2560]
+    ];
   }
 });
 
@@ -6314,6 +6367,150 @@ var init_editImages = __esm({
   }
 });
 
+// src/subagents/designExpert/tools/images/renderImage.ts
+var renderImage_exports = {};
+__export(renderImage_exports, {
+  definition: () => definition7,
+  execute: () => execute7
+});
+import { mkdir, unlink, writeFile } from "fs/promises";
+import { tmpdir } from "os";
+import { dirname, join, resolve as resolve2, sep } from "path";
+import { randomUUID } from "crypto";
+async function execute7(input, onLog, context) {
+  const html = typeof input.html === "string" ? input.html : "";
+  const width = Math.round(Number(input.width));
+  const height = Math.round(Number(input.height));
+  if (!html || !Number.isFinite(width) || !Number.isFinite(height) || width < MIN_DIMENSION || width > MAX_DIMENSION || height < MIN_DIMENSION || height > MAX_DIMENSION) {
+    return `Error: renderImage requires an html string plus width/height between ${MIN_DIMENSION} and ${MAX_DIMENSION}.`;
+  }
+  const release = await acquireBrowserLock();
+  let rendered;
+  try {
+    onLog?.("Rendering document in the sandbox browser...");
+    rendered = await renderHtmlViaSidecar({
+      html,
+      width,
+      height,
+      transparent: input.transparentBackground === true,
+      scale: typeof input.scale === "number" ? input.scale : void 0
+    });
+  } catch (err) {
+    return `Error: render failed: ${err?.message ?? err}`;
+  } finally {
+    release();
+  }
+  let bytes;
+  try {
+    const res = await fetch(rendered.url);
+    if (!res.ok) {
+      throw new Error(`fetch returned ${res.status}`);
+    }
+    bytes = Buffer.from(await res.arrayBuffer());
+  } catch (err) {
+    return `Error: rendered but could not download the capture (${err?.message ?? err}). Temporary URL: ${rendered.url}`;
+  }
+  let savedPath;
+  if (typeof input.savePath === "string" && input.savePath) {
+    const absolute = resolve2(PROJECT_ROOT, input.savePath);
+    if (!absolute.startsWith(PROJECT_ROOT + sep)) {
+      return "Error: savePath must resolve inside the project.";
+    }
+    await mkdir(dirname(absolute), { recursive: true });
+    await writeFile(absolute, bytes);
+    savedPath = input.savePath;
+  }
+  onLog?.("Hosting the capture...");
+  const tmpPath = join(tmpdir(), `render-${randomUUID()}.png`);
+  let url = rendered.url;
+  let temporary = true;
+  try {
+    await writeFile(tmpPath, bytes);
+    const upload = await runMindstudioCliResult(["upload", tmpPath], {
+      timeout: 6e4,
+      onLog,
+      caller: "designExpert"
+    });
+    const match = upload.ok ? upload.value.match(/https:\/\/\S+/g) : null;
+    if (match?.length) {
+      url = match[match.length - 1];
+      temporary = false;
+    }
+  } finally {
+    await unlink(tmpPath).catch(() => {
+    });
+  }
+  const analysis = await analyzeImage({
+    prompt: RENDER_ANALYZE_PROMPT,
+    image: url,
+    onLog,
+    model: resolveModel("imageAnalysis", context?.models, context?.model)
+  }).then((r) => r.analysis).catch((err) => `Could not review this image: ${err.message}`);
+  return JSON.stringify({
+    images: [
+      {
+        url,
+        ...temporary ? {
+          note: "Durable hosting failed \u2014 this URL is dev-session scratch storage and may expire. Do not use it for app metadata; retry if a durable URL is needed."
+        } : {},
+        ...savedPath ? { savedPath } : {},
+        analysis,
+        width: rendered.width,
+        height: rendered.height
+      }
+    ]
+  });
+}
+var MIN_DIMENSION, MAX_DIMENSION, RENDER_ANALYZE_PROMPT, definition7;
+var init_renderImage = __esm({
+  "src/subagents/designExpert/tools/images/renderImage.ts"() {
+    "use strict";
+    init_screenshot();
+    init_browserLock();
+    init_runMindstudioCli();
+    init_analyzeImage();
+    init_surfaces();
+    init_projectRoot();
+    MIN_DIMENSION = 16;
+    MAX_DIMENSION = 4096;
+    RENDER_ANALYZE_PROMPT = 'You are reviewing a browser-rendered graphic (composed from HTML/CSS by a designer) for fidelity. Report: whether the composition fills the full canvas or leaves unintended gaps at any edge, any clipped or overflowing text, whether custom webfonts appear to have loaded (distinctive letterforms vs generic fallback serif/sans), any misalignment or uneven spacing, any unintended scrollbars or default-styling artifacts, and \u2014 if the background is transparent \u2014 any fringing or stray opaque pixels at the edges. Then briefly describe the overall composition and how polished it looks. Be concise and practical. Respond only with your analysis as Markdown (starting with the title "Render Review") and absolutely no other text. Do not use emojis - use unicode if you need symbols.';
+    definition7 = {
+      name: "renderImage",
+      description: "Render a self-contained HTML document in a real browser and capture it as a hosted PNG at exact pixel dimensions, with a fidelity review included. Deterministic \u2014 exact hex colors, real loaded webfonts, precise geometry \u2014 unlike generateImages, which is an image model. Use for token-exact graphics: Open Graph share cards, wordmarks, flat/geometric icon tiles, badges, any composition where letterforms and spacing carry the design. Compose with HTML/CSS (link webfonts from CDNs \u2014 the renderer waits for them to load); inline existing SVG markup when needed, but never hand-write new SVG path data.",
+      inputSchema: {
+        type: "object",
+        properties: {
+          html: {
+            type: "string",
+            description: "A complete, self-contained HTML document sized to fill the viewport (style html/body to the full dimensions with margin 0). External webfonts and images from CDNs are fine \u2014 loading is awaited before capture."
+          },
+          width: {
+            type: "number",
+            description: "Viewport width in CSS pixels (e.g. 1200 for an OG card, 512 for an icon tile). Range: 16-4096."
+          },
+          height: {
+            type: "number",
+            description: "Viewport height in CSS pixels. Range: 16-4096."
+          },
+          scale: {
+            type: "number",
+            description: "Device scale factor, 1-3. Output pixels = css \xD7 scale. Use 2 for crisp icon masters (e.g. a 512\xD7512 document captured at 1024\xD71024)."
+          },
+          transparentBackground: {
+            type: "boolean",
+            description: "Capture with true alpha: leave the document background transparent (no background on html/body) and the PNG keeps it. No background-removal model involved."
+          },
+          savePath: {
+            type: "string",
+            description: "Optional project-relative path to also save the PNG into the app (e.g. 'dist/interfaces/web/public/og-image.png' so the deployed site self-hosts it)."
+          }
+        },
+        required: ["html", "width", "height"]
+      }
+    };
+  }
+});
+
 // src/subagents/copyEditor/tools.ts
 var COPY_EDITOR_TOOLS;
 var init_tools3 = __esm({
@@ -6388,18 +6585,18 @@ var init_copyEditor = __esm({
 // src/subagents/designExpert/tools/polishCopy.ts
 var polishCopy_exports = {};
 __export(polishCopy_exports, {
-  definition: () => definition7,
-  execute: () => execute7
+  definition: () => definition8,
+  execute: () => execute8
 });
-async function execute7(input, _onLog, context) {
+async function execute8(input, _onLog, context) {
   return copyEditorTool.execute(input, context);
 }
-var definition7;
+var definition8;
 var init_polishCopy = __esm({
   "src/subagents/designExpert/tools/polishCopy.ts"() {
     "use strict";
     init_copyEditor();
-    definition7 = {
+    definition8 = {
       name: "polishCopy",
       description: "Hand off any user-facing copy you've written \u2014 headlines, captions, labels, body text \u2014 and get back a sharper version: better built for its audience and free of the fingerprints that make writing read as AI. It elevates how the copy communicates without inventing facts or claims you didn't give it. Give it the text plus what it's for (where it appears, the audience).",
       inputSchema: {
@@ -6437,6 +6634,7 @@ var init_tools4 = __esm({
     init_analyzeImage2();
     init_generateImages();
     init_editImages();
+    init_renderImage();
     init_polishCopy();
     init_screenshot2();
     tools = {
@@ -6450,6 +6648,7 @@ var init_tools4 = __esm({
       screenshot: { definition: screenshotDefinition, execute: executeScreenshot },
       generateImages: generateImages_exports,
       editImages: editImages_exports,
+      renderImage: renderImage_exports,
       polishCopy: polishCopy_exports
     };
     DESIGN_EXPERT_TOOLS = [
@@ -6992,13 +7191,13 @@ var init_tools5 = __esm({
 // src/subagents/productVision/executor.ts
 import fs18 from "fs";
 import path10 from "path";
-function resolve2(filePath) {
+function resolve3(filePath) {
   return path10.join(ROADMAP_DIR, filePath);
 }
 async function executeVisionTool(name, input, context) {
   switch (name) {
     case "writeFile": {
-      const filePath = resolve2(input.path);
+      const filePath = resolve3(input.path);
       try {
         fs18.mkdirSync(ROADMAP_DIR, { recursive: true });
         let oldContent = null;
@@ -7016,7 +7215,7 @@ ${unifiedDiff(filePath, oldContent ?? "", input.content)}`;
       }
     }
     case "deleteFile": {
-      const filePath = resolve2(input.path);
+      const filePath = resolve3(input.path);
       try {
         if (!fs18.existsSync(filePath)) {
           return `Error: ${filePath} does not exist`;
@@ -7033,7 +7232,7 @@ ${unifiedDiff(filePath, oldContent, "")}`;
       if (!context) {
         return "Error: writePitchDeck requires execution context for design expert delegation";
       }
-      const filePath = resolve2("pitch.html");
+      const filePath = resolve3("pitch.html");
       try {
         fs18.mkdirSync(ROADMAP_DIR, { recursive: true });
         const exists = fs18.existsSync(filePath);
@@ -8204,14 +8403,14 @@ function buildCorpus() {
       });
     }
   }
-  const sep = "\n\n---\n\n";
+  const sep2 = "\n\n---\n\n";
   const sections = [];
   let usedChars = 0;
   for (const { path: p, content } of files) {
     const section = `## File: ${p}
 
 ${content}`;
-    const added = section.length + (sections.length > 0 ? sep.length : 0);
+    const added = section.length + (sections.length > 0 ? sep2.length : 0);
     if (sections.length > 0 && usedChars + added > BRAND_CORPUS_CHAR_LIMIT) {
       sections.push(
         `(brand corpus truncated: included ${sections.length} of ${files.length} files, ~${(usedChars / 1024).toFixed(0)}KB; brand-relevant files were prioritized.)`
@@ -8221,7 +8420,7 @@ ${content}`;
     sections.push(section);
     usedChars += added;
   }
-  return sections.join(sep);
+  return sections.join(sep2);
 }
 function headSlice(content) {
   if (content.length <= HEAD_SLICE_CHARS) {
@@ -9352,8 +9551,8 @@ var init_config = __esm({
 
 // src/headless/attachments.ts
 import { mkdirSync, existsSync } from "fs";
-import { writeFile } from "fs/promises";
-import { basename as basename2, join, extname as extname2 } from "path";
+import { writeFile as writeFile2 } from "fs/promises";
+import { basename as basename2, join as join2, extname as extname2 } from "path";
 function filenameFromUrl(url) {
   try {
     const pathname = new URL(url).pathname;
@@ -9364,7 +9563,7 @@ function filenameFromUrl(url) {
   }
 }
 function resolveUniqueFilename(name, claimed) {
-  const isFree = (candidate) => !claimed.has(candidate) && !existsSync(join(UPLOADS_DIR, candidate));
+  const isFree = (candidate) => !claimed.has(candidate) && !existsSync(join2(UPLOADS_DIR, candidate));
   if (isFree(name)) {
     return name;
   }
@@ -9398,7 +9597,7 @@ async function persistAttachments(attachments) {
   const results = await Promise.allSettled(
     nonVoice.map(async (att, i) => {
       const name = names[i];
-      const localPath = join(UPLOADS_DIR, name);
+      const localPath = join2(UPLOADS_DIR, name);
       const res = await fetch(att.url, {
         signal: AbortSignal.timeout(3e4)
       });
@@ -9406,7 +9605,7 @@ async function persistAttachments(attachments) {
         throw new Error(`HTTP ${res.status} downloading ${att.url}`);
       }
       const buffer = Buffer.from(await res.arrayBuffer());
-      await writeFile(localPath, buffer);
+      await writeFile2(localPath, buffer);
       log15.info("Attachment saved", {
         filename: name,
         path: localPath,
@@ -9420,7 +9619,7 @@ async function persistAttachments(attachments) {
           });
           if (textRes.ok) {
             extractedTextPath = `${localPath}.txt`;
-            await writeFile(extractedTextPath, await textRes.text(), "utf-8");
+            await writeFile2(extractedTextPath, await textRes.text(), "utf-8");
             log15.info("Extracted text saved", { path: extractedTextPath });
           }
         } catch {
@@ -10064,17 +10263,17 @@ var init_headless = __esm({
           return Promise.resolve(early);
         }
         const shouldTimeout = !USER_FACING_TOOLS.has(name);
-        return new Promise((resolve3) => {
+        return new Promise((resolve4) => {
           const timeout = shouldTimeout ? setTimeout(() => {
             this.pendingTools.delete(id);
-            resolve3(
+            resolve4(
               "Error: Tool timed out \u2014 no response from the app environment after 5 minutes."
             );
           }, EXTERNAL_TOOL_TIMEOUT_MS) : void 0;
           this.pendingTools.set(id, {
             resolve: (result) => {
               clearTimeout(timeout);
-              resolve3(result);
+              resolve4(result);
             },
             timeout
           });

package/dist/prompt/static/team.md

@@ -79,6 +79,6 @@ When you receive background results:
 
 You can only background the following two tasks, unless the user specifically asks you to do work in the background:
 - `productVision` seeding the initial roadmap after writing the spec for the first time, or updating the roadmap after large work sessions. Always background these: they take a while, and building continues while the roadmap catches up.
-- After writing the spec, once you have finalized the shape of the app, ask `visualDesignExpert` to create an icon and to design an Open Graph share image, then set them with `setProjectMetadata` alongside the app's name and short description. The icon is a generated asset. The share image should be composed as a self-contained HTML card (real lockup, brand fonts, exact type) and captured — not generated: serve the card HTML from `dist/interfaces/web/public/`, screenshot it with the `screenshot` tool at `width: 1200, height: 630, format: 'png'`, and save the resulting PNG into the app's public assets so the deployed site hosts it.
+- After writing the spec, once you have finalized the shape of the app, ask `visualDesignExpert` to create an app icon and an Open Graph share image (1200×630) and to report back the hosted asset URLs, then set them with `setProjectMetadata` alongside the app's name and short description. The designer produces and hosts both assets itself — do not compose, screenshot, or host them yourself.
 
 Do not background any other tasks. Be aware that sometimes tools like specSync will background on their own - this is not something that is within your control.

package/dist/subagents/designExpert/prompts/images.md

@@ -65,21 +65,31 @@ Editorial photography is the right call for hero images, landing pages, marketin
 
 The developer should never need to source their own imagery. Always provide URLs.
 
+### Rendered graphics — renderImage
+
+`renderImage` renders a self-contained HTML document you author in a real browser and returns a durably hosted PNG at exact pixel dimensions, with a fidelity review. It is the deterministic counterpart to `generateImages`: exact hex colors, real loaded webfonts, precise geometry. Route any token-exact graphic through it — share cards, wordmarks, flat/geometric icon tiles, badges, anything where letterforms and spacing carry the design. Use the image model for organic, photographic, and illustrated work; use the browser for precision.
+
+Author it as HTML/CSS. The renderer waits for fonts to load before capturing. Size `html`/`body` to the full dimensions with `margin: 0`. When you need glyphs, inline a known-good SVG from something like Tabler or build the shape from CSS. Set `scale: 2` for crisp raster masters. `transparentBackground: true` with no background on `html`/`body` gives a true-alpha PNG with clean edeges.
+
 ### Icons and logos
 
 App icons and logos require work and thinking to get right. Prefer to use logos and icons as opposed to generic wordmarks when representing the app in UI (e.g., in navigation, on landing pages, login moments, etc).
 
+Match the engine to the icon direction: the smooth 3D emoji style below is `generateImages` territory; a flat, geometric, or design-system icon (a solid tile with a glyph, exact brand tokens) should be composed as HTML/CSS and rendered with `renderImage` instead.
+
 **What works:** Smooth 3D rendering in the style of 2026-era macOS/iOS app icons - apple emoji/nintendo style works really well for beautiful iconography. One clear object or symbol — rounded, immediately recognizable. Clean surfaces with soft lighting and gentle shadows. Two or three accent colors, not a rainbow. Always full bleed.
 
 **What doesn't work:** Flat illustration looks dated, photorealistic rendering is too noisy at small sizes, overly detailed scenes become illegible.
 
+An app icon master must be a full-bleed square with sharp corners — the OS applies its own rounded-corner mask, so a result that comes back pre-rounded, inset on a background, framed, bordered, or floating with a drop shadow is unusable, not a style choice. Image models drift toward exactly that mockup presentation because their training data is full of App Store screenshots. Check each generation's analysis before accepting an icon: the artwork must reach all four edges with square corners. If a variant comes back inset or pre-rounded, regenerate rather than settle for it.
+
 Keep logos and icons consistent - if you already have a logo, use `editImages` to turn it into an icon, and vice versa.
 
 #### Open Graph Sharing Images
 
 OG images show up in iMessage, Slack, Twitter, etc. at small sizes. They're a mood piece, not a messaging opportunity. Keep text minimal: the app name and at most a short tagline (three to five words). Think App Store feature card — one beautiful composition that makes someone want to tap. The text should feel integrated into the scene, not pasted on a background.
 
-A share card is a wordmark, a short line, and a logo on a brand field — **compose it as HTML, don't generate it with the image model.** A generated image gives you odd letterforms and no brand fidelity; HTML gives you the real SVG lockup, the actual brand fonts, exact colors, and pixel-perfect spacing. Author a self-contained HTML document sized to 1200 × 630 — the lockup inline as SVG, the brand fonts inlined as base64 (so nothing loads late and captures as a fallback), the palette and type exact — then capture it with the `screenshot` tool at `width: 1200, height: 630, format: 'png'`, a faithful real-browser render. Don't route it through a document/HTML-to-image "openGraph" render mode; that pipeline strips CSS backgrounds. The same compose-and-capture approach beats generation for any precise brand graphic where letterforms and spacing carry the design.
+A share card is a wordmark, a short line, and a logo on a brand field — **compose it as HTML and render it with `renderImage` at 1200 × 630, don't generate it with the image model.** A generated image gives you odd letterforms and no brand fidelity; a browser render gives you the real lockup, the actual brand fonts, exact colors, and pixel-perfect spacing. The returned URL is durably hosted and ready to hand over for app metadata; pass `savePath` (e.g. `dist/interfaces/web/public/og-image.png`) when the deployed site should also self-host the asset for its `og:image` meta tags. Don't route it through a document/HTML-to-image "openGraph" render mode; that pipeline strips CSS backgrounds.
 
 ### When to use images
 

package/dist/subagents/designExpert/prompts/instructions.md

@@ -14,6 +14,7 @@ Think about the ways you can truly elevate the design. Use image generation to c
 - When multiple tool calls are independent, make them all in a single turn. Searching for three different products, or fetching two reference sites: batch them instead of doing one per turn.
 - The screenshot tool supports an `instructions` parameter for taking screenshots that require interaction first. If you need to screenshot a state that's behind a modal, a specific tab, or a multi-step flow, pass `instructions` describing how to get there (e.g., "dismiss the welcome modal, then click XYZ"). A browser automation agent will follow your instructions and capture the screenshot for you. You can not use this to scroll - you will always receive a full page screenshot. Only use this if you need to trigger stateful changes within the app to get the full-page screenshot.
 - After you've taken a screenshot, use analyze image to ask different questions about it - don't re-screenshot the page unnecessarily.
+- Match the image engine to the job: `renderImage` (a browser rendering HTML you author) for token-exact graphics — share cards, wordmarks, flat icon tiles; `generateImages` (an image model) for organic, photographic, and illustrated work. Don't ask the image model to hit exact hex codes or typography, and don't hand-write SVG path data — compose HTML/CSS and render it.
 - When you write user-facing copy (headlines, captions, labels, body text), hand it to `polishCopy` before finalizing. It tightens prose so it reads like a person wrote it rather than a machine, without changing what it says. Cheap and fast — use it on any copy that will ship.
 
 ## Voice

package/dist/subagents/designExpert/tools/images/enhance-image-prompt.md

@@ -61,12 +61,16 @@ For photorealistic images, go deep on four dimensions:
 
 For app icons and logos, the goal is something that reads clearly at phone home screen size and feels polished and beautiful - like it could appear as an "App of the Year" award winner.
 
-- Frame as "A 3D icon against a ful bleed XYZ background" followed by the subject. Do NOT use the phrase "app icon" — it triggers mockup framing (the model renders an icon inset on a phone screen or mounted on a wall). "3D icon" works. Always specify "Full bleed square composition with no padding or margin".
-- Describe smooth, rounded emoji-type 3D objects — think current macOS/iOS app icon design language. Apple emoji/nintendo style works really well for beautiful iconography. Not flat illustration, not photorealistic, not vectors.
+The single biggest failure mode is inherited mockup framing. The model's training data is saturated with App Store screenshots and portfolio shots, so icon vocabulary pulls it toward rendering the *presentation* of an icon — a rounded rectangle with a drop shadow, inset on a white background, on a phone screen, or mounted on a wall — instead of the artwork itself. The deliverable is always a full-bleed square master with sharp corners (the OS applies its own corner mask), so a pre-rounded or inset result is unusable. Every rule below exists to defeat that pull:
+
+- Frame as "A 3D icon against a XYZ background" followed by the subject. Do NOT use the phrase "app icon" — it triggers mockup framing. "3D icon" works.
+- Do NOT mention rounded corners, corner radius, squircles, masks, borders, frames, padding, margins, safe zones, or the icon "floating" or "on a background" — every one of these summons the inset-rounded-rectangle mockup. Do not say "full bleed" as a bare label either; the model follows positive claims, not layout jargon or prohibitions.
+- Instead, make edge-to-edge coverage a positive, physical property of the background, and end every icon prompt with a composition clause to this effect: "The background fills the entire square canvas, extending past all four edges of the frame; the corners of the image are sharp and square; the composition is presented flat and viewed straight-on."
+- Center the subject and keep it within roughly the middle 70% of the frame — the OS corner mask crops into the corners, and a centered subject survives a corrective crop if a stray border does sneak in.
+- Describe smooth, rounded emoji-type 3D objects — think current macOS/iOS app icon design language. Apple emoji/nintendo style works really well for beautiful iconography. Not flat illustration, not photorealistic, not vectors. (Rounded applies to the *object's* forms only — never to the canvas or its corners.)
 - Subjects should be immediately recognizable. Prefer one clear object or symbol, not a scene.
 - Specify "reads well at small sizes" as an explicit constraint.
 - Keep color intentional and limited — two or three accent colors plus the object's base tone. Colors should complement the app's brand if known.
-- You must specify that the image is full bleed - never say anything about rounded corners or there is a high likelihood that the image will come back as a rounded rectangle on a white background!
 - Apply the same material/lighting/color density as photography prompts, just to a single object. Describe the surface finish ("high-gloss lacquered finish with clean specular highlights," "soft matte ceramic with subtle surface texture"), the lighting behavior ("warm directional light from upper left producing a bright highlight streak across the curved surface and a soft shadow beneath"), and color as relationships ("deep coral body graduating to warm peach at the highlight edge, with a cream accent on the lens element"). Generic descriptors like "clean surfaces, soft lighting" produce generic icons.
 
 ## Output

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindstudio-ai/remy",
-  "version": "0.1.275",
+  "version": "0.1.276",
   "description": "Remy coding agent",
   "repository": {
     "type": "git",