Add UX polish design spec with comprehensive audit findings
Playwright-driven audit of the live UI (build 69dcce2, 60+ screenshots)
covering all pages, CRUD lifecycles, design consistency, and interaction
patterns. Spec defines 8 batches of work: critical bugs, layout
consistency, interaction consistency, contrast/readability, data
formatting, chart fixes, admin polish, and nice-to-have items.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
303
audit/admin-lifecycle-findings.md
Normal file
303
audit/admin-lifecycle-findings.md
Normal file
@@ -0,0 +1,303 @@
|
|||||||
|
# Cameleer3 Admin UI UX Audit
|
||||||
|
|
||||||
|
**Date:** 2026-04-09
|
||||||
|
**Auditor:** Claude (automated)
|
||||||
|
**URL:** https://desktop-fb5vgj9.siegeln.internal/
|
||||||
|
**Login:** admin/admin (OIDC-authenticated)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Executive Summary
|
||||||
|
|
||||||
|
The Cameleer3 UI is generally well-built with consistent styling, good information density, and a clear layout. However, there are several **Critical** bugs that prevent core CRUD operations from working, and a few **Important** UX issues that reduce clarity and usability.
|
||||||
|
|
||||||
|
**Critical issues:** 3
|
||||||
|
**Important issues:** 7
|
||||||
|
**Nice-to-have improvements:** 8
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. Users & Roles (`/server/admin/rbac`)
|
||||||
|
|
||||||
|
### What Works Well
|
||||||
|
- Clean master-detail layout: user list on the left, detail panel on the right
|
||||||
|
- Summary cards at top (Users: 2, Groups: 1, Roles: 4) provide quick overview
|
||||||
|
- Tab structure (Users / Groups / Roles) is intuitive
|
||||||
|
- User detail shows all relevant info: status, ID, created date, provider, password, group membership, effective roles
|
||||||
|
- Inline role/group management with "+ Add" dropdown and "x" remove buttons
|
||||||
|
- Search bar for filtering users/groups/roles
|
||||||
|
- Delete button correctly disabled for the admin user (last-admin guard)
|
||||||
|
- Group detail shows Top-level, children count, member count, and assigned roles
|
||||||
|
- Local/OIDC toggle on the user creation form
|
||||||
|
|
||||||
|
### Issues Found
|
||||||
|
|
||||||
|
#### CRITICAL: User creation fails silently in OIDC mode
|
||||||
|
- **Location:** "+ Add user" button and create user form
|
||||||
|
- **Details:** When OIDC is enabled, the backend returns HTTP 400 with an **empty response body** when attempting to create a local user. The UI shows a generic "Failed to create user" toast with no explanation.
|
||||||
|
- **Root Cause:** `UserAdminController.createUser()` line 92-93 returns `ResponseEntity.badRequest().build()` (no body) when `oidcEnabled` is true.
|
||||||
|
- **Impact:** The UI still shows the "+ Add user" button and the full creation form even though the operation will always fail. Users fill out the form, click Create, and get a useless error.
|
||||||
|
- **Fix:** Either (a) hide the "+ Add user" button when OIDC is enabled, or (b) show a clear inline message like "Local user creation is disabled when OIDC is enabled", or (c) return a proper error body from the API.
|
||||||
|
- **Screenshots:** `09-user-create-filled.png`, `10-user-create-result.png`
|
||||||
|
|
||||||
|
#### IMPORTANT: Unicode escape shown literally in role descriptions
|
||||||
|
- **Location:** Roles tab, role description text
|
||||||
|
- **Details:** Role descriptions display `\u00b7` literally instead of rendering the middle dot character (middle dot).
|
||||||
|
- **Example:** "Full administrative access \u00b7 0 assignments" should be "Full administrative access - 0 assignments"
|
||||||
|
- **Screenshot:** `14-roles-tab.png`
|
||||||
|
|
||||||
|
#### IMPORTANT: No "Confirm password" field in user creation
|
||||||
|
- **Location:** "+ Add user" form
|
||||||
|
- **Details:** The form has Username*, Display name, Email, Password* but no password confirmation field. This increases the risk of typos in passwords.
|
||||||
|
|
||||||
|
#### NICE-TO-HAVE: Create button disabled until valid with no inline validation messages
|
||||||
|
- **Location:** User creation form
|
||||||
|
- **Details:** The "Create" button is disabled until form is valid, but there are no visible inline error messages explaining what is required. The asterisks on "Username *" and "Password *" help, but there's no indication of password policy requirements (min 12 chars, 3-of-4 character classes).
|
||||||
|
|
||||||
|
#### NICE-TO-HAVE: "Select a user to view details" placeholder
|
||||||
|
- **Location:** Right panel when no user selected
|
||||||
|
- **Details:** The placeholder text is fine but could be more visually styled (e.g., centered, with an icon).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Audit Log (`/server/admin/audit`)
|
||||||
|
|
||||||
|
### What Works Well
|
||||||
|
- Comprehensive filter system: date range (1h/6h/Today/24h/7d/Custom), user filter, category dropdown, action/target search
|
||||||
|
- Category dropdown includes all relevant categories: INFRA, AUTH, USER_MGMT, CONFIG, RBAC, AGENT
|
||||||
|
- Custom date range with From/To date pickers
|
||||||
|
- Table columns: Timestamp, User, Category, Action, Target, Result
|
||||||
|
- Color-coded result badges (SUCCESS in green, FAILURE in red)
|
||||||
|
- Shows my failed user creation attempts correctly logged as FAILURE
|
||||||
|
- Row count indicator ("179 events") with AUTO/MANUAL refresh
|
||||||
|
- Pagination with configurable rows per page
|
||||||
|
|
||||||
|
### Issues Found
|
||||||
|
|
||||||
|
#### IMPORTANT: No export functionality
|
||||||
|
- **Location:** Audit log page
|
||||||
|
- **Details:** There is no Export/Download button for audit log data. Compliance requirements typically mandate the ability to export audit logs as CSV or JSON.
|
||||||
|
|
||||||
|
#### NICE-TO-HAVE: Audit detail row expansion
|
||||||
|
- **Location:** Table rows are clickable (cursor: pointer) but clicking doesn't reveal additional details
|
||||||
|
- **Details:** For entries like "HTTP POST /api/v1/admin/users FAILURE", it would be helpful to see the error response body or request details in an expanded row.
|
||||||
|
|
||||||
|
#### NICE-TO-HAVE: Date range filter is independent of the global time selector
|
||||||
|
- **Location:** Top bar time selector vs. audit log's own time filter
|
||||||
|
- **Details:** The audit log has its own "Last 1h / 6h / Today / 24h / 7d / Custom" filter, which is separate from the global time range in the header bar. While this provides independence, it could confuse users who expect the global time selector to affect the audit log.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. OIDC Config (`/server/admin/oidc`)
|
||||||
|
|
||||||
|
### What Works Well
|
||||||
|
- Well-organized sections: Behavior, Provider Settings, Claim Mapping, Default Roles, Danger Zone
|
||||||
|
- Each field has a descriptive label and help text (e.g., "RFC 8707 resource indicator sent in the authorization request")
|
||||||
|
- "Test Connection" button at the top for verification
|
||||||
|
- "Save" button is clearly visible
|
||||||
|
- **Excellent** delete protection: "Confirm Deletion" dialog requires typing "delete oidc" to confirm, warns that "All users signed in via OIDC will lose access"
|
||||||
|
- Enabled/Auto Sign-Up checkboxes with clear descriptions
|
||||||
|
- Default Roles management with add/remove
|
||||||
|
|
||||||
|
### Issues Found
|
||||||
|
|
||||||
|
#### IMPORTANT: No unsaved changes indicator
|
||||||
|
- **Location:** Form fields
|
||||||
|
- **Details:** If a user modifies a field but navigates away without saving, there is no "You have unsaved changes" warning. This is particularly dangerous for the OIDC configuration since changes could lock users out.
|
||||||
|
|
||||||
|
#### NICE-TO-HAVE: Client Secret field is plain text
|
||||||
|
- **Location:** Client Secret textbox
|
||||||
|
- **Details:** The Client Secret is a regular text input, not a password/masked field. Since it's sensitive, it should be masked by default with a "show/hide" toggle.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Environments (`/server/admin/environments`)
|
||||||
|
|
||||||
|
### What Works Well
|
||||||
|
- Clean list with search and "+ Add environment" button
|
||||||
|
- Master-detail layout consistent with Users & Roles
|
||||||
|
- Environment detail shows: ID, Tier badge (NON-PROD), slug, created date
|
||||||
|
- Sub-tabs for "Production environment" and "Docker Containers"
|
||||||
|
- Default Resource Limits section with configurable values
|
||||||
|
- JAR Retention section with "Edit Policy" button
|
||||||
|
- "Edit Defaults" button for container defaults
|
||||||
|
|
||||||
|
### Issues Found
|
||||||
|
|
||||||
|
#### NICE-TO-HAVE: Slug is shown but not labeled clearly
|
||||||
|
- **Location:** Environment detail panel
|
||||||
|
- **Details:** The slug "default" appears below the display name "Default" but could benefit from a "Slug:" label for clarity.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Database (`/server/admin/database`)
|
||||||
|
|
||||||
|
### What Works Well
|
||||||
|
- Clear "Connected" status at the top with green styling
|
||||||
|
- Shows PostgreSQL version string: "PostgreSQL 16.13 on x86_64-pc-linux-musl, compiled by gcc (Alpine 15.2.0) 15.2.0, 64-bit"
|
||||||
|
- Connection Pool section with Active/Idle/Max counts
|
||||||
|
- Tables section listing all database tables with rows and sizes
|
||||||
|
- Consistent styling with the rest of the admin section
|
||||||
|
|
||||||
|
### Issues Found
|
||||||
|
|
||||||
|
No significant issues found. The page is read-only and informational, which is appropriate.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. ClickHouse (`/server/admin/clickhouse`)
|
||||||
|
|
||||||
|
### What Works Well
|
||||||
|
- Clear "Connected" status with version number (26.3.5.12)
|
||||||
|
- Uptime display: "1 hour, 44 minutes and 29 seconds"
|
||||||
|
- Key metrics: Disk Usage (156.33 MiB), Memory (1.47 GiB), Compression Ratio (0.104x), Rows (4,875,598), Parts (55), Uncompressed Size (424.02 MiB)
|
||||||
|
- Tables section listing all ClickHouse tables with engine, rows, and sizes
|
||||||
|
- Consistent card-based layout
|
||||||
|
|
||||||
|
### Issues Found
|
||||||
|
|
||||||
|
No significant issues found. Well-presented status page.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. Deployments Tab (`/server/apps`)
|
||||||
|
|
||||||
|
### What Works Well
|
||||||
|
- Table layout showing app name, environment, status, and created date
|
||||||
|
- "+ Create App" button clearly visible
|
||||||
|
- Clicking an app navigates to a detail page with Configuration and Overrides tabs
|
||||||
|
- Configuration has sub-tabs: Monitoring, Variables, Traces & Taps, Route Recording
|
||||||
|
- App detail shows environment (DEFAULT), tier (ORACLE), status
|
||||||
|
- "Create App" full page form with clear Identity & Security, Configuration sections
|
||||||
|
|
||||||
|
### Issues Found
|
||||||
|
|
||||||
|
#### CRITICAL: Direct URL /server/deployments returns 404 error
|
||||||
|
- **Location:** `/server/deployments` URL
|
||||||
|
- **Details:** Navigating directly to `/server/deployments` shows "Unexpected Application Error! 404 Not Found" with a React Router development error ("Hey developer -- You can provide a way better UX than this..."). The Deployments tab is actually at `/server/apps`.
|
||||||
|
- **Impact:** Users who bookmark or share the URL will see an unhandled error page instead of a redirect to the correct URL.
|
||||||
|
- **Screenshot:** `20-deployments-tab.png` (first attempt)
|
||||||
|
|
||||||
|
#### IMPORTANT: Create App page shows full configuration before app exists
|
||||||
|
- **Location:** `/server/apps/new`
|
||||||
|
- **Details:** The Create Application page shows Monitoring configuration, Variables, Traces & Taps, and Route Recording sub-tabs with values already populated. This is overwhelming for initial creation -- a simpler wizard-style flow (name + environment first, then configure) would be more intuitive.
|
||||||
|
|
||||||
|
#### NICE-TO-HAVE: App deletion flow not easily discoverable
|
||||||
|
- **Location:** App detail page
|
||||||
|
- **Details:** There is no visible "Delete App" button on the app detail page. The deletion mechanism is not apparent.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. SaaS Platform Pages
|
||||||
|
|
||||||
|
### Platform Dashboard (`/platform`)
|
||||||
|
|
||||||
|
#### What Works Well
|
||||||
|
- Clean tenant overview: "Example Tenant" with LOW tier badge
|
||||||
|
- Three summary cards: Tier (LOW), Status (ACTIVE), License (Active, expires 8.4.2027)
|
||||||
|
- Tenant Information section with Slug, Status, Created date
|
||||||
|
- Server Management section with "Open Server Dashboard" button
|
||||||
|
- Sidebar navigation: Dashboard, License, Open Server Dashboard
|
||||||
|
|
||||||
|
#### Issues Found
|
||||||
|
|
||||||
|
##### IMPORTANT: "Slug" label missing space
|
||||||
|
- **Location:** Tenant Information section
|
||||||
|
- **Details:** Shows "Slugdefault" instead of "Slug: default" -- the label and value run together without separation.
|
||||||
|
|
||||||
|
##### NICE-TO-HAVE: "Open Server Dashboard" button appears 3 times
|
||||||
|
- **Location:** Page header, Server Management section, sidebar bottom
|
||||||
|
- **Details:** The same action appears in three places on a single page view. One prominent button would suffice.
|
||||||
|
|
||||||
|
### Platform License (`/platform/license`)
|
||||||
|
|
||||||
|
#### What Works Well
|
||||||
|
- Clear Validity section: Issued, Expires, Days remaining (365 days badge)
|
||||||
|
- Features section with Enabled/Disabled badges for each feature
|
||||||
|
- Limits section: Max Agents, Retention Days, Max Environments
|
||||||
|
- License Token section with "Show token" button for security
|
||||||
|
|
||||||
|
#### Issues Found
|
||||||
|
|
||||||
|
##### IMPORTANT: Labels and values lack spacing
|
||||||
|
- **Location:** Validity section, Limits section
|
||||||
|
- **Details:** "Issued8. April 2026" and "Max Agents3" -- labels and values run together without separators. Should be "Issued: 8. April 2026" and "Max Agents: 3".
|
||||||
|
- **Screenshot:** `02-platform-license.png`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. Cross-Cutting UX Issues
|
||||||
|
|
||||||
|
### CRITICAL: Sporadic auto-navigation to /server/exchanges
|
||||||
|
- **Location:** Occurs across all admin pages
|
||||||
|
- **Details:** While interacting with admin pages (Users & Roles, Environments, etc.), the browser occasionally auto-navigates back to `/server/exchanges`. This appears to be triggered by the real-time exchange data stream (SSE). Even when auto-refresh is set to MANUAL, the exchange list continues updating and can cause route changes.
|
||||||
|
- **Impact:** Users actively editing admin forms can lose their work mid-interaction. This was observed repeatedly during the audit.
|
||||||
|
- **Root Cause:** Likely a React state update from the SSE exchange stream that triggers a route navigation when the exchange list data changes.
|
||||||
|
|
||||||
|
### IMPORTANT: Error toast messages lack detail
|
||||||
|
- **Location:** Global toast system
|
||||||
|
- **Details:** Error toasts show generic messages like "Failed to create user" without the specific API error reason. The server returns empty 400 bodies in some cases, and even when it returns error details, they may not be surfaced in the toast.
|
||||||
|
|
||||||
|
### NICE-TO-HAVE: Global time range selector persists on admin pages
|
||||||
|
- **Location:** Top header bar on admin pages (Audit Log, ClickHouse, Database, OIDC, etc.)
|
||||||
|
- **Details:** The global time range selector (1h/3h/6h/Today/24h/7d) and the status filter buttons (OK/Warn/Error/Running) appear on every page including admin pages where they are not relevant. This adds visual clutter.
|
||||||
|
|
||||||
|
### NICE-TO-HAVE: Environment dropdown in header on admin pages
|
||||||
|
- **Location:** Top header bar, "All Envs" dropdown
|
||||||
|
- **Details:** The environment selector appears on admin pages where it has no effect (e.g., Users & Roles, OIDC config). It should be hidden or grayed out on pages where it's not applicable.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Summary Table
|
||||||
|
|
||||||
|
| # | Severity | Page | Issue |
|
||||||
|
|---|----------|------|-------|
|
||||||
|
| 1 | **CRITICAL** | Users & Roles | User creation fails silently in OIDC mode -- form shown but always returns 400 with empty body |
|
||||||
|
| 2 | **CRITICAL** | Deployments | Direct URL `/server/deployments` returns unhandled 404 error page |
|
||||||
|
| 3 | **CRITICAL** | Cross-cutting | Sporadic auto-navigation to `/server/exchanges` interrupts admin page interactions |
|
||||||
|
| 4 | **IMPORTANT** | Users & Roles | Unicode escape `\u00b7` shown literally in role descriptions |
|
||||||
|
| 5 | **IMPORTANT** | Users & Roles | No password confirmation field in user creation form |
|
||||||
|
| 6 | **IMPORTANT** | Audit Log | No export/download functionality for compliance |
|
||||||
|
| 7 | **IMPORTANT** | OIDC | No unsaved changes warning on form navigation |
|
||||||
|
| 8 | **IMPORTANT** | Deployments | Create App page shows all config options before app exists (overwhelming) |
|
||||||
|
| 9 | **IMPORTANT** | Platform Dashboard | Label-value spacing missing ("Slugdefault", "Issued8. April 2026", "Max Agents3") |
|
||||||
|
| 10 | **IMPORTANT** | Cross-cutting | Error toasts lack specific error details from API responses |
|
||||||
|
| 11 | Nice-to-have | Users & Roles | No inline validation messages on creation form (just disabled button) |
|
||||||
|
| 12 | Nice-to-have | Users & Roles | "Select a user to view details" placeholder could be more visual |
|
||||||
|
| 13 | Nice-to-have | Audit Log | Clickable rows don't expand to show additional event detail |
|
||||||
|
| 14 | Nice-to-have | Audit Log | Separate time filter from global time selector could confuse users |
|
||||||
|
| 15 | Nice-to-have | OIDC | Client Secret field should be masked by default |
|
||||||
|
| 16 | Nice-to-have | Environments | Slug display could use explicit label |
|
||||||
|
| 17 | Nice-to-have | Deployments | Delete app flow not easily discoverable |
|
||||||
|
| 18 | Nice-to-have | Cross-cutting | Global time range and status filter buttons shown on irrelevant admin pages |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Screenshots Index
|
||||||
|
|
||||||
|
| File | Description |
|
||||||
|
|------|-------------|
|
||||||
|
| `01-platform-dashboard.png` | SaaS Platform dashboard |
|
||||||
|
| `02-platform-license.png` | License page with features and limits |
|
||||||
|
| `03-server-exchanges-overview.png` | Server exchanges main view |
|
||||||
|
| `05-users-roles-page.png` | Users & Roles list view |
|
||||||
|
| `06-user-detail-admin.png` | Admin user detail panel |
|
||||||
|
| `07-add-user-dialog.png` | Add user form (showing along with detail) |
|
||||||
|
| `09-user-create-filled.png` | User creation form filled out |
|
||||||
|
| `10-user-create-result.png` | Error toast after failed user creation |
|
||||||
|
| `11-rbac-after-create.png` | RBAC page after failed creation (still 2 users) |
|
||||||
|
| `13-groups-tab.png` | Groups tab with Admins group |
|
||||||
|
| `14-roles-tab.png` | Roles tab showing unicode escape bug |
|
||||||
|
| `15-audit-log.png` | Audit log with failed user creation events |
|
||||||
|
| `16-clickhouse.png` | ClickHouse status page |
|
||||||
|
| `17-database.png` | Database status page |
|
||||||
|
| `18-environments.png` | Environments list |
|
||||||
|
| `19-oidc.png` | OIDC configuration page |
|
||||||
|
| `19-oidc-full.png` | OIDC full page (scrolled) |
|
||||||
|
| `20-deployments-tab.png` | Deployments tab (via tab click) |
|
||||||
|
| `21-environment-detail.png` | Default environment detail |
|
||||||
|
| `22-create-app.png` | Create Application form |
|
||||||
|
| `23-app-detail.png` | Sample app detail page |
|
||||||
|
| `24-runtime-tab.png` | Runtime tab with agents |
|
||||||
|
| `25-dashboard-tab.png` | Dashboard with metrics and charts |
|
||||||
|
| `26-oidc-delete-confirm.png` | OIDC delete confirmation dialog (well done) |
|
||||||
354
audit/design-consistency-findings.md
Normal file
354
audit/design-consistency-findings.md
Normal file
@@ -0,0 +1,354 @@
|
|||||||
|
# Design Consistency Audit — Cameleer3 UI
|
||||||
|
|
||||||
|
**Audited**: 2026-04-09
|
||||||
|
**Scope**: All pages under `ui/src/pages/`
|
||||||
|
**Base path**: `C:/Users/Hendrik/Documents/projects/cameleer3-server/ui/src/`
|
||||||
|
|
||||||
|
|
||||||
|
## Shared Layout Infrastructure
|
||||||
|
|
||||||
|
### LayoutShell (`components/LayoutShell.tsx`)
|
||||||
|
All pages render inside `<main className={css.mainContent}>` which applies:
|
||||||
|
```css
|
||||||
|
.mainContent {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
This is a flex column container with **no padding/margin**. Each page is responsible for its own content spacing.
|
||||||
|
|
||||||
|
### Shared CSS Modules (`styles/`)
|
||||||
|
| Module | Class | Pattern |
|
||||||
|
|--------|-------|---------|
|
||||||
|
| `section-card.module.css` | `.section` | Card with `padding: 16px 20px`, border, shadow, `margin-bottom: 16px` |
|
||||||
|
| `table-section.module.css` | `.tableSection` | Card wrapper for tables, no padding (overflow hidden), with `.tableHeader` (12px 16px padding) |
|
||||||
|
| `chart-card.module.css` | `.chartCard` | Card with `padding: 16px` |
|
||||||
|
| `log-panel.module.css` | `.logCard` | Card for log viewers, max-height 420px |
|
||||||
|
| `refresh-indicator.module.css` | `.refreshIndicator` | Auto-refresh dot indicator |
|
||||||
|
| `rate-colors.module.css` | `.rateGood/.rateWarn/.rateBad` | Semantic color helpers |
|
||||||
|
|
||||||
|
|
||||||
|
## Per-Page Findings
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 1. Exchanges Page (`pages/Exchanges/`)
|
||||||
|
|
||||||
|
**Files**: `ExchangesPage.tsx`, `ExchangesPage.module.css`, `ExchangeHeader.tsx`, `ExchangeHeader.module.css`, `RouteControlBar.tsx`, `RouteControlBar.module.css`
|
||||||
|
|
||||||
|
**Container pattern**: NO wrapper padding. Uses `height: 100%` split-view layout that fills the entire `mainContent` area.
|
||||||
|
|
||||||
|
**Content wrapper**:
|
||||||
|
```css
|
||||||
|
.splitView { display: flex; height: 100%; overflow: hidden; }
|
||||||
|
```
|
||||||
|
|
||||||
|
**Table**: The exchange list is rendered by `Dashboard.tsx` (in `pages/Dashboard/`), which uses:
|
||||||
|
```css
|
||||||
|
.content { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; background: var(--bg-body); }
|
||||||
|
```
|
||||||
|
- Custom `.tableHeader` with `padding: 8px 12px` (slightly tighter than shared `tableStyles.tableHeader` which uses `12px 16px`)
|
||||||
|
- `DataTable` rendered with `flush` and `fillHeight` props
|
||||||
|
- **NO card wrapper** around the table — it's full-bleed against the background
|
||||||
|
- **Does NOT import shared `table-section.module.css`** — rolls its own `.tableHeader`, `.tableTitle`, `.tableRight`, `.tableMeta`
|
||||||
|
|
||||||
|
**Shared modules used**: NONE. All custom.
|
||||||
|
|
||||||
|
**INCONSISTENCY**: Full-bleed table with no card, no container padding. Custom table header styling duplicates shared module patterns with slightly different padding values (8px 12px vs 12px 16px).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. Dashboard Tab (`pages/DashboardTab/`)
|
||||||
|
|
||||||
|
**Files**: `DashboardPage.tsx`, `DashboardL1.tsx`, `DashboardL2.tsx`, `DashboardL3.tsx`, `DashboardTab.module.css`
|
||||||
|
|
||||||
|
**Container pattern**:
|
||||||
|
```css
|
||||||
|
.content { display: flex; flex-direction: column; gap: 20px; flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 20px; }
|
||||||
|
```
|
||||||
|
- **No top/left/right padding** — content is full-width inside `mainContent`
|
||||||
|
- Only `padding-bottom: 20px` and `gap: 20px` between sections
|
||||||
|
|
||||||
|
**Tables**: Wrapped in shared `tableStyles.tableSection` (card with border, shadow, border-radius). Imports `table-section.module.css`.
|
||||||
|
|
||||||
|
**Charts**: Wrapped in design-system `<Card>` component.
|
||||||
|
|
||||||
|
**Custom sections**: `errorsSection` and `diagramSection` duplicate the card pattern:
|
||||||
|
```css
|
||||||
|
.errorsSection {
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
box-shadow: var(--shadow-card);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
This is identical to `tableStyles.tableSection` but defined separately in `DashboardTab.module.css`.
|
||||||
|
|
||||||
|
**Shared modules used**: `table-section.module.css`, `refresh-indicator.module.css`, `rate-colors.module.css`
|
||||||
|
|
||||||
|
**INCONSISTENCY**: No container padding means KPI strip and tables sit flush against the sidebar/edge. The `.errorsSection` duplicates `tableStyles.tableSection` exactly — should import the shared module instead of copy-pasting.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. Runtime Tab — Agent Health (`pages/AgentHealth/`)
|
||||||
|
|
||||||
|
**Files**: `AgentHealth.tsx`, `AgentHealth.module.css`
|
||||||
|
|
||||||
|
**Container pattern**:
|
||||||
|
```css
|
||||||
|
.content { flex: 1; overflow-y: auto; padding: 20px 24px 40px; min-width: 0; background: var(--bg-body); }
|
||||||
|
```
|
||||||
|
- **Has explicit padding**: `20px 24px 40px` (top, sides, bottom)
|
||||||
|
|
||||||
|
**Tables**: Uses design-system `DataTable` inside a DS `Card` component for agent group cards. The group cards use custom `.groupGrid` grid layout. No `tableStyles.tableSection` wrapper.
|
||||||
|
|
||||||
|
**Cards/sections**: Custom card patterns like `.configBar`, `.eventCard`:
|
||||||
|
```css
|
||||||
|
.configBar {
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
box-shadow: var(--shadow-card);
|
||||||
|
padding: 12px 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Shared modules used**: `log-panel.module.css`
|
||||||
|
|
||||||
|
**INCONSISTENCY**: Uses `padding: 20px 24px 40px` — different from DashboardTab (no padding) and Exchanges (no padding). Custom card patterns duplicate the standard card styling. Does not use `table-section.module.css` or `section-card.module.css`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4. Runtime Tab — Agent Instance (`pages/AgentInstance/`)
|
||||||
|
|
||||||
|
**Files**: `AgentInstance.tsx`, `AgentInstance.module.css`
|
||||||
|
|
||||||
|
**Container pattern**:
|
||||||
|
```css
|
||||||
|
.content { flex: 1; overflow-y: auto; padding: 20px 24px 40px; min-width: 0; background: var(--bg-body); }
|
||||||
|
```
|
||||||
|
- Matches AgentHealth padding exactly (consistent within Runtime tab)
|
||||||
|
|
||||||
|
**Cards/sections**: Custom `.processCard`, `.timelineCard` duplicate the card pattern. Uses `chart-card.module.css` for chart wrappers.
|
||||||
|
|
||||||
|
**Shared modules used**: `log-panel.module.css`, `chart-card.module.css`
|
||||||
|
|
||||||
|
**INCONSISTENCY**: Consistent with AgentHealth but inconsistent with DashboardTab and Exchanges. Custom card patterns (processCard, timelineCard) duplicate shared module patterns.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 5. Apps Tab (`pages/AppsTab/`)
|
||||||
|
|
||||||
|
**Files**: `AppsTab.tsx`, `AppsTab.module.css`
|
||||||
|
|
||||||
|
**Container pattern**:
|
||||||
|
```css
|
||||||
|
.container { padding: 16px; overflow-y: auto; flex: 1; }
|
||||||
|
```
|
||||||
|
- **Has padding**: `16px` all around
|
||||||
|
|
||||||
|
**Content structure**: Three sub-views (`AppListView`, `AppDetailView`, `CreateAppView`) all wrapped in `.container`.
|
||||||
|
|
||||||
|
**Tables**: App list uses `DataTable` directly — no `tableStyles.tableSection` wrapper. Deployment table uses custom `.table` with manual `<table>` HTML (not DataTable).
|
||||||
|
|
||||||
|
**Form controls**: Directly on page background with custom grid layout (`.configGrid`). Uses `SectionHeader` from design-system for visual grouping, but forms are not in cards/sections — they sit flat against the `.container` background.
|
||||||
|
|
||||||
|
**Custom elements**:
|
||||||
|
- `.editBanner` / `.editBannerActive` — custom banner pattern
|
||||||
|
- `.configGrid` — 2-column label/input grid
|
||||||
|
- `.table` — fully custom `<table>` styling (not DataTable)
|
||||||
|
|
||||||
|
**Shared modules used**: NONE. All custom.
|
||||||
|
|
||||||
|
**INCONSISTENCY (user-reported)**: Controls "meshed into background" — correct. Form controls use `SectionHeader` for labels but no `section-card` wrapper. The Tabs component provides visual grouping but the content below tabs is flat. Config grids, toggles, and inputs sit directly on `var(--bg-body)` background via the 16px-padded container. No card/section separation between different config groups. Also uses a manual `<table>` element instead of DataTable for deployments.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 6. Admin — RBAC Page (`pages/Admin/RbacPage.tsx`, `UsersTab.tsx`, `GroupsTab.tsx`, `RolesTab.tsx`)
|
||||||
|
|
||||||
|
**Container pattern**: AdminLayout provides `padding: 20px 24px 40px`. RbacPage renders a bare `<div>` (no extra wrapper class).
|
||||||
|
|
||||||
|
**Content**: Uses `StatCard` strip, `Tabs`, then tab content. Detail views use `SplitPane` (from design-system). User/Group/Role detail sections use `SectionHeader` without card wrappers.
|
||||||
|
|
||||||
|
**Stat strip**: Custom grid — `grid-template-columns: repeat(3, 1fr)` with `gap: 10px; margin-bottom: 16px`
|
||||||
|
|
||||||
|
**Shared modules used**: NONE. Uses `UserManagement.module.css` (custom).
|
||||||
|
|
||||||
|
**INCONSISTENCY**: Detail sections use `SectionHeader` labels but content is flat (no `section-card` wrapper). Similar to AppsTab pattern.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 7. Admin — Audit Log (`pages/Admin/AuditLogPage.tsx`)
|
||||||
|
|
||||||
|
**Container pattern**: Inherits AdminLayout padding (`20px 24px 40px`). Renders a bare `<div>`.
|
||||||
|
|
||||||
|
**Table**: Properly uses shared `tableStyles.tableSection` with `.tableHeader`, `.tableTitle`, `.tableRight`, `.tableMeta`.
|
||||||
|
|
||||||
|
**Shared modules used**: `table-section.module.css`
|
||||||
|
|
||||||
|
**STATUS**: CONSISTENT with shared patterns for the table section. Good.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 8. Admin — OIDC Config (`pages/Admin/OidcConfigPage.tsx`)
|
||||||
|
|
||||||
|
**Container pattern**: Inherits AdminLayout padding. Adds `.page { max-width: 640px; margin: 0 auto; }` — centered narrow layout.
|
||||||
|
|
||||||
|
**Sections**: Uses shared `sectionStyles.section` from `section-card.module.css` for every form group. Uses `SectionHeader` inside each section card.
|
||||||
|
|
||||||
|
**Shared modules used**: `section-card.module.css`
|
||||||
|
|
||||||
|
**STATUS**: GOOD. This is the correct pattern — form groups wrapped in section cards. Should be the model for other form pages.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 9. Admin — Database (`pages/Admin/DatabaseAdminPage.tsx`)
|
||||||
|
|
||||||
|
**Container pattern**: Inherits AdminLayout padding. Renders bare `<div>`.
|
||||||
|
|
||||||
|
**Tables**: Uses `DataTable` directly with NO `tableStyles.tableSection` wrapper. Tables under custom `.section` divs with `.sectionHeading` text labels.
|
||||||
|
|
||||||
|
**Cards**: Uses DS `<Card>` for connection pool. Stat strip is a flex layout.
|
||||||
|
|
||||||
|
**Shared modules used**: NONE. All custom.
|
||||||
|
|
||||||
|
**INCONSISTENCY**: Tables not wrapped in `tableStyles.tableSection`. Uses custom section headings instead of `SectionHeader`. Missing card wrappers around tables. Stat strip uses `flex` layout while other pages use `grid`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 10. Admin — ClickHouse (`pages/Admin/ClickHouseAdminPage.tsx`)
|
||||||
|
|
||||||
|
**Container pattern**: Inherits AdminLayout padding. Renders bare `<div>`.
|
||||||
|
|
||||||
|
**Tables**: Uses shared `tableStyles.tableSection` combined with custom `.tableSection` for margin: `className={tableStyles.tableSection} ${styles.tableSection}`.
|
||||||
|
|
||||||
|
**Custom elements**: `.pipelineCard` duplicates card pattern (bg-surface, border, radius, shadow, padding).
|
||||||
|
|
||||||
|
**Shared modules used**: `table-section.module.css`
|
||||||
|
|
||||||
|
**PARTIAL**: Tables correctly use shared module. Pipeline card duplicates shared card pattern.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 11. Admin — Environments (`pages/Admin/EnvironmentsPage.tsx`)
|
||||||
|
|
||||||
|
**Container pattern**: Inherits AdminLayout padding. Renders via `SplitPane` (design-system).
|
||||||
|
|
||||||
|
**Content**: Uses `SectionHeader`, `SplitPane`, custom meta grids from `UserManagement.module.css`.
|
||||||
|
|
||||||
|
**Shared modules used**: Uses `UserManagement.module.css` (shared with RBAC pages)
|
||||||
|
|
||||||
|
**INCONSISTENCY**: Does not use `section-card.module.css` for form sections. Config sections use `SectionHeader` without card wrappers. `SplitPane` provides some structure but detail content is flat.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 12. Admin — App Config Detail (`pages/Admin/AppConfigDetailPage.tsx`)
|
||||||
|
|
||||||
|
**Container pattern**: Adds `.page { max-width: 720px; margin: 0 auto; }` — centered layout.
|
||||||
|
|
||||||
|
**Sections**: Uses shared `sectionStyles.section` from `section-card.module.css`. Uses `SectionHeader` inside section cards. Custom header card duplicates the card pattern.
|
||||||
|
|
||||||
|
**Shared modules used**: `section-card.module.css`
|
||||||
|
|
||||||
|
**STATUS**: GOOD. Follows same pattern as OIDC page.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 13. Routes pages (`pages/Routes/`) — NOT ROUTED
|
||||||
|
|
||||||
|
These pages (`RoutesMetrics.tsx`, `RouteDetail.tsx`) exist but are NOT in `router.tsx`. They may be deprecated or used as sub-components. `RoutesMetrics` correctly uses shared `tableStyles.tableSection`. `RouteDetail` has many custom card patterns (`.headerCard`, `.diagramPane`, `.statsPane`, `.executionsTable`, `.routeFlowSection`) that duplicate the shared card pattern.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
## Summary: Inconsistency Matrix
|
||||||
|
|
||||||
|
### Container Padding
|
||||||
|
|
||||||
|
| Page | Padding | Pattern |
|
||||||
|
|------|---------|---------|
|
||||||
|
| **Exchanges** | NONE (full-bleed) | `height: 100%`, fills container |
|
||||||
|
| **Dashboard Tab** | NONE (gap only) | `gap: 20px`, `padding-bottom: 20px` only |
|
||||||
|
| **Runtime (AgentHealth)** | `20px 24px 40px` | Explicit padding |
|
||||||
|
| **Runtime (AgentInstance)** | `20px 24px 40px` | Explicit padding |
|
||||||
|
| **Apps Tab** | `16px` | Uniform padding |
|
||||||
|
| **Admin pages** | `20px 24px 40px` | Via AdminLayout |
|
||||||
|
|
||||||
|
**Finding**: Three different padding strategies. Exchanges and Dashboard have no padding; Runtime and Admin use 20px/24px; Apps uses 16px.
|
||||||
|
|
||||||
|
|
||||||
|
### Table Wrapper Pattern
|
||||||
|
|
||||||
|
| Page | Uses `tableStyles.tableSection`? | Card wrapper? |
|
||||||
|
|------|----------------------------------|---------------|
|
||||||
|
| **Exchanges (Dashboard.tsx)** | NO — custom `.tableHeader` | NO — full-bleed |
|
||||||
|
| **Dashboard L1/L2/L3** | YES | YES (shared) |
|
||||||
|
| **Runtime AgentHealth** | NO | YES (via DS `Card`) |
|
||||||
|
| **Apps Tab** | NO | NO — bare `<table>` |
|
||||||
|
| **Admin — Audit** | YES | YES (shared) |
|
||||||
|
| **Admin — ClickHouse** | YES | YES (shared) |
|
||||||
|
| **Admin — Database** | NO | NO |
|
||||||
|
|
||||||
|
**Finding**: 4 of 7 table-using pages do NOT use the shared `table-section.module.css`. The Exchanges page custom header has padding `8px 12px` vs shared `12px 16px`.
|
||||||
|
|
||||||
|
|
||||||
|
### Form/Control Wrapper Pattern
|
||||||
|
|
||||||
|
| Page | Form controls in cards? | Uses `section-card`? |
|
||||||
|
|------|------------------------|---------------------|
|
||||||
|
| **Apps Tab (detail)** | NO — flat against background | NO |
|
||||||
|
| **Apps Tab (create)** | NO — flat against background | NO |
|
||||||
|
| **Admin — OIDC** | YES | YES |
|
||||||
|
| **Admin — App Config** | YES | YES |
|
||||||
|
| **Admin — RBAC detail** | NO — flat against background | NO |
|
||||||
|
| **Admin — Environments** | NO — flat against background | NO |
|
||||||
|
| **Admin — Database** | PARTIAL (Card for pool) | NO |
|
||||||
|
| **Runtime — AgentHealth** | YES (custom `.configBar`) | NO (custom) |
|
||||||
|
|
||||||
|
**Finding**: Only OIDC and AppConfigDetail use `section-card.module.css` for form grouping. Most form pages render controls flat against the page background.
|
||||||
|
|
||||||
|
|
||||||
|
### Duplicated Card Pattern
|
||||||
|
|
||||||
|
The following CSS pattern appears in 8+ custom locations instead of importing `section-card.module.css` or `table-section.module.css`:
|
||||||
|
|
||||||
|
```css
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
box-shadow: var(--shadow-card);
|
||||||
|
```
|
||||||
|
|
||||||
|
**Duplicated in**:
|
||||||
|
- `DashboardTab.module.css` → `.errorsSection`, `.diagramSection`
|
||||||
|
- `AgentHealth.module.css` → `.configBar`, `.eventCard`
|
||||||
|
- `AgentInstance.module.css` → `.processCard`, `.timelineCard`
|
||||||
|
- `ClickHouseAdminPage.module.css` → `.pipelineCard`
|
||||||
|
- `AppConfigDetailPage.module.css` → `.header`
|
||||||
|
- `RouteDetail.module.css` → `.headerCard`, `.diagramPane`, `.statsPane`, `.executionsTable`, `.routeFlowSection`
|
||||||
|
|
||||||
|
|
||||||
|
## Prioritized Fixes
|
||||||
|
|
||||||
|
### P0 — User-reported issues
|
||||||
|
1. **Exchanges table full-bleed**: `Dashboard.tsx` should wrap its table in `tableStyles.tableSection` and use the shared table header classes instead of custom ones. Custom `.tableHeader` padding (8px 12px) should match shared (12px 16px).
|
||||||
|
2. **Apps detail flat controls**: `AppsTab.tsx` config sections should wrap form groups in `sectionStyles.section` (from `section-card.module.css`), matching the OIDC page pattern.
|
||||||
|
3. **Apps deployment table**: Replace manual `<table>` with `DataTable` inside `tableStyles.tableSection`.
|
||||||
|
|
||||||
|
### P1 — Padding normalization
|
||||||
|
4. **Standardize container padding**: Choose ONE pattern for scrollable content areas. Recommended: `padding: 20px 24px 40px` (currently used by Runtime + Admin). Apply to DashboardTab's `.content`. Exchanges is an exception due to its split-view height-filling layout.
|
||||||
|
5. **DashboardTab.module.css**: Add side padding to `.content`.
|
||||||
|
|
||||||
|
### P2 — Shared module adoption
|
||||||
|
6. **Replace duplicated card patterns**: Import `section-card.module.css` or `table-section.module.css` instead of duplicating the card CSS in:
|
||||||
|
- `DashboardTab.module.css` (`.errorsSection` -> use `tableStyles.tableSection`)
|
||||||
|
- `AgentHealth.module.css` (`.configBar`, `.eventCard`)
|
||||||
|
- `AgentInstance.module.css` (`.processCard`, `.timelineCard`)
|
||||||
|
- `ClickHouseAdminPage.module.css` (`.pipelineCard`)
|
||||||
|
7. **Database admin**: Wrap tables in `tableStyles.tableSection`.
|
||||||
|
8. **Admin detail pages** (RBAC, Environments): Wrap form sections in `sectionStyles.section`.
|
||||||
599
audit/interaction-patterns-findings.md
Normal file
599
audit/interaction-patterns-findings.md
Normal file
@@ -0,0 +1,599 @@
|
|||||||
|
# Cameleer3 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`
|
||||||
267
audit/monitoring-pages-findings.md
Normal file
267
audit/monitoring-pages-findings.md
Normal file
@@ -0,0 +1,267 @@
|
|||||||
|
# Cameleer3 Web UI - UX Audit Findings
|
||||||
|
|
||||||
|
**Date:** 2026-04-09
|
||||||
|
**URL:** https://desktop-fb5vgj9.siegeln.internal/server/
|
||||||
|
**Build:** 69dcce2
|
||||||
|
**Auditor:** Claude (automated browser audit)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. Exchange Detail (Split View)
|
||||||
|
|
||||||
|
**Screenshots:** `04-exchange-detail-ok.png`, `05-exchange-detail-err.png`, `27-exchange-err-error-tab.png`
|
||||||
|
|
||||||
|
### What Works Well
|
||||||
|
- Split view layout (50/50) is clean and efficient -- table on left, detail on right
|
||||||
|
- Processor timeline visualization is excellent -- clear step sequence with color-coded status (green OK, red/amber error)
|
||||||
|
- Exchange detail tabs (Info, Headers, Input, Output, Error, Config, Timeline, Log) are comprehensive
|
||||||
|
- Error tab shows full Java stack trace with Copy button and exception message prominently displayed
|
||||||
|
- ERR rows in table have clear red status badge with icon
|
||||||
|
- Correlated exchanges section present (even when none found)
|
||||||
|
- JSON download button available on the detail view
|
||||||
|
|
||||||
|
### Issues Found
|
||||||
|
|
||||||
|
**Important:**
|
||||||
|
- **Exchange ID is raw hex, hard to scan.** The IDs like `96E395B0088AA6D-000000000001ED46` are 33+ characters wide. They push the table columns apart and are hard for humans to parse. Consider truncating with copy-on-click or showing a short hash.
|
||||||
|
- **Attributes column always shows "--".** Every single exchange row displays "--" in the Attributes column. If no attributes are captured, this column wastes horizontal space. Consider hiding it when empty or showing it only when relevant data exists.
|
||||||
|
- **Status shows "OK" but detail shows "COMPLETED".** The table status column shows "OK" / "ERR" but the detail panel shows "COMPLETED" / "FAILED". This terminology mismatch is confusing -- pick one convention.
|
||||||
|
|
||||||
|
**Nice-to-have:**
|
||||||
|
- **No breadcrumb update when exchange selected.** The breadcrumb still shows "All Applications" even when viewing a specific exchange detail. Should show: All Applications > sample-app > Exchange 96E39...
|
||||||
|
- **No action buttons on exchange detail.** No "Replay", "Trace", or "View Route" buttons in the detail view. Users would benefit from contextual actions.
|
||||||
|
- **Back navigation relies on de-selecting the row.** There is no explicit "Close" or "Back" button on the detail panel.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Dashboard Tab
|
||||||
|
|
||||||
|
**Screenshots:** `07-dashboard-full.png`, `08-dashboard-drilldown.png`
|
||||||
|
|
||||||
|
### What Works Well
|
||||||
|
- KPI strip is clean and scannable: Throughput (7/s), Success Rate (98.0%), P99 Latency (6695ms), SLA Compliance (38.0%), Active Errors (3)
|
||||||
|
- L1 (applications) -> L2 (routes) drill-down works via table row click
|
||||||
|
- L2 view shows comprehensive route performance table with throughput, success %, avg/P99, SLA %, sparkline
|
||||||
|
- Top Errors table with error velocity and "last seen" is very useful
|
||||||
|
- Charts: Throughput by Application, Error Rate, Volume vs SLA Compliance, 7-Day Pattern heatmap
|
||||||
|
- Color coding is consistent (amber for primary metrics, red for errors)
|
||||||
|
- Auto-refresh indicator shows "Auto-refresh: 30s"
|
||||||
|
|
||||||
|
### Issues Found
|
||||||
|
|
||||||
|
**Important:**
|
||||||
|
- **Application Health table row click is blocked by overlapping elements.** Playwright detected `_tableSection` and `_chartGrid` divs intercepting pointer events on the table row. While JavaScript `.click()` works, this means CSS `pointer-events` or `z-index` is wrong -- real mouse clicks may be unreliable depending on scroll position.
|
||||||
|
- **SLA Compliance 0.0% shows "BREACH" label** in L2 view but no explanation of what the SLA threshold is until you look closely at the latency chart. The SLA threshold (300ms) should be shown next to the KPI, not just in the chart.
|
||||||
|
- **7-Day Pattern heatmap is flat/empty.** The heatmap shows data only for the current day, making it look broken for a fresh deployment. Consider showing "Insufficient data" when less than 2 days of data exist.
|
||||||
|
- **"Application Volume vs SLA Compliance" bubble chart** truncates long application names (e.g., "complex-fulfil..." in L2). The chart has limited space for labels.
|
||||||
|
|
||||||
|
**Nice-to-have:**
|
||||||
|
- **No trend arrows on KPI values in L2.** The L1 dashboard shows up/down arrows (all "up"), but L2 KPIs show percentage change text instead. The two levels should be consistent.
|
||||||
|
- **P99 latency 6695ms is not formatted as seconds.** Values over 1000ms should display as "6.7s" for readability. The L2 view uses raw milliseconds (1345ms) which is also inconsistent with the L1 (6695ms) and the exchange list which does format durations.
|
||||||
|
- **Throughput numbers use locale-specific formatting.** In the route table: `1.050` (German locale?) vs `14.377` -- these look like decimal numbers rather than thousands. Consider using explicit thousands separator or always using K suffix.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Runtime Tab
|
||||||
|
|
||||||
|
**Screenshots:** `09-runtime-tab.png`, `09-runtime-full.png`, `10-runtime-agent-detail.png`, `24-runtime-agent-detail-full.png`
|
||||||
|
|
||||||
|
### What Works Well
|
||||||
|
- KPI strip: Total Agents (3), Applications (1), Active Routes (30/0), Total TPS (4.8), Dead (0) -- clear at a glance
|
||||||
|
- Agent state indicators are clear: green "LIVE" badges, "3/3 LIVE" summary
|
||||||
|
- Instance table shows key metrics: State, Uptime, TPS, Errors, Heartbeat
|
||||||
|
- Clicking an agent row navigates to a rich detail view with 6 charts (CPU, Memory, Throughput, Error Rate, Thread Count, GC Pauses)
|
||||||
|
- Agent capabilities displayed as badges (LOGFORWARDING, DIAGRAMS, TRACING, METRICS)
|
||||||
|
- Application Log viewer with level filtering (Error/Warn/Info/Debug/Trace) and auto-scroll
|
||||||
|
- Timeline shows agent events (CONFIG_APPLIED, COMMAND_SUCCESS) with relative timestamps
|
||||||
|
|
||||||
|
### Issues Found
|
||||||
|
|
||||||
|
**Critical:**
|
||||||
|
- **GC Pauses chart X-axis is unreadable.** The chart renders ~60 full ISO-8601 timestamps (`2026-04-09T14:16:00Z` through `2026-04-09T15:15:00Z`) as X-axis labels. These overlap completely and form an unreadable block of text. All other charts use concise numeric labels (e.g., "12", "24"). The GC Pauses chart should use the same time formatting.
|
||||||
|
|
||||||
|
**Important:**
|
||||||
|
- **Agent state shows "UNKNOWN" alongside "LIVE".** The detail view shows both "LIVE" and "UNKNOWN" state indicators. The "UNKNOWN" appears to be a secondary state field (perhaps container state?) but it is confusing to show two conflicting states without explanation.
|
||||||
|
- **Memory chart shows absolute MB values but no percentage on Y-axis.** The KPI shows "46% / 57 MB / 124 MB" which is great, but the chart Y-axis goes from 0-68 MB which doesn't match the 124 MB limit. The max heap should be indicated on the chart (e.g., as a reference line).
|
||||||
|
- **Throughput chart Y-axis scale is wildly mismatched.** The KPI shows 2.0 msg/s but the Y-axis goes to 1.2k msg/s, making the actual data appear as a flat line near zero. The Y-axis should auto-scale to the actual data range.
|
||||||
|
- **Error Rate chart Y-axis shows "err/h"** but the unit inconsistency with the KPI (which shows percentage "1.7%") is confusing.
|
||||||
|
|
||||||
|
**Nice-to-have:**
|
||||||
|
- **"DEAD 0" KPI in the overview is redundant** when "all healthy" text is already shown below it. Consider combining or removing the redundant label.
|
||||||
|
- **Application Log shows "0 entries"** in the overview but "100 entries" in the agent detail. The overview log may not aggregate across agents, which is misleading.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Deployments Tab
|
||||||
|
|
||||||
|
**Screenshots:** `12-deployments-list.png`, `25-app-detail.png`, `11-deployments-tab.png`
|
||||||
|
|
||||||
|
### What Works Well
|
||||||
|
- App list is clean: Name, Environment (with colored badges DEFAULT/DEVELOPMENT), Updated, Created columns
|
||||||
|
- App detail page shows configuration tabs: Monitoring, Resources, Variables, Traces & Taps, Route Recording
|
||||||
|
- Read-only mode with explicit "Edit" button prevents accidental changes
|
||||||
|
- "Upload JAR" and "Delete App" action buttons are visible
|
||||||
|
- Create Application form (`/apps/new`) is comprehensive with Identity & Artifact section, deploy toggle, and monitoring sub-tabs
|
||||||
|
|
||||||
|
### Issues Found
|
||||||
|
|
||||||
|
**Important:**
|
||||||
|
- **Navigating to `/server/apps` redirected to `/server/apps/new`** on the initial visit, bypassing the apps list. This happened once but not consistently. The default route for the Deployments tab should always be the list view, not the create form.
|
||||||
|
- **No deployment status/progress visible in the list.** The apps list shows "RUNNING" status only in the detail view. The list should show the deployment status directly (RUNNING/STOPPED/FAILED badge per row).
|
||||||
|
- **"Updated: 59m ago" is relative time** which becomes stale if the page is left open. Consider showing absolute timestamp on hover.
|
||||||
|
|
||||||
|
**Nice-to-have:**
|
||||||
|
- **Configuration form select dropdowns** (Engine Level, Payload Capture, App Log Level, etc.) all use native HTML selects with a custom `"triangle"` indicator -- this is inconsistent with the design system's `Select` component used elsewhere.
|
||||||
|
- **"External URL" field shows `/default/.../`** placeholder which is cryptic. Should show the full resolved URL or explain the pattern.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Command Palette (Ctrl+K)
|
||||||
|
|
||||||
|
**Screenshots:** `14-command-palette.png`, `15-command-palette-search.png`, `16-command-palette-keyboard.png`
|
||||||
|
|
||||||
|
### What Works Well
|
||||||
|
- Opens instantly with Ctrl+K
|
||||||
|
- Shows categorized results: All (24), Applications (1), Exchanges (10), Routes (10), Agents (3)
|
||||||
|
- Search is fast and filters results in real-time (typed "error" -> filtered to 11 results)
|
||||||
|
- Search term highlighting (yellow background on matched text)
|
||||||
|
- Keyboard navigation works (ArrowDown moves selection)
|
||||||
|
- Rich result items: exchange IDs with status, routes with app name and exchange count, applications with agent count
|
||||||
|
- Escape closes the palette
|
||||||
|
- Category tabs allow filtering by type
|
||||||
|
|
||||||
|
### Issues Found
|
||||||
|
|
||||||
|
**Nice-to-have:**
|
||||||
|
- **Exchange IDs in search results are full hex strings.** The same issue as the exchanges table -- `5EF55FC31352A9A-000000000001F07C` is hard to scan. Show a shorter preview.
|
||||||
|
- **No keyboard shortcut hints in results.** Results don't show "Enter to open" or "Tab to switch category" -- users must discover these by trial.
|
||||||
|
- **Category counts don't update when filtering.** When I typed "error", the category tabs still show the original counts (Applications, Exchanges 10, Routes 1, Agents) but some categories become empty. The empty categories should hide or dim.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. Dark Mode
|
||||||
|
|
||||||
|
**Screenshots:** `17-dark-mode-exchanges.png`, `18-dark-mode-dashboard.png`, `19-dark-mode-runtime.png`
|
||||||
|
|
||||||
|
### What Works Well
|
||||||
|
- Dark mode applies cleanly across all pages
|
||||||
|
- Table rows have good contrast (light text on dark background)
|
||||||
|
- Status badges (OK green, ERR red) remain clearly visible
|
||||||
|
- Chart lines and data points are visible against dark backgrounds
|
||||||
|
- KPI cards have distinct dark card backgrounds with readable text
|
||||||
|
- The dark mode toggle is easy to find (moon icon in header)
|
||||||
|
- Theme preference persists in localStorage (`cameleer-theme`)
|
||||||
|
|
||||||
|
### Issues Found
|
||||||
|
|
||||||
|
**Important:**
|
||||||
|
- **Chart backgrounds appear as opaque dark cards but chart lines may be harder to see.** The throughput and error rate charts use amber/orange lines on dark gray backgrounds -- this is acceptable but not ideal. Consider slightly brighter chart colors in dark mode.
|
||||||
|
- **Application Volume vs SLA chart** in dashboard: the bubble/bar labels may have low contrast in dark mode (hard to verify at screenshot resolution).
|
||||||
|
|
||||||
|
**Nice-to-have:**
|
||||||
|
- **Sidebar border/separator** between the sidebar and main content area is very subtle in dark mode. A slightly more visible divider would help.
|
||||||
|
- **Environment badges** (DEFAULT in gold, DEVELOPMENT in orange) are designed for light mode and may look less distinct against the dark background.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. Cross-Cutting Interaction Issues
|
||||||
|
|
||||||
|
### Status Filter Buttons (OK/Warn/Error/Running)
|
||||||
|
|
||||||
|
**Screenshots:** `03-exchanges-error-filtered.png`
|
||||||
|
|
||||||
|
**Important:**
|
||||||
|
- **Error filter works correctly** -- clicking the Error button filters to show only ERR exchanges (447 in the test). The button shows active/pressed state.
|
||||||
|
- **Filter state is not preserved in URL.** Navigating away and back loses the filter. Consider encoding active filters in the URL query string.
|
||||||
|
- **KPI strip does not update when filter is active.** When Error filter is active, the KPI strip still shows overall stats (Total 23.4K, Err% 1.9%). It should either update to show filtered stats or clearly indicate it shows overall stats.
|
||||||
|
|
||||||
|
### Column Sorting
|
||||||
|
|
||||||
|
**Screenshot:** `23-sorting-route.png`
|
||||||
|
|
||||||
|
- Sorting works correctly (Route column sorted alphabetically, "audit-log" rows grouped)
|
||||||
|
- Sort indicator arrow is visible on the column header
|
||||||
|
- **Sorting is client-side only (within the 50-row page).** With 23K+ exchanges, sorting only the visible page is misleading. Consider either fetching sorted data from the server or clearly labeling "sorted within current page."
|
||||||
|
|
||||||
|
### Pagination
|
||||||
|
|
||||||
|
- Pagination works: "1-25 of 50", page 1/2, rows per page selector (10/25/50/100)
|
||||||
|
- Next/Previous page buttons work
|
||||||
|
- **"50 of 23,485 exchanges" label is confusing.** The "50" refers to the server-side limit (max fetched), not the page size (25). This should read "Showing 1-25 of 23,485" or similar.
|
||||||
|
|
||||||
|
### Sidebar App Tree
|
||||||
|
|
||||||
|
**Screenshot:** `20-sidebar-expanded.png`
|
||||||
|
|
||||||
|
- Expand/collapse works for "sample app"
|
||||||
|
- Shows all 10 routes with exchange counts (audit-log 5.3k, file-processing 114.2k, etc.)
|
||||||
|
- Exchange counts use K-suffix formatting which is good
|
||||||
|
- **Add to starred button is present** (star icon on the app)
|
||||||
|
|
||||||
|
### Environment Selector
|
||||||
|
|
||||||
|
- Dropdown works: All Envs / default / development
|
||||||
|
- Switching environment correctly filters data (65K -> 3.5K exchanges)
|
||||||
|
- Selection persists in localStorage
|
||||||
|
|
||||||
|
### Time Range Pills
|
||||||
|
|
||||||
|
**Screenshot:** `21-time-range-3h.png`
|
||||||
|
|
||||||
|
- Time range pills work (1h, 3h, 6h, Today, 24h, 7d)
|
||||||
|
- Switching updates data and KPI strip correctly
|
||||||
|
- Custom date range is shown: "9. Apr. 16:14 -- now" with clickable start/end timestamps
|
||||||
|
- **Date formatting uses European style** ("9. Apr. 16:14") which is fine but inconsistent with ISO timestamps elsewhere.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. Systematic Navigation Bug
|
||||||
|
|
||||||
|
**Critical:**
|
||||||
|
|
||||||
|
During the audit, the browser consistently auto-redirected from any page to `/server/admin/rbac` (Users & Roles) after interactions involving the Playwright accessibility snapshot tool. This happened:
|
||||||
|
- After taking snapshots of the exchanges page
|
||||||
|
- After clicking exchange detail rows
|
||||||
|
- After interacting with filter buttons
|
||||||
|
- After attempting to click table rows
|
||||||
|
|
||||||
|
The redirect does **not** happen when using only JavaScript-based interactions (`page.evaluate`) without the Playwright snapshot/click methods. The root cause appears to be that the Playwright MCP accessibility snapshot tool triggers focus/click events on sidebar items (specifically "Users & Roles"), causing unintended navigation.
|
||||||
|
|
||||||
|
**While this is likely a tool interaction artifact rather than a real user-facing bug**, it reveals that:
|
||||||
|
1. The sidebar tree items may have overly aggressive focus/activation behavior (activating on focus rather than explicit click)
|
||||||
|
2. There may be no route guard preventing unexpected navigation when the user hasn't explicitly clicked a sidebar item
|
||||||
|
|
||||||
|
Recommend investigating whether keyboard focus on sidebar tree items triggers navigation (it should require Enter/click, not just focus).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Summary of Issues by Severity
|
||||||
|
|
||||||
|
### Critical (1)
|
||||||
|
1. **GC Pauses chart X-axis renders ~60 full ISO timestamps** -- completely unreadable (Runtime > Agent Detail)
|
||||||
|
|
||||||
|
### Important (10)
|
||||||
|
1. **Exchange ID columns are too wide** -- 33-char hex strings push table layout (Exchanges)
|
||||||
|
2. **Attributes column always shows "--"** -- wastes space (Exchanges)
|
||||||
|
3. **Status terminology mismatch** -- "OK/ERR" in table vs "COMPLETED/FAILED" in detail (Exchange Detail)
|
||||||
|
4. **Dashboard table row clicks intercepted by overlapping divs** -- z-index/pointer-events issue (Dashboard)
|
||||||
|
5. **SLA threshold not shown on KPI** -- have to find it in the chart (Dashboard L2)
|
||||||
|
6. **Agent state shows "UNKNOWN" alongside "LIVE"** -- confusing dual state (Runtime Agent Detail)
|
||||||
|
7. **Throughput chart Y-axis scale mismatch** -- 2 msg/s data on 1.2k scale, appears flat (Runtime Agent Detail)
|
||||||
|
8. **Error Rate chart unit mismatch** -- "err/h" on chart vs "%" on KPI (Runtime Agent Detail)
|
||||||
|
9. **Filter state not preserved in URL** (Exchanges)
|
||||||
|
10. **"50 of 23,485 exchanges" pagination label is confusing** (Exchanges)
|
||||||
|
|
||||||
|
### Nice-to-have (12)
|
||||||
|
1. No breadcrumb update when exchange selected
|
||||||
|
2. No action buttons (Replay/Trace) on exchange detail
|
||||||
|
3. No explicit Close/Back button on detail panel
|
||||||
|
4. P99 latency not formatted as seconds when >1000ms
|
||||||
|
5. Throughput numbers use locale-specific decimal formatting
|
||||||
|
6. 7-Day Pattern heatmap appears empty with limited data
|
||||||
|
7. Exchange IDs in command palette are full hex strings
|
||||||
|
8. No keyboard shortcut hints in command palette results
|
||||||
|
9. Sidebar border subtle in dark mode
|
||||||
|
10. Deployment list doesn't show status badges
|
||||||
|
11. "Updated: 59m ago" relative time goes stale
|
||||||
|
12. Category counts in command palette don't update when filtering
|
||||||
531
docs/superpowers/specs/2026-04-09-ux-polish-design.md
Normal file
531
docs/superpowers/specs/2026-04-09-ux-polish-design.md
Normal file
@@ -0,0 +1,531 @@
|
|||||||
|
# UX Polish & Bug Fixes — Design Spec
|
||||||
|
|
||||||
|
**Date:** 2026-04-09
|
||||||
|
**Scope:** Bug fixes, design consistency, interaction consistency, contrast/readability, data formatting, chart fixes, admin polish
|
||||||
|
**Out of scope:** Feature work (onboarding, alerting, shareable links, latency investigation) — tracked in Epic #100
|
||||||
|
|
||||||
|
## Context
|
||||||
|
|
||||||
|
Comprehensive Playwright-driven audit of the live Cameleer3 UI (build 69dcce2, 60+ screenshots) combined with the existing UI_FINDINGS.md visual audit (2026-03-25) and 16 open Gitea issues. Three code-level audits performed: layout consistency (CSS modules), interaction patterns (dialogs, buttons, toasts), and design system adoption.
|
||||||
|
|
||||||
|
Audit artifacts in `audit/`:
|
||||||
|
- `monitoring-pages-findings.md` — exchanges, dashboard, runtime, deployments, command palette, dark mode
|
||||||
|
- `admin-lifecycle-findings.md` — RBAC CRUD, audit log, OIDC, environments, database, ClickHouse, platform
|
||||||
|
- `design-consistency-findings.md` — per-page CSS module usage, container padding, card patterns
|
||||||
|
- `interaction-patterns-findings.md` — confirmation dialogs, button order, edit/save flows, toasts, loading/empty states
|
||||||
|
- 60+ screenshots
|
||||||
|
|
||||||
|
## Implementation Strategy
|
||||||
|
|
||||||
|
8 theme-based batches, ordered by impact. Each batch groups related fixes that share code paths.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Batch 1: Critical Bug Fixes
|
||||||
|
|
||||||
|
**Effort:** 1 day
|
||||||
|
|
||||||
|
### 1.1 SSE Navigation Bug
|
||||||
|
|
||||||
|
**Problem:** Admin pages sporadically redirect to `/server/exchanges` during form editing. The SSE exchange data stream triggers React state updates that cause route changes, losing unsaved work.
|
||||||
|
|
||||||
|
**Fix:** Guard SSE-driven state updates so they never trigger navigation when the current route is outside the exchanges scope. The exchange list polling/SSE should update data stores without pushing route state. Likely in `LayoutShell.tsx` or the SSE connection manager — the exchange data subscription must be decoupled from route navigation.
|
||||||
|
|
||||||
|
### 1.2 User Creation in OIDC Mode
|
||||||
|
|
||||||
|
**Problem:** `UserAdminController.createUser()` returns `ResponseEntity.badRequest().build()` (empty body) when OIDC is enabled. The UI still shows "+ Add user" and the full creation form. Toast says "Failed to create user" with no explanation.
|
||||||
|
|
||||||
|
**Fix (backend):** Return `{ "error": "Local user creation is disabled when OIDC is enabled" }` as the response body.
|
||||||
|
|
||||||
|
**Fix (frontend):** When OIDC is enabled, show an inline banner replacing the create form: "Local user creation is disabled when OIDC is active. Users are provisioned automatically via SSO." Hide or disable the "+ Add user" button.
|
||||||
|
|
||||||
|
**Files:** `UserAdminController.java:92-93`, `UsersTab.tsx` (create form section)
|
||||||
|
|
||||||
|
### 1.3 `/server/deployments` 404
|
||||||
|
|
||||||
|
**Problem:** Direct URL shows unhandled React Router dev error. The Deployments tab lives at `/server/apps`.
|
||||||
|
|
||||||
|
**Fix:** Add redirect route in `router.tsx`: `{ path: "deployments", element: <Navigate to="/server/apps" replace /> }`
|
||||||
|
|
||||||
|
**Files:** `ui/src/router.tsx`
|
||||||
|
|
||||||
|
### 1.4 GC Pauses Chart X-axis
|
||||||
|
|
||||||
|
**Problem:** Renders ~60 full ISO-8601 timestamps overlapping into an unreadable block. All other agent charts (CPU, Memory, Throughput, Error Rate, Thread Count) use concise time labels.
|
||||||
|
|
||||||
|
**Fix:** Use the same X-axis time formatter as the other 5 agent charts. The GC Pauses chart likely passes raw ISO strings to the chart library instead of using the shared time axis configuration.
|
||||||
|
|
||||||
|
**Files:** `AgentInstance.tsx` or `AgentInstance.module.css` (GC Pauses chart config)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Batch 2a: Design/Layout Consistency
|
||||||
|
|
||||||
|
**Effort:** 2 days
|
||||||
|
|
||||||
|
Reference: `audit/design-consistency-findings.md`
|
||||||
|
|
||||||
|
### 2a.1 Exchanges Table Containment
|
||||||
|
|
||||||
|
**Problem:** Only full-bleed table in the app. `Dashboard.tsx` rolls its own `.tableHeader` with `padding: 8px 12px` instead of using `table-section.module.css` (shared: `12px 16px`). No card wrapper.
|
||||||
|
|
||||||
|
**Fix:** Import and use `tableStyles.tableSection` wrapper. Replace custom `.tableHeader`, `.tableTitle`, `.tableRight`, `.tableMeta` with the shared module classes. The exchange table should look like every other table (Audit Log, ClickHouse, Dashboard L2/L3).
|
||||||
|
|
||||||
|
**Files:** `pages/Dashboard/Dashboard.tsx`, `pages/Dashboard/Dashboard.module.css`
|
||||||
|
|
||||||
|
### 2a.2 App Detail/Create App Flat Controls
|
||||||
|
|
||||||
|
**Problem:** `AppsTab.tsx` renders all form controls flat against the background. Config tabs (Monitoring, Resources, Variables, Traces & Taps, Route Recording) have labels and controls but no card wrappers. Controls "mesh into background."
|
||||||
|
|
||||||
|
**Fix:** Wrap each configuration group in `sectionStyles.section` from `section-card.module.css`, matching the OIDC page pattern (`OidcConfigPage.tsx`) and AppConfigDetail pattern (`AppConfigDetailPage.tsx`). Each sub-tab's content gets a section card.
|
||||||
|
|
||||||
|
**Files:** `pages/AppsTab/AppsTab.tsx`, `pages/AppsTab/AppsTab.module.css`
|
||||||
|
|
||||||
|
### 2a.3 Apps Deployment Table
|
||||||
|
|
||||||
|
**Problem:** Uses raw HTML `<table>` instead of `DataTable` with no `tableStyles.tableSection` wrapper.
|
||||||
|
|
||||||
|
**Fix:** Replace manual `<table>` with `DataTable` inside `tableStyles.tableSection`, matching the Audit Log pattern.
|
||||||
|
|
||||||
|
**Files:** `pages/AppsTab/AppsTab.tsx`
|
||||||
|
|
||||||
|
### 2a.4 Container Padding Normalization
|
||||||
|
|
||||||
|
**Problem:** Three different strategies: Exchanges/Dashboard = no padding, Runtime/Admin = `20px 24px 40px`, Apps = `16px`.
|
||||||
|
|
||||||
|
**Fix:**
|
||||||
|
- Standardize on `20px 24px 40px` for all scrollable content pages
|
||||||
|
- Apps: change from `16px` to `20px 24px 40px`
|
||||||
|
- Dashboard: add `padding: 0 24px 20px` for side margins (keep gap-based vertical spacing)
|
||||||
|
- Exchanges: exception — split-view height-filling layout needs no padding
|
||||||
|
|
||||||
|
**Files:** `pages/AppsTab/AppsTab.module.css` (`.container`), `pages/DashboardTab/DashboardTab.module.css` (`.content`)
|
||||||
|
|
||||||
|
### 2a.5 Deduplicate Card CSS
|
||||||
|
|
||||||
|
**Problem:** The `bg-surface + border + border-radius + box-shadow` card pattern is copy-pasted in 8+ locations instead of importing shared modules.
|
||||||
|
|
||||||
|
**Fix:** Replace custom card declarations with imports from `section-card.module.css` or `table-section.module.css`:
|
||||||
|
- `DashboardTab.module.css` — `.errorsSection`, `.diagramSection` -> `tableStyles.tableSection`
|
||||||
|
- `AgentHealth.module.css` — `.configBar`, `.eventCard` -> `sectionStyles.section`
|
||||||
|
- `AgentInstance.module.css` — `.processCard`, `.timelineCard` -> `sectionStyles.section`
|
||||||
|
- `ClickHouseAdminPage.module.css` — `.pipelineCard` -> `sectionStyles.section`
|
||||||
|
|
||||||
|
### 2a.6 Admin Detail Pages Flat Forms
|
||||||
|
|
||||||
|
**Problem:** RBAC detail (Users/Groups) and Environments detail render form controls without section cards.
|
||||||
|
|
||||||
|
**Fix:** Wrap detail sections in `sectionStyles.section`. For master-detail pages, the detail panel should use section cards to group related fields (Identity, Roles, Group Membership, etc.).
|
||||||
|
|
||||||
|
**Files:** `pages/Admin/UsersTab.tsx`, `pages/Admin/GroupsTab.tsx`, `pages/Admin/EnvironmentsPage.tsx`
|
||||||
|
|
||||||
|
### 2a.7 Database Admin Table
|
||||||
|
|
||||||
|
**Problem:** Uses `DataTable` without `tableStyles.tableSection` wrapper.
|
||||||
|
|
||||||
|
**Fix:** Wrap in `tableStyles.tableSection` like Audit Log and ClickHouse.
|
||||||
|
|
||||||
|
**Files:** `pages/Admin/DatabaseAdminPage.tsx`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Batch 2b: Interaction Pattern Consistency
|
||||||
|
|
||||||
|
**Effort:** 2 days
|
||||||
|
|
||||||
|
Reference: `audit/interaction-patterns-findings.md`
|
||||||
|
|
||||||
|
### 2b.1 AppConfigDetailPage Button Order Reversed (HIGH)
|
||||||
|
|
||||||
|
**Problem:** Save|Cancel order (lines 311-315), reversed from every other form. Save button has no `variant="primary"`.
|
||||||
|
|
||||||
|
**Fix:** Swap to Cancel (ghost, left) | Save (primary, right).
|
||||||
|
|
||||||
|
**Files:** `pages/Admin/AppConfigDetailPage.tsx:311-315`
|
||||||
|
|
||||||
|
### 2b.2 Deployment Stop Needs Confirmation (HIGH)
|
||||||
|
|
||||||
|
**Problem:** `AppsTab.tsx:672` — stopping a running deployment is immediate. Route Stop/Suspend uses ConfirmDialog.
|
||||||
|
|
||||||
|
**Fix:** Add `ConfirmDialog`: "Stop deployment for {appName}? This will take the service offline." Type-to-confirm with app slug.
|
||||||
|
|
||||||
|
**Files:** `pages/AppsTab/AppsTab.tsx:672`
|
||||||
|
|
||||||
|
### 2b.3 Tap Deletion Inconsistency (HIGH)
|
||||||
|
|
||||||
|
**Problem:** `TapConfigModal.tsx:117` — delete is immediate. `RouteDetail.tsx:992` — shows ConfirmDialog.
|
||||||
|
|
||||||
|
**Fix:** Add ConfirmDialog to TapConfigModal delete, matching RouteDetail.
|
||||||
|
|
||||||
|
**Files:** `components/TapConfigModal.tsx:117`
|
||||||
|
|
||||||
|
### 2b.4 Kill Query Unguarded (HIGH)
|
||||||
|
|
||||||
|
**Problem:** `DatabaseAdminPage.tsx:30` — no confirmation, no toast.
|
||||||
|
|
||||||
|
**Fix:** Add AlertDialog ("Kill query {pid}?") and success/error toast.
|
||||||
|
|
||||||
|
**Files:** `pages/Admin/DatabaseAdminPage.tsx:30`
|
||||||
|
|
||||||
|
### 2b.5 Role Removal From User Unguarded (MEDIUM)
|
||||||
|
|
||||||
|
**Problem:** `UsersTab.tsx:504-528` — role removal is immediate. Group removal shows AlertDialog.
|
||||||
|
|
||||||
|
**Fix:** Add AlertDialog for role removal: "Remove role {name}? This may revoke access. Continue?" matching group removal pattern.
|
||||||
|
|
||||||
|
**Files:** `pages/Admin/UsersTab.tsx:504-528`
|
||||||
|
|
||||||
|
### 2b.6 Cancel Button Variant Standardization (MEDIUM)
|
||||||
|
|
||||||
|
**Problem:** Create forms use `variant="ghost"`. Modal dialogs (TapConfigModal, RouteDetail) use `variant="secondary"`.
|
||||||
|
|
||||||
|
**Fix:** Standardize Cancel = `ghost` everywhere.
|
||||||
|
|
||||||
|
**Files:** `components/TapConfigModal.tsx:255`, `pages/Routes/RouteDetail.tsx` (tap modal footer)
|
||||||
|
|
||||||
|
### 2b.7 OIDC Always-Editable Deviation (MEDIUM)
|
||||||
|
|
||||||
|
**Problem:** Only admin form without Edit mode toggle or Cancel button. No way to discard changes.
|
||||||
|
|
||||||
|
**Fix:** Add explicit Edit mode with Cancel/Save, matching Environment resource editing and AppConfigDetail patterns. Show read-only view by default, Edit button to enter edit mode.
|
||||||
|
|
||||||
|
**Files:** `pages/Admin/OidcConfigPage.tsx`
|
||||||
|
|
||||||
|
### 2b.8 ConfirmDialog Missing `loading` Prop (MEDIUM)
|
||||||
|
|
||||||
|
**Problem:** `OidcConfigPage.tsx:258` and `RouteDetail.tsx:992` — no `loading` prop (all others have it).
|
||||||
|
|
||||||
|
**Fix:** Add `loading={mutation.isPending}` to both.
|
||||||
|
|
||||||
|
**Files:** `pages/Admin/OidcConfigPage.tsx:258`, `pages/Routes/RouteDetail.tsx:992`
|
||||||
|
|
||||||
|
### 2b.9 Loading State Standardization (MEDIUM)
|
||||||
|
|
||||||
|
**Problem:** Mix of `Spinner size="md"`, `Spinner size="lg"`, `PageLoader`, and `null`.
|
||||||
|
|
||||||
|
**Fix:** Use `PageLoader` for all full-page loading states. Replace bare `<Spinner size="md" />` returns in UsersTab, GroupsTab, RolesTab, EnvironmentsPage, AppListView, AppDetailView with `<PageLoader />`. Fix OidcConfigPage returning `null`.
|
||||||
|
|
||||||
|
**Files:** All admin page files, `pages/Admin/OidcConfigPage.tsx`
|
||||||
|
|
||||||
|
### 2b.10 Error Toast Title Format (MEDIUM)
|
||||||
|
|
||||||
|
**Problem:** RBAC: "Failed to create user" / AppsTab: "Save failed" — two patterns.
|
||||||
|
|
||||||
|
**Fix:** Standardize on "Failed to [verb] [noun]" (more descriptive). Update AppsTab and AppConfigDetailPage error toasts.
|
||||||
|
|
||||||
|
**Files:** `pages/AppsTab/AppsTab.tsx`, `pages/Admin/AppConfigDetailPage.tsx`
|
||||||
|
|
||||||
|
### 2b.11 Empty State Standardization (LOW)
|
||||||
|
|
||||||
|
**Problem:** 5 different approaches. DS `EmptyState` component only used in AgentInstance.
|
||||||
|
|
||||||
|
**Fix:** Replace all `<p className={emptyNote}>`, `<span className={inheritedNote}>`, `<div className={emptyText}>`, and plain text empty states with DS `EmptyState` component or a consistent shared `emptyNote` class with centered, muted styling.
|
||||||
|
|
||||||
|
**Files:** `pages/AppsTab/AppsTab.tsx`, `pages/Admin/*.tsx`, `pages/Routes/RouteDetail.tsx`
|
||||||
|
|
||||||
|
### 2b.12 Unsaved Changes Indicator (LOW)
|
||||||
|
|
||||||
|
**Problem:** Only AppsTab ConfigSubTab has the banner pattern.
|
||||||
|
|
||||||
|
**Fix:** Add unsaved-changes indicator to:
|
||||||
|
- `AppConfigDetailPage.tsx` — reuse banner pattern from ConfigSubTab
|
||||||
|
- `EnvironmentsPage.tsx` — resource editing and JAR retention sections
|
||||||
|
- `OidcConfigPage.tsx` — after adding Edit mode (2b.7)
|
||||||
|
|
||||||
|
### 2b.13 Save Button Loading State (LOW)
|
||||||
|
|
||||||
|
**Problem:** `AppConfigDetailPage.tsx:313` shows "Saving..." text instead of Button's `loading` prop.
|
||||||
|
|
||||||
|
**Fix:** Use `loading={isPending}` on Button (shows spinner, matches all other save buttons).
|
||||||
|
|
||||||
|
**Files:** `pages/Admin/AppConfigDetailPage.tsx:313`
|
||||||
|
|
||||||
|
### 2b.14 OIDC Dual Error Display (LOW)
|
||||||
|
|
||||||
|
**Problem:** Shows both toast AND inline Alert on error. No other page does this.
|
||||||
|
|
||||||
|
**Fix:** Remove the inline Alert. Use toast only, matching all other pages. Or remove the toast and keep only the inline Alert (useful for form context). Pick one — don't show both.
|
||||||
|
|
||||||
|
**Files:** `pages/Admin/OidcConfigPage.tsx:92,139`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Batch 3: Contrast & Readability
|
||||||
|
|
||||||
|
**Effort:** 1 day
|
||||||
|
|
||||||
|
Reference: `UI_FINDINGS.md` cross-cutting issues
|
||||||
|
|
||||||
|
### 3.1 WCAG AA Fix for `--text-muted`
|
||||||
|
|
||||||
|
**Problem:** Fails WCAG AA in both modes. Light: #9C9184 on #FFFFFF = ~3.0:1. Dark: #7A7068 on #242019 = ~2.9:1.
|
||||||
|
|
||||||
|
**Fix:** Change design system token values:
|
||||||
|
- Light mode: `--text-muted: #766A5E` (achieves 4.5:1)
|
||||||
|
- Dark mode: `--text-muted: #9A9088` (achieves 4.5:1)
|
||||||
|
|
||||||
|
Single highest-impact fix — affects every page.
|
||||||
|
|
||||||
|
**Files:** Design system CSS variables (light and dark theme definitions)
|
||||||
|
|
||||||
|
### 3.2 WCAG AA Fix for `--text-faint`
|
||||||
|
|
||||||
|
**Problem:** Dark mode #4A4238 on #242019 = 1.4:1 — essentially invisible.
|
||||||
|
|
||||||
|
**Fix:** Restrict `--text-faint` to decorative use only (borders, dividers), or change dark mode value to `#6A6058` (achieves 3:1 minimum). Audit all usages and replace any `--text-faint` on readable text with `--text-muted`.
|
||||||
|
|
||||||
|
**Files:** Design system CSS variables, all files using `--text-faint`
|
||||||
|
|
||||||
|
### 3.3 Font Size Floor
|
||||||
|
|
||||||
|
**Problem:** 10px text used for StatCard labels, overview labels, chain labels, section meta, sidebar tree labels. 11px for table meta, error messages, pagination, toggle buttons, chart titles.
|
||||||
|
|
||||||
|
**Fix:** Establish `--font-size-min: 12px`. Update all 10px and 11px instances to 12px minimum. Grep for `font-size: 10px` and `font-size: 11px` across all CSS modules.
|
||||||
|
|
||||||
|
**Files:** All CSS modules containing sub-12px font sizes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Batch 4: Data Formatting & Terminology
|
||||||
|
|
||||||
|
**Effort:** 2 days
|
||||||
|
|
||||||
|
### 4.1 Exchange ID Truncation
|
||||||
|
|
||||||
|
**Problem:** 33-char hex dominates the table (e.g., `96E395B0088AA6D-000000000001E75C`).
|
||||||
|
|
||||||
|
**Fix:**
|
||||||
|
- Show last 8 chars with ellipsis: `...0001E75C`
|
||||||
|
- Full ID on hover tooltip
|
||||||
|
- Copy-to-clipboard on click (show brief "Copied" indicator)
|
||||||
|
- Apply to: exchange table, detail breadcrumb, command palette results
|
||||||
|
|
||||||
|
### 4.2 Attributes Column
|
||||||
|
|
||||||
|
**Problem:** Always shows "---" for every row.
|
||||||
|
|
||||||
|
**Fix:** Hide the column when all rows in the current result set have no attributes. Show as colored badges when populated (infrastructure exists in `attribute-color.ts`).
|
||||||
|
|
||||||
|
### 4.3 Status Terminology
|
||||||
|
|
||||||
|
**Problem:** "OK/ERR" in exchange table vs "COMPLETED/FAILED" in detail panel.
|
||||||
|
|
||||||
|
**Fix:** Standardize on the table convention (OK/WARN/ERR) everywhere. Update the detail panel's status display.
|
||||||
|
|
||||||
|
### 4.4 Agent Name Truncation
|
||||||
|
|
||||||
|
**Problem:** Raw K8s pod names like `8c0affadb860-1` or `cameleer3-backend-7c778f488c-2c2pc-1`.
|
||||||
|
|
||||||
|
**Fix:**
|
||||||
|
- Use agent `displayName` if set at registration
|
||||||
|
- Otherwise extract a short identifier (strip common prefix, show unique suffix)
|
||||||
|
- Full name in hover tooltip
|
||||||
|
- Apply to: exchange table Agent column, Runtime agent list
|
||||||
|
|
||||||
|
### 4.5 Duration Formatting
|
||||||
|
|
||||||
|
**Problem:** P99 "6695ms" should be "6.7s"; raw "321s" should be "5m 21s".
|
||||||
|
|
||||||
|
**Fix:** Create/extend shared duration formatter:
|
||||||
|
- `< 1000ms` -> `Xms` (e.g., "178ms")
|
||||||
|
- `1000ms-59999ms` -> `X.Xs` (e.g., "6.7s")
|
||||||
|
- `>= 60000ms` -> `Xm Ys` (e.g., "5m 21s")
|
||||||
|
|
||||||
|
Apply to: KPI strip, exchange table, exchange detail, dashboard route table, agent detail.
|
||||||
|
|
||||||
|
### 4.6 Number Formatting
|
||||||
|
|
||||||
|
**Problem:** Locale-specific decimals ("1.050" ambiguous), inconsistent unit spacing.
|
||||||
|
|
||||||
|
**Fix:** Use `Intl.NumberFormat` with explicit locale handling. Always put space before unit: "6.7 s", "1.9 %", "7.1 msg/s". Use K/M suffixes consistently for large numbers.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Batch 5: Chart & Visualization Fixes
|
||||||
|
|
||||||
|
**Effort:** 1 day
|
||||||
|
|
||||||
|
### 5.1 Agent Throughput Y-axis
|
||||||
|
|
||||||
|
**Problem:** 2 msg/s data on 1.2k scale — flat line.
|
||||||
|
|
||||||
|
**Fix:** Auto-scale Y-axis to data range with ~20% headroom. Apply to all 6 agent charts.
|
||||||
|
|
||||||
|
**Files:** `pages/AgentInstance/AgentInstance.tsx`
|
||||||
|
|
||||||
|
### 5.2 Agent Error Rate Unit Mismatch
|
||||||
|
|
||||||
|
**Problem:** Chart shows "err/h", KPI shows "%".
|
||||||
|
|
||||||
|
**Fix:** Standardize units. If KPI shows %, chart should show %.
|
||||||
|
|
||||||
|
### 5.3 Agent Memory Reference Line
|
||||||
|
|
||||||
|
**Problem:** Y-axis goes to 68 MB but max heap is 124 MB.
|
||||||
|
|
||||||
|
**Fix:** Add a reference/threshold line at max heap so users see how close memory is to the limit.
|
||||||
|
|
||||||
|
### 5.4 Agent State "UNKNOWN"
|
||||||
|
|
||||||
|
**Problem:** Shown alongside "LIVE" — confusing dual state.
|
||||||
|
|
||||||
|
**Fix:** If UNKNOWN is a secondary state field, either hide when primary state is LIVE, or label clearly: "Container: Unknown".
|
||||||
|
|
||||||
|
### 5.5 Dashboard Table Pointer Events
|
||||||
|
|
||||||
|
**Problem:** `_tableSection` and `_chartGrid` divs intercept pointer events on Application Health table rows.
|
||||||
|
|
||||||
|
**Fix:** Fix z-index/pointer-events so table rows receive click events correctly.
|
||||||
|
|
||||||
|
**Files:** `pages/DashboardTab/DashboardTab.module.css`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Batch 6: Admin Polish
|
||||||
|
|
||||||
|
**Effort:** 2 days
|
||||||
|
|
||||||
|
### 6.1 Error Toasts Surface API Details
|
||||||
|
|
||||||
|
**Problem:** All API error handlers show generic "Failed to X" without the response body message.
|
||||||
|
|
||||||
|
**Fix:** Extract response body message in all API error handlers and include in toast description. Fallback to generic only when body is empty.
|
||||||
|
|
||||||
|
### 6.2 Unicode Escape in Roles
|
||||||
|
|
||||||
|
**Problem:** Role descriptions show `\u00b7` literally.
|
||||||
|
|
||||||
|
**Fix:** Decode unicode escapes in the role description strings. Either fix at the backend (return actual character) or frontend (decode before render).
|
||||||
|
|
||||||
|
**Files:** `pages/Admin/RolesTab.tsx`, potentially backend `RoleAdminController`
|
||||||
|
|
||||||
|
### 6.3 Password Confirmation Field
|
||||||
|
|
||||||
|
**Problem:** User creation form has no password confirmation.
|
||||||
|
|
||||||
|
**Fix:** Add "Confirm Password" field below Password. Inline validation error if mismatch. Show password policy hint: "Min 12 characters, 3 of 4: uppercase, lowercase, number, special".
|
||||||
|
|
||||||
|
**Files:** `pages/Admin/UsersTab.tsx`
|
||||||
|
|
||||||
|
### 6.4 Platform Label/Value Spacing
|
||||||
|
|
||||||
|
**Problem:** "Slugdefault", "Max Agents3", "Issued8. April 2026" — missing separators.
|
||||||
|
|
||||||
|
**Fix:** Fix the SaaS platform components that render key-value pairs. Add proper layout (colon + space, or definition list).
|
||||||
|
|
||||||
|
**Files:** SaaS platform UI (likely in `cameleer-saas` repo)
|
||||||
|
|
||||||
|
### 6.5 License Badge Colors
|
||||||
|
|
||||||
|
**Problem:** DISABLED features use red badges — looks like errors.
|
||||||
|
|
||||||
|
**Fix:** Change from `--error` (red) to neutral gray/muted for "not included in plan". Reserve red for "broken"/"failed".
|
||||||
|
|
||||||
|
**Files:** SaaS platform UI (license page component)
|
||||||
|
|
||||||
|
### 6.6 OIDC Client Secret Masking
|
||||||
|
|
||||||
|
**Problem:** Plain text input for sensitive field.
|
||||||
|
|
||||||
|
**Fix:** Change to `type="password"` with a show/hide toggle button.
|
||||||
|
|
||||||
|
**Files:** `pages/Admin/OidcConfigPage.tsx`
|
||||||
|
|
||||||
|
### 6.7 Audit Log Export
|
||||||
|
|
||||||
|
**Problem:** No export functionality for compliance.
|
||||||
|
|
||||||
|
**Fix:** Add export button to audit log header: CSV (current page, client-side) and CSV (all matching, server-side streaming). Filename: `cameleer-audit-YYYY-MM-DDTHH-MM.csv`.
|
||||||
|
|
||||||
|
**Files:** `pages/Admin/AuditLogPage.tsx`, new backend endpoint with `Accept: text/csv`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Batch 7: Nice-to-Have Polish
|
||||||
|
|
||||||
|
**Effort:** 1-2 days
|
||||||
|
|
||||||
|
Lower priority, implement time-permitting:
|
||||||
|
|
||||||
|
| # | Item | File(s) |
|
||||||
|
|---|------|---------|
|
||||||
|
| 7.1 | Breadcrumb update when exchange selected | `ExchangesPage.tsx` |
|
||||||
|
| 7.2 | Explicit close/back button on exchange detail panel | `ExchangesPage.tsx` |
|
||||||
|
| 7.3 | Command palette: update category counts when search filters | Command palette component |
|
||||||
|
| 7.4 | Command palette: truncate exchange IDs | Command palette component |
|
||||||
|
| 7.5 | 7-Day Pattern heatmap: show "Insufficient data" when < 2 days | `DashboardTab` |
|
||||||
|
| 7.6 | Deployment list: show status badges per row | `AppsTab.tsx` |
|
||||||
|
| 7.7 | SplitPane empty state placeholders: add icon + centered styling | DS `SplitPane` or per-page |
|
||||||
|
| 7.8 | App deletion: make "Delete App" button more discoverable | `AppsTab.tsx` |
|
||||||
|
| 7.9 | Audit log: expandable rows for event detail | `AuditLogPage.tsx` |
|
||||||
|
| 7.10 | ConfirmDialog `confirmText` convention: standardize on display name | All ConfirmDialog usages |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Implementation Order
|
||||||
|
|
||||||
|
| Order | Batch | Items | Effort | Impact |
|
||||||
|
|-------|-------|-------|--------|--------|
|
||||||
|
| 1 | **Batch 1: Critical Bugs** | 4 | 1 day | Fixes broken functionality |
|
||||||
|
| 2 | **Batch 2a: Layout Consistency** | 7 | 2 days | Visual coherence |
|
||||||
|
| 3 | **Batch 2b: Interaction Consistency** | 14 | 2 days | Behavioral coherence |
|
||||||
|
| 4 | **Batch 3: Contrast & Readability** | 3 | 1 day | WCAG compliance |
|
||||||
|
| 5 | **Batch 4: Data Formatting** | 6 | 2 days | Exchange table transformation |
|
||||||
|
| 6 | **Batch 5: Chart Fixes** | 5 | 1 day | Agent detail usability |
|
||||||
|
| 7 | **Batch 6: Admin Polish** | 7 | 2 days | Form UX and error handling |
|
||||||
|
| 8 | **Batch 7: Nice-to-Have** | 10 | 1-2 days | Final polish |
|
||||||
|
|
||||||
|
**Total: ~52 items across 8 batches, ~12-14 days of work.**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Related Issues
|
||||||
|
|
||||||
|
| Issue | Relevance |
|
||||||
|
|-------|-----------|
|
||||||
|
| #100 | Epic: UX Audit PMF Readiness — this spec covers polish/bugs only, not feature work |
|
||||||
|
| #105 | Exchange table readability — covered by Batch 4 (4.1-4.4) |
|
||||||
|
| #110 | Time/locale formatting — covered by Batch 4 (4.5-4.6) |
|
||||||
|
| #107 | Data export — partially covered by Batch 6 (6.7 audit log export) |
|
||||||
|
| #82 | Non-admin user experience — not covered (feature work) |
|
||||||
|
| #90 | Backend gaps — not covered (feature work) |
|
||||||
|
|
||||||
|
## Appendix: Design System Reference Patterns
|
||||||
|
|
||||||
|
**Correct table pattern** (Audit Log, ClickHouse, Dashboard L2/L3):
|
||||||
|
```tsx
|
||||||
|
import tableStyles from '../../styles/table-section.module.css';
|
||||||
|
|
||||||
|
<div className={tableStyles.tableSection}>
|
||||||
|
<div className={tableStyles.tableHeader}>
|
||||||
|
<span className={tableStyles.tableTitle}>Title</span>
|
||||||
|
<span className={tableStyles.tableMeta}>meta</span>
|
||||||
|
</div>
|
||||||
|
<DataTable ... />
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Correct form section pattern** (OIDC, AppConfigDetail):
|
||||||
|
```tsx
|
||||||
|
import sectionStyles from '../../styles/section-card.module.css';
|
||||||
|
|
||||||
|
<div className={sectionStyles.section}>
|
||||||
|
<SectionHeader>Section Title</SectionHeader>
|
||||||
|
{/* form controls */}
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Correct button order** (all create/edit forms):
|
||||||
|
```tsx
|
||||||
|
<div className={styles.actions}>
|
||||||
|
<Button variant="ghost" size="sm" onClick={onCancel}>Cancel</Button>
|
||||||
|
<Button variant="primary" size="sm" onClick={onSubmit}>Save</Button>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Correct loading state:**
|
||||||
|
```tsx
|
||||||
|
import { PageLoader } from '../../components/PageLoader';
|
||||||
|
|
||||||
|
if (isLoading) return <PageLoader />;
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user