Fix experiment day counter timezone bug and remove metrics selection step

Parse experiment_start as local calendar date instead of UTC midnight to
fix "Day 2 of 30" appearing on creation day for US timezone users. Remove
the metrics picker wizard step — all available metrics are now discovered
dynamically at analysis time from the full METRIC_REGISTRY. The wizard is
simplified to 2 steps with a read-only metric summary on the duration step.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: schwaaamp

mobile/src/app/create-experiment.tsx

@@ -1,10 +1,9 @@
 /**
  * Create Experiment Wizard
  *
- * Multi-step wizard (3 steps) for creating a new self-experiment:
+ * Multi-step wizard (2 steps) for creating a new self-experiment:
  *   Step 1 - Define variable and goal
- *   Step 2 - Choose metrics to track
- *   Step 3 - Set duration, baseline, and reminders
+ *   Step 2 - Set duration, baseline, and reminders (shows tracked metrics read-only)
  */
 
 import React, { useState, useMemo, useCallback } from "react";
@@ -28,22 +27,20 @@ import * as Haptics from "expo-haptics";
 
 import { useColors, ColorPalette } from "@/components/useColors";
 import { ProtectedRoute } from "@/components/ProtectedRoute";
-import MetricPicker from "@/components/Experiments/MetricPicker";
 import ExperimentGuidance from "@/components/Experiments/ExperimentGuidance";
 import { METRIC_REGISTRY } from "@/utils/experiments/metrics";
 import { supabase } from "@/utils/supabaseClient";
 import { requireUserId } from "@/utils/auth/getUserId";
 import useUser from "@/utils/auth/useUser";
-import type { CreateExperimentInput, MetricDefinition } from "@/utils/experiments/types";
+import type { CreateExperimentInput } from "@/utils/experiments/types";
 
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
 
-const TOTAL_STEPS = 3;
+const TOTAL_STEPS = 2;
 const DURATION_OPTIONS = [7, 14, 21, 30] as const;
 const DEFAULT_DURATION = 14;
-const MAX_METRICS = 5;
 
 /**
  * Regex to detect multi-variable phrasing (e.g. "meditate and journal")
@@ -100,9 +97,6 @@ export default function CreateExperimentScreen() {
   const [goalText, setGoalText] = useState("");
 
   // ---- Step 2 state ----
-  const [selectedMetricKeys, setSelectedMetricKeys] = useState<string[]>([]);
-
-  // ---- Step 3 state ----
   const [durationDays, setDurationDays] = useState<number>(DEFAULT_DURATION);
   const [reminderEnabled, setReminderEnabled] = useState(true);
 
@@ -132,26 +126,10 @@ export default function CreateExperimentScreen() {
 
   const experimentStart = today;
 
-  // Show all metrics as available for now (device filtering comes later)
-  const availableMetrics: MetricDefinition[] = METRIC_REGISTRY;
-  const unavailableMetrics: MetricDefinition[] = [];
-
   const styles = useMemo(() => createStyles(colors), [colors]);
 
   // ---- Validation per step ----
   const canAdvanceStep1 = variableDescription.trim().length > 0;
-  const canAdvanceStep2 = selectedMetricKeys.length >= 1;
-
-  // ---- Metric toggle handler ----
-  const handleToggleMetric = useCallback((key: string) => {
-    setSelectedMetricKeys((prev) => {
-      if (prev.includes(key)) {
-        return prev.filter((k) => k !== key);
-      }
-      if (prev.length >= MAX_METRICS) return prev;
-      return [...prev, key];
-    });
-  }, []);
 
   // ---- Navigation helpers ----
   const goNext = useCallback(() => {
@@ -194,22 +172,6 @@ export default function CreateExperimentScreen() {
       if (expError) throw expError;
       if (!experiment) throw new Error("Failed to create experiment");
 
-      // 2. Insert experiment metrics
-      const metricRows = input.metrics.map((m) => ({
-        experiment_id: experiment.id,
-        metric_key: m.metric_key,
-        metric_label: m.metric_label,
-        data_source: m.data_source,
-        aggregation: m.aggregation,
-        unit: m.unit,
-      }));
-
-      const { error: metricsError } = await supabase
-        .from("experiment_metrics")
-        .insert(metricRows);
-
-      if (metricsError) throw metricsError;
-
       return experiment.id as string;
     },
     onSuccess: (experimentId) => {
@@ -234,10 +196,6 @@ export default function CreateExperimentScreen() {
   const handleCreate = useCallback(() => {
     Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
 
-    const selectedMetrics = selectedMetricKeys
-      .map((key) => METRIC_REGISTRY.find((m) => m.key === key))
-      .filter(Boolean) as MetricDefinition[];
-
     const input: CreateExperimentInput = {
       title,
       variable_description: variableDescription.trim(),
@@ -247,13 +205,6 @@ export default function CreateExperimentScreen() {
       baseline_end: toISODate(baselineEnd),
       experiment_start: toISODate(experimentStart),
       reminder_enabled: reminderEnabled,
-      metrics: selectedMetrics.map((m) => ({
-        metric_key: m.key,
-        metric_label: m.label,
-        data_source: m.source,
-        aggregation: m.agg,
-        unit: m.unit,
-      })),
     };
 
     createMutation.mutate(input);
@@ -266,7 +217,6 @@ export default function CreateExperimentScreen() {
     baselineEnd,
     experimentStart,
     reminderEnabled,
-    selectedMetricKeys,
     createMutation,
   ]);
 
@@ -371,42 +321,6 @@ export default function CreateExperimentScreen() {
   );
 
   const renderStep2 = () => (
-    <View>
-      <Text style={styles.stepTitle}>Choose Your Metrics</Text>
-      <Text style={styles.stepSubtitle}>
-        Select 1-{MAX_METRICS} metrics to track during your experiment.
-      </Text>
-
-      <MetricPicker
-        availableMetrics={availableMetrics}
-        unavailableMetrics={unavailableMetrics}
-        selectedKeys={selectedMetricKeys}
-        onToggle={handleToggleMetric}
-        maxSelections={MAX_METRICS}
-      />
-
-      {selectedMetricKeys.length > 0 && (
-        <Text style={styles.selectionCount}>
-          {selectedMetricKeys.length} of {MAX_METRICS} selected
-        </Text>
-      )}
-
-      {/* Next button */}
-      <TouchableOpacity
-        style={[styles.primaryButton, !canAdvanceStep2 && styles.primaryButtonDisabled]}
-        onPress={goNext}
-        disabled={!canAdvanceStep2}
-        accessibilityRole="button"
-        accessibilityLabel="Next step"
-      >
-        <Text style={[styles.primaryButtonText, !canAdvanceStep2 && styles.primaryButtonTextDisabled]}>
-          Next
-        </Text>
-      </TouchableOpacity>
-    </View>
-  );
-
-  const renderStep3 = () => (
     <View>
       <Text style={styles.stepTitle}>Set Duration & Baseline</Text>
       <Text style={styles.stepSubtitle}>
@@ -471,6 +385,21 @@ export default function CreateExperimentScreen() {
         </Text>
       </View>
 
+      {/* Tracked Metrics (read-only) */}
+      <View style={styles.infoCard}>
+        <Text style={styles.infoLabel}>Tracked Metrics</Text>
+        <Text style={styles.infoHint}>
+          All available metrics from your connected devices will be analyzed automatically.
+        </Text>
+        <View style={styles.metricChipRow}>
+          {METRIC_REGISTRY.map((m) => (
+            <View key={m.key} style={styles.metricChip}>
+              <Text style={styles.metricChipText}>{m.label}</Text>
+            </View>
+          ))}
+        </View>
+      </View>
+
       {/* Reminder toggle */}
       <View style={styles.reminderRow}>
         <View style={styles.reminderTextContainer}>
@@ -543,7 +472,6 @@ export default function CreateExperimentScreen() {
           >
             {currentStep === 1 && renderStep1()}
             {currentStep === 2 && renderStep2()}
-            {currentStep === 3 && renderStep3()}
           </ScrollView>
         </KeyboardAvoidingView>
       </SafeAreaView>
@@ -706,13 +634,23 @@ const createStyles = (colors: ColorPalette) =>
       color: colors.text,
     },
 
-    // Metric selection count
-    selectionCount: {
-      fontSize: 13,
-      fontFamily: "Poppins_500Medium",
+    // Metric chips (read-only list)
+    metricChipRow: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: 6,
+      marginTop: 10,
+    },
+    metricChip: {
+      backgroundColor: colors.fieldFill,
+      borderRadius: 6,
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+    },
+    metricChipText: {
+      fontSize: 12,
+      fontFamily: "Poppins_400Regular",
       color: colors.textSecondary,
-      textAlign: "center",
-      marginTop: 12,
     },
 
     // Duration buttons

mobile/src/app/experiment/[id].tsx

@@ -20,6 +20,7 @@ import type { ExperimentResult } from "@/utils/experiments/types";
 import VerdictBanner from "@/components/Experiments/VerdictBanner";
 import MetricResultCard from "@/components/Experiments/MetricResultCard";
 import AdherenceCalendar from "@/components/Experiments/AdherenceCalendar";
+import { METRIC_REGISTRY, getMetricByKey } from "@/utils/experiments/metrics";
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -289,11 +290,11 @@ function ActiveExperimentView({
         </View>
       )}
 
-      {/* Metric Summary Cards */}
-      {experiment.metrics.length > 0 && (
-        <View>
-          <Text style={styles.sectionTitle}>Tracked Metrics</Text>
-          {experiment.metrics.map((metric) => (
+      {/* Tracked Metrics */}
+      <View>
+        <Text style={styles.sectionTitle}>Tracked Metrics</Text>
+        {experiment.metrics.length > 0 ? (
+          experiment.metrics.map((metric) => (
             <View key={metric.id} style={[styles.card, { marginBottom: 8 }]}>
               <Text style={styles.metricName}>{metric.metric_label}</Text>
               {metric.unit && (
@@ -303,9 +304,23 @@ function ActiveExperimentView({
                 Data will be analyzed when the experiment ends.
               </Text>
             </View>
-          ))}
-        </View>
-      )}
+          ))
+        ) : (
+          <View style={[styles.card, { marginBottom: 8 }]}>
+            <Text style={styles.metricName}>All available metrics</Text>
+            <Text style={styles.metricNote}>
+              All metrics from your connected devices will be analyzed automatically when the experiment ends.
+            </Text>
+            <View style={styles.metricChipRow}>
+              {METRIC_REGISTRY.map((m) => (
+                <View key={m.key} style={styles.metricChip}>
+                  <Text style={styles.metricChipText}>{m.label}</Text>
+                </View>
+              ))}
+            </View>
+          </View>
+        )}
+      </View>
 
       {/* Adherence Calendar */}
       <Text style={styles.sectionTitle}>Check-in History</Text>
@@ -533,6 +548,23 @@ const createActiveStyles = (colors: ColorPalette, isDark: boolean) =>
       marginTop: 8,
       fontStyle: "italic",
     },
+    metricChipRow: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: 6,
+      marginTop: 10,
+    },
+    metricChip: {
+      backgroundColor: isDark ? colors.fieldFill : "#F3F4F6",
+      borderRadius: 6,
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+    },
+    metricChipText: {
+      fontSize: 12,
+      fontFamily: "Poppins_400Regular",
+      color: colors.textSecondary,
+    },
     actionsContainer: {
       marginTop: 8,
       gap: 10,
@@ -679,15 +711,17 @@ function CompletedExperimentView({
           <View style={styles.metricCardsList}>
             {results.metric_results.map((mr) => {
               // Find the matching metric definition for a label
-              const metricDef = experiment.metrics.find(
+              // Check experiment_metrics first (backward compat), then fall back to METRIC_REGISTRY
+              const expMetric = experiment.metrics.find(
                 (m) => m.metric_key === mr.metric_key,
               );
+              const registryMetric = getMetricByKey(mr.metric_key);
               return (
                 <MetricResultCard
                   key={mr.metric_key}
                   metricKey={mr.metric_key}
-                  metricLabel={metricDef?.metric_label ?? mr.metric_key}
-                  unit={metricDef?.unit ?? null}
+                  metricLabel={expMetric?.metric_label ?? registryMetric?.label ?? mr.metric_key}
+                  unit={expMetric?.unit ?? registryMetric?.unit ?? null}
                   baselineAvg={mr.baseline_avg}
                   experimentAvg={mr.experiment_avg}
                   changePct={mr.change_pct}

mobile/src/components/Experiments/ExperimentCard.tsx

@@ -20,21 +20,38 @@ export interface ExperimentCardProps {
 }
 
 /**
- * Calculate the current day number of the experiment
+ * Parse a "YYYY-MM-DD" (or ISO timestamp) string as a local-timezone
+ * midnight Date.
+ */
+function parseLocalDate(dateStr: string): Date {
+  const [datePart] = dateStr.split("T");
+  const [year, month, day] = datePart.split("-").map(Number);
+  return new Date(year, month - 1, day);
+}
+
+/**
+ * Calculate the current day number of the experiment.
+ * Uses local dates to avoid UTC timezone offset bugs.
  */
 function getCurrentDay(experimentStart: string): number {
-  const start = new Date(experimentStart);
+  const start = parseLocalDate(experimentStart);
   const now = new Date();
+  now.setHours(0, 0, 0, 0);
   const diffMs = now.getTime() - start.getTime();
-  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+  const diffDays = Math.round(diffMs / (1000 * 60 * 60 * 24));
   return Math.max(1, diffDays + 1);
 }
 
 /**
- * Check if the user has already checked in today
+ * Check if the user has already checked in today.
+ * Uses local date formatting instead of toISOString() which returns UTC.
  */
 function hasCheckedInToday(checkins: ExperimentCheckin[]): boolean {
-  const today = new Date().toISOString().split("T")[0];
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, "0");
+  const day = String(now.getDate()).padStart(2, "0");
+  const today = `${year}-${month}-${day}`;
   return checkins.some((c) => c.checkin_date === today);
 }
 
@@ -89,10 +106,14 @@ export default function ExperimentCard({
       </View>
 
       {/* Metrics summary */}
-      {metrics.length > 0 && (
+      {metrics.length > 0 ? (
         <Text style={styles.metricsText} numberOfLines={1}>
           Tracking: {metrics.map((m) => m.metric_label).join(", ")}
         </Text>
+      ) : (
+        <Text style={styles.metricsText} numberOfLines={1}>
+          Tracking all available metrics
+        </Text>
       )}
 
       {/* Adherence */}