proxy2model 2.0.0__py3-none-any.whl

proxy2model/report/query.py

@@ -0,0 +1,306 @@
+"""The Query view of the offline report: a BQL console with highlighting, completion and a library.
+
+The engine is `BQL` (bql_js.py); this is only the front end. Left, a library of ready queries built
+from this model (its busiest endpoint, a code-only one, ...), pins and history. Right, the editor
+with live syntax colouring and completion, then the results as a sortable table, or as chains
+for graph paths.
+"""
+
+QRY_CSS = r"""
+/* ask: one box for plain questions and BQL */
+.atabs{display:flex;gap:4px;margin:16px 0 10px;border-bottom:1px solid var(--line)}
+.atab{font:600 12.5px var(--sans);padding:8px 14px;border:0;background:none;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
+.atab.on{color:var(--text);border-bottom-color:var(--signal)}
+.achips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
+.achip{font:500 13px var(--sans);padding:7px 13px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);color:var(--text);max-width:100%}
+.achip.mono{font:500 12px var(--mono)}
+.achip:hover{border-color:var(--signal)}
+.achip small{color:var(--faint);margin-left:6px;font-size:11px}
+.qed{margin-top:4px;position:relative;border:1px solid var(--line2);border-radius:12px;background:var(--panel);box-shadow:var(--shadow)}
+.qed:focus-within{border-color:var(--signal)}
+.qed .hl,.qed textarea{font:14px/1.6 var(--mono);padding:14px 16px;margin:0;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;min-height:76px;letter-spacing:0;tab-size:2}
+.qed .hl{position:absolute;inset:0;pointer-events:none;color:var(--text);overflow:hidden}
+.qed textarea{position:relative;display:block;width:100%;height:76px;resize:vertical;border:0;background:transparent;color:transparent;caret-color:var(--signal);outline:none}
+.qed textarea::selection{background:rgba(232,80,2,.28);color:transparent}
+.hl .f{color:var(--observed)}.hl .o{color:var(--inferred)}.hl .v{color:var(--ok)}.hl .n{color:var(--warn)}.hl .k{color:var(--signal);font-weight:700}.hl .vb{color:var(--l3);font-weight:700}.hl .p{color:var(--faint)}
+.qbar2{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid var(--line);background:var(--panel2);border-radius:0 0 12px 12px}
+.qbar2 .hint{color:var(--faint);font:11.5px var(--mono);margin-right:auto}
+.qbar2 kbd{font:600 10.5px var(--mono);border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--panel);color:var(--muted)}
+.qrun2{height:32px;padding:0 18px;border:1px solid var(--signal);border-radius:8px;background:var(--signal);color:#fff;font:700 13px var(--sans);display:inline-flex;align-items:center;gap:7px}
+.qrun2:hover{filter:brightness(1.07)}
+.qbtn{height:32px;padding:0 11px;border:1px solid var(--line2);border-radius:8px;background:var(--panel);color:var(--muted);font:600 12px var(--sans)}
+.qbtn:hover{color:var(--text)}
+.qac{position:absolute;left:14px;top:calc(100% + 4px);z-index:30;min-width:260px;max-width:420px;background:var(--panel);border:1px solid var(--line2);border-radius:10px;box-shadow:var(--shadow);padding:4px;max-height:260px;overflow:auto}
+.qac button{display:flex;gap:10px;width:100%;text-align:left;padding:6px 9px;border:0;background:none;border-radius:6px;font:12.5px var(--mono);color:var(--text);align-items:baseline}
+.qac button.on,.qac button:hover{background:var(--signal-soft)}
+.qac .dd{color:var(--faint);font:11px var(--sans);margin-left:auto;white-space:nowrap}
+.qerr2{margin-top:14px;padding:12px 14px;border:1px solid var(--bad);border-left-width:4px;border-radius:10px;background:var(--panel);color:var(--bad);font:13px/1.5 var(--mono)}
+.qerr2 .tip{display:block;color:var(--muted);font:12px var(--sans);margin-top:4px}
+.qres{margin-top:16px;display:flex;flex-direction:column;min-height:0}
+.qst{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;font:12px var(--mono);color:var(--muted)}
+.qst b{color:var(--text)}
+.qst .sp{flex:1}
+.qfacets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
+.qf{font:600 11px var(--mono);padding:3px 9px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);color:var(--muted)}
+.qf:hover{border-color:var(--signal);color:var(--text)}
+.qf b{color:var(--text)}
+.qtab{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:auto;max-height:calc(100vh - 360px);min-height:120px}
+.qtab table{font:12.5px var(--mono)}
+.qtab th{position:sticky;top:0;z-index:2}
+.qtab td{max-width:520px;overflow-wrap:anywhere;vertical-align:top}
+.qtab tbody tr:nth-child(even){background:var(--panel3)}
+.qtab tr.rowclick{cursor:pointer}
+.qtab .sg{color:var(--ok)}.qtab .sy{color:var(--warn)}.qtab .sr{color:var(--bad)}.qtab .sb{color:var(--observed)}
+.qtab .st2{font-weight:700}
+.qtab .ob{color:var(--ok)}.qtab .in{color:var(--inferred)}.qtab .ex{color:var(--l6)}
+.qtab .evl{color:var(--signal);font-weight:700}
+.qpaths{display:flex;flex-direction:column;gap:12px}
+.qpath{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px 16px}
+.qpath .ph2{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
+.qchain{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px}
+.qn{font:600 12px var(--mono);padding:5px 10px;border-radius:8px;background:var(--panel2);border:1px solid var(--line2)}
+.qa{font:600 10.5px var(--mono);color:var(--c,var(--muted));display:inline-flex;align-items:center;gap:3px;padding:0 4px}
+.qa::after{content:"→";font-size:14px}
+.qa.ob{--c:var(--observed)}.qa.in{--c:var(--inferred)}.qa.ex{--c:var(--l6)}
+.qref{margin-top:14px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font:12.5px/1.7 var(--mono);color:var(--muted)}
+.qref b{color:var(--text)}
+.qref .row{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:4px 0;border-bottom:1px solid var(--line)}
+.qref .row:last-child{border:0}
+.qempty{margin-top:24px;padding:30px;border:1px dashed var(--line2);border-radius:14px;text-align:center;color:var(--faint);font-size:13px}
+.qempty .big{font:700 15px var(--sans);color:var(--muted);margin-bottom:6px}
+"""
+
+QRY_JS = r"""
+/* ---------- QUERY (BQL console) ---------- */
+let qText="",qRes=null,qErr=null,qHist=[],qMs=0,qSort=null;
+try{qHist=JSON.parse(localStorage.getItem("b2m-qhist")||"[]");}catch(e){}
+const qSave=()=>{try{localStorage.setItem("b2m-qhist",JSON.stringify(qHist));}catch(e){}};
+function qRun(text){
+  qText=text;qErr=null;qRes=null;qSort=null;
+  if(!BQLDB){qErr="This report was built without graph.db. Rebuild with proxy2model to enable queries.";return;}
+  const t0=performance.now();
+  try{qRes=BQL.run(BQLDB,text);qMs=performance.now()-t0;
+    qHist=[text].concat(qHist.filter(x=>x!==text)).slice(0,15);qSave();
+  }catch(e){qErr=e instanceof BQL.BQLError?e.message:"error: "+e.message;}
+}
+/* ready queries, filled in from this model so they work the first time */
+function qLibrary(){
+  const so=EP.find(e=>e.state==="STATIC_ONLY"),busy=[...EP].sort((a,b)=>b.requests-a.requests)[0],pv=EP.find(e=>e.privileged&&e.requests>0),
+        post=EP.find(e=>e.method!=="GET"&&e.method!=="*"&&e.requests>0)||busy;
+  const lab=e=>e?e.label:null;
+  const g=[
+   ["Requests",[
+    ["POST requests that did not fail","req.method:POST AND resp.code.lt:400","every state-changing call that worked"],
+    ["Client and server errors","resp.code.gte:400","4xx and 5xx responses"],
+    ["API traffic","req.path.cont:\"/api/\"","anything under /api/"],
+    ["Set-Cookie responses","resp.header.cont:\"set-cookie\"","who hands out cookies"],
+    ["Mentions of tokens or traces","resp.body.regex:\"stack ?trace|exception|token\"","masked bodies, searched"]]],
+   ["Nodes and edges",[
+    ["Endpoints named only in code","node.type:endpoint AND node.state:STATIC_ONLY","never called in this capture"],
+    ["Everything one role reached","node.role:"+((D.roles||[])[0]||"user"),"nodes tagged with a role"],
+    ["Inferred edges","edge.state:INFERRED limit 50","references read from code"]]],
+   ["Paths",[]],
+   ["Model",[["Open questions","unknowns","what the capture could not answer"],["Stats","stats","counts for this graph"]]]];
+  if(post)g[2][1].push(["How "+lab(post)+" is reached","reach \""+lab(post)+"\"","entry point to endpoint"]);
+  if(busy&&busy!==post)g[2][1].push(["Blast radius of "+lab(busy),"blast \""+lab(busy)+"\" depth 2","what it touches"]);
+  if(so)g[2][1].push(["Who references "+lab(so),"upstream \""+lab(so)+"\"","scripts and pages naming it"]);
+  if(pv)g[2][1].push(["Neighbours of "+lab(pv),"neighbors \""+lab(pv)+"\"","one hop each way"]);
+  if(!g[2][1].length)g.splice(2,1);
+  if(BQLDB&&BQLDB.osint)g.push(["Recon",[["TLS","osint tls","certificate facts"],["Hosts seen only via recon","node.type:subdomain AND node.attr.seen_in_capture:0","never visited"]]]);
+  return g;
+}
+const Q_FIELDS=[
+ ["req.method","request method"],["req.host","request host"],["req.path","request path"],["req.template","templated path"],["req.header","request headers"],["req.body","request body"],
+ ["resp.code","status code (gte, lt…)"],["resp.mime","response type"],["resp.header","response headers"],["resp.body","response body"],["role","role that sent it"],["id","evidence id"],
+ ["node.type","node kind"],["node.label","node label"],["node.id","node id"],["node.layer","layer 1-6"],["node.source","traffic, code or recon"],["node.role","roles that reached it"],["node.state","BOTH · STATIC_ONLY · RUNTIME_ONLY"],["node.evidence","evidence ids"],["node.attr.","any node attribute"],
+ ["edge.type","edge kind"],["edge.state","OBSERVED · INFERRED · EXTERNAL"],["edge.src","source id"],["edge.dst","target id"],["edge.src.type","source kind"],["edge.dst.type","target kind"],["edge.src.label","source label"],["edge.dst.label","target label"]];
+const Q_VERBS=[["reach","how a node is reached"],["blast","what a node touches"],["upstream","what leads to a node"],["neighbors","one hop each way"],["path","a to b"],["osint","recon facts"],["unknowns","open questions"],["stats","graph counts"],["help","the language"],["AND",""],["OR",""],["NOT",""],["limit","cap the rows"]];
+const Q_OPS=[["cont","contains"],["ncont","does not contain"],["eq","equals"],["ne","not equal"],["like","wildcard *"],["regex","regular expression"],["gt","greater"],["gte","greater or equal"],["lt","less"],["lte","less or equal"]];
+function qValues(field){
+  const u=a=>[...new Set(a.filter(Boolean))].sort();
+  if(/^req\.method/.test(field))return u(EVL.map(e=>e.method));
+  if(/^req\.host|^host/.test(field))return u(EVL.map(e=>e.host));
+  if(/^role|^node\.role/.test(field))return u(D.roles||[]);
+  if(/^resp\.mime/.test(field))return u(EVL.map(e=>e.mime));
+  if(/^node\.type/.test(field))return u((D.graph.nodes||[]).map(n=>n.type));
+  if(/^node\.state/.test(field))return ["BOTH","STATIC_ONLY","RUNTIME_ONLY"];
+  if(/^edge\.state/.test(field))return ["OBSERVED","INFERRED","EXTERNAL"];
+  if(/^edge\.type/.test(field))return u((D.graph.edges||[]).map(e=>e.type));
+  if(/^resp\.code/.test(field))return ["200","301","401","403","404","500"];
+  return [];
+}
+/* syntax colouring: one pass, tokens never overlap */
+function qHighlight(t){
+  const re=/("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')|\b([A-Za-z_][\w.\-]*)(:)("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|[^\s()]*)|\b(AND|OR|NOT)\b|\b(reach|blast|upstream|neighbors|path|osint|unknowns|stats|help|limit|depth|to)\b|(\d+)|([()])/g;
+  let out="",i=0,m;
+  while((m=re.exec(t))){
+    out+=esc(t.slice(i,m.index));i=re.lastIndex;
+    if(m[1])out+=`<span class="v">${esc(m[1])}</span>`;
+    else if(m[2]){const parts=m[2].split(".");let op="";if(parts.length>1&&Q_OPS.some(o=>o[0]===parts[parts.length-1]))op=parts.pop();
+      out+=`<span class="f">${esc(parts.join("."))}</span>${op?`<span class="o">.${esc(op)}</span>`:""}<span class="p">:</span><span class="${/^["']/.test(m[4])||isNaN(+m[4])?"v":"n"}">${esc(m[4])}</span>`;}
+    else if(m[5])out+=`<span class="k">${m[5]}</span>`;
+    else if(m[6])out+=`<span class="vb">${m[6]}</span>`;
+    else if(m[7])out+=`<span class="n">${m[7]}</span>`;
+    else out+=`<span class="p">${esc(m[8])}</span>`;
+  }
+  return out+esc(t.slice(i))+"\n";
+}
+function qCell2(col,v,row){
+  if(Array.isArray(v))v=v.join(", ");if(v==null)return "";
+  if(col==="status"||col==="code"){const n=+v,c=n>=500?"sr":n>=400?"sy":n>=300?"sb":n>=200?"sg":"";return `<span class="st2 ${c}">${esc(v)}</span>`;}
+  if(col==="method")return methodm(String(v));
+  if(col==="state")return `<span class="${v==="OBSERVED"?"ob":v==="INFERRED"?"in":v==="EXTERNAL"?"ex":""}">${esc(v)}</span>`;
+  if(col==="ev"||col==="evidence")return `<span class="evl">${esc(String(v).replace(/\bev_(\d+)/g,"EVD $1"))}</span>`;
+  return esc(String(v));
+}
+function qCsv(r){const q=s=>'"'+String(s==null?"":Array.isArray(s)?s.join(";"):s).replace(/"/g,'""')+'"';return [r.columns.map(q).join(",")].concat(r.rows.map(x=>r.columns.map(c=>q(x[c])).join(","))).join("\n");}
+function qDownload(name,text,type){const b=new Blob([text],{type});const u=URL.createObjectURL(b);const a=document.createElement("a");a.href=u;a.download=name;a.click();URL.revokeObjectURL(u);}
+function qResults(){
+  if(qErr){
+    const tip=/cannot read|unexpected|expected|missing/.test(qErr)?"Terms look like field:value, joined with AND, OR, NOT. Type a field name for suggestions.":/no node matches|ambiguous/.test(qErr)?"Use a label from the Map or the Inventory, in quotes.":"";
+    return `<div class="qerr2">${esc(qErr)}${tip?`<span class="tip">${esc(tip)}</span>`:""}</div>`;
+  }
+  const r=qRes;
+  if(!r)return `<div class="qempty"><div class="big">Ask a question</div>Type one above or pick one. Answers are worked out from this report and cite the requests behind them.</div>`;
+  if(r.kind==="text")return `<div class="qref">${qReference()}</div>`;
+  let facets="";
+  if(r.kind==="requests"&&r.rows.length){
+    const m=tally(r.rows,x=>x.method),s=tally(r.rows,x=>statusClass(x.status));
+    facets=`<div class="qfacets">${m.slice(0,5).map(([k,v])=>`<button class="qf" data-add="req.method:${esc(k)}">${esc(k)} <b>${v}</b></button>`).join("")}${s.map(([k,v])=>`<button class="qf" data-add="${k==="2xx"?"resp.code.gte:200 AND resp.code.lt:300":k==="3xx"?"resp.code.gte:300 AND resp.code.lt:400":k==="4xx"?"resp.code.gte:400 AND resp.code.lt:500":"resp.code.gte:500"}">${esc(k)} <b>${v}</b></button>`).join("")}</div>`;
+  }
+  const bar=`<div class="qst"><span><b>${r.total==null?r.rows.length:r.total}</b> ${r.kind==="paths"?"path(s)":"row(s)"}</span><span>· ${qMs<1?"<1":Math.round(qMs)} ms</span><span>· ${esc(r.kind)}</span><span class="sp"></span>
+    <button class="qbtn" id="qcopyj">Copy JSON</button><button class="qbtn" id="qcsv">CSV</button></div>`;
+  if(r.kind==="paths"){
+    const by={};r.rows.forEach(x=>{(by[x.path]=by[x.path]||[]).push(x);});
+    const cls=s=>s==="INFERRED"?"in":s==="EXTERNAL"?"ex":"ob";
+    return bar+`<div class="qpaths">${Object.keys(by).map(k=>{const hs=by[k];return `<div class="qpath"><div class="ph2">path ${k} · ${hs.length} hop${hs.length===1?"":"s"}</div><div class="qchain"><span class="qn">${esc(hs[0].from)}</span>${hs.map(h=>`<span class="qa ${cls(h.state)}" title="${esc(h.state)} · ${esc(h.evidence||"")}">${esc(humanize(h.edge).toLowerCase())}</span><span class="qn">${esc(h.to)}</span>`).join("")}</div></div>`;}).join("")||'<div class="empty">No path found.</div>'}</div>`;
+  }
+  let rows=r.rows.slice();
+  if(qSort){const{k,d}=qSort;rows.sort((a,b)=>{const x=a[k],y=b[k];return (typeof x==="number"&&typeof y==="number"?x-y:String(x==null?"":x).localeCompare(String(y==null?"":y)))*d;});}
+  const rowAttr=row=>row.ev&&/^ev_\d+$/.test(row.ev)?` class="rowclick" data-ev="${row.ev.slice(3)}"`:(row.id&&r.kind==="nodes"?` class="rowclick" data-node="${esc(row.id)}"`:"");
+  return bar+facets+`<div class="qtab"><table><thead><tr>${r.columns.map(c=>`<th data-sk="${esc(c)}">${esc(c==="ev"?"evidence":c)}${qSort&&qSort.k===c?`<span class="ar">${qSort.d>0?" ▲":" ▼"}</span>`:""}</th>`).join("")}</tr></thead><tbody>${
+    rows.length?rows.map(row=>`<tr${rowAttr(row)}>${r.columns.map(c=>`<td>${qCell2(c,row[c],row)}</td>`).join("")}</tr>`).join(""):`<tr><td colspan="${r.columns.length}"><div class="empty">No rows match.</div></td></tr>`}</tbody></table></div>`;
+}
+function qReference(){
+  return `<b>BQL</b> filters requests, nodes or edges, and walks the graph.
+  <div class="row"><b>request</b><span>req.method req.host req.path req.template req.header req.body · resp.code resp.mime resp.header resp.body · role id</span></div>
+  <div class="row"><b>node</b><span>node.type node.label node.id node.layer node.source node.role node.state node.evidence node.attr.&lt;name&gt;</span></div>
+  <div class="row"><b>edge</b><span>edge.type edge.state edge.src edge.dst edge.src.type edge.dst.type edge.src.label edge.dst.label</span></div>
+  <div class="row"><b>operators</b><span>${Q_OPS.map(o=>o[0]).join(" ")} · e.g. <span style="color:var(--text)">resp.code.gte:400</span></span></div>
+  <div class="row"><b>combine</b><span>AND OR NOT ( ) and end with <span style="color:var(--text)">limit N</span></span></div>
+  <div class="row"><b>verbs</b><span>reach &lt;node&gt; · blast &lt;node&gt; [depth N] · upstream &lt;node&gt; · neighbors &lt;node&gt; · path &lt;a&gt; to &lt;b&gt; · osint [section] · unknowns · stats</span></div>`;
+}
+/* a question is BQL when it has field:value terms, a graph verb or AND/OR/NOT; anything else is plain English */
+function looksBql(t){
+  t=(t||"").trim();if(!t)return false;
+  return /^(reach|blast|upstream|neighbors|path|osint|unknowns|stats|help|schema)\b/i.test(t)||/\b[a-z][\w.]*:\S/i.test(t)||/\b(req|resp|node|edge)\.[a-z]/i.test(t)||/\s(AND|OR|NOT)\s/.test(t);
+}
+const ASK_PRESETS=[
+  ["List the endpoints","list the endpoints"],
+  ["What is in the code but never called?","what is referenced in code but never called"],
+  ["Which endpoints only returned errors?","which endpoints only returned errors"],
+  ["Which paths look privileged?","which endpoints look privileged"],
+  ["Who are the third parties?","third parties"],
+  ["What needs a login?","auth and cookies"],
+  ["Which endpoints take parameters?","parameters"],
+  ["What is still unknown?","what are the open questions"],
+];
+let aTab="questions",aNL=null;
+function aAnswerHtml(a){return `<div class="answer"><div class="ahd">${esc(a.title)}</div>${a.html}</div><div class="askfoot">Answered from this report. No AI was called.</div>`;}
+function aOut(){
+  if(aNL)return aAnswerHtml(aNL);
+  return qResults();
+}
+function aChips(){
+  if(aTab==="questions")return ASK_PRESETS.map(([t,q])=>`<button class="achip" data-nl="${esc(q)}">${esc(t)}</button>`).join("");
+  if(aTab==="bql")return qLibrary().flatMap(([g,xs])=>xs).map(x=>`<button class="achip" data-q="${esc(x[1])}" title="${esc(x[1])}">${esc(x[0])}</button>`).join("")+`<button class="achip" id="qhelp">BQL reference</button>`;
+  return qHist.length?qHist.slice(0,10).map(q=>`<button class="achip mono" data-q="${esc(q)}">${esc(q.length>70?q.slice(0,69)+"…":q)}</button>`).join(""):'<span style="color:var(--faint);font-size:13px">Nothing yet. Questions you run will show up here.</span>';
+}
+function vAsk(){
+  return splitShell(`<h1 class="vt">Ask</h1><p class="vsub">Ask in plain English, or type a BQL query for exact filters and graph paths. Answers come from this report. Pick a row to see its request below.</p>
+   <div class="qed"><div class="hl" id="qhl"></div><textarea id="qin" spellcheck="false" autocomplete="off" placeholder='What is in the code but never called?    ·    req.method:POST AND resp.code.gte:400    ·    reach "POST /api/checkout"'>${esc(qText)}</textarea>
+    <div class="qbar2"><span class="hint"><kbd>Enter</kbd> to ask · <kbd>Shift</kbd>+<kbd>Enter</kbd> new line</span><button class="qrun2" id="qgo">Ask</button></div>
+    <div class="qac" id="qac" hidden></div></div>
+   <div class="atabs"><button class="atab${aTab==="questions"?" on":""}" data-atab="questions">Questions</button>${BQLDB?`<button class="atab${aTab==="bql"?" on":""}" data-atab="bql">BQL examples</button>`:""}<button class="atab${aTab==="recent"?" on":""}" data-atab="recent">Recent</button></div>
+   <div class="achips" id="achips">${aChips()}</div>
+   <div class="qres" id="qout">${aOut()}</div>`);
+}
+function initAsk(){
+  splitInit();
+  const inp=$("#qin"),hl=$("#qhl"),ac=$("#qac");
+  const paint=()=>{hl.innerHTML=looksBql(inp.value)?qHighlight(inp.value):esc(inp.value)+"\n";hl.scrollTop=inp.scrollTop;const h=Math.max(76,Math.min(240,inp.scrollHeight));if(inp.scrollHeight>inp.clientHeight)inp.style.height=h+"px";};
+  const out=()=>{$("#qout").innerHTML=aOut();wire();};
+  function ask(text){
+    qText=text;aNL=null;qRes=null;qErr=null;qSort=null;
+    if(!text.trim()){render();return;}
+    if(looksBql(text)&&BQLDB)qRun(text);
+    else{aNL=askEngine(text);qHist=[text].concat(qHist.filter(x=>x!==text)).slice(0,15);qSave();}
+    render();
+  }
+  const go=()=>{ac.hidden=true;ask(inp.value);};
+  /* completion only for BQL-looking words */
+  let items=[],sel=0;
+  function suggest(){
+    const v=inp.value,pos=inp.selectionStart,left=v.slice(0,pos);
+    items=[];
+    const m=/([A-Za-z_][\w.\-]*)(:)?([^\s():]*)?$/.exec(left);
+    if(m&&BQLDB){
+      const word=m[1],hasColon=m[2]===":",val=m[3]||"";
+      const fieldish=/^(req|resp|node|edge|role|id)\b/i.test(word),first=left.trim()===word&&word.length>=2;
+      if(hasColon){const f=word.replace(/\.(cont|ncont|eq|ne|like|regex|gt|gte|lt|lte)$/,"");
+        items=qValues(f).filter(x=>x.toLowerCase().startsWith(val.toLowerCase())&&x!==val).slice(0,8).map(x=>({ins:/\s/.test(x)?'"'+x+'"':x,lab:x,d:"value",at:pos-val.length,end:pos}));}
+      else if(fieldish){
+        const parts=word.split("."),last=parts[parts.length-1],base=parts.slice(0,-1).join(".");
+        if(parts.length>1&&Q_FIELDS.some(f=>f[0]===base)&&!Q_OPS.some(o=>o[0]===last)&&base!=="node.attr")
+          items=Q_OPS.filter(o=>o[0].startsWith(last)&&o[0]!==last).map(o=>({ins:o[0]+":",lab:base+"."+o[0],d:o[1],at:pos-last.length,end:pos}));
+        if(!items.length)items=Q_FIELDS.filter(f=>f[0].toLowerCase().startsWith(word.toLowerCase())&&f[0].toLowerCase()!==word.toLowerCase()).slice(0,8)
+          .map(f=>({ins:f[0]+(f[0].endsWith(".")?"":":"),lab:f[0],d:f[1],at:pos-word.length,end:pos}));
+      }else if(first)items=Q_VERBS.filter(f=>/^[a-z]/.test(f[0])&&f[0].startsWith(word.toLowerCase())&&f[0]!==word.toLowerCase()).slice(0,6).map(f=>({ins:f[0]+" ",lab:f[0],d:f[1],at:pos-word.length,end:pos}));
+    }
+    sel=0;
+    if(!items.length){ac.hidden=true;return;}
+    ac.innerHTML=items.map((it,i)=>`<button data-i="${i}" class="${i===sel?"on":""}"><span>${esc(it.lab)}</span><span class="dd">${esc(it.d)}</span></button>`).join("");
+    ac.hidden=false;
+    $$("button",ac).forEach(b=>b.onmousedown=e=>{e.preventDefault();accept(+b.dataset.i);});
+  }
+  function accept(i){const it=items[i];if(!it)return;const v=inp.value;inp.value=v.slice(0,it.at)+it.ins+v.slice(it.end);const p=it.at+it.ins.length;inp.setSelectionRange(p,p);ac.hidden=true;paint();suggest();}
+  function mark(){$$("button",ac).forEach((b,i)=>b.classList.toggle("on",i===sel));const b=$$("button",ac)[sel];if(b)b.scrollIntoView({block:"nearest"});}
+  inp.addEventListener("input",()=>{paint();suggest();});
+  inp.addEventListener("scroll",()=>{hl.scrollTop=inp.scrollTop;});
+  inp.addEventListener("click",()=>{ac.hidden=true;});
+  inp.addEventListener("blur",()=>setTimeout(()=>{ac.hidden=true;},120));
+  inp.addEventListener("keydown",e=>{
+    if(!ac.hidden){
+      if(e.key==="ArrowDown"){e.preventDefault();sel=(sel+1)%items.length;mark();return;}
+      if(e.key==="ArrowUp"){e.preventDefault();sel=(sel-1+items.length)%items.length;mark();return;}
+      if(e.key==="Tab"){e.preventDefault();accept(sel);return;}
+      if(e.key==="Escape"){ac.hidden=true;return;}
+    }
+    if(e.key==="Enter"&&!e.shiftKey){e.preventDefault();go();}
+  });
+  function wire(){
+    const o=$("#qout");
+    const mark=el=>{$$(".sel",o).forEach(x=>x.classList.remove("sel"));el.classList.add("sel");};
+    $$("[data-ep]",o).forEach(el=>el.onclick=()=>{const e=EP.find(x=>x.id===el.dataset.ep);if(!e)return;mark(el);
+      splitShow(e.evidence,{title:e.label,find:e.state==="STATIC_ONLY"?e.path:null,empty:{head:"Not requested",text:"The code names this endpoint but nothing in the capture called it."}});});
+    $$("[data-ev]",o).forEach(r=>r.onclick=()=>{mark(r);splitShow([+r.dataset.ev],{});});
+    $$("[data-node]",o).forEach(r=>r.onclick=()=>{mark(r);const id=r.dataset.node,ep=EP.find(x=>x.id===id),n=(D.graph.nodes||[]).find(x=>x.id===id);
+      splitShow((ep&&ep.evidence)||(n&&n.evidence)||[],{title:(n&&n.label)||id,empty:{head:"Nothing to open",text:"This node has no request of its own."}});});
+    $$("[data-sk]",o).forEach(h=>h.onclick=()=>{const k=h.dataset.sk;qSort=qSort&&qSort.k===k?{k,d:-qSort.d}:{k,d:1};out();});
+    $$("[data-add]",o).forEach(b=>b.onclick=()=>{inp.value=inp.value.replace(/\s+limit\s+\d+\s*$/i,"").trim()+" AND "+b.dataset.add;paint();go();});
+    const cj=$("#qcopyj");if(cj)cj.onclick=()=>fallbackCopy(JSON.stringify(qRes,null,2),()=>{cj.textContent="Copied";setTimeout(()=>cj.textContent="Copy JSON",1200);});
+    const cv=$("#qcsv");if(cv)cv.onclick=()=>qDownload((D.app||"query")+".bql.csv",qCsv(qRes),"text/csv");
+    const first=$("[data-ep],[data-ev],[data-node]",o);
+    if(first)first.click();else splitShow([]);
+  }
+  $("#qgo").onclick=go;
+  $$("[data-atab]").forEach(b=>b.onclick=()=>{aTab=b.dataset.atab;$$(".atab").forEach(x=>x.classList.toggle("on",x===b));$("#achips").innerHTML=aChips();bindChips();});
+  function bindChips(){
+    $$("[data-nl]",$("#achips")).forEach(b=>b.onclick=()=>{inp.value=b.dataset.nl;ask(b.dataset.nl);});
+    $$("[data-q]",$("#achips")).forEach(b=>b.onclick=()=>{inp.value=b.dataset.q;ask(b.dataset.q);});
+    const h=$("#qhelp");if(h)h.onclick=()=>{aNL=null;qErr=null;qRes={kind:"text",columns:[],rows:[],note:"",total:null};out();};
+  }
+  bindChips();paint();wire();
+  if(!inp.value)inp.focus();
+}
+"""

proxy2model/report/shot.py

@@ -0,0 +1,55 @@
+"""A picture of the app for the report: validated, size-capped, embedded as a data URI.
+
+The pixels are not masked the way text is, so a screenshot is taken automatically only from an
+anonymous crawl's start page. For anything else the user supplies one with --screenshot.
+"""
+
+from __future__ import annotations
+
+import base64
+import os
+
+MAX_BYTES = 3 * 1024 * 1024
+_NAMES = {"image/jpeg": "screenshot.jpg", "image/png": "screenshot.png", "image/webp": "screenshot.webp"}
+
+
+def kind(data: bytes) -> str | None:
+    if data[:3] == b"\xff\xd8\xff":
+        return "image/jpeg"
+    if data[:8] == b"\x89PNG\r\n\x1a\n":
+        return "image/png"
+    if data[:4] == b"RIFF" and data[8:12] == b"WEBP":
+        return "image/webp"
+    return None
+
+
+def load(path: str) -> tuple[str, bytes]:
+    """Read an image file; ValueError says what is wrong with it."""
+    with open(path, "rb") as f:
+        data = f.read(MAX_BYTES + 1)
+    if len(data) > MAX_BYTES:
+        raise ValueError(f"{path} is larger than {MAX_BYTES // (1024 * 1024)} MB")
+    mime = kind(data)
+    if mime is None:
+        raise ValueError(f"{path} is not a PNG, JPEG or WebP image")
+    return mime, data
+
+
+def filename(mime: str) -> str:
+    return _NAMES[mime]
+
+
+def existing(outdir: str) -> tuple[str, bytes] | None:
+    """A screenshot a previous build saved next to the outputs."""
+    for name in _NAMES.values():
+        p = os.path.join(outdir, name)
+        if os.path.exists(p):
+            try:
+                return load(p)
+            except (OSError, ValueError):
+                return None
+    return None
+
+
+def data_uri(mime: str, data: bytes) -> str:
+    return f"data:{mime};base64," + base64.b64encode(data).decode("ascii")

proxy2model/report/view.py

@@ -0,0 +1,213 @@
+"""The request and response viewer the report uses on every page, and the code beautifiers behind it.
+
+`rrMount(el, ids, opts)` draws the masked request and response for one or more evidence ids into `el`.
+JavaScript, HTML and JSON bodies are indented and coloured; Raw shows them untouched. The same
+component sits under the Requests table, the leads list, the reference details and the answers.
+"""
+
+RR_CSS = r"""
+/* request / response viewer */
+.rr{display:flex;flex-direction:column;min-height:0;height:100%;background:var(--panel)}
+.rrbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 12px;border-bottom:1px solid var(--line);background:var(--panel2);flex:none}
+.rrbar .rrt{font:600 12.5px var(--sans);max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rrbar .rrt code{font:600 12px var(--mono)}
+.rrchips{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
+.rrchip{font:600 11px var(--mono);padding:3px 8px;border-radius:6px;border:1px solid var(--line2);background:var(--panel);color:var(--muted)}
+.rrchip.on{background:var(--text);color:var(--ink);border-color:var(--text)}
+.rrchip:hover{border-color:var(--faint);color:var(--text)}
+.rrbar .sp{flex:1}
+.rrpanes{display:flex;flex:1;min-height:0}
+.rr.vert .rrpanes{flex-direction:column}
+.rrp{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--line)}
+.rrp:last-child{border:0}
+.rr.vert .rrp{border-right:0;border-bottom:1px solid var(--line)}
+.rrp .ph{display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--panel2);border-bottom:1px solid var(--line);flex:none}
+.rrp .ph b{font:700 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-right:4px}
+.rrp .ph .st{font:600 11px var(--mono);color:var(--muted)}
+.rrp .ph .tag{font:600 10px var(--mono);color:var(--inferred);border:1px solid var(--inferred);border-radius:4px;padding:0 5px}
+.rrp .ph .sp{flex:1}
+.rrp .code{flex:1;margin:0;overflow:auto;padding:8px 0;font:12px/1.55 var(--mono);background:var(--panel);counter-reset:l}
+.rrp .code .l{display:block;padding:0 12px 0 52px;position:relative;white-space:pre-wrap;word-break:break-all;min-height:1.55em}
+.rrp .code .l::before{counter-increment:l;content:counter(l);position:absolute;left:0;width:40px;text-align:right;color:var(--faint);font-size:11px;user-select:none}
+.rrp .code.nol .l{padding-left:12px}.rrp .code.nol .l::before{display:none}
+.rrp .ln{color:var(--signal);font-weight:700}.rrp .hn{color:var(--observed)}.rrp .hv{color:var(--text)}.rrp .rd{color:var(--inferred);font-weight:700}
+.rrp .tk{color:var(--signal);font-weight:600}.rrp .ts{color:var(--ok)}.rrp .tc{color:var(--faint);font-style:italic}.rrp .tnum{color:var(--warn)}.rrp .tg{color:var(--observed)}.rrp .ta{color:var(--inferred)}
+.rrp .jk{color:var(--observed)}.rrp .js{color:var(--ok)}.rrp .jn{color:var(--warn)}.rrp .jb{color:var(--inferred)}
+.rrp .note{color:var(--faint);font-style:italic}
+.rrp .gap{height:8px}
+.rrempty{display:grid;place-items:center;height:100%;padding:30px;text-align:center;color:var(--faint);font-size:13px;background:var(--panel)}
+.rrempty b{display:block;color:var(--muted);font:600 14px var(--sans);margin-bottom:4px}
+.rrbtn{font:600 11px var(--mono);padding:3px 8px;border-radius:5px;border:1px solid var(--line2);background:var(--panel);color:var(--muted)}
+.rrbtn:hover{color:var(--text)}
+"""
+
+RR_JS = r"""
+/* ---------- code beautifiers (plain JS, no libraries) ---------- */
+function beautifyJS(src){
+  if(!src||src.length>300000)return src||"";
+  const n=src.length,IND="  ";let out="",ind=0,i=0,prev="",afterBrace=false;
+  const ctx=[],pstack=[];let paren=0;
+  const trimEnd=()=>{out=out.replace(/[ \t]+$/,"");};
+  const nl=()=>{trimEnd();out+="\n"+IND.repeat(Math.max(0,ind));};
+  const space=()=>{if(out&&!/[\s(\[]$/.test(out))out+=" ";};
+  const word=(j)=>{let k=j;while(k<n&&/[\w$]/.test(src[k]))k++;return src.slice(j,k);};
+  const lastWord=()=>{const m=/([A-Za-z_$][\w$]*)\s*$/.exec(out);return m?m[1]:"";};
+  while(i<n){
+    const ch=src[i],nx=src[i+1];
+    if(/\s/.test(ch)){let j=i;while(j<n&&/\s/.test(src[j]))j++;if(!afterBrace)space();i=j;continue;}
+    if(afterBrace){
+      afterBrace=false;
+      const w=/[A-Za-z]/.test(ch)?word(i):"";
+      if(ch===")"||ch===","||ch===";"||ch==="."||ch==="]"||w==="else"||w==="catch"||w==="finally"||(w==="while"&&false)){space();}
+      else nl();
+    }
+    if(ch==="/"&&nx==="/"){let j=src.indexOf("\n",i);if(j<0)j=n;space();out+=src.slice(i,j).trimEnd();nl();i=j;continue;}
+    if(ch==="/"&&nx==="*"){let j=src.indexOf("*/",i+2);j=j<0?n:j+2;if(out&&!/\n\s*$/.test(out))nl();out+=src.slice(i,j);nl();i=j;continue;}
+    if(ch==='"'||ch==="'"||ch==="`"){
+      let j=i+1;
+      while(j<n){const c=src[j];
+        if(c==="\\"){j+=2;continue;}
+        if(c===ch)break;
+        if(ch==="`"&&c==="$"&&src[j+1]==="{"){let d=1;j+=2;while(j<n&&d>0){if(src[j]==="{")d++;else if(src[j]==="}")d--;j++;}continue;}
+        if(c==="\n"&&ch!=="`")break;
+        j++;}
+      out+=src.slice(i,j+1);i=j+1;prev=ch;continue;}
+    if(ch==="/"&&(prev===""||/[(,=:\[!&|?{};+\-*%<>~^]/.test(prev)||/^(return|typeof|case|in|of|void|delete|throw)$/.test(lastWord()))){
+      let j=i+1,cls=false;
+      while(j<n){const c=src[j];if(c==="\\"){j+=2;continue;}if(c==="[")cls=true;else if(c==="]")cls=false;else if(c==="/"&&!cls)break;else if(c==="\n"){j=n;break;}j++;}
+      if(j<n&&src[j]==="/"){j++;while(j<n&&/[a-z]/i.test(src[j]))j++;out+=src.slice(i,j);i=j;prev=")";continue;}
+    }
+    if(ch==="{"){
+      let k=i+1;while(k<n&&/\s/.test(src[k]))k++;
+      if(src[k]==="}"){space();out+="{}";i=k+1;prev="}";continue;}
+      const lw=lastWord(),obj=/[(,=:\[?]$/.test(prev)||prev===""&&false||/^(return|case)$/.test(lw);
+      ctx.push(obj?"o":"b");pstack.push(paren);paren=0;
+      space();out+="{";ind++;nl();prev="{";i++;continue;}
+    if(ch==="}"){
+      ctx.pop();paren=pstack.length?pstack.pop():0;ind--;nl();out+="}";prev="}";afterBrace=true;i++;continue;}
+    if(ch===";"){out+=";";prev=";";if(paren<=0)nl();else out+=" ";i++;continue;}
+    if(ch===","){out+=",";prev=",";if(ctx[ctx.length-1]==="o"&&paren<=0)nl();else out+=" ";i++;continue;}
+    if(ch==="("||ch==="["){paren++;out+=ch;prev=ch;i++;continue;}
+    if(ch===")"||ch==="]"){paren--;out+=ch;prev=ch;i++;continue;}
+    if(ch==="="&&nx==="="||ch==="!"&&nx==="="||ch==="="&&nx===">"||ch==="&"&&nx==="&"||ch==="|"&&nx==="|"){
+      let j=i+2;while(src[j]==="=")j++;space();out+=src.slice(i,j)+" ";prev=src[j-1];i=j;continue;}
+    out+=ch;prev=ch;i++;
+  }
+  return out.replace(/\n\s*\n\s*\n/g,"\n\n").trim();
+}
+const VOID=new Set(["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]);
+function beautifyHTML(src){
+  if(!src||src.length>300000)return src||"";
+  const parts=src.split(/(<!--[\s\S]*?-->|<script\b[\s\S]*?<\/script>|<style\b[\s\S]*?<\/style>|<[^>]+>)/gi);
+  const IND="  ";let d=0,out=[];
+  for(const p of parts){
+    if(!p||!p.trim())continue;
+    if(/^<script\b/i.test(p)){
+      const m=/^(<script\b[^>]*>)([\s\S]*?)(<\/script>)$/i.exec(p);
+      if(m){out.push(IND.repeat(d)+m[1]);const body=m[2].trim();if(body)beautifyJS(body).split("\n").forEach(l=>out.push(IND.repeat(d+1)+l));out.push(IND.repeat(d)+m[3]);continue;}
+    }
+    if(/^<style\b/i.test(p)){
+      const m=/^(<style\b[^>]*>)([\s\S]*?)(<\/style>)$/i.exec(p);
+      if(m){out.push(IND.repeat(d)+m[1]);const body=m[2].trim().replace(/\}\s*/g,"}\n").replace(/\{\s*/g,"{\n  ").replace(/;\s*(?!\})/g,";\n  ");if(body)body.split("\n").forEach(l=>out.push(IND.repeat(d+1)+l.trim()));out.push(IND.repeat(d)+m[3]);continue;}
+    }
+    if(p[0]!=="<"){p.split(/\n/).map(x=>x.trim()).filter(Boolean).forEach(x=>out.push(IND.repeat(d)+x));continue;}
+    if(/^<!/.test(p)||/^<\?/.test(p)){out.push(IND.repeat(d)+p);continue;}
+    const close=/^<\//.test(p),name=((/^<\/?([\w:-]+)/.exec(p)||[])[1]||"").toLowerCase();
+    if(close){d=Math.max(0,d-1);out.push(IND.repeat(d)+p);}
+    else{out.push(IND.repeat(d)+p);if(!VOID.has(name)&&!/\/>$/.test(p))d++;}
+  }
+  return out.join("\n");
+}
+/* colouring: one regex pass per language over already-escaped text */
+const JS_KW=/^(?:const|let|var|function|return|if|else|for|while|do|new|class|extends|import|export|from|async|await|try|catch|finally|throw|switch|case|break|continue|default|typeof|instanceof|in|of|this|null|undefined|true|false|void|delete|yield|static|get|set)$/;
+function hlJS(text){
+  const re=/(\/\/[^\n]*|\/\*[\s\S]*?\*\/)|("(?:\\.|[^"\\\n])*"|'(?:\\.|[^'\\\n])*'|`(?:\\.|[^`\\])*`)|\b([A-Za-z_$][\w$]*)\b|(\b\d[\d._]*\b)/g;
+  let out="",last=0,m;
+  while((m=re.exec(text))){
+    out+=esc(text.slice(last,m.index));last=re.lastIndex;
+    if(m[1])out+=`<span class="tc">${esc(m[1])}</span>`;
+    else if(m[2])out+=`<span class="ts">${esc(m[2])}</span>`;
+    else if(m[3])out+=JS_KW.test(m[3])?`<span class="tk">${m[3]}</span>`:esc(m[3]);
+    else out+=`<span class="tnum">${esc(m[4])}</span>`;
+  }
+  return out+esc(text.slice(last));
+}
+function hlHTML(text){
+  const re=/(<!--[\s\S]*?-->)|(<\/?)([\w:-]+)((?:\s+[\w:@.-]+(?:=(?:"[^"]*"|'[^']*'|[^\s>]+))?)*)\s*(\/?>)|(<![^>]*>)/g;
+  let out="",last=0,m;
+  while((m=re.exec(text))){
+    out+=esc(text.slice(last,m.index));last=re.lastIndex;
+    if(m[1])out+=`<span class="tc">${esc(m[1])}</span>`;
+    else if(m[6])out+=`<span class="tc">${esc(m[6])}</span>`;
+    else{const attrs=esc(m[4]||"").replace(/([\w:@.-]+)(=)(&quot;[^&]*?&quot;|&#39;[^&]*?&#39;|[^\s&]+)/g,'<span class="ta">$1</span>$2<span class="ts">$3</span>');
+      out+=`<span class="tg">${esc(m[2])}${esc(m[3])}</span>${attrs}<span class="tg">${esc(m[5])}</span>`;}
+  }
+  return out+esc(text.slice(last));
+}
+function hlJSON(text){
+  try{const o=JSON.parse(text);return esc(JSON.stringify(o,null,2)).replace(/(&quot;(?:[^&]|&(?!quot;))*?&quot;)(\s*:)?|\b(true|false|null)\b|-?\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b/g,
+    (m,s,c,b)=>s?(c?`<span class="jk">${s}</span>${c}`:`<span class="js">${s}</span>`):b?`<span class="jb">${m}</span>`:`<span class="jn">${m}</span>`);}catch(e){return null;}
+}
+function bodyKind(m,ev,isReq){
+  const ct=((m.headers||[]).find(h=>/^content-type$/i.test(h[0]))||["",""])[1].toLowerCase();
+  if(/json/.test(ct))return "json";
+  if(!isReq&&(/javascript|ecmascript/.test(ct)||(ev&&ev.mime==="script")||/\.m?js(\?|$)/.test((ev&&ev.path)||"")))return "js";
+  if(/html/.test(ct)||(!isReq&&ev&&ev.mime==="html"))return "html";
+  if(/xml/.test(ct))return "xml";
+  return "text";
+}
+/* turn one body into numbered, coloured lines (or plain lines when raw) */
+function bodyLines(body,kind,mode){
+  if(!body)return [];
+  let text=body,html;
+  if(mode==="pretty"){
+    if(kind==="json"){const h=hlJSON(body);if(h!=null)return h.split("\n");}
+    else if(kind==="js"){text=beautifyJS(body);html=hlJS(text);}
+    else if(kind==="html"){text=beautifyHTML(body);html=hlHTML(text);}
+  }
+  return (html!=null?html:esc(text)).split("\n");
+}
+function rrPane(title,m,ev,isReq,mode,extra){
+  const kind=m?bodyKind(m,ev,isReq):"text";
+  const has=m&&(m.line||(m.headers||[]).length||m.body);
+  const head=has?`<span class="l"><span class="ln">${esc(m.line||"")}</span></span>`+(m.headers||[]).map(([k,v])=>`<span class="l"><span class="hn">${esc(k)}</span>: <span class="${/\[REDACTED/i.test(v)?"rd":"hv"}">${esc(v)}</span></span>`).join(""):"";
+  const lines=has?bodyLines(m.body,kind,mode):[];
+  const pretty=mode==="pretty"&&(kind==="js"||kind==="html"||kind==="json")&&m&&m.body;
+  const body=lines.length?`<span class="l gap"></span>`+lines.map(l=>`<span class="l">${l}</span>`).join(""):"";
+  const trunc=has&&m.truncated&&m.body?`<span class="l note">... body cut here (the report keeps ${kind==="js"?"40":kind==="html"?"20":"6"} KB)</span>`:"";
+  return {kind,html:has?`<div class="code${mode==="raw"?"":""}">${head}${body}${trunc}</div>`:`<div class="code nol"><span class="l note">Not captured in this export.</span></div>`,pretty};
+}
+const RRS={layout:"h",tab:{req:"pretty",res:"pretty"}};
+try{const s=JSON.parse(localStorage.getItem("b2m-rr")||"{}");if(s.layout)RRS.layout=s.layout;if(s.tab)RRS.tab=Object.assign(RRS.tab,s.tab);}catch(e){}
+const rrSave=()=>{try{localStorage.setItem("b2m-rr",JSON.stringify(RRS));}catch(e){}};
+/* draw the viewer for evidence ids into el. opts: {title, sel, empty:{head,text}, actions:[[label,fn]]} */
+function rrMount(el,ids,opts){
+  opts=opts||{};
+  /* real requests first; the page or script that merely names an endpoint comes after */
+  const code=i=>{const m=(D.evidence["ev_"+i]||{}).mime;return m==="script"||m==="html"?1:0;};
+  ids=(ids||[]).filter(i=>D.evidence["ev_"+i]).map((i,k)=>[i,k]).sort((a,b)=>code(a[0])-code(b[0])||a[1]-b[1]).map(x=>x[0]);
+  const st=el._rr=el._rr||{};st.ids=ids;
+  if(!ids.includes(st.sel))st.sel=opts.sel!=null&&ids.includes(opts.sel)?opts.sel:ids[0];
+  if(!ids.length){const e=opts.empty||{};el.innerHTML=`<div class="rrempty"><div><b>${esc(e.head||"Nothing to show")}</b>${esc(e.text||"Pick something from the list to see its request and response here.")}</div></div>`;return;}
+  const ev=D.evidence["ev_"+st.sel];
+  const mk=(t,m,isReq,k)=>{
+    const p=rrPane(t,m,ev,isReq,RRS.tab[k]);
+    const stx=isReq?"":`<span class="st">${ev.status==null?"":ev.status}${ev.mime?" · "+esc(ev.mime):""}</span>`;
+    return `<div class="rrp"><div class="ph"><b>${t}</b><button class="ptab${RRS.tab[k]==="pretty"?" on":""}" data-rt="${k}:pretty">${p.kind==="js"?"Beautified":"Pretty"}</button><button class="ptab${RRS.tab[k]==="raw"?" on":""}" data-rt="${k}:raw">Raw</button><span class="sp"></span>${stx}${isReq?(opts.actions||[]).map((a,i)=>`<button class="rrbtn" data-ra="${i}">${esc(a[0])}</button>`).join(""):`<button class="rrbtn" data-rcopy>Copy body</button>`}</div>${p.html}</div>`;
+  };
+  const chips=ids.length>1?`<div class="rrchips">${ids.slice(0,14).map(i=>`<button class="rrchip${i===st.sel?" on":""}" data-rs="${i}">${EVD(i)}</button>`).join("")}${ids.length>14?`<span style="color:var(--faint);font:11px var(--mono)">+${ids.length-14}</span>`:""}</div>`:"";
+  const vert=opts.vert||RRS.layout==="v";
+  el.innerHTML=`<div class="rr${vert?" vert":""}"><div class="rrbar"><span class="rrt">${opts.title&&opts.title.trim()?esc(opts.title):opts.title?"":`<code>${esc(ev.method)} ${esc(ev.host)}${esc(ev.path)}</code>`}</span>${chips}<span class="sp"></span>${opts.vert?"":`<button class="rrbtn" data-rl>${RRS.layout==="v"?"Side by side":"Stacked"}</button>`}</div>
+    <div class="rrpanes">${mk("Request",ev.request,true,"req")}${mk("Response",ev.response,false,"res")}</div></div>`;
+  $$("[data-rs]",el).forEach(b=>b.onclick=()=>{st.sel=+b.dataset.rs;rrMount(el,ids,opts);});
+  $$("[data-rt]",el).forEach(b=>b.onclick=()=>{const [k,v]=b.dataset.rt.split(":");RRS.tab[k]=v;rrSave();rrMount(el,ids,opts);});
+  $$("[data-ra]",el).forEach(b=>b.onclick=()=>{const a=(opts.actions||[])[+b.dataset.ra];if(a)a[1](st.sel,b);});
+  const rl=$("[data-rl]",el);if(rl)rl.onclick=()=>{RRS.layout=RRS.layout==="v"?"h":"v";rrSave();rrMount(el,ids,opts);};
+  /* code reads from its first line, not from the response headers */
+  const resp=$$(".rrp",el)[1],gap=resp&&$(".code .gap",resp);
+  if(gap&&ev.response&&["js","html"].includes(bodyKind(ev.response,ev,false))&&RRS.tab.res==="pretty"){const box=gap.closest(".code");box.scrollTop=Math.max(0,gap.offsetTop-6);}
+  const rc=$("[data-rcopy]",el);if(rc)rc.onclick=()=>fallbackCopy(((ev.response||{}).body)||"",()=>{rc.textContent="Copied";setTimeout(()=>rc.textContent="Copy body",1200);});
+}
+/* evidence ids that best show an endpoint, page, script or host */
+const evOf=x=>(x&&x.evidence)||[];
+"""