sqlite-hub 0.17.0 → 1.0.0

package/frontend/js/components/rowEditorPanel.js

@@ -12,37 +12,14 @@ import {
   formatTextCellCharacterCount,
   getTextCellCharacterCount,
 } from "../utils/textCellStats.js";
+import { formatJsonPreview } from "../utils/jsonPreview.js";
+import {
+  getRowEditorValueState,
+  getRowEditorValueStateLabel,
+} from "../utils/rowEditorValues.js";
 
 const URL_PATTERN = /^https?:\/\/[^\s<>"']+$/i;
 
-function getJsonPreview(value) {
-  if (value === null || value === undefined) {
-    return null;
-  }
-
-  if (typeof value === "object") {
-    return JSON.stringify(value, null, 2);
-  }
-
-  const text = String(value).trim();
-
-  if (!text || !["{", "["].includes(text[0])) {
-    return null;
-  }
-
-  try {
-    const parsed = JSON.parse(text);
-
-    if (!parsed || typeof parsed !== "object") {
-      return null;
-    }
-
-    return JSON.stringify(parsed, null, 2);
-  } catch (error) {
-    return null;
-  }
-}
-
 function getUrlValue(value) {
   const text = String(value ?? "").trim();
 
@@ -119,7 +96,7 @@ function renderOpenUrlButton(url) {
   }
 
   return `
-    <div class="mt-2">
+    <div class="mt-2" data-row-editor-url-action>
       <button
         class="standard-button"
         data-action="open-row-editor-url"
@@ -141,7 +118,7 @@ function renderAllowedValuesSelect(field, allowedValues) {
     currentValue !== "" && !hasCurrentAllowedValue;
   const options = [
     shouldRenderEmptyOption
-      ? `<option value="" ${currentValue === "" ? "selected" : ""}>NULL / empty</option>`
+      ? `<option value="" ${currentValue === "" ? "selected" : ""}>Empty string</option>`
       : "",
     shouldRenderCurrentOption
       ? `<option value="${escapeHtml(currentValue)}" selected>${escapeHtml(currentValue)}</option>`
@@ -160,6 +137,7 @@ function renderAllowedValuesSelect(field, allowedValues) {
       data-row-editor-initial-value="${escapeHtml(currentValue)}"
       data-row-editor-text-source
       data-row-editor-timestamp-source
+      data-row-editor-value-source
       name="field:${escapeHtml(field.name)}"
     >
       ${options}
@@ -284,7 +262,7 @@ function renderJsonViewer(prettyJson, title = "JSON Viewer") {
       <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/75">
         ${escapeHtml(title)}
       </div>
-      <pre class="custom-scrollbar mt-3 max-h-[18rem] overflow-auto whitespace-pre-wrap break-words border border-outline-variant/10 bg-surface-container-lowest px-4 py-4 font-mono text-xs leading-6 text-on-surface">${escapeHtml(
+      <pre class="row-editor-json-preview custom-scrollbar mt-3 max-h-[18rem] overflow-auto border border-outline-variant/10 bg-surface-container-lowest px-4 py-4 font-mono text-xs leading-6 text-on-surface">${escapeHtml(
         prettyJson
       )}</pre>
     </div>
@@ -301,7 +279,8 @@ function renderReadonlyField(field = {}, tableMeta = {}) {
   const url = getUrlValue(value);
   const badges = withFilePathBadge(withUrlBadge(Array.isArray(label?.badges) ? label.badges : [], url), filePathPreview);
   const displayLabel = typeof label === "object" ? label.label : label;
-  const jsonPreview = getJsonPreview(value);
+  const jsonPreview = formatJsonPreview(value);
+  const valueState = getRowEditorValueState(rawValue);
 
   return `
     <div
@@ -315,6 +294,7 @@ function renderReadonlyField(field = {}, tableMeta = {}) {
       <div class="flex flex-wrap items-center gap-2 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
         <span>${escapeHtml(displayLabel)}</span>
         ${renderFieldBadgesWithCharacterCount(badges, rawValue)}
+        ${renderValueStateBadge(valueState)}
       </div>
       ${
         jsonPreview
@@ -328,6 +308,28 @@ function renderReadonlyField(field = {}, tableMeta = {}) {
   `;
 }
 
+function getValueStateBadgeClassName(state) {
+  if (state === "null") {
+    return "border-primary-container/35 bg-primary-container/15 text-primary-container";
+  }
+
+  if (state === "empty") {
+    return "border-outline-variant/35 bg-surface-container-high text-on-surface-variant";
+  }
+
+  return "border-outline-variant/20 bg-surface-container text-on-surface-variant";
+}
+
+function renderValueStateBadge(state) {
+  return `
+    <span
+      class="border px-2 py-1 text-[9px] ${getValueStateBadgeClassName(state)}"
+      data-row-editor-value-state
+      data-value-state="${escapeHtml(state)}"
+    >${escapeHtml(getRowEditorValueStateLabel(state))}</span>
+  `;
+}
+
 function renderEditableField(field, tableMeta = {}) {
   const columnName = getFieldColumnName(field);
   const protectedKeyColumn = isProtectedKeyColumn(columnName, tableMeta);
@@ -336,25 +338,28 @@ function renderEditableField(field, tableMeta = {}) {
   const filePathPreview = getFieldFilePathPreview(field, tableMeta);
   const baseBadges = withCheckBadge(Array.isArray(field.badges) ? field.badges : [], allowedValues);
   const badges = withFilePathBadge(withUrlBadge(baseBadges, url), filePathPreview);
-  const jsonPreview = getJsonPreview(field.value);
+  const jsonPreview = formatJsonPreview(field.value);
   const inputType = field.inputType === "number" ? "number" : "text";
   const numberStep = field.numberStep === "1" ? "1" : "any";
+  const valueState = getRowEditorValueState(getFieldRawValue(field));
 
   return `
     <div
       class="block space-y-2"
       data-row-editor-column-name="${escapeHtml(columnName)}"
       data-row-editor-field
+      data-row-editor-initial-state="${escapeHtml(valueState)}"
       data-row-editor-protected-key="${protectedKeyColumn ? "true" : "false"}"
       ${url ? "data-row-editor-url-field" : ""}
     >
       <span class="flex flex-wrap items-center gap-2 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
         <span>${escapeHtml(field.label ?? field.name)}</span>
         ${renderFieldBadgesWithCharacterCount(badges, inputType === "number" ? null : field.value ?? "")}
+        ${renderValueStateBadge(valueState)}
       </span>
       ${
         jsonPreview
-          ? renderJsonViewer(jsonPreview, "JSON Preview")
+          ? `<div data-row-editor-json-preview-container>${renderJsonViewer(jsonPreview, "JSON Preview")}</div>`
           : ""
       }
       ${
@@ -366,6 +371,7 @@ function renderEditableField(field, tableMeta = {}) {
                 class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
                 data-row-editor-initial-value="${escapeHtml(field.value ?? "")}"
                 data-row-editor-timestamp-source
+                data-row-editor-value-source
                 name="field:${escapeHtml(field.name)}"
                 step="${escapeHtml(numberStep)}"
                 type="number"
@@ -379,6 +385,7 @@ function renderEditableField(field, tableMeta = {}) {
                 data-row-editor-initial-value="${escapeHtml(field.value ?? "")}"
                 data-row-editor-text-source
                 data-row-editor-timestamp-source
+                data-row-editor-value-source
                 name="field:${escapeHtml(field.name)}"
                 data-row-editor-url-input
                 spellcheck="false"
@@ -395,6 +402,7 @@ function renderEditableField(field, tableMeta = {}) {
                 data-row-editor-initial-value="${escapeHtml(field.value ?? "")}"
                 data-row-editor-text-source
                 data-row-editor-timestamp-source
+                data-row-editor-value-source
                 name="field:${escapeHtml(field.name)}"
                 spellcheck="false"
               >${escapeHtml(field.value ?? "")}</textarea>

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,26 @@ 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();
+        return response.data?.path ?? null;
+    } catch (error) {
+        pushToast(normalizeError(error).message || 'Native file dialog could not be opened.', 'alert');
+        return null;
+    }
+}
+
 export async function submitImportSql(payload) {
     startModalSubmission();
 
@@ -5303,11 +5428,13 @@ export function getQueryMessages(snapshot = state) {
 
     return [
         ...snapshot.editor.result.statements.map(statement => ({
-            tone: statement.kind === 'resultSet' ? 'success' : inferStatusTone(statement.keyword),
+            tone: statement.kind === 'resultSet' && statement.truncated ? 'warning' : statement.kind === 'resultSet' ? 'success' : inferStatusTone(statement.keyword),
             label: `${statement.keyword} #${statement.index + 1}`,
             value:
                 statement.kind === 'resultSet'
-                    ? `${statement.rowCount} row(s) returned.`
+                    ? statement.truncated
+                        ? `Showing the first ${statement.rowCount} row(s); the result was limited to ${statement.rowLimit}.`
+                        : `${statement.rowCount} row(s) returned.`
                     : `${statement.changes} row(s) affected.`,
         })),
         ...queryMessages,

package/frontend/js/utils/jsonPreview.js

@@ -0,0 +1,31 @@
+export function formatJsonPreview(value) {
+  if (value === null || value === undefined) {
+    return null;
+  }
+
+  let parsed = value;
+
+  if (typeof value !== "object") {
+    const text = String(value).trim();
+
+    if (!text || !["{", "["].includes(text[0])) {
+      return null;
+    }
+
+    try {
+      parsed = JSON.parse(text);
+    } catch (error) {
+      return null;
+    }
+  }
+
+  if (!parsed || typeof parsed !== "object") {
+    return null;
+  }
+
+  try {
+    return JSON.stringify(parsed, null, 2);
+  } catch (error) {
+    return null;
+  }
+}

package/frontend/js/utils/rowEditorValues.js

@@ -0,0 +1,41 @@
+export function getRowEditorValueState(value) {
+  if (value === null || value === undefined) {
+    return "null";
+  }
+
+  return String(value) === "" ? "empty" : "value";
+}
+
+export function getRowEditorValueStateLabel(state) {
+  if (state === "null") {
+    return "NULL";
+  }
+
+  if (state === "empty") {
+    return "EMPTY STRING";
+  }
+
+  return "VALUE";
+}
+
+export function buildRowEditorSubmittedValues(formData, fieldMetadata = {}) {
+  const fieldNames = new Set();
+
+  for (const [key] of formData.entries()) {
+    if (key.startsWith("field:")) {
+      fieldNames.add(key.slice("field:".length));
+    }
+  }
+
+  return Object.fromEntries(
+    [...fieldNames].map((fieldName) => {
+      const valueKey = `field:${fieldName}`;
+      const value = String(formData.get(valueKey) ?? "");
+      const metadata = fieldMetadata[fieldName] ?? {};
+      const keepInitialNull =
+        metadata.initialState === "null" && metadata.dirty !== true && value === "";
+
+      return [fieldName, keepInitialNull ? null : value];
+    })
+  );
+}

package/frontend/js/utils/tableScrollState.js

@@ -0,0 +1,39 @@
+export function captureTableHorizontalScrollState({ routeName = "", scrollNodes = [] } = {}) {
+  return {
+    routeName: String(routeName ?? ""),
+    positions: Array.from(scrollNodes)
+      .map((scrollNode) => ({
+        key: String(scrollNode?.dataset?.tableScrollKey ?? ""),
+        scrollLeft: Number(scrollNode?.scrollLeft) || 0,
+      }))
+      .filter((position) => position.key),
+  };
+}
+
+export function restoreTableHorizontalScrollState({
+  snapshot,
+  routeName = "",
+  scrollNodes = [],
+} = {}) {
+  if (!snapshot || snapshot.routeName !== String(routeName ?? "")) {
+    return false;
+  }
+
+  const candidates = Array.from(scrollNodes);
+  let restored = false;
+
+  for (const position of snapshot.positions ?? []) {
+    const scrollNode = candidates.find(
+      (candidate) => String(candidate?.dataset?.tableScrollKey ?? "") === position.key
+    );
+
+    if (!scrollNode) {
+      continue;
+    }
+
+    scrollNode.scrollLeft = position.scrollLeft;
+    restored = true;
+  }
+
+  return restored;
+}

package/frontend/js/views/charts.js

@@ -220,6 +220,14 @@ function renderQueryResultState(state, result) {
     `;
     }
 
+    if (result.truncated) {
+        return `
+      <div class="border-b border-primary-container/20 bg-primary-container/10 px-4 py-3 text-sm text-on-surface">
+        Charts use the first ${escapeHtml(String(result.rowLimit ?? result.rows?.length ?? 0))} rows. Refine the query for a complete visualization.
+      </div>
+    `;
+    }
+
     return '';
 }
 

package/frontend/js/views/data.js

@@ -461,7 +461,9 @@ function renderTableSurface(state) {
     return [
         '<div class="flex flex-1 min-h-0 flex-col bg-surface-container-lowest">',
         renderTableFilterBar(table, state, activeColumn),
-        '<div class="custom-scrollbar flex-1 overflow-auto">',
+        '<div class="custom-scrollbar flex-1 overflow-auto" data-table-horizontal-scroll data-table-scroll-key="data:',
+        escapeHtml(table.name),
+        '">',
         gridMarkup,
         emptyMarkup,
         '</div>',
@@ -603,6 +605,7 @@ export function renderDataRowEditorPanel(state) {
                 ...getColumnNumberInputMeta(column),
                 allowedValues: column.allowedValues ?? [],
                 notNull: Boolean(column.notNull),
+                rawValue: value,
                 value: value === null || value === undefined ? '' : String(value),
             };
         }),

package/frontend/js/views/editor.js

@@ -234,6 +234,7 @@ function renderEditorRowPanel(state) {
                 badges: getEditorColumnBadges(column),
                 allowedValues: column.allowedValues ?? [],
                 notNull: Boolean(column.notNull),
+                rawValue: value,
                 value: value === null || value === undefined ? '' : String(value),
             };
         }),
@@ -280,6 +281,7 @@ function renderResultsSurface(state, isResultsRoute) {
                   sortDirection: state.editor.resultSortDirection,
                   resultScope: 'editor',
                   sortAction: 'sort-editor-results-column',
+                  scrollKey: `editor:${state.editor.result?.historyId ?? 'current'}`,
               })
             : renderMissingDatabase();
     }

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>