`, 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 `cameleer-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';

Title meta

``` **Correct form section pattern** (OIDC, AppConfigDetail): ```tsx import sectionStyles from '../../styles/section-card.module.css';

Section Title {/* form controls */}

``` **Correct button order** (all create/edit forms): ```tsx

``` **Correct loading state:** ```tsx import { PageLoader } from '../../components/PageLoader'; if (isLoading) return ; ```