@mindstudio-ai/remy 0.1.244 → 0.1.245

package/dist/headless.js

@@ -1881,11 +1881,11 @@ var setProjectMetadataTool = {
         },
         iconUrl: {
           type: "string",
-          description: "URL for the app icon (square."
+          description: "URL for the app icon (square)."
         },
         openGraphShareImageUrl: {
           type: "string",
-          description: "URL for the Open Graph share image (1200x630)."
+          description: "URL for the Open Graph share image (1200\xD7630 PNG)."
         }
       }
     }
@@ -2819,9 +2819,7 @@ async function analyzeImage(params) {
 
 // src/tools/_helpers/screenshot.ts
 var SCREENSHOT_ANALYSIS_PROMPT = `Describe everything visible on screen from top to bottom \u2014 every element, its position, its size relative to the viewport, its colors, its content. Be comprehensive, thorough, and spatial. After the inventory, note anything that looks visually broken (overlapping elements, clipped text, misaligned components).`;
-var TEXT_WRAP_DISCLAIMER = `Note: ignore text wrapping issues. Screenshots occasionally show text wrapping onto an extra line compared to the live page \u2014 most noticeable in buttons, badges, and headings. This is a known limitation of SVG foreignObject rendering used the DOM-to-image capture library that took the screenshot. The browser's SVG renderer computes slightly wider text metrics than the HTML layout engine, so text that fits on one line in the live DOM can overflow by a fraction of a pixel in the capture - this is not a real issue.
-
-Respond only with your analysis as Markdown and absolutely no other text. Do not use emojis - use unicode if you need symbols.`;
+var ANALYSIS_RESPONSE_FORMAT = `Respond only with your analysis as Markdown and absolutely no other text. Do not use emojis - use unicode if you need symbols.`;
 function buildScreenshotAnalysisPrompt(opts) {
   let p = opts?.prompt || SCREENSHOT_ANALYSIS_PROMPT;
   if (opts?.styleMap) {
@@ -2835,7 +2833,7 @@ ${opts.styleMap}
   }
   p += `
 
-${TEXT_WRAP_DISCLAIMER}`;
+${ANALYSIS_RESPONSE_FORMAT}`;
   return p;
 }
 async function streamScreenshotAnalysis(opts) {
@@ -2861,6 +2859,9 @@ async function captureAndAnalyzeScreenshot(promptOrOptions) {
   let model;
   let path13;
   let fullPage = true;
+  let width;
+  let height;
+  let format;
   if (typeof promptOrOptions === "object" && promptOrOptions !== null) {
     prompt = promptOrOptions.prompt;
     existingUrl = promptOrOptions.imageUrl;
@@ -2868,11 +2869,17 @@ async function captureAndAnalyzeScreenshot(promptOrOptions) {
     if (promptOrOptions.fullPage !== void 0) {
       fullPage = promptOrOptions.fullPage;
     }
+    width = promptOrOptions.width;
+    height = promptOrOptions.height;
+    format = promptOrOptions.format;
     onLog = promptOrOptions.onLog;
     model = promptOrOptions.model;
   } else {
     prompt = promptOrOptions;
   }
+  if (width != null && height != null) {
+    fullPage = false;
+  }
   let url;
   let styleMap;
   if (existingUrl) {
@@ -2880,7 +2887,12 @@ async function captureAndAnalyzeScreenshot(promptOrOptions) {
   } else {
     const ssResult = await sidecarRequest(
       fullPage ? "/screenshot-full-page" : "/screenshot-viewport",
-      path13 ? { path: path13 } : void 0,
+      {
+        ...path13 ? { path: path13 } : {},
+        ...width != null ? { width } : {},
+        ...height != null ? { height } : {},
+        ...format ? { format } : {}
+      },
       { timeout: fullPage ? 12e4 : 3e4 }
     );
     url = ssResult?.url || ssResult?.screenshotUrl;
@@ -4009,7 +4021,7 @@ var screenshotTool = {
   clearable: true,
   definition: {
     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. 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. 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.",
+    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. 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. 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.",
     inputSchema: {
       type: "object",
       properties: {
@@ -4029,6 +4041,19 @@ var screenshotTool = {
           type: "string",
           description: 'Navigate to this path before capturing (e.g. "/settings", "/dashboard"). If omitted, screenshots the current page.'
         },
+        width: {
+          type: "number",
+          description: "Exact capture width in pixels. Set together with `height` to render a fixed-size image; clips to exactly this viewport instead of the default preview size."
+        },
+        height: {
+          type: "number",
+          description: "Exact capture height in pixels. Set together with `width`."
+        },
+        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."
+        },
         instructions: {
           type: "string",
           description: "If the screenshot you need requires interaction first (dismissing a modal, clicking a tab, filling out a form, navigating a flow, scrolling to a section, getting through a login/auth checkpoint), describe the steps to get there. A browser automation agent will follow these instructions, then capture per your `fullPage` choice \u2014 so with `fullPage: false` you can scroll to a section and capture just that viewport. It can bypass auth and get right to where it needs to be if you tell it to authenticate as a test user and give it the path/screen to start its test at. Never describe what names or values to use when applying the instructions - the browser automation agent must use its own values for it to work properly. If a specific auth role is required to access the content, be sure to note that - it can automatically assume it for the purpose of testing. Use only when interaction is required to *reach* the state you want to capture \u2014 log in, dismiss a modal, switch a tab, follow a route, scroll to a section. If your steps are exercising the app's functionality across multiple states (running flows, asserting behavior under interaction, multi-step QA), use `runAutomatedBrowserTest` instead."
@@ -4071,6 +4096,9 @@ var screenshotTool = {
           prompt: input.prompt,
           path: input.path,
           fullPage,
+          width: input.width,
+          height: input.height,
+          format: input.format,
           onLog: context?.onLog,
           model: resolveModel("imageAnalysis", context?.models, context?.model)
         });

package/dist/index.js

@@ -1462,11 +1462,11 @@ var init_setProjectMetadata = __esm({
             },
             iconUrl: {
               type: "string",
-              description: "URL for the app icon (square."
+              description: "URL for the app icon (square)."
             },
             openGraphShareImageUrl: {
               type: "string",
-              description: "URL for the Open Graph share image (1200x630)."
+              description: "URL for the Open Graph share image (1200\xD7630 PNG)."
             }
           }
         }
@@ -3555,7 +3555,7 @@ ${opts.styleMap}
   }
   p += `
 
-${TEXT_WRAP_DISCLAIMER}`;
+${ANALYSIS_RESPONSE_FORMAT}`;
   return p;
 }
 async function streamScreenshotAnalysis(opts) {
@@ -3581,6 +3581,9 @@ async function captureAndAnalyzeScreenshot(promptOrOptions) {
   let model;
   let path14;
   let fullPage = true;
+  let width;
+  let height;
+  let format;
   if (typeof promptOrOptions === "object" && promptOrOptions !== null) {
     prompt = promptOrOptions.prompt;
     existingUrl = promptOrOptions.imageUrl;
@@ -3588,11 +3591,17 @@ async function captureAndAnalyzeScreenshot(promptOrOptions) {
     if (promptOrOptions.fullPage !== void 0) {
       fullPage = promptOrOptions.fullPage;
     }
+    width = promptOrOptions.width;
+    height = promptOrOptions.height;
+    format = promptOrOptions.format;
     onLog = promptOrOptions.onLog;
     model = promptOrOptions.model;
   } else {
     prompt = promptOrOptions;
   }
+  if (width != null && height != null) {
+    fullPage = false;
+  }
   let url;
   let styleMap;
   if (existingUrl) {
@@ -3600,7 +3609,12 @@ async function captureAndAnalyzeScreenshot(promptOrOptions) {
   } else {
     const ssResult = await sidecarRequest(
       fullPage ? "/screenshot-full-page" : "/screenshot-viewport",
-      path14 ? { path: path14 } : void 0,
+      {
+        ...path14 ? { path: path14 } : {},
+        ...width != null ? { width } : {},
+        ...height != null ? { height } : {},
+        ...format ? { format } : {}
+      },
       { timeout: fullPage ? 12e4 : 3e4 }
     );
     url = ssResult?.url || ssResult?.screenshotUrl;
@@ -3627,16 +3641,14 @@ async function captureAndAnalyzeScreenshot(promptOrOptions) {
     model
   });
 }
-var SCREENSHOT_ANALYSIS_PROMPT, TEXT_WRAP_DISCLAIMER;
+var SCREENSHOT_ANALYSIS_PROMPT, ANALYSIS_RESPONSE_FORMAT;
 var init_screenshot = __esm({
   "src/tools/_helpers/screenshot.ts"() {
     "use strict";
     init_sidecar();
     init_analyzeImage();
     SCREENSHOT_ANALYSIS_PROMPT = `Describe everything visible on screen from top to bottom \u2014 every element, its position, its size relative to the viewport, its colors, its content. Be comprehensive, thorough, and spatial. After the inventory, note anything that looks visually broken (overlapping elements, clipped text, misaligned components).`;
-    TEXT_WRAP_DISCLAIMER = `Note: ignore text wrapping issues. Screenshots occasionally show text wrapping onto an extra line compared to the live page \u2014 most noticeable in buttons, badges, and headings. This is a known limitation of SVG foreignObject rendering used the DOM-to-image capture library that took the screenshot. The browser's SVG renderer computes slightly wider text metrics than the HTML layout engine, so text that fits on one line in the live DOM can overflow by a fraction of a pixel in the capture - this is not a real issue.
-
-Respond only with your analysis as Markdown and absolutely no other text. Do not use emojis - use unicode if you need symbols.`;
+    ANALYSIS_RESPONSE_FORMAT = `Respond only with your analysis as Markdown and absolutely no other text. Do not use emojis - use unicode if you need symbols.`;
   }
 });
 
@@ -4622,7 +4634,7 @@ var init_screenshot2 = __esm({
       clearable: true,
       definition: {
         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. 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. 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.",
+        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. 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. 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.",
         inputSchema: {
           type: "object",
           properties: {
@@ -4642,6 +4654,19 @@ var init_screenshot2 = __esm({
               type: "string",
               description: 'Navigate to this path before capturing (e.g. "/settings", "/dashboard"). If omitted, screenshots the current page.'
             },
+            width: {
+              type: "number",
+              description: "Exact capture width in pixels. Set together with `height` to render a fixed-size image; clips to exactly this viewport instead of the default preview size."
+            },
+            height: {
+              type: "number",
+              description: "Exact capture height in pixels. Set together with `width`."
+            },
+            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."
+            },
             instructions: {
               type: "string",
               description: "If the screenshot you need requires interaction first (dismissing a modal, clicking a tab, filling out a form, navigating a flow, scrolling to a section, getting through a login/auth checkpoint), describe the steps to get there. A browser automation agent will follow these instructions, then capture per your `fullPage` choice \u2014 so with `fullPage: false` you can scroll to a section and capture just that viewport. It can bypass auth and get right to where it needs to be if you tell it to authenticate as a test user and give it the path/screen to start its test at. Never describe what names or values to use when applying the instructions - the browser automation agent must use its own values for it to work properly. If a specific auth role is required to access the content, be sure to note that - it can automatically assume it for the purpose of testing. Use only when interaction is required to *reach* the state you want to capture \u2014 log in, dismiss a modal, switch a tab, follow a route, scroll to a section. If your steps are exercising the app's functionality across multiple states (running flows, asserting behavior under interaction, multi-step QA), use `runAutomatedBrowserTest` instead."
@@ -4684,6 +4709,9 @@ var init_screenshot2 = __esm({
               prompt: input.prompt,
               path: input.path,
               fullPage,
+              width: input.width,
+              height: input.height,
+              format: input.format,
               onLog: context?.onLog,
               model: resolveModel("imageAnalysis", context?.models, context?.model)
             });

package/dist/prompt/static/team.md

@@ -76,6 +76,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 intiial roadmap after writing the spec for the first time or updating the roadmap after large work sessions. This task takes a while and we can allow the user to continue building while it happens in the background.
-- After writing the spec, once you have finalized the shape of the app, ask `visualDesignExpert` to create an icon and an open graph shring image for the app, then set them with `setProjectMetadata`, alongside the app's name and short description.
+- 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.
 
 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

@@ -77,7 +77,9 @@ Keep logos and icons consistent - if you already have a logo, use `editImages` t
 
 #### 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. Generate at 4096 × 2150 and return the CDN URL.
+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.
 
 ### When to use images
 

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

@@ -69,12 +69,6 @@ For app icons and logos, the goal is something that reads clearly at phone home
 - 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.
 
-#### Open Graph Sharing Images
-
-OG images are often a user's first impression of the app — they show up in iMessage, Slack, Twitter, etc. at small sizes. Keep text minimal: the app name and at most a short tagline (three to five words). This is a mood piece, not a messaging opportunity. Think App Store feature card — one beautiful composition that makes someone want to tap.
-
-Apply the same material/lighting/color density as photography prompts. The text should feel integrated into the scene — typeset within the composition, not pasted on top. Describe the typography treatment (weight, size, color, position) as part of the overall image, and describe how the background interacts with the text (glow, depth, contrast). The whole image should read as one cohesive graphic, not layers.
-
 ## Output
 
 Respond with ONLY the enhanced prompt. Be detailed and specific — a good prompt is a dense paragraph of 80-150 words that paints a complete picture: style, subject, materials, lighting behavior, color relationships, atmosphere, and composition. Terse prompts produce generic images.

package/package.json

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