sqlite-hub 1.0.0 → 1.1.1

package/frontend/js/views/charts.js

@@ -1,7 +1,15 @@
 import { renderQueryResultsPane } from '../components/queryResults.js';
 import { analyzeQueryChartResult, getQueryChartTypeLabel, validateQueryChartConfig } from '../lib/queryCharts.js';
-import { escapeHtml, highlightSql } from '../utils/format.js';
+import { escapeHtml, formatNumber, highlightSql } from '../utils/format.js';
 import { renderStatusBadge } from '../components/badges.js';
+import { renderQueryHistoryHeader, renderQueryHistorySearch } from '../components/queryHistoryHeader.js';
+import {
+    renderQueryHistoryActionGroup,
+    renderQueryHistoryBadgeRow,
+    renderQueryHistoryIconButton,
+    renderQueryHistoryListItem,
+    renderQueryHistoryTabs,
+} from '../components/queryHistoryList.js';
 
 function renderMissingDatabase() {
     return `
@@ -19,11 +27,101 @@ function renderMissingDatabase() {
   `;
 }
 
-function renderChartsList(state) {
-    const activeTab = ['recent', 'saved'].includes(state.charts.historyTab) ? state.charts.historyTab : 'recent';
+function normalizeChartsHistorySearchText(value) {
+    return String(value ?? '')
+        .trim()
+        .toLowerCase();
+}
+
+function getChartsHistorySearchHaystack(item) {
+    return [
+        item.displayTitle,
+        item.title,
+        item.previewSql,
+        item.rawSql,
+        item.chartTypes?.join(' '),
+        item.isSaved ? 'saved' : '',
+    ]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase();
+}
+
+function getFilteredChartsQueries(state) {
+    const activeTab = ['recent', 'saved', 'unsaved'].includes(state.charts.historyTab)
+        ? state.charts.historyTab
+        : 'recent';
+    const search = normalizeChartsHistorySearchText(state.charts.historySearch);
     const allQueries = state.charts.queries ?? [];
-    const queries = activeTab === 'saved' ? allQueries.filter(item => item.isSaved) : allQueries;
+    const tabQueries =
+        activeTab === 'saved'
+            ? allQueries.filter(item => item.isSaved)
+            : activeTab === 'unsaved'
+              ? allQueries.filter(item => !item.isSaved)
+              : allQueries;
+
+    if (!search) {
+        return tabQueries;
+    }
+
+    return tabQueries.filter(item => getChartsHistorySearchHaystack(item).includes(search));
+}
+
+function renderChartsHistoryListItem(item, state) {
     const selectedHistoryId = Number(state.charts.selectedHistoryId);
+    const isActive = selectedHistoryId === Number(item.id);
+    const savedBadgeMarkup = `
+      <span
+        data-charts-saved-badge
+        data-history-id="${escapeHtml(item.id)}"
+        ${item.isSaved ? '' : 'hidden'}
+      >
+        ${renderStatusBadge('saved', 'primary')}
+      </span>
+    `;
+    const chartBadgesMarkup = item.chartTypes?.length
+        ? item.chartTypes.map(chartType => renderStatusBadge(getQueryChartTypeLabel(chartType), 'primary')).join('')
+        : renderStatusBadge('None', 'muted');
+    const badgesMarkup = renderQueryHistoryBadgeRow([savedBadgeMarkup, chartBadgesMarkup].join(''));
+    const actionsMarkup = renderQueryHistoryActionGroup([
+        renderQueryHistoryIconButton({
+            action: 'open-charts-query-detail',
+            historyId: item.id,
+            icon: 'info',
+            title: 'Open chart detail',
+            active: Boolean(state.charts.detailPanelVisible && isActive),
+        }),
+        renderQueryHistoryIconButton({
+            action: 'toggle-charts-query-history-saved',
+            historyId: item.id,
+            icon: item.isSaved ? 'bookmark' : 'bookmark_add',
+            title: item.isSaved ? 'Remove from saved' : 'Save query',
+            active: item.isSaved,
+            nextValue: item.isSaved ? 'false' : 'true',
+        }),
+    ]);
+
+    return renderQueryHistoryListItem({
+        title: item.displayTitle,
+        preview: item.previewSql,
+        historyId: item.id,
+        active: isActive,
+        hitAction: 'navigate',
+        hitAttrs: `data-to="/charts/${encodeURIComponent(item.id)}"`,
+        itemAttrs: 'data-charts-history-item',
+        titleAttrs: 'data-charts-history-title',
+        badgesMarkup,
+        actionsMarkup,
+    });
+}
+
+function renderChartsList(state) {
+    const activeTab = ['recent', 'saved', 'unsaved'].includes(state.charts.historyTab)
+        ? state.charts.historyTab
+        : 'recent';
+    const allQueries = state.charts.queries ?? [];
+    const queries = getFilteredChartsQueries(state);
+    const hasSearch = Boolean(normalizeChartsHistorySearchText(state.charts.historySearch));
 
     if (state.charts.loading && !allQueries.length) {
         return `
@@ -48,21 +146,34 @@ function renderChartsList(state) {
 
     if (!queries.length) {
         const isSavedTab = activeTab === 'saved';
+        const isUnsavedTab = activeTab === 'unsaved';
 
         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">${
-              isSavedTab ? 'bookmark' : 'query_stats'
+              hasSearch ? 'manage_search' : isSavedTab ? 'bookmark' : isUnsavedTab ? 'bookmark_border' : 'query_stats'
           }</span>
           <p class="font-headline text-lg font-black uppercase tracking-tight text-on-surface">
-            ${isSavedTab ? 'No Saved Charts Queries' : 'No Chartable Queries'}
+            ${
+                hasSearch
+                    ? 'No Matching Queries'
+                    : isSavedTab
+                      ? 'No Saved Charts Queries'
+                      : isUnsavedTab
+                        ? 'No Unsaved Charts Queries'
+                        : 'No Chartable Queries'
+            }
           </p>
           <p class="mt-2 max-w-xs text-sm leading-6 text-on-surface-variant/60">
             ${
-                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.'
+                hasSearch
+                    ? 'Try another title, SQL fragment, chart type, or saved status.'
+                    : isSavedTab
+                      ? 'Save chartable queries from this list or from the SQL Editor to keep them here.'
+                      : isUnsavedTab
+                        ? 'Unsaved chartable queries will appear here until you bookmark them.'
+                        : 'Run SELECT queries in the SQL Editor first. They will appear here automatically.'
             }
           </p>
         </div>
@@ -71,109 +182,37 @@ function renderChartsList(state) {
     }
 
     return `
-    <div class="custom-scrollbar flex-1 overflow-auto px-4 py-4">
-      <div class="space-y-2">
-        ${queries
-            .map(
-                item => `
-              <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-charts-history-item
-              >
-                <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="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>
-              </article>
-            `,
-            )
-            .join('')}
+    <div class="query-history-list-scroll custom-scrollbar">
+      <div class="query-history-list">
+        ${queries.map(item => renderChartsHistoryListItem(item, state)).join('')}
       </div>
     </div>
   `;
 }
 
 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 activeTab = ['recent', 'saved', 'unsaved'].includes(state.charts.historyTab)
+        ? state.charts.historyTab
+        : 'recent';
+    const search = normalizeChartsHistorySearchText(state.charts.historySearch);
+    const countableQueries = search
+        ? (state.charts.queries ?? []).filter(item => getChartsHistorySearchHaystack(item).includes(search))
+        : (state.charts.queries ?? []);
+    const savedCount = countableQueries.filter(item => item.isSaved).length;
+    const unsavedCount = countableQueries.filter(item => !item.isSaved).length;
     const tabs = [
-        { id: 'recent', label: 'Recent', count: state.charts.queries?.length ?? 0 },
+        { id: 'recent', label: 'Recent', count: countableQueries.length },
         { id: 'saved', label: 'Saved', count: savedCount },
+        { id: 'unsaved', label: 'Unsaved', count: unsavedCount },
     ];
 
-    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>
-  `;
+    return renderQueryHistoryTabs({
+        tabs,
+        activeTab,
+        action: 'set-charts-history-tab',
+        count: tabs.find(tab => tab.id === activeTab)?.count ?? 0,
+        countAttr: 'data-charts-history-count',
+    });
 }
 
 function renderEmptyChartDetail() {
@@ -185,7 +224,7 @@ function renderEmptyChartDetail() {
           Select A Query
         </h2>
         <p class="mt-3 text-sm leading-7 text-on-surface-variant/65">
-          Choose a query-history entry on the left to load its charts, render the live result set, and manage chart definitions.
+          Choose a query-history entry on the right to load its charts, render the live result set, and manage chart definitions.
         </p>
       </div>
     </div>
@@ -231,60 +270,45 @@ function renderQueryResultState(state, result) {
     return '';
 }
 
-function renderQuerySqlSection(state, rawSql) {
-    const isExpanded = Boolean(state.charts.sqlExpanded);
+function renderChartsDetailDrawerMetaItem(label, value) {
+    return `
+    <div class="border border-outline-variant/10 bg-surface-container px-3 py-3">
+      <div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+        ${escapeHtml(label)}
+      </div>
+      <div class="mt-2 text-sm text-on-surface">${escapeHtml(value)}</div>
+    </div>
+  `;
+}
 
+function renderChartsDetailDrawerQuerySection(rawSql) {
     return `
     <section class="mt-5 border border-outline-variant/10 bg-surface-container-lowest">
-      <button
-        class="standard-button flex w-full justify-between border-b border-outline-variant/10 px-4 text-left"
-        data-action="toggle-charts-sql-panel"
-        type="button"
-      >
+      <div class="border-b border-outline-variant/10 px-4 py-3">
         <span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-          Query SQL
+          Query
         </span>
-        <span class="material-symbols-outlined text-on-surface-variant/55">
-          ${isExpanded ? 'expand_less' : 'expand_more'}
-        </span>
-      </button>
-      ${
-          isExpanded
-              ? `
-            <pre class="custom-scrollbar overflow-auto p-4 font-mono text-sm leading-6 text-on-surface"><code>${highlightSql(
-                rawSql,
-            )}</code></pre>
-          `
-              : ''
-      }
+      </div>
+      <pre class="query-history-detail-sql custom-scrollbar max-h-[22rem] overflow-auto p-4 font-mono text-sm leading-6 text-on-surface"><code>${highlightSql(
+          rawSql ?? '',
+      )}</code></pre>
     </section>
   `;
 }
 
-function renderQueryResultsSection(state) {
-    const isVisible = Boolean(state.charts.resultsVisible);
+function renderChartsDetailDrawerResultsSection(state) {
     const statusMarkup = renderQueryResultState(state, state.charts.result);
 
     return `
-    <section class="mt-6 border border-outline-variant/10 bg-surface-container-lowest">
-      <div class="flex items-center justify-between gap-3 border-b border-outline-variant/10 px-4 py-3">
+    <section class="mt-5 border border-outline-variant/10 bg-surface-container-lowest">
+      <div class="border-b border-outline-variant/10 px-4 py-3">
         <span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
           Results
         </span>
-        <button
-          class="standard-button"
-          data-action="toggle-charts-results-panel"
-          type="button"
-        >
-          <span class="material-symbols-outlined text-sm">
-            ${isVisible ? 'table_rows_narrow' : 'table_rows'}
-          </span>
-          ${isVisible ? 'Hide Results' : 'Show Results'}
-        </button>
       </div>
       ${statusMarkup}
       ${
-          isVisible && state.charts.result && !state.charts.resultLoading && !state.charts.resultError
+          state.charts.result && !state.charts.resultLoading && !state.charts.resultError
               ? `
             <div class="h-[18rem] overflow-hidden">
               ${renderQueryResultsPane(state.charts.result, {
@@ -303,6 +327,140 @@ function renderQueryResultsSection(state) {
   `;
 }
 
+export function renderChartsDetailDrawer(state) {
+    if (!state.charts.detailPanelVisible) {
+        return '';
+    }
+
+    const detail = state.charts.detail;
+
+    if (state.charts.detailLoading && !detail) {
+        return `
+      <section class="flex h-full min-h-0 flex-col bg-surface-low">
+        <div class="border-b border-outline-variant/10 px-5 py-4">
+          <div class="flex items-center justify-between gap-3">
+            <span class="font-headline text-sm font-black uppercase tracking-[0.18em] text-primary-container">
+              Chart Detail
+            </span>
+            <button class="query-history-icon-button" data-action="close-charts-query-detail" type="button">
+              <span class="material-symbols-outlined text-[18px]">close</span>
+            </button>
+          </div>
+        </div>
+        <div class="flex flex-1 items-center justify-center px-6 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
+          Loading chart detail...
+        </div>
+      </section>
+    `;
+    }
+
+    if (state.charts.detailError && !detail) {
+        return `
+      <section class="flex h-full min-h-0 flex-col bg-surface-low">
+        <div class="border-b border-outline-variant/10 px-5 py-4">
+          <div class="flex items-center justify-between gap-3">
+            <span class="font-headline text-sm font-black uppercase tracking-[0.18em] text-primary-container">
+              Chart Detail
+            </span>
+            <button class="query-history-icon-button" data-action="close-charts-query-detail" type="button">
+              <span class="material-symbols-outlined text-[18px]">close</span>
+            </button>
+          </div>
+        </div>
+        <div class="p-5">
+          <div class="border border-error/30 bg-error-container/20 px-4 py-4 text-sm text-error">
+            ${escapeHtml(state.charts.detailError.message)}
+          </div>
+        </div>
+      </section>
+    `;
+    }
+
+    if (!detail?.item) {
+        return '';
+    }
+
+    const charts = detail.charts ?? [];
+    const result = state.charts.result;
+    const chartTypeBadges = charts.length
+        ? charts.map(chart => renderStatusBadge(getQueryChartTypeLabel(chart.chartType), 'primary')).join('')
+        : renderStatusBadge('no charts', 'muted');
+    const savedBadgeMarkup = `
+      <span
+        data-charts-saved-badge
+        data-history-id="${escapeHtml(detail.item.id)}"
+        ${detail.item.isSaved ? '' : 'hidden'}
+      >
+        ${renderStatusBadge('saved', 'primary')}
+      </span>
+    `;
+    const statusMarkup = [
+        savedBadgeMarkup,
+        state.charts.resultError ? renderStatusBadge('result error', 'alert') : '',
+        state.charts.resultLoading ? renderStatusBadge('loading result', 'muted') : '',
+        chartTypeBadges,
+    ].join('');
+    const metaMarkup = [
+        renderChartsDetailDrawerMetaItem('Charts', formatNumber(charts.length)),
+        renderChartsDetailDrawerMetaItem('Rows', formatNumber(result?.rows?.length ?? 0)),
+        renderChartsDetailDrawerMetaItem('Columns', formatNumber(result?.columns?.length ?? 0)),
+        renderChartsDetailDrawerMetaItem('Query ID', String(detail.item.id)),
+    ].join('');
+
+    return `
+    <section class="flex h-full min-h-0 flex-col bg-surface-low">
+      <div class="border-b border-outline-variant/10 px-5 py-4">
+        <div class="flex items-center justify-between gap-3">
+          <div class="min-w-0">
+            <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">
+              Chart Detail
+            </div>
+            <h2 class="mt-1 truncate font-headline text-lg font-black uppercase tracking-tight text-on-surface">
+              ${escapeHtml(detail.item.displayTitle)}
+            </h2>
+          </div>
+          <button
+            class="query-history-icon-button"
+            data-action="close-charts-query-detail"
+            title="Close chart detail"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-[18px]">close</span>
+          </button>
+        </div>
+        ${renderQueryHistoryBadgeRow(statusMarkup, { compact: false, className: 'mt-4' })}
+      </div>
+      <div class="custom-scrollbar min-h-0 flex-1 overflow-auto px-5 py-5">
+        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          ${metaMarkup}
+        </div>
+        <div class="mt-5 flex flex-wrap gap-2">
+          <button
+            class="standard-button"
+            data-action="open-query-history"
+            data-history-id="${escapeHtml(detail.item.id)}"
+            type="button"
+          >
+            Open In Editor
+          </button>
+          <button
+            class="standard-button"
+            data-action="toggle-charts-query-history-saved"
+            data-history-id="${escapeHtml(detail.item.id)}"
+            data-next-value="${detail.item.isSaved ? 'false' : 'true'}"
+            title="${detail.item.isSaved ? 'Remove from saved' : 'Save query'}"
+            type="button"
+          >
+            <span data-charts-saved-label>${detail.item.isSaved ? 'Unsave' : 'Save'}</span>
+          </button>
+        </div>
+        ${renderChartsDetailDrawerQuerySection(detail.item.rawSql)}
+        ${renderChartsDetailDrawerResultsSection(state)}
+      </div>
+    </section>
+  `;
+}
+
 function resolveChartCardSizeClass(state) {
     return `query-chart-card--${String(state.charts.chartHeightPreset ?? 'medium')
         .trim()
@@ -391,7 +549,7 @@ function renderChartCard(chart, state, analysis) {
         '<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>",
+        '</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="',
@@ -405,8 +563,8 @@ function renderChartCard(chart, state, analysis) {
         '" type="button">Export PNG</button>',
         '</div></header><div class="query-chart-card__body">',
         renderChartSurface(chart, state, analysis),
-        "</div></article>",
-    ].join("");
+        '</div></article>',
+    ].join('');
 }
 
 export function renderChartsDetail(state) {
@@ -447,12 +605,9 @@ export function renderChartsDetail(state) {
     const charts = detail.charts ?? [];
 
     return `
-    <div class="custom-scrollbar flex-1 overflow-auto">
+    <div class="charts-detail-scroll custom-scrollbar flex-1 overflow-auto">
       <div class="charts-detail-shell">
-        <header class="charts-detail-shell__header">
-          <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">
-            Charts
-          </div>
+        <header class="charts-detail-shell__header" data-charts-detail-header>
           <div class="charts-detail-shell__title">
             <h1 class="mt-2 truncate font-headline text-4xl font-black uppercase tracking-tight text-primary-container">
               ${escapeHtml(detail.item.displayTitle)}
@@ -461,19 +616,6 @@ export function renderChartsDetail(state) {
           <div class="charts-detail-shell__controls">
             <div class="charts-detail-shell__controls-group">
               ${renderChartHeightPresetToggle(state)}
-              <button
-                class="standard-button"
-                data-action="toggle-query-history-panel"
-                data-next-value="${historyVisible ? 'false' : 'true'}"
-                type="button"
-              >
-                <span class="material-symbols-outlined text-sm">${
-                  historyVisible ? 'visibility_off' : 'visibility'
-                }</span>
-                ${historyVisible ? 'Hide Query History' : 'Show Query History'}
-              </button>
-            </div>
-            <div class="charts-detail-shell__controls-group charts-detail-shell__controls-group--end">
               <button
                 class="standard-button"
                 data-action="open-query-history"
@@ -492,12 +634,24 @@ export function renderChartsDetail(state) {
                 New Chart
               </button>
             </div>
+            <div class="charts-detail-shell__controls-group charts-detail-shell__controls-group--end">
+              <button
+                class="standard-button panel-toggle-button ${historyVisible ? '' : 'is-active'}"
+                aria-pressed="${historyVisible ? 'false' : 'true'}"
+                data-action="toggle-query-history-panel"
+                data-next-value="${historyVisible ? 'false' : 'true'}"
+                type="button"
+              >
+                <span class="material-symbols-outlined text-sm">${
+                    historyVisible ? 'visibility_off' : 'visibility'
+                }</span>
+                ${historyVisible ? 'Hide History' : 'Show History'}
+              </button>
+            </div>
           </div>
         </header>
 
-        ${renderQuerySqlSection(state, detail.item.rawSql)}
-
-        <section class="mt-6 space-y-5">
+        <section class="mt-6 space-y-5" data-charts-card-list>
           ${
               charts.length
                   ? charts.map(chart => renderChartCard(chart, state, analysis)).join('')
@@ -517,7 +671,6 @@ export function renderChartsDetail(state) {
           }
         </section>
 
-        ${renderQueryResultsSection(state)}
       </div>
     </div>
   `;
@@ -536,27 +689,26 @@ export function renderChartsView(state) {
     return {
         main: `
       <section class="charts-view">
+        <div class="charts-view__detail">${renderChartsDetail(state)}</div>
         ${
             historyVisible
                 ? `
-                  <aside class="charts-view__sidebar">
-                    <div class="charts-view__sidebar-header">
-                      <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
-                        Query History
-                      </div>
-                      <h2 class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-                        Charts
-                      </h2>
+                  <aside class="query-history-panel charts-view__sidebar">
+                    <div class="query-history-panel__header charts-view__sidebar-header">
+                      ${renderQueryHistoryHeader()}
                       ${renderChartsHistoryTabs(state)}
+                      ${renderQueryHistorySearch({
+                          bind: 'charts-history-search',
+                          value: state.charts.historySearchInput,
+                      })}
                     </div>
                     ${renderChartsList(state)}
                   </aside>
                 `
                 : ''
         }
-        <div class="charts-view__detail">${renderChartsDetail(state)}</div>
       </section>
     `,
-        panel: '',
+        panel: renderChartsDetailDrawer(state),
     };
 }