sqlite-hub 0.9.1 → 0.9.4

package/frontend/js/store.js

@@ -29,7 +29,11 @@ const DEFAULT_SETTINGS = {
     maxPageSize: 200,
     csvDelimiter: ',',
 };
+const DEFAULT_DATA_PAGE_SIZE = 50;
 const DATA_PAGE_SIZES = [25, 50, 100];
+const DATA_ROW_SIZE_STORAGE_KEY = 'data_row_size';
+const CHARTS_HISTORY_TAB_STORAGE_KEY = 'charts_history_tab';
+const QUERY_HISTORY_TAB_STORAGE_KEY = 'query_history_tab';
 const QUERY_HISTORY_PAGE_SIZE = 30;
 const QUERY_HISTORY_RUN_LIMIT = 8;
 const CHART_HEIGHT_PRESETS = new Set(['small', 'medium', 'large']);
@@ -46,6 +50,54 @@ let chartsLoadVersion = 0;
 let chartsDetailLoadVersion = 0;
 let mediaTaggingPreviewVersion = 0;
 
+function readStoredDataPageSize(fallback = DEFAULT_DATA_PAGE_SIZE) {
+    try {
+        return normalizeDataPageSize(globalThis.localStorage?.getItem(DATA_ROW_SIZE_STORAGE_KEY), fallback);
+    } catch {
+        return fallback;
+    }
+}
+
+function storeDataPageSize(pageSize) {
+    try {
+        globalThis.localStorage?.setItem(DATA_ROW_SIZE_STORAGE_KEY, String(pageSize));
+    } catch {
+        // Ignore unavailable browser storage; the in-memory setting still applies.
+    }
+}
+
+function readStoredChartsHistoryTab(fallback = 'recent') {
+    try {
+        return normalizeChartsHistoryTab(globalThis.localStorage?.getItem(CHARTS_HISTORY_TAB_STORAGE_KEY) ?? fallback);
+    } catch {
+        return normalizeChartsHistoryTab(fallback);
+    }
+}
+
+function storeChartsHistoryTab(tab) {
+    try {
+        globalThis.localStorage?.setItem(CHARTS_HISTORY_TAB_STORAGE_KEY, normalizeChartsHistoryTab(tab));
+    } catch {
+        // Ignore unavailable browser storage; the in-memory setting still applies.
+    }
+}
+
+function readStoredQueryHistoryTab(fallback = 'recent') {
+    try {
+        return normalizeQueryHistoryTab(globalThis.localStorage?.getItem(QUERY_HISTORY_TAB_STORAGE_KEY) ?? fallback);
+    } catch {
+        return normalizeQueryHistoryTab(fallback);
+    }
+}
+
+function storeQueryHistoryTab(tab) {
+    try {
+        globalThis.localStorage?.setItem(QUERY_HISTORY_TAB_STORAGE_KEY, normalizeQueryHistoryTab(tab));
+    } catch {
+        // Ignore unavailable browser storage; the in-memory setting still applies.
+    }
+}
+
 const state = {
     ready: false,
     route: { name: 'landing', path: '/', params: {} },
@@ -79,7 +131,7 @@ const state = {
         saving: false,
         deleting: false,
         page: 1,
-        pageSize: 50,
+        pageSize: readStoredDataPageSize(),
         sortColumn: null,
         sortDirection: null,
         searchQuery: '',
@@ -99,7 +151,7 @@ const state = {
         historyLoading: false,
         historyLoadingMore: false,
         historyError: null,
-        historyTab: 'recent',
+        historyTab: readStoredQueryHistoryTab(),
         historySearchInput: '',
         historySearch: '',
         historyPageSize: QUERY_HISTORY_PAGE_SIZE,
@@ -124,9 +176,11 @@ const state = {
         saveError: null,
     },
     charts: {
+        loaded: false,
         queries: [],
         loading: false,
         error: null,
+        historyTab: readStoredChartsHistoryTab(),
         selectedHistoryId: null,
         chartHeightPreset: 'medium',
         sqlExpanded: false,
@@ -666,9 +720,11 @@ function resetQueryHistoryState({ preserveSearch = true } = {}) {
 function resetChartsState() {
     chartsLoadVersion += 1;
     chartsDetailLoadVersion += 1;
+    state.charts.loaded = false;
     state.charts.queries = [];
     state.charts.loading = false;
     state.charts.error = null;
+    state.charts.historyTab = readStoredChartsHistoryTab(state.charts.historyTab);
     state.charts.selectedHistoryId = null;
     state.charts.chartHeightPreset = 'medium';
     state.charts.sqlExpanded = false;
@@ -689,6 +745,10 @@ function normalizeChartsHeightPreset(value) {
     return CHART_HEIGHT_PRESETS.has(normalizedValue) ? normalizedValue : 'medium';
 }
 
+function normalizeChartsHistoryTab(value) {
+    return ['recent', 'saved'].includes(value) ? value : 'recent';
+}
+
 function mergeQueryHistoryItemWithChartSummary(updatedItem, fallbackItem = null) {
     if (!updatedItem) {
         return updatedItem;
@@ -714,20 +774,24 @@ function syncQueryHistoryItem(updatedItem) {
         return;
     }
 
-    state.editor.history = state.editor.history.map(entry => (entry.id === updatedItem.id ? updatedItem : entry));
+    const updatedItemId = String(updatedItem.id);
+
+    state.editor.history = state.editor.history.map(entry => (String(entry.id) === updatedItemId ? updatedItem : entry));
 
-    if (state.editor.historyDetail?.id === updatedItem.id) {
+    if (String(state.editor.historyDetail?.id ?? '') === updatedItemId) {
         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);
+        state.charts.queries.find(entry => String(entry.id) === updatedItemId) ??
+        (String(state.charts.detail?.item?.id ?? '') === updatedItemId ? state.charts.detail.item : null);
     const mergedChartsItem = mergeQueryHistoryItemWithChartSummary(updatedItem, existingChartsEntry);
 
-    state.charts.queries = state.charts.queries.map(entry => (entry.id === updatedItem.id ? mergedChartsItem : entry));
+    state.charts.queries = state.charts.queries.map(entry =>
+        String(entry.id) === updatedItemId ? mergedChartsItem : entry,
+    );
 
-    if (state.charts.detail?.item?.id === updatedItem.id) {
+    if (String(state.charts.detail?.item?.id ?? '') === updatedItemId) {
         state.charts.detail = {
             ...state.charts.detail,
             item: mergeQueryHistoryItemWithChartSummary(updatedItem, state.charts.detail.item),
@@ -1169,7 +1233,56 @@ async function loadChartsDetail(historyId) {
     }
 }
 
-async function loadCharts(version, route) {
+function getRequestedChartsHistoryId(route) {
+    const requestedHistoryId = Number(route.params?.historyId ?? null);
+
+    return Number.isInteger(requestedHistoryId) && requestedHistoryId > 0 ? requestedHistoryId : null;
+}
+
+function resolveLoadableChartsHistoryId(route) {
+    const requestedHistoryId = getRequestedChartsHistoryId(route);
+
+    if (!requestedHistoryId) {
+        return null;
+    }
+
+    return state.charts.queries.some(item => item.id === requestedHistoryId) ? requestedHistoryId : null;
+}
+
+function hasSettledChartsDetail(historyId) {
+    if (state.charts.detailLoading || state.charts.resultLoading) {
+        return false;
+    }
+
+    if (historyId === null) {
+        return (
+            state.charts.selectedHistoryId === null &&
+            !state.charts.detail &&
+            !state.charts.result &&
+            !state.charts.detailError &&
+            !state.charts.resultError
+        );
+    }
+
+    return (
+        state.charts.selectedHistoryId === historyId &&
+        (state.charts.detail?.item?.id === historyId || Boolean(state.charts.detailError)) &&
+        (Boolean(state.charts.result) || Boolean(state.charts.resultError))
+    );
+}
+
+async function loadCharts(version, route, options = {}) {
+    if (!options.force && state.charts.loaded) {
+        const historyId = resolveLoadableChartsHistoryId(route);
+
+        if (hasSettledChartsDetail(historyId)) {
+            return;
+        }
+
+        await loadChartsDetail(historyId);
+        return;
+    }
+
     state.charts.loading = true;
     state.charts.error = null;
     emitChange();
@@ -1182,6 +1295,7 @@ async function loadCharts(version, route) {
         }
 
         state.charts.queries = response.data ?? [];
+        state.charts.loaded = true;
         state.charts.error = null;
     } catch (error) {
         if (version !== routeLoadVersion) {
@@ -1189,6 +1303,7 @@ async function loadCharts(version, route) {
         }
 
         state.charts.queries = [];
+        state.charts.loaded = false;
         state.charts.error = normalizeError(error);
     } finally {
         if (version === routeLoadVersion) {
@@ -1201,11 +1316,7 @@ async function loadCharts(version, route) {
         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);
+    await loadChartsDetail(resolveLoadableChartsHistoryId(route));
 }
 
 async function loadOverview(version) {
@@ -1280,7 +1391,7 @@ async function resolvePendingDataBrowserRow(version) {
 
 async function loadDataTable(version) {
     const tableName = state.dataBrowser.selectedTable;
-    const pageSize = normalizeDataPageSize(state.dataBrowser.pageSize, 50);
+    const pageSize = normalizeDataPageSize(state.dataBrowser.pageSize, DEFAULT_DATA_PAGE_SIZE);
     const page = Math.max(1, Number(state.dataBrowser.page) || 1);
     const sortColumn = state.dataBrowser.sortColumn;
     const sortDirection = normalizeSortDirection(state.dataBrowser.sortDirection);
@@ -1799,7 +1910,7 @@ function invalidateDatabaseCaches() {
     state.mediaTagging.tagFormValues = {};
 }
 
-async function loadRouteData(route) {
+async function loadRouteData(route, options = {}) {
     clearRouteSlices();
 
     if (requiresActiveDatabase(route.name) && !state.connections.active) {
@@ -1808,7 +1919,7 @@ async function loadRouteData(route) {
         return;
     }
 
-    if (isMediaTaggingRouteName(route.name) && hasLoadedMediaTaggingForActiveConnection()) {
+    if (!options.force && isMediaTaggingRouteName(route.name) && hasLoadedMediaTaggingForActiveConnection()) {
         return;
     }
 
@@ -1827,7 +1938,7 @@ async function loadRouteData(route) {
             await loadData(version, route);
             return;
         case 'charts':
-            await loadCharts(version, route);
+            await loadCharts(version, route, options);
             return;
         case 'editor':
         case 'editorResults':
@@ -2201,6 +2312,22 @@ export function setChartsHeightPreset(preset) {
     emitChange();
 }
 
+export function setChartsHistoryTab(tab) {
+    const nextTab = normalizeChartsHistoryTab(
+        String(tab ?? '')
+            .trim()
+            .toLowerCase(),
+    );
+
+    if (state.charts.historyTab === nextTab) {
+        return;
+    }
+
+    state.charts.historyTab = nextTab;
+    storeChartsHistoryTab(nextTab);
+    emitChange();
+}
+
 export function updateCurrentQueryChartDraftField(field, value) {
     if (state.modal?.kind !== 'chart-editor' || !state.modal.draft) {
         return;
@@ -2529,6 +2656,7 @@ export async function setQueryHistoryTab(tab) {
     }
 
     state.editor.historyTab = normalizedTab;
+    storeQueryHistoryTab(normalizedTab);
     state.editor.historyActiveId = null;
     clearQueryHistoryDetailState();
     emitChange();
@@ -2625,16 +2753,25 @@ export async function runQueryHistoryItem(historyId) {
     return executeCurrentQuery();
 }
 
-export async function toggleQueryHistorySavedState(historyId, nextValue) {
+export async function toggleQueryHistorySavedState(historyId, nextValue, options = {}) {
     try {
         const response = await api.toggleQueryHistorySaved(historyId, nextValue);
         syncQueryHistoryItem(response.data);
-        pushToast(response.message || 'Query save state updated.', 'muted');
-        await refreshQueryHistoryState();
+        if (options.toast !== false) {
+            pushToast(response.message || 'Query save state updated.', 'muted');
+        }
+        if (options.notify !== false) {
+            emitChange();
+        }
+        if (options.refresh !== false) {
+            await refreshQueryHistoryState();
+        }
         return true;
     } catch (error) {
         state.editor.historyDetailError = normalizeError(error);
-        emitChange();
+        if (options.notify !== false) {
+            emitChange();
+        }
         return false;
     }
 }
@@ -3340,6 +3477,7 @@ export async function setDataPageSize(pageSize) {
     }
 
     state.dataBrowser.pageSize = normalizedPageSize;
+    storeDataPageSize(normalizedPageSize);
     state.dataBrowser.page = 1;
     clearDataBrowserRowSelectionState();
     state.dataBrowser.saveError = null;
@@ -3735,7 +3873,7 @@ export function sortEditorResultsByColumn(columnName) {
 }
 
 export async function refreshCurrentRoute() {
-    await loadRouteData(state.route);
+    await loadRouteData(state.route, { force: true });
 }
 
 export function showToast(message, tone = 'muted') {

package/frontend/js/utils/tableDesigner.js

@@ -713,13 +713,19 @@ function buildImportedInsertPreviewSql(draft, maxRows = 3) {
   }
 
   const columnSql = importedColumns.map((column) => quoteIdentifier(column.name)).join(", ");
-  const insertPrefix = `INSERT INTO ${quoteIdentifier(draft.tableName)} (${columnSql}) VALUES`;
+  const insertPrefix = [
+    "INSERT INTO",
+    quoteIdentifier(draft.tableName),
+    "(",
+    columnSql,
+    ") VALUES",
+  ].join(" ");
   const previewStatements = draft.importedCsvRows.slice(0, maxRows).map((row) => {
     const valueSql = importedColumns
       .map((column) => formatImportedCellValueForSql(column, row[column.importedValueIndex] ?? ""))
       .join(", ");
 
-    return `${insertPrefix} (${valueSql});`;
+    return [insertPrefix, "(", valueSql, ");"].join(" ");
   });
 
   if (draft.importedCsvRows.length > maxRows) {

package/frontend/js/views/charts.js

@@ -20,10 +20,12 @@ function renderMissingDatabase() {
 }
 
 function renderChartsList(state) {
-    const queries = state.charts.queries ?? [];
+    const activeTab = ['recent', 'saved'].includes(state.charts.historyTab) ? state.charts.historyTab : 'recent';
+    const allQueries = state.charts.queries ?? [];
+    const queries = activeTab === 'saved' ? allQueries.filter(item => item.isSaved) : allQueries;
     const selectedHistoryId = Number(state.charts.selectedHistoryId);
 
-    if (state.charts.loading && !queries.length) {
+    if (state.charts.loading && !allQueries.length) {
         return `
       <div class="flex h-full items-center justify-center px-6 text-center text-on-surface-variant/45">
         <div>
@@ -34,7 +36,7 @@ function renderChartsList(state) {
     `;
     }
 
-    if (state.charts.error && !queries.length) {
+    if (state.charts.error && !allQueries.length) {
         return `
       <div class="p-5">
         <div class="border border-error/30 bg-error-container/20 px-4 py-4 text-sm text-error">
@@ -45,15 +47,23 @@ function renderChartsList(state) {
     }
 
     if (!queries.length) {
+        const isSavedTab = activeTab === 'saved';
+
         return `
       <div class="flex h-full items-center justify-center px-6 text-center">
         <div>
-          <span class="material-symbols-outlined mb-3 text-4xl text-on-surface-variant/25">query_stats</span>
+          <span class="material-symbols-outlined mb-3 text-4xl text-on-surface-variant/25">${
+              isSavedTab ? 'bookmark' : 'query_stats'
+          }</span>
           <p class="font-headline text-lg font-black uppercase tracking-tight text-on-surface">
-            No Chartable Queries
+            ${isSavedTab ? 'No Saved Charts Queries' : 'No Chartable Queries'}
           </p>
           <p class="mt-2 max-w-xs text-sm leading-6 text-on-surface-variant/60">
-            Run SELECT queries in the SQL Editor first. They will appear here automatically.
+            ${
+                isSavedTab
+                    ? 'Save chartable queries from this list or from the SQL Editor to keep them here.'
+                    : 'Run SELECT queries in the SQL Editor first. They will appear here automatically.'
+            }
           </p>
         </div>
       </div>
@@ -66,36 +76,67 @@ function renderChartsList(state) {
         ${queries
             .map(
                 item => `
-              <button
-                class="w-full border px-4 py-3 text-left transition-colors ${
-                    selectedHistoryId === item.id
+              <article
+                class="group w-full border transition-colors ${
+                    selectedHistoryId === Number(item.id)
                         ? 'border-primary-container/30 bg-surface-container-high'
                         : 'border-outline-variant/10 bg-surface-container-lowest hover:bg-surface-container-high'
                 }"
-                data-action="navigate"
-                data-to="/charts/${encodeURIComponent(item.id)}"
-                type="button"
+                data-charts-history-item
               >
-                <div class="flex items-start justify-between gap-3">
-                  <div class="min-w-0 flex-1 truncate font-mono text-xs ${
-                      selectedHistoryId === item.id ? 'text-primary-container' : 'text-on-surface'
-                  }">
-                    ${escapeHtml(item.displayTitle)}
+                <button
+                  class="w-full px-4 py-3 text-left transition-colors group-hover:bg-surface-container-high"
+                  data-action="navigate"
+                  data-history-id="${escapeHtml(item.id)}"
+                  data-to="/charts/${encodeURIComponent(item.id)}"
+                  type="button"
+                >
+                  <div class="flex items-start justify-between gap-3">
+                    <div class="min-w-0 flex-1 truncate font-mono text-xs ${
+                        selectedHistoryId === Number(item.id) ? 'text-primary-container' : 'text-on-surface'
+                    }" data-charts-history-title>
+                      ${escapeHtml(item.displayTitle)}
+                    </div>
+                    <div class="flex shrink-0 flex-wrap justify-end gap-1">
+                      <span class="inline-flex" data-charts-saved-badge ${item.isSaved ? '' : 'hidden'}>
+                        ${renderStatusBadge('saved', 'primary')}
+                      </span>
+                      ${
+                          item.chartTypes?.length
+                              ? item.chartTypes
+                                    .map(chartType => renderStatusBadge(getQueryChartTypeLabel(chartType), 'primary'))
+                                    .join('')
+                              : renderStatusBadge('None', 'muted')
+                      }
+                    </div>
                   </div>
-                  <div class="flex shrink-0 flex-wrap justify-end gap-1">
-                    ${
-                        item.chartTypes?.length
-                            ? item.chartTypes
-                                  .map(chartType => renderStatusBadge(getQueryChartTypeLabel(chartType), 'primary'))
-                                  .join('')
-                            : renderStatusBadge('None', 'muted')
-                    }
+                  <div class="mt-1 truncate text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">
+                    ${escapeHtml(item.previewSql)}
                   </div>
+                </button>
+                <div class="flex items-center justify-end border-t border-outline-variant/10 px-3 py-2 transition-colors group-hover:bg-surface-container-high">
+                  <button
+                    aria-label="Open chart query"
+                    class="min-h-[var(--control-height)] flex-1 self-stretch"
+                    data-action="navigate"
+                    data-history-id="${escapeHtml(item.id)}"
+                    data-to="/charts/${encodeURIComponent(item.id)}"
+                    type="button"
+                  ></button>
+                  <button
+                    class="query-history-icon-button ${item.isSaved ? 'is-active' : ''}"
+                    data-action="toggle-charts-query-history-saved"
+                    data-history-id="${escapeHtml(item.id)}"
+                    data-next-value="${item.isSaved ? 'false' : 'true'}"
+                    title="${item.isSaved ? 'Remove from saved' : 'Save query'}"
+                    type="button"
+                  >
+                    <span class="material-symbols-outlined text-[18px]">
+                      ${item.isSaved ? 'bookmark' : 'bookmark_add'}
+                    </span>
+                  </button>
                 </div>
-                <div class="mt-1 truncate text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">
-                  ${escapeHtml(item.previewSql)}
-                </div>
-              </button>
+              </article>
             `,
             )
             .join('')}
@@ -104,6 +145,37 @@ function renderChartsList(state) {
   `;
 }
 
+function renderChartsHistoryTabs(state) {
+    const activeTab = ['recent', 'saved'].includes(state.charts.historyTab) ? state.charts.historyTab : 'recent';
+    const savedCount = (state.charts.queries ?? []).filter(item => item.isSaved).length;
+    const tabs = [
+        { id: 'recent', label: 'Recent', count: state.charts.queries?.length ?? 0 },
+        { id: 'saved', label: 'Saved', count: savedCount },
+    ];
+
+    return `
+    <div class="mt-4 flex items-center gap-2">
+      ${tabs
+          .map(
+              tab => `
+                <button
+                  class="query-history-tab ${activeTab === tab.id ? 'is-active' : ''}"
+                  data-action="set-charts-history-tab"
+                  data-tab="${escapeHtml(tab.id)}"
+                  type="button"
+                >
+                  ${escapeHtml(tab.label)}
+                </button>
+              `,
+          )
+          .join('')}
+      <span class="ml-auto text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/50">
+        <span data-charts-history-count>${escapeHtml(String(tabs.find(tab => tab.id === activeTab)?.count ?? 0))}</span>
+      </span>
+    </div>
+  `;
+}
+
 function renderEmptyChartDetail() {
     return `
     <div class="flex flex-1 items-center justify-center px-8 py-10 text-center">
@@ -302,52 +374,32 @@ function renderChartSurface(chart, state, analysis) {
 function renderChartCard(chart, state, analysis) {
     const sizeClass = resolveChartCardSizeClass(state);
 
-    return `
-    <article class="query-chart-card ${sizeClass}">
-      <header class="query-chart-card__header">
-        <div class="min-w-0">
-          <div class="flex flex-wrap items-center gap-2">
-            <h3 class="truncate font-headline text-xl font-black uppercase tracking-tight text-on-surface">
-              ${escapeHtml(chart.name)}
-            </h3>
-            ${renderStatusBadge(getQueryChartTypeLabel(chart.chartType), 'primary')}
-          </div>
-        </div>
-        <div class="flex flex-wrap items-center gap-2">
-          <button
-            class="standard-button"
-            data-action="open-edit-query-chart-modal"
-            data-chart-id="${escapeHtml(chart.id)}"
-            type="button"
-          >
-            Edit
-          </button>
-          <button
-            class="delete-button"
-            data-action="open-delete-query-chart-modal"
-            data-chart-id="${escapeHtml(chart.id)}"
-            type="button"
-          >
-            Delete
-          </button>
-          <button
-            class="standard-button"
-            data-action="export-query-chart-png"
-            data-chart-id="${escapeHtml(chart.id)}"
-            type="button"
-          >
-            Export PNG
-          </button>
-        </div>
-      </header>
-      <div class="query-chart-card__body">
-        ${renderChartSurface(chart, state, analysis)}
-      </div>
-    </article>
-  `;
+    return [
+        '<article class="query-chart-card ',
+        sizeClass,
+        '"><header class="query-chart-card__header"><div class="min-w-0">',
+        '<div class="flex flex-wrap items-center gap-2">',
+        '<h3 class="truncate font-headline text-xl font-black uppercase tracking-tight text-on-surface">',
+        escapeHtml(chart.name),
+        "</h3>",
+        renderStatusBadge(getQueryChartTypeLabel(chart.chartType), 'primary'),
+        '</div></div><div class="flex flex-wrap items-center gap-2">',
+        '<button class="standard-button" data-action="open-edit-query-chart-modal" data-chart-id="',
+        escapeHtml(chart.id),
+        '" type="button">Edit</button>',
+        '<button class="delete-button" data-action="open-delete-query-chart-modal" data-chart-id="',
+        escapeHtml(chart.id),
+        '" type="button">Delete</button>',
+        '<button class="standard-button" data-action="export-query-chart-png" data-chart-id="',
+        escapeHtml(chart.id),
+        '" type="button">Export PNG</button>',
+        '</div></header><div class="query-chart-card__body">',
+        renderChartSurface(chart, state, analysis),
+        "</div></article>",
+    ].join("");
 }
 
-function renderChartsDetail(state) {
+export function renderChartsDetail(state) {
     const detail = state.charts.detail;
     const selectedHistoryId = state.charts.selectedHistoryId;
     const historyVisible = state.editor.historyPanelVisible !== false;
@@ -485,6 +537,7 @@ export function renderChartsView(state) {
                       <h2 class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
                         Charts
                       </h2>
+                      ${renderChartsHistoryTabs(state)}
                     </div>
                     ${renderChartsList(state)}
                   </aside>