Merge pull request #247 from objectstack-ai/copilot/complete-all-development

Author: hotlong

DEVELOPMENT_PLAN.md

@@ -554,16 +554,16 @@ The microkernel architecture (`@objectstack/runtime`) provides:
 
 ### 7.3 Current Phase
 
-#### Phase H — @object-ui Driven Development 🔄 IN PROGRESS
+#### Phase H — @object-ui Driven Development ✅ COMPLETE
 
 > See [ROADMAP.md](./ROADMAP.md) for full Phase H breakdown.
 
 | # | Task | Priority | Status |
 |---|------|:--------:|:------:|
-| H.1 | SchemaRenderer integration for business pages | 🔴 | 🔲 |
-| H.2 | Metadata-driven navigation | 🔴 | 🔲 |
-| H.3 | API client completion (remove mock data reliance) | 🔴 | 🔲 |
-| H.4 | @object-ui / @objectos bridge components | 🟡 | 🔲 |
+| H.1 | SchemaRenderer integration for business pages | 🔴 | ✅ |
+| H.2 | Metadata-driven navigation | 🔴 | ✅ |
+| H.3 | API client completion (remove mock data reliance) | 🔴 | ✅ |
+| H.4 | @object-ui / @objectos bridge components | 🟡 | ✅ |
 
 ---
 
@@ -923,30 +923,30 @@ states:
 | G.5 | @objectstack/* packages upgrade to v2.0.7 | 🔴 | ✅ |
 | G.6 | Consolidate development plan documents | 🟡 | ✅ |
 
-### 12.3 Phase H — @object-ui Driven Development (Current — February–March 2026)
+### 12.3 Phase H — @object-ui Driven Development (Complete — February 2026)
 
 | # | Task | Priority | Status |
 |---|------|:--------:|:------:|
-| H.1 | SchemaRenderer integration for business pages (grid/form/detail) | 🔴 | 🔲 |
-| H.2 | Metadata-driven navigation | 🔴 | 🔲 |
-| H.3 | API client completion (remove mock data reliance) | 🔴 | 🔲 |
-| H.4 | @object-ui / @objectos bridge components (ObjectPage, ObjectToolbar) | 🟡 | 🔲 |
+| H.1 | SchemaRenderer integration for business pages (grid/form/detail/kanban/calendar) | 🔴 | ✅ |
+| H.2 | Metadata-driven navigation | 🔴 | ✅ |
+| H.3 | API client completion (remove mock data reliance) | 🔴 | ✅ |
+| H.4 | @object-ui / @objectos bridge components (ObjectPage, ObjectToolbar, RelatedList, FilterPanel) | 🟡 | ✅ |
 
 ### 12.4 v1.0.0 — Production Release (Target: March 2026)
 
 | Criterion | Current Status | Required for v1.0 |
 |-----------|:-:|:-:|
 | All 13 plugins implemented | ✅ | ✅ |
 | Spec compliance 100% | ✅ | ✅ |
-| Admin Console operational | ✅ 29 pages | ✅ |
+| Admin Console operational | ✅ 31 pages | ✅ |
 | Security review passed | ✅ | ✅ |
 | Integration test suite | ✅ | ✅ |
 | Performance baseline (P95 < 100ms) | ✅ | ✅ |
 | Docker deployment | ✅ | ✅ |
 | E2E smoke tests | ✅ | ✅ |
 | Spec Contracts adoption (10/14 plugins) | ✅ | ✅ |
-| @object-ui SchemaRenderer for business pages | 🔲 | ✅ |
-| Business App Shell with live API data | 🔲 | ✅ |
+| @object-ui SchemaRenderer for business pages | ✅ | ✅ |
+| Business App Shell with live API data | ✅ | ✅ |
 
 ### 12.5 v1.1.0 — Rich Business UI (Target: April 2026)
 
@@ -1141,14 +1141,14 @@ Keep Next.js only for `apps/site` (Fumadocs documentation framework dependency).
 | **K** | Offline & Sync | May–Jun 2026 | Service Worker, OPFS storage, mutation queue, conflict resolution UI | 🔲 |
 | **L** | Polish & Performance | Jun–Jul 2026 | Virtual scrolling, skeletons, accessibility (WCAG 2.1 AA), bundle optimization | 🔲 |
 
-### Phase H Details (Current Focus)
+### Phase H Details (Complete)
 
-| # | Task | Priority | Description |
-|---|------|:--------:|-------------|
-| H.1 | SchemaRenderer for business pages | 🔴 | Replace hand-built views with `<SchemaRenderer view="grid/form/detail" />` |
-| H.2 | Metadata-driven navigation | 🔴 | Sidebar generated from `GET /api/v1/meta/apps` response |
-| H.3 | API client completion | 🔴 | Connect hooks to live @objectstack/client, remove mock data reliance |
-| H.4 | Bridge components | 🟡 | ObjectPage (permissions), ObjectToolbar (view switcher), RelatedList, FilterPanel |
+| # | Task | Priority | Status | Description |
+|---|------|:--------:|:------:|-------------|
+| H.1 | SchemaRenderer for business pages | 🔴 | ✅ | Replaced hand-built views with `<SchemaRenderer view="grid/form/detail/kanban/calendar" />` |
+| H.2 | Metadata-driven navigation | 🔴 | ✅ | Dynamic sidebar from app metadata, breadcrumbs, recent items |
+| H.3 | API client completion | 🔴 | ✅ | Connected hooks to live @objectstack/client, mock data as dev fallback only |
+| H.4 | Bridge components | 🟡 | ✅ | ObjectPage (permissions), ObjectToolbar (view switcher), RelatedList, FilterPanel |
 
 ---
 

ROADMAP.md

@@ -10,7 +10,7 @@
 
 ## 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 29 pages, the project is transitioning from **infrastructure build-out** to **UI-centric business application delivery**.
+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.
 
 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,18 +49,20 @@ 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 — 🔄 Active Development
+### Frontend — ✅ Phase H 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 — wired to mock data + API client |
-| @object-ui Integration | 🔄 | Packages installed, adapter configured, demo page functional |
-| ObjectUI Components | 🔄 | 7 components: DataGrid, MetadataForm, KanbanBoard, ChartWidget, ViewSwitcher, LayoutBuilder, ObjectUIExample |
-| Workflow UI | 🔄 | 5 components: WorkflowStatusBadge, ApprovalActions, ActivityTimeline, WorkflowVisualizer, AutomationRulesBuilder |
-| Sync UI | 🔄 | 2 components: OfflineIndicator, ConflictResolutionDialog |
-| Data Hooks | ✅ | useRecords (CRUD + optimistic updates), useMetadata, useWorkflow, useSync, useOffline |
+| 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 |
+| 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 |
+| Navigation | ✅ | Dynamic sidebar from metadata, breadcrumbs, recent items tracking |
+| Error Handling | ✅ | QueryErrorBoundary with retry capability |
 
 ### @object-ui Packages Installed
 
@@ -110,41 +112,41 @@ Replace hand-built business page views with @object-ui SchemaRenderer.
 
 | # | Task | Priority | Status |
 |---|------|:--------:|:------:|
-| H.1.1 | Replace `RecordTable` in object-list.tsx with `SchemaRenderer view="grid"` | 🔴 | 🔲 |
-| H.1.2 | Replace field detail rendering in object-record.tsx with `SchemaRenderer view="detail"` | 🔴 | 🔲 |
-| H.1.3 | Add record creation page using `SchemaRenderer view="form"` | 🔴 | 🔲 |
-| H.1.4 | Add record editing using `SchemaRenderer view="form" recordId={id}` | 🔴 | 🔲 |
-| H.1.5 | Wire `KanbanBoard` view mode to `SchemaRenderer view="kanban"` | 🟡 | 🔲 |
-| H.1.6 | Implement calendar view using `SchemaRenderer view="calendar"` | 🟡 | 🔲 |
+| H.1.1 | Replace `RecordTable` in object-list.tsx with `SchemaRenderer view="grid"` | 🔴 | ✅ |
+| H.1.2 | Replace field detail rendering in object-record.tsx with `SchemaRenderer view="detail"` | 🔴 | ✅ |
+| H.1.3 | Add record creation page using `SchemaRenderer view="form"` | 🔴 | ✅ |
+| H.1.4 | Add record editing using `SchemaRenderer view="form" recordId={id}` | 🔴 | ✅ |
+| H.1.5 | Wire `KanbanBoard` view mode to `SchemaRenderer view="kanban"` | 🟡 | ✅ |
+| H.1.6 | Implement calendar view using `SchemaRenderer view="calendar"` | 🟡 | ✅ |
 
 ### H.2 — Metadata-Driven Navigation
 
 | # | Task | Priority | Status |
 |---|------|:--------:|:------:|
-| H.2.1 | Dynamic sidebar generated from `GET /api/v1/meta/apps` response | 🔴 | 🔲 |
-| H.2.2 | Object navigation within apps derived from app metadata | 🔴 | 🔲 |
-| H.2.3 | Breadcrumb generation from current route context | 🟡 | 🔲 |
-| H.2.4 | Recent items and favorites tracking | 🟢 | 🔲 |
+| H.2.1 | Dynamic sidebar generated from `GET /api/v1/meta/apps` response | 🔴 | ✅ |
+| H.2.2 | Object navigation within apps derived from app metadata | 🔴 | ✅ |
+| H.2.3 | Breadcrumb generation from current route context | 🟡 | ✅ |
+| H.2.4 | Recent items and favorites tracking | 🟢 | ✅ |
 
 ### H.3 — API Client Completion
 
 | # | Task | Priority | Status |
 |---|------|:--------:|:------:|
-| H.3.1 | Connect useRecords hooks to live `@objectstack/client` API (remove mock fallback reliance) | 🔴 | 🔲 |
-| H.3.2 | Implement server-side pagination in object list view | 🔴 | 🔲 |
-| H.3.3 | Implement server-side sorting and filtering | 🟡 | 🔲 |
-| H.3.4 | Error boundary integration with TanStack Query | 🟡 | 🔲 |
+| H.3.1 | Connect useRecords hooks to live `@objectstack/client` API (remove mock fallback reliance) | 🔴 | ✅ |
+| H.3.2 | Implement server-side pagination in object list view | 🔴 | ✅ |
+| H.3.3 | Implement server-side sorting and filtering | 🟡 | ✅ |
+| H.3.4 | Error boundary integration with TanStack Query | 🟡 | ✅ |
 
 ### H.4 — @object-ui / @objectos Bridge Components
 
 Custom wrapper components that combine @object-ui controls with ObjectOS-specific features.
 
 | # | Task | Priority | Status |
 |---|------|:--------:|:------:|
-| H.4.1 | `ObjectPage` — wraps SchemaRenderer with ObjectOS permissions check | 🔴 | 🔲 |
-| H.4.2 | `ObjectToolbar` — view switcher + new record button + bulk actions | 🟡 | 🔲 |
-| H.4.3 | `RelatedList` — displays child/lookup records on detail pages | 🟡 | 🔲 |
-| H.4.4 | `FilterPanel` — metadata-aware filter builder for list views | 🟡 | 🔲 |
+| H.4.1 | `ObjectPage` — wraps SchemaRenderer with ObjectOS permissions check | 🔴 | ✅ |
+| H.4.2 | `ObjectToolbar` — view switcher + new record button + bulk actions | 🟡 | ✅ |
+| H.4.3 | `RelatedList` — displays child/lookup records on detail pages | 🟡 | ✅ |
+| H.4.4 | `FilterPanel` — metadata-aware filter builder for list views | 🟡 | ✅ |
 
 ---
 
@@ -222,8 +224,8 @@ Integrate `@objectos/browser` with the Admin Console for offline-first capabilit
 | Performance baseline (P95 < 100ms) | ✅ |
 | Docker deployment | ✅ |
 | E2E smoke tests | ✅ |
-| @object-ui integration (SchemaRenderer for grid/form/detail) | 🔲 Phase H |
-| Business App Shell with live API data | 🔲 Phase H |
+| @object-ui integration (SchemaRenderer for grid/form/detail) | ✅ Phase H |
+| Business App Shell with live API data | ✅ Phase H |
 
 ### v1.1.0 — Rich Business UI (Target: April 2026)
 
@@ -333,9 +335,17 @@ User Action → React Component → @object-ui/react SchemaRenderer
 | Data Adapter | `apps/web/src/lib/object-ui-adapter.ts` | Bridges @object-ui with ObjectStack API |
 | API Client | `apps/web/src/lib/api.ts` | @objectstack/client singleton |
 | Schema Renderer | `apps/web/src/components/objectui/ObjectUIExample.tsx` | Example integration |
+| Object Page | `apps/web/src/components/objectui/ObjectPage.tsx` | Bridge: SchemaRenderer + permissions |
+| Object Toolbar | `apps/web/src/components/objectui/ObjectToolbar.tsx` | View switcher + actions |
+| Filter Panel | `apps/web/src/components/objectui/FilterPanel.tsx` | Metadata-aware filtering |
+| Related List | `apps/web/src/components/objectui/RelatedList.tsx` | Child/lookup records |
 | Business App Page | `apps/web/src/pages/apps/app.tsx` | App landing with object cards |
-| Object List | `apps/web/src/pages/apps/object-list.tsx` | Records list (to be @object-ui powered) |
-| Object Record | `apps/web/src/pages/apps/object-record.tsx` | Record detail (to be @object-ui powered) |
+| Object List | `apps/web/src/pages/apps/object-list.tsx` | SchemaRenderer grid/kanban/calendar |
+| Object Record | `apps/web/src/pages/apps/object-record.tsx` | SchemaRenderer detail view |
+| Record Create | `apps/web/src/pages/apps/record-create.tsx` | SchemaRenderer form (new) |
+| Record Edit | `apps/web/src/pages/apps/record-edit.tsx` | SchemaRenderer form (edit) |
+| Error Boundary | `apps/web/src/components/ui/query-error-boundary.tsx` | TanStack Query error handling |
+| Recent Items | `apps/web/src/hooks/use-recent-items.ts` | Navigation history tracking |
 
 ---
 

apps/web/src/App.tsx

@@ -37,6 +37,8 @@ const ObjectUIDemoPage = lazy(() => import('./pages/settings/objectui-demo'));
 const BusinessAppPage = lazy(() => import('./pages/apps/app'));
 const ObjectListPage = lazy(() => import('./pages/apps/object-list'));
 const ObjectRecordPage = lazy(() => import('./pages/apps/object-record'));
+const RecordCreatePage = lazy(() => import('./pages/apps/record-create'));
+const RecordEditPage = lazy(() => import('./pages/apps/record-edit'));
 
 export function App() {
   const fallback = (
@@ -91,7 +93,9 @@ export function App() {
               <Route path="/apps/:appId" element={<AppLayout />}>
                 <Route index element={<BusinessAppPage />} />
                 <Route path=":objectName" element={<ObjectListPage />} />
+                <Route path=":objectName/new" element={<RecordCreatePage />} />
                 <Route path=":objectName/:recordId" element={<ObjectRecordPage />} />
+                <Route path=":objectName/:recordId/edit" element={<RecordEditPage />} />
               </Route>
 
             </Route>

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

@@ -0,0 +1,115 @@
+/**
+ * Tests for FilterPanel component.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { FilterPanel } from '@/components/objectui/FilterPanel';
+import type { ObjectDefinition } from '@/types/metadata';
+
+const taskObjectDef: ObjectDefinition = {
+  name: 'task',
+  label: 'Task',
+  pluralLabel: 'Tasks',
+  fields: {
+    id: { type: 'text', label: 'ID', readonly: true },
+    title: { type: 'text', label: 'Title' },
+    status: {
+      type: 'select',
+      label: 'Status',
+      options: [
+        { label: 'To Do', value: 'todo' },
+        { label: 'In Progress', value: 'in_progress' },
+        { label: 'Done', value: 'done' },
+      ],
+    },
+    priority: {
+      type: 'select',
+      label: 'Priority',
+      options: [
+        { label: 'Low', value: 'low' },
+        { label: 'High', value: 'high' },
+      ],
+    },
+    due_date: { type: 'datetime', label: 'Due Date' },
+    created_at: { type: 'datetime', label: 'Created', readonly: true },
+  },
+};
+
+describe('FilterPanel', () => {
+  it('renders search input', () => {
+    const onFiltersChange = vi.fn();
+    render(
+      <FilterPanel
+        objectDef={taskObjectDef}
+        filters={[]}
+        onFiltersChange={onFiltersChange}
+        searchTerm=""
+        onSearchChange={vi.fn()}
+      />,
+    );
+    expect(screen.getByLabelText('Search records')).toBeDefined();
+  });
+
+  it('renders filter button', () => {
+    render(
+      <FilterPanel
+        objectDef={taskObjectDef}
+        filters={[]}
+        onFiltersChange={vi.fn()}
+      />,
+    );
+    expect(screen.getByText('Filters')).toBeDefined();
+  });
+
+  it('shows active filter count', () => {
+    render(
+      <FilterPanel
+        objectDef={taskObjectDef}
+        filters={[{ field: 'status', operator: 'equals', value: 'todo' }]}
+        onFiltersChange={vi.fn()}
+      />,
+    );
+    expect(screen.getByText('1')).toBeDefined();
+  });
+
+  it('displays active filter badges', () => {
+    render(
+      <FilterPanel
+        objectDef={taskObjectDef}
+        filters={[{ field: 'status', operator: 'equals', value: 'todo' }]}
+        onFiltersChange={vi.fn()}
+      />,
+    );
+    expect(screen.getByText('Status:')).toBeDefined();
+    expect(screen.getByText('todo')).toBeDefined();
+  });
+
+  it('shows filter builder when expanded', () => {
+    render(
+      <FilterPanel
+        objectDef={taskObjectDef}
+        filters={[]}
+        onFiltersChange={vi.fn()}
+      />,
+    );
+    fireEvent.click(screen.getByText('Filters'));
+    expect(screen.getByLabelText('Filter field')).toBeDefined();
+  });
+
+  it('calls onSearchChange when search input changes', () => {
+    const onSearchChange = vi.fn();
+    render(
+      <FilterPanel
+        objectDef={taskObjectDef}
+        filters={[]}
+        onFiltersChange={vi.fn()}
+        searchTerm=""
+        onSearchChange={onSearchChange}
+      />,
+    );
+    fireEvent.change(screen.getByLabelText('Search records'), {
+      target: { value: 'test' },
+    });
+    expect(onSearchChange).toHaveBeenCalledWith('test');
+  });
+});