feat: Implement 3-panel file explorer UI

- New components: file_explorer.py (file tree), code_viewer.py (syntax highlighting)
- 3-column layout: File Tree (15%) | Code Viewer (45%) | Chat/Tools (40%)
- Click files in tree to view in center panel
- Folder expand/collapse support
- Updated indexing to return file list for tree display

app.py

@@ -424,7 +424,7 @@ with st.sidebar:
                 # Use the new progress-tracked indexer
                 from code_chatbot.indexing_progress import index_with_progress
                 
-                chat_engine, success = index_with_progress(
+                chat_engine, success, repo_files, workspace_root = index_with_progress(
                     source_input=source_input,
                     source_type=source_type,
                     provider=provider,
@@ -439,6 +439,8 @@ with st.sidebar:
                 if success:
                     st.session_state.chat_engine = chat_engine
                     st.session_state.processed_files = True
+                    st.session_state.indexed_files = repo_files  # For file tree
+                    st.session_state.workspace_root = workspace_root  # For relative paths
                     time.sleep(0.5)  # Brief pause to show success
                     st.rerun()
 
@@ -486,11 +488,26 @@ with st.sidebar:
             st.session_state.chat_engine = None
             st.rerun()
 
-# Main Chat Interface
+# ============================================================================
+# MAIN 3-PANEL LAYOUT
+# ============================================================================
+
 st.title("🕷️ Code Crawler")
 
-# Multi-Mode Interface
-if st.session_state.processed_files:
+if not st.session_state.processed_files:
+    # Show onboarding message when no files are processed
+    st.info("👈 Please upload and index a codebase (ZIP, GitHub, or Web URL) to start.")
+    st.markdown("""
+    ### 🚀 Getting Started
+    1. **Configure** your API key in the sidebar
+    2. **Upload** a ZIP file, enter a GitHub URL, or Web documentation URL
+    3. **Index** your codebase with one click
+    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,
@@ -499,125 +516,124 @@ if st.session_state.processed_files:
         render_generate_mode
     )
     
-    # Mode selector at the top
-    selected_mode = render_mode_selector()
+    # 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 = []
     
-    st.divider()
+    # 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", "")
+        )
+    
+    # --- CENTER PANEL: Code Viewer ---
+    with col_viewer:
+        render_code_viewer_simple(st.session_state.get("selected_file"))
     
-    # 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)
+    # --- RIGHT PANEL: Chat/Tools ---
+    with col_chat:
+        # Mode selector at the top
+        selected_mode = render_mode_selector()
         
-        # Continue with standard chat interface below
-        st.caption(f"Ask questions about your uploaded project. (Using {provider}, Enhanced with AST)")
-else:
-    st.caption(f"Configure and index your codebase to get started. (Using {provider}, Enhanced with AST)")
-
-if not st.session_state.processed_files:
-    st.info("👈 Please upload and index a ZIP file to start.")
-else:
-    # 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"]:
-                    # Handle both dictionary and string formats for 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 class="source-container" 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" 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; display: flex; align-items: center; gap: 6px;">
-                        <span class="source-icon">📄</span> {basename}
-                    </div>
-                    """
-                chips_html += '</div>'
-                st.markdown(chips_html, unsafe_allow_html=True)
+        st.divider()
+        
+        # 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")
             
-            # Use unsafe_allow_html in case any formatted content exists
-            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  # Clear it
-    
-    # Input - also check for pending prompt
-    if not prompt:
-        prompt = st.chat_input("How does the authentication work?")
-    
-    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 (Graph+Vector)..."):
-                    answer_payload = st.session_state.chat_engine.chat(prompt)
-                    
-                    # Robust unpacking
-                    if isinstance(answer_payload, tuple):
-                        answer, sources = answer_payload
-                    else:
-                        answer = answer_payload
-                        sources = []
-                        
-                    if sources:
-                        # Deduplicate sources based on file_path
+            # 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 sources:
-                            fp = s.get('file_path', 'Unknown')
+                        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
-                        
-                        # Render Source Chips
-                        chips_html = '<div class="source-container">'
+
+                        chips_html = '<div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;">'
                         for fp in unique_sources:
-                            # Truncate path for display
-                            basename = os.path.basename(fp) 
+                            basename = os.path.basename(fp) if "/" in fp else fp
                             chips_html += f"""
-                            <div class="source-chip">
-                                <span class="source-icon">📄</span> {basename}
+                            <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)
                     
-                    # Append full formatted content to history so it persists
-                    # We'll save the raw answer for history but re-render chips on load? 
-                    # Actually, for simplicity, let's just save the answer text. Streamlit re-runs the whole script, 
-                    # but we are storing manual history. Issues with reconstructing chips from history?
-                    # The current history loop just does st.markdown(msg["content"]).
-                    # We should probably append the chips HTML to the content if we want it to persist.
-                    
-                    # Store structured message in history
-                    # We store the raw answer and the sources list separately
-                    # This avoids baking HTML into the content string which causes rendering issues
-                    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(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.")
+

code_chatbot/indexing_progress.py

@@ -250,11 +250,13 @@ def index_with_progress(
         progress_bar.empty()
         status_text.empty()
         
-        return chat_engine, True
+        # Return chat engine and file info for file tree
+        return chat_engine, True, repo_files, local_path
         
     except Exception as e:
         st.error(f"❌ Error during indexing: {e}")
         logger.error(f"Indexing failed: {e}", exc_info=True)
         progress_bar.empty()
         status_text.empty()
-        return None, False
+        return None, False, [], ""
+

components/code_viewer.py

@@ -0,0 +1,176 @@
+"""
+Code Viewer Component - Displays file content with syntax highlighting.
+"""
+import streamlit as st
+from pathlib import Path
+from pygments import highlight
+from pygments.lexers import get_lexer_for_filename, TextLexer
+from pygments.formatters import HtmlFormatter
+from typing import Optional
+
+
+def get_language_from_extension(filename: str) -> str:
+    """Get language name from file extension for display."""
+    ext = Path(filename).suffix.lower()
+    
+    languages = {
+        ".py": "Python",
+        ".js": "JavaScript",
+        ".ts": "TypeScript",
+        ".jsx": "React JSX",
+        ".tsx": "React TSX",
+        ".html": "HTML",
+        ".css": "CSS",
+        ".json": "JSON",
+        ".md": "Markdown",
+        ".yaml": "YAML",
+        ".yml": "YAML",
+        ".toml": "TOML",
+        ".sql": "SQL",
+        ".sh": "Shell",
+        ".bash": "Bash",
+        ".txt": "Plain Text",
+    }
+    
+    return languages.get(ext, "Code")
+
+
+def read_file_content(file_path: str) -> Optional[str]:
+    """Read and return file content."""
+    try:
+        with open(file_path, 'r', encoding='utf-8', errors='ignore') as f:
+            return f.read()
+    except Exception as e:
+        return f"Error reading file: {e}"
+
+
+def render_code_with_syntax_highlighting(content: str, filename: str):
+    """Render code with Pygments syntax highlighting."""
+    try:
+        lexer = get_lexer_for_filename(filename)
+    except:
+        lexer = TextLexer()
+    
+    # Custom CSS for dark theme
+    formatter = HtmlFormatter(
+        style='monokai',
+        linenos=True,
+        lineanchors='line',
+        cssclass='source',
+        wrapcode=True
+    )
+    
+    highlighted = highlight(content, lexer, formatter)
+    
+    # Custom CSS
+    css = """
+    <style>
+    .source {
+        background-color: #1E1E1E !important;
+        padding: 10px;
+        border-radius: 8px;
+        overflow-x: auto;
+        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+        font-size: 13px;
+        line-height: 1.5;
+    }
+    .source pre {
+        margin: 0;
+        background-color: transparent !important;
+    }
+    .source .linenos {
+        color: #6e7681;
+        padding-right: 15px;
+        border-right: 1px solid #3d3d3d;
+        margin-right: 15px;
+        user-select: none;
+    }
+    .source .code {
+        color: #e6e6e6;
+    }
+    </style>
+    """
+    
+    st.markdown(css + highlighted, unsafe_allow_html=True)
+
+
+def render_code_viewer(file_path: Optional[str] = None):
+    """
+    Render the code viewer panel.
+    
+    Args:
+        file_path: Path to the file to display
+    """
+    if not file_path:
+        # Show placeholder when no file is selected
+        st.markdown("### 📝 Code Viewer")
+        st.info("👈 Select a file from the tree to view its contents")
+        return
+    
+    # File header
+    filename = Path(file_path).name
+    language = get_language_from_extension(filename)
+    
+    st.markdown(f"### 📝 {filename}")
+    st.caption(f"📂 {file_path} • {language}")
+    
+    # Read and display content
+    content = read_file_content(file_path)
+    
+    if content:
+        # Add line count
+        line_count = content.count('\n') + 1
+        st.caption(f"{line_count} lines")
+        
+        # Render with syntax highlighting
+        render_code_with_syntax_highlighting(content, filename)
+    else:
+        st.error("Could not read file contents")
+
+
+def render_code_viewer_simple(file_path: Optional[str] = None):
+    """
+    Simpler code viewer using Streamlit's built-in code component.
+    More reliable than custom HTML rendering.
+    """
+    if not file_path:
+        st.markdown("### 📝 Code Viewer")
+        st.info("👈 Select a file from the tree to view its contents")
+        return
+    
+    filename = Path(file_path).name
+    language = get_language_from_extension(filename)
+    ext = Path(filename).suffix.lower().lstrip('.')
+    
+    st.markdown(f"### 📝 {filename}")
+    st.caption(f"📂 `{file_path}` • {language}")
+    
+    content = read_file_content(file_path)
+    
+    if content:
+        line_count = content.count('\n') + 1
+        st.caption(f"{line_count} lines")
+        
+        # Use Streamlit's native code component
+        # Map extensions to language names for st.code
+        lang_map = {
+            "py": "python",
+            "js": "javascript",
+            "ts": "typescript",
+            "jsx": "javascript",
+            "tsx": "typescript",
+            "json": "json",
+            "md": "markdown",
+            "yaml": "yaml",
+            "yml": "yaml",
+            "sh": "bash",
+            "bash": "bash",
+            "sql": "sql",
+            "html": "html",
+            "css": "css",
+        }
+        
+        lang = lang_map.get(ext, "")
+        st.code(content, language=lang, line_numbers=True)
+    else:
+        st.error("Could not read file contents")

components/file_explorer.py

@@ -0,0 +1,164 @@
+"""
+File Explorer Component - Renders file tree sidebar for indexed files.
+"""
+import streamlit as st
+import os
+from pathlib import Path
+from typing import Dict, List, Optional
+
+
+def build_file_tree(file_paths: List[str], base_path: str = "") -> Dict:
+    """
+    Build a nested dictionary representing the file tree from a list of file paths.
+    
+    Args:
+        file_paths: List of file paths (relative or absolute)
+        base_path: Base path to make paths relative to
+        
+    Returns:
+        Nested dictionary representing folder structure
+    """
+    tree = {}
+    
+    for file_path in file_paths:
+        # Make path relative if base_path is provided
+        if base_path:
+            try:
+                rel_path = os.path.relpath(file_path, base_path)
+            except ValueError:
+                rel_path = file_path
+        else:
+            rel_path = file_path
+        
+        # Split path into parts
+        parts = Path(rel_path).parts
+        
+        # Navigate/create tree structure
+        current = tree
+        for i, part in enumerate(parts):
+            if i == len(parts) - 1:
+                # It's a file
+                current[part] = {"_type": "file", "_path": file_path}
+            else:
+                # It's a directory
+                if part not in current:
+                    current[part] = {"_type": "dir"}
+                current = current[part]
+    
+    return tree
+
+
+def get_file_icon(filename: str) -> str:
+    """Get an appropriate icon for a file based on its extension."""
+    ext = Path(filename).suffix.lower()
+    
+    icons = {
+        ".py": "🐍",
+        ".js": "📜",
+        ".ts": "📘",
+        ".jsx": "⚛️",
+        ".tsx": "⚛️",
+        ".html": "🌐",
+        ".css": "🎨",
+        ".json": "📋",
+        ".md": "📝",
+        ".txt": "📄",
+        ".yaml": "⚙️",
+        ".yml": "⚙️",
+        ".toml": "⚙️",
+        ".sql": "🗃️",
+        ".sh": "🖥️",
+        ".bash": "🖥️",
+        ".env": "🔐",
+        ".gitignore": "🚫",
+    }
+    
+    return icons.get(ext, "📄")
+
+
+def render_tree_node(name: str, node: Dict, path_prefix: str = "", depth: int = 0):
+    """Recursively render a tree node (file or directory)."""
+    
+    if node.get("_type") == "file":
+        # Render file
+        icon = get_file_icon(name)
+        file_path = node.get("_path", "")
+        
+        # Create button for file selection
+        indent = " " * (depth * 4)
+        if st.button(f"{icon} {name}", key=f"file_{file_path}", use_container_width=True):
+            st.session_state.selected_file = file_path
+            st.rerun()
+    else:
+        # Render directory
+        dir_key = f"dir_{path_prefix}/{name}"
+        
+        # Check if directory is expanded
+        if "expanded_dirs" not in st.session_state:
+            st.session_state.expanded_dirs = set()
+        
+        is_expanded = dir_key in st.session_state.expanded_dirs
+        
+        # Toggle button for directory
+        icon = "📂" if is_expanded else "📁"
+        if st.button(f"{icon} {name}", key=dir_key, use_container_width=True):
+            if is_expanded:
+                st.session_state.expanded_dirs.discard(dir_key)
+            else:
+                st.session_state.expanded_dirs.add(dir_key)
+            st.rerun()
+        
+        # Render children if expanded
+        if is_expanded:
+            # Get children (excluding metadata keys)
+            children = {k: v for k, v in node.items() if not k.startswith("_")}
+            
+            # Sort: directories first, then files
+            sorted_children = sorted(
+                children.items(),
+                key=lambda x: (x[1].get("_type") == "file", x[0].lower())
+            )
+            
+            for child_name, child_node in sorted_children:
+                with st.container():
+                    render_tree_node(
+                        child_name, 
+                        child_node, 
+                        f"{path_prefix}/{name}", 
+                        depth + 1
+                    )
+
+
+def render_file_tree(indexed_files: List[str], base_path: str = ""):
+    """
+    Render the file tree sidebar.
+    
+    Args:
+        indexed_files: List of indexed file paths
+        base_path: Base path to make paths relative to
+    """
+    st.markdown("### 📁 Files")
+    
+    if not indexed_files:
+        st.caption("No files indexed yet")
+        return
+    
+    st.caption(f"{len(indexed_files)} files indexed")
+    
+    # Build tree structure
+    tree = build_file_tree(indexed_files, base_path)
+    
+    # Sort root level: directories first, then files
+    sorted_root = sorted(
+        tree.items(),
+        key=lambda x: (x[1].get("_type") == "file", x[0].lower())
+    )
+    
+    # Render tree
+    for name, node in sorted_root:
+        render_tree_node(name, node)
+
+
+def get_indexed_files_from_session() -> List[str]:
+    """Get the list of indexed files from session state."""
+    return st.session_state.get("indexed_files", [])