sqlite-hub 0.17.2 → 1.1.0

package/frontend/js/components/modal.js

@@ -7,6 +7,7 @@ import {
   isMarkdownTodoCopyColumnMode,
 } from "../utils/copyColumnExport.js";
 import { renderConnectionLogo } from "./connectionLogo.js";
+import { renderTextInput } from "./formControls.js";
 import {
   analyzeQueryChartResult,
   getQueryChartTypeLabel,
@@ -27,13 +28,7 @@ function renderField({ label, name, type = "text", placeholder = "", value = ""
       <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
         ${escapeHtml(label)}
       </span>
-      <input
-        class="control-input w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
-        name="${escapeHtml(name)}"
-        placeholder="${escapeHtml(placeholder)}"
-        type="${escapeHtml(type)}"
-        value="${escapeHtml(value)}"
-      />
+      ${renderTextInput({ name, placeholder, type, value })}
     </label>
   `;
 }
@@ -152,14 +147,33 @@ function renderError(error) {
   `;
 }
 
-function renderOpenConnectionForm(modal) {
+export function renderOpenConnectionForm(modal) {
   return `
     <form class="space-y-5" data-form="open-connection">
-      ${renderField({
-        label: "SQLite File Path",
-        name: "path",
-        placeholder: "/absolute/path/to/database.sqlite",
-      })}
+      <label class="block space-y-2">
+        <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          SQLite File Path
+        </span>
+        <span class="flex items-stretch gap-2">
+          ${renderTextInput({
+            className: "min-w-0 flex-1",
+            dataAttributes: { openDatabasePath: true },
+            name: "path",
+            placeholder: "/absolute/path/to/database.sqlite",
+          })}
+          <button
+            class="standard-button flex-none"
+            data-action="choose-open-database-path"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-sm">folder_open</span>
+            <span data-open-database-path-button-label>Browse...</span>
+          </button>
+        </span>
+        <span class="block text-[11px] leading-5 text-on-surface-variant/60">
+          Choose an existing SQLite file, or enter an absolute path manually.
+        </span>
+      </label>
       ${renderField({
         label: "Label",
         name: "label",
@@ -272,13 +286,12 @@ export function renderCreateDatabaseForm(modal) {
           New SQLite File Path
         </span>
         <span class="flex items-stretch gap-2">
-          <input
-            class="control-input min-w-0 flex-1 border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
-            data-create-database-path
-            name="path"
-            placeholder="/absolute/path/to/new-database.sqlite"
-            type="text"
-          />
+          ${renderTextInput({
+            className: "min-w-0 flex-1",
+            dataAttributes: { createDatabasePath: true },
+            name: "path",
+            placeholder: "/absolute/path/to/new-database.sqlite",
+          })}
           <button
             class="standard-button flex-none"
             data-action="choose-create-database-path"
@@ -847,6 +860,28 @@ function renderDeleteDocumentForm(modal) {
   ].join("");
 }
 
+export function renderDeleteApiTokenForm(modal) {
+  return [
+    '<form class="space-y-5" data-form="delete-api-token-confirm"><div class="space-y-3">',
+    '<p class="text-sm leading-7 text-on-surface">Delete API token <span class="font-bold text-primary-container">',
+    escapeHtml(modal.tokenName ?? "API token"),
+    "</span>?</p>",
+    '<p class="text-sm leading-7 text-on-surface-variant/65">Requests using this token will immediately lose access to <span class="font-semibold text-on-surface">',
+    escapeHtml(modal.databaseLabel ?? "the active database"),
+    ".</span></p>",
+    '<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 font-mono text-[10px] text-on-surface-variant/55">',
+    escapeHtml(modal.tokenPrefix ?? ""),
+    "...</div>",
+    "</div>",
+    renderError(modal.error),
+    '<div class="flex items-center justify-between gap-3 pt-2">',
+    '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
+    '<button class="delete-button" type="submit">',
+    modal.submitting ? "Deleting..." : "Delete Token",
+    "</button></div></form>",
+  ].join("");
+}
+
 function getDocumentInsertQueryTitle(query) {
   return query?.displayTitle || query?.title || query?.previewSql || query?.rawSql || "Saved query";
 }
@@ -983,6 +1018,20 @@ function getExportOptions() {
       meta: ".md",
       preview: ["| id | name |", "| --- | --- |"],
     },
+    {
+      label: "JSON",
+      format: "json",
+      icon: "data_object",
+      meta: ".json",
+      preview: ['[', '  {"id":1,"name":"Acme"}', ']'],
+    },
+    {
+      label: "Parquet",
+      format: "parquet",
+      icon: "dataset",
+      meta: ".parquet",
+      preview: ["columnar binary", "typed row groups"],
+    },
     {
       label: "Duplicate",
       format: "table",
@@ -1012,7 +1061,7 @@ function renderTextExportModal(modal, action) {
           ${disabledAttribute}
         />
       </label>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
         ${getExportOptions()
           .map(
             (option) => `
@@ -1687,6 +1736,11 @@ export function renderModal(state) {
       title: "Delete Document",
       body: renderDeleteDocumentForm(modal),
     },
+    "delete-api-token": {
+      eyebrow: "Settings // Confirm token deletion",
+      title: "Delete API Token",
+      body: renderDeleteApiTokenForm(modal),
+    },
     "document-insert-table": {
       eyebrow: "Documents // Saved query output",
       title: "Insert Table",
@@ -1744,6 +1798,8 @@ export function renderModal(state) {
         modal.kind === "row-update-preview" ||
         modal.kind === "table-designer-constraints"
           ? "max-w-3xl"
+          : modal.kind === "query-export" || modal.kind === "data-export"
+            ? "max-w-4xl"
           : "max-w-xl"
       } border border-outline-variant/20 bg-surface-container shadow-[0_24px_80px_rgba(0,0,0,0.45)]">
         <div class="flex items-start justify-between gap-4 border-b border-outline-variant/10 bg-surface-container-low px-6 py-5">

package/frontend/js/components/queryChartRenderer.js

@@ -7,6 +7,7 @@ import {
 import { analyzeQueryChartResult, validateQueryChartConfig } from "../lib/queryCharts.js";
 
 const chartInstances = new Map();
+const chartHosts = new Map();
 const resizeObservers = new Map();
 
 function getEchartsRuntime() {
@@ -41,6 +42,8 @@ function disposeChart(chartId) {
     chartInstances.delete(chartId);
   }
 
+  chartHosts.delete(chartId);
+
   const observer = resizeObservers.get(chartId);
 
   if (observer) {
@@ -58,7 +61,15 @@ export function mountQueryChartRenderer(state) {
   const charts = state.charts.detail?.charts ?? [];
   const result = state.charts.result;
 
-  teardownQueryChartRenderer();
+  const activeChartIds = new Set(charts.map((chart) => String(chart.id)));
+
+  Array.from(chartInstances.keys()).forEach((chartId) => {
+    const host = chartHosts.get(chartId);
+
+    if (!activeChartIds.has(chartId) || !(host instanceof HTMLElement) || !host.isConnected) {
+      disposeChart(chartId);
+    }
+  });
 
   if (!echartsRuntime || !result || !charts.length) {
     return;
@@ -85,17 +96,31 @@ export function mountQueryChartRenderer(state) {
       return;
     }
 
+    const chartId = String(chart.id);
+    const existingInstance = chartInstances.get(chartId);
+    const existingHost = chartHosts.get(chartId);
+
+    if (existingInstance && existingHost === host) {
+      existingInstance.resize();
+      return;
+    }
+
+    if (existingInstance) {
+      disposeChart(chartId);
+    }
+
     const instance = echartsRuntime.init(host);
 
     instance.setOption(buildOption(chart, result.rows ?? [], analysis), true);
-    chartInstances.set(String(chart.id), instance);
+    chartInstances.set(chartId, instance);
+    chartHosts.set(chartId, host);
 
     const resizeObserver = new ResizeObserver(() => {
       instance.resize();
     });
 
     resizeObserver.observe(host);
-    resizeObservers.set(String(chart.id), resizeObserver);
+    resizeObservers.set(chartId, resizeObserver);
   });
 }
 

package/frontend/js/components/queryEditor.js

@@ -1,5 +1,4 @@
 import { escapeHtml, highlightSql } from "../utils/format.js";
-import { renderActionBar } from "./actionBar.js";
 
 function renderLineNumbers(query) {
   const lineCount = Math.max(1, String(query || "").split("\n").length);
@@ -40,20 +39,11 @@ export function renderQueryEditor({
   query,
   executing = false,
   exporting = false,
-  historyLoading = false,
-  historyTotal = 0,
   editorVisible = true,
   historyVisible = true,
 }) {
   const secondaryButtonClass = "standard-button";
   const left = `
-    <div class="flex items-center gap-2 text-[10px] font-mono uppercase tracking-widest text-on-surface-variant/40">
-      <span class="material-symbols-outlined text-xs">history</span>
-      ${historyLoading ? "Loading history..." : `${historyTotal} queries tracked`}
-    </div>
-  `;
-
-  const right = `
     <button
       class="${secondaryButtonClass}"
       data-action="toggle-editor-panel"
@@ -63,15 +53,9 @@ export function renderQueryEditor({
       <span class="material-symbols-outlined text-sm">${editorVisible ? "keyboard_arrow_down" : "terminal"}</span>
       ${editorVisible ? "Hide Editor" : "Show Editor"}
     </button>
-    <button
-      class="${secondaryButtonClass}"
-      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>
+  `;
+
+  const center = `
     <button
       class="${secondaryButtonClass}"
       data-action="format-current-query"
@@ -104,14 +88,26 @@ export function renderQueryEditor({
     </button>
   `;
 
+  const right = `
+    <button
+      class="${secondaryButtonClass}"
+      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>
+  `;
+
   return `
     <div class="flex h-full min-h-0 flex-col">
       <div class="bg-surface-container-low px-6 py-3">
-        ${renderActionBar({
-          left,
-          right,
-          className: "flex-wrap",
-        })}
+        <div class="query-editor-toolbar">
+          <div class="query-editor-toolbar__left">${left}</div>
+          <div class="query-editor-toolbar__center">${center}</div>
+          <div class="query-editor-toolbar__right">${right}</div>
+        </div>
       </div>
       ${
         editorVisible

package/frontend/js/components/queryHistoryDetail.js

@@ -163,7 +163,7 @@ export function renderQueryHistoryDetail({
     escapeHtml(item.displayTitle),
     "</h2></div>",
     '<button class="query-history-icon-button" data-action="clear-query-history-selection" type="button"><span class="material-symbols-outlined text-[18px]">close</span></button>',
-    '</div><div class="mt-4 flex flex-wrap gap-2">',
+    '</div><div class="query-history-badge-row mt-4 flex flex-wrap gap-2">',
     statusMarkup,
     "</div></div>",
     '<div class="custom-scrollbar min-h-0 flex-1 overflow-auto px-5 py-5">',

package/frontend/js/components/queryHistoryHeader.js

@@ -0,0 +1,48 @@
+import { escapeHtml } from '../utils/format.js';
+
+export function renderQueryHistoryHeader({
+    title = 'Query History',
+    icon = 'history',
+    closeAction = 'toggle-query-history-panel',
+    closeTitle = 'Hide query history',
+    nextValue = 'false',
+} = {}) {
+    return `
+      <div class="flex items-center justify-between gap-3">
+        <div class="flex items-center gap-2">
+          <span class="material-symbols-outlined text-[18px] text-primary-container">${escapeHtml(icon)}</span>
+          <span class="font-headline text-xs font-black uppercase tracking-[0.18em] text-primary-container">
+            ${escapeHtml(title)}
+          </span>
+        </div>
+        <button
+          class="query-history-icon-button"
+          data-action="${escapeHtml(closeAction)}"
+          data-next-value="${escapeHtml(nextValue)}"
+          title="${escapeHtml(closeTitle)}"
+          type="button"
+        >
+          <span class="material-symbols-outlined text-[18px]">close</span>
+        </button>
+      </div>
+    `;
+}
+
+export function renderQueryHistorySearch({
+    bind = 'query-history-search',
+    value = '',
+    placeholder = 'Search SQL, titles, notes...',
+} = {}) {
+    return `
+      <label class="mt-4 block">
+        <span class="sr-only">Search query history</span>
+        <input
+          class="control-input w-full border border-outline-variant/20 bg-surface-container text-sm text-on-surface outline-none placeholder:text-on-surface-variant/35 focus:border-primary-container"
+          data-bind="${escapeHtml(bind)}"
+          placeholder="${escapeHtml(placeholder)}"
+          type="search"
+          value="${escapeHtml(value)}"
+        />
+      </label>
+    `;
+}

package/frontend/js/components/queryHistoryList.js

@@ -0,0 +1,132 @@
+import { escapeHtml, formatNumber } from '../utils/format.js';
+
+export function getQueryTypeTone(queryType) {
+    if (queryType === 'select' || queryType === 'update') {
+        return 'success';
+    }
+
+    if (queryType === 'pragma') {
+        return 'primary';
+    }
+
+    return 'muted';
+}
+
+export function renderQueryHistoryBadgeRow(markup, { compact = true, className = '' } = {}) {
+    const rowClasses = ['query-history-badge-row', compact ? 'query-history-badge-row--compact' : '', className]
+        .filter(Boolean)
+        .join(' ');
+
+    return `<div class="${rowClasses}">${markup}</div>`;
+}
+
+export function renderQueryHistoryTabs({ tabs = [], activeTab = 'recent', action, count = null, countAttr = '' }) {
+    const activeCount = count ?? tabs.find(tab => tab.id === activeTab)?.count ?? 0;
+
+    return [
+        '<div class="query-history-tabs">',
+        tabs
+            .map(tab =>
+                [
+                    '<button class="query-history-tab ',
+                    activeTab === tab.id ? 'is-active' : '',
+                    '" data-action="',
+                    escapeHtml(action),
+                    '" data-tab="',
+                    escapeHtml(tab.id),
+                    '" type="button">',
+                    escapeHtml(tab.label),
+                    '</button>',
+                ].join(''),
+            )
+            .join(''),
+        '<span class="query-history-tabs__count" ',
+        countAttr,
+        '>',
+        escapeHtml(formatNumber(activeCount)),
+        '</span></div>',
+    ].join('');
+}
+
+export function renderQueryHistoryIconButton({
+    action,
+    historyId = null,
+    icon,
+    title,
+    active = false,
+    nextValue = null,
+    attrs = '',
+}) {
+    return [
+        '<button class="query-history-icon-button ',
+        active ? 'is-active' : '',
+        '" data-action="',
+        escapeHtml(action),
+        '"',
+        historyId === null || historyId === undefined ? '' : ` data-history-id="${escapeHtml(historyId)}"`,
+        nextValue === null || nextValue === undefined ? '' : ` data-next-value="${escapeHtml(nextValue)}"`,
+        attrs ? ` ${attrs}` : '',
+        ' title="',
+        escapeHtml(title),
+        '" type="button"><span class="material-symbols-outlined text-[18px]">',
+        escapeHtml(icon),
+        '</span></button>',
+    ].join('');
+}
+
+export function renderQueryHistoryActionGroup(actions = []) {
+    return `<div class="query-history-item-actions">${actions.filter(Boolean).join('')}</div>`;
+}
+
+export function renderQueryHistoryListItem({
+    title,
+    preview,
+    historyId,
+    active = false,
+    error = false,
+    hitAction,
+    hitAttrs = '',
+    itemAttrs = '',
+    titleAttrs = '',
+    badgesMarkup = '',
+    footerMetaMarkup = '',
+    actionsMarkup = '',
+}) {
+    const itemClasses = ['query-history-item', active ? 'is-active' : '', error ? 'is-error' : '']
+        .filter(Boolean)
+        .join(' ');
+    const footerMeta = String(footerMetaMarkup ?? '').trim()
+        ? ['<div class="query-history-item-meta">', footerMetaMarkup, '</div>'].join('')
+        : '';
+
+    return [
+        '<article class="',
+        itemClasses,
+        '"',
+        itemAttrs ? ` ${itemAttrs}` : '',
+        '><button class="query-history-item-hit ',
+        active ? 'is-active' : '',
+        '" data-action="',
+        escapeHtml(hitAction),
+        '" data-history-id="',
+        escapeHtml(historyId),
+        '"',
+        hitAttrs ? ` ${hitAttrs}` : '',
+        ' type="button">',
+        '<div class="query-history-item-main">',
+        '<span class="query-history-item-title"',
+        titleAttrs ? ` ${titleAttrs}` : '',
+        '>',
+        escapeHtml(title),
+        '</span>',
+        badgesMarkup,
+        '</div>',
+        '<p class="query-history-sql-preview">',
+        escapeHtml(preview),
+        '</p></button>',
+        '<div class="query-history-item-footer">',
+        footerMeta,
+        actionsMarkup,
+        '</div></article>',
+    ].join('');
+}