feat(app): show category badges on finding result rows (#154)

app/src/App.jsx

@@ -114,7 +114,14 @@ function FindingRow({ f, quarantineDir, onQuarantined, actionsDisabled = false }
 
   return (
     <li className={`finding verdict-${f.verdict}`}>
-      <span className="path">{f.entry.path}</span>
+      <span className="path">
+        {f.entry.path}
+        {f.category && (
+          <span className="category-badge">
+            {CATEGORY_LABEL[f.category] ?? f.category}
+          </span>
+        )}
+      </span>
       <span className="size">{humanBytes(f.entry.size)}</span>
       {/* Every reason, not just the matched rule: "referenced by 3
           projects" is what explains a risky row, and it is never the

app/src/App.test.mjs

@@ -75,6 +75,14 @@ test("capped lists retain the findings and duplicate-path styling hooks", () =>
   assert.match(jsx, /className="dup-paths"/);
 });
 
+test("finding rows display a category badge", () => {
+  assert.match(
+    jsx,
+    /<span className="category-badge">\s*\{CATEGORY_LABEL\[f\.category\] \?\? f\.category\}\s*<\/span>/,
+    "each finding row should show a readable category badge"
+  );
+});
+
 const liveRegion = /<p\s+className="sr-only"\s+aria-live="polite"[^>]*>([\s\S]*?)<\/p>/.exec(
   jsx
 );

app/src/styles.css

@@ -105,6 +105,22 @@ button { padding: 0.6rem 1.4rem; font-size: 1rem; cursor: pointer; }
   border-radius: 6px;
 }
 .path { grid-column: 1; font-family: ui-monospace, monospace; font-size: 0.85rem; overflow-wrap: anywhere; }
+/* Category badge: small, visually quiet classification badge on finding rows */
+.category-badge {
+  display: inline-block;
+  margin-left: 0.5rem;
+  padding: 0.15rem 0.45rem;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 0.72rem;
+  font-weight: 500;
+  line-height: 1.2;
+  border-radius: 4px;
+  background: rgba(128, 128, 128, 0.14);
+  border: 1px solid rgba(128, 128, 128, 0.25);
+  opacity: 0.85;
+  white-space: nowrap;
+  vertical-align: middle;
+}
 .size { grid-column: 2; font-size: 0.82rem; opacity: 0.8; white-space: nowrap; font-variant-numeric: tabular-nums; }
 /* min-width pins the auto column to the widest state (the confirm
    cluster), so idle → confirm → working swaps don't resize the row and

app/src/styles.test.mjs

@@ -95,3 +95,9 @@ test("preview rows have a quiet non-action label", () => {
   assert.match(css, /\.preview-note\s*\{/);
   assert.match(css, /\.preview-only\s*\{[^}]*opacity\s*:/s);
 });
+
+test("category badges have quiet styling", () => {
+  assert.match(css, /\.category-badge\s*\{/);
+  assert.match(css, /\.category-badge\s*\{[^}]*font-size\s*:/s);
+});
+

changelog.d/154-category-badges-on-result-rows.added.md

@@ -0,0 +1,2 @@
+- Display small, readable category badges on finding result rows so users can
+  scan and identify result categories faster.