feat: Updated vuln style

web/app/(app)/vulnerabilities/page.tsx

@@ -7,16 +7,21 @@ import { useAuth } from "@/components/AuthProvider";
 import { Button, Card } from "@/components/ui";
 import { AcceptDialog } from "@/components/vulnerabilities/AcceptDialog";
 import { DBFreshness } from "@/components/vulnerabilities/DBFreshness";
-import { FindingRow } from "@/components/vulnerabilities/FindingRow";
+import { PackageRow } from "@/components/vulnerabilities/PackageRow";
 import { SEVERITY_ORDER, SeverityBadge } from "@/components/vulnerabilities/SeverityVisuals";
+import { groupByPackage } from "@/lib/vulnPackages";
 
 /*
  * The fleet vulnerability board.
  *
- * Grouped by CVE, defaulting to open findings, with database freshness always
- * on screen. The three things this page must never do: imply freshness it does
- * not have, present an unsupported distribution as clean, or make one CVE on
- * forty servers look like forty problems.
+ * Grouped by package, defaulting to open findings, with database freshness
+ * always on screen. The three things this page must never do: imply freshness
+ * it does not have, present an unsupported distribution as clean, or make one
+ * upgrade look like several problems.
+ *
+ * The API groups by CVE; the rollup to packages happens here, in
+ * `lib/vulnPackages`, because a finding is still per-CVE everywhere it is
+ * stored, accepted or remediated.
  */
 
 const STATES: FindingState[] = ["open", "accepted", "fixed"];
@@ -41,6 +46,8 @@ export default function VulnerabilitiesPage() {
 
     const servers = useQuery({ queryKey: ["servers"], queryFn: () => api.listServers() });
 
+    const packages = useMemo(() => groupByPackage(groups.data ?? []), [groups.data]);
+
     const serverName = useMemo(() => {
         const byId = new Map((servers.data ?? []).map((s) => [s.server_id, s.hostname]));
         // Falls back to the raw id rather than an empty cell: an unnamed row is
@@ -142,10 +149,10 @@ export default function VulnerabilitiesPage() {
                     <div className="flex items-center justify-center py-20">
                         <div className="h-8 w-8 animate-spin rounded-full border-2 border-border border-t-accent" />
                     </div>
-                ) : groups.data && groups.data.length > 0 ? (
-                    groups.data.map((g) => (
-                        <FindingRow
-                            key={g.cve_id}
+                ) : packages.length > 0 ? (
+                    packages.map((g) => (
+                        <PackageRow
+                            key={g.package_name}
                             group={g}
                             serverName={serverName}
                             canAct={isAdmin}