sqlite-hub 0.4.0 → 0.5.0

package/frontend/js/utils/format.js

@@ -5,6 +5,10 @@ const DATE_TIME_FORMATTER = new Intl.DateTimeFormat("en-GB", {
   dateStyle: "medium",
   timeStyle: "short",
 });
+const COMPACT_DATE_TIME_FORMATTER = new Intl.DateTimeFormat("en-GB", {
+  dateStyle: "short",
+  timeStyle: "short",
+});
 
 export function escapeHtml(value = "") {
   return String(value)
@@ -52,6 +56,25 @@ export function formatDateTime(value) {
   return Number.isNaN(date.getTime()) ? String(value) : DATE_TIME_FORMATTER.format(date);
 }
 
+export function formatCompactDateTime(value) {
+  if (!value) {
+    return "N/A";
+  }
+
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? String(value) : COMPACT_DATE_TIME_FORMATTER.format(date);
+}
+
+export function formatDurationMs(value) {
+  const numericValue = Number(value);
+
+  if (!Number.isFinite(numericValue) || numericValue < 0) {
+    return "N/A";
+  }
+
+  return `${numericValue.toLocaleString("en-US")} ms`;
+}
+
 export function formatRelativeBoolean(value) {
   return value ? "ENABLED" : "DISABLED";
 }

package/frontend/js/views/data.js

@@ -168,6 +168,36 @@ function getCellWidthClass(columnName) {
   return "max-w-[12rem]";
 }
 
+function getSortIcon(columnName, sortColumn, sortDirection) {
+  if (columnName !== sortColumn) {
+    return "unfold_more";
+  }
+
+  return sortDirection === "desc" ? "south" : "north";
+}
+
+function renderSortableHeader(columnName, sortColumn, sortDirection, action) {
+  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="${action}"
+      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>
+  `;
+}
+
 function getFilteredTableRows(table, state) {
   const allRows = table?.rows ?? [];
   const availableColumns = table?.columns ?? [];
@@ -272,10 +302,13 @@ function renderTableSurface(state) {
   }
 
   const { activeColumn, filteredRows, searchQuery } = getFilteredTableRows(table, state);
+  const sortColumn = state.dataBrowser.sortColumn;
+  const sortDirection = state.dataBrowser.sortDirection;
   const columns = (table.columns ?? []).map((columnName) => ({
-    label: escapeHtml(columnName),
     headerClassName:
       "border-b border-primary-container/20 px-4 py-3 text-[10px] font-bold tracking-[0.08em] text-primary-container",
+    renderHeader: () =>
+      renderSortableHeader(columnName, sortColumn, sortDirection, "sort-data-column"),
     cellClassName: "px-4 py-2 align-top text-[11px] text-on-surface",
     render: (row) => {
       const value = formatCellValue(row[columnName]);

package/frontend/js/views/editor.js

@@ -1,5 +1,7 @@
 import { renderBottomTabs } from "../components/bottomTabs.js";
 import { renderQueryEditor } from "../components/queryEditor.js";
+import { renderQueryHistoryDetail } from "../components/queryHistoryDetail.js";
+import { renderQueryHistoryPanel } from "../components/queryHistoryPanel.js";
 import { renderRowEditorPanel } from "../components/rowEditorPanel.js";
 import { renderQueryResultsPane } from "../components/queryResults.js";
 import { getCurrentConnection, getQueryMessages, getQueryPerformance } from "../store.js";
@@ -216,17 +218,17 @@ function renderResultsSurface(state, isResultsRoute) {
 
     content = state.connections.active
       ? renderQueryResultsPane(state.editor.result, {
-          exporting: state.editor.exportLoading,
           selectedRowIndex: state.editor.selectedRowIndex,
           editable: editingState.enabled,
-          editStatusMessage: editingState.message,
+          sortColumn: state.editor.resultSortColumn,
+          sortDirection: state.editor.resultSortDirection,
         })
       : renderMissingDatabase();
   }
 
   return `
     <div class="flex h-full min-h-0 flex-col border-t border-outline-variant/10 bg-surface-container-lowest">
-      ${renderBottomTabs(activeTab, counts)}
+      ${renderBottomTabs(state.editor.activeTab, counts)}
       <div class="min-h-0 flex-1">${content}</div>
     </div>
   `;
@@ -234,13 +236,13 @@ function renderResultsSurface(state, isResultsRoute) {
 
 export function renderEditorView(state, { isResultsRoute = false } = {}) {
   const connection = getCurrentConnection(state);
-  const editorSectionClass = isResultsRoute ? "h-1/4" : "min-h-[27.5%]";
-  const resultsSectionClass = isResultsRoute ? "h-3/4" : "flex-1";
+  const editorSectionClass = "min-h-[27.5%]";
+  const resultsSectionClass = "flex-1";
 
   return {
     main: `
-      <section class="view-surface flex h-full min-h-0 flex-col overflow-hidden">
-        <div class="flex h-full min-h-0 flex-1 flex-col">
+      <section class="view-surface flex h-full min-h-0 flex-col overflow-hidden xl:flex-row">
+        <div class="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
           <section class="${editorSectionClass} flex min-h-0 flex-col ${
             isResultsRoute ? "border-b-4 border-background" : ""
           }">
@@ -248,17 +250,39 @@ export function renderEditorView(state, { isResultsRoute = false } = {}) {
               query: state.editor.sqlText,
               executing: state.editor.executing,
               exporting: state.editor.exportLoading,
-              history: state.editor.history,
               historyLoading: state.editor.historyLoading,
+              historyTotal: state.editor.historyTotal,
               title: connection?.label ?? "SQLite Query Workspace",
             })}
           </section>
-          <section class="${resultsSectionClass} flex min-h-0 flex-col overflow-hidden">
+          <section class="${resultsSectionClass} flex min-h-0 min-w-0 flex-col overflow-hidden">
             ${renderResultsSurface(state, isResultsRoute)}
           </section>
         </div>
+        ${renderQueryHistoryPanel({
+          items: state.editor.history,
+          loading: state.editor.historyLoading,
+          loadingMore: state.editor.historyLoadingMore,
+          error: state.editor.historyError,
+          activeTab: state.editor.historyTab,
+          search: state.editor.historySearchInput,
+          total: state.editor.historyTotal,
+          hasMore: state.editor.historyHasMore,
+          activeHistoryId: state.editor.historyActiveId,
+          selectedHistoryId: state.editor.historySelectedId,
+        })}
       </section>
     `,
-    panel: isResultsRoute ? renderEditorRowPanel(state) : "",
+    panel:
+      isResultsRoute && state.editor.selectedRowIndex !== null
+        ? renderEditorRowPanel(state)
+        : state.editor.historySelectedId
+          ? renderQueryHistoryDetail({
+              item: state.editor.historyDetail,
+              runs: state.editor.historyRuns,
+              loading: state.editor.historyDetailLoading,
+              error: state.editor.historyDetailError,
+            })
+          : "",
   };
 }

package/frontend/js/views/overview.js

@@ -126,6 +126,21 @@ function renderOperationalSurface(overview) {
           )
           .join("")}
       </div>
+      ${
+        overview.file?.path
+          ? `
+            <div class="border-t border-outline-variant/10 px-4 py-3">
+              <button
+                class="toolbar-button border border-outline-variant/20 bg-surface-container px-3 py-1.5 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+                data-action="open-overview-in-finder"
+                type="button"
+              >
+                Open In Finder
+              </button>
+            </div>
+          `
+          : ""
+      }
     </section>
   `;
 }

package/frontend/styles/components.css

@@ -316,6 +316,112 @@
   padding: var(--spacing-3) var(--spacing-4);
 }
 
+.query-history-panel {
+  display: flex;
+  flex: 0 0 360px;
+  flex-direction: column;
+  min-height: 0;
+  width: 360px;
+}
+
+.query-history-item {
+  align-items: stretch;
+  background: var(--color-surface-low);
+  border: 1px solid rgba(75, 71, 50, 0.16);
+  border-left: 2px solid transparent;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  transition: background-color var(--transition-fast), border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.query-history-item:hover {
+  background: var(--color-surface-high);
+  border-color: rgba(252, 227, 0, 0.18);
+}
+
+.query-history-item.is-active {
+  border-left-color: var(--color-primary-container);
+  box-shadow: 0 0 24px rgba(252, 227, 0, 0.06);
+}
+
+.query-history-item.is-error {
+  border-left-color: var(--color-error);
+}
+
+.query-history-item-hit {
+  background: transparent;
+  border: 0;
+  color: inherit;
+  display: block;
+  min-width: 0;
+  padding: var(--spacing-3);
+  text-align: left;
+  transition: background-color var(--transition-fast);
+}
+
+.query-history-item-hit.is-active {
+  background: rgba(252, 227, 0, 0.08);
+}
+
+.query-history-icon-button {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: rgba(229, 226, 225, 0.6);
+  display: inline-flex;
+  height: 2rem;
+  justify-content: center;
+  transition: color var(--transition-fast), background-color var(--transition-fast);
+  width: 2rem;
+}
+
+.query-history-icon-button:hover,
+.query-history-icon-button.is-active {
+  background: var(--color-surface-highest);
+  color: var(--color-primary-container);
+}
+
+.query-history-tab {
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid transparent;
+  color: rgba(205, 199, 171, 0.45);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-status);
+  letter-spacing: 0.16em;
+  padding: 0.35rem 0;
+  text-transform: uppercase;
+  transition: border-color var(--transition-fast), color var(--transition-fast);
+}
+
+.query-history-tab.is-active {
+  border-color: var(--color-primary-container);
+  color: var(--color-primary-container);
+}
+
+.query-history-sql-preview {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.query-history-detail-sql {
+  max-height: 240px;
+  white-space: pre-wrap;
+}
+
+@media (max-width: 1279px) {
+  .query-history-panel {
+    border-left: 0;
+    border-top: 1px solid rgba(75, 71, 50, 0.16);
+    flex: 0 0 auto;
+    width: 100%;
+  }
+}
+
 @media (min-width: 768px) {
   .top-nav-links {
     display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sqlite-hub",
-    "version": "0.4.0",
+    "version": "0.5.0",
     "description": "SQLite-only local management app backend and SPA shell",
     "main": "server/server.js",
     "bin": {

package/server/routes/data.js

@@ -26,6 +26,8 @@ function createDataRouter({ dataBrowserService }) {
       const data = dataBrowserService.getTableData(req.params.tableName, {
         limit: req.query.limit,
         offset: req.query.offset,
+        sortColumn: req.query.sortColumn,
+        sortDirection: req.query.sortDirection,
       });
 
       res.json(

package/server/routes/export.js

@@ -24,7 +24,10 @@ function createExportRouter({ exportService }) {
   router.post(
     "/table.csv",
     route((req, res) => {
-      const result = exportService.exportTable(req.body?.tableName);
+      const result = exportService.exportTable(req.body?.tableName, {
+        sortColumn: req.body?.sortColumn,
+        sortDirection: req.body?.sortDirection,
+      });
       sendCsv(res, result);
     })
   );

package/server/routes/overview.js

@@ -31,6 +31,18 @@ function createOverviewRouter({ overviewService }) {
     })
   );
 
+  router.post(
+    "/overview/open-in-finder",
+    route(async (req, res) => {
+      await overviewService.revealActiveDatabaseInFinder();
+      res.json(
+        successResponse({
+          message: "Database file revealed in Finder.",
+        })
+      );
+    })
+  );
+
   return router;
 }
 

package/server/routes/sql.js

@@ -1,7 +1,43 @@
 const express = require("express");
 const { route, successResponse } = require("../utils/errors");
 
-function createSqlRouter({ appStateStore, sqlExecutor }) {
+function parseBooleanFlag(value) {
+  if (typeof value === "boolean") {
+    return value;
+  }
+
+  const normalized = String(value ?? "")
+    .trim()
+    .toLowerCase();
+
+  return ["1", "true", "yes", "on"].includes(normalized);
+}
+
+function parseListLimit(value, fallback = 30, max = 100) {
+  const numericValue = Number(value);
+
+  if (!Number.isFinite(numericValue) || numericValue < 1) {
+    return fallback;
+  }
+
+  return Math.min(max, Math.round(numericValue));
+}
+
+function parseOffset(value) {
+  const numericValue = Number(value);
+
+  if (!Number.isFinite(numericValue) || numericValue < 0) {
+    return 0;
+  }
+
+  return Math.round(numericValue);
+}
+
+function getActiveDatabaseKey(connectionManager) {
+  return connectionManager.getActiveConnection()?.id ?? null;
+}
+
+function createSqlRouter({ appStateStore, connectionManager, sqlExecutor }) {
   const router = express.Router();
 
   router.post(
@@ -21,9 +57,32 @@ function createSqlRouter({ appStateStore, sqlExecutor }) {
   router.get(
     "/history",
     route((req, res) => {
+      const databaseKey = getActiveDatabaseKey(connectionManager);
+      const tab = String(req.query.tab ?? "recent").trim().toLowerCase();
+      const options = {
+        databaseKey,
+        limit: parseListLimit(req.query.limit, 30, 100),
+        offset: parseOffset(req.query.offset),
+        search: String(req.query.search ?? ""),
+        queryType: String(req.query.queryType ?? "").trim() || null,
+        onlySaved: parseBooleanFlag(req.query.onlySaved),
+        onlyFavorites: parseBooleanFlag(req.query.onlyFavorites),
+      };
+      const result =
+        tab === "failed"
+          ? appStateStore.getFailedQueries(options)
+          : appStateStore.getRecentQueries({
+              ...options,
+              onlySaved: tab === "saved" ? true : options.onlySaved,
+            });
+
       res.json(
         successResponse({
-          data: appStateStore.getSqlHistory(),
+          data: result,
+          metadata: {
+            databaseKey,
+            tab,
+          },
         })
       );
     })
@@ -32,11 +91,110 @@ function createSqlRouter({ appStateStore, sqlExecutor }) {
   router.delete(
     "/history",
     route((req, res) => {
-      appStateStore.clearSqlHistory();
+      const databaseKey = getActiveDatabaseKey(connectionManager);
+      const deletedCount = appStateStore.clearQueryHistoryForDatabase(databaseKey);
+
+      res.json(
+        successResponse({
+          message: deletedCount
+            ? "Query history cleared for the active database."
+            : "No query history was found for the active database.",
+          data: {
+            deletedCount,
+          },
+          metadata: {
+            databaseKey,
+          },
+        })
+      );
+    })
+  );
+
+  router.get(
+    "/history/:historyId/runs",
+    route((req, res) => {
+      res.json(
+        successResponse({
+          data: appStateStore.getQueryRunsByHistoryId(
+            req.params.historyId,
+            parseListLimit(req.query.limit, 8, 50)
+          ),
+        })
+      );
+    })
+  );
+
+  router.patch(
+    "/history/:historyId/favorite",
+    route((req, res) => {
+      const nextValue = parseBooleanFlag(req.body?.value);
+      res.json(
+        successResponse({
+          message: nextValue ? "Query favorited." : "Query removed from favorites.",
+          data: appStateStore.toggleFavorite(req.params.historyId, nextValue),
+        })
+      );
+    })
+  );
+
+  router.patch(
+    "/history/:historyId/saved",
+    route((req, res) => {
+      const nextValue = parseBooleanFlag(req.body?.value);
+      res.json(
+        successResponse({
+          message: nextValue ? "Query saved." : "Query removed from saved queries.",
+          data: appStateStore.toggleSaved(req.params.historyId, nextValue),
+        })
+      );
+    })
+  );
+
+  router.patch(
+    "/history/:historyId/title",
+    route((req, res) => {
+      res.json(
+        successResponse({
+          message: "Query title updated.",
+          data: appStateStore.renameQuery(req.params.historyId, req.body?.title),
+        })
+      );
+    })
+  );
+
+  router.patch(
+    "/history/:historyId/notes",
+    route((req, res) => {
+      res.json(
+        successResponse({
+          message: "Query notes updated.",
+          data: appStateStore.updateQueryNotes(req.params.historyId, req.body?.notes),
+        })
+      );
+    })
+  );
+
+  router.delete(
+    "/history/:historyId",
+    route((req, res) => {
+      appStateStore.deleteQueryHistoryItem(req.params.historyId);
+      res.json(
+        successResponse({
+          message: "Query history item deleted.",
+          data: {
+            id: Number(req.params.historyId),
+          },
+        })
+      );
+    })
+  );
+
+  router.get(
+    "/history/:historyId",
+    route((req, res) => {
       res.json(
         successResponse({
-          message: "SQL history cleared.",
-          data: [],
+          data: appStateStore.getQueryHistoryItemById(req.params.historyId),
         })
       );
     })

package/server/server.js

@@ -75,7 +75,7 @@ app.use(
   })
 );
 app.use("/api/db", createOverviewRouter({ overviewService }));
-app.use("/api/sql", createSqlRouter({ appStateStore, sqlExecutor }));
+app.use("/api/sql", createSqlRouter({ appStateStore, connectionManager, sqlExecutor }));
 app.use("/api/structure", createStructureRouter({ structureService }));
 app.use("/api/data", createDataRouter({ dataBrowserService }));
 app.use("/api/settings", createSettingsRouter({ appStateStore }));

package/server/services/sqlite/dataBrowserService.js

@@ -6,6 +6,7 @@ const {
   serializeRows,
 } = require("../../utils/sqliteTypes");
 const { getRawStructureEntries, getTableDetail } = require("./introspection");
+const { buildTableOrderClause, normalizeTableSort } = require("./tableSort");
 
 const DEFAULT_LIMIT = 50;
 const MAX_LIMIT = 100;
@@ -70,9 +71,10 @@ class DataBrowserService {
     const db = this.connectionManager.getActiveDatabase();
     const tableDetail = getTableDetail(db, tableName);
     const { limit, offset } = normalizePaginationOptions(options);
+    const sort = normalizeTableSort(tableDetail, options);
     const selectExpression =
       tableDetail.identityStrategy?.type === "rowid" ? "rowid AS __rowid__, *" : "*";
-    const orderClause = this.buildOrderClause(tableDetail);
+    const orderClause = buildTableOrderClause(tableDetail, sort);
     const statement = db.prepare(
       [
         `SELECT ${selectExpression} FROM ${quoteIdentifier(tableName)}`,
@@ -114,6 +116,7 @@ class DataBrowserService {
       rows,
       identityStrategy: tableDetail.identityStrategy,
       notSafelyUpdatable: tableDetail.notSafelyUpdatable,
+      sort,
     };
   }
 
@@ -238,21 +241,6 @@ class DataBrowserService {
       `Table ${tableDetail.name} cannot be updated because it has no stable row identity.`
     );
   }
-
-  buildOrderClause(tableDetail) {
-    if (tableDetail.identityStrategy?.type === "rowid") {
-      return "rowid ASC";
-    }
-
-    if (tableDetail.identityStrategy?.type === "primaryKey") {
-      return tableDetail.identityStrategy.columns
-        .map((columnName) => `${quoteIdentifier(columnName)} ASC`)
-        .join(", ");
-    }
-
-    return "";
-  }
-
   getRowByIdentity(db, tableDetail, where) {
     const selectExpression =
       tableDetail.identityStrategy?.type === "rowid" ? "rowid AS __rowid__, *" : "*";

package/server/services/sqlite/exportService.js

@@ -2,6 +2,7 @@ const { quoteIdentifier } = require("../../utils/identifier");
 const { serializeRows } = require("../../utils/sqliteTypes");
 const { rowsToCsv } = require("../../utils/csv");
 const { getTableDetail } = require("./introspection");
+const { buildTableOrderClause, normalizeTableSort } = require("./tableSort");
 
 class ExportService {
   constructor({ appStateStore, connectionManager, sqlExecutor }) {
@@ -32,10 +33,11 @@ class ExportService {
     };
   }
 
-  exportTable(tableName) {
+  exportTable(tableName, options = {}) {
     const db = this.connectionManager.getActiveDatabase();
     const tableDetail = getTableDetail(db, tableName, { includeRowCount: false });
-    const orderClause = this.buildOrderClause(tableDetail);
+    const sort = normalizeTableSort(tableDetail, options);
+    const orderClause = buildTableOrderClause(tableDetail, sort);
     const statement = db.prepare(
       [
         `SELECT * FROM ${quoteIdentifier(tableName)}`,
@@ -58,20 +60,6 @@ class ExportService {
       rowCount: rows.length,
     };
   }
-
-  buildOrderClause(tableDetail) {
-    if (tableDetail.identityStrategy?.type === "rowid") {
-      return "rowid ASC";
-    }
-
-    if (tableDetail.identityStrategy?.type === "primaryKey") {
-      return tableDetail.identityStrategy.columns
-        .map((columnName) => `${quoteIdentifier(columnName)} ASC`)
-        .join(", ");
-    }
-
-    return "";
-  }
 }
 
 module.exports = {