Skip to content

refactor(frontend): decompose Step2/Step3/Step4 wizard components (each >700 LOC) #586

@arn0ld87

Description

@arn0ld87

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

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions