Update/ux

[backnotprop]

This pull request represents a comprehensive frontend modernization of MCP Guardian, focusing on user experience improvements, technical debt reduction, and enterprise-grade polish.

It also includes a formal schema package for policy json

Key Changes

Monaco Editor Integration

• Migrated from basic textarea inputs to Monaco Editor (VS Code's editor engine)
• Implemented real-time JSON schema validation with IntelliSense support
• Added custom cyberpunk-themed syntax highlighting for dark and light modes
• Integrated auto-generated JSON schemas from Rust type definitions

Component Architecture Modernization

• Complete migration from custom CSS components to Radix UI primitives
• Implemented Tailwind CSS v4 with utility-first approach
• Established consistent design system with cyberpunk aesthetic optimized for security professionals
• Added comprehensive accessibility support (screen readers, keyboard navigation)

JSON Schema System

• Created automated pipeline: Rust types → TypeScript bindings → JSON schemas
• Implemented mcp-guardian-schema crate for schema generation
• Real-time validation in all JSON editing contexts
• Eliminated configuration errors through type-safe validation

Navigation and Layout Improvements

• Replaced accordion-style entity management with modern sidebar navigation
• Added search and filtering capabilities across all entity types
• Implemented responsive design optimized for desktop workflows
• Enhanced visual hierarchy and information density

Technical Debt Resolution

• Standardized file naming conventions (PascalCase → kebab-case)
• Implemented strict TypeScript configuration with comprehensive type safety
• Eliminated deprecated dependencies and security vulnerabilities
• Simplified component state management patterns

Visual Editor Development and Removal

Initial Implementation

The branch initially included development of a comprehensive visual editor for guard profiles using React Flow:

• 16 custom node components for different interceptor types
• Bidirectional conversion between JSON configuration and visual representation
• Complex state management for node positioning and data synchronization
• In-node configuration with expandable UI elements

Strategic Removal

After extensive development and testing, the visual editor was removed due to:

• Excessive complexity introducing potential stability issues
• Maintenance burden outweighing user value
• Superior user experience provided by enhanced Monaco JSON editor
• Focus shift toward simplicity and reliability

The removal eliminated 3,140 lines of complex code while maintaining all core functionality through the improved JSON editing experience.

Bundle Size and Performance

• Removed React Flow dependency reducing bundle size
• Optimized Monaco Editor integration with custom themes and validation
• Implemented lazy loading patterns for editor components
• Improved application startup time and memory usage

Testing and Validation

• Comprehensive TypeScript compilation validation
• Rust clippy linting for backend changes
• Full application build verification
• Schema validation testing across all entity types

Documentation

• Created comprehensive component library documentation
• Established design system guidelines
• Documented schema generation pipeline
• Added development workflow documentation

Impact Assessment

Positive Outcomes

• Professional appearance suitable for enterprise security teams
• Significantly improved JSON editing experience with real-time validation
• Consistent, accessible component library
• Simplified codebase with reduced maintenance burden
• Type-safe configuration management

Risk Mitigation

• Extensive testing of Monaco Editor integration
• Fallback patterns for schema validation failures
• Comprehensive error handling in JSON parsing
• Maintained backward compatibility for all configuration formats

Migration Path

This update requires no configuration migration. All existing guard profiles, MCP servers, and server collections remain fully compatible. The improved editing experience enhances existing workflows without breaking changes.

Conclusion

This pull request delivers a modern, professional interface that maintains MCP Guardian's powerful security capabilities while significantly improving the user experience. The focus on JSON-based configuration with enhanced validation provides a robust foundation for future development while eliminating the complexity risks associated with visual editing approaches. Better secure, govern, and optimize your MCP deployments with MCP Guardian today - ramos out.

[Copilot]

Pull Request Overview

This pull request represents a comprehensive frontend modernization of MCP Guardian, focusing on user experience improvements, technical debt reduction, and enterprise-grade polish. The changes include migration from custom CSS to a modern component system based on Radix UI and Tailwind CSS, implementation of Monaco Editor for enhanced JSON editing, and a shift from accordion-style navigation to modern sidebar navigation.

• Complete component library modernization with Radix UI primitives and cyberpunk theming
• Migration from basic textarea to Monaco Editor with real-time JSON schema validation
• Implementation of automated JSON schema generation system from Rust type definitions
• Navigation overhaul from accordion-style to sidebar-based interface with search and filtering

Reviewed Changes

Copilot reviewed 131 out of 136 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
rename-files.sh / rename-components.sh	Scripts for automated PascalCase to kebab-case file renaming
mcp-guardian/src/utils.ts	Added utility function for Tailwind class merging
mcp-guardian/src/pages/*.tsx	Complete page component rewrites with new sidebar navigation
mcp-guardian/src/main.tsx	Added theme provider integration
mcp-guardian/src/components/ui/*.tsx	New Radix UI-based component library with cyberpunk theming
mcp-guardian/src/components/*.tsx	Updated component implementations using new UI primitives
mcp-guardian/src/components/json-editor/*	Monaco Editor integration with JSON schema validation

Comments suppressed due to low confidence (3)

rename-components.sh:87

• This React.useEffect() call is incorrectly placed outside of a React component. The useEffect hook must be called within a React functional component or custom hook, not in a global script context.

process_directory "$COMPONENTS_DIR/ui" "*.tsx"

mcp-guardian/src/components/json-valid-editor.tsx:16

• The 'schema' parameter should have a more specific type instead of 'any'. Consider using a proper JSON schema type like 'JSONSchemaType' or at minimum 'object' to provide better type safety.

const JsonEditor: React.FC<JsonEditorProps> = ({

mcp-guardian/src/components/mcp-server-component.tsx:32

• There is an extra closing parenthesis at the end of this line. The line should end with useState("{}"); instead of useState("{}")); // Initialize with valid empty JSON.

  const [configText, setConfigText] = useState("{}"); // Initialize with valid empty JSON

[Copilot]

This React.useEffect() call is incorrectly placed at the module level outside of any React component. The useEffect hook can only be used inside React functional components or custom hooks.

Suggested change

	// Custom hook to inject cyber select styles
	function useCyberSelectStyles() {
	React.useEffect(() => {
	const styleId = "cyber-select-styles";
	if (!document.getElementById(styleId) && typeof document !== 'undefined') {
	const styleElement = document.createElement("style");
	styleElement.id = styleId;
	styleElement.textContent = cyberSelectStyles;
	document.head.appendChild(styleElement);
	return () => {
	const element = document.getElementById(styleId);
	if (element) {
	document.head.removeChild(element);
	}
	};
	}
	}, []);
	}

[Copilot]

[nitpick] The cleanup function in useEffect is creating and removing DOM elements, but this pattern can lead to memory leaks if the component unmounts before the cleanup runs. Consider using a ref to track whether the component is still mounted.

Suggested change

	}
	createdByThisInstance.current = true;
	}
	return () => {
	if (createdByThisInstance.current) {
	const element = document.getElementById(styleId);
	if (element) {
	document.head.removeChild(element);
	}
	}
	};

[Copilot]

[nitpick] Similar to the card component, this cleanup pattern for dynamically injected styles could be improved by tracking component mount state to prevent cleanup after unmount.

Suggested change

	}
	// Add cyberpunk styles once, and clean up only when last instance unmounts
	React.useEffect(() => {
	const styleId = "cyber-input-styles";
	cyberInputStyleRefCount++;
	if (!document.getElementById(styleId)) {
	const styleElement = document.createElement("style");
	styleElement.id = styleId;
	styleElement.textContent = cyberInputStyles;
	document.head.appendChild(styleElement);
	}
	return () => {
	cyberInputStyleRefCount--;
	if (cyberInputStyleRefCount === 0) {
	const element = document.getElementById(styleId);
	if (element) {
	document.head.removeChild(element);
	}
	}
	};