@tritard/waterbrother 0.8.21 → 0.8.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tritard/waterbrother",
-  "version": "0.8.21",
+  "version": "0.8.23",
   "description": "Waterbrother: Grok-powered coding CLI with local tools, sessions, operator modes, and approval controls",
   "type": "module",
   "bin": {

package/src/agent.js

@@ -59,12 +59,12 @@ When you use tools:
   - define the typography, color system, spacing rhythm, and motion restraint through the code you write
   - avoid fake press badges, fake testimonials, fake founder lore, and placeholder image services unless explicitly requested
   - avoid generic Tailwind CDN template output and default premium-blog serif/sans pairings
-  - avoid invented publication brands, named authors, issue numbers, staff credits, or editorial worldbuilding unless the user explicitly asked for fictional framing
   - avoid browser-default Georgia/Times plus system-sans typography as a final design answer
   - avoid fake keyboard shortcuts, fake command palettes, and demo-only interaction chrome
-  - avoid generic reflective-editorial copy about slowness, attention, or the examined life unless the user explicitly asked for that voice
-  - prefer fewer sections and at least one asymmetrical or compositionally distinctive move over a fully balanced template layout
   - prefer fewer stronger sections over a busy page with fake search, fake filters, or filler widgets
+  - adapt the above rules to the site type; docs and dashboards may need clearer repetitive utility layouts than editorial or portfolio pages
+  - for ecommerce/store tasks, prioritize merchandising, trust, objection handling, and purchase flow over editorial atmosphere
+  - only apply benchmark-grade strictness about publication framing, reflective-editorial copy, and forced asymmetry when the task is clearly a benchmark/comparison ask
 - After making code or file edits:
   - lead with the file path or paths you changed
   - summarize concrete changes, not vibes or quality claims
@@ -124,9 +124,16 @@ function buildSystemPrompt(profile, experienceMode = "standard", autonomyMode =
           `- tone: ${frontend.tone || "unknown"}`,
           `- content mode: ${frontend.contentMode || "designed-placeholder"}`,
           `- asset policy: ${frontend.assetPolicy || "no-placeholder-images-unless-explicit"}`,
-          `- layout starter: ${frontend.layoutStarter || "choose a strong non-generic section grammar"}`
+          `- layout starter: ${frontend.layoutStarter || "choose a strong non-generic section grammar"}`,
+          `- benchmark mode: ${frontend.benchmarkMode ? "on" : "off"}`
         ].join("\n")
       );
+      if (Array.isArray(frontend.siteTypeRules) && frontend.siteTypeRules.length > 0) {
+        ctxLines.push(`Site-type rules:\n- ${frontend.siteTypeRules.join("\n- ")}`);
+      }
+      if (Array.isArray(frontend.benchmarkSiteTypeRules) && frontend.benchmarkSiteTypeRules.length > 0) {
+        ctxLines.push(`Benchmark site-type rules:\n- ${frontend.benchmarkSiteTypeRules.join("\n- ")}`);
+      }
     }
     if (executionContext.reminders) ctxLines.push(`Scope reminders:\n${executionContext.reminders}`);
     if (ctxLines.length > 0) base += `\n\nExecution context:\n${ctxLines.join("\n")}`;

package/src/frontend.js

@@ -49,7 +49,35 @@ Rules:
 
 const BENCHMARK_FRONTEND_PROMPT = /\b(?:benchmark|squarespace quality|ultimate design|first class|on par|codex|claude code|cc)\b/i;
 
+const UNIVERSAL_FRONTEND_REMINDERS = [
+  "Choose one visual direction and stay consistent across typography, spacing, color, and motion.",
+  "Choose a real type system with deliberate character. Browser-default Georgia/Times plus system sans is not an acceptable final design direction.",
+  "Prefer hand-authored CSS variables and layout rules over generic template utility sprawl when feasible.",
+  "Cut fake credibility elements, fake brands, fake testimonials, and filler interface chrome unless explicitly requested.",
+  "Do not add fake keyboard shortcuts, fake command palettes, or demo-only interactive chrome unless the interface truly needs them.",
+  "Avoid placeholder image services, Inter/Playfair default pairings, Tailwind CDN starter aesthetics, and generic premium-blog tropes.",
+  "Prefer fewer sections with stronger hierarchy over a long page full of low-value widgets."
+];
+
+const BENCHMARK_FRONTEND_REMINDERS = [
+  "For benchmark frontend tasks, cut generic reflective-editorial copy. Use sharper, more concrete language or neutral structural placeholders instead of atmosphere-writing.",
+  "For benchmark frontend tasks, force at least one asymmetrical or compositionally distinctive move instead of a fully balanced template layout.",
+  "Benchmark mode: treat fake issue framing, fake publication history, fake keyboard shortcuts, and invented named contributors as disallowed outputs. Use neutral structural placeholders if needed."
+];
+
+const BENCHMARK_SITE_TYPE_RULES = {
+  blog: [
+    "Benchmark blog mode: use neutral structural placeholders or concrete subject matter instead of publication worldbuilding or reflective-editorial atmosphere prose."
+  ],
+  store: [
+    "Benchmark ecommerce mode: prioritize conversion architecture over editorial styling. The page should sell, not just look clean.",
+    "Benchmark ecommerce mode: include proof, objection handling, and trust signals that belong on a real single-product PDP.",
+    "Benchmark ecommerce mode: do not leave the main merchandising surface as a literal placeholder or demo box."
+  ]
+};
+
 const SITE_TYPES = [
+  ["store", /\b(shopify|ecommerce|e-commerce|store|shop|product page|pdp|single product|product detail page)\b/i],
   ["blog", /\b(blog|journal|essays?|articles?|publication|editorial)\b/i],
   ["landing", /\b(landing page|homepage|home page|marketing site|product site|launch page|hero section)\b/i],
   ["portfolio", /\b(portfolio|studio site|agency site|showcase)\b/i],
@@ -58,6 +86,7 @@ const SITE_TYPES = [
 ];
 
 const ARCHETYPES = [
+  ["single-product-commerce", /\b(shopify|ecommerce|e-commerce|single product|product page|pdp|store)\b/i],
   ["editorial-minimal", /\b(editorial|minimal|literary|journal|quiet)\b/i],
   ["luxury-magazine", /\b(luxury|magazine|fashion|elegant|squarespace)\b/i],
   ["founder-journal", /\b(founder|memo|notebook|letter|essay)\b/i],
@@ -73,6 +102,36 @@ const AUDIENCE_HINTS = [
   ["operators", /\b(founders?|operators?|engineers?|designers?)\b/i]
 ];
 
+const SITE_TYPE_RULES = {
+  blog: [
+    "For blogs and editorial sites, prefer structural placeholder labels over inventing fictional publication brands, named editors, or fake biographical lore.",
+    "Do not invent issue numbers, seasonal issue metadata, staff credits, or named authors/photographers unless the user explicitly asked for fictional worldbuilding.",
+    "Do not add a newsletter/signup block unless the user explicitly asked for one or the site type clearly requires capture."
+  ],
+  landing: [
+    "For landing pages, prioritize the value proposition, proof, and one primary action over editorial atmosphere.",
+    "CTA sections are acceptable when they are genuinely part of the requested product flow; avoid fake testimonials or fake customer logos."
+  ],
+  portfolio: [
+    "For portfolios, let work samples, case studies, and identity carry the page rather than editorial filler.",
+    "Do not add newsletter/signup blocks or publication framing unless explicitly requested."
+  ],
+  docs: [
+    "For docs and help centers, clarity and information scent matter more than asymmetry or art direction.",
+    "Balanced, repetitive utility layouts are acceptable when they improve scanability."
+  ],
+  dashboard: [
+    "For dashboards and app UI, useful controls and information density matter more than editorial composition.",
+    "Do not remove necessary navigation or controls just to make the page feel minimal."
+  ],
+  store: [
+    "For ecommerce and single-product store pages, prioritize merchandising clarity, trust, and purchase flow over editorial atmosphere.",
+    "Include a clear product hierarchy near the buy action: product name, price, variant controls, purchase CTA, and shipping/returns or guarantee context.",
+    "Use proof and objection handling where appropriate: reviews, trust indicators, fit/material guidance, FAQ, shipping, or returns.",
+    "Do not add fake command palettes, fake app chrome, or non-commerce sections that distract from purchase intent."
+  ]
+};
+
 const ARCHETYPE_RULES = {
   "editorial-minimal": [
     "Use restrained editorial hierarchy with fewer, larger blocks of content.",
@@ -109,6 +168,12 @@ const ARCHETYPE_RULES = {
     "Do not add fake command-palette or keyboard-shortcut gimmicks unless the interface truly needs them.",
     "Target type palette: sharp grotesk or mono-accent system with disciplined scale and hard contrast."
   ],
+  "single-product-commerce": [
+    "Use a commerce-first hierarchy: product image, offer, price, variants, CTA, trust, and objection handling should be visually obvious.",
+    "Favor sharp sans-serif typography with disciplined emphasis; avoid editorial-magazine drift.",
+    "The hero surface must merchandise the product, not just reserve space for a placeholder.",
+    "Target type palette: assertive commerce sans with compact utility text and a restrained accent display if needed."
+  ],
   "quiet-portfolio": [
     "Let work and case-study structure carry the page, not decorative chrome.",
     "Use calm spacing and image framing with minimal interface noise.",
@@ -146,6 +211,10 @@ const LAYOUT_STARTERS = {
   "landing:high-contrast-tech": [
     "Preferred layout starter: sharp hero + proof strip + product detail band + focused CTA footer.",
     "Avoid generic 6-section SaaS marketing pages unless explicitly requested."
+  ],
+  "store:single-product-commerce": [
+    "Preferred layout starter: media gallery + purchase stack + trust strip + proof/reviews + FAQ or care/shipping objections.",
+    "Do not stop at a clean two-column PDP shell; include the conversion architecture a strong Shopify single-product page needs."
   ]
 };
 
@@ -172,6 +241,11 @@ const SLOP_PATTERNS = [
   { key: "fake_social_proof", label: "fake reader count or social proof", pattern: /\b(?:\d+\s+readers joined this month|\d+\s+subscribers?|trusted by)\b/i, weight: 2 }
 ];
 
+function getBenchmarkSiteTypeRules(siteType, benchmarkMode) {
+  if (!benchmarkMode) return [];
+  return BENCHMARK_SITE_TYPE_RULES[siteType] || [];
+}
+
 function getLayoutStarter(siteType, archetype) {
   return LAYOUT_STARTERS[`${siteType}:${archetype}`] || null;
 }
@@ -252,6 +326,10 @@ function inferAssetPolicy(text) {
   return "no-placeholder-images-unless-explicit";
 }
 
+function getSiteTypeRules(siteType) {
+  return SITE_TYPE_RULES[siteType] || [];
+}
+
 export function isFrontendGenerationPrompt(promptText = "", profile = "coder") {
   const text = String(promptText || "").trim();
   if (!text) return false;
@@ -275,25 +353,21 @@ export function buildFrontendExecutionContext({ promptText = "", profile = "code
   if (benchmarkMode && siteType === "blog" && contentMode === "designed-placeholder") {
     contentMode = "structural-placeholder";
   }
+  if (benchmarkMode && siteType === "store" && contentMode === "designed-placeholder") {
+    contentMode = "conversion-placeholder";
+  }
   const assetPolicy = inferAssetPolicy(text);
   const layoutStarter = getLayoutStarter(siteType, archetype);
+  const siteTypeRules = getSiteTypeRules(siteType);
+  const benchmarkSiteTypeRules = getBenchmarkSiteTypeRules(siteType, benchmarkMode);
   const reminders = [
     `Frontend brief: site type = ${siteType}, archetype = ${archetype}, audience = ${audience}, tone = ${tone}.`,
     `Content mode: ${contentMode}. Asset policy: ${assetPolicy}.`,
     layoutStarter ? `Layout starter: ${layoutStarter[0]}` : "",
-    "Choose one visual direction and stay consistent across typography, spacing, color, and motion.",
-    "Choose a real type system with deliberate character. Browser-default Georgia/Times plus system sans is not an acceptable final design direction.",
-    "Prefer hand-authored CSS variables and layout rules over generic template utility sprawl when feasible.",
-    "Cut fake credibility elements, fake brands, fake testimonials, and filler interface chrome unless explicitly requested.",
-    "For blogs and editorial sites, prefer structural placeholder labels over inventing fictional publication brands, named editors, or fake biographical lore.",
-    "Do not invent issue numbers, seasonal issue metadata, staff credits, or named authors/photographers unless the user explicitly asked for fictional worldbuilding.",
-    "Do not add a newsletter/signup block unless the user explicitly asked for one or the site type clearly requires capture.",
-    "Do not add fake keyboard shortcuts, fake command palettes, or demo-only interactive chrome unless the interface truly needs them.",
-    "Avoid placeholder image services, Inter/Playfair default pairings, Tailwind CDN starter aesthetics, and generic premium-blog tropes.",
-    "Prefer fewer sections with stronger hierarchy over a long page full of low-value widgets.",
-    "For benchmark frontend tasks, cut generic reflective-editorial copy. Use sharper, more concrete language or neutral structural placeholders instead of atmosphere-writing.",
-    "For benchmark frontend tasks, force at least one asymmetrical or compositionally distinctive move instead of a fully balanced template layout.",
-    benchmarkMode ? "Benchmark mode: treat fake issue framing, fake publication history, fake keyboard shortcuts, and invented named contributors as disallowed outputs. Use neutral structural placeholders if needed." : "",
+    ...UNIVERSAL_FRONTEND_REMINDERS,
+    ...siteTypeRules,
+    ...(benchmarkMode ? BENCHMARK_FRONTEND_REMINDERS : []),
+    ...benchmarkSiteTypeRules,
     ...(layoutStarter ? [layoutStarter[1]] : []),
     ...(ARCHETYPE_RULES[archetype] || [])
   ].join("\n");
@@ -307,7 +381,9 @@ export function buildFrontendExecutionContext({ promptText = "", profile = "code
       contentMode,
       assetPolicy,
       layoutStarter: layoutStarter ? layoutStarter[0] : null,
-      benchmarkMode
+      benchmarkMode,
+      siteTypeRules,
+      benchmarkSiteTypeRules
     },
     reminders
   };
@@ -343,6 +419,18 @@ export function detectFrontendSlop({ promptText = "", assistantText = "", receip
   }
   const siteType = pickByPattern(String(promptText || ""), SITE_TYPES, "landing");
   const benchmarkMode = isBenchmarkFrontendTask(promptText);
+  if (siteType === "store" && benchmarkMode && /\b(?:product image|visual placeholder|replace with real product photography)\b/i.test(haystack)) {
+    flags.push("benchmark store left the primary merchandising surface as a placeholder");
+    score += 4;
+  }
+  if (siteType === "store" && benchmarkMode && !/\b(?:review|reviews|testimonial|rated|stars?|customers?)\b/i.test(haystack)) {
+    flags.push("benchmark store lacks social proof or review architecture");
+    score += 2;
+  }
+  if (siteType === "store" && benchmarkMode && !/\b(?:faq|shipping|returns|guarantee|size guide|fit|materials?|care)\b/i.test(haystack)) {
+    flags.push("benchmark store lacks objection-handling content");
+    score += 2;
+  }
   if (siteType === "blog" && !hasExplicitNewsletterRequest(promptText) && /\bnewsletter|subscribe|email\b/i.test(haystack)) {
     flags.push("newsletter block added without being requested");
     score += 3;
@@ -355,12 +443,12 @@ export function detectFrontendSlop({ promptText = "", assistantText = "", receip
     flags.push("fake keyboard or command-palette gimmick");
     score += 3;
   }
-  if (siteType === "blog" && benchmarkMode && /\b(?:measure of time in ordinary things|quiet rituals|architecture of memory|cult of productivity|considered writing|the slow accumulation of days|craft of attention|in defense of silence)\b/i.test(haystack)) {
+  if (siteType === "blog" && benchmarkMode && /\b(?:measure of time in ordinary things|quiet rituals|architecture of memory|cult of productivity|considered writing|the slow accumulation of days|craft of attention|in defense of silence|meditation on permanence and ephemerality|stillness and the act of looking|deliberate observation)\b/i.test(haystack)) {
     flags.push("benchmark blog fell back to reflective-editorial atmosphere copy");
     score += 3;
   }
   const editorialLayoutHits = GENERIC_EDITORIAL_LAYOUT_PATTERNS.filter((pattern) => pattern.test(haystack)).length;
-  if (siteType === "blog" && editorialLayoutHits >= 3) {
+  if (siteType === "blog" && benchmarkMode && editorialLayoutHits >= 3) {
     flags.push("generic editorial starter layout");
     score += 2;
   }
@@ -369,7 +457,7 @@ export function detectFrontendSlop({ promptText = "", assistantText = "", receip
   return {
     score,
     flags,
-    hardBlock: flags.some((flag) => /fictional publication identity|fake keyboard|reflective-editorial atmosphere/.test(flag)),
+    hardBlock: flags.some((flag) => /fictional publication identity|fake keyboard|reflective-editorial atmosphere|primary merchandising surface as a placeholder/.test(flag)),
     severe: score >= 5,
     summary: flags.length > 0 ? `frontend slop flags: ${flags.join(", ")}` : "no deterministic frontend slop flags"
   };
@@ -410,6 +498,7 @@ export function buildFrontendRevisionPrompt({
     "Remove fake keyboard shortcuts, fake command palettes, and demo-only interaction flourishes that do not help the page.",
     "Cut reflective-editorial filler copy and replace it with either concrete language or neutral structural placeholders.",
     "For benchmark blog tasks, default to neutral structural placeholder content instead of invented publication framing, issue metadata, or named contributors.",
+    "For benchmark store tasks, do not leave the product image area as a labeled placeholder. Use product-shaped merchandising composition, proof, and objection-handling blocks instead.",
     "Reduce section count if needed and push one stronger asymmetrical composition instead of a sequence of balanced blocks.",
     "Simplify the page if needed. Stronger direction with fewer elements is preferred over busier generic output.",
     "Rewrite the weakest sections rather than making superficial tweaks."