Add Biome and Husky for code formatting and Git hooks

apps/cli/template/base/packages/client/src/main.tsx

@@ -1,7 +1,7 @@
 import {
-  QueryCache,
-  QueryClient,
-  QueryClientProvider,
+	QueryCache,
+	QueryClient,
+	QueryClientProvider,
 } from "@tanstack/react-query";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { httpBatchLink } from "@trpc/client";
@@ -13,59 +13,60 @@ import { routeTree } from "./routeTree.gen";
 import { trpc } from "./utils/trpc";
 
 const queryClient = new QueryClient({
-  queryCache: new QueryCache({
-    onError: (error) => {
-      toast.error(error.message, {
-        action: {
-          label: "retry",
-          onClick: () => {
-            queryClient.invalidateQueries();
-          },
-        },
-      });
-    },
-  }),
+	queryCache: new QueryCache({
+		onError: (error) => {
+			toast.error(error.message, {
+				action: {
+					label: "retry",
+					onClick: () => {
+						queryClient.invalidateQueries();
+					},
+				},
+			});
+		},
+	}),
 });
 
 const trpcClient = trpc.createClient({
-  links: [
-    httpBatchLink({
-      url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
-    }),
-  ],
+	links: [
+		httpBatchLink({
+			url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
+		}),
+	],
 });
 
 export const trpcQueryUtils = createTRPCQueryUtils({
-  queryClient,
-  client: trpcClient,
+	queryClient,
+	client: trpcClient,
 });
 
 const router = createRouter({
-  routeTree,
-  defaultPreload: "intent",
-  context: { trpcQueryUtils },
-  defaultPendingComponent: () => <Loader />,
-  Wrap: function WrapComponent({ children }) {
-    return (
-      <trpc.Provider client={trpcClient} queryClient={queryClient}>
-        <QueryClientProvider client={queryClient}>
-          {children}
-        </QueryClientProvider>
-      </trpc.Provider>
-    );
-  },
+	routeTree,
+	defaultPreload: "intent",
+	context: { trpcQueryUtils },
+	defaultPendingComponent: () => <Loader />,
+	Wrap: function WrapComponent({ children }) {
+		return (
+			<trpc.Provider client={trpcClient} queryClient={queryClient}>
+				<QueryClientProvider client={queryClient}>
+					{children}
+				</QueryClientProvider>
+			</trpc.Provider>
+		);
+	},
 });
 
 // Register things for typesafety
 declare module "@tanstack/react-router" {
-  interface Register {
-    router: typeof router;
-  }
+	interface Register {
+		router: typeof router;
+	}
 }
 
-const rootElement = document.getElementById("app")!;
+const rootElement = document.getElementById("app");
+if (!rootElement) throw new Error("Root element not found");
 
 if (!rootElement.innerHTML) {
-  const root = ReactDOM.createRoot(rootElement);
-  root.render(<RouterProvider router={router} />);
+	const root = ReactDOM.createRoot(rootElement);
+	root.render(<RouterProvider router={router} />);
 }

apps/cli/template/base/packages/client/src/routes/index.tsx

@@ -33,9 +33,9 @@ function HomeComponent() {
         <section className="rounded-lg border p-4">
           <h2 className="mb-2 font-medium">API Status</h2>
           <div className="flex items-center gap-2">
-            <div
-              className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
-            ></div>
+           	<div
+							className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
+						/>
             <span className="text-sm text-muted-foreground">
               {healthCheck.isLoading
                 ? "Checking..."