@slack/radar-mcp 1.4.0 → 1.5.0

package/dist/web/public/index.html

@@ -108,11 +108,71 @@
   .copybar { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
   .copybtn { background:#172a1f; border:1px solid #2c5a3e; color:#7fd6a3; border-radius:6px; padding:3px 9px; font:inherit; font-size:11.5px; cursor:pointer; }
   .copybtn:hover { border-color:#39d98a; color:#39d98a; }
+  /* DB browser (source:"db") */
+  .dbview { display:flex; gap:16px; max-width:1180px; margin-top:8px; height:72vh; }
+  .dbside { flex:0 0 260px; overflow:auto; border:1px solid #1e2a3a; border-radius:10px; padding:12px; }
+  .dbsec { color:#5f7186; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; margin:6px 0 6px; }
+  .dbsec:not(:first-child){ margin-top:14px; }
+  .dbitem { padding:6px 9px; border-radius:7px; cursor:pointer; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  .dbitem:hover { background:#172230; } .dbitem.sel { background:#1d2c3e; color:#39d98a; }
+  .dbitem .rows { float:right; color:#5f7186; font-size:11px; }
+  .dbmain { flex:1; min-width:0; display:flex; flex-direction:column; }
+  .dbqbar { display:flex; gap:8px; margin-bottom:8px; }
+  .dbqbar input { flex:1; background:#121925; border:1px solid #243244; border-radius:8px; color:#e8f0f8; padding:8px 11px; font:inherit; font-size:12.5px; }
+  .dbqbar input:focus { outline:none; border-color:#39d98a; }
+  .dbqbar button { background:#1c3a2a; border:1px solid #39d98a; color:#39d98a; border-radius:8px; padding:0 16px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
+  .dbmeta { color:#5f7186; font-size:11.5px; margin-bottom:8px; }
+  .dbprivacy { background:#2a2112; border:1px solid #6b5320; color:#e8c879; border-radius:8px; padding:8px 11px; font-size:11.5px; line-height:1.5; margin-bottom:10px; }
+  .dbprofile { color:#7d9bd6; font-size:11.5px; margin-bottom:8px; }
+  .dbprofile b { color:#cfe0f0; }
+  .dbprofcap { color:#5f7186; text-transform:uppercase; letter-spacing:.06em; font-size:10px; }
+  .dbprofile select { background:#121925; border:1px solid #243244; border-radius:6px; color:#e8f0f8; padding:3px 6px; font:inherit; font-size:11px; margin-left:4px; }
+  .dbrefresh { background:#1c2a3a; border:1px solid #2c3e52; border-radius:6px; color:#8aa0b4; padding:2px 8px; font:inherit; font-size:11px; cursor:pointer; margin-left:8px; }
+  .dbrefresh:hover { border-color:#39d98a; color:#39d98a; }
+  .dbout { flex:1; overflow:auto; border:1px solid #1e2a3a; border-radius:10px; }
+  .dbout table { border-collapse:collapse; width:100%; font-size:12px; }
+  .dbout th { position:sticky; top:0; background:#121925; color:#8aa0b4; text-align:left; padding:7px 10px; border-bottom:1px solid #1e2a3a; white-space:nowrap; }
+  .dbout td { padding:6px 10px; border-bottom:1px solid #16202c; max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .dbout tr:hover td { background:#10161f; }
+  .msg { color:#5f7186; font-size:12px; padding:10px; }
+  .msg.err { color:#ff6b60; }
+  /* Screen overlay: a global panel docked to the right, available over any tab. */
+  .screenbtn { background:#121925; border:1px solid #243244; color:#8aa0b4; border-radius:8px; padding:5px 12px; font:inherit; font-size:12.5px; cursor:pointer; margin-left:8px; }
+  .screenbtn:hover { border-color:#39d98a; color:#dfe7ef; }
+  .screenbtn.on { background:#1c3a2a; border-color:#39d98a; color:#39d98a; }
+  #screenpanel { position:fixed; top:0; right:0; bottom:0; width:340px; background:#0b1016; border-left:1px solid #1e2a3a; z-index:40; display:none; flex-direction:column; padding:12px; box-shadow:-4px 0 16px rgba(0,0,0,.4); overflow:auto; }
+  #screenpanel.on { display:flex; }
+  body.screenopen { padding-right:356px; }
+  #screenpanel .schead { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
+  #screenpanel .schead .sctitle { font-size:12.5px; color:#dfe7ef; font-weight:600; flex:1; }
+  #screenpanel .scbtn { background:#121925; border:1px solid #243244; color:#8aa0b4; border-radius:6px; padding:3px 9px; font:inherit; font-size:11.5px; cursor:pointer; }
+  #screenpanel .scbtn:hover { border-color:#39d98a; color:#dfe7ef; }
+  #screenpanel .scbtn.rec { color:#ff6b60; border-color:#5a2c2c; }
+  #screenimg { width:100%; border:1px solid #1e2a3a; border-radius:8px; background:#000; min-height:120px; }
+  #schint { font-size:11.5px; color:#5f7186; margin-top:8px; line-height:1.5; }
+  .scconsent { background:#161b22; border:1px solid #2c3a4a; border-radius:8px; padding:12px; font-size:12px; color:#cfd8e3; line-height:1.55; }
+  .scconsent b { color:#ffd479; }
+  .scconsent .scaccept { background:#1c3a2a; border:1px solid #39d98a; color:#39d98a; border-radius:6px; padding:6px 14px; font:inherit; font-size:12px; cursor:pointer; margin-top:10px; }
+  .scconsent .scaccept:hover { background:#24492f; }
+  .scinstall { background:#0e151e; border:1px solid #1e2a3a; border-radius:6px; padding:8px 10px; margin-top:8px; font-size:11.5px; color:#cfe3d6; }
+  .scinstall code { color:#7fd6a3; }
+  .scinstall .sccopy { background:#172a1f; border:1px solid #2c5a3e; color:#7fd6a3; border-radius:5px; padding:2px 8px; font:inherit; font-size:11px; cursor:pointer; margin-left:6px; }
 </style></head>
 <body>
   <div id="flash"></div>
   <div id="alertbanner"></div>
-  <h1>SLACK RADAR DASHBOARD  <span class="conn waiting" id="conn">&#9679; connecting…</span> <button id="reconnect" class="reconnect" style="display:none">⟳ Reconnect Radar</button></h1>
+  <h1>SLACK RADAR DASHBOARD  <span class="conn waiting" id="conn">&#9679; connecting…</span> <button id="reconnect" class="reconnect" style="display:none">⟳ Reconnect Radar</button> <button id="screenbtn" class="screenbtn" title="Mirror the live device screen">▣ Screen</button></h1>
+  <div id="screenpanel">
+    <div class="schead">
+      <span class="sctitle">Device screen</span>
+      <button class="scbtn" id="screenshot" title="Full-resolution screenshot">📷</button>
+      <button class="scbtn" id="screenrec" title="Record to mp4">● rec</button>
+      <button class="scbtn" id="screenredetect" title="Re-detect the active display">⟳</button>
+      <button class="scbtn" id="screenclose" title="Close">✕</button>
+    </div>
+    <div id="screenbody"></div>
+    <div id="schint"></div>
+  </div>
   <div class="modebar" id="modebar"></div>
   <div class="status" id="status"></div>
   <div class="sub" id="sub"></div>
@@ -135,6 +195,15 @@
     </div>
     <div class="inspector" id="inspector" style="display:none"></div>
   </div>
+  <div class="dbview" id="dbview" style="display:none">
+    <div class="dbside"><div class="dbsec">databases</div><div id="db_dbs" class="msg">loading…</div><div class="dbsec">tables</div><div id="db_tbls" class="msg">pick a database</div></div>
+    <div class="dbmain">
+      <div class="dbprivacy">Privacy: opening a database copies the on-device Slack store (message text, request/response bodies, user, channel, and team IDs) in plaintext to a temp file on this machine. The copy is read-only and auto-deleted when this dashboard stops. Review before sharing anything from here.</div>
+      <div class="dbqbar"><input id="db_sql" placeholder="SELECT * FROM table LIMIT 100   (read-only)" autocomplete="off"/><button id="db_run">Run</button></div>
+      <div class="dbmeta" id="db_meta"></div>
+      <div class="dbout" id="db_out"><div class="msg">pick a database, then a table</div></div>
+    </div>
+  </div>
 <script>
 // The web page is just pre-built dashboard TABS over the device Radar stream. No in-page
 // Claude. Customization happens in a terminal Claude Code session (via the
@@ -154,11 +223,12 @@ let SPEC=null;
 // Presets use only generic placeholders. The dashboard learns the real endpoints,
 // channels, and event names LIVE from the device stream; nothing internal is baked in.
 const MODES=[
-  {key:'all',  label:'Live',     spec:{title:'Mission Control',summary:'Live: network, RTM, analytics clogs, and Slack-app logcat in one timeline. (Logs filtered to the Slack app; clear the package chip for all apps.)',source:'all',viz:['counter','rate','sparkline','feed','inspector'],match:{package:'com.Slack.internal.debug'}}},
+  {key:'all',  label:'Live',     spec:{title:'Live',summary:'Live: network, RTM, analytics clogs, and Slack-app logcat in one timeline. (Logs filtered to the Slack app; clear the package chip for all apps.)',source:'all',viz:['counter','rate','sparkline','feed','inspector'],match:{package:'com.Slack.internal.debug'}}},
   {key:'network',label:'Network',spec:{title:'Network',summary:'Network calls per second vs average response time, every call listed, slow ones flagged.',source:'network',viz:['counter','rate','graph','feed','inspector'],series:[{metric:'ratePerSec',label:'calls/s',unit:'/s'},{metric:'avg',field:'duration_ms',label:'avg ms',unit:'ms'}],highlight:{field:'duration_ms',op:'>',value:800,label:'slow (>800ms)'},rateWindowSec:10}},
   {key:'rtm',  label:'RTM',      spec:{title:'RTM',summary:'Real-time websocket events as they happen.',source:'rtm',viz:['counter','rate','feed','inspector']}},
   {key:'clog', label:'Clogs',    spec:{title:'Clogs',summary:'Analytics clog events, click any to see its full payload.',source:'clog',viz:['counter','rate','feed','inspector']}},
   {key:'log',  label:'Logs',     spec:{title:'Device Logs',summary:'Live Slack app logcat, color-coded by level. Clear the package chip for all apps, or switch app with the dropdown.',source:'log',viz:['counter','feed','inspector'],match:{package:'com.Slack.internal.debug'}}},
+  {key:'db',   label:'Database', spec:{title:'Device DB',summary:'Browse the on-device SQLite databases (read-only snapshot).',source:'db'}},
 ];
 // A spec is "custom" when it did NOT come from a MODES preset — i.e. a terminal Claude
 // session pushed it via the open_radar_dashboard MCP tool. We detect that by comparing
@@ -166,6 +236,13 @@ const MODES=[
 let CUSTOM_ACTIVE=false;          // is the live spec the custom (Claude-pushed) one RIGHT NOW?
 let lastCustomSpec=null;          // the most-recent custom spec; keeps the Custom tab present
                                   // until a page refresh, so you can flip back to it.
+// A spec pushed by THIS browser (a Filters-panel Apply, or a tab click) is a local edit, not
+// a Claude-pushed custom dashboard — so it must NOT spawn a "Custom" tab. localPushKey holds
+// the JSON of the next spec we expect back from /spec because we just pushed it; pollSpec sees
+// it match and treats it as a local edit (stays on the current tab). Only a non-preset spec we
+// did NOT push (an MCP open_radar_dashboard) becomes the Custom tab.
+let localPushKey=null;
+function markLocalPush(spec){ localPushKey=JSON.stringify(spec); }
 function specMatchesMode(spec){ if(!spec||spec.blank) return null;
   return MODES.find(m=>JSON.stringify(m.spec)===JSON.stringify(spec))?.key || null; }
 function renderModes(){ const bar=document.getElementById('modebar'); if(!bar) return;
@@ -239,8 +316,11 @@ document.addEventListener('keydown',(e)=>{
 // ---- poll /spec; rebuild when it changes, and show/hide the Custom tab accordingly ----
 let specKey='';
 async function pollSpec(){ try{ const spec=await (await fetch('/spec')).json(); const key=JSON.stringify(spec); if(key===specKey) return; specKey=key;
-  // a non-blank spec that matches no preset = a Claude-pushed custom dashboard
-  CUSTOM_ACTIVE = !!spec && !spec.blank && specMatchesMode(spec)===null;
+  // A non-blank spec that matches no preset is a Claude-pushed custom dashboard — UNLESS this
+  // browser just pushed it (a Filters-panel Apply or a tab click), which is a local edit and
+  // must stay on the current tab, not spawn a Custom tab.
+  const isLocalEdit = key===localPushKey; if(isLocalEdit) localPushKey=null;
+  CUSTOM_ACTIVE = !isLocalEdit && !!spec && !spec.blank && specMatchesMode(spec)===null;
   let needRerender=false;
   if(CUSTOM_ACTIVE){ // remember it so the tab persists; re-render if it's new/changed
     if(!lastCustomSpec || JSON.stringify(lastCustomSpec)!==JSON.stringify(spec)){ lastCustomSpec=spec; needRerender=true; }
@@ -259,10 +339,20 @@ async function bootDefault(){ try{ const cur=await (await fetch('/spec')).json()
 bootDefault();
 // Connection dot driven by an always-on device health check, independent of whether
 // a dashboard is built (a blank dashboard has no stream, so the dot was otherwise dead).
-let lastEventTs=0;
+let lastEventTs=0, healthMisses=0;
+// Clear a stale red "device unreachable / backfill failed" status once health is back. These
+// errors are set once (e.g. at build/backfill time) and were otherwise sticky until a tab
+// switch — so a transient blip left the red banner up long after the device recovered.
+function clearStaleError(){ if(statusEl.classList.contains('err')) setStatus('',''); }
 async function pollHealth(){
-  if(Date.now()-lastEventTs<4000){ setConn('connected',''); return; }
-  try{ const h=await (await fetch('/health')).json(); setConn(h.device?'connected':'waiting', h.device?'':'device offline, retrying…'); }catch{ setConn('waiting','reconnecting…'); } }
+  // Recent stream activity proves liveness without a /health round-trip.
+  if(Date.now()-lastEventTs<6000){ healthMisses=0; setConn('connected',''); clearStaleError(); return; }
+  try{ const h=await (await fetch('/health')).json();
+    if(h.device){ healthMisses=0; setConn('connected',''); clearStaleError(); }
+    // Require TWO consecutive misses before flipping the dot — a single slow/missed poll
+    // (while the stream is otherwise fine) should not flash "connecting".
+    else if(++healthMisses>=2){ setConn('waiting','device offline, retrying…'); }
+  }catch{ if(++healthMisses>=2) setConn('waiting','reconnecting…'); } }
 pollHealth(); setInterval(pollHealth,2000);
 
 // ---- the dashboard engine: build(spec) tears down and rebuilds widgets live ----
@@ -282,7 +372,21 @@ function build(spec){
   counterEl=rateEl=sparkEl=null;
   const insp=document.getElementById('inspector'), stage=document.getElementById('stage');
   if(es){ es.close(); es=null; } if(tickTimer){ clearInterval(tickTimer); tickTimer=null; }
-  if(SPEC.blank){ document.getElementById('sub').textContent='Pick a dashboard above (Live, Network, RTM, Clogs, Logs). For a custom view, ask a Claude Code session in your terminal to build one — it appears here as a Custom tab.'; insp.style.display='none'; stage.classList.remove('split'); document.getElementById('filterpanel').style.display='none'; stage.style.display='flex'; return; }
+  const dbv=document.getElementById('dbview');
+  const fp=document.getElementById('filterpanel');
+  if(SPEC.blank){ document.getElementById('sub').textContent='Pick a dashboard above (Live, Network, RTM, Clogs, Logs, Database). For a custom view, ask a Claude Code session in your terminal to build one — it appears here as a Custom tab.'; insp.style.display='none'; stage.classList.remove('split'); if(fp) fp.style.display='none'; stage.style.display='flex'; if(dbv) dbv.style.display='none'; return; }
+  if(SPEC.source==='db'){
+    // The DB browser is a distinct, point-in-time view (no stream/widgets/filters). Hide the
+    // streaming UI + the Filters panel, show the db list -> tables -> query grid.
+    stage.style.display='none'; cards.style.display='none'; insp.style.display='none';
+    if(fp) fp.style.display='none';
+    const subEl=document.getElementById('sub');
+    subEl.innerHTML='<span class="summary">'+esc(SPEC.summary||'Device database browser')+'</span><span class="tech">source=db (on-device SQLite snapshot, read-only)</span>';
+    if(dbv) dbv.style.display='flex';
+    buildDbView(SPEC);
+    return;
+  }
+  if(dbv) dbv.style.display='none';
   document.getElementById('stage').style.display='flex'; cards.style.display='grid';
   if(showInspector()){ insp.style.display='block'; insp.innerHTML='<div class="label">inspector</div><div class="empty">click a row to see its full detail</div>'; }
   else { insp.style.display='none'; }
@@ -290,7 +394,7 @@ function build(spec){
   stage.classList.toggle('split', split); stage.classList.toggle('haswidth', split);
   setupFeedControls();
   const subEl=document.getElementById('sub');
-  const tech='source='+SPEC.source+'  match='+JSON.stringify(SPEC.match||{})+(SPEC.extract?'  extract='+SPEC.extract.field:'');
+  const tech=describeConstraints(SPEC);
   subEl.innerHTML = SPEC.summary
     ? '<span class="summary">'+esc(SPEC.summary)+'</span><span class="tech">'+esc(tech)+'</span>'
     : esc(SPEC.title+' — '+tech);
@@ -426,6 +530,7 @@ async function applyFilters(){
   if(hf&&hv!==''&&!isNaN(Number(hv))) spec.highlight={field:hf,op:g('f_hlop').value,value:Number(hv),label:(SPEC.highlight&&SPEC.highlight.label)||hf}; else delete spec.highlight;
   const rw=Number(g('f_rate').value); if(rw>0) spec.rateWindowSec=rw;
   const msg=g('f_msg'); msg.textContent='applying…';
+  markLocalPush(spec); // a hand-edit of the current view, not a Claude-pushed Custom dashboard
   try{ const r=await (await fetch('/setspec',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(spec)})).json();
     msg.textContent = r.ok?'applied ✓':('⚠ '+(r.error||'rejected')); }
   catch{ msg.textContent='⚠ failed'; }
@@ -436,13 +541,18 @@ function setConn(state,msg){ const d=document.getElementById('conn'); if(!d) ret
   const rc=document.getElementById('reconnect'); if(rc && !rc._busy) rc.style.display = state==='connected' ? 'none' : 'inline-block'; }
 async function doReconnect(){ const rc=document.getElementById('reconnect'); if(!rc) return; rc._busy=true; rc.disabled=true; rc.textContent='⟳ enabling…';
   try{ await fetch('/enable',{method:'POST'}); }catch{}
-  rc._busy=false; rc.disabled=false; rc.textContent='⟳ Reconnect Radar'; pollHealth(); }
+  rc._busy=false; rc.disabled=false; rc.textContent='⟳ Reconnect Radar'; pollHealth(); pollSpec(); }
 // live defaults true so the SSE handler (es.onmessage=onEvent) keeps firing alerts on
 // genuine arrivals; backfill() passes live=false so replayed device HISTORY counts toward
 // widgets without triggering alerts for events that already happened.
 function onEvent(m, live){ if(live===undefined) live=true; let f; try{f=JSON.parse(m.data);}catch{return;}
   if(f.type==='_status'){ setConn(f.event.state, f.event.msg); return; }
   if(f.type==='_error'){ setConn('waiting', f.event.msg); return; }
+  // Server-replayed log history is tagged replay:true. Treat it as history (live=false)
+  // so it never fires alerts or pulses, even on a fresh browser whose own cache is empty
+  // (the server log ring outlives/outsizes the client cache, so reconnect replay can carry
+  // frames the client never saw). Live frames are unaffected.
+  if(f.replay) live=false;
   if(!['network','rtm','clog','log'].includes(f.type)) return;
   lastEventTs=Date.now(); setConn('connected','');
   const ev=f.event||{}; ev._type=f.type;
@@ -502,6 +612,22 @@ function replayCache(){
   const rows=CACHE.filter(c=> (SPEC.source==='all'||c.type===SPEC.source));
   for(const c of rows){ const ev=c.ev; ev._type=c.type; if(matches(ev)) acceptEvent(ev,false); }
 }
+// Rebuild the FEED rows from the session cache for the current FEED.filter, WITHOUT
+// touching counters/graph (those already counted every event). Needed because addRow now
+// drops non-matching rows from the DOM entirely (not insert-then-hide), so changing or
+// clearing the feed filter cannot just un-hide rows that are no longer there — it must
+// re-add the matching ones from the cache.
+function rebuildFeedFromCache(){
+  if(!feed) return;
+  feed.innerHTML='';
+  const rows=CACHE.filter(c=> (SPEC.source==='all'||c.type===SPEC.source));
+  for(const c of rows){ const ev=c.ev; ev._type=c.type;
+    if(!matches(ev)) continue;
+    const r=addRow(ev, ev.timestamp||Date.now());
+    if(r && SPEC.extract) enrich(ev).then(val=>{ if(val!=null&&r) appendExtract(r,val); });
+  }
+  if(FEED.sort!=='newest') applyFeedControls(); else updateFeedCount();
+}
 // accept an event into the widgets. live=true for stream arrivals (fires alerts, enrich,
 // pulse); live=false for cache replay (silent, time-accurate). Buckets by the event's own
 // timestamp so replayed history lands in the right second of the rate/sparkline/graph.
@@ -603,7 +729,11 @@ function addRow(ev,now){ if(!has('feed')) return null; const r=document.createEl
     const b=document.createElement('span'); b.className='breachbadge'; b.textContent=fmtNum(v)+unit+'  '+(h.op||'>')+' '+h.value+unit;
     r.appendChild(b); }
   r._search=(r.textContent||'').toLowerCase(); r._ev=ev; r._ts=ev.timestamp||now;
-  if(FEED.filter && !r._search.includes(FEED.filter)) r.classList.add('hidden');
+  // When the feed text filter is active, DROP non-matching rows entirely instead of
+  // inserting-then-hiding them. The 200-row DOM cap below counts every child, so hidden
+  // non-matching rows would otherwise flood the cap and evict the matching rows the user
+  // is watching for (filtered rows flash in, then vanish as unmatched rows push them out).
+  if(FEED.filter && !r._search.includes(FEED.filter)) return null;
   const atTop = feed.scrollTop <= 4;
   feed.insertBefore(r,feed.firstChild); while(feed.children.length>200) feed.removeChild(feed.lastChild);
   if(!atTop){ feed.scrollTop += r.offsetHeight; }
@@ -645,9 +775,16 @@ function setupFeedControls(){
   fs.value=FEED.sort;
   const fx=document.getElementById('ffilterclear');
   const syncClear=()=>{ if(fx) fx.style.display = fi.value ? 'block' : 'none'; };
-  const clearFilterBox=()=>{ fi.value=''; FEED.filter=''; syncClear(); applyFeedControls(); fi.focus(); };
+  const clearFilterBox=()=>{ fi.value=''; FEED.filter=''; syncClear(); rebuildFeedFromCache(); fi.focus(); };
   syncClear();
-  fi.oninput=()=>{ FEED.filter=fi.value.trim().toLowerCase(); syncClear(); applyFeedControls(); };
+  // Rebuild from cache (not just hide/show) because addRow drops non-matching rows from
+  // the DOM, so a filter change must re-add matching rows that are no longer present.
+  // Debounced: oninput fires per keystroke, and rebuild re-runs enrich() per matching row
+  // on extract dashboards, so an undebounced rebuild-per-keystroke can fan out /detail
+  // fetches. Settle ~180ms after the last keystroke before rebuilding.
+  let filterTimer=null;
+  fi.oninput=()=>{ FEED.filter=fi.value.trim().toLowerCase(); syncClear();
+    if(filterTimer) clearTimeout(filterTimer); filterTimer=setTimeout(rebuildFeedFromCache,180); };
   fi.onkeydown=(e)=>{ if(e.key==='Escape') clearFilterBox(); };
   if(fx) fx.onclick=clearFilterBox;
   fs.onchange=()=>{ FEED.sort=fs.value; applyFeedControls(); };
@@ -767,8 +904,179 @@ function appendExtract(row,val){ const s=document.createElement('span'); s.class
 // attribute and inject an event handler (DOM-XSS with no < or > needed). All esc() call
 // sites in this file feed HTML, so escaping quotes is safe everywhere.
 function esc(s){ return String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
+// Human-readable one-line summary of a spec's actual filters + constraints, so every tab
+// (the Custom one especially) explains what it is showing rather than just "source=X".
+// Covers the fields the old "source=X match={}" line dropped: highlight, bodyContains,
+// alert, graph series, rate window. Returns a "·"-joined clause string.
+function describeConstraints(spec){
+  const parts=['source '+spec.source];
+  if(spec.match && Object.keys(spec.match).length)
+    parts.push('where '+Object.entries(spec.match).map(([k,v])=>k+'='+v).join(', '));
+  if(spec.bodyContains) parts.push('body contains "'+spec.bodyContains+'"');
+  if(spec.highlight && spec.highlight.field)
+    parts.push('flag '+spec.highlight.field+' '+(spec.highlight.op||'>')+' '+spec.highlight.value+(spec.highlight.label?' ('+spec.highlight.label+')':''));
+  if(Array.isArray(spec.series) && spec.series.length)
+    parts.push('graph '+spec.series.map(s=>s.label||s.metric+(s.field?' of '+s.field:'')).join(' vs '));
+  if(spec.extract && spec.extract.field) parts.push('extract '+spec.extract.field);
+  if(spec.alert){ const a=spec.alert; parts.push('alert'+(a.at?' at '+a.at:'')+(a.say?' "'+a.say+'"':'')); }
+  if(spec.rateWindowSec) parts.push('rate window '+spec.rateWindowSec+'s');
+  return parts.join('  ·  ');
+}
 function card(label,inner){ const d=document.createElement('div'); d.className='card'; d.innerHTML='<div class="label">'+label+'</div>'+inner; return d; }
 function big(v,id,unit){ return '<div class="big"><span id="'+id+'">'+v+'</span>'+(unit?'<span class="unit">'+unit+'</span>':'')+'</div>'; }
 
+// ---- DB browser view (source:"db"): db list -> tables -> read-only query grid ----
+let DBV={ db:null, user:null };
+// Build the ?user= suffix so every db call targets the profile the operator picked
+// (or the dashboard's bound profile). Keeps list / pull / query on the same store.
+function dbUserQS(){ return DBV.user!=null ? '&user='+encodeURIComponent(DBV.user) : ''; }
+async function buildDbView(spec){
+  const dbsEl=document.getElementById('db_dbs'), tblsEl=document.getElementById('db_tbls');
+  document.getElementById('db_run').onclick=dbRun;
+  document.getElementById('db_sql').onkeydown=e=>{ if(e.key==='Enter') dbRun(); };
+  tblsEl.innerHTML='<div class="msg">pick a database</div>';
+  document.getElementById('db_out').innerHTML='<div class="msg">pick a database, then a table</div>';
+  document.getElementById('db_meta').textContent='';
+  dbsEl.innerHTML='<div class="msg">loading…</div>';
+  await loadDbList(spec);
+}
+function profileLabel(u){ return u===''||u==null ? 'device' : (u==='0' ? 'personal (user 0)' : 'secondary (user '+esc(u)+')'); }
+async function loadDbList(spec){
+  const dbsEl=document.getElementById('db_dbs');
+  try{ const r=await (await fetch('/dbs?'+dbUserQS().slice(1))).json();
+    if(r.error){ dbsEl.innerHTML='<div class="msg err">'+esc(r.error)+'</div>'; return; }
+    if(!r.names||!r.names.length){ dbsEl.innerHTML='<div class="msg">no databases (device unreachable, or debug build not installed)</div>'; return; }
+    DBV.user = r.user;
+    // Which profile's store this is. With more than one profile, show ONLY a switcher
+    // (the dropdown's selected option already names the profile — no redundant text line).
+    // With a single profile, show it as plain text.
+    const avail=r.availableUsers||[];
+    let head;
+    if(avail.length>1){
+      head='<div class="dbprofile"><span class="dbprofcap">profile</span> <select id="db_userpick" title="which profile\'s on-device store to browse">'+
+        avail.map(u=>'<option value="'+esc(u)+'"'+(u===r.user?' selected':'')+'>'+profileLabel(u)+'</option>').join('')+'</select></div>';
+    } else {
+      head='<div class="dbprofile">profile: <b>'+profileLabel(r.user)+'</b></div>';
+    }
+    dbsEl.innerHTML=head+r.names.map(n=>'<div class="dbitem" data-n="'+esc(n)+'">'+esc(n)+'</div>').join('');
+    dbsEl.querySelectorAll('.dbitem').forEach(d=>d.onclick=()=>dbSelectDb(d.dataset.n,d));
+    const pick=document.getElementById('db_userpick');
+    if(pick) pick.onchange=()=>{ DBV.user=pick.value; DBV.db=null;
+      document.getElementById('db_tbls').innerHTML='<div class="msg">pick a database</div>';
+      document.getElementById('db_out').innerHTML='<div class="msg">pick a database, then a table</div>';
+      document.getElementById('db_meta').textContent=''; loadDbList(spec); };
+    if(spec&&spec.db){ const el=[...dbsEl.querySelectorAll('.dbitem')].find(x=>x.dataset.n===spec.db); if(el) dbSelectDb(spec.db,el,spec.table,spec.sql); }
+  }catch(e){ dbsEl.innerHTML='<div class="msg err">'+esc(String(e))+'</div>'; }
+}
+async function dbSelectDb(name,el,wantTable,wantSql,refresh){ DBV.db=name;
+  document.querySelectorAll('#db_dbs .dbitem').forEach(x=>x.classList.remove('sel')); if(el) el.classList.add('sel');
+  // clear stale SQL/results so a leftover table query can't run against the newly-picked db
+  document.getElementById('db_sql').value=''; document.getElementById('db_out').innerHTML='<div class="msg">pick a table or write a query</div>';
+  const tblsEl=document.getElementById('db_tbls'); tblsEl.innerHTML='<div class="msg">'+(refresh?'re-pulling':'pulling')+' + reading…</div>';
+  try{ const r=await (await fetch('/dbtables?db='+encodeURIComponent(name)+dbUserQS()+(refresh?'&refresh=1':''))).json();
+    if(r.error){ tblsEl.innerHTML='<div class="msg err">'+esc(r.error)+'</div>'; return; }
+    tblsEl.innerHTML=r.tables.map(t=>'<div class="dbitem" data-t="'+esc(t.name)+'">'+esc(t.name)+'<span class="rows">'+esc(String(t.rows))+'</span></div>').join('');
+    tblsEl.querySelectorAll('.dbitem').forEach(d=>d.onclick=()=>dbSelectTbl(d.dataset.t,d));
+    document.getElementById('db_meta').innerHTML=esc(name)+' — '+((r.sizeBytes/1024)|0)+' KB snapshot, '+r.tables.length+' tables · '+esc(profileLabel(DBV.user))+' <button class="dbrefresh" id="db_refresh" title="re-pull the latest from the device">↻ refresh</button>';
+    const rb=document.getElementById('db_refresh'); if(rb) rb.onclick=()=>dbSelectDb(name,el,null,null,true);
+    if(wantSql){ document.getElementById('db_sql').value=wantSql; dbRun(); }
+    else if(wantTable){ const te=[...tblsEl.querySelectorAll('.dbitem')].find(x=>x.dataset.t===wantTable); if(te) dbSelectTbl(wantTable,te); }
+  }catch(e){ tblsEl.innerHTML='<div class="msg err">'+esc(String(e))+'</div>'; }
+}
+function dbSelectTbl(t,el){ document.querySelectorAll('#db_tbls .dbitem').forEach(x=>x.classList.remove('sel')); if(el) el.classList.add('sel');
+  document.getElementById('db_sql').value='SELECT * FROM "'+t+'" LIMIT 100'; dbRun(); }
+async function dbRun(){ if(!DBV.db) return; const sql=document.getElementById('db_sql').value;
+  const out=document.getElementById('db_out'); out.innerHTML='<div class="msg">running…</div>';
+  try{ const r=await (await fetch('/dbquery?db='+encodeURIComponent(DBV.db)+'&sql='+encodeURIComponent(sql)+dbUserQS())).json();
+    if(r.error){ out.innerHTML='<div class="msg err">'+esc(r.error)+'</div>'; return; }
+    if(!r.rows||!r.rows.length){ out.innerHTML='<div class="msg">0 rows</div>'; document.getElementById('db_meta').textContent=DBV.db+' — 0 rows'; return; }
+    const cols=Object.keys(r.rows[0]);
+    let h='<table><thead><tr>'+cols.map(c=>'<th>'+esc(c)+'</th>').join('')+'</tr></thead><tbody>';
+    for(const row of r.rows){ h+='<tr>'+cols.map(c=>'<td title="'+esc(String(row[c]??''))+'">'+esc(String(row[c]??''))+'</td>').join('')+'</tr>'; }
+    h+='</tbody></table>'; out.innerHTML=h;
+    document.getElementById('db_meta').textContent=DBV.db+' — '+r.rows.length+' rows';
+  }catch(e){ out.innerHTML='<div class="msg err">'+esc(String(e))+'</div>'; }
+}
+// ---- Screen overlay: a global panel that mirrors the live device screen. -----
+// OFF by default. The live screen shows real DMs and message content, so the panel
+// opens to a consent gate first; only after the user accepts does it request frames.
+// Consent is granted server-side (per process) and the stream/record routes enforce it.
+const SCREEN={ on:false, consent:false, recording:false, caps:null };
+function scCopy(text,btn){ navigator.clipboard?.writeText(text).then(()=>{ if(btn){ const t=btn.textContent; btn.textContent='copied'; setTimeout(()=>btn.textContent=t,1200); } }).catch(()=>{}); }
+async function scLoadCaps(){ try{ SCREEN.caps=await (await fetch('/screen/caps')).json(); SCREEN.consent=!!SCREEN.caps.consent; }catch{ SCREEN.caps=null; } }
+function scRenderConsent(){
+  const body=document.getElementById('screenbody'); const hint=document.getElementById('schint');
+  hint.textContent='';
+  body.innerHTML='<div class="scconsent">This mirrors the <b>live device screen</b>. It shows whatever is on the phone right now, including open DMs, message content, and notifications. Review what is on screen before sharing it. Frames are not requested until you accept, and the mirror stays on until you restart the dashboard. If you <b>record</b>, the clip is saved to a file on this computer (owner-only, removed when the dashboard restarts).<button class="scaccept" id="scaccept">Show the screen</button></div>';
+  document.getElementById('scaccept').onclick=async()=>{ try{ await fetch('/screen/consent',{method:'POST'}); SCREEN.consent=true; scRenderLive(); }catch{ hint.textContent='consent failed'; } };
+}
+function scRenderLive(){
+  const body=document.getElementById('screenbody'); const hint=document.getElementById('schint');
+  const caps=SCREEN.caps||{};
+  if(caps.liveCast){
+    body.innerHTML='<img id="screenimg" alt="device screen"/>';
+    document.getElementById('screenimg').src='/screen/stream?fps=20&t='+Date.now();
+    hint.textContent='capturing first frame (~3s on a foldable)…';
+    setTimeout(()=>{ if(SCREEN.on) hint.textContent='live. ▣ Screen again to close.'; },3500);
+  } else {
+    // No ffmpeg: live cast is unavailable. Screenshot still works (pure screencap).
+    // Show the platform install command (copy only — never auto-installed) + scrcpy hint.
+    const cmd=esc(caps.installHint||'install ffmpeg');
+    let html='<div class="scinstall">Live mirroring needs <b>ffmpeg</b>, which is not installed. Install it, then reopen this panel:<br><br><code>'+cmd+'</code><button class="sccopy" id="scffcopy">copy</button></div>';
+    html+='<div class="scinstall">📷 Screenshot works without ffmpeg — use the button above.</div>';
+    if(caps.scrcpy) html+='<div class="scinstall">scrcpy is installed; for a native mirror window run <code>scrcpy</code> in a terminal.</div>';
+    body.innerHTML=html;
+    const c=document.getElementById('scffcopy'); if(c) c.onclick=()=>scCopy(caps.installHint||'',c);
+    hint.textContent='live mirroring unavailable (no ffmpeg); screenshot still works.';
+  }
+}
+async function scOpen(){
+  SCREEN.on=true; document.getElementById('screenpanel').classList.add('on');
+  document.body.classList.add('screenopen'); document.getElementById('screenbtn').classList.add('on');
+  await scLoadCaps();
+  if(SCREEN.consent) scRenderLive(); else scRenderConsent();
+}
+function scClose(){
+  SCREEN.on=false; document.getElementById('screenpanel').classList.remove('on');
+  document.body.classList.remove('screenopen'); document.getElementById('screenbtn').classList.remove('on');
+  const img=document.getElementById('screenimg'); if(img) img.src=''; // drop the stream viewer
+  if(SCREEN.recording){ fetch('/screen/record/stop',{method:'POST'}).catch(()=>{}); SCREEN.recording=false; document.getElementById('screenrec').textContent='● rec'; }
+}
+document.getElementById('screenbtn').onclick=()=>{ SCREEN.on?scClose():scOpen(); };
+document.getElementById('screenclose').onclick=scClose;
+document.getElementById('screenshot').onclick=async()=>{
+  if(!SCREEN.consent){ document.getElementById('schint').textContent='accept the notice first'; return; }
+  // Blob download (not a bare <a href> navigation), so taking a screenshot cannot cancel
+  // the in-flight /screen/stream connection and drop the live <img>.
+  try{ const blob=await (await fetch('/screen/shot?t='+Date.now())).blob(); const u=URL.createObjectURL(blob);
+    const a=document.createElement('a'); a.href=u; a.download='radar-screen-'+Date.now()+'.png'; document.body.appendChild(a); a.click(); a.remove();
+    setTimeout(()=>URL.revokeObjectURL(u),10000);
+  }catch{ document.getElementById('schint').textContent='screenshot failed'; }
+};
+document.getElementById('screenrec').onclick=async()=>{
+  if(!SCREEN.consent || !(SCREEN.caps&&SCREEN.caps.liveCast)){ document.getElementById('schint').textContent='recording needs ffmpeg + consent'; return; }
+  const rec=document.getElementById('screenrec');
+  if(!SCREEN.recording){ SCREEN.recording=true; rec.textContent='■ stop'; rec.classList.add('rec'); await fetch('/screen/record/start',{method:'POST'}).catch(()=>{}); }
+  else { rec.textContent='saving…'; const r=await (await fetch('/screen/record/stop',{method:'POST'})).json().catch(()=>({})); SCREEN.recording=false; rec.classList.remove('rec'); rec.textContent='● rec';
+    if(r.download){
+      // Fetch the mp4 as a blob and download via an object URL. A bare <a href=/screen/download>
+      // click is a same-origin navigation that the browser can use to cancel the in-flight
+      // /screen/stream connection, which silently kills the live <img> (server keeps casting).
+      // A blob download touches no navigation and leaves the stream connection alone.
+      try{ const blob=await (await fetch(r.download)).blob(); const u=URL.createObjectURL(blob);
+        const a=document.createElement('a'); a.href=u; a.download=(r.file||'radar-screen.mp4'); document.body.appendChild(a); a.click(); a.remove();
+        setTimeout(()=>URL.revokeObjectURL(u),10000);
+      }catch{ document.getElementById('schint').textContent='recording saved on host: '+(r.file||''); }
+      // Belt-and-suspenders: re-arm the live <img> in case the browser still dropped it.
+      const img=document.getElementById('screenimg'); if(img) img.src='/screen/stream?fps=20&t='+Date.now();
+    } }
+};
+document.getElementById('screenredetect').onclick=async()=>{
+  document.getElementById('schint').textContent='re-detecting active panel…';
+  const r=await (await fetch('/screen/redetect')).json().catch(()=>({}));
+  if(SCREEN.on && SCREEN.consent && SCREEN.caps&&SCREEN.caps.liveCast){ const img=document.getElementById('screenimg'); if(img) img.src='/screen/stream?fps=20&t='+Date.now(); }
+  document.getElementById('schint').textContent='display: '+(r.display||'default');
+};
+
 pollSpec(); // initial build
 </script></body></html>

package/dist/web/server.d.ts

@@ -1,5 +1,17 @@
 import http from "http";
+import { type LogFrame } from "./log-session.js";
 declare const WEB_PORT: number;
+/**
+ * Decide whether to drop a log frame under backpressure. LIVE frames are dropped
+ * when the connection's unwritten buffer is already past the cap (an unbounded
+ * queue to a slow/backgrounded tab). REPLAY frames are NEVER dropped: replay is a
+ * bounded one-time send of the whole ring and IS the connection's purpose; it runs
+ * synchronously so writableLength climbs monotonically, and dropping past the cap
+ * would silently cut the newest history and reintroduce the reconnect log-loss
+ * this feature fixes. Exported pure so the replay-exemption is unit-testable
+ * without a socket. `cap` defaults to the live ceiling.
+ */
+export declare function shouldDropLogFrame(replay: boolean, writableLength: number, cap?: number): boolean;
 export declare function createServer(): http.Server;
 /**
  * Finish a /detail proxy response after an upstream error or timeout. The success
@@ -10,17 +22,7 @@ export declare function createServer(): http.Server;
  * have not gone out yet; otherwise just end the already-started response. Exported for tests.
  */
 export declare function failDetailResponse(res: Pick<http.ServerResponse, "headersSent" | "writeHead" | "end">, status: number): void;
-interface ParsedLog {
-    id: number;
-    timestamp: number;
-    log_ts: string;
-    pid: number;
-    tid: number;
-    level: string;
-    tag: string;
-    message: string;
-    package?: string;
-}
+type ParsedLog = LogFrame;
 /**
  * Parse one `adb logcat -v threadtime` line into a structured event, or null if it does
  * not match the format. `resolvePkg` maps a pid to its package name (defaults to the