Upload index.html

static/index.html

@@ -527,6 +527,123 @@
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 3px; }
   ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
+
+  /* ─── HELP / HOW TO USE ───────────────────────────────────────────── */
+  .help-section {
+    background: linear-gradient(135deg, #E8F5E9 0%, #F1F8E9 100%);
+    border: 1px solid #A5D6A7;
+    border-radius: var(--radius);
+    padding: 16px;
+    margin-bottom: 16px;
+  }
+  .help-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--primary);
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .help-steps {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 12px;
+  }
+  .help-step {
+    background: var(--bg);
+    border: 1px solid var(--card-border);
+    border-radius: var(--radius);
+    padding: 12px;
+  }
+  .help-step-num {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    background: var(--primary);
+    color: white;
+    font-size: 11px;
+    font-weight: 500;
+    border-radius: 50%;
+    margin-bottom: 6px;
+  }
+  .help-step-title {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+  }
+  .help-step-desc {
+    font-size: 11px;
+    color: var(--text-secondary);
+    line-height: 1.4;
+  }
+  .help-actions {
+    display: flex;
+    gap: 8px;
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid #A5D6A7;
+  }
+  .help-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 6px;
+    font-size: 10px;
+    background: var(--bg);
+    border: 1px solid var(--card-border);
+    border-radius: 4px;
+    color: var(--text-secondary);
+  }
+
+  /* ─── FORMATTED RESULT TABLE ────────────────────────────────────────── */
+  .result-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+    margin-top: 8px;
+  }
+  .result-table th {
+    text-align: left;
+    padding: 8px 10px;
+    background: var(--surface);
+    color: var(--text-secondary);
+    font-weight: 500;
+    border-bottom: 2px solid var(--card-border);
+    white-space: nowrap;
+  }
+  .result-table td {
+    padding: 6px 10px;
+    border-bottom: 1px solid var(--card-border);
+    color: var(--text-primary);
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .result-table tr:hover td {
+    background: var(--surface);
+  }
+  .result-summary {
+    padding: 10px 12px;
+    background: var(--surface);
+    border-radius: var(--radius);
+    margin-bottom: 12px;
+    font-size: 12px;
+    color: var(--text-secondary);
+  }
+  .result-summary strong {
+    color: var(--text-primary);
+  }
+  .result-null {
+    color: var(--text-tertiary);
+    font-style: italic;
+  }
+  .result-number {
+    color: var(--success);
+    font-weight: 500;
+  }
 </style>
 </head>
 <body>
@@ -569,6 +686,44 @@
 <!-- MAIN CONTENT -->
 <main class="main">
 
+  <!-- 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>
+  </div>
+
   <!-- ROW 1: Bento Grid (3 columns) -->
   <div class="bento-row bento-3">
 
@@ -1003,7 +1158,7 @@ async function runQuery() {
       output.innerHTML = '<div class="output-error">' + escapeHtml(feedback) +
         '<div class="error-tip">Tip: Use SELECT statements only in this panel. For data modification, use the FIX tab or Submit.</div></div>';
     } else {
-      output.textContent = formatResult(r.data);
+      output.innerHTML = formatResult(r.data);
     }
   } else {
     output.innerHTML = '<div class="output-error">Error: ' + escapeHtml(r.data.detail || 'Unknown error') + '</div>';
@@ -1114,7 +1269,7 @@ async function submitEpisode() {
     state.done = r.data.done || false;
     state.score = r.data.reward?.score ?? state.score;
     updateResults(r.data);
-    output.textContent = formatResult(r.data);
+    output.innerHTML = formatResult(r.data);
     if (state.done) {
       updateStatusPill('done');
       toast('Episode complete! Score: ' + (state.score * 100).toFixed(1) + '%', 'success');
@@ -1214,7 +1369,175 @@ function updateResults(stepData) {
 
 // ─── UTILITIES ─────────────────────────────────────────────────────────
 function formatResult(data) {
-  return JSON.stringify(data, null, 2);
+  // Format as readable table instead of raw JSON
+  if (!data) return 'No data';
+  
+  // Handle array of objects (query results)
+  if (Array.isArray(data)) {
+    if (data.length === 0) return '<div class="result-summary">0 rows returned</div>';
+    return formatArrayAsTable(data);
+  }
+  
+  // Handle nested observation structure
+  if (data.observation && data.observation.investigation_hint) {
+    return formatInvestigationHint(data.observation.investigation_hint);
+  }
+  
+  // Handle reward feedback (text feedback)
+  if (data.reward && data.reward.feedback) {
+    return formatFeedback(data.reward.feedback);
+  }
+  
+  // Default: format as readable object
+  return formatObjectAsReadable(data);
+}
+
+function formatArrayAsTable(arr) {
+  if (!arr || arr.length === 0) return '<div class="result-summary">0 rows returned</div>';
+  
+  const columns = Object.keys(arr[0]);
+  let html = '<div class="result-summary"><strong>' + arr.length + '</strong> row' + (arr.length > 1 ? 's' : '') + ' returned</div>';
+  
+  html += '<table class="result-table"><thead><tr>';
+  columns.forEach(col => {
+    html += '<th>' + escapeHtml(col) + '</th>';
+  });
+  html += '</tr></thead><tbody>';
+  
+  // Show up to 20 rows
+  const displayRows = arr.slice(0, 20);
+  displayRows.forEach(row => {
+    html += '<tr>';
+    columns.forEach(col => {
+      const val = row[col];
+      let formatted = formatCellValue(val);
+      html += '<td>' + formatted + '</td>';
+    });
+    html += '</tr>';
+  });
+  
+  html += '</tbody></table>';
+  
+  if (arr.length > 20) {
+    html += '<div class="result-summary" style="margin-top:8px;">... and ' + (arr.length - 20) + ' more rows</div>';
+  }
+  
+  return html;
+}
+
+function formatCellValue(val) {
+  if (val === null || val === undefined) {
+    return '<span class="result-null">NULL</span>';
+  }
+  if (typeof val === 'number') {
+    return '<span class="result-number">' + escapeHtml(String(val)) + '</span>';
+  }
+  if (typeof val === 'boolean') {
+    return '<span class="result-number">' + (val ? 'true' : 'false') + '</span>';
+  }
+  const str = String(val);
+  if (str.length > 50) {
+    return escapeHtml(str.substring(0, 50)) + '...';
+  }
+  return escapeHtml(str);
+}
+
+function formatInvestigationHint(hint) {
+  // Try to parse as JSON array
+  try {
+    const parsed = JSON.parse(hint.replace(/'/g, '"'));
+    if (Array.isArray(parsed)) {
+      return formatArrayAsTable(parsed);
+    }
+  } catch (e) {
+    // Not valid JSON, show as text
+  }
+  
+  // If it looks like a list of records, try to format
+  if (hint.includes('column_name') && hint.includes('null_count')) {
+    // Parse null audit result format
+    const rows = parseNullAuditResult(hint);
+    if (rows.length > 0) {
+      return formatArrayAsTable(rows);
+    }
+  }
+  
+  return '<div class="result-summary">Query Result</div><div style="padding:12px;">' + escapeHtml(hint) + '</div>';
+}
+
+function parseNullAuditResult(hint) {
+  const rows = [];
+  // Match patterns like {'column_name': 'city', 'null_count': 520, ...}
+  const regex = /\{[^}]+\}/g;
+  const matches = hint.match(regex);
+  if (matches) {
+    matches.forEach(match => {
+      try {
+        // Convert Python-style dict to JSON
+        const jsonStr = match
+          .replace(/'/g, '"')
+          .replace(/(\w+):/g, '"$1":');
+        const obj = JSON.parse(jsonStr);
+        rows.push(obj);
+      } catch (e) {}
+    });
+  }
+  return rows;
+}
+
+function formatFeedback(feedback) {
+  // Format feedback text with better styling
+  if (feedback.includes('|')) {
+    // Multi-part feedback with dimensions
+    const parts = feedback.split('|').map(p => p.trim()).filter(p => p);
+    let html = '<div class="result-summary"><strong>Score Breakdown</strong></div>';
+    html += '<div style="padding:12px;">';
+    parts.forEach(part => {
+      const [label, value] = part.split(':').map(s => s.trim());
+      if (label && value) {
+        html += '<div style="margin-bottom:6px;"><strong>' + escapeHtml(label) + ':</strong> ' + escapeHtml(value) + '</div>';
+      } else {
+        html += '<div style="margin-bottom:6px;">' + escapeHtml(part) + '</div>';
+      }
+    });
+    html += '</div>';
+    return html;
+  }
+  
+  // Simple feedback text
+  return '<div style="padding:12px;">' + escapeHtml(feedback) + '</div>';
+}
+
+function formatObjectAsReadable(obj) {
+  let html = '<div style="padding:12px;">';
+  
+  function renderValue(val, indent) {
+    if (val === null) return '<span class="result-null">null</span>';
+    if (typeof val === 'object') {
+      if (Array.isArray(val)) {
+        if (val.length === 0) return '[]';
+        if (typeof val[0] === 'object') {
+          return formatArrayAsTable(val);
+        }
+        return '[' + val.map(v => renderValue(v, indent)).join(', ') + ']';
+      }
+      // Object
+      let objHtml = '<div style="margin-left:' + (indent * 16) + 'px;">';
+      for (const [k, v] of Object.entries(val)) {
+        objHtml += '<div><strong>' + escapeHtml(k) + ':</strong> ' + renderValue(v, indent + 1) + '</div>';
+      }
+      objHtml += '</div>';
+      return objHtml;
+    }
+    return escapeHtml(String(val));
+  }
+  
+  for (const [key, value] of Object.entries(obj)) {
+    html += '<div style="margin-bottom:8px;"><strong>' + escapeHtml(key) + ':</strong> ' + renderValue(value, 1) + '</div>';
+  }
+  
+  html += '</div>';
+  return html;
 }
 
 function escapeHtml(str) {