Mark-VIII/docs/superpowers/specs/2026-08-19-encryption-card-redesign.md

Encryption Landscape Card — Ring + Key Redesign

Date: 2026-08-19

Problem

The "Encryption Landscape" recon card currently leads with a text headline (WPA2-PSK / 54 of 96 APs) that duplicates the ring graph below it and is of little value. The ring itself draws an inline legend on the canvas in a single row that overflows the 190px card width (6 labels) and gets clipped. The card should be a proper ring graph with a readable key.

Design

• Remove the encValue / encSub text line (WPA2-PSK / 54 of 96 APs) entirely. Title + ring + legend tell the whole story.
• Ring: existing doughnut grows to fill the card body (canvas ~120px tall), plain hole. Segments come from the actual reconEncBucket family keys (Open / WEP / WPA / WPA2-PSK / WPA2-Enterprise / WPA3-Personal / WPA3-PSK / WPA3-Enterprise / Unknown) — the nominal six-bucket list was a wrong assumption: reconEncBucket never returns WPA2/WPA3/Enterprise verbatim, so the ring drew an empty ring on WPA2-dominated data. Families are ordered by RECON_ENC_ORDER; colors cycle RECON_ENC_COLORS.
• Legend: move out of the canvas into real HTML below the ring. Flex-wrap so entries never clip at 190px. Each entry: colored dot + label + count (● WPA2-PSK 44). Zero-count families are never produced (built from non-zero encCounts keys). The legend div carries both the class and the id recon-enc-legend — drawCharts looks it up with getElementById, and a class-only element made the population block silently no-op.
• Empty state unchanged: "No encryption data yet — run a scan."
• Data source, per-scan bucketing (reconEncBucket), re-sync, and the 5-card layout are untouched. The other cards are untouched.

Implementation notes

• chart.js: MiniChart.doughnut keeps the legend option for any other callers (the recon landscape doughnut calls with legend:false; the enc card switches to legend:false since HTML legend replaces it).
• views.js: drop encValue/encSub; build an HTML legend container (#recon-enc-legend) populated in drawCharts from the same encCounts; ring drawn with { legend: false, height: ~120 } from a shared encSegs array (real family keys, RECON_ENC_ORDER-sorted, cycled colors).
• app.css: .recon-enc-legend flex-wrap styles + dot/entry styles.
• Ring hole stays plain (no center text).
• On-device verification MUST assert the legend has non-empty entries (class/id mismatch and the bucket-name mismatch both fail silently).