Fix reasoning trace preservation in deep links

- Prevent double-loading samples when URL index parameter is present
- Add reasoning panel expansion state to URL parameters
- Properly restore reasoning state from deep links
- Ensure reasoning traces are parsed correctly on initial load

Fixes issue where reasoning traces were lost when following deep links
to examples with model thinking output.

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

Co-Authored-By: Claude <[email protected]>

js/app.js

@@ -84,6 +84,7 @@ document.addEventListener('alpine:init', () => {
             const urlView = urlParams.get('view');
             const urlDiff = urlParams.get('diff');
             const urlMarkdown = urlParams.get('markdown');
+            const urlReasoning = urlParams.get('reasoning');
             
             // Apply URL parameters if present
             if (urlDataset) {
@@ -102,6 +103,10 @@ document.addEventListener('alpine:init', () => {
                 this.renderMarkdown = urlMarkdown === 'true';
             }
             
+            if (urlReasoning !== null) {
+                this.showReasoning = urlReasoning === 'true';
+            }
+            
             // Apply dark mode from localStorage
             this.darkMode = localStorage.getItem('darkMode') === 'true';
             this.$watch('darkMode', value => {
@@ -116,14 +121,20 @@ document.addEventListener('alpine:init', () => {
             // Setup watchers for URL updates
             this.initWatchers();
             
-            // Load initial dataset
-            await this.loadDataset();
+            // Check if we have a specific index to load
+            const hasUrlIndex = urlIndex !== null;
+            
+            // Load initial dataset (skip initial load if we have a URL index)
+            await this.loadDataset(hasUrlIndex);
             
             // Jump to specific index if provided in URL
-            if (urlIndex !== null) {
+            if (hasUrlIndex) {
                 const index = parseInt(urlIndex);
                 if (!isNaN(index) && index >= 0 && index < this.totalSamples) {
                     await this.loadSample(index);
+                } else {
+                    // If invalid index, load the first sample
+                    await this.loadSample(0);
                 }
             }
         },
@@ -182,7 +193,7 @@ document.addEventListener('alpine:init', () => {
             });
         },
         
-        async loadDataset() {
+        async loadDataset(skipInitialLoad = false) {
             this.loading = true;
             this.error = null;
             
@@ -205,9 +216,11 @@ document.addEventListener('alpine:init', () => {
                     this.datasetSplit
                 );
                 
-                // Load first sample
-                this.currentIndex = 0;
-                await this.loadSample(0);
+                // Load first sample only if not skipping
+                if (!skipInitialLoad) {
+                    this.currentIndex = 0;
+                    await this.loadSample(0);
+                }
                 
             } catch (error) {
                 this.error = error.message;
@@ -853,6 +866,10 @@ document.addEventListener('alpine:init', () => {
             url.searchParams.set('view', this.activeTab);
             url.searchParams.set('diff', this.diffMode);
             url.searchParams.set('markdown', this.renderMarkdown);
+            // Only add reasoning parameter if there's a reasoning trace
+            if (this.hasReasoningTrace) {
+                url.searchParams.set('reasoning', this.showReasoning);
+            }
             window.history.replaceState({}, '', url);
         },
         
@@ -864,6 +881,10 @@ document.addEventListener('alpine:init', () => {
             url.searchParams.set('view', this.activeTab);
             url.searchParams.set('diff', this.diffMode);
             url.searchParams.set('markdown', this.renderMarkdown);
+            // Only add reasoning parameter if there's a reasoning trace
+            if (this.hasReasoningTrace) {
+                url.searchParams.set('reasoning', this.showReasoning);
+            }
             
             const shareUrl = url.toString();
             
@@ -912,6 +933,7 @@ document.addEventListener('alpine:init', () => {
             this.$watch('currentSample', () => this.updateDiff());
             this.$watch('activeTab', () => this.updateURL());
             this.$watch('renderMarkdown', () => this.updateURL());
+            this.$watch('showReasoning', () => this.updateURL());
         }
     }));
 });