Upload index.html

static/index.html

@@ -1449,36 +1449,42 @@ async function uploadDatabase() {
       customDbFilename = data.filename;
       firstCustomTable = data.tables[0]?.table_name || 'table';
       
-      // Store compatible tasks
-      if (data.compatible_tasks && data.compatible_tasks.length > 0) {
-        window.uploadedCompatibleTasks = data.compatible_tasks;
+      // Store compatible tasks and semantic suggestions
+      const hasLegacyTasks = data.compatible_tasks && data.compatible_tasks.length > 0;
+      const hasSemanticTasks = data.semantic_tasks && data.semantic_tasks.length > 0;
+      
+      if (hasLegacyTasks || hasSemanticTasks) {
+        window.uploadedCompatibleTasks = data.compatible_tasks || [];
+        window.uploadedSemanticTasks = data.semantic_tasks || [];
         window.usingUploadedDbForTasks = true;
         
         // Enable task selection for uploaded DB
         mode = 'task';  // Stay in task mode, not custom mode
         
-        // Update UI
-        document.getElementById('upload-status').innerHTML = '✓ ' + data.filename + ' loaded (' + data.tables.length + ' tables) - <strong>' + data.compatible_tasks.length + ' tasks available</strong>';
+        // Update UI with smart message
+        const totalTasks = (data.compatible_tasks?.length || 0) + (data.semantic_tasks?.length || 0);
+        document.getElementById('upload-status').innerHTML = '✓ ' + data.filename + ' loaded (' + data.tables.length + ' tables) - <strong>' + totalTasks + ' smart task suggestions</strong>';
         document.getElementById('upload-status').style.color = 'var(--success)';
         document.getElementById('back-to-tasks-btn').style.display = 'inline-flex';
         
         // Update schema panel with health data
         renderSchema(data.tables, data.health_audits);
         
-        // Show task selection for uploaded DB
-        showUploadedDbTaskSelector(data.compatible_tasks);
+        // Show smart task selection
+        showSmartTaskSelector(data.compatible_tasks, data.semantic_tasks, data.fingerprints);
         
         // Ensure task selector is enabled
         updateUIForMode();
         
-        toast('Database uploaded! ' + data.compatible_tasks.length + ' tasks available', 'success');
+        toast('Database uploaded! ' + totalTasks + ' smart task suggestions available', 'success');
       } else {
         // No compatible tasks - go to custom exploration mode
         mode = 'custom';
         window.uploadedCompatibleTasks = [];
+        window.uploadedSemanticTasks = [];
         window.usingUploadedDbForTasks = false;
         
-        document.getElementById('upload-status').innerHTML = '✓ ' + data.filename + ' loaded (' + data.tables.length + ' tables) - <em>No RL tasks compatible</em>';
+        document.getElementById('upload-status').innerHTML = '✓ ' + data.filename + ' loaded (' + data.tables.length + ' tables) - <em>Use Custom Mode to explore</em>';
         document.getElementById('upload-status').style.color = 'var(--text-secondary)';
         document.getElementById('back-to-tasks-btn').style.display = 'inline-flex';
         
@@ -1487,7 +1493,7 @@ async function uploadDatabase() {
         document.getElementById('query-sql').placeholder = 'SELECT * FROM ' + firstCustomTable + ' LIMIT 10';
         updateUIForMode();
         
-        toast('Database uploaded for exploration only (no compatible RL tasks)', 'success');
+        toast('Database uploaded for exploration (Custom Mode)', 'success');
       }
     } else {
       document.getElementById('upload-error').style.display = 'block';
@@ -1503,8 +1509,8 @@ async function uploadDatabase() {
   setLoading('upload', false);
 }
 
-function showUploadedDbTaskSelector(compatibleTasks) {
-  // Create or update task selector for uploaded DB
+function showSmartTaskSelector(legacyTasks, semanticTasks, fingerprints) {
+  // Create or update smart task selector
   let selector = document.getElementById('uploaded-db-task-selector');
   if (!selector) {
     selector = document.createElement('div');
@@ -1519,23 +1525,160 @@ function showUploadedDbTaskSelector(compatibleTasks) {
     'type_repair': 'Type Repair',
     'dedup_bug': 'Duplicate Bug',
     'fk_integrity': 'FK Integrity',
-    'schema_drift': 'Schema Drift'
+    'schema_drift': 'Schema Drift',
+    'job_market_audit': 'Job Market Audit'
   };
   
-  let html = '<div style="font-size: 14px; color: #2E7D32; margin-bottom: 8px;"><strong>📊 Select a Task to Run on Uploaded Database:</strong></div>';
-  html += '<div style="display: flex; gap: 8px; flex-wrap: wrap;">';
+  let html = '<div style="font-size: 14px; color: #2E7D32; margin-bottom: 8px;"><strong>🧠 Smart Task Suggestions:</strong></div>';
   
-  compatibleTasks.forEach(taskId => {
-    html += '<button class="btn btn-primary" onclick="selectUploadedDbTask(\'' + taskId + '\')" style="font-size: 12px; padding: 6px 12px;">' + taskLabels[taskId] + '</button>';
-  });
+  // Show semantic tasks first (they're smarter)
+  if (semanticTasks && semanticTasks.length > 0) {
+    html += '<div style="margin-bottom: 12px;">';
+    html += '<div style="font-size: 12px; color: #558B2F; margin-bottom: 6px;">Based on your data analysis:</div>';
+    
+    semanticTasks.forEach(task => {
+      const confidence = Math.round(task.confidence * 100);
+      const tableName = task.table_name;
+      const fingerprint = fingerprints[tableName];
+      const nullCount = fingerprint?.null_counts ? Object.values(fingerprint.null_counts).reduce((a, b) => a + b, 0) : 0;
+      
+      html += '<div style="margin-bottom: 8px; padding: 8px; background: white; border-radius: 4px; border: 1px solid #C8E6C9;">';
+      html += '<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">';
+      html += '<span style="font-weight: 500; color: #2E7D32;">' + taskLabels[task.task_id] + '</span>';
+      html += '<span style="font-size: 11px; background: #4CAF50; color: white; padding: 2px 6px; border-radius: 10px;">' + confidence + '% match</span>';
+      html += '</div>';
+      html += '<div style="font-size: 11px; color: #666; margin-bottom: 6px;">' + task.reason + '</div>';
+      
+      if (task.requires_alias) {
+        const suggestedAlias = task.suggested_alias || 'users';
+        html += '<div style="display: flex; gap: 6px; align-items: center;">';
+        html += '<button class="btn btn-primary" onclick="setTableAliasAndRunTask(\'' + tableName + '\', \'\' + suggestedAlias + '\', \'\' + task.task_id + '\')" style="font-size: 11px; padding: 4px 8px;">Run with Alias</button>';
+        html += '<span style="font-size: 10px; color: #888;">Will treat \"' + tableName + '\" as \"' + suggestedAlias + '\"</span>';
+        html += '</div>';
+      } else {
+        html += '<button class="btn btn-primary" onclick="selectUploadedDbTask(\'' + task.task_id + '\')" style="font-size: 11px; padding: 4px 8px;">Run Task</button>';
+      }
+      
+      html += '</div>';
+    });
+    
+    html += '</div>';
+  }
+  
+  // Show legacy tasks if any
+  if (legacyTasks && legacyTasks.length > 0) {
+    html += '<div style="margin-bottom: 12px;">';
+    html += '<div style="font-size: 12px; color: #558B2F; margin-bottom: 6px;">Classic tasks (exact name match):</div>';
+    html += '<div style="display: flex; gap: 8px; flex-wrap: wrap;">';
+    
+    legacyTasks.forEach(taskId => {
+      html += '<button class="btn btn-secondary" onclick="selectUploadedDbTask(\'' + taskId + '\')" style="font-size: 12px; padding: 6px 12px;">' + taskLabels[taskId] + '</button>';
+    });
+    
+    html += '</div></div>';
+  }
   
+  // Add manual alias option
+  html += '<div style="margin-top: 12px; padding: 8px; background: #FFF3E0; border-radius: 4px;">';
+  html += '<div style="font-size: 11px; color: #E65100; margin-bottom: 6px;"><strong>Manual Override:</strong></div>';
+  html += '<div style="font-size: 10px; color: #666; margin-bottom: 4px;">Treat any table as a specific task type:</div>';
+  html += '<button onclick="showManualAliasDialog()" style="font-size: 10px; padding: 4px 8px; background: #FF9800; color: white; border: none; border-radius: 4px; cursor: pointer;">Set Table Alias</button>';
   html += '</div>';
-  html += '<div style="margin-top: 8px; font-size: 11px; color: #558B2F;">These tasks will analyze your uploaded database</div>';
   
   selector.innerHTML = html;
   selector.style.display = 'block';
 }
 
+function showUploadedDbTaskSelector(compatibleTasks) {
+  // Legacy function - kept for compatibility
+  showSmartTaskSelector(compatibleTasks, [], {});
+}
+
+function setTableAliasAndRunTask(actualTable, aliasAs, taskId) {
+  // Set the alias first
+  api('POST', '/set-table-alias', {
+    actual_table: actualTable,
+    alias_as: aliasAs
+  }).then(response => {
+    if (response.ok) {
+      toast(response.data.message, 'success');
+      // Then select the task
+      selectUploadedDbTask(taskId);
+    } else {
+      toast('Failed to set table alias', 'error');
+    }
+  });
+}
+
+function showManualAliasDialog() {
+  const tables = window.customDbSchema || [];
+  if (tables.length === 0) {
+    toast('No tables available', 'error');
+    return;
+  }
+  
+  const tableNames = tables.map(t => t.table_name);
+  const taskOptions = ['users', 'transactions', 'order_items', 'invoices', 'customers', 'events_v1', 'events_v2'];
+  
+  let html = '<div style="padding: 16px;">';
+  html += '<h3 style="margin-top: 0;">Set Table Alias</h3>';
+  html += '<p style="color: #666; font-size: 14px;">Treat a table as if it has a different name for RL tasks</p>';
+  
+  html += '<div style="margin-bottom: 12px;">';
+  html += '<label style="display: block; margin-bottom: 4px; font-weight: 500;">Actual Table:</label>';
+  html += '<select id="alias-table-select" style="width: 100%; padding: 6px; border: 1px solid #ddd; border-radius: 4px;">';
+  tableNames.forEach(name => {
+    html += '<option value="' + escapeHtml(name) + '">' + escapeHtml(name) + '</option>';
+  });
+  html += '</select>';
+  html += '</div>';
+  
+  html += '<div style="margin-bottom: 12px;">';
+  html += '<label style="display: block; margin-bottom: 4px; font-weight: 500;">Treat as:</label>';
+  html += '<select id="alias-as-select" style="width: 100%; padding: 6px; border: 1px solid #ddd; border-radius: 4px;">';
+  taskOptions.forEach(name => {
+    html += '<option value="' + name + '">' + name + '</option>';
+  });
+  html += '</select>';
+  html += '</div>';
+  
+  html += '<div style="display: flex; gap: 8px; justify-content: flex-end;">';
+  html += '<button onclick="closeManualAliasDialog()" style="padding: 6px 12px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer;">Cancel</button>';
+  html += '<button onclick="applyManualAlias()" style="padding: 6px 12px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer;">Apply</button>';
+  html += '</div>';
+  
+  html += '</div>';
+  
+  // Create modal
+  const modal = document.createElement('div');
+  modal.id = 'alias-modal';
+  modal.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000;';
+  modal.innerHTML = html;
+  document.body.appendChild(modal);
+}
+
+function closeManualAliasDialog() {
+  const modal = document.getElementById('alias-modal');
+  if (modal) modal.remove();
+}
+
+function applyManualAlias() {
+  const actualTable = document.getElementById('alias-table-select').value;
+  const aliasAs = document.getElementById('alias-as-select').value;
+  
+  api('POST', '/set-table-alias', {
+    actual_table: actualTable,
+    alias_as: aliasAs
+  }).then(response => {
+    if (response.ok) {
+      toast(response.data.message, 'success');
+      closeManualAliasDialog();
+    } else {
+      toast('Failed to set table alias', 'error');
+    }
+  });
+}
+
 function selectUploadedDbTask(taskId) {
   // Update task selector to match
   document.getElementById('task-select').value = taskId;