diff --git a/apps/canvas/front/src/components/node-rect.tsx b/apps/canvas/front/src/components/node-rect.tsx
index 615f7a1..257353e 100644
--- a/apps/canvas/front/src/components/node-rect.tsx
+++ b/apps/canvas/front/src/components/node-rect.tsx
@@ -3,57 +3,63 @@
 import { useEffect, useState } from "react";
 
 export type Props = {
-    id: string;
-    selected?: boolean;
-    children: React.ReactNode;
-    type: NodeType;
-    state: string | null;
+	id: string;
+	selected?: boolean;
+	children: React.ReactNode;
+	type: NodeType;
+	state: string | null;
 };
 
 export function NodeRect(p: Props) {
-    const { id, selected, children, state } = p;
-    const messages = useNodeMessages(id);
-    const hasFatal = messages.some((m) => m.type === "FATAL");
-    const hasWarning = messages.some((m) => m.type === "WARNING");
-    const [classes, setClasses] = useState<string[]>([]);
-    const [stateClasses, setStateClasses] = useState<string[]>([]);
-    useEffect(() => {
-        const classes = ["px-4", "py-2", "rounded-md", "bg-white"];
-        if (hasFatal) {
-            classes.push("border-red-500");
-        } else if (hasWarning) {
-            classes.push("border-yellow-500");
-        } else {
-            classes.push("border-black");
-        }
-        if (selected) {
-            classes.push("border-2");
-        } else {
-            classes.push("border");
-        }
-        setClasses(classes);
-        const stateClasses: string[] = [];
-        if (state === "processing") {
-            stateClasses.push("bg-yellow-500");
-            stateClasses.push("animate-pulse");
-        } else if (state === "success") {
-            stateClasses.push("bg-green-500");
-        } else if (state === "failure") {
-            stateClasses.push("bg-red-500");
-        } else {
-            stateClasses.push("bg-black");
-        }
-        setStateClasses(stateClasses);
-    }, [selected, hasFatal, hasWarning, state, setClasses, setStateClasses]);
-    return (
-        <div className={classes.join(" ")}>
-            <div style={{ position: "absolute", top: "5px", left: "5px" }}>
-                {Icon(p.type)}
-            </div>
-            <div style={{ position: "absolute", top: "5px", right: "5px", borderRadius: "50%", width: "5px", height: "5px" }} className={stateClasses.join(" ")}>
-            </div>
-            {children}
-        </div>
-    )
-
+	const { id, selected, children, state } = p;
+	const messages = useNodeMessages(id);
+	const hasFatal = messages.some((m) => m.type === "FATAL");
+	const hasWarning = messages.some((m) => m.type === "WARNING");
+	const [classes, setClasses] = useState<string[]>([]);
+	const [stateClasses, setStateClasses] = useState<string[]>([]);
+	useEffect(() => {
+		const classes = ["px-4", "py-2", "rounded-md", "bg-white"];
+		if (hasFatal) {
+			classes.push("border-red-500");
+		} else if (hasWarning) {
+			classes.push("border-yellow-500");
+		} else {
+			classes.push("border-black");
+		}
+		if (selected) {
+			classes.push("border-2");
+		} else {
+			classes.push("border");
+		}
+		setClasses(classes);
+		const stateClasses: string[] = [];
+		if (state === "processing") {
+			stateClasses.push("bg-yellow-500");
+			stateClasses.push("animate-pulse");
+		} else if (state === "success") {
+			stateClasses.push("bg-green-500");
+		} else if (state === "failure") {
+			stateClasses.push("bg-red-500");
+		} else {
+			stateClasses.push("bg-black");
+		}
+		setStateClasses(stateClasses);
+	}, [selected, hasFatal, hasWarning, state, setClasses, setStateClasses]);
+	return (
+		<div className={classes.join(" ")}>
+			<div style={{ position: "absolute", top: "5px", left: "5px" }}>{Icon(p.type)}</div>
+			<div
+				style={{
+					position: "absolute",
+					top: "5px",
+					right: "5px",
+					borderRadius: "50%",
+					width: "5px",
+					height: "5px",
+				}}
+				className={stateClasses.join(" ")}
+			></div>
+			{children}
+		</div>
+	);
 }