@aayambansal/squint 0.3.4 → 0.4.1

package/README.md

@@ -133,6 +133,7 @@ squint config set autoDev true    # dev server starts with the TUI
 squint config set autoFix true    # errors auto-route back (max 2 tries)
 squint config set autoCheck false # skip the per-turn typecheck+lint pass
 squint config set autoReview true # big visual change → automatic self-critique
+squint config set fixModel haiku  # mechanical fix turns run on the cheap tier
 squint config set theme ocean     # amber · ocean · moss · rose · mono
 squint config set bell false      # no bell on turn completion
 squint doctor                     # engines + Chrome + WebSocket check
@@ -147,7 +148,10 @@ squint doctor --probe             # run every engine end to end, verify auth act
   order; `/queue clear` drops them. `Esc` interrupts the current turn.
 - **Editing**: a real line editor — arrows move, `alt+←/→` jump words, `ctrl+a/e/k/u/w`,
   `↑/↓` history. `ctrl+c` twice exits with a session summary.
-- **Problems**: findings from gates, the dev server, the runtime probe, and a11y sweeps
+- **Flows**: declare user journeys as six readable lines in `.squint/flows/`; `/flows`
+  replays them headlessly and failing steps join the fix loop. `/score` snapshots quality
+  deterministically.
+- **Problems**: findings from gates, the dev server, the runtime probe, a11y sweeps, and flows
   collect into a list — `/problems` shows it, `/fix` sends everything as one turn,
   `/fix <n>` targets one. The footer counts what's open.
 - **Sandbox**: `/sandbox on` and asks accumulate in a shadow worktree — the dev server,

package/dist/{cdp-UOIP4ZQZ.js → cdp-UGLMW5R5.js}

@@ -2,10 +2,12 @@
 import {
   cdpCapture,
   hasWebSocket,
-  pixelDiffPct
-} from "./chunk-XOVOQJFL.js";
+  pixelDiffPct,
+  runFlow
+} from "./chunk-7YKO5MMN.js";
 export {
   cdpCapture,
   hasWebSocket,
-  pixelDiffPct
+  pixelDiffPct,
+  runFlow
 };

package/dist/{chunk-XOVOQJFL.js → chunk-7YKO5MMN.js}

@@ -178,6 +178,64 @@ var describe = (value) => {
   }
   return String(value);
 };
+async function runFlow(chromePath, baseUrl, flow, outDir) {
+  const { stepExpression } = await import("./flows-6LK7NGWS.js");
+  const { child, wsUrl, profileDir } = await launchChrome(chromePath);
+  const shots = [];
+  let connection = null;
+  try {
+    connection = await CdpConnection.connect(wsUrl, 1e4);
+    const { targetId } = await connection.send("Target.createTarget", { url: "about:blank" });
+    const { sessionId } = await connection.send("Target.attachToTarget", { targetId, flatten: true });
+    await connection.send("Page.enable", {}, sessionId);
+    await connection.send(
+      "Emulation.setDeviceMetricsOverride",
+      { width: 1280, height: 800, deviceScaleFactor: 1, mobile: false },
+      sessionId
+    );
+    const base = baseUrl.replace(/\/+$/, "");
+    let stepNumber = 0;
+    for (const step of flow.steps) {
+      stepNumber += 1;
+      if (step.kind === "goto") {
+        const url = step.route === "/" ? base : `${base}${step.route}`;
+        await connection.send("Page.navigate", { url }, sessionId);
+        await new Promise((resolve) => setTimeout(resolve, 1800));
+        continue;
+      }
+      if (step.kind === "wait") {
+        await new Promise((resolve) => setTimeout(resolve, step.ms));
+        continue;
+      }
+      if (step.kind === "shot") {
+        const { data } = await connection.send("Page.captureScreenshot", { format: "png" }, sessionId);
+        const outPath = path.join(outDir, `flow-${flow.name}-${step.name}.png`);
+        fs.writeFileSync(outPath, Buffer.from(data, "base64"));
+        shots.push(outPath);
+        continue;
+      }
+      const expression = stepExpression(step);
+      if (!expression) continue;
+      const { result } = await connection.send(
+        "Runtime.evaluate",
+        { expression, returnByValue: true },
+        sessionId
+      );
+      const value = result?.value;
+      if (!value?.ok) {
+        return { ok: false, failedStep: stepNumber, detail: value?.detail ?? "step failed", shots };
+      }
+      await new Promise((resolve) => setTimeout(resolve, 300));
+    }
+    return { ok: true, shots };
+  } catch (err) {
+    return { ok: false, detail: err instanceof Error ? err.message : String(err), shots };
+  } finally {
+    connection?.close();
+    child.kill("SIGKILL");
+    setTimeout(() => fs.rmSync(profileDir, { recursive: true, force: true }), 500).unref?.();
+  }
+}
 async function pixelDiffPct(chromePath, pngA, pngB) {
   const { child, wsUrl, profileDir } = await launchChrome(chromePath);
   let connection = null;
@@ -420,6 +478,7 @@ async function cdpCapture(chromePath, url, outDir, viewports, settleMs = 2500, a
 
 export {
   hasWebSocket,
+  runFlow,
   pixelDiffPct,
   cdpCapture
 };

package/dist/{chunk-BNJGHNXB.js → chunk-SVKV77TO.js}

@@ -14,6 +14,8 @@ var COMMANDS = [
   { name: "shot", args: "[url]", group: "verify", description: "screenshot the app (or any url) at mobile/tablet/desktop" },
   { name: "review", args: "[focus]", group: "verify", description: "screenshots + the engine critiques its own rendered work" },
   { name: "polish", args: "[1-5]", group: "verify", description: "unattended rounds of review \u2192 fix (default 2)" },
+  { name: "score", group: "verify", description: "deterministic quality snapshot (problems, a11y, tells, runtime, LCP)" },
+  { name: "flows", args: "[name]", group: "verify", description: "replay declared .squint/flows/ journeys headlessly" },
   { name: "variants", args: "<2-4> <ask>", group: "explore", description: "parallel design explorations; apply/list/clean" },
   { name: "sandbox", args: "[on|diff|apply|discard]", group: "explore", description: "asks accumulate in a shadow worktree until you apply" },
   { name: "undo", group: "explore", description: "revert the last ask (files only)" },

package/dist/{chunk-SXF7CVRW.js → chunk-UTBTLCUO.js}

@@ -1,4 +1,7 @@
 #!/usr/bin/env node
+import {
+  ensureSquintIgnore
+} from "./chunk-O2S6PAJE.js";
 import {
   findChrome,
   screenshot
@@ -6,10 +9,7 @@ import {
 import {
   cdpCapture,
   hasWebSocket
-} from "./chunk-XOVOQJFL.js";
-import {
-  ensureSquintIgnore
-} from "./chunk-O2S6PAJE.js";
+} from "./chunk-7YKO5MMN.js";
 
 // src/preview/preview.ts
 import fs from "fs";
@@ -133,7 +133,7 @@ async function probeRuntime(url, cwd) {
 async function comparePulse(previous, current) {
   const chrome = findChrome();
   if (!chrome || !hasWebSocket()) return null;
-  const { pixelDiffPct } = await import("./cdp-UOIP4ZQZ.js");
+  const { pixelDiffPct } = await import("./cdp-UGLMW5R5.js");
   return pixelDiffPct(chrome, previous, current);
 }
 function buildRuntimeFixPrompt(report) {

package/dist/cli.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   completeCommand
-} from "./chunk-BNJGHNXB.js";
+} from "./chunk-SVKV77TO.js";
 import {
   applySandbox,
   discardSandbox,
@@ -42,7 +42,12 @@ import {
   comparePulse,
   probeRuntime,
   runtimeSummary
-} from "./chunk-SXF7CVRW.js";
+} from "./chunk-UTBTLCUO.js";
+import {
+  clearState,
+  loadState,
+  saveState
+} from "./chunk-O2S6PAJE.js";
 import {
   runAgent
 } from "./chunk-VH7OOFQP.js";
@@ -53,18 +58,13 @@ import {
   detectEngines,
   getEngine
 } from "./chunk-KVYGPLWW.js";
-import "./chunk-XOVOQJFL.js";
+import "./chunk-7YKO5MMN.js";
 import {
   enrich
 } from "./chunk-H5K55LXY.js";
 import {
   composePrompt
 } from "./chunk-P3H4N2EN.js";
-import {
-  clearState,
-  loadState,
-  saveState
-} from "./chunk-O2S6PAJE.js";
 
 // src/cli.tsx
 import { Command } from "commander";
@@ -238,7 +238,7 @@ function registerEnv(program2) {
       }
     }
     const { findChrome: findChrome2 } = await import("./chrome-SBV3H77F.js");
-    const { hasWebSocket } = await import("./cdp-UOIP4ZQZ.js");
+    const { hasWebSocket } = await import("./cdp-UGLMW5R5.js");
     const chrome = findChrome2();
     console.log(
       chrome ? `${pc2.green("\u2713")} Chrome ${pc2.dim(chrome)}` : `${pc2.yellow("\u25CB")} Chrome ${pc2.dim("\u2014 screenshots and runtime probing disabled")}`
@@ -461,7 +461,7 @@ function registerQuality(program2) {
     if (results.some((r) => !r.ok)) process.exitCode = 1;
   });
   program2.command("shot").description("Screenshot a running app at mobile/tablet/desktop viewports (+ .squint/routes)").argument("<url>", "URL of the running app (e.g. http://localhost:5173)").action(async (url) => {
-    const { captureViewports: captureViewports2 } = await import("./preview-S6FOTRRR.js");
+    const { captureViewports: captureViewports2 } = await import("./preview-6MML2NEG.js");
     const result = await captureViewports2(process.cwd(), url);
     if (!result) {
       console.error(pc4.red("\u2717 no Chrome/Chromium found"));
@@ -554,7 +554,7 @@ function registerRun(program2) {
 import pc6 from "picocolors";
 function registerScaffold(program2) {
   program2.command("init").description("Scaffold a new Vite + React + TS + Tailwind app with token-first CSS").argument("[dir]", "target directory", ".").option("--force", "write into a non-empty directory").option("--no-install", "skip npm install").action(async (dir, options) => {
-    const { installDependencies, writeTemplate } = await import("./init-LSYB32NS.js");
+    const { installDependencies, writeTemplate } = await import("./init-YB2IMA4N.js");
     let result;
     try {
       result = writeTemplate(dir, { force: options.force });
@@ -1474,6 +1474,81 @@ They are objective defects, not style preferences.`
         })();
         break;
       }
+      case "flows": {
+        if (!this.state.devUrl) {
+          this.push("error", "dev server not running \u2014 /dev first");
+          break;
+        }
+        void (async () => {
+          const { loadFlows } = await import("./flows-6LK7NGWS.js");
+          const flows = loadFlows(this.opts.cwd);
+          if (flows.length === 0) {
+            this.push("status", "no flows \u2014 add .squint/flows/<name>.flow (goto/click/fill/press/expect/shot lines), or ask the engine to write one");
+            return;
+          }
+          const chrome = findChrome();
+          if (!chrome) {
+            this.push("error", "no Chrome/Chromium found for flows");
+            return;
+          }
+          const { runFlow } = await import("./cdp-UGLMW5R5.js");
+          const { previewDir } = await import("./preview-6MML2NEG.js");
+          this.push("status", `replaying ${flows.length} flow(s)\u2026`);
+          this.notify({ running: true, runStartedAt: Date.now() });
+          const failures = [];
+          for (const flow of flows) {
+            const wanted = arg.trim();
+            if (wanted && flow.name !== wanted) continue;
+            const result = await runFlow(chrome, this.state.devUrl, flow, previewDir(this.opts.cwd));
+            if (result.ok) {
+              this.push("status", `\u2713 flow ${flow.name} \xB7 ${flow.steps.length} steps${result.shots.length > 0 ? ` \xB7 ${result.shots.length} shot(s)` : ""}`);
+              for (const shot of result.shots) this.push("image", shot);
+            } else {
+              const where = result.failedStep ? ` at step ${result.failedStep}` : "";
+              this.push("error", `\u2717 flow ${flow.name}${where}: ${result.detail}`);
+              failures.push(`Flow "${flow.name}" fails${where}: ${result.detail}. The flow file is .squint/flows/${flow.name}.flow \u2014 fix the app (or the flow if the UI legitimately changed).`);
+            }
+          }
+          this.notify({ running: false });
+          if (failures.length > 0) {
+            this.addProblem("flow", `${failures.length} flow(s) failing`, failures.join("\n\n"));
+            this.push("status", "/fix sends open problems to the engine \xB7 /problems lists them");
+          } else {
+            this.clearProblems("flow");
+          }
+          this.drainQueue();
+        })();
+        break;
+      }
+      case "score": {
+        if (!this.state.devUrl) {
+          this.push("error", "dev server not running \u2014 /dev first");
+          break;
+        }
+        void (async () => {
+          const result = await this.capture();
+          if (!result) return;
+          const a11yCount = result.a11y?.length ?? 0;
+          const slopCount = result.slop?.length ?? 0;
+          const runtimeBad = result.runtime ? runtimeSummary(result.runtime) ? 1 : 0 : 0;
+          const problems = this.state.problems.length;
+          const score = Math.max(
+            0,
+            5 - problems * 0.75 - Math.min(a11yCount, 4) * 0.25 - Math.min(slopCount, 4) * 0.25 - runtimeBad
+          );
+          const lcp = this.lastPerf?.lcpMs !== void 0 ? ` \xB7 LCP ${this.lastPerf.lcpMs}ms` : "";
+          this.push(
+            "status",
+            [
+              `score: ${score.toFixed(2)}/5 (deterministic axes)`,
+              `  open problems: ${problems}${problems > 0 ? ` (${this.state.problems.map((p) => p.source).join(", ")})` : ""}`,
+              `  a11y findings: ${a11yCount} \xB7 distinctiveness tells: ${slopCount} \xB7 runtime ${runtimeBad ? "dirty" : "clean"}${lcp}`,
+              "  /review judges what numbers cannot \u2014 hierarchy, taste, coherence"
+            ].join("\n")
+          );
+        })();
+        break;
+      }
       case "polish": {
         const rounds = arg ? Number.parseInt(arg, 10) : 2;
         if (!Number.isInteger(rounds) || rounds < 1 || rounds > 5) {
@@ -1739,7 +1814,7 @@ ${sandboxFiles(this.opts.cwd).join("\n")}`);
         this.notify({ items: [], totals: { costUsd: 0, turns: 0 } });
         break;
       case "help": {
-        void import("./commands-3HHBHBQV.js").then(({ commandHelp }) => this.push("status", commandHelp()));
+        void import("./commands-DE5Q7VWY.js").then(({ commandHelp }) => this.push("status", commandHelp()));
         break;
       }
       case "quit":
@@ -2358,7 +2433,7 @@ function registerTui(program2) {
 }
 
 // src/cli.tsx
-var VERSION = true ? "0.3.4" : "0.0.0-dev";
+var VERSION = true ? "0.4.1" : "0.0.0-dev";
 var program = new Command();
 program.name("squint").description("Lovable for your terminal \u2014 a frontend harness on top of Claude Code, Codex, and friends.").version(VERSION);
 registerRun(program);

package/dist/{commands-3HHBHBQV.js → commands-DE5Q7VWY.js}

@@ -3,7 +3,7 @@ import {
   COMMANDS,
   commandHelp,
   completeCommand
-} from "./chunk-BNJGHNXB.js";
+} from "./chunk-SVKV77TO.js";
 export {
   COMMANDS,
   commandHelp,

package/dist/flows-6LK7NGWS.js

@@ -0,0 +1,147 @@
+#!/usr/bin/env node
+
+// src/preview/flows.ts
+import fs from "fs";
+import path from "path";
+function parseFlow(name, text) {
+  const steps = [];
+  for (const rawLine of text.split("\n")) {
+    const line = rawLine.trim();
+    if (line.length === 0 || line.startsWith("#")) continue;
+    const [verb, ...rest] = line.split(/\s+/);
+    const arg = rest.join(" ");
+    switch (verb) {
+      case "goto":
+        steps.push({ kind: "goto", route: arg.startsWith("/") ? arg : `/${arg}` });
+        break;
+      case "click":
+        steps.push({ kind: "click", target: arg });
+        break;
+      case "fill": {
+        const [selector, ...valueParts] = rest;
+        if (!selector || valueParts.length === 0) return null;
+        steps.push({ kind: "fill", selector, value: valueParts.join(" ") });
+        break;
+      }
+      case "press":
+        steps.push({ kind: "press", key: arg });
+        break;
+      case "expect":
+        steps.push({ kind: "expect", text: arg });
+        break;
+      case "shot":
+        steps.push({ kind: "shot", name: arg.replace(/[^a-zA-Z0-9-]/g, "-") });
+        break;
+      case "hover":
+        steps.push({ kind: "hover", target: arg });
+        break;
+      case "scroll":
+        steps.push({ kind: "scroll", target: arg || "bottom" });
+        break;
+      case "wait": {
+        const ms = Number.parseInt(arg, 10);
+        if (!Number.isInteger(ms) || ms < 0 || ms > 1e4) return null;
+        steps.push({ kind: "wait", ms });
+        break;
+      }
+      default:
+        return null;
+    }
+  }
+  return steps.length > 0 ? { name, steps } : null;
+}
+function loadFlows(cwd) {
+  const dir = path.join(cwd, ".squint", "flows");
+  let entries;
+  try {
+    entries = fs.readdirSync(dir).filter((f) => f.endsWith(".flow"));
+  } catch {
+    return [];
+  }
+  const flows = [];
+  for (const entry of entries.sort()) {
+    try {
+      const flow = parseFlow(entry.replace(/\.flow$/, ""), fs.readFileSync(path.join(dir, entry), "utf8"));
+      if (flow) flows.push(flow);
+    } catch {
+    }
+  }
+  return flows;
+}
+function stepExpression(step) {
+  switch (step.kind) {
+    case "click":
+      return `(() => {
+        const target = ${JSON.stringify(step.target)};
+        let el = null;
+        try { el = document.querySelector(target); } catch {}
+        if (!el) {
+          const all = [...document.querySelectorAll('a, button, [role=button], input[type=submit], summary, label')];
+          el = all.find((e) => (e.textContent || '').trim().toLowerCase().includes(target.toLowerCase()));
+        }
+        if (!el) return { ok: false, detail: 'no element matching ' + target };
+        el.click();
+        return { ok: true };
+      })()`;
+    case "fill":
+      return `(() => {
+        const el = document.querySelector(${JSON.stringify(step.selector)});
+        if (!el) return { ok: false, detail: 'no element matching ${step.selector}' };
+        const setter = Object.getOwnPropertyDescriptor(el.constructor.prototype, 'value')?.set;
+        if (setter) setter.call(el, ${JSON.stringify(step.value)}); else el.value = ${JSON.stringify(step.value)};
+        el.dispatchEvent(new Event('input', { bubbles: true }));
+        el.dispatchEvent(new Event('change', { bubbles: true }));
+        return { ok: true };
+      })()`;
+    case "expect":
+      return `(() => {
+        const wanted = ${JSON.stringify(step.text)}.toLowerCase();
+        const ok = (document.body.innerText || '').toLowerCase().includes(wanted);
+        return ok ? { ok: true } : { ok: false, detail: 'page does not show: ' + ${JSON.stringify(step.text)} };
+      })()`;
+    case "press":
+      return `(() => {
+        const key = ${JSON.stringify(step.key)};
+        const el = document.activeElement || document.body;
+        for (const type of ['keydown', 'keypress', 'keyup']) {
+          el.dispatchEvent(new KeyboardEvent(type, { key, bubbles: true, cancelable: true }));
+        }
+        return { ok: true };
+      })()`;
+    case "hover":
+      return `(() => {
+        const target = ${JSON.stringify(step.target)};
+        let el = null;
+        try { el = document.querySelector(target); } catch {}
+        if (!el) {
+          const all = [...document.querySelectorAll('*')];
+          el = all.find((e) => e.children.length === 0 && (e.textContent || '').trim().toLowerCase().includes(target.toLowerCase()));
+        }
+        if (!el) return { ok: false, detail: 'no element matching ' + target };
+        for (const type of ['pointerover', 'mouseover', 'mouseenter']) {
+          el.dispatchEvent(new MouseEvent(type, { bubbles: type !== 'mouseenter' }));
+        }
+        return { ok: true };
+      })()`;
+    case "scroll":
+      return `(() => {
+        const target = ${JSON.stringify(step.target)};
+        if (target === 'bottom') { window.scrollTo(0, document.body.scrollHeight); return { ok: true }; }
+        if (target === 'top') { window.scrollTo(0, 0); return { ok: true }; }
+        let el = null;
+        try { el = document.querySelector(target); } catch {}
+        if (!el) return { ok: false, detail: 'no element matching ' + target };
+        el.scrollIntoView({ block: 'center' });
+        return { ok: true };
+      })()`;
+    case "goto":
+    case "shot":
+    case "wait":
+      return null;
+  }
+}
+export {
+  loadFlows,
+  parseFlow,
+  stepExpression
+};

package/dist/{init-LSYB32NS.js → init-YB2IMA4N.js}

@@ -139,6 +139,12 @@ body {
 dist/
 *.log
 .DS_Store
+`,
+    ".squint/flows/home.flow": `# The starter journey: replayed headlessly by /flows after every change.
+# Grow this file as the app grows \u2014 or ask the engine to.
+goto /
+expect Ready
+shot home
 `
   };
 }

package/dist/{preview-S6FOTRRR.js → preview-6MML2NEG.js}

@@ -10,11 +10,11 @@ import {
   probeRuntime,
   routeShotName,
   runtimeSummary
-} from "./chunk-SXF7CVRW.js";
+} from "./chunk-UTBTLCUO.js";
+import "./chunk-O2S6PAJE.js";
 import "./chunk-IMDRXXFU.js";
 import "./chunk-KVYGPLWW.js";
-import "./chunk-XOVOQJFL.js";
-import "./chunk-O2S6PAJE.js";
+import "./chunk-7YKO5MMN.js";
 export {
   VIEWPORTS,
   buildReviewPrompt,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aayambansal/squint",
-  "version": "0.3.4",
+  "version": "0.4.1",
   "description": "Lovable for your terminal — a frontend harness on top of Claude Code, Codex, and other coding agents.",
   "type": "module",
   "license": "MIT",