sqlite-hub 0.17.2 → 1.1.0

package/frontend/js/views/connections.js

@@ -1,39 +1,36 @@
-import { renderConnectionCard } from "../components/connectionCard.js";
-import { renderPageHeader } from "../components/pageHeader.js";
-import { escapeHtml } from "../utils/format.js";
+import { renderConnectionCard } from '../components/connectionCard.js';
+import { renderPageHeader } from '../components/pageHeader.js';
+import { escapeHtml } from '../utils/format.js';
 
 function renderConnectionsActionButton({
-  label,
-  icon,
-  action = "open-modal",
-  modal,
-  tone = "secondary",
-  disabled = false,
+    label,
+    icon,
+    action = 'open-modal',
+    modal,
+    tone = 'secondary',
+    disabled = false,
 }) {
-  const toneClassName =
-    tone === "primary"
-      ? "signature-button"
-      : "standard-button";
-  const iconClassName = "";
-  const modalAttribute = modal ? `data-modal="${modal}"` : "";
+    const toneClassName = tone === 'primary' ? 'signature-button' : 'standard-button';
+    const iconClassName = '';
+    const modalAttribute = modal ? `data-modal="${modal}"` : '';
 
-  return `
+    return `
     <button
       class="${toneClassName}"
       data-action="${escapeHtml(action)}"
       ${modalAttribute}
       type="button"
-      ${disabled ? "disabled" : ""}
+      ${disabled ? 'disabled' : ''}
     >
       <span>${label}</span>
-      <span class="material-symbols-outlined${iconClassName ? ` ${iconClassName}` : ""}">${icon}</span>
+      <span class="material-symbols-outlined${iconClassName ? ` ${iconClassName}` : ''}">${icon}</span>
     </button>
   `;
 }
 
 function renderConnectionsBody(state) {
-  if (state.connections.loading && !state.connections.recent.length) {
-    return `
+    if (state.connections.loading && !state.connections.recent.length) {
+        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>
@@ -41,10 +38,10 @@ function renderConnectionsBody(state) {
         </div>
       </div>
     `;
-  }
+    }
 
-  if (state.connections.error) {
-    return `
+    if (state.connections.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.connections.error.code)}
@@ -52,10 +49,10 @@ function renderConnectionsBody(state) {
         <div class="mt-2">${escapeHtml(state.connections.error.message)}</div>
       </div>
     `;
-  }
+    }
 
-  if (!state.connections.recent.length) {
-    return `
+    if (!state.connections.recent.length) {
+        return `
       <div class="border border-dashed border-outline-variant/20 bg-surface-container-low px-8 py-10 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">
@@ -66,71 +63,69 @@ function renderConnectionsBody(state) {
         </p>
         <div class="mt-6 flex flex-wrap items-center justify-center gap-3">
           ${renderConnectionsActionButton({
-            label: "Open Database",
-            icon: "folder_open",
-            modal: "open-connection",
-            tone: "primary",
+              label: 'Create Database',
+              icon: 'note_add',
+              modal: 'create-connection',
           })}
           ${renderConnectionsActionButton({
-            label: "Create Database",
-            icon: "note_add",
-            modal: "create-connection",
+              label: 'Open Database',
+              icon: 'folder_open',
+              modal: 'open-connection',
+              tone: 'primary',
           })}
         </div>
       </div>
     `;
-  }
+    }
 
-  return `
+    return `
     <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
       ${state.connections.recent
-        .map((connection) =>
-          renderConnectionCard(connection, state.connections.active?.id)
-        )
-        .join("")}
+          .map(connection => renderConnectionCard(connection, state.connections.active?.id))
+          .join('')}
     </div>
   `;
 }
 
 export function renderConnectionsView(state) {
-  const actions = `
+    const actions = `
+    ${
+        state.connections.active
+            ? renderConnectionsActionButton({
+                  label: state.connections.backupLoading ? 'Creating Backup...' : 'Create Backup',
+                  icon: 'inventory_2',
+                  action: 'create-backup',
+                  disabled: state.connections.backupLoading,
+              })
+            : ''
+    }
     ${renderConnectionsActionButton({
-      label: "Open Database",
-      icon: "folder_open",
-      modal: "open-connection",
-      tone: "primary",
+        label: 'Create Database',
+        icon: 'note_add',
+        modal: 'create-connection',
     })}
     ${renderConnectionsActionButton({
-      label: "Create Database",
-      icon: "note_add",
-      modal: "create-connection",
+        label: 'Open Database',
+        icon: 'folder_open',
+        modal: 'open-connection',
+        tone: 'primary',
     })}
-    ${
-      state.connections.active
-        ? renderConnectionsActionButton({
-            label: state.connections.backupLoading ? "Creating Backup..." : "Create Backup",
-            icon: "inventory_2",
-            action: "create-backup",
-            disabled: state.connections.backupLoading,
-          })
-        : ""
-    }
   `;
 
-  return {
-    main: `
+    return {
+        main: `
       <section class="view-surface relative min-h-full overflow-hidden">
         <div class="data-grid-texture pointer-events-none absolute inset-0"></div>
         <div class="view-frame relative z-10">
           ${renderPageHeader({
-            title: "Connections",
-            subtitle: `Registry // Recent_Targets: ${String(state.connections.recent.length).padStart(2, "0")}`,
-            actions,
+              title: 'Connections',
+              subtitle: `Registry // Recent_Targets: ${String(state.connections.recent.length).padStart(2, '0')}`,
+              actions,
           })}
           ${renderConnectionsBody(state)}
         </div>
       </section>
     `,
-    panel: "",
-  };
+        panel: '',
+    };
 }

package/frontend/js/views/data.js

@@ -112,25 +112,8 @@ function renderWorkspaceHeader(state) {
     const tablesVisible = state.dataBrowser.tablesVisible !== false;
 
     return `
-    <header class="border-b border-outline-variant/10 bg-surface-container px-6 py-5">
-      <div class="flex flex-wrap items-end justify-between gap-4">
-        <div class="data-headline-container">
-          <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
-            Data Browser
-          </div>
-          <h1 class="mt-2 font-headline text-4xl font-black uppercase tracking-tight text-primary-container">
-            ${escapeHtml(table?.name ?? 'Table Data')}
-          </h1>
-          <div class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-            ${
-                table
-                    ? `rows ${escapeHtml(formatNumber(table.rowCount ?? 0))} // columns ${escapeHtml(
-                          formatNumber(table.columns?.length ?? 0),
-                      )}`
-                    : `tables ${escapeHtml(formatNumber(state.dataBrowser.tables.length))}`
-            }
-          </div>
-        </div>
+    <header class="border-b border-outline-variant/10 bg-surface-container px-6 py-3">
+      <div class="flex flex-wrap items-center justify-between gap-4">
         <div class="flex items-center gap-3">
           ${
               table
@@ -145,7 +128,14 @@ function renderWorkspaceHeader(state) {
                             : '<span class="material-symbols-outlined text-sm">visibility</span> Show Tables'
                     }
                   </button>
-                  <button
+                  `
+                  : ''
+          }
+        </div>
+        <div class="flex flex-wrap items-center justify-end gap-3">
+          ${
+              table
+                  ? `<button
                     class="standard-button"
                     data-action="open-data-export-modal"
                     type="button"
@@ -476,6 +466,8 @@ function renderTableSurface(state) {
         escapeHtml(formatNumber(totalRows)),
         filteredRowsText,
         ' rows',
+        ' // columns ',
+        escapeHtml(formatNumber(table.columns?.length ?? 0)),
         '</div>',
         '<div class="flex flex-wrap items-center gap-4"><div class="flex items-center gap-2">',
         '<span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">rows</span>',

package/frontend/js/views/editor.js

@@ -307,8 +307,6 @@ export function renderEditorView(state, { isResultsRoute = false } = {}) {
                 query: state.editor.sqlText,
                 executing: state.editor.executing,
                 exporting: state.editor.exportLoading,
-                historyLoading: state.editor.historyLoading,
-                historyTotal: state.editor.historyTotal,
                 editorVisible: state.editor.editorPanelVisible,
                 historyVisible: state.editor.historyPanelVisible,
             })}

package/frontend/js/views/settings.js

@@ -1,6 +1,95 @@
 import { renderPageHeader } from '../components/pageHeader.js';
+import { renderTextInput } from '../components/formControls.js';
 import { escapeHtml } from '../utils/format.js';
 
+function renderSettingsNavigation(activeSection) {
+    const items = [
+        { id: 'information', icon: 'info', label: 'Information' },
+        { id: 'api-tokens', icon: 'key', label: 'API Tokens' },
+    ];
+
+    return `
+      <nav class="flex flex-wrap gap-2 border-b border-outline-variant/10 pb-4" aria-label="Settings sections">
+        ${items
+            .map(
+                item => `
+              <button
+                class="query-history-tab ${activeSection === item.id ? 'is-active' : ''}"
+                aria-current="${activeSection === item.id ? 'page' : 'false'}"
+                data-action="set-settings-section"
+                data-section="${item.id}"
+                type="button"
+              >
+                <span class="material-symbols-outlined text-sm mr-[5px]">${item.icon}</span>
+                ${item.label}
+              </button>
+            `,
+            )
+            .join('')}
+      </nav>
+    `;
+}
+
+function renderVersionCheckStatus(settings) {
+    const result = settings.versionCheck;
+    const error = settings.versionCheckError;
+
+    if (error) {
+        return `
+          <div class="border border-error/20 bg-error-container/10 px-4 py-3 text-sm text-on-surface">
+            <div class="font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-error">
+              ${escapeHtml(error.code ?? 'VERSION_CHECK_FAILED')}
+            </div>
+            <div class="mt-1 text-on-surface-variant">${escapeHtml(error.message ?? 'Version check failed.')}</div>
+          </div>
+        `;
+    }
+
+    if (!result) {
+        return `
+          <div class="border border-outline-variant/10 bg-surface-container-high px-4 py-3 text-sm text-on-surface-variant">
+            No version check has been run yet.
+          </div>
+        `;
+    }
+
+    const updateAvailable = Boolean(result.updateAvailable);
+    const releaseLink =
+        updateAvailable && result.releaseUrl
+            ? `
+              <a
+                class="standard-button"
+                href="${escapeHtml(result.releaseUrl)}"
+                rel="noreferrer"
+                target="_blank"
+              >
+                <span class="material-symbols-outlined text-sm">open_in_new</span>
+                Open Release
+              </a>
+            `
+            : '';
+
+    return `
+      <div class="border ${
+          updateAvailable ? 'border-primary-container/30 bg-primary-container/5' : 'border-outline-variant/10 bg-surface-container-high'
+      } px-4 py-3">
+        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div class="min-w-0">
+            <div class="font-mono text-[10px] font-bold uppercase tracking-[0.18em] ${
+                updateAvailable ? 'text-primary-container' : 'text-on-surface-variant/70'
+            }">
+              ${updateAvailable ? 'New Version Available' : 'Up To Date'}
+            </div>
+            <div class="mt-1 text-sm text-on-surface-variant">
+              Current v${escapeHtml(result.currentVersion ?? '0.0.0')} · Latest v${escapeHtml(result.latestVersion ?? 'unknown')}
+            </div>
+          </div>
+          ${releaseLink}
+        </div>
+      </div>
+    `;
+}
+
 function renderSettingsContent(state) {
     if (state.settings.loading && !state.settings.appVersion) {
         return `
@@ -24,11 +113,98 @@ function renderSettingsContent(state) {
     `;
     }
 
+    const activeSection = state.settings.section === 'api-tokens' ? 'api-tokens' : 'information';
     const appVersion = escapeHtml(state.settings.appVersion ?? '0.0.0');
     const sqliteVersion = escapeHtml(state.settings.sqliteVersion ?? 'unknown');
+    const versionCheckLoading = Boolean(state.settings.versionCheckLoading);
+    const tokenDatabase = state.settings.tokenDatabase;
+    const apiTokens = state.settings.apiTokens ?? [];
+    const createdApiToken = state.settings.createdApiToken;
+    const tokenSaving = Boolean(state.settings.tokenSaving);
+    const tokenItems = apiTokens.length
+        ? apiTokens
+              .map(
+                  token => `
+                <div class="flex flex-col gap-3 border border-outline-variant/10 bg-surface-container-high px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
+                  <div class="min-w-0">
+                    <div class="truncate text-sm font-semibold text-on-surface">${escapeHtml(token.name)}</div>
+                    <div class="mt-1 font-mono text-[10px] text-on-surface-variant/60">
+                      ${escapeHtml(token.tokenPrefix)}... · Created ${escapeHtml(token.createdAt ?? 'unknown')}
+                    </div>
+                  </div>
+                  <button
+                    class="delete-button"
+                    data-action="open-delete-api-token-modal"
+                    data-token-id="${escapeHtml(token.id)}"
+                    type="button"
+                    ${tokenSaving ? 'disabled' : ''}
+                  >
+                    Delete
+                  </button>
+                </div>
+              `,
+              )
+              .join('')
+        : '<div class="text-sm text-on-surface-variant">No API tokens exist for this database.</div>';
+    const tokenSection = tokenDatabase
+        ? `
+          <div class="space-y-5">
+            <div class="space-y-3">
+              <div class="text-sm font-semibold text-on-surface">${escapeHtml(tokenDatabase.label)}</div>
+              <div>
+                <div class="text-[10px] font-mono uppercase tracking-[0.2em] text-on-surface-variant/60">
+                  Database ID
+                </div>
+                <div class="mt-2 grid grid-cols-1 gap-3 sm:grid-cols-[minmax(0,1fr)_9rem]">
+                  <div
+                    class="min-w-0 flex-1 break-all border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 font-mono text-sm text-primary-container"
+                    data-database-id
+                  >${escapeHtml(tokenDatabase.id)}</div>
+                  <button class="standard-button w-full self-center justify-center" data-action="copy-database-id" type="button">
+                    <span class="material-symbols-outlined text-sm">content_copy</span>
+                    Copy ID
+                  </button>
+                </div>
+              </div>
+            </div>
+            <form class="grid grid-cols-1 gap-3 sm:grid-cols-[minmax(0,1fr)_9rem]" data-form="create-api-token">
+              ${renderTextInput({
+                  className: 'min-w-0 flex-1',
+                  dataAttributes: { apiTokenName: true },
+                  maxlength: 80,
+                  name: 'name',
+                  placeholder: 'Token name',
+              })}
+              <button class="standard-button w-full self-center justify-center" type="submit" ${tokenSaving ? 'disabled' : ''}>
+                Create Token
+              </button>
+            </form>
+            ${
+                createdApiToken?.token
+                    ? `
+                <div class="border border-primary-container/20 bg-primary-container/5 p-4">
+                  <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">Shown once</div>
+                  <div class="mt-2 text-sm text-on-surface-variant">Store this token now. SQLite Hub only keeps its hash.</div>
+                  <div class="mt-3 flex flex-col gap-2 sm:flex-row">
+                    ${renderTextInput({
+                        className: 'min-w-0 flex-1 font-mono',
+                        dataAttributes: { createdApiToken: true },
+                        readonly: true,
+                        value: createdApiToken.token,
+                    })}
+                    <button class="standard-button" data-action="copy-created-api-token" type="button">Copy</button>
+                  </div>
+                </div>
+              `
+                    : ''
+            }
+            <div class="space-y-2">${tokenItems}</div>
+          </div>
+        `
+        : '<div class="text-sm leading-6 text-on-surface-variant">Select a database before creating database-specific API tokens.</div>';
 
-    return `
-    <div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
+    const informationSection = `
+      <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>
@@ -56,6 +232,23 @@ function renderSettingsContent(state) {
           <div class="border-t border-outline-variant/10 py-4 text-sm leading-6 text-on-surface-variant">
             SQL functions and syntax are evaluated with this SQLite runtime.
           </div>
+          <div class="border-t border-outline-variant/10 pt-4">
+            <div class="mb-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+              <div class="text-[10px] font-mono uppercase tracking-[0.2em] text-on-surface-variant/60">
+                Version_Check
+              </div>
+              <button
+                class="standard-button"
+                data-action="check-app-version"
+                type="button"
+                ${versionCheckLoading ? 'disabled aria-disabled="true"' : ''}
+              >
+                <span class="material-symbols-outlined text-sm">${versionCheckLoading ? 'progress_activity' : 'sync'}</span>
+                ${versionCheckLoading ? 'Checking...' : 'Check Updates'}
+              </button>
+            </div>
+            ${renderVersionCheckStatus(state.settings)}
+          </div>
         </div>
       </section>
 
@@ -120,8 +313,26 @@ function renderSettingsContent(state) {
           </a>
         </div>
       </section>
-    </div>
-  `;
+      </div>
+    `;
+    const apiTokensSection = `
+      <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] mr-px">API Tokens</span>
+          <span class="material-symbols-outlined text-xs text-primary-container">key</span>
+        </div>
+        <div class="p-6">
+          ${tokenSection}
+        </div>
+      </section>
+    `;
+
+    return `
+      <div class="space-y-6">
+        ${renderSettingsNavigation(activeSection)}
+        ${activeSection === 'api-tokens' ? apiTokensSection : informationSection}
+      </div>
+    `;
 }
 
 export function renderSettingsView(state) {
@@ -131,7 +342,10 @@ export function renderSettingsView(state) {
         <div class="view-frame mx-auto max-w-6xl space-y-8">
           ${renderPageHeader({
               title: 'Settings',
-              subtitle: 'Application // Build + Credits',
+              subtitle:
+                  state.settings.section === 'api-tokens'
+                      ? 'Security // Database API access'
+                      : 'Application // Build + Credits',
           })}
           ${renderSettingsContent(state)}
         </div>

package/frontend/js/views/structure.js

@@ -115,20 +115,27 @@ function renderObjectInspector(detail) {
     return `
     <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.tableName
-                  ? `
-                  <div class="structure-graph__subtitle">
-                    TABLE ${escapeHtml(detail.tableName)}
-                  </div>
-                `
-                  : ''
-          }
+        <div class="structure-graph__panel-heading">
+          <div class="structure-graph__eyebrow">Object Inspector</div>
+          <button
+            class="query-history-icon-button"
+            data-structure-graph-action="toggle-inspector"
+            type="button"
+            aria-label="Hide inspector"
+          >
+            <span class="material-symbols-outlined text-[18px]">close</span>
+          </button>
         </div>
+        <div class="structure-graph__title">${escapeHtml(detail.name)}</div>
+        ${
+            detail.tableName
+                ? `
+                <div class="structure-graph__subtitle">
+                  TABLE ${escapeHtml(detail.tableName)}
+                </div>
+              `
+                : ''
+        }
       </div>
 
       <div class="structure-graph__summary">
@@ -255,6 +262,8 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading, tabl
             <span class="material-symbols-outlined text-sm">table_rows</span>
             Open Data
           </button>
+        </div>
+        <div class="structure-graph__toolbar-inspector">
           <button
             class="${toolbarButtonClass}"
             data-structure-graph-action="toggle-inspector"
@@ -280,6 +289,11 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading, tabl
               The active database does not expose table metadata for the schema graph.
             </p>
           </div>
+          <div
+            class="structure-graph__edge-readout"
+            data-structure-graph-edge-readout
+            hidden
+          ></div>
         </div>
 
         <aside