Wire frontend Wizard to backend API (Step 11)

- analysis-store: add analysisId, isRunning, runError state
- wizard-shell: onSubmit calls uploadFiles → startAnalysis → navigate to results
- Passes all wizard params (peak detection, stats, annotation, pathway) to API

Frontend → Backend → Engine data flow is now complete.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: jiajunagent

packages/frontend/src/components/wizard/wizard-shell.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useRouter } from 'next/navigation';
 import { StepIndicator } from './step-indicator';
 import { StepImport } from './steps/step-import';
 import { StepPeak } from './steps/step-peak';
@@ -10,9 +11,16 @@ import { StepPathway } from './steps/step-pathway';
 import { StepExport } from './steps/step-export';
 import { useAnalysisStore } from '@/stores/analysis-store';
 import { Progress } from '@/components/ui/progress';
+import { uploadFiles, startAnalysis } from '@/lib/api';
 
 export function WizardShell() {
-  const { currentStep, nextStep, prevStep, setStep } = useAnalysisStore();
+  const router = useRouter();
+  const {
+    currentStep, nextStep, prevStep, setStep,
+    files, peakParams, selectedEngine, fcCutoff, pValueCutoff,
+    databases, ms1Ppm, useSirius, pathwayWorkflows, organism,
+    isRunning, setIsRunning, setAnalysisId, setRunError,
+  } = useAnalysisStore();
 
   const progressPercent = Math.round(((currentStep - 1) / 6) * 100);
 
@@ -45,9 +53,52 @@ export function WizardShell() {
         {currentStep === 7 && (
           <StepExport
             onBack={prevStep}
-            onSubmit={() => {
-              // TODO: hook up to startAnalysis API
-              alert('Analysis submitted! (API integration pending)');
+            onSubmit={async () => {
+              try {
+                setIsRunning(true);
+                setRunError(null);
+
+                // Step 1: Upload files
+                const uploadedPaths = await uploadFiles(files);
+
+                // Step 2: Start analysis with all wizard parameters
+                const { id } = await startAnalysis({
+                  peak_detection: {
+                    engine: selectedEngine ?? 'xcms',
+                    ppm: peakParams.ppm,
+                    peakwidth_min: peakParams.peakwidthMin,
+                    peakwidth_max: peakParams.peakwidthMax,
+                    snthresh: peakParams.snthresh,
+                    noise: peakParams.noise,
+                    polarity: 'positive',
+                    deconv_method: 'camera',
+                  },
+                  statistics: {
+                    analysis_type: 'differential',
+                    fc_cutoff: fcCutoff,
+                    p_value_cutoff: pValueCutoff,
+                    fdr_method: 'BH',
+                  },
+                  annotation: {
+                    databases,
+                    ms1_ppm: ms1Ppm,
+                    use_sirius: useSirius,
+                  },
+                  pathway: {
+                    workflows: pathwayWorkflows,
+                    organism,
+                  },
+                  file_paths: uploadedPaths,
+                });
+
+                setAnalysisId(id);
+
+                // Navigate to results page with SSE progress tracking
+                router.push(`/analysis/${id}`);
+              } catch (err) {
+                setRunError(err instanceof Error ? err.message : 'Unknown error');
+                setIsRunning(false);
+              }
             }}
           />
         )}

packages/frontend/src/stores/analysis-store.ts

@@ -96,6 +96,16 @@ interface AnalysisState {
   toggleChartType: (type: string) => void;
   setExportFormat: (format: ExportFormat) => void;
 
+  // Analysis execution state
+  analysisId: string | null;
+  isRunning: boolean;
+  runError: string | null;
+
+  // Actions - Execution
+  setAnalysisId: (id: string | null) => void;
+  setIsRunning: (running: boolean) => void;
+  setRunError: (error: string | null) => void;
+
   // Reset
   reset: () => void;
 }
@@ -140,6 +150,11 @@ export const useAnalysisStore = create<AnalysisState>()(
       chartTypes: ['Volcano', 'PCA', 'Heatmap'],
       exportFormat: 'PDF',
 
+      // Execution state
+      analysisId: null,
+      isRunning: false,
+      runError: null,
+
       // Navigation actions
       setStep: (step) =>
         set({ currentStep: Math.max(1, Math.min(TOTAL_STEPS, step)) }),
@@ -211,6 +226,11 @@ export const useAnalysisStore = create<AnalysisState>()(
         })),
       setExportFormat: (exportFormat) => set({ exportFormat }),
 
+      // Execution actions
+      setAnalysisId: (analysisId) => set({ analysisId }),
+      setIsRunning: (isRunning) => set({ isRunning }),
+      setRunError: (runError) => set({ runError }),
+
       // Reset
       reset: () =>
         set({
@@ -233,6 +253,9 @@ export const useAnalysisStore = create<AnalysisState>()(
           sigThreshold: 0.05,
           chartTypes: ['Volcano', 'PCA', 'Heatmap'],
           exportFormat: 'PDF',
+          analysisId: null,
+          isRunning: false,
+          runError: null,
         }),
     }),
     { name: 'MetaboFlow-Analysis' }