sqlite-hub 0.4.0 → 0.6.0

package/frontend/js/store.js

@@ -1,5 +1,14 @@
 import * as api from "./api.js";
 import { formatCellValue, inferStatusTone, truncateMiddle } from "./utils/format.js";
+import {
+  addTableDesignerColumn,
+  createTableDesignerDraftFromCsvImport,
+  createNewTableDesignerDraft,
+  hydrateTableDesignerDraft,
+  removeTableDesignerColumn,
+  updateTableDesignerColumnField,
+  updateTableDesignerDraftField,
+} from "./utils/tableDesigner.js";
 
 const listeners = new Set();
 const DEFAULT_SETTINGS = {
@@ -8,12 +17,17 @@ const DEFAULT_SETTINGS = {
   csvDelimiter: ",",
 };
 const DATA_PAGE_SIZES = [25, 50, 100];
+const QUERY_HISTORY_PAGE_SIZE = 30;
+const QUERY_HISTORY_RUN_LIMIT = 8;
 const MISSING_DATABASE_ERROR = {
   code: "ACTIVE_DATABASE_REQUIRED",
   message: "No active SQLite database selected.",
 };
 
 let routeLoadVersion = 0;
+let queryHistoryLoadVersion = 0;
+let queryHistoryDetailLoadVersion = 0;
+let queryHistorySearchTimer = null;
 
 const state = {
   ready: false,
@@ -48,6 +62,8 @@ const state = {
     deleting: false,
     page: 1,
     pageSize: 50,
+    sortColumn: null,
+    sortDirection: null,
     searchQuery: "",
     searchColumn: "",
     selectedRowIndex: null,
@@ -59,10 +75,25 @@ const state = {
     sqlText: "",
     history: [],
     historyLoading: false,
+    historyLoadingMore: false,
     historyError: null,
+    historyTab: "recent",
+    historySearchInput: "",
+    historySearch: "",
+    historyPageSize: QUERY_HISTORY_PAGE_SIZE,
+    historyTotal: 0,
+    historyHasMore: false,
+    historyActiveId: null,
+    historySelectedId: null,
+    historyDetail: null,
+    historyRuns: [],
+    historyDetailLoading: false,
+    historyDetailError: null,
     activeTab: "messages",
     executing: false,
     result: null,
+    resultSortColumn: null,
+    resultSortDirection: null,
     error: null,
     exportLoading: false,
     selectedRowIndex: null,
@@ -70,6 +101,19 @@ const state = {
     deleting: false,
     saveError: null,
   },
+  tableDesigner: {
+    tables: [],
+    selectedTableName: null,
+    draft: null,
+    pendingImportedDraft: null,
+    loading: false,
+    detailLoading: false,
+    saving: false,
+    searchQuery: "",
+    supportedTypes: [],
+    error: null,
+    saveError: null,
+  },
   structure: {
     data: null,
     selectedName: null,
@@ -102,8 +146,35 @@ function normalizeError(error) {
   };
 }
 
+function setActiveQueryHistoryItem(historyId) {
+  const normalizedId = Number(historyId);
+
+  if (!Number.isInteger(normalizedId) || normalizedId < 1) {
+    return null;
+  }
+
+  state.editor.historyActiveId = normalizedId;
+  return normalizedId;
+}
+
+function clearQueryHistoryDetailState() {
+  queryHistoryDetailLoadVersion += 1;
+  state.editor.historySelectedId = null;
+  state.editor.historyDetail = null;
+  state.editor.historyRuns = [];
+  state.editor.historyDetailLoading = false;
+  state.editor.historyDetailError = null;
+}
+
 function requiresActiveDatabase(routeName) {
-  return ["overview", "data", "editor", "editorResults", "structure"].includes(routeName);
+  return [
+    "overview",
+    "data",
+    "editor",
+    "editorResults",
+    "structure",
+    "tableDesigner",
+  ].includes(routeName);
 }
 
 function normalizeDataPageSize(value, fallback = 50) {
@@ -116,6 +187,18 @@ function normalizeDataPageSize(value, fallback = 50) {
   return fallback;
 }
 
+function normalizeSortDirection(value) {
+  return String(value ?? "").trim().toLowerCase() === "desc" ? "desc" : "asc";
+}
+
+function getNextSortDirection(currentColumn, currentDirection, nextColumn) {
+  if (currentColumn === nextColumn) {
+    return normalizeSortDirection(currentDirection) === "asc" ? "desc" : "asc";
+  }
+
+  return "asc";
+}
+
 function canEditQueryResult(snapshot = state) {
   return Boolean(snapshot.editor.result?.editing?.enabled) && !snapshot.connections.active?.readOnly;
 }
@@ -125,6 +208,73 @@ function resetDataBrowserSearch() {
   state.dataBrowser.searchColumn = "";
 }
 
+function resetDataBrowserSort() {
+  state.dataBrowser.sortColumn = null;
+  state.dataBrowser.sortDirection = null;
+}
+
+function resetEditorResultSort() {
+  state.editor.resultSortColumn = null;
+  state.editor.resultSortDirection = null;
+}
+
+function getSortableEditorValue(value) {
+  if (value === null || value === undefined) {
+    return { rank: 0, value: "" };
+  }
+
+  if (typeof value === "number") {
+    return { rank: 1, value };
+  }
+
+  if (typeof value === "boolean") {
+    return { rank: 2, value: value ? 1 : 0 };
+  }
+
+  if (typeof value === "string") {
+    return { rank: 3, value };
+  }
+
+  if (value && typeof value === "object" && value.__type === "blob") {
+    return {
+      rank: 4,
+      value: `${value.sizeBytes ?? 0}:${value.hexPreview ?? ""}`,
+    };
+  }
+
+  return { rank: 5, value: JSON.stringify(value) };
+}
+
+function compareEditorValues(left, right) {
+  const leftValue = getSortableEditorValue(left);
+  const rightValue = getSortableEditorValue(right);
+
+  if (leftValue.rank !== rightValue.rank) {
+    return leftValue.rank - rightValue.rank;
+  }
+
+  if (typeof leftValue.value === "number" && typeof rightValue.value === "number") {
+    return leftValue.value - rightValue.value;
+  }
+
+  return String(leftValue.value).localeCompare(String(rightValue.value), undefined, {
+    numeric: true,
+    sensitivity: "base",
+  });
+}
+
+function sortEditorResultRows(rows, sortColumn, sortDirection) {
+  if (!sortColumn) {
+    return [...(rows ?? [])];
+  }
+
+  const directionMultiplier = normalizeSortDirection(sortDirection) === "desc" ? -1 : 1;
+
+  return [...(rows ?? [])].sort(
+    (left, right) => compareEditorValues(left?.[sortColumn], right?.[sortColumn]) * directionMultiplier
+  );
+}
+
 function buildUpdatedEditorResultRow(existingRow, updatedSourceRow, editableColumns) {
   const nextRow = {
     ...existingRow,
@@ -149,6 +299,22 @@ function getCurrentStructureEntry(snapshot = state) {
   return entries.find((entry) => entry.name === snapshot.structure.selectedName) ?? null;
 }
 
+function getTableDesignerContext(snapshot = state) {
+  return {
+    catalogTables: snapshot.tableDesigner.tables ?? [],
+    supportedTypes: snapshot.tableDesigner.supportedTypes ?? [],
+    readOnly: Boolean(snapshot.connections.active?.readOnly),
+  };
+}
+
+function decorateTableDesignerDraft(draft, snapshot = state) {
+  if (!draft) {
+    return null;
+  }
+
+  return hydrateTableDesignerDraft(draft, getTableDesignerContext(snapshot));
+}
+
 function buildDeleteRowPreview(fields = []) {
   return fields
     .filter((field) => field && field.label)
@@ -175,10 +341,70 @@ function buildFallbackDeleteRowPreview(row) {
   );
 }
 
+function normalizeQueryHistoryTab(value) {
+  return ["recent", "saved", "failed"].includes(value) ? value : "recent";
+}
+
+function findQueryHistoryItem(historyId, snapshot = state) {
+  return snapshot.editor.history.find((entry) => String(entry.id) === String(historyId)) ?? null;
+}
+
+function clearQueryHistorySearchTimer() {
+  if (!queryHistorySearchTimer) {
+    return;
+  }
+
+  window.clearTimeout(queryHistorySearchTimer);
+  queryHistorySearchTimer = null;
+}
+
+function resetQueryHistoryState({ preserveSearch = true } = {}) {
+  state.editor.history = [];
+  state.editor.historyLoading = false;
+  state.editor.historyLoadingMore = false;
+  state.editor.historyError = null;
+  state.editor.historyTotal = 0;
+  state.editor.historyHasMore = false;
+  state.editor.historyActiveId = null;
+  clearQueryHistoryDetailState();
+
+  if (!preserveSearch) {
+    clearQueryHistorySearchTimer();
+    state.editor.historySearchInput = "";
+    state.editor.historySearch = "";
+  }
+}
+
+function syncQueryHistoryItem(updatedItem) {
+  if (!updatedItem) {
+    return;
+  }
+
+  state.editor.history = state.editor.history.map((entry) =>
+    entry.id === updatedItem.id ? updatedItem : entry
+  );
+
+  if (state.editor.historyDetail?.id === updatedItem.id) {
+    state.editor.historyDetail = updatedItem;
+  }
+}
+
+function resolveQueryHistorySql(historyId) {
+  const historyIdAsString = String(historyId);
+
+  if (String(state.editor.historyDetail?.id ?? "") === historyIdAsString) {
+    return state.editor.historyDetail.rawSql;
+  }
+
+  return findQueryHistoryItem(historyId)?.rawSql ?? null;
+}
+
 function clearRouteSlices() {
   state.overview.error = null;
   state.dataBrowser.error = null;
   state.dataBrowser.saveError = null;
+  state.tableDesigner.error = null;
+  state.tableDesigner.saveError = null;
   state.structure.error = null;
 }
 
@@ -195,6 +421,7 @@ function setMissingDatabaseState() {
   state.dataBrowser.selectedTable = null;
   state.dataBrowser.table = null;
   state.dataBrowser.page = 1;
+  resetDataBrowserSort();
   resetDataBrowserSearch();
   state.dataBrowser.selectedRowIndex = null;
   state.dataBrowser.exportLoading = false;
@@ -206,6 +433,20 @@ function setMissingDatabaseState() {
   state.structure.data = null;
   state.structure.detail = null;
   state.structure.error = error;
+
+  state.tableDesigner.loading = false;
+  state.tableDesigner.detailLoading = false;
+  state.tableDesigner.tables = [];
+  state.tableDesigner.selectedTableName = null;
+  state.tableDesigner.draft = null;
+  state.tableDesigner.pendingImportedDraft = null;
+  state.tableDesigner.saving = false;
+  state.tableDesigner.searchQuery = "";
+  state.tableDesigner.supportedTypes = [];
+  state.tableDesigner.error = error;
+  state.tableDesigner.saveError = null;
+
+  resetQueryHistoryState({ preserveSearch: false });
 }
 
 function syncRouteContext() {
@@ -213,6 +454,7 @@ function syncRouteContext() {
 
   if (route.name === "editorResults") {
     state.editor.activeTab = "results";
+    clearQueryHistoryDetailState();
   } else if (route.name === "editor" && state.editor.activeTab === "results") {
     state.editor.activeTab = "messages";
   }
@@ -240,6 +482,10 @@ function syncRouteContext() {
     state.structure.detail = null;
     state.structure.selectedName = null;
   }
+
+  if (route.name !== "tableDesigner") {
+    state.tableDesigner.saveError = null;
+  }
 }
 
 async function refreshConnectionsState() {
@@ -284,19 +530,131 @@ async function refreshSettingsState() {
   }
 }
 
-async function refreshSqlHistoryState() {
-  state.editor.historyLoading = true;
-  state.editor.historyError = null;
+async function loadQueryHistoryDetail(historyId) {
+  const normalizedId = String(historyId ?? "").trim();
+  const numericId = Number(normalizedId);
+  const requestVersion = ++queryHistoryDetailLoadVersion;
+
+  if (!normalizedId) {
+    clearQueryHistoryDetailState();
+    emitChange();
+    return;
+  }
+
+  state.editor.historyDetailLoading = true;
+  state.editor.historyDetailError = null;
   emitChange();
 
   try {
-    const response = await api.getSqlHistory();
-    state.editor.history = response.data ?? [];
+    const [detailResponse, runsResponse] = await Promise.all([
+      api.getQueryHistoryItem(normalizedId),
+      api.getQueryHistoryRuns(normalizedId, { limit: QUERY_HISTORY_RUN_LIMIT }),
+    ]);
+
+    if (
+      requestVersion !== queryHistoryDetailLoadVersion ||
+      state.editor.historySelectedId !== numericId
+    ) {
+      return;
+    }
+
+    state.editor.historyDetail = detailResponse.data ?? null;
+    state.editor.historyRuns = runsResponse.data ?? [];
+    state.editor.historyDetailError = null;
+    if (detailResponse.data) {
+      syncQueryHistoryItem(detailResponse.data);
+    }
   } catch (error) {
-    state.editor.historyError = normalizeError(error);
+    if (
+      requestVersion !== queryHistoryDetailLoadVersion ||
+      state.editor.historySelectedId !== numericId
+    ) {
+      return;
+    }
+
+    state.editor.historyDetail = null;
+    state.editor.historyRuns = [];
+    state.editor.historyDetailError = normalizeError(error);
   } finally {
-    state.editor.historyLoading = false;
+    if (requestVersion === queryHistoryDetailLoadVersion) {
+      state.editor.historyDetailLoading = false;
+      emitChange();
+    }
+  }
+}
+
+async function refreshQueryHistoryState({ append = false } = {}) {
+  if (!state.connections.active) {
+    resetQueryHistoryState({ preserveSearch: false });
     emitChange();
+    return;
+  }
+
+  const requestVersion = ++queryHistoryLoadVersion;
+  const nextOffset = append ? state.editor.history.length : 0;
+
+  if (append) {
+    state.editor.historyLoadingMore = true;
+  } else {
+    state.editor.historyLoading = true;
+    state.editor.historyError = null;
+  }
+  emitChange();
+
+  try {
+    const response = await api.getQueryHistory({
+      tab: state.editor.historyTab,
+      limit: state.editor.historyPageSize,
+      offset: nextOffset,
+      search: state.editor.historySearch,
+    });
+
+    if (requestVersion !== queryHistoryLoadVersion) {
+      return;
+    }
+
+    const payload = response.data ?? {};
+    const items = payload.items ?? [];
+    state.editor.history = append ? [...state.editor.history, ...items] : items;
+    state.editor.historyTotal = payload.total ?? state.editor.history.length;
+    state.editor.historyHasMore = Boolean(payload.hasMore);
+    state.editor.historyError = null;
+
+    if (
+      state.editor.historyActiveId &&
+      !state.editor.history.some((entry) => entry.id === state.editor.historyActiveId)
+    ) {
+      state.editor.historyActiveId = null;
+    }
+
+    if (
+      state.editor.historySelectedId &&
+      !state.editor.history.some((entry) => entry.id === state.editor.historySelectedId)
+    ) {
+      clearQueryHistoryDetailState();
+    }
+
+    if (
+      state.editor.historySelectedId &&
+      !state.editor.historyDetailLoading &&
+      state.editor.historyDetail?.id !== state.editor.historySelectedId
+    ) {
+      await loadQueryHistoryDetail(state.editor.historySelectedId);
+    } else {
+      emitChange();
+    }
+  } catch (error) {
+    if (requestVersion !== queryHistoryLoadVersion) {
+      return;
+    }
+
+    state.editor.historyError = normalizeError(error);
+  } finally {
+    if (requestVersion === queryHistoryLoadVersion) {
+      state.editor.historyLoading = false;
+      state.editor.historyLoadingMore = false;
+      emitChange();
+    }
   }
 }
 
@@ -333,6 +691,8 @@ async function loadDataTable(version) {
   const tableName = state.dataBrowser.selectedTable;
   const pageSize = normalizeDataPageSize(state.dataBrowser.pageSize, 50);
   const page = Math.max(1, Number(state.dataBrowser.page) || 1);
+  const sortColumn = state.dataBrowser.sortColumn;
+  const sortDirection = normalizeSortDirection(state.dataBrowser.sortDirection);
 
   if (!tableName) {
     state.dataBrowser.table = null;
@@ -348,6 +708,8 @@ async function loadDataTable(version) {
     const response = await api.getDataTable(tableName, {
       limit: pageSize,
       offset: (page - 1) * pageSize,
+      sortColumn,
+      sortDirection,
     });
 
     if (version !== routeLoadVersion) {
@@ -357,6 +719,8 @@ async function loadDataTable(version) {
     state.dataBrowser.table = response.data ?? null;
     state.dataBrowser.pageSize = pageSize;
     state.dataBrowser.page = response.data?.page ?? page;
+    state.dataBrowser.sortColumn = response.data?.sort?.column ?? null;
+    state.dataBrowser.sortDirection = response.data?.sort?.direction ?? null;
     state.dataBrowser.searchColumn = response.data?.columns?.includes(state.dataBrowser.searchColumn)
       ? state.dataBrowser.searchColumn
       : (response.data?.columns?.[0] ?? "");
@@ -397,6 +761,7 @@ async function loadData(version, route) {
     if (requestedTableName && tables.some((table) => table.name === requestedTableName)) {
       if (requestedTableName !== state.dataBrowser.selectedTable) {
         state.dataBrowser.page = 1;
+        resetDataBrowserSort();
         resetDataBrowserSearch();
       }
       state.dataBrowser.selectedTable = requestedTableName;
@@ -406,6 +771,7 @@ async function loadData(version, route) {
     ) {
       state.dataBrowser.selectedTable = tables[0]?.name ?? null;
       state.dataBrowser.page = 1;
+      resetDataBrowserSort();
       resetDataBrowserSearch();
     }
 
@@ -521,6 +887,103 @@ async function loadStructure(version) {
   }
 }
 
+async function loadTableDesignerDetail(version, tableName) {
+  if (!tableName) {
+    state.tableDesigner.draft = null;
+    return;
+  }
+
+  state.tableDesigner.detailLoading = true;
+  state.tableDesigner.saveError = null;
+  emitChange();
+
+  try {
+    const response = await api.getTableDesignerTable(tableName);
+
+    if (version !== routeLoadVersion) {
+      return;
+    }
+
+    state.tableDesigner.selectedTableName = tableName;
+    state.tableDesigner.draft = decorateTableDesignerDraft(response.data?.draft ?? null);
+  } catch (error) {
+    if (version !== routeLoadVersion) {
+      return;
+    }
+
+    state.tableDesigner.error = normalizeError(error);
+    state.tableDesigner.draft = null;
+  } finally {
+    if (version === routeLoadVersion) {
+      state.tableDesigner.detailLoading = false;
+      emitChange();
+    }
+  }
+}
+
+async function loadTableDesigner(version, route) {
+  state.tableDesigner.loading = true;
+  state.tableDesigner.error = null;
+  emitChange();
+
+  try {
+    const response = await api.getTableDesignerOverview();
+
+    if (version !== routeLoadVersion) {
+      return;
+    }
+
+    state.tableDesigner.tables = response.data?.tables ?? [];
+    state.tableDesigner.supportedTypes = response.data?.supportedTypes ?? [];
+
+    if (route.params?.isNew) {
+      const importedDraft = state.tableDesigner.pendingImportedDraft;
+      state.tableDesigner.selectedTableName = null;
+      state.tableDesigner.detailLoading = false;
+      state.tableDesigner.pendingImportedDraft = null;
+      state.tableDesigner.draft = decorateTableDesignerDraft(
+        importedDraft ?? createNewTableDesignerDraft()
+      );
+      return;
+    }
+
+    const requestedTableName = route.params?.tableName ?? null;
+    const tableName =
+      requestedTableName &&
+      state.tableDesigner.tables.some((table) => table.name === requestedTableName)
+        ? requestedTableName
+        : state.tableDesigner.selectedTableName &&
+            state.tableDesigner.tables.some(
+              (table) => table.name === state.tableDesigner.selectedTableName
+            )
+          ? state.tableDesigner.selectedTableName
+          : state.tableDesigner.tables[0]?.name ?? null;
+
+    if (!tableName) {
+      state.tableDesigner.selectedTableName = null;
+      state.tableDesigner.detailLoading = false;
+      state.tableDesigner.draft = null;
+      return;
+    }
+
+    await loadTableDesignerDetail(version, tableName);
+  } catch (error) {
+    if (version !== routeLoadVersion) {
+      return;
+    }
+
+    state.tableDesigner.tables = [];
+    state.tableDesigner.selectedTableName = null;
+    state.tableDesigner.draft = null;
+    state.tableDesigner.error = normalizeError(error);
+  } finally {
+    if (version === routeLoadVersion) {
+      state.tableDesigner.loading = false;
+      emitChange();
+    }
+  }
+}
+
 function invalidateDatabaseCaches() {
   state.overview.data = null;
   state.dataBrowser.tables = [];
@@ -532,6 +995,15 @@ function invalidateDatabaseCaches() {
   state.dataBrowser.exportLoading = false;
   state.dataBrowser.error = null;
   state.dataBrowser.saveError = null;
+  state.tableDesigner.tables = [];
+  state.tableDesigner.selectedTableName = null;
+  state.tableDesigner.draft = null;
+  state.tableDesigner.pendingImportedDraft = null;
+  state.tableDesigner.saving = false;
+  state.tableDesigner.searchQuery = "";
+  state.tableDesigner.supportedTypes = [];
+  state.tableDesigner.error = null;
+  state.tableDesigner.saveError = null;
   state.structure.data = null;
   state.structure.detail = null;
 }
@@ -561,11 +1033,14 @@ async function loadRouteData(route) {
       return;
     case "editor":
     case "editorResults":
-      await refreshSqlHistoryState();
+      await refreshQueryHistoryState();
       return;
     case "structure":
       await loadStructure(version);
       return;
+    case "tableDesigner":
+      await loadTableDesigner(version, route);
+      return;
     case "settings":
       await refreshSettingsState();
       return;
@@ -624,7 +1099,7 @@ export async function initializeApp() {
   await Promise.all([
     refreshConnectionsState(),
     refreshSettingsState(),
-    refreshSqlHistoryState(),
+    refreshQueryHistoryState(),
   ]);
 
   state.ready = true;
@@ -882,6 +1357,17 @@ export async function createActiveConnectionBackup() {
   }
 }
 
+export async function openOverviewInFinder() {
+  try {
+    const response = await api.openOverviewInFinder();
+    pushToast(response.message || "Database file revealed in Finder.", "muted");
+    return true;
+  } catch (error) {
+    pushToast(normalizeError(error)?.message || "Finder could not be opened.", "alert");
+    return false;
+  }
+}
+
 export function setCurrentQuery(query) {
   const nextQuery = String(query ?? "");
   const previousLineCount = Math.max(1, String(state.editor.sqlText || "").split("\n").length);
@@ -896,12 +1382,22 @@ export function setCurrentQuery(query) {
 
 export function clearCurrentQuery() {
   state.editor.sqlText = "";
+  state.editor.result = null;
+  resetEditorResultSort();
   state.editor.error = null;
+  state.editor.selectedRowIndex = null;
+  state.editor.saving = false;
+  state.editor.deleting = false;
+  state.editor.saveError = null;
+  if (state.editor.activeTab === "results" || state.editor.activeTab === "performance") {
+    state.editor.activeTab = "messages";
+  }
   emitChange();
 }
 
 export function clearEditorResults() {
   state.editor.result = null;
+  resetEditorResultSort();
   state.editor.error = null;
   state.editor.selectedRowIndex = null;
   state.editor.saving = false;
@@ -928,10 +1424,11 @@ export async function executeCurrentQuery() {
   try {
     const response = await api.executeSql(state.editor.sqlText);
     state.editor.result = response.data;
+    resetEditorResultSort();
     state.editor.error = null;
     state.editor.activeTab = "results";
     invalidateDatabaseCaches();
-    await refreshSqlHistoryState();
+    await refreshQueryHistoryState();
     pushToast(
       response.message || `Executed ${response.data.statementCount} SQL statement(s).`,
       "success"
@@ -940,7 +1437,7 @@ export async function executeCurrentQuery() {
   } catch (error) {
     state.editor.error = normalizeError(error);
     state.editor.activeTab = "messages";
-    emitChange();
+    await refreshQueryHistoryState();
     return false;
   } finally {
     state.editor.executing = false;
@@ -948,14 +1445,14 @@ export async function executeCurrentQuery() {
   }
 }
 
-export async function clearSqlHistoryStateAndData() {
+export async function clearQueryHistoryStateAndData() {
   state.editor.historyLoading = true;
   emitChange();
 
   try {
-    const response = await api.clearSqlHistory();
-    state.editor.history = response.data ?? [];
-    pushToast(response.message || "SQL history cleared.", "muted");
+    const response = await api.clearQueryHistory();
+    resetQueryHistoryState({ preserveSearch: false });
+    pushToast(response.message || "Query history cleared.", "muted");
     return true;
   } catch (error) {
     state.editor.historyError = normalizeError(error);
@@ -967,15 +1464,156 @@ export async function clearSqlHistoryStateAndData() {
   }
 }
 
-export function loadQueryFromHistory(id) {
-  const historyEntry = state.editor.history.find((entry) => entry.id === id);
+export async function setQueryHistoryTab(tab) {
+  const normalizedTab = normalizeQueryHistoryTab(String(tab ?? "").trim().toLowerCase());
+
+  if (state.editor.historyTab === normalizedTab) {
+    return;
+  }
+
+  state.editor.historyTab = normalizedTab;
+  state.editor.historyActiveId = null;
+  clearQueryHistoryDetailState();
+  emitChange();
+  await refreshQueryHistoryState();
+}
+
+export function setQueryHistorySearchInput(query) {
+  state.editor.historySearchInput = String(query ?? "");
+  emitChange();
+
+  clearQueryHistorySearchTimer();
+  queryHistorySearchTimer = window.setTimeout(() => {
+    state.editor.historySearch = state.editor.historySearchInput.trim();
+    state.editor.historyActiveId = null;
+    clearQueryHistoryDetailState();
+    emitChange();
+    void refreshQueryHistoryState();
+  }, 180);
+}
+
+export async function loadMoreQueryHistory() {
+  if (
+    state.editor.historyLoading ||
+    state.editor.historyLoadingMore ||
+    !state.editor.historyHasMore
+  ) {
+    return;
+  }
+
+  await refreshQueryHistoryState({ append: true });
+}
+
+export async function selectQueryHistoryItem(historyId) {
+  const normalizedId = setActiveQueryHistoryItem(historyId);
+
+  if (normalizedId === null) {
+    return;
+  }
+
+  state.editor.historySelectedId = normalizedId;
+  state.editor.historyDetail = null;
+  state.editor.historyRuns = [];
+  state.editor.historyDetailError = null;
+  emitChange();
+  await loadQueryHistoryDetail(normalizedId);
+}
 
-  if (!historyEntry) {
+export function clearQueryHistorySelection() {
+  if (state.editor.historySelectedId === null && !state.editor.historyDetail) {
     return;
   }
 
-  state.editor.sqlText = historyEntry.sql;
+  clearQueryHistoryDetailState();
+  emitChange();
+}
+
+export function openQueryHistoryInEditor(historyId, options = {}) {
+  const rawSql = resolveQueryHistorySql(historyId);
+
+  if (!rawSql) {
+    pushToast("The selected history query could not be loaded.", "alert");
+    return false;
+  }
+
+  setActiveQueryHistoryItem(historyId);
+  clearQueryHistoryDetailState();
+  state.editor.sqlText = options.append
+    ? [state.editor.sqlText.trim(), rawSql].filter(Boolean).join("\n\n")
+    : rawSql;
   emitChange();
+  return true;
+}
+
+export async function runQueryHistoryItem(historyId) {
+  const loaded = openQueryHistoryInEditor(historyId);
+
+  if (!loaded) {
+    return false;
+  }
+
+  return executeCurrentQuery();
+}
+
+export async function toggleQueryHistorySavedState(historyId, nextValue) {
+  try {
+    const response = await api.toggleQueryHistorySaved(historyId, nextValue);
+    syncQueryHistoryItem(response.data);
+    pushToast(response.message || "Query save state updated.", "muted");
+    await refreshQueryHistoryState();
+    return true;
+  } catch (error) {
+    state.editor.historyDetailError = normalizeError(error);
+    emitChange();
+    return false;
+  }
+}
+
+export async function saveQueryHistoryTitle(historyId, title) {
+  try {
+    const response = await api.renameQueryHistoryItem(historyId, title);
+    syncQueryHistoryItem(response.data);
+    pushToast(response.message || "Query title updated.", "success");
+    await loadQueryHistoryDetail(historyId);
+    return true;
+  } catch (error) {
+    state.editor.historyDetailError = normalizeError(error);
+    emitChange();
+    return false;
+  }
+}
+
+export async function saveQueryHistoryNotes(historyId, notes) {
+  try {
+    const response = await api.updateQueryHistoryNotes(historyId, notes);
+    syncQueryHistoryItem(response.data);
+    pushToast(response.message || "Query notes updated.", "success");
+    await loadQueryHistoryDetail(historyId);
+    return true;
+  } catch (error) {
+    state.editor.historyDetailError = normalizeError(error);
+    emitChange();
+    return false;
+  }
+}
+
+export async function deleteQueryHistoryStateItem(historyId) {
+  try {
+    const response = await api.deleteQueryHistoryItem(historyId);
+    if (state.editor.historyActiveId === Number(historyId)) {
+      state.editor.historyActiveId = null;
+    }
+    if (state.editor.historySelectedId === Number(historyId)) {
+      clearQueryHistorySelection();
+    }
+    pushToast(response.message || "Query history item deleted.", "muted");
+    await refreshQueryHistoryState();
+    return true;
+  } catch (error) {
+    state.editor.historyDetailError = normalizeError(error);
+    emitChange();
+    return false;
+  }
 }
 
 export async function selectStructureEntry(name) {
@@ -984,6 +1622,125 @@ export async function selectStructureEntry(name) {
   await loadStructureDetail(++routeLoadVersion);
 }
 
+export function setTableDesignerSearchQuery(query) {
+  state.tableDesigner.searchQuery = String(query ?? "");
+  emitChange();
+}
+
+export function updateCurrentTableDesignerField(field, value) {
+  if (!state.tableDesigner.draft) {
+    return;
+  }
+
+  state.tableDesigner.draft = updateTableDesignerDraftField(
+    state.tableDesigner.draft,
+    field,
+    value,
+    getTableDesignerContext()
+  );
+  state.tableDesigner.saveError = null;
+  emitChange();
+}
+
+export function updateCurrentTableDesignerColumnField(columnId, field, value) {
+  if (!state.tableDesigner.draft) {
+    return;
+  }
+
+  state.tableDesigner.draft = updateTableDesignerColumnField(
+    state.tableDesigner.draft,
+    columnId,
+    field,
+    value,
+    getTableDesignerContext()
+  );
+  state.tableDesigner.saveError = null;
+  emitChange();
+}
+
+export function addCurrentTableDesignerColumn() {
+  if (!state.tableDesigner.draft) {
+    return null;
+  }
+
+  const previousColumnIds = new Set(state.tableDesigner.draft.columns.map((column) => column.id));
+  state.tableDesigner.draft = addTableDesignerColumn(
+    state.tableDesigner.draft,
+    getTableDesignerContext()
+  );
+  state.tableDesigner.saveError = null;
+  emitChange();
+
+  const nextColumn = state.tableDesigner.draft.columns.find(
+    (column) => !previousColumnIds.has(column.id)
+  );
+
+  return nextColumn?.id ?? null;
+}
+
+export function queueTableDesignerCsvImport(fileName, csvText) {
+  try {
+    const imported = createTableDesignerDraftFromCsvImport(
+      { fileName, csvText },
+      getTableDesignerContext()
+    );
+
+    state.tableDesigner.pendingImportedDraft = imported.draft;
+    state.tableDesigner.selectedTableName = null;
+    state.tableDesigner.saveError = null;
+    state.tableDesigner.error = null;
+    emitChange();
+    return imported;
+  } catch (error) {
+    pushToast(error?.message || "CSV import failed.", "alert");
+    return null;
+  }
+}
+
+export function removeCurrentTableDesignerColumn(columnId) {
+  if (!state.tableDesigner.draft) {
+    return;
+  }
+
+  state.tableDesigner.draft = removeTableDesignerColumn(
+    state.tableDesigner.draft,
+    columnId,
+    getTableDesignerContext()
+  );
+  state.tableDesigner.saveError = null;
+  emitChange();
+}
+
+export async function saveCurrentTableDesignerDraft() {
+  if (!state.tableDesigner.draft) {
+    return null;
+  }
+
+  state.tableDesigner.saving = true;
+  state.tableDesigner.saveError = null;
+  emitChange();
+
+  try {
+    const response = await api.saveTableDesignerDraft({
+      draft: state.tableDesigner.draft,
+    });
+
+    state.tableDesigner.tables = response.data?.tables ?? state.tableDesigner.tables;
+    state.tableDesigner.selectedTableName =
+      response.data?.savedTableName ?? state.tableDesigner.selectedTableName;
+    state.tableDesigner.draft = decorateTableDesignerDraft(response.data?.draft ?? null);
+    pushToast(response.message || "Table schema saved.", "success");
+    return response.data?.savedTableName ?? null;
+  } catch (error) {
+    state.tableDesigner.saveError = normalizeError(error);
+    emitChange();
+    return null;
+  } finally {
+    state.tableDesigner.saving = false;
+    emitChange();
+  }
+}
+
 export function selectDataRow(index) {
   const numericIndex = Number(index);
 
@@ -1063,6 +1820,32 @@ export async function setDataPage(page) {
   }
 }
 
+export async function sortDataTableByColumn(columnName) {
+  const normalizedColumn = String(columnName ?? "").trim();
+
+  if (
+    !normalizedColumn ||
+    !state.dataBrowser.table?.columns?.includes(normalizedColumn)
+  ) {
+    return;
+  }
+
+  state.dataBrowser.sortDirection = getNextSortDirection(
+    state.dataBrowser.sortColumn,
+    state.dataBrowser.sortDirection,
+    normalizedColumn
+  );
+  state.dataBrowser.sortColumn = normalizedColumn;
+  state.dataBrowser.page = 1;
+  state.dataBrowser.selectedRowIndex = null;
+  state.dataBrowser.saveError = null;
+  emitChange();
+
+  if (state.route.name === "data" && state.dataBrowser.selectedTable) {
+    await loadDataTable(++routeLoadVersion);
+  }
+}
+
 export async function setDataPageSize(pageSize) {
   const normalizedPageSize = normalizeDataPageSize(pageSize, state.dataBrowser.pageSize);
 
@@ -1190,7 +1973,11 @@ export async function submitEditorRowUpdate(rowIndex, values) {
     );
     state.editor.result = {
       ...result,
-      rows: nextRows,
+      rows: sortEditorResultRows(
+        nextRows,
+        state.editor.resultSortColumn,
+        state.editor.resultSortDirection
+      ),
     };
     state.editor.selectedRowIndex = null;
     invalidateDatabaseCaches();
@@ -1304,7 +2091,10 @@ export async function exportCurrentDataTableCsv() {
   emitChange();
 
   try {
-    await api.downloadTableCsv(tableName);
+    await api.downloadTableCsv(tableName, {
+      sortColumn: state.dataBrowser.sortColumn,
+      sortDirection: state.dataBrowser.sortDirection,
+    });
     pushToast(`CSV export started for ${tableName}.`, "success");
     return true;
   } catch (error) {
@@ -1317,10 +2107,39 @@ export async function exportCurrentDataTableCsv() {
   }
 }
 
+export function sortEditorResultsByColumn(columnName) {
+  const normalizedColumn = String(columnName ?? "").trim();
+  const result = state.editor.result;
+
+  if (!normalizedColumn || !result?.columns?.includes(normalizedColumn)) {
+    return;
+  }
+
+  const nextDirection = getNextSortDirection(
+    state.editor.resultSortColumn,
+    state.editor.resultSortDirection,
+    normalizedColumn
+  );
+
+  state.editor.result = {
+    ...result,
+    rows: sortEditorResultRows(result.rows ?? [], normalizedColumn, nextDirection),
+  };
+  state.editor.resultSortColumn = normalizedColumn;
+  state.editor.resultSortDirection = nextDirection;
+  state.editor.selectedRowIndex = null;
+  state.editor.saveError = null;
+  emitChange();
+}
+
 export async function refreshCurrentRoute() {
   await loadRouteData(state.route);
 }
 
+export function showToast(message, tone = "muted") {
+  pushToast(message, tone);
+}
+
 export function getCurrentConnection(snapshot = state) {
   return snapshot.connections.active;
 }