Aniruddha7/QueryLens-Text2SQL_DocVQA-V2
0
1<!doctype html>2<html lang="en">3 4<head>5 <meta charset="utf-8" />6 <meta name="viewport" content="width=device-width, initial-scale=1" />7 <title>QueryLens - Transform natural language into SQL</title>8 <link rel="icon"9 href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiIGZpbGw9IiMwRjYyRkUiLz4KPHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeD0iNCIgeT0iNCIgY2xhc3M9InF1ZXJ5LWljb24iPgo8cGF0aCBkPSJNMTIgMlY3TTEyIDdMMTUgM001IDkuNUg5LjVNOS41IDkuNUw2IDZNMTkgMTQuNUgxNC41TTE0LjUgMTQuNUwxOCAxOE0xMiAxN1YyMk0xMiAyMkw5IDE5IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4KPC9zdmc+">10 11 <!-- Fonts -->12 <link rel="preconnect" href="https://fonts.googleapis.com">13 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>14 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"15 rel="stylesheet">16 17 <!-- Icons -->18 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lucide@0.292.0/dist/umd/lucide.min.css">19 20 <style>21 :root {22 /* Modern Color Palette */23 --primary: #0F62FE;24 --primary-dark: #0353E9;25 --primary-light: #4589FF;26 --secondary: #8A3FFC;27 --accent: #FF6B35;28 29 /* Neutrals - Enhanced for better contrast */30 --gray-50: #F8FAFC;31 --gray-100: #F1F5F9;32 --gray-200: #E2E8F0;33 --gray-300: #CBD5E1;34 --gray-400: #94A3B8;35 --gray-500: #64748B;36 --gray-600: #475569;37 --gray-700: #334155;38 --gray-800: #1E293B;39 --gray-900: #0F172A;40 41 /* Semantic */42 --success: #10B981;43 --warning: #F59E0B;44 --error: #EF4444;45 46 /* Surfaces - Improved contrast */47 --bg-primary: #FAFBFC;48 /* Slightly off-white for better contrast */49 --bg-secondary: #F4F6F8;50 /* Darker secondary background */51 --bg-tertiary: #E8EDF3;52 /* More distinct tertiary */53 --card-bg: #FFFFFF;54 /* Pure white cards for contrast */55 --border: #D1D9E0;56 /* Darker borders for definition */57 --border-light: #E5EAF0;58 /* Subtle borders */59 60 /* Typography - Enhanced contrast */61 --text-primary: #1A202C;62 /* Darker primary text */63 --text-secondary: #4A5568;64 /* Stronger secondary text */65 --text-tertiary: #718096;66 /* More readable tertiary text */67 68 /* Spacing */69 --space-1: 0.25rem;70 --space-2: 0.5rem;71 --space-3: 0.75rem;72 --space-4: 1rem;73 --space-5: 1.25rem;74 --space-6: 1.5rem;75 --space-8: 2rem;76 --space-10: 2.5rem;77 --space-12: 3rem;78 --space-16: 4rem;79 80 /* Shadows */81 --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);82 --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);83 --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);84 --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);85 86 /* Border Radius */87 --radius-sm: 0.375rem;88 --radius-md: 0.5rem;89 --radius-lg: 0.75rem;90 --radius-xl: 1rem;91 92 /* Transitions */93 --transition-fast: 150ms ease;94 --transition-normal: 250ms ease;95 --transition-slow: 350ms ease;96 }97 98 /* Reset & Base Styles */99 *,100 *::before,101 *::after {102 box-sizing: border-box;103 }104 105 html,106 body {107 height: 100%;108 margin: 0;109 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;110 background: var(--bg-secondary);111 color: var(--text-primary);112 -webkit-font-smoothing: antialiased;113 -moz-osx-font-smoothing: grayscale;114 font-size: 16px;115 line-height: 1.6;116 }117 118 /* Layout */119 .app-container {120 min-height: 100vh;121 display: flex;122 flex-direction: column;123 }124 125 .main-content {126 flex: 1;127 max-width: 1400px;128 margin: 0 auto;129 padding: var(--space-6) var(--space-4);130 width: 100%;131 }132 133 /* Header */134 .header {135 background: var(--card-bg);136 border-bottom: 1px solid var(--border);137 box-shadow: var(--shadow-sm);138 position: sticky;139 top: 0;140 z-index: 50;141 }142 143 .header-content {144 max-width: 1400px;145 margin: 0 auto;146 padding: var(--space-4) var(--space-4);147 display: flex;148 align-items: center;149 gap: var(--space-4);150 }151 152 .brand {153 display: flex;154 align-items: center;155 gap: var(--space-3);156 }157 158 .brand-icon {159 width: 48px;160 height: 48px;161 background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);162 border-radius: var(--radius-lg);163 display: flex;164 align-items: center;165 justify-content: center;166 box-shadow: var(--shadow-md);167 position: relative;168 overflow: hidden;169 }170 171 .brand-icon::before {172 content: '';173 position: absolute;174 top: 0;175 left: 0;176 right: 0;177 bottom: 0;178 background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);179 animation: shimmer 3s infinite;180 }181 182 @keyframes shimmer {183 0% {184 transform: translateX(-100%);185 }186 187 100% {188 transform: translateX(100%);189 }190 }191 192 .brand-icon svg {193 width: 24px;194 height: 24px;195 color: white;196 z-index: 1;197 position: relative;198 }199 200 .brand-text h1 {201 margin: 0;202 font-size: 1.875rem;203 font-weight: 800;204 background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary) 100%);205 -webkit-background-clip: text;206 -webkit-text-fill-color: transparent;207 background-clip: text;208 letter-spacing: -0.025em;209 }210 211 .brand-text p {212 margin: 0;213 color: var(--text-secondary);214 font-size: 0.875rem;215 font-weight: 500;216 }217 218 /* Query Section */219 .query-section {220 background: var(--card-bg);221 border-radius: var(--radius-xl);222 box-shadow: var(--shadow-lg);223 border: 1px solid var(--border);224 margin-bottom: var(--space-8);225 overflow: hidden;226 }227 228 .query-header {229 padding: var(--space-6) var(--space-6) 0;230 }231 232 .query-title {233 margin: 0 0 var(--space-2);234 font-size: 1.125rem;235 font-weight: 600;236 color: var(--text-primary);237 }238 239 .query-body {240 padding: 0 var(--space-6) var(--space-6);241 }242 243 .textarea-container {244 position: relative;245 margin-bottom: var(--space-4);246 }247 248 .query-textarea {249 width: 100%;250 min-height: 120px;251 padding: var(--space-4);252 border: 2px solid var(--border);253 border-radius: var(--radius-lg);254 font-size: 1rem;255 font-family: inherit;256 line-height: 1.6;257 resize: vertical;258 background: var(--bg-primary);259 color: var(--text-primary);260 transition: var(--transition-normal);261 }262 263 .query-textarea:focus {264 outline: none;265 border-color: var(--primary);266 box-shadow: 0 0 0 3px rgba(15, 98, 254, 0.1);267 }268 269 .query-textarea::placeholder {270 color: var(--text-tertiary);271 }272 273 .query-controls {274 display: flex;275 align-items: center;276 gap: var(--space-3);277 flex-wrap: wrap;278 }279 280 .mode-selector {281 display: flex;282 align-items: center;283 gap: var(--space-2);284 }285 286 .mode-selector label {287 font-size: 0.875rem;288 font-weight: 500;289 color: var(--text-secondary);290 }291 292 .mode-select {293 padding: var(--space-2) var(--space-3);294 border: 1px solid var(--border);295 border-radius: var(--radius-md);296 font-size: 0.875rem;297 background: var(--bg-primary);298 color: var(--text-primary);299 min-width: 120px;300 }301 302 /* Buttons */303 .btn {304 display: inline-flex;305 align-items: center;306 gap: var(--space-2);307 padding: var(--space-3) var(--space-4);308 border-radius: var(--radius-md);309 font-size: 0.875rem;310 font-weight: 600;311 border: none;312 cursor: pointer;313 transition: var(--transition-normal);314 text-decoration: none;315 position: relative;316 overflow: hidden;317 }318 319 .btn:disabled {320 opacity: 0.5;321 cursor: not-allowed;322 }323 324 .btn-primary {325 background: var(--primary);326 color: white;327 box-shadow: var(--shadow-sm);328 }329 330 .btn-primary:hover:not(:disabled) {331 background: var(--primary-dark);332 transform: translateY(-1px);333 box-shadow: var(--shadow-md);334 }335 336 .btn-secondary {337 background: var(--bg-primary);338 color: var(--text-primary);339 border: 1px solid var(--border);340 box-shadow: var(--shadow-sm);341 }342 343 .btn-secondary:hover:not(:disabled) {344 background: var(--bg-tertiary);345 transform: translateY(-1px);346 }347 348 .upload-controls {349 display: flex;350 align-items: center;351 gap: var(--space-3);352 }353 354 .status-area {355 margin-left: auto;356 display: flex;357 align-items: center;358 gap: var(--space-3);359 }360 361 /* Spinner */362 .spinner {363 width: 24px;364 height: 24px;365 border: 3px solid var(--border);366 border-top-color: var(--primary);367 border-radius: 50%;368 animation: spin 1s linear infinite;369 display: inline-block;370 }371 372 .spinner.hidden {373 display: none !important;374 }375 376 @keyframes spin {377 to {378 transform: rotate(360deg);379 }380 }381 382 .status-text {383 font-size: 0.875rem;384 color: var(--text-secondary);385 }386 387 /* Results Grid */388 .results-grid {389 display: grid;390 grid-template-columns: 1fr;391 gap: var(--space-6);392 }393 394 @media (min-width: 1024px) {395 .results-grid {396 grid-template-columns: 2fr 1fr;397 gap: var(--space-6);398 }399 400 /* CRITICAL FIX: Prevent grid blowout from wide tables */401 .results-grid>.main-results {402 min-width: 0;403 /* Allow grid cell to shrink below content size */404 overflow: hidden;405 /* Contain overflowing content */406 }407 408 .results-grid>.agent-panels {409 min-width: 0;410 /* Prevent agent panels from being pushed off-screen */411 }412 }413 414 /* Cards */415 .card {416 background: var(--card-bg);417 border-radius: var(--radius-xl);418 border: 1px solid var(--border);419 box-shadow: var(--shadow-md);420 overflow: hidden;421 }422 423 .card-header {424 padding: var(--space-4) var(--space-6);425 border-bottom: 1px solid var(--border-light);426 background: var(--bg-tertiary);427 display: flex;428 align-items: center;429 justify-content: space-between;430 }431 432 .card-title {433 margin: 0;434 font-size: 1rem;435 font-weight: 600;436 color: var(--text-primary);437 display: flex;438 align-items: center;439 gap: var(--space-2);440 }441 442 .card-content {443 padding: var(--space-6);444 }445 446 .answer-content {447 font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;448 background: var(--bg-secondary);449 border-radius: var(--radius-lg);450 padding: var(--space-4);451 white-space: pre-wrap;452 color: var(--text-primary);453 font-size: 0.875rem;454 line-height: 1.6;455 min-height: 120px;456 border: 1px solid var(--border-light);457 }458 459 .sql-content {460 background: var(--gray-900);461 color: #E2E8F0;462 border-radius: var(--radius-lg);463 padding: var(--space-4);464 font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;465 font-size: 0.875rem;466 line-height: 1.6;467 overflow-x: auto;468 max-height: 300px;469 overflow-y: auto;470 }471 472 /* Agent Panels */473 .agent-panels {474 display: grid;475 gap: var(--space-4);476 }477 478 .panel {479 border: 1px solid var(--border-light);480 border-radius: var(--radius-lg);481 overflow: hidden;482 }483 484 .panel-header {485 padding: var(--space-3) var(--space-4);486 background: var(--bg-tertiary);487 border-bottom: 1px solid var(--border-light);488 cursor: pointer;489 user-select: none;490 display: flex;491 align-items: center;492 justify-content: space-between;493 transition: var(--transition-fast);494 }495 496 .panel-header:hover {497 background: var(--bg-secondary);498 }499 500 .panel-title {501 font-size: 0.875rem;502 font-weight: 600;503 color: var(--text-primary);504 }505 506 .panel-content {507 padding: var(--space-4);508 font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;509 font-size: 0.8rem;510 line-height: 1.5;511 color: var(--text-secondary);512 white-space: pre-wrap;513 max-height: 300px;514 overflow-y: auto;515 background: var(--bg-primary);516 }517 518 /* Tables */519 .table-wrapper {520 position: relative;521 margin: var(--space-4) 0;522 border-radius: var(--radius-lg);523 box-shadow: var(--shadow-lg);524 background: var(--card-bg);525 border: 1px solid var(--border);526 overflow: hidden;527 max-width: 100%;528 /* Prevent table from breaking grid layout */529 }530 531 .table-controls {532 display: flex;533 align-items: center;534 justify-content: space-between;535 padding: var(--space-3) var(--space-4);536 background: var(--bg-tertiary);537 border-bottom: 1px solid var(--border);538 gap: var(--space-3);539 }540 541 .table-controls-left {542 display: flex;543 align-items: center;544 gap: var(--space-3);545 }546 547 .table-controls-right {548 display: flex;549 align-items: center;550 gap: var(--space-2);551 }552 553 .table-info {554 font-size: 0.875rem;555 color: var(--text-secondary);556 font-weight: 500;557 }558 559 .table-resize-controls {560 display: flex;561 align-items: center;562 gap: var(--space-2);563 }564 565 .table-resize-btn {566 padding: var(--space-1) var(--space-2);567 border: 1px solid var(--border);568 border-radius: var(--radius-sm);569 background: var(--bg-primary);570 color: var(--text-secondary);571 font-size: 0.75rem;572 cursor: pointer;573 transition: var(--transition-normal);574 }575 576 .table-resize-btn:hover {577 background: var(--bg-secondary);578 color: var(--text-primary);579 }580 581 .table-resize-btn.active {582 background: var(--primary);583 color: white;584 border-color: var(--primary);585 }586 587 .table-container {588 overflow: auto;589 max-height: 70vh;590 max-width: 100%;591 position: relative;592 border: 1px solid var(--border);593 border-radius: var(--radius-lg);594 }595 596 .answer-table {597 width: 100%;598 border-collapse: separate;599 border-spacing: 0;600 font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;601 font-size: 0.875rem;602 background: var(--card-bg);603 table-layout: auto;604 min-width: 100%;605 }606 607 .answer-table.compact {608 table-layout: fixed;609 }610 611 .answer-table.comfortable {612 table-layout: auto;613 }614 615 .answer-table.spacious {616 table-layout: auto;617 font-size: 1rem;618 }619 620 .answer-table th,621 .answer-table td {622 padding: var(--space-3) var(--space-4);623 text-align: left;624 border-bottom: 1px solid var(--border-light);625 border-right: 1px solid var(--border-light);626 vertical-align: top;627 position: relative;628 }629 630 .answer-table.compact th,631 .answer-table.compact td {632 padding: var(--space-2) var(--space-3);633 max-width: 120px;634 overflow: hidden;635 text-overflow: ellipsis;636 white-space: nowrap;637 }638 639 .answer-table.comfortable th,640 .answer-table.comfortable td {641 padding: var(--space-3) var(--space-4);642 max-width: 200px;643 word-wrap: break-word;644 white-space: normal;645 }646 647 .answer-table.spacious th,648 .answer-table.spacious td {649 padding: var(--space-4) var(--space-6);650 max-width: 300px;651 word-wrap: break-word;652 white-space: normal;653 overflow-wrap: break-word;654 }655 656 .answer-table th {657 background: #F1F5F9;658 /* Stronger header background */659 font-weight: 600;660 color: #1A202C;661 /* Darker header text */662 position: sticky;663 top: 0;664 z-index: 10;665 border-top: none;666 border-bottom: 2px solid #D1D9E0;667 /* Stronger header border */668 }669 670 .answer-table th:last-child,671 .answer-table td:last-child {672 border-right: none;673 }674 675 .answer-table tbody tr:hover {676 background: #E8F4FD;677 /* Subtle blue hover */678 }679 680 .answer-table tbody tr:nth-child(even) {681 background: #F7F9FC;682 /* More visible alternating rows */683 }684 685 .answer-table tbody tr:nth-child(even):hover {686 background: #E8F4FD;687 /* Consistent hover color */688 }689 690 /* Column resizer */691 .column-resizer {692 position: absolute;693 right: 0;694 top: 0;695 bottom: 0;696 width: 4px;697 cursor: col-resize;698 background: transparent;699 transition: background-color 0.2s;700 }701 702 .column-resizer:hover {703 background: var(--primary);704 }705 706 /* Responsive adjustments */707 @media (max-width: 768px) {708 .table-controls {709 flex-direction: column;710 align-items: stretch;711 gap: var(--space-2);712 }713 714 .table-controls-left,715 .table-controls-right {716 justify-content: space-between;717 }718 719 .answer-table th,720 .answer-table td {721 padding: var(--space-2) var(--space-3);722 font-size: 0.8rem;723 }724 }725 726 /* Footer */727 .footer {728 margin-top: var(--space-12);729 padding: var(--space-8) 0;730 text-align: center;731 color: var(--text-tertiary);732 font-size: 0.875rem;733 border-top: 1px solid var(--border-light);734 }735 736 /* Responsive */737 @media (max-width: 768px) {738 .main-content {739 padding: var(--space-4) var(--space-3);740 }741 742 .header-content {743 padding: var(--space-3);744 }745 746 .query-controls {747 flex-direction: column;748 align-items: stretch;749 }750 751 .status-area {752 margin-left: 0;753 margin-top: var(--space-3);754 }755 }756 757 /* Utility Classes */758 .hidden {759 display: none !important;760 }761 762 .text-success {763 color: var(--success) !important;764 }765 766 .text-warning {767 color: var(--warning) !important;768 }769 770 .text-error {771 color: var(--error) !important;772 }773 774 /* Upload Controls - Show/Hide */775 .upload-controls.hidden {776 display: none !important;777 }778 779 .upload-controls {780 display: flex !important;781 align-items: center;782 gap: var(--space-3);783 }784 </style>785 786 <!-- Prism for SQL highlighting -->787 <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />788</head>789 790<body>791 <div class="app-container">792 <!-- Header -->793 <header class="header">794 <div class="header-content">795 <div class="brand">796 <div class="brand-icon">797 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">798 <path799 d="M12 2V7M12 7L15 3M5 9.5H9.5M9.5 9.5L6 6M19 14.5H14.5M14.5 14.5L18 18M12 17V22M12 22L9 19"800 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />801 </svg>802 </div>803 <div class="brand-text">804 <h1>QueryLens</h1>805 <p>Transform natural language into SQL, and documents into insight.</p>806 </div>807 </div>808 </div>809 </header>810 811 <!-- Main Content -->812 <main class="main-content">813 <!-- Query Section -->814 <section class="query-section">815 <div class="query-header">816 <h2 class="query-title">Ask a Question</h2>817 </div>818 <div class="query-body">819 <div class="textarea-container">820 <textarea id="question" class="query-textarea"821 placeholder="e.g. Which department has the highest average salary?"></textarea>822 </div>823 824 <div class="query-controls">825 <div class="mode-selector">826 <label for="modeToggle">Mode:</label>827 <select id="modeToggle" class="mode-select">828 <option value="text2sql">Text-to-SQL</option>829 <option value="ocr_qa">OCR Q&A</option>830 </select>831 </div>832 833 <button id="ask" class="btn btn-primary">834 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"835 stroke-width="2">836 <path d="M12 19l7-7 3 3-7 7-3-3z" />837 <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" />838 </svg>839 Ask840 </button>841 842 <button id="recalc" class="btn btn-secondary">843 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"844 stroke-width="2">845 <path d="M1 4v6h6" />846 <path d="M23 20v-6h-6" />847 <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" />848 </svg>849 Re-execute850 </button>851 852 <div id="uploadControls" class="upload-controls hidden">853 <button id="uploadBtn" class="btn btn-secondary">854 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"855 stroke-width="2">856 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />857 <polyline points="17,8 12,3 7,8" />858 <line x1="12" y1="3" x2="12" y2="15" />859 </svg>860 Upload Image861 </button>862 <span id="uploadStatus" class="status-text">No upload</span>863 </div>864 865 <div class="status-area">866 <div id="spinner" class="spinner hidden"></div>867 <span id="spinnerText" class="status-text hidden">Processing...</span>868 <span id="status" class="status-text">Ready</span>869 <span id="time" class="status-text"></span>870 </div>871 </div>872 </div>873 </section>874 875 <!-- Results Grid -->876 <div class="results-grid">877 <!-- Main Results Column -->878 <div class="main-results">879 <!-- Answer Card -->880 <div class="card">881 <div class="card-header">882 <h3 class="card-title">883 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"884 stroke-width="2">885 <path d="M9 11l3 3L22 4" />886 <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />887 </svg>888 Answer889 </h3>890 </div>891 <div class="card-content">892 <div id="answer" class="answer-content">No answer yet.</div>893 </div>894 </div>895 896 <!-- SQL Card -->897 <div class="card" style="margin-top: var(--space-6);">898 <details id="sql-details" open>899 <summary class="card-header" style="cursor: pointer;">900 <h3 class="card-title">901 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"902 stroke-width="2">903 <polyline points="16,18 22,12 16,6" />904 <polyline points="8,6 2,12 8,18" />905 </svg>906 Generated SQL907 </h3>908 </summary>909 <div class="card-content">910 <pre911 class="sql-content"><code id="sql" class="language-sql">-- SQL will appear here after the agent crafts a query --</code></pre>912 </div>913 </details>914 </div>915 </div>916 917 <!-- Agent Panels Column -->918 <div class="agent-panels">919 <div class="panel">920 <details open>921 <summary class="panel-header">922 <span class="panel-title">923 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"924 stroke-width="2" style="margin-right: 0.5rem;">925 <path926 d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />927 </svg>928 Memory Agent929 </span>930 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"931 stroke-width="2">932 <polyline points="6,9 12,15 18,9" />933 </svg>934 </summary>935 <div id="memory" class="panel-content">—</div>936 </details>937 </div>938 939 <div class="panel">940 <details open>941 <summary class="panel-header">942 <span class="panel-title">943 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"944 stroke-width="2" style="margin-right: 0.5rem;">945 <path d="M12 20h9" />946 <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />947 </svg>948 Query Craft Agent949 </span>950 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"951 stroke-width="2">952 <polyline points="6,9 12,15 18,9" />953 </svg>954 </summary>955 <div id="querycraft" class="panel-content">—</div>956 </details>957 </div>958 959 <div class="panel">960 <details open>961 <summary class="panel-header">962 <span class="panel-title">963 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"964 stroke-width="2" style="margin-right: 0.5rem;">965 <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />966 <polyline points="14,2 14,8 20,8" />967 <line x1="16" y1="13" x2="8" y2="13" />968 <line x1="16" y1="17" x2="8" y2="17" />969 <polyline points="10,9 9,9 8,9" />970 </svg>971 Result Presenter Agent972 </span>973 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"974 stroke-width="2">975 <polyline points="6,9 12,15 18,9" />976 </svg>977 </summary>978 <div id="presenter" class="panel-content">—</div>979 </details>980 </div>981 </div>982 </div>983 </main>984 985 <!-- Footer -->986 <footer class="footer">987 <p>QueryLens — Powered by advanced AI agents for intelligent data analysis</p>988 </footer>989 </div>990 991 <script src="/static/app.js"></script>992 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>993 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>994</body>995 996</html>