feat: cloud backup destinations + long-term resource history

Cloud backups (Dropbox / WebDAV / SFTP):
- backup-manager.js: save + load handlers per provider, credential
  resolution via credentialManager, destination probe.
- routes/backups.js: /credentials/{provider} (masked GET, POST, DELETE),
  /test-destination, scheduling endpoints.
- status/js/backup-restore.js: destination picker, provider-specific
  credential forms, test button wired to backend probe.
- npm deps already present (dropbox 10.34.0, webdav 5.7.1,
  ssh2-sftp-client 11.0.0).

Resource history:
- resource-monitor.js: three-tier rollup storage — raw 10s samples
  (7-day retention), hourly rollups (30-day), daily rollups
  (365-day). getHistoryByRange() auto-selects the appropriate tier.
- routes/monitoring.js: /monitoring/history/:containerId now supports
  startTime/endTime range mode (legacy ?hours=N still works).
- status/js/resource-monitor.js + dashboard.css: "History" tab with
  range buttons (1h/24h/7d/30d/1y), SVG sparklines for
  CPU / memory / network. Renderer handles raw and rolled-up shapes.

status/dist/features.js rebuilt from source via build.js.

Lifted out of wip/cloud-backups-and-history; the half-finished
app-deps feature from that branch (frontend calls /api/v1/apps/
check-dependencies but the endpoint doesn't exist) is preserved
separately on wip/app-deps for later.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

dashcaddy-api/backup-manager.js

@@ -543,11 +543,36 @@ class BackupManager extends EventEmitter {
     switch (destination.type) {
       case 'local':
         return await this.saveToLocal(data, destination, backupId);
+      case 'dropbox':
+        return await this.saveToDropbox(data, destination, backupId);
+      case 'webdav':
+        return await this.saveToWebDAV(data, destination, backupId);
+      case 'sftp':
+        return await this.saveToSFTP(data, destination, backupId);
       default:
         throw new Error(`Unsupported destination type: ${destination.type}`);
     }
   }
 
+  /**
+   * Load encrypted backup blob from a destination location.
+   * Returns a Buffer that can be passed to decryptBackup/decompressBackup.
+   */
+  async loadFromDestination(location) {
+    switch (location.type) {
+      case 'local':
+        return fs.readFileSync(location.path);
+      case 'dropbox':
+        return await this.loadFromDropbox(location);
+      case 'webdav':
+        return await this.loadFromWebDAV(location);
+      case 'sftp':
+        return await this.loadFromSFTP(location);
+      default:
+        throw new Error(`Unsupported destination type: ${location.type}`);
+    }
+  }
+
   /**
    * Save to local filesystem
    */
@@ -571,6 +596,257 @@ class BackupManager extends EventEmitter {
     };
   }
 
+  // ==================== CLOUD DESTINATIONS ====================
+
+  /**
+   * Resolve credentials for a given provider via the credentialManager.
+   * Throws if required fields are missing.
+   */
+  async _getCloudCredentials(provider) {
+    const credentialManager = require('./credential-manager');
+    const creds = {};
+    if (provider === 'dropbox') {
+      creds.token = await credentialManager.retrieve('backup.dropbox.token');
+      if (!creds.token) throw new Error('Dropbox token not configured');
+    } else if (provider === 'webdav') {
+      creds.url = await credentialManager.retrieve('backup.webdav.url');
+      creds.username = await credentialManager.retrieve('backup.webdav.username');
+      creds.password = await credentialManager.retrieve('backup.webdav.password');
+      if (!creds.url || !creds.username || !creds.password) {
+        throw new Error('WebDAV credentials incomplete (need url, username, password)');
+      }
+    } else if (provider === 'sftp') {
+      creds.host = await credentialManager.retrieve('backup.sftp.host');
+      const portStr = await credentialManager.retrieve('backup.sftp.port');
+      creds.port = parseInt(portStr || '22', 10);
+      creds.username = await credentialManager.retrieve('backup.sftp.username');
+      creds.password = await credentialManager.retrieve('backup.sftp.password');
+      creds.privateKey = await credentialManager.retrieve('backup.sftp.privateKey');
+      if (!creds.host || !creds.username || (!creds.password && !creds.privateKey)) {
+        throw new Error('SFTP credentials incomplete (need host, username, and either password or privateKey)');
+      }
+    }
+    return creds;
+  }
+
+  // ----- Dropbox -----
+
+  async saveToDropbox(data, destination, backupId) {
+    const { Dropbox } = require('dropbox');
+    const creds = await this._getCloudCredentials('dropbox');
+    const dbx = new Dropbox({ accessToken: creds.token });
+
+    const folder = (destination.path || '/dashcaddy-backups').replace(/\/+$/, '');
+    const remotePath = `${folder}/${backupId}.backup`;
+
+    await dbx.filesUpload({
+      path: remotePath,
+      contents: data,
+      mode: { '.tag': 'overwrite' },
+      autorename: false,
+      mute: true
+    });
+
+    return {
+      type: 'dropbox',
+      path: remotePath,
+      size: data.length
+    };
+  }
+
+  async loadFromDropbox(location) {
+    const { Dropbox } = require('dropbox');
+    const creds = await this._getCloudCredentials('dropbox');
+    const dbx = new Dropbox({ accessToken: creds.token });
+    const result = await dbx.filesDownload({ path: location.path });
+    // Node SDK returns fileBinary on the result
+    const fileBinary = result.result.fileBinary || result.result.fileBlob;
+    if (Buffer.isBuffer(fileBinary)) return fileBinary;
+    return Buffer.from(fileBinary);
+  }
+
+  // ----- WebDAV -----
+
+  async saveToWebDAV(data, destination, backupId) {
+    const { createClient } = require('webdav');
+    const creds = await this._getCloudCredentials('webdav');
+    const client = createClient(creds.url, {
+      username: creds.username,
+      password: creds.password
+    });
+
+    const folder = (destination.path || '/dashcaddy-backups').replace(/\/+$/, '');
+
+    // Ensure folder exists
+    try {
+      const exists = await client.exists(folder);
+      if (!exists) await client.createDirectory(folder, { recursive: true });
+    } catch (_) {
+      // best-effort
+    }
+
+    const remotePath = `${folder}/${backupId}.backup`;
+    await client.putFileContents(remotePath, data, { overwrite: true });
+
+    return {
+      type: 'webdav',
+      path: remotePath,
+      size: data.length
+    };
+  }
+
+  async loadFromWebDAV(location) {
+    const { createClient } = require('webdav');
+    const creds = await this._getCloudCredentials('webdav');
+    const client = createClient(creds.url, {
+      username: creds.username,
+      password: creds.password
+    });
+    const data = await client.getFileContents(location.path);
+    return Buffer.isBuffer(data) ? data : Buffer.from(data);
+  }
+
+  // ----- SFTP -----
+
+  async saveToSFTP(data, destination, backupId) {
+    const SftpClient = require('ssh2-sftp-client');
+    const creds = await this._getCloudCredentials('sftp');
+    const client = new SftpClient();
+
+    try {
+      await client.connect({
+        host: creds.host,
+        port: creds.port,
+        username: creds.username,
+        password: creds.password || undefined,
+        privateKey: creds.privateKey || undefined
+      });
+
+      const folder = (destination.path || '/dashcaddy-backups').replace(/\/+$/, '');
+      // Ensure remote dir exists
+      try {
+        const exists = await client.exists(folder);
+        if (!exists) await client.mkdir(folder, true);
+      } catch (_) {
+        // best-effort
+      }
+
+      const remotePath = `${folder}/${backupId}.backup`;
+      await client.put(Buffer.from(data), remotePath);
+
+      return {
+        type: 'sftp',
+        path: remotePath,
+        size: data.length
+      };
+    } finally {
+      try { await client.end(); } catch (_) {}
+    }
+  }
+
+  async loadFromSFTP(location) {
+    const SftpClient = require('ssh2-sftp-client');
+    const creds = await this._getCloudCredentials('sftp');
+    const client = new SftpClient();
+    try {
+      await client.connect({
+        host: creds.host,
+        port: creds.port,
+        username: creds.username,
+        password: creds.password || undefined,
+        privateKey: creds.privateKey || undefined
+      });
+      const buffer = await client.get(location.path);
+      return Buffer.isBuffer(buffer) ? buffer : Buffer.from(buffer);
+    } finally {
+      try { await client.end(); } catch (_) {}
+    }
+  }
+
+  /**
+   * Test that a destination is reachable + writable + deletable.
+   * Performs a small write/read/delete probe.
+   */
+  async testDestination(destination) {
+    const probeId = `test-${Date.now()}`;
+    const probeData = Buffer.from(`dashcaddy-test-${probeId}`);
+    const start = Date.now();
+
+    try {
+      const location = await this.saveToDestination(probeData, destination, probeId);
+
+      // Read it back
+      let readBack = null;
+      try {
+        readBack = await this.loadFromDestination(location);
+      } catch (_) {
+        // Some providers (e.g. local) we already trust the file system; skip
+      }
+
+      // Delete the probe
+      try {
+        await this._deleteFromDestination(location);
+      } catch (_) {}
+
+      const elapsed = Date.now() - start;
+      return {
+        success: true,
+        type: destination.type,
+        elapsedMs: elapsed,
+        verified: readBack ? readBack.equals(probeData) : null
+      };
+    } catch (error) {
+      return {
+        success: false,
+        type: destination.type,
+        error: error.message,
+        elapsedMs: Date.now() - start
+      };
+    }
+  }
+
+  /**
+   * Delete a backup from a destination location
+   */
+  async _deleteFromDestination(location) {
+    if (location.type === 'local') {
+      if (fs.existsSync(location.path)) fs.unlinkSync(location.path);
+      return;
+    }
+    if (location.type === 'dropbox') {
+      const { Dropbox } = require('dropbox');
+      const creds = await this._getCloudCredentials('dropbox');
+      const dbx = new Dropbox({ accessToken: creds.token });
+      try { await dbx.filesDeleteV2({ path: location.path }); } catch (_) {}
+      return;
+    }
+    if (location.type === 'webdav') {
+      const { createClient } = require('webdav');
+      const creds = await this._getCloudCredentials('webdav');
+      const client = createClient(creds.url, { username: creds.username, password: creds.password });
+      try { await client.deleteFile(location.path); } catch (_) {}
+      return;
+    }
+    if (location.type === 'sftp') {
+      const SftpClient = require('ssh2-sftp-client');
+      const creds = await this._getCloudCredentials('sftp');
+      const client = new SftpClient();
+      try {
+        await client.connect({
+          host: creds.host,
+          port: creds.port,
+          username: creds.username,
+          password: creds.password || undefined,
+          privateKey: creds.privateKey || undefined
+        });
+        try { await client.delete(location.path); } catch (_) {}
+      } finally {
+        try { await client.end(); } catch (_) {}
+      }
+      return;
+    }
+  }
+
   /**
    * Verify backup integrity
    */
@@ -605,9 +881,24 @@ class BackupManager extends EventEmitter {
         throw new Error(`Backup not found: ${backupId}`);
       }
 
-      // Load backup data
+      // Load backup data — try each destination location until one succeeds
-      const location = backup.locations[0]; // Use first location
+      const location = backup.locations[0]; // Primary location
-      let data = fs.readFileSync(location.path);
+      let data;
+      try {
+        data = await this.loadFromDestination(location);
+      } catch (loadErr) {
+        // Fall back to other locations if available
+        let recovered = false;
+        for (let i = 1; i < backup.locations.length; i++) {
+          try {
+            data = await this.loadFromDestination(backup.locations[i]);
+            recovered = true;
+            console.log(`[BackupManager] Loaded backup from fallback location ${backup.locations[i].type}`);
+            break;
+          } catch (_) {}
+        }
+        if (!recovered) throw loadErr;
+      }
 
       // Decrypt if needed
       if (backup.encrypted && options.encryptionKey) {
@@ -718,10 +1009,12 @@ class BackupManager extends EventEmitter {
 
     for (const backup of toDelete) {
       try {
-        // Delete from all locations
+        // Delete from all locations (local + cloud)
         for (const location of backup.locations) {
-          if (location.type === 'local' && fs.existsSync(location.path)) {
+          try {
-            fs.unlinkSync(location.path);
+            await this._deleteFromDestination(location);
+          } catch (delErr) {
+            console.warn(`[BackupManager] Could not delete ${location.type} location for ${backup.id}:`, delErr.message);
           }
         }
 

dashcaddy-api/resource-monitor.js

@@ -13,20 +13,32 @@ const docker = new Docker();
 
 // Configuration
 const STATS_FILE = process.env.STATS_FILE || path.join(__dirname, 'container-stats.json');
+const STATS_HOURLY_FILE = process.env.STATS_HOURLY_FILE || path.join(__dirname, 'container-stats-hourly.json');
+const STATS_DAILY_FILE = process.env.STATS_DAILY_FILE || path.join(__dirname, 'container-stats-daily.json');
 const ALERT_CONFIG_FILE = process.env.ALERT_CONFIG_FILE || path.join(__dirname, 'alert-config.json');
-const STATS_RETENTION_HOURS = parseInt(process.env.STATS_RETENTION_HOURS || '168', 10); // 7 days default
+const STATS_RETENTION_HOURS = parseInt(process.env.STATS_RETENTION_HOURS || '168', 10); // 7 days raw
+const STATS_HOURLY_RETENTION_DAYS = parseInt(process.env.STATS_HOURLY_RETENTION_DAYS || '30', 10); // 30 days hourly
+const STATS_DAILY_RETENTION_DAYS = parseInt(process.env.STATS_DAILY_RETENTION_DAYS || '365', 10); // 365 days daily
 const MONITORING_INTERVAL = parseInt(process.env.MONITORING_INTERVAL || '10000', 10); // 10 seconds
+const ROLLUP_HOURLY_INTERVAL = parseInt(process.env.ROLLUP_HOURLY_INTERVAL || String(60 * 60 * 1000), 10); // 1h
+const ROLLUP_DAILY_INTERVAL = parseInt(process.env.ROLLUP_DAILY_INTERVAL || String(24 * 60 * 60 * 1000), 10); // 24h
 
 class ResourceMonitor extends EventEmitter {
   constructor() {
     super();
     this.monitoring = false;
     this.monitoringInterval = null;
-    this.stats = new Map(); // containerId -> array of stats
+    this.hourlyRollupTimer = null;
+    this.dailyRollupTimer = null;
+    this.stats = new Map(); // containerId -> { name, history: [...] } (raw 10s samples, 7d)
+    this.hourlyHistory = new Map(); // containerId -> { name, samples: [...] } (hourly avg, 30d)
+    this.dailyHistory = new Map(); // containerId -> { name, samples: [...] } (daily avg, 365d)
     this.alerts = new Map(); // containerId -> alert config
     this.lastAlerts = new Map(); // containerId -> last alert timestamp
 
     this.loadStats();
+    this.loadHourlyStats();
+    this.loadDailyStats();
     this.loadAlertConfig();
   }
 
@@ -43,6 +55,22 @@ class ResourceMonitor extends EventEmitter {
     this.monitoring = true;
     this.monitoringInterval = setInterval(() => this.collectStats(), MONITORING_INTERVAL);
 
+    // Hourly rollup — fires once an hour, computes the previous full hour
+    this.hourlyRollupTimer = setInterval(() => {
+      try { this.rollupHourly(); } catch (e) { console.error('[ResourceMonitor] hourly rollup error:', e.message); }
+    }, ROLLUP_HOURLY_INTERVAL);
+
+    // Daily rollup — schedule first run at the next midnight, then fire every 24h
+    const now = new Date();
+    const nextMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 5);
+    const msUntilMidnight = nextMidnight.getTime() - now.getTime();
+    setTimeout(() => {
+      try { this.rollupDaily(); } catch (e) { console.error('[ResourceMonitor] daily rollup error:', e.message); }
+      this.dailyRollupTimer = setInterval(() => {
+        try { this.rollupDaily(); } catch (e) { console.error('[ResourceMonitor] daily rollup error:', e.message); }
+      }, ROLLUP_DAILY_INTERVAL);
+    }, msUntilMidnight);
+
     // Initial collection
     this.collectStats();
   }
@@ -60,8 +88,18 @@ class ResourceMonitor extends EventEmitter {
       clearInterval(this.monitoringInterval);
       this.monitoringInterval = null;
     }
+    if (this.hourlyRollupTimer) {
+      clearInterval(this.hourlyRollupTimer);
+      this.hourlyRollupTimer = null;
+    }
+    if (this.dailyRollupTimer) {
+      clearInterval(this.dailyRollupTimer);
+      this.dailyRollupTimer = null;
+    }
 
     this.saveStats();
+    this.saveHourlyStats();
+    this.saveDailyStats();
   }
 
   /**
@@ -464,12 +502,310 @@ class ResourceMonitor extends EventEmitter {
     }
   }
 
+  /**
+   * Aggregate a list of raw samples into a single rollup sample
+   * @param {Array} samples - Raw stats samples
+   * @param {string} timestamp - ISO timestamp to use for the rollup bucket
+   * @returns {Object|null} Aggregated sample, or null if input is empty
+   */
+  _aggregateSamples(samples, timestamp) {
+    if (!samples || samples.length === 0) return null;
+
+    let cpuSum = 0, cpuMax = 0;
+    let memSum = 0, memMax = 0;
+    let memPctSum = 0, memPctMax = 0;
+    let netRxSum = 0, netTxSum = 0;
+    let diskRSum = 0, diskWSum = 0;
+
+    for (const s of samples) {
+      const cpu = s.cpu?.percent || 0;
+      const memUsage = s.memory?.usage || 0;
+      const memPct = s.memory?.percent || 0;
+      cpuSum += cpu; if (cpu > cpuMax) cpuMax = cpu;
+      memSum += memUsage; if (memUsage > memMax) memMax = memUsage;
+      memPctSum += memPct; if (memPct > memPctMax) memPctMax = memPct;
+      netRxSum += s.network?.rxBytes || 0;
+      netTxSum += s.network?.txBytes || 0;
+      diskRSum += s.disk?.readBytes || 0;
+      diskWSum += s.disk?.writeBytes || 0;
+    }
+
+    const n = samples.length;
+    return {
+      timestamp,
+      sampleCount: n,
+      cpu: {
+        avg: Math.round((cpuSum / n) * 100) / 100,
+        max: Math.round(cpuMax * 100) / 100,
+      },
+      memory: {
+        avgUsage: Math.round(memSum / n),
+        maxUsage: memMax,
+        avgPercent: Math.round((memPctSum / n) * 100) / 100,
+        maxPercent: Math.round(memPctMax * 100) / 100,
+        avgUsageMB: Math.round(memSum / n / 1024 / 1024),
+        maxUsageMB: Math.round(memMax / 1024 / 1024),
+      },
+      network: {
+        rxBytes: netRxSum,
+        txBytes: netTxSum,
+        rxMB: Math.round(netRxSum / 1024 / 1024 * 100) / 100,
+        txMB: Math.round(netTxSum / 1024 / 1024 * 100) / 100,
+      },
+      disk: {
+        readBytes: diskRSum,
+        writeBytes: diskWSum,
+        readMB: Math.round(diskRSum / 1024 / 1024 * 100) / 100,
+        writeMB: Math.round(diskWSum / 1024 / 1024 * 100) / 100,
+      },
+    };
+  }
+
+  /**
+   * Combine already-aggregated samples (e.g. hourly buckets) into a single coarser bucket
+   * @param {Array} samples - Aggregated samples (output of _aggregateSamples)
+   * @param {string} timestamp - ISO timestamp to use for the rollup bucket
+   * @returns {Object|null}
+   */
+  _combineAggregated(samples, timestamp) {
+    if (!samples || samples.length === 0) return null;
+
+    let totalCount = 0;
+    let cpuWeightedSum = 0, cpuMax = 0;
+    let memWeightedSum = 0, memMax = 0;
+    let memPctWeightedSum = 0, memPctMax = 0;
+    let netRxSum = 0, netTxSum = 0;
+    let diskRSum = 0, diskWSum = 0;
+
+    for (const s of samples) {
+      const w = s.sampleCount || 1;
+      totalCount += w;
+      cpuWeightedSum += (s.cpu?.avg || 0) * w;
+      if ((s.cpu?.max || 0) > cpuMax) cpuMax = s.cpu.max;
+      memWeightedSum += (s.memory?.avgUsage || 0) * w;
+      if ((s.memory?.maxUsage || 0) > memMax) memMax = s.memory.maxUsage;
+      memPctWeightedSum += (s.memory?.avgPercent || 0) * w;
+      if ((s.memory?.maxPercent || 0) > memPctMax) memPctMax = s.memory.maxPercent;
+      netRxSum += s.network?.rxBytes || 0;
+      netTxSum += s.network?.txBytes || 0;
+      diskRSum += s.disk?.readBytes || 0;
+      diskWSum += s.disk?.writeBytes || 0;
+    }
+
+    return {
+      timestamp,
+      sampleCount: totalCount,
+      cpu: {
+        avg: Math.round((cpuWeightedSum / totalCount) * 100) / 100,
+        max: Math.round(cpuMax * 100) / 100,
+      },
+      memory: {
+        avgUsage: Math.round(memWeightedSum / totalCount),
+        maxUsage: memMax,
+        avgPercent: Math.round((memPctWeightedSum / totalCount) * 100) / 100,
+        maxPercent: Math.round(memPctMax * 100) / 100,
+        avgUsageMB: Math.round(memWeightedSum / totalCount / 1024 / 1024),
+        maxUsageMB: Math.round(memMax / 1024 / 1024),
+      },
+      network: {
+        rxBytes: netRxSum,
+        txBytes: netTxSum,
+        rxMB: Math.round(netRxSum / 1024 / 1024 * 100) / 100,
+        txMB: Math.round(netTxSum / 1024 / 1024 * 100) / 100,
+      },
+      disk: {
+        readBytes: diskRSum,
+        writeBytes: diskWSum,
+        readMB: Math.round(diskRSum / 1024 / 1024 * 100) / 100,
+        writeMB: Math.round(diskWSum / 1024 / 1024 * 100) / 100,
+      },
+    };
+  }
+
+  /**
+   * Roll up the previous complete hour of raw samples into a single hourly point.
+   * Trims hourlyHistory entries older than STATS_HOURLY_RETENTION_DAYS.
+   */
+  rollupHourly() {
+    const now = new Date();
+    // The "previous complete hour" — bucket starts at top of (current_hour - 1)
+    const bucketStart = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours() - 1, 0, 0);
+    const bucketEnd = new Date(bucketStart.getTime() + 60 * 60 * 1000);
+    const bucketStartMs = bucketStart.getTime();
+    const bucketEndMs = bucketEnd.getTime();
+    const bucketTimestamp = bucketStart.toISOString();
+
+    for (const [containerId, data] of this.stats.entries()) {
+      const samples = data.history.filter(s => {
+        const t = new Date(s.timestamp).getTime();
+        return t >= bucketStartMs && t < bucketEndMs;
+      });
+      if (samples.length === 0) continue;
+
+      const rollup = this._aggregateSamples(samples, bucketTimestamp);
+      if (!rollup) continue;
+
+      if (!this.hourlyHistory.has(containerId)) {
+        this.hourlyHistory.set(containerId, { name: data.name, samples: [] });
+      }
+      const entry = this.hourlyHistory.get(containerId);
+      entry.name = data.name;
+      // Avoid duplicate buckets if rollup ran twice
+      if (!entry.samples.find(s => s.timestamp === bucketTimestamp)) {
+        entry.samples.push(rollup);
+      }
+
+      // Trim old entries
+      const cutoff = Date.now() - (STATS_HOURLY_RETENTION_DAYS * 24 * 60 * 60 * 1000);
+      entry.samples = entry.samples.filter(s => new Date(s.timestamp).getTime() > cutoff);
+    }
+
+    this.saveHourlyStats();
+  }
+
+  /**
+   * Roll up the previous complete day of hourly samples into a single daily point.
+   * Trims dailyHistory entries older than STATS_DAILY_RETENTION_DAYS.
+   */
+  rollupDaily() {
+    const now = new Date();
+    // Previous calendar day, midnight to midnight
+    const bucketStart = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1, 0, 0, 0);
+    const bucketEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
+    const bucketStartMs = bucketStart.getTime();
+    const bucketEndMs = bucketEnd.getTime();
+    const bucketTimestamp = bucketStart.toISOString();
+
+    for (const [containerId, data] of this.hourlyHistory.entries()) {
+      const samples = data.samples.filter(s => {
+        const t = new Date(s.timestamp).getTime();
+        return t >= bucketStartMs && t < bucketEndMs;
+      });
+      if (samples.length === 0) continue;
+
+      const rollup = this._combineAggregated(samples, bucketTimestamp);
+      if (!rollup) continue;
+
+      if (!this.dailyHistory.has(containerId)) {
+        this.dailyHistory.set(containerId, { name: data.name, samples: [] });
+      }
+      const entry = this.dailyHistory.get(containerId);
+      entry.name = data.name;
+      if (!entry.samples.find(s => s.timestamp === bucketTimestamp)) {
+        entry.samples.push(rollup);
+      }
+
+      const cutoff = Date.now() - (STATS_DAILY_RETENTION_DAYS * 24 * 60 * 60 * 1000);
+      entry.samples = entry.samples.filter(s => new Date(s.timestamp).getTime() > cutoff);
+    }
+
+    this.saveDailyStats();
+  }
+
+  /**
+   * Get history for a container by time range, auto-selecting the appropriate tier.
+   * - <= 24h → raw 10s samples
+   * - 1-30 days → hourly rollups
+   * - > 30 days → daily rollups
+   * @param {string} containerId
+   * @param {number} startTime - epoch ms
+   * @param {number} endTime - epoch ms
+   * @returns {{ tier: 'raw'|'hourly'|'daily', samples: Array, unit: string }}
+   */
+  getHistoryByRange(containerId, startTime, endTime) {
+    const rangeMs = endTime - startTime;
+    const oneDay = 24 * 60 * 60 * 1000;
+    const thirtyDays = 30 * oneDay;
+
+    let tier, samples;
+    if (rangeMs <= oneDay) {
+      tier = 'raw';
+      const data = this.stats.get(containerId);
+      samples = data ? data.history.filter(s => {
+        const t = new Date(s.timestamp).getTime();
+        return t >= startTime && t <= endTime;
+      }) : [];
+    } else if (rangeMs <= thirtyDays) {
+      tier = 'hourly';
+      const data = this.hourlyHistory.get(containerId);
+      samples = data ? data.samples.filter(s => {
+        const t = new Date(s.timestamp).getTime();
+        return t >= startTime && t <= endTime;
+      }) : [];
+    } else {
+      tier = 'daily';
+      const data = this.dailyHistory.get(containerId);
+      samples = data ? data.samples.filter(s => {
+        const t = new Date(s.timestamp).getTime();
+        return t >= startTime && t <= endTime;
+      }) : [];
+    }
+
+    return { tier, samples, unit: tier === 'raw' ? '10s' : tier === 'hourly' ? '1h' : '1d' };
+  }
+
+  /**
+   * Load hourly rollups from disk
+   */
+  loadHourlyStats() {
+    try {
+      if (fs.existsSync(STATS_HOURLY_FILE)) {
+        const data = JSON.parse(fs.readFileSync(STATS_HOURLY_FILE, 'utf8'));
+        this.hourlyHistory = new Map(Object.entries(data));
+        console.log(`[ResourceMonitor] Loaded hourly rollups for ${this.hourlyHistory.size} containers`);
+      }
+    } catch (error) {
+      console.error('[ResourceMonitor] Error loading hourly stats:', error.message);
+    }
+  }
+
+  /**
+   * Save hourly rollups to disk
+   */
+  saveHourlyStats() {
+    try {
+      const data = Object.fromEntries(this.hourlyHistory);
+      fs.writeFileSync(STATS_HOURLY_FILE, JSON.stringify(data, null, 2));
+    } catch (error) {
+      console.error('[ResourceMonitor] Error saving hourly stats:', error.message);
+    }
+  }
+
+  /**
+   * Load daily rollups from disk
+   */
+  loadDailyStats() {
+    try {
+      if (fs.existsSync(STATS_DAILY_FILE)) {
+        const data = JSON.parse(fs.readFileSync(STATS_DAILY_FILE, 'utf8'));
+        this.dailyHistory = new Map(Object.entries(data));
+        console.log(`[ResourceMonitor] Loaded daily rollups for ${this.dailyHistory.size} containers`);
+      }
+    } catch (error) {
+      console.error('[ResourceMonitor] Error loading daily stats:', error.message);
+    }
+  }
+
+  /**
+   * Save daily rollups to disk
+   */
+  saveDailyStats() {
+    try {
+      const data = Object.fromEntries(this.dailyHistory);
+      fs.writeFileSync(STATS_DAILY_FILE, JSON.stringify(data, null, 2));
+    } catch (error) {
+      console.error('[ResourceMonitor] Error saving daily stats:', error.message);
+    }
+  }
+
   /**
    * Export stats for backup
    */
   exportStats() {
     return {
       stats: Object.fromEntries(this.stats),
+      hourlyHistory: Object.fromEntries(this.hourlyHistory),
+      dailyHistory: Object.fromEntries(this.dailyHistory),
       alerts: Object.fromEntries(this.alerts),
       exportedAt: new Date().toISOString()
     };
@@ -482,10 +818,18 @@ class ResourceMonitor extends EventEmitter {
     if (data.stats) {
       this.stats = new Map(Object.entries(data.stats));
     }
+    if (data.hourlyHistory) {
+      this.hourlyHistory = new Map(Object.entries(data.hourlyHistory));
+    }
+    if (data.dailyHistory) {
+      this.dailyHistory = new Map(Object.entries(data.dailyHistory));
+    }
     if (data.alerts) {
       this.alerts = new Map(Object.entries(data.alerts));
     }
     this.saveStats();
+    this.saveHourlyStats();
+    this.saveDailyStats();
     this.saveAlertConfig();
   }
 }

dashcaddy-api/routes/backups.js

@@ -42,5 +42,115 @@ module.exports = function({ backupManager, asyncHandler }) {
     success(res, { result });
   }, 'backups-restore'));
 
+  // ==================== CLOUD DESTINATIONS ====================
+
+  // Test a destination (write+read+delete probe)
+  router.post('/backups/test-destination', asyncHandler(async (req, res) => {
+    const destination = req.body;
+    if (!destination || !destination.type) {
+      const { ValidationError } = require('../errors');
+      throw new ValidationError('destination.type is required');
+    }
+    const result = await backupManager.testDestination(destination);
+    success(res, result);
+  }, 'backups-test-destination'));
+
+  // Get cloud credentials (masked) for a provider
+  // Provider: dropbox | webdav | sftp
+  router.get('/backups/credentials/:provider', asyncHandler(async (req, res) => {
+    const credentialManager = require('../credential-manager');
+    const provider = req.params.provider;
+    if (!['dropbox', 'webdav', 'sftp'].includes(provider)) {
+      const { ValidationError } = require('../errors');
+      throw new ValidationError('Invalid provider');
+    }
+
+    const mask = (val) => val ? '***' : null;
+    let creds = {};
+    if (provider === 'dropbox') {
+      const token = await credentialManager.retrieve('backup.dropbox.token');
+      creds = { token: mask(token) };
+    } else if (provider === 'webdav') {
+      creds = {
+        url: (await credentialManager.retrieve('backup.webdav.url')) || null,
+        username: (await credentialManager.retrieve('backup.webdav.username')) || null,
+        password: mask(await credentialManager.retrieve('backup.webdav.password'))
+      };
+    } else if (provider === 'sftp') {
+      creds = {
+        host: (await credentialManager.retrieve('backup.sftp.host')) || null,
+        port: (await credentialManager.retrieve('backup.sftp.port')) || '22',
+        username: (await credentialManager.retrieve('backup.sftp.username')) || null,
+        password: mask(await credentialManager.retrieve('backup.sftp.password')),
+        privateKey: mask(await credentialManager.retrieve('backup.sftp.privateKey'))
+      };
+    }
+    success(res, { provider, credentials: creds });
+  }, 'backups-credentials-get'));
+
+  // Save cloud credentials for a provider
+  router.post('/backups/credentials/:provider', asyncHandler(async (req, res) => {
+    const credentialManager = require('../credential-manager');
+    const { ValidationError } = require('../errors');
+    const provider = req.params.provider;
+
+    if (!['dropbox', 'webdav', 'sftp'].includes(provider)) {
+      throw new ValidationError('Invalid provider');
+    }
+
+    const body = req.body || {};
+    const storeIfPresent = async (key, val) => {
+      if (val !== undefined && val !== null && val !== '' && val !== '***') {
+        await credentialManager.store(key, String(val));
+      }
+    };
+
+    if (provider === 'dropbox') {
+      if (!body.token || body.token === '***') {
+        const existing = await credentialManager.retrieve('backup.dropbox.token');
+        if (!existing) {
+          throw new ValidationError('Dropbox token required');
+        }
+      } else {
+        await credentialManager.store('backup.dropbox.token', body.token);
+      }
+    } else if (provider === 'webdav') {
+      await storeIfPresent('backup.webdav.url', body.url);
+      await storeIfPresent('backup.webdav.username', body.username);
+      await storeIfPresent('backup.webdav.password', body.password);
+    } else if (provider === 'sftp') {
+      await storeIfPresent('backup.sftp.host', body.host);
+      await storeIfPresent('backup.sftp.port', body.port);
+      await storeIfPresent('backup.sftp.username', body.username);
+      await storeIfPresent('backup.sftp.password', body.password);
+      await storeIfPresent('backup.sftp.privateKey', body.privateKey);
+    }
+
+    success(res, { message: `${provider} credentials saved` });
+  }, 'backups-credentials-set'));
+
+  // Delete cloud credentials for a provider
+  router.delete('/backups/credentials/:provider', asyncHandler(async (req, res) => {
+    const credentialManager = require('../credential-manager');
+    const { ValidationError } = require('../errors');
+    const provider = req.params.provider;
+
+    if (!['dropbox', 'webdav', 'sftp'].includes(provider)) {
+      throw new ValidationError('Invalid provider');
+    }
+
+    const keys = {
+      dropbox: ['backup.dropbox.token'],
+      webdav: ['backup.webdav.url', 'backup.webdav.username', 'backup.webdav.password'],
+      sftp: ['backup.sftp.host', 'backup.sftp.port', 'backup.sftp.username', 'backup.sftp.password', 'backup.sftp.privateKey']
+    };
+
+    for (const k of keys[provider]) {
+      try { await credentialManager.delete(k); } catch (_) {}
+    }
+
+    success(res, { message: `${provider} credentials deleted` });
+  }, 'backups-credentials-delete'));
+
   return router;
 };

dashcaddy-api/routes/monitoring.js

@@ -31,11 +31,28 @@ module.exports = function({ resourceMonitor, docker, asyncHandler, log }) {
     success(res, { stats });
   }, 'monitoring-stats-container'));
 
-  // Get historical stats
+  // Get historical stats — supports either ?hours=24 (legacy raw) OR ?startTime=...&endTime=...
+  // (range mode auto-selects raw / hourly / daily tier)
   router.get('/monitoring/history/:containerId', asyncHandler(async (req, res) => {
+    const containerId = req.params.containerId;
+
+    // Range mode (preferred)
+    if (req.query.startTime && req.query.endTime) {
+      const startTime = parseInt(req.query.startTime, 10);
+      const endTime = parseInt(req.query.endTime, 10);
+      if (Number.isNaN(startTime) || Number.isNaN(endTime) || startTime >= endTime) {
+        const { ValidationError } = require('../errors');
+        throw new ValidationError('Invalid startTime/endTime');
+      }
+      const result = resourceMonitor.getHistoryByRange(containerId, startTime, endTime);
+      success(res, { ...result, startTime, endTime });
+      return;
+    }
+
+    // Legacy hours-based mode (raw samples only)
     const hours = parseInt(req.query.hours) || 24;
-    const history = resourceMonitor.getHistoricalStats(req.params.containerId, hours);
+    const history = resourceMonitor.getHistoricalStats(containerId, hours);
-    success(res, { history, hours });
+    success(res, { history, hours, tier: 'raw', samples: history, unit: '10s' });
   }, 'monitoring-history'));
 
   // Get aggregated stats

status/css/dashboard.css

@@ -2815,6 +2815,28 @@ button:focus-visible {
   display: block;
 }
 
+/* Range selector buttons (resource monitor history) */
+.stats-range-btn {
+  padding: 4px 10px;
+  background: var(--card-base);
+  border: 1px solid var(--border);
+  color: var(--muted);
+  border-radius: 4px;
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+
+.stats-range-btn:hover {
+  border-color: var(--accent);
+  color: var(--fg);
+}
+
+.stats-range-btn.active {
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
 /* Status badges (Health and Updates) */
 .status-badge {
   display: inline-flex;

status/js/backup-restore.js

@@ -384,6 +384,9 @@
   });
 
   // === Automated Backups Tab ===
+  // Holds the destination currently being edited in the form
+  var currentDestination = { type: 'local' };
+
   async function loadBackupSchedule() {
     if (!scheduleContainer) return;
     try {
@@ -394,6 +397,10 @@
       var autoKey = Object.keys(cfg)[0];
       var auto = autoKey ? cfg[autoKey] : null;
 
+      // Pull existing destination (first one) — fall back to local
+      var existingDest = (auto?.destinations && auto.destinations[0]) || { type: 'local' };
+      currentDestination = JSON.parse(JSON.stringify(existingDest));
+
       var html = '<div style="padding: 16px; background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); margin-bottom: 16px;">';
       html += '<h4 style="margin: 0 0 12px; color: var(--accent); font-size: 0.9rem;">⏰ Backup Schedule</h4>';
       html += '<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">';
@@ -423,20 +430,238 @@
       html += '  <button id="backup-run-now" style="padding: 8px 16px; border-radius: 6px; cursor: pointer;">▶️ Run Backup Now</button>';
       html += '</div>';
       html += '</div>';
+
+      // === Destination Section ===
+      html += '<div style="padding: 16px; background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); margin-bottom: 16px;">';
+      html += '<h4 style="margin: 0 0 12px; color: var(--accent); font-size: 0.9rem;">☁️ Backup Destination</h4>';
+      html += '<div><label style="font-size: 0.8rem; color: var(--muted);">Where to store backups:</label>';
+      html += '  <select id="backup-dest-type" style="width: 100%;">';
+      html += '    <option value="local"' + (currentDestination.type === 'local' ? ' selected' : '') + '>💾 Local disk</option>';
+      html += '    <option value="dropbox"' + (currentDestination.type === 'dropbox' ? ' selected' : '') + '>📦 Dropbox</option>';
+      html += '    <option value="webdav"' + (currentDestination.type === 'webdav' ? ' selected' : '') + '>🌐 WebDAV (Nextcloud / ownCloud)</option>';
+      html += '    <option value="sftp"' + (currentDestination.type === 'sftp' ? ' selected' : '') + '>🔐 SFTP</option>';
+      html += '  </select></div>';
+      html += '<div id="backup-dest-form" style="margin-top: 12px;"></div>';
+      html += '<div id="backup-dest-result" style="display: none; margin-top: 10px; padding: 8px 10px; border-radius: 6px; font-size: 0.8rem;"></div>';
+      html += '</div>';
+
       html += '<div id="backup-schedule-result" style="display: none; margin-top: 12px; padding: 10px; border-radius: 8px; font-size: 0.85rem;"></div>';
       scheduleContainer.innerHTML = html;
 
       document.getElementById('backup-save-schedule')?.addEventListener('click', saveSchedule);
       document.getElementById('backup-run-now')?.addEventListener('click', runBackupNow);
+
+      var destTypeSel = document.getElementById('backup-dest-type');
+      destTypeSel?.addEventListener('change', function() {
+        currentDestination = { type: destTypeSel.value };
+        renderDestinationForm(destTypeSel.value);
+      });
+      renderDestinationForm(currentDestination.type);
     } catch (e) {
       scheduleContainer.innerHTML = '<div class="panel-empty" style="color: var(--bad-fg);">Failed to load schedule: ' + escapeHtml(e.message) + '</div>';
     }
   }
 
+  // Render the provider-specific form fields and load saved credentials (masked)
+  async function renderDestinationForm(type) {
+    var formEl = document.getElementById('backup-dest-form');
+    if (!formEl) return;
+
+    if (type === 'local') {
+      formEl.innerHTML = '<div style="font-size: 0.8rem; color: var(--muted); padding: 8px;">Backups are stored on the host filesystem. No additional configuration required.</div>';
+      return;
+    }
+
+    var html = '';
+
+    if (type === 'dropbox') {
+      html += '<label style="font-size: 0.8rem; color: var(--muted);">Access Token:</label>';
+      html += '<input type="password" id="dest-dropbox-token" placeholder="sl.B..." style="width: 100%; margin-bottom: 8px;" />';
+      html += '<label style="font-size: 0.8rem; color: var(--muted);">Folder path:</label>';
+      html += '<input type="text" id="dest-dropbox-path" placeholder="/dashcaddy-backups" value="' + escapeHtml(currentDestination.path || '/dashcaddy-backups') + '" style="width: 100%; margin-bottom: 8px;" />';
+      html += '<div style="font-size: 0.7rem; color: var(--muted); margin-bottom: 8px;">Generate a token at <a href="https://www.dropbox.com/developers/apps" target="_blank" style="color: var(--accent);">Dropbox App Console</a> with files.content.write + files.content.read scopes.</div>';
+    } else if (type === 'webdav') {
+      html += '<label style="font-size: 0.8rem; color: var(--muted);">Server URL:</label>';
+      html += '<input type="text" id="dest-webdav-url" placeholder="https://cloud.example.com/remote.php/dav/files/username" style="width: 100%; margin-bottom: 8px;" />';
+      html += '<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px;">';
+      html += '  <div><label style="font-size: 0.8rem; color: var(--muted);">Username:</label>';
+      html += '    <input type="text" id="dest-webdav-username" style="width: 100%;" /></div>';
+      html += '  <div><label style="font-size: 0.8rem; color: var(--muted);">Password / App password:</label>';
+      html += '    <input type="password" id="dest-webdav-password" style="width: 100%;" /></div>';
+      html += '</div>';
+      html += '<label style="font-size: 0.8rem; color: var(--muted);">Folder path:</label>';
+      html += '<input type="text" id="dest-webdav-path" placeholder="/dashcaddy-backups" value="' + escapeHtml(currentDestination.path || '/dashcaddy-backups') + '" style="width: 100%; margin-bottom: 8px;" />';
+    } else if (type === 'sftp') {
+      html += '<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 8px; margin-bottom: 8px;">';
+      html += '  <div><label style="font-size: 0.8rem; color: var(--muted);">Host:</label>';
+      html += '    <input type="text" id="dest-sftp-host" placeholder="backup.example.com" style="width: 100%;" /></div>';
+      html += '  <div><label style="font-size: 0.8rem; color: var(--muted);">Port:</label>';
+      html += '    <input type="number" id="dest-sftp-port" value="22" style="width: 100%;" /></div>';
+      html += '</div>';
+      html += '<label style="font-size: 0.8rem; color: var(--muted);">Username:</label>';
+      html += '<input type="text" id="dest-sftp-username" style="width: 100%; margin-bottom: 8px;" />';
+      html += '<label style="font-size: 0.8rem; color: var(--muted);">Auth method:</label>';
+      html += '<select id="dest-sftp-authtype" style="width: 100%; margin-bottom: 8px;">';
+      html += '  <option value="password">Password</option>';
+      html += '  <option value="key">Private key</option>';
+      html += '</select>';
+      html += '<div id="dest-sftp-password-row"><label style="font-size: 0.8rem; color: var(--muted);">Password:</label>';
+      html += '  <input type="password" id="dest-sftp-password" style="width: 100%; margin-bottom: 8px;" /></div>';
+      html += '<div id="dest-sftp-key-row" style="display: none;"><label style="font-size: 0.8rem; color: var(--muted);">Private key (PEM):</label>';
+      html += '  <textarea id="dest-sftp-privatekey" rows="4" style="width: 100%; font-family: monospace; font-size: 0.75rem; margin-bottom: 8px;" placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"></textarea></div>';
+      html += '<label style="font-size: 0.8rem; color: var(--muted);">Remote path:</label>';
+      html += '<input type="text" id="dest-sftp-path" placeholder="/home/user/dashcaddy-backups" value="' + escapeHtml(currentDestination.path || '/home/user/dashcaddy-backups') + '" style="width: 100%; margin-bottom: 8px;" />';
+    }
+
+    html += '<div style="display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap;">';
+    html += '  <button id="dest-save-creds" style="padding: 6px 12px; font-size: 0.8rem; border-radius: 6px; cursor: pointer;">💾 Save Credentials</button>';
+    html += '  <button id="dest-test-conn" style="padding: 6px 12px; font-size: 0.8rem; background: color-mix(in srgb, var(--accent) 20%, transparent); border: 1px solid var(--accent); color: var(--accent); border-radius: 6px; cursor: pointer;">🔌 Test Connection</button>';
+    html += '  <button id="dest-clear-creds" style="padding: 6px 12px; font-size: 0.8rem; border-radius: 6px; cursor: pointer; color: var(--bad-fg);">🗑️ Clear</button>';
+    html += '</div>';
+
+    formEl.innerHTML = html;
+
+    // SFTP auth type toggle
+    if (type === 'sftp') {
+      var authSel = document.getElementById('dest-sftp-authtype');
+      var pwRow = document.getElementById('dest-sftp-password-row');
+      var keyRow = document.getElementById('dest-sftp-key-row');
+      authSel?.addEventListener('change', function() {
+        if (authSel.value === 'key') { pwRow.style.display = 'none'; keyRow.style.display = ''; }
+        else { pwRow.style.display = ''; keyRow.style.display = 'none'; }
+      });
+    }
+
+    document.getElementById('dest-save-creds')?.addEventListener('click', function() { saveCredentials(type); });
+    document.getElementById('dest-test-conn')?.addEventListener('click', function() { testDestination(type); });
+    document.getElementById('dest-clear-creds')?.addEventListener('click', function() { clearCredentials(type); });
+
+    // Pull existing (masked) credentials
+    await loadCredentials(type);
+  }
+
+  function destResult(msg, ok) {
+    var el = document.getElementById('backup-dest-result');
+    if (!el) return;
+    el.innerHTML = msg;
+    el.style.display = 'block';
+    el.style.background = ok ? 'color-mix(in srgb, var(--ok-fg) 15%, transparent)' : 'color-mix(in srgb, var(--bad-fg) 15%, transparent)';
+    el.style.border = ok ? '1px solid var(--ok-fg)' : '1px solid var(--bad-fg)';
+  }
+
+  async function loadCredentials(provider) {
+    try {
+      var res = await fetch('/api/v1/backups/credentials/' + provider);
+      var data = await res.json();
+      if (!data.success || !data.credentials) return;
+      var c = data.credentials;
+      if (provider === 'dropbox') {
+        var t = document.getElementById('dest-dropbox-token'); if (t && c.token) t.value = c.token;
+      } else if (provider === 'webdav') {
+        var u = document.getElementById('dest-webdav-url'); if (u && c.url) u.value = c.url;
+        var n = document.getElementById('dest-webdav-username'); if (n && c.username) n.value = c.username;
+        var p = document.getElementById('dest-webdav-password'); if (p && c.password) p.value = c.password;
+      } else if (provider === 'sftp') {
+        var h = document.getElementById('dest-sftp-host'); if (h && c.host) h.value = c.host;
+        var po = document.getElementById('dest-sftp-port'); if (po && c.port) po.value = c.port;
+        var un = document.getElementById('dest-sftp-username'); if (un && c.username) un.value = c.username;
+        var pw = document.getElementById('dest-sftp-password'); if (pw && c.password) pw.value = c.password;
+        var pk = document.getElementById('dest-sftp-privatekey'); if (pk && c.privateKey) pk.value = c.privateKey;
+        if (c.privateKey) {
+          var sel = document.getElementById('dest-sftp-authtype');
+          if (sel) { sel.value = 'key'; sel.dispatchEvent(new Event('change')); }
+        }
+      }
+    } catch (e) { /* no creds yet — silent */ }
+  }
+
+  function collectCredentials(provider) {
+    if (provider === 'dropbox') {
+      return { token: document.getElementById('dest-dropbox-token')?.value };
+    }
+    if (provider === 'webdav') {
+      return {
+        url: document.getElementById('dest-webdav-url')?.value,
+        username: document.getElementById('dest-webdav-username')?.value,
+        password: document.getElementById('dest-webdav-password')?.value
+      };
+    }
+    if (provider === 'sftp') {
+      var auth = document.getElementById('dest-sftp-authtype')?.value;
+      var creds = {
+        host: document.getElementById('dest-sftp-host')?.value,
+        port: parseInt(document.getElementById('dest-sftp-port')?.value) || 22,
+        username: document.getElementById('dest-sftp-username')?.value
+      };
+      if (auth === 'key') creds.privateKey = document.getElementById('dest-sftp-privatekey')?.value;
+      else creds.password = document.getElementById('dest-sftp-password')?.value;
+      return creds;
+    }
+    return {};
+  }
+
+  async function saveCredentials(provider) {
+    try {
+      var creds = collectCredentials(provider);
+      var res = await secureFetch('/api/v1/backups/credentials/' + provider, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(creds)
+      });
+      var data = await res.json();
+      destResult(data.success ? '✅ Credentials saved' : '⚠️ ' + escapeHtml(data.error || 'Failed'), data.success);
+    } catch (e) {
+      destResult('❌ ' + escapeHtml(e.message), false);
+    }
+  }
+
+  async function clearCredentials(provider) {
+    if (!confirm('Delete saved ' + provider + ' credentials?')) return;
+    try {
+      var res = await secureFetch('/api/v1/backups/credentials/' + provider, { method: 'DELETE' });
+      var data = await res.json();
+      if (data.success) {
+        destResult('✅ Credentials cleared', true);
+        renderDestinationForm(provider);
+      } else {
+        destResult('⚠️ ' + escapeHtml(data.error || 'Failed'), false);
+      }
+    } catch (e) { destResult('❌ ' + escapeHtml(e.message), false); }
+  }
+
+  function buildDestination(type) {
+    var dest = { type: type };
+    if (type === 'local') return dest;
+    if (type === 'dropbox') dest.path = document.getElementById('dest-dropbox-path')?.value || '/dashcaddy-backups';
+    else if (type === 'webdav') dest.path = document.getElementById('dest-webdav-path')?.value || '/dashcaddy-backups';
+    else if (type === 'sftp') dest.path = document.getElementById('dest-sftp-path')?.value || '/dashcaddy-backups';
+    return dest;
+  }
+
+  async function testDestination(type) {
+    destResult('<span class="brand-spinner"></span> Testing connection...', true);
+    try {
+      var dest = buildDestination(type);
+      var res = await secureFetch('/api/v1/backups/test-destination', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(dest)
+      });
+      var data = await res.json();
+      if (data.success) {
+        var ms = data.elapsedMs ? ' (' + data.elapsedMs + 'ms)' : '';
+        destResult('✅ Connection OK' + ms + ' — write/read/delete probe succeeded', true);
+      } else {
+        destResult('❌ ' + escapeHtml(data.error || 'Connection failed'), false);
+      }
+    } catch (e) { destResult('❌ ' + escapeHtml(e.message), false); }
+  }
+
   async function saveSchedule() {
     var schedule = document.getElementById('backup-schedule-select')?.value;
     var retention = parseInt(document.getElementById('backup-retention-select')?.value) || 5;
     var encrypt = document.getElementById('backup-encrypt-toggle')?.checked ?? true;
+    var destType = document.getElementById('backup-dest-type')?.value || 'local';
     var resultEl = document.getElementById('backup-schedule-result');
     try {
       var res = await secureFetch('/api/v1/backups/config', {
@@ -451,7 +676,7 @@
               encrypt: encrypt,
               verify: true,
               retention: { keep: retention },
-              destinations: [{ type: 'local' }]
+              destinations: [buildDestination(destType)]
             }
           }
         })
@@ -477,12 +702,13 @@
   async function runBackupNow() {
     var btn = document.getElementById('backup-run-now');
     var resultEl = document.getElementById('backup-schedule-result');
+    var destType = document.getElementById('backup-dest-type')?.value || 'local';
     if (btn) { btn.disabled = true; btn.innerHTML = '<span class="brand-spinner"></span> Running...'; }
     try {
       var res = await secureFetch('/api/v1/backups/execute', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ include: ['all'], destinations: [{ type: 'local' }] })
+        body: JSON.stringify({ include: ['all'], destinations: [buildDestination(destType)] })
       });
       var data = await res.json();
       if (resultEl) {

status/js/resource-monitor.js

@@ -12,6 +12,7 @@
       <div class="panel-tabs">
         <button class="panel-tab active" data-panel="stats-live">Live Stats</button>
         <button class="panel-tab" data-panel="stats-aggregated">24h Summary</button>
+        <button class="panel-tab" data-panel="stats-history">History</button>
         <button class="panel-tab" data-panel="stats-alerts">Alerts</button>
       </div>
 
@@ -34,6 +35,27 @@
         </div>
       </div>
 
+      <!-- Tab: Long-term History -->
+      <div id="stats-history" class="panel-section">
+        <div style="display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap;">
+          <label style="font-size: 0.85rem; color: var(--muted);">Container:</label>
+          <select id="stats-history-container" style="padding: 4px 8px; background: var(--card-base); border: 1px solid var(--border); color: var(--fg); border-radius: 4px; font-size: 0.85rem; flex: 1; min-width: 180px;"></select>
+          <div id="stats-history-range-buttons" style="display: flex; gap: 4px;">
+            <button class="stats-range-btn active" data-range="1h">1h</button>
+            <button class="stats-range-btn" data-range="24h">24h</button>
+            <button class="stats-range-btn" data-range="7d">7d</button>
+            <button class="stats-range-btn" data-range="30d">30d</button>
+            <button class="stats-range-btn" data-range="1y">1y</button>
+          </div>
+        </div>
+        <div id="stats-history-container-area" class="scroll-container">
+          <div class="panel-empty">
+            <span class="empty-icon">📊</span>
+            Choose a container and time range to view history.
+          </div>
+        </div>
+      </div>
+
       <!-- Tab: Alert Configuration -->
       <div id="stats-alerts" class="panel-section">
         <div id="stats-alerts-container" class="scroll-container">
@@ -325,4 +347,141 @@
   // Lazy-load tabs
   document.querySelector('[data-panel="stats-aggregated"]')?.addEventListener('click', loadAggregated);
   document.querySelector('[data-panel="stats-alerts"]')?.addEventListener('click', loadAlerts);
+
+  // === History Tab ===
+  const historyContainerSelect = document.getElementById('stats-history-container');
+  const historyArea = document.getElementById('stats-history-container-area');
+  const rangeButtons = document.querySelectorAll('.stats-range-btn');
+
+  let currentRange = '1h';
+
+  function rangeToMs(range) {
+    switch (range) {
+      case '1h':  return 60 * 60 * 1000;
+      case '24h': return 24 * 60 * 60 * 1000;
+      case '7d':  return 7 * 24 * 60 * 60 * 1000;
+      case '30d': return 30 * 24 * 60 * 60 * 1000;
+      case '1y':  return 365 * 24 * 60 * 60 * 1000;
+      default:    return 60 * 60 * 1000;
+    }
+  }
+
+  function tierLabel(tier) {
+    if (tier === 'raw') return 'live (10s samples)';
+    if (tier === 'hourly') return 'hourly average';
+    if (tier === 'daily') return 'daily average';
+    return tier;
+  }
+
+  // Simple SVG sparkline — no external lib
+  function renderSparkline(samples, accessor, color, label, unit) {
+    if (!samples || samples.length === 0) {
+      return `<div style="text-align: center; color: var(--muted); padding: 20px;">No data for ${escapeHtml(label)}</div>`;
+    }
+    const values = samples.map(accessor).filter(v => v != null);
+    if (values.length === 0) {
+      return `<div style="text-align: center; color: var(--muted); padding: 20px;">No data for ${escapeHtml(label)}</div>`;
+    }
+    const max = Math.max(...values, 1);
+    const min = Math.min(...values, 0);
+    const range = max - min || 1;
+    const w = 600, h = 80, pad = 4;
+    const stepX = (w - pad * 2) / Math.max(values.length - 1, 1);
+    const points = values.map((v, i) => {
+      const x = pad + i * stepX;
+      const y = h - pad - ((v - min) / range) * (h - pad * 2);
+      return `${x.toFixed(1)},${y.toFixed(1)}`;
+    }).join(' ');
+    const last = values[values.length - 1];
+    const avg = values.reduce((a, b) => a + b, 0) / values.length;
+    return `
+      <div style="margin-bottom: 14px;">
+        <div style="display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px;">
+          <span style="font-weight: 600; font-size: 0.9rem;">${escapeHtml(label)}</span>
+          <span style="font-size: 0.75rem; color: var(--muted);">last ${last.toFixed(1)}${unit} · avg ${avg.toFixed(1)}${unit} · max ${max.toFixed(1)}${unit}</span>
+        </div>
+        <svg viewBox="0 0 ${w} ${h}" preserveAspectRatio="none" style="width: 100%; height: ${h}px; background: var(--base); border-radius: 4px;">
+          <polyline fill="none" stroke="${color}" stroke-width="1.5" points="${points}" />
+        </svg>
+      </div>
+    `;
+  }
+
+  function populateHistoryContainerSelect() {
+    if (!historyContainerSelect) return;
+    const data = cachedMonitoringData || {};
+    const previous = historyContainerSelect.value;
+    const entries = Object.entries(data);
+    if (entries.length === 0) {
+      historyContainerSelect.innerHTML = '<option value="">No containers</option>';
+      return;
+    }
+    historyContainerSelect.innerHTML = entries
+      .map(([id, info]) => `<option value="${escapeHtml(id)}">${escapeHtml(info.name || id)}</option>`)
+      .join('');
+    if (previous && data[previous]) historyContainerSelect.value = previous;
+  }
+
+  async function loadHistory() {
+    if (!historyArea || !historyContainerSelect) return;
+    const containerId = historyContainerSelect.value;
+    if (!containerId) {
+      historyArea.innerHTML = '<div class="panel-empty"><span class="empty-icon">📊</span>No container selected.</div>';
+      return;
+    }
+    const endTime = Date.now();
+    const startTime = endTime - rangeToMs(currentRange);
+    historyArea.innerHTML = '<div class="panel-empty"><span class="brand-spinner"></span> Loading history...</div>';
+
+    try {
+      const res = await fetch(`/api/v1/monitoring/history/${encodeURIComponent(containerId)}?startTime=${startTime}&endTime=${endTime}`);
+      const data = await res.json();
+      if (!data.success) throw new Error(data.error || 'Failed to load history');
+
+      const samples = data.samples || [];
+      const tier = data.tier || 'raw';
+
+      if (samples.length === 0) {
+        historyArea.innerHTML = `<div class="panel-empty"><span class="empty-icon">📊</span>No data for the last ${currentRange}. Tier: ${tierLabel(tier)}.</div>`;
+        return;
+      }
+
+      // Different shape between raw vs rolled-up samples
+      const isRaw = tier === 'raw';
+      const cpuAccessor = isRaw ? (s) => s.cpu?.percent : (s) => s.cpu?.avg;
+      const memAccessor = isRaw ? (s) => s.memory?.percent : (s) => s.memory?.avgPercent;
+      const netRxAccessor = isRaw ? (s) => (s.network?.rxMB || 0) : (s) => (s.network?.rxMB || 0);
+      const netTxAccessor = isRaw ? (s) => (s.network?.txMB || 0) : (s) => (s.network?.txMB || 0);
+
+      let html = `
+        <div style="font-size: 0.75rem; color: var(--muted); margin-bottom: 8px;">
+          ${samples.length} samples · ${escapeHtml(tierLabel(tier))} · ${new Date(startTime).toLocaleString()} → ${new Date(endTime).toLocaleString()}
+        </div>
+      `;
+      html += renderSparkline(samples, cpuAccessor, '#2ecc71', 'CPU', '%');
+      html += renderSparkline(samples, memAccessor, '#3498db', 'Memory', '%');
+      html += renderSparkline(samples, netRxAccessor, '#9b59b6', 'Network RX', ' MB');
+      html += renderSparkline(samples, netTxAccessor, '#e67e22', 'Network TX', ' MB');
+
+      historyArea.innerHTML = html;
+    } catch (e) {
+      historyArea.innerHTML = `<div class="panel-empty"><span class="empty-icon">⚠️</span>Failed to load history: ${escapeHtml(e.message)}</div>`;
+    }
+  }
+
+  rangeButtons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      rangeButtons.forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      currentRange = btn.dataset.range;
+      loadHistory();
+    });
+  });
+
+  historyContainerSelect?.addEventListener('change', loadHistory);
+
+  document.querySelector('[data-panel="stats-history"]')?.addEventListener('click', () => {
+    populateHistoryContainerSelect();
+    loadHistory();
+  });
 })();