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

package/dev/main-orchestrated-flow.tsx

@@ -1,1158 +0,0 @@
-import type { WasmConfig } from '@incodetech/core';
-import {
-  createSession,
-  initializeWasmUtil,
-  setWasmConfig,
-  warmupWasm,
-} from '@incodetech/core';
-import { emailMachine } from '@incodetech/core/email';
-import type { FlowModuleConfig } from '@incodetech/core/flow';
-import {
-  createOrchestratedFlowManager,
-  getRequiredWasmPipelines,
-  type OrchestratedFlowReadyState,
-} from '@incodetech/core/flow';
-import { phoneMachine } from '@incodetech/core/phone';
-import { selfieMachine } from '@incodetech/core/selfie';
-import { render } from 'preact';
-import type { ComponentType, FC } from 'preact/compat';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { useManager } from '../src/hooks';
-import '../src/styles/tokens/index.css';
-import '../src/styles/reset.css';
-import '../src/phone/styles.css';
-import '../src/selfie/styles.css';
-import '../src/email/styles.css';
-import '../src/shared/loader/loadingIcon.css';
-import '../src/shared/spinner/spinner.css';
-import '../src/shared/spacer/spacer.css';
-import '../src/shared/title/title.css';
-
-/**
- * SDK's reusable Spinner component - LoadingIcon + optional text
- *
- * Can be styled via CSS variables (see orchestrated-flow.html):
- *   --spinner-surface-primary, --spinner-surface-secondary
- *   --spinner-text-title, --spinner-text-subtitle
- *   --spinner-surface-overlay, --spinner-surface-overlay-opacity
- */
-import { Spinner } from '../src/shared/spinner';
-
-// Lazy-load UI modules for code splitting
-const LAZY_UI_MODULES = {
-  PHONE: () => import('../src/phone/phone').then((m) => m.Phone),
-  EMAIL: () => import('../src/email/email').then((m) => m.Email),
-  SELFIE: () => import('../src/selfie/selfie').then((m) => m.Selfie),
-};
-
-import tiktokLogo from './tiktok-logo.svg';
-
-// ============================================================================
-// CUSTOM BRAND THEME - Override SDK tokens for your brand colors
-// ============================================================================
-const CustomBrandTheme: FC = () => (
-  <style>
-    {`
-      .IncodeTikTokTheme {
-        --tiktok-logo-height: 24px;
-
-        --surface-neutral-0: #000000;
-        --surface-neutral-50: #0b0b0f;
-        --surface-neutral-100: #14141a;
-        --text-body-primary: #ffffff;
-        --text-body-secondary: rgba(255, 255, 255, 0.72);
-        --text-body-tertiary: rgba(255, 255, 255, 0.45);
-
-        --text-link-default: #25f4ee;
-        --text-accent-brand-static: #25f4ee;
-
-        --button-primary-surface-default: #fe2c55;
-        --button-primary-surface-hover: #e7244a;
-        --button-primary-surface-pressed: #c61c3f;
-        --button-primary-text-default: #ffffff;
-        --button-primary-border-default: #fe2c55;
-        --button-primary-border-hover: #e7244a;
-        --button-primary-border-pressed: #c61c3f;
-
-        --button-secondary-surface-default: rgba(255, 255, 255, 0.04);
-        --button-secondary-surface-hover: rgba(255, 255, 255, 0.08);
-        --button-secondary-text-default: #25f4ee;
-        --button-secondary-border-default: rgba(37, 244, 238, 0.55);
-        --button-secondary-border-hover: rgba(37, 244, 238, 0.8);
-      }
-
-      .IncodeTikTokTheme .IncodePageHeader {
-        background: linear-gradient(135deg, #0b0b0f 0%, #000000 100%);
-      }
-
-      .IncodeTikTokTheme .IncodePageHeader .IncodePageLogo {
-        filter: brightness(0) invert(1);
-        height: var(--tiktok-logo-height);
-        width: auto;
-      }
-
-      .IncodeTikTokTheme .IncodeButton:hover {
-        box-shadow: 0 4px 14px rgba(254, 44, 85, 0.25);
-      }
-    `}
-  </style>
-);
-
-import { setup } from '../src/setup';
-import { getConfigIdFromUrl } from './getToken';
-
-// Configuration
-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 will be determined by flow analysis
-};
-
-// ============================================================================
-// CUSTOM COMPONENTS - These demonstrate full UI customization
-// ============================================================================
-
-/**
- * Custom animated loader with pulse effect
- */
-const CustomLoader: FC<{ message?: string }> = ({ message = 'Loading...' }) => (
-  <div
-    style={{
-      minHeight: '100vh',
-      background:
-        'linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #2563eb 100%)',
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: '2rem',
-    }}
-  >
-    {/* Animated rings - Blue & Gold */}
-    <div style={{ position: 'relative', width: '120px', height: '120px' }}>
-      <div
-        style={{
-          position: 'absolute',
-          inset: 0,
-          border: '3px solid transparent',
-          borderTopColor: '#3b82f6',
-          borderRadius: '50%',
-          animation: 'spin 1s linear infinite',
-        }}
-      />
-      <div
-        style={{
-          position: 'absolute',
-          inset: '10px',
-          border: '3px solid transparent',
-          borderTopColor: '#f59e0b',
-          borderRadius: '50%',
-          animation: 'spin 1.5s linear infinite reverse',
-        }}
-      />
-      <div
-        style={{
-          position: 'absolute',
-          inset: '20px',
-          border: '3px solid transparent',
-          borderTopColor: '#60a5fa',
-          borderRadius: '50%',
-          animation: 'spin 2s linear infinite',
-        }}
-      />
-      {/* Center dot - Gold */}
-      <div
-        style={{
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          width: '16px',
-          height: '16px',
-          background: '#f59e0b',
-          borderRadius: '50%',
-          animation: 'pulse 1s ease-in-out infinite',
-        }}
-      />
-    </div>
-
-    {/* Message */}
-    <div style={{ textAlign: 'center' }}>
-      <p
-        style={{
-          color: '#fff',
-          fontSize: '1.25rem',
-          fontWeight: 500,
-          marginBottom: '0.5rem',
-        }}
-      >
-        {message}
-      </p>
-      <p style={{ color: '#94a3b8', fontSize: '0.875rem' }}>
-        Custom loader • Your brand, your style
-      </p>
-    </div>
-
-    {/* CSS Animations */}
-    <style>
-      {`
-        @keyframes spin {
-          to { transform: rotate(360deg); }
-        }
-        @keyframes pulse {
-          0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
-          50% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); }
-        }
-      `}
-    </style>
-  </div>
-);
-
-/**
- * Custom landing page with gradient design
- */
-const CustomLandingPage: FC<{
-  onStart: () => void;
-}> = ({ onStart }) => (
-  <div
-    style={{
-      minHeight: '100vh',
-      background: 'linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%)',
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: '2rem',
-      position: 'relative',
-      overflow: 'hidden',
-    }}
-  >
-    {/* Background decoration */}
-    <div
-      style={{
-        position: 'absolute',
-        top: '-50%',
-        right: '-20%',
-        width: '600px',
-        height: '600px',
-        background: 'rgba(255,255,255,0.1)',
-        borderRadius: '50%',
-        filter: 'blur(60px)',
-      }}
-    />
-    <div
-      style={{
-        position: 'absolute',
-        bottom: '-30%',
-        left: '-10%',
-        width: '400px',
-        height: '400px',
-        background: 'rgba(255,255,255,0.08)',
-        borderRadius: '50%',
-        filter: 'blur(40px)',
-      }}
-    />
-
-    {/* Content */}
-    <div
-      style={{
-        position: 'relative',
-        zIndex: 1,
-        textAlign: 'center',
-        maxWidth: '500px',
-      }}
-    >
-      {/* Badge */}
-      <div
-        style={{
-          display: 'inline-flex',
-          alignItems: 'center',
-          gap: '0.5rem',
-          background: 'rgba(255,255,255,0.2)',
-          backdropFilter: 'blur(10px)',
-          borderRadius: '9999px',
-          padding: '0.5rem 1rem',
-          marginBottom: '2rem',
-        }}
-      >
-        <span style={{ fontSize: '0.875rem' }}>🎨</span>
-        <span
-          style={{
-            color: '#fff',
-            fontSize: '0.75rem',
-            fontWeight: 600,
-            textTransform: 'uppercase',
-            letterSpacing: '0.1em',
-          }}
-        >
-          Custom Landing Page
-        </span>
-      </div>
-
-      {/* Title */}
-      <h1
-        style={{
-          color: '#fff',
-          fontSize: '2.5rem',
-          fontWeight: 700,
-          marginBottom: '1rem',
-          lineHeight: 1.2,
-        }}
-      >
-        Welcome to Your
-        <br />
-        <span style={{ color: '#ffd700' }}>Branded Experience</span>
-      </h1>
-
-      {/* Subtitle */}
-      <p
-        style={{
-          color: 'rgba(255,255,255,0.85)',
-          fontSize: '1.1rem',
-          lineHeight: 1.6,
-          marginBottom: '1rem',
-        }}
-      >
-        This is a fully customized start screen. With the orchestrated flow
-        pattern, you control every pixel of the user experience.
-      </p>
-
-      {/* Feature badges */}
-      <div
-        style={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          justifyContent: 'center',
-          gap: '0.5rem',
-          marginBottom: '2rem',
-        }}
-      >
-        {[
-          '🎨 Custom Colors',
-          '✨ Custom Loader',
-          '📝 Custom Screens',
-          '🎯 Brand Fonts',
-        ].map((feature) => (
-          <span
-            key={feature}
-            style={{
-              background: 'rgba(255,255,255,0.1)',
-              borderRadius: '9999px',
-              padding: '0.375rem 0.75rem',
-              fontSize: '0.75rem',
-              color: 'rgba(255,255,255,0.9)',
-            }}
-          >
-            {feature}
-          </span>
-        ))}
-      </div>
-
-      {/* Modules available */}
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          gap: '0.75rem',
-          marginBottom: '2.5rem',
-          flexWrap: 'wrap',
-        }}
-      >
-        {['📸 Selfie', '📱 Phone', '✉️ Email'].map((module) => (
-          <div
-            key={module}
-            style={{
-              background: 'rgba(255,255,255,0.15)',
-              borderRadius: '8px',
-              padding: '0.5rem 1rem',
-            }}
-          >
-            <span style={{ color: '#fff', fontSize: '0.875rem' }}>
-              {module}
-            </span>
-          </div>
-        ))}
-      </div>
-      <p
-        style={{
-          color: 'rgba(255,255,255,0.6)',
-          fontSize: '0.75rem',
-          marginBottom: '1.5rem',
-        }}
-      >
-        Step order determined by your flow configuration
-      </p>
-
-      {/* CTA Button - Golden yellow */}
-      <button
-        type="button"
-        onClick={onStart}
-        style={{
-          background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
-          color: '#1e3a5f',
-          border: 'none',
-          borderRadius: '12px',
-          padding: '1rem 3rem',
-          fontSize: '1.1rem',
-          fontWeight: 700,
-          cursor: 'pointer',
-          boxShadow: '0 10px 30px rgba(245, 158, 11, 0.4)',
-          transition: 'transform 0.2s, box-shadow 0.2s',
-        }}
-      >
-        Begin Verification →
-      </button>
-
-      {/* Footer */}
-      <p
-        style={{
-          color: 'rgba(255,255,255,0.5)',
-          fontSize: '0.75rem',
-          marginTop: '3rem',
-        }}
-      >
-        Powered by Incode SDK • Orchestrated Flow Pattern
-      </p>
-    </div>
-  </div>
-);
-
-/**
- * Custom error screen
- */
-const CustomErrorScreen: FC<{
-  error: string;
-  onRetry: () => void;
-}> = ({ error, onRetry }) => (
-  <div
-    style={{
-      minHeight: '100vh',
-      background: 'linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%)',
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: '2rem',
-    }}
-  >
-    {/* Error icon */}
-    <div
-      style={{
-        width: '80px',
-        height: '80px',
-        borderRadius: '50%',
-        background: 'rgba(255, 91, 91, 0.1)',
-        border: '2px solid rgba(255, 91, 91, 0.3)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginBottom: '1.5rem',
-      }}
-    >
-      <span style={{ fontSize: '2rem' }}>⚠️</span>
-    </div>
-
-    <h2 style={{ color: '#fff', fontSize: '1.5rem', marginBottom: '0.5rem' }}>
-      Something went wrong
-    </h2>
-
-    <p
-      style={{
-        color: '#ff6b6b',
-        fontSize: '0.875rem',
-        marginBottom: '2rem',
-        maxWidth: '400px',
-        textAlign: 'center',
-      }}
-    >
-      {error}
-    </p>
-
-    <button
-      type="button"
-      onClick={onRetry}
-      style={{
-        background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
-        color: '#1e3a5f',
-        border: 'none',
-        borderRadius: '8px',
-        padding: '0.75rem 2rem',
-        fontSize: '1rem',
-        fontWeight: 600,
-        cursor: 'pointer',
-      }}
-    >
-      Try Again
-    </button>
-
-    <p style={{ color: '#64748b', fontSize: '0.75rem', marginTop: '2rem' }}>
-      Custom error screen • Full control over error states
-    </p>
-  </div>
-);
-
-/**
- * Custom completion screen with JSON viewer
- */
-const CustomCompletionScreen: FC<{
-  finishStatus: {
-    redirectionUrl?: string;
-    action?: string;
-    scoreStatus?: string;
-  } | null;
-  onReset: () => void;
-}> = ({ finishStatus, onReset }) => {
-  const finishData = {
-    status: 'completed',
-    timestamp: new Date().toISOString(),
-    result: {
-      redirectionUrl: finishStatus?.redirectionUrl ?? null,
-      action: finishStatus?.action ?? null,
-      scoreStatus: finishStatus?.scoreStatus ?? null,
-    },
-  };
-
-  return (
-    <div
-      style={{
-        minHeight: '100vh',
-        background: 'linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%)',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '2rem',
-        fontFamily:
-          '"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace',
-      }}
-    >
-      {/* Success badge */}
-      <div
-        style={{
-          background: 'rgba(16, 185, 129, 0.1)',
-          border: '1px solid rgba(16, 185, 129, 0.3)',
-          borderRadius: '9999px',
-          padding: '0.5rem 1rem',
-          marginBottom: '1.5rem',
-          display: 'flex',
-          alignItems: 'center',
-          gap: '0.5rem',
-        }}
-      >
-        <span style={{ color: '#10b981', fontSize: '1.25rem' }}>✓</span>
-        <span
-          style={{
-            color: '#10b981',
-            fontSize: '0.875rem',
-            fontWeight: 600,
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-          }}
-        >
-          Flow Completed
-        </span>
-      </div>
-
-      {/* Title */}
-      <h1
-        style={{
-          color: '#fff',
-          fontSize: '1.5rem',
-          fontWeight: 600,
-          marginBottom: '0.5rem',
-          fontFamily: 'system-ui, sans-serif',
-        }}
-      >
-        Orchestrated Flow Result
-      </h1>
-      <p
-        style={{
-          color: '#6b7280',
-          fontSize: '0.875rem',
-          marginBottom: '2rem',
-        }}
-      >
-        Custom completion screen • Your UI, your data
-      </p>
-
-      {/* JSON Viewer */}
-      <div
-        style={{
-          background: '#0d1117',
-          border: '1px solid #30363d',
-          borderRadius: '12px',
-          width: '100%',
-          maxWidth: '500px',
-          overflow: 'hidden',
-          boxShadow: '0 4px 24px rgba(0, 0, 0, 0.4)',
-        }}
-      >
-        {/* Header bar */}
-        <div
-          style={{
-            background: '#161b22',
-            padding: '0.75rem 1rem',
-            borderBottom: '1px solid #30363d',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '0.5rem',
-          }}
-        >
-          <div style={{ display: 'flex', gap: '6px' }}>
-            <span
-              style={{
-                width: '12px',
-                height: '12px',
-                borderRadius: '50%',
-                background: '#ff5f56',
-              }}
-            />
-            <span
-              style={{
-                width: '12px',
-                height: '12px',
-                borderRadius: '50%',
-                background: '#ffbd2e',
-              }}
-            />
-            <span
-              style={{
-                width: '12px',
-                height: '12px',
-                borderRadius: '50%',
-                background: '#27ca40',
-              }}
-            />
-          </div>
-          <span
-            style={{
-              color: '#8b949e',
-              fontSize: '0.75rem',
-              marginLeft: 'auto',
-            }}
-          >
-            response.json
-          </span>
-        </div>
-
-        {/* JSON content */}
-        <pre
-          style={{
-            margin: 0,
-            padding: '1.25rem',
-            color: '#e6edf3',
-            fontSize: '0.8rem',
-            lineHeight: 1.6,
-            overflow: 'auto',
-          }}
-        >
-          <code>
-            <span style={{ color: '#8b949e' }}>{'{\n'}</span>
-            <span style={{ color: '#7ee787' }}> "status"</span>
-            <span style={{ color: '#8b949e' }}>: </span>
-            <span style={{ color: '#a5d6ff' }}>"{finishData.status}"</span>
-            <span style={{ color: '#8b949e' }}>,{'\n'}</span>
-            <span style={{ color: '#7ee787' }}> "timestamp"</span>
-            <span style={{ color: '#8b949e' }}>: </span>
-            <span style={{ color: '#a5d6ff' }}>"{finishData.timestamp}"</span>
-            <span style={{ color: '#8b949e' }}>,{'\n'}</span>
-            <span style={{ color: '#7ee787' }}> "result"</span>
-            <span style={{ color: '#8b949e' }}>: {'{\n'}</span>
-            <span style={{ color: '#7ee787' }}> "redirectionUrl"</span>
-            <span style={{ color: '#8b949e' }}>: </span>
-            <span style={{ color: '#a5d6ff' }}>
-              {finishData.result.redirectionUrl
-                ? `"${finishData.result.redirectionUrl}"`
-                : 'null'}
-            </span>
-            <span style={{ color: '#8b949e' }}>,{'\n'}</span>
-            <span style={{ color: '#7ee787' }}> "action"</span>
-            <span style={{ color: '#8b949e' }}>: </span>
-            <span
-              style={{
-                color:
-                  finishData.result.action === 'approved'
-                    ? '#7ee787'
-                    : finishData.result.action === 'rejected'
-                      ? '#ff7b72'
-                      : '#a5d6ff',
-              }}
-            >
-              {finishData.result.action
-                ? `"${finishData.result.action}"`
-                : 'null'}
-            </span>
-            <span style={{ color: '#8b949e' }}>,{'\n'}</span>
-            <span style={{ color: '#7ee787' }}> "scoreStatus"</span>
-            <span style={{ color: '#8b949e' }}>: </span>
-            <span
-              style={{
-                color:
-                  finishData.result.scoreStatus === 'OK'
-                    ? '#7ee787'
-                    : finishData.result.scoreStatus === 'FAIL'
-                      ? '#ff7b72'
-                      : '#ffa657',
-              }}
-            >
-              {finishData.result.scoreStatus
-                ? `"${finishData.result.scoreStatus}"`
-                : 'null'}
-            </span>
-            <span style={{ color: '#8b949e' }}>{'\n  }\n}'}</span>
-          </code>
-        </pre>
-      </div>
-
-      {/* Actions */}
-      <div style={{ display: 'flex', gap: '1rem', marginTop: '2rem' }}>
-        <button
-          type="button"
-          onClick={onReset}
-          style={{
-            background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
-            color: '#1e3a5f',
-            border: 'none',
-            borderRadius: '8px',
-            padding: '0.75rem 1.5rem',
-            fontSize: '0.875rem',
-            fontWeight: 600,
-            cursor: 'pointer',
-          }}
-        >
-          Start Over
-        </button>
-        {finishData.result.redirectionUrl && (
-          <button
-            type="button"
-            onClick={() => {
-              const url = finishData.result.redirectionUrl;
-              if (url) {
-                window.location.assign(url);
-              }
-            }}
-            style={{
-              background: 'transparent',
-              color: '#60a5fa',
-              border: '1px solid #30363d',
-              borderRadius: '8px',
-              padding: '0.75rem 1.5rem',
-              fontSize: '0.875rem',
-              fontWeight: 600,
-              cursor: 'pointer',
-            }}
-          >
-            Go to Redirect URL →
-          </button>
-        )}
-      </div>
-
-      <p style={{ color: '#484f58', fontSize: '0.75rem', marginTop: '3rem' }}>
-        Custom completion screen • Orchestrated Flow Pattern
-      </p>
-    </div>
-  );
-};
-
-// ============================================================================
-// MAIN APP
-// ============================================================================
-
-const App: FC = () => {
-  const [isInitializing, setIsInitializing] = useState(true);
-  const [initError, setInitError] = useState<string | null>(null);
-  const [hasStarted, setHasStarted] = useState(false);
-  const [loadedComponent, setLoadedComponent] = useState<ComponentType<{
-    config: FlowModuleConfig[keyof FlowModuleConfig];
-    onFinish: () => void;
-    onError: (error: string | undefined) => void;
-  }> | null>(null);
-  const [loadingModule, setLoadingModule] = useState<string | null>(null);
-  const [moduleError, setModuleError] = useState<string | null>(null);
-  const prefetchedModulesRef = useRef<Set<string>>(new Set());
-
-  const [state, flowManager] = useManager(
-    () =>
-      createOrchestratedFlowManager({
-        modules: {
-          SELFIE: selfieMachine,
-          PHONE: phoneMachine,
-          EMAIL: emailMachine,
-        },
-      }),
-    { autoLoad: false },
-  );
-
-  // Initialize SDK and create session
-  useEffect(() => {
-    const init = async () => {
-      try {
-        const configurationId = getConfigIdFromUrl();
-
-        // Setup SDK without token first (no WASM - will warmup conditionally)
-        await setup({
-          apiURL: API_URL,
-          token: '',
-          i18n: { lang: 'en' },
-          uiConfig: {
-            logoSrc: tiktokLogo,
-            logoHeight: '24px',
-          },
-        });
-
-        // Create session
-        const session = await createSession(API_KEY, {
-          configurationId,
-          language: 'en-US',
-        });
-
-        // Re-setup with the session token (no WASM - will warmup conditionally)
-        await setup({
-          apiURL: API_URL,
-          token: session.token,
-          i18n: { lang: 'en' },
-          uiConfig: {
-            logoSrc: tiktokLogo,
-            logoHeight: '24px',
-          },
-        });
-
-        setIsInitializing(false);
-      } catch (error) {
-        console.error('Initialization error:', error);
-        setInitError(
-          error instanceof Error ? error.message : 'Failed to initialize',
-        );
-        setIsInitializing(false);
-      }
-    };
-    init();
-  }, []);
-
-  // Handle starting the flow
-  const handleStart = () => {
-    setHasStarted(true);
-    flowManager.load();
-  };
-
-  // Conditional WASM warmup based on flow modules
-  useEffect(() => {
-    if (state.status === 'ready' && WASM_CONFIG) {
-      const readyState = state as OrchestratedFlowReadyState;
-      const requiredPipelines = getRequiredWasmPipelines(readyState.flow);
-      if (requiredPipelines.length > 0) {
-        const warmupConfig = {
-          ...WASM_CONFIG,
-          pipelines: requiredPipelines,
-        };
-        setWasmConfig(warmupConfig);
-        void (async () => {
-          try {
-            await warmupWasm(warmupConfig);
-            await initializeWasmUtil(warmupConfig);
-          } catch (error) {
-            console.error('WASM warmup failed:', error);
-          }
-        })();
-      }
-    }
-  }, [state.status, state]);
-
-  // Prefetch next module while user interacts with current module
-  useEffect(() => {
-    if (state.status === 'ready') {
-      const readyState = state;
-      if (readyState.currentStepIndex < readyState.steps.length - 1) {
-        const nextStep = readyState.steps[readyState.currentStepIndex + 1];
-        if (nextStep && !prefetchedModulesRef.current.has(nextStep)) {
-          prefetchedModulesRef.current.add(nextStep);
-          const loader =
-            LAZY_UI_MODULES[nextStep as keyof typeof LAZY_UI_MODULES];
-          if (loader) {
-            loader().catch(() => {
-              prefetchedModulesRef.current.delete(nextStep);
-            });
-          }
-        }
-      }
-    }
-  }, [state]);
-
-  // Load current module component
-  useEffect(() => {
-    if (state.status === 'ready') {
-      const readyState = state;
-      const moduleKey = readyState.currentStep;
-      if (!moduleKey) {
-        setLoadedComponent(null);
-        setLoadingModule(null);
-        setModuleError(null);
-        return;
-      }
-      const loader = LAZY_UI_MODULES[moduleKey as keyof typeof LAZY_UI_MODULES];
-
-      if (!loader) {
-        setModuleError(`Unsupported module: ${moduleKey}`);
-        setLoadingModule(null);
-        setLoadedComponent(null);
-        return;
-      }
-
-      setLoadingModule(moduleKey);
-      setModuleError(null);
-      setLoadedComponent(null);
-
-      let cancelled = false;
-
-      loader()
-        .then((Component) => {
-          if (!cancelled) {
-            setLoadedComponent(() => Component);
-            setLoadingModule(null);
-          }
-        })
-        .catch((error) => {
-          if (!cancelled) {
-            const errorMessage =
-              error instanceof Error ? error.message : 'Failed to load module';
-            setModuleError(errorMessage);
-            setLoadingModule(null);
-            console.error(`Failed to load ${moduleKey}:`, errorMessage);
-          }
-        });
-
-      return () => {
-        cancelled = true;
-      };
-    } else {
-      setLoadedComponent(null);
-      setLoadingModule(null);
-      setModuleError(null);
-    }
-  }, [state]);
-
-  // ============================================================================
-  // RENDER STATES
-  // ============================================================================
-
-  // 1. Custom Loader while initializing
-  if (isInitializing) {
-    return <CustomLoader message="Preparing your experience..." />;
-  }
-
-  // 2. Custom Error Screen
-  if (initError) {
-    return (
-      <CustomErrorScreen
-        error={initError}
-        onRetry={() => window.location.reload()}
-      />
-    );
-  }
-
-  // 3. Custom Landing Page (before user clicks start)
-  if (!hasStarted) {
-    return <CustomLandingPage onStart={handleStart} />;
-  }
-
-  // 4. Loading flow configuration
-  if (state.status === 'loading') {
-    return <CustomLoader message="Loading verification steps..." />;
-  }
-
-  // 5. Flow error
-  if (state.status === 'error') {
-    return (
-      <CustomErrorScreen
-        error={state.error ?? 'An unknown error occurred'}
-        onRetry={() => flowManager.reset()}
-      />
-    );
-  }
-
-  // 6. Flow completed - Custom completion screen
-  if (state.status === 'finished') {
-    return (
-      <CustomCompletionScreen
-        finishStatus={state.finishStatus}
-        onReset={() => {
-          setHasStarted(false);
-          flowManager.reset();
-        }}
-      />
-    );
-  }
-
-  // 7. Ready - Render modules
-  if (state.status === 'ready') {
-    const { currentStep, config, moduleState } = state;
-
-    if (!currentStep) {
-      return <CustomLoader message="Preparing next step..." />;
-    }
-
-    // Show loading state while module is being loaded
-    // This demonstrates using the SDK's reusable Spinner component
-    // with CSS variable overrides (see orchestrated-flow.html for the CSS)
-    if (loadingModule || !loadedComponent) {
-      return (
-        <div class="IncodeComponent">
-          <Spinner title="Loading..." size="large" fullScreen />
-        </div>
-      );
-    }
-
-    // Show error state if module failed to load
-    if (moduleError) {
-      return (
-        <CustomErrorScreen
-          error={`Failed to load ${currentStep} module: ${moduleError}`}
-          onRetry={() => {
-            setModuleError(null);
-            setLoadingModule(currentStep);
-            const loader =
-              LAZY_UI_MODULES[currentStep as keyof typeof LAZY_UI_MODULES];
-            if (loader) {
-              loader()
-                .then((Component) => {
-                  setLoadedComponent(() => Component);
-                  setLoadingModule(null);
-                })
-                .catch((error) => {
-                  setModuleError(
-                    error instanceof Error
-                      ? error.message
-                      : 'Failed to load module',
-                  );
-                  setLoadingModule(null);
-                });
-            }
-          }}
-        />
-      );
-    }
-
-    // Render the appropriate module based on current step
-    // Note: CustomBrandTheme overrides SDK colors for your brand
-    const Component = loadedComponent;
-
-    if (currentStep === 'SELFIE') {
-      const selfieConfig = config as FlowModuleConfig['SELFIE'];
-      return (
-        <div class="IncodeComponent IncodeTikTokTheme">
-          <CustomBrandTheme />
-          <Component
-            key="selfie"
-            config={selfieConfig}
-            onFinish={() => flowManager.completeModule()}
-            onError={(error: string | undefined) => {
-              console.error('Selfie error:', error);
-            }}
-          />
-        </div>
-      );
-    }
-
-    if (currentStep === 'PHONE') {
-      const phoneConfig = config as FlowModuleConfig['PHONE'];
-      return (
-        <div class="IncodeComponent IncodeTikTokTheme">
-          <CustomBrandTheme />
-          <Component
-            key="phone"
-            config={phoneConfig}
-            onFinish={() => flowManager.completeModule()}
-            onError={(error: string | undefined) => {
-              console.error('Phone error:', error);
-              alert(`Phone error: ${error ?? 'Unknown error'}`);
-            }}
-          />
-        </div>
-      );
-    }
-
-    if (currentStep === 'EMAIL') {
-      const flowEmailConfig = config as FlowModuleConfig['EMAIL'];
-      const emailConfig = {
-        ...flowEmailConfig,
-        prefill: flowEmailConfig.prefill ?? false,
-      };
-      return (
-        <div class="IncodeComponent IncodeTikTokTheme">
-          <CustomBrandTheme />
-          <Component
-            key="email"
-            config={emailConfig}
-            onFinish={() => flowManager.completeModule()}
-            onError={(error: string | undefined) => {
-              console.error('Email error:', error);
-              alert(`Email error: ${error ?? 'Unknown error'}`);
-            }}
-          />
-        </div>
-      );
-    }
-
-    // Unsupported module - show debug info
-    return (
-      <div
-        style={{
-          minHeight: '100vh',
-          background: '#1a1a2e',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: '2rem',
-        }}
-      >
-        <h2 style={{ color: '#ffa500', marginBottom: '1rem' }}>
-          Unsupported Module: {currentStep}
-        </h2>
-        <pre
-          style={{
-            background: '#0d1117',
-            padding: '1rem',
-            borderRadius: '8px',
-            color: '#e6edf3',
-            maxWidth: '500px',
-            overflow: 'auto',
-          }}
-        >
-          {JSON.stringify(moduleState, null, 2)}
-        </pre>
-        <button
-          type="button"
-          onClick={() => flowManager.completeModule()}
-          style={{
-            marginTop: '1rem',
-            background: '#ffa500',
-            color: '#000',
-            border: 'none',
-            borderRadius: '8px',
-            padding: '0.75rem 1.5rem',
-            cursor: 'pointer',
-          }}
-        >
-          Skip Module
-        </button>
-      </div>
-    );
-  }
-
-  return <CustomLoader message="Initializing..." />;
-};
-
-const root = document.getElementById('root');
-if (root) {
-  render(<App />, root);
-}