Updates

Author: voltsparx

lib/asrfacet_rb/web/web_assets/dashboard.css

@@ -26,6 +26,7 @@
   --sidebar-w: 300px;
   --drawer-w: 370px;
   --topbar-h: 92px;
+  --card-pad: 16px;
 }
 
 *,
@@ -90,9 +91,9 @@ button {
 
 .app-main {
   min-width: 0;
-  padding: 20px 24px 32px;
+  padding: 16px 20px 28px;
   display: grid;
-  gap: 18px;
+  gap: 14px;
 }
 
 .shell-card {
@@ -122,7 +123,7 @@ button {
 .app-topbar,
 .hero-band,
 .view-panel .shell-card {
-  padding: 16px;
+  padding: var(--card-pad);
 }
 
 .sidebar-brand {
@@ -183,6 +184,11 @@ button {
   gap: 10px;
 }
 
+.link-grid.report-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
 .button {
   border-radius: 12px;
   padding: 10px 14px;
@@ -220,6 +226,8 @@ button {
   color: var(--txt2);
   display: grid;
   gap: 4px;
+  position: relative;
+  overflow: hidden;
 }
 
 .nav-item:hover,
@@ -229,6 +237,22 @@ button {
   color: var(--txt);
 }
 
+.nav-item::before {
+  content: "";
+  position: absolute;
+  inset: 10px auto 10px 0;
+  width: 3px;
+  border-radius: 999px;
+  background: transparent;
+  transition: background 0.18s ease, box-shadow 0.18s ease;
+}
+
+.nav-item.active::before,
+.nav-item:hover::before {
+  background: linear-gradient(180deg, var(--r0), rgba(255, 26, 26, 0.10));
+  box-shadow: 0 0 14px rgba(255, 26, 26, 0.30);
+}
+
 .nav-label {
   font-size: 1rem;
   font-weight: 700;
@@ -287,8 +311,9 @@ button {
 .session-list {
   display: grid;
   gap: 10px;
-  max-height: 46vh;
+  max-height: 50vh;
   overflow-y: auto;
+  padding-right: 4px;
 }
 
 .session-tools,
@@ -320,7 +345,9 @@ button {
   background: rgba(255, 26, 26, 0.03);
   color: var(--txt2);
   display: grid;
-  gap: 10px;
+  gap: 8px;
+  position: relative;
+  overflow: hidden;
 }
 
 .session-card.active,
@@ -329,6 +356,19 @@ button {
   background: rgba(255, 26, 26, 0.08);
 }
 
+.session-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 4px;
+  background: rgba(255, 26, 26, 0.10);
+}
+
+.session-card.active::before,
+.session-card:hover::before {
+  background: linear-gradient(180deg, var(--r0), rgba(255, 26, 26, 0.12));
+}
+
 .session-card strong {
   color: var(--txt);
   font-size: 1rem;
@@ -380,6 +420,9 @@ button {
 .app-topbar {
   justify-content: space-between;
   align-items: stretch;
+  position: sticky;
+  top: 16px;
+  z-index: 20;
 }
 
 .topbar-main {
@@ -432,6 +475,10 @@ button {
   grid-template-columns: 1.1fr 0.9fr;
   gap: 18px;
   align-items: stretch;
+  background:
+    linear-gradient(90deg, rgba(255, 26, 26, 0.06), transparent 45%),
+    linear-gradient(180deg, rgba(255, 26, 26, 0.05), rgba(255, 26, 26, 0.02)),
+    rgba(14, 2, 2, 0.92);
 }
 
 .hero-grid,
@@ -462,10 +509,11 @@ button {
 
 .summary-grid {
   margin-top: 14px;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
 }
 
 .summary-tile strong {
-  font-size: 1.4rem;
+  font-size: 1.28rem;
 }
 
 .summary-tile.compact strong {
@@ -545,6 +593,12 @@ button {
   word-break: break-word;
 }
 
+.docs-grid > .shell-card:first-child {
+  position: sticky;
+  top: 124px;
+  align-self: start;
+}
+
 .tab-strip {
   margin-top: 14px;
 }
@@ -647,6 +701,21 @@ table {
   border: 1px solid var(--border2);
 }
 
+.table-shell {
+  margin-top: 14px;
+  border: 1px solid var(--border2);
+  border-radius: 14px;
+  overflow: auto;
+  background: rgba(10, 3, 3, 0.58);
+}
+
+.table-shell table {
+  margin-top: 0;
+  border: 0;
+  border-radius: 0;
+  min-width: 620px;
+}
+
 th,
 td {
   padding: 12px 14px;
@@ -661,12 +730,91 @@ thead th {
   font-size: 0.76rem;
   color: var(--txt2);
   text-transform: uppercase;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+tbody tr:nth-child(even) td {
+  background: rgba(255, 255, 255, 0.01);
+}
+
+tbody tr:hover td {
+  background: rgba(255, 26, 26, 0.06);
 }
 
 tbody tr:last-child td {
   border-bottom: none;
 }
 
+.score-badge,
+.severity-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 70px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--border2);
+  font-family: var(--mono);
+  font-size: 0.78rem;
+  background: rgba(255, 26, 26, 0.08);
+}
+
+.score-badge {
+  color: var(--txt);
+}
+
+.severity-badge.critical,
+.severity-badge.high {
+  color: var(--bad);
+  border-color: rgba(255, 107, 107, 0.28);
+  background: rgba(255, 107, 107, 0.10);
+}
+
+.severity-badge.medium {
+  color: var(--warn);
+  border-color: rgba(246, 193, 79, 0.28);
+  background: rgba(246, 193, 79, 0.10);
+}
+
+.severity-badge.low,
+.severity-badge.info {
+  color: var(--ok);
+  border-color: rgba(88, 214, 141, 0.22);
+  background: rgba(88, 214, 141, 0.10);
+}
+
+.report-card {
+  display: grid;
+  gap: 8px;
+  align-content: start;
+  min-height: 116px;
+  text-decoration: none;
+}
+
+.report-card-title {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: center;
+  font-weight: 700;
+}
+
+.report-card-copy {
+  color: var(--txt3);
+  line-height: 1.5;
+  font-size: 0.92rem;
+}
+
+.report-card-meta {
+  color: var(--r0);
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
 .notice {
   margin-top: 14px;
   color: var(--txt2);
@@ -754,6 +902,10 @@ tbody tr:last-child td {
     grid-template-columns: 1fr;
   }
 
+  .docs-grid > .shell-card:first-child {
+    position: static;
+  }
+
   .app-topbar {
     flex-direction: column;
     align-items: stretch;
@@ -782,6 +934,10 @@ tbody tr:last-child td {
     padding: 16px;
   }
 
+  .app-topbar {
+    top: 12px;
+  }
+
   .mobile-only {
     display: inline-flex;
   }

lib/asrfacet_rb/web/web_assets/dashboard.js

@@ -60,6 +60,10 @@ function statusClass(status) {
   return `status-pill ${String(status || "idle").toLowerCase()}`;
 }
 
+function severityClass(value) {
+  return String(value || "info").toLowerCase();
+}
+
 function relativeTime(value) {
   if (!value) return "never";
   const timestamp = new Date(value).getTime();
@@ -327,14 +331,21 @@ function renderSnapshot(session) {
 function renderReports(session) {
   const artifacts = session?.artifacts || {};
   const links = [
-    ["CLI report", "cli_report"],
-    ["TXT report", "txt_report"],
-    ["HTML report", "html_report"],
-    ["JSON report", "json_report"]
+    ["CLI report", "cli_report", "Fast terminal-friendly summary for quick operator review.", "Readable stream"],
+    ["TXT report", "txt_report", "Plain-text export for notes, tickets, or lightweight sharing.", "Plain export"],
+    ["HTML report", "html_report", "Human-readable report with the richest session context and presentation.", "Primary review"],
+    ["JSON report", "json_report", "Structured export for scripting, pipelines, and downstream tooling.", "Automation ready"]
   ].filter(([, key]) => Boolean(artifacts[key]));
 
-  el("report-links").innerHTML = links.map(([label, key]) => `
-    <a class="button button-secondary" target="_blank" rel="noopener" href="/reports/${encodeURIComponent(session.id)}/${key}">${escapeHtml(label)}</a>
+  el("report-links").innerHTML = links.map(([label, key, copy, meta]) => `
+    <a class="button button-secondary report-card" target="_blank" rel="noopener" href="/reports/${encodeURIComponent(session.id)}/${key}">
+      <span class="report-card-title">
+        <span>${escapeHtml(label)}</span>
+        <span class="status-pill completed">ready</span>
+      </span>
+      <span class="report-card-copy">${escapeHtml(copy)}</span>
+      <span class="report-card-meta">${escapeHtml(meta)}</span>
+    </a>
   `).join("") || '<div class="notice">Reports appear here after the first completed run.</div>';
 
   el("meta-reports").textContent = links.length > 0 ? `${links.length} ready` : "Awaiting";
@@ -382,7 +393,7 @@ function renderTopAssets(session) {
   el("top-assets-table").innerHTML = assets.map((asset) => `
     <tr>
       <td>${escapeHtml(asset.host || "-")}</td>
-      <td>${escapeHtml(String(asset.total_score || 0))}</td>
+      <td><span class="score-badge">${escapeHtml(String(asset.total_score || 0))}</span></td>
       <td>${escapeHtml(Array(asset.matched_rules || []).join(", ") || "Interesting exposure patterns detected.")}</td>
     </tr>
   `).join("") || '<tr><td colspan="3">Top assets appear after a completed run.</td></tr>';
@@ -392,7 +403,7 @@ function renderFindings(session) {
   const findings = Array.isArray(session?.payload?.store?.findings) ? session.payload.store.findings.slice(0, 8) : [];
   el("findings-table").innerHTML = findings.map((finding) => `
     <tr>
-      <td>${escapeHtml(String(finding.severity || "info").toUpperCase())}</td>
+      <td><span class="severity-badge ${escapeHtml(severityClass(finding.severity))}">${escapeHtml(String(finding.severity || "info").toUpperCase())}</span></td>
       <td>${escapeHtml(finding.title || "Untitled finding")}</td>
       <td>${escapeHtml(finding.host || "-")}</td>
     </tr>