sqlite-hub 0.17.2 → 1.0.0

package/frontend/js/api.js

@@ -86,6 +86,12 @@ export function createConnection(payload) {
   });
 }
 
+export function chooseOpenDatabasePath() {
+  return request("/api/connections/choose-open-path", {
+    method: "POST",
+  });
+}
+
 export function chooseCreateDatabasePath() {
   return request("/api/connections/choose-create-path", {
     method: "POST",
@@ -425,6 +431,19 @@ export function patchSettings(settings) {
   });
 }
 
+export function createApiToken(name) {
+  return request("/api/settings/api-tokens", {
+    method: "POST",
+    body: { name },
+  });
+}
+
+export function deleteApiToken(tokenId) {
+  return request(`/api/settings/api-tokens/${encodeURIComponent(tokenId)}`, {
+    method: "DELETE",
+  });
+}
+
 const TEXT_EXPORT_EXTENSIONS = {
   csv: "csv",
   tsv: "tsv",

package/frontend/js/app.js

@@ -24,6 +24,8 @@ import { renderTopNav } from './components/topNav.js';
 import { createRouter } from './router.js';
 import {
     createActiveConnectionBackup,
+    createSettingsApiToken,
+    chooseOpenDatabasePath,
     chooseCreateDatabasePath,
     createDocument,
     createDocumentFromMarkdownExport,
@@ -49,6 +51,7 @@ import {
     openDeleteDataRowModal,
     openDeleteEditorRowModal,
     openDeleteQueryHistoryModal,
+    openDeleteSettingsApiTokenModal,
     openDeleteQueryChartModal,
     openDataExportModal,
     openDeleteDocumentModal,
@@ -103,6 +106,7 @@ import {
     submitCreateMediaTaggingTagTable,
     submitCreateMediaTaggingMappingTable,
     submitDeleteQueryHistoryConfirmation,
+    submitDeleteSettingsApiTokenConfirmation,
     submitRowUpdatePreviewConfirmation,
     setQueryHistoryPanelVisibility,
     sortDataTableByColumn,
@@ -113,6 +117,7 @@ import {
     setCopyColumnModalEditedText,
     setCopyColumnModalSubmitting,
     setRoute,
+    setSettingsSection,
     saveQueryHistoryNotes,
     saveQueryHistoryTitle,
     saveCurrentTableDesignerDraft,
@@ -2091,6 +2096,32 @@ async function handleAction(actionNode) {
         case 'refresh-view':
             await refreshCurrentRoute();
             return;
+        case 'set-settings-section':
+            setSettingsSection(actionNode.dataset.section);
+            return;
+        case 'open-delete-api-token-modal':
+            openDeleteSettingsApiTokenModal(actionNode.dataset.tokenId);
+            return;
+        case 'copy-created-api-token': {
+            const tokenInput = document.querySelector('[data-created-api-token]');
+            const token = tokenInput instanceof HTMLInputElement ? tokenInput.value : '';
+
+            if (token && navigator.clipboard?.writeText) {
+                await navigator.clipboard.writeText(token);
+                showToast('API token copied.', 'success');
+            }
+            return;
+        }
+        case 'copy-database-id': {
+            const databaseIdNode = document.querySelector('[data-database-id]');
+            const databaseId = databaseIdNode?.textContent?.trim() ?? '';
+
+            if (databaseId && navigator.clipboard?.writeText) {
+                await navigator.clipboard.writeText(databaseId);
+                showToast('Database ID copied.', 'success');
+            }
+            return;
+        }
         case 'open-row-editor-url':
             openRowEditorUrl(actionNode);
             return;
@@ -2181,6 +2212,33 @@ async function handleAction(actionNode) {
         case 'edit-connection':
             openEditConnectionModal(actionNode.dataset.connectionId);
             return;
+        case 'choose-open-database-path': {
+            const labelNode = actionNode.querySelector('[data-open-database-path-button-label]');
+
+            actionNode.setAttribute('disabled', '');
+            if (labelNode) {
+                labelNode.textContent = 'Choosing...';
+            }
+
+            const selectedPath = await chooseOpenDatabasePath();
+            const pathInput = document.querySelector(
+                '[data-form="open-connection"] [data-open-database-path]',
+            );
+
+            if (selectedPath && pathInput instanceof HTMLInputElement) {
+                pathInput.value = selectedPath;
+                pathInput.focus({ preventScroll: true });
+                pathInput.setSelectionRange(pathInput.value.length, pathInput.value.length);
+            }
+
+            if (actionNode.isConnected) {
+                actionNode.removeAttribute('disabled');
+                if (labelNode) {
+                    labelNode.textContent = 'Browse...';
+                }
+            }
+            return;
+        }
         case 'choose-create-database-path': {
             const labelNode = actionNode.querySelector('[data-create-database-path-button-label]');
 
@@ -3116,6 +3174,9 @@ document.addEventListener('submit', async event => {
     const formData = submitter ? new FormData(form, submitter) : new FormData(form);
 
     switch (form.dataset.form) {
+        case 'create-api-token':
+            await createSettingsApiToken(String(formData.get('name') ?? ''));
+            return;
         case 'open-connection': {
             resetStructureGraphForDatabaseChange();
             const connection = await submitOpenConnection({
@@ -3206,6 +3267,9 @@ document.addEventListener('submit', async event => {
             }
             return;
         }
+        case 'delete-api-token-confirm':
+            await submitDeleteSettingsApiTokenConfirmation();
+            return;
         case 'document-insert-table': {
             const inserted = await submitDocumentInsertTable();
 

package/frontend/js/components/formControls.js

@@ -0,0 +1,38 @@
+import { escapeHtml } from '../utils/format.js';
+
+export const STANDARD_TEXT_INPUT_CLASS =
+    'control-input w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors placeholder:text-on-surface-variant/35 focus:border-primary-container';
+
+export function renderTextInput({
+    className = '',
+    dataAttributes = {},
+    disabled = false,
+    maxlength = null,
+    name = '',
+    placeholder = '',
+    readonly = false,
+    spellcheck = null,
+    type = 'text',
+    value = '',
+} = {}) {
+    const attributes = [
+        `class="${escapeHtml([STANDARD_TEXT_INPUT_CLASS, className].filter(Boolean).join(' '))}"`,
+        name ? `name="${escapeHtml(name)}"` : '',
+        placeholder ? `placeholder="${escapeHtml(placeholder)}"` : '',
+        `type="${escapeHtml(type)}"`,
+        `value="${escapeHtml(value)}"`,
+        Number.isInteger(maxlength) ? `maxlength="${maxlength}"` : '',
+        disabled ? 'disabled' : '',
+        readonly ? 'readonly' : '',
+        typeof spellcheck === 'boolean' ? `spellcheck="${spellcheck}"` : '',
+        ...Object.entries(dataAttributes).map(([name, attributeValue]) => {
+            const attributeName = `data-${String(name).replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)}`;
+
+            return attributeValue === true
+                ? attributeName
+                : `${attributeName}="${escapeHtml(attributeValue)}"`;
+        }),
+    ].filter(Boolean);
+
+    return `<input ${attributes.join(' ')} />`;
+}

package/frontend/js/components/modal.js

@@ -7,6 +7,7 @@ import {
   isMarkdownTodoCopyColumnMode,
 } from "../utils/copyColumnExport.js";
 import { renderConnectionLogo } from "./connectionLogo.js";
+import { renderTextInput } from "./formControls.js";
 import {
   analyzeQueryChartResult,
   getQueryChartTypeLabel,
@@ -27,13 +28,7 @@ function renderField({ label, name, type = "text", placeholder = "", value = ""
       <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
         ${escapeHtml(label)}
       </span>
-      <input
-        class="control-input w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
-        name="${escapeHtml(name)}"
-        placeholder="${escapeHtml(placeholder)}"
-        type="${escapeHtml(type)}"
-        value="${escapeHtml(value)}"
-      />
+      ${renderTextInput({ name, placeholder, type, value })}
     </label>
   `;
 }
@@ -152,14 +147,33 @@ function renderError(error) {
   `;
 }
 
-function renderOpenConnectionForm(modal) {
+export function renderOpenConnectionForm(modal) {
   return `
     <form class="space-y-5" data-form="open-connection">
-      ${renderField({
-        label: "SQLite File Path",
-        name: "path",
-        placeholder: "/absolute/path/to/database.sqlite",
-      })}
+      <label class="block space-y-2">
+        <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          SQLite File Path
+        </span>
+        <span class="flex items-stretch gap-2">
+          ${renderTextInput({
+            className: "min-w-0 flex-1",
+            dataAttributes: { openDatabasePath: true },
+            name: "path",
+            placeholder: "/absolute/path/to/database.sqlite",
+          })}
+          <button
+            class="standard-button flex-none"
+            data-action="choose-open-database-path"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-sm">folder_open</span>
+            <span data-open-database-path-button-label>Browse...</span>
+          </button>
+        </span>
+        <span class="block text-[11px] leading-5 text-on-surface-variant/60">
+          Choose an existing SQLite file, or enter an absolute path manually.
+        </span>
+      </label>
       ${renderField({
         label: "Label",
         name: "label",
@@ -272,13 +286,12 @@ export function renderCreateDatabaseForm(modal) {
           New SQLite File Path
         </span>
         <span class="flex items-stretch gap-2">
-          <input
-            class="control-input min-w-0 flex-1 border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
-            data-create-database-path
-            name="path"
-            placeholder="/absolute/path/to/new-database.sqlite"
-            type="text"
-          />
+          ${renderTextInput({
+            className: "min-w-0 flex-1",
+            dataAttributes: { createDatabasePath: true },
+            name: "path",
+            placeholder: "/absolute/path/to/new-database.sqlite",
+          })}
           <button
             class="standard-button flex-none"
             data-action="choose-create-database-path"
@@ -847,6 +860,28 @@ function renderDeleteDocumentForm(modal) {
   ].join("");
 }
 
+export function renderDeleteApiTokenForm(modal) {
+  return [
+    '<form class="space-y-5" data-form="delete-api-token-confirm"><div class="space-y-3">',
+    '<p class="text-sm leading-7 text-on-surface">Delete API token <span class="font-bold text-primary-container">',
+    escapeHtml(modal.tokenName ?? "API token"),
+    "</span>?</p>",
+    '<p class="text-sm leading-7 text-on-surface-variant/65">Requests using this token will immediately lose access to <span class="font-semibold text-on-surface">',
+    escapeHtml(modal.databaseLabel ?? "the active database"),
+    ".</span></p>",
+    '<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 font-mono text-[10px] text-on-surface-variant/55">',
+    escapeHtml(modal.tokenPrefix ?? ""),
+    "...</div>",
+    "</div>",
+    renderError(modal.error),
+    '<div class="flex items-center justify-between gap-3 pt-2">',
+    '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
+    '<button class="delete-button" type="submit">',
+    modal.submitting ? "Deleting..." : "Delete Token",
+    "</button></div></form>",
+  ].join("");
+}
+
 function getDocumentInsertQueryTitle(query) {
   return query?.displayTitle || query?.title || query?.previewSql || query?.rawSql || "Saved query";
 }
@@ -1687,6 +1722,11 @@ export function renderModal(state) {
       title: "Delete Document",
       body: renderDeleteDocumentForm(modal),
     },
+    "delete-api-token": {
+      eyebrow: "Settings // Confirm token deletion",
+      title: "Delete API Token",
+      body: renderDeleteApiTokenForm(modal),
+    },
     "document-insert-table": {
       eyebrow: "Documents // Saved query output",
       title: "Insert Table",

package/frontend/js/store.js

@@ -253,6 +253,11 @@ const state = {
     },
     settings: {
         data: { ...DEFAULT_SETTINGS },
+        section: 'information',
+        apiTokens: [],
+        tokenDatabase: null,
+        createdApiToken: null,
+        tokenSaving: false,
         loading: false,
         error: null,
         appVersion: null,
@@ -1310,6 +1315,9 @@ async function refreshSettingsState() {
         };
         state.settings.appVersion = response.metadata?.appVersion ?? null;
         state.settings.sqliteVersion = response.metadata?.sqliteVersion ?? null;
+        state.settings.apiTokens = response.metadata?.apiTokens ?? [];
+        state.settings.tokenDatabase = response.metadata?.activeDatabase ?? null;
+        state.settings.createdApiToken = null;
     } catch (error) {
         state.settings.error = normalizeError(error);
     } finally {
@@ -1318,6 +1326,103 @@ async function refreshSettingsState() {
     }
 }
 
+export async function createSettingsApiToken(name) {
+    state.settings.tokenSaving = true;
+    state.settings.error = null;
+    emitChange();
+
+    try {
+        const response = await api.createApiToken(name);
+        state.settings.apiTokens = response.metadata?.apiTokens ?? state.settings.apiTokens;
+        state.settings.tokenDatabase = response.metadata?.activeDatabase ?? state.settings.tokenDatabase;
+        state.settings.createdApiToken = response.data ?? null;
+        pushToast('API token created. Store it now; it will not be shown again.', 'success');
+        return response.data ?? null;
+    } catch (error) {
+        state.settings.error = normalizeError(error);
+        return null;
+    } finally {
+        state.settings.tokenSaving = false;
+        emitChange();
+    }
+}
+
+export function setSettingsSection(section) {
+    const normalizedSection = section === 'api-tokens' ? 'api-tokens' : 'information';
+
+    if (state.settings.section === normalizedSection) {
+        return;
+    }
+
+    state.settings.section = normalizedSection;
+    emitChange();
+}
+
+export async function deleteSettingsApiToken(tokenId) {
+    state.settings.tokenSaving = true;
+    state.settings.error = null;
+    emitChange();
+
+    try {
+        const response = await api.deleteApiToken(tokenId);
+        state.settings.apiTokens = response.metadata?.apiTokens ?? [];
+        state.settings.tokenDatabase = response.metadata?.activeDatabase ?? state.settings.tokenDatabase;
+
+        if (state.settings.createdApiToken?.id === tokenId) {
+            state.settings.createdApiToken = null;
+        }
+
+        pushToast('API token deleted.', 'success');
+        return true;
+    } catch (error) {
+        if (state.modal?.kind === 'delete-api-token') {
+            withModalError(error);
+        } else {
+            state.settings.error = normalizeError(error);
+        }
+        return false;
+    } finally {
+        state.settings.tokenSaving = false;
+        emitChange();
+    }
+}
+
+export function openDeleteSettingsApiTokenModal(tokenId) {
+    const token = state.settings.apiTokens.find(candidate => candidate.id === tokenId);
+
+    if (!token) {
+        pushToast('The selected API token could not be loaded.', 'alert');
+        return;
+    }
+
+    state.modal = {
+        kind: 'delete-api-token',
+        tokenId: token.id,
+        tokenName: token.name,
+        tokenPrefix: token.tokenPrefix,
+        databaseLabel: state.settings.tokenDatabase?.label ?? 'active database',
+        error: null,
+        submitting: false,
+    };
+    emitChange();
+}
+
+export async function submitDeleteSettingsApiTokenConfirmation() {
+    if (state.modal?.kind !== 'delete-api-token') {
+        return false;
+    }
+
+    const tokenId = state.modal.tokenId;
+    startModalSubmission();
+    const deleted = await deleteSettingsApiToken(tokenId);
+
+    if (deleted) {
+        closeModalInternal();
+    }
+
+    return deleted;
+}
+
 async function loadQueryHistoryDetail(historyId, options = {}) {
     const normalizedId = String(historyId ?? '').trim();
     const numericId = Number(normalizedId);
@@ -3490,6 +3595,16 @@ export async function submitCreateConnection(payload) {
     }
 }
 
+export async function chooseOpenDatabasePath() {
+    try {
+        const response = await api.chooseOpenDatabasePath();
+        return response.data?.path ?? null;
+    } catch (error) {
+        pushToast(normalizeError(error).message || 'Native file dialog could not be opened.', 'alert');
+        return null;
+    }
+}
+
 export async function chooseCreateDatabasePath() {
     try {
         const response = await api.chooseCreateDatabasePath();

package/frontend/js/views/settings.js

@@ -1,6 +1,35 @@
 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 renderSettingsContent(state) {
     if (state.settings.loading && !state.settings.appVersion) {
         return `
@@ -24,11 +53,97 @@ 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 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>
@@ -120,8 +235,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 +264,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>