Code View
Code View is a full-screen file explorer and editor for the files in an intent's working workspace. The Monaco editor is read-only — editing is done through the Artifact Modal in chat.
Opening Code View
Click the Code icon in the top navigation bar while an intent is active. The activeView state switches to code-view, replacing the main workspace panel. Click any other navigation icon to switch to a different view.
Layout
Code View has two main panels:
┌──────────────────┬─────────────────────────────────────────┐
│ File Explorer │ Tabbed Editor │
│ (left panel) │ (right panel) │
│ 250–500px wide │ │
│ [Files] │ Open file tabs │
│ [Search] │ Monaco editor (READ-ONLY) │
│ [Git] │ or image preview │
└──────────────────┴─────────────────────────────────────────┘Drag the resize handle between the panels to adjust their relative widths. The file explorer has a minimum width of 250px and a maximum of 500px.
File Explorer (Left Panel)
The file explorer shows the contents of the intent's working directory. It has three tabs:
Files Tab (default)
Shows a hierarchical file tree. Click any file to open it in the editor. Folders can be expanded and collapsed.
- File icons indicate the file type (SQL, YAML, Markdown, Python, JSON, etc.).
- The currently open file is highlighted in the tree.
- An All / Changed filter toggle at the top lets you show all files or only modified/added/deleted files. The Changed filter shows color-coded counts by status.
Search Tab
Search file contents across the working directory (grep-style). Type a search term to find matching lines in all files. Results are grouped by file with match counts, and each match shows the line number and highlighted context. Click a match to open the file at that line in the editor.
Git Tab
Shows the current Git branch name, commit count ahead of the base branch, and a chronological commit history timeline. Each commit displays its message, short hash, author, and relative timestamp. Click a commit to expand its changed-file list and view the diff in the editor panel.
Tabbed Editor (Right Panel)
The tabbed editor displays open files as tabs at the top. Click a tab to switch between files. Close a tab with the × button on the tab.
Monaco Editor (Read-Only)
Text files (SQL, YAML, Markdown, Python, TypeScript, JSON, etc.) open in the Monaco editor with full syntax highlighting. Features:
- Line numbers
- Syntax highlighting for all supported languages
- Word wrap (toggleable)
- Find and replace (Cmd+F / Ctrl+F)
Python files also connect automatically to the Intent's Python language server. While it is active, Code View provides inline diagnostics, hover details, and semantic highlighting for the packages available in the agent's data-engineering environment.
The editor is read-only. To edit a file, open it in the Artifact Modal from the chat (where an Edit button is available for unlocked artifacts).
If Python code intelligence is unavailable, the file still opens and all normal read-only Code View actions continue to work.
Image Preview
Image files (PNG, JPG, JPEG, GIF, WebP, SVG, BMP, ICO) are rendered as a visual <img> preview rather than showing raw binary or base64 content.
Selecting Code and Acting On It
When you select text in the Monaco editor, a SelectionToolbar popover appears near the selection with three actions:
- Improve — Opens an inline text input where you describe the desired change. On submit, the instruction and selected code are composed into a chat message and set as
pendingInputValue. - Explain — Prefills the chat input with an "Explain this code" prompt containing the file path and selected snippet.
- Reference — Scrolls to the chat message whose tool call last touched the current file (or prefills the chat with the code snippet if no custom handler is provided).
For markdown files in preview mode, a separate CodeSelectionToolbar appears on DOM text selection with the same three actions (Improve, Explain, Reference).
Go to Chat Message
A MessageSquarePlus button in the tabbed editor header scrolls the chat panel to the message whose tool call last referenced the currently open file. If no matching message is found, a brief "not found" indicator is shown.
Commit Diff View
The commit-diff view (a separate activeView state value) shows a diff of the most recent commit. It displays:
- The list of files changed in the commit
- For each changed file: a unified or side-by-side diff view
This view is shown automatically after the agent finishes an execution step that includes a Git commit.
States
| State | What you see |
|---|---|
| Empty workspace | File explorer shows an empty tree or "No files yet" message |
| Loading files | Spinner in the file explorer while the file tree is fetched |
| Files loaded | File tree populated; click any file to open it |
| File loading | Brief spinner in the editor tab while file content is fetched |
| Image file | Image rendered visually as <img> instead of code |
| No intent selected | Code View may show empty state until an intent with a workspace is selected |
| Python language server active | Python code intelligence is available in the editor |
| Python language server unavailable | The file remains available without code-intelligence features |
Quick Reference
| Action | How |
|---|---|
| Show or hide Working Folder | Click the Code icon in the navigation bar |
| Open a file | Click file name in the Files tab |
| Search file contents | Click Search tab → type search term |
| View commit history | Click Git tab in file explorer |
| Close a file tab | Click × on the tab |
| Switch open files | Click the tab |
| Go to chat message for file | Click MessageSquarePlus icon in editor header |
| Act on selected code | Select text in editor → click Improve, Explain, or Reference |
| Resize panels | Drag the vertical divider (250–500px range for left panel) |
| Edit a file | Must use the Artifact Modal in chat (Code View is read-only) |