@mindstudio-ai/remy 0.1.230 → 0.1.232

package/dist/headless.js

@@ -2882,6 +2882,19 @@ ${partial}` : "[INTERRUPTED] Tool execution was stopped.";
   }
 };
 
+// src/toolResultCap.ts
+var MAX_TOOL_RESULT_BYTES = 256 * 1024;
+function capToolResult(result) {
+  const total = Buffer.byteLength(result, "utf-8");
+  if (total <= MAX_TOOL_RESULT_BYTES) {
+    return result;
+  }
+  const head = Buffer.from(result, "utf-8").subarray(0, MAX_TOOL_RESULT_BYTES).toString("utf-8");
+  return head + `
+
+(tool result truncated at ${(MAX_TOOL_RESULT_BYTES / 1024).toFixed(0)}KB of ${(total / 1024).toFixed(0)}KB \u2014 too large to keep in context. Narrow the call (select fewer fields, paginate, or query a subset) instead of fetching everything.)`;
+}
+
 // src/statusWatcher.ts
 function startStatusWatcher(config) {
   const { apiConfig, getContext, onStatus, interval = 5e3, signal } = config;
@@ -3407,7 +3420,7 @@ ${partial}` : "[INTERRUPTED] Agent was interrupted before producing output.",
                   subAgentMessages
                 );
               }
-              safeSettle(result, result.startsWith("Error"));
+              safeSettle(capToolResult(result), result.startsWith("Error"));
             } catch (err) {
               safeSettle(`Error: ${err.message}`, true);
             }
@@ -3595,9 +3608,10 @@ var BROWSER_TOOLS = [
                   "evaluate",
                   "styles",
                   "screenshotFullPage",
-                  "screenshotViewport"
+                  "screenshotViewport",
+                  "setViewport"
                 ],
-                description: "snapshot: accessibility tree of the page (waits for network to settle). click: click an element (animated cursor, full event sequence). type: type text into input (one char at a time, works with React/Vue/Svelte). select: select a dropdown option by text. wait: wait for an element to appear (polls 100ms, waits for network). navigate: navigate to a URL within the app (waits for load, subsequent steps run on new page). evaluate: run JS in the page. styles: read computed CSS styles from elements (pass properties array with camelCase names, or omit for defaults). screenshotFullPage: full-page viewport-stitched screenshot (returns CDN url with dimensions). screenshotViewport: screenshot of just the visible viewport \u2014 pass `scrollToSelector` (or `scrollY`) on this step to scroll a section into view and capture it in one atomic step (no separate scroll needed)."
+                description: 'snapshot: accessibility tree of the page (waits for network to settle). click: click an element (animated cursor, full event sequence). type: type text into input (one char at a time, works with React/Vue/Svelte). select: select a dropdown option by text. wait: wait for an element to appear (polls 100ms, waits for network). navigate: navigate to a URL within the app (waits for load, subsequent steps run on new page). evaluate: run JS in the page. styles: read computed CSS styles from elements (pass properties array with camelCase names, or omit for defaults). screenshotFullPage: full-page viewport-stitched screenshot (returns CDN url with dimensions). screenshotViewport: screenshot of just the visible viewport \u2014 pass `scrollToSelector` (or `scrollY`) on this step to scroll a section into view and capture it in one atomic step (no separate scroll needed). setViewport: switch the browser between desktop and mobile rendering (pass `mode`: "desktop" or "mobile"). Reloads the page so responsive layouts, media queries, and matchMedia re-evaluate \u2014 use it to QA mobile/responsive views.'
               },
               ref: {
                 type: "string",
@@ -3651,6 +3665,11 @@ var BROWSER_TOOLS = [
               scrollY: {
                 type: "number",
                 description: "For screenshotViewport: absolute Y offset to scroll to before the shot, when no selector is available."
+              },
+              mode: {
+                type: "string",
+                enum: ["desktop", "mobile"],
+                description: 'For setViewport: the rendering mode to switch to. "mobile" emulates a phone (narrow width, touch, device pixel ratio); "desktop" is the standard wide viewport.'
               }
             },
             required: ["command"]
@@ -3700,6 +3719,14 @@ var log7 = createLogger("browser-automation");
 async function runBrowserAutomation(task, context, opts) {
   const release = await acquireBrowserLock();
   try {
+    try {
+      await sidecarRequest(
+        "/set-viewport",
+        { mode: "default" },
+        { timeout: 2e4 }
+      );
+    } catch {
+    }
     let lastBrowserCommandViewport;
     const result = await runSubAgent({
       system: getBrowserAutomationPrompt(),
@@ -5122,6 +5149,50 @@ ${summaryText}
 var DESCRIPTION = `
 Visual design expert. Describe the situation and what you need \u2014 the agent decides what to deliver. It reads the spec files automatically. Include relevant user requirements and context it can't get from the spec, but do not list specific deliverables or tell it how to do its job. Do not suggest implementation details or ideas - only relay what is needed.
 `.trim();
+var RENDER_WRITE_TOOL_NAMES = /* @__PURE__ */ new Set(["writeFile", "editFile"]);
+var DESIGN_EXPERT_RENDER_TOOLS = [
+  ...DESIGN_EXPERT_TOOLS,
+  writeFileTool.definition,
+  editFileTool.definition
+];
+async function runDesignExpert(opts, context) {
+  const history = context.conversationMessages ? getSubAgentHistory(context.conversationMessages, "visualDesignExpert") : [];
+  return runSubAgent({
+    system: getDesignExpertPrompt(context.onboardingState),
+    task: opts.task,
+    history: history.length > 0 ? history : void 0,
+    tools: opts.enableWrite ? DESIGN_EXPERT_RENDER_TOOLS : DESIGN_EXPERT_TOOLS,
+    externalTools: /* @__PURE__ */ new Set(),
+    executeTool: (name, input, toolCallId, onLog, sams) => {
+      const childCtx = toolCallId ? { ...deriveContext(context, toolCallId), subAgentMessages: sams } : { ...context, subAgentMessages: sams };
+      if (COMMON_READ_TOOL_NAMES.has(name)) {
+        return executeTool(name, input, childCtx);
+      }
+      if (opts.enableWrite && RENDER_WRITE_TOOL_NAMES.has(name)) {
+        return executeTool(name, input, childCtx);
+      }
+      return executeDesignExpertTool(name, input, childCtx, toolCallId, onLog);
+    },
+    apiConfig: context.apiConfig,
+    model: resolveModel("visualDesignExpert", context.models, context.model),
+    subAgentId: "visualDesignExpert",
+    signal: context.signal,
+    parentToolId: context.toolCallId,
+    requestId: context.requestId,
+    onEvent: context.onEvent,
+    resolveExternalTool: context.resolveExternalTool,
+    toolRegistry: context.toolRegistry,
+    background: opts.background,
+    onBackgroundComplete: opts.background ? (bgResult) => {
+      context.onBackgroundComplete?.(
+        context.toolCallId,
+        opts.reportingName ?? "visualDesignExpert",
+        bgResult.text,
+        bgResult.messages
+      );
+    } : void 0
+  });
+}
 var designExpertTool = {
   clearable: false,
   definition: {
@@ -5146,49 +5217,20 @@ var designExpertTool = {
     if (!context) {
       return "Error: visual design expert requires execution context";
     }
-    const history = context.conversationMessages ? getSubAgentHistory(context.conversationMessages, "visualDesignExpert") : [];
-    const result = await runSubAgent({
-      system: getDesignExpertPrompt(context.onboardingState),
-      task: input.task,
-      history: history.length > 0 ? history : void 0,
-      tools: DESIGN_EXPERT_TOOLS,
-      externalTools: /* @__PURE__ */ new Set(),
-      executeTool: (name, input2, toolCallId, onLog, sams) => {
-        const childCtx = toolCallId ? { ...deriveContext(context, toolCallId), subAgentMessages: sams } : { ...context, subAgentMessages: sams };
-        if (COMMON_READ_TOOL_NAMES.has(name)) {
-          return executeTool(name, input2, childCtx);
-        }
-        return executeDesignExpertTool(
-          name,
-          input2,
-          childCtx,
-          toolCallId,
-          onLog
-        );
+    const result = await runDesignExpert(
+      {
+        task: input.task,
+        background: input.background
       },
-      apiConfig: context.apiConfig,
-      model: resolveModel("visualDesignExpert", context.models, context.model),
-      subAgentId: "visualDesignExpert",
-      signal: context.signal,
-      parentToolId: context.toolCallId,
-      requestId: context.requestId,
-      onEvent: context.onEvent,
-      resolveExternalTool: context.resolveExternalTool,
-      toolRegistry: context.toolRegistry,
-      background: input.background,
-      onBackgroundComplete: input.background ? (bgResult) => {
-        context.onBackgroundComplete?.(
-          context.toolCallId,
-          "visualDesignExpert",
-          bgResult.text,
-          bgResult.messages
-        );
-      } : void 0
-    });
+      context
+    );
     context.subAgentMessages?.set(context.toolCallId, result.messages);
     return result.text;
   }
 };
+async function runDesignExpertRender(opts, context) {
+  return runDesignExpert({ ...opts, enableWrite: true }, context);
+}
 
 // src/subagents/productVision/tools.ts
 var VISION_TOOLS = [
@@ -5293,16 +5335,25 @@ ${unifiedDiff(filePath, oldContent, "")}`;
       const filePath = resolve("pitch.html");
       try {
         fs19.mkdirSync(ROADMAP_DIR, { recursive: true });
-        const existing = fs19.existsSync(filePath) ? fs19.readFileSync(filePath, "utf-8").trim() : "";
-        const currentDeck = existing || PITCH_DECK_SHELL;
+        const exists = fs19.existsSync(filePath);
+        const before = exists ? fs19.statSync(filePath).mtimeMs : null;
+        const delivery = exists ? `### Your deliverable
+The pitch deck already exists at \`${filePath}\`. Read it, then update it for the new <pitch_content>, keeping the presentation scaffolding intact \u2014 change only what needs to change.
+
+Reply with a one-line summary of what you changed \u2014 not the HTML.` : `### Your deliverable
+Write the complete pitch deck to \`${filePath}\`. It does not exist yet \u2014 start from this scaffold, keeping its progress bar, chevron navigation, keyboard navigation, and transition mechanics intact:
+
+<pitch_deck_shell>
+${PITCH_DECK_SHELL}
+</pitch_deck_shell>
+
+Reply with a one-line summary of what you wrote \u2014 not the HTML.`;
         const task = `
 <pitch_content>${input.task}</pitch_content>
 
-<current_deck>${currentDeck}</current_deck>
-
 We are building the pitch deck for the app. Using the provided <pitch_content>, as well as the app's spec data, think about what would make a compelling, interactive, self-contained horizontally-scrolling HTML slide deck for this product. Keep it simple, clean, powerful. Giant text, large logo, big, bold stats and claims. Edit the content as necessary to create the most impactful, bold, and beautiful slides. This should not feel like an essay, and it should not feel like a landing page \u2014 it should feel like a modern interactive presentation that leaves the user wowed by the product and excited about its future.
 
-Use <current_deck> as your starting point and replace or update the content as needed, maintaining the bones of the presentation scaffolding. Always keep the progress bar, chevron navigation, and keyboard navigation - they are part of the scaffold.
+Maintain the bones of the presentation scaffolding. Always keep the progress bar, chevron navigation, and keyboard navigation - they are part of the scaffold.
 
 ### Rules
 - The deck must be a single HTML file \u2014 it will be rendered in an iframe.
@@ -5312,14 +5363,18 @@ Use <current_deck> as your starting point and replace or update the content as n
 - Code must be clean, bug free, and easy to parse. Use GSAP for animations. Pay close attention to layout and alignment to make sure everything is perfect.
 - Keep the progress bar and edge chevrons from the shell \u2014 they are part of the navigation UX.
 
-Respond only with the complete HTML file and absolutely no other text. Your response will be written directly to an html file.`;
-        const result = await designExpertTool.execute({ task }, context);
-        const htmlMatch = result.match(
-          /```(?:html|wireframe)\n([\s\S]*?)```/
-        );
-        const html = htmlMatch ? htmlMatch[1].trim() : result;
-        fs19.writeFileSync(filePath, html, "utf-8");
-        return `Pitch deck written successfully.`;
+${delivery}`;
+        const result = await runDesignExpertRender({ task }, context);
+        context.subAgentMessages?.set(context.toolCallId, result.messages);
+        if (!fs19.existsSync(filePath)) {
+          return `Error: the design expert did not write ${filePath}. Its reply was:
+${result.text}`;
+        }
+        if (before !== null && fs19.statSync(filePath).mtimeMs === before) {
+          return `Error: the pitch deck at ${filePath} was not modified. The design expert's reply was:
+${result.text}`;
+        }
+        return `Pitch deck written to ${filePath}. ${result.text}`;
       } catch (err) {
         return `Error generating pitch deck: ${err.message}`;
       }
@@ -5553,7 +5608,7 @@ import fs20 from "fs";
 var OVERVIEW_FILE = "src/overview.html";
 var DESIGN_BRIEF = `We are building the Build Overview for this app \u2014 the home page of its Spec tab. It is a calm, dense, one-page reference of everything the app actually contains, including the parts the user can't see. It renders flush inside the Spec tab's content panel (the IDE supplies the surrounding nav).
 
-Take the plain-language copy in <overview_copy> and lay it out and skin it into a single, beautiful, self-contained HTML document in the app's own brand. If <current_overview> is non-empty, use it as your starting point and preserve its established skin, updating only what the copy changed.
+Take the plain-language copy in <overview_copy> and lay it out and skin it into a single, beautiful, self-contained HTML document in the app's own brand.
 
 ### The single hard rule
 The copy in <overview_copy> is final \u2014 it was authored and edited before it reached you. Treat it as locked content to typeset, not a draft to improve. Reproduce the words exactly: do not rewrite, rephrase, shorten, expand, reorder, or "polish" them, and do not run them through any copy tool. This is the opposite of your usual role \u2014 here you own layout, typography, and visual design only, and the words (every number, name, label, claim, and sentence) are fixed. A single changed word or wrong number breaks this document's purpose.
@@ -5568,9 +5623,7 @@ The copy in <overview_copy> is final \u2014 it was authored and edited before it
 
 ### Constraints
 - A single self-contained HTML file. Fonts may load from a CDN; everything else (CSS, the logo SVG) is inline.
-- Responsive: fills the embedded panel width and collapses gracefully at narrow widths.
-
-Respond only with the complete HTML file and absolutely no other text. Your response will be written directly to src/overview.html.`;
+- Responsive: fills the embedded panel width and collapses gracefully at narrow widths.`;
 var OVERVIEW_SHELL = `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -5591,6 +5644,22 @@ var OVERVIEW_SHELL = `<!DOCTYPE html>
      app's spec. -->
 </body>
 </html>`;
+function initialDelivery() {
+  return `### Your deliverable
+Write the complete Build Overview to \`${OVERVIEW_FILE}\`. The file does not exist yet \u2014 start from this scaffold, which carries the technical hygiene for the iframed render context (keep the viewport meta and the reset). Layout, sections, type, and styling are yours to compose.
+
+<overview_shell>
+${OVERVIEW_SHELL}
+</overview_shell>
+
+Reply with a one-line summary of what you wrote \u2014 not the HTML.`;
+}
+function refreshDelivery() {
+  return `### Your deliverable
+The Build Overview already exists at \`${OVERVIEW_FILE}\`. Read it, then update it to reflect <overview_copy>, preserving its established skin \u2014 change only what the copy changed.
+
+Reply with a one-line summary of what you changed \u2014 not the HTML.`;
+}
 var buildOverviewTool = {
   clearable: false,
   definition: {
@@ -5615,21 +5684,29 @@ var buildOverviewTool = {
     if (!content) {
       return "Error: writeBuildOverview requires non-empty `content` (the overview copy).";
     }
-    try {
-      const existing = fs20.existsSync(OVERVIEW_FILE) ? fs20.readFileSync(OVERVIEW_FILE, "utf-8").trim() : "";
-      const currentOverview = existing || OVERVIEW_SHELL;
-      const task = `<overview_copy>${content}</overview_copy>
+    const exists = fs20.existsSync(OVERVIEW_FILE);
+    const task = `<overview_copy>${content}</overview_copy>
 
-<current_overview>${currentOverview}</current_overview>
+${DESIGN_BRIEF}
 
-${DESIGN_BRIEF}`;
-      const result = await designExpertTool.execute({ task }, context);
-      const htmlMatch = result.match(
-        /```(?:html|wireframe)\n([\s\S]*?)```/
-      );
-      const html = htmlMatch ? htmlMatch[1].trim() : result;
-      fs20.writeFileSync(OVERVIEW_FILE, html, "utf-8");
-      return "Build overview written successfully to src/overview.html.";
+${exists ? refreshDelivery() : initialDelivery()}`;
+    try {
+      if (exists) {
+        input.background = true;
+        const result2 = await runDesignExpertRender(
+          { task, background: true, reportingName: "writeBuildOverview" },
+          context
+        );
+        context.subAgentMessages?.set(context.toolCallId, result2.messages);
+        return result2.text;
+      }
+      const result = await runDesignExpertRender({ task }, context);
+      context.subAgentMessages?.set(context.toolCallId, result.messages);
+      if (!fs20.existsSync(OVERVIEW_FILE)) {
+        return `Error: the design expert did not write ${OVERVIEW_FILE}. Its reply was:
+${result.text}`;
+      }
+      return `Build overview written to ${OVERVIEW_FILE}. ${result.text}`;
     } catch (err) {
       return `Error generating build overview: ${err.message}`;
     }
@@ -6351,21 +6428,6 @@ function triggerBrandExtraction(apiConfig, model) {
 // src/session.ts
 import fs22 from "fs";
 import path11 from "path";
-
-// src/toolResultCap.ts
-var MAX_TOOL_RESULT_BYTES = 256 * 1024;
-function capToolResult(result) {
-  const total = Buffer.byteLength(result, "utf-8");
-  if (total <= MAX_TOOL_RESULT_BYTES) {
-    return result;
-  }
-  const head = Buffer.from(result, "utf-8").subarray(0, MAX_TOOL_RESULT_BYTES).toString("utf-8");
-  return head + `
-
-(tool result truncated at ${(MAX_TOOL_RESULT_BYTES / 1024).toFixed(0)}KB of ${(total / 1024).toFixed(0)}KB \u2014 too large to keep in context. Narrow the call (select fewer fields, paginate, or query a subset) instead of fetching everything.)`;
-}
-
-// src/session.ts
 var log12 = createLogger("session");
 var SESSION_FILE = ".remy-session.json";
 var ARCHIVE_DIR = ".logs/sessions";

package/dist/index.js

@@ -3513,6 +3513,25 @@ ${partial}` : "[INTERRUPTED] Tool execution was stopped.";
   }
 });
 
+// src/toolResultCap.ts
+function capToolResult(result) {
+  const total = Buffer.byteLength(result, "utf-8");
+  if (total <= MAX_TOOL_RESULT_BYTES) {
+    return result;
+  }
+  const head = Buffer.from(result, "utf-8").subarray(0, MAX_TOOL_RESULT_BYTES).toString("utf-8");
+  return head + `
+
+(tool result truncated at ${(MAX_TOOL_RESULT_BYTES / 1024).toFixed(0)}KB of ${(total / 1024).toFixed(0)}KB \u2014 too large to keep in context. Narrow the call (select fewer fields, paginate, or query a subset) instead of fetching everything.)`;
+}
+var MAX_TOOL_RESULT_BYTES;
+var init_toolResultCap = __esm({
+  "src/toolResultCap.ts"() {
+    "use strict";
+    MAX_TOOL_RESULT_BYTES = 256 * 1024;
+  }
+});
+
 // src/statusWatcher.ts
 function startStatusWatcher(config) {
   const { apiConfig, getContext, onStatus, interval = 5e3, signal } = config;
@@ -4053,7 +4072,7 @@ ${partial}` : "[INTERRUPTED] Agent was interrupted before producing output.",
                   subAgentMessages
                 );
               }
-              safeSettle(result, result.startsWith("Error"));
+              safeSettle(capToolResult(result), result.startsWith("Error"));
             } catch (err) {
               safeSettle(`Error: ${err.message}`, true);
             }
@@ -4189,6 +4208,7 @@ var init_runner = __esm({
     init_logger();
     init_usageLedger();
     init_toolRegistry();
+    init_toolResultCap();
     init_statusWatcher();
     init_cleanMessages();
     log7 = createLogger("sub-agent");
@@ -4258,9 +4278,10 @@ var init_tools = __esm({
                       "evaluate",
                       "styles",
                       "screenshotFullPage",
-                      "screenshotViewport"
+                      "screenshotViewport",
+                      "setViewport"
                     ],
-                    description: "snapshot: accessibility tree of the page (waits for network to settle). click: click an element (animated cursor, full event sequence). type: type text into input (one char at a time, works with React/Vue/Svelte). select: select a dropdown option by text. wait: wait for an element to appear (polls 100ms, waits for network). navigate: navigate to a URL within the app (waits for load, subsequent steps run on new page). evaluate: run JS in the page. styles: read computed CSS styles from elements (pass properties array with camelCase names, or omit for defaults). screenshotFullPage: full-page viewport-stitched screenshot (returns CDN url with dimensions). screenshotViewport: screenshot of just the visible viewport \u2014 pass `scrollToSelector` (or `scrollY`) on this step to scroll a section into view and capture it in one atomic step (no separate scroll needed)."
+                    description: 'snapshot: accessibility tree of the page (waits for network to settle). click: click an element (animated cursor, full event sequence). type: type text into input (one char at a time, works with React/Vue/Svelte). select: select a dropdown option by text. wait: wait for an element to appear (polls 100ms, waits for network). navigate: navigate to a URL within the app (waits for load, subsequent steps run on new page). evaluate: run JS in the page. styles: read computed CSS styles from elements (pass properties array with camelCase names, or omit for defaults). screenshotFullPage: full-page viewport-stitched screenshot (returns CDN url with dimensions). screenshotViewport: screenshot of just the visible viewport \u2014 pass `scrollToSelector` (or `scrollY`) on this step to scroll a section into view and capture it in one atomic step (no separate scroll needed). setViewport: switch the browser between desktop and mobile rendering (pass `mode`: "desktop" or "mobile"). Reloads the page so responsive layouts, media queries, and matchMedia re-evaluate \u2014 use it to QA mobile/responsive views.'
                   },
                   ref: {
                     type: "string",
@@ -4314,6 +4335,11 @@ var init_tools = __esm({
                   scrollY: {
                     type: "number",
                     description: "For screenshotViewport: absolute Y offset to scroll to before the shot, when no selector is available."
+                  },
+                  mode: {
+                    type: "string",
+                    enum: ["desktop", "mobile"],
+                    description: 'For setViewport: the rendering mode to switch to. "mobile" emulates a phone (narrow width, touch, device pixel ratio); "desktop" is the standard wide viewport.'
                   }
                 },
                 required: ["command"]
@@ -4371,6 +4397,14 @@ var init_prompt2 = __esm({
 async function runBrowserAutomation(task, context, opts) {
   const release = await acquireBrowserLock();
   try {
+    try {
+      await sidecarRequest(
+        "/set-viewport",
+        { mode: "default" },
+        { timeout: 2e4 }
+      );
+    } catch {
+    }
     let lastBrowserCommandViewport;
     const result = await runSubAgent({
       system: getBrowserAutomationPrompt(),
@@ -5988,7 +6022,48 @@ var init_history = __esm({
 });
 
 // src/subagents/designExpert/index.ts
-var DESCRIPTION, designExpertTool;
+async function runDesignExpert(opts, context) {
+  const history = context.conversationMessages ? getSubAgentHistory(context.conversationMessages, "visualDesignExpert") : [];
+  return runSubAgent({
+    system: getDesignExpertPrompt(context.onboardingState),
+    task: opts.task,
+    history: history.length > 0 ? history : void 0,
+    tools: opts.enableWrite ? DESIGN_EXPERT_RENDER_TOOLS : DESIGN_EXPERT_TOOLS,
+    externalTools: /* @__PURE__ */ new Set(),
+    executeTool: (name, input, toolCallId, onLog, sams) => {
+      const childCtx = toolCallId ? { ...deriveContext(context, toolCallId), subAgentMessages: sams } : { ...context, subAgentMessages: sams };
+      if (COMMON_READ_TOOL_NAMES.has(name)) {
+        return executeTool(name, input, childCtx);
+      }
+      if (opts.enableWrite && RENDER_WRITE_TOOL_NAMES.has(name)) {
+        return executeTool(name, input, childCtx);
+      }
+      return executeDesignExpertTool(name, input, childCtx, toolCallId, onLog);
+    },
+    apiConfig: context.apiConfig,
+    model: resolveModel("visualDesignExpert", context.models, context.model),
+    subAgentId: "visualDesignExpert",
+    signal: context.signal,
+    parentToolId: context.toolCallId,
+    requestId: context.requestId,
+    onEvent: context.onEvent,
+    resolveExternalTool: context.resolveExternalTool,
+    toolRegistry: context.toolRegistry,
+    background: opts.background,
+    onBackgroundComplete: opts.background ? (bgResult) => {
+      context.onBackgroundComplete?.(
+        context.toolCallId,
+        opts.reportingName ?? "visualDesignExpert",
+        bgResult.text,
+        bgResult.messages
+      );
+    } : void 0
+  });
+}
+async function runDesignExpertRender(opts, context) {
+  return runDesignExpert({ ...opts, enableWrite: true }, context);
+}
+var DESCRIPTION, RENDER_WRITE_TOOL_NAMES, DESIGN_EXPERT_RENDER_TOOLS, designExpertTool;
 var init_designExpert = __esm({
   "src/subagents/designExpert/index.ts"() {
     "use strict";
@@ -5999,9 +6074,17 @@ var init_designExpert = __esm({
     init_prompt3();
     init_history();
     init_surfaces();
+    init_writeFile();
+    init_editFile();
     DESCRIPTION = `
 Visual design expert. Describe the situation and what you need \u2014 the agent decides what to deliver. It reads the spec files automatically. Include relevant user requirements and context it can't get from the spec, but do not list specific deliverables or tell it how to do its job. Do not suggest implementation details or ideas - only relay what is needed.
 `.trim();
+    RENDER_WRITE_TOOL_NAMES = /* @__PURE__ */ new Set(["writeFile", "editFile"]);
+    DESIGN_EXPERT_RENDER_TOOLS = [
+      ...DESIGN_EXPERT_TOOLS,
+      writeFileTool.definition,
+      editFileTool.definition
+    ];
     designExpertTool = {
       clearable: false,
       definition: {
@@ -6026,45 +6109,13 @@ Visual design expert. Describe the situation and what you need \u2014 the agent
         if (!context) {
           return "Error: visual design expert requires execution context";
         }
-        const history = context.conversationMessages ? getSubAgentHistory(context.conversationMessages, "visualDesignExpert") : [];
-        const result = await runSubAgent({
-          system: getDesignExpertPrompt(context.onboardingState),
-          task: input.task,
-          history: history.length > 0 ? history : void 0,
-          tools: DESIGN_EXPERT_TOOLS,
-          externalTools: /* @__PURE__ */ new Set(),
-          executeTool: (name, input2, toolCallId, onLog, sams) => {
-            const childCtx = toolCallId ? { ...deriveContext(context, toolCallId), subAgentMessages: sams } : { ...context, subAgentMessages: sams };
-            if (COMMON_READ_TOOL_NAMES.has(name)) {
-              return executeTool(name, input2, childCtx);
-            }
-            return executeDesignExpertTool(
-              name,
-              input2,
-              childCtx,
-              toolCallId,
-              onLog
-            );
+        const result = await runDesignExpert(
+          {
+            task: input.task,
+            background: input.background
           },
-          apiConfig: context.apiConfig,
-          model: resolveModel("visualDesignExpert", context.models, context.model),
-          subAgentId: "visualDesignExpert",
-          signal: context.signal,
-          parentToolId: context.toolCallId,
-          requestId: context.requestId,
-          onEvent: context.onEvent,
-          resolveExternalTool: context.resolveExternalTool,
-          toolRegistry: context.toolRegistry,
-          background: input.background,
-          onBackgroundComplete: input.background ? (bgResult) => {
-            context.onBackgroundComplete?.(
-              context.toolCallId,
-              "visualDesignExpert",
-              bgResult.text,
-              bgResult.messages
-            );
-          } : void 0
-        });
+          context
+        );
         context.subAgentMessages?.set(context.toolCallId, result.messages);
         return result.text;
       }
@@ -6177,16 +6228,25 @@ ${unifiedDiff(filePath, oldContent, "")}`;
       const filePath = resolve("pitch.html");
       try {
         fs18.mkdirSync(ROADMAP_DIR, { recursive: true });
-        const existing = fs18.existsSync(filePath) ? fs18.readFileSync(filePath, "utf-8").trim() : "";
-        const currentDeck = existing || PITCH_DECK_SHELL;
+        const exists = fs18.existsSync(filePath);
+        const before = exists ? fs18.statSync(filePath).mtimeMs : null;
+        const delivery = exists ? `### Your deliverable
+The pitch deck already exists at \`${filePath}\`. Read it, then update it for the new <pitch_content>, keeping the presentation scaffolding intact \u2014 change only what needs to change.
+
+Reply with a one-line summary of what you changed \u2014 not the HTML.` : `### Your deliverable
+Write the complete pitch deck to \`${filePath}\`. It does not exist yet \u2014 start from this scaffold, keeping its progress bar, chevron navigation, keyboard navigation, and transition mechanics intact:
+
+<pitch_deck_shell>
+${PITCH_DECK_SHELL}
+</pitch_deck_shell>
+
+Reply with a one-line summary of what you wrote \u2014 not the HTML.`;
         const task = `
 <pitch_content>${input.task}</pitch_content>
 
-<current_deck>${currentDeck}</current_deck>
-
 We are building the pitch deck for the app. Using the provided <pitch_content>, as well as the app's spec data, think about what would make a compelling, interactive, self-contained horizontally-scrolling HTML slide deck for this product. Keep it simple, clean, powerful. Giant text, large logo, big, bold stats and claims. Edit the content as necessary to create the most impactful, bold, and beautiful slides. This should not feel like an essay, and it should not feel like a landing page \u2014 it should feel like a modern interactive presentation that leaves the user wowed by the product and excited about its future.
 
-Use <current_deck> as your starting point and replace or update the content as needed, maintaining the bones of the presentation scaffolding. Always keep the progress bar, chevron navigation, and keyboard navigation - they are part of the scaffold.
+Maintain the bones of the presentation scaffolding. Always keep the progress bar, chevron navigation, and keyboard navigation - they are part of the scaffold.
 
 ### Rules
 - The deck must be a single HTML file \u2014 it will be rendered in an iframe.
@@ -6196,14 +6256,18 @@ Use <current_deck> as your starting point and replace or update the content as n
 - Code must be clean, bug free, and easy to parse. Use GSAP for animations. Pay close attention to layout and alignment to make sure everything is perfect.
 - Keep the progress bar and edge chevrons from the shell \u2014 they are part of the navigation UX.
 
-Respond only with the complete HTML file and absolutely no other text. Your response will be written directly to an html file.`;
-        const result = await designExpertTool.execute({ task }, context);
-        const htmlMatch = result.match(
-          /```(?:html|wireframe)\n([\s\S]*?)```/
-        );
-        const html = htmlMatch ? htmlMatch[1].trim() : result;
-        fs18.writeFileSync(filePath, html, "utf-8");
-        return `Pitch deck written successfully.`;
+${delivery}`;
+        const result = await runDesignExpertRender({ task }, context);
+        context.subAgentMessages?.set(context.toolCallId, result.messages);
+        if (!fs18.existsSync(filePath)) {
+          return `Error: the design expert did not write ${filePath}. Its reply was:
+${result.text}`;
+        }
+        if (before !== null && fs18.statSync(filePath).mtimeMs === before) {
+          return `Error: the pitch deck at ${filePath} was not modified. The design expert's reply was:
+${result.text}`;
+        }
+        return `Pitch deck written to ${filePath}. ${result.text}`;
       } catch (err) {
         return `Error generating pitch deck: ${err.message}`;
       }
@@ -6498,6 +6562,22 @@ var init_scrapeWebUrl2 = __esm({
 
 // src/tools/spec/writeBuildOverview.ts
 import fs19 from "fs";
+function initialDelivery() {
+  return `### Your deliverable
+Write the complete Build Overview to \`${OVERVIEW_FILE}\`. The file does not exist yet \u2014 start from this scaffold, which carries the technical hygiene for the iframed render context (keep the viewport meta and the reset). Layout, sections, type, and styling are yours to compose.
+
+<overview_shell>
+${OVERVIEW_SHELL}
+</overview_shell>
+
+Reply with a one-line summary of what you wrote \u2014 not the HTML.`;
+}
+function refreshDelivery() {
+  return `### Your deliverable
+The Build Overview already exists at \`${OVERVIEW_FILE}\`. Read it, then update it to reflect <overview_copy>, preserving its established skin \u2014 change only what the copy changed.
+
+Reply with a one-line summary of what you changed \u2014 not the HTML.`;
+}
 var OVERVIEW_FILE, DESIGN_BRIEF, OVERVIEW_SHELL, buildOverviewTool;
 var init_writeBuildOverview = __esm({
   "src/tools/spec/writeBuildOverview.ts"() {
@@ -6506,7 +6586,7 @@ var init_writeBuildOverview = __esm({
     OVERVIEW_FILE = "src/overview.html";
     DESIGN_BRIEF = `We are building the Build Overview for this app \u2014 the home page of its Spec tab. It is a calm, dense, one-page reference of everything the app actually contains, including the parts the user can't see. It renders flush inside the Spec tab's content panel (the IDE supplies the surrounding nav).
 
-Take the plain-language copy in <overview_copy> and lay it out and skin it into a single, beautiful, self-contained HTML document in the app's own brand. If <current_overview> is non-empty, use it as your starting point and preserve its established skin, updating only what the copy changed.
+Take the plain-language copy in <overview_copy> and lay it out and skin it into a single, beautiful, self-contained HTML document in the app's own brand.
 
 ### The single hard rule
 The copy in <overview_copy> is final \u2014 it was authored and edited before it reached you. Treat it as locked content to typeset, not a draft to improve. Reproduce the words exactly: do not rewrite, rephrase, shorten, expand, reorder, or "polish" them, and do not run them through any copy tool. This is the opposite of your usual role \u2014 here you own layout, typography, and visual design only, and the words (every number, name, label, claim, and sentence) are fixed. A single changed word or wrong number breaks this document's purpose.
@@ -6521,9 +6601,7 @@ The copy in <overview_copy> is final \u2014 it was authored and edited before it
 
 ### Constraints
 - A single self-contained HTML file. Fonts may load from a CDN; everything else (CSS, the logo SVG) is inline.
-- Responsive: fills the embedded panel width and collapses gracefully at narrow widths.
-
-Respond only with the complete HTML file and absolutely no other text. Your response will be written directly to src/overview.html.`;
+- Responsive: fills the embedded panel width and collapses gracefully at narrow widths.`;
     OVERVIEW_SHELL = `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -6568,21 +6646,29 @@ Respond only with the complete HTML file and absolutely no other text. Your resp
         if (!content) {
           return "Error: writeBuildOverview requires non-empty `content` (the overview copy).";
         }
-        try {
-          const existing = fs19.existsSync(OVERVIEW_FILE) ? fs19.readFileSync(OVERVIEW_FILE, "utf-8").trim() : "";
-          const currentOverview = existing || OVERVIEW_SHELL;
-          const task = `<overview_copy>${content}</overview_copy>
+        const exists = fs19.existsSync(OVERVIEW_FILE);
+        const task = `<overview_copy>${content}</overview_copy>
 
-<current_overview>${currentOverview}</current_overview>
+${DESIGN_BRIEF}
 
-${DESIGN_BRIEF}`;
-          const result = await designExpertTool.execute({ task }, context);
-          const htmlMatch = result.match(
-            /```(?:html|wireframe)\n([\s\S]*?)```/
-          );
-          const html = htmlMatch ? htmlMatch[1].trim() : result;
-          fs19.writeFileSync(OVERVIEW_FILE, html, "utf-8");
-          return "Build overview written successfully to src/overview.html.";
+${exists ? refreshDelivery() : initialDelivery()}`;
+        try {
+          if (exists) {
+            input.background = true;
+            const result2 = await runDesignExpertRender(
+              { task, background: true, reportingName: "writeBuildOverview" },
+              context
+            );
+            context.subAgentMessages?.set(context.toolCallId, result2.messages);
+            return result2.text;
+          }
+          const result = await runDesignExpertRender({ task }, context);
+          context.subAgentMessages?.set(context.toolCallId, result.messages);
+          if (!fs19.existsSync(OVERVIEW_FILE)) {
+            return `Error: the design expert did not write ${OVERVIEW_FILE}. Its reply was:
+${result.text}`;
+          }
+          return `Build overview written to ${OVERVIEW_FILE}. ${result.text}`;
         } catch (err) {
           return `Error generating build overview: ${err.message}`;
         }
@@ -6703,25 +6789,6 @@ var init_tools7 = __esm({
   }
 });
 
-// src/toolResultCap.ts
-function capToolResult(result) {
-  const total = Buffer.byteLength(result, "utf-8");
-  if (total <= MAX_TOOL_RESULT_BYTES) {
-    return result;
-  }
-  const head = Buffer.from(result, "utf-8").subarray(0, MAX_TOOL_RESULT_BYTES).toString("utf-8");
-  return head + `
-
-(tool result truncated at ${(MAX_TOOL_RESULT_BYTES / 1024).toFixed(0)}KB of ${(total / 1024).toFixed(0)}KB \u2014 too large to keep in context. Narrow the call (select fewer fields, paginate, or query a subset) instead of fetching everything.)`;
-}
-var MAX_TOOL_RESULT_BYTES;
-var init_toolResultCap = __esm({
-  "src/toolResultCap.ts"() {
-    "use strict";
-    MAX_TOOL_RESULT_BYTES = 256 * 1024;
-  }
-});
-
 // src/session.ts
 import fs20 from "fs";
 import path9 from "path";

package/dist/subagents/browserAutomation/prompt.md

@@ -44,6 +44,7 @@ Note: the snapshot concatenates inline text and strips whitespace. If you need t
 - `evaluate`: Run arbitrary JavaScript in the page and return the result.
 - `styles`: Read computed CSS styles from page elements. Pass a `properties` array with camelCase CSS property names (e.g., `["backgroundColor", "borderRadius", "fontSize"]`). Omit `properties` for a default set covering colors, typography, spacing, borders, shadows, dimensions, and layout. Uses the same targeting as click/type (ref, text, role, label, selector). Omit the target to get styles for all elements from the last snapshot.
 - `screenshotViewport`: Take a screenshot of the visible viewport. Returns CDN url with full text analysis and dimensions. To capture a specific section, set `scrollToSelector` (a CSS selector) — or `scrollY` (an absolute offset) — on this same step; it scrolls the target into view and captures it atomically, so you do NOT need a separate scroll step. Do not use if you can get what you need with other tools - only use when you need to visually see the viewport.
+- `setViewport`: Switch the browser between desktop and mobile rendering. Set `mode` to `"desktop"` or `"mobile"`. Mobile emulates a phone (390-wide, touch, device pixel ratio 2); desktop is the standard wide viewport. This reloads the page so media queries, responsive layouts, and `matchMedia` re-evaluate — the reload clears in-page state, so switch before you set up the state you want to inspect. The mode persists across navigations within a run. Each run starts in the app's default mode, so only use this when you need to check the other one.
 
 ### Element targeting (tried in order)
 
@@ -118,6 +119,16 @@ Capture a specific below-the-fold section (scroll + capture in one atomic step):
 }
 ```
 
+Check the mobile layout of a page:
+```json
+{
+  "steps": [
+    { "command": "setViewport", "mode": "mobile" },
+    { "command": "screenshotViewport" }
+  ]
+}
+```
+
 Navigate to a sub-page and interact with it:
 ```json
 {

package/package.json

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