Upload index.html

static/index.html

@@ -686,6 +686,28 @@
 <!-- MAIN CONTENT -->
 <main class="main">
 
+  <!-- ─── UPLOAD SECTION ──────────────────────────────────────────────── -->
+  <div class="help-section" style="background: linear-gradient(135deg, #E3F2FD 0%, #F3E5F5 100%); border-color: #90CAF9; margin-bottom: 16px;" id="upload-section">
+    <div class="help-title" style="color: #1565C0;">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+        <polyline points="17 8 12 3 7 8"/>
+        <line x1="12" y1="3" x2="12" y2="15"/>
+      </svg>
+      Custom Database Upload
+    </div>
+    <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
+      <span style="font-size: 13px; color: var(--text-secondary);">Or use your own database:</span>
+      <input type="file" id="db-file-input" accept=".sqlite,.db,.csv" style="font-size: 13px; padding: 6px; border: 1px solid var(--card-border); border-radius: var(--radius);">
+      <button class="btn btn-primary" onclick="uploadDatabase()" id="upload-btn">
+        <span class="spinner" id="upload-spinner"></span>
+        <span id="upload-btn-text">Upload</span>
+      </button>
+      <span id="upload-status" style="font-size: 12px; color: var(--text-secondary);">No file loaded</span>
+      <button class="btn btn-secondary" onclick="backToTasks()" id="back-to-tasks-btn" style="display: none;">Back to Tasks</button>
+    </div>
+    <div id="upload-error" class="output-error" style="display: none; margin-top: 12px;"></div>
+  </div>
   <!-- HOW TO USE SECTION -->
   <div class="help-section" id="help-section">
     <div class="help-title">
@@ -964,6 +986,13 @@ let state = {
   schemaInfo: null,
 };
 
+// ─── MODE ───────────────────────────────────────────────────────────────
+let mode = 'task'; // 'task' or 'custom'
+let customDbLoaded = false;
+let customDbSchema = [];
+let customDbFilename = '';
+let firstCustomTable = '';
+
 // ─── TASK DEFINITIONS ─────────────────────────────────────────────────
 const TASKS = {
   null_audit: {
@@ -1143,6 +1172,46 @@ async function resetEpisode() {
 
 // ─── QUERY ────────────────────────────────────────────────────────────
 async function runQuery() {
+  if (mode === 'custom') {
+    // Custom DB mode - use /query-custom endpoint
+    const sql = document.getElementById('query-sql').value.trim();
+    if (!sql) { toast('Enter a SQL statement', 'error'); return; }
+    
+    setLoading('query', true);
+    const container = document.getElementById('query-output-container');
+    const output = document.getElementById('query-output');
+    container.style.display = 'block';
+    
+    try {
+      const r = await api('POST', '/query-custom', { sql: sql });
+      
+      if (r.ok) {
+        if (r.data.error) {
+          // SQL error with message
+          output.innerHTML = '<div class="output-error">' + escapeHtml(r.data.error) + 
+            '<div class="error-tip">Tip: ' + escapeHtml(r.data.message || 'Check your query') + '</div></div>';
+        } else if (r.data.rows) {
+          // Success - format as table
+          output.innerHTML = formatArrayAsTable(r.data.rows);
+          if (r.data.row_count > 0) {
+            output.innerHTML = '<div class="result-summary"><strong>' + r.data.row_count + '</strong> rows returned</div>' + output.innerHTML;
+          }
+        } else {
+          output.innerHTML = '<div class="output-body empty">' + escapeHtml(r.data.message || 'No data') + '</div>';
+        }
+      } else {
+        output.innerHTML = '<div class="output-error">Error: ' + escapeHtml(r.data.detail || 'Failed to execute query') + 
+          '<div class="error-tip">Tip: Only SELECT queries are allowed. Check table names in schema panel.</div></div>';
+      }
+    } catch (e) {
+      output.innerHTML = '<div class="output-error">Error: ' + escapeHtml(e.message) + '</div>';
+    }
+    
+    setLoading('query', false);
+    return;
+  }
+  
+  // RL Task mode - use /step endpoint
   if (!state.currentTask) { toast('No active task — initialize first', 'error'); return; }
   const sql = document.getElementById('query-sql').value.trim();
   if (!sql) { toast('Enter a SQL statement', 'error'); return; }
@@ -1199,7 +1268,8 @@ async function runQuery() {
       }
     }
   } else {
-    output.innerHTML = '<div class="output-error">Error: ' + escapeHtml(r.data.detail || 'Unknown error') + '</div>';
+    output.innerHTML = '<div class="output-error">Error: ' + escapeHtml(r.data.detail || 'Unknown error') + 
+      '<div class="error-tip">Tip: Check your SQL syntax and table names.</div></div>';
   }
   setLoading('query', false);
 }
@@ -1282,6 +1352,7 @@ function verifyFix() {
 // ─── SUBMIT ───────────────────────────────────────────────────────────
 async function submitEpisode() {
   if (!state.currentTask) { toast('No active task', 'error'); return; }
+  if (mode === 'custom') { toast('Submit not available in custom DB mode', 'error'); return; }
 
   const task = TASKS[state.currentTask];
   const body = {
@@ -1340,6 +1411,144 @@ async function submitEpisode() {
   setLoading('submit', false);
 }
 
+// ─── CUSTOM DB UPLOAD ─────────────────────────────────────────────────
+async function uploadDatabase() {
+  const fileInput = document.getElementById('db-file-input');
+  const file = fileInput.files[0];
+  
+  if (!file) {
+    toast('Please select a file first', 'error');
+    return;
+  }
+  
+  const validExts = ['.sqlite', '.db', '.csv'];
+  const ext = file.name.slice(file.name.lastIndexOf('.')).toLowerCase();
+  if (!validExts.includes(ext)) {
+    document.getElementById('upload-error').style.display = 'block';
+    document.getElementById('upload-error').innerHTML = 'Invalid file type. Must be .sqlite, .db, or .csv';
+    return;
+  }
+  
+  setLoading('upload', true);
+  document.getElementById('upload-error').style.display = 'none';
+  
+  const formData = new FormData();
+  formData.append('file', file);
+  
+  try {
+    const res = await fetch(BASE + '/upload-db', {
+      method: 'POST',
+      body: formData
+    });
+    
+    const data = await res.json();
+    
+    if (res.ok && data.status === 'ok') {
+      mode = 'custom';
+      customDbLoaded = true;
+      customDbSchema = data.tables;
+      customDbFilename = data.filename;
+      firstCustomTable = data.tables[0]?.table_name || 'table';
+      
+      // Update UI
+      document.getElementById('upload-status').innerHTML = '✓ ' + data.filename + ' loaded (' + data.tables.length + ' tables)';
+      document.getElementById('upload-status').style.color = 'var(--success)';
+      document.getElementById('back-to-tasks-btn').style.display = 'inline-flex';
+      
+      // Update schema panel
+      renderSchema(data.tables);
+      
+      // Clear and set placeholder
+      document.getElementById('query-sql').value = '';
+      document.getElementById('query-sql').placeholder = 'SELECT * FROM ' + firstCustomTable + ' LIMIT 10';
+      
+      // Show custom mode UI
+      updateUIForMode();
+      
+      toast('Database uploaded successfully', 'success');
+    } else {
+      document.getElementById('upload-error').style.display = 'block';
+      document.getElementById('upload-error').innerHTML = escapeHtml(data.detail || 'Upload failed');
+      toast('Upload failed', 'error');
+    }
+  } catch (e) {
+    document.getElementById('upload-error').style.display = 'block';
+    document.getElementById('upload-error').innerHTML = 'Error: ' + escapeHtml(e.message);
+    toast('Upload error', 'error');
+  }
+  
+  setLoading('upload', false);
+}
+
+function backToTasks() {
+  mode = 'task';
+  customDbLoaded = false;
+  customDbSchema = [];
+  document.getElementById('upload-status').textContent = 'No file loaded';
+  document.getElementById('upload-status').style.color = 'var(--text-secondary)';
+  document.getElementById('back-to-tasks-btn').style.display = 'none';
+  document.getElementById('db-file-input').value = '';
+  
+  // Reset UI
+  updateUIForMode();
+  
+  // Reset schema panel if no task selected
+  if (!state.currentTask) {
+    document.getElementById('schema-panel').innerHTML = '<div class="output-body empty">Select a task to view schema</div>';
+  } else {
+    renderSchema(state.schemaInfo);
+  }
+  
+  toast('Back to RL Task mode', 'success');
+}
+
+function updateUIForMode() {
+  const fixTabs = document.getElementById('fix-tabs');
+  const queryPanel = document.getElementById('investigate-panel-query');
+  const profilePanel = document.getElementById('investigate-panel-profile');
+  const taskSelect = document.getElementById('task-select');
+  const resetBtn = document.getElementById('reset-btn');
+  
+  if (mode === 'custom') {
+    // Hide fix/submit tabs
+    if (fixTabs) fixTabs.style.display = 'none';
+    // Hide profile tab
+    if (profilePanel) {
+      const profileTab = document.querySelector('.tab[onclick*="profile"]');
+      if (profileTab) profileTab.style.display = 'none';
+    }
+    // Disable task selector
+    taskSelect.disabled = true;
+    resetBtn.disabled = true;
+    
+    // Add custom mode indicator
+    let indicator = document.getElementById('custom-mode-indicator');
+    if (!indicator) {
+      indicator = document.createElement('div');
+      indicator.id = 'custom-mode-indicator';
+      indicator.className = 'help-section';
+      indicator.style.cssText = 'background: #E3F2FD; border-color: #90CAF9; margin-top: 16px;';
+      indicator.innerHTML = '<div style="font-size: 13px; color: #1565C0;"><strong>Custom DB Mode</strong> — No scoring available. Use SELECT queries to explore your data.</div>';
+      queryPanel.insertBefore(indicator, queryPanel.firstChild);
+    }
+    indicator.style.display = 'block';
+    
+  } else {
+    // Show all tabs
+    if (fixTabs) fixTabs.style.display = 'flex';
+    const profileTab = document.querySelector('.tab[onclick*="profile"]');
+    if (profileTab) profileTab.style.display = 'block';
+    
+    // Enable task selector
+    taskSelect.disabled = false;
+    resetBtn.disabled = false;
+    
+    // Hide custom mode indicator
+    const indicator = document.getElementById('custom-mode-indicator');
+    if (indicator) indicator.style.display = 'none';
+  }
+}
+
 // ─── SCHEMA RENDERING ─────────────────────────────────────────────────
 function parseColumn(col) {
   // col is either a string "email (TEXT)" or an object {name, type, nullable}
@@ -1392,7 +1601,11 @@ function renderSchema(schemaInfo) {
       html += '<tr><td class="col-name">' + escapeHtml(parsed.name) + '</td>';
       html += '<td class="col-type"><span class="' + typeClass + '">' + escapeHtml(parsed.type) + '</span></td></tr>';
     }
-    html += '</tbody></table></div>';
+    html += '</tbody></table>';
+    html += '<div style="margin-top: 8px; padding: 6px 8px; background: var(--surface); border-radius: 4px; font-size: 11px; color: var(--text-tertiary);">';
+    html += 'Tip: Use <code style="background: var(--bg); padding: 1px 4px; border-radius: 3px;">SELECT * FROM ' + escapeHtml(tableName) + ' LIMIT 10</code> to explore this table';
+    html += '</div>';
+    html += '</div>';
   }
   panel.innerHTML = html;
 }