# Cameleer UI Interaction Patterns Audit

Audit date: 2026-04-09
Scope: All `.tsx` files under `ui/src/pages/` and `ui/src/components/`

---

## 1. Delete / Destructive Operations

### 1.1 Delete User
- **File**: `ui/src/pages/Admin/UsersTab.tsx` (lines 155-172, 358-365, 580-587)
- **Button location**: Detail pane header, top-right, inline with avatar and name
- **Button**: `<Button size="sm" variant="danger">Delete</Button>`
- **Confirmation**: `ConfirmDialog` (type-to-confirm)
  - Message: `Delete user "${name}"? This cannot be undone.`
  - Confirm text: user's `displayName`
  - Has `loading` prop bound to mutation
- **Self-delete guard**: Button is `disabled={isSelf}` (cannot delete yourself)
- **Toast on success**: `variant: 'warning'`, title: "User deleted"
- **Toast on error**: `variant: 'error'`, `duration: 86_400_000`

### 1.2 Remove User From Group (via User detail)
- **File**: `ui/src/pages/Admin/UsersTab.tsx` (lines 588-613)
- **Button location**: Tag `onRemove` handler on group tags in detail pane
- **Confirmation**: `AlertDialog` (simple confirm, no type-to-confirm)
  - Title: "Remove group membership"
  - Description: "Removing this group may also revoke inherited roles. Continue?"
  - Confirm label: "Remove"
  - Variant: `warning`
- **Toast on success**: `variant: 'success'`, title: "Group removed"

### 1.3 Remove Role From User (via User detail)
- **File**: `ui/src/pages/Admin/UsersTab.tsx` (lines 504-528)
- **Button location**: Tag `onRemove` handler on role tags in detail pane
- **Confirmation**: NONE -- immediate mutation on tag remove click
- **Toast on success**: `variant: 'success'`, title: "Role removed"

**INCONSISTENCY**: Removing a group shows an AlertDialog confirmation but removing a role does not, even though both can have cascading effects.

### 1.4 Delete Group
- **File**: `ui/src/pages/Admin/GroupsTab.tsx` (lines 140-155, 340-347, 434-441)
- **Button location**: Detail pane header, top-right
- **Button**: `<Button size="sm" variant="danger">Delete</Button>`
- **Confirmation**: `ConfirmDialog` (type-to-confirm)
  - Message: `Delete group "${name}"? This cannot be undone.`
  - Confirm text: group's `name`
  - Has `loading` prop
- **Built-in guard**: Button is `disabled={isBuiltinAdmins}`
- **Toast on success**: `variant: 'warning'`, title: "Group deleted"

### 1.5 Remove Role From Group
- **File**: `ui/src/pages/Admin/GroupsTab.tsx` (lines 404-427, 442-455)
- **Button location**: Tag `onRemove` handler on role tags in group detail
- **Confirmation**: `AlertDialog` shown ONLY when the group has members (conditional)
  - Title: "Remove role from group"
  - Description: `Removing this role will affect ${members.length} member(s) who inherit it. Continue?`
  - Confirm label: "Remove"
  - Variant: `warning`
- **If group has no members**: Immediate mutation, no confirmation
- **Toast on success**: `variant: 'success'`, title: "Role removed"

### 1.6 Remove Member From Group
- **File**: `ui/src/pages/Admin/GroupsTab.tsx` (lines 366-372)
- **Button location**: Tag `onRemove` handler on member tags in group detail
- **Confirmation**: NONE -- immediate mutation on tag remove click
- **Toast on success**: `variant: 'success'`, title: "Member removed"

### 1.7 Delete Role
- **File**: `ui/src/pages/Admin/RolesTab.tsx` (lines 93-110, 261-265, 223-231)
- **Button location**: Detail pane header, top-right
- **Button**: `<Button size="sm" variant="danger">Delete</Button>`
- **Confirmation**: `ConfirmDialog` (type-to-confirm)
  - Message: `Delete role "${name}"? This cannot be undone.`
  - Confirm text: role's `name`
  - Has `loading` prop
- **System role guard**: Button hidden for system roles (`!role.system`)
- **Toast on success**: `variant: 'warning'`, title: "Role deleted"

### 1.8 Delete Environment
- **File**: `ui/src/pages/Admin/EnvironmentsPage.tsx` (lines 101-112, 245-252, 319-327)
- **Button location**: Detail pane header, top-right
- **Button**: `<Button size="sm" variant="danger">Delete</Button>`
- **Confirmation**: `ConfirmDialog` (type-to-confirm)
  - Message: `Delete environment "${displayName}"? All apps and deployments in this environment will be removed. This cannot be undone.`
  - Confirm text: environment's `slug` (NOT the display name)
  - Has `loading` prop
- **Default guard**: Button is `disabled={isDefault}` (cannot delete default environment)
- **Toast on success**: `variant: 'warning'`, title: "Environment deleted"

**NOTE**: The confirm text requires the slug but the message shows the display name. This is intentional (slug is the unique identifier) but differs from Users/Groups/Roles which use the display name.

### 1.9 Delete OIDC Configuration
- **File**: `ui/src/pages/Admin/OidcConfigPage.tsx` (lines 113-124, 253-264)
- **Button location**: Bottom of page in a "Danger Zone" section
- **Button**: `<Button size="sm" variant="danger">Delete OIDC Configuration</Button>`
- **Confirmation**: `ConfirmDialog` (type-to-confirm)
  - Message: `Delete OIDC configuration? All users signed in via OIDC will lose access.`
  - Confirm text: `"delete oidc"` (static string)
  - NO `loading` prop
- **Toast on success**: `variant: 'warning'`, title: "Configuration deleted"

**INCONSISTENCY**: No `loading` prop on this ConfirmDialog, unlike all other delete confirmations.

### 1.10 Delete App
- **File**: `ui/src/pages/AppsTab/AppsTab.tsx` (lines 533-539, 565, 589-596)
- **Button location**: App detail header, top-right, in `detailActions` div alongside "Upload JAR"
- **Button**: `<Button size="sm" variant="danger">Delete App</Button>`
- **Confirmation**: `ConfirmDialog` (type-to-confirm)
  - Message: `Delete app "${displayName}"? All versions and deployments will be removed. This cannot be undone.`
  - Confirm text: app's `slug`
  - Has `loading` prop
- **Toast on success**: `variant: 'warning'`, title: "App deleted"
- **Post-delete**: Navigates to `/apps`

### 1.11 Stop Deployment
- **File**: `ui/src/pages/AppsTab/AppsTab.tsx` (lines 526-531, 672)
- **Button location**: Inline in deployments table, right-aligned actions column
- **Button**: `<Button size="sm" variant="danger">Stop</Button>`
- **Confirmation**: NONE -- immediate mutation on click
- **Toast on success**: `variant: 'warning'`, title: "Deployment stopped"

**INCONSISTENCY**: Stopping a deployment is a destructive operation that affects live services but has NO confirmation dialog. Route stop/suspend in RouteControlBar uses a ConfirmDialog, but deployment stop does not.

### 1.12 Stop/Suspend Route
- **File**: `ui/src/pages/Exchanges/RouteControlBar.tsx` (lines 43-154)
- **Button location**: Route control bar (segmented button group)
- **Button**: Custom segmented `<button>` elements (not design system Button)
- **Confirmation**: `ConfirmDialog` (type-to-confirm) -- only for `stop` and `suspend` actions
  - Title: `"Stop route?"` or `"Suspend route?"`
  - Message: `This will ${action} route "${routeId}" on ${application}. This affects all live agents.`
  - Confirm text: the action name (e.g., `"stop"` or `"suspend"`)
  - Confirm label: `"Stop Route"` or `"Suspend Route"`
  - Variant: `danger` for stop, `warning` for suspend
  - Has `loading` prop
- **Start and Resume**: No confirmation (immediate action)
- **Toast patterns match others**

### 1.13 Delete Tap (Route Detail page)
- **File**: `ui/src/pages/Routes/RouteDetail.tsx` (lines 991-1001)
- **Button location**: Inline delete icon button in taps table row
- **Confirmation**: `ConfirmDialog` (type-to-confirm)
  - Title: "Delete Tap"
  - Message: `This will remove the tap "${attributeName}" from the configuration.`
  - Confirm text: tap's `attributeName`
  - Confirm label: "Delete"
  - Variant: `danger`
- **No `loading` prop on this dialog**

**INCONSISTENCY**: No `loading` prop, unlike entity delete confirmations.

### 1.14 Delete Tap (TapConfigModal)
- **File**: `ui/src/components/TapConfigModal.tsx` (lines 117-122, 249-253)
- **Button location**: Inside the modal footer, left-aligned (only shown when editing)
- **Button**: `<Button variant="danger">Delete</Button>`
- **Confirmation**: NONE -- immediate call to `onDelete` then `onClose`
- **Toast**: Handled by parent component (ExchangesPage)

**INCONSISTENCY**: Deleting a tap from the TapConfigModal has no confirmation, but deleting from the RouteDetail table shows a ConfirmDialog.

### 1.15 Kill Database Query
- **File**: `ui/src/pages/Admin/DatabaseAdminPage.tsx` (line 30)
- **Button location**: Inline in active queries table
- **Button**: `<Button variant="danger" size="sm">Kill</Button>`
- **Confirmation**: NONE -- immediate mutation
- **Toast**: None visible

**INCONSISTENCY**: Killing a database query is a destructive action with no confirmation and no toast feedback.

---

## 2. Button Placement & Order

### 2.1 Create Forms (Users, Groups, Roles, Environments)

All four entity create forms use an identical pattern:

| Page | File | Line | Left Button | Right Button |
|------|------|------|-------------|--------------|
| Users | `UsersTab.tsx` | 254-274 | Cancel (ghost) | Create (primary) |
| Groups | `GroupsTab.tsx` | 251-268 | Cancel (ghost) | Create (primary) |
| Roles | `RolesTab.tsx` | 142-159 | Cancel (ghost) | Create (primary) |
| Environments | `EnvironmentsPage.tsx` | 181-194 | Cancel (ghost) | Create (primary) |

- **Position**: Bottom of inline create form in the list pane
- **Container class**: `styles.createFormActions`
- **Order**: Cancel (left) | Create (right) -- **CONSISTENT**
- **Variants**: Cancel = `ghost`, Create = `primary` -- **CONSISTENT**
- **Size**: Both `sm` -- **CONSISTENT**

### 2.2 App Creation Page

- **File**: `ui/src/pages/AppsTab/AppsTab.tsx` (lines 282-287)
- **Position**: Top of page in `detailActions` header area
- **Order**: Cancel (ghost, left) | Create & Deploy / Create (primary, right)
- **Size**: Both `sm`
- **CONSISTENT** with the pattern (Cancel left, Submit right)

### 2.3 OIDC Config Page (Toolbar)

- **File**: `ui/src/pages/Admin/OidcConfigPage.tsx` (lines 130-137)
- **Position**: Top toolbar
- **Order**: Test Connection (secondary, left) | Save (primary, right)
- **No Cancel button** -- form is always editable

**NOTE**: This is the only admin page without a Cancel button or Edit mode toggle.

### 2.4 App Detail Header

- **File**: `ui/src/pages/AppsTab/AppsTab.tsx` (lines 560-566)
- **Position**: Top-right header area in `detailActions`
- **Order**: Upload JAR (primary) | Delete App (danger)

**NOTE**: The primary action (Upload) is on the LEFT and the destructive action (Delete) is on the RIGHT.

### 2.5 App Config Detail Page (AppConfigDetailPage)

- **File**: `ui/src/pages/Admin/AppConfigDetailPage.tsx` (lines 308-319)
- **Position**: Top toolbar
- **Read mode**: Back (ghost) ... Edit (secondary)
- **Edit mode**: Back (ghost) ... Save (default/no variant specified!) | Cancel (secondary)
- **Order when editing**: Save (left) | Cancel (right)

**INCONSISTENCY #1**: Save button has NO `variant` prop set -- it renders as default, not `primary`. Every other Save button uses `variant="primary"`.

**INCONSISTENCY #2**: Button order is REVERSED from every other form. Here it is Save (left) | Cancel (right). Everywhere else it is Cancel (left) | Save (right).

### 2.6 App Config Sub-Tab (AppsTab ConfigSubTab)

- **File**: `ui/src/pages/AppsTab/AppsTab.tsx` (lines 922-936)
- **Position**: Top banner bar (editBanner)
- **Read mode**: Banner text + Edit (secondary)
- **Edit mode**: Banner text + Cancel (ghost) | Save Configuration (primary)
- **Order when editing**: Cancel (left) | Save (right) -- **CONSISTENT**

### 2.7 Environment Default Resources / JAR Retention Sections

- **File**: `ui/src/pages/Admin/EnvironmentsPage.tsx` (lines 437-446, 505-514)
- **Position**: Bottom of section, right-aligned (`justifyContent: 'flex-end'`)
- **Read mode**: Edit Defaults / Edit Policy (secondary)
- **Edit mode**: Cancel (ghost) | Save (primary) -- **CONSISTENT**
- **Size**: Both `sm`

### 2.8 User Password Reset

- **File**: `ui/src/pages/Admin/UsersTab.tsx` (lines 407-431)
- **Position**: Inline in Security section
- **Order**: Cancel (ghost) | Set (primary)
- **CONSISTENT** pattern (Cancel left, Submit right)

### 2.9 Tap Modal (TapConfigModal)

- **File**: `ui/src/components/TapConfigModal.tsx` (lines 249-257)
- **Position**: Modal footer
- **Order (edit mode)**: Delete (danger, left, in `footerLeft`) | Cancel (secondary) | Save (primary)
- **Order (create mode)**: Cancel (secondary) | Save (primary)
- **No `size` prop specified** -- renders at default size

**NOTE**: Uses `variant="secondary"` for Cancel, not `variant="ghost"` like create forms.

### 2.10 Tap Modal (RouteDetail inline version)

- **File**: `ui/src/pages/Routes/RouteDetail.tsx` (lines 984-986)
- **Position**: Modal footer (`tapModalFooter`)
- **Order**: Cancel (secondary) | Save (primary)
- **No `size` prop specified**
- **CONSISTENT** with TapConfigModal

### 2.11 About Me Dialog

- **File**: `ui/src/components/AboutMeDialog.tsx` (lines 14, 72)
- **Uses `Modal` with built-in close button** (no explicit action buttons)
- **Close via**: Modal `onClose` handler (X button and backdrop click)

### 2.12 Login Page

- **File**: `ui/src/auth/LoginPage.tsx` (lines 176-184)
- **Single button**: Sign in (primary, full width, submit type)
- **Optional SSO button above**: Sign in with SSO (secondary)

### Summary of Button Order Patterns

| Location | Cancel Side | Submit Side | Consistent? |
|----------|------------|-------------|-------------|
| User create form | Left (ghost) | Right (primary) | YES |
| Group create form | Left (ghost) | Right (primary) | YES |
| Role create form | Left (ghost) | Right (primary) | YES |
| Env create form | Left (ghost) | Right (primary) | YES |
| App create page | Left (ghost) | Right (primary) | YES |
| Env Default Resources edit | Left (ghost) | Right (primary) | YES |
| Env JAR Retention edit | Left (ghost) | Right (primary) | YES |
| AppsTab config sub-tab edit | Left (ghost) | Right (primary) | YES |
| User password reset | Left (ghost) | Right (primary) | YES |
| TapConfigModal | Left (secondary) | Right (primary) | Variant mismatch |
| RouteDetail tap modal | Left (secondary) | Right (primary) | Variant mismatch |
| **AppConfigDetailPage** | **Left (NO variant)** | **Right (secondary)** | **REVERSED** |

---

## 3. Edit / Save Patterns

### 3.1 Users (UsersTab)
- **Edit mode**: No explicit toggle. Display name uses `InlineEdit` (click-to-edit). Everything else is managed via tag add/remove.
- **No Save/Cancel for the detail view** -- all changes are immediate mutations.
- **Unsaved changes indicator**: N/A (no batched editing)
- **On success**: Toast with `variant: 'success'`
- **On error**: Toast with `variant: 'error'`, `duration: 86_400_000` (effectively permanent)

### 3.2 Groups (GroupsTab)
- **Edit mode**: Name uses `InlineEdit`. All other changes (members, roles) are immediate mutations.
- **Pattern**: Same as Users -- no batched edit mode.

### 3.3 Roles (RolesTab)
- **Edit mode**: Read-only detail panel. No editing of role fields.
- **Only action**: Delete

### 3.4 Environments (EnvironmentsPage)
- **Edit mode (name)**: `InlineEdit`
- **Edit mode (production/enabled toggles)**: Immediate mutations per toggle change
- **Edit mode (Default Resources)**: Explicit Edit toggle (`setEditing(true)`)
  - Cancel/Save buttons appear at bottom-right
  - Resets form on cancel
  - No unsaved changes indicator
  - On success: Toast `variant: 'success'`
- **Edit mode (JAR Retention)**: Same pattern as Default Resources
- **On environment switch**: Both sub-sections auto-reset to read mode

### 3.5 OIDC Config (OidcConfigPage)
- **Edit mode**: ALWAYS editable (no toggle)
- **Save button**: Always visible in top toolbar
- **No Cancel button** -- cannot discard changes
- **No unsaved changes indicator**
- **On success**: Toast `variant: 'success'`
- **On error**: Toast `variant: 'error'` + inline `<Alert variant="error">` both shown

**INCONSISTENCY**: Only page that is always editable with no way to discard changes. Also the only page that shows BOTH a toast AND an inline alert on error.

### 3.6 App Config Detail (AppConfigDetailPage)
- **Edit mode**: Explicit toggle via `Edit` button (Pencil icon) in toolbar
- **Toolbar in edit mode**: Save (unstyled!) | Cancel (secondary)
- **Save button text**: Shows "Saving..." while pending
- **No unsaved changes indicator**
- **On success**: Toast `variant: 'success'`, exits edit mode
- **On error**: Toast `variant: 'error'`, stays in edit mode

### 3.7 App Config Sub-Tab (AppsTab ConfigSubTab)
- **Edit mode**: Explicit toggle via banner + Edit button
- **Banner in read mode**: "Configuration is read-only. Enter edit mode to make changes."
- **Banner in edit mode**: "Editing configuration. Changes are not saved until you click Save." (styled differently with `editBannerActive`)
- **This IS an unsaved changes indicator** (the banner text changes)
- **Cancel/Save in edit banner**: Cancel (ghost) | Save Configuration (primary)
- **On success**: Toast `variant: 'success'`, exits edit mode, shows redeploy notice
- **On error**: Toast `variant: 'error'`, stays in edit mode

### 3.8 App Create Page
- **Edit mode**: N/A (always a creation form)
- **Multi-step indicator**: Shows step text like "Creating app...", "Uploading JAR..." during submission
- **On success**: Toast `variant: 'success'`, navigates to app detail page
- **On error**: Toast `variant: 'error'` with step context

### 3.9 Tap Editing (TapConfigModal + RouteDetail inline)
- **Edit mode**: Modal opens for edit or create
- **Save/Cancel**: In modal footer
- **On success**: Modal closes, parent handles toast
- **On error**: Parent handles toast

### Summary of Edit Patterns

| Page | Explicit Edit Toggle? | Unsaved Changes Indicator? | Consistent? |
|------|----------------------|---------------------------|-------------|
| Users | No (inline edits) | N/A | N/A |
| Groups | No (inline edits) | N/A | N/A |
| Roles | No (read-only) | N/A | N/A |
| Environments - name | No (InlineEdit) | N/A | OK |
| Environments - resources | YES | No | Missing |
| Environments - JAR retention | YES | No | Missing |
| OIDC Config | No (always editable) | No | Deviation |
| AppConfigDetailPage | YES | No | Missing |
| AppsTab ConfigSubTab | YES (banner) | YES (banner text) | Best pattern |

**INCONSISTENCY**: The AppsTab ConfigSubTab is the only one with a proper unsaved-changes indicator. AppConfigDetailPage (which edits the same data for a different entry point) has no such indicator.

---

## 4. Toast / Notification Patterns

### 4.1 Toast Provider
- **File**: `ui/src/components/LayoutShell.tsx` (line 783)
- **Provider**: `<ToastProvider>` from `@cameleer/design-system` wraps the entire app layout
- **Hook**: `useToast()` returns `{ toast }` function

### 4.2 Toast Call Signature
All toast calls use the same shape:
```typescript
toast({
  title: string,
  description?: string,
  variant: 'success' | 'error' | 'warning',
  duration?: number
})
```

### 4.3 Toast Variants Used

| Variant | Used For | Duration |
|---------|----------|----------|
| `success` | Successful operations | Default (auto-dismiss) |
| `error` | Failed operations | `86_400_000` (24 hours = effectively permanent) |
| `warning` | Destructive successes (delete, stop) AND partial failures | Mixed (see below) |

### 4.4 Duration Patterns

- **Success toasts**: No explicit duration (uses design system default) -- **CONSISTENT**
- **Error toasts**: Always `duration: 86_400_000` -- **CONSISTENT** (49 occurrences across 10 files)
- **Warning toasts for deletion success** (user/group/role/env/OIDC/app deleted): No explicit duration (auto-dismiss) -- **CONSISTENT**
- **Warning toasts for partial push failures**: `duration: 86_400_000` -- **CONSISTENT**

### 4.5 Naming Conventions for Toast Titles

**Success pattern**: Action-noun format
- "User created", "Group created", "Role created", "Environment created"
- "Display name updated", "Password updated", "Group renamed"
- "Config saved", "Configuration saved", "Tap configuration saved"

**Error pattern**: "Failed to [action]" format
- "Failed to create user", "Failed to delete group", "Failed to update password"
- "Save failed", "Upload failed", "Deploy failed" (shorter form)

**INCONSISTENCY**: Error messages mix two patterns:
1. "Failed to [verb] [noun]" (e.g., "Failed to create user") -- used in RBAC pages
2. "[Noun] failed" (e.g., "Save failed", "Upload failed") -- used in AppsTab, AppConfigDetailPage

### 4.6 Warning Variant for Deletions

Successful deletions use `variant: 'warning'` consistently:
- "User deleted" (UsersTab:162)
- "Group deleted" (GroupsTab:147)
- "Role deleted" (RolesTab:100)
- "Environment deleted" (EnvironmentsPage:105)
- "Configuration deleted" (OidcConfigPage:119)
- "App deleted" (AppsTab:536)
- "Deployment stopped" (AppsTab:529)

**CONSISTENT** -- all destructive-but-successful operations use warning.

---

## 5. Loading / Empty States

### 5.1 Full-Page Loading States

| Page | Component | Size | Wrapper |
|------|-----------|------|---------|
| UsersTab | `<Spinner size="md" />` | md | Bare return |
| GroupsTab | `<Spinner size="md" />` | md | Bare return |
| RolesTab | `<Spinner size="md" />` | md | Bare return |
| EnvironmentsPage | `<Spinner size="md" />` | md | Bare return |
| AppListView | `<Spinner size="md" />` | md | Bare return |
| AppDetailView | `<Spinner size="md" />` | md | Bare return |
| AgentInstance | `<Spinner size="lg" />` | **lg** | Bare return |
| AppConfigDetailPage | `<Spinner size="lg" />` | **lg** | Wrapped in `div.loading` |
| DashboardPage | `<PageLoader />` | lg | Centered container |
| RuntimePage | `<PageLoader />` | lg | Centered container |
| OidcConfigPage | `return null` | N/A | Returns nothing |

**INCONSISTENCY #1**: Most admin pages use `<Spinner size="md" />` as a bare return. AgentInstance and AppConfigDetailPage use `size="lg"`. DashboardPage and RuntimePage use the `<PageLoader />` component which wraps `<Spinner size="lg" />` in a centered container.

**INCONSISTENCY #2**: OidcConfigPage returns `null` while loading (shows a blank page), unlike every other page.

**INCONSISTENCY #3**: SplitPane detail loading (GroupsTab line 317, RolesTab line 212) uses `<Spinner size="md" />` -- consistent within that context.

### 5.2 Section Loading States

- **RouteDetail charts**: `<Spinner size="sm" />` inline in chart containers (lines 713, 804)
- **AboutMeDialog**: `<Spinner size="md" />` in a `div.loading` wrapper

### 5.3 Empty States

| Context | Pattern | Component Used |
|---------|---------|----------------|
| SplitPane list (no search match) | `emptyMessage="No X match your search"` | EntityList built-in |
| SplitPane detail (nothing selected) | `emptyMessage="Select a X to view details"` | SplitPane built-in |
| Deployments table (none) | `<p className={styles.emptyNote}>No deployments yet.</p>` | Plain `<p>` |
| Versions list (none) | `<p className={styles.emptyNote}>No versions uploaded yet.</p>` | Plain `<p>` |
| Env vars (none, not editing) | `<p className={styles.emptyNote}>No environment variables configured.</p>` | Plain `<p>` |
| Traces/Taps (none) | `<p className={styles.emptyNote}>No processor traces or taps configured.</p>` | Plain `<p>` |
| Route recording (none) | `<p className={styles.emptyNote}>No routes found for this application.</p>` | Plain `<p>` |
| AgentInstance metrics | `<EmptyState title="No data" description="No X available" />` | EmptyState (DS component) |
| Log/Event panels | `<div className={logStyles.logEmpty}>No events...</div>` | Styled `<div>` |
| OIDC default roles | `<span className={styles.noRoles}>No default roles configured</span>` | `<span>` |
| Group members (none) | `<span className={styles.inheritedNote}>(no members)</span>` | `<span>` |
| AppConfigDetailPage (not found) | `<div>No configuration found for "{appId}".</div>` | Plain `<div>` |
| RouteDetail error patterns | `<div className={styles.emptyText}>No error patterns found...</div>` | Styled `<div>` |
| RouteDetail taps (none) | `<div className={styles.emptyState}>No taps configured...</div>` | Styled `<div>` |

**INCONSISTENCY**: Empty states use at least 5 different approaches:
1. Design system `EmptyState` component (only in AgentInstance)
2. `<p className={styles.emptyNote}>` (AppsTab)
3. `<span className={styles.inheritedNote}>` with parenthetical format "(none)" (RBAC pages)
4. `<div className={styles.emptyText}>` (RouteDetail)
5. Unstyled inline text (AppConfigDetailPage)

The design system provides an `EmptyState` component but it is only used in one place (AgentInstance).

---

## 6. Inconsistency Summary

### HIGH Priority (User-facing confusion)

1. **AppConfigDetailPage button order is reversed** (Save|Cancel instead of Cancel|Save) and Save button has no `variant="primary"`. File: `ui/src/pages/Admin/AppConfigDetailPage.tsx`, lines 311-315.

2. **Deployment Stop has no confirmation dialog**. Stopping a running deployment immediately executes with no confirmation, while stopping/suspending a route shows a ConfirmDialog. File: `ui/src/pages/AppsTab/AppsTab.tsx`, line 672.

3. **Tap deletion is inconsistent**. Deleting from TapConfigModal: no confirmation. Deleting from RouteDetail table: ConfirmDialog. File: `ui/src/components/TapConfigModal.tsx` line 117 vs `ui/src/pages/Routes/RouteDetail.tsx` line 992.

4. **Kill Query has no confirmation and no feedback**. File: `ui/src/pages/Admin/DatabaseAdminPage.tsx`, line 30.

### MEDIUM Priority (Pattern deviations)

5. **Cancel button variant inconsistency**. Create forms use `variant="ghost"` for Cancel. Modal dialogs (TapConfigModal, RouteDetail tap modal) use `variant="secondary"`. File: `ui/src/components/TapConfigModal.tsx` line 255, vs `ui/src/pages/Admin/UsersTab.tsx` line 258.

6. **Removing a role from a user has no confirmation** but removing a group from a user shows an AlertDialog. Both can cascade. File: `ui/src/pages/Admin/UsersTab.tsx`, lines 504-528 vs 588-613.

7. **OIDC Config is always editable with no Cancel/discard**. Every other editable form either has inline-edit (immediate save) or explicit edit mode with Cancel. File: `ui/src/pages/Admin/OidcConfigPage.tsx`.

8. **OIDC Config delete ConfirmDialog missing `loading` prop**. All other delete ConfirmDialogs pass `loading={mutation.isPending}`. File: `ui/src/pages/Admin/OidcConfigPage.tsx`, line 258.

9. **Loading state size inconsistency**. Most pages use `Spinner size="md"`, some use `size="lg"`, some use `PageLoader`, and OidcConfigPage returns `null`. No single standard.

10. **Error toast title format inconsistency**. RBAC pages use "Failed to [verb] [noun]" while AppsTab/AppConfigDetailPage use "[Noun] failed". Should pick one.

### LOW Priority (Minor deviations)

11. **Empty state presentation varies widely**. Five different approaches used. Should standardize on the design system `EmptyState` component or at least a consistent CSS class.

12. **ConfirmDialog confirmText varies between display name and slug**. Users/Groups/Roles use display name; Environments and Apps use slug. This is arguably intentional (slug is the technical identifier) but may confuse users.

13. **OIDC Config shows both toast and inline Alert on error**. No other page shows both simultaneously. File: `ui/src/pages/Admin/OidcConfigPage.tsx`, line 92 (toast) + line 139 (inline Alert).

14. **AppConfigDetailPage Save button text changes to "Saving..."** using string interpolation, while every other page uses the `loading` prop on Button (which shows a spinner). File: `ui/src/pages/Admin/AppConfigDetailPage.tsx`, line 313.

15. **Unsaved changes indicator** only present on AppsTab ConfigSubTab (banner text). AppConfigDetailPage, Environment resource sections, and JAR retention section have no indicator even though they use explicit edit mode.

---

## 7. ConfirmDialog Usage Matrix

| Object | File | Line | confirmText Source | Has `loading`? | Has `variant`? | Has `confirmLabel`? |
|--------|------|------|-------------------|----------------|----------------|---------------------|
| User | UsersTab.tsx | 580 | displayName | YES | No (default) | No (default) |
| Group | GroupsTab.tsx | 434 | name | YES | No (default) | No (default) |
| Role | RolesTab.tsx | 223 | name | YES | No (default) | No (default) |
| Environment | EnvironmentsPage.tsx | 319 | slug | YES | No (default) | No (default) |
| OIDC Config | OidcConfigPage.tsx | 258 | "delete oidc" | **NO** | No (default) | No (default) |
| App | AppsTab.tsx | 589 | slug | YES | No (default) | No (default) |
| Tap (RouteDetail) | RouteDetail.tsx | 992 | attributeName | **NO** | `danger` | `"Delete"` |
| Route Stop | RouteControlBar.tsx | 139 | action name | YES | `danger`/`warning` | `"Stop Route"` / `"Suspend Route"` |

**NOTE**: RouteControlBar and RouteDetail set explicit `variant` and `confirmLabel` on ConfirmDialog while all RBAC/admin pages use defaults. This creates visual differences in the confirmation dialogs.

---

## 8. AlertDialog Usage Matrix

| Context | File | Line | Title | Confirm Label | Variant |
|---------|------|------|-------|---------------|---------|
| Remove group from user | UsersTab.tsx | 588 | "Remove group membership" | "Remove" | `warning` |
| Remove role from group | GroupsTab.tsx | 442 | "Remove role from group" | "Remove" | `warning` |

AlertDialog is used consistently where present (both use `warning` variant and "Remove" label).

---

## 9. Files Examined

All `.tsx` files under `ui/src/pages/` and `ui/src/components/`:

- `ui/src/pages/Admin/UsersTab.tsx`
- `ui/src/pages/Admin/GroupsTab.tsx`
- `ui/src/pages/Admin/RolesTab.tsx`
- `ui/src/pages/Admin/EnvironmentsPage.tsx`
- `ui/src/pages/Admin/OidcConfigPage.tsx`
- `ui/src/pages/Admin/AppConfigDetailPage.tsx`
- `ui/src/pages/Admin/DatabaseAdminPage.tsx`
- `ui/src/pages/Admin/ClickHouseAdminPage.tsx`
- `ui/src/pages/Admin/AuditLogPage.tsx`
- `ui/src/pages/AppsTab/AppsTab.tsx`
- `ui/src/pages/Routes/RouteDetail.tsx`
- `ui/src/pages/Exchanges/ExchangesPage.tsx`
- `ui/src/pages/Exchanges/RouteControlBar.tsx`
- `ui/src/pages/AgentHealth/AgentHealth.tsx`
- `ui/src/pages/AgentInstance/AgentInstance.tsx`
- `ui/src/pages/DashboardTab/DashboardPage.tsx`
- `ui/src/pages/RuntimeTab/RuntimePage.tsx`
- `ui/src/components/TapConfigModal.tsx`
- `ui/src/components/AboutMeDialog.tsx`
- `ui/src/components/PageLoader.tsx`
- `ui/src/components/LayoutShell.tsx`
- `ui/src/auth/LoginPage.tsx`