Add deep link sharing functionality

- Read URL parameters on page load (dataset, index, view, diff, markdown)
- Auto-update URL when navigating or changing settings
- Add Copy Link button with success notification
- Support fallback clipboard API for older browsers
- Enable sharing specific views with full state preservation

Users can now share direct links to specific pages and views,
making collaboration and reference sharing much easier.

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

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

index.html

@@ -144,6 +144,33 @@
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                         </svg>
                     </button>
+                    
+                    <!-- Copy Link Button -->
+                    <div class="relative">
+                        <button
+                            @click="copyShareLink()"
+                            class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                            title="Copy shareable link"
+                        >
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
+                            </svg>
+                        </button>
+                        
+                        <!-- Success Toast -->
+                        <div
+                            x-show="showShareSuccess"
+                            x-transition
+                            class="absolute right-0 top-12 bg-green-600 text-white px-3 py-2 rounded-md shadow-lg whitespace-nowrap z-50"
+                        >
+                            <div class="flex items-center gap-2">
+                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                </svg>
+                                <span class="text-sm">Link copied!</span>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

js/app.js

@@ -33,6 +33,7 @@ document.addEventListener('alpine:init', () => {
         showDock: false,
         renderMarkdown: false,
         hasMarkdown: false,
+        showShareSuccess: false,
         
         // Reasoning trace state
         hasReasoningTrace: false,
@@ -76,6 +77,31 @@ document.addEventListener('alpine:init', () => {
             // Initialize API
             this.api = new DatasetAPI();
             
+            // Read URL parameters for deep linking
+            const urlParams = new URLSearchParams(window.location.search);
+            const urlDataset = urlParams.get('dataset');
+            const urlIndex = urlParams.get('index');
+            const urlView = urlParams.get('view');
+            const urlDiff = urlParams.get('diff');
+            const urlMarkdown = urlParams.get('markdown');
+            
+            // Apply URL parameters if present
+            if (urlDataset) {
+                this.datasetId = urlDataset;
+            }
+            
+            if (urlView && ['comparison', 'diff', 'improved'].includes(urlView)) {
+                this.activeTab = urlView;
+            }
+            
+            if (urlDiff && ['char', 'word', 'line', 'markdown'].includes(urlDiff)) {
+                this.diffMode = urlDiff;
+            }
+            
+            if (urlMarkdown !== null) {
+                this.renderMarkdown = urlMarkdown === 'true';
+            }
+            
             // Apply dark mode from localStorage
             this.darkMode = localStorage.getItem('darkMode') === 'true';
             this.$watch('darkMode', value => {
@@ -87,8 +113,19 @@ document.addEventListener('alpine:init', () => {
             // Setup keyboard navigation
             this.setupKeyboardNavigation();
             
+            // Setup watchers for URL updates
+            this.initWatchers();
+            
             // Load initial dataset
             await this.loadDataset();
+            
+            // Jump to specific index if provided in URL
+            if (urlIndex !== null) {
+                const index = parseInt(urlIndex);
+                if (!isNaN(index) && index >= 0 && index < this.totalSamples) {
+                    await this.loadSample(index);
+                }
+            }
         },
         
         setupKeyboardNavigation() {
@@ -208,10 +245,7 @@ document.addEventListener('alpine:init', () => {
                 this.updateDiff();
                 
                 // Update URL without triggering navigation
-                const url = new URL(window.location);
-                url.searchParams.set('dataset', this.datasetId);
-                url.searchParams.set('index', index);
-                window.history.replaceState({}, '', url);
+                this.updateURL();
                 
             } catch (error) {
                 this.error = `Failed to load sample: ${error.message}`;
@@ -811,15 +845,73 @@ document.addEventListener('alpine:init', () => {
             await this.loadSample(index);
         },
         
+        // Update URL with current state
+        updateURL() {
+            const url = new URL(window.location);
+            url.searchParams.set('dataset', this.datasetId);
+            url.searchParams.set('index', this.currentIndex);
+            url.searchParams.set('view', this.activeTab);
+            url.searchParams.set('diff', this.diffMode);
+            url.searchParams.set('markdown', this.renderMarkdown);
+            window.history.replaceState({}, '', url);
+        },
+        
+        // Copy shareable link to clipboard
+        async copyShareLink() {
+            const url = new URL(window.location);
+            url.searchParams.set('dataset', this.datasetId);
+            url.searchParams.set('index', this.currentIndex);
+            url.searchParams.set('view', this.activeTab);
+            url.searchParams.set('diff', this.diffMode);
+            url.searchParams.set('markdown', this.renderMarkdown);
+            
+            const shareUrl = url.toString();
+            
+            try {
+                await navigator.clipboard.writeText(shareUrl);
+                
+                // Show success feedback
+                this.showShareSuccess = true;
+                setTimeout(() => {
+                    this.showShareSuccess = false;
+                }, 2000);
+                
+                return true;
+            } catch (err) {
+                // Fallback for older browsers
+                const textArea = document.createElement('textarea');
+                textArea.value = shareUrl;
+                textArea.style.position = 'fixed';
+                textArea.style.opacity = '0';
+                document.body.appendChild(textArea);
+                textArea.select();
+                
+                try {
+                    document.execCommand('copy');
+                    // Show success feedback
+                    this.showShareSuccess = true;
+                    setTimeout(() => {
+                        this.showShareSuccess = false;
+                    }, 2000);
+                    return true;
+                } catch (err) {
+                    console.error('Failed to copy link:', err);
+                    return false;
+                } finally {
+                    document.body.removeChild(textArea);
+                }
+            }
+        },
+        
         // Watch for diff mode changes
         initWatchers() {
-            this.$watch('diffMode', () => this.updateDiff());
+            this.$watch('diffMode', () => {
+                this.updateDiff();
+                this.updateURL();
+            });
             this.$watch('currentSample', () => this.updateDiff());
+            this.$watch('activeTab', () => this.updateURL());
+            this.$watch('renderMarkdown', () => this.updateURL());
         }
     }));
-});
-
-// Initialize watchers after Alpine loads
-document.addEventListener('alpine:initialized', () => {
-    Alpine.store('ocrExplorer')?.initWatchers?.();
 });