From 94c8de3485aea3a0e9ba4ab52727186ad825cf07 Mon Sep 17 00:00:00 2001
From: Florian Hertnagel <f.hertnagel@gridx.de>
Date: Fri, 13 Mar 2026 13:50:58 +0100
Subject: [PATCH 1/2] Fix index button staying highlighted on transcript pages

The .index-link CSS class gave the Index button the same blue
background as .current, making it appear active on every page.
Remove the class and its styling so only the actual current page
is highlighted.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/claude_code_transcripts/__init__.py                  | 1 -
 src/claude_code_transcripts/templates/macros.html        | 4 ++--
 .../TestGenerateHtml.test_generates_index_html.html      | 1 -
 .../TestGenerateHtml.test_generates_page_001_html.html   | 5 ++---
 .../TestGenerateHtml.test_generates_page_002_html.html   | 5 ++---
 .../TestParseSessionFile.test_jsonl_generates_html.html  | 1 -
 tests/test_generate_html.py                              | 9 +++++++++
 7 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/claude_code_transcripts/__init__.py b/src/claude_code_transcripts/__init__.py
index e4854a3..59ff1f9 100644
--- a/src/claude_code_transcripts/__init__.py
+++ b/src/claude_code_transcripts/__init__.py
@@ -1062,7 +1062,6 @@ def render_message(log_type, message_json, timestamp):
 .pagination a:hover { background: var(--user-bg); }
 .pagination .current { background: var(--user-border); color: white; }
 .pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
-.pagination .index-link { background: var(--user-border); color: white; }
 details.continuation { margin-bottom: 16px; }
 details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
 details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
diff --git a/src/claude_code_transcripts/templates/macros.html b/src/claude_code_transcripts/templates/macros.html
index 06018d3..1824297 100644
--- a/src/claude_code_transcripts/templates/macros.html
+++ b/src/claude_code_transcripts/templates/macros.html
@@ -1,10 +1,10 @@
 {# Pagination for regular pages #}
 {% macro pagination(current_page, total_pages) %}
 {% if total_pages <= 1 %}
-<div class="pagination"><a href="index.html" class="index-link">Index</a></div>
+<div class="pagination"><a href="index.html">Index</a></div>
 {%- else %}
 <div class="pagination">
-<a href="index.html" class="index-link">Index</a>
+<a href="index.html">Index</a>
 {% if current_page > 1 -%}
 <a href="page-{{ '%03d'|format(current_page - 1) }}.html">&larr; Prev</a>
 {%- else -%}
diff --git a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html
index 693c48f..7eda7e5 100644
--- a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html
+++ b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html
@@ -95,7 +95,6 @@
 .pagination a:hover { background: var(--user-bg); }
 .pagination .current { background: var(--user-border); color: white; }
 .pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
-.pagination .index-link { background: var(--user-border); color: white; }
 details.continuation { margin-bottom: 16px; }
 details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
 details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
diff --git a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html
index cdc794b..3842a66 100644
--- a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html
+++ b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html
@@ -95,7 +95,6 @@
 .pagination a:hover { background: var(--user-bg); }
 .pagination .current { background: var(--user-border); color: white; }
 .pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
-.pagination .index-link { background: var(--user-border); color: white; }
 details.continuation { margin-bottom: 16px; }
 details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
 details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
@@ -149,7 +148,7 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
         
 
 <div class="pagination">
-<a href="index.html" class="index-link">Index</a>
+<a href="index.html">Index</a>
 <span class="disabled">&larr; Prev</span>
 <span class="current">1</span>
 <a href="page-002.html">2</a>
@@ -283,7 +282,7 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
         
 
 <div class="pagination">
-<a href="index.html" class="index-link">Index</a>
+<a href="index.html">Index</a>
 <span class="disabled">&larr; Prev</span>
 <span class="current">1</span>
 <a href="page-002.html">2</a>
diff --git a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html
index 2d46a78..b35878c 100644
--- a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html
+++ b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html
@@ -95,7 +95,6 @@
 .pagination a:hover { background: var(--user-bg); }
 .pagination .current { background: var(--user-border); color: white; }
 .pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
-.pagination .index-link { background: var(--user-border); color: white; }
 details.continuation { margin-bottom: 16px; }
 details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
 details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
@@ -149,7 +148,7 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
         
 
 <div class="pagination">
-<a href="index.html" class="index-link">Index</a>
+<a href="index.html">Index</a>
 <a href="page-001.html">&larr; Prev</a>
 <a href="page-001.html">1</a>
 <span class="current">2</span>
@@ -180,7 +179,7 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
         
 
 <div class="pagination">
-<a href="index.html" class="index-link">Index</a>
+<a href="index.html">Index</a>
 <a href="page-001.html">&larr; Prev</a>
 <a href="page-001.html">1</a>
 <span class="current">2</span>
diff --git a/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html b/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html
index e83424a..4e32a9c 100644
--- a/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html
+++ b/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html
@@ -95,7 +95,6 @@
 .pagination a:hover { background: var(--user-bg); }
 .pagination .current { background: var(--user-border); color: white; }
 .pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
-.pagination .index-link { background: var(--user-border); color: white; }
 details.continuation { margin-bottom: 16px; }
 details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
 details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
diff --git a/tests/test_generate_html.py b/tests/test_generate_html.py
index 25c2822..a835ac2 100644
--- a/tests/test_generate_html.py
+++ b/tests/test_generate_html.py
@@ -85,6 +85,15 @@ def test_generates_page_002_html(self, output_dir, snapshot_html):
         page_html = (output_dir / "page-002.html").read_text(encoding="utf-8")
         assert page_html == snapshot_html
 
+    def test_index_link_not_highlighted_on_transcript_pages(self, output_dir):
+        """The index button should not have the same style as the current page button."""
+        fixture_path = Path(__file__).parent / "sample_session.json"
+        generate_html(fixture_path, output_dir, github_repo="example/project")
+
+        page_html = (output_dir / "page-001.html").read_text(encoding="utf-8")
+        # The index link should NOT be styled like the active/current page
+        assert "index-link" not in page_html
+
     def test_github_repo_autodetect(self, sample_session):
         """Test GitHub repo auto-detection from git push output."""
         loglines = sample_session["loglines"]

From bbe67fadd11ae286bd7da6496839c42258534d08 Mon Sep 17 00:00:00 2001
From: Florian Hertnagel <f.hertnagel@gridx.de>
Date: Fri, 13 Mar 2026 14:05:47 +0100
Subject: [PATCH 2/2] Separate index button from page nav with divider and
 disable Next on index

The index page is conceptually separate from the transcript pages, so
Prev/Next should not navigate between them. Disable the Next button on
the index page and add a vertical separator between the Index button
and the page navigation controls.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/claude_code_transcripts/__init__.py        |  1 +
 .../templates/macros.html                      |  6 ++----
 ...GenerateHtml.test_generates_index_html.html |  7 +++++--
 ...erateHtml.test_generates_page_001_html.html |  3 +++
 ...erateHtml.test_generates_page_002_html.html |  3 +++
 ...eSessionFile.test_jsonl_generates_html.html |  7 +++++--
 tests/test_generate_html.py                    | 18 ++++++++++++++++++
 7 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/claude_code_transcripts/__init__.py b/src/claude_code_transcripts/__init__.py
index 59ff1f9..faf07a7 100644
--- a/src/claude_code_transcripts/__init__.py
+++ b/src/claude_code_transcripts/__init__.py
@@ -1062,6 +1062,7 @@ def render_message(log_type, message_json, timestamp):
 .pagination a:hover { background: var(--user-bg); }
 .pagination .current { background: var(--user-border); color: white; }
 .pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
+.pagination .pagination-sep { width: 1px; padding: 0; margin: 0 4px; background: #ccc; }
 details.continuation { margin-bottom: 16px; }
 details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
 details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
diff --git a/src/claude_code_transcripts/templates/macros.html b/src/claude_code_transcripts/templates/macros.html
index 1824297..0b5ea69 100644
--- a/src/claude_code_transcripts/templates/macros.html
+++ b/src/claude_code_transcripts/templates/macros.html
@@ -5,6 +5,7 @@
 {%- else %}
 <div class="pagination">
 <a href="index.html">Index</a>
+<span class="pagination-sep"></span>
 {% if current_page > 1 -%}
 <a href="page-{{ '%03d'|format(current_page - 1) }}.html">&larr; Prev</a>
 {%- else -%}
@@ -33,15 +34,12 @@
 {%- else %}
 <div class="pagination">
 <span class="current">Index</span>
+<span class="pagination-sep"></span>
 <span class="disabled">&larr; Prev</span>
 {% for page in range(1, total_pages + 1) -%}
 <a href="page-{{ '%03d'|format(page) }}.html">{{ page }}</a>
 {% endfor -%}
-{% if total_pages >= 1 -%}
-<a href="page-001.html">Next &rarr;</a>
-{%- else -%}
 <span class="disabled">Next &rarr;</span>
-{%- endif %}
 </div>
 {%- endif %}
 {% endmacro %}
diff --git a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html
index 7eda7e5..a77f74c 100644
--- a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html
+++ b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html
@@ -95,6 +95,7 @@
 .pagination a:hover { background: var(--user-bg); }
 .pagination .current { background: var(--user-border); color: white; }
 .pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
+.pagination .pagination-sep { width: 1px; padding: 0; margin: 0 4px; background: #ccc; }
 details.continuation { margin-bottom: 16px; }
 details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
 details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
@@ -157,10 +158,11 @@ <h1>Claude Code transcript</h1>
 
 <div class="pagination">
 <span class="current">Index</span>
+<span class="pagination-sep"></span>
 <span class="disabled">&larr; Prev</span>
 <a href="page-001.html">1</a>
 <a href="page-002.html">2</a>
-<a href="page-001.html">Next &rarr;</a>
+<span class="disabled">Next &rarr;</span>
 </div>
 
         <p style="color: var(--text-muted); margin-bottom: 24px;">5 prompts · 33 messages · 12 tool calls · 2 commits · 2 pages</p>
@@ -179,10 +181,11 @@ <h1>Claude Code transcript</h1>
 
 <div class="pagination">
 <span class="current">Index</span>
+<span class="pagination-sep"></span>
 <span class="disabled">&larr; Prev</span>
 <a href="page-001.html">1</a>
 <a href="page-002.html">2</a>
-<a href="page-001.html">Next &rarr;</a>
+<span class="disabled">Next &rarr;</span>
 </div>
 
 
diff --git a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html
index 3842a66..5a10702 100644
--- a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html
+++ b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html
@@ -95,6 +95,7 @@
 .pagination a:hover { background: var(--user-bg); }
 .pagination .current { background: var(--user-border); color: white; }
 .pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
+.pagination .pagination-sep { width: 1px; padding: 0; margin: 0 4px; background: #ccc; }
 details.continuation { margin-bottom: 16px; }
 details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
 details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
@@ -149,6 +150,7 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 
 <div class="pagination">
 <a href="index.html">Index</a>
+<span class="pagination-sep"></span>
 <span class="disabled">&larr; Prev</span>
 <span class="current">1</span>
 <a href="page-002.html">2</a>
@@ -283,6 +285,7 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 
 <div class="pagination">
 <a href="index.html">Index</a>
+<span class="pagination-sep"></span>
 <span class="disabled">&larr; Prev</span>
 <span class="current">1</span>
 <a href="page-002.html">2</a>
diff --git a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html
index b35878c..8f13461 100644
--- a/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html
+++ b/tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html
@@ -95,6 +95,7 @@
 .pagination a:hover { background: var(--user-bg); }
 .pagination .current { background: var(--user-border); color: white; }
 .pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
+.pagination .pagination-sep { width: 1px; padding: 0; margin: 0 4px; background: #ccc; }
 details.continuation { margin-bottom: 16px; }
 details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
 details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
@@ -149,6 +150,7 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 
 <div class="pagination">
 <a href="index.html">Index</a>
+<span class="pagination-sep"></span>
 <a href="page-001.html">&larr; Prev</a>
 <a href="page-001.html">1</a>
 <span class="current">2</span>
@@ -180,6 +182,7 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 
 <div class="pagination">
 <a href="index.html">Index</a>
+<span class="pagination-sep"></span>
 <a href="page-001.html">&larr; Prev</a>
 <a href="page-001.html">1</a>
 <span class="current">2</span>
diff --git a/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html b/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html
index 4e32a9c..242f443 100644
--- a/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html
+++ b/tests/__snapshots__/test_generate_html/TestParseSessionFile.test_jsonl_generates_html.html
@@ -95,6 +95,7 @@
 .pagination a:hover { background: var(--user-bg); }
 .pagination .current { background: var(--user-border); color: white; }
 .pagination .disabled { color: var(--text-muted); border: 1px solid #ddd; }
+.pagination .pagination-sep { width: 1px; padding: 0; margin: 0 4px; background: #ccc; }
 details.continuation { margin-bottom: 16px; }
 details.continuation summary { cursor: pointer; padding: 12px 16px; background: var(--user-bg); border-left: 4px solid var(--user-border); border-radius: 12px; font-weight: 500; color: var(--text-muted); }
 details.continuation summary:hover { background: rgba(25, 118, 210, 0.15); }
@@ -157,9 +158,10 @@ <h1>Claude Code transcript</h1>
 
 <div class="pagination">
 <span class="current">Index</span>
+<span class="pagination-sep"></span>
 <span class="disabled">&larr; Prev</span>
 <a href="page-001.html">1</a>
-<a href="page-001.html">Next &rarr;</a>
+<span class="disabled">Next &rarr;</span>
 </div>
 
         <p style="color: var(--text-muted); margin-bottom: 24px;">2 prompts · 7 messages · 2 tool calls · 1 commits · 1 pages</p>
@@ -171,9 +173,10 @@ <h1>Claude Code transcript</h1>
 
 <div class="pagination">
 <span class="current">Index</span>
+<span class="pagination-sep"></span>
 <span class="disabled">&larr; Prev</span>
 <a href="page-001.html">1</a>
-<a href="page-001.html">Next &rarr;</a>
+<span class="disabled">Next &rarr;</span>
 </div>
 
 
diff --git a/tests/test_generate_html.py b/tests/test_generate_html.py
index a835ac2..336f3c7 100644
--- a/tests/test_generate_html.py
+++ b/tests/test_generate_html.py
@@ -94,6 +94,24 @@ def test_index_link_not_highlighted_on_transcript_pages(self, output_dir):
         # The index link should NOT be styled like the active/current page
         assert "index-link" not in page_html
 
+    def test_index_page_has_disabled_next_button(self, output_dir):
+        """On the index page, Next should be disabled since index is separate from transcript pages."""
+        fixture_path = Path(__file__).parent / "sample_session.json"
+        generate_html(fixture_path, output_dir, github_repo="example/project")
+
+        index_html = (output_dir / "index.html").read_text(encoding="utf-8")
+        assert 'Next &rarr;</a>' not in index_html
+        assert 'Next &rarr;</span>' in index_html
+
+    def test_pagination_has_separator_between_index_and_pages(self, output_dir):
+        """A visual separator should exist between the Index button and the page nav buttons."""
+        fixture_path = Path(__file__).parent / "sample_session.json"
+        generate_html(fixture_path, output_dir, github_repo="example/project")
+
+        for filename in ("index.html", "page-001.html"):
+            html = (output_dir / filename).read_text(encoding="utf-8")
+            assert "pagination-sep" in html
+
     def test_github_repo_autodetect(self, sample_session):
         """Test GitHub repo auto-detection from git push output."""
         loglines = sample_session["loglines"]