sqlite-hub 0.8.7 → 0.9.0

package/frontend/js/views/charts.js

@@ -50,10 +50,10 @@ function renderChartsList(state) {
         <div>
           <span class="material-symbols-outlined mb-3 text-4xl text-on-surface-variant/25">query_stats</span>
           <p class="font-headline text-lg font-black uppercase tracking-tight text-on-surface">
-            No Query History
+            No Chartable Queries
           </p>
           <p class="mt-2 max-w-xs text-sm leading-6 text-on-surface-variant/60">
-            Run saved queries in the SQL Editor first. They will appear here automatically.
+            Run SELECT queries in the SQL Editor first. They will appear here automatically.
           </p>
         </div>
       </div>

package/frontend/js/views/data.js

@@ -3,6 +3,10 @@ import { renderRowEditorPanel } from '../components/rowEditorPanel.js';
 import { escapeHtml, formatCellValue, formatNumber, isBlobPreview, truncateMiddle } from '../utils/format.js';
 
 function getSelectedRow(state) {
+    if (state.dataBrowser.selectedRow) {
+        return state.dataBrowser.selectedRow;
+    }
+
     const rowIndex = state.dataBrowser.selectedRowIndex;
 
     if (typeof rowIndex !== 'number') {
@@ -121,7 +125,7 @@ function renderWorkspaceHeader(state) {
                   <button
                     class="standard-button"
                     data-action="navigate"
-                    data-to="/structure"
+                    data-to="/structure/${encodeURIComponent(table.name)}"
                     type="button"
                   >
                   <span class="material-symbols-outlined">account_tree</span>
@@ -341,13 +345,9 @@ function renderTableSurface(state) {
             getRowClass: (_, filteredIndex) => {
                 const rowIndex = filteredRows[filteredIndex]?.index ?? filteredIndex;
 
-                return `${
-                    state.dataBrowser.selectedRowIndex === rowIndex
-                        ? 'bg-surface-bright'
-                        : filteredIndex % 2 === 0
-                          ? 'bg-surface-container-low'
-                          : 'bg-surface-container-lowest'
-                } cursor-pointer transition-colors hover:bg-surface-container-high`;
+                return `data-browser-row ${
+                    filteredIndex % 2 === 0 ? 'data-browser-row--even' : 'data-browser-row--odd'
+                } ${state.dataBrowser.selectedRowIndex === rowIndex ? 'is-selected' : ''} cursor-pointer transition-colors`;
             },
             getRowAttrs: (_, filteredIndex) => {
                 const rowIndex = filteredRows[filteredIndex]?.index ?? filteredIndex;
@@ -434,15 +434,23 @@ function renderTableSurface(state) {
   `;
 }
 
-function renderDataRowEditorPanel(state) {
+export function renderDataRowEditorPanel(state) {
     const table = state.dataBrowser.table;
     const rowIndex = state.dataBrowser.selectedRowIndex;
     const row = getSelectedRow(state);
+    const isIndexedRow = typeof rowIndex === 'number';
 
-    if (!table || !row || typeof rowIndex !== 'number') {
+    if (!table || !row) {
         return '';
     }
 
+    const foreignKeyColumnNames = new Set(
+        (table.foreignKeys ?? []).flatMap(foreignKey =>
+            (foreignKey.mappings ?? []).map(mapping => String(mapping.from ?? '').trim()).filter(Boolean),
+        ),
+    );
+    const getColumnBadges = column => (foreignKeyColumnNames.has(column.name) ? ['FK'] : []);
+
     const identityColumns = table.identityStrategy?.type === 'primaryKey' ? (table.identityStrategy.columns ?? []) : [];
     const editableColumns = (table.columnMeta ?? []).filter(column => {
         if (!column.visible || column.generated) {
@@ -476,10 +484,12 @@ function renderDataRowEditorPanel(state) {
     return renderRowEditorPanel({
         title: table.name,
         sectionLabel: 'Row Editor',
-        subtitle: `row ${rowIndex + 1}`,
+        subtitle: isIndexedRow ? `row ${rowIndex + 1}` : 'targeted row',
         closeAction: 'clear-data-row-selection',
         formName: 'save-data-row',
-        hiddenFields: [{ name: 'rowIndex', value: String(rowIndex) }],
+        hiddenFields: isIndexedRow
+            ? [{ name: 'rowIndex', value: String(rowIndex) }]
+            : [{ name: 'rowIdentity', value: JSON.stringify(row.__identity ?? null) }],
         disabledMessage: state.connections.active?.readOnly
             ? 'The active database is opened read-only, so row editing is disabled.'
             : table.notSafelyUpdatable
@@ -491,19 +501,23 @@ function renderDataRowEditorPanel(state) {
             return {
                 name: column.name,
                 label: column.name,
+                badges: getColumnBadges(column),
                 value: value === null || value === undefined ? '' : String(value),
             };
         }),
         readonlyFields: readonlyColumns.map(column => ({
             name: column.name,
-            label: column.name,
+            label: {
+                label: column.name,
+                badges: getColumnBadges(column),
+            },
             value: formatCellValue(row[column.name]),
         })),
         saveError: state.dataBrowser.saveError,
         saving: state.dataBrowser.saving,
         deleting: state.dataBrowser.deleting,
         deleteAction: 'delete-data-row',
-        deleteRowIndex: rowIndex,
+        deleteRowIndex: isIndexedRow ? rowIndex : null,
         deleteEnabled: Boolean(row.__identity),
         reloadAction: 'reload-data-route',
     });

package/frontend/js/views/editor.js

@@ -1,19 +1,14 @@
-import { renderBottomTabs } from "../components/bottomTabs.js";
-import { renderQueryEditor } from "../components/queryEditor.js";
-import { renderQueryHistoryDetail } from "../components/queryHistoryDetail.js";
-import { renderQueryHistoryPanel } from "../components/queryHistoryPanel.js";
-import { renderRowEditorPanel } from "../components/rowEditorPanel.js";
-import { renderQueryResultsPane } from "../components/queryResults.js";
-import { getCurrentConnection, getQueryMessages, getQueryPerformance } from "../store.js";
-import {
-  escapeHtml,
-  formatCellValue,
-  formatNumber,
-  isBlobPreview,
-} from "../utils/format.js";
+import { renderBottomTabs } from '../components/bottomTabs.js';
+import { renderQueryEditor } from '../components/queryEditor.js';
+import { renderQueryHistoryDetail } from '../components/queryHistoryDetail.js';
+import { renderQueryHistoryPanel } from '../components/queryHistoryPanel.js';
+import { renderRowEditorPanel } from '../components/rowEditorPanel.js';
+import { renderQueryResultsPane } from '../components/queryResults.js';
+import { getCurrentConnection, getQueryMessages, getQueryPerformance } from '../store.js';
+import { escapeHtml, formatCellValue, formatNumber, isBlobPreview } from '../utils/format.js';
 
 function renderMissingDatabase() {
-  return `
+    return `
     <div class="flex flex-1 flex-col items-center justify-center bg-surface-container-lowest px-8 text-center">
       <span class="material-symbols-outlined mb-3 text-5xl text-on-surface-variant/25">database_off</span>
       <p class="font-headline text-xl font-black uppercase tracking-tight text-primary-container">
@@ -27,60 +22,60 @@ function renderMissingDatabase() {
 }
 
 function renderMessagesPane(state) {
-  const items = getQueryMessages(state);
+    const items = getQueryMessages(state);
 
-  return `
+    return `
     <div class="custom-scrollbar h-full overflow-auto bg-surface-container-lowest px-6 py-6">
       <div class="space-y-4">
         ${items
-          .map(
-            (item) => `
+            .map(
+                item => `
               <div class="border border-outline-variant/10 bg-surface-container-low px-4 py-4">
                 <div class="text-[10px] font-mono uppercase tracking-[0.2em] ${
-                  item.tone === "alert" ? "text-error" : "text-primary-container"
+                    item.tone === 'alert' ? 'text-error' : 'text-primary-container'
                 }">
                   ${escapeHtml(item.label)}
                 </div>
                 <div class="mt-2 text-sm text-on-surface">${escapeHtml(item.value)}</div>
               </div>
-            `
-          )
-          .join("")}
+            `,
+            )
+            .join('')}
       </div>
     </div>
   `;
 }
 
 function renderPerformancePane(state) {
-  const metrics = getQueryPerformance(state);
+    const metrics = getQueryPerformance(state);
 
-  return `
+    return `
     <div class="grid flex-1 grid-cols-1 gap-4 bg-surface-container-lowest p-6 md:grid-cols-4">
       <div class="metric-card">
         <span class="text-[10px] font-mono uppercase text-on-surface/40">Exec_Time</span>
         <span class="font-headline text-3xl font-bold text-on-surface">${escapeHtml(
-          String(metrics.timingMs ?? 0)
+            String(metrics.timingMs ?? 0),
         )}ms</span>
         <span class="text-[10px] text-primary-container">Measured backend execution time</span>
       </div>
       <div class="metric-card">
         <span class="text-[10px] font-mono uppercase text-on-surface/40">Statements</span>
         <span class="font-headline text-3xl font-bold text-on-surface">${escapeHtml(
-          formatNumber(metrics.statementCount)
+            formatNumber(metrics.statementCount),
         )}</span>
         <span class="text-[10px] text-on-surface/40">Split and executed by SQLite</span>
       </div>
       <div class="metric-card">
         <span class="text-[10px] font-mono uppercase text-on-surface/40">Rows_Returned</span>
         <span class="font-headline text-3xl font-bold text-on-surface">${escapeHtml(
-          formatNumber(metrics.rowCount)
+            formatNumber(metrics.rowCount),
         )}</span>
         <span class="text-[10px] text-on-surface/40">Visible result set size</span>
       </div>
       <div class="metric-card metric-card--accent">
         <span class="text-[10px] font-mono uppercase text-on-surface/40">Rows_Affected</span>
         <span class="font-headline text-3xl font-bold text-on-surface">${escapeHtml(
-          formatNumber(metrics.affectedRowCount)
+            formatNumber(metrics.affectedRowCount),
         )}</span>
         <span class="text-[10px] text-primary-container">INSERT / UPDATE / DELETE impact</span>
       </div>
@@ -89,144 +84,144 @@ function renderPerformancePane(state) {
 }
 
 function getResultEditingState(state) {
-  const editing = state.editor.result?.editing;
+    const editing = state.editor.result?.editing;
 
-  if (!editing) {
-    return {
-      enabled: false,
-      message: "",
-    };
-  }
+    if (!editing) {
+        return {
+            enabled: false,
+            message: '',
+        };
+    }
 
-  if (state.connections.active?.readOnly) {
-    return {
-      enabled: false,
-      message: "The active database is opened read-only, so query result editing is disabled.",
-    };
-  }
+    if (state.connections.active?.readOnly) {
+        return {
+            enabled: false,
+            message: 'The active database is opened read-only, so query result editing is disabled.',
+        };
+    }
+
+    if (!editing.enabled) {
+        return {
+            enabled: false,
+            message: editing.reason || 'Only direct single-table SELECT results can be edited here.',
+        };
+    }
 
-  if (!editing.enabled) {
     return {
-      enabled: false,
-      message: editing.reason || "Only direct single-table SELECT results can be edited here.",
+        enabled: true,
+        message: `Click a row to edit it in ${editing.tableName}.`,
     };
-  }
-
-  return {
-    enabled: true,
-    message: `Click a row to edit it in ${editing.tableName}.`,
-  };
 }
 
 function getUniqueResultColumns(columns = []) {
-  const uniqueColumns = [];
-  const seen = new Set();
+    const uniqueColumns = [];
+    const seen = new Set();
 
-  columns.forEach((column) => {
-    if (!column?.sourceColumn || seen.has(column.sourceColumn)) {
-      return;
-    }
+    columns.forEach(column => {
+        if (!column?.sourceColumn || seen.has(column.sourceColumn)) {
+            return;
+        }
 
-    seen.add(column.sourceColumn);
-    uniqueColumns.push(column);
-  });
+        seen.add(column.sourceColumn);
+        uniqueColumns.push(column);
+    });
 
-  return uniqueColumns;
+    return uniqueColumns;
 }
 
 function renderEditorRowPanel(state) {
-  const result = state.editor.result;
-  const rowIndex = state.editor.selectedRowIndex;
-  const row = typeof rowIndex === "number" ? result?.rows?.[rowIndex] ?? null : null;
+    const result = state.editor.result;
+    const rowIndex = state.editor.selectedRowIndex;
+    const row = typeof rowIndex === 'number' ? (result?.rows?.[rowIndex] ?? null) : null;
 
-  if (!result || !row || typeof rowIndex !== "number") {
-    return "";
-  }
-
-  const uniqueColumns = getUniqueResultColumns(result.editing?.columns ?? []);
-  const editableColumns = uniqueColumns.filter((column) => {
-    if (column.identity || column.generated || !column.visible) {
-      return false;
+    if (!result || !row || typeof rowIndex !== 'number') {
+        return '';
     }
 
-    const value = row[column.resultName];
-    if (isBlobPreview(value) || (value && typeof value === "object")) {
-      return false;
-    }
+    const uniqueColumns = getUniqueResultColumns(result.editing?.columns ?? []);
+    const editableColumns = uniqueColumns.filter(column => {
+        if (column.identity || column.generated || !column.visible) {
+            return false;
+        }
 
-    return true;
-  });
-  const readonlyColumns = uniqueColumns.filter((column) => {
-    if (!column.visible) {
-      return false;
-    }
+        const value = row[column.resultName];
+        if (isBlobPreview(value) || (value && typeof value === 'object')) {
+            return false;
+        }
 
-    if (column.identity || column.generated) {
-      return true;
-    }
+        return true;
+    });
+    const readonlyColumns = uniqueColumns.filter(column => {
+        if (!column.visible) {
+            return false;
+        }
 
-    const value = row[column.resultName];
-    return isBlobPreview(value) || (value && typeof value === "object");
-  });
-  const editingState = getResultEditingState(state);
+        if (column.identity || column.generated) {
+            return true;
+        }
+
+        const value = row[column.resultName];
+        return isBlobPreview(value) || (value && typeof value === 'object');
+    });
+    const editingState = getResultEditingState(state);
 
-  return renderRowEditorPanel({
-    title: result.editing?.tableName ?? "Query Result",
-    sectionLabel: "Row Editor",
-    subtitle: `query row ${rowIndex + 1}`,
-    closeAction: "clear-editor-row-selection",
-    formName: "save-editor-row",
-    hiddenFields: [{ name: "rowIndex", value: String(rowIndex) }],
-    disabledMessage: editingState.enabled ? "" : editingState.message,
-    editableFields: editableColumns.map((column) => {
-      const value = row[column.resultName];
+    return renderRowEditorPanel({
+        title: result.editing?.tableName ?? 'Query Result',
+        sectionLabel: 'Row Editor',
+        subtitle: `query row ${rowIndex + 1}`,
+        closeAction: 'clear-editor-row-selection',
+        formName: 'save-editor-row',
+        hiddenFields: [{ name: 'rowIndex', value: String(rowIndex) }],
+        disabledMessage: editingState.enabled ? '' : editingState.message,
+        editableFields: editableColumns.map(column => {
+            const value = row[column.resultName];
 
-      return {
-        name: column.sourceColumn,
-        label: column.sourceColumn,
-        value: value === null || value === undefined ? "" : String(value),
-      };
-    }),
-    readonlyFields: readonlyColumns.map((column) => ({
-      name: column.sourceColumn,
-      label: column.sourceColumn,
-      value: formatCellValue(row[column.resultName]),
-    })),
-    saveError: state.editor.saveError,
-    saving: state.editor.saving,
-    deleting: state.editor.deleting,
-    deleteAction: "delete-editor-row",
-    deleteRowIndex: rowIndex,
-    deleteEnabled: editingState.enabled && Boolean(row.__identity),
-  });
+            return {
+                name: column.sourceColumn,
+                label: column.sourceColumn,
+                value: value === null || value === undefined ? '' : String(value),
+            };
+        }),
+        readonlyFields: readonlyColumns.map(column => ({
+            name: column.sourceColumn,
+            label: column.sourceColumn,
+            value: formatCellValue(row[column.resultName]),
+        })),
+        saveError: state.editor.saveError,
+        saving: state.editor.saving,
+        deleting: state.editor.deleting,
+        deleteAction: 'delete-editor-row',
+        deleteRowIndex: rowIndex,
+        deleteEnabled: editingState.enabled && Boolean(row.__identity),
+    });
 }
 
 function renderResultsSurface(state, isResultsRoute) {
-  const activeTab = state.editor.activeTab;
-  const counts = {
-    resultRows: state.editor.result?.rows?.length ?? 0,
-    messages: getQueryMessages(state).length,
-    statementCount: state.editor.result?.statementCount ?? 0,
-  };
+    const activeTab = state.editor.activeTab;
+    const counts = {
+        resultRows: state.editor.result?.rows?.length ?? 0,
+        messages: getQueryMessages(state).length,
+        statementCount: state.editor.result?.statementCount ?? 0,
+    };
 
-  let content = renderMessagesPane(state);
+    let content = renderMessagesPane(state);
 
-  if (activeTab === "performance") {
-    content = renderPerformancePane(state);
-  } else if (activeTab === "results") {
-    const editingState = getResultEditingState(state);
+    if (activeTab === 'performance') {
+        content = renderPerformancePane(state);
+    } else if (activeTab === 'results') {
+        const editingState = getResultEditingState(state);
 
-    content = state.connections.active
-      ? renderQueryResultsPane(state.editor.result, {
-          selectedRowIndex: state.editor.selectedRowIndex,
-          editable: editingState.enabled,
-          sortColumn: state.editor.resultSortColumn,
-          sortDirection: state.editor.resultSortDirection,
-        })
-      : renderMissingDatabase();
-  }
+        content = state.connections.active
+            ? renderQueryResultsPane(state.editor.result, {
+                  selectedRowIndex: state.editor.selectedRowIndex,
+                  editable: editingState.enabled,
+                  sortColumn: state.editor.resultSortColumn,
+                  sortDirection: state.editor.resultSortDirection,
+              })
+            : renderMissingDatabase();
+    }
 
-  return `
+    return `
     <div class="flex h-full min-h-0 flex-col border-t border-outline-variant/10 bg-surface-container-lowest">
       ${renderBottomTabs(state.editor.activeTab, counts)}
       <div class="min-h-0 flex-1">${content}</div>
@@ -235,26 +230,26 @@ function renderResultsSurface(state, isResultsRoute) {
 }
 
 export function renderEditorView(state, { isResultsRoute = false } = {}) {
-  const connection = getCurrentConnection(state);
-  const editorSectionClass = state.editor.editorPanelVisible ? "min-h-[27.5%]" : "flex-none";
-  const resultsSectionClass = "flex-1";
+    const connection = getCurrentConnection(state);
+    const editorSectionClass = state.editor.editorPanelVisible ? 'min-h-[27.5%] max-h-[60%]' : 'flex-none';
+    const resultsSectionClass = 'flex-1';
 
-  return {
-    main: `
+    return {
+        main: `
       <section class="view-surface flex h-full min-h-0 flex-col overflow-hidden xl:flex-row">
         <div class="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
           <section class="${editorSectionClass} flex min-h-0 flex-col ${
-            isResultsRoute ? "border-b-4 border-background" : ""
+              isResultsRoute ? 'border-b-4 border-background' : ''
           }">
             ${renderQueryEditor({
-              query: state.editor.sqlText,
-              executing: state.editor.executing,
-              exporting: state.editor.exportLoading,
-              historyLoading: state.editor.historyLoading,
-              historyTotal: state.editor.historyTotal,
-              editorVisible: state.editor.editorPanelVisible,
-              historyVisible: state.editor.historyPanelVisible,
-              title: connection?.label ?? "SQLite Query Workspace",
+                query: state.editor.sqlText,
+                executing: state.editor.executing,
+                exporting: state.editor.exportLoading,
+                historyLoading: state.editor.historyLoading,
+                historyTotal: state.editor.historyTotal,
+                editorVisible: state.editor.editorPanelVisible,
+                historyVisible: state.editor.historyPanelVisible,
+                title: connection?.label ?? 'SQLite Query Workspace',
             })}
           </section>
           <section class="${resultsSectionClass} flex min-h-0 min-w-0 flex-col overflow-hidden">
@@ -262,33 +257,33 @@ export function renderEditorView(state, { isResultsRoute = false } = {}) {
           </section>
         </div>
         ${
-          state.editor.historyPanelVisible
-            ? renderQueryHistoryPanel({
-                items: state.editor.history,
-                loading: state.editor.historyLoading,
-                loadingMore: state.editor.historyLoadingMore,
-                error: state.editor.historyError,
-                activeTab: state.editor.historyTab,
-                search: state.editor.historySearchInput,
-                total: state.editor.historyTotal,
-                hasMore: state.editor.historyHasMore,
-                activeHistoryId: state.editor.historyActiveId,
-                selectedHistoryId: state.editor.historySelectedId,
-              })
-            : ""
+            state.editor.historyPanelVisible
+                ? renderQueryHistoryPanel({
+                      items: state.editor.history,
+                      loading: state.editor.historyLoading,
+                      loadingMore: state.editor.historyLoadingMore,
+                      error: state.editor.historyError,
+                      activeTab: state.editor.historyTab,
+                      search: state.editor.historySearchInput,
+                      total: state.editor.historyTotal,
+                      hasMore: state.editor.historyHasMore,
+                      activeHistoryId: state.editor.historyActiveId,
+                      selectedHistoryId: state.editor.historySelectedId,
+                  })
+                : ''
         }
       </section>
     `,
-    panel:
-      isResultsRoute && state.editor.selectedRowIndex !== null
-        ? renderEditorRowPanel(state)
-        : state.editor.historySelectedId
-          ? renderQueryHistoryDetail({
-              item: state.editor.historyDetail,
-              runs: state.editor.historyRuns,
-              loading: state.editor.historyDetailLoading,
-              error: state.editor.historyDetailError,
-            })
-          : "",
-  };
+        panel:
+            isResultsRoute && state.editor.selectedRowIndex !== null
+                ? renderEditorRowPanel(state)
+                : state.editor.historySelectedId
+                  ? renderQueryHistoryDetail({
+                        item: state.editor.historyDetail,
+                        runs: state.editor.historyRuns,
+                        loading: state.editor.historyDetailLoading,
+                        error: state.editor.historyDetailError,
+                    })
+                  : '',
+    };
 }