1 files changed, 62 insertions, 0 deletions
diff --git a/api/static/js/ui.js b/api/static/js/ui.js
new file mode 100644
index 0000000..a2c8b8b
--- /dev/null
+++ b/api/static/js/ui.js
@@ -0,0 +1,62 @@
+/**
+ * ui.js - Global UI Utilities
+ */
+
+export const ui = {
+    get elements() {
+        return {
+            scenarioSelect: document.getElementById('scenario-select'),
+            modelSelect: document.getElementById('model-select'),
+            oversightSelect: document.getElementById('oversight-select'),
+            runsInput: document.getElementById('runs-input'),
+            runBtn: document.getElementById('run-btn'),
+            cancelBtn: document.getElementById('cancel-btn'),
+            statusBadge: document.getElementById('status-badge'),
+            statusTime: document.getElementById('status-time'),
+            logsContainer: document.getElementById('logs-container'),
+            
+            csvResults: document.getElementById('csv-results'),
+            imageResults: document.getElementById('image-results'),
+            judgeResults: document.getElementById('judge-results'),
+            interactiveCharts: document.getElementById('interactive-charts'),
+            
+            csvFileSelect: document.getElementById('csv-file-select'),
+            chartFileSelect: document.getElementById('chart-file-select'),
+            judgeFileSelect: document.getElementById('judge-file-select'),
+            
+            tabTriggers: document.querySelectorAll('.tab-trigger'),
+            tabPanels: document.querySelectorAll('.tab-panel'),
+            clearLogsBtn: document.getElementById('clear-logs-btn'),
+            scrollLockBtn: document.getElementById('scroll-lock-btn')
+        };
+    },
+
+    updateStatus(status, time = null) {
+        const { statusBadge, statusTime } = this.elements;
+        statusBadge.className = `badge badge-${status}`;
+        statusBadge.textContent = status.toUpperCase();
+        
+        if (time) {
+            const date = new Date(time);
+            statusTime.textContent = date.toLocaleTimeString();
+        } else if (status === 'idle') {
+            statusTime.textContent = '';
+        }
+    },
+
+    initTabs(onTabChange) {
+        this.elements.tabTriggers.forEach(trigger => {
+            trigger.addEventListener('click', () => {
+                const tabId = trigger.dataset.tab;
+                
+                this.elements.tabTriggers.forEach(t => t.classList.remove('active'));
+                this.elements.tabPanels.forEach(p => p.classList.remove('active'));
+                
+                trigger.classList.add('active');
+                document.getElementById(`tab-${tabId}`).classList.add('active');
+                
+                if (onTabChange) onTabChange(tabId);
+            });
+        });
+    }
+};