sqlite-hub 1.4.0 → 1.5.0

package/frontend/js/views/settings.js

@@ -1,6 +1,6 @@
 import { renderPageHeader } from '../components/pageHeader.js';
 import { renderTextInput } from '../components/formControls.js';
-import { escapeHtml } from '../utils/format.js';
+import { escapeHtml, formatCompactDateTime, formatNumber } from '../utils/format.js';
 
 function renderSettingsNavigation(activeSection) {
     const items = [
@@ -90,6 +90,81 @@ function renderVersionCheckStatus(settings) {
     `;
 }
 
+function renderApiTokenRow(token, tokenSaving) {
+    const callCount = Number(token.callCount ?? 0);
+    const createdAt = token.createdAt ? formatCompactDateTime(token.createdAt) : 'Unknown';
+    const lastCallAt = token.lastCallAt ? formatCompactDateTime(token.lastCallAt) : 'Never';
+
+    return `
+      <div class="grid grid-cols-1 gap-4 border-t border-outline-variant/10 bg-surface-container-high px-4 py-4 xl:grid-cols-[minmax(0,1.35fr)_minmax(8rem,0.75fr)_7rem_minmax(8rem,0.85fr)_8rem] xl:items-center">
+        <div class="min-w-0">
+          <div class="truncate text-sm font-semibold text-on-surface" title="${escapeHtml(token.name)}">
+            ${escapeHtml(token.name)}
+          </div>
+          <div
+            class="mt-2 inline-flex max-w-full border border-outline-variant/10 bg-surface-container-lowest px-3 py-1 font-mono text-[11px] text-primary-container"
+            title="${escapeHtml(token.tokenPrefix ?? '')}"
+          >
+            <span class="truncate">${escapeHtml(token.tokenPrefix)}...</span>
+          </div>
+        </div>
+        <div>
+          <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/45 xl:hidden">Created</div>
+          <div class="mt-1 font-mono text-[11px] text-on-surface-variant/75 xl:mt-0" title="${escapeHtml(token.createdAt ?? 'unknown')}">
+            ${escapeHtml(createdAt)}
+          </div>
+        </div>
+        <div>
+          <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/45 xl:hidden">Calls</div>
+          <div class="mt-1 font-mono text-lg font-bold text-on-surface xl:mt-0">
+            ${escapeHtml(formatNumber(callCount))}
+          </div>
+        </div>
+        <div>
+          <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/45 xl:hidden">Last Call</div>
+          <div class="mt-1 font-mono text-[11px] text-on-surface-variant/75 xl:mt-0" title="${escapeHtml(token.lastCallAt ?? 'never')}">
+            ${escapeHtml(lastCallAt)}
+          </div>
+        </div>
+        <div class="flex xl:justify-end">
+          <button
+            class="delete-button"
+            data-action="open-delete-api-token-modal"
+            data-token-id="${escapeHtml(token.id)}"
+            type="button"
+            ${tokenSaving ? 'disabled' : ''}
+          >
+            <span class="material-symbols-outlined text-sm">delete</span>
+            Delete
+          </button>
+        </div>
+      </div>
+    `;
+}
+
+function renderApiTokenRows(apiTokens, tokenSaving) {
+    if (!apiTokens.length) {
+        return `
+          <div class="border border-outline-variant/10 bg-surface-container-high px-4 py-5 text-sm text-on-surface-variant">
+            No API tokens exist for this database.
+          </div>
+        `;
+    }
+
+    return `
+      <div class="overflow-hidden border border-outline-variant/10">
+        <div class="hidden bg-surface-container-highest px-4 py-3 font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/55 xl:grid xl:grid-cols-[minmax(0,1.35fr)_minmax(8rem,0.75fr)_7rem_minmax(8rem,0.85fr)_8rem]">
+          <div>Token</div>
+          <div>Created</div>
+          <div>Calls</div>
+          <div>Last Call</div>
+          <div class="text-right">Actions</div>
+        </div>
+        ${apiTokens.map(token => renderApiTokenRow(token, tokenSaving)).join('')}
+      </div>
+    `;
+}
+
 function renderSettingsContent(state) {
     if (state.settings.loading && !state.settings.appVersion) {
         return `
@@ -121,32 +196,7 @@ function renderSettingsContent(state) {
     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' : ''}
-                  >
-                    <span class="material-symbols-outlined text-sm">delete</span>
-                    Delete
-                  </button>
-                </div>
-              `,
-              )
-              .join('')
-        : '<div class="text-sm text-on-surface-variant">No API tokens exist for this database.</div>';
+    const tokenItems = renderApiTokenRows(apiTokens, tokenSaving);
     const tokenSection = tokenDatabase
         ? `
           <div class="space-y-5">

package/frontend/js/views/structure.js

@@ -248,6 +248,12 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading, tabl
                       label: 'Table Designer',
                       target: tableName => `/table-designer/${encodeURIComponent(tableName)}`,
                   },
+                  {
+                      icon: 'troubleshoot',
+                      key: 'table-advisor',
+                      label: 'Table Advisor',
+                      target: tableName => `/table-advisor/${encodeURIComponent(tableName)}`,
+                  },
                   {
                       key: 'sql-editor',
                   },

package/frontend/js/views/tableAdvisor.js

@@ -0,0 +1,385 @@
+import {
+    escapeHtml,
+    formatDateTime,
+    formatNumber,
+    highlightSql,
+    truncateMiddle,
+} from '../utils/format.js';
+import { renderWorkspaceOpenDropdown } from '../components/workspaceOpenDropdown.js';
+
+const CATEGORY_LABELS = {
+    schema: 'Schema',
+    constraints: 'Constraints',
+    performance: 'Performance',
+    'data-quality': 'Data Quality',
+    documentation: 'Documentation',
+};
+
+const CATEGORY_ORDER = ['schema', 'constraints', 'performance', 'data-quality', 'documentation'];
+
+function getScoreClass(score) {
+    if (score >= 80) {
+        return 'text-primary-container';
+    }
+
+    if (score >= 60) {
+        return 'text-on-surface';
+    }
+
+    return 'text-error';
+}
+
+function renderError(error) {
+    if (!error) {
+        return '';
+    }
+
+    return `
+      <div class="border border-error/20 bg-error-container/10 px-6 py-5 text-sm text-on-surface">
+        <div class="font-body text-xs font-bold uppercase tracking-[0.18em] text-error">
+          ${escapeHtml(error.code ?? 'REQUEST_FAILED')}
+        </div>
+        <div class="mt-2">${escapeHtml(error.message ?? 'Request failed.')}</div>
+      </div>
+    `;
+}
+
+function renderSeverityBadge(severity = 'info') {
+    const normalized = String(severity ?? 'info').toLowerCase();
+    const className =
+        normalized === 'critical'
+            ? 'border-error/35 bg-error-container/25 text-error'
+            : normalized === 'warning'
+              ? 'border-primary-container/35 bg-primary-container/15 text-primary-container'
+              : 'border-outline-variant/20 bg-surface-container-lowest text-on-surface-variant';
+
+    return `<span class="inline-flex h-6 items-center border px-2 font-mono text-[10px] font-bold uppercase tracking-[0.16em] ${className}">${escapeHtml(
+        normalized,
+    )}</span>`;
+}
+
+function renderRiskBadge(risk = 'low') {
+    const normalized = String(risk ?? 'low').toLowerCase();
+    const className =
+        normalized === 'high'
+            ? 'border-error/35 text-error'
+            : normalized === 'medium'
+              ? 'border-primary-container/35 text-primary-container'
+              : 'border-outline-variant/20 text-on-surface-variant/70';
+
+    return `<span class="inline-flex h-6 items-center border bg-surface-container-lowest px-2 font-mono text-[10px] font-bold uppercase tracking-[0.16em] ${className}">Risk ${escapeHtml(
+        normalized,
+    )}</span>`;
+}
+
+function renderTableList(state) {
+    const { tables = [], selectedTableName } = state.tableAdvisor;
+
+    if (state.tableAdvisor.loading && !tables.length) {
+        return `
+          <div class="px-4 py-6 text-sm text-on-surface-variant/45">
+            Loading tables...
+          </div>
+        `;
+    }
+
+    if (!tables.length) {
+        return `
+          <div class="px-4 py-6 text-sm text-on-surface-variant/45">
+            No tables found.
+          </div>
+        `;
+    }
+
+    return `
+      <div class="subnavi-list custom-scrollbar">
+        ${tables
+            .map(table => {
+                const isActive = table.name === selectedTableName;
+
+                return `
+                  <a
+                    class="table-designer-sidebar__item subnavi-item block border px-4 py-3 text-left transition-colors ${
+                        isActive
+                            ? 'is-active border-primary-container/30 bg-surface-container-high'
+                            : 'border-outline-variant/10 bg-surface-container-lowest hover:bg-surface-container-high'
+                    }"
+                    href="#/table-advisor/${encodeURIComponent(table.name)}"
+                    title="${escapeHtml(table.name)}"
+                  >
+                    <div class="table-designer-sidebar__item-name ${isActive ? 'is-active' : ''}">
+                      ${escapeHtml(table.name)}
+                    </div>
+                    <div class="table-designer-sidebar__item-meta">
+                      ${escapeHtml(formatNumber(table.columnCount ?? 0))} columns
+                    </div>
+                  </a>
+                `;
+            })
+            .join('')}
+      </div>
+    `;
+}
+
+function renderSummary(result = {}) {
+    const score = Number(result.score ?? 0);
+
+    return `
+      <div class="grid grid-cols-1 gap-3 md:grid-cols-4">
+        <div class="border border-outline-variant/10 bg-surface-container-low px-4 py-3">
+          <div class="font-mono text-[10px] uppercase tracking-[0.2em] text-on-surface-variant/55">Table</div>
+          <div class="mt-2 min-w-0 truncate text-lg font-black text-on-surface" title="${escapeHtml(
+              result.tableName ?? '',
+          )}">${escapeHtml(result.tableName ?? 'Unknown')}</div>
+        </div>
+        <div class="border border-outline-variant/10 bg-surface-container-low px-4 py-3">
+          <div class="font-mono text-[10px] uppercase tracking-[0.2em] text-on-surface-variant/55">Score</div>
+          <div class="mt-2 text-3xl font-black ${getScoreClass(score)}">${escapeHtml(formatNumber(score))}</div>
+        </div>
+        <div class="border border-outline-variant/10 bg-surface-container-low px-4 py-3">
+          <div class="font-mono text-[10px] uppercase tracking-[0.2em] text-on-surface-variant/55">Issues</div>
+          <div class="mt-2 text-3xl font-black text-on-surface">${escapeHtml(formatNumber(result.issueCount ?? 0))}</div>
+        </div>
+        <div class="border border-outline-variant/10 bg-surface-container-low px-4 py-3">
+          <div class="font-mono text-[10px] uppercase tracking-[0.2em] text-on-surface-variant/55">Rows</div>
+          <div class="mt-2 text-3xl font-black text-on-surface">${escapeHtml(formatNumber(result.rowCount ?? 0))}</div>
+          <div class="mt-1 truncate font-mono text-[10px] uppercase tracking-[0.14em] text-on-surface-variant/45">
+            ${escapeHtml(formatDateTime(result.analyzedAt))}
+          </div>
+        </div>
+      </div>
+    `;
+}
+
+function renderIssue(issue = {}) {
+    const sql = String(issue.sql ?? '').trim();
+
+    return `
+      <article class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-4">
+        <div class="flex flex-wrap items-start justify-between gap-3">
+          <div class="min-w-0">
+            <div class="flex flex-wrap items-center gap-2">
+              ${renderSeverityBadge(issue.severity)}
+              ${renderRiskBadge(issue.risk)}
+            </div>
+            <h4 class="mt-3 text-lg font-black text-on-surface">${escapeHtml(issue.title ?? 'Advisor issue')}</h4>
+          </div>
+          <div class="font-mono text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45" title="${escapeHtml(
+              issue.id ?? '',
+          )}">
+            ${escapeHtml(truncateMiddle(issue.id ?? '', 42))}
+          </div>
+        </div>
+        <div class="mt-3 grid grid-cols-1 gap-3 text-sm leading-6 text-on-surface-variant/75 lg:grid-cols-3">
+          <div>
+            <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/45">Explanation</div>
+            <p class="mt-1">${escapeHtml(issue.explanation ?? '')}</p>
+          </div>
+          <div>
+            <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/45">Evidence</div>
+            <p class="mt-1">${escapeHtml(issue.evidence ?? '')}</p>
+          </div>
+          <div>
+            <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/45">Recommendation</div>
+            <p class="mt-1">${escapeHtml(issue.recommendation ?? '')}</p>
+          </div>
+        </div>
+        ${
+            issue.risk === 'high'
+                ? `<div class="mt-3 border border-error/20 bg-error-container/15 px-3 py-2 text-xs leading-5 text-error">
+                    This change may require rebuilding the table. Create a backup before applying it.
+                  </div>`
+                : ''
+        }
+        ${
+            sql
+                ? `<div class="mt-4 border border-outline-variant/10 bg-surface-container-low">
+                    <div class="flex items-center justify-between gap-3 border-b border-outline-variant/10 px-3 py-2">
+                      <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-primary-container">SQL</div>
+                      <button
+                        class="standard-button min-h-8 px-3 py-1 text-[10px]"
+                        data-action="copy-table-advisor-sql"
+                        data-issue-id="${escapeHtml(issue.id ?? '')}"
+                        type="button"
+                      >
+                        <span class="material-symbols-outlined text-sm">content_copy</span>
+                        Copy SQL
+                      </button>
+                    </div>
+                    <pre class="custom-scrollbar max-h-48 overflow-auto whitespace-pre-wrap px-3 py-3 text-xs leading-6 text-on-surface"><code>${highlightSql(
+                        sql,
+                    )}</code></pre>
+                  </div>`
+                : ''
+        }
+      </article>
+    `;
+}
+
+function renderIssues(result = {}) {
+    const issues = result.issues ?? [];
+
+    if (!issues.length) {
+        return `
+          <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-6 text-sm leading-6 text-on-surface-variant/70">
+            No table advisor issues found for this table.
+          </div>
+        `;
+    }
+
+    return CATEGORY_ORDER.map(category => {
+        const categoryIssues = issues.filter(issue => issue.category === category);
+
+        if (!categoryIssues.length) {
+            return '';
+        }
+
+        return `
+          <section class="space-y-3">
+            <div class="flex items-center justify-between gap-3 border-b border-outline-variant/10 pb-2">
+              <h3 class="font-mono text-[11px] uppercase tracking-[0.22em] text-primary-container">
+                ${escapeHtml(CATEGORY_LABELS[category] ?? category)}
+              </h3>
+              <div class="font-mono text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">
+                ${escapeHtml(formatNumber(categoryIssues.length))}
+              </div>
+            </div>
+            ${categoryIssues.map(issue => renderIssue(issue)).join('')}
+          </section>
+        `;
+    }).join('');
+}
+
+function renderAdvisorBody(state) {
+    const advisor = state.tableAdvisor;
+
+    if (advisor.error) {
+        return renderError(advisor.error);
+    }
+
+    if (advisor.loading && !advisor.result) {
+        return `
+          <div class="flex min-h-[280px] items-center justify-center border border-outline-variant/10 bg-surface-container-low">
+            <div class="text-center text-on-surface-variant/40">
+              <span class="material-symbols-outlined mb-3 text-4xl">progress_activity</span>
+              <p class="font-mono text-[10px] uppercase tracking-[0.22em]">LOADING_TABLES</p>
+            </div>
+          </div>
+        `;
+    }
+
+    if (!advisor.selectedTableName) {
+        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">troubleshoot</span>
+            <p class="font-body text-xl font-black uppercase tracking-tight text-primary-container">
+              No table selected
+            </p>
+          </div>
+        `;
+    }
+
+    if (advisor.analysisLoading) {
+        return `
+          <div class="flex min-h-[280px] items-center justify-center border border-outline-variant/10 bg-surface-container-low">
+            <div class="text-center text-on-surface-variant/40">
+              <span class="material-symbols-outlined mb-3 text-4xl">progress_activity</span>
+              <p class="font-mono text-[10px] uppercase tracking-[0.22em]">ANALYZING_TABLE</p>
+            </div>
+          </div>
+        `;
+    }
+
+    if (advisor.analysisError) {
+        return renderError(advisor.analysisError);
+    }
+
+    if (!advisor.result) {
+        return '';
+    }
+
+    return `
+      <div class="space-y-6">
+        ${renderSummary(advisor.result)}
+        ${renderIssues(advisor.result)}
+      </div>
+    `;
+}
+
+function renderToolbar(state) {
+    const tableName = state.tableAdvisor.selectedTableName;
+
+    return `
+      <header class="workspace-header">
+        <div class="min-w-0">
+          <div class="font-mono text-[10px] uppercase tracking-[0.26em] text-primary-container/70">
+            Local analysis
+          </div>
+          <h1 class="mt-1 truncate font-body text-3xl font-black uppercase tracking-tight text-primary-container">
+            Table Advisor
+          </h1>
+        </div>
+        <div class="ml-auto flex flex-wrap items-center justify-end gap-3">
+          ${renderWorkspaceOpenDropdown({
+              tableName: tableName ?? '',
+              destinations: [
+                  {
+                      icon: 'table_rows',
+                      key: 'data',
+                      label: 'Data',
+                      target: name => `/data/${encodeURIComponent(name)}`,
+                  },
+                  {
+                      icon: 'account_tree',
+                      key: 'structure',
+                      label: 'Structure',
+                      target: name => `/structure/${encodeURIComponent(name)}`,
+                  },
+                  {
+                      icon: 'table_chart',
+                      key: 'table-designer',
+                      label: 'Table Designer',
+                      target: name => `/table-designer/${encodeURIComponent(name)}`,
+                  },
+                  {
+                      key: 'sql-editor',
+                  },
+              ],
+          })}
+          <button class="standard-button" data-action="refresh-view" type="button">
+            <span class="material-symbols-outlined text-sm">refresh</span>
+            Refresh
+          </button>
+        </div>
+      </header>
+    `;
+}
+
+export function renderTableAdvisorView(state) {
+    return {
+        main: `
+          <section class="view-surface flex h-full min-h-full min-h-0 flex-col overflow-hidden bg-surface-container">
+            <div class="data-view-grid data-view-grid--with-subnavi">
+              <aside class="subnavi-panel border-r border-outline-variant/10 bg-surface-low">
+                <div class="subnavi-header">
+                  <div>
+                    <div class="subnavi-header-title">Tables</div>
+                    <div class="subnavi-header-details">
+                      total ${escapeHtml(formatNumber(state.tableAdvisor.tables.length))}
+                    </div>
+                  </div>
+                </div>
+                ${renderTableList(state)}
+              </aside>
+              <section class="flex min-h-0 flex-col overflow-hidden">
+                ${renderToolbar(state)}
+                <div class="custom-scrollbar min-h-0 flex-1 overflow-auto p-6">
+                  ${renderAdvisorBody(state)}
+                </div>
+              </section>
+            </div>
+          </section>
+        `,
+        panel: '',
+    };
+}

package/frontend/js/views/tableDesigner.js

@@ -51,6 +51,12 @@ function renderWorkspaceToolbar(state) {
               label: "Structure",
               target: name => `/structure/${encodeURIComponent(name)}`,
             },
+            {
+              icon: "troubleshoot",
+              key: "table-advisor",
+              label: "Table Advisor",
+              target: name => `/table-advisor/${encodeURIComponent(name)}`,
+            },
             {
               key: "sql-editor",
             },