feat: add onboarding and calibration features to experiments, including UI updates and database schema changes

src/components/CreateExperimentModal.tsx

@@ -15,6 +15,8 @@ export default function CreateExperimentModal({ datasetId }: CreateExperimentMod
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
   const [selectedDatasetId, setSelectedDatasetId] = useState<number | ''>(datasetId || '');
+  const [onboardingEnabled, setOnboardingEnabled] = useState(false);
+  const [calibrationEnabled, setCalibrationEnabled] = useState(false);
   const [loading, setLoading] = useState(false);
   const [datasetsLoading, setDatasetsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -61,11 +63,15 @@ export default function CreateExperimentModal({ datasetId }: CreateExperimentMod
       await createExperiment({ 
         name: name.trim(),
         description: description.trim() || undefined,
-        datasetId: Number(selectedDatasetId)
+        datasetId: Number(selectedDatasetId),
+        onboardingEnabled,
+        calibrationEnabled
       });
       setName('');
       setDescription('');
       setSelectedDatasetId(datasetId || '');
+      setOnboardingEnabled(false);
+      setCalibrationEnabled(false);
       setSuccess(true);
       setTimeout(() => {
         setSuccess(false);
@@ -86,6 +92,8 @@ export default function CreateExperimentModal({ datasetId }: CreateExperimentMod
       setName('');
       setDescription('');
       setSelectedDatasetId(datasetId || '');
+      setOnboardingEnabled(false);
+      setCalibrationEnabled(false);
       setError(null);
       setSuccess(false);
     }
@@ -188,6 +196,34 @@ export default function CreateExperimentModal({ datasetId }: CreateExperimentMod
             </div>
           )}
 
+          <div className="flex items-center">
+            <input
+              id="onboardingEnabled"
+              type="checkbox"
+              checked={onboardingEnabled}
+              onChange={(e) => setOnboardingEnabled(e.target.checked)}
+              className="w-4 h-4 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
+              disabled={loading}
+            />
+            <label htmlFor="onboardingEnabled" className="ml-2 text-sm font-medium text-gray-700">
+              Enable Onboarding
+            </label>
+          </div>
+
+          <div className="flex items-center">
+            <input
+              id="calibrationEnabled"
+              type="checkbox"
+              checked={calibrationEnabled}
+              onChange={(e) => setCalibrationEnabled(e.target.checked)}
+              className="w-4 h-4 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
+              disabled={loading}
+            />
+            <label htmlFor="calibrationEnabled" className="ml-2 text-sm font-medium text-gray-700">
+              Enable Calibration
+            </label>
+          </div>
+
           {error && (
             <div className="p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
               {error}

src/components/EditableExperimentHeader.tsx

@@ -22,6 +22,8 @@ export default function EditableExperimentHeader({
   const [description, setDescription] = useState(experiment.description || '');
   const [annotationTool, setAnnotationTool] = useState(experiment.annotationTool || 'quality-choice');
   const [published, setPublished] = useState(experiment.published || false);
+  const [onboardingEnabled, setOnboardingEnabled] = useState(experiment.onboardingEnabled || false);
+  const [calibrationEnabled, setCalibrationEnabled] = useState(experiment.calibrationEnabled || false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -39,7 +41,9 @@ export default function EditableExperimentHeader({
         name: name.trim(),
         description: description.trim() || undefined,
         annotationTool: annotationTool,
-        published: published
+        published: published,
+        onboardingEnabled: onboardingEnabled,
+        calibrationEnabled: calibrationEnabled
       });
       setIsEditing(false);
     } catch (err) {
@@ -54,6 +58,8 @@ export default function EditableExperimentHeader({
     setAnnotationTool(experiment.annotationTool || 'quality-choice');
     setPublished(experiment.published || false);
     setDescription(experiment.description || '');
+    setOnboardingEnabled(experiment.onboardingEnabled || false);
+    setCalibrationEnabled(experiment.calibrationEnabled || false);
     setError(null);
     setIsEditing(false);
   }
@@ -117,6 +123,34 @@ export default function EditableExperimentHeader({
             </label>
           </div>
 
+          <div className="flex items-center mb-4">
+            <input
+              id="onboardingEnabled"
+              type="checkbox"
+              checked={onboardingEnabled}
+              onChange={(e) => setOnboardingEnabled(e.target.checked)}
+              className="w-4 h-4 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
+              disabled={loading}
+            />
+            <label htmlFor="onboardingEnabled" className="ml-2 text-sm font-medium text-gray-700">
+              Enable Onboarding
+            </label>
+          </div>
+
+          <div className="flex items-center mb-4">
+            <input
+              id="calibrationEnabled"
+              type="checkbox"
+              checked={calibrationEnabled}
+              onChange={(e) => setCalibrationEnabled(e.target.checked)}
+              className="w-4 h-4 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
+              disabled={loading}
+            />
+            <label htmlFor="calibrationEnabled" className="ml-2 text-sm font-medium text-gray-700">
+              Enable Calibration
+            </label>
+          </div>
+
           {error && (
             <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
               {error}
@@ -153,6 +187,9 @@ export default function EditableExperimentHeader({
           <p className="text-sm text-gray-500 mb-4">
             Status: {experiment.published ? 'Published' : 'Draft'}
           </p>
+          <p className="text-sm text-gray-500 mb-4">
+            Onboarding: {experiment.onboardingEnabled ? 'Enabled' : 'Disabled'} | Calibration: {experiment.calibrationEnabled ? 'Enabled' : 'Disabled'}
+          </p>
           <p className="text-sm text-gray-500 mb-4">
             Created: {new Date(experiment.createdAt).toLocaleDateString()} | 
             Updated: {new Date(experiment.updatedAt).toLocaleDateString()}

src/components/OnboardingViews/OnboardingFormView.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useTransition } from 'react';
+import { useEffect, useState, useTransition } from 'react';
 import { useRouter } from 'next/navigation';
 import { saveOnboardingAnswers } from '@/app/actions/onboarding';
 import { DIALECT_LABELS_WITHOUT_DE } from '@/lib/dialects';
@@ -45,6 +45,13 @@ export default function OnboardingFormView({ experimentId }: OnboardingFormViewP
   });
   const [error, setError] = useState<string | null>(null);
 
+  useEffect(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }, [currentStep]);
+
   const handleChange = (field: keyof FormData, value: string) => {
     setFormData((prev) => ({
       ...prev,

src/components/OnboardingViews/OnboardingPhase.tsx

@@ -5,6 +5,13 @@ import { getOnboardingAnswers } from '@/app/actions/onboarding';
 import OnboardingInfoView from './OnboardingInfoView';
 import OnboardingFormView from './OnboardingFormView';
 
+const scrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  });
+};
+
 interface OnboardingPhaseProps {
   experimentId: number;
 }
@@ -49,14 +56,18 @@ export default function OnboardingPhase({ experimentId }: OnboardingPhaseProps)
 
   // Show info page first
   if (showInfoPage) {
+    
     return (
       <OnboardingInfoView
-        onContinue={() => setShowInfoPage(false)}
+        onContinue={() => {
+          scrollToTop();
+          setShowInfoPage(false);
+        }}
         hasExistingAnswers={hasExistingAnswers}
       />
     );
   }
 
-  // Show onboarding form page
+  
   return <OnboardingFormView experimentId={experimentId} />;
 }