Fixing panels

Author: voltsparx

docs/website/css/components/workflow.css

@@ -117,3 +117,150 @@
   font-weight: 500;
 }
 
+.workflow-mini {
+  margin: 18px 0 28px;
+  padding: 18px;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  background:
+    radial-gradient(circle at top right, rgba(255, 26, 26, 0.10), transparent 40%),
+    linear-gradient(180deg, rgba(255, 26, 26, 0.06), rgba(255, 26, 26, 0.02));
+  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
+}
+
+.workflow-mini-head {
+  display: grid;
+  gap: 6px;
+  margin-bottom: 16px;
+}
+
+.workflow-mini-title {
+  font-family: var(--display);
+  font-size: 0.78rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--r0);
+}
+
+.workflow-mini-copy {
+  color: var(--txt2);
+  font-size: 13.5px;
+  line-height: 1.6;
+  font-weight: 500;
+  max-width: 700px;
+}
+
+.workflow-mini-rail {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 10px;
+  align-items: stretch;
+  margin-bottom: 14px;
+}
+
+.workflow-mini-stage {
+  position: relative;
+  border: 1px solid var(--border2);
+  border-radius: 14px;
+  background: rgba(10, 15, 20, 0.78);
+  padding: 12px 12px 14px;
+  cursor: pointer;
+  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
+}
+
+.workflow-mini-stage:hover,
+.workflow-mini-stage.is-active {
+  border-color: var(--r0);
+  background: rgba(255, 26, 26, 0.08);
+  transform: translateY(-2px);
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
+}
+
+.workflow-mini-stage::after {
+  content: ">";
+  position: absolute;
+  top: 50%;
+  right: -10px;
+  transform: translateY(-50%);
+  font-family: var(--mono);
+  font-size: 0.92rem;
+  color: var(--r0);
+  opacity: 0.72;
+  pointer-events: none;
+}
+
+.workflow-mini-stage:last-child::after {
+  display: none;
+}
+
+.workflow-mini-stage-order {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  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.62rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.workflow-mini-stage-name {
+  font-family: var(--display);
+  font-size: 0.62rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--txt);
+  margin-bottom: 6px;
+}
+
+.workflow-mini-stage-copy {
+  color: var(--txt3);
+  font-size: 12px;
+  line-height: 1.5;
+  font-weight: 500;
+}
+
+.workflow-mini-detail {
+  border: 1px solid var(--border2);
+  border-left: 3px solid var(--r2);
+  border-radius: 12px;
+  background: rgba(9, 12, 18, 0.84);
+  padding: 14px 16px;
+  min-height: 96px;
+}
+
+.workflow-mini-detail-title {
+  font-family: var(--display);
+  font-size: 0.68rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--r0);
+  margin-bottom: 8px;
+}
+
+.workflow-mini-detail-copy {
+  color: var(--txt2);
+  font-size: 13px;
+  line-height: 1.65;
+  font-weight: 500;
+}
+
+@media (max-width: 860px) {
+  .workflow-mini-rail {
+    grid-template-columns: 1fr;
+  }
+
+  .workflow-mini-stage::after {
+    content: "v";
+    top: auto;
+    right: 14px;
+    bottom: -14px;
+    transform: none;
+  }
+}
+

docs/website/css/layout/content.css

@@ -419,11 +419,8 @@
 .code-body .pn,
 .example-code .pn {
   color: var(--terminal-prompt);
-  display: inline-block;
-  width: 8ch;
-  min-width: 8ch;
-  text-align: right;
-  margin-right: 1ch;
+  display: inline;
+  margin-right: 0.55ch;
   font-weight: 600;
 }   /* prompt */
 .code-body .sc  { color: var(--terminal-text); }       /* section */

docs/website/index.html

@@ -143,15 +143,13 @@
     </div>
 
     <div id="how-it-works" class="sec-head">How It Works</div>
-    <div class="code-wrap">
-      <div class="code-header"><div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div><span class="code-lang">pipeline</span></div>
-      <div class="code-body">
-<span class="pn">1></span> <span class="kw">Passive Discovery</span>
-<span class="pn">2></span> <span class="kw">Active Validation</span>
-<span class="pn">3></span> <span class="kw">Service + Web Mapping</span>
-<span class="pn">4></span> <span class="kw">Correlation Engine</span>
-<span class="pn">5></span> <span class="kw">Tracking Engine</span>
+    <div class="workflow-mini">
+      <div class="workflow-mini-head">
+        <div class="workflow-mini-title">Interactive Flow Graph</div>
+        <div class="workflow-mini-copy">Tap or hover each stage to see how the framework moves from discovery to long-term tracking.</div>
       </div>
+      <div id="home-workflow-rail" class="workflow-mini-rail" aria-label="Homepage workflow graph"></div>
+      <div id="home-workflow-detail" class="workflow-mini-detail" aria-live="polite"></div>
     </div>
 
     <div id="quickstart-30" class="sec-head">Quick Start (30 Seconds)</div>
@@ -198,7 +196,7 @@
       <a class="ov-card" href="cli-reference.html#commands"><div class="ov-icon">⌨️</div><div class="ov-name">CLI Reference</div><div class="ov-desc">See the main commands, global flags, syntax rules, and practical command layout.</div></a>
       <a class="ov-card" href="modes.html#web"><div class="ov-icon">🖥️</div><div class="ov-name">Modes</div><div class="ov-desc">Compare console mode, web session mode, wizard mode, lab mode, and example workflows.</div></a>
       <a class="ov-card" href="reporting.html#outputs"><div class="ov-icon">📊</div><div class="ov-name">Reporting</div><div class="ov-desc">Review output formats, storage layout, config overrides, and verification habits.</div></a>
-      <a class="ov-card" href="development.html#development-home"><div class="ov-icon">DEV</div><div class="ov-name">Development</div><div class="ov-desc">See live repository activity, maintainer profile data, and release markers pulled from GitHub.</div></a>
+      <a class="ov-card" href="development.html#development-home"><div class="ov-icon">DEV</div><div class="ov-name">Development</div><div class="ov-desc">See live repository activity, commit trends, and release markers pulled from GitHub.</div></a>
       <a class="ov-card" href="download.html#download-home"><div class="ov-icon">⬇️</div><div class="ov-name">Download Center</div><div class="ov-desc">Download Linux, macOS, and Windows installers and run lifecycle modes from one page.</div></a>
       <a class="ov-card" href="project.html#author"><div class="ov-icon">📦</div><div class="ov-name">Project</div><div class="ov-desc">Check the repository links, licensing context, and maintainer details.</div></a>
     </div>
@@ -268,5 +266,3 @@
 <script src="js/bootstrap/app.js?v=1.0.0"></script>
 </body>
 </html>
-
-

docs/website/js/core/site-data.js

@@ -42,7 +42,7 @@ const DocsData = (() => {
     { id: "config", title: "Configuration", page: "reporting.html", hint: "Defaults, overrides, and operator config behavior.", group: "Reports" },
     { id: "storage", title: "Files & Storage", page: "reporting.html", hint: "Where reports, memory, sessions, and lab data live.", group: "Reports" },
     { id: "testing", title: "Testing", page: "reporting.html", hint: "Rake verification, smoke tests, and release checks.", group: "Reports" },
-    { id: "development-home", title: "Development", page: "development.html", hint: "Live GitHub-powered project pulse, maintainer profile, and repository snapshot.", group: "Project" },
+    { id: "development-home", title: "Development", page: "development.html", hint: "Live GitHub-powered project pulse, repository snapshot, and commit trends.", group: "Project" },
     { id: "repo-activity", title: "Repository Activity", page: "development.html", hint: "Recent commits, contributors, and branch-level movement from GitHub.", group: "Project" },
     { id: "release-radar", title: "Release Radar", page: "development.html", hint: "Tags, release signals, workflow links, and inline raw file previews.", group: "Project" },
     { id: "author", title: "Project & License", page: "project.html", hint: "Author, repository, license, and publishing context.", group: "Project" },
@@ -85,6 +85,8 @@ const DocsElements = {
   searchResults: document.getElementById("docs-search-results"),
   workflowRail: document.getElementById("workflow-visual-rail"),
   workflowDetail: document.getElementById("workflow-visual-detail"),
+  homeWorkflowRail: document.getElementById("home-workflow-rail"),
+  homeWorkflowDetail: document.getElementById("home-workflow-detail"),
   homeHeroLogo: document.getElementById("home-hero-logo"),
   homeHeroEgg: document.getElementById("home-hero-egg"),
   siteFooter: document.getElementById("site-footer"),

docs/website/js/features/workflow-visual.js

@@ -43,40 +43,77 @@ const WorkflowVisual = (() => {
     `;
   }
 
-  function activate(stageName) {
-    if (!DocsElements.workflowRail) {
+  function renderHomeDetail(stage) {
+    if (!DocsElements.homeWorkflowDetail || !stage) {
       return;
     }
 
+    DocsElements.homeWorkflowDetail.innerHTML = `
+      <div class="workflow-mini-detail-title">${stage.order} &middot; ${stage.name}</div>
+      <div class="workflow-mini-detail-copy">${stage.detail}</div>
+    `;
+  }
+
+  function activate(stageName) {
     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);
+    if (DocsElements.workflowRail) {
+      DocsElements.workflowRail.querySelectorAll(".workflow-stage").forEach((node) => {
+        node.classList.toggle("is-active", node.dataset.stageName === stage.name);
+      });
+      renderDetail(stage);
+    }
+
+    if (DocsElements.homeWorkflowRail) {
+      DocsElements.homeWorkflowRail.querySelectorAll(".workflow-mini-stage").forEach((node) => {
+        node.classList.toggle("is-active", node.dataset.stageName === stage.name);
+      });
+      renderHomeDetail(stage);
+    }
   }
 
   function bind() {
-    if (!DocsElements.workflowRail) {
+    if (!DocsElements.workflowRail && !DocsElements.homeWorkflowRail) {
       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("");
+    if (DocsElements.workflowRail) {
+      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);
-        }
+      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);
+          }
+        });
       });
-    });
+    }
+
+    if (DocsElements.homeWorkflowRail) {
+      DocsElements.homeWorkflowRail.innerHTML = stages.map((stage) => `
+        <button type="button" class="workflow-mini-stage" data-stage-name="${stage.name}">
+          <span class="workflow-mini-stage-order">${stage.order}</span>
+          <div class="workflow-mini-stage-name">${stage.name}</div>
+          <div class="workflow-mini-stage-copy">${stage.short}</div>
+        </button>
+      `).join("");
+
+      DocsElements.homeWorkflowRail.querySelectorAll(".workflow-mini-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);
   }