@aayambansal/squint 0.2.9 → 0.3.0

package/dist/{cdp-SFWNP7OA.js → cdp-4IZHB3W5.js}

@@ -3,7 +3,7 @@ import {
   cdpCapture,
   hasWebSocket,
   pixelDiffPct
-} from "./chunk-OC6RU6XH.js";
+} from "./chunk-QEENJGCL.js";
 export {
   cdpCapture,
   hasWebSocket,

package/dist/{chrome-NVU47PLK.js → chrome-SBV3H77F.js}

@@ -2,8 +2,8 @@
 import {
   findChrome,
   screenshot
-} from "./chunk-B7LOERSP.js";
-import "./chunk-BWZFACBT.js";
+} from "./chunk-IMDRXXFU.js";
+import "./chunk-KVYGPLWW.js";
 export {
   findChrome,
   screenshot

package/dist/{chunk-X6MDBKED.js → chunk-A64VVTPU.js}

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   runAgent
-} from "./chunk-C7WKNJG6.js";
+} from "./chunk-VH7OOFQP.js";
 import {
   FAMILIES,
   FIRST_TURN_ADDENDUM,

package/dist/{chunk-RMNG2NTU.js → chunk-CFWKEIJJ.js}

@@ -7,7 +7,7 @@ var COMMANDS = [
   { name: "engine", args: "<id>", group: "build", description: "switch backend (new session)" },
   { name: "engines", group: "build", description: "list installed engines with streaming/resume support" },
   { name: "model", args: "[name]", group: "build", description: "model override for the engine" },
-  { name: "queue", args: "clear", group: "build", description: "drop queued asks" },
+  { name: "queue", args: "clear|drop <n>", group: "build", description: "clear the queue or drop one queued ask" },
   { name: "check", group: "verify", description: "run all quality gates (typecheck, lint, format, test, build)" },
   { name: "problems", group: "verify", description: "list open findings from gates, dev server, runtime, a11y" },
   { name: "fix", args: "[n]", group: "verify", description: "send all open problems to the engine, or just problem n" },

package/dist/{chunk-5VKUJPOL.js → chunk-F6JZSXEO.js}

@@ -1,14 +1,14 @@
 #!/usr/bin/env node
 import {
   variantsRoot
-} from "./chunk-X6MDBKED.js";
+} from "./chunk-A64VVTPU.js";
 import {
   findChrome,
   screenshot
-} from "./chunk-B7LOERSP.js";
+} from "./chunk-IMDRXXFU.js";
 import {
   lineSplitter
-} from "./chunk-BWZFACBT.js";
+} from "./chunk-KVYGPLWW.js";
 
 // src/variants/shots.ts
 import path2 from "path";

package/dist/{chunk-B7LOERSP.js → chunk-IMDRXXFU.js}

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   findBinary
-} from "./chunk-BWZFACBT.js";
+} from "./chunk-KVYGPLWW.js";
 
 // src/preview/chrome.ts
 import { spawn } from "child_process";

package/dist/{chunk-BWZFACBT.js → chunk-KVYGPLWW.js}

@@ -98,8 +98,18 @@ function createClaudeStreamParser(readyLabel) {
             durationMs: data.duration_ms
           }
         ];
-      case "user":
-        return [];
+      case "user": {
+        if (data.parent_tool_use_id) return [];
+        const events = [];
+        for (const block of data.message?.content ?? []) {
+          if (block.type === "tool_result" && block.is_error === true) {
+            const raw = Array.isArray(block.content) ? block.content.map((c) => c?.text ?? "").join(" ") : String(block.content ?? "");
+            const text = raw.trim().split("\n").at(-1) ?? "";
+            if (text) events.push({ type: "status", text: `\u26A0 tool error \xB7 ${truncate(text, 100)}` });
+          }
+        }
+        return events;
+      }
       case "rate_limit_event":
         return [];
       default:

package/dist/{chunk-OC6RU6XH.js → chunk-QEENJGCL.js}

@@ -201,11 +201,56 @@ async function pixelDiffPct(chromePath, pngA, pngB) {
     setTimeout(() => fs.rmSync(profileDir, { recursive: true, force: true }), 500).unref?.();
   }
 }
+var SLOP_AUDIT = `(() => {
+  const out = [];
+  const bodyFont = (getComputedStyle(document.body).fontFamily || '').toLowerCase();
+  const h1 = document.querySelector('h1,h2');
+  const displayFont = h1 ? (getComputedStyle(h1).fontFamily || '').toLowerCase() : bodyFont;
+  for (const tell of ['inter', 'roboto', 'arial', 'space grotesk']) {
+    if (displayFont.includes(tell) || bodyFont.split(',')[0].includes(tell)) {
+      out.push('generic font stack: ' + tell + ' (' + (displayFont.includes(tell) ? 'display' : 'body') + ')');
+      break;
+    }
+  }
+  const vw = innerWidth, vh = innerHeight;
+  for (const el of document.querySelectorAll('*')) {
+    const r = el.getBoundingClientRect();
+    if (r.top > vh || r.width * r.height < vw * vh * 0.2) continue;
+    const bg = getComputedStyle(el).backgroundImage || '';
+    if (bg.includes('gradient')) {
+      const purples = bg.match(/rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)/g) || [];
+      if (purples.some((c) => { const [r2, g2, b2] = c.slice(4).split(',').map(Number); return b2 > 150 && r2 > 80 && r2 < 200 && g2 < r2; })) {
+        out.push('purple/violet gradient on a hero-scale element');
+        break;
+      }
+    }
+  }
+  for (const container of document.querySelectorAll('section, div')) {
+    const kids = [...container.children];
+    if (kids.length < 3 || kids.length > 4) continue;
+    const rects = kids.map((k) => k.getBoundingClientRect());
+    if (rects[0].width < 150 || rects[0].top > vh * 2) continue;
+    const sameSize = rects.every((r) => Math.abs(r.width - rects[0].width) < 4 && Math.abs(r.height - rects[0].height) < 24);
+    const cardish = kids.every((k) => k.querySelector('svg, img') && k.querySelector('h2,h3,h4') && k.querySelector('p'));
+    if (sameSize && cardish) { out.push('identical icon-card grid (' + kids.length + ' cards)'); break; }
+  }
+  let emojiBullets = 0;
+  for (const li of document.querySelectorAll('li')) {
+    if (/^[\\u{1F300}-\\u{1FAFF}\\u{2600}-\\u{27BF}]/u.test((li.textContent || '').trim())) emojiBullets++;
+  }
+  if (emojiBullets >= 3) out.push(emojiBullets + ' emoji-bulleted list items');
+  const rootStyle = getComputedStyle(document.documentElement);
+  if (rootStyle.getPropertyValue('--radius').trim() === '0.5rem' && rootStyle.getPropertyValue('--primary').trim() === '222.2 47.4% 11.2%') {
+    out.push('untouched shadcn default theme tokens');
+  }
+  return out.slice(0, 8);
+})()`;
 async function cdpCapture(chromePath, url, outDir, viewports, settleMs = 2500, audit = false) {
   const { child, wsUrl, profileDir } = await launchChrome(chromePath);
   const report = { consoleErrors: [], pageErrors: [], failedRequests: [] };
   const shots = [];
   let a11y = [];
+  let slop = [];
   const requests = /* @__PURE__ */ new Map();
   let connection = null;
   try {
@@ -260,6 +305,15 @@ async function cdpCapture(chromePath, url, outDir, viewports, settleMs = 2500, a
         if (Array.isArray(result?.value)) a11y = result.value.map(String);
       } catch {
       }
+      try {
+        const { result } = await connection.send(
+          "Runtime.evaluate",
+          { expression: SLOP_AUDIT, returnByValue: true },
+          sessionId
+        );
+        if (Array.isArray(result?.value)) slop = result.value.map(String);
+      } catch {
+      }
     }
     for (const viewport of viewports) {
       await connection.send(
@@ -283,7 +337,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 };
+  return { report, shots, a11y, slop };
 }
 
 export {

package/dist/{chunk-GOAFH2VN.js → chunk-RQFFAJFE.js}

@@ -2,11 +2,11 @@
 import {
   findChrome,
   screenshot
-} from "./chunk-B7LOERSP.js";
+} from "./chunk-IMDRXXFU.js";
 import {
   cdpCapture,
   hasWebSocket
-} from "./chunk-OC6RU6XH.js";
+} from "./chunk-QEENJGCL.js";
 import {
   ensureSquintIgnore
 } from "./chunk-O2S6PAJE.js";
@@ -47,7 +47,7 @@ async function captureViewports(cwd, url) {
   const base = url.replace(/\/+$/, "");
   if (hasWebSocket()) {
     try {
-      const { report, shots: shots2, a11y } = await cdpCapture(chrome, url, dir, VIEWPORTS, 2500, true);
+      const { report, shots: shots2, a11y, slop } = 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 };
+      return { shots: shots2, errors: errors2, runtime: report, a11y, slop };
     } 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-SFWNP7OA.js");
+  const { pixelDiffPct } = await import("./cdp-4IZHB3W5.js");
   return pixelDiffPct(chrome, previous, current);
 }
 function buildRuntimeFixPrompt(report) {
@@ -151,13 +151,23 @@ ${findings.join("\n")}
 
 Fix these as part of the pass \u2014 they are objective defects, not style preferences.`;
 }
-function buildReviewPrompt(shots, extra, runtime, a11y) {
+function slopSection(findings) {
+  if (!findings || findings.length === 0) return "";
+  return `
+
+## Distinctiveness debt (detected mechanically)
+
+${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) {
   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)}`;
+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)}`;
 }
 
 export {

package/dist/{chunk-C7WKNJG6.js → chunk-VH7OOFQP.js}

@@ -3,7 +3,7 @@ import {
   findEngineBinary,
   lineSplitter,
   truncate
-} from "./chunk-BWZFACBT.js";
+} from "./chunk-KVYGPLWW.js";
 
 // src/runner/run.ts
 import { spawn } from "child_process";

package/dist/cli.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   completeCommand
-} from "./chunk-RMNG2NTU.js";
+} from "./chunk-CFWKEIJJ.js";
 import {
   applySandbox,
   discardSandbox,
@@ -22,13 +22,13 @@ import {
   buildFixPrompt,
   detectDevCommand,
   screenshotVariants
-} from "./chunk-5VKUJPOL.js";
+} from "./chunk-F6JZSXEO.js";
 import {
   applyVariant,
   cleanVariants,
   listVariants,
   runVariants
-} from "./chunk-X6MDBKED.js";
+} from "./chunk-A64VVTPU.js";
 import {
   buildGatePrompt,
   detectFastGates,
@@ -42,18 +42,18 @@ import {
   comparePulse,
   probeRuntime,
   runtimeSummary
-} from "./chunk-GOAFH2VN.js";
+} from "./chunk-RQFFAJFE.js";
 import {
   runAgent
-} from "./chunk-C7WKNJG6.js";
+} from "./chunk-VH7OOFQP.js";
 import {
   findChrome
-} from "./chunk-B7LOERSP.js";
+} from "./chunk-IMDRXXFU.js";
 import {
   detectEngines,
   getEngine
-} from "./chunk-BWZFACBT.js";
-import "./chunk-OC6RU6XH.js";
+} from "./chunk-KVYGPLWW.js";
+import "./chunk-QEENJGCL.js";
 import {
   enrich
 } from "./chunk-4LAU5TGK.js";
@@ -213,7 +213,7 @@ function registerEnv(program2) {
       console.log(`${status} ${engine.name}${binaryPath ? "" : pc2.dim(` \u2014 install: ${engine.install}`)}`);
     }
     if (options.probe) {
-      const { runAgent: runAgent2 } = await import("./run-S772BPMZ.js");
+      const { runAgent: runAgent2 } = await import("./run-NDSNTVYP.js");
       console.log(pc2.dim("\nprobing engines with a one-word prompt (verifies auth end to end)\u2026"));
       for (const { engine, path: binaryPath } of detected) {
         if (!binaryPath) continue;
@@ -235,8 +235,8 @@ function registerEnv(program2) {
         );
       }
     }
-    const { findChrome: findChrome2 } = await import("./chrome-NVU47PLK.js");
-    const { hasWebSocket } = await import("./cdp-SFWNP7OA.js");
+    const { findChrome: findChrome2 } = await import("./chrome-SBV3H77F.js");
+    const { hasWebSocket } = await import("./cdp-4IZHB3W5.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")}`
@@ -377,7 +377,7 @@ function registerProject(program2) {
         process.exitCode = 1;
         return;
       }
-      const { runVariants: runVariants2, cleanVariants: cleanVariants2 } = await import("./variants-UULPQ7Q5.js");
+      const { runVariants: runVariants2, cleanVariants: cleanVariants2 } = await import("./variants-3ZSINJGX.js");
       const config = loadConfig(defaultPaths(cwd));
       const engineId = resolveEngineId(config, options.engine);
       const engine = getEngine(engineId);
@@ -395,7 +395,7 @@ function registerProject(program2) {
       );
       const succeeded = runs.filter((r) => r.result.ok);
       if (options.shots && succeeded.length > 0) {
-        const { screenshotVariants: screenshotVariants2 } = await import("./shots-FVG4CDVK.js");
+        const { screenshotVariants: screenshotVariants2 } = await import("./shots-E2AWBDCN.js");
         console.log(pc3.dim("capturing screenshots\u2026"));
         const shots = await screenshotVariants2(cwd, succeeded.map((r) => r.variant));
         for (const shot of shots) {
@@ -410,7 +410,7 @@ ${succeeded.length}/${runs.length} variants ready in .squint/variants/ \u2014 `
     }
   );
   variantsCommand.command("list").description("List generated variants").action(async () => {
-    const { listVariants: listVariants2 } = await import("./variants-UULPQ7Q5.js");
+    const { listVariants: listVariants2 } = await import("./variants-3ZSINJGX.js");
     const ids = listVariants2(process.cwd());
     if (ids.length === 0) {
       console.log(pc3.dim('no variants \u2014 squint variants gen <n> "<ask>"'));
@@ -419,7 +419,7 @@ ${succeeded.length}/${runs.length} variants ready in .squint/variants/ \u2014 `
     for (const id of ids) console.log(id);
   });
   variantsCommand.command("apply").description("Apply one variant\u2019s changes to the main tree and discard the rest").argument("<id>", "family id of the winning variant").action(async (id) => {
-    const { applyVariant: applyVariant2, cleanVariants: cleanVariants2 } = await import("./variants-UULPQ7Q5.js");
+    const { applyVariant: applyVariant2, cleanVariants: cleanVariants2 } = await import("./variants-3ZSINJGX.js");
     const cwd = process.cwd();
     const result = applyVariant2(cwd, id);
     if (!result.ok) {
@@ -431,7 +431,7 @@ ${succeeded.length}/${runs.length} variants ready in .squint/variants/ \u2014 `
     console.log(pc3.green(`\u2713 applied ${id} to the working tree`) + pc3.dim(" \u2014 review with git diff"));
   });
   variantsCommand.command("clean").description("Discard all variants").action(async () => {
-    const { cleanVariants: cleanVariants2 } = await import("./variants-UULPQ7Q5.js");
+    const { cleanVariants: cleanVariants2 } = await import("./variants-3ZSINJGX.js");
     const count = cleanVariants2(process.cwd());
     console.log(pc3.dim(`removed ${count} variant(s)`));
   });
@@ -459,7 +459,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-VW5DAJNV.js");
+    const { captureViewports: captureViewports2 } = await import("./preview-56UCV5A3.js");
     const result = await captureViewports2(process.cwd(), url);
     if (!result) {
       console.error(pc4.red("\u2717 no Chrome/Chromium found"));
@@ -613,7 +613,8 @@ Next: ${pc6.bold(`${cd}${options.install ? "" : "npm install && "}squint`)}`);
 import { render } from "ink";
 
 // src/tui/App.tsx
-import { Box as Box2, Static, Text as Text3, useApp, useInput } from "ink";
+import { Box as Box3, Static, Text as Text3, useApp, useInput } from "ink";
+import { InkPictureProvider } from "ink-picture";
 import path3 from "path";
 import { useMemo, useRef, useState as useState2, useSyncExternalStore } from "react";
 
@@ -765,6 +766,18 @@ var Session = class {
         this.push("status", "queue cleared");
         return;
       }
+      const drop = /^\/queue drop (\d+)$/.exec(value);
+      if (drop) {
+        const index = Number.parseInt(drop[1], 10) - 1;
+        if (index >= 0 && index < this.state.queue.length) {
+          const removed = this.state.queue[index];
+          this.notify({ queue: this.state.queue.filter((_, i) => i !== index) });
+          this.push("status", `dropped from queue: ${removed}`);
+        } else {
+          this.push("status", `queue has ${this.state.queue.length} item(s) \u2014 /queue drop <1-${Math.max(this.state.queue.length, 1)}>`);
+        }
+        return;
+      }
       this.notify({ queue: [...this.state.queue, value] });
       return;
     }
@@ -950,6 +963,7 @@ var Session = class {
           sessionId: this.sessionId,
           model: this.state.model,
           lastAsk: display.length > 80 ? `${display.slice(0, 79)}\u2026` : display,
+          totals: this.state.totals,
           at: Date.now()
         });
       }
@@ -1012,7 +1026,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),
+                  buildReviewPrompt(captureResult.shots, void 0, captureResult.runtime, captureResult.a11y, captureResult.slop),
                   "\u{1F441} auto-review rendered UI"
                 );
               }
@@ -1086,6 +1100,7 @@ ${errors.slice(-5).join("\n")}`);
     this.lastPulse = current;
     if (!previous) {
       this.push("status", "visual pulse: baseline captured");
+      this.push("image", pulsePath);
       return null;
     }
     const pct = await comparePulse(previous, current);
@@ -1094,6 +1109,7 @@ ${errors.slice(-5).join("\n")}`);
       "status",
       pct < 0.5 ? "visual pulse: stable vs last turn" : `visual pulse: ${pct.toFixed(1)}% of the page changed vs last turn`
     );
+    if (pct >= 0.5) this.push("image", pulsePath);
     return pct;
   }
   /** Screenshot the running app (and watch its runtime where CDP is available). */
@@ -1115,6 +1131,8 @@ ${errors.slice(-5).join("\n")}`);
         "status",
         `captured ${result.shots.map((s) => s.name).join(", ")} \u2192 ${path2.dirname(result.shots[0].path)}`
       );
+      const desktop = result.shots.find((s) => s.name === "desktop") ?? result.shots[0];
+      this.push("image", desktop.path);
     }
     if (result.runtime) {
       const summary = runtimeSummary(result.runtime);
@@ -1127,6 +1145,10 @@ ${errors.slice(-5).join("\n")}`);
         this.push("status", "runtime clean \u2014 no console errors, exceptions, or failed requests");
       }
     }
+    if (result.slop && result.slop.length > 0) {
+      this.push("status", `distinctiveness: ${result.slop.length} tell(s)
+${result.slop.join("\n")}`);
+    }
     if (result.a11y && result.a11y.length > 0) {
       this.push("error", `a11y: ${result.a11y.length} finding(s)
 ${result.a11y.slice(0, 5).join("\n")}`);
@@ -1150,7 +1172,7 @@ They are objective defects, not style preferences.`
     const arg = rest.join(" ").trim();
     switch (name) {
       case "engines": {
-        void import("./registry-S3PCXJVF.js").then(({ detectEngines: detectEngines2 }) => {
+        void import("./registry-MIJ6LSAY.js").then(({ detectEngines: detectEngines2 }) => {
           const lines = detectEngines2().map(({ engine, path: binaryPath }) => {
             const mark = binaryPath ? "\u2713" : "\u2717";
             const traits = [engine.createParser ? "stream" : "text", engine.supportsResume ? "resume" : null].filter(Boolean).join(" \xB7 ");
@@ -1258,6 +1280,9 @@ They are objective defects, not style preferences.`
               case "tool":
                 lines.push(`- \u2699 ${item.text}`);
                 break;
+              case "image":
+                lines.push(`![screenshot](${item.text})`, "");
+                break;
               case "thinking":
                 break;
               default:
@@ -1330,7 +1355,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),
+              buildReviewPrompt(result.shots, arg || void 0, result.runtime, result.a11y, result.slop),
               `\u{1F441} review rendered UI${arg ? ` \xB7 ${arg}` : ""}`
             );
           }
@@ -1380,7 +1405,11 @@ They are objective defects, not style preferences.`
           break;
         }
         this.sessionId = saved.sessionId;
-        this.notify({ engineId: saved.engine, model: saved.model ?? this.state.model });
+        this.notify({
+          engineId: saved.engine,
+          model: saved.model ?? this.state.model,
+          totals: saved.totals ?? this.state.totals
+        });
         this.push("status", `resumed ${saved.engine} session${saved.lastAsk ? ` \xB7 "${saved.lastAsk}"` : ""}`);
         break;
       }
@@ -1510,7 +1539,7 @@ ${sandboxFiles(this.opts.cwd).join("\n")}`);
         this.notify({ items: [], totals: { costUsd: 0, turns: 0 } });
         break;
       case "help": {
-        void import("./commands-TERCCWFM.js").then(({ commandHelp }) => this.push("status", commandHelp()));
+        void import("./commands-QKDWUD4K.js").then(({ commandHelp }) => this.push("status", commandHelp()));
         break;
       }
       case "quit":
@@ -1772,9 +1801,23 @@ function Markdown({ text }) {
 }
 
 // src/tui/messages.tsx
-import { Text as Text2 } from "ink";
+import { Box as Box2, Text as Text2 } from "ink";
+import Image from "ink-picture";
 import { useEffect, useState } from "react";
+
+// src/tui/termImage.ts
+function supportsInlineImages(env = process.env) {
+  if (env.TMUX) return false;
+  if (env.TERM === "xterm-kitty" || env.KITTY_WINDOW_ID) return true;
+  if (env.TERM === "xterm-ghostty" || env.GHOSTTY_RESOURCES_DIR) return true;
+  if (env.TERM_PROGRAM === "WezTerm") return true;
+  if (env.TERM_PROGRAM === "iTerm.app") return true;
+  return false;
+}
+
+// src/tui/messages.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var INLINE_IMAGES = supportsInlineImages();
 var SPINNER_FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
 var PHRASES = ["working", "thinking", "squinting", "crafting", "still at it"];
 function WorkingLine({ startedAt }) {
@@ -1839,6 +1882,20 @@ function MessageLine({ message }) {
         "\u2717 ",
         message.text
       ] });
+    case "image":
+      if (!INLINE_IMAGES) {
+        return /* @__PURE__ */ jsxs2(Text2, { color: theme2.dim, wrap: "wrap", children: [
+          "\u25A3 ",
+          message.text
+        ] });
+      }
+      return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsx2(Image, { src: message.text, width: 48, height: 14, alt: "screenshot" }),
+        /* @__PURE__ */ jsxs2(Text2, { color: theme2.dim, children: [
+          "\u25A3 ",
+          message.text
+        ] })
+      ] });
   }
 }
 
@@ -1998,20 +2055,23 @@ function App({
   });
   const devBadge = state.devState === "running" ? ` \xB7 ${state.devUrl ?? "dev running"}` : state.devState === "starting" ? " \xB7 dev starting\u2026" : state.devState === "crashed" ? " \xB7 dev crashed" : "";
   const totalsBadge = state.totals.turns > 0 ? ` \xB7 ${state.totals.turns} turn${state.totals.turns === 1 ? "" : "s"}${state.totals.costUsd > 0 ? ` \xB7 $${state.totals.costUsd.toFixed(2)}` : ""}` : "";
-  return /* @__PURE__ */ jsx3(ThemeProvider, { value: theme2, children: /* @__PURE__ */ jsxs3(Box2, { flexDirection: "column", paddingX: 1, children: [
-    /* @__PURE__ */ jsx3(Static, { items: state.items, children: (item) => /* @__PURE__ */ jsx3(Box2, { children: /* @__PURE__ */ jsx3(MessageLine, { message: item }) }, item.id) }),
-    state.liveText.length > 0 && /* @__PURE__ */ jsx3(Box2, { children: /* @__PURE__ */ jsx3(Markdown, { text: state.liveText }) }),
-    state.items.length === 0 && state.liveText.length === 0 && !state.running && /* @__PURE__ */ jsxs3(Box2, { flexDirection: "column", marginTop: 1, children: [
+  return /* @__PURE__ */ jsx3(ThemeProvider, { value: theme2, children: /* @__PURE__ */ jsx3(InkPictureProvider, { children: /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", paddingX: 1, children: [
+    /* @__PURE__ */ jsx3(Static, { items: state.items, children: (item) => /* @__PURE__ */ jsx3(Box3, { children: /* @__PURE__ */ jsx3(MessageLine, { message: item }) }, item.id) }),
+    state.liveText.length > 0 && /* @__PURE__ */ jsx3(Box3, { children: /* @__PURE__ */ jsx3(Markdown, { text: state.liveText }) }),
+    state.items.length === 0 && state.liveText.length === 0 && !state.running && /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", marginTop: 1, children: [
       /* @__PURE__ */ jsx3(Text3, { color: theme2.dim, children: "describe what to build \u2014 or try:" }),
       /* @__PURE__ */ jsx3(Text3, { color: theme2.dim, children: "  /dev start the preview server \xB7 /review after a change \xB7 /variants 3 explore wide" }),
       /* @__PURE__ */ jsx3(Text3, { color: theme2.dim, children: "  shift+tab cycles plan/safe/yolo \xB7 type while the agent works to queue asks" })
     ] }),
-    state.running && /* @__PURE__ */ jsx3(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx3(WorkingLine, { startedAt: state.runStartedAt }) }),
-    state.queue.map((queued, index) => /* @__PURE__ */ jsx3(Box2, { children: /* @__PURE__ */ jsxs3(Text3, { color: theme2.dim, children: [
-      "\u22EF queued: ",
-      queued
+    state.running && /* @__PURE__ */ jsx3(Box3, { marginTop: 1, children: /* @__PURE__ */ jsx3(WorkingLine, { startedAt: state.runStartedAt }) }),
+    state.queue.map((queued, index) => /* @__PURE__ */ jsx3(Box3, { children: /* @__PURE__ */ jsxs3(Text3, { color: theme2.dim, children: [
+      "\u22EF ",
+      index + 1,
+      ". ",
+      queued,
+      index === state.queue.length - 1 ? "   (/queue drop <n> removes)" : ""
     ] }) }, index)),
-    line.text.startsWith("/") && !line.text.includes(" ") && /* @__PURE__ */ jsx3(Box2, { flexDirection: "column", children: completeCommand(line.text.slice(1)).slice(0, 5).map((command, index) => /* @__PURE__ */ jsxs3(Text3, { color: index === 0 ? theme2.accent : theme2.dim, children: [
+    line.text.startsWith("/") && !line.text.includes(" ") && /* @__PURE__ */ jsx3(Box3, { flexDirection: "column", children: completeCommand(line.text.slice(1)).slice(0, 5).map((command, index) => /* @__PURE__ */ jsxs3(Text3, { color: index === 0 ? theme2.accent : theme2.dim, children: [
       "/",
       command.name,
       command.args ? ` ${command.args}` : "",
@@ -2021,13 +2081,13 @@ function App({
         command.description
       ] })
     ] }, command.name)) }),
-    /* @__PURE__ */ jsx3(Box2, { marginTop: state.running ? 0 : 1, children: /* @__PURE__ */ jsxs3(Text3, { children: [
+    /* @__PURE__ */ jsx3(Box3, { marginTop: state.running ? 0 : 1, children: /* @__PURE__ */ jsxs3(Text3, { children: [
       /* @__PURE__ */ jsx3(Text3, { color: theme2.accent, children: "\u276F " }),
       line.text.slice(0, line.cursor),
       /* @__PURE__ */ jsx3(Text3, { inverse: true, children: line.text[line.cursor] ?? " " }),
       line.text.slice(line.cursor + 1)
     ] }) }),
-    /* @__PURE__ */ jsx3(Box2, { children: /* @__PURE__ */ jsxs3(Text3, { color: theme2.dim, children: [
+    /* @__PURE__ */ jsx3(Box3, { children: /* @__PURE__ */ jsxs3(Text3, { color: theme2.dim, children: [
       /* @__PURE__ */ jsxs3(
         Text3,
         {
@@ -2057,7 +2117,7 @@ function App({
       " ",
       "\xB7 shift+tab mode \xB7 /help"
     ] }) })
-  ] }) });
+  ] }) }) });
 }
 
 // src/cli/tui.tsx
@@ -2095,7 +2155,7 @@ function registerTui(program2) {
 }
 
 // src/cli.tsx
-var VERSION = true ? "0.2.9" : "0.0.0-dev";
+var VERSION = true ? "0.3.0" : "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-TERCCWFM.js → commands-QKDWUD4K.js}

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

package/dist/{preview-VW5DAJNV.js → preview-56UCV5A3.js}

@@ -10,10 +10,10 @@ import {
   probeRuntime,
   routeShotName,
   runtimeSummary
-} from "./chunk-GOAFH2VN.js";
-import "./chunk-B7LOERSP.js";
-import "./chunk-BWZFACBT.js";
-import "./chunk-OC6RU6XH.js";
+} from "./chunk-RQFFAJFE.js";
+import "./chunk-IMDRXXFU.js";
+import "./chunk-KVYGPLWW.js";
+import "./chunk-QEENJGCL.js";
 import "./chunk-O2S6PAJE.js";
 export {
   VIEWPORTS,

package/dist/{registry-S3PCXJVF.js → registry-MIJ6LSAY.js}

@@ -5,7 +5,7 @@ import {
   findBinary,
   findEngineBinary,
   getEngine
-} from "./chunk-BWZFACBT.js";
+} from "./chunk-KVYGPLWW.js";
 export {
   detectEngines,
   engines,

package/dist/{run-S772BPMZ.js → run-NDSNTVYP.js}

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 import {
   runAgent
-} from "./chunk-C7WKNJG6.js";
-import "./chunk-BWZFACBT.js";
+} from "./chunk-VH7OOFQP.js";
+import "./chunk-KVYGPLWW.js";
 export {
   runAgent
 };

package/dist/shots-E2AWBDCN.js

@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+import {
+  screenshotVariants
+} from "./chunk-F6JZSXEO.js";
+import "./chunk-A64VVTPU.js";
+import "./chunk-VH7OOFQP.js";
+import "./chunk-IMDRXXFU.js";
+import "./chunk-KVYGPLWW.js";
+import "./chunk-P3H4N2EN.js";
+export {
+  screenshotVariants
+};

package/dist/{variants-UULPQ7Q5.js → variants-3ZSINJGX.js}

@@ -9,9 +9,9 @@ import {
   runVariants,
   variantPrompt,
   variantsRoot
-} from "./chunk-X6MDBKED.js";
-import "./chunk-C7WKNJG6.js";
-import "./chunk-BWZFACBT.js";
+} from "./chunk-A64VVTPU.js";
+import "./chunk-VH7OOFQP.js";
+import "./chunk-KVYGPLWW.js";
 import "./chunk-P3H4N2EN.js";
 export {
   MAX_VARIANTS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aayambansal/squint",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "description": "Lovable for your terminal — a frontend harness on top of Claude Code, Codex, and other coding agents.",
   "type": "module",
   "license": "MIT",
@@ -49,6 +49,7 @@
   "dependencies": {
     "commander": "^15.0.0",
     "ink": "^7.1.1",
+    "ink-picture": "^2.1.0",
     "picocolors": "^1.1.1",
     "react": "^19.1.0",
     "zod": "^4.4.3"

package/dist/shots-FVG4CDVK.js

@@ -1,12 +0,0 @@
-#!/usr/bin/env node
-import {
-  screenshotVariants
-} from "./chunk-5VKUJPOL.js";
-import "./chunk-X6MDBKED.js";
-import "./chunk-C7WKNJG6.js";
-import "./chunk-B7LOERSP.js";
-import "./chunk-BWZFACBT.js";
-import "./chunk-P3H4N2EN.js";
-export {
-  screenshotVariants
-};