Enh(viewer): Add download buttons for objects

Author: klieret

.cursor/rules/viewer.mdc

@@ -376,7 +376,7 @@ The application has two main pages:
   - **game.log**: Game-specific logging
   - **everything.log**: Combined comprehensive logging
   - **players/p1/player.log, players/p2/player.log**: Individual player logs for each player
-  - Each log foldout includes a "Copy path" button and has its own scroll container with max-height of 500px for large logs
+  - Each log foldout includes "Copy path" and "Download" buttons and has its own scroll container with max-height of 500px for large logs
   - Logs are displayed in a dedicated section with proper styling and scrollbars
 
 #### Analysis Section
@@ -481,6 +481,31 @@ The trajectory template displays:
 
 **Content Preview**: Long message content (>5 lines) shows a preview with expand/collapse functionality to keep the interface manageable.
 
+## Download Functionality
+
+The trajectory viewer provides download capabilities for all files that have "Copy path" buttons (except the current folder path):
+
+### Download Locations
+
+* **Tournament and Game Logs**: All log files in the Overview section (tournament.log, game.log, everything.log, player logs)
+* **Metadata Files**: The metadata.json file in the Setup section
+* **Trajectory Files**: Individual trajectory files (.traj.json) in the Rounds section
+
+### Implementation Details
+
+* **Download Buttons**: Each "Copy path" button (except current folder) is accompanied by a "Download" button with a download icon
+* **Server Endpoint**: `GET /download-file?path=<file_path>` serves files with proper security checks
+* **Security**: Files must exist within the logs directory, be actual files (not directories), and be accessible
+* **File Naming**: Downloaded files retain their original names
+* **JavaScript**: Download functionality is handled by `downloadFile()` function in `clipboard.js`
+* **User Feedback**: Download buttons show success/error states similar to copy buttons
+
+### Button Styling
+
+* **Download buttons** use the same styling as copy buttons but with download icon (`bi-download`)
+* **Button classes**: `.download-btn` and `.download-btn-small` for consistent styling
+* **Placement**: Download buttons appear immediately after their corresponding copy path buttons
+
 ## Multi-Select Actions Specification
 
 The game picker includes four batch operations for selected game folders, accessible via the action dropdown:

codeclash/viewer/app.py

@@ -11,7 +11,7 @@
 from pathlib import Path
 from typing import Any
 
-from flask import Flask, jsonify, redirect, render_template, request, url_for
+from flask import Flask, jsonify, redirect, render_template, request, send_file, url_for
 
 from codeclash.ratings.significance import calculate_p_value
 from codeclash.tournaments.utils.git_utils import filter_git_diff, split_git_diff_by_files
@@ -1207,4 +1207,37 @@ def analysis_line_counts():
         return jsonify({"success": False, "error": str(e)})
 
 
+@app.route("/download-file")
+def download_file():
+    """Download a file with proper security checks"""
+    file_path = request.args.get("path")
+
+    if not file_path:
+        return jsonify({"success": False, "error": "No file path provided"}), 400
+
+    try:
+        # Convert to Path object
+        file_path_obj = Path(file_path)
+
+        # Security check: ensure the file exists
+        if not file_path_obj.exists():
+            return jsonify({"success": False, "error": "File does not exist"}), 404
+
+        # Security check: ensure the file is not a directory
+        if not file_path_obj.is_file():
+            return jsonify({"success": False, "error": "Path is not a file"}), 400
+
+        # Security check: ensure the path is within our expected logs directory
+        try:
+            file_path_obj.relative_to(LOG_BASE_DIR)
+        except ValueError:
+            return jsonify({"success": False, "error": "Invalid file path"}), 403
+
+        # Send the file as an attachment
+        return send_file(file_path_obj, as_attachment=True, download_name=file_path_obj.name)
+
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)}), 500
+
+
 # Use run_viewer.py to launch the application

codeclash/viewer/static/css/style.css

@@ -1199,6 +1199,24 @@ summary:focus {
   color: #000000;
 }
 
+.download-btn {
+  background: var(--accent-color);
+  color: #000000;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  transition: background-color 0.2s;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.download-btn:hover {
+  background: var(--accent-hover);
+  color: #000000;
+}
+
 .delete-experiment-btn {
   background: var(--success-color);
   color: white;
@@ -1337,6 +1355,26 @@ summary:focus {
   font-weight: 600;
 }
 
+.download-btn-small {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
+  padding: 0.25rem 0.5rem;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 0.8rem;
+  margin-left: 0.5rem;
+  transition: all 0.2s;
+  vertical-align: middle;
+}
+
+.download-btn-small:hover {
+  background: var(--accent-color);
+  color: #000000;
+  border-color: var(--accent-color);
+  font-weight: 600;
+}
+
 /* Responsive adjustments for copy buttons */
 @media (max-width: 768px) {
   .path-display {
@@ -1347,6 +1385,10 @@ summary:focus {
   .copy-path-btn {
     align-self: flex-start;
   }
+
+  .download-btn {
+    align-self: flex-start;
+  }
 }
 
 /* Navigation button styles */

codeclash/viewer/static/js/clipboard.js

@@ -75,7 +75,53 @@ function copyToClipboard(text, button) {
   }
 }
 
-// Setup copy button event listeners
+// Download file function
+function downloadFile(filePath, button) {
+  function showSuccessMessage() {
+    if (button) {
+      const originalText = button.textContent;
+      const originalColor = button.style.color;
+      button.textContent = "✓ Downloading";
+      button.style.color = "green";
+      setTimeout(() => {
+        button.textContent = originalText;
+        button.style.color = originalColor;
+      }, 1500);
+    }
+  }
+
+  function showErrorMessage() {
+    if (button) {
+      const originalText = button.textContent;
+      const originalColor = button.style.color;
+      button.textContent = "✗ Failed";
+      button.style.color = "red";
+      setTimeout(() => {
+        button.textContent = originalText;
+        button.style.color = originalColor;
+      }, 1500);
+    }
+  }
+
+  try {
+    // Create a temporary link element to trigger download
+    const downloadUrl = `/download-file?path=${encodeURIComponent(filePath)}`;
+    const link = document.createElement("a");
+    link.href = downloadUrl;
+    link.style.display = "none";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+
+    showSuccessMessage();
+    console.log("Downloading file:", filePath);
+  } catch (err) {
+    console.error("Failed to download file:", err);
+    showErrorMessage();
+  }
+}
+
+// Setup copy and download button event listeners
 function setupCopyButtons() {
   // Add event listeners to all copy path buttons
   document
@@ -94,3 +140,23 @@ function setupCopyButtons() {
       });
     });
 }
+
+// Setup download button event listeners
+function setupDownloadButtons() {
+  // Add event listeners to all download buttons
+  document
+    .querySelectorAll(".download-btn, .download-btn-small")
+    .forEach((button) => {
+      button.addEventListener("click", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const path = this.getAttribute("data-path");
+        if (path) {
+          downloadFile(path, this);
+        } else {
+          console.error("No path found on download button:", this);
+        }
+      });
+    });
+}

codeclash/viewer/templates/includes/overview.html

@@ -82,6 +82,9 @@ <h2><i class="bi bi-bar-chart"></i> Overview</h2>
             <button class="copy-path-btn-small" data-path="{{ metadata.main_log_path }}" title="Copy file path">
                 <i class="bi bi-clipboard"></i> Copy path
             </button>
+            <button class="download-btn-small" data-path="{{ metadata.main_log_path }}" title="Download file">
+                <i class="bi bi-download"></i> Download
+            </button>
             {% endif %}
         </summary>
         <div class="log-content-container">
@@ -100,6 +103,9 @@ <h2><i class="bi bi-bar-chart"></i> Overview</h2>
                     <button class="copy-path-btn-small" data-path="{{ log_data.path }}" title="Copy file path">
                         <i class="bi bi-clipboard"></i> Copy path
                     </button>
+                    <button class="download-btn-small" data-path="{{ log_data.path }}" title="Download file">
+                        <i class="bi bi-download"></i> Download
+                    </button>
                     {% endif %}
                 </summary>
                 <div class="log-content-container">

codeclash/viewer/templates/includes/setup.html

@@ -31,6 +31,9 @@ <h2><i class="bi bi-gear"></i> Setup</h2>
             <button class="btn btn-outline-secondary btn-sm copy-path-btn-small" data-path="{{ metadata.metadata_file_path }}" title="Copy metadata file path">
                 <i class="bi bi-clipboard"></i> Copy path
             </button>
+            <button class="btn btn-outline-secondary btn-sm download-btn-small" data-path="{{ metadata.metadata_file_path }}" title="Download metadata file">
+                <i class="bi bi-download"></i> Download
+            </button>
             {% endif %}
         </summary>
         <div class="metadata-display">

codeclash/viewer/templates/includes/trajectory.html

@@ -28,6 +28,9 @@ <h3>
             <button class="copy-path-btn-small" data-path="{{ trajectory.trajectory_file_path }}" title="Copy trajectory file path">
                 <i class="bi bi-clipboard"></i> Copy path
             </button>
+            <button class="download-btn-small" data-path="{{ trajectory.trajectory_file_path }}" title="Download trajectory file">
+                <i class="bi bi-download"></i> Download
+            </button>
             {% endif %}
         </summary>
         <div class="trajectory-content">

codeclash/viewer/templates/index.html

@@ -84,6 +84,8 @@ <h3>Move/Rename Folder</h3>
         document.addEventListener('DOMContentLoaded', function() {
             // Setup copy buttons
             setupCopyButtons();
+            // Setup download buttons
+            setupDownloadButtons();
             // Setup readme autosave (only if not in static mode)
             {% if not is_static %}
             setupReadmeAutosave();