Avoided a mistake and added something in place

Author: voltsparx

README.md

@@ -61,6 +61,7 @@ flowchart LR
     C --> D[Correlation Engine]
     D --> E[Tracking and Change Summary]
 ```
+![ASRFacet-Rb Framework Flow](docs/images/illustration/asrfacet-rb-framework-visual.svg)
 
 ### Stage Intent
 
@@ -121,10 +122,6 @@ Installer prompt theme:
 
 ## Usage Guide with Examples
 
-### Quick Cheat Sheet
-
-![ASRFacet-Rb Quick Command Cheat Sheet](docs/images/cheatsheets/quick-command-cheatsheet.svg)
-
 ### Core Commands
 
 | Command | Purpose | Example |

docs/images/cheatsheets/quick-command-cheatsheet.svg

@@ -71,6 +71,8 @@ const DocsElements = {
   menuToggle: document.getElementById("menu-toggle"),
   searchInput: document.getElementById("docs-search-input"),
   searchResults: document.getElementById("docs-search-results"),
+  workflowRail: document.getElementById("workflow-visual-rail"),
+  workflowDetail: document.getElementById("workflow-visual-detail"),
   homeHeroLogo: document.getElementById("home-hero-logo"),
   homeHeroEgg: document.getElementById("home-hero-egg"),
   siteFooter: document.getElementById("site-footer"),
@@ -744,6 +746,92 @@ const ContactPanel = (() => {
   return { bind, closeOpen };
 })();
 
+const WorkflowVisual = (() => {
+  const stages = [
+    {
+      order: "01",
+      name: "Passive Discovery",
+      short: "Collect candidate hosts before active traffic begins.",
+      detail: "This stage pulls in low-noise intelligence from certificate transparency, passive DNS, and historical archive-style sources so the framework starts with context instead of blind guesses."
+    },
+    {
+      order: "02",
+      name: "Active Validation",
+      short: "Confirm scope, DNS truth, and reachable surfaces.",
+      detail: "Validated names move through scoped checks, DNS confirmation, and bounded network validation so later stages work from verified assets instead of assumptions."
+    },
+    {
+      order: "03",
+      name: "Service + Web Map",
+      short: "Turn live hosts into service and application context.",
+      detail: "Open ports, banners, HTTP responses, crawl paths, forms, and JavaScript endpoints are gathered here to describe how a host behaves, not just that it exists."
+    },
+    {
+      order: "04",
+      name: "Correlation",
+      short: "Link assets, findings, and relationships together.",
+      detail: "The framework joins domains, IPs, services, and discoveries into a graph-friendly view so operators can see how assets relate and which ones deserve attention first."
+    },
+    {
+      order: "05",
+      name: "Tracking",
+      short: "Preserve history and show what changed since last time.",
+      detail: "Recon memory stores prior state so each run can produce deltas, change summaries, and more useful reporting instead of isolated snapshots."
+    }
+  ];
+
+  function renderDetail(stage) {
+    if (!DocsElements.workflowDetail || !stage) {
+      return;
+    }
+
+    DocsElements.workflowDetail.innerHTML = `
+      <div class="workflow-visual-detail-title">${stage.order} · ${stage.name}</div>
+      <div class="workflow-visual-detail-copy">${stage.detail}</div>
+    `;
+  }
+
+  function activate(stageName) {
+    if (!DocsElements.workflowRail) {
+      return;
+    }
+
+    const stage = stages.find((entry) => entry.name === stageName) || stages[0];
+    DocsElements.workflowRail.querySelectorAll(".workflow-stage").forEach((node) => {
+      node.classList.toggle("is-active", node.dataset.stageName === stage.name);
+    });
+    renderDetail(stage);
+  }
+
+  function bind() {
+    if (!DocsElements.workflowRail) {
+      return;
+    }
+
+    DocsElements.workflowRail.innerHTML = stages.map((stage) => `
+      <button type="button" class="workflow-stage" data-stage-name="${stage.name}">
+        <span class="workflow-stage-order">${stage.order}</span>
+        <div class="workflow-stage-name">${stage.name}</div>
+        <div class="workflow-stage-copy">${stage.short}</div>
+        <span class="workflow-stage-arrow">></span>
+      </button>
+    `).join("");
+
+    DocsElements.workflowRail.querySelectorAll(".workflow-stage").forEach((node) => {
+      node.addEventListener("click", () => activate(node.dataset.stageName));
+      node.addEventListener("mouseenter", () => {
+        if (window.matchMedia("(hover: hover)").matches) {
+          activate(node.dataset.stageName);
+        }
+      });
+    });
+
+    activate(stages[0].name);
+  }
+
+  return { bind };
+})();
+
 const App = (() => {
   function trimEmptyVisualCards() {
     const cardSelectors = [
@@ -924,6 +1012,7 @@ const App = (() => {
     Sidebar.render();
     EasterEgg.bind();
     Search.bind();
+    WorkflowVisual.bind();
     Search.setOpen(false);
     bindHomeEasterEgg();
     bindGlobalEvents();

docs/images/illustration/asrfacet-rb-framework-visual.svg

@@ -1130,6 +1130,125 @@ tbody td code { white-space: nowrap; }
   margin-top: 6px;
 }
 
+/* WORKFLOW VISUAL */
+.workflow-visual {
+  margin: 18px 0 28px;
+  padding: 20px;
+  border: 1px solid var(--border);
+  background:
+    linear-gradient(180deg, rgba(255,26,26,0.08), rgba(255,26,26,0.02)),
+    radial-gradient(circle at top right, rgba(255,26,26,0.10), transparent 42%);
+  border-radius: 16px;
+  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22);
+}
+.workflow-visual-head {
+  display: grid;
+  gap: 6px;
+  margin-bottom: 18px;
+}
+.workflow-visual-title {
+  font-family: var(--display);
+  font-size: 0.82rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--r0);
+}
+.workflow-visual-copy {
+  color: var(--txt2);
+  font-size: 13.5px;
+  line-height: 1.6;
+  font-weight: 500;
+  max-width: 760px;
+}
+.workflow-visual-rail {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+  align-items: stretch;
+  margin-bottom: 16px;
+}
+.workflow-stage {
+  position: relative;
+  border: 1px solid var(--border2);
+  background: rgba(16, 1, 1, 0.86);
+  border-radius: 14px;
+  padding: 14px 14px 16px;
+  cursor: pointer;
+  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
+}
+.workflow-stage:hover,
+.workflow-stage.is-active {
+  border-color: var(--r0);
+  background: rgba(255, 26, 26, 0.08);
+  transform: translateY(-2px);
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
+}
+.workflow-stage-order {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: rgba(255,26,26,0.10);
+  color: var(--r0);
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+.workflow-stage-name {
+  font-family: var(--display);
+  font-size: 0.68rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--txt);
+  margin-bottom: 8px;
+}
+.workflow-stage-copy {
+  color: var(--txt3);
+  font-size: 12.5px;
+  line-height: 1.55;
+  font-weight: 500;
+}
+.workflow-stage-arrow {
+  position: absolute;
+  top: 50%;
+  right: -14px;
+  transform: translateY(-50%);
+  font-family: var(--mono);
+  color: var(--r0);
+  font-size: 1rem;
+  opacity: 0.72;
+  pointer-events: none;
+}
+.workflow-stage:last-child .workflow-stage-arrow {
+  display: none;
+}
+.workflow-visual-detail {
+  border: 1px solid var(--border2);
+  border-left: 3px solid var(--r2);
+  background: rgba(9, 12, 18, 0.84);
+  border-radius: 12px;
+  padding: 16px 18px;
+  min-height: 110px;
+}
+.workflow-visual-detail-title {
+  font-family: var(--display);
+  font-size: 0.7rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--r0);
+  margin-bottom: 8px;
+}
+.workflow-visual-detail-copy {
+  color: var(--txt2);
+  font-size: 13.5px;
+  line-height: 1.65;
+  font-weight: 500;
+}
+
 /* COMMAND REFERENCE CARDS */
 .cmd-grid {
   display: grid;
@@ -1439,6 +1558,7 @@ tbody td code { white-space: nowrap; }
   .wizard-grid { grid-template-columns: 1fr; }
   .mod-item { grid-template-columns: 1fr; }
   .lab-endpoints { grid-template-columns: 1fr; }
+  .workflow-stage-arrow { display: none; }
   .topbar-action-menu { display: inline-flex; align-items: center; justify-content: center; }
   #topbar-links { display: none; }
   .topbar-search {
@@ -1583,6 +1703,12 @@ tbody td code { white-space: nowrap; }
   .fmt-grid,
   .stat-strip,
   .install-grid { grid-template-columns: 1fr; }
+  .workflow-visual {
+    padding: 14px;
+  }
+  .workflow-visual-rail {
+    grid-template-columns: 1fr;
+  }
   #site-footer { grid-template-columns: 1fr; }
 
   .egg-toast {

docs/website/app.js

@@ -80,6 +80,18 @@
         </tbody>
       </table>
     </div>
+
+    <div class="workflow-visual" id="workflow-visual" aria-label="Interactive workflow visualization">
+      <div class="workflow-visual-head">
+        <div class="workflow-visual-title">Live Workflow View</div>
+        <div class="workflow-visual-copy">The website renders the framework flow directly with HTML, CSS, and JavaScript so each stage stays readable and interactive.</div>
+      </div>
+      <div class="workflow-visual-rail" id="workflow-visual-rail"></div>
+      <div class="workflow-visual-detail" id="workflow-visual-detail">
+        <div class="workflow-visual-detail-title">Select a stage</div>
+        <div class="workflow-visual-detail-copy">Pick any stage to see what it contributes to the full framework workflow.</div>
+      </div>
+    </div>
   </section>
 
   <section id="pipeline" class="page-section active">