Add 1280x800 store listing screenshots + composition harness

- store/store-1-dashboard.png: findings console with sample data
- store/store-2-popup.png: hero composition with popup UI
- store/store-3-empty.png: radar empty state
- preview/store.css + store-popup.html: composition page
- preview/results-preview-empty.html + preview-stub-empty.js: empty-state variant

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.0" }),
+      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.0" }),
       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/store-popup.html

@@ -0,0 +1,78 @@
+<!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.0 — 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,120 @@
+/* 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 brand glows */
+.stage::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(560px 420px at 12% 18%, rgba(245,165,36,.09) 0%, transparent 60%),
+    radial-gradient(620px 480px at 88% 82%, rgba(69,208,196,.07) 0%, transparent 60%);
+  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);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow:
+    0 0 0 1px rgba(245,165,36,.08),
+    0 24px 80px rgba(0,0,0,.65),
+    0 0 120px rgba(245,165,36,.05);
+}
+.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;
+}