fix: Improve UI layout - VS Code style file tree, better buttons

- File tree now uses arrows (▶/▼) for expand/collapse
- Tree indentation with lines (│ ├─)
- Suggestion buttons in 2x2 grid with shorter text
- Much cleaner, less clumsy layout

components/file_explorer.py

@@ -1,27 +1,17 @@
 """
-File Explorer Component - Renders file tree sidebar for indexed files.
+File Explorer Component - VS Code style file tree.
 """
 import streamlit as st
 import os
 from pathlib import Path
-from typing import Dict, List, Optional
+from typing import Dict, List
 
 
 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
-    """
+    """Build a nested dictionary representing the file tree."""
     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)
@@ -30,135 +20,126 @@ def build_file_tree(file_paths: List[str], base_path: str = "") -> Dict:
         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]
+                    current[part] = {"_type": "dir", "_children": {}}
+                current = current.get(part, {}).get("_children", current.get(part, {}))
+                if "_children" not in current:
+                    current = current
     
     return tree
 
 
 def get_file_icon(filename: str) -> str:
-    """Get an appropriate icon for a file based on its extension."""
+    """Get icon for file based on 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": "🚫",
+        ".py": "🐍", ".js": "📜", ".ts": "📘", ".jsx": "⚛️", ".tsx": "⚛️",
+        ".html": "🌐", ".css": "🎨", ".json": "📋", ".md": "📝",
+        ".yaml": "⚙️", ".yml": "⚙️", ".toml": "⚙️", ".sql": "🗃️",
+        ".env": "🔐", ".gitignore": "🚫", ".txt": "📄",
     }
-    
     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")
+    """Render VS Code style file tree."""
     
     if not indexed_files:
-        st.caption("No files indexed yet")
+        st.caption("No files indexed")
         return
     
-    st.caption(f"{len(indexed_files)} files indexed")
+    # Custom CSS for tree styling
+    st.markdown("""
+    <style>
+    .tree-item {
+        padding: 2px 0;
+        cursor: pointer;
+        font-size: 13px;
+        font-family: 'Segoe UI', sans-serif;
+        color: #ccc;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .tree-item:hover {
+        background: rgba(255,255,255,0.1);
+    }
+    .tree-dir {
+        font-weight: 500;
+    }
+    .tree-file {
+        font-weight: 400;
+    }
+    .tree-selected {
+        background: rgba(56, 189, 248, 0.2) !important;
+        color: #38bdf8;
+    }
+    </style>
+    """, unsafe_allow_html=True)
+    
+    st.markdown(f"**📁 Files** ({len(indexed_files)})")
     
-    # Build tree structure
+    # Build and render tree
     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())
-    )
+    # Initialize expanded state
+    if "tree_expanded" not in st.session_state:
+        st.session_state.tree_expanded = set()
     
-    # Render tree
-    for name, node in sorted_root:
-        render_tree_node(name, node)
+    # Render tree items
+    render_tree_items(tree, 0)
+
+
+def render_tree_items(tree: Dict, depth: int):
+    """Render tree items with proper indentation."""
+    
+    # Sort: directories first, then files
+    items = [(k, v) for k, v in tree.items() if not k.startswith("_")]
+    sorted_items = sorted(items, key=lambda x: (x[1].get("_type") == "file", x[0].lower()))
+    
+    for name, node in sorted_items:
+        is_file = node.get("_type") == "file"
+        indent = "│  " * depth
+        
+        if is_file:
+            # File item
+            file_path = node.get("_path", "")
+            icon = get_file_icon(name)
+            is_selected = st.session_state.get("selected_file") == file_path
+            
+            # Compact button
+            btn_label = f"{indent}├─ {icon} {name}"
+            if st.button(btn_label, key=f"tree_{file_path}", use_container_width=True,
+                        type="primary" if is_selected else "secondary"):
+                st.session_state.selected_file = file_path
+                st.rerun()
+        else:
+            # Directory item
+            dir_key = f"dir_{depth}_{name}"
+            is_expanded = dir_key in st.session_state.tree_expanded
+            arrow = "▼" if is_expanded else "▶"
+            
+            btn_label = f"{indent}{arrow} 📁 {name}"
+            if st.button(btn_label, key=dir_key, use_container_width=True, type="secondary"):
+                if is_expanded:
+                    st.session_state.tree_expanded.discard(dir_key)
+                else:
+                    st.session_state.tree_expanded.add(dir_key)
+                st.rerun()
+            
+            # Render children if expanded
+            if is_expanded:
+                children = {k: v for k, v in node.items() if not k.startswith("_")}
+                render_tree_items(children, depth + 1)
 
 
 def get_indexed_files_from_session() -> List[str]:
-    """Get the list of indexed files from session state."""
+    """Get indexed files from session state."""
     return st.session_state.get("indexed_files", [])

components/multi_mode.py

@@ -64,26 +64,32 @@ def render_chat_mode(chat_engine):
         chat_engine: ChatEngine instance
     """
     st.markdown("### 💬 Chat with Your Codebase")
-    st.caption("📚 Explain code & workflows | 🔧 Generate & modify code | ✨ Develop new features | 🔍 Fast indexed retrieval")
     
     # Show suggested prompts if no history
     if not st.session_state.get("messages", []):
-        st.markdown("#### 💡 Try asking:")
+        st.markdown("💡 **Try asking:**")
         
-        suggestions = [
-            "How does the main module work?",
-            "Explain key functions and workflows",
-            "Generate a new utility function",
-            "Suggest improvements for the code",
-            "List all modules and their purpose"
-        ]
+        # Row 1 - 2 suggestions
+        col1, col2 = st.columns(2)
+        with col1:
+            if st.button("🔍 Explain project structure", key="suggest_0", use_container_width=True):
+                st.session_state.pending_prompt = "Explain the project structure and main components"
+                st.rerun()
+        with col2:
+            if st.button("📝 List all functions", key="suggest_1", use_container_width=True):
+                st.session_state.pending_prompt = "List all the main functions and their purpose"
+                st.rerun()
         
-        cols = st.columns(len(suggestions))
-        for i, suggestion in enumerate(suggestions):
-            with cols[i]:
-                if st.button(suggestion, key=f"suggest_{i}", use_container_width=True):
-                    st.session_state.pending_prompt = suggestion
-                    st.rerun()
+        # Row 2 - 2 suggestions
+        col3, col4 = st.columns(2)
+        with col3:
+            if st.button("⚡ Generate code", key="suggest_2", use_container_width=True):
+                st.session_state.pending_prompt = "Generate a new utility function for this project"
+                st.rerun()
+        with col4:
+            if st.button("🔧 Suggest improvements", key="suggest_3", use_container_width=True):
+                st.session_state.pending_prompt = "What improvements would you suggest for this code?"
+                st.rerun()
     
     # Return True to continue with normal chat flow
     return True