|
5 | 5 | > **Spec Version:** @objectstack/spec v3.0.9 |
6 | 6 | > **Client Version:** @objectstack/client v3.0.9 |
7 | 7 | > **Target UX Benchmark:** 🎯 Airtable parity |
8 | | -> **Current Priority:** AppShell Navigation · Designer Interaction · View Config Live Preview Sync · Dashboard Config Panel · Airtable UX Polish |
| 8 | +> **Current Priority:** AppShell Navigation · Designer Interaction · View Config Live Preview Sync · Dashboard Config Panel · Airtable UX Polish · **Flow Designer ✅** |
9 | 9 |
|
10 | 10 | --- |
11 | 11 |
|
12 | 12 | ## 📋 Executive Summary |
13 | 13 |
|
14 | 14 | ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind + Shadcn. It renders JSON metadata from the @objectstack/spec protocol into pixel-perfect, accessible, and interactive enterprise interfaces. |
15 | 15 |
|
16 | | -**Where We Are:** Foundation is **solid and shipping** — 35 packages, 91+ components, 5,110+ tests, 78 Storybook stories, 42/42 builds passing, ~85% protocol alignment. SpecBridge, Expression Engine, Action Engine, data binding, all view plugins (Grid/Kanban/Calendar/Gantt/Timeline/Map/Gallery), Record components, Report engine, Dashboard BI features, mobile UX, i18n (11 locales), WCAG AA accessibility, Designer Phase 1 (ViewDesigner drag-to-reorder ✅), Console through Phase 20 (L3), and **AppShell Navigation Renderer** (P0.1) — all ✅ complete. |
| 16 | +**Where We Are:** Foundation is **solid and shipping** — 35 packages, 91+ components, 5,110+ tests, 78 Storybook stories, 42/42 builds passing, ~85% protocol alignment. SpecBridge, Expression Engine, Action Engine, data binding, all view plugins (Grid/Kanban/Calendar/Gantt/Timeline/Map/Gallery), Record components, Report engine, Dashboard BI features, mobile UX, i18n (11 locales), WCAG AA accessibility, Designer Phase 1 (ViewDesigner drag-to-reorder ✅), Console through Phase 20 (L3), **AppShell Navigation Renderer** (P0.1), and **Flow Designer** (P2.4) — all ✅ complete. |
17 | 17 |
|
18 | 18 | **What Remains:** The gap to **Airtable-level UX** is primarily in: |
19 | 19 | 1. ~~**AppShell** — No dynamic navigation renderer from spec JSON (last P0 blocker)~~ ✅ Complete |
@@ -303,15 +303,56 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind |
303 | 303 |
|
304 | 304 | ## 🧩 P2 — Polish & Advanced Features |
305 | 305 |
|
| 306 | +### P2.0 Flow Designer ✅ |
| 307 | + |
| 308 | +> **Status:** Complete — `FlowDesigner` component shipped in `@object-ui/plugin-workflow`. |
| 309 | +
|
| 310 | +The `FlowDesigner` is a canvas-based flow editor that bridges the gap between the approval-focused `WorkflowDesigner` and the BPMN-heavyweight `ProcessDesigner`. It targets automation/integration flows with spec v3.0.9 types. |
| 311 | + |
| 312 | +**Core Canvas:** |
| 313 | +- [x] Drag-to-reposition nodes on SVG canvas |
| 314 | +- [x] Undo/redo with keyboard shortcuts (`Ctrl+Z` / `Ctrl+Y`) |
| 315 | +- [x] Ctrl+S save shortcut with `onSave` callback |
| 316 | +- [x] Zoom in/out/reset controls |
| 317 | +- [x] Edge creation by clicking source → target connection ports |
| 318 | +- [x] Node deletion via delete button or `Delete` key |
| 319 | + |
| 320 | +**Node Types (spec v3.0.9):** |
| 321 | +- [x] Standard nodes: `start`, `end`, `task`, `user_task`, `service_task`, `script_task`, `approval`, `condition` |
| 322 | +- [x] Gateway nodes: `parallel_gateway`, `join_gateway` |
| 323 | +- [x] Event nodes: `boundary_event`, `delay`, `notification`, `webhook` |
| 324 | + |
| 325 | +**Edges (spec v3.0.9):** |
| 326 | +- [x] Edge types: `default`, `conditional`, `timeout` |
| 327 | +- [x] Conditional edges with `condition` expression field |
| 328 | +- [x] `isDefault` flag for default/fallthrough edge marking |
| 329 | +- [x] Visual differentiation: dashed lines for conditional, dotted for default |
| 330 | + |
| 331 | +**Property Panel:** |
| 332 | +- [x] Node property editor: label, type, description |
| 333 | +- [x] Node executor configuration: `FlowNodeExecutorDescriptor` (type, `inputSchema`, `outputSchema`, `timeoutMs`, retry policy) |
| 334 | +- [x] Wait event config for delay nodes: `FlowWaitEventType` (condition/manual/webhook/timer/signal) |
| 335 | +- [x] Boundary event config: `FlowBoundaryConfig` (`attachedToNodeId`, `eventType`, `cancelActivity`, `timer`, `errorCode`) |
| 336 | +- [x] Edge property editor: label, type, condition expression, `isDefault` toggle |
| 337 | + |
| 338 | +**Spec v3.0.9 Protocol Features:** |
| 339 | +- [x] `FlowVersionEntry[]` version history panel with current/previous entries |
| 340 | +- [x] `FlowConcurrencyPolicy` badge display (allow/forbid/replace/queue) |
| 341 | +- [x] `FlowExecutionStep[]` execution monitoring overlay with per-node status icons |
| 342 | +- [x] `FlowBpmnInteropResult` BPMN XML export with warning/error reporting |
| 343 | + |
| 344 | +**ComponentRegistry:** |
| 345 | +- [x] Registered as `'flow-designer'` with all inputs documented |
| 346 | + |
306 | 347 | ### P2.1 Designer — Remaining Interaction (Post-v1.0) |
307 | 348 |
|
308 | 349 | - [ ] PageDesigner: Component drag-to-reorder and drag-to-position |
309 | 350 | - [ ] ProcessDesigner: Node drag-to-move |
310 | | -- [ ] ProcessDesigner: Support v3.0.9 node types (`parallel_gateway`, `join_gateway`, `boundary_event`) |
311 | | -- [ ] ProcessDesigner: Support v3.0.9 conditional edges and default edge marking |
| 351 | +- [x] ProcessDesigner/FlowDesigner: Support v3.0.9 node types (`parallel_gateway`, `join_gateway`, `boundary_event`) — implemented in FlowDesigner |
| 352 | +- [x] ProcessDesigner/FlowDesigner: Support v3.0.9 conditional edges and default edge marking — implemented in FlowDesigner |
312 | 353 | - [ ] ReportDesigner: Element drag-to-reposition within sections |
313 | | -- [ ] Edge creation UI in ProcessDesigner (click source → click target) |
314 | | -- [ ] Property editing for node labels/types in ProcessDesigner |
| 354 | +- [x] FlowDesigner: Edge creation UI (click source port → click target port) |
| 355 | +- [x] FlowDesigner: Property editing for node labels/types + executor config + boundary config |
315 | 356 | - [ ] Confirmation dialogs for ProcessDesigner destructive actions |
316 | 357 |
|
317 | 358 | ### P2.2 Designer — Advanced Features |
@@ -342,11 +383,17 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind |
342 | 383 | - [ ] `@object-ui/components`: ErrorBoundary wrapper per component |
343 | 384 | - [ ] `@object-ui/fields`: Inline validation message rendering |
344 | 385 | - [ ] `@object-ui/plugin-charts`: Drill-down click handler for chart segments |
345 | | -- [ ] `@object-ui/plugin-workflow`: React Flow integration for production canvas |
346 | | -- [ ] `@object-ui/plugin-workflow`: Support v3.0.9 BPMN interop types (`BpmnElementMapping`, `BpmnDiagnostic`, `BpmnVersion`) |
347 | | -- [ ] `@object-ui/plugin-workflow`: Support v3.0.9 node executor descriptors (`NodeExecutorDescriptor`, `WAIT_EXECUTOR_DESCRIPTOR`) |
348 | | -- [ ] `@object-ui/plugin-workflow`: Support v3.0.9 `inputSchema`/`outputSchema` on flow nodes |
349 | | -- [ ] `@object-ui/plugin-workflow`: Support v3.0.9 `boundaryConfig` for boundary event nodes |
| 386 | +- [x] `@object-ui/plugin-workflow`: **FlowDesigner** — canvas-based flow editor (`flow-designer` component) with drag-to-reposition nodes, edge creation UI, undo/redo, Ctrl+S save, property panel, and BPMN export |
| 387 | +- [x] `@object-ui/plugin-workflow`: Support v3.0.9 BPMN interop types — `FlowBpmnInteropResult` with `bpmnXml` export, `nodeCount`, `edgeCount`, `warnings` |
| 388 | +- [x] `@object-ui/plugin-workflow`: Support v3.0.9 node executor descriptors — `FlowNodeExecutorDescriptor` with `inputSchema`, `outputSchema`, wait event config, retry policy |
| 389 | +- [x] `@object-ui/plugin-workflow`: Support v3.0.9 `inputSchema`/`outputSchema` on flow nodes via `FlowNodeExecutorDescriptor` |
| 390 | +- [x] `@object-ui/plugin-workflow`: Support v3.0.9 `boundaryConfig` for boundary event nodes — `FlowBoundaryConfig` with `attachedToNodeId`, `eventType`, `cancelActivity`, `timer`, `errorCode` |
| 391 | +- [x] `@object-ui/plugin-workflow`: Support v3.0.9 node types — `parallel_gateway`, `join_gateway`, `boundary_event` in `FlowNodeType` |
| 392 | +- [x] `@object-ui/plugin-workflow`: Support v3.0.9 conditional edges — `FlowEdge.type = 'conditional'` + `isDefault` flag |
| 393 | +- [x] `@object-ui/plugin-workflow`: Support v3.0.9 `FlowVersionHistory` — `FlowVersionEntry[]` with version number, author, changeNote, isCurrent |
| 394 | +- [x] `@object-ui/plugin-workflow`: Support v3.0.9 `ConcurrencyPolicy` — `FlowConcurrencyPolicy` (allow/forbid/replace/queue) |
| 395 | +- [x] `@object-ui/plugin-workflow`: Support v3.0.9 `WaitEventType` — `FlowWaitEventType` (condition/manual/webhook/timer/signal) |
| 396 | +- [x] `@object-ui/plugin-workflow`: Support v3.0.9 execution tracking — `FlowExecutionStep` with status overlay on nodes |
350 | 397 | - [ ] `@object-ui/plugin-ai`: Configurable AI endpoint adapter (OpenAI, Anthropic) |
351 | 398 | - [ ] Navigation `width` property: apply to drawer/modal overlays across all plugins |
352 | 399 | - [ ] Navigation `view` property: specify target form/view on record click across all plugins |
|
0 commit comments