sqlite-hub 1.1.0 → 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

@@ -170,10 +170,10 @@ function renderChartsList(state) {
                 hasSearch
                     ? 'Try another title, SQL fragment, chart type, or saved status.'
                     : isSavedTab
-                    ? 'Save chartable queries from this list or from the SQL Editor to keep them here.'
-                    : isUnsavedTab
-                      ? 'Unsaved chartable queries will appear here until you bookmark them.'
-                    : 'Run SELECT queries in the SQL Editor first. They will appear here automatically.'
+                      ? 'Save chartable queries from this list or from the SQL Editor to keep them here.'
+                      : isUnsavedTab
+                        ? 'Unsaved chartable queries will appear here until you bookmark them.'
+                        : 'Run SELECT queries in the SQL Editor first. They will appear here automatically.'
             }
           </p>
         </div>
@@ -549,7 +549,7 @@ function renderChartCard(chart, state, analysis) {
         '<div class="flex flex-wrap items-center gap-2">',
         '<h3 class="truncate font-headline text-xl font-black uppercase tracking-tight text-on-surface">',
         escapeHtml(chart.name),
-        "</h3>",
+        '</h3>',
         renderStatusBadge(getQueryChartTypeLabel(chart.chartType), 'primary'),
         '</div></div><div class="flex flex-wrap items-center gap-2">',
         '<button class="standard-button" data-action="open-edit-query-chart-modal" data-chart-id="',
@@ -557,14 +557,14 @@ 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>',
         '</div></header><div class="query-chart-card__body">',
         renderChartSurface(chart, state, analysis),
-        "</div></article>",
-    ].join("");
+        '</div></article>',
+    ].join('');
 }
 
 export function renderChartsDetail(state) {
@@ -636,15 +636,16 @@ export function renderChartsDetail(state) {
             </div>
             <div class="charts-detail-shell__controls-group charts-detail-shell__controls-group--end">
               <button
-                class="standard-button"
+                class="standard-button panel-toggle-button ${historyVisible ? '' : 'is-active'}"
+                aria-pressed="${historyVisible ? 'false' : 'true'}"
                 data-action="toggle-query-history-panel"
                 data-next-value="${historyVisible ? 'false' : 'true'}"
                 type="button"
               >
                 <span class="material-symbols-outlined text-sm">${
-                  historyVisible ? 'visibility_off' : 'visibility'
+                    historyVisible ? 'visibility_off' : 'visibility'
                 }</span>
-                ${historyVisible ? 'Hide Query History' : 'Show Query History'}
+                ${historyVisible ? 'Hide History' : 'Show History'}
               </button>
             </div>
           </div>

package/frontend/js/views/data.js

@@ -78,31 +78,32 @@ function renderTableList(state) {
     }
 
     return `
-    <div class="custom-scrollbar flex-1 overflow-auto px-4 py-4">
-      <div class="space-y-2">
-        ${filteredTables
-            .map(
-                table => `
-              <button
-                class="w-full border px-4 py-3 text-left transition-colors ${
-                    table.name === activeName
-                        ? 'border-primary-container/30 bg-surface-container-high'
-                        : 'border-outline-variant/10 bg-surface-container-lowest hover:bg-surface-container-high'
-                }"
-                data-action="navigate"
-                data-to="/data/${encodeURIComponent(table.name)}"
-                type="button"
-              >
-                <div class="truncate font-mono text-xs ${
-                    table.name === activeName ? 'text-primary-container' : 'text-on-surface'
-                }">
-                  ${escapeHtml(table.name)}
-                </div>
-              </button>
-            `,
-            )
-            .join('')}
-      </div>
+    <div class="subnavi-list custom-scrollbar">
+      ${filteredTables
+          .map(
+              table => `
+            <button
+              class="table-designer-sidebar__item subnavi-item border px-4 py-3 text-left transition-colors ${
+                  table.name === activeName
+                      ? 'is-active border-primary-container/30 bg-surface-container-high'
+                      : 'border-outline-variant/10 bg-surface-container-lowest hover:bg-surface-container-high'
+              }"
+              data-action="navigate"
+              data-to="/data/${encodeURIComponent(table.name)}"
+              type="button"
+            >
+              <div class="table-designer-sidebar__item-name ${table.name === activeName ? 'is-active' : ''}">
+                ${escapeHtml(table.name)}
+              </div>
+              <div class="mt-1 truncate text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">
+                ${escapeHtml(formatNumber(table.columnCount ?? 0))} column${
+                    Number(table.columnCount ?? 0) === 1 ? '' : 's'
+                }
+              </div>
+            </button>
+          `,
+          )
+          .join('')}
     </div>
   `;
 }
@@ -112,13 +113,14 @@ function renderWorkspaceHeader(state) {
     const tablesVisible = state.dataBrowser.tablesVisible !== false;
 
     return `
-    <header class="border-b border-outline-variant/10 bg-surface-container px-6 py-3">
+    <header class="workspace-header">
       <div class="flex flex-wrap items-center justify-between gap-4">
         <div class="flex items-center gap-3">
           ${
               table
                   ? `<button
-                    class="standard-button"
+                    class="standard-button panel-toggle-button ${tablesVisible ? '' : 'is-active'}"
+                    aria-pressed="${tablesVisible ? 'false' : 'true'}"
                     data-action="toggle-data-tables"
                     type="button"
                   >
@@ -631,17 +633,17 @@ export function renderDataView(state) {
     return {
         main: `
       <section class="view-surface min-h-full bg-surface-container flex h-full min-h-0 flex-col overflow-hidden">
-        <div class="grid h-full min-h-0 grid-cols-1 ${tablesVisible ? 'md:grid-cols-[18rem_minmax(0,1fr)]' : ''}">
+        <div class="data-view-grid ${tablesVisible ? 'data-view-grid--with-subnavi' : ''}">
           ${
               tablesVisible
                   ? `
-                    <aside class="flex min-h-0 flex-col border-r border-outline-variant/10 bg-surface-low">
-                      <div class="border-b border-outline-variant/10 px-6 py-5">
-                        <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
-                          Tables
-                        </div>
-                        <div class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-                          total ${escapeHtml(formatNumber(state.dataBrowser.tables.length))}
+                    <aside class="data-view__sidebar subnavi-panel">
+                      <div class="subnavi-header">
+                        <div>
+                          <div class="subnavi-header-title">Tables</div>
+                          <div class="subnavi-header-details">
+                            total ${escapeHtml(formatNumber(state.dataBrowser.tables.length))}
+                          </div>
                         </div>
                       </div>
                       ${renderDataTableSearch(state)}