Tabs & Panes
Dinotty's layout system unifies four pane types -- terminal, file editor, plugin, web preview -- all of which support drag-split, cross-tab drag, and extract-to-tab.
Tab Operations
| Action | Shortcut |
|---|---|
| New tab | Cmd + T (Ctrl + T on Windows/Linux) |
| From template | Cmd + Shift + T (Ctrl + Shift + T on Windows/Linux) |
| Close current tab | Cmd + W |
| Next / previous tab | Cmd + Shift + ] / [ |
| Jump to tab N | Cmd + <N> (e.g., Cmd + 3) |
| Rename tab | Double-click the tab title |
Tab order is persisted per workspace and restored on page refresh; drag-reordering tabs syncs live to every connected device.
Splits
| Action | macOS | Windows/Linux |
|---|---|---|
| Horizontal split (new pane on the right) | Cmd + \ | Ctrl + \ |
| Vertical split (new pane below) | Cmd + Shift + \ | Ctrl + Shift + \ |
| Next / previous pane | Cmd + Shift + ] / [ | Ctrl + Shift + ] / [ |
| Maximize / restore current pane | Cmd + Shift + Enter | Ctrl + Shift + Enter |
| Equalize all panes | Cmd + = | Ctrl + = |
| Close current pane | Cmd + W (when focused on pane) | Ctrl + W |
Drag-and-drop Splits
Beyond shortcuts, you can drag with the mouse:
- Drag pane title bar: hold and drop into a target region (top/bottom/left/right half, or center to overlay)
- Drag tab into a pane: drag a tab from the tab bar onto a pane to convert it into that pane's content
- Drag to screen edge: auto-snaps to half-screen
A drop indicator shows the placement target during drag.
Cross-tab Drag
Drag a pane from the current tab to another tab:
- Hold the pane title bar to start dragging
- Hover over the target tab for ~0.5s, the target tab auto-activates
- After it switches, continue dragging into the target pane region and release
You can also drop a pane onto empty space in the tab bar to extract it as a new tab.
Layout Templates
Complex split layouts can be saved as templates for reuse:
- Save: current tab's split layout -> toolbar "Save as Template" button -> name it
- Apply: pick a template when creating a new tab, or apply onto an existing tab
- Manage: view/edit/delete saved templates in the settings panel
A template captures pane types (terminal/file/plugin/web), relative sizes, and associated SSH connections (if any).
Phase 5 pending
The template management UI (Phase 5) is not yet finished; templates currently can only be managed via the save/apply flow. See Layout Templates Design.
Pane Types
| Type | Description |
|---|---|
| Terminal | Default pane, runs shell / coding agent |
| File editor | Monaco-based editor, see File Editor |
| Plugin | Vue 3 rendered plugin UI, see Plugins |
| Web preview | Built-in reverse proxy + iframe, see Web Preview |
All four pane types share the same split/drag/tab rules.
Multi-cursor & Cursor Group
- Monaco native multi-cursor: multi-cursor editing within a single file, see File Editor
- Cursor Group: cross-file / cross-split broadcast of cursor position, used for multi-device collaborative editing
Next Steps
- File Editor - Monaco editing features in detail
- Web Preview - Built-in web preview pane
- Workspace Management - Multi-workspace isolation