Merge pull request #466 from objectstack-ai/copilot/continue-development-from-roadmap

Author: hotlong

ROADMAP.md

@@ -38,7 +38,7 @@ ObjectUI's current overall compliance stands at **82%** (down from 91% against v
 - ✅ 57+ Storybook stories with interactive demos
 - ✅ TypeScript 5.9+ strict mode (100%)
 - ✅ React 19 + Tailwind CSS + Shadcn UI
-- ✅ All 42 builds pass, all 3011 tests pass
+- ✅ All 42 builds pass, all 3185+ tests pass
 - ✅ @objectstack/client v2.0.7 integration validated (100% protocol coverage)
 
 **Core Features (Complete):**

SPEC_COMPLIANCE_EVALUATION.md

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ResponsiveGridLayout, useContainerWidth, type LayoutItem as RGLLayout, type Layout, type ResponsiveLayouts } from 'react-grid-layout';
 import 'react-grid-layout/css/styles.css';
 import { cn, Card, CardHeader, CardTitle, CardContent, Button } from '@object-ui/components';
-import { Edit, GripVertical, Save, X } from 'lucide-react';
+import { Edit, GripVertical, Save, X, RefreshCw } from 'lucide-react';
 import { SchemaRenderer, useHasDndProvider, useDnd } from '@object-ui/react';
 import type { DashboardSchema, DashboardWidgetSchema } from '@object-ui/types';
 
@@ -35,17 +35,38 @@ export interface DashboardGridLayoutProps {
   className?: string;
   onLayoutChange?: (layout: RGLLayout[]) => void;
   persistLayoutKey?: string;
+  /** Callback invoked when dashboard refresh is triggered (manual or auto) */
+  onRefresh?: () => void;
 }
 
 export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
   schema,
   className,
   onLayoutChange,
   persistLayoutKey = 'dashboard-layout',
+  onRefresh,
 }) => {
   const { width, containerRef, mounted } = useContainerWidth();
   const [editMode, setEditMode] = React.useState(false);
+  const [refreshing, setRefreshing] = React.useState(false);
   const hasDndProvider = useHasDndProvider();
+  const intervalRef = React.useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const handleRefresh = React.useCallback(() => {
+    if (!onRefresh) return;
+    setRefreshing(true);
+    onRefresh();
+    setTimeout(() => setRefreshing(false), 600);
+  }, [onRefresh]);
+
+  // Auto-refresh interval
+  React.useEffect(() => {
+    if (!schema.refreshInterval || schema.refreshInterval <= 0 || !onRefresh) return;
+    intervalRef.current = setInterval(handleRefresh, schema.refreshInterval * 1000);
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [schema.refreshInterval, onRefresh, handleRefresh]);
   const [layouts, setLayouts] = React.useState<{ lg: RGLLayout[] }>(() => {
     // Try to load saved layout
     if (typeof window !== 'undefined' && persistLayoutKey) {
@@ -158,10 +179,24 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
               </Button>
             </>
           ) : (
-            <Button onClick={() => setEditMode(true)} size="sm" variant="outline">
-              <Edit className="h-4 w-4 mr-2" />
-              Edit Layout
-            </Button>
+            <>
+              {onRefresh && (
+                <Button
+                  onClick={handleRefresh}
+                  size="sm"
+                  variant="outline"
+                  disabled={refreshing}
+                  aria-label="Refresh dashboard"
+                >
+                  <RefreshCw className={cn("h-4 w-4 mr-2", refreshing && "animate-spin")} />
+                  {refreshing ? 'Refreshing…' : 'Refresh All'}
+                </Button>
+              )}
+              <Button onClick={() => setEditMode(true)} size="sm" variant="outline">
+                <Edit className="h-4 w-4 mr-2" />
+                Edit Layout
+              </Button>
+            </>
           )}
         </div>
       </div>

packages/plugin-dashboard/src/DashboardGridLayout.tsx

@@ -8,8 +8,9 @@
 
 import type { DashboardSchema, DashboardWidgetSchema } from '@object-ui/types';
 import { SchemaRenderer } from '@object-ui/react';
-import { cn, Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
-import { forwardRef } from 'react';
+import { cn, Card, CardHeader, CardTitle, CardContent, Button } from '@object-ui/components';
+import { forwardRef, useState, useEffect, useCallback, useRef } from 'react';
+import { RefreshCw } from 'lucide-react';
 
 // Color palette for charts
 const CHART_COLORS = [
@@ -20,10 +21,37 @@ const CHART_COLORS = [
   'hsl(var(--chart-5))',
 ];
 
-export const DashboardRenderer = forwardRef<HTMLDivElement, { schema: DashboardSchema; className?: string; [key: string]: any }>(
-  ({ schema, className, dataSource, ...props }, ref) => {
+export interface DashboardRendererProps {
+  schema: DashboardSchema;
+  className?: string;
+  /** Callback invoked when dashboard refresh is triggered (manual or auto) */
+  onRefresh?: () => void;
+  [key: string]: any;
+}
+
+export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererProps>(
+  ({ schema, className, dataSource, onRefresh, ...props }, ref) => {
     const columns = schema.columns || 4; // Default to 4 columns for better density
     const gap = schema.gap || 4;
+    const [refreshing, setRefreshing] = useState(false);
+    const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+    const handleRefresh = useCallback(() => {
+      if (!onRefresh) return;
+      setRefreshing(true);
+      onRefresh();
+      // Reset refreshing indicator after a short delay
+      setTimeout(() => setRefreshing(false), 600);
+    }, [onRefresh]);
+
+    // Auto-refresh interval
+    useEffect(() => {
+      if (!schema.refreshInterval || schema.refreshInterval <= 0 || !onRefresh) return;
+      intervalRef.current = setInterval(handleRefresh, schema.refreshInterval * 1000);
+      return () => {
+        if (intervalRef.current) clearInterval(intervalRef.current);
+      };
+    }, [schema.refreshInterval, onRefresh, handleRefresh]);
 
     return (
       <div
@@ -35,6 +63,20 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, { schema: DashboardS
         }}
         {...props}
       >
+        {onRefresh && (
+          <div className="col-span-full flex justify-end mb-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleRefresh}
+              disabled={refreshing}
+              aria-label="Refresh dashboard"
+            >
+              <RefreshCw className={cn("h-4 w-4 mr-2", refreshing && "animate-spin")} />
+              {refreshing ? 'Refreshing…' : 'Refresh All'}
+            </Button>
+          </div>
+        )}
         {schema.widgets?.map((widget: DashboardWidgetSchema) => {
             // Logic to determine what to render
             // Supports both Component Schema (widget.component) and Shorthand (widget.type)

packages/plugin-dashboard/src/DashboardRenderer.tsx

@@ -0,0 +1,124 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { DashboardRenderer } from '../DashboardRenderer';
+import type { DashboardSchema } from '@object-ui/types';
+
+describe('DashboardRenderer auto-refresh', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  const mockSchema: DashboardSchema = {
+    type: 'dashboard',
+    name: 'test_dashboard',
+    title: 'Test Dashboard',
+    widgets: [],
+  };
+
+  it('should not render refresh button when onRefresh is not provided', () => {
+    render(<DashboardRenderer schema={mockSchema} />);
+    expect(screen.queryByLabelText('Refresh dashboard')).not.toBeInTheDocument();
+  });
+
+  it('should render refresh button when onRefresh is provided', () => {
+    const onRefresh = vi.fn();
+    render(<DashboardRenderer schema={mockSchema} onRefresh={onRefresh} />);
+    expect(screen.getByLabelText('Refresh dashboard')).toBeInTheDocument();
+  });
+
+  it('should call onRefresh when refresh button is clicked', () => {
+    const onRefresh = vi.fn();
+    render(<DashboardRenderer schema={mockSchema} onRefresh={onRefresh} />);
+
+    const button = screen.getByLabelText('Refresh dashboard');
+    fireEvent.click(button);
+
+    expect(onRefresh).toHaveBeenCalledTimes(1);
+  });
+
+  it('should auto-refresh at the configured interval', () => {
+    const onRefresh = vi.fn();
+    const schemaWithRefresh: DashboardSchema = {
+      ...mockSchema,
+      refreshInterval: 30, // 30 seconds
+    };
+
+    render(<DashboardRenderer schema={schemaWithRefresh} onRefresh={onRefresh} />);
+
+    expect(onRefresh).not.toHaveBeenCalled();
+
+    // Advance past one interval
+    act(() => {
+      vi.advanceTimersByTime(30_000);
+    });
+    expect(onRefresh).toHaveBeenCalledTimes(1);
+
+    // Advance past another interval
+    act(() => {
+      vi.advanceTimersByTime(30_000);
+    });
+    expect(onRefresh).toHaveBeenCalledTimes(2);
+  });
+
+  it('should not auto-refresh when refreshInterval is 0', () => {
+    const onRefresh = vi.fn();
+    const schemaWithZeroInterval: DashboardSchema = {
+      ...mockSchema,
+      refreshInterval: 0,
+    };
+
+    render(<DashboardRenderer schema={schemaWithZeroInterval} onRefresh={onRefresh} />);
+
+    act(() => {
+      vi.advanceTimersByTime(60_000);
+    });
+
+    expect(onRefresh).not.toHaveBeenCalled();
+  });
+
+  it('should not auto-refresh when onRefresh is not provided', () => {
+    const schemaWithRefresh: DashboardSchema = {
+      ...mockSchema,
+      refreshInterval: 10,
+    };
+
+    // Should not throw
+    render(<DashboardRenderer schema={schemaWithRefresh} />);
+
+    act(() => {
+      vi.advanceTimersByTime(30_000);
+    });
+  });
+
+  it('should clean up interval on unmount', () => {
+    const onRefresh = vi.fn();
+    const schemaWithRefresh: DashboardSchema = {
+      ...mockSchema,
+      refreshInterval: 5,
+    };
+
+    const { unmount } = render(
+      <DashboardRenderer schema={schemaWithRefresh} onRefresh={onRefresh} />
+    );
+
+    unmount();
+
+    act(() => {
+      vi.advanceTimersByTime(30_000);
+    });
+
+    expect(onRefresh).not.toHaveBeenCalled();
+  });
+});

packages/plugin-dashboard/src/__tests__/DashboardRenderer.autoRefresh.test.tsx

@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { forwardRef, useContext, useMemo } from 'react';
+import React, { forwardRef, useContext, useMemo, Component } from 'react';
 import { SchemaNode, ComponentRegistry, ExpressionEvaluator } from '@object-ui/core';
 import { SchemaRendererContext } from './context/SchemaRendererContext';
 import { resolveI18nLabel } from './utils/i18n';
@@ -34,6 +34,51 @@ function resolveAriaProps(schema: Record<string, any>): Record<string, string |
   return aria;
 }
 
+/**
+ * Per-component Error Boundary for SchemaRenderer.
+ * Catches render errors in individual components, preventing one broken
+ * component from crashing the entire page.
+ */
+interface SchemaErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class SchemaErrorBoundary extends Component<
+  { componentType?: string; children: React.ReactNode },
+  SchemaErrorBoundaryState
+> {
+  state: SchemaErrorBoundaryState = { hasError: false, error: null };
+
+  static getDerivedStateFromError(error: Error): SchemaErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError && this.state.error) {
+      return (
+        <div className="p-4 border border-orange-400 rounded bg-orange-50 text-orange-700 my-2" role="alert">
+          <p className="font-medium">
+            Component{this.props.componentType ? ` "${this.props.componentType}"` : ''} failed to render
+          </p>
+          <p className="text-sm mt-1">{this.state.error.message}</p>
+          <button
+            onClick={this.handleRetry}
+            className="mt-2 text-sm underline hover:no-underline"
+          >
+            Retry
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
 export const SchemaRenderer = forwardRef<any, { schema: SchemaNode } & Record<string, any>>(({ schema, ...props }, _ref) => {
   const context = useContext(SchemaRendererContext);
   const dataSource = context?.dataSource || {};
@@ -105,15 +150,19 @@ export const SchemaRenderer = forwardRef<any, { schema: SchemaNode } & Record<st
   // Extract AriaPropsSchema properties for accessibility
   const ariaProps = resolveAriaProps(evaluatedSchema);
 
-  return React.createElement(Component, {
-    schema: evaluatedSchema,
-    ...componentProps,  // Spread non-metadata schema properties as props
-    ...(evaluatedSchema.props || {}),  // Override with explicit props if provided
-    ...ariaProps,  // Inject ARIA attributes from AriaPropsSchema
-    className: evaluatedSchema.className,
-    'data-obj-id': evaluatedSchema.id,
-    'data-obj-type': evaluatedSchema.type,
-    ...props
-  });
+  return (
+    <SchemaErrorBoundary componentType={evaluatedSchema.type}>
+      {React.createElement(Component, {
+        schema: evaluatedSchema,
+        ...componentProps,  // Spread non-metadata schema properties as props
+        ...(evaluatedSchema.props || {}),  // Override with explicit props if provided
+        ...ariaProps,  // Inject ARIA attributes from AriaPropsSchema
+        className: evaluatedSchema.className,
+        'data-obj-id': evaluatedSchema.id,
+        'data-obj-type': evaluatedSchema.type,
+        ...props
+      })}
+    </SchemaErrorBoundary>
+  );
 });
 SchemaRenderer.displayName = 'SchemaRenderer';