solforge 0.2.3 → 0.2.5

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)
@@ -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/app.tsx

@@ -143,7 +143,7 @@ export function App() {
 
 	const scrollToSection = (sectionId: string) => {
 		setActiveSection(sectionId);
-		document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' });
+		document.getElementById(sectionId)?.scrollIntoView({ behavior: "smooth" });
 		setSidebarOpen(false);
 	};
 
@@ -155,13 +155,17 @@ export function App() {
 				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 +182,45 @@ export function App() {
 
 					{/* Navigation Items */}
 					<nav className="space-y-2">
-						<button 
-							onClick={() => scrollToSection('status')}
+						<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
+							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
+							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
+							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 +231,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,7 +250,7 @@ export function App() {
 
 			{/* Overlay for mobile */}
 			{sidebarOpen && (
-				<div 
+				<div
 					className="fixed inset-0 bg-black/50 backdrop-blur-sm z-30 lg:hidden"
 					onClick={() => setSidebarOpen(false)}
 				/>
@@ -262,11 +270,10 @@ export function App() {
 									Manage your local Solana development environment
 								</p>
 							</div>
-							<button 
-								onClick={loadStatus}
-								className="btn-secondary"
-							>
-								<i className={`fas fa-sync-alt ${loadingStatus ? 'animate-spin' : ''}`}></i>
+							<button onClick={loadStatus} className="btn-secondary">
+								<i
+									className={`fas fa-sync-alt ${loadingStatus ? "animate-spin" : ""}`}
+								></i>
 								<span>Refresh All</span>
 							</button>
 						</div>
@@ -311,7 +318,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="actions"
+						className="glass-panel p-6 animate-fadeIn scroll-mt-24"
+						style={{ animationDelay: "0.1s" }}
+					>
 						<AirdropMintForm
 							tokens={tokens}
 							onAirdrop={onAirdrop}
@@ -321,7 +332,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="programs"
+							className="animate-fadeIn scroll-mt-24"
+							style={{ animationDelay: "0.2s" }}
+						>
 							<ProgramsPanel
 								programs={programs}
 								loading={loadingPrograms}
@@ -329,7 +344,11 @@ export function App() {
 								onAdd={openProgramModal}
 							/>
 						</div>
-						<div id="tokens" className="animate-fadeIn scroll-mt-24" style={{animationDelay: '0.3s'}}>
+						<div
+							id="tokens"
+							className="animate-fadeIn scroll-mt-24"
+							style={{ animationDelay: "0.3s" }}
+						>
 							<TokensPanel
 								tokens={tokens}
 								loading={loadingTokens}
@@ -387,4 +406,4 @@ export function App() {
 			`}</style>
 		</div>
 	);
-}
+}

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

@@ -113,7 +113,7 @@ 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">
@@ -131,7 +131,7 @@ 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">
 						Asset
@@ -153,7 +153,7 @@ 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">
 						Amount
@@ -177,12 +177,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 +191,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

@@ -72,7 +72,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 ? (
 								<>
@@ -107,7 +107,7 @@ 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">
 						RPC Endpoint (Optional)
@@ -124,7 +124,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,7 +144,7 @@ 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">
@@ -170,7 +170,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 +180,4 @@ export function CloneProgramModal({ isOpen, onClose, onSubmit }: Props) {
 			</div>
 		</Modal>
 	);
-}
+}

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

@@ -77,7 +77,7 @@ export function CloneTokenModal({ isOpen, onClose, onSubmit }: Props) {
 							type="button"
 							onClick={handleSubmit}
 							disabled={pending || mint.trim().length === 0}
-							className={`btn-primary ${(pending || mint.trim().length === 0) ? 'opacity-50 cursor-not-allowed' : ''}`}
+							className={`btn-primary ${pending || mint.trim().length === 0 ? "opacity-50 cursor-not-allowed" : ""}`}
 						>
 							{pending ? (
 								<>
@@ -112,7 +112,7 @@ export function CloneTokenModal({ isOpen, onClose, onSubmit }: Props) {
 						<i className="fas fa-coin 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">
 						RPC Endpoint (Optional)
@@ -129,7 +129,7 @@ export function CloneTokenModal({ 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
@@ -149,7 +149,7 @@ export function CloneTokenModal({ isOpen, onClose, onSubmit }: Props) {
 							</p>
 						</div>
 					</label>
-					
+
 					{cloneAccounts && (
 						<div className="ml-8 space-y-4 pt-3 border-t border-white/5">
 							<label className="flex items-center gap-3 cursor-pointer group">
@@ -170,7 +170,7 @@ export function CloneTokenModal({ isOpen, onClose, onSubmit }: Props) {
 									</p>
 								</div>
 							</label>
-							
+
 							{!allAccounts && (
 								<div className="space-y-2">
 									<label className="block text-xs font-semibold text-gray-400 uppercase tracking-wider">
@@ -198,7 +198,7 @@ export function CloneTokenModal({ 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>
@@ -208,4 +208,4 @@ export function CloneTokenModal({ isOpen, onClose, onSubmit }: Props) {
 			</div>
 		</Modal>
 	);
-}
+}

package/src/gui/src/components/modal.tsx

@@ -31,27 +31,29 @@ export function Modal({
 	if (!isOpen) return null;
 
 	const colorClasses = {
-		purple: 'from-purple-500/20 to-violet-500/20 text-purple-400',
-		blue: 'from-blue-500/20 to-cyan-500/20 text-blue-400',
-		amber: 'from-amber-500/20 to-orange-500/20 text-amber-400',
-		green: 'from-green-500/20 to-emerald-500/20 text-green-400',
+		purple: "from-purple-500/20 to-violet-500/20 text-purple-400",
+		blue: "from-blue-500/20 to-cyan-500/20 text-blue-400",
+		amber: "from-amber-500/20 to-orange-500/20 text-amber-400",
+		green: "from-green-500/20 to-emerald-500/20 text-green-400",
 	};
 
 	return (
 		<div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fadeIn">
 			{/* Backdrop */}
-			<div 
+			<div
 				className="absolute inset-0 bg-black/80 backdrop-blur-sm"
 				onClick={onClose}
 			/>
-			
+
 			{/* Modal */}
 			<div className="w-full max-w-lg p-0 relative animate-modalSlideIn overflow-hidden rounded-2xl border border-white/20 bg-gray-900/95 backdrop-blur-xl shadow-2xl">
 				{/* Header */}
 				<div className="p-6 border-b border-white/10 bg-gradient-to-r from-white/5 to-transparent">
 					<div className="flex items-center justify-between">
 						<div className="flex items-center gap-3">
-							<div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${colorClasses[iconColor as keyof typeof colorClasses]} flex items-center justify-center`}>
+							<div
+								className={`w-10 h-10 rounded-xl bg-gradient-to-br ${colorClasses[iconColor as keyof typeof colorClasses]} flex items-center justify-center`}
+							>
 								<i className={`fas ${icon}`}></i>
 							</div>
 							<h3 className="text-xl font-bold text-white">{title}</h3>
@@ -66,12 +68,12 @@ export function Modal({
 						</button>
 					</div>
 				</div>
-				
+
 				{/* Content */}
 				<div className="p-6 max-h-[60vh] overflow-y-auto custom-scrollbar">
 					{children}
 				</div>
-				
+
 				{/* Footer */}
 				{footer && (
 					<div className="p-6 border-t border-white/10 bg-gradient-to-r from-white/5 to-transparent">
@@ -79,7 +81,7 @@ export function Modal({
 					</div>
 				)}
 			</div>
-			
+
 			<style jsx>{`
 				@keyframes fadeIn {
 					from {
@@ -124,4 +126,4 @@ export function Modal({
 			`}</style>
 		</div>
 	);
-}
+}

package/src/gui/src/components/programs-panel.tsx

@@ -27,22 +27,20 @@ export function ProgramsPanel({ programs, loading, onRefresh, onAdd }: Props) {
 						type="button"
 						onClick={onRefresh}
 						disabled={loading}
-						className={`btn-secondary text-sm ${loading ? 'opacity-50 cursor-not-allowed' : ''}`}
+						className={`btn-secondary text-sm ${loading ? "opacity-50 cursor-not-allowed" : ""}`}
 					>
-						<i className={`fas fa-sync-alt ${loading ? 'animate-spin' : ''}`}></i>
+						<i
+							className={`fas fa-sync-alt ${loading ? "animate-spin" : ""}`}
+						></i>
 						<span>{loading ? "Refreshing" : "Refresh"}</span>
 					</button>
-					<button
-						type="button"
-						onClick={onAdd}
-						className="btn-primary text-sm"
-					>
+					<button type="button" onClick={onAdd} className="btn-primary text-sm">
 						<i className="fas fa-plus"></i>
 						<span>Add Program</span>
 					</button>
 				</div>
 			</header>
-			
+
 			<div className="overflow-x-auto rounded-xl">
 				{programs.length === 0 ? (
 					<div className="flex flex-col items-center justify-center py-12 text-center">
@@ -50,7 +48,9 @@ export function ProgramsPanel({ programs, loading, onRefresh, onAdd }: Props) {
 							<i className="fas fa-code text-blue-500 text-2xl"></i>
 						</div>
 						<p className="text-gray-400 mb-2">No programs deployed</p>
-						<p className="text-sm text-gray-500">Click "Add Program" to clone from mainnet</p>
+						<p className="text-sm text-gray-500">
+							Click "Add Program" to clone from mainnet
+						</p>
 					</div>
 				) : (
 					<table className="table-modern">
@@ -65,12 +65,17 @@ export function ProgramsPanel({ programs, loading, onRefresh, onAdd }: Props) {
 						</thead>
 						<tbody>
 							{programs.map((program, index) => (
-								<tr key={program.programId} style={{animationDelay: `${index * 50}ms`}} className="animate-fadeIn">
+								<tr
+									key={program.programId}
+									style={{ animationDelay: `${index * 50}ms` }}
+									className="animate-fadeIn"
+								>
 									<td>
 										<div className="flex items-center gap-2">
 											<i className="fas fa-cube text-blue-400 text-xs"></i>
 											<span className="font-mono text-xs text-blue-300">
-												{program.programId.slice(0, 8)}...{program.programId.slice(-6)}
+												{program.programId.slice(0, 8)}...
+												{program.programId.slice(-6)}
 											</span>
 										</div>
 									</td>
@@ -80,9 +85,15 @@ export function ProgramsPanel({ programs, loading, onRefresh, onAdd }: Props) {
 										</span>
 									</td>
 									<td>
-										<span className={`badge ${program.executable ? 'badge-success' : 'badge-warning'}`}>
-											<i className={`fas fa-${program.executable ? 'check' : 'pause'} text-xs`}></i>
-											<span>{program.executable ? "Executable" : "Data Only"}</span>
+										<span
+											className={`badge ${program.executable ? "badge-success" : "badge-warning"}`}
+										>
+											<i
+												className={`fas fa-${program.executable ? "check" : "pause"} text-xs`}
+											></i>
+											<span>
+												{program.executable ? "Executable" : "Data Only"}
+											</span>
 										</span>
 									</td>
 									<td>
@@ -97,7 +108,8 @@ export function ProgramsPanel({ programs, loading, onRefresh, onAdd }: Props) {
 										<div className="flex items-center gap-2">
 											<i className="fas fa-wallet text-gray-400 text-xs"></i>
 											<span className="text-gray-300">
-												{(Number(BigInt(program.lamports)) / 1e9).toFixed(4)} SOL
+												{(Number(BigInt(program.lamports)) / 1e9).toFixed(4)}{" "}
+												SOL
 											</span>
 										</div>
 									</td>