[do-not-merge] A vibe-coded UI mock

samples/aisql_eval_ui/.gitignore

@@ -0,0 +1,21 @@
+# Virtual environment
+venv/
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+
+# Flask
+instance/
+.webassets-cache
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+

samples/aisql_eval_ui/CHANGES.md

@@ -0,0 +1,161 @@
+# UI Updates
+
+## Update 4: Sequential Golden Dataset Flow (Latest)
+
+### What's New
+Redesigned Step 4 with a **guided, sequential workflow**. Users are now presented with a clear choice first: use existing golden dataset or create new one.
+
+### Key Features
+
+#### 1. **Initial Choice Screen**
+- Clear question: "Do you want to use an existing golden dataset for evaluation?"
+- Two prominent buttons:
+  - **📚 Yes, Select from Existing Golden Datasets**
+  - **✨ No, I'll Create a New Golden Dataset**
+
+#### 2. **Path A: Use Existing (No Creation Needed)**
+- Select from dropdown
+- View full SQL query and metadata
+- Click "Load & Use This Dataset"
+- Golden dataset is loaded - **skip creation entirely**
+- Execute queries and evaluate immediately
+
+#### 3. **Path B: Create New**
+- Shows creation interface
+- Execute query to get AI predictions
+- Edit results to create golden dataset
+- Save for future use
+
+#### 4. **Navigation**
+- "Back" button on each screen
+- Return to choice screen anytime
+- Clean, guided experience
+
+#### 5. **Loaded State View**
+- After loading existing dataset, shows read-only view
+- Green-highlighted golden results
+- Option to choose different dataset
+
+### Benefits
+✅ **Clearer workflow** - Sequential steps vs. all-at-once interface  
+✅ **Skip creation** - When using existing dataset, no need to create new one  
+✅ **Reduced confusion** - One choice at a time  
+✅ **Better guidance** - Clear next steps at each stage  
+
+---
+
+## Update 3: Manual Golden Dataset Selection
+
+### What's New
+Changed from automatic detection to **manual dropdown selection** for golden datasets. You now have full control over which golden dataset to load, with complete visibility of the SQL query.
+
+### Key Features
+
+#### 1. **Dropdown Selector**
+- Always visible blue section at the top of Step 4
+- Browse ALL saved golden datasets in one dropdown
+- Format: `table_name - SQL_query_preview (row_count)`
+
+#### 2. **SQL Query Preview**
+When you select a dataset from the dropdown, you see:
+- **Full SQL query** - Complete, untruncated query in a code block
+- **Table name** - Which table it's for
+- **Row count** - Number of golden records
+- **Timestamp** - When it was created/saved
+
+#### 3. **Manual Load Control**
+- Click "Load Selected" to load the chosen golden dataset
+- No automatic detection or suggestions
+- You decide which version to use for evaluation
+
+#### 4. **Smart Workflow**
+- Load golden dataset anytime (before or after executing query)
+- Execute query to get AI predictions
+- Evaluate by comparing predictions against loaded golden data
+- Edit and re-save golden data to update it
+
+### Benefits
+✅ **Full control** - You choose which golden dataset to use
+✅ **Transparency** - See the exact SQL query before loading
+✅ **Version management** - Easily compare and select between different golden datasets
+✅ **Flexibility** - Load datasets for any table, not just current query
+
+---
+
+## Update 2: Reusable Golden Datasets
+
+### What's New
+Golden datasets can now be **saved and reused** across sessions!
+
+### Key Features
+- Golden datasets keyed by SQL query + table name
+- Persistent storage for reuse
+- Saved datasets available via API endpoint
+
+### Benefits
+✅ **Save time** - Reuse golden datasets instead of recreating them
+✅ **Consistency** - Same query uses same golden standard
+✅ **Iterative improvement** - Load, edit, and save updates to golden data
+
+---
+
+## Update 1: Table-Based Interface
+
+### What Changed
+
+The execution results and golden dataset sections have been updated from a card-based layout to a **table-based format** for easier side-by-side comparison.
+
+## Key Improvements
+
+### 1. **Execution Results Table**
+- Shows all data in a clean, organized table
+- Columns include:
+  - Row number (#)
+  - All input columns (id, product, review, description, etc.)
+  - AI Result column (highlighted in blue badge)
+- **Sticky header** - Header stays visible when scrolling
+- Truncates long text with "..." and shows full text on hover
+
+### 2. **Golden Dataset Editor Table**
+- Comprehensive table view with:
+  - Row number
+  - All input data columns
+  - **AI Result** (read-only) - What the model predicted
+  - **Golden Result** (editable) - Where you make corrections
+- **Visual feedback**:
+  - Modified fields turn yellow when edited
+  - Clear distinction between AI predictions and your corrections
+- Inline editing - Click directly in the table cell to edit
+
+### 3. **Better User Experience**
+- Side-by-side comparison of inputs, predictions, and corrections
+- Easy to scan through multiple rows
+- Clear visual hierarchy
+- Professional table styling with hover effects
+- Responsive layout that handles varying data sizes
+
+## How to Use
+
+1. **Run a query** - See results in table format with AI predictions
+2. **Review the golden dataset table** - Compare AI results with input data
+3. **Edit corrections** - Click on golden result cells to modify
+4. **Visual feedback** - See yellow highlighting on modified values
+5. **Save** - Click "Save as Golden Dataset" button
+
+## Technical Details
+
+- Updated CSS for table styling
+- Refactored `displayResults()` function to generate table HTML
+- Refactored `displayGoldenEditor()` function with inline editing
+- Added `updateGoldenResult()` and `highlightModified()` helper functions
+- Sticky positioning for table headers
+- Responsive column widths with text truncation
+
+## Benefits
+
+✅ **Easier comparison** - All data visible in one view
+✅ **Faster editing** - Direct inline editing vs separate inputs
+✅ **Better readability** - Tabular format is more intuitive
+✅ **Scalable** - Handles any number of columns dynamically
+✅ **Professional** - Clean, modern table design
+