You are an expert AI assistant tasked with building a single-page, highly secure, and privacy-focused desktop application using React and Tailwind CSS. The application's primary goal is to act as a protective layer between the user and AI coding assistants like Claude Code, preventing them from collecting sensitive prompt data without explicit user consent. This is a direct response to the user concern highlighted on Hacker News about the Vercel plugin on Claude Code attempting to read all prompts, even on non-Vercel projects, under the guise of 'anonymous usage data'.
**1. PROJECT OVERVIEW:**
- **Application Name:** Privacy Shield: Code Assistant Security (Internal development name for prompt generation).
- **Problem Solved:** AI coding assistants are increasingly requesting access to user prompts, potentially exposing sensitive project information, proprietary code, and personal data. Existing consent mechanisms are often vague, misleading, or implemented through prompt injection, lacking true user control.
- **Value Proposition:** Empowers developers with absolute control over their prompt data. Provides a transparent and secure way to interact with AI coding assistants, ensuring that sensitive information remains private and is only shared with explicit, informed consent. It acts as a user-controlled gatekeeper for AI interaction data.
**2. TECH STACK:**
- **Frontend Framework:** React (using Vite for fast development environment).
- **Styling:** Tailwind CSS for rapid and utility-first styling.
- **State Management:** Zustand for efficient and simple global state management.
- **UI Components:** Radix UI for accessible, unstyled UI primitives (e.g., Dialog, Switch, Button, Input) to build upon.
- **Icons:** Lucide React for a comprehensive set of SVG icons.
- **Local Storage:** `localStorage` API for persisting user settings and logs.
- **Electron (Optional but recommended for desktop):** To package this as a cross-platform desktop application. For this prompt, focus on the core SPA logic, assuming it can be integrated into Electron later.
**3. CORE FEATURES:**
- **Real-time Prompt Interception & Filtering:**
- **User Flow:** User types a prompt in their IDE/AI assistant interface. Before the prompt is sent to the AI, our application intercepts it. It checks the prompt against a configurable set of rules (keywords, patterns, project context). If the prompt is deemed sensitive or matches a blocking rule, it's flagged or blocked entirely.
- **Details:** The application needs a mechanism to hook into the prompt submission process. This might involve a background service or an integration layer depending on how AI assistants are accessed. For an SPA, this might simulate the interception by acting as a proxy or by providing an input field where users paste prompts before sending them to a simulated AI.
- **Permission Management:**
- **User Flow:** Users can view a list of connected AI assistants/plugins. For each assistant, they can grant or revoke specific permissions (e.g., 'Read Prompts', 'Collect Usage Data', 'Access Project Files'). These permissions are enforced by the filtering mechanism.
- **Details:** A clear UI to list AI tools, their detected capabilities, and toggle switches for each permission. This requires a data model to store these settings per tool.
- **Alerting & Notification System:**
- **User Flow:** When the application detects a potential privacy violation (e.g., an unapproved prompt being sent, a plugin attempting unauthorized data collection), it displays a prominent, non-intrusive notification to the user.
- **Details:** Uses `toast` notifications (e.g., from `react-hot-toast` or custom Radix UI Dialogs) with clear messages indicating the detected issue and the action taken (e.g., 'Prompt blocked: Contains sensitive keyword "API_KEY"').
- **Activity Log:**
- **User Flow:** Users can access a dedicated log view to see a history of all intercepted prompts, actions taken (blocked, allowed, warned), and any detected suspicious activities.
- **Details:** A searchable and filterable table displaying timestamp, AI tool, prompt snippet (if allowed by user), action, and reason.
- **Settings Configuration:**
- **User Flow:** Users can configure global settings, such as enabling/disabling the application, defining custom blocklist keywords/regex patterns, and setting default permissions for new AI tools.
- **Details:** A settings panel with input fields, toggles, and buttons for managing rules and application behavior.
**4. UI/UX DESIGN:**
- **Layout:** Single Page Application (SPA) with a clean, modern, and intuitive dashboard layout. A sidebar for navigation (Dashboard, Permissions, Logs, Settings) and a main content area. Minimalist aesthetic.
- **Color Palette:** Primarily dark mode focused, using a sophisticated palette of deep blues, grays, and blacks, with accent colors (e.g., a vibrant green for 'allowed/secure', red for 'blocked/warning', and a neutral cyan for informational elements) to convey status and actions effectively. Ensures high contrast for readability.
- **Typography:** Use a clean, highly readable sans-serif font family like Inter or Manrope. Clear hierarchy with distinct font sizes and weights for headings, subheadings, body text, and labels.
- **Responsive Design:** While primarily a desktop app concept, the SPA should adapt gracefully. Ensure elements resize and reflow correctly for various screen widths, maintaining usability. Focus on a comfortable experience on typical developer screen sizes.
- **Interactivity:** Subtle animations on hover states, smooth transitions for panel expansions and content loading. Clear visual feedback for user actions (e.g., button clicks, toggle changes).
**5. DATA MODEL:**
- **State Structure (Zustand Store):**
```javascript
{
settings: {
isEnabled: boolean,
globalBlocklist: string[], // Regex patterns or keywords
defaultPermissions: {
readPrompts: boolean,
collectUsage: boolean,
accessFiles: boolean
}
},
permissions: {
[toolId: string]: {
name: string,
icon: string,
granted: {
readPrompts: boolean,
collectUsage: boolean,
accessFiles: boolean
}
}
},
logs: Array<LogEntry>,
// Potentially: aiTools: Array<AiToolInfo> // Discovered AI tools
}
type LogEntry = {
id: string;
timestamp: string;
toolId: string;
action: 'allowed' | 'blocked' | 'warned' | 'intercepted';
promptSnippet?: string;
reason: string;
details?: string;
}
```
- **Persistence:** User settings and permissions stored in `localStorage`. Logs might also be stored locally, with potential for a size limit or archival.
- **Mock Data Format:**
- **Log Entries:** Realistic examples simulating different scenarios (sensitive keywords blocked, allowed prompts, suspicious access attempts).
- **Permissions:** Example data for hypothetical tools like 'Claude Code', 'GitHub Copilot', 'ChatGPT Extension'.
**6. COMPONENT BREAKDOWN:**
- **`App.tsx`:** Main application component, sets up routing (if needed, though likely not for SPA) and global layout. Initializes Zustand store and loads settings from localStorage.
- **Props:** None
- **Responsibility:** Overall application structure, theme provider, main navigation setup.
- **`Sidebar.tsx`:** Navigation menu component.
- **Props:** `activeItem: string`
- **Responsibility:** Renders navigation links, highlights the active section.
- **`Dashboard.tsx`:** Main landing page showing overview, recent activity, and status.
- **Props:** None
- **Responsibility:** Displays summary statistics, latest log entries, and application status.
- **`PermissionsManager.tsx`:** Component for managing AI tool permissions.
- **Props:** `tools: object` (from Zustand store)
- **Responsibility:** Renders list of AI tools, their current permissions, and allows users to toggle them via `PermissionToggle.tsx`.
- **`PermissionToggle.tsx`:** Individual permission toggle for a specific tool.
- **Props:** `toolId: string`, `permissionName: string`, `isGranted: boolean`, `onToggle: (toolId, permissionName, newState) => void`
- **Responsibility:** Renders a switch/checkbox for a single permission, calls handler on change.
- **`LogViewer.tsx`:** Component to display the activity log.
- **Props:** `logs: Array<LogEntry>`
- **Responsibility:** Renders a table of log entries, handles filtering/searching.
- **`LogEntryRow.tsx`:** Renders a single row in the log table.
- **Props:** `logEntry: LogEntry`
- **Responsibility:** Displays details of one log event.
- **`Settings.tsx`:** Component for application settings.
- **Props:** None
- **Responsibility:** Manages global settings like enable/disable, blocklist input, default permissions.
- **`BlocklistInput.tsx`:** Input field for managing blocklist patterns.
- **Props:** `patterns: string[]`, `onPatternsChange: (newPatterns) => void`
- **Responsibility:** Allows users to add, edit, and remove regex patterns.
- **`NotificationCenter.tsx`:** Manages displaying toast notifications.
- **Props:** None
- **Responsibility:** Integrates with a toast library to show alerts.
**7. ANIMATIONS & INTERACTIONS:**
- **Hover Effects:** Subtle background color changes or slight scaling on interactive elements like buttons, sidebar items, and permission toggles.
- **Transitions:** Smooth transitions for opening/closing sidebars, expanding log details, modal pop-ups (e.g., for confirmation or detailed error messages). Use CSS transitions or React Transition Group.
- **Loading States:** Display skeleton loaders or spinners within components while data is being fetched or settings are being saved. Indicate an "intercepting..." state when actively monitoring prompts.
- **Micro-interactions:** Visual feedback when a prompt is blocked (e.g., a brief red flash on the relevant UI element), or when a permission is successfully updated (e.g., a green checkmark animation).
**8. EDGE CASES:**
- **Empty States:** Display user-friendly messages and illustrations when the log is empty, no AI tools are detected, or no custom rules are set.
- **Error Handling:** Gracefully handle errors during `localStorage` operations, potential issues if the interception mechanism fails (e.g., display a critical warning). Implement try-catch blocks.
- **Validation:** Validate user input for settings (e.g., ensuring regex patterns are syntactically valid). Provide clear error messages next to invalid fields.
- **Accessibility (a11y):** Use semantic HTML5 elements. Ensure all interactive elements are keyboard-navigable and have appropriate ARIA attributes. Use Radix UI primitives which are built with accessibility in mind. Ensure sufficient color contrast.
- **Initial State:** When the app first runs, default settings should be applied, and the user should be guided to configure permissions.
- **Interception Failures:** If the application cannot intercept prompts from a specific tool, it should clearly notify the user about this limitation.
**9. SAMPLE DATA:**
```json
{
"settings": {
"isEnabled": true,
"globalBlocklist": ["(?i)api_key", "(?i)secret_token", "(?i)password:.*"],
"defaultPermissions": {
"readPrompts": false,
"collectUsage": false,
"accessFiles": false
}
},
"permissions": {
"claude-code-plugin": {
"name": "Claude Code Plugin",
"icon": "si:anthropic",
"granted": {
"readPrompts": false,
"collectUsage": false,
"accessFiles": false
}
},
"github-copilot": {
"name": "GitHub Copilot",
"icon": "logos:github-copilot",
"granted": {
"readPrompts": true,
"collectUsage": true,
"accessFiles": false
}
},
"jetbrains-ai": {
"name": "JetBrains AI Assistant",
"icon": "simple-icons:jetbrains",
"granted": {
"readPrompts": false,
"collectUsage": false,
"accessFiles": false
}
}
},
"logs": [
{
"id": "log_1",
"timestamp": "2024-07-26T10:30:00Z",
"toolId": "claude-code-plugin",
"action": "blocked",
"promptSnippet": "Show me how to retrieve the API_KEY from the environment variables.",
"reason": "Blocked by global rule: Contains sensitive keyword 'API_KEY'"
},
{
"id": "log_2",
"timestamp": "2024-07-26T10:31:15Z",
"toolId": "github-copilot",
"action": "allowed",
"promptSnippet": "Generate a Python function to calculate factorial.",
"reason": "Permission granted: Read Prompts"
},
{
"id": "log_3",
"timestamp": "2024-07-26T10:32:05Z",
"toolId": "claude-code-plugin",
"action": "warned",
"promptSnippet": "I'm working on a new financial model.",
"reason": "Potential sensitive context detected. Review permissions.",
"details": "Project type inferred as 'finance', which may require stricter prompt review."
},
{
"id": "log_4",
"timestamp": "2024-07-26T10:33:00Z",
"toolId": "claude-code-plugin",
"action": "intercepted",
"promptSnippet": "Provide a summary of the recent user feedback.",
"reason": "Intercepted prompt before sending to AI."
},
{
"id": "log_5",
"timestamp": "2024-07-26T10:34:10Z",
"toolId": "github-copilot",
"action": "allowed",
"promptSnippet": "Refactor this code for better readability.",
"reason": "Permission granted: Read Prompts"
},
{
"id": "log_6",
"timestamp": "2024-07-26T10:35:00Z",
"toolId": "claude-code-plugin",
"action": "blocked",
"promptSnippet": "What is the user's default password for the staging server?",
"reason": "Blocked by global rule: Contains sensitive keyword 'password'"
}
]
}
```
**10. DEPLOYMENT NOTES:**
- **Build Setup:** Use Vite (`npm create vite@latest my-app --template react-ts`). Configure `vite.config.ts` for optimal builds.
- **Environment Variables:** Primarily rely on `localStorage` for state persistence. If an Electron build is pursued, environment variables might be needed for inter-process communication or configuration.
- **Performance Optimizations:** Code splitting (though minimal for SPA). Efficient state management with Zustand. Debounce user input for settings updates (like blocklist). Optimize rendering of large log lists using virtualization if necessary (e.g., `react-window`).
- **Security:** Since this app handles sensitive data, ensure all `localStorage` operations are secure. If external APIs were ever considered (not for MVP), strict HTTPS and CORS policies would be essential. For desktop builds (Electron), hardening the main process is crucial.
- **Packaging:** For desktop use, integrate with Electron. The SPA becomes the renderer process. Use `electron-builder` for easy packaging across different OS.
- **Integration Strategy:** The core challenge is *how* the SPA intercepts prompts. For a truly seamless experience, an Electron app would be necessary to hook into system-level processes or IDE APIs. In a pure SPA context, users might need to copy-paste prompts through the app, or specific browser extensions/IDE plugins would be required to act as bridges. The prompt assumes the application *can* intercept, focusing on the logic within the SPA.