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, all six buckets (Open / WEP / WPA / WPA2 / WPA3 / Enterprise) in the current 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 54). Buckets with zero APs are hidden.
• 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 }.
• app.css: .recon-enc-legend flex-wrap styles + dot/entry styles.
• Ring hole stays plain (no center text).