npm - @mindstudio-ai/remy - Versions diffs - 0.1.282 → 0.1.283 - Mend

@mindstudio-ai/remy 0.1.282 → 0.1.283

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/headless.js +25 -13
package/dist/index.js +26 -14
package/dist/prompt/static/team.md +1 -1
package/dist/subagents/designExpert/prompts/instructions.md +1 -1
package/dist/subagents/designExpert/prompts/ui-patterns.md +4 -4
package/package.json +1 -1

package/dist/headless.js CHANGED Viewed

@@ -2709,8 +2709,8 @@ function formatSize(bytes) {
 }
 async function formatFile(dirPath, name, indent) {
   try {
-    const stat2 = await fs16.stat(path8.join(dirPath, name));
-    return `${indent}${name}${" ".repeat(Math.max(1, 30 - indent.length - name.length))}${formatSize(stat2.size)}`;
+    const stat3 = await fs16.stat(path8.join(dirPath, name));
+    return `${indent}${name}${" ".repeat(Math.max(1, 30 - indent.length - name.length))}${formatSize(stat3.size)}`;
   } catch {
     return `${indent}${name}`;
   }
@@ -5570,20 +5570,24 @@ __export(createWireframe_exports, {
   definition: () => definition10,
   execute: () => execute10
 });
-import { mkdir as mkdir2, writeFile as writeFile2 } from "fs/promises";
+import { mkdir as mkdir2, stat as stat2, writeFile as writeFile2 } from "fs/promises";
 import { join as join2 } from "path";
 var log9 = createLogger("createWireframe");
 var WIREFRAMES_DIR = "src/.wireframes";
 var UPLOAD_TIMEOUT_MS2 = 3e4;
 var definition10 = {
   name: "createWireframe",
-  description: "Create a wireframe from self-contained HTML+CSS. Returns a markdown reference line \u2014 include that exact line in your response wherever the wireframe belongs, with your notes in the surrounding prose. To revise a wireframe, create a new one (read the old file first if you are iterating on it).",
+  description: "Create (or revise) a wireframe from self-contained HTML+CSS. The wireframe is saved to src/.wireframes/{slug}.html \u2014 reference it in your response and in specs as ![name](src/.wireframes/{slug}.html), with your notes in the surrounding prose. Calling again with the same slug overwrites the wireframe in place, so a revision keeps its path and existing references stay current.",
   inputSchema: {
     type: "object",
     properties: {
       name: {
         type: "string",
-        description: 'Short display name, e.g. "Feed Post Card". Becomes the caption and the filename slug.'
+        description: 'Short display name, e.g. "Feed Post Card". Becomes the caption.'
+      },
+      slug: {
+        type: "string",
+        description: 'Filename stem, lowercase kebab-case (e.g. "feed-post-card"). The wireframe lives at src/.wireframes/{slug}.html. Re-use a slug to revise that wireframe in place.'
       },
       description: {
         type: "string",
@@ -5594,20 +5598,24 @@ var definition10 = {
         description: "The complete HTML document (<html>\u2026</html>), self-contained vanilla HTML/CSS/JS. No frontmatter \u2014 it is added for you."
       }
     },
-    required: ["name", "description", "html"]
+    required: ["name", "slug", "description", "html"]
   }
 };
-function slugify(name) {
-  return name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 40).replace(/-+$/, "") || "wireframe";
-}
+var SLUG_RE = /^[a-z0-9][a-z0-9-]{0,79}$/;
 function singleLine(value) {
   return value.replace(/\s+/g, " ").trim();
 }
-function validate(name, html) {
+function validate(name, slug, html) {
   const warnings = [];
   if (!name.trim()) {
     return { error: "Error: name is required.", warnings };
   }
+  if (!SLUG_RE.test(slug)) {
+    return {
+      error: 'Error: slug must be lowercase kebab-case ([a-z0-9-], starting with a letter or digit, \u2264 80 chars), e.g. "feed-post-card".',
+      warnings
+    };
+  }
   if (!html.trim()) {
     return { error: "Error: html is required.", warnings };
   }
@@ -5666,13 +5674,13 @@ async function execute10(input, onLog, context) {
     return "Error: createWireframe requires execution context";
   }
   const name = String(input.name ?? "");
+  const slug = String(input.slug ?? "");
   const description = String(input.description ?? "");
   const html = String(input.html ?? "");
-  const { error, warnings } = validate(name, html);
+  const { error, warnings } = validate(name, slug, html);
   if (error) {
     return error;
   }
-  const slug = `${slugify(name)}-${Math.random().toString(36).slice(2, 8)}`;
   const relPath = `${WIREFRAMES_DIR}/${slug}.html`;
   const content = [
     "---",
@@ -5683,6 +5691,10 @@ async function execute10(input, onLog, context) {
     ""
   ].join("\n");
   await mkdir2(join2(PROJECT_ROOT, WIREFRAMES_DIR), { recursive: true });
+  const existed = await stat2(join2(PROJECT_ROOT, relPath)).then(
+    () => true,
+    () => false
+  );
   await writeFile2(join2(PROJECT_ROOT, relPath), content, "utf8");
   onLog?.(`Wrote ${relPath}, mirroring for preview...`);
   const mirror = await uploadMirror(context, slug, content);
@@ -5690,7 +5702,7 @@ async function execute10(input, onLog, context) {
     log9.warn("Wireframe mirror upload failed", { slug, note: mirror.note });
   }
   const lines = [
-    `Created wireframe "${singleLine(name)}" at ${relPath}.`,
+    `${existed ? "Revised" : "Created"} wireframe "${singleLine(name)}" at ${relPath}.${existed ? " Existing references to this path now show the new version." : ""}`,
     `Reference it in your response and in specs with exactly: ![${singleLine(name)}](${relPath})`
   ];
   if (!mirror.ok) {

package/dist/index.js CHANGED Viewed

@@ -3816,8 +3816,8 @@ function formatSize(bytes) {
 }
 async function formatFile(dirPath, name, indent) {
   try {
-    const stat2 = await fs15.stat(path8.join(dirPath, name));
-    return `${indent}${name}${" ".repeat(Math.max(1, 30 - indent.length - name.length))}${formatSize(stat2.size)}`;
+    const stat3 = await fs15.stat(path8.join(dirPath, name));
+    return `${indent}${name}${" ".repeat(Math.max(1, 30 - indent.length - name.length))}${formatSize(stat3.size)}`;
   } catch {
     return `${indent}${name}`;
   }
@@ -6752,19 +6752,22 @@ __export(createWireframe_exports, {
   definition: () => definition10,
   execute: () => execute10
 });
-import { mkdir as mkdir2, writeFile as writeFile2 } from "fs/promises";
+import { mkdir as mkdir2, stat as stat2, writeFile as writeFile2 } from "fs/promises";
 import { join as join2 } from "path";
-function slugify(name) {
-  return name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 40).replace(/-+$/, "") || "wireframe";
-}
 function singleLine(value) {
   return value.replace(/\s+/g, " ").trim();
 }
-function validate(name, html) {
+function validate(name, slug, html) {
   const warnings = [];
   if (!name.trim()) {
     return { error: "Error: name is required.", warnings };
   }
+  if (!SLUG_RE.test(slug)) {
+    return {
+      error: 'Error: slug must be lowercase kebab-case ([a-z0-9-], starting with a letter or digit, \u2264 80 chars), e.g. "feed-post-card".',
+      warnings
+    };
+  }
   if (!html.trim()) {
     return { error: "Error: html is required.", warnings };
   }
@@ -6823,13 +6826,13 @@ async function execute10(input, onLog, context) {
     return "Error: createWireframe requires execution context";
   }
   const name = String(input.name ?? "");
+  const slug = String(input.slug ?? "");
   const description = String(input.description ?? "");
   const html = String(input.html ?? "");
-  const { error, warnings } = validate(name, html);
+  const { error, warnings } = validate(name, slug, html);
   if (error) {
     return error;
   }
-  const slug = `${slugify(name)}-${Math.random().toString(36).slice(2, 8)}`;
   const relPath = `${WIREFRAMES_DIR}/${slug}.html`;
   const content = [
     "---",
@@ -6840,6 +6843,10 @@ async function execute10(input, onLog, context) {
     ""
   ].join("\n");
   await mkdir2(join2(PROJECT_ROOT, WIREFRAMES_DIR), { recursive: true });
+  const existed = await stat2(join2(PROJECT_ROOT, relPath)).then(
+    () => true,
+    () => false
+  );
   await writeFile2(join2(PROJECT_ROOT, relPath), content, "utf8");
   onLog?.(`Wrote ${relPath}, mirroring for preview...`);
   const mirror = await uploadMirror(context, slug, content);
@@ -6847,7 +6854,7 @@ async function execute10(input, onLog, context) {
     log10.warn("Wireframe mirror upload failed", { slug, note: mirror.note });
   }
   const lines = [
-    `Created wireframe "${singleLine(name)}" at ${relPath}.`,
+    `${existed ? "Revised" : "Created"} wireframe "${singleLine(name)}" at ${relPath}.${existed ? " Existing references to this path now show the new version." : ""}`,
     `Reference it in your response and in specs with exactly: ![${singleLine(name)}](${relPath})`
   ];
   if (!mirror.ok) {
@@ -6860,7 +6867,7 @@ async function execute10(input, onLog, context) {
   }
   return lines.join("\n");
 }
-var log10, WIREFRAMES_DIR, UPLOAD_TIMEOUT_MS2, definition10;
+var log10, WIREFRAMES_DIR, UPLOAD_TIMEOUT_MS2, definition10, SLUG_RE;
 var init_createWireframe = __esm({
   "src/subagents/designExpert/tools/createWireframe.ts"() {
     "use strict";
@@ -6871,13 +6878,17 @@ var init_createWireframe = __esm({
     UPLOAD_TIMEOUT_MS2 = 3e4;
     definition10 = {
       name: "createWireframe",
-      description: "Create a wireframe from self-contained HTML+CSS. Returns a markdown reference line \u2014 include that exact line in your response wherever the wireframe belongs, with your notes in the surrounding prose. To revise a wireframe, create a new one (read the old file first if you are iterating on it).",
+      description: "Create (or revise) a wireframe from self-contained HTML+CSS. The wireframe is saved to src/.wireframes/{slug}.html \u2014 reference it in your response and in specs as ![name](src/.wireframes/{slug}.html), with your notes in the surrounding prose. Calling again with the same slug overwrites the wireframe in place, so a revision keeps its path and existing references stay current.",
       inputSchema: {
         type: "object",
         properties: {
           name: {
             type: "string",
-            description: 'Short display name, e.g. "Feed Post Card". Becomes the caption and the filename slug.'
+            description: 'Short display name, e.g. "Feed Post Card". Becomes the caption.'
+          },
+          slug: {
+            type: "string",
+            description: 'Filename stem, lowercase kebab-case (e.g. "feed-post-card"). The wireframe lives at src/.wireframes/{slug}.html. Re-use a slug to revise that wireframe in place.'
           },
           description: {
             type: "string",
@@ -6888,9 +6899,10 @@ var init_createWireframe = __esm({
             description: "The complete HTML document (<html>\u2026</html>), self-contained vanilla HTML/CSS/JS. No frontmatter \u2014 it is added for you."
           }
         },
-        required: ["name", "description", "html"]
+        required: ["name", "slug", "description", "html"]
       }
     };
+    SLUG_RE = /^[a-z0-9][a-z0-9-]{0,79}$/;
   }
 });

package/dist/prompt/static/team.md CHANGED Viewed

@@ -12,7 +12,7 @@ Your designer. Consult for any visual decision — choosing a color, picking fon
 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 and color schemes (self-contained HTML and CSS) - write these directly into specs for future reference. Wireframes arrive as file references like `![Feed Post Card](src/.wireframes/feed-post-card-x7f2.html)`: copy the reference line into specs verbatim (it renders as a visual preview in chat and in the spec), and read the file at that path while building to get the exact markup and CSS the designer specified.
+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 and color schemes (self-contained HTML and CSS) - write these directly into specs for future reference. Wireframes arrive as file references like `![Feed Post Card](src/.wireframes/feed-post-card.html)`: copy the reference line into specs verbatim (it renders as a visual preview in chat and in the spec), and read the file at that path while building to get the exact markup and CSS the designer specified. When the designer revises a wireframe it overwrites the same path, so existing references stay current.
 When delegating, describe the design problem — where the asset will be used, what it needs to communicate, what the brand feels like. Do not specify technical details like image formats, pixel dimensions, generation techniques, or workarounds. The design expert makes those decisions.

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

@@ -16,7 +16,7 @@ Think about the ways you can truly elevate the design. Use image generation to c
 - After you've taken a screenshot, use analyze image to ask different questions about it - don't re-screenshot the page unnecessarily.
 - Match the image engine to the job: `renderImage` (a browser rendering HTML you author) for token-exact graphics — share cards, wordmarks, flat icon tiles; `generateImages` (an image model) for organic, photographic, and illustrated work. Don't ask the image model to hit exact hex codes or typography, and don't hand-write SVG path data — compose HTML/CSS and render it.
 - When you write user-facing copy (headlines, captions, labels, body text), hand it to `polishCopy` before finalizing. It tightens prose so it reads like a person wrote it rather than a machine, without changing what it says. Cheap and fast — use it on any copy that will ship.
-- Deliver wireframes with `createWireframe`. Include the returned `![name](src/.wireframes/….html)` line in your response where the wireframe belongs — it renders as a live preview, and the developer reads the file for the exact markup.
+- Deliver wireframes with `createWireframe`. Include the `![name](src/.wireframes/{slug}.html)` line in your response where the wireframe belongs — it renders as a live preview, and the developer reads the file for the exact markup. Same slug = revise in place; new slug = new wireframe.
 ## Voice
 - No emoji, no filler.

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

@@ -25,7 +25,7 @@ Some surfaces are deep enough to carry their own craft reference in <available_s
 ### Wireframes
-When you need to show a layout, component, interaction, or animation, create a wireframe with the `createWireframe` tool: pass a `name`, a one-line `description`, and self-contained HTML+CSS. The tool saves the wireframe as a file under `src/.wireframes/` and returns a markdown reference line like `![Feed Post Card](src/.wireframes/feed-post-card-x7f2.html)` — include that exact line in your response wherever the wireframe belongs, with your notes in the surrounding prose. The reference line renders as a live visual preview, and the developer reads the file itself for the exact markup and CSS.
+When you need to show a layout, component, interaction, or animation, create a wireframe with the `createWireframe` tool: pass a `name`, a kebab-case `slug`, a one-line `description`, and self-contained HTML+CSS. The wireframe is saved to `src/.wireframes/{slug}.html`, and you reference it as `![Feed Post Card](src/.wireframes/feed-post-card.html)` — include that line in your response wherever the wireframe belongs, with your notes in the surrounding prose. The reference line renders as a live visual preview, and the developer reads the file itself for the exact markup and CSS. A reference only renders once its wireframe exists, so make the `createWireframe` call for every reference you write — in the same response is fine.
 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.
@@ -35,9 +35,9 @@ Wireframes render in a small transparent iframe. Set a background color and shad
 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>`
-Wireframe files are immutable — to revise one, create a new wireframe. If you're iterating on an earlier one, read its file first and riff from there.
+To revise a wireframe, call `createWireframe` again with the same slug — the file is overwritten in place and every existing reference to that path (in chat and in specs) shows the new version. Read the current file first if you're iterating on it. Use a new slug when it's genuinely a different wireframe, not a revision.
-Quick skeleton wireframe (grey boxes, just showing layout and hierarchy) — `createWireframe` with name "Content Card Layout", description "Card with image area, title, metadata row, rating, and actions. Skeleton placeholders showing proportions and hierarchy.", and this html:
+Quick skeleton wireframe (grey boxes, just showing layout and hierarchy) — `createWireframe` with name "Content Card Layout", slug "content-card-layout", description "Card with image area, title, metadata row, rating, and actions. Skeleton placeholders showing proportions and hierarchy.", and this html:
 ```html
 <html lang="en"><head>
@@ -72,7 +72,7 @@ Quick skeleton wireframe (grey boxes, just showing layout and hierarchy) — `cr
 </html>
 ```
-Detailed component wireframe (showing specific design decisions) — `createWireframe` with name "Feed Post Card", description "Photo post card with header, image frame, action row (like/comment/share/bookmark), like count, and caption. Shows spacing, typography hierarchy, and icon placement.", and this html:
+Detailed component wireframe (showing specific design decisions) — `createWireframe` with name "Feed Post Card", slug "feed-post-card", description "Photo post card with header, image frame, action row (like/comment/share/bookmark), like count, and caption. Shows spacing, typography hierarchy, and icon placement.", and this html:
 ```html
 <html lang="en"><head>

package/package.json CHANGED Viewed

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