aztrx-cli 0.4.3 → 0.4.4

package/dist/ui/app.js

@@ -2,6 +2,8 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useReducer, useRef, useState } from "react";
 import { render, Box, Text, useApp } from "ink";
 import { VERSION } from "../core/version.js";
+import { diagnoseFinding } from "../core/diagnose.js";
+import { diffHunks } from "../core/diff.js";
 // Palette — mirrors web/app/globals.css "crash seismograph" tokens, mapped to
 // the nearest ANSI colors so the terminal panel reads as the same instrument.
 const C = {
@@ -47,6 +49,11 @@ function reducer(state, msg) {
         }
         case "repro":
             return { ...state, repros: { ...state.repros, [msg.repro.finding.fingerprint]: msg.repro } };
+        case "heal":
+            return {
+                ...state,
+                findings: state.findings.map((f) => f.fingerprint === msg.heal.finding.fingerprint ? msg.heal.finding : f),
+            };
         default:
             return state;
     }
@@ -78,6 +85,7 @@ function useAztrx(bus) {
             bus.on("noise", () => dispatch({ type: "noise" })),
             bus.on("route", (r) => dispatch({ type: "route", url: r.url })),
             bus.on("repro", (r) => dispatch({ type: "repro", repro: r })),
+            bus.on("heal", (h) => dispatch({ type: "heal", heal: h })),
         ];
         return () => offs.forEach((off) => off());
     }, [bus]);
@@ -107,11 +115,28 @@ function ReproBadge({ repro }) {
     return (_jsxs(Text, { color: color, children: ["[", repro.verdict, " ", repro.reproductions, "/", repro.runs, "]"] }));
 }
 function FindingRow({ finding, repro }) {
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(SeverityMark, { severity: finding.severity }), _jsx(Text, { color: C.dim, children: "  " }), _jsx(Text, { color: C.fg, children: firstLine(finding.rawMessage) })] }), finding.mappedLocation ? (_jsxs(Text, { color: C.dim, children: ["   ", finding.mappedLocation.filePath, ":", finding.mappedLocation.line, ":", finding.mappedLocation.column] })) : null, repro ? (_jsxs(Box, { children: [_jsx(Text, { color: C.dim, children: "   " }), _jsx(ReproBadge, { repro: repro }), _jsxs(Text, { color: C.dim, children: ["  ", "spec ", repro.specPath, " \u00B7 ", repro.steps, "/", repro.totalSteps, " steps"] })] })) : null] }));
+    const dx = diagnoseFinding(finding);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(SeverityMark, { severity: finding.severity }), _jsx(Text, { color: C.dim, children: "  " }), _jsx(Text, { color: C.fg, children: firstLine(finding.rawMessage) })] }), finding.mappedLocation ? (_jsxs(Text, { color: C.dim, children: ["   ", finding.mappedLocation.filePath, ":", finding.mappedLocation.line, ":", finding.mappedLocation.column] })) : null, dx ? (_jsxs(Text, { color: C.azure, children: ["   ↳ ", dx] })) : null, repro ? (_jsxs(Box, { children: [_jsx(Text, { color: C.dim, children: "   " }), _jsx(ReproBadge, { repro: repro }), _jsxs(Text, { color: C.dim, children: ["  ", "spec ", repro.specPath, " \u00B7 ", repro.steps, "/", repro.totalSteps, " steps"] })] })) : null, finding.heal ? (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: finding.heal.status === "healed" ? C.green : C.amber, children: ["   ", finding.heal.status === "healed" ? "✓" : "◐", " ", finding.heal.status, finding.heal.model ? ` · ${finding.heal.model}` : ""] }), finding.heal.status === "healed" && finding.heal.hunks.length > 0 ? (_jsx(DiffView, { hunks: finding.heal.hunks, filePath: finding.heal.filePath })) : null] })) : null] }));
+}
+const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+function DiffView({ hunks, filePath }) {
+    const groups = diffHunks(hunks);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: C.dim, children: ["   ", filePath] }), groups.map((group, gi) => (_jsx(Box, { flexDirection: "column", children: group.map((l, i) => (_jsxs(Box, { children: [_jsxs(Text, { color: l.type === "add" ? C.green : C.red, children: ["     ", l.type === "add" ? "+" : "-", " "] }), _jsx(Text, { children: l.tokens.map((t, j) => {
+                                if (t.kind === "del")
+                                    return _jsx(Text, { backgroundColor: "red", color: "white", children: t.text }, j);
+                                if (t.kind === "add")
+                                    return _jsx(Text, { backgroundColor: "green", color: "black", children: t.text }, j);
+                                return _jsx(Text, { color: l.type === "add" ? C.green : C.red, children: t.text }, j);
+                            }) })] }, i))) }, gi)))] }));
 }
 function AztrxApp({ bus, done, targetUrl, repoRoot, mode }) {
     const { exit } = useApp();
     const { state, rate } = useAztrx(bus);
+    const [spin, setSpin] = useState(0);
+    useEffect(() => {
+        const id = setInterval(() => setSpin((s) => (s + 1) % SPINNER.length), 80);
+        return () => clearInterval(id);
+    }, []);
     useEffect(() => {
         let cancelled = false;
         const finish = () => {
@@ -125,7 +150,7 @@ function AztrxApp({ bus, done, targetUrl, repoRoot, mode }) {
     }, [done, exit]);
     const phase = PHASE_LABEL[state.phase];
     const currentRoute = state.routes[state.routes.length - 1] ?? targetUrl;
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: C.azure, bold: true, children: "Aztrx AI" }), _jsx(Text, { color: C.dim, children: " \u2014 Runtime Detector" }), _jsxs(Text, { color: C.dim, children: ["   v", VERSION] })] }), _jsxs(Text, { color: C.dim, children: ["  target  ", targetUrl, "     repo  ", repoRoot] }), _jsxs(Text, { color: C.dim, children: ["  mode    ", mode] }), _jsx(Text, { color: C.dim, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: phase.color, children: phase.text }), _jsx(Text, { color: C.dim, children: "  " }), _jsx(Text, { color: C.azureBright, bold: true, children: rate.toFixed(1) }), _jsx(Text, { color: C.dim, children: " ops/s \u00B7 " }), _jsx(Text, { color: C.fg, children: state.actions }), _jsx(Text, { color: C.dim, children: " actions \u00B7 " }), _jsx(Text, { color: C.fg, children: state.clicks }), _jsx(Text, { color: C.dim, children: " clicks" })] }), _jsxs(Box, { children: [_jsx(Text, { color: C.dim, children: "  route   " }), _jsx(Text, { color: C.muted, children: currentRoute }), _jsxs(Text, { color: C.dim, children: [" \u00B7 ", state.routes.length, " route(s)"] })] }), state.findings.length > 0 ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: C.muted, bold: true, children: ["findings (", state.findings.length, ")"] }), state.findings.map((f) => (_jsx(FindingRow, { finding: f, repro: state.repros[f.fingerprint] }, f.fingerprint)))] })) : null, state.noise > 0 ? (_jsxs(Text, { color: C.dim, children: ["  \u25B8 ", state.noise, " noise event(s) suppressed"] })) : null] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: C.azure, bold: true, children: "Aztrx AI" }), _jsx(Text, { color: C.dim, children: " \u2014 Runtime Detector" }), _jsxs(Text, { color: C.dim, children: ["   v", VERSION] })] }), _jsxs(Text, { color: C.dim, children: ["  target  ", targetUrl, "     repo  ", repoRoot] }), _jsxs(Text, { color: C.dim, children: ["  mode    ", mode] }), _jsx(Text, { color: C.dim, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: phase.color, children: [state.phase === "done" ? "✓" : SPINNER[spin], "  ", phase.text.replace(/^[◉✓]\s*/, "")] }), _jsx(Text, { color: C.dim, children: "  " }), _jsx(Text, { color: C.azureBright, bold: true, children: rate.toFixed(1) }), _jsx(Text, { color: C.dim, children: " ops/s \u00B7 " }), _jsx(Text, { color: C.fg, children: state.actions }), _jsx(Text, { color: C.dim, children: " actions \u00B7 " }), _jsx(Text, { color: C.fg, children: state.clicks }), _jsx(Text, { color: C.dim, children: " clicks" })] }), _jsxs(Box, { children: [_jsx(Text, { color: C.dim, children: "  route   " }), _jsx(Text, { color: C.muted, children: currentRoute }), _jsxs(Text, { color: C.dim, children: [" \u00B7 ", state.routes.length, " route(s)"] })] }), state.findings.length > 0 ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: C.muted, bold: true, children: ["findings (", state.findings.length, ")"] }), state.findings.map((f) => (_jsx(FindingRow, { finding: f, repro: state.repros[f.fingerprint] }, f.fingerprint)))] })) : null, state.noise > 0 ? (_jsxs(Text, { color: C.dim, children: ["  \u25B8 ", state.noise, " noise event(s) suppressed"] })) : null] }));
 }
 /** Mount the live terminal panel and resolve once the run (or a failure) ends. */
 export function renderTui(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aztrx-cli",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "private": false,
   "description": "Aztrx AI — runtime stress-tester for web apps. Detect bugs, then prove them with an executable repro.",
   "license": "Apache-2.0",
@@ -38,6 +38,7 @@
     "build": "tsc",
     "dev": "node dist/cli.js",
     "bench": "npm run build && tsx bench/run.ts",
+    "test": "tsx --test \"tests/**/*.test.ts\"",
     "typecheck": "tsc --noEmit && tsc -p server/tsconfig.json",
     "server": "tsx server/index.ts",
     "server:typecheck": "tsc -p server/tsconfig.json",
@@ -46,14 +47,17 @@
   "dependencies": {
     "@jridgewell/trace-mapping": "^0.3.25",
     "commander": "^12.1.0",
+    "gifenc": "^1.0.3",
     "ink": "^5.2.0",
     "picocolors": "^1.1.1",
     "playwright": "1.62.1",
+    "pngjs": "^7.0.0",
     "react": "^18.3.1",
     "typescript": "^5.7.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",
+    "@types/pngjs": "^6.0.5",
     "@types/react": "^18.3.12",
     "tsx": "^4.19.0"
   }