Code

Code is Coline's integrated development environment for writing, editing, and running code. It combines a full-featured code editor with AI-powered pair programming via Kairo Code, integrated terminal, Git version control, and cloud compute workspaces. Work on local files, clone GitHub repositories, or spin up cloud environments with a single click.

Getting started

Open Code from the Coline sidebar or navigation. The home screen presents options to start working:

• Open local folder: Select a folder on your computer to edit files locally
• Clone from GitHub: Enter a repository URL or browse your GitHub repositories to clone
• Open from Coline Files: Access projects stored in your Coline file storage
• Recent workspaces: Quickly reopen projects you worked on recently

Connect your GitHub account to access private repositories and enable push/pull operations.

Workspaces

Code organizes work into workspaces. Each workspace represents a project with its own file tree, editor state, and settings.

Workspace types:

• Local: Edit files directly on your machine. Changes save to your local filesystem.
• GitHub: Clone a repository to work on it. Push and pull changes to the remote.
• Cloud: Spin up a cloud compute environment for projects that need a runtime. Execute code, run servers, and use the terminal in a cloud VM.

Workspace persistence:

• Open tabs and active files are remembered when you close and reopen a workspace
• Unsaved drafts are preserved automatically
• Recent workspaces appear on the home screen for quick access

Editor

The code editor provides syntax highlighting, intelligent editing features, and extensive customization.

Syntax highlighting:

Supported languages include JavaScript, TypeScript, Python, HTML, CSS, SCSS, JSON, YAML, TOML, Markdown, and more. The editor detects language from file extension and applies appropriate highlighting.

Editor features:

• Line numbers with clickable gutter
• Code folding for collapsible regions
• Active line highlighting
• Bracket pair colorization
• Indent guides
• Minimap for code overview (optional)
• Word wrap modes
• Whitespace rendering options
• Smooth scrolling
• Sticky scroll for nested scopes

Cursor and selection:

• Cursor styles: line, block, or underline
• Cursor blinking modes: blink, smooth, phase, expand, or solid
• Multi-cursor support
• Selection highlighting

Large file handling:

Files over 5 MB open in performance mode with some features disabled to maintain responsiveness.

File tree

The file explorer in the sidebar shows your project structure.

Navigation:

• Expand and collapse folders by clicking the arrow or double-clicking
• Click a file to open it in a new tab
• Right-click for context menu actions

File operations:

• New file: Right-click a folder and select "New File", or use the toolbar button
• New folder: Right-click and select "New Folder"
• Rename: Right-click and select "Rename", or press F2
• Delete: Right-click and select "Delete" (with confirmation)
• Duplicate: Create a copy of a file in the same location
• Move: Drag and drop files between folders

Files are sorted with folders first (A-Z), then files (A-Z).

Tabs

Open files appear as tabs above the editor.

• Click a tab to switch to that file
• A dot indicator shows unsaved changes
• Click the X to close a tab
• Middle-click to close a tab
• Drag tabs to reorder them

Media files (images, videos, audio, PDFs) open in preview mode within tabs.

Kairo Code

Kairo Code is your AI pair programmer, available in the sidebar panel. It can read and edit files, search your codebase, run terminal commands, and help with any coding task.

Opening Kairo Code:

Click the Kairo icon in the activity bar or press Cmd + Shift + L to open a new chat.

What Kairo Code can do:

• Write code: Describe what you need and Kairo writes it
• Edit existing code: Ask Kairo to refactor, fix bugs, or add features to existing files
• Explain code: Highlight code and ask for an explanation
• Debug: Describe an issue and Kairo investigates, reading files and running commands as needed
• Search: Ask Kairo to find files, functions, or patterns in your codebase
• Run commands: Kairo can execute terminal commands and interpret the output

Reviewing changes:

When Kairo edits files, changes appear in the chat with options to:

• Keep: Accept the changes
• Undo: Revert to the previous version
• Review: See a diff of what changed

Context:

Kairo automatically understands your project structure. You can also attach specific files to a message by clicking the attach button or dragging files into the chat.

Settings:

• Inline suggestions: Enable AI-powered autocomplete as you type
• Auto complete: Suggestions for function calls, imports, and more
• Code explanations: Ask Kairo to explain selected code
• Model: Choose which AI model powers Kairo
• Context length: Control how much of your codebase Kairo considers (auto, small, medium, large)
• Stream responses: See responses as they generate

Terminal

The integrated terminal lets you run commands without leaving the editor.

Opening the terminal:

Click the terminal icon in the panel area or use the keyboard shortcut Cmd + J to toggle the panel.

Features:

• Full terminal emulation with xterm.js
• Multiple terminal sessions in tabs
• Create new terminals, rename, or close them
• Scrollback history (1000 lines by default)
• Copy on selection (optional)

Terminal settings:

• Default shell (zsh, bash, etc.)
• Shell arguments
• Font size and family
• Cursor style (block, underline, bar)
• Cursor blinking
• Scrollback buffer size

Cloud workspaces:

In cloud workspaces, the terminal connects to your remote compute environment. Run servers, install packages, and execute code in the cloud.

Git integration

The Source Control panel in the activity bar provides a full Git interface.

Repository status:

• Current branch name
• Ahead/behind indicator for remote tracking
• List of changed files organized by status

File changes:

Files are grouped into:

• Staged: Ready to commit
• Unstaged: Modified but not staged
• Untracked: New files not yet added to Git

Each file shows its status: M (modified), A (added), D (deleted), R (renamed), U (untracked).

Git operations:

• Stage: Click the + button on a file or "Stage All"
• Unstage: Click the - button on a staged file
• Commit: Enter a commit message and click Commit
• Amend: Modify the previous commit
• Push: Push commits to the remote repository
• Pull: Pull changes from the remote (with optional rebase)
• Fetch: Fetch remote changes without merging
• Branch: Create, switch, merge, or delete branches
• Stash: Save uncommitted changes for later
• Tags: View and manage tags

Editor integration:

The editor gutter shows line-level Git status:

• Green: Added lines
• Blue: Modified lines
• Red: Deleted lines

Click the gutter indicators to see the original content.

Cloud compute

Cloud workspaces run on remote servers, giving you a full development environment in the cloud.

Starting a cloud workspace:

When creating or opening a cloud workspace, select a compute size:

• Small: Basic tasks, lightweight projects
• Medium: Standard development
• Large: Resource-intensive work

Runtime status:

The status bar shows your runtime state:

• Running: Environment is active and ready
• Starting: Environment is spinning up
• Offline: Environment is stopped

Credits:

Cloud compute uses credits based on size and duration. The status bar shows current credit usage and balance. Idle workspaces automatically shut down to conserve credits.

Features:

• Full terminal access with shell
• Run servers and access them via provided URLs
• Install packages and dependencies
• Persistent storage within the workspace

Activity bar

The activity bar on the left edge provides quick access to different panels:

Click an icon to open its panel. Click again to collapse the sidebar.

Search

The Search panel provides project-wide text search.

Search types:

• Text search: Find literal text across all files
• Regex search: Use regular expressions for pattern matching
• Semantic search: AI-powered search that understands code meaning

Search options:

• Case sensitive toggle
• Whole word matching
• Include/exclude file patterns

Results show matching files with line previews. Click a result to open the file at that location.

Settings

Customize Code through the settings panel. Open settings from the menu or with Cmd + ,.

General:

• Restore previous session on startup
• Show welcome tab
• Auto-save mode (off, on focus change, after delay)
• Auto-save delay
• Confirm before delete

Editor:

• Font size, family, and line height
• Tab size and spaces vs tabs
• Word wrap mode
• Show minimap and minimap width
• Show line numbers
• Show indent guides
• Highlight active line
• Cursor style and blinking
• Bracket pair colorization
• Render whitespace
• Smooth scrolling
• Sticky scroll

Terminal:

• Default shell and arguments
• Font size and family
• Cursor style and blinking
• Scrollback buffer size
• Copy on selection

Appearance:

• Theme (One Dark Pro, Default Dark, Default Light, GitHub Dark)
• UI scale
• Activity bar position (left or right)
• Sidebar position (left or right)
• Show status bar
• Compact mode

Kairo:

• Inline suggestions
• Auto complete
• Code explanations
• Model selection
• Context length
• Stream responses

Language features:

• Quick suggestions
• Parameter hints
• Auto imports
• Format on save
• Format on paste
• TypeScript validation
• JavaScript validation
• ESLint validation

Advanced:

• Hardware acceleration
• Large file mode threshold
• Verbose logging
• Telemetry
• Experimental features

Settings sync to your Coline account and apply across devices.

Themes

Code includes several built-in themes:

• One Dark Pro (default): Dark theme with rich syntax colors
• Default Dark: Clean dark theme
• Default Light: Light theme for bright environments
• GitHub Dark: GitHub-inspired dark theme

Themes control:

• Background colors for different UI layers
• Text colors with hierarchy (primary, secondary, muted)
• Syntax highlighting colors for code
• Accent colors for interactive elements
• Terminal colors

Change themes in Settings > Appearance.

Keyboard shortcuts

File operations:

Navigation:

Editing:

Kairo:

Status bar

The status bar at the bottom shows contextual information:

• Branch: Current Git branch name
• Position: Line and column number of cursor
• Language: Detected language of current file
• Save state: Saved, Unsaved, or Saving
• Errors/Warnings: Count of problems in current file
• Runtime: Local or Cloud, with status and region
• Credits: Current usage for cloud workspaces

Click status bar items for related actions (e.g., click language to change syntax mode).

Tips

• Use Cmd + P to quickly open any file by typing part of its name. Much faster than navigating the file tree for large projects.
• Let Kairo handle repetitive tasks: Describe what you want changed across multiple files and Kairo can make the edits for you.
• Use cloud workspaces for projects that need a specific runtime environment or when you want to work from any device.
• Commit often: The Git panel makes it easy to stage and commit. Small, frequent commits are easier to review and revert if needed.
• Customize your theme and font: Spend time in settings to make the editor comfortable for long sessions.
• Use the terminal for quick commands: No need to switch to a separate terminal app when the integrated terminal is always available.
• Review Kairo's changes before accepting. The diff view shows exactly what changed so you can verify the edits are correct.
• Enable format on save if you use Prettier or ESLint to keep code consistently formatted without thinking about it.
• Use keyboard shortcuts: Learning Cmd + P, Cmd + Shift + P, and Cmd + B will significantly speed up your workflow.