fix(sidepanel): add CRITICAL severity filter/cards, description, proper severity ordering

extension/sidepanel.js

@@ -1,5 +1,8 @@
 /**
- * ClauseGuard — Side Panel (redesigned)
+ * ClauseGuard — Side Panel v4.3
+ *
+ * FIXED v4.3: Added CRITICAL severity support (filter, cards, icons, descriptions).
+ * FIXED v4.3: Severity ordering now uses numeric mapping consistently.
  */
 
 const DESCS = {
@@ -13,8 +16,12 @@ const DESCS = {
   "Arbitration": "You waive your right to sue in court.",
 };
 
+// Severity numeric ordering (higher = more severe)
+const SEV_ORDER = { CRITICAL: 4, HIGH: 3, MEDIUM: 2, LOW: 1 };
+
 // SVG icons for severity
 const SEV_ICONS = {
+  CRITICAL: '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>',
   HIGH: '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>',
   MEDIUM: '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>',
   LOW: '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
@@ -51,10 +58,20 @@ async function loadResults() {
   pf.style.width = `${results.risk_score}%`;
   pf.style.background = results.risk_score >= 60 ? "#ef4444" : results.risk_score >= 30 ? "#f59e0b" : "#22c55e";
 
-  // Counts
-  const counts = { HIGH: 0, MEDIUM: 0, LOW: 0 };
+  // FIX v4.3: Count CRITICAL severity too
+  const counts = { CRITICAL: 0, HIGH: 0, MEDIUM: 0, LOW: 0 };
   const flagged = results.results.filter(r => r.categories?.length > 0);
-  flagged.forEach(r => r.categories.forEach(c => { if (counts[c.severity] !== undefined) counts[c.severity]++; }));
+  flagged.forEach(r => r.categories.forEach(c => {
+    if (counts[c.severity] !== undefined) counts[c.severity]++;
+    else counts.MEDIUM++; // Default unknown to MEDIUM
+  }));
+
+  // Show CRITICAL count in the filter if any exist
+  const fcCrit = document.getElementById("fc-crit");
+  const critFilter = document.getElementById("filter-critical");
+  if (fcCrit) fcCrit.textContent = counts.CRITICAL;
+  if (critFilter) critFilter.style.display = counts.CRITICAL > 0 ? "flex" : "none";
+
   document.getElementById("fc-high").textContent = counts.HIGH;
   document.getElementById("fc-med").textContent = counts.MEDIUM;
   document.getElementById("fc-low").textContent = counts.LOW;
@@ -74,11 +91,10 @@ function renderClauses() {
 
   list.innerHTML = filtered.map((clause, i) => {
     const maxSev = clause.categories.reduce((m, c) => {
-      const o = { HIGH: 3, MEDIUM: 2, LOW: 1 };
-      return (o[c.severity] || 0) > (o[m] || 0) ? c.severity : m;
+      return (SEV_ORDER[c.severity] || 0) > (SEV_ORDER[m] || 0) ? c.severity : m;
     }, "LOW");
 
-    const tagMap = { HIGH: "tag-high", MEDIUM: "tag-medium", LOW: "tag-low" };
+    const tagMap = { CRITICAL: "tag-critical", HIGH: "tag-high", MEDIUM: "tag-medium", LOW: "tag-low" };
 
     const tags = clause.categories.map(c =>
       `<span class="tag ${tagMap[c.severity] || "tag-medium"}">${SEV_ICONS[c.severity] || ""} ${c.name}</span>`