@aayambansal/squint 0.4.4 → 0.4.5

package/README.md

@@ -174,6 +174,8 @@ squint doctor --probe             # run every engine end to end, verify auth act
   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-C6MOKVEN.js → cdp-Q4H6ZHPT.js}

@@ -4,7 +4,7 @@ import {
   hasWebSocket,
   pixelDiffPct,
   runFlow
-} from "./chunk-JFFNQIBU.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-ZUEGDTAM.js → chunk-CV5WVKHU.js}

@@ -9,7 +9,7 @@ import {
 import {
   cdpCapture,
   hasWebSocket
-} from "./chunk-JFFNQIBU.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, viewTransitions } = 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, viewTransitions };
+      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-C6MOKVEN.js");
+  const { pixelDiffPct } = await import("./cdp-Q4H6ZHPT.js");
   return pixelDiffPct(chrome, previous, current);
 }
 function buildRuntimeFixPrompt(report) {
@@ -161,6 +161,16 @@ ${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 `
@@ -191,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, viewTransitions) {
+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)}${vtSection(viewTransitions)}`;
+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-JFFNQIBU.js → chunk-RQHOE5MV.js}

@@ -400,6 +400,43 @@ var VT_AUDIT = `(() => {
   }
   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: [] };
@@ -410,6 +447,7 @@ async function cdpCapture(chromePath, url, outDir, viewports, settleMs = 2500, a
   let narration = [];
   let phantoms = [];
   let viewTransitions = [];
+  let components = [];
   const requests = /* @__PURE__ */ new Map();
   let connection = null;
   try {
@@ -500,6 +538,15 @@ async function cdpCapture(chromePath, url, outDir, viewports, settleMs = 2500, a
         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);
@@ -564,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, viewTransitions };
+  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-ZUEGDTAM.js";
+} from "./chunk-CV5WVKHU.js";
 import {
   clearState,
   loadState,
@@ -58,11 +58,11 @@ import {
   detectEngines,
   getEngine
 } from "./chunk-KVYGPLWW.js";
-import "./chunk-JFFNQIBU.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-C6MOKVEN.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-Q43LOK6P.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, result.viewTransitions),
+        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");
@@ -1175,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, captureResult.viewTransitions),
+                  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"
                 );
               }
@@ -1463,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");
@@ -1500,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)}`);
@@ -1529,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)}`, ""];
@@ -1557,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;
@@ -1579,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-C6MOKVEN.js");
-          const { previewDir } = await import("./preview-Q43LOK6P.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 = [];
@@ -1718,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, result.viewTransitions),
+              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}` : ""}`
             );
           }
@@ -1904,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":
@@ -2523,7 +2559,7 @@ function registerTui(program2) {
 }
 
 // src/cli.tsx
-var VERSION = true ? "0.4.4" : "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/{preview-Q43LOK6P.js → preview-ZUCVWGZG.js}

@@ -10,11 +10,11 @@ import {
   probeRuntime,
   routeShotName,
   runtimeSummary
-} from "./chunk-ZUEGDTAM.js";
+} from "./chunk-CV5WVKHU.js";
 import "./chunk-O2S6PAJE.js";
 import "./chunk-IMDRXXFU.js";
 import "./chunk-KVYGPLWW.js";
-import "./chunk-JFFNQIBU.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.4",
-  "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",