Enh(viewer): Show models in picker

Author: klieret

codeclash/viewer/app.py

@@ -41,6 +41,38 @@ def get_round_count_from_metadata(log_dir: Path) -> int | None:
         return None
 
 
+def get_models_from_metadata(log_dir: Path) -> list[str]:
+    """Extract model names from metadata.json if it exists"""
+    metadata_file = log_dir / "metadata.json"
+    if not metadata_file.exists():
+        return []
+
+    try:
+        metadata = json.loads(metadata_file.read_text())
+        models = []
+        players_config = metadata.get("config", {}).get("players", [])
+
+        # Handle both list and dict formats
+        if isinstance(players_config, list):
+            # If players is a list, iterate through each player
+            for player_config in players_config:
+                if isinstance(player_config, dict):
+                    model_name = player_config.get("config", {}).get("model", {}).get("model_name")
+                    if model_name and model_name not in models:
+                        models.append(model_name)
+        elif isinstance(players_config, dict):
+            # If players is a dict, iterate through player keys (p1, p2, etc.)
+            for _player_key, player_config in players_config.items():
+                if isinstance(player_config, dict):
+                    model_name = player_config.get("config", {}).get("model", {}).get("model_name")
+                    if model_name and model_name not in models:
+                        models.append(model_name)
+
+        return models
+    except (json.JSONDecodeError, KeyError, AttributeError):
+        return []
+
+
 def find_all_game_folders(base_dir: Path) -> list[dict[str, Any]]:
     """Recursively find all folders and mark which ones contain metadata.json"""
     all_folders = []
@@ -60,12 +92,14 @@ def scan_directory(directory: Path, relative_path: str = ""):
                     # Check if this directory is a game folder
                     if is_game_folder(item):
                         round_count = get_round_count_from_metadata(item)
+                        models = get_models_from_metadata(item)
                         game_folders.add(current_relative)
                         all_folders.append(
                             {
                                 "name": current_relative,
                                 "full_path": str(item),
                                 "round_count": round_count,
+                                "models": models,
                                 "is_game": True,
                                 "depth": depth,
                                 "parent": relative_path if relative_path else None,
@@ -78,6 +112,7 @@ def scan_directory(directory: Path, relative_path: str = ""):
                                 "name": current_relative,
                                 "full_path": str(item),
                                 "round_count": None,
+                                "models": [],
                                 "is_game": False,
                                 "depth": depth,
                                 "parent": relative_path if relative_path else None,

codeclash/viewer/static/css/picker.css

@@ -1,7 +1,7 @@
 /* Game Picker Styles */
 
 .picker-container {
-  max-width: 1000px;
+  max-width: 1400px;
   margin: 2rem auto;
   padding: 0 1rem;
 }
@@ -56,15 +56,15 @@
   padding: 1rem;
   border-bottom: 1px solid var(--border-color);
   display: grid;
-  grid-template-columns: 1fr auto auto;
+  grid-template-columns: 1fr 100px 180px 140px;
   gap: 1rem;
   font-weight: 600;
   color: var(--text-primary);
 }
 
 .game-row {
   display: grid;
-  grid-template-columns: 1fr auto auto;
+  grid-template-columns: 1fr 100px 180px 140px;
   gap: 1rem;
   padding: 0.75rem 1rem;
   border-bottom: 1px solid var(--border-color);
@@ -145,7 +145,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 80px;
+  width: 100px;
 }
 
 .rounds-count {
@@ -165,8 +165,38 @@
   font-style: italic;
 }
 
+.models-cell {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.25rem;
+  width: 180px;
+  flex-wrap: wrap;
+  padding: 0.25rem;
+}
+
+.model-tag {
+  background-color: var(--success-color);
+  color: white;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.75rem;
+  font-size: 0.7rem;
+  font-weight: 500;
+  white-space: nowrap;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 0;
+}
+
+.models-unknown {
+  color: var(--text-muted);
+  font-size: 0.8rem;
+  font-style: italic;
+}
+
 .action-cell {
-  min-width: 120px;
+  width: 140px;
   display: flex;
   justify-content: center;
   gap: 0.5rem;
@@ -236,18 +266,29 @@
 
   .table-header,
   .game-row {
-    grid-template-columns: 1fr auto;
+    grid-template-columns: 1fr 80px 120px;
     gap: 0.5rem;
   }
 
   .rounds-cell {
-    min-width: 60px;
+    width: 80px;
+  }
+
+  .models-cell {
+    width: 120px;
+    justify-content: flex-start;
   }
 
   .action-cell {
     display: none; /* Hide action buttons on mobile, click row instead */
   }
 
+  .model-tag {
+    font-size: 0.6rem;
+    padding: 0.1rem 0.25rem;
+    max-width: 80px;
+  }
+
   .game-name {
     font-size: 0.85rem;
   }

codeclash/viewer/templates/picker.html

@@ -28,11 +28,12 @@ <h3>📁 Base Directory:</h3>
 
         {% if game_folders %}
         <div class="games-table">
-            <div class="table-header">
-                <div>📁 Game Session</div>
-                <div>🎯 Rounds</div>
-                <div>Action</div>
-            </div>
+        <div class="table-header">
+            <div>📁 Game Session</div>
+            <div>🎯 Rounds</div>
+            <div>🤖 Models</div>
+            <div>Action</div>
+        </div>
             {% for game in game_folders %}
             {% set depth = game.name.count('/') %}
             {% set folder_name = game.name.split('/')[-1] %}
@@ -69,6 +70,16 @@ <h3>📁 Base Directory:</h3>
                     {% endif %}
                 </div>
 
+                <div class="models-cell">
+                    {% if game.is_game and game.models %}
+                        {% for model in game.models %}
+                        <span class="model-tag">{{ model }}</span>
+                        {% endfor %}
+                    {% else %}
+                        <span class="models-unknown">-</span>
+                    {% endif %}
+                </div>
+
                 <div class="action-cell">
                     {% if game.is_game %}
                     <button class="open-button" onmousedown="event.stopPropagation(); handleGameClick(event, '{{ game.name }}')">