sqlite-hub 0.2.0 → 0.3.1

package/js/lib/cytoscapeRuntime.js

@@ -0,0 +1,16 @@
+import cytoscape from "/vendor/cytoscape/dist/cytoscape.esm.min.mjs";
+
+let elkRegistered = false;
+
+export function getCytoscape() {
+  if (!elkRegistered) {
+    if (typeof window.cytoscapeElk !== "function") {
+      throw new Error("cytoscape-elk is not available on window.");
+    }
+
+    cytoscape.use(window.cytoscapeElk);
+    elkRegistered = true;
+  }
+
+  return cytoscape;
+}

package/js/store.js

@@ -24,6 +24,7 @@ const state = {
     recent: [],
     active: null,
     loading: false,
+    backupLoading: false,
     error: null,
   },
   settings: {
@@ -47,6 +48,7 @@ const state = {
     page: 1,
     pageSize: 50,
     selectedRowIndex: null,
+    exportLoading: false,
     error: null,
     saveError: null,
   },
@@ -159,6 +161,7 @@ function setMissingDatabaseState() {
   state.dataBrowser.table = null;
   state.dataBrowser.page = 1;
   state.dataBrowser.selectedRowIndex = null;
+  state.dataBrowser.exportLoading = false;
   state.dataBrowser.error = error;
   state.dataBrowser.saveError = null;
 
@@ -480,6 +483,7 @@ function invalidateDatabaseCaches() {
   state.dataBrowser.table = null;
   state.dataBrowser.page = 1;
   state.dataBrowser.selectedRowIndex = null;
+  state.dataBrowser.exportLoading = false;
   state.dataBrowser.error = null;
   state.dataBrowser.saveError = null;
   state.structure.data = null;
@@ -743,6 +747,32 @@ export async function removeConnection(id) {
   }
 }
 
+export async function createActiveConnectionBackup() {
+  if (!state.connections.active) {
+    pushToast("No active SQLite database selected for backup.", "alert");
+    return null;
+  }
+
+  state.connections.backupLoading = true;
+  emitChange();
+
+  try {
+    const response = await api.createActiveConnectionBackup();
+    await refreshConnectionsState();
+    pushToast(response.message || "Backup created.", "success");
+    return response.data;
+  } catch (error) {
+    pushToast(
+      normalizeError(error)?.message || "Backup could not be created.",
+      "alert"
+    );
+    return null;
+  } finally {
+    state.connections.backupLoading = false;
+    emitChange();
+  }
+}
+
 export function setCurrentQuery(query) {
   const nextQuery = String(query ?? "");
   const previousLineCount = Math.max(1, String(state.editor.sqlText || "").split("\n").length);
@@ -1027,6 +1057,31 @@ export async function exportCurrentQueryCsv() {
   }
 }
 
+export async function exportCurrentDataTableCsv() {
+  const tableName = state.dataBrowser.selectedTable;
+
+  if (!tableName) {
+    pushToast("No table selected for export.", "alert");
+    return false;
+  }
+
+  state.dataBrowser.exportLoading = true;
+  emitChange();
+
+  try {
+    await api.downloadTableCsv(tableName);
+    pushToast(`CSV export started for ${tableName}.`, "success");
+    return true;
+  } catch (error) {
+    state.dataBrowser.error = normalizeError(error);
+    emitChange();
+    return false;
+  } finally {
+    state.dataBrowser.exportLoading = false;
+    emitChange();
+  }
+}
+
 export async function refreshCurrentRoute() {
   await loadRouteData(state.route);
 }

package/js/views/connections.js

@@ -5,9 +5,11 @@ import { escapeHtml } from "../utils/format.js";
 function renderConnectionsActionButton({
   label,
   icon,
+  action = "open-modal",
   modal,
   tone = "secondary",
   className = "",
+  disabled = false,
 }) {
   const clipPath = "polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%)";
   const toneClassName =
@@ -19,14 +21,16 @@ function renderConnectionsActionButton({
       ? "text-base text-on-primary"
       : "text-base text-primary-container/90";
   const clipStyle = `style="--clip-path: ${clipPath};"`;
+  const modalAttribute = modal ? `data-modal="${modal}"` : "";
 
   return `
     <button
-      class="flex h-11 items-center justify-between gap-6 px-5 font-headline text-xs font-bold uppercase tracking-[0.18em] transition-colors ${toneClassName} ${className}"
-      data-action="open-modal"
-      data-modal="${modal}"
+      class="flex h-11 items-center justify-between gap-6 px-5 font-headline text-xs font-bold uppercase tracking-[0.18em] transition-colors disabled:cursor-default disabled:opacity-40 ${toneClassName} ${className}"
+      data-action="${escapeHtml(action)}"
+      ${modalAttribute}
       ${clipStyle}
       type="button"
+      ${disabled ? "disabled" : ""}
     >
       <span>${label}</span>
       <span class="material-symbols-outlined ${iconClassName}">${icon}</span>
@@ -112,6 +116,17 @@ export function renderConnectionsView(state) {
       modal: "create-connection",
       className: "min-w-[13rem]",
     })}
+    ${
+      state.connections.active
+        ? renderConnectionsActionButton({
+            label: state.connections.backupLoading ? "Creating Backup..." : "Create Backup",
+            icon: "inventory_2",
+            action: "create-backup",
+            className: "min-w-[13rem]",
+            disabled: state.connections.backupLoading,
+          })
+        : ""
+    }
   `;
 
   return {

package/js/views/data.js

@@ -95,6 +95,19 @@ function renderWorkspaceHeader(state) {
           </div>
         </div>
         <div class="flex items-center gap-3">
+          ${
+            table
+              ? `
+                  <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="export-data-csv"
+                    type="button"
+                  >
+                    ${state.dataBrowser.exportLoading ? "Exporting..." : "Export CSV"}
+                  </button>
+                `
+              : ""
+          }
           <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="refresh-view"

package/js/views/editor.js

@@ -243,6 +243,7 @@ export function renderEditorView(state, { isResultsRoute = false } = {}) {
             ${renderQueryEditor({
               query: state.editor.sqlText,
               executing: state.editor.executing,
+              exporting: state.editor.exportLoading,
               history: state.editor.history,
               historyLoading: state.editor.historyLoading,
               title: connection?.label ?? "SQLite Query Workspace",

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.1",
     "description": "SQLite-only local management app backend and SPA shell",
     "main": "server/server.js",
     "bin": {
@@ -13,6 +13,9 @@
     },
     "dependencies": {
         "better-sqlite3": "^11.8.1",
+        "cytoscape": "^3.33.2",
+        "cytoscape-elk": "^2.3.0",
+        "elkjs": "^0.11.1",
         "express": "^4.21.2"
     }
 }