sqlite-hub 1.1.2 → 1.2.0

package/frontend/js/app.js

@@ -46,6 +46,7 @@ import {
     exportCurrentQueryFormat,
     getState,
     initializeApp,
+    insertMarkdownIntoLastOpenDocument,
     loadMoreQueryHistory,
     openModal,
     openOverviewInFinder,
@@ -239,6 +240,7 @@ let lastRenderedPanelMarkup = '';
 let lastRenderedModalMarkup = '';
 let lastRenderedToastMarkup = '';
 let lastRenderedChartsHistorySignature = '';
+let lastRenderedChartsDetailSignature = '';
 let lastRenderedChartsCardSignature = '';
 let lastRenderedPanelOpen = false;
 let lastRenderedLockedRoute = false;
@@ -786,6 +788,27 @@ function buildChartsCardSignature(state) {
     });
 }
 
+function buildChartsDetailSignature(state) {
+    if (state.route.name !== 'charts') {
+        return '';
+    }
+
+    const detail = state.charts.detail;
+    const historyVisible = state.charts.historyPanelVisible !== false || !state.charts.selectedHistoryId;
+
+    return JSON.stringify({
+        selectedHistoryId: state.charts.selectedHistoryId ?? null,
+        historyVisible,
+        detailLoading: Boolean(state.charts.detailLoading),
+        detailError: state.charts.detailError
+            ? [state.charts.detailError.code ?? '', state.charts.detailError.message ?? '']
+            : null,
+        hasDetailItem: Boolean(detail?.item),
+        displayTitle: detail?.item?.displayTitle ?? '',
+        cards: buildChartsCardSignature(state),
+    });
+}
+
 function syncChartsHistorySelectionUi(state) {
     const selectedHistoryId = String(state.charts.selectedHistoryId ?? '');
     const historyButtons = shellRefs.view.querySelectorAll(
@@ -1368,6 +1391,7 @@ function renderApp(state) {
     const modalMarkup = renderModal(state);
     const toastMarkup = renderToasts(state.toasts);
     const chartsHistorySignature = buildChartsHistorySignature(state);
+    const chartsDetailSignature = buildChartsDetailSignature(state);
     const chartsCardSignature = buildChartsCardSignature(state);
     const isLockedRoute = [
         'editor',
@@ -1388,6 +1412,7 @@ function renderApp(state) {
     const panelChanged = panel !== lastRenderedPanelMarkup;
     const modalChanged = modalMarkup !== lastRenderedModalMarkup;
     const chartsHistoryChanged = chartsHistorySignature !== lastRenderedChartsHistorySignature;
+    const chartsDetailChanged = chartsDetailSignature !== lastRenderedChartsDetailSignature;
     const chartsCardsChanged = chartsCardSignature !== lastRenderedChartsCardSignature;
     const panelOpenChanged = panelOpen !== lastRenderedPanelOpen;
     const lockedRouteChanged = isLockedRoute !== lastRenderedLockedRoute;
@@ -1436,12 +1461,17 @@ function renderApp(state) {
         const historyPatched = !chartsHistoryChanged || patchChartsHistoryUi(state);
 
         if (historyPatched) {
-            if (chartsCardsChanged) {
-                teardownQueryChartRenderer();
-            }
+            if (chartsDetailChanged) {
+                if (chartsCardsChanged) {
+                    teardownQueryChartRenderer();
+                }
 
-            preservedChartsDom = !chartsCardsChanged;
-            mainPatched = patchChartsDetailUi(state, { preserveCharts: preservedChartsDom });
+                preservedChartsDom = !chartsCardsChanged;
+                mainPatched = patchChartsDetailUi(state, { preserveCharts: preservedChartsDom });
+            } else {
+                preservedChartsDom = true;
+                mainPatched = syncChartsHistorySelectionUi(state);
+            }
         }
 
         if (!mainPatched) {
@@ -1542,6 +1572,7 @@ function renderApp(state) {
     lastRenderedModalMarkup = modalMarkup;
     lastRenderedToastMarkup = toastMarkup;
     lastRenderedChartsHistorySignature = chartsHistorySignature;
+    lastRenderedChartsDetailSignature = chartsDetailSignature;
     lastRenderedChartsCardSignature = chartsCardSignature;
     lastRenderedPanelOpen = panelOpen;
     lastRenderedLockedRoute = isLockedRoute;
@@ -1567,6 +1598,22 @@ async function executeEditorQueryAndNavigate() {
     router.navigate(success && activeTab === 'results' ? '/editor/results' : '/editor');
 }
 
+function quoteSqlIdentifier(identifier) {
+    return `"${String(identifier ?? '').replace(/"/g, '""')}"`;
+}
+
+async function openTableInSqlEditor(tableName) {
+    const normalizedTableName = String(tableName ?? '').trim();
+
+    if (!normalizedTableName) {
+        showToast('No table selected for SQL Editor.', 'alert');
+        return;
+    }
+
+    setCurrentQuery(`SELECT * FROM ${quoteSqlIdentifier(normalizedTableName)};`);
+    router.navigate('/editor');
+}
+
 function formatCurrentQuery() {
     const currentQuery = getState().editor.sqlText ?? '';
     const formattedQuery = formatSqlQuery(currentQuery);
@@ -2103,6 +2150,39 @@ function exportRowEditorJson() {
     showToast(`Row from "${payload.label}" exported as JSON.`, 'success');
 }
 
+async function insertRowEditorJsonIntoDocument() {
+    const payload = buildRowEditorJsonPayload(getState());
+
+    if (!payload) {
+        showToast('No row is selected.', 'alert');
+        return;
+    }
+
+    const markdown = ['```json', payload.text, '```'].join('\n');
+
+    try {
+        const result = await insertMarkdownIntoLastOpenDocument(markdown);
+
+        if (!result.documentId) {
+            showToast('Open a document before inserting row JSON.', 'alert');
+            return;
+        }
+
+        if (!result.inserted) {
+            showToast('Row JSON could not be inserted.', 'alert');
+            return;
+        }
+
+        if (!result.saved) {
+            scheduleDocumentAutosave(result.documentId);
+        }
+
+        showToast(`Row from "${payload.label}" inserted into document.`, 'success');
+    } catch (error) {
+        showToast('Open a document before inserting row JSON.', 'alert');
+    }
+}
+
 function exportCurrentDocumentMarkdown() {
     const documents = getState().documents;
 
@@ -2319,6 +2399,9 @@ async function handleAction(actionNode) {
         case 'export-row-editor-json':
             exportRowEditorJson();
             return;
+        case 'insert-row-editor-json-into-document':
+            await insertRowEditorJsonIntoDocument();
+            return;
         case 'open-modal':
             openModal(actionNode.dataset.modal, {
                 columnId: actionNode.dataset.columnId,
@@ -2496,6 +2579,9 @@ async function handleAction(actionNode) {
         case 'refresh-backups':
             await refreshBackups();
             return;
+        case 'open-table-in-sql-editor':
+            await openTableInSqlEditor(actionNode.dataset.tableName);
+            return;
         case 'open-restore-backup-modal':
             openRestoreBackupModal(actionNode.dataset.backupId);
             return;

package/frontend/js/components/queryResults.js

@@ -147,7 +147,7 @@ export function renderQueryResultsPane(
               ? renderDataGrid({
                   columns,
                   rows: result.rows ?? [],
-                  tableClass: "min-w-full border-collapse text-left font-mono text-xs",
+                  tableClass: "data-table min-w-full border-collapse text-left font-mono text-xs",
                   theadClass: "sticky top-0 z-10 bg-surface-container-highest text-on-surface",
                   tbodyClass: "divide-y divide-outline-variant/5",
                   getRowClass: (_, index) =>

package/frontend/js/components/rowEditorPanel.js

@@ -1,4 +1,6 @@
 import { escapeHtml } from "../utils/format.js";
+import { renderDropdownButton } from "./dropdownButton.js";
+import { detectEmailValue } from "../utils/emailPreview.js";
 import {
   compactPathForDisplay,
   detectFilePathValue,
@@ -49,6 +51,19 @@ function withUrlBadge(badges = [], url) {
   return hasUrlBadge ? badges : [...badges, { label: "URL", tone: "url" }];
 }
 
+function withEmailBadge(badges = [], email) {
+  if (!email) {
+    return badges;
+  }
+
+  const hasEmailBadge = badges.some((badge) => {
+    const label = typeof badge === "object" ? badge.label : badge;
+    return String(label ?? "").toUpperCase() === "EMAIL";
+  });
+
+  return hasEmailBadge ? badges : [...badges, { label: "EMAIL", tone: "email" }];
+}
+
 function getAllowedValues(field) {
   const seen = new Set();
 
@@ -277,7 +292,11 @@ function renderReadonlyField(field = {}, tableMeta = {}) {
   const protectedKeyColumn = isProtectedKeyColumn(columnName, tableMeta);
   const filePathPreview = getFieldFilePathPreview({ ...field, rawValue }, tableMeta);
   const url = getUrlValue(value);
-  const badges = withFilePathBadge(withUrlBadge(Array.isArray(label?.badges) ? label.badges : [], url), filePathPreview);
+  const email = detectEmailValue(rawValue);
+  const badges = withEmailBadge(
+    withFilePathBadge(withUrlBadge(Array.isArray(label?.badges) ? label.badges : [], url), filePathPreview),
+    email
+  );
   const displayLabel = typeof label === "object" ? label.label : label;
   const jsonPreview = formatJsonPreview(value);
   const valueState = getRowEditorValueState(rawValue);
@@ -290,7 +309,9 @@ function renderReadonlyField(field = {}, tableMeta = {}) {
       data-row-editor-protected-key="${protectedKeyColumn ? "true" : "false"}"
       ${
       url ? "data-row-editor-url-field" : ""
-    }>
+    }
+      ${email ? "data-row-editor-email-field" : ""}
+    >
       <div class="flex flex-wrap items-center gap-2 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
         <span>${escapeHtml(displayLabel)}</span>
         ${renderFieldBadgesWithCharacterCount(badges, rawValue)}
@@ -334,10 +355,11 @@ function renderEditableField(field, tableMeta = {}) {
   const columnName = getFieldColumnName(field);
   const protectedKeyColumn = isProtectedKeyColumn(columnName, tableMeta);
   const url = getUrlValue(field.value);
+  const email = detectEmailValue(getFieldRawValue(field));
   const allowedValues = getAllowedValues(field);
   const filePathPreview = getFieldFilePathPreview(field, tableMeta);
   const baseBadges = withCheckBadge(Array.isArray(field.badges) ? field.badges : [], allowedValues);
-  const badges = withFilePathBadge(withUrlBadge(baseBadges, url), filePathPreview);
+  const badges = withEmailBadge(withFilePathBadge(withUrlBadge(baseBadges, url), filePathPreview), email);
   const jsonPreview = formatJsonPreview(field.value);
   const inputType = field.inputType === "number" ? "number" : "text";
   const numberStep = field.numberStep === "1" ? "1" : "any";
@@ -351,6 +373,7 @@ function renderEditableField(field, tableMeta = {}) {
       data-row-editor-initial-state="${escapeHtml(valueState)}"
       data-row-editor-protected-key="${protectedKeyColumn ? "true" : "false"}"
       ${url ? "data-row-editor-url-field" : ""}
+      ${email ? "data-row-editor-email-field" : ""}
     >
       <span class="flex flex-wrap items-center gap-2 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
         <span>${escapeHtml(field.label ?? field.name)}</span>
@@ -427,6 +450,10 @@ function getFieldBadgeClassName(tone) {
     return "border-primary-container/35 bg-primary-container/15 text-primary-container";
   }
 
+  if (tone === "email") {
+    return "border-tertiary-fixed-dim/35 bg-tertiary-fixed-dim/15 text-tertiary-fixed-dim";
+  }
+
   if (tone === "check") {
     return "border-tertiary-fixed-dim/35 bg-tertiary-fixed-dim/15 text-tertiary-fixed-dim";
   }
@@ -488,16 +515,28 @@ export function renderRowEditorPanel({
         ].join("")
       : "",
     jsonActionsEnabled
-      ? [
-          '<button class="standard-button" data-action="copy-row-editor-json" type="button">',
-          '<span class="material-symbols-outlined text-sm">content_copy</span>',
-          "Copy as JSON",
-          "</button>",
-          '<button class="standard-button" data-action="export-row-editor-json" type="button">',
-          '<span class="material-symbols-outlined text-sm">download</span>',
-          "Export as JSON",
-          "</button>",
-        ].join("")
+      ? renderDropdownButton({
+          icon: "download",
+          label: "Export",
+          title: "Export row",
+          items: [
+            {
+              action: "copy-row-editor-json",
+              icon: "content_copy",
+              label: "Copy to clipboard",
+            },
+            {
+              action: "export-row-editor-json",
+              icon: "download",
+              label: "JSON file",
+            },
+            {
+              action: "insert-row-editor-json-into-document",
+              icon: "description",
+              label: "Markdown document",
+            },
+          ],
+        })
       : "",
     canSubmit
       ? [

package/frontend/js/components/topNav.js

@@ -1,11 +1,8 @@
 export function renderTopNav() {
-  return `
+    return `
     <div class="top-nav-shell">
       <a class="top-nav-brand" href="#/">SQLite Hub</a>
       <div class="top-nav-actions">
-        <button class="top-nav-icon" data-action="refresh-view" type="button" aria-label="Refresh">
-          <span class="material-symbols-outlined">refresh</span>
-        </button>
         <button
           class="top-nav-icon"
           data-action="open-modal"

package/frontend/js/components/workspaceOpenDropdown.js

@@ -0,0 +1,52 @@
+import { renderDropdownButton } from "./dropdownButton.js";
+
+function buildOpenItem({ disabled, icon, label, target, tableName }) {
+  return {
+    action: "navigate",
+    dataAttributes: {
+      to: target,
+    },
+    disabled,
+    icon,
+    label,
+  };
+}
+
+export function renderWorkspaceOpenDropdown({
+  align = "right",
+  destinations = [],
+  disabled = false,
+  tableName = "",
+} = {}) {
+  const safeTableName = String(tableName ?? "").trim();
+  const items = destinations.map((destination) => {
+    if (destination.key === "sql-editor") {
+      return {
+        action: "open-table-in-sql-editor",
+        dataAttributes: {
+          tableName: safeTableName,
+        },
+        disabled: disabled || !safeTableName,
+        icon: "terminal",
+        label: "SQL Editor",
+      };
+    }
+
+    return buildOpenItem({
+      disabled: disabled || !safeTableName,
+      icon: destination.icon,
+      label: destination.label,
+      target: destination.target(safeTableName),
+      tableName: safeTableName,
+    });
+  });
+
+  return renderDropdownButton({
+    align,
+    disabled: disabled || !safeTableName,
+    icon: "open_in_new",
+    items,
+    label: "Open",
+    title: safeTableName ? `Open ${safeTableName}` : "Open table",
+  });
+}

package/frontend/js/store.js

@@ -82,6 +82,7 @@ let chartsLoadVersion = 0;
 let chartsDetailLoadVersion = 0;
 let mediaTaggingPreviewVersion = 0;
 let documentsLoadVersion = 0;
+let lastOpenDocumentId = null;
 
 function readStoredDataPageSize(fallback = DEFAULT_DATA_PAGE_SIZE) {
     try {
@@ -1003,6 +1004,10 @@ function applyCurrentDocument(document) {
     state.documents.draftContent = document?.content ?? '';
     state.documents.dirty = false;
     state.documents.saveError = null;
+
+    if (document?.id) {
+        lastOpenDocumentId = document.id;
+    }
 }
 
 function upsertDocumentSummary(document) {
@@ -2425,6 +2430,10 @@ async function previewMediaTaggingDraft(options = {}) {
 function invalidateDatabaseCaches(options = {}) {
     const preserveDataBrowserState = options.preserveDataBrowserState === true;
 
+    if (!preserveDataBrowserState) {
+        lastOpenDocumentId = null;
+    }
+
     state.overview.data = null;
     state.dataBrowser.tables = [];
     if (!preserveDataBrowserState) {
@@ -2932,7 +2941,7 @@ function buildDocumentMarkdownInsertion(currentContent, insertion, range = null)
     return `${before}${prefix}${text}${suffix}${after}`;
 }
 
-function insertMarkdownIntoCurrentDocumentDraft(markdown, range = null) {
+export function insertMarkdownIntoCurrentDocumentDraft(markdown, range = null) {
     if (!state.documents.selectedId) {
         return false;
     }
@@ -2950,6 +2959,63 @@ function insertMarkdownIntoCurrentDocumentDraft(markdown, range = null) {
     return true;
 }
 
+export async function insertMarkdownIntoLastOpenDocument(markdown) {
+    if (state.route.name === 'documents' && state.documents.selectedId) {
+        const inserted = insertMarkdownIntoCurrentDocumentDraft(markdown);
+
+        return {
+            documentId: state.documents.selectedId,
+            inserted,
+            saved: false,
+        };
+    }
+
+    const documentId = lastOpenDocumentId ?? state.documents.selectedId;
+
+    if (!documentId) {
+        return {
+            documentId: null,
+            inserted: false,
+            saved: false,
+        };
+    }
+
+    const response = await api.getDocument(documentId);
+    const document = response.data ?? null;
+
+    if (!document?.id) {
+        return {
+            documentId: null,
+            inserted: false,
+            saved: false,
+        };
+    }
+
+    const nextContent = buildDocumentMarkdownInsertion(document.content, markdown);
+
+    if (nextContent === document.content) {
+        return {
+            documentId: document.id,
+            inserted: false,
+            saved: false,
+        };
+    }
+
+    const updateResponse = await api.updateDocument(document.id, {
+        content: nextContent,
+    });
+    const updatedDocument = updateResponse.data ?? document;
+
+    lastOpenDocumentId = updatedDocument.id;
+    upsertDocumentSummary(updatedDocument);
+
+    return {
+        documentId: updatedDocument.id,
+        inserted: true,
+        saved: true,
+    };
+}
+
 function getDocumentInsertQueryTitle(query) {
     return query?.displayTitle || query?.title || query?.previewSql || query?.rawSql || 'Saved query';
 }

package/frontend/js/utils/emailPreview.js

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

package/frontend/js/utils/markdownDocuments.js

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

package/frontend/js/views/backups.js

@@ -28,6 +28,29 @@ function isBackupBusy(backup, state) {
     return Boolean(state.backups.operationLoading) || ['creating', 'verifying', 'restoring'].includes(backup.status);
 }
 
+function renderBackupMetadataItem(label, value, extraClass = '') {
+    return `
+      <div class="border border-outline-variant/10 bg-surface-container-lowest px-3 py-2 ${extraClass}">
+        <div class="font-mono text-[9px] uppercase tracking-[0.16em] text-on-surface-variant/45">${escapeHtml(label)}</div>
+        <div class="mt-1 font-mono text-[10px] uppercase tracking-[0.1em] text-on-surface/80">${escapeHtml(value)}</div>
+      </div>
+    `;
+}
+
+function renderBackupMetadata(backup) {
+    return `
+      <div class="grid min-w-[24rem] grid-cols-2 gap-2">
+        ${renderBackupMetadataItem('Size', formatBytes(backup.sizeBytes))}
+        <div class="border border-outline-variant/10 bg-surface-container-lowest px-3 py-2">
+          <div class="font-mono text-[9px] uppercase tracking-[0.16em] text-on-surface-variant/45">Status</div>
+          <div class="mt-1">${renderBackupStatus(backup)}</div>
+        </div>
+        ${renderBackupMetadataItem('SQLite Hub', backup.sqliteHubVersion ? `v${backup.sqliteHubVersion}` : 'n/a')}
+        ${renderBackupMetadataItem('SQLite', backup.sqliteVersion ? `v${backup.sqliteVersion}` : 'n/a')}
+      </div>
+    `;
+}
+
 function renderBackupRows(state) {
     return state.backups.items
         .map(backup => {
@@ -39,27 +62,34 @@ function renderBackupRows(state) {
 
             return `
         <tr class="border-b border-outline-variant/10 align-top">
-          <td class="px-4 py-4 text-xs font-mono text-on-surface/80">${escapeHtml(formatCompactDateTime(backup.createdAt))}</td>
-          <td class="px-4 py-4">
-            <div class="font-headline text-sm font-black uppercase text-on-surface">${escapeHtml(backup.name)}</div>
-            <div class="mt-1 font-mono text-[10px] uppercase tracking-[0.12em] text-on-surface-variant/45" title="${escapeHtml(backup.path)}">
-              ${escapeHtml(truncateMiddle(backup.fileName || backup.path, 44))}
+          <td class="min-w-[20rem] px-4 py-5">
+            <div class="space-y-2">
+              <div class="font-headline text-sm font-black uppercase text-on-surface">${escapeHtml(backup.name)}</div>
+              <div class="font-mono text-[10px] uppercase tracking-[0.12em] text-on-surface-variant/45" title="${escapeHtml(backup.path)}">
+                ${escapeHtml(truncateMiddle(backup.fileName || backup.path, 48))}
+              </div>
+              <div class="font-mono text-[10px] uppercase tracking-[0.12em] text-on-surface-variant/55">
+                Created // ${escapeHtml(formatCompactDateTime(backup.createdAt))}
+              </div>
             </div>
           </td>
-          <td class="px-4 py-4 text-right text-xs font-mono text-on-surface/70">${escapeHtml(formatBytes(backup.sizeBytes))}</td>
-          <td class="px-4 py-4">${renderBackupStatus(backup)}</td>
-          <td class="max-w-[18rem] px-4 py-4 text-xs leading-6 text-on-surface-variant/70">
-            ${backup.notes ? escapeHtml(backup.notes) : '<span class="text-on-surface-variant/35">-</span>'}
-            ${backup.errorMessage ? `<div class="mt-2 text-error">${escapeHtml(backup.errorMessage)}</div>` : ''}
-            <div class="mt-3">
+          <td class="px-4 py-5">
+            ${renderBackupMetadata(backup)}
+          </td>
+          <td class="min-w-[18rem] max-w-[24rem] px-4 py-5">
+            <div class="flex h-full flex-col items-start gap-3">
+              <div class="text-xs leading-6 text-on-surface-variant/70">
+                ${backup.notes ? escapeHtml(backup.notes) : '<span class="text-on-surface-variant/35">No notes</span>'}
+                ${backup.errorMessage ? `<div class="mt-2 text-error">${escapeHtml(backup.errorMessage)}</div>` : ''}
+              </div>
               <button class="standard-button" data-action="open-edit-backup-notes-modal" data-backup-id="${escapeHtml(backup.id)}" type="button" ${canEditNotes ? '' : 'disabled'}>
                 <span class="material-symbols-outlined text-sm">edit_note</span>
                 Edit Notes
               </button>
             </div>
           </td>
-          <td class="px-4 py-4">
-            <div class="flex flex-wrap items-center justify-end gap-2">
+          <td class="px-4 py-5">
+            <div class="flex min-w-[10rem] flex-col items-stretch gap-2">
               <button class="standard-button" data-action="open-restore-backup-modal" data-backup-id="${escapeHtml(backup.id)}" type="button" ${canRestore ? '' : 'disabled'}>
                 <span class="material-symbols-outlined text-sm">restore</span>
                 Restore
@@ -128,10 +158,8 @@ function renderBackupsBody(state) {
       <table class="min-w-full border-collapse text-left">
         <thead class="border-b border-outline-variant/10 bg-surface-container">
           <tr class="font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/55">
-            <th class="px-4 py-3 font-normal">Created</th>
-            <th class="px-4 py-3 font-normal">Name</th>
-            <th class="px-4 py-3 text-right font-normal">Size</th>
-            <th class="px-4 py-3 font-normal">Status</th>
+            <th class="px-4 py-3 font-normal">Backup</th>
+            <th class="px-4 py-3 font-normal">Metadata</th>
             <th class="px-4 py-3 font-normal">Note</th>
             <th class="px-4 py-3 text-right font-normal">Actions</th>
           </tr>