From 419408bbadd034cc9f716f3bfa3cdddc0226da72 Mon Sep 17 00:00:00 2001 From: adlee-was-taken Date: Tue, 28 Apr 2026 22:11:51 -0400 Subject: [PATCH] feat(ext): vault-tab Backup & Restore panel MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two cards — Export (passphrase + include-image checkbox → download) and Restore (file picker + passphrase + new-remote form). Deep-linked from settings-vault > 'Backup & restore →'. --- .../src/popup/components/settings-vault.ts | 10 +- .../src/vault/components/backup-panel.ts | 152 ++++++++++++++++++ extension/src/vault/vault.ts | 8 +- 3 files changed, 168 insertions(+), 2 deletions(-) create mode 100644 extension/src/vault/components/backup-panel.ts diff --git a/extension/src/popup/components/settings-vault.ts b/extension/src/popup/components/settings-vault.ts index 17598aa..a5fc0e4 100644 --- a/extension/src/popup/components/settings-vault.ts +++ b/extension/src/popup/components/settings-vault.ts @@ -2,7 +2,7 @@ /// generator defaults (preview + "configure" → opens popover), and /// autofill origin-ack revocation. -import { getState, setState, sendMessage, navigate, escapeHtml } from '../../shared/state'; +import { getState, setState, sendMessage, navigate, escapeHtml, openVaultTab } from '../../shared/state'; import type { VaultSettings, TrashRetention, HistoryRetention, GeneratorRequest, } from '../../shared/types'; @@ -158,6 +158,13 @@ export function renderVaultSettings(app: HTMLElement): void { +
+
backup & restore
+
+ +
+
+
@@ -187,6 +194,7 @@ export function renderVaultSettings(app: HTMLElement): void { function wireHandlers(): void { document.getElementById('back-btn')?.addEventListener('click', () => navigate('list')); document.getElementById('discard-btn')?.addEventListener('click', () => navigate('list')); + document.getElementById('open-backup')?.addEventListener('click', () => openVaultTab('backup')); document.getElementById('trash-retention')?.addEventListener('change', (e) => { if (!pendingSettings) return; diff --git a/extension/src/vault/components/backup-panel.ts b/extension/src/vault/components/backup-panel.ts new file mode 100644 index 0000000..5288888 --- /dev/null +++ b/extension/src/vault/components/backup-panel.ts @@ -0,0 +1,152 @@ +import { sendMessage } from '../../shared/state'; + +type ViewMode = 'idle' | 'exporting' | 'restoring'; + +let mode: ViewMode = 'idle'; + +export function renderBackupPanel(app: HTMLElement): void { + app.innerHTML = ` +
+

Backup & restore

+ +
+

Export

+

Pack this vault into a single encrypted .relbak file. + The backup passphrase is independent of your vault passphrase.

+ +

Git history is not bundled from the extension. Use the CLI if you want a full audit-log backup.

+ + +
+ +
+

Restore

+

Decrypt a .relbak file and push it to a fresh + remote. The remote must be empty.

+ + + +
+
+ `; + + wireExport(app); + wireRestore(app); +} + +function wireExport(scope: HTMLElement): void { + const btn = scope.querySelector('#export-btn') as HTMLButtonElement; + const includeImage = scope.querySelector('#include-image') as HTMLInputElement; + const status = scope.querySelector('#export-status') as HTMLElement; + + btn.addEventListener('click', async () => { + if (mode !== 'idle') return; + const passphrase = window.prompt('Backup passphrase (≥ zxcvbn score 3):'); + if (!passphrase) return; + + mode = 'exporting'; + btn.disabled = true; + showStatus(status, 'Exporting…'); + + try { + const resp = await sendMessage({ + type: 'export_backup', + passphrase, + includeImage: includeImage.checked, + }); + if (!resp.ok) throw new Error(resp.error); + + const data = (resp as { ok: true; data: { bytes: ArrayBuffer } }).data; + const blob = new Blob([data.bytes], { type: 'application/octet-stream' }); + const url = URL.createObjectURL(blob); + const ts = new Date().toISOString().replace(/[:.]/g, '-'); + const a = document.createElement('a'); + a.href = url; + a.download = `relicario-${ts}.relbak`; + a.click(); + setTimeout(() => URL.revokeObjectURL(url), 1000); + + showStatus(status, `Exported (${(data.bytes.byteLength / 1024 / 1024).toFixed(2)} MiB).`); + } catch (e) { + showStatus(status, `Failed: ${(e as Error).message}`); + } finally { + mode = 'idle'; + btn.disabled = false; + } + }); +} + +function wireRestore(scope: HTMLElement): void { + const file = scope.querySelector('#restore-file') as HTMLInputElement; + const remoteFs = scope.querySelector('#restore-remote') as HTMLElement; + const btn = scope.querySelector('#restore-btn') as HTMLButtonElement; + const status = scope.querySelector('#restore-status') as HTMLElement; + + file.addEventListener('change', () => { + remoteFs.classList.toggle('hidden', file.files == null || file.files.length === 0); + }); + + btn.addEventListener('click', async () => { + if (mode !== 'idle') return; + const f = file.files?.[0]; + if (!f) return; + + const passphrase = window.prompt('Backup passphrase:'); + if (!passphrase) return; + + const hostType = (scope.querySelector('#rt-host-type') as HTMLSelectElement).value as 'gitea' | 'github'; + const hostUrl = (scope.querySelector('#rt-host-url') as HTMLInputElement).value.trim(); + const repoPath = (scope.querySelector('#rt-repo') as HTMLInputElement).value.trim(); + const apiToken = (scope.querySelector('#rt-token') as HTMLInputElement).value.trim(); + if (!hostUrl || !repoPath || !apiToken) { + showStatus(status, 'fill in host URL, repo path, and API token'); + return; + } + + mode = 'restoring'; + btn.disabled = true; + showStatus(status, 'Restoring…'); + + try { + const bytes = await f.arrayBuffer(); + const resp = await sendMessage({ + type: 'restore_backup', + bytes, + passphrase, + newRemote: { hostType, hostUrl, repoPath, apiToken }, + }); + if (!resp.ok) throw new Error(resp.error); + + const data = (resp as { ok: true; data: { summary: { itemCount: number; attachmentCount: number; hasImage: boolean } } }).data; + const summary = data.summary; + showStatus(status, `Restored: ${summary.itemCount} items, ${summary.attachmentCount} attachments${summary.hasImage ? ', image included' : ''}. Reload the extension and unlock.`); + } catch (e) { + showStatus(status, `Failed: ${(e as Error).message}`); + } finally { + mode = 'idle'; + btn.disabled = false; + } + }); +} + +function showStatus(el: HTMLElement, text: string): void { + el.textContent = text; + el.classList.remove('hidden'); +} + +export function teardown(): void { + // No timers / object URLs to clean up — Blob URL revocation is per-export. + mode = 'idle'; +} diff --git a/extension/src/vault/vault.ts b/extension/src/vault/vault.ts index d570465..f8ef705 100644 --- a/extension/src/vault/vault.ts +++ b/extension/src/vault/vault.ts @@ -16,6 +16,7 @@ import { renderDevices, teardown as teardownDevices } from '../popup/components/ import { renderSettings } from '../popup/components/settings'; import { renderVaultSettings as renderVaultSettingsView } from '../popup/components/settings-vault'; import { renderFieldHistory, teardown as teardownFieldHistory } from '../popup/components/field-history'; +import { renderBackupPanel, teardown as teardownBackup } from './components/backup-panel'; // --------------------------------------------------------------------------- // Helpers @@ -66,7 +67,7 @@ function typeLabel(t: ItemType): string { // Hash routing // --------------------------------------------------------------------------- -type VaultView = 'list' | 'detail' | 'add' | 'edit' | 'trash' | 'devices' | 'settings' | 'settings-vault' | 'field-history'; +type VaultView = 'list' | 'detail' | 'add' | 'edit' | 'trash' | 'devices' | 'settings' | 'settings-vault' | 'field-history' | 'backup'; interface HashRoute { view: VaultView; @@ -92,6 +93,7 @@ function parseHash(): HashRoute { case 'settings': case 'settings-vault': case 'field-history': + case 'backup': return { view }; default: return { view: 'list' }; @@ -418,6 +420,7 @@ function teardownPaneComponents(): void { teardownTrash(); teardownDevices(); teardownFieldHistory(); + teardownBackup(); } function renderPane(): void { @@ -464,6 +467,9 @@ function renderPane(): void { case 'field-history': renderFieldHistory(pane); break; + case 'backup': + renderBackupPanel(pane); + break; default: pane.className = 'vault-pane vault-pane--empty'; pane.innerHTML = 'select an item';