m

static/js/history.js

@@ -58,31 +58,80 @@ window.renderHistory = function() {
         item.addEventListener('click', () => {
             const historyItem = history.find(h => h.id === parseInt(item.dataset.id));
             if (historyItem) {
-                // Display the image
+                // Store current state before entering history view
+                const previousState = {
+                    textEditorVisible: !window.app.textEditor.classList.contains('hidden'),
+                    textFormatControlsVisible: !document.querySelector('.text-format-controls').classList.contains('hidden'),
+                    extractedTextValue: window.app.extractedText.value
+                };
+
+                // Add history view class and display the image
+                document.body.classList.add('history-view');
                 window.app.screenshotImg.src = historyItem.image;
                 window.app.imagePreview.classList.remove('hidden');
                 document.getElementById('historyPanel').classList.add('hidden');
-                
+
-                // Hide all action buttons in history view
+                // Force hide all unwanted elements
-                window.app.cropBtn.classList.add('hidden');
+                const elementsToHide = [
-                window.app.captureBtn.classList.add('hidden');
+                    window.app.cropBtn,
-                window.app.sendToClaudeBtn.classList.add('hidden');
+                    window.app.captureBtn,
-                window.app.extractTextBtn.classList.add('hidden');
+                    window.app.sendToClaudeBtn,
-                window.app.sendExtractedTextBtn.classList.add('hidden');
+                    window.app.extractTextBtn,
-                
+                    window.app.sendExtractedTextBtn,
-                // Reset confidence display
+                    window.app.textEditor,
-                document.getElementById('confidenceDisplay').textContent = '';
+                    document.querySelector('.text-format-controls'),
-                
+                    document.getElementById('confidenceIndicator'),
-                // Always hide text editor and extracted text in history view
+                    document.querySelector('.analysis-button .button-group')
-                window.app.textEditor.classList.add('hidden');
+                ];
+
+                elementsToHide.forEach(element => {
+                    if (element) {
+                        element.classList.add('hidden');
+                        element.style.display = 'none';
+                    }
+                });
+
+                // Clear text and confidence display
                 window.app.extractedText.value = '';
-                window.app.sendExtractedTextBtn.classList.add('hidden');
+                document.getElementById('confidenceDisplay').textContent = '';
                 
                 // Show response if it exists
                 if (historyItem.response) {
                     window.app.claudePanel.classList.remove('hidden');
                     window.app.responseContent.textContent = historyItem.response;
                 }
+
+                // Add click handler to close history view and restore previous state
+                const closeHandler = () => {
+                    // Remove history view class
+                    document.body.classList.remove('history-view');
+                    
+                    // Hide preview panels
+                    window.app.imagePreview.classList.add('hidden');
+                    window.app.claudePanel.classList.add('hidden');
+                    
+                    // Restore previous state
+                    if (previousState.textEditorVisible) {
+                        window.app.textEditor.classList.remove('hidden');
+                        window.app.textEditor.style.display = '';
+                    }
+                    if (previousState.textFormatControlsVisible) {
+                        document.querySelector('.text-format-controls').classList.remove('hidden');
+                        document.querySelector('.text-format-controls').style.display = '';
+                    }
+                    window.app.extractedText.value = previousState.extractedTextValue;
+                    
+                    // Remove event listener
+                    document.removeEventListener('click', closeHandler);
+                };
+                
+                // Close history view when clicking outside the image or response
+                document.addEventListener('click', (e) => {
+                    if (!window.app.imagePreview.contains(e.target) && 
+                        !window.app.claudePanel.contains(e.target)) {
+                        closeHandler();
+                    }
+                });
             }
         });
     });

static/js/main.js

@@ -222,7 +222,7 @@ class SnapSolver {
                     break;
                     
                 case 'error':
-                    console.error('Claude analysis error:', data.error);
+                    console.error('Analysis error:', data.error);
                     const errorMessage = data.error || 'Unknown error occurred';
                     this.responseContent.textContent += '\nError: ' + errorMessage;
                     this.sendToClaudeBtn.disabled = false;

static/style.css

@@ -641,6 +641,32 @@ button:disabled {
 }
 
 /* History Panel */
+/* Hide specific elements when viewing history items */
+body.history-view .text-editor,
+body.history-view .text-format-controls,
+body.history-view .confidence-indicator,
+body.history-view #confidenceIndicator,
+body.history-view #confidenceDisplay,
+body.history-view #extractText,
+body.history-view #sendExtractedText,
+body.history-view .format-toggle,
+body.history-view .send-text-group,
+body.history-view #textEditor,
+body.history-view .analysis-button .button-group {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+    position: absolute !important;
+    z-index: -1 !important;
+}
+
+/* Ensure only image and response are visible in history view */
+body.history-view .image-preview,
+body.history-view .claude-panel {
+    display: block !important;
+}
+
 .history-panel {
     position: fixed;
     top: 0;