upgrades

webui/src/components/Editor.tsx

@@ -14,7 +14,7 @@ if (typeof window !== "undefined") {
 			CodeMirror = cm.default;
 			await import("codemirror/addon/edit/matchbrackets");
 			await import("codemirror/addon/edit/closebrackets");
-			await import("codemirror/addon/selection/active-line");
+			//await import("codemirror/addon/selection/active-line");
 			await import("codemirror/addon/comment/comment");
 			// @ts-ignore - CodeMirror addon type issues
 			await import("codemirror/addon/fold/brace-fold");
@@ -23,25 +23,12 @@ if (typeof window !== "undefined") {
 			// @ts-ignore - CodeMirror addon type issues
 			await import("codemirror/addon/search/match-highlighter");
 			require("codemirror/lib/codemirror.css");
-			require("codemirror/theme/monokai.css");
+			require("codemirror/theme/material-darker.css");
 			require("codemirror/addon/fold/foldgutter.css");
 
-			try {
-				await loadRhaiWasm();
-				initRhaiMode(CodeMirror);
-				console.log('✅ WASM-based Rhai mode initialized successfully');
-			} catch (error) {
-				console.warn('⚠️ Failed to load WASM Rhai mode, falling back to JavaScript mode:', error);
-				// Fallback to JavaScript mode if WASM fails
-				CodeMirror.defineMode("rhai", (config: any) => {
-					const jsMode = CodeMirror.getMode(config, "javascript");
-					return {
-						...jsMode,
-						name: "rhai",
-						helperType: "rhai"
-					};
-				});
-			}
+			await loadRhaiWasm();
+			initRhaiMode(CodeMirror);
+			console.log('✅ WASM-based Rhai mode initialized successfully');
 
 			isCodeMirrorReady = true;
 		})
@@ -74,7 +61,7 @@ export const Editor = forwardRef<any, EditorProps>(function Editor(
 		const editor = CodeMirror.fromTextArea(textareaRef.current, {
 			lineNumbers: true,
 			mode: "rhai",
-			theme: "monokai",
+			theme: "material-darker",
 			indentUnit: 4,
 			matchBrackets: true,
 			foldGutter: {
@@ -113,7 +100,7 @@ export const Editor = forwardRef<any, EditorProps>(function Editor(
 				editorRef.current = null;
 			}
 		};
-	}, []); // Only run once
+	}, []); // DO NOT FILL ARRAY
 
 	return (
 		<div className={styles.editorContainer}>

webui/src/components/ui/Button.tsx

@@ -2,8 +2,19 @@
 
 import { ButtonHTMLAttributes, ReactNode } from "react";
 import clsx from "clsx";
+import { Play, Square, Loader2 } from "lucide-react";
 import styles from "@/styles/Button.module.css";
 
+const iconMap = {
+	play: Play,
+	stop: Square,
+	loading: Loader2,
+};
+
+function getIcon(iconName: string) {
+	return iconMap[iconName as keyof typeof iconMap];
+}
+
 interface ButtonProps
 	extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
 	variant?:
@@ -47,10 +58,16 @@ export function Button({
 			title={tooltip}
 			{...props}
 		>
-			{iconLeft && !loading && <i className={`mdi mdi-${iconLeft}`} />}
-			{loading && <i className="mdi mdi-loading mdi-spin" />}
+			{iconLeft && !loading && (() => {
+				const IconComponent = getIcon(iconLeft);
+				return IconComponent ? <IconComponent size={16} /> : null;
+			})()}
+			{loading && <Loader2 size={16} className={styles.spin} />}
 			<span>{children}</span>
-			{iconRight && !loading && <i className={`mdi mdi-${iconRight}`} />}
+			{iconRight && !loading && (() => {
+				const IconComponent = getIcon(iconRight);
+				return IconComponent ? <IconComponent size={16} /> : null;
+			})()}
 		</button>
 	);
 }

webui/src/components/ui/Dropdown.tsx

@@ -2,8 +2,19 @@
 
 import { useState, useRef, useEffect, ReactNode } from "react";
 import clsx from "clsx";
+import { HelpCircle, MoreHorizontal, ChevronDown } from "lucide-react";
 import styles from "@/styles/Dropdown.module.css";
 
+const iconMap = {
+	"help-circle": HelpCircle,
+	"dots-horizontal": MoreHorizontal,
+	"menu-down": ChevronDown,
+};
+
+function getIcon(iconName: string) {
+	return iconMap[iconName as keyof typeof iconMap];
+}
+
 interface DropdownItem {
 	text: string;
 	onClick: () => void;
@@ -59,12 +70,13 @@ export function Dropdown({
 				onClick={() => !disabled && setIsOpen(!isOpen)}
 				disabled={disabled}
 			>
-				{triggerIcon && <i className={`mdi mdi-${triggerIcon}`} />}
+				{triggerIcon && (() => {
+					const IconComponent = getIcon(triggerIcon);
+					return IconComponent ? <IconComponent size={16} /> : null;
+				})()}
 				{trigger && <span>{trigger}</span>}
-				{!triggerIcon && !trigger && (
-					<i className="mdi mdi-dots-horizontal" />
-				)}
-				<i className="mdi mdi-menu-down" />
+				{!triggerIcon && !trigger && <MoreHorizontal size={16} />}
+				<ChevronDown size={16} />
 			</button>
 
 			{isOpen && (