All Docs
FeaturesSaaS FactoryUpdated March 11, 2026

Visual Diff & PR Preview at Approval Gates

Visual Diff & PR Preview at Approval Gates

Available since: v1.0.139

Overview

Approval gates in SaaS Factory now display an embedded visual diff viewer and file-change summary, giving human reviewers complete code visibility without leaving the dashboard.

Previously the ApprovalGate component surfaced only raw metadata (contextData). Reviewers had to open the corresponding GitHub Pull Request in a separate tab to understand what autonomous changes they were about to approve or reject. This release closes that UX gap.

How It Works

When the autonomous pipeline reaches a gate and pauses for human review, the ApprovalGate component now fetches and renders the full PR diff alongside the existing metadata.

What You See at a Gate

SectionDescription
File-change summaryList of all files added, modified, or deleted, shown at the top of the gate card
Inline diff viewerSyntax-highlighted before/after code changes rendered directly in the UI
Contextual metadataExisting contextData fields (feature title, agent, timestamps) remain visible

Diff Presentation

The diff viewer supports both unified and side-by-side views. Lines added are highlighted in green; lines removed are highlighted in red — consistent with the GitHub and Cursor BugBot visual conventions reviewers already know.

Approval Workflow

The overall Plan → Test → PR flow is unchanged. The diff viewer is additive:

1. Autonomous agent implements a feature and opens a PR
2. CI runs and tests pass
3. Pipeline creates an approval_gate record and pauses
4. Human reviewer opens the gate in SaaS Factory
   ├─ Views file-change summary          ← NEW
   ├─ Inspects inline diff               ← NEW
   └─ Reads contextData metadata
5. Reviewer clicks Approve or Reject
6. On Approve → PR is merged automatically
   On Reject → pipeline is halted, reason is logged

Why This Matters

SaaS Factory's autonomous merge pipeline is powerful precisely because humans stay in the loop at defined gates — not at every commit. For that loop to work well, the gate must give reviewers everything they need to make a confident decision in one place.

Without the diff, reviewers faced a choice between:

  • Approving blind (fast but risky)
  • Switching to GitHub for every gate (safe but slow and context-breaking)

With the embedded diff viewer, the gate is now a complete review surface — closer to Devin's proposal-review step and Cursor BugBot's inline Fix/Reject UX, but integrated natively into the SaaS Factory dashboard.

Technical Reference

Data Layer

  • Table: approval_gates
  • The gate record stores a reference to the associated PR. The UI resolves the diff from that reference at render time.

Component

  • Component: ApprovalGate
  • The component now accepts and renders diff data alongside the existing contextData prop.

Related