diff --git a/apps/canvas/front/src/components/node-details.tsx b/apps/canvas/front/src/components/node-details.tsx
index 39ae059..6267ac3 100644
--- a/apps/canvas/front/src/components/node-details.tsx
+++ b/apps/canvas/front/src/components/node-details.tsx
@@ -1,36 +1,37 @@
 import { NodeAppDetails } from "./node-app";
 import { NodeGatewayHttpsDetails } from "./node-gateway-https";
-import { AppNode } from "@/lib/state";
 import { NodeVolumeDetails } from "./node-volume";
 import { NodePostgreSQLDetails } from "./node-postgresql";
 import { NodeMongoDBDetails } from "./node-mongodb";
 import { NodeGithubDetails } from "./node-github";
 import { NodeGatewayTCPDetails } from "./node-gateway-tcp";
+import { NodeDetailsProps } from "@/lib/types";
 
-export function NodeDetails({ node, disabled }: { node: AppNode; disabled?: boolean }) {
+export function NodeDetails(props: NodeDetailsProps) {
 	return (
 		<div className="px-1 flex flex-col gap-2">
-			<NodeDetailsImpl node={node} disabled={disabled} />
+			<NodeDetailsImpl {...props} />
 		</div>
 	);
 }
 
-function NodeDetailsImpl({ node, disabled }: { node: AppNode; disabled?: boolean }) {
+function NodeDetailsImpl(props: NodeDetailsProps) {
+	const { node, ...rest } = props;
 	switch (node.type) {
 		case "app":
-			return <NodeAppDetails node={node} disabled={disabled} />;
+			return <NodeAppDetails {...rest} node={node} />;
 		case "gateway-https":
-			return <NodeGatewayHttpsDetails node={node} disabled={disabled} />;
+			return <NodeGatewayHttpsDetails {...rest} node={node} />;
 		case "gateway-tcp":
-			return <NodeGatewayTCPDetails node={node} disabled={disabled} />;
+			return <NodeGatewayTCPDetails {...rest} node={node} />;
 		case "volume":
-			return <NodeVolumeDetails node={node} disabled={disabled} />;
+			return <NodeVolumeDetails {...rest} node={node} />;
 		case "postgresql":
-			return <NodePostgreSQLDetails node={node} disabled={disabled} />;
+			return <NodePostgreSQLDetails {...rest} node={node} />;
 		case "mongodb":
-			return <NodeMongoDBDetails node={node} disabled={disabled} />;
+			return <NodeMongoDBDetails {...rest} node={node} />;
 		case "github":
-			return <NodeGithubDetails node={node} disabled={disabled} />;
+			return <NodeGithubDetails {...rest} node={node} />;
 		default:
 			return <>nooo</>;
 	}