feat: add mac-style window and tabbed navigation

static/index.html

@@ -21,89 +21,129 @@
             <p>Interactive baseline evaluation for AI Agents.</p>
         </header>
 
-        <div class="dashboard">
-            <!-- Left Column: Environment Observation -->
-            <section class="panel observation-panel" id="observation-section">
-                <div class="panel-header">
-                    <h2>Environment State</h2>
-                    <div class="badge-row">
-                        <span id="badge-difficulty" class="badge">Loading...</span>
-                        <span id="badge-step" class="badge">Step 0/0</span>
-                    </div>
+        <div class="mac-window">
+            <div class="mac-title-bar">
+                <div class="mac-dots">
+                    <span class="dot red"></span>
+                    <span class="dot yellow"></span>
+                    <span class="dot green"></span>
                 </div>
-
-                <div class="task-info">
-                    <strong>Task:</strong> <span id="task-description">Initializing environment...</span>
+                <div class="mac-tabs">
+                    <button class="mac-tab active" data-tab="playground">Playground</button>
+                    <button class="mac-tab" data-tab="details">Model Details</button>
+                    <button class="mac-tab" data-tab="specs">API Specs</button>
                 </div>
+            </div>
 
-                <div id="feedback-container" class="feedback-info hidden">
-                    <strong>Previous Feedback:</strong> <span id="previous-feedback"></span>
-                </div>
+            <div class="window-content">
+                <div id="tab-playground" class="tab-pane active">
+                    <div class="dashboard">
+                        <!-- Left Column: Environment Observation -->
+                        <section class="panel observation-panel" id="observation-section">
+                            <div class="panel-header">
+                                <h2>Environment State</h2>
+                                <div class="badge-row">
+                                    <span id="badge-difficulty" class="badge">Loading...</span>
+                                    <span id="badge-step" class="badge">Step 0/0</span>
+                                </div>
+                            </div>
 
-                <div class="code-container">
-                    <div class="code-header">
-                        <span id="lang-badge">Language: Unknown</span>
-                    </div>
-                    <pre><code id="code-snippet" class="language-python"># Awaiting initialization...</code></pre>
-                </div>
-            </section>
+                            <div class="task-info">
+                                <strong>Task:</strong> <span id="task-description">Initializing environment...</span>
+                            </div>
 
-            <!-- Right Column: Agent Action Form -->
-            <section class="panel action-panel" id="action-section">
-                <div class="panel-header">
-                    <h2>Agent Action</h2>
-                </div>
+                            <div id="feedback-container" class="feedback-info hidden">
+                                <strong>Previous Feedback:</strong> <span id="previous-feedback"></span>
+                            </div>
 
-                <form id="action-form">
-                    <div class="form-group toggle-group">
-                        <label for="input-bug-identified">Bug Identified</label>
-                        <select id="input-bug-identified" required>
-                            <option value="true" selected>Yes</option>
-                            <option value="false">No</option>
-                        </select>
-                    </div>
+                            <div class="code-container">
+                                <div class="code-header">
+                                    <span id="lang-badge">Language: Unknown</span>
+                                </div>
+                                <pre><code id="code-snippet" class="language-python"># Awaiting initialization...</code></pre>
+                            </div>
+                        </section>
 
-                    <div class="form-group">
-                        <label for="input-bug-type">Bug Type</label>
-                        <select id="input-bug-type" required>
-                            <option value="off-by-one">Off-by-one</option>
-                            <option value="logic-error">Logic Error</option>
-                            <option value="security-vulnerability">Security Vulnerability</option>
-                            <option value="null-dereference">Null Dereference</option>
-                            <option value="none">None</option>
-                        </select>
-                    </div>
+                        <!-- Right Column: Agent Action Form -->
+                        <section class="panel action-panel" id="action-section">
+                            <div class="panel-header">
+                                <h2>Agent Action</h2>
+                            </div>
 
-                    <div class="form-group">
-                        <label for="input-severity">Severity</label>
-                        <select id="input-severity" required>
-                            <option value="none">None</option>
-                            <option value="low">Low</option>
-                            <option value="medium">Medium</option>
-                            <option value="high">High</option>
-                            <option value="critical">Critical</option>
-                        </select>
-                    </div>
+                            <form id="action-form">
+                                <div class="form-group toggle-group">
+                                    <label for="input-bug-identified">Bug Identified</label>
+                                    <select id="input-bug-identified" required>
+                                        <option value="true" selected>Yes</option>
+                                        <option value="false">No</option>
+                                    </select>
+                                </div>
 
-                    <div class="form-group">
-                        <label for="input-bug-location">Bug Location</label>
-                        <input type="text" id="input-bug-location" placeholder="e.g., fetch_records() line 4" required>
-                    </div>
+                                <div class="form-group">
+                                    <label for="input-bug-type">Bug Type</label>
+                                    <select id="input-bug-type" required>
+                                        <option value="off-by-one">Off-by-one</option>
+                                        <option value="logic-error">Logic Error</option>
+                                        <option value="security-vulnerability">Security Vulnerability</option>
+                                        <option value="null-dereference">Null Dereference</option>
+                                        <option value="none">None</option>
+                                    </select>
+                                </div>
+
+                                <div class="form-group">
+                                    <label for="input-severity">Severity</label>
+                                    <select id="input-severity" required>
+                                        <option value="none">None</option>
+                                        <option value="low">Low</option>
+                                        <option value="medium">Medium</option>
+                                        <option value="high">High</option>
+                                        <option value="critical">Critical</option>
+                                    </select>
+                                </div>
+
+                                <div class="form-group">
+                                    <label for="input-bug-location">Bug Location</label>
+                                    <input type="text" id="input-bug-location" placeholder="e.g., fetch_records() line 4" required>
+                                </div>
+
+                                <div class="form-group">
+                                    <label for="input-bug-description">Description</label>
+                                    <textarea id="input-bug-description" rows="3" placeholder="Explain the vulnerability..." required></textarea>
+                                </div>
+
+                                <div class="form-group">
+                                    <label for="input-suggested-fix">Suggested Fix</label>
+                                    <textarea id="input-suggested-fix" rows="3" placeholder="Provide corrected code or explanation..." required></textarea>
+                                </div>
 
-                    <div class="form-group">
-                        <label for="input-bug-description">Description</label>
-                        <textarea id="input-bug-description" rows="3" placeholder="Explain the vulnerability..." required></textarea>
+                                <button type="submit" id="btn-submit-action" class="primary-btn">Submit Action</button>
+                                <button type="button" id="btn-reset-env" class="secondary-btn">Reset Environment</button>
+                            </form>
+                        </section>
                     </div>
+                </div>
 
-                    <div class="form-group">
-                        <label for="input-suggested-fix">Suggested Fix</label>
-                        <textarea id="input-suggested-fix" rows="3" placeholder="Provide corrected code or explanation..." required></textarea>
+                <div id="tab-details" class="tab-pane">
+                    <div class="panel">
+                        <h2>Model Details</h2>
+                        <p style="margin-top: 1rem;">OpenEnv is an RL environment designed for security validation. This baseline uses standard reward signals to calibrate agents.</p>
+                        <ul style="margin-top: 1rem; color: var(--text-muted); list-style-position: inside;">
+                            <li>Deterministic Reward Signals</li>
+                            <li>Multi-step Episode Support</li>
+                            <li>Security-focused Task Sets</li>
+                        </ul>
                     </div>
+                </div>
 
-                    <button type="submit" id="btn-submit-action" class="primary-btn">Submit Action</button>
-                    <button type="button" id="btn-reset-env" class="secondary-btn">Reset Environment</button>
-                </form>
-            </section>
+                <div id="tab-specs" class="tab-pane">
+                    <div class="panel">
+                        <h2>API Specifications</h2>
+                        <pre style="margin-top: 1rem; background: #000; padding: 1rem; border-radius: 4px;">POST /reset?difficulty={easy|medium|hard}
+POST /step {bug_identified, bug_type, ...}
+GET /state</pre>
+                    </div>
+                </div>
+            </div>
         </div>
 
         <!-- Sticky Status Toast -->

static/main.js

@@ -24,11 +24,35 @@ document.addEventListener('DOMContentLoaded', () => {
         inputSeverity: document.getElementById('input-severity'),
         inputBugLocation: document.getElementById('input-bug-location'),
         inputBugDescription: document.getElementById('input-bug-description'),
-        inputSuggestedFix: document.getElementById('input-suggested-fix')
+        inputSuggestedFix: document.getElementById('input-suggested-fix'),
+        
+        // Tab elements
+        tabs: document.querySelectorAll('.mac-tab'),
+        panes: document.querySelectorAll('.tab-pane')
     };
 
     let isDone = false;
 
+    // Tab Switching Logic
+    elements.tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            const target = tab.getAttribute('data-tab');
+            
+            // Update tabs
+            elements.tabs.forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            
+            // Update panes
+            elements.panes.forEach(pane => {
+                if (pane.id === `tab-${target}`) {
+                    pane.classList.add('active');
+                } else {
+                    pane.classList.remove('active');
+                }
+            });
+        });
+    });
+
     // Initialize Environment
     async function resetEnvironment(difficulty = 'easy') {
         elements.submitBtn.disabled = true;

static/style.css

@@ -55,6 +55,98 @@ header {
     border-bottom: 1px solid var(--border-card);
 }
 
+h1 {
+    font-size: 2.25rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    color: var(--text-main);
+    margin-bottom: 0.5rem;
+    text-align: center;
+}
+
+/* Mac Window Styling */
+.mac-window {
+    background: var(--bg-card);
+    border: 1px solid var(--border-card);
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+    margin-top: 1rem;
+}
+
+.mac-title-bar {
+    background: #1a1a1a;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    border-bottom: 1px solid var(--border-card);
+    position: relative;
+}
+
+.mac-dots {
+    display: flex;
+    gap: 8px;
+    position: absolute;
+    left: 16px;
+}
+
+.dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
+.dot.red { background: #ff5f57; }
+.dot.yellow { background: #febc2e; }
+.dot.green { background: #28c840; }
+
+.mac-tabs {
+    display: flex;
+    margin: 0 auto;
+    background: #000;
+    border-radius: 6px;
+    padding: 2px;
+}
+
+.mac-tab {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    padding: 6px 16px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s;
+    width: auto;
+    margin-bottom: 0;
+    text-transform: none;
+    letter-spacing: normal;
+}
+
+.mac-tab:hover {
+    color: var(--text-main);
+}
+
+.mac-tab.active {
+    background: var(--bg-input);
+    color: var(--accent-primary);
+}
+
+.window-content {
+    padding: 2rem;
+    min-height: 500px;
+}
+
+.tab-pane {
+    display: none;
+}
+
+.tab-pane.active {
+    display: block;
+}
+
 h1 {
     font-size: 2.25rem;
     font-weight: 700;
@@ -80,11 +172,11 @@ p {
 }
 
 .panel {
-    background: var(--bg-card);
+    background: #1a1a1b;
     border: 1px solid var(--border-card);
     border-radius: 8px;
     padding: 1.75rem;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
 }
 
 .dashboard {