sqlite-hub 1.1.1 → 1.2.0

package/frontend/js/utils/emailPreview.js

@@ -0,0 +1,28 @@
+const EMAIL_PATTERN = /^[^\s@<>"']+@[^\s@<>"']+\.[^\s@<>"']+$/;
+
+export function detectEmailValue(value) {
+  if (typeof value !== "string") {
+    return null;
+  }
+
+  const text = value.trim();
+
+  if (!text || text.length > 320 || !EMAIL_PATTERN.test(text)) {
+    return null;
+  }
+
+  const atIndex = text.lastIndexOf("@");
+  const localPart = text.slice(0, atIndex);
+  const domain = text.slice(atIndex + 1);
+
+  if (!localPart || !domain || domain.startsWith(".") || domain.endsWith(".")) {
+    return null;
+  }
+
+  return {
+    type: "email",
+    value: text,
+    localPart,
+    domain,
+  };
+}

package/frontend/js/utils/markdownDocuments.js

@@ -83,8 +83,24 @@ function renderFallbackMarkdown(markdown = '') {
     return html.join('\n');
 }
 
+function escapeMarkdownHtmlOutsideFences(markdown = '') {
+    const lines = String(markdown ?? '').split('\n');
+    let inFence = false;
+
+    return lines
+        .map(line => {
+            if (FENCED_CODE_PATTERN.test(line)) {
+                inFence = !inFence;
+                return line;
+            }
+
+            return inFence ? line : escapeHtml(line);
+        })
+        .join('\n');
+}
+
 function renderMarkdownBlock(markdown = '') {
-    const source = escapeHtml(markdown);
+    const source = escapeMarkdownHtmlOutsideFences(markdown);
     const markedRuntime = globalThis.marked;
     const parser = typeof markedRuntime?.parse === 'function' ? markedRuntime.parse.bind(markedRuntime) : null;
 

package/frontend/js/utils/riskySql.js

@@ -0,0 +1,165 @@
+const RISKY_PATTERNS = [
+  { type: 'drop_table', pattern: /^\s*DROP\s+TABLE\s+(?:IF\s+EXISTS\s+)?(?:"([^"]+)"|`([^`]+)`|\[([^\]]+)\]|([^\s;]+))/i },
+  { type: 'schema_change', pattern: /^\s*ALTER\s+TABLE\b/i },
+  { type: 'schema_change', pattern: /^\s*CREATE\s+(?:TABLE|INDEX|VIEW|TRIGGER)\b/i },
+  { type: 'schema_change', pattern: /^\s*DROP\s+(?:INDEX|VIEW|TRIGGER)\b/i },
+  { type: 'schema_change', pattern: /^\s*REINDEX\b/i },
+  { type: 'schema_change', pattern: /^\s*VACUUM\b/i },
+];
+
+function stripSqlComments(sql = '') {
+  const text = String(sql ?? '');
+  let output = '';
+  let index = 0;
+  let quote = null;
+
+  while (index < text.length) {
+    const char = text[index];
+    const next = text[index + 1];
+
+    if (quote) {
+      output += char;
+      if (char === quote) {
+        if (text[index + 1] === quote) {
+          output += text[index + 1];
+          index += 2;
+          continue;
+        }
+        quote = null;
+      }
+      index += 1;
+      continue;
+    }
+
+    if (char === "'" || char === '"' || char === '`') {
+      quote = char;
+      output += char;
+      index += 1;
+      continue;
+    }
+
+    if (char === '-' && next === '-') {
+      while (index < text.length && text[index] !== '\n') {
+        index += 1;
+      }
+      output += '\n';
+      continue;
+    }
+
+    if (char === '/' && next === '*') {
+      index += 2;
+      while (index < text.length && !(text[index] === '*' && text[index + 1] === '/')) {
+        index += 1;
+      }
+      index += 2;
+      output += ' ';
+      continue;
+    }
+
+    output += char;
+    index += 1;
+  }
+
+  return output;
+}
+
+function splitSqlStatements(sql = '') {
+  const statements = [];
+  let current = '';
+  let quote = null;
+
+  for (let index = 0; index < sql.length; index += 1) {
+    const char = sql[index];
+
+    if (quote) {
+      current += char;
+      if (char === quote) {
+        if (sql[index + 1] === quote) {
+          current += sql[index + 1];
+          index += 1;
+        } else {
+          quote = null;
+        }
+      }
+      continue;
+    }
+
+    if (char === "'" || char === '"' || char === '`') {
+      quote = char;
+      current += char;
+      continue;
+    }
+
+    if (char === ';') {
+      if (current.trim()) {
+        statements.push(current.trim());
+      }
+      current = '';
+      continue;
+    }
+
+    current += char;
+  }
+
+  if (current.trim()) {
+    statements.push(current.trim());
+  }
+
+  return statements;
+}
+
+function extractDropTableName(match) {
+  return [match?.[1], match?.[2], match?.[3], match?.[4]]
+    .map(value => String(value ?? '').trim())
+    .find(Boolean) ?? null;
+}
+
+export function detectRiskySqlOperations(sql = '') {
+  const statements = splitSqlStatements(stripSqlComments(sql));
+  const operations = [];
+
+  statements.forEach((statement, index) => {
+    for (const rule of RISKY_PATTERNS) {
+      const match = statement.match(rule.pattern);
+      if (!match) {
+        continue;
+      }
+
+      operations.push({
+        type: statements.length > 1 && rule.type !== 'drop_table' ? 'migration' : rule.type,
+        statement,
+        statementIndex: index,
+        tableName: rule.type === 'drop_table' ? extractDropTableName(match) : null,
+      });
+      break;
+    }
+  });
+
+  return operations;
+}
+
+export function buildRiskySqlBackupContext(operations = []) {
+  const dropTable = operations.find(operation => operation.type === 'drop_table');
+
+  if (dropTable) {
+    return {
+      type: 'pre_schema_change',
+      name: `Before dropping table ${dropTable.tableName ?? ''}`.trim(),
+      description: `DROP TABLE may remove data permanently. ${dropTable.tableName ? `Target: ${dropTable.tableName}.` : ''}`.trim(),
+    };
+  }
+
+  if (operations.some(operation => operation.type === 'migration') || operations.length > 1) {
+    return {
+      type: 'pre_migration',
+      name: 'Before migration',
+      description: 'Multiple schema-affecting statements were detected.',
+    };
+  }
+
+  return {
+    type: 'pre_schema_change',
+    name: 'Before schema change',
+    description: 'This SQL can change database schema objects.',
+  };
+}

package/frontend/js/views/backups.js

@@ -0,0 +1,204 @@
+import { renderStatusBadge } from '../components/badges.js';
+import { renderPageHeader } from '../components/pageHeader.js';
+import { escapeHtml, formatBytes, formatCompactDateTime, truncateMiddle } from '../utils/format.js';
+
+const STATUS_TONE = {
+    creating: 'muted',
+    verifying: 'muted',
+    verified: 'success',
+    failed: 'alert',
+    restoring: 'muted',
+};
+
+function formatStatus(value) {
+    return String(value ?? 'unknown')
+        .replace(/_/g, ' ')
+        .replace(/\b\w/g, letter => letter.toUpperCase());
+}
+
+function renderBackupStatus(backup) {
+    if (!backup.fileExists) {
+        return renderStatusBadge('File Missing', 'alert');
+    }
+
+    return renderStatusBadge(formatStatus(backup.status), STATUS_TONE[backup.status] ?? 'muted');
+}
+
+function isBackupBusy(backup, state) {
+    return Boolean(state.backups.operationLoading) || ['creating', 'verifying', 'restoring'].includes(backup.status);
+}
+
+function renderBackupMetadataItem(label, value, extraClass = '') {
+    return `
+      <div class="border border-outline-variant/10 bg-surface-container-lowest px-3 py-2 ${extraClass}">
+        <div class="font-mono text-[9px] uppercase tracking-[0.16em] text-on-surface-variant/45">${escapeHtml(label)}</div>
+        <div class="mt-1 font-mono text-[10px] uppercase tracking-[0.1em] text-on-surface/80">${escapeHtml(value)}</div>
+      </div>
+    `;
+}
+
+function renderBackupMetadata(backup) {
+    return `
+      <div class="grid min-w-[24rem] grid-cols-2 gap-2">
+        ${renderBackupMetadataItem('Size', formatBytes(backup.sizeBytes))}
+        <div class="border border-outline-variant/10 bg-surface-container-lowest px-3 py-2">
+          <div class="font-mono text-[9px] uppercase tracking-[0.16em] text-on-surface-variant/45">Status</div>
+          <div class="mt-1">${renderBackupStatus(backup)}</div>
+        </div>
+        ${renderBackupMetadataItem('SQLite Hub', backup.sqliteHubVersion ? `v${backup.sqliteHubVersion}` : 'n/a')}
+        ${renderBackupMetadataItem('SQLite', backup.sqliteVersion ? `v${backup.sqliteVersion}` : 'n/a')}
+      </div>
+    `;
+}
+
+function renderBackupRows(state) {
+    return state.backups.items
+        .map(backup => {
+            const busy = isBackupBusy(backup, state);
+            const canRestore = backup.status === 'verified' && backup.fileExists && !busy && !state.connections.active?.readOnly;
+            const canDownload = backup.fileExists && !busy;
+            const canEditNotes = !busy;
+            const canDelete = !busy;
+
+            return `
+        <tr class="border-b border-outline-variant/10 align-top">
+          <td class="min-w-[20rem] px-4 py-5">
+            <div class="space-y-2">
+              <div class="font-headline text-sm font-black uppercase text-on-surface">${escapeHtml(backup.name)}</div>
+              <div class="font-mono text-[10px] uppercase tracking-[0.12em] text-on-surface-variant/45" title="${escapeHtml(backup.path)}">
+                ${escapeHtml(truncateMiddle(backup.fileName || backup.path, 48))}
+              </div>
+              <div class="font-mono text-[10px] uppercase tracking-[0.12em] text-on-surface-variant/55">
+                Created // ${escapeHtml(formatCompactDateTime(backup.createdAt))}
+              </div>
+            </div>
+          </td>
+          <td class="px-4 py-5">
+            ${renderBackupMetadata(backup)}
+          </td>
+          <td class="min-w-[18rem] max-w-[24rem] px-4 py-5">
+            <div class="flex h-full flex-col items-start gap-3">
+              <div class="text-xs leading-6 text-on-surface-variant/70">
+                ${backup.notes ? escapeHtml(backup.notes) : '<span class="text-on-surface-variant/35">No notes</span>'}
+                ${backup.errorMessage ? `<div class="mt-2 text-error">${escapeHtml(backup.errorMessage)}</div>` : ''}
+              </div>
+              <button class="standard-button" data-action="open-edit-backup-notes-modal" data-backup-id="${escapeHtml(backup.id)}" type="button" ${canEditNotes ? '' : 'disabled'}>
+                <span class="material-symbols-outlined text-sm">edit_note</span>
+                Edit Notes
+              </button>
+            </div>
+          </td>
+          <td class="px-4 py-5">
+            <div class="flex min-w-[10rem] flex-col items-stretch gap-2">
+              <button class="standard-button" data-action="open-restore-backup-modal" data-backup-id="${escapeHtml(backup.id)}" type="button" ${canRestore ? '' : 'disabled'}>
+                <span class="material-symbols-outlined text-sm">restore</span>
+                Restore
+              </button>
+              <button class="standard-button" data-action="download-backup" data-backup-id="${escapeHtml(backup.id)}" type="button" ${canDownload ? '' : 'disabled'}>
+                <span class="material-symbols-outlined text-sm">download</span>
+                Download
+              </button>
+              <button class="delete-button" data-action="open-delete-backup-modal" data-backup-id="${escapeHtml(backup.id)}" type="button" ${canDelete ? '' : 'disabled'}>
+                <span class="material-symbols-outlined text-sm">delete</span>
+                Delete
+              </button>
+            </div>
+          </td>
+        </tr>
+      `;
+        })
+        .join('');
+}
+
+function renderBackupsBody(state) {
+    if (state.backups.loading) {
+        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_BACKUPS</p>
+        </div>
+      </div>
+    `;
+    }
+
+    if (state.backups.error) {
+        return `
+      <div class="border border-error/20 bg-error-container/10 px-6 py-5 text-sm text-on-surface">
+        <div class="font-headline text-xs font-bold uppercase tracking-[0.18em] text-error">
+          ${escapeHtml(state.backups.error.code)}
+        </div>
+        <div class="mt-2">${escapeHtml(state.backups.error.message)}</div>
+      </div>
+    `;
+    }
+
+    if (!state.backups.items.length) {
+        return `
+      <div class="border border-dashed border-outline-variant/20 bg-surface-container-low px-8 py-10 text-center">
+        <span class="material-symbols-outlined mb-3 text-5xl text-on-surface-variant/25">inventory_2</span>
+        <p class="font-headline text-xl font-black uppercase tracking-tight text-primary-container">
+          No backups yet
+        </p>
+        <p class="mx-auto mt-3 max-w-xl text-sm leading-7 text-on-surface-variant/65">
+          Create a backup to protect your database before making significant changes.
+        </p>
+        <div class="mt-6 flex items-center justify-center">
+          <button class="signature-button" data-action="open-create-backup-modal" type="button">
+            <span class="material-symbols-outlined text-sm">inventory_2</span>
+            Create backup
+          </button>
+        </div>
+      </div>
+    `;
+    }
+
+    return `
+    <div class="overflow-auto border border-outline-variant/10 bg-surface-container-low">
+      <table class="min-w-full border-collapse text-left">
+        <thead class="border-b border-outline-variant/10 bg-surface-container">
+          <tr class="font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/55">
+            <th class="px-4 py-3 font-normal">Backup</th>
+            <th class="px-4 py-3 font-normal">Metadata</th>
+            <th class="px-4 py-3 font-normal">Note</th>
+            <th class="px-4 py-3 text-right font-normal">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${renderBackupRows(state)}
+        </tbody>
+      </table>
+    </div>
+  `;
+}
+
+export function renderBackupsView(state) {
+    const activeLabel = state.connections.active?.label ?? 'No active database';
+    const actions = `
+      <button class="standard-button" data-action="refresh-backups" type="button" ${state.backups.loading ? 'disabled' : ''}>
+        <span class="material-symbols-outlined text-sm">refresh</span>
+        Refresh
+      </button>
+      <button class="signature-button" data-action="open-create-backup-modal" type="button" ${state.backups.operationLoading ? 'disabled' : ''}>
+        <span class="material-symbols-outlined text-sm">inventory_2</span>
+        Create backup
+      </button>
+    `;
+
+    return {
+        main: `
+      <section class="view-surface relative min-h-full overflow-hidden">
+        <div class="data-grid-texture pointer-events-none absolute inset-0"></div>
+        <div class="view-frame relative z-10">
+          ${renderPageHeader({
+              title: 'Backups',
+              subtitle: `Active // ${activeLabel}`,
+              actions,
+          })}
+          ${renderBackupsBody(state)}
+        </div>
+      </section>
+    `,
+        panel: '',
+    };
+}

package/frontend/js/views/charts.js

@@ -557,7 +557,7 @@ function renderChartCard(chart, state, analysis) {
         '" type="button">Edit</button>',
         '<button class="delete-button" data-action="open-delete-query-chart-modal" data-chart-id="',
         escapeHtml(chart.id),
-        '" type="button">Delete</button>',
+        '" type="button"><span class="material-symbols-outlined">delete</span> Delete</button>',
         '<button class="standard-button" data-action="export-query-chart-png" data-chart-id="',
         escapeHtml(chart.id),
         '" type="button">Export PNG</button>',

package/frontend/js/views/data.js

@@ -1,6 +1,8 @@
 import { renderDataGrid } from '../components/dataGrid.js';
 import { renderRowEditorPanel } from '../components/rowEditorPanel.js';
+import { renderWorkspaceOpenDropdown } from '../components/workspaceOpenDropdown.js';
 import { escapeHtml, formatCellValue, formatNumber, isBlobPreview, truncateMiddle } from '../utils/format.js';
+import { detectEmailValue } from '../utils/emailPreview.js';
 import { compactPathForDisplay, detectFilePathValue } from '../utils/filePathPreview.js';
 
 function getSelectedRow(state) {
@@ -135,6 +137,30 @@ function renderWorkspaceHeader(state) {
           }
         </div>
         <div class="flex flex-wrap items-center justify-end gap-3">
+          ${
+              table
+                  ? renderWorkspaceOpenDropdown({
+                        tableName: table.name,
+                        destinations: [
+                            {
+                                icon: 'account_tree',
+                                key: 'structure',
+                                label: 'Structure',
+                                target: tableName => `/structure/${encodeURIComponent(tableName)}`,
+                            },
+                            {
+                                icon: 'table_chart',
+                                key: 'table-designer',
+                                label: 'Table Designer',
+                                target: tableName => `/table-designer/${encodeURIComponent(tableName)}`,
+                            },
+                            {
+                                key: 'sql-editor',
+                            },
+                        ],
+                    })
+                  : ''
+          }
           ${
               table
                   ? `<button
@@ -154,21 +180,6 @@ function renderWorkspaceHeader(state) {
           >
             Reload Data
           </button>
-          ${
-              table
-                  ? `
-                  <button
-                    class="standard-button"
-                    data-action="navigate"
-                    data-to="/structure/${encodeURIComponent(table.name)}"
-                    type="button"
-                  >
-                  <span class="material-symbols-outlined">account_tree</span>
-                    Open Structure
-                  </button>
-                `
-                  : ''
-          }
         </div>
       </div>
     </header>
@@ -370,11 +381,26 @@ function renderTableSurface(state) {
         cellClassName: 'px-4 py-2 align-top text-[11px] text-on-surface',
         render: row => {
             const rawValue = row[columnName];
+            const email = detectEmailValue(rawValue);
             const filePath = detectFilePathValue(rawValue, columnName, tableMeta);
             const value = formatCellValue(rawValue);
             const isNull = value === 'NULL';
             const widthClass = getCellWidthClass(columnName);
 
+            if (email) {
+                return `
+                  <span
+                    class="inline-flex ${widthClass} items-center gap-2 overflow-hidden whitespace-nowrap text-on-surface"
+                    title="${escapeHtml(email.value)}"
+                  >
+                    <span class="material-symbols-outlined text-sm text-primary-container/75">alternate_email</span>
+                    <span class="min-w-0 overflow-hidden text-ellipsis">${escapeHtml(
+                        truncateMiddle(email.value, 48),
+                    )}</span>
+                  </span>
+                `;
+            }
+
             if (filePath) {
                 return `
                   <span
@@ -406,7 +432,7 @@ function renderTableSurface(state) {
     const gridMarkup = renderDataGrid({
         columns,
         rows: indexedRows.map(({ row }) => row),
-        tableClass: 'min-w-full border-collapse text-left font-mono text-xs',
+        tableClass: 'data-table min-w-full border-collapse text-left font-mono text-xs',
         theadClass: 'sticky top-0 z-10 bg-surface-container-highest',
         tbodyClass: 'divide-y divide-outline-variant/5',
         getRowClass: (_, rowIndexOnPage) => {