cameleer/cameleer-server
1
0
Fork 0
Code Issues 42 Pull Requests Actions Packages Projects Releases Wiki Activity

Epic: UX Audit — PMF Readiness for First Market Offer #100

New Issue
Open
opened 2026-04-01 22:49:51 +02:00 by claude · 1 comment
claude commented 2026-04-01 22:49:51 +02:00
Owner
Copy Link

Context

Comprehensive UX audit of the Cameleer3 web interface conducted 2026-04-01, evaluating readiness for product-market fit. The product is a full-stack Apache Camel observability platform competing with general APM tools (Datadog, Grafana+Tempo, Dynatrace). Self-hosted first, SaaS later. Target: first market offer in ~8 weeks.

Three target personas (all equally important):

  • Integration Developers — debug message flows, trace exchanges, inspect payloads/errors
  • DevOps/Platform Engineers — manage deployments, agent health, route control, config push
  • Engineering Managers / Tech Leads — dashboards, SLA compliance, error trends

Competitive positioning: "General APM tools don't understand Camel. We do." — but the UX must be close enough in quality that teams don't feel like they're downgrading from polished SaaS products.

What's Working Well

The foundation is strong:

  • Process diagram visualization is the killer differentiator — no APM tool shows Camel routes this way
  • Three-tab navigation (Exchanges/Dashboard/Runtime) maps cleanly to three personas
  • Command palette (Ctrl+K) with categorized search is polished
  • Dashboard 3-level drill-down with KPIs, treemaps, punchcard heatmaps — competitive-grade
  • Dark mode is clean and well-implemented
  • Design system gives visual consistency; amber/brown brand is distinctive
  • Route control bar (Start/Stop/Suspend/Resume/Replay) from exchange view — unique differentiator
  • Live auto-refresh with LIVE indicator creates real-time monitoring feel
  • Correlation chain navigation between related exchanges

Child Issues

P0 — Ship Blockers

  • #101 Onboarding & empty state experience
  • #102 Alerting & notification system
  • #103 Shareable links with filter state

P1 — Must Have

  • #104 Log search experience
  • #105 Exchange table readability (IDs, attributes, agent names)
  • #106 Latency outlier investigation path

P2 — Should Have

  • #107 Data export (CSV/JSON)
  • #108 Sidebar consolidation & tab-awareness
  • #109 Dashboard L3 diagram readability
  • #110 Time/locale formatting consistency
  • #111 Pagination & deep result access

P3 — Polish

  • #112 Admin page context separation
  • #113 Runtime "suspended routes" context
  • #114 App Config detail — full page vs. drawer
  • #115 Comparative & historical analysis

Previously Existing (related)

  • #82 Non-admin user landing experience
  • #90 Backend gaps: missing data for full UI parity
  • #65 Format durations/latencies to user locale
  • #53 Route diagram accessibility

Screenshots

Screenshots from audit session are in ux-audit/ directory in the repo (local reference).

Related

## Context Comprehensive UX audit of the Cameleer3 web interface conducted 2026-04-01, evaluating readiness for product-market fit. The product is a full-stack Apache Camel observability platform competing with general APM tools (Datadog, Grafana+Tempo, Dynatrace). Self-hosted first, SaaS later. Target: first market offer in ~8 weeks. **Three target personas (all equally important):** - **Integration Developers** — debug message flows, trace exchanges, inspect payloads/errors - **DevOps/Platform Engineers** — manage deployments, agent health, route control, config push - **Engineering Managers / Tech Leads** — dashboards, SLA compliance, error trends **Competitive positioning:** "General APM tools don't understand Camel. We do." — but the UX must be close enough in quality that teams don't feel like they're downgrading from polished SaaS products. ## What's Working Well The foundation is strong: - **Process diagram visualization** is the killer differentiator — no APM tool shows Camel routes this way - **Three-tab navigation** (Exchanges/Dashboard/Runtime) maps cleanly to three personas - **Command palette** (Ctrl+K) with categorized search is polished - **Dashboard 3-level drill-down** with KPIs, treemaps, punchcard heatmaps — competitive-grade - **Dark mode** is clean and well-implemented - **Design system** gives visual consistency; amber/brown brand is distinctive - **Route control bar** (Start/Stop/Suspend/Resume/Replay) from exchange view — unique differentiator - **Live auto-refresh** with LIVE indicator creates real-time monitoring feel - **Correlation chain** navigation between related exchanges ## Child Issues ### P0 — Ship Blockers - [ ] #101 Onboarding & empty state experience - [ ] #102 Alerting & notification system - [ ] #103 Shareable links with filter state ### P1 — Must Have - [x] #104 Log search experience - [ ] #105 Exchange table readability (IDs, attributes, agent names) - [ ] #106 Latency outlier investigation path ### P2 — Should Have - [ ] #107 Data export (CSV/JSON) - [ ] #108 Sidebar consolidation & tab-awareness - [ ] #109 Dashboard L3 diagram readability - [ ] #110 Time/locale formatting consistency - [ ] #111 Pagination & deep result access ### P3 — Polish - [ ] #112 Admin page context separation - [ ] #113 Runtime "suspended routes" context - [ ] #114 App Config detail — full page vs. drawer - [ ] #115 Comparative & historical analysis ### Previously Existing (related) - [ ] #82 Non-admin user landing experience - [ ] #90 Backend gaps: missing data for full UI parity - [ ] #65 Format durations/latencies to user locale - [ ] #53 Route diagram accessibility ## Screenshots Screenshots from audit session are in `ux-audit/` directory in the repo (local reference). ## Related - SaaS vision: cameleer/cameleer-saas#6 (Observability Integration) - SaaS frontend: cameleer/cameleer-saas#31 (React Shell) - SaaS moat: cameleer/cameleer-saas#13 (Exchange Replay)
claude added the uxpmfepic labels 2026-04-01 22:49:51 +02:00
claude commented 2026-04-09 17:31:40 +02:00
Author
Owner
Copy Link

Live UI Audit — 2026-04-09 (build 69dcce2)

Comprehensive Playwright-driven audit of the live installation. 60+ screenshots, every page tested including object CRUD lifecycles.

New Critical Bugs Found (not in original audit)

  1. SSE Navigation Bug — 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. Observed repeatedly across RBAC, OIDC, and Environments pages.

  2. User creation fails silently in OIDC mode — UserAdminController.createUser() returns empty HTTP 400 when OIDC is enabled, but the UI still shows the "+ Add user" button and full form. Toast says "Failed to create user" with no explanation. Either hide the button when OIDC is active or return a descriptive error body.

  3. /server/deployments returns 404 — Direct URL shows unhandled React Router dev error. The Deployments tab lives at /server/apps. Bookmarked/shared URLs break.

  4. GC Pauses chart X-axis — Renders ~60 full ISO-8601 timestamps overlapping into an unreadable block. All other agent charts use concise labels.

New Important Issues Found

  1. Status terminology mismatch — Table shows "OK/ERR", detail panel shows "COMPLETED/FAILED". Pick one convention.
  2. Agent detail chart Y-axis scaling — Throughput shows 2 msg/s data on a 1.2k scale (flat line). Error rate uses "err/h" but KPI uses "%".
  3. Agent state "UNKNOWN" alongside "LIVE" — Confusing dual state indicators.
  4. Dashboard table row click intercepted — CSS z-index/pointer-events issue with _tableSection and _chartGrid divs.
  5. Error toasts lack detail — Generic "Failed to X" with no API error reason surfaced.
  6. Unicode escape \u00b7 literal in role descriptions instead of rendering the middle dot.
  7. No password confirmation field in user creation form.
  8. OIDC form lacks unsaved-changes warning — dangerous for config that can lock out SSO users.
  9. Create App page overwhelming — shows ALL config sub-tabs before app even exists.
  10. Platform label/value spacing — "Slugdefault", "Max Agents3", "Issued8. April 2026" (missing separators).
  11. License DISABLED badges use red — looks like errors, should use neutral color for "not in plan".

Confirmed Fixed Since March 25

  • ✅ OIDC delete confirmation dialog (type-to-confirm "delete oidc") — was Critical #6
  • ✅ Admin page context separation (#112) — sidebar adapts, breadcrumbs correct
  • ✅ Sidebar consolidation (#108) — unified tree with expand/collapse

Still Open From Original Audit

  • All WCAG contrast failures (--text-muted, --text-faint)
  • 10-11px font size floor
  • Number/unit formatting inconsistency
  • Status indicator color-only encoding

Full findings in audit/monitoring-pages-findings.md and audit/admin-lifecycle-findings.md with 60+ screenshots.

## Live UI Audit — 2026-04-09 (build 69dcce2) Comprehensive Playwright-driven audit of the live installation. 60+ screenshots, every page tested including object CRUD lifecycles. ### New Critical Bugs Found (not in original audit) 1. **SSE Navigation Bug** — 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. Observed repeatedly across RBAC, OIDC, and Environments pages. 2. **User creation fails silently in OIDC mode** — `UserAdminController.createUser()` returns empty HTTP 400 when OIDC is enabled, but the UI still shows the "+ Add user" button and full form. Toast says "Failed to create user" with no explanation. Either hide the button when OIDC is active or return a descriptive error body. 3. **`/server/deployments` returns 404** — Direct URL shows unhandled React Router dev error. The Deployments tab lives at `/server/apps`. Bookmarked/shared URLs break. 4. **GC Pauses chart X-axis** — Renders ~60 full ISO-8601 timestamps overlapping into an unreadable block. All other agent charts use concise labels. ### New Important Issues Found 5. **Status terminology mismatch** — Table shows "OK/ERR", detail panel shows "COMPLETED/FAILED". Pick one convention. 6. **Agent detail chart Y-axis scaling** — Throughput shows 2 msg/s data on a 1.2k scale (flat line). Error rate uses "err/h" but KPI uses "%". 7. **Agent state "UNKNOWN" alongside "LIVE"** — Confusing dual state indicators. 8. **Dashboard table row click intercepted** — CSS z-index/pointer-events issue with `_tableSection` and `_chartGrid` divs. 9. **Error toasts lack detail** — Generic "Failed to X" with no API error reason surfaced. 10. **Unicode escape `\u00b7` literal** in role descriptions instead of rendering the middle dot. 11. **No password confirmation field** in user creation form. 12. **OIDC form lacks unsaved-changes warning** — dangerous for config that can lock out SSO users. 13. **Create App page overwhelming** — shows ALL config sub-tabs before app even exists. 14. **Platform label/value spacing** — "Slugdefault", "Max Agents3", "Issued8. April 2026" (missing separators). 15. **License DISABLED badges use red** — looks like errors, should use neutral color for "not in plan". ### Confirmed Fixed Since March 25 - ✅ OIDC delete confirmation dialog (type-to-confirm "delete oidc") — was Critical #6 - ✅ Admin page context separation (#112) — sidebar adapts, breadcrumbs correct - ✅ Sidebar consolidation (#108) — unified tree with expand/collapse ### Still Open From Original Audit - All WCAG contrast failures (`--text-muted`, `--text-faint`) - 10-11px font size floor - Number/unit formatting inconsistency - Status indicator color-only encoding Full findings in `audit/monitoring-pages-findings.md` and `audit/admin-lifecycle-findings.md` with 60+ screenshots.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
accessibility
Accessibility (a11y) improvements
 bug
Something isn't working correctly
 cleanup
Code cleanup, dead code removal, refactoring
 epic
Epic: groups related issues
 feature
New functionality
 pmf
Product-market fit: critical for first market offer
 route-diagram
Route diagram page and execution overlay
 security
Authentication, authorization, RBAC
 ui
Frontend / React UI
 ux
UX/usability improvements
No Label epic pmf ux
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claude
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: cameleer/cameleer-server#100
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?