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>

Author: jack-kerouac

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); }

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 %}

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>
 
 

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>

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>

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>
 
 

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"]