Add the dashboard remediation simulator and cut the 1.0 release

The web dashboard now embeds the interactive remediation simulator: ticking a
finding as fixed recomputes the projected grade and risk score live, mirroring
the HTML report's simulator in the browser UI. Add a dashboard preview to the
README and mark the project as a stable 1.0 release.

Author: sanmaxdev

CHANGELOG.md

@@ -4,6 +4,22 @@ All notable changes to this project are documented here. The format is loosely
 based on [Keep a Changelog](https://keepachangelog.com/), and the project aims
 to follow semantic versioning once it reaches 1.0.
 
+## [1.0.0] - 2026-06-28
+
+### Added
+
+- Interactive remediation simulator in the web dashboard: tick a finding as
+  fixed and the projected grade and risk score recompute live, the same idea as
+  the HTML report's simulator, now in the browser dashboard.
+- A web-dashboard preview in the README.
+
+### Changed
+
+- First stable release. SentinelDeck now spans DNS, email authentication, HTTP,
+  TLS, certificate transparency, technology fingerprinting, infrastructure
+  intelligence, and threat intelligence, delivered through a colored CLI and a
+  local web dashboard, passive by default with an opt-in active mode.
+
 ## [0.9.0] - 2026-06-28
 
 ### Added

README.md

@@ -49,7 +49,7 @@ Prefer a UI? `sentineldeck dashboard` opens an interactive web dashboard in your
     <td>
       <a href="https://pypi.org/project/sentineldeck/"><img alt="pypi" src="https://img.shields.io/pypi/v/sentineldeck?style=flat-square&labelColor=0a0a0f&color=dc2626&label=pypi"></a>
       <img alt="downloads" src="https://img.shields.io/pypi/dm/sentineldeck?style=flat-square&labelColor=0a0a0f&color=dc2626&label=downloads">
-      <img alt="status" src="https://img.shields.io/badge/status-beta-dc2626?style=flat-square&labelColor=0a0a0f">
+      <img alt="status" src="https://img.shields.io/badge/status-stable%201.0-dc2626?style=flat-square&labelColor=0a0a0f">
       <img alt="python" src="https://img.shields.io/badge/python-3.10%20%7C%203.11%20%7C%203.12-dc2626?style=flat-square&labelColor=0a0a0f">
       <a href="LICENSE"><img alt="license" src="https://img.shields.io/badge/license-MIT-dc2626?style=flat-square&labelColor=0a0a0f"></a>
     </td>
@@ -74,6 +74,12 @@ It is built for the people who need that picture fast: an agency qualifying a
 prospect, a consultant producing a client report, or a small team checking its
 own footprint.
 
+<p align="center">
+  <img src="assets/dashboard.svg" alt="SentinelDeck web dashboard" width="840">
+</p>
+
+<p align="center"><code>sentineldeck dashboard</code> opens this in your browser. Local only, zero extra dependencies, with a live remediation simulator that recomputes the grade as you tick fixes.</p>
+
 ## Contents
 
 - [Features](#features)

assets/dashboard.svg

@@ -12,7 +12,7 @@ license = {text = "MIT"}
 authors = [{name = "sanmaxdev"}]
 keywords = ["security", "attack-surface", "osint", "headers", "ssl", "sme"]
 classifiers = [
-  "Development Status :: 4 - Beta",
+  "Development Status :: 5 - Production/Stable",
   "Environment :: Console",
   "Intended Audience :: Information Technology",
   "Intended Audience :: System Administrators",

pyproject.toml

@@ -1,3 +1,3 @@
 """SentinelDeck: passive attack-surface visibility for small businesses."""
 
-__version__ = "0.9.0"
+__version__ = "1.0.0"

src/sentineldeck/__init__.py

@@ -5,7 +5,10 @@ const form = $("#scan-form"), input = $("#domain"), btn = $("#scan-btn");
 const intro = $("#intro"), prog = $("#progress"), errBox = $("#error"), results = $("#results");
 const SEV = { critical: "var(--crit)", high: "var(--high)", medium: "var(--medium)", low: "var(--low)", info: "var(--info)" };
 const SEV_ORDER = ["critical", "high", "medium", "low", "info"];
+const POINTS = { critical: 40, high: 25, medium: 12, low: 5, info: 0 };
+const gradeFromScore = (s) => (s >= 80 ? "F" : s >= 60 ? "D" : s >= 40 ? "C" : s >= 20 ? "B" : "A");
 let source = null;
+let SIM = [];
 
 $("#foot-version").textContent = "SentinelDeck dashboard";
 document.querySelectorAll(".chip").forEach((c) =>
@@ -101,24 +104,50 @@ function renderHero(report, findings) {
 
 function renderFindings(findings) {
   const scored = findings.slice().sort((a, b) => SEV_ORDER.indexOf(a.severity) - SEV_ORDER.indexOf(b.severity));
-  $("#findings").innerHTML = scored.map((f) => {
-    const color = SEV[f.severity] || "var(--info)";
+  SIM = scored.map((f) => ({
+    f, fixed: false, pts: f.confidence === "indeterminate" ? 0 : (POINTS[f.severity] || 0),
+  }));
+
+  const cards = SIM.map((item, i) => {
+    const f = item.f, color = SEV[f.severity] || "var(--info)";
     const fix = f.remediation ? `
       <div class="fix-label">Fix${f.remediation.kind ? " &middot; " + esc(f.remediation.kind) : ""}</div>
       <pre>${esc(f.remediation.snippet)}</pre>` : "";
+    const toggle = item.pts > 0
+      ? `<label class="fixtoggle"><input type="checkbox" data-i="${i}"> mark fixed</label>` : "";
     return `
       <div class="finding" style="border-left-color:${color}">
-        <div class="finding-head" onclick="this.parentNode.querySelector('.finding-body').classList.toggle('hidden')">
+        <div class="finding-head">
           <span class="sev-tag" style="background:${color};color:#0a0a0f">${esc(f.severity)}</span>
-          <span class="finding-title">${esc(f.title)}</span>
+          <span class="finding-title" onclick="this.closest('.finding').querySelector('.finding-body').classList.toggle('hidden')">${esc(f.title)}</span>
+          ${toggle}
         </div>
         <div class="finding-body hidden">
           <div>${esc(f.description)}</div>
           ${f.recommendation ? `<div style="margin-top:8px">${esc(f.recommendation)}</div>` : ""}
           ${fix}
         </div>
       </div>`;
-  }).join("") || '<div class="muted">No findings.</div>';
+  }).join("");
+
+  $("#findings").innerHTML = `<div class="sim" id="sim"></div>` + (cards || '<div class="muted">No findings.</div>');
+  $("#findings").querySelectorAll(".fixtoggle input").forEach((cb) =>
+    cb.addEventListener("change", () => { SIM[+cb.dataset.i].fixed = cb.checked; updateSim(); }));
+  updateSim();
+}
+
+function updateSim() {
+  const projected = Math.min(100, SIM.filter((x) => !x.fixed).reduce((s, x) => s + x.pts, 0));
+  const applied = SIM.filter((x) => x.fixed && x.pts > 0).length;
+  const g = gradeFromScore(projected);
+  const sim = document.getElementById("sim");
+  if (!sim) return;
+  if (!SIM.some((x) => x.pts > 0)) { sim.style.display = "none"; return; }
+  sim.innerHTML =
+    `<span class="sim-label">Remediation simulator</span>` +
+    `<span class="sim-grade" style="color:var(--${g})">${g}</span>` +
+    `<span class="sim-score">projected risk ${projected}/100</span>` +
+    `<span class="muted">${applied ? applied + " fix" + (applied === 1 ? "" : "es") + " applied" : "tick findings to watch the grade improve"}</span>`;
 }
 
 /* --- cards --------------------------------------------------------------- */

src/sentineldeck/webui/app.js

@@ -92,6 +92,14 @@ main { max-width: 1180px; margin: 0 auto; padding: 28px; }
 .finding-body pre { background: #0c0d13; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; overflow-x: auto; color: #cbd5e1; font-size: 12.5px; white-space: pre-wrap; }
 .fix-label { color: var(--red-soft); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; margin: 12px 0 6px; }
 
+/* Remediation simulator */
+.sim { display: flex; align-items: center; gap: 16px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 20px; margin-bottom: 14px; flex-wrap: wrap; }
+.sim-label { font-weight: 800; color: var(--red-soft); text-transform: uppercase; font-size: 11px; letter-spacing: 1px; }
+.sim-grade { font-size: 28px; font-weight: 900; line-height: 1; }
+.sim-score { font-weight: 700; }
+.fixtoggle { margin-left: auto; color: var(--muted); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
+.fixtoggle input { accent-color: #22c55e; width: 15px; height: 15px; }
+
 /* Cards grid */
 .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
 .card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }