feat: Restructure into multi-page app with shared styling

- Created pages/ directory for separate views:
- 1_📁_Explorer.py: Full-width file tree and code viewer
- 2_💬_Chat.py: Dedicated chat page with history and sources
- 3_🔍_Search.py: Regex search across codebase
- 4_✨_Generate.py: Code generation tools
- Simplified app.py to valid navigation hub
- Created components/style.py for shared CSS (dark mode, layout)
- Fixed scrolling issues with independent panel scrolling

app.py

@@ -549,135 +549,50 @@ if not st.session_state.processed_files:
     4. **Explore** your code with the file explorer and chat interface
     """)
 else:
-    # 3-Panel Layout: File Tree | Code Viewer | Chat/Tools
-    from components.file_explorer import render_file_tree, get_indexed_files_from_session
-    from components.code_viewer import render_code_viewer_simple
-    from components.multi_mode import (
-        render_mode_selector,
-        render_chat_mode,
-        render_search_mode,
-        render_refactor_mode,
-        render_generate_mode
-    )
-    
-    # Initialize session state for file explorer
-    if "selected_file" not in st.session_state:
-        st.session_state.selected_file = None
-    if "indexed_files" not in st.session_state:
-        st.session_state.indexed_files = []
-    
-    # Create 3 columns: File Tree (15%) | Code Viewer (45%) | Chat/Tools (40%)
-    col_tree, col_viewer, col_chat = st.columns([0.15, 0.45, 0.40])
-    
-    # --- LEFT PANEL: File Tree ---
-    with col_tree:
-        render_file_tree(
-            st.session_state.get("indexed_files", []),
-            st.session_state.get("workspace_root", "")
-        )
+    # Home page - show navigation to other pages
+    st.markdown("""
+    ### 🎉 Codebase Ready!
+    
+    Your codebase has been indexed and is ready to explore. Use the pages below:
+    """)
     
-    # --- CENTER PANEL: Code Viewer ---
-    with col_viewer:
-        render_code_viewer_simple(st.session_state.get("selected_file"))
+    # Navigation cards
+    col1, col2 = st.columns(2)
     
-    # --- RIGHT PANEL: Chat/Tools ---
-    with col_chat:
-        # Mode selector at the top
-        selected_mode = render_mode_selector()
+    with col1:
+        st.markdown("""
+        <div style="background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(56, 189, 248, 0.2); border-radius: 12px; padding: 20px; margin: 10px 0;">
+            <h3>📁 Explorer</h3>
+            <p style="color: #94a3b8;">Browse files and view code with syntax highlighting</p>
+        </div>
+        """, unsafe_allow_html=True)
         
-        st.divider()
+        st.markdown("""
+        <div style="background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 12px; padding: 20px; margin: 10px 0;">
+            <h3>🔍 Search</h3>
+            <p style="color: #94a3b8;">Search across all indexed files with regex support</p>
+        </div>
+        """, unsafe_allow_html=True)
+    
+    with col2:
+        st.markdown("""
+        <div style="background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(34, 197, 94, 0.2); border-radius: 12px; padding: 20px; margin: 10px 0;">
+            <h3>💬 Chat</h3>
+            <p style="color: #94a3b8;">Ask questions about your code and get AI-powered answers</p>
+        </div>
+        """, unsafe_allow_html=True)
         
-        # Render appropriate interface based on mode
-        if selected_mode == "search":
-            render_search_mode()
-        elif selected_mode == "refactor":
-            render_refactor_mode()
-        elif selected_mode == "generate":
-            render_generate_mode(st.session_state.chat_engine)
-        else:  # chat mode
-            # Show chat mode UI
-            render_chat_mode(st.session_state.chat_engine)
-            st.caption(f"Using {provider}, Enhanced with AST")
-            
-            # Display History
-            for msg in st.session_state.messages:
-                with st.chat_message(msg["role"]):
-                    # Render Sources if available
-                    if "sources" in msg and msg["sources"]:
-                        unique_sources = {}
-                        for s in msg["sources"]:
-                            if isinstance(s, dict):
-                                fp = s.get('file_path', 'Unknown')
-                            else:
-                                fp = str(s)
-                            if fp not in unique_sources:
-                                unique_sources[fp] = s
-
-                        chips_html = '<div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;">'
-                        for fp in unique_sources:
-                            basename = os.path.basename(fp) if "/" in fp else fp
-                            chips_html += f"""
-                            <div style="background: rgba(30, 41, 59, 0.4); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 6px; padding: 4px 10px; font-size: 0.85em; color: #cbd5e1;">
-                                📄 {basename}
-                            </div>
-                            """
-                        chips_html += '</div>'
-                        st.markdown(chips_html, unsafe_allow_html=True)
-                    
-                    st.markdown(msg["content"], unsafe_allow_html=True)
-
-            # Handle pending prompt from suggestion buttons
-            prompt = None
-            if st.session_state.get("pending_prompt"):
-                prompt = st.session_state.pending_prompt
-                st.session_state.pending_prompt = None
-
-            # Input
-            if not prompt:
-                prompt = st.chat_input("Ask about your code...")
-
-            if prompt:
-                st.session_state.messages.append({"role": "user", "content": prompt})
-                with st.chat_message("user"):
-                    st.markdown(prompt)
-
-                with st.chat_message("assistant"):
-                    if st.session_state.chat_engine:
-                        with st.spinner("Analyzing..."):
-                            answer_payload = st.session_state.chat_engine.chat(prompt)
-                            
-                            if isinstance(answer_payload, tuple):
-                                answer, sources = answer_payload
-                            else:
-                                answer = answer_payload
-                                sources = []
-                            
-                            if sources:
-                                unique_sources = {}
-                                for s in sources:
-                                    fp = s.get('file_path', 'Unknown')
-                                    if fp not in unique_sources:
-                                        unique_sources[fp] = s
-                                
-                                chips_html = '<div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;">'
-                                for fp in unique_sources:
-                                    basename = os.path.basename(fp)
-                                    chips_html += f"""
-                                    <div style="background: rgba(30, 41, 59, 0.4); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 6px; padding: 4px 10px; font-size: 0.85em; color: #cbd5e1;">
-                                        📄 {basename}
-                                    </div>
-                                    """
-                                chips_html += '</div>'
-                                st.markdown(chips_html, unsafe_allow_html=True)
-
-                            st.markdown(answer)
-                            
-                            msg_data = {
-                                "role": "assistant",
-                                "content": answer,
-                                "sources": sources if sources else []
-                            }
-                            st.session_state.messages.append(msg_data)
-                    else:
-                        st.error("Chat engine not initialized. Please re-index.")
-
+        st.markdown("""
+        <div style="background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(251, 191, 36, 0.2); border-radius: 12px; padding: 20px; margin: 10px 0;">
+            <h3>✨ Generate</h3>
+            <p style="color: #94a3b8;">Generate new code and modify existing files</p>
+        </div>
+        """, unsafe_allow_html=True)
+    
+    st.info("👈 Use the sidebar to navigate between pages")
+    
+    # Quick stats
+    indexed_files = st.session_state.get("indexed_files", [])
+    if indexed_files:
+        st.markdown("---")
+        st.markdown(f"**📊 Stats:** {len(indexed_files)} files indexed")

components/style.py

@@ -0,0 +1,106 @@
+import streamlit as st
+import base64
+import os
+
+def apply_custom_css():
+    """Apply shared CSS styles to the current page."""
+    logo_b64 = ""
+    if os.path.exists("assets/logo.png"):
+        try:
+            with open("assets/logo.png", "rb") as f:
+                logo_b64 = base64.b64encode(f.read()).decode()
+        except:
+            pass
+
+    st.markdown(f"""
+    <style>
+        :root {{
+            --glass-bg: rgba(30, 41, 59, 0.7);
+            --glass-border: rgba(255, 255, 255, 0.1);
+        }}
+        
+        /* Global Text */
+        p, div, span, label, h1, h2, h3, h4, h5, h6, .stMarkdown {{
+            color: #E2E8F0 !important;
+        }}
+        
+        /* Sidebar */
+        section[data-testid="stSidebar"] {{
+            background: rgba(11, 12, 16, 0.95);
+            border-right: 1px solid var(--glass-border);
+        }}
+        
+        /* Buttons */
+        .stButton button {{
+            background: linear-gradient(135deg, #0EA5E9 0%, #2563EB 100%);
+            color: white !important;
+            border: none;
+            border-radius: 8px;
+            font-weight: 600;
+        }}
+        .stButton button:hover {{
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
+        }}
+        
+        /* Chat Messages */
+        .stChatMessage {{
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            border-radius: 12px;
+        }}
+        .stChatMessage[data-testid="stChatMessage"]:nth-child(even) {{
+            border-left: 3px solid #38BDF8;
+            background: linear-gradient(90deg, rgba(56, 189, 248, 0.05) 0%, rgba(15, 23, 42, 0.6) 100%);
+        }}
+        
+        /* IDE Layout & Scrolling */
+        .main .block-container {{
+            max-width: 100% !important;
+            padding-left: 2rem;
+            padding-right: 2rem;
+            max-height: calc(100vh - 80px);
+            overflow: hidden;
+        }}
+        
+        div[data-testid="column"] {{
+            max-height: calc(100vh - 120px);
+            overflow-y: auto;
+            overflow-x: hidden;
+            scrollbar-width: thin;
+        }}
+        
+        .stCode {{
+            max-height: 70vh !important;
+            overflow-y: auto !important;
+        }}
+        
+        /* Scrollbar styling */
+        ::-webkit-scrollbar {{
+            width: 6px;
+            height: 6px;
+        }}
+        ::-webkit-scrollbar-track {{
+            background: transparent;
+        }}
+        ::-webkit-scrollbar-thumb {{
+            background: #475569;
+            border-radius: 3px;
+        }}
+        
+        /* Source Chips */
+        .source-chip {{
+            background: rgba(30, 41, 59, 0.4);
+            border: 1px solid rgba(148, 163, 184, 0.2);
+            border-radius: 6px;
+            padding: 4px 10px;
+            font-size: 0.85em;
+            color: #cbd5e1;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            margin-right: 8px;
+            margin-bottom: 8px;
+        }}
+    </style>
+    """, unsafe_allow_html=True)

pages/1_📁_Explorer.py

@@ -0,0 +1,42 @@
+"""
+📁 Explorer Page - Browse files and view code
+"""
+import streamlit as st
+import os
+from pathlib import Path
+
+from components.style import apply_custom_css
+
+st.set_page_config(page_title="Explorer | Code Crawler", page_icon="📁", layout="wide")
+apply_custom_css()
+
+# Check if codebase is indexed
+if not st.session_state.get("processed_files"):
+    st.warning("⚠️ No codebase indexed yet. Go to **Home** to upload and index a codebase.")
+    st.stop()
+
+# Get indexed files
+indexed_files = st.session_state.get("indexed_files", [])
+workspace_root = st.session_state.get("workspace_root", "")
+
+st.title("📁 Code Explorer")
+st.caption(f"{len(indexed_files)} files indexed")
+
+# Two-column layout: File tree (25%) | Code viewer (75%)
+# CSS is now handled by apply_custom_css
+
+
+col1, col2 = st.columns([1, 3])
+
+with col1:
+    from components.file_explorer import render_file_tree
+    
+    render_file_tree(
+        st.session_state.get("indexed_files", []),
+        st.session_state.get("workspace_root", "")
+    )
+
+with col2:
+    from components.code_viewer import render_code_viewer_simple
+    
+    render_code_viewer_simple(st.session_state.get("selected_file"))

pages/2_💬_Chat.py

@@ -0,0 +1,131 @@
+"""
+💬 Chat Page - Chat with your codebase
+"""
+import streamlit as st
+import os
+from components.style import apply_custom_css
+
+st.set_page_config(page_title="Chat | Code Crawler", page_icon="💬", layout="wide")
+apply_custom_css()
+
+# Check if codebase is indexed
+if not st.session_state.get("processed_files"):
+    st.warning("⚠️ No codebase indexed yet. Go to **Home** to upload and index a codebase.")
+    st.stop()
+
+chat_engine = st.session_state.get("chat_engine")
+if not chat_engine:
+    st.error("Chat engine not initialized. Please re-index your codebase.")
+    st.stop()
+
+st.title("💬 Chat with Your Codebase")
+
+# Initialize messages
+if "messages" not in st.session_state:
+    st.session_state.messages = []
+
+# Suggestion buttons (only if no messages)
+if not st.session_state.messages:
+    st.markdown("### 💡 Try asking:")
+    
+    col1, col2 = st.columns(2)
+    with col1:
+        if st.button("🔍 Explain project structure", use_container_width=True):
+            st.session_state.pending_prompt = "Explain the project structure and main components"
+            st.rerun()
+        if st.button("⚡ Generate utility function", use_container_width=True):
+            st.session_state.pending_prompt = "Generate a new utility function for this project"
+            st.rerun()
+    with col2:
+        if st.button("📝 List main functions", use_container_width=True):
+            st.session_state.pending_prompt = "List all the main functions and their purpose"
+            st.rerun()
+        if st.button("🔧 Suggest improvements", use_container_width=True):
+            st.session_state.pending_prompt = "What improvements would you suggest for this code?"
+            st.rerun()
+
+# Display chat history
+for message in st.session_state.messages:
+    with st.chat_message(message["role"]):
+        # Render Sources if available
+        if "sources" in message and message["sources"]:
+            unique_sources = {}
+            for s in message["sources"]:
+                if isinstance(s, dict):
+                    fp = s.get('file_path', 'Unknown')
+                else:
+                    fp = str(s)
+                if fp not in unique_sources:
+                    unique_sources[fp] = s
+
+            chips_html = '<div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;">'
+            for fp in unique_sources:
+                basename = os.path.basename(fp) if "/" in fp else fp
+                chips_html += f"""
+                <div class="source-chip">
+                    📄 {basename}
+                </div>
+                """
+            chips_html += '</div>'
+            st.markdown(chips_html, unsafe_allow_html=True)
+        
+        st.markdown(message["content"])
+
+# Handle pending prompt from suggestion buttons
+prompt = st.session_state.pop("pending_prompt", None)
+
+# Chat input
+if user_input := st.chat_input("Ask about your code..."):
+    prompt = user_input
+
+if prompt:
+    # Add user message
+    st.session_state.messages.append({"role": "user", "content": prompt})
+    with st.chat_message("user"):
+        st.markdown(prompt)
+    
+    # Generate response
+    with st.chat_message("assistant"):
+        with st.spinner("Thinking..."):
+            try:
+                answer_payload = chat_engine.chat(prompt)
+                
+                # Handle response format (string or tuple with sources)
+                if isinstance(answer_payload, tuple):
+                    response, sources = answer_payload
+                else:
+                    response = answer_payload
+                    sources = []
+                
+                # Render sources
+                if sources:
+                    unique_sources = {}
+                    for s in sources:
+                        fp = s.get('file_path', 'Unknown')
+                        if fp not in unique_sources:
+                            unique_sources[fp] = s
+                    
+                    chips_html = '<div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;">'
+                    for fp in unique_sources:
+                        basename = os.path.basename(fp) if "/" in fp else fp
+                        chips_html += f"""
+                        <div class="source-chip">
+                            📄 {basename}
+                        </div>
+                        """
+                    chips_html += '</div>'
+                    st.markdown(chips_html, unsafe_allow_html=True)
+                
+                st.markdown(response)
+                
+                # Save to history with sources
+                st.session_state.messages.append({
+                    "role": "assistant", 
+                    "content": response,
+                    "sources": sources
+                })
+                
+            except Exception as e:
+                error_msg = f"Error: {str(e)}"
+                st.error(error_msg)
+                st.session_state.messages.append({"role": "assistant", "content": error_msg})

pages/3_🔍_Search.py

@@ -0,0 +1,106 @@
+"""
+🔍 Search Page - Search across your codebase
+"""
+import streamlit as st
+import os
+import re
+import re
+from pathlib import Path
+from components.style import apply_custom_css
+
+st.set_page_config(page_title="Search | Code Crawler", page_icon="🔍", layout="wide")
+apply_custom_css()
+
+# Check if codebase is indexed
+if not st.session_state.get("processed_files"):
+    st.warning("⚠️ No codebase indexed yet. Go to **Home** to upload and index a codebase.")
+    st.stop()
+
+indexed_files = st.session_state.get("indexed_files", [])
+
+st.title("🔍 Search Codebase")
+st.caption(f"Search across {len(indexed_files)} indexed files")
+
+# Search inputs
+col1, col2 = st.columns([3, 1])
+with col1:
+    query = st.text_input("Search pattern", placeholder="Enter search term or regex...")
+with col2:
+    use_regex = st.checkbox("Use regex", value=False)
+
+# File type filter
+file_types = st.multiselect(
+    "Filter by file type",
+    options=[".py", ".js", ".ts", ".jsx", ".tsx", ".html", ".css", ".json", ".md"],
+    default=[]
+)
+
+if query and st.button("🔍 Search", type="primary"):
+    results = []
+    
+    try:
+        pattern = re.compile(query, re.IGNORECASE) if use_regex else None
+    except re.error as e:
+        st.error(f"Invalid regex: {e}")
+        st.stop()
+    
+    with st.spinner("Searching..."):
+        for file_path in indexed_files:
+            # Filter by file type
+            if file_types:
+                ext = Path(file_path).suffix.lower()
+                if ext not in file_types:
+                    continue
+            
+            try:
+                with open(file_path, "r", errors="ignore") as f:
+                    lines = f.readlines()
+                
+                for i, line in enumerate(lines, 1):
+                    if use_regex:
+                        if pattern.search(line):
+                            results.append({
+                                "file": file_path,
+                                "line_num": i,
+                                "content": line.strip(),
+                                "match": pattern.search(line).group()
+                            })
+                    else:
+                        if query.lower() in line.lower():
+                            results.append({
+                                "file": file_path,
+                                "line_num": i,
+                                "content": line.strip(),
+                                "match": query
+                            })
+            except Exception:
+                continue
+    
+    # Display results
+    st.markdown(f"### Found {len(results)} matches")
+    
+    if results:
+        # Group by file
+        by_file = {}
+        for r in results:
+            f = r["file"]
+            if f not in by_file:
+                by_file[f] = []
+            by_file[f].append(r)
+        
+        for file_path, matches in by_file.items():
+            filename = os.path.basename(file_path)
+            with st.expander(f"📄 **{filename}** ({len(matches)} matches)", expanded=True):
+                st.caption(file_path)
+                for m in matches[:10]:  # Limit to 10 per file
+                    st.markdown(f"**Line {m['line_num']}:** `{m['content'][:100]}...`" if len(m['content']) > 100 else f"**Line {m['line_num']}:** `{m['content']}`")
+                
+                if len(matches) > 10:
+                    st.caption(f"... and {len(matches) - 10} more matches")
+                
+                # Button to view file
+                if st.button(f"View {filename}", key=f"view_{file_path}"):
+                    st.session_state.selected_file = file_path
+                    st.switch_page("pages/1_📁_Explorer.py")
+    else:
+        st.info("No matches found. Try a different search term.")

pages/4_✨_Generate.py

@@ -0,0 +1,134 @@
+"""
+✨ Generate Page - Generate and modify code
+"""
+import streamlit as st
+from components.style import apply_custom_css
+
+st.set_page_config(page_title="Generate | Code Crawler", page_icon="✨", layout="wide")
+apply_custom_css()
+
+# Check if codebase is indexed
+if not st.session_state.get("processed_files"):
+    st.warning("⚠️ No codebase indexed yet. Go to **Home** to upload and index a codebase.")
+    st.stop()
+
+chat_engine = st.session_state.get("chat_engine")
+if not chat_engine:
+    st.error("Chat engine not initialized. Please re-index your codebase.")
+    st.stop()
+
+st.title("✨ Code Generation")
+st.caption("Generate new code based on your codebase patterns")
+
+# Generation mode
+mode = st.radio(
+    "What would you like to do?",
+    ["Generate new code", "Modify existing code", "Create a new file"],
+    horizontal=True
+)
+
+if mode == "Generate new code":
+    st.markdown("### Generate New Code")
+    
+    description = st.text_area(
+        "Describe what you want to generate:",
+        placeholder="e.g., Create a utility function to validate email addresses",
+        height=100
+    )
+    
+    context = st.text_input(
+        "Additional context (optional):",
+        placeholder="e.g., Should follow the style used in utils.py"
+    )
+    
+    if st.button("✨ Generate", type="primary", disabled=not description):
+        with st.spinner("Generating code..."):
+            prompt = f"""Generate new code based on this request:
+
+**Request:** {description}
+
+**Additional Context:** {context if context else "None"}
+
+Please generate the code following the patterns and style used in this codebase.
+Include comments explaining the code."""
+            
+            try:
+                response = chat_engine.chat(prompt)
+                st.markdown("### Generated Code")
+                st.markdown(response)
+                
+                # Copy button
+                st.download_button(
+                    "📋 Download as file",
+                    response,
+                    file_name="generated_code.txt",
+                    mime="text/plain"
+                )
+            except Exception as e:
+                st.error(f"Error: {str(e)}")
+
+elif mode == "Modify existing code":
+    st.markdown("### Modify Existing Code")
+    
+    # File selector
+    indexed_files = st.session_state.get("indexed_files", [])
+    selected_file = st.selectbox(
+        "Select file to modify:",
+        options=indexed_files,
+        format_func=lambda x: x.split("/")[-1] if "/" in x else x
+    )
+    
+    modification = st.text_area(
+        "Describe the modification:",
+        placeholder="e.g., Add error handling to the main function",
+        height=100
+    )
+    
+    if st.button("🔧 Modify", type="primary", disabled=not modification):
+        with st.spinner("Analyzing and modifying..."):
+            prompt = f"""Modify the code in the file '{selected_file}' based on this request:
+
+**Modification Request:** {modification}
+
+Show the modified code with explanations of what changed."""
+            
+            try:
+                response = chat_engine.chat(prompt)
+                st.markdown("### Modified Code")
+                st.markdown(response)
+            except Exception as e:
+                st.error(f"Error: {str(e)}")
+
+else:  # Create a new file
+    st.markdown("### Create New File")
+    
+    file_name = st.text_input("File name:", placeholder="e.g., utils/helpers.py")
+    
+    description = st.text_area(
+        "Describe the file's purpose:",
+        placeholder="e.g., Utility functions for data validation and formatting",
+        height=100
+    )
+    
+    if st.button("📄 Create", type="primary", disabled=not (file_name and description)):
+        with st.spinner("Creating file..."):
+            prompt = f"""Create a new file named '{file_name}' with the following purpose:
+
+**Purpose:** {description}
+
+Generate complete, production-ready code following the patterns in this codebase.
+Include proper imports, docstrings, and error handling."""
+            
+            try:
+                response = chat_engine.chat(prompt)
+                st.markdown(f"### {file_name}")
+                st.markdown(response)
+                
+                st.download_button(
+                    "📋 Download file",
+                    response,
+                    file_name=file_name.split("/")[-1] if "/" in file_name else file_name,
+                    mime="text/plain"
+                )
+            except Exception as e:
+                st.error(f"Error: {str(e)}")