Demo Mode

The demo mode system provides a fully client-side simulation of the ETL pipeline. It makes zero API calls, zero Supabase queries, and zero file uploads. Everything runs from hardcoded data and setTimeout timers.

Purpose

The demo runs on the public landing page (/) without requiring authentication. When a visitor clicks “Preview Demo” in the LandingHero, the useDemoMode hook fires and the same ProgressStepper and ResultsPanel components render with simulated data — giving users a realistic preview of what the pipeline does.

The useDemoMode Hook

File: hooks/useDemoMode.ts

State

{
  active: boolean;       // Whether the demo is running
  state: string;         // Current pipeline state (idle/uploading/analyzing/extracting/complete)
  progress: JobProgress; // Full progress object, same shape as real pipeline
  start: () => void;     // Begin simulation
  reset: () => void;     // Stop and clear
}

How It Works

1. Calling start() sets active = true and begins stepping through DEMO_STEPS
2. Each step updates state and progress with new values, then schedules the next step via setTimeout with the step’s delay
3. Milestones accumulate exactly like the real pipeline — each step adds a new Milestone entry with Date.now() timestamp
4. When the final step is reached (complete), the simulation stops
5. Calling reset() clears the timeout, resets all state to defaults, and sets active = false
6. The timer is cleaned up on component unmount via a useEffect return

The 23 Demo Steps

The simulation runs through 23 scripted steps with carefully timed delays:

Total simulated duration is approximately 20 seconds.

Message Flow with Entity Terminology

The milestone messages deliberately use the Sheet/Table/Unit hierarchy to teach users the pipeline’s mental model:

File → Sheets → Tables → Units → Clean Output

1. Sheets are discovered first (the raw Excel worksheets)
2. Tables are found within Sheets (distinct data regions)
3. Units are extracted from Tables (individual apartment/unit records)

These entity terms are color-coded by the ProgressStepper component’s colorizeMessage function.

Demo Property Data

At step 12 (40% progress), the demo reveals the detected property:

Demo Results

When the simulation reaches complete, the progress object is populated with final results:

Unit Breakdown

{
  "successful": 100,
  "flagged": 5,
  "failed": 1,
  "total": 106
}

Errors

• Unit 2107: missing lease end date

Warnings

• Row 45 (unit=2205): total_charges (1525) != sum (1525.00)
• Row 18 (unit=1402): Occupied unit with zero base rent
• Row 67 (unit=2501): duplicate unit_id '2501'
• Row 89 (unit=3102): total_charges (1450) != sum (1415.00)
• Row count mismatch: extracted 106 units but expected ~112 from data range

Demo Comparison Data

The DEMO_COMPARISON_DATA array contains 6 hardcoded ComparisonUnit objects representing Units from the Montrose property. These are used when the user clicks “Compare Source & Output” on the demo results panel.

Units

Difference Types

Each Unit includes a differences array showing what changed between source and cleaned output:

Color-Coded Entity System

Throughout the demo (and the real pipeline), three entity types are visually distinguished in milestone messages:

These colors are applied by ProgressStepper’s colorizeMessage function, which splits messages on /(File|Sheets?|Tables?|Units?)/g and wraps matches in styled <Text> spans with fw={600} (semibold) and fs="italic". The <E> and <Flow> components in this documentation mirror that same color system.

Integration

The landing page (/) wires everything together:

const demo = useDemoMode();
 
// In the JSX:
{!demo.active && <LandingHero onPreviewDemo={demo.start} />}
{demo.active && demo.state !== "complete" && (
  <ProgressStepper pipelineState={demo.state} progress={demo.progress} />
)}
{demo.state === "complete" && (
  <ResultsPanel progress={demo.progress} jobId="demo" onReset={demo.reset} isDemo />
)}

When isDemo is true, the ResultsPanel disables the download button and the ComparisonView uses DEMO_COMPARISON_DATA instead of fetching from the API.