Web UI Tour
This page orients you to the parts of the Liteguard interface that matter for day-to-day use. It is intended as a reference, not a step-by-step guide. If you are looking for a task walkthrough, start with Getting Started instead.
App layout
After signing in, the app opens on the Guards tab. The main navigation has five destinations:
- Guards — the guard catalog and guard detail pages. This is where you spend most of your time.
- Monitor — observability surface. It is not yet the primary verification surface.
- Actions — notification and response workflows (in development).
- Config — workspace and project management, credentials, and environment settings.
- Switcher — the context selector for changing your active workspace, environment, and project.
On mobile, these appear as a tab bar at the bottom of the screen. On desktop, they appear as a vertical sidebar on the left edge of the window.
The context selector (Switcher)
Most screens in the app are scoped to a specific workspace, environment, and project. The currently active context is shown in a bar near the top of the screen, below the page title, displaying the workspace name and environment name.
Tapping or clicking that bar opens the Switcher. The Switcher is a sheet modal organized into three sections:
- Workspace — lists all workspaces you have access to. Selecting a workspace resets the environment to that workspace's default and clears the project selection.
- Environment — lists all environments defined in the selected workspace. Each environment shows its name, a color indicator, and its slug. The currently active environment is marked.
- Project — lists all projects in the selected workspace. You can also choose All Projects to see data without a project filter, though some views require a specific project to be selected.
On desktop, the Switcher opens from a button in the left sidebar that shows the current workspace, project, and environment at a glance.
Changes made in the Switcher take effect immediately. The page behind the Switcher updates as soon as you make a selection.
Guards tab
The Guards tab shows the guard catalog for the selected workspace, project, and environment.
At the top of the catalog there are three summary metrics:
- Adopted — how many guards have a configuration record in this project, out of the total observed.
- Measuring — how many adopted guards are still emitting evaluation telemetry.
- Active — how many adopted guards have an Active lifecycle state.
Below the metrics is a search field and the catalog list. Each list item shows the guard name, an optional description, metadata such as evaluation count and last evaluated time, and status chips.
Guards that have been observed by the SDK but not yet assigned a configuration appear in a separate section with an Adopt button.
At the top right of the catalog there is an Add button for creating a new guard from scratch.
Guard detail page
Tapping or clicking a guard in the catalog opens its detail page. This page has several sections:
Header area — shows the guard name, the current workspace and environment context, and an edit button (pencil icon) for changing the guard's name, description, tags, or lifecycle state.
Lifecycle toggle — a checkbox labeled Active that controls whether the guard is enforcing its configuration. When unchecked the guard is archived and the detail page shows "Not enforcing."
Environment configuration — the main editing surface. The configuration shown reflects the currently selected environment. It contains:
- Default value — the toggle determining what
isOpenreturns when no rule matches. - Rules — an ordered list of property-based conditions. Rules can be reordered with the up and down arrows, and each rule has an enabled/disabled toggle.
- Rate limit — an optional per-minute ceiling, with an optional set of property keys to key the limit by.
- Measurement — a toggle to disable telemetry emission for this guard in this environment.
A Save button appears at the top right of the configuration section. The button is active when there are unsaved changes and the form has no validation errors.
To configure the same guard for a different environment, use the Switcher to change the active environment, then adjust and save.
Config tab
The Config tab is the entrypoint for workspace and project management.
Workspace list
The first screen in Config shows all workspaces. Each workspace is listed as a card showing the workspace name and its projects.
Tapping a workspace card opens the workspace detail page.
Workspace detail page
The workspace detail page has three panels:
- Workspace details — the workspace name and the edit button.
- Environments — the list of environments defined for this workspace, each showing its name, color, slug, and an optional description. An Add button creates a new environment. The pencil icon edits an existing one.
- Projects — the list of projects in this workspace. An Add Project button creates a new one. Tapping a project opens the project detail page.
Project detail page
The project detail page has four sections:
Project details — the project name and an edit button.
Project Client Tokens — the credentials the SDK uses to authenticate with Liteguard and fetch the guard bundle. Each token shows its last eight characters, its enabled status, and a menu button. The menu offers options to copy the full token value, rotate it (by creating a second token before disabling the first), disable it, and delete it.
Protection Keys — used by a trusted backend signer to create signed protected-context payloads. Each key shows its last eight characters and an enabled/disabled status. Protection Keys are only needed when you use the protected-context feature to pass server-signed properties to the SDK. If you are not using protected contexts, this section can be ignored.
Bundle Preview — an expandable debugging panel. It shows the exact guard bundle that Liteguard would serve to the SDK for this project in the currently selected environment, including each guard's name, default value, rules, rate limit, and measurement setting. It also shows the bundle ETag and the configured refresh rate. Use Bundle Preview to confirm that your saved guard configurations are assembling correctly before debugging your application.
Monitor tab
The Monitor tab exists in the navigation but its UX is not yet the primary verification surface. Use the Guards tab and the guard detail page to verify activity today.