feat: introduce conditional steps and branching logic to the experiment wizard and designer, along with new core and WoZ plugins.

src/components/experiments/designer/ActionRegistry.ts

@@ -1,13 +1,15 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import type { ActionDefinition } from "~/lib/experiment-designer/types";
+import type { ActionDefinition, ExperimentAction } from "~/lib/experiment-designer/types";
+import corePluginDef from "~/plugins/definitions/hristudio-core.json";
+import wozPluginDef from "~/plugins/definitions/hristudio-woz.json";
 
 /**
  * ActionRegistry
  *
  * Central singleton for loading and serving action definitions from:
- * - Core system action JSON manifests (served from /hristudio-core/plugins/*.json)
+ * - Core system action JSON manifests (hristudio-core, hristudio-woz)
  * - Study-installed plugin action definitions (ROS2 / REST / internal transports)
  *
  * Responsibilities:
@@ -15,12 +17,6 @@ import type { ActionDefinition } from "~/lib/experiment-designer/types";
  * - Provenance retention (core vs plugin, plugin id/version, robot id)
  * - Parameter schema → UI parameter mapping (primitive only for now)
  * - Fallback action population if core load fails (ensures minimal functionality)
- *
- * Notes:
- * - The registry is client-side only (designer runtime); server performs its own
- *   validation & compilation using persisted action instances (never trusts client).
- * - Action IDs for plugins are namespaced: `${plugin.id}.${action.id}`.
- * - Core actions retain their base IDs (e.g., wait, wizard_speak) for clarity.
  */
 export class ActionRegistry {
   private static instance: ActionRegistry;
@@ -31,6 +27,8 @@ export class ActionRegistry {
   private loadedStudyId: string | null = null;
   private listeners = new Set<() => void>();
 
+  private readonly SYSTEM_PLUGIN_IDS = ["hristudio-core", "hristudio-woz"];
+
   static getInstance(): ActionRegistry {
     if (!ActionRegistry.instance) {
       ActionRegistry.instance = new ActionRegistry();
@@ -49,234 +47,18 @@ export class ActionRegistry {
     this.listeners.forEach((listener) => listener());
   }
 
-  /* ---------------- Core Actions ---------------- */
+  /* ---------------- Core / System Actions ---------------- */
 
   async loadCoreActions(): Promise<void> {
     if (this.coreActionsLoaded) return;
 
-    interface CoreBlockParam {
-      id: string;
-      name: string;
-      type: string;
-      placeholder?: string;
-      options?: string[];
-      min?: number;
-      max?: number;
-      value?: string | number | boolean;
-      required?: boolean;
-      description?: string;
-      step?: number;
-    }
+    // Load System Plugins (Core & WoZ)
+    this.registerPluginDefinition(corePluginDef);
+    this.registerPluginDefinition(wozPluginDef);
 
-    interface CoreBlock {
-      id: string;
-      name: string;
-      description?: string;
-      category: string;
-      icon?: string;
-      color?: string;
-      parameters?: CoreBlockParam[];
-      timeoutMs?: number;
-      retryable?: boolean;
-      nestable?: boolean;
-    }
+    console.log(`[ActionRegistry] Loaded system plugins: ${this.SYSTEM_PLUGIN_IDS.join(", ")}`);
 
-    try {
-      const coreActionSets = [
-        "wizard-actions",
-        "control-flow",
-        "observation",
-        "events",
-      ];
-
-      for (const actionSetId of coreActionSets) {
-        try {
-          const response = await fetch(
-            `/hristudio-core/plugins/${actionSetId}.json`,
-          );
-          // Non-blocking skip if not found
-          if (!response.ok) continue;
-
-          const rawActionSet = (await response.json()) as unknown;
-          const actionSet = rawActionSet as { blocks?: CoreBlock[] };
-          if (!actionSet.blocks || !Array.isArray(actionSet.blocks)) continue;
-
-          // Register each block as an ActionDefinition
-          actionSet.blocks.forEach((block) => {
-            if (!block.id || !block.name) return;
-
-            const actionDef: ActionDefinition = {
-              id: block.id,
-              type: block.id,
-              name: block.name,
-              description: block.description ?? "",
-              category: this.mapBlockCategoryToActionCategory(block.category),
-              icon: block.icon ?? "Zap",
-              color: block.color ?? "#6b7280",
-              parameters: (block.parameters ?? []).map((param) => ({
-                id: param.id,
-                name: param.name,
-                type:
-                  (param.type as "text" | "number" | "select" | "boolean") ||
-                  "text",
-                placeholder: param.placeholder,
-                options: param.options,
-                min: param.min,
-                max: param.max,
-                value: param.value,
-                required: param.required !== false,
-                description: param.description,
-                step: param.step,
-              })),
-              source: {
-                kind: "core",
-                baseActionId: block.id,
-              },
-              execution: {
-                transport: "internal",
-                timeoutMs: block.timeoutMs,
-                retryable: block.retryable,
-              },
-              parameterSchemaRaw: {
-                parameters: block.parameters ?? [],
-              },
-              nestable: block.nestable,
-            };
-
-            this.actions.set(actionDef.id, actionDef);
-          });
-        } catch (error) {
-          // Non-fatal: we will fallback later
-          console.warn(`Failed to load core action set ${actionSetId}:`, error);
-        }
-      }
-
-      this.coreActionsLoaded = true;
-      this.notifyListeners();
-    } catch (error) {
-      console.error("Failed to load core actions:", error);
-      this.loadFallbackActions();
-    }
-  }
-
-  private mapBlockCategoryToActionCategory(
-    category: string,
-  ): ActionDefinition["category"] {
-    switch (category) {
-      case "wizard":
-        return "wizard";
-      case "event":
-        return "wizard"; // Events are wizard-initiated triggers
-      case "robot":
-        return "robot";
-      case "control":
-        return "control";
-      case "sensor":
-      case "observation":
-        return "observation";
-      default:
-        return "wizard";
-    }
-  }
-
-  private loadFallbackActions(): void {
-    const fallbackActions: ActionDefinition[] = [
-      {
-        id: "wizard_say",
-        type: "wizard_say",
-        name: "Wizard Says",
-        description: "Wizard speaks to participant",
-        category: "wizard",
-        icon: "MessageSquare",
-        color: "#a855f7",
-        parameters: [
-          {
-            id: "message",
-            name: "Message",
-            type: "text",
-            placeholder: "Hello, participant!",
-            required: true,
-          },
-          {
-            id: "tone",
-            name: "Tone",
-            type: "select",
-            options: ["neutral", "friendly", "encouraging"],
-            value: "neutral",
-          },
-        ],
-        source: { kind: "core", baseActionId: "wizard_say" },
-        execution: { transport: "internal", timeoutMs: 30000 },
-        parameterSchemaRaw: {},
-        nestable: false,
-      },
-      {
-        id: "wait",
-        type: "wait",
-        name: "Wait",
-        description: "Wait for specified time",
-        category: "control",
-        icon: "Clock",
-        color: "#f59e0b",
-        parameters: [
-          {
-            id: "duration",
-            name: "Duration (seconds)",
-            type: "number",
-            min: 0.1,
-            max: 300,
-            value: 2,
-            required: true,
-          },
-        ],
-        source: { kind: "core", baseActionId: "wait" },
-        execution: { transport: "internal", timeoutMs: 60000 },
-        parameterSchemaRaw: {
-          type: "object",
-          properties: {
-            duration: {
-              type: "number",
-              minimum: 0.1,
-              maximum: 300,
-              default: 2,
-            },
-          },
-          required: ["duration"],
-        },
-      },
-      {
-        id: "observe",
-        type: "observe",
-        name: "Observe",
-        description: "Record participant behavior",
-        category: "observation",
-        icon: "Eye",
-        color: "#8b5cf6",
-        parameters: [
-          {
-            id: "behavior",
-            name: "Behavior to observe",
-            type: "select",
-            options: ["facial_expression", "body_language", "verbal_response"],
-            required: true,
-          },
-        ],
-        source: { kind: "core", baseActionId: "observe" },
-        execution: { transport: "internal", timeoutMs: 120000 },
-        parameterSchemaRaw: {
-          type: "object",
-          properties: {
-            behavior: {
-              type: "string",
-              enum: ["facial_expression", "body_language", "verbal_response"],
-            },
-          },
-          required: ["behavior"],
-        },
-      },
-    ];
-
-    fallbackActions.forEach((action) => this.actions.set(action.id, action));
+    this.coreActionsLoaded = true;
     this.notifyListeners();
   }
 
@@ -295,108 +77,133 @@ export class ActionRegistry {
     let totalActionsLoaded = 0;
 
     (studyPlugins ?? []).forEach((plugin) => {
-      const actionDefs = Array.isArray(plugin.actionDefinitions)
-        ? plugin.actionDefinitions
-        : undefined;
-
-      if (!actionDefs) return;
-
-      actionDefs.forEach((action: any) => {
-        const rawCategory =
-          typeof action.category === "string"
-            ? action.category.toLowerCase().trim()
-            : "";
-        const categoryMap: Record<string, ActionDefinition["category"]> = {
-          wizard: "wizard",
-          robot: "robot",
-          control: "control",
-          observation: "observation",
-        };
-        const category = categoryMap[rawCategory] ?? "robot";
-
-        const execution = action.ros2
-          ? {
-            transport: "ros2" as const,
-            timeoutMs: action.timeout,
-            retryable: action.retryable,
-            ros2: {
-              topic: action.ros2.topic,
-              messageType: action.ros2.messageType,
-              service: action.ros2.service,
-              action: action.ros2.action,
-              qos: action.ros2.qos,
-              payloadMapping: action.ros2.payloadMapping,
-            },
-          }
-          : action.rest
-            ? {
-              transport: "rest" as const,
-              timeoutMs: action.timeout,
-              retryable: action.retryable,
-              rest: {
-                method: action.rest.method,
-                path: action.rest.path,
-                headers: action.rest.headers,
-              },
-            }
-            : {
-              transport: "internal" as const,
-              timeoutMs: action.timeout,
-              retryable: action.retryable,
-            };
-
-        // Extract semantic ID from metadata if available, otherwise fall back to database IDs (which typically causes mismatch if seed uses semantic)
-        // Ideally, plugin.metadata.robotId should populate this.
-        const semanticRobotId = plugin.metadata?.robotId || plugin.robotId || plugin.id;
-
-        const actionDef: ActionDefinition = {
-          id: `${semanticRobotId}.${action.id}`,
-          type: `${semanticRobotId}.${action.id}`,
-          name: action.name,
-          description: action.description ?? "",
-          category,
-          icon: action.icon ?? "Bot",
-          color: "#10b981",
-          parameters: this.convertParameterSchemaToParameters(
-            action.parameterSchema,
-          ),
-          source: {
-            kind: "plugin",
-            pluginId: semanticRobotId, // Use semantic ID here too
-            robotId: plugin.robotId,
-            pluginVersion: plugin.version ?? undefined,
-            baseActionId: action.id,
-          },
-          execution,
-          parameterSchemaRaw: action.parameterSchema ?? undefined,
-        };
-        this.actions.set(actionDef.id, actionDef);
-        // Register aliases if provided by plugin metadata
-        const aliases = Array.isArray(action.aliases)
-          ? action.aliases
-          : undefined;
-        if (aliases) {
-          for (const alias of aliases) {
-            if (typeof alias === "string" && alias.trim()) {
-              this.aliasIndex.set(alias, actionDef.id);
-            }
-          }
-        }
-        totalActionsLoaded++;
-      });
+      this.registerPluginDefinition(plugin);
+      totalActionsLoaded += (plugin.actionDefinitions?.length || 0);
     });
 
     console.log(
       `ActionRegistry: Loaded ${totalActionsLoaded} plugin actions for study ${studyId}`,
     );
-    // console.log("Current action registry state:", { totalActions: this.actions.size });
-
 
     this.pluginActionsLoaded = true;
     this.loadedStudyId = studyId;
     this.notifyListeners();
   }
 
+  /* ---------------- Shared Registration Logic ---------------- */
+
+  private registerPluginDefinition(plugin: any) {
+    const actionDefs = Array.isArray(plugin.actionDefinitions)
+      ? plugin.actionDefinitions
+      : undefined;
+
+    if (!actionDefs) return;
+
+    actionDefs.forEach((action: any) => {
+      const rawCategory =
+        typeof action.category === "string"
+          ? action.category.toLowerCase().trim()
+          : "";
+      const categoryMap: Record<string, ActionDefinition["category"]> = {
+        wizard: "wizard",
+        robot: "robot",
+        control: "control",
+        observation: "observation",
+      };
+
+      // Default category based on plugin type or explicit category
+      let category = categoryMap[rawCategory];
+      if (!category) {
+        if (plugin.id === 'hristudio-woz') category = 'wizard';
+        else if (plugin.id === 'hristudio-core') category = 'control';
+        else category = 'robot';
+      }
+
+      const execution = action.ros2
+        ? {
+          transport: "ros2" as const,
+          timeoutMs: action.timeout,
+          retryable: action.retryable,
+          ros2: {
+            topic: action.ros2.topic,
+            messageType: action.ros2.messageType,
+            service: action.ros2.service,
+            action: action.ros2.action,
+            qos: action.ros2.qos,
+            payloadMapping: action.ros2.payloadMapping,
+          },
+        }
+        : action.rest
+          ? {
+            transport: "rest" as const,
+            timeoutMs: action.timeout,
+            retryable: action.retryable,
+            rest: {
+              method: action.rest.method,
+              path: action.rest.path,
+              headers: action.rest.headers,
+            },
+          }
+          : {
+            transport: "internal" as const,
+            timeoutMs: action.timeout,
+            retryable: action.retryable,
+          };
+
+      // Extract semantic ID from metadata if available, otherwise fall back to database IDs
+      // Priority: metadata.robotId > metadata.id (for system plugins) > robotId > id
+      const semanticRobotId =
+        plugin.metadata?.robotId ||
+        plugin.metadata?.id ||
+        plugin.robotId ||
+        plugin.id;
+
+      // For system plugins, we want to keep the short IDs (wait, branch) to avoid breaking existing save data
+      // For robot plugins, we namespace them (nao6-ros2.say_text)
+      const isSystem = this.SYSTEM_PLUGIN_IDS.includes(semanticRobotId);
+      const actionId = isSystem ? action.id : `${semanticRobotId}.${action.id}`;
+      const actionType = actionId; // Type is usually same as ID
+
+      const actionDef: ActionDefinition = {
+        id: actionId,
+        type: actionType,
+        name: action.name,
+        description: action.description ?? "",
+        category,
+        icon: action.icon ?? "Bot",
+        color: action.color || "#10b981",
+        parameters: this.convertParameterSchemaToParameters(
+          action.parameterSchema,
+        ),
+        source: {
+          kind: isSystem ? "core" : "plugin", // Maintain 'core' distinction for UI grouping if needed
+          pluginId: semanticRobotId,
+          robotId: plugin.robotId,
+          pluginVersion: plugin.version ?? undefined,
+          baseActionId: action.id,
+        },
+        execution,
+        parameterSchemaRaw: action.parameterSchema ?? undefined,
+        nestable: action.nestable
+      };
+
+      // Prevent overwriting if it already exists (first-come-first-served, usually core first)
+      if (!this.actions.has(actionId)) {
+        this.actions.set(actionId, actionDef);
+      }
+
+      // Register aliases
+      const aliases = Array.isArray(action.aliases) ? action.aliases : undefined;
+      if (aliases) {
+        for (const alias of aliases) {
+          if (typeof alias === "string" && alias.trim()) {
+            this.aliasIndex.set(alias, actionDef.id);
+          }
+        }
+      }
+    });
+  }
+
   private convertParameterSchemaToParameters(
     parameterSchema: unknown,
   ): ActionDefinition["parameters"] {
@@ -417,7 +224,7 @@ export class ActionRegistry {
     if (!schema?.properties) return [];
 
     return Object.entries(schema.properties).map(([key, paramDef]) => {
-      let type: "text" | "number" | "select" | "boolean" = "text";
+      let type: "text" | "number" | "select" | "boolean" | "json" | "array" = "text";
 
       if (paramDef.type === "number") {
         type = "number";
@@ -425,6 +232,10 @@ export class ActionRegistry {
         type = "boolean";
       } else if (paramDef.enum && Array.isArray(paramDef.enum)) {
         type = "select";
+      } else if (paramDef.type === "array") {
+        type = "array";
+      } else if (paramDef.type === "object") {
+        type = "json";
       }
 
       return {
@@ -444,29 +255,17 @@ export class ActionRegistry {
   private resetPluginActions(): void {
     this.pluginActionsLoaded = false;
     this.loadedStudyId = null;
-    // Remove existing plugin actions (retain known core ids + fallback ids)
-    const pluginActionIds = Array.from(this.actions.keys()).filter(
-      (id) =>
-        !id.startsWith("wizard_") &&
-        !id.startsWith("when_") &&
-        !id.startsWith("wait") &&
-        !id.startsWith("observe") &&
-        !id.startsWith("repeat") &&
-        !id.startsWith("if_") &&
-        !id.startsWith("parallel") &&
-        !id.startsWith("sequence") &&
-        !id.startsWith("random_") &&
-        !id.startsWith("try_") &&
-        !id.startsWith("break") &&
-        !id.startsWith("measure_") &&
-        !id.startsWith("count_") &&
-        !id.startsWith("record_") &&
-        !id.startsWith("capture_") &&
-        !id.startsWith("log_") &&
-        !id.startsWith("survey_") &&
-        !id.startsWith("physiological_"),
-    );
-    pluginActionIds.forEach((id) => this.actions.delete(id));
+
+    // Robust Reset: Remove valid plugin actions, BUT protect system plugins.
+    const idsToDelete: string[] = [];
+    this.actions.forEach((action, id) => {
+      if (action.source.kind === "plugin" && !this.SYSTEM_PLUGIN_IDS.includes(action.source.pluginId || "")) {
+        idsToDelete.push(id);
+      }
+    });
+
+    idsToDelete.forEach((id) => this.actions.delete(id));
+    this.notifyListeners();
   }
 
   /* ---------------- Query Helpers ---------------- */

src/components/experiments/designer/DesignerRoot.tsx

@@ -116,10 +116,21 @@ interface RawExperiment {
 function adaptExistingDesign(exp: RawExperiment): ExperimentDesign | undefined {
   // 1. Prefer database steps (Source of Truth) if valid, to ensure we have the latest
   //    plugin provenance data (which might be missing from stale visualDesign snapshots).
+  // 1. Prefer database steps (Source of Truth) if valid.
   if (Array.isArray(exp.steps) && exp.steps.length > 0) {
     try {
-      // console.log('[DesignerRoot] Hydrating design from Database Steps (Source of Truth)');
-      const dbSteps = convertDatabaseToSteps(exp.steps);
+      // Check if steps are already converted (have trigger property) to avoid double-conversion data loss
+      const firstStep = exp.steps[0] as any;
+      let dbSteps: ExperimentStep[];
+
+      if (firstStep && typeof firstStep === 'object' && 'trigger' in firstStep) {
+        // Already converted by server
+        dbSteps = exp.steps as ExperimentStep[];
+      } else {
+        // Raw DB steps, need conversion
+        dbSteps = convertDatabaseToSteps(exp.steps);
+      }
+
       return {
         id: exp.id,
         name: exp.name,
@@ -129,7 +140,7 @@ function adaptExistingDesign(exp: RawExperiment): ExperimentDesign | undefined {
         lastSaved: new Date(),
       };
     } catch (err) {
-      console.warn('[DesignerRoot] Failed to convert DB steps, falling back to visualDesign:', err);
+      console.warn('[DesignerRoot] Failed to convert/hydrate steps, falling back to visualDesign:', err);
     }
   }
 
@@ -616,6 +627,9 @@ export function DesignerRoot({
       setLastSavedAt(new Date());
       toast.success("Experiment saved");
 
+      // Auto-validate after save to clear "Modified" (drift) status
+      void validateDesign();
+
       console.log('[DesignerRoot] 💾 SAVE complete');
 
       onPersist?.({

src/components/experiments/designer/PropertiesPanel.tsx

@@ -23,6 +23,7 @@ import {
   type ExperimentDesign,
 } from "~/lib/experiment-designer/types";
 import { actionRegistry } from "./ActionRegistry";
+import { Button } from "~/components/ui/button";
 import {
   Settings,
   Zap,
@@ -39,6 +40,9 @@ import {
   Mic,
   Activity,
   Play,
+  Plus,
+  GitBranch,
+  Trash2,
 } from "lucide-react";
 
 /**
@@ -275,35 +279,166 @@ export function PropertiesPanelBase({
           </div>
         </div>
 
-        {/* Parameters */}
-        {def?.parameters.length ? (
+        {/* Branching Configuration (Special Case) */}
+        {selectedAction.type === "branch" ? (
           <div className="space-y-3">
-            <div className="text-muted-foreground text-[10px] tracking-wide uppercase">
-              Parameters
+            <div className="text-muted-foreground text-[10px] tracking-wide uppercase flex justify-between items-center">
+              <span>Branch Options</span>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-5 w-5 p-0"
+                onClick={() => {
+                  const currentOptions = (containingStep.trigger.conditions as any)?.options || [];
+                  onStepUpdate(containingStep.id, {
+                    trigger: {
+                      ...containingStep.trigger,
+                      conditions: {
+                        ...containingStep.trigger.conditions,
+                        options: [
+                          ...currentOptions,
+                          { label: "New Option", nextStepIndex: containingStep.order + 1, variant: "default" }
+                        ]
+                      }
+                    }
+                  });
+                  // Auto-upgrade step type if needed
+                  if (containingStep.type !== "conditional") {
+                    onStepUpdate(containingStep.id, { type: "conditional" });
+                  }
+                }}
+              >
+                <Plus className="h-3.5 w-3.5" />
+              </Button>
             </div>
+
             <div className="space-y-3">
-              {def.parameters.map((param) => (
-                <ParameterEditor
-                  key={param.id}
-                  param={param}
-                  value={selectedAction.parameters[param.id]}
-                  onUpdate={(val) => {
-                    onActionUpdate(containingStep.id, selectedAction.id, {
-                      parameters: {
-                        ...selectedAction.parameters,
-                        [param.id]: val,
-                      },
-                    });
-                  }}
-                  onCommit={() => { }}
-                />
+              {((containingStep.trigger.conditions as any)?.options || []).map((opt: any, idx: number) => (
+                <div key={idx} className="space-y-2 p-2 rounded border bg-muted/50">
+                  <div className="flex gap-2">
+                    <div className="flex-1">
+                      <Label className="text-[10px]">Label</Label>
+                      <Input
+                        value={opt.label}
+                        onChange={(e) => {
+                          const newOpts = [...((containingStep.trigger.conditions as any)?.options || [])];
+                          newOpts[idx] = { ...newOpts[idx], label: e.target.value };
+                          onStepUpdate(containingStep.id, {
+                            trigger: { ...containingStep.trigger, conditions: { ...containingStep.trigger.conditions, options: newOpts } }
+                          });
+                        }}
+                        className="h-7 text-xs"
+                      />
+                    </div>
+                    <div className="w-[80px]">
+                      <Label className="text-[10px]">Target Step</Label>
+                      <Select
+                        value={opt.nextStepId ?? design.steps[opt.nextStepIndex]?.id ?? ""}
+                        onValueChange={(val) => {
+                          const newOpts = [...((containingStep.trigger.conditions as any)?.options || [])];
+                          // Find index for legacy support / display logic if needed
+                          const stepIdx = design.steps.findIndex(s => s.id === val);
+
+                          newOpts[idx] = {
+                            ...newOpts[idx],
+                            nextStepId: val,
+                            nextStepIndex: stepIdx !== -1 ? stepIdx : undefined
+                          };
+
+                          onStepUpdate(containingStep.id, {
+                            trigger: { ...containingStep.trigger, conditions: { ...containingStep.trigger.conditions, options: newOpts } }
+                          });
+                        }}
+                      >
+                        <SelectTrigger className="h-7 text-xs">
+                          <SelectValue placeholder="Select step..." />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {design.steps.map((s) => (
+                            <SelectItem key={s.id} value={s.id} disabled={s.id === containingStep.id}>
+                              {s.order + 1}. {s.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <Select
+                      value={opt.variant || "default"}
+                      onValueChange={(val) => {
+                        const newOpts = [...((containingStep.trigger.conditions as any)?.options || [])];
+                        newOpts[idx] = { ...newOpts[idx], variant: val };
+                        onStepUpdate(containingStep.id, {
+                          trigger: { ...containingStep.trigger, conditions: { ...containingStep.trigger.conditions, options: newOpts } }
+                        });
+                      }}
+                    >
+                      <SelectTrigger className="h-6 w-[120px] text-[10px]">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="default">Default (Next)</SelectItem>
+                        <SelectItem value="destructive">Destructive (Red)</SelectItem>
+                        <SelectItem value="outline">Outline</SelectItem>
+                      </SelectContent>
+                    </Select>
+
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-6 w-6 p-0 text-muted-foreground hover:text-red-500"
+                      onClick={() => {
+                        const newOpts = [...((containingStep.trigger.conditions as any)?.options || [])];
+                        newOpts.splice(idx, 1);
+                        onStepUpdate(containingStep.id, {
+                          trigger: { ...containingStep.trigger, conditions: { ...containingStep.trigger.conditions, options: newOpts } }
+                        });
+                      }}
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+                </div>
               ))}
+              {(!((containingStep.trigger.conditions as any)?.options?.length)) && (
+                <div className="text-center py-4 border border-dashed rounded text-xs text-muted-foreground">
+                  No options defined.<br />Click + to add a branch.
+                </div>
+              )}
             </div>
           </div>
         ) : (
-          <div className="text-muted-foreground text-xs">
-            No parameters for this action.
-          </div>
+          /* Standard Parameters */
+          def?.parameters.length ? (
+            <div className="space-y-3">
+              <div className="text-muted-foreground text-[10px] tracking-wide uppercase">
+                Parameters
+              </div>
+              <div className="space-y-3">
+                {def.parameters.map((param) => (
+                  <ParameterEditor
+                    key={param.id}
+                    param={param}
+                    value={selectedAction.parameters[param.id]}
+                    onUpdate={(val) => {
+                      onActionUpdate(containingStep.id, selectedAction.id, {
+                        parameters: {
+                          ...selectedAction.parameters,
+                          [param.id]: val,
+                        },
+                      });
+                    }}
+                    onCommit={() => { }}
+                  />
+                ))}
+              </div>
+            </div>
+          ) : (
+            <div className="text-muted-foreground text-xs">
+              No parameters for this action.
+            </div>
+          )
         )}
       </div>
     );

src/components/experiments/designer/flow/FlowWorkspace.tsx

@@ -29,6 +29,7 @@ import {
   Trash2,
   GitBranch,
   Edit3,
+  CornerDownRight,
 } from "lucide-react";
 import { cn } from "~/lib/utils";
 import {
@@ -96,6 +97,7 @@ interface StepRowProps {
   registerMeasureRef: (stepId: string, el: HTMLDivElement | null) => void;
   onReorderStep: (stepId: string, direction: 'up' | 'down') => void;
   onReorderAction?: (stepId: string, actionId: string, direction: 'up' | 'down') => void;
+  isChild?: boolean;
 }
 
 function StepRow({
@@ -115,8 +117,10 @@ function StepRow({
   registerMeasureRef,
   onReorderStep,
   onReorderAction,
+  isChild,
 }: StepRowProps) {
   // const step = item.step; // Removed local derivation
+  const allSteps = useDesignerStore((s) => s.steps);
   const insertionProjection = useDesignerStore((s) => s.insertionProjection);
 
   const displayActions = useMemo(() => {
@@ -149,9 +153,17 @@ function StepRow({
     <div style={style} data-step-id={step.id}>
       <div
         ref={(el) => registerMeasureRef(step.id, el)}
-        className="relative px-3 py-4"
+        className={cn(
+          "relative px-3 py-4 transition-all duration-300",
+          isChild && "ml-8 pl-0"
+        )}
         data-step-id={step.id}
       >
+        {isChild && (
+          <div className="absolute left-[-24px] top-8 text-muted-foreground/40">
+            <CornerDownRight className="h-5 w-5" />
+          </div>
+        )}
         <StepDroppableArea stepId={step.id} />
         <div
           className={cn(
@@ -281,6 +293,78 @@ function StepRow({
             </div>
           </div>
 
+
+
+          {/* Conditional Branching Visualization */}
+          {/* Conditional Branching Visualization */}
+          {step.type === "conditional" && (
+            <div className="mx-3 my-3 rounded-md border text-xs" style={{
+              backgroundColor: 'var(--validation-warning-bg)', // Semantic background
+              borderColor: 'var(--validation-warning-border)', // Semantic border
+            }}>
+              <div className="flex items-center gap-2 border-b px-3 py-2 font-medium" style={{
+                borderColor: 'var(--validation-warning-border)',
+                color: 'var(--validation-warning-text)'
+              }}>
+                <GitBranch className="h-3.5 w-3.5" />
+                <span>Branching Logic</span>
+              </div>
+
+              <div className="p-2 space-y-2">
+                {!(step.trigger.conditions as any)?.options?.length ? (
+                  <div className="text-muted-foreground/60 italic text-center py-2 text-[11px]">
+                    No branches configured. Add options in properties.
+                  </div>
+                ) : (
+                  (step.trigger.conditions as any).options.map((opt: any, idx: number) => {
+                    // Resolve ID to name for display
+                    let targetName = "Unlinked";
+                    let targetIndex = -1;
+
+                    if (opt.nextStepId) {
+                      const target = allSteps.find(s => s.id === opt.nextStepId);
+                      if (target) {
+                        targetName = target.name;
+                        targetIndex = target.order;
+                      }
+                    } else if (typeof opt.nextStepIndex === 'number') {
+                      targetIndex = opt.nextStepIndex;
+                      targetName = `Step #${targetIndex + 1}`;
+                    }
+
+                    return (
+                      <div key={idx} className="flex items-center justify-between rounded bg-background/50 shadow-sm border p-2">
+                        <div className="flex items-center gap-2 min-w-0">
+                          <Badge variant="outline" className={cn(
+                            "text-[10px] uppercase font-bold tracking-wider px-1.5 py-0.5 min-w-[70px] justify-center bg-background",
+                            opt.variant === "destructive"
+                              ? "border-red-500/30 text-red-600 dark:text-red-400"
+                              : "border-slate-500/30 text-foreground"
+                          )}>
+                            {opt.label}
+                          </Badge>
+                          <span className="text-muted-foreground text-[10px]">then go to</span>
+                        </div>
+
+                        <div className="flex items-center gap-1.5 text-right min-w-0 max-w-[50%]">
+                          <span className="font-medium truncate text-[11px] block text-foreground" title={targetName}>
+                            {targetName}
+                          </span>
+                          {targetIndex !== -1 && (
+                            <Badge variant="secondary" className="px-1 py-0 h-4 text-[9px] min-w-[20px] justify-center tabular-nums">
+                              #{targetIndex + 1}
+                            </Badge>
+                          )}
+                          <ChevronRight className="h-3 w-3 text-muted-foreground/50 flex-shrink-0" />
+                        </div>
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+            </div>
+          )}
+
           {/* Action List (Collapsible/Virtual content) */}
           {step.expanded && (
             <div className="bg-background/40 min-h-[3rem] space-y-2 p-2 pb-8">
@@ -315,7 +399,7 @@ function StepRow({
           )}
         </div>
       </div>
-    </div>
+    </div >
   );
 }
 
@@ -787,6 +871,21 @@ export function FlowWorkspace({
     return map;
   }, [steps]);
 
+  /* Hierarchy detection for visual indentation */
+  const childStepIds = useMemo(() => {
+    const children = new Set<string>();
+    for (const step of steps) {
+      if (step.type === 'conditional' && (step.trigger.conditions as any)?.options) {
+        for (const opt of (step.trigger.conditions as any).options) {
+          if (opt.nextStepId) {
+            children.add(opt.nextStepId);
+          }
+        }
+      }
+    }
+    return children;
+  }, [steps]);
+
   /* Resize observer for viewport and width changes */
   useLayoutEffect(() => {
     const el = containerRef.current;
@@ -1202,6 +1301,7 @@ export function FlowWorkspace({
                       registerMeasureRef={registerMeasureRef}
                       onReorderStep={handleReorderStep}
                       onReorderAction={handleReorderAction}
+                      isChild={childStepIds.has(vi.step.id)}
                     />
                   ),
               )}

src/components/experiments/designer/state/hashing.ts

@@ -203,8 +203,7 @@ function projectStepForDesign(
     order: step.order,
     trigger: {
       type: step.trigger.type,
-      // Only the sorted keys of conditions (structural presence)
-      conditionKeys: Object.keys(step.trigger.conditions).sort(),
+      conditions: canonicalize(step.trigger.conditions),
     },
     actions: step.actions.map((a) => projectActionForDesign(a, options)),
   };
@@ -267,11 +266,35 @@ export async function computeDesignHash(
   opts: DesignHashOptions = {},
 ): Promise<string> {
   const options = { ...DEFAULT_OPTIONS, ...opts };
-  const projected = steps
-    .slice()
-    .sort((a, b) => a.order - b.order)
-    .map((s) => projectStepForDesign(s, options));
-  return hashObject({ steps: projected });
+
+  // 1. Sort steps first to ensure order independence of input array
+  const sortedSteps = steps.slice().sort((a, b) => a.order - b.order);
+
+  // 2. Map hierarchically (Merkle style)
+  const stepHashes = await Promise.all(sortedSteps.map(async (s) => {
+    // Action hashes
+    const actionHashes = await Promise.all(s.actions.map(a => hashObject(projectActionForDesign(a, options))));
+
+    // Step hash
+    const pStep = {
+      id: s.id,
+      type: s.type,
+      order: s.order,
+      trigger: {
+        type: s.trigger.type,
+        conditions: canonicalize(s.trigger.conditions),
+      },
+      actions: actionHashes,
+      ...(options.includeStepNames ? { name: s.name } : {}),
+    };
+    return hashObject(pStep);
+  }));
+
+  // 3. Aggregate design hash
+  return hashObject({
+    steps: stepHashes,
+    count: steps.length
+  });
 }
 
 /* -------------------------------------------------------------------------- */
@@ -338,7 +361,7 @@ export async function computeIncrementalDesignHash(
       order: step.order,
       trigger: {
         type: step.trigger.type,
-        conditionKeys: Object.keys(step.trigger.conditions).sort(),
+        conditions: canonicalize(step.trigger.conditions),
       },
       actions: step.actions.map((a) => actionHashes.get(a.id) ?? ""),
       ...(options.includeStepNames ? { name: step.name } : {}),

src/components/experiments/designer/state/validators.ts

@@ -53,6 +53,7 @@ export interface ValidationResult {
 // Parallel/conditional/loop execution happens at the ACTION level, not step level
 const VALID_STEP_TYPES: StepType[] = [
   "sequential",
+  "conditional",
 ];
 const VALID_TRIGGER_TYPES: TriggerType[] = [
   "trial_start",
@@ -391,6 +392,34 @@ export function validateParameters(
             }
             break;
 
+          case "array":
+            if (!Array.isArray(value)) {
+              issues.push({
+                severity: "error",
+                message: `Parameter '${paramDef.name}' must be a list/array`,
+                category: "parameter",
+                field,
+                stepId,
+                actionId,
+                suggestion: "Enter a list of values",
+              });
+            }
+            break;
+
+          case "json":
+            if (typeof value !== "object" || value === null) {
+              issues.push({
+                severity: "error",
+                message: `Parameter '${paramDef.name}' must be a valid object`,
+                category: "parameter",
+                field,
+                stepId,
+                actionId,
+                suggestion: "Enter a valid JSON object",
+              });
+            }
+            break;
+
           default:
             // Unknown parameter type
             issues.push({