backlens 0.2.0 → 0.2.1

package/ai/fixes.js

@@ -139,7 +139,7 @@ export function createAI(deps) {
   }
 
   const view = (job) => {
-    const { ctx, issue, backups, convo, abort, ...rest } = job;
+    const { ctx, issue, backups, convo, abort, afterTrace, ...rest } = job;
     return { ...rest, now: Date.now(), issueTitle: issue.title, issueRoute: issue.route, spentTodayUsd: spentToday(), budgetUsd: settings.dailyBudgetUsd };
   };
 
@@ -387,6 +387,7 @@ export function createAI(deps) {
         job.stage = ok.length ? 'proposed' : 'no-edits';
       } catch (err) {
         job.error = err.message;
+        job.errorCode = err.code || null;
         job.stage = 'error';
       }
     })();
@@ -468,6 +469,12 @@ export function createAI(deps) {
     return { ok: r.code === 0, errors: r.out };
   }
 
+  /** What a request cost: the numbers shown before and after a fix. */
+  function stats(trace) {
+    const count = (kind) => trace.spans.filter((x) => x.kind === kind).length;
+    return { status: trace.status, ms: trace.duration, queries: count('db'), redis: count('redis'), http: count('http') };
+  }
+
   function replay(job, payload, port) {
     return new Promise((resolve) => {
       const timer = setTimeout(() => {
@@ -532,6 +539,9 @@ export function createAI(deps) {
       r.status = 'skip';
       r.detail = settings.replay ? 'the request that showed this issue is no longer in memory; use the page again to record a fresh one' : 'replay is off in AI settings';
     } else {
+      // The app has just restarted, so its first request pays for cold caches and new connections.
+      // A read is sent once to warm up, and the second one is measured.
+      if (!isWrite) await replay(job, payload, deps.appPort());
       const trace = await replay(job, payload, deps.appPort());
       if (!trace) {
         r.status = 'fail';
@@ -544,6 +554,8 @@ export function createAI(deps) {
       const before = original ? `${original.status} in ${original.duration} ms, ${original.spans.length} calls` : '';
       r.status = !still && sameClass ? 'done' : 'fail';
       r.detail = `before: ${before}\nafter:  ${trace.status} in ${trace.duration} ms, ${trace.spans.length} calls${still ? ', issue still there' : ', issue gone'}`;
+      job.compare = { before: original ? stats(original) : null, after: stats(trace), issueGone: !still, warmed: !isWrite };
+      job.afterTrace = trace;
       if (trace.status === 401 && original && original.status !== 401) r.detail += '\nThe recorded login may have expired: sign in again and use the page once more.';
       if (r.status === 'fail') return finish(job, false, still ? 'The issue is still there after the change.' : `The request now answers ${trace.status}.`);
     }
@@ -585,6 +597,8 @@ export function createAI(deps) {
     append(historyFile, { at: new Date().toISOString(), type: job.issue.type, tier: job.route.tier || job.route.kind, model: job.route.model, verified: Boolean(job.verified), kept: true });
     cleanup(job);
     job.stage = 'kept';
+    // The measured request joins the normal list, and the issue leaves it until a request shows it again.
+    if (deps.markFixed) deps.markFixed(job.issue.key, job.afterTrace && job.compare && job.compare.issueGone ? job.afterTrace : null);
     ev(job, 'done', 'Kept. Review it in your editor and commit when ready.');
     return view(job);
   }

package/ai/providers.js

@@ -362,7 +362,12 @@ async function anthropic(task, messages, routeInfo) {
   } catch (err) {
     if (err instanceof Anthropic.AuthenticationError) throw new Error('Claude rejected the key. Paste a new one in AI settings.');
     if (err instanceof Anthropic.RateLimitError) throw new Error('Claude rate limit reached. Wait a minute and try again.');
-    if (err instanceof Anthropic.APIError) throw new Error(`Claude error ${err.status}: ${err.message}`);
+    // The SDK's message carries the raw JSON body; show the API's own sentence instead.
+    const said = err?.error?.error?.message || err.message;
+    if (err instanceof Anthropic.APIError && /credit balance/i.test(said)) {
+      throw Object.assign(new Error('Your Anthropic account has no credit left, so nothing was sent or charged. Add credits in the Anthropic Console, then try again.'), { code: 'billing' });
+    }
+    if (err instanceof Anthropic.APIError) throw new Error(`Claude error ${err.status}: ${said}`);
     throw err;
   }
   const cost = costUsd(routeInfo.tier, response.usage);

package/analyze.js

@@ -236,7 +236,11 @@ function percentile(values, p) {
 }
 
 /** Routes and issues across every trace kept. */
-export function summarize(traces, known = [], advice = []) {
+/**
+ * fixed: issue key -> when a fix for it was kept. Such an issue is hidden until a request after
+ * that moment shows it again.
+ */
+export function summarize(traces, known = [], advice = [], fixed = new Map()) {
   const routes = new Map();
   const issues = new Map();
   for (const trace of traces) {
@@ -259,6 +263,7 @@ export function summarize(traces, known = [], advice = []) {
       agg.seen++;
       agg.costTotal += issue.cost;
       agg.example = trace.id;
+      agg.lastAt = Math.max(agg.lastAt || 0, trace.at || 0);
     }
   }
   // Index advice: one issue per route that ran the query. Its location skips wrapper lines that
@@ -281,8 +286,9 @@ export function summarize(traces, known = [], advice = []) {
       const span = trace.spans.find((s) => s.kind === 'db' && normalizeSql(s.name) === sql);
       if (!span) continue;
       const route = routeOf(trace.method, trace.url, trace.template);
-      if (!perRoute.has(route)) perRoute.set(route, { seen: 0, example: trace.id, span });
+      if (!perRoute.has(route)) perRoute.set(route, { seen: 0, example: trace.id, span, lastAt: 0 });
       perRoute.get(route).seen++;
+      perRoute.get(route).lastAt = Math.max(perRoute.get(route).lastAt, trace.at || 0);
     }
     const big = a.rows >= 1000;
     const name = `${a.table}_${a.columns.join('_')}_idx`.slice(0, 63);
@@ -302,6 +308,7 @@ export function summarize(traces, known = [], advice = []) {
         route,
         seen: info.seen,
         example: info.example,
+        lastAt: info.lastAt,
         costTotal: 0,
       });
     }
@@ -311,6 +318,12 @@ export function summarize(traces, known = [], advice = []) {
   for (const route of known) {
     if (!routes.has(route)) routes.set(route, { route, calls: 0, durations: [], queries: 0, redis: 0, http: 0, errors: 0, issueKeys: new Set(), last: 0 });
   }
+  for (const [key, issue] of issues) {
+    if (fixed.has(key) && fixed.get(key) >= (issue.lastAt || 0)) {
+      issues.delete(key);
+      routes.get(issue.route)?.issueKeys.delete(key);
+    }
+  }
   const routeList = [...routes.values()]
     .map((r) => ({
       route: r.route,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backlens",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Run your Node backend through backlens and see every request, every query, and what is wrong with them.",
   "license": "MIT",
   "type": "module",

package/server.js

@@ -30,6 +30,8 @@ export function startServer({ port, root = process.cwd(), token, manualArgv = nu
   let config = manualArgv ? { app: null, test: null, autoRestart: false } : loadConfig(root);
 
   const traces = [];
+  // Issue key -> when its fix was kept (see summarize).
+  const fixedAt = new Map();
   let received = 0;
   const known = new Map();
   const advice = new Map();
@@ -207,15 +209,15 @@ export function startServer({ port, root = process.cwd(), token, manualArgv = nu
 
     // From the dashboard.
     if (req.method === 'GET' && url.pathname === '/api/state') {
-      const { routes, issues } = summarize(traces, [...known.keys()], [...advice.values()]);
+      const { routes, issues } = summarize(traces, [...known.keys()], [...advice.values()], fixedAt);
       const recent = traces
         .slice(-300)
         .reverse()
-        .map((t) => ({ id: t.id, at: t.at, method: t.method, url: t.url, route: routeOf(t.method, t.url, t.template), status: t.status, duration: t.duration, spans: t.spans.length, aborted: Boolean(t.aborted) }));
+        .map((t) => ({ id: t.id, at: t.at, method: t.method, url: t.url, route: routeOf(t.method, t.url, t.template), status: t.status, duration: t.duration, spans: t.spans.length, aborted: Boolean(t.aborted), afterFix: Boolean(t.afterFix) }));
       return json(res, 200, { routes, issues, recent, total: traces.length, received });
     }
     if (req.method === 'GET' && url.pathname === '/api/map') {
-      const { issues } = summarize(traces, [...known.keys()], [...advice.values()]);
+      const { issues } = summarize(traces, [...known.keys()], [...advice.values()], fixedAt);
       return json(res, 200, { ...mapOf(traces, issues), advice: [...advice.values()].map((a) => ({ table: a.table, columns: a.columns })) });
     }
     if (req.method === 'GET' && url.pathname.startsWith('/api/trace/')) {
@@ -228,12 +230,13 @@ export function startServer({ port, root = process.cwd(), token, manualArgv = nu
       traces.length = 0;
       received = 0;
       advice.clear();
+      fixedAt.clear();
       return json(res, 200, { ok: true });
     }
     if (req.method === 'POST' && url.pathname === '/api/snapshot') {
       const name = (url.searchParams.get('name') || '').toLowerCase().replace(/[^a-z0-9_-]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 40);
       if (!name) return json(res, 400, { error: 'Give the snapshot a name.' });
-      const { routes, issues } = summarize(traces, [...known.keys()], [...advice.values()]);
+      const { routes, issues } = summarize(traces, [...known.keys()], [...advice.values()], fixedAt);
       mkdirSync(snapshotDir, { recursive: true });
       writeFileSync(join(snapshotDir, `${name}.json`), `${JSON.stringify({ name, at: Date.now(), requests: traces.length, routes: routes.filter((r) => r.calls), issues: issues.length }, null, 2)}\n`);
       return json(res, 200, { ok: true, name });
@@ -360,10 +363,19 @@ export function startServer({ port, root = process.cwd(), token, manualArgv = nu
         pauseWatch: (on) => (watchPaused = on),
         testsTail: () => tests.lines.slice(-14).map((l) => l.text).join('\n'),
         getIssue: (key) => {
-          const { issues } = summarize(traces, [...known.keys()], [...advice.values()]);
+          const { issues } = summarize(traces, [...known.keys()], [...advice.values()], fixedAt);
           return issues.find((i) => i.key === key) || (testRun.report ? testRun.report.issues.find((i) => i.key === key) : null);
         },
         getTrace: (id) => traces.find((t) => t.id === id) || testRun.traces.find((t) => t.id === id),
+        markFixed: (key, after) => {
+          fixedAt.set(key, Date.now());
+          if (after) {
+            const { replayOf, ...trace } = after;
+            traces.push({ ...trace, afterFix: true });
+            received++;
+            if (traces.length > KEEP) replays.delete(traces.shift().id);
+          }
+        },
         getReplay: (id) => replays.get(id),
         restartApp: async () => {
           app.port = null;

package/ui.html

@@ -154,7 +154,15 @@
   .opt-card:has(input:checked) { border-color: var(--accent); background: #ffffff05; }
   .opt-card { cursor: default; } .opt-card > label { cursor: pointer; }
   .opt-card a { color: var(--accent); }
-  .opt-card .btn { text-decoration: none; display: inline-block; }
+  a.btn { text-decoration: none; display: inline-block; }
+  .compare-card { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 4px 0 14px; }
+  .compare-card h4 { margin: 0 0 8px; font-size: 13px; }
+  .compare-card table { width: auto; border-collapse: collapse; font: 13px var(--mono); }
+  .compare-card th { text-align: left; font-weight: 400; color: var(--sub); padding: 3px 18px 3px 0; }
+  .compare-card td { padding: 3px 10px 3px 0; }
+  .compare-card .arrow { color: var(--sub); }
+  .compare-card .better { color: #4ade80; } .compare-card .worse { color: #f87171; } .compare-card .same { color: var(--text); }
+  .compare-card .delta { font-size: 12px; }
   .field input[type=password] { flex: 1; font: 13px var(--mono); color: var(--text); background: var(--bg); border: 1px solid var(--line-2); border-radius: 6px; padding: 6px 8px; }
   .progress { height: 6px; border-radius: 3px; background: var(--raise); overflow: hidden; margin: 10px 0 0; }
   .progress > div { height: 100%; background: var(--accent); transition: width .4s; }
@@ -363,7 +371,7 @@ function renderRequests() {
   return `<h2>${routeFilter ? `<button class="ghost" type="button" id="unfilter">${esc(routeFilter)} ✕</button>` : `latest ${list.length} requests`}</h2><table>
     <thead><tr><th>when</th><th>request</th><th class="n">status</th><th class="n">time</th><th class="n hide-sm">calls</th></tr></thead>
     <tbody>${list.map((t) => `<tr data-trace="${esc(t.id)}" class="${openTrace && openTrace.trace.id === t.id ? 'sel' : ''}">
-      <td class="muted">${ago(t.at)}</td><td><span class="method">${esc(t.method)}</span><span class="route">${esc(t.url)}</span></td>
+      <td class="muted">${ago(t.at)}</td><td><span class="method">${esc(t.method)}</span><span class="route">${esc(t.url)}</span>${t.afterFix ? ' <span class="chip live">after fix</span>' : ''}</td>
       <td class="n ${statusClass(t.status)}">${t.aborted ? 'cancelled' : t.status}</td><td class="n">${ms(t.duration)}</td><td class="n hide-sm muted">${t.spans}</td></tr>`).join('')}</tbody></table>`;
 }
 
@@ -740,6 +748,7 @@ function renderFix() {
     el.innerHTML = html; return;
   }
   html += `<ol class="feed">${j.events.map(feedItem).join('')}${j.stage === 'error' ? `<li class="fi"><span class="dot bad">●</span><div class="verdict bad">${esc(j.error)}</div></li>` : ''}</ol>`;
+  html += compareCard(j);
   const act = [];
   if (j.stage === 'proposed') act.push('<button class="primary" type="button" id="fix-apply">Apply and check</button><button class="ghost" type="button" id="fix-close-2">Discard</button>');
   if (j.stage === 'no-edits') act.push(`<span class="note">No change was applied.</span>${escalateBtn(j)}`);
@@ -754,7 +763,29 @@ function renderFix() {
   el.scrollTop = atBottom || busy ? el.scrollHeight : keepScroll;
 }
 
+/** The same request before and after the change, side by side. */
+function compareCard(j) {
+  const c = j.compare;
+  if (!c || !c.before || !['verified', 'failed', 'unverified', 'kept', 'reverted'].includes(j.stage)) return '';
+  const pct = (a, b) => (a ? Math.round(((b - a) / a) * 100) : 0);
+  const row = (label, a, b, fmt = (x) => x, lowerIsBetter = true) => {
+    const d = pct(a, b);
+    const tone = a === b ? 'same' : (b < a) === lowerIsBetter ? 'better' : 'worse';
+    return `<tr><th>${label}</th><td>${fmt(a)}</td><td class="arrow">→</td><td class="${tone}">${fmt(b)}</td><td class="${tone} delta">${a === b ? '' : `${d > 0 ? '+' : ''}${d}%`}</td></tr>`;
+  };
+  const kind = esc((j.issueTitle || '').split(':')[0]);
+  return `<section class="compare-card"><h4>Same request, before and after the change</h4><table>
+    ${row('time', c.before.ms, c.after.ms, (x) => ms(x))}
+    ${row('database queries', c.before.queries, c.after.queries)}
+    ${c.before.redis || c.after.redis ? row('redis calls', c.before.redis, c.after.redis) : ''}
+    ${c.before.http || c.after.http ? row('outgoing http', c.before.http, c.after.http) : ''}
+    <tr><th>status</th><td>${c.before.status}</td><td class="arrow">→</td><td class="${c.before.status === c.after.status ? 'same' : 'worse'}">${c.after.status}</td><td></td></tr>
+    <tr><th>issue</th><td>${kind || 'found'}</td><td class="arrow">→</td><td class="${c.issueGone ? 'better' : 'worse'}">${c.issueGone ? 'gone' : 'still there'}</td><td></td></tr>
+  </table><p class="note">One request each${c.warmed ? ', the after one measured once the restarted app was warm' : ''}. Query counts are exact; times vary a few ms from run to run.</p></section>`;
+}
+
 function escalateBtn(j) {
+  if (j.errorCode === 'billing') return `<a class="btn primary" href="https://console.anthropic.com/settings/billing" target="_blank" rel="noopener">Add credits</a>`;
   return j.attempt === 0 && j.route.kind === 'anthropic' ? `<button class="ghost" type="button" id="fix-escalate">Try a stronger model</button>` : '';
 }