k8s-av 1.0.2 → 1.0.4

package/dist/server/routes/graph.js

@@ -7,7 +7,7 @@ router.get('/', async (_req, res, next) => {
     try {
         const [nodesResult, edgesResult] = await Promise.all([
             (0, neo4j_client_1.runQuery)(`
-        MATCH (n:K8sNode) AQ.Ab8RN6IDrFDTiOIGWD65asoJ0AOO5fTcFliVNoxxtZT83wueNg
+        MATCH (n:K8sNode) 
         RETURN
           n.id           AS id,
           n.type         AS type,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "k8s-av",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Kubernetes RBAC Attack Path Visualizer — scan your cluster, detect attack paths, visualize in a local UI",
   "keywords": [
     "kubernetes",

package/ui/package.json

@@ -14,7 +14,8 @@
     "jspdf": "^4.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "zustand": "^4.5.2"
+    "zustand": "^4.5.2",
+    "vite": "^5.2.11"
   },
   "devDependencies": {
     "@types/dagre": "^0.7.52",

package/ui/src/App.tsx

@@ -11,7 +11,6 @@ import { useAppStore } from './store/useAppStore';
 export default function App() {
   const { activeView, selectedNodeId, fetchGraph, fetchVulnerabilities } = useAppStore();
 
-  // Fetch graph + vulnerabilities on mount
   useEffect(() => {
     fetchGraph();
     fetchVulnerabilities();
@@ -21,7 +20,6 @@ export default function App() {
     <div style={{ display: 'flex', height: '100vh', overflow: 'hidden', background: '#0a0a0f' }}>
       <Sidebar />
 
-      {/* Main */}
       <main style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', position: 'relative' }}>
         {activeView === 'overview'        && <OverviewView />}
         {activeView === 'paths'           && <PathsView />}
@@ -30,7 +28,6 @@ export default function App() {
         {activeView === 'report'          && <ReportView />}
       </main>
 
-      {/* Detail panel slides in from right when a node is selected */}
       {selectedNodeId && <DetailPanel />}
     </div>
   );

package/ui/src/components/Box.tsx

@@ -3,7 +3,6 @@ import type { ReactNode } from 'react';
 interface BoxProps {
   children: ReactNode;
   className?: string;
-  /** adds a 2px orange top-border accent line */
   accent?: boolean;
 }
 

package/ui/src/components/DetailPanel.tsx

@@ -15,13 +15,11 @@ export function DetailPanel() {
 
   return (
     <>
-      {/* Backdrop */}
       <div
         style={{ position: 'fixed', inset: 0, zIndex: 40 }}
         onClick={() => selectNode(null)}
       />
 
-      {/* Panel */}
       <aside
         style={{
           position: 'fixed',
@@ -44,7 +42,6 @@ export function DetailPanel() {
           }
         `}</style>
 
-        {/* Header */}
         <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', padding: '16px', borderBottom: '1px solid #1F1F1F' }}>
           <div style={{ flex: 1, minWidth: 0 }}>
             <div style={{ fontSize: 9, fontFamily: 'monospace', color: '#FF6A00', textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 5 }}>
@@ -68,14 +65,12 @@ export function DetailPanel() {
         </div>
 
         <div style={{ flex: 1, overflowY: 'auto', padding: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
-          {/* Tags */}
           <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
             {node.isEntryPoint && <Tag label="Entry Point" color="blue" />}
             {node.isCrownJewel && <Tag label="Crown Jewel" color="amber" />}
             {vuln && <RiskBadge score={vuln.riskScore} />}
           </div>
 
-          {/* Image */}
           {node.image && (
             <InfoBox>
               <Label>Image</Label>
@@ -83,7 +78,6 @@ export function DetailPanel() {
             </InfoBox>
           )}
 
-          {/* CVEs */}
           {(node.cve?.length ?? 0) > 0 && (
             <InfoBox>
               <Label>CVEs</Label>
@@ -108,7 +102,6 @@ export function DetailPanel() {
             </InfoBox>
           )}
 
-          {/* Risk Analysis */}
           {vuln && (
             <InfoBox>
               <Label>Risk Analysis</Label>
@@ -123,7 +116,6 @@ export function DetailPanel() {
             </InfoBox>
           )}
 
-          {/* Simulate Removal */}
           <InfoBox>
             <Label>Simulate Removal</Label>
             <p style={{ fontSize: 11, color: '#555555', marginBottom: 10, marginTop: 0 }}>

package/ui/src/components/Sidebar.tsx

@@ -17,7 +17,6 @@ export function Sidebar() {
     <aside
       style={{ width: 192, flexShrink: 0, display: 'flex', flexDirection: 'column', background: '#0B0B0B', borderRight: '1px solid #1F1F1F' }}
     >
-      {/* Logo */}
       <div style={{ padding: '20px 16px 16px', borderBottom: '1px solid #1F1F1F' }}>
         <div style={{ fontSize: 14, fontFamily: 'monospace', color: '#FF6A00', letterSpacing: '0.15em', textTransform: 'uppercase', fontWeight: 600 }}>
           K8s-AV
@@ -25,12 +24,10 @@ export function Sidebar() {
         <div style={{ fontSize: 12, color: '#888888', marginTop: 3 }}>Attack Path Visualizer</div>
       </div>
 
-      {/* Section label */}
       <div style={{ padding: '16px 16px 8px', fontSize: 11, color: '#555555', textTransform: 'uppercase', letterSpacing: '0.12em' }}>
         Navigation
       </div>
 
-      {/* Nav */}
       <nav style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2, padding: '0 8px' }}>
         {NAV.map(({ id, label, icon }) => {
           const active = activeView === id;
@@ -74,7 +71,6 @@ export function Sidebar() {
         })}
       </nav>
 
-      {/* Stats footer */}
       <div style={{ padding: '12px 16px', borderTop: '1px solid #1F1F1F', display: 'flex', flexDirection: 'column', gap: 8 }}>
         <div style={{ fontSize: 11, color: '#555555', textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 2 }}>
           Cluster Stats

package/ui/src/components/graph/CustomNode.tsx

@@ -62,7 +62,6 @@ export const CustomNode = memo(({ data }: NodeProps) => {
       <Handle type="target" position={Position.Left}  style={{ background: borderColor, width: 5, height: 5, border: 'none' }} />
       <Handle type="source" position={Position.Right} style={{ background: borderColor, width: 5, height: 5, border: 'none' }} />
 
-      {/* CVE dot */}
       {d.hasCve && (
         <span
           title="Has CVEs"
@@ -74,17 +73,14 @@ export const CustomNode = memo(({ data }: NodeProps) => {
         />
       )}
 
-      {/* Type badge */}
       <div style={{ fontSize: 9, color: borderColor, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 3, opacity: 0.9 }}>
         {d.isEntryPoint ? '⤳ ' : ''}{d.isCrownJewel ? '★ ' : ''}{d.nodeType}
       </div>
 
-      {/* Label */}
       <div style={{ fontSize: 11, color: '#EAEAEA', fontFamily: 'monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
         {d.label}
       </div>
 
-      {/* Risk score */}
       {d.riskScore > 0 && (
         <div style={{
           fontSize: 9,

package/ui/src/components/graph/GraphCanvas.tsx

@@ -16,7 +16,6 @@ const NODE_W = 180;
 const NODE_H = 54;
 const nodeTypes = { k8s: CustomNode };
 
-// ─── Dagre layout ─────────────────────────────────────────────────────────────
 function applyLayout(nodes: Node[], edges: Edge[]): Node[] {
   const g = new dagre.graphlib.Graph();
   g.setDefaultEdgeLabel(() => ({}));
@@ -30,7 +29,6 @@ function applyLayout(nodes: Node[], edges: Edge[]): Node[] {
   });
 }
 
-// ─── Transform backend data → React Flow ─────────────────────────────────────
 function buildFlowGraph(
   rawNodes: GraphNode[],
   rawEdges: GraphEdge[],
@@ -87,7 +85,6 @@ function buildFlowGraph(
   return { nodes: applyLayout(nodes, edges), edges };
 }
 
-// ─── Component ────────────────────────────────────────────────────────────────
 interface Props {
   highlightedNodeIds?: Set<string>;
   highlightedEdgeKeys?: Set<string>;

package/ui/src/views/CriticalNodeView.tsx

@@ -10,7 +10,6 @@ export function CriticalNodeView() {
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
 
-      {/* Info panel — full height */}
       <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: 14 }}>
 
         {loading['critical'] && (
@@ -30,7 +29,6 @@ export function CriticalNodeView() {
         {top && (
           <div style={{ background: '#121212', border: '1px solid #1F1F1F', borderTop: '2px solid #FF6A00', borderRadius: 12, overflow: 'hidden' }}>
 
-            {/* Node info */}
             <div style={{ padding: '16px 20px', borderBottom: '1px solid #1F1F1F' }}>
               <div style={{ fontSize: 11, color: '#555555', textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 10 }}>
                 Critical Node
@@ -53,7 +51,6 @@ export function CriticalNodeView() {
               </div>
             </div>
 
-            {/* Path elimination */}
             {elim && (
               <div style={{ padding: '16px 20px', borderBottom: '1px solid #1F1F1F' }}>
                 <div style={{ fontSize: 11, color: '#555555', textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 12 }}>
@@ -68,7 +65,6 @@ export function CriticalNodeView() {
               </div>
             )}
 
-            {/* Simulate */}
             <div style={{ padding: '16px 20px' }}>
               <div style={{ fontSize: 11, color: '#555555', textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 12 }}>
                 Simulate Removal

package/ui/src/views/OverviewView.tsx

@@ -6,7 +6,6 @@ export function OverviewView() {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-      {/* Summary cards */}
       {(graphMeta || loading['graph']) && (
         <div style={{ flexShrink: 0, display: 'flex', gap: 10, padding: '14px 16px', borderBottom: '1px solid #1F1F1F' }}>
           {loading['graph']
@@ -35,14 +34,12 @@ export function OverviewView() {
         </div>
       )}
 
-      {/* Error */}
       {errors['graph'] && (
         <div style={{ flexShrink: 0, margin: '12px 16px 0', padding: '8px 12px', borderLeft: '2px solid #FF3B3B', background: '#FF3B3B10', color: '#FF3B3B', fontSize: 12 }}>
           {errors['graph']}
         </div>
       )}
 
-      {/* Graph container */}
       <div style={{ flex: 1, minHeight: 0, padding: 12, display: 'flex', flexDirection: 'column' }}>
         <div style={{ flex: 1, minHeight: 0, background: '#121212', border: '1px solid #1F1F1F', borderRadius: 16, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
           <GraphCanvas />

package/ui/src/views/PathsView.tsx

@@ -28,7 +28,6 @@ export function PathsView() {
   return (
     <div style={{ display: 'flex', height: '100%', overflow: 'hidden' }}>
 
-      {/* ── Path List (full width) ───────────────────────────────────── */}
       <div style={{
         flex: 1,
         display: 'flex',
@@ -36,7 +35,6 @@ export function PathsView() {
         background: '#0B0B0B',
         overflow: 'hidden',
       }}>
-        {/* Header */}
         <div style={{ padding: '16px 20px 14px', borderBottom: '1px solid #1F1F1F', flexShrink: 0 }}>
           <div style={{ fontSize: 14, color: '#EAEAEA', fontWeight: 500, marginBottom: 6 }}>Attack Paths</div>
           {pathsSummary && (
@@ -49,7 +47,6 @@ export function PathsView() {
           )}
         </div>
 
-        {/* List */}
         <div style={{ flex: 1, overflowY: 'auto', padding: '12px 20px', display: 'flex', flexDirection: 'column', gap: 0, maxWidth: 900, width: '100%', alignSelf: 'center', boxSizing: 'border-box' }}>
 
           {loading['paths'] && Array.from({ length: 3 }).map((_, i) => (
@@ -109,8 +106,6 @@ export function PathsView() {
   );
 }
 
-// ─── PathCard ──────────────────────────────────────────────────────────────────
-
 interface PathCardProps {
   index: number;
   nodes: string[];
@@ -122,7 +117,6 @@ interface PathCardProps {
 }
 
 function PathCard({ index, nodes, description, riskScore, riskColor, riskLabel, active }: PathCardProps) {
-  // Chunk nodes into rows of max 3 (so arrows don't overflow)
   const COLS   = 3;
   const chunks: string[][] = [];
   for (let i = 0; i < nodes.length; i += COLS) {
@@ -155,7 +149,6 @@ function PathCard({ index, nodes, description, riskScore, riskColor, riskLabel,
         }
       }}
     >
-      {/* ── Top row: index + risk badge ── */}
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
         <span style={{
           fontSize: 10,
@@ -182,7 +175,6 @@ function PathCard({ index, nodes, description, riskScore, riskColor, riskLabel,
         </span>
       </div>
 
-      {/* ── Node chain grid ── */}
       <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 16 }}>
         {chunks.map((chunk, rowIdx) => {
           const globalOffset = rowIdx * COLS;
@@ -194,7 +186,6 @@ function PathCard({ index, nodes, description, riskScore, riskColor, riskLabel,
                 const isLast    = globalIdx === nodes.length - 1;
                 const isArrow   = colIdx < chunk.length - 1 || (rowIdx < chunks.length - 1 && colIdx === chunk.length - 1);
 
-                // determine chip style
                 let chipBg     = '#1e1e26';
                 let chipBorder = '#2e2e3a';
                 let chipColor  = '#9090a0';
@@ -259,7 +250,6 @@ function PathCard({ index, nodes, description, riskScore, riskColor, riskLabel,
         })}
       </div>
 
-      {/* ── Divider ── */}
       <div style={{
         height: 1,
         background: 'linear-gradient(90deg, #1a6070, #0a2a35 80%, transparent)',
@@ -267,7 +257,6 @@ function PathCard({ index, nodes, description, riskScore, riskColor, riskLabel,
         borderRadius: 1,
       }} />
 
-      {/* ── Description ── */}
       <p style={{
         margin: 0,
         fontSize: 12,

package/ui/src/views/ReportView.tsx

@@ -13,10 +13,9 @@ export function ReportView() {
   const downloadPdf = () => {
     if (!reportData?.formatted) return;
 
-    // ── 1. Sanitise: strip all chars the built-in Courier font can't render ──
     const sanitise = (s: string) =>
       s
-        .replace(/[╔╗╚╝║]/g, '')          // box corners / sides
+        .replace(/[╔╗╚╝║]/g, '')
         .replace(/═+/g, (m) => '='.repeat(m.length))
         .replace(/─+/g, (m) => '-'.repeat(m.length))
         .replace(/█/g, '#')
@@ -24,9 +23,8 @@ export function ReportView() {
         .replace(/[→]/g, '->')
         .replace(/[≥]/g, '>=')
         .replace(/[✔]/g, 'OK')
-        .replace(/[^\x00-\x7F]/g, '?');   // catch-all for remaining non-ASCII
+        .replace(/[^\x00-\x7F]/g, '?');
 
-    // ── 2. Classify each source line ────────────────────────────────────────
     type LineKind = 'blank' | 'divider' | 'title-box' | 'section' | 'path-header' | 'kv' | 'text';
 
     interface ParsedLine { kind: LineKind; raw: string; clean: string }
@@ -48,16 +46,14 @@ export function ReportView() {
       return                                                          { kind: 'text',         raw, clean };
     });
 
-    // ── 3. Build PDF ─────────────────────────────────────────────────────────
     const doc    = new jsPDF({ unit: 'pt', format: 'a4' });
     const pageW  = doc.internal.pageSize.getWidth();
     const pageH  = doc.internal.pageSize.getHeight();
-    const ML     = 48;    // margin left
-    const MR     = 48;    // margin right
+    const ML     = 48;
+    const MR     = 48;
     const bodyW  = pageW - ML - MR;
     const date   = new Date().toISOString().slice(0, 10);
 
-    // colours (RGB)
     const C = {
       bg:      [11, 11, 11]   as [number,number,number],
       orange:  [255, 106, 0]  as [number,number,number],
@@ -72,7 +68,6 @@ export function ReportView() {
     let y       = 0;
     let pageNum = 1;
 
-    // ── helpers ──────────────────────────────────────────────────────
     const fill = (c: [number,number,number]) => doc.setFillColor(...c);
     const text = (c: [number,number,number]) => doc.setTextColor(...c);
     const draw = (c: [number,number,number]) => doc.setDrawColor(...c);
@@ -81,10 +76,8 @@ export function ReportView() {
 
     const drawPageHeader = () => {
       drawBg();
-      // orange top strip
       fill(C.orange);
       doc.rect(0, 0, pageW, 3, 'F');
-      // left accent line
       fill(C.orange);
       doc.rect(ML - 12, 24, 2, pageH - 48, 'F');
     };
@@ -109,31 +102,26 @@ export function ReportView() {
       if (y + needed > pageH - 40) newPage();
     };
 
-    // ── cover page ───────────────────────────────────────────────────
     drawPageHeader();
     y = 52;
 
-    // Title
     doc.setFont('courier', 'bold');
     doc.setFontSize(22);
     text(C.white);
     doc.text('K8s Attack Path Report', ML, y);
     y += 26;
 
-    // Subtitle row
     doc.setFont('courier', 'normal');
     doc.setFontSize(8.5);
     text(C.dim);
     doc.text(`Generated ${date}   |   Kubernetes RBAC Attack Path Visualizer`, ML, y);
     y += 18;
 
-    // Full-width divider under header
     draw(C.faint);
     doc.setLineWidth(0.4);
     doc.line(ML, y, pageW - MR, y);
     y += 14;
 
-    // ── render body lines ────────────────────────────────────────────
     for (const pl of parsed) {
       switch (pl.kind) {
 
@@ -151,13 +139,11 @@ export function ReportView() {
         }
 
         case 'title-box':
-          // skip — we already drew a nicer cover header
           break;
 
         case 'section': {
           ensureSpace(32);
           y += 6;
-          // orange pill background
           const label = pl.clean.trim();
           fill(C.orange);
           doc.roundedRect(ML, y - 10, bodyW, 16, 2, 2, 'F');
@@ -172,12 +158,10 @@ export function ReportView() {
         case 'path-header': {
           ensureSpace(22);
           y += 4;
-          // strip the risk bar text, parse score
           const riskMatch = pl.raw.match(/([\d.]+)\/10/);
           const score     = riskMatch ? parseFloat(riskMatch[1]) : 0;
           const riskColor = score >= 8 ? C.danger : score >= 5 ? C.orange : [76, 175, 80] as [number,number,number];
 
-          // label (Path N / Dijkstra N / Cycle N)
           const labelMatch = pl.clean.trim().match(/^(\w+\s+\d+)/);
           const pathLabel  = labelMatch ? labelMatch[1] : pl.clean.trim();
 
@@ -186,7 +170,6 @@ export function ReportView() {
           text(C.white);
           doc.text(pathLabel, ML, y);
 
-          // score badge
           if (score > 0) {
             const badge = `${score.toFixed(1)} / 10`;
             doc.setFont('courier', 'bold');
@@ -194,7 +177,6 @@ export function ReportView() {
             text(riskColor);
             doc.text(badge, pageW - MR, y, { align: 'right' });
 
-            // mini bar: 10 segments
             const barW   = 60;
             const barH   = 4;
             const barX   = pageW - MR - barW - 48;
@@ -212,7 +194,6 @@ export function ReportView() {
 
         case 'kv': {
           ensureSpace(14);
-          // split "  Key   : value" into key + value parts
           const colonIdx = pl.clean.indexOf(':');
           const key   = colonIdx > -1 ? pl.clean.slice(0, colonIdx + 1).trim() : pl.clean.trim();
           const value = colonIdx > -1 ? pl.clean.slice(colonIdx + 1).trim()    : '';
@@ -220,11 +201,9 @@ export function ReportView() {
           doc.setFont('courier', 'normal');
           doc.setFontSize(8);
 
-          // key
           text(C.key);
           doc.text(key, ML + 8, y);
 
-          // value (wrap if long)
           text(C.muted);
           const keyWidth   = doc.getTextWidth(key + '  ');
           const valueLines = doc.splitTextToSize(value, bodyW - keyWidth - 8) as string[];
@@ -239,7 +218,6 @@ export function ReportView() {
         }
 
         default: {
-          // generic text — wrap to page width
           ensureSpace(13);
           doc.setFont('courier', 'normal');
           doc.setFontSize(8);
@@ -262,7 +240,6 @@ export function ReportView() {
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%', padding: 14, gap: 12 }}>
 
-      {/* Header box */}
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
         <div>
           <div style={{ fontSize: 9, color: '#555555', textTransform: 'uppercase', letterSpacing: '0.12em' }}>Attack Report</div>
@@ -275,7 +252,6 @@ export function ReportView() {
         )}
       </div>
 
-      {/* Content box */}
       <div
         style={{
           flex: 1,

package/ui/src/views/VulnerabilitiesView.tsx

@@ -14,10 +14,8 @@ export function VulnerabilitiesView() {
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
 
-      {/* Table panel — fills full height */}
       <div style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>
 
-        {/* Summary bar */}
         {vulnSummary && (
           <div style={{ display: 'flex', gap: 20, padding: '10px 16px', borderBottom: '1px solid #1F1F1F' }}>
             <span style={{ fontSize: 13, color: '#555555' }}>
@@ -41,7 +39,6 @@ export function VulnerabilitiesView() {
           </div>
         )}
 
-        {/* Loading */}
         {loading['vulns'] && (
           <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
             {Array.from({ length: 4 }).map((_, i) => (
@@ -50,19 +47,16 @@ export function VulnerabilitiesView() {
           </div>
         )}
 
-        {/* Error */}
         {errors['vulns'] && (
           <div style={{ margin: 12, padding: '8px 12px', borderLeft: '2px solid #FF3B3B', background: '#FF3B3B10', color: '#FF3B3B', fontSize: 12 }}>
             {errors['vulns']}
           </div>
         )}
 
-        {/* Empty */}
         {!loading['vulns'] && vulnerabilities.length === 0 && !errors['vulns'] && (
           <div style={{ padding: 16, textAlign: 'center', fontSize: 12, color: '#555555' }}>No vulnerabilities above threshold.</div>
         )}
 
-        {/* Table */}
         {vulnerabilities.length > 0 && (
           <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
             <thead>