bugpatrol 0.1.4 → 0.2.0

package/package.json

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

package/src/ui/app.js

@@ -1,6 +1,7 @@
 // Bugpatrol dashboard. Vanilla ES modules on purpose: no build step means the UI
 // is served straight from source, so `bugpatrol dashboard` works from a clone with
 // nothing compiled but the CLI itself.
+import { parseCast } from './cast.js';
 import { layoutGraph } from './graph-layout.js';
 
 const view = document.getElementById('view');
@@ -20,12 +21,16 @@ const state = {
   sessions: [],
   selectedSessionId: null,
   sessionDetail: null,
+  flow: null,
   appmap: null,
   selectedScreenId: null,
   routines: [],
   memory: { lessons: [] },
   runs: [],
   selectedRunId: null,
+  reviews: [],
+  selectedReview: null,
+  reviewDetail: null,
   detail: null,
   live: null,
   root: '',
@@ -39,6 +44,7 @@ try {
 }
 const graphCamera = { box: null, key: '' };
 let showBackLinks = false;
+let renderedReviews = '';
 
 // ---------------------------------------------------------------- data
 
@@ -103,6 +109,15 @@ async function refresh({ keepSelection = true } = {}) {
       state.sessionDetail = null;
     }
   }
+  if (state.view === 'flow') {
+    state.sessions = await getJson('/api/sessions');
+    if (!state.sessions.some((session) => session.id === state.selectedSessionId)) {
+      state.selectedSessionId = state.sessions[0]?.id ?? null;
+    }
+    state.flow = state.selectedSessionId
+      ? await getJson(`/api/flow/${encodeURIComponent(state.selectedSessionId)}`).catch(() => null)
+      : null;
+  }
   if (state.view === 'screens') {
     state.appmap = await getJson('/api/appmap');
     state.issues = await getJson('/api/issues');
@@ -113,6 +128,19 @@ async function refresh({ keepSelection = true } = {}) {
     }
   }
   if (state.view === 'memory') state.memory = await getJson('/api/memory');
+  if (state.view === 'reviews') {
+    const reviews = await getJson('/api/reviews');
+    if (!reviews.some((review) => review.pr.number === state.selectedReview)) {
+      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;
+  }
   render();
 }
 
@@ -143,7 +171,9 @@ function render() {
     overview: renderOverview,
     issues: renderIssues,
     activity: renderActivity,
+    flow: renderFlow,
     screens: renderScreens,
+    reviews: renderReviews,
     memory: renderMemory,
     checks: renderRuns,
   };
@@ -1159,6 +1189,78 @@ function renderEventRow(event) {
   ]);
 }
 
+// The flow view is what a human reads when triaging: the agent's actions, the
+// failed requests the app reported, and the backend logs that followed, merged
+// in time order. A log close behind a failure is marked correlated.
+function renderFlow() {
+  const list = el('section', { class: 'card panel' }, [
+    title('Flow'),
+    ...state.sessions.map((session) =>
+      el(
+        'button',
+        {
+          class: `list-row ${session.id === state.selectedSessionId ? 'active' : ''}`,
+          onclick: async () => {
+            state.selectedSessionId = session.id;
+            await refresh();
+          },
+        },
+        [
+          roleIcon(session.role),
+          el('span', { class: 'grow' }, [
+            el('strong', { text: firstSentence(session.summary) || `${capital(session.role)} session` }),
+            el('small', {
+              class: 'muted',
+              text: `${capital(session.role)} · ${relativeTime(session.startedAt)} · ${duration(session)}`,
+            }),
+          ]),
+        ],
+      ),
+    ),
+  ]);
+  const flow = state.flow;
+  if (!flow) {
+    return el('div', { class: 'master-detail' }, [
+      list,
+      el('section', {
+        class: 'card panel empty',
+        text: 'No flow for this session. Add a `logs:` source to bugpatrol.yml and run a patrol.',
+      }),
+    ]);
+  }
+  const sources = flow.sources.length
+    ? flow.sources.map((source) =>
+        el('div', {
+          text: `${source.name} (${source.kind}): ${source.collected} line${source.collected === 1 ? '' : 's'}`,
+        }),
+      )
+    : [
+        el('div', {
+          text: 'No log sources configured. Add `logs:` to bugpatrol.yml to see backend logs beside each action.',
+        }),
+      ];
+  return el('div', { class: 'master-detail' }, [
+    list,
+    el('section', { class: 'card panel' }, [
+      title('Flow', `${capital(flow.role)} · ${relativeTime(flow.startedAt)}`),
+      el('div', { class: 'muted session-usage' }, sources),
+      flow.entries.length
+        ? el('div', { class: 'event-list' }, flow.entries.map(renderFlowRow))
+        : el('div', { class: 'muted', text: 'This session recorded nothing.' }),
+    ]),
+  ]);
+}
+
+function renderFlowRow(entry) {
+  return el('div', { class: `event-row flow-row flow-${entry.kind}${entry.correlated ? ' correlated' : ''}` }, [
+    el('time', { text: new Date(entry.at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }),
+    el('span', { class: 'flow-kind', text: entry.kind }),
+    el('span', { class: 'grow truncate', text: entry.summary }),
+    entry.level ? el('small', { class: 'muted', text: entry.level }) : null,
+    entry.screenshot ? image(entry.screenshot, entry.summary, 'event-thumb') : null,
+  ]);
+}
+
 async function openScreen(id) {
   state.view = 'screens';
   state.selectedScreenId = id;
@@ -1527,6 +1629,303 @@ function renderScreenGraph(screens, allEdges) {
   ]);
 }
 
+// ---------------------------------------------------------------- reviews
+
+const VERDICT_BADGE = { proven: 'pass', 'partly-proven': 'warn', 'not-proven': 'fail', untested: 'info' };
+const VERDICT_WORDS = {
+  proven: 'Proven',
+  'partly-proven': 'Partly proven',
+  'not-proven': 'Not proven',
+  untested: 'Untested',
+};
+const EVIDENCE_WORDS = { replay: 'replay', assertion: 'assertion', explored: 'explored', bench: 'benchmark' };
+
+async function openReview(number) {
+  state.selectedReview = number;
+  await refresh();
+}
+
+function renderReviews() {
+  const list = el('div', { class: 'card panel' }, [
+    title('Pull request reviews', `${state.reviews.length}`),
+    state.reviews.length
+      ? null
+      : el('p', { class: 'empty', text: 'No reviews yet. Run bugpatrol review <pr> to review a pull request.' }),
+    ...state.reviews.map((review) =>
+      el(
+        'button',
+        {
+          class: `list-row ${review.pr.number === state.selectedReview ? 'active' : ''}`,
+          onclick: () => openReview(review.pr.number),
+        },
+        [
+          el('span', { class: 'grow' }, [
+            el('strong', { text: `#${review.pr.number} ${review.pr.title ?? ''}` }),
+            el('span', { class: 'row-meta' }, [
+              el('small', {
+                class: 'muted',
+                text: `${reviewStatus(review)} · ${relativeTime(review.endedAt ?? review.startedAt)}`,
+              }),
+              ...Object.entries(review.verdicts ?? {})
+                .filter(([, count]) => count)
+                .map(([verdict, count]) =>
+                  el('span', { class: `badge ${VERDICT_BADGE[verdict]}`, text: `${count} ${verdict}` }),
+                ),
+              review.introduced ? el('span', { class: 'badge fail', text: `${review.introduced} introduced` }) : null,
+            ]),
+          ]),
+        ],
+      ),
+    ),
+  ]);
+  return el('div', { class: 'master-detail review-page' }, [list, renderReviewDetail()]);
+}
+
+function reviewStatus(review) {
+  if (review.status === 'running') return 'Running';
+  if (review.status === 'failed') return 'Failed';
+  return review.posted ? 'Posted' : 'Finished';
+}
+
+function link(href, text) {
+  return el('a', { href, target: '_blank', rel: 'noopener noreferrer', text });
+}
+
+function renderReviewDetail() {
+  const detail = state.reviewDetail;
+  if (!detail) return el('section', { class: 'card panel empty', text: 'Select a review.' });
+  const { review, recordings } = detail;
+  const ids = new Set((review.claims ?? []).map((finding) => finding.claim.id));
+  const loose = recordings.filter((rec) => !rec.claimId || !ids.has(rec.claimId));
+  const introduced = review.findings.filter((finding) => finding.verdict === 'introduced');
+  const others = ['pre-existing', 'unclear', 'not-a-bug']
+    .map((verdict) => [verdict, review.findings.filter((finding) => finding.verdict === verdict)])
+    .filter(([, findings]) => findings.length);
+  return el('article', { class: 'card panel review-detail' }, [
+    el('div', { class: 'detail-heading' }, [
+      el('h1', { text: `#${review.pr.number} ${review.pr.title ?? ''}` }),
+      el('span', {
+        class: `badge ${review.status === 'failed' ? 'fail' : review.status === 'running' ? 'warn' : 'info'}`,
+        text: reviewStatus(review),
+      }),
+    ]),
+    el('div', { class: 'kv' }, [
+      review.pr.url ? link(review.pr.url, 'Pull request') : null,
+      review.posted ? link(review.posted.url, 'Review on GitHub') : null,
+      el('span', { class: 'mono', title: review.head, text: `head ${shortCommit(review.head)}` }),
+      el('span', {
+        class: 'mono',
+        title: review.base,
+        text: `base ${shortCommit(review.base)}${review.baseRef ? ` (${review.baseRef})` : ''}`,
+      }),
+      el('span', { text: `Started ${relativeTime(review.startedAt)}` }),
+      review.costUsd ? el('span', { text: `$${review.costUsd.toFixed(3)}` }) : null,
+    ]),
+    review.error ? el('p', { class: 'review-error', text: review.error }) : null,
+    review.claims
+      ? el('section', {}, [
+          title('Claims', `${review.claims.length}`),
+          review.claims.length
+            ? null
+            : el('p', { class: 'muted', text: 'Bugpatrol found no claim in the pull request.' }),
+          ...review.claims.map((finding) =>
+            claimBlock(
+              finding,
+              recordings.filter((rec) => rec.claimId === finding.claim.id),
+            ),
+          ),
+        ])
+      : null,
+    el('section', {}, [
+      title('Introduced problems', `${introduced.length}`),
+      introduced.length
+        ? null
+        : el('p', { class: 'muted', text: 'Bugpatrol found no problem that this pull request introduced.' }),
+      ...introduced.map(findingBlock),
+    ]),
+    ...others.map(([verdict, findings]) =>
+      el('details', { class: 'review-others' }, [
+        el('summary', { text: `${capital(verdict.replace(/-/g, ' '))} (${findings.length})` }),
+        ...findings.map(findingBlock),
+      ]),
+    ),
+    loose.length
+      ? el('section', {}, [
+          title('Other recordings', `${loose.length}`),
+          el(
+            'div',
+            { class: 'retest-shots' },
+            loose.map((rec) => recordingView(rec)),
+          ),
+        ])
+      : null,
+    review.tested ? el('section', {}, [title('What Bugpatrol tested'), markdown(review.tested)]) : null,
+  ]);
+}
+
+function claimSource(source) {
+  if (source.kind === 'section') return 'the claims section';
+  if (source.kind === 'commit') return `commit ${shortCommit(source.commit)}`;
+  if (source.kind === 'issue') return `issue #${source.number}`;
+  return `the ${source.kind}`;
+}
+
+function claimBlock(finding, recordings) {
+  const { claim } = finding;
+  const tested = finding.head || finding.base || recordings.length;
+  return el('div', { class: 'claim-block' }, [
+    el('div', { class: 'detail-heading' }, [
+      el('h3', { text: claim.text }),
+      el('span', {
+        class: `badge ${VERDICT_BADGE[finding.verdict] ?? 'info'}`,
+        text: VERDICT_WORDS[finding.verdict] ?? finding.verdict,
+      }),
+    ]),
+    el('div', { class: 'kv' }, [
+      el('span', {
+        text: `Evidence: ${finding.evidence ? (EVIDENCE_WORDS[finding.evidence] ?? finding.evidence) : 'none'}`,
+      }),
+      el('span', { text: `From ${claimSource(claim.source)}` }),
+      el('span', { text: claim.platform }),
+    ]),
+    el('p', { text: finding.reason }),
+    finding.saw ? el('p', {}, [el('strong', { text: 'Saw: ' }), finding.saw]) : null,
+    finding.did ? el('p', { class: 'muted', text: finding.did }) : null,
+    claim.untestable ? el('p', { class: 'muted', text: `Not testable: ${claim.untestable}` }) : null,
+    tested
+      ? el('div', { class: 'retest-shots' }, [
+          buildEvidence(
+            'Base',
+            finding.base,
+            recordings.filter((rec) => rec.build === 'base'),
+          ),
+          buildEvidence(
+            'This pull request',
+            finding.head,
+            recordings.filter((rec) => rec.build === 'head'),
+          ),
+        ])
+      : null,
+    finding.steps?.length
+      ? el('details', { class: 'recorded-path' }, [
+          el('summary', { text: `Claim routine: ${finding.steps.length} step(s)` }),
+          el(
+            'ol',
+            {},
+            finding.steps.map((step) => el('li', { text: step })),
+          ),
+          finding.routine ? el('code', { text: finding.routine }) : null,
+        ])
+      : null,
+  ]);
+}
+
+/**
+ * One build's evidence for a claim. A full video plays when there is one, then
+ * an animated recording, then a terminal cast. Without a recording the step
+ * screenshots show instead.
+ */
+function buildEvidence(label, replay, recordings) {
+  const pick =
+    recordings.find((rec) => rec.kind === 'video') ??
+    recordings.find((rec) => rec.kind === 'image') ??
+    recordings.find((rec) => rec.kind === 'cast');
+  const stopped = replay?.failedStep !== undefined ? ` at step ${replay.failedStep + 1}` : '';
+  const note = !replay
+    ? 'Not replayed.'
+    : replay.ok
+      ? null
+      : `Stopped${stopped}${replay.error ? `: ${replay.error}` : '.'}`;
+  const shots = replay?.shots ?? [];
+  const strip = () =>
+    el(
+      'div',
+      { class: 'shot-strip' },
+      shots.map((path, index) => image(path, `${label}: ${index ? `after step ${index}` : 'before the first step'}`)),
+    );
+  return el('figure', { class: 'build-evidence' }, [
+    pick ? recordingView(pick) : shots.length ? strip() : el('div', { class: 'image-empty', text: 'No capture' }),
+    el('figcaption', {}, [label, note ? el('span', { class: 'build-note', text: ` · ${note}` }) : null]),
+    pick && shots.length
+      ? el('details', { class: 'build-shots' }, [el('summary', { text: `Screenshots (${shots.length})` }), strip()])
+      : null,
+  ]);
+}
+
+function recordingView(rec) {
+  const name = rec.path.split('/').pop();
+  if (rec.kind === 'video')
+    return el('div', { class: 'recording' }, [
+      el('video', { src: artifact(rec.path), controls: '', preload: 'metadata', playsinline: '' }),
+      el('small', { class: 'muted', text: name }),
+    ]);
+  if (rec.kind === 'image')
+    return el('div', { class: 'recording' }, [image(rec.path, name), el('small', { class: 'muted', text: name })]);
+  return castPlayer(rec.path);
+}
+
+/** A terminal cast as plain text. It shows the end state; Play replays the output in time. */
+function castPlayer(path) {
+  const screen = el('pre', { class: 'cast-screen', text: 'Loading the cast…' });
+  const play = el('button', { type: 'button', class: 'filter', text: 'Play', disabled: '' });
+  let cast;
+  let timers = [];
+  play.addEventListener('click', () => {
+    for (const timer of timers) clearTimeout(timer);
+    screen.textContent = '';
+    // A pause longer than a second plays as one second, so a slow command does not stall the replay.
+    let at = 0;
+    let last = 0;
+    timers = cast.events.map((event) => {
+      at += Math.min(event.at - last, 1);
+      last = event.at;
+      return setTimeout(() => {
+        screen.textContent += event.text;
+      }, at * 1000);
+    });
+  });
+  fetch(artifact(path))
+    .then((response) => (response.ok ? response.text() : Promise.reject(new Error(String(response.status)))))
+    .then((text) => {
+      cast = parseCast(text);
+      if (!cast) throw new Error('not an asciicast file');
+      screen.textContent = cast.events.map((event) => event.text).join('');
+      play.removeAttribute('disabled');
+    })
+    .catch((error) => {
+      screen.textContent = `Could not read the cast: ${error.message}`;
+    });
+  return el('div', { class: 'recording' }, [
+    screen,
+    el('div', { class: 'kv' }, [play, el('small', { class: 'muted', text: path.split('/').pop() })]),
+  ]);
+}
+
+function findingBlock(finding) {
+  return el('div', { class: 'claim-block' }, [
+    el('div', { class: 'detail-heading' }, [el('h3', { text: finding.title }), severityChip(finding.severity)]),
+    finding.file ? el('code', { text: `${finding.file}${finding.line ? `:${finding.line}` : ''}` }) : null,
+    el('p', { text: finding.reason }),
+    finding.head || finding.base
+      ? el('div', { class: 'retest-shots' }, [
+          el('figure', {}, [image(finding.base, 'Base'), el('figcaption', { text: 'Base' })]),
+          el('figure', {}, [image(finding.head, 'This pull request'), el('figcaption', { text: 'This pull request' })]),
+        ])
+      : null,
+    finding.baseNote ? el('p', { class: 'muted', text: finding.baseNote }) : null,
+    finding.steps?.length
+      ? el('details', { class: 'recorded-path' }, [
+          el('summary', { text: `Steps (${finding.steps.length})` }),
+          el(
+            'ol',
+            {},
+            finding.steps.map((step) => el('li', { text: step })),
+          ),
+        ])
+      : null,
+  ]);
+}
+
 function renderMemory() {
   const lessons = state.memory?.lessons ?? [];
   const row = (lesson) =>

package/src/ui/cast.js

@@ -0,0 +1,32 @@
+// Asciicast reader for the review page. Pure, so it is tested from Node.
+// The page shows a cast as plain text, so colors and cursor moves are dropped.
+
+// CSI sequences (colors, cursor moves), OSC sequences (titles), and other escapes.
+// biome-ignore lint/suspicious/noControlCharactersInRegex: matching terminal escapes is the point.
+const ESCAPES = /\u001b\[[0-?]*[ -/]*[@-~]|\u001b\][^\u0007\u001b]*(?:\u0007|\u001b\\)|\u001b[@-Z\\-_]/g;
+
+/** Reads an asciicast v2 or v3 file. v2 times are from the start; v3 times are from the previous event. */
+export function parseCast(source) {
+  const rows = source.split('\n').flatMap((line) => {
+    try {
+      return line.trim() ? [JSON.parse(line)] : [];
+    } catch {
+      return [];
+    }
+  });
+  const header = rows[0];
+  if (!header || Array.isArray(header) || ![2, 3].includes(header.version)) return undefined;
+  let clock = 0;
+  const events = [];
+  for (const row of rows.slice(1)) {
+    if (!Array.isArray(row) || typeof row[0] !== 'number') continue;
+    clock = header.version === 3 ? clock + row[0] : row[0];
+    if (row[1] !== 'o' || typeof row[2] !== 'string') continue;
+    events.push({ at: Math.round(clock * 1000) / 1000, text: row[2].replace(ESCAPES, '').replace(/\r\n/g, '\n') });
+  }
+  return {
+    width: header.width ?? header.term?.cols ?? 80,
+    height: header.height ?? header.term?.rows ?? 24,
+    events,
+  };
+}

package/src/ui/index.html

@@ -15,7 +15,9 @@
   <nav class="tabs" id="tabs">
     <button type="button" data-view="overview" class="active">Overview</button>
     <button type="button" data-view="issues">Issues</button>
+    <button type="button" data-view="reviews">Reviews</button>
     <button type="button" data-view="activity">Activity</button>
+    <button type="button" data-view="flow">Flow</button>
     <button type="button" data-view="screens">Screens</button>
     <button type="button" data-view="memory">Memory</button>
     <button type="button" data-view="checks">Checks</button>

package/src/ui/style.css

@@ -749,6 +749,29 @@ h1 {
   font-size: 0.75rem;
   white-space: nowrap;
 }
+.flow-row {
+  gap: 0.6rem;
+}
+.flow-row.correlated {
+  background: color-mix(in srgb, #b93038 12%, transparent);
+}
+.flow-kind {
+  flex: none;
+  width: 4.2rem;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--muted);
+}
+.flow-action .flow-kind {
+  color: #3b6ea5;
+}
+.flow-request .flow-kind {
+  color: #ae551c;
+}
+.flow-log .flow-kind {
+  color: #4f7a4f;
+}
 .event-row details {
   flex: none;
   font-size: 0.75rem;
@@ -1228,3 +1251,77 @@ h1 {
   gap: 0.35rem 0.5rem;
   margin-top: 0.2rem;
 }
+
+/* Pull request reviews: each claim, then its evidence on the base and the pull request side by side. */
+.claim-block {
+  border-top: 1px solid var(--line);
+  padding: 0.75rem 0;
+}
+.claim-block h3 {
+  font-size: 0.95rem;
+  margin: 0;
+}
+.claim-block p {
+  margin: 0.35rem 0;
+}
+.build-evidence {
+  margin: 0;
+  min-width: 0;
+}
+.build-evidence figcaption {
+  text-align: center;
+  color: var(--muted);
+  font-size: 0.75rem;
+}
+.build-note {
+  color: var(--major);
+}
+.build-shots summary {
+  cursor: pointer;
+  color: var(--muted);
+  font-size: 0.75rem;
+}
+.shot-strip {
+  display: flex;
+  gap: 0.4rem;
+  overflow-x: auto;
+}
+.retest-shots .shot-strip img {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+  height: 220px;
+}
+.recording {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+.recording video {
+  width: 100%;
+  max-height: 360px;
+  background: var(--panel-2);
+}
+.recording small {
+  text-align: center;
+}
+.cast-screen {
+  margin: 0;
+  height: 220px;
+  overflow: auto;
+  padding: 0.5rem;
+  background: #0b0d10;
+  color: #e7e9ee;
+  font-size: 0.75rem;
+  white-space: pre-wrap;
+}
+.review-error {
+  color: var(--critical);
+}
+.review-others summary {
+  cursor: pointer;
+  color: var(--muted);
+  font-weight: 600;
+  margin: 0.5rem 0;
+}