Adding UI

Use @testpress/sentinel-ui when you want the default Sentinel overlays instead of building your own UI around the headless SDK.

Install

npm install @testpress/sentinel-core @testpress/sentinel-ui

Start the UI

import { TPSentinel } from '@testpress/sentinel-core'
import { TPSentinelUI } from '@testpress/sentinel-ui'

const sentinel = TPSentinel.create({
  orgCode: 'your-org',
  sessionId: 'session-id',
  token: 'session-token',
})

const sentinelUI = TPSentinelUI.create({
  sentinel,
  config: {
    theme: 'system',
    setup: {
      showCancelButton: true,
      onCancel: () => {
        console.log('Setup cancelled')
      },
    },
    sessionMonitor: {
      position: 'top-right',
      enableMinimize: true,
    },
  },
})

await sentinelUI.start()

There is no separate mountSentinelOverlay(...) API. TPSentinelUI.create(...) creates the UI controller, and sentinelUI.start() mounts the overlay and starts the Sentinel flow.

@testpress/sentinel-ui renders the default setup and monitoring overlays for:

• setup and consent
• permission collection and validation
• identity verification
• runtime warnings
• session monitoring

Main APIs

TPSentinelUI.create({ sentinel, config? })
await sentinelUI.start()
sentinelUI.destroy()

Call destroy() when you want to remove the UI completely:

sentinelUI.destroy()

What start() does

sentinelUI.start():

1. Mounts the overlay UI.
2. Calls await sentinel.prepare() when Sentinel is in created.
3. Calls await sentinel.start() when Sentinel is in ready.

Because it drives the core lifecycle, sentinelUI.start() can surface the same TPSentinelError failures as prepare() and start().

Configuration

The optional config object controls the appearance and behavior of the default UI.

Theme

theme: 'light' | 'dark' | 'system'

Setup

setup: {
  showCancelButton: boolean
  onCancel: () => void
}

Session monitor

sessionMonitor: {
  position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
  enableMinimize: boolean
}

Notes

• @testpress/sentinel-ui uses core types only; install @testpress/sentinel-core separately when your app creates the Sentinel instance
• TPSentinelUI.create(...) creates the controller but does not mount the UI
• sentinelUI.destroy() removes the UI completely