sqlite-hub 0.4.0 → 0.5.0

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>
+  `;
+}

package/frontend/js/components/queryResults.js

@@ -1,9 +1,39 @@
 import { renderDataGrid } from "./dataGrid.js";
 import { escapeHtml, formatCellValue, formatNumber } from "../utils/format.js";
 
+function getSortIcon(columnName, sortColumn, sortDirection) {
+  if (columnName !== sortColumn) {
+    return "unfold_more";
+  }
+
+  return sortDirection === "desc" ? "south" : "north";
+}
+
+function renderSortableHeader(columnName, sortColumn, sortDirection) {
+  const isActive = columnName === sortColumn;
+
+  return `
+    <button
+      class="flex w-full items-center justify-between gap-2 text-left transition-colors ${
+        isActive ? "text-primary-container" : "text-on-surface-variant hover:text-primary-container"
+      }"
+      data-action="sort-editor-results-column"
+      data-column-name="${escapeHtml(columnName)}"
+      type="button"
+    >
+      <span class="truncate">${escapeHtml(columnName)}</span>
+      <span class="material-symbols-outlined text-sm leading-none">${getSortIcon(
+        columnName,
+        sortColumn,
+        sortDirection
+      )}</span>
+    </button>
+  `;
+}
+
 export function renderQueryResultsPane(
   result,
-  { exporting = false, selectedRowIndex = null, editable = false, editStatusMessage = "" } = {}
+  { selectedRowIndex = null, editable = false, sortColumn = null, sortDirection = null } = {}
 ) {
   if (!result) {
     return `
@@ -17,9 +47,9 @@ export function renderQueryResultsPane(
   }
 
   const columns = (result.columns ?? []).map((columnName) => ({
-    label: escapeHtml(columnName),
     headerClassName:
       "border-b-2 border-primary-container px-4 py-3 text-[10px] font-bold uppercase tracking-widest",
+    renderHeader: () => renderSortableHeader(columnName, sortColumn, sortDirection),
     cellClassName: "px-4 py-3 align-top text-on-surface",
     render: (row) => {
       const value = formatCellValue(row[columnName]);
@@ -32,50 +62,6 @@ export function renderQueryResultsPane(
 
   return `
     <div class="relative flex h-full min-h-0 flex-col overflow-hidden bg-surface-container">
-      <div class="flex items-center justify-between gap-4 bg-surface-container-high px-4 py-2">
-        <div class="flex items-center gap-4">
-          <div class="flex items-center gap-2 text-primary-container">
-            <span class="material-symbols-outlined text-sm">database</span>
-            <span class="text-[10px] font-bold uppercase tracking-widest">Query Results</span>
-          </div>
-          <div class="h-3 w-px bg-outline-variant/30"></div>
-          <div class="text-[10px] font-mono text-on-surface-variant/60">
-            ROWS_RETURNED: ${escapeHtml(formatNumber(result.rows?.length ?? 0))}
-          </div>
-          <div class="text-[10px] font-mono text-on-surface-variant/60">
-            AFFECTED: ${escapeHtml(formatNumber(result.affectedRowCount ?? 0))}
-          </div>
-          <div class="text-[10px] font-mono text-on-surface-variant/60">
-            EXEC: ${escapeHtml(String(result.timingMs ?? 0))}ms
-          </div>
-          ${
-            editStatusMessage
-              ? `
-                  <div class="h-3 w-px bg-outline-variant/30"></div>
-                  <div class="text-[10px] font-mono text-on-surface-variant/60">
-                    ${escapeHtml(editStatusMessage)}
-                  </div>
-                `
-              : ""
-          }
-        </div>
-        <div class="flex gap-4 text-[10px] font-mono uppercase">
-          <button
-            class="text-on-surface-variant transition-colors hover:text-primary-container"
-            data-action="export-query-csv"
-            type="button"
-          >
-            ${exporting ? "Exporting..." : "Export CSV"}
-          </button>
-          <button
-            class="text-on-surface-variant transition-colors hover:text-primary-container"
-            data-action="clear-results"
-            type="button"
-          >
-            Clear Results
-          </button>
-        </div>
-      </div>
       <div class="custom-scrollbar min-h-0 flex-1 overflow-auto bg-surface-container-lowest">
         ${
           result.columns?.length