sequenceDiagram
    participant User
    participant DeployModal as Template Deploy Modal
    participant WorkflowStore as Workflow Store
    participant OGCapture as OG Capture Container
    participant CaptureLib as capture-preview.ts
    participant API as /api/templates/[id]/og-image
    participant Storage as Storage Service
    participant DB as Database

    User->>DeployModal: Save template
    DeployModal->>DB: Create/update template record
    DB-->>DeployModal: Template saved (templateId)
    
    Note over DeployModal: onDeploymentComplete() called immediately
    DeployModal->>User: Show success state
    
    par Async OG Image Capture
        DeployModal->>DeployModal: setIsCapturing(true)
        DeployModal->>DeployModal: requestAnimationFrame x2
        Note over DeployModal: Wait ~2 frames for DOM render
        
        DeployModal->>OGCapture: Render hidden container
        OGCapture->>WorkflowStore: Get workflow state (blocks, edges, loops)
        WorkflowStore-->>OGCapture: Current workflow state
        OGCapture->>OGCapture: Render WorkflowPreview off-screen
        
        DeployModal->>CaptureLib: captureWorkflowPreview(element)
        CaptureLib->>CaptureLib: html-to-image.toPng()
        Note over CaptureLib: Retry up to 3 times if needed
        CaptureLib-->>DeployModal: Base64 PNG data
        
        DeployModal->>CaptureLib: uploadOGImage(templateId, imageData)
        CaptureLib->>API: PUT /api/templates/{id}/og-image
        
        API->>API: Validate session & template ownership
        API->>API: Decode base64 & validate PNG magic bytes
        API->>API: Check file size < 5MB
        
        API->>Storage: uploadFile(buffer, og-images context)
        Storage-->>API: Upload result with path
        
        API->>DB: Update templates.ogImageUrl
        DB-->>API: Success
        
        API-->>CaptureLib: { ogImageUrl }
        CaptureLib-->>DeployModal: OG image URL
        
        DeployModal->>DeployModal: setIsCapturing(false)
    end