superlocalmemory 3.7.8 → 3.8.0

package/src/superlocalmemory/ui/js/od-backup.js

@@ -0,0 +1,780 @@
+/* od-backup.js — SuperLocalMemory Backup & Cloud Dashboard v1.0
+ * Exposes:
+ *   window.odRenderBackup(container)    — render into a supplied pane
+ *   window.odOpenBackupDashboard()      — open a full-screen overlay (called from od-settings.js)
+ * Wired endpoints (all confirmed against live daemon):
+ *   GET  /api/backup/status
+ *   POST /api/backup/create
+ *   POST /api/backup/configure          body: {interval_hours, max_backups, enabled}
+ *   GET  /api/backup/list
+ *   GET  /api/backup/destinations
+ *   POST /api/backup/connect/github     body: {pat, repo_name}
+ *   DELETE /api/backup/disconnect/{id}
+ *   POST /api/backup/sync
+ *   GET  /api/backup/export             → FileResponse (.db.gz download)
+ *   GET  /api/backup/oauth/github/start → OAuth redirect or PAT form
+ *   GET  /api/backup/oauth/google/start → Google OAuth redirect
+ * No mock / seed data — every render goes to the live daemon.
+ * Copyright (c) 2026 Varun Pratap Bhardwaj / Qualixar — AGPL-3.0
+ */
+(function () {
+  'use strict';
+
+  var OVERLAY_ID = 'od-backup-overlay';
+  var P = 'od-bk';
+
+  /* ── Tiny utilities ──────────────────────────────────────── */
+  function esc(s) {
+    return String(s == null ? '' : s)
+      .replace(/&/g,'&amp;').replace(/</g,'&lt;')
+      .replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
+  }
+  function toast(msg, err) {
+    if (typeof window.showToast === 'function') { window.showToast(msg); return; }
+    var d = document.createElement('div');
+    d.textContent = msg;
+    Object.assign(d.style, { position:'fixed', bottom:'20px', right:'20px', zIndex:'99999',
+      background: err ? 'var(--danger)' : 'var(--violet)', color:'#fff',
+      padding:'10px 18px', borderRadius:'10px', fontSize:'13px',
+      boxShadow:'0 4px 16px rgba(0,0,0,.4)', maxWidth:'340px' });
+    document.body.appendChild(d);
+    setTimeout(function () { d.remove(); }, 3200);
+  }
+  function fmt(bytes) {
+    if (!bytes) return '0 MB';
+    var mb = bytes / 1048576;
+    return mb > 1024 ? (mb/1024).toFixed(1) + ' GB' : mb.toFixed(0) + ' MB';
+  }
+  function fmtDate(iso) {
+    if (!iso) return '—';
+    try { return new Date(iso).toLocaleString(); } catch (e) { return iso; }
+  }
+  function el(tag, attrs, css) {
+    var e = document.createElement(tag);
+    if (attrs) Object.keys(attrs).forEach(function (k) {
+      if (k === 'text') e.textContent = attrs[k]; else e.setAttribute(k, attrs[k]);
+    });
+    if (css) Object.assign(e.style, css);
+    return e;
+  }
+  function q(root, id) {
+    return (root || document).querySelector('#' + P + '-' + id);
+  }
+  function set(root, id, txt) {
+    var e = q(root, id); if (e) e.textContent = txt;
+  }
+
+  /* ── CSS injection (design-system classes from backup.html inline styles) ── */
+  function injectStyles() {
+    if (document.getElementById('od-bk-styles')) return;
+    var s = document.createElement('style');
+    s.id = 'od-bk-styles';
+    s.textContent = [
+      '.cloud-orb{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;',
+      'flex-shrink:0;background:linear-gradient(150deg,var(--violet),var(--cyan));',
+      'box-shadow:0 6px 20px -6px var(--violet)}',
+      '.cloud-orb svg{width:26px;height:26px;color:#fff}',
+      '.cloud-orb.off{background:var(--card-2);box-shadow:none}',
+      '.cloud-orb.off svg{color:var(--fg-3)}',
+      '.bk-conn{display:flex;align-items:center;gap:13px;padding:14px 0;',
+      'border-bottom:1px solid var(--border)}',
+      '.bk-conn:last-child{border-bottom:0}',
+      '.bk-conn-ic{width:38px;height:38px;border-radius:10px;flex-shrink:0;',
+      'display:grid;place-items:center;color:#fff}',
+      '.bk-conn-ic.gh{background:#24292f}',
+      '.bk-conn-ic.goog{background:#fff;border:1px solid var(--border)}',
+      '.bk-conn-ic.s3{background:var(--warn)}',
+      '.bk-conn.off .bk-conn-ic{filter:grayscale(1);opacity:.6}',
+      '.bk-ctl{display:flex;align-items:center;justify-content:space-between;',
+      'gap:16px;padding:13px 0;border-bottom:1px solid var(--border)}',
+      '.bk-ctl:last-child{border-bottom:0}'
+    ].join('');
+    document.head.appendChild(s);
+  }
+
+  /* ── Card factory ────────────────────────────────────────── */
+  // Returns {wrap, head, body} matching .card structure from design-system.css
+  function card(title, sub, ic) {
+    var wrap = el('div');
+    wrap.className = 'card';
+    Object.assign(wrap.style, { marginBottom:'16px' });
+    // card-head
+    var head = el('div');
+    head.className = 'card-head';
+    if (ic && typeof window.slmIcon === 'function') {
+      var icEl = el('span', null,
+        { color:'var(--violet)', width:'18px', height:'18px', display:'flex', flexShrink:'0' });
+      icEl.innerHTML = window.slmIcon(ic);
+      head.appendChild(icEl);
+    }
+    head.appendChild(el('h3', { text: title }));
+    if (sub) head.appendChild(el('span', { text: sub }, { className:'sub' }));
+    wrap.appendChild(head);
+    var body = el('div');
+    body.className = 'card-pad';
+    wrap.appendChild(body);
+    return { wrap: wrap, head: head, body: body };
+  }
+
+  /* ══════════════════════════════════════════════════════════
+     HERO SECTION  (matches design: card.glass + cloud-orb + badge + stats)
+  ══════════════════════════════════════════════════════════ */
+  function buildHero(root) {
+    var hero = el('section');
+    hero.className = 'card glass';
+    Object.assign(hero.style, { padding:'24px 26px', marginBottom:'16px' });
+
+    var inner = el('div', null,
+      { display:'flex', alignItems:'center', gap:'18px', flexWrap:'wrap' });
+
+    // Cloud orb icon (gradient, matches design)
+    var orb = el('span', { id: P + '-orb' });
+    orb.className = 'cloud-orb';
+    if (typeof window.slmIcon === 'function') {
+      orb.innerHTML = window.slmIcon('cloud');
+    } else {
+      orb.innerHTML = '<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor"' +
+        ' stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+        '<path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></svg>';
+    }
+    inner.appendChild(orb);
+
+    // Title + badge + sub
+    var titleArea = el('div', null, { flex:'1', minWidth:'200px' });
+    var titleRow = el('div', null, { display:'flex', alignItems:'center', gap:'10px' });
+    var titleEl = el('h3', { id: P + '-cloud-title', text:'Personal cloud connected' },
+      { fontSize:'17px', margin:'0' });
+    titleRow.appendChild(titleEl);
+    var syncBadge = el('span', { id: P + '-cloud-badge' });
+    syncBadge.className = 'badge ok';
+    syncBadge.innerHTML = '<span class="dot"></span> Synced';
+    titleRow.appendChild(syncBadge);
+    titleArea.appendChild(titleRow);
+    var subEl = el('p', { id: P + '-cloud-sub', text:'Connecting to your cloud…' },
+      { fontSize:'13px', marginTop:'4px', color:'var(--fg-2)' });
+    titleArea.appendChild(subEl);
+    inner.appendChild(titleArea);
+
+    // Stats: Last backup / Next scheduled / Encryption
+    var statsRow = el('div', null, { display:'flex', gap:'26px', flexWrap:'wrap' });
+    [
+      { id:'hero-last',    lbl:'Last backup' },
+      { id:'hero-next',    lbl:'Next scheduled' },
+      { id:'hero-encrypt', lbl:'Encryption' }
+    ].forEach(function (s) {
+      var item = el('div');
+      item.appendChild(el('div', { text: s.lbl },
+        { fontSize:'11px', color:'var(--fg-3)' }));
+      item.appendChild(el('div', { id: P + '-' + s.id, text:'…' },
+        { fontSize:'16px', fontWeight:'650', marginTop:'2px' }));
+      statsRow.appendChild(item);
+    });
+    inner.appendChild(statsRow);
+
+    // Buttons
+    var btnGroup = el('div', null,
+      { display:'flex', flexDirection:'column', gap:'8px', alignItems:'flex-end' });
+    var nowBtn = el('button', { type:'button', id: P + '-btn-now' });
+    nowBtn.className = 'btn primary';
+    if (typeof window.slmIcon === 'function') {
+      nowBtn.innerHTML = window.slmIcon('cloud') + ' Back up now';
+    } else {
+      nowBtn.textContent = 'Back up now';
+    }
+    nowBtn.addEventListener('click', doBackupNow.bind(null, root));
+    btnGroup.appendChild(nowBtn);
+
+    var exportBtn = el('button', { type:'button' });
+    exportBtn.className = 'btn ghost';
+    exportBtn.textContent = 'Export .db.gz';
+    exportBtn.addEventListener('click', function () {
+      window.location.href = '/api/backup/export';
+    });
+    btnGroup.appendChild(exportBtn);
+    inner.appendChild(btnGroup);
+
+    hero.appendChild(inner);
+    return hero;
+  }
+
+  /* ══════════════════════════════════════════════════════════
+     KPI STRIP  (design uses .kpi-strip + .card.kpi structure)
+  ══════════════════════════════════════════════════════════ */
+  function buildKPIs() {
+    var kpis = [
+      { id:'kpi-total', lbl:'Total backups',    icon:'cloud' },
+      { id:'kpi-size',  lbl:'Cloud storage used', icon:'memories' },
+      { id:'kpi-retain',lbl:'Retention',         icon:'clock' },
+      { id:'kpi-count', lbl:'Restore points',    icon:'shield' }
+    ];
+    var strip = el('div', null, { marginBottom:'16px' });
+    strip.className = 'kpi-strip';
+    kpis.forEach(function (k) {
+      var tile = el('div');
+      tile.className = 'card kpi';
+      var lbl = el('div');
+      lbl.className = 'label';
+      if (typeof window.slmIcon === 'function') {
+        var icEl = el('span', null, { display:'contents' });
+        icEl.innerHTML = window.slmIcon(k.icon);
+        lbl.appendChild(icEl);
+      }
+      lbl.appendChild(document.createTextNode(' ' + k.lbl));
+      tile.appendChild(lbl);
+      var val = el('div', { id: P + '-' + k.id, text:'—' });
+      val.className = 'value num';
+      // Retention value ("10 snapshots") wraps at 30px — design overrides to 22px for this tile
+      if (k.id === 'kpi-retain') val.style.fontSize = '22px';
+      tile.appendChild(val);
+      strip.appendChild(tile);
+    });
+    return strip;
+  }
+
+  /* ══════════════════════════════════════════════════════════
+     CONNECTIONS — GitHub + Google OAuth + S3
+     Design: .bk-conn rows with .bk-conn-ic.gh/.goog/.s3 brand icons
+  ══════════════════════════════════════════════════════════ */
+  var PROVIDERS = [
+    { id:'github', label:'GitHub',
+      icClass:'gh',   oauthPath:'/api/backup/oauth/github/start',
+      hint:'Connect as your GitHub account to mirror backups to a private repo.' },
+    { id:'google', label:'Google (Gmail)',
+      icClass:'goog', oauthPath:'/api/backup/oauth/google/start',
+      hint:'Back up to Google Drive via your Gmail account.' },
+    { id:'s3',     label:'Custom S3 / WebDAV',
+      icClass:'s3',   oauthPath:'/api/backup/oauth/s3/start',
+      hint:'Bring your own S3-compatible bucket (Wasabi, MinIO, Cloudflare R2).' }
+  ];
+
+  // Inject brand SVGs after DOM settles — same pattern as design's backup.html
+  function injectConnIcons(container) {
+    var gh = container.querySelector('.bk-conn-ic.gh');
+    if (gh && typeof window.slmIcon === 'function') gh.innerHTML = window.slmIcon('github');
+    var goog = container.querySelector('.bk-conn-ic.goog');
+    if (goog) goog.innerHTML =
+      '<svg viewBox="0 0 24 24" width="20" height="20">' +
+      '<path fill="#4285F4" d="M21.6 12.2c0-.6-.1-1.2-.2-1.8H12v3.4h5.4a4.6 4.6 0 0 1-2 3v2.5h3.2c1.9-1.7 3-4.3 3-7.1z"/>' +
+      '<path fill="#34A853" d="M12 22c2.7 0 5-.9 6.6-2.4l-3.2-2.5c-.9.6-2 .9-3.4.9-2.6 0-4.8-1.7-5.6-4.1H3.1v2.6A10 10 0 0 0 12 22z"/>' +
+      '<path fill="#FBBC05" d="M6.4 13.9a6 6 0 0 1 0-3.8V7.5H3.1a10 10 0 0 0 0 9z"/>' +
+      '<path fill="#EA4335" d="M12 6.6c1.5 0 2.8.5 3.8 1.5l2.8-2.8A10 10 0 0 0 3.1 7.5l3.3 2.6C7.2 8.3 9.4 6.6 12 6.6z"/>' +
+      '</svg>';
+    var s3 = container.querySelector('.bk-conn-ic.s3');
+    if (s3 && typeof window.slmIcon === 'function') s3.innerHTML = window.slmIcon('cloud');
+  }
+
+  function buildConnections(root) {
+    var c = card('Connections', 'connect your own accounts', 'mesh');
+    c.body.style.padding = '0 20px';
+    var connList = el('div', { id: P + '-conn-list' });
+    c.body.appendChild(connList);
+    return c.wrap;
+  }
+
+  function renderConnections(root, destinations) {
+    var connList = q(root, 'conn-list'); if (!connList) return;
+    connList.innerHTML = '';
+    var frag = document.createDocumentFragment();
+    PROVIDERS.forEach(function (prov) {
+      var dest = destinations.filter(function (d) {
+        return d.type === prov.id || d.provider === prov.id;
+      })[0];
+      frag.appendChild(buildConnRow(root, prov, dest || null));
+    });
+    connList.appendChild(frag);
+    // Inject brand icons after DOM insertion
+    injectConnIcons(connList);
+  }
+
+  function buildConnRow(root, prov, dest) {
+    var row = el('div');
+    row.className = 'bk-conn' + (dest ? '' : ' off');
+    row.setAttribute('data-conn', prov.id);
+
+    // Brand icon
+    var iconWrap = el('span');
+    iconWrap.className = 'bk-conn-ic ' + prov.icClass;
+    row.appendChild(iconWrap);
+
+    // Info area
+    var info = el('div', null, { flex:'1' });
+    info.appendChild(el('b', { text: prov.label }));
+    var detailEl = el('div');
+    detailEl.className = 'dim';
+    Object.assign(detailEl.style, { fontSize:'12.5px' });
+    if (dest) {
+      var repoOrBucket = dest.repo || dest.bucket || dest.folder_id || '';
+      detailEl.innerHTML = 'Connected' +
+        (repoOrBucket ? ' · <span class="mono">' + esc(repoOrBucket) + '</span>' : '');
+    } else {
+      detailEl.textContent = prov.hint;
+    }
+    info.appendChild(detailEl);
+    row.appendChild(info);
+
+    // Action button
+    var btnWrap = el('div', null, { display:'flex', gap:'7px', flexShrink:'0' });
+    if (dest) {
+      var syncBtn = el('button', { type:'button' });
+      syncBtn.className = 'btn sm ghost';
+      syncBtn.textContent = 'Sync';
+      syncBtn.addEventListener('click', function () {
+        doSync(root, dest.id || dest.dest_id || prov.id);
+      });
+      btnWrap.appendChild(syncBtn);
+
+      var discBtn = el('button', { type:'button' });
+      discBtn.className = 'btn sm';
+      discBtn.textContent = 'Disconnect';
+      discBtn.addEventListener('click', function () {
+        doDisconnect(root, dest.id || dest.dest_id || prov.id);
+      });
+      btnWrap.appendChild(discBtn);
+    } else {
+      var connBtn = el('button', { type:'button' });
+      connBtn.className = 'btn sm primary';
+      connBtn.textContent = 'Connect';
+      connBtn.addEventListener('click', function () {
+        openOAuth(root, prov.oauthPath, prov.label);
+      });
+      btnWrap.appendChild(connBtn);
+    }
+    row.appendChild(btnWrap);
+    return row;
+  }
+
+  /* ══════════════════════════════════════════════════════════
+     BACKUP SCOPE + SCHEDULE
+     Design: .bk-ctl rows with .switch toggles; Schedule at bottom
+  ══════════════════════════════════════════════════════════ */
+  function buildScope() {
+    var c = card('Backup scope', 'choose what mirrors to the cloud', 'operations');
+
+    // Scope items — matching design's 4 items with toggle switches
+    var scopeItems = [
+      { id:'scope-mem',   lbl:'Memories',
+        sub:'<span class="mono">memory.db</span> · facts & conversations', on: true },
+      { id:'scope-learn', lbl:'Learning data',
+        sub:'<span class="mono">learning.db</span> · ranking model', on: true },
+      { id:'scope-cfg',   lbl:'Config & profiles',
+        sub:'<span class="mono">config.json</span> · modes, providers', on: true },
+      { id:'scope-cache', lbl:'Optimization cache',
+        sub:'<span class="mono">llmcache.db</span> · rebuildable', on: false }
+    ];
+
+    scopeItems.forEach(function (item) {
+      var row = el('div');
+      row.className = 'bk-ctl';
+
+      var labelGroup = el('div');
+      labelGroup.appendChild(el('b', { text: item.lbl }));
+      var subEl = el('div');
+      subEl.className = 'dim';
+      subEl.style.fontSize = '12.5px';
+      subEl.innerHTML = item.sub;
+      labelGroup.appendChild(subEl);
+      row.appendChild(labelGroup);
+
+      var sw = el('button', { type:'button', id: P + '-' + item.id });
+      sw.className = 'switch' + (item.on ? ' on' : '');
+      sw.setAttribute('role', 'switch');
+      sw.setAttribute('aria-checked', String(item.on));
+      sw.addEventListener('click', function () {
+        sw.classList.toggle('on');
+        sw.setAttribute('aria-checked', String(sw.classList.contains('on')));
+        // No dedicated /api/backup/scope endpoint yet
+      });
+      row.appendChild(sw);
+      c.body.appendChild(row);
+    });
+
+    // Schedule row — matching design
+    var schedRow = el('div');
+    schedRow.className = 'bk-ctl';
+    schedRow.appendChild(el('b', { text: 'Schedule' }));
+
+    var segs = ['Manual', 'Daily', 'Weekly'];
+    var segWrap = el('div');
+    segWrap.className = 'seg';
+    segs.forEach(function (s) {
+      var b = el('button', { type:'button', id: P + '-seg-' + s.toLowerCase() });
+      b.textContent = s;
+      if (s === 'Daily') b.className = 'active';
+      b.addEventListener('click', function () {
+        segs.forEach(function (t) {
+          var tb = document.getElementById(P + '-seg-' + t.toLowerCase());
+          if (tb) tb.className = (t === s ? 'active' : '');
+        });
+        var hours = s === 'Daily' ? 24 : s === 'Manual' ? 0 : 168;
+        fetch('/api/backup/configure', {
+          method:'POST', headers:{'Content-Type':'application/json'},
+          body:JSON.stringify({ interval_hours: hours })
+        }).then(function (r) { return r.json(); })
+          .then(function () { toast(s + ' schedule saved'); })
+          .catch(function () { toast('Schedule save failed', true); });
+      });
+      segWrap.appendChild(b);
+    });
+    schedRow.appendChild(segWrap);
+    c.body.appendChild(schedRow);
+
+    return c.wrap;
+  }
+
+  /* ══════════════════════════════════════════════════════════
+     BACKUP HISTORY TABLE
+     Design: .tbl class, columns When/Scope/Size/Destination/Status/Restore
+     card-head has sub "every snapshot is restorable" + All/Cloud/Local seg
+  ══════════════════════════════════════════════════════════ */
+  // Map backup type from API to a human-readable scope string
+  function fmtScope(bk) {
+    var t = (bk.type || 'memory').toLowerCase();
+    if (t === 'full')     return 'Memories · Learning · Config';
+    if (t === 'memory')   return 'Memories';
+    if (t === 'learning') return 'Learning data';
+    if (t === 'config')   return 'Config & profiles';
+    return esc(t);
+  }
+
+  function fmtDest(bk) {
+    var d = bk.destination || bk.dest || '';
+    if (!d) return 'local · ~/.slm/backups';
+    return esc(d);
+  }
+
+  var _histFilter = 'all'; // all | cloud | local
+
+  function buildHistory() {
+    var c = card('Backup history', 'every snapshot is restorable', 'health');
+
+    // Add filter segment to card-head (All / Cloud / Local)
+    var spacer = el('div');
+    spacer.className = 'spacer';
+    c.head.appendChild(spacer);
+
+    var seg = el('div');
+    seg.className = 'seg';
+    ['All', 'Cloud', 'Local'].forEach(function (f) {
+      var b = el('button', { type:'button', id: P + '-hist-' + f.toLowerCase() });
+      b.textContent = f;
+      if (f === 'All') b.className = 'active';
+      b.addEventListener('click', function () {
+        ['all','cloud','local'].forEach(function (k) {
+          var btn = document.getElementById(P + '-hist-' + k);
+          if (btn) btn.className = (k === f.toLowerCase() ? 'active' : '');
+        });
+        _histFilter = f.toLowerCase();
+      });
+      seg.appendChild(b);
+    });
+    c.head.appendChild(seg);
+
+    c.body.style.padding = '0';
+    var wrap = el('div', { id: P + '-history-wrap' });
+    c.body.appendChild(wrap);
+    return c.wrap;
+  }
+
+  function renderHistory(root, backups) {
+    var wrap = q(root, 'history-wrap'); if (!wrap) return;
+    if (!backups || backups.length === 0) {
+      wrap.innerHTML = '<div style="padding:28px;text-align:center;color:var(--fg-2);' +
+        'font-size:13px">No backups yet. Click "Back up now" to create your first snapshot.</div>';
+      return;
+    }
+    var table = el('table');
+    table.className = 'tbl';
+    table.id = P + '-hist-tbl';
+
+    var thead = el('thead');
+    var headTr = el('tr');
+    ['When', 'Scope', 'Size', 'Destination', 'Status', ''].forEach(function (h) {
+      var th = el('th', { text: h });
+      headTr.appendChild(th);
+    });
+    thead.appendChild(headTr);
+    table.appendChild(thead);
+
+    var tbody = el('tbody');
+    backups.slice(0, 20).forEach(function (bk) {
+      var tr = el('tr');
+      // When
+      var tdWhen = el('td'); tdWhen.className = 'dim';
+      tdWhen.textContent = fmtDate(bk.created);
+      tr.appendChild(tdWhen);
+      // Scope
+      var tdScope = el('td');
+      tdScope.textContent = fmtScope(bk);
+      tr.appendChild(tdScope);
+      // Size
+      var tdSize = el('td'); tdSize.className = 'num';
+      tdSize.textContent = bk.size_mb ? bk.size_mb.toFixed(0) + ' MB' : '—';
+      tr.appendChild(tdSize);
+      // Destination
+      var tdDest = el('td'); tdDest.className = 'mono';
+      tdDest.style.fontSize = '12px';
+      tdDest.textContent = fmtDest(bk);
+      tr.appendChild(tdDest);
+      // Status badge
+      var tdStatus = el('td');
+      var statusBadge = el('span');
+      var statusTxt = bk.status || 'Complete';
+      statusBadge.className = 'badge ' +
+        (statusTxt === 'Complete' || statusTxt === 'ok' ? 'ok' :
+         statusTxt === 'Partial' ? 'warn' : 'danger');
+      statusBadge.innerHTML = '<span class="dot"></span>' + esc(statusTxt);
+      tdStatus.appendChild(statusBadge);
+      tr.appendChild(tdStatus);
+      // Restore button
+      var tdAct = el('td', null, { textAlign:'right' });
+      var restoreBtn = el('button', { type:'button' });
+      restoreBtn.className = 'btn sm ghost';
+      restoreBtn.textContent = 'Restore';
+      restoreBtn.addEventListener('click', function () {
+        toast('Restore from ' + (bk.filename || 'snapshot') + ' — not yet implemented');
+      });
+      tdAct.appendChild(restoreBtn);
+      tr.appendChild(tdAct);
+      tbody.appendChild(tr);
+    });
+    table.appendChild(tbody);
+    wrap.innerHTML = '';
+    wrap.appendChild(table);
+  }
+
+  /* ══════════════════════════════════════════════════════════
+     ACTIONS: backup now, sync, disconnect, oauth
+  ══════════════════════════════════════════════════════════ */
+  function doBackupNow(root) {
+    var btn = q(root, 'btn-now'); if (btn) { btn.disabled = true; btn.textContent = 'Creating…'; }
+    fetch('/api/backup/create', { method:'POST' })
+      .then(function (r) { return r.json(); })
+      .then(function (d) {
+        toast(d.success ? 'Backup created: ' + esc(d.filename || '') : 'Backup failed', !d.success);
+        if (btn) { btn.disabled = false; btn.textContent = 'Back up now'; }
+        loadAll(root);
+      })
+      .catch(function () {
+        toast('Backup failed', true);
+        if (btn) { btn.disabled = false; btn.textContent = 'Back up now'; }
+      });
+  }
+
+  function doSync(root, destId) {
+    fetch('/api/backup/sync', { method:'POST', headers:{'Content-Type':'application/json'},
+      body:JSON.stringify({ destination_id: destId })
+    }).then(function (r) { return r.json(); })
+      .then(function (d) { toast(d.success ? 'Sync started' : 'Sync failed: ' + esc(d.error || ''), !d.success); })
+      .catch(function () { toast('Sync error', true); });
+  }
+
+  function doDisconnect(root, destId) {
+    if (!window.confirm('Disconnect this cloud destination? Existing backups are not deleted.')) return;
+    fetch('/api/backup/disconnect/' + encodeURIComponent(destId), { method:'DELETE' })
+      .then(function (r) { return r.json(); })
+      .then(function (d) {
+        toast(d.success ? 'Disconnected' : 'Disconnect failed: ' + esc(d.error || ''), !d.success);
+        loadDestinations(root);
+      })
+      .catch(function () { toast('Disconnect failed', true); });
+  }
+
+  function openOAuth(root, oauthPath, providerLabel) {
+    var popup = window.open(oauthPath, providerLabel + '-oauth', 'width=560,height=700');
+    if (!popup) { toast('Popup blocked — allow popups for this page', true); return; }
+    var timer = setInterval(function () {
+      if (!popup || popup.closed) {
+        clearInterval(timer);
+        // Reload destinations after OAuth popup closes
+        loadDestinations(root, true);
+      }
+    }, 800);
+  }
+
+  /* ══════════════════════════════════════════════════════════
+     DATA LOADING
+  ══════════════════════════════════════════════════════════ */
+  function loadStatus(root) {
+    fetch('/api/backup/status').then(function (r) { return r.ok ? r.json() : null; })
+      .then(function (d) {
+        if (!d) return;
+
+        // Hero stats
+        var lastStr = d.last_backup ? fmtDate(d.last_backup) : 'Never';
+        set(root, 'hero-last',    lastStr);
+        var next = d.last_backup && d.interval_hours
+          ? new Date(new Date(d.last_backup).getTime() + d.interval_hours * 3600000).toLocaleString()
+          : (d.enabled ? 'Scheduled' : 'Manual only');
+        set(root, 'hero-next',    next);
+        set(root, 'hero-encrypt', 'AES-256');
+
+        // Hero title + badge: reflect connection state
+        var hasCloud = d.cloud_destinations && d.cloud_destinations.length > 0;
+        var titleEl = q(root, 'cloud-title');
+        if (titleEl) titleEl.textContent = hasCloud ? 'Personal cloud connected' : 'No personal cloud';
+        var badgeEl = q(root, 'cloud-badge');
+        if (badgeEl) {
+          badgeEl.className = 'badge ' + (hasCloud ? 'ok' : 'warn');
+          badgeEl.innerHTML = '<span class="dot"></span> ' + (hasCloud ? 'Synced' : 'Not connected');
+        }
+        var subEl = q(root, 'cloud-sub');
+        if (subEl) {
+          if (hasCloud) {
+            var dest = d.cloud_destinations[0];
+            var destStr = dest.repo || dest.bucket || dest.folder_id || dest.provider || 'cloud';
+            subEl.innerHTML = 'Mirroring to <b>' + esc(destStr) + '</b> · encrypted with your local key.';
+          } else {
+            subEl.textContent = 'Connect a provider below to enable encrypted cloud mirroring.';
+          }
+        }
+        var orb = q(root, 'orb');
+        if (orb) orb.classList.toggle('off', !hasCloud);
+
+        // KPI values (matched to new KPI ids)
+        var cnt = d.backup_count || d.learning_backup_count || 0;
+        set(root, 'kpi-total',  String(cnt));
+        var totalMb = d.total_size_mb || 0;
+        set(root, 'kpi-size',   totalMb > 1024
+          ? (totalMb / 1024).toFixed(1) + ' GB'
+          : totalMb.toFixed(0) + ' MB');
+        set(root, 'kpi-retain', (d.max_backups || cnt) + ' snapshots');
+        set(root, 'kpi-count',  String(cnt));
+
+        if (d.backups) renderHistory(root, d.backups);
+
+        // Sync schedule segment buttons
+        var hours = d.interval_hours || 168;
+        var active = hours <= 24 ? 'daily' : hours >= 9999 ? 'manual' : 'weekly';
+        ['daily','weekly','manual'].forEach(function (s) {
+          var b = document.getElementById(P + '-seg-' + s);
+          if (b) b.className = (s === active ? 'active' : '');
+        });
+      }).catch(function () {});
+  }
+
+  function loadDestinations(root, forceReload) {
+    fetch('/api/backup/destinations').then(function (r) { return r.ok ? r.json() : null; })
+      .then(function (d) {
+        var dests = d && d.destinations ? d.destinations : [];
+        renderConnections(root, dests);
+        if (forceReload) {
+          toast(dests.length > 0 ? 'Connected successfully' : 'Connection complete');
+          // Re-load status so hero reflects new connection state
+          loadStatus(root);
+        }
+      }).catch(function () {});
+  }
+
+  function loadList(root) {
+    fetch('/api/backup/list').then(function (r) { return r.ok ? r.json() : null; })
+      .then(function (d) {
+        if (d && d.backups) renderHistory(root, d.backups);
+      }).catch(function () {});
+  }
+
+  function loadAll(root) {
+    loadStatus(root);
+    loadDestinations(root);
+    loadList(root);
+  }
+
+  /* ══════════════════════════════════════════════════════════
+     MAIN RENDER
+  ══════════════════════════════════════════════════════════ */
+  function odRenderBackup(container) {
+    if (!container) return;
+    injectStyles();
+    // Clear skeleton / prior render
+    Array.from(container.children).forEach(function (c) { c.style.display = 'none'; });
+
+    var hub = el('div', null, { padding:'26px', maxWidth:'960px' });
+
+    // Page head — matches design's <div class="page-head"> block
+    var pageHead = el('div');
+    pageHead.className = 'page-head';
+    pageHead.appendChild(el('h2', { text:'Backup & cloud sync' }));
+    var desc = el('p');
+    desc.innerHTML = 'Your memory lives on this machine. Optionally encrypt and mirror it to' +
+      ' <b>your own</b> cloud — a private GitHub repo or your Google Drive via Gmail.' +
+      ' You hold the keys; SuperLocalMemory never sees your data.';
+    pageHead.appendChild(desc);
+    hub.appendChild(pageHead);
+
+    hub.appendChild(buildHero(hub));
+    hub.appendChild(buildKPIs());
+
+    // Two-column area: Connections | Scope
+    var twoCol = el('div');
+    twoCol.className = 'grid';
+    twoCol.style.gridTemplateColumns = '1fr 1fr';
+    twoCol.style.alignItems = 'start';
+    twoCol.appendChild(buildConnections(hub));
+    twoCol.appendChild(buildScope());
+    hub.appendChild(twoCol);
+
+    hub.appendChild(buildHistory());
+    container.insertBefore(hub, container.firstChild);
+    loadAll(hub);
+  }
+
+  /* ══════════════════════════════════════════════════════════
+     OVERLAY — called from od-settings.js Backup group
+  ══════════════════════════════════════════════════════════ */
+  function odOpenBackupDashboard() {
+    var existing = document.getElementById(OVERLAY_ID);
+    if (existing) { existing.style.display = 'flex'; loadAll(existing); return; }
+
+    var overlay = el('div', { id: OVERLAY_ID }, {
+      position:'fixed', inset:'0', zIndex:'9000',
+      background:'var(--page)', overflowY:'auto',
+      display:'flex', flexDirection:'column'
+    });
+
+    // Top bar with close button
+    var topbar = el('div', null, { position:'sticky', top:'0', zIndex:'9001',
+      background:'var(--card)', borderBottom:'1px solid var(--border)',
+      display:'flex', alignItems:'center', gap:'12px', padding:'0 22px', height:'52px' });
+
+    var backBtn = el('button', { type:'button' }); backBtn.className = 'btn ghost sm';
+    backBtn.textContent = '← Settings';
+    backBtn.addEventListener('click', function () {
+      overlay.style.display = 'none';
+    });
+    topbar.appendChild(backBtn);
+    topbar.appendChild(el('span', { text:'Backup & Cloud' },
+      { fontWeight:'640', fontSize:'15px' }));
+
+    var escHint = el('span', { text:'Esc to close' },
+      { marginLeft:'auto', fontSize:'11.5px', color:'var(--fg-3)' });
+    topbar.appendChild(escHint);
+
+    overlay.appendChild(topbar);
+
+    // Content area
+    var content = el('div', null, { flex:'1', padding:'22px' });
+    overlay.appendChild(content);
+    document.body.appendChild(overlay);
+
+    // ESC key close
+    document.addEventListener('keydown', function onEsc(e) {
+      if (e.key === 'Escape' && overlay.style.display !== 'none') {
+        overlay.style.display = 'none';
+      }
+    });
+
+    odRenderBackup(content);
+  }
+
+  /* ══════════════════════════════════════════════════════════
+     BOOT
+  ══════════════════════════════════════════════════════════ */
+  window.odRenderBackup      = odRenderBackup;
+  window.odOpenBackupDashboard = odOpenBackupDashboard;
+
+  document.addEventListener('DOMContentLoaded', function () {
+    // Wire into a backup-pane if the shell gains one in future
+    var pane = document.getElementById('backup-pane');
+    if (pane) odRenderBackup(pane);
+  });
+
+}());