File Explorer
Browse your project structure in a tree view. Click any file to view its contents with syntax highlighting.
Features
Tree View
- Hierarchical folder structure
- Expand/collapse directories
- File type icons (TS, JS, Python, etc.)
- Color-coded by extension
File Viewer
Click any file to open a modal with:
- Full file contents
- Syntax highlighting
- File path display
- Close button
Auto-Refresh
File explorer automatically refreshes when AI creates or modifies files.
File Icons
| Extension | Color | Icon |
|---|---|---|
.ts, .tsx | Blue | File |
.js, .jsx | Yellow | File |
.py | Green | File |
.json | Yellow | File |
.css | Purple | File |
.html | Orange | File |
.prisma | Teal | File |
.md | Gray | File |
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| Click file | View contents |
| Click folder | Expand/collapse |
| Click refresh button | Reload tree |
Usage
- Click the folder icon in the left sidebar to toggle file explorer
- Navigate through folders by clicking them
- Click any file to view its contents
- Click refresh button to reload the tree
Last updated on