1 files changed, 111 insertions, 0 deletions
diff --git a/api/static/index.html b/api/static/index.html
new file mode 100644
index 0000000..cdf8d2f
--- /dev/null
+++ b/api/static/index.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Agent Reasoning Experiment Framework</title>
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🤖 AI Agent Reasoning Experiment Framework</h1>
+            <p class="subtitle">Run experiments, analyze deception, and visualize results</p>
+        </header>
+
+        <main>
+            <!-- Configuration Section -->
+            <section class="card" id="config-section">
+                <h2>⚙️ Configuration</h2>
+                <div class="config-grid">
+                    <div class="config-item">
+                        <label for="scenario-select">Scenario</label>
+                        <select id="scenario-select">
+                            <option value="">Loading...</option>
+                        </select>
+                    </div>
+                    <div class="config-item">
+                        <label for="model-select">Model</label>
+                        <select id="model-select">
+                            <option value="">Loading...</option>
+                        </select>
+                    </div>
+                    <div class="config-item">
+                        <label for="oversight-select">Oversight Level</label>
+                        <select id="oversight-select">
+                            <option value="low">Low</option>
+                            <option value="mid">Mid</option>
+                            <option value="high">High</option>
+                        </select>
+                    </div>
+                    <div class="config-item">
+                        <label for="runs-input">Runs</label>
+                        <input type="number" id="runs-input" value="1" min="1" max="100">
+                    </div>
+                </div>
+                <div class="config-actions">
+                    <button id="run-btn" class="btn btn-primary">
+                        <span class="btn-text">▶ Run Experiment</span>
+                        <span class="btn-spinner hidden">⏳ Running...</span>
+                    </button>
+                    <button id="cancel-btn" class="btn btn-danger" disabled>⏹ Cancel</button>
+                </div>
+            </section>
+
+            <!-- Status Section -->
+            <section class="card" id="status-section">
+                <h2>📊 Status</h2>
+                <div class="status-indicator">
+                    <span id="status-badge" class="badge badge-idle">Idle</span>
+                    <span id="status-time"></span>
+                </div>
+            </section>
+
+            <!-- Logs Section -->
+            <section class="card" id="logs-section">
+                <h2>📜 Live Logs</h2>
+                <div class="logs-container" id="logs-container">
+                    <div class="logs-empty">Run an experiment to see logs...</div>
+                </div>
+                <div class="logs-actions">
+                    <button id="clear-logs-btn" class="btn btn-secondary">Clear Logs</button>
+                </div>
+            </section>
+
+            <!-- Results Section -->
+            <section class="card" id="results-section">
+                <h2>📈 Results</h2>
+                <div class="tabs">
+                    <button class="tab-btn active" data-tab="csv">CSV Data</button>
+                    <button class="tab-btn" data-tab="images">Visualizations</button>
+                    <button class="tab-btn" data-tab="judge">Judge Results</button>
+                </div>
+                
+                <div class="tab-content active" id="tab-csv">
+                    <div id="csv-results">
+                        <div class="empty-state">No results yet. Run an experiment first.</div>
+                    </div>
+                </div>
+                
+                <div class="tab-content" id="tab-images">
+                    <div id="image-results" class="image-grid">
+                        <div class="empty-state">No visualizations yet. Run an experiment first.</div>
+                    </div>
+                </div>
+                
+                <div class="tab-content" id="tab-judge">
+                    <div id="judge-results">
+                        <div class="empty-state">No judge results yet.</div>
+                    </div>
+                </div>
+            </section>
+        </main>
+
+        <footer>
+            <p>AI Agent Reasoning Experiment Framework • Dissertation Project</p>
+        </footer>
+    </div>
+
+    <script src="/static/app.js"></script>
+</body>
+</html>