Add prompt numbers to user messages and improve pinned header behavior

Changes:
1. Auto-select first blame block on file load - now that teleportation
   makes transcript navigation instant, re-enable auto-scrolling

2. Add prompt # to user message headers - shows "User #1", "User simonw#2" etc.
   for each user prompt (excluding tool result messages)

3. Add prompt # to pinned user message - shows "#N message text..."

4. Fix pinned user prompt overlap - hide the pinned header when the
   next user message would overlap with it, rather than showing both

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: btucker

src/claude_code_transcripts/__init__.py

@@ -1050,7 +1050,7 @@ def is_tool_result_message(message_data):
     )
 
 
-def render_message(log_type, message_json, timestamp):
+def render_message(log_type, message_json, timestamp, prompt_num=None):
     if not message_json:
         return ""
     try:
@@ -1063,7 +1063,8 @@ def render_message(log_type, message_json, timestamp):
         if is_tool_result_message(message_data):
             role_class, role_label = "tool-reply", "Tool reply"
         else:
-            role_class, role_label = "user", "User"
+            role_class = "user"
+            role_label = f"User #{prompt_num}" if prompt_num else "User"
     elif log_type == "assistant":
         content_html = render_assistant_message(message_data)
         role_class, role_label = "assistant", "Assistant"
@@ -1639,6 +1640,9 @@ def generate_html(
     # Collect messages per page for potential page-data.json
     page_messages_dict = {}
 
+    # Track prompt number across all pages
+    prompt_num = 0
+
     for page_num in range(1, total_pages + 1):
         start_idx = (page_num - 1) * PROMPTS_PER_PAGE
         end_idx = min(start_idx + PROMPTS_PER_PAGE, total_convs)
@@ -1657,7 +1661,19 @@ def generate_html(
                         end="",
                         flush=True,
                     )
-                msg_html = render_message(log_type, message_json, timestamp)
+                # Track prompt number for user messages (not tool results)
+                current_prompt_num = None
+                if log_type == "user" and message_json:
+                    try:
+                        message_data = json.loads(message_json)
+                        if not is_tool_result_message(message_data):
+                            prompt_num += 1
+                            current_prompt_num = prompt_num
+                    except json.JSONDecodeError:
+                        pass
+                msg_html = render_message(
+                    log_type, message_json, timestamp, current_prompt_num
+                )
                 if msg_html:
                     # Wrap continuation summaries in collapsed details
                     if is_first and conv.get("is_continuation"):
@@ -2232,6 +2248,9 @@ def generate_html_from_session_data(
     # Collect messages per page for potential page-data.json
     page_messages_dict = {}
 
+    # Track prompt number across all pages
+    prompt_num = 0
+
     for page_num in range(1, total_pages + 1):
         start_idx = (page_num - 1) * PROMPTS_PER_PAGE
         end_idx = min(start_idx + PROMPTS_PER_PAGE, total_convs)
@@ -2249,7 +2268,19 @@ def generate_html_from_session_data(
                         f"\rPage {page_num}/{total_pages}: rendering message {msg_count}/{total_page_messages}...",
                         nl=False,
                     )
-                msg_html = render_message(log_type, message_json, timestamp)
+                # Track prompt number for user messages (not tool results)
+                current_prompt_num = None
+                if log_type == "user" and message_json:
+                    try:
+                        message_data = json.loads(message_json)
+                        if not is_tool_result_message(message_data):
+                            prompt_num += 1
+                            current_prompt_num = prompt_num
+                    except json.JSONDecodeError:
+                        pass
+                msg_html = render_message(
+                    log_type, message_json, timestamp, current_prompt_num
+                )
                 if msg_html:
                     # Wrap continuation summaries in collapsed details
                     if is_first and conv.get("is_continuation"):

src/claude_code_transcripts/templates/code_view.js

@@ -838,14 +838,17 @@ async function init() {
             currentBlameRanges = fileInfo.blame_ranges || [];
             createEditor(codeContent, content, currentBlameRanges, path);
 
-            // Auto-select the first blame range: highlight in editor only
-            // Don't auto-scroll transcript - that would render thousands of messages
-            // User can click the blame range to navigate to the message
+            // Auto-select the first blame range and scroll transcript to it
+            // With windowed rendering + teleportation, this is now fast
             const firstOpIndex = currentBlameRanges.findIndex(r => r.msg_id);
             if (firstOpIndex >= 0) {
                 const firstOpRange = currentBlameRanges[firstOpIndex];
                 scrollEditorToLine(firstOpRange.start);
                 highlightRange(firstOpIndex, currentBlameRanges, currentEditor);
+                // Scroll transcript to the corresponding message
+                if (firstOpRange.msg_id) {
+                    scrollToMessage(firstOpRange.msg_id);
+                }
             }
         }, 10);
     }
@@ -1114,6 +1117,26 @@ async function init() {
         return text;
     }
 
+    // Get the prompt number for a user message by counting user messages before it
+    function getPromptNumber(messageEl) {
+        const msgId = messageEl.id;
+        if (!msgId) return null;
+
+        const msgIndex = msgIdToIndex.get(msgId);
+        if (msgIndex === undefined) return null;
+
+        // Count user messages from start up to this message
+        let promptNum = 0;
+        for (let i = 0; i <= msgIndex && i < messagesData.length; i++) {
+            const msg = messagesData[i];
+            if (msg.html && msg.html.includes('class="message user"') &&
+                !msg.html.includes('class="continuation"')) {
+                promptNum++;
+            }
+        }
+        return promptNum;
+    }
+
     function updatePinnedUserMessage() {
         if (!pinnedUserMessage || !transcriptContent || !transcriptPanel) return;
         if (isInitializing || isScrollingToTarget) return;  // Skip during scrolling to avoid repeated updates
@@ -1131,17 +1154,35 @@ async function init() {
         const topThreshold = panelRect.top + headerHeight + pinnedHeight + 10;
 
         let messageToPin = null;
+        let nextUserMessage = null;
+
         for (const msg of userMessages) {
-            if (msg.getBoundingClientRect().bottom < topThreshold) {
+            const msgRect = msg.getBoundingClientRect();
+            if (msgRect.bottom < topThreshold) {
                 messageToPin = msg;
             } else {
+                // This is the first user message that's visible
+                nextUserMessage = msg;
                 break;
             }
         }
 
+        // Hide pinned if the next user message would overlap with the pinned area
+        // (i.e., its top is within the pinned header zone)
+        if (messageToPin && nextUserMessage) {
+            const nextRect = nextUserMessage.getBoundingClientRect();
+            const pinnedBottomThreshold = panelRect.top + headerHeight + pinnedHeight + 5;
+            if (nextRect.top < pinnedBottomThreshold) {
+                // Next user message is overlapping - hide the pinned
+                messageToPin = null;
+            }
+        }
+
         if (messageToPin && messageToPin !== currentPinnedMessage) {
             currentPinnedMessage = messageToPin;
-            pinnedUserContent.textContent = extractUserMessageText(messageToPin);
+            const promptNum = getPromptNumber(messageToPin);
+            const promptLabel = promptNum ? `#${promptNum}` : '';
+            pinnedUserContent.textContent = `${promptLabel} ${extractUserMessageText(messageToPin)}`.trim();
             pinnedUserMessage.style.display = 'block';
             pinnedUserMessage.onclick = () => {
                 messageToPin.scrollIntoView({ behavior: 'smooth', block: 'start' });

tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_001_html.html

@@ -354,7 +354,7 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 
             <div id="page-messages">
 
-<div class="message user" id="msg-2025-12-24T10-00-00-000Z"><div class="message-header"><span class="role-label">User</span><a href="#msg-2025-12-24T10-00-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:00.000Z" data-timestamp="2025-12-24T10:00:00.000Z">2025-12-24T10:00:00.000Z</time></a></div><div class="message-content">
+<div class="message user" id="msg-2025-12-24T10-00-00-000Z"><div class="message-header"><span class="role-label">User #1</span><a href="#msg-2025-12-24T10-00-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:00.000Z" data-timestamp="2025-12-24T10:00:00.000Z">2025-12-24T10:00:00.000Z</time></a></div><div class="message-content">
 <div class="user-content"><p>Create a simple Python function to add two numbers</p></div></div></div>
 <div class="message assistant" id="msg-2025-12-24T10-00-05-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-00-05-000Z" class="timestamp-link"><time datetime="2025-12-24T10:00:05.000Z" data-timestamp="2025-12-24T10:00:05.000Z">2025-12-24T10:00:05.000Z</time></a></div><div class="message-content">
 <div class="thinking"><div class="thinking-label">Thinking</div><p>The user wants a simple addition function. I should:
@@ -404,7 +404,7 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 remote: 
 To github.com:example/project.git
    def5678..abc1234  main -&gt; main</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
-<div class="message user" id="msg-2025-12-24T10-01-00-000Z"><div class="message-header"><span class="role-label">User</span><a href="#msg-2025-12-24T10-01-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:01:00.000Z" data-timestamp="2025-12-24T10:01:00.000Z">2025-12-24T10:01:00.000Z</time></a></div><div class="message-content">
+<div class="message user" id="msg-2025-12-24T10-01-00-000Z"><div class="message-header"><span class="role-label">User #2</span><a href="#msg-2025-12-24T10-01-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:01:00.000Z" data-timestamp="2025-12-24T10:01:00.000Z">2025-12-24T10:01:00.000Z</time></a></div><div class="message-content">
 <div class="user-content"><p>Now edit the file to add a subtract function</p></div></div></div>
 <div class="message assistant" id="msg-2025-12-24T10-01-05-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-01-05-000Z" class="timestamp-link"><time datetime="2025-12-24T10:01:05.000Z" data-timestamp="2025-12-24T10:01:05.000Z">2025-12-24T10:01:05.000Z</time></a></div><div class="message-content">
 <div class="tool-use" data-tool-id="toolu_glob_001"><div class="tool-header"><span class="tool-icon">⚙</span> Glob</div><div class="truncatable"><div class="truncatable-content"><pre class="json">{
@@ -437,7 +437,7 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
   &#34;output_mode&#34;: &#34;content&#34;
 }</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
 <div class="message tool-reply" id="msg-2025-12-24T10-01-30-000Z"><div class="message-header"><span class="role-label">Tool reply</span><a href="#msg-2025-12-24T10-01-30-000Z" class="timestamp-link"><time datetime="2025-12-24T10:01:30.000Z" data-timestamp="2025-12-24T10:01:30.000Z">2025-12-24T10:01:30.000Z</time></a></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><pre>/project/math_utils.py:6:def subtract(a: int, b: int) -&gt; int:</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
-<div class="message user" id="msg-2025-12-24T10-02-00-000Z"><div class="message-header"><span class="role-label">User</span><a href="#msg-2025-12-24T10-02-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:02:00.000Z" data-timestamp="2025-12-24T10:02:00.000Z">2025-12-24T10:02:00.000Z</time></a></div><div class="message-content">
+<div class="message user" id="msg-2025-12-24T10-02-00-000Z"><div class="message-header"><span class="role-label">User #3</span><a href="#msg-2025-12-24T10-02-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:02:00.000Z" data-timestamp="2025-12-24T10:02:00.000Z">2025-12-24T10:02:00.000Z</time></a></div><div class="message-content">
 <div class="user-content"><p>Run the tests again</p></div></div></div>
 <div class="message assistant" id="msg-2025-12-24T10-02-05-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-02-05-000Z" class="timestamp-link"><time datetime="2025-12-24T10:02:05.000Z" data-timestamp="2025-12-24T10:02:05.000Z">2025-12-24T10:02:05.000Z</time></a></div><div class="message-content">
 <div class="tool-use bash-tool" data-tool-id="toolu_bash_004">
@@ -456,7 +456,7 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 <pre><code class="language-python">def example():
     return 42
 </code></pre></div></div></div>
-<div class="message user" id="msg-2025-12-24T10-03-00-000Z"><div class="message-header"><span class="role-label">User</span><a href="#msg-2025-12-24T10-03-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:03:00.000Z" data-timestamp="2025-12-24T10:03:00.000Z">2025-12-24T10:03:00.000Z</time></a></div><div class="message-content">
+<div class="message user" id="msg-2025-12-24T10-03-00-000Z"><div class="message-header"><span class="role-label">User #4</span><a href="#msg-2025-12-24T10-03-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:03:00.000Z" data-timestamp="2025-12-24T10:03:00.000Z">2025-12-24T10:03:00.000Z</time></a></div><div class="message-content">
 <div class="user-content"><p>Fix the issue and commit</p></div></div></div>
 <div class="message assistant" id="msg-2025-12-24T10-03-05-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-03-05-000Z" class="timestamp-link"><time datetime="2025-12-24T10:03:05.000Z" data-timestamp="2025-12-24T10:03:05.000Z">2025-12-24T10:03:05.000Z</time></a></div><div class="message-content"><div class="file-tool edit-tool" data-tool-id="toolu_edit_002">
 <div class="file-tool-header edit-header"><span class="file-tool-icon">✏️</span> Edit <span class="file-tool-path">test_math.py</span> <span class="edit-replace-all">(replace all)</span></div>
@@ -475,7 +475,7 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 <div class="message tool-reply" id="msg-2025-12-24T10-03-20-000Z"><div class="message-header"><span class="role-label">Tool reply</span><a href="#msg-2025-12-24T10-03-20-000Z" class="timestamp-link"><time datetime="2025-12-24T10:03:20.000Z" data-timestamp="2025-12-24T10:03:20.000Z">2025-12-24T10:03:20.000Z</time></a></div><div class="message-content"><div class="tool-result"><div class="truncatable"><div class="truncatable-content"><div class="commit-card"><a href="https://github.com/example/project/commit/def5678"><span class="commit-card-hash">def5678</span> Add subtract function and fix tests</a></div><pre>2 files changed, 10 insertions(+), 1 deletion(-)</pre></div><button class="expand-btn">Show more</button></div></div></div></div>
 <div class="message assistant" id="msg-2025-12-24T10-03-25-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-03-25-000Z" class="timestamp-link"><time datetime="2025-12-24T10:03:25.000Z" data-timestamp="2025-12-24T10:03:25.000Z">2025-12-24T10:03:25.000Z</time></a></div><div class="message-content">
 <div class="assistant-text"><p>Done! The subtract function is now working and committed.</p></div></div></div><details class="continuation"><summary>Session continuation summary</summary>
-<div class="message user" id="msg-2025-12-24T10-04-00-000Z"><div class="message-header"><span class="role-label">User</span><a href="#msg-2025-12-24T10-04-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:04:00.000Z" data-timestamp="2025-12-24T10:04:00.000Z">2025-12-24T10:04:00.000Z</time></a></div><div class="message-content">
+<div class="message user" id="msg-2025-12-24T10-04-00-000Z"><div class="message-header"><span class="role-label">User #5</span><a href="#msg-2025-12-24T10-04-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:04:00.000Z" data-timestamp="2025-12-24T10:04:00.000Z">2025-12-24T10:04:00.000Z</time></a></div><div class="message-content">
 <div class="user-content"><p>This is a session continuation summary from a previous context. The user was working on a math utilities library.</p></div></div></div></details>
             </div>
 

tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_page_002_html.html

@@ -354,7 +354,7 @@ <h1><a href="index.html" style="color: inherit; text-decoration: none;">Claude C
 
             <div id="page-messages">
 
-<div class="message user" id="msg-2025-12-24T10-05-00-000Z"><div class="message-header"><span class="role-label">User</span><a href="#msg-2025-12-24T10-05-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:05:00.000Z" data-timestamp="2025-12-24T10:05:00.000Z">2025-12-24T10:05:00.000Z</time></a></div><div class="message-content">
+<div class="message user" id="msg-2025-12-24T10-05-00-000Z"><div class="message-header"><span class="role-label">User #6</span><a href="#msg-2025-12-24T10-05-00-000Z" class="timestamp-link"><time datetime="2025-12-24T10:05:00.000Z" data-timestamp="2025-12-24T10:05:00.000Z">2025-12-24T10:05:00.000Z</time></a></div><div class="message-content">
 <div class="user-content"><p>Add a multiply function too</p></div></div></div>
 <div class="message assistant" id="msg-2025-12-24T10-05-05-000Z"><div class="message-header"><span class="role-label">Assistant</span><a href="#msg-2025-12-24T10-05-05-000Z" class="timestamp-link"><time datetime="2025-12-24T10:05:05.000Z" data-timestamp="2025-12-24T10:05:05.000Z">2025-12-24T10:05:05.000Z</time></a></div><div class="message-content"><div class="file-tool edit-tool" data-tool-id="toolu_edit_003">
 <div class="file-tool-header edit-header"><span class="file-tool-icon">✏️</span> Edit <span class="file-tool-path">math_utils.py</span></div>

tests/test_code_view_e2e.py

@@ -304,11 +304,14 @@ def test_pinned_user_message_on_scroll(self, code_view_page: Page):
         # Pinned header should be visible with content from the first user message
         expect(pinned).to_be_visible()
         pinned_text = pinned_content.text_content()
-        # The pinned text should be a truncated prefix of the user message
+        # The pinned text should have format "#N message text..."
         assert len(pinned_text) > 0, "Pinned content should not be empty"
+        assert pinned_text.startswith("#"), "Pinned text should start with prompt number"
+        # Strip the prompt number prefix (e.g., "#1 ") to compare with message text
+        pinned_text_without_num = re.sub(r"^#\d+\s*", "", pinned_text)
         assert (
-            first_user_text.startswith(pinned_text[:50])
-            or pinned_text in first_user_text
+            first_user_text.startswith(pinned_text_without_num[:50])
+            or pinned_text_without_num in first_user_text
         ), f"Pinned text '{pinned_text[:50]}...' should match user message"
 
     def test_pinned_user_message_click_scrolls_back(self, code_view_page: Page):