sqlite-hub 1.1.1 → 1.1.2

package/frontend/js/components/modal.js

@@ -1,29 +1,25 @@
-import { escapeHtml, formatNumber, highlightSql, truncateMiddle } from "../utils/format.js";
+import { escapeHtml, formatNumber, highlightSql, truncateMiddle } from '../utils/format.js';
 import {
-  buildCopyColumnText,
-  buildCopyColumnPreviewText,
-  getCopyColumnActionLabel,
-  getCopyColumnExportMetadata,
-  isMarkdownTodoCopyColumnMode,
-} from "../utils/copyColumnExport.js";
-import { renderConnectionLogo } from "./connectionLogo.js";
-import { renderTextInput } from "./formControls.js";
+    buildCopyColumnText,
+    buildCopyColumnPreviewText,
+    getCopyColumnActionLabel,
+    getCopyColumnExportMetadata,
+    isMarkdownTodoCopyColumnMode,
+} from '../utils/copyColumnExport.js';
+import { renderConnectionLogo } from './connectionLogo.js';
+import { renderTextInput } from './formControls.js';
+import { analyzeQueryChartResult, getQueryChartTypeLabel, QUERY_CHART_TYPES } from '../lib/queryCharts.js';
 import {
-  analyzeQueryChartResult,
-  getQueryChartTypeLabel,
-  QUERY_CHART_TYPES,
-} from "../lib/queryCharts.js";
-import {
-  hasDefaultMediaTaggingTagTable,
-  hasDefaultMediaTaggingMappingTable,
-  MEDIA_TAGGING_DEFAULT_MAPPING_TABLE,
-  MEDIA_TAGGING_DEFAULT_MAPPING_TABLE_SQL,
-  MEDIA_TAGGING_DEFAULT_TAG_TABLE,
-  MEDIA_TAGGING_DEFAULT_TAG_TABLE_SQL,
-} from "../lib/mediaTaggingDefaults.js";
-
-function renderField({ label, name, type = "text", placeholder = "", value = "" }) {
-  return `
+    hasDefaultMediaTaggingTagTable,
+    hasDefaultMediaTaggingMappingTable,
+    MEDIA_TAGGING_DEFAULT_MAPPING_TABLE,
+    MEDIA_TAGGING_DEFAULT_MAPPING_TABLE_SQL,
+    MEDIA_TAGGING_DEFAULT_TAG_TABLE,
+    MEDIA_TAGGING_DEFAULT_TAG_TABLE_SQL,
+} from '../lib/mediaTaggingDefaults.js';
+
+function renderField({ label, name, type = 'text', placeholder = '', value = '' }) {
+    return `
     <label class="block space-y-2">
       <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
         ${escapeHtml(label)}
@@ -34,14 +30,14 @@ function renderField({ label, name, type = "text", placeholder = "", value = ""
 }
 
 function renderCheckboxField({ label, name, checked = false, text }) {
-  return `
+    return `
     <label class="flex flex-col gap-2">
       <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
         ${escapeHtml(label)}
       </span>
       <span class="standard-checkbox">
         <input
-          ${checked ? "checked" : ""}
+          ${checked ? 'checked' : ''}
           name="${escapeHtml(name)}"
           type="checkbox"
         />
@@ -51,15 +47,15 @@ function renderCheckboxField({ label, name, checked = false, text }) {
   `;
 }
 
-function renderSqlPreviewField(value, minHeightClass = "sql-highlight-shell--tall") {
-  return `
+function renderSqlPreviewField(value, minHeightClass = 'sql-highlight-shell--tall') {
+    return `
     <div class="sql-highlight-shell ${minHeightClass}">
       <div class="query-editor-layer sql-highlight-layer">
         <div
           aria-hidden="true"
           class="query-editor-highlight sql-highlight-content"
           data-query-editor-highlight
-        >${value ? highlightSql(value) : ""}</div>
+        >${value ? highlightSql(value) : ''}</div>
         <textarea
           class="query-editor-input sql-highlight-input custom-scrollbar"
           data-sql-highlight="true"
@@ -72,13 +68,8 @@ function renderSqlPreviewField(value, minHeightClass = "sql-highlight-shell--tal
   `;
 }
 
-function renderFileField({
-  label,
-  name,
-  accept = "",
-  helpText = "",
-}) {
-  return `
+function renderFileField({ label, name, accept = '', helpText = '' }) {
+    return `
     <label class="block space-y-2">
       <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
         ${escapeHtml(label)}
@@ -89,58 +80,54 @@ function renderFileField({
         name="${escapeHtml(name)}"
         type="file"
       />
-      ${
-        helpText
-          ? `<p class="text-[11px] leading-5 text-on-surface-variant/60">${escapeHtml(helpText)}</p>`
-          : ""
-      }
+      ${helpText ? `<p class="text-[11px] leading-5 text-on-surface-variant/60">${escapeHtml(helpText)}</p>` : ''}
     </label>
   `;
 }
 
-function renderSelectField({ label, name, value = "", options = [], bind = "" }) {
-  const attributes = [
-    bind ? ['data-bind="', escapeHtml(bind), '"'].join("") : "",
-    name ? ['name="', escapeHtml(name), '"'].join("") : "",
-  ]
-    .filter(Boolean)
-    .join(" ");
-  const optionMarkup = options
-    .map((option) =>
-      [
-        '<option value="',
-        escapeHtml(option.value),
-        '" ',
-        String(option.value) === String(value) ? "selected" : "",
-        ">",
-        escapeHtml(option.label),
-        "</option>",
-      ].join("")
-    )
-    .join("");
-
-  return [
-    '<label class="block space-y-2">',
-    '<span class="block text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">',
-    escapeHtml(label),
-    "</span>",
-    '<select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" ',
-    attributes,
-    ">",
-    optionMarkup,
-    "</select></label>",
-  ].join("");
+function renderSelectField({ label, name, value = '', options = [], bind = '' }) {
+    const attributes = [
+        bind ? ['data-bind="', escapeHtml(bind), '"'].join('') : '',
+        name ? ['name="', escapeHtml(name), '"'].join('') : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const optionMarkup = options
+        .map(option =>
+            [
+                '<option value="',
+                escapeHtml(option.value),
+                '" ',
+                String(option.value) === String(value) ? 'selected' : '',
+                '>',
+                escapeHtml(option.label),
+                '</option>',
+            ].join(''),
+        )
+        .join('');
+
+    return [
+        '<label class="block space-y-2">',
+        '<span class="block text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">',
+        escapeHtml(label),
+        '</span>',
+        '<select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" ',
+        attributes,
+        '>',
+        optionMarkup,
+        '</select></label>',
+    ].join('');
 }
 
 function renderError(error) {
-  if (!error) {
-    return "";
-  }
+    if (!error) {
+        return '';
+    }
 
-  return `
+    return `
     <div class="border border-error/20 bg-error-container/20 px-4 py-3 text-sm text-error">
       <div class="font-headline text-xs font-bold uppercase tracking-[0.18em]">${escapeHtml(
-        error.code || "Request failed"
+          error.code || 'Request failed',
       )}</div>
       <div class="mt-1 text-on-surface">${escapeHtml(error.message)}</div>
     </div>
@@ -148,7 +135,7 @@ function renderError(error) {
 }
 
 export function renderOpenConnectionForm(modal) {
-  return `
+    return `
     <form class="space-y-5" data-form="open-connection">
       <label class="block space-y-2">
         <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
@@ -156,10 +143,10 @@ export function renderOpenConnectionForm(modal) {
         </span>
         <span class="flex items-stretch gap-2">
           ${renderTextInput({
-            className: "min-w-0 flex-1",
-            dataAttributes: { openDatabasePath: true },
-            name: "path",
-            placeholder: "/absolute/path/to/database.sqlite",
+              className: 'min-w-0 flex-1',
+              dataAttributes: { openDatabasePath: true },
+              name: 'path',
+              placeholder: '/absolute/path/to/database.sqlite',
           })}
           <button
             class="standard-button flex-none"
@@ -175,14 +162,14 @@ export function renderOpenConnectionForm(modal) {
         </span>
       </label>
       ${renderField({
-        label: "Label",
-        name: "label",
-        placeholder: "Optional display name",
+          label: 'Label',
+          name: 'label',
+          placeholder: 'Optional display name',
       })}
       ${renderCheckboxField({
-        label: "Open read-only",
-        name: "readOnly",
-        text: "Open read-only",
+          label: 'Open read-only',
+          name: 'readOnly',
+          text: 'Open read-only',
       })}
       ${renderError(modal.error)}
       <div class="flex items-center justify-between gap-3 pt-2">
@@ -197,7 +184,7 @@ export function renderOpenConnectionForm(modal) {
           class="standard-button"
           type="submit"
         >
-          ${modal.submitting ? "Opening..." : "Open Database"}
+          ${modal.submitting ? 'Opening...' : 'Open Database'}
         </button>
       </div>
     </form>
@@ -205,22 +192,22 @@ export function renderOpenConnectionForm(modal) {
 }
 
 function renderEditConnectionForm(modal) {
-  const connection = modal.connection ?? {};
+    const connection = modal.connection ?? {};
 
-  return `
+    return `
     <form class="space-y-5" data-form="edit-connection">
-      <input name="connectionId" type="hidden" value="${escapeHtml(connection.id ?? "")}" />
+      <input name="connectionId" type="hidden" value="${escapeHtml(connection.id ?? '')}" />
       ${renderField({
-        label: "SQLite File Path",
-        name: "path",
-        placeholder: "/absolute/path/to/database.sqlite",
-        value: connection.path ?? "",
+          label: 'SQLite File Path',
+          name: 'path',
+          placeholder: '/absolute/path/to/database.sqlite',
+          value: connection.path ?? '',
       })}
       ${renderField({
-        label: "Label",
-        name: "label",
-        placeholder: "Optional display name",
-        value: connection.label ?? "",
+          label: 'Label',
+          name: 'label',
+          placeholder: 'Optional display name',
+          value: connection.label ?? '',
       })}
       <div class="space-y-3">
         <span class="block text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
@@ -228,35 +215,35 @@ function renderEditConnectionForm(modal) {
         </span>
         <div class="flex flex-wrap items-center gap-4 border border-outline-variant/10 bg-surface-container-lowest px-4 py-4">
           ${renderConnectionLogo(connection, {
-            containerClass:
-              "flex h-16 w-16 items-center justify-center overflow-hidden border border-outline-variant/20 bg-surface-container-highest",
-            imageClassName: "h-full w-full object-cover",
-            iconClassName: "text-2xl text-primary-container",
+              containerClass:
+                  'flex h-16 w-16 items-center justify-center overflow-hidden border border-outline-variant/20 bg-surface-container-highest',
+              imageClassName: 'h-full w-full object-cover',
+              iconClassName: 'text-2xl text-primary-container',
           })}
           <div class="min-w-0 flex-1">
             ${renderFileField({
-              label: "Upload image",
-              name: "logoFile",
-              accept: ".png,.jpg,.jpeg,.webp,image/png,image/jpeg,image/webp",
-              helpText: "Allowed formats: PNG, JPG, WEBP. The file is stored in db_logos.",
+                label: 'Upload image',
+                name: 'logoFile',
+                accept: '.png,.jpg,.jpeg,.webp,image/png,image/jpeg,image/webp',
+                helpText: 'Allowed formats: PNG, JPG, WEBP. The file is stored in db_logos.',
             })}
             ${
-              connection.logoUrl
-                ? renderCheckboxField({
-                    label: "Reset icon",
-                    name: "clearLogo",
-                    text: "Use the default icon again",
-                  })
-                : ""
+                connection.logoUrl
+                    ? renderCheckboxField({
+                          label: 'Reset icon',
+                          name: 'clearLogo',
+                          text: 'Use the default icon again',
+                      })
+                    : ''
             }
           </div>
         </div>
       </div>
       ${renderCheckboxField({
-        label: "Open read-only",
-        name: "readOnly",
-        checked: Boolean(connection.readOnly),
-        text: "Open read-only",
+          label: 'Open read-only',
+          name: 'readOnly',
+          checked: Boolean(connection.readOnly),
+          text: 'Open read-only',
       })}
       ${renderError(modal.error)}
       <div class="flex items-center justify-between gap-3 pt-2">
@@ -271,7 +258,7 @@ function renderEditConnectionForm(modal) {
           class="standard-button"
           type="submit"
         >
-          ${modal.submitting ? "Saving..." : "Save Changes"}
+          ${modal.submitting ? 'Saving...' : 'Save Changes'}
         </button>
       </div>
     </form>
@@ -279,7 +266,7 @@ function renderEditConnectionForm(modal) {
 }
 
 export function renderCreateDatabaseForm(modal) {
-  return `
+    return `
     <form class="space-y-5" data-form="create-connection">
       <label class="block space-y-2">
         <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
@@ -287,10 +274,10 @@ export function renderCreateDatabaseForm(modal) {
         </span>
         <span class="flex items-stretch gap-2">
           ${renderTextInput({
-            className: "min-w-0 flex-1",
-            dataAttributes: { createDatabasePath: true },
-            name: "path",
-            placeholder: "/absolute/path/to/new-database.sqlite",
+              className: 'min-w-0 flex-1',
+              dataAttributes: { createDatabasePath: true },
+              name: 'path',
+              placeholder: '/absolute/path/to/new-database.sqlite',
           })}
           <button
             class="standard-button flex-none"
@@ -306,9 +293,9 @@ export function renderCreateDatabaseForm(modal) {
         </span>
       </label>
       ${renderField({
-        label: "Label",
-        name: "label",
-        placeholder: "Optional display name",
+          label: 'Label',
+          name: 'label',
+          placeholder: 'Optional display name',
       })}
       ${renderError(modal.error)}
       <div class="flex items-center justify-between gap-3 pt-2">
@@ -323,7 +310,7 @@ export function renderCreateDatabaseForm(modal) {
           class="standard-button"
           type="submit"
         >
-          ${modal.submitting ? "Creating..." : "Create Database"}
+          ${modal.submitting ? 'Creating...' : 'Create Database'}
         </button>
       </div>
     </form>
@@ -331,65 +318,63 @@ export function renderCreateDatabaseForm(modal) {
 }
 
 function renderImportTargetOptions(state) {
-  const recentOptions = state.connections.recent
-    .map((connection) =>
-      [
-        '<option value="',
-        escapeHtml(connection.id),
-        '">',
-        escapeHtml(connection.label),
-        " • ",
-        escapeHtml(truncateMiddle(connection.path, 42)),
-        "</option>",
-      ].join("")
-    )
-    .join("");
-  const activeOption = state.connections.active
-    ? '<option value="active">Use active database</option>'
-    : "";
-  const recentModeOption = state.connections.recent.length
-    ? '<option value="recent">Use recent connection</option>'
-    : "";
-  const recentConnectionSelect = state.connections.recent.length
-    ? [
+    const recentOptions = state.connections.recent
+        .map(connection =>
+            [
+                '<option value="',
+                escapeHtml(connection.id),
+                '">',
+                escapeHtml(connection.label),
+                ' • ',
+                escapeHtml(truncateMiddle(connection.path, 42)),
+                '</option>',
+            ].join(''),
+        )
+        .join('');
+    const activeOption = state.connections.active ? '<option value="active">Use active database</option>' : '';
+    const recentModeOption = state.connections.recent.length
+        ? '<option value="recent">Use recent connection</option>'
+        : '';
+    const recentConnectionSelect = state.connections.recent.length
+        ? [
+              '<label class="block space-y-2">',
+              '<span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">Recent Connection</span>',
+              '<select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" name="targetConnectionId">',
+              recentOptions,
+              '</select></label>',
+          ].join('')
+        : '';
+
+    return [
         '<label class="block space-y-2">',
-        '<span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">Recent Connection</span>',
-        '<select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" name="targetConnectionId">',
-        recentOptions,
-        "</select></label>",
-      ].join("")
-    : "";
-
-  return [
-    '<label class="block space-y-2">',
-    '<span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">Import Target</span>',
-    '<select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" name="targetMode">',
-    activeOption,
-    recentModeOption,
-    '<option value="create">Create new database from dump</option>',
-    '<option value="path">Open explicit target path</option>',
-    "</select></label>",
-    recentConnectionSelect,
-    renderField({
-      label: "Target Path",
-      name: "targetPath",
-      placeholder: "/absolute/path/to/target.sqlite",
-    }),
-    renderField({
-      label: "Target Label",
-      name: "label",
-      placeholder: "Optional display name",
-    }),
-  ].join("");
+        '<span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">Import Target</span>',
+        '<select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" name="targetMode">',
+        activeOption,
+        recentModeOption,
+        '<option value="create">Create new database from dump</option>',
+        '<option value="path">Open explicit target path</option>',
+        '</select></label>',
+        recentConnectionSelect,
+        renderField({
+            label: 'Target Path',
+            name: 'targetPath',
+            placeholder: '/absolute/path/to/target.sqlite',
+        }),
+        renderField({
+            label: 'Target Label',
+            name: 'label',
+            placeholder: 'Optional display name',
+        }),
+    ].join('');
 }
 
 function renderImportSqlForm(modal, state) {
-  return `
+    return `
     <form class="space-y-5" data-form="import-sql">
       ${renderField({
-        label: "SQL Dump Path",
-        name: "sqlFilePath",
-        placeholder: "/absolute/path/to/dump.sql",
+          label: 'SQL Dump Path',
+          name: 'sqlFilePath',
+          placeholder: '/absolute/path/to/dump.sql',
       })}
       ${renderImportTargetOptions(state)}
       <p class="text-[11px] leading-6 text-on-surface-variant/60">
@@ -409,124 +394,235 @@ function renderImportSqlForm(modal, state) {
           class="standard-button"
           type="submit"
         >
-          ${modal.submitting ? "Importing..." : "Import SQL Dump"}
+          ${modal.submitting ? 'Importing...' : 'Import SQL Dump'}
         </button>
       </div>
     </form>
   `;
 }
 
-function renderDeleteRowConfirmForm(modal) {
-  const rowPreview = modal.rowPreview ?? [];
-  const rowLabelMarkup = modal.rowLabel
-    ? [
+function renderCreateBackupForm(modal) {
+    return `
+    <form class="space-y-5" data-form="create-backup">
+      ${renderField({
+          label: 'Name',
+          name: 'name',
+          placeholder: 'Manual backup',
+          value: modal.name ?? '',
+      })}
+      <label class="block space-y-2">
+        <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">Notes</span>
+        <textarea
+          class="control-input min-h-28 w-full resize-y border border-outline-variant/20 bg-surface-container-lowest px-3 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+          name="notes"
+          placeholder="Optional backup notes"
+        >${escapeHtml(modal.notes ?? '')}</textarea>
+      </label>
+      <input name="type" type="hidden" value="${escapeHtml(modal.backupType ?? 'manual')}" />
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-between gap-3 pt-2">
+        <button class="standard-button" data-action="close-modal" type="button">Cancel</button>
+        <button class="signature-button" type="submit" ${modal.submitting ? 'disabled' : ''}>
+          <span class="material-symbols-outlined text-sm">inventory_2</span>
+          ${modal.submitting ? 'Creating...' : 'Create backup'}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
+function renderDeleteBackupForm(modal) {
+    return [
+        '<form class="space-y-5" data-form="delete-backup-confirm"><div class="space-y-3">',
+        '<p class="text-sm leading-6 text-on-surface-variant/70">Delete this managed backup and remove its backup file from disk.</p>',
         '<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">',
-        escapeHtml(modal.rowLabel),
-        "</div>",
-      ].join("")
-    : "";
-  const rowPreviewMarkup = rowPreview.length
-    ? [
-        '<div class="grid grid-cols-1 gap-3 md:grid-cols-2">',
-        rowPreview
-          .map((field) =>
-            [
-              '<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">',
-              '<div class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">',
-              escapeHtml(field.label),
-              "</div>",
-              '<div class="mt-2 text-sm text-on-surface" title="',
-              escapeHtml(field.fullValue ?? field.value ?? ""),
-              '">',
-              escapeHtml(field.value ?? ""),
-              "</div></div>",
-            ].join("")
-          )
-          .join(""),
-        "</div>",
-      ].join("")
-    : "";
-
-  return [
-    '<form class="space-y-5" data-form="delete-row-confirm"><div class="space-y-3">',
-    '<p class="text-sm leading-7 text-on-surface">Delete this row from <span class="font-bold text-primary-container">',
-    escapeHtml(modal.tableName ?? "the current table"),
-    "</span>?</p>",
-    '<p class="text-sm leading-7 text-on-surface-variant/65">This action cannot be undone.</p>',
-    rowLabelMarkup,
-    rowPreviewMarkup,
-    "</div>",
-    renderError(modal.error),
-    '<div class="flex items-center justify-between gap-3 pt-2">',
-    '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
-    '<button class="delete-button" type="submit">',
-    modal.submitting ? "Deleting..." : "Delete Row",
-    "</button></div></form>",
-  ].join("");
+        escapeHtml(modal.backupName ?? 'Backup'),
+        modal.fileName ? ` // ${escapeHtml(modal.fileName)}` : '',
+        '</div></div>',
+        renderError(modal.error),
+        '<div class="flex items-center justify-between gap-3 pt-2">',
+        '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
+        '<button class="delete-button" type="submit">',
+        '<span class="material-symbols-outlined text-sm">delete</span>',
+        modal.submitting ? 'Deleting...' : 'Delete Backup',
+        '</button></div></form>',
+    ].join('');
+}
+
+function renderEditBackupNotesForm(modal) {
+    return `
+    <form class="space-y-5" data-form="edit-backup-notes">
+      <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">
+        <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/55">Backup</div>
+        <div class="mt-2 font-headline text-sm font-black uppercase text-on-surface">
+          ${escapeHtml(modal.backupName ?? 'Backup')}
+        </div>
+      </div>
+      <label class="block space-y-2">
+        <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">Notes</span>
+        <textarea
+          class="control-input min-h-36 w-full resize-y border border-outline-variant/20 bg-surface-container-lowest px-3 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+          name="notes"
+          placeholder="Optional backup notes" style="height: 160px"
+        >${escapeHtml(modal.notes ?? '')}</textarea>
+      </label>
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-between gap-3 pt-2">
+        <button class="standard-button" data-action="close-modal" type="button">Cancel</button>
+        <button class="signature-button" type="submit" ${modal.submitting ? 'disabled' : ''}>
+          <span class="material-symbols-outlined text-sm">save</span>
+          ${modal.submitting ? 'Saving...' : 'Save notes'}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
+function renderBackupSafetyForm(modal) {
+    const description =
+        modal.description ||
+        'This operation may change or remove data or database structures. Creating a backup allows you to restore the current state if something goes wrong.';
+
+    return `
+    <div class="space-y-5">
+      <p class="text-sm leading-7 text-on-surface-variant/70">
+        ${escapeHtml(description)}
+      </p>
+      <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">
+        <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/55">Safety Backup</div>
+        <div class="mt-2 font-headline text-sm font-black uppercase text-on-surface">${escapeHtml(
+            modal.backupNameBeforeOperation ?? modal.backupName ?? 'Before operation',
+        )}</div>
+      </div>
+      ${renderError(modal.error)}
+      <div class="backup-safety-actions pt-2">
+        <button class="standard-button" data-action="backup-safety-cancel" type="button" ${modal.submitting ? 'disabled' : ''}>
+          Cancel
+        </button>
+        <button class="delete-button" data-action="backup-safety-continue" type="button" ${modal.submitting ? 'disabled' : ''}>
+          <span class="material-symbols-outlined text-sm">warning</span>
+          Continue without backup
+        </button>
+        <button class="signature-button" data-action="backup-safety-create" type="button" ${modal.submitting ? 'disabled' : ''}>
+          <span class="material-symbols-outlined text-sm">inventory_2</span>
+          ${modal.submitting ? 'Working...' : 'Create backup and continue'}
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+function renderDeleteRowConfirmForm(modal) {
+    const rowPreview = modal.rowPreview ?? [];
+    const rowLabelMarkup = modal.rowLabel
+        ? [
+              '<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">',
+              escapeHtml(modal.rowLabel),
+              '</div>',
+          ].join('')
+        : '';
+    const rowPreviewMarkup = rowPreview.length
+        ? [
+              '<div class="grid grid-cols-1 gap-3 md:grid-cols-2">',
+              rowPreview
+                  .map(field =>
+                      [
+                          '<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">',
+                          '<div class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">',
+                          escapeHtml(field.label),
+                          '</div>',
+                          '<div class="mt-2 text-sm text-on-surface" title="',
+                          escapeHtml(field.fullValue ?? field.value ?? ''),
+                          '">',
+                          escapeHtml(field.value ?? ''),
+                          '</div></div>',
+                      ].join(''),
+                  )
+                  .join(''),
+              '</div>',
+          ].join('')
+        : '';
+
+    return [
+        '<form class="space-y-5" data-form="delete-row-confirm"><div class="space-y-3">',
+        '<p class="text-sm leading-7 text-on-surface">Delete this row from <span class="font-bold text-primary-container">',
+        escapeHtml(modal.tableName ?? 'the current table'),
+        '</span>?</p>',
+        '<p class="text-sm leading-7 text-on-surface-variant/65">This action cannot be undone.</p>',
+        rowLabelMarkup,
+        rowPreviewMarkup,
+        '</div>',
+        renderError(modal.error),
+        '<div class="flex items-center justify-between gap-3 pt-2">',
+        '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
+        '<button class="delete-button" type="submit">',
+        modal.submitting ? 'Deleting...' : 'Delete Row',
+        '</button></div></form>',
+    ].join('');
 }
 
 function renderRowUpdatePreviewForm(modal) {
-  const preview = modal.preview ?? {};
-  const changes = preview.changes ?? [];
-  const params = preview.params ?? [];
-  const warnings = preview.warnings ?? [];
-  const changesMarkup = changes.length
-    ? [
-        '<div class="overflow-hidden border border-outline-variant/10">',
-        '<table class="w-full text-left text-sm">',
-        '<thead class="bg-surface-container-highest text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">',
-        '<tr><th class="px-3 py-2">Column</th><th class="px-3 py-2">Old</th><th class="px-3 py-2">New</th></tr>',
-        '</thead><tbody class="divide-y divide-outline-variant/10">',
-        changes
-          .map(
-            change => `
+    const preview = modal.preview ?? {};
+    const changes = preview.changes ?? [];
+    const params = preview.params ?? [];
+    const warnings = preview.warnings ?? [];
+    const changesMarkup = changes.length
+        ? [
+              '<div class="overflow-hidden border border-outline-variant/10">',
+              '<table class="w-full text-left text-sm">',
+              '<thead class="bg-surface-container-highest text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">',
+              '<tr><th class="px-3 py-2">Column</th><th class="px-3 py-2">Old</th><th class="px-3 py-2">New</th></tr>',
+              '</thead><tbody class="divide-y divide-outline-variant/10">',
+              changes
+                  .map(
+                      change => `
               <tr>
                 <td class="px-3 py-2 font-mono text-xs text-primary-container">${escapeHtml(change.column)}</td>
                 <td class="px-3 py-2 text-on-surface-variant/70">${escapeHtml(change.oldValue)}</td>
                 <td class="px-3 py-2 text-on-surface">${escapeHtml(change.newValue)}</td>
               </tr>
             `,
-          )
-          .join(''),
-        '</tbody></table></div>',
-      ].join('')
-    : '<div class="border border-outline-variant/10 bg-surface-container-low px-4 py-3 text-sm text-on-surface-variant/65">No changed values were detected.</div>';
-  const paramsMarkup = params.length
-    ? `
+                  )
+                  .join(''),
+              '</tbody></table></div>',
+          ].join('')
+        : '<div class="border border-outline-variant/10 bg-surface-container-low px-4 py-3 text-sm text-on-surface-variant/65">No changed values were detected.</div>';
+    const paramsMarkup = params.length
+        ? `
         <div class="space-y-2">
           <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">Parameters</div>
           <div class="space-y-2">
             ${params
-              .map(
-                param => `
+                .map(
+                    param => `
                   <div class="flex gap-3 border border-outline-variant/10 bg-surface-container-low px-3 py-2 text-xs">
                     <span class="font-mono text-primary-container">$${escapeHtml(param.index)}</span>
                     <span class="min-w-0 break-words text-on-surface">${escapeHtml(param.value)}</span>
                   </div>
                 `,
-              )
-              .join('')}
+                )
+                .join('')}
           </div>
         </div>
       `
-    : '';
-  const warningsMarkup = warnings.length
-    ? `
+        : '';
+    const warningsMarkup = warnings.length
+        ? `
         <div class="space-y-2">
           ${warnings
-            .map(
-              warning => `
+              .map(
+                  warning => `
                 <div class="border border-primary-container/20 bg-primary-container/10 px-4 py-3 text-sm text-on-surface">
                   ${escapeHtml(warning)}
                 </div>
               `,
-            )
-            .join('')}
+              )
+              .join('')}
         </div>
       `
-    : '';
+        : '';
 
-  return `
+    return `
     <form class="space-y-5" data-form="apply-row-update-preview">
       <div class="space-y-2">
         <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
@@ -558,233 +654,233 @@ function renderRowUpdatePreviewForm(modal) {
 }
 
 function renderChartColumnOptions(analysis, { allowEmpty = false, includeNumericHint = false } = {}) {
-  const options = allowEmpty ? [{ value: "", label: "None" }] : [];
-
-  return options.concat(
-    (analysis?.columns ?? []).map((column) => ({
-      value: column.name,
-      label: `${column.name} (${column.type}${includeNumericHint && column.type === "number" ? " numeric" : ""})`,
-    }))
-  );
+    const options = allowEmpty ? [{ value: '', label: 'None' }] : [];
+
+    return options.concat(
+        (analysis?.columns ?? []).map(column => ({
+            value: column.name,
+            label: `${column.name} (${column.type}${includeNumericHint && column.type === 'number' ? ' numeric' : ''})`,
+        })),
+    );
 }
 
 function renderChartEditorForm(modal, state) {
-  const draft = modal.draft ?? {};
-  const analysis = state.charts.result ? analyzeQueryChartResult(state.charts.result) : null;
-  const chartTypeOptions = QUERY_CHART_TYPES.map((chartType) => ({
-    value: chartType,
-    label: getQueryChartTypeLabel(chartType),
-  }));
-  const columnOptions = renderChartColumnOptions(analysis);
-  const optionalColumnOptions = renderChartColumnOptions(analysis, { allowEmpty: true });
-  let chartSpecificFields = "";
-
-  if (draft.chartType === "bar") {
-    chartSpecificFields = `
+    const draft = modal.draft ?? {};
+    const analysis = state.charts.result ? analyzeQueryChartResult(state.charts.result) : null;
+    const chartTypeOptions = QUERY_CHART_TYPES.map(chartType => ({
+        value: chartType,
+        label: getQueryChartTypeLabel(chartType),
+    }));
+    const columnOptions = renderChartColumnOptions(analysis);
+    const optionalColumnOptions = renderChartColumnOptions(analysis, { allowEmpty: true });
+    let chartSpecificFields = '';
+
+    if (draft.chartType === 'bar') {
+        chartSpecificFields = `
       <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
         ${renderSelectField({
-          label: "X Column",
-          value: draft.config?.x_column ?? "",
-          options: columnOptions,
-          bind: "query-chart-draft-config:x_column",
+            label: 'X Column',
+            value: draft.config?.x_column ?? '',
+            options: columnOptions,
+            bind: 'query-chart-draft-config:x_column',
         })}
         ${renderSelectField({
-          label: "Y Column",
-          value: draft.config?.y_column ?? "",
-          options: columnOptions,
-          bind: "query-chart-draft-config:y_column",
+            label: 'Y Column',
+            value: draft.config?.y_column ?? '',
+            options: columnOptions,
+            bind: 'query-chart-draft-config:y_column',
         })}
       </div>
       <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
         ${renderSelectField({
-          label: "Sort By",
-          value: draft.config?.sort_by ?? "y",
-          options: [
-            { value: "x", label: "X column" },
-            { value: "y", label: "Y value" },
-          ],
-          bind: "query-chart-draft-config:sort_by",
+            label: 'Sort By',
+            value: draft.config?.sort_by ?? 'y',
+            options: [
+                { value: 'x', label: 'X column' },
+                { value: 'y', label: 'Y value' },
+            ],
+            bind: 'query-chart-draft-config:sort_by',
         })}
         ${renderSelectField({
-          label: "Sort Direction",
-          value: draft.config?.sort_direction ?? "desc",
-          options: [
-            { value: "asc", label: "Ascending / smallest first" },
-            { value: "desc", label: "Descending / largest first" },
-          ],
-          bind: "query-chart-draft-config:sort_direction",
+            label: 'Sort Direction',
+            value: draft.config?.sort_direction ?? 'desc',
+            options: [
+                { value: 'asc', label: 'Ascending / smallest first' },
+                { value: 'desc', label: 'Descending / largest first' },
+            ],
+            bind: 'query-chart-draft-config:sort_direction',
         })}
         ${renderCheckboxField({
-          label: "Show legend",
-          name: "",
-          checked: Boolean(draft.config?.show_legend),
-          text: "Show legend",
-        }).replace("<input", '<input data-bind="query-chart-draft-config:show_legend"')}
+            label: 'Show legend',
+            name: '',
+            checked: Boolean(draft.config?.show_legend),
+            text: 'Show legend',
+        }).replace('<input', '<input data-bind="query-chart-draft-config:show_legend"')}
         ${renderCheckboxField({
-          label: "Show labels",
-          name: "",
-          checked: Boolean(draft.config?.show_labels),
-          text: "Show labels",
-        }).replace("<input", '<input data-bind="query-chart-draft-config:show_labels"')}
+            label: 'Show labels',
+            name: '',
+            checked: Boolean(draft.config?.show_labels),
+            text: 'Show labels',
+        }).replace('<input', '<input data-bind="query-chart-draft-config:show_labels"')}
       </div>
     `;
-  } else if (draft.chartType === "line") {
-    chartSpecificFields = `
+    } else if (draft.chartType === 'line') {
+        chartSpecificFields = `
       <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
         ${renderSelectField({
-          label: "X Column",
-          value: draft.config?.x_column ?? "",
-          options: columnOptions,
-          bind: "query-chart-draft-config:x_column",
+            label: 'X Column',
+            value: draft.config?.x_column ?? '',
+            options: columnOptions,
+            bind: 'query-chart-draft-config:x_column',
         })}
         ${renderSelectField({
-          label: "Y Column",
-          value: draft.config?.y_column ?? "",
-          options: columnOptions,
-          bind: "query-chart-draft-config:y_column",
+            label: 'Y Column',
+            value: draft.config?.y_column ?? '',
+            options: columnOptions,
+            bind: 'query-chart-draft-config:y_column',
         })}
       </div>
       <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
         ${renderSelectField({
-          label: "Sort Direction",
-          value: draft.config?.sort_direction ?? "asc",
-          options: [
-            { value: "asc", label: "Ascending" },
-            { value: "desc", label: "Descending" },
-          ],
-          bind: "query-chart-draft-config:sort_direction",
+            label: 'Sort Direction',
+            value: draft.config?.sort_direction ?? 'asc',
+            options: [
+                { value: 'asc', label: 'Ascending' },
+                { value: 'desc', label: 'Descending' },
+            ],
+            bind: 'query-chart-draft-config:sort_direction',
         })}
         ${renderCheckboxField({
-          label: "Smooth line",
-          name: "",
-          checked: Boolean(draft.config?.smooth),
-          text: "Smooth line",
-        }).replace("<input", '<input data-bind="query-chart-draft-config:smooth"')}
+            label: 'Smooth line',
+            name: '',
+            checked: Boolean(draft.config?.smooth),
+            text: 'Smooth line',
+        }).replace('<input', '<input data-bind="query-chart-draft-config:smooth"')}
         ${renderCheckboxField({
-          label: "Show legend",
-          name: "",
-          checked: Boolean(draft.config?.show_legend),
-          text: "Show legend",
-        }).replace("<input", '<input data-bind="query-chart-draft-config:show_legend"')}
+            label: 'Show legend',
+            name: '',
+            checked: Boolean(draft.config?.show_legend),
+            text: 'Show legend',
+        }).replace('<input', '<input data-bind="query-chart-draft-config:show_legend"')}
         ${renderCheckboxField({
-          label: "Show labels",
-          name: "",
-          checked: Boolean(draft.config?.show_labels),
-          text: "Show labels",
-        }).replace("<input", '<input data-bind="query-chart-draft-config:show_labels"')}
+            label: 'Show labels',
+            name: '',
+            checked: Boolean(draft.config?.show_labels),
+            text: 'Show labels',
+        }).replace('<input', '<input data-bind="query-chart-draft-config:show_labels"')}
       </div>
     `;
-  } else if (draft.chartType === "pie") {
-    chartSpecificFields = `
+    } else if (draft.chartType === 'pie') {
+        chartSpecificFields = `
       <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
         ${renderSelectField({
-          label: "Label Column",
-          value: draft.config?.label_column ?? "",
-          options: columnOptions,
-          bind: "query-chart-draft-config:label_column",
+            label: 'Label Column',
+            value: draft.config?.label_column ?? '',
+            options: columnOptions,
+            bind: 'query-chart-draft-config:label_column',
         })}
         ${renderSelectField({
-          label: "Value Column",
-          value: draft.config?.value_column ?? "",
-          options: columnOptions,
-          bind: "query-chart-draft-config:value_column",
+            label: 'Value Column',
+            value: draft.config?.value_column ?? '',
+            options: columnOptions,
+            bind: 'query-chart-draft-config:value_column',
         })}
       </div>
       <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
         ${renderCheckboxField({
-          label: "Donut",
-          name: "",
-          checked: Boolean(draft.config?.donut),
-          text: "Render as donut",
-        }).replace("<input", '<input data-bind="query-chart-draft-config:donut"')}
+            label: 'Donut',
+            name: '',
+            checked: Boolean(draft.config?.donut),
+            text: 'Render as donut',
+        }).replace('<input', '<input data-bind="query-chart-draft-config:donut"')}
         ${renderCheckboxField({
-          label: "Show legend",
-          name: "",
-          checked: Boolean(draft.config?.show_legend),
-          text: "Show legend",
-        }).replace("<input", '<input data-bind="query-chart-draft-config:show_legend"')}
+            label: 'Show legend',
+            name: '',
+            checked: Boolean(draft.config?.show_legend),
+            text: 'Show legend',
+        }).replace('<input', '<input data-bind="query-chart-draft-config:show_legend"')}
         ${renderCheckboxField({
-          label: "Show labels",
-          name: "",
-          checked: Boolean(draft.config?.show_labels),
-          text: "Show labels",
-        }).replace("<input", '<input data-bind="query-chart-draft-config:show_labels"')}
+            label: 'Show labels',
+            name: '',
+            checked: Boolean(draft.config?.show_labels),
+            text: 'Show labels',
+        }).replace('<input', '<input data-bind="query-chart-draft-config:show_labels"')}
       </div>
     `;
-  } else if (draft.chartType === "scatter") {
-    chartSpecificFields = `
+    } else if (draft.chartType === 'scatter') {
+        chartSpecificFields = `
       <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
         ${renderSelectField({
-          label: "X Column",
-          value: draft.config?.x_column ?? "",
-          options: columnOptions,
-          bind: "query-chart-draft-config:x_column",
+            label: 'X Column',
+            value: draft.config?.x_column ?? '',
+            options: columnOptions,
+            bind: 'query-chart-draft-config:x_column',
         })}
         ${renderSelectField({
-          label: "Y Column",
-          value: draft.config?.y_column ?? "",
-          options: columnOptions,
-          bind: "query-chart-draft-config:y_column",
+            label: 'Y Column',
+            value: draft.config?.y_column ?? '',
+            options: columnOptions,
+            bind: 'query-chart-draft-config:y_column',
         })}
       </div>
       <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
         ${renderSelectField({
-          label: "Size Column",
-          value: draft.config?.size_column ?? "",
-          options: optionalColumnOptions,
-          bind: "query-chart-draft-config:size_column",
+            label: 'Size Column',
+            value: draft.config?.size_column ?? '',
+            options: optionalColumnOptions,
+            bind: 'query-chart-draft-config:size_column',
         })}
         ${renderSelectField({
-          label: "Series Column",
-          value: draft.config?.series_column ?? "",
-          options: optionalColumnOptions,
-          bind: "query-chart-draft-config:series_column",
+            label: 'Series Column',
+            value: draft.config?.series_column ?? '',
+            options: optionalColumnOptions,
+            bind: 'query-chart-draft-config:series_column',
         })}
         ${renderCheckboxField({
-          label: "Show legend",
-          name: "",
-          checked: Boolean(draft.config?.show_legend),
-          text: "Show legend",
-        }).replace("<input", '<input data-bind="query-chart-draft-config:show_legend"')}
+            label: 'Show legend',
+            name: '',
+            checked: Boolean(draft.config?.show_legend),
+            text: 'Show legend',
+        }).replace('<input', '<input data-bind="query-chart-draft-config:show_legend"')}
       </div>
     `;
-  }
+    }
 
-  return `
+    return `
     <form class="space-y-5" data-form="save-query-chart">
       ${renderField({
-        label: "Chart Name",
-        name: "chartName",
-        value: draft.name ?? "",
-      }).replace("<input", '<input data-bind="query-chart-draft:name"')}
+          label: 'Chart Name',
+          name: 'chartName',
+          value: draft.name ?? '',
+      }).replace('<input', '<input data-bind="query-chart-draft:name"')}
       ${renderSelectField({
-        label: "Chart Type",
-        value: draft.chartType ?? "bar",
-        options: chartTypeOptions,
-        bind: "query-chart-draft:chartType",
+          label: 'Chart Type',
+          value: draft.chartType ?? 'bar',
+          options: chartTypeOptions,
+          bind: 'query-chart-draft:chartType',
       })}
       ${chartSpecificFields}
       ${
-        analysis
-          ? `
+          analysis
+              ? `
             <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-4">
               <div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
                 Result Columns
               </div>
               <div class="mt-3 flex flex-wrap gap-2">
                 ${analysis.columns
-                  .map(
-                    (column) => `
+                    .map(
+                        column => `
                       <span class="border border-outline-variant/15 bg-surface-container px-2 py-1 text-[10px] font-mono uppercase tracking-[0.12em] text-on-surface-variant/70">
                         ${escapeHtml(column.name)} • ${escapeHtml(column.type)}
                       </span>
-                    `
-                  )
-                  .join("")}
+                    `,
+                    )
+                    .join('')}
               </div>
             </div>
           `
-          : ""
+              : ''
       }
       ${renderError(modal.error)}
       <div class="flex items-center justify-between gap-3 pt-2">
@@ -799,7 +895,7 @@ function renderChartEditorForm(modal, state) {
           class="standard-button"
           type="submit"
         >
-          ${modal.submitting ? "Saving..." : draft.mode === "edit" ? "Save Chart" : "Create Chart"}
+          ${modal.submitting ? 'Saving...' : draft.mode === 'edit' ? 'Save Chart' : 'Create Chart'}
         </button>
       </div>
     </form>
@@ -807,103 +903,103 @@ function renderChartEditorForm(modal, state) {
 }
 
 function renderDeleteChartForm(modal) {
-  return [
-    '<form class="space-y-5" data-form="delete-query-chart"><div class="space-y-3">',
-    '<p class="text-sm leading-7 text-on-surface">Delete chart <span class="font-bold text-primary-container">',
-    escapeHtml(modal.chartName ?? "Chart"),
-    "</span>?</p>",
-    '<p class="text-sm leading-7 text-on-surface-variant/65">The linked query-history entry stays intact. Only this chart definition is removed.</p>',
-    "</div>",
-    renderError(modal.error),
-    '<div class="flex items-center justify-between gap-3 pt-2">',
-    '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
-    '<button class="delete-button" type="submit">',
-    modal.submitting ? "Deleting..." : "Delete Chart",
-    "</button></div></form>",
-  ].join("");
+    return [
+        '<form class="space-y-5" data-form="delete-query-chart"><div class="space-y-3">',
+        '<p class="text-sm leading-7 text-on-surface">Delete chart <span class="font-bold text-primary-container">',
+        escapeHtml(modal.chartName ?? 'Chart'),
+        '</span>?</p>',
+        '<p class="text-sm leading-7 text-on-surface-variant/65">The linked query-history entry stays intact. Only this chart definition is removed.</p>',
+        '</div>',
+        renderError(modal.error),
+        '<div class="flex items-center justify-between gap-3 pt-2">',
+        '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
+        '<button class="delete-button" type="submit">',
+        modal.submitting ? 'Deleting...' : 'Delete Chart',
+        '</button></div></form>',
+    ].join('');
 }
 
 function renderDeleteQueryHistoryForm(modal) {
-  return [
-    '<form class="space-y-5" data-form="delete-query-history-confirm"><div class="space-y-3">',
-    '<p class="text-sm leading-7 text-on-surface">Delete query <span class="font-bold text-primary-container">',
-    escapeHtml(modal.queryTitle ?? "SQL query"),
-    "</span>?</p>",
-    '<p class="text-sm leading-7 text-on-surface-variant/65">This removes the query-history entry and all recorded runs linked to it.</p>',
-    "</div>",
-    renderError(modal.error),
-    '<div class="flex items-center justify-between gap-3 pt-2">',
-    '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
-    '<button class="delete-button" type="submit">',
-    modal.submitting ? "Deleting..." : "Delete Query",
-    "</button></div></form>",
-  ].join("");
+    return [
+        '<form class="space-y-5" data-form="delete-query-history-confirm"><div class="space-y-3">',
+        '<p class="text-sm leading-7 text-on-surface">Delete query <span class="font-bold text-primary-container">',
+        escapeHtml(modal.queryTitle ?? 'SQL query'),
+        '</span>?</p>',
+        '<p class="text-sm leading-7 text-on-surface-variant/65">This removes the query-history entry and all recorded runs linked to it.</p>',
+        '</div>',
+        renderError(modal.error),
+        '<div class="flex items-center justify-between gap-3 pt-2">',
+        '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
+        '<button class="delete-button" type="submit">',
+        modal.submitting ? 'Deleting...' : 'Delete Query',
+        '</button></div></form>',
+    ].join('');
 }
 
 function renderDeleteDocumentForm(modal) {
-  return [
-    '<form class="space-y-5" data-form="delete-document-confirm"><div class="space-y-3">',
-    '<p class="text-sm leading-7 text-on-surface">Delete document <span class="font-bold text-primary-container">',
-    escapeHtml(modal.filename ?? "document"),
-    "</span>?</p>",
-    '<p class="text-sm leading-7 text-on-surface-variant/65">This removes the Markdown document from the active database document folder.</p>',
-    '<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">',
-    formatNumber(modal.contentLength ?? 0),
-    " chars</div>",
-    "</div>",
-    renderError(modal.error),
-    '<div class="flex items-center justify-between gap-3 pt-2">',
-    '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
-    '<button class="delete-button" type="submit">',
-    modal.submitting ? "Deleting..." : "Delete Document",
-    "</button></div></form>",
-  ].join("");
+    return [
+        '<form class="space-y-5" data-form="delete-document-confirm"><div class="space-y-3">',
+        '<p class="text-sm leading-7 text-on-surface">Delete document <span class="font-bold text-primary-container">',
+        escapeHtml(modal.filename ?? 'document'),
+        '</span>?</p>',
+        '<p class="text-sm leading-7 text-on-surface-variant/65">This removes the Markdown document from the active database document folder.</p>',
+        '<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">',
+        formatNumber(modal.contentLength ?? 0),
+        ' chars</div>',
+        '</div>',
+        renderError(modal.error),
+        '<div class="flex items-center justify-between gap-3 pt-2">',
+        '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
+        '<button class="delete-button" type="submit">',
+        modal.submitting ? 'Deleting...' : 'Delete Document',
+        '</button></div></form>',
+    ].join('');
 }
 
 export function renderDeleteApiTokenForm(modal) {
-  return [
-    '<form class="space-y-5" data-form="delete-api-token-confirm"><div class="space-y-3">',
-    '<p class="text-sm leading-7 text-on-surface">Delete API token <span class="font-bold text-primary-container">',
-    escapeHtml(modal.tokenName ?? "API token"),
-    "</span>?</p>",
-    '<p class="text-sm leading-7 text-on-surface-variant/65">Requests using this token will immediately lose access to <span class="font-semibold text-on-surface">',
-    escapeHtml(modal.databaseLabel ?? "the active database"),
-    ".</span></p>",
-    '<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 font-mono text-[10px] text-on-surface-variant/55">',
-    escapeHtml(modal.tokenPrefix ?? ""),
-    "...</div>",
-    "</div>",
-    renderError(modal.error),
-    '<div class="flex items-center justify-between gap-3 pt-2">',
-    '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
-    '<button class="delete-button" type="submit">',
-    modal.submitting ? "Deleting..." : "Delete Token",
-    "</button></div></form>",
-  ].join("");
+    return [
+        '<form class="space-y-5" data-form="delete-api-token-confirm"><div class="space-y-3">',
+        '<p class="text-sm leading-7 text-on-surface">Delete API token <span class="font-bold text-primary-container">',
+        escapeHtml(modal.tokenName ?? 'API token'),
+        '</span>?</p>',
+        '<p class="text-sm leading-7 text-on-surface-variant/65">Requests using this token will immediately lose access to <span class="font-semibold text-on-surface">',
+        escapeHtml(modal.databaseLabel ?? 'the active database'),
+        '.</span></p>',
+        '<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 font-mono text-[10px] text-on-surface-variant/55">',
+        escapeHtml(modal.tokenPrefix ?? ''),
+        '...</div>',
+        '</div>',
+        renderError(modal.error),
+        '<div class="flex items-center justify-between gap-3 pt-2">',
+        '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
+        '<button class="delete-button" type="submit">',
+        modal.submitting ? 'Deleting...' : 'Delete Token',
+        '</button></div></form>',
+    ].join('');
 }
 
 function getDocumentInsertQueryTitle(query) {
-  return query?.displayTitle || query?.title || query?.previewSql || query?.rawSql || "Saved query";
+    return query?.displayTitle || query?.title || query?.previewSql || query?.rawSql || 'Saved query';
 }
 
 function getSelectedDocumentInsertQuery(modal) {
-  const selectedHistoryId = String(modal.selectedHistoryId ?? "");
+    const selectedHistoryId = String(modal.selectedHistoryId ?? '');
 
-  return (modal.queries ?? []).find((query) => String(query.id) === selectedHistoryId) ?? null;
+    return (modal.queries ?? []).find(query => String(query.id) === selectedHistoryId) ?? null;
 }
 
 function renderDocumentInsertQuerySelect(modal, emptyText) {
-  const queries = modal.queries ?? [];
+    const queries = modal.queries ?? [];
 
-  if (modal.loading) {
-    return '<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface-variant/65">Loading saved queries...</div>';
-  }
+    if (modal.loading) {
+        return '<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface-variant/65">Loading saved queries...</div>';
+    }
 
-  if (!queries.length) {
-    return `<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface-variant/65">${escapeHtml(emptyText)}</div>`;
-  }
+    if (!queries.length) {
+        return `<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface-variant/65">${escapeHtml(emptyText)}</div>`;
+    }
 
-  return `
+    return `
     <label class="block space-y-2">
       <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
         Saved Query
@@ -914,54 +1010,53 @@ function renderDocumentInsertQuerySelect(modal, emptyText) {
         name="historyId"
       >
         ${queries
-          .map(
-            (query) => `
+            .map(
+                query => `
               <option
                 value="${escapeHtml(query.id)}"
-                ${String(query.id) === String(modal.selectedHistoryId) ? "selected" : ""}
+                ${String(query.id) === String(modal.selectedHistoryId) ? 'selected' : ''}
               >
                 ${escapeHtml(getDocumentInsertQueryTitle(query))}
               </option>
-            `
-          )
-          .join("")}
+            `,
+            )
+            .join('')}
       </select>
     </label>
   `;
 }
 
 function renderDocumentInsertQueryPreview(query) {
-  if (!query) {
-    return "";
-  }
+    if (!query) {
+        return '';
+    }
 
-  return `
+    return `
     <div class="space-y-2">
       <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
         Query Preview
       </div>
       <pre class="max-h-44 overflow-auto border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 font-mono text-xs leading-6 text-on-surface-variant/75 custom-scrollbar">${escapeHtml(
-        query.rawSql || query.previewSql || ""
+          query.rawSql || query.previewSql || '',
       )}</pre>
     </div>
   `;
 }
 
 function renderDocumentInsertTableForm(modal) {
-  const selectedQuery = getSelectedDocumentInsertQuery(modal);
-  const disabledAttribute = modal.loading || modal.submitting || !(modal.queries ?? []).length
-    ? 'disabled aria-disabled="true"'
-    : "";
+    const selectedQuery = getSelectedDocumentInsertQuery(modal);
+    const disabledAttribute =
+        modal.loading || modal.submitting || !(modal.queries ?? []).length ? 'disabled aria-disabled="true"' : '';
 
-  return `
+    return `
     <form class="space-y-5" data-form="document-insert-table">
-      ${renderDocumentInsertQuerySelect(modal, "No saved queries are available for this database.")}
+      ${renderDocumentInsertQuerySelect(modal, 'No saved queries are available for this database.')}
       ${renderDocumentInsertQueryPreview(selectedQuery)}
       ${renderError(modal.error)}
       <div class="flex items-center justify-between gap-3 pt-2">
         <button class="standard-button" data-action="close-modal" type="button">Cancel</button>
         <button class="signature-button" type="submit" ${disabledAttribute}>
-          ${modal.submitting ? "Inserting..." : "Insert Table"}
+          ${modal.submitting ? 'Inserting...' : 'Insert Table'}
         </button>
       </div>
     </form>
@@ -969,34 +1064,33 @@ function renderDocumentInsertTableForm(modal) {
 }
 
 function renderDocumentInsertNoteForm(modal) {
-  const selectedQuery = getSelectedDocumentInsertQuery(modal);
-  const note = String(selectedQuery?.notes ?? "").trim();
-  const disabledAttribute = modal.loading || modal.submitting || !(modal.queries ?? []).length
-    ? 'disabled aria-disabled="true"'
-    : "";
+    const selectedQuery = getSelectedDocumentInsertQuery(modal);
+    const note = String(selectedQuery?.notes ?? '').trim();
+    const disabledAttribute =
+        modal.loading || modal.submitting || !(modal.queries ?? []).length ? 'disabled aria-disabled="true"' : '';
 
-  return `
+    return `
     <form class="space-y-5" data-form="document-insert-note">
-      ${renderDocumentInsertQuerySelect(modal, "No saved queries with notes are available for this database.")}
+      ${renderDocumentInsertQuerySelect(modal, 'No saved queries with notes are available for this database.')}
       ${
-        note
-          ? `
+          note
+              ? `
             <div class="space-y-2">
               <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
                 Note Preview
               </div>
               <pre class="max-h-64 overflow-auto whitespace-pre-wrap border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-sm leading-6 text-on-surface custom-scrollbar">${escapeHtml(
-                note
+                  note,
               )}</pre>
             </div>
           `
-          : ""
+              : ''
       }
       ${renderError(modal.error)}
       <div class="flex items-center justify-between gap-3 pt-2">
         <button class="standard-button" data-action="close-modal" type="button">Cancel</button>
         <button class="signature-button" type="submit" ${disabledAttribute}>
-          ${modal.submitting ? "Inserting..." : "Insert Note"}
+          ${modal.submitting ? 'Inserting...' : 'Insert Note'}
         </button>
       </div>
     </form>
@@ -1004,48 +1098,48 @@ function renderDocumentInsertNoteForm(modal) {
 }
 
 function renderQueryExportPreview(lines = []) {
-  return lines.map((line) => `<span class="block whitespace-pre">${escapeHtml(line)}</span>`).join("");
+    return lines.map(line => `<span class="block whitespace-pre">${escapeHtml(line)}</span>`).join('');
 }
 
 function getExportOptions() {
-  return [
-    { label: "CSV", format: "csv", icon: "table_rows", meta: ".csv", preview: ["id,name", "1,Acme"] },
-    { label: "TSV", format: "tsv", icon: "view_column", meta: ".tsv", preview: ["id\tname", "1\tAcme"] },
-    {
-      label: "Markdown",
-      format: "md",
-      icon: "article",
-      meta: ".md",
-      preview: ["| id | name |", "| --- | --- |"],
-    },
-    {
-      label: "JSON",
-      format: "json",
-      icon: "data_object",
-      meta: ".json",
-      preview: ['[', '  {"id":1,"name":"Acme"}', ']'],
-    },
-    {
-      label: "Parquet",
-      format: "parquet",
-      icon: "dataset",
-      meta: ".parquet",
-      preview: ["columnar binary", "typed row groups"],
-    },
-    {
-      label: "Duplicate",
-      format: "table",
-      icon: "table_chart",
-      meta: "as table",
-      preview: ["columns inferred", "rows prefilled"],
-    },
-  ];
+    return [
+        { label: 'CSV', format: 'csv', icon: 'table_rows', meta: '.csv', preview: ['id,name', '1,Acme'] },
+        { label: 'TSV', format: 'tsv', icon: 'view_column', meta: '.tsv', preview: ['id\tname', '1\tAcme'] },
+        {
+            label: 'Markdown',
+            format: 'md',
+            icon: 'article',
+            meta: '.md',
+            preview: ['| id | name |', '| --- | --- |'],
+        },
+        {
+            label: 'JSON',
+            format: 'json',
+            icon: 'data_object',
+            meta: '.json',
+            preview: ['[', '  {"id":1,"name":"Acme"}', ']'],
+        },
+        {
+            label: 'Parquet',
+            format: 'parquet',
+            icon: 'dataset',
+            meta: '.parquet',
+            preview: ['columnar binary', 'typed row groups'],
+        },
+        {
+            label: 'Duplicate',
+            format: 'table',
+            icon: 'table_chart',
+            meta: 'as table',
+            preview: ['columns inferred', 'rows prefilled'],
+        },
+    ];
 }
 
 function renderTextExportModal(modal, action) {
-  const disabledAttribute = modal.submitting ? 'disabled aria-disabled="true"' : "";
+    const disabledAttribute = modal.submitting ? 'disabled aria-disabled="true"' : '';
 
-  return `
+    return `
     <div class="space-y-5" data-export-modal>
       <label class="block space-y-2">
         <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
@@ -1057,14 +1151,14 @@ function renderTextExportModal(modal, action) {
           name="filename"
           spellcheck="false"
           type="text"
-          value="${escapeHtml(modal.filename ?? "")}"
+          value="${escapeHtml(modal.filename ?? '')}"
           ${disabledAttribute}
         />
       </label>
       <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
         ${getExportOptions()
-          .map(
-            (option) => `
+            .map(
+                option => `
               <button
                 class="group flex min-h-36 flex-col justify-between border border-outline-variant/20 bg-surface-container-low px-5 py-5 text-left text-on-surface transition-colors hover:border-primary-container/45 hover:bg-surface-container-high focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-container disabled:cursor-wait disabled:opacity-60"
                 data-action="${escapeHtml(action)}"
@@ -1095,8 +1189,8 @@ function renderTextExportModal(modal, action) {
                 </span>
               </button>
             `,
-          )
-          .join("")}
+            )
+            .join('')}
       </div>
       ${renderError(modal.error)}
       <div class="flex justify-start">
@@ -1109,47 +1203,49 @@ function renderTextExportModal(modal, action) {
 }
 
 function renderQueryExportModal(modal) {
-  return renderTextExportModal(modal, "export-query-format");
+    return renderTextExportModal(modal, 'export-query-format');
 }
 
 function renderDataExportModal(modal) {
-  return renderTextExportModal(modal, "export-data-format");
+    return renderTextExportModal(modal, 'export-data-format');
 }
 
 function getCopyColumnResult(state, modal) {
-  return modal.scope === "charts" ? state.charts.result : state.editor.result;
+    return modal.scope === 'charts' ? state.charts.result : state.editor.result;
 }
 
 function renderCopyColumnPreview(modal, state) {
-  const result = getCopyColumnResult(state, modal);
-  const isMarkdownTodo = isMarkdownTodoCopyColumnMode(modal.copyMode);
-  const separator = Boolean(modal.lineBreaks) && !isMarkdownTodoCopyColumnMode(modal.copyMode)
-    ? "\n"
-    : String(modal.separator ?? ",");
-  const wrapper = String(modal.wrapper ?? '"');
-  const preview = isMarkdownTodo
-    ? modal.editedText ?? buildCopyColumnText({
-        result,
-        columnName: modal.columnName,
-        copyMode: modal.copyMode,
-        separator: "\n",
-        wrapper,
-      }).text
-    : buildCopyColumnPreviewText({
-        result,
-        columnName: modal.columnName,
-        copyMode: modal.copyMode,
-        separator,
-        wrapper,
-        maxRows: 4,
-      });
-
-  if (!preview && !isMarkdownTodo) {
-    return "";
-  }
-
-  if (isMarkdownTodo) {
-    return `
+    const result = getCopyColumnResult(state, modal);
+    const isMarkdownTodo = isMarkdownTodoCopyColumnMode(modal.copyMode);
+    const separator =
+        Boolean(modal.lineBreaks) && !isMarkdownTodoCopyColumnMode(modal.copyMode)
+            ? '\n'
+            : String(modal.separator ?? ',');
+    const wrapper = String(modal.wrapper ?? '"');
+    const preview = isMarkdownTodo
+        ? (modal.editedText ??
+          buildCopyColumnText({
+              result,
+              columnName: modal.columnName,
+              copyMode: modal.copyMode,
+              separator: '\n',
+              wrapper,
+          }).text)
+        : buildCopyColumnPreviewText({
+              result,
+              columnName: modal.columnName,
+              copyMode: modal.copyMode,
+              separator,
+              wrapper,
+              maxRows: 4,
+          });
+
+    if (!preview && !isMarkdownTodo) {
+        return '';
+    }
+
+    if (isMarkdownTodo) {
+        return `
       <label class="block space-y-2">
         <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
           Editable Preview
@@ -1161,9 +1257,9 @@ function renderCopyColumnPreview(modal, state) {
         >${escapeHtml(preview)}</textarea>
       </label>
     `;
-  }
+    }
 
-  return `
+    return `
     <div class="space-y-2">
       <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
         Preview
@@ -1174,15 +1270,15 @@ function renderCopyColumnPreview(modal, state) {
 }
 
 function renderCopyColumnLineBreaksField({ checked = false, disabled = false } = {}) {
-  return `
+    return `
     <label class="block space-y-2">
       <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
         Format
       </span>
-      <span class="standard-checkbox ${disabled ? "is-disabled" : ""}">
+      <span class="standard-checkbox ${disabled ? 'is-disabled' : ''}">
         <input
-          ${checked ? "checked" : ""}
-          ${disabled ? "disabled" : ""}
+          ${checked ? 'checked' : ''}
+          ${disabled ? 'disabled' : ''}
           data-bind="copy-column-format-field"
           data-field="lineBreaks"
           name="lineBreaks"
@@ -1194,8 +1290,8 @@ function renderCopyColumnLineBreaksField({ checked = false, disabled = false } =
   `;
 }
 
-function renderCopyColumnFormatField({ label, name, value = "" }) {
-  return `
+function renderCopyColumnFormatField({ label, name, value = '' }) {
+    return `
     <label class="block space-y-2">
       <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
         ${escapeHtml(label)}
@@ -1213,49 +1309,49 @@ function renderCopyColumnFormatField({ label, name, value = "" }) {
 }
 
 export function renderCopyColumnModal(modal, state) {
-  const result = getCopyColumnResult(state, modal);
-  const rows = result?.rows ?? [];
-  const valueCount = modal.copyMode === "first-10" ? Math.min(rows.length, 10) : rows.length;
-  const disabledAttribute = modal.submitting ? 'disabled aria-disabled="true"' : "";
-  const exportMetadata = getCopyColumnExportMetadata(modal.copyMode);
-  const isMarkdownTodo = isMarkdownTodoCopyColumnMode(modal.copyMode);
-  const lineBreaks = isMarkdownTodo || Boolean(modal.lineBreaks);
-  const formatFieldsMarkup = isMarkdownTodo
-    ? renderCopyColumnLineBreaksField({
-        checked: true,
-        disabled: true,
-      })
-    : `
+    const result = getCopyColumnResult(state, modal);
+    const rows = result?.rows ?? [];
+    const valueCount = modal.copyMode === 'first-10' ? Math.min(rows.length, 10) : rows.length;
+    const disabledAttribute = modal.submitting ? 'disabled aria-disabled="true"' : '';
+    const exportMetadata = getCopyColumnExportMetadata(modal.copyMode);
+    const isMarkdownTodo = isMarkdownTodoCopyColumnMode(modal.copyMode);
+    const lineBreaks = isMarkdownTodo || Boolean(modal.lineBreaks);
+    const formatFieldsMarkup = isMarkdownTodo
+        ? renderCopyColumnLineBreaksField({
+              checked: true,
+              disabled: true,
+          })
+        : `
       <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
         ${renderCopyColumnFormatField({
-          label: "Separator",
-          name: "separator",
-          value: modal.separator ?? ",",
+            label: 'Separator',
+            name: 'separator',
+            value: modal.separator ?? ',',
         })}
         ${renderCopyColumnFormatField({
-          label: "Wrapper",
-          name: "wrapper",
-          value: modal.wrapper ?? '"',
+            label: 'Wrapper',
+            name: 'wrapper',
+            value: modal.wrapper ?? '"',
         })}
         ${renderCopyColumnLineBreaksField({
-          checked: lineBreaks,
+            checked: lineBreaks,
         })}
       </div>
     `;
 
-  return `
+    return `
     <form class="space-y-5" data-form="copy-column">
-      <input name="scope" type="hidden" value="${escapeHtml(modal.scope ?? "editor")}" />
-      <input name="columnName" type="hidden" value="${escapeHtml(modal.columnName ?? "")}" />
-      <input name="copyMode" type="hidden" value="${escapeHtml(modal.copyMode ?? "column")}" />
+      <input name="scope" type="hidden" value="${escapeHtml(modal.scope ?? 'editor')}" />
+      <input name="columnName" type="hidden" value="${escapeHtml(modal.columnName ?? '')}" />
+      <input name="copyMode" type="hidden" value="${escapeHtml(modal.copyMode ?? 'column')}" />
       <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">
         <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
           Column
         </div>
         <div class="mt-2 flex min-w-0 items-center justify-between gap-4">
           <code class="min-w-0 truncate font-mono text-sm text-primary-container" title="${escapeHtml(
-            modal.columnName ?? ""
-          )}">${escapeHtml(modal.columnName ?? "")}</code>
+              modal.columnName ?? '',
+          )}">${escapeHtml(modal.columnName ?? '')}</code>
           <span class="shrink-0 font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/50">
             ${escapeHtml(getCopyColumnActionLabel(modal.copyMode))} · ${formatNumber(valueCount)}
           </span>
@@ -1281,11 +1377,11 @@ export function renderCopyColumnModal(modal, state) {
             value="export"
             ${disabledAttribute}
           >
-            ${modal.submitting ? "Working..." : `Export as ${exportMetadata.extension.toUpperCase()}`}
+            ${modal.submitting ? 'Working...' : `Export as ${exportMetadata.extension.toUpperCase()}`}
           </button>
           ${
-            isMarkdownTodo
-              ? `
+              isMarkdownTodo
+                  ? `
           <button
             class="standard-button"
             name="intent"
@@ -1293,10 +1389,10 @@ export function renderCopyColumnModal(modal, state) {
             value="document"
             ${disabledAttribute}
           >
-            ${modal.submitting ? "Working..." : "Export to document folder"}
+            ${modal.submitting ? 'Working...' : 'Export to document folder'}
           </button>
           `
-              : ""
+                  : ''
           }
           <button
             class="signature-button"
@@ -1305,7 +1401,7 @@ export function renderCopyColumnModal(modal, state) {
             value="copy"
             ${disabledAttribute}
           >
-            ${modal.submitting ? "Working..." : "Copy"}
+            ${modal.submitting ? 'Working...' : 'Copy'}
           </button>
         </div>
       </div>
@@ -1314,59 +1410,60 @@ export function renderCopyColumnModal(modal, state) {
 }
 
 function getTableDesignerUniqueConstraintTypeLabel(constraint) {
-  if (constraint.partial) {
-    return "Partial unique index";
-  }
+    if (constraint.partial) {
+        return 'Partial unique index';
+    }
 
-  if ((constraint.columns?.length ?? 0) > 1) {
-    return "Multi-column unique";
-  }
+    if ((constraint.columns?.length ?? 0) > 1) {
+        return 'Multi-column unique';
+    }
 
-  return "Unique constraint";
+    return 'Unique constraint';
 }
 
 function renderTableDesignerUniqueConstraintExpression(constraint) {
-  const expression = String(constraint.expression || constraint.sql || "").trim();
+    const expression = String(constraint.expression || constraint.sql || '').trim();
 
-  if (expression) {
-    return expression;
-  }
+    if (expression) {
+        return expression;
+    }
 
-  const columns = (constraint.columns ?? []).map((column) => column.name).filter(Boolean);
-  return columns.length ? `UNIQUE (${columns.join(", ")})` : "UNIQUE constraint";
+    const columns = (constraint.columns ?? []).map(column => column.name).filter(Boolean);
+    return columns.length ? `UNIQUE (${columns.join(', ')})` : 'UNIQUE constraint';
 }
 
 function renderTableDesignerCheckConstraintExpression(constraint) {
-  return String(constraint.expression || "").trim() || "CHECK constraint";
+    return String(constraint.expression || '').trim() || 'CHECK constraint';
 }
 
 function normalizeTableDesignerConstraintColumnName(name) {
-  return String(name ?? "").trim().toLowerCase();
+    return String(name ?? '')
+        .trim()
+        .toLowerCase();
 }
 
 function tableDesignerConstraintIncludesColumn(constraint, columnName) {
-  const normalizedColumn = normalizeTableDesignerConstraintColumnName(columnName);
+    const normalizedColumn = normalizeTableDesignerConstraintColumnName(columnName);
 
-  if (!normalizedColumn) {
-    return false;
-  }
+    if (!normalizedColumn) {
+        return false;
+    }
 
-  return (constraint.columns ?? []).some(
-    (constraintColumn) =>
-      normalizeTableDesignerConstraintColumnName(constraintColumn.name) === normalizedColumn
-  );
+    return (constraint.columns ?? []).some(
+        constraintColumn => normalizeTableDesignerConstraintColumnName(constraintColumn.name) === normalizedColumn,
+    );
 }
 
 function renderTableDesignerUniqueConstraintEditor(constraint) {
-  const columns = (constraint.columns ?? []).map((column) => column.name).filter(Boolean);
+    const columns = (constraint.columns ?? []).map(column => column.name).filter(Boolean);
 
-  return `
+    return `
     <article class="table-designer-constraint-editor">
       <div class="table-designer-constraint-editor__header">
         <div class="min-w-0">
           <div class="table-designer-constraint-editor__type">
             ${escapeHtml(getTableDesignerUniqueConstraintTypeLabel(constraint))}
-            ${constraint.origin ? ` // origin ${escapeHtml(constraint.origin)}` : ""}
+            ${constraint.origin ? ` // origin ${escapeHtml(constraint.origin)}` : ''}
           </div>
           <input
             class="table-designer-field table-designer-constraint-editor__name"
@@ -1376,19 +1473,19 @@ function renderTableDesignerUniqueConstraintEditor(constraint) {
             data-field="name"
             spellcheck="false"
             type="text"
-            value="${escapeHtml(constraint.name || "UNIQUE constraint")}"
+            value="${escapeHtml(constraint.name || 'UNIQUE constraint')}"
           />
         </div>
         <div class="status-badge status-badge--muted">Rebuild</div>
       </div>
       ${
-        columns.length
-          ? `
+          columns.length
+              ? `
             <div class="table-designer-constraint__columns">
-              ${columns.map((column) => `<span>${escapeHtml(column)}</span>`).join("")}
+              ${columns.map(column => `<span>${escapeHtml(column)}</span>`).join('')}
             </div>
           `
-          : ""
+              : ''
       }
       <textarea
         class="table-designer-constraint-editor__sql custom-scrollbar"
@@ -1403,20 +1500,20 @@ function renderTableDesignerUniqueConstraintEditor(constraint) {
 }
 
 function renderTableDesignerCheckConstraintEditor(constraint) {
-  const columns = constraint.columns ?? [];
-  const allowedValues = columns.flatMap((column) =>
-    (column.allowedValues ?? []).map((value) => ({
-      columnName: column.name,
-      value,
-    }))
-  );
-
-  return `
+    const columns = constraint.columns ?? [];
+    const allowedValues = columns.flatMap(column =>
+        (column.allowedValues ?? []).map(value => ({
+            columnName: column.name,
+            value,
+        })),
+    );
+
+    return `
     <article class="table-designer-constraint-editor">
       <div class="table-designer-constraint-editor__header">
         <div class="min-w-0">
           <div class="table-designer-constraint-editor__type">
-            ${columns.length ? escapeHtml(columns.map((column) => column.name).join(", ")) : "Table check"}
+            ${columns.length ? escapeHtml(columns.map(column => column.name).join(', ')) : 'Table check'}
           </div>
           <input
             class="table-designer-field table-designer-constraint-editor__name"
@@ -1426,25 +1523,25 @@ function renderTableDesignerCheckConstraintEditor(constraint) {
             data-field="name"
             spellcheck="false"
             type="text"
-            value="${escapeHtml(constraint.name || "CHECK constraint")}"
+            value="${escapeHtml(constraint.name || 'CHECK constraint')}"
           />
         </div>
         <div class="status-badge status-badge--muted">Rebuild</div>
       </div>
       ${
-        allowedValues.length
-          ? `
+          allowedValues.length
+              ? `
             <div class="table-designer-constraint__values custom-scrollbar">
               ${allowedValues
-                .map(
-                  (entry) => `
+                  .map(
+                      entry => `
                     <span title="${escapeHtml(entry.columnName)}">${escapeHtml(entry.value)}</span>
-                  `
-                )
-                .join("")}
+                  `,
+                  )
+                  .join('')}
             </div>
           `
-          : ""
+              : ''
       }
       <textarea
         class="table-designer-constraint-editor__sql custom-scrollbar"
@@ -1459,26 +1556,26 @@ function renderTableDesignerCheckConstraintEditor(constraint) {
 }
 
 function renderTableDesignerConstraintSection({ title, count, emptyText, body }) {
-  return `
+    return `
     <section class="table-designer-constraints-modal__section">
       <div class="table-designer-constraints-modal__section-header">
         <div class="table-designer-constraints-modal__section-title">${escapeHtml(title)}</div>
         <div class="status-badge status-badge--muted">${formatNumber(count)}</div>
       </div>
       ${
-        count
-          ? `<div class="table-designer-constraints__list">${body}</div>`
-          : `<div class="table-designer-constraints-modal__empty">${escapeHtml(emptyText)}</div>`
+          count
+              ? `<div class="table-designer-constraints__list">${body}</div>`
+              : `<div class="table-designer-constraints-modal__empty">${escapeHtml(emptyText)}</div>`
       }
     </section>
   `;
 }
 
 function renderTableDesignerConstraintsModal(modal, state) {
-  const draft = state.tableDesigner?.draft;
+    const draft = state.tableDesigner?.draft;
 
-  if (!draft) {
-    return `
+    if (!draft) {
+        return `
       <div class="table-designer-constraints-modal__empty">
         No active table designer draft.
       </div>
@@ -1486,62 +1583,60 @@ function renderTableDesignerConstraintsModal(modal, state) {
         <button class="standard-button" data-action="close-modal" type="button">Close</button>
       </div>
     `;
-  }
-
-  const selectedColumn = modal.columnId
-    ? (draft.columns ?? []).find((column) => column.id === modal.columnId)
-    : null;
-  const selectedColumnName = String(modal.columnName ?? selectedColumn?.name ?? "").trim();
-  const hasSelectedColumn = Boolean(modal.columnId || selectedColumnName);
-  const selectedColumnLabel = selectedColumnName || "Unnamed column";
-  const allUniqueConstraints = draft.mode === "edit" ? draft.uniqueConstraints ?? [] : [];
-  const allCheckConstraints = draft.mode === "edit" ? draft.checkConstraints ?? [] : [];
-  const uniqueConstraints = hasSelectedColumn
-    ? allUniqueConstraints.filter((constraint) =>
-        tableDesignerConstraintIncludesColumn(constraint, selectedColumnName)
-      )
-    : allUniqueConstraints;
-  const checkConstraints = hasSelectedColumn
-    ? allCheckConstraints.filter((constraint) =>
-        tableDesignerConstraintIncludesColumn(constraint, selectedColumnName)
-      )
-    : allCheckConstraints;
-  const totalCount = uniqueConstraints.length + checkConstraints.length;
-
-  return `
+    }
+
+    const selectedColumn = modal.columnId ? (draft.columns ?? []).find(column => column.id === modal.columnId) : null;
+    const selectedColumnName = String(modal.columnName ?? selectedColumn?.name ?? '').trim();
+    const hasSelectedColumn = Boolean(modal.columnId || selectedColumnName);
+    const selectedColumnLabel = selectedColumnName || 'Unnamed column';
+    const allUniqueConstraints = draft.mode === 'edit' ? (draft.uniqueConstraints ?? []) : [];
+    const allCheckConstraints = draft.mode === 'edit' ? (draft.checkConstraints ?? []) : [];
+    const uniqueConstraints = hasSelectedColumn
+        ? allUniqueConstraints.filter(constraint =>
+              tableDesignerConstraintIncludesColumn(constraint, selectedColumnName),
+          )
+        : allUniqueConstraints;
+    const checkConstraints = hasSelectedColumn
+        ? allCheckConstraints.filter(constraint =>
+              tableDesignerConstraintIncludesColumn(constraint, selectedColumnName),
+          )
+        : allCheckConstraints;
+    const totalCount = uniqueConstraints.length + checkConstraints.length;
+
+    return `
     <div class="table-designer-constraints-modal">
       <div class="table-designer-constraints-modal__summary">
         <div class="min-w-0">
           <div class="table-designer-constraints-modal__label">Table</div>
-          <code title="${escapeHtml(draft.tableName ?? "")}">${escapeHtml(draft.tableName ?? "")}</code>
+          <code title="${escapeHtml(draft.tableName ?? '')}">${escapeHtml(draft.tableName ?? '')}</code>
         </div>
         ${
-          hasSelectedColumn
-            ? `
+            hasSelectedColumn
+                ? `
               <div class="min-w-0">
                 <div class="table-designer-constraints-modal__label">Column</div>
                 <code title="${escapeHtml(selectedColumnLabel)}">${escapeHtml(selectedColumnLabel)}</code>
               </div>
             `
-            : ""
+                : ''
         }
         <div class="status-badge status-badge--primary">V2 · ${formatNumber(totalCount)}</div>
       </div>
       ${renderTableDesignerConstraintSection({
-        title: "Check constraints",
-        count: checkConstraints.length,
-        emptyText: hasSelectedColumn
-          ? "No check constraints detected for this column."
-          : "No check constraints detected.",
-        body: checkConstraints.map(renderTableDesignerCheckConstraintEditor).join(""),
+          title: 'Check constraints',
+          count: checkConstraints.length,
+          emptyText: hasSelectedColumn
+              ? 'No check constraints detected for this column.'
+              : 'No check constraints detected.',
+          body: checkConstraints.map(renderTableDesignerCheckConstraintEditor).join(''),
       })}
       ${renderTableDesignerConstraintSection({
-        title: hasSelectedColumn ? "Related unique constraints" : "Unique constraints",
-        count: uniqueConstraints.length,
-        emptyText: hasSelectedColumn
-          ? "No related multi-column or partial unique constraints detected."
-          : "No multi-column or partial unique constraints detected.",
-        body: uniqueConstraints.map(renderTableDesignerUniqueConstraintEditor).join(""),
+          title: hasSelectedColumn ? 'Related unique constraints' : 'Unique constraints',
+          count: uniqueConstraints.length,
+          emptyText: hasSelectedColumn
+              ? 'No related multi-column or partial unique constraints detected.'
+              : 'No multi-column or partial unique constraints detected.',
+          body: uniqueConstraints.map(renderTableDesignerUniqueConstraintEditor).join(''),
       })}
       <div class="flex items-center justify-between gap-3 pt-2">
         <button class="standard-button" data-action="close-modal" type="button">Close</button>
@@ -1551,10 +1646,10 @@ function renderTableDesignerConstraintsModal(modal, state) {
 }
 
 function renderCreateMediaTaggingMappingTableForm(modal, state) {
-  const mappingExists = hasDefaultMediaTaggingMappingTable(state.mediaTagging.schemaTables ?? []);
-  const readOnly = Boolean(state.mediaTagging.connection?.readOnly);
+    const mappingExists = hasDefaultMediaTaggingMappingTable(state.mediaTagging.schemaTables ?? []);
+    const readOnly = Boolean(state.mediaTagging.connection?.readOnly);
 
-  return `
+    return `
     <form class="space-y-5" data-form="create-media-tagging-mapping-table">
       <div class="space-y-3">
         <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
@@ -1570,14 +1665,14 @@ function renderCreateMediaTaggingMappingTableForm(modal, state) {
         </div>
         <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface">
           ${
-            mappingExists
-              ? `${escapeHtml(MEDIA_TAGGING_DEFAULT_MAPPING_TABLE)} already exists in the active database.`
-              : `${escapeHtml(MEDIA_TAGGING_DEFAULT_MAPPING_TABLE)} does not exist yet.`
+              mappingExists
+                  ? `${escapeHtml(MEDIA_TAGGING_DEFAULT_MAPPING_TABLE)} already exists in the active database.`
+                  : `${escapeHtml(MEDIA_TAGGING_DEFAULT_MAPPING_TABLE)} does not exist yet.`
           }
           ${
-            readOnly && !mappingExists
-              ? `<div class="mt-2 text-on-surface-variant/60">The active connection is read-only, so the table cannot be created here.</div>`
-              : ""
+              readOnly && !mappingExists
+                  ? `<div class="mt-2 text-on-surface-variant/60">The active connection is read-only, so the table cannot be created here.</div>`
+                  : ''
           }
         </div>
       </div>
@@ -1597,17 +1692,17 @@ function renderCreateMediaTaggingMappingTableForm(modal, state) {
           Close
         </button>
         ${
-          !mappingExists
-            ? `
+            !mappingExists
+                ? `
                 <button
                   class="standard-button"
                   type="submit"
-                  ${readOnly ? "disabled" : ""}
+                  ${readOnly ? 'disabled' : ''}
                 >
-                  ${modal.submitting ? "Creating..." : "Create Table"}
+                  ${modal.submitting ? 'Creating...' : 'Create Table'}
                 </button>
               `
-            : ""
+                : ''
         }
       </div>
     </form>
@@ -1615,10 +1710,10 @@ function renderCreateMediaTaggingMappingTableForm(modal, state) {
 }
 
 function renderCreateMediaTaggingTagTableForm(modal, state) {
-  const tagTableExists = hasDefaultMediaTaggingTagTable(state.mediaTagging.schemaTables ?? []);
-  const readOnly = Boolean(state.mediaTagging.connection?.readOnly);
+    const tagTableExists = hasDefaultMediaTaggingTagTable(state.mediaTagging.schemaTables ?? []);
+    const readOnly = Boolean(state.mediaTagging.connection?.readOnly);
 
-  return `
+    return `
     <form class="space-y-5" data-form="create-media-tagging-tag-table">
       <div class="space-y-3">
         <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
@@ -1634,14 +1729,14 @@ function renderCreateMediaTaggingTagTableForm(modal, state) {
         </div>
         <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface">
           ${
-            tagTableExists
-              ? `${escapeHtml(MEDIA_TAGGING_DEFAULT_TAG_TABLE)} already exists in the active database.`
-              : `${escapeHtml(MEDIA_TAGGING_DEFAULT_TAG_TABLE)} does not exist yet.`
+              tagTableExists
+                  ? `${escapeHtml(MEDIA_TAGGING_DEFAULT_TAG_TABLE)} already exists in the active database.`
+                  : `${escapeHtml(MEDIA_TAGGING_DEFAULT_TAG_TABLE)} does not exist yet.`
           }
           ${
-            readOnly && !tagTableExists
-              ? `<div class="mt-2 text-on-surface-variant/60">The active connection is read-only, so the table cannot be created here.</div>`
-              : ""
+              readOnly && !tagTableExists
+                  ? `<div class="mt-2 text-on-surface-variant/60">The active connection is read-only, so the table cannot be created here.</div>`
+                  : ''
           }
         </div>
       </div>
@@ -1661,17 +1756,17 @@ function renderCreateMediaTaggingTagTableForm(modal, state) {
           Close
         </button>
         ${
-          !tagTableExists
-            ? `
+            !tagTableExists
+                ? `
                 <button
                   class="standard-button"
                   type="submit"
-                  ${readOnly ? "disabled" : ""}
+                  ${readOnly ? 'disabled' : ''}
                 >
-                  ${modal.submitting ? "Creating..." : "Create Table"}
+                  ${modal.submitting ? 'Creating...' : 'Create Table'}
                 </button>
               `
-            : ""
+                : ''
         }
       </div>
     </form>
@@ -1679,128 +1774,148 @@ function renderCreateMediaTaggingTagTableForm(modal, state) {
 }
 
 export function renderModal(state) {
-  const modal = state.modal;
-
-  if (!modal) {
-    return "";
-  }
-
-  const contentByKind = {
-    "open-connection": {
-      eyebrow: "Filesystem // Open existing SQLite database",
-      title: "Connect Database",
-      body: renderOpenConnectionForm(modal),
-    },
-    "create-connection": {
-      eyebrow: "Filesystem // Create a new SQLite database",
-      title: "Create Database",
-      body: renderCreateDatabaseForm(modal),
-    },
-    "import-sql": {
-      eyebrow: "Import // Execute SQL dump into SQLite",
-      title: "Import SQL Dump",
-      body: renderImportSqlForm(modal, state),
-    },
-    "edit-connection": {
-      eyebrow: "Registry // Update saved SQLite target",
-      title: "Edit Connection",
-      body: renderEditConnectionForm(modal),
-    },
-    "delete-row": {
-      eyebrow: "Mutation // Confirm row deletion",
-      title: "Delete Row",
-      body: renderDeleteRowConfirmForm(modal),
-    },
-    "row-update-preview": {
-      eyebrow: "Mutation // Review row update",
-      title: "Review Update",
-      body: renderRowUpdatePreviewForm(modal),
-    },
-    "chart-editor": {
-      eyebrow: "Charts // Configure query-based ECharts panel",
-      title: modal.draft?.mode === "edit" ? "Edit Chart" : "New Chart",
-      body: renderChartEditorForm(modal, state),
-    },
-    "delete-chart": {
-      eyebrow: "Charts // Confirm chart deletion",
-      title: "Delete Chart",
-      body: renderDeleteChartForm(modal),
-    },
-    "delete-query-history": {
-      eyebrow: "History // Confirm query deletion",
-      title: "Delete Query",
-      body: renderDeleteQueryHistoryForm(modal),
-    },
-    "delete-document": {
-      eyebrow: "Documents // Confirm deletion",
-      title: "Delete Document",
-      body: renderDeleteDocumentForm(modal),
-    },
-    "delete-api-token": {
-      eyebrow: "Settings // Confirm token deletion",
-      title: "Delete API Token",
-      body: renderDeleteApiTokenForm(modal),
-    },
-    "document-insert-table": {
-      eyebrow: "Documents // Saved query output",
-      title: "Insert Table",
-      body: renderDocumentInsertTableForm(modal),
-    },
-    "document-insert-note": {
-      eyebrow: "Documents // Saved query notes",
-      title: "Insert Note",
-      body: renderDocumentInsertNoteForm(modal),
-    },
-    "query-export": {
-      eyebrow: "SQL Editor // Export query result",
-      title: "Export Query",
-      body: renderQueryExportModal(modal),
-    },
-    "data-export": {
-      eyebrow: "Data Browser // Export table data",
-      title: "Export Table",
-      body: renderDataExportModal(modal),
-    },
-    "copy-column": {
-      eyebrow: "Results // Copy or export column values",
-      title: isMarkdownTodoCopyColumnMode(modal.copyMode) ? "Export Markdown Todo" : "Copy column",
-      body: renderCopyColumnModal(modal, state),
-    },
-    "table-designer-constraints": {
-      eyebrow: "Table Designer // Constraints",
-      title: "Checks",
-      body: renderTableDesignerConstraintsModal(modal, state),
-    },
-    "create-media-tagging-tag-table": {
-      eyebrow: "Media Tagging // Create default tag table",
-      title: "Create Tag Table",
-      body: renderCreateMediaTaggingTagTableForm(modal, state),
-    },
-    "create-media-tagging-mapping-table": {
-      eyebrow: "Media Tagging // Create default join table",
-      title: "Create Mapping Table",
-      body: renderCreateMediaTaggingMappingTableForm(modal, state),
-    },
-  };
-
-  const config = contentByKind[modal.kind];
-
-  if (!config) {
-    return "";
-  }
-
-  return `
+    const modal = state.modal;
+
+    if (!modal) {
+        return '';
+    }
+
+    const contentByKind = {
+        'open-connection': {
+            eyebrow: 'Filesystem // Open existing SQLite database',
+            title: 'Connect Database',
+            body: renderOpenConnectionForm(modal),
+        },
+        'create-connection': {
+            eyebrow: 'Filesystem // Create a new SQLite database',
+            title: 'Create Database',
+            body: renderCreateDatabaseForm(modal),
+        },
+        'import-sql': {
+            eyebrow: 'Import // Execute SQL dump into SQLite',
+            title: 'Import SQL Dump',
+            body: renderImportSqlForm(modal, state),
+        },
+        'create-backup': {
+            eyebrow: 'Backups // Managed SQLite snapshot',
+            title: 'Create Backup',
+            body: renderCreateBackupForm(modal),
+        },
+        'delete-backup': {
+            eyebrow: 'Backups // Confirm deletion',
+            title: 'Delete Backup',
+            body: renderDeleteBackupForm(modal),
+        },
+        'edit-backup-notes': {
+            eyebrow: 'Backups // Notes',
+            title: 'Edit Backup Notes',
+            body: renderEditBackupNotesForm(modal),
+        },
+        'backup-safety': {
+            eyebrow: 'Backups // Safety check',
+            title: 'Create a safety backup?',
+            body: renderBackupSafetyForm(modal),
+        },
+        'edit-connection': {
+            eyebrow: 'Registry // Update saved SQLite target',
+            title: 'Edit Connection',
+            body: renderEditConnectionForm(modal),
+        },
+        'delete-row': {
+            eyebrow: 'Mutation // Confirm row deletion',
+            title: 'Delete Row',
+            body: renderDeleteRowConfirmForm(modal),
+        },
+        'row-update-preview': {
+            eyebrow: 'Mutation // Review row update',
+            title: 'Review Update',
+            body: renderRowUpdatePreviewForm(modal),
+        },
+        'chart-editor': {
+            eyebrow: 'Charts // Configure query-based ECharts panel',
+            title: modal.draft?.mode === 'edit' ? 'Edit Chart' : 'New Chart',
+            body: renderChartEditorForm(modal, state),
+        },
+        'delete-chart': {
+            eyebrow: 'Charts // Confirm chart deletion',
+            title: 'Delete Chart',
+            body: renderDeleteChartForm(modal),
+        },
+        'delete-query-history': {
+            eyebrow: 'History // Confirm query deletion',
+            title: 'Delete Query',
+            body: renderDeleteQueryHistoryForm(modal),
+        },
+        'delete-document': {
+            eyebrow: 'Documents // Confirm deletion',
+            title: 'Delete Document',
+            body: renderDeleteDocumentForm(modal),
+        },
+        'delete-api-token': {
+            eyebrow: 'Settings // Confirm token deletion',
+            title: 'Delete API Token',
+            body: renderDeleteApiTokenForm(modal),
+        },
+        'document-insert-table': {
+            eyebrow: 'Documents // Saved query output',
+            title: 'Insert Table',
+            body: renderDocumentInsertTableForm(modal),
+        },
+        'document-insert-note': {
+            eyebrow: 'Documents // Saved query notes',
+            title: 'Insert Note',
+            body: renderDocumentInsertNoteForm(modal),
+        },
+        'query-export': {
+            eyebrow: 'SQL Editor // Export query result',
+            title: 'Export Query',
+            body: renderQueryExportModal(modal),
+        },
+        'data-export': {
+            eyebrow: 'Data Browser // Export table data',
+            title: 'Export Table',
+            body: renderDataExportModal(modal),
+        },
+        'copy-column': {
+            eyebrow: 'Results // Copy or export column values',
+            title: isMarkdownTodoCopyColumnMode(modal.copyMode) ? 'Export Markdown Todo' : 'Copy column',
+            body: renderCopyColumnModal(modal, state),
+        },
+        'table-designer-constraints': {
+            eyebrow: 'Table Designer // Constraints',
+            title: 'Checks',
+            body: renderTableDesignerConstraintsModal(modal, state),
+        },
+        'create-media-tagging-tag-table': {
+            eyebrow: 'Media Tagging // Create default tag table',
+            title: 'Create Tag Table',
+            body: renderCreateMediaTaggingTagTableForm(modal, state),
+        },
+        'create-media-tagging-mapping-table': {
+            eyebrow: 'Media Tagging // Create default join table',
+            title: 'Create Mapping Table',
+            body: renderCreateMediaTaggingMappingTableForm(modal, state),
+        },
+    };
+
+    const config = contentByKind[modal.kind];
+
+    if (!config) {
+        return '';
+    }
+
+    return `
     <div class="fixed inset-0 z-50 flex items-center justify-center bg-background/85 px-4 backdrop-blur-sm">
       <div class="w-full ${
-        modal.kind === "chart-editor" ||
-        modal.kind === "document-insert-table" ||
-        modal.kind === "document-insert-note" ||
-        modal.kind === "row-update-preview" ||
-        modal.kind === "table-designer-constraints"
-          ? "max-w-3xl"
-          : modal.kind === "query-export" || modal.kind === "data-export"
-            ? "max-w-4xl"
-          : "max-w-xl"
+          modal.kind === 'chart-editor' ||
+          modal.kind === 'document-insert-table' ||
+          modal.kind === 'document-insert-note' ||
+          modal.kind === 'row-update-preview' ||
+          modal.kind === 'table-designer-constraints'
+              ? 'max-w-3xl'
+              : modal.kind === 'query-export' || modal.kind === 'data-export' || modal.kind === 'backup-safety'
+                ? 'max-w-4xl'
+                : 'max-w-xl'
       } border border-outline-variant/20 bg-surface-container shadow-[0_24px_80px_rgba(0,0,0,0.45)]">
         <div class="flex items-start justify-between gap-4 border-b border-outline-variant/10 bg-surface-container-low px-6 py-5">
           <div>