@mindstudio-ai/remy 0.1.101 → 0.1.103

package/dist/headless.js

@@ -2452,7 +2452,11 @@ 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). Respond only with your analysis as Markdown and absolutely no other text. Do not use emojis - use unicode if you need symbols.";
+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).
+
+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.`;
 async function captureAndAnalyzeScreenshot(promptOrOptions) {
   let prompt;
   let existingUrl;
@@ -3455,7 +3459,12 @@ __export(analyzeImage_exports, {
   definition: () => definition4,
   execute: () => execute4
 });
-var DEFAULT_PROMPT = "Describe everything visible in this image \u2014 every element, its position, its size relative to the frame, its colors, its content. Be comprehensive, thorough and spatial. After the inventory, note anything that looks visually broken (overlapping elements, clipped text, misaligned components). Respond only with your analysis as Markdown and absolutely no other text. Do not use emojis - use unicode if you need symbols.";
+var DEFAULT_PROMPT = `
+Describe everything visible in this image \u2014 every element, its position, its size relative to the frame, its colors, its content. Be comprehensive, thorough and spatial. After the inventory, note anything that looks visually broken (overlapping elements, clipped text, misaligned components).
+
+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 definition4 = {
   clearable: true,
   name: "analyzeImage",
@@ -5063,6 +5072,11 @@ async function runTurn(params) {
     userMsg.attachments = attachments;
   }
   state.messages.push(userMsg);
+  onEvent({
+    type: "user_message",
+    text: userMessage,
+    hidden: hidden || void 0
+  });
   const isFirstMessage = state.messages.filter((m) => m.role === "user").length === 1;
   const STATUS_EXCLUDED_TOOLS = /* @__PURE__ */ new Set([
     "setProjectOnboardingState",

package/dist/index.js

@@ -2200,7 +2200,11 @@ var init_screenshot = __esm({
     "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). Respond only with your analysis as Markdown and absolutely no other text. Do not use emojis - use unicode if you need symbols.";
+    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).
+
+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.`;
   }
 });
 
@@ -3298,7 +3302,12 @@ var init_analyzeImage2 = __esm({
   "src/subagents/designExpert/tools/analyzeImage.ts"() {
     "use strict";
     init_analyzeImage();
-    DEFAULT_PROMPT = "Describe everything visible in this image \u2014 every element, its position, its size relative to the frame, its colors, its content. Be comprehensive, thorough and spatial. After the inventory, note anything that looks visually broken (overlapping elements, clipped text, misaligned components). Respond only with your analysis as Markdown and absolutely no other text. Do not use emojis - use unicode if you need symbols.";
+    DEFAULT_PROMPT = `
+Describe everything visible in this image \u2014 every element, its position, its size relative to the frame, its colors, its content. Be comprehensive, thorough and spatial. After the inventory, note anything that looks visually broken (overlapping elements, clipped text, misaligned components).
+
+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.`;
     definition4 = {
       clearable: true,
       name: "analyzeImage",
@@ -5112,6 +5121,11 @@ async function runTurn(params) {
     userMsg.attachments = attachments;
   }
   state.messages.push(userMsg);
+  onEvent({
+    type: "user_message",
+    text: userMessage,
+    hidden: hidden || void 0
+  });
   const isFirstMessage = state.messages.filter((m) => m.role === "user").length === 1;
   const STATUS_EXCLUDED_TOOLS = /* @__PURE__ */ new Set([
     "setProjectOnboardingState",

package/dist/prompt/static/instructions.md

@@ -32,7 +32,7 @@ You will occasionally receive automated messages prefixed with `@@automated_mess
 
 ## Style
 - Your messages are rendered as markdown. Use formatting (headers, bold, lists, code blocks) when it helps readability. You can include images using `![alt](url)` — use this to show the user screenshots, generated images, or other visual references inline in your messages.
-- When offering suggestions or options the user might want to quickly select in a conversation, format them as clickable suggestion links: `[suggestion text](suggest:suggestion text)`. These render as clickable chips in the UI. When clicked, the suggestion text is sent as the user's next message. Use these liberally when brainstorming, offering directions, or listing options in conversation. When explicitly gathering information from the user, however, always use the `promptUser` tool instead.
+- When offering suggestions or options the user might want to quickly select in a conversation, format them as clickable suggestion links: `[suggestion text](suggest:suggestion text)`. These render as clickable chips in the UI. When clicked, the suggestion text is sent as the user's next message. Use these liberally: when brainstorming, offering directions, listing options, or any time you're asking a question the user could answer with a quick tap. When explicitly gathering information from the user, however, always use the `promptUser` tool instead.
 - Keep language accessible. Describe what the app *does*, not how it's implemented, unless the user demonstrates technical fluency.
 - Always use full paths relative to the project root when mentioning files (`dist/interfaces/web/src/App.tsx`, not `App.tsx`). Paths will be rendered as clickable links for the user.
 - Use inline `code` formatting only for things the user needs to type or search for.

package/dist/prompt/static/team.md

@@ -10,7 +10,7 @@ Note: when you talk about the team to the user, refer to them by their name or a
 
 Your designer. Consult for any visual decision — choosing a color, picking fonts, proposing a layout, soucing images, reviewing whether something looks good. Not just during intake or big design moments. If you're about to write CSS and you're not sure about a color, ask. If you just built a page and want a gut check, ask the designer to take a quick look. If the user says "I don't like how this looks," ask the design expert what to change rather than guessing yourself, or if they say "I want a different image," that's the designer's problem, not yours. The design expert can also source images if you need images for placeholders in scenarios - use it for bespoke, tailor-made images suited to the scenario instead of trying to guess stock photo URLs.
 
-The design expert cannot see your conversation with the user, so include relevant context and requirements in your task. It can, however, see its past conversation with you, so you don't need to re-summarize everything it already knows. Just describe what's needed now and reference prior work naturally ("the user wants the colors warmer" is enough if the designer already built the palette). It can take screenshots of the app preview on its own (you need to give it paths to different pages if it needs them - it can't navigate by clicking) — just ask it to review what's been built. It has curated font catalogs and design inspiration built in — don't ask it to research generic inspiration or look up "best X apps." Only point it at specific URLs if the user references a particular site, brand, or identity to match.
+The design expert cannot see your conversation with the user, so include relevant context and requirements in your task. It can, however, see its past conversation with you, as well as the raw spec files, so you don't need to re-summarize everything it already knows. Just describe what's needed now and reference prior work naturally ("the user wants the colors warmer" is enough if the designer already built the palette). It can take screenshots of the app preview on its own (you need to give it paths to different pages if it needs them - it can't navigate by clicking) — just ask it to review what's been built. It has curated font catalogs and design inspiration built in — don't ask it to research generic inspiration or look up "best X apps." Only point it at specific URLs if the user references a particular site, brand, or identity to match.
 
 The designer will return concrete resources: hex values, font names with CSS URLs, image URLs, layout descriptions, as well as specific techniques, CSS properties, animation timings, code snippets, and other values. Even if these don't seem important, it is critical that you note them in spec annotations and rely on them while building - the user cares about design almost above all else, and it is important to be extremely precise in your work. The designer can also return code-fenced typography, color schemes, and wireframes (self-contained HTML and CSS). Write these directly into specs for future reference.
 

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

@@ -73,6 +73,8 @@ App icons and logos require work and thinking to get right. Prefer to use logos
 
 **What doesn't work:** Flat illustration looks dated, photorealistic rendering is too noisy at small sizes, overly detailed scenes become illegible.
 
+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. Generate at 4096 × 2150 and return the CDN URL with `?w=1200&h=630&fit=crop`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindstudio-ai/remy",
-  "version": "0.1.101",
+  "version": "0.1.103",
   "description": "MindStudio coding agent",
   "repository": {
     "type": "git",