New web interface, move llm engine to separate process

web/src/components/shared/Button.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface ButtonProps {
+  icon?: LucideIcon;
+  children: React.ReactNode;
+  variant?: 'primary' | 'danger' | 'success' | 'secondary';
+  size?: 'sm' | 'md';
+  onClick?: () => void;
+  className?: string;
+  iconOnly?: boolean;
+  disabled?: boolean;
+}
+
+const Button: React.FC<ButtonProps> = ({
+  icon: Icon,
+  children,
+  variant = 'primary',
+  size = 'md',
+  onClick,
+  className = '',
+  iconOnly = false,
+  disabled = false
+}) => {
+  const variantClasses = {
+    primary: 'bg-blue-600 text-white hover:bg-blue-700',
+    danger: 'bg-red-600 text-white hover:bg-red-700',
+    success: 'bg-green-600 text-white hover:bg-green-700',
+    secondary: 'bg-gray-600 text-white hover:bg-gray-700'
+  };
+
+  const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : '';
+
+  const sizeClasses = {
+    sm: 'px-2 py-1 text-xs',
+    md: 'px-3 py-2 text-sm'
+  };
+
+  const iconSizeClasses = {
+    sm: 'w-3 h-3',
+    md: 'w-4 h-4'
+  };
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`flex items-center justify-center rounded transition-colors ${variantClasses[variant]} ${sizeClasses[size]} ${disabledClasses} ${className}`}
+    >
+      {Icon && (
+        <Icon className={`${iconSizeClasses[size]} ${!iconOnly ? 'mr-1' : ''} flex-shrink-0`} />
+      )}
+      {!iconOnly && <span className="flex-1 text-center">{children}</span>}
+    </button>
+  );
+};
+
+export default Button;