{CONFIG.app.title}

' + h + ' ' + typeTag + '

' + formattedVal + '

';\n }).join('');\n Modal.open(\"detail-modal\");\n }\n};\n\n// ========== CRUD ==========\nconst CRUD = {\n async insert(tableName) {\n const form = document.getElementById('insert-form'); if (!form) return;\n const formData = new FormData(form);\n const data = {};\n formData.forEach((v, k) => { if (v !== '') data[k] = v; });\n try {\n const response = await fetch('/api/insert/' + encodeURIComponent(tableName), { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) });\n if (response.ok) {\n Toast.show('Row inserted', 'success'); Modal.close('insert-modal');\n Nav.toTable(tableName, false);\n } else { Toast.show(await response.text() || 'Insert failed', 'error'); }\n } catch (e) { Toast.show('Insert failed: ' + e.message, 'error'); }\n },\n \n openEdit(tableName, rowIdx) {\n const table = document.querySelector(\".results-table\"); if (!table) return;\n const headers = Array.from(table.querySelectorAll(\"th\")).map(th => th.innerText.replace(/[🔼🔽]/g, '').trim()).filter(h => h !== 'ACTIONS');\n const row = table.querySelectorAll(\"tbody tr\")[rowIdx]; if (!row) return;\n const cells = Array.from(row.querySelectorAll(\"td:not(.actions-cell)\"));\n const pkCols = JSON.parse(row.dataset.pk || '[]');\n const pkVals = JSON.parse(row.dataset.pkValues || '[]');\n const container = document.getElementById(\"edit-form-fields\"); if (!container) return;\n \n container.innerHTML = headers.map((h, i) => {\n const val = cells[i]?.innerText || '';\n const isPk = pkCols.includes(h);\n return '

' + h + (isPk ? ' PK' : '') + '

';\n }).join('');\n \n document.getElementById('edit-table-name').value = tableName;\n document.getElementById('edit-pk-cols').value = JSON.stringify(pkCols);\n document.getElementById('edit-pk-vals').value = JSON.stringify(pkVals);\n Modal.open('edit-modal');\n },\n \n async submitEdit() {\n const tableName = document.getElementById('edit-table-name').value;\n const pkCols = JSON.parse(document.getElementById('edit-pk-cols').value);\n const pkVals = JSON.parse(document.getElementById('edit-pk-vals').value);\n const form = document.getElementById('edit-form');\n const formData = new FormData(form);\n const data = {};\n formData.forEach((v, k) => { if (!pkCols.includes(k)) data[k] = v; });\n \n try {\n const response = await fetch('/api/update/' + encodeURIComponent(tableName), { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pkCols, pkVals, data }) });\n if (response.ok) {\n Toast.show('Row updated', 'success'); Modal.close('edit-modal');\n Nav.toTable(tableName, false);\n } else { Toast.show(await response.text() || 'Update failed', 'error'); }\n } catch (e) { Toast.show('Update failed: ' + e.message, 'error'); }\n },\n \n async deleteRow(tableName, pkCols, pkVals) {\n if (!confirm('Delete this row?')) return;\n try {\n const response = await fetch('/api/delete/' + encodeURIComponent(tableName), { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pkCols, pkVals }) });\n if (response.ok) { Toast.show('Row deleted', 'success'); Nav.toTable(tableName, false); }\n else { Toast.show(await response.text() || 'Delete failed', 'error'); }\n } catch (e) { Toast.show('Delete failed: ' + e.message, 'error'); }\n }\n};\n\n// ========== Create Table ==========\nconst CreateTable = {\n columnCount: 1,\n addColumn() {\n const container = document.getElementById('create-table-columns');\n const idx = this.columnCount++;\n const row = document.createElement('div');\n row.className = 'column-row'; row.id = 'col-row-' + idx;\n row.innerHTML = ' PK NOT NULL';\n container.appendChild(row);\n },\n removeColumn(idx) { document.getElementById('col-row-' + idx)?.remove(); },\n async submit() {\n const tableName = document.getElementById('new-table-name').value.trim();\n if (!tableName) { Toast.show('Table name required', 'error'); return; }\n const rows = document.getElementById('create-table-columns').querySelectorAll('.column-row');\n const columns = [];\n rows.forEach(row => {\n const name = row.querySelector('input[type=\"text\"]')?.value.trim();\n if (name) columns.push({ name, type: row.querySelector('select')?.value || 'TEXT', pk: row.querySelector('input[name^=\"col_pk_\"]')?.checked || false, notnull: row.querySelector('input[name^=\"col_nn_\"]')?.checked || false });\n });\n if (!columns.length) { Toast.show('At least one column required', 'error'); return; }\n try {\n const response = await fetch('/api/create-table', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ tableName, columns }) });\n if (response.ok) { Toast.show('Table created', 'success'); Modal.close('create-table-modal'); window.location.href = '/?table=' + encodeURIComponent(tableName); }\n else { Toast.show(await response.text() || 'Create failed', 'error'); }\n } catch (e) { Toast.show('Create failed: ' + e.message, 'error'); }\n }\n};\n\n// ========== Global Bindings ==========\nwindow.URLState = URLState;\nwindow.LiveMode = LiveMode;\nwindow.Nav = Nav;\nwindow.Toast = Toast;\nwindow.Modal = Modal;\nwindow.openDetail = (idx) => DetailModal.open(idx);\nwindow.closeModal = (id) => Modal.close(id);\nwindow.openModal = (id) => Modal.open(id);\nwindow.insertRow = (t) => CRUD.insert(t);\nwindow.openEdit = (t, i) => CRUD.openEdit(t, i);\nwindow.submitEdit = () => CRUD.submitEdit();\nwindow.deleteRow = (t, p, v) => CRUD.deleteRow(t, JSON.parse(p), JSON.parse(v));\nwindow.CreateTable = CreateTable;\nwindow.downloadFile = (f) => Exporter.download(f);\nwindow.copyData = (f) => Exporter.copy(f);\n\n// ========== Event Listeners ==========\ndocument.addEventListener('htmx:afterSwap', (evt) => {\n if (evt.detail.target.id === \"results-view\") {\n const table = evt.detail.target.querySelector(\".results-table\");\n if (table) { table.classList.add(\"flashing\"); setTimeout(() => table.classList.remove(\"flashing\"), 1000); }\n LiveMode.restore();\n }\n});\n\nwindow.addEventListener('popstate', (e) => {\n const state = URLState.get();\n if (state.table) {\n if (state.view === 'schema') {\n htmx.ajax('GET', '/partial/schema?table=' + encodeURIComponent(state.table), '#results-view');\n } else {\n let url = '/partial/table?table=' + encodeURIComponent(state.table);\n if (state.sort) url += '&sort=' + encodeURIComponent(state.sort);\n if (state.dir) url += '&dir=' + state.dir;\n htmx.ajax('GET', url, '#results-view');\n }\n Nav.updateSidebar(state.table);\n document.getElementById('sql-input').value = 'SELECT * FROM \"' + state.table + '\" LIMIT 100;';\n }\n LiveMode.restore();\n});\n\nwindow.addEventListener('keydown', e => { if (e.key === 'Escape') Modal.closeAll(); });\ndocument.addEventListener('click', e => { if (e.target.classList.contains('modal-overlay')) Modal.closeAll(); });\n\n// ========== Init on Load ==========\ndocument.addEventListener('DOMContentLoaded', () => {\n const state = URLState.get();\n if (state.table) {\n Nav.updateSidebar(state.table);\n document.getElementById('sql-input').value = 'SELECT * FROM \"' + state.table + '\" LIMIT 100;';\n }\n LiveMode.restore();\n});\n`;\n\n// ============================================================\n// SECTION 7: UI Components\n// ============================================================\n\nconst components = {\n Toast: () =>

,\n\n DetailModal: () => (\n \n ),\n\n EditModal: () => (\n \n ),\n\n InsertModal: (\n { tableName, columns }: { tableName: string; columns: ColumnInfo[] },\n ) => (\n \n ),\n\n CreateTableModal: () => (\n \n ),\n\n Sidebar: (\n { tables, views, activeTable }: {\n tables: TableInfo[];\n views: TableInfo[];\n activeTable: string | null;\n },\n ) => (\n \n ),\n\n MainToolbar: () => (\n \n ),\n\n SqlEditor: ({ defaultQuery }: { defaultQuery: string }) => (\n

\n \n \n \n

\n ),\n\n TableToolbar: (\n { name, rowCount, isView, state }: {\n name: string;\n rowCount: number;\n isView: boolean;\n state: AppState;\n },\n ) => (\n \n

\n {!isView && (\n \n )}\n

\n \n {CONFIG.liveMode.intervals.map((i) => (\n \n ))}\n \n \n {state.live ? \"⏹ Stop\" : \"▶ Live\"}\n \n

\n \n {!isView && (\n \n Truncate\n \n )}\n \n 🗑️\n \n

\n ),\n\n ResultsTable: (\n { columns, rows, state, tableName, columnInfo, isView }: {\n columns: string[];\n rows: unknown[][];\n state: AppState;\n tableName?: string;\n columnInfo?: ColumnInfo[];\n isView?: boolean;\n },\n ) => {\n const pkColumns = columnInfo?.filter((c) => c.pk > 0).map((c) => c.name) ||\n [];\n const hasPk = pkColumns.length > 0;\n\n return (\n \n \n \n {columns.map((h) => (\n \n {h}{\" \"}\n {state.sort === h ? (state.dir === \"asc\" ? \"🔼\" : \"🔽\") : \"\"}\n \n ))}\n {tableName && !isView && }\n \n \n \n {rows.map((r, idx) => {\n const pkValues = pkColumns.map((pkCol) => {\n const colIdx = columns.indexOf(pkCol);\n return colIdx >= 0 ? r[colIdx] : null;\n });\n const pkColsJson = JSON.stringify(pkColumns);\n const pkValsJson = JSON.stringify(pkValues);\n return (\n \n {r.map((c) => (\n \n ))}\n {tableName && !isView && (\n \n )}\n \n );\n })}\n \n

Actions
\n {c?.toString() ?? \"NULL\"}\n	\n \n {hasPk\n ? (\n <>\n \n ✏️\n \n \n 🗑️\n \n \n )\n : (\n \n No PK\n \n )}\n \n

\n );\n },\n\n EmptyState: () => (\n

\n Select a table to begin\n

\n ),\n ErrorMessage: ({ message }: { message: string }) => (\n

\n Error: {message}\n

\n ),\n};\n\n// ============================================================\n// SECTION 8: Views\n// ============================================================\n\nconst views = {\n TableView: (\n { name, columns, rows, state, isView = false, columnInfo }: TableViewProps,\n ) => (\n

\n \n {!isView && columnInfo && (\n \n )}\n \n

\n ),\n\n SchemaView: (\n { name, sql, columns, state }: {\n name: string;\n sql: string | null;\n columns: ColumnInfo[];\n state: AppState;\n },\n ) => (\n

{name} Schema

\n \n

{sql || \"-- Not available\"}

\n \n \n \n \n \n \n \n \n \n \n \n \n {columns.map((col) => (\n \n \n \n \n \n \n \n \n ))}\n \n

CID	Name	Type	Not Null	Default	PK
{col.cid}	\n {col.name}\n	{col.type}	{col.notnull ? \"✓\" : \"\"}	{col.dflt_value?.toString() ?? \"\"}	{col.pk === 1 ? \"🔑\" : \"\"}

\n ),\n};\n\n// ============================================================\n// SECTION 9: Layout\n// ============================================================\n\nconst Layout: FC = ({ children }) => (\n \n \n {CONFIG.app.title}\n \n \n \n \n

Record Details

Edit Record

Insert Row

Create Table

{name} Schema