Skip to content

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 isOpen returns 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 live per-minute ceiling, with an optional set of partition properties to key the limit by. Guards can also carry an optional Dry Run rate-limit config for testing a candidate limit without changing the live result.
  • 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 five sections:

  • 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.
  • People and access — the workspace's members and invitations. A summary row shows the member count, pending invite count, and your current role. Below the summary is the members list and the invitations list. The Invite member button opens a modal to send an invitation by email. Owners can remove members, and owners and editors can revoke pending invitations. A Show history toggle reveals accepted, revoked, and expired invitations.
  • Workspace activity — a chronological log of changes to the workspace. Each entry shows a timestamp, a summary, who performed the action, and the specific fields that changed. Events include workspace updates, members added or removed, and invitations created or revoked.

Project detail page

The project detail page has five 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.

Properties — the project's catalog of observed SDK property names. This section powers the rule and rate-limit typeahead used elsewhere in the app. Opening a property shows where it has been observed, what rules reference it, and whether it is marked as protected. Protecting a property removes matching rules from the public SDK bundle unless the client binds a trusted protected context.

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, live rateLimit, optional dryRunRateLimit, and measurement setting. It also shows the bundle ETag and the configured refresh rate. If protected properties are hiding rules from public clients, Bundle Preview shows which property names were omitted. The Show protected rules toggle lets operators inspect the protected variant for debugging, while public SDK clients still receive the filtered bundle.


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.


Invite acceptance

When someone shares a workspace invitation link with you, the link opens a dedicated acceptance page. If you are not signed in, the page shows the workspace name and the email the invitation was sent to, with a button to log in. After signing in with the matching email address, acceptance happens automatically and you are taken to the workspace.

If you sign in with a different email than the one on the invitation, the page shows a mismatch message and offers to log you out so you can try again. Expired or revoked invitations show an appropriate message with a link back to the app.