Update: Fix reset button, refine prompts, and enhance frontend UI

code_chatbot/prompts.py

@@ -1,63 +1,257 @@
 # prompts.py - Enhanced Prompts for Code Chatbot
+# Inspired by CodeFalcon
 
-SYSTEM_PROMPT_AGENT = """You are an expert software engineer pair-programming with the user on the codebase: {repo_name}.
+# =============================================================================
+# SPECIFICATION TEMPLATES (CodeFalcon)
+# =============================================================================
 
-**YOUR POLE STAR**: Be concise, direct, and "spot on". Avoid conversational filler.
+PO_FRIENDLY_TEMPLATE = """You are a Product Manager creating specifications for stakeholders.
 
-**CAPABILITIES**:
-1. **Code Analysis**: Explain logic, trace data flow, identifying patterns.
-2. **Tool Usage**:
-   - `search_codebase`: Find code by query.
-   - `read_file`: Get full file content.
-   - `find_callers/callees`: Trace dependencies.
-
-**ANSWER STYLE**:
-- **Direct**: Answer the question immediately. No "Here is the answer..." preambles.
-- **Evidence-Based**: Back every claim with a code reference (File:Line).
-- **Contextual**: Only provide architectural context if it's essential to the answer.
-- **No Fluff**: Do not give "Overview" or "Key Components" lists unless the question implies a high-level summary is needed.
-
-**SCENARIOS**:
-- *Simple Question* ("Where is the login function?"):
-  - Give a 1-sentence answer with the file path and line number.
-  - Show the specific function code.
-  - Done.
-
-- *Complex Question* ("How does authentication work?"):
-  - Brief summary (1-2 sentences).
-  - Walkthrough of the flow using code snippets.
-  - Mention key security files.
-
-- *Implementation Request* ("Create a user model"):
-  - Propose the code immediately.
-  - Briefly explain *why* it fits the existing patterns.
-
-**CRITICAL RULES**:
-1. **NO HTML**: Use only Markdown. Do NOT generate HTML tags like <div> or <span>. Do NOT render "source chips".
-2. **NO HALLUCINATION**: Only cite files that exist in the retrieved context.
-3. **NO LECTURES**: Don't explain general programming concepts unless asked.
+Based on the following codebase context, create PO-friendly specifications:
+
+{context}
+
+{query}
+
+## Your Task:
+Analyze the provided code and extract the actual functionality, features, and business logic present. Generate a comprehensive, business-focused specification based on what you find in the code.
+
+**Focus on capturing what's actually in the code:**
+- What functionality does this code implement?
+- What features are available to users?
+- What business logic or workflows are present?
+- What integrations or external services are used?
+- What data is being processed or managed?
+- How do different parts of the system work together to deliver features?
+- What are the key system components and their relationships?
+
+## Guidelines:
+- **Be flexible**: Only include sections that are relevant to the actual code provided
+- **Extract meaning**: Focus on understanding and explaining what the code does, not forcing it into predefined categories
+- Use business language, avoid technical jargon where possible
+- Focus on "what" and "why", not "how"
+- Think from the end-user and stakeholder perspective
+- Be clear and concise
+- Use bullet points and sections for readability
+- If certain information isn't present in the code, don't make assumptions - just document what's there
+
+Generate the specification based on the actual code provided:
 """
 
-SYSTEM_PROMPT_LINEAR_RAG = """You are an expert pair-programmer analyzing the codebase: {repo_name}.
+DEV_SPECS_TEMPLATE = """You are a Senior Software Architect creating technical specifications.
+
+Based on the following codebase context, create comprehensive developer specifications:
+
+{context}
+
+{query}
+
+## Your Role:
+You are an expert software architect and technical analyst. Your task is to analyze the provided code and create a comprehensive technical specification that captures the actual implementation, architecture, and functionality present in the code.
+
+## Your Task:
+Analyze the code deeply and document what's actually there. Focus on extracting and explaining:
+
+**Core Implementation Details:**
+- What is the actual architecture and structure of this code?
+- What components, classes, functions, or modules are present?
+- What design patterns or architectural approaches are used?
+- What is the data flow and state management?
+
+**File Dependencies & Relationships:**
+- What files import or depend on other files in the codebase?
+- What is the dependency hierarchy and module structure?
+- Which files are entry points vs. utility/helper files?
+- What shared modules or common dependencies exist?
+- How do different parts of the codebase interact with each other?
+- Are there circular dependencies or tightly coupled modules?
+
+**Technical Functionality:**
+- What specific features and capabilities does this code implement?
+- What APIs, services, or external integrations are used?
+- What data structures and models are defined?
+- What business logic and algorithms are implemented?
+
+**Key Technical Aspects:**
+- Technology stack and frameworks used
+- External dependencies and third-party libraries
+- Internal module dependencies and imports
+- Configuration and environment setup
+- Error handling and validation logic
+- Security considerations (if present)
+- Performance optimizations (if present)
+
+## Guidelines:
+- **Be adaptive**: Structure your specification based on what's actually in the code
+- **Extract real functionality**: Document what the code actually does, not what you think it should do
+- **Be thorough but flexible**: Include all relevant technical details, but don't force information into predefined sections if it doesn't fit
+- **Organize logically**: Group related functionality together in a way that makes sense for this specific codebase
+- Use clear headings and bullet points for readability
+- Include code examples where helpful
+- Document APIs, services, and data structures as they appear in the code
+- Note any assumptions or ambiguities you encounter
+
+## Suggested Sections (use what's relevant):
+- **Overview**: What this code does at a high level
+- **Architecture**: Components, modules, services, and their relationships
+- **File Structure & Dependencies**: 
+  - Module organization and file hierarchy
+  - Import/export relationships between files
+  - Dependency graph (which files depend on which)
+  - Entry points and core modules
+  - Shared utilities and common dependencies
+- **Key Features**: Main functionality implemented
+- **Data Models**: Interfaces, types, classes defined
+- **API Integration**: External services and endpoints used
+- **Business Logic**: Key algorithms and workflows
+- **State Management**: How data flows through the application
+- **Configuration**: Environment variables, settings, feature flags
+- **Technical Notes**: Important implementation details, patterns used
+**Important**: Focus on extracting and documenting the actual meaning and functionality from the code. Don't force the code into predefined templates - let the code guide the structure of your specification.
+**When documenting UI components or screens:**
+- Describe the actual UI elements and their purpose
+- Explain conditional logic (visibility, enabled/disabled states)
+- Document event handlers and what they trigger
+- Note any loading states or asynchronous operations
+- Explain data binding and how data flows to the UI
+**When documenting APIs and services:**
+- List the service/API calls found in the code
+- Document endpoints, HTTP methods, and parameters
+- Describe request and response structures as they appear in the code
+- Explain the purpose and context of each API call
+- Note any error handling or retry logic
+**When documenting components:**
+- List inputs, outputs, and dependencies
+- Explain initialization and lifecycle hooks
+- Document key methods and their purpose
+- Describe state management and data flow
+- Note any important business logic or conditions
+
+**When analyzing file dependencies:**
+- Identify all import statements and what they import from
+- Map out which files depend on which other files
+- Note any external package dependencies
+- Identify shared utilities or common modules used across multiple files
+- Highlight the main entry points and how they connect to other modules
+- Create a dependency flow showing how modules interact
+- Note any potential issues like circular dependencies or tight coupling
+
+## Analysis Approach:
+- Analyze all provided code files thoroughly
+- Map out the relationships and dependencies between files
+- Extract the actual functionality, logic, and structure present
+- Document what you find, not what you expect to find
+- If information is incomplete, note what's present and what's missing
+- Focus on understanding and explaining the code's purpose and behavior
+- Pay special attention to how different files and modules work together
+
+## Final Note:
+Your goal is to create a clear, comprehensive technical specification that accurately reflects what's in the code. Be thorough, be accurate, and let the code guide your documentation structure.
+
+Generate the technical specification now:
+"""
 
-**YOUR POLE STAR**: Be concise, direct, and factual.
+USER_STORIES_TEMPLATE = """You are a Product Owner creating user stories from code.
 
-**INSTRUCTIONS**:
-1. **Analyze Context**: Use the provided code snippets to answer the question.
-2. **Be Direct**: Start immediately with the answer. Avoid "Based on the code..." intros.
-3. **Cite Evidence**: Every claim must reference a file path.
-4. **Show Code**: Include relevant snippets.
-5. **No Fluff**: Skip general summaries unless requested.
+Based on the following codebase context, create user stories:
 
-**RETRIEVED CODE CONTEXT:**
 {context}
 
----
+{query}
+
+## Your Task:
+Analyze the provided code and extract user-facing functionality to create meaningful user stories. Focus on understanding what users can do with this application based on the actual code implementation.
+
+## What to Extract:
+- User interactions and workflows present in the code
+- Features and capabilities available to users
+- User roles and permissions (if present)
+- Business rules and validation logic
+- User interface elements and their purpose
+- Data that users can view, create, update, or delete
+
+## User Story Format:
+For each piece of user-facing functionality found, create a user story using this format:
+
+**As a** [type of user]  
+**I want to** [perform some action]  
+**So that** [I can achieve some goal]
+
+**Acceptance Criteria:**
+- Given [context], when [action], then [expected result]
+- [Additional criteria as needed]
 
-**CRITICAL RULES**:
-- **NO HALLUCINATION**: Only use code from the context above.
-- **NO HTML**: Use standard Markdown only. Do NOT generate <div> tags.
-- **Keep it Short**: If a 2-sentence answer suffices, do not write a paragraph.
+## Guidelines:
+- Base stories on actual functionality in the code, not assumptions
+- Focus on user value and business outcomes
+- Keep stories independent and testable
+- Include relevant acceptance criteria from the code logic
+- Group related stories by feature or workflow
+- If user roles aren't explicit in the code, use generic "user" or infer from context
+
+Generate user stories based on the actual code provided:
+"""
+
+def get_spec_template(spec_type: str) -> str:
+    """Get the appropriate template for spec type"""
+    templates = {
+        'po_friendly': PO_FRIENDLY_TEMPLATE,
+        'dev_specs': DEV_SPECS_TEMPLATE,
+        'user_stories': USER_STORIES_TEMPLATE
+    }
+    return templates.get(spec_type, DEV_SPECS_TEMPLATE)
+
+
+# =============================================================================
+# EXISTING SYSTEM PROMPTS (Updated with CodeFalcon Style)
+# =============================================================================
+
+# Replacing SYSTEM_PROMPT_AGENT with a modified CHAT_SYSTEM_PROMPT
+SYSTEM_PROMPT_AGENT = """You are Codebase Agent (powered by CodeFalcon intelligence), specialized in understanding and explaining codebases.
+
+You are interacting with the codebase: {repo_name}
+
+Your responsibilities:
+1. Answer questions about the code clearly and accurately
+2. Explain how features work based on the code
+3. Help users understand architecture and design decisions
+4. Provide code examples when helpful
+5. Suggest improvements when asked
+
+**CAPABILITIES**:
+- **Code Analysis**: Explain logic, trace data flow, identifying patterns.
+- **Tool Usage**: Use `search_codebase`, `read_file`, `find_callers` to retrieve context.
+
+**Guidelines**:
+- Be concise but thorough
+- Use the retrieved code context to support your answers
+- If you're not sure, say so - don't make up information
+- Provide code examples from the actual codebase when relevant
+- Explain technical concepts clearly
+"""
+
+# Replacing SYSTEM_PROMPT_LINEAR_RAG with CodeFalcon's CHAT_SYSTEM_PROMPT
+# Note: Removed {chat_history} placeholder as it is handled by the message list
+SYSTEM_PROMPT_LINEAR_RAG = """You are Codebase Agent (powered by CodeFalcon prompts), specialized in understanding and explaining codebases.
+
+You have access to the codebase: {repo_name}
+
+Your responsibilities:
+1. Answer questions about the code clearly and accurately
+2. Explain how features work based on the code
+3. Help users understand architecture and design decisions
+4. Provide code examples when helpful
+5. Suggest improvements when asked
+
+Guidelines:
+- Be concise but thorough
+- Use the retrieved code context to support your answers
+- If you're not sure, say so - don't make up information
+- Provide code examples from the actual codebase when relevant
+- Explain technical concepts clearly
+
+Retrieved code context:
+{context}
 """
 
 QUERY_EXPANSION_PROMPT = """Given a user question about a codebase, generate 3-5 diverse search queries optimized for semantic code search.
@@ -69,22 +263,12 @@ QUERY_EXPANSION_PROMPT = """Given a user question about a codebase, generate 3-5
 2. **Conceptual/Semantic**: High-level concepts, feature names, problem domains
 3. **Related Systems**: Connected components, dependencies, integrations
 4. **Configuration/Setup**: Environment setup, constants, configuration files
-5. **Usage Examples**: Test files, example usage, API endpoints (if applicable)
-
-**Query Strategy:**
-- Mix specific technical terms with natural language
-- Include variations of terminology (e.g., "authentication", "auth", "login")
-- Consider both questions ("how does X work") and keywords ("X implementation")
-- Target different levels of abstraction (high-level concepts → specific details)
+5. **Usage Examples**: Test files, example usage, API endpoints
 
 **Output Format** (one query per line, no numbering):
 [query 1]
 [query 2]
 [query 3]
-[query 4]
-[query 5]
-
-Generate 3-5 queries based on question complexity:
 """
 
 ANSWER_SYNTHESIS_PROMPT = """Synthesize these search results into a concise answer.
@@ -103,8 +287,6 @@ ANSWER_SYNTHESIS_PROMPT = """Synthesize these search results into a concise answ
 Provide your answer:
 """
 
-# Additional utility prompts for specific scenarios
-
 CODE_MODIFICATION_PROMPT = """You are suggesting code modifications for the codebase: {repo_name}.
 
 **User Request:** {user_request}
@@ -121,7 +303,7 @@ Provide a concrete implementation that:
 
 **Output Format:**
 ## Implementation Approach
-[Brief explanation of your solution and why it fits the codebase]
+[Brief explanation]
 
 ## Code Changes
 
@@ -134,15 +316,9 @@ Provide a concrete implementation that:
 [your implementation with comments]
 ````
 
-### [Additional files if needed]
-
 ## Integration Notes
-- [How this connects to existing code]
-- [Any configuration or dependency updates needed]
+- [Configuration/Dependency updates]
 - [Testing considerations]
-
-## Edge Cases Handled
-- [List important edge cases your code addresses]
 """
 
 ARCHITECTURE_EXPLANATION_PROMPT = """Explain the architecture and design patterns used in {repo_name} for: {topic}
@@ -155,7 +331,6 @@ ARCHITECTURE_EXPLANATION_PROMPT = """Explain the architecture and design pattern
 2. **Design Patterns**: Specific patterns used (MVC, Repository, Factory, etc.)
 3. **Data Flow**: How information moves through the system
 4. **Key Decisions**: Why this architecture was chosen
-5. **Diagram** (text-based): Visual representation of component relationships
 
 Format with clear sections and reference specific files.
 """
@@ -163,11 +338,6 @@ Format with clear sections and reference specific files.
 # =============================================================================
 # GROQ-OPTIMIZED PROMPTS (For Llama and smaller models)
 # =============================================================================
-# These prompts are specifically designed for smaller LLMs that need:
-# - More explicit, step-by-step instructions
-# - Clearer output format specifications  
-# - More examples and constraints
-# - Simpler language and shorter sections
 
 GROQ_SYSTEM_PROMPT_AGENT = """You are a code assistant for the repository: {repo_name}.
 
@@ -183,7 +353,6 @@ RULES:
 1. **Be Concise**: Get straight to the point.
 2. **Cite Files**: Always mention file paths.
 3. **Show Code**: Use snippets to prove your answer.
-4. **No Fluff**: Avoid "Here is a detailed breakdown...". Just give the breakdown.
 """
 
 GROQ_SYSTEM_PROMPT_LINEAR_RAG = """You are a code expert for: {repo_name}
@@ -201,90 +370,42 @@ Use these snippets to answer the question CONCISELY.
 """
 
 GROQ_QUERY_EXPANSION_PROMPT = """Turn this question into 3 search queries for a code search engine.
-
 Question: {question}
-
-Rules:
-- Make queries short (2-5 words each)
-- Include function/class names if mentioned
-- Mix technical terms and simple descriptions
-
 Output exactly 3 queries, one per line:
 """
 
 GROQ_ANSWER_SYNTHESIS_PROMPT = """Combine these code search results into one clear answer.
-
 USER QUESTION: {question}
-
 SEARCH RESULTS:
 {retrieved_context}
 
-INSTRUCTIONS:
-1. Read all the search results
-2. Find the most relevant code for the question
-3. Write ONE unified answer
-
-FORMAT YOUR ANSWER EXACTLY LIKE THIS:
-
+FORMAT:
 ## Direct Answer
-[2-3 sentences answering the question]
+[Answer]
 
 ## Key Files
-- `file1.py` - [what it does]
-- `file2.py` - [what it does]
+- `file.py`
 
 ## Main Code
 ```python
-[most relevant code snippet]
+[snippet]
 ```
-
-## How It Works
-1. [Step 1]
-2. [Step 2]
-3. [Step 3]
-
-RULES:
-- Keep answer under 300 words
-- Only use code from the search results
-- Be specific about file names and line numbers
 """
 
 GROQ_CODE_MODIFICATION_PROMPT = """You need to suggest code changes for: {repo_name}
-
 USER REQUEST: {user_request}
-
 EXISTING CODE:
 {existing_code}
 
-INSTRUCTIONS:
-1. Look at the existing code style
-2. Write new code that matches the style
-3. Explain where to put the new code
-
 OUTPUT FORMAT:
-
 ## What I'll Change
-[1 sentence summary]
+[Summary]
 
 ## New Code
 ```python
 # Add to: path/to/file.py
-
-[your code here - match existing style]
+[code]
 ```
-
-## Where to Add It
-- File: `path/to/file.py`
-- Location: After line X / In function Y / At the end
-
-## What It Does
-1. [First thing]
-2. [Second thing]
-
-RULES:
-- Match the existing code style exactly
-- Include all necessary imports
-- Handle errors properly
 """
 
 # =============================================================================
@@ -292,16 +413,7 @@ RULES:
 # =============================================================================
 
 def get_prompt_for_provider(prompt_name: str, provider: str = "gemini") -> str:
-    """Get the appropriate prompt based on LLM provider.
-    
-    Args:
-        prompt_name: Name of the prompt (e.g., "system_agent", "linear_rag")
-        provider: LLM provider ("gemini", "groq", etc.)
-        
-    Returns:
-        The appropriate prompt string for the provider
-    """
-    # Prompt mapping for different providers
+    """Get the appropriate prompt based on LLM provider."""
     prompt_map = {
         "system_agent": {
             "gemini": SYSTEM_PROMPT_AGENT,
@@ -331,6 +443,11 @@ def get_prompt_for_provider(prompt_name: str, provider: str = "gemini") -> str:
     }
     
     if prompt_name not in prompt_map:
+        # Fallback for specs
+        if prompt_name == "po_friendly": return PO_FRIENDLY_TEMPLATE
+        if prompt_name == "dev_specs": return DEV_SPECS_TEMPLATE
+        if prompt_name == "user_stories": return USER_STORIES_TEMPLATE
+        
         raise ValueError(f"Unknown prompt name: {prompt_name}")
     
     prompts = prompt_map[prompt_name]

frontend/src/app/globals.css

@@ -2,53 +2,110 @@
 
 /* Theme tokens */
 @theme {
-  --color-background: #050608;
+  --color-background: #030305;
   --color-foreground: #E2E8F0;
-  --color-card: rgba(15, 23, 42, 0.6);
-  --color-primary: #38BDF8;
+  --color-card: rgba(15, 23, 42, 0.4);
+  --color-card-border: rgba(255, 255, 255, 0.08);
+  --color-primary: #00F4FF;
+  /* Neon Cyan */
   --color-secondary: #8B5CF6;
-  --color-muted: #94A3B8;
-  --color-border: rgba(255, 255, 255, 0.08);
-  --color-glow: rgba(56, 189, 248, 0.3);
+  /* Electric Violet */
+  --color-accent: #FF00E6;
+  /* Magenta Glow */
+  --color-muted: #64748B;
+
+  --font-display: 'Space Grotesk', sans-serif;
+  --font-body: 'Inter', sans-serif;
+
+  --animate-aurora: aurora 10s infinite linear;
+  --animate-pulse-glow: pulse-glow 2s infinite ease-in-out;
 }
 
+/* Custom Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
+
 body {
-  background: radial-gradient(circle at 10% 20%, rgba(13, 17, 28, 1) 0%, rgba(5, 6, 8, 1) 90%);
+  background-color: var(--color-background);
   color: var(--color-foreground);
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: var(--font-body);
   min-height: 100vh;
+  overflow-x: hidden;
+  position: relative;
+}
+
+/* Background Aurora Effect */
+.bg-aurora {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: -1;
+  background:
+    radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 40%),
+    radial-gradient(circle at 90% 80%, rgba(0, 244, 255, 0.1) 0%, transparent 40%),
+    radial-gradient(ellipse at 50% 50%, rgba(3, 3, 5, 1) 20%, transparent 100%);
+  filter: blur(80px);
+}
+
+/* Grain Overly for Texture */
+.bg-grain {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  opacity: 0.03;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacit='1'/%3E%3C/svg%3E");
 }
 
 /* Scrollbar */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 6px;
 }
 
 ::-webkit-scrollbar-track {
-  background: rgba(15, 23, 42, 0.3);
-  border-radius: 4px;
+  background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(148, 163, 184, 0.3);
-  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(148, 163, 184, 0.5);
+  background: rgba(255, 255, 255, 0.2);
 }
 
-/* Code blocks */
-pre {
-  background: #0B0E14 !important;
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1rem;
-  overflow-x: auto;
+/* Utilities */
+.glass {
+  background: rgba(20, 20, 30, 0.4);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 }
 
-code {
-  font-family: 'JetBrains Mono', 'Fira Code', monospace;
-  font-size: 0.9em;
+.text-display {
+  font-family: var(--font-display);
+}
+
+.text-glow {
+  text-shadow: 0 0 20px rgba(0, 244, 255, 0.5);
+}
+
+@keyframes pulse-glow {
+
+  0%,
+  100% {
+    opacity: 0.5;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1.05);
+  }
 }

frontend/src/app/layout.tsx

@@ -4,6 +4,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import { LayoutGrid, MessageSquare, Search, Box, Sparkles, FolderOpen } from 'lucide-react';
 import './globals.css';
 
 const queryClient = new QueryClient();
@@ -15,28 +16,24 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" className="dark">
-      <head>
-        <link
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
-          rel="stylesheet"
-        />
-      </head>
-      <body className="antialiased">
+      <body className="antialiased selection:bg-cyan-500/30">
         <QueryClientProvider client={queryClient}>
-          <div className="min-h-screen flex">
-            {/* Sidebar */}
+          {/* Ambient Backgrounds */}
+          <div className="bg-aurora" />
+          <div className="bg-grain" />
+
+          <div className="min-h-screen flex text-slate-200 font-sans">
             <Sidebar />
 
-            {/* Main Content */}
-            <main className="flex-1 flex flex-col">
+            <main className="flex-1 flex flex-col relative z-10 overflow-hidden">
               <AnimatePresence mode="wait">
                 <motion.div
                   key="content"
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -20 }}
-                  transition={{ duration: 0.3, ease: 'easeOut' }}
-                  className="flex-1"
+                  initial={{ opacity: 0, filter: 'blur(10px)' }}
+                  animate={{ opacity: 1, filter: 'blur(0px)' }}
+                  exit={{ opacity: 0, filter: 'blur(10px)' }}
+                  transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
+                  className="flex-1 flex flex-col"
                 >
                   {children}
                 </motion.div>
@@ -49,65 +46,85 @@ export default function RootLayout({
   );
 }
 
-// Sidebar Component
 function Sidebar() {
   const pathname = usePathname();
 
   return (
     <motion.aside
-      initial={{ x: -100, opacity: 0 }}
+      initial={{ x: -20, opacity: 0 }}
       animate={{ x: 0, opacity: 1 }}
-      transition={{ duration: 0.5, ease: 'easeOut' }}
-      className="w-64 bg-slate-900/60 backdrop-blur-xl border-r border-white/10 p-4 flex flex-col"
+      className="w-[280px] glass h-screen sticky top-0 flex flex-col border-r border-white/5 z-20"
     >
-      {/* Logo */}
-      <div className="flex items-center gap-3 mb-8 px-2">
-        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-sky-400 to-violet-500 flex items-center justify-center">
-          <span className="text-xl">🕷️</span>
-        </div>
-        <div>
-          <h1 className="font-bold text-lg bg-gradient-to-r from-sky-400 to-violet-400 bg-clip-text text-transparent">
-            Code Crawler
-          </h1>
-          <p className="text-xs text-slate-500">v2.0</p>
+      {/* Brand */}
+      <div className="p-8">
+        <div className="flex items-center gap-3">
+          <div className="relative">
+            <div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-cyan-500 to-violet-600 flex items-center justify-center shadow-lg shadow-cyan-500/20">
+              <span className="text-xl">🦅</span>
+            </div>
+            <div className="absolute inset-0 bg-cyan-400 blur-lg opacity-40 animate-pulse" />
+          </div>
+          <div>
+            <h1 className="font-bold text-lg text-white tracking-tight font-display">
+              CodeFalcon
+            </h1>
+            <p className="text-[10px] uppercase tracking-widest text-cyan-400 font-semibold">
+              Agent V2.0
+            </p>
+          </div>
         </div>
       </div>
 
-      {/* Navigation */}
-      <nav className="flex-1 space-y-2">
-        <NavItem href="/" icon="📁" label="Upload" active={pathname === '/'} />
-        <NavItem href="/chat" icon="💬" label="Chat" active={pathname === '/chat'} />
-        <NavItem href="/search" icon="🔍" label="Search" active={pathname === '/search'} />
-        <NavItem href="/refactor" icon="🔧" label="Refactor" active={pathname === '/refactor'} />
-        <NavItem href="/generate" icon="✨" label="Generate" active={pathname === '/generate'} />
+      {/* Nav */}
+      <nav className="flex-1 px-4 space-y-2">
+        <NavItem href="/" icon={<LayoutGrid size={20} />} label="Overview" active={pathname === '/'} />
+        <NavItem href="/chat" icon={<MessageSquare size={20} />} label="Agent Chat" active={pathname === '/chat'} />
+        <NavItem href="/search" icon={<Search size={20} />} label="Deep Search" active={pathname === '/search'} />
+        <nav className="mt-8 px-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">
+          Tools
+        </nav>
+        <NavItem href="/refactor" icon={<Box size={20} />} label="Refactor" active={pathname === '/refactor'} />
+        <NavItem href="/generate" icon={<Sparkles size={20} />} label="Generate" active={pathname === '/generate'} />
       </nav>
 
       {/* Footer */}
-      <div className="pt-4 border-t border-white/10">
-        <div className="px-4 py-2 text-xs text-slate-500">
-          Powered by Gemini AI
+      <div className="p-6 border-t border-white/5">
+        <div className="flex items-center gap-3 p-3 rounded-lg bg-white/5 border border-white/5">
+          <div className="w-8 h-8 rounded-full bg-gradient-to-r from-slate-700 to-slate-600 flex items-center justify-center text-xs">
+            JD
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium text-white truncate">Connected</p>
+            <p className="text-xs text-emerald-400">● Online</p>
+          </div>
         </div>
       </div>
     </motion.aside>
   );
 }
 
-function NavItem({ href, icon, label, active }: { href: string; icon: string; label: string; active: boolean }) {
+function NavItem({ href, icon, label, active }: { href: string; icon: React.ReactNode; label: string; active: boolean }) {
   return (
     <Link href={href}>
-      <motion.div
-        whileHover={{ scale: 1.02, x: 4 }}
-        whileTap={{ scale: 0.98 }}
-        className={`flex items-center gap-3 px-4 py-3 rounded-xl transition-all cursor-pointer ${active
-            ? 'bg-gradient-to-r from-sky-500/20 to-violet-500/20 border border-sky-500/30'
-            : 'hover:bg-white/5'
-          }`}
-      >
-        <span className="text-lg">{icon}</span>
-        <span className={`font-medium ${active ? 'text-sky-400' : 'text-slate-300'}`}>
-          {label}
-        </span>
-      </motion.div>
+      <div className="relative group">
+        {active && (
+          <motion.div
+            layoutId="activeNav"
+            className="absolute inset-0 bg-gradient-to-r from-cyan-500/10 to-violet-500/10 rounded-xl border border-cyan-500/20"
+            transition={{ type: "spring", stiffness: 300, damping: 30 }}
+          />
+        )}
+        <div className={`
+          relative flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300
+          ${active ? 'text-cyan-400' : 'text-slate-400 group-hover:text-slate-200 group-hover:bg-white/5'}
+        `}>
+          {icon}
+          <span className="font-medium">{label}</span>
+          {active && (
+            <div className="ml-auto w-1.5 h-1.5 rounded-full bg-cyan-400 shadow-[0_0_8px_rgba(34,211,238,0.8)]" />
+          )}
+        </div>
+      </div>
     </Link>
   );
 }

pages/1_⚡_Code_Studio.py

@@ -46,7 +46,12 @@ with col_panel:
         )
         
         st.divider()
-        if st.button("🏠 Home", use_container_width=True):
+        if st.button("🏠 Index New Codebase", use_container_width=True):
+            st.session_state.processed_files = False
+            st.session_state.chat_engine = None
+            st.session_state.indexed_files = None
+            st.session_state.workspace_root = None
+            st.session_state.selected_file = None
             st.switch_page("app.py")
 
     with tab_search:

update_imports.py

@@ -0,0 +1,84 @@
+import os
+import re
+
+# Mapping of old imports to new imports
+# Format: "old_module": "new_module"
+# We'll use regex to match "from old_module" and "import old_module"
+replacements = {
+    # Services
+    "code_chatbot.ast_analysis": "backend.app.services.ast_analysis",
+    "code_chatbot.rag": "backend.app.services.rag_engine",
+    "code_chatbot.indexer": "backend.app.services.indexer",
+    "code_chatbot.agent_workflow": "backend.app.services.agent_workflow",
+    "code_chatbot.llm_retriever": "backend.app.services.llm_retriever",
+    "code_chatbot.graph_rag": "backend.app.services.graph_rag",
+    "code_chatbot.db_connection": "backend.app.services.db_connection",
+    "code_chatbot.mcp_server": "backend.app.services.mcp_server",
+    "code_chatbot.mcp_client": "backend.app.services.mcp_client",
+    
+    # Utils
+    "code_chatbot.chunker": "backend.app.utils.chunking",
+    "code_chatbot.tools": "backend.app.utils.tools",
+    "code_chatbot.universal_ingestor": "backend.app.utils.universal_ingestor",
+    "code_chatbot.rate_limiter": "backend.app.utils.rate_limiter",
+    "code_chatbot.prompts": "backend.app.utils.prompts",
+    "code_chatbot.path_obfuscator": "backend.app.utils.path_obfuscator",
+    "code_chatbot.merkle_tree": "backend.app.utils.merkle_tree",
+    "code_chatbot.indexing_progress": "backend.app.utils.indexing_progress",
+    "code_chatbot.reranker": "backend.app.utils.reranker",
+    "code_chatbot.retriever_wrapper": "backend.app.utils.retriever_wrapper",
+    
+    # Models
+    "code_chatbot.code_symbols": "backend.app.models.code_symbols",
+    
+    # Config
+    "code_chatbot.config": "backend.app.config",
+    
+    # Routers - careful with regex here
+    "api.routes.chat": "backend.app.routers.chat",
+    "api.routes.health": "backend.app.routers.health",
+    "api.routes.index": "backend.app.routers.index",
+    
+    # Catch-all for other api/code_chatbot imports if any remain
+    # "code_chatbot": "backend.app", # Too risky? Maybe specific modules first
+    
+    # Internal Relative Imports Fix (harder, but let's try absolute first)
+}
+
+# Directories to scan
+scan_dirs = ["backend/app", "tests"] 
+if os.path.exists("app.py"):
+    scan_dirs.append("app.py")
+
+for root_path in scan_dirs:
+    if os.path.isfile(root_path):
+        files = [root_path]
+        root = os.path.dirname(root_path)
+    else:
+        files = []
+        for r, d, f in os.walk(root_path):
+            for file in f:
+                if file.endswith(".py"):
+                    files.append(os.path.join(r, file))
+
+    for file_path in files:
+        with open(file_path, "r") as f:
+            content = f.read()
+        
+        original_content = content
+        
+        for old, new in replacements.items():
+            # Replace "from X import Y"
+            content = re.sub(f"from {old}([ .])", f"from {new}\\1", content)
+            content = re.sub(f"from {old}$", f"from {new}", content) # End of line
+            
+            # Replace "import X"
+            content = re.sub(f"import {old}([ .])", f"import {new}\\1", content)
+            content = re.sub(f"import {old}$", f"import {new}", content)
+            
+        if content != original_content:
+            print(f"Updating imports in {file_path}")
+            with open(file_path, "w") as f:
+                f.write(content)
+
+print("Import update script completed.")