sqlite-hub 0.9.1 → 0.9.4

package/frontend/js/components/queryEditor.js

@@ -18,36 +18,22 @@ function renderHighlightedQuery(query) {
 }
 
 function renderEditorSurface({ query }) {
-  return `
-    <div class="query-editor-shell flex min-h-0 flex-1 overflow-hidden">
-      <div class="flex w-12 min-h-0 overflow-hidden bg-surface-container-lowest py-4 font-mono text-xs select-none text-outline-variant/30">
-        <div
-          class="query-editor-gutter-track flex w-full flex-col items-center"
-          data-query-editor-gutter
-        >
-          ${renderLineNumbers(query)}
-        </div>
-      </div>
-      <div class="relative min-h-0 flex-1 overflow-hidden bg-surface-container p-6 font-mono text-sm leading-relaxed">
-        <div class="pointer-events-none absolute right-0 top-0 p-4 opacity-5">
-          <span class="material-symbols-outlined text-[120px] font-thin">terminal</span>
-        </div>
-        <div class="query-editor-layer relative z-10 h-full min-h-[140px]">
-          <div
-            aria-hidden="true"
-            class="query-editor-highlight"
-            data-query-editor-highlight
-          >${renderHighlightedQuery(query)}</div>
-          <textarea
-            class="query-editor-input custom-scrollbar relative z-10 h-full min-h-[140px] w-full resize-none border-none focus:ring-0"
-            data-bind="current-query"
-            placeholder="SELECT name FROM sqlite_master WHERE type = 'table';"
-            spellcheck="false"
-          >${escapeHtml(query)}</textarea>
-        </div>
-      </div>
-    </div>
-  `;
+  return [
+    '<div class="query-editor-shell flex min-h-0 flex-1 overflow-hidden">',
+    '<div class="flex w-12 min-h-0 overflow-hidden bg-surface-container-lowest py-4 font-mono text-xs select-none text-outline-variant/30">',
+    '<div class="query-editor-gutter-track flex w-full flex-col items-center" data-query-editor-gutter>',
+    renderLineNumbers(query),
+    "</div></div>",
+    '<div class="relative min-h-0 flex-1 overflow-hidden bg-surface-container p-6 font-mono text-sm leading-relaxed">',
+    '<div class="pointer-events-none absolute right-0 top-0 p-4 opacity-5"><span class="material-symbols-outlined text-[120px] font-thin">terminal</span></div>',
+    '<div class="query-editor-layer relative z-10 h-full min-h-[140px]">',
+    '<div aria-hidden="true" class="query-editor-highlight" data-query-editor-highlight>',
+    renderHighlightedQuery(query),
+    "</div>",
+    '<textarea class="query-editor-input custom-scrollbar relative z-10 h-full min-h-[140px] w-full resize-none border-none focus:ring-0" data-bind="current-query" placeholder="SELECT name FROM sqlite_master WHERE type = \'table\';" spellcheck="false">',
+    escapeHtml(query),
+    "</textarea></div></div></div>",
+  ].join("");
 }
 
 export function renderQueryEditor({

package/frontend/js/components/queryHistoryDetail.js

@@ -126,169 +126,98 @@ export function renderQueryHistoryDetail({
     `;
   }
 
-  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>
-            <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">
-              Query Detail
-            </div>
-            <h2 class="mt-1 font-headline text-lg font-black uppercase tracking-tight text-on-surface">
-              ${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">
-          ${renderStatusBadge(item.queryType, getQueryTypeTone(item.queryType))}
-          ${item.isSaved ? renderStatusBadge("saved", "primary") : ""}
-          ${item.isDestructive ? renderStatusBadge("destructive", "warning") : ""}
-          ${item.lastRun ? renderStatusBadge(item.lastRun.status, item.lastRun.status === "error" ? "alert" : "success") : ""}
-        </div>
-      </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">
-          ${renderDetailMetaItem("Last Used", formatDateTime(item.lastUsedAt))}
-          ${renderDetailMetaItem("First Executed", formatDateTime(item.firstExecutedAt))}
-          ${renderDetailMetaItem("Use Count", formatNumber(item.useCount))}
-          ${renderDetailMetaItem(
-            "Tables",
-            item.tablesDetected?.length ? item.tablesDetected.join(", ") : "None detected"
-          )}
-        </div>
+  const chartButton = canOpenQueryHistoryInCharts(item)
+    ? [
+        '<button class="standard-button" data-action="navigate" data-to="/charts/',
+        encodeURIComponent(item.id),
+        '" type="button"><span class="material-symbols-outlined text-sm">bar_chart</span>Open In Charts</button>',
+      ].join("")
+    : "";
+  const statusMarkup = [
+    renderStatusBadge(item.queryType, getQueryTypeTone(item.queryType)),
+    item.isSaved ? renderStatusBadge("saved", "primary") : "",
+    item.isDestructive ? renderStatusBadge("destructive", "warning") : "",
+    item.lastRun
+      ? renderStatusBadge(item.lastRun.status, item.lastRun.status === "error" ? "alert" : "success")
+      : "",
+  ].join("");
+  const metaMarkup = [
+    renderDetailMetaItem("Last Used", formatDateTime(item.lastUsedAt)),
+    renderDetailMetaItem("First Executed", formatDateTime(item.firstExecutedAt)),
+    renderDetailMetaItem("Use Count", formatNumber(item.useCount)),
+    renderDetailMetaItem(
+      "Tables",
+      item.tablesDetected?.length ? item.tablesDetected.join(", ") : "None detected"
+    ),
+  ].join("");
+  const runsMarkup = runs.length
+    ? runs.map((run) => renderRunItem(run)).join("")
+    : '<div class="border border-outline-variant/10 bg-surface-container px-3 py-4 text-sm text-on-surface-variant/65">No execution runs recorded yet.</div>';
 
-        <form class="mt-5" data-form="save-query-history-title">
-          <input name="historyId" type="hidden" value="${escapeHtml(item.id)}" />
-          <label class="block text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-            Custom Title
-          </label>
-          <div class="mt-2 flex gap-2">
-            <input
-              class="control-input flex-1 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"
-              name="title"
-              placeholder="${escapeHtml(item.displayTitle)}"
-              type="text"
-              value="${escapeHtml(item.title ?? "")}"
-            />
-            <button
-              class="standard-button"
-              type="submit"
-            >
-              Save
-            </button>
-          </div>
-          <p class="mt-2 text-xs text-on-surface-variant/60">
-            Leave empty to fall back to the auto title generated from the query.
-          </p>
-        </form>
-
-        <div class="mt-5 flex flex-wrap gap-2">
-          <button
-            class="standard-button"
-            data-action="open-query-history"
-            data-history-id="${escapeHtml(item.id)}"
-            type="button"
-          >
-            Open In Editor
-          </button>
-          ${
-            canOpenQueryHistoryInCharts(item)
-              ? `
-                <button
-                  class="standard-button"
-                  data-action="navigate"
-                  data-to="/charts/${encodeURIComponent(item.id)}"
-                  type="button"
-                >
-                  <span class="material-symbols-outlined text-sm">bar_chart</span>
-                  Open In Charts
-                </button>
-              `
-              : ""
-          }
-          <button
-            class="standard-button"
-            data-action="run-query-history"
-            data-history-id="${escapeHtml(item.id)}"
-            type="button"
-          >
-            Run Now
-          </button>
-          <button
-            class="standard-button"
-            data-action="toggle-query-history-saved"
-            data-history-id="${escapeHtml(item.id)}"
-            data-next-value="${item.isSaved ? "false" : "true"}"
-            type="button"
-          >
-            ${item.isSaved ? "Unsave" : "Save"}
-          </button>
-          <button
-            class="delete-button"
-            data-action="open-delete-query-history-modal"
-            data-history-id="${escapeHtml(item.id)}"
-            type="button"
-          >
-            Delete
-          </button>
-        </div>
-
-        <div class="mt-6">
-          <div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-            SQL
-          </div>
-          <pre class="query-history-detail-sql custom-scrollbar mt-2 overflow-auto border border-outline-variant/10 bg-surface-container-lowest p-4 font-mono text-sm leading-6 text-on-surface"><code>${highlightSql(
-            item.rawSql
-          )}</code></pre>
-        </div>
-
-        <form class="mt-6" data-form="save-query-history-notes">
-          <input name="historyId" type="hidden" value="${escapeHtml(item.id)}" />
-          <label class="block text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-            Notes
-          </label>
-          <textarea class="custom-scrollbar mt-2 min-h-[120px] w-full resize-y border border-outline-variant/20 bg-surface-container px-3 py-3 text-sm leading-6 text-on-surface outline-none placeholder:text-on-surface-variant/35 focus:border-primary-container" name="notes" placeholder="Add context, caveats, or why this query matters...">${escapeHtml(
-            item.notes ?? ""
-          )}</textarea>
-          <div class="mt-2 flex justify-end">
-            <button
-              class="standard-button"
-              type="submit"
-            >
-              Save Notes
-            </button>
-          </div>
-        </form>
-
-        <div class="mt-6">
-          <div class="flex items-center justify-between gap-3">
-            <div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-              Latest Runs
-            </div>
-            <div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/40">
-              ${escapeHtml(formatNumber(runs.length))}
-            </div>
-          </div>
-          <div class="mt-3 space-y-3">
-            ${
-              runs.length
-                ? runs.map((run) => renderRunItem(run)).join("")
-                : `
-                    <div class="border border-outline-variant/10 bg-surface-container px-3 py-4 text-sm text-on-surface-variant/65">
-                      No execution runs recorded yet.
-                    </div>
-                  `
-            }
-          </div>
-        </div>
-      </div>
-    </section>
-  `;
+  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>',
+    '<div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">Query Detail</div>',
+    '<h2 class="mt-1 font-headline text-lg font-black uppercase tracking-tight text-on-surface">',
+    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">',
+    statusMarkup,
+    "</div></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>",
+    '<form class="mt-5" data-form="save-query-history-title">',
+    '<input name="historyId" type="hidden" value="',
+    escapeHtml(item.id),
+    '" />',
+    '<label class="block text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">Custom Title</label>',
+    '<div class="mt-2 flex gap-2"><input class="control-input flex-1 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" name="title" placeholder="',
+    escapeHtml(item.displayTitle),
+    '" type="text" value="',
+    escapeHtml(item.title ?? ""),
+    '" /><button class="standard-button" type="submit">Save</button></div>',
+    '<p class="mt-2 text-xs text-on-surface-variant/60">Leave empty to fall back to the auto title generated from the query.</p>',
+    "</form>",
+    '<div class="mt-5 flex flex-wrap gap-2">',
+    '<button class="standard-button" data-action="open-query-history" data-history-id="',
+    escapeHtml(item.id),
+    '" type="button">Open In Editor</button>',
+    chartButton,
+    '<button class="standard-button" data-action="run-query-history" data-history-id="',
+    escapeHtml(item.id),
+    '" type="button">Run Now</button>',
+    '<button class="standard-button" data-action="toggle-query-history-saved" data-history-id="',
+    escapeHtml(item.id),
+    '" data-next-value="',
+    item.isSaved ? "false" : "true",
+    '" type="button">',
+    item.isSaved ? "Unsave" : "Save",
+    "</button>",
+    '<button class="delete-button" data-action="open-delete-query-history-modal" data-history-id="',
+    escapeHtml(item.id),
+    '" type="button">Delete</button></div>',
+    '<div class="mt-6"><div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">SQL</div>',
+    '<pre class="query-history-detail-sql custom-scrollbar mt-2 overflow-auto border border-outline-variant/10 bg-surface-container-lowest p-4 font-mono text-sm leading-6 text-on-surface"><code>',
+    highlightSql(item.rawSql),
+    "</code></pre></div>",
+    '<form class="mt-6" data-form="save-query-history-notes">',
+    '<input name="historyId" type="hidden" value="',
+    escapeHtml(item.id),
+    '" />',
+    '<label class="block text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">Notes</label>',
+    '<textarea class="custom-scrollbar mt-2 min-h-[120px] w-full resize-y border border-outline-variant/20 bg-surface-container px-3 py-3 text-sm leading-6 text-on-surface outline-none placeholder:text-on-surface-variant/35 focus:border-primary-container" name="notes" placeholder="Add context, caveats, or why this query matters...">',
+    escapeHtml(item.notes ?? ""),
+    '</textarea><div class="mt-2 flex justify-end"><button class="standard-button" type="submit">Save Notes</button></div></form>',
+    '<div class="mt-6"><div class="flex items-center justify-between gap-3">',
+    '<div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">Latest Runs</div>',
+    '<div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/40">',
+    escapeHtml(formatNumber(runs.length)),
+    '</div></div><div class="mt-3 space-y-3">',
+    runsMarkup,
+    "</div></div></div></section>",
+  ].join("");
 }

package/frontend/js/components/queryHistoryPanel.js

@@ -20,85 +20,69 @@ export function renderQueryHistoryListItem(item, activeHistoryId, selectedHistor
   const isActive = Number(activeHistoryId) === Number(item.id);
   const isSelected = Number(selectedHistoryId) === Number(item.id);
   const visibleTables = (item.tablesDetected ?? []).slice(0, 3);
+  const itemClasses = [
+    "query-history-item",
+    isActive ? "is-active" : "",
+    item.lastRun?.status === "error" ? "is-error" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+  const tableMarkup = visibleTables
+    .map((tableName) =>
+      [
+        '<span class="border border-outline-variant/20 bg-surface-highest px-2 py-1">',
+        escapeHtml(tableName),
+        "</span>",
+      ].join("")
+    )
+    .join("");
 
-  return `
-    <article class="query-history-item ${isActive ? "is-active" : ""} ${
-      item.lastRun?.status === "error" ? "is-error" : ""
-    }">
-      <button
-        class="query-history-item-hit ${isActive ? "is-active" : ""}"
-        data-action="select-query-history-item"
-        data-history-id="${escapeHtml(item.id)}"
-        type="button"
-      >
-        <div class="flex flex-wrap items-center gap-2">
-          <span class="truncate font-headline text-sm font-bold uppercase tracking-tight text-on-surface">
-            ${escapeHtml(item.displayTitle)}
-          </span>
-          ${renderStatusBadge(item.queryType, getQueryTypeTone(item.queryType))}
-          ${item.isSaved ? renderStatusBadge("saved", "primary") : ""}
-          ${item.isDestructive ? renderStatusBadge("destructive", "warning") : ""}
-        </div>
-        <p class="query-history-sql-preview mt-2 text-left font-mono text-xs leading-5 text-on-surface-variant/75">
-          ${escapeHtml(item.previewSql)}
-        </p>
-      </button>
-      <div class="flex items-center justify-between gap-3 border-t border-outline-variant/10 px-3 pb-3 pt-2">
-        <div class="min-w-0 flex flex-wrap gap-2 text-[10px] font-mono uppercase tracking-[0.14em] text-on-surface-variant/55">
-          ${visibleTables
-            .map(
-              (tableName) => `
-                <span class="border border-outline-variant/20 bg-surface-highest px-2 py-1">
-                  ${escapeHtml(tableName)}
-                </span>
-              `
-            )
-            .join("")}
-        </div>
-        <div class="flex items-center gap-1">
-          <button
-            class="query-history-icon-button"
-            data-action="open-query-history"
-            data-history-id="${escapeHtml(item.id)}"
-            title="Open in editor"
-            type="button"
-          >
-            <span class="material-symbols-outlined text-[18px]">edit_note</span>
-          </button>
-          <button
-            class="query-history-icon-button"
-            data-action="run-query-history"
-            data-history-id="${escapeHtml(item.id)}"
-            title="Run query"
-            type="button"
-          >
-            <span class="material-symbols-outlined text-[18px]">play_arrow</span>
-          </button>
-          <button
-            class="query-history-icon-button ${item.isSaved ? "is-active" : ""}"
-            data-action="toggle-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>
-          <button
-            class="query-history-icon-button ${isSelected ? "is-active" : ""}"
-            data-action="select-query-history-item"
-            data-history-id="${escapeHtml(item.id)}"
-            title="Open query detail"
-            type="button"
-          >
-            <span class="material-symbols-outlined text-[18px]">info</span>
-          </button>
-        </div>
-      </div>
-    </article>
-  `;
+  return [
+    '<article class="',
+    itemClasses,
+    '"><button class="query-history-item-hit ',
+    isActive ? "is-active" : "",
+    '" data-action="select-query-history-item" data-history-id="',
+    escapeHtml(item.id),
+    '" type="button">',
+    '<div class="flex flex-wrap items-center gap-2"><span class="truncate font-headline text-sm font-bold uppercase tracking-tight text-on-surface">',
+    escapeHtml(item.displayTitle),
+    "</span>",
+    renderStatusBadge(item.queryType, getQueryTypeTone(item.queryType)),
+    item.isSaved ? renderStatusBadge("saved", "primary") : "",
+    item.isDestructive ? renderStatusBadge("destructive", "warning") : "",
+    "</div>",
+    '<p class="query-history-sql-preview mt-2 text-left font-mono text-xs leading-5 text-on-surface-variant/75">',
+    escapeHtml(item.previewSql),
+    "</p></button>",
+    '<div class="flex items-center justify-between gap-3 border-t border-outline-variant/10 px-3 pb-3 pt-2">',
+    '<div class="min-w-0 flex flex-wrap gap-2 text-[10px] font-mono uppercase tracking-[0.14em] text-on-surface-variant/55">',
+    tableMarkup,
+    '</div><div class="flex items-center gap-1">',
+    '<button class="query-history-icon-button" data-action="open-query-history" data-history-id="',
+    escapeHtml(item.id),
+    '" title="Open in editor" type="button"><span class="material-symbols-outlined text-[18px]">edit_note</span></button>',
+    '<button class="query-history-icon-button" data-action="run-query-history" data-history-id="',
+    escapeHtml(item.id),
+    '" title="Run query" type="button"><span class="material-symbols-outlined text-[18px]">play_arrow</span></button>',
+    '<button class="query-history-icon-button ',
+    item.isSaved ? "is-active" : "",
+    '" data-action="toggle-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>",
+    '<button class="query-history-icon-button ',
+    isSelected ? "is-active" : "",
+    '" data-action="select-query-history-item" data-history-id="',
+    escapeHtml(item.id),
+    '" title="Open query detail" type="button"><span class="material-symbols-outlined text-[18px]">info</span></button>',
+    "</div></div></article>",
+  ].join("");
 }
 
 function renderQueryHistoryTabs(activeTab, historyTotal) {
@@ -109,27 +93,25 @@ function renderQueryHistoryTabs(activeTab, historyTotal) {
     { id: "failed", label: "Failed" },
   ];
 
-  return `
-    <div class="flex items-center gap-2">
-      ${tabs
-        .map(
-          (tab) => `
-            <button
-              class="query-history-tab ${activeTab === tab.id ? "is-active" : ""}"
-              data-action="set-query-history-tab"
-              data-tab="${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">
-        ${escapeHtml(formatNumber(historyTotal))}
-      </span>
-    </div>
-  `;
+  return [
+    '<div class="flex items-center gap-2">',
+    tabs
+      .map((tab) =>
+        [
+          '<button class="query-history-tab ',
+          activeTab === tab.id ? "is-active" : "",
+          '" data-action="set-query-history-tab" data-tab="',
+          tab.id,
+          '" type="button">',
+          escapeHtml(tab.label),
+          "</button>",
+        ].join("")
+      )
+      .join(""),
+    '<span class="ml-auto text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/50">',
+    escapeHtml(formatNumber(historyTotal)),
+    "</span></div>",
+  ].join("");
 }
 
 export function renderQueryHistoryPanel({
@@ -139,6 +121,7 @@ export function renderQueryHistoryPanel({
   error = null,
   activeTab = "recent",
   search = "",
+  committedSearch = "",
   total = 0,
   hasMore = false,
   activeHistoryId = null,
@@ -176,7 +159,14 @@ export function renderQueryHistoryPanel({
           />
         </label>
       </div>
-      <div class="custom-scrollbar min-h-0 flex-1 overflow-auto px-3 py-3">
+      <div
+        class="custom-scrollbar min-h-0 flex-1 overflow-auto px-3 py-3"
+        data-query-history-committed-search="${escapeHtml(committedSearch)}"
+        data-query-history-loading-more="${loadingMore ? "true" : "false"}"
+        data-query-history-search="${escapeHtml(search)}"
+        data-query-history-scroll
+        data-query-history-tab="${escapeHtml(activeTab)}"
+      >
         ${
           error
             ? `

package/frontend/js/components/queryResults.js

@@ -76,7 +76,9 @@ export function renderQueryResultsPane(
                       editable ? "cursor-pointer hover:bg-surface-bright" : "hover:bg-surface-bright"
                     }`,
                   getRowAttrs: (_, index) =>
-                    editable ? `data-action="select-editor-row" data-row-index="${index}"` : "",
+                    editable
+                      ? ['data-action="select-editor-row" data-row-index="', index, '"'].join("")
+                      : "",
                 })
             : `
                 <div class="flex h-full flex-col items-center justify-center text-center text-on-surface-variant/35">