🔍 Code Lens

Code Lens is an interactive, visual web application designed to help developers explore, inspect, edit, and analyze codebases seamlessly. Powered by Google's Gemini API and styled with a custom Tailwind CSS dark theme, Code Lens allows you to drag-and-drop source files or folders and perform a suite of configurable static analysis tasks instantly.

---

🌟 Core Capabilities

Code Lens allows you to select one or more of the following core analysis tasks to run against your code:

1. 📝 Clear Explanations

• What it does: Translates complex, dense code blocks into plain English.
• Why it's useful: Perfect for onboarding to a new codebase, understanding inherited legacy code, or tracing intricate logic flows.
• Includes: Summary of the code's purpose, details on inputs/outputs, and a step-by-step logic breakdown.

2. 🪲 Intelligent Bug Finding (Fix Bugs)

• What it does: Highlights potential compilation issues, logical traps, runtime bugs, and missed edge-case handling.
• Why it's useful: Acts as an automated static code reviewer to catch typos, scoping issues, or off-by-one errors.
• Includes: Short summary of findings, bulleted list of issues explaining why they occur, and a fully corrected, copy-ready source block.

3. 🧪 Automated Unit Test Generation (Tests)

• What it does: Creates structured unit tests targeting your functional logic.
• Why it's useful: Accelerates testing coverage and saves time writing standard boilerplate tests.
• Includes: Automatic choice of framework (e.g., Jest for JavaScript/TypeScript, unittest / pytest for Python) and complete, ready-to-run test suites.

4. 📈 Actionable Refactoring Suggestions (Improvements)

• What it does: Pinpoints structural weaknesses, performance bottlenecks, and violations of modern coding practices.
• Why it's useful: Helps keep code clean, fast, dry, and aligned with standard guidelines.
• Includes: Specific, actionable suggestions (e.g., using native array operations, improving type safety, or optimizing loop performance).

---

🛠️ Advanced Features

• 📁 Multi-File & Folder Support: Drag-and-drop folder uploads read contents directly via the browser File API (webkitdirectory) without uploading code to any backend storage server.
• 🌳 Interactive Virtual Workspace:
  • Expandable/collapsible file tree.
  • Inline file and folder creation using + actions.
  • Inline file and folder renaming and deletion directly from the tree.
• 👁️ Pro-Grade Editor (Monaco Editor):
  • Integrated VS Code-like editing experience with syntax highlighting and line numbers.
  • Supports Ctrl+S / Cmd+S keyboard shortcuts for saving changes.
• 🔍 Side-by-Side Diff Viewer: Instantly compare your edits with the original code using the built-in diff viewer toggle.
• 📖 Markdown Preview: Selecting .md files automatically provides a Code / Preview tab to render styled HTML with syntax-highlighted code blocks.
• 🤖 Dynamic Model Selection: Choose between multiple Google Gemini models (e.g., gemini-3.5-flash, gemini-2.5-flash, gemini-3-flash, etc.) right from the header.
• 🕰️ Analysis Results History: Never lose an analysis. Code Lens maintains a history stack of your recent runs, allowing you to quickly revert to previous insights.
• ⚡ Micro-interactions & Polish: Smooth loaders, progressive shimmers, and glassmorphism UI elements provide a premium, responsive feel.
• 🔒 Secure API Architecture: Exposes only your own local Next.js API actions to the browser, hiding the GEMINI_API_KEY entirely from network requests, console logs, or client code.

---

💻 Technical Design

The application is built using a modern, fast tech-stack optimized for local demoing and performance:

• Framework: Next.js (App Router, React 19, TypeScript)
• Editor: Monaco Editor (@monaco-editor/react)
• Styling: Tailwind CSS v4 (Dark editor theme, customized scrollbars, glassmorphism panels)
• Highlighting/Parsing: Prism.js (Syntax highlighting) and Custom Markdown parser
• Icons: Lucide React
• AI Integration: Google Gemini API via REST

---

🚀 Setup & Launch

Follow these steps to run Code Lens on your local machine:

1. Configure your Gemini API Key

Generate your API key at Google AI Studio.

Create a file named .env in the root directory of the project and add your key:

GEMINI_API_KEY=your_gemini_api_key_here

2. Start the Development Server

Install dependencies and run the Next.js dev server:

# Install dependencies
npm install

# Run dev server
npm run dev

Note: Code Lens contains a pre-flight script (preflight.mjs) that automatically checks for the environment variable, safely preventing the server from starting if the key is missing.

3. Open the App

Go to http://localhost:3000 in your web browser to start analyzing your code!