CalvinBackup/keyFinder
1
0
Fork 0
mirror of https://github.com/momenbasel/keyFinder.git synced 2026-07-23 05:00:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

v2.2.0: ops-console UI redesign

Browse Source 
- Popup + findings dashboard rebuilt as a dark ops console: radar-sweep
  brand mark, ARMED/PASSIVE status LEDs, scanline texture, mono chrome,
  amber (action) / teal (secret) semantic colors
- Popup: count-up stats, numbered watchlist, command-prompt input,
  typed terminal status line with live counts
- Dashboard: clickable severity stat filters, LATEST ticker, severity
  row edges, LED badges, click-to-copy match chips, relative times,
  skeleton rows, staggered first paint, radar empty state, / and Esc
  shortcuts, prefers-reduced-motion support
- Fix severity sort (critical sorted last) and ticker hidden override
- Add preview/ harness (stubbed chrome API) for headless UI screenshots
This commit is contained in:
momenbasel
2026-07-18 12:36:53 +03:00
parent 5d606109dc
commit 882e298d85
15 changed files with 1585 additions and 434 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+13
View File
@@ -2,6 +2,19 @@
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.0] - 2026-07-18
### Added
- Ops-console UI redesign of the popup and findings dashboard: radar-sweep brand mark, ARMED/PASSIVE status LEDs, scanline texture, monospace UI chrome, and a semantic color system (amber = actions, teal = recovered secrets, red/orange/yellow/teal severity scale)
- Popup: count-up stat numerals, numbered watchlist entries, command-prompt keyword input with glowing focus ring, and a terminal status line typed with the live keyword/finding counts
- Dashboard: clickable severity stat tiles that filter the table, LATEST ticker for the most recent finding, `findings.log` table shell with severity-coded row edges, LED severity badges, click-to-copy match chips, relative timestamps (absolute on hover), skeleton loading rows, staggered first-paint rows, and an animated radar empty state that distinguishes "no findings yet" from "filters hide everything"
- Keyboard shortcuts on the dashboard: `/` focuses search, `Esc` clears and blurs it
- `prefers-reduced-motion` support across all animations
### Fixed
- Severity sort treated `critical` as lowest priority (`severityOrder[s] || 5` maps `critical: 0` to the fallback), so critical findings rendered last; they now lead the table
- Latest-finding ticker no longer stays visible when storage is empty (`display: flex` was overriding the `hidden` attribute)
## [2.1.1] - 2026-05-14
### Added
css/popup.css
+382 -141
View File
@@ -1,240 +1,481 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* ============================================================
KeyFinder — ops console popup
design system: dark instrument panel · amber = action
teal = recovered secrets · mono chrome · 1px hairlines
============================================================ */
:root {
--bg: #05070c;
--bg-raise: #0a0e16;
--bg-overlay: #101623;
--line: #1a2233;
--line-strong: #2a3650;
--text: #d6dde8;
--text-dim: #8b96a8;
--text-faint: #525d70;
--amber: #f5a524;
--amber-hot: #ffc45c;
--teal: #45d0c4;
--red: #ff5c5c;
--green: #3ddc97;
--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco,
Consolas, "Liberation Mono", monospace;
--ease: cubic-bezier(.24, .58, .47, .99);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: dark; }
body {
width: 360px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: #0f0f0f;
color: #e0e0e0;
font-size: 13px;
width: 372px;
font-family: var(--mono);
background: var(--bg);
color: var(--text);
font-size: 12px;
line-height: 1.5;
font-feature-settings: "tnum";
overflow-x: hidden;
}
/* vignette + scanlines — instrument-panel texture */
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;
box-shadow: 0 0 0 1px var(--bg), 0 0 0 3px var(--amber);
}
/* ------------------------------------------------ header */
.header {
padding: 16px 16px 12px;
border-bottom: 1px solid #1e1e1e;
background: linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 100%);
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%);
}
.header-brand {
display: flex;
align-items: center;
gap: 8px;
}
.header-brand { display: flex; align-items: center; gap: 11px; }
.header-icon {
width: 28px;
height: 28px;
/* radar: rotating sweep ring + teal blip around the key */
.radar {
position: relative;
flex: none;
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid var(--line-strong);
background: radial-gradient(circle at 50% 42%, #0d1320 0%, #070a11 72%);
display: grid;
place-items: center;
}
.radar::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 50%;
background: conic-gradient(from 0deg,
rgba(245,165,36,.95) 0deg, rgba(245,165,36,.22) 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;
}
.radar::after {
content: "";
position: absolute;
top: 7px;
left: 9px;
width: 3px;
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; }
@keyframes radar-sweep { to { transform: rotate(360deg); } }
@keyframes blip { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.brand-text { flex: 1; min-width: 0; }
.header-brand h1 {
font-size: 18px;
font-size: 14px;
font-weight: 700;
color: #ffffff;
letter-spacing: -0.3px;
color: #fff;
letter-spacing: .22em;
display: flex;
align-items: center;
gap: 7px;
}
.version {
font-size: 10px;
font-size: 9px;
font-weight: 500;
color: #666;
background: #1a1a1a;
padding: 2px 6px;
border-radius: 4px;
margin-left: 4px;
letter-spacing: .08em;
color: var(--text-faint);
border: 1px solid var(--line);
padding: 2px 5px;
border-radius: 2px;
background: var(--bg-raise);
}
.version::before { content: "["; color: var(--line-strong); }
.version::after { content: "]"; color: var(--line-strong); }
.header-tagline {
margin-top: 4px;
font-size: 11px;
color: #666;
margin-top: 3px;
font-size: 9.5px;
letter-spacing: .1em;
color: var(--text-faint);
white-space: nowrap;
}
.header-tagline::before { content: "// "; color: var(--amber); opacity: .7; }
/* armed badge — pulsing status LED */
.live-badge {
flex: none;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 8.5px;
font-weight: 700;
letter-spacing: .2em;
color: var(--green);
border: 1px solid rgba(61,220,151,.32);
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 {
position: relative;
z-index: 1;
display: flex;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid #1e1e1e;
gap: 8px;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
}
.stat-card {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
background: #141414;
border-radius: 8px;
border: 1px solid #1e1e1e;
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 {
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; }
.stat-led {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent, var(--amber));
box-shadow: 0 0 5px var(--accent, var(--amber));
}
.stat-label {
font-size: 8.5px;
font-weight: 600;
color: var(--text-faint);
text-transform: uppercase;
letter-spacing: .18em;
}
.stat-number {
font-size: 22px;
font-weight: 700;
line-height: 1.1;
color: #fff;
font-variant-numeric: tabular-nums;
}
.stat-label {
font-size: 10px;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 2px;
}
/* ------------------------------------------------ watchlist */
.section {
padding: 12px 16px;
}
.section { position: relative; z-index: 1; padding: 12px 14px 10px; }
.section-title {
font-size: 11px;
font-weight: 600;
color: #666;
font-size: 9px;
font-weight: 700;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 8px;
letter-spacing: .22em;
margin-bottom: 9px;
display: flex;
align-items: baseline;
gap: 7px;
}
.section-sub {
font-size: 8.5px;
font-weight: 400;
letter-spacing: .1em;
color: var(--text-faint);
text-transform: none;
}
/* command-prompt input bar */
.keyword-form {
display: flex;
gap: 6px;
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);
}
.prompt {
display: grid;
place-items: center;
padding: 0 4px 0 10px;
color: var(--amber);
font-size: 13px;
font-weight: 700;
user-select: none;
}
.keyword-form input {
flex: 1;
padding: 7px 10px;
background: #141414;
border: 1px solid #2a2a2a;
border-radius: 6px;
color: #e0e0e0;
font-size: 12px;
min-width: 0;
padding: 8px 8px 8px 2px;
background: transparent;
border: none;
color: var(--text);
font-family: var(--mono);
font-size: 11.5px;
outline: none;
transition: border-color 0.15s;
}
.keyword-form input:focus {
border-color: #4a9eff;
}
.keyword-form input::placeholder {
color: #444;
box-shadow: none;
}
.keyword-form input::placeholder { color: var(--text-faint); }
.keyword-form button {
padding: 7px 14px;
background: #4a9eff;
color: #fff;
margin: 3px;
padding: 0 13px;
background: var(--amber);
color: #120a00;
border: none;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
border-radius: 2px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
cursor: pointer;
transition: background 0.15s;
}
.keyword-form button:hover {
background: #3a8eef;
transition: filter .15s var(--ease), transform .05s var(--ease);
}
.keyword-form button:hover { filter: brightness(1.12); }
.keyword-form button:active { transform: translateY(1px); }
.error-msg {
padding: 6px 10px;
background: #2a1515;
border: 1px solid #4a2020;
border-radius: 6px;
color: #ff6b6b;
font-size: 11px;
padding: 6px 9px;
background: rgba(255,92,92,.07);
border: 1px solid rgba(255,92,92,.3);
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; }
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-3px); }
75% { transform: translateX(3px); }
}
/* keyword list — numbered watchlist entries */
.keyword-list {
list-style: none;
max-height: 240px;
counter-reset: kw;
max-height: 218px;
overflow-y: auto;
}
.keyword-list::-webkit-scrollbar {
width: 4px;
}
.keyword-list::-webkit-scrollbar-track {
background: transparent;
}
.keyword-list::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
margin: 0 -4px;
padding: 0 4px;
}
.keyword-item {
counter-increment: kw;
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 10px;
border-radius: 6px;
transition: background 0.1s;
gap: 9px;
padding: 5px 7px;
border-radius: 2px;
border-left: 2px solid transparent;
transition: background .12s var(--ease), border-color .12s var(--ease);
}
.keyword-item::before {
content: counter(kw, decimal-leading-zero);
font-size: 8.5px;
color: var(--text-faint);
letter-spacing: .05em;
flex: none;
}
.keyword-item:hover {
background: #1a1a1a;
background: var(--bg-raise);
border-left-color: var(--teal);
}
.keyword-label {
font-family: "SF Mono", "Fira Code", "Consolas", monospace;
font-size: 12px;
color: #ccc;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11.5px;
color: var(--text);
}
.keyword-remove {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 20px;
height: 20px;
display: grid;
place-items: center;
background: transparent;
border: none;
color: #555;
font-size: 16px;
border: 1px solid transparent;
color: var(--text-faint);
font-size: 13px;
line-height: 1;
cursor: pointer;
border-radius: 4px;
transition: all 0.1s;
border-radius: 2px;
opacity: .45;
transition: all .12s var(--ease);
}
.keyword-item:hover .keyword-remove { opacity: 1; }
.keyword-remove:hover {
background: #2a1515;
color: #ff6b6b;
background: rgba(255,92,92,.1);
border-color: rgba(255,92,92,.35);
color: var(--red);
}
.empty-state {
text-align: center;
padding: 16px;
color: #444;
font-size: 12px;
padding: 14px 10px;
color: var(--text-faint);
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 {
padding: 12px 16px;
border-top: 1px solid #1e1e1e;
position: relative;
z-index: 1;
padding: 10px 14px 14px;
border-top: 1px solid var(--line);
}
/* typed terminal status line */
.term-line {
display: flex;
align-items: center;
min-height: 16px;
margin-bottom: 9px;
font-size: 9.5px;
letter-spacing: .06em;
color: var(--text-faint);
white-space: nowrap;
overflow: hidden;
}
.term-text { overflow: hidden; text-overflow: ellipsis; }
.term-cursor {
flex: none;
width: 6px;
height: 11px;
margin-left: 3px;
background: var(--amber);
animation: cursor-blink 1s steps(1) infinite;
}
@keyframes cursor-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.results-btn {
display: block;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: #4a9eff;
background: var(--amber);
color: #120a00;
text-decoration: none;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
border: 1px solid #1e2d4a;
transition: all 0.15s;
border-radius: 3px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .16em;
transition: filter .15s var(--ease), transform .05s var(--ease);
}
.results-btn:hover { filter: brightness(1.12); }
.results-btn:active { transform: translateY(1px); }
.btn-arrow { transition: transform .18s var(--ease); }
.results-btn:hover .btn-arrow { transform: translateX(3px); }
.results-btn:hover {
background: linear-gradient(135deg, #1e2040 0%, #1a2848 100%);
border-color: #2a4070;
/* ------------------------------------------------ scrollbars */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1c2536; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2a3650; }
/* ------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
css/results.css
+597 -208
View File
@@ -1,341 +1,730 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* ============================================================
KeyFinder — findings console
dark instrument panel · amber = action · teal = secrets
severity scale: red > orange > yellow > teal
============================================================ */
:root {
--bg: #05070c;
--bg-raise: #0a0e16;
--bg-overlay: #101623;
--line: #1a2233;
--line-strong: #2a3650;
--text: #d6dde8;
--text-dim: #8b96a8;
--text-faint: #525d70;
--amber: #f5a524;
--amber-hot: #ffc45c;
--teal: #45d0c4;
--red: #ff5c5c;
--orange: #ff9431;
--yellow: #ffd166;
--green: #3ddc97;
--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco,
Consolas, "Liberation Mono", monospace;
--ease: cubic-bezier(.24, .58, .47, .99);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: dark; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: #0a0a0a;
color: #e0e0e0;
font-size: 13px;
font-family: var(--mono);
background: var(--bg);
color: var(--text);
font-size: 12px;
line-height: 1.5;
min-height: 100vh;
font-feature-settings: "tnum";
}
/* vignette + scanlines */
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;
box-shadow: 0 0 0 1px var(--bg), 0 0 0 3px var(--amber);
}
/* ------------------------------------------------ header */
.header {
padding: 16px 24px;
background: #0f0f0f;
border-bottom: 1px solid #1e1e1e;
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%);
display: flex;
flex-direction: column;
gap: 12px;
gap: 11px;
}
.header-left {
.header-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
gap: 10px;
justify-content: space-between;
}
.header-icon {
width: 32px;
height: 32px;
}
.header-left { display: flex; align-items: center; gap: 12px; }
.header-left h1 {
font-size: 20px;
/* radar sweep around the key */
.radar {
position: relative;
flex: none;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--line-strong);
background: radial-gradient(circle at 50% 42%, #0d1320 0%, #070a11 72%);
display: grid;
place-items: center;
}
.radar::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 50%;
background: conic-gradient(from 0deg,
rgba(245,165,36,.95) 0deg, rgba(245,165,36,.22) 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;
}
.radar::after {
content: "";
position: absolute;
top: 8px;
left: 10px;
width: 3px;
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; }
@keyframes radar-sweep { to { transform: rotate(360deg); } }
@keyframes blip { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.brand-text h1 {
font-size: 16px;
font-weight: 700;
color: #fff;
letter-spacing: .22em;
display: flex;
align-items: center;
gap: 8px;
}
.version {
font-size: 11px;
color: #555;
font-weight: 400;
font-size: 9px;
font-weight: 500;
letter-spacing: .08em;
color: var(--text-faint);
border: 1px solid var(--line);
padding: 2px 5px;
border-radius: 2px;
background: var(--bg-raise);
}
.version::before { content: "["; color: var(--line-strong); }
.version::after { content: "]"; color: var(--line-strong); }
.header-sub {
margin-top: 2px;
font-size: 9px;
letter-spacing: .18em;
color: var(--text-faint);
text-transform: uppercase;
}
.header-sub::before { content: "// "; color: var(--amber); opacity: .7; }
.live-badge {
flex: none;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 8.5px;
font-weight: 700;
letter-spacing: .2em;
color: var(--green);
border: 1px solid rgba(61,220,151,.32);
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; } }
/* ------------------------------------------------ header actions */
.header-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
gap: 8px;
align-items: center;
justify-content: space-between;
}
/* terminal-style search bar */
.search-wrap {
display: flex;
align-items: center;
gap: 7px;
background: var(--bg-raise);
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);
}
.search-glyph { color: var(--amber); font-size: 13px; user-select: none; }
.search-wrap input {
width: 210px;
padding: 7px 0;
background: transparent;
border: none;
color: var(--text);
font-family: var(--mono);
font-size: 11.5px;
outline: none;
box-shadow: none;
}
.search-wrap input::placeholder { color: var(--text-faint); }
.kbd {
font-family: var(--mono);
font-size: 9px;
color: var(--text-faint);
border: 1px solid var(--line-strong);
border-bottom-width: 2px;
border-radius: 3px;
padding: 1px 5px;
user-select: none;
}
.btn-group { display: flex; gap: 6px; }
.btn {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
padding: 7px 12px;
border-radius: 3px;
border: 1px solid transparent;
cursor: pointer;
transition: all .15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-secondary {
background: transparent;
border-color: var(--line-strong);
color: var(--text-dim);
}
.btn-secondary:hover {
color: var(--amber-hot);
border-color: var(--amber);
background: rgba(245,165,36,.06);
}
.btn-danger {
background: transparent;
border-color: rgba(255,92,92,.35);
color: var(--red);
}
.btn-danger:hover { background: rgba(255,92,92,.1); border-color: var(--red); }
/* ------------------------------------------------ filter row */
.header-row-filters { gap: 10px; }
.filter-group {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.filter-group select,
.filter-group input {
padding: 6px 10px;
background: #141414;
border: 1px solid #2a2a2a;
border-radius: 6px;
color: #ccc;
font-size: 12px;
outline: none;
}
.filter-group select:focus,
.filter-group input:focus {
border-color: #4a9eff;
}
.filter-group input {
min-width: 180px;
}
.btn-group {
.filter {
display: flex;
gap: 6px;
align-items: center;
gap: 0;
background: var(--bg-raise);
border: 1px solid var(--line);
border-radius: 3px;
overflow: hidden;
transition: border-color .15s var(--ease);
}
.filter:focus-within { border-color: var(--amber); }
.filter-label {
font-size: 8.5px;
font-weight: 700;
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;
}
.btn {
padding: 6px 14px;
.filter select {
appearance: none;
-webkit-appearance: none;
padding: 6px 24px 6px 9px;
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%238b96a8' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
border: none;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
color: var(--text);
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: .04em;
outline: none;
cursor: pointer;
transition: all 0.15s;
max-width: 180px;
}
.filter select option { background: var(--bg-overlay); color: var(--text); }
.btn-secondary {
background: #1a1a1a;
color: #ccc;
border: 1px solid #2a2a2a;
.meta-line {
margin-left: auto;
font-size: 9.5px;
letter-spacing: .1em;
color: var(--text-faint);
white-space: nowrap;
}
.meta-line strong { color: var(--text-dim); font-weight: 600; }
.btn-secondary:hover {
background: #222;
border-color: #444;
}
.btn-danger {
background: #2a1515;
color: #ff6b6b;
border: 1px solid #4a2020;
}
.btn-danger:hover {
background: #3a1a1a;
}
/* ------------------------------------------------ stats bar */
.stats-bar {
position: relative;
z-index: 1;
display: flex;
gap: 1px;
flex-wrap: wrap;
gap: 8px;
padding: 12px 24px;
background: #0f0f0f;
border-bottom: 1px solid #1e1e1e;
border-bottom: 1px solid var(--line);
}
.stat-item {
flex: 1;
min-width: 96px;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
background: #111;
border-radius: 6px;
margin: 0 4px;
gap: 4px;
padding: 9px 12px 8px;
background: var(--bg-raise);
border: 1px solid var(--line);
border-radius: 3px;
position: relative;
overflow: hidden;
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[data-filter] { cursor: pointer; }
.stat-item[data-filter]:hover { background: var(--bg-overlay); border-color: var(--line-strong); }
.stat-item.active { border-color: var(--accent, var(--amber)); box-shadow: 0 0 0 1px var(--accent, var(--amber)) inset; }
.stat-total { --accent: #d6dde8; }
.stat-critical { --accent: var(--red); }
.stat-high { --accent: var(--orange); }
.stat-medium { --accent: var(--yellow); }
.stat-low { --accent: var(--teal); }
.stat-domains { --accent: var(--text-faint); }
.stat-top { display: flex; align-items: center; gap: 6px; }
.stat-led {
width: 4px;
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; }
.stat-num {
font-size: 20px;
font-size: 21px;
font-weight: 700;
color: #fff;
line-height: 1.1;
color: var(--accent, #fff);
font-variant-numeric: tabular-nums;
}
.stat-total .stat-num { color: #fff; }
.stat-lbl {
font-size: 10px;
color: #555;
font-size: 8.5px;
font-weight: 600;
color: var(--text-faint);
text-transform: uppercase;
letter-spacing: 0.5px;
letter-spacing: .18em;
}
.stat-critical .stat-num { color: #ff4444; }
.stat-high .stat-num { color: #ff8c42; }
.stat-medium .stat-num { color: #ffd166; }
.stat-low .stat-num { color: #4ecdc4; }
/* ------------------------------------------------ ticker */
.main {
padding: 16px 24px;
.ticker {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 9px;
padding: 7px 24px;
border-bottom: 1px solid var(--line);
background: rgba(245,165,36,.03);
font-size: 10px;
letter-spacing: .05em;
white-space: nowrap;
overflow: hidden;
}
.ticker[hidden] { display: none; }
.ticker-dot {
flex: none;
width: 5px;
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 {
flex: none;
font-size: 8.5px;
font-weight: 700;
letter-spacing: .2em;
color: var(--amber);
}
.ticker-text {
color: var(--text-dim);
overflow: hidden;
text-overflow: ellipsis;
}
.ticker-text code { color: var(--teal); }
/* ------------------------------------------------ table shell */
.main { position: relative; z-index: 1; padding: 16px 24px 20px; }
.table-shell {
position: relative;
border: 1px solid var(--line);
border-radius: 4px;
background: rgba(10,14,22,.55);
}
/* HUD corner brackets */
.table-shell::before,
.table-shell::after {
content: "";
position: absolute;
width: 9px;
height: 9px;
border: 0 solid var(--amber);
opacity: .55;
pointer-events: none;
}
.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;
}
.shell-title::before { content: "● "; color: var(--amber); font-size: 7px; vertical-align: 1.5px; }
.shell-meta {
font-size: 9px;
letter-spacing: .1em;
color: var(--text-faint);
}
.findings-table {
width: 100%;
min-width: 980px;
border-collapse: collapse;
font-size: 12px;
font-size: 11px;
}
.findings-table thead th {
padding: 8px 10px;
padding: 8px 12px;
text-align: left;
font-size: 10px;
font-weight: 600;
color: #555;
font-size: 8.5px;
font-weight: 700;
color: var(--text-faint);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid #1e1e1e;
letter-spacing: .16em;
border-bottom: 1px solid var(--line);
white-space: nowrap;
position: sticky;
top: 0;
background: #0a0a0a;
background: var(--bg);
z-index: 2;
}
.findings-table tbody tr {
border-bottom: 1px solid #141414;
transition: background 0.1s;
border-bottom: 1px solid rgba(26,34,51,.5);
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: #111;
/* severity accent on the row's leading edge */
.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); }
.findings-table tbody tr.sev-medium td:first-child { box-shadow: inset 2px 0 0 var(--yellow); }
.findings-table tbody tr.sev-low td:first-child { box-shadow: inset 2px 0 0 var(--teal); }
.findings-table tbody tr.sev-info td:first-child { box-shadow: inset 2px 0 0 var(--text-faint); }
/* first-paint stagger */
.findings-table tbody.fresh tr {
opacity: 0;
animation: row-in .35s var(--ease) forwards;
animation-delay: calc(var(--i, 0) * 16ms);
}
@keyframes row-in {
from { opacity: 0; transform: translateY(3px); }
to { opacity: 1; transform: translateY(0); }
}
.findings-table td {
padding: 8px 10px;
padding: 7px 12px;
vertical-align: middle;
max-width: 280px;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.td-num { color: var(--text-faint); font-size: 9.5px; }
/* severity badge — LED + label */
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 10px;
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: 0.3px;
letter-spacing: .14em;
color: var(--sev, var(--text-dim));
border: 1px solid color-mix(in srgb, var(--sev, #8b96a8) 38%, transparent);
background: color-mix(in srgb, var(--sev, #8b96a8) 8%, transparent);
}
.badge-critical {
background: #3a0a0a;
color: #ff4444;
border: 1px solid #5a1515;
}
.badge-high {
background: #3a1f0a;
color: #ff8c42;
border: 1px solid #5a3015;
}
.badge-medium {
background: #3a3a0a;
color: #ffd166;
border: 1px solid #5a5a15;
}
.badge-low {
background: #0a3a30;
color: #4ecdc4;
border: 1px solid #155a4a;
.badge::before {
content: "";
width: 4px;
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; }
.badge-high { --sev: var(--orange); }
.badge-medium { --sev: var(--yellow); }
.badge-low { --sev: var(--teal); }
.badge-info { --sev: var(--text-dim); }
.type-badge {
display: inline-block;
padding: 2px 6px;
background: #1a1a1a;
border: 1px solid #2a2a2a;
border-radius: 4px;
font-size: 10px;
color: #888;
font-family: "SF Mono", "Fira Code", monospace;
padding: 2px 7px;
background: var(--bg-raise);
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 */
.match-value {
font-family: "SF Mono", "Fira Code", "Consolas", monospace;
font-size: 11px;
background: #141414;
padding: 2px 6px;
border-radius: 4px;
border: 1px solid #1e1e1e;
color: #4ecdc4;
max-width: 260px;
font-family: var(--mono);
font-size: 10.5px;
background: rgba(69,208,196,.06);
padding: 3px 8px;
border-radius: 2px;
border: 1px solid rgba(69,208,196,.22);
color: var(--teal);
max-width: 220px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
cursor: copy;
transition: all .12s var(--ease);
}
.match-value:hover {
background: rgba(69,208,196,.12);
border-color: var(--teal);
box-shadow: 0 0 12px rgba(69,208,196,.12);
}
.td-provider {
font-weight: 600;
color: #aaa;
}
.td-provider { font-weight: 700; color: var(--text); font-size: 10.5px; letter-spacing: .04em; max-width: 130px; }
.td-pattern { color: var(--text-dim); font-size: 10px; max-width: 170px; }
.td-domain { color: var(--amber); font-size: 10.5px; max-width: 180px; }
.td-source { max-width: 200px; }
.td-time { color: var(--text-faint); font-size: 10px; white-space: nowrap; }
.td-pattern {
color: #888;
font-size: 11px;
}
a { color: var(--teal); text-decoration: none; border-bottom: 1px dashed rgba(69,208,196,.35); }
a:hover { color: #8be8de; border-bottom-style: solid; }
.td-domain {
color: #4a9eff;
}
.td-time {
color: #555;
font-size: 11px;
white-space: nowrap;
}
a {
color: #4a9eff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* row actions — revealed on row hover */
.td-actions { white-space: nowrap; text-align: right; }
.btn-icon {
font-family: var(--mono);
padding: 3px 8px;
background: #1a1a1a;
border: 1px solid #2a2a2a;
border-radius: 4px;
color: #888;
font-size: 10px;
background: transparent;
border: 1px solid var(--line-strong);
border-radius: 2px;
color: var(--text-faint);
font-size: 9px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
margin-right: 4px;
transition: all 0.1s;
opacity: .35;
transition: all .12s var(--ease);
}
.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.copied { color: 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:hover {
background: #222;
color: #ccc;
/* 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;
}
.skl-w1 { width: 34%; } .skl-w2 { width: 62%; } .skl-w3 { width: 48%; } .skl-w4 { width: 78%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.btn-icon-danger:hover {
background: #2a1515;
color: #ff6b6b;
border-color: #4a2020;
}
/* ------------------------------------------------ empty state */
.empty-state {
text-align: center;
padding: 60px 20px;
color: #444;
padding: 56px 20px 50px;
color: var(--text-faint);
}
.empty-icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.3;
.empty-radar { width: 72px; height: 72px; margin-bottom: 18px; opacity: .8; }
.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);
transform-origin: 36px 36px;
animation: radar-sweep 4.2s linear infinite;
}
.empty-state p {
font-size: 14px;
max-width: 400px;
margin: 0 auto;
line-height: 1.6;
.empty-title {
font-size: 12px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 8px;
}
.empty-copy {
font-size: 10.5px;
max-width: 420px;
margin: 0 auto 12px;
line-height: 1.7;
color: var(--text-faint);
}
.empty-hint {
font-size: 9.5px;
letter-spacing: .1em;
color: var(--amber);
opacity: .75;
}
.empty-hint::before { content: "» "; }
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
/* ------------------------------------------------ page footer */
::-webkit-scrollbar-track {
background: transparent;
.page-footer {
margin-top: 14px;
text-align: center;
font-size: 9px;
letter-spacing: .14em;
color: var(--text-faint);
text-transform: uppercase;
opacity: .7;
}
.footer-sep { margin: 0 8px; color: var(--line-strong); }
::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
/* ------------------------------------------------ scrollbars */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1c2536; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2a3650; }
/* ------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
js/popup.js
+55 -4
View File
@@ -1,23 +1,71 @@
document.addEventListener("DOMContentLoaded", init);
const REDUCE_MOTION = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
let lastKeywords = 0;
let lastFindings = 0;
let termBooted = false;
async function init() {
const versionLabel = document.getElementById("versionLabel");
if (versionLabel) versionLabel.textContent = "v" + chrome.runtime.getManifest().version;
await renderKeywords();
await renderStats();
updateTermLine(true);
termBooted = true;
document.getElementById("keywordForm").addEventListener("submit", handleAddKeyword);
}
/* eased count-up for stat numerals */
function setNumber(el, target) {
if (!el) return;
const from = parseInt(el.textContent, 10);
const start = Number.isFinite(from) ? from : 0;
if (REDUCE_MOTION || start === target) {
el.textContent = target;
return;
}
const duration = 380;
const t0 = performance.now();
(function tick(t) {
const p = Math.min(1, (t - t0) / duration);
const eased = 1 - Math.pow(1 - p, 3);
el.textContent = Math.round(start + (target - start) * eased);
if (p < 1) requestAnimationFrame(tick);
})(t0);
}
/* terminal status line — types once per popup open, instant after */
function updateTermLine(typed) {
const el = document.getElementById("termText");
if (!el) return;
const text = `kf> scan armed :: ${lastKeywords} keywords :: ${lastFindings} findings`;
if (!typed || REDUCE_MOTION) {
el.textContent = text;
return;
}
let i = 0;
(function type() {
el.textContent = text.slice(0, ++i);
if (i < text.length) setTimeout(type, 14);
})();
}
async function renderKeywords() {
const response = await chrome.runtime.sendMessage({ type: "getKeywords" });
const keywords = response.keywords || [];
const list = document.getElementById("keywordList");
list.innerHTML = "";
document.getElementById("keywordCount").textContent = keywords.length;
lastKeywords = keywords.length;
setNumber(document.getElementById("keywordCount"), keywords.length);
if (termBooted) updateTermLine(false);
if (keywords.length === 0) {
list.innerHTML = '<li class="empty-state">No keywords configured</li>';
const empty = document.createElement("li");
empty.className = "empty-state";
empty.textContent = "no keywords configured";
list.appendChild(empty);
return;
}
@@ -31,7 +79,7 @@ async function renderKeywords() {
const removeBtn = document.createElement("button");
removeBtn.className = "keyword-remove";
removeBtn.textContent = "\u00D7";
removeBtn.textContent = "×";
removeBtn.title = `Remove "${kw}"`;
removeBtn.addEventListener("click", () => handleRemoveKeyword(kw));
@@ -44,7 +92,9 @@ async function renderKeywords() {
async function renderStats() {
const response = await chrome.runtime.sendMessage({ type: "getFindings" });
const findings = response.findings || [];
document.getElementById("findingCount").textContent = findings.length;
lastFindings = findings.length;
setNumber(document.getElementById("findingCount"), findings.length);
if (termBooted) updateTermLine(false);
}
async function handleAddKeyword(e) {
@@ -68,6 +118,7 @@ async function handleAddKeyword(e) {
}
input.value = "";
input.focus();
await renderKeywords();
}
js/results.js
+191 -22
View File
@@ -1,16 +1,24 @@
let allFindings = [];
let firstRenderDone = false;
const REDUCE_MOTION = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
document.addEventListener("DOMContentLoaded", init);
async function init() {
const versionLabel = document.getElementById("versionLabel");
if (versionLabel) versionLabel.textContent = "v" + chrome.runtime.getManifest().version;
renderSkeleton();
const response = await chrome.runtime.sendMessage({ type: "getFindings" });
allFindings = response.findings || [];
populateFilters();
renderStats();
renderFindings();
renderTicker();
firstRenderDone = true;
document.getElementById("severityFilter").addEventListener("change", renderFindings);
document.getElementById("typeFilter").addEventListener("change", renderFindings);
@@ -19,6 +27,57 @@ async function init() {
document.getElementById("exportJsonBtn").addEventListener("click", exportJson);
document.getElementById("exportCsvBtn").addEventListener("click", exportCsv);
document.getElementById("clearBtn").addEventListener("click", clearAll);
const searchBox = document.getElementById("searchBox");
document.addEventListener("keydown", (e) => {
const tag = document.activeElement && document.activeElement.tagName;
const typing = tag === "INPUT" || tag === "SELECT" || tag === "TEXTAREA";
if (e.key === "/" && !typing) {
e.preventDefault();
searchBox.focus();
} else if (e.key === "Escape" && document.activeElement === searchBox) {
searchBox.value = "";
renderFindings();
searchBox.blur();
}
});
}
/* eased count-up for stat numerals */
function setNumber(el, target) {
if (!el) return;
const from = parseInt(el.textContent, 10);
const start = Number.isFinite(from) ? from : 0;
if (REDUCE_MOTION || start === target) {
el.textContent = target;
return;
}
const duration = 400;
const t0 = performance.now();
(function tick(t) {
const p = Math.min(1, (t - t0) / duration);
const eased = 1 - Math.pow(1 - p, 3);
el.textContent = Math.round(start + (target - start) * eased);
if (p < 1) requestAnimationFrame(tick);
})(t0);
}
function renderSkeleton() {
const tbody = document.getElementById("findingsBody");
tbody.classList.remove("fresh");
tbody.innerHTML = "";
const widths = ["skl-w2", "skl-w1", "skl-w3", "skl-w4", "skl-w2", "skl-w3"];
for (let i = 0; i < 6; i++) {
const tr = document.createElement("tr");
tr.className = "skl-row";
const td = document.createElement("td");
td.colSpan = 10;
const bar = document.createElement("div");
bar.className = "skl " + widths[i % widths.length];
td.appendChild(bar);
tr.appendChild(td);
tbody.appendChild(tr);
}
}
function getFiltered() {
@@ -67,54 +126,96 @@ function renderStats() {
bar.innerHTML = "";
const stats = [
{ label: "Total", value: allFindings.length, cls: "stat-total" },
{ label: "Critical", value: critical, cls: "stat-critical" },
{ label: "High", value: high, cls: "stat-high" },
{ label: "Medium", value: medium, cls: "stat-medium" },
{ label: "Low", value: low, cls: "stat-low" },
{ label: "Domains", value: domains, cls: "stat-domains" },
{ label: "Total", value: allFindings.length, cls: "stat-total", filter: "all" },
{ label: "Critical", value: critical, cls: "stat-critical", filter: "critical" },
{ label: "High", value: high, cls: "stat-high", filter: "high" },
{ label: "Medium", value: medium, cls: "stat-medium", filter: "medium" },
{ label: "Low", value: low, cls: "stat-low", filter: "low" },
{ label: "Domains", value: domains, cls: "stat-domains", filter: null },
];
for (const s of stats) {
const el = document.createElement("div");
el.className = `stat-item ${s.cls}`;
const num = document.createElement("span");
num.className = "stat-num";
num.textContent = s.value;
const top = document.createElement("span");
top.className = "stat-top";
const led = document.createElement("span");
led.className = "stat-led";
const lbl = document.createElement("span");
lbl.className = "stat-lbl";
lbl.textContent = s.label;
top.appendChild(led);
top.appendChild(lbl);
const num = document.createElement("span");
num.className = "stat-num";
el.appendChild(top);
el.appendChild(num);
el.appendChild(lbl);
setNumber(num, s.value);
if (s.filter) {
el.dataset.filter = s.filter;
el.title = s.filter === "all" ? "Show all severities" : `Filter: ${s.label.toLowerCase()} only`;
el.addEventListener("click", () => {
document.getElementById("severityFilter").value = s.filter;
renderFindings();
});
}
bar.appendChild(el);
}
}
function syncStatActive() {
const current = document.getElementById("severityFilter").value;
document.querySelectorAll(".stat-item[data-filter]").forEach((el) => {
el.classList.toggle("active", el.dataset.filter === current);
});
}
function renderFindings() {
const filtered = getFiltered();
const tbody = document.getElementById("findingsBody");
const empty = document.getElementById("emptyState");
tbody.innerHTML = "";
tbody.classList.toggle("fresh", !firstRenderDone && !REDUCE_MOTION);
updateMeta(filtered.length);
syncStatActive();
if (filtered.length === 0) {
const title = document.getElementById("emptyTitle");
const copy = document.getElementById("emptyCopy");
if (allFindings.length === 0) {
title.textContent = "No findings yet";
copy.textContent = "KeyFinder passively scans every page you visit. Browse around — leaked keys, tokens and credentials will surface here.";
} else {
title.textContent = "No matches in view";
copy.textContent = "The current filters hide every finding. Adjust or clear them to bring results back.";
}
empty.hidden = false;
return;
}
empty.hidden = true;
const severityOrder = { critical: 0, high: 1, medium: 2, low: 3, info: 4 };
filtered.sort((a, b) => (severityOrder[a.severity] || 5) - (severityOrder[b.severity] || 5));
filtered.sort((a, b) => (severityOrder[a.severity] ?? 5) - (severityOrder[b.severity] ?? 5));
filtered.forEach((f, i) => {
const sev = f.severity || "medium";
const tr = document.createElement("tr");
tr.className = "sev-" + sev;
if (i < 30) tr.style.setProperty("--i", i);
const tdNum = document.createElement("td");
tdNum.textContent = i + 1;
tdNum.textContent = String(i + 1).padStart(2, "0");
tdNum.className = "td-num";
const tdSev = document.createElement("td");
const badge = document.createElement("span");
badge.className = `badge badge-${f.severity || "medium"}`;
badge.textContent = (f.severity || "medium").toUpperCase();
badge.className = `badge badge-${sev}`;
badge.textContent = sev.toUpperCase();
tdSev.appendChild(badge);
const tdProvider = document.createElement("td");
@@ -129,7 +230,11 @@ function renderFindings() {
const matchCode = document.createElement("code");
matchCode.textContent = f.match || "-";
matchCode.className = "match-value";
matchCode.title = f.match || "";
matchCode.title = "click to copy\n" + (f.match || "");
matchCode.addEventListener("click", () => {
navigator.clipboard.writeText(f.match || "");
flashCopied(copyBtn);
});
tdMatch.appendChild(matchCode);
const tdType = document.createElement("td");
@@ -143,42 +248,45 @@ function renderFindings() {
tdDomain.className = "td-domain";
const tdSource = document.createElement("td");
tdSource.className = "td-source";
if (f.url && f.url.startsWith("http")) {
const a = document.createElement("a");
a.href = f.url;
a.target = "_blank";
a.rel = "noopener";
a.textContent = truncateUrl(f.url, 40);
a.textContent = truncateUrl(f.url, 30);
a.title = f.url;
tdSource.appendChild(a);
} else {
tdSource.textContent = f.url ? truncateUrl(f.url, 40) : "-";
tdSource.textContent = f.url ? truncateUrl(f.url, 30) : "-";
}
const tdTime = document.createElement("td");
tdTime.textContent = f.timestamp ? formatTime(f.timestamp) : "-";
tdTime.className = "td-time";
if (f.timestamp) tdTime.title = new Date(f.timestamp).toLocaleString();
const tdActions = document.createElement("td");
tdActions.className = "td-actions";
const copyBtn = document.createElement("button");
copyBtn.className = "btn-icon";
copyBtn.textContent = "Copy";
copyBtn.textContent = "copy";
copyBtn.title = "Copy match value";
copyBtn.addEventListener("click", () => {
navigator.clipboard.writeText(f.match || "");
copyBtn.textContent = "Done";
setTimeout(() => (copyBtn.textContent = "Copy"), 1500);
flashCopied(copyBtn);
});
const delBtn = document.createElement("button");
delBtn.className = "btn-icon btn-icon-danger";
delBtn.textContent = "Del";
delBtn.textContent = "del";
delBtn.title = "Remove finding";
delBtn.addEventListener("click", async () => {
await chrome.runtime.sendMessage({ type: "removeFinding", findingId: f.id });
allFindings = allFindings.filter((x) => x.id !== f.id);
renderStats();
renderFindings();
renderTicker();
});
tdActions.appendChild(copyBtn);
@@ -198,6 +306,58 @@ function renderFindings() {
});
}
function flashCopied(btn) {
if (!btn) return;
btn.textContent = "copied";
btn.classList.add("copied");
setTimeout(() => {
btn.textContent = "copy";
btn.classList.remove("copied");
}, 1200);
}
function updateMeta(shown) {
const metaLine = document.getElementById("metaLine");
if (metaLine) {
metaLine.innerHTML = "";
metaLine.append(
"showing ",
strong(shown),
" of ",
strong(allFindings.length)
);
}
const shellMeta = document.getElementById("shellMeta");
if (shellMeta) shellMeta.textContent = shown + (shown === 1 ? " row" : " rows");
}
function strong(n) {
const el = document.createElement("strong");
el.textContent = n;
return el;
}
function renderTicker() {
const ticker = document.getElementById("ticker");
const tickerText = document.getElementById("tickerText");
if (!ticker || !tickerText) return;
if (!allFindings.length) {
ticker.hidden = true;
return;
}
const latest = [...allFindings].sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0))[0];
tickerText.innerHTML = "";
const head = document.createElement("span");
head.textContent = `${latest.provider || "unknown"} · ${latest.patternName || "match"} @ ${latest.domain || "—"} `;
tickerText.appendChild(head);
if (latest.match) {
const code = document.createElement("code");
code.textContent = truncateUrl(latest.match, 28);
tickerText.appendChild(code);
}
ticker.hidden = false;
}
function truncateUrl(url, max) {
if (url.length <= max) return url;
return url.substring(0, max - 3) + "...";
@@ -205,7 +365,15 @@ function truncateUrl(url, max) {
function formatTime(ts) {
const d = new Date(ts);
return d.toLocaleDateString() + " " + d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
const diff = Date.now() - d.getTime();
const m = Math.floor(diff / 60000);
if (m < 1) return "just now";
if (m < 60) return m + "m ago";
const h = Math.floor(m / 60);
if (h < 24) return h + "h ago";
const days = Math.floor(h / 24);
if (days < 7) return days + "d ago";
return d.toLocaleDateString();
}
function exportJson() {
@@ -255,4 +423,5 @@ async function clearAll() {
allFindings = [];
renderStats();
renderFindings();
renderTicker();
}
manifest.firefox.json
+1 -1
View File
@@ -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.1.1",
"version": "2.2.0",
"manifest_version": 3,
"browser_specific_settings": {
"gecko": {
manifest.json
+1 -1
View File
@@ -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.1.1",
"version": "2.2.0",
"manifest_version": 3,
"action": {
"default_icon": {
popup.html
+19 -13
View File
@@ -9,31 +9,36 @@
<body>
<header class="header">
<div class="header-brand">
<img src="icons/icon48.png" alt="KeyFinder" class="header-icon">
<h1>KeyFinder</h1>
<span class="version" id="versionLabel"></span>
<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>
<p class="header-tagline">Passive API key & secret discovery</p>
</header>
<section class="stats" id="stats">
<div class="stat-card">
<span class="stat-number" id="findingCount">-</span>
<span class="stat-label">Findings</span>
<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">
<span class="stat-number" id="keywordCount">-</span>
<span class="stat-label">Keywords</span>
<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">Keywords</h2>
<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 a keyword (e.g. api_key)"
placeholder="add keyword, e.g. api_key"
autocomplete="off"
spellcheck="false"
>
@@ -44,8 +49,9 @@
</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
View Findings <span class="btn-arrow" aria-hidden="true">&rarr;</span>
</a>
</footer>
preview/popup-preview.html
+61
View File
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>KeyFinder</title>
<link rel="stylesheet" href="../css/popup.css">
</head>
<body>
<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>
<script src="preview-stub.js"></script>
<script src="../js/popup.js"></script>
</body>
</html>
preview/preview-stub.js
+46
View File
@@ -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.1.1" }),
sendMessage: async (msg) => {
switch (msg && msg.type) {
case "getFindings": return { findings: SAMPLE_FINDINGS.slice() };
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/results-preview.html
+122
View File
@@ -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.js"></script>
<script src="../js/results.js"></script>
</body>
</html>
preview/shot-empty.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

preview/shot-popup.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

preview/shot-results.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 258 KiB

results.html
+97 -44
View File
@@ -3,64 +3,117 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>KeyFinder - Findings</title>
<title>KeyFinder — Findings Console</title>
<link rel="stylesheet" href="css/results.css">
</head>
<body>
<header class="header">
<div class="header-left">
<img src="icons/icon48.png" alt="KeyFinder" class="header-icon">
<h1>KeyFinder <span class="version" id="versionLabel"></span></h1>
<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-actions">
<div class="header-row header-row-filters">
<div class="filter-group">
<select id="severityFilter">
<option value="all">All Severities</option>
<option value="critical">Critical</option>
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
<select id="typeFilter">
<option value="all">All Types</option>
</select>
<select id="providerFilter">
<option value="all">All Providers</option>
</select>
<input type="text" id="searchBox" placeholder="Search findings...">
</div>
<div class="btn-group">
<button id="exportJsonBtn" class="btn btn-secondary">Export JSON</button>
<button id="exportCsvBtn" class="btn btn-secondary">Export CSV</button>
<button id="clearBtn" class="btn btn-danger">Clear All</button>
<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">
<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>
<div class="empty-icon">&#128269;</div>
<p>No findings yet. Browse some pages and KeyFinder will passively scan for leaked secrets.</p>
<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="js/results.js"></script>