# Files & Editing

CoderFlow lets you edit files directly in the running container and view how they've changed. You can browse the diff, edit files interactively, and discard changes if needed.

## Viewing Changed Files

The **Changed Files** section displays all repository changes made during the task execution. When a task completes or when you view an active task, you'll see:

- **Change statistics** - Count of repositories, files changed, lines added, and lines deleted
- **Repository list** - Each modified repository with the number of files changed
- **File diffs** - Detailed unified diffs showing what changed in each file, with syntax highlighting

You can toggle each file's diff to expand or collapse it. The diffs are read-only and show the state of the repository at the moment the task finished syncing.

## Editing Files

You can edit files directly in the container using the built-in Monaco code editor:

1. Click the **Edit** button next to any file in the Changed Files section
2. The editor opens with the current file content from the container
3. Make your edits in the editor
4. Click **Save & Sync** to:
   - Write your changes to the file in the container
   - Sync the repository to update the diff view
   - Refresh the Changed Files display with your new changes

The editor supports:
- Syntax highlighting for hundreds of languages (automatically detected from file extension)
- Line numbers and code folding
- Search and replace (Ctrl+H / Cmd+H)
- Auto-formatting support
- Minimap navigation for larger files

**Note:** Editing is only available while the container is running. If the container stops, you'll need to restart the container to enable editing.

## VS Code IDE

For more extensive editing, open the container in a full web-based VS Code environment. This gives you a complete IDE experience directly in your browser—no local installation required.

### Opening VS Code

Click the **VS Code** button in the task detail view. The IDE opens in a new browser tab connected to the running container.

Use the dropdown arrow next to the button to choose which folder to open:

- **Workspace**: Opens `/workspace`, where repositories are cloned
- **Container Root**: Opens the entire container filesystem
- **Task Output**: Opens `/task-output`, where agent results are stored
- **Repository folders**: Opens specific repository directories (your environment may contain multiple repos)

### Features

The web-based VS Code includes:

- Full syntax highlighting and IntelliSense for all major languages
- Integrated terminal with direct container access
- Git integration for viewing changes and staging files
- Search across files and folders
- Extensions for common development tasks
- Auto-save (changes save automatically after 1 second)

The theme automatically matches your CoderFlow theme preference (dark or light).

### When to Use VS Code vs. Quick Edit

- **Quick Edit (Monaco)**: Best for small, targeted changes to individual files you've already identified
- **VS Code**: Best for exploring the codebase, making changes across multiple files, running commands, or when you need full IDE capabilities

Both edit the same container filesystem—changes made in VS Code appear in the Changed Files view after syncing.

If you prefer working in your local VS Code installation, see **VS Code Extension** for how to connect directly to CoderFlow tasks.

## Discarding Changes

To revert changes to a file back to what's in the Git repository:

1. Click the **Discard** button next to the file in the Changed Files section
2. A confirmation modal appears with the filename
3. Click **Discard** to confirm

The discard operation:
- Uses `git checkout` if the file exists in the repository's HEAD commit
- Removes the file entirely if it's a new file that doesn't exist in HEAD (handles staged and untracked files)
- Updates the Changed Files view to reflect the removal of that file's changes

After discarding, you can immediately see the updated diffs. If you discard all changes to a file, it disappears from the Changed Files section.
