The workbench

Layouts, the dock, menus, Quick Access, the command palette, Search and the status bar.

Last updated 4 min read
On this page

Codevre opens in one of two layouts:

LayoutWhat you get
Code (default)Explorer on the left, the editor (or Welcome) in the middle, the Terminal below it, the Browser on the right
AgentThe Agent chat on the left, the Browser filling the rest, the Explorer closed

Which layout opens depends on, in order:

  1. A ?layout=code or ?layout=agent URL parameter (this visit only)
  2. The workbench.defaultLayout User setting
  3. code

A saved project reopens with the layout it had when you saved it, which takes precedence over all of these.

Every pane is a tab in the dock: editors, the Terminal, the Browser, the Agent, Settings, Projects, Templates and Welcome. You can:

  • drag a tab to another group, or to an edge to split
  • use View ▸ Editor Layout to split left/right/up/down or move an editor into a new group
  • drag a tool from the Tools sidebar into the dock

When you save the project, the layout (groups, open tabs, sidebar state, DevTools heights) is saved with it. Missing files and unknown tools are skipped when it's restored. New Tab pages and Welcome aren't saved.

Dropping more than 50 files onto the dock opens only the first 50.

The activity bar on the left switches the sidebar between Explorer (Ctrl+Shift+E), Search (Ctrl+Shift+F), Source Control (Ctrl+Shift+G) and Tools. Ctrl+B hides or shows the sidebar. At the bottom are the Account and Settings (⚙) buttons. The ☰ button opens the application menu.

The ☰ menu holds File, Edit, Selection, View, Terminal, Help and Home (links to other Codevre products and pages). Highlights:

  • File: New File, New Folder, New from Template, Open File/Folder (upload), Open Project, Open Recent, Save, Save As, Share, Publish, Preferences, Download File, Download Project, Close Folder
  • View: Command Palette, Go to File, Explorer, Search, Source Control, Tools, Appearance (sidebar, header, minimap), Editor Layout, Full Screen (F11), Terminal, Browser, Agent, Projects, Templates, Word Wrap
  • Terminal: Open Terminal, New Terminal, Run Active File, Run Selected Text, Run npm Script, Run Preview (VRE), Run Startup Tasks, Interrupt, Clear Terminal

In full screen (F11) a title bar appears with separate Go and Run menus.

One box does many things, chosen by the first character you type:

TypeModeShortcut
(nothing)Go to file. Recent files come first; app.js:42:7 jumps to a line and columnCtrl+P (also Ctrl+E)
>Command paletteCtrl+Shift+P or F1
:Go to line (negative numbers count from the end)Ctrl+G
@Go to symbol in the current fileCtrl+Shift+O
%Search text in all files
?Help listing these modes

Matching is fuzzy. Ctrl+Enter (Cmd+Enter) opens a file to the side. Press Ctrl+P again to move down the list.

The command palette is built from the menus, so every menu item is in it with its shortcut. It also includes every Monaco editor action ("Transform to Uppercase", "Fold All" and so on), tools no menu opens, and every setting (they appear once you start typing):

  • Boolean settings toggle directly.
  • Settings with a fixed list of values open a picker. Color Theme pins the commonly used themes at the top.
  • Everything else opens Settings on that key.

Commands you use often rise to a "recently used" group.

The Search sidebar finds text across the project:

  • Toggles for Match Case (Alt+C), Match Whole Word (Alt+W) and Regular Expression (Alt+R)
  • A replace field (click the chevron), with Replace All
  • files to include and files to exclude globs (click the … button)

Search reads unsaved editor content, so results match what you see. It skips binary files, files over 5,000,000 characters, anything hidden by files.exclude, and node_modules unless your include pattern mentions it. Results stop at 20,000 matches.

From left to right:

  • Save status (cloud) and upload progress
  • Problems: error and warning counts across open files. Click to list the files with problems
  • nodepod runtime status (booting… / ready)
  • Cursor position (click to go to a line) and language
  • A link for the most recent running dev server, with a stop button
  • Messages, the Browser toggle and notifications

Set workbench.statusBar.visible to false to hide it; notifications then move into the ⚙ menu.

Each editor pane also has its own small status bar, with Problems for that file (click for the Code Diagnostics panel), the Diff toggle, cursor position and language. Turn it off with workbench.fileStatusBar.

SettingDefaultEffect
editor.themedark-plusColor theme for the whole workbench
workbench.header.visibletrueShow the 30px header bar
workbench.compactDockfalseTighter dock chrome
workbench.tabs.connectedfalseTab bars that join the active tab to its content
workbench.statusBar.visibletrueShow the status bar
workbench.fileStatusBartruePer-file status bars in editor panes
ParameterEffect
?project=<id>Opens a saved project. Stays in the URL, so you can bookmark or share it
?template=<id>Starts from a template. Removed once the template loads
?layout=code / ?layout=agentLayout for this visit
?prompt=<text>&kind=appSends a prompt to the Agent once the runtime is ready. Removed right away, so reloading never resends it

Example: https://codevre.com/ide?layout=agent&kind=app&prompt=Markdown+notes+app

Docs