Initialize Testing Phase

requirements.txt

@@ -4,92 +4,92 @@
 #
 #    pip-compile --output-file=requirements.txt pyproject.toml
 #
-annotated-doc==0.0.4
+annotated-doc>=0.0.4
     # via fastapi
-annotated-types==0.7.0
+annotated-types>=0.7.0
     # via pydantic
-anyio==4.13.0
+anyio>=4.13.0
     # via
     #   httpx
     #   openai
     #   starlette
     #   watchfiles
-certifi==2026.2.25
+certifi>=2026.2.25
     # via
     #   httpcore
     #   httpx
     #   requests
-charset-normalizer==3.4.6
+charset-normalizer>=3.4.6
     # via requests
-click==8.3.1
+click>=8.3.1
     # via uvicorn
-colorama==0.4.6
+colorama>=0.4.6
     # via
     #   click
     #   tqdm
     #   uvicorn
-distro==1.9.0
+distro>=1.9.0
     # via openai
-fastapi==0.135.2
+fastapi>=0.100.0
     # via sql-quality-env (pyproject.toml)
-h11==0.16.0
+h11>=0.16.0
     # via
     #   httpcore
     #   uvicorn
-httpcore==1.0.9
+httpcore>=1.0.9
     # via httpx
-httptools==0.7.1
+httptools>=0.7.1
     # via uvicorn
-httpx==0.28.1
+httpx>=0.28.1
     # via openai
-idna==3.11
+idna>=3.11
     # via
     #   anyio
     #   httpx
     #   requests
-jiter==0.13.0
+jiter>=0.13.0
     # via openai
-openai==2.30.0
+openai>=1.0.0
     # via sql-quality-env (pyproject.toml)
-pydantic==2.12.5
+pydantic>=2.0.0
     # via
     #   fastapi
     #   openai
     #   sql-quality-env (pyproject.toml)
-pydantic-core==2.41.5
+pydantic-core>=2.41.5
     # via pydantic
-python-dotenv==1.2.2
+python-dotenv>=1.0.0
     # via
     #   sql-quality-env (pyproject.toml)
     #   uvicorn
-pyyaml==6.0.3
+pyyaml>=6.0.3
     # via uvicorn
-requests==2.33.1
+requests>=2.31.0
     # via sql-quality-env (pyproject.toml)
-sniffio==1.3.1
+sniffio>=1.3.1
     # via openai
-starlette==1.0.0
+starlette>=1.0.0
     # via fastapi
-tqdm==4.67.3
+tqdm>=4.67.3
     # via openai
-typing-extensions==4.15.0
+typing-extensions>=4.15.0
     # via
     #   fastapi
     #   openai
     #   pydantic
     #   pydantic-core
     #   typing-inspection
-typing-inspection==0.4.2
+typing-inspection>=0.4.2
     # via
     #   fastapi
     #   pydantic
-urllib3==2.6.3
+urllib3>=2.6.3
     # via requests
-uvicorn[standard]==0.42.0
+uvicorn[standard]>=0.23.0
     # via sql-quality-env (pyproject.toml)
-watchfiles==1.1.1
+watchfiles>=1.1.1
     # via uvicorn
 websockets==16.0
     # via uvicorn
-python-multipart==0.0.9
+python-multipart>=0.0.6
     # for FastAPI file uploads (UploadFile)

server/main.py

@@ -78,12 +78,12 @@ async def root():
     return load_static_html()
 
 
-@app.get("/health", response_model=HealthResponse)
-async def health() -> HealthResponse:
+@app.get("/health")
+async def health() -> dict:
     """Health check endpoint for monitoring and load balancers.
 
     Returns:
-        dict: Status response indicating the server is running
+        dict: Status response with server and LLM connection status
     """
     # Check LLM availability
     llm_available = False
@@ -98,7 +98,21 @@ async def health() -> HealthResponse:
     except Exception:
         pass
     
-    return HealthResponse(status="ok", llm_available=llm_available)
+    return {
+        "status": "online",
+        "llm": "connected" if llm_available else "disconnected",
+        "llm_available": llm_available
+    }
+
+
+@app.get("/status")
+async def status() -> dict:
+    """Status endpoint for Hugging Face Spaces compatibility.
+    
+    Returns:
+        dict: Simple status response
+    """
+    return {"status": "online", "llm": "connected"}
 
 
 @app.post("/ping", response_model=HealthResponse)
@@ -758,7 +772,11 @@ def detect_tasks_from_schema(schema: list[dict]) -> list[str]:
 
 
 @app.post("/upload-db")
-async def upload_db(file: UploadFile = File(...), use_for_tasks: bool = True, session_id: str = None) -> dict:
+async def upload_db(
+    file: UploadFile = File(...),
+    use_for_tasks: bool = True,
+    session_id: str = None
+) -> dict:
     """Upload a .sqlite, .db, or .csv file for custom exploration and RL tasks.
     
     Args:

static/index.html

@@ -135,14 +135,251 @@
   .health-dot.online { background: var(--success); }
   .health-dot.offline { background: var(--error); }
 
+  /* ─── THREE-COLUMN DASHBOARD LAYOUT ─────────────────────────────────── */
+  .dashboard-container {
+    display: grid;
+    grid-template-columns: 280px 1fr 320px;
+    gap: 16px;
+    padding: 16px;
+    max-width: 100%;
+    height: calc(100vh - 48px);
+    overflow: hidden;
+  }
+  
+  @media (max-width: 1200px) {
+    .dashboard-container {
+      grid-template-columns: 1fr;
+      height: auto;
+      overflow: visible;
+    }
+  }
+  
+  /* ─── LEFT SIDEBAR ──────────────────────────────────────────────────── */
+  .left-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    overflow-y: auto;
+  }
+  
+  .sidebar-card {
+    background: var(--surface);
+    border: 1px solid var(--card-border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    overflow: hidden;
+  }
+  
+  .sidebar-card-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 14px;
+    border-bottom: 1px solid var(--card-border);
+    background: var(--bg);
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  
+  .sidebar-card-body {
+    padding: 14px;
+  }
+  
+  /* ─── CENTER PANEL ──────────────────────────────────────────────────── */
+  .center-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    overflow-y: auto;
+    min-height: 0;
+  }
+  
+  /* ─── RIGHT SIDEBAR ─────────────────────────────────────────────────── */
+  .right-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    overflow-y: auto;
+  }
+  
+  /* ─── STEP-BY-STEP HEADER ─────────────────────────────────────────────── */
+  .workflow-steps {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 8px 20px;
+    background: linear-gradient(135deg, #E8F5E9 0%, #F1F8E9 100%);
+    border-bottom: 1px solid #A5D6A7;
+  }
+  
+  .workflow-step {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--text-secondary);
+  }
+  
+  .workflow-step.active {
+    color: var(--primary);
+    font-weight: 500;
+  }
+  
+  .workflow-step-num {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    background: var(--primary);
+    color: white;
+    font-size: 11px;
+    font-weight: 600;
+    border-radius: 50%;
+  }
+  
+  .workflow-step.active .workflow-step-num {
+    background: var(--success);
+  }
+  
+  .workflow-arrow {
+    color: var(--text-tertiary);
+    font-size: 14px;
+  }
+  
+  /* ─── AI INSIGHTS PANEL ──────────────────────────────────────────────── */
+  .ai-insights-card {
+    background: linear-gradient(135deg, #E3F2FD 0%, #F3E5F5 100%);
+    border: 1px solid #90CAF9;
+  }
+  
+  .ai-insights-header {
+    background: linear-gradient(135deg, #1565C0 0%, #7B1FA2 100%);
+    color: white;
+    border-bottom: none;
+  }
+  
+  .confidence-log {
+    background: var(--bg);
+    border: 1px solid var(--card-border);
+    border-radius: var(--radius);
+    padding: 10px;
+    margin-bottom: 10px;
+    font-size: 11px;
+  }
+  
+  .confidence-log-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 6px;
+  }
+  
+  .confidence-score {
+    background: var(--success);
+    color: white;
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 11px;
+    font-weight: 600;
+  }
+  
+  .confidence-reasoning {
+    color: var(--text-secondary);
+    line-height: 1.4;
+  }
+  
+  /* ─── TASK SUGGESTION CARDS ─────────────────────────────────────────── */
+  .task-suggestion {
+    background: var(--bg);
+    border: 1px solid var(--card-border);
+    border-radius: var(--radius);
+    padding: 12px;
+    margin-bottom: 10px;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+  
+  .task-suggestion:hover {
+    border-color: var(--primary);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  }
+  
+  .task-suggestion-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 6px;
+  }
+  
+  .task-suggestion-name {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-primary);
+  }
+  
+  .task-match-badge {
+    background: #4CAF50;
+    color: white;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 10px;
+    font-weight: 600;
+  }
+  
+  .task-suggestion-reason {
+    font-size: 11px;
+    color: var(--text-secondary);
+    line-height: 1.4;
+  }
+  
+  /* ─── UPLOAD AREA ───────────────────────────────────────────────────── */
+  .upload-area {
+    border: 2px dashed var(--card-border);
+    border-radius: var(--radius);
+    padding: 16px;
+    text-align: center;
+    transition: all 0.15s;
+    background: var(--bg);
+  }
+  
+  .upload-area:hover {
+    border-color: var(--primary);
+    background: #F1F8E9;
+  }
+  
+  .upload-status {
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin-top: 8px;
+  }
+  
+  .upload-status.success {
+    color: var(--success);
+    font-weight: 500;
+  }
+  
+  /* ─── SCHEMA PANEL COMPACT ──────────────────────────────────────────── */
+  .schema-compact {
+    max-height: 300px;
+    overflow-y: auto;
+  }
+  
   /* ─── MAIN CONTENT ─────────────────────────────────────────────────── */
   .main {
-    padding: 20px;
-    max-width: 1600px;
-    margin: 0 auto;
+    padding: 0;
+    max-width: 100%;
+    margin: 0;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
   }
-
-  /* ─── BENTO GRID ───────────────────────────────────────────────────── */
+  
+  /* ─── BENTO GRID (DEPRECATED - keep for compatibility) ──────────────── */
   .bento-row {
     display: grid;
     gap: 16px;
@@ -683,289 +920,328 @@
   </div>
 </header>
 
-<!-- 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>
+<!-- WORKFLOW STEPS HEADER -->
+<div class="workflow-steps">
+  <div class="workflow-step active" id="step-1">
+    <span class="workflow-step-num">1</span>
+    <span>Upload Data</span>
   </div>
-  <!-- HOW TO USE SECTION -->
-  <div class="help-section" id="help-section">
-    <div class="help-title">
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <circle cx="12" cy="12" r="10"/>
-        <path d="M12 16v-4M12 8h.01"/>
-      </svg>
-      How to Use This Application
-    </div>
-    <div class="help-steps">
-      <div class="help-step">
-        <span class="help-step-num">1</span>
-        <div class="help-step-title">Select Task</div>
-        <div class="help-step-desc">Choose a data quality task from the dropdown. Each has a specific data issue to investigate.</div>
-      </div>
-      <div class="help-step">
-        <span class="help-step-num">2</span>
-        <div class="help-step-title">Investigate</div>
-        <div class="help-step-desc">Use <strong>Query</strong> (SELECT only) to explore data. Use <strong>Profile</strong> to check column stats. Review the Schema panel.</div>
-      </div>
-      <div class="help-step">
-        <span class="help-step-num">3</span>
-        <div class="help-step-title">Identify Issue</div>
-        <div class="help-step-desc">Find the data quality problem: null values, type mismatches, duplicates, or orphans.</div>
-      </div>
-      <div class="help-step">
-        <span class="help-step-num">4</span>
-        <div class="help-step-title">Submit Fix</div>
-        <div class="help-step-desc">Use the appropriate tab: <strong>Text Answer</strong> for null_audit, <strong>SQL Fix</strong> for repairs, <strong>Dedup</strong> for duplicates.</div>
-      </div>
-    </div>
-    <div class="help-actions">
-      <span class="help-badge">Query = SELECT only</span>
-      <span class="help-badge">Fix = UPDATE/INSERT/DELETE allowed</span>
-      <span class="help-badge">Submit = Final answer</span>
-    </div>
+  <span class="workflow-arrow">→</span>
+  <div class="workflow-step" id="step-2">
+    <span class="workflow-step-num">2</span>
+    <span>Map Alias</span>
   </div>
+  <span class="workflow-arrow">→</span>
+  <div class="workflow-step" id="step-3">
+    <span class="workflow-step-num">3</span>
+    <span>AI Audit</span>
+  </div>
+</div>
 
-  <!-- ROW 1: Bento Grid (3 columns) -->
-  <div class="bento-row bento-3">
-
-    <!-- LEFT: Task Info -->
-    <div class="card">
-      <div class="card-header">
-        <span class="card-title">Task Info</span>
-        <span class="badge badge-easy" id="difficulty-badge">—</span>
-      </div>
-      <div class="card-body">
-        <div class="task-name" id="task-name">No task selected</div>
-        <div class="task-desc" id="task-desc">Select a task from the dropdown above to begin.</div>
-        <div class="meta-row">
-          <div class="meta-item">
-            <span class="meta-label">Episode ID</span>
-            <span class="meta-value" id="episode-id">—</span>
-          </div>
-          <div class="meta-item">
-            <span class="meta-label">Step</span>
-            <span class="meta-value" id="step-count">0</span>
-          </div>
-          <div class="meta-item">
-            <span class="meta-label">Max Attempts</span>
-            <span class="meta-value" id="max-attempts">—</span>
-          </div>
+<!-- MAIN DASHBOARD -->
+<main class="main">
+  <div class="dashboard-container">
+    
+    <!-- LEFT SIDEBAR -->
+    <aside class="left-sidebar">
+      
+      <!-- Connection Status -->
+      <div class="sidebar-card">
+        <div class="sidebar-card-header">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M5 12h14M12 5l7 7-7 7"/>
+          </svg>
+          Connection Status
         </div>
-        <div class="meta-row" style="margin-top: 8px;">
-          <div class="meta-item">
-            <span class="meta-label">Server</span>
-            <span class="status-dot" id="health-status">Checking...</span>
+        <div class="sidebar-card-body">
+          <div style="display: flex; flex-direction: column; gap: 10px;">
+            <div style="display: flex; align-items: center; gap: 8px;">
+              <span class="status-dot online" id="health-status-dot"></span>
+              <span style="font-size: 12px; color: var(--text-secondary);" id="health-status-text">Server Online</span>
+            </div>
+            <div style="display: flex; align-items: center; gap: 8px;">
+              <span class="status-dot offline" id="llm-status-dot"></span>
+              <span style="font-size: 12px; color: var(--text-secondary);" id="llm-status-text">LLM Checking...</span>
+            </div>
+            <div style="margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--card-border);">
+              <select class="task-select" id="task-select" style="width: 100%; margin-bottom: 8px;">
+                <option value="">Select a task...</option>
+                <option value="null_audit">null_audit — Find column with >50% nulls</option>
+                <option value="type_repair">type_repair — Fix numeric type mismatch</option>
+                <option value="dedup_bug">dedup_bug — Diagnose JOIN duplication</option>
+                <option value="fk_integrity">fk_integrity — Remove orphan FK rows</option>
+                <option value="schema_drift">schema_drift — Canonicalize drifted schema</option>
+              </select>
+              <button class="btn btn-primary btn-full" id="reset-btn" onclick="resetEpisode()">
+                <span class="spinner" id="reset-spinner"></span>
+                <span id="reset-btn-text">Initialize Episode</span>
+              </button>
+            </div>
           </div>
-          <div class="meta-item">
-            <span class="meta-label">LLM</span>
-            <span class="status-dot" id="llm-status">Checking...</span>
+        </div>
+      </div>
+      
+      <!-- File Upload -->
+      <div class="sidebar-card">
+        <div class="sidebar-card-header">
+          <svg width="14" height="14" 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>
+          Upload Database
+        </div>
+        <div class="sidebar-card-body">
+          <div class="upload-area" id="upload-section">
+            <input type="file" id="db-file-input" accept=".sqlite,.db,.csv" style="display: none;">
+            <button class="btn btn-secondary btn-full" onclick="document.getElementById('db-file-input').click()">
+              Choose File
+            </button>
+            <div class="upload-status" id="upload-status">No file loaded</div>
+            <button class="btn btn-primary btn-full" onclick="uploadDatabase()" id="upload-btn" style="margin-top: 10px;">
+              <span class="spinner" id="upload-spinner"></span>
+              <span id="upload-btn-text">Upload & Analyze</span>
+            </button>
           </div>
+          <div id="upload-error" class="output-error" style="display: none; margin-top: 10px;"></div>
+          <button class="btn btn-secondary btn-full" onclick="backToTasks()" id="back-to-tasks-btn" style="display: none; margin-top: 8px;">
+            Back to Tasks
+          </button>
         </div>
       </div>
-    </div>
-
-    <!-- MIDDLE: Investigate -->
-    <div class="card">
-      <div class="tabs">
-        <div class="tab active" onclick="switchTab(this, 'investigate', 'query')">Query</div>
-        <div class="tab" onclick="switchTab(this, 'investigate', 'profile')">Profile</div>
+      
+      <!-- Table Schema -->
+      <div class="sidebar-card">
+        <div class="sidebar-card-header">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="3" y="3" width="18" height="18" rx="2"/>
+            <line x1="3" y1="9" x2="21" y2="9"/>
+            <line x1="9" y1="21" x2="9" y2="9"/>
+          </svg>
+          Table Schema
+          <button class="btn btn-xs btn-secondary" onclick="refreshSchema()" style="margin-left: auto; font-size: 10px; padding: 2px 8px;">Refresh</button>
+        </div>
+        <div class="sidebar-card-body schema-compact" id="schema-panel">
+          <div class="output-body empty">Select a task to view schema</div>
+        </div>
       </div>
-      <div class="tab-panel active" id="investigate-panel-query">
-        <div class="field">
-          <label>SQL Query (SELECT only)</label>
-          <textarea id="query-sql" placeholder="SELECT * FROM users LIMIT 10"></textarea>
+      
+    </aside>
+    
+    <!-- CENTER PANEL -->
+    <section class="center-panel">
+      
+      <!-- SQL Editor Card -->
+      <div class="card" style="flex: 0 0 auto;">
+        <div class="tabs">
+          <div class="tab active" onclick="switchTab(this, 'investigate', 'query')">Query</div>
+          <div class="tab" onclick="switchTab(this, 'investigate', 'profile')">Profile</div>
+        </div>
+        
+        <div class="tab-panel active" id="investigate-panel-query">
+          <div class="card-body">
+            <div class="field">
+              <label>SQL Query (SELECT only)</label>
+              <textarea id="query-sql" placeholder="SELECT * FROM users LIMIT 10" style="min-height: 140px;"></textarea>
+            </div>
+            <button class="btn btn-primary btn-full" onclick="runQuery()">
+              <span class="spinner" id="query-spinner"></span>
+              <span id="query-btn-text">Run Query</span>
+            </button>
+          </div>
         </div>
-        <button class="btn btn-primary btn-full" onclick="runQuery()">
-          <span class="spinner" id="query-spinner"></span>
-          <span id="query-btn-text">Run Query</span>
-        </button>
-        <div class="output-panel" id="query-output-container" style="display:none;">
-          <div class="output-header">
-            <span class="output-title">Result</span>
+        
+        <div class="tab-panel" id="investigate-panel-profile">
+          <div class="card-body">
+            <div class="field">
+              <label>Column Name</label>
+              <input type="text" id="profile-col" placeholder="e.g., email">
+            </div>
+            <button class="btn btn-primary btn-full" onclick="profileColumn()">
+              <span class="spinner" id="profile-spinner"></span>
+              <span id="profile-btn-text">Profile Column</span>
+            </button>
           </div>
-          <div class="output-body" id="query-output"></div>
         </div>
       </div>
-      <div class="tab-panel" id="investigate-panel-profile">
-        <div class="field">
-          <label>Column Name</label>
-          <input type="text" id="profile-col" placeholder="e.g., email">
+      
+      <!-- Query Results -->
+      <div class="card" style="flex: 1; display: flex; flex-direction: column; min-height: 0;">
+        <div class="card-header">
+          <span class="card-title">Query Results</span>
+          <span id="query-result-count" style="font-size: 11px; color: var(--text-tertiary);"></span>
         </div>
-        <button class="btn btn-primary btn-full" onclick="profileColumn()">
-          <span class="spinner" id="profile-spinner"></span>
-          <span id="profile-btn-text">Profile Column</span>
-        </button>
-        <div class="output-panel" id="profile-output-container" style="display:none;">
-          <div class="output-header">
-            <span class="output-title">Profile Result</span>
+        <div class="card-body" style="flex: 1; overflow: auto; padding: 0;">
+          <div id="query-output-container" style="display: none;">
+            <div id="query-output" style="padding: 12px;"></div>
+          </div>
+          <div id="query-empty" class="output-body empty" style="padding: 40px; text-align: center;">
+            Run a query to see results here
           </div>
-          <div class="output-body" id="profile-output"></div>
         </div>
       </div>
-    </div>
-
-    <!-- RIGHT: Schema -->
-    <div class="card">
-      <div class="card-header">
-        Schema Info
-        <button class="btn btn-xs btn-secondary" onclick="refreshSchema()" style="margin-left: auto;">Refresh</button>
-      </div>
-      <div class="card-body" id="schema-panel">
-        <div class="output-body empty">Select a task to view schema</div>
-      </div>
-    </div>
-
-  </div>
-
-  <!-- ROW 2: Bento Grid (2 columns) -->
-  <div class="bento-row bento-2">
-
-    <!-- LEFT: Fix & Submit -->
-    <div class="card">
-      <div class="tabs" id="fix-tabs">
-        <div class="tab active" id="tab-sql-fix" onclick="switchTab(this, 'fix', 'sql')">SQL Fix</div>
-        <div class="tab" id="tab-text-answer" onclick="switchTab(this, 'fix', 'answer')">Text Answer</div>
-        <div class="tab" id="tab-dedup" onclick="switchTab(this, 'fix', 'dedup')">Dedup</div>
-      </div>
-
-      <!-- SQL Fix Tab -->
-      <div class="tab-panel active" id="fix-panel-sql">
-        <div class="field">
-          <label>Fix Query</label>
-          <textarea id="fix-sql" placeholder="-- Enter your fix SQL here"></textarea>
+      
+      <!-- Fix Panel -->
+      <div class="card" style="flex: 0 0 auto;">
+        <div class="tabs" id="fix-tabs">
+          <div class="tab active" id="tab-sql-fix" onclick="switchTab(this, 'fix', 'sql')">SQL Fix</div>
+          <div class="tab" id="tab-text-answer" onclick="switchTab(this, 'fix', 'answer')">Text Answer</div>
+          <div class="tab" id="tab-dedup" onclick="switchTab(this, 'fix', 'dedup')">Dedup</div>
         </div>
-        <div style="display:flex; gap:8px;">
-          <button class="btn btn-secondary" onclick="verifyFix()">Verify Query</button>
-          <button class="btn btn-primary" onclick="applyFix()">
-            <span class="spinner" id="fix-spinner"></span>
-            <span id="fix-btn-text">Apply Fix</span>
-          </button>
+        
+        <div class="tab-panel active" id="fix-panel-sql">
+          <div class="card-body">
+            <div class="field">
+              <label>Fix Query</label>
+              <textarea id="fix-sql" placeholder="-- Enter your fix SQL here" style="min-height: 80px;"></textarea>
+            </div>
+            <div style="display:flex; gap:8px;">
+              <button class="btn btn-secondary" onclick="verifyFix()">Verify Query</button>
+              <button class="btn btn-primary" onclick="applyFix()">
+                <span class="spinner" id="fix-spinner"></span>
+                <span id="fix-btn-text">Apply Fix</span>
+              </button>
+            </div>
+          </div>
         </div>
-      </div>
-
-      <!-- Text Answer Tab -->
-      <div class="tab-panel" id="fix-panel-answer">
-        <div class="field">
-          <label>Answer</label>
-          <input type="text" id="fix-answer" placeholder="e.g., email">
+        
+        <div class="tab-panel" id="fix-panel-answer">
+          <div class="card-body">
+            <div class="field">
+              <label>Answer</label>
+              <input type="text" id="fix-answer" placeholder="e.g., email">
+            </div>
+          </div>
         </div>
-        <div class="field" id="root-cause-field" style="display:none;">
-          <label>Root Cause Table (if dedup)</label>
-          <input type="text" id="root-cause-table" placeholder="order_items">
+        
+        <div class="tab-panel" id="fix-panel-dedup">
+          <div class="card-body">
+            <div class="field">
+              <label>Root Cause Table</label>
+              <input type="text" id="dedup-table" placeholder="order_items">
+            </div>
+            <div class="field">
+              <label>Offending Key</label>
+              <input type="text" id="dedup-key" placeholder="order_id">
+            </div>
+            <div class="field">
+              <label>Fix Query</label>
+              <textarea id="dedup-sql" placeholder="DELETE FROM order_items WHERE rowid NOT IN (SELECT MIN(rowid) FROM order_items GROUP BY order_id)" style="min-height: 60px;"></textarea>
+            </div>
+          </div>
         </div>
-        <div class="field" id="offending-key-field" style="display:none;">
-          <label>Offending Key (if dedup)</label>
-          <input type="text" id="offending-key" placeholder="order_id">
+        
+        <div style="padding: 0 16px 16px;">
+          <button class="btn btn-primary btn-full" onclick="submitEpisode()" style="background:#1565C0;">
+            <span class="spinner" id="submit-spinner"></span>
+            <span id="submit-btn-text">Submit Final Answer</span>
+          </button>
         </div>
       </div>
-
-      <!-- Dedup Tab -->
-      <div class="tab-panel" id="fix-panel-dedup">
-        <div class="field">
-          <label>Root Cause Table</label>
-          <input type="text" id="dedup-table" placeholder="order_items">
-        </div>
-        <div class="field">
-          <label>Offending Key</label>
-          <input type="text" id="dedup-key" placeholder="order_id">
+      
+    </section>
+    
+    <!-- RIGHT SIDEBAR -->
+    <aside class="right-sidebar">
+      
+      <!-- AI Insights -->
+      <div class="sidebar-card ai-insights-card">
+        <div class="sidebar-card-header ai-insights-header">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+          </svg>
+          AI Insights
         </div>
-        <div class="field">
-          <label>Fix Query</label>
-          <textarea id="dedup-sql" placeholder="DELETE FROM order_items WHERE rowid NOT IN (SELECT MIN(rowid) FROM order_items GROUP BY order_id)"></textarea>
+        <div class="sidebar-card-body" id="ai-insights-panel">
+          <div style="font-size: 12px; color: var(--text-secondary); text-align: center; padding: 20px;">
+            Upload a database to see AI-powered task suggestions
+          </div>
         </div>
       </div>
-
-      <div style="padding: 0 16px 16px;">
-        <button class="btn btn-primary btn-full" onclick="submitEpisode()" style="background:#1565C0;">
-          <span class="spinner" id="submit-spinner"></span>
-          <span id="submit-btn-text">Submit Final Answer</span>
-        </button>
-        <div class="output-panel" id="submit-output-container" style="display:none; margin-top:12px;">
-          <div class="output-header">
-            <span class="output-title">Submission Result</span>
+      
+      <!-- Task Suggestions -->
+      <div class="sidebar-card">
+        <div class="sidebar-card-header">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M9 11l3 3L22 4"/>
+            <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
+          </svg>
+          Smart Task Suggestions
+        </div>
+        <div class="sidebar-card-body" id="task-suggestions-panel">
+          <div style="font-size: 12px; color: var(--text-secondary); text-align: center; padding: 20px;">
+            No suggestions yet. Upload and analyze your data first.
           </div>
-          <div class="output-body" id="submit-output"></div>
         </div>
       </div>
-    </div>
-
-    <!-- RIGHT: Results -->
-    <div class="card">
-      <div class="card-header">
-        <span class="card-title">Results</span>
-      </div>
-      <div class="card-body">
-        <div class="score-display">
-          <div class="score-value" id="score-value">—</div>
-          <div class="score-label">Final Score</div>
-          <div class="severity-badge severity-acceptable" id="severity-badge" style="display:none;">—</div>
+      
+      <!-- Confidence Logs -->
+      <div class="sidebar-card">
+        <div class="sidebar-card-header">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+            <polyline points="14 2 14 8 20 8"/>
+            <line x1="16" y1="13" x2="8" y2="13"/>
+            <line x1="16" y1="17" x2="8" y2="17"/>
+            <polyline points="10 9 9 9 8 9"/>
+          </svg>
+          Confidence Logs
         </div>
-
-        <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--card-border);">
-          <div class="dim-row">
-            <span class="dim-label">D1</span>
-            <span class="dim-name">Diag. Efficiency</span>
-            <div class="dim-bar"><div class="dim-bar-fill" id="d1-bar" style="width:0%"></div></div>
-            <span class="dim-val" id="d1-val">—</span>
-          </div>
-          <div class="dim-row">
-            <span class="dim-label">D2</span>
-            <span class="dim-name">Hypothesis Quality</span>
-            <div class="dim-bar"><div class="dim-bar-fill" id="d2-bar" style="width:0%"></div></div>
-            <span class="dim-val" id="d2-val">—</span>
-          </div>
-          <div class="dim-row">
-            <span class="dim-label">D3</span>
-            <span class="dim-name">Fix Correctness</span>
-            <div class="dim-bar"><div class="dim-bar-fill" id="d3-bar" style="width:0%"></div></div>
-            <span class="dim-val" id="d3-val">—</span>
+        <div class="sidebar-card-body" id="confidence-logs-panel">
+          <div style="font-size: 11px; color: var(--text-tertiary); text-align: center; padding: 10px;">
+            AI reasoning logs will appear here
           </div>
-          <div class="dim-row">
-            <span class="dim-label">D4</span>
-            <span class="dim-name">Self-Verification</span>
-            <div class="dim-bar"><div class="dim-bar-fill" id="d4-bar" style="width:0%"></div></div>
-            <span class="dim-val" id="d4-val">—</span>
+        </div>
+      </div>
+      
+      <!-- Results Summary -->
+      <div class="sidebar-card">
+        <div class="sidebar-card-header">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M12 20V10M18 20V4M6 20v-6"/>
+          </svg>
+          Results
+        </div>
+        <div class="sidebar-card-body">
+          <div class="score-display" style="padding: 10px;">
+            <div class="score-value" id="score-value" style="font-size: 36px;">—</div>
+            <div class="score-label">Final Score</div>
+            <div class="severity-badge severity-acceptable" id="severity-badge" style="display:none; margin-top: 8px;">—</div>
           </div>
-          <div class="dim-row">
-            <span class="dim-label">D5</span>
-            <span class="dim-name">Generalization</span>
-            <div class="dim-bar"><div class="dim-bar-fill" id="d5-bar" style="width:0%"></div></div>
-            <span class="dim-val" id="d5-val">—</span>
+          
+          <div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--card-border);">
+            <div class="dim-row" style="margin-bottom: 8px;">
+              <span class="dim-label" style="width: 20px;">D1</span>
+              <span class="dim-name" style="width: 100px; font-size: 11px;">Diagnostic</span>
+              <div class="dim-bar" style="height: 3px;"><div class="dim-bar-fill" id="d1-bar" style="width:0%"></div></div>
+              <span class="dim-val" id="d1-val" style="width: 30px; font-size: 10px;">—</span>
+            </div>
+            <div class="dim-row" style="margin-bottom: 8px;">
+              <span class="dim-label" style="width: 20px;">D2</span>
+              <span class="dim-name" style="width: 100px; font-size: 11px;">Hypothesis</span>
+              <div class="dim-bar" style="height: 3px;"><div class="dim-bar-fill" id="d2-bar" style="width:0%"></div></div>
+              <span class="dim-val" id="d2-val" style="width: 30px; font-size: 10px;">—</span>
+            </div>
+            <div class="dim-row" style="margin-bottom: 8px;">
+              <span class="dim-label" style="width: 20px;">D3</span>
+              <span class="dim-name" style="width: 100px; font-size: 11px;">Fix Quality</span>
+              <div class="dim-bar" style="height: 3px;"><div class="dim-bar-fill" id="d3-bar" style="width:0%"></div></div>
+              <span class="dim-val" id="d3-val" style="width: 30px; font-size: 10px;">—</span>
+            </div>
           </div>
-        </div>
-
-        <div class="output-panel" style="margin-top: 16px;">
-          <div class="output-header">
-            <span class="output-title">Grader Feedback</span>
+          
+          <div class="output-panel" style="margin-top: 12px;">
+            <div class="output-header">
+              <span class="output-title">Feedback</span>
+            </div>
+            <div class="output-body" id="feedback-output" style="font-size: 11px; max-height: 100px;">Submit to see feedback</div>
           </div>
-          <div class="output-body" id="feedback-output">Submit an episode to see feedback</div>
         </div>
       </div>
-    </div>
-
+      
+    </aside>
+    
   </div>
-
 </main>
 
 <!-- TOAST CONTAINER -->
@@ -973,7 +1249,7 @@
 
 <script>
 // ─── CONFIG ───────────────────────────────────────────────────────────
-const BASE = window.location.origin;
+const BASE = ''; // Use relative paths for HF Spaces compatibility
 
 // ─── STATE ────────────────────────────────────────────────────────────
 let state = {
@@ -1471,6 +1747,10 @@ async function uploadDatabase() {
       customDbFilename = data.filename;
       firstCustomTable = data.tables[0]?.table_name || 'table';
       
+      // Update workflow step highlighting
+      document.getElementById('step-1').classList.remove('active');
+      document.getElementById('step-2').classList.add('active');
+      
       // 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;
@@ -1481,24 +1761,29 @@ async function uploadDatabase() {
         window.usingUploadedDbForTasks = true;
         
         // Enable task selection for uploaded DB
-        mode = 'task';  // Stay in task mode, not custom mode
+        mode = 'task';
         
-        // Update UI with smart message
+        // Update UI
         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('upload-status').innerHTML = '✓ ' + data.filename + ' loaded - <strong>' + totalTasks + ' AI suggestions</strong>';
+        document.getElementById('upload-status').className = 'upload-status success';
         document.getElementById('back-to-tasks-btn').style.display = 'inline-flex';
         
         // Update schema panel with health data
         renderSchema(data.tables, data.health_audits);
         
-        // Show smart task selection
-        showSmartTaskSelector(data.compatible_tasks, data.semantic_tasks, data.fingerprints);
+        // Update new sidebar panels with AI insights
+        updateAIInsightsPanel(data.semantic_tasks, data.fingerprints);
+        updateTaskSuggestionsPanel(data.semantic_tasks, data.compatible_tasks);
+        
+        // Extract log entries from semantic tasks
+        const logEntries = (data.semantic_tasks || []).map(t => t.debug_info).filter(Boolean);
+        updateConfidenceLogsPanel(logEntries);
         
         // Ensure task selector is enabled
         updateUIForMode();
         
-        toast('Database uploaded! ' + totalTasks + ' smart task suggestions available', 'success');
+        toast('Database uploaded! ' + totalTasks + ' AI task suggestions available', 'success');
       } else {
         // No compatible tasks - go to custom exploration mode
         mode = 'custom';
@@ -2249,45 +2534,142 @@ async function checkHealth() {
     const r = await api('GET', '/health');
     if (r.ok) {
       updateStatusPill('active');
-      document.getElementById('health-status').textContent = 'Connected';
-      document.getElementById('health-status').className = 'status-dot online';
+      document.getElementById('health-status-text').textContent = 'Server Online';
+      document.getElementById('health-status-dot').className = 'status-dot online';
       
       // Check LLM connection
-      checkLLMConnection();
+      if (r.data.llm_available) {
+        document.getElementById('llm-status-text').textContent = 'LLM Connected';
+        document.getElementById('llm-status-dot').className = 'status-dot online';
+      } else {
+        document.getElementById('llm-status-text').textContent = 'LLM Not Configured';
+        document.getElementById('llm-status-dot').className = 'status-dot offline';
+      }
     } else {
       updateStatusPill('error');
-      document.getElementById('health-status').textContent = 'Offline';
-      document.getElementById('health-status').className = 'status-dot offline';
+      document.getElementById('health-status-text').textContent = 'Server Offline';
+      document.getElementById('health-status-dot').className = 'status-dot offline';
+      document.getElementById('llm-status-text').textContent = 'LLM Unknown';
+      document.getElementById('llm-status-dot').className = 'status-dot offline';
     }
   } catch (e) {
     updateStatusPill('error');
-    document.getElementById('health-status').textContent = 'Error';
-    document.getElementById('health-status').className = 'status-dot offline';
+    document.getElementById('health-status-text').textContent = 'Connection Error';
+    document.getElementById('health-status-dot').className = 'status-dot offline';
+    document.getElementById('llm-status-text').textContent = 'LLM Unknown';
+    document.getElementById('llm-status-dot').className = 'status-dot offline';
   }
 }
 
-// Check LLM connection status
-async function checkLLMConnection() {
-  try {
-    // Test LLM connection by checking if inference.py can be imported and has OpenAI client
-    const r = await api('GET', '/health');
+// ─── UPDATE AI INSIGHTS PANEL ─────────────────────────────────────────
+function updateAIInsightsPanel(semanticTasks, fingerprints) {
+  const panel = document.getElementById('ai-insights-panel');
+  
+  if (!semanticTasks || semanticTasks.length === 0) {
+    panel.innerHTML = '<div style="font-size: 12px; color: var(--text-secondary); text-align: center; padding: 20px;">Upload a database to see AI-powered analysis</div>';
+    return;
+  }
+  
+  let html = '<div style="font-size: 12px; color: var(--text-primary); margin-bottom: 12px;"><strong>🧠 AI Analysis Complete</strong></div>';
+  
+  semanticTasks.forEach((task, index) => {
+    const confidence = Math.round(task.confidence * 100);
+    const fingerprint = fingerprints?.[task.table_name] || {};
+    const nullCount = fingerprint.null_counts ? Object.values(fingerprint.null_counts).reduce((a, b) => a + b, 0) : 0;
     
-    if (r.ok && r.data.llm_available) {
-      document.getElementById('llm-status').textContent = 'LLM Connected';
-      document.getElementById('llm-status').className = 'status-dot online';
-    } else if (r.ok) {
-      document.getElementById('llm-status').textContent = 'LLM Not Configured';
-      document.getElementById('llm-status').className = 'status-dot offline';
-    } else {
-      document.getElementById('llm-status').textContent = 'LLM Error';
-      document.getElementById('llm-status').className = 'status-dot offline';
+    html += '<div class="confidence-log">';
+    html += '<div class="confidence-log-header">';
+    html += '<span style="font-weight: 500;">' + task.task_id.replace('_', ' ') + '</span>';
+    html += '<span class="confidence-score">' + confidence + '%</span>';
+    html += '</div>';
+    html += '<div class="confidence-reasoning">' + task.reason + '</div>';
+    if (task.debug_info) {
+      html += '<div style="margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--card-border); font-size: 10px; color: var(--text-tertiary);">';
+      html += 'Rows: ' + (task.debug_info.fingerprint_analysis?.row_count || 'N/A') + ' | ';
+      html += 'Nulls: ' + nullCount + '</div>';
     }
-  } catch (e) {
-    document.getElementById('llm-status').textContent = 'LLM Offline';
-    document.getElementById('llm-status').className = 'status-dot offline';
+    html += '</div>';
+  });
+  
+  panel.innerHTML = html;
+}
+
+// ─── UPDATE TASK SUGGESTIONS PANEL ─────────────────────────────────────
+function updateTaskSuggestionsPanel(semanticTasks, legacyTasks) {
+  const panel = document.getElementById('task-suggestions-panel');
+  
+  const allTasks = [...(semanticTasks || []), ...(legacyTasks || []).map(id => ({ task_id: id, confidence: 1.0, reason: 'Exact table name match' }))];
+  
+  if (allTasks.length === 0) {
+    panel.innerHTML = '<div style="font-size: 12px; color: var(--text-secondary); text-align: center; padding: 20px;">No task suggestions available</div>';
+    return;
   }
+  
+  const taskLabels = {
+    'null_audit': 'Null Audit',
+    'type_repair': 'Type Repair',
+    'dedup_bug': 'Duplicate Bug',
+    'fk_integrity': 'FK Integrity',
+    'schema_drift': 'Schema Drift',
+    'job_market_audit': 'Job Market Audit'
+  };
+  
+  let html = '';
+  allTasks.forEach((task, index) => {
+    const confidence = Math.round((task.confidence || 0) * 100);
+    html += '<div class="task-suggestion" onclick="selectTaskSuggestion(\'' + task.task_id + '\')">';
+    html += '<div class="task-suggestion-header">';
+    html += '<span class="task-suggestion-name">' + (taskLabels[task.task_id] || task.task_id) + '</span>';
+    html += '<span class="task-match-badge">' + confidence + '% match</span>';
+    html += '</div>';
+    html += '<div class="task-suggestion-reason">' + task.reason + '</div>';
+    html += '</div>';
+  });
+  
+  panel.innerHTML = html;
 }
 
+// ─── UPDATE CONFIDENCE LOGS PANEL ──────────────────────────────────────
+function updateConfidenceLogsPanel(logEntries) {
+  const panel = document.getElementById('confidence-logs-panel');
+  
+  if (!logEntries || logEntries.length === 0) {
+    panel.innerHTML = '<div style="font-size: 11px; color: var(--text-tertiary); text-align: center; padding: 10px;">AI reasoning logs will appear here after analysis</div>';
+    return;
+  }
+  
+  let html = '';
+  logEntries.forEach(entry => {
+    html += '<div class="confidence-log" style="margin-bottom: 8px;">';
+    html += '<div class="confidence-log-header">';
+    html += '<span style="font-size: 10px; color: var(--text-tertiary);">' + entry.task_id + '</span>';
+    html += '<span class="confidence-score" style="font-size: 10px; padding: 1px 6px;">' + Math.round(entry.confidence_score * 100) + '%</span>';
+    html += '</div>';
+    html += '<div class="confidence-reasoning" style="font-size: 10px;">' + entry.reasoning + '</div>';
+    html += '</div>';
+  });
+  
+  panel.innerHTML = html;
+}
+
+// ─── SELECT TASK FROM SUGGESTION ───────────────────────────────────────
+function selectTaskSuggestion(taskId) {
+  document.getElementById('task-select').value = taskId;
+  onTaskChange();
+  toast('Task selected: ' + taskId, 'success');
+  
+  // Highlight the active step
+  document.querySelectorAll('.workflow-step').forEach((step, index) => {
+    if (index === 2) { // Step 3: AI Audit
+      step.classList.add('active');
+    } else {
+      step.classList.remove('active');
+    }
+  });
+}
+
+// ─── UPLOAD DATABASE ──────────────────────────────────────────────────
+
 // ─── INIT ────���────────────────────────────────────────────────────────
 // Initialize event delegation for dynamic elements
 document.addEventListener('DOMContentLoaded', function() {