feat(wifi): replace table with styled div network rows

Replaces the 7-column <table> network list with flex div rows featuring
two-line layout (SSID + security badges on top, signal bar + meta on
bottom), coloured left-border threat indicators, and new sort controls.
Renames selectedNetwork → selectedBssid and updateNetworkTable → renderNetworks throughout wifi.js.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

static/css/index.css

@@ -3650,112 +3650,137 @@ header h1 .tagline {
     overscroll-behavior: contain;
 }
 
-.wifi-networks-table {
+/* WiFi Network List */
-    width: 100%;
+.wifi-network-list {
-    border-collapse: collapse;
+    display: flex;
-    font-size: 11px;
+    flex-direction: column;
 }
 
-.wifi-networks-table thead {
+.wifi-network-placeholder {
-    position: sticky;
+    padding: 32px 16px;
-    top: 0;
+    text-align: center;
-    background: var(--bg-tertiary);
-    z-index: 1;
-}
-
-.wifi-networks-table th {
-    padding: 8px 10px;
-    text-align: left;
     color: var(--text-dim);
-    font-weight: 500;
+    font-size: 11px;
-    border-bottom: 1px solid var(--border-color);
+    line-height: 1.6;
-    white-space: nowrap;
-    cursor: pointer;
 }
 
-.wifi-networks-table th:hover {
+/* Network rows */
-    color: var(--accent-cyan);
+.network-row {
-}
+    padding: 9px 14px;
-
+    border-bottom: 1px solid var(--bg-secondary);
-.wifi-networks-table th.sortable::after {
+    border-left: 3px solid transparent;
-    content: ' \2195';
-    opacity: 0.3;
-}
-
-.wifi-networks-table td {
-    padding: 8px 10px;
-    border-bottom: 1px solid var(--border-color);
-    vertical-align: middle;
-}
-
-.wifi-network-row {
     cursor: pointer;
     transition: background 0.15s;
 }
 
-.wifi-network-row:hover {
+.network-row:hover { background: var(--bg-tertiary); }
-    background: rgba(0, 255, 255, 0.05);
+
+.network-row.selected {
+    background: rgba(74, 163, 255, 0.07);
+    border-left-color: var(--accent-cyan) !important;
 }
 
-.wifi-network-row.selected {
+.network-row.threat-open   { border-left-color: var(--accent-red); }
-    background: rgba(0, 255, 255, 0.1);
+.network-row.threat-safe   { border-left-color: var(--accent-green); }
-    border-left: 2px solid var(--accent-cyan);
+.network-row.threat-hidden { border-left-color: var(--border-color); }
+
+.row-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 5px;
 }
 
-.wifi-network-row .essid {
+.row-ssid {
+    font-size: 12px;
     font-weight: 500;
     color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 55%;
 }
 
-.wifi-network-row .badge {
+.row-ssid.hidden-net {
-    display: inline-block;
+    color: var(--text-dim);
-    padding: 2px 5px;
+    font-style: italic;
+}
+
+.row-badges { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
+
+.badge {
     font-size: 9px;
+    padding: 2px 5px;
     border-radius: 3px;
-    margin-left: 6px;
-}
-
-.wifi-network-row .badge-hidden {
-    background: rgba(255, 165, 0, 0.2);
-    color: var(--accent-orange);
-}
-
-.wifi-network-row .badge-new {
-    background: rgba(0, 255, 0, 0.2);
-    color: var(--accent-green);
-}
-
-.wifi-network-row .rssi-value {
-    font-family: monospace;
     font-weight: 600;
+    letter-spacing: 0.5px;
+    border: 1px solid transparent;
 }
 
-.wifi-network-row .rssi-value.signal-strong { color: var(--accent-green); }
+.badge.open        { color: var(--accent-red);    background: var(--accent-red-dim);   border-color: var(--accent-red); }
-.wifi-network-row .rssi-value.signal-medium { color: var(--accent-yellow); }
+.badge.wpa2        { color: var(--accent-green);  background: var(--accent-green-dim); border-color: var(--accent-green); }
-.wifi-network-row .rssi-value.signal-weak { color: var(--accent-orange); }
+.badge.wpa3        { color: var(--accent-cyan);   background: var(--accent-cyan-dim);  border-color: var(--accent-cyan); }
-.wifi-network-row .rssi-value.signal-very-weak { color: var(--accent-red); }
+.badge.wep         { color: var(--accent-orange); background: var(--accent-amber-dim); border-color: var(--accent-orange); }
+.badge.hidden-tag  { color: var(--text-dim);      background: transparent;             border-color: var(--border-color); font-size: 8px; }
 
-.wifi-network-row .security-badge {
+.row-bottom {
-    display: inline-block;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.signal-bar-wrap { flex: 1; max-width: 130px; }
+
+.signal-track {
+    height: 4px;
+    background: var(--bg-elevated);
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.signal-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
+.signal-fill.strong { background: linear-gradient(90deg, var(--accent-green), #88d49b); }
+.signal-fill.medium { background: linear-gradient(90deg, var(--accent-green), var(--accent-orange)); }
+.signal-fill.weak   { background: linear-gradient(90deg, var(--accent-orange), var(--accent-red)); }
+
+.row-meta {
+    display: flex;
+    gap: 10px;
+    margin-left: auto;
+    color: var(--text-dim);
+    font-size: 10px;
+}
+
+.row-rssi { color: var(--text-secondary); }
+
+/* Sort controls */
+.wifi-sort-controls {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.wifi-sort-label {
+    font-size: 9px;
+    color: var(--text-dim);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.wifi-sort-btn {
     padding: 2px 6px;
     font-size: 9px;
-    border-radius: 3px;
+    font-family: inherit;
-}
+    background: none;
-
+    border: none;
-.wifi-network-row .security-badge.security-wpa3 { background: rgba(0, 255, 0, 0.15); color: var(--accent-green); }
-.wifi-network-row .security-badge.security-wpa { background: rgba(0, 255, 255, 0.15); color: var(--accent-cyan); }
-.wifi-network-row .security-badge.security-wep { background: rgba(255, 165, 0, 0.15); color: var(--accent-orange); }
-.wifi-network-row .security-badge.security-open { background: rgba(255, 0, 0, 0.15); color: var(--accent-red); }
-
-.wifi-network-placeholder td {
-    text-align: center;
-    padding: 40px 20px;
-}
-
-.wifi-network-placeholder .placeholder-text {
     color: var(--text-dim);
+    cursor: pointer;
+    transition: color 0.15s;
 }
 
+.wifi-sort-btn:hover { color: var(--text-primary); }
+.wifi-sort-btn.active { color: var(--accent-cyan); }
+
 .app-collection-state-row td {
     text-align: center;
     padding: 0;

static/js/modes/wifi.js

@@ -121,7 +121,7 @@ const WiFiMode = (function() {
     let recommendations = [];
 
     // UI state
-    let selectedNetwork = null;
+    let selectedBssid = null;
     let currentFilter = 'all';
     let currentSort = { field: 'rssi', order: 'desc' };
     let renderFramePending = false;
@@ -196,9 +196,8 @@ const WiFiMode = (function() {
             clientCount: document.getElementById('wifiClientCount'),
             hiddenCount: document.getElementById('wifiHiddenCount'),
 
-            // Network table
+            // Network list
-            networkTable: document.getElementById('wifiNetworkTable'),
+            networkList: document.getElementById('wifiNetworkList'),
-            networkTableBody: document.getElementById('wifiNetworkTableBody'),
             networkFilters: document.getElementById('wifiNetworkFilters'),
 
             // Visualizations
@@ -972,7 +971,7 @@ const WiFiMode = (function() {
             stats: true,
             radar: true,
             chart: true,
-            detail: selectedNetwork === network.bssid,
+            detail: selectedBssid === network.bssid,
         });
 
         if (onNetworkUpdate) onNetworkUpdate(network);
@@ -1004,7 +1003,7 @@ const WiFiMode = (function() {
             network.display_name = `${revealedSsid} (revealed)`;
             scheduleRender({
                 table: true,
-                detail: selectedNetwork === bssid,
+                detail: selectedBssid === bssid,
             });
 
             // Show notification
@@ -1039,34 +1038,27 @@ const WiFiMode = (function() {
             });
         }
 
-        updateNetworkTable();
+        renderNetworks();
     }
 
     function initSortControls() {
         if (listenersBound.sort) return;
-        if (!elements.networkTable) return;
 
-        elements.networkTable.addEventListener('click', (e) => {
+        document.querySelectorAll('.wifi-sort-btn').forEach(btn => {
-            const th = e.target.closest('th[data-sort]');
+            btn.addEventListener('click', () => {
-            if (th) {
+                const field = btn.dataset.sort;
-                const field = th.dataset.sort;
                 if (currentSort.field === field) {
                     currentSort.order = currentSort.order === 'desc' ? 'asc' : 'desc';
                 } else {
                     currentSort.field = field;
                     currentSort.order = 'desc';
                 }
-                updateNetworkTable();
+                document.querySelectorAll('.wifi-sort-btn').forEach(b => b.classList.remove('active'));
-            }
+                btn.classList.add('active');
+                scheduleRender({ table: true });
+            });
         });
 
-        if (elements.networkTableBody) {
-            elements.networkTableBody.addEventListener('click', (e) => {
-                const row = e.target.closest('tr[data-bssid]');
-                if (!row) return;
-                selectNetwork(row.dataset.bssid);
-            });
-        }
         listenersBound.sort = true;
     }
 
@@ -1083,12 +1075,12 @@ const WiFiMode = (function() {
         requestAnimationFrame(() => {
             renderFramePending = false;
 
-            if (pendingRender.table) updateNetworkTable();
+            if (pendingRender.table) renderNetworks();
             if (pendingRender.stats) updateStats();
             if (pendingRender.radar) updateProximityRadar();
             if (pendingRender.chart) updateChannelChart();
-            if (pendingRender.detail && selectedNetwork) {
+            if (pendingRender.detail && selectedBssid) {
-                updateDetailPanel(selectedNetwork, { refreshClients: false });
+                updateDetailPanel(selectedBssid, { refreshClients: false });
             }
 
             pendingRender.table = false;
@@ -1099,8 +1091,8 @@ const WiFiMode = (function() {
         });
     }
 
-    function updateNetworkTable() {
+    function renderNetworks() {
-        if (!elements.networkTableBody) return;
+        if (!elements.networkList) return;
 
         // Filter networks
         let filtered = Array.from(networks.values());
@@ -1157,87 +1149,89 @@ const WiFiMode = (function() {
         });
 
         if (filtered.length === 0) {
-            let message = 'Start scanning to discover networks';
+            let message = networks.size > 0
-            let type = 'empty';
+                ? 'No networks match current filters'
-            if (isScanning) {
+                : (isScanning ? 'Scanning for networks...' : 'Start scanning to discover networks');
-                message = 'Scanning for networks...';
+            elements.networkList.innerHTML = `<div class="wifi-network-placeholder"><p>${escapeHtml(message)}</p></div>`;
-                type = 'loading';
-            } else if (networks.size > 0) {
-                message = 'No networks match current filters';
-            }
-            if (typeof renderCollectionState === 'function') {
-                renderCollectionState(elements.networkTableBody, {
-                    type,
-                    message,
-                    columns: 7,
-                });
-            } else {
-                elements.networkTableBody.innerHTML = `<tr class="wifi-network-placeholder"><td colspan="7"><div class="placeholder-text">${escapeHtml(message)}</div></td></tr>`;
-            }
             return;
         }
 
-        // Render table
+        // Render list
-        elements.networkTableBody.innerHTML = filtered.map(n => createNetworkRow(n)).join('');
+        elements.networkList.innerHTML = filtered.map(n => createNetworkRow(n)).join('');
+
+        // Re-apply selected state after re-render
+        if (selectedBssid) {
+            const sel = elements.networkList.querySelector(`[data-bssid="${CSS.escape(selectedBssid)}"]`);
+            if (sel) sel.classList.add('selected');
+        }
     }
 
     function createNetworkRow(network) {
         const rssi = network.rssi_current;
         const security = network.security || 'Unknown';
-        const signalClass = rssi >= -50 ? 'signal-strong' :
-                           rssi >= -70 ? 'signal-medium' :
-                           rssi >= -85 ? 'signal-weak' : 'signal-very-weak';
 
-        const securityClass = security === 'Open' ? 'security-open' :
+        // Badge class
-                              security === 'WEP' ? 'security-wep' :
+        const sec = security.toLowerCase();
-                              security.includes('WPA3') ? 'security-wpa3' : 'security-wpa';
+        const badgeClass = sec === 'open' || sec === ''   ? 'open'
+                         : sec.includes('wpa3')            ? 'wpa3'
+                         : sec.includes('wpa')             ? 'wpa2'
+                         : sec.includes('wep')             ? 'wep'
+                         : 'wpa2';
 
-        const hiddenBadge = network.is_hidden ? '<span class="badge badge-hidden">Hidden</span>' : '';
+        // Threat class (left border)
-        const newBadge = network.is_new ? '<span class="badge badge-new">New</span>' : '';
+        const threatClass = badgeClass === 'open' ? 'threat-open'
+                          : badgeClass === 'wpa2' || badgeClass === 'wpa3' ? 'threat-safe'
+                          : 'threat-hidden';
 
-        // Agent source badge
+        // Signal bar width + class
-        const agentName = network._agent || 'Local';
+        const pct = rssi != null ? Math.max(0, Math.min(100, (rssi + 100) / 80 * 100)) : 0;
-        const agentClass = agentName === 'Local' ? 'agent-local' : 'agent-remote';
+        const fillClass = rssi > -55 ? 'strong' : rssi > -70 ? 'medium' : 'weak';
+
+        const displayName = escapeHtml(network.display_name || network.essid || '[Hidden]');
+        const isHidden = network.is_hidden;
+        const hiddenTag = isHidden ? '<span class="badge hidden-tag">HIDDEN</span>' : '';
 
         return `
-            <tr class="wifi-network-row ${network.bssid === selectedNetwork ? 'selected' : ''}"
+            <div class="network-row ${threatClass}"
-                data-bssid="${escapeHtml(network.bssid)}"
+                 data-bssid="${escapeHtml(network.bssid)}"
-                role="button"
+                 data-band="${escapeHtml(network.band || '')}"
-                tabindex="0"
+                 data-security="${escapeHtml(security)}"
-                data-keyboard-activate="true"
+                 onclick="WiFiMode.selectNetwork('${escapeHtml(network.bssid)}')">
-                aria-label="Select network ${escapeHtml(network.display_name || network.essid || '[Hidden]')}">
+                <div class="row-top">
-                <td class="col-essid">
+                    <span class="row-ssid${isHidden ? ' hidden-net' : ''}">${displayName}</span>
-                    <span class="essid">${escapeHtml(network.display_name || network.essid || '[Hidden]')}</span>
+                    <div class="row-badges">
-                    ${hiddenBadge}${newBadge}
+                        <span class="badge ${badgeClass}">${escapeHtml(security)}</span>
-                </td>
+                        ${hiddenTag}
-                <td class="col-bssid"><code>${escapeHtml(network.bssid)}</code></td>
+                    </div>
-                <td class="col-channel">${network.channel || '-'}</td>
+                </div>
-                <td class="col-rssi">
+                <div class="row-bottom">
-                    <span class="rssi-value ${signalClass}">${rssi != null ? rssi : '-'}</span>
+                    <div class="signal-bar-wrap">
-                </td>
+                        <div class="signal-track">
-                <td class="col-security">
+                            <div class="signal-fill ${fillClass}" style="width:${pct.toFixed(1)}%"></div>
-                    <span class="security-badge ${securityClass}">${escapeHtml(security)}</span>
+                        </div>
-                </td>
+                    </div>
-                <td class="col-clients">${network.client_count || 0}</td>
+                    <div class="row-meta">
-                <td class="col-agent">
+                        <span>ch ${network.channel || '?'}</span>
-                    <span class="agent-badge ${agentClass}">${escapeHtml(agentName)}</span>
+                        <span>${network.client_count || 0} ↔</span>
-                </td>
+                        <span class="row-rssi">${rssi != null ? rssi : '?'}</span>
-            </tr>
+                    </div>
+                </div>
+            </div>
         `;
     }
 
     function updateNetworkRow(network) {
         scheduleRender({
             table: true,
-            detail: selectedNetwork === network.bssid,
+            detail: selectedBssid === network.bssid,
         });
     }
 
     function selectNetwork(bssid) {
-        selectedNetwork = bssid;
+        selectedBssid = bssid;
 
         // Update row selection
-        elements.networkTableBody?.querySelectorAll('.wifi-network-row').forEach(row => {
+        elements.networkList?.querySelectorAll('.network-row').forEach(row => {
             row.classList.toggle('selected', row.dataset.bssid === bssid);
         });
 
@@ -1308,11 +1302,11 @@ const WiFiMode = (function() {
     }
 
     function closeDetail() {
-        selectedNetwork = null;
+        selectedBssid = null;
         if (elements.detailDrawer) {
             elements.detailDrawer.classList.remove('open');
         }
-        elements.networkTableBody?.querySelectorAll('.wifi-network-row').forEach(row => {
+        elements.networkList?.querySelectorAll('.network-row').forEach(row => {
             row.classList.remove('selected');
         });
     }
@@ -1431,7 +1425,7 @@ const WiFiMode = (function() {
 
     function updateClientInList(client) {
         // Check if this client belongs to the currently selected network
-        if (!selectedNetwork || client.associated_bssid !== selectedNetwork) {
+        if (!selectedBssid || client.associated_bssid !== selectedBssid) {
             return;
         }
 
@@ -1459,7 +1453,7 @@ const WiFiMode = (function() {
             }
         } else {
             // New client for this network - re-fetch the full list
-            fetchClientsForNetwork(selectedNetwork);
+            fetchClientsForNetwork(selectedBssid);
         }
     }
 
@@ -1738,7 +1732,7 @@ const WiFiMode = (function() {
         probeRequests = [];
         channelStats = [];
         recommendations = [];
-        if (selectedNetwork) {
+        if (selectedBssid) {
             closeDetail();
         }
         scheduleRender({ table: true, stats: true, radar: true, chart: true });
@@ -1788,7 +1782,7 @@ const WiFiMode = (function() {
             }
         });
         clientsToRemove.forEach(mac => clients.delete(mac));
-        if (selectedNetwork && !networks.has(selectedNetwork)) {
+        if (selectedBssid && !networks.has(selectedBssid)) {
             closeDetail();
         }
         scheduleRender({ table: true, stats: true, radar: true, chart: true });

templates/index.html

@@ -846,7 +846,7 @@
 
                     <!-- Main Content: 3-column layout -->
                     <div class="wifi-main-content">
-                        <!-- LEFT: Networks Table -->
+                        <!-- LEFT: Networks List -->
                         <div class="wifi-networks-panel">
                             <div class="wifi-networks-header">
                                 <h5>Discovered Networks</h5>
@@ -857,28 +857,19 @@
                                     <button class="wifi-filter-btn" data-filter="open">Open</button>
                                     <button class="wifi-filter-btn" data-filter="hidden">Hidden</button>
                                 </div>
+                                <div class="wifi-sort-controls">
+                                    <span class="wifi-sort-label">Sort:</span>
+                                    <button class="wifi-sort-btn active" data-sort="rssi">Signal</button>
+                                    <button class="wifi-sort-btn" data-sort="essid">SSID</button>
+                                    <button class="wifi-sort-btn" data-sort="channel">Ch</button>
+                                </div>
                             </div>
                             <div class="wifi-networks-table-wrapper">
-                                <table class="wifi-networks-table" id="wifiNetworkTable">
+                                <div id="wifiNetworkList" class="wifi-network-list">
-                                    <thead>
+                                    <div class="wifi-network-placeholder">
-                                        <tr>
+                                        <p>No networks detected.<br>Start a scan to begin.</p>
-                                            <th class="sortable" data-sort="essid">SSID</th>
+                                    </div>
-                                            <th class="sortable" data-sort="bssid">BSSID</th>
+                                </div>
-                                            <th class="sortable" data-sort="channel">Ch</th>
-                                            <th class="sortable" data-sort="rssi">Signal</th>
-                                            <th class="sortable" data-sort="security">Security</th>
-                                            <th class="sortable" data-sort="clients">Clients</th>
-                                            <th class="col-agent sortable" data-sort="agent">Source</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody id="wifiNetworkTableBody">
-                                        <tr class="wifi-network-placeholder">
-                                            <td colspan="7">
-                                                <div class="placeholder-text">Start scanning to discover networks</div>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
                             </div>
                         </div>