polishing

Author: voltsparx

lib/asrfacet_rb/web/session_runner.rb

@@ -286,10 +286,16 @@ def build_meta(target)
         {
           target: target,
           generated_at: Time.now.utc.iso8601,
-          output_directory: output_root
+          output_directory: output_root,
+          report_engine: ASRFacet::Output::RuntimeDetector.engine_label
         }
       rescue StandardError
-        { target: target.to_s, generated_at: Time.now.utc.iso8601, output_directory: output_root }
+        {
+          target: target.to_s,
+          generated_at: Time.now.utc.iso8601,
+          output_directory: output_root,
+          report_engine: "ASRFacet-Rb"
+        }
       end
 
       def save_report_bundle(target, payload, requested_format:)

lib/asrfacet_rb/web/web_assets/dashboard.css

@@ -876,6 +876,30 @@ body.theme-dark .graph-edge {
   font-size: 12px;
 }
 
+.graph-node {
+  cursor: pointer;
+}
+
+.graph-node circle,
+.graph-edge {
+  transition: opacity 0.18s ease, stroke-width 0.18s ease, transform 0.18s ease;
+}
+
+.graph-node.active circle {
+  stroke-width: 4;
+}
+
+.graph-node.dimmed circle,
+.graph-node.dimmed text,
+.graph-edge.dimmed {
+  opacity: 0.22;
+}
+
+.graph-node.connected circle,
+.graph-edge.connected {
+  opacity: 1;
+}
+
 .focus-card {
   display: grid;
   gap: 14px;
@@ -895,11 +919,24 @@ body.theme-dark .graph-edge {
   margin-top: 6px;
 }
 
+.focus-list {
+  margin: 10px 0 0;
+  padding-left: 18px;
+  color: var(--text-muted);
+}
+
 .report-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
 
+.report-summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+  margin: 14px 0 18px;
+}
+
 .report-card {
   display: grid;
   gap: 10px;

lib/asrfacet_rb/web/web_assets/dashboard.html

@@ -331,6 +331,7 @@ <h3>Connected recon entities</h3>
                 <div>
                   <div class="eyebrow">Graph Inspector</div>
                   <h3>Relationship notes</h3>
+                  <p class="panel-copy">Select a node to see its linked assets, role in the session, and the shortest next pivot.</p>
                 </div>
               </div>
               <div id="graph-focus" class="focus-card"></div>
@@ -348,6 +349,7 @@ <h3>Saved reports</h3>
                   <p class="panel-copy">Open the presentation report first, then pivot to raw exports when you need scripting or evidence handling.</p>
                 </div>
               </div>
+              <div id="report-summary" class="report-summary"></div>
               <div id="report-links" class="link-grid report-grid"></div>
             </section>
 

lib/asrfacet_rb/web/web_assets/dashboard.js

@@ -17,7 +17,8 @@ const state = {
   sessionFilter: "all",
   docsQuery: "",
   theme: "light",
-  bootstrap: {}
+  bootstrap: {},
+  selectedGraphNode: null
 };
 
 const fields = [
@@ -245,6 +246,7 @@ function fillForm(session) {
   el("verbose").checked = config.verbose !== false;
   el("adaptive-rate").checked = config.adaptive_rate !== false;
   state.dirty = false;
+  state.selectedGraphNode = null;
   syncModeControls();
   renderBuilderNotes(formData());
   renderCommandPreview(formData());
@@ -561,10 +563,24 @@ function renderSnapshot(session) {
 
 function renderReports(session) {
   const artifacts = session?.artifacts || {};
+  const readyCount = Object.keys(artifactCatalog).filter((key) => Boolean(artifacts[key])).length;
+  const reportWarnings = Array.isArray(artifacts.report_errors) ? artifacts.report_errors : [];
   const links = Object.entries(artifactCatalog)
     .filter(([key]) => Boolean(artifacts[key]))
     .map(([key, [label, copy, meta]]) => [label, key, copy, meta]);
 
+  el("report-summary").innerHTML = [
+    ["Preferred output", labelForFormat(session?.config?.format || "html")],
+    ["Report engine", session?.payload?.meta?.report_engine || session?.meta?.report_engine || "ASRFacet-Rb"],
+    ["Artifacts ready", String(readyCount)],
+    ["Render warnings", reportWarnings.length > 0 ? String(reportWarnings.length) : "None"]
+  ].map(([label, value]) => `
+    <div class="summary-tile">
+      <span>${escapeHtml(label)}</span>
+      <strong>${escapeHtml(value)}</strong>
+    </div>
+  `).join("");
+
   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">
@@ -574,7 +590,20 @@ function renderReports(session) {
       <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>';
+  `).join("");
+
+  if (reportWarnings.length > 0) {
+    el("report-links").innerHTML += reportWarnings.map((warning) => `
+      <div class="notice">
+        <strong>${escapeHtml(String(warning.format || "report").toUpperCase())} warning</strong>
+        <div>${escapeHtml(warning.message || "A renderer reported a recoverable issue.")}</div>
+      </div>
+    `).join("");
+  }
+
+  if (!el("report-links").innerHTML.trim()) {
+    el("report-links").innerHTML = '<div class="notice">Reports appear here after the first completed run.</div>';
+  }
 
   el("meta-reports").textContent = links.length > 0 ? `${links.length} ready` : "Awaiting";
 }
@@ -716,53 +745,159 @@ function extractGraphModel(session) {
 
   const nodes = [];
   const edges = [];
+  const stats = summaryFor(session);
   const columns = {
     target: { x: 120 },
     host: { x: 330 },
     service: { x: 560 },
     finding: { x: 790 }
   };
 
-  nodes.push({ id: "target", label: target, type: "target", x: columns.target.x, y: 280 });
+  nodes.push({
+    id: "target",
+    label: target,
+    type: "target",
+    x: columns.target.x,
+    y: 280,
+    title: "Primary target",
+    detail: `This is the current session target. The session has ${stats.subdomains || 0} discovered hosts and ${stats.open_ports || 0} open ports.`,
+    recommendations: ["Validate scope and exclusions before starting broader active work."]
+  });
 
   hosts.forEach((host, index) => {
     const nodeId = `host-${index}`;
-    nodes.push({ id: nodeId, label: host, type: "host", x: columns.host.x, y: 110 + (index * 90) });
+    nodes.push({
+      id: nodeId,
+      label: host,
+      type: "host",
+      x: columns.host.x,
+      y: 110 + (index * 90),
+      title: "Discovered host",
+      detail: `${host} is part of the collected host surface for this session.`,
+      recommendations: ["Open the HTML or JSON report to inspect linked services and findings for this host."]
+    });
     edges.push({ from: "target", to: nodeId });
   });
 
   ports.forEach((service, index) => {
     const nodeId = `service-${index}`;
-    nodes.push({ id: nodeId, label: service, type: "service", x: columns.service.x, y: 150 + (index * 80) });
+    nodes.push({
+      id: nodeId,
+      label: service,
+      type: "service",
+      x: columns.service.x,
+      y: 150 + (index * 80),
+      title: "Observed service",
+      detail: `${service} represents a reachable network service observed in the current result set.`,
+      recommendations: ["Use service output and banner data first, then move into HTTP or certificate review when applicable."]
+    });
     edges.push({ from: hosts[index % Math.max(1, hosts.length)] ? `host-${index % Math.max(1, hosts.length)}` : "target", to: nodeId });
   });
 
   findings.forEach((finding, index) => {
     const nodeId = `finding-${index}`;
-    nodes.push({ id: nodeId, label: finding, type: "finding", x: columns.finding.x, y: 180 + (index * 90) });
+    nodes.push({
+      id: nodeId,
+      label: finding,
+      type: "finding",
+      x: columns.finding.x,
+      y: 180 + (index * 90),
+      title: "Generated finding",
+      detail: `${finding} is a heuristic or correlated issue worth manual validation.`,
+      recommendations: ["Confirm severity and ownership before escalating or ticketing the finding."]
+    });
     edges.push({ from: ports[index % Math.max(1, ports.length)] ? `service-${index % Math.max(1, ports.length)}` : "target", to: nodeId });
   });
 
   ips.slice(0, 3).forEach((ip, index) => {
     const nodeId = `ip-${index}`;
-    nodes.push({ id: nodeId, label: ip, type: "host", x: columns.host.x, y: 390 + (index * 70) });
+    nodes.push({
+      id: nodeId,
+      label: ip,
+      type: "host",
+      x: columns.host.x,
+      y: 390 + (index * 70),
+      title: "Resolved IP",
+      detail: `${ip} is a resolved or directly scanned IP tied to this session.`,
+      recommendations: ["Check ownership and hosting context before treating shared infrastructure as fully in scope."]
+    });
     edges.push({ from: "target", to: nodeId });
   });
 
   return { nodes, edges };
 }
 
+function buildGraphSelection(model, selectedId) {
+  const selectedNode = model.nodes.find((node) => node.id === selectedId) || model.nodes[0];
+  const connectedIds = new Set([selectedNode?.id].filter(Boolean));
+  model.edges.forEach((edge) => {
+    if (edge.from === selectedNode?.id || edge.to === selectedNode?.id) {
+      connectedIds.add(edge.from);
+      connectedIds.add(edge.to);
+    }
+  });
+
+  return { selectedNode, connectedIds };
+}
+
+function renderGraphFocus(session, model, selection) {
+  const summary = summaryFor(session);
+  const selectedNode = selection.selectedNode;
+  const linkedNodes = model.nodes.filter((node) => selection.connectedIds.has(node.id) && node.id !== selectedNode?.id);
+
+  if (!selectedNode) {
+    el("graph-focus").innerHTML = `
+      <div class="focus-block">
+        <div class="eyebrow">Graph Summary</div>
+        <strong>${escapeHtml(session?.name || "Untitled session")}</strong>
+        <div class="nav-hint">${escapeHtml(session?.config?.target || "No target selected")}</div>
+      </div>
+    `;
+    return;
+  }
+
+  el("graph-focus").innerHTML = `
+    <div class="focus-block">
+      <div class="eyebrow">Selected Node</div>
+      <strong>${escapeHtml(selectedNode.label)}</strong>
+      <div class="nav-hint">${escapeHtml(selectedNode.title || "Graph entity")}</div>
+    </div>
+    <div class="focus-block">
+      <div class="eyebrow">Meaning</div>
+      <strong>${escapeHtml(selectedNode.detail || "No extra detail is available for this node.")}</strong>
+    </div>
+    <div class="focus-block">
+      <div class="eyebrow">Linked Entities</div>
+      <strong>${escapeHtml(String(linkedNodes.length))} directly connected node${linkedNodes.length === 1 ? "" : "s"}</strong>
+      <ul class="focus-list">
+        ${(linkedNodes.length > 0 ? linkedNodes : [{ label: "No direct neighbors", type: "idle" }]).map((node) => `<li>${escapeHtml(node.label)}${node.type ? ` (${escapeHtml(node.type)})` : ""}</li>`).join("")}
+      </ul>
+    </div>
+    <div class="focus-block">
+      <div class="eyebrow">Recommended Next Move</div>
+      <strong>${escapeHtml((selectedNode.recommendations || [])[0] || "Use the linked reports and event stream to continue inspection.")}</strong>
+    </div>
+    <div class="focus-block">
+      <div class="eyebrow">Session Context</div>
+      <strong>${escapeHtml(`${summary.subdomains || 0} hosts, ${summary.open_ports || 0} services, ${summary.findings || 0} findings are currently represented in this session.`)}</strong>
+    </div>
+  `;
+}
+
 function renderGraph(session) {
   const model = extractGraphModel(session);
+  const selection = buildGraphSelection(model, state.selectedGraphNode || "target");
   const edgeMarkup = model.edges.map((edge) => {
     const from = model.nodes.find((node) => node.id === edge.from);
     const to = model.nodes.find((node) => node.id === edge.to);
     if (!from || !to) return "";
-    return `<line class="graph-edge" x1="${from.x}" y1="${from.y}" x2="${to.x}" y2="${to.y}"></line>`;
+    const edgeConnected = edge.from === selection.selectedNode?.id || edge.to === selection.selectedNode?.id;
+    const edgeClass = edgeConnected ? "graph-edge connected" : (selection.selectedNode ? "graph-edge dimmed" : "graph-edge");
+    return `<line class="${edgeClass}" x1="${from.x}" y1="${from.y}" x2="${to.x}" y2="${to.y}"></line>`;
   }).join("");
 
   const nodeMarkup = model.nodes.map((node) => `
-    <g class="graph-node ${escapeHtml(node.type)}">
+    <g class="graph-node ${escapeHtml(node.type)} ${node.id === selection.selectedNode?.id ? "active" : ""} ${selection.connectedIds.has(node.id) ? "connected" : "dimmed"}" data-node-id="${escapeHtml(node.id)}">
       <circle cx="${node.x}" cy="${node.y}" r="${node.type === "target" ? 34 : 28}"></circle>
       <text x="${node.x}" y="${node.y + 4}" text-anchor="middle">${escapeHtml(node.label.slice(0, 18))}</text>
     </g>
@@ -774,27 +909,13 @@ function renderGraph(session) {
       ${nodeMarkup}
     </svg>
   `;
-
-  const summary = summaryFor(session);
-  el("graph-focus").innerHTML = `
-    <div class="focus-block">
-      <div class="eyebrow">Graph Summary</div>
-      <strong>${escapeHtml(session?.name || "Untitled session")}</strong>
-      <div class="nav-hint">${escapeHtml(session?.config?.target || "No target selected")}</div>
-    </div>
-    <div class="focus-block">
-      <div class="eyebrow">Connected counts</div>
-      <strong>${escapeHtml(String(summary.subdomains || 0))} hosts, ${escapeHtml(String(summary.open_ports || 0))} services, ${escapeHtml(String(summary.findings || 0))} findings</strong>
-    </div>
-    <div class="focus-block">
-      <div class="eyebrow">Interpretation</div>
-      <strong>${summary.findings > 0 ? "The graph is showing service-to-finding pivots so the likely review path is visible." : "The graph is showing target-to-host and host-to-service relationships for infrastructure review."}</strong>
-    </div>
-    <div class="focus-block">
-      <div class="eyebrow">Operator note</div>
-      <strong>Use this tab to reason about pivots and ownership relationships before opening the detailed reports.</strong>
-    </div>
-  `;
+  Array.from(el("graph-canvas").querySelectorAll("[data-node-id]")).forEach((node) => {
+    node.addEventListener("click", () => {
+      state.selectedGraphNode = node.getAttribute("data-node-id");
+      renderGraph(session);
+    });
+  });
+  renderGraphFocus(session, model, selection);
 }
 
 function syncChrome(session) {