Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web application designed to accurately model user risk based on their associated agents rather than assigning risk directly to users. The application will provide a clear and dynamic representation of user risk levels, ensuring that the security architecture reflects a realistic risk analysis system.

## CORE FEATURES
1. **Agent Risk Classification**: Each agent will have a risk classification of Low, Medium, or High based on various access parameters such as sensitive data access and command execution capabilities.
2. **Dynamic User Risk Calculation**: The application will calculate user risk in real-time based on the classifications of their associated agents, rather than storing a fixed risk value.
3. **User Table Display**: A user-friendly table will display the number of agents and critical agents associated with each user, along with an optional “High Risk” badge if applicable.
4. **Detailed User View**: A detailed view for each user will showcase a list of associated agents and their individual risk classifications.
5. **Real-Time Metrics**: Replace the fixed risk column with real-time metrics, including counts of high-risk agents and total agents, ensuring accurate data representation.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Light theme with dark text on light backgrounds
- **Primary Color**: #1978E5 (accent for buttons, links, highlights)
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs
- **Layout**: The main layout will consist of a sidebar for navigation, a user table for overview, and a detailed section for user information. Each UI component will maintain consistency in spacing and alignment for a cohesive look.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use React Context API or a state management library like Redux if needed for complex state handling.

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project with TypeScript and install necessary dependencies (React Router, Tailwind CSS, shadcn/ui).
2. **Create Component Structure**: Develop a sidebar component for navigation, a user table component, and a user detail component.
3. **Implement Dynamic Risk Calculation Logic**: Code the logic to calculate user risk based on associated agents in real-time, ensuring values are not stored but derived dynamically.
4. **Design UI Components**: Utilize Tailwind CSS to style components according to the specified design specifications, ensuring all components have the defined border radius and color scheme.
5. **Data Management**: Implement state management to handle agent data and ensure updates reflect in the user interface.
6. **Testing**: Conduct thorough testing to ensure that all functionalities work as expected and that the UI is responsive across devices.

## USER EXPERIENCE
Users will interact with a clean interface where they can easily navigate through the sidebar to view all users. The user table will provide quick insights into their associated agents and risk levels, and clicking on a user will present detailed information about individual agents and their classifications. The dynamic nature of risk calculation will enhance user confidence in the accuracy of the data presented, while the minimalist design will ensure ease of use and focus on critical information.