Interactive Live Sandbox Demo

The SaaS Factory landing page includes a fully interactive, client-side pipeline simulation that lets prospective users watch the platform's 5-agent pipeline run from idea to merged PR — without signing up.

Overview

The demo is embedded directly on the landing page between the hero and pipeline sections. It is accessible via the "See it in action" button in the hero, which scrolls to the #demo anchor.

The entire simulation runs in the browser. No server calls are made; all log output and timing is pre-scripted to illustrate realistic agent behaviour.

The Pipeline Simulation

The demo runs a fixed scenario: "A Stripe analytics dashboard that surfaces revenue leaks." It advances through five sequential stages, each driven by a named agent:

1. Research Agent

• Scans competitor products (ChartMogul, Baremetrics, ProfitWell, Stripe Sigma)
• Identifies market gaps and demand signals
• Outputs an opportunity score

2. Architect Agent

• Decomposes the feature into schema, API, and UI tasks
• Produces a complexity estimate

3. Engineer Agent

• Writes the database migration, tRPC router, and React component
• Opens a simulated PR (PR #47: feat/revenue-leak-detector)

4. QA Agent

• Runs Vitest unit tests and a Playwright end-to-end spec
• Reports coverage results

5. Release Agent

• Auto-merges the PR after CI passes
• Deploys to Vercel, runs the database migration, and tags a release

Total simulated runtime: ~16 seconds.

UI Components

Browser Chrome

A fake browser bar displays app.saasfactory.ai/demo/pipeline, giving the simulation the appearance of an in-product screen.

Step Indicators

Five pill-shaped indicators sit across the top of the demo panel. Each indicator:

• Shows the agent's icon in an idle (muted) state before the stage starts
• Switches to a spinning loader with a pulsing ring animation while the stage is active
• Switches to a check icon in the agent's colour once the stage completes
• Is connected by a horizontal line that brightens as stages complete

Terminal Log

A scrollable font-mono terminal panel drips log lines in real time as each stage runs. Each line includes:

• A wall-clock timestamp (HH:MM:SS)
• A colour-coded agent prefix (e.g. [Engineer Agent] in green)
• The log message text

The terminal auto-scrolls to the latest entry. While no pipeline is running it displays a "Waiting to start pipeline…" placeholder.

PR Result Card

On completion, a card appears below the terminal showing:

• PR #47 merged with a production badge
• Branch name and line count: feat/revenue-leak-detector — 3 files, +187 lines
• A green check icon

Replay

A Run again button resets all state — step statuses, log lines, and the PR card — and allows the user to replay the demo from the beginning. All in-flight timers are cancelled before the reset to prevent state corruption.

Technical Notes

Detail	Value
Component file	src/components/live-sandbox-demo.tsx
Rendering mode	"use client" (React client component)
State management	useState + useRef for timer handles
Timer cleanup	All setTimeout IDs stored in a ref; cleared on unmount and on reset
Dependencies	lucide-react, @/components/ui/button, @/components/ui/badge
Lines of code	584

No new environment variables, API routes, or database tables are introduced by this feature.