refactor: extract sub-components from oversized route/feature files #1150

New issue

Closed

opened 2026-05-14 11:51:46 +00:00 by claude-desktop · 2 comments

claude-desktop commented

2026-05-14 11:51:46 +00:00

Collaborator

As a developer, I want large route and feature files broken into focused sub-components, so that files are readable and changes are isolated.

Files exceeding threshold (> ~800 lines with extractable sub-components)

File	Lines	Issue
`src/routes/onboarding.tsx`	2344	Wizard steps inlined; each step is a standalone component
`src/features/agents/sections.tsx`	1878	Multiple agent-config sections in one file
`src/routes/agents.roster.tsx`	1782	Agent roster + embedded detail panels
`src/routes/settings.agent-types.tsx`	1341	Settings page with inline form logic
`src/features/agent-config/skills-tab.tsx`	1210	Skills tab with repeated helper patterns
`src/features/agent-config/agent-db-skills-tab.tsx`	1192	Near-duplicate of skills-tab structure

Acceptance criteria

Refactor

Each wizard step in onboarding.tsx extracted to src/features/onboarding/steps/ directory
sections.tsx split into one file per section under src/features/agents/sections/
agents.roster.tsx detail panels extracted to src/features/agents/roster/
settings.agent-types.tsx form logic extracted to composable hooks or sub-components
Shared helpers between skills-tab.tsx / agent-db-skills-tab.tsx de-duplicated into a common module
No behaviour changes — pure structural refactor
just qa passes

Tests

Existing tests pass unchanged

Out of scope

Changing component APIs or props
Adding new features during refactor
Files < 800 lines

As a developer, I want large route and feature files broken into focused sub-components, so that files are readable and changes are isolated. ## Files exceeding threshold (> ~800 lines with extractable sub-components) | File | Lines | Issue | |---|---|---| | `src/routes/onboarding.tsx` | 2344 | Wizard steps inlined; each step is a standalone component | | `src/features/agents/sections.tsx` | 1878 | Multiple agent-config sections in one file | | `src/routes/agents.roster.tsx` | 1782 | Agent roster + embedded detail panels | | `src/routes/settings.agent-types.tsx` | 1341 | Settings page with inline form logic | | `src/features/agent-config/skills-tab.tsx` | 1210 | Skills tab with repeated helper patterns | | `src/features/agent-config/agent-db-skills-tab.tsx` | 1192 | Near-duplicate of skills-tab structure | ## Acceptance criteria ### Refactor - [ ] Each wizard step in `onboarding.tsx` extracted to `src/features/onboarding/steps/` directory - [ ] `sections.tsx` split into one file per section under `src/features/agents/sections/` - [ ] `agents.roster.tsx` detail panels extracted to `src/features/agents/roster/` - [ ] `settings.agent-types.tsx` form logic extracted to composable hooks or sub-components - [ ] Shared helpers between `skills-tab.tsx` / `agent-db-skills-tab.tsx` de-duplicated into a common module - [ ] No behaviour changes — pure structural refactor - [ ] `just qa` passes ### Tests - [ ] Existing tests pass unchanged ## Out of scope - Changing component APIs or props - Adding new features during refactor - Files < 800 lines

claude-desktop added the

area:dashboard

type:chore

labels

2026-05-14 11:52:10 +00:00