11# ObjectStack Console
22
3- The standard runtime UI for ObjectStack applications. This package provides the " Console" interface that allows users to interact with objects and apps defined in the ObjectStack protocol .
3+ The standard runtime UI for ObjectStack applications. This package provides the ** Console** — a full-featured enterprise admin interface that renders from JSON metadata alone, requiring zero custom pages .
44
5- ## Features
6-
7- - ** Spec-Compliant** : Fully implements ObjectStack Spec v0.9.0
8- - ** Dynamic UI** : Renders Dashboards, Grids, and Forms based on JSON schemas
9- - ** Multi-App Support** : Switch between different apps defined in your stack
10- - ** Plugin Architecture** : Can be loaded as a static plugin in the ObjectStack Runtime
11- - ** Flexible Navigation** : Supports object, dashboard, page, url, and group navigation types
12- - ** App Branding** : Supports custom logos, colors, and theming per app
13- - ** Permission-Aware** : Respects app-level permission requirements
14-
15- ## ObjectStack Spec Compliance
5+ > ** Version:** 0.5.1   ; |  ; ** Spec:** @objectstack/spec v1.1.0   ; |  ; [ Full Roadmap →] ( ./CONSOLE_ROADMAP.md )
166
17- This console implements the following ObjectStack Spec features:
18-
19- ### AppSchema Support
20- - ✅ ` name ` , ` label ` , ` icon ` - Basic app metadata
21- - ✅ ` description ` , ` version ` - Optional app information
22- - ✅ ` homePageId ` - Custom landing page configuration
23- - ✅ ` requiredPermissions ` - Permission-based access control
24- - ✅ ` branding.logo ` - Custom app logo display
25- - ✅ ` branding.primaryColor ` - Custom theme color
26- - ✅ ` branding.favicon ` - App-specific favicon
27-
28- ### Navigation Support
29- - ✅ ` object ` - Navigate to object list views
30- - ✅ ` dashboard ` - Navigate to dashboards
31- - ✅ ` page ` - Navigate to custom pages
32- - ✅ ` url ` - External URL navigation with target support
33- - ✅ ` group ` - Nested navigation groups
34- - ✅ Navigation item visibility conditions
35- - ✅ Recursive navigation tree rendering
36-
37- ### Object Operations
38- - ✅ Create, Read, Update, Delete (CRUD)
39- - ✅ ObjectGrid with filtering and sorting
40- - ✅ ObjectForm with field type mapping
41- - ✅ Dynamic field rendering based on ObjectSchema
42-
43- ## Usage as a Plugin
44-
45- You can include the console in your ObjectStack Runtime server by installing this package and registering it as a static asset plugin.
46-
47- ``` typescript
48- import ConsolePlugin from ' @object-ui/console' ;
49-
50- // In your objectstack.config.ts
51- export default defineConfig ({
52- plugins: [
53- ConsolePlugin
54- ]
55- });
56- ```
7+ ## Features
578
58- The console will be available at ` / ` in your ObjectStack application.
9+ - ** Server-Driven UI** : Renders objects, views, dashboards, reports, and pages from JSON schemas
10+ - ** Multi-App Support** : Switch between apps defined in your stack, each with its own branding
11+ - ** Plugin Architecture** : 15+ view plugins (grid, kanban, calendar, timeline, chart, map, gantt, gallery, etc.)
12+ - ** Expression Engine** : Dynamic visibility, disabled, and hidden expressions evaluated at runtime
13+ - ** CRUD Operations** : Create, edit, delete records via schema-driven forms and dialogs
14+ - ** Command Palette** : ` ⌘+K ` for quick navigation across apps and objects
15+ - ** Dark/Light Theme** : System-aware theme with per-app branding (logo, colors, favicon)
16+ - ** Developer Tools** : Built-in metadata inspector for debugging schema definitions
5917
60- ## Development
18+ ## Quick Start
6119
6220``` bash
63- # Install dependencies
21+ # From the repository root
6422pnpm install
6523
66- # Start development server
24+ # Start development server (with MSW mock backend)
6725pnpm dev
6826
6927# Build for production
@@ -73,14 +31,63 @@ pnpm build
7331pnpm test
7432```
7533
34+ The console opens at ** http://localhost:5175 ** with a simulated backend (CRM + Todo + Kitchen Sink demo data).
35+
36+ ## ObjectStack Spec Compliance
37+
38+ ### AppSchema Support
39+ - ✅ ` name ` , ` label ` , ` icon ` — Basic app metadata
40+ - ✅ ` description ` , ` version ` — Optional app information
41+ - ✅ ` homePageId ` — Custom landing page configuration
42+ - ✅ ` requiredPermissions ` — Permission-based access control
43+ - ✅ ` branding.logo ` , ` branding.primaryColor ` , ` branding.favicon ` — App branding
44+
45+ ### Navigation Support
46+ - ✅ ` object ` — Navigate to object list views
47+ - ✅ ` dashboard ` — Navigate to dashboards
48+ - ✅ ` page ` — Navigate to custom pages
49+ - ✅ ` report ` — Navigate to reports
50+ - ✅ ` url ` — External URL navigation with target support
51+ - ✅ ` group ` — Nested navigation groups with collapse
52+ - ✅ ` visible ` / ` visibleOn ` — Expression-based visibility conditions
53+
54+ ### Object Operations
55+ - ✅ Multi-view switching (grid, kanban, calendar, timeline, chart, map, gantt, gallery)
56+ - ✅ Create / Read / Update / Delete via ObjectForm
57+ - ✅ Search, filter, sort across all view types
58+ - ✅ Record detail page and drawer preview
59+ - ✅ Metadata inspector for developers
60+
7661## Architecture
7762
78- The console is built on top of ObjectUI components:
79- - ` @object-ui/react ` - Core rendering engine
80- - ` @object-ui/components ` - Shadcn/UI components
81- - ` @object-ui/layout ` - App shell and layout components
82- - ` @object-ui/plugin-grid ` - Data grid component
83- - ` @object-ui/plugin-form ` - Form rendering component
63+ The console is a thin orchestration layer on top of the ObjectUI plugin system:
64+
65+ ```
66+ Console App
67+ ├── @object-ui/react — SchemaRenderer (JSON → Component)
68+ ├── @object-ui/components — Shadcn UI primitives
69+ ├── @object-ui/layout — AppShell, Sidebar
70+ ├── @object-ui/core — ExpressionEvaluator, ActionRunner
71+ ├── @object-ui/data-objectstack — API adapter (auto-reconnect, caching)
72+ ├── @object-ui/plugin-view — ObjectView (multi-view container)
73+ ├── @object-ui/plugin-form — ObjectForm (CRUD forms)
74+ ├── @object-ui/plugin-grid — DataGrid (AG Grid)
75+ ├── @object-ui/plugin-kanban — Kanban board
76+ ├── @object-ui/plugin-calendar— Calendar view
77+ ├── @object-ui/plugin-dashboard — Dashboard renderer
78+ ├── @object-ui/plugin-report — Report viewer/builder
79+ └── 8 more view plugins...
80+ ```
81+
82+ ## Documentation
83+
84+ | Document | Description |
85+ | ----------| -------------|
86+ | [ Console Roadmap] ( ./CONSOLE_ROADMAP.md ) | Full development plan with phases and timeline |
87+ | [ Getting Started Guide] ( ../../content/docs/guide/console.md ) | User-facing documentation |
88+ | [ Architecture Guide] ( ../../content/docs/guide/console-architecture.md ) | Technical deep-dive |
89+ | [ Development Plan] ( ./DEVELOPMENT_PLAN.md ) | Completed phases 1-10 |
90+ | [ Next Steps] ( ./NEXT_STEPS.md ) | Tactical next tasks |
8491
8592## License
8693
0 commit comments