sqlite-hub 1.2.0 → 1.5.0

package/frontend/js/app.js

@@ -48,6 +48,7 @@ import {
     initializeApp,
     insertMarkdownIntoLastOpenDocument,
     loadMoreQueryHistory,
+    loadMoreLogs,
     openModal,
     openOverviewInFinder,
     openQueryHistoryInEditor,
@@ -56,11 +57,15 @@ import {
     openDeleteQueryHistoryModal,
     openDeleteSettingsApiTokenModal,
     openCreateBackupModal,
-    openEditBackupNotesModal,
+    openEditBackupModal,
+    openBackupDiffDrawer,
+    closeBackupDiffDrawer,
+    openGenerateTypesModal,
     openDeleteBackupModal,
     openRestoreBackupModal,
     openDeleteQueryChartModal,
     openDataExportModal,
+    openGenerateDataModal,
     openDeleteDocumentModal,
     openQueryExportModal,
     openDataRowByIdentity,
@@ -74,6 +79,7 @@ import {
     openDataRowUpdatePreview,
     openEditorRowUpdatePreview,
     refreshCurrentRoute,
+    refreshLogs,
     refreshBackups,
     refreshMediaTaggingPreview,
     removeConnection,
@@ -91,6 +97,9 @@ import {
     selectQueryHistoryItem,
     selectStructureEntry,
     setDocumentsSearchQuery,
+    setLogFilter,
+    setLogSearchInput,
+    applyLogSearch,
     setTableDesignerSearchQuery,
     setTableDesignerSqlPreviewVisibility,
     toggleTableDesignerTablesPanel,
@@ -122,8 +131,10 @@ import {
     submitDeleteSettingsApiTokenConfirmation,
     submitBackupSafetyChoice,
     submitCreateBackupConfirmation,
-    submitEditBackupNotesConfirmation,
+    submitEditBackupConfirmation,
+    submitGenerateDataRows,
     submitRowUpdatePreviewConfirmation,
+    previewGenerateDataRows,
     setQueryHistoryPanelVisibility,
     sortDataTableByColumn,
     sortEditorResultsByColumn,
@@ -132,6 +143,7 @@ import {
     setCopyColumnModalError,
     setCopyColumnModalEditedText,
     setCopyColumnModalSubmitting,
+    setBackupDiffTab,
     setRoute,
     setSettingsSection,
     saveQueryHistoryNotes,
@@ -166,6 +178,9 @@ import {
     updateCurrentTableDesignerColumnField,
     updateCurrentTableDesignerConstraintField,
     updateCurrentTableDesignerField,
+    updateGenerateDataMapping,
+    updateGenerateDataModal,
+    updateGenerateTypesModal,
     addCurrentTableDesignerColumn,
     applyCurrentMediaTaggingSelection,
     removeCurrentTableDesignerColumn,
@@ -177,10 +192,12 @@ import { renderDataRowEditorPanel, renderDataView } from './views/data.js';
 import { renderDocumentsView } from './views/documents.js';
 import { renderEditorView } from './views/editor.js';
 import { renderLandingView } from './views/landing.js';
+import { renderLogsView, renderLogTable } from './views/logs.js';
 import { renderMediaTaggingView } from './views/mediaTagging.js';
 import { renderOverviewView } from './views/overview.js';
 import { renderSettingsView } from './views/settings.js';
 import { renderStructureView } from './views/structure.js';
+import { renderTableAdvisorView } from './views/tableAdvisor.js';
 import { renderTableDesignerView } from './views/tableDesigner.js';
 import { replaceChildrenFromRenderedMarkup, replaceElementFromRenderedMarkup } from './utils/dom.js';
 import {
@@ -195,6 +212,7 @@ import {
     detectFilePathValue,
     getPathTypeLabel,
 } from './utils/filePathPreview.js';
+import { clearInputForEscape } from './utils/inputClear.js';
 import { formatSqlQuery } from './utils/sqlFormatter.js';
 import {
     buildDataRowEditorJsonObject,
@@ -258,6 +276,7 @@ const ROUTE_TITLE_SEGMENTS = {
     backups: 'Backups',
     overview: 'Overview',
     data: 'Data',
+    tableAdvisor: 'Table Advisor',
     structure: 'Structure',
     editor: 'SQL Editor',
     editorResults: 'SQL Editor',
@@ -267,6 +286,7 @@ const ROUTE_TITLE_SEGMENTS = {
     mediaTaggingSetup: 'Media Tagging',
     mediaTaggingQueue: 'Tagging Queue',
     settings: 'Settings',
+    logs: 'Logs',
     notFound: 'Not Found',
 };
 
@@ -968,6 +988,92 @@ function patchChartsDetailUi(state, { preserveCharts = false } = {}) {
     return true;
 }
 
+function getLogsActiveDatabaseId(state) {
+    return String(state.connections?.active?.id ?? state.logs?.metadata?.activeDatabase?.id ?? '');
+}
+
+function syncLogsFilterControls(state) {
+    const filters = state.logs?.filters ?? {};
+
+    for (const button of shellRefs.view.querySelectorAll('[data-action="set-log-filter"][data-field][data-value]')) {
+        if (!(button instanceof HTMLElement)) {
+            continue;
+        }
+
+        const field = button.dataset.field;
+        const value = button.dataset.value;
+        const active = String(filters[field] ?? '') === String(value ?? '');
+
+        button.classList.toggle('is-active', active);
+        button.setAttribute('aria-pressed', active ? 'true' : 'false');
+    }
+}
+
+function syncLogsMetaStrip(state) {
+    const logs = state.logs ?? {};
+    const values = {
+        visible: formatNumber((logs.items ?? []).length),
+        matched: formatNumber(logs.total ?? 0),
+        scope: logs.metadata?.activeDatabase?.label ?? 'Active Database',
+    };
+
+    for (const [key, value] of Object.entries(values)) {
+        const node = shellRefs.view.querySelector(`[data-logs-meta="${key}"]`);
+
+        if (node instanceof HTMLElement) {
+            node.textContent = value;
+            node.title = value;
+        }
+    }
+}
+
+function patchLogsTableUi(state) {
+    const logsView = shellRefs.view.querySelector('[data-logs-view]');
+
+    if (!(logsView instanceof HTMLElement)) {
+        return false;
+    }
+
+    const activeDatabaseId = getLogsActiveDatabaseId(state);
+
+    if (String(logsView.dataset.logsActiveDatabaseId ?? '') !== activeDatabaseId) {
+        return false;
+    }
+
+    const currentTable = logsView.querySelector('[data-logs-table]');
+
+    if (!(currentTable instanceof HTMLElement)) {
+        return false;
+    }
+
+    const currentScrollNode = currentTable.querySelector('[data-logs-table-scroll]');
+    const scrollState =
+        currentScrollNode instanceof HTMLElement
+            ? {
+                  left: currentScrollNode.scrollLeft,
+                  top: currentScrollNode.scrollTop,
+              }
+            : null;
+    const patched = replaceElementFromRenderedMarkup(currentTable, renderLogTable(state.logs ?? {}));
+
+    if (!patched) {
+        return false;
+    }
+
+    if (scrollState) {
+        const nextScrollNode = logsView.querySelector('[data-logs-table-scroll]');
+
+        if (nextScrollNode instanceof HTMLElement) {
+            nextScrollNode.scrollLeft = scrollState.left;
+            nextScrollNode.scrollTop = scrollState.top;
+        }
+    }
+
+    syncLogsFilterControls(state);
+    syncLogsMetaStrip(state);
+    return true;
+}
+
 function readFileAsBase64(file) {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();
@@ -1065,11 +1171,11 @@ function renderNotFoundView() {
           <p class="font-mono text-[10px] uppercase tracking-[0.3em] text-primary-container/40">
             ROUTE_LOST // HASH_NOT_RECOGNIZED
           </p>
-          <h1 class="mt-4 font-headline text-6xl font-black uppercase tracking-tight text-primary-container">
+          <h1 class="mt-4 font-body text-6xl font-black uppercase tracking-tight text-primary-container">
             404_SIGNAL
           </h1>
           <button
-            class="standard-button mt-8 px-6 font-headline text-sm"
+            class="standard-button mt-8 px-6 font-body text-sm"
             data-action="navigate"
             data-to="/"
             type="button"
@@ -1107,12 +1213,16 @@ function resolveView(state) {
             return renderStructureView(state);
         case 'tableDesigner':
             return renderTableDesignerView(state);
+        case 'tableAdvisor':
+            return renderTableAdvisorView(state);
         case 'mediaTaggingSetup':
             return renderMediaTaggingView(state, { subView: 'setup' });
         case 'mediaTaggingQueue':
             return renderMediaTaggingView(state, { subView: 'queue' });
         case 'settings':
             return renderSettingsView(state);
+        case 'logs':
+            return renderLogsView(state);
         default:
             return renderNotFoundView();
     }
@@ -1398,9 +1508,11 @@ function renderApp(state) {
         'editorResults',
         'data',
         'charts',
+        'logs',
         'documents',
         'structure',
         'tableDesigner',
+        'tableAdvisor',
         'mediaTaggingSetup',
         'mediaTaggingQueue',
     ].includes(state.route.name);
@@ -1452,8 +1564,8 @@ function renderApp(state) {
         pendingNewTableDesignerAutofocus = false;
     }
 
-    const canPatchChartsMain =
-        mainChanged && previousRouteName === 'charts' && state.route.name === 'charts';
+    const canPatchChartsMain = mainChanged && previousRouteName === 'charts' && state.route.name === 'charts';
+    const canPatchLogsMain = mainChanged && previousRouteName === 'logs' && state.route.name === 'logs';
     let mainPatched = false;
     let preservedChartsDom = false;
 
@@ -1479,6 +1591,10 @@ function renderApp(state) {
         }
     }
 
+    if (!mainPatched && canPatchLogsMain) {
+        mainPatched = patchLogsTableUi(state);
+    }
+
     if (mainChanged) {
         if (!mainPatched) {
             teardownStructureGraph();
@@ -2003,6 +2119,68 @@ function downloadTextFile({ text, filename, mimeType }) {
     URL.revokeObjectURL(url);
 }
 
+async function copyGeneratedTypes() {
+    const modal = getState().modal;
+    const code = modal?.kind === 'generate-types' ? String(modal.result?.code ?? '') : '';
+
+    if (!code) {
+        showToast('No generated code to copy.', 'alert');
+        return;
+    }
+
+    if (!navigator.clipboard?.writeText) {
+        showToast('Clipboard API is not available.', 'alert');
+        return;
+    }
+
+    try {
+        await navigator.clipboard.writeText(code);
+        showToast(
+            modal.result?.files?.length ? 'Type definitions copied to clipboard.' : 'Type definition copied to clipboard.',
+            'success',
+        );
+    } catch (error) {
+        showToast(
+            modal.result?.files?.length
+                ? 'Type definitions could not be copied.'
+                : 'Type definition could not be copied.',
+            'alert',
+        );
+    }
+}
+
+function downloadGeneratedTypes() {
+    const modal = getState().modal;
+    const result = modal?.kind === 'generate-types' ? modal.result : null;
+    const files = result?.files ?? [];
+
+    if (files.length) {
+        files.forEach((file, index) => {
+            window.setTimeout(() => {
+                downloadTextFile({
+                    text: file.code,
+                    filename: file.fileName || `${file.tableName || 'types'}.txt`,
+                    mimeType: 'text/plain;charset=utf-8',
+                });
+            }, index * 120);
+        });
+        showToast(`${files.length} type definition downloads started.`, 'success');
+        return;
+    }
+
+    if (!result?.code) {
+        showToast('No generated code to download.', 'alert');
+        return;
+    }
+
+    downloadTextFile({
+        text: result.code,
+        filename: result.fileName || 'types.txt',
+        mimeType: 'text/plain;charset=utf-8',
+    });
+    showToast('Type definition download started.', 'success');
+}
+
 function getSelectedDataBrowserRowForJson(state) {
     if (state.dataBrowser.selectedRow) {
         return state.dataBrowser.selectedRow;
@@ -2361,6 +2539,15 @@ async function handleAction(actionNode) {
         case 'refresh-view':
             await refreshCurrentRoute();
             return;
+        case 'refresh-logs':
+            await refreshLogs();
+            return;
+        case 'set-log-filter':
+            await setLogFilter(actionNode.dataset.field, actionNode.dataset.value);
+            return;
+        case 'load-more-logs':
+            await loadMoreLogs();
+            return;
         case 'set-settings-section':
             setSettingsSection(actionNode.dataset.section);
             return;
@@ -2582,11 +2769,29 @@ async function handleAction(actionNode) {
         case 'open-table-in-sql-editor':
             await openTableInSqlEditor(actionNode.dataset.tableName);
             return;
+        case 'open-generate-types-modal':
+            await openGenerateTypesModal(actionNode.dataset.tableName, actionNode.dataset.typeTarget, actionNode.dataset.typeScope);
+            return;
+        case 'copy-generated-types':
+            await copyGeneratedTypes();
+            return;
+        case 'download-generated-types':
+            downloadGeneratedTypes();
+            return;
         case 'open-restore-backup-modal':
             openRestoreBackupModal(actionNode.dataset.backupId);
             return;
-        case 'open-edit-backup-notes-modal':
-            openEditBackupNotesModal(actionNode.dataset.backupId);
+        case 'open-compare-backup-drawer':
+            await openBackupDiffDrawer(actionNode.dataset.backupId);
+            return;
+        case 'set-backup-diff-tab':
+            setBackupDiffTab(actionNode.dataset.tab);
+            return;
+        case 'close-backup-diff-drawer':
+            closeBackupDiffDrawer();
+            return;
+        case 'open-edit-backup-modal':
+            openEditBackupModal(actionNode.dataset.backupId);
             return;
         case 'open-delete-backup-modal':
             openDeleteBackupModal(actionNode.dataset.backupId);
@@ -2793,6 +2998,12 @@ async function handleAction(actionNode) {
         case 'open-data-export-modal':
             openDataExportModal();
             return;
+        case 'open-generate-data-modal':
+            openGenerateDataModal();
+            return;
+        case 'preview-generate-data':
+            await previewGenerateDataRows();
+            return;
         case 'export-data-format': {
             const format = actionNode.dataset.exportFormat;
             const filename = getExportFilenameFromAction(actionNode);
@@ -2863,6 +3074,30 @@ async function handleAction(actionNode) {
             }
             return;
         }
+        case 'copy-table-advisor-sql': {
+            const issueId = actionNode.dataset.issueId;
+            const advisor = getState().tableAdvisor;
+            const issue = (advisor.result?.issues ?? []).find(item => item.id === issueId);
+            const sql = String(issue?.sql ?? '');
+
+            if (!sql.trim()) {
+                showToast('No advisor SQL to copy.', 'alert');
+                return;
+            }
+
+            if (!navigator.clipboard?.writeText) {
+                showToast('Clipboard API is not available.', 'alert');
+                return;
+            }
+
+            try {
+                await navigator.clipboard.writeText(sql);
+                showToast('Advisor SQL copied.', 'success');
+            } catch (error) {
+                showToast('Advisor SQL could not be copied.', 'alert');
+            }
+            return;
+        }
         case 'toggle-table-designer-sql-preview':
             setTableDesignerSqlPreviewVisibility(
                 actionNode.dataset.nextValue ? actionNode.dataset.nextValue === 'true' : undefined,
@@ -3151,6 +3386,11 @@ document.addEventListener('keydown', event => {
         return;
     }
 
+    if (target instanceof HTMLInputElement && clearInputForEscape(target)) {
+        event.preventDefault();
+        return;
+    }
+
     if (state.modal) {
         event.preventDefault();
         closeModal();
@@ -3181,6 +3421,12 @@ document.addEventListener('keydown', event => {
         return;
     }
 
+    if (state.route.name === 'backups' && state.backups.diff?.visible) {
+        event.preventDefault();
+        closeBackupDiffDrawer();
+        return;
+    }
+
     if (state.editor.historySelectedId !== null || state.editor.historyDetail) {
         event.preventDefault();
         clearQueryHistorySelection();
@@ -3227,6 +3473,29 @@ document.addEventListener('input', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'type-generation-field') {
+        if (bindNode instanceof HTMLInputElement && bindNode.type === 'checkbox') {
+            return;
+        }
+
+        void updateGenerateTypesModal(bindNode.dataset.typeGenerationField, bindNode.value);
+        return;
+    }
+
+    if (bindNode.dataset.bind === 'generate-data-field') {
+        updateGenerateDataModal(bindNode.dataset.field, bindNode.value, { notify: false });
+        return;
+    }
+
+    if (bindNode.dataset.bind === 'generate-data-mapping') {
+        if (bindNode instanceof HTMLSelectElement) {
+            return;
+        }
+
+        updateGenerateDataMapping(bindNode.dataset.columnName, bindNode.dataset.field, bindNode.value, { notify: false });
+        return;
+    }
+
     if (bindNode.dataset.bind === 'copy-column-format-field') {
         updateCopyColumnModalFormatField(
             bindNode.dataset.field,
@@ -3254,6 +3523,11 @@ document.addEventListener('input', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'logs-search') {
+        setLogSearchInput(bindNode.value);
+        return;
+    }
+
     if (bindNode.dataset.bind === 'data-search-query') {
         void setDataSearchQuery(bindNode.value);
         return;
@@ -3398,6 +3672,23 @@ document.addEventListener('change', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'type-generation-field') {
+        const nextValue =
+            bindNode instanceof HTMLInputElement && bindNode.type === 'checkbox' ? bindNode.checked : bindNode.value;
+        void updateGenerateTypesModal(bindNode.dataset.typeGenerationField, nextValue);
+        return;
+    }
+
+    if (bindNode.dataset.bind === 'generate-data-field') {
+        updateGenerateDataModal(bindNode.dataset.field, bindNode.value);
+        return;
+    }
+
+    if (bindNode.dataset.bind === 'generate-data-mapping') {
+        updateGenerateDataMapping(bindNode.dataset.columnName, bindNode.dataset.field, bindNode.value);
+        return;
+    }
+
     if (bindNode.dataset.bind === 'data-search-column') {
         void setDataSearchColumn(bindNode.value);
         return;
@@ -3542,6 +3833,9 @@ document.addEventListener('submit', async event => {
     const formData = submitter ? new FormData(form, submitter) : new FormData(form);
 
     switch (form.dataset.form) {
+        case 'logs-search':
+            await applyLogSearch(String(formData.get('search') ?? ''));
+            return;
         case 'create-api-token':
             await createSettingsApiToken(String(formData.get('name') ?? ''));
             return;
@@ -3623,8 +3917,11 @@ document.addEventListener('submit', async event => {
                 type: String(formData.get('type') ?? 'manual'),
             });
             return;
-        case 'edit-backup-notes':
-            await submitEditBackupNotesConfirmation(String(formData.get('notes') ?? ''));
+        case 'edit-backup':
+            await submitEditBackupConfirmation({
+                name: String(formData.get('name') ?? ''),
+                notes: String(formData.get('notes') ?? ''),
+            });
             return;
         case 'delete-backup-confirm':
             await submitDeleteBackupConfirmation();
@@ -3670,6 +3967,9 @@ document.addEventListener('submit', async event => {
         case 'apply-row-update-preview':
             await submitRowUpdatePreviewConfirmation();
             return;
+        case 'generate-data':
+            await submitGenerateDataRows();
+            return;
         case 'create-media-tagging-tag-table':
             await submitCreateMediaTaggingTagTable();
             return;

package/frontend/js/components/connectionCard.js

@@ -36,7 +36,7 @@ export function renderConnectionCard(connection, activeConnectionId) {
     renderStatusBadge(isActive ? "ACTIVE" : "RECENT", isActive ? "primary" : "muted"),
     connection.readOnly ? renderStatusBadge("READ_ONLY", "alert") : "",
     "</div></div>",
-    '<h3 class="mb-1 font-headline text-xl font-bold uppercase ',
+    '<h3 class="mb-1 font-body text-xl font-bold uppercase ',
     isActive ? "text-[#FCE300]" : "text-on-surface",
     '">',
     escapeHtml(connection.label),
@@ -56,7 +56,9 @@ export function renderConnectionCard(connection, activeConnectionId) {
     '<div><div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Last Opened</div><div class="text-xs font-bold text-on-surface">',
     escapeHtml(formatDateTime(connection.lastOpenedAt)),
     "</div></div>",
-    '<div><div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Mode</div><div class="text-xs font-bold text-on-surface">',
+    '<div><div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Mode</div><div class="text-xs font-bold ',
+    connection.readOnly ? "text-primary-container" : "text-on-surface",
+    '">',
     connection.readOnly ? "Read only" : "Read / Write",
     "</div></div></div></div>",
     '<div class="border-t border-outline-variant/10 bg-surface-container-low px-4 py-3">',

package/frontend/js/components/emptyState.js

@@ -61,7 +61,7 @@ function renderActiveConnection(activeConnection) {
             <p class="text-[10px] font-mono uppercase tracking-[0.24em] text-primary-container/70">
               ACTIVE_DATABASE
             </p>
-            <h2 class="mt-2 font-headline text-2xl font-black uppercase tracking-tight text-primary-container">
+            <h2 class="mt-2 font-body text-2xl font-black uppercase tracking-tight text-primary-container">
               ${escapeHtml(activeConnection.label)}
             </h2>
             <p class="mt-2 font-mono text-[10px] text-on-surface-variant/55">${escapeHtml(
@@ -93,7 +93,7 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
             SYSTEM_READY // ${hasActive ? 'ACTIVE_CONTEXT' : 'IDLE_STATE'}
           </span>
         </div>
-        <h1 class="mb-4 font-headline text-7xl font-black tracking-tighter text-primary-container opacity-90 md:text-9xl">
+        <h1 class="mb-4 font-body text-7xl font-black tracking-tighter text-primary-container opacity-90 md:text-9xl">
           SQLite Hub
         </h1>
         <p class="font-mono text-primary-container/40">The only fucking SQLite Manager you'll ever need.</p>
@@ -104,7 +104,7 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
         </div>
         <div class="mx-auto grid w-full max-w-3xl grid-cols-1 gap-4 px-6 md:grid-cols-2">
           <button
-            class="landing-primary-action clipped-btn group flex items-center justify-between bg-primary-container px-8 py-6 font-headline text-lg font-bold transition-all duration-300 hover:shadow-[0_0_20px_rgba(252,227,0,0.3)]"
+            class="landing-primary-action clipped-btn group flex items-center justify-between bg-primary-container px-8 py-6 font-body text-lg font-bold transition-all duration-300 hover:shadow-[0_0_20px_rgba(252,227,0,0.3)]"
             data-action="open-modal"
             data-modal="open-connection"
             style="--clip-path: polygon(0 0, 90% 0, 100% 25%, 100% 100%, 0 100%);"
@@ -114,7 +114,7 @@ export function renderEmptyState({ activeConnection, recentConnections = [] }) {
             <span class="material-symbols-outlined transition-transform group-hover:translate-x-1">add_circle</span>
           </button>
           <button
-            class="flex items-center justify-between border-l-2 border-primary-container bg-surface-container-highest px-8 py-6 font-headline text-lg font-bold text-primary-container transition-colors duration-150 hover:bg-surface-bright"
+            class="flex items-center justify-between border-l-2 border-primary-container bg-surface-container-highest px-8 py-6 font-body text-lg font-bold text-primary-container transition-colors duration-150 hover:bg-surface-bright"
             data-action="open-modal"
             data-modal="create-connection"
             type="button"

package/frontend/js/components/generateTypesDropdown.js

@@ -0,0 +1,33 @@
+import { renderDropdownButton } from './dropdownButton.js';
+
+export function renderGenerateTypesDropdown({ selectedTableName = '', hasTables = false } = {}) {
+    const hasSelectedTable = Boolean(String(selectedTableName ?? '').trim());
+
+    return renderDropdownButton({
+        align: 'left',
+        icon: 'code',
+        label: 'Generate Types',
+        title: 'Generate types',
+        items: [
+            {
+                action: 'open-generate-types-modal',
+                disabled: !hasSelectedTable,
+                icon: 'select_check_box',
+                label: 'Selected table',
+                dataAttributes: {
+                    tableName: selectedTableName,
+                    typeScope: 'selected',
+                },
+            },
+            {
+                action: 'open-generate-types-modal',
+                disabled: !hasTables,
+                icon: 'library_books',
+                label: 'All tables',
+                dataAttributes: {
+                    typeScope: 'all',
+                },
+            },
+        ],
+    });
+}

package/frontend/js/components/metricCard.js

@@ -10,7 +10,7 @@ export function renderMetricCard({
   return `
     <div class="metric-card ${accent ? "metric-card--accent" : ""}">
       <span class="text-[10px] font-mono text-on-surface/40 uppercase">${escapeHtml(label)}</span>
-      <span class="text-3xl font-headline font-bold text-on-surface">${escapeHtml(value)}</span>
+      <span class="text-3xl font-body font-bold text-on-surface">${escapeHtml(value)}</span>
       ${
         progress
           ? `