You are an AI assistant tasked with building a Single Page Application (SPA) for 'Kurumsal Kodlama Asistanı: MCP Güvenliği' (Enterprise Coding Assistant: MCP Security). This application aims to provide a secure, manageable, and auditable platform for enterprise-level use of coding agents, bridging the gap between individual development practices and organizational standards. The core idea is to offer MCP-like benefits (structure, context, security) over HTTP, enabling structured team collaboration and centralized control, addressing the limitations and hype surrounding CLIs and local agent setups in an enterprise context.
**PROJECT OVERVIEW:**
The application provides a SaaS platform for enterprises to manage, secure, and leverage AI coding agents. It solves the problem of 'cowboy coding' by offering a structured, auditable, and collaborative environment. The value proposition is enabling organizational adoption of coding agents with an emphasis on visibility, telemetry, security, quality, and maintainability by teams with varying skill levels. Unlike local CLIs, this platform facilitates server-side MCP over HTTP, offering a distinct and more manageable use case for enterprise and organizational scenarios. It aims to cut through the hype of individual agent usage and focus on robust, enterprise-grade solutions.
**TECH STACK:**
- **Frontend Framework:** React (using Create React App for simplicity, or Next.js if SSR/SSG were needed, but for this SPA focus, CRA is sufficient).
- **Styling:** Tailwind CSS for rapid, utility-first styling and responsive design.
- **State Management:** Zustand for efficient and simple global state management.
- **Routing:** React Router DOM for client-side navigation.
- **UI Components:** A combination of custom Tailwind components and potentially a small library like Headless UI for accessibility and advanced components.
- **API Interaction:** Axios for making HTTP requests to a mock backend or a future actual backend.
- **Form Handling:** React Hook Form for efficient and robust form management.
- **Utilities:** Lodash (optional, for utility functions), Date-fns (for date manipulation).
**CORE FEATURES:**
1. **Dashboard & Overview:**
* **User Flow:** Upon login, users land on a dashboard summarizing key metrics like agent usage, recent activities, security alerts, and available prompt templates. It provides a quick glance at the system's health and team activity.
* **Functionality:** Displays cards for overall agent usage, recent prompt executions, active users, and system status. Includes navigation to other sections.
2. **Prompt Management:**
* **User Flow:** Users can browse, search, and filter pre-defined organizational prompt templates. Authorized users (e.g., Admins, Team Leads) can create new prompts, edit existing ones, and categorize them. Each prompt has a "Use Prompt" button.
* **Functionality:** A page listing prompt templates with search, filter, and sort capabilities. A modal or separate page for creating/editing prompts, including fields for name, description, content (with markdown/code support), tags, and access levels.
3. **Agent Interaction (Simulated):**
* **User Flow:** From the Prompt Management section, a user selects a prompt and clicks "Use Prompt". A modal or dedicated panel appears where the user can input specific context or parameters. Upon submission, the system simulates an agent execution, displaying the output and execution logs.
* **Functionality:** A modal or side panel allowing users to provide input for a selected prompt. Displays simulated agent response (text, code snippets) and detailed execution logs (start time, end time, duration, steps taken, potential errors).
4. **Telemetry & Audit Logs:**
* **User Flow:** Users can navigate to the Audit Logs section to view a comprehensive history of all agent interactions, prompt executions, user activities, and system events. Filters allow searching by user, date range, action type, or agent.
* **Functionality:** A table displaying log entries with columns like Timestamp, User, Action, Target (e.g., Prompt Name), Details. Includes advanced filtering and search capabilities.
5. **User & Access Management (Admin View):**
* **User Flow:** Administrators can access a dedicated section to view all registered users, manage their roles (e.g., User, Prompt Creator, Admin), and assign permissions. They can invite new users or deactivate existing ones.
* **Functionality:** A user management table with actions to add, edit, or remove users and change their roles/permissions.
**UI/UX DESIGN:**
- **Layout:** A clean, modern, and intuitive Single Page Application layout. A persistent sidebar navigation on the left for core sections (Dashboard, Prompts, Logs, Users). The main content area displays the selected section's components.
- **Color Palette:** Professional and calming. Primary: Dark Blue/Navy (#1A202C). Secondary: A lighter shade of blue or teal for accents (#4299E1 or #38B2AC). Grays for text and backgrounds (#E2E8F0 for light text, #A0AEC0 for secondary text, #F7FAFC for light backgrounds). Alert colors: Red for errors, Yellow for warnings.
- **Typography:** Sans-serif fonts like Inter or Roboto for readability. Clear hierarchy using font sizes and weights.
- **Responsive Design:** Mobile-first approach using Tailwind CSS's responsive prefixes (sm:, md:, lg:). Sidebar collapses into a hamburger menu on smaller screens. Content adjusts fluidly.
- **Key Components:** Dashboard cards, data tables with pagination and filtering, forms with validation, modals, buttons with hover effects, code blocks, alert messages.
**COMPONENT BREAKDOWN:**
- **`App.js`:** Main application component, sets up routing and global layout.
- **`Layout.js`:** Contains the persistent sidebar and the main content area. Manages routing rendering.
- **`Sidebar.js`:** Navigation links, collapses on small screens.
- **`NavLink.js`:** Individual navigation item component.
- **`DashboardPage.js`:** Main dashboard view.
- **`MetricCard.js`:** Displays a single metric (e.g., Agent Usage).
- **`RecentActivityFeed.js`:** Shows a list of recent events.
- **`PromptsPage.js`:** Manages the list and interaction with prompt templates.
- **`PromptList.js`:** Renders `PromptListItem` components.
- **`PromptListItem.js`:** Displays a single prompt template summary.
- **`PromptSearchFilter.js`:** Search and filter controls for prompts.
- **`PromptEditorModal.js`:** Modal for creating/editing prompts (contains `PromptForm`).
- **`PromptForm.js`:** Form fields for prompt creation (name, description, content, tags, permissions).
- **`AgentInteractionModal.js`:** Modal for interacting with a selected prompt.
- **`AgentInputForm.js`:** Form for user-specific input.
- **`AgentResponseDisplay.js`:** Shows simulated agent output.
- **`ExecutionLogViewer.js`:** Displays detailed execution logs.
- **`AuditLogsPage.js`:** Displays the audit log table.
- **`LogTable.js`:** Renders `LogTableRow` components.
- **`LogTableRow.js`:** Displays a single log entry.
- **`LogFilter.js`:** Controls for filtering logs.
- **`UserManagementPage.js`:** Admin view for user management.
- **`UserTable.js`:** Renders `UserTableRow` components.
- **`UserTableRow.js`:** Displays a single user and role.
- **`UserFormModal.js`:** Modal for adding/editing users.
- **`Button.js`:** Reusable button component with hover states.
- **`Input.js`:** Reusable input field component.
- **`Modal.js`:** Generic modal component.
- **`Alert.js`:** Displays notification/alert messages.
**DATA MODEL:**
- **Global State (Zustand):**
- `auth`: { `isLoggedIn`: boolean, `user`: { `id`: string, `name`: string, `role`: 'Admin' | 'User' | 'PromptCreator', `permissions`: string[] } }
- `prompts`: { `list`: Prompt[], `loading`: boolean, `error`: string | null }
- `logs`: { `list`: LogEntry[], `loading`: boolean, `error`: string | null }
- `users`: { `list`: User[], `loading`: boolean, `error`: string | null }
- `currentInteraction`: { `prompt`: Prompt | null, `input`: string, `output`: string, `logs`: ExecutionLog[], `isLoading`: boolean }
- **Mock Data Formats:**
```javascript
// Prompt Object
{
id: 'prompt-123',
name: 'Refactor Python Function',
description: 'Refactors a given Python function for clarity and efficiency.',
content: 'Refactor the following Python code:\n```python\n{code}\n```',
tags: ['python', 'refactoring', 'optimization'],
createdBy: 'user-admin-001',
createdAt: '2024-03-15T10:00:00Z',
permissions: ['Admin', 'User'] // Roles that can use this prompt
}
// Log Entry Object
{
id: 'log-abc',
timestamp: '2024-03-15T11:30:00Z',
userId: 'user-dev-002',
userName: 'Alice Smith',
action: 'CREATE_PROMPT',
targetId: 'prompt-456',
targetName: 'Generate Unit Tests',
details: 'New prompt template created.',
ipAddress: '192.168.1.100'
}
// User Object
{
id: 'user-dev-002',
name: 'Alice Smith',
email: 'alice.smith@example.com',
role: 'User',
createdAt: '2024-03-10T09:00:00Z'
}
// Execution Log Object (for AgentInteractionModal)
{
step: 1,
timestamp: '2024-03-15T11:35:15Z',
message: 'Parsing user input and selecting prompt template.',
type: 'INFO'
}
```
**ANIMATIONS & INTERACTIONS:**
- **Hover Effects:** Subtle background color changes or slight scaling on interactive elements like buttons and list items.
- **Transitions:** Smooth transitions for modal appearances/disappearances, sidebar collapsing/expanding, and route changes (if using a library like Framer Motion).
- **Loading States:** Use spinners or skeleton loaders for data fetching (prompts, logs, users). Buttons should indicate when they are in a loading state.
- **Micro-interactions:** Visual feedback on form submission (e.g., success checkmark), successful action completion (e.g., subtle notification). Input fields might have focus animations.
**EDGE CASES:**
- **Empty States:** Display user-friendly messages and guidance when lists are empty (e.g., "No prompts available. Create your first prompt!", "No logs found for the selected criteria.").
- **Error Handling:** Gracefully handle API errors, display informative error messages to the user using the `Alert` component. Implement retry mechanisms where appropriate.
- **Validation:** Implement client-side validation for all forms (Prompt creation, User management) using React Hook Form. Provide clear inline error messages.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure keyboard navigation is fully supported. Use ARIA attributes where necessary, especially for modals and interactive controls. Ensure sufficient color contrast.
- **Auth State:** Handle cases where the user is logged out or their session expires. Redirect to the login page.
**SAMPLE DATA:**
(Refer to the Mock Data Formats section above for examples. Generate at least 5-10 diverse examples for each major data type: `Prompt`, `LogEntry`, `User`, and `ExecutionLog` to populate the initial state or for testing purposes.)
* **Sample Prompts:**
1. `id: 'prompt-refactor-py'`, `name: 'Refactor Python Function'`, `description: 'Improves Python code.'`, `tags: ['python', 'refactor']`
2. `id: 'prompt-gen-tests-js'`, `name: 'Generate Jest Tests (JS)'`, `description: 'Creates unit tests for JavaScript functions.'`, `tags: ['javascript', 'testing', 'jest']`
3. `id: 'prompt-docstring-py'`, `name: 'Add Docstrings (Python)'`, `description: 'Generates PEP 257 compliant docstrings.'`, `tags: ['python', 'documentation']`
* **Sample Log Entries:**
1. `id: 'log-001'`, `timestamp: '2024-03-15T10:05:00Z'`, `userId: 'user-admin-001'`, `action: 'LOGIN'`, `details: 'User logged in successfully.'`
2. `id: 'log-002'`, `timestamp: '2024-03-15T10:15:00Z'`, `userId: 'user-dev-002'`, `action: 'USE_PROMPT'`, `targetName: 'Refactor Python Function'`, `details: 'Used prompt to refactor a function.'`
3. `id: 'log-003'`, `timestamp: '2024-03-15T10:20:00Z'`, `userId: 'user-admin-001'`, `action: 'CREATE_PROMPT'`, `targetName: 'Generate SQL Query'`, `details: 'Created new prompt template.'`
**DEPLOYMENT NOTES:**
- **Build:** Use `npm run build` or `yarn build` to create an optimized production build in the `build/` directory.
- **Environment Variables:** Use `.env` files (e.g., `.env.development`, `.env.production`) for managing environment-specific variables like API endpoints. Access them via `process.env.REACT_APP_...`.
- **Performance Optimizations:** Code splitting (handled by CRA's Webpack config), lazy loading components, image optimization (if applicable), efficient state management, and minimizing re-renders. Ensure Tailwind CSS is configured for production build purging unused styles.
- **Hosting:** Suitable for static site hosting platforms like Netlify, Vercel, AWS S3/CloudFront, or GitHub Pages.
- **API Mocking:** For development, use a library like `msw` (Mock Service Worker) or simple mock data directly within components/state management to simulate API responses before a backend is ready.