diff --git a/apps/canvas/front/src/components/node-github.tsx b/apps/canvas/front/src/components/node-github.tsx
index 6ece1b0..37213b8 100644
--- a/apps/canvas/front/src/components/node-github.tsx
+++ b/apps/canvas/front/src/components/node-github.tsx
@@ -1,165 +1,179 @@
-import { NodeRect } from './node-rect';
-import { GithubNode, nodeIsConnectable, nodeLabel, useStateStore, useGithubService } from '@/lib/state';
-import { useEffect, useMemo, useState } from 'react';
+import { NodeRect } from "./node-rect";
+import { GithubNode, nodeIsConnectable, nodeLabel, useStateStore, useGithubService } from "@/lib/state";
+import { useEffect, useMemo, useState } from "react";
 import { z } from "zod";
-import { DeepPartial, EventType, useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Form, FormControl, FormField, FormItem, FormMessage } from './ui/form';
+import { DeepPartial, EventType, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Form, FormControl, FormField, FormItem, FormMessage } from "./ui/form";
 import { Handle, Position } from "@xyflow/react";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
-import { GitHubRepository } from '../lib/github';
-import { useProjectId } from '@/lib/state';
-import { Alert, AlertDescription } from './ui/alert';
-import { AlertCircle } from 'lucide-react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+import { GitHubRepository } from "../lib/github";
+import { useProjectId } from "@/lib/state";
+import { Alert, AlertDescription } from "./ui/alert";
+import { AlertCircle } from "lucide-react";
 
 export function NodeGithub(node: GithubNode) {
-  const { id, selected } = node;
-  const isConnectable = useMemo(() => nodeIsConnectable(node, "repository"), [node]);
-  return (
-    <NodeRect id={id} selected={selected} type={node.type} state={node.data.state}>
-      <div style={{ padding: '10px 20px' }}>
-        {nodeLabel(node)}
-        <Handle
-          id="repository"
-          type={"source"}
-          position={Position.Right}
-          isConnectableStart={isConnectable}
-          isConnectableEnd={isConnectable}
-          isConnectable={isConnectable}
-        />
-      </div>
-    </NodeRect>
-  );
+	const { id, selected } = node;
+	const isConnectable = useMemo(() => nodeIsConnectable(node, "repository"), [node]);
+	return (
+		<NodeRect id={id} selected={selected} type={node.type} state={node.data.state}>
+			<div style={{ padding: "10px 20px" }}>
+				{nodeLabel(node)}
+				<Handle
+					id="repository"
+					type={"source"}
+					position={Position.Right}
+					isConnectableStart={isConnectable}
+					isConnectableEnd={isConnectable}
+					isConnectable={isConnectable}
+				/>
+			</div>
+		</NodeRect>
+	);
 }
 
 const schema = z.object({
-  repositoryId: z.number().optional(),
+	repositoryId: z.number().optional(),
 });
 
 export function NodeGithubDetails(node: GithubNode) {
-  const { id, data } = node;
-  const store = useStateStore();
-  const projectId = useProjectId();
-  const [repos, setRepos] = useState<GitHubRepository[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const githubService = useGithubService();
+	const { id, data } = node;
+	const store = useStateStore();
+	const projectId = useProjectId();
+	const [repos, setRepos] = useState<GitHubRepository[]>([]);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const githubService = useGithubService();
 
-  useEffect(() => {
-    if (data.repository) {
-      const { id, sshURL } = data.repository;
-      setRepos(prevRepos => {
-        if (!prevRepos.some(r => r.id === id)) {
-          return [...prevRepos, {
-            id,
-            name: sshURL.split('/').pop() || '',
-            full_name: sshURL.split('/').slice(-2).join('/'),
-            html_url: '',
-            ssh_url: sshURL,
-            description: null,
-            private: false,
-            default_branch: 'main'
-          }];
-        }
-        return prevRepos;
-      });
-    }
-  }, [data.repository]);
+	useEffect(() => {
+		if (data.repository) {
+			const { id, sshURL } = data.repository;
+			setRepos((prevRepos) => {
+				if (!prevRepos.some((r) => r.id === id)) {
+					return [
+						...prevRepos,
+						{
+							id,
+							name: sshURL.split("/").pop() || "",
+							full_name: sshURL.split("/").slice(-2).join("/"),
+							html_url: "",
+							ssh_url: sshURL,
+							description: null,
+							private: false,
+							default_branch: "main",
+						},
+					];
+				}
+				return prevRepos;
+			});
+		}
+	}, [data.repository]);
 
-  const form = useForm<z.infer<typeof schema>>({
-    resolver: zodResolver(schema),
-    mode: "onChange",
-    defaultValues: {
-      repositoryId: data.repository?.id,
-    }
-  });
+	const form = useForm<z.infer<typeof schema>>({
+		resolver: zodResolver(schema),
+		mode: "onChange",
+		defaultValues: {
+			repositoryId: data.repository?.id,
+		},
+	});
 
-  useEffect(() => {
-    const sub = form.watch((value: DeepPartial<z.infer<typeof schema>>, { name, type }: { name?: keyof z.infer<typeof schema> | undefined, type?: EventType | undefined }) => {
-      if (type !== "change") {
-        return;
-      }
-      switch (name) {
-        case "repositoryId":
-          if (value.repositoryId) {
-            const repo = repos.find(r => r.id === value.repositoryId);
-            if (repo) {
-              store.updateNodeData<"github">(id, {
-                repository: {
-                  id: repo.id,
-                  sshURL: repo.ssh_url,
-                },
-              });
-            }
-          }
-          break;
-      }
-    });
-    return () => sub.unsubscribe();
-  }, [form, store, id, repos]);
+	useEffect(() => {
+		const sub = form.watch(
+			(
+				value: DeepPartial<z.infer<typeof schema>>,
+				{ name, type }: { name?: keyof z.infer<typeof schema> | undefined; type?: EventType | undefined },
+			) => {
+				if (type !== "change") {
+					return;
+				}
+				switch (name) {
+					case "repositoryId":
+						if (value.repositoryId) {
+							const repo = repos.find((r) => r.id === value.repositoryId);
+							if (repo) {
+								store.updateNodeData<"github">(id, {
+									repository: {
+										id: repo.id,
+										sshURL: repo.ssh_url,
+									},
+								});
+							}
+						}
+						break;
+				}
+			},
+		);
+		return () => sub.unsubscribe();
+	}, [form, store, id, repos]);
 
-  useEffect(() => {
-    const fetchRepositories = async () => {
-      if (!githubService) return;
+	useEffect(() => {
+		const fetchRepositories = async () => {
+			if (!githubService) return;
 
-      setLoading(true);
-      setError(null);
-      try {
-        const repositories = await githubService.getRepositories();
-        setRepos(repositories);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : "Failed to fetch repositories");
-      } finally {
-        setLoading(false);
-      }
-    };
+			setLoading(true);
+			setError(null);
+			try {
+				const repositories = await githubService.getRepositories();
+				setRepos(repositories);
+			} catch (err) {
+				setError(err instanceof Error ? err.message : "Failed to fetch repositories");
+			} finally {
+				setLoading(false);
+			}
+		};
 
-    fetchRepositories();
-  }, [githubService]);
+		fetchRepositories();
+	}, [githubService]);
 
-  return (
-    <>
-      <Form {...form}>
-        <form className="space-y-2">
-          <FormField
-            control={form.control}
-            name="repositoryId"
-            render={({ field }) => (
-              <FormItem>
-                <Select
-                  onValueChange={(value) => field.onChange(Number(value))}
-                  value={field.value?.toString()}
-                  disabled={loading || !projectId || !githubService}
-                >
-                  <FormControl>
-                    <SelectTrigger>
-                      <SelectValue placeholder={githubService ? "Select a repository" : "GitHub not configured"} />
-                    </SelectTrigger>
-                  </FormControl>
-                  <SelectContent>
-                    {repos.map((repo) => (
-                      <SelectItem key={repo.id} value={repo.id.toString()}>
-                        {repo.full_name}
-                        {repo.description && ` - ${repo.description}`}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                <FormMessage />
-                {error && <p className="text-sm text-red-500">{error}</p>}
-                {loading && <p className="text-sm text-gray-500">Loading repositories...</p>}
-                {!githubService && (
-                  <Alert variant="destructive" className="mt-2">
-                    <AlertCircle className="h-4 w-4" />
-                    <AlertDescription>
-                      GitHub access token is not configured. Please configure it in the Integrations tab.
-                    </AlertDescription>
-                  </Alert>
-                )}
-              </FormItem>
-            )}
-          />
-        </form>
-      </Form>
-    </>);
-}
\ No newline at end of file
+	return (
+		<>
+			<Form {...form}>
+				<form className="space-y-2">
+					<FormField
+						control={form.control}
+						name="repositoryId"
+						render={({ field }) => (
+							<FormItem>
+								<Select
+									onValueChange={(value) => field.onChange(Number(value))}
+									value={field.value?.toString()}
+									disabled={loading || !projectId || !githubService}
+								>
+									<FormControl>
+										<SelectTrigger>
+											<SelectValue
+												placeholder={
+													githubService ? "Select a repository" : "GitHub not configured"
+												}
+											/>
+										</SelectTrigger>
+									</FormControl>
+									<SelectContent>
+										{repos.map((repo) => (
+											<SelectItem key={repo.id} value={repo.id.toString()}>
+												{repo.full_name}
+												{repo.description && ` - ${repo.description}`}
+											</SelectItem>
+										))}
+									</SelectContent>
+								</Select>
+								<FormMessage />
+								{error && <p className="text-sm text-red-500">{error}</p>}
+								{loading && <p className="text-sm text-gray-500">Loading repositories...</p>}
+								{!githubService && (
+									<Alert variant="destructive" className="mt-2">
+										<AlertCircle className="h-4 w-4" />
+										<AlertDescription>
+											GitHub access token is not configured. Please configure it in the
+											Integrations tab.
+										</AlertDescription>
+									</Alert>
+								)}
+							</FormItem>
+						)}
+					/>
+				</form>
+			</Form>
+		</>
+	);
+}