Code Module

The Code module provides a file explorer, code editor, and image viewer for working with repository files.

Navigation Panel

The left panel provides three tabs for navigating your repository:

Explorer Tab

Shows the repository’s file tree. See File Tree below for all features including git status indicators, drag-and-drop, context menus, and submodule support.

Changes Tab

Shows uncommitted changes in the repository, similar to GitHub Desktop:

• Click “Changes” tab to view files with uncommitted modifications
• Each file shows its git status (M = Modified, A = Added, D = Deleted, ? = Untracked)
• Use the checkbox next to each file to stage/unstage it for commit
• Use the “select all” checkbox in the header to stage/unstage all files at once
• Click a file to view its diff in the main editor area
• Use the filter input to search for specific files

Commit Form:

At the bottom of the Changes tab is the commit form:

• Summary (required) - Enter the commit message title/summary
• Description (optional) - Enter additional commit details
• Commit to [branch] button - Creates a commit with all staged files

The commit button is disabled until you have: 1. At least one staged file 2. A non-empty summary message

After committing, the changes list refreshes automatically.

History Tab

Shows the git commit history for the repository:

• Click “History” tab to view recent commits
• Each commit shows short hash, message (truncated), author, and relative date
• Click a commit to expand and see changed files
• Each file shows its change status (A = Added, M = Modified, D = Deleted, R = Renamed)
• Click a file to open it with the diff view showing that commit’s changes
• The diff header shows “Commit ” to indicate which commit you’re viewing
• Expand the Comments section to add or view commit-level comments
• Click the refresh button to reload commit history

Toolbar

Below the tabs is a toolbar row with action buttons specific to each tab:

Explorer Toolbar

Changes Toolbar

History Toolbar

File Tree

The file tree in the Explorer tab shows the repository’s files with the following features:

Git Status Indicators

Files with uncommitted changes show a colored indicator:

Creating Files and Folders

Use the buttons in the file tree header to create new items:

• New File (document icon) - Creates a new file in the selected directory or project root

• New Folder (folder+ icon) - Creates a new folder in the selected directory or project root

A dialog prompts for the name. The tree refreshes automatically after creation.

Collapse / Expand All

Use the buttons in the file tree header to manage tree expansion:

• Expand All (unfold_more icon) - Expands all directories in the tree

• Collapse All (unfold_less icon) - Collapses all directories

Hidden Files

Toggle hidden files (dotfiles) visibility with the eye icon in the header. Hidden files start with a dot (e.g., .gitignore, .env).

Drag and Drop

Moving files within the tree:

• Click and drag a file or folder to move it to another directory

• A visual ghost shows what you’re dragging

• Drop targets highlight when you hover over them

Importing files from Finder:

• Drag files from Finder/desktop into the file tree

• Drop on a folder to import into that folder

• Drop on the tree background to import to root

File Actions (Right-Click Menu)

• Open - Open file in the editor

• Open in Vim - Open in vim terminal tab

• Open in Nano - Open in nano terminal tab

• Rename - Rename the file (with dialog)

• Duplicate - Create a copy of the file (adds “-copy” suffix)

• Copy Path - Copy absolute path

• Copy Relative Path - Copy path relative to project root

• Delete - Delete the file (with confirmation)

Folder Actions (Right-Click Menu)

For regular folders (not submodules):

• Open Terminal Here - Open a terminal tab in this directory

• Rename - Rename the folder (with dialog)

• Copy Path - Copy absolute path

• Copy Relative Path - Copy path relative to project root

• Delete Folder - Delete the folder and all contents (with confirmation)

Submodule Support

Git submodules show a colored badge indicating their status:

Right-click a submodule folder for:

• Fetch - Fetch from remote

• Pull - Pull latest changes

• Push - Push local commits

• Open Terminal Here - Open terminal in submodule directory

Editor

The center panel shows file content with syntax highlighting powered by CodeMirror 6.

Keyboard Shortcuts

Find & Replace

Press Cmd/Ctrl+F to open the find panel at the top of the editor.

Find panel features:

• Search input - Type to search, matches highlight in yellow

• Replace input - Click the arrow or press Cmd/Ctrl+H to show

• Match case - Toggle case-sensitive search

• Regex - Toggle regular expression mode

• Whole word - Match whole words only

• Next/Previous - Navigate between matches

• Replace - Replace current match

• Replace All - Replace all matches

Press Esc to close the find panel.

Editor Settings Bar

For code files (non-markdown), a settings bar appears below the tabs with:

Left side: - File language (e.g., TYPESCRIPT, JAVASCRIPT) - Cursor position (Ln X, Col Y)

Right side: - Changes (difference icon) - Toggle diff view for files with uncommitted git changes - Word Wrap (wrap icon) - Toggle line wrapping for long lines - Minimap (sidebar icon) - Toggle code minimap on right side - Font Size (-/+ buttons) - Adjust font size from 10px to 24px

These settings persist while the file is open but reset when reopened.

Changes View (Diff)

When a file has uncommitted git changes, a “Changes” button appears:

• For code files: in the editor settings bar (difference icon)
• For markdown files: in the toolbar (difference icon) and raw mode toolbar

Click to toggle between the normal editor and a diff view. The diff view shows:

• Line numbers for both old and new versions
• Deletions highlighted in red
• Additions highlighted in green
• Context lines in normal color
• Hunk headers showing line ranges

Click the X button in the diff header to return to the normal editor.

This is useful for reviewing your changes before committing.

Comments

You can add comments to diffs and commits. Comments are stored in git (.teamide/comments/ directory) so they can be committed and shared with your team.

Adding comments in the diff view:

• Hover over any line to see a + icon in the left gutter
• Click the + icon to open a comment input
• Type your comment and press Ctrl+Enter to submit (or click Comment)
• Press Esc to cancel

Viewing and replying to comments:

• Lines with comments show a chat bubble icon in the gutter
• Comments appear inline below the relevant line
• Click Reply to add a threaded response
• Edit or Delete your own comments using the buttons that appear on hover

Commit-level comments:

• Go to the History tab and expand a commit
• Click the Comments section to expand it
• Click “Add comment” to add a comment about the entire commit
• Replies and threading work the same as line comments

Storage structure:

.teamide/
  comments/
    commits/         # Commit-level comments
      abc1234.json
    files/           # Working tree (uncommitted) file comments
      src__store_dot_ts.json
    history/         # Comments on historical commit diffs
      abc1234/
        src__store_dot_ts.json

Comments are regular JSON files that can be committed to git and shared with collaborators.

Supported File Types

• Code: JavaScript, TypeScript, Vue, Python, Go, Rust, etc.

• Markup: HTML, CSS, SCSS, JSON, YAML, XML

• Documentation: Markdown with preview toolbar

• Images: PNG, JPG, GIF, SVG, WebP with zoom controls

Markdown Editor

Markdown files open in a WYSIWYG editor (ProseMirror) with a formatting toolbar.

Toolbar buttons:

Responsive toolbar: When the editor is narrow (e.g., split screen mode), the toolbar automatically wraps to multiple rows to keep all buttons accessible.

Find & Replace in markdown:

• Press Cmd/Ctrl+F or click the search icon to open the search panel

• Type to search - all matches highlight in yellow, current match in orange

• Use Enter to find next, Shift+Enter for previous

• Click the replace icon to open the replace panel

• Replace - Replace current match and move to next

• All - Replace all matches at once

• Press Esc to close the search panel

Raw mode:

• Click the code icon (</>) to switch to raw markdown editing (CodeMirror)

• In raw mode, you edit the markdown source directly with syntax highlighting

• Full find & replace is available in raw mode

• Click the code icon again to return to WYSIWYG mode

Status bar:

The bottom of the markdown editor shows a status bar with:

• Word count - Total words in the document

• Character count - Total characters in the document

• Line numbers toggle - Click the numbered list icon to show/hide line numbers

• Focus mode toggle - Click the focus icon to enable/disable focus mode

Line numbers:

Toggle line numbers in the markdown editor using the numbered list icon in the status bar:

• When enabled, line numbers appear in a gutter on the left side
• Numbers correspond to block-level elements (paragraphs, headings, lists, etc.)
• Useful for referencing specific lines when collaborating or reviewing

Focus mode:

Focus mode helps you concentrate on writing by dimming all content except the current paragraph:

• Click the focus icon in the status bar to toggle focus mode on/off

• The paragraph containing the cursor stays fully visible

• All other paragraphs, headings, lists, and blocks are dimmed

• Moving the cursor automatically updates which content is highlighted

Table editing:

Tables can be inserted using the table button in the toolbar. Right-click on any table cell to access the table editing menu:

• Add row above - Insert a new row above the current row

• Add row below - Insert a new row below the current row

• Add column left - Insert a new column to the left

• Add column right - Insert a new column to the right

• Delete row - Remove the current row (disabled if only one row)

• Delete column - Remove the current column (disabled if only one column)

Cell alignment is preserved when editing.

Inter-document links:

The markdown editor supports two types of internal linking:

1. Anchor links (Table of Contents)

   Every heading automatically gets an ID based on its text content. You can link to any heading within the same document using standard markdown anchor syntax:

   ## My Section Header
   
   <!-- Link to the header above -->
   [Jump to section](#my-section-header)

   The heading text is converted to a URL-friendly slug:

   • Lowercase
   • Spaces become dashes
   • Special characters are removed

   Example: ## Getting Started! → #getting-started

   Clicking an anchor link scrolls to that heading in the document.

2. Wiki-style links

   Link to other documents in your repository using double-bracket syntax:

   [[other-document]]           → links to other-document.md
   [[folder/nested-doc]]        → links to folder/nested-doc.md
   [[readme|Click here]]        → displays "Click here", links to readme.md

   Wiki-links are styled with a purple color and subtle background to distinguish them from regular links.

   • If no file extension is provided, .md is automatically appended
   • Use the pipe | syntax to display custom text
   • Clicking a wiki-link opens that file in a new tab

Link dialog with header picker:

Click the link button in the toolbar (or press Ctrl+K) to open the enhanced link dialog:

• External URL tab: Enter any URL (https://…) for external links

• Document Link tab: Browse and search all headers in the current document

  • Headers are listed hierarchically by level (H1, H2, H3, etc.)
  • Type in the search box to filter headers by text
  • Click a header to select it - the anchor link is automatically generated
  • If link text is empty, clicking a header auto-fills it with the header text

This makes creating a table of contents easy - just click the link button, switch to Document Link, and pick the header you want to link to.

Inline raw editing:

Double-click any paragraph, heading, or block to edit its raw markdown directly in place:

• The rendered content is replaced with an editable text field showing the raw markdown
• Edit the markdown syntax directly (e.g., [link text](url), **bold**, etc.)
• Press Enter or click outside to commit - the text parses back to rendered markdown
• Press Escape to cancel without saving changes

This is useful when the WYSIWYG toolbar doesn’t give you enough control, or when you want to quickly fix markdown syntax issues

Image Viewer

Image files open in a dedicated viewer with:

• Zoom controls - Zoom in/out, fit to screen, actual size

• Mouse wheel zoom - Ctrl/Cmd + scroll to zoom

• Dimensions display - Shows image width x height

• Transparency grid - Checkerboard background for transparent images

JSON Table Viewer

JSON files (.json) open in a table viewer when the content is an array of objects. This provides a spreadsheet-like interface for viewing and editing JSON data.

Features:

• Table View - JSON arrays render as a table with columns auto-detected from object keys

• Search - Filter rows by typing in the search box (searches all columns)

• Sort - Click column headers to sort ascending/descending

• Edit Cell - Double-click any cell to edit its value inline

• Add Row - Click “Add Row” to append a new row with empty values

• Delete Row - Click the trash icon to delete a row

• Save - Changes are tracked with an “Unsaved changes” indicator; click Save to write back to the file

Supported data types:

Non-array JSON:

If the JSON file is not an array (e.g., a configuration object), it displays in a formatted tree view instead of a table. This view is read-only.

Embedding JSON Tables in Markdown

You can embed live JSON tables directly in markdown documents using the json-table fence block syntax:

```json-table
path: data/users.json
columns: name, email, role
search: true
```

Configuration options:

Features:

• Tables render inline in the WYSIWYG markdown editor
• Refresh button to reload data from the file
• Search/filter bar (when enabled) to filter rows
• Columns can be limited to show only specific fields
• In raw markdown mode, the fence block syntax is preserved

Example:

path: config/settings.json
columns: key, value
search: true

This embeds a read-only table view of config/settings.json showing only the key and value columns, with a search bar for filtering.

SQLite Database Viewer

SQLite database files (.sqlite, .db, .sqlite3) open in a dedicated database browser with full CRUD capabilities.

Features:

• Table List Sidebar - Shows all tables in the database; click to select

• Data Grid - Displays table rows with pagination (100 rows per page)

• Search - Filter rows across all columns

• Add Row - Click “Add Row” to insert a new record

• Edit Row - Click the edit icon to modify a row

• Delete Row - Click the delete icon (with confirmation)

• Schema View - Click the schema icon to see column types, nullable status, and primary keys

• SQL Console - Run SELECT queries directly against the database

SQL Console:

Click “SQL Console” in the sidebar to open the query editor:

• Write SELECT queries to explore data
• Press Ctrl+Enter (or Cmd+Enter on Mac) to execute
• Results display in a table below
• Only SELECT queries are allowed (for safety)

Supported Operations:

Notes:

• Changes are saved immediately to the database file
• The database file will show as modified in git status
• Large tables are paginated for performance
• NULL values display as “NULL” in the grid

Embedding SQL Queries in Markdown

You can embed live SQL query results directly in markdown documents using the sql-table fence block syntax:

```sql-table
path: data/app.db
query: SELECT name, email FROM users WHERE active = 1
columns: Name, Email
```

Configuration options:

Features:

• Query results render inline in the WYSIWYG markdown editor
• Refresh button to re-execute the query
• Read-only display (no editing of data)
• Only SELECT queries are allowed for safety
• In raw markdown mode, the fence block syntax is preserved
• Error messages display if the query is invalid

Example:

path: data/app.db
query: SELECT id, name, email FROM users WHERE active = 1
columns: ID, Full Name, Email Address

This embeds a read-only table view showing the results of the SQL query against data/app.db, with custom column headers.

Tabs

Open files appear as tabs above the editor:

• Click a tab to switch to that file

• Click X to close a tab

• Modified files show a dot indicator

• Terminal tabs (from “Open in Vim/Nano”) also appear here

File Watching

The green sync icon in the Explorer toolbar indicates file watching is active. When files change on disk (e.g., from git operations or external editors), the tree automatically updates.

Right Panel

The right panel provides two tabs for context and terminal management:

File Info Tab

When a file is open, shows:

• Name - File name with icon
• Path - Full path within the repository
• Language - Detected programming language
• Status - Badges showing Modified/Saved and git status (Modified, Added, Deleted, etc.)
• Actions - Quick buttons for Save, Copy Path, and Close
• Open Files - List of all open files with click to switch

Terminals Tab

Shows all terminal sessions for the current repository:

• View active terminal sessions
• Click a session to open it in split view
• Create new Terminal or Claude sessions
• See session status and last activity

Terminal Tabs

Terminals can be opened as tabs alongside your file tabs:

Opening Terminal Tabs:

• Click the green + button in the tab bar
• Choose Terminal for a new shell session
• Choose Claude for a Claude Code session
• Or select an existing session from the “Open Existing” list

Terminal Tab Features:

• Terminal tabs appear in the tab bar with a green terminal icon
• Click a terminal tab to switch to it
• Middle-click to close a terminal tab
• Click the pop out icon to open the terminal in a separate window

Split View

Work with a file and terminal side by side:

Opening Split View:

• From the right panel Terminals tab, click a session to open it in split view
• A vertical divider appears between the editor and terminal

Using Split View:

• Drag the divider left or right to resize the panes
• The focused pane shows a blue border
• Click the X button in the tab bar to close split view

Auto Save

Configure automatic file saving in Settings > Editor:

Auto Save Delay:

When using “After delay” mode, you can set the delay between 0.1 and 10 seconds. The default is 1 second.

Editor Settings

Configure the code editor in Settings > Editor:

File Explorer

Editor

Feature Toggles

Additional editor features can be enabled or disabled in Settings > Features > Code Editor:

General Features

Advanced Features

Experimental Features