Feat(Viewer): Allow to rename/move runs

Author: klieret

.cursor/rules/viewer.mdc

@@ -268,6 +268,7 @@ The application has two main pages:
   - Click elsewhere on game row: Navigate to viewer (supports middle-click)
   - "Open" button: Navigate to viewer (supports middle-click)
   - "↗" button: Always open viewer in new tab
+  - "📁" button: Open move/rename dialog for individual folders
 * **Batch Operations**:
   - "Select All" checkbox to toggle all games
   - Styled action dropdown with custom arrow and hover effects for batch operations on selected games
@@ -279,6 +280,7 @@ The application has two main pages:
 ### Layout
 
 * Full-width table structure with six columns: Select, Game Session, Note, Rounds, Models, Action
+* **Action column includes**: Open, Open in new tab (↗), and Move/rename (📁) buttons for each game folder
 * Responsive design that adapts to mobile screens (hides some columns on mobile)
 * Hover effects and visual feedback
 * Base directory path display at the top
@@ -379,6 +381,33 @@ The game picker includes four batch operations for selected game folders, access
 - Validates subfolder name (no path separators)
 - Shows success message and refreshes page after operation
 
+## Individual Move/Rename Functionality
+
+Each game row in the picker includes a move/rename button (📁) that provides individual folder operations:
+
+### Move/Rename Dialog
+- **Trigger**: Click the 📁 button next to any game folder
+- **Interface**: Minimal unstyled dialog with text input field
+- **Behavior**:
+  - Pre-fills input with current full path
+  - User can edit path to rename or move folder
+  - Supports moving to new directory structures
+- **Keyboard shortcuts**:
+  - `Escape`: Close dialog
+  - `Enter`: Confirm move operation
+
+### Move/Rename Operations
+- **Server endpoint**: `POST /move-folder`
+- **Path validation**: Ensures both source and target are within logs directory
+- **Intermediate folders**: Creates intermediate directories if necessary
+- **Conflict handling**: Prevents overwriting existing folders
+- **Error handling**: Provides clear error messages for invalid operations
+- **Success feedback**: Shows confirmation message and refreshes page
+
+### Use Cases
+- **Simple rename**: Change folder name (e.g., `experiment1` → `experiment1_final`)
+- **Move to subdirectory**: Move folder to organized structure (e.g., `experiment1` → `completed/experiment1`)
+- **Reorganize structure**: Move folders between different directory hierarchies
 
 ### Important
 

codeclash/viewer/app.py

@@ -787,4 +787,56 @@ def move_to_subfolder():
         return jsonify({"success": False, "error": str(e)})
 
 
+@app.route("/move-folder", methods=["POST"])
+def move_folder():
+    """Move/rename a single folder to a new path"""
+    try:
+        data = request.get_json()
+        old_path = data.get("old_path", "")
+        new_path = data.get("new_path", "")
+
+        if not old_path:
+            return jsonify({"success": False, "error": "No old path provided"})
+
+        if not new_path:
+            return jsonify({"success": False, "error": "No new path provided"})
+
+        # Convert to Path objects relative to LOG_BASE_DIR
+        old_full_path = LOG_BASE_DIR / old_path
+        new_full_path = LOG_BASE_DIR / new_path
+
+        # Validate old path exists
+        if not old_full_path.exists():
+            return jsonify({"success": False, "error": "Source folder does not exist"})
+
+        # Validate new path doesn't already exist
+        if new_full_path.exists():
+            return jsonify({"success": False, "error": "Target path already exists"})
+
+        # Security check: ensure both paths are within our expected logs directory
+        try:
+            old_full_path.relative_to(LOG_BASE_DIR)
+            new_full_path.relative_to(LOG_BASE_DIR)
+        except ValueError:
+            return jsonify({"success": False, "error": "Invalid path - must be within logs directory"})
+
+        # Create intermediate directories if necessary
+        new_full_path.parent.mkdir(parents=True, exist_ok=True)
+
+        # Perform the move
+        old_full_path.rename(new_full_path)
+
+        return jsonify(
+            {
+                "success": True,
+                "message": f"Successfully moved folder from '{old_path}' to '{new_path}'",
+                "old_path": old_path,
+                "new_path": new_path,
+            }
+        )
+
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)})
+
+
 # Use run_viewer.py to launch the application

codeclash/viewer/static/css/picker.css

@@ -111,15 +111,15 @@
   padding: 1rem;
   border-bottom: 1px solid var(--border-color);
   display: grid;
-  grid-template-columns: 60px 2.5fr 3fr 100px 3fr 140px;
+  grid-template-columns: 60px 2.5fr 3fr 100px 3fr 180px;
   gap: 1rem;
   font-weight: 600;
   color: var(--text-primary);
 }
 
 .game-row {
   display: grid;
-  grid-template-columns: 60px 2.5fr 3fr 100px 3fr 140px;
+  grid-template-columns: 60px 2.5fr 3fr 100px 3fr 180px;
   gap: 1rem;
   padding: 0.75rem 1rem;
   border-bottom: 1px solid var(--border-color);
@@ -310,7 +310,7 @@
   display: flex;
   justify-content: center;
   gap: 0.5rem;
-  min-width: 140px;
+  min-width: 180px;
 }
 
 .open-button {
@@ -347,6 +347,22 @@
   background-color: var(--accent-hover);
 }
 
+.move-button {
+  background-color: var(--warning-color);
+  color: white;
+  border: none;
+  padding: 0.4rem 0.6rem;
+  border-radius: 0.25rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.move-button:hover {
+  filter: brightness(1.1);
+}
+
 .no-games-message {
   text-align: center;
   padding: 3rem;
@@ -368,6 +384,91 @@
   z-index: 100;
 }
 
+/* Move Dialog Styles */
+.move-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.move-dialog-content {
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  max-width: 500px;
+  width: 90%;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.move-dialog-content h3 {
+  margin: 0 0 1rem 0;
+  color: var(--text-primary);
+}
+
+.move-dialog-content p {
+  margin: 0 0 1rem 0;
+  color: var(--text-secondary);
+}
+
+.move-path-input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 2px solid var(--border-color);
+  border-radius: 0.25rem;
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+  font-family: monospace;
+  font-size: 0.9rem;
+  margin-bottom: 1rem;
+}
+
+.move-path-input:focus {
+  outline: none;
+  border-color: var(--accent-color);
+}
+
+.move-dialog-buttons {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+.move-dialog-buttons button {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 0.25rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.move-dialog-buttons button:first-child {
+  background-color: var(--success-color);
+  color: white;
+}
+
+.move-dialog-buttons button:first-child:hover {
+  filter: brightness(1.1);
+}
+
+.move-dialog-buttons button:last-child {
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+}
+
+.move-dialog-buttons button:last-child:hover {
+  background-color: var(--bg-tertiary);
+}
+
 /* Mobile responsiveness */
 @media (max-width: 768px) {
   .picker-container {

codeclash/viewer/static/js/picker.js

@@ -412,6 +412,92 @@ function moveToSubfolder() {
     });
 }
 
+// Move/Rename Dialog Variables
+let currentMovePath = "";
+
+function showMoveDialog(gamePath) {
+  currentMovePath = gamePath;
+  const dialog = document.getElementById("move-dialog");
+  const input = document.getElementById("move-path-input");
+
+  input.value = gamePath;
+  dialog.style.display = "flex";
+
+  // Focus and select the input text
+  setTimeout(() => {
+    input.focus();
+    input.select();
+  }, 100);
+}
+
+function cancelMove() {
+  const dialog = document.getElementById("move-dialog");
+  dialog.style.display = "none";
+  currentMovePath = "";
+}
+
+function confirmMove() {
+  const input = document.getElementById("move-path-input");
+  const newPath = input.value.trim();
+
+  if (!newPath) {
+    alert("Please enter a valid path");
+    return;
+  }
+
+  if (newPath === currentMovePath) {
+    cancelMove();
+    return;
+  }
+
+  // Send move request to server
+  fetch("/move-folder", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      old_path: currentMovePath,
+      new_path: newPath,
+    }),
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      if (data.success) {
+        showCopyMessage(`Moved folder to: ${newPath}`);
+        // Refresh the page to show updated folder structure
+        setTimeout(() => window.location.reload(), 1500);
+      } else {
+        alert("Failed to move folder: " + data.error);
+      }
+    })
+    .catch((err) => {
+      console.error("Failed to move folder: ", err);
+      alert("Failed to move folder. Please try again.");
+    });
+
+  cancelMove();
+}
+
+// Close dialog on Escape key
+document.addEventListener("keydown", function (event) {
+  if (event.key === "Escape") {
+    const dialog = document.getElementById("move-dialog");
+    if (dialog.style.display === "flex") {
+      cancelMove();
+    }
+  }
+});
+
+// Close dialog when clicking outside the dialog content
+document
+  .getElementById("move-dialog")
+  .addEventListener("click", function (event) {
+    if (event.target === this) {
+      cancelMove();
+    }
+  });
+
 // Initialize theme and other functionality on page load
 document.addEventListener("DOMContentLoaded", function () {
   initializeTheme();
@@ -420,4 +506,5 @@ document.addEventListener("DOMContentLoaded", function () {
   console.log("Available keyboard shortcuts:");
   console.log("  Ctrl/Cmd + D: Toggle dark mode");
   console.log("  Shift + Click: Range select checkboxes");
+  console.log("  Escape: Close move dialog");
 });

codeclash/viewer/templates/picker.html

@@ -123,6 +123,9 @@ <h3>📁 Base Directory:</h3>
                     <button class="open-new-tab-button" onclick="event.stopPropagation(); openGameInNewTab('{{ game.name }}')" title="Open in new tab">
                         ↗
                     </button>
+                    <button class="move-button" onclick="event.stopPropagation(); showMoveDialog('{{ game.name }}')" title="Move/rename">
+                        📁
+                    </button>
                     {% else %}
                     <span class="folder-indicator">Folder</span>
                     {% endif %}
@@ -139,6 +142,19 @@ <h3>No Game Sessions Found</h3>
         {% endif %}
     </div>
 
+    <!-- Move/Rename Dialog -->
+    <div id="move-dialog" class="move-dialog" style="display: none;">
+        <div class="move-dialog-content">
+            <h3>Move/Rename Folder</h3>
+            <p>Edit the path to move or rename the folder:</p>
+            <input type="text" id="move-path-input" class="move-path-input" />
+            <div class="move-dialog-buttons">
+                <button onclick="confirmMove()">Move</button>
+                <button onclick="cancelMove()">Cancel</button>
+            </div>
+        </div>
+    </div>
+
     <script src="{{ url_for('static', filename='js/app.js') }}"></script>
     <script src="{{ url_for('static', filename='js/picker.js') }}"></script>
 </body>