@incodetech/web 2.0.0-alpha.1

package/dev/main-headless.tsx

@@ -0,0 +1,1332 @@
+/**
+ * Headless SDK Demo
+ *
+ * This demonstrates using the Incode Core SDK without ANY pre-built UI components.
+ * The left panel shows YOUR CUSTOM UI - built however you want.
+ * The right panel shows the SDK STATE - the logic engine driving everything.
+ *
+ * Flow:
+ * 1. User clicks "Start Session" → Creates session via API
+ * 2. Flow config is loaded → Determines module order (e.g., Phone → Email → Selfie)
+ * 3. Each module renders with YOUR custom UI
+ * 4. SDK state machine handles all business logic
+ */
+
+import type { WasmConfig } from '@incodetech/core';
+import { createSession, setup } from '@incodetech/core';
+import {
+  createEmailManager,
+  type EmailConfig,
+  type EmailState,
+  emailMachine,
+} from '@incodetech/core/email';
+import {
+  createOrchestratedFlowManager,
+  type FlowModuleConfig,
+  type OrchestratedFlowState,
+} from '@incodetech/core/flow';
+import {
+  createPhoneManager,
+  type PhoneState,
+  phoneMachine,
+} from '@incodetech/core/phone';
+import {
+  createSelfieManager,
+  type SelfieState,
+  selfieMachine,
+} from '@incodetech/core/selfie';
+import type { JSX } from 'preact';
+import { render } from 'preact';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { getConfigIdFromUrl } from './getToken';
+
+const API_URL = 'https://user-service-k8s.stage.incodetest.com/0';
+const API_KEY = '5fbc0ab5a652b7808fbec42fffd8b4c9ec248413';
+
+const WASM_CONFIG: WasmConfig = {
+  wasmPath:
+    'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/webLib.wasm',
+  wasmSimdPath:
+    'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/webLibSimd.wasm',
+  glueCodePath:
+    'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/webLib.js',
+  modelsBasePath:
+    'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/models',
+  pipelines: ['selfie'],
+};
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type LogEntry = {
+  time: string;
+  type: 'action' | 'state' | 'init' | 'error' | 'flow';
+  message: string;
+};
+
+type FlowManager = ReturnType<typeof createOrchestratedFlowManager>;
+type PhoneManager = ReturnType<typeof createPhoneManager>;
+type EmailManager = ReturnType<typeof createEmailManager>;
+type SelfieManager = ReturnType<typeof createSelfieManager>;
+
+// ============================================================================
+// JSON Syntax Highlighter
+// ============================================================================
+
+function highlightJSON(obj: unknown, indent = 0): JSX.Element[] {
+  const spaces = '  '.repeat(indent);
+  const elements: JSX.Element[] = [];
+
+  if (obj === null) {
+    elements.push(<span class="json-null">null</span>);
+  } else if (typeof obj === 'boolean') {
+    elements.push(<span class="json-boolean">{String(obj)}</span>);
+  } else if (typeof obj === 'number') {
+    elements.push(<span class="json-number">{obj}</span>);
+  } else if (typeof obj === 'string') {
+    const display = obj.length > 50 ? `${obj.slice(0, 50)}...` : obj;
+    elements.push(<span class="json-string">"{display}"</span>);
+  } else if (Array.isArray(obj)) {
+    if (obj.length === 0) {
+      elements.push(<span class="json-bracket">[]</span>);
+    } else {
+      elements.push(<span class="json-bracket">[{'\n'}</span>);
+      obj.forEach((item, i) => {
+        elements.push(<span>{spaces} </span>);
+        elements.push(...highlightJSON(item, indent + 1));
+        if (i < obj.length - 1) elements.push(<span>,</span>);
+        elements.push(<span>{'\n'}</span>);
+      });
+      elements.push(<span>{spaces}</span>);
+      elements.push(<span class="json-bracket">]</span>);
+    }
+  } else if (typeof obj === 'object') {
+    const filteredObj: Record<string, unknown> = {};
+    for (const [key, value] of Object.entries(obj)) {
+      if (value instanceof MediaStream) {
+        filteredObj[key] = '[MediaStream]';
+      } else if (value instanceof HTMLCanvasElement) {
+        filteredObj[key] = '[Canvas]';
+      } else {
+        filteredObj[key] = value;
+      }
+    }
+    const entries = Object.entries(filteredObj);
+    if (entries.length === 0) {
+      elements.push(<span class="json-bracket">{'{}'}</span>);
+    } else {
+      elements.push(<span class="json-bracket">{'{\n'}</span>);
+      entries.forEach(([key, value], i) => {
+        elements.push(<span>{spaces} </span>);
+        elements.push(<span class="json-key">"{key}"</span>);
+        elements.push(<span class="json-bracket">: </span>);
+        elements.push(...highlightJSON(value, indent + 1));
+        if (i < entries.length - 1) elements.push(<span>,</span>);
+        elements.push(<span>{'\n'}</span>);
+      });
+      elements.push(<span>{spaces}</span>);
+      elements.push(<span class="json-bracket">{'}'}</span>);
+    }
+  }
+
+  return elements;
+}
+
+// ============================================================================
+// SDK Panel Components
+// ============================================================================
+
+function StateViewer({ state, label }: { state: unknown; label: string }) {
+  return (
+    <div class="state-viewer">
+      <div class="state-viewer-header">
+        <span>{label}</span>
+      </div>
+      <div class="state-viewer-content">
+        <pre>{highlightJSON(state)}</pre>
+      </div>
+    </div>
+  );
+}
+
+function EventLog({ entries }: { entries: LogEntry[] }) {
+  return (
+    <div class="event-log">
+      <div class="event-log-title">Event Stream</div>
+      <div class="event-log-content">
+        {entries.slice(0, 50).map((entry, i) => (
+          <div key={i} class="log-entry">
+            <span class="log-time">{entry.time}</span>
+            <span class={`log-event log-${entry.type}`}>
+              [{entry.type.toUpperCase()}]
+            </span>
+            <span class="log-data"> {entry.message}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function FlowProgress({
+  steps,
+  currentIndex,
+}: {
+  steps: string[];
+  currentIndex: number;
+}) {
+  return (
+    <div class="flow-progress">
+      {steps.map((step, i) => (
+        <div
+          key={step}
+          class={`flow-step ${i < currentIndex ? 'done' : ''} ${i === currentIndex ? 'active' : ''}`}
+        >
+          <span class="step-number">{i + 1}</span>
+          <span class="step-name">{step}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ============================================================================
+// Welcome / Session Start UI
+// ============================================================================
+
+function WelcomeUI({
+  onStartSession,
+  isStarting,
+  configId,
+  onConfigIdChange,
+}: {
+  onStartSession: () => void;
+  isStarting: boolean;
+  configId: string;
+  onConfigIdChange: (id: string) => void;
+}) {
+  return (
+    <div class="welcome-container">
+      <div class="welcome-icon">🔐</div>
+      <h1 class="welcome-title">Headless SDK Demo</h1>
+      <p class="welcome-description">
+        Build your own UI while the SDK handles all business logic, API calls,
+        and state management.
+      </p>
+
+      <div class="config-input-group">
+        <label class="config-label">
+          Configuration ID
+          <input
+            type="text"
+            class="config-input"
+            value={configId}
+            onInput={(e) =>
+              onConfigIdChange((e.target as HTMLInputElement).value)
+            }
+            placeholder="Enter your flow configuration ID"
+          />
+        </label>
+      </div>
+
+      <div class="feature-list">
+        <div class="feature">
+          <span class="feature-icon">📱</span>
+          <span>Phone verification with OTP</span>
+        </div>
+        <div class="feature">
+          <span class="feature-icon">✉️</span>
+          <span>Email verification</span>
+        </div>
+        <div class="feature">
+          <span class="feature-icon">📸</span>
+          <span>Selfie capture with WASM face detection</span>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        class="btn btn-primary btn-large"
+        onClick={onStartSession}
+        disabled={isStarting || !configId.trim()}
+      >
+        {isStarting ? (
+          <>
+            <span class="spinner-small" /> Creating Session...
+          </>
+        ) : (
+          'Start Session →'
+        )}
+      </button>
+
+      <div class="code-comment">
+        {`// Step 1: Create session
+const session = await createSession(apiKey, { configurationId });
+
+// Step 2: Setup SDK with token
+await setup({ apiURL, token: session.token, wasm: wasmConfig });
+
+// Step 3: Load flow to get module order
+flowManager.load();`}
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Phone UI Components
+// ============================================================================
+
+function PhoneInputUI({
+  state,
+  manager,
+  log,
+}: {
+  state: PhoneState & { status: 'inputting' };
+  manager: PhoneManager;
+  log: (type: LogEntry['type'], msg: string) => void;
+}) {
+  const [phone, setPhone] = useState(state.prefilledPhone || '');
+  const [isValid, setIsValid] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const handleInput = (e: Event) => {
+    const value = (e.target as HTMLInputElement).value;
+    setPhone(value);
+    const valid = /^\+\d{10,}$/.test(value.replace(/\s/g, ''));
+    setIsValid(valid);
+    log('action', `setPhoneNumber("${value}", ${valid})`);
+    manager.setPhoneNumber(value, valid);
+  };
+
+  return (
+    <div class="form-container">
+      <div class="form-header">
+        <div class="form-icon">📱</div>
+        <h2 class="form-title">Enter Your Phone</h2>
+        <p class="form-description">Include country code (e.g., +1...)</p>
+      </div>
+
+      <div class="input-group">
+        <label class="input-label">
+          Phone Number ({state.countryCode})
+          <input
+            ref={inputRef}
+            type="tel"
+            class="input-field"
+            value={phone}
+            onInput={handleInput}
+            placeholder={`${state.phonePrefix} 555 123 4567`}
+          />
+        </label>
+        <div class={`validation-status ${isValid ? 'valid' : 'invalid'}`}>
+          {isValid ? '✓ Valid format' : '○ Enter full number with country code'}
+        </div>
+      </div>
+
+      <button
+        type="button"
+        class="btn btn-primary"
+        disabled={!isValid}
+        onClick={() => {
+          log('action', 'submit()');
+          manager.submit();
+        }}
+      >
+        Send Verification Code
+      </button>
+    </div>
+  );
+}
+
+function PhoneOtpUI({
+  state,
+  manager,
+  log,
+}: {
+  state: PhoneState & { status: 'awaitingOtp' };
+  manager: PhoneManager;
+  log: (type: LogEntry['type'], msg: string) => void;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [canSubmit, setCanSubmit] = useState(false);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const handleSubmit = () => {
+    const otp = inputRef.current?.value ?? '';
+    if (otp.length === 6) {
+      log('action', `submitOtp("${otp}")`);
+      manager.submitOtp(otp);
+    }
+  };
+
+  return (
+    <div class="form-container">
+      <div class="form-header">
+        <div class="form-icon">🔐</div>
+        <h2 class="form-title">Enter Verification Code</h2>
+        <p class="form-description">6-digit code sent to your phone</p>
+      </div>
+
+      <div class="input-group">
+        <input
+          ref={inputRef}
+          type="text"
+          class="input-field"
+          style={{
+            textAlign: 'center',
+            fontSize: '1.5rem',
+            letterSpacing: '0.3em',
+          }}
+          placeholder="ABC123"
+          onInput={(e) => {
+            const input = e.target as HTMLInputElement;
+            // Allow alphanumeric, limit to 6
+            const cleaned = input.value
+              .replace(/[^a-zA-Z0-9]/g, '')
+              .toUpperCase()
+              .slice(0, 6);
+            if (cleaned !== input.value) {
+              input.value = cleaned;
+            }
+            setCanSubmit(cleaned.length === 6);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && canSubmit) {
+              handleSubmit();
+            }
+          }}
+          maxLength={6}
+        />
+      </div>
+
+      <button
+        type="button"
+        class="btn btn-primary"
+        onClick={handleSubmit}
+        disabled={!canSubmit}
+      >
+        Verify Code
+      </button>
+
+      <div class="timer">
+        {state.canResend ? (
+          <button
+            type="button"
+            class="btn btn-ghost"
+            onClick={() => {
+              log('action', 'resendOtp()');
+              manager.resendOtp();
+            }}
+          >
+            Resend Code
+          </button>
+        ) : (
+          <span>
+            Resend in <span class="timer-value">{state.resendTimer}s</span>
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Email UI Components
+// ============================================================================
+
+function EmailInputUI({
+  state,
+  manager,
+  log,
+}: {
+  state: EmailState & { status: 'inputting' };
+  manager: EmailManager;
+  log: (type: LogEntry['type'], msg: string) => void;
+}) {
+  const [email, setEmail] = useState(state.prefilledEmail || '');
+  const [isValid, setIsValid] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const handleInput = (e: Event) => {
+    const value = (e.target as HTMLInputElement).value;
+    setEmail(value);
+    const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+    setIsValid(valid);
+    log('action', `setEmail("${value}", ${valid})`);
+    manager.setEmail(value, valid);
+  };
+
+  return (
+    <div class="form-container">
+      <div class="form-header">
+        <div class="form-icon">✉️</div>
+        <h2 class="form-title">Enter Your Email</h2>
+        <p class="form-description">We'll send a verification code</p>
+      </div>
+
+      <div class="input-group">
+        <label class="input-label">
+          Email Address
+          <input
+            ref={inputRef}
+            type="email"
+            class="input-field"
+            value={email}
+            onInput={handleInput}
+            placeholder="you@example.com"
+          />
+        </label>
+        <div class={`validation-status ${isValid ? 'valid' : 'invalid'}`}>
+          {isValid ? '✓ Valid email' : '○ Enter a valid email'}
+        </div>
+      </div>
+
+      <button
+        type="button"
+        class="btn btn-primary"
+        disabled={!isValid}
+        onClick={() => {
+          log('action', 'submit()');
+          manager.submit();
+        }}
+      >
+        Send Verification Code
+      </button>
+    </div>
+  );
+}
+
+function EmailOtpUI({
+  state,
+  manager,
+  log,
+}: {
+  state: EmailState & { status: 'awaitingOtp' };
+  manager: EmailManager;
+  log: (type: LogEntry['type'], msg: string) => void;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [canSubmit, setCanSubmit] = useState(false);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const handleSubmit = () => {
+    const otp = inputRef.current?.value ?? '';
+    if (otp.length === 6) {
+      log('action', `submitOtp("${otp}")`);
+      manager.submitOtp(otp);
+    }
+  };
+
+  return (
+    <div class="form-container">
+      <div class="form-header">
+        <div class="form-icon">📧</div>
+        <h2 class="form-title">Check Your Email</h2>
+        <p class="form-description">Enter the 6-digit code we sent</p>
+      </div>
+
+      <div class="input-group">
+        <input
+          ref={inputRef}
+          type="text"
+          class="input-field"
+          style={{
+            textAlign: 'center',
+            fontSize: '1.5rem',
+            letterSpacing: '0.3em',
+          }}
+          placeholder="ABC123"
+          onInput={(e) => {
+            const input = e.target as HTMLInputElement;
+            // Allow alphanumeric, limit to 6
+            const cleaned = input.value
+              .replace(/[^a-zA-Z0-9]/g, '')
+              .toUpperCase()
+              .slice(0, 6);
+            if (cleaned !== input.value) {
+              input.value = cleaned;
+            }
+            setCanSubmit(cleaned.length === 6);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && canSubmit) {
+              handleSubmit();
+            }
+          }}
+          maxLength={6}
+        />
+      </div>
+
+      <button
+        type="button"
+        class="btn btn-primary"
+        onClick={handleSubmit}
+        disabled={!canSubmit}
+      >
+        Verify Code
+      </button>
+
+      <div class="timer">
+        {state.canResend ? (
+          <button
+            type="button"
+            class="btn btn-ghost"
+            onClick={() => {
+              log('action', 'resendOtp()');
+              manager.resendOtp();
+            }}
+          >
+            Resend Code
+          </button>
+        ) : (
+          <span>
+            Resend in <span class="timer-value">{state.resendTimer}s</span>
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Selfie UI Components
+// ============================================================================
+
+function SelfieTutorialUI({
+  manager,
+  log,
+}: {
+  manager: SelfieManager;
+  log: (type: LogEntry['type'], msg: string) => void;
+}) {
+  return (
+    <div class="form-container">
+      <div class="form-header">
+        <div class="form-icon">💡</div>
+        <h2 class="form-title">Selfie Tips</h2>
+      </div>
+
+      <ul class="tips-list">
+        <li>✓ Good lighting on your face</li>
+        <li>✓ Remove glasses if possible</li>
+        <li>✓ Look directly at the camera</li>
+        <li>✓ Keep a neutral expression</li>
+      </ul>
+
+      <button
+        type="button"
+        class="btn btn-primary"
+        onClick={() => {
+          log('action', 'nextStep()');
+          manager.nextStep();
+        }}
+      >
+        Continue →
+      </button>
+    </div>
+  );
+}
+
+function SelfiePermissionsUI({
+  state,
+  manager,
+  log,
+}: {
+  state: SelfieState & { status: 'permissions' };
+  manager: SelfieManager;
+  log: (type: LogEntry['type'], msg: string) => void;
+}) {
+  const isDenied = state.permissionStatus === 'denied';
+
+  return (
+    <div class="form-container">
+      <div class="form-header">
+        <div class="form-icon">{isDenied ? '🚫' : '📷'}</div>
+        <h2 class="form-title">
+          {isDenied ? 'Camera Blocked' : 'Camera Access'}
+        </h2>
+        <p class="form-description">
+          {isDenied
+            ? 'Enable camera in browser settings'
+            : 'We need camera access for selfie capture'}
+        </p>
+      </div>
+
+      {!isDenied && (
+        <button
+          type="button"
+          class="btn btn-primary"
+          onClick={() => {
+            log('action', 'requestPermission()');
+            manager.requestPermission();
+          }}
+        >
+          Allow Camera
+        </button>
+      )}
+    </div>
+  );
+}
+
+function SelfieCaptureUI({
+  state,
+  manager,
+  log,
+  onContinue,
+}: {
+  state: SelfieState & { status: 'capture' };
+  manager: SelfieManager;
+  log: (type: LogEntry['type'], msg: string) => void;
+  onContinue: () => void;
+}) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  // Attach stream to video element
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    if (state.stream) {
+      log('state', `[SELFIE] Attaching stream to video`);
+      video.srcObject = state.stream;
+      video.play().catch((err) => {
+        log('error', `Video play failed: ${err.message}`);
+      });
+    } else {
+      log('state', `[SELFIE] No stream available yet`);
+    }
+  }, [state.stream, log]);
+
+  const getStatusMessage = () => {
+    switch (state.detectionStatus) {
+      case 'noFace':
+        return { icon: '👤', text: 'No face detected' };
+      case 'tooClose':
+        return { icon: '↔️', text: 'Move back a bit' };
+      case 'tooFar':
+        return { icon: '↔️', text: 'Move closer' };
+      case 'blur':
+        return { icon: '🔍', text: 'Hold steady' };
+      case 'dark':
+        return { icon: '💡', text: 'Need more light' };
+      case 'faceAngle':
+        return { icon: '🔄', text: 'Face the camera' };
+      case 'tooManyFaces':
+        return { icon: '👥', text: 'Only one face' };
+      case 'centerFace':
+        return { icon: '⭕', text: 'Center your face' };
+      case 'getReady':
+        return { icon: '✨', text: 'Hold still...' };
+      case 'success':
+        return { icon: '✅', text: 'Perfect!' };
+      case 'manualCapture':
+        return { icon: '📸', text: 'Tap to capture' };
+      case 'capturing':
+        return { icon: '📷', text: 'Capturing...' };
+      default:
+        return { icon: '🔍', text: 'Detecting...' };
+    }
+  };
+
+  const status = getStatusMessage();
+  const isManualMode = state.detectionStatus === 'manualCapture';
+  const isSuccess =
+    state.detectionStatus === 'success' || state.detectionStatus === 'getReady';
+
+  // Show loading if no stream yet
+  if (!state.stream) {
+    return (
+      <div class="capture-container">
+        <div
+          class="camera-wrapper"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <div style={{ textAlign: 'center', color: 'var(--text-secondary)' }}>
+            <div class="spinner" style={{ margin: '0 auto 1rem' }} />
+            <p>Starting camera...</p>
+            <p style={{ fontSize: '0.75rem', marginTop: '0.5rem' }}>
+              captureStatus: {state.captureStatus}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div class="capture-container">
+      <div class="camera-wrapper">
+        <video ref={videoRef} autoPlay playsInline muted class="camera-feed" />
+
+        <div class="face-guide">
+          <svg viewBox="0 0 200 260" class="face-oval" aria-label="Face guide">
+            <title>Face positioning guide</title>
+            <ellipse
+              cx="100"
+              cy="130"
+              rx="75"
+              ry="100"
+              fill="none"
+              stroke={isSuccess ? '#00ff88' : '#ffffff'}
+              stroke-width="3"
+              stroke-dasharray={isSuccess ? 'none' : '8 4'}
+            />
+          </svg>
+        </div>
+
+        <div class={`capture-status ${isSuccess ? 'success' : ''}`}>
+          <span class="status-icon">{status.icon}</span>
+          <span class="status-text">{status.text}</span>
+        </div>
+      </div>
+
+      {isManualMode && (
+        <button
+          type="button"
+          class="btn btn-primary capture-btn"
+          onClick={() => {
+            log('action', 'capture()');
+            manager.capture();
+          }}
+        >
+          📸 Capture Now
+        </button>
+      )}
+
+      {state.captureStatus === 'uploading' && (
+        <div class="upload-status">
+          <span class="spinner-small" />
+          <span>Uploading...</span>
+        </div>
+      )}
+
+      {state.captureStatus === 'uploadError' && (
+        <div class="upload-error">
+          <div class="error-icon">⚠️</div>
+          <p class="error-message">{state.uploadError ?? 'Upload failed'}</p>
+          <p class="attempts-remaining">
+            Attempts remaining: {state.attemptsRemaining}
+          </p>
+          {state.attemptsRemaining > 0 ? (
+            <button
+              type="button"
+              class="btn btn-primary"
+              onClick={() => {
+                log('action', 'retryCapture()');
+                manager.retryCapture();
+              }}
+            >
+              🔄 Retry Capture
+            </button>
+          ) : (
+            <>
+              <p class="no-attempts">No attempts remaining</p>
+              <button
+                type="button"
+                class="btn btn-secondary"
+                style={{ marginTop: '1rem' }}
+                onClick={() => {
+                  log('flow', 'Continuing after max attempts reached');
+                  onContinue();
+                }}
+              >
+                Continue to Next Step →
+              </button>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============================================================================
+// Shared UI Components
+// ============================================================================
+
+function LoadingUI({ message }: { message?: string }) {
+  return (
+    <div class="loading-container">
+      <div class="spinner" />
+      <p class="loading-text">{message ?? 'Loading...'}</p>
+    </div>
+  );
+}
+
+function SuccessUI({ message }: { message: string }) {
+  return (
+    <div class="result-container">
+      <div class="result-icon">✅</div>
+      <h2 class="result-title success">{message}</h2>
+      <p class="result-description">Moving to next step...</p>
+    </div>
+  );
+}
+
+function FlowCompleteUI({
+  finishStatus,
+  onReset,
+}: {
+  finishStatus: OrchestratedFlowState & { status: 'finished' };
+  onReset: () => void;
+}) {
+  return (
+    <div class="result-container">
+      <div class="result-icon">🎉</div>
+      <h2 class="result-title success">Flow Complete!</h2>
+      <p class="result-description">All modules completed successfully.</p>
+
+      <div class="finish-data">
+        <pre>{JSON.stringify(finishStatus.finishStatus, null, 2)}</pre>
+      </div>
+
+      <button type="button" class="btn btn-primary" onClick={onReset}>
+        Start Over
+      </button>
+    </div>
+  );
+}
+
+function ErrorUI({ error, onRetry }: { error: string; onRetry: () => void }) {
+  return (
+    <div class="result-container">
+      <div class="result-icon">❌</div>
+      <h2 class="result-title error">Error</h2>
+      <p class="result-description">{error}</p>
+      <button type="button" class="btn btn-primary" onClick={onRetry}>
+        Try Again
+      </button>
+    </div>
+  );
+}
+
+// ============================================================================
+// Module Renderer - Uses its own managers, not the orchestrated flow's internal state
+// ============================================================================
+
+function ModuleUI({
+  currentStep,
+  config,
+  flowManager,
+  log,
+}: {
+  currentStep: string;
+  config: FlowModuleConfig[keyof FlowModuleConfig];
+  flowManager: FlowManager;
+  log: (type: LogEntry['type'], msg: string) => void;
+}) {
+  // Local state from our managers
+  const [phoneState, setPhoneState] = useState<PhoneState | null>(null);
+  const [emailState, setEmailState] = useState<EmailState | null>(null);
+  const [selfieState, setSelfieState] = useState<SelfieState | null>(null);
+
+  // Create module managers on demand
+  const [phoneManager] = useState(() =>
+    currentStep === 'PHONE'
+      ? createPhoneManager({ config: config as FlowModuleConfig['PHONE'] })
+      : null,
+  );
+  const [emailManager] = useState(() =>
+    currentStep === 'EMAIL'
+      ? createEmailManager({
+          config: {
+            ...(config as FlowModuleConfig['EMAIL']),
+            prefill: (config as EmailConfig).prefill ?? false,
+          },
+        })
+      : null,
+  );
+  const [selfieManager] = useState(() =>
+    currentStep === 'SELFIE'
+      ? createSelfieManager({ config: config as FlowModuleConfig['SELFIE'] })
+      : null,
+  );
+
+  // Subscribe to module state and auto-complete
+  useEffect(() => {
+    if (phoneManager) {
+      setPhoneState(phoneManager.getState());
+      const unsub = phoneManager.subscribe((state) => {
+        setPhoneState(state);
+        log('state', `[PHONE] ${state.status}`);
+        if (state.status === 'success') {
+          setTimeout(() => {
+            log('flow', 'Module PHONE complete');
+            flowManager.completeModule();
+          }, 1000);
+        }
+      });
+      phoneManager.load();
+      log('action', '[PHONE] load()');
+      return unsub;
+    }
+
+    if (emailManager) {
+      setEmailState(emailManager.getState());
+      const unsub = emailManager.subscribe((state) => {
+        setEmailState(state);
+        log('state', `[EMAIL] ${state.status}`);
+        if (state.status === 'success') {
+          setTimeout(() => {
+            log('flow', 'Module EMAIL complete');
+            flowManager.completeModule();
+          }, 1000);
+        }
+      });
+      emailManager.load();
+      log('action', '[EMAIL] load()');
+      return unsub;
+    }
+
+    if (selfieManager) {
+      setSelfieState(selfieManager.getState());
+      const unsub = selfieManager.subscribe((state) => {
+        setSelfieState(state);
+        const extra =
+          state.status === 'capture' ? ` (${state.detectionStatus})` : '';
+        log('state', `[SELFIE] ${state.status}${extra}`);
+        if (state.status === 'finished') {
+          setTimeout(() => {
+            log('flow', 'Module SELFIE complete');
+            flowManager.completeModule();
+          }, 1000);
+        }
+      });
+      selfieManager.load();
+      log('action', '[SELFIE] load()');
+      return unsub;
+    }
+  }, [phoneManager, emailManager, selfieManager, flowManager, log]);
+
+  // Render Phone module
+  if (currentStep === 'PHONE' && phoneManager && phoneState) {
+    switch (phoneState.status) {
+      case 'idle':
+      case 'loadingPrefill':
+        return <LoadingUI message="Loading phone module..." />;
+      case 'inputting':
+        return (
+          <PhoneInputUI state={phoneState} manager={phoneManager} log={log} />
+        );
+      case 'submitting':
+      case 'sendingOtp':
+        return <LoadingUI message="Sending code..." />;
+      case 'awaitingOtp':
+        return (
+          <PhoneOtpUI state={phoneState} manager={phoneManager} log={log} />
+        );
+      case 'verifyingOtp':
+        return <LoadingUI message="Verifying..." />;
+      case 'success':
+        return <SuccessUI message="Phone Verified!" />;
+      case 'error':
+      case 'otpError':
+        return (
+          <ErrorUI
+            error={phoneState.error ?? 'Unknown error'}
+            onRetry={() => phoneManager.reset()}
+          />
+        );
+    }
+  }
+
+  // Render Email module
+  if (currentStep === 'EMAIL' && emailManager && emailState) {
+    switch (emailState.status) {
+      case 'idle':
+      case 'loadingPrefill':
+        return <LoadingUI message="Loading email module..." />;
+      case 'inputting':
+        return (
+          <EmailInputUI state={emailState} manager={emailManager} log={log} />
+        );
+      case 'submitting':
+      case 'sendingOtp':
+        return <LoadingUI message="Sending code..." />;
+      case 'awaitingOtp':
+        return (
+          <EmailOtpUI state={emailState} manager={emailManager} log={log} />
+        );
+      case 'verifyingOtp':
+        return <LoadingUI message="Verifying..." />;
+      case 'success':
+        return <SuccessUI message="Email Verified!" />;
+      case 'error':
+      case 'otpError':
+        return (
+          <ErrorUI
+            error={emailState.error ?? 'Unknown error'}
+            onRetry={() => emailManager.reset()}
+          />
+        );
+    }
+  }
+
+  // Render Selfie module
+  if (currentStep === 'SELFIE' && selfieManager && selfieState) {
+    switch (selfieState.status) {
+      case 'idle':
+      case 'loading':
+        return <LoadingUI message="Loading WASM models..." />;
+      case 'tutorial':
+        return <SelfieTutorialUI manager={selfieManager} log={log} />;
+      case 'permissions':
+        return (
+          <SelfiePermissionsUI
+            state={selfieState}
+            manager={selfieManager}
+            log={log}
+          />
+        );
+      case 'capture':
+        return (
+          <SelfieCaptureUI
+            state={selfieState}
+            manager={selfieManager}
+            log={log}
+            onContinue={() => {
+              log('flow', 'Module SELFIE skipped (max attempts)');
+              flowManager.completeModule();
+            }}
+          />
+        );
+      case 'finished':
+        return <SuccessUI message="Selfie Captured!" />;
+      case 'error':
+        return (
+          <ErrorUI
+            error={selfieState.error ?? 'Unknown error'}
+            onRetry={() => selfieManager.reset()}
+          />
+        );
+    }
+  }
+
+  return <LoadingUI message={`Loading ${currentStep}...`} />;
+}
+
+// ============================================================================
+// Main App
+// ============================================================================
+
+function App() {
+  const [sessionStarted, setSessionStarted] = useState(false);
+  const [isStartingSession, setIsStartingSession] = useState(false);
+  const [configId, setConfigId] = useState(() => getConfigIdFromUrl());
+  const [flowState, setFlowState] = useState<OrchestratedFlowState | null>(
+    null,
+  );
+  const [flowManager, setFlowManager] = useState<FlowManager | null>(null);
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [initError, setInitError] = useState<string | null>(null);
+
+  const log = useCallback((type: LogEntry['type'], message: string) => {
+    const time = new Date().toLocaleTimeString('en-US', { hour12: false });
+    setLogs((prev) => [{ time, type, message }, ...prev]);
+  }, []);
+
+  const startSession = async () => {
+    setIsStartingSession(true);
+    try {
+      log('init', 'Creating session...');
+
+      // Setup SDK (no token yet)
+      await setup({
+        apiURL: API_URL,
+        token: '',
+        wasm: WASM_CONFIG,
+      });
+
+      // Create session with the configId from state
+      log('init', `Config ID: ${configId}`);
+
+      const session = await createSession(API_KEY, {
+        configurationId: configId,
+        language: 'en-US',
+      });
+      log('init', `Session created: ${session.interviewId}`);
+
+      // Re-setup with token
+      await setup({
+        apiURL: API_URL,
+        token: session.token,
+        wasm: WASM_CONFIG,
+      });
+      log('init', 'SDK configured with session token');
+
+      // Create orchestrated flow manager
+      log('init', 'Creating flow manager...');
+      const manager = createOrchestratedFlowManager({
+        modules: {
+          PHONE: phoneMachine,
+          EMAIL: emailMachine,
+          SELFIE: selfieMachine,
+        },
+      });
+
+      manager.subscribe((state) => {
+        log('flow', `Flow status: ${state.status}`);
+        setFlowState(state);
+      });
+
+      setFlowManager(manager);
+      setFlowState(manager.getState());
+      setSessionStarted(true);
+
+      // Load the flow
+      log('action', 'flowManager.load()');
+      manager.load();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      log('error', message);
+      setInitError(message);
+    } finally {
+      setIsStartingSession(false);
+    }
+  };
+
+  const resetFlow = () => {
+    setSessionStarted(false);
+    setFlowState(null);
+    setFlowManager(null);
+    setLogs([]);
+    setInitError(null);
+  };
+
+  // Render main content
+  const renderContent = () => {
+    // Welcome screen
+    if (!sessionStarted) {
+      if (initError) {
+        return <ErrorUI error={initError} onRetry={resetFlow} />;
+      }
+      return (
+        <WelcomeUI
+          onStartSession={startSession}
+          isStarting={isStartingSession}
+          configId={configId}
+          onConfigIdChange={setConfigId}
+        />
+      );
+    }
+
+    // Flow states
+    if (!flowState || !flowManager) {
+      return <LoadingUI message="Initializing..." />;
+    }
+
+    switch (flowState.status) {
+      case 'idle':
+      case 'loading':
+        return <LoadingUI message="Loading flow configuration..." />;
+
+      case 'ready':
+        if (!flowState.currentStep) {
+          return <LoadingUI message="Preparing module..." />;
+        }
+        return (
+          <ModuleUI
+            key={flowState.currentStep}
+            currentStep={flowState.currentStep}
+            config={
+              flowState.config as FlowModuleConfig[keyof FlowModuleConfig]
+            }
+            flowManager={flowManager}
+            log={log}
+          />
+        );
+
+      case 'finished':
+        return <FlowCompleteUI finishStatus={flowState} onReset={resetFlow} />;
+
+      case 'error':
+        return <ErrorUI error={flowState.error} onRetry={resetFlow} />;
+    }
+  };
+
+  // Get display state for right panel
+  const getDisplayState = () => {
+    if (!flowState) return { status: 'waiting' };
+
+    if (flowState.status === 'ready') {
+      const moduleState = flowState.moduleState as
+        | { status?: string }
+        | undefined;
+      return {
+        flowStatus: flowState.status,
+        currentStep: flowState.currentStep,
+        stepIndex: `${flowState.currentStepIndex + 1}/${flowState.steps.length}`,
+        moduleStatus: moduleState?.status,
+      };
+    }
+
+    return flowState;
+  };
+
+  return (
+    <div class="layout">
+      {/* LEFT: Custom UI */}
+      <div class="ui-panel">
+        <div class="ui-panel-header">
+          <div class="ui-badge">
+            <span>🎨</span> Your Custom UI
+          </div>
+          <h1 class="ui-title">Headless SDK</h1>
+          <p class="ui-subtitle">
+            100% custom design • SDK handles logic • You handle pixels
+          </p>
+        </div>
+
+        {/* Flow progress indicator */}
+        {flowState?.status === 'ready' && (
+          <FlowProgress
+            steps={flowState.steps}
+            currentIndex={flowState.currentStepIndex}
+          />
+        )}
+
+        <div class="ui-content">{renderContent()}</div>
+      </div>
+
+      {/* RIGHT: SDK State */}
+      <div class="sdk-panel">
+        <div class="sdk-panel-header">
+          <div class="sdk-badge">
+            <span>⚡</span> SDK State
+          </div>
+          <h2 class="sdk-title">Under the Hood</h2>
+          <p class="sdk-subtitle">@incodetech/core/flow</p>
+        </div>
+
+        <StateViewer state={getDisplayState()} label="Current State" />
+        <EventLog entries={logs} />
+      </div>
+    </div>
+  );
+}
+
+// Mount
+const root = document.getElementById('root');
+if (root) {
+  render(<App />, root);
+}