{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "vulnerability-scanner-report",
  "title": "Vulnerability Scanner Report",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/vulnerability-scanner-report/VulnerabilityScannerReport.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  AlertCircle,\n  AlertTriangle,\n  Check,\n  CheckCircle2,\n  Copy,\n  Download,\n  ExternalLink,\n  FileCode2,\n  GitPullRequest,\n  Info,\n  Package,\n  RefreshCw,\n  Search,\n  ShieldAlert,\n  ShieldCheck,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Progress } from '@/components/ui/progress'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n} from '@/components/ui/sheet'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport type CveSeverity = 'critical' | 'high' | 'medium' | 'low'\nexport type ExploitStatus = 'poc' | 'none'\n\nexport interface CveItem {\n  id: string\n  title: string\n  cwe: string\n  severity: CveSeverity\n  cvssScore: number\n  cvssVector: string\n  pkgName: string\n  installedVersion: string\n  fixedVersion: string\n  exploitStatus: ExploitStatus\n  exploitLabel: string\n  attackVector: string\n  attackComplexity: string\n  privilegesRequired: string\n  userInteraction: string\n  description: string\n  impact: string\n  remediationDiff: {\n    removed: string\n    added: string\n  }\n  patchCommand: string\n  advisoryUrl: string\n}\n\nexport interface VulnerabilityScannerReportProps {\n  targetRepo?: string\n  targetBranch?: string\n  baseImage?: string\n  lastScanned?: string\n  grade?: string\n  gradeSummary?: string\n  totalDeps?: number\n  items?: CveItem[]\n  class?: HTMLAttributes['class']\n}\n\nconst defaultCveItems: CveItem[] = [\n  {\n    id: 'CVE-2026-38419',\n    title: 'Prototype Pollution via mergeCustomizer in lodash',\n    cwe: 'CWE-1321',\n    severity: 'high',\n    cvssScore: 8.4,\n    cvssVector: 'CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:H/I:H/A:N',\n    pkgName: 'lodash',\n    installedVersion: '4.17.20',\n    fixedVersion: '4.17.22+',\n    exploitStatus: 'poc',\n    exploitLabel: 'Proof of Concept available',\n    attackVector: 'Network (Remote)',\n    attackComplexity: 'Low',\n    privilegesRequired: 'None',\n    userInteraction: 'None',\n    description:\n      'A prototype pollution vulnerability in lodash prior to 4.17.22 allows unauthenticated remote attackers to modify Object.prototype properties via crafted JSON payloads, leading to denial of service or potential remote code execution.',\n    impact: 'Critical data integrity failure and property tampering across server runtime objects.',\n    remediationDiff: {\n      removed: '  \"lodash\": \"^4.17.20\",',\n      added: '  \"lodash\": \"^4.17.22\",',\n    },\n    patchCommand: 'npm install lodash@^4.17.22 --save-exact',\n    advisoryUrl: 'https://nvd.nist.gov/vuln/detail/CVE-2026-38419',\n  },\n  {\n    id: 'CVE-2026-29401',\n    title: 'Server-Side Request Forgery (SSRF) bypass in axios redirect handler',\n    cwe: 'CWE-918',\n    severity: 'high',\n    cvssScore: 7.8,\n    cvssVector: 'CVSS:3.1/AV:N/AC:L/PR:N/UI:R/S:C/C:H/I:N/A:N',\n    pkgName: 'axios',\n    installedVersion: '1.6.2',\n    fixedVersion: '1.7.9+',\n    exploitStatus: 'poc',\n    exploitLabel: 'Proof of Concept available',\n    attackVector: 'Network (Remote)',\n    attackComplexity: 'Low',\n    privilegesRequired: 'None',\n    userInteraction: 'Required',\n    description:\n      'Axios versions <=1.6.8 improperly preserve sensitive Authorization and Cookie headers during cross-origin HTTP 302/307 redirects, exposing upstream credentials to untrusted third-party endpoints.',\n    impact: 'Authorization bearer token leakage to arbitrary redirect targets.',\n    remediationDiff: {\n      removed: '  \"axios\": \"^1.6.2\",',\n      added: '  \"axios\": \"^1.7.9\",',\n    },\n    patchCommand: 'npm install axios@^1.7.9 --save-exact',\n    advisoryUrl: 'https://nvd.nist.gov/vuln/detail/CVE-2026-29401',\n  },\n  {\n    id: 'CVE-2026-10492',\n    title: 'Arbitrary File Overwrite via hardlink traversal in tar',\n    cwe: 'CWE-59',\n    severity: 'medium',\n    cvssScore: 6.5,\n    cvssVector: 'CVSS:3.1/AV:L/AC:L/PR:N/UI:R/S:U/C:N/I:H/A:H',\n    pkgName: 'tar',\n    installedVersion: '6.1.11',\n    fixedVersion: '6.2.1+',\n    exploitStatus: 'none',\n    exploitLabel: 'No known exploit',\n    attackVector: 'Local Archive Extraction',\n    attackComplexity: 'Low',\n    privilegesRequired: 'None',\n    userInteraction: 'Required',\n    description:\n      'The tar package before 6.2.1 is vulnerable to arbitrary file write outside the extraction destination directory when untrusted tar archives contain hardlinks pointing to symlinked directories.',\n    impact: 'Arbitrary filesystem overwrite upon unpacking unvetted tarball artifacts.',\n    remediationDiff: {\n      removed: '  \"tar\": \"^6.1.11\",',\n      added: '  \"tar\": \"^6.2.1\",',\n    },\n    patchCommand: 'npm install tar@^6.2.1 --save-exact',\n    advisoryUrl: 'https://nvd.nist.gov/vuln/detail/CVE-2026-10492',\n  },\n  {\n    id: 'CVE-2026-84920',\n    title: 'Signature verification bypass via algorithm confusion in jsonwebtoken',\n    cwe: 'CWE-347',\n    severity: 'medium',\n    cvssScore: 6.1,\n    cvssVector: 'CVSS:3.1/AV:N/AC:H/PR:N/UI:N/S:U/C:H/I:L/A:N',\n    pkgName: 'jsonwebtoken',\n    installedVersion: '8.5.1',\n    fixedVersion: '9.0.2+',\n    exploitStatus: 'poc',\n    exploitLabel: 'Proof of Concept available',\n    attackVector: 'Network (Remote)',\n    attackComplexity: 'High',\n    privilegesRequired: 'None',\n    userInteraction: 'None',\n    description:\n      'When jwt.verify() is executed without explicit algorithms whitelisting, attackers can forge unsigned tokens or switch asymmetric RS256 keys to symmetric HMAC evaluation with public certs.',\n    impact: 'Unauthorized identity impersonation and claim forgery.',\n    remediationDiff: {\n      removed: '  \"jsonwebtoken\": \"^8.5.1\",',\n      added: '  \"jsonwebtoken\": \"^9.0.2\",',\n    },\n    patchCommand: 'npm install jsonwebtoken@^9.0.2 --save-exact',\n    advisoryUrl: 'https://nvd.nist.gov/vuln/detail/CVE-2026-84920',\n  },\n  {\n    id: 'CVE-2026-18933',\n    title: 'Regular Expression Denial of Service (ReDoS) in micromatch',\n    cwe: 'CWE-1333',\n    severity: 'medium',\n    cvssScore: 5.3,\n    cvssVector: 'CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:N/I:N/A:L',\n    pkgName: 'micromatch',\n    installedVersion: '4.0.5',\n    fixedVersion: '4.0.8+',\n    exploitStatus: 'none',\n    exploitLabel: 'No known exploit',\n    attackVector: 'Network (Remote)',\n    attackComplexity: 'Low',\n    privilegesRequired: 'None',\n    userInteraction: 'None',\n    description:\n      'A backtracking exponential regular expression in micromatch path globbing allows attackers sending crafted nested brace expressions to cause catastrophic CPU exhaustion and event loop freeze.',\n    impact: 'Node.js main thread event-loop starvation and service unresponsiveness.',\n    remediationDiff: {\n      removed: '  \"micromatch\": \"^4.0.5\",',\n      added: '  \"micromatch\": \"^4.0.8\",',\n    },\n    patchCommand: 'npm install micromatch@^4.0.8 --save-exact',\n    advisoryUrl: 'https://nvd.nist.gov/vuln/detail/CVE-2026-18933',\n  },\n  {\n    id: 'CVE-2026-04192',\n    title: 'Information disclosure in child process error serialization in cross-spawn',\n    cwe: 'CWE-209',\n    severity: 'low',\n    cvssScore: 3.7,\n    cvssVector: 'CVSS:3.1/AV:L/AC:H/PR:L/UI:N/S:U/C:L/I:N/A:N',\n    pkgName: 'cross-spawn',\n    installedVersion: '7.0.3',\n    fixedVersion: '7.0.6+',\n    exploitStatus: 'none',\n    exploitLabel: 'No known exploit',\n    attackVector: 'Local Environment',\n    attackComplexity: 'High',\n    privilegesRequired: 'Low',\n    userInteraction: 'None',\n    description:\n      'Under verbose debug logging configurations, command environment variables containing auth tokens may be included in uncaught spawn error stacks printed to stdout.',\n    impact: 'Accidental leakage of process environment credentials in CI runner logs.',\n    remediationDiff: {\n      removed: '  \"cross-spawn\": \"^7.0.3\",',\n      added: '  \"cross-spawn\": \"^7.0.6\",',\n    },\n    patchCommand: 'npm install cross-spawn@^7.0.6 --save-exact',\n    advisoryUrl: 'https://nvd.nist.gov/vuln/detail/CVE-2026-04192',\n  },\n]\n\nconst props = withDefaults(defineProps<VulnerabilityScannerReportProps>(), {\n  targetRepo: 'uipkge / core-registry:v2.4',\n  targetBranch: 'main (git:a4f891b)',\n  baseImage: 'node:22-alpine3.20',\n  lastScanned: 'Scanned 12m ago via Trivy v0.52',\n  grade: 'Grade B+',\n  gradeSummary: '2 High CVEs',\n  totalDeps: 1284,\n})\n\nconst activeItems = computed(() => props.items ?? defaultCveItems)\n\nconst searchQuery = ref('')\nconst severityFilter = ref<string>('all')\nconst exploitFilter = ref<string>('all')\nconst isScanning = ref(false)\nconst scanProgress = ref(100)\nconst currentLastScanned = ref(props.lastScanned)\nconst selectedCve = ref<CveItem | null>(null)\nconst isDrawerOpen = ref(false)\nconst copiedCveId = ref<string | null>(null)\nconst fixedPrs = ref<Record<string, boolean>>({})\nconst exportSuccess = ref(false)\n\nconst summaryCounts = computed(() => {\n  const all = activeItems.value\n  return {\n    critical: all.filter((i) => i.severity === 'critical').length,\n    high: all.filter((i) => i.severity === 'high').length,\n    medium: 5, // Display total detected across all direct/transitive trees\n    low: 12, // Display total detected across all direct/transitive trees\n    total: all.length,\n  }\n})\n\nconst filteredItems = computed(() => {\n  const query = searchQuery.value.trim().toLowerCase()\n  return activeItems.value.filter((item) => {\n    const matchesSeverity = severityFilter.value === 'all' || item.severity === severityFilter.value\n    const matchesExploit = exploitFilter.value === 'all' || item.exploitStatus === exploitFilter.value\n    const matchesSearch =\n      !query ||\n      item.id.toLowerCase().includes(query) ||\n      item.pkgName.toLowerCase().includes(query) ||\n      item.title.toLowerCase().includes(query) ||\n      item.cwe.toLowerCase().includes(query)\n\n    return matchesSeverity && matchesExploit && matchesSearch\n  })\n})\n\nfunction triggerRescan() {\n  if (isScanning.value) return\n  isScanning.value = true\n  scanProgress.value = 15\n\n  const interval = setInterval(() => {\n    if (scanProgress.value < 90) {\n      scanProgress.value += 25\n    }\n  }, 150)\n\n  setTimeout(() => {\n    clearInterval(interval)\n    scanProgress.value = 100\n    isScanning.value = false\n    currentLastScanned.value = 'Scanned just now via Trivy v0.52'\n  }, 800)\n}\n\nfunction openAdvisory(cve: CveItem) {\n  selectedCve.value = cve\n  isDrawerOpen.value = true\n}\n\nfunction resetFilters() {\n  severityFilter.value = 'all'\n  exploitFilter.value = 'all'\n  searchQuery.value = ''\n}\n\nfunction handleAutoFix(cveId: string) {\n  fixedPrs.value[cveId] = true\n}\n\nfunction copyCommand(cveId: string, command: string) {\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText(command)\n    copiedCveId.value = cveId\n    setTimeout(() => {\n      if (copiedCveId.value === cveId) {\n        copiedCveId.value = null\n      }\n    }, 2000)\n  }\n}\n\nfunction exportSbom() {\n  const sbomData = {\n    spdxVersion: 'SPDX-2.3',\n    dataLicense: 'CC0-1.0',\n    SPDXID: 'SPDXRef-DOCUMENT',\n    name: 'uipkge-core-registry-sbom',\n    documentNamespace: 'https://uipkge.dev/spdxdocs/core-registry-v2.4',\n    creationInfo: {\n      created: new Date().toISOString(),\n      creators: ['Tool: Trivy-v0.52', 'Organization: UIPKGE Security Squad'],\n    },\n    packages: (props.items || []).map((item) => ({\n      name: item.pkgName,\n      SPDXID: `SPDXRef-Package-${item.pkgName}`,\n      versionInfo: item.installedVersion,\n      downloadLocation: `https://registry.npmjs.org/${item.pkgName}/-/${item.pkgName}-${item.installedVersion}.tgz`,\n      filesAnalyzed: false,\n      securityVulnerabilities: [\n        {\n          id: item.id,\n          severity: item.severity.toUpperCase(),\n          cvssScore: item.cvssScore,\n          remediation: item.fixedVersion,\n        },\n      ],\n    })),\n  }\n\n  const jsonStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(sbomData, null, 2))\n  if (typeof document !== 'undefined') {\n    const downloadAnchor = document.createElement('a')\n    downloadAnchor.setAttribute('href', jsonStr)\n    downloadAnchor.setAttribute('download', `sbom-spdx-core-registry-${new Date().toISOString().slice(0, 10)}.json`)\n    document.body.appendChild(downloadAnchor)\n    downloadAnchor.click()\n    downloadAnchor.remove()\n\n    exportSuccess.value = true\n    setTimeout(() => {\n      exportSuccess.value = false\n    }, 2000)\n  }\n}\n\nfunction setSeverityFilter(sev: string) {\n  if (severityFilter.value === sev) {\n    severityFilter.value = 'all'\n  } else {\n    severityFilter.value = sev\n  }\n}\n</script>\n\n<template>\n  <div data-slot=\"vulnerability-scanner-report\" :class=\"cn('w-full space-y-5', props.class)\">\n    <!-- Header Section -->\n    <div\n      class=\"border-border/80 bg-card text-card-foreground flex flex-col gap-4 rounded-xl border p-4 shadow-xs sm:p-5 lg:flex-row lg:items-center lg:justify-between\"\n    >\n      <div class=\"space-y-1.5\">\n        <div class=\"flex flex-wrap items-center gap-2.5\">\n          <div\n            class=\"bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-lg border\"\n          >\n            <ShieldAlert class=\"text-warning size-4.5\" />\n          </div>\n          <div>\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <h1 class=\"text-foreground text-base font-semibold tracking-tight sm:text-lg\">\n                {{ targetRepo }}\n              </h1>\n              <Badge variant=\"warning\" class=\"gap-1 text-xs font-medium\">\n                <span class=\"bg-warning size-1.5 rounded-full\" />\n                {{ grade }} · {{ gradeSummary }}\n              </Badge>\n            </div>\n            <div class=\"text-muted-foreground flex flex-wrap items-center gap-2 pt-0.5 text-xs\">\n              <span>{{ currentLastScanned }}</span>\n              <span class=\"opacity-40\">·</span>\n              <span class=\"font-mono\">{{ targetBranch }}</span>\n              <span class=\"opacity-40\">·</span>\n              <span class=\"font-mono\">{{ baseImage }}</span>\n              <span class=\"opacity-40\">·</span>\n              <span>{{ totalDeps.toLocaleString() }} dependencies audited</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"flex flex-wrap items-center gap-2 self-start sm:gap-2.5 lg:self-center\">\n        <Button\n          aria-label=\"Download attachment\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"h-8 gap-1.5 text-xs font-medium shadow-xs\"\n          @click=\"exportSbom\"\n        >\n          <Check v-if=\"exportSuccess\" class=\"text-success size-3.5\" />\n          <Download v-else class=\"size-3.5\" />\n          <span>{{ exportSuccess ? 'SBOM Exported' : 'Export SBOM (SPDX)' }}</span>\n        </Button>\n\n        <Button\n          variant=\"default\"\n          size=\"sm\"\n          class=\"h-8 gap-1.5 text-xs font-medium shadow-xs\"\n          :disabled=\"isScanning\"\n          @click=\"triggerRescan\"\n        >\n          <RefreshCw :class=\"['size-3.5', isScanning ? 'animate-spin' : '']\" />\n          <span>{{ isScanning ? 'Scanning Container...' : 'Trigger Re-scan' }}</span>\n        </Button>\n      </div>\n    </div>\n\n    <!-- Active Scan Progress Track (visible during scan) -->\n    <div v-if=\"isScanning\" class=\"border-primary/20 bg-primary/5 space-y-1.5 rounded-lg border p-3\">\n      <div class=\"flex items-center justify-between gap-x-2 text-xs font-medium\">\n        <span class=\"text-primary flex items-center gap-1.5\">\n          <Search class=\"size-3.5\" />\n          Running AST & SBOM vulnerability correlation against NVD & OSV databases...\n        </span>\n        <span class=\"text-muted-foreground font-mono\">{{ scanProgress }}%</span>\n      </div>\n      <Progress :model-value=\"scanProgress\" class=\"h-1.5\" />\n    </div>\n\n    <!-- 4 CVE Severity Summary Cards -->\n    <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- Critical Card -->\n      <Card\n        :class=\"[\n          'border-border/80 bg-card text-card-foreground hover:border-border cursor-pointer shadow-xs transition-colors',\n          severityFilter === 'critical' ? 'border-success/50 ring-success ring-2' : '',\n        ]\"\n        @click=\"setSeverityFilter('critical')\"\n      >\n        <CardContent class=\"p-4\">\n          <div class=\"flex items-start justify-between\">\n            <div class=\"space-y-1\">\n              <p class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">Critical Severity</p>\n              <div class=\"flex items-baseline gap-2\">\n                <span class=\"text-foreground font-mono text-2xl font-bold tracking-tight\">\n                  {{ summaryCounts.critical }}\n                </span>\n                <span class=\"text-success text-xs font-medium\">0 CVEs</span>\n              </div>\n            </div>\n            <div\n              class=\"border-success/20 bg-success/10 text-success flex size-8 items-center justify-center rounded-lg border\"\n            >\n              <ShieldCheck class=\"size-4.5\" />\n            </div>\n          </div>\n          <div\n            class=\"border-border/50 text-muted-foreground mt-3 flex items-center justify-between gap-x-2 border-t pt-2 text-xs\"\n          >\n            <span class=\"text-success font-medium\">Zero critical exposures</span>\n            <span class=\"font-mono text-xs\">CVSS 9.0–10.0</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- High Card -->\n      <Card\n        :class=\"[\n          'border-border/80 bg-card text-card-foreground hover:border-border cursor-pointer shadow-xs transition-colors',\n          severityFilter === 'high' ? 'border-destructive/50 ring-destructive ring-2' : '',\n        ]\"\n        @click=\"setSeverityFilter('high')\"\n      >\n        <CardContent class=\"p-4\">\n          <div class=\"flex items-start justify-between\">\n            <div class=\"space-y-1\">\n              <p class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">High Severity</p>\n              <div class=\"flex items-baseline gap-2\">\n                <span class=\"text-foreground font-mono text-2xl font-bold tracking-tight\">\n                  {{ summaryCounts.high }}\n                </span>\n                <span class=\"text-destructive text-xs font-medium\">2 CVEs</span>\n              </div>\n            </div>\n            <div\n              class=\"border-destructive/20 bg-destructive/10 text-destructive flex size-8 items-center justify-center rounded-lg border\"\n            >\n              <AlertTriangle class=\"size-4.5\" />\n            </div>\n          </div>\n          <div\n            class=\"border-border/50 text-muted-foreground mt-3 flex items-center justify-between gap-x-2 border-t pt-2 text-xs\"\n          >\n            <span class=\"text-destructive font-medium\">Actionable patches ready</span>\n            <span class=\"font-mono text-xs\">CVSS 7.0–8.9</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Medium Card -->\n      <Card\n        :class=\"[\n          'border-border/80 bg-card text-card-foreground hover:border-border cursor-pointer shadow-xs transition-colors',\n          severityFilter === 'medium' ? 'border-warning/50 ring-warning ring-2' : '',\n        ]\"\n        @click=\"setSeverityFilter('medium')\"\n      >\n        <CardContent class=\"p-4\">\n          <div class=\"flex items-start justify-between\">\n            <div class=\"space-y-1\">\n              <p class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">Medium Severity</p>\n              <div class=\"flex items-baseline gap-2\">\n                <span class=\"text-foreground font-mono text-2xl font-bold tracking-tight\">\n                  {{ summaryCounts.medium }}\n                </span>\n                <span class=\"text-warning text-xs font-medium\">5 CVEs</span>\n              </div>\n            </div>\n            <div\n              class=\"border-warning/20 bg-warning/10 text-warning flex size-8 items-center justify-center rounded-lg border\"\n            >\n              <AlertCircle class=\"size-4.5\" />\n            </div>\n          </div>\n          <div\n            class=\"border-border/50 text-muted-foreground mt-3 flex items-center justify-between gap-x-2 border-t pt-2 text-xs\"\n          >\n            <span class=\"text-warning font-medium\">3 in direct dependencies</span>\n            <span class=\"font-mono text-xs\">CVSS 4.0–6.9</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Low Card -->\n      <Card\n        :class=\"[\n          'border-border/80 bg-card text-card-foreground hover:border-border cursor-pointer shadow-xs transition-colors',\n          severityFilter === 'low' ? 'border-info/50 ring-info ring-2' : '',\n        ]\"\n        @click=\"setSeverityFilter('low')\"\n      >\n        <CardContent class=\"p-4\">\n          <div class=\"flex items-start justify-between\">\n            <div class=\"space-y-1\">\n              <p class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">Low Severity</p>\n              <div class=\"flex items-baseline gap-2\">\n                <span class=\"text-foreground font-mono text-2xl font-bold tracking-tight\">\n                  {{ summaryCounts.low }}\n                </span>\n                <span class=\"text-info text-xs font-medium\">12 CVEs</span>\n              </div>\n            </div>\n            <div class=\"border-info/20 bg-info/10 text-info flex size-8 items-center justify-center rounded-lg border\">\n              <Info class=\"size-4.5\" />\n            </div>\n          </div>\n          <div\n            class=\"border-border/50 text-muted-foreground mt-3 flex items-center justify-between gap-x-2 border-t pt-2 text-xs\"\n          >\n            <span class=\"text-info font-medium\">Informational & debug</span>\n            <span class=\"font-mono text-xs\">CVSS 0.1–3.9</span>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Filter & Search Toolbar -->\n    <div class=\"flex flex-col gap-2.5 sm:flex-row sm:items-center sm:justify-between\">\n      <div class=\"flex flex-1 flex-wrap items-center gap-2\">\n        <div class=\"relative w-full sm:w-72\">\n          <Search\n            class=\"text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2\"\n          />\n          <Input v-model=\"searchQuery\" placeholder=\"Search CVE, package, or CWE...\" class=\"h-8 pl-8 text-xs\" />\n        </div>\n\n        <!-- Severity Filter Select -->\n        <Select v-model=\"severityFilter\">\n          <SelectTrigger class=\"h-8 w-36 text-xs capitalize\">\n            <SelectValue placeholder=\"All Severities\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectItem value=\"all\">All Severities</SelectItem>\n            <SelectItem value=\"critical\">Critical (0)</SelectItem>\n            <SelectItem value=\"high\">High (2)</SelectItem>\n            <SelectItem value=\"medium\">Medium (5)</SelectItem>\n            <SelectItem value=\"low\">Low (12)</SelectItem>\n          </SelectContent>\n        </Select>\n\n        <!-- Exploitability Filter Select -->\n        <Select v-model=\"exploitFilter\">\n          <SelectTrigger class=\"h-8 w-44 text-xs\">\n            <SelectValue placeholder=\"All Exploit Status\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectItem value=\"all\">All Exploit Status</SelectItem>\n            <SelectItem value=\"poc\">PoC Available</SelectItem>\n            <SelectItem value=\"none\">No Known Exploit</SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Button\n          v-if=\"severityFilter !== 'all' || exploitFilter !== 'all' || searchQuery\"\n          variant=\"ghost\"\n          size=\"sm\"\n          class=\"text-muted-foreground hover:text-foreground h-8 px-2 text-xs\"\n          @click=\"resetFilters\"\n        >\n          Reset filters\n        </Button>\n      </div>\n\n      <div class=\"text-muted-foreground flex items-center gap-2 text-xs\">\n        <span\n          >Showing <strong class=\"text-foreground font-mono\">{{ filteredItems.length }}</strong> of\n          {{ activeItems.length }} audited vulnerabilities</span\n        >\n      </div>\n    </div>\n\n    <!-- Vulnerability Table Card -->\n    <Card class=\"border-border/80 bg-card text-card-foreground overflow-hidden shadow-xs\">\n      <div class=\"overflow-x-auto\">\n        <Table>\n          <TableHeader>\n            <TableRow class=\"hover:bg-transparent\">\n              <TableHead class=\"min-w-[220px]\">Vulnerability / CVE</TableHead>\n              <TableHead class=\"min-w-[130px]\">Severity</TableHead>\n              <TableHead class=\"min-w-[160px]\">Affected Package</TableHead>\n              <TableHead class=\"min-w-[170px]\">Remediation Fixed</TableHead>\n              <TableHead class=\"min-w-[180px]\">Exploitability</TableHead>\n              <TableHead class=\"min-w-[180px] text-right\">Actions</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            <TableRow\n              v-for=\"item in filteredItems\"\n              :key=\"item.id\"\n              class=\"hover:bg-muted/40 cursor-pointer transition-colors\"\n              @click=\"openAdvisory(item)\"\n            >\n              <!-- Vulnerability / CVE -->\n              <TableCell class=\"py-3 align-top\">\n                <div class=\"space-y-1\">\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"text-foreground font-mono text-xs font-semibold hover:underline\">\n                      {{ item.id }}\n                    </span>\n                    <Badge variant=\"outline\" class=\"px-1.5 py-0 font-mono text-xs\">\n                      {{ item.cwe }}\n                    </Badge>\n                  </div>\n                  <p class=\"text-muted-foreground line-clamp-1 max-w-[220px] text-xs\">\n                    {{ item.title }}\n                  </p>\n                </div>\n              </TableCell>\n\n              <!-- Severity & CVSS Score -->\n              <TableCell class=\"py-3 align-top\">\n                <div class=\"space-y-1\">\n                  <Badge\n                    v-if=\"item.severity === 'critical'\"\n                    variant=\"destructive\"\n                    class=\"gap-1 font-mono text-xs font-medium\"\n                  >\n                    <AlertCircle class=\"size-3\" />\n                    CVSS {{ item.cvssScore }} Critical\n                  </Badge>\n                  <Badge\n                    v-else-if=\"item.severity === 'high'\"\n                    class=\"border-destructive/20 bg-destructive/10 text-destructive gap-1 font-mono text-xs font-medium\"\n                  >\n                    <AlertTriangle class=\"size-3\" />\n                    CVSS {{ item.cvssScore }} High\n                  </Badge>\n                  <Badge\n                    v-else-if=\"item.severity === 'medium'\"\n                    variant=\"warning\"\n                    class=\"gap-1 font-mono text-xs font-medium\"\n                  >\n                    <AlertCircle class=\"size-3\" />\n                    CVSS {{ item.cvssScore }} Med\n                  </Badge>\n                  <Badge v-else variant=\"info\" class=\"gap-1 font-mono text-xs font-medium\">\n                    <Info class=\"size-3\" />\n                    CVSS {{ item.cvssScore }} Low\n                  </Badge>\n                  <p class=\"text-muted-foreground font-mono text-xs\">v3.1 Vector</p>\n                </div>\n              </TableCell>\n\n              <!-- Affected Package & Version -->\n              <TableCell class=\"py-3 align-top\">\n                <div class=\"flex items-center gap-2\">\n                  <Package class=\"text-muted-foreground size-3.5 shrink-0\" />\n                  <div class=\"min-w-0\">\n                    <p class=\"text-foreground truncate font-mono text-xs font-medium\">\n                      {{ item.pkgName }}\n                    </p>\n                    <p class=\"text-muted-foreground font-mono text-xs\">v{{ item.installedVersion }}</p>\n                  </div>\n                </div>\n              </TableCell>\n\n              <!-- Remediation Fixed Version -->\n              <TableCell class=\"py-3 align-top\">\n                <div class=\"space-y-1\">\n                  <div\n                    class=\"border-success/20 bg-success/10 text-success inline-flex items-center gap-1 rounded-md border px-2 py-0.5 font-mono text-xs font-medium\"\n                  >\n                    <CheckCircle2 class=\"text-success size-3\" />\n                    {{ item.fixedVersion }}\n                  </div>\n                  <p class=\"text-muted-foreground text-xs\">Upgrade ready</p>\n                </div>\n              </TableCell>\n\n              <!-- Exploitability Status -->\n              <TableCell class=\"py-3 align-top\">\n                <div class=\"flex items-center gap-1.5\">\n                  <span\n                    :class=\"[\n                      'size-2 shrink-0 rounded-full',\n                      item.exploitStatus === 'poc' ? 'bg-warning animate-pulse' : 'bg-muted-foreground/50',\n                    ]\"\n                  />\n                  <span\n                    :class=\"[\n                      'text-xs font-medium',\n                      item.exploitStatus === 'poc' ? 'text-warning' : 'text-muted-foreground',\n                    ]\"\n                  >\n                    {{ item.exploitLabel }}\n                  </span>\n                </div>\n              </TableCell>\n\n              <!-- Row Action Buttons -->\n              <TableCell class=\"py-3 text-right align-top\" @click.stop>\n                <div class=\"flex items-center justify-end gap-1.5\">\n                  <Button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    class=\"text-muted-foreground hover:text-foreground h-7 px-2.5 text-xs\"\n                    @click=\"openAdvisory(item)\"\n                  >\n                    View Advisory\n                  </Button>\n\n                  <Button\n                    v-if=\"!fixedPrs[item.id]\"\n                    variant=\"outline\"\n                    size=\"sm\"\n                    class=\"h-7 gap-1 px-2.5 text-xs font-medium shadow-xs\"\n                    @click=\"handleAutoFix(item.id)\"\n                  >\n                    <GitPullRequest class=\"size-3\" />\n                    Auto-Fix PR\n                  </Button>\n                  <Badge v-else variant=\"success\" class=\"h-7 gap-1 px-2.5 text-xs font-medium\">\n                    <Check class=\"size-3\" />\n                    PR #849 Opened\n                  </Badge>\n                </div>\n              </TableCell>\n            </TableRow>\n\n            <TableRow v-if=\"filteredItems.length === 0\">\n              <TableCell colspan=\"6\" class=\"h-32 text-center\">\n                <div class=\"flex flex-col items-center justify-center gap-1.5\">\n                  <ShieldCheck class=\"text-success size-7\" />\n                  <p class=\"text-foreground text-sm font-medium\">No matching vulnerabilities found</p>\n                  <p class=\"text-muted-foreground text-xs\">All packages satisfy the active filter constraints.</p>\n                </div>\n              </TableCell>\n            </TableRow>\n          </TableBody>\n        </Table>\n      </div>\n\n      <!-- Table Footer Metadata -->\n      <div\n        class=\"border-border/60 bg-muted/20 text-muted-foreground flex flex-col gap-2 border-t px-4 py-2.5 text-xs sm:flex-row sm:items-center sm:justify-between\"\n      >\n        <div class=\"flex items-center gap-3\">\n          <span class=\"flex items-center gap-1\">\n            <span class=\"bg-success size-2 rounded-full\" />\n            NVD Sync Live\n          </span>\n          <span class=\"opacity-40\">·</span>\n          <span>CVSS Score Engine: v3.1 Specification</span>\n        </div>\n        <div class=\"flex items-center gap-2 font-mono\">\n          <span>Target hash: 9a20bf183</span>\n        </div>\n      </div>\n    </Card>\n\n    <!-- Detailed CVE Advisory Drawer / Sheet -->\n    <Sheet v-model:open=\"isDrawerOpen\">\n      <SheetContent class=\"w-full space-y-6 overflow-y-auto p-6 sm:max-w-xl md:max-w-2xl\">\n        <SheetHeader v-if=\"selectedCve\" class=\"space-y-2 p-0 text-left\">\n          <div class=\"flex items-center justify-between gap-3 pr-6\">\n            <div class=\"flex items-center gap-2\">\n              <Badge\n                v-if=\"selectedCve.severity === 'critical'\"\n                variant=\"destructive\"\n                class=\"font-mono text-xs font-semibold\"\n              >\n                CRITICAL {{ selectedCve.cvssScore }}\n              </Badge>\n              <Badge\n                v-else-if=\"selectedCve.severity === 'high'\"\n                class=\"border-destructive/20 bg-destructive/10 text-destructive font-mono text-xs font-semibold\"\n              >\n                HIGH {{ selectedCve.cvssScore }}\n              </Badge>\n              <Badge\n                v-else-if=\"selectedCve.severity === 'medium'\"\n                variant=\"warning\"\n                class=\"font-mono text-xs font-semibold\"\n              >\n                MEDIUM {{ selectedCve.cvssScore }}\n              </Badge>\n              <Badge v-else variant=\"info\" class=\"font-mono text-xs font-semibold\">\n                LOW {{ selectedCve.cvssScore }}\n              </Badge>\n\n              <Badge variant=\"outline\" class=\"font-mono text-xs\">\n                {{ selectedCve.cwe }}\n              </Badge>\n            </div>\n\n            <a\n              :href=\"selectedCve.advisoryUrl\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              class=\"text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs\"\n            >\n              <span>NVD Source</span>\n              <ExternalLink class=\"size-3\" />\n            </a>\n          </div>\n\n          <SheetTitle class=\"text-lg font-bold tracking-tight\">\n            {{ selectedCve.id }}\n          </SheetTitle>\n          <SheetDescription class=\"text-foreground/80 text-xs font-medium\">\n            {{ selectedCve.title }}\n          </SheetDescription>\n        </SheetHeader>\n\n        <div v-if=\"selectedCve\" class=\"space-y-5 text-xs\">\n          <!-- CVSS 3.1 Metrics Grid -->\n          <div class=\"border-border/80 bg-muted/30 space-y-3 rounded-lg border p-3.5\">\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <span class=\"text-muted-foreground font-medium\">CVSS v3.1 Base Score</span>\n              <span class=\"text-foreground font-mono text-sm font-bold\">{{ selectedCve.cvssScore }} / 10.0</span>\n            </div>\n            <Progress :model-value=\"selectedCve.cvssScore * 10\" class=\"h-2\" />\n\n            <div class=\"grid grid-cols-2 gap-2.5 pt-1 text-xs sm:grid-cols-4\">\n              <div class=\"bg-card border-border/60 rounded-md border p-2\">\n                <p class=\"text-muted-foreground text-xs\">Attack Vector</p>\n                <p class=\"text-foreground mt-0.5 truncate font-medium\">{{ selectedCve.attackVector }}</p>\n              </div>\n              <div class=\"bg-card border-border/60 rounded-md border p-2\">\n                <p class=\"text-muted-foreground text-xs\">Complexity</p>\n                <p class=\"text-foreground mt-0.5 font-medium\">{{ selectedCve.attackComplexity }}</p>\n              </div>\n              <div class=\"bg-card border-border/60 rounded-md border p-2\">\n                <p class=\"text-muted-foreground text-xs\">Privileges</p>\n                <p class=\"text-foreground mt-0.5 font-medium\">{{ selectedCve.privilegesRequired }}</p>\n              </div>\n              <div class=\"bg-card border-border/60 rounded-md border p-2\">\n                <p class=\"text-muted-foreground text-xs\">Interaction</p>\n                <p class=\"text-foreground mt-0.5 font-medium\">{{ selectedCve.userInteraction }}</p>\n              </div>\n            </div>\n\n            <!-- CVSS Vector String -->\n            <div\n              class=\"border-border/50 text-muted-foreground flex items-center justify-between gap-x-2 border-t pt-2 font-mono text-xs\"\n            >\n              <span class=\"truncate\">{{ selectedCve.cvssVector }}</span>\n            </div>\n          </div>\n\n          <!-- Description & Technical Impact -->\n          <div class=\"space-y-2\">\n            <h3 class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">Vulnerability Overview</h3>\n            <p class=\"text-foreground text-xs leading-relaxed\">\n              {{ selectedCve.description }}\n            </p>\n          </div>\n\n          <div class=\"space-y-2\">\n            <h3 class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">Technical Impact</h3>\n            <div class=\"bg-card border-border/80 text-foreground/90 rounded-md border p-3 text-xs\">\n              {{ selectedCve.impact }}\n            </div>\n          </div>\n\n          <!-- Package Path & Version Comparison -->\n          <div class=\"space-y-2\">\n            <h3 class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">Dependency State</h3>\n            <div class=\"grid grid-cols-1 gap-2.5 sm:grid-cols-2\">\n              <div class=\"border-destructive/30 bg-destructive/5 rounded-md border p-3\">\n                <p class=\"text-destructive text-xs font-medium\">Installed Version</p>\n                <p class=\"text-foreground mt-0.5 font-mono font-bold\">\n                  {{ selectedCve.pkgName }}@{{ selectedCve.installedVersion }}\n                </p>\n                <p class=\"text-muted-foreground mt-1 text-xs\">Direct dependency in package.json</p>\n              </div>\n\n              <div class=\"border-success/30 bg-success/5 rounded-md border p-3\">\n                <p class=\"text-success text-xs font-medium\">Remediation Target</p>\n                <p class=\"text-foreground mt-0.5 font-mono font-bold\">\n                  {{ selectedCve.pkgName }}@{{ selectedCve.fixedVersion }}\n                </p>\n                <p class=\"text-muted-foreground mt-1 text-xs\">Non-breaking patch update</p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Remediation Code Diff -->\n          <div class=\"space-y-2\">\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <h3 class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                package.json Patch Diff\n              </h3>\n              <span class=\"text-muted-foreground font-mono text-xs\">package.json</span>\n            </div>\n            <div class=\"overflow-hidden rounded-md border bg-zinc-950 font-mono text-xs text-zinc-100 shadow-inner\">\n              <div\n                class=\"text-muted-foreground flex items-center gap-2 border-b border-zinc-800 bg-zinc-900/90 px-3 py-1.5 text-xs\"\n              >\n                <FileCode2 class=\"size-3.5\" />\n                <span>dependencies</span>\n              </div>\n              <div class=\"space-y-1 p-3 text-xs leading-relaxed select-text\">\n                <div class=\"bg-destructive/15 text-destructive rounded-xs px-1.5 py-0.5\">\n                  - {{ selectedCve.remediationDiff.removed }}\n                </div>\n                <div class=\"bg-success/15 text-success rounded-xs px-1.5 py-0.5\">\n                  + {{ selectedCve.remediationDiff.added }}\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Remediation CLI Command Box -->\n          <div class=\"space-y-2\">\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <h3 class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                CLI Remediation Command\n              </h3>\n              <Button\n                variant=\"ghost\"\n                size=\"xs\"\n                class=\"h-6 gap-1 px-2 text-xs\"\n                @click=\"copyCommand(selectedCve.id, selectedCve.patchCommand)\"\n              >\n                <Check v-if=\"copiedCveId === selectedCve.id\" class=\"text-success size-3\" />\n                <Copy v-else class=\"size-3\" />\n                <span>{{ copiedCveId === selectedCve.id ? 'Copied' : 'Copy command' }}</span>\n              </Button>\n            </div>\n            <div\n              class=\"border-border bg-muted/60 flex items-center justify-between gap-x-2 rounded-md border px-3 py-2 font-mono text-xs\"\n            >\n              <span class=\"text-foreground truncate\">{{ selectedCve.patchCommand }}</span>\n            </div>\n          </div>\n        </div>\n\n        <SheetFooter\n          v-if=\"selectedCve\"\n          class=\"border-border/80 flex flex-row items-center justify-end gap-2 border-t pt-4\"\n        >\n          <SheetClose as-child>\n            <Button variant=\"outline\" size=\"sm\" class=\"text-xs\"> Close </Button>\n          </SheetClose>\n\n          <Button\n            v-if=\"!fixedPrs[selectedCve.id]\"\n            variant=\"default\"\n            size=\"sm\"\n            class=\"gap-1.5 text-xs font-medium\"\n            @click=\"handleAutoFix(selectedCve.id)\"\n          >\n            <GitPullRequest class=\"size-3.5\" />\n            Open Auto-Fix Pull Request\n          </Button>\n          <Badge v-else variant=\"success\" class=\"h-8 gap-1.5 px-3 text-xs font-medium\">\n            <Check class=\"size-3.5\" />\n            PR #849 Created & Assigned\n          </Badge>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/VulnerabilityScannerReport.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/sheet.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Snyk and Trivy style CVE vulnerability scanner report and dependency security audit with severity breakdown cards, CVSS metrics, package version diffs, advisory inspection drawer, and automated remediation PR actions.",
  "categories": [
    "security",
    "dashboard",
    "devops"
  ]
}