Follow-up to audit master issue #571.
Problem
Four Vue components are over 700 LOC and pack too many responsibilities:
frontend/src/components/Step2EnvSetup.vue — 940 LOC
frontend/src/components/Step3Simulation.vue — 1124 LOC
frontend/src/components/Step4Report.vue — 1010 LOC
frontend/src/views/SettingsView.vue — 847 LOC
Hard to test, review, and refactor. The pattern of extracting sub-components is already established (ReportOutlinePanel at Step4Report.vue:19).
Fix policy
Per file, identify 2–4 cohesive sub-units and extract as child components or composables. Examples:
Step3Simulation.vue → extract <SimulationProgressPanel>, <PersonaActionFeed>, <TimelineControls>.
Step4Report.vue → extract <ReportExportControls>, <EvidenceBindingsPane>, <PersonaQuoteList> (some may already exist; ride existing patterns).
SettingsView.vue → split provider settings, workspace defaults, advanced toggles into tabs.
This is iterative — don't try all four in one PR. Recommend filing this as four sub-issues (one per component) once the approach is locked.
Acceptance criteria
- No component over 600 LOC after the split.
- All existing Vitest specs still pass; new spec per extracted child component.
- No visual regression in workspace (manual e2e: Step1 → Step5 happy path).
- Pinia store usage unchanged (no state-shape drift).
Validation
cd frontend && npm run check
cd frontend && npm test -- --run Step
# manual: npm run dev → walk Step1 → Step5
Risk
Medium. Pure decomposition but touches the user-facing wizard; recommend agora-frontend-worker on Sonnet, one component per PR.
Related
Follow-up to audit master issue #571.
Problem
Four Vue components are over 700 LOC and pack too many responsibilities:
frontend/src/components/Step2EnvSetup.vue— 940 LOCfrontend/src/components/Step3Simulation.vue— 1124 LOCfrontend/src/components/Step4Report.vue— 1010 LOCfrontend/src/views/SettingsView.vue— 847 LOCHard to test, review, and refactor. The pattern of extracting sub-components is already established (
ReportOutlinePanelatStep4Report.vue:19).Fix policy
Per file, identify 2–4 cohesive sub-units and extract as child components or composables. Examples:
Step3Simulation.vue→ extract<SimulationProgressPanel>,<PersonaActionFeed>,<TimelineControls>.Step4Report.vue→ extract<ReportExportControls>,<EvidenceBindingsPane>,<PersonaQuoteList>(some may already exist; ride existing patterns).SettingsView.vue→ split provider settings, workspace defaults, advanced toggles into tabs.This is iterative — don't try all four in one PR. Recommend filing this as four sub-issues (one per component) once the approach is locked.
Acceptance criteria
Validation
Risk
Medium. Pure decomposition but touches the user-facing wizard; recommend
agora-frontend-workeron Sonnet, one component per PR.Related