refactor(html): refresh report layouts, findings cards, and metric delta badges

Author: orenlab

codeclone/_html_badges.py

@@ -131,12 +131,17 @@ def _stat_card(
     tone: str = "",
     css_class: str = "meta-item",
     glossary_tip_fn: Callable[[str], str] | None = None,
+    delta_new: int | None = None,
 ) -> str:
     """Unified stat-card renderer.
 
     Always emits the same HTML structure using ``.meta-item`` /
     ``.meta-label`` / ``.meta-value`` so every stat card shares the
     exact same design code.
+
+    *delta_new* — if provided and > 0, renders a ``+N new`` badge below
+    the detail line.  For "bad" metrics (complexity, coupling, etc.)
+    positive delta means regression → red; zero means no change → hidden.
     """
     tip_html = ""
     if glossary_tip_fn is not None:
@@ -148,12 +153,17 @@ def _stat_card(
     if detail:
         detail_html = f'<div class="kpi-detail">{_escape_html(detail)}</div>'
 
+    delta_html = ""
+    if delta_new is not None and delta_new > 0:
+        delta_html = f'<div class="kpi-delta kpi-delta--bad">+{delta_new} new</div>'
+
     tone_cls = f" dep-stat-{tone}" if tone else ""
 
     return (
         f'<div class="{_escape_attr(css_class)}{tone_cls}">'
         f'<div class="meta-label">{_escape_html(label)}{tip_html}</div>'
         f'<div class="meta-value">{_escape_html(str(value))}</div>'
         f"{detail_html}"
+        f"{delta_html}"
         "</div>"
     )

codeclone/_html_css.py

@@ -44,7 +44,7 @@ def _render_select(
     parts = [
         f'<select class="select" id="{_escape_attr(element_id)}" '
         f"{data_attr}>"
-        f'<option value="all">{_escape_html(all_label)}</option>',
+        f'<option value="">{_escape_html(all_label)}</option>',
     ]
     for value, display in options:
         sel = " selected" if selected == value else ""

codeclone/_html_filters.py

@@ -258,10 +258,10 @@
 
 _MODALS = """\
 (function initModals(){
-  let dlg=$('dialog.modal');
+  let dlg=$('#clone-info-modal');
   if(!dlg){
     dlg=document.createElement('dialog');
-    dlg.className='modal';
+    dlg.id='clone-info-modal';
     dlg.innerHTML='<div class="modal-head"><h2 id="modal-title">Info</h2>'
       +'<button class="modal-close" type="button" aria-label="Close">&times;</button></div>'
       +'<div class="modal-body" id="modal-body"></div>';
@@ -277,23 +277,26 @@
     const group=btn.closest('.group');
     if(!group)return;
     const d=group.dataset;
-    const lines=[];
-    if(d.matchRule)lines.push('<b>Match rule:</b> '+d.matchRule);
-    if(d.blockSize)lines.push('<b>Block size:</b> '+d.blockSize);
-    if(d.signatureKind)lines.push('<b>Signature:</b> '+d.signatureKind);
-    if(d.mergedRegions)lines.push('<b>Merged regions:</b> '+d.mergedRegions);
-    if(d.patternLabel)lines.push('<b>Pattern:</b> '+d.patternLabel);
-    if(d.hintLabel)lines.push('<b>Hint:</b> '+d.hintLabel);
-    if(d.hintConfidence)lines.push('<b>Hint confidence:</b> '+d.hintConfidence);
-    if(d.assertRatio)lines.push('<b>Assert ratio:</b> '+d.assertRatio);
-    if(d.consecutiveAsserts)lines.push('<b>Consecutive asserts:</b> '+d.consecutiveAsserts);
-    if(d.boilerplateAsserts)lines.push('<b>Boilerplate asserts:</b> '+d.boilerplateAsserts);
-    if(d.groupArity)lines.push('<b>Group arity:</b> '+d.groupArity);
-    if(d.cloneType)lines.push('<b>Clone type:</b> '+d.cloneType);
-    if(d.sourceKind)lines.push('<b>Source kind:</b> '+d.sourceKind);
-    if(d.spreadFiles)lines.push('<b>Spread:</b> '+d.spreadFunctions+' fn / '+d.spreadFiles+' files');
+    const items=[];
+    function add(label,val){if(val)items.push('<div><dt>'+label+'</dt><dd>'+val+'</dd></div>')}
+    add('Match rule',d.matchRule);
+    add('Block size',d.blockSize);
+    add('Signature',d.signatureKind);
+    add('Merged regions',d.mergedRegions);
+    add('Pattern',d.patternLabel);
+    add('Hint',d.hintLabel);
+    add('Hint confidence',d.hintConfidence);
+    add('Assert ratio',d.assertRatio);
+    add('Consecutive asserts',d.consecutiveAsserts);
+    add('Boilerplate asserts',d.boilerplateAsserts);
+    add('Group arity',d.groupArity);
+    add('Clone type',d.cloneType);
+    add('Source kind',d.sourceKind);
+    if(d.spreadFiles)add('Spread',d.spreadFunctions+' fn / '+d.spreadFiles+' files');
     dlg.querySelector('#modal-title').textContent='Group: '+groupId;
-    dlg.querySelector('#modal-body').innerHTML=lines.join('<br>')||'No metadata available.';
+    dlg.querySelector('#modal-body').innerHTML=items.length
+      ?'<dl class="info-dl">'+items.join('')+'</dl>'
+      :'<p class="muted">No metadata available.</p>';
     dlg.showModal();
   });
 })();

codeclone/_html_js.py

@@ -29,7 +29,7 @@
 from ._sections._suggestions import render_suggestions_panel
 
 if TYPE_CHECKING:
-    from ..models import GroupMapLike, StructuralFindingGroup, Suggestion
+    from ..models import GroupMapLike, MetricsDiff, StructuralFindingGroup, Suggestion
 
 
 def build_html_report(
@@ -45,6 +45,7 @@ def build_html_report(
     suggestions: Sequence[Suggestion] | None = None,
     structural_findings: Sequence[StructuralFindingGroup] | None = None,
     report_document: Mapping[str, object] | None = None,
+    metrics_diff: MetricsDiff | None = None,
     title: str = "CodeClone Report",
     context_lines: int = 3,
     max_snippet_lines: int = 220,
@@ -67,6 +68,7 @@ def build_html_report(
         suggestions=suggestions,
         structural_findings=structural_findings,
         report_document=report_document,
+        metrics_diff=metrics_diff,
         file_cache=file_cache,
         context_lines=context_lines,
         max_snippet_lines=max_snippet_lines,
@@ -222,7 +224,7 @@ def _tab_badge(count: int) -> str:
         "</div></div>"
     )
     finding_why_modal_html = (
-        '<dialog class="modal finding-why-modal" id="finding-why-modal" '
+        '<dialog class="finding-why-modal" id="finding-why-modal" '
         'aria-label="Why This Finding Was Reported">'
         '<div class="modal-head">'
         "<h2>Why This Finding Was Reported</h2>"
@@ -233,7 +235,7 @@ def _tab_badge(count: int) -> str:
         "</dialog>"
     )
     help_modal_html = (
-        '<dialog class="modal help-modal" id="help-modal" '
+        '<dialog class="help-modal" id="help-modal" '
         'aria-label="Help & Support">'
         '<div class="modal-head">'
         "<h2>Help &amp; Support</h2>"

codeclone/_html_report/_assemble.py

@@ -35,20 +35,6 @@ def insight_block(*, question: str, answer: str, tone: Tone = "info") -> str:
     )
 
 
-def summary_chip_row(parts: Sequence[str], *, css_class: str) -> str:
-    cleaned = [str(p).strip() for p in parts if str(p).strip()]
-    if not cleaned:
-        return ""
-    return (
-        f'<div class="{css_class}">'
-        + "".join(
-            f'<span class="group-explain-item">{_escape_html(p)}</span>'
-            for p in cleaned
-        )
-        + "</div>"
-    )
-
-
 def overview_cluster_header(title: str, subtitle: str | None = None) -> str:
     sub = (
         f'<p class="overview-cluster-copy">{_escape_html(subtitle)}</p>'
@@ -102,29 +88,30 @@ def overview_row_html(card: Mapping[str, object]) -> str:
     category = str(card.get("category", ""))
     title = str(card.get("title", ""))
     summary_text = str(card.get("summary", ""))
-    confidence_text = str(card.get("confidence", ""))
     location_text = str(card.get("location", ""))
-    count = _as_int(card.get("count"))
     spread = _as_mapping(card.get("spread"))
     spread_files = _as_int(spread.get("files"))
     spread_functions = _as_int(spread.get("functions"))
     clone_type = str(card.get("clone_type", "")).strip()
-    context_parts = [
+
+    # Compact context line: severity · source · category [· clone_type]
+    ctx_parts = [
         severity,
         source_kind_label(source_kind),
         category.replace("_", " "),
     ]
     if clone_type:
-        context_parts.append(clone_type)
-    context_text = " · ".join(p for p in context_parts if p)
-    stats = summary_chip_row(
-        (
-            f"count={count}",
-            f"spread={spread_functions} fn / {spread_files} files",
-            f"confidence={confidence_text}",
-        ),
-        css_class="overview-row-stats",
-    )
+        ctx_parts.append(clone_type)
+    context_text = " \u00b7 ".join(p for p in ctx_parts if p)
+
+    # Compact metadata: spread + location on one line
+    meta_parts: list[str] = []
+    if spread_files or spread_functions:
+        meta_parts.append(f"{spread_functions} fn / {spread_files} files")
+    if location_text:
+        meta_parts.append(location_text)
+    meta_text = " \u00b7 ".join(meta_parts)
+
     return (
         '<article class="overview-row" '
         f'data-severity="{_escape_attr(severity)}" '
@@ -135,8 +122,7 @@ def overview_row_html(card: Mapping[str, object]) -> str:
         "</div>"
         '<div class="overview-row-side">'
         f'<div class="overview-row-context">{_escape_html(context_text)}</div>'
-        f"{stats}"
-        f'<div class="overview-row-location">{_escape_html(location_text)}</div>'
+        f'<div class="overview-row-meta">{_escape_html(meta_text)}</div>'
         "</div>"
         "</article>"
     )

codeclone/_html_report/_components.py

@@ -15,7 +15,13 @@
 
 if TYPE_CHECKING:
     from .._html_snippets import _FileCache
-    from ..models import GroupItemLike, GroupMapLike, StructuralFindingGroup, Suggestion
+    from ..models import (
+        GroupItemLike,
+        GroupMapLike,
+        MetricsDiff,
+        StructuralFindingGroup,
+        Suggestion,
+    )
 
 _as_mapping = _coerce.as_mapping
 _as_sequence = _coerce.as_sequence
@@ -68,6 +74,9 @@ class ReportContext:
     derived_map: Mapping[str, object]
     integrity_map: Mapping[str, object]
 
+    # -- baseline diff --
+    metrics_diff: MetricsDiff | None
+
     # -- rendering config --
     file_cache: _FileCache
     context_lines: int
@@ -152,6 +161,7 @@ def build_context(
     suggestions: Sequence[Suggestion] | None = None,
     structural_findings: Sequence[StructuralFindingGroup] | None = None,
     report_document: Mapping[str, object] | None = None,
+    metrics_diff: MetricsDiff | None = None,
     file_cache: _FileCache,
     context_lines: int = 3,
     max_snippet_lines: int = 220,
@@ -269,6 +279,7 @@ def build_context(
         report_document=report_document_map,
         derived_map=derived_map,
         integrity_map=integrity_map,
+        metrics_diff=metrics_diff,
         file_cache=file_cache,
         context_lines=context_lines,
         max_snippet_lines=max_snippet_lines,

codeclone/_html_report/_context.py

@@ -579,7 +579,8 @@ def render_clones_panel(ctx: ReportContext) -> tuple[str, bool, int, int]:
             '<div class="global-novelty-head">'
             "<h2>Duplicate Scope</h2>"
             '<div class="novelty-tabs" role="tablist" aria-label="Baseline split filter">'
-            '<button class="btn novelty-tab" type="button" data-global-novelty="new">'
+            '<button class="btn novelty-tab" type="button" data-global-novelty="new" '
+            f'data-novelty-state="{"good" if total_new == 0 else "bad"}">'
             f'New duplicates <span class="novelty-count">{total_new}</span></button>'
             '<button class="btn novelty-tab" type="button" data-global-novelty="known">'
             f'Known duplicates <span class="novelty-count">{total_known}</span></button>'

codeclone/_html_report/_sections/_clones.py

@@ -31,7 +31,9 @@
 _as_sequence = _coerce.as_sequence
 
 
-def _health_gauge_html(score: float, grade: str) -> str:
+def _health_gauge_html(
+    score: float, grade: str, *, health_delta: int | None = None
+) -> str:
     """Render an SVG ring gauge for health score."""
     if score < 0:
         return _stat_card(
@@ -48,6 +50,17 @@ def _health_gauge_html(score: float, grade: str) -> str:
         color = "var(--warning)"
     else:
         color = "var(--error)"
+
+    delta_html = ""
+    if health_delta is not None and health_delta != 0:
+        if health_delta > 0:
+            cls = "health-ring-delta--up"
+            sign = "+"
+        else:
+            cls = "health-ring-delta--down"
+            sign = ""
+        delta_html = f'<div class="health-ring-delta {cls}">{sign}{health_delta}</div>'
+
     return (
         '<div class="meta-item overview-health-card">'
         '<div class="overview-health-inner">'
@@ -62,6 +75,7 @@ def _health_gauge_html(score: float, grade: str) -> str:
         '<div class="health-ring-label">'
         f'<div class="health-ring-score">{score:.0f}</div>'
         f'<div class="health-ring-grade">Grade {_escape_html(grade)}</div>'
+        f"{delta_html}"
         "</div></div></div></div>"
     )
 
@@ -138,6 +152,14 @@ def _answer_and_tone() -> tuple[str, Tone]:
 
     overview_answer, overview_tone = _answer_and_tone()
 
+    # -- MetricsDiff deltas --
+    md = ctx.metrics_diff
+    _new_complexity = len(md.new_high_risk_functions) if md else None
+    _new_coupling = len(md.new_high_coupling_classes) if md else None
+    _new_dead = len(md.new_dead_code) if md else None
+    _new_cycles = len(md.new_cycles) if md else None
+    _health_delta = md.health_delta if md else None
+
     # KPI cards
     kpis = [
         _stat_card(
@@ -158,6 +180,7 @@ def _answer_and_tone() -> tuple[str, Tone]:
                 f"max {complexity_summary.get('max', 'n/a')}"
             ),
             tip="Functions with cyclomatic complexity above threshold",
+            delta_new=_new_complexity,
         ),
         _stat_card(
             "High Coupling",
@@ -167,6 +190,7 @@ def _answer_and_tone() -> tuple[str, Tone]:
                 f"max {coupling_summary.get('max', 'n/a')}"
             ),
             tip="Classes with high coupling between objects (CBO)",
+            delta_new=_new_coupling,
         ),
         _stat_card(
             "Low Cohesion",
@@ -182,12 +206,14 @@ def _answer_and_tone() -> tuple[str, Tone]:
             dependency_cycle_count,
             detail=f"max depth {dependency_max_depth}",
             tip="Circular dependencies between project modules",
+            delta_new=_new_cycles,
         ),
         _stat_card(
             "Dead Code",
             dead_total,
             detail=f"{dead_high_conf} high-confidence",
             tip="Potentially unused functions, classes, or imports",
+            delta_new=_new_dead,
         ),
     ]
 
@@ -219,7 +245,9 @@ def _answer_and_tone() -> tuple[str, Tone]:
         + "</div></section>"
     )
 
-    health_gauge = _health_gauge_html(health_score, health_grade)
+    health_gauge = _health_gauge_html(
+        health_score, health_grade, health_delta=_health_delta
+    )
 
     return (
         insight_block(