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

2026-03-24 11:47:51 -04: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/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>