Files
cameleer-server/audit/admin-lifecycle-findings.md
hsiegeln 4ea8bb368a 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>
2026-04-09 18:00:50 +02:00

16 KiB

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)