diff --git a/docs/superpowers/specs/2026-08-19-encryption-card-redesign.md b/docs/superpowers/specs/2026-08-19-encryption-card-redesign.md new file mode 100644 index 0000000..14e6255 --- /dev/null +++ b/docs/superpowers/specs/2026-08-19-encryption-card-redesign.md @@ -0,0 +1,36 @@ +# 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).