backup-tool/.superpowers/brainstorm/269331-1778521434/content/backup-flow.html

<h2>Backup Flow</h2>
<p class="subtitle">How a backup job executes from trigger to completion</p>

<div class="section">
  <div class="mockup">
    <div class="mockup-header">Backup Execution Flow</div>
    <div class="mockup-body">
      <div style="display: flex; flex-direction: column; gap: 0;">
        
        <!-- Step 1 -->
        <div style="display: flex; align-items: center; gap: 15px; padding: 15px; background: #f0f8ff; border-radius: 8px; border-left: 4px solid #2196F3;">
          <div style="background: #2196F3; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;">1</div>
          <div style="flex: 1;">
            <div style="font-weight: bold;">Trigger</div>
            <div style="color: #666; font-size: 14px;">Manual click or scheduled cron trigger fires</div>
          </div>
        </div>
        
        <div style="text-align: center; color: #2196F3; font-size: 20px;">↓</div>
        
        <!-- Step 2 -->
        <div style="display: flex; align-items: center; gap: 15px; padding: 15px; background: #fff8f0; border-radius: 8px; border-left: 4px solid #FF9800;">
          <div style="background: #FF9800; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;">2</div>
          <div style="flex: 1;">
            <div style="font-weight: bold;">Create Execution Record</div>
            <div style="color: #666; font-size: 14px;">Insert row into job_executions with status "pending"</div>
          </div>
        </div>
        
        <div style="text-align: center; color: #FF9800; font-size: 20px;">↓</div>
        
        <!-- Step 3 -->
        <div style="display: flex; align-items: center; gap: 15px; padding: 15px; background: #f8fff8; border-radius: 8px; border-left: 4px solid #4CAF50;">
          <div style="background: #4CAF50; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;">3</div>
          <div style="flex: 1;">
            <div style="font-weight: bold;">Connect to Source</div>
            <div style="color: #666; font-size: 14px;">Establish connection (local filesystem, SSH, or database)</div>
          </div>
        </div>
        
        <div style="text-align: center; color: #4CAF50; font-size: 20px;">↓</div>
        
        <!-- Step 4 -->
        <div style="display: flex; align-items: center; gap: 15px; padding: 15px; background: #faf0ff; border-radius: 8px; border-left: 4px solid #9C27B0;">
          <div style="background: #9C27B0; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;">4</div>
          <div style="flex: 1;">
            <div style="font-weight: bold;">Determine Backup Strategy</div>
            <div style="color: #666; font-size: 14px;">Full backup OR incremental based on last successful backup</div>
          </div>
        </div>
        
        <div style="text-align: center; color: #9C27B0; font-size: 20px;">↓</div>
        
        <!-- Step 5 -->
        <div style="display: flex; align-items: center; gap: 15px; padding: 15px; background: #f0f8ff; border-radius: 8px; border-left: 4px solid #2196F3;">
          <div style="background: #2196F3; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;">5</div>
          <div style="flex: 1;">
            <div style="font-weight: bold;">Execute Backup</div>
            <div style="color: #666; font-size: 14px;">Transfer data, compress, encrypt (if enabled), calculate checksums</div>
          </div>
        </div>
        
        <div style="text-align: center; color: #2196F3; font-size: 20px;">↓</div>
        
        <!-- Step 6 -->
        <div style="display: flex; align-items: center; gap: 15px; padding: 15px; background: #f8fff8; border-radius: 8px; border-left: 4px solid #4CAF50;">
          <div style="background: #4CAF50; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;">6</div>
          <div style="flex: 1;">
            <div style="font-weight: bold;">Verify & Store</div>
            <div style="color: #666; font-size: 14px;">Verify checksum, store metadata in backups table, update execution status</div>
          </div>
        </div>
        
        <div style="text-align: center; color: #4CAF50; font-size: 20px;">↓</div>
        
        <!-- Step 7 -->
        <div style="display: flex; align-items: center; gap: 15px; padding: 15px; background: #fff8f0; border-radius: 8px; border-left: 4px solid #FF9800;">
          <div style="background: #FF9800; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;">7</div>
          <div style="flex: 1;">
            <div style="font-weight: bold;">Cleanup & Retention</div>
            <div style="color: #666; font-size: 14px;">Apply retention policy, remove old backups, update storage stats</div>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</div>

<div class="section">
  <h3>Error Handling</h3>
  <ul>
    <li><strong>Connection failures</strong>: Retry 3x with exponential backoff, then mark as failed</li>
    <li><strong>Partial backups</strong>: Mark as failed if any source file fails; keep partial for inspection</li>
    <li><strong>Storage full</strong>: Check before starting, alert if < 10% free space</li>
    <li><strong>Checksum mismatch</strong>: Delete corrupted backup, retry once, alert admin</li>
    <li><strong>Concurrent jobs</strong>: Queue or cancel based on resource availability</li>
  </ul>
</div>

<div class="section">
  <h3>Extensibility Design</h3>
  <p>The system is designed for easy extension:</p>
  <ul>
    <li><strong>Source adapters</strong>: Abstract base class for new source types (S3, Azure, etc.)</li>
    <li><strong>Storage backends</strong>: Pluggable storage interface for cloud destinations</li>
    <li><strong>Notification channels</strong>: Webhook, email, Slack plugins for alerts</li>
    <li><strong>Compression algorithms</strong>: Configurable (gzip, bzip2, zstd, none)</li>
  </ul>
</div>