fix: v2 - component editor preview

src/components/shared/ComponentEditor/components/PreviewTaskNodeCard.tsx

@@ -1,46 +1,42 @@
-import { QueryErrorResetBoundary } from "@tanstack/react-query";
-import { Suspense, useRef } from "react";
+import { ReactFlowProvider } from "@xyflow/react";
+import { useRef } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
 import { Skeleton } from "@/components/ui/skeleton";
-import { TaskNodeProvider } from "@/providers/TaskNodeProvider";
-import type { TaskNodeData } from "@/types/taskNode";
+import type { TaskNodeViewProps } from "@/routes/v2/shared/nodes/TaskNode/TaskNode";
+import { TaskNodeCard } from "@/routes/v2/shared/nodes/TaskNode/TaskNodeCard";
+import { SpecProvider } from "@/routes/v2/shared/providers/SpecContext";
 
-import { TaskNodeCard } from "../../ReactFlow/FlowCanvas/TaskNode/TaskNodeCard";
-import { usePreviewTaskNodeData } from "../usePreviewTaskNodeData";
+import { buildPreviewTaskNodeViewProps } from "../utils/buildPreviewTaskNodeViewProps";
 import { PointersEventBlock } from "./PointersEventBlock";
 
 export const PreviewTaskNodeCard = ({
   componentText,
 }: {
   componentText: string;
 }) => {
-  const previewNodeData = usePreviewTaskNodeData(componentText);
-  const lastValidDataRef = useRef<TaskNodeData | null>(null);
+  const viewProps = buildPreviewTaskNodeViewProps(componentText);
+  const lastValidPropsRef = useRef<TaskNodeViewProps | null>(null);
 
-  if (previewNodeData) {
-    lastValidDataRef.current = previewNodeData;
+  if (viewProps) {
+    lastValidPropsRef.current = viewProps;
   }
 
-  const displayData = previewNodeData || lastValidDataRef.current;
+  const displayProps = viewProps ?? lastValidPropsRef.current;
 
-  if (!displayData) {
+  if (!displayProps) {
     return <Skeleton size="lg" shape="square" />;
   }
 
   return (
-    <QueryErrorResetBoundary>
-      {({ reset }) => (
-        <ErrorBoundary onReset={reset} fallbackRender={() => null}>
-          <Suspense fallback={null}>
-            <PointersEventBlock>
-              <TaskNodeProvider data={displayData} selected={false}>
-                <TaskNodeCard />
-              </TaskNodeProvider>
-            </PointersEventBlock>
-          </Suspense>
-        </ErrorBoundary>
-      )}
-    </QueryErrorResetBoundary>
+    <ErrorBoundary resetKeys={[componentText]} fallbackRender={() => null}>
+      <ReactFlowProvider>
+        <SpecProvider spec={null}>
+          <PointersEventBlock>
+            <TaskNodeCard {...displayProps} />
+          </PointersEventBlock>
+        </SpecProvider>
+      </ReactFlowProvider>
+    </ErrorBoundary>
   );
 };

src/components/shared/ComponentEditor/utils/buildPreviewTaskNodeViewProps.ts

@@ -0,0 +1,57 @@
+import type { TaskNodeViewProps } from "@/routes/v2/shared/nodes/TaskNode/TaskNode";
+import { AggregatorOutputType } from "@/types/aggregator";
+import { isGraphImplementation } from "@/utils/componentSpec";
+import { componentSpecFromYaml } from "@/utils/yaml";
+
+const noop = () => {};
+
+/**
+ * Maps raw component YAML into the pure-data props consumed by the v2
+ * TaskNodeCard, so a single isolated component can be previewed without the
+ * editor's MobX spec model or ReactFlow node context.
+ */
+export function buildPreviewTaskNodeViewProps(
+  componentText: string,
+): TaskNodeViewProps | null {
+  let spec;
+  try {
+    spec = componentSpecFromYaml(componentText);
+  } catch {
+    return null;
+  }
+
+  return {
+    id: "preview",
+    entityId: "preview",
+    taskName: spec.name ?? "component-preview",
+    selected: false,
+    isHovered: false,
+    isSubgraph: isGraphImplementation(spec.implementation),
+    collapsed: false,
+    description: spec.description ?? "",
+    inputs: (spec.inputs ?? []).map((input) => ({
+      name: input.name,
+      type: input.type,
+      optional: input.optional,
+      default: input.default,
+    })),
+    outputs: (spec.outputs ?? []).map((output) => ({
+      name: output.name,
+      type: output.type,
+    })),
+    connectedInputNames: new Set<string>(),
+    connectedOutputNames: new Set<string>(),
+    annotations: [],
+    taskColor: undefined,
+    cacheDisabled: false,
+    digest: undefined,
+    inputDisplayValues: {},
+    isAggregator: false,
+    outputType: AggregatorOutputType.JsonArray,
+    onOutputTypeChange: noop,
+    onNodeClick: noop,
+    onInputClick: noop,
+    onOutputClick: noop,
+    onHandleClick: noop,
+  };
+}