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

2025-12-11 14:44:44 -05:00 · 2025-08-11 16:48:30 -04:00
parent 245150e9ef
commit 11b6ec89e7
4 changed files with 181 additions and 98 deletions
--- a/src/components/experiments/designer/DesignerRoot.tsx
+++ b/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">
-        <PanelsContainer
-          left={<ActionLibraryPanel />}
-          center={<FlowListView />}
-          right={<InspectorPanel />}
-          initialLeftWidth={300}
-          initialRightWidth={360}
-          className="flex-1"
-        />
+        <DndContext
+          collisionDetection={closestCenter}
+          onDragEnd={handleDragEnd}
+        >
+          <PanelsContainer
+            left={<ActionLibraryPanel />}
+            center={<FlowListView />}
+            right={<InspectorPanel />}
+            initialLeftWidth={260}
+            initialRightWidth={360}
+            className="flex-1"
+          />
+        </DndContext>
        <BottomStatusBar
          onSave={() => persist()}
          onValidate={() => validateDesign()}
--- a/src/components/experiments/designer/flow/FlowListView.tsx
+++ b/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,10 +146,12 @@ 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}
-            selectedActionId={selectedActionId ?? null}
+          selectedStepId={selectedStepId ?? null}
+          selectedActionId={selectedActionId ?? null}
          onStepSelect={(id) => selectStep(id)}
          onActionSelect={(actionId) =>
            selectedStepId && actionId
--- a/src/components/experiments/designer/panels/ActionLibraryPanel.tsx
+++ b/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",
-        compact ? "py-1 text-[11px]" : "py-2 text-xs",
+        "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-2 text-[11px]" : "py-3 text-[12px]",
        isDragging && "opacity-50",
      )}
      draggable={false}
@@ -218,19 +218,16 @@ export function ActionLibraryPanel() {
    }
  }, []);

-  const persistFavorites = useCallback(
-    (next: Set<string>) => {
-      try {
-        localStorage.setItem(
-          FAVORITES_STORAGE_KEY,
-            JSON.stringify({ favorites: Array.from(next) }),
-        );
-      } 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) => {
@@ -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>
--- a/src/components/experiments/designer/panels/InspectorPanel.tsx
+++ b/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,
-      ) as ExperimentAction | undefined,
+    () => selectedStep?.actions.find((a) => a.id === selectedActionId),
    [selectedStep, selectedActionId],
  );

@@ -112,11 +108,7 @@ export function InspectorPanel({

  const handleTabChange = useCallback(
    (val: string) => {
-      if (
-        val === "properties" ||
-        val === "issues" ||
-        val === "dependencies"
-      ) {
+      if (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(
-        (sum, arr) => sum + arr.length,
-        0,
-      ),
+      Object.values(validationIssues).reduce((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>
              )}
@@ -237,45 +222,43 @@ export function InspectorPanel({
      <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>
+          <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="bg-background/70 flex h-10 w-10 items-center justify-center rounded-full border">
+                  <GitBranch className="h-5 w-5" />
                </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>
+                <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
@@ -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>