@incodetech/web 2.0.0-alpha.2 → 2.0.0-alpha.3

package/dev/main-headless.tsx

@@ -1,1332 +0,0 @@
-/**
- * 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);
-}