sqlite-hub 0.4.0 → 0.6.0

package/frontend/js/components/queryEditor.js

@@ -9,23 +9,6 @@ function renderLineNumbers(query) {
     .join("");
 }
 
-function renderHistoryOptions(history) {
-  if (!history.length) {
-    return '<option value="">No recent statements</option>';
-  }
-
-  return [
-    '<option value="">Load recent statement...</option>',
-    ...history.map(
-      (entry) => `
-        <option value="${escapeHtml(entry.id)}">
-          ${escapeHtml(entry.sql.replace(/\s+/g, " ").slice(0, 96))}
-        </option>
-      `
-    ),
-  ].join("");
-}
-
 function renderHighlightedQuery(query) {
   if (query) {
     return highlightSql(query);
@@ -34,13 +17,41 @@ function renderHighlightedQuery(query) {
   return '<span class="text-on-surface-variant/35">SELECT name FROM sqlite_master WHERE type = \'table\';</span>';
 }
 
+function renderEditorSurface({ query }) {
+  return `
+    <div class="flex min-h-0 flex-1 overflow-hidden">
+      <div class="flex w-12 flex-col items-center bg-surface-container-lowest py-4 font-mono text-xs select-none text-outline-variant/30">
+        ${renderLineNumbers(query)}
+      </div>
+      <div class="relative 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>
+  `;
+}
+
 export function renderQueryEditor({
   query,
   title,
   executing = false,
   exporting = false,
-  history = [],
   historyLoading = false,
+  historyTotal = 0,
 }) {
   const left = `
     <div class="flex items-center gap-2 bg-surface-container-lowest px-3 py-1">
@@ -51,24 +62,11 @@ export function renderQueryEditor({
     </div>
     <div class="hidden items-center gap-2 text-[10px] font-mono uppercase tracking-widest text-on-surface-variant/40 md:flex">
       <span class="material-symbols-outlined text-xs">history</span>
-      ${historyLoading ? "Loading history..." : `${history.length} statements in history`}
+      ${historyLoading ? "Loading history..." : `${historyTotal} queries tracked`}
     </div>
   `;
 
   const right = `
-    <select
-      class="min-w-[220px] border border-outline-variant/20 bg-surface-container-lowest px-3 py-2 text-[10px] font-mono uppercase tracking-[0.14em] text-on-surface-variant outline-none"
-      data-bind="history-entry"
-    >
-      ${renderHistoryOptions(history)}
-    </select>
-    <button
-      class="px-4 py-1.5 text-[10px] font-bold uppercase tracking-widest text-on-surface hover:bg-surface-container-highest transition-colors"
-      data-action="clear-sql-history"
-      type="button"
-    >
-      Clear History
-    </button>
     <button
       class="px-4 py-1.5 text-[10px] font-bold uppercase tracking-widest text-on-surface hover:bg-surface-container-highest transition-colors"
       data-action="clear-query"
@@ -93,7 +91,7 @@ export function renderQueryEditor({
   `;
 
   return `
-    <div class="flex h-full flex-col">
+    <div class="flex h-full min-h-0 flex-col">
       <div class="bg-surface-container-low px-6 py-3">
         ${renderActionBar({
           left,
@@ -101,28 +99,8 @@ export function renderQueryEditor({
           className: "flex-wrap",
         })}
       </div>
-      <div class="flex flex-1 overflow-hidden">
-        <div class="flex w-12 flex-col items-center bg-surface-container-lowest py-4 font-mono text-xs select-none text-outline-variant/30">
-          ${renderLineNumbers(query)}
-        </div>
-        <div class="relative 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]">
-            <pre
-              aria-hidden="true"
-              class="query-editor-highlight"
-              data-query-editor-highlight
-            >${renderHighlightedQuery(query)}</pre>
-            <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 class="flex min-h-0 flex-1 flex-col">
+        ${renderEditorSurface({ query })}
       </div>
     </div>
   `;

package/frontend/js/components/queryHistoryDetail.js

@@ -0,0 +1,263 @@
+import {
+  escapeHtml,
+  formatCompactDateTime,
+  formatDateTime,
+  formatDurationMs,
+  formatNumber,
+  highlightSql,
+} from "../utils/format.js";
+import { renderStatusBadge } from "./badges.js";
+
+function renderDetailMetaItem(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 renderRunItem(run) {
+  return `
+    <div class="border border-outline-variant/10 bg-surface-container px-3 py-3">
+      <div class="flex flex-wrap items-center gap-2">
+        ${renderStatusBadge(run.status, run.status === "error" ? "alert" : "success")}
+        <span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+          ${escapeHtml(formatCompactDateTime(run.executedAt))}
+        </span>
+        <span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+          ${escapeHtml(formatDurationMs(run.durationMs))}
+        </span>
+        <span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+          rows ${escapeHtml(formatNumber(run.rowCount ?? 0))}
+        </span>
+        <span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+          affected ${escapeHtml(formatNumber(run.affectedRows ?? 0))}
+        </span>
+      </div>
+      ${
+        run.errorMessage
+          ? `
+            <div class="mt-3 border border-error/20 bg-error-container/20 px-3 py-3 text-sm leading-6 text-error">
+              ${escapeHtml(run.errorMessage)}
+            </div>
+          `
+          : ""
+      }
+    </div>
+  `;
+}
+
+export function renderQueryHistoryDetail({
+  item = null,
+  runs = [],
+  loading = false,
+  error = null,
+}) {
+  if (!item && !loading && !error) {
+    return "";
+  }
+
+  if (loading) {
+    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">
+              Query Detail
+            </span>
+            <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>
+        <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 query detail...
+        </div>
+      </section>
+    `;
+  }
+
+  if (error) {
+    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">
+              Query Detail
+            </span>
+            <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>
+        <div class="p-5">
+          <div class="border border-error/30 bg-error-container/20 px-4 py-4 text-sm text-error">
+            ${escapeHtml(error.message)}
+          </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">
+          ${renderStatusBadge(item.queryType, item.isDestructive ? "alert" : "primary")}
+          ${item.isSaved ? renderStatusBadge("saved", "primary") : ""}
+          ${item.isDestructive ? renderStatusBadge("destructive", "alert") : ""}
+          ${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>
+
+        <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="flex-1 border border-outline-variant/20 bg-surface-container px-3 py-2 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="border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+              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="toolbar-button border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+            data-action="open-query-history"
+            data-history-id="${escapeHtml(item.id)}"
+            type="button"
+          >
+            Open In Editor
+          </button>
+          <button
+            class="toolbar-button border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+            data-action="run-query-history"
+            data-history-id="${escapeHtml(item.id)}"
+            type="button"
+          >
+            Run Now
+          </button>
+          <button
+            class="toolbar-button border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+            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="toolbar-button border border-error/25 bg-error-container/20 px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-error transition-colors hover:border-error hover:bg-error-container/30"
+            data-action="delete-query-history"
+            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="border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+              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>
+  `;
+}

package/frontend/js/components/queryHistoryPanel.js

@@ -0,0 +1,228 @@
+import {
+  escapeHtml,
+  formatNumber,
+} from "../utils/format.js";
+import { renderStatusBadge } from "./badges.js";
+
+function getQueryTypeTone(queryType, isDestructive) {
+  if (isDestructive) {
+    return "alert";
+  }
+
+  if (queryType === "select") {
+    return "success";
+  }
+
+  if (queryType === "pragma") {
+    return "primary";
+  }
+
+  return "muted";
+}
+
+function renderHistoryItem(item, activeHistoryId, selectedHistoryId) {
+  const isActive = Number(activeHistoryId) === Number(item.id);
+  const isSelected = Number(selectedHistoryId) === Number(item.id);
+  const visibleTables = (item.tablesDetected ?? []).slice(0, 3);
+
+  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.isDestructive))}
+          ${item.isSaved ? renderStatusBadge("saved", "primary") : ""}
+          ${item.isDestructive ? renderStatusBadge("destructive", "alert") : ""}
+        </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>
+  `;
+}
+
+function renderQueryHistoryTabs(activeTab, historyTotal) {
+  const tabs = [
+    { id: "recent", label: "Recent" },
+    { id: "saved", label: "Saved" },
+    { 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>
+  `;
+}
+
+export function renderQueryHistoryPanel({
+  items = [],
+  loading = false,
+  loadingMore = false,
+  error = null,
+  activeTab = "recent",
+  search = "",
+  total = 0,
+  hasMore = false,
+  activeHistoryId = null,
+  selectedHistoryId = null,
+}) {
+  return `
+    <aside class="query-history-panel border-l border-outline-variant/10 bg-surface-container-lowest">
+      <div class="border-b border-outline-variant/10 px-4 py-4">
+        <div class="flex items-center gap-2">
+          <span class="material-symbols-outlined text-[18px] text-primary-container">history</span>
+          <span class="font-headline text-xs font-black uppercase tracking-[0.18em] text-primary-container">
+            Query History
+          </span>
+        </div>
+        <div class="mt-4">${renderQueryHistoryTabs(activeTab, total)}</div>
+        <label class="mt-4 block">
+          <span class="sr-only">Search query history</span>
+          <input
+            class="w-full border border-outline-variant/20 bg-surface-container px-3 py-2 text-sm text-on-surface outline-none placeholder:text-on-surface-variant/35 focus:border-primary-container"
+            data-bind="query-history-search"
+            placeholder="Search SQL, titles, notes..."
+            type="search"
+            value="${escapeHtml(search)}"
+          />
+        </label>
+      </div>
+      <div class="custom-scrollbar min-h-0 flex-1 overflow-auto px-3 py-3">
+        ${
+          error
+            ? `
+              <div class="border border-error/30 bg-error-container/20 px-4 py-3 text-sm text-error">
+                ${escapeHtml(error.message)}
+              </div>
+            `
+            : ""
+        }
+        ${
+          !loading && !items.length
+            ? `
+              <div class="flex h-full min-h-[240px] flex-col items-center justify-center px-6 text-center">
+                <span class="material-symbols-outlined text-4xl text-on-surface-variant/25">manage_search</span>
+                <p class="mt-4 font-headline text-lg font-bold uppercase tracking-tight text-on-surface">
+                  No Matching Queries
+                </p>
+                <p class="mt-2 max-w-xs text-sm leading-6 text-on-surface-variant/65">
+                  Executed statements will appear here once they run against the active database.
+                </p>
+              </div>
+            `
+            : ""
+        }
+        <div class="space-y-3">
+          ${items
+            .map((item) => renderHistoryItem(item, activeHistoryId, selectedHistoryId))
+            .join("")}
+        </div>
+        ${
+          loading
+            ? `
+              <div class="mt-4 text-center text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/50">
+                Loading query history...
+              </div>
+            `
+            : ""
+        }
+        ${
+          hasMore
+            ? `
+              <div class="mt-4 flex justify-center">
+                <button
+                  class="border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant transition-colors hover:border-primary-container hover:text-primary-container"
+                  data-action="load-more-query-history"
+                  type="button"
+                >
+                  ${loadingMore ? "Loading..." : "Load More"}
+                </button>
+              </div>
+            `
+            : ""
+        }
+      </div>
+    </aside>
+  `;
+}