Feat(viewer): Show overview table on top

Author: klieret

codeclash/viewer/app.py

@@ -16,6 +16,15 @@
 LOG_BASE_DIR = Path.cwd() / "logs"
 
 
+@dataclass
+class AgentInfo:
+    """Information about a single agent"""
+
+    name: str
+    model_name: str | None = None
+    agent_class: str | None = None
+
+
 def set_log_base_directory(directory: str | Path):
     """Set the logs directory directly"""
     global LOG_BASE_DIR
@@ -73,6 +82,33 @@ def get_models_from_metadata(log_dir: Path) -> list[str]:
         return []
 
 
+def get_agent_info_from_metadata(metadata: dict[str, Any]) -> list[AgentInfo]:
+    """Extract detailed agent information from metadata"""
+    agents = []
+    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 i, player_config in enumerate(players_config):
+            if isinstance(player_config, dict):
+                name = f"p{i + 1}"  # Default naming p1, p2, etc.
+                config = player_config.get("config", {})
+                model_name = config.get("model", {}).get("model_name")
+                agent_class = config.get("agent_class")
+                agents.append(AgentInfo(name=name, model_name=model_name, agent_class=agent_class))
+    elif isinstance(players_config, dict):
+        # If players is a dict, iterate through player keys (p1, p2, etc.)
+        for player_key, player_config in sorted(players_config.items()):
+            if isinstance(player_config, dict):
+                config = player_config.get("config", {})
+                model_name = config.get("model", {}).get("model_name")
+                agent_class = config.get("agent_class")
+                agents.append(AgentInfo(name=player_key, model_name=model_name, agent_class=agent_class))
+
+    return agents
+
+
 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 = []
@@ -152,6 +188,40 @@ class GameMetadata:
     main_log_path: str
     metadata_file_path: str
     rounds: list[dict[str, Any]]
+    agent_info: list[AgentInfo] | None = None
+
+
+def process_round_results(round_results: dict[str, Any] | None) -> dict[str, Any] | None:
+    """Process round results to add computed fields and sort scores"""
+    if not round_results or not round_results.get("scores"):
+        return round_results
+
+    # Create a copy to avoid modifying original data
+    processed = round_results.copy()
+
+    # Sort scores alphabetically by key
+    scores = dict(sorted(round_results["scores"].items()))
+    processed["scores"] = scores
+    processed["sorted_scores"] = list(scores.items())
+
+    # Calculate winner percentage
+    winner = round_results.get("winner")
+    if winner and scores:
+        total_games = sum(scores.values())
+        if total_games > 0:
+            if winner != "Tie":
+                winner_wins = scores.get(winner, 0)
+                ties = scores.get("Tie", 0)
+                win_percentage = round(((winner_wins + 0.5 * ties) / total_games) * 100, 1)
+                processed["winner_percentage"] = win_percentage
+            else:
+                processed["winner_percentage"] = None  # No percentage for ties
+        else:
+            processed["winner_percentage"] = None
+    else:
+        processed["winner_percentage"] = None
+
+    return processed
 
 
 @dataclass
@@ -225,15 +295,20 @@ def parse_game_metadata(self) -> GameMetadata:
                 round_results = None
                 if results_file.exists():
                     round_results = json.loads(results_file.read_text())
+                    round_results = process_round_results(round_results)
 
                 rounds.append({"round_num": round_num, "sim_logs": sim_logs, "results": round_results})
 
+        # Extract agent information
+        agent_info = get_agent_info_from_metadata(results) if results else []
+
         return GameMetadata(
             results=results,
             main_log=main_log,
             main_log_path=main_log_path,
             metadata_file_path=metadata_file_path,
             rounds=rounds,
+            agent_info=agent_info,
         )
 
     def parse_trajectory(self, player_id: int, round_num: int) -> TrajectoryInfo | None:

codeclash/viewer/static/css/style.css

@@ -176,19 +176,154 @@ body {
 }
 
 /* Sections */
-.results-section,
+.setup-section,
+.overview-section,
 .rounds-section {
   margin-bottom: 3rem;
 }
 
-.results-section h2,
+.setup-section h2,
+.overview-section h2,
 .rounds-section h2 {
   color: var(--accent-color);
   font-size: 1.5rem;
   margin-bottom: 1.5rem;
   font-weight: 600;
 }
 
+/* Agent Information */
+.agent-info {
+  margin-bottom: 2rem;
+}
+
+.agent-info h3 {
+  color: var(--text-primary);
+  font-size: 1.25rem;
+  margin-bottom: 1rem;
+  font-weight: 600;
+}
+
+.agents-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.agent-card {
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  transition: all 0.2s ease;
+}
+
+.agent-card:hover {
+  box-shadow: var(--shadow);
+  transform: translateY(-2px);
+}
+
+.agent-name {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--accent-color);
+  margin-bottom: 0.5rem;
+}
+
+.agent-model,
+.agent-class {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.25rem;
+}
+
+.agent-model {
+  font-weight: 500;
+}
+
+/* Overview Table */
+.overview-summary {
+  margin-bottom: 2rem;
+}
+
+.results-table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: var(--bg-secondary);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadow);
+}
+
+.results-table th,
+.results-table td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.results-table th {
+  background-color: var(--bg-tertiary);
+  font-weight: 600;
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.results-table tr:last-child td {
+  border-bottom: none;
+}
+
+.results-table tr:hover {
+  background-color: var(--bg-primary);
+}
+
+.winner-badge {
+  display: inline-block;
+  background-color: var(--success-color);
+  color: white;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.winner-percentage {
+  display: inline-block;
+  margin-left: 0.5rem;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.score-breakdown {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.score-item {
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.8rem;
+  color: var(--text-primary);
+}
+
+.steps-count {
+  font-weight: 500;
+  color: var(--accent-color);
+}
+
+.no-result {
+  color: var(--text-muted);
+  font-style: italic;
+}
+
 /* Metadata display */
 .metadata-display {
   background-color: var(--code-bg);
@@ -585,6 +720,24 @@ details summary {
   .main-content {
     padding: 1rem 0.5rem;
   }
+
+  .agents-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .results-table {
+    font-size: 0.8rem;
+  }
+
+  .results-table th,
+  .results-table td {
+    padding: 0.5rem;
+  }
+
+  .score-breakdown {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
 }
 
 /* Smooth transitions */