sqlite-hub 0.9.1 → 0.9.4

package/frontend/styles/views.css

@@ -90,7 +90,7 @@
 }
 
 .landing-accent {
-    background: rgba(75, 71, 50, 0.2);
+    background: rgb(var(--rgb-outline) / 0.2);
     height: 1px;
     position: absolute;
 }
@@ -110,8 +110,8 @@
 }
 
 .landing-accent--c {
-    border-bottom: 1px solid rgba(75, 71, 50, 0.12);
-    border-right: 1px solid rgba(75, 71, 50, 0.12);
+    border-bottom: 1px solid var(--border-subtle);
+    border-right: 1px solid var(--border-subtle);
     height: 4rem;
     left: 0;
     top: 50%;
@@ -126,7 +126,7 @@
 
 .system-placeholder-card {
     background: var(--color-surface-low);
-    border-bottom: 2px solid rgba(49, 48, 48, 1);
+    box-shadow: inset 0 -2px 0 rgb(49 48 48);
     display: flex;
     flex-direction: column;
     gap: var(--spacing-2);
@@ -148,16 +148,16 @@
 
 .charts-view__sidebar {
     background: var(--color-surface-low);
-    border-right: 1px solid rgba(75, 71, 50, 0.18);
+    border-right: 1px solid var(--border-medium);
     display: flex;
-    flex: 0 0 23rem;
+    flex: 0 0 clamp(20rem, 28vw, 23rem);
     flex-direction: column;
     min-height: 0;
-    width: 23rem;
+    width: clamp(20rem, 28vw, 23rem);
 }
 
 .charts-view__sidebar-header {
-    border-bottom: 1px solid rgba(75, 71, 50, 0.18);
+    border-bottom: 1px solid var(--border-medium);
     padding: var(--spacing-5);
 }
 
@@ -171,16 +171,16 @@
 
 .structure-view__sidebar {
     background: var(--color-surface-low);
-    border-right: 1px solid rgba(75, 71, 50, 0.18);
+    border-right: 1px solid var(--border-medium);
     display: flex;
-    flex: 0 0 18.5rem;
+    flex: 0 0 clamp(16rem, 22vw, 18.5rem);
     flex-direction: column;
     min-height: 0;
-    width: 18.5rem;
+    width: clamp(16rem, 22vw, 18.5rem);
 }
 
 .structure-view__sidebar-header {
-    border-bottom: 1px solid rgba(75, 71, 50, 0.18);
+    border-bottom: 1px solid var(--border-medium);
     padding: var(--spacing-5);
 }
 
@@ -200,7 +200,7 @@
 }
 
 .structure-view__header {
-    border-bottom: 1px solid rgba(75, 71, 50, 0.18);
+    border-bottom: 1px solid var(--border-medium);
     padding: 1.25rem 1.5rem;
 }
 
@@ -262,7 +262,7 @@
 
 .charts-height-toggle {
     background: var(--color-surface-container-low);
-    border: 1px solid rgba(75, 71, 50, 0.18);
+    border: 1px solid var(--border-medium);
     display: inline-flex;
     gap: 0;
     height: var(--control-height);
@@ -287,7 +287,7 @@
 }
 
 .charts-height-toggle__button + .charts-height-toggle__button {
-    border-left: 1px solid rgba(75, 71, 50, 0.18);
+    border-left: 1px solid var(--border-medium);
 }
 
 .charts-height-toggle__button.is-active {
@@ -299,7 +299,7 @@
 .query-chart-card {
     --query-chart-height: 450px;
     background: var(--color-surface-low);
-    border: 1px solid rgba(75, 71, 50, 0.12);
+    border: 1px solid var(--border-subtle);
     overflow: hidden;
 }
 
@@ -327,7 +327,7 @@
 
 .query-chart-card__body {
     background:
-        radial-gradient(circle at top right, rgba(252, 227, 0, 0.08), transparent 28%),
+        radial-gradient(circle at top right, var(--primary-alpha-08), transparent 28%),
         linear-gradient(180deg, rgba(32, 31, 31, 0.92), rgba(14, 14, 14, 1));
     min-height: var(--query-chart-height);
     padding: 1rem;
@@ -360,25 +360,6 @@
     padding-top: var(--spacing-4);
 }
 
-.media-tagging-created-tags-shell {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    min-height: 0;
-}
-
-.media-tagging-created-tags {
-    flex: 1;
-    max-height: none;
-    min-height: 0;
-}
-
-.media-tagging-mapping-list {
-    flex: 0 0 auto;
-    min-height: auto;
-    overflow-y: auto;
-}
-
 .media-tagging-shell {
     display: flex;
     flex: 1;
@@ -416,7 +397,7 @@
 
 .media-tagging-card__header {
     align-items: start;
-    border-bottom: 1px solid rgba(75, 71, 50, 0.14);
+    border-bottom: 1px solid rgb(var(--rgb-outline) / 0.14);
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacing-4);
@@ -501,18 +482,23 @@
 }
 
 .media-tagging-field__hint {
-    color: rgba(229, 226, 225, 0.45);
+    color: var(--text-subtle);
     font-family: var(--font-family-mono);
     font-size: 0.65rem;
     letter-spacing: 0.06em;
     text-transform: uppercase;
 }
 
-.media-tagging-static-field {
+.media-tagging-static-field,
+.media-tagging-card .control-input,
+.media-tagging-card .control-select {
     align-items: center;
-    background: var(--color-surface-container-lowest);
-    border: 1px solid rgba(75, 71, 50, 0.18);
+    background: var(--color-surface-container);
+    border: 1px solid var(--border-medium);
     color: var(--color-on-surface);
+}
+
+.media-tagging-static-field {
     display: flex;
     font-family: var(--font-family-mono);
     font-size: 0.8rem;
@@ -521,9 +507,12 @@
 }
 
 .media-tagging-textarea {
-    background: var(--color-surface-container-lowest);
-    border: 1px solid rgba(75, 71, 50, 0.18);
+    background: var(--color-surface-container);
+    border: 1px solid var(--border-medium);
     color: var(--color-on-surface);
+}
+
+.media-tagging-textarea {
     font-family: var(--font-family-mono);
     font-size: 0.8rem;
     min-height: 13rem;
@@ -531,9 +520,16 @@
     resize: vertical;
 }
 
+.media-tagging-textarea:focus-visible,
+.media-tagging-static-field:focus-within {
+    border-color: var(--primary-alpha-35);
+    box-shadow: var(--focus-ring-inset);
+    outline: none;
+}
+
 .sql-highlight-shell {
     background: var(--color-surface-container-lowest);
-    border: 1px solid rgba(75, 71, 50, 0.18);
+    border: 1px solid var(--border-medium);
     min-height: 13rem;
     overflow: hidden;
 }
@@ -582,7 +578,7 @@
 }
 
 .media-tagging-status__label {
-    color: rgba(229, 226, 225, 0.5);
+    color: rgb(var(--rgb-on-surface) / 0.5);
     font-family: var(--font-family-mono);
     font-size: 0.625rem;
     letter-spacing: 0.14em;
@@ -605,18 +601,21 @@
 
 .media-tagging-mapping-list {
     display: grid;
+    flex: 0 0 auto;
     gap: var(--spacing-3);
     max-height: 18rem;
+    min-height: auto;
+    overflow-y: auto;
 }
 
 .media-tagging-mapping-card {
-    background: var(--color-surface-container-lowest);
-    border: 1px solid rgba(75, 71, 50, 0.16);
+    background: var(--color-surface-container);
+    border: 1px solid rgb(var(--rgb-outline) / 0.16);
     padding: var(--spacing-4);
 }
 
 .media-tagging-mapping-card.is-selected {
-    border-color: rgba(252, 227, 0, 0.45);
+    border-color: rgb(var(--rgb-primary) / 0.45);
 }
 
 .media-tagging-preview {
@@ -637,9 +636,9 @@
 .media-tagging-preview__media {
     align-items: stretch;
     background:
-        radial-gradient(circle at top right, rgba(252, 227, 0, 0.1), transparent 30%),
+        radial-gradient(circle at top right, var(--primary-alpha-10), transparent 30%),
         linear-gradient(180deg, rgba(32, 31, 31, 0.95), rgba(14, 14, 14, 1));
-    border: 1px solid rgba(75, 71, 50, 0.16);
+    border: 1px solid rgb(var(--rgb-outline) / 0.16);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -659,7 +658,7 @@
 
 .media-tagging-preview__media-toolbar {
     align-items: center;
-    border-bottom: 1px solid rgba(75, 71, 50, 0.18);
+    border-bottom: 1px solid var(--border-medium);
     display: flex;
     flex: 0 0 auto;
     flex-wrap: wrap;
@@ -728,8 +727,8 @@
     align-self: center;
     background:
         linear-gradient(180deg, rgba(32, 31, 31, 0.96), rgba(14, 14, 14, 0.98)),
-        radial-gradient(circle at top left, rgba(252, 227, 0, 0.1), transparent 35%);
-    border: 1px solid rgba(75, 71, 50, 0.2);
+        radial-gradient(circle at top left, var(--primary-alpha-10), transparent 35%);
+    border: 1px solid rgb(var(--rgb-outline) / 0.2);
     box-shadow: var(--shadow-subtle-glow);
     display: grid;
     gap: var(--spacing-5);
@@ -742,8 +741,8 @@
 
 .media-tagging-audio-preview__icon {
     align-items: center;
-    background: rgba(252, 227, 0, 0.08);
-    border: 1px solid rgba(252, 227, 0, 0.22);
+    background: var(--primary-alpha-08);
+    border: 1px solid var(--primary-alpha-22);
     color: var(--color-primary-container);
     display: flex;
     height: 5.5rem;
@@ -763,7 +762,7 @@
 }
 
 .media-tagging-audio-preview__eyebrow {
-    color: rgba(229, 226, 225, 0.48);
+    color: rgb(var(--rgb-on-surface) / 0.48);
     font-family: var(--font-family-mono);
     font-size: 0.625rem;
     font-weight: 700;
@@ -789,7 +788,7 @@
 .media-tagging-preview__placeholder,
 .media-tagging-preview__empty {
     align-items: center;
-    color: rgba(229, 226, 225, 0.4);
+    color: rgb(var(--rgb-on-surface) / 0.4);
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -799,7 +798,7 @@
 
 .media-tagging-preview__meta {
     background: var(--color-surface-container-lowest);
-    border: 1px solid rgba(75, 71, 50, 0.16);
+    border: 1px solid rgb(var(--rgb-outline) / 0.16);
     display: flex;
     flex-direction: column;
     min-height: 0;
@@ -816,7 +815,7 @@
 }
 
 .media-tagging-preview__eyebrow {
-    color: rgba(229, 226, 225, 0.48);
+    color: rgb(var(--rgb-on-surface) / 0.48);
     font-family: var(--font-family-mono);
     font-size: 0.625rem;
     font-weight: 700;
@@ -836,7 +835,7 @@
 }
 
 .media-tagging-preview__metadata {
-    border-top: 1px solid rgba(75, 71, 50, 0.14);
+    border-top: 1px solid rgb(var(--rgb-outline) / 0.14);
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -855,7 +854,7 @@
 }
 
 .media-tagging-preview__metadata-row span:first-child {
-    color: rgba(229, 226, 225, 0.5);
+    color: rgb(var(--rgb-on-surface) / 0.5);
     font-family: var(--font-family-mono);
     font-size: 0.65rem;
     letter-spacing: 0.08em;
@@ -879,8 +878,8 @@
 }
 
 .media-tagging-tag-panel {
-    background: var(--color-surface-container-lowest);
-    border: 1px solid rgba(75, 71, 50, 0.16);
+    background: var(--color-surface-container);
+    border: 1px solid rgb(var(--rgb-outline) / 0.16);
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -894,7 +893,7 @@
 }
 
 .media-tagging-tag-panel__header {
-    border-bottom: 1px solid rgba(75, 71, 50, 0.14);
+    border-bottom: 1px solid rgb(var(--rgb-outline) / 0.14);
 }
 
 .media-tagging-tag-panel__header-row {
@@ -905,7 +904,7 @@
 }
 
 .media-tagging-tag-panel__footer {
-    border-top: 1px solid rgba(75, 71, 50, 0.14);
+    border-top: 1px solid rgb(var(--rgb-outline) / 0.14);
     display: flex;
     flex-direction: column;
     gap: var(--spacing-3);
@@ -919,7 +918,7 @@
 }
 
 .media-tagging-tag-panel__remaining {
-    color: rgba(205, 199, 171, 0.45);
+    color: var(--text-variant-subtle);
     flex: 1 1 auto;
     font-family: var(--font-family-mono);
     font-size: 0.6875rem;
@@ -949,10 +948,14 @@
 }
 
 .media-tagging-created-tags-shell {
-    border-top: 1px solid rgba(75, 71, 50, 0.14);
+    border-top: 1px solid rgb(var(--rgb-outline) / 0.14);
+    display: flex;
+    flex: 1;
+    flex-direction: column;
     margin-top: var(--spacing-2);
-    padding-top: var(--spacing-4);
+    min-height: 0;
     overflow: hidden;
+    padding-top: var(--spacing-4);
 }
 
 .media-tagging-created-tags-frame {
@@ -963,8 +966,8 @@
 }
 
 .media-tagging-created-tags {
-    background: var(--color-surface-container-lowest);
-    border: 1px solid rgba(75, 71, 50, 0.16);
+    background: var(--color-surface-container);
+    border: 1px solid rgb(var(--rgb-outline) / 0.16);
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -977,8 +980,8 @@
 
 .media-tagging-created-tag {
     align-items: center;
-    background: rgba(252, 227, 0, 0.05);
-    border: 1px solid rgba(252, 227, 0, 0.12);
+    background: var(--primary-alpha-08);
+    border: 1px solid var(--primary-alpha-12);
     display: flex;
     gap: var(--spacing-3);
     justify-content: space-between;
@@ -1007,8 +1010,8 @@
 .media-tagging-created-tag__badge,
 .media-tagging-tag-option__badge {
     align-items: center;
-    background: rgba(252, 227, 0, 0.1);
-    border: 1px solid rgba(252, 227, 0, 0.18);
+    background: var(--primary-alpha-10);
+    border: 1px solid var(--primary-alpha-18);
     color: var(--color-primary-container);
     display: inline-flex;
     font-family: var(--font-family-mono);
@@ -1033,8 +1036,8 @@
 
 .media-tagging-tag-option {
     align-items: start;
-    background: rgba(252, 227, 0, 0.03);
-    border: 1px solid rgba(75, 71, 50, 0.18);
+    background: var(--primary-alpha-05);
+    border: 1px solid var(--border-medium);
     border-radius: 0.25rem;
     cursor: pointer;
     display: grid;
@@ -1049,15 +1052,20 @@
 }
 
 .media-tagging-tag-option:hover {
-    border-color: rgba(252, 227, 0, 0.28);
-    background: rgba(252, 227, 0, 0.05);
+    border-color: rgb(var(--rgb-primary) / 0.28);
+    background: var(--primary-alpha-08);
     transform: translateY(-1px);
 }
 
+.media-tagging-tag-option:focus-within {
+    border-color: var(--primary-alpha-35);
+    box-shadow: var(--focus-ring-inset);
+}
+
 .media-tagging-tag-option.is-selected {
-    background: rgba(252, 227, 0, 0.09);
-    border-color: rgba(252, 227, 0, 0.34);
-    box-shadow: inset 0 0 0 1px rgba(252, 227, 0, 0.14);
+    background: rgb(var(--rgb-primary) / 0.09);
+    border-color: rgb(var(--rgb-primary) / 0.34);
+    box-shadow: inset 0 0 0 1px rgb(var(--rgb-primary) / 0.14);
 }
 
 .media-tagging-tag-option__checkbox {
@@ -1097,8 +1105,8 @@
 }
 
 .media-tagging-issue {
-    background: rgba(252, 227, 0, 0.06);
-    border: 1px solid rgba(252, 227, 0, 0.15);
+    background: var(--primary-alpha-06);
+    border: 1px solid var(--primary-alpha-15);
     color: var(--color-on-surface);
     font-size: 0.875rem;
     line-height: 1.65;
@@ -1130,7 +1138,7 @@
     align-items: center;
     background: transparent;
     border: 0;
-    color: rgba(229, 226, 225, 0.45);
+    color: var(--text-subtle);
     cursor: pointer;
     display: inline-flex;
     font-size: 1rem;
@@ -1155,8 +1163,8 @@
 }
 
 .media-tagging-inline-warning {
-    background: rgba(252, 227, 0, 0.08);
-    border: 1px solid rgba(252, 227, 0, 0.2);
+    background: var(--primary-alpha-08);
+    border: 1px solid var(--primary-alpha-20);
     color: var(--color-on-surface);
     font-size: 0.85rem;
     line-height: 1.6;

package/package.json

@@ -1,22 +1,35 @@
 {
     "name": "sqlite-hub",
-    "version": "0.9.1",
+    "version": "0.9.4",
     "description": "SQLite-only local management app backend and SPA shell",
     "main": "server/server.js",
     "bin": {
         "sqlite-hub": "bin/sqlite-hub.js"
     },
     "scripts": {
+        "build": "npm run build:css",
+        "build:css": "tailwindcss -c tailwind.config.cjs -i ./frontend/styles/tailwind.css -o ./frontend/styles/tailwind.generated.css --minify",
+        "audit": "npm audit --audit-level=high",
+        "test": "node --test tests/**/*.test.js",
         "start": "node bin/sqlite-hub.js",
         "dev": "node --watch server/server.js --port:4180",
+        "prepack": "npm run build:css",
         "publish": "bash scripts/publish_brew.sh && sleep 10 && npm login --auth-type=web && bash scripts/publish_npm.sh"
     },
     "dependencies": {
-        "better-sqlite3": "^11.8.1",
+        "better-sqlite3": "^12.10.0",
         "cytoscape": "^3.33.2",
         "cytoscape-elk": "^2.3.0",
         "echarts": "^5.6.0",
         "elkjs": "^0.11.1",
-        "express": "^4.21.2"
+        "express": "^4.21.2",
+        "express-rate-limit": "^8.5.1",
+        "helmet": "^8.1.0",
+        "material-symbols": "^0.44.6"
+    },
+    "devDependencies": {
+        "@tailwindcss/container-queries": "^0.1.1",
+        "@tailwindcss/forms": "^0.5.10",
+        "tailwindcss": "^3.4.17"
     }
 }

package/server/routes/mediaTagging.js

@@ -1,6 +1,5 @@
-const fs = require("node:fs");
 const express = require("express");
-const { NotFoundError, route, successResponse } = require("../utils/errors");
+const { route, successResponse } = require("../utils/errors");
 
 function createMediaTaggingRouter({ mediaTaggingService }) {
   const router = express.Router();
@@ -147,14 +146,7 @@ function createMediaTaggingRouter({ mediaTaggingService }) {
   router.get(
     "/media-file",
     route((req, res) => {
-      const rawPath = String(req.query.path ?? "").trim();
-      const resolvedPath = mediaTaggingService.resolveMediaFilePath(rawPath);
-
-      if (!resolvedPath || !fs.existsSync(resolvedPath)) {
-        throw new NotFoundError(`Media file not found: ${rawPath}`);
-      }
-
-      res.sendFile(resolvedPath);
+      mediaTaggingService.sendMediaFile(req.query.path, res);
     })
   );
 

package/server/routes/sql.js

@@ -1,5 +1,5 @@
 const express = require("express");
-const { route, successResponse } = require("../utils/errors");
+const { DatabaseRequiredError, route, successResponse } = require("../utils/errors");
 
 function parseBooleanFlag(value) {
   if (typeof value === "boolean") {
@@ -37,6 +37,16 @@ function getActiveDatabaseKey(connectionManager) {
   return connectionManager.getActiveConnection()?.id ?? null;
 }
 
+function requireActiveDatabaseKey(connectionManager) {
+  const databaseKey = getActiveDatabaseKey(connectionManager);
+
+  if (!databaseKey) {
+    throw new DatabaseRequiredError();
+  }
+
+  return databaseKey;
+}
+
 function createSqlRouter({ appStateStore, connectionManager, sqlExecutor }) {
   const router = express.Router();
 
@@ -57,7 +67,7 @@ function createSqlRouter({ appStateStore, connectionManager, sqlExecutor }) {
   router.get(
     "/history",
     route((req, res) => {
-      const databaseKey = getActiveDatabaseKey(connectionManager);
+      const databaseKey = requireActiveDatabaseKey(connectionManager);
       const tab = String(req.query.tab ?? "recent").trim().toLowerCase();
       const options = {
         databaseKey,
@@ -92,7 +102,7 @@ function createSqlRouter({ appStateStore, connectionManager, sqlExecutor }) {
   router.delete(
     "/history",
     route((req, res) => {
-      const databaseKey = getActiveDatabaseKey(connectionManager);
+      const databaseKey = requireActiveDatabaseKey(connectionManager);
       const deletedCount = appStateStore.clearQueryHistoryForDatabase(databaseKey);
 
       res.json(
@@ -114,12 +124,15 @@ function createSqlRouter({ appStateStore, connectionManager, sqlExecutor }) {
   router.get(
     "/history/:historyId/runs",
     route((req, res) => {
+      const databaseKey = requireActiveDatabaseKey(connectionManager);
       res.json(
         successResponse({
           data: appStateStore.getQueryRunsByHistoryId(
             req.params.historyId,
-            parseListLimit(req.query.limit, 8, 50)
+            parseListLimit(req.query.limit, 8, 50),
+            databaseKey
           ),
+          metadata: { databaseKey },
         })
       );
     })
@@ -129,10 +142,12 @@ function createSqlRouter({ appStateStore, connectionManager, sqlExecutor }) {
     "/history/:historyId/favorite",
     route((req, res) => {
       const nextValue = parseBooleanFlag(req.body?.value);
+      const databaseKey = requireActiveDatabaseKey(connectionManager);
       res.json(
         successResponse({
           message: nextValue ? "Query favorited." : "Query removed from favorites.",
-          data: appStateStore.toggleFavorite(req.params.historyId, nextValue),
+          data: appStateStore.toggleFavorite(req.params.historyId, nextValue, databaseKey),
+          metadata: { databaseKey },
         })
       );
     })
@@ -142,10 +157,12 @@ function createSqlRouter({ appStateStore, connectionManager, sqlExecutor }) {
     "/history/:historyId/saved",
     route((req, res) => {
       const nextValue = parseBooleanFlag(req.body?.value);
+      const databaseKey = requireActiveDatabaseKey(connectionManager);
       res.json(
         successResponse({
           message: nextValue ? "Query saved." : "Query removed from saved queries.",
-          data: appStateStore.toggleSaved(req.params.historyId, nextValue),
+          data: appStateStore.toggleSaved(req.params.historyId, nextValue, databaseKey),
+          metadata: { databaseKey },
         })
       );
     })
@@ -154,10 +171,12 @@ function createSqlRouter({ appStateStore, connectionManager, sqlExecutor }) {
   router.patch(
     "/history/:historyId/title",
     route((req, res) => {
+      const databaseKey = requireActiveDatabaseKey(connectionManager);
       res.json(
         successResponse({
           message: "Query title updated.",
-          data: appStateStore.renameQuery(req.params.historyId, req.body?.title),
+          data: appStateStore.renameQuery(req.params.historyId, req.body?.title, databaseKey),
+          metadata: { databaseKey },
         })
       );
     })
@@ -166,10 +185,12 @@ function createSqlRouter({ appStateStore, connectionManager, sqlExecutor }) {
   router.patch(
     "/history/:historyId/notes",
     route((req, res) => {
+      const databaseKey = requireActiveDatabaseKey(connectionManager);
       res.json(
         successResponse({
           message: "Query notes updated.",
-          data: appStateStore.updateQueryNotes(req.params.historyId, req.body?.notes),
+          data: appStateStore.updateQueryNotes(req.params.historyId, req.body?.notes, databaseKey),
+          metadata: { databaseKey },
         })
       );
     })
@@ -178,13 +199,15 @@ function createSqlRouter({ appStateStore, connectionManager, sqlExecutor }) {
   router.delete(
     "/history/:historyId",
     route((req, res) => {
-      appStateStore.deleteQueryHistoryItem(req.params.historyId);
+      const databaseKey = requireActiveDatabaseKey(connectionManager);
+      appStateStore.deleteQueryHistoryItem(req.params.historyId, databaseKey);
       res.json(
         successResponse({
           message: "Query history item deleted.",
           data: {
             id: Number(req.params.historyId),
           },
+          metadata: { databaseKey },
         })
       );
     })
@@ -193,9 +216,11 @@ function createSqlRouter({ appStateStore, connectionManager, sqlExecutor }) {
   router.get(
     "/history/:historyId",
     route((req, res) => {
+      const databaseKey = requireActiveDatabaseKey(connectionManager);
       res.json(
         successResponse({
-          data: appStateStore.getQueryHistoryItemById(req.params.historyId),
+          data: appStateStore.getQueryHistoryItemById(req.params.historyId, databaseKey),
+          metadata: { databaseKey },
         })
       );
     })