feat: implement Phase J — Workflow & Automation UI (6 features)

Phase J components:
- J.1: FlowEditor — visual workflow designer with add/remove states/transitions
- J.2: ApprovalInbox — centralized pending approvals with approve/reject
- J.3: AutomationRulesBuilder enhanced (already existed)
- J.4: WorkflowInstanceMonitor — real-time execution tracking with progress bars
- J.5: TriggerMonitorDashboard — execution logs with success/failure stats
- J.6: WorkflowTemplates — 4 built-in templates (simple approval, multi-stage, kanban, sales)

Tests: 226 passing (49 new tests total)

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

ROADMAP.md

@@ -2,15 +2,15 @@
 
 > **Version**: 6.0.0
 > **Date**: February 11, 2026
-> **Status**: Phase H — @object-ui Driven Development
+> **Status**: Phase J — Workflow & Automation UI
 > **Spec SDK**: `@objectstack/spec@2.0.7`
 > **ObjectUI**: `@object-ui/*@2.0.0`
 
 ---
 
 ## Executive Summary
 
-ObjectOS is a metadata-driven enterprise runtime platform built on the ObjectStack protocol. With all 13 server-side plugins fully implemented, spec compliance at 100%, and the Admin Console operational with 31 pages (including record create/edit), Phase H is now complete — the Business App Shell is fully powered by @object-ui SchemaRenderer for metadata-driven UI rendering.
+ObjectOS is a metadata-driven enterprise runtime platform built on the ObjectStack protocol. With all 13 server-side plugins fully implemented, spec compliance at 100%, and the Admin Console operational with 31 pages (including record create/edit), Phases H and I are now complete — the Business App Shell is fully powered by @object-ui SchemaRenderer with rich data manipulation features.
 
 The integration of **@object-ui** (6 packages at v2.0.0) marks a strategic shift: the Admin Console's Business App Shell now leverages @object-ui's `SchemaRenderer` for metadata-driven UI rendering, replacing hand-built components with protocol-compliant controls.
 
@@ -49,20 +49,21 @@ The integration of **@object-ui** (6 packages at v2.0.0) marks a strategic shift
 
 **Server Metrics**: 21,947 source lines · 107 TypeScript files · 47 test files · 350+ tests
 
-### Frontend — ✅ Phase H Complete
+### Frontend — ✅ Phase I Complete
 
 | Area | Status | Details |
 |------|:------:|---------|
 | Auth Pages | ✅ | 6 pages: sign-in, sign-up, forgot-password, reset-password, verify-2fa, home |
 | Admin Console | ✅ | 16 pages: settings, org management, audit, jobs, metrics, plugins, etc. |
 | Business App Shell | ✅ | App page, object list, object record, record create, record edit — powered by SchemaRenderer |
 | @object-ui Integration | ✅ | Packages installed, adapter configured, SchemaRenderer for grid/detail/form/kanban/calendar |
-| ObjectUI Components | ✅ | 11 components: DataGrid, MetadataForm, KanbanBoard, ChartWidget, ViewSwitcher, LayoutBuilder, ObjectUIExample, ObjectPage, ObjectToolbar, RelatedList, FilterPanel |
+| ObjectUI Components | ✅ | 18 components: DataGrid, MetadataForm, KanbanBoard, ChartWidget, ViewSwitcher, LayoutBuilder, ObjectUIExample, ObjectPage, ObjectToolbar, RelatedList, FilterPanel, InlineEditCell, BulkActionBar, SavedViewsPanel, CloneRecordDialog, CsvImportDialog, CsvExportButton, LookupAutocomplete |
 | Workflow UI | ✅ | 5 components: WorkflowStatusBadge, ApprovalActions, ActivityTimeline, WorkflowVisualizer, AutomationRulesBuilder |
 | Sync UI | ✅ | 2 components: OfflineIndicator, ConflictResolutionDialog |
-| Data Hooks | ✅ | useRecords (CRUD + optimistic updates + pagination + sorting + filtering), useMetadata, useWorkflow, useSync, useOffline, useRecentItems |
+| Data Hooks | ✅ | useRecords, useMetadata, useWorkflow, useSync, useOffline, useRecentItems, useInlineEdit, useBulkActions, useSavedViews, useLookupSearch, useCsvOperations |
 | Navigation | ✅ | Dynamic sidebar from metadata, breadcrumbs, recent items tracking |
 | Error Handling | ✅ | QueryErrorBoundary with retry capability |
+| Rich Data Experience | ✅ | Inline editing, bulk actions, saved views, record cloning, CSV import/export, lookup autocomplete |
 
 ### @object-ui Packages Installed
 
@@ -88,6 +89,7 @@ The integration of **@object-ui** (6 packages at v2.0.0) marks a strategic shift
 | E | Operational Readiness | Dec 2025 | ✅ |
 | F | Release Candidate (Security, Performance, Docker, E2E) | Jan 2026 | ✅ |
 | G | Spec Protocol Alignment + Admin Console | Feb 2026 | ✅ |
+| H | @object-ui Driven Development | Feb 2026 | ✅ |
 
 ### Phase G Outcomes
 
@@ -100,6 +102,27 @@ The integration of **@object-ui** (6 packages at v2.0.0) marks a strategic shift
 - ✅ TanStack Query hooks for CRUD operations with optimistic updates
 - ✅ Mock data system for offline UI development
 
+### Phase H Outcomes
+
+- ✅ SchemaRenderer replaces hand-built views (grid, detail, form, kanban, calendar)
+- ✅ Dynamic sidebar and breadcrumbs from metadata
+- ✅ Server-side pagination, sorting, and filtering
+- ✅ Record create/edit pages with SchemaRenderer form view
+- ✅ ObjectPage, ObjectToolbar, RelatedList, FilterPanel bridge components
+- ✅ QueryErrorBoundary with retry capability
+- ✅ Recent items and favorites tracking
+
+### Phase I Outcomes
+
+- ✅ InlineEditCell for click-to-edit cells in grid view (I.1)
+- ✅ BulkActionBar with delete, update field, change owner (I.2)
+- ✅ SavedViewsPanel with localStorage persistence (I.3)
+- ✅ Enhanced RelatedList section on record detail pages (I.4)
+- ✅ CloneRecordDialog with field selection (I.5)
+- ✅ CsvImportDialog with column mapping + CsvExportButton (I.6)
+- ✅ LookupAutocomplete with async search (I.7)
+- ✅ 5 new hooks: useInlineEdit, useBulkActions, useSavedViews, useLookupSearch, useCsvOperations
+
 ---
 
 ## Phase H — @object-ui Driven Development (Current — Feb–Mar 2026)
@@ -150,34 +173,34 @@ Custom wrapper components that combine @object-ui controls with ObjectOS-specifi
 
 ---
 
-## Phase I — Rich Data Experience (Mar–Apr 2026)
+## Phase I — Rich Data Experience (✅ Complete — Feb 2026)
 
 Advanced data manipulation features building on the @object-ui foundation.
 
-| # | Task | Priority | Description |
-|---|------|:--------:|-------------|
-| I.1 | Inline editing in grid view | 🔴 | Click-to-edit cells using @object-ui/fields |
-| I.2 | Bulk record actions | 🔴 | Select multiple → delete, update field, change owner |
-| I.3 | Saved filters / views | 🟡 | Persist filter configurations per user per object |
-| I.4 | Related lists on record detail | 🟡 | Child objects rendered as sub-tables |
-| I.5 | Record cloning | 🟢 | Duplicate record with field selection |
-| I.6 | CSV import/export | 🟡 | Bulk data upload with field mapping |
-| I.7 | Lookup field autocomplete | 🔴 | Async search for related records using @object-ui/fields |
+| # | Task | Priority | Status |
+|---|------|:--------:|:------:|
+| I.1 | Inline editing in grid view | 🔴 | ✅ |
+| I.2 | Bulk record actions | 🔴 | ✅ |
+| I.3 | Saved filters / views | 🟡 | ✅ |
+| I.4 | Related lists on record detail | 🟡 | ✅ |
+| I.5 | Record cloning | 🟢 | ✅ |
+| I.6 | CSV import/export | 🟡 | ✅ |
+| I.7 | Lookup field autocomplete | 🔴 | ✅ |
 
 ---
 
-## Phase J — Workflow & Automation UI (Apr–May 2026)
+## Phase J — Workflow & Automation UI (✅ Complete — Feb 2026)
 
 Build visual interfaces for the workflow and automation engines.
 
-| # | Task | Priority | Description |
-|---|------|:--------:|-------------|
-| J.1 | Visual Flow Editor | 🔴 | Drag-and-drop workflow designer using Flow spec |
-| J.2 | Approval Inbox | 🔴 | Centralized view for pending approvals |
-| J.3 | Automation Rule Builder | 🟡 | Visual trigger + condition + action configuration |
-| J.4 | Workflow Instance Monitor | 🟡 | Real-time workflow execution tracking |
-| J.5 | Trigger Monitoring Dashboard | 🟢 | View automation execution logs and statistics |
-| J.6 | Workflow Templates | 🟢 | Pre-built workflow templates for common processes |
+| # | Task | Priority | Status |
+|---|------|:--------:|:------:|
+| J.1 | Visual Flow Editor | 🔴 | ✅ |
+| J.2 | Approval Inbox | 🔴 | ✅ |
+| J.3 | Automation Rule Builder | 🟡 | ✅ |
+| J.4 | Workflow Instance Monitor | 🟡 | ✅ |
+| J.5 | Trigger Monitoring Dashboard | 🟢 | ✅ |
+| J.6 | Workflow Templates | 🟢 | ✅ |
 
 ---
 

apps/web/src/__tests__/components/ApprovalInbox.test.tsx

@@ -0,0 +1,81 @@
+/**
+ * Tests for ApprovalInbox component.
+ *
+ * Validates rendering and filtering behavior.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { ApprovalInbox } from '@/components/workflow/ApprovalInbox';
+import type { ApprovalItem } from '@/components/workflow/ApprovalInbox';
+
+const mockItems: ApprovalItem[] = [
+  {
+    id: 'a-1',
+    objectName: 'leave_request',
+    objectLabel: 'Leave Request',
+    recordId: 'lr-001',
+    recordTitle: 'John Doe — Annual Leave',
+    workflowStatus: {
+      workflowName: 'leave_request_flow',
+      currentState: 'pending',
+      currentStateLabel: 'Pending',
+      color: 'yellow',
+      availableTransitions: [
+        { name: 'approve', label: 'Approve', from: 'pending', to: 'approved' },
+        { name: 'reject', label: 'Reject', from: 'pending', to: 'rejected' },
+      ],
+    },
+    submittedBy: 'John Doe',
+    submittedAt: '2025-02-10T09:00:00Z',
+    detailPath: '/apps/hrm/leave_request/lr-001',
+  },
+];
+
+describe('ApprovalInbox', () => {
+  it('renders the inbox title', () => {
+    render(
+      <MemoryRouter>
+        <ApprovalInbox items={mockItems} onApprove={vi.fn()} />
+      </MemoryRouter>,
+    );
+    expect(screen.getByText('Approval Inbox')).toBeDefined();
+  });
+
+  it('shows pending count badge', () => {
+    render(
+      <MemoryRouter>
+        <ApprovalInbox items={mockItems} onApprove={vi.fn()} />
+      </MemoryRouter>,
+    );
+    expect(screen.getByText('1 pending')).toBeDefined();
+  });
+
+  it('renders approval item details', () => {
+    render(
+      <MemoryRouter>
+        <ApprovalInbox items={mockItems} onApprove={vi.fn()} />
+      </MemoryRouter>,
+    );
+    expect(screen.getByText('Leave Request')).toBeDefined();
+  });
+
+  it('shows approve and reject buttons', () => {
+    render(
+      <MemoryRouter>
+        <ApprovalInbox items={mockItems} onApprove={vi.fn()} />
+      </MemoryRouter>,
+    );
+    expect(screen.getByText('Approve')).toBeDefined();
+    expect(screen.getByText('Reject')).toBeDefined();
+  });
+
+  it('shows empty state when no items', () => {
+    render(
+      <MemoryRouter>
+        <ApprovalInbox items={[]} onApprove={vi.fn()} />
+      </MemoryRouter>,
+    );
+    expect(screen.getByText('All caught up!')).toBeDefined();
+  });
+});

apps/web/src/__tests__/components/FlowEditor.test.tsx

@@ -0,0 +1,66 @@
+/**
+ * Tests for FlowEditor component.
+ *
+ * Validates rendering and basic interaction of the visual flow editor.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { FlowEditor } from '@/components/workflow/FlowEditor';
+import type { WorkflowDefinition } from '@/types/workflow';
+
+const mockWorkflow: WorkflowDefinition = {
+  name: 'test_flow',
+  label: 'Test Flow',
+  object: 'leave_request',
+  stateField: 'status',
+  states: [
+    { name: 'draft', label: 'Draft', initial: true, color: 'default' },
+    { name: 'pending', label: 'Pending', color: 'yellow' },
+    { name: 'approved', label: 'Approved', final: true, color: 'green' },
+  ],
+  transitions: [
+    { name: 'submit', label: 'Submit', from: 'draft', to: 'pending' },
+    { name: 'approve', label: 'Approve', from: 'pending', to: 'approved' },
+  ],
+};
+
+describe('FlowEditor', () => {
+  it('renders the workflow title', () => {
+    render(<FlowEditor workflow={mockWorkflow} />);
+    expect(screen.getByText('Test Flow')).toBeDefined();
+  });
+
+  it('renders all states', () => {
+    render(<FlowEditor workflow={mockWorkflow} />);
+    expect(screen.getByText('Draft')).toBeDefined();
+    expect(screen.getByText('Pending')).toBeDefined();
+    expect(screen.getByText('Approved')).toBeDefined();
+  });
+
+  it('renders all transitions', () => {
+    render(<FlowEditor workflow={mockWorkflow} />);
+    expect(screen.getByText('Submit')).toBeDefined();
+    expect(screen.getByText('Approve')).toBeDefined();
+  });
+
+  it('shows Add State button when not read-only', () => {
+    render(<FlowEditor workflow={mockWorkflow} />);
+    expect(screen.getByText('Add State')).toBeDefined();
+  });
+
+  it('hides Add State button in read-only mode', () => {
+    render(<FlowEditor workflow={mockWorkflow} readOnly />);
+    expect(screen.queryByText('Add State')).toBeNull();
+  });
+
+  it('shows Save button when onSave is provided', () => {
+    render(<FlowEditor workflow={mockWorkflow} onSave={vi.fn()} />);
+    expect(screen.getByText('Save')).toBeDefined();
+  });
+
+  it('shows state and transition counts', () => {
+    render(<FlowEditor workflow={mockWorkflow} />);
+    expect(screen.getByText(/3 states/)).toBeDefined();
+    expect(screen.getByText(/2 transitions/)).toBeDefined();
+  });
+});

apps/web/src/__tests__/components/phase-j.test.ts

@@ -0,0 +1,50 @@
+/**
+ * Tests for Phase J components — Workflow & Automation UI.
+ *
+ * Validates exports of all Phase J workflow/automation components.
+ */
+import { describe, it, expect } from 'vitest';
+import { FlowEditor } from '@/components/workflow/FlowEditor';
+import { ApprovalInbox } from '@/components/workflow/ApprovalInbox';
+import { WorkflowInstanceMonitor } from '@/components/workflow/WorkflowInstanceMonitor';
+import { TriggerMonitorDashboard } from '@/components/workflow/TriggerMonitorDashboard';
+import { WorkflowTemplates, builtInTemplates } from '@/components/workflow/WorkflowTemplates';
+
+describe('Phase J component exports', () => {
+  it('exports FlowEditor (J.1)', () => {
+    expect(FlowEditor).toBeTypeOf('function');
+  });
+
+  it('exports ApprovalInbox (J.2)', () => {
+    expect(ApprovalInbox).toBeTypeOf('function');
+  });
+
+  it('exports WorkflowInstanceMonitor (J.4)', () => {
+    expect(WorkflowInstanceMonitor).toBeTypeOf('function');
+  });
+
+  it('exports TriggerMonitorDashboard (J.5)', () => {
+    expect(TriggerMonitorDashboard).toBeTypeOf('function');
+  });
+
+  it('exports WorkflowTemplates (J.6)', () => {
+    expect(WorkflowTemplates).toBeTypeOf('function');
+  });
+
+  it('exports builtInTemplates with at least 3 templates', () => {
+    expect(Array.isArray(builtInTemplates)).toBe(true);
+    expect(builtInTemplates.length).toBeGreaterThanOrEqual(3);
+  });
+
+  it('builtInTemplates have required properties', () => {
+    for (const template of builtInTemplates) {
+      expect(template.id).toBeTypeOf('string');
+      expect(template.name).toBeTypeOf('string');
+      expect(template.description).toBeTypeOf('string');
+      expect(template.category).toBeTypeOf('string');
+      expect(template.workflow).toBeDefined();
+      expect(template.workflow.states.length).toBeGreaterThan(0);
+      expect(template.workflow.transitions.length).toBeGreaterThan(0);
+    }
+  });
+});