sqlite-hub 0.2.0 → 0.3.2

package/js/views/structure.js

@@ -1,9 +1,10 @@
-import { renderMetricCard } from "../components/metricCard.js";
 import { renderPageHeader } from "../components/pageHeader.js";
-import { getCurrentStructureEntryDetail } from "../store.js";
+import { clearInspector, renderInspector } from "../components/structureGraph.js";
 import { escapeHtml, formatNumber } from "../utils/format.js";
 
-function renderEntryGroup(title, entries, activeName) {
+function renderEntryGroup(title, entries, activeName, options = {}) {
+  const { compact = false, showMeta = true } = options;
+
   return `
     <section class="shell-section p-5">
       <div class="mb-4 text-[10px] font-bold uppercase tracking-[0.25em] text-primary-container">
@@ -17,13 +18,18 @@ function renderEntryGroup(title, entries, activeName) {
                   .map(
                     (entry) => `
                       <button
-                        class="w-full border px-3 py-3 text-left transition-colors ${
+                        class="w-full border px-3 ${compact ? "py-2.5" : "py-3"} text-left transition-colors ${
                           entry.name === activeName
                             ? "border-primary-container/30 bg-surface-container-high"
                             : "border-outline-variant/10 bg-surface-container-lowest hover:bg-surface-container-high"
                         }"
                         data-action="select-structure-entry"
                         data-entry-name="${escapeHtml(entry.name)}"
+                        ${
+                          entry.type === "table"
+                            ? `data-structure-entry-name="${escapeHtml(entry.name)}"`
+                            : ""
+                        }
                         type="button"
                       >
                         <div class="font-mono text-xs ${
@@ -33,9 +39,15 @@ function renderEntryGroup(title, entries, activeName) {
                         }">
                           ${escapeHtml(entry.name)}
                         </div>
-                        <div class="mt-1 text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">
-                          ${escapeHtml(entry.tableName || entry.type)}
-                        </div>
+                        ${
+                          showMeta
+                            ? `
+                                <div class="mt-1 text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">
+                                  ${escapeHtml(entry.tableName || entry.type)}
+                                </div>
+                              `
+                            : ""
+                        }
                       </button>
                     `
                   )
@@ -50,136 +62,242 @@ function renderEntryGroup(title, entries, activeName) {
   `;
 }
 
-function renderDetail(detail) {
+function renderLoadingInspector() {
+  return `
+    <div class="structure-graph__panel is-empty">
+      <span class="material-symbols-outlined structure-graph__empty-icon">progress_activity</span>
+      <div class="structure-graph__title">Loading</div>
+      <p class="text-sm leading-7 text-on-surface-variant/55">
+        Loading structure metadata for the selected object.
+      </p>
+    </div>
+  `;
+}
+
+function renderObjectInspector(detail) {
   if (!detail) {
-    return `
-      <div class="shell-section p-8">
-        <p class="text-sm text-on-surface-variant/55">Select a structure object to inspect metadata and relational detail.</p>
-      </div>
-    `;
+    return clearInspector();
   }
 
+  const visibleColumns = (detail.columns ?? []).filter((column) => column.visible !== false);
+  const foreignKeyLinks = (detail.foreignKeys ?? []).reduce(
+    (count, foreignKey) => count + (foreignKey.mappings?.length ?? 0),
+    0
+  );
+
   return `
-    <section class="shell-section p-8">
-      <div class="mb-6 flex items-center justify-between border-b border-outline-variant/10 pb-4">
-        <div>
-          <h2 class="font-headline text-2xl font-black uppercase tracking-tight text-primary-container">
-            ${escapeHtml(detail.name)}
-          </h2>
-          <p class="mt-2 font-mono text-[10px] uppercase tracking-[0.2em] text-on-surface-variant/50">
-            ${escapeHtml(detail.type ?? "table")}
-          </p>
-        </div>
-        <div class="flex items-center gap-3">
+    <div class="structure-graph__panel">
+      <div class="space-y-3">
+        <div class="structure-graph__eyebrow">Object Inspector</div>
+        <div class="structure-graph__title">${escapeHtml(detail.name)}</div>
+        <div class="flex flex-wrap items-center gap-3">
+          <div class="structure-graph__subtitle">${escapeHtml(detail.type ?? "object")}</div>
           ${
-            detail.type === "table"
+            detail.tableName
               ? `
-                  <button
-                    class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
-                    data-action="navigate"
-                    data-to="/data/${encodeURIComponent(detail.name)}"
-                    type="button"
-                  >
-                    Open Data
-                  </button>
+                  <div class="structure-graph__subtitle">
+                    TABLE ${escapeHtml(detail.tableName)}
+                  </div>
                 `
               : ""
           }
-          <div class="flex h-12 w-12 items-center justify-center bg-primary-container/10">
-            <span class="material-symbols-outlined text-2xl text-primary-container">account_tree</span>
-          </div>
         </div>
       </div>
-      <div class="grid grid-cols-1 gap-6 xl:grid-cols-[0.95fr_1.05fr]">
-        <div class="space-y-6">
-          <div class="bg-surface-container-lowest p-4">
-            <div class="mb-3 text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">Columns</div>
-            ${
-              detail.columns?.length
-                ? `
-                    <div class="space-y-2 font-mono text-[11px] text-on-surface/65">
-                      ${detail.columns
-                        .map(
-                          (column) => `
-                            <div class="flex justify-between gap-3">
-                              <span>${escapeHtml(column.name)}</span>
-                              <span class="text-primary-container">${escapeHtml(
-                                column.declaredType || column.affinity
-                              )}</span>
-                            </div>
-                          `
-                        )
-                        .join("")}
-                    </div>
-                  `
-                : '<div class="text-sm text-on-surface-variant/45">No column metadata for this object.</div>'
-            }
-          </div>
-          <div class="bg-surface-container-lowest p-4">
-            <div class="mb-3 text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">Relational Detail</div>
-            <div class="space-y-2 font-mono text-[11px] text-on-surface/65">
-              <div class="flex justify-between">
-                <span>Foreign Keys</span>
-                <span class="text-primary-container">${escapeHtml(
-                  formatNumber(detail.foreignKeys?.length ?? 0)
-                )}</span>
-              </div>
-              <div class="flex justify-between">
-                <span>Indexes</span>
-                <span class="text-primary-container">${escapeHtml(
-                  formatNumber(detail.indexes?.length ?? 0)
-                )}</span>
-              </div>
-              <div class="flex justify-between">
-                <span>Triggers</span>
-                <span class="text-primary-container">${escapeHtml(
-                  formatNumber(detail.triggers?.length ?? 0)
-                )}</span>
-              </div>
-              <div class="flex justify-between">
-                <span>Identity</span>
-                <span class="text-primary-container">${escapeHtml(
-                  detail.identityStrategy?.type ?? "n/a"
-                )}</span>
-              </div>
-            </div>
+
+      <div class="structure-graph__summary">
+        <div class="structure-graph__summary-card">
+          <div class="structure-graph__summary-label">Columns</div>
+          <div class="structure-graph__summary-value">${escapeHtml(
+            formatNumber(visibleColumns.length)
+          )}</div>
+        </div>
+        <div class="structure-graph__summary-card">
+          <div class="structure-graph__summary-label">FK Links</div>
+          <div class="structure-graph__summary-value">${escapeHtml(
+            formatNumber(foreignKeyLinks)
+          )}</div>
+        </div>
+        <div class="structure-graph__summary-card">
+          <div class="structure-graph__summary-label">Indexes</div>
+          <div class="structure-graph__summary-value">${escapeHtml(
+            formatNumber(detail.indexes?.length ?? 0)
+          )}</div>
+        </div>
+        <div class="structure-graph__summary-card">
+          <div class="structure-graph__summary-label">Triggers</div>
+          <div class="structure-graph__summary-value">${escapeHtml(
+            formatNumber(detail.triggers?.length ?? 0)
+          )}</div>
+        </div>
+      </div>
+
+      ${
+        visibleColumns.length
+          ? `
+              <section class="structure-graph__section">
+                <div class="structure-graph__section-title">Columns</div>
+                <div class="structure-graph__column-list">
+                  ${visibleColumns
+                    .map(
+                      (column) => `
+                        <div class="structure-graph__column-row">
+                          <div class="min-w-0 space-y-1">
+                            <div class="structure-graph__column-name">${escapeHtml(
+                              column.name
+                            )}</div>
+                            <div class="structure-graph__column-type">${escapeHtml(
+                              column.declaredType || column.affinity || "BLOB"
+                            )}</div>
+                          </div>
+                          <div class="structure-graph__column-flags">
+                            ${
+                              column.primaryKeyPosition > 0
+                                ? `<span class="structure-graph__flag is-key">PK${
+                                    column.primaryKeyPosition > 1
+                                      ? ` ${escapeHtml(String(column.primaryKeyPosition))}`
+                                      : ""
+                                  }</span>`
+                                : ""
+                            }
+                            <span class="structure-graph__flag is-nullable">${
+                              column.notNull ? "NOT NULL" : "NULLABLE"
+                            }</span>
+                          </div>
+                        </div>
+                      `
+                    )
+                    .join("")}
+                </div>
+              </section>
+            `
+          : ""
+      }
+
+      <section class="structure-graph__section">
+        <div class="structure-graph__section-title">DDL</div>
+        <pre class="structure-graph__ddl custom-scrollbar">${escapeHtml(
+          detail.ddl || "No DDL available."
+        )}</pre>
+      </section>
+    </div>
+  `;
+}
+
+function renderGraphSurface(structure, selectedName, detail, detailLoading) {
+  const graph = structure?.graph ?? { tables: [], relationshipCount: 0 };
+  const selectedGraphTable =
+    graph.tables?.find((table) => table.name === selectedName && table.type === "table") ?? null;
+  const inspectorMarkup = selectedGraphTable
+    ? renderInspector(selectedGraphTable)
+    : detailLoading
+      ? renderLoadingInspector()
+      : detail
+        ? renderObjectInspector(detail)
+        : clearInspector();
+
+  return `
+    <section class="structure-graph" data-structure-graph-root>
+      <div class="structure-graph__toolbar">
+        <div class="structure-graph__toolbar-main">
+          <label class="structure-graph__search" data-structure-graph-search>
+            <span class="material-symbols-outlined structure-graph__search-icon">search</span>
+            <input
+              class="structure-graph__search-input"
+              data-structure-graph-search-input
+              placeholder="Find table"
+              spellcheck="false"
+              type="search"
+            />
+          </label>
+          <div class="structure-graph__toolbar-meta">
+            ${escapeHtml(formatNumber(graph.tables?.length ?? 0))} TABLES //
+            ${escapeHtml(formatNumber(graph.relationshipCount ?? 0))} RELATIONSHIPS
           </div>
         </div>
-        <div class="bg-surface-container-lowest p-4">
-          <div class="mb-3 text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">DDL</div>
-          <pre class="custom-scrollbar max-h-[520px] overflow-auto whitespace-pre-wrap font-mono text-[11px] leading-6 text-on-surface-variant/75">${escapeHtml(
-            detail.ddl || "No DDL available."
-          )}</pre>
+        <div class="structure-graph__toolbar-actions">
+          <button
+            class="structure-graph__button"
+            data-structure-graph-action="fit"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-sm">fit_screen</span>
+            Fit Graph
+          </button>
+          <button
+            class="structure-graph__button"
+            data-structure-graph-action="relayout"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-sm">device_hub</span>
+            Recalculate Layout
+          </button>
+          <button
+            class="structure-graph__button"
+            data-structure-graph-action="clear"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-sm">close</span>
+            Clear Selection
+          </button>
+          <button
+            class="structure-graph__button is-disabled"
+            data-structure-graph-action="open-data"
+            disabled
+            type="button"
+          >
+            <span class="material-symbols-outlined text-sm">table_rows</span>
+            Open Data
+          </button>
+          <button
+            class="structure-graph__button"
+            data-structure-graph-action="toggle-inspector"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-sm">right_panel_close</span>
+            Hide Inspector
+          </button>
         </div>
       </div>
+
+      <div class="structure-graph__workspace">
+        <div class="structure-graph__canvas-shell">
+          <div class="structure-graph__canvas" data-structure-graph-canvas></div>
+          <div
+            class="structure-graph__empty"
+            data-structure-graph-empty
+            ${graph.tables?.length ? "hidden" : ""}
+          >
+            <span class="material-symbols-outlined structure-graph__empty-icon">account_tree</span>
+            <div class="structure-graph__title">No Tables</div>
+            <p class="text-sm leading-7 text-on-surface-variant/55">
+              The active database does not expose table metadata for the schema graph.
+            </p>
+          </div>
+        </div>
+
+        <aside
+          class="structure-graph__inspector custom-scrollbar"
+          data-structure-graph-inspector
+        >
+          ${inspectorMarkup}
+        </aside>
+      </div>
     </section>
   `;
 }
 
 export function renderStructureView(state) {
   const structure = state.structure.data;
-  const detail = getCurrentStructureEntryDetail(state);
-  const counts = structure
-    ? [
-        { label: "Tables", value: formatNumber(structure.grouped.tables.length) },
-        { label: "Views", value: formatNumber(structure.grouped.views.length) },
-        { label: "Indexes", value: formatNumber(structure.grouped.indexes.length) },
-        {
-          label: "Triggers",
-          value: formatNumber(structure.grouped.triggers.length),
-          accent: true,
-        },
-      ]
-    : [];
+  const detail =
+    state.structure.detail?.name === state.structure.selectedName ? state.structure.detail : null;
 
   return {
     main: `
       <section class="view-surface min-h-full bg-surface-container">
-        <div class="view-frame mx-auto max-w-7xl space-y-8">
+        <div class="view-frame space-y-8">
           ${renderPageHeader({
-            eyebrow: "Structure // sqlite_master + PRAGMA",
             title: "Structure",
-            subtitle: "Raw DDL, table identity, foreign keys, and index metadata",
+            subtitle: "Schema graph, foreign-key paths, raw DDL, and object metadata",
           })}
 
           ${
@@ -203,15 +321,13 @@ export function renderStructureView(state) {
                   `
                 : structure
                   ? `
-                      <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
-                        ${counts.map((metric) => renderMetricCard(metric)).join("")}
-                      </div>
-                      <section class="grid grid-cols-1 gap-6 xl:grid-cols-[0.45fr_1.55fr]">
+                      <section class="grid grid-cols-1 gap-6 xl:grid-cols-[18.5rem_minmax(0,1fr)] 2xl:grid-cols-[19.5rem_minmax(0,1fr)]">
                         <div class="space-y-6">
                           ${renderEntryGroup(
                             "Tables",
                             structure.grouped.tables,
-                            state.structure.selectedName
+                            state.structure.selectedName,
+                            { compact: true, showMeta: false }
                           )}
                           ${renderEntryGroup(
                             "Views",
@@ -221,7 +337,8 @@ export function renderStructureView(state) {
                           ${renderEntryGroup(
                             "Indexes",
                             structure.grouped.indexes,
-                            state.structure.selectedName
+                            state.structure.selectedName,
+                            { compact: true, showMeta: false }
                           )}
                           ${renderEntryGroup(
                             "Triggers",
@@ -229,7 +346,12 @@ export function renderStructureView(state) {
                             state.structure.selectedName
                           )}
                         </div>
-                        ${renderDetail(detail)}
+                        ${renderGraphSurface(
+                          structure,
+                          state.structure.selectedName,
+                          detail,
+                          state.structure.detailLoading
+                        )}
                       </section>
                     `
                   : ""

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sqlite-hub",
-    "version": "0.2.0",
+    "version": "0.3.2",
     "description": "SQLite-only local management app backend and SPA shell",
     "main": "server/server.js",
     "bin": {
@@ -8,11 +8,14 @@
     },
     "scripts": {
         "start": "node bin/sqlite-hub.js",
-        "dev": "node --watch server/server.js",
+        "dev": "node --watch server/server.js --port:4180",
         "publish": "bash publish_brew.sh && bash publish_npm.sh"
     },
     "dependencies": {
         "better-sqlite3": "^11.8.1",
+        "cytoscape": "^3.33.2",
+        "cytoscape-elk": "^2.3.0",
+        "elkjs": "^0.11.1",
         "express": "^4.21.2"
     }
 }

package/publish_brew.sh

@@ -304,6 +304,27 @@ commit_and_push_tap() {
   run git -C "$TAP_DIR" push origin HEAD
 }
 
+refresh_local_brew_tap_checkout() {
+  local brew_repo
+  local installed_tap_path
+
+  if ! command -v brew >/dev/null 2>&1; then
+    info "brew not found, skipping local tap refresh"
+    return
+  fi
+
+  brew_repo="$(brew --repository)"
+  installed_tap_path="${brew_repo}/Library/Taps/${TAP_OWNER}/${TAP_REPO_NAME}"
+
+  if [[ ! -d "$installed_tap_path/.git" ]]; then
+    info "No installed Homebrew tap checkout at ${installed_tap_path}, skipping local refresh"
+    return
+  fi
+
+  info "Refreshing installed Homebrew tap checkout at ${installed_tap_path}"
+  run git -C "$installed_tap_path" pull --ff-only
+}
+
 run_brew_audit() {
   if [[ "$SKIP_AUDIT" == "1" ]]; then
     info "Skipping brew audit"
@@ -439,6 +460,7 @@ ensure_tap_repo
 write_formula
 run_brew_audit
 commit_and_push_tap
+refresh_local_brew_tap_checkout
 
 info "Published ${FORMULA_NAME} ${VERSION}"
 info "Install with: brew install ${BREW_TAP_NAME}/${FORMULA_NAME}"

package/server/routes/connections.js

@@ -1,7 +1,7 @@
 const express = require("express");
 const { route, successResponse } = require("../utils/errors");
 
-function createConnectionsRouter({ connectionManager, importService }) {
+function createConnectionsRouter({ connectionManager, importService, backupService }) {
   const router = express.Router();
 
   router.post(
@@ -68,6 +68,20 @@ function createConnectionsRouter({ connectionManager, importService }) {
     })
   );
 
+  router.post(
+    "/backup-active",
+    route((req, res) => {
+      const backup = backupService.createActiveBackup();
+
+      res.json(
+        successResponse({
+          message: `Backup created: ${backup.fileName}`,
+          data: backup,
+        })
+      );
+    })
+  );
+
   router.get(
     "/recent",
     route((req, res) => {

package/server/routes/data.js

@@ -51,6 +51,20 @@ function createDataRouter({ dataBrowserService }) {
     })
   );
 
+  router.delete(
+    "/:tableName/rows",
+    route((req, res) => {
+      const data = dataBrowserService.deleteTableRow(req.params.tableName, req.body ?? {});
+
+      res.json(
+        successResponse({
+          message: "Table row deleted.",
+          data,
+        })
+      );
+    })
+  );
+
   return router;
 }
 

package/server/routes/export.js

@@ -4,16 +4,36 @@ const { route } = require("../utils/errors");
 function createExportRouter({ exportService }) {
   const router = express.Router();
 
+  function sendCsv(res, result) {
+    res.setHeader("Content-Type", "text/csv; charset=utf-8");
+    res.setHeader(
+      "Content-Disposition",
+      `attachment; filename="${result.filename}"`
+    );
+    res.send(result.csv);
+  }
+
   router.post(
     "/query.csv",
     route((req, res) => {
       const result = exportService.exportQuery(req.body.sql);
-      res.setHeader("Content-Type", "text/csv; charset=utf-8");
-      res.setHeader(
-        "Content-Disposition",
-        `attachment; filename="${result.filename}"`
-      );
-      res.send(result.csv);
+      sendCsv(res, result);
+    })
+  );
+
+  router.post(
+    "/table.csv",
+    route((req, res) => {
+      const result = exportService.exportTable(req.body?.tableName);
+      sendCsv(res, result);
+    })
+  );
+
+  router.get(
+    "/table/:tableName.csv",
+    route((req, res) => {
+      const result = exportService.exportTable(req.params.tableName);
+      sendCsv(res, result);
     })
   );