File Editor & Visual Artifacts
Relevant source files
The following files were used as context for generating this wiki page:
The File Editor and Visual Artifacts system manages how users and agents interact with source code and generated content. The system provides a native code editing environment and a framework for rendering complex visual data.
Native File Editor
The FileEditor provides a native interface for managing files. It handles disk I/O, syntax highlighting, and media previews within the UI.
Core Architecture
The system offloads disk operations and syntax parsing from the UI thread to ensure performance. Every live tab maintains its own drafts, selections, and scroll positions. The editor supports standard operations including saving, formatting, and searching.
The diagram shows the lifecycle of a file within the native editor from initial path resolution to final save.
Sources: crates/rebase-gpui/src/file_editor.rs:1-25
File Location Resolution
The editor resolves file paths and specific locations using a custom parser. It handles file:// protocols, percent-encoded characters, and line/column suffixes like :12:4 or #L12.
Sources: crates/rebase-gpui/src/file_editor.rs:80-131
Syntax and Media Support
The editor integrates with Tree-sitter for incremental syntax parsing and supports various programming languages. It also acts as a media viewer for non-textual files.
- Images: Supports JPEG, WebP, GIF, BMP, ICO, TIFF, and PNG.
- Video: Supports MP4, MOV, and WebM.
- Vector: Renders SVGs using a custom renderer.
Sources: crates/rebase-gpui/src/file_editor.rs:275-345, src/features/files/editor/syntaxTokens.test.ts:1-50
Visual Artifacts
Visual Artifacts are substantial reports, UI mockups, or data visualizations generated by agents. They reside beside the chat interface to keep the conversation concise.
Artifact Types and Rules
Agents generate artifacts using the artifacts.write command. Artifacts are distinct from user notes and follow specific rendering rules.
| Kind | Purpose | Rendering Context |
|---|---|---|
document | Long-form Markdown reports or plans. | Rendered as a clickable document card. |
html | Charts, timelines, or UI mockups. | Runs in a sandboxed frame with inline CSS/JS. |
media | Local images or videos. | Embedded in chat with playback controls. |
Sources: src/features/sessions/ui/AgentMarkdown.tsx:327-347, src/features/pilots/ui/FloatingPilotChat.tsx:490-575
Artifact Lifecycle
Artifacts are loaded via their unique IDs. The system handles concurrent updates by tracking the latest version of a document even if a previous read operation is still pending.
This diagram illustrates the flow of artifact creation, retrieval, and deletion.
Sources: src/features/artifacts/ui/ArtifactPanel.test.ts:20-100
Markdown and Document Previews
The project uses a specialized Markdown engine to render both file previews and agent responses.
Markdown Rendering Pipeline
The engine includes several plugins for enhanced functionality:
- Mermaid Diagrams: Renders
mermaidcode blocks into SVGs. - Syntax Highlighting: Applies specific syntax colors to code fences.
- Workspace Links: Resolves file paths into clickable internal links.
- Frontmatter: Extracts and displays YAML metadata in a collapsible disclosure.
Sources: src/features/sessions/ui/AgentMarkdown.tsx:40-100, src/features/sessions/ui/MarkdownDocumentPreview.tsx:10-45
Image Resolution
Images within Markdown documents resolve relative to the document's path within the repository (cwd). The system blocks remote images or absolute paths that reside outside the project root for security.
Sources: src/features/sessions/ui/MarkdownDocumentPreview.test.ts:60-120
Key Implementation Details
File Editor Controls
The editor provides a set of keyboard shortcuts and menu actions for navigation and manipulation.
| Action | Shortcut (macOS) | Description |
|---|---|---|
| Save | Cmd+S | Persists changes to the disk. |
| Find | Cmd+F | Opens the search panel. |
| Format | Alt+Shift+F | Runs code formatting analysis. |
| Word Wrap | Alt+Z | Toggles text wrapping. |
Sources: crates/rebase-gpui/src/file_editor.rs:35-65
Artifact Display Interface
The ArtifactSheet provides a dedicated UI component for viewing artifacts in mobile and floating chat contexts. It includes controls for copying document content and opening the artifact in the main application.
Sources: src/features/pilots/ui/FloatingPilotChat.tsx:495-550
The File Editor and Visual Artifacts system ensures a seamless transition between viewing code and interacting with agent-generated insights, providing a consistent workspace for technical tasks.