blob: 564618ae7c3dce822830c71adabd1dbe5873123c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Reasoning Framework</title>
<!-- CSS Modules -->
<link rel="stylesheet" href="/static/css/base.css">
<link rel="stylesheet" href="/static/css/layout.css">
<link rel="stylesheet" href="/static/css/components.css">
<link rel="stylesheet" href="/static/css/terminal.css">
<link rel="stylesheet" href="/static/css/results.css">
<!-- Google Fonts - Inter -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="dashboard-root">
<!-- Sidebar: Configuration -->
<aside class="sidebar">
<div class="logo-area">
<h1>AI Agent Framework</h1>
</div>
<nav class="config-panel">
<div class="form-group">
<label class="form-label">Scenario</label>
<select id="scenario-select" class="input-field">
<option value="">Loading...</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Model</label>
<select id="model-select" class="input-field">
<option value="">Loading...</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Oversight</label>
<select id="oversight-select" class="input-field">
<option value="low">Low</option>
<option value="mid">Mid</option>
<option value="high">High</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Run Count</label>
<input type="number" id="runs-input" class="input-field" value="1" min="1" max="100">
</div>
<div class="sidebar-actions" style="margin-top: auto; display: flex; flex-direction: column; gap: var(--space-sm);">
<button id="run-btn" class="btn btn-primary">Run Experiment</button>
<button id="cancel-btn" class="btn btn-danger" disabled>Stop Run</button>
</div>
</nav>
<div class="status-footer">
<div class="form-label">System Status</div>
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 4px;">
<span id="status-badge" class="badge badge-idle">Idle</span>
<span id="status-time" style="font-size: 0.7rem; color: var(--color-text-muted);"></span>
</div>
</div>
</aside>
<!-- Main Viewport: Results & Analytics -->
<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="csv">Raw Data</button>
<button class="tab-trigger" data-tab="images">Visuals</button>
<button class="tab-trigger" data-tab="judge">Judge Reports</button>
</div>
</header>
<div class="viewport-content">
<div id="tab-csv" class="tab-panel active">
<div class="results-controls">
<label class="form-label">Select CSV:</label>
<select id="csv-file-select" class="input-field" style="max-width: 400px; display: inline-block; margin-left: var(--space-sm);">
<option value="">Loading...</option>
</select>
</div>
<div id="csv-results" class="results-container">
<div class="empty-state">No active data.</div>
</div>
</div>
<div id="tab-images" class="tab-panel">
<div class="results-controls">
<label class="form-label">Data Source:</label>
<select id="chart-file-select" class="input-field" style="max-width: 400px; display: inline-block; margin-left: var(--space-sm);">
<option value="">Loading...</option>
</select>
</div>
<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-lg) var(--space-lg) var(--space-sm); font-size: 0.8rem; text-transform: uppercase; color: var(--color-text-muted);">Saved Visualizations</h3>
<div id="image-results" class="image-grid">
<div class="empty-state" style="grid-column: 1 / -1;">No visualizations generated.</div>
</div>
</div>
<div id="tab-judge" class="tab-panel">
<div class="results-controls">
<label class="form-label">Select Report:</label>
<select id="judge-file-select" class="input-field" style="max-width: 400px; display: inline-block; margin-left: var(--space-sm);">
<option value="">Loading...</option>
</select>
</div>
<div id="judge-results" class="results-container">
<div class="empty-state">No judge reports.</div>
</div>
</div>
</div>
</main>
<!-- Terminal Dock: Live Feedback -->
<section class="terminal-dock">
<div class="terminal-header">
<span class="terminal-title">Event Log</span>
<div class="terminal-actions">
<button id="clear-logs-btn" class="btn-terminal">Clear</button>
<button id="scroll-lock-btn" class="btn-terminal active">Auto-Scroll</button>
</div>
</div>
<div id="logs-container" class="terminal-body">
<div class="terminal-line muted">System ready. Waiting for run...</div>
</div>
</section>
</div>
<!-- Main Entry Point -->
<script type="module" src="/static/js/main.js"></script>
</body>
</html>
|
