juxscript 1.1.204 → 1.1.206

package/lib/components/dataframe.js

@@ -217,6 +217,11 @@ export class DataFrameComponent extends BaseComponent {
                     }
                 });
                 const sheetNames = Object.keys(sheets);
+                if (sheetNames.length === 0) {
+                    this._updateStatus('No data found in file', 'error');
+                    this.state.loading = false;
+                    return;
+                }
                 await this._driver.store(file.name, sheets[sheetNames[0]], { source: file.name });
                 if (sheetNames.length > 1) {
                     this._renderMultiSheet(sheets, file.name);
@@ -251,7 +256,6 @@ export class DataFrameComponent extends BaseComponent {
         const wrapper = document.getElementById(this._id);
         if (!wrapper)
             return;
-        // Clean up existing content
         const existingTable = wrapper.querySelector('.jux-table-wrapper');
         if (existingTable)
             existingTable.remove();
@@ -262,11 +266,10 @@ export class DataFrameComponent extends BaseComponent {
             this._sheets.set(name, df);
         });
         const sheetNames = Object.keys(sheets);
-        // Build tabs using the Tabs component
         const tabDefs = sheetNames.map(name => ({
             id: name,
             label: name,
-            content: '' // Content will be added after render
+            content: ''
         }));
         this._tabs = new Tabs(`${this._id}-tabs`, {
             tabs: tabDefs,
@@ -275,15 +278,12 @@ export class DataFrameComponent extends BaseComponent {
         this._tabs.bind('tabChange', (tabId) => {
             this._df = this._sheets.get(tabId) || null;
         });
-        // Create container for tabs
         const tabsContainer = document.createElement('div');
         tabsContainer.className = 'jux-dataframe-tabs';
         wrapper.appendChild(tabsContainer);
         this._tabs.render(tabsContainer);
-        // Now render tables into each tab panel
-        sheetNames.forEach((sheetName, idx) => {
+        sheetNames.forEach((sheetName) => {
             const df = sheets[sheetName];
-            const panelId = `${this._id}-tabs-${sheetName}-panel`;
             const table = new Table(`${this._id}-table-${sheetName}`, {
                 striped: this._tableOptions.striped,
                 hoverable: this._tableOptions.hoverable,
@@ -294,48 +294,13 @@ export class DataFrameComponent extends BaseComponent {
             });
             const columnDefs = df.columns.map(col => ({ key: col, label: col }));
             table.columns(columnDefs).rows(df.toRows());
-            // Add settings button to tab panel
             const settingsBtn = new Button(`${this._id}-settings-${sheetName}`, {
                 label: '⚙️ Import Settings',
                 variant: 'ghost',
                 size: 'small'
             });
             settingsBtn.bind('click', () => this._showReshapeModal());
-            // Use addTabContent to add components
             this._tabs.addTabContent(sheetName, [settingsBtn, table]);
-            if (this._tableOptions.filterable) {
-                // Add filter input above table
-                const panel = document.getElementById(panelId);
-                if (panel) {
-                    const filterContainer = document.createElement('div');
-                    filterContainer.className = 'jux-dataframe-filter';
-                    const input = document.createElement('input');
-                    input.type = 'text';
-                    input.placeholder = `Filter ${sheetName}...`;
-                    input.className = 'jux-input-element jux-dataframe-filter-input';
-                    const iconEl = renderIcon('search');
-                    iconEl.style.width = '16px';
-                    iconEl.style.height = '16px';
-                    const iconWrap = document.createElement('span');
-                    iconWrap.className = 'jux-dataframe-filter-icon';
-                    iconWrap.appendChild(iconEl);
-                    filterContainer.appendChild(iconWrap);
-                    filterContainer.appendChild(input);
-                    input.addEventListener('input', () => {
-                        const text = input.value.toLowerCase();
-                        if (!text) {
-                            table.rows(df.toRows());
-                            return;
-                        }
-                        const filtered = df.filter((row) => Object.values(row).some(v => v !== null && v !== undefined && String(v).toLowerCase().includes(text)));
-                        table.rows(filtered.toRows());
-                    });
-                    const tableWrapper = panel.querySelector('.jux-table-wrapper');
-                    if (tableWrapper) {
-                        panel.insertBefore(filterContainer, tableWrapper);
-                    }
-                }
-            }
         });
         const totalRows = Object.values(sheets).reduce((sum, df) => sum + df.height, 0);
         this._updateStatus(`${sourceName} — ${sheetNames.length} sheets, ${totalRows} total rows`, 'success');
@@ -378,7 +343,6 @@ export class DataFrameComponent extends BaseComponent {
         const emptyColumns = cols.filter(c => {
             if (!c.startsWith('__EMPTY'))
                 return false;
-            // Check if ALL values in this column are null/empty
             return rows.every(row => {
                 const val = row[c];
                 return val === null || val === undefined || String(val).trim() === '';
@@ -411,7 +375,6 @@ export class DataFrameComponent extends BaseComponent {
         }
         else {
             this._updateStatus(`${sourceName} — ${this._df.height} rows × ${this._df.width} cols`, 'success');
-            // Always show settings button if we have raw file data
             if (this._rawFileData) {
                 requestAnimationFrame(() => {
                     const statusEl = document.getElementById(`${this._id}-status`);
@@ -453,27 +416,6 @@ export class DataFrameComponent extends BaseComponent {
         }
         return false;
     }
-    _detectLikelyHeaderRow(df) {
-        const rows = df.toRows();
-        for (let i = 0; i < Math.min(rows.length, 10); i++) {
-            const row = rows[i];
-            const values = Object.values(row);
-            const nonEmpty = values.filter(v => v !== null && v !== undefined && String(v).trim() !== '');
-            if (nonEmpty.length < values.length * 0.5)
-                continue;
-            const nonNumericCount = nonEmpty.filter(v => {
-                const str = String(v).trim();
-                return isNaN(Number(str)) && str !== '';
-            }).length;
-            if (nonNumericCount >= nonEmpty.length * 0.7 && i > 0) {
-                // i is the index in toRows(). Row 0 of the file was already consumed
-                // as the header during the initial parse, so the actual 0-based file
-                // row index is i + 1.
-                return i + 1;
-            }
-        }
-        return 0;
-    }
     /* ═══════════════════════════════════════════════════
      * RESHAPE MODAL
      * ═══════════════════════════════════════════════════ */
@@ -496,24 +438,121 @@ export class DataFrameComponent extends BaseComponent {
             this._reshapeModalRendered = false;
         }
     }
+    _escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    /**
+     * Build a clickable preview table from raw row data.
+     * Each row stores its actual sheet row index via data-sheet-row attribute.
+     * Returns the table HTML string.
+     */
+    _buildClickablePreviewHTML(rawRows, selectedSheetRow) {
+        let html = '<table style="width: 100%; border-collapse: collapse; font-size: 12px;">';
+        for (const { sheetRow, values } of rawRows) {
+            const isHeader = (sheetRow === selectedSheetRow);
+            const isSkipped = (sheetRow < selectedSheetRow);
+            let rowStyle = 'border-bottom: 1px solid hsl(var(--border)); cursor: pointer; transition: background 0.1s;';
+            if (isHeader) {
+                rowStyle += 'background: hsl(142 71% 45% / 0.15); font-weight: 600;';
+            }
+            else if (isSkipped) {
+                rowStyle += 'background: hsl(var(--muted) / 0.4); color: hsl(var(--muted-foreground)); font-style: italic; opacity: 0.7;';
+            }
+            html += `<tr data-sheet-row="${sheetRow}" style="${rowStyle}" onmouseover="this.style.outline='2px solid hsl(142 71% 45% / 0.5)'" onmouseout="this.style.outline=''">`;
+            // Row index cell
+            html += `<td style="padding: 8px 12px; width: 60px; font-weight: 600; color: hsl(var(--muted-foreground)); border-right: 1px solid hsl(var(--border)); text-align: center; user-select: none;">`;
+            if (isHeader) {
+                html += `<span style="color: hsl(142 71% 45%);">▶ ${sheetRow}</span>`;
+            }
+            else {
+                html += `${sheetRow}`;
+            }
+            html += '</td>';
+            // Show first 6 columns
+            const displayCols = values.slice(0, 6);
+            displayCols.forEach(val => {
+                const displayVal = val != null ? String(val).substring(0, 20) : '';
+                const cellStyle = isHeader
+                    ? 'padding: 8px 12px; font-weight: 600; color: hsl(var(--foreground));'
+                    : 'padding: 8px 12px;';
+                html += `<td style="${cellStyle}">${this._escapeHtml(displayVal)}</td>`;
+            });
+            if (values.length > 6) {
+                html += `<td style="padding: 8px 12px; color: hsl(var(--muted-foreground));">…</td>`;
+            }
+            // Status badge
+            html += `<td style="padding: 8px 12px; text-align: right; white-space: nowrap; user-select: none;">`;
+            if (isHeader) {
+                html += '<span style="background: hsl(142 71% 45%); color: white; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600;">HEADER</span>';
+            }
+            else if (isSkipped) {
+                html += '<span style="color: hsl(var(--muted-foreground)); font-size: 10px;">skipped</span>';
+            }
+            else {
+                html += '<span style="color: hsl(var(--muted-foreground)); font-size: 10px;">data</span>';
+            }
+            html += '</td></tr>';
+        }
+        html += '</table>';
+        return html;
+    }
     async _showExcelReshapeModal() {
         if (!this._rawFileData?.file)
             return;
         this._cleanupReshapeModal();
-        // Always detect from a fresh raw parse, not from current _df
-        let suggestedRow = 0;
-        try {
-            const rawSheets = await this._driver.streamFileMultiSheet(this._rawFileData.file, {
-                headerRow: 0,
-                maxSheetSize: 20
-            });
-            const rawSheet = Object.values(rawSheets)[0];
-            if (rawSheet) {
-                suggestedRow = this._detectLikelyHeaderRow(rawSheet);
+        // Read raw cells from the file
+        const XLSX = await import('xlsx');
+        const buffer = await this._rawFileData.file.arrayBuffer();
+        const workbook = XLSX.read(buffer, {
+            type: 'array',
+            sheetRows: 20,
+            dense: false
+        });
+        const sheetName = workbook.SheetNames[0];
+        const worksheet = workbook.Sheets[sheetName];
+        const ref = worksheet['!ref'];
+        if (!ref)
+            return;
+        const range = XLSX.utils.decode_range(ref);
+        const endRow = Math.min(range.e.r, 14); // Show up to 15 rows
+        const startCol = range.s.c;
+        const endCol = range.e.c;
+        const readCellValue = (r, c) => {
+            const addr = XLSX.utils.encode_cell({ r, c });
+            const cell = worksheet[addr];
+            if (!cell)
+                return null;
+            if (cell.w !== undefined)
+                return cell.w;
+            if (cell.v !== undefined)
+                return cell.v;
+            return null;
+        };
+        // Build raw row data with actual sheet row indices
+        const rawRows = [];
+        for (let r = 0; r <= endRow; r++) {
+            const values = [];
+            for (let c = startCol; c <= endCol; c++) {
+                values.push(readCellValue(r, c));
             }
+            rawRows.push({ sheetRow: r, values });
         }
-        catch {
-            suggestedRow = 0;
+        // Auto-detect best header row
+        let selectedSheetRow = 0;
+        for (const { sheetRow, values } of rawRows) {
+            const nonEmpty = values.filter(v => v !== null && v !== undefined && String(v).trim() !== '');
+            if (nonEmpty.length < values.length * 0.5)
+                continue;
+            const nonNumeric = nonEmpty.filter(v => {
+                const str = String(v).trim();
+                return isNaN(Number(str)) && str !== '';
+            }).length;
+            if (nonNumeric >= nonEmpty.length * 0.7) {
+                selectedSheetRow = sheetRow;
+                break;
+            }
         }
         this._reshapeModal = new Modal(`${this._id}-reshape-modal`, {
             title: 'Excel Import Settings',
@@ -523,25 +562,11 @@ export class DataFrameComponent extends BaseComponent {
         });
         const modalContentHTML = `
             <div style="margin-bottom: 1rem;">
-                <label style="display: block; font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">
-                    Header Row (0-based index)
-                </label>
-                <input
-                    type="number"
-                    id="${this._id}-header-row"
-                    class="jux-input-element"
-                    value="${suggestedRow}"
-                    min="0"
-                    max="50"
-                    style="width: 100%;"
-                />
-                <div id="${this._id}-reshape-hint" class="jux-reshape-hint" style="margin-top: 0.5rem; padding: 0.75rem; background: hsl(var(--muted) / 0.5); border-radius: var(--radius); font-size: 0.875rem;">
-                </div>
+                <div id="${this._id}-reshape-hint" style="padding: 0.75rem; background: hsl(var(--muted) / 0.5); border-radius: var(--radius); font-size: 0.875rem;"></div>
+                <input type="hidden" id="${this._id}-header-row" value="${selectedSheetRow}" />
             </div>
-            <div class="jux-reshape-preview-container">
-                <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">
-                    Preview
-                </div>
+            <div>
+                <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">Click a row to select it as the header:</div>
                 <div id="${this._id}-preview" style="font-family: ui-monospace, monospace; font-size: 12px; background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 0; overflow: hidden; max-height: 400px; overflow-y: auto;"></div>
             </div>
         `;
@@ -592,122 +617,73 @@ export class DataFrameComponent extends BaseComponent {
         this._reshapeModal.render(document.body);
         this._reshapeModalRendered = true;
         await new Promise(resolve => requestAnimationFrame(resolve));
-        const headerRowInput = document.getElementById(`${this._id}-header-row`);
         const previewDiv = document.getElementById(`${this._id}-preview`);
         const hintDiv = document.getElementById(`${this._id}-reshape-hint`);
-        const updateHint = (headerRow) => {
+        const hiddenInput = document.getElementById(`${this._id}-header-row`);
+        const updateHint = (row) => {
             if (!hintDiv)
                 return;
-            if (headerRow > 0) {
-                hintDiv.innerHTML = `Row <strong>${headerRow}</strong> will be used as column headers. ` +
-                    `Rows <strong>0–${headerRow - 1}</strong> will be skipped.`;
+            const vals = rawRows.find(r => r.sheetRow === row)?.values ?? [];
+            const headerNames = vals.filter((v) => v != null && String(v).trim() !== '').map((v) => String(v).trim());
+            const preview = headerNames.slice(0, 4).join(', ') + (headerNames.length > 4 ? '…' : '');
+            if (row > 0) {
+                hintDiv.innerHTML = `Row <strong>${row}</strong> selected as header. Columns: <code>${this._escapeHtml(preview)}</code>. Rows 0–${row - 1} will be skipped.`;
             }
             else {
-                hintDiv.innerHTML = `Row <strong>0</strong> (first row) will be used as column headers.`;
+                hintDiv.innerHTML = `Row <strong>0</strong> (first row) selected as header. Columns: <code>${this._escapeHtml(preview)}</code>`;
             }
         };
-        const updatePreview = async () => {
-            const headerRow = parseInt(headerRowInput?.value) || 0;
-            updateHint(headerRow);
-            try {
-                // ALWAYS parse with headerRow=0 to get raw file structure
-                const rawSheets = await this._driver.streamFileMultiSheet(this._rawFileData.file, {
-                    headerRow: 0,
-                    maxSheetSize: Math.max(headerRow + 12, 15)
+        const renderPreview = (selected) => {
+            if (!previewDiv)
+                return;
+            previewDiv.innerHTML = this._buildClickablePreviewHTML(rawRows, selected);
+            // Wire click handlers on each row
+            previewDiv.querySelectorAll('tr[data-sheet-row]').forEach(tr => {
+                tr.addEventListener('click', () => {
+                    const rowIdx = parseInt(tr.dataset.sheetRow);
+                    hiddenInput.value = String(rowIdx);
+                    updateHint(rowIdx);
+                    renderPreview(rowIdx);
                 });
-                const rawSheet = Object.values(rawSheets)[0];
-                if (!rawSheet) {
-                    if (previewDiv)
-                        previewDiv.textContent = 'No data found';
-                    return;
-                }
-                // rawSheet.columns = row 0 values (when parsed with headerRow=0)
-                // rawSheet.toRows() = rows 1+ (data rows when parsed with headerRow=0)
-                const rawCols = rawSheet.columns;
-                const rawRows = rawSheet.toRows();
-                // Build HTML table showing raw file structure
-                let html = '<table style="width: 100%; border-collapse: collapse; font-size: 12px;">';
-                // We need to show rows 0 through headerRow+7 (or so)
-                // Row 0 = rawCols, Row 1+ = rawRows[i-1]
-                const totalRowsToShow = Math.min(headerRow + 8, rawRows.length + 1);
-                for (let fileRow = 0; fileRow < totalRowsToShow; fileRow++) {
-                    const isHeader = (fileRow === headerRow);
-                    const isSkipped = (fileRow < headerRow);
-                    let rowStyle = 'border-bottom: 1px solid hsl(var(--border));';
-                    if (isHeader) {
-                        rowStyle += 'background: hsl(142 71% 45% / 0.15); font-weight: 600;';
-                    }
-                    else if (isSkipped) {
-                        rowStyle += 'background: hsl(var(--muted) / 0.4); color: hsl(var(--muted-foreground)); font-style: italic; opacity: 0.7;';
-                    }
-                    html += `<tr style="${rowStyle}">`;
-                    // Row index cell
-                    html += `<td style="padding: 8px 12px; width: 60px; font-weight: 600; color: hsl(var(--muted-foreground)); border-right: 1px solid hsl(var(--border)); text-align: center;">`;
-                    if (isHeader) {
-                        html += `<span style="color: hsl(142 71% 45%);">▶ ${fileRow}</span>`;
-                    }
-                    else {
-                        html += `${fileRow}`;
-                    }
-                    html += '</td>';
-                    // Get values for this file row
-                    let values;
-                    if (fileRow === 0) {
-                        values = rawCols;
-                    }
-                    else {
-                        values = rawRows[fileRow - 1] ? Object.values(rawRows[fileRow - 1]) : [];
-                    }
-                    // Show first 6 columns
-                    const displayCols = values.slice(0, 6);
-                    displayCols.forEach(val => {
-                        const displayVal = val != null ? String(val).substring(0, 20) : '';
-                        const cellStyle = isHeader
-                            ? 'padding: 8px 12px; font-weight: 600; color: hsl(var(--foreground));'
-                            : 'padding: 8px 12px;';
-                        html += `<td style="${cellStyle}">${this._escapeHtml(displayVal)}</td>`;
-                    });
-                    if (values.length > 6) {
-                        html += `<td style="padding: 8px 12px; color: hsl(var(--muted-foreground));">…</td>`;
-                    }
-                    // Status badge cell
-                    html += `<td style="padding: 8px 12px; text-align: right; white-space: nowrap;">`;
-                    if (isHeader) {
-                        html += '<span style="background: hsl(142 71% 45%); color: white; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600;">HEADER</span>';
-                    }
-                    else if (isSkipped) {
-                        html += '<span style="color: hsl(var(--muted-foreground)); font-size: 10px;">skipped</span>';
-                    }
-                    else {
-                        html += '<span style="color: hsl(var(--muted-foreground)); font-size: 10px;">data</span>';
-                    }
-                    html += '</td>';
-                    html += '</tr>';
-                }
-                html += '</table>';
-                if (previewDiv) {
-                    previewDiv.innerHTML = html;
-                }
-            }
-            catch (err) {
-                if (previewDiv)
-                    previewDiv.textContent = `Error: ${err.message}`;
-            }
+            });
         };
-        if (headerRowInput)
-            headerRowInput.addEventListener('input', updatePreview);
-        updatePreview();
+        updateHint(selectedSheetRow);
+        renderPreview(selectedSheetRow);
         this._reshapeModal.open();
     }
-    _escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
     _showCSVReshapeModal() {
-        if (!this._rawFileData)
+        if (!this._rawFileData?.text)
             return;
         this._cleanupReshapeModal();
+        const text = this._rawFileData.text;
+        const detected = this._driver._detectDelimiter(text);
+        // Parse raw lines
+        const lines = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n').split('\n');
+        const rawRows = [];
+        const maxPreviewRows = Math.min(lines.length, 15);
+        for (let i = 0; i < maxPreviewRows; i++) {
+            if (!lines[i]) {
+                rawRows.push({ sheetRow: i, values: [''] });
+                continue;
+            }
+            const values = this._driver._parseLine(lines[i], detected);
+            rawRows.push({ sheetRow: i, values });
+        }
+        // Auto-detect header row
+        let selectedRow = 0;
+        for (const { sheetRow, values } of rawRows) {
+            const nonEmpty = values.filter((v) => v.trim() !== '');
+            if (nonEmpty.length < values.length * 0.5)
+                continue;
+            const nonNumeric = nonEmpty.filter((v) => {
+                const trimmed = v.trim();
+                return isNaN(Number(trimmed)) && trimmed !== '';
+            }).length;
+            if (nonNumeric >= nonEmpty.length * 0.7) {
+                selectedRow = sheetRow;
+                break;
+            }
+        }
         this._reshapeModal = new Modal(`${this._id}-reshape-modal`, {
             title: 'CSV Import Settings',
             size: 'large',
@@ -725,12 +701,11 @@ export class DataFrameComponent extends BaseComponent {
                 </select>
             </div>
             <div style="margin-bottom: 1rem;">
-                <label style="display: block; font-weight: 600; margin-bottom: 0.5rem;">Header Row (0-based index)</label>
-                <input type="number" id="${this._id}-header-row" class="jux-input-element" value="0" min="0" max="50" style="width: 100%;" />
+                <div id="${this._id}-reshape-hint" style="padding: 0.75rem; background: hsl(var(--muted) / 0.5); border-radius: var(--radius); font-size: 0.875rem;"></div>
+                <input type="hidden" id="${this._id}-header-row" value="${selectedRow}" />
             </div>
-            <div id="${this._id}-reshape-hint" class="jux-reshape-hint" style="margin-top: 0.5rem; margin-bottom: 1rem; padding: 0.75rem; background: hsl(var(--muted) / 0.5); border-radius: var(--radius); font-size: 0.875rem;"></div>
-            <div class="jux-reshape-preview-container">
-                <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">Preview</div>
+            <div>
+                <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">Click a row to select it as the header:</div>
                 <div id="${this._id}-preview" style="font-family: monospace; font-size: 12px; background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 0; overflow: hidden; max-height: 400px; overflow-y: auto;"></div>
             </div>
         `;
@@ -746,12 +721,10 @@ export class DataFrameComponent extends BaseComponent {
                 label: 'Apply & Re-import',
                 variant: 'primary',
                 click: async () => {
-                    if (!this._rawFileData?.text)
-                        return;
                     const delimiterSelect = document.getElementById(`${this._id}-delimiter`);
-                    const headerRowInput = document.getElementById(`${this._id}-header-row`);
+                    const hiddenInput = document.getElementById(`${this._id}-header-row`);
                     const delim = delimiterSelect.value;
-                    const headerRow = parseInt(headerRowInput.value) || 0;
+                    const headerRow = parseInt(hiddenInput.value) || 0;
                     this.state.loading = true;
                     this._updateStatus('Re-parsing with new settings...', 'loading');
                     try {
@@ -775,109 +748,59 @@ export class DataFrameComponent extends BaseComponent {
         this._reshapeModalRendered = true;
         requestAnimationFrame(() => {
             const delimiterSelect = document.getElementById(`${this._id}-delimiter`);
-            const headerRowInput = document.getElementById(`${this._id}-header-row`);
             const previewDiv = document.getElementById(`${this._id}-preview`);
             const hintDiv = document.getElementById(`${this._id}-reshape-hint`);
-            if (this._rawFileData?.text) {
-                const detected = this._driver._detectDelimiter(this._rawFileData.text);
-                if (delimiterSelect)
-                    delimiterSelect.value = detected;
-                const detectedHeaderRow = this._driver._detectHeaderRow(this._rawFileData.text, detected);
-                if (headerRowInput)
-                    headerRowInput.value = String(detectedHeaderRow);
-            }
-            const updateHint = () => {
+            const hiddenInput = document.getElementById(`${this._id}-header-row`);
+            if (delimiterSelect)
+                delimiterSelect.value = detected;
+            const updateHint = (row) => {
                 if (!hintDiv)
                     return;
-                const headerRow = parseInt(headerRowInput?.value) || 0;
-                if (headerRow > 0) {
-                    hintDiv.innerHTML = `Row <strong>${headerRow}</strong> will be used as column headers. ` +
-                        `Rows <strong>0–${headerRow - 1}</strong> will be skipped.`;
+                const vals = rawRows.find(r => r.sheetRow === row)?.values ?? [];
+                const headerNames = vals.filter((v) => v != null && String(v).trim() !== '').map((v) => String(v).trim());
+                const preview = headerNames.slice(0, 4).join(', ') + (headerNames.length > 4 ? '…' : '');
+                if (row > 0) {
+                    hintDiv.innerHTML = `Row <strong>${row}</strong> selected as header. Columns: <code>${this._escapeHtml(preview)}</code>. Rows 0–${row - 1} will be skipped.`;
                 }
                 else {
-                    hintDiv.innerHTML = `Row <strong>0</strong> (first row) will be used as column headers.`;
+                    hintDiv.innerHTML = `Row <strong>0</strong> (first row) selected as header. Columns: <code>${this._escapeHtml(preview)}</code>`;
                 }
             };
-            const updatePreview = () => {
-                if (!this._rawFileData?.text)
-                    return;
+            const reparse = () => {
                 const delim = delimiterSelect?.value || ',';
-                const headerRow = parseInt(headerRowInput?.value) || 0;
-                updateHint();
-                try {
-                    // Parse raw to show all rows
-                    const rawDf = this._driver.parseCSV(this._rawFileData.text, {
-                        delimiter: delim,
-                        headerRow: 0,
-                        hasHeader: true,
-                        maxRows: headerRow + 10
-                    });
-                    const rawCols = rawDf.columns;
-                    const rawRows = rawDf.toRows();
-                    // Build HTML table
-                    let html = '<table style="width: 100%; border-collapse: collapse; font-size: 11px;">';
-                    const totalRows = Math.min(headerRow + 8, rawRows.length + 1);
-                    for (let i = 0; i < totalRows; i++) {
-                        const isHeader = (i === headerRow);
-                        const isSkipped = (i < headerRow);
-                        let rowStyle = 'border-bottom: 1px solid hsl(var(--border));';
-                        if (isHeader) {
-                            rowStyle += 'background: hsl(var(--primary) / 0.15); font-weight: bold;';
-                        }
-                        else if (isSkipped) {
-                            rowStyle += 'background: hsl(var(--muted) / 0.3); color: hsl(var(--muted-foreground)); font-style: italic;';
-                        }
-                        html += `<tr style="${rowStyle}">`;
-                        // Row index
-                        html += `<td style="padding: 6px 8px; width: 50px; color: hsl(var(--muted-foreground)); font-weight: 500;">`;
-                        html += isHeader ? `<strong>→ ${i}</strong>` : `${i}`;
-                        html += '</td>';
-                        // Data
-                        let values;
-                        if (i === 0) {
-                            values = rawCols;
-                        }
-                        else if (i - 1 < rawRows.length) {
-                            values = Object.values(rawRows[i - 1]);
-                        }
-                        else {
-                            values = [];
-                        }
-                        values.slice(0, 6).forEach(val => {
-                            const displayVal = val != null ? String(val).substring(0, 25) : '';
-                            html += `<td style="padding: 6px 8px;">${this._escapeHtml(displayVal)}</td>`;
-                        });
-                        if (values.length > 6) {
-                            html += `<td style="padding: 6px 8px; color: hsl(var(--muted-foreground));">...</td>`;
-                        }
-                        // Status
-                        html += `<td style="padding: 6px 8px; text-align: right; font-size: 10px;">`;
-                        if (isHeader) {
-                            html += '<span style="background: hsl(var(--primary)); color: white; padding: 2px 6px; border-radius: 4px;">HEADER</span>';
-                        }
-                        else if (isSkipped) {
-                            html += '<span style="color: hsl(var(--muted-foreground));">skipped</span>';
-                        }
-                        else {
-                            html += '<span style="color: hsl(var(--success));">data</span>';
-                        }
-                        html += '</td>';
-                        html += '</tr>';
+                rawRows.length = 0;
+                for (let i = 0; i < maxPreviewRows; i++) {
+                    if (!lines[i]) {
+                        rawRows.push({ sheetRow: i, values: [''] });
+                        continue;
                     }
-                    html += '</table>';
-                    if (previewDiv)
-                        previewDiv.innerHTML = html;
-                }
-                catch (err) {
-                    if (previewDiv)
-                        previewDiv.textContent = `Error: ${err.message}`;
+                    const values = this._driver._parseLine(lines[i], delim);
+                    rawRows.push({ sheetRow: i, values });
                 }
             };
-            if (delimiterSelect)
-                delimiterSelect.addEventListener('change', updatePreview);
-            if (headerRowInput)
-                headerRowInput.addEventListener('input', updatePreview);
-            updatePreview();
+            const renderPreview = (selected) => {
+                if (!previewDiv)
+                    return;
+                previewDiv.innerHTML = this._buildClickablePreviewHTML(rawRows, selected);
+                previewDiv.querySelectorAll('tr[data-sheet-row]').forEach(tr => {
+                    tr.addEventListener('click', () => {
+                        const rowIdx = parseInt(tr.dataset.sheetRow);
+                        hiddenInput.value = String(rowIdx);
+                        updateHint(rowIdx);
+                        renderPreview(rowIdx);
+                    });
+                });
+            };
+            if (delimiterSelect) {
+                delimiterSelect.addEventListener('change', () => {
+                    reparse();
+                    const current = parseInt(hiddenInput.value) || 0;
+                    updateHint(current);
+                    renderPreview(current);
+                });
+            }
+            updateHint(selectedRow);
+            renderPreview(selectedRow);
             this._reshapeModal.open();
         });
     }