# VulnReport

> A vulnerability scan report - CVE counts per severity, the worst findings with the version that fixes them, the trend against the previous scan and a stacked history of the last scans.

Source: https://docs.nasaqui.com/components/vuln-report

## Install

```bash
npx shadcn@latest add https://docs.nasaqui.com/r/vuln-report.json
```

Show what the last security scan found. Four tiles count findings by severity (critical, high, medium, low), a badge says whether the total went up or down since the previous scan, the top findings are listed (most severe first, then highest CVSS) with the installed and the fixed version and a copy button for the CVE id, and the scan history is drawn as stacked bars. With no findings it says so plainly; with no scan yet it shows an empty state. It has no scanner: you pass `findings` (or `counts`) and `history`, and `onScan` starts a new scan.

## When to use

- A security page in an admin or hosting product.
- `SeverityTiles` on a dashboard.

## When not to use

- Triage workflows with assignees and status per CVE: build on `DataTable`.
- Certificate expiry: use `CertificateMonitor`.

## Import

```tsx
import { VulnReport } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```

## Quick start

```tsx
import { VulnReport, type VulnFinding, type VulnScan } from "@fadymondy/nasaq/web";

declare const findings: VulnFinding[];
declare const history: VulnScan[];
declare const api: { scan(): Promise<void> };

export const Vulns = () => <VulnReport findings={findings} history={history} lastScanAt={Date.now()} onScan={() => api.scan()} />;
```

## Anatomy

```
VulnReport                   data-slot="vuln-report"
├─ header                    title, last scan, Scan now
├─ total + trend Badge       "3 fewer than the previous scan"
├─ SeverityTiles             Critical, High, Medium, Low
├─ top findings              severity Badge, CVE id, title, package@version → fixed version, CVSS, copy
└─ scan history              stacked bar per scan, oldest first
```

## API

**VulnReport**: every `Card` prop except `children`, plus:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `findings` | `readonly VulnFinding[]` | required | `{ id, severity, cvss?, title?, package, installedVersion?, fixedVersion? }`. |
| `counts` | `Partial<SeverityCounts>` | from `findings` | Override, for example when `findings` holds only the top items. |
| `history` | `readonly VulnScan[]` | `[]` | `{ id, at, counts }`, oldest first. |
| `lastScanAt` | `Date \| number \| string` | | Shown in the description. |
| `topLimit` | `number` | `5` | How many findings to list. |
| `scanning` | `boolean` | `false` | Loading state of Scan now. |
| `onScan` | `() => Promise<void \| { error? }>` | | Shows Scan now. |
| `onOpenFinding` | `(finding) => void` | | Makes the CVE id a button. |
| `labels` | `Partial<VulnReportLabels>` | | Override any string. |

**SeverityTiles**: `counts`. **Helpers** (pure, tested): `countBySeverity`, `totalCount`, `riskTone`, `topFindings`, `trend`, `isCveId`.

## Examples

**Counts only**

```tsx
import { SeverityTiles } from "@fadymondy/nasaq/web";

export const Tiles = () => <SeverityTiles counts={{ critical: 1, high: 4, medium: 9, low: 12 }} />;
```

## Accessibility

- Severity is always a word. The counts are a description list (`dl`). Each history bar is an image with a text alternative giving the date and total.
- Copy buttons have a name that includes the CVE id.

## RTL & i18n

- English and Arabic strings follow the Nasaq locale. CVE ids, package names and versions stay left to right. The history runs in reading order.

## Styling & tokens

- Built on `Card`, `Badge`, `CopyButton`, `EmptyState` and `--nq-*` tokens. Target `[data-slot="vuln-report"]`.

## Do / Don't

- Do show the fixed version: it is the action to take.
- Do say "no fix yet" when there is none.
- Don't show a green all-clear for a scan that failed: leave `lastScanAt` out and show an error.
- Don't invent CVE ids in production data.

## Related

- [`cert-monitor`](https://docs.nasaqui.com/components/cert-monitor)
- [`uptime-monitors`](https://docs.nasaqui.com/components/uptime-monitors)
- [`alerts`](https://docs.nasaqui.com/components/alerts)

## Lab

https://docs.nasaqui.com/?path=/docs/components-security-vulnerability-report--docs

## Code

### React

```tsx
import { VulnReport, type VulnFinding, type VulnScan } from "@fadymondy/nasaq/web";

declare const findings: VulnFinding[];
declare const history: VulnScan[];
declare const api: { scan(): Promise<void> };

export const Vulns = () => <VulnReport findings={findings} history={history} lastScanAt={Date.now()} onScan={() => api.scan()} />;
```

### shadcn

```tsx
import { VulnReport, type VulnFinding, type VulnScan } from "@/components/ui/vuln-report";

declare const findings: VulnFinding[];
declare const history: VulnScan[];
declare const api: { scan(): Promise<void> };

export const Vulns = () => <VulnReport findings={findings} history={history} lastScanAt={Date.now()} onScan={() => api.scan()} />;
```

### Vue

```vue
<script setup lang="ts">
import { ref } from "vue";
import { NqVulnReport, type VulnFinding, type VulnScan } from "@fadymondy/nasaq/vue";

const findings: VulnFinding[] = [
  { id: "CVE-2024-45337", severity: "critical", cvss: 9.1, package: "golang.org/x/crypto", installedVersion: "0.30.0", fixedVersion: "0.31.0", title: "Misuse of ServerConfig.PublicKeyCallback" },
  { id: "CVE-2024-21538", severity: "high", cvss: 7.7, package: "cross-spawn", installedVersion: "7.0.3", fixedVersion: "7.0.5", title: "Regular expression denial of service" },
  { id: "CVE-2024-4067", severity: "medium", cvss: 5.1, package: "micromatch", installedVersion: "4.0.5", fixedVersion: "4.0.8" },
  { id: "CVE-2023-26136", severity: "low", cvss: 3.7, package: "tough-cookie", installedVersion: "4.0.0" },
];
const history: VulnScan[] = [
  { id: "s1", at: "2026-09-01", counts: { critical: 2, high: 3, medium: 4, low: 2 } },
  { id: "s2", at: "2026-09-08", counts: { critical: 1, high: 2, medium: 3, low: 2 } },
  { id: "s3", at: "2026-09-15", counts: { critical: 1, high: 1, medium: 1, low: 1 } },
];
const scanning = ref(false);
function scan() {
  scanning.value = true;
  setTimeout(() => (scanning.value = false), 1500);
}
</script>

<template>
  <NqVulnReport :findings="findings" :history="history" :last-scan-at="Date.now()" :scanning="scanning" @scan="scan" />
</template>
```

### Blade

```blade
@php
    $findings = [
        ['id' => 'CVE-2024-45337', 'severity' => 'critical', 'cvss' => 9.1, 'package' => 'golang.org/x/crypto', 'installedVersion' => '0.30.0', 'fixedVersion' => '0.31.0', 'title' => 'Misuse of ServerConfig.PublicKeyCallback'],
        ['id' => 'CVE-2024-21538', 'severity' => 'high', 'cvss' => 7.7, 'package' => 'cross-spawn', 'installedVersion' => '7.0.3', 'fixedVersion' => '7.0.5', 'title' => 'Regular expression denial of service'],
        ['id' => 'CVE-2024-4067', 'severity' => 'medium', 'cvss' => 5.1, 'package' => 'micromatch', 'installedVersion' => '4.0.5', 'fixedVersion' => '4.0.8'],
        ['id' => 'CVE-2023-26136', 'severity' => 'low', 'cvss' => 3.7, 'package' => 'tough-cookie', 'installedVersion' => '4.0.0'],
    ];
    $history = [
        ['id' => 's1', 'at' => '2026-09-01', 'counts' => ['critical' => 2, 'high' => 3, 'medium' => 4, 'low' => 2]],
        ['id' => 's2', 'at' => '2026-09-08', 'counts' => ['critical' => 1, 'high' => 2, 'medium' => 3, 'low' => 2]],
        ['id' => 's3', 'at' => '2026-09-15', 'counts' => ['critical' => 1, 'high' => 1, 'medium' => 1, 'low' => 1]],
    ];
@endphp
<x-nq::vuln-report :findings="$findings" :history="$history" :last-scan-at="now()->subHours(2)" scannable openable />
```

### HTML + Alpine

```html
<div data-slot="vuln-report" data-risk="danger" class="flex flex-col gap-4 rounded-card border border-border bg-card py-4 text-card-foreground w-full">
    <div data-slot="card-header" class="grid auto-rows-min items-start gap-1 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]"><div class="flex flex-wrap items-center justify-between gap-2">
            <h3 data-slot="card-title" class="text-label text-foreground flex items-center gap-2"><svg aria-hidden="true" class="size-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 7V5a2 2 0 0 1 2-2h2"/>
  <path d="M17 3h2a2 2 0 0 1 2 2v2"/>
  <path d="M21 17v2a2 2 0 0 1-2 2h-2"/>
  <path d="M7 21H5a2 2 0 0 1-2-2v-2"/>
  <circle cx="12" cy="12" r="3"/>
  <path d="m16 16-1.9-1.9"/>
</svg>                Vulnerability report</h3>
                            <button data-slot="button"
     type="button"                         x-on:click="$dispatch(&#039;nq-scan&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        Scan now</button>
                    </div>
        <div data-slot="card-description" class="text-body-sm text-muted-foreground">What the last scan found in your packages and images.
                            Last scan <time data-slot="date-time" datetime="2026-09-29T07:00:00+00:00" dir="auto"  title="Sep 29, 2026"     class="tabular-nums [unicode-bidi:isolate]">2 hours ago</time>
.</div></div>
    <div data-slot="card-content" class="px-4 grid gap-6"><div class="flex flex-wrap items-center gap-3">
                <p class="text-body-sm text-muted-foreground">
                    Total findings: <span class="text-h3 font-semibold text-foreground tabular-nums"><bdi data-slot="num" data-numeric="" class="tabular-nums">4</bdi>
</span>
                </p>
                                    <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-success/40 bg-nq-success-soft text-nq-success-text"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 7 10 10"/>
  <path d="M17 7v10H7"/>
</svg>                                                4 fewer than the previous scan</span>
                            </div>
            <dl data-slot="severity-tiles" class="grid grid-cols-2 gap-2 sm:grid-cols-4">
            <div data-severity="critical" class="rounded-control border border-border bg-card p-3">
            <dt class="text-body-sm text-muted-foreground">Critical</dt>
            <dd class="text-h2 font-semibold tabular-nums text-nq-danger">
                <bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi>
            </dd>
        </div>
            <div data-severity="high" class="rounded-control border border-border bg-card p-3">
            <dt class="text-body-sm text-muted-foreground">High</dt>
            <dd class="text-h2 font-semibold tabular-nums text-nq-danger">
                <bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi>
            </dd>
        </div>
            <div data-severity="medium" class="rounded-control border border-border bg-card p-3">
            <dt class="text-body-sm text-muted-foreground">Medium</dt>
            <dd class="text-h2 font-semibold tabular-nums text-nq-warning">
                <bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi>
            </dd>
        </div>
            <div data-severity="low" class="rounded-control border border-border bg-card p-3">
            <dt class="text-body-sm text-muted-foreground">Low</dt>
            <dd class="text-h2 font-semibold tabular-nums text-muted-foreground">
                <bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi>
            </dd>
        </div>
    </dl>
            <section aria-labelledby="vuln-000001-top" class="grid gap-2">
                <h4 id="vuln-000001-top" class="text-label text-foreground">Top findings</h4>
                                    <ul class="divide-y divide-border rounded-control border border-border">
                                                    <li data-slot="vuln-finding" class="flex flex-wrap items-center gap-x-3 gap-y-1 px-3 py-2">
                                <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-danger/40 bg-nq-danger-soft text-nq-danger-text">Critical</span>
                                <div class="grid min-w-0 flex-1 gap-0.5">
                                                                            <button type="button" class="w-fit text-start font-mono text-body-sm text-foreground hover:underline focus-visible:outline-2 focus-visible:outline-ring" x-on:click="$dispatch('nq-open-finding', JSON.parse('{\u0022id\u0022:\u0022CVE-2024-45337\u0022,\u0022package\u0022:\u0022golang.org\\\/x\\\/crypto\u0022}'))">
                                            <bdi dir="ltr">CVE-2024-45337</bdi>
                                        </button>
                                                                                                                <span class="truncate text-caption text-muted-foreground" dir="auto">Misuse of ServerConfig.PublicKeyCallback</span>
                                                                    </div>
                                <span class="text-body-sm text-muted-foreground">
                                    <bdi dir="ltr" class="font-mono">golang.org/x/crypto@0.30.0</bdi>
                                    →
                                                                            <bdi dir="ltr" class="font-mono text-nq-success">0.31.0</bdi>
                                                                    </span>
                                                                    <span class="text-caption text-muted-foreground tabular-nums">
                                        CVSS <bdi dir="ltr">9.1</bdi>
                                    </span>
                                                                                                    <span class="contents" x-data="nqCopyButton('CVE-2024-45337', 1500)">
    <button data-slot="copy-button"
     type="button"                         aria-label="Copy CVE-2024-45337" x-on:click="copy()" x-bind:data-copied="state === &#039;copied&#039; ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 data-copied:text-nq-success-text">
        <svg aria-hidden="true" x-show="state !== 'copied'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
</svg>        <svg aria-hidden="true" x-show="state === 'copied'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></button>
    <span data-slot="copy-button-status" role="status" aria-live="polite" class="sr-only"
        data-copied-label="Copied to clipboard" data-failed-label="Could not copy"
        x-text="state === 'copied' ? $el.dataset.copiedLabel : state === 'failed' ? $el.dataset.failedLabel : ''"></span>
</span>
                                                            </li>
                                                    <li data-slot="vuln-finding" class="flex flex-wrap items-center gap-x-3 gap-y-1 px-3 py-2">
                                <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-danger/40 bg-nq-danger-soft text-nq-danger-text">High</span>
                                <div class="grid min-w-0 flex-1 gap-0.5">
                                                                            <button type="button" class="w-fit text-start font-mono text-body-sm text-foreground hover:underline focus-visible:outline-2 focus-visible:outline-ring" x-on:click="$dispatch('nq-open-finding', JSON.parse('{\u0022id\u0022:\u0022CVE-2024-21538\u0022,\u0022package\u0022:\u0022cross-spawn\u0022}'))">
                                            <bdi dir="ltr">CVE-2024-21538</bdi>
                                        </button>
                                                                                                                <span class="truncate text-caption text-muted-foreground" dir="auto">Regular expression denial of service</span>
                                                                    </div>
                                <span class="text-body-sm text-muted-foreground">
                                    <bdi dir="ltr" class="font-mono">cross-spawn@7.0.3</bdi>
                                    →
                                                                            <bdi dir="ltr" class="font-mono text-nq-success">7.0.5</bdi>
                                                                    </span>
                                                                    <span class="text-caption text-muted-foreground tabular-nums">
                                        CVSS <bdi dir="ltr">7.7</bdi>
                                    </span>
                                                                                                    <span class="contents" x-data="nqCopyButton('CVE-2024-21538', 1500)">
    <button data-slot="copy-button"
     type="button"                         aria-label="Copy CVE-2024-21538" x-on:click="copy()" x-bind:data-copied="state === &#039;copied&#039; ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 data-copied:text-nq-success-text">
        <svg aria-hidden="true" x-show="state !== 'copied'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
</svg>        <svg aria-hidden="true" x-show="state === 'copied'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></button>
    <span data-slot="copy-button-status" role="status" aria-live="polite" class="sr-only"
        data-copied-label="Copied to clipboard" data-failed-label="Could not copy"
        x-text="state === 'copied' ? $el.dataset.copiedLabel : state === 'failed' ? $el.dataset.failedLabel : ''"></span>
</span>
                                                            </li>
                                                    <li data-slot="vuln-finding" class="flex flex-wrap items-center gap-x-3 gap-y-1 px-3 py-2">
                                <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-warning/40 bg-nq-warning-soft text-nq-warning-text">Medium</span>
                                <div class="grid min-w-0 flex-1 gap-0.5">
                                                                            <button type="button" class="w-fit text-start font-mono text-body-sm text-foreground hover:underline focus-visible:outline-2 focus-visible:outline-ring" x-on:click="$dispatch('nq-open-finding', JSON.parse('{\u0022id\u0022:\u0022CVE-2024-4067\u0022,\u0022package\u0022:\u0022micromatch\u0022}'))">
                                            <bdi dir="ltr">CVE-2024-4067</bdi>
                                        </button>
                                                                                                        </div>
                                <span class="text-body-sm text-muted-foreground">
                                    <bdi dir="ltr" class="font-mono">micromatch@4.0.5</bdi>
                                    →
                                                                            <bdi dir="ltr" class="font-mono text-nq-success">4.0.8</bdi>
                                                                    </span>
                                                                    <span class="text-caption text-muted-foreground tabular-nums">
                                        CVSS <bdi dir="ltr">5.1</bdi>
                                    </span>
                                                                                                    <span class="contents" x-data="nqCopyButton('CVE-2024-4067', 1500)">
    <button data-slot="copy-button"
     type="button"                         aria-label="Copy CVE-2024-4067" x-on:click="copy()" x-bind:data-copied="state === &#039;copied&#039; ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 data-copied:text-nq-success-text">
        <svg aria-hidden="true" x-show="state !== 'copied'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
</svg>        <svg aria-hidden="true" x-show="state === 'copied'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></button>
    <span data-slot="copy-button-status" role="status" aria-live="polite" class="sr-only"
        data-copied-label="Copied to clipboard" data-failed-label="Could not copy"
        x-text="state === 'copied' ? $el.dataset.copiedLabel : state === 'failed' ? $el.dataset.failedLabel : ''"></span>
</span>
                                                            </li>
                                                    <li data-slot="vuln-finding" class="flex flex-wrap items-center gap-x-3 gap-y-1 px-3 py-2">
                                <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border bg-secondary text-foreground">Low</span>
                                <div class="grid min-w-0 flex-1 gap-0.5">
                                                                            <button type="button" class="w-fit text-start font-mono text-body-sm text-foreground hover:underline focus-visible:outline-2 focus-visible:outline-ring" x-on:click="$dispatch('nq-open-finding', JSON.parse('{\u0022id\u0022:\u0022CVE-2023-26136\u0022,\u0022package\u0022:\u0022tough-cookie\u0022}'))">
                                            <bdi dir="ltr">CVE-2023-26136</bdi>
                                        </button>
                                                                                                        </div>
                                <span class="text-body-sm text-muted-foreground">
                                    <bdi dir="ltr" class="font-mono">tough-cookie@4.0.0</bdi>
                                    →
                                                                            <span>No fix yet</span>
                                                                    </span>
                                                                    <span class="text-caption text-muted-foreground tabular-nums">
                                        CVSS <bdi dir="ltr">3.7</bdi>
                                    </span>
                                                                                                    <span class="contents" x-data="nqCopyButton('CVE-2023-26136', 1500)">
    <button data-slot="copy-button"
     type="button"                         aria-label="Copy CVE-2023-26136" x-on:click="copy()" x-bind:data-copied="state === &#039;copied&#039; ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 data-copied:text-nq-success-text">
        <svg aria-hidden="true" x-show="state !== 'copied'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
</svg>        <svg aria-hidden="true" x-show="state === 'copied'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></button>
    <span data-slot="copy-button-status" role="status" aria-live="polite" class="sr-only"
        data-copied-label="Copied to clipboard" data-failed-label="Could not copy"
        x-text="state === 'copied' ? $el.dataset.copiedLabel : state === 'failed' ? $el.dataset.failedLabel : ''"></span>
</span>
                                                            </li>
                                            </ul>
                            </section>
                            <section aria-labelledby="vuln-000001-history" class="grid gap-2">
                    <h4 id="vuln-000001-history" class="text-label text-foreground">Scan history</h4>
                    <ol class="flex h-24 items-end gap-1.5">
                                                                                <li class="flex h-full min-w-2 flex-1 flex-col-reverse overflow-hidden rounded-t-[2px]" style="height: 100%" role="img" aria-label="Scan on Sep 1, 2026: 11 findings" title="Scan on Sep 1, 2026: 11 findings">
                                                                                                            <span class="bg-muted-foreground/40" style="flex-grow: 2"></span>
                                                                                                                                                <span class="bg-nq-warning" style="flex-grow: 4"></span>
                                                                                                                                                <span class="bg-nq-danger/60" style="flex-grow: 3"></span>
                                                                                                                                                <span class="bg-nq-danger" style="flex-grow: 2"></span>
                                                                                                </li>
                                                                                <li class="flex h-full min-w-2 flex-1 flex-col-reverse overflow-hidden rounded-t-[2px]" style="height: 72.727272727273%" role="img" aria-label="Scan on Sep 8, 2026: 8 findings" title="Scan on Sep 8, 2026: 8 findings">
                                                                                                            <span class="bg-muted-foreground/40" style="flex-grow: 2"></span>
                                                                                                                                                <span class="bg-nq-warning" style="flex-grow: 3"></span>
                                                                                                                                                <span class="bg-nq-danger/60" style="flex-grow: 2"></span>
                                                                                                                                                <span class="bg-nq-danger" style="flex-grow: 1"></span>
                                                                                                </li>
                                                                                <li class="flex h-full min-w-2 flex-1 flex-col-reverse overflow-hidden rounded-t-[2px]" style="height: 36.363636363636%" role="img" aria-label="Scan on Sep 15, 2026: 4 findings" title="Scan on Sep 15, 2026: 4 findings">
                                                                                                            <span class="bg-muted-foreground/40" style="flex-grow: 1"></span>
                                                                                                                                                <span class="bg-nq-warning" style="flex-grow: 1"></span>
                                                                                                                                                <span class="bg-nq-danger/60" style="flex-grow: 1"></span>
                                                                                                                                                <span class="bg-nq-danger" style="flex-grow: 1"></span>
                                                                                                </li>
                                            </ol>
                </section></div>
</div>
```