From ecf21d7d58dad46e08f19b34ccc1a9341423074e Mon Sep 17 00:00:00 2001
From: teddyvj <teddy.vj@gmail.com>
Date: Sun, 13 Sep 2026 16:46:18 +0500
Subject: [PATCH] feat(app): show category badges on finding result rows (#154)

- Render category badges in FindingRow using CATEGORY_LABEL mapping
- Add quiet styling for .category-badge (0.72rem, subtle border and background)
- Inline inside .path to preserve finding grid layout and action pin alignment
- Add unit and style tests verifying badge rendering and styling
- Add changelog fragment in changelog.d
---
 app/src/App.jsx                                  |  9 ++++++++-
 app/src/App.test.mjs                             |  9 +++++++++
 app/src/styles.css                               | 16 ++++++++++++++++
 app/src/styles.test.mjs                          |  6 ++++++
 .../154-category-badges-on-result-rows.added.md  |  2 ++
 5 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 changelog.d/154-category-badges-on-result-rows.added.md

diff --git a/app/src/App.jsx b/app/src/App.jsx
index 3cef1e3..d5a6b83 100644
--- a/app/src/App.jsx
+++ b/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
diff --git a/app/src/App.test.mjs b/app/src/App.test.mjs
index d140d8b..6b1a459 100644
--- a/app/src/App.test.mjs
+++ b/app/src/App.test.mjs
@@ -74,3 +74,12 @@ test("capped lists retain the findings and duplicate-path styling hooks", () =>
   assert.match(jsx, /className="findings"/);
   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"
+  );
+});
+
diff --git a/app/src/styles.css b/app/src/styles.css
index 86b130c..687862b 100644
--- a/app/src/styles.css
+++ b/app/src/styles.css
@@ -89,6 +89,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
diff --git a/app/src/styles.test.mjs b/app/src/styles.test.mjs
index 5ecf8e9..ab8c2a0 100644
--- a/app/src/styles.test.mjs
+++ b/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);
+});
+
diff --git a/changelog.d/154-category-badges-on-result-rows.added.md b/changelog.d/154-category-badges-on-result-rows.added.md
new file mode 100644
index 0000000..f381d0d
--- /dev/null
+++ b/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.