Lovable Prompt Creator - AI Prompt Generator

# APPLICATION OVERVIEW
GenIA Analyzer is a web application designed to analyze GitHub repositories and transform code into an interactive knowledge graph. Utilizing Next.js 15, React 19, and D3.js, it allows users to input their repository URLs and API keys to generate and visualize complex data structures without the need for authentication or a backend database.

# CORE FEATURES
1. **Repository Analysis**: Users can input the URL of a GitHub repository along with optional branch information and their AI provider API key to initiate the analysis process.
2. **Interactive Graph Visualization**: The application utilizes D3.js to render an interactive graph that visualizes nodes and edges representing the repository's structure and relationships.
3. **Export Functionality**: Users can export the generated graphs in various formats including JSON, GraphML, PNG, and HTML for further analysis or sharing.
4. **Local History Management**: The application stores user preferences and analysis history locally using localStorage or IndexedDB, allowing quick access to previous analyses without a backend.
5. **Responsive Design**: The application is optimized for both desktop and mobile devices, ensuring a smooth experience across different screen sizes.

# 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 includes a streamlined header, a central analysis input area, a visualization section, and a sidebar for metrics and history, adapting to mobile view with a drawer for navigation.

# TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Use React's built-in state management or context API as needed.

# IMPLEMENTATION STEPS
1. **Set Up Next.js Project**: Create a new Next.js project using TypeScript.
2. **Install Dependencies**: Add necessary libraries including D3.js, Tailwind CSS, and any additional UI components from shadcn/ui.
3. **Create API Routes**: Implement API routes for analysis, export, and history management as specified, ensuring they handle requests and responses correctly.
4. **Develop UI Components**:
   - **Repo Form**: Input fields for the repository URL, branch, IA provider, and API key.
   - **Analysis Loader**: Display loading states and progress during the analysis.
   - **Graph Viewer**: Render the D3.js graph and handle interactions.
   - **Export Menu**: Provide options for exporting the graph data.
   - **History Panel**: List previous analyses stored in local storage.
5. **Implement Local Storage**: Create functions to manage local history and user preferences.
6. **Responsive Design**: Use Tailwind CSS to ensure the layout is responsive and adapts well to mobile devices, including a drawer for mobile navigation.
7. **Testing and Optimization**: Conduct thorough testing to ensure all features work correctly and optimize performance, particularly for graph rendering.

# USER EXPERIENCE
Users will start on the landing page where they can input their GitHub repository URL, select the desired options, and click the "Analyze Repository" button. The analysis process will provide real-time feedback through loading indicators. Once the graph is generated, users can interact with it directly, explore different nodes, and utilize the export menu to save their findings. The sidebar will keep track of their analysis history, allowing users to revisit previous sessions effortlessly. The entire application is designed to be intuitive, with clear instructions and minimal distractions, ensuring a smooth user experience.