Move prompt number to pinned message label

Changed pinned user message format from:
  Label: "User prompt:"
  Content: "#1 message text..."

To:
  Label: "User Prompt #1"
  Content: "message text..."

This puts the prompt number in the header where it's more prominent.

🤖 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/templates/code_view.js

@@ -1102,6 +1102,7 @@ async function init() {
     // Sticky user message header
     const pinnedUserMessage = document.getElementById('pinned-user-message');
     const pinnedUserContent = pinnedUserMessage?.querySelector('.pinned-user-content');
+    const pinnedUserLabel = pinnedUserMessage?.querySelector('.pinned-user-message-label');
     const transcriptPanel = document.getElementById('transcript-panel');
     const transcriptContent = document.getElementById('transcript-content');
     let currentPinnedMessage = null;
@@ -1192,8 +1193,11 @@ async function init() {
         if (messageToPin && messageToPin !== currentPinnedMessage) {
             currentPinnedMessage = messageToPin;
             const promptNum = getPromptNumber(messageToPin);
-            const promptLabel = promptNum ? `#${promptNum}` : '';
-            pinnedUserContent.textContent = `${promptLabel} ${extractUserMessageText(messageToPin)}`.trim();
+            // Update label with prompt number
+            if (pinnedUserLabel) {
+                pinnedUserLabel.textContent = promptNum ? `User Prompt #${promptNum}` : 'User Prompt';
+            }
+            pinnedUserContent.textContent = extractUserMessageText(messageToPin);
             pinnedUserMessage.style.display = 'block';
             pinnedUserMessage.onclick = () => {
                 messageToPin.scrollIntoView({ behavior: 'smooth', block: 'start' });

tests/test_code_view_e2e.py

@@ -303,15 +303,18 @@ 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()
+
+        # Check that label shows "User Prompt #N"
+        pinned_label = code_view_page.locator(".pinned-user-message-label")
+        label_text = pinned_label.text_content()
+        assert label_text.startswith("User Prompt #"), f"Label should show 'User Prompt #N', got: {label_text}"
+
+        # Check that content matches the user message
         pinned_text = pinned_content.text_content()
-        # 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_without_num[:50])
-            or pinned_text_without_num in first_user_text
+            first_user_text.startswith(pinned_text[:50])
+            or pinned_text 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):