sqlite-hub 0.1.3

package/js/views/overview.js

@@ -0,0 +1,220 @@
+import { renderMetricCard } from "../components/metricCard.js";
+import { renderPageHeader } from "../components/pageHeader.js";
+import { renderStatusBadge } from "../components/badges.js";
+import { escapeHtml, formatBytes, formatDateTime, formatNumber } from "../utils/format.js";
+
+function renderMissingDatabase() {
+  return `
+    <div class="border border-dashed border-outline-variant/20 bg-surface-container-low px-8 py-12 text-center">
+      <span class="material-symbols-outlined mb-3 text-5xl text-on-surface-variant/25">database_off</span>
+      <p class="font-headline text-xl font-black uppercase tracking-tight text-primary-container">
+        No Active SQLite Database
+      </p>
+      <p class="mx-auto mt-3 max-w-xl text-sm leading-7 text-on-surface-variant/65">
+        Open a local SQLite file to load real overview metrics, object counts, and storage details.
+      </p>
+    </div>
+  `;
+}
+
+function renderOverviewMetrics(overview) {
+  const estimatedSizeBytes =
+    overview.estimatedSizeBytes || overview.file?.sizeBytes || 0;
+
+  const metrics = [
+    {
+      label: "Database Size",
+      value: formatBytes(overview.file?.sizeBytes ?? estimatedSizeBytes),
+      subtext: `Estimated pages: ${formatNumber(overview.sqlite?.pageCount ?? 0)}`,
+      accent: true,
+    },
+    {
+      label: "Tables",
+      value: formatNumber(overview.counts?.tables ?? 0),
+      subtext: `${formatNumber(overview.counts?.views ?? 0)} views`,
+    },
+    {
+      label: "Indexes",
+      value: formatNumber(overview.counts?.indexes ?? 0),
+      subtext: `${formatNumber(overview.counts?.triggers ?? 0)} triggers`,
+    },
+    {
+      label: "Journal Mode",
+      value: String(overview.sqlite?.journalMode ?? "n/a").toUpperCase(),
+      subtext: overview.sqlite?.foreignKeys ? "FK enabled" : "FK disabled",
+    },
+  ];
+
+  return `
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
+      ${metrics.map((metric) => renderMetricCard(metric)).join("")}
+    </div>
+  `;
+}
+
+function renderTopTables(overview) {
+  const sizeMap = new Map(
+    (overview.topTablesByEstimatedSize ?? []).map((entry) => [entry.name, entry.sizeBytes])
+  );
+
+  return `
+    <section class="shell-section xl:col-span-2">
+      <div class="flex items-center justify-between bg-surface-container-highest px-4 py-2">
+        <span class="text-[10px] font-bold uppercase tracking-[0.25em]">Top Tables</span>
+        <span class="material-symbols-outlined text-xs text-on-surface-variant">table_rows</span>
+      </div>
+      <div class="custom-scrollbar overflow-auto">
+        <table class="w-full text-left font-mono text-xs">
+          <thead>
+            <tr class="border-b border-outline-variant/10 text-on-surface/40">
+              <th class="p-4 font-normal">TABLE_NAME</th>
+              <th class="p-4 font-normal">ROWS</th>
+              <th class="p-4 font-normal">INDEXES</th>
+              <th class="p-4 font-normal">ESTIMATED_SIZE</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${(overview.topTablesByRowCount ?? [])
+              .map(
+                (table, index) => `
+                  <tr
+                    class="${
+                      index % 2 === 0 ? "bg-surface-container" : "bg-surface-container-lowest/30"
+                    } border-b border-outline-variant/5"
+                  >
+                    <td class="p-4 text-primary-container">${escapeHtml(table.name)}</td>
+                    <td class="p-4">${escapeHtml(formatNumber(table.rowCount ?? 0))}</td>
+                    <td class="p-4">${escapeHtml(formatNumber(table.indexCount ?? 0))}</td>
+                    <td class="p-4">${escapeHtml(
+                      sizeMap.has(table.name) ? formatBytes(sizeMap.get(table.name)) : "n/a"
+                    )}</td>
+                  </tr>
+                `
+              )
+              .join("")}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  `;
+}
+
+function renderOperationalSurface(overview) {
+  const lines = [
+    `PATH: ${overview.file?.path ?? "n/a"}`,
+    `LAST_MODIFIED: ${formatDateTime(overview.file?.lastModifiedAt)}`,
+    `SQLITE_VERSION: ${overview.sqlite?.version ?? "n/a"}`,
+    `PAGE_SIZE: ${formatNumber(overview.sqlite?.pageSize ?? 0)} bytes`,
+    `FREELIST_COUNT: ${formatNumber(overview.sqlite?.freelistCount ?? 0)}`,
+    `ENCODING: ${overview.sqlite?.encoding ?? "n/a"}`,
+  ];
+
+  return `
+    <section class="shell-section overflow-hidden">
+      <div class="flex items-center justify-between border-b border-outline-variant/10 bg-surface-container-highest px-4 py-2">
+        <span class="text-[10px] font-bold uppercase tracking-[0.25em]">Storage Telemetry</span>
+        <span class="text-[8px] text-primary-container">LIVE</span>
+      </div>
+      <div class="custom-scrollbar h-56 space-y-2 overflow-y-auto p-4 font-mono text-[10px] leading-relaxed">
+        ${lines
+          .map(
+            (line) => `
+              <div class="text-on-surface/40">
+                <span class="text-[#00dce1]">INFO:</span> ${escapeHtml(line)}
+              </div>
+            `
+          )
+          .join("")}
+      </div>
+    </section>
+  `;
+}
+
+function renderIntegrityCard(overview, readOnly) {
+  return `
+    <section class="relative overflow-hidden border border-outline-variant/10 bg-[radial-gradient(circle_at_top_right,rgba(252,227,0,0.14),transparent_30%),linear-gradient(135deg,#1c1b1b,#0e0e0e)]">
+      <div class="pointer-events-none absolute inset-0 bg-[linear-gradient(to_top,rgba(32,31,31,0.95),rgba(32,31,31,0.2))]"></div>
+      <div class="relative flex min-h-[220px] flex-col justify-end p-6">
+        <div class="mb-6 flex h-16 w-16 items-center justify-center border border-primary-container/20 bg-primary-container/10">
+          <span class="material-symbols-outlined text-4xl text-primary-container">security</span>
+        </div>
+        <div class="text-[10px] font-black uppercase tracking-[0.25em] text-primary-container">
+          INTEGRITY_STATUS
+        </div>
+        <div class="mt-2 flex flex-wrap items-center gap-2">
+          ${renderStatusBadge(overview.sqlite?.integrityCheck ?? "unknown", "success")}
+          ${renderStatusBadge(
+            readOnly ? "READ_ONLY" : "READ_WRITE",
+            readOnly ? "alert" : "primary"
+          )}
+        </div>
+        <div class="mt-3 font-mono text-xs text-on-surface">
+          QUICK_CHECK: ${escapeHtml(String(overview.sqlite?.quickCheck ?? "n/a"))}
+        </div>
+        <div class="mt-2 text-[10px] uppercase tracking-[0.2em] text-on-surface-variant/60">
+          USER_VERSION ${escapeHtml(String(overview.sqlite?.userVersion ?? 0))} //
+          SCHEMA_VERSION ${escapeHtml(String(overview.sqlite?.schemaVersion ?? 0))}
+        </div>
+      </div>
+    </section>
+  `;
+}
+
+export function renderOverviewView(state) {
+  const overview = state.overview.data;
+  const readOnly = state.connections.active?.readOnly;
+
+  return {
+    main: `
+      <section class="view-surface min-h-full bg-surface-container">
+        <div class="view-frame mx-auto max-w-7xl space-y-8">
+          ${renderPageHeader({
+            title: "DATABASE_OVERVIEW",
+            subtitle: overview
+              ? `System Registry: ${overview.connection?.label ?? "ACTIVE_SQLITE_DB"}`
+              : "System Registry: NO_ACTIVE_DATABASE",
+            actions: `
+              <button
+                class="toolbar-button toolbar-button--primary bg-primary-container px-4 py-2 font-headline text-xs font-bold uppercase tracking-widest text-on-primary clipped-corner"
+                data-action="navigate"
+                data-to="/editor"
+                style="--clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);"
+                type="button"
+              >
+                <span class="material-symbols-outlined text-sm">terminal</span>
+                Run Query
+              </button>
+            `,
+          })}
+
+          ${
+            state.overview.loading && !overview
+              ? `
+                <div class="flex min-h-[280px] items-center justify-center border border-outline-variant/10 bg-surface-container-low">
+                  <div class="text-center text-on-surface-variant/40">
+                    <span class="material-symbols-outlined mb-3 text-4xl">progress_activity</span>
+                    <p class="font-mono text-[10px] uppercase tracking-[0.22em]">LOADING_OVERVIEW</p>
+                  </div>
+                </div>
+              `
+              : state.overview.error
+                ? renderMissingDatabase()
+                : overview
+                  ? `
+                      ${renderOverviewMetrics(overview)}
+                      <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
+                        ${renderTopTables(overview)}
+                        <div class="space-y-6">
+                          ${renderOperationalSurface(overview)}
+                          ${renderIntegrityCard(overview, readOnly)}
+                        </div>
+                      </div>
+                    `
+                  : renderMissingDatabase()
+          }
+        </div>
+      </section>
+    `,
+    panel: "",
+  };
+}

package/js/views/settings.js

@@ -0,0 +1,109 @@
+import { renderPageHeader } from '../components/pageHeader.js';
+import { escapeHtml } from '../utils/format.js';
+
+function renderSettingsContent(state) {
+    if (state.settings.loading && !state.settings.appVersion) {
+        return `
+      <div class="flex min-h-[280px] items-center justify-center border border-outline-variant/10 bg-surface-container-low">
+        <div class="text-center text-on-surface-variant/40">
+          <span class="material-symbols-outlined mb-3 text-4xl">progress_activity</span>
+          <p class="font-mono text-[10px] uppercase tracking-[0.22em]">LOADING_SETTINGS</p>
+        </div>
+      </div>
+    `;
+    }
+
+    if (state.settings.error) {
+        return `
+      <div class="border border-error/20 bg-error-container/10 px-6 py-5 text-sm text-on-surface">
+        <div class="font-headline text-xs font-bold uppercase tracking-[0.18em] text-error">
+          ${escapeHtml(state.settings.error.code)}
+        </div>
+        <div class="mt-2">${escapeHtml(state.settings.error.message)}</div>
+      </div>
+    `;
+    }
+
+    return `
+    <div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
+      <section class="shell-section overflow-hidden">
+        <div class="flex items-center justify-between border-b border-outline-variant/10 bg-surface-container-highest px-4 py-2">
+          <span class="text-[10px] font-bold uppercase tracking-[0.25em]">Application</span>
+          <span class="material-symbols-outlined text-xs text-primary-container">deployed_code</span>
+        </div>
+        <div class="space-y-5 p-6">
+          <div>
+            <div class="text-[10px] font-mono uppercase tracking-[0.2em] text-on-surface-variant/60">
+              Current Version
+            </div>
+            <div class="mt-2 font-headline text-4xl font-black uppercase tracking-tight text-primary-container">
+              v${escapeHtml(state.settings.appVersion ?? '0.0.0')}
+            </div>
+            <div class="mt-2 text-sm text-on-surface-variant/70">
+              Read directly from <code>package.json</code>.
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="shell-section overflow-hidden">
+        <div class="flex items-center justify-between border-b border-outline-variant/10 bg-surface-container-highest px-4 py-2">
+          <span class="text-[10px] font-bold uppercase tracking-[0.25em]">Copyright</span>
+          <span class="material-symbols-outlined text-xs text-primary-container">badge</span>
+        </div>
+        <div class="space-y-4 p-6">
+          <div class="text-sm leading-7 text-on-surface">
+            Copyright Oliver Jessner
+          </div>
+          <a
+            class="inline-flex items-center gap-2 border border-outline-variant/20 bg-surface-container-low px-4 py-3 text-xs font-bold uppercase tracking-[0.2em] text-primary-container transition-colors hover:bg-surface-container-highest"
+            href="https://oliverjessner.at"
+            rel="noreferrer"
+            target="_blank"
+          >
+            <span class="material-symbols-outlined text-sm">open_in_new</span>
+            Open Website
+          </a>
+        </div>
+      </section>
+
+      <section class="shell-section overflow-hidden">
+        <div class="flex items-center justify-between border-b border-outline-variant/10 bg-surface-container-highest px-4 py-2">
+          <span class="text-[10px] font-bold uppercase tracking-[0.25em]">Source Code</span>
+          <span class="material-symbols-outlined text-xs text-primary-container">badge</span>
+        </div>
+        <div class="space-y-4 p-6">
+          <div class="text-sm leading-7 text-on-surface">
+            Open Source Code
+          </div>
+          <a
+            class="inline-flex items-center gap-2 border border-outline-variant/20 bg-surface-container-low px-4 py-3 text-xs font-bold uppercase tracking-[0.2em] text-primary-container transition-colors hover:bg-surface-container-highest"
+            href="https://github.com/oliverjessner/sqlite-hub"
+            rel="noreferrer"
+            target="_blank"
+          >
+            <span class="material-symbols-outlined text-sm">open_in_new</span>
+            Open Github 
+          </a>
+        </div>
+      </section>
+    </div>
+  `;
+}
+
+export function renderSettingsView(state) {
+    return {
+        main: `
+      <section class="view-surface min-h-full bg-surface-container">
+        <div class="view-frame mx-auto max-w-6xl space-y-8">
+          ${renderPageHeader({
+              title: 'Settings',
+              subtitle: 'Application // Build + Credits',
+          })}
+          ${renderSettingsContent(state)}
+        </div>
+      </section>
+    `,
+        panel: '',
+    };
+}

package/js/views/structure.js

@@ -0,0 +1,242 @@
+import { renderMetricCard } from "../components/metricCard.js";
+import { renderPageHeader } from "../components/pageHeader.js";
+import { getCurrentStructureEntryDetail } from "../store.js";
+import { escapeHtml, formatNumber } from "../utils/format.js";
+
+function renderEntryGroup(title, entries, activeName) {
+  return `
+    <section class="shell-section p-5">
+      <div class="mb-4 text-[10px] font-bold uppercase tracking-[0.25em] text-primary-container">
+        ${escapeHtml(title)}
+      </div>
+      ${
+        entries.length
+          ? `
+              <div class="space-y-2">
+                ${entries
+                  .map(
+                    (entry) => `
+                      <button
+                        class="w-full border px-3 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)}"
+                        type="button"
+                      >
+                        <div class="font-mono text-xs ${
+                          entry.name === activeName
+                            ? "text-primary-container"
+                            : "text-on-surface"
+                        }">
+                          ${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>
+                      </button>
+                    `
+                  )
+                  .join("")}
+              </div>
+            `
+          : `<div class="text-sm text-on-surface-variant/45">No ${escapeHtml(
+              title.toLowerCase()
+            )} found.</div>`
+      }
+    </section>
+  `;
+}
+
+function renderDetail(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 `
+    <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">
+          ${
+            detail.type === "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="navigate"
+                    data-to="/data/${encodeURIComponent(detail.name)}"
+                    type="button"
+                  >
+                    Open Data
+                  </button>
+                `
+              : ""
+          }
+          <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>
+        </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>
+      </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,
+        },
+      ]
+    : [];
+
+  return {
+    main: `
+      <section class="view-surface min-h-full bg-surface-container">
+        <div class="view-frame mx-auto max-w-7xl space-y-8">
+          ${renderPageHeader({
+            eyebrow: "Structure // sqlite_master + PRAGMA",
+            title: "Structure",
+            subtitle: "Raw DDL, table identity, foreign keys, and index metadata",
+          })}
+
+          ${
+            state.structure.loading && !structure
+              ? `
+                <div class="flex min-h-[280px] items-center justify-center border border-outline-variant/10 bg-surface-container-low">
+                  <div class="text-center text-on-surface-variant/40">
+                    <span class="material-symbols-outlined mb-3 text-4xl">progress_activity</span>
+                    <p class="font-mono text-[10px] uppercase tracking-[0.22em]">LOADING_STRUCTURE</p>
+                  </div>
+                </div>
+              `
+              : state.structure.error
+                ? `
+                    <div class="border border-error/20 bg-error-container/10 px-6 py-5 text-sm text-on-surface">
+                      <div class="font-headline text-xs font-bold uppercase tracking-[0.18em] text-error">
+                        ${escapeHtml(state.structure.error.code)}
+                      </div>
+                      <div class="mt-2">${escapeHtml(state.structure.error.message)}</div>
+                    </div>
+                  `
+                : 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]">
+                        <div class="space-y-6">
+                          ${renderEntryGroup(
+                            "Tables",
+                            structure.grouped.tables,
+                            state.structure.selectedName
+                          )}
+                          ${renderEntryGroup(
+                            "Views",
+                            structure.grouped.views,
+                            state.structure.selectedName
+                          )}
+                          ${renderEntryGroup(
+                            "Indexes",
+                            structure.grouped.indexes,
+                            state.structure.selectedName
+                          )}
+                          ${renderEntryGroup(
+                            "Triggers",
+                            structure.grouped.triggers,
+                            state.structure.selectedName
+                          )}
+                        </div>
+                        ${renderDetail(detail)}
+                      </section>
+                    `
+                  : ""
+          }
+        </div>
+      </section>
+    `,
+    panel: "",
+  };
+}

package/package.json

@@ -0,0 +1,18 @@
+{
+    "name": "sqlite-hub",
+    "version": "0.1.3",
+    "description": "SQLite-only local management app backend and SPA shell",
+    "main": "server/server.js",
+    "bin": {
+        "sqlite-hub": "bin/sqlite-hub.js"
+    },
+    "scripts": {
+        "start": "node bin/sqlite-hub.js",
+        "dev": "node --watch server/server.js",
+        "publish": "bash publish_brew.sh && bash publish_npm.sh"
+    },
+    "dependencies": {
+        "better-sqlite3": "^11.8.1",
+        "express": "^4.21.2"
+    }
+}