Group repeated issues by rule code with expandable occurrences

DetailedScoreSection now collapses identical-rule occurrences into one
header row per rule code with an "× N" count badge, expandable to show
the underlying per-occurrence rows. Reduces noise on specs that emit
the same rule across many operations (e.g. owasp:api3:2019-define-
error-responses-401 firing once per endpoint).

Behaviour:
- One row per unique rule code. Groups sorted by severity asc, then
  occurrence count desc, then message.
- Occurrences <= 3 auto-expand; larger groups start collapsed. User can
  toggle either way.
- Single-occurrence groups have no count badge and behave like the old
  flat row — clicking opens the IssueModal directly.
- Each occurrence row shows a friendly operation label ("GET /users/{id}")
  when the path includes "paths" + an HTTP method, with the source line
  number as a chip; falls back to the joined path otherwise. Clicking
  an occurrence opens the IssueModal with that specific issue, so the
  existing AI-fix flow is preserved.
- Pagination now pages over unique groups, not raw issues. Footer shows
  "X of Y unique issues (Z total occurrences)" for clarity.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: martyndavies

apps/web/src/components/DetailedScoreSection/index.tsx

@@ -2,6 +2,8 @@
 
 import getScoreTextColor from "@/utils/get-score-test-color";
 import {
+  CaretDown,
+  CaretRight,
   FileMagnifyingGlass,
   Info,
   Lightning,
@@ -10,7 +12,7 @@ import {
   type Icon,
 } from "@phosphor-icons/react";
 import classNames from "classnames";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useModal } from "react-modal-hook";
 import IssueModal from "../IssueModal";
 
@@ -25,8 +27,16 @@ export type Issue = {
   };
 };
 
-const PAGE_LENGTH = 5;
-const INITIAL_LENGTH = 5;
+type GroupedIssue = {
+  code: string;
+  severity: number;
+  message: string;
+  occurrences: Issue[];
+};
+
+const INITIAL_GROUPS = 5;
+const PAGE_GROUPS = 5;
+const AUTO_EXPAND_THRESHOLD = 3;
 
 type SeverityKey = "error" | "warning" | "info" | "hint";
 
@@ -69,6 +79,63 @@ const SeverityTag = ({ severity }: { severity: number }) => {
   );
 };
 
+// Build a friendly operation label from a Spectral issue path.
+// e.g. ["paths", "/users/{id}", "get", "responses", "401"] -> "GET /users/{id}"
+// Falls back to the joined path when no HTTP verb is found.
+const HTTP_METHODS = new Set([
+  "get",
+  "post",
+  "put",
+  "patch",
+  "delete",
+  "options",
+  "head",
+  "trace",
+]);
+
+function describeOccurrence(issue: Issue): string {
+  const parts = issue.path.map(String);
+  const pathsIdx = parts.indexOf("paths");
+  if (pathsIdx >= 0 && pathsIdx + 2 < parts.length) {
+    const route = parts[pathsIdx + 1];
+    const method = parts[pathsIdx + 2];
+    if (HTTP_METHODS.has(method.toLowerCase())) {
+      return `${method.toUpperCase()} ${route}`;
+    }
+  }
+  return parts.join(".") || "(root)";
+}
+
+function groupIssues(issues: Issue[]): GroupedIssue[] {
+  const map = new Map<string, GroupedIssue>();
+  for (const issue of issues) {
+    const code = String(issue.code);
+    const existing = map.get(code);
+    if (existing) {
+      existing.occurrences.push(issue);
+      // Keep the most-severe representative for the group header (lower = worse).
+      if (issue.severity < existing.severity) {
+        existing.severity = issue.severity;
+        existing.message = issue.message;
+      }
+    } else {
+      map.set(code, {
+        code,
+        severity: issue.severity,
+        message: issue.message,
+        occurrences: [issue],
+      });
+    }
+  }
+  return Array.from(map.values()).sort((a, b) => {
+    if (a.severity !== b.severity) return a.severity - b.severity;
+    if (a.occurrences.length !== b.occurrences.length) {
+      return b.occurrences.length - a.occurrences.length;
+    }
+    return a.message.localeCompare(b.message);
+  });
+}
+
 const DetailedScoreSection = ({
   title,
   score,
@@ -84,16 +151,36 @@ const DetailedScoreSection = ({
   openapi: string;
   fileExtension: "json" | "yaml";
 }) => {
-  const [page, setPage] = useState(0);
   const scoreTextColor = getScoreTextColor(score);
   const titleSlug = title.toLowerCase().replace(" ", "-");
+
+  const groups = useMemo(() => groupIssues(issues), [issues]);
+  const groupCount = groups.length;
   const issueCount = issues.length;
+
+  const [page, setPage] = useState(0);
   const totalPages = Math.max(
     0,
-    Math.ceil((issueCount - INITIAL_LENGTH) / PAGE_LENGTH),
+    Math.ceil((groupCount - INITIAL_GROUPS) / PAGE_GROUPS),
   );
-  const [issueToView, setIssueToView] = useState<Issue | undefined>();
+  const visibleCount = page
+    ? PAGE_GROUPS * page + INITIAL_GROUPS
+    : INITIAL_GROUPS;
+  const visibleGroups = groups.slice(0, visibleCount);
 
+  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+  const isExpanded = (code: string, occurrenceCount: number) => {
+    if (code in expanded) return expanded[code];
+    return occurrenceCount <= AUTO_EXPAND_THRESHOLD;
+  };
+  const toggle = (code: string, occurrenceCount: number) => {
+    setExpanded((prev) => ({
+      ...prev,
+      [code]: !isExpanded(code, occurrenceCount),
+    }));
+  };
+
+  const [issueToView, setIssueToView] = useState<Issue | undefined>();
   const handleViewClick = (issue: Issue) => {
     setIssueToView(issue);
     showModal();
@@ -111,11 +198,6 @@ const DetailedScoreSection = ({
     );
   }, [issueToView]);
 
-  const visibleIssues = issues.slice(
-    0,
-    page ? PAGE_LENGTH * page + INITIAL_LENGTH : INITIAL_LENGTH,
-  );
-
   return (
     <section className="card mb-6 overflow-hidden p-0">
       <header className="border-border flex flex-col items-start justify-between gap-3 border-b p-5 md:flex-row md:items-center md:p-6">
@@ -164,37 +246,66 @@ const DetailedScoreSection = ({
                 <th className="text-fg-faint px-5 py-2.5 text-[11px] font-semibold tracking-[0.05em] uppercase">
                   Issue
                 </th>
+                <th className="text-fg-faint w-[100px] px-5 py-2.5 text-right text-[11px] font-semibold tracking-[0.05em] uppercase">
+                  Count
+                </th>
                 <th className="text-fg-faint w-[60px] px-5 py-2.5 text-[11px] font-semibold tracking-[0.05em] uppercase" />
               </tr>
             </thead>
             <tbody>
-              {visibleIssues.map((issue, index: number) => {
-                const onActivate = () => handleViewClick(issue);
-                return (
+              {visibleGroups.map((group, groupIndex) => {
+                const expandedNow = isExpanded(
+                  group.code,
+                  group.occurrences.length,
+                );
+                const single = group.occurrences.length === 1;
+                const Caret = expandedNow ? CaretDown : CaretRight;
+                const handleHeaderActivate = () => {
+                  if (single) {
+                    handleViewClick(group.occurrences[0]);
+                  } else {
+                    toggle(group.code, group.occurrences.length);
+                  }
+                };
+                return [
                   <tr
-                    key={`${titleSlug}-table-row-${index}`}
+                    key={`${titleSlug}-group-${groupIndex}`}
                     role="button"
                     tabIndex={0}
-                    aria-label={`View issue: ${issue.message}`}
-                    onClick={onActivate}
+                    aria-expanded={single ? undefined : expandedNow}
+                    aria-label={
+                      single
+                        ? `View issue: ${group.message}`
+                        : `${expandedNow ? "Collapse" : "Expand"} ${
+                            group.occurrences.length
+                          } occurrences of ${group.message}`
+                    }
+                    onClick={handleHeaderActivate}
                     onKeyDown={(event) => {
                       if (event.key === "Enter" || event.key === " ") {
                         event.preventDefault();
-                        onActivate();
+                        handleHeaderActivate();
                       }
                     }}
-                    className="border-bg-muted text-fg-secondary hover:bg-bg-subtle focus-visible:bg-bg-subtle focus-visible:outline-accent cursor-pointer border-b transition-colors last:border-b-0 focus-visible:outline-2 focus-visible:-outline-offset-2"
+                    className="border-bg-muted text-fg-secondary hover:bg-bg-subtle focus-visible:bg-bg-subtle focus-visible:outline-accent cursor-pointer border-b transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2"
                   >
                     <td className="px-5 py-3 align-top">
-                      <SeverityTag severity={issue.severity} />
+                      <SeverityTag severity={group.severity} />
                     </td>
                     <td className="px-5 py-3 align-top">
                       <span className="text-fg block break-words">
-                        {issue.message}
+                        {group.message}
                       </span>
-                      {typeof issue.code !== "undefined" && (
-                        <span className="text-fg-muted mt-1 block font-mono text-xs">
-                          {issue.code}
+                      <span className="text-fg-muted mt-1 block font-mono text-xs">
+                        {group.code}
+                      </span>
+                    </td>
+                    <td className="px-5 py-3 text-right align-top">
+                      {single ? (
+                        <span className="text-fg-faint text-xs">—</span>
+                      ) : (
+                        <span className="badge-numeric badge-neutral">
+                          × {group.occurrences.length}
                         </span>
                       )}
                     </td>
@@ -203,35 +314,84 @@ const DetailedScoreSection = ({
                         aria-hidden="true"
                         className="btn btn-ghost btn-icon"
                       >
-                        <FileMagnifyingGlass size={16} weight="regular" />
+                        {single ? (
+                          <FileMagnifyingGlass size={16} weight="regular" />
+                        ) : (
+                          <Caret size={16} weight="regular" />
+                        )}
                       </span>
                     </td>
-                  </tr>
-                );
+                  </tr>,
+                  !single &&
+                    expandedNow &&
+                    group.occurrences.map((occ, occIndex) => {
+                      const line = occ.range.start.line + 1;
+                      const where = describeOccurrence(occ);
+                      const onActivate = () => handleViewClick(occ);
+                      return (
+                        <tr
+                          key={`${titleSlug}-group-${groupIndex}-occ-${occIndex}`}
+                          role="button"
+                          tabIndex={0}
+                          aria-label={`View occurrence at ${where}, line ${line}`}
+                          onClick={onActivate}
+                          onKeyDown={(event) => {
+                            if (event.key === "Enter" || event.key === " ") {
+                              event.preventDefault();
+                              onActivate();
+                            }
+                          }}
+                          className="border-bg-muted text-fg-muted hover:bg-bg-subtle focus-visible:bg-bg-subtle focus-visible:outline-accent bg-bg-subtle/40 cursor-pointer border-b transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2"
+                        >
+                          <td className="px-5 py-2 align-top" />
+                          <td className="px-5 py-2 align-top">
+                            <div className="flex flex-col gap-1 pl-4">
+                              <span className="text-fg-secondary font-mono text-xs">
+                                {where}
+                              </span>
+                            </div>
+                          </td>
+                          <td className="px-5 py-2 text-right align-top">
+                            <span className="badge-numeric badge-neutral">
+                              L{line}
+                            </span>
+                          </td>
+                          <td className="px-3 py-2 text-right align-top">
+                            <span
+                              aria-hidden="true"
+                              className="btn btn-ghost btn-icon"
+                            >
+                              <FileMagnifyingGlass size={14} weight="regular" />
+                            </span>
+                          </td>
+                        </tr>
+                      );
+                    }),
+                ];
               })}
             </tbody>
           </table>
         </div>
       )}
 
-      {issueCount > INITIAL_LENGTH && (
+      {groupCount > INITIAL_GROUPS && (
         <div className="border-border bg-bg-subtle flex flex-col items-start gap-2 border-t px-5 py-4 md:flex-row md:items-center md:justify-between">
           <span className="text-fg-muted text-xs">
             Showing{" "}
             <span className="text-fg font-semibold">
-              {visibleIssues.length}
+              {visibleGroups.length}
             </span>{" "}
-            of <span className="text-fg font-semibold">{issueCount}</span>{" "}
-            issues
+            of <span className="text-fg font-semibold">{groupCount}</span>{" "}
+            unique issues ({issueCount} total occurrences)
           </span>
           <div className="flex flex-wrap gap-2">
-            {page < totalPages && issueCount > PAGE_LENGTH + INITIAL_LENGTH && (
+            {page < totalPages && groupCount > PAGE_GROUPS + INITIAL_GROUPS && (
               <button
                 type="button"
                 onClick={() => setPage(page + 1)}
                 className="btn btn-ghost btn-sm"
               >
-                Show {PAGE_LENGTH} more
+                Show {PAGE_GROUPS} more
               </button>
             )}
             {page < totalPages && (
@@ -240,7 +400,7 @@ const DetailedScoreSection = ({
                 onClick={() => setPage(totalPages)}
                 className="btn btn-outlined btn-sm"
               >
-                Show all {issueCount}
+                Show all {groupCount}
               </button>
             )}
             {page >= totalPages && (