feat(home): add Role Manager card + fix ecosystem toggle on /role-manager

src/app/page.tsx

@@ -22,6 +22,7 @@ import {
 	MonitorIcon,
 	PolkadotIcon,
 	RelayersIcon,
+	RoleManagerIcon,
 	StarknetIcon,
 	StellarIcon,
 	SuiIcon,
@@ -170,6 +171,13 @@ export default function HomePage() {
 							title="UI Builder"
 							description="Spin up user interfaces for any deployed contract. Select the function, auto-generate a React UI with wallet-connect and multi-network support, and export a complete app."
 						/>
+
+						<FeatureCard
+							href="/role-manager"
+							icon={<RoleManagerIcon className="h-6 w-6 sm:h-8 sm:w-8" />}
+							title="Role Manager"
+							description="Manage contract permissions from one interface to define role-based access, set multi-level hierarchies, and assign granular admin controls for any team or governance model."
+						/>
 					</div>
 				</div>
 

src/components/icons/index.ts

@@ -12,6 +12,7 @@ export { MidnightIcon } from "./midnight-icon";
 export { MonitorIcon } from "./monitor-icon";
 export { PolkadotIcon } from "./polkadot-icon";
 export { RelayersIcon } from "./relayers-icon";
+export { RoleManagerIcon } from "./role-manager-icon";
 export { StarknetIcon } from "./starknet-icon";
 export { StellarIcon } from "./stellar-icon";
 export { SuiIcon } from "./sui-icon";

src/components/icons/role-manager-icon.tsx

@@ -0,0 +1,42 @@
+export function RoleManagerIcon({ className }: { className: string }) {
+	return (
+		<svg
+			width="1em"
+			height="1em"
+			viewBox="0 0 32 32"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={className}
+		>
+			<title>Role Manager Icon</title>
+			<path
+				d="M7.70902 25.6667H17.6245C18.3772 25.6667 18.9694 25.0423 18.8195 24.3047C18.4054 22.2684 17.053 18.6667 12.6668 18.6667C8.28053 18.6667 6.92817 22.2684 6.51409 24.3047C6.36411 25.0423 6.95635 25.6667 7.70902 25.6667Z"
+				stroke="currentColor"
+				strokeWidth="1.6887"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<path
+				d="M21 18.6667C23.7717 18.6667 24.9069 21.5306 25.3652 23.5947C25.6127 24.7095 24.7111 25.6667 23.5692 25.6667H22.3333"
+				stroke="currentColor"
+				strokeWidth="1.6887"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<path
+				d="M16.3333 10.0002C16.3333 12.0252 14.6917 13.6668 12.6667 13.6668C10.6416 13.6668 9 12.0252 9 10.0002C9 7.97512 10.6416 6.3335 12.6667 6.3335C14.6917 6.3335 16.3333 7.97512 16.3333 10.0002Z"
+				stroke="currentColor"
+				strokeWidth="1.6887"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<path
+				d="M19.667 13.6668C21.692 13.6668 23.0003 12.0252 23.0003 10.0002C23.0003 7.97512 21.692 6.3335 19.667 6.3335"
+				stroke="currentColor"
+				strokeWidth="1.6887"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	);
+}

src/components/layout/docs-layout-client.tsx

@@ -54,6 +54,7 @@ export function DocsLayoutClient({ children }: DocsLayoutClientProps) {
 			pathname.startsWith("/monitor") ||
 			pathname.startsWith("/relayer") ||
 			pathname.startsWith("/ui-builder") ||
+			pathname.startsWith("/role-manager") ||
 			pathname.startsWith("/ecosystem-adapters") ||
 			pathname.startsWith("/tools");
 
@@ -65,6 +66,7 @@ export function DocsLayoutClient({ children }: DocsLayoutClientProps) {
 						"/monitor",
 						"/relayer",
 						"/ui-builder",
+						"/role-manager",
 						"/ecosystem-adapters",
 						"/tools",
 					])
@@ -103,6 +105,7 @@ export function DocsLayoutClient({ children }: DocsLayoutClientProps) {
 			"/relayer",
 			"/monitor",
 			"/ui-builder",
+			"/role-manager",
 			"/upgrades",
 		]);
 		if (

src/hooks/use-navigation-tree.ts

@@ -57,7 +57,8 @@ export function useNavigationTree() {
 		) {
 			sessionStorage.setItem("lastEcosystem", "ethereum");
 		} else {
-			// Shared paths (/ui-builder, /monitor, /relayer, /ecosystem-adapters, /tools)
+			// Shared paths (/ui-builder, /monitor, /relayer, /role-manager,
+			// /ecosystem-adapters, /tools)
 			// have no ecosystem in their prefix. If the specific page is uniquely owned
 			// by one ecosystem (e.g. /relayer/.../guides/stellar-channels-guide -> Stellar),
 			// persist that so later navigation to ambiguous shared pages (quickstart, api/*)
@@ -105,6 +106,7 @@ export function useNavigationTree() {
 			pathname.startsWith("/monitor") ||
 			pathname.startsWith("/relayer") ||
 			pathname.startsWith("/ui-builder") ||
+			pathname.startsWith("/role-manager") ||
 			pathname.startsWith("/ecosystem-adapters") ||
 			pathname.startsWith("/tools")
 		) {