feat: Draw tear across cost bar for exceeded costs on leaderboard

This commit is contained in:
Paul Gauthier (aider) 2025-04-13 13:37:01 -07:00
parent bec35e0538
commit 27b51d51d8
2 changed files with 21 additions and 5 deletions

View file

@ -215,7 +215,12 @@ document.addEventListener('DOMContentLoaded', function() {
// Mark bars that exceed the limit // Mark bars that exceed the limit
if (cost > MAX_DISPLAY_COST) { if (cost > MAX_DISPLAY_COST) {
bar.classList.add('cost-exceeded'); // Add a tear marker at around $45 (90% of the way)
const tearMarker = document.createElement('div');
tearMarker.className = 'cost-tear-marker';
tearMarker.style.left = '90%'; // Position at 90% (around $45)
bar.parentNode.appendChild(tearMarker);
// Add a marker at the end of the bar // Add a marker at the end of the bar
const marker = document.createElement('div'); const marker = document.createElement('div');
marker.className = 'cost-exceeded-marker'; marker.className = 'cost-exceeded-marker';

View file

@ -181,9 +181,20 @@ human intervention.
text-align: center; text-align: center;
margin-left: -10px; margin-left: -10px;
} }
.cost-exceeded { .cost-tear-marker {
background-color: rgba(220, 53, 69, 0.3) !important; /* Red background for exceeded cost */ position: absolute;
border-right: 1px solid rgba(220, 53, 69, 0.5) !important; left: 90%; /* Position at 90% (around $45) */
top: 0;
height: 100%;
width: 2px;
background: repeating-linear-gradient(
to bottom,
transparent,
transparent 3px,
#888 3px,
#888 6px
);
z-index: 3;
} }
.cost-exceeded-marker { .cost-exceeded-marker {
position: absolute; position: absolute;
@ -194,7 +205,7 @@ human intervention.
height: 0; height: 0;
border-top: 6px solid transparent; border-top: 6px solid transparent;
border-bottom: 6px solid transparent; border-bottom: 6px solid transparent;
border-left: 6px solid rgba(220, 53, 69, 0.8); border-left: 6px solid rgba(0, 0, 0, 0.5);
z-index: 3; z-index: 3;
} }
.bar-viz { .bar-viz {