sqlite-hub 0.5.0 → 0.7.0

package/frontend/js/store.js

@@ -1,5 +1,23 @@
 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";
+import {
+  analyzeQueryChartResult,
+  buildDefaultQueryChartName,
+  buildQueryChartResultColumns,
+  buildSuggestedChartConfig,
+  resolveUniqueQueryChartName,
+  suggestQueryChartType,
+  validateQueryChartConfig,
+} from "./lib/queryCharts.js";
 
 const listeners = new Set();
 const DEFAULT_SETTINGS = {
@@ -10,6 +28,7 @@ const DEFAULT_SETTINGS = {
 const DATA_PAGE_SIZES = [25, 50, 100];
 const QUERY_HISTORY_PAGE_SIZE = 30;
 const QUERY_HISTORY_RUN_LIMIT = 8;
+const CHART_HEIGHT_PRESETS = new Set(["small", "medium", "large"]);
 const MISSING_DATABASE_ERROR = {
   code: "ACTIVE_DATABASE_REQUIRED",
   message: "No active SQLite database selected.",
@@ -19,6 +38,8 @@ let routeLoadVersion = 0;
 let queryHistoryLoadVersion = 0;
 let queryHistoryDetailLoadVersion = 0;
 let queryHistorySearchTimer = null;
+let chartsLoadVersion = 0;
+let chartsDetailLoadVersion = 0;
 
 const state = {
   ready: false,
@@ -46,6 +67,7 @@ const state = {
   dataBrowser: {
     tables: [],
     selectedTable: null,
+    tablesVisible: true,
     table: null,
     loading: false,
     tableLoading: false,
@@ -64,7 +86,9 @@ const state = {
   },
   editor: {
     sqlText: "",
+    editorPanelVisible: true,
     history: [],
+    historyPanelVisible: true,
     historyLoading: false,
     historyLoadingMore: false,
     historyError: null,
@@ -92,6 +116,34 @@ const state = {
     deleting: false,
     saveError: null,
   },
+  charts: {
+    queries: [],
+    loading: false,
+    error: null,
+    selectedHistoryId: null,
+    chartHeightPreset: "medium",
+    sqlExpanded: false,
+    resultsVisible: true,
+    detail: null,
+    detailLoading: false,
+    detailError: null,
+    result: null,
+    resultLoading: false,
+    resultError: 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,
@@ -145,7 +197,15 @@ function clearQueryHistoryDetailState() {
 }
 
 function requiresActiveDatabase(routeName) {
-  return ["overview", "data", "editor", "editorResults", "structure"].includes(routeName);
+  return [
+    "overview",
+    "data",
+    "editor",
+    "editorResults",
+    "charts",
+    "structure",
+    "tableDesigner",
+  ].includes(routeName);
 }
 
 function normalizeDataPageSize(value, fallback = 50) {
@@ -270,6 +330,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)
@@ -330,6 +406,52 @@ function resetQueryHistoryState({ preserveSearch = true } = {}) {
   }
 }
 
+function resetChartsState() {
+  chartsLoadVersion += 1;
+  chartsDetailLoadVersion += 1;
+  state.charts.queries = [];
+  state.charts.loading = false;
+  state.charts.error = null;
+  state.charts.selectedHistoryId = null;
+  state.charts.chartHeightPreset = "medium";
+  state.charts.sqlExpanded = false;
+  state.charts.resultsVisible = true;
+  state.charts.detail = null;
+  state.charts.detailLoading = false;
+  state.charts.detailError = null;
+  state.charts.result = null;
+  state.charts.resultLoading = false;
+  state.charts.resultError = null;
+}
+
+function normalizeChartsHeightPreset(value) {
+  const normalizedValue = String(value ?? "")
+    .trim()
+    .toLowerCase();
+
+  return CHART_HEIGHT_PRESETS.has(normalizedValue) ? normalizedValue : "medium";
+}
+
+function mergeQueryHistoryItemWithChartSummary(updatedItem, fallbackItem = null) {
+  if (!updatedItem) {
+    return updatedItem;
+  }
+
+  return {
+    ...(fallbackItem ?? {}),
+    ...updatedItem,
+    chartCount:
+      updatedItem.chartCount !== undefined
+        ? Number(updatedItem.chartCount ?? 0)
+        : Number(fallbackItem?.chartCount ?? 0),
+    chartTypes: Array.isArray(updatedItem.chartTypes)
+      ? [...updatedItem.chartTypes]
+      : Array.isArray(fallbackItem?.chartTypes)
+        ? [...fallbackItem.chartTypes]
+        : [],
+  };
+}
+
 function syncQueryHistoryItem(updatedItem) {
   if (!updatedItem) {
     return;
@@ -342,6 +464,61 @@ function syncQueryHistoryItem(updatedItem) {
   if (state.editor.historyDetail?.id === updatedItem.id) {
     state.editor.historyDetail = updatedItem;
   }
+
+  const existingChartsEntry =
+    state.charts.queries.find((entry) => entry.id === updatedItem.id) ??
+    (state.charts.detail?.item?.id === updatedItem.id ? state.charts.detail.item : null);
+  const mergedChartsItem = mergeQueryHistoryItemWithChartSummary(updatedItem, existingChartsEntry);
+
+  state.charts.queries = state.charts.queries.map((entry) =>
+    entry.id === updatedItem.id ? mergedChartsItem : entry
+  );
+
+  if (state.charts.detail?.item?.id === updatedItem.id) {
+    state.charts.detail = {
+      ...state.charts.detail,
+      item: mergeQueryHistoryItemWithChartSummary(updatedItem, state.charts.detail.item),
+    };
+  }
+}
+
+function syncChartsQuerySummaryForHistory(historyId) {
+  const numericId = Number(historyId);
+
+  if (!Number.isInteger(numericId) || numericId < 1 || state.charts.detail?.item?.id !== numericId) {
+    return;
+  }
+
+  const charts = state.charts.detail?.charts ?? [];
+  const chartTypes = [...new Set(
+    charts
+      .map((chart) =>
+        String(chart?.chartType ?? "")
+          .trim()
+          .toLowerCase()
+      )
+      .filter(Boolean)
+  )];
+  const chartCount = charts.length;
+
+  state.charts.queries = state.charts.queries.map((entry) =>
+    entry.id === numericId
+      ? {
+          ...entry,
+          chartCount,
+          chartTypes,
+        }
+      : entry
+  );
+
+  state.charts.detail = {
+    ...state.charts.detail,
+    item: {
+      ...state.charts.detail.item,
+      chartCount,
+      chartTypes,
+    },
+  };
 }
 
 function resolveQueryHistorySql(historyId) {
@@ -351,6 +528,10 @@ function resolveQueryHistorySql(historyId) {
     return state.editor.historyDetail.rawSql;
   }
 
+  if (String(state.charts.detail?.item?.id ?? "") === historyIdAsString) {
+    return state.charts.detail.item.rawSql;
+  }
+
   return findQueryHistoryItem(historyId)?.rawSql ?? null;
 }
 
@@ -358,6 +539,11 @@ function clearRouteSlices() {
   state.overview.error = null;
   state.dataBrowser.error = null;
   state.dataBrowser.saveError = null;
+  state.charts.error = null;
+  state.charts.detailError = null;
+  state.charts.resultError = null;
+  state.tableDesigner.error = null;
+  state.tableDesigner.saveError = null;
   state.structure.error = null;
 }
 
@@ -387,6 +573,21 @@ function setMissingDatabaseState() {
   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;
+
+  resetChartsState();
+  state.charts.error = error;
+
   resetQueryHistoryState({ preserveSearch: false });
 }
 
@@ -423,6 +624,10 @@ function syncRouteContext() {
     state.structure.detail = null;
     state.structure.selectedName = null;
   }
+
+  if (route.name !== "tableDesigner") {
+    state.tableDesigner.saveError = null;
+  }
 }
 
 async function refreshConnectionsState() {
@@ -595,6 +800,114 @@ async function refreshQueryHistoryState({ append = false } = {}) {
   }
 }
 
+async function loadChartsDetail(historyId) {
+  const numericId = Number(historyId);
+  const requestVersion = ++chartsDetailLoadVersion;
+
+  if (!Number.isInteger(numericId) || numericId < 1) {
+    state.charts.selectedHistoryId = null;
+    state.charts.sqlExpanded = false;
+    state.charts.resultsVisible = true;
+    state.charts.detail = null;
+    state.charts.detailLoading = false;
+    state.charts.detailError = null;
+    state.charts.result = null;
+    state.charts.resultLoading = false;
+    state.charts.resultError = null;
+    emitChange();
+    return;
+  }
+
+  state.charts.selectedHistoryId = numericId;
+  state.charts.sqlExpanded = false;
+  state.charts.resultsVisible = true;
+  state.charts.detail = null;
+  state.charts.detailLoading = true;
+  state.charts.detailError = null;
+  state.charts.result = null;
+  state.charts.resultLoading = true;
+  state.charts.resultError = null;
+  emitChange();
+
+  const [detailResponse, resultResponse] = await Promise.allSettled([
+    api.getChartsQueryHistoryDetail(numericId),
+    api.executeChartsQueryHistory(numericId),
+  ]);
+
+  if (
+    requestVersion !== chartsDetailLoadVersion ||
+    state.charts.selectedHistoryId !== numericId
+  ) {
+    return;
+  }
+
+  if (detailResponse.status === "fulfilled") {
+    state.charts.detail = detailResponse.value.data ?? null;
+    state.charts.detailError = null;
+    if (detailResponse.value.data?.item) {
+      syncQueryHistoryItem(detailResponse.value.data.item);
+      syncChartsQuerySummaryForHistory(detailResponse.value.data.item.id);
+    }
+  } else {
+    state.charts.detail = null;
+    state.charts.detailError = normalizeError(detailResponse.reason);
+  }
+
+  if (resultResponse.status === "fulfilled") {
+    state.charts.result = resultResponse.value.data ?? null;
+    state.charts.resultError = null;
+  } else {
+    state.charts.result = null;
+    state.charts.resultError = normalizeError(resultResponse.reason);
+  }
+
+  if (requestVersion === chartsDetailLoadVersion) {
+    state.charts.detailLoading = false;
+    state.charts.resultLoading = false;
+    emitChange();
+  }
+}
+
+async function loadCharts(version, route) {
+  state.charts.loading = true;
+  state.charts.error = null;
+  emitChange();
+
+  try {
+    const response = await api.getChartsQueryHistory();
+
+    if (version !== routeLoadVersion) {
+      return;
+    }
+
+    state.charts.queries = response.data ?? [];
+    state.charts.error = null;
+  } catch (error) {
+    if (version !== routeLoadVersion) {
+      return;
+    }
+
+    state.charts.queries = [];
+    state.charts.error = normalizeError(error);
+  } finally {
+    if (version === routeLoadVersion) {
+      state.charts.loading = false;
+      emitChange();
+    }
+  }
+
+  if (version !== routeLoadVersion) {
+    return;
+  }
+
+  const requestedHistoryId = Number(route.params?.historyId ?? null);
+  const canLoadRequestedHistory =
+    Number.isInteger(requestedHistoryId) &&
+    state.charts.queries.some((item) => item.id === requestedHistoryId);
+
+  await loadChartsDetail(canLoadRequestedHistory ? requestedHistoryId : null);
+}
+
 async function loadOverview(version) {
   state.overview.loading = true;
   state.overview.error = null;
@@ -824,6 +1137,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 = [];
@@ -835,6 +1245,16 @@ 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;
+  resetChartsState();
   state.structure.data = null;
   state.structure.detail = null;
 }
@@ -862,6 +1282,9 @@ async function loadRouteData(route) {
     case "data":
       await loadData(version, route);
       return;
+    case "charts":
+      await loadCharts(version, route);
+      return;
     case "editor":
     case "editorResults":
       await refreshQueryHistoryState();
@@ -869,6 +1292,9 @@ async function loadRouteData(route) {
     case "structure":
       await loadStructure(version);
       return;
+    case "tableDesigner":
+      await loadTableDesigner(version, route);
+      return;
     case "settings":
       await refreshSettingsState();
       return;
@@ -911,6 +1337,94 @@ function closeModalInternal() {
   emitChange();
 }
 
+function getChartsResultAnalysis(snapshot = state) {
+  return snapshot.charts.result ? analyzeQueryChartResult(snapshot.charts.result) : null;
+}
+
+function buildQueryChartDraft(mode, chart = null) {
+  const queryItem = state.charts.detail?.item ?? null;
+  const analysis = getChartsResultAnalysis();
+
+  if (!queryItem || !analysis) {
+    return null;
+  }
+
+  const existingCharts = state.charts.detail?.charts ?? [];
+
+  if (mode === "edit" && chart) {
+    return {
+      mode,
+      chartId: chart.id,
+      queryHistoryId: chart.queryHistoryId,
+      chartType: chart.chartType,
+      name: chart.name,
+      nameTouched: true,
+      config: structuredClone(chart.config),
+      tableVisible: chart.tableVisible,
+      resultColumns: buildQueryChartResultColumns(analysis),
+    };
+  }
+
+  const chartType = suggestQueryChartType(analysis);
+  const name = resolveUniqueQueryChartName(
+    buildDefaultQueryChartName(chartType, queryItem.displayTitle),
+    existingCharts
+  );
+
+  return {
+    mode: "create",
+    chartId: null,
+    queryHistoryId: queryItem.id,
+    chartType,
+    name,
+    nameTouched: false,
+    config: buildSuggestedChartConfig(chartType, analysis),
+    tableVisible: true,
+    resultColumns: buildQueryChartResultColumns(analysis),
+  };
+}
+
+function upsertChartDetailItem(updatedChart) {
+  if (!updatedChart || state.charts.detail?.item?.id !== updatedChart.queryHistoryId) {
+    return;
+  }
+
+  const nextCharts = [...(state.charts.detail?.charts ?? [])];
+  const existingIndex = nextCharts.findIndex((chart) => chart.id === updatedChart.id);
+
+  if (existingIndex >= 0) {
+    nextCharts.splice(existingIndex, 1, updatedChart);
+  } else {
+    nextCharts.push(updatedChart);
+  }
+
+  nextCharts.sort((left, right) => {
+    const leftTime = Date.parse(left.createdAt ?? "") || 0;
+    const rightTime = Date.parse(right.createdAt ?? "") || 0;
+    return leftTime - rightTime || left.id - right.id;
+  });
+
+  state.charts.detail = {
+    ...state.charts.detail,
+    charts: nextCharts,
+  };
+
+  syncChartsQuerySummaryForHistory(updatedChart.queryHistoryId);
+}
+
+function removeChartDetailItem(chartId) {
+  if (!state.charts.detail) {
+    return;
+  }
+
+  state.charts.detail = {
+    ...state.charts.detail,
+    charts: (state.charts.detail.charts ?? []).filter((chart) => chart.id !== Number(chartId)),
+  };
+
+  syncChartsQuerySummaryForHistory(state.charts.detail.item?.id);
+}
+
 export function getState() {
   return clone(state);
 }
@@ -1033,10 +1547,147 @@ export function openDeleteEditorRowModal(rowIndex) {
   emitChange();
 }
 
+export function openCreateQueryChartModal() {
+  const draft = buildQueryChartDraft("create");
+
+  if (!state.charts.detail?.item || !state.charts.result) {
+    pushToast("The selected query has no chartable result set yet.", "alert");
+    return;
+  }
+
+  if (!draft) {
+    pushToast("The chart editor could not be opened for this query.", "alert");
+    return;
+  }
+
+  state.modal = {
+    kind: "chart-editor",
+    error: null,
+    submitting: false,
+    draft,
+  };
+  emitChange();
+}
+
+export function openEditQueryChartModal(chartId) {
+  if (!state.charts.result) {
+    pushToast("Reload the query result before editing this chart.", "alert");
+    return;
+  }
+
+  const chart = state.charts.detail?.charts?.find((entry) => entry.id === Number(chartId)) ?? null;
+  const draft = chart ? buildQueryChartDraft("edit", chart) : null;
+
+  if (!chart || !draft) {
+    pushToast("The selected chart could not be loaded.", "alert");
+    return;
+  }
+
+  state.modal = {
+    kind: "chart-editor",
+    error: null,
+    submitting: false,
+    draft,
+  };
+  emitChange();
+}
+
+export function openDeleteQueryChartModal(chartId) {
+  const chart = state.charts.detail?.charts?.find((entry) => entry.id === Number(chartId)) ?? null;
+
+  if (!chart) {
+    pushToast("The selected chart could not be loaded.", "alert");
+    return;
+  }
+
+  state.modal = {
+    kind: "delete-chart",
+    chartId: chart.id,
+    chartName: chart.name,
+    error: null,
+    submitting: false,
+  };
+  emitChange();
+}
+
 export function closeModal() {
   closeModalInternal();
 }
 
+export function toggleChartsSqlPanel() {
+  state.charts.sqlExpanded = !state.charts.sqlExpanded;
+  emitChange();
+}
+
+export function toggleChartsResultsPanel() {
+  state.charts.resultsVisible = !state.charts.resultsVisible;
+  emitChange();
+}
+
+export function setChartsHeightPreset(preset) {
+  const nextPreset = normalizeChartsHeightPreset(preset);
+
+  if (state.charts.chartHeightPreset === nextPreset) {
+    return;
+  }
+
+  state.charts.chartHeightPreset = nextPreset;
+  emitChange();
+}
+
+export function updateCurrentQueryChartDraftField(field, value) {
+  if (state.modal?.kind !== "chart-editor" || !state.modal.draft) {
+    return;
+  }
+
+  state.modal.error = null;
+
+  if (field === "name") {
+    state.modal.draft.name = String(value ?? "");
+    state.modal.draft.nameTouched = true;
+    emitChange();
+    return;
+  }
+
+  if (field === "chartType") {
+    const nextType = String(value ?? "").trim().toLowerCase();
+    const analysis = getChartsResultAnalysis();
+
+    state.modal.draft.chartType = nextType;
+    state.modal.draft.config = buildSuggestedChartConfig(nextType, analysis);
+
+    if (!state.modal.draft.nameTouched) {
+      const existingCharts = state.charts.detail?.charts ?? [];
+      state.modal.draft.name = resolveUniqueQueryChartName(
+        buildDefaultQueryChartName(nextType, state.charts.detail?.item?.displayTitle),
+        existingCharts,
+        state.modal.draft.chartId
+      );
+    }
+
+    emitChange();
+    return;
+  }
+
+  if (field === "tableVisible") {
+    state.modal.draft.tableVisible = Boolean(value);
+    emitChange();
+  }
+}
+
+export function updateCurrentQueryChartDraftConfigField(field, value) {
+  if (state.modal?.kind !== "chart-editor" || !state.modal.draft) {
+    return;
+  }
+
+  state.modal.error = null;
+  state.modal.draft.config = {
+    ...state.modal.draft.config,
+    [field]: value,
+  };
+  emitChange();
+}
+
 export function dismissToast(id) {
   const nextToasts = state.toasts.filter((toast) => toast.id !== id);
 
@@ -1236,6 +1887,18 @@ export function clearEditorResults() {
   emitChange();
 }
 
+export function setEditorPanelVisibility(visible) {
+  const nextValue =
+    typeof visible === "boolean" ? visible : !Boolean(state.editor.editorPanelVisible);
+
+  if (state.editor.editorPanelVisible === nextValue) {
+    return;
+  }
+
+  state.editor.editorPanelVisible = nextValue;
+  emitChange();
+}
+
 export function setEditorTab(tab) {
   state.editor.activeTab = tab;
   emitChange();
@@ -1306,6 +1969,18 @@ export async function setQueryHistoryTab(tab) {
   await refreshQueryHistoryState();
 }
 
+export function setQueryHistoryPanelVisibility(visible) {
+  const nextValue =
+    typeof visible === "boolean" ? visible : !Boolean(state.editor.historyPanelVisible);
+
+  if (state.editor.historyPanelVisible === nextValue) {
+    return;
+  }
+
+  state.editor.historyPanelVisible = nextValue;
+  emitChange();
+}
+
 export function setQueryHistorySearchInput(query) {
   state.editor.historySearchInput = String(query ?? "");
   emitChange();
@@ -1450,6 +2125,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);
 
@@ -1508,6 +2302,11 @@ export function setDataSearchColumn(columnName) {
   emitChange();
 }
 
+export function toggleDataTablesPanel() {
+  state.dataBrowser.tablesVisible = state.dataBrowser.tablesVisible === false;
+  emitChange();
+}
+
 export async function setDataPage(page) {
   const numericPage = Number(page);
 
@@ -1770,6 +2569,116 @@ export async function submitDeleteRowConfirmation() {
   return result;
 }
 
+export async function saveCurrentQueryChartDraft() {
+  if (state.modal?.kind !== "chart-editor" || !state.modal.draft) {
+    return null;
+  }
+
+  const analysis = getChartsResultAnalysis();
+
+  if (!analysis) {
+    state.modal.error = {
+      code: "RESULT_SET_REQUIRED",
+      message: "Reload the query result before saving a chart.",
+    };
+    emitChange();
+    return null;
+  }
+
+  const validation = validateQueryChartConfig(
+    state.modal.draft.chartType,
+    state.modal.draft.config,
+    analysis
+  );
+
+  if (!validation.valid) {
+    state.modal.error = {
+      code: "VALIDATION_ERROR",
+      message: validation.errors.join(" "),
+    };
+    emitChange();
+    return null;
+  }
+
+  startModalSubmission();
+  const draftMode = state.modal.draft.mode;
+
+  const payload = {
+    queryHistoryId: state.modal.draft.queryHistoryId,
+    name: state.modal.draft.name,
+    chartType: state.modal.draft.chartType,
+    config: state.modal.draft.config,
+    resultColumns: buildQueryChartResultColumns(analysis),
+    tableVisible: state.modal.draft.tableVisible,
+  };
+
+  try {
+    const response =
+      state.modal.draft.mode === "edit"
+        ? await api.updateQueryHistoryChart(state.modal.draft.chartId, payload)
+        : await api.createQueryHistoryChart(payload);
+    const chart = response.data ?? null;
+
+    if (chart) {
+      upsertChartDetailItem(chart);
+      closeModalInternal();
+      pushToast(response.message || (draftMode === "edit" ? "Chart updated." : "Chart created."), "success");
+      return chart;
+    }
+
+    closeModalInternal();
+    return null;
+  } catch (error) {
+    withModalError(error);
+    return null;
+  }
+}
+
+export async function toggleQueryChartTableVisibility(chartId) {
+  const chart = state.charts.detail?.charts?.find((entry) => entry.id === Number(chartId)) ?? null;
+
+  if (!chart) {
+    pushToast("The selected chart could not be loaded.", "alert");
+    return null;
+  }
+
+  try {
+    const response = await api.updateQueryHistoryChart(chart.id, {
+      tableVisible: !chart.tableVisible,
+    });
+
+    upsertChartDetailItem(response.data ?? null);
+    emitChange();
+    return response.data ?? null;
+  } catch (error) {
+    pushToast(normalizeError(error)?.message || "Chart update failed.", "alert");
+    return null;
+  }
+}
+
+export async function deleteQueryChart(chartId) {
+  try {
+    const response = await api.deleteQueryHistoryChart(chartId);
+    removeChartDetailItem(chartId);
+    closeModalInternal();
+    pushToast(response.message || "Chart deleted.", "muted");
+    emitChange();
+    return true;
+  } catch (error) {
+    withModalError(error);
+    return false;
+  }
+}
+
+export async function submitDeleteChartConfirmation() {
+  if (state.modal?.kind !== "delete-chart") {
+    return false;
+  }
+
+  startModalSubmission();
+  return deleteQueryChart(state.modal.chartId);
+}
+
 export async function exportCurrentQueryCsv() {
   state.editor.exportLoading = true;
   emitChange();
@@ -1845,6 +2754,10 @@ 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;
 }