openclaw - 💡(How to fix) Fix Channel dashboard is laggy and not end-user friendly — perf + UX overhaul [1 participants]

Summary

The Channel dashboard (ui/src/ui/views/channels.ts and related modules) becomes sluggish with multiple accounts/channels, and its layout leads with developer/debug surfaces (raw JSON snapshots, full config schema trees) that overwhelm non-technical end users. This issue tracks both the performance regressions and a UX redesign toward an end-user-friendly experience.

Performance gaps

All references are repo-root relative.

1. Pretty-printed JSON snapshot rendered inline every render — ui/src/ui/views/channels.ts:89 calls JSON.stringify(props.snapshot, null, 2). Snapshots grow to 100+KB for typical multi-account setups and this blocks the render thread.
2. Relative timestamps recomputed on every render with no shared tick — ui/src/ui/views/channels.ts:82, :84, :305. Each card re-runs `formatRelativeTimestamp()` on every parent render.
3. `resolveChannelMetaMap()` rebuilt per channel lookup — ui/src/ui/views/channels.ts:240-243. Iterates `snapshot.channelMeta` and rebuilds an object for every label lookup (~8× per render).
4. Full recursive config-form tree rendered for every channel — ui/src/ui/views/config-form.node.ts:405-449 (also 513, 973, 1127, 1320). No virtualization, no lazy loading; 8 channels × deep schema walk per render.
5. `JSON.stringify(value, null, 2)` in config field renderer — ui/src/ui/views/config-form.node.ts:27. Pretty-prints every field value on every render.
6. O(accounts) linear search per channel — ui/src/ui/views/channels.shared.ts:30-40 (`resolveDefaultChannelAccount`). Called per channel without an `accountsById` index.
7. `hasRecentActivity()` called 2–3× per account — ui/src/ui/views/channels.ts:247, :259, :273. `deriveRunningStatus()` and `deriveConnectedStatus()` each recompute it.
8. Unmemoized `.toSorted()` per render — ui/src/ui/views/channels.ts:44-56. Sort runs even when inputs are unchanged.
9. `analyzeConfigSchema(schema)` recomputed per channel per render — ui/src/ui/views/channels.config.ts:86. ~278 lines of schema walking, not memoized.

Proposed technical fixes

Quick wins (#1, #3, #5, #6) alone should cut dashboard lag substantially on accounts-heavy setups.

UX gaps (end-user perspective)

• Page leads with debug surfaces (raw JSON snapshot, full schema tree) instead of channel status.
• No grouping, no search, no filter — hard to scan with >5 channels or many accounts.
• Config form exposes every internal field at once; intimidating for non-developers.
• Status relies on implicit "recent activity" logic instead of clear Connected / Disconnected / Needs attention states.
• Timestamps drift without a shared tick; users see stale "5m ago" indefinitely.
• No empty / first-run state tuned for non-devs — empty sections look broken.
• No inline guidance linking to the relevant docs page for each channel.
• Color-only status in some spots (accessibility concern).

Proposed UX redesign

Top-level layout — channel card grid

• One card per channel with:
  • Status pill: Connected / Disconnected / Action needed (icon + text + color)
  • Account count and last activity timestamp
  • Primary actions: Connect, Configure, View logs
  • Link to that channel's docs page on `docs.openclaw.ai`

Progressive disclosure

• Config form split into Basic and Advanced tabs; Advanced hidden by default.
• Developer view toggle gates the raw JSON snapshot and low-level schema tree.

Discovery and scanning

• Search + filter bar: filter by channel, status, account name.
• Group by status with an "Action needed" section pinned to the top.

First-run and empty states

• Friendly empty state with a clear CTA ("Connect your first channel") instead of empty tables.
• Per-channel empty state when no accounts are configured.

Batch actions

• Enable/disable, reload, reconnect at the channel level without diving into config.

Accessibility

• Status uses icon + text + color, never color alone.
• Keyboard-navigable card grid and filter bar.

Acceptance criteria

• Dashboard stays responsive (target <16ms render per frame) with 20+ accounts across 8 channels.
• No raw JSON visible by default.
• A non-developer user can identify a broken channel and reach the fix in ≤2 clicks.
• Relative timestamps refresh via a single shared interval, not per-render recomputation.
• Config form does not walk the full schema for collapsed sections.

Notes

This bundles perf and UX because the UX redesign (progressive disclosure, lazy config sections, developer-view toggle) directly removes the most expensive render paths. Splitting into sub-issues is fine if preferred — suggested split: (a) quick perf wins #1/#3/#5/#6, (b) config-form lazy rendering, (c) UX redesign.