WP-20/21: vulnerability management with Trivy and mail notifications

Trivy scanner adapter (rootfs + image JSON, parsed and deduplicated),
findings repository, scan diff that keeps first_seen, marks disappeared
findings fixed and skips failed targets, vulnerability_scan job (daily by
default), digest mail for new findings at or above a configurable severity,
/api/vulnerabilities routes, Vulnerabilities page with severity tiles,
filters, details and acknowledge, notification threshold in settings.
Deploy script installs Trivy from the Aqua apt repository.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

frontend/src/pages/VulnerabilitiesPage.vue

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { api, ApiError } from '../api/client'
+import type { Finding, JobRun, Severity, VulnSummary } from '../api/types'
+import { useAuthStore } from '../stores/auth'
+import { useToastStore } from '../stores/toast'
+import FindingTable from '../components/FindingTable.vue'
+
+const auth = useAuthStore()
+const toast = useToastStore()
+const summary = ref<VulnSummary | null>(null)
+const findings = ref<Finding[]>([])
+const targets = ref<string[]>([])
+const minSeverity = ref<Severity>('low')
+const target = ref('')
+const status = ref('')
+const scanning = ref(false)
+const scanRun = ref<JobRun | null>(null)
+const selected = ref<Finding | null>(null)
+let timer: ReturnType<typeof setInterval> | undefined
+
+const fail = (e: unknown) => toast.error(e instanceof ApiError ? e.message : 'Request failed')
+
+async function load() {
+  const q = new URLSearchParams()
+  q.set('min_severity', minSeverity.value)
+  if (target.value) q.set('target', target.value)
+  if (status.value) q.set('status', status.value)
+  const [s, f, t] = await Promise.all([
+    api.get<VulnSummary>('/api/vulnerabilities/summary'),
+    api.get<Finding[]>(`/api/vulnerabilities?${q}`),
+    api.get<string[]>('/api/vulnerabilities/targets'),
+  ])
+  summary.value = s
+  findings.value = f
+  targets.value = t
+}
+onMounted(() => load().catch(fail))
+onUnmounted(() => clearInterval(timer))
+watch([minSeverity, target, status], () => load().catch(fail))
+
+async function scan() {
+  scanning.value = true
+  try {
+    scanRun.value = await api.post<JobRun>('/api/jobs/run', { kind: 'vulnerability_scan' })
+    timer = setInterval(async () => {
+      if (!scanRun.value) return
+      const r = await api.get<JobRun>(`/api/jobs/${scanRun.value.id}`)
+      scanRun.value = r
+      if (r.status !== 'running') {
+        clearInterval(timer)
+        scanning.value = false
+        if (r.status === 'success') toast.success('Scan finished')
+        else toast.error('Scan failed, see the log')
+        await load()
+      }
+    }, 1500)
+  } catch (e) {
+    scanning.value = false
+    fail(e)
+  }
+}
+
+async function setStatus(f: Finding, s: 'open' | 'acknowledged') {
+  try {
+    await api.post(`/api/vulnerabilities/${f.id}/status`, { status: s })
+    await load()
+  } catch (e) {
+    fail(e)
+  }
+}
+
+const tiles: { key: keyof VulnSummary['total']; label: string; cls: string }[] = [
+  { key: 'critical', label: 'Critical', cls: 'text-red-700' },
+  { key: 'high', label: 'High', cls: 'text-orange-600' },
+  { key: 'medium', label: 'Medium', cls: 'text-amber-600' },
+  { key: 'low', label: 'Low', cls: 'text-gray-600' },
+]
+</script>
+
+<template>
+  <div class="flex items-center justify-between">
+    <h1 class="text-2xl font-semibold">Vulnerabilities</h1>
+    <button
+      v-if="auth.isAdmin"
+      :disabled="scanning"
+      class="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
+      @click="scan"
+    >
+      {{ scanning ? 'Scanning…' : 'Scan now' }}
+    </button>
+  </div>
+
+  <div v-if="summary" class="mt-6 grid gap-4 md:grid-cols-5">
+    <div v-for="t in tiles" :key="t.key" class="rounded-lg border border-gray-200 bg-white p-4">
+      <div class="text-xs uppercase text-gray-500">{{ t.label }}</div>
+      <div :data-testid="`count-${t.key}`" class="mt-1 text-2xl font-semibold" :class="t.cls">
+        {{ summary.total[t.key] }}
+      </div>
+      <div class="text-xs text-gray-500">
+        OS {{ summary.os[t.key] }} · images {{ summary.images[t.key] }}
+      </div>
+    </div>
+    <div class="rounded-lg border border-gray-200 bg-white p-4">
+      <div class="text-xs uppercase text-gray-500">Last scan</div>
+      <div class="mt-1 text-sm font-medium">
+        {{ summary.last_scan ? new Date(summary.last_scan).toLocaleString() : 'never' }}
+      </div>
+      <div class="text-xs text-gray-500">scanner {{ summary.scanner }}</div>
+    </div>
+  </div>
+
+  <div
+    v-if="scanRun && scanRun.status === 'running'"
+    class="mt-4 rounded-md border border-gray-200 bg-white"
+  >
+    <pre class="max-h-40 overflow-auto p-3 text-xs">{{ scanRun.log || '(starting)' }}</pre>
+  </div>
+
+  <div class="mt-8 flex flex-wrap items-end gap-4">
+    <div>
+      <label for="f-sev" class="block text-sm font-medium">Minimum severity</label>
+      <select
+        id="f-sev"
+        v-model="minSeverity"
+        class="mt-1 rounded-md border border-gray-300 px-3 py-2"
+      >
+        <option value="critical">Critical</option>
+        <option value="high">High</option>
+        <option value="medium">Medium</option>
+        <option value="low">Low</option>
+        <option value="unknown">All</option>
+      </select>
+    </div>
+    <div>
+      <label for="f-target" class="block text-sm font-medium">Target</label>
+      <select
+        id="f-target"
+        v-model="target"
+        class="mt-1 max-w-xs rounded-md border border-gray-300 px-3 py-2"
+      >
+        <option value="">All targets</option>
+        <option v-for="t in targets" :key="t" :value="t">{{ t }}</option>
+      </select>
+    </div>
+    <div>
+      <label for="f-status" class="block text-sm font-medium">Status</label>
+      <select
+        id="f-status"
+        v-model="status"
+        class="mt-1 rounded-md border border-gray-300 px-3 py-2"
+      >
+        <option value="">Open + acknowledged</option>
+        <option value="open">Open</option>
+        <option value="acknowledged">Acknowledged</option>
+      </select>
+    </div>
+    <span class="pb-2 text-sm text-gray-500">{{ findings.length }} findings</span>
+  </div>
+
+  <FindingTable
+    class="mt-4"
+    :findings="findings"
+    :can-act="auth.isAdmin"
+    @status="setStatus"
+    @select="selected = $event"
+  />
+
+  <div
+    v-if="selected"
+    class="fixed inset-0 flex items-center justify-center bg-black/30"
+    @click.self="selected = null"
+  >
+    <div class="w-full max-w-lg rounded-lg bg-white p-6 shadow-lg" role="dialog">
+      <h2 class="font-mono text-lg font-semibold">{{ selected.cve_id }}</h2>
+      <p class="mt-2 text-sm">{{ selected.title }}</p>
+      <dl class="mt-4 grid grid-cols-3 gap-y-2 text-sm">
+        <dt class="text-gray-500">Severity</dt>
+        <dd class="col-span-2">{{ selected.severity }}</dd>
+        <dt class="text-gray-500">Package</dt>
+        <dd class="col-span-2 font-mono">
+          {{ selected.package }} {{ selected.installed_version }}
+        </dd>
+        <dt class="text-gray-500">Fixed in</dt>
+        <dd class="col-span-2 font-mono">{{ selected.fixed_version ?? 'no fix available' }}</dd>
+        <dt class="text-gray-500">Target</dt>
+        <dd class="col-span-2 font-mono break-all">{{ selected.target }}</dd>
+        <dt class="text-gray-500">First seen</dt>
+        <dd class="col-span-2">{{ new Date(selected.first_seen).toLocaleString() }}</dd>
+        <dt class="text-gray-500">Last seen</dt>
+        <dd class="col-span-2">{{ new Date(selected.last_seen).toLocaleString() }}</dd>
+      </dl>
+      <div class="mt-6 flex items-center justify-between">
+        <a
+          :href="selected.url"
+          target="_blank"
+          rel="noopener"
+          class="text-sm text-blue-600 hover:underline"
+          >Advisory</a
+        >
+        <div class="flex gap-2">
+          <RouterLink
+            v-if="selected.target_kind === 'os' && selected.fixed_version"
+            to="/updates"
+            class="rounded-md border border-gray-300 px-4 py-2 text-sm"
+          >
+            Go to updates
+          </RouterLink>
+          <button
+            class="rounded-md bg-blue-600 px-4 py-2 text-sm text-white"
+            @click="selected = null"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>