From 1dcedae83a8ab7eeb1a58e715c102ebff8a549bc Mon Sep 17 00:00:00 2001
From: c4ch3c4d3 <bryce@zuccaro.me>
Date: Wed, 19 Aug 2026 07:24:00 -0500
Subject: [PATCH] =?UTF-8?q?fix:=20encryption=20landscape=20card=20?=
 =?UTF-8?q?=E2=80=94=20real=20family=20buckets=20+=20legend=20id?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Ring and legend now derive from reconEncBucket's actual family keys
  (WPA2-PSK, WPA3-Personal, WPA2-Enterprise, ...) instead of the six
  nominal buckets that never matched encCounts, so the ring drew an
  empty ring and the legend was always blank on WPA2-dominated data.
  Ordering via RECON_ENC_ORDER; colors cycle RECON_ENC_COLORS.
- Legend div had class but no id while drawCharts looked it up with
  getElementById — the population block silently never ran. Added the id.

Verified on device via CDP: legend lists Open 9, WEP 1, WPA2-PSK 44,
WPA3-Personal 20, WPA3-Enterprise 5 with per-family dot colors; no JS
exceptions.
---
 .../remote_access/pager-webui/www/js/views.js | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/payload/user/remote_access/pager-webui/www/js/views.js b/payload/user/remote_access/pager-webui/www/js/views.js
index caba63e..692e740 100644
--- a/payload/user/remote_access/pager-webui/www/js/views.js
+++ b/payload/user/remote_access/pager-webui/www/js/views.js
@@ -849,7 +849,7 @@ const RECON_TABS = [
 
 const RECON_LANDSCAPE_COLORS = ['#2ecc71', '#2980b9', '#8e44ad'];
 const RECON_ENC_COLORS = ['#2ecc71', '#2980b9', '#8e44ad', '#e74c3c', '#ff0000', '#34495e'];
-const RECON_ENC_BUCKETS = ['Open', 'WEP', 'WPA', 'WPA2', 'WPA3', 'Enterprise'];
+const RECON_ENC_ORDER = ['Open', 'WEP', 'WPA', 'WPA2-PSK', 'WPA2-Enterprise', 'WPA3-Personal', 'WPA3-PSK', 'WPA3-Enterprise', 'Unknown'];
 const RECON_COMPARE_COLORS = ['#2ecc71', '#2980b9', '#8e44ad', '#e67e22', '#c0392b', '#16a085'];
 const RECON_MAX_HISTORY = 90;
 const RECON_CHANNEL_COLORS = ['#FC68AC','#4545FF','#19DE8F','#FF294A','#23E8DB','#0FD349','#4D4AFF','#E2FF68','#FF8368','#B1FF6A','#FFFF3B','#FF677E','#D0FF6E','#F57D67','#F828E4','#EAFF6D','#3676F9','#F169E8','#3B2AE4','#3197F5','#4040FF','#FFF26A','#FCAD67','#0ACE28','#FF9E68','#55FF4A','#F9FF68','#EE687E','#FFFC67','#FFE167','#7FFF6C','#FFF236','#F26868','#6DFF74','#F568D5','#FF402A','#CAFF69','#28C20A','#6B29E9','#C7FF40','#FFB631','#D429F3','#F868C1','#14D96B','#9E29EF','#8EFF45','#FF2980','#FD29B3','#FF7A2C','#FF6967','#FFD569','#27D6EC','#98FF6B','#1EE3B5','#FFFF6B','#FFB969','#FFFF6C','#FF6795','#0BC80A','#3B54FD','#F99467','#FFC667','#2CB7F1','#6EFF91'];
@@ -1501,7 +1501,7 @@ views.recon = (root) => {
   encBox.appendChild(encCanvas);
   const encEmpty = h('div', { class: 'recon-no-data', text: 'No encryption data yet — run a scan.' });
   encBox.appendChild(encEmpty);
-  const encLegend = h('div', { class: 'recon-enc-legend' });
+  const encLegend = h('div', { class: 'recon-enc-legend', id: 'recon-enc-legend' });
   encBody.appendChild(encLegend);
 
   const hsBody = titleCard('Handshakes', '#/recon/handshakes');
@@ -2256,6 +2256,15 @@ views.recon = (root) => {
       const b = reconEncBucket(a.encryption);
       encCounts[b] = (encCounts[b] || 0) + 1;
     });
+    const encSegs = Object.keys(encCounts)
+      .sort((a, b) => {
+        const ia = RECON_ENC_ORDER.indexOf(a);
+        const ib = RECON_ENC_ORDER.indexOf(b);
+        return (ia === -1 ? 99 : ia) - (ib === -1 ? 99 : ib) || encCounts[b] - encCounts[a];
+      })
+      .map((k, i) => ({
+        label: k, value: encCounts[k], color: RECON_ENC_COLORS[i % RECON_ENC_COLORS.length]
+      }));
 
     const land = document.getElementById('recon-landscape');
     if (land && typeof MiniChart !== 'undefined' && MiniChart.doughnut) {
@@ -2301,9 +2310,7 @@ views.recon = (root) => {
     if (enc && typeof MiniChart !== 'undefined' && MiniChart.doughnut) {
       try {
         if (aps.length) {
-          MiniChart.doughnut(enc, RECON_ENC_BUCKETS.map((k, i) => ({
-            label: k, value: encCounts[k] || 0, color: RECON_ENC_COLORS[i]
-          })), { legend: false, height: 120 });
+          MiniChart.doughnut(enc, encSegs, { legend: false, height: 120 });
           enc.classList.remove('hidden');
           encEmpty.classList.add('hidden');
         } else {
@@ -2315,15 +2322,13 @@ views.recon = (root) => {
     const encLegend = document.getElementById('recon-enc-legend');
     if (encLegend) {
       encLegend.innerHTML = '';
-      RECON_ENC_BUCKETS.forEach((k, i) => {
-        const c = encCounts[k] || 0;
-        if (!c) return;
+      encSegs.forEach((s) => {
         const entry = h('div', { class: 'recon-enc-entry' });
         const dot = h('span', { class: 'recon-enc-dot' });
-        dot.style.background = RECON_ENC_COLORS[i];
+        dot.style.background = s.color;
         entry.appendChild(dot);
-        entry.appendChild(h('span', { class: 'recon-enc-label', text: k }));
-        entry.appendChild(h('span', { class: 'recon-enc-count', text: String(c) }));
+        entry.appendChild(h('span', { class: 'recon-enc-label', text: s.label }));
+        entry.appendChild(h('span', { class: 'recon-enc-count', text: String(s.value) }));
         encLegend.appendChild(entry);
       });
     }