codeclone 1.1.0__py3-none-any.whl → 1.2.0__py3-none-any.whl

codeclone/html_report.py

@@ -12,14 +12,16 @@ import html
 import itertools
 from dataclasses import dataclass
 from pathlib import Path
+from string import Template
 from typing import Any, Optional, Iterable
 
 from codeclone import __version__
 
 
-# ============================
+# ============================ 
 # Pairwise
-# ============================
+# ============================ 
+
 
 def pairwise(iterable: Iterable[Any]) -> Iterable[tuple[Any, Any]]:
     a, b = itertools.tee(iterable)
@@ -27,9 +29,10 @@ def pairwise(iterable: Iterable[Any]) -> Iterable[tuple[Any, Any]]:
     return zip(a, b)
 
 
-# ============================
+# ============================ 
 # Code snippet infrastructure
-# ============================
+# ============================ 
+
 
 @dataclass
 class _Snippet:
@@ -101,10 +104,14 @@ def _prefix_css(css: str, prefix: str) -> str:
         if not stripped:
             out_lines.append(line)
             continue
-        if stripped.startswith("/*") or stripped.startswith("*") or stripped.startswith("*/"):
+        if (
+            stripped.startswith("/*")
+            or stripped.startswith("*")
+            or stripped.startswith("*/")
+        ):
             out_lines.append(line)
             continue
-        # Selector lines usually end with `{`
+        # Selector lines usually end with `{
         if "{" in line:
             # naive prefix: split at "{", prefix selector part
             before, after = line.split("{", 1)
@@ -119,13 +126,13 @@ def _prefix_css(css: str, prefix: str) -> str:
 
 
 def _render_code_block(
-        *,
-        filepath: str,
-        start_line: int,
-        end_line: int,
-        file_cache: _FileCache,
-        context: int,
-        max_lines: int,
+    *,
+    filepath: str,
+    start_line: int,
+    end_line: int,
+    file_cache: _FileCache,
+    context: int,
+    max_lines: int,
 ) -> _Snippet:
     lines = file_cache.get_lines(filepath)
 
@@ -161,9 +168,10 @@ def _render_code_block(
     )
 
 
-# ============================
+# ============================ 
 # HTML report builder
-# ============================
+# ============================ 
+
 
 def _escape(v: Any) -> str:
     return html.escape("" if v is None else str(v))
@@ -176,701 +184,494 @@ def _group_sort_key(items: list[dict[str, Any]]) -> tuple[int, int]:
     )
 
 
-def build_html_report(
-        *,
-        func_groups: dict[str, list[dict[str, Any]]],
-        block_groups: dict[str, list[dict[str, Any]]],
-        title: str = "CodeClone Report",
-        context_lines: int = 3,
-        max_snippet_lines: int = 220,
-) -> str:
-    file_cache = _FileCache()
-
-    func_sorted = sorted(func_groups.items(), key=lambda kv: _group_sort_key(kv[1]))
-    block_sorted = sorted(block_groups.items(), key=lambda kv: _group_sort_key(kv[1]))
-
-    has_any = bool(func_sorted) or bool(block_sorted)
-
-    # Pygments CSS (scoped). Use modern GitHub-like styles when available.
-    # We scope per theme to support toggle without reloading.
-    pyg_dark_raw = _pygments_css("github-dark")
-    if not pyg_dark_raw:
-        pyg_dark_raw = _pygments_css("monokai")
-    pyg_light_raw = _pygments_css("github-light")
-    if not pyg_light_raw:
-        pyg_light_raw = _pygments_css("friendly")
-
-    pyg_dark = _prefix_css(pyg_dark_raw, "html[data-theme='dark']")
-    pyg_light = _prefix_css(pyg_light_raw, "html[data-theme='light']")
-
-    # ----------------------------
-    # Section renderer
-    # ----------------------------
-
-    def render_section(
-            section_id: str,
-            section_title: str,
-            groups: list[tuple[str, list[dict[str, Any]]]],
-            pill_cls: str,
-    ) -> str:
-        if not groups:
-            return ""
-
-        # build group DOM with data-search (for fast client-side search)
-        out: list[str] = [
-            f'<section id="{section_id}" class="section" data-section="{section_id}">',
-            '<div class="section-head">',
-            f"<h2>{_escape(section_title)} "
-            f'<span class="pill {pill_cls}" data-count-pill="{section_id}">{len(groups)} groups</span></h2>',
-            f"""
-<div class="section-toolbar" role="toolbar" aria-label="{_escape(section_title)} controls">
-  <div class="toolbar-left">
-    <div class="search-wrap">
-      <span class="search-ico">⌕</span>
-      <input class="search" id="search-{section_id}" placeholder="Search by qualname / path / fingerprint…" autocomplete="off" />
-      <button class="btn ghost" type="button" data-clear="{section_id}" title="Clear search">×</button>
-    </div>
-    <div class="segmented">
-      <button class="btn seg" type="button" data-collapse-all="{section_id}">Collapse</button>
-      <button class="btn seg" type="button" data-expand-all="{section_id}">Expand</button>
-    </div>
-  </div>
-
-  <div class="toolbar-right">
-    <div class="pager">
-      <button class="btn" type="button" data-prev="{section_id}">‹</button>
-      <span class="page-meta" data-page-meta="{section_id}">Page 1</span>
-      <button class="btn" type="button" data-next="{section_id}">›</button>
-    </div>
-    <select class="select" data-pagesize="{section_id}" title="Groups per page">
-      <option value="5">5 / page</option>
-      <option value="10" selected>10 / page</option>
-      <option value="20">20 / page</option>
-      <option value="50">50 / page</option>
-    </select>
-  </div>
-</div>
-""",
-            "</div>",  # section-head
-            '<div class="section-body">',
-        ]
-
-        for idx, (gkey, items) in enumerate(groups, start=1):
-            # Create search blob for group:
-            # - gkey (fingerprint)
-            # - all qualnames + filepaths
-            # This is used by JS filtering (no heavy DOM scans on each keystroke).
-            search_parts: list[str] = [str(gkey)]
-            for it in items:
-                search_parts.append(str(it.get("qualname", "")))
-                search_parts.append(str(it.get("filepath", "")))
-            search_blob = " ".join(search_parts).lower()
-            search_blob_escaped = html.escape(search_blob, quote=True)
-
-            out.append(
-                f'<div class="group" data-group="{section_id}" data-search="{search_blob_escaped}">'
-            )
-
-            out.append(
-                f'<div class="group-head">'
-                f'<div class="group-left">'
-                f'<button class="chev" type="button" aria-label="Toggle group" data-toggle-group="{section_id}-{idx}">▾</button>'
-                f'<div class="group-title">Group #{idx}</div>'
-                f'<span class="pill small {pill_cls}">{len(items)} items</span>'
-                f"</div>"
-                f'<div class="group-right">'
-                f'<code class="gkey">{_escape(gkey)}</code>'
-                f"</div>"
-                f"</div>"
-            )
-
-            out.append(f'<div class="items" id="group-body-{section_id}-{idx}">')
-
-            for a, b in pairwise(items):
-                out.append('<div class="item-pair">')
-
-                for item in (a, b):
-                    snippet = _render_code_block(
-                        filepath=item["filepath"],
-                        start_line=int(item["start_line"]),
-                        end_line=int(item["end_line"]),
-                        file_cache=file_cache,
-                        context=context_lines,
-                        max_lines=max_snippet_lines,
-                    )
-
-                    out.append(
-                        '<div class="item">'
-                        f'<div class="item-head">{_escape(item["qualname"])}</div>'
-                        f'<div class="item-file">'
-                        f'{_escape(item["filepath"])}:'
-                        f'{item["start_line"]}-{item["end_line"]}'
-                        f'</div>'
-                        f'{snippet.code_html}'
-                        '</div>'
-                    )
-
-                out.append("</div>")  # item-pair
-
-            out.append("</div>")  # items
-            out.append("</div>")  # group
-
-        out.append("</div>")  # section-body
-        out.append("</section>")
-        return "\n".join(out)
-
-    # ============================
-    # HTML
-    # ============================
-
-    empty_state_html = ""
-    if not has_any:
-        empty_state_html = """
-<div class="empty">
-  <div class="empty-card">
-    <div class="empty-icon">✓</div>
-    <h2>No code clones detected</h2>
-    <p>No structural or block-level duplication was found above configured thresholds.</p>
-    <p class="muted">This usually indicates healthy abstraction boundaries.</p>
-  </div>
-</div>
-"""
-
-    return f"""<!doctype html>
+REPORT_TEMPLATE = Template(r"""
+<!doctype html>
 <html lang="en" data-theme="dark">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>{_escape(title)}</title>
+<title>${title}</title>
 
 <style>
-/* ============================
+/* ============================ 
    CodeClone UI/UX
    ============================ */
 
-:root {{
-  --bg: #0b0f14;
-  --panel: rgba(255,255,255,0.04);
-  --panel2: rgba(255,255,255,0.06);
-  --text: rgba(255,255,255,0.92);
-  --muted: rgba(255,255,255,0.62);
-  --border: rgba(255,255,255,0.10);
-  --border2: rgba(255,255,255,0.14);
-  --accent: #6aa6ff;
-  --accent2: rgba(106,166,255,0.18);
-  --good: #7cffa0;
-  --shadow: 0 18px 60px rgba(0,0,0,.55);
-  --shadow2: 0 10px 26px rgba(0,0,0,.45);
-  --radius: 14px;
-  --radius2: 18px;
-  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-}}
-
-html[data-theme="light"] {{
-  --bg: #f6f8fb;
-  --panel: rgba(0,0,0,0.03);
-  --panel2: rgba(0,0,0,0.05);
-  --text: rgba(0,0,0,0.88);
-  --muted: rgba(0,0,0,0.55);
-  --border: rgba(0,0,0,0.10);
-  --border2: rgba(0,0,0,0.14);
-  --accent: #1f6feb;
-  --accent2: rgba(31,111,235,0.14);
-  --good: #1f883d;
-  --shadow: 0 18px 60px rgba(0,0,0,.12);
-  --shadow2: 0 10px 26px rgba(0,0,0,.10);
-}}
-
-* {{ box-sizing: border-box; }}
-
-body {{
+:root {
+  --bg: #0d1117;
+  --panel: #161b22;
+  --panel2: #21262d;
+  --text: #c9d1d9;
+  --muted: #8b949e;
+  --border: #30363d;
+  --border2: #6e7681;
+  --accent: #58a6ff;
+  --accent2: rgba(56, 139, 253, 0.15);
+  --good: #3fb950;
+  --shadow: 0 8px 24px rgba(0,0,0,0.5);
+  --shadow2: 0 4px 12px rgba(0,0,0,0.2);
+  --radius: 6px;
+  --radius2: 8px;
+  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+}
+
+html[data-theme="light"] {
+  --bg: #ffffff;
+  --panel: #f6f8fa;
+  --panel2: #eaeef2;
+  --text: #24292f;
+  --muted: #57606a;
+  --border: #d0d7de;
+  --border2: #afb8c1;
+  --accent: #0969da;
+  --accent2: rgba(84, 174, 255, 0.2);
+  --good: #1a7f37;
+  --shadow: 0 8px 24px rgba(140,149,159,0.2);
+  --shadow2: 0 4px 12px rgba(140,149,159,0.1);
+}
+
+* { box-sizing: border-box; }
+
+body {
   margin: 0;
-  background: radial-gradient(1200px 800px at 20% -10%, rgba(106,166,255,.18), transparent 45%),
-              radial-gradient(900px 600px at 80% 0%, rgba(124,255,160,.10), transparent 35%),
-              var(--bg);
+  background: var(--bg);
   color: var(--text);
-  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
-  line-height: 1.55;
-}}
+  font-family: var(--font);
+  line-height: 1.5;
+}
 
-.container {{
-  max-width: 1600px;
+.container {
+  max-width: 1400px;
   margin: 0 auto;
-  padding: 26px 22px 110px;
-}}
+  padding: 20px 20px 80px;
+}
 
-.topbar {{
+.topbar {
   position: sticky;
   top: 0;
-  z-index: 50;
-  backdrop-filter: blur(14px);
-  -webkit-backdrop-filter: blur(14px);
-  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0));
+  z-index: 100;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  background: var(--bg);
   border-bottom: 1px solid var(--border);
-  padding: 14px 0 12px;
-}}
+  opacity: 0.98;
+}
 
-.topbar-inner {{
+.topbar-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 14px;
-}}
+  height: 60px;
+  padding: 0 20px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
 
-.brand {{
+.brand {
   display: flex;
-  flex-direction: column;
-  gap: 3px;
-}}
+  align-items: center;
+  gap: 12px;
+}
 
-.brand h1 {{
+.brand h1 {
   margin: 0;
-  font-size: 22px;
-  letter-spacing: 0.2px;
-}}
+  font-size: 18px;
+  font-weight: 600;
+}
 
-.brand .sub {{
+.brand .sub {
   color: var(--muted);
-  font-size: 12.5px;
-}}
-
-.top-actions {{
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}}
+  font-size: 13px;
+  background: var(--panel2);
+  padding: 2px 8px;
+  border-radius: 99px;
+  font-weight: 500;
+}
 
-.btn {{
+.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  padding: 8px 10px;
-  border-radius: 10px;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 6px;
   border: 1px solid var(--border);
   background: var(--panel);
   color: var(--text);
   cursor: pointer;
-  user-select: none;
-  font-weight: 600;
-  font-size: 12.5px;
-  box-shadow: var(--shadow2);
-}}
+  font-size: 13px;
+  font-weight: 500;
+  transition: 0.2s;
+  height: 32px;
+}
 
-.btn:hover {{
+.btn:hover {
   border-color: var(--border2);
   background: var(--panel2);
-}}
-
-.btn:active {{
-  transform: translateY(1px);
-}}
+}
 
-.btn.ghost {{
+.btn.ghost {
   background: transparent;
-  box-shadow: none;
-}}
-
-.select {{
-  padding: 8px 10px;
-  border-radius: 10px;
+  border-color: transparent;
+  padding: 4px;
+  width: 28px;
+  height: 28px;
+}
+
+.select {
+  padding: 0 24px 0 8px;
+  height: 32px;
+  border-radius: 6px;
   border: 1px solid var(--border);
   background: var(--panel);
   color: var(--text);
-  font-weight: 600;
-  font-size: 12.5px;
-}}
+  font-size: 13px;
+}
 
-.section {{
-  margin-top: 22px;
-}}
+.section {
+  margin-top: 32px;
+}
 
-.section-head {{
+.section-head {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  margin-top: 18px;
-}}
+  gap: 16px;
+  margin-bottom: 16px;
+}
 
-.section-head h2 {{
+.section-head h2 {
   margin: 0;
-  font-size: 16px;
-  letter-spacing: 0.2px;
-}}
-
-.section-toolbar {{
+  font-size: 20px;
+  font-weight: 600;
   display: flex;
-  justify-content: space-between;
   align-items: center;
   gap: 12px;
-  flex-wrap: wrap;
-}}
+}
 
-.toolbar-left, .toolbar-right {{
+.section-toolbar {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 10px;
-}}
+  gap: 16px;
+  flex-wrap: wrap;
+  padding: 12px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
 
-.search-wrap {{
+.search-wrap {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 8px 10px;
-  border-radius: 12px;
+  padding: 4px 8px;
+  border-radius: 6px;
   border: 1px solid var(--border);
-  background: var(--panel);
-  box-shadow: var(--shadow2);
-  min-width: 320px;
-}}
-
-.search-ico {{
-  opacity: .72;
-  font-weight: 800;
-}}
+  background: var(--bg);
+  min-width: 300px;
+  height: 32px;
+}
+.search-wrap:focus-within {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent2);
+}
+
+.search-ico {
+  color: var(--muted);
+  display: flex;
+}
 
-.search {{
+.search {
   width: 100%;
   border: none;
   outline: none;
   background: transparent;
   color: var(--text);
   font-size: 13px;
-}}
-
-.search::placeholder {{
-  color: var(--muted);
-}}
+}
 
-.segmented {{
+.segmented {
   display: inline-flex;
-  border-radius: 12px;
-  overflow: hidden;
-  border: 1px solid var(--border);
-}}
+  background: var(--panel2);
+  padding: 2px;
+  border-radius: 6px;
+}
 
-.btn.seg {{
+.btn.seg {
   border: none;
-  border-radius: 0;
-  box-shadow: none;
   background: transparent;
-}}
+  height: 28px;
+  font-size: 12px;
+}
+.btn.seg:hover {
+  background: var(--bg);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+}
 
-.pager {{
+.pager {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-}}
-
-.page-meta {{
-  color: var(--muted);
-  font-size: 12.5px;
-  min-width: 120px;
-  text-align: center;
-}}
+  font-size: 13px;
+}
 
-.pill {{
-  padding: 4px 10px;
-  border-radius: 999px;
+.pill {
+  padding: 2px 10px;
+  border-radius: 99px;
   background: var(--accent2);
-  border: 1px solid rgba(106,166,255,0.25);
+  border: 1px solid rgba(56, 139, 253, 0.3);
   font-size: 12px;
-  font-weight: 800;
-  color: var(--text);
-}}
-
-.pill.small {{
-  padding: 3px 8px;
+  font-weight: 600;
+  color: var(--accent);
+}
+.pill.small {
+  padding: 1px 8px;
   font-size: 11px;
-}}
-
-.pill-func {{
-  background: rgba(106,166,255,0.14);
-  border-color: rgba(106,166,255,0.25);
-}}
-
-.pill-block {{
-  background: rgba(124,255,160,0.10);
-  border-color: rgba(124,255,160,0.22);
-}}
-
-.section-body {{
-  margin-top: 12px;
-}}
+}
+.pill-func {
+  color: var(--accent);
+  background: var(--accent2);
+}
+.pill-block {
+  color: var(--good);
+  background: rgba(63, 185, 80, 0.15);
+  border-color: rgba(63, 185, 80, 0.3);
+}
 
-.group {{
-  margin-top: 14px;
+.group {
+  margin-bottom: 16px;
   border: 1px solid var(--border);
-  border-radius: var(--radius2);
-  background: var(--panel);
-  box-shadow: var(--shadow);
-  overflow: hidden;
-}}
+  border-radius: 6px;
+  background: var(--bg);
+  box-shadow: var(--shadow2);
+}
 
-.group-head {{
+.group-head {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 12px;
-  padding: 12px 14px;
+  padding: 12px 16px;
+  background: var(--panel);
   border-bottom: 1px solid var(--border);
-}}
+  cursor: pointer;
+}
 
-.group-left {{
+.group-left {
   display: flex;
   align-items: center;
-  gap: 10px;
-}}
-
-.group-title {{
-  font-weight: 900;
-  font-size: 13px;
-}}
+  gap: 12px;
+}
 
-.group-right {{
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  max-width: 60%;
-}}
+.group-title {
+  font-weight: 600;
+  font-size: 14px;
+}
 
-.gkey {{
+.gkey {
   font-family: var(--mono);
-  font-size: 11.5px;
+  font-size: 12px;
   color: var(--muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}}
-
-.chev {{
-  width: 30px;
-  height: 30px;
-  border-radius: 10px;
-  border: 1px solid var(--border);
   background: var(--panel2);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.chev {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--muted);
+  padding: 0;
+}
+.chev:hover {
   color: var(--text);
-  cursor: pointer;
-  font-weight: 900;
-}}
+  border-color: var(--border2);
+}
 
-.items {{
-  padding: 14px;
-}}
+.items {
+  padding: 16px;
+}
 
-.item-pair {{
+.item-pair {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 14px;
-  margin-top: 14px;
-}}
-
-@media (max-width: 1100px) {{
-  .item-pair {{
+  gap: 16px;
+  margin-bottom: 16px;
+}
+.item-pair:last-child {
+  margin-bottom: 0;
+}
+
+@media (max-width: 1000px) {
+  .item-pair {
     grid-template-columns: 1fr;
-  }}
-  .search-wrap {{
-    min-width: 260px;
-  }}
-}}
+  }
+}
 
-.item {{
+.item {
   border: 1px solid var(--border);
-  border-radius: var(--radius);
+  border-radius: 6px;
   overflow: hidden;
-  background: rgba(0,0,0,0.10);
-}}
-
-html[data-theme="light"] .item {{
-  background: rgba(255,255,255,0.60);
-}}
+  display: flex;
+  flex-direction: column;
+}
 
-.item-head {{
-  padding: 10px 12px;
-  font-weight: 900;
-  font-size: 12.8px;
+.item-head {
+  padding: 8px 12px;
+  background: var(--panel);
   border-bottom: 1px solid var(--border);
-}}
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--accent);
+}
 
-.item-file {{
+.item-file {
   padding: 6px 12px;
+  background: var(--panel2);
+  border-bottom: 1px solid var(--border);
   font-family: var(--mono);
-  font-size: 11.5px;
+  font-size: 11px;
   color: var(--muted);
-  border-bottom: 1px solid var(--border);
-}}
+}
 
-.codebox {{
+.codebox {
   margin: 0;
   padding: 12px;
   font-family: var(--mono);
-  font-size: 12.5px;
+  font-size: 12px;
+  line-height: 1.5;
   overflow: auto;
-  background: rgba(0,0,0,0.18);
-}}
-
-html[data-theme="light"] .codebox {{
-  background: rgba(0,0,0,0.03);
-}}
-
-.line {{
-  white-space: pre;
-}}
+  background: var(--bg);
+  flex: 1;
+}
 
-.hitline {{
-  white-space: pre;
-  background: rgba(255, 184, 107, .18);
-}}
-
-.empty {{
-  margin-top: 34px;
+.empty {
+  padding: 60px 0;
   display: flex;
   justify-content: center;
-}}
-
-.empty-card {{
-  max-width: 640px;
-  border-radius: 22px;
-  border: 1px solid var(--border);
-  background: var(--panel);
-  box-shadow: var(--shadow);
-  padding: 26px 26px;
+}
+.empty-card {
   text-align: center;
-}}
-
-.empty-icon {{
-  font-size: 52px;
+  padding: 40px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  max-width: 500px;
+}
+.empty-icon {
   color: var(--good);
-  font-weight: 900;
-  margin-bottom: 8px;
-}}
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: center;
+}
 
-.footer {{
-  margin-top: 40px;
+.footer {
+  margin-top: 60px;
   text-align: center;
   color: var(--muted);
   font-size: 12px;
-}}
-
-.muted {{
-  color: var(--muted);
-}}
+  border-top: 1px solid var(--border);
+  padding-top: 24px;
+}
 
-/* ============================
-   Pygments CSS (SCOPED)
-   IMPORTANT: without this, `nowrap=True` output won't be colored.
-   ============================ */
-{pyg_dark}
-{pyg_light}
+${pyg_dark}
+${pyg_light}
 </style>
 </head>
 
 <body>
 <div class="topbar">
-  <div class="container">
-    <div class="topbar-inner">
-      <div class="brand">
-        <h1>{_escape(title)}</h1>
-        <div class="sub">AST + CFG clone detection • CodeClone v{__version__}</div>
-      </div>
-
-      <div class="top-actions">
-        <button class="btn" type="button" id="theme-toggle" title="Toggle theme">🌓 Theme</button>
-      </div>
+  <div class="topbar-inner">
+    <div class="brand">
+      <h1>${title}</h1>
+      <div class="sub">v${version}</div>
+    </div>
+    <div class="top-actions">
+      <button class="btn" type="button" id="theme-toggle" title="Toggle theme">${icon_theme} Theme</button>
     </div>
   </div>
 </div>
 
 <div class="container">
-{empty_state_html}
+${empty_state_html}
 
-{render_section("functions", "Function clones (Type-2)", func_sorted, "pill-func")}
-{render_section("blocks", "Block clones (Type-3-lite)", block_sorted, "pill-block")}
+${func_section}
+${block_section}
 
-<div class="footer">Generated by CodeClone v{__version__}</div>
+<div class="footer">Generated by CodeClone v${version}</div>
 </div>
 
 <script>
-(() => {{
-  // ----------------------------
-  // Theme toggle
-  // ----------------------------
+(() => {
   const htmlEl = document.documentElement;
   const btnTheme = document.getElementById("theme-toggle");
 
   const stored = localStorage.getItem("codeclone_theme");
-  if (stored === "light" || stored === "dark") {{
+  if (stored === "light" || stored === "dark") {
     htmlEl.setAttribute("data-theme", stored);
-  }}
+  }
 
-  btnTheme?.addEventListener("click", () => {{
+  btnTheme?.addEventListener("click", () => {
     const cur = htmlEl.getAttribute("data-theme") || "dark";
     const next = cur === "dark" ? "light" : "dark";
     htmlEl.setAttribute("data-theme", next);
     localStorage.setItem("codeclone_theme", next);
-  }});
-
-  // ----------------------------
-  // Group collapse toggles
-  // ----------------------------
-  document.querySelectorAll("[data-toggle-group]").forEach((btn) => {{
-    btn.addEventListener("click", () => {{
+  });
+
+  // Toggle group visibility via header click
+  document.querySelectorAll(".group-head").forEach((head) => {
+    head.addEventListener("click", (e) => {
+      if (e.target.closest("button")) return;
+      const btn = head.querySelector("[data-toggle-group]");
+      if (btn) btn.click();
+    });
+  });
+
+  document.querySelectorAll("[data-toggle-group]").forEach((btn) => {
+    btn.addEventListener("click", () => {
       const id = btn.getAttribute("data-toggle-group");
       const body = document.getElementById("group-body-" + id);
       if (!body) return;
 
       const isHidden = body.style.display === "none";
       body.style.display = isHidden ? "" : "none";
-      btn.textContent = isHidden ? "▾" : "▸";
-    }});
-  }});
-
-  // ----------------------------
-  // Search + Pagination ("soft virtualization")
-  // ----------------------------
-  function initSection(sectionId) {{
-    const section = document.querySelector(`section[data-section='${{sectionId}}']`);
-    if (!section) return;
-
-    const groups = Array.from(section.querySelectorAll(`.group[data-group='${{sectionId}}']`));
-    const searchInput = document.getElementById(`search-${{sectionId}}`);
-
-    const btnPrev = section.querySelector(`[data-prev='${{sectionId}}']`);
-    const btnNext = section.querySelector(`[data-next='${{sectionId}}']`);
-    const meta = section.querySelector(`[data-page-meta='${{sectionId}}']`);
-    const selPageSize = section.querySelector(`[data-pagesize='${{sectionId}}']`);
+      btn.style.transform = isHidden ? "rotate(0deg)" : "rotate(-90deg)";
+    });
+  });
 
-    const btnClear = section.querySelector(`[data-clear='${{sectionId}}']`);
-    const btnCollapseAll = section.querySelector(`[data-collapse-all='${{sectionId}}']`);
-    const btnExpandAll = section.querySelector(`[data-expand-all='${{sectionId}}']`);
-    const pill = section.querySelector(`[data-count-pill='${{sectionId}}']`);
+  function initSection(sectionId) {
+    const section = document.querySelector(`section[data-section='$${sectionId}']`);
+    if (!section) return;
 
-    const state = {{
+    const groups = Array.from(section.querySelectorAll(`.group[data-group='$${sectionId}']`));
+    const searchInput = document.getElementById(`search-$${sectionId}`);
+    const btnPrev = section.querySelector(`[data-prev='$${sectionId}']`);
+    const btnNext = section.querySelector(`[data-next='$${sectionId}']`);
+    const meta = section.querySelector(`[data-page-meta='$${sectionId}']`);
+    const selPageSize = section.querySelector(`[data-pagesize='$${sectionId}']`);
+    const btnClear = section.querySelector(`[data-clear='$${sectionId}']`);
+    const btnCollapseAll = section.querySelector(`[data-collapse-all='$${sectionId}']`);
+    const btnExpandAll = section.querySelector(`[data-expand-all='$${sectionId}']`);
+    const pill = section.querySelector(`[data-count-pill='$${sectionId}']`);
+
+    const state = {
       q: "",
       page: 1,
       pageSize: parseInt(selPageSize?.value || "10", 10),
       filtered: groups
-    }};
+    };
 
-    function setGroupVisible(el, yes) {{
+    function setGroupVisible(el, yes) {
       el.style.display = yes ? "" : "none";
-    }}
-
-    function applyFilter() {{
-      const q = (state.q || "").trim().toLowerCase();
-      if (!q) {{
-        state.filtered = groups;
-      }} else {{
-        state.filtered = groups.filter(g => {{
-          const blob = g.getAttribute("data-search") || "";
-          return blob.indexOf(q) !== -1;
-        }});
-      }}
-      state.page = 1;
-      render();
-    }}
+    }
 
-    function render() {{
+    function render() {
       const total = state.filtered.length;
       const pageSize = Math.max(1, state.pageSize);
       const pages = Math.max(1, Math.ceil(total / pageSize));
@@ -879,75 +680,257 @@ html[data-theme="light"] .codebox {{
       const start = (state.page - 1) * pageSize;
       const end = Math.min(total, start + pageSize);
 
-      // hide all (this is the "virtualization": only show the slice)
       groups.forEach(g => setGroupVisible(g, false));
       state.filtered.slice(start, end).forEach(g => setGroupVisible(g, true));
 
-      if (meta) {{
-        meta.textContent = `Page ${{state.page}} / ${{pages}} • ${{total}} groups`;
-      }}
-      if (pill) {{
-        pill.textContent = `${{total}} groups`;
-      }}
+      if (meta) meta.textContent = `Page $${state.page} / $${pages} • $${total} groups`;
+      if (pill) pill.textContent = `$${total} groups`;
 
       if (btnPrev) btnPrev.disabled = state.page <= 1;
       if (btnNext) btnNext.disabled = state.page >= pages;
-    }}
+    }
 
-    // Wiring
-    searchInput?.addEventListener("input", (e) => {{
+    function applyFilter() {
+      const q = (state.q || "").trim().toLowerCase();
+      if (!q) {
+        state.filtered = groups;
+      } else {
+        state.filtered = groups.filter(g => {
+          const blob = g.getAttribute("data-search") || "";
+          return blob.indexOf(q) !== -1;
+        });
+      }
+      state.page = 1;
+      render();
+    }
+
+    searchInput?.addEventListener("input", (e) => {
       state.q = e.target.value || "";
       applyFilter();
-    }});
+    });
 
-    btnClear?.addEventListener("click", () => {{
+    btnClear?.addEventListener("click", () => {
       if (searchInput) searchInput.value = "";
       state.q = "";
       applyFilter();
-    }});
+    });
 
-    selPageSize?.addEventListener("change", () => {{
+    selPageSize?.addEventListener("change", () => {
       state.pageSize = parseInt(selPageSize.value || "10", 10);
       state.page = 1;
       render();
-    }});
+    });
 
-    btnPrev?.addEventListener("click", () => {{
+    btnPrev?.addEventListener("click", () => {
       state.page -= 1;
       render();
-    }});
+    });
 
-    btnNext?.addEventListener("click", () => {{
+    btnNext?.addEventListener("click", () => {
       state.page += 1;
       render();
-    }});
-
-    btnCollapseAll?.addEventListener("click", () => {{
-      section.querySelectorAll(".items").forEach((b) => {{
-        b.style.display = "none";
-      }});
-      section.querySelectorAll("[data-toggle-group]").forEach((c) => {{
-        c.textContent = "▸";
-      }});
-    }});
-
-    btnExpandAll?.addEventListener("click", () => {{
-      section.querySelectorAll(".items").forEach((b) => {{
-        b.style.display = "";
-      }});
-      section.querySelectorAll("[data-toggle-group]").forEach((c) => {{
-        c.textContent = "▾";
-      }});
-    }});
-
-    // Initial render
+    });
+
+    btnCollapseAll?.addEventListener("click", () => {
+      section.querySelectorAll(".items").forEach(b => b.style.display = "none");
+      section.querySelectorAll("[data-toggle-group]").forEach(c => c.style.transform = "rotate(-90deg)");
+    });
+
+    btnExpandAll?.addEventListener("click", () => {
+      section.querySelectorAll(".items").forEach(b => b.style.display = "");
+      section.querySelectorAll("[data-toggle-group]").forEach(c => c.style.transform = "rotate(0deg)");
+    });
+
     render();
-  }}
+  }
 
   initSection("functions");
   initSection("blocks");
-}})();
+})();
 </script>
 </body>
 </html>
+""")
+
+
+def build_html_report(
+    *,
+    func_groups: dict[str, list[dict[str, Any]]],
+    block_groups: dict[str, list[dict[str, Any]]],
+    title: str = "CodeClone Report",
+    context_lines: int = 3,
+    max_snippet_lines: int = 220,
+) -> str:
+    file_cache = _FileCache()
+
+    func_sorted = sorted(func_groups.items(), key=lambda kv: _group_sort_key(kv[1]))
+    block_sorted = sorted(block_groups.items(), key=lambda kv: _group_sort_key(kv[1]))
+
+    has_any = bool(func_sorted) or bool(block_sorted)
+
+    # Pygments CSS (scoped). Use modern GitHub-like styles when available.
+    # We scope per theme to support toggle without reloading.
+    pyg_dark_raw = _pygments_css("github-dark")
+    if not pyg_dark_raw:
+        pyg_dark_raw = _pygments_css("monokai")
+    pyg_light_raw = _pygments_css("github-light")
+    if not pyg_light_raw:
+        pyg_light_raw = _pygments_css("friendly")
+
+    pyg_dark = _prefix_css(pyg_dark_raw, "html[data-theme='dark']")
+    pyg_light = _prefix_css(pyg_light_raw, "html[data-theme='light']")
+
+    # ============================ 
+    # Icons (Inline SVG)
+    # ============================ 
+    ICON_SEARCH = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>'
+    ICON_X = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>'
+    ICON_CHEV_DOWN = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>'
+    # ICON_CHEV_RIGHT = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>'
+    ICON_THEME = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>'
+    ICON_CHECK = '<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>'
+    ICON_PREV = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>'
+    ICON_NEXT = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>'
+
+    # ---------------------------- 
+    # Section renderer
+    # ----------------------------
+
+    def render_section(
+        section_id: str,
+        section_title: str,
+        groups: list[tuple[str, list[dict[str, Any]]]],
+        pill_cls: str,
+    ) -> str:
+        if not groups:
+            return ""
+
+        # build group DOM with data-search (for fast client-side search)
+        out: list[str] = [
+            f'<section id="{section_id}" class="section" data-section="{section_id}">',
+            '<div class="section-head">',
+            f"<h2>{_escape(section_title)} "
+            f'<span class="pill {pill_cls}" data-count-pill="{section_id}">{len(groups)} groups</span></h2>',
+            f"""
+<div class="section-toolbar" role="toolbar" aria-label="{_escape(section_title)} controls">
+  <div class="toolbar-left">
+    <div class="search-wrap">
+      <span class="search-ico">{ICON_SEARCH}</span>
+      <input class="search" id="search-{section_id}" placeholder="Search..." autocomplete="off" />
+      <button class="btn ghost" type="button" data-clear="{section_id}" title="Clear search">{ICON_X}</button>
+    </div>
+    <div class="segmented">
+      <button class="btn seg" type="button" data-collapse-all="{section_id}">Collapse</button>
+      <button class="btn seg" type="button" data-expand-all="{section_id}">Expand</button>
+    </div>
+  </div>
+
+  <div class="toolbar-right">
+    <div class="pager">
+      <button class="btn" type="button" data-prev="{section_id}">{ICON_PREV}</button>
+      <span class="page-meta" data-page-meta="{section_id}">Page 1</span>
+      <button class="btn" type="button" data-next="{section_id}">{ICON_NEXT}</button>
+    </div>
+    <select class="select" data-pagesize="{section_id}" title="Groups per page">
+      <option value="5">5 / page</option>
+      <option value="10" selected>10 / page</option>
+      <option value="20">20 / page</option>
+      <option value="50">50 / page</option>
+    </select>
+  </div>
+</div>
+""",
+            "</div>",  # section-head
+            '<div class="section-body">',
+        ]
+
+        for idx, (gkey, items) in enumerate(groups, start=1):
+            search_parts: list[str] = [str(gkey)]
+            for it in items:
+                search_parts.append(str(it.get("qualname", "")))
+                search_parts.append(str(it.get("filepath", "")))
+            search_blob = " ".join(search_parts).lower()
+            search_blob_escaped = html.escape(search_blob, quote=True)
+
+            out.append(
+                f'<div class="group" data-group="{section_id}" data-search="{search_blob_escaped}">'
+            )
+
+            out.append(
+                f'<div class="group-head">'
+                f'<div class="group-left">'
+                f'<button class="chev" type="button" aria-label="Toggle group" data-toggle-group="{section_id}-{idx}">{ICON_CHEV_DOWN}</button>'
+                f'<div class="group-title">Group #{idx}</div>'
+                f'<span class="pill small {pill_cls}">{len(items)} items</span>'
+                f"</div>"
+                f'<div class="group-right">'
+                f'<code class="gkey">{_escape(gkey)}</code>'
+                f"</div>"
+                f"</div>"
+            )
+
+            out.append(f'<div class="items" id="group-body-{section_id}-{idx}">')
+
+            for a, b in pairwise(items):
+                out.append('<div class="item-pair">')
+
+                for item in (a, b):
+                    snippet = _render_code_block(
+                        filepath=item["filepath"],
+                        start_line=int(item["start_line"]),
+                        end_line=int(item["end_line"]),
+                        file_cache=file_cache,
+                        context=context_lines,
+                        max_lines=max_snippet_lines,
+                    )
+
+                    out.append(
+                        '<div class="item">'
+                        f'<div class="item-head">{_escape(item["qualname"])}</div>'
+                        f'<div class="item-file">'
+                        f"{_escape(item['filepath'])}:"
+                        f"{item['start_line']}-{item['end_line']}"
+                        f"</div>"
+                        f"{snippet.code_html}"
+                        "</div>"
+                    )
+
+                out.append("</div>")  # item-pair
+
+            out.append("</div>")  # items
+            out.append("</div>")  # group
+
+        out.append("</div>")  # section-body
+        out.append("</section>")
+        return "\n".join(out)
+
+    # ============================ 
+    # HTML Rendering
+    # ============================ 
+
+    empty_state_html = ""
+    if not has_any:
+        empty_state_html = f"""
+<div class="empty">
+  <div class="empty-card">
+    <div class="empty-icon">{ICON_CHECK}</div>
+    <h2>No code clones detected</h2>
+    <p>No structural or block-level duplication was found above configured thresholds.</p>
+    <p class="muted">This usually indicates healthy abstraction boundaries.</p>
+  </div>
+</div>
 """
+
+    func_section = render_section("functions", "Function clones", func_sorted, "pill-func")
+    block_section = render_section("blocks", "Block clones", block_sorted, "pill-block")
+
+    return REPORT_TEMPLATE.substitute(
+        title=_escape(title),
+        version=__version__,
+        pyg_dark=pyg_dark,
+        pyg_light=pyg_light,
+        empty_state_html=empty_state_html,
+        func_section=func_section,
+        block_section=block_section,
+        icon_theme=ICON_THEME,
+    )