You are an AI assistant tasked with generating a complete, single-page React SPA (Single Page Application) for a SaaS product called 'Kod Akış Yönetici' (Code Flow Manager). This application helps developers proactively manage AI model integration constraints, similar to the issues faced with Anthropic's Claude and third-party harnesses like OpenClaw. The goal is to provide a unified dashboard for monitoring integration statuses, receiving proactive alerts about policy changes, and discovering alternative solutions.
**1. PROJECT OVERVIEW:**
Kod Akış Yönetici is a SaaS application designed to address the growing problem of AI model providers imposing restrictions or changing terms of service that affect third-party integrations. Developers and teams often rely on these integrations for their workflows, and sudden changes can lead to increased costs, service disruptions, or the need to hastily find alternatives. Our application acts as a central hub, providing visibility into the health and status of these integrations, alerting users to upcoming changes, and offering viable alternatives. The core value proposition is to provide peace of mind, cost predictability, and workflow continuity for users of AI models and their associated tools.
**2. TECH STACK:**
- **Frontend Framework:** React (using Create React App or Vite for setup)
- **Styling:** Tailwind CSS for rapid UI development and a consistent, responsive design.
- **State Management:** Zustand or Context API for managing global and local component states.
- **Routing:** React Router DOM for navigation within the single-page application.
- **HTTP Client:** Axios for making API requests (mocked for MVP).
- **Icons:** React Icons library.
- **Utilities:** Date-fns for date manipulation.
**3. CORE FEATURES:**
* **Dashboard (Main View):**
* **User Flow:** Upon login/access, the user lands on the main dashboard which displays an overview of their connected AI model integrations. Each integration card shows its name, status (e.g., 'Healthy', 'Warning', 'Restricted'), last checked time, and a summary of recent alerts.
* **Integration Management:** A button/link to add new integrations or manage existing ones.
* **Integration Details View:**
* **User Flow:** Clicking on an integration card from the dashboard navigates the user to a detailed view for that specific integration.
* **Details:** Displays comprehensive information including the AI model provider, third-party harness, current API usage limits, subscription cost, active policy, recent policy change history, and a detailed log of alerts.
* **Alerts & Notifications:**
* **User Flow:** Users receive notifications directly within the app (e.g., a toast message or an alert badge on the dashboard) and potentially via email (simulated in MVP) when a monitored integration's status changes or a policy update is detected.
* **Functionality:** The system periodically checks the status of monitored integrations. If a policy change, restriction, or cost increase is detected, an alert is generated and displayed.
* **Alternatives Discovery:**
* **User Flow:** Within the Integration Details view, or via a dedicated 'Alternatives' section, users can see suggestions for alternative AI models or harnesses that offer similar functionality, often with better terms or pricing.
* **Functionality:** Based on the details of a restricted integration, the system suggests comparable services. This feature might initially rely on a curated list of alternatives.
* **Add/Manage Integrations:**
* **User Flow:** Users can access a form to add new integrations they want to monitor by providing details like AI Model Name, Third-Party Harness Name, API Key (optional for MVP, for status checks), and subscription details.
* **Functionality:** Input validation is crucial here. For MVP, this might be a manual entry form; future versions could involve API key validation or OAuth flows.
**4. UI/UX DESIGN:**
* **Layout:** A clean, modern, and responsive sidebar navigation (for larger screens) and a top navigation/hamburger menu (for smaller screens) linking to Dashboard, Integrations, Alerts, and Settings. The main content area will display the relevant information based on the selected section.
* **Color Palette:** Primary: A sophisticated dark blue or charcoal (#1F2937). Secondary: A vibrant accent color like teal or electric blue (#06B6D4) for interactive elements and alerts. Grays for text and backgrounds (#6B7280, #D1D5DB). White for contrast.
* **Typography:** A clean, readable sans-serif font family like Inter or Poppins.
* **Responsive Design:** Mobile-first approach. Ensure usability across all devices. Sidebar collapses into a hamburger menu on smaller screens. Cards and tables adjust their layout for optimal viewing.
* **Component Hierarchy:** Layout components wrap feature components. Navigation components are distinct. Data display components (cards, tables) are reusable.
**5. DATA MODEL:**
* **`Integration` Object:**
* `id`: string (UUID)
* `providerName`: string (e.g., 'Anthropic', 'OpenAI')
* `modelName`: string (e.g., 'Claude 3 Opus', 'GPT-4 Turbo')
* `harnessName`: string (e.g., 'OpenClaw', 'LangChain')
* `status`: 'Healthy' | 'Warning' | 'Restricted' | 'Unknown'
* `lastChecked`: string (ISO date string)
* `policyDetails`: string (Current policy summary)
* `subscriptionCost`: number (monthly, in USD)
* `alertHistory`: Array of `Alert` objects
* `apiKey`: string (Sensitive, handle securely - mock in MVP)
* `createdAt`: string (ISO date string)
* `updatedAt`: string (ISO date string)
* **`Alert` Object:**
* `id`: string (UUID)
* `integrationId`: string
* `timestamp`: string (ISO date string)
* `type`: 'POLICY_CHANGE' | 'COST_INCREASE' | 'RESTRICTION' | 'STATUS_DOWN'
* `message`: string (Detailed alert message)
* `isRead`: boolean
* **`Alternative` Object:**
* `id`: string (UUID)
* `originalIntegrationId`: string (references the integration it's an alternative for)
* `alternativeProviderName`: string
* `alternativeModelName`: string
* `description`: string (Why it's a good alternative)
* `pros`: string[]
* `cons`: string[]
* `pricingInfo`: string
* **State Management (Zustand Example):**
```javascript
// integrationsStore.js
import create from 'zustand';
const useIntegrationsStore = create(set => ({
integrations: [],
loading: false,
error: null,
addIntegration: (integrationData) => set(state => ({ integrations: [...state.integrations, integrationData] })),
setIntegrations: (integrationsData) => set({ integrations: integrationsData }),
setLoading: (isLoading) => set({ loading: isLoading }),
setError: (errorMsg) => set({ error: errorMsg }),
// ... other actions like updateIntegration, deleteIntegration
}));
export default useIntegrationsStore;
```
* **Local Storage:** For MVP, we can store the list of `integrations` in `localStorage` to persist data between sessions without a backend. A more robust solution would use a backend API.
**6. COMPONENT BREAKDOWN:**
* **`App.js` / `main.jsx`:** Root component, sets up routing and global layout.
* **`Layout.jsx`:** Main layout component including `Sidebar.jsx` and `Header.jsx`/`TopNav.jsx`.
* **`Sidebar.jsx`:** Navigation menu component. Props: `routes` (array of navigation items).
* **`Header.jsx` / `TopNav.jsx`:** Top navigation/header, potentially includes user profile/settings links.
* **`DashboardPage.jsx`:** Main dashboard view. Uses `IntegrationList.jsx` and `AlertSummary.jsx`.
* **`IntegrationList.jsx`:** Displays a list of `IntegrationCard.jsx` components. Props: `integrations` (array).
* **`IntegrationCard.jsx`:** Represents a single integration on the dashboard. Props: `integration` (object).
* Sub-components: `StatusIndicator.jsx`.
* **`IntegrationDetailsPage.jsx`:** Detailed view for a single integration. Uses `AlertHistory.jsx`, `PolicyInfo.jsx`, `AlternativesSection.jsx`.
* **`AlertHistory.jsx`:** Displays a table or list of alerts for a specific integration. Props: `alerts` (array).
* **`PolicyInfo.jsx`:** Displays policy details and history. Props: `policyDetails`, `policyHistory` (strings/arrays).
* **`AlternativesSection.jsx`:** Displays suggested alternatives. Uses `AlternativeCard.jsx`. Props: `alternatives` (array).
* **`AlternativeCard.jsx`:** Displays information about a single alternative solution. Props: `alternative` (object).
* **`AddIntegrationPage.jsx`:** Form for adding new integrations. Uses `IntegrationForm.jsx`.
* **`IntegrationForm.jsx`:** The actual form component. Props: `onSubmit` (function), `initialData` (object, for editing).
* **`AlertsPage.jsx`:** A dedicated page to view all recent alerts across integrations.
* **`NotificationToasts.jsx`:** A global component to display temporary notification messages (e.g., success, error, info). Uses Zustand or Context.
* **`LoadingSpinner.jsx`:** Reusable loading indicator component.
* **`EmptyState.jsx`:** Component to display when lists are empty (e.g., 'No integrations added yet.').
**7. ANIMATIONS & INTERACTIONS:**
* **Page Transitions:** Subtle fade-in/fade-out or slide animations between different pages using `react-transition-group` or Framer Motion.
* **Hover Effects:** Subtle scaling or background color changes on interactive elements like buttons and cards.
* **Loading States:** Display `LoadingSpinner.jsx` within the content area or specific components while data is being fetched. Use skeleton loaders for a smoother perceived performance.
* **Alert Badges:** Animate the appearance of alert badges or notification counts.
* **Form Validation:** Visual feedback for input validation errors (e.g., red border, error message animation).
* **Status Indicator:** Use subtle animations or color transitions for status changes (e.g., 'Unknown' to 'Healthy').
**8. EDGE CASES:**
* **Empty States:** Display user-friendly messages and possibly call-to-action buttons when there are no integrations, alerts, or alternatives to show.
* **Error Handling:** Gracefully handle API errors (e.g., network issues, invalid API keys if implemented). Display clear error messages to the user, potentially using `NotificationToasts.jsx`.
* **Data Fetching Errors:** Show specific error messages if data fails to load for a particular section.
* **Validation:** Implement robust client-side validation for the `IntegrationForm` (e.g., ensuring required fields are filled, correct data formats).
* **Accessibility (a11y):** Use semantic HTML elements, ensure sufficient color contrast, provide ARIA attributes where necessary, and ensure keyboard navigability.
* **API Key Security:** Although mocked for MVP, consider how API keys would be handled securely in a real application (encryption, secure storage, environment variables).
* **Rate Limiting:** If making real API calls to check statuses, be mindful of provider rate limits.
**9. SAMPLE DATA:**
* **`integrations` Array (Mock):**
```json
[
{
"id": "int-123e4567-e89b-12d3-a456-426614174000",
"providerName": "Anthropic",
"modelName": "Claude 3 Opus",
"harnessName": "OpenClaw",
"status": "Warning",
"lastChecked": "2024-03-15T10:30:00Z",
"policyDetails": "Subscription limits no longer apply to third-party harnesses starting April 4th. Requires extra usage or pay-as-you-go.",
"subscriptionCost": 20,
"alertHistory": [
{
"id": "alert-abc1-def2-ghi3-jkl4",
"integrationId": "int-123e4567-e89b-12d3-a456-426614174000",
"timestamp": "2024-03-14T09:00:00Z",
"type": "POLICY_CHANGE",
"message": "Anthropic announced changes to third-party harness usage policy, effective April 4th. Subscription limits will not cover them.",
"isRead": false
}
],
"apiKey": "sk-mock-anthropic-1234",
"createdAt": "2024-01-10T00:00:00Z",
"updatedAt": "2024-03-15T10:30:00Z"
},
{
"id": "int-890a123b-456c-789d-012e-345f67890123",
"providerName": "OpenAI",
"modelName": "GPT-4 Turbo",
"harnessName": "LangChain",
"status": "Healthy",
"lastChecked": "2024-03-15T10:35:00Z",
"policyDetails": "Standard usage policy applies. No recent changes detected.",
"subscriptionCost": 40,
"alertHistory": [],
"apiKey": "sk-mock-openai-5678",
"createdAt": "2023-11-20T00:00:00Z",
"updatedAt": "2024-03-15T10:35:00Z"
}
]
```
* **`alternatives` Array (Mock):**
```json
[
{
"id": "alt-111a-222b-333c-444d",
"originalIntegrationId": "int-123e4567-e89b-12d3-a456-426614174000",
"alternativeProviderName": "Mistral AI",
"alternativeModelName": "Mixtral 8x7B",
"description": "Offers competitive performance with a more permissive open-weight model approach, often suitable for self-hosting or specific API providers.",
"pros": ["Open weights", "Strong performance", "Potentially lower cost via specific providers"],
"cons": ["Requires specific integration knowledge", "Ecosystem maturity may vary"],
"pricingInfo": "Check specific API providers like Together.ai or Replicate, or self-host."
}
]
```
**10. DEPLOYMENT NOTES:**
* **Build Tool:** Use Vite for faster development builds and optimized production builds.
* **Environment Variables:** Utilize `.env` files for managing API keys (for potential backend integration), base URLs, and feature flags. Example: `VITE_API_BASE_URL='http://localhost:5000/api'`. For MVP using `localStorage`, this might be minimal.
* **Performance Optimizations:**
* Code Splitting: Use React Lazy and Suspense for code-splitting routes and components.
* Memoization: Employ `React.memo`, `useMemo`, and `useCallback` judiciously to prevent unnecessary re-renders.
* Image Optimization: Ensure images (like logos) are optimized and served in appropriate formats.
* Bundle Analysis: Use tools like `vite-plugin-visualizer` to analyze bundle size and identify optimization opportunities.
* **Static Site Generation (SSG) / Server-Side Rendering (SSR):** For MVP, a Client-Side Rendered (CSR) SPA is sufficient. For future SEO improvements or faster initial loads, consider frameworks like Next.js or Remix, which offer SSG/SSR capabilities.
* **Hosting:** Deploy to platforms like Vercel, Netlify, or GitHub Pages for easy CI/CD integration and global CDN delivery.