Rebuild banner.png in ops-console branding (both browsers)

- store/store-demo.mp4: 12.3s title card, eased console pan, popup zoom
- preview/film-title.html + preview/film/ sources for regeneration

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to KeyFinder are documented here. Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). Versioning follows [SemVer](https://semver.org/spec/v2.0.0.html).
 
+## [2.2.1] - 2026-07-18
+
+### Changed
+- Anti-slop UI refinement: removed scanline/vignette overlays, colored glows, gradient washes, and card grids in favor of flat value-step surfaces, segmented stat strips with hairline dividers, sharp corners, reverse-video active states and hover emphasis, and a titled-border (`findings.log`) table shell — stricter terminal discipline throughout
+- Store listing screenshots regenerated from the flattened UI
+
 ## [2.2.0] - 2026-07-18
 
 ### Added

README.md

@@ -21,6 +21,10 @@
 
 KeyFinder is a browser extension for Chrome and Firefox that passively scans every page you visit for leaked API keys, tokens, secrets, and credentials. It runs silently in the background with zero configuration required.
 
+<p align="center">
+  <video src="https://cdn.jsdelivr.net/gh/momenbasel/keyFinder@master/store/store-demo.mp4" poster="https://raw.githubusercontent.com/momenbasel/keyFinder/master/store/store-1-dashboard.png" controls muted playsinline></video>
+</p>
+
 ## What It Detects
 
 KeyFinder ships with **80+ detection patterns** covering secrets from:
@@ -63,8 +67,9 @@ Additionally, **Shannon entropy analysis** is applied to detect random high-entr
 - **SPA-aware** - MutationObserver re-scans dynamically injected DOM
 - **Per-tab alert badge** - Red-dot icon overlay when a tab has findings
 - **Custom keywords** - Add your own search terms to scan for (validated, 50 max)
-- **Dashboard** - Professional results page with filtering, sorting, and search
+- **Ops-console dashboard** - Flat terminal UI: severity-sorted findings, click-to-filter severity tiles, latest-finding ticker, and live search (`/` focuses, `Esc` clears)
-- **Export** - Download findings as JSON or CSV (with formula-injection sanitiser)
+- **One-click triage** - Click any match chip to copy the secret, relative timestamps with absolute on hover, per-finding delete
+- **Export** - Download filtered findings as JSON or CSV (with formula-injection sanitiser)
 - **Hardened bridge** - Per-page nonce on MAIN <-> ISOLATED CustomEvent channel
 - **Bounded storage** - 5000-finding cap with FIFO eviction; serialised writes across tabs
 - **Low footprint** - Minimal CPU and memory usage
@@ -100,7 +105,7 @@ git clone https://github.com/momenbasel/keyFinder.git
 2. **Browse** the web normally - KeyFinder scans every page in the background
 3. Click the **extension icon** to see stats and manage keywords
 4. Click **View Findings** to open the full results dashboard
-5. **Filter** by severity, provider, or type
+5. **Filter** by severity, provider, or type - or click a severity tile to filter instantly; press `/` to search
 6. **Export** findings as JSON or CSV for reporting
 
 ## Adding Custom Keywords

css/popup.css

@@ -1,18 +1,20 @@
 /* ============================================================
    KeyFinder — ops console popup
-   design system: dark instrument panel · amber = action
+   flat terminal discipline: value-step surfaces, 1px hairlines,
-   teal = recovered secrets · mono chrome · 1px hairlines
+   reverse-video emphasis, zero glow, zero surface effects
+   amber = action · teal = recovered secrets
    ============================================================ */
 
 :root {
   --bg:            #05070c;
-  --bg-raise:      #0a0e16;
+  --bg-raise:      #090d14;
-  --bg-overlay:    #101623;
+  --bg-overlay:    #0d131d;
   --line:          #1a2233;
   --line-strong:   #2a3650;
   --text:          #d6dde8;
   --text-dim:      #8b96a8;
   --text-faint:    #525d70;
+  --ink:           #05070c;
   --amber:         #f5a524;
   --amber-hot:     #ffc45c;
   --teal:          #45d0c4;
@@ -38,45 +40,24 @@ body {
   overflow-x: hidden;
 }
 
-/* vignette + scanlines — instrument-panel texture */
+::selection { background: var(--amber); color: var(--ink); }
-body::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  background: radial-gradient(130% 90% at 50% -10%, rgba(245,165,36,.05) 0%, transparent 45%),
-              radial-gradient(120% 100% at 50% 110%, rgba(0,0,0,.5) 0%, transparent 55%);
-  pointer-events: none;
-  z-index: 0;
-}
-body::after {
-  content: "";
-  position: fixed;
-  inset: 0;
-  background: repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px);
-  pointer-events: none;
-  z-index: 60;
-}
-
-::selection { background: rgba(245,165,36,.28); color: #fff; }
 
 :focus-visible {
-  outline: none;
+  outline: 1px solid var(--amber);
-  box-shadow: 0 0 0 1px var(--bg), 0 0 0 3px var(--amber);
+  outline-offset: 1px;
 }
 
 /* ------------------------------------------------ header */
 
 .header {
-  position: relative;
-  z-index: 1;
   padding: 14px 14px 12px;
   border-bottom: 1px solid var(--line);
-  background: linear-gradient(180deg, rgba(245,165,36,.045) 0%, transparent 100%);
+  background: var(--bg-raise);
 }
 
 .header-brand { display: flex; align-items: center; gap: 11px; }
 
-/* radar: rotating sweep ring + teal blip around the key */
+/* radar: rotating sweep ring + blip around the key */
 .radar {
   position: relative;
   flex: none;
@@ -84,7 +65,7 @@ body::after {
   height: 38px;
   border-radius: 50%;
   border: 1px solid var(--line-strong);
-  background: radial-gradient(circle at 50% 42%, #0d1320 0%, #070a11 72%);
+  background: var(--bg);
   display: grid;
   place-items: center;
 }
@@ -94,7 +75,7 @@ body::after {
   inset: -1px;
   border-radius: 50%;
   background: conic-gradient(from 0deg,
-      rgba(245,165,36,.95) 0deg, rgba(245,165,36,.22) 60deg, transparent 95deg);
+      var(--amber) 0deg, rgba(245,165,36,.15) 60deg, transparent 95deg);
   -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
           mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
   animation: radar-sweep 4.2s linear infinite;
@@ -108,7 +89,6 @@ body::after {
   height: 3px;
   border-radius: 50%;
   background: var(--teal);
-  box-shadow: 0 0 6px var(--teal);
   animation: blip 2.1s ease-in-out infinite;
 }
 .header-icon { width: 20px; height: 20px; display: block; }
@@ -135,8 +115,7 @@ body::after {
   color: var(--text-faint);
   border: 1px solid var(--line);
   padding: 2px 5px;
-  border-radius: 2px;
+  background: var(--bg);
-  background: var(--bg-raise);
 }
 .version::before { content: "["; color: var(--line-strong); }
 .version::after  { content: "]"; color: var(--line-strong); }
@@ -148,9 +127,9 @@ body::after {
   color: var(--text-faint);
   white-space: nowrap;
 }
-.header-tagline::before { content: "// "; color: var(--amber); opacity: .7; }
+.header-tagline::before { content: "// "; color: var(--amber); }
 
-/* armed badge — pulsing status LED */
+/* armed badge — flat status LED */
 .live-badge {
   flex: none;
   display: inline-flex;
@@ -160,30 +139,25 @@ body::after {
   font-weight: 700;
   letter-spacing: .2em;
   color: var(--green);
-  border: 1px solid rgba(61,220,151,.32);
+  border: 1px solid rgba(61,220,151,.4);
-  background: rgba(61,220,151,.06);
   padding: 4px 7px 4px 6px;
-  border-radius: 2px;
 }
 .live-dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: var(--green);
-  box-shadow: 0 0 8px var(--green);
   animation: pulse 1.5s ease-in-out infinite;
 }
 @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
 
-/* ------------------------------------------------ stats */
+/* ------------------------------------------------ stats: one segmented strip, no cards */
 
 .stats {
-  position: relative;
-  z-index: 1;
   display: flex;
-  gap: 8px;
+  margin: 10px 14px;
-  padding: 10px 14px;
+  border: 1px solid var(--line);
-  border-bottom: 1px solid var(--line);
+  background: var(--bg-raise);
 }
 
 .stat-card {
@@ -192,22 +166,8 @@ body::after {
   flex-direction: column;
   gap: 4px;
   padding: 9px 11px 8px;
-  background: var(--bg-raise);
-  border: 1px solid var(--line);
-  border-radius: 3px;
-  position: relative;
-  overflow: hidden;
 }
-.stat-card::before {
+.stat-card + .stat-card { border-left: 1px solid var(--line); }
-  content: "";
-  position: absolute;
-  top: 0; left: 0; right: 0;
-  height: 1px;
-  background: linear-gradient(90deg, var(--accent, var(--amber)), transparent 70%);
-  opacity: .8;
-}
-.stat-findings { --accent: var(--amber); }
-.stat-keywords { --accent: var(--teal); }
 
 .stat-top { display: flex; align-items: center; gap: 6px; }
 
@@ -216,8 +176,9 @@ body::after {
   height: 4px;
   border-radius: 50%;
   background: var(--accent, var(--amber));
-  box-shadow: 0 0 5px var(--accent, var(--amber));
 }
+.stat-findings { --accent: var(--amber); }
+.stat-keywords { --accent: var(--teal); }
 
 .stat-label {
   font-size: 8.5px;
@@ -237,7 +198,7 @@ body::after {
 
 /* ------------------------------------------------ watchlist */
 
-.section { position: relative; z-index: 1; padding: 12px 14px 10px; }
+.section { padding: 2px 14px 10px; }
 
 .section-title {
   font-size: 9px;
@@ -247,9 +208,14 @@ body::after {
   letter-spacing: .22em;
   margin-bottom: 9px;
   display: flex;
-  align-items: baseline;
+  align-items: center;
   gap: 7px;
 }
+.section-title::after {
+  content: "";
+  flex: 1;
+  border-top: 1px dashed var(--line);
+}
 .section-sub {
   font-size: 8.5px;
   font-weight: 400;
@@ -264,13 +230,12 @@ body::after {
   align-items: stretch;
   background: var(--bg-raise);
   border: 1px solid var(--line-strong);
-  border-radius: 3px;
   margin-bottom: 8px;
   transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
 }
 .keyword-form:focus-within {
   border-color: var(--amber);
-  box-shadow: 0 0 0 1px rgba(245,165,36,.35), 0 0 18px rgba(245,165,36,.07);
+  box-shadow: 0 0 0 1px var(--amber);
 }
 
 .prompt {
@@ -301,9 +266,8 @@ body::after {
   margin: 3px;
   padding: 0 13px;
   background: var(--amber);
-  color: #120a00;
+  color: var(--ink);
   border: none;
-  border-radius: 2px;
   font-family: var(--mono);
   font-size: 10px;
   font-weight: 700;
@@ -317,17 +281,16 @@ body::after {
 
 .error-msg {
   padding: 6px 9px;
-  background: rgba(255,92,92,.07);
+  background: rgba(255,92,92,.08);
-  border: 1px solid rgba(255,92,92,.3);
+  border: 1px solid rgba(255,92,92,.35);
   border-left-width: 2px;
-  border-radius: 2px;
   color: var(--red);
   font-size: 10px;
   letter-spacing: .04em;
   margin-bottom: 8px;
   animation: shake .3s var(--ease);
 }
-.error-msg::before { content: "ERR // "; font-weight: 700; opacity: .7; }
+.error-msg::before { content: "ERR // "; font-weight: 700; }
 @keyframes shake {
   0%, 100% { transform: translateX(0); }
   25% { transform: translateX(-3px); }
@@ -350,9 +313,7 @@ body::after {
   align-items: center;
   gap: 9px;
   padding: 5px 7px;
-  border-radius: 2px;
+  transition: background .12s var(--ease);
-  border-left: 2px solid transparent;
-  transition: background .12s var(--ease), border-color .12s var(--ease);
 }
 .keyword-item::before {
   content: counter(kw, decimal-leading-zero);
@@ -361,10 +322,8 @@ body::after {
   letter-spacing: .05em;
   flex: none;
 }
-.keyword-item:hover {
+.keyword-item:hover { background: var(--bg-raise); }
-  background: var(--bg-raise);
+.keyword-item:hover .keyword-label { color: var(--teal); }
-  border-left-color: var(--teal);
-}
 
 .keyword-label {
   flex: 1;
@@ -374,6 +333,7 @@ body::after {
   white-space: nowrap;
   font-size: 11.5px;
   color: var(--text);
+  transition: color .12s var(--ease);
 }
 
 .keyword-remove {
@@ -388,15 +348,13 @@ body::after {
   font-size: 13px;
   line-height: 1;
   cursor: pointer;
-  border-radius: 2px;
   opacity: .45;
   transition: all .12s var(--ease);
 }
 .keyword-item:hover .keyword-remove { opacity: 1; }
 .keyword-remove:hover {
-  background: rgba(255,92,92,.1);
+  background: var(--red);
-  border-color: rgba(255,92,92,.35);
+  color: var(--ink);
-  color: var(--red);
 }
 
 .empty-state {
@@ -406,15 +364,12 @@ body::after {
   font-size: 10.5px;
   letter-spacing: .06em;
   border: 1px dashed var(--line-strong);
-  border-radius: 3px;
 }
 .empty-state::before { content: "[ empty watchlist ]"; display: block; margin-bottom: 2px; opacity: .6; }
 
 /* ------------------------------------------------ footer */
 
 .footer {
-  position: relative;
-  z-index: 1;
   padding: 10px 14px 14px;
   border-top: 1px solid var(--line);
 }
@@ -438,9 +393,9 @@ body::after {
   height: 11px;
   margin-left: 3px;
   background: var(--amber);
-  animation: cursor-blink 1s steps(1) infinite;
+  animation: cursor-blink 1.06s steps(1) infinite;
 }
-@keyframes cursor-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
+@keyframes cursor-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
 
 .results-btn {
   display: flex;
@@ -449,9 +404,8 @@ body::after {
   gap: 8px;
   padding: 10px;
   background: var(--amber);
-  color: #120a00;
+  color: var(--ink);
   text-decoration: none;
-  border-radius: 3px;
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
@@ -467,7 +421,7 @@ body::after {
 
 ::-webkit-scrollbar { width: 5px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: #1c2536; border-radius: 3px; }
+::-webkit-scrollbar-thumb { background: #1c2536; }
 ::-webkit-scrollbar-thumb:hover { background: #2a3650; }
 
 /* ------------------------------------------------ reduced motion */

css/results.css

@@ -1,18 +1,20 @@
 /* ============================================================
    KeyFinder — findings console
-   dark instrument panel · amber = action · teal = secrets
+   flat terminal discipline: value-step surfaces, 1px hairlines,
+   reverse-video emphasis, zero glow, zero surface effects
    severity scale: red > orange > yellow > teal
    ============================================================ */
 
 :root {
   --bg:            #05070c;
-  --bg-raise:      #0a0e16;
+  --bg-raise:      #090d14;
-  --bg-overlay:    #101623;
+  --bg-overlay:    #0d131d;
   --line:          #1a2233;
   --line-strong:   #2a3650;
   --text:          #d6dde8;
   --text-dim:      #8b96a8;
   --text-faint:    #525d70;
+  --ink:           #05070c;
   --amber:         #f5a524;
   --amber-hot:     #ffc45c;
   --teal:          #45d0c4;
@@ -39,40 +41,19 @@ body {
   font-feature-settings: "tnum";
 }
 
-/* vignette + scanlines */
+::selection { background: var(--amber); color: var(--ink); }
-body::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  background: radial-gradient(130% 70% at 50% -10%, rgba(245,165,36,.05) 0%, transparent 45%),
-              radial-gradient(120% 100% at 50% 115%, rgba(0,0,0,.45) 0%, transparent 55%);
-  pointer-events: none;
-  z-index: 0;
-}
-body::after {
-  content: "";
-  position: fixed;
-  inset: 0;
-  background: repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
-  pointer-events: none;
-  z-index: 90;
-}
-
-::selection { background: rgba(245,165,36,.28); color: #fff; }
 
 :focus-visible {
-  outline: none;
+  outline: 1px solid var(--amber);
-  box-shadow: 0 0 0 1px var(--bg), 0 0 0 3px var(--amber);
+  outline-offset: 1px;
 }
 
 /* ------------------------------------------------ header */
 
 .header {
-  position: relative;
-  z-index: 1;
   padding: 14px 24px 12px;
   border-bottom: 1px solid var(--line);
-  background: linear-gradient(180deg, rgba(245,165,36,.04) 0%, transparent 100%);
+  background: var(--bg-raise);
   display: flex;
   flex-direction: column;
   gap: 11px;
@@ -96,7 +77,7 @@ body::after {
   height: 42px;
   border-radius: 50%;
   border: 1px solid var(--line-strong);
-  background: radial-gradient(circle at 50% 42%, #0d1320 0%, #070a11 72%);
+  background: var(--bg);
   display: grid;
   place-items: center;
 }
@@ -106,7 +87,7 @@ body::after {
   inset: -1px;
   border-radius: 50%;
   background: conic-gradient(from 0deg,
-      rgba(245,165,36,.95) 0deg, rgba(245,165,36,.22) 60deg, transparent 95deg);
+      var(--amber) 0deg, rgba(245,165,36,.15) 60deg, transparent 95deg);
   -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
           mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
   animation: radar-sweep 4.2s linear infinite;
@@ -120,7 +101,6 @@ body::after {
   height: 3px;
   border-radius: 50%;
   background: var(--teal);
-  box-shadow: 0 0 6px var(--teal);
   animation: blip 2.1s ease-in-out infinite;
 }
 .header-icon { width: 22px; height: 22px; display: block; }
@@ -145,8 +125,7 @@ body::after {
   color: var(--text-faint);
   border: 1px solid var(--line);
   padding: 2px 5px;
-  border-radius: 2px;
+  background: var(--bg);
-  background: var(--bg-raise);
 }
 .version::before { content: "["; color: var(--line-strong); }
 .version::after  { content: "]"; color: var(--line-strong); }
@@ -158,7 +137,7 @@ body::after {
   color: var(--text-faint);
   text-transform: uppercase;
 }
-.header-sub::before { content: "// "; color: var(--amber); opacity: .7; }
+.header-sub::before { content: "// "; color: var(--amber); }
 
 .live-badge {
   flex: none;
@@ -169,17 +148,14 @@ body::after {
   font-weight: 700;
   letter-spacing: .2em;
   color: var(--green);
-  border: 1px solid rgba(61,220,151,.32);
+  border: 1px solid rgba(61,220,151,.4);
-  background: rgba(61,220,151,.06);
   padding: 4px 8px 4px 7px;
-  border-radius: 2px;
 }
 .live-dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: var(--green);
-  box-shadow: 0 0 8px var(--green);
   animation: pulse 1.5s ease-in-out infinite;
 }
 @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@@ -198,15 +174,14 @@ body::after {
   display: flex;
   align-items: center;
   gap: 7px;
-  background: var(--bg-raise);
+  background: var(--bg);
   border: 1px solid var(--line-strong);
-  border-radius: 3px;
   padding: 0 8px;
   transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
 }
 .search-wrap:focus-within {
   border-color: var(--amber);
-  box-shadow: 0 0 0 1px rgba(245,165,36,.3), 0 0 18px rgba(245,165,36,.06);
+  box-shadow: 0 0 0 1px var(--amber);
 }
 .search-glyph { color: var(--amber); font-size: 13px; user-select: none; }
 .search-wrap input {
@@ -228,7 +203,6 @@ body::after {
   color: var(--text-faint);
   border: 1px solid var(--line-strong);
   border-bottom-width: 2px;
-  border-radius: 3px;
   padding: 1px 5px;
   user-select: none;
 }
@@ -242,7 +216,6 @@ body::after {
   text-transform: uppercase;
   letter-spacing: .1em;
   padding: 7px 12px;
-  border-radius: 3px;
   border: 1px solid transparent;
   cursor: pointer;
   transition: all .15s var(--ease);
@@ -255,17 +228,17 @@ body::after {
   color: var(--text-dim);
 }
 .btn-secondary:hover {
-  color: var(--amber-hot);
+  color: var(--ink);
+  background: var(--amber);
   border-color: var(--amber);
-  background: rgba(245,165,36,.06);
 }
 
 .btn-danger {
   background: transparent;
-  border-color: rgba(255,92,92,.35);
+  border-color: rgba(255,92,92,.4);
   color: var(--red);
 }
-.btn-danger:hover { background: rgba(255,92,92,.1); border-color: var(--red); }
+.btn-danger:hover { background: var(--red); border-color: var(--red); color: var(--ink); }
 
 /* ------------------------------------------------ filter row */
 
@@ -281,10 +254,8 @@ body::after {
 .filter {
   display: flex;
   align-items: center;
-  gap: 0;
+  background: var(--bg);
-  background: var(--bg-raise);
   border: 1px solid var(--line);
-  border-radius: 3px;
   overflow: hidden;
   transition: border-color .15s var(--ease);
 }
@@ -296,7 +267,6 @@ body::after {
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--amber);
-  background: rgba(245,165,36,.07);
   border-right: 1px solid var(--line);
   padding: 7px 7px 7px 9px;
   user-select: none;
@@ -330,16 +300,14 @@ body::after {
 }
 .meta-line strong { color: var(--text-dim); font-weight: 600; }
 
-/* ------------------------------------------------ stats bar */
+/* ------------------------------------------------ stats: one segmented strip, no cards */
 
 .stats-bar {
-  position: relative;
-  z-index: 1;
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  margin: 12px 24px;
-  padding: 12px 24px;
+  border: 1px solid var(--line);
-  border-bottom: 1px solid var(--line);
+  background: var(--bg-raise);
 }
 
 .stat-item {
@@ -349,23 +317,18 @@ body::after {
   flex-direction: column;
   gap: 4px;
   padding: 9px 12px 8px;
-  background: var(--bg-raise);
-  border: 1px solid var(--line);
-  border-radius: 3px;
   position: relative;
-  overflow: hidden;
+  transition: background .15s var(--ease);
-  transition: border-color .15s var(--ease), background .15s var(--ease);
-}
-.stat-item::before {
-  content: "";
-  position: absolute;
-  top: 0; left: 0; right: 0;
-  height: 1px;
-  background: linear-gradient(90deg, var(--accent, var(--text-dim)), transparent 75%);
 }
+.stat-item + .stat-item { border-left: 1px solid var(--line); }
 .stat-item[data-filter] { cursor: pointer; }
-.stat-item[data-filter]:hover { background: var(--bg-overlay); border-color: var(--line-strong); }
+.stat-item[data-filter]:hover { background: var(--bg-overlay); }
-.stat-item.active { border-color: var(--accent, var(--amber)); box-shadow: 0 0 0 1px var(--accent, var(--amber)) inset; }
+
+/* reverse-video active filter */
+.stat-item.active { background: var(--accent, var(--amber)); }
+.stat-item.active .stat-num,
+.stat-item.active .stat-lbl { color: var(--ink); }
+.stat-item.active .stat-led { background: var(--ink); }
 
 .stat-total    { --accent: #d6dde8; }
 .stat-critical { --accent: var(--red); }
@@ -381,7 +344,6 @@ body::after {
   height: 4px;
   border-radius: 50%;
   background: var(--accent, var(--text-dim));
-  box-shadow: 0 0 5px var(--accent, var(--text-dim));
 }
 .stat-critical .stat-led { animation: pulse 1.5s ease-in-out infinite; }
 
@@ -405,14 +367,12 @@ body::after {
 /* ------------------------------------------------ ticker */
 
 .ticker {
-  position: relative;
-  z-index: 1;
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 7px 24px;
+  border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
-  background: rgba(245,165,36,.03);
   font-size: 10px;
   letter-spacing: .05em;
   white-space: nowrap;
@@ -426,7 +386,6 @@ body::after {
   height: 5px;
   border-radius: 50%;
   background: var(--amber);
-  box-shadow: 0 0 6px var(--amber);
   animation: pulse 1.5s ease-in-out infinite;
 }
 .ticker-label {
@@ -443,50 +402,41 @@ body::after {
 }
 .ticker-text code { color: var(--teal); }
 
-/* ------------------------------------------------ table shell */
+/* ------------------------------------------------ table shell: titled border */
 
-.main { position: relative; z-index: 1; padding: 16px 24px 20px; }
+.main { padding: 14px 24px 20px; }
 
-.table-shell {
+.titled {
   position: relative;
   border: 1px solid var(--line);
-  border-radius: 4px;
+  background: var(--bg-raise);
-  background: rgba(10,14,22,.55);
 }
-/* HUD corner brackets */
+.titled-label {
-.table-shell::before,
-.table-shell::after {
-  content: "";
   position: absolute;
-  width: 9px;
+  top: -7px;
-  height: 9px;
+  left: 12px;
-  border: 0 solid var(--amber);
+  z-index: 3;
-  opacity: .55;
+  background: var(--bg);
-  pointer-events: none;
+  padding: 0 7px;
-}
-.table-shell::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
-.table-shell::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
-
-.shell-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--line);
-}
-.shell-title {
   font-size: 9.5px;
   font-weight: 700;
   letter-spacing: .18em;
   color: var(--text-dim);
   text-transform: uppercase;
+  line-height: 1.4;
 }
-.shell-title::before { content: "● "; color: var(--amber); font-size: 7px; vertical-align: 1.5px; }
+.titled-label::before { content: "● "; color: var(--amber); font-size: 7px; vertical-align: 1.5px; }
-.shell-meta {
+.titled-meta {
+  position: absolute;
+  top: -7px;
+  right: 12px;
+  z-index: 3;
+  background: var(--bg);
+  padding: 0 7px;
   font-size: 9px;
   letter-spacing: .1em;
   color: var(--text-faint);
+  line-height: 1.4;
 }
 
 .findings-table {
@@ -497,7 +447,7 @@ body::after {
 }
 
 .findings-table thead th {
-  padding: 8px 12px;
+  padding: 12px 12px 8px;
   text-align: left;
   font-size: 8.5px;
   font-weight: 700;
@@ -508,18 +458,18 @@ body::after {
   white-space: nowrap;
   position: sticky;
   top: 0;
-  background: var(--bg);
+  background: var(--bg-raise);
   z-index: 2;
 }
 
 .findings-table tbody tr {
-  border-bottom: 1px solid rgba(26,34,51,.5);
+  border-bottom: 1px solid rgba(26,34,51,.55);
   transition: background .1s var(--ease);
 }
 .findings-table tbody tr:last-child { border-bottom: none; }
-.findings-table tbody tr:hover { background: rgba(255,255,255,.022); }
+.findings-table tbody tr:hover { background: var(--bg-overlay); }
 
-/* severity accent on the row's leading edge */
+/* severity accent on the row's leading edge — functional color coding */
 .findings-table tbody tr td:first-child { box-shadow: inset 2px 0 0 transparent; }
 .findings-table tbody tr.sev-critical td:first-child { box-shadow: inset 2px 0 0 var(--red); }
 .findings-table tbody tr.sev-high     td:first-child { box-shadow: inset 2px 0 0 var(--orange); }
@@ -549,19 +499,17 @@ body::after {
 
 .td-num { color: var(--text-faint); font-size: 9.5px; }
 
-/* severity badge — LED + label */
+/* severity badge — flat LED + label */
 .badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 3px 8px 3px 7px;
-  border-radius: 2px;
   font-size: 8.5px;
   font-weight: 700;
   letter-spacing: .14em;
   color: var(--sev, var(--text-dim));
-  border: 1px solid color-mix(in srgb, var(--sev, #8b96a8) 38%, transparent);
+  border: 1px solid color-mix(in srgb, var(--sev, #8b96a8) 45%, transparent);
-  background: color-mix(in srgb, var(--sev, #8b96a8) 8%, transparent);
 }
 .badge::before {
   content: "";
@@ -569,7 +517,6 @@ body::after {
   height: 4px;
   border-radius: 50%;
   background: var(--sev, var(--text-dim));
-  box-shadow: 0 0 5px var(--sev, transparent);
 }
 .badge-critical { --sev: var(--red); }
 .badge-critical::before { animation: pulse 1.5s ease-in-out infinite; }
@@ -581,22 +528,20 @@ body::after {
 .type-badge {
   display: inline-block;
   padding: 2px 7px;
-  background: var(--bg-raise);
+  background: var(--bg);
   border: 1px solid var(--line);
-  border-radius: 2px;
   font-size: 9px;
   letter-spacing: .06em;
   color: var(--text-dim);
 }
 
-/* the recovered secret — teal mono chip, click to copy */
+/* the recovered secret — teal mono chip, reverse video on hover */
 .match-value {
   font-family: var(--mono);
   font-size: 10.5px;
-  background: rgba(69,208,196,.06);
+  background: var(--bg);
   padding: 3px 8px;
-  border-radius: 2px;
+  border: 1px solid rgba(69,208,196,.35);
-  border: 1px solid rgba(69,208,196,.22);
   color: var(--teal);
   max-width: 220px;
   display: inline-block;
@@ -607,9 +552,9 @@ body::after {
   transition: all .12s var(--ease);
 }
 .match-value:hover {
-  background: rgba(69,208,196,.12);
+  background: var(--teal);
   border-color: var(--teal);
-  box-shadow: 0 0 12px rgba(69,208,196,.12);
+  color: var(--ink);
 }
 
 .td-provider { font-weight: 700; color: var(--text); font-size: 10.5px; letter-spacing: .04em; max-width: 130px; }
@@ -618,8 +563,8 @@ body::after {
 .td-source   { max-width: 200px; }
 .td-time     { color: var(--text-faint); font-size: 10px; white-space: nowrap; }
 
-a { color: var(--teal); text-decoration: none; border-bottom: 1px dashed rgba(69,208,196,.35); }
+a { color: var(--teal); text-decoration: none; border-bottom: 1px dashed rgba(69,208,196,.4); }
-a:hover { color: #8be8de; border-bottom-style: solid; }
+a:hover { color: var(--ink); background: var(--teal); border-bottom-color: var(--teal); }
 
 /* row actions — revealed on row hover */
 .td-actions { white-space: nowrap; text-align: right; }
@@ -629,7 +574,6 @@ a:hover { color: #8be8de; border-bottom-style: solid; }
   padding: 3px 8px;
   background: transparent;
   border: 1px solid var(--line-strong);
-  border-radius: 2px;
   color: var(--text-faint);
   font-size: 9px;
   font-weight: 700;
@@ -642,15 +586,14 @@ a:hover { color: #8be8de; border-bottom-style: solid; }
 }
 .findings-table tbody tr:hover .btn-icon,
 .btn-icon:focus-visible { opacity: 1; }
-.btn-icon:hover { color: var(--amber-hot); border-color: var(--amber); background: rgba(245,165,36,.06); }
+.btn-icon:hover { color: var(--ink); background: var(--amber); border-color: var(--amber); }
-.btn-icon.copied { color: var(--green); border-color: var(--green); }
+.btn-icon.copied { color: var(--ink); background: var(--green); border-color: var(--green); }
-.btn-icon-danger:hover { color: var(--red); border-color: var(--red); background: rgba(255,92,92,.08); }
+.btn-icon-danger:hover { color: var(--ink); background: var(--red); border-color: var(--red); }
 
 /* skeleton loading rows */
 .skl-row td { padding: 9px 12px; }
 .skl {
   height: 9px;
-  border-radius: 2px;
   background: linear-gradient(90deg, #0c1119 25%, #151c2b 50%, #0c1119 75%);
   background-size: 200% 100%;
   animation: shimmer 1.15s linear infinite;
@@ -666,12 +609,12 @@ a:hover { color: #8be8de; border-bottom-style: solid; }
   color: var(--text-faint);
 }
 
-.empty-radar { width: 72px; height: 72px; margin-bottom: 18px; opacity: .8; }
+.empty-radar { width: 72px; height: 72px; margin-bottom: 18px; opacity: .85; }
 .er-ring  { fill: none; stroke: var(--line-strong); stroke-width: 1; }
 .er-cross { stroke: var(--line); stroke-width: 1; }
 .er-core  { fill: var(--teal); }
 .er-sweep {
-  fill: rgba(245,165,36,.14);
+  fill: rgba(245,165,36,.16);
   transform-origin: 36px 36px;
   animation: radar-sweep 4.2s linear infinite;
 }
@@ -695,7 +638,6 @@ a:hover { color: #8be8de; border-bottom-style: solid; }
   font-size: 9.5px;
   letter-spacing: .1em;
   color: var(--amber);
-  opacity: .75;
 }
 .empty-hint::before { content: "» "; }
 
@@ -708,7 +650,6 @@ a:hover { color: #8be8de; border-bottom-style: solid; }
   letter-spacing: .14em;
   color: var(--text-faint);
   text-transform: uppercase;
-  opacity: .7;
 }
 .footer-sep { margin: 0 8px; color: var(--line-strong); }
 
@@ -716,7 +657,7 @@ a:hover { color: #8be8de; border-bottom-style: solid; }
 
 ::-webkit-scrollbar { width: 7px; height: 7px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: #1c2536; border-radius: 4px; }
+::-webkit-scrollbar-thumb { background: #1c2536; }
 ::-webkit-scrollbar-thumb:hover { background: #2a3650; }
 
 /* ------------------------------------------------ reduced motion */

manifest.firefox.json

@@ -1,7 +1,7 @@
 {
   "name": "KeyFinder",
   "description": "Passively discovers API keys, tokens, and secrets leaked in page scripts, DOM, network responses, and browser storage. Available for Chrome and Firefox.",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "manifest_version": 3,
   "browser_specific_settings": {
     "gecko": {

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "KeyFinder",
   "description": "Passively discovers API keys, tokens, and secrets leaked in page scripts, DOM, network responses, and browser storage. Available for Chrome and Firefox.",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "manifest_version": 3,
   "action": {
     "default_icon": {

preview/banner.html

@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>KeyFinder — banner</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      width: 1280px;
+      height: 640px;
+      background: #05070c;
+      font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      color: #d6dde8;
+      display: grid;
+      place-items: center;
+    }
+    .lockup { text-align: center; }
+
+    /* radar ring around the key */
+    .radar {
+      position: relative;
+      width: 108px;
+      height: 108px;
+      margin: 0 auto;
+      border-radius: 50%;
+      border: 1px solid #2a3650;
+      background: #090d14;
+      display: grid;
+      place-items: center;
+    }
+    .radar::before {
+      content: "";
+      position: absolute;
+      inset: -1px;
+      border-radius: 50%;
+      background: conic-gradient(from 0deg, #f5a524 0deg, rgba(245,165,36,.15) 60deg, transparent 95deg);
+      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
+              mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
+    }
+    .radar::after {
+      content: "";
+      position: absolute;
+      top: 22px; left: 26px;
+      width: 4px; height: 4px;
+      border-radius: 50%;
+      background: #45d0c4;
+    }
+    .radar img { width: 58px; height: 58px; }
+
+    h1 {
+      margin-top: 26px;
+      color: #fff;
+      font-size: 62px;
+      font-weight: 700;
+      letter-spacing: .22em;
+      padding-left: .22em;
+    }
+    .ver {
+      display: inline-block;
+      vertical-align: 14px;
+      font-size: 11px;
+      font-weight: 500;
+      letter-spacing: .08em;
+      color: #525d70;
+      border: 1px solid #1a2233;
+      padding: 3px 7px;
+      margin-left: 10px;
+    }
+    .tag {
+      margin-top: 16px;
+      color: #f5a524;
+      font-size: 15px;
+      letter-spacing: .26em;
+    }
+
+    .chips {
+      margin-top: 34px;
+      display: flex;
+      justify-content: center;
+      gap: 10px;
+    }
+    .chip {
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: .14em;
+      text-transform: uppercase;
+      padding: 7px 14px;
+      border: 1px solid #2a3650;
+      color: #8b96a8;
+      display: inline-flex;
+      align-items: center;
+      gap: 7px;
+    }
+    .chip i {
+      width: 4px; height: 4px;
+      border-radius: 50%;
+      background: currentColor;
+      font-style: normal;
+    }
+    .chip-amber { color: #f5a524; border-color: rgba(245,165,36,.45); }
+    .chip-teal  { color: #45d0c4; border-color: rgba(69,208,196,.45); }
+
+    .providers {
+      margin-top: 30px;
+      font-size: 11px;
+      letter-spacing: .14em;
+      color: #525d70;
+      text-transform: uppercase;
+    }
+    .providers b { color: #f5a524; font-weight: 600; }
+  </style>
+</head>
+<body>
+  <div class="lockup">
+    <div class="radar"><img src="../icons/icon128.png" alt=""></div>
+    <h1>KEYFINDER<span class="ver">[v2.2.1]</span></h1>
+    <div class="tag">// PASSIVE API KEY &amp; SECRET DISCOVERY</div>
+    <div class="chips">
+      <span class="chip chip-amber"><i></i>Chrome extension</span>
+      <span class="chip chip-teal"><i></i>Firefox add-on</span>
+      <span class="chip"><i></i>Manifest V3</span>
+      <span class="chip"><i></i>80+ patterns</span>
+    </div>
+    <div class="providers"><b>AWS</b> · GCP · Azure · Stripe · GitHub · Slack · OpenAI · and 70+ more</div>
+  </div>
+</body>
+</html>

preview/film-title.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>KeyFinder — film title</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      width: 1280px;
+      height: 720px;
+      background: #05070c;
+      display: grid;
+      place-items: center;
+      font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    }
+    .card { text-align: center; }
+    .icon { width: 76px; height: 76px; }
+    h1 {
+      color: #fff;
+      font-size: 46px;
+      font-weight: 700;
+      letter-spacing: .28em;
+      margin-top: 20px;
+      padding-left: .28em; /* optical centering with tracking */
+    }
+    .tag {
+      color: #f5a524;
+      font-size: 14px;
+      letter-spacing: .22em;
+      margin-top: 12px;
+    }
+    .spec {
+      color: #525d70;
+      font-size: 11px;
+      letter-spacing: .16em;
+      margin-top: 26px;
+    }
+    .spec b { color: #8b96a8; font-weight: 600; }
+    .led {
+      display: inline-block;
+      width: 6px; height: 6px;
+      border-radius: 50%;
+      background: #3ddc97;
+      margin-right: 8px;
+      vertical-align: 1px;
+    }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <img class="icon" src="../icons/icon128.png" alt="">
+    <h1>KEYFINDER</h1>
+    <div class="tag">// PASSIVE SECRET DISCOVERY</div>
+    <div class="spec"><span class="led"></span><b>v2.2.1</b> &nbsp;·&nbsp; 80+ PATTERNS &nbsp;·&nbsp; 10 ATTACK SURFACES &nbsp;·&nbsp; LOCAL-ONLY</div>
+  </div>
+</body>
+</html>

preview/preview-stub-empty.js

@@ -0,0 +1,46 @@
+// Preview-only stub for the chrome.* extension API with realistic sample data.
+// Loaded before the real popup.js / results.js in preview/*.html files.
+// NOT shipped — build.sh only copies the explicit SHARED_FILES list.
+(function () {
+  const NOW = Date.now();
+  const MIN = 60 * 1000;
+  const HOUR = 60 * MIN;
+  const DAY = 24 * HOUR;
+
+  const SAMPLE_FINDINGS = [
+    { id: "f1", severity: "critical", provider: "AWS", patternName: "AWS Access Key ID", match: "AKIAIOSFODNN7EXAMPLE", type: "inline-script", domain: "dashboard.acme.io", url: "https://dashboard.acme.io/assets/app.js", pageUrl: "https://dashboard.acme.io/", timestamp: NOW - 4 * MIN },
+    { id: "f2", severity: "critical", provider: "Stripe", patternName: "Stripe Live Secret Key", match: "sk_live_4eC39HqLyj…T1zdp7dc", type: "network-response", domain: "api.shopfront.dev", url: "https://api.shopfront.dev/v2/config", pageUrl: "https://shopfront.dev/", timestamp: NOW - 26 * MIN },
+    { id: "f3", severity: "critical", provider: "OpenAI", patternName: "OpenAI API Key", match: "sk-proj-abc123def456ghi789jkl", type: "web-storage", domain: "playground.internal.tools", url: "https://playground.internal.tools/", pageUrl: "https://playground.internal.tools/", timestamp: NOW - 2 * HOUR },
+    { id: "f4", severity: "high", provider: "GitHub", patternName: "GitHub Personal Access Token", match: "ghp_16C7e42F292c6912E7710c838347Ae178B4a", type: "html-comment", domain: "gitmirror.example.org", url: "https://gitmirror.example.org/login", pageUrl: "https://gitmirror.example.org/", timestamp: NOW - 3 * HOUR },
+    { id: "f5", severity: "high", provider: "Slack", patternName: "Slack Bot Token", match: "xoxb-17653672481-19874698323-pdLjLl…CwXgE", type: "inline-script", domain: "status.teamchat.app", url: "https://status.teamchat.app/embed.js", pageUrl: "https://status.teamchat.app/", timestamp: NOW - 5 * HOUR },
+    { id: "f6", severity: "high", provider: "MongoDB", patternName: "MongoDB Connection String", match: "mongodb+srv://admin:p4ssw0rd@cluster0.mongodb.net/prod", type: "data-attribute", domain: "metrics.saasly.co", url: "https://metrics.saasly.co/", pageUrl: "https://metrics.saasly.co/", timestamp: NOW - 9 * HOUR },
+    { id: "f7", severity: "high", provider: "DOM Scan", patternName: "Sensitive Meta Tag", match: "csrf-token=9f8e7d6c5b4a3210", type: "meta-tag", domain: "legacy.corpnet.com", url: "https://legacy.corpnet.com/index.html", pageUrl: "https://legacy.corpnet.com/", timestamp: NOW - 14 * HOUR },
+    { id: "f8", severity: "medium", provider: "Generic", patternName: "JSON Web Token (JWT)", match: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNryP4J3jVmNHl0w5N_XgL0n3I9PlFUP0THsR8U", type: "url-param", domain: "auth.redirectlab.net", url: "https://auth.redirectlab.net/callback?token=eyJhbGciOi...", pageUrl: "https://redirectlab.net/", timestamp: NOW - 20 * HOUR },
+    { id: "f9", severity: "medium", provider: "DOM Scan", patternName: "Hidden Form Field", match: "session_id=a8f5f167f44f4964e6c998dee827110c", type: "hidden-input", domain: "shop.example.com", url: "https://shop.example.com/checkout", pageUrl: "https://shop.example.com/", timestamp: NOW - 1 * DAY },
+    { id: "f10", severity: "medium", provider: "URL Scan", patternName: "High-Entropy URL Parameter", match: "sig=4c4f6e6f2d9a4b8c8d7e6f5a4b3c2d1e", type: "url-param", domain: "cdn.medialab.io", url: "https://cdn.medialab.io/v/assets?sig=4c4f6e...", pageUrl: "https://medialab.io/", timestamp: NOW - 2 * DAY },
+    { id: "f11", severity: "medium", provider: "Web Storage", patternName: "localStorage Secret", match: "refresh_token=def502001a2b3c4d5e6f", type: "web-storage", domain: "app.notesync.dev", url: "https://app.notesync.dev/", pageUrl: "https://app.notesync.dev/", timestamp: NOW - 3 * DAY },
+    { id: "f12", severity: "low", provider: "Generic", patternName: "Keyword: client_id", match: "client_id=Iv1.8a61f9b3a7aba766", type: "script-src", domain: "login.oauthflow.app", url: "https://login.oauthflow.app/js/oauth.js?client_id=Iv1.8a61f9b3a7aba766", pageUrl: "https://login.oauthflow.app/", timestamp: NOW - 4 * DAY },
+  ];
+
+  const SAMPLE_KEYWORDS = [
+    "key", "api_key", "apikey", "api-key", "secret", "token",
+    "access_token", "auth", "credential", "password", "client_id", "client_secret",
+  ];
+
+  window.chrome = {
+    runtime: {
+      getManifest: () => ({ version: "2.2.1" }),
+      sendMessage: async (msg) => {
+        switch (msg && msg.type) {
+          case "getFindings": return { findings: [] };
+          case "getKeywords": return { keywords: SAMPLE_KEYWORDS.slice() };
+          case "addKeyword": return { ok: true };
+          case "removeKeyword": return { ok: true };
+          case "removeFinding": return { ok: true };
+          case "clearFindings": return { ok: true };
+          default: return {};
+        }
+      },
+    },
+  };
+})();

preview/preview-stub.js

@@ -29,7 +29,7 @@
 
   window.chrome = {
     runtime: {
-      getManifest: () => ({ version: "2.1.1" }),
+      getManifest: () => ({ version: "2.2.1" }),
       sendMessage: async (msg) => {
         switch (msg && msg.type) {
           case "getFindings": return { findings: SAMPLE_FINDINGS.slice() };

preview/results-preview-empty.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>KeyFinder — Findings Console</title>
+  <link rel="stylesheet" href="../css/results.css">
+</head>
+<body>
+  <header class="header">
+    <div class="header-row">
+      <div class="header-left">
+        <span class="radar" aria-hidden="true">
+          <img src="../icons/icon48.png" alt="" class="header-icon">
+        </span>
+        <div class="brand-text">
+          <h1>KEYFINDER<span class="version" id="versionLabel"></span></h1>
+          <p class="header-sub">findings console</p>
+        </div>
+        <span class="live-badge" title="Passive scanning is active"><span class="live-dot"></span>PASSIVE</span>
+      </div>
+      <div class="header-actions">
+        <div class="search-wrap">
+          <span class="search-glyph" aria-hidden="true">&#9906;</span>
+          <input type="text" id="searchBox" placeholder="search findings…" autocomplete="off" spellcheck="false">
+          <kbd class="kbd" title="Press / to focus search">/</kbd>
+        </div>
+        <div class="btn-group">
+          <button id="exportJsonBtn" class="btn btn-secondary" title="Download filtered findings as JSON">&darr; JSON</button>
+          <button id="exportCsvBtn" class="btn btn-secondary" title="Download filtered findings as CSV">&darr; CSV</button>
+          <button id="clearBtn" class="btn btn-danger" title="Remove all findings">&times; Clear</button>
+        </div>
+      </div>
+    </div>
+    <div class="header-row header-row-filters">
+      <div class="filter-group">
+        <label class="filter">
+          <span class="filter-label">sev</span>
+          <select id="severityFilter">
+            <option value="all">all</option>
+            <option value="critical">critical</option>
+            <option value="high">high</option>
+            <option value="medium">medium</option>
+            <option value="low">low</option>
+          </select>
+        </label>
+        <label class="filter">
+          <span class="filter-label">type</span>
+          <select id="typeFilter">
+            <option value="all">all</option>
+          </select>
+        </label>
+        <label class="filter">
+          <span class="filter-label">provider</span>
+          <select id="providerFilter">
+            <option value="all">all</option>
+          </select>
+        </label>
+      </div>
+      <div class="meta-line" id="metaLine"></div>
+    </div>
+  </header>
+
+  <div class="stats-bar" id="statsBar"></div>
+
+  <div class="ticker" id="ticker" hidden>
+    <span class="ticker-dot" aria-hidden="true"></span>
+    <span class="ticker-label">LATEST</span>
+    <span class="ticker-text" id="tickerText"></span>
+  </div>
+
+  <main class="main">
+    <div class="table-shell">
+      <div class="shell-head">
+        <span class="shell-title">findings.log</span>
+        <span class="shell-meta" id="shellMeta"></span>
+      </div>
+      <table class="findings-table">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Severity</th>
+            <th>Provider</th>
+            <th>Pattern</th>
+            <th>Match</th>
+            <th>Type</th>
+            <th>Domain</th>
+            <th>Source</th>
+            <th>Time</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody id="findingsBody"></tbody>
+      </table>
+      <div id="emptyState" class="empty-state" hidden>
+        <svg class="empty-radar" viewBox="0 0 72 72" aria-hidden="true">
+          <circle cx="36" cy="36" r="30" class="er-ring"/>
+          <circle cx="36" cy="36" r="20" class="er-ring"/>
+          <circle cx="36" cy="36" r="10" class="er-ring"/>
+          <line x1="36" y1="6" x2="36" y2="66" class="er-cross"/>
+          <line x1="6" y1="36" x2="66" y2="36" class="er-cross"/>
+          <path d="M36 36 L36 6 A30 30 0 0 1 57.2 14.8 Z" class="er-sweep"/>
+          <circle cx="36" cy="36" r="2.5" class="er-core"/>
+        </svg>
+        <p class="empty-title" id="emptyTitle">No findings yet</p>
+        <p class="empty-copy" id="emptyCopy">KeyFinder passively scans every page you visit. Browse around — leaked keys, tokens and credentials will surface here.</p>
+        <p class="empty-hint">tip · add custom keywords from the extension popup</p>
+      </div>
+    </div>
+    <footer class="page-footer">
+      <span>local storage only</span>
+      <span class="footer-sep">·</span>
+      <span>5000-finding ring buffer</span>
+      <span class="footer-sep">·</span>
+      <span>no network egress</span>
+    </footer>
+  </main>
+
+  <script src="preview-stub-empty.js"></script>
+  <script src="../js/results.js"></script>
+</body>
+</html>

preview/results-preview.html

@@ -70,11 +70,9 @@
   </div>
 
   <main class="main">
-    <div class="table-shell">
+    <div class="table-shell titled">
-      <div class="shell-head">
+      <span class="titled-label">findings.log</span>
-        <span class="shell-title">findings.log</span>
+      <span class="titled-meta" id="shellMeta"></span>
-        <span class="shell-meta" id="shellMeta"></span>
-      </div>
       <table class="findings-table">
         <thead>
           <tr>

preview/social.html

@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>KeyFinder — social preview</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      width: 1280px;
+      height: 640px;
+      background: #05070c;
+      font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      color: #d6dde8;
+      display: flex;
+      flex-direction: column;
+    }
+    .stage {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 64px;
+      padding: 0 72px;
+    }
+
+    /* left — brand copy */
+    .copy { flex: none; width: 470px; }
+    .brand { display: flex; align-items: center; gap: 16px; }
+    .brand img { width: 64px; height: 64px; }
+    h1 {
+      color: #fff;
+      font-size: 44px;
+      font-weight: 700;
+      letter-spacing: .18em;
+    }
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 7px;
+      font-size: 10px;
+      font-weight: 700;
+      letter-spacing: .2em;
+      color: #3ddc97;
+      border: 1px solid rgba(61,220,151,.4);
+      padding: 5px 9px;
+      margin-left: 6px;
+    }
+    .badge::before {
+      content: "";
+      width: 5px; height: 5px;
+      border-radius: 50%;
+      background: #3ddc97;
+    }
+    .tag {
+      margin-top: 18px;
+      color: #f5a524;
+      font-size: 15px;
+      letter-spacing: .2em;
+    }
+    .desc {
+      margin-top: 14px;
+      color: #8b96a8;
+      font-size: 13px;
+      line-height: 1.75;
+    }
+    .spec {
+      margin-top: 26px;
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+    .spec li {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 11.5px;
+      letter-spacing: .1em;
+      color: #525d70;
+      text-transform: uppercase;
+    }
+    .spec li::before { content: "▸"; color: #45d0c4; font-size: 10px; }
+    .spec li b { color: #d6dde8; font-weight: 600; }
+
+    /* right — console frame */
+    .frame {
+      flex: 1;
+      height: 460px;
+      border: 1px solid #2a3650;
+      background: #090d14 url("film/dash.png") no-repeat;
+      background-size: 1400px 875px;
+      background-position: -16px -14px;
+      position: relative;
+    }
+    .frame::before {
+      content: "● FINDINGS.LOG";
+      position: absolute;
+      top: -8px; left: 12px;
+      background: #05070c;
+      padding: 0 7px;
+      font-size: 10px;
+      font-weight: 700;
+      letter-spacing: .18em;
+      color: #8b96a8;
+    }
+    .frame::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(180deg, transparent 78%, rgba(5,7,12,.92) 100%);
+    }
+
+    /* bottom strip */
+    .strip {
+      border-top: 1px solid #1a2233;
+      padding: 12px 72px;
+      display: flex;
+      justify-content: space-between;
+      font-size: 10px;
+      letter-spacing: .16em;
+      color: #525d70;
+      text-transform: uppercase;
+    }
+    .strip .url { color: #45d0c4; }
+  </style>
+</head>
+<body>
+  <div class="stage">
+    <div class="copy">
+      <div class="brand">
+        <img src="../icons/icon128.png" alt="">
+        <h1>KEYFINDER</h1>
+        <span class="badge">v2.2.1</span>
+      </div>
+      <div class="tag">// PASSIVE SECRET DISCOVERY</div>
+      <p class="desc">Browser extension that passively scans every page you visit for leaked API keys, tokens and credentials — across scripts, DOM, storage and network responses.</p>
+      <ul class="spec">
+        <li><b>80+</b> detection patterns · entropy analysis</li>
+        <li><b>10</b> attack surfaces · SPA-aware rescanning</li>
+        <li><b>local-only</b> storage · zero config · no egress</li>
+      </ul>
+    </div>
+    <div class="frame"></div>
+  </div>
+  <div class="strip">
+    <span>chrome · firefox · manifest v3</span>
+    <span class="url">github.com/momenbasel/keyFinder</span>
+  </div>
+</body>
+</html>

preview/store-popup.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>KeyFinder — store shot (popup)</title>
+  <link rel="stylesheet" href="../css/popup.css">
+  <link rel="stylesheet" href="store.css">
+</head>
+<body class="store">
+  <div class="stage">
+    <div class="copy">
+      <div class="kicker">KEYFINDER v2.2.1 — PASSIVE SCANNER</div>
+      <h1>Catch leaked keys<br>while you <em>browse</em>.</h1>
+      <p>KeyFinder passively scans every page for exposed API keys, tokens and credentials — across scripts, DOM, storage and network responses.</p>
+      <ul class="spec">
+        <li>80+ detection patterns · entropy analysis</li>
+        <li>10 attack surfaces · SPA-aware rescanning</li>
+        <li>local-only storage · zero config</li>
+      </ul>
+    </div>
+    <div class="popup-frame">
+<header class="header">
+    <div class="header-brand">
+      <span class="radar" aria-hidden="true">
+        <img src="../icons/icon48.png" alt="" class="header-icon">
+      </span>
+      <div class="brand-text">
+        <h1>KEYFINDER<span class="version" id="versionLabel"></span></h1>
+        <p class="header-tagline">passive secret discovery</p>
+      </div>
+      <span class="live-badge" title="Passive scanning is active"><span class="live-dot"></span>ARMED</span>
+    </div>
+  </header>
+
+  <section class="stats" id="stats">
+    <div class="stat-card stat-findings">
+      <span class="stat-top"><span class="stat-led" aria-hidden="true"></span><span class="stat-label">Findings</span></span>
+      <span class="stat-number" id="findingCount">&ndash;</span>
+    </div>
+    <div class="stat-card stat-keywords">
+      <span class="stat-top"><span class="stat-led" aria-hidden="true"></span><span class="stat-label">Keywords</span></span>
+      <span class="stat-number" id="keywordCount">&ndash;</span>
+    </div>
+  </section>
+
+  <section class="section">
+    <h2 class="section-title">Watchlist<span class="section-sub">// custom keywords</span></h2>
+    <form id="keywordForm" class="keyword-form">
+      <span class="prompt" aria-hidden="true">&#8250;</span>
+      <input
+        type="text"
+        id="keywordInput"
+        placeholder="add keyword, e.g. api_key"
+        autocomplete="off"
+        spellcheck="false"
+      >
+      <button type="submit" id="addBtn">Add</button>
+    </form>
+    <div id="errorMsg" class="error-msg" hidden></div>
+    <ul id="keywordList" class="keyword-list"></ul>
+  </section>
+
+  <footer class="footer">
+    <div class="term-line" aria-live="polite"><span class="term-text" id="termText"></span><span class="term-cursor" aria-hidden="true"></span></div>
+    <a href="../results.html" target="_blank" id="resultsLink" class="results-btn">
+      View Findings <span class="btn-arrow" aria-hidden="true">&rarr;</span>
+    </a>
+  </footer>
+    </div>
+  </div>
+  <script src="preview-stub.js"></script>
+  <script src="../js/popup.js"></script>
+</body>
+</html>

preview/store.css

@@ -0,0 +1,115 @@
+/* Store-listing composition backdrop (preview only, not shipped) */
+
+body.store {
+  width: auto;
+  min-width: 0;
+  background: #04060a;
+  overflow: hidden;
+}
+
+.stage {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 72px;
+  width: 1280px;
+  height: 800px;
+  padding: 0 64px;
+}
+
+/* ambient depth: a single flat value step, no glow washes */
+.stage::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(700px 500px at 85% 80%, rgba(69,208,196,.045) 0%, transparent 65%);
+  pointer-events: none;
+}
+
+.copy { max-width: 560px; }
+
+.kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: .22em;
+  color: var(--green);
+  border: 1px solid rgba(61,220,151,.32);
+  background: rgba(61,220,151,.06);
+  padding: 5px 9px;
+  border-radius: 2px;
+  margin-bottom: 26px;
+}
+.kicker::before {
+  content: "";
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--green);
+  box-shadow: 0 0 8px var(--green);
+}
+
+.copy h1 {
+  font-size: 46px;
+  font-weight: 700;
+  line-height: 1.08;
+  letter-spacing: .01em;
+  color: #fff;
+  margin-bottom: 20px;
+}
+.copy h1 em {
+  font-style: normal;
+  color: var(--amber);
+}
+
+.copy p {
+  font-size: 13px;
+  line-height: 1.7;
+  color: var(--text-dim);
+  margin-bottom: 26px;
+  max-width: 440px;
+}
+
+.spec {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+.spec li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 11px;
+  letter-spacing: .08em;
+  color: var(--text-faint);
+  text-transform: uppercase;
+}
+.spec li::before {
+  content: "▸";
+  color: var(--teal);
+  font-size: 10px;
+}
+
+/* floating popup frame */
+.popup-frame {
+  position: relative;
+  flex: none;
+  width: 372px;
+  border: 1px solid var(--line-strong);
+  overflow: hidden;
+  box-shadow: 0 24px 80px rgba(0,0,0,.6);
+}
+.popup-frame::before {
+  content: "";
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(245,165,36,.6), transparent);
+  z-index: 2;
+}

results.html

@@ -70,11 +70,9 @@
   </div>
 
   <main class="main">
-    <div class="table-shell">
+    <div class="table-shell titled">
-      <div class="shell-head">
+      <span class="titled-label">findings.log</span>
-        <span class="shell-title">findings.log</span>
+      <span class="titled-meta" id="shellMeta"></span>
-        <span class="shell-meta" id="shellMeta"></span>
-      </div>
       <table class="findings-table">
         <thead>
           <tr>

store/listing-copy.md

@@ -0,0 +1,134 @@
+# KeyFinder — Store Listing Kit (v2.2.1)
+
+Copy-paste ready text for the Chrome Web Store and Firefox Add-ons (AMO) dashboards.
+Screenshots referenced below are in `store/`.
+
+---
+
+## 1. Chrome Web Store
+
+**Category:** Developer Tools
+**Language:** English
+
+### Short description (max 132 chars — this is 121)
+
+```
+Passive scanner for leaked API keys, tokens & secrets. 80+ patterns, 10 attack surfaces, zero config, local-only storage.
+```
+
+### Detailed description
+
+```
+KeyFinder passively discovers API keys, tokens, secrets, and credentials leaked in the pages you visit. It runs silently in the background — no configuration, no accounts, no cloud. Browse normally; KeyFinder watches for secrets that should never have shipped.
+
+WHAT IT DETECTS
+80+ detection patterns across the providers that matter:
+• Cloud — AWS (access keys, secret keys, session tokens, Cognito), Google Cloud (API keys, OAuth, service accounts), Azure (storage keys, SAS tokens, connection strings)
+• Source control — GitHub (PATs, OAuth, fine-grained), GitLab, Bitbucket
+• Payments — Stripe (secret, publishable, restricted, webhook), PayPal Braintree, Square
+• Communication — Slack, Discord, Telegram, Twilio, SendGrid
+• AI/ML — OpenAI, Anthropic, HuggingFace, Replicate
+• Databases — MongoDB, PostgreSQL, MySQL, Redis connection strings
+• SaaS & infra — Shopify, Sentry, Datadog, Cloudflare, DigitalOcean, HashiCorp Vault, NPM, Docker Hub, and more
+• Generic — JWTs, Bearer tokens, Basic Auth, credential URLs, plus Shannon entropy analysis for undocumented formats
+
+HOW IT WORKS
+Every page is scanned across 10 attack surfaces: script src URLs, inline scripts, same-origin external scripts, meta tags, hidden form fields, data attributes, HTML comments, URL parameters, localStorage/sessionStorage, and intercepted XHR/Fetch responses. A MutationObserver re-scans dynamically injected DOM, so single-page apps are covered too.
+
+THE FINDINGS CONSOLE
+A flat, terminal-style dashboard built for triage:
+• Severity-sorted findings (critical → high → medium → low)
+• Click a severity tile to filter instantly; filter by type or provider
+• Latest-finding ticker and live search (/ to focus, Esc to clear)
+• Click any match to copy the secret; relative timestamps with absolute on hover
+• One-click export of filtered results as JSON or CSV (formula-injection sanitised)
+
+PRIVACY
+All findings stay on your machine. Local storage only, no network egress, no analytics, no accounts. Open source: github.com/momenbasel/keyFinder
+
+DISCLAIMER
+Intended for security research and authorized testing only. Use it on your own applications or during authorized penetration tests.
+```
+
+### Screenshots (upload in this order)
+
+| # | File | Why |
+|---|------|-----|
+| 1 | `store/store-1-dashboard.png` | The findings console fully loaded — the product's money shot |
+| 2 | `store/store-2-popup.png` | Hero composition: what it is + the popup UI |
+| 3 | `store/store-3-empty.png` | Zero-noise empty state — reinforces the privacy promise |
+
+### Privacy tab — single-purpose & permission justifications
+
+**Single purpose:** Passively scans visited pages for leaked API keys, tokens, and secrets, and displays them locally to the user.
+
+**`activeTab`:** Required to scan the DOM and resources of the page the user is currently viewing for leaked secrets.
+
+**`storage`:** Required to persist findings and the user's custom keyword list locally on the device. No data leaves the machine.
+
+**Host permissions (`<all_urls>` content scripts):** Secret leakage can occur on any page. The extension must scan script URLs, inline code, DOM attributes, storage, and network responses on every visited page to fulfill its single purpose. All processing is local; nothing is transmitted.
+
+**Remote code:** No remote code is executed. All scanning logic ships inside the extension package.
+
+**Data collection:** None. No personal, sensitive, or browsing data is collected, transmitted, or shared. Findings are stored locally with a 5000-item cap and can be cleared at any time.
+
+---
+
+## 2. Firefox Add-ons (AMO)
+
+**Categories:** Security & Privacy; Developer Tools
+**Tags:** security, api keys, secrets, pentest, developer tools, scanner, credentials, privacy
+
+### Summary (max 250 chars — this is 229)
+
+```
+Passively discovers API keys, tokens, and secrets leaked in the pages you visit. 80+ patterns across 10 attack surfaces, entropy analysis, SPA-aware rescanning, terminal-style findings console. Zero config, local-only, no egress.
+```
+
+### Description (AMO allows basic HTML)
+
+```html
+<p><b>KeyFinder</b> passively discovers API keys, tokens, secrets, and credentials leaked in the pages you visit. No configuration, no accounts, no cloud — browse normally and KeyFinder watches for secrets that should never have shipped.</p>
+
+<p><b>What it detects — 80+ patterns:</b></p>
+<ul>
+  <li>Cloud: AWS, Google Cloud, Azure</li>
+  <li>Source control: GitHub, GitLab, Bitbucket</li>
+  <li>Payments: Stripe, PayPal Braintree, Square</li>
+  <li>Communication: Slack, Discord, Telegram, Twilio, SendGrid</li>
+  <li>AI/ML: OpenAI, Anthropic, HuggingFace, Replicate</li>
+  <li>Databases: MongoDB, PostgreSQL, MySQL, Redis</li>
+  <li>SaaS &amp; infrastructure: Shopify, Sentry, Datadog, Cloudflare, DigitalOcean, Vault, NPM, Docker Hub</li>
+  <li>Generic: JWTs, Bearer tokens, Basic Auth, credential URLs, high-entropy strings (Shannon entropy analysis)</li>
+</ul>
+
+<p><b>How it works:</b> every page is scanned across 10 attack surfaces — script URLs, inline and external scripts, meta tags, hidden form fields, data attributes, HTML comments, URL parameters, web storage, and intercepted XHR/Fetch responses. A MutationObserver re-scans dynamically injected DOM for SPA coverage.</p>
+
+<p><b>The findings console:</b> a flat, terminal-style dashboard built for triage — severity-sorted findings, click-to-filter severity tiles, latest-finding ticker, live search (<code>/</code> to focus, <code>Esc</code> to clear), click-to-copy secrets, and one-click JSON/CSV export of filtered results.</p>
+
+<p><b>Privacy:</b> all findings stay on your machine. Local storage only, no network egress, no analytics. Open source: <a href="https://github.com/momenbasel/keyFinder">github.com/momenbasel/keyFinder</a></p>
+
+<p><i>Intended for security research and authorized testing only.</i></p>
+```
+
+### Screenshots (same order as Chrome)
+
+1. `store/store-1-dashboard.png`
+2. `store/store-2-popup.png`
+3. `store/store-3-empty.png`
+
+### Reviewer notes (paste into "Notes for Reviewers" if asked)
+
+```
+The extension scans visited pages locally for leaked secrets and stores findings in browser storage only. Nothing is transmitted off the device — the manifest declares data_collection_permissions: none. All scanning logic is contained in the package; no remote code is loaded. Source: https://github.com/momenbasel/keyFinder (tag v2.2.1 matches this upload).
+```
+
+---
+
+## 3. Shared assets checklist
+
+- [x] Icon set (16/48/128) — `icons/`
+- [x] Screenshots 1280×800 — `store/`
+- [x] Privacy policy — `PRIVACY.md` (host its raw GitHub URL in store dashboards that ask: `https://github.com/momenbasel/keyFinder/blob/master/PRIVACY.md`)
+- [x] Homepage URL — `https://github.com/momenbasel/keyFinder`
+- [x] Promotional video — `store/store-demo.mp4` (1280×720, 30 fps, 12.3 s: title card → console pan → popup; upload to YouTube as unlisted and paste the link in both store dashboards)