@tritard/waterbrother 0.8.14 → 0.8.16

package/package.json

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

package/src/cli.js

@@ -673,6 +673,13 @@ function createProgressSpinner(initialLabel = "thinking...") {
   let label = initialLabel;
   let frameIndex = 0;
   let stopped = false;
+  const renderLabel = () => {
+    if (typeof label === "function") {
+      const next = label();
+      return String(next || "");
+    }
+    return String(label || "");
+  };
   const clearLine = () => {
     process.stdout.write("\r\x1b[2K");
   };
@@ -686,7 +693,7 @@ function createProgressSpinner(initialLabel = "thinking...") {
     const bar = renderFlowingBar(frameIndex, 14);
     frameIndex += 1;
     clearLine();
-    process.stdout.write(`${styleAssistantPrefix()} ${bar} ${label}`);
+    process.stdout.write(`${styleAssistantPrefix()} ${bar} ${renderLabel()}`);
   }, 70);
 
   let activeInterval = interval;
@@ -714,7 +721,7 @@ function createProgressSpinner(initialLabel = "thinking...") {
         const bar = renderFlowingBar(frameIndex, 14);
         frameIndex += 1;
         clearLine();
-        process.stdout.write(`${styleAssistantPrefix()} ${bar} ${label}`);
+        process.stdout.write(`${styleAssistantPrefix()} ${bar} ${renderLabel()}`);
       }, 70);
       activeSpinnerController = controller;
     }
@@ -724,6 +731,17 @@ function createProgressSpinner(initialLabel = "thinking...") {
   return controller;
 }
 
+function formatElapsedShort(ms) {
+  const totalSeconds = Math.max(0, Math.floor(Number(ms || 0) / 1000));
+  if (totalSeconds < 60) return `${totalSeconds}s`;
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  if (minutes < 60) return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  const remMinutes = minutes % 60;
+  return remMinutes > 0 ? `${hours}h ${remMinutes}m` : `${hours}h`;
+}
+
 function parseToolResultShape(resultText) {
   try {
     const parsed = JSON.parse(String(resultText || ""));
@@ -864,6 +882,15 @@ function printReceiptSummary(receipt) {
   if (receipt.designRevision?.triggered) {
     console.log(`${styleSystemPrefix()} ${dim("design pass")} ${yellow("auto-revised")} ${receipt.designRevision.initialSummary || ""}`.trim());
   }
+  if (receipt.screenshotReview?.verdict) {
+    const verdict =
+      receipt.screenshotReview.verdict === "strong"
+        ? green("strong")
+        : receipt.screenshotReview.verdict === "weak"
+          ? red("weak")
+          : yellow("caution");
+    console.log(`${styleSystemPrefix()} ${dim("render")} ${verdict} ${receipt.screenshotReview.summary || ""}`.trim());
+  }
 }
 
 function printImpactMap(impact) {
@@ -3400,14 +3427,12 @@ async function runTextTurnInteractive({
     const idleMs = Date.now() - lastProgressAt;
     if (!heartbeatFired && idleMs >= 2000) {
       heartbeatFired = true;
+      spinner.setLabel(() => `• Working (${formatElapsedShort(Date.now() - turnSummary.startedAt)} • esc to interrupt)`);
       printLiveTrace(`state=${currentState}...`, context.runtime.traceMode, { verboseOnly: true });
     }
     if (!stalledNotified && idleMs >= 8000) {
       stalledNotified = true;
-      if (activeSpinnerController?.clear) {
-        activeSpinnerController.clear();
-      }
-      console.log(`${styleSystemPrefix()} ${yellow(`still working (${currentState}) — press Ctrl+C to interrupt`)}`);
+      spinner.setLabel(() => `• Working (${formatElapsedShort(Date.now() - turnSummary.startedAt)} • esc to interrupt)`);
     }
   }, 500);
 
@@ -5263,8 +5288,7 @@ async function promptLoop(agent, session, context) {
         const idleMs = Date.now() - lastProgressAt;
         if (!stalledNotified && idleMs >= 8000) {
           stalledNotified = true;
-          if (activeSpinnerController?.clear) activeSpinnerController.clear();
-          console.log(`${styleSystemPrefix()} ${yellow(`still working (${currentState}) — press Ctrl+C to interrupt`)}`);
+          spinner.setLabel(() => `• Working (${formatElapsedShort(Date.now() - turnSummary.startedAt)} • esc to interrupt)`);
         }
       }, 500);
 
@@ -5387,6 +5411,11 @@ async function promptLoop(agent, session, context) {
           const vc = v === "strong" ? green(v) : v === "weak" ? red(v) : yellow(v);
           lines.push(`${dim("design:")} ${vc} — ${buildResult.designReview.summary}`);
         }
+        if (buildResult.screenshotReview) {
+          const v = buildResult.screenshotReview.verdict;
+          const vc = v === "strong" ? green(v) : v === "weak" ? red(v) : yellow(v);
+          lines.push(`${dim("render:")} ${vc} — ${buildResult.screenshotReview.summary}`);
+        }
         if (buildResult.designRevision?.triggered) {
           lines.push(`${dim("design pass:")} ${yellow("auto-revised")} — ${buildResult.designRevision.initialSummary || "first pass revised"}`);
         }

package/src/frontend.js

@@ -1,5 +1,13 @@
+import { execFile } from "node:child_process";
+import fs from "node:fs/promises";
+import os from "node:os";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+import { promisify } from "node:util";
 import { createChatCompletion } from "./grok-client.js";
 
+const execFileAsync = promisify(execFile);
+
 const FRONTEND_REVIEW_SYSTEM_PROMPT = `You are Waterbrother Art Director, a strict frontend design critic.
 You review generated websites, landing pages, blogs, and UI surfaces after implementation.
 Judge the work against these standards:
@@ -23,6 +31,22 @@ Rules:
 - Call out fake credibility badges, placeholder brands, stock-image dependence, Tailwind CDN template styling, and overused serif/sans premium-blog tropes when present.
 - Do not wrap JSON in markdown.`;
 
+const FRONTEND_SCREENSHOT_REVIEW_SYSTEM_PROMPT = `You are Waterbrother Art Director reviewing a rendered website screenshot.
+Judge the actual visual result on screen, not the code alone.
+
+Return strict JSON with keys:
+- verdict: one of strong, caution, weak
+- summary: short string
+- wins: array of strings
+- visualIssues: array of strings
+- nextPass: array of strings
+
+Rules:
+- Use weak for obvious template output, weak hierarchy, awkward spacing, generic composition, or visually incoherent pages.
+- Use caution for competent pages that still feel safe, generic, or under-directed.
+- Be concrete about visible layout, spacing, typography, contrast, composition, and interaction cues.
+- Do not wrap JSON in markdown.`;
+
 const SITE_TYPES = [
   ["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],
@@ -102,6 +126,21 @@ function normalizeContent(content) {
   return "";
 }
 
+function inferMimeType(filePath) {
+  const lower = String(filePath || "").toLowerCase();
+  if (lower.endsWith(".png")) return "image/png";
+  if (lower.endsWith(".jpg") || lower.endsWith(".jpeg")) return "image/jpeg";
+  if (lower.endsWith(".webp")) return "image/webp";
+  if (lower.endsWith(".gif")) return "image/gif";
+  return "application/octet-stream";
+}
+
+async function loadImageAsDataUrl(filePath) {
+  const raw = await fs.readFile(filePath);
+  const mime = inferMimeType(filePath);
+  return `data:${mime};base64,${raw.toString("base64")}`;
+}
+
 function parseJsonObject(text) {
   const raw = String(text || "").trim();
   if (!raw) return null;
@@ -237,17 +276,22 @@ export function shouldAutoReviseFrontend({ designReview = null, slop = null, rev
 export function buildFrontendRevisionPrompt({
   originalPrompt = "",
   designReview = null,
-  slop = null
+  slop = null,
+  screenshotReview = null
 } = {}) {
   const issues = Array.isArray(designReview?.issues) ? designReview.issues.slice(0, 6) : [];
   const nextPass = Array.isArray(designReview?.nextPass) ? designReview.nextPass.slice(0, 6) : [];
   const slopFlags = Array.isArray(slop?.flags) ? slop.flags.slice(0, 6) : [];
+  const visualIssues = Array.isArray(screenshotReview?.visualIssues) ? screenshotReview.visualIssues.slice(0, 6) : [];
+  const visualNextPass = Array.isArray(screenshotReview?.nextPass) ? screenshotReview.nextPass.slice(0, 6) : [];
   const blocks = [
     `Revise the generated frontend to address the design problems from the first pass.`,
     `Original task: ${String(originalPrompt || "").trim()}`,
     issues.length > 0 ? `Problems to fix:\n- ${issues.join("\n- ")}` : "",
+    visualIssues.length > 0 ? `Visible screenshot problems:\n- ${visualIssues.join("\n- ")}` : "",
     slopFlags.length > 0 ? `Deterministic slop flags:\n- ${slopFlags.join("\n- ")}` : "",
     nextPass.length > 0 ? `Revision priorities:\n- ${nextPass.join("\n- ")}` : "",
+    visualNextPass.length > 0 ? `Screenshot revision priorities:\n- ${visualNextPass.join("\n- ")}` : "",
     "Do not add new filler sections.",
     "Do not add fake prestige, fake testimonials, fake brands, or placeholder-image services.",
     "Simplify the page if needed. Stronger direction with fewer elements is preferred over busier generic output.",
@@ -267,6 +311,17 @@ function normalizeFrontendReview(review) {
   };
 }
 
+function normalizeScreenshotReview(review) {
+  const verdict = String(review?.verdict || "caution").trim().toLowerCase();
+  return {
+    verdict: ["strong", "caution", "weak"].includes(verdict) ? verdict : "caution",
+    summary: String(review?.summary || "No screenshot review summary returned.").trim(),
+    wins: Array.isArray(review?.wins) ? review.wins.map((item) => String(item || "").trim()).filter(Boolean).slice(0, 8) : [],
+    visualIssues: Array.isArray(review?.visualIssues) ? review.visualIssues.map((item) => String(item || "").trim()).filter(Boolean).slice(0, 8) : [],
+    nextPass: Array.isArray(review?.nextPass) ? review.nextPass.map((item) => String(item || "").trim()).filter(Boolean).slice(0, 8) : []
+  };
+}
+
 export async function reviewFrontendTurn({
   apiKey,
   baseUrl,
@@ -300,3 +355,93 @@ export async function reviewFrontendTurn({
   const parsed = parseJsonObject(normalizeContent(completion?.message?.content));
   return normalizeFrontendReview(parsed || {});
 }
+
+export async function findFrontendPreviewEntry({ cwd, receipt = null } = {}) {
+  const changedFiles = Array.isArray(receipt?.changedFiles) ? receipt.changedFiles : [];
+  for (const filePath of changedFiles) {
+    const raw = String(filePath || "").trim();
+    if (!raw) continue;
+    const absolute = path.isAbsolute(raw) ? raw : path.resolve(cwd || process.cwd(), raw);
+    if (!absolute.toLowerCase().endsWith(".html")) continue;
+    try {
+      await fs.access(absolute);
+      return absolute;
+    } catch {}
+  }
+  const fallback = path.resolve(cwd || process.cwd(), "index.html");
+  try {
+    await fs.access(fallback);
+    return fallback;
+  } catch {
+    return null;
+  }
+}
+
+export async function captureFrontendScreenshot({ entryPath } = {}) {
+  if (!entryPath || process.platform !== "darwin") return null;
+  const screenshotPath = path.join(os.tmpdir(), `waterbrother-frontend-${Date.now()}.png`);
+  const targetUrl = pathToFileURL(entryPath).toString();
+  const script = `
+on run argv
+  set targetUrl to item 1 of argv
+  set outputPath to item 2 of argv
+  set leftPos to 72
+  set topPos to 56
+  set rightPos to 1512
+  set bottomPos to 1120
+  tell application "Safari"
+    activate
+    make new document with properties {URL:targetUrl}
+    delay 2
+    try
+      set bounds of front window to {leftPos, topPos, rightPos, bottomPos}
+    end try
+    delay 1
+    set winBounds to bounds of front window
+  end tell
+  set captureLeft to item 1 of winBounds
+  set captureTop to item 2 of winBounds
+  set captureWidth to (item 3 of winBounds) - (item 1 of winBounds)
+  set captureHeight to (item 4 of winBounds) - (item 2 of winBounds)
+  do shell script "/usr/sbin/screencapture -x -R" & quoted form of ((captureLeft as string) & "," & (captureTop as string) & "," & (captureWidth as string) & "," & (captureHeight as string)) & " " & quoted form of outputPath
+  tell application "Safari"
+    try
+      close front document saving no
+    end try
+  end tell
+  return outputPath
+end run`;
+  await execFileAsync("/usr/bin/osascript", ["-e", script, targetUrl, screenshotPath], { timeout: 12000 });
+  return screenshotPath;
+}
+
+export async function reviewFrontendScreenshot({
+  apiKey,
+  baseUrl,
+  model,
+  screenshotPath,
+  promptText = "",
+  signal
+} = {}) {
+  if (!screenshotPath) return null;
+  const imageUrl = await loadImageAsDataUrl(screenshotPath);
+  const completion = await createChatCompletion({
+    apiKey,
+    baseUrl,
+    model,
+    signal,
+    messages: [
+      { role: "system", content: FRONTEND_SCREENSHOT_REVIEW_SYSTEM_PROMPT },
+      {
+        role: "user",
+        content: [
+          { type: "text", text: `Audit this rendered frontend screenshot for the task: ${String(promptText || "").slice(0, 4000)}` },
+          { type: "image_url", image_url: { url: imageUrl } }
+        ]
+      }
+    ]
+  });
+
+  const parsed = parseJsonObject(normalizeContent(completion?.message?.content));
+  return normalizeScreenshotReview(parsed || {});
+}

package/src/workflow.js

@@ -4,8 +4,11 @@ import { reviewTurn, challengeReceipt } from "./reviewer.js";
 import {
   buildFrontendExecutionContext,
   buildFrontendRevisionPrompt,
+  captureFrontendScreenshot,
   detectFrontendSlop,
+  findFrontendPreviewEntry,
   reviewFrontendTurn,
+  reviewFrontendScreenshot,
   shouldAutoReviseFrontend,
   shouldRunFrontendReview
 } from "./frontend.js";
@@ -152,14 +155,37 @@ export async function runBuildWorkflow({
       }
     }
 
+    let screenshotReview = null;
+    let screenshotPath = null;
+    if (designReview) {
+      try {
+        const previewEntry = await findFrontendPreviewEntry({ cwd: context.cwd, receipt: activeReceipt });
+        if (previewEntry) {
+          screenshotPath = await captureFrontendScreenshot({ entryPath: previewEntry });
+          if (screenshotPath) {
+            screenshotReview = await reviewFrontendScreenshot({
+              apiKey: context.runtime.apiKey,
+              baseUrl: context.runtime.baseUrl,
+              model: context.runtime.reviewer?.model || agent.getModel(),
+              screenshotPath,
+              promptText,
+              signal: handlers.signal
+            });
+          }
+        }
+      } catch {
+        screenshotReview = null;
+      }
+    }
+
     const designSlop = designReview
       ? detectFrontendSlop({ promptText, assistantText: activeResponse.content || "", receipt: activeReceipt, designReview })
       : null;
 
-    return { impact, review, designReview, designSlop };
+    return { impact, review, designReview, designSlop, screenshotReview, screenshotPath };
   }
 
-  let { impact, review, designReview, designSlop } = await analyze(receipt, response);
+  let { impact, review, designReview, designSlop, screenshotReview, screenshotPath } = await analyze(receipt, response);
   let designRevision = null;
 
   if (shouldAutoReviseFrontend({ designReview, slop: designSlop, revisionCount: 0 })) {
@@ -169,7 +195,8 @@ export async function runBuildWorkflow({
     const revisionPrompt = buildFrontendRevisionPrompt({
       originalPrompt: promptText,
       designReview,
-      slop: designSlop
+      slop: designSlop,
+      screenshotReview
     });
     const revisionCtx = {
       ...executionCtx,
@@ -187,7 +214,7 @@ export async function runBuildWorkflow({
     const revisedReceipt = await agent.toolRuntime.completeTurn({ signal: handlers.signal });
     if (revisedReceipt) {
       receipt = revisedReceipt;
-      ({ impact, review, designReview, designSlop } = await analyze(receipt, response));
+      ({ impact, review, designReview, designSlop, screenshotReview, screenshotPath } = await analyze(receipt, response));
       designRevision = {
         triggered: true,
         firstPassVerdict,
@@ -203,6 +230,8 @@ export async function runBuildWorkflow({
   if (review) updates.review = review;
   if (designReview) updates.designReview = designReview;
   if (designSlop) updates.designSlop = designSlop;
+  if (screenshotReview) updates.screenshotReview = screenshotReview;
+  if (screenshotPath) updates.screenshotPath = screenshotPath;
   if (designRevision) updates.designRevision = designRevision;
   let finalReceipt = receipt;
   if (Object.keys(updates).length > 0) {
@@ -229,6 +258,7 @@ export async function runBuildWorkflow({
     impact,
     review,
     designReview,
+    screenshotReview,
     impactSummary: impact ? summarizeImpactMap(impact) : null
   };
 }