feat: add check detail view with styling and routing integration

frontend/app.js

@@ -21,6 +21,7 @@ import { showVulnDetail, exportVulnDetailHtml, exportVulnDetailMarkdown } from "
 import { showRepoDetail } from "./js/details/repoDetail.js";
 import { closeDetail } from "./js/details/panel.js";
 import { showTeamDetail, switchToTeams, setTeamSort, setTeamFilter, toggleTeamCheckRow, filterVulnsByTeam, filterUnownedRepos, showTeamAdmin } from "./js/views/teams.js";
+import { backFromCheckDetail } from "./js/views/checkDetail.js";
 import { exportTeamReport } from "./js/utils/download.js";
 
 // ---------------------------------------------------------------------------
@@ -45,6 +46,7 @@ window.filterVulnsByTeam = filterVulnsByTeam;
 window.showTeamAdmin = showTeamAdmin;
 window.exportTeamReport = exportTeamReport;
 window.filterUnownedRepos = filterUnownedRepos;
+window.backFromCheckDetail = backFromCheckDetail;
 window.downloadTeamMapping = () => downloadTeamMappingJson();
 window.saveTeamMeta = function(teamId) {
   const slackInput   = document.getElementById("admin-slack");

frontend/css/checkDetail.css

@@ -0,0 +1,147 @@
+/* ================================================================
+   Sjekk-detaljvisning
+   ================================================================ */
+
+/* ── Header ── */
+.check-detail-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1.25rem 1.5rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  margin-bottom: 1.5rem;
+}
+
+.back-btn {
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 0.85rem;
+  padding: 0.35rem 0.75rem;
+  transition: color var(--transition), border-color var(--transition);
+  white-space: nowrap;
+}
+.back-btn:hover {
+  color: var(--text);
+  border-color: var(--border-light);
+}
+
+.check-detail-icon {
+  font-size: 1.75rem;
+  line-height: 1;
+}
+
+.check-detail-titles {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.check-detail-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--text);
+  margin: 0;
+}
+
+.check-detail-subtitle {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0;
+}
+
+/* ── Sections ── */
+.check-detail-sections {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+/* Top border accent per seksjon */
+.check-detail-failing {
+  border-top: 3px solid var(--severity-critical);
+}
+
+.check-detail-passing {
+  border-top: 3px solid var(--success);
+}
+
+.check-detail-na {
+  border-top: 3px solid var(--border-light);
+}
+
+/* ── Prosjektgruppe ── */
+.check-detail-project-group {
+  margin-bottom: 0.5rem;
+}
+.check-detail-project-group:last-child {
+  margin-bottom: 0;
+}
+
+.check-detail-project-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 0.25rem;
+}
+
+.check-detail-project-count {
+  font-size: 0.78rem;
+  color: var(--text-muted);
+}
+
+/* ── Repo-rad ── */
+.check-detail-repo-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.check-detail-repo-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: background var(--transition);
+}
+
+.check-detail-repo-row:hover {
+  background: var(--bg-card-hover);
+}
+
+.check-detail-repo-left {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  min-width: 0;
+}
+
+.check-detail-repo-right {
+  flex-shrink: 0;
+  margin-left: 1rem;
+}
+
+.check-detail-assessment {
+  font-size: 0.78rem;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 60vw;
+}
+
+.check-detail-empty {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  padding: 0.5rem 0;
+  margin: 0;
+}

frontend/css/dashboard.css

@@ -117,6 +117,14 @@
   grid-template-columns: 180px 1fr 60px;
   align-items: center;
   gap: 0.75rem;
+  border-radius: var(--radius);
+  padding: 0.25rem 0.4rem;
+  margin: 0 -0.4rem;
+  transition: background var(--transition);
+}
+
+.coverage-row:hover {
+  background: var(--bg-card-hover);
 }
 
 .coverage-label {

frontend/index.html

@@ -337,6 +337,11 @@ <h4 class="filter-label">Team</h4>
     <section id="view-team-admin" class="view hidden">
       <div id="team-admin-container"></div>
     </section>
+
+    <!-- ── Sjekk-detaljside ── -->
+    <section id="view-check-detail" class="view hidden">
+      <div id="check-detail-container"></div>
+    </section>
   </main>
 
   <!-- ====== Detaljpanel (slide-in) ====== -->

frontend/js/state.js

@@ -23,6 +23,8 @@ export const state = {
   teamsConfig: null,
   /** Aktiv team-ID for detaljvisning (null = team-liste). */
   activeTeam: null,
+  /** Aktiv sjekk-ID for sjekk-detaljvisning (null = ingen). */
+  activeCheck: null,
   /** Filtre og sortering i Teams-fanen. */
   teamFilters: {
     sortBy: "score",       // "score" | "name" | "repos"

frontend/js/views/checkDetail.js

@@ -0,0 +1,150 @@
+/* ================================================================
+   Argus Frontend — Sjekk-detaljvisning
+   Viser alle repos fordelt på "avvik" og "består", sortert
+   etter Bitbucket-prosjekt, deretter repo.
+   ================================================================ */
+"use strict";
+
+import { state } from "../state.js";
+import { $, escapeHtml } from "../utils/dom.js";
+import { CHECK_LABELS, CHECK_ICONS } from "../constants/checkLabels.js";
+import { assessmentLevel } from "../utils/assessment.js";
+import { switchView } from "./router.js";
+
+export function renderCheckDetail() {
+  const checkId = state.activeCheck;
+  const container = $("#check-detail-container");
+
+  if (!checkId || !state.report) {
+    switchView("summary");
+    return;
+  }
+
+  const report = state.report;
+  const label = CHECK_LABELS[checkId] || checkId;
+  const icon  = CHECK_ICONS[checkId]  || "📋";
+
+  // Sorter repos: prosjekt stigende, deretter repo stigende
+  const allRepos = [...report.repos].sort((a, b) => {
+    const proj = a.project.localeCompare(b.project, "nb");
+    return proj !== 0 ? proj : a.repo.localeCompare(b.repo, "nb");
+  });
+
+  const failing = allRepos.filter(r => {
+    const level = assessmentLevel(r, checkId);
+    return level === "action" || level === "fail" || level === "unknown";
+  });
+
+  const passing = allRepos.filter(r => assessmentLevel(r, checkId) === "pass");
+  const na      = allRepos.filter(r => assessmentLevel(r, checkId) === "na");
+
+  container.innerHTML = `
+    <div class="check-detail-header">
+      <button class="back-btn" onclick="backFromCheckDetail()">← Tilbake</button>
+      <span class="check-detail-icon">${icon}</span>
+      <div class="check-detail-titles">
+        <h2 class="check-detail-title">${escapeHtml(label)}</h2>
+        <p class="check-detail-subtitle">
+          <span class="badge badge-critical">${failing.length} avvik</span>
+          <span class="badge badge-success">${passing.length} består</span>
+          ${na.length > 0 ? `<span class="badge badge-na">${na.length} ikke aktuelt</span>` : ""}
+        </p>
+      </div>
+    </div>
+
+    <div class="check-detail-sections">
+      ${renderRepoSection(failing, checkId, "avvik", "check-detail-failing")}
+      ${renderRepoSection(passing, checkId, "består", "check-detail-passing")}
+      ${na.length > 0 ? renderRepoSection(na, checkId, "ikke aktuelt", "check-detail-na") : ""}
+    </div>
+  `;
+}
+
+function renderRepoSection(repos, checkId, sectionLabel, sectionClass) {
+  const isEmpty = repos.length === 0;
+  const isFailing = sectionClass === "check-detail-failing";
+  const isPassing = sectionClass === "check-detail-passing";
+
+  const title = isFailing
+    ? `Repos med avvik (${repos.length})`
+    : isPassing
+      ? `Repos som består (${repos.length})`
+      : `Ikke aktuelt (${repos.length})`;
+
+  if (isEmpty) {
+    const emptyMsg = isFailing
+      ? "✅ Ingen repos med avvik — alle er på stell!"
+      : "Ingen repos.";
+    return `
+      <div class="card ${sectionClass}">
+        <h3 class="card-title">${escapeHtml(title)}</h3>
+        <p class="check-detail-empty">${emptyMsg}</p>
+      </div>
+    `;
+  }
+
+  // Grupper etter prosjekt
+  const byProject = {};
+  for (const repo of repos) {
+    if (!byProject[repo.project]) byProject[repo.project] = [];
+    byProject[repo.project].push(repo);
+  }
+
+  const projectBlocks = Object.keys(byProject).sort((a, b) => a.localeCompare(b, "nb")).map(project => {
+    const repoRows = byProject[project].map(repo => buildRepoRow(repo, checkId, isFailing)).join("");
+    return `
+      <div class="check-detail-project-group">
+        <div class="check-detail-project-header">
+          <span class="project-tag">${escapeHtml(project)}</span>
+          <span class="check-detail-project-count">${byProject[project].length} repo${byProject[project].length !== 1 ? "s" : ""}</span>
+        </div>
+        <div class="check-detail-repo-list">${repoRows}</div>
+      </div>
+    `;
+  }).join("");
+
+  return `
+    <div class="card ${sectionClass}">
+      <h3 class="card-title">${escapeHtml(title)}</h3>
+      ${projectBlocks}
+    </div>
+  `;
+}
+
+function buildRepoRow(repo, checkId, showAssessment) {
+  const level      = assessmentLevel(repo, checkId);
+  const assessment = repo.assessments?.[checkId] || "";
+
+  let levelBadge = "";
+  if (level === "action") {
+    levelBadge = '<span class="badge badge-critical">Tiltak</span>';
+  } else if (level === "fail" || level === "unknown") {
+    levelBadge = '<span class="badge badge-high">Avvik</span>';
+  } else if (level === "pass") {
+    levelBadge = '<span class="badge badge-success">✓</span>';
+  } else {
+    levelBadge = '<span class="badge badge-na">—</span>';
+  }
+
+  const assessmentHtml = showAssessment && assessment
+    ? `<span class="check-detail-assessment">${escapeHtml(assessment)}</span>`
+    : "";
+
+  return `
+    <div class="check-detail-repo-row" onclick="showRepoDetail('${escapeHtml(repo.project)}', '${escapeHtml(repo.repo)}')">
+      <div class="check-detail-repo-left">
+        <span class="repo-name">${escapeHtml(repo.repo)}</span>
+        ${assessmentHtml}
+      </div>
+      <div class="check-detail-repo-right">
+        ${levelBadge}
+      </div>
+    </div>
+  `;
+}
+
+/** Naviger tilbake til sammendrag-visningen. */
+export function backFromCheckDetail() {
+  state.activeCheck = null;
+  switchView("summary");
+}

frontend/js/views/repos.js

@@ -136,12 +136,8 @@ export function filterByProject(project) {
   switchView("vulnerabilities");
 }
 
-/** Drill-down fra sjekk-breakdown — bytter til riktig fane. */
+/** Drill-down fra sjekk-breakdown — åpner sjekk-detaljsiden. */
 export function filterByCheck(checkId) {
-  if (checkId === "dep-vulns") {
-    state.vulnFilters = { severity: [], ecosystem: [], projects: [], fixAvailable: [], team: [] };
-    switchView("vulnerabilities");
-  } else {
-    switchView("repos");
-  }
+  state.activeCheck = checkId;
+  switchView("check-detail");
 }

frontend/js/views/router.js

@@ -9,6 +9,7 @@ import { renderSummary } from "./summary.js";
 import { renderExplorer } from "./vulnerabilities.js";
 import { renderRepos } from "./repos.js";
 import { renderTeamList, renderTeamDetail, renderTeamAdmin } from "./teams.js";
+import { renderCheckDetail } from "./checkDetail.js";
 
 /** Bytt aktiv visning og rendre den. */
 export function switchView(view) {
@@ -44,5 +45,9 @@ export function renderActiveView() {
       if (!state.hasTeams || !state.activeTeam) { switchView("teams"); return; }
       renderTeamAdmin(state.activeTeam);
       break;
+    case "check-detail":
+      if (!state.activeCheck) { switchView("summary"); return; }
+      renderCheckDetail();
+      break;
   }
 }

frontend/js/views/summary.js

@@ -85,7 +85,7 @@ function renderCoverageChart() {
     const label = CHECK_LABELS[checkId] || checkId;
 
     html += `
-      <div class="coverage-row">
+      <div class="coverage-row" style="cursor:pointer" onclick="filterByCheck('${escapeHtml(checkId)}')">
         <span class="coverage-label" title="${escapeHtml(label)}">${escapeHtml(label)}</span>
         <div class="coverage-bar-bg">
           <div class="coverage-bar-fill ${colorClass}" style="width: ${pct}%"></div>

frontend/styles.css

@@ -16,4 +16,5 @@
 @import url("./css/modal.css");
 @import url("./css/toast.css");
 @import url("./css/docs.css");
+@import url("./css/checkDetail.css");
 @import url("./css/responsive.css");