@mindstudio-ai/remy 0.1.135 → 0.1.137

package/dist/automatedActions/debugRequest.md

@@ -0,0 +1,9 @@
+---
+trigger: debugRequest
+---
+
+This is an automated message triggered by the user having clicked "Debug" in the "Request" log detail in MindStudio UI. Find the request in .logs/requests.ndjson by its ID. If there is an error, fix it immediately - otherwise, explain the request at a high-level in non-technical/natural language and see what the user wishes to do with it. Remember, the user can't see this message, so keep that in mind when responding.
+
+<request_id>
+{{requestId}}
+</request_id>

package/dist/headless.js

@@ -165,7 +165,12 @@ async function sidecarRequest(endpoint, body = {}, options) {
       log2.error("Sidecar error", { endpoint, status: res.status });
       throw new Error(`Sidecar error: ${res.status}`);
     }
-    return res.json();
+    const data = await res.json();
+    if (data?.success === false) {
+      const code = data.errorCode ? ` [${data.errorCode}]` : "";
+      throw new Error(`${data.error || "Unknown error"}${code}`);
+    }
+    return data;
   } catch (err) {
     if (err.message.startsWith("Sidecar error")) {
       throw err;
@@ -2602,6 +2607,39 @@ async function captureAndAnalyzeScreenshot(promptOrOptions) {
   return JSON.stringify({ url, analysis, ...styleMap ? { styleMap } : {} });
 }
 
+// src/tools/_helpers/browserLock.ts
+var lockQueue = Promise.resolve();
+function acquireBrowserLock() {
+  let release;
+  const next = new Promise((res) => {
+    release = res;
+  });
+  const wait = lockQueue;
+  lockQueue = next;
+  return wait.then(() => release);
+}
+async function checkBrowserConnected() {
+  try {
+    const status = await sidecarRequest(
+      "/browser-status",
+      {},
+      { timeout: 5e3 }
+    );
+    if (!status.connected) {
+      return {
+        connected: false,
+        error: "The browser preview is not connected. The user needs to open the preview."
+      };
+    }
+    return { connected: true };
+  } catch (err) {
+    return {
+      connected: false,
+      error: err?.message || "Could not check browser status. The dev environment may not be running."
+    };
+  }
+}
+
 // src/statusWatcher.ts
 function startStatusWatcher(config) {
   const { apiConfig, getContext, onStatus, interval = 3e3, signal } = config;
@@ -3303,16 +3341,6 @@ ${appSpec}
 
 // src/subagents/browserAutomation/index.ts
 var log6 = createLogger("browser-automation");
-var lockQueue = Promise.resolve();
-function acquireBrowserLock() {
-  let release;
-  const next = new Promise((res) => {
-    release = res;
-  });
-  const wait = lockQueue;
-  lockQueue = next;
-  return wait.then(() => release);
-}
 var browserAutomationTool = {
   clearable: true,
   definition: {
@@ -3335,17 +3363,9 @@ var browserAutomationTool = {
     }
     const release = await acquireBrowserLock();
     try {
-      try {
-        const status = await sidecarRequest(
-          "/browser-status",
-          {},
-          { timeout: 5e3 }
-        );
-        if (!status.connected) {
-          return "Error: the browser preview is not connected. The user needs to open the preview before browser tests can run.";
-        }
-      } catch {
-        return "Error: could not check browser status. The dev environment may not be running.";
+      const browserStatus = await checkBrowserConnected();
+      if (!browserStatus.connected) {
+        return `Error: ${browserStatus.error}`;
       }
       try {
         await sidecarRequest("/reset-browser", {}, { timeout: 5e3 });
@@ -3519,11 +3539,20 @@ var screenshotTool = {
           ...styleMap ? { styleMap } : {}
         });
       }
-      return await captureAndAnalyzeScreenshot({
-        prompt: input.prompt,
-        path: input.path,
-        onLog: context?.onLog
-      });
+      const release = await acquireBrowserLock();
+      try {
+        const browserStatus = await checkBrowserConnected();
+        if (!browserStatus.connected) {
+          return `Error: ${browserStatus.error}`;
+        }
+        return await captureAndAnalyzeScreenshot({
+          prompt: input.prompt,
+          path: input.path,
+          onLog: context?.onLog
+        });
+      } finally {
+        release();
+      }
     } catch (err) {
       return `Error taking screenshot: ${err.message}`;
     }
@@ -3849,7 +3878,12 @@ async function execute5(input, onLog, context) {
       return `Error taking interactive screenshot: ${err.message}`;
     }
   }
+  const release = await acquireBrowserLock();
   try {
+    const browserStatus = await checkBrowserConnected();
+    if (!browserStatus.connected) {
+      return `Error: ${browserStatus.error}`;
+    }
     return await captureAndAnalyzeScreenshot({
       prompt: input.prompt,
       path: input.path,
@@ -3857,6 +3891,8 @@ async function execute5(input, onLog, context) {
     });
   } catch (err) {
     return `Error taking screenshot: ${err.message}`;
+  } finally {
+    release();
   }
 }
 

package/dist/index.js

@@ -1986,7 +1986,12 @@ async function sidecarRequest(endpoint, body = {}, options) {
       log2.error("Sidecar error", { endpoint, status: res.status });
       throw new Error(`Sidecar error: ${res.status}`);
     }
-    return res.json();
+    const data = await res.json();
+    if (data?.success === false) {
+      const code = data.errorCode ? ` [${data.errorCode}]` : "";
+      throw new Error(`${data.error || "Unknown error"}${code}`);
+    }
+    return data;
   } catch (err) {
     if (err.message.startsWith("Sidecar error")) {
       throw err;
@@ -2306,6 +2311,46 @@ Respond only with your analysis as Markdown and absolutely no other text. Do not
   }
 });
 
+// src/tools/_helpers/browserLock.ts
+function acquireBrowserLock() {
+  let release;
+  const next = new Promise((res) => {
+    release = res;
+  });
+  const wait = lockQueue;
+  lockQueue = next;
+  return wait.then(() => release);
+}
+async function checkBrowserConnected() {
+  try {
+    const status = await sidecarRequest(
+      "/browser-status",
+      {},
+      { timeout: 5e3 }
+    );
+    if (!status.connected) {
+      return {
+        connected: false,
+        error: "The browser preview is not connected. The user needs to open the preview."
+      };
+    }
+    return { connected: true };
+  } catch (err) {
+    return {
+      connected: false,
+      error: err?.message || "Could not check browser status. The dev environment may not be running."
+    };
+  }
+}
+var lockQueue;
+var init_browserLock = __esm({
+  "src/tools/_helpers/browserLock.ts"() {
+    "use strict";
+    init_sidecar();
+    lockQueue = Promise.resolve();
+  }
+});
+
 // src/statusWatcher.ts
 function startStatusWatcher(config) {
   const { apiConfig, getContext, onStatus, interval = 3e3, signal } = config;
@@ -3082,16 +3127,7 @@ var init_prompt = __esm({
 });
 
 // src/subagents/browserAutomation/index.ts
-function acquireBrowserLock() {
-  let release;
-  const next = new Promise((res) => {
-    release = res;
-  });
-  const wait = lockQueue;
-  lockQueue = next;
-  return wait.then(() => release);
-}
-var log4, lockQueue, browserAutomationTool;
+var log4, browserAutomationTool;
 var init_browserAutomation = __esm({
   "src/subagents/browserAutomation/index.ts"() {
     "use strict";
@@ -3099,11 +3135,11 @@ var init_browserAutomation = __esm({
     init_tools();
     init_prompt();
     init_sidecar();
+    init_browserLock();
     init_screenshot();
     init_runCli();
     init_logger();
     log4 = createLogger("browser-automation");
-    lockQueue = Promise.resolve();
     browserAutomationTool = {
       clearable: true,
       definition: {
@@ -3126,17 +3162,9 @@ var init_browserAutomation = __esm({
         }
         const release = await acquireBrowserLock();
         try {
-          try {
-            const status = await sidecarRequest(
-              "/browser-status",
-              {},
-              { timeout: 5e3 }
-            );
-            if (!status.connected) {
-              return "Error: the browser preview is not connected. The user needs to open the preview before browser tests can run.";
-            }
-          } catch {
-            return "Error: could not check browser status. The dev environment may not be running.";
+          const browserStatus = await checkBrowserConnected();
+          if (!browserStatus.connected) {
+            return `Error: ${browserStatus.error}`;
           }
           try {
             await sidecarRequest("/reset-browser", {}, { timeout: 5e3 });
@@ -3250,6 +3278,7 @@ var init_screenshot2 = __esm({
   "src/tools/code/screenshot.ts"() {
     "use strict";
     init_screenshot();
+    init_browserLock();
     init_analyzeImage();
     init_browserAutomation();
     screenshotTool = {
@@ -3319,11 +3348,20 @@ var init_screenshot2 = __esm({
               ...styleMap ? { styleMap } : {}
             });
           }
-          return await captureAndAnalyzeScreenshot({
-            prompt: input.prompt,
-            path: input.path,
-            onLog: context?.onLog
-          });
+          const release = await acquireBrowserLock();
+          try {
+            const browserStatus = await checkBrowserConnected();
+            if (!browserStatus.connected) {
+              return `Error: ${browserStatus.error}`;
+            }
+            return await captureAndAnalyzeScreenshot({
+              prompt: input.prompt,
+              path: input.path,
+              onLog: context?.onLog
+            });
+          } finally {
+            release();
+          }
         } catch (err) {
           return `Error taking screenshot: ${err.message}`;
         }
@@ -3665,7 +3703,12 @@ async function execute5(input, onLog, context) {
       return `Error taking interactive screenshot: ${err.message}`;
     }
   }
+  const release = await acquireBrowserLock();
   try {
+    const browserStatus = await checkBrowserConnected();
+    if (!browserStatus.connected) {
+      return `Error: ${browserStatus.error}`;
+    }
     return await captureAndAnalyzeScreenshot({
       prompt: input.prompt,
       path: input.path,
@@ -3673,6 +3716,8 @@ async function execute5(input, onLog, context) {
     });
   } catch (err) {
     return `Error taking screenshot: ${err.message}`;
+  } finally {
+    release();
   }
 }
 var definition5;
@@ -3680,6 +3725,7 @@ var init_screenshot3 = __esm({
   "src/subagents/designExpert/tools/screenshot.ts"() {
     "use strict";
     init_screenshot();
+    init_browserLock();
     init_analyzeImage();
     init_browserAutomation();
     definition5 = {

package/dist/prompt/.notes.md

@@ -69,7 +69,7 @@ From research into v0, Lovable, Bolt, and Anthropic's `<frontend_aesthetics>` co
 
 ## SDK Usage
 
-The source docs originally showed `mindstudio.executeStep('generateText', ...)` which was wrong. The correct API is `new MindStudioAgent()` with direct method calls (`agent.generateText(...)`, `agent.sendEmail(...)`, etc.). No constructor args needed inside methods — credentials come from the execution environment. We fixed both the compiled fragment and the upstream source doc in youai-api.
+The canonical import pattern for MindStudio app methods is `import { mindstudio } from '@mindstudio-ai/agent'` with `mindstudio.generateText(...)`, `mindstudio.runTask(...)`, etc. The `mindstudio` singleton handles auth automatically. `new MindStudioAgent({ apiKey })` is only for external usage outside MindStudio apps.
 
 The SDK ships `llms.txt` at the package root with full signatures for all 170+ actions. The compiled fragment references this path (`dist/methods/node_modules/@mindstudio-ai/agent/llms.txt`) so the agent knows where to look up specific action details.
 

package/dist/prompt/compiled/auth.md

@@ -343,13 +343,16 @@ Roles are declared in the manifest, stored as an array column on the user table,
 
 Apps without `auth` in the manifest use anonymous guest sessions. No login, no user identity, no roles. This is the default and works fine for single-user apps, internal tools, and simple utilities.
 
-## Designing Auth in Web Interfaces
+## Important: Designing Auth in Web Interfaces
+
 The most imporant user experience consideration with auth is that authentication moments must feel natural and intuitive - they should not feel jarring or surprising. Take care to integrate them into the entire experience when building.
 
 For the overwhelming majority of apps, a user should never land on auth at the root of an app when opening it for the first time (except in cases where the app is, e.g., an internal tool or some other protected experience - and even then it should feel more like a welcome/splash screen than an error state). Users should be able to explore public resources, or at least encounter some kind of landing/introduction moment, before they get hit with a signup/login screen. Make auth feel like a natural moment in the user's journey.
 
 Login and signup screens set the tone for the user's entire experience with the app and are important to get right - they should feel like exciting entry points into the next level of the user journy. A janky login form with misaligned inputs and no feedback dminishes excitement and undermines trust before the user even gets in.
 
+Login and signup are separate moments - even if the underlying code is the same for both. A new user signing up should feel like they are creating a new account. A user logging in should feel like they are being welcomed back. Auth is always a pain for users, even when it's as frictionless as this, so take care to use Sign Up screens as moments to communicate value and help the user get excited about what they are joining.
+
 Consult the `visualDesignExpert` to help you work through authentication at a high level, including when and where to show auth, and the design of specific screens.
 
 ### Rules for Building Auth Screens

package/dist/prompt/compiled/design.md

@@ -25,7 +25,7 @@ Interfaces run fullscreen in the user's browser or a wrapped webview mobile app.
 - **No long scrolling pages.** Use structured layouts: cards, split panes, steppers, tabs, grouped sections that fit the viewport. The interface should feel like an award winning iOS or macOS app, not a document.
 - **On mobile**, scrolling may be necessary, but use sticky headers, fixed CTAs, and anchored navigation to keep key actions within reach. Always use "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" to make sure apps feel like apps.
 - Think of every screen as something the user opens, uses, and closes — not something they read.
-- Pay attention to details that will make things feel app-like - set user-select: none on specific app-like layout elements, use motion, use iOS/macOS design language and patterns.
+- Pay attention to details that will make things feel app-like - set user-select: none on specific app-like layout elements like navigation bars, use motion, use iOS/macOS design language and patterns.
 
 ## Layout Stability
 
@@ -50,6 +50,7 @@ Every interface must work on both desktop and mobile. Think about how the app wi
 - Even for mobile-first apps, make sure to set desktop or larger device breakpoints - nothing looks jankier than opening a mobile-designed site in a desktop browser and seeing a full width bottom tab bar with nav icons stretching 1000px wide. Don't make sloppy, amateur mistakes or omissions like this - the user will notice them and be disappointed.
 
 ## Images
+
 The `designExpert` can create and source amazing, high quality images, graphics, illustrations, and logos to use in the interface - both with and without transparency. This is a huge level for upgrading the premium look, feel, and quality of the app. Use image logos directly instead of plain text wordmarks; use images for empty states, onboarding screens, full-screen loading, and more.
 
 ## Forms

package/dist/prompt/compiled/methods.md

@@ -65,38 +65,36 @@ export async function getDashboard(input: {
 
 ## Platform Capabilities
 
-The `@mindstudio-ai/agent` SDK provides access to 200+ AI models and 1,000+ actions (email, SMS, web scraping, file uploads, third-party integrations, and more). Inside a method, create an instance and call actions directly. No constructor arguments needed — credentials are picked up automatically from the execution environment:
+The `@mindstudio-ai/agent` SDK provides access to 200+ AI models and 1,000+ actions (email, SMS, web scraping, file uploads, third-party integrations, and more). Inside a method, use the `mindstudio` singleton — credentials come from the execution environment automatically:
 
 ```typescript
-import { MindStudioAgent } from '@mindstudio-ai/agent';
-
-const agent = new MindStudioAgent();
+import { mindstudio } from '@mindstudio-ai/agent';
 
 // AI text generation
-const { content } = await agent.generateText({
+const { content } = await mindstudio.generateText({
   message: 'Summarize this invoice...',
 });
 
 // AI image generation
-const { imageUrl } = await agent.generateImage({
+const { imageUrl } = await mindstudio.generateImage({
   prompt: 'A professional headshot placeholder',
 });
 
 // Send email
-await agent.sendEmail({
+await mindstudio.sendEmail({
   to: 'user@example.com',
   subject: 'Your invoice',
   body: content,
 });
 
 // Upload files
-const { url } = await agent.uploadFile({
+const { url } = await mindstudio.uploadFile({
   data: buffer,
   fileName: 'report.pdf',
 });
 
 // Web scraping
-const { markdown } = await agent.scrapeUrl({
+const { markdown } = await mindstudio.scrapeUrl({
   url: 'https://example.com',
 });
 
@@ -126,7 +124,7 @@ For errors from external services or internal failures (API calls, AI generation
 
 ```typescript
 try {
-  const result = await agent.generateVideo({ ... });
+  const result = await mindstudio.generateVideo({ ... });
   return { videoUrl: result.url };
 } catch (err) {
   console.error('Video generation failed:', err);
@@ -210,7 +208,7 @@ export async function enrichRestaurant(input: { id: string; name: string }) {
   await Restaurants.update(input.id, { status: 'enriching' });
 
   // Fire — don't await
-  agent.runTask<RestaurantData>({
+  mindstudio.runTask<RestaurantData>({
     prompt: '...',
     input: { name: input.name },
     tools: ['searchGoogle', 'fetchUrl', 'generateImage'],

package/dist/prompt/compiled/msfm.md

@@ -192,13 +192,15 @@ styles:
 ```
 ```
 
-Roadmap item example (one file per feature in `src/roadmap/`):
+Roadmap item examples (one file per feature in `src/roadmap/`):
+
+Built item (status updated to `done` after build, with History appended):
 
 ```markdown
 ---
 name: Share & Export
 type: roadmap
-status: not-started
+status: done
 description: Share haikus as image cards to social media or download as prints.
 requires: []
 effort: medium
@@ -220,3 +222,20 @@ clipboard fallback for unsupported browsers.
 - **2026-03-22** — Built card generation using generateImage.
   Added share button to haiku detail view.
 ```
+
+Unbuilt item:
+
+```markdown
+---
+name: Daily Prompt Engine
+type: roadmap
+status: not-started
+description: A new writing prompt every day, tuned to the user's style and interests.
+requires: []
+effort: small
+---
+
+Generate a personalized daily writing prompt based on the user's past haikus,
+preferred themes, and seasonal context. Surface it as a gentle nudge on the
+home screen, not a notification.
+```

package/dist/prompt/compiled/sdk-actions.md

@@ -6,24 +6,18 @@ There is a huge amount of capability here: hundreds of text generation models (O
 
 ## Usage in Methods
 
-Inside a MindStudio app method, create an instance with no arguments — credentials come from the execution environment:
+Inside a MindStudio app method, use the `mindstudio` singleton — credentials come from the execution environment automatically:
 
 ```typescript
-import { MindStudioAgent } from '@mindstudio-ai/agent';
+import { mindstudio } from '@mindstudio-ai/agent';
 
-const agent = new MindStudioAgent();
-```
-
-Every action is a method on the agent instance:
-
-```typescript
-const { content } = await agent.generateText({ message: 'Summarize this...' });
+const { content } = await mindstudio.generateText({ message: 'Summarize this...' });
 ```
 
 Results are returned flat — output fields at the top level alongside metadata:
 
 ```typescript
-const result = await agent.generateText({ message: 'Hello' });
+const result = await mindstudio.generateText({ message: 'Hello' });
 result.content;              // step-specific output
 result.$billingCost;         // cost in credits (if applicable)
 ```
@@ -104,13 +98,13 @@ For other services, use `runFromConnectorRegistry`:
 
 ```typescript
 // Discover available connectors
-const { connectors } = await agent.listConnectors();
+const { connectors } = await mindstudio.listConnectors();
 
 // Get action details
-const action = await agent.getConnectorAction('hubspot', 'create-contact');
+const action = await mindstudio.getConnectorAction('hubspot', 'create-contact');
 
 // Execute
-const result = await agent.runFromConnectorRegistry({
+const result = await mindstudio.runFromConnectorRegistry({
   serviceId: 'hubspot',
   actionId: 'create-contact',
   input: { email: 'user@example.com', firstName: 'Alice' },
@@ -122,7 +116,7 @@ const result = await agent.runFromConnectorRegistry({
 Override the default model for any AI action. Each model has its own config options (dimensions, seed, inference steps, etc.) so always use `askMindStudioSdk` to look up the correct config before specifying a model override:
 
 ```typescript
-const { content } = await agent.generateText({
+const { content } = await mindstudio.generateText({
   message: 'Hello',
   modelOverride: {
     model: 'claude-sonnet-4-6',
@@ -139,7 +133,7 @@ Make sure to prioritize new, popular models. MindStudio has a ton of models avai
 Run up to 50 actions in parallel:
 
 ```typescript
-const result = await agent.executeStepBatch([
+const result = await mindstudio.executeStepBatch([
   { stepType: 'generateImage', step: { prompt: 'a sunset' } },
   { stepType: 'textToSpeech', step: { text: 'hello world' } },
 ]);

package/dist/prompt/compiled/task-agents.md

@@ -1,4 +1,4 @@
-# Task Agents (`MindStudioAgent runTask`)
+# Task Agents (`mindstudio.runTask`)
 
 A user types the name of a restaurant into your app, or uploads a photo of a storefront. The API call returns early, and in the background, a task agent searches Google, finds the official website, scrapes the address, gets the official social media accounts, and generates a stylized watercolor postcard of the exterior from images it found online. The user gets back a rich, illustrated card with the canonical name, website, address, and a custom image. A few tool calls (some in parallel), fully autonomous.
 
@@ -26,11 +26,9 @@ Run tasks in the background — depending on complexity they can take time to co
 ## Usage
 
 ```typescript
-import { MindStudioAgent } from '@mindstudio-ai/agent';
+import { mindstudio } from '@mindstudio-ai/agent';
 
-const agent = new MindStudioAgent();
-
-const result = await agent.runTask<{
+const result = await mindstudio.runTask<{
   name: string;
   url: string;
   address: string;
@@ -74,7 +72,7 @@ console.log(result.output.photoUrl); // URL to the generated illustration
 `runTask()` can return successfully with garbage output — fields null, data echoed back, or raw text instead of JSON. The result includes `parsedSuccessfully` to make this explicit. Always check it before using the output:
 
 ```typescript
-const result = await agent.runTask<MyType>({ ... });
+const result = await mindstudio.runTask<MyType>({ ... });
 
 if (!result.parsedSuccessfully) {
   console.error('Task output was not valid JSON:', result.outputRaw);
@@ -106,6 +104,10 @@ tools: [
 
 When the model calls a tool, the platform deep-merges the model's arguments with the developer's defaults. The model decides what to do (prompt, query, parameters), the developer controls which model/config to use. If the model needs to search and generate an image and those are independent, it will call both tools in the same turn (parallel execution server-side).
 
+## Voice & Tone in Prompts
+
+When a task agent produces user-facing text, the prompt must include a note voice and tone constraints. Make sure to specify no emojis, em dashes, and other "ai-isms" in the prompt, as well as the desired tone and voice of the output.
+
 ## Options
 
 | Field | Required | Default | Description |
@@ -150,7 +152,7 @@ When something goes wrong, `toolCalls` is the first thing to check. If it's empt
 Pass an `onEvent` callback to get real-time events:
 
 ```typescript
-const result = await agent.runTask({
+const result = await mindstudio.runTask({
   // ... same options ...
   onEvent: (event) => {
     if (event.type === 'text') console.log('Agent:', event.text);
@@ -173,7 +175,7 @@ Without `onEvent`, the SDK uses async polling (returns silently when complete).
 
 ```typescript
 try {
-  const result = await agent.runTask({ ... });
+  const result = await mindstudio.runTask({ ... });
   if (!result.parsedSuccessfully) {
     // Task completed but output wasn't valid JSON
     console.error('Raw output:', result.outputRaw);

package/dist/prompt/static/coding.md

@@ -45,6 +45,9 @@ For multi-step tasks with branching logic (research, enrichment, content pipelin
 - Use container queries for components that need to adapt to their container rather than the viewport.
 - For canvas-based UIs (games, visualizations, interactive graphics): size the canvas to fill its container, account for `devicePixelRatio` for Retina sharpness, and scale all objects relative to the viewport — not in fixed pixel sizes - otherwise they are going to be tiny and unusable.
 
+### Copy & Prose
+- Landing pages, hero sections, onboarding flows, and other long-form prose need a human voice. Write plainly and specifically. Avoid promotional filler, hollow intensifiers, and chatbot enthusiasm. Avoid em dashes, emojis, and other "ai-isms" in your writing.
+
 ### Error Visibility
 - Runtime errors must render visibly on screen, not produce a blank white page. User and agent must be able to visibly debug and spot them.
 
@@ -63,7 +66,7 @@ When integrating with external services that have programmable setup APIs (webho
 Before installing a package you haven't used in this project, do a quick web search to confirm it's still the best option. The JavaScript ecosystem moves fast — the package you remember from training may have been superseded by something smaller, faster, or better maintained. A 10-second search beats debugging a deprecated library.
 
 ### MindStudio SDK CLI
-You have access to the `mindstudio` CLI, which exposes every SDK action as a command-line tool. Use it via bash for one-off tasks: generating images, scraping URLs, sending emails, running AI completions, or anything else the SDK can do. Every JavaScript SDK method has a corresponding CLI command. Run `askMindStudioSdk` to discover commands for CLI usage.
+You have access to the `mindstudio` CLI, which exposes every SDK action as a command-line tool. Use it via bash for one-off tasks: generating images, video, or audio, scraping URLs, sending emails, running AI completions, or anything else the SDK can do. Every JavaScript SDK method has a corresponding CLI command. Run `askMindStudioSdk` to discover commands for CLI usage.
 
 ### Production App Management
 You have access to `mindstudio-prod`, a CLI for managing the user's production MindStudio app. Use it via your bash tool. All output is JSON. Run `mindstudio-prod --help` or `mindstudio-prod <command> --help` to discover usage and available options.

package/dist/prompt/static/team.md

@@ -32,9 +32,9 @@ Describe what you're building at the method level — the full workflow — and
 
 ### Architecture Expert (aka Code Sanity Check) (`codeSanityCheck`)
 
-A quick gut check. Describe what you're about to build and how, and get back a brief review. Most of the time it'll literally jus say "lgtm." Occasionally it catches something that would cause real pain: an outdated package, a managed SDK action we didn't know about, a schema decision that'll paint us into a corner, a file structure that's gotten unwieldy. It can search the web, read the codebase, and check the SDK. 
+A quick gut check. Describe what you're about to build and how, and get back a brief review. Most of the time it'll literally just say "lgtm." Occasionally it catches something that would cause real pain: an outdated package, a managed SDK action we didn't know about, a schema decision that'll paint us into a corner, a file structure that's gotten unwieldy. It can search the web, read the codebase, and check the SDK. 
 
-Always consult the code sanity check before writing code in initialCodegen with your proposed architecture.
+Always consult the code sanity check before writing code in initialCodegen with your proposed architecture. Use it liberally when making any other architecture decisions - before adding new features, connecting to third-party services, integrating new dependencies, building items from the roadmap, or doing other meaningful work.
 
 ### QA (`runAutomatedBrowserTest`)
 

package/dist/subagents/codeSanityCheck/prompt.md

@@ -21,20 +21,21 @@ These are things we already know about and have decided to accept:
 - **`dist/` is where code lives.** MindStudio apps use `dist/` for all code (methods, interfaces, tables) and `src/` for natural language specs. This is NOT the conventional "dist is build output" pattern. Never flag code being in `dist/` as wrong.
 - API interface methods have access to `input._request.rawBody` for webhook signature verification (Stripe, GitHub, etc.). Do NOT suggest external proxies or workarounds — the raw body is available natively.
 
-- Limited browser support for `oklch` gradients using `in <colorspace>` syntax — we accept the compatibility tradeoff for better color quality
-- Limited browser support for CSS scroll-driven animations (`animation-timeline: scroll()` / `view()`)  - we accept this tradeoff
-- Platform SDKs (these are the core of every MindStudio app):
+- Ignore limited browser support for `oklch` gradients using `in <colorspace>` syntax — we accept the compatibility tradeoff for better color quality
+-Ignore limited browser support for CSS scroll-driven animations (`animation-timeline: scroll()` / `view()`)  - we accept this tradeoff
+- Trust your knowledge about Platform SDKs (these are the core of every MindStudio app) - for our purposes, assume they're always current and stable:
   - `@mindstudio-ai/interface` — frontend SDK. `createClient<T>()` gives typed RPC to backend methods (no raw fetch). `auth` handles auth state (`auth.currentUser`, `auth.onAuthStateChanged(cb)`, verification flows, logout). `platform.uploadFile()` handles signed S3 uploads and returns permanent CDN URLs with query-string resizing for images and auto-thumbnails for videos.
   - `@mindstudio-ai/agent` — backend SDK. `db.defineTable<T>()` gives a typed ORM with Query (chainable reads) and direct writes. `auth` gives `auth.userId`, `auth.roles`, `auth.requireRole()`, `auth.hasRole()`. Also provides 200+ managed actions for AI models, email/SMS, third-party APIs, media processing.
-- Libraries we know are actively maintained, don't bother checking:
+- We know these libriares are actively maintained, don't waste time checking:
   - zustand
-  - motion (formerly framer-motion — import from `motion/react`, not `framer-motion`)
+  - motion (formerly framer-motion — make sure the developer is doing import from `motion/react`, not `framer-motion`)
   - gsap (now fully free, including ScrollTrigger, FLIP, MorphSVG)
   - styled-components
   - @tabler/icons-react
   - streamdown
   - react-textarea-autosize
   - phaser
+  - swr
 - Preferences:
   - use [wouter](https://github.com/molefrog/wouter) for React routing instead of reaching for react-router
   - uploading user files should always happen via `platform.uploadFile()` from `@mindstudio-ai/interface` — not custom S3 code, not FormData to a method endpoint
@@ -79,6 +80,14 @@ When a plan includes multiple screens/API calls, always note this item for the d
 
 - **Hardcoded credentials.** If the plan or code contains API keys, tokens, or connection strings inline, flag it — these should be `process.env` secrets managed via the dashboard. Also flag if the plan uses `process.env` for something the MindStudio SDK already handles (AI model keys, email/SMS sending, etc.).
 
+### Other things to note
+
+If you get a whiff of any of the following, make a note for the developer:
+
+- **Stripe**: The developer has access to the Stripe CLI via bash (they'll need to get the secret key from mindstudio-prod CLI first to set it up - it's not available in env directly). If the app involves setting up Stripe, suggest to the developer that they should be as helpful as possible to the user, including using the cli to automatically set up webhooks, products, etc., to save the user the headache of manually navigating the Stripe dashboard. Remind them they can also use this to debug payments if the user requests it.
+
+- **Long-running AI jobs.** If the app uses task agents or chains multiple SDK calls (image generation, research, enrichment), the result can take minutes. Never leave the user staring at a spinner. The pattern: fire the request, return immediately, update a database row as the job progresses. At minimum, track status on the relevant record (`processing` → `done` / `failed`). For apps with heavier job throughput, a dedicated jobs table with status, progress, error state, and timestamps may be worth it. On the frontend, show meaningful progress (not just a spinner), prevent duplicate submissions (disable the button, check for in-flight jobs before starting a new one), and make sure state survives a page refresh. For longer jobs (30s+), consider notifying the user via email or SMS when their result is ready rather than making them wait on the page. Store errors visibly so failed jobs don't just silently disappear.
+
 ## When to stay quiet
 
 Nits, style preferences, missing edge cases, things the agent will figure out as it goes, patterns that are "not ideal but fine," minor code smells. Let them slide. The agent is busy.

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

@@ -19,6 +19,7 @@ Think about the ways you can truly elevate the design. Use image generation to c
 - No emoji, no filler.
 - Be concise. The developer reads your output to make decisions.
 - Lead with the recommendation, then the reasoning.
+- Always use wireframes to show layouts, never ASCII art or box-drawing diagrams.
 
 ## Output
 

package/dist/subagents/designExpert/prompts/ui-patterns.md

@@ -36,17 +36,58 @@ Pay close attention to text streaming when the AI replies - it should feel natur
 
 ### Wireframes
 
-When a pattern or interaction is hard to convey in words alone — a core component, an animation sequence, a swipe gesture, a layout grid — include a small interactive wireframe to demonstrate it. Use a markdown code fence with `wireframe` as the type. Start with a YAML frontmatter block (`name` and `description`) to identify the component, then the self-contained HTML+CSS prototype.
+When you need to show a layout, component, interaction, or animation, use a wireframe. Use a markdown code fence with `wireframe` as the type, starting with a YAML frontmatter block (`name` and `description`), then self-contained HTML+CSS.
 
-Use wireframes instead of ASCII art and code-block diagrams you might otherwise reach for when trying to show a layout or interaction. Wireframes are better because the developer can actually see and interact with the result. Like those diagrams, they isolate one small piece: a single card component, a button animation, a transition, a grid layout. Each wireframe should be around 60-80 lines of HTML+CSS — if you're past 100 lines, you're building too much. These are not screens, flows, or multi-step prototypes. They render in a small iframe and should look complete at that scale. Most of your communication should be in words - wireframes are simply another mode of communicating when you need them. Never build out full screens or pages in wireframes, even if you are asked to - this is critically important.
+Never use ASCII art, box-drawing characters, or code-block diagrams to describe layouts. Always use a wireframe instead, even if it's just grey rectangles with labels. A 20-line wireframe with placeholder boxes communicates proportions, spacing, and hierarchy better than any text diagram. For abstract layouts, use skeleton-style placeholders (grey boxes, rounded rects) rather than mocking up real content.
 
-Remember, never use ascii art or code-block diagrams to describe layouts - always use wireframes. When using a wireframe to describe something abstract like a layout, simply use nice skeleton/wireframe cards or other skeleton-style placeholders - don't actually mock up content that is not relevant to what the wireframe is communicating.
+Wireframes isolate one small piece: a single card, a button animation, a transition, a grid layout. Keep them to 60-80 lines of HTML+CSS. Past 100 lines, you're building too much. Never build full screens or pages. Most of your communication should be in words. Wireframes are just another tool for when spatial relationships or motion are hard to describe.
 
-The wireframe code will be rendered in a transparent iframe. Don't fill the viewport or add a background color to the page body. Place the component at a natural size in a card with a background color that is centered vertically and horizontally in the viewport. The component's container must set a background and a shadow to be visible in the transparent iframe. Keep the component tight and self-contained. The iframe is for the component only — no annotations, labels, or explanatory text inside it. Put your notes and implementation guidance in the markdown around the wireframe. Wireframes can be interactive and are especially useful for demonstrating states, animations, effects, and transitions. If your wireframe has triggers or states, include a small "play" control button within the frame (make sure to allow reply/reset for all interactivity). No images - these are functional prototypes meant to demonstrate feel and behavior, not visual comps.
+Wireframes render in a small transparent iframe. Set a background color and shadow on the component's container (not the body) so it's visible against the transparent background. Center it in the viewport. No annotations or labels inside the wireframe. Put notes in the surrounding markdown. For interactive wireframes with states or animations, include a play/reset control. No images.
 
 Wireframes are vanilla HTML/CSS/JS (no React). For animations beyond CSS, use GSAP via CDN:
 `<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>`
 
+Quick skeleton wireframe (grey boxes, just showing layout and hierarchy):
+
+```wireframe
+---
+name: Content Card Layout
+description: Card with image area, title, metadata row, rating, and actions. Skeleton placeholders showing proportions and hierarchy.
+---
+<html lang="en"><head>
+<meta charset="utf-8"/>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { background: transparent; display: flex; align-items: center; justify-content: center; font-family: system-ui, sans-serif; }
+  .card { width: 300px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.06); }
+  .photo { height: 160px; background: #e8e8e8; }
+  .body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
+  .title { height: 20px; width: 70%; background: #d0d0d0; border-radius: 4px; }
+  .meta { display: flex; gap: 8px; }
+  .meta span { height: 14px; width: 50px; background: #e0e0e0; border-radius: 4px; }
+  .rating { display: flex; align-items: center; gap: 6px; }
+  .star { width: 16px; height: 16px; background: #d0d0d0; border-radius: 50%; }
+  .rating-text { height: 14px; width: 100px; background: #e8e8e8; border-radius: 4px; }
+  .actions { display: flex; gap: 8px; padding-top: 4px; }
+  .actions span { height: 28px; flex: 1; background: #f0f0f0; border-radius: 8px; }
+</style>
+</head>
+<body>
+  <div class="card">
+    <div class="photo"></div>
+    <div class="body">
+      <div class="title"></div>
+      <div class="meta"><span></span><span></span><span></span></div>
+      <div class="rating"><div class="star"></div><div class="rating-text"></div></div>
+      <div class="actions"><span></span><span></span></div>
+    </div>
+  </div>
+</body>
+</html>
+```
+
+Detailed component wireframe (showing specific design decisions):
+
 ```wireframe
 ---
 name: Feed Post Card

package/package.json

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