Operational runtime-state control for customer-facing applications

import { RuntimeProvider, useRuntimeState } from '@runtimehq/react';

// 1. Wrap your application root
export default function App() {
  return (
    <RuntimeProvider apiKey="rt_pub_prod_8f2d9c..." appId="app_checkout_prod">
      <CheckoutLayout />
    </RuntimeProvider>
  );
}

// 2. Consume effective state in any component
function CheckoutLayout() {
  const { state, message, isLoading } = useRuntimeState();

  if (state === 'outage') {
    return (
      <div className="bg-red-50 border-b border-red-200 p-3 text-center text-xs text-red-700">
        ⚠️ {message || 'Checkout is temporarily degraded. Our SRE team is investigating.'}
      </div>
    );
  }

  return <PaymentForm disabled={state === 'outage'} />;
}