Enh(viewer): Add readme, delete functionality

klieret · klieret · commit f356116205ad · 2025-09-16T17:47:35.000-04:00
diff --git a/.cursor/rules/viewer.mdc b/.cursor/rules/viewer.mdc
@@ -253,10 +253,19 @@ The application has two main pages:
   - Tooltip explains middle-click functionality
 * **"↗" button**: Always open picker in new tab
 * **Dark/light mode toggle button**
-* **Current folder path display** with copy functionality
+* **Current folder path display** with copy functionality and delete button
+  - **Delete button**: 🗑️ icon with simple confirmation prompt to delete the entire experiment folder (rm -r)
 
 ### Main body
 
+#### Readme Section
+
+* **First section** after the header: A "Readme" section with editable text area
+* Automatically loads content from `readme.txt` in the experiment folder (if it exists)
+* **Autosave functionality**: Saves changes to `readme.txt` after 1 second of inactivity
+* Shows status indicator: "Loading...", "Typing...", "Saving...", "Saved", "Error"
+* Simple, unstyled text area for adding experiment notes and observations
+
 #### Overall results
 
 * At the top, we show the content of `metadata.json`
diff --git a/codeclash/viewer/app.py b/codeclash/viewer/app.py
@@ -6,6 +6,7 @@
 """
 
 import json
+import shutil
 from dataclasses import dataclass
 from pathlib import Path
 from typing import Any
@@ -568,4 +569,95 @@ def trajectory_detail(player_name: str, round_num: int):
     return render_template("trajectory.html", trajectory=trajectory)
 
 
+@app.route("/delete-experiment", methods=["POST"])
+def delete_experiment():
+    """Delete an experiment folder"""
+    try:
+        data = request.get_json()
+        folder_path = data.get("folder_path")
+
+        if not folder_path:
+            return jsonify({"success": False, "error": "No folder path provided"})
+
+        # Convert to Path object and validate it's within our logs directory
+        folder_path_obj = Path(folder_path)
+
+        # Ensure the path exists and is a directory
+        if not folder_path_obj.exists():
+            return jsonify({"success": False, "error": "Folder does not exist"})
+
+        if not folder_path_obj.is_dir():
+            return jsonify({"success": False, "error": "Path is not a directory"})
+
+        # Security check: ensure the path is within our expected logs directory
+        try:
+            # Check if it's a subdirectory of LOG_BASE_DIR
+            folder_path_obj.relative_to(LOG_BASE_DIR)
+        except ValueError:
+            return jsonify({"success": False, "error": "Invalid folder path"})
+
+        # Delete the folder
+        shutil.rmtree(folder_path_obj)
+
+        return jsonify({"success": True, "message": "Experiment deleted successfully"})
+
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)})
+
+
+@app.route("/save-readme", methods=["POST"])
+def save_readme():
+    """Save readme content to readme.txt in the experiment folder"""
+    try:
+        data = request.get_json()
+        selected_folder = data.get("selected_folder")
+        content = data.get("content", "")
+
+        if not selected_folder:
+            return jsonify({"success": False, "error": "No folder specified"})
+
+        # Get the folder path
+        folder_path = LOG_BASE_DIR / selected_folder
+
+        if not folder_path.exists() or not folder_path.is_dir():
+            return jsonify({"success": False, "error": "Invalid folder"})
+
+        # Save to readme.txt
+        readme_file = folder_path / "readme.txt"
+        readme_file.write_text(content)
+
+        return jsonify({"success": True, "message": "Readme saved successfully"})
+
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)})
+
+
+@app.route("/load-readme")
+def load_readme():
+    """Load readme content from readme.txt in the experiment folder"""
+    try:
+        selected_folder = request.args.get("folder")
+
+        if not selected_folder:
+            return jsonify({"success": False, "error": "No folder specified"})
+
+        # Get the folder path
+        folder_path = LOG_BASE_DIR / selected_folder
+
+        if not folder_path.exists() or not folder_path.is_dir():
+            return jsonify({"success": False, "error": "Invalid folder"})
+
+        # Load from readme.txt
+        readme_file = folder_path / "readme.txt"
+        content = ""
+
+        if readme_file.exists():
+            content = readme_file.read_text()
+
+        return jsonify({"success": True, "content": content})
+
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)})
+
+
 # Use run_viewer.py to launch the application
diff --git a/codeclash/viewer/static/css/style.css b/codeclash/viewer/static/css/style.css
@@ -176,12 +176,14 @@ body {
 }
 
 /* Sections */
+.readme-section,
 .setup-section,
 .overview-section,
 .rounds-section {
   margin-bottom: 3rem;
 }
 
+.readme-section h2,
 .setup-section h2,
 .overview-section h2,
 .rounds-section h2 {
@@ -918,6 +920,77 @@ summary:focus {
   background: var(--accent-hover);
 }
 
+.delete-experiment-btn {
+  background: var(--danger-color);
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  transition: background-color 0.2s;
+  white-space: nowrap;
+}
+
+.delete-experiment-btn:hover {
+  background: #c82333;
+}
+
+/* Readme Section */
+.readme-container {
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  box-shadow: var(--shadow);
+}
+
+.readme-textarea {
+  width: 100%;
+  min-height: 120px;
+  padding: 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: 0.375rem;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  resize: vertical;
+  transition: border-color 0.2s ease;
+}
+
+.readme-textarea:focus {
+  outline: none;
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.1);
+}
+
+.readme-textarea::placeholder {
+  color: var(--text-muted);
+}
+
+.readme-status {
+  margin-top: 0.5rem;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  text-align: right;
+  transition: color 0.2s ease;
+}
+
+.readme-status.saving {
+  color: var(--warning-color);
+}
+
+.readme-status.saved {
+  color: var(--success-color);
+}
+
+.readme-status.error {
+  color: var(--danger-color);
+}
+
 .copy-path-btn-small {
   background: var(--bg-tertiary);
   color: var(--text-secondary);
diff --git a/codeclash/viewer/templates/index.html b/codeclash/viewer/templates/index.html
@@ -43,10 +43,22 @@ <h3>📁 Current Folder:</h3>
                     <button class="copy-path-btn" data-path="{{ selected_folder_path }}" title="Copy folder path">
                         📋 Copy path
                     </button>
+                    <button class="delete-experiment-btn" onclick="deleteExperiment('{{ selected_folder_path }}')" title="Delete this experiment">
+                        🗑️ Delete
+                    </button>
                 </div>
             </div>
         </section>
 
+        <!-- Readme Section -->
+        <section class="readme-section">
+            <h2>📝 Readme</h2>
+            <div class="readme-container">
+                <textarea id="readme-textarea" class="readme-textarea" placeholder="Add notes about this experiment..."></textarea>
+                <div class="readme-status" id="readme-status">Loading...</div>
+            </div>
+        </section>
+
         <!-- Setup Section -->
         <section class="setup-section">
             <h2>⚙️ Setup</h2>
@@ -598,10 +610,133 @@ <h3>
             });
         }
 
+        // Delete experiment function
+        function deleteExperiment(folderPath) {
+            const confirmed = confirm('Are you sure you want to delete this experiment? This action cannot be undone.\n\nFolder: ' + folderPath);
+            if (confirmed) {
+                fetch('/delete-experiment', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        folder_path: folderPath
+                    })
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        alert('Experiment deleted successfully.');
+                        // Redirect to picker
+                        window.location.href = '/picker';
+                    } else {
+                        alert('Error deleting experiment: ' + (data.error || 'Unknown error'));
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    alert('Error deleting experiment: ' + error.message);
+                });
+            }
+        }
+
+        // Readme functionality
+        let readmeTimeout = null;
+        let readmeTextarea = null;
+        let readmeStatus = null;
+
+        function loadReadme() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const folder = urlParams.get('folder');
+
+            if (!folder) return;
+
+            fetch('/load-readme?folder=' + encodeURIComponent(folder))
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        readmeTextarea.value = data.content;
+                        readmeStatus.textContent = 'Loaded';
+                        readmeStatus.className = 'readme-status';
+                    } else {
+                        readmeStatus.textContent = 'Error loading: ' + data.error;
+                        readmeStatus.className = 'readme-status error';
+                    }
+                })
+                .catch(error => {
+                    console.error('Error loading readme:', error);
+                    readmeStatus.textContent = 'Error loading readme';
+                    readmeStatus.className = 'readme-status error';
+                });
+        }
+
+        function saveReadme() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const folder = urlParams.get('folder');
+
+            if (!folder) return;
+
+            readmeStatus.textContent = 'Saving...';
+            readmeStatus.className = 'readme-status saving';
+
+            fetch('/save-readme', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    selected_folder: folder,
+                    content: readmeTextarea.value
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    readmeStatus.textContent = 'Saved';
+                    readmeStatus.className = 'readme-status saved';
+                } else {
+                    readmeStatus.textContent = 'Error: ' + data.error;
+                    readmeStatus.className = 'readme-status error';
+                }
+            })
+            .catch(error => {
+                console.error('Error saving readme:', error);
+                readmeStatus.textContent = 'Error saving';
+                readmeStatus.className = 'readme-status error';
+            });
+        }
+
+        function setupReadmeAutosave() {
+            readmeTextarea = document.getElementById('readme-textarea');
+            readmeStatus = document.getElementById('readme-status');
+
+            if (!readmeTextarea || !readmeStatus) return;
+
+            // Load existing content
+            loadReadme();
+
+            // Setup autosave on input
+            readmeTextarea.addEventListener('input', function() {
+                // Clear existing timeout
+                if (readmeTimeout) {
+                    clearTimeout(readmeTimeout);
+                }
+
+                // Set new timeout for autosave (1 second delay)
+                readmeTimeout = setTimeout(saveReadme, 1000);
+
+                // Show typing indicator
+                readmeStatus.textContent = 'Typing...';
+                readmeStatus.className = 'readme-status';
+            });
+        }
+
         // Initialize JSON editors when page loads
         document.addEventListener('DOMContentLoaded', function() {
             // Setup copy buttons
             setupCopyButtons();
+            // Setup readme autosave
+            setupReadmeAutosave();
             // Initialize metadata JSON editor
             const metadataEditor = new JSONEditor(document.getElementById('metadata-jsoneditor'), {
                 mode: 'view',
