solforge 0.2.4 → 0.2.6

package/src/gui/server.ts

@@ -1,13 +1,12 @@
-import { serve } from "bun";
+import { file, serve } from "bun";
 import type { LiteSVMRpcServer } from "../../server/rpc-server";
 import type { JsonRpcResponse } from "../../server/types";
 import { readConfig, writeConfig } from "../config";
-import indexHtml from "./public/index.html";
-import { file } from "bun";
 // Embed built GUI assets as files so the compiled binary can stream them
 import appCssFile from "./public/app.css" with { type: "file" };
-import mainJsFile from "./public/build/main.js" with { type: "file" };
 import bundledCssFile from "./public/build/main.css" with { type: "file" };
+import mainJsFile from "./public/build/main.js" with { type: "file" };
+import indexHtml from "./public/index.html";
 
 type GuiStartOptions = {
 	port?: number;
@@ -47,13 +46,13 @@ const text = (value: string, status = 200) =>
 
 const okOptions = () => new Response(null, { status: 204, headers: CORS });
 const css = (fpath: string) =>
-    new Response(file(fpath), {
-        headers: { ...CORS, "Content-Type": "text/css" },
-    });
+	new Response(file(fpath), {
+		headers: { ...CORS, "Content-Type": "text/css" },
+	});
 const js = (fpath: string) =>
-    new Response(file(fpath), {
-        headers: { ...CORS, "Content-Type": "application/javascript" },
-    });
+	new Response(file(fpath), {
+		headers: { ...CORS, "Content-Type": "application/javascript" },
+	});
 
 const handleError = (error: unknown) => {
 	if (error instanceof HttpError)
@@ -108,7 +107,7 @@ export function startGuiServer(opts: GuiStartOptions = {}) {
 	const rpcServer = opts.rpcServer;
 	const rpcUrl = `http://${host}:${rpcPort}`;
 
-	const callRpc = async (method: string, params: any[] = []) => {
+	const callRpc = async (method: string, params: unknown[] = []) => {
 		if (!rpcServer) throw new HttpError(503, "RPC server not available");
 		const response: JsonRpcResponse = await rpcServer.handleRequest({
 			jsonrpc: "2.0",
@@ -153,11 +152,11 @@ export function startGuiServer(opts: GuiStartOptions = {}) {
 		}
 	}
 
-    const routes = {
-        "/": indexHtml,
-        "/app.css": { GET: () => css(appCssFile) },
-        "/build/main.css": { GET: () => css(bundledCssFile) },
-        "/build/main.js": { GET: () => js(mainJsFile) },
+	const routes = {
+		"/": indexHtml,
+		"/app.css": { GET: () => css(appCssFile) },
+		"/build/main.css": { GET: () => css(bundledCssFile) },
+		"/build/main.js": { GET: () => js(mainJsFile) },
 		"/health": { GET: () => text("ok") },
 		"/api/config": { GET: () => json({ rpcUrl }), OPTIONS: okOptions },
 		"/api/status": {
@@ -284,12 +283,12 @@ export function startGuiServer(opts: GuiStartOptions = {}) {
 		},
 	} as const;
 
-    const server = serve({
-        port,
-        hostname: host,
-        routes,
-        development: false,
-    });
+	const server = serve({
+		port,
+		hostname: host,
+		routes,
+		development: false,
+	});
 	console.log(`🖥️  Solforge GUI available at http://${host}:${server.port}`);
 	return { server, port: server.port };
 }

package/src/gui/src/api.ts

@@ -72,7 +72,7 @@ async function request<T>(path: string, init: RequestInit = {}): Promise<T> {
 	if (!headers.has("content-type") && init.body)
 		headers.set("content-type", "application/json");
 	const response = await fetch(path, { ...init, headers });
-	let payload: any = null;
+	let payload: unknown = null;
 	const text = await response.text();
 	if (text) {
 		try {

package/src/gui/src/app.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useId, useState } from "react";
 import {
 	type ApiConfig,
 	type ApiStatus,
@@ -40,8 +40,9 @@ export function App() {
 			const cfg = await fetchConfig();
 			setConfig(cfg);
 			setBannerError(null);
-		} catch (error: any) {
-			setBannerError(error?.message ?? String(error));
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			setBannerError(message);
 		}
 	}, []);
 
@@ -50,8 +51,9 @@ export function App() {
 		try {
 			const data = await fetchStatus();
 			setStatus(data);
-		} catch (error: any) {
-			setBannerError(error?.message ?? String(error));
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			setBannerError(message);
 		} finally {
 			setLoadingStatus(false);
 		}
@@ -62,8 +64,9 @@ export function App() {
 		try {
 			const data = await fetchPrograms();
 			setPrograms(data);
-		} catch (error: any) {
-			setBannerError(error?.message ?? String(error));
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			setBannerError(message);
 		} finally {
 			setLoadingPrograms(false);
 		}
@@ -74,8 +77,9 @@ export function App() {
 		try {
 			const data = await fetchTokens();
 			setTokens(data);
-		} catch (error: any) {
-			setBannerError(error?.message ?? String(error));
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			setBannerError(message);
 		} finally {
 			setLoadingTokens(false);
 		}
@@ -141,9 +145,20 @@ export function App() {
 		[loadTokens],
 	);
 
-	const scrollToSection = (sectionId: string) => {
+	type SectionKey = "status" | "actions" | "programs" | "tokens";
+	const uid = useId();
+	const sectionIds: Record<SectionKey, string> = {
+		status: `${uid}-status`,
+		actions: `${uid}-actions`,
+		programs: `${uid}-programs`,
+		tokens: `${uid}-tokens`,
+	};
+
+	const scrollToSection = (sectionId: SectionKey) => {
 		setActiveSection(sectionId);
-		document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' });
+		document
+			.getElementById(sectionIds[sectionId])
+			?.scrollIntoView({ behavior: "smooth" });
 		setSidebarOpen(false);
 	};
 
@@ -151,17 +166,22 @@ export function App() {
 		<div className="min-h-screen relative">
 			{/* Mobile Menu Button */}
 			<button
+				type="button"
 				onClick={() => setSidebarOpen(!sidebarOpen)}
 				className="lg:hidden fixed top-4 left-4 z-50 btn-icon bg-gradient-to-br from-purple-600 to-violet-600 border-purple-500/30"
 				aria-label="Menu"
 			>
-				<i className={`fas fa-${sidebarOpen ? 'times' : 'bars'} text-white`}></i>
+				<i
+					className={`fas fa-${sidebarOpen ? "times" : "bars"} text-white`}
+				></i>
 			</button>
 
 			{/* Sidebar Navigation */}
-			<aside className={`fixed top-0 left-0 h-full w-72 glass-panel rounded-none border-r border-white/5 z-40 transition-transform duration-300 ${
-				sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
-			}`}>
+			<aside
+				className={`fixed top-0 left-0 h-full w-72 glass-panel rounded-none border-r border-white/5 z-40 transition-transform duration-300 ${
+					sidebarOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
+				}`}
+			>
 				<div className="p-6 space-y-8">
 					{/* Logo */}
 					<div className="flex items-center gap-3">
@@ -178,45 +198,49 @@ export function App() {
 
 					{/* Navigation Items */}
 					<nav className="space-y-2">
-						<button 
-							onClick={() => scrollToSection('status')}
+						<button
+							type="button"
+							onClick={() => scrollToSection("status")}
 							className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all text-left ${
-								activeSection === 'status' 
-									? 'bg-gradient-to-r from-purple-600/20 to-violet-600/20 border border-purple-500/30 text-purple-300' 
-									: 'text-gray-400 hover:bg-white/5'
+								activeSection === "status"
+									? "bg-gradient-to-r from-purple-600/20 to-violet-600/20 border border-purple-500/30 text-purple-300"
+									: "text-gray-400 hover:bg-white/5"
 							}`}
 						>
 							<i className="fas fa-server w-5"></i>
 							<span className="font-medium">Network Status</span>
 						</button>
-						<button 
-							onClick={() => scrollToSection('actions')}
+						<button
+							type="button"
+							onClick={() => scrollToSection("actions")}
 							className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all text-left ${
-								activeSection === 'actions' 
-									? 'bg-gradient-to-r from-purple-600/20 to-violet-600/20 border border-purple-500/30 text-purple-300' 
-									: 'text-gray-400 hover:bg-white/5'
+								activeSection === "actions"
+									? "bg-gradient-to-r from-purple-600/20 to-violet-600/20 border border-purple-500/30 text-purple-300"
+									: "text-gray-400 hover:bg-white/5"
 							}`}
 						>
 							<i className="fas fa-paper-plane w-5"></i>
 							<span className="font-medium">Quick Actions</span>
 						</button>
-						<button 
-							onClick={() => scrollToSection('programs')}
+						<button
+							type="button"
+							onClick={() => scrollToSection("programs")}
 							className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all text-left ${
-								activeSection === 'programs' 
-									? 'bg-gradient-to-r from-purple-600/20 to-violet-600/20 border border-purple-500/30 text-purple-300' 
-									: 'text-gray-400 hover:bg-white/5'
+								activeSection === "programs"
+									? "bg-gradient-to-r from-purple-600/20 to-violet-600/20 border border-purple-500/30 text-purple-300"
+									: "text-gray-400 hover:bg-white/5"
 							}`}
 						>
 							<i className="fas fa-code w-5"></i>
 							<span className="font-medium">Programs</span>
 						</button>
-						<button 
-							onClick={() => scrollToSection('tokens')}
+						<button
+							type="button"
+							onClick={() => scrollToSection("tokens")}
 							className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all text-left ${
-								activeSection === 'tokens' 
-									? 'bg-gradient-to-r from-purple-600/20 to-violet-600/20 border border-purple-500/30 text-purple-300' 
-									: 'text-gray-400 hover:bg-white/5'
+								activeSection === "tokens"
+									? "bg-gradient-to-r from-purple-600/20 to-violet-600/20 border border-purple-500/30 text-purple-300"
+									: "text-gray-400 hover:bg-white/5"
 							}`}
 						>
 							<i className="fas fa-coins w-5"></i>
@@ -227,13 +251,17 @@ export function App() {
 					{/* Quick Stats */}
 					{config && (
 						<div className="space-y-3">
-							<h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Connection</h3>
+							<h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
+								Connection
+							</h3>
 							<div className="p-3 rounded-xl bg-white/5 border border-white/10">
 								<div className="flex items-center gap-2 mb-2">
 									<span className="status-dot online"></span>
 									<span className="text-xs text-gray-400">Connected</span>
 								</div>
-								<p className="text-xs text-gray-500 font-mono break-all">{config.rpcUrl}</p>
+								<p className="text-xs text-gray-500 font-mono break-all">
+									{config.rpcUrl}
+								</p>
 							</div>
 						</div>
 					)}
@@ -242,9 +270,16 @@ export function App() {
 
 			{/* Overlay for mobile */}
 			{sidebarOpen && (
-				<div 
+				<button
+					type="button"
 					className="fixed inset-0 bg-black/50 backdrop-blur-sm z-30 lg:hidden"
+					aria-label="Close sidebar overlay"
 					onClick={() => setSidebarOpen(false)}
+					onKeyDown={(e) => {
+						if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
+							setSidebarOpen(false);
+						}
+					}}
 				/>
 			)}
 
@@ -262,11 +297,14 @@ export function App() {
 									Manage your local Solana development environment
 								</p>
 							</div>
-							<button 
+							<button
+								type="button"
 								onClick={loadStatus}
 								className="btn-secondary"
 							>
-								<i className={`fas fa-sync-alt ${loadingStatus ? 'animate-spin' : ''}`}></i>
+								<i
+									className={`fas fa-sync-alt ${loadingStatus ? "animate-spin" : ""}`}
+								></i>
 								<span>Refresh All</span>
 							</button>
 						</div>
@@ -279,6 +317,7 @@ export function App() {
 									<p className="text-sm text-red-300">{bannerError}</p>
 								</div>
 								<button
+									type="button"
 									onClick={() => setBannerError(null)}
 									className="text-red-400 hover:text-red-300"
 									aria-label="Close error"
@@ -302,7 +341,7 @@ export function App() {
 					</div>
 
 					{/* Status Panel */}
-					<div id="status" className="animate-fadeIn scroll-mt-24">
+					<div id={sectionIds.status} className="animate-fadeIn scroll-mt-24">
 						<StatusPanel
 							status={status}
 							loading={loadingStatus}
@@ -311,7 +350,11 @@ export function App() {
 					</div>
 
 					{/* Quick Actions - Optional */}
-					<div id="actions" className="glass-panel p-6 animate-fadeIn scroll-mt-24" style={{animationDelay: '0.1s'}}>
+					<div
+						id={sectionIds.actions}
+						className="glass-panel p-6 animate-fadeIn scroll-mt-24"
+						style={{ animationDelay: "0.1s" }}
+					>
 						<AirdropMintForm
 							tokens={tokens}
 							onAirdrop={onAirdrop}
@@ -321,7 +364,11 @@ export function App() {
 
 					{/* Programs and Tokens Stacked */}
 					<div className="space-y-6">
-						<div id="programs" className="animate-fadeIn scroll-mt-24" style={{animationDelay: '0.2s'}}>
+						<div
+							id={sectionIds.programs}
+							className="animate-fadeIn scroll-mt-24"
+							style={{ animationDelay: "0.2s" }}
+						>
 							<ProgramsPanel
 								programs={programs}
 								loading={loadingPrograms}
@@ -329,7 +376,11 @@ export function App() {
 								onAdd={openProgramModal}
 							/>
 						</div>
-						<div id="tokens" className="animate-fadeIn scroll-mt-24" style={{animationDelay: '0.3s'}}>
+						<div
+							id={sectionIds.tokens}
+							className="animate-fadeIn scroll-mt-24"
+							style={{ animationDelay: "0.3s" }}
+						>
 							<TokensPanel
 								tokens={tokens}
 								loading={loadingTokens}
@@ -387,4 +438,4 @@ export function App() {
 			`}</style>
 		</div>
 	);
-}
+}

package/src/gui/src/components/airdrop-mint-form.tsx

@@ -1,14 +1,20 @@
-import { type ChangeEvent, type FormEvent, useMemo, useState } from "react";
+import {
+	type ChangeEvent,
+	type FormEvent,
+	useId,
+	useMemo,
+	useState,
+} from "react";
 import type { TokenSummary } from "../api";
 
 interface Props {
 	tokens: TokenSummary[];
-	onAirdrop: (address: string, lamports: string) => Promise<string | void>;
+	onAirdrop: (address: string, lamports: string) => Promise<string | undefined>;
 	onMint: (
 		mint: string,
 		owner: string,
 		amountRaw: string,
-	) => Promise<string | void>;
+	) => Promise<string | undefined>;
 }
 
 const SOL_OPTION = {
@@ -53,6 +59,11 @@ export function AirdropMintForm({ tokens, onAirdrop, onMint }: Props) {
 	const [error, setError] = useState<string | null>(null);
 	const [message, setMessage] = useState<string | null>(null);
 
+	const uid = useId();
+	const recipientId = `${uid}-recipient`;
+	const assetId = `${uid}-asset`;
+	const amountId = `${uid}-amount`;
+
 	const options = useMemo(() => {
 		const tokenOpts = tokens.map((token) => ({
 			value: token.mint,
@@ -87,8 +98,9 @@ export function AirdropMintForm({ tokens, onAirdrop, onMint }: Props) {
 		try {
 			const note = await submit();
 			setMessage(note);
-		} catch (err: any) {
-			setError(err?.message ?? String(err));
+		} catch (err) {
+			const message = err instanceof Error ? err.message : String(err);
+			setError(message);
 		} finally {
 			setPending(false);
 		}
@@ -113,14 +125,18 @@ export function AirdropMintForm({ tokens, onAirdrop, onMint }: Props) {
 					</span>
 				</div>
 			</div>
-			
+
 			<div className="grid gap-4 lg:grid-cols-3">
 				<div className="space-y-2">
-					<label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider">
+					<label
+						htmlFor={recipientId}
+						className="block text-xs font-semibold text-gray-400 uppercase tracking-wider"
+					>
 						Recipient Address
 					</label>
 					<div className="relative">
 						<input
+							id={recipientId}
 							value={recipient}
 							onChange={(event: ChangeEvent<HTMLInputElement>) =>
 								setRecipient(event.target.value)
@@ -131,13 +147,17 @@ export function AirdropMintForm({ tokens, onAirdrop, onMint }: Props) {
 						<i className="fas fa-user absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"></i>
 					</div>
 				</div>
-				
+
 				<div className="space-y-2">
-					<label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider">
+					<label
+						htmlFor={assetId}
+						className="block text-xs font-semibold text-gray-400 uppercase tracking-wider"
+					>
 						Asset
 					</label>
 					<div className="relative">
 						<select
+							id={assetId}
 							value={asset}
 							onChange={(event: ChangeEvent<HTMLSelectElement>) =>
 								setAsset(event.target.value)
@@ -153,13 +173,17 @@ export function AirdropMintForm({ tokens, onAirdrop, onMint }: Props) {
 						<i className="fas fa-coins absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"></i>
 					</div>
 				</div>
-				
+
 				<div className="space-y-2">
-					<label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider">
+					<label
+						htmlFor={amountId}
+						className="block text-xs font-semibold text-gray-400 uppercase tracking-wider"
+					>
 						Amount
 					</label>
 					<div className="relative">
 						<input
+							id={amountId}
 							value={amount}
 							onChange={(event: ChangeEvent<HTMLInputElement>) =>
 								setAmount(event.target.value)
@@ -177,12 +201,12 @@ export function AirdropMintForm({ tokens, onAirdrop, onMint }: Props) {
 					</p>
 				</div>
 			</div>
-			
+
 			<div className="mt-6 flex flex-col sm:flex-row items-stretch sm:items-center gap-4">
 				<button
 					type="submit"
 					disabled={pending}
-					className={`btn-primary flex-1 sm:flex-initial ${pending ? 'opacity-50 cursor-not-allowed' : ''}`}
+					className={`btn-primary flex-1 sm:flex-initial ${pending ? "opacity-50 cursor-not-allowed" : ""}`}
 				>
 					{pending ? (
 						<>
@@ -191,26 +215,32 @@ export function AirdropMintForm({ tokens, onAirdrop, onMint }: Props) {
 						</>
 					) : (
 						<>
-							<i className={`fas fa-${asset === SOL_OPTION.value ? 'parachute-box' : 'coins'}`}></i>
-							<span>{asset === SOL_OPTION.value ? "Airdrop SOL" : "Mint Tokens"}</span>
+							<i
+								className={`fas fa-${asset === SOL_OPTION.value ? "parachute-box" : "coins"}`}
+							></i>
+							<span>
+								{asset === SOL_OPTION.value ? "Airdrop SOL" : "Mint Tokens"}
+							</span>
 						</>
 					)}
 				</button>
-				
+
 				{error && (
 					<div className="flex-1 flex items-center gap-2 p-3 rounded-lg bg-red-500/10 border border-red-500/30">
 						<i className="fas fa-exclamation-circle text-red-400"></i>
 						<p className="text-sm text-red-300">{error}</p>
 					</div>
 				)}
-				
+
 				{message && (
 					<div className="flex-1 flex items-center gap-2 p-3 rounded-lg bg-green-500/10 border border-green-500/30">
 						<i className="fas fa-check-circle text-green-400"></i>
-						<p className="text-sm text-green-300 font-mono text-xs break-all">{message}</p>
+						<p className="text-sm text-green-300 font-mono text-xs break-all">
+							{message}
+						</p>
 					</div>
 				)}
 			</div>
 		</form>
 	);
-}
+}

package/src/gui/src/components/clone-program-modal.tsx

@@ -1,4 +1,4 @@
-import { type ChangeEvent, useState } from "react";
+import { type ChangeEvent, useId, useState } from "react";
 import { Modal } from "./modal";
 
 interface Props {
@@ -13,6 +13,9 @@ interface Props {
 }
 
 export function CloneProgramModal({ isOpen, onClose, onSubmit }: Props) {
+	const programIdId = useId();
+	const endpointId = useId();
+	const accountLimitId = useId();
 	const [programId, setProgramId] = useState("");
 	const [endpoint, setEndpoint] = useState("");
 	const [withAccounts, setWithAccounts] = useState(true);
@@ -37,8 +40,12 @@ export function CloneProgramModal({ isOpen, onClose, onSubmit }: Props) {
 			setProgramId("");
 			setEndpoint("");
 			setAccountsLimit("100");
-		} catch (err: any) {
-			setError(err?.message ?? String(err));
+		} catch (err: unknown) {
+			const message =
+				err && typeof err === "object" && "message" in err
+					? String((err as { message?: unknown }).message)
+					: String(err);
+			setError(message);
 		} finally {
 			setPending(false);
 		}
@@ -72,7 +79,7 @@ export function CloneProgramModal({ isOpen, onClose, onSubmit }: Props) {
 							type="button"
 							onClick={handleSubmit}
 							disabled={pending || programId.trim().length === 0}
-							className={`btn-primary ${(pending || programId.trim().length === 0) ? 'opacity-50 cursor-not-allowed' : ''}`}
+							className={`btn-primary ${pending || programId.trim().length === 0 ? "opacity-50 cursor-not-allowed" : ""}`}
 						>
 							{pending ? (
 								<>
@@ -92,11 +99,15 @@ export function CloneProgramModal({ isOpen, onClose, onSubmit }: Props) {
 		>
 			<div className="space-y-5">
 				<div className="space-y-2">
-					<label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider">
+					<label
+						htmlFor={programIdId}
+						className="block text-xs font-semibold text-gray-400 uppercase tracking-wider"
+					>
 						Program ID *
 					</label>
 					<div className="relative">
 						<input
+							id={programIdId}
 							value={programId}
 							onChange={(event: ChangeEvent<HTMLInputElement>) =>
 								setProgramId(event.target.value)
@@ -107,13 +118,17 @@ export function CloneProgramModal({ isOpen, onClose, onSubmit }: Props) {
 						<i className="fas fa-fingerprint absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"></i>
 					</div>
 				</div>
-				
+
 				<div className="space-y-2">
-					<label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider">
+					<label
+						htmlFor={endpointId}
+						className="block text-xs font-semibold text-gray-400 uppercase tracking-wider"
+					>
 						RPC Endpoint (Optional)
 					</label>
 					<div className="relative">
 						<input
+							id={endpointId}
 							value={endpoint}
 							onChange={(event: ChangeEvent<HTMLInputElement>) =>
 								setEndpoint(event.target.value)
@@ -124,7 +139,7 @@ export function CloneProgramModal({ isOpen, onClose, onSubmit }: Props) {
 						<i className="fas fa-globe absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"></i>
 					</div>
 				</div>
-				
+
 				<div className="p-4 rounded-xl bg-white/5 border border-white/10 space-y-3">
 					<label className="flex items-center gap-3 cursor-pointer group">
 						<input
@@ -144,14 +159,18 @@ export function CloneProgramModal({ isOpen, onClose, onSubmit }: Props) {
 							</p>
 						</div>
 					</label>
-					
+
 					{withAccounts && (
 						<div className="ml-8 space-y-2 pt-2 border-t border-white/5">
-							<label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider">
+							<label
+								htmlFor={accountLimitId}
+								className="block text-xs font-semibold text-gray-400 uppercase tracking-wider"
+							>
 								Account Limit
 							</label>
 							<div className="relative">
 								<input
+									id={accountLimitId}
 									value={accountsLimit}
 									onChange={(event: ChangeEvent<HTMLInputElement>) =>
 										setAccountsLimit(event.target.value)
@@ -170,7 +189,7 @@ export function CloneProgramModal({ isOpen, onClose, onSubmit }: Props) {
 						</div>
 					)}
 				</div>
-				
+
 				{error && (
 					<div className="flex items-start gap-2 p-3 rounded-lg bg-red-500/10 border border-red-500/30">
 						<i className="fas fa-exclamation-circle text-red-400 mt-0.5"></i>
@@ -180,4 +199,4 @@ export function CloneProgramModal({ isOpen, onClose, onSubmit }: Props) {
 			</div>
 		</Modal>
 	);
-}
+}