A modular, extensible IDE framework built with React, shadcn-ui, and the @infra/* core packages.
Qu is designed as both a functional editor and a real-world validation environment for the @infra package ecosystem. It features a pluggable architecture with declarative extensions, a dockable layout system, and deep integration with terminals, Git, and Monaco Editor.
- Modular layout — Dockable sidebar, tab groups, floating windows, and split panels powered by
@infra/layout-react - Extension system — Declarative extension manifests with contribution points and lifecycle management
- Monaco Editor — Multi-tab code editing with minimap, word wrap, and full IntelliSense support
- Integrated terminal — xterm.js-based terminal with WebSocket backend connection
- Command palette — Fuzzy command search with keyboard-driven workflow
- File explorer — Tree view with context menus and drag-and-drop
- Git integration — Status indicators, branch display, and source control panel
- Search — Global file search across the workspace
- Themeable — Dark/light theme support with CSS custom properties
- Session persistence — Workspace state, open editors, and layout restored across sessions
- Node.js >= 20.0.0
- npm or a compatible package manager
npm installStart both the backend server and the Vite dev server:
npm run devThis runs the API server on port 4787 and the web UI on port 5173 with a proxy in between.
For the web UI only:
npm run dev:webFor the backend server only:
npm run dev:servernpm run buildOutput goes to dist/.
npm test # Run unit tests (vitest)
npm run test:watch # Watch mode
npm run test:e2e # Playwright end-to-end testsnpm run lint
npm run formatsrc/
App.tsx # Root layout and surface registration
framework/ # Layout framework setup (organizations, renderers)
modules/ # Feature modules (editor, terminal, file-explorer, ...)
services/ # Core services (commands, keys, extensions, sessions, ...)
hooks/ # Shared React hooks
styles/ # Global CSS and Tailwind theme tokens
themes/ # Theme definitions
types/ # Shared TypeScript types
utils/ # Utility functions
- View / Surface — The presentation layer is driven by
@infra/presentation-react. Views are named content regions; surfaces are overlay containers (dialogs, notifications, floating windows). - Layout Organizations —
qu.side-stackandqu.tab-groupsdefine how containers are rendered in the layout tree. - Extension Points — Extensions register contributions against named points. The runtime resolves, activates, and deactivates extensions based on manifest declarations.
- Action Routing —
ActionServiceprovides a unified entry point for user interactions (clicks, keybindings) and dispatches to the appropriate service.
A separate Node.js backend in server/ provides:
- Workspace file I/O (
/api/workspace/*) - Terminal WebSocket connection (
/ws/terminal) - Extension catalog and resolution (
/api/extensions/*)
| Layer | Technology |
|---|---|
| UI Framework | React 19 |
| Component Library | shadcn-ui (Radix UI primitives) |
| Styling | Tailwind CSS 3 |
| Code Editor | Monaco Editor |
| Terminal | xterm.js |
| State | Zustand + Immer |
| Build | Vite 5 |
| Language | TypeScript 5 (strict) |
| Testing | Vitest + React Testing Library + Playwright |
| Backend | Node.js + WebSocket |
Create and manage extensions via the DevKit CLI:
npm run frag create <extension-id>
npm run frag pack <extension-dir>
npm run frag install <bundle-or-manifest>See DevKit/README.md for details.
This project is under active development. The core @infra/* packages are not yet open-sourced — type stubs are provided in vendor/@infra/ for compilation. Tests that depend on runtime implementations from those packages will be restored once the packages are available.
TBD