Enh(viewer): Add time column, allow to sort

Author: klieret

codeclash/viewer/app.py

@@ -146,6 +146,32 @@ def get_readme_first_line(log_dir: Path) -> str:
         return ""
 
 
+def get_creation_time_from_metadata(log_dir: Path) -> str:
+    """Extract creation time from metadata.json and format as MM/DD-HH:MM"""
+    from datetime import datetime
+
+    metadata = load_metadata(log_dir)
+    if not metadata:
+        return ""
+
+    # Try to get creation timestamp from metadata
+    timestamp = None
+    if "created_timestamp" in metadata:
+        timestamp = metadata["created_timestamp"]
+    elif "game" in metadata and "created_timestamp" in metadata["game"]:
+        timestamp = metadata["game"]["created_timestamp"]
+
+    if timestamp:
+        try:
+            # Convert timestamp to datetime and format as MM/DD-HH:MM
+            dt = datetime.fromtimestamp(timestamp)
+            return dt.strftime("%m/%d-%H:%M")
+        except (ValueError, OSError):
+            return ""
+
+    return ""
+
+
 def get_agent_info_from_metadata(metadata: dict[str, Any]) -> list[AgentInfo]:
     """Extract detailed agent information from metadata"""
     agents = []
@@ -166,7 +192,7 @@ def get_agent_info_from_metadata(metadata: dict[str, Any]) -> list[AgentInfo]:
     return agents
 
 
-def find_all_game_folders(base_dir: Path) -> list[dict[str, Any]]:
+def find_all_game_folders(base_dir: Path, sort_by: str = "name", sort_order: str = "asc") -> list[dict[str, Any]]:
     """Recursively find all folders and mark which ones contain metadata.json"""
     all_folders = []
     game_folders = set()  # Track which folders are actual game folders
@@ -188,6 +214,7 @@ def scan_directory(directory: Path, relative_path: str = ""):
                         models = get_models_from_metadata(item)
                         readme_first_line = get_readme_first_line(item)
                         game_name = get_game_name_from_metadata(item)
+                        creation_time = get_creation_time_from_metadata(item)
                         game_folders.add(current_relative)
                         all_folders.append(
                             {
@@ -197,6 +224,7 @@ def scan_directory(directory: Path, relative_path: str = ""):
                                 "models": models,
                                 "readme_first_line": readme_first_line,
                                 "game_name": game_name,
+                                "creation_time": creation_time,
                                 "is_game": True,
                                 "depth": depth,
                                 "parent": relative_path if relative_path else None,
@@ -212,6 +240,7 @@ def scan_directory(directory: Path, relative_path: str = ""):
                                 "models": [],
                                 "readme_first_line": "",
                                 "game_name": "",
+                                "creation_time": "",
                                 "is_game": False,
                                 "depth": depth,
                                 "parent": relative_path if relative_path else None,
@@ -228,7 +257,7 @@ def scan_directory(directory: Path, relative_path: str = ""):
 
     # Filter out intermediate folders that don't lead to any game folders
     filtered_folders = []
-    for folder in sorted(all_folders, key=lambda x: x["name"]):
+    for folder in all_folders:
         if folder["is_game"]:
             # Always include game folders
             filtered_folders.append(folder)
@@ -239,6 +268,32 @@ def scan_directory(directory: Path, relative_path: str = ""):
             if has_game_descendants:
                 filtered_folders.append(folder)
 
+    # Sort the filtered folders
+    def get_sort_key(folder):
+        if sort_by == "time":
+            # For time sorting, prioritize game folders and sort by creation time
+            if folder["is_game"] and folder["creation_time"]:
+                # Parse time back to comparable format for sorting
+                try:
+                    from datetime import datetime
+
+                    time_str = folder["creation_time"]
+                    # Convert MM/DD-HH:MM back to datetime for comparison
+                    # Assume current year for comparison
+                    current_year = datetime.now().year
+                    dt = datetime.strptime(f"{current_year}/{time_str}", "%Y/%m/%d-%H:%M")
+                    return (0, dt)  # 0 for game folders (higher priority)
+                except (ValueError, TypeError):
+                    return (1, folder["name"])  # Fallback to name sorting
+            else:
+                return (1, folder["name"])  # Non-game folders or no time, sort by name
+        else:  # sort_by == "name" or default
+            # For name sorting, sort by folder depth first, then by name
+            return (folder["depth"], folder["name"])
+
+    reverse_sort = sort_order == "desc"
+    filtered_folders.sort(key=get_sort_key, reverse=reverse_sort)
+
     return filtered_folders
 
 
@@ -813,9 +868,19 @@ def game_view(folder_path):
 def game_picker():
     """Game picker page with recursive folder support"""
     logs_dir = LOG_BASE_DIR
-    game_folders = find_all_game_folders(logs_dir)
+    sort_by = request.args.get("sort", "name")  # Default to name
+    sort_order = request.args.get("order", "asc")  # Default to ascending
+
+    game_folders = find_all_game_folders(logs_dir, sort_by=sort_by, sort_order=sort_order)
 
-    return render_template("picker.html", game_folders=game_folders, base_dir=str(logs_dir), is_static=STATIC_MODE)
+    return render_template(
+        "picker.html",
+        game_folders=game_folders,
+        base_dir=str(logs_dir),
+        is_static=STATIC_MODE,
+        current_sort=sort_by,
+        current_order=sort_order,
+    )
 
 
 @app.route("/delete-experiment", methods=["POST"])

codeclash/viewer/static/css/picker.css

@@ -195,15 +195,15 @@
   padding: 1rem;
   border-bottom: 1px solid var(--border-color);
   display: grid;
-  grid-template-columns: 60px 2.5fr 2fr 100px 3fr 180px;
+  grid-template-columns: 60px 2.5fr 100px 2.5fr 100px 3fr 180px;
   gap: 1rem;
   font-weight: 600;
   color: var(--text-primary);
 }
 
 .game-row {
   display: grid;
-  grid-template-columns: 60px 2.5fr 2fr 100px 3fr 180px;
+  grid-template-columns: 60px 2.5fr 100px 2.5fr 100px 3fr 180px;
   gap: 1rem;
   padding: 0.75rem 1rem;
   border-bottom: 1px solid var(--border-color);
@@ -496,6 +496,65 @@
   font-style: italic;
 }
 
+.time-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+}
+
+.time-text {
+  background-color: var(--bg-tertiary);
+  color: var(--text-primary);
+  padding: 0.2rem 0.4rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  font-family: monospace;
+  min-width: 3.5rem;
+  text-align: center;
+  border: 1px solid var(--border-color);
+}
+
+.time-unknown {
+  color: var(--text-muted);
+  font-size: 0.8rem;
+  font-style: italic;
+}
+
+.sortable-header {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: all 0.2s ease;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  user-select: none;
+}
+
+.sortable-header:hover {
+  background-color: var(--bg-primary);
+  color: var(--accent-color);
+}
+
+.sortable-header i {
+  font-size: 0.8rem;
+  opacity: 0.7;
+}
+
+.sortable-header:hover i {
+  opacity: 1;
+}
+
+.sort-inactive {
+  opacity: 0.4;
+}
+
+.sortable-header:hover .sort-inactive {
+  opacity: 0.7;
+}
+
 /* Clickable filter styles */
 .clickable-filter {
   cursor: pointer;
@@ -750,6 +809,7 @@
 
   .readme-cell,
   .models-cell,
+  .time-cell,
   .action-cell {
     display: none; /* Hide on mobile to save space */
   }

codeclash/viewer/static/js/picker.js

@@ -1031,3 +1031,23 @@ function handleModelTagClick(event, modelName) {
   event.stopPropagation();
   setModelFilter(modelName);
 }
+
+function sortBy(column) {
+  const urlParams = new URLSearchParams(window.location.search);
+  const currentSort = urlParams.get("sort") || "name";
+  const currentOrder = urlParams.get("order") || "asc";
+
+  let newOrder = "asc";
+
+  // If clicking the same column, toggle the order
+  if (currentSort === column) {
+    newOrder = currentOrder === "asc" ? "desc" : "asc";
+  }
+
+  // Update URL parameters
+  urlParams.set("sort", column);
+  urlParams.set("order", newOrder);
+
+  // Navigate to the new URL
+  window.location.search = urlParams.toString();
+}

codeclash/viewer/templates/picker.html

@@ -61,7 +61,30 @@
         </div>
         <div class="table-header">
             <div><i class="bi bi-check-square"></i></div>
-            <div>Name</div>
+            <div class="sortable-header" onclick="sortBy('name')">
+                Name
+                {% if current_sort == 'name' %}
+                    {% if current_order == 'asc' %}
+                        <i class="bi bi-arrow-up"></i>
+                    {% else %}
+                        <i class="bi bi-arrow-down"></i>
+                    {% endif %}
+                {% else %}
+                    <i class="bi bi-arrow-up-down sort-inactive"></i>
+                {% endif %}
+            </div>
+            <div class="sortable-header" onclick="sortBy('time')">
+                <i class="bi bi-clock"></i> Time
+                {% if current_sort == 'time' %}
+                    {% if current_order == 'asc' %}
+                        <i class="bi bi-arrow-up"></i>
+                    {% else %}
+                        <i class="bi bi-arrow-down"></i>
+                    {% endif %}
+                {% else %}
+                    <i class="bi bi-arrow-up-down sort-inactive"></i>
+                {% endif %}
+            </div>
             <select id="game-filter" onchange="applyFilters()" class="header-filter-only">
                 <option value="">All Games</option>
             </select>
@@ -98,6 +121,14 @@
                     <span class="game-name">{{ folder_name }}</span>
                 </div>
 
+                <div class="time-cell">
+                    {% if game.is_game and game.creation_time %}
+                        <span class="time-text">{{ game.creation_time }}</span>
+                    {% else %}
+                        <span class="time-unknown">-</span>
+                    {% endif %}
+                </div>
+
                 <div class="game-name-cell">
                     {% if game.is_game and game.game_name %}
                     <span class="game-name-text clickable-filter" onclick="handleGameNameClick(event, '{{ game.game_name }}')" title="Click to filter by this game">{{ game.game_name }}</span>