File Explorer
Browse project files from the side panel.
The Files tab in the Side Panel provides a project file explorer with search filtering and a recursive directory tree.
Features
- Recursive directory tree — Expandable directories with colored file type badges
- Search filtering — Real-time substring search with automatic ancestor expansion
- IDE integration — Use the picker beside a file to open it in any detected supported editor
- Inline diff access — View file diffs directly from the tree
File Type Icons
Files are tagged with colored badges by extension:
| Badge | Extensions |
|---|---|
| TS (blue) | .ts, .tsx |
| JS (yellow) | .js, .jsx |
| CSS (purple) | .css, .scss, .less |
| JSON (gold) | .json, .yaml, .yml, .toml |
| MD (green) | .md, .mdx, .txt |
| PY (blue) | .py |
| RS (copper) | .rs |
| GO (cyan) | .go |
| SH (green) | .sh, .bash, .zsh |
| HTML (orange) | .html, .svg |
| IMG (pink) | .png, .jpg, .jpeg, .gif, .webp |
Search
Type in the search box to filter files by name. The tree automatically expands directories containing matching files. When you clear the search, the previous expansion state is restored.
Opening Files
Click a file row to inspect its diff. Use the adjacent IDE button to choose VS Code, Cursor, Windsurf, Zed, WebStorm, IntelliJ IDEA, Kiro IDE, Sublime Text, or Finder on macOS. AgentCraft marks editors whose CLI cannot be found, and Settings lets you choose the preferred default. Finder is hidden on non-macOS systems.
Refresh
The directory structure is fetched when the Files tab is opened. Click the refresh button to reload the tree manually.