bugpatrol 0.2.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bugpatrol",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "AI agents that explore your app, find bugs, and fix them.",
   "license": "Apache-2.0",
   "type": "module",

package/src/ui/app.js

@@ -44,7 +44,8 @@ try {
 }
 const graphCamera = { box: null, key: '' };
 let showBackLinks = false;
-let renderedReviews = '';
+let renderedState = '';
+let renderedPage = '';
 
 // ---------------------------------------------------------------- data
 
@@ -62,6 +63,12 @@ async function getJson(url) {
 
 const artifact = (path) => `/api/artifact?path=${encodeURIComponent(path)}`;
 
+async function fetchText(path) {
+  const response = await fetch(artifact(path));
+  if (!response.ok) throw new Error(String(response.status));
+  return response.text();
+}
+
 async function refresh({ keepSelection = true } = {}) {
   const snapshot = await getJson('/api/state');
   state.runs = snapshot.runs;
@@ -134,13 +141,13 @@ async function refresh({ keepSelection = true } = {}) {
       state.selectedReview = reviews[0]?.pr.number ?? null;
     }
     const detail = state.selectedReview ? await getJson(`/api/reviews/${state.selectedReview}`) : null;
-    // A rebuilt page restarts a playing video, so skip the render when the review did not change.
-    const key = JSON.stringify([reviews, detail]);
-    if (key === renderedReviews && view.querySelector('.review-page')) return;
-    renderedReviews = key;
     state.reviews = reviews;
     state.reviewDetail = detail;
   }
+  // A rebuilt page closes what the reader opened and restarts a playing video: skip it when nothing changed.
+  const key = JSON.stringify(state);
+  if (key === renderedState && view.childElementCount) return;
+  renderedState = key;
   render();
 }
 
@@ -162,6 +169,18 @@ function render() {
     button.classList.toggle('active', button.dataset.view === state.view);
     if (button.dataset.view === 'checks') button.hidden = !hasChecks;
   }
+  // The same page, drawn again with new data, keeps what the reader opened and where they were.
+  const page = JSON.stringify([
+    state.view,
+    state.selectedIssueId,
+    state.selectedSessionId,
+    state.selectedReview,
+    state.selectedRunId,
+    state.selectedScreenId,
+  ]);
+  const opened = page === renderedPage ? detailsOpen() : undefined;
+  const scroll = window.scrollY;
+  renderedPage = page;
   view.innerHTML = '';
   if (state.view === 'checks') {
     const banner = renderLiveBanner();
@@ -178,6 +197,25 @@ function render() {
     checks: renderRuns,
   };
   view.append(renderers[state.view]());
+  if (opened) {
+    for (const [key, details] of detailsByKey()) if (opened.has(key)) details.open = opened.get(key);
+    window.scrollTo(0, scroll);
+  }
+}
+
+/** Each <details> on the page by its summary and its place among the ones with the same summary. */
+function detailsByKey() {
+  const seen = new Map();
+  return [...view.querySelectorAll('details')].map((details) => {
+    const summary = details.querySelector('summary')?.textContent ?? '';
+    const nth = (seen.get(summary) ?? 0) + 1;
+    seen.set(summary, nth);
+    return [`${summary}#${nth}`, details];
+  });
+}
+
+function detailsOpen() {
+  return new Map(detailsByKey().map(([key, details]) => [key, details.open]));
 }
 
 function el(tag, props = {}, children = []) {
@@ -212,7 +250,7 @@ function renderLiveBanner() {
   const total = live.plannedCaptures || done;
   return el('div', { class: 'runbanner' }, [
     el('span', { class: 'spinner' }),
-    el('span', { text: `Run in progress — ${done}/${total} captures` }),
+    el('span', { text: `Run in progress: ${done}/${total} captures` }),
     live.currentStep ? el('span', { class: 'muted', text: live.currentStep }) : null,
   ]);
 }
@@ -329,7 +367,7 @@ function renderDetail() {
         ...trace.suppressed.map((s) =>
           el('div', { class: 'finding' }, [
             el('div', { text: `${s.ruleId} on ${s.screenId}` }),
-            el('div', { class: 'why', text: `"${s.reason}" — ${s.decidedBy}` }),
+            el('div', { class: 'why', text: `"${s.reason}": ${s.decidedBy}` }),
           ]),
         ),
       ]),
@@ -462,7 +500,7 @@ function renderReasoning(screen) {
       'Pixel diff',
       d.identical
         ? `identical (${d.engine}, ${Math.round(d.durationMs)}ms)`
-        : `${d.changedPixels} px across ${d.regionCount} region(s) — ` +
+        : `${d.changedPixels} px across ${d.regionCount} region(s): ` +
             `${(d.changedFraction * 100).toFixed(3)}% of compared area (${d.engine})`,
     );
     add('Masked', `${(d.maskedFraction * 100).toFixed(1)}% of the screen, ` + `${d.maskedRegionCount} region(s)`);
@@ -485,7 +523,7 @@ function renderReasoning(screen) {
     const d = screen.decision;
     add(
       'Decision layer',
-      d.decider === 'none' ? `not consulted — ${d.skippedReason}` : `${d.decider}, $${(d.costUsd ?? 0).toFixed(6)}`,
+      d.decider === 'none' ? `not consulted: ${d.skippedReason}` : `${d.decider}, $${(d.costUsd ?? 0).toFixed(6)}`,
     );
     if (d.stateChars) add('State digest', `${d.stateChars} chars (hash ${String(d.stateHash ?? '').slice(0, 12)})`);
     for (const [key, answer] of Object.entries(d.answers ?? {})) {
@@ -532,7 +570,7 @@ function roleIcon(role) {
 }
 
 function relativeTime(value) {
-  if (!value) return '—';
+  if (!value) return '-';
   const seconds = Math.max(0, Math.round((Date.now() - new Date(value).getTime()) / 1000));
   if (!Number.isFinite(seconds)) return value;
   if (seconds < 60) return 'just now';
@@ -590,10 +628,10 @@ function renderUsage(usage) {
               el('td', { text: row.model }),
               el('td', { text: String(row.sessions) }),
               el('td', { text: count(row.tokens.input) }),
-              el('td', { text: row.tokens.cacheRead ? count(row.tokens.cacheRead) : '—' }),
+              el('td', { text: row.tokens.cacheRead ? count(row.tokens.cacheRead) : '-' }),
               el('td', { text: count(row.tokens.output) }),
               el('td', { text: count(Math.round((row.tokens.input + row.tokens.output) / Math.max(1, row.sessions))) }),
-              el('td', { text: row.tokens.listCostUsd ? money(row.tokens.listCostUsd) : '—' }),
+              el('td', { text: row.tokens.listCostUsd ? money(row.tokens.listCostUsd) : '-' }),
             ]),
           ),
         ])
@@ -826,7 +864,7 @@ function visibleIssues() {
 function renderIssueDetail() {
   const detail = state.issueDetail;
   if (!detail) return el('section', { class: 'card panel empty', text: 'Select an issue.' });
-  const { issue, fix, candidates } = detail;
+  const { issue, fix, candidates, gaveUpAfter, attemptDiffs = {} } = detail;
   const evidence = issue.evidence ?? {};
   const shots = [
     ['Screenshot', evidence.screenshot],
@@ -888,21 +926,26 @@ function renderIssueDetail() {
     fix
       ? el('section', { class: 'fix' }, [
           el('div', { class: 'section-title' }, [el('h2', { text: 'Proposed fix' }), fixBadge(fix)]),
+          gaveUpAfter
+            ? el('p', { class: 'gave-up', text: `The fixer stopped after ${gaveUpAfter} fix attempts.` })
+            : null,
           markdown(fix.summary || 'No summary yet.'),
-          ...(fix.retests?.length
-            ? [
-                retestBlock(fix.retests.at(-1), issue),
-                fix.retests.length > 1
-                  ? el('details', { class: 'earlier-retests' }, [
-                      el('summary', { text: `Earlier attempts (${fix.retests.length - 1})` }),
-                      ...fix.retests
-                        .slice(0, -1)
-                        .reverse()
-                        .map((retest) => retestBlock(retest, issue)),
-                    ])
-                  : null,
-              ]
-            : []),
+          ...(fix.attempts?.length
+            ? []
+            : fix.retests?.length
+              ? [
+                  retestBlock(fix.retests.at(-1), issue),
+                  fix.retests.length > 1
+                    ? el('details', { class: 'earlier-retests' }, [
+                        el('summary', { text: `Earlier retests (${fix.retests.length - 1})` }),
+                        ...fix.retests
+                          .slice(0, -1)
+                          .reverse()
+                          .map((retest) => retestBlock(retest, issue)),
+                      ])
+                    : null,
+                ]
+              : []),
           title('Code change'),
           fix.diffStat ? el('pre', { text: fix.diffStat }) : null,
           // Collapsed: the verdict and the screenshots come first; the diff is
@@ -919,6 +962,9 @@ function renderIssueDetail() {
               ? el('span', { text: `Worktree removed ${new Date(fix.worktreeRemovedAt).toLocaleString()}` })
               : el('code', { text: fix.worktree }),
           ]),
+          ...(fix.attempts?.length
+            ? [title('Fix attempts', 'oldest first'), attemptTimeline(fix, issue, attemptDiffs)]
+            : []),
         ])
       : null,
   ]);
@@ -1015,6 +1061,78 @@ function fixBadge(fix) {
   return el('span', { class: `badge ${kind}`, text: label });
 }
 
+const ATTEMPT_KINDS = { first: 'First fix', rerun: 'Rerun', refix: 'Refix', ci: 'CI fix' };
+const ATTEMPT_OUTCOMES = {
+  proposed: ['Proposed', 'pass'],
+  'no-change': ['No change', 'warn'],
+  declined: ['Declined', 'warn'],
+  'verify-failed': ['Verify failed', 'fail'],
+  error: ['Error', 'fail'],
+  timeout: ['Timed out', 'fail'],
+  abandoned: ['Abandoned', 'fail'],
+};
+
+/** Each fix attempt, oldest first, with the retests that judged it. */
+function attemptTimeline(fix, issue, attemptDiffs) {
+  const last = fix.attempts.at(-1).n;
+  const judged = (n) =>
+    (fix.retests ?? []).filter((retest) =>
+      // A retest from before attempts were recorded, or one naming an unknown attempt, judged the last one.
+      fix.attempts.some((attempt) => attempt.n === retest.fixAttempt) ? retest.fixAttempt === n : n === last,
+    );
+  return el(
+    'ol',
+    { class: 'attempt-timeline' },
+    fix.attempts.map((attempt) => {
+      const [outcome, kind] = attempt.outcome
+        ? (ATTEMPT_OUTCOMES[attempt.outcome] ?? [attempt.outcome, 'info'])
+        : ['Running…', 'info'];
+      return el('li', { class: 'attempt' }, [
+        el('div', { class: 'detail-heading' }, [
+          el('h3', { text: `Attempt ${attempt.n}: ${ATTEMPT_KINDS[attempt.kind] ?? attempt.kind}` }),
+          el('span', { class: `badge ${kind}`, text: outcome }),
+        ]),
+        el('div', { class: 'kv' }, [
+          el('span', { text: relativeTime(attempt.startedAt) }),
+          attempt.costUsd !== undefined ? el('span', { text: money(attempt.costUsd) }) : null,
+        ]),
+        attempt.reason ? markdown(attempt.reason) : null,
+        attempt.diffStat ? el('pre', { text: attempt.diffStat }) : null,
+        attemptDiffs[attempt.n] ? lazyDiff(attemptDiffs[attempt.n]) : null,
+        attempt.verifyOutput
+          ? el('details', { class: 'diff-details' }, [
+              el('summary', { text: 'Show the verify output' }),
+              el('pre', { text: attempt.verifyOutput }),
+            ])
+          : null,
+        ...judged(attempt.n).map((retest) => retestBlock(retest, issue)),
+      ]);
+    }),
+  );
+}
+
+/** A diff file that loads the first time the reader opens it. */
+function lazyDiff(path) {
+  const body = el('div', { class: 'muted', text: 'Loading…' });
+  let loaded = false;
+  return el(
+    'details',
+    {
+      class: 'diff-details',
+      ontoggle: (event) => {
+        if (!event.target.open || loaded) return;
+        loaded = true;
+        fetchText(path)
+          .then((diff) => body.replaceWith(diffBlock(diff)))
+          .catch((error) => {
+            body.textContent = `Could not read the diff: ${error.message}`;
+          });
+      },
+    },
+    [el('summary', { text: 'Show the diff' }), body],
+  );
+}
+
 function retestBlock(retest, issue) {
   const before = retest.before ?? issue.evidence?.screenshot;
   const pair = (shot) =>
@@ -1884,8 +2002,7 @@ function castPlayer(path) {
       }, at * 1000);
     });
   });
-  fetch(artifact(path))
-    .then((response) => (response.ok ? response.text() : Promise.reject(new Error(String(response.status)))))
+  fetchText(path)
     .then((text) => {
       cast = parseCast(text);
       if (!cast) throw new Error('not an asciicast file');
@@ -1958,7 +2075,7 @@ const lightboxCaption = document.getElementById('lightbox-caption');
 
 function openLightbox(path, caption) {
   lightboxImg.src = artifact(path);
-  lightboxCaption.textContent = `${caption} — ${path}`;
+  lightboxCaption.textContent = `${caption}: ${path}`;
   lightbox.hidden = false;
 }
 lightbox.addEventListener('click', () => {

package/src/ui/style.css

@@ -957,6 +957,23 @@ h1 {
   color: var(--muted);
   font-size: 0.75rem;
 }
+.attempt-timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.attempt {
+  border-left: 2px solid var(--line);
+  padding: 0.25rem 0 0.75rem 0.9rem;
+  margin-bottom: 0.5rem;
+}
+.attempt h3 {
+  margin: 0;
+}
+.gave-up {
+  color: var(--critical);
+  font-weight: 600;
+}
 .earlier-retests summary {
   cursor: pointer;
   color: var(--muted);