---
title: "Files"
id: "343"
type: "page"
slug: "files"
published_at: "2026-05-19T11:30:45+00:00"
modified_at: "2026-06-08T16:48:40+00:00"
url: "https://xedant.com/code/docs/files"
markdown_url: "https://xedant.com/code/docs/files.md"
excerpt: "The Files dialog provides a comprehensive interface for managing your project files directly in the…"
---

# Files

[https://xedant.com/code/docs/files.md](https://xedant.com/code/docs/files.md)

The Files dialog provides a comprehensive interface for managing your project files directly in the browser. View your file structure, edit code, create new files and folders, rename items, move content between locations, and delete unwanted files — all from a single, intuitive interface.

## Opening the Files Dialog

Open the Files dialog by clicking the Files button in the message input area or in the Git panel. The dialog also opens when you click the edit icon on a file in the git panel, press the “Edit file” button in the git diff view, or when Claude edits a file through tool messages.

The dialog displays as a large overlay window with two main sections: a file tree on the left side showing your project structure, and an editor panel on the right side for viewing and editing file contents. This split-pane design lets you quickly navigate between files while keeping your code visible and editable.

When opened from the git panel or a tool message, the dialog automatically selects and displays the relevant file. Otherwise, it opens with your last viewed file or a default selection.

### Opening files from the Git panel:

- **Edit icon** — Each file in the git panel has a pen icon; click it to open that file in the Files dialog
- **Files button** — The git panel has its own Files button that opens the dialog at the project root
- **Edit file in diff** — The git diff view includes an “Edit file” button that opens the changed file in the editor

### Viewing files in the Skills dialog:

The Skills dialog includes its own file viewer for browsing and editing skill-related files (such as `SKILL.md`), separate from the Files dialog.

## File Tree

The file tree on the left side of the Files dialog displays your entire project structure in a hierarchical, collapsible format. Folders appear with icons indicating whether they are expanded or collapsed, while files show icons based on their type.

### Navigating the tree:

- **Click a folder** to expand or collapse its contents
- **Click a file** to open it in the editor panel on the right
- **Double-click a folder** to expand it and simultaneously view its properties

### Keyboard shortcuts:

- **Arrow keys** — Navigate up and down through files and folders
- **Enter** — Open the selected file or expand/collapse the selected folder
- **Delete** — Delete the selected file or folder (with confirmation)
- **+ (plus)** — Expand the selected folder
- **– (minus)** — Collapse the selected folder
- **F2** — Rename the selected file or folder

The file tree maintains your expansion state, so when you close and reopen the dialog, folders remain expanded or collapsed according to your last interaction. This makes it easy to keep your preferred view of the project structure.

## File Editor

The file editor on the right side of the Files dialog provides a full-featured code editing experience directly in your browser. When you select a file from the tree, its contents appear in the editor, ready for viewing and modification.

### Editor features:

- **Syntax highlighting** — Code is color-coded based on the programming language, making it easier to read and understand structure
- **Line numbers** — Displayed along the left edge for easy reference when discussing specific lines
- **Auto-save** — Your changes are saved automatically as you type, preventing accidental data loss
- **Token count** — A counter at the bottom of the editor displays the current token count for the file, useful for understanding API usage limits
- **Theme selection** — Choose from multiple color themes (light, dark, or high-contrast) to match your visual preference

The editor supports standard text editing operations including typing, deleting, selecting text, copying, pasting, and undo/redo. You can also use the keyboard shortcut **Ctrl+S** (or **Cmd+S** on Mac) to manually save your changes at any time, even though auto-save is enabled.

Large files load efficiently, and the editor remains responsive even with substantial codebases. The syntax highlighting adapts automatically based on the file extension, so TypeScript, JavaScript, Python, HTML, CSS, and other languages display correctly without manual configuration.

## Running Scripts

When you open a shell script (`.sh` file) in the editor, a Run button appears in the editor header. Click it to execute the script — output is displayed in real time in the Script Output dialog.

### Script Output dialog:

The dialog shows the script name, the repo it belongs to, and an elapsed time counter in the header. Output appears line by line as the script runs, with automatic scrolling to the latest output. If you scroll up to review earlier output, auto-scroll pauses and a scroll-to-bottom button appears.

- **Copy button** — Copies the full output to the clipboard. Disabled while the script is still running to prevent incomplete copies
- **Stop button** — An animated stop button in the header terminates the script. Closing the dialog also stops execution
- **Completion sound** — A sound plays when the script finishes, so you are notified even if the dialog is not focused

### Output syntax highlighting:

Script output is automatically analyzed and highlighted using rules defined in the `output.parser` file located in your project’s `.xedant/` directory. Lines matching error patterns are highlighted in red, and warning patterns in orange. The same parser format is used for build output (`build.parser`) and deploy output (`deploy.parser`).

The parser file uses a simple format with `[ERROR]` and `[WARNING]` blocks, each containing regex patterns that apply to individual lines. For multi-line patterns (such as Python tracebacks), wrap the regex in double curly braces: `{{regex}}`. Lines starting with `#` are comments.

```
# Shell command not found
[ERROR]
.*command not found
[/ERROR]

# Python traceback (multi-line)
[ERROR]
^Traceback \(most recent call last\)\:
{{.*}}
[/ERROR]
```

Edit the `output.parser` file in the Files dialog to customize which lines get highlighted. Changes take effect on the next script execution — no server restart is needed.

## Creating Files and Folders

Add new items to your project using either the toolbar at the top of the Files dialog or the right-click context menu. Both methods provide the same functionality, so choose whichever feels more natural for your workflow.

### To create a new file:

- Click the “New File” button in the toolbar, or right-click in the file tree and select “New File”
- A dialog appears prompting you to enter the file name
- Type the name including the extension (for example: `helper.ts` or `styles.css`)
- If you want to create the file inside a specific folder, include the path (for example: `src/utils/helper.ts`)
- Press Enter or click “Create” to confirm

### To create a new folder:

- Click the “New Folder” button in the toolbar, or right-click in the file tree and select “New Folder”
- A dialog appears prompting you to enter the folder name
- Type the name of the folder (for example: `components` or `tests`)
- To create nested folders, use forward slashes (for example: `src/components/ui`)
- Press Enter or click “Create” to confirm

When you create a new file, the editor immediately opens it so you can start adding content. New folders appear in the file tree and can be expanded to show their contents (initially empty). The system automatically validates file names to ensure they don’t contain invalid characters and don’t conflict with existing items in the same location.

## Renaming Files and Folders

Rename files and folders to better organize your project or correct naming mistakes. The rename operation updates the item’s name while preserving its content and location in the hierarchy.

### To rename an item:

1. Select the file or folder in the file tree by clicking it once
2. Press the **F2** key, or right-click and select “Rename” from the context menu
3. A dialog appears showing the current name with the text selected
4. Type the new name (for files, include the extension)
5. Press Enter or click “Rename” to confirm the change

The system validates the new name to ensure it doesn’t conflict with existing items in the same parent folder. If you attempt to rename a file to a name that already exists, the operation fails and you see an error message explaining the conflict.

Renaming a folder automatically updates the paths of all files and subfolders within it, so you don’t need to manually update references. However, if your code contains hardcoded file paths or import statements referencing the old name, you’ll need to update those manually after the rename operation completes.

## Moving Files and Folders

Move files and folders to different locations in your project to reorganize your structure. This operation relocates the item while preserving its contents and properties.

### To move an item:

1. Select the file or folder in the file tree by clicking it once
2. Right-click and select “Move” from the context menu
3. A folder selector dialog appears showing your project structure
4. Navigate through the tree to find the destination folder
5. Click the destination folder to select it, then click “Move” to confirm

When you move a folder, all its contents (files and subfolders) move along with it, maintaining the internal structure. The operation validates that the destination doesn’t already contain an item with the same name, preventing accidental overwrites.

Moving files and folders updates their internal paths automatically. However, similar to renaming, if your code contains relative paths or import statements based on the old location, you may need to update those references manually. For example, moving a utility file from `src/utils/` to `src/lib/` requires updating any `import` statements that reference the old path.

## Deleting Files and Folders

Remove unwanted files and folders from your project using the delete function. This operation permanently removes items, so the system requires confirmation to prevent accidental data loss.

### To delete an item:

1. Select the file or folder in the file tree by clicking it once
2. Press the **Delete** key, or right-click and select “Delete” from the context menu
3. A confirmation dialog appears asking you to confirm the deletion
4. Review the item name and path to ensure you selected the correct one
5. Click “Delete” to permanently remove the item, or “Cancel” to abort the operation

When you delete a folder, all files and subfolders within it are also deleted. The confirmation dialog shows the total count of items that will be removed, helping you understand the scope of the operation before you confirm.

**Important:** Deletion is permanent and cannot be undone. There is no recycle bin or trash folder. If you accidentally delete important files, you may need to restore them from a backup (if available) or recreate them manually. Always double-check the confirmation dialog before proceeding with deletions.

## File Breadcrumbs

The breadcrumb bar appears at the top of the file editor panel, displaying the full path to the currently open file. Breadcrumbs provide quick navigation and help you understand the file’s location within your project structure.

For example, if you have a file at `src/utils/helper.ts`, the breadcrumb displays as:

`src › utils › helper.ts`

Each segment in the breadcrumb is clickable. Clicking a folder name opens that folder in the file tree (or opens the folder’s location if it’s not currently visible), while clicking the file name does nothing since the file is already open. Breadcrumbs are particularly useful when working with deeply nested files, as they provide a quick way to jump back to parent directories without manually scrolling through the tree.

When you switch between files in the editor, the breadcrumb updates automatically to reflect the current file’s path. The breadcrumb bar also serves as a visual indicator of which file is currently active, helping you maintain context when editing multiple files in succession.

**[← Chat](/code/docs/chat)**

**[Build & Deploy →](/code/docs/build-deploy)**