feat(designer): enable drag-drop v1 and compact tile layout for action library

src/components/experiments/designer/DesignerRoot.tsx

@@ -10,6 +10,7 @@ import { Button } from "~/components/ui/button";
 import { api } from "~/trpc/react";
 
 import { PanelsContainer } from "./layout/PanelsContainer";
+import { DndContext, closestCenter, type DragEndEvent } from "@dnd-kit/core";
 import { BottomStatusBar } from "./layout/BottomStatusBar";
 import { ActionLibraryPanel } from "./panels/ActionLibraryPanel";
 import { InspectorPanel } from "./panels/InspectorPanel";
@@ -18,6 +19,7 @@ import { FlowListView } from "./flow/FlowListView";
 import {
   type ExperimentDesign,
   type ExperimentStep,
+  type ExperimentAction,
 } from "~/lib/experiment-designer/types";
 
 import { useDesignerStore } from "./state/store";
@@ -158,6 +160,7 @@ export function DesignerRoot({
   const setPersistedHash = useDesignerStore((s) => s.setPersistedHash);
   const setValidatedHash = useDesignerStore((s) => s.setValidatedHash);
   const upsertStep = useDesignerStore((s) => s.upsertStep);
+  const upsertAction = useDesignerStore((s) => s.upsertAction);
 
   /* ------------------------------- Local Meta ------------------------------ */
   const [designMeta, setDesignMeta] = useState<{
@@ -444,6 +447,66 @@ export function DesignerRoot({
   }, [keyHandler]);
 
   /* ------------------------------ Header Badges ---------------------------- */
+
+  /* ----------------------------- Drag Handlers ----------------------------- */
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      if (!over) return;
+
+      // Expect dragged action (library) onto a step droppable
+      const activeId = active.id.toString();
+      const overId = over.id.toString();
+
+      if (
+        activeId.startsWith("action-") &&
+        overId.startsWith("step-") &&
+        active.data.current?.action
+      ) {
+        const actionDef = active.data.current.action as {
+          id: string;
+          type: string;
+          name: string;
+          category: string;
+          description?: string;
+          source: { kind: string; pluginId?: string; pluginVersion?: string };
+          execution?: { transport: string; retryable?: boolean };
+          parameters: Array<{ id: string; name: string }>;
+        };
+
+        const stepId = overId.replace("step-", "");
+        const targetStep = steps.find((s) => s.id === stepId);
+        if (!targetStep) return;
+
+        const execution: ExperimentAction["execution"] =
+          actionDef.execution &&
+          (actionDef.execution.transport === "internal" ||
+            actionDef.execution.transport === "rest" ||
+            actionDef.execution.transport === "ros2")
+            ? {
+                transport: actionDef.execution.transport,
+                retryable: actionDef.execution.retryable ?? false,
+              }
+            : {
+                transport: "internal",
+                retryable: false,
+              };
+        const newAction: ExperimentAction = {
+          id: `action-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+          type: actionDef.type,
+          name: actionDef.name,
+          category: actionDef.category as ExperimentAction["category"],
+          parameters: {},
+          source: actionDef.source as ExperimentAction["source"],
+          execution,
+        };
+
+        upsertAction(stepId, newAction);
+        toast.success(`Added ${actionDef.name} to ${targetStep.name}`);
+      }
+    },
+    [steps, upsertAction],
+  );
   const validationBadge =
     driftStatus === "drift" ? (
       <Badge variant="destructive">Drift</Badge>
@@ -529,14 +592,19 @@ export function DesignerRoot({
       />
 
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border">
+        <DndContext
+          collisionDetection={closestCenter}
+          onDragEnd={handleDragEnd}
+        >
           <PanelsContainer
             left={<ActionLibraryPanel />}
             center={<FlowListView />}
             right={<InspectorPanel />}
-          initialLeftWidth={300}
+            initialLeftWidth={260}
             initialRightWidth={360}
             className="flex-1"
           />
+        </DndContext>
         <BottomStatusBar
           onSave={() => persist()}
           onValidate={() => validateDesign()}

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

@@ -1,11 +1,36 @@
 import React, { useCallback, useMemo } from "react";
 import { useDesignerStore } from "../state/store";
 import { StepFlow } from "../StepFlow";
+import { useDroppable } from "@dnd-kit/core";
 import type {
   ExperimentAction,
   ExperimentStep,
 } from "~/lib/experiment-designer/types";
 
+/**
+ * Hidden droppable anchors so actions dragged from the ActionLibraryPanel
+ * can land on steps even though StepFlow is still a legacy component.
+ * This avoids having to deeply modify StepFlow during the transitional phase.
+ */
+function HiddenDroppableAnchors({ stepIds }: { stepIds: string[] }) {
+  return (
+    <>
+      {stepIds.map((id) => (
+        <SingleAnchor key={id} id={id} />
+      ))}
+    </>
+  );
+}
+
+function SingleAnchor({ id }: { id: string }) {
+  // Register a droppable area matching the StepFlow internal step id pattern
+  useDroppable({
+    id: `step-${id}`,
+  });
+  // Render nothing (zero-size element) – DnD kit only needs the registration
+  return null;
+}
+
 /**
  * FlowListView (Transitional)
  *
@@ -34,7 +59,10 @@ export interface FlowListViewProps {
   /**
    * Optional callbacks for higher-level orchestration (e.g. autosave triggers)
    */
-  onStepMutated?: (step: ExperimentStep, kind: "create" | "update" | "delete") => void;
+  onStepMutated?: (
+    step: ExperimentStep,
+    kind: "create" | "update" | "delete",
+  ) => void;
   onActionMutated?: (
     action: ExperimentAction,
     step: ExperimentStep,
@@ -118,6 +146,8 @@ export function FlowListView({
         </div>
       </div>
       <div className="h-[calc(100%-2.5rem)]">
+        {/* Hidden droppable anchors to enable dropping actions onto steps */}
+        <HiddenDroppableAnchors stepIds={steps.map((s) => s.id)} />
         <StepFlow
           steps={steps}
           selectedStepId={selectedStepId ?? null}

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

@@ -125,8 +125,8 @@ function DraggableAction({
       {...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",
+        "group bg-background/60 hover:bg-accent/50 relative flex w-full cursor-grab flex-col items-start gap-1 rounded border px-2 transition-colors",
-        compact ? "py-1 text-[11px]" : "py-2 text-xs",
+        compact ? "py-2 text-[11px]" : "py-3 text-[12px]",
         isDragging && "opacity-50",
       )}
       draggable={false}
@@ -218,8 +218,7 @@ export function ActionLibraryPanel() {
     }
   }, []);
 
-  const persistFavorites = useCallback(
+  const persistFavorites = useCallback((next: Set<string>) => {
-    (next: Set<string>) => {
     try {
       localStorage.setItem(
         FAVORITES_STORAGE_KEY,
@@ -228,9 +227,7 @@ export function ActionLibraryPanel() {
     } catch {
       /* noop */
     }
-    },
+  }, []);
-    [],
-  );
 
   const toggleFavorite = useCallback(
     (id: string) => {
@@ -254,7 +251,12 @@ export function ActionLibraryPanel() {
   }> = [
     { 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: "control",
+      label: "Control",
+      icon: GitBranch,
+      color: "bg-amber-500",
+    },
     { key: "observation", label: "Observe", icon: Eye, color: "bg-purple-600" },
   ];
 
@@ -329,10 +331,10 @@ export function ActionLibraryPanel() {
   return (
     <div className="flex h-full flex-col">
       {/* Toolbar */}
-      <div className="border-b bg-background/60 p-2">
+      <div className="bg-background/60 border-b 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" />
+            <Search className="text-muted-foreground absolute top-1/2 left-2 h-3.5 w-3.5 -translate-y-1/2" />
             <Input
               value={search}
               onChange={(e) => setSearch(e.target.value)}
@@ -413,20 +415,22 @@ export function ActionLibraryPanel() {
           })}
         </div>
 
-        <div className="mt-2 flex items-center justify-between text-[10px] text-muted-foreground">
+        <div className="text-muted-foreground mt-2 flex items-center justify-between text-[10px]">
           <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>
+            <span>
+              Plugins: {registry.getDebugInfo().pluginActionsLoaded ? "✓" : "…"}
+            </span>
           </div>
         </div>
       </div>
 
       {/* Actions List */}
       <ScrollArea className="flex-1">
-        <div className="space-y-1 p-2">
+        <div className="grid grid-cols-1 gap-2 p-2 sm:grid-cols-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" />
@@ -448,7 +452,7 @@ export function ActionLibraryPanel() {
       </ScrollArea>
 
       {/* Footer Summary */}
-      <div className="border-t bg-background/60 p-2">
+      <div className="bg-background/60 border-t 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]">
@@ -460,7 +464,7 @@ export function ActionLibraryPanel() {
               </Badge>
             )}
           </div>
-          <div className="flex items-center gap-1 text-muted-foreground">
+          <div className="text-muted-foreground flex items-center gap-1">
             <Sparkles className="h-3 w-3" />
             Core: {registry.getDebugInfo().coreActionsLoaded ? "✓" : "…"}
           </div>

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

@@ -17,7 +17,6 @@ import {
   Settings,
   AlertTriangle,
   GitBranch,
-  ListChecks,
   PackageSearch,
 } from "lucide-react";
 
@@ -83,10 +82,7 @@ export function InspectorPanel({
   );
 
   const selectedAction: ExperimentAction | undefined = useMemo(
-    () =>
+    () => selectedStep?.actions.find((a) => a.id === selectedActionId),
-      selectedStep?.actions.find(
-        (a) => a.id === selectedActionId,
-      ) as ExperimentAction | undefined,
     [selectedStep, selectedActionId],
   );
 
@@ -112,11 +108,7 @@ export function InspectorPanel({
 
   const handleTabChange = useCallback(
     (val: string) => {
-      if (
+      if (val === "properties" || val === "issues" || val === "dependencies") {
-        val === "properties" ||
-        val === "issues" ||
-        val === "dependencies"
-      ) {
         if (activeTab) {
           onTabChange?.(val);
         } else {
@@ -131,11 +123,7 @@ export function InspectorPanel({
   /* Mutation Handlers (pass-through to store)                                */
   /* ------------------------------------------------------------------------ */
   const handleActionUpdate = useCallback(
-    (
+    (stepId: string, actionId: string, updates: Partial<ExperimentAction>) => {
-      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);
@@ -159,10 +147,7 @@ export function InspectorPanel({
   /* ------------------------------------------------------------------------ */
   const issueCount = useMemo(
     () =>
-      Object.values(validationIssues).reduce(
+      Object.values(validationIssues).reduce((sum, arr) => sum + arr.length, 0),
-        (sum, arr) => sum + arr.length,
-        0,
-      ),
     [validationIssues],
   );
 
@@ -179,7 +164,7 @@ export function InspectorPanel({
   return (
     <div
       className={cn(
-        "flex h-full flex-col border-l bg-background/40 backdrop-blur-sm",
+        "bg-background/40 flex h-full flex-col border-l backdrop-blur-sm",
         className,
       )}
     >
@@ -209,7 +194,7 @@ export function InspectorPanel({
                 Issues{issueCount > 0 ? ` (${issueCount})` : ""}
               </span>
               {issueCount > 0 && (
-                <span className="text-amber-600 dark:text-amber-400 sm:hidden">
+                <span className="text-amber-600 sm:hidden dark:text-amber-400">
                   {issueCount}
                 </span>
               )}
@@ -224,7 +209,7 @@ export function InspectorPanel({
                 Deps{driftCount > 0 ? ` (${driftCount})` : ""}
               </span>
               {driftCount > 0 && (
-                <span className="text-purple-600 dark:text-purple-400 sm:hidden">
+                <span className="text-purple-600 sm:hidden dark:text-purple-400">
                   {driftCount}
                 </span>
               )}
@@ -243,13 +228,11 @@ export function InspectorPanel({
           >
             {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">
+                <div className="bg-background/70 flex h-10 w-10 items-center justify-center rounded-full border">
                   <GitBranch className="h-5 w-5" />
                 </div>
                 <div className="space-y-1">
-                    <p className="text-sm font-medium">
+                  <p className="text-sm font-medium">Select a Step or Action</p>
-                      Select a Step or Action
-                    </p>
                   <p className="text-xs">
                     Click within the flow to edit its properties here.
                   </p>
@@ -315,15 +298,13 @@ export function InspectorPanel({
                   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);
                   }}
                 />
@@ -334,7 +315,7 @@ export function InspectorPanel({
       </div>
 
       {/* Footer (lightweight) */}
-      <div className="border-t px-3 py-1.5 text-[10px] text-muted-foreground">
+      <div className="text-muted-foreground border-t px-3 py-1.5 text-[10px]">
         Inspector • {selectedStep ? "Step" : selectedAction ? "Action" : "None"}{" "}
         • {issueCount} issues • {driftCount} drift
       </div>