File Editor
Claudette ships a full Monaco editor — the same code editor that powers VS Code — for opening and editing files in your workspace. It runs entirely offline alongside the agent chat, the diff viewer, and the integrated terminal.
Opening a File
Section titled “Opening a File”There are two main ways to open a file in the editor:
- From the Changes panel — click the Open in editor icon button (the file icon at the right edge of any changed-file row). Clicking the file path itself opens the diff for that file in a separate tab; the icon button is what lands you in Monaco.
- From the Files tab — switch to the Files sidebar to browse the workspace’s file tree, and click any file to open it in the editor.
Files open as tabs next to your chat and diff tabs, so you can hop between agent output, a diff, and the editor without losing context. Each file gets its own tab, and switching files inside that tab gives you a fresh undo history per file.
Read vs Edit Mode
Section titled “Read vs Edit Mode”Files open in read-only mode by default. Toggling into edit mode does not remount the editor — your cursor position, scroll offset, and undo stack are preserved as you switch in and out of edit mode.
Save with ⌘S on macOS or Ctrl+S on Linux/Windows. The shortcut is scoped to the editor — it only fires when the editor has focus, so it won’t collide with other panels.
Theme Sync
Section titled “Theme Sync”Monaco’s theme follows Claudette’s app theme automatically. Pick a theme in Settings > Appearance and the editor restyles immediately, with no reload required. The same is true for dynamic colour changes — the editor observes the active theme and updates in real time.
See Theming for the full list of bundled themes.
Syntax Highlighting & Language Services
Section titled “Syntax Highlighting & Language Services”Language detection is automatic — Monaco picks the language from the file extension, so opening app.tsx gives you TypeScript, styles.css gives you CSS, and so on.
Dedicated language services run for:
- TypeScript / JavaScript — full type-aware highlighting and diagnostics
- JSON — schema-aware validation and formatting
- CSS / SCSS / LESS — property and value validation
- HTML / Handlebars / Razor — tag and attribute completion
Each language service runs in its own web worker, so typing latency stays snappy on larger files. Everything is bundled with the app — no CDN fetches, no network required.
Not the Diff Viewer
Section titled “Not the Diff Viewer”The Monaco editor is for opening and editing files. The diff viewer is a separate component that uses Shiki for syntax highlighting and is optimised for reviewing hunks of changed code rather than free-form editing. Both can be open at the same time as separate tabs.
Defaults
Section titled “Defaults”The editor ships with these defaults:
| Setting | Value |
|---|---|
| Font | Default mono stack (matches the rest of the app) |
| Font size | 13px |
| Line numbers | On |
| Word wrap | On |
| Minimap | Off |
| Sticky scroll | Off |
| Whitespace rendering | On selection only |
These are not yet user-configurable — open an issue on GitHub if you’d like one of them surfaced as a setting.