feat(designer): structural refactor scaffold (PanelsContainer, DesignerRoot, ActionLibraryPanel, InspectorPanel, FlowListView, BottomStatusBar)

src/app/(dashboard)/experiments/[id]/designer/page.tsx

@@ -1,5 +1,5 @@
 import { notFound } from "next/navigation";
-import { DesignerShell } from "~/components/experiments/designer/DesignerShell";
+import { DesignerRoot } from "~/components/experiments/designer/DesignerRoot";
 import type { ExperimentStep } from "~/lib/experiment-designer/types";
 import { api } from "~/trpc/server";
 
@@ -44,7 +44,7 @@ export default async function ExperimentDesignerPage({
         : undefined;
 
     return (
-      <DesignerShell
+      <DesignerRoot
         experimentId={experiment.id}
         initialDesign={initialDesign}
       />

src/components/experiments/designer/DesignerRoot.tsx

@@ -0,0 +1,554 @@
+"use client";
+
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { Play, Plus } from "lucide-react";
+
+import { PageHeader, ActionButton } from "~/components/ui/page-header";
+import { Badge } from "~/components/ui/badge";
+import { Button } from "~/components/ui/button";
+import { api } from "~/trpc/react";
+
+import { PanelsContainer } from "./layout/PanelsContainer";
+import { BottomStatusBar } from "./layout/BottomStatusBar";
+import { ActionLibraryPanel } from "./panels/ActionLibraryPanel";
+import { InspectorPanel } from "./panels/InspectorPanel";
+import { FlowListView } from "./flow/FlowListView";
+
+import {
+  type ExperimentDesign,
+  type ExperimentStep,
+} from "~/lib/experiment-designer/types";
+
+import { useDesignerStore } from "./state/store";
+import { actionRegistry } from "./ActionRegistry";
+import { computeDesignHash } from "./state/hashing";
+import { validateExperimentDesign } from "./state/validators";
+
+/**
+ * DesignerRoot
+ *
+ * New high-level orchestrator for the Experiment Designer refactor.
+ * Replaces the previous monolithic DesignerShell with a composable,
+ * panel-based layout (left: action library, center: flow workspace,
+ * right: contextual inspector, bottom: status bar).
+ *
+ * Responsibilities:
+ *  - Remote experiment fetch + initial design hydration
+ *  - Store initialization (steps, persisted / validated hash)
+ *  - Save / validate / export orchestration
+ *  - Keyboard shortcut wiring
+ *  - Action / plugin registry initialization
+ *
+ * Non-Responsibilities:
+ *  - Raw per-field editing (delegated to sub-panels)
+ *  - Drag/drop internals (delegated to flow + library components)
+ *  - Low-level hashing/incremental logic (state/store)
+ *
+ * Future Enhancements (planned hooks / modules):
+ *  - Command Palette (action insertion & navigation)
+ *  - Virtualized step list
+ *  - Graph view toggle
+ *  - Drift diff / reconciliation modal
+ *  - Autosave throttling controls
+ */
+
+export interface DesignerRootProps {
+  experimentId: string;
+  initialDesign?: ExperimentDesign;
+  autoCompile?: boolean;
+  onPersist?: (design: ExperimentDesign) => void;
+}
+
+interface RawExperiment {
+  id: string;
+  name: string;
+  description: string | null;
+  studyId: string;
+  integrityHash?: string | null;
+  pluginDependencies?: string[] | null;
+  visualDesign?: unknown;
+}
+
+/* -------------------------------------------------------------------------- */
+/* Util: Adapt Existing Stored Visual Design                                  */
+/* -------------------------------------------------------------------------- */
+
+function adaptExistingDesign(exp: RawExperiment): ExperimentDesign | undefined {
+  if (
+    !exp.visualDesign ||
+    typeof exp.visualDesign !== "object" ||
+    !("steps" in (exp.visualDesign as Record<string, unknown>))
+  ) {
+    return undefined;
+  }
+  const vd = exp.visualDesign as {
+    steps?: ExperimentStep[];
+    version?: number;
+    lastSaved?: string;
+  };
+  if (!Array.isArray(vd.steps)) return undefined;
+  return {
+    id: exp.id,
+    name: exp.name,
+    description: exp.description ?? "",
+    steps: vd.steps,
+    version: vd.version ?? 1,
+    lastSaved:
+      vd.lastSaved && typeof vd.lastSaved === "string"
+        ? new Date(vd.lastSaved)
+        : new Date(),
+  };
+}
+
+function buildEmptyDesign(
+  experimentId: string,
+  name?: string,
+  description?: string | null,
+): ExperimentDesign {
+  return {
+    id: experimentId,
+    name: name?.trim().length ? name : "Untitled Experiment",
+    description: description ?? "",
+    version: 1,
+    steps: [],
+    lastSaved: new Date(),
+  };
+}
+
+/* -------------------------------------------------------------------------- */
+/* Component                                                                  */
+/* -------------------------------------------------------------------------- */
+
+export function DesignerRoot({
+  experimentId,
+  initialDesign,
+  autoCompile = true,
+  onPersist,
+}: DesignerRootProps) {
+  /* ----------------------------- Remote Experiment ------------------------- */
+  const {
+    data: experiment,
+    isLoading: loadingExperiment,
+    refetch: refetchExperiment,
+  } = api.experiments.get.useQuery({ id: experimentId });
+
+  const updateExperiment = api.experiments.update.useMutation({
+    onSuccess: async () => {
+      toast.success("Experiment saved");
+      await refetchExperiment();
+    },
+    onError: (err) => {
+      toast.error(`Save failed: ${err.message}`);
+    },
+  });
+
+  const { data: studyPlugins } = api.robots.plugins.getStudyPlugins.useQuery(
+    { studyId: experiment?.studyId ?? "" },
+    { enabled: !!experiment?.studyId },
+  );
+
+  /* ------------------------------ Store Access ----------------------------- */
+  const steps = useDesignerStore((s) => s.steps);
+  const setSteps = useDesignerStore((s) => s.setSteps);
+  const recomputeHash = useDesignerStore((s) => s.recomputeHash);
+  const lastPersistedHash = useDesignerStore((s) => s.lastPersistedHash);
+  const currentDesignHash = useDesignerStore((s) => s.currentDesignHash);
+  const lastValidatedHash = useDesignerStore((s) => s.lastValidatedHash);
+  const setPersistedHash = useDesignerStore((s) => s.setPersistedHash);
+  const setValidatedHash = useDesignerStore((s) => s.setValidatedHash);
+  const upsertStep = useDesignerStore((s) => s.upsertStep);
+
+  /* ------------------------------- Local Meta ------------------------------ */
+  const [designMeta, setDesignMeta] = useState<{
+    name: string;
+    description: string;
+    version: number;
+  }>(() => {
+    // Determine initial local meta (prefer server design)
+    const existing =
+      initialDesign ??
+      (experiment
+        ? adaptExistingDesign(experiment as RawExperiment)
+        : undefined);
+    const base =
+      existing ??
+      buildEmptyDesign(
+        experimentId,
+        experiment?.name,
+        experiment?.description ?? "",
+      );
+    return {
+      name: base.name,
+      description: base.description,
+      version: base.version,
+    };
+  });
+
+  const [initialized, setInitialized] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isValidating, setIsValidating] = useState(false);
+  const [isExporting, setIsExporting] = useState(false);
+  const [lastSavedAt, setLastSavedAt] = useState<Date | undefined>(undefined);
+
+  /* ----------------------------- Initialization ---------------------------- */
+  useEffect(() => {
+    if (initialized || loadingExperiment) return;
+    const adapted =
+      initialDesign ??
+      (experiment
+        ? adaptExistingDesign(experiment as RawExperiment)
+        : undefined);
+    const resolved =
+      adapted ??
+      buildEmptyDesign(
+        experimentId,
+        experiment?.name,
+        experiment?.description ?? "",
+      );
+    setDesignMeta({
+      name: resolved.name,
+      description: resolved.description,
+      version: resolved.version,
+    });
+    setSteps(resolved.steps);
+    if ((experiment as RawExperiment | undefined)?.integrityHash) {
+      const ih = (experiment as RawExperiment).integrityHash!;
+      setPersistedHash(ih);
+      setValidatedHash(ih);
+    }
+    setInitialized(true);
+    // Kick initial hash
+    void recomputeHash();
+  }, [
+    initialized,
+    loadingExperiment,
+    experiment,
+    initialDesign,
+    experimentId,
+    setSteps,
+    setPersistedHash,
+    setValidatedHash,
+    recomputeHash,
+  ]);
+
+  /* ---------------------------- Action Registry ---------------------------- */
+  // Load core actions once
+  useEffect(() => {
+    actionRegistry
+      .loadCoreActions()
+      .catch((err) => console.error("Core action load failed:", err));
+  }, []);
+
+  // Load plugin actions when study plugins available
+  useEffect(() => {
+    if (!experiment?.studyId) return;
+    if (!studyPlugins || studyPlugins.length === 0) return;
+    actionRegistry.loadPluginActions(
+      experiment.studyId,
+      studyPlugins.map((sp) => ({
+        plugin: {
+          id: sp.plugin.id,
+          robotId: sp.plugin.robotId,
+          version: sp.plugin.version,
+          actionDefinitions: Array.isArray(sp.plugin.actionDefinitions)
+            ? sp.plugin.actionDefinitions
+            : undefined,
+        },
+      })),
+    );
+  }, [experiment?.studyId, studyPlugins]);
+
+  /* ----------------------------- Derived State ----------------------------- */
+  const hasUnsavedChanges =
+    !!currentDesignHash && lastPersistedHash !== currentDesignHash;
+
+  const driftStatus = useMemo<"unvalidated" | "drift" | "validated">(() => {
+    if (!currentDesignHash || !lastValidatedHash) return "unvalidated";
+    if (currentDesignHash !== lastValidatedHash) return "drift";
+    return "validated";
+  }, [currentDesignHash, lastValidatedHash]);
+
+  /* ------------------------------- Step Ops -------------------------------- */
+  const createNewStep = useCallback(() => {
+    const newStep: ExperimentStep = {
+      id: `step-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+      name: `Step ${steps.length + 1}`,
+      description: "",
+      type: "sequential",
+      order: steps.length,
+      trigger: {
+        type: "trial_start",
+        conditions: {},
+      },
+      actions: [],
+      expanded: true,
+    };
+    upsertStep(newStep);
+    toast.success(`Created ${newStep.name}`);
+  }, [steps.length, upsertStep]);
+
+  /* ------------------------------- Validation ------------------------------ */
+  const validateDesign = useCallback(async () => {
+    if (!initialized) return;
+    setIsValidating(true);
+    try {
+      const currentSteps = [...steps];
+      const result = validateExperimentDesign(currentSteps, {
+        steps: currentSteps,
+        actionDefinitions: actionRegistry.getAllActions(),
+      });
+      const hash = await computeDesignHash(currentSteps);
+      setValidatedHash(hash);
+      if (result.valid) {
+        toast.success(`Validated • ${hash.slice(0, 10)}… • No issues`);
+      } else {
+        toast.warning(
+          `Validated with ${result.errorCount} errors, ${result.warningCount} warnings`,
+        );
+      }
+    } catch (err) {
+      toast.error(
+        `Validation error: ${
+          err instanceof Error ? err.message : "Unknown error"
+        }`,
+      );
+    } finally {
+      setIsValidating(false);
+    }
+  }, [initialized, steps, setValidatedHash]);
+
+  /* --------------------------------- Save ---------------------------------- */
+  const persist = useCallback(async () => {
+    if (!initialized) return;
+    setIsSaving(true);
+    try {
+      const visualDesign = {
+        steps,
+        version: designMeta.version,
+        lastSaved: new Date().toISOString(),
+      };
+      updateExperiment.mutate({
+        id: experimentId,
+        visualDesign,
+        createSteps: true,
+        compileExecution: autoCompile,
+      });
+      // Optimistic hash recompute
+      await recomputeHash();
+      setLastSavedAt(new Date());
+      onPersist?.({
+        id: experimentId,
+        name: designMeta.name,
+        description: designMeta.description,
+        steps,
+        version: designMeta.version,
+        lastSaved: new Date(),
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  }, [
+    initialized,
+    steps,
+    designMeta,
+    experimentId,
+    updateExperiment,
+    recomputeHash,
+    onPersist,
+    autoCompile,
+  ]);
+
+  /* -------------------------------- Export --------------------------------- */
+  const handleExport = useCallback(async () => {
+    setIsExporting(true);
+    try {
+      const designHash = currentDesignHash ?? (await computeDesignHash(steps));
+      const bundle = {
+        format: "hristudio.design.v1",
+        exportedAt: new Date().toISOString(),
+        experiment: {
+          id: experimentId,
+          name: designMeta.name,
+          version: designMeta.version,
+          integrityHash: designHash,
+          steps,
+          pluginDependencies:
+            (experiment as RawExperiment | undefined)?.pluginDependencies
+              ?.slice()
+              .sort() ?? [],
+        },
+        compiled: null,
+      };
+      const blob = new Blob([JSON.stringify(bundle, null, 2)], {
+        type: "application/json",
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${designMeta.name
+        .replace(/[^a-z0-9-_]+/gi, "_")
+        .toLowerCase()}_design.json`;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+      toast.success("Exported design bundle");
+    } catch (err) {
+      toast.error(
+        `Export failed: ${
+          err instanceof Error ? err.message : "Unknown error"
+        }`,
+      );
+    } finally {
+      setIsExporting(false);
+    }
+  }, [currentDesignHash, steps, experimentId, designMeta, experiment]);
+
+  /* ---------------------------- Incremental Hash --------------------------- */
+  useEffect(() => {
+    if (!initialized) return;
+    void recomputeHash();
+  }, [steps.length, initialized, recomputeHash]);
+
+  /* -------------------------- Keyboard Shortcuts --------------------------- */
+  const keyHandler = useCallback(
+    (e: globalThis.KeyboardEvent) => {
+      if (
+        (e.metaKey || e.ctrlKey) &&
+        e.key.toLowerCase() === "s" &&
+        hasUnsavedChanges
+      ) {
+        e.preventDefault();
+        void persist();
+      } else if (e.key === "v" && !e.metaKey && !e.ctrlKey) {
+        e.preventDefault();
+        void validateDesign();
+      } else if (e.key === "e" && !e.metaKey && !e.ctrlKey) {
+        e.preventDefault();
+        void handleExport();
+      } else if (e.key === "n" && e.shiftKey) {
+        e.preventDefault();
+        createNewStep();
+      }
+    },
+    [hasUnsavedChanges, persist, validateDesign, handleExport, createNewStep],
+  );
+
+  useEffect(() => {
+    const listener = (ev: globalThis.KeyboardEvent) => keyHandler(ev);
+    window.addEventListener("keydown", listener, { passive: true });
+    return () => {
+      window.removeEventListener("keydown", listener);
+    };
+  }, [keyHandler]);
+
+  /* ------------------------------ Header Badges ---------------------------- */
+  const validationBadge =
+    driftStatus === "drift" ? (
+      <Badge variant="destructive">Drift</Badge>
+    ) : driftStatus === "validated" ? (
+      <Badge
+        variant="outline"
+        className="border-green-400 text-green-700 dark:text-green-400"
+      >
+        Validated
+      </Badge>
+    ) : (
+      <Badge variant="outline">Unvalidated</Badge>
+    );
+
+  /* ------------------------------- Render ---------------------------------- */
+  if (loadingExperiment && !initialized) {
+    return (
+      <div className="text-muted-foreground py-24 text-center text-sm">
+        Loading experiment design…
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-[calc(100vh-6rem)] flex-col gap-3">
+      <PageHeader
+        title={designMeta.name}
+        description="Compose ordered steps with provenance-aware actions."
+        icon={Play}
+        actions={
+          <div className="flex flex-wrap items-center gap-2">
+            {validationBadge}
+            {experiment?.integrityHash && (
+              <Badge variant="outline" className="text-xs">
+                Hash: {experiment.integrityHash.slice(0, 10)}…
+              </Badge>
+            )}
+            <Badge variant="secondary" className="text-xs">
+              {steps.length} steps
+            </Badge>
+            <Badge variant="secondary" className="text-xs">
+              {steps.reduce((s, st) => s + st.actions.length, 0)} actions
+            </Badge>
+            {hasUnsavedChanges && (
+              <Badge
+                variant="outline"
+                className="border-orange-300 text-orange-600"
+              >
+                Unsaved
+              </Badge>
+            )}
+            <ActionButton
+              onClick={() => persist()}
+              disabled={!hasUnsavedChanges || isSaving}
+            >
+              {isSaving ? "Saving…" : "Save"}
+            </ActionButton>
+            <ActionButton
+              variant="outline"
+              onClick={() => validateDesign()}
+              disabled={isValidating}
+            >
+              {isValidating ? "Validating…" : "Validate"}
+            </ActionButton>
+            <ActionButton
+              variant="outline"
+              onClick={() => handleExport()}
+              disabled={isExporting}
+            >
+              {isExporting ? "Exporting…" : "Export"}
+            </ActionButton>
+            <Button
+              size="sm"
+              variant="default"
+              className="h-8 text-xs"
+              onClick={createNewStep}
+            >
+              <Plus className="mr-1 h-4 w-4" />
+              Step
+            </Button>
+          </div>
+        }
+      />
+
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border">
+        <PanelsContainer
+          left={<ActionLibraryPanel />}
+          center={<FlowListView />}
+          right={<InspectorPanel />}
+          initialLeftWidth={300}
+          initialRightWidth={360}
+          className="flex-1"
+        />
+        <BottomStatusBar
+          onSave={() => persist()}
+          onValidate={() => validateDesign()}
+          onExport={() => handleExport()}
+          lastSavedAt={lastSavedAt}
+          saving={isSaving}
+          validating={isValidating}
+          exporting={isExporting}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default DesignerRoot;

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

@@ -0,0 +1,150 @@
+import React, { useCallback, useMemo } from "react";
+import { useDesignerStore } from "../state/store";
+import { StepFlow } from "../StepFlow";
+import type {
+  ExperimentAction,
+  ExperimentStep,
+} from "~/lib/experiment-designer/types";
+
+/**
+ * FlowListView (Transitional)
+ *
+ * This component is a TEMPORARY compatibility wrapper around the legacy
+ * StepFlow component while the new virtualized / dual-mode (List vs Graph)
+ * flow workspace is implemented.
+ *
+ * Responsibilities (current):
+ *  - Read step + selection state from the designer store
+ *  - Provide mutation handlers (upsert, delete, reorder placeholder)
+ *  - Emit structured callbacks (reserved for future instrumentation)
+ *
+ * Planned Enhancements:
+ *  - Virtualization for large step counts
+ *  - Inline step creation affordances between steps
+ *  - Multi-select + bulk operations
+ *  - Drag reordering at step level (currently delegated to DnD kit)
+ *  - Graph mode toggle (will lift state to higher DesignerRoot)
+ *  - Performance memoization / fine-grained selectors
+ *
+ * Until the new system is complete, this wrapper allows incremental
+ * replacement without breaking existing behavior.
+ */
+
+export interface FlowListViewProps {
+  /**
+   * Optional callbacks for higher-level orchestration (e.g. autosave triggers)
+   */
+  onStepMutated?: (step: ExperimentStep, kind: "create" | "update" | "delete") => void;
+  onActionMutated?: (
+    action: ExperimentAction,
+    step: ExperimentStep,
+    kind: "create" | "update" | "delete",
+  ) => void;
+  className?: string;
+}
+
+export function FlowListView({
+  onStepMutated,
+  onActionMutated,
+  className,
+}: FlowListViewProps) {
+  /* ----------------------------- Store Selectors ---------------------------- */
+  const steps = useDesignerStore((s) => s.steps);
+  const selectedStepId = useDesignerStore((s) => s.selectedStepId);
+  const selectedActionId = useDesignerStore((s) => s.selectedActionId);
+
+  const selectStep = useDesignerStore((s) => s.selectStep);
+  const selectAction = useDesignerStore((s) => s.selectAction);
+
+  const upsertStep = useDesignerStore((s) => s.upsertStep);
+  const removeStep = useDesignerStore((s) => s.removeStep);
+  const upsertAction = useDesignerStore((s) => s.upsertAction);
+  const removeAction = useDesignerStore((s) => s.removeAction);
+
+  /* ------------------------------- Handlers --------------------------------- */
+
+  const handleStepUpdate = useCallback(
+    (stepId: string, updates: Partial<ExperimentStep>) => {
+      const existing = steps.find((s) => s.id === stepId);
+      if (!existing) return;
+      const next: ExperimentStep = { ...existing, ...updates };
+      upsertStep(next);
+      onStepMutated?.(next, "update");
+    },
+    [steps, upsertStep, onStepMutated],
+  );
+
+  const handleStepDelete = useCallback(
+    (stepId: string) => {
+      const existing = steps.find((s) => s.id === stepId);
+      if (!existing) return;
+      removeStep(stepId);
+      onStepMutated?.(existing, "delete");
+    },
+    [steps, removeStep, onStepMutated],
+  );
+
+  const handleActionDelete = useCallback(
+    (stepId: string, actionId: string) => {
+      const step = steps.find((s) => s.id === stepId);
+      const action = step?.actions.find((a) => a.id === actionId);
+      removeAction(stepId, actionId);
+      if (step && action) {
+        onActionMutated?.(action, step, "delete");
+      }
+    },
+    [steps, removeAction, onActionMutated],
+  );
+
+  const totalActions = useMemo(
+    () => steps.reduce((sum, s) => sum + s.actions.length, 0),
+    [steps],
+  );
+
+  /* ------------------------------- Render ----------------------------------- */
+
+  return (
+    <div className={className} data-flow-mode="list">
+      {/* NOTE: Header / toolbar will be hoisted into the main workspace toolbar in later iterations */}
+      <div className="flex items-center justify-between border-b px-3 py-2 text-xs">
+        <div className="flex items-center gap-3 font-medium">
+          <span className="text-muted-foreground">Flow (List View)</span>
+          <span className="text-muted-foreground/70">
+            {steps.length} steps • {totalActions} actions
+          </span>
+        </div>
+        <div className="text-muted-foreground/60 text-[10px]">
+          Transitional component
+        </div>
+      </div>
+      <div className="h-[calc(100%-2.5rem)]">
+        <StepFlow
+          steps={steps}
+            selectedStepId={selectedStepId ?? null}
+            selectedActionId={selectedActionId ?? null}
+          onStepSelect={(id) => selectStep(id)}
+          onActionSelect={(actionId) =>
+            selectedStepId && actionId
+              ? selectAction(selectedStepId, actionId)
+              : undefined
+          }
+          onStepDelete={handleStepDelete}
+          onStepUpdate={handleStepUpdate}
+          onActionDelete={handleActionDelete}
+          emptyState={
+            <div className="text-muted-foreground py-10 text-center text-sm">
+              No steps yet. Use the + Step button to add your first step.
+            </div>
+          }
+          headerRight={
+            <div className="text-muted-foreground/70 text-[11px]">
+              (Add Step control will move to global toolbar)
+            </div>
+          }
+        />
+      </div>
+    </div>
+  );
+}
+
+export default FlowListView;

src/components/experiments/designer/layout/BottomStatusBar.tsx

@@ -0,0 +1,339 @@
+"use client";
+
+import React, { useCallback, useMemo } from "react";
+import {
+  Save,
+  RefreshCw,
+  Download,
+  Hash,
+  AlertTriangle,
+  CheckCircle2,
+  UploadCloud,
+  Wand2,
+  Sparkles,
+  GitBranch,
+  Keyboard,
+} from "lucide-react";
+import { Button } from "~/components/ui/button";
+import { Badge } from "~/components/ui/badge";
+import { Separator } from "~/components/ui/separator";
+import { cn } from "~/lib/utils";
+import { useDesignerStore } from "../state/store";
+
+/**
+ * BottomStatusBar
+ *
+ * Compact, persistent status + quick-action bar for the Experiment Designer.
+ * Shows:
+ *  - Validation / drift / unsaved state
+ *  - Short design hash & version
+ *  - Aggregate counts (steps / actions)
+ *  - Last persisted hash (if available)
+ *  - Quick actions (Save, Validate, Export, Command Palette)
+ *
+ * The bar is intentionally UI-only: callback props are used so that higher-level
+ * orchestration (e.g. DesignerRoot / Shell) controls actual side effects.
+ */
+
+export interface BottomStatusBarProps {
+  onSave?: () => void;
+  onValidate?: () => void;
+  onExport?: () => void;
+  onOpenCommandPalette?: () => void;
+  onToggleVersionStrategy?: () => void;
+  className?: string;
+  saving?: boolean;
+  validating?: boolean;
+  exporting?: boolean;
+  /**
+   * Optional externally supplied last saved Date for relative display.
+   */
+  lastSavedAt?: Date;
+}
+
+export function BottomStatusBar({
+  onSave,
+  onValidate,
+  onExport,
+  onOpenCommandPalette,
+  onToggleVersionStrategy,
+  className,
+  saving,
+  validating,
+  exporting,
+  lastSavedAt,
+}: BottomStatusBarProps) {
+  /* ------------------------------------------------------------------------ */
+  /* Store Selectors                                                          */
+  /* ------------------------------------------------------------------------ */
+  const steps = useDesignerStore((s) => s.steps);
+  const lastPersistedHash = useDesignerStore((s) => s.lastPersistedHash);
+  const currentDesignHash = useDesignerStore((s) => s.currentDesignHash);
+  const lastValidatedHash = useDesignerStore((s) => s.lastValidatedHash);
+  const pendingSave = useDesignerStore((s) => s.pendingSave);
+  const versionStrategy = useDesignerStore((s) => s.versionStrategy);
+  const autoSaveEnabled = useDesignerStore((s) => s.autoSaveEnabled);
+
+  const actionCount = useMemo(
+    () => steps.reduce((sum, st) => sum + st.actions.length, 0),
+    [steps],
+  );
+
+  const hasUnsaved = useMemo(
+    () =>
+      Boolean(currentDesignHash) &&
+      currentDesignHash !== lastPersistedHash &&
+      !pendingSave,
+    [currentDesignHash, lastPersistedHash, pendingSave],
+  );
+
+  const validationStatus = useMemo<"unvalidated" | "valid" | "drift">(() => {
+    if (!currentDesignHash || !lastValidatedHash) return "unvalidated";
+    if (currentDesignHash !== lastValidatedHash) return "drift";
+    return "valid";
+  }, [currentDesignHash, lastValidatedHash]);
+
+  const shortHash = useMemo(
+    () => (currentDesignHash ? currentDesignHash.slice(0, 8) : "—"),
+    [currentDesignHash],
+  );
+
+  const lastPersistedShort = useMemo(
+    () => (lastPersistedHash ? lastPersistedHash.slice(0, 8) : null),
+    [lastPersistedHash],
+  );
+
+  /* ------------------------------------------------------------------------ */
+  /* Derived Display Helpers                                                  */
+  /* ------------------------------------------------------------------------ */
+  function formatRelative(date?: Date): string {
+    if (!date) return "—";
+    const now = Date.now();
+    const diffMs = now - date.getTime();
+    if (diffMs < 30_000) return "just now";
+    const mins = Math.floor(diffMs / 60_000);
+    if (mins < 60) return `${mins}m ago`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `${hrs}h ago`;
+    const days = Math.floor(hrs / 24);
+    return `${days}d ago`;
+  }
+
+  const relSaved = formatRelative(lastSavedAt);
+
+  const validationBadge = (() => {
+    switch (validationStatus) {
+      case "valid":
+        return (
+          <Badge
+            variant="outline"
+            className="border-green-400 text-green-600 dark:text-green-400"
+            title="Validated (hash stable)"
+          >
+            <CheckCircle2 className="mr-1 h-3 w-3" />
+            Validated
+          </Badge>
+        );
+      case "drift":
+        return (
+          <Badge
+            variant="destructive"
+            className="border-amber-400 bg-amber-50 text-amber-700 dark:bg-amber-950/30 dark:text-amber-400"
+            title="Drift since last validation"
+          >
+            <AlertTriangle className="mr-1 h-3 w-3" />
+            Drift
+          </Badge>
+        );
+      default:
+        return (
+          <Badge variant="outline" title="Not validated yet">
+            <Hash className="mr-1 h-3 w-3" />
+            Unvalidated
+          </Badge>
+        );
+    }
+  })();
+
+  const unsavedBadge =
+    hasUnsaved && !pendingSave ? (
+      <Badge
+        variant="outline"
+        className="border-orange-300 text-orange-600 dark:text-orange-400"
+        title="Unsaved changes"
+      >
+        ● Unsaved
+      </Badge>
+    ) : null;
+
+  const savingIndicator =
+    pendingSave || saving ? (
+      <Badge
+        variant="secondary"
+        className="animate-pulse"
+        title="Saving changes"
+      >
+        <RefreshCw className="mr-1 h-3 w-3 animate-spin" />
+        Saving…
+      </Badge>
+    ) : null;
+
+  /* ------------------------------------------------------------------------ */
+  /* Handlers                                                                  */
+  /* ------------------------------------------------------------------------ */
+  const handleSave = useCallback(() => {
+    if (onSave) onSave();
+  }, [onSave]);
+
+  const handleValidate = useCallback(() => {
+    if (onValidate) onValidate();
+  }, [onValidate]);
+
+  const handleExport = useCallback(() => {
+    if (onExport) onExport();
+  }, [onExport]);
+
+  const handlePalette = useCallback(() => {
+    if (onOpenCommandPalette) onOpenCommandPalette();
+  }, [onOpenCommandPalette]);
+
+  const handleToggleVersionStrategy = useCallback(() => {
+    if (onToggleVersionStrategy) onToggleVersionStrategy();
+  }, [onToggleVersionStrategy]);
+
+  /* ------------------------------------------------------------------------ */
+  /* Render                                                                    */
+  /* ------------------------------------------------------------------------ */
+
+  return (
+    <div
+      className={cn(
+        "border-border/60 bg-muted/40 backdrop-blur supports-[backdrop-filter]:bg-muted/30",
+        "flex h-10 w-full flex-shrink-0 items-center gap-3 border-t px-3 text-xs",
+        "font-medium",
+        className,
+      )}
+      aria-label="Designer status bar"
+    >
+      {/* Left Cluster: Validation & Hash */}
+      <div className="flex items-center gap-2">
+        {validationBadge}
+        {unsavedBadge}
+        {savingIndicator}
+        <Separator orientation="vertical" className="h-4" />
+        <div
+          className="flex items-center gap-1 font-mono text-[11px]"
+          title="Current design hash"
+        >
+          <Hash className="h-3 w-3 text-muted-foreground" />
+          {shortHash}
+          {lastPersistedShort && lastPersistedShort !== shortHash && (
+            <span
+              className="text-muted-foreground/70"
+              title="Last persisted hash"
+            >
+              / {lastPersistedShort}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Middle Cluster: Aggregate Counts */}
+      <div className="flex items-center gap-3 text-muted-foreground">
+        <div
+          className="flex items-center gap-1"
+          title="Steps in current design"
+        >
+          <GitBranch className="h-3 w-3" />
+          {steps.length} steps
+        </div>
+        <div
+          className="flex items-center gap-1"
+          title="Total actions across all steps"
+        >
+          <Sparkles className="h-3 w-3" />
+          {actionCount} actions
+        </div>
+        <div
+          className="hidden items-center gap-1 sm:flex"
+          title="Auto-save setting"
+        >
+          <UploadCloud className="h-3 w-3" />
+          {autoSaveEnabled ? "auto-save on" : "auto-save off"}
+        </div>
+        <div
+          className="hidden cursor-pointer items-center gap-1 sm:flex"
+          title={`Version strategy: ${versionStrategy}`}
+          onClick={handleToggleVersionStrategy}
+        >
+          <Wand2 className="h-3 w-3" />
+          {versionStrategy.replace(/_/g, " ")}
+        </div>
+        <div
+          className="hidden items-center gap-1 text-[10px] font-normal tracking-wide text-muted-foreground/80 md:flex"
+          title="Relative time since last save"
+        >
+          Saved {relSaved}
+        </div>
+      </div>
+
+      {/* Flexible Spacer */}
+      <div className="flex-1" />
+
+      {/* Right Cluster: Quick Actions */}
+      <div className="flex items-center gap-1">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 px-2"
+          disabled={!hasUnsaved && !pendingSave}
+          onClick={handleSave}
+          aria-label="Save (s)"
+        >
+          <Save className="mr-1 h-3 w-3" />
+          Save
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 px-2"
+          onClick={handleValidate}
+          disabled={validating}
+          aria-label="Validate (v)"
+        >
+            <RefreshCw
+              className={cn(
+                "mr-1 h-3 w-3",
+                validating && "animate-spin",
+              )}
+            />
+          Validate
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 px-2"
+          onClick={handleExport}
+          disabled={exporting}
+          aria-label="Export (e)"
+        >
+          <Download className="mr-1 h-3 w-3" />
+          Export
+        </Button>
+        <Separator orientation="vertical" className="mx-1 h-4" />
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-7 px-2"
+          onClick={handlePalette}
+          aria-label="Command Palette (⌘K)"
+        >
+          <Keyboard className="mr-1 h-3 w-3" />
+          Commands
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default BottomStatusBar;

src/components/experiments/designer/layout/PanelsContainer.tsx

@@ -0,0 +1,389 @@
+"use client";
+
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { cn } from "~/lib/utils";
+
+/**
+ * PanelsContainer
+ *
+ * Structural layout component for the Experiment Designer refactor.
+ * Provides:
+ *  - Optional left + right side panels (resizable + collapsible)
+ *  - Central workspace (always present)
+ *  - Persistent panel widths (localStorage)
+ *  - Keyboard-accessible resize handles
+ *  - Minimal DOM repaint during drag (inline styles)
+ *
+ * NOT responsible for:
+ *  - Business logic or data fetching
+ *  - Panel content semantics (passed via props)
+ *
+ * Accessibility:
+ *  - Resize handles are <button> elements with aria-label
+ *  - Keyboard: ArrowLeft / ArrowRight adjusts width by step
+ */
+
+const STORAGE_KEY = "hristudio-designer-panels-v1";
+
+interface PersistedLayout {
+  left: number;
+  right: number;
+  leftCollapsed: boolean;
+  rightCollapsed: boolean;
+}
+
+export interface PanelsContainerProps {
+  left?: ReactNode;
+  center: ReactNode;
+  right?: ReactNode;
+
+  /**
+   * Initial (non-collapsed) widths in pixels.
+   * If panels are omitted, their widths are ignored.
+   */
+  initialLeftWidth?: number;
+  initialRightWidth?: number;
+
+  /**
+   * Minimum / maximum constraints to avoid unusable panels.
+   */
+  minLeftWidth?: number;
+  minRightWidth?: number;
+  maxLeftWidth?: number;
+  maxRightWidth?: number;
+
+  /**
+   * Whether persistence to localStorage should be skipped (e.g. SSR preview)
+   */
+  disablePersistence?: boolean;
+
+  /**
+   * ClassName pass-through for root container
+   */
+  className?: string;
+}
+
+interface DragState {
+  edge: "left" | "right";
+  startX: number;
+  startWidth: number;
+}
+
+export function PanelsContainer({
+  left,
+  center,
+  right,
+  initialLeftWidth = 280,
+  initialRightWidth = 340,
+  minLeftWidth = 200,
+  minRightWidth = 260,
+  maxLeftWidth = 520,
+  maxRightWidth = 560,
+  disablePersistence = false,
+  className,
+}: PanelsContainerProps) {
+  const hasLeft = Boolean(left);
+  const hasRight = Boolean(right);
+
+  /* ------------------------------------------------------------------------ */
+  /* State                                                                    */
+  /* ------------------------------------------------------------------------ */
+
+  const [leftWidth, setLeftWidth] = useState(initialLeftWidth);
+  const [rightWidth, setRightWidth] = useState(initialRightWidth);
+  const [leftCollapsed, setLeftCollapsed] = useState(false);
+  const [rightCollapsed, setRightCollapsed] = useState(false);
+
+  const dragRef = useRef<DragState | null>(null);
+  const frameReq = useRef<number | null>(null);
+
+  /* ------------------------------------------------------------------------ */
+  /* Persistence                                                              */
+  /* ------------------------------------------------------------------------ */
+
+  useLayoutEffect(() => {
+    if (disablePersistence) return;
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (!raw) return;
+      const parsed = JSON.parse(raw) as PersistedLayout;
+      if (typeof parsed.left === "number") setLeftWidth(parsed.left);
+      if (typeof parsed.right === "number") setRightWidth(parsed.right);
+      if (typeof parsed.leftCollapsed === "boolean") {
+        setLeftCollapsed(parsed.leftCollapsed);
+      }
+      if (typeof parsed.rightCollapsed === "boolean") {
+        setRightCollapsed(parsed.rightCollapsed);
+      }
+    } catch {
+      /* noop */
+    }
+  }, [disablePersistence]);
+
+  const persist = useCallback(
+    (next?: Partial<PersistedLayout>) => {
+      if (disablePersistence) return;
+      const snapshot: PersistedLayout = {
+        left: leftWidth,
+        right: rightWidth,
+        leftCollapsed,
+        rightCollapsed,
+        ...next,
+      };
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(snapshot));
+      } catch {
+        /* noop */
+      }
+    },
+    [disablePersistence, leftWidth, rightWidth, leftCollapsed, rightCollapsed],
+  );
+
+  useEffect(() => {
+    persist();
+  }, [leftWidth, rightWidth, leftCollapsed, rightCollapsed, persist]);
+
+  /* ------------------------------------------------------------------------ */
+  /* Drag Handlers                                                            */
+  /* ------------------------------------------------------------------------ */
+
+  const onPointerMove = useCallback(
+    (e: PointerEvent) => {
+      if (!dragRef.current) return;
+      const { edge, startX, startWidth } = dragRef.current;
+      const delta = e.clientX - startX;
+
+      if (edge === "left") {
+        let next = startWidth + delta;
+        next = Math.max(minLeftWidth, Math.min(maxLeftWidth, next));
+        if (next !== leftWidth) {
+          if (frameReq.current) cancelAnimationFrame(frameReq.current);
+          frameReq.current = requestAnimationFrame(() => setLeftWidth(next));
+        }
+      } else if (edge === "right") {
+        let next = startWidth - delta;
+        next = Math.max(minRightWidth, Math.min(maxRightWidth, next));
+        if (next !== rightWidth) {
+          if (frameReq.current) cancelAnimationFrame(frameReq.current);
+            frameReq.current = requestAnimationFrame(() => setRightWidth(next));
+        }
+      }
+    },
+    [
+      leftWidth,
+      rightWidth,
+      minLeftWidth,
+      maxLeftWidth,
+      minRightWidth,
+      maxRightWidth,
+    ],
+  );
+
+  const endDrag = useCallback(() => {
+    dragRef.current = null;
+    window.removeEventListener("pointermove", onPointerMove);
+    window.removeEventListener("pointerup", endDrag);
+  }, [onPointerMove]);
+
+  const startDrag = useCallback(
+    (edge: "left" | "right", e: React.PointerEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      if (edge === "left" && leftCollapsed) return;
+      if (edge === "right" && rightCollapsed) return;
+      dragRef.current = {
+        edge,
+        startX: e.clientX,
+        startWidth: edge === "left" ? leftWidth : rightWidth,
+      };
+      window.addEventListener("pointermove", onPointerMove);
+      window.addEventListener("pointerup", endDrag);
+    },
+    [leftWidth, rightWidth, leftCollapsed, rightCollapsed, onPointerMove, endDrag],
+  );
+
+  /* ------------------------------------------------------------------------ */
+  /* Collapse / Expand                                                         */
+  /* ------------------------------------------------------------------------ */
+
+  const toggleLeft = useCallback(() => {
+    if (!hasLeft) return;
+    setLeftCollapsed((c) => {
+      const next = !c;
+      if (next === false && leftWidth < minLeftWidth) {
+        setLeftWidth(initialLeftWidth);
+      }
+      return next;
+    });
+  }, [hasLeft, leftWidth, minLeftWidth, initialLeftWidth]);
+
+  const toggleRight = useCallback(() => {
+    if (!hasRight) return;
+    setRightCollapsed((c) => {
+      const next = !c;
+      if (next === false && rightWidth < minRightWidth) {
+        setRightWidth(initialRightWidth);
+      }
+      return next;
+    });
+  }, [hasRight, rightWidth, minRightWidth, initialRightWidth]);
+
+  /* Keyboard resizing (focused handle) */
+  const handleKeyResize = useCallback(
+    (edge: "left" | "right", e: React.KeyboardEvent<HTMLButtonElement>) => {
+      const step = e.shiftKey ? 24 : 12;
+      if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+        e.preventDefault();
+        if (edge === "left" && !leftCollapsed) {
+          setLeftWidth((w) => {
+            const delta = e.key === "ArrowLeft" ? -step : step;
+            return Math.max(minLeftWidth, Math.min(maxLeftWidth, w + delta));
+          });
+        } else if (edge === "right" && !rightCollapsed) {
+          setRightWidth((w) => {
+            const delta = e.key === "ArrowLeft" ? -step : step;
+            return Math.max(minRightWidth, Math.min(maxRightWidth, w + delta));
+          });
+        }
+      } else if (e.key === "Enter" || e.key === " ") {
+        if (edge === "left") toggleLeft();
+        else toggleRight();
+      }
+    },
+    [
+      leftCollapsed,
+      rightCollapsed,
+      minLeftWidth,
+      maxLeftWidth,
+      minRightWidth,
+      maxRightWidth,
+      toggleLeft,
+      toggleRight,
+    ],
+  );
+
+  /* ------------------------------------------------------------------------ */
+  /* Render                                                                    */
+  /* ------------------------------------------------------------------------ */
+
+  return (
+    <div
+      className={cn(
+        "flex h-full w-full select-none overflow-hidden",
+        className,
+      )}
+      aria-label="Designer panel layout"
+    >
+      {/* Left Panel */}
+      {hasLeft && (
+        <div
+          className={cn(
+            "relative flex h-full flex-shrink-0 flex-col border-r bg-background/50 transition-[width] duration-150",
+            leftCollapsed ? "w-0 border-r-0" : "w-[--panel-left-width]",
+          )}
+          style={
+            leftCollapsed
+              ? undefined
+              : ({ ["--panel-left-width" as string]: `${leftWidth}px` } as React.CSSProperties)
+          }
+        >
+          {!leftCollapsed && (
+            <div className="flex-1 overflow-hidden">{left}</div>
+          )}
+        </div>
+      )}
+
+      {/* Left Resize Handle */}
+      {hasLeft && !leftCollapsed && (
+        <button
+          type="button"
+            aria-label="Resize left panel (Enter to toggle collapse)"
+          onPointerDown={(e) => startDrag("left", e)}
+          onKeyDown={(e) => handleKeyResize("left", e)}
+          className="hover:bg-accent/40 focus-visible:ring-ring group relative z-10 h-full w-1 cursor-col-resize outline-none focus-visible:ring-2"
+        >
+          <span className="bg-border absolute inset-y-0 left-0 w-px" />
+          <span className="bg-border/0 group-hover:bg-border absolute inset-y-0 right-0 w-px transition-colors" />
+        </button>
+      )}
+
+      {/* Collapse / Expand Toggle (Left) */}
+      {hasLeft && (
+        <button
+          type="button"
+          aria-label={leftCollapsed ? "Expand left panel" : "Collapse left panel"}
+          onClick={toggleLeft}
+          className={cn(
+            "text-muted-foreground hover:text-foreground focus-visible:ring-ring absolute top-2 z-20 rounded border bg-background/95 px-1.5 py-0.5 text-[10px] font-medium shadow-sm outline-none focus-visible:ring-2",
+            leftCollapsed ? "left-1" : "left-2",
+          )}
+        >
+          {leftCollapsed ? "»" : "«"}
+        </button>
+      )}
+
+      {/* Center (Workspace) */}
+      <div className="relative flex min-w-0 flex-1 flex-col overflow-hidden">
+        <div className="flex-1 overflow-hidden">{center}</div>
+      </div>
+
+      {/* Right Resize Handle */}
+      {hasRight && !rightCollapsed && (
+        <button
+          type="button"
+            aria-label="Resize right panel (Enter to toggle collapse)"
+          onPointerDown={(e) => startDrag("right", e)}
+          onKeyDown={(e) => handleKeyResize("right", e)}
+          className="hover:bg-accent/40 focus-visible:ring-ring group relative z-10 h-full w-1 cursor-col-resize outline-none focus-visible:ring-2"
+        >
+          <span className="bg-border absolute inset-y-0 right-0 w-px" />
+          <span className="bg-border/0 group-hover:bg-border absolute inset-y-0 left-0 w-px transition-colors" />
+        </button>
+      )}
+
+      {/* Right Panel */}
+      {hasRight && (
+        <div
+          className={cn(
+            "relative flex h-full flex-shrink-0 flex-col border-l bg-background/50 transition-[width] duration-150",
+            rightCollapsed ? "w-0 border-l-0" : "w-[--panel-right-width]",
+          )}
+          style={
+            rightCollapsed
+              ? undefined
+              : ({ ["--panel-right-width" as string]: `${rightWidth}px` } as React.CSSProperties)
+          }
+        >
+          {!rightCollapsed && (
+            <div className="flex-1 overflow-hidden">{right}</div>
+          )}
+        </div>
+      )}
+
+      {/* Collapse / Expand Toggle (Right) */}
+      {hasRight && (
+        <button
+          type="button"
+          aria-label={
+            rightCollapsed ? "Expand right panel" : "Collapse right panel"
+          }
+          onClick={toggleRight}
+          className={cn(
+            "text-muted-foreground hover:text-foreground focus-visible:ring-ring absolute top-2 z-20 rounded border bg-background/95 px-1.5 py-0.5 text-[10px] font-medium shadow-sm outline-none focus-visible:ring-2",
+            rightCollapsed ? "right-1" : "right-2",
+          )}
+        >
+          {rightCollapsed ? "«" : "»"}
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default PanelsContainer;

src/components/experiments/designer/panels/ActionLibraryPanel.tsx

@@ -0,0 +1,478 @@
+"use client";
+
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { useDraggable } from "@dnd-kit/core";
+import {
+  Star,
+  StarOff,
+  Search,
+  Filter,
+  Sparkles,
+  SlidersHorizontal,
+  FolderPlus,
+  User,
+  Bot,
+  GitBranch,
+  Eye,
+  X,
+  Layers,
+} from "lucide-react";
+import { Input } from "~/components/ui/input";
+import { Button } from "~/components/ui/button";
+import { Badge } from "~/components/ui/badge";
+import { Separator } from "~/components/ui/separator";
+import { ScrollArea } from "~/components/ui/scroll-area";
+import { cn } from "~/lib/utils";
+import { useActionRegistry } from "../ActionRegistry";
+import type { ActionDefinition } from "~/lib/experiment-designer/types";
+
+/**
+ * ActionLibraryPanel
+ *
+ * Enhanced wrapper panel for the experiment designer left side:
+ *  - Fuzzy-ish search (case-insensitive substring) over name, description, id
+ *  - Multi-category filtering (toggle chips)
+ *  - Favorites (local persisted)
+ *  - Density toggle (comfortable / compact)
+ *  - Star / unstar actions inline
+ *  - Drag support (DndKit) identical to legacy ActionLibrary
+ *
+ * Does NOT own persistence of actions themselves—delegates to action registry.
+ */
+
+export type ActionCategory = ActionDefinition["category"];
+
+interface FavoritesState {
+  favorites: Set<string>;
+}
+
+const FAVORITES_STORAGE_KEY = "hristudio-action-favorites-v1";
+
+interface DraggableActionProps {
+  action: ActionDefinition;
+  compact: boolean;
+  isFavorite: boolean;
+  onToggleFavorite: (id: string) => void;
+  highlight?: string;
+}
+
+const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
+  User,
+  Bot,
+  GitBranch,
+  Eye,
+  Sparkles,
+  Layers,
+};
+
+function highlightMatch(text: string, query: string): ReactNode {
+  if (!query.trim()) return text;
+  const idx = text.toLowerCase().indexOf(query.toLowerCase());
+  if (idx === -1) return text;
+  return (
+    <>
+      {text.slice(0, idx)}
+      <span className="bg-yellow-200/60 dark:bg-yellow-500/30">
+        {text.slice(idx, idx + query.length)}
+      </span>
+      {text.slice(idx + query.length)}
+    </>
+  );
+}
+
+function DraggableAction({
+  action,
+  compact,
+  isFavorite,
+  onToggleFavorite,
+  highlight,
+}: DraggableActionProps) {
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useDraggable({
+      id: `action-${action.id}`,
+      data: { action },
+    });
+
+  const style: React.CSSProperties = transform
+    ? {
+        transform: `translate3d(${transform.x}px, ${transform.y}px,0)`,
+      }
+    : {};
+
+  const IconComponent =
+    iconMap[action.icon] ??
+    // fallback icon (Sparkles)
+    Sparkles;
+
+  const categoryColors: Record<ActionCategory, string> = {
+    wizard: "bg-blue-500",
+    robot: "bg-emerald-600",
+    control: "bg-amber-500",
+    observation: "bg-purple-600",
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      {...attributes}
+      {...listeners}
+      style={style}
+      className={cn(
+        "group relative flex cursor-grab items-center gap-2 rounded border bg-background/60 px-2 transition-colors hover:bg-accent/50",
+        compact ? "py-1 text-[11px]" : "py-2 text-xs",
+        isDragging && "opacity-50",
+      )}
+      draggable={false}
+      title={action.description ?? ""}
+    >
+      <div
+        className={cn(
+          "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded text-white",
+          categoryColors[action.category],
+        )}
+      >
+        <IconComponent className="h-3 w-3" />
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-1 truncate font-medium">
+          {action.source.kind === "plugin" ? (
+            <span className="inline-flex h-3 w-3 items-center justify-center rounded-full bg-emerald-700 text-[8px] font-bold text-white">
+              P
+            </span>
+          ) : (
+            <span className="inline-flex h-3 w-3 items-center justify-center rounded-full bg-slate-500 text-[8px] font-bold text-white">
+              C
+            </span>
+          )}
+          <span className="truncate">
+            {highlight ? highlightMatch(action.name, highlight) : action.name}
+          </span>
+        </div>
+        {action.description && !compact && (
+          <div className="text-muted-foreground truncate">
+            {highlight
+              ? highlightMatch(action.description, highlight)
+              : action.description}
+          </div>
+        )}
+      </div>
+      <button
+        type="button"
+        aria-label={isFavorite ? "Unfavorite action" : "Favorite action"}
+        onClick={(e) => {
+          e.stopPropagation();
+          onToggleFavorite(action.id);
+        }}
+        className="text-muted-foreground/60 hover:text-foreground rounded p-1 transition-colors"
+      >
+        {isFavorite ? (
+          <Star className="h-3 w-3 fill-current" />
+        ) : (
+          <StarOff className="h-3 w-3" />
+        )}
+      </button>
+    </div>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/* Panel Component                                                            */
+/* -------------------------------------------------------------------------- */
+
+export function ActionLibraryPanel() {
+  const registry = useActionRegistry();
+
+  const [search, setSearch] = useState("");
+  const [selectedCategories, setSelectedCategories] = useState<
+    Set<ActionCategory>
+  >(new Set<ActionCategory>(["wizard"]));
+  const [favorites, setFavorites] = useState<FavoritesState>({
+    favorites: new Set<string>(),
+  });
+  const [showOnlyFavorites, setShowOnlyFavorites] = useState(false);
+  const [density, setDensity] = useState<"comfortable" | "compact">(
+    "comfortable",
+  );
+
+  const allActions = registry.getAllActions();
+
+  /* ------------------------------- Favorites -------------------------------- */
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem(FAVORITES_STORAGE_KEY);
+      if (raw) {
+        const parsed = JSON.parse(raw) as { favorites?: string[] };
+        if (Array.isArray(parsed.favorites)) {
+          setFavorites({ favorites: new Set(parsed.favorites) });
+        }
+      }
+    } catch {
+      /* noop */
+    }
+  }, []);
+
+  const persistFavorites = useCallback(
+    (next: Set<string>) => {
+      try {
+        localStorage.setItem(
+          FAVORITES_STORAGE_KEY,
+            JSON.stringify({ favorites: Array.from(next) }),
+        );
+      } catch {
+        /* noop */
+      }
+    },
+    [],
+  );
+
+  const toggleFavorite = useCallback(
+    (id: string) => {
+      setFavorites((prev) => {
+        const copy = new Set(prev.favorites);
+        if (copy.has(id)) copy.delete(id);
+        else copy.add(id);
+        persistFavorites(copy);
+        return { favorites: copy };
+      });
+    },
+    [persistFavorites],
+  );
+
+  /* ----------------------------- Category List ------------------------------ */
+  const categories: Array<{
+    key: ActionCategory;
+    label: string;
+    icon: React.ComponentType<{ className?: string }>;
+    color: string;
+  }> = [
+    { key: "wizard", label: "Wizard", icon: User, color: "bg-blue-500" },
+    { key: "robot", label: "Robot", icon: Bot, color: "bg-emerald-600" },
+    { key: "control", label: "Control", icon: GitBranch, color: "bg-amber-500" },
+    { key: "observation", label: "Observe", icon: Eye, color: "bg-purple-600" },
+  ];
+
+  const toggleCategory = useCallback((c: ActionCategory) => {
+    setSelectedCategories((prev) => {
+      const next = new Set(prev);
+      if (next.has(c)) {
+        next.delete(c);
+      } else {
+        next.add(c);
+      }
+      if (next.size === 0) {
+        // Keep at least one category selected
+        next.add(c);
+      }
+      return next;
+    });
+  }, []);
+
+  const clearFilters = useCallback(() => {
+    setSelectedCategories(new Set(categories.map((c) => c.key)));
+    setSearch("");
+    setShowOnlyFavorites(false);
+  }, [categories]);
+
+  useEffect(() => {
+    // On mount select all categories for richer initial view
+    setSelectedCategories(new Set(categories.map((c) => c.key)));
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  /* ------------------------------- Filtering -------------------------------- */
+  const filtered = useMemo(() => {
+    const activeCats = selectedCategories;
+    const q = search.trim().toLowerCase();
+
+    return allActions.filter((a) => {
+      if (!activeCats.has(a.category)) return false;
+      if (showOnlyFavorites && !favorites.favorites.has(a.id)) return false;
+      if (!q) return true;
+      return (
+        a.name.toLowerCase().includes(q) ||
+        (a.description?.toLowerCase().includes(q) ?? false) ||
+        a.id.toLowerCase().includes(q)
+      );
+    });
+  }, [
+    allActions,
+    selectedCategories,
+    search,
+    showOnlyFavorites,
+    favorites.favorites,
+  ]);
+
+  const countsByCategory = useMemo(() => {
+    const map: Record<ActionCategory, number> = {
+      wizard: 0,
+      robot: 0,
+      control: 0,
+      observation: 0,
+    };
+    for (const a of allActions) {
+      map[a.category] += 1;
+    }
+    return map;
+  }, [allActions]);
+
+  const visibleFavoritesCount = Array.from(favorites.favorites).filter((id) =>
+    filtered.some((a) => a.id === id),
+  ).length;
+
+  /* ------------------------------- Rendering -------------------------------- */
+  return (
+    <div className="flex h-full flex-col">
+      {/* Toolbar */}
+      <div className="border-b bg-background/60 p-2">
+        <div className="mb-2 flex gap-2">
+          <div className="relative flex-1">
+            <Search className="text-muted-foreground absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2" />
+            <Input
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search actions"
+              className="h-8 pl-7 text-xs"
+              aria-label="Search actions"
+            />
+          </div>
+          <Button
+            variant={showOnlyFavorites ? "default" : "outline"}
+            size="sm"
+            className="h-8"
+            onClick={() => setShowOnlyFavorites((s) => !s)}
+            aria-pressed={showOnlyFavorites}
+            aria-label="Toggle favorites filter"
+          >
+            <Star className="mr-1 h-3 w-3" />
+            Fav
+            {showOnlyFavorites && (
+              <Badge
+                variant="secondary"
+                className="ml-1 h-4 px-1 text-[10px]"
+                title="Visible favorites"
+              >
+                {visibleFavoritesCount}
+              </Badge>
+            )}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8"
+            onClick={() =>
+              setDensity((d) =>
+                d === "comfortable" ? "compact" : "comfortable",
+              )
+            }
+            aria-label="Toggle density"
+          >
+            <SlidersHorizontal className="mr-1 h-3 w-3" />
+            {density === "comfortable" ? "Compact" : "Comfort"}
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8"
+            onClick={clearFilters}
+            aria-label="Clear filters"
+          >
+            <X className="h-3 w-3" />
+          </Button>
+        </div>
+
+        {/* Category Filters */}
+        <div className="grid grid-cols-4 gap-1">
+          {categories.map((cat) => {
+            const active = selectedCategories.has(cat.key);
+            const Icon = cat.icon;
+            return (
+              <Button
+                key={cat.key}
+                variant={active ? "default" : "ghost"}
+                size="sm"
+                className={cn(
+                  "h-7 justify-start gap-1 truncate text-[11px]",
+                  active && `${cat.color} text-white hover:opacity-90`,
+                )}
+                onClick={() => toggleCategory(cat.key)}
+                aria-pressed={active}
+              >
+                <Icon className="h-3 w-3" />
+                {cat.label}
+                <span className="ml-auto text-[10px] font-normal opacity-80">
+                  {countsByCategory[cat.key]}
+                </span>
+              </Button>
+            );
+          })}
+        </div>
+
+        <div className="mt-2 flex items-center justify-between text-[10px] text-muted-foreground">
+          <div>
+            {filtered.length} shown / {allActions.length} total
+          </div>
+          <div className="flex items-center gap-1">
+            <FolderPlus className="h-3 w-3" />
+            <span>Plugins: {registry.getDebugInfo().pluginActionsLoaded ? "✓" : "…"}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Actions List */}
+      <ScrollArea className="flex-1">
+        <div className="space-y-1 p-2">
+          {filtered.length === 0 ? (
+            <div className="text-muted-foreground/70 flex flex-col items-center gap-2 py-10 text-center text-xs">
+              <Filter className="h-6 w-6" />
+              <div>No actions match filters</div>
+            </div>
+          ) : (
+            filtered.map((action) => (
+              <DraggableAction
+                key={action.id}
+                action={action}
+                compact={density === "compact"}
+                isFavorite={favorites.favorites.has(action.id)}
+                onToggleFavorite={toggleFavorite}
+                highlight={search}
+              />
+            ))
+          )}
+        </div>
+      </ScrollArea>
+
+      {/* Footer Summary */}
+      <div className="border-t bg-background/60 p-2">
+        <div className="flex items-center justify-between text-[10px]">
+          <div className="flex items-center gap-2">
+            <Badge variant="secondary" className="h-4 px-1 text-[10px]">
+              {allActions.length} total
+            </Badge>
+            {showOnlyFavorites && (
+              <Badge variant="outline" className="h-4 px-1 text-[10px]">
+                {visibleFavoritesCount} favorites
+              </Badge>
+            )}
+          </div>
+          <div className="flex items-center gap-1 text-muted-foreground">
+            <Sparkles className="h-3 w-3" />
+            Core: {registry.getDebugInfo().coreActionsLoaded ? "✓" : "…"}
+          </div>
+        </div>
+        <Separator className="my-1" />
+        <p className="text-muted-foreground text-[9px] leading-relaxed">
+          Drag actions into the flow. Use search / category filters to narrow
+          results. Star actions you use frequently.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default ActionLibraryPanel;

src/components/experiments/designer/panels/InspectorPanel.tsx

@@ -0,0 +1,345 @@
+"use client";
+
+import React, { useMemo, useState, useCallback } from "react";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "~/components/ui/tabs";
+import { ScrollArea } from "~/components/ui/scroll-area";
+import { cn } from "~/lib/utils";
+import { useDesignerStore } from "../state/store";
+import { actionRegistry } from "../ActionRegistry";
+import { PropertiesPanel } from "../PropertiesPanel";
+import { ValidationPanel } from "../ValidationPanel";
+import { DependencyInspector } from "../DependencyInspector";
+import type {
+  ExperimentStep,
+  ExperimentAction,
+} from "~/lib/experiment-designer/types";
+import {
+  Settings,
+  AlertTriangle,
+  GitBranch,
+  ListChecks,
+  PackageSearch,
+} from "lucide-react";
+
+/**
+ * InspectorPanel
+ *
+ * Collapsible / dockable right-side panel presenting contextual information:
+ *  - Properties (Step or Action)
+ *  - Validation Issues
+ *  - Dependencies (action definitions & drift)
+ *
+ * This is a skeleton implementation bridging existing sub-panels. Future
+ * enhancements (planned):
+ *  - Lazy loading heavy panels
+ *  - Diff / reconciliation modal for action signature drift
+ *  - Parameter schema visualization popovers
+ *  - Step / Action navigation breadcrumbs
+ *  - Split / pop-out inspector
+ */
+
+export interface InspectorPanelProps {
+  className?: string;
+  /**
+   * Optional forced active tab; if undefined, internal state manages it.
+   */
+  activeTab?: "properties" | "issues" | "dependencies";
+  /**
+   * Called when user changes tab (only if activeTab not externally controlled).
+   */
+  onTabChange?: (tab: "properties" | "issues" | "dependencies") => void;
+  /**
+   * Whether to auto-switch to properties tab when selection changes.
+   */
+  autoFocusOnSelection?: boolean;
+}
+
+export function InspectorPanel({
+  className,
+  activeTab,
+  onTabChange,
+  autoFocusOnSelection = true,
+}: InspectorPanelProps) {
+  /* ------------------------------------------------------------------------ */
+  /* Store Selectors                                                          */
+  /* ------------------------------------------------------------------------ */
+  const steps = useDesignerStore((s) => s.steps);
+  const selectedStepId = useDesignerStore((s) => s.selectedStepId);
+  const selectedActionId = useDesignerStore((s) => s.selectedActionId);
+  const validationIssues = useDesignerStore((s) => s.validationIssues);
+  const actionSignatureDrift = useDesignerStore((s) => s.actionSignatureDrift);
+
+  const upsertStep = useDesignerStore((s) => s.upsertStep);
+  const upsertAction = useDesignerStore((s) => s.upsertAction);
+  const selectStep = useDesignerStore((s) => s.selectStep);
+  const selectAction = useDesignerStore((s) => s.selectAction);
+
+  /* ------------------------------------------------------------------------ */
+  /* Derived Selection                                                        */
+  /* ------------------------------------------------------------------------ */
+  const selectedStep: ExperimentStep | undefined = useMemo(
+    () => steps.find((s) => s.id === selectedStepId),
+    [steps, selectedStepId],
+  );
+
+  const selectedAction: ExperimentAction | undefined = useMemo(
+    () =>
+      selectedStep?.actions.find(
+        (a) => a.id === selectedActionId,
+      ) as ExperimentAction | undefined,
+    [selectedStep, selectedActionId],
+  );
+
+  /* ------------------------------------------------------------------------ */
+  /* Local Active Tab State (uncontrolled mode)                               */
+  /* ------------------------------------------------------------------------ */
+  const [internalTab, setInternalTab] = useState<
+    "properties" | "issues" | "dependencies"
+  >(() => {
+    if (selectedStepId) return "properties";
+    return "issues";
+  });
+
+  const effectiveTab = activeTab ?? internalTab;
+
+  // Auto switch to properties on new selection if permitted
+  React.useEffect(() => {
+    if (!autoFocusOnSelection) return;
+    if (selectedStepId || selectedActionId) {
+      setInternalTab("properties");
+    }
+  }, [selectedStepId, selectedActionId, autoFocusOnSelection]);
+
+  const handleTabChange = useCallback(
+    (val: string) => {
+      if (
+        val === "properties" ||
+        val === "issues" ||
+        val === "dependencies"
+      ) {
+        if (activeTab) {
+          onTabChange?.(val);
+        } else {
+          setInternalTab(val);
+        }
+      }
+    },
+    [activeTab, onTabChange],
+  );
+
+  /* ------------------------------------------------------------------------ */
+  /* Mutation Handlers (pass-through to store)                                */
+  /* ------------------------------------------------------------------------ */
+  const handleActionUpdate = useCallback(
+    (
+      stepId: string,
+      actionId: string,
+      updates: Partial<ExperimentAction>,
+    ) => {
+      const step = steps.find((s) => s.id === stepId);
+      if (!step) return;
+      const action = step.actions.find((a) => a.id === actionId);
+      if (!action) return;
+      upsertAction(stepId, { ...action, ...updates });
+    },
+    [steps, upsertAction],
+  );
+
+  const handleStepUpdate = useCallback(
+    (stepId: string, updates: Partial<ExperimentStep>) => {
+      const step = steps.find((s) => s.id === stepId);
+      if (!step) return;
+      upsertStep({ ...step, ...updates });
+    },
+    [steps, upsertStep],
+  );
+
+  /* ------------------------------------------------------------------------ */
+  /* Counts & Badges                                                          */
+  /* ------------------------------------------------------------------------ */
+  const issueCount = useMemo(
+    () =>
+      Object.values(validationIssues).reduce(
+        (sum, arr) => sum + arr.length,
+        0,
+      ),
+    [validationIssues],
+  );
+
+  const driftCount = actionSignatureDrift.size;
+
+  /* ------------------------------------------------------------------------ */
+  /* Empty States                                                             */
+  /* ------------------------------------------------------------------------ */
+  const propertiesEmpty = !selectedStep && !selectedAction;
+
+  /* ------------------------------------------------------------------------ */
+  /* Render                                                                   */
+  /* ------------------------------------------------------------------------ */
+  return (
+    <div
+      className={cn(
+        "flex h-full flex-col border-l bg-background/40 backdrop-blur-sm",
+        className,
+      )}
+    >
+      {/* Tab Header */}
+      <div className="border-b px-2 py-1.5">
+        <Tabs
+          value={effectiveTab}
+          onValueChange={handleTabChange}
+          className="w-full"
+        >
+          <TabsList className="grid h-8 grid-cols-3">
+            <TabsTrigger
+              value="properties"
+              className="flex items-center gap-1 text-[11px]"
+              title="Properties (Step / Action)"
+            >
+              <Settings className="h-3 w-3" />
+              <span className="hidden sm:inline">Props</span>
+            </TabsTrigger>
+            <TabsTrigger
+              value="issues"
+              className="flex items-center gap-1 text-[11px]"
+              title="Validation Issues"
+            >
+              <AlertTriangle className="h-3 w-3" />
+              <span className="hidden sm:inline">
+                Issues{issueCount > 0 ? ` (${issueCount})` : ""}
+              </span>
+              {issueCount > 0 && (
+                <span className="text-amber-600 dark:text-amber-400 sm:hidden">
+                  {issueCount}
+                </span>
+              )}
+            </TabsTrigger>
+            <TabsTrigger
+              value="dependencies"
+              className="flex items-center gap-1 text-[11px]"
+              title="Dependencies / Drift"
+            >
+              <PackageSearch className="h-3 w-3" />
+              <span className="hidden sm:inline">
+                Deps{driftCount > 0 ? ` (${driftCount})` : ""}
+              </span>
+              {driftCount > 0 && (
+                <span className="text-purple-600 dark:text-purple-400 sm:hidden">
+                  {driftCount}
+                </span>
+              )}
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+
+      {/* Content */}
+      <div className="flex min-h-0 flex-1 flex-col">
+        <Tabs value={effectiveTab}>
+          {/* Properties */}
+            <TabsContent
+              value="properties"
+              className="m-0 flex h-full flex-col data-[state=inactive]:hidden"
+            >
+              {propertiesEmpty ? (
+                <div className="text-muted-foreground flex h-full flex-col items-center justify-center gap-3 p-4 text-center">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-full border bg-background/70">
+                    <GitBranch className="h-5 w-5" />
+                  </div>
+                  <div className="space-y-1">
+                    <p className="text-sm font-medium">
+                      Select a Step or Action
+                    </p>
+                    <p className="text-xs">
+                      Click within the flow to edit its properties here.
+                    </p>
+                  </div>
+                </div>
+              ) : (
+                <ScrollArea className="flex-1">
+                  <div className="p-3">
+                    <PropertiesPanel
+                      design={{
+                        id: "design",
+                        name: "Design",
+                        description: "",
+                        version: 1,
+                        steps,
+                        lastSaved: new Date(),
+                      }}
+                      selectedStep={selectedStep}
+                      selectedAction={selectedAction}
+                      onActionUpdate={handleActionUpdate}
+                      onStepUpdate={handleStepUpdate}
+                    />
+                  </div>
+                </ScrollArea>
+              )}
+            </TabsContent>
+
+          {/* Issues */}
+          <TabsContent
+            value="issues"
+            className="m-0 flex h-full flex-col data-[state=inactive]:hidden"
+          >
+            <ScrollArea className="flex-1">
+              <div className="p-3">
+                <ValidationPanel
+                  issues={validationIssues}
+                  onIssueClick={(issue) => {
+                    if (issue.stepId) {
+                      selectStep(issue.stepId);
+                      if (issue.actionId) {
+                        selectAction(issue.stepId, issue.actionId);
+                        if (autoFocusOnSelection) {
+                          handleTabChange("properties");
+                        }
+                      }
+                    }
+                  }}
+                />
+              </div>
+            </ScrollArea>
+          </TabsContent>
+
+          {/* Dependencies */}
+          <TabsContent
+            value="dependencies"
+            className="m-0 flex h-full flex-col data-[state=inactive]:hidden"
+          >
+            <ScrollArea className="flex-1">
+              <div className="p-3">
+                <DependencyInspector
+                  steps={steps}
+                  actionSignatureDrift={actionSignatureDrift}
+                  actionDefinitions={actionRegistry.getAllActions()}
+                  onReconcileAction={(actionId) => {
+                    // Placeholder: future diff modal / signature update
+                    // eslint-disable-next-line no-console
+                    console.log("Reconcile TODO for action:", actionId);
+                  }}
+                  onRefreshDependencies={() => {
+                    // eslint-disable-next-line no-console
+                    console.log("Refresh dependencies TODO");
+                  }}
+                  onInstallPlugin={(pluginId) => {
+                    // eslint-disable-next-line no-console
+                    console.log("Install plugin TODO:", pluginId);
+                  }}
+                />
+              </div>
+            </ScrollArea>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* Footer (lightweight) */}
+      <div className="border-t px-3 py-1.5 text-[10px] text-muted-foreground">
+        Inspector • {selectedStep ? "Step" : selectedAction ? "Action" : "None"}{" "}
+        • {issueCount} issues • {driftCount} drift
+      </div>
+    </div>
+  );
+}
+
+export default InspectorPanel;

tsconfig.json

@@ -38,7 +38,8 @@
     "**/*.cjs",
     "**/*.js",
     ".next/types/**/*.ts",
-    "src/components/experiments/designer/state/**/*.ts"
+    "src/components/experiments/designer/**/*.ts",
+    "src/components/experiments/designer/**/*.tsx"
   ],
   "exclude": ["node_modules", "robot-plugins"]
 }