sqlite-hub 1.1.1 → 1.1.2

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,176 @@
+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 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="px-4 py-4 text-xs font-mono text-on-surface/80">${escapeHtml(formatCompactDateTime(backup.createdAt))}</td>
+          <td class="px-4 py-4">
+            <div class="font-headline text-sm font-black uppercase text-on-surface">${escapeHtml(backup.name)}</div>
+            <div class="mt-1 font-mono text-[10px] uppercase tracking-[0.12em] text-on-surface-variant/45" title="${escapeHtml(backup.path)}">
+              ${escapeHtml(truncateMiddle(backup.fileName || backup.path, 44))}
+            </div>
+          </td>
+          <td class="px-4 py-4 text-right text-xs font-mono text-on-surface/70">${escapeHtml(formatBytes(backup.sizeBytes))}</td>
+          <td class="px-4 py-4">${renderBackupStatus(backup)}</td>
+          <td class="max-w-[18rem] px-4 py-4 text-xs leading-6 text-on-surface-variant/70">
+            ${backup.notes ? escapeHtml(backup.notes) : '<span class="text-on-surface-variant/35">-</span>'}
+            ${backup.errorMessage ? `<div class="mt-2 text-error">${escapeHtml(backup.errorMessage)}</div>` : ''}
+            <div class="mt-3">
+              <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-4">
+            <div class="flex flex-wrap items-center justify-end 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">Created</th>
+            <th class="px-4 py-3 font-normal">Name</th>
+            <th class="px-4 py-3 text-right font-normal">Size</th>
+            <th class="px-4 py-3 font-normal">Status</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>',