Enh(viewer): Only load logs on request

Author: klieret

codeclash/viewer/app.py

@@ -277,12 +277,11 @@ class GameMetadata:
     """Metadata about a game session"""
 
     results: dict[str, Any]
-    main_log: str
     main_log_path: str
     metadata_file_path: str
     rounds: list[dict[str, Any]]
     agent_info: list[AgentInfo] | None = None
-    all_logs: dict[str, dict[str, str]] | None = None  # {log_type: {"content": content, "path": path}}
+    all_logs: dict[str, dict[str, str]] | None = None  # {log_type: {"path": path}} - content loaded on demand
 
 
 def process_round_results(
@@ -385,12 +384,11 @@ def parse_game_metadata(self) -> GameMetadata:
             results = metadata.raw_data
             metadata_file_path = str(self.log_dir / "metadata.json")
 
-        # Parse tournament.log if it exists
+        # Get path to main log but don't load content
         main_log_file = self.log_dir / "tournament.log"
-        main_log = main_log_file.read_text() if main_log_file.exists() else "No tournament log found"
         main_log_path = str(main_log_file) if main_log_file.exists() else ""
 
-        # Parse all available logs
+        # Parse all available logs (metadata only, no content)
         all_logs = self._parse_all_logs()
 
         # Extract agent information once
@@ -411,7 +409,6 @@ def parse_game_metadata(self) -> GameMetadata:
 
         return GameMetadata(
             results=results,
-            main_log=main_log,
             main_log_path=main_log_path,
             metadata_file_path=metadata_file_path,
             rounds=rounds,
@@ -468,7 +465,9 @@ def parse_trajectory(self, player_name: str, round_num: int) -> TrajectoryInfo |
                 trajectory_file_path=str(traj_file),
                 diff_by_files=diff_by_files,
                 incremental_diff_by_files=incremental_diff_by_files,
-                valid_submission=self._get_metadata().round_stats[str(round_num)]['player_stats'][player_name]['valid_submit']
+                valid_submission=self._get_metadata().round_stats[str(round_num)]["player_stats"][player_name][
+                    "valid_submit"
+                ],
             )
         except (json.JSONDecodeError, KeyError) as e:
             logger.error(f"Error parsing {traj_file}: {e}", exc_info=True)
@@ -670,7 +669,7 @@ def load_matrix_analysis(self) -> dict[str, Any] | None:
             return None
 
     def _parse_all_logs(self) -> dict[str, dict[str, str]]:
-        """Parse all available log files in the tournament directory"""
+        """Parse all available log files in the tournament directory (metadata only, no content)"""
         all_logs = {}
 
         # Define log files to look for
@@ -680,11 +679,7 @@ def _parse_all_logs(self) -> dict[str, dict[str, str]]:
         for log_file, display_name in log_files.items():
             log_path = self.log_dir / log_file
             if log_path.exists():
-                try:
-                    content = log_path.read_text()
-                    all_logs[display_name] = {"content": content, "path": str(log_path)}
-                except (OSError, UnicodeDecodeError) as e:
-                    all_logs[display_name] = {"content": f"Error reading log file: {e}", "path": str(log_path)}
+                all_logs[display_name] = {"path": str(log_path)}
 
         # Check for player logs
         players_dir = self.log_dir / "players"
@@ -697,13 +692,8 @@ def _parse_all_logs(self) -> dict[str, dict[str, str]]:
                 player_log = player_dir / "player.log"
 
                 if player_log.exists():
-                    try:
-                        content = player_log.read_text()
-                        display_name = f"Player {player_name} Log"
-                        all_logs[display_name] = {"content": content, "path": str(player_log)}
-                    except (OSError, UnicodeDecodeError) as e:
-                        display_name = f"Player {player_name} Log"
-                        all_logs[display_name] = {"content": f"Error reading log file: {e}", "path": str(player_log)}
+                    display_name = f"Player {player_name} Log"
+                    all_logs[display_name] = {"path": str(player_log)}
 
         return all_logs
 
@@ -1220,4 +1210,38 @@ def download_file():
         return jsonify({"success": False, "error": str(e)}), 500
 
 
+@app.route("/load-log")
+def load_log():
+    """Load log file content on demand"""
+    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
+
+        # Read and return the file content
+        content = file_path_obj.read_text()
+        return jsonify({"success": True, "content": content})
+
+    except (OSError, UnicodeDecodeError) as e:
+        return jsonify({"success": False, "error": f"Error reading file: {str(e)}"}), 500
+
+
 # Use run_viewer.py to launch the application

codeclash/viewer/static/css/style.css

@@ -748,11 +748,13 @@ details summary {
   color: var(--success-color);
 }
 
-.status-yes, .valid-yes {
+.status-yes,
+.valid-yes {
   color: var(--success-color);
 }
 
-.status-no, .valid-no {
+.status-no,
+.valid-no {
   color: var(--neon-red);
 }
 
@@ -2108,3 +2110,38 @@ summary:focus {
     font-size: 0.7rem;
   }
 }
+
+/* Log loading UI */
+.log-load-placeholder {
+  padding: 2rem;
+  text-align: center;
+}
+
+.load-log-btn {
+  font-size: 1rem;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  transition: all 0.2s ease;
+}
+
+.load-log-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 255, 136, 0.3);
+}
+
+.log-loading-spinner {
+  padding: 2rem;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  color: var(--text-secondary);
+  font-size: 1rem;
+}
+
+.log-loading-spinner .spinner-border {
+  width: 2rem;
+  height: 2rem;
+  border-width: 0.25rem;
+}

codeclash/viewer/static/js/app.js

@@ -342,6 +342,40 @@ function closeTocMenu() {
   }
 }
 
+// Log loading functionality
+function loadLogContent(logPath, container) {
+  const placeholder = container.querySelector(".log-load-placeholder");
+  const spinner = container.querySelector(".log-loading-spinner");
+  const contentPre = container.querySelector(".log-content-scrollable");
+  const contentCode = container.querySelector(".log-content");
+
+  // Hide placeholder, show spinner
+  placeholder.style.display = "none";
+  spinner.style.display = "block";
+
+  // Fetch log content from server
+  fetch(`/load-log?path=${encodeURIComponent(logPath)}`)
+    .then((response) => response.json())
+    .then((data) => {
+      spinner.style.display = "none";
+
+      if (data.success) {
+        // Display the content
+        contentCode.textContent = data.content;
+        contentPre.style.display = "block";
+      } else {
+        // Show error message
+        contentCode.textContent = `Error loading log: ${data.error}`;
+        contentPre.style.display = "block";
+      }
+    })
+    .catch((error) => {
+      spinner.style.display = "none";
+      contentCode.textContent = `Error loading log: ${error}`;
+      contentPre.style.display = "block";
+    });
+}
+
 // Setup button event listeners
 function setupButtonEventListeners() {
   // Pick game button
@@ -400,6 +434,17 @@ function setupButtonEventListeners() {
       collapseTrajectoryMessages(this);
     });
   });
+
+  // Log loading buttons
+  document.querySelectorAll(".load-log-btn").forEach((button) => {
+    button.addEventListener("click", function () {
+      const logPath = this.getAttribute("data-log-path");
+      const container = this.closest(".log-content-container");
+      if (logPath && container) {
+        loadLogContent(logPath, container);
+      }
+    });
+  });
 }
 
 // Initialize everything when DOM is loaded

codeclash/viewer/templates/includes/overview.html

@@ -75,28 +75,39 @@ <h2><i class="bi bi-bar-chart"></i> Overview</h2>
     </div>
 
     <!-- Tournament Log -->
-    <details class="foldout">
+    {% if metadata.main_log_path %}
+    <details class="foldout log-foldout" data-log-path="{{ metadata.main_log_path }}">
         <summary>
             <i class="bi bi-journal"></i> Tournament Log
-            {% if metadata.main_log_path %}
             <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">
-            <pre class="log-content-scrollable"><code>{{ metadata.main_log }}</code></pre>
+            <div class="log-load-placeholder">
+                <button class="btn btn-primary load-log-btn" data-log-path="{{ metadata.main_log_path }}">
+                    <i class="bi bi-download"></i> Load Log Content
+                </button>
+            </div>
+            <div class="log-loading-spinner" style="display: none;">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+                <span class="ms-2">Loading log content...</span>
+            </div>
+            <pre class="log-content-scrollable" style="display: none;"><code class="log-content"></code></pre>
         </div>
     </details>
+    {% endif %}
 
     <!-- All Other Logs -->
     {% if metadata.all_logs %}
         {% for log_name, log_data in metadata.all_logs.items() %}
             {% if log_name != "Tournament Log" %}
-            <details class="foldout">
+            <details class="foldout log-foldout" data-log-path="{{ log_data.path }}">
                 <summary>
                     <i class="bi bi-journal"></i> {{ log_name }}
                     {% if log_data.path %}
@@ -109,7 +120,18 @@ <h2><i class="bi bi-bar-chart"></i> Overview</h2>
                     {% endif %}
                 </summary>
                 <div class="log-content-container">
-                    <pre class="log-content-scrollable"><code>{{ log_data.content }}</code></pre>
+                    <div class="log-load-placeholder">
+                        <button class="btn btn-primary load-log-btn" data-log-path="{{ log_data.path }}">
+                            <i class="bi bi-download"></i> Load Log Content
+                        </button>
+                    </div>
+                    <div class="log-loading-spinner" style="display: none;">
+                        <div class="spinner-border text-primary" role="status">
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
+                        <span class="ms-2">Loading log content...</span>
+                    </div>
+                    <pre class="log-content-scrollable" style="display: none;"><code class="log-content"></code></pre>
                 </div>
             </details>
             {% endif %}