sqlite-hub 0.10.0 → 0.12.0

package/frontend/styles/tokens.css

@@ -1,97 +1,97 @@
 :root {
-  --rgb-primary: 252 227 0;
-  --rgb-outline: 75 71 50;
-  --rgb-on-surface: 229 226 225;
-  --rgb-on-surface-variant: 205 199 171;
-  --rgb-background: 19 19 19;
-  --rgb-surface: 19 19 19;
-  --rgb-surface-lowest: 14 14 14;
-  --rgb-surface-low: 28 27 27;
-  --rgb-surface-container: 32 31 31;
-  --rgb-surface-high: 42 42 42;
-  --rgb-surface-highest: 53 53 52;
-  --rgb-surface-bright: 58 57 57;
-  --rgb-error: 255 180 171;
-  --rgb-error-container: 147 0 10;
-  --rgb-tertiary: 0 220 225;
-  --rgb-success: 34 197 94;
-  --color-background: #131313;
-  --color-surface: #131313;
-  --color-surface-lowest: #0e0e0e;
-  --color-surface-container-lowest: var(--color-surface-lowest);
-  --color-surface-low: #1c1b1b;
-  --color-surface-container-low: var(--color-surface-low);
-  --color-surface-container: #201f1f;
-  --color-surface-high: #2a2a2a;
-  --color-surface-container-high: var(--color-surface-high);
-  --color-surface-highest: #353534;
-  --color-surface-container-highest: var(--color-surface-highest);
-  --color-surface-bright: #3a3939;
-  --color-primary-container: #fce300;
-  --color-primary-fixed: #fde403;
-  --color-on-primary: #373100;
-  --color-on-surface: #e5e2e1;
-  --color-on-surface-variant: #cdc7ab;
-  --color-outline-variant: #4b4732;
-  --color-error: #ffb4ab;
-  --color-error-container: #93000a;
-  --color-tertiary-dim: #00dce1;
-  --color-grid-dot: rgb(var(--rgb-primary) / 0.03);
-  --color-success: #22c55e;
-  --border-subtle: rgb(var(--rgb-outline) / 0.12);
-  --border-medium: rgb(var(--rgb-outline) / 0.18);
-  --border-strong: rgb(var(--rgb-outline) / 0.24);
-  --text-muted: rgb(var(--rgb-on-surface) / 0.6);
-  --text-subtle: rgb(var(--rgb-on-surface) / 0.45);
-  --text-faint: rgb(var(--rgb-on-surface) / 0.35);
-  --text-variant-muted: rgb(var(--rgb-on-surface-variant) / 0.55);
-  --text-variant-subtle: rgb(var(--rgb-on-surface-variant) / 0.45);
-  --primary-alpha-03: rgb(var(--rgb-primary) / 0.03);
-  --primary-alpha-05: rgb(var(--rgb-primary) / 0.05);
-  --primary-alpha-06: rgb(var(--rgb-primary) / 0.06);
-  --primary-alpha-08: rgb(var(--rgb-primary) / 0.08);
-  --primary-alpha-10: rgb(var(--rgb-primary) / 0.1);
-  --primary-alpha-12: rgb(var(--rgb-primary) / 0.12);
-  --primary-alpha-15: rgb(var(--rgb-primary) / 0.15);
-  --primary-alpha-18: rgb(var(--rgb-primary) / 0.18);
-  --primary-alpha-20: rgb(var(--rgb-primary) / 0.2);
-  --primary-alpha-22: rgb(var(--rgb-primary) / 0.22);
-  --primary-alpha-24: rgb(var(--rgb-primary) / 0.24);
-  --primary-alpha-30: rgb(var(--rgb-primary) / 0.3);
-  --primary-alpha-35: rgb(var(--rgb-primary) / 0.35);
-  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--primary-alpha-30);
-  --focus-ring-inset: inset 0 0 0 1px var(--primary-alpha-30), 0 0 0 2px var(--primary-alpha-12);
-  --font-family-headline: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --font-family-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --font-family-mono: ui-monospace, "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", monospace;
-  --font-size-status: 10px;
-  --font-size-micro: 9px;
-  --font-size-label: 11px;
-  --font-size-icon: 18px;
-  --control-height: 36px;
-  --control-padding-inline: 12px;
-  --button-height: 32px;
-  --button-padding-inline: 10px;
-  --button-corner-size: 10px;
-  --spacing-1: 4px;
-  --spacing-2: 8px;
-  --spacing-3: 12px;
-  --spacing-4: 16px;
-  --spacing-5: 20px;
-  --spacing-6: 24px;
-  --spacing-8: 32px;
-  --spacing-10: 40px;
-  --radius-none: 0;
-  --top-nav-height: 56px;
-  --status-bar-height: 24px;
-  --sidebar-width: 256px;
-  --panel-width: 480px;
-  --shadow-sidebar: 4px 0 0 0 #131313;
-  --shadow-panel: -20px 0 60px rgb(0 0 0 / 0.8);
-  --shadow-subtle-glow: 0 0 15px var(--primary-alpha-30);
-  --shadow-strong-glow: 0 0 20px var(--primary-alpha-30);
-  --transition-fast: 150ms ease;
-  --transition-standard: 300ms ease;
-  --duration-cursor-blink: 1s;
-  --scrollbar-size: 4px;
+    --rgb-primary: 252 227 0;
+    --rgb-outline: 75 71 50;
+    --rgb-on-surface: 229 226 225;
+    --rgb-on-surface-variant: 205 199 171;
+    --rgb-background: 19 19 19;
+    --rgb-surface: 19 19 19;
+    --rgb-surface-lowest: 14 14 14;
+    --rgb-surface-low: 28 27 27;
+    --rgb-surface-container: 32 31 31;
+    --rgb-surface-high: 42 42 42;
+    --rgb-surface-highest: 53 53 52;
+    --rgb-surface-bright: 58 57 57;
+    --rgb-error: 255 180 171;
+    --rgb-error-container: 147 0 10;
+    --rgb-tertiary: 0 220 225;
+    --rgb-success: 34 197 94;
+    --color-background: #131313;
+    --color-surface: #131313;
+    --color-surface-lowest: #0e0e0e;
+    --color-surface-container-lowest: var(--color-surface-lowest);
+    --color-surface-low: #1c1b1b;
+    --color-surface-container-low: var(--color-surface-low);
+    --color-surface-container: #201f1f;
+    --color-surface-high: #2a2a2a;
+    --color-surface-container-high: var(--color-surface-high);
+    --color-surface-highest: #353534;
+    --color-surface-container-highest: var(--color-surface-highest);
+    --color-surface-bright: #3a3939;
+    --color-primary-container: #fce300;
+    --color-primary-fixed: #fde403;
+    --color-on-primary: #373100;
+    --color-on-surface: #e5e2e1;
+    --color-on-surface-variant: #cdc7ab;
+    --color-outline-variant: #4b4732;
+    --color-error: #ffb4ab;
+    --color-error-container: #93000a;
+    --color-tertiary-dim: #00dce1;
+    --color-grid-dot: rgb(var(--rgb-primary) / 0.03);
+    --color-success: #22c55e;
+    --border-subtle: rgb(var(--rgb-outline) / 0.12);
+    --border-medium: rgb(var(--rgb-outline) / 0.18);
+    --border-strong: rgb(var(--rgb-outline) / 0.24);
+    --text-muted: rgb(var(--rgb-on-surface) / 0.6);
+    --text-subtle: rgb(var(--rgb-on-surface) / 0.45);
+    --text-faint: rgb(var(--rgb-on-surface) / 0.35);
+    --text-variant-muted: rgb(var(--rgb-on-surface-variant) / 0.55);
+    --text-variant-subtle: rgb(var(--rgb-on-surface-variant) / 0.45);
+    --primary-alpha-03: rgb(var(--rgb-primary) / 0.03);
+    --primary-alpha-05: rgb(var(--rgb-primary) / 0.05);
+    --primary-alpha-06: rgb(var(--rgb-primary) / 0.06);
+    --primary-alpha-08: rgb(var(--rgb-primary) / 0.08);
+    --primary-alpha-10: rgb(var(--rgb-primary) / 0.1);
+    --primary-alpha-12: rgb(var(--rgb-primary) / 0.12);
+    --primary-alpha-15: rgb(var(--rgb-primary) / 0.15);
+    --primary-alpha-18: rgb(var(--rgb-primary) / 0.18);
+    --primary-alpha-20: rgb(var(--rgb-primary) / 0.2);
+    --primary-alpha-22: rgb(var(--rgb-primary) / 0.22);
+    --primary-alpha-24: rgb(var(--rgb-primary) / 0.24);
+    --primary-alpha-30: rgb(var(--rgb-primary) / 0.3);
+    --primary-alpha-35: rgb(var(--rgb-primary) / 0.35);
+    --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--primary-alpha-30);
+    --focus-ring-inset: inset 0 0 0 1px var(--primary-alpha-30), 0 0 0 2px var(--primary-alpha-12);
+    --font-family-headline: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --font-family-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --font-family-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', Consolas, 'Liberation Mono', monospace;
+    --font-size-status: 10px;
+    --font-size-micro: 9px;
+    --font-size-label: 11px;
+    --font-size-icon: 18px;
+    --control-height: 36px;
+    --control-padding-inline: 12px;
+    --button-height: 32px;
+    --button-padding-inline: 10px;
+    --button-corner-size: 10px;
+    --spacing-1: 4px;
+    --spacing-2: 8px;
+    --spacing-3: 12px;
+    --spacing-4: 16px;
+    --spacing-5: 20px;
+    --spacing-6: 24px;
+    --spacing-8: 32px;
+    --spacing-10: 40px;
+    --radius-none: 0;
+    --top-nav-height: 56px;
+    --status-bar-height: 24px;
+    --sidebar-width: 256px;
+    --panel-width: 600px;
+    --shadow-sidebar: 4px 0 0 0 #131313;
+    --shadow-panel: -20px 0 60px rgb(0 0 0 / 0.8);
+    --shadow-subtle-glow: 0 0 15px var(--primary-alpha-30);
+    --shadow-strong-glow: 0 0 20px var(--primary-alpha-30);
+    --transition-fast: 150ms ease;
+    --transition-standard: 300ms ease;
+    --duration-cursor-blink: 1s;
+    --scrollbar-size: 4px;
 }

package/package.json

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

package/server/routes/data.js

@@ -28,6 +28,9 @@ function createDataRouter({ dataBrowserService }) {
         offset: req.query.offset,
         sortColumn: req.query.sortColumn,
         sortDirection: req.query.sortDirection,
+        filterColumn: req.query.filterColumn,
+        filterOperator: req.query.filterOperator,
+        filterValue: req.query.filterValue,
       });
 
       res.json(

package/server/routes/export.js

@@ -1,34 +1,119 @@
 const express = require("express");
-const { route } = require("../utils/errors");
+const { route, successResponse } = require("../utils/errors");
 
 function createExportRouter({ exportService }) {
   const router = express.Router();
 
-  function sendCsv(res, result) {
-    res.setHeader("Content-Type", "text/csv; charset=utf-8");
+  function sendExport(res, result) {
+    res.setHeader("Content-Type", result.mimeType || "text/plain; charset=utf-8");
     res.setHeader(
       "Content-Disposition",
       `attachment; filename="${result.filename}"`
     );
-    res.send(result.csv);
+    res.send(result.content ?? result.csv ?? "");
   }
 
+  function sendQueryExport(res, sql, format) {
+    const result = exportService.exportQuery(sql, { format });
+    sendExport(res, result);
+  }
+
+  function exportTableFromBody(body, format) {
+    return exportService.exportTable(body?.tableName, {
+      sortColumn: body?.sortColumn,
+      sortDirection: body?.sortDirection,
+      filterColumn: body?.filterColumn,
+      filterOperator: body?.filterOperator,
+      filterValue: body?.filterValue,
+      format,
+    });
+  }
+
+  function sendTableExport(res, body, format) {
+    sendExport(res, exportTableFromBody(body, format));
+  }
+
+  router.post(
+    "/query",
+    route((req, res) => {
+      const result = exportService.exportQuery(req.body?.sql, {
+        format: req.body?.format || "csv",
+      });
+
+      res.json(
+        successResponse({
+          data: {
+            filename: result.filename,
+            content: result.content ?? result.csv ?? "",
+            format: result.format,
+            mimeType: result.mimeType,
+            columns: result.columns,
+            rowCount: result.rowCount,
+          },
+        })
+      );
+    })
+  );
+
   router.post(
     "/query.csv",
     route((req, res) => {
-      const result = exportService.exportQuery(req.body.sql);
-      sendCsv(res, result);
+      sendQueryExport(res, req.body?.sql, "csv");
+    })
+  );
+
+  router.post(
+    "/query.tsv",
+    route((req, res) => {
+      sendQueryExport(res, req.body?.sql, "tsv");
+    })
+  );
+
+  router.post(
+    "/query.md",
+    route((req, res) => {
+      sendQueryExport(res, req.body?.sql, "md");
+    })
+  );
+
+  router.post(
+    "/table",
+    route((req, res) => {
+      const result = exportTableFromBody(req.body, req.body?.format || "csv");
+
+      res.json(
+        successResponse({
+          data: {
+            filename: result.filename,
+            content: result.content ?? result.csv ?? "",
+            format: result.format,
+            mimeType: result.mimeType,
+            columns: result.columns,
+            rowCount: result.rowCount,
+          },
+        })
+      );
     })
   );
 
   router.post(
     "/table.csv",
     route((req, res) => {
-      const result = exportService.exportTable(req.body?.tableName, {
-        sortColumn: req.body?.sortColumn,
-        sortDirection: req.body?.sortDirection,
-      });
-      sendCsv(res, result);
+      sendTableExport(res, req.body, "csv");
+    })
+  );
+
+  router.post(
+    "/table.tsv",
+    route((req, res) => {
+      sendTableExport(res, req.body, "tsv");
+    })
+  );
+
+  router.post(
+    "/table.md",
+    route((req, res) => {
+      sendTableExport(res, req.body, "md");
     })
   );
 
@@ -36,7 +121,7 @@ function createExportRouter({ exportService }) {
     "/table/:tableName.csv",
     route((req, res) => {
       const result = exportService.exportTable(req.params.tableName);
-      sendCsv(res, result);
+      sendExport(res, result);
     })
   );
 

package/server/services/sqlite/dataBrowserService.js

@@ -6,10 +6,11 @@ const {
   serializeRows,
 } = require("../../utils/sqliteTypes");
 const { getRawStructureEntries, getTableDetail } = require("./introspection");
+const { normalizeTableFilter } = require("./tableFilter");
 const { buildTableOrderClause, normalizeTableSort } = require("./tableSort");
 
 const DEFAULT_LIMIT = 50;
-const MAX_LIMIT = 100;
+const MAX_LIMIT = 250;
 
 function buildRowIdentity(tableDetail, row) {
   if (tableDetail.identityStrategy?.type === "rowid") {
@@ -100,15 +101,18 @@ class DataBrowserService {
     const tableDetail = getTableDetail(db, tableName);
     const { limit, offset } = normalizePaginationOptions(options);
     const sort = normalizeTableSort(tableDetail, options);
+    const filter = normalizeTableFilter(tableDetail, options);
     const selectExpression =
       tableDetail.identityStrategy?.type === "rowid" ? "rowid AS __rowid__, *" : "*";
     const orderClause = buildTableOrderClause(tableDetail, sort);
+    const whereClause = filter ? `WHERE ${filter.clause}` : "";
     const statement = db.prepare(
       [
         "SELECT",
         selectExpression,
         "FROM",
         quoteIdentifier(tableName),
+        whereClause,
         orderClause ? "ORDER BY" : "",
         orderClause,
         "LIMIT ? OFFSET ?",
@@ -116,11 +120,20 @@ class DataBrowserService {
         .filter(Boolean)
         .join(" ")
     );
-    const rawRows = statement.all(limit, offset);
+    const rawRows = statement.all(...(filter?.params ?? []), limit, offset);
     const columns = statement
       .columns()
       .map((column) => column.name)
       .filter((columnName) => columnName !== "__rowid__");
+    const rowCount = filter
+      ? db
+          .prepare(
+            ["SELECT COUNT(*) AS count FROM", quoteIdentifier(tableName), whereClause]
+              .filter(Boolean)
+              .join(" ")
+          )
+          .get(...filter.params).count
+      : tableDetail.rowCount ?? rawRows.length;
 
     const rows = serializeRows(rawRows).map((row) => {
       const identity = buildRowIdentity(tableDetail, row);
@@ -138,17 +151,25 @@ class DataBrowserService {
     return {
       name: tableDetail.name,
       type: tableDetail.type,
-      rowCount: tableDetail.rowCount ?? rows.length,
+      rowCount,
       limit,
       offset,
       page: Math.floor(offset / limit) + 1,
-      pageCount: Math.max(1, Math.ceil((tableDetail.rowCount ?? rows.length) / limit)),
+      pageCount: Math.max(1, Math.ceil(rowCount / limit)),
       columns,
       columnMeta: tableDetail.columns,
       foreignKeys: tableDetail.foreignKeys,
       rows,
       identityStrategy: tableDetail.identityStrategy,
       notSafelyUpdatable: tableDetail.notSafelyUpdatable,
+      filter: filter
+        ? {
+            column: filter.column,
+            operator: filter.operator,
+            value: filter.value,
+            matchMode: filter.matchMode,
+          }
+        : null,
       sort,
     };
   }

package/server/services/sqlite/exportService.js

@@ -1,7 +1,12 @@
 const { quoteIdentifier } = require("../../utils/identifier");
 const { serializeRows } = require("../../utils/sqliteTypes");
-const { rowsToCsv } = require("../../utils/csv");
+const {
+  rowsToCsv,
+  rowsToDelimitedText,
+  rowsToMarkdownTable,
+} = require("../../utils/csv");
 const { getTableDetail } = require("./introspection");
+const { normalizeTableFilter } = require("./tableFilter");
 const { buildTableOrderClause, normalizeTableSort } = require("./tableSort");
 const {
   buildAutoTitle,
@@ -23,6 +28,43 @@ function sanitizeFilenameBase(value, fallback = "query-results") {
   return sanitized.slice(0, 120);
 }
 
+const EXPORT_FORMATS = {
+  csv: {
+    extension: "csv",
+    mimeType: "text/csv; charset=utf-8",
+  },
+  tsv: {
+    extension: "tsv",
+    mimeType: "text/tab-separated-values; charset=utf-8",
+  },
+  md: {
+    extension: "md",
+    mimeType: "text/markdown; charset=utf-8",
+  },
+};
+
+function normalizeExportFormat(format) {
+  const normalized = String(format ?? "csv").toLowerCase();
+
+  if (!EXPORT_FORMATS[normalized]) {
+    throw new Error(`Unsupported export format: ${format}`);
+  }
+
+  return normalized;
+}
+
+function renderExportContent({ columns, rows, format, csvDelimiter }) {
+  if (format === "tsv") {
+    return rowsToDelimitedText({ columns, rows, delimiter: "\t" });
+  }
+
+  if (format === "md") {
+    return rowsToMarkdownTable({ columns, rows });
+  }
+
+  return rowsToCsv({ columns, rows, delimiter: csvDelimiter });
+}
+
 class ExportService {
   constructor({ appStateStore, connectionManager, sqlExecutor }) {
     this.appStateStore = appStateStore;
@@ -34,7 +76,9 @@ class ExportService {
     return this.appStateStore.getSettings().csvDelimiter || ",";
   }
 
-  exportQuery(sql) {
+  exportQuery(sql, options = {}) {
+    const format = normalizeExportFormat(options.format);
+    const formatConfig = EXPORT_FORMATS[format];
     const activeConnection = this.connectionManager.getActiveConnection();
     const historyItem = activeConnection
       ? this.appStateStore.findQueryHistoryItemBySql(activeConnection.id, sql)
@@ -50,44 +94,59 @@ class ExportService {
       persistHistory: false,
       requireReader: true,
     });
+    const content = renderExportContent({
+      columns: result.columns,
+      rows: result.rows,
+      format,
+      csvDelimiter: this.getDelimiter(),
+    });
 
     return {
-      filename: `${filenameBase}.csv`,
-      csv: rowsToCsv({
-        columns: result.columns,
-        rows: result.rows,
-        delimiter: this.getDelimiter(),
-      }),
+      filename: `${filenameBase}.${formatConfig.extension}`,
+      content,
+      csv: format === "csv" ? content : undefined,
+      format,
+      mimeType: formatConfig.mimeType,
       columns: result.columns,
       rowCount: result.rows.length,
     };
   }
 
   exportTable(tableName, options = {}) {
+    const format = normalizeExportFormat(options.format);
+    const formatConfig = EXPORT_FORMATS[format];
     const db = this.connectionManager.getActiveDatabase();
     const tableDetail = getTableDetail(db, tableName, { includeRowCount: false });
     const sort = normalizeTableSort(tableDetail, options);
+    const filter = normalizeTableFilter(tableDetail, options);
     const orderClause = buildTableOrderClause(tableDetail, sort);
+    const whereClause = filter ? `WHERE ${filter.clause}` : "";
     const statement = db.prepare(
       [
         "SELECT * FROM",
         quoteIdentifier(tableName),
+        whereClause,
         orderClause ? "ORDER BY" : "",
         orderClause,
       ]
         .filter(Boolean)
         .join(" ")
     );
-    const rows = serializeRows(statement.all());
+    const rows = serializeRows(statement.all(...(filter?.params ?? [])));
     const columns = statement.columns().map((column) => column.name);
+    const content = renderExportContent({
+      columns,
+      rows,
+      format,
+      csvDelimiter: this.getDelimiter(),
+    });
 
     return {
-      filename: `${tableName}.csv`,
-      csv: rowsToCsv({
-        columns,
-        rows,
-        delimiter: this.getDelimiter(),
-      }),
+      filename: `${tableName}.${formatConfig.extension}`,
+      content,
+      csv: format === "csv" ? content : undefined,
+      format,
+      mimeType: formatConfig.mimeType,
       columns,
       rowCount: rows.length,
     };