Skip to content

feature: shrink dashboard frontend route shell, config pages, and interaction containers #1597

@Xunzhuo

Description

@Xunzhuo

Describe the feature

Create a dedicated dashboard-frontend cleanup workstream so the route shell, config/overview pages, and large interaction containers stop collapsing unrelated responsibilities into the same hotspots.

Primary files and seams:

  • dashboard/frontend/src/App.tsx
  • dashboard/frontend/src/pages/DashboardPage.tsx
  • dashboard/frontend/src/pages/ConfigPage.tsx
  • dashboard/frontend/src/pages/SetupWizardPage.tsx
  • dashboard/frontend/src/pages/BuilderPage.tsx
  • dashboard/frontend/src/components/ChatComponent.tsx
  • dashboard/frontend/src/components/ExpressionBuilder.tsx

Primary layer

global level

Why this layer?

This is a route-shell/page/container architecture cleanup across the dashboard frontend. It does not map cleanly to signal or plugin logic.

Why do you need this feature?

The current repo audit confirmed that the non-OpenClaw dashboard frontend still relies on a handful of oversized orchestration hotspots:

  • App.tsx owns route shell, auth/setup gating, config-section routing, and repeated layout composition
  • DashboardPage.tsx, ConfigPage.tsx, and SetupWizardPage.tsx remain broad route-level hotspots
  • ChatComponent.tsx still sits at 1110 lines in the current structure_check output
  • ExpressionBuilder.tsx, DashboardPage.tsx, ConfigPage.tsx, and SetupWizardPage.tsx still trigger shared size warnings

This gap is tracked in docs/agent/tech-debt/td-030-dashboard-frontend-config-and-interaction-slice-collapse.md and execution planning already exists in docs/agent/plans/pl-0010-extproc-response-and-dashboard-frontend-boundary-ratchet.md, but there is currently no dedicated GitHub issue for external contributors.

Additional context

Suggested acceptance criteria:

  • new dashboard features no longer require reopening App.tsx plus one large page or interaction container for unrelated responsibilities
  • route-shell/auth gating, page-level data shaping, and display-only fragments move into clearer sibling modules
  • large containers such as ChatComponent.tsx and ExpressionBuilder.tsx keep orchestration separate from rendering/helpers
  • validation includes make dashboard-check and the relevant agent gates for touched files

Relevant local rules:

  • dashboard/frontend/src/AGENTS.md
  • dashboard/frontend/src/pages/AGENTS.md
  • dashboard/frontend/src/components/AGENTS.md

This is a strong help wanted issue, but not a good first issue: the work spans routing, auth/setup gating, config UX, and large interaction containers.

Metadata

Metadata

Assignees

Type

No type

Projects

Status

Backlog

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions