Enh(viewer): Better styling for results table winner col

Author: klieret

.cursor/rules/viewer.mdc

@@ -19,6 +19,17 @@ two AI agent in a round-based game against each other.
 * Organize JavaScript into logical modules: clipboard.js, experiment.js, readme.js, json-editors.js, etc.
 * The application consists of two main pages: the viewer and the game picker
 
+### Design System & Styling
+
+* **Consistent Section Formatting**: All main sections (Overview, Analysis, Rounds) use the same styling with consistent margins, headers, and layout
+* **Color System**:
+  - Success states: Bright neon green (`#00ff88`) for submitted/successful statuses. This is also the accent color.
+  - Error/Warning states: Bright neon pink-red (`#ff1188`) for failed/error statuses
+  - Both colors maintain similar brightness and vibrancy for visual consistency
+* **Status Indicators**: Exit statuses are consistently colored across all views (overview table, detailed trajectories)
+* **Section Headers**: All sections use h2 headers with icons and consistent styling (font-size: 1.5rem, accent color)
+* **Responsive Layout**: Flexbox layouts that adapt from column (mobile) to row (desktop) as space allows
+
 ### Template Organization
 
 * **Main templates**: `index.html`, `picker.html`, `no_logs.html` are in the templates root
@@ -34,6 +45,7 @@ two AI agent in a round-based game against each other.
 * `includes/readme.html` - Editable readme section
 * `includes/setup.html` - Agent info, metadata, and tournament log foldouts
 * `includes/overview.html` - Results summary table with round navigation
+* `includes/analysis.html` - Analysis section with line counting charts and data visualization
 * `includes/trajectory.html` - Player trajectory display with messages, diffs, and files
 * `includes/rounds.html` - Main rounds section that includes trajectories and simulation logs
 
@@ -260,8 +272,9 @@ The application has two main pages:
 
 * **Floating Table of Contents**: A floating navigation panel that provides quick navigation (always visible by default)
   - **Go to Top button**: Smooth scroll to the top of the page
-  - **Round Navigation**: Quick links to jump to specific round sections
-  - **Section Navigation**: Quick links to Overview and Rounds sections
+  - **Flat Navigation Structure**: Simple, flat navigation without nested sections
+  - **Section Navigation**: Direct links to Overview, Analysis, and individual Round sections
+  - **Round Navigation**: Direct links to each round (Round 0, Round 1, etc.) without grouping
   - **Close Button**: × button in the header to hide the navigation panel
   - **Keyboard Toggle**: `t` key to show/hide the navigation panel
   - **Positioning**: Fixed position in bottom-right corner
@@ -351,7 +364,12 @@ The application has two main pages:
 * At the top, we show the content of `metadata.json`
 * There's a foldout that displays main.log (hidden by default)
 * **Overview table**: Shows results summary with round navigation
-  - **Header formatting**: Column headers should show player names directly followed by "Steps" (e.g., "sonnet-4-more-prescriptive Steps"), not "Player sonnet-4-more-prescriptive Steps"
+  - **Header formatting**: Column headers show just the model/player names (e.g., "sonnet-4-more-prescriptive"), not including "Steps"
+  - **Cell format**: Each player cell shows `<steps>/$<price> <exit_status>` with emphasis on performance metrics
+    - Steps/price is prominent (larger, bold text)
+    - Exit status is smaller and secondary
+    - Uses responsive flexbox layout (side-by-side on desktop, stacked on mobile)
+  - **Status coloring**: Exit statuses use consistent color scheme (green for "Submitted", neon red for errors)
   - **Navigation buttons**: Each row includes a button to jump to the specific round details
 * **All Logs section**: Shows all available log files with individual foldouts and scroll containers
   - **tournament.log**: Tournament-level logging
@@ -361,6 +379,15 @@ The application has two main pages:
   - Each log foldout includes a "Copy path" button and has its own scroll container with max-height of 500px for large logs
   - Logs are displayed in a dedicated section with proper styling and scrollbars
 
+#### Analysis Section
+
+* **Line Counting Analysis**: Interactive charts showing code evolution over time
+  - File selector dropdown to choose which file to analyze
+  - Chart.js-powered line charts showing changes across rounds
+  - Data visualization for understanding code development patterns
+* **Consistent Styling**: Uses same section formatting as Overview and Rounds sections
+* **Foldout Structure**: Analysis content is contained in collapsible foldouts for space efficiency
+
 #### Rounds
 
 First, show a foldout of `round_1.log`.
@@ -390,6 +417,8 @@ This is implemented as its own jinja template (`includes/trajectory.html`) that
 The trajectory template displays:
 
 * **Trajectory Stats**: API calls, cost, and exit status from the `info` section
+  - **Exit Status Styling**: Non-"Submitted" statuses appear in bright neon red for immediate error identification
+  - **Consistent Coloring**: Uses same color scheme as overview table and other status indicators
 * **Messages Foldout**: All trajectory messages with role badges and content preview/expand functionality
 * **Diff Foldouts**: Full diff and incremental diff sections (if available)
 * **Modified Files**: Changed files during the trajectory (if available)

codeclash/viewer/static/css/style.css

@@ -24,6 +24,7 @@
   --success-color: var(--bs-success);
   --warning-color: var(--bs-warning);
   --danger-color: var(--bs-danger);
+  --neon-red: #ff1188;
   --code-bg: #0a0a0a;
   --shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.8);
   --shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.9);
@@ -290,7 +291,8 @@ body {
   font-weight: 500;
 }
 
-.score-breakdown {
+.score-breakdown,
+.winner-breakdown {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
@@ -310,6 +312,39 @@ body {
   color: var(--accent-color);
 }
 
+.cost-steps {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  font-weight: 400;
+}
+
+.steps-price {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.exit-status-small {
+  font-size: 0.75rem;
+  font-weight: 400;
+}
+
+.overview-cell-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  align-items: flex-start;
+}
+
+@media (min-width: 768px) {
+  .overview-cell-content {
+    flex-direction: row;
+    gap: 0.5rem;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+}
+
 .no-result {
   color: var(--text-muted);
   font-style: italic;
@@ -586,12 +621,19 @@ details summary {
   color: var(--success-color);
 }
 
+/* All non-submitted statuses should be neon red */
+.stat-value[class*="status-"]:not(.status-submitted),
+.exit-status-small[class*="status-"]:not(.status-submitted) {
+  color: var(--neon-red) !important;
+  font-weight: 600;
+}
+
 .status-failed {
-  color: var(--danger-color);
+  color: var(--neon-red);
 }
 
 .status-timeout {
-  color: var(--warning-color);
+  color: var(--neon-red);
 }
 
 /* Messages */
@@ -779,7 +821,8 @@ details summary {
     padding: 0.5rem;
   }
 
-  .score-breakdown {
+  .score-breakdown,
+  .winner-breakdown {
     flex-direction: column;
     gap: 0.25rem;
   }
@@ -1213,7 +1256,7 @@ summary:focus {
 }
 
 .readme-status.error {
-  color: var(--danger-color);
+  color: var(--neon-red);
 }
 
 .copy-path-btn-small {

codeclash/viewer/templates/includes/overview.html

@@ -10,7 +10,7 @@ <h2><i class="bi bi-bar-chart"></i> Overview</h2>
                     <th>Winner</th>
                     <th>Results</th>
                     {% for trajectory in trajectories_by_round.get(1, []) %}
-                        <th>{{ trajectory.player_id }} Steps</th>
+                        <th>{{ trajectory.player_id }}</th>
                     {% endfor %}
                     <th>Actions</th>
                 </tr>
@@ -21,13 +21,15 @@ <h2><i class="bi bi-bar-chart"></i> Overview</h2>
                         <td>{{ round_data.round_num }}</td>
                         <td>
                             {% if round_data.results and round_data.results.winner %}
-                                <span class="winner-badge">{{ round_data.results.winner }}</span>
-                                {% if round_data.results.winner_percentage %}
-                                    <span class="winner-percentage">({{ round_data.results.winner_percentage }}%)</span>
-                                {% endif %}
-                                {% if round_data.results.p_value is not none %}
-                                    <span class="p-value">(p={{ "%.2f"|format(round_data.results.p_value) }})</span>
-                                {% endif %}
+                                <div class="winner-breakdown">
+                                    <span class="winner-badge">{{ round_data.results.winner }}</span>
+                                    {% if round_data.results.winner_percentage %}
+                                        <span class="score-item">{{ round_data.results.winner_percentage }}%</span>
+                                    {% endif %}
+                                    {% if round_data.results.p_value is not none %}
+                                        <span class="score-item">p={{ "%.2f"|format(round_data.results.p_value) }}</span>
+                                    {% endif %}
+                                </div>
                             {% else %}
                                 <span class="no-result">-</span>
                             {% endif %}
@@ -46,7 +48,14 @@ <h2><i class="bi bi-bar-chart"></i> Overview</h2>
                         {% if trajectories_by_round.get(round_data.round_num) %}
                             {% for trajectory in trajectories_by_round[round_data.round_num] %}
                                 <td>
-                                    <span class="steps-count">{{ trajectory.api_calls }}</span>
+                                    <div class="overview-cell-content">
+                                        <span class="steps-price">{{ trajectory.api_calls }}/${{ "%.2f"|format(trajectory.cost) }}</span>
+                                        {% if trajectory.exit_status %}
+                                            <span class="exit-status-small status-{{ trajectory.exit_status.lower() }}">{{ trajectory.exit_status }}</span>
+                                        {% else %}
+                                            <span class="no-result">-</span>
+                                        {% endif %}
+                                    </div>
                                 </td>
                             {% endfor %}
                         {% else %}