@hailbytes/vulnerability-calculator 1.0.0

package/hailbytes-vuln-calculator.js

@@ -0,0 +1,862 @@
+/**
+ * HailBytes Vulnerability Scanner Infrastructure Calculator
+ * Zero-dependency Web Component — pure ES module, no build step required.
+ *
+ * Usage: <hailbytes-vuln-calculator></hailbytes-vuln-calculator>
+ *
+ * Attributes:
+ *   theme="dark|light"  (default: dark)
+ *
+ * Events dispatched:
+ *   vuln-calculated — fired on every calculation, detail = full result object
+ *
+ * License: MPL-2.0
+ */
+
+// ─── Constants ───────────────────────────────────────────────────────────
+const ASM_BASE_CPU      = 4;
+const ASM_BASE_RAM      = 8;   // GB
+const ASM_BASE_STORAGE  = 50;  // GB
+const SECURITY_ENGINEER_HOURLY_RATE = 75;
+const MANAGED_SERVICE_MONTHLY_COST  = 299;
+
+const TOOL_LICENSING_ANNUAL = {
+  hailbytes_asm:        0,
+  openvas:              0,
+  nessus_professional:  3990,
+  qualys_vmdr:          3500,
+};
+
+const TOOL_MANAGEMENT_MONTHLY = { // hours * $75/hr already multiplied
+  hailbytes_asm:        450,
+  openvas:              450,
+  nessus_professional:  300,
+  qualys_vmdr:          225,
+};
+
+const TOOL_SETUP_HOURS = {
+  hailbytes_asm:        8,
+  openvas:              10,
+  nessus_professional:  6,
+  qualys_vmdr:          4,
+};
+
+const ASM_INTENSITY_MULT = { light: 1.0, medium: 1.3, aggressive: 1.8, continuous: 2.2 };
+const TRADITIONAL_INTENSITY_MULT = { light: 1.0, medium: 1.5, aggressive: 2.5, continuous: 3.0 };
+const FREQUENCY_MULT = { daily: 1.5, weekly: 1.0, monthly: 0.8, quarterly: 0.6 };
+const TIME_MULT      = { light: 0.5, medium: 1.0, aggressive: 2.0, continuous: 0.3 };
+
+// ─── Calculation engine ────────────────────────────────────────────────────────
+
+function calculateResources(data) {
+  const hasAsm = data.scanning_tools.includes('hailbytes_asm');
+
+  const vmResources   = hasAsm
+    ? calcAsmResources(data)
+    : calcTraditionalResources(data);
+
+  const timing        = calcTiming(data, vmResources);
+  const costs         = calcCosts(vmResources, data);
+  const recommendations = generateRecommendations(data, vmResources);
+
+  return {
+    vm_resources: vmResources,
+    timing,
+    costs,
+    recommendations,
+    has_asm: hasAsm,
+    inputs: { ...data },
+    timestamp: new Date().toISOString(),
+  };
+}
+
+function calcAsmResources(data) {
+  const intensityMult   = ASM_INTENSITY_MULT[data.scan_intensity] ?? 1.0;
+  const frequencyMult   = FREQUENCY_MULT[data.scan_frequency]     ?? 1.0;
+  const complianceFactor = 1.0 + (data.compliance_needs.length * 0.1);
+  const totalMultiplier = intensityMult * frequencyMult * complianceFactor;
+
+  const hostFactor   = Math.max(1, data.target_hosts / 1000);
+  const cpuCores     = Math.max(2, Math.ceil(ASM_BASE_CPU     * hostFactor * totalMultiplier));
+  const ramGb        = Math.max(4, Math.ceil(ASM_BASE_RAM     * hostFactor * totalMultiplier));
+  const ramRecommended = Math.ceil(ramGb * 1.5);
+  const storageGb    = Math.max(20, Math.ceil(ASM_BASE_STORAGE + (data.target_hosts / 100 * 2) * complianceFactor));
+  const networkMbps  = Math.max(10, Math.ceil(data.target_hosts / 200 * intensityMult * complianceFactor));
+
+  return {
+    cpu_cores:              cpuCores,
+    ram_gb:                 ramGb,
+    ram_recommended:        ramRecommended,
+    storage_gb:             storageGb,
+    network_bandwidth_mbps: networkMbps,
+    docker_required:        true,
+    tool_type:              'hailbytes_asm',
+    scaling_info: {
+      host_factor:       +hostFactor.toFixed(2),
+      total_multiplier:  +totalMultiplier.toFixed(2),
+      optimized_for:     'continuous_attack_surface_management',
+    },
+  };
+}
+
+function calcTraditionalResources(data) {
+  const intensityMult = TRADITIONAL_INTENSITY_MULT[data.scan_intensity] ?? 1.5;
+  const hostFactor    = Math.max(0.001, data.target_hosts / 1000);
+
+  const cpuCores  = Math.max(2, Math.ceil(4       * hostFactor * intensityMult));
+  const ramGb     = Math.max(4, Math.ceil(8       * hostFactor * intensityMult));
+  const storageGb = Math.max(10, Math.ceil(0.5 * data.target_hosts / 1024));
+  const networkMbps = Math.max(10, Math.ceil(data.target_hosts / 100 * intensityMult));
+
+  return {
+    cpu_cores:              cpuCores,
+    ram_gb:                 ramGb,
+    ram_recommended:        Math.ceil(ramGb * 1.5),
+    storage_gb:             storageGb,
+    network_bandwidth_mbps: networkMbps,
+    docker_required:        false,
+    tool_type:              'traditional',
+    scaling_info: {
+      host_factor:            +hostFactor.toFixed(3),
+      intensity_multiplier:   intensityMult,
+      optimized_for:          'scheduled_scanning',
+    },
+  };
+}
+
+function calcTiming(data, vmRes) {
+  const baseScanTime  = vmRes.tool_type === 'hailbytes_asm' ? 1.5 : 2.0; // min/host
+  const timeMult      = TIME_MULT[data.scan_intensity] ?? 1.0;
+
+  const totalScanTime      = baseScanTime * data.target_hosts * timeMult;
+  const parallelHosts      = Math.min(data.target_hosts, vmRes.cpu_cores * 100);
+  const optimizedScanTime  = Math.ceil(totalScanTime / Math.max(1, parallelHosts / 100));
+  const windowUtilization  = Math.min(100, (optimizedScanTime / (data.scan_window * 60)) * 100);
+
+  const efficiencyRating = windowUtilization <= 60 ? 'excellent'
+                         : windowUtilization <= 80 ? 'good'
+                         : windowUtilization <= 95 ? 'acceptable'
+                         : 'poor';
+
+  const bottlenecks = [];
+  if (vmRes.cpu_cores < 4 && data.target_hosts > 1000) bottlenecks.push('cpu_insufficient');
+  if (vmRes.ram_gb < 8 && data.scan_intensity === 'aggressive') bottlenecks.push('memory_constraint');
+  if (data.scan_window < 4 && data.target_hosts > 2000) bottlenecks.push('time_window_too_small');
+
+  const optimizationSuggestions = [];
+  if (windowUtilization > 90) {
+    optimizationSuggestions.push('increase_scan_window');
+    optimizationSuggestions.push('reduce_scan_intensity');
+  }
+  if (data.target_hosts > 5000) optimizationSuggestions.push('implement_distributed_scanning');
+  if (data.scan_intensity === 'aggressive' && data.compliance_needs.length > 0) {
+    optimizationSuggestions.push('schedule_compliance_scans_separately');
+  }
+
+  return {
+    total_scan_time_minutes:     Math.ceil(totalScanTime),
+    optimized_scan_time_minutes: optimizedScanTime,
+    parallel_hosts:              parallelHosts,
+    scan_window_utilization:     +windowUtilization.toFixed(1),
+    performance_metrics: {
+      efficiency_rating:        efficiencyRating,
+      bottleneck_analysis:      bottlenecks,
+      optimization_suggestions: optimizationSuggestions,
+    },
+  };
+}
+
+function calcCosts(vmRes, data) {
+  // Infrastructure
+  const cpuFactor   = vmRes.cpu_cores / 4.0;
+  const ramFactor   = vmRes.ram_gb    / 8.0;
+  const scaleFactor = Math.max(cpuFactor, ramFactor);
+  const hoursPerMonth = 730; // 24 * 30.44 ≈ 730
+
+  const awsCompute   = 0.17 * scaleFactor * hoursPerMonth;
+  const azureCompute = 0.16 * scaleFactor * hoursPerMonth;
+  const awsStorage   = vmRes.storage_gb * 0.10;
+  const azureStorage = vmRes.storage_gb * 0.12;
+
+  const awsMonthly   = Math.ceil(awsCompute   + awsStorage);
+  const azureMonthly = Math.ceil(azureCompute + azureStorage);
+
+  // Tool costs
+  let licensingAnnual   = 0;
+  let managementMonthly = 0;
+  let setupCost         = 0;
+  const toolBreakdown   = {};
+
+  for (const tool of data.scanning_tools) {
+    const lic  = TOOL_LICENSING_ANNUAL[tool]   ?? 0;
+    const mgmt = TOOL_MANAGEMENT_MONTHLY[tool] ?? 300;
+    const sh   = TOOL_SETUP_HOURS[tool]        ?? 8;
+    const sc   = sh * SECURITY_ENGINEER_HOURLY_RATE;
+
+    licensingAnnual   += lic;
+    managementMonthly += mgmt;
+    setupCost         += sc;
+
+    toolBreakdown[tool] = {
+      licensing_annual:         lic,
+      licensing_monthly:        +(lic / 12).toFixed(2),
+      management_monthly:       mgmt,
+      management_hours_monthly: +(mgmt / SECURITY_ENGINEER_HOURLY_RATE).toFixed(1),
+      setup_cost:               sc,
+      setup_hours:              sh,
+      total_monthly:            +((lic / 12) + mgmt).toFixed(2),
+    };
+  }
+
+  const licensingMonthly = +(licensingAnnual / 12).toFixed(2);
+  const totalMonthly     = +(licensingMonthly + managementMonthly).toFixed(2);
+
+  // ROI
+  const hasAsm             = data.scanning_tools.includes('hailbytes_asm');
+  const selfManagedMonthly = awsMonthly + totalMonthly;
+  const selfManagedAnnual  = selfManagedMonthly * 12;
+
+  let roiAnalysis;
+  if (hasAsm) {
+    const monthlySavings = Math.max(0, selfManagedMonthly - MANAGED_SERVICE_MONTHLY_COST);
+    const annualSavings  = monthlySavings * 12;
+    const roiPct         = MANAGED_SERVICE_MONTHLY_COST * 12 > 0
+      ? +((annualSavings / (MANAGED_SERVICE_MONTHLY_COST * 12)) * 100).toFixed(1)
+      : 0;
+
+    roiAnalysis = {
+      self_managed_monthly: +selfManagedMonthly.toFixed(2),
+      self_managed_annual:  +selfManagedAnnual.toFixed(2),
+      managed_monthly:      MANAGED_SERVICE_MONTHLY_COST,
+      managed_annual:       MANAGED_SERVICE_MONTHLY_COST * 12,
+      monthly_savings:      +monthlySavings.toFixed(2),
+      annual_savings:       +annualSavings.toFixed(2),
+      roi_percentage:       roiPct,
+      has_managed_option:   true,
+      setup_cost:           setupCost,
+    };
+  } else {
+    roiAnalysis = {
+      self_managed_monthly: +selfManagedMonthly.toFixed(2),
+      self_managed_annual:  +selfManagedAnnual.toFixed(2),
+      has_managed_option:   false,
+      setup_cost:           setupCost,
+    };
+  }
+
+  return {
+    infrastructure_monthly_aws:   awsMonthly,
+    infrastructure_monthly_azure: azureMonthly,
+    tool_licensing_annual:        licensingAnnual,
+    tool_licensing_monthly:       licensingMonthly,
+    tool_management_monthly:      managementMonthly,
+    tool_setup_cost:              setupCost,
+    total_monthly_aws:            awsMonthly + totalMonthly,
+    total_monthly_azure:          azureMonthly + totalMonthly,
+    roi_analysis:                 roiAnalysis,
+    tool_breakdown:               toolBreakdown,
+  };
+}
+
+function generateRecommendations(data, vmRes) {
+  const recs = [];
+
+  // Tool-specific
+  if (data.scanning_tools.includes('hailbytes_asm')) {
+    recs.push('HailBytes ASM excels at continuous attack surface management — consider daily or weekly scanning for optimal coverage');
+    recs.push('Ensure Docker is properly secured and regularly updated for HailBytes ASM deployment');
+    recs.push('Configure asset data retention policies to manage storage growth effectively');
+    recs.push('Consider the HailBytes ASM managed service to eliminate infrastructure setup and maintenance overhead');
+  }
+  if (data.scanning_tools.includes('openvas')) {
+    recs.push('OpenVAS requires regular feed updates — schedule automatic vulnerability database updates');
+    recs.push('Consider OpenVAS enterprise support for production environments');
+  }
+  if (data.scanning_tools.length > 1) {
+    recs.push('Multiple scanning tools detected — implement result correlation and deduplication');
+  }
+  if (!data.scanning_tools.includes('hailbytes_asm')) {
+    recs.push('Consider HailBytes ASM for continuous attack surface visibility alongside point-in-time scanning tools');
+  }
+
+  // Scale
+  if (data.target_hosts > 10000) {
+    recs.push('Large environment detected — consider distributed scanning architecture');
+    recs.push('Implement network segmentation-aware scanning strategies');
+  }
+  if (vmRes.cpu_cores > 16) recs.push('High CPU requirement — multiple smaller scanner instances may provide better performance');
+  if (vmRes.ram_gb > 32)    recs.push('High memory requirement — consider memory optimization and result streaming');
+
+  // Performance
+  if (data.scan_intensity === 'aggressive') {
+    recs.push('Aggressive scanning — implement scan throttling during business hours');
+    recs.push('Monitor target system impact and adjust scan policies accordingly');
+  }
+  if (data.scan_window < 6)            recs.push('Short scan window detected — consider extending maintenance windows for comprehensive scanning');
+  if (data.scan_frequency === 'daily') recs.push('Daily scanning requires robust infrastructure — ensure adequate monitoring and alerting');
+
+  // Compliance
+  if (data.compliance_needs.length > 2) {
+    recs.push('Multiple compliance requirements — implement centralized reporting dashboard');
+    recs.push('Consider compliance-specific scan scheduling to meet different requirements');
+  }
+  if (data.compliance_needs.includes('pci'))  recs.push('PCI DSS requires quarterly external scans by approved scanning vendor (ASV)');
+  if (data.compliance_needs.includes('nist')) recs.push('NIST framework — integrate vulnerability management with risk assessment processes');
+
+  // Security baseline
+  recs.push('Implement network segmentation for scanner placement and access control');
+  recs.push('Regular scanner patching and security hardening is essential');
+  recs.push('Use encrypted channels for scan result transmission and storage');
+  if (vmRes.docker_required)    recs.push('Docker security: regularly update base images and implement container security scanning');
+  if (data.target_hosts > 1000) recs.push('Large target environment — implement scan result encryption and secure storage');
+
+  return [...new Set(recs)]; // deduplicate
+}
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const STYLES = `
+  :host {
+    --accent:       #ff6b35;
+    --accent-hover: #e85d2a;
+    --bg:           #1a1a2e;
+    --bg-card:      #16213e;
+    --bg-input:     #0f3460;
+    --border:       #2a2a4a;
+    --text:         #e8e8f0;
+    --text-muted:   #8888aa;
+    --success:      #4caf50;
+    --warning:      #ff9800;
+    --info:         #2196f3;
+    --radius:       10px;
+    display: block;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    color: var(--text);
+    background: var(--bg);
+    border-radius: 16px;
+    overflow: hidden;
+  }
+  :host([theme="light"]) {
+    --bg:        #f5f5f5;
+    --bg-card:   #ffffff;
+    --bg-input:  #f0f0f8;
+    --border:    #ddd;
+    --text:      #1a1a2e;
+    --text-muted:#555570;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  :host([branding="off"]) .hb-branding,
+  :host([branding="off"]) .hailbytes-badge { display: none; }
+
+  /* Footer */
+  .hb-footer {
+    padding: 14px 32px;
+    text-align: center;
+    font-size: 0.82rem;
+    color: var(--text-muted);
+    border-top: 1px solid var(--border);
+  }
+  .hb-footer a {
+    color: var(--accent);
+    text-decoration: none;
+    font-weight: 600;
+  }
+  .hb-footer a:hover { text-decoration: underline; }
+
+  /* Header */
+  .header {
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+    padding: 28px 32px 20px;
+    border-bottom: 2px solid var(--accent);
+  }
+  .header h1 {
+    font-size: 1.45rem; font-weight: 700; color: #fff;
+    display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
+  }
+  .header h1 .icon { color: var(--accent); }
+  .header p { color: #aab; font-size: 0.87rem; }
+  .hailbytes-badge {
+    display: inline-block; background: var(--accent); color: #fff;
+    font-size: 0.64rem; font-weight: 700; letter-spacing: 1px;
+    padding: 2px 8px; border-radius: 4px; vertical-align: middle;
+    margin-left: 4px; text-transform: uppercase;
+  }
+
+  /* Layout */
+  .body { display: grid; grid-template-columns: 300px 1fr; min-height: 480px; }
+  @media (max-width: 700px) { .body { grid-template-columns: 1fr; } }
+
+  /* Form panel */
+  .form-panel {
+    padding: 24px;
+    background: var(--bg-card);
+    border-right: 1px solid var(--border);
+    display: flex; flex-direction: column; gap: 16px;
+  }
+  @media (max-width: 700px) { .form-panel { border-right: none; border-bottom: 1px solid var(--border); } }
+
+  .section-label {
+    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
+    letter-spacing: 0.8px; color: var(--accent); margin-bottom: 8px;
+  }
+  .field { display: flex; flex-direction: column; gap: 5px; }
+  label.field-label {
+    font-size: 0.79rem; font-weight: 600; color: var(--text-muted);
+    text-transform: uppercase; letter-spacing: 0.4px;
+  }
+
+  input[type="number"], select {
+    background: var(--bg-input); border: 1px solid var(--border);
+    border-radius: 8px; color: var(--text); font-size: 0.93rem;
+    padding: 9px 12px; width: 100%; outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    appearance: none; -webkit-appearance: none;
+  }
+  input[type="number"]:focus, select:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(255,107,53,0.2);
+  }
+  select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6b35'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat; background-position: right 8px center;
+    background-size: 20px; padding-right: 32px; cursor: pointer;
+  }
+  select option { background: #1a1a2e; color: #e8e8f0; }
+
+  /* Checkbox groups */
+  .cb-list { display: flex; flex-direction: column; gap: 4px; }
+  .cb-item {
+    display: flex; align-items: center; gap: 8px;
+    background: var(--bg-input); border: 1px solid var(--border);
+    border-radius: 6px; padding: 7px 10px; cursor: pointer;
+    transition: border-color 0.2s; user-select: none; font-size: 0.84rem;
+  }
+  .cb-item:hover { border-color: var(--accent); }
+  .cb-item.checked { border-color: var(--accent); background: rgba(255,107,53,0.07); }
+  .cb-item input[type="checkbox"] {
+    width: 15px; height: 15px; accent-color: var(--accent);
+    cursor: pointer; flex-shrink: 0;
+  }
+
+  /* Calculate button */
+  .calc-btn {
+    display: flex; align-items: center; justify-content: center; gap: 8px;
+    width: 100%; padding: 12px; border: none; border-radius: 8px;
+    background: var(--accent); color: #fff; font-size: 0.97rem;
+    font-weight: 700; cursor: pointer; transition: all 0.2s; margin-top: 4px;
+  }
+  .calc-btn:hover {
+    background: var(--accent-hover);
+    box-shadow: 0 4px 16px rgba(255,107,53,0.4);
+    transform: translateY(-1px);
+  }
+
+  /* Results panel */
+  .results-panel {
+    padding: 24px;
+    background: var(--bg);
+    overflow-y: auto;
+  }
+  .results-placeholder {
+    display: flex; flex-direction: column; align-items: center;
+    justify-content: center; height: 100%; gap: 12px;
+    color: var(--text-muted); text-align: center; padding: 40px;
+  }
+  .results-placeholder .big-icon { font-size: 3rem; opacity: 0.3; }
+  .results-placeholder p { font-size: 0.9rem; }
+
+  /* Cards */
+  .cards-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+  }
+  @media (max-width: 480px) { .cards-grid { grid-template-columns: 1fr; } }
+
+  .card {
+    background: var(--bg-card); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 16px;
+  }
+  .card.full-width { grid-column: 1 / -1; }
+  .card.accent-border { border-color: var(--accent); }
+  .card.roi-card {
+    grid-column: 1 / -1;
+    background: rgba(255,107,53,0.05);
+    border-color: var(--accent);
+  }
+
+  .card-title {
+    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
+    letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 12px;
+    display: flex; align-items: center; gap: 6px;
+  }
+  .card-title .icon { font-size: 1rem; }
+
+  .metric-row {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem;
+  }
+  .metric-row:last-child { border-bottom: none; }
+  .metric-label { color: var(--text-muted); }
+  .metric-value { color: var(--text); font-weight: 600; }
+  .metric-value.accent { color: var(--accent); }
+  .metric-value.success { color: var(--success); }
+  .metric-value.warning { color: var(--warning); }
+
+  /* Efficiency badge */
+  .badge {
+    display: inline-block; padding: 2px 10px; border-radius: 12px;
+    font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
+  }
+  .badge.excellent { background: rgba(76,175,80,0.15); color: var(--success); }
+  .badge.good      { background: rgba(33,150,243,0.15); color: var(--info); }
+  .badge.acceptable{ background: rgba(255,152,0,0.15); color: var(--warning); }
+  .badge.poor      { background: rgba(244,67,54,0.15); color: #f44336; }
+
+  /* ROI comparison */
+  .roi-compare {
+    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px;
+  }
+  @media (max-width: 400px) { .roi-compare { grid-template-columns: 1fr; } }
+  .roi-side {
+    padding: 12px; border-radius: 8px; border: 1px solid var(--border);
+    text-align: center;
+  }
+  .roi-side.managed { border-color: var(--success); background: rgba(76,175,80,0.05); }
+  .roi-side h4 { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 8px; }
+  .roi-price {
+    font-size: 1.5rem; font-weight: 800; color: var(--text); margin-bottom: 4px;
+  }
+  .roi-side.managed .roi-price { color: var(--success); }
+  .roi-savings {
+    margin-top: 10px; padding: 10px; background: rgba(76,175,80,0.08);
+    border-radius: 6px; text-align: center; font-size: 0.84rem; color: var(--success);
+    font-weight: 700;
+  }
+
+  /* Recommendations */
+  .rec-list {
+    list-style: none; display: flex; flex-direction: column; gap: 6px;
+    margin-top: 4px;
+  }
+  .rec-list li {
+    display: flex; gap: 8px; font-size: 0.83rem; color: var(--text);
+    background: var(--bg-input); padding: 8px 10px; border-radius: 6px;
+    border-left: 3px solid var(--accent);
+  }
+  .rec-list li::before { content: '→'; color: var(--accent); flex-shrink: 0; }
+`;
+
+// ─── Template ─────────────────────────────────────────────────────────────────
+
+const TMPL = document.createElement('template');
+TMPL.innerHTML = `<style>${STYLES}</style>
+<div class="header">
+  <h1><span class="icon">🔍</span> Vulnerability Scanner Infrastructure Calculator <span class="hailbytes-badge">HailBytes</span></h1>
+  <p>Size your scanning infrastructure — estimate VM requirements, cloud costs, and ROI entirely in the browser</p>
+</div>
+
+<div class="body">
+  <!-- FORM PANEL -->
+  <div class="form-panel">
+
+    <div>
+      <div class="section-label">🎯 Target</div>
+      <div class="field">
+        <label class="field-label" for="target_hosts">Target Hosts</label>
+        <input type="number" id="target_hosts" min="1" max="50000" value="1000" placeholder="e.g. 1000">
+      </div>
+    </div>
+
+    <div>
+      <div class="section-label">⚡ Scan Config</div>
+      <div class="field" style="margin-bottom:8px">
+        <label class="field-label" for="scan_intensity">Intensity</label>
+        <select id="scan_intensity">
+          <option value="light">Light</option>
+          <option value="medium" selected>Medium</option>
+          <option value="aggressive">Aggressive</option>
+          <option value="continuous">Continuous</option>
+        </select>
+      </div>
+      <div class="field" style="margin-bottom:8px">
+        <label class="field-label" for="scan_frequency">Frequency</label>
+        <select id="scan_frequency">
+          <option value="daily">Daily</option>
+          <option value="weekly" selected>Weekly</option>
+          <option value="monthly">Monthly</option>
+          <option value="quarterly">Quarterly</option>
+        </select>
+      </div>
+      <div class="field">
+        <label class="field-label" for="scan_window">Scan Window (hours)</label>
+        <input type="number" id="scan_window" min="1" max="24" value="8" placeholder="1–24">
+      </div>
+    </div>
+
+    <div>
+      <div class="section-label">🛠️ Scanning Tools</div>
+      <div class="cb-list" id="tools-list">
+        <label class="cb-item checked">
+          <input type="checkbox" name="tool" value="hailbytes_asm" checked>HailBytes ASM (free, self-hosted)
+        </label>
+        <label class="cb-item">
+          <input type="checkbox" name="tool" value="openvas">OpenVAS (free)
+        </label>
+        <label class="cb-item">
+          <input type="checkbox" name="tool" value="nessus_professional">Nessus Professional
+        </label>
+        <label class="cb-item">
+          <input type="checkbox" name="tool" value="qualys_vmdr">Qualys VMDR
+        </label>
+      </div>
+    </div>
+
+    <div>
+      <div class="section-label">📋 Compliance</div>
+      <div class="cb-list" id="compliance-list">
+        <label class="cb-item"><input type="checkbox" name="compliance" value="pci">PCI DSS</label>
+        <label class="cb-item"><input type="checkbox" name="compliance" value="hipaa">HIPAA</label>
+        <label class="cb-item"><input type="checkbox" name="compliance" value="nist">NIST</label>
+        <label class="cb-item"><input type="checkbox" name="compliance" value="iso27001">ISO 27001</label>
+        <label class="cb-item"><input type="checkbox" name="compliance" value="soc2">SOC 2</label>
+      </div>
+    </div>
+
+    <button class="calc-btn" id="calc-btn">⚡ Calculate Infrastructure</button>
+  </div>
+
+  <!-- RESULTS PANEL -->
+  <div class="results-panel" id="results-panel">
+    <div class="results-placeholder" id="placeholder">
+      <div class="big-icon">🖥️</div>
+      <p>Configure your scan parameters and click <strong>Calculate Infrastructure</strong> to size your VM requirements.</p>
+    </div>
+    <div id="results-content" style="display:none">
+      <div class="cards-grid" id="cards"></div>
+    </div>
+  </div>
+  <div class="hb-footer hb-branding">
+    by <a href="https://hailbytes.com/asm" target="_blank" rel="noopener">HailBytes</a> — managed attack surface management
+  </div>
+</div>`;
+
+// ─── Web Component ────────────────────────────────────────────────────────────
+
+class HailbytesVulnCalculator extends HTMLElement {
+  static get observedAttributes() { return ['theme', 'branding']; }
+
+  constructor() {
+    super();
+    this._shadow = this.attachShadow({ mode: 'open' });
+    this._shadow.appendChild(TMPL.content.cloneNode(true));
+    this._lastResult = null;
+  }
+
+  connectedCallback() {
+    this._bindEvents();
+  }
+
+  _bindEvents() {
+    const s = this._shadow;
+    s.getElementById('calc-btn').addEventListener('click', () => this._run());
+
+    // Checkbox visual state
+    s.querySelectorAll('.cb-item input[type="checkbox"]').forEach(cb => {
+      cb.addEventListener('change', () => {
+        cb.closest('.cb-item').classList.toggle('checked', cb.checked);
+      });
+    });
+  }
+
+  _collectInputs() {
+    const s = this._shadow;
+    return {
+      target_hosts:     Math.min(50000, Math.max(1, parseInt(s.getElementById('target_hosts').value) || 1000)),
+      scan_intensity:   s.getElementById('scan_intensity').value,
+      scan_frequency:   s.getElementById('scan_frequency').value,
+      scan_window:      Math.min(24, Math.max(1, parseInt(s.getElementById('scan_window').value) || 8)),
+      scanning_tools:   [...s.querySelectorAll('input[name="tool"]:checked')].map(c => c.value),
+      compliance_needs: [...s.querySelectorAll('input[name="compliance"]:checked')].map(c => c.value),
+    };
+  }
+
+  _run() {
+    const data = this._collectInputs();
+    if (data.scanning_tools.length === 0) {
+      data.scanning_tools = ['openvas']; // fallback
+    }
+
+    const result = calculateResources(data);
+    this._lastResult = result;
+    this._render(result);
+
+    this.dispatchEvent(new CustomEvent('vuln-calculated', {
+      bubbles: true, composed: true, detail: result
+    }));
+  }
+
+  _render(r) {
+    const s = this._shadow;
+    s.getElementById('placeholder').style.display = 'none';
+    const content = s.getElementById('results-content');
+    content.style.display = 'block';
+
+    const vm  = r.vm_resources;
+    const t   = r.timing;
+    const c   = r.costs;
+    const eff = t.performance_metrics.efficiency_rating;
+    const util = t.scan_window_utilization;
+
+    const fmtMin = m => m >= 60
+      ? `${Math.floor(m/60)}h ${m % 60}m`
+      : `${m}m`;
+
+    const roiCard = r.has_asm ? `
+      <div class="card roi-card full-width">
+        <div class="card-title"><span class="icon">💰</span> ROI: Self-Managed vs HailBytes ASM Managed Service</div>
+        <div class="roi-compare">
+          <div class="roi-side">
+            <h4>Self-Managed (Cloud + Tools)</h4>
+            <div class="roi-price">$${c.roi_analysis.self_managed_monthly.toLocaleString()}/mo</div>
+            <div style="font-size:0.78rem;color:var(--text-muted)">$${c.roi_analysis.self_managed_annual.toLocaleString()}/yr</div>
+          </div>
+          <div class="roi-side managed">
+            <h4>HailBytes ASM Managed Service</h4>
+            <div class="roi-price">$${c.roi_analysis.managed_monthly.toLocaleString()}/mo</div>
+            <div style="font-size:0.78rem;color:var(--text-muted)">$${c.roi_analysis.managed_annual.toLocaleString()}/yr</div>
+          </div>
+        </div>
+        ${c.roi_analysis.monthly_savings > 0 ? `
+        <div class="roi-savings">
+          💚 Save $${c.roi_analysis.monthly_savings.toLocaleString()}/month ($${c.roi_analysis.annual_savings.toLocaleString()}/year) with HailBytes ASM managed service
+          ${c.roi_analysis.roi_percentage > 0 ? ` — ${c.roi_analysis.roi_percentage}% ROI` : ''}
+        </div>` : ''}
+      </div>` : '';
+
+    const toolCostRows = Object.entries(c.tool_breakdown).map(([tool, tb]) => `
+      <div class="metric-row">
+        <span class="metric-label">${this._toolLabel(tool)}</span>
+        <span class="metric-value">$${tb.licensing_annual > 0 ? tb.licensing_annual.toLocaleString() + '/yr' : 'Free'} + $${tb.management_monthly}/mo mgmt</span>
+      </div>`).join('');
+
+    const recItems = r.recommendations.slice(0, 8).map(rec => `<li>${rec}</li>`).join('');
+
+    const cards = s.getElementById('cards');
+    cards.innerHTML = `
+      <!-- VM Requirements -->
+      <div class="card">
+        <div class="card-title"><span class="icon">🖥️</span> VM Requirements</div>
+        <div class="metric-row">
+          <span class="metric-label">CPU Cores</span>
+          <span class="metric-value accent">${vm.cpu_cores} cores</span>
+        </div>
+        <div class="metric-row">
+          <span class="metric-label">RAM (minimum)</span>
+          <span class="metric-value">${vm.ram_gb} GB</span>
+        </div>
+        <div class="metric-row">
+          <span class="metric-label">RAM (recommended)</span>
+          <span class="metric-value accent">${vm.ram_recommended} GB</span>
+        </div>
+        <div class="metric-row">
+          <span class="metric-label">Storage</span>
+          <span class="metric-value">${vm.storage_gb} GB</span>
+        </div>
+        <div class="metric-row">
+          <span class="metric-label">Network Bandwidth</span>
+          <span class="metric-value">${vm.network_bandwidth_mbps} Mbps</span>
+        </div>
+        ${vm.docker_required ? '<div class="metric-row"><span class="metric-label">Docker</span><span class="metric-value accent">Required</span></div>' : ''}
+      </div>
+
+      <!-- Timing -->
+      <div class="card">
+        <div class="card-title"><span class="icon">⏱️</span> Scan Timing</div>
+        <div class="metric-row">
+          <span class="metric-label">Total scan time</span>
+          <span class="metric-value">${fmtMin(t.total_scan_time_minutes)}</span>
+        </div>
+        <div class="metric-row">
+          <span class="metric-label">Optimized (parallel)</span>
+          <span class="metric-value accent">${fmtMin(t.optimized_scan_time_minutes)}</span>
+        </div>
+        <div class="metric-row">
+          <span class="metric-label">Parallel hosts</span>
+          <span class="metric-value">${t.parallel_hosts.toLocaleString()}</span>
+        </div>
+        <div class="metric-row">
+          <span class="metric-label">Window utilization</span>
+          <span class="metric-value ${util > 95 ? 'warning' : ''}">${util}%</span>
+        </div>
+        <div class="metric-row">
+          <span class="metric-label">Efficiency</span>
+          <span class="metric-value"><span class="badge ${eff}">${eff}</span></span>
+        </div>
+      </div>
+
+      <!-- Infrastructure Cost -->
+      <div class="card">
+        <div class="card-title"><span class="icon">☁️</span> Compute Cost</div>
+        <div class="metric-row">
+          <span class="metric-label">AWS (monthly)</span>
+          <span class="metric-value accent">$${c.infrastructure_monthly_aws.toLocaleString()}</span>
+        </div>
+        <div class="metric-row">
+          <span class="metric-label">Azure (monthly)</span>
+          <span class="metric-value">$${c.infrastructure_monthly_azure.toLocaleString()}</span>
+        </div>
+        <div class="metric-row">
+          <span class="metric-label">Total (AWS + tools)</span>
+          <span class="metric-value">$${c.total_monthly_aws.toLocaleString()}/mo</span>
+        </div>
+        <div class="metric-row">
+          <span class="metric-label">Total (Azure + tools)</span>
+          <span class="metric-value">$${c.total_monthly_azure.toLocaleString()}/mo</span>
+        </div>
+      </div>
+
+      <!-- Tool Licensing -->
+      <div class="card">
+        <div class="card-title"><span class="icon">🔧</span> Tool Costs</div>
+        <div class="metric-row">
+          <span class="metric-label">Licensing (annual)</span>
+          <span class="metric-value accent">$${c.tool_licensing_annual.toLocaleString()}</span>
+        </div>
+        <div class="metric-row">
+          <span class="metric-label">Management (monthly)</span>
+          <span class="metric-value">$${c.tool_management_monthly.toLocaleString()}</span>
+        </div>
+        <div class="metric-row">
+          <span class="metric-label">Setup cost (one-time)</span>
+          <span class="metric-value">$${c.tool_setup_cost.toLocaleString()}</span>
+        </div>
+        ${toolCostRows}
+      </div>
+
+      ${roiCard}
+
+      <!-- Recommendations -->
+      <div class="card full-width">
+        <div class="card-title"><span class="icon">💡</span> Recommendations</div>
+        <ul class="rec-list">${recItems}</ul>
+      </div>
+    `;
+  }
+
+  _toolLabel(tool) {
+    const labels = {
+      hailbytes_asm:        'HailBytes ASM',
+      openvas:              'OpenVAS',
+      nessus_professional:  'Nessus Professional',
+      qualys_vmdr:          'Qualys VMDR',
+    };
+    return labels[tool] || tool;
+  }
+}
+
+customElements.define('hailbytes-vuln-calculator', HailbytesVulnCalculator);
+
+export default HailbytesVulnCalculator;
+export { HailbytesVulnCalculator, calculateResources as calculate };