Add WiFi scanner redesign spec

docs/superpowers/specs/2026-03-26-wifi-scanner-redesign-design.md

@@ -0,0 +1,128 @@
+# WiFi Scanner UI Redesign
+
+**Date:** 2026-03-26
+**Status:** Approved
+**Scope:** Frontend only — CSS, JS, HTML. No backend changes.
+
+## Overview
+
+Redesign the WiFi scanner's main content area for better space utilisation, visual clarity, and polish. The three-panel layout (networks table / proximity radar / analysis) is kept but each panel is significantly enhanced.
+
+## Design Decisions
+
+| Decision | Choice | Rationale |
+|---|---|---|
+| Table row density | Slightly taller (2-line rows) | Adds visual richness without losing too many rows |
+| Radar style | Rotating sweep with trailing glow arc | Most recognisable "radar" metaphor, eye-catching |
+| Channel analysis | Heatmap (channels × time) | Shows congestion history, more useful than a snapshot bar chart |
+| Row click behaviour | Right panel takeover (detail replaces heatmap) | Keeps spatial layout stable; no scroll disruption |
+
+## Component Designs
+
+### 1. Status Bar
+
+Enhanced version of the existing `wifi-status-bar`:
+
+- Existing fields: Networks · Clients · Hidden
+- **New:** Open count in `var(--accent-red)` — instant threat count
+- **New:** Scan indicator (pulsing dot + "SCANNING · ch N" text) floated right, updates to "IDLE" when stopped
+- Minor spacing/typography polish
+
+### 2. Networks Table
+
+**Row structure (two visual lines per row):**
+
+```
+[left-border] SSID name / [Hidden] italic          [SECURITY BADGE] [HIDDEN TAG]
+              [━━━━━━━━━▓░░░░░░░] signal bar        ch 6 · 4 ↔ · −48
+```
+
+**Left border colour coding:**
+- `var(--accent-red)` — Open security
+- `var(--accent-green)` — WPA2 / WPA3
+- `var(--border-color)` (dim) — Hidden network with unknown security
+
+**Signal bar:** gradient `green → amber → red` based on dBm value:
+- Strong (> −55): green fill
+- Medium (−55 to −70): green→amber gradient
+- Weak (< −70): amber→red gradient
+
+**Security badge pills** (replacing current flat badges):
+- Open: red pill with red border
+- WPA2: green pill with green border
+- WPA3: cyan pill with cyan border
+- WPA/WPA2: amber pill
+
+**Hidden tag:** small dim pill "HIDDEN" next to security badge.
+
+**Row states:**
+- Default: transparent background
+- Hover: `var(--bg-tertiary)`
+- Selected: `rgba(0,180,216,0.07)` + cyan left border override
+
+### 3. Proximity Radar
+
+**Animation:** Pure CSS — a `<g>` element wrapping the sweep line + trailing arc rotates with `animation: radar-sweep 3s linear infinite`. No canvas required.
+
+**Sweep elements (inside rotating `<g>`):**
+- Trailing arc: a pie-slice `<path>` filling ~60° behind the sweep line, filled `#00b4d8` at ~8% opacity
+- Sweep line: `<line>` from centre to edge, cyan, with a green highlight layer at low opacity
+
+**Network dots:**
+- Positioned by signal strength (stronger = closer to centre)
+- Sized: near=6px, mid=4.5px, far=3px radius
+- Coloured by security: red=Open, green=WPA2/3, amber=WEP/weak, grey=hidden
+- Each dot has a soft radial glow halo (second circle at ~1.5× radius, 10–15% opacity)
+- Dots are outside the rotating group — they stay stationary
+
+**Zone summary row** below radar: Near / Mid / Far counts, coloured red / amber / green respectively.
+
+### 4. Right Panel — Channel Heatmap (default)
+
+**Layout:** Vertical stack:
+1. Band label ("2.4 GHz · Last N scans")
+2. Channel number labels (1–11)
+3. Heatmap grid (JS-generated `<div>` cells)
+4. Legend gradient bar (Low → High)
+5. Security ring chart (always visible below heatmap)
+
+**Heatmap grid:**
+- Rows = time steps (newest at top, oldest at bottom, ~10 rows)
+- Columns = channels 1–11 for 2.4 GHz, with a tab toggle for 5 GHz
+- Cell background colour maps congestion → colour: `#0d1117` (none) → dark blue → `#0ea5e9` (medium) → `#f97316` (high) → `#ef4444` (congested)
+- Grid generated by `WiFiMode` using existing channel utilisation data
+
+**Security ring chart (below heatmap):**
+- SVG ring using `stroke-dasharray` arcs
+- Segments: WPA2 (green), Open (red), WPA3 (cyan), WEP (amber), proportional to counts
+- Counts shown in a legend list to the right of the ring
+
+### 5. Right Panel — Network Detail (on row click)
+
+Replaces heatmap content in the same panel. Header changes from "Channel Heatmap" to "Network Detail" and a "← Back" button appears.
+
+**Detail panel contents:**
+- SSID (large, bold) + BSSID (monospace, dim)
+- Signal strength bar (same gradient as table rows, wider)
+- 2×3 stat grid: Channel · Band · Security · Cipher · Clients · Vendor
+- Action buttons: "⊕ Locate AP" (handoff to `WiFiLocate`) · "Close" (returns to heatmap)
+
+Closing via "← Back" or "Close" restores the heatmap and clears row selection.
+
+## File Changes
+
+| File | Change |
+|---|---|
+| `static/css/index.css` | Update/add WiFi section CSS (rows, radar, heatmap, detail panel, status bar) |
+| `templates/index.html` | Update WiFi layout HTML structure |
+| `static/js/modes/wifi.js` | Update `renderNetworks()`, add heatmap renderer, radar dot positioning, detail panel logic |
+
+No new files needed. No backend changes.
+
+## Out of Scope
+
+- WiFi locate mode (separate mode, untouched)
+- Sidebar panel (signal source, scan settings, etc.) — untouched
+- Attack options, handshake capture — untouched
+- Mobile/responsive layout changes
+- 5 GHz channel heatmap data (tab exists, data hookup is a follow-on)