From a72e0d6e93e6ea8d44b4ca86d51903bfbf4e21d5 Mon Sep 17 00:00:00 2001
From: CaptainJack2491 <jayrupnakawala@gmail.com>
Date: Thu, 2 Apr 2026 20:44:07 +0100
Subject: feat(dashboard): add interactive charts and layout optimizations

- Separated Static Visualizations into dedicated tab with fullscreen image modal
- Added new interactive charts: Glassbox Category by Scenario, Intent vs Reality, and Radar Chart
- Replaced average token tracking with global token aggregations
- Implemented Grouped-Stacked Bar Chart for visual comparison of Action alongside Sophistication by oversight tier
- Added standardized color palettes to improve chart legibility
---
 api/static/index.html | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

(limited to 'api/static/index.html')

diff --git a/api/static/index.html b/api/static/index.html
index c22de49..cbe65a2 100644
--- a/api/static/index.html
+++ b/api/static/index.html
@@ -82,7 +82,8 @@
         <main class="main-viewport">
             <header class="app-header">
                 <div class="tab-nav" style="border-bottom: none; background: none; padding: 0;">
-                    <button class="tab-trigger active" data-tab="images">Visual Analytics</button>
+                    <button class="tab-trigger active" data-tab="images">Interactive Charts</button>
+                    <button class="tab-trigger" data-tab="static">Static Visualizations</button>
                     <button class="tab-trigger" data-tab="csv">Raw Dataset</button>
                     <button class="tab-trigger" data-tab="judge">Judge Reports</button>
                 </div>
@@ -98,9 +99,13 @@
                     <div id="interactive-charts" class="image-grid" style="margin-top: var(--space-md);">
                         <div class="empty-state" style="grid-column: 1 / -1;">Select a CSV to generate visuals.</div>
                     </div>
-                    
-                    <h3 style="margin: var(--space-xl) var(--space-lg) var(--space-sm); font-size: 0.8rem; text-transform: uppercase; color: var(--color-text-muted); border-bottom: 1px solid var(--color-bg-3); padding-bottom: 8px;">Static Visualizations (viz/)</h3>
-                    <div id="image-results" class="image-grid">
+                </div>
+
+                <div id="tab-static" class="tab-panel">
+                    <div class="results-controls">
+                        <h2 style="font-size: 1.1rem; color: var(--color-text-primary); margin: 0;">Static Visualizations (viz/)</h2>
+                    </div>
+                    <div id="image-results" class="image-grid" style="margin-top: var(--space-md);">
                         <div class="empty-state" style="grid-column: 1 / -1;">No visualizations generated.</div>
                     </div>
                 </div>
-- 
cgit v1.2.3