You are an expert AI assistant tasked with generating the complete code for a single-page front-end application (SPA) using React and Tailwind CSS. The application, named 'AI Güvenlik Açığı Tarayıcı' (AI Security Vulnerability Scanner), aims to help security teams gain visibility into AI agents operating within their SaaS environments, identify potential security risks, and analyze their permissions.
## 1. PROJECT OVERVIEW
**Purpose:** The primary goal of this application is to provide security professionals with a clear and actionable understanding of the AI agents deployed across their organization's SaaS ecosystem. It addresses the critical problem of 'AI Agent Blindness,' where security teams lack visibility into what AI agents are running, what permissions they hold, and the potential security risks they introduce (e.g., excessive permissions, toxic combinations of access).
**Value Proposition:** The application automates the discovery and risk assessment of AI agents in SaaS platforms, enabling security teams to proactively mitigate risks, reduce the attack surface, and ensure compliance. It transforms hours of manual investigation into minutes of automated analysis, significantly improving Mean Time To Detect (MTTD) and Mean Time To Remediate (MTTR) for AI-related security threats.
## 2. TECH STACK
* **Framework:** React (using Vite for a fast development experience)
* **Styling:** Tailwind CSS (with Headless UI for accessible, unstyled components)
* **State Management:** Zustand (lightweight and efficient for global state)
* **Routing:** React Router DOM (for potential future expansion, though MVP is single-page)
* **Utilities:** Axios (for mock API calls), clsx (for conditional class names), date-fns (for date formatting)
* **Icons:** Heroicons
## 3. CORE FEATURES (MVP)
1. **Connection Setup:**
* **User Flow:** Users navigate to a 'Connections' page. They can click 'Add New Connection' which opens a modal. Inside the modal, they select a SaaS platform (e.g., 'Google Workspace', 'Microsoft 365', 'Slack', 'Custom API'). They are then prompted to enter API keys or OAuth credentials securely. A 'Test Connection' button verifies the credentials. Upon successful validation, the connection is saved and listed.
* **Details:** This involves forms for API key input, potentially OAuth flow initiation (mocked for MVP), and a connection status indicator (e.g., 'Connected', 'Disconnected', 'Error').
2. **AI Agent Discovery:**
* **User Flow:** After setting up connections, users go to the 'Agents' dashboard. Clicking 'Scan Now' initiates a background process (simulated). The dashboard then populates with a list of discovered AI agents from the connected platforms. Each agent entry shows its name, the platform it belongs to, and its discovery status.
* **Details:** This feature simulates fetching data about agents from the connected services. The UI will display a loading state during the scan and then list agents in a table or card format.
3. **Permission Analysis:**
* **User Flow:** From the 'Agents' dashboard, users can click on an individual agent to view its detailed 'Permissions' page. This page lists all the permissions granted to the agent, categorizes them (e.g., Read, Write, Admin, Sensitive Data Access), and highlights any potentially risky permissions or combinations. A risk score or severity indicator (e.g., Low, Medium, High, Critical) is displayed for the agent.
* **Details:** This involves analyzing the raw permissions data, applying predefined risk rules (e.g., granting 'Full Admin' access to a simple automation bot is high risk), and presenting this analysis clearly.
4. **Risk Reporting:**
* **User Flow:** A dedicated 'Reports' section allows users to generate a summary report of all discovered agents and their associated risks. The report can be filtered by platform or risk level. It provides an executive summary and detailed findings. An option to export the report (e.g., as CSV or JSON) is available.
* **Details:** This aggregates data from the 'Agents' and 'Permissions' views into a structured, human-readable format.
5. **Alerting System:**
* **User Flow:** Users can configure alert rules in a 'Settings' section (e.g., 'Alert me if any agent gains 'Admin' privileges'). When a new scan detects a violation of these rules, a notification appears within the app (e.g., a toast message) and is listed in an 'Alerts' feed.
* **Details:** This requires a mechanism to trigger notifications based on scan results and user-defined thresholds.
## 4. UI/UX DESIGN
* **Layout:** A clean, modern dashboard layout. A persistent sidebar navigation for switching between sections (Dashboard, Connections, Agents, Reports, Settings). The main content area displays the relevant information for the selected section.
* **Color Palette:** Primary: Deep Blue (`#1E3A8A`), Secondary: Teal (`#14B8A6`), Accent: Orange (`#F97316`), Background: Light Gray (`#F3F4F6`), Text: Dark Gray (`#374151`), White (`#FFFFFF`) for cards and backgrounds.
* **Typography:** Sans-serif font like Inter or Roboto for readability. Clear hierarchy using font weights and sizes.
* **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content adjusts fluidly. Ensure usability across devices.
* **Components:** Use Headless UI for accessible form elements, modals, and menus. Tailwind CSS for styling.
## 5. DATA MODEL
* **State Structure (Zustand Store - `useStore`):**
```javascript
{
connections: [{ id: string, name: string, type: string, status: 'Connected' | 'Disconnected' | 'Error', apiKey: string (masked/handled securely) }],
agents: [{ id: string, name: string, platform: string, connectionId: string, status: 'Scanning' | 'Complete' | 'Error', discoveredAt: Date }],
permissions: { [agentId: string]: { agentId: string, permissions: Array<{ resource: string, actions: string[], risk: 'Low' | 'Medium' | 'High' | 'Critical' }>, overallRisk: 'Low' | 'Medium' | 'High' | 'Critical', lastAnalyzed: Date } },
alerts: [{ id: string, message: string, timestamp: Date, read: boolean }],
// UI States
isModalOpen: boolean,
modalContent: string | null,
isLoadingScan: boolean
}
```
* **Mock API:** Simulate API calls using `setTimeout` to mimic network latency and return mock data.
* **Data Flow:** Connections are added -> Agents are discovered based on connections -> Permissions are analyzed for discovered agents -> Reports aggregate this data -> Alerts are triggered based on rules.
## 6. COMPONENT BREAKDOWN
* `App.jsx`: Main application component, sets up routing (if any) and global layout.
* `Layout.jsx`: Contains the sidebar navigation and the main content area.
* `Sidebar.jsx`: Navigation menu component.
* `Header.jsx`: Top bar with app title and user info (optional).
* `ConnectionsPage.jsx`: Manages the display and addition of SaaS connections.
* `ConnectionList.jsx`: Renders the list of configured connections.
* `ConnectionItem.jsx`: Displays a single connection's details and status.
* `ConnectionModal.jsx`: Form for adding/editing connections (using Headless UI Dialog).
* `AgentsPage.jsx`: Dashboard for discovered AI agents.
* `AgentList.jsx`: Table or card grid displaying agents.
* `AgentItem.jsx`: Displays a single agent summary.
* `ScanButton.jsx`: Initiates the agent discovery scan.
* `AgentDetailPage.jsx`: Shows detailed permissions for a selected agent.
* `PermissionList.jsx`: Renders the list of permissions.
* `PermissionItem.jsx`: Displays a single permission with its risk level.
* `RiskBadge.jsx`: Visual indicator for risk levels.
* `ReportsPage.jsx`: Section for generating and viewing reports.
* `ReportGenerator.jsx`: UI for filtering and triggering report generation.
* `ReportViewer.jsx`: Displays the generated report summary.
* `SettingsPage.jsx`: Configuration for alerts and other settings.
* `AlertRuleForm.jsx`: Form to define alert conditions.
* `ToastNotification.jsx`: Global notification component for feedback.
* `LoadingSpinner.jsx`: Reusable loading indicator.
## 7. ANIMATIONS & INTERACTIONS
* **Page Transitions:** Subtle fade-in/fade-out using CSS transitions or a library like Framer Motion (optional for MVP).
* **Hover Effects:** Slight background color changes or scaling on interactive elements like buttons and list items.
* **Loading States:** Use `LoadingSpinner.jsx` with skeleton loaders for tables/lists while data is being fetched (simulated via `setTimeout`).
* **Modal Animations:** Smooth open/close transitions for modals (using Headless UI's built-in transition support).
* **Micro-interactions:** Subtle visual feedback on button clicks, form submissions (e.g., a checkmark animation on success).
* **Status Indicators:** Animated spinners for 'Scanning' status, green check for 'Connected', red 'X' for 'Error'.
## 8. EDGE CASES
* **No Connections:** If no connections are set up, the 'Agents' page should display a clear message prompting the user to add a connection.
* **No Agents Found:** If a scan completes but finds no agents, display a message indicating this.
* **API Errors:** Gracefully handle errors during connection tests or scans. Display user-friendly error messages (e.g., 'Invalid API Key', 'Connection Timed Out') and update connection status accordingly.
* **Permission Data Inconsistencies:** Handle cases where permission data might be missing or malformed from the source API (mocked).
* **Validation:** Client-side validation for all form inputs (API keys, names, etc.).
* **Accessibility (a11y):** Utilize semantic HTML and Headless UI components. Ensure proper ARIA attributes, keyboard navigation, and focus management, especially for modals and forms.
## 9. SAMPLE DATA
```json
// Mock data for connections store
[
{
"id": "conn_1a2b3c",
"name": "Google Workspace Prod",
"type": "Google Workspace",
"status": "Connected",
"apiKey": "****"
},
{
"id": "conn_4d5e6f",
"name": "Slack Dev Team",
"type": "Slack",
"status": "Error",
"apiKey": "****"
}
]
// Mock data for agents store
[
{
"id": "agent_g1h2i3",
"name": "GSuite Assistant Bot",
"platform": "Google Workspace",
"connectionId": "conn_1a2b3c",
"status": "Complete",
"discoveredAt": "2024-07-28T10:00:00Z"
},
{
"id": "agent_j4k5l6",
"name": "Slack Notification Relay",
"platform": "Slack",
"connectionId": "conn_4d5e6f",
"status": "Error",
"discoveredAt": null
}
]
// Mock data for permissions state (keyed by agentId)
{
"agent_g1h2i3": {
"agentId": "agent_g1h2i3",
"permissions": [
{
"resource": "calendar.readonly",
"actions": ["read"],
"risk": "Low"
},
{
"resource": "drive.metadata.readonly",
"actions": ["read"],
"risk": "Low"
},
{
"resource": "users.readonly",
"actions": ["read"],
"risk": "Medium"
},
{
"resource": "admin.user.manage",
"actions": ["write", "delete"],
"risk": "Critical"
}
],
"overallRisk": "High",
"lastAnalyzed": "2024-07-28T10:05:00Z"
}
}
// Mock data for alerts store
[
{
"id": "alert_m7n8o9",
"message": "Critical Risk Detected: Agent 'GSuite Assistant Bot' has 'admin.user.manage' permissions.",
"timestamp": "2024-07-28T10:06:00Z",
"read": false
}
]
```
## 10. DEPLOYMENT NOTES
* **Build Tool:** Vite (`npm run build`)
* **Environment Variables:** Use `.env` files for sensitive information (though API keys are ideally handled server-side in a real app, for this MVP they can be stored in state after input). Example: `VITE_API_BASE_URL` if using a backend.
* **Performance:** Optimize component rendering using `React.memo` where appropriate. Ensure efficient state updates with Zustand. Lazy load components if the app grows significantly.
* **Hosting:** Can be deployed as a static site on platforms like Vercel, Netlify, or GitHub Pages.
* **Security Considerations (for MVP context):** While this is a front-end simulation, emphasize that in a production environment, API keys/credentials must NEVER be stored directly in the front-end code or local storage. They should be handled via a secure backend service using OAuth or token-based authentication.
* **Error Handling:** Implement global error boundaries in React to catch unexpected errors and display a fallback UI.