📁

Explorer

Workspace Navigation & Sidebar Panels

Glyph's workspace layout follows a familiar VS Code architecture — Activity Bar, Sidebar panels, tabbed editor pane, and integrated terminal dock. Built with React 19, Zustand state management, and Monaco Editor for a native desktop experience via Electron 35.

Monaco EditorReact 19ZustandElectron 35TypeScript 5.8
Back to Downloads← MCP Bridge

// File Structure

Project Tree

The Explorer panel renders a dynamic, recursive file tree with real-time updates via Chokidar. Files are opened by click, and the tree supports full CRUD through context menus.

EXPLORERGLYPH EDITOR
📁src/
📁main/
📄index.tsApp entry + IPC handlers
📁services/
📁engines/
📁mcp/
📄dragon-mcp-server.tsMCP server (8 tools)
📄activity-log.tsLive feed streamer
📁renderer/
📄App.tsxShell + titlebar
📁features/
📁state/Zustand stores
📁theme/Design tokens
📁preload/
📄package.json
📄EDITOR.md

// Sidebar

Five Panels

The Activity Bar on the left switches between five sidebar panels. Each panel is a self-contained feature with its own Zustand store and persistent state.

📄

Explorer Panel

Full file tree with expand/collapse, context menus, inline rename, and drag-to-open. Navigate your entire workspace without leaving the editor.

File TreeCRUD OperationsContext MenuInline Rename
🔍

Search Panel

Find in files across your entire workspace. Supports case sensitivity toggles, regex patterns, and file glob filters with highlighted matches.

RegexCase ToggleFile FiltersHighlighted Matches
🔀

Source Control

Git integration built into the sidebar. View branch status, staged and unstaged files, stage/unstage/discard changes, and commit — all inline.

Branch StatusStage/UnstageDiscardCommit
🧩

Extensions

View installed MCP engines and themes. Browse the marketplace preview, search for extensions, and manage your editor's capabilities.

MCP EnginesThemesMarketplaceSearch
⚙️

Settings

Full preferences UI — theme picker, editor font and tab size, word wrap, minimap, auto-save, terminal config. All settings persist to .dragon/settings.json.

Theme PickerEditor PrefsFile SettingsTerminal

// Editor Core

Built to Code

Professional editing powered by Monaco with custom DragonSource theming, reactive design tokens, and Electron-native window controls.

📝

Monaco Editor

Full Monaco-powered editing with syntax highlighting, IntelliSense, bracket matching, and minimap.

📑

Multi-Tab

Tabbed editor with drag reorder, pin tabs, dirty-state indicators, and tab overflow management.

🎨

Live Theming

Switch between DragonSource (orange/charcoal) and DigiFX (violet/navy) themes instantly — no reload.

📟

Status Bar

Language mode, cursor position, encoding, line ending, and workspace info at a glance.

🎯

Command Palette

⌘⇧P launches a VS Code-style command palette for every action in the editor.

🖥️

Integrated Terminal

Bottom dock terminal with configurable shell, font size, and cursor style.