File Explorer

The file explorer is the left sidebar of the Studio IDE. It displays the repository’s file tree with VS Code-style icons, indent guides, and interactive features.

Tree view

The tree renders every file and folder in the repository. Folders can be expanded and collapsed by clicking. The tree supports:

Indent guide lines — vertical lines connecting parent folders to their children for visual depth
File-type icons — color-coded 2-letter badges based on the file extension (e.g. TS for TypeScript, PY for Python, DK for Dockerfile)
Special file recognition — files like package.json, tsconfig.json, .gitignore, README.md, Makefile, and LICENSE get unique icon colors
Active file highlight — the currently open file is visually highlighted
Modified indicator — files with unsaved drafts show a dot to indicate pending changes
.gitignore dimming — files and folders matched by .gitignore rules are rendered at reduced opacity so you can visually distinguish tracked vs. ignored files

Supported file icons

Icon	Extensions
`TS` / `TX`	`.ts`, `.tsx`
`JS` / `JX`	`.js`, `.jsx`, `.mjs`, `.cjs`
`PY`	`.py`
`CSS` / `SC`	`.css`, `.scss`
`<>`	`.html`
`{}`	`.json`
`YM`	`.yaml`, `.yml`
`MD`	`.md`, `.mdx`
`GO`	`.go`
`RS`	`.rs`
`RB`	`.rb`
`JV`	`.java`
`SQ`	`.sql`
`GQ`	`.graphql`
`DK`	`Dockerfile`
`$_`	`.sh`, `.bash`
`SV`	`.svg`
`IM`	`.png`, `.jpg`, `.gif`, `.webp`
`EN`	`.env`, `.env.*`
`GI`	`.gitignore`
`PK`	`package.json`
`TC`	`tsconfig.json`

Search and filter

Click the search icon at the top of the explorer (or press Ctrl+Shift+E) to filter the file tree. Type a file name or path fragment — the tree filters in real time, showing only matching files and their parent folders.

Right-click any file to open the context menu with these actions:

Action	Description
📌 Pin as Context	Pin this file as always-included context for Cendra AI. The Cendra panel header shows a count of pinned files and each pinned file appears as a removable pill. Pinned context is injected into every Cendra request automatically.
📌 Unpin Context	Shown instead of “Pin as Context” when the file is already pinned. Removes the file from the pinned context set.
Copy Path	Copies the full path including the repository prefix (e.g. `cendriix-ai/myrepo/src/App.tsx`)
Copy Relative Path	Copies the path relative to the repo root (e.g. `src/App.tsx`)
Rename	Inline rename — type a new name and press Enter to save
Download	Downloads the file content as a local file via the browser

Context pinning

Context pinning lets you mark specific files as always-included context for Cendra AI. This is useful when working on a feature that spans multiple files — pin the related files and Cendra will have their content available in every conversation, regardless of which file is open in the editor.

How it works

Right-click a file in the explorer → click 📌 Pin as Context
The Cendra panel header updates to show “N pinned” in accent blue
Each pinned file appears as a removable pill below the Cendra header — click × to unpin
Pinned file contents are injected into the [Pinned Context] section of every Cendra request
Pin state persists in localStorage — your pins survive page reloads

Right-click a pinned file to see 📌 Unpin Context instead of the pin option.

Collapse all

Click the collapse-all button (↕) at the top of the explorer to collapse every expanded folder at once, returning the tree to its root-level view.

File count

The explorer header shows the total number of files in the repository. For large repos where the tree is truncated by the API, a note is displayed in the toolbar.

Create file / folder

Use the New File and New Folder buttons at the top of the explorer to create new items. Type a name and press Enter. New files open automatically in the editor and are synced to the Devbox workspace.