feat: merge Survey into Scanning and harden live recon

- Delete the Survey stack (sampler, handlers, routes, view, recordings);
  Scanning gains AP compare (cap 6), whole-page selection filter, channel
  map (20 MHz lobes, the radio does not report width), and auto-follow
  that prefers the newest non-empty scan
- Richer HTML scan reports: stat cards, band/encryption breakdowns,
  channel occupancy, color-coded signal cells, GPS line only on a fix
- Harden live recon: bounded + retried scan-detail reads (503 on lock),
  serialize recon starts (409 + scan_remaining while running), GPS and
  archive discovery move to a 30s poll, GPS_GET skipped when gpsd is down
- Read-only history for pineapd-rotated databases (error-*/diagnostic-*):
  archives list/detail/download endpoints, Previous Scans optgroup,
  delete disabled, traversal-guarded
- Status flags: hopper-radio-offline and history-reset banners; empty
  scans greyed in the picker
- Tests: recon suite grows to 99 cases; all 14 modules green

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
This commit is contained in:
2026-08-18 14:55:02 -05:00
co-authored by factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
parent 251b1f6261
commit d8a7074e1f
6 changed files with 1169 additions and 1071 deletions
@@ -316,6 +316,9 @@ html.dark .muted { color: #bdbdbd; }
.icon-btn svg { width: 22px; height: 22px; }
.recon-scan-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.recon-scan-bar .sel { width: auto; }
.recon-scan-status { font-size: 12px; }
.recon-scan-status.warn { color: #b26a00; }
html.dark .recon-scan-status.warn { color: #ffb74d; }
.recon-table-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.recon-table-head h2 { margin: 0; }
.recon-search { max-width: 180px; }
@@ -372,50 +375,33 @@ html.dark .recon-dbm-bar { background: #333; }
.recon-pill.on { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
html.dark .recon-pill.on { background: #1b3a23; color: #81c784; }
/* ---- Survey view ---- */
.survey-live-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.survey-live-status { font-size: 13px; color: var(--text); }
.survey-dur { width: auto; }
.survey-pill { border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 12px; padding: 4px 12px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.survey-pill:hover { color: var(--text); border-color: var(--primary); }
.survey-pill.on { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
html.dark .survey-pill.on { background: #1b3a23; color: #81c784; }
.survey-wigle { font-size: 13px; color: var(--text); margin: 0; }
.survey-rec-card { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.survey-rec-name { flex: 1 1 220px; max-width: 340px; }
.survey-rec-status { font-size: 12px; color: var(--muted); }
.survey-rec-status.on { color: #e53935; font-weight: 600; }
.survey-filter-row { margin-top: 10px; }
.survey-search { width: auto; }
.survey-chan-box { margin-top: 4px; }
.survey-chan-band { font-size: 12px; font-weight: 600; color: var(--primary); margin: 10px 0 4px; }
.survey-chan-row { display: flex; align-items: center; gap: 10px; margin: 3px 0; }
.survey-chan-label { width: 46px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.survey-chan-track { flex: 1; height: 14px; border-radius: 3px; background: var(--surface-alt); overflow: hidden; }
html.dark .survey-chan-track { background: #333; }
.survey-chan-fill { display: block; height: 100%; background: var(--primary); border-radius: 3px; }
.survey-chan-count { width: 30px; font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.survey-cmp-hint { font-size: 12px; color: var(--muted); margin: -4px 0 8px; }
.survey-cmp-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.survey-cmp-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.survey-cmp-swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.survey-cmp-sig { color: var(--muted); font-variant-numeric: tabular-nums; }
.survey-cmp-check { display: inline-flex; }
.survey-cmp-check input { width: auto; }
.survey-discover { margin-top: 10px; }
.survey-discover-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.survey-discover-title { font-size: 20px; font-weight: 500; }
.survey-discover-readout { font-size: 44px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.survey-discover-sub { color: var(--muted); font-size: 13px; margin: 2px 0 8px; word-break: break-all; }
/* ---- Recon compare + selection ---- */
.recon-compare-hint { font-size: 12px; color: var(--muted); margin: -4px 0 8px; }
.recon-compare-empty { margin: 6px 0; }
.recon-compare-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.recon-compare-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.recon-compare-swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.recon-compare-sig { color: var(--muted); font-variant-numeric: tabular-nums; }
.recon-cmp-check { display: inline-flex; }
.recon-cmp-check input { width: auto; }
.recon-sel-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 6px; }
.recon-sel-chips.hidden { display: none; }
.recon-sel-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--primary); border-radius: 12px; padding: 2px 8px 2px 11px; font-size: 12px; color: var(--text); background: var(--surface-alt); }
.recon-sel-chip-x { cursor: pointer; color: var(--muted); font-weight: 700; padding: 0 2px; }
.recon-sel-chip-x:hover { color: #e53935; }
.recon-sel-clear { padding: 2px 10px; font-size: 12px; }
/* ---- Recon channel map ---- */
.recon-map-sub { font-size: 12px; color: var(--muted); margin: -4px 0 6px; }
.recon-map-chips { margin: 0 0 6px; }
.recon-chip.disabled { opacity: .45; cursor: default; }
.recon-chip.disabled:hover { color: var(--muted); border-color: var(--border); }
.recon-map-box { position: relative; }
.recon-map-box canvas { display: block; }
.recon-map-box .recon-no-data { min-height: 60px; }
/* ---- Reports view ---- */
.survey-detail-hint { font-size: 12px; color: var(--muted); margin-top: 10px; }
.survey-detail-row { padding: 8px 10px; border: 1px solid var(--border); border-radius: 3px; margin-top: 6px; cursor: pointer; font-size: 13px; }
.survey-detail-row:hover { border-color: var(--primary); }
.survey-detail-row.open { border-color: var(--primary); background: var(--surface-alt); }
.survey-detail-body { padding: 8px 4px; }
.survey-detail-gps { font-size: 12px; color: var(--muted); margin: 6px 0; }
.survey-wigle-warn { color: #ef6c00; font-size: 12px; }
.wigle-warn { color: #ef6c00; font-size: 12px; }
/* ---- Mark VII handshakes table + settings dialog ---- */
.hs-cell-center { text-align: center; }
@@ -84,6 +84,10 @@ const App = (() => {
function route() {
closeToolbarMenus();
const hash = (location.hash || '#/dashboard').replace(/\/+$/, '');
if (hash === '#/recon/survey') {
location.hash = '#/recon';
return;
}
const name = routes[hash];
if (currentView && currentView.destroy) currentView.destroy();
els.content.innerHTML = '';
@@ -396,7 +400,6 @@ const App = (() => {
'#/pineap/clients': 'pineap_clients',
'#/pineap/filtering': 'pineap_filtering',
'#/recon': 'recon',
'#/recon/survey': 'recon_survey',
'#/recon/reports': 'recon_reports',
'#/recon/handshakes': 'recon_handshakes',
'#/logging': 'logging',
@@ -136,5 +136,114 @@ const MiniChart = (() => {
});
}
return { draw, doughnut, bar };
function chanToMhz(band, ch) {
const n = Number(ch);
if (band === '2.4') return 2407 + 5 * n;
if (band === '5') return 5000 + 5 * n;
if (band === '6') return 5950 + 5 * n;
return null;
}
function bandRange(band) {
if (band === '2.4') return [2400, 2500];
if (band === '5') return [5150, 5900];
if (band === '6') return [5925, 7125];
return null;
}
function hexA(hex, alpha) {
const m = /^#([0-9a-f]{6})$/i.exec(hex || '');
if (!m) return hex;
const n = parseInt(m[1], 16);
return 'rgba(' + ((n >> 16) & 255) + ',' + ((n >> 8) & 255) + ',' + (n & 255) + ',' + alpha + ')';
}
// Channel map: each AP is a raised-cosine lobe at its reported center
// frequency with the peak at its signal strength. The radio does not report
// channel width, so every lobe assumes 20 MHz (half-width +-10 MHz).
function channelMap(canvas, aps, opts) {
const o = opts || {};
const dpr = window.devicePixelRatio || 1;
const H = o.height || 180;
canvas.width = canvas.clientWidth * dpr;
canvas.height = H * dpr;
const ctx = canvas.getContext('2d');
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
const w = canvas.clientWidth, h = H;
ctx.clearRect(0, 0, w, h);
if (!aps || !aps.length) return;
const pts = aps
.map((a) => ({
freq: a.freq != null ? Number(a.freq) : chanToMhz(a.band, a.channel),
sig: a.signal
}))
.filter((p) => p.freq != null && p.sig != null);
if (!pts.length) return;
const def = bandRange(aps[0].band);
const lo = Math.min(def ? def[0] : Infinity, ...pts.map((p) => p.freq));
const hi = Math.max(def ? def[1] : -Infinity, ...pts.map((p) => p.freq));
const fMin = lo - 10, fMax = hi + 10;
const padL = 42, padR = 10, padT = 14, padB = 24;
const plotW = w - padL - padR, plotH = h - padT - padB;
const YMIN = -100, YMAX = -30;
const x = (f) => padL + (f - fMin) / (fMax - fMin) * plotW;
const y = (dbm) => padT + (1 - (dbm - YMIN) / (YMAX - YMIN)) * plotH;
ctx.font = '10px Roboto, "Segoe UI", Arial, sans-serif';
ctx.textAlign = 'right';
for (let dbm = YMIN; dbm <= YMAX; dbm += 10) {
const yy = y(dbm);
ctx.strokeStyle = o.grid || '#e0e0e0';
ctx.lineWidth = 1;
ctx.beginPath(); ctx.moveTo(padL, yy); ctx.lineTo(w - padR, yy); ctx.stroke();
ctx.fillStyle = '#888';
ctx.fillText(String(dbm), padL - 6, yy + 3);
}
ctx.strokeStyle = o.grid || '#e0e0e0';
for (let f = Math.ceil(fMin / 20) * 20; f <= fMax; f += 20) {
ctx.beginPath(); ctx.moveTo(x(f), padT); ctx.lineTo(x(f), h - padB); ctx.stroke();
}
const baseY = h - padB;
aps.forEach((a) => {
const freq = a.freq != null ? Number(a.freq) : chanToMhz(a.band, a.channel);
if (freq == null || a.signal == null) return;
const color = a.color || '#1976d2';
const cx = x(freq);
const topY = y(a.signal);
const peakH = Math.max(2, baseY - topY);
const half = Math.max(4, (10 / (fMax - fMin)) * plotW);
ctx.beginPath();
for (let i = 0; i <= 28; i++) {
const t = -1 + i / 14;
const lift = Math.max(0, 0.5 + 0.5 * Math.cos(Math.PI * t));
const px = cx + t * half;
const py = baseY - lift * peakH;
if (i === 0) ctx.moveTo(px, py);
else ctx.lineTo(px, py);
}
ctx.closePath();
ctx.fillStyle = hexA(color, 0.35);
ctx.fill();
ctx.strokeStyle = color;
ctx.lineWidth = 1.5;
ctx.stroke();
});
let lastLabelX = -Infinity;
ctx.textAlign = 'center';
aps.forEach((a) => {
const freq = a.freq != null ? Number(a.freq) : chanToMhz(a.band, a.channel);
if (freq == null || a.channel == null) return;
const cx = x(freq);
if (cx - lastLabelX < 34) return;
lastLabelX = cx;
ctx.strokeStyle = '#999';
ctx.beginPath(); ctx.moveTo(cx, h - padB); ctx.lineTo(cx, h - padB + 4); ctx.stroke();
ctx.fillStyle = '#666';
ctx.fillText('CH ' + a.channel, cx, h - 7);
});
ctx.textAlign = 'left';
ctx.fillStyle = '#888';
ctx.fillText((aps[0].band || '?') + ' GHz', padL + 4, padT + 2);
}
return { draw, doughnut, bar, channelMap };
})();
File diff suppressed because it is too large Load Diff