@aayambansal/squint 0.4.3 → 0.4.5

package/README.md

@@ -169,7 +169,13 @@ squint doctor --probe             # run every engine end to end, verify auth act
   design token, and the mechanical anti-slop sweep flags generic-AI tells as
   distinctiveness debt in `/review`. The phantom-class check diffs every DOM class
   against the compiled CSS — hallucinated utilities surface as named problems instead
-  of silently unstyled elements.
+  of silently unstyled elements — and version-aware rule-packs catch Tailwind v3
+  muscle memory in v4 projects at gate time, rename in hand. view-transition breakage (duplicate names, missing reduced-motion handling) is
+  flagged from the live page, and on Next 16+ the framework's own `/_next/mcp`
+  channel feeds structured errors straight into the fix loop. `/context` itemizes
+  the injected-context bill per source, with staleness warnings.
+- **Visual approval**: engines ask before contested changes — the request renders
+  with its screenshot, `/yes` / `/no` answer it, the ledger remembers.
 - **The design ledger**: `/decide` (plus chosen variants, rollbacks, accepted
   sandboxes) appends to a committed `.squint/design-log.jsonl`; recent decisions ride
   into every ask so they stop getting silently undone between sessions.

package/dist/{cdp-TPP2RGSR.js → cdp-Q4H6ZHPT.js}

@@ -4,7 +4,7 @@ import {
   hasWebSocket,
   pixelDiffPct,
   runFlow
-} from "./chunk-Y47X4ENN.js";
+} from "./chunk-RQHOE5MV.js";
 export {
   cdpCapture,
   hasWebSocket,

package/dist/{chunk-O7NWGLS3.js → chunk-43NQNIJY.js}

@@ -28,6 +28,8 @@ var COMMANDS = [
   { name: "find", args: "<term>", group: "session", description: "search this session and saved transcripts" },
   { name: "decide", args: "<text>", group: "session", description: "record a design decision; injected into every future ask" },
   { name: "context", group: "session", description: "what squint injects per ask, token-costed, with staleness warnings" },
+  { name: "yes", args: "[note]", group: "build", description: "approve the engine's pending visual-approval request" },
+  { name: "no", args: "[note]", group: "build", description: "reject the engine's pending visual-approval request" },
   { name: "resume", group: "session", description: "pick up the previous session for this repo" },
   { name: "clear", group: "session", description: "new session (transcript, totals, persisted state)" },
   { name: "help", group: "session", description: "list commands" },

package/dist/{chunk-WCLQZFOR.js → chunk-CV5WVKHU.js}

@@ -9,7 +9,7 @@ import {
 import {
   cdpCapture,
   hasWebSocket
-} from "./chunk-Y47X4ENN.js";
+} from "./chunk-RQHOE5MV.js";
 
 // src/preview/preview.ts
 import fs from "fs";
@@ -47,7 +47,7 @@ async function captureViewports(cwd, url) {
   const base = url.replace(/\/+$/, "");
   if (hasWebSocket()) {
     try {
-      const { report, shots: shots2, a11y, slop, narration, phantoms } = await cdpCapture(chrome, url, dir, VIEWPORTS, 2500, true);
+      const { report, shots: shots2, a11y, slop, narration, phantoms, viewTransitions, components } = await cdpCapture(chrome, url, dir, VIEWPORTS, 2500, true);
       const errors2 = [];
       for (const route of routes.slice(1)) {
         try {
@@ -62,7 +62,7 @@ async function captureViewports(cwd, url) {
           errors2.push(`${route}: capture failed`);
         }
       }
-      return { shots: shots2, errors: errors2, runtime: report, a11y, slop, narration, phantoms };
+      return { shots: shots2, errors: errors2, runtime: report, a11y, slop, narration, phantoms, viewTransitions, components };
     } catch {
     }
   }
@@ -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-TPP2RGSR.js");
+  const { pixelDiffPct } = await import("./cdp-Q4H6ZHPT.js");
   return pixelDiffPct(chrome, previous, current);
 }
 function buildRuntimeFixPrompt(report) {
@@ -161,6 +161,26 @@ ${narration.join("\n")}
 
 Judge this narration as an experience: does the reading order make sense? do names actually describe their targets? is anything announced as "(no accessible name)"? Fix real incoherence \u2014 this is how non-visual users meet the page.`;
 }
+function componentSection(components) {
+  if (!components || components.length === 0) return "";
+  return `
+
+## Component map (from React fibers)
+
+${components.join("\n")}
+
+Use these owner chains to name the component (and file) an issue lives in instead of describing regions.`;
+}
+function vtSection(viewTransitions) {
+  if (!viewTransitions || viewTransitions.length === 0) return "";
+  return `
+
+## View-transition findings
+
+${viewTransitions.join("\n")}
+
+Duplicate names abort the whole transition at runtime; missing reduced-motion handling animates for users who opted out. Fix the names / add the media query rather than removing the transitions.`;
+}
 function phantomSection(phantoms) {
   if (!phantoms || phantoms.length === 0) return "";
   return `
@@ -181,13 +201,13 @@ ${findings.join("\n")}
 
 These patterns make the page read as template output. Rework them within the committed design direction \u2014 this is style debt, not a defect list.`;
 }
-function buildReviewPrompt(shots, extra, runtime, a11y, slop, narration, phantoms) {
+function buildReviewPrompt(shots, extra, runtime, a11y, slop, narration, phantoms, viewTransitions, components) {
   const list = shots.map((s) => `- ${s.name}: ${s.path}`).join("\n");
   return `Screenshots of the running app were just captured:
 
 ${list}
 
-Read each screenshot and review the rendered UI against the design standards you were given. Check: visual hierarchy and spacing rhythm, typography, color and contrast, alignment, empty-looking or broken regions, and whether the mobile capture shows horizontal overflow or cramped layout. List the concrete issues you can SEE (not hypothetical ones), ranked by visual impact${extra ? `, with special attention to: ${extra}` : ""}. Then fix them and verify the app still builds.${runtimeSection(runtime)}${a11ySection(a11y)}${slopSection(slop)}${narrationSection(narration)}${phantomSection(phantoms)}`;
+Read each screenshot and review the rendered UI against the design standards you were given. Check: visual hierarchy and spacing rhythm, typography, color and contrast, alignment, empty-looking or broken regions, and whether the mobile capture shows horizontal overflow or cramped layout. List the concrete issues you can SEE (not hypothetical ones), ranked by visual impact${extra ? `, with special attention to: ${extra}` : ""}. Then fix them and verify the app still builds.${runtimeSection(runtime)}${a11ySection(a11y)}${slopSection(slop)}${narrationSection(narration)}${phantomSection(phantoms)}${vtSection(viewTransitions)}${componentSection(components)}`;
 }
 
 export {

package/dist/{chunk-Y47X4ENN.js → chunk-RQHOE5MV.js}

@@ -360,6 +360,83 @@ var PHANTOM_AUDIT = `(() => {
   }
   return out;
 })()`;
+var VT_AUDIT = `(() => {
+  const findings = [];
+  const names = new Map();
+  for (const el of document.querySelectorAll('*')) {
+    const name = getComputedStyle(el).viewTransitionName;
+    if (name && name !== 'none' && name !== 'auto') {
+      const label = el.tagName.toLowerCase() + (el.id ? '#' + el.id : '');
+      const list = names.get(name) || [];
+      list.push(label);
+      names.set(name, list);
+    }
+  }
+  for (const [name, els] of names) {
+    if (els.length > 1) {
+      findings.push('duplicate view-transition-name "' + name + '" on ' + els.length + ' elements (' + els.slice(0, 3).join(', ') + ') \u2014 the browser skips the entire transition');
+    }
+  }
+  let vtCss = false;
+  let reducedGuard = false;
+  const walk = (list, inReduced) => {
+    for (const rule of list) {
+      const media = rule.media && rule.media.mediaText || '';
+      const nowReduced = inReduced || /prefers-reduced-motion/.test(media);
+      if (rule.cssText && rule.cssText.includes('::view-transition')) {
+        vtCss = true;
+        if (nowReduced) reducedGuard = true;
+      }
+      if (nowReduced && rule.cssText && /animation|transition/.test(rule.cssText)) reducedGuard = true;
+      if (rule.cssRules) walk(rule.cssRules, nowReduced);
+    }
+  };
+  for (const sheet of document.styleSheets) {
+    let rules; try { rules = sheet.cssRules; } catch { continue; }
+    try { walk(rules, false); } catch {}
+  }
+  if ((names.size > 0 || vtCss) && !reducedGuard) {
+    findings.push('view transitions declared with no prefers-reduced-motion handling anywhere in the CSS \u2014 motion-sensitive users get the full animation');
+  }
+  return findings;
+})()`;
+var FIBER_AUDIT = `(() => {
+  const fiberKey = (el) => Object.keys(el).find((k) => k.startsWith('__reactFiber$'));
+  const all = document.querySelectorAll('*');
+  let reactSeen = false;
+  for (let i = 0; i < all.length && i < 300; i++) {
+    if (fiberKey(all[i])) { reactSeen = true; break; }
+  }
+  if (!reactSeen) return [];
+  const nameOf = (t) => {
+    if (typeof t === 'function') return t.displayName || t.name || '';
+    if (t && typeof t === 'object') return t.displayName || (t.render && (t.render.displayName || t.render.name)) || '';
+    return '';
+  };
+  const chainFor = (el) => {
+    const key = fiberKey(el);
+    if (!key) return null;
+    let fiber = el[key];
+    const names = [];
+    let hops = 0;
+    while (fiber && hops < 50 && names.length < 3) {
+      const n = nameOf(fiber.type);
+      if (n && !names.includes(n)) names.push(n);
+      fiber = fiber.return;
+      hops++;
+    }
+    return names.length > 0 ? names.join(' < ') : null;
+  };
+  const out = [];
+  for (const sel of ['header', 'nav', 'main', 'footer', 'h1', 'h2', 'form', 'aside', '[role="dialog"]', 'table']) {
+    const el = document.querySelector(sel);
+    if (!el) continue;
+    const chain = chainFor(el);
+    if (chain) out.push(sel + ' \u2014 ' + chain);
+    if (out.length >= 10) break;
+  }
+  return out;
+})()`;
 async function cdpCapture(chromePath, url, outDir, viewports, settleMs = 2500, audit = false) {
   const { child, wsUrl, profileDir } = await launchChrome(chromePath);
   const report = { consoleErrors: [], pageErrors: [], failedRequests: [] };
@@ -369,6 +446,8 @@ async function cdpCapture(chromePath, url, outDir, viewports, settleMs = 2500, a
   let perf = {};
   let narration = [];
   let phantoms = [];
+  let viewTransitions = [];
+  let components = [];
   const requests = /* @__PURE__ */ new Map();
   let connection = null;
   try {
@@ -450,6 +529,24 @@ async function cdpCapture(chromePath, url, outDir, viewports, settleMs = 2500, a
         if (Array.isArray(result?.value)) phantoms = result.value.map(String);
       } catch {
       }
+      try {
+        const { result } = await connection.send(
+          "Runtime.evaluate",
+          { expression: VT_AUDIT, returnByValue: true },
+          sessionId
+        );
+        if (Array.isArray(result?.value)) viewTransitions = result.value.map(String);
+      } catch {
+      }
+      try {
+        const { result } = await connection.send(
+          "Runtime.evaluate",
+          { expression: FIBER_AUDIT, returnByValue: true },
+          sessionId
+        );
+        if (Array.isArray(result?.value)) components = result.value.map(String);
+      } catch {
+      }
       try {
         await connection.send("Accessibility.enable", {}, sessionId);
         const { nodes } = await connection.send("Accessibility.getFullAXTree", {}, sessionId);
@@ -514,7 +611,7 @@ async function cdpCapture(chromePath, url, outDir, viewports, settleMs = 2500, a
     child.kill("SIGKILL");
     setTimeout(() => fs.rmSync(profileDir, { recursive: true, force: true }), 500).unref?.();
   }
-  return { report, shots, a11y, slop, perf, narration, phantoms };
+  return { report, shots, a11y, slop, perf, narration, phantoms, viewTransitions, components };
 }
 
 export {

package/dist/{chunk-YT6K2YIS.js → chunk-ZLEP2TWF.js}

@@ -156,6 +156,11 @@ ${locks.map((l) => `- ${l}`).join("\n")}
 If the task appears to require changing them, stop and explain instead.`
     );
   }
+  parts.push(
+    `## Requesting visual approval
+
+For a visual decision you should not make alone (a redesign direction, removing something deliberate, reversing a design decision on record): write .squint/approval-request.json containing {"summary": "<one line>", "screenshot": "<path, optional>"} and end your turn immediately without making the change. The user's verdict arrives as the next message.`
+  );
   const matched = matchSkills(loadSkills(cwd), ask);
   for (const skill of matched) {
     parts.push(`## Project notes: ${skill.name}

package/dist/cli.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   completeCommand
-} from "./chunk-O7NWGLS3.js";
+} from "./chunk-43NQNIJY.js";
 import {
   applySandbox,
   discardSandbox,
@@ -42,7 +42,7 @@ import {
   comparePulse,
   probeRuntime,
   runtimeSummary
-} from "./chunk-WCLQZFOR.js";
+} from "./chunk-CV5WVKHU.js";
 import {
   clearState,
   loadState,
@@ -58,11 +58,11 @@ import {
   detectEngines,
   getEngine
 } from "./chunk-KVYGPLWW.js";
-import "./chunk-Y47X4ENN.js";
+import "./chunk-RQHOE5MV.js";
 import {
   appendDecision,
   enrich
-} from "./chunk-YT6K2YIS.js";
+} from "./chunk-ZLEP2TWF.js";
 import "./chunk-K5QJMSJH.js";
 import {
   composePrompt
@@ -240,7 +240,7 @@ function registerEnv(program2) {
       }
     }
     const { findChrome: findChrome2 } = await import("./chrome-SBV3H77F.js");
-    const { hasWebSocket } = await import("./cdp-TPP2RGSR.js");
+    const { hasWebSocket } = await import("./cdp-Q4H6ZHPT.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")}`
@@ -264,7 +264,7 @@ import pc3 from "picocolors";
 function registerProject(program2) {
   const skillsCommand = program2.command("skills").description("Project knowledge injected into asks (.squint/rules.md + .squint/skills/)");
   skillsCommand.command("list").description("Show always-on rules and trigger-matched skills").action(async () => {
-    const { loadRules, loadSkills } = await import("./skills-GTTF4PNU.js");
+    const { loadRules, loadSkills } = await import("./skills-6NZP67QT.js");
     const cwd = process.cwd();
     const rules = loadRules(cwd);
     console.log(
@@ -280,22 +280,22 @@ function registerProject(program2) {
     }
   });
   skillsCommand.command("init").description("Scaffold .squint/rules.md and an example skill").action(async () => {
-    const fs3 = await import("fs");
+    const fs4 = await import("fs");
     const nodePath = await import("path");
     const cwd = process.cwd();
     const skillsDir = nodePath.join(cwd, ".squint", "skills");
-    fs3.mkdirSync(skillsDir, { recursive: true });
+    fs4.mkdirSync(skillsDir, { recursive: true });
     const rules = nodePath.join(cwd, ".squint", "rules.md");
-    if (!fs3.existsSync(rules)) {
-      fs3.writeFileSync(
+    if (!fs4.existsSync(rules)) {
+      fs4.writeFileSync(
         rules,
         "# Project rules\n\nThese ride along on every squint ask. Keep them short \u2014 cut anything that would not cause a mistake if removed.\n"
       );
       console.log(pc3.green("\u2713 .squint/rules.md"));
     }
     const example = nodePath.join(skillsDir, "example.md");
-    if (!fs3.existsSync(example)) {
-      fs3.writeFileSync(
+    if (!fs4.existsSync(example)) {
+      fs4.writeFileSync(
         example,
         "---\ntriggers: example, sample\n---\n\nThis note is injected only when an ask mentions one of the triggers above.\nDocument the parts of this repo an agent would otherwise rediscover every time:\nwhere state lives, which helpers to reuse, what not to touch.\n"
       );
@@ -304,7 +304,7 @@ function registerProject(program2) {
     console.log(pc3.dim("rules are always-on; skills inject when an ask mentions a trigger"));
   });
   program2.command("brief").description("Set a committed design direction for this project (.squint/brief.md)").argument("[family]", "aesthetic family id (omit to list)").option("--force", "overwrite an existing project brief").action(async (familyId, options) => {
-    const fs3 = await import("fs");
+    const fs4 = await import("fs");
     const nodePath = await import("path");
     const { FAMILIES, getFamily, renderFamilyBrief } = await import("./families-3ARYRBMH.js");
     if (!familyId) {
@@ -322,13 +322,13 @@ function registerProject(program2) {
       return;
     }
     const target = nodePath.join(process.cwd(), ".squint", "brief.md");
-    if (fs3.existsSync(target) && !options.force) {
+    if (fs4.existsSync(target) && !options.force) {
       console.error(pc3.red(`\u2717 ${target} exists \u2014 use --force to overwrite`));
       process.exitCode = 1;
       return;
     }
-    fs3.mkdirSync(nodePath.dirname(target), { recursive: true });
-    fs3.writeFileSync(target, renderFamilyBrief(family) + "\n");
+    fs4.mkdirSync(nodePath.dirname(target), { recursive: true });
+    fs4.writeFileSync(target, renderFamilyBrief(family) + "\n");
     console.log(pc3.green(`\u2713 ${family.name} direction written to .squint/brief.md`));
     console.log(pc3.dim("every squint ask in this repo now holds this direction \u2014 edit the file to remix"));
   });
@@ -463,7 +463,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-SKHIXVCE.js");
+    const { captureViewports: captureViewports2 } = await import("./preview-ZUCVWGZG.js");
     const result = await captureViewports2(process.cwd(), url);
     if (!result) {
       console.error(pc4.red("\u2717 no Chrome/Chromium found"));
@@ -581,21 +581,21 @@ Next: ${pc6.bold(`${cd}${options.install ? "" : "npm install && "}squint`)}`);
     console.log(pc6.dim("then describe what to build \u2014 /dev starts the preview server"));
   });
   program2.command("tag").description("Add the element picker to this Vite app (Alt+S in the browser \u2192 click \u2192 file:line:col)").action(async () => {
-    const fs3 = await import("fs");
+    const fs4 = await import("fs");
     const nodePath = await import("path");
     const { patchViteConfig, TAGGER_FILENAME, TAGGER_SOURCE } = await import("./source-ZZU245VN.js");
     const cwd = process.cwd();
     const taggerPath = nodePath.join(cwd, TAGGER_FILENAME);
-    fs3.writeFileSync(taggerPath, TAGGER_SOURCE);
+    fs4.writeFileSync(taggerPath, TAGGER_SOURCE);
     console.log(pc6.green(`\u2713 ${TAGGER_FILENAME} written`));
-    const configPath = ["vite.config.ts", "vite.config.js", "vite.config.mjs"].map((name) => nodePath.join(cwd, name)).find((candidate) => fs3.existsSync(candidate));
+    const configPath = ["vite.config.ts", "vite.config.js", "vite.config.mjs"].map((name) => nodePath.join(cwd, name)).find((candidate) => fs4.existsSync(candidate));
     if (!configPath) {
       console.log(pc6.yellow("\u25CB no vite config found \u2014 add the plugin manually:"));
       console.log(pc6.dim(`  import squintTagger from './${TAGGER_FILENAME}'
   plugins: [squintTagger(), \u2026]`));
       return;
     }
-    const source = fs3.readFileSync(configPath, "utf8");
+    const source = fs4.readFileSync(configPath, "utf8");
     const patched = patchViteConfig(source);
     if (patched === "already") {
       console.log(pc6.dim("vite config already wired"));
@@ -604,7 +604,7 @@ Next: ${pc6.bold(`${cd}${options.install ? "" : "npm install && "}squint`)}`);
       console.log(pc6.dim(`  import squintTagger from './${TAGGER_FILENAME}'
   plugins: [squintTagger(), \u2026]`));
     } else {
-      fs3.writeFileSync(configPath, patched);
+      fs4.writeFileSync(configPath, patched);
       console.log(pc6.green(`\u2713 ${nodePath.basename(configPath)} wired`));
     }
     console.log(
@@ -623,6 +623,7 @@ import path4 from "path";
 import { useMemo, useRef, useState as useState2, useSyncExternalStore } from "react";
 
 // src/session/engine.ts
+import fs3 from "fs";
 import path3 from "path";
 
 // src/session/hooks.ts
@@ -711,6 +712,7 @@ var Session = class {
   checkpoints = [];
   fixAttempts = 0;
   reviewTipShown = false;
+  pendingApproval = null;
   lastPulse = null;
   lastPerf = null;
   autoReviewedThisAsk = false;
@@ -825,7 +827,7 @@ ${question}`,
         return;
       }
       await this.runTurn(
-        buildReviewPrompt(result.shots, void 0, result.runtime, result.a11y, result.slop, result.narration, result.phantoms),
+        buildReviewPrompt(result.shots, void 0, result.runtime, result.a11y, result.slop, result.narration, result.phantoms, result.viewTransitions, result.components),
         `\u{1F441} polish round ${round}/${rounds}`
       );
     }
@@ -1041,6 +1043,21 @@ ${question}`,
       const stat = checkpoint ? diffStatSince(this.opts.cwd, checkpoint.snapshot) : null;
       const work = stat ? ` \xB7 ${stat}` : this.turnEdits > 0 ? ` \xB7 ${this.turnEdits} edit${this.turnEdits === 1 ? "" : "s"}` : this.turnTools > 0 ? ` \xB7 ${this.turnTools} tool call${this.turnTools === 1 ? "" : "s"}` : "";
       this.push("status", `done${secs}${cost}${work}`);
+      try {
+        const reqPath = path3.join(this.opts.cwd, ".squint", "approval-request.json");
+        if (fs3.existsSync(reqPath)) {
+          const req = JSON.parse(fs3.readFileSync(reqPath, "utf8"));
+          fs3.rmSync(reqPath, { force: true });
+          if (typeof req?.summary === "string" && req.summary.length > 0) {
+            this.pendingApproval = req.summary;
+            const shot = typeof req.screenshot === "string" ? path3.resolve(this.execCwd(), req.screenshot) : null;
+            if (shot && fs3.existsSync(shot)) this.push("image", shot);
+            this.push("status", `\u23F8 approval requested: ${req.summary}
+/yes approves \xB7 /no rejects \xB7 or type feedback`);
+          }
+        }
+      } catch {
+      }
       if (checkpoint) {
         try {
           const { driftSummary, loadTokenIndex, scanDrift } = await import("./tokens-XYGRRAXC.js");
@@ -1132,6 +1149,18 @@ ${rulePackSummary(soft)}`);
     if (result.error !== "interrupted" && dev && (dev.state === "running" || dev.state === "starting")) {
       await delay(1500);
       const errors = dev.errorsSince(runStart);
+      if (this.state.devUrl) {
+        try {
+          const { hasNextMcp, probeNextMcp } = await import("./nextMcp-42Y63M7W.js");
+          if (hasNextMcp(this.execCwd())) {
+            const mcp = await probeNextMcp(this.state.devUrl);
+            if (mcp.available && mcp.errors.length > 0) {
+              for (const err of mcp.errors) errors.push(`[next mcp] ${err}`);
+            }
+          }
+        } catch {
+        }
+      }
       if (errors.length > 0) {
         this.addProblem(
           "dev",
@@ -1163,7 +1192,7 @@ ${errors.slice(-5).join("\n")}`);
               const captureResult = await this.capture();
               if (captureResult) {
                 await this.runTurn(
-                  buildReviewPrompt(captureResult.shots, void 0, captureResult.runtime, captureResult.a11y, captureResult.slop, captureResult.narration, captureResult.phantoms),
+                  buildReviewPrompt(captureResult.shots, void 0, captureResult.runtime, captureResult.a11y, captureResult.slop, captureResult.narration, captureResult.phantoms, captureResult.viewTransitions, captureResult.components),
                   "\u{1F441} auto-review rendered UI"
                 );
               }
@@ -1303,6 +1332,24 @@ ${errors.slice(-5).join("\n")}`);
         this.push("status", "runtime clean \u2014 no console errors, exceptions, or failed requests");
       }
     }
+    const vtHard = (result.viewTransitions ?? []).filter((f) => f.startsWith("duplicate"));
+    if (vtHard.length > 0) {
+      this.push("error", `view transitions: ${vtHard.length} broken
+${vtHard.join("\n")}`);
+      this.addProblem(
+        "runtime",
+        `${vtHard.length} view transition(s) the browser will skip`,
+        `Duplicate view-transition-name values make the browser abort the entire transition at runtime:
+
+${vtHard.join("\n")}
+
+Give each simultaneously rendered element a unique name (or scope names per item, e.g. per list key). Do not remove the transitions.`
+      );
+    }
+    const vtSoft = (result.viewTransitions ?? []).filter((f) => !f.startsWith("duplicate"));
+    if (vtSoft.length > 0) {
+      this.push("status", `view transitions: ${vtSoft.join("; ")}`);
+    }
     if (result.phantoms && result.phantoms.length > 0) {
       this.push("error", `phantom classes: ${result.phantoms.length} (in the DOM, absent from CSS)
 ${result.phantoms.slice(0, 5).join("\n")}`);
@@ -1433,13 +1480,32 @@ They are objective defects, not style preferences.`
         break;
       }
       case "context": {
-        import("./contextDoctor-M3R3PICP.js").then(({ contextReport, formatContextReport }) => {
+        import("./contextDoctor-U3YTDFVG.js").then(({ contextReport, formatContextReport }) => {
           this.push("status", formatContextReport(contextReport(this.execCwd())));
         }).catch((error) => {
           this.push("status", `context report failed: ${error instanceof Error ? error.message : String(error)}`);
         });
         break;
       }
+      case "yes":
+      case "no": {
+        if (!this.pendingApproval) {
+          this.push("status", `nothing awaiting approval \u2014 /${name} answers an engine's approval request`);
+          break;
+        }
+        const summary = this.pendingApproval;
+        this.pendingApproval = null;
+        const approved = name === "yes";
+        appendDecision(this.opts.cwd, {
+          decision: `${approved ? "approved" : "rejected"}: ${summary}${arg ? ` \u2014 ${arg}` : ""}`,
+          source: "approval"
+        });
+        void this.runTurn(
+          approved ? `Approved: "${summary}". Proceed.${arg ? ` Note from the user: ${arg}` : ""}` : `Rejected: "${summary}". Do not proceed with it.${arg ? ` The user says: ${arg}` : " Stop and await direction."}`,
+          approved ? `\u2713 approved${arg ? ` \u2014 ${arg}` : ""}` : `\u2717 rejected${arg ? ` \u2014 ${arg}` : ""}`
+        );
+        break;
+      }
       case "decide": {
         if (!arg) {
           this.push("status", "usage: /decide <the decision> \u2014 recorded in .squint/design-log.jsonl and injected into every future ask");
@@ -1470,13 +1536,13 @@ They are objective defects, not style preferences.`
         if (matches.length < 8) {
           void (async () => {
             try {
-              const fs3 = await import("fs");
+              const fs4 = await import("fs");
               const path5 = await import("path");
               const dir = path5.join(this.opts.cwd, ".squint", "transcripts");
-              const files = fs3.readdirSync(dir).filter((f) => f.endsWith(".md")).sort().reverse().slice(0, 20);
+              const files = fs4.readdirSync(dir).filter((f) => f.endsWith(".md")).sort().reverse().slice(0, 20);
               for (const file of files) {
                 if (matches.length >= 8) break;
-                const text = fs3.readFileSync(path5.join(dir, file), "utf8");
+                const text = fs4.readFileSync(path5.join(dir, file), "utf8");
                 for (const line of text.split("\n")) {
                   if (line.toLowerCase().includes(needle)) {
                     matches.push(`[${file.replace(/\.md$/, "")}] ${line.trim().slice(0, 90)}`);
@@ -1499,10 +1565,10 @@ They are objective defects, not style preferences.`
       }
       case "save": {
         void (async () => {
-          const fs3 = await import("fs");
+          const fs4 = await import("fs");
           const path5 = await import("path");
           const dir = path5.join(this.opts.cwd, ".squint", "transcripts");
-          fs3.mkdirSync(dir, { recursive: true });
+          fs4.mkdirSync(dir, { recursive: true });
           const stamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, 19);
           const file = path5.join(dir, `${stamp}.md`);
           const lines = [`# squint session \u2014 ${(/* @__PURE__ */ new Date()).toISOString().slice(0, 16)}`, ""];
@@ -1527,7 +1593,7 @@ They are objective defects, not style preferences.`
             }
           }
           lines.push("", `> ${this.summary()}`);
-          fs3.writeFileSync(file, lines.join("\n") + "\n");
+          fs4.writeFileSync(file, lines.join("\n") + "\n");
           this.push("status", `saved transcript \u2192 ${path5.relative(this.opts.cwd, file)}`);
         })();
         break;
@@ -1549,8 +1615,8 @@ They are objective defects, not style preferences.`
             this.push("error", "no Chrome/Chromium found for flows");
             return;
           }
-          const { runFlow } = await import("./cdp-TPP2RGSR.js");
-          const { previewDir } = await import("./preview-SKHIXVCE.js");
+          const { runFlow } = await import("./cdp-Q4H6ZHPT.js");
+          const { previewDir } = await import("./preview-ZUCVWGZG.js");
           this.push("status", `replaying ${flows.length} flow(s)\u2026`);
           this.notify({ running: true, runStartedAt: Date.now() });
           const failures = [];
@@ -1688,7 +1754,7 @@ They are objective defects, not style preferences.`
           const result = await this.capture();
           if (result) {
             await this.runTurn(
-              buildReviewPrompt(result.shots, arg || void 0, result.runtime, result.a11y, result.slop, result.narration, result.phantoms),
+              buildReviewPrompt(result.shots, arg || void 0, result.runtime, result.a11y, result.slop, result.narration, result.phantoms, result.viewTransitions, result.components),
               `\u{1F441} review rendered UI${arg ? ` \xB7 ${arg}` : ""}`
             );
           }
@@ -1874,7 +1940,7 @@ ${sandboxFiles(this.opts.cwd).join("\n")}`);
         this.notify({ items: [], totals: { costUsd: 0, turns: 0 } });
         break;
       case "help": {
-        void import("./commands-VDICJJT2.js").then(({ commandHelp }) => this.push("status", commandHelp()));
+        void import("./commands-BY44HDQ6.js").then(({ commandHelp }) => this.push("status", commandHelp()));
         break;
       }
       case "quit":
@@ -2493,7 +2559,7 @@ function registerTui(program2) {
 }
 
 // src/cli.tsx
-var VERSION = true ? "0.4.3" : "0.0.0-dev";
+var VERSION = true ? "0.4.5" : "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-VDICJJT2.js → commands-BY44HDQ6.js}

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

package/dist/{contextDoctor-M3R3PICP.js → contextDoctor-U3YTDFVG.js}

@@ -7,7 +7,7 @@ import {
   loadLocks,
   loadRules,
   loadSkills
-} from "./chunk-YT6K2YIS.js";
+} from "./chunk-ZLEP2TWF.js";
 import {
   loadBrief
 } from "./chunk-WAJXATCO.js";
@@ -54,6 +54,7 @@ function contextReport(cwd) {
       warnings.push(`skill "${skill.name}" has trigger(s) ${generic.map((t) => `"${t}"`).join(", ")} short enough to match almost any ask \u2014 make them more specific`);
     }
   }
+  lines.push({ source: "approval protocol (built-in)", tokens: 70, when: "every ask" });
   const totalAlways = lines.filter((l) => l.when === "every ask").reduce((sum, l) => sum + l.tokens, 0);
   if (totalAlways > 3e3) warnings.push(`~${totalAlways} tokens ride on every single ask \u2014 that is real money and real attention; trim the always-on set`);
   return { lines, warnings, totalAlways };

package/dist/nextMcp-42Y63M7W.js

@@ -0,0 +1,97 @@
+#!/usr/bin/env node
+
+// src/preview/nextMcp.ts
+import fs from "fs";
+import path from "path";
+function parseBody(contentType, text) {
+  try {
+    if (contentType.includes("text/event-stream")) {
+      const events = text.split("\n").filter((l) => l.startsWith("data:"));
+      const last = events.at(-1);
+      return last ? JSON.parse(last.slice(5).trim()) : null;
+    }
+    return text.trim().length > 0 ? JSON.parse(text) : null;
+  } catch {
+    return null;
+  }
+}
+async function rpc(url, sessionId, body, timeoutMs) {
+  const headers = {
+    "content-type": "application/json",
+    accept: "application/json, text/event-stream"
+  };
+  if (sessionId) headers["mcp-session-id"] = sessionId;
+  const res = await fetch(url, {
+    method: "POST",
+    headers,
+    body: JSON.stringify(body),
+    signal: AbortSignal.timeout(timeoutMs)
+  });
+  const newSession = res.headers.get("mcp-session-id") ?? sessionId;
+  if (res.status === 202) return { response: {}, sessionId: newSession };
+  if (!res.ok) return { response: null, sessionId: newSession };
+  const text = await res.text();
+  return { response: parseBody(res.headers.get("content-type") ?? "", text), sessionId: newSession };
+}
+function extractText(result) {
+  const content = result?.content;
+  if (!Array.isArray(content)) return [];
+  return content.map((c) => c && typeof c === "object" && "text" in c ? String(c.text) : "").filter((t) => t.trim().length > 0);
+}
+async function probeNextMcp(baseUrl, timeoutMs = 4e3) {
+  const url = new URL("/_next/mcp", baseUrl).toString();
+  const none = { available: false, tools: [], errors: [] };
+  let id = 0;
+  try {
+    const init = await rpc(url, null, {
+      jsonrpc: "2.0",
+      id: ++id,
+      method: "initialize",
+      params: {
+        protocolVersion: "2025-06-18",
+        capabilities: {},
+        clientInfo: { name: "squint", version: "0" }
+      }
+    }, timeoutMs);
+    if (!init.response?.result) return none;
+    const session = init.sessionId;
+    await rpc(url, session, { jsonrpc: "2.0", method: "notifications/initialized" }, timeoutMs).catch(() => null);
+    const list = await rpc(url, session, { jsonrpc: "2.0", id: ++id, method: "tools/list" }, timeoutMs);
+    const toolDefs = list.response?.result?.tools ?? [];
+    const tools = toolDefs.map((t) => String(t.name ?? "")).filter((n) => n.length > 0);
+    const errors = [];
+    for (const name of tools.filter((n) => /error|issue|diagnostic/i.test(n)).slice(0, 3)) {
+      const call = await rpc(url, session, {
+        jsonrpc: "2.0",
+        id: ++id,
+        method: "tools/call",
+        params: { name, arguments: {} }
+      }, timeoutMs);
+      for (const text of extractText(call.response?.result)) {
+        if (!/no (build |runtime )?errors|^\s*\[\]\s*$|no issues/i.test(text)) {
+          errors.push(`[${name}] ${text.slice(0, 600)}`);
+        }
+      }
+      if (errors.length >= 5) break;
+    }
+    return { available: true, tools, errors };
+  } catch {
+    return none;
+  }
+}
+function hasNextMcp(cwd) {
+  try {
+    const pkg = JSON.parse(fs.readFileSync(path.join(cwd, "package.json"), "utf8"));
+    for (const key of ["dependencies", "devDependencies"]) {
+      const range = pkg?.[key]?.next;
+      const major = range?.match(/(\d+)/)?.[1];
+      if (major) return Number.parseInt(major, 10) >= 16;
+    }
+  } catch {
+  }
+  return false;
+}
+export {
+  hasNextMcp,
+  probeNextMcp
+};

package/dist/{preview-SKHIXVCE.js → preview-ZUCVWGZG.js}

@@ -10,11 +10,11 @@ import {
   probeRuntime,
   routeShotName,
   runtimeSummary
-} from "./chunk-WCLQZFOR.js";
+} from "./chunk-CV5WVKHU.js";
 import "./chunk-O2S6PAJE.js";
 import "./chunk-IMDRXXFU.js";
 import "./chunk-KVYGPLWW.js";
-import "./chunk-Y47X4ENN.js";
+import "./chunk-RQHOE5MV.js";
 export {
   VIEWPORTS,
   buildReviewPrompt,

package/dist/{skills-GTTF4PNU.js → skills-6NZP67QT.js}

@@ -6,7 +6,7 @@ import {
   loadSkills,
   matchSkills,
   parseSkill
-} from "./chunk-YT6K2YIS.js";
+} from "./chunk-ZLEP2TWF.js";
 export {
   enrich,
   loadLocks,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aayambansal/squint",
-  "version": "0.4.3",
-  "description": "Lovable for your terminal — a frontend harness on top of Claude Code, Codex, and other coding agents.",
+  "version": "0.4.5",
+  "description": "Lovable for your terminal \u2014 a frontend harness on top of Claude Code, Codex, and other coding agents.",
   "type": "module",
   "license": "MIT",
   "author": "Aayam Bansal",