Merge branch 'main' into copilot/optimize-platform-ui-schema

Author: hotlong

ROADMAP.md

@@ -988,6 +988,9 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 - [x] ISO datetime fallback: ObjectGrid `inferColumnType()` now detects ISO 8601 datetime strings (`YYYY-MM-DDTHH:MM`) in data values as a catch-all for fields whose names don't match date/datetime patterns.
 - [x] Date/datetime human-friendly display: `DateCellRenderer` (relative format) and `DateTimeCellRenderer` (split date/time) already registered in field registry for all grid/table views.
 - [x] Currency/status/boolean renderers: Already implemented with proper formatting (currency symbol, Badge colors, checkbox display).
+- [x] **accessorKey-format type inference**: `generateColumns()` in ObjectGrid now applies `inferColumnType()` + `getCellRenderer()` to `accessorKey`-format columns that don't already have a `cell` renderer. Previously, `accessorKey` columns bypassed the entire inference pipeline, showing raw dates, plain text status/priority, and raw numbers for progress.
+- [x] **humanizeLabel() utility**: New `humanizeLabel()` export in `@object-ui/fields` converts snake_case/kebab-case values to Title Case (e.g., `in_progress` → `In Progress`). Used as fallback in `SelectCellRenderer` when no explicit `option.label` exists.
+- [x] **PercentCellRenderer progress-field normalization**: `PercentCellRenderer` now uses field name to disambiguate 0-1 fraction vs 0-100 whole number — fields matching `/progress|completion/` treat values as already in 0-100 range (e.g., `75` → `75%`), while other fields like `probability` still treat `0.75` → `75%`.
 
 **Header & Breadcrumb i18n:**
 - [x] AppHeader breadcrumb labels (`Dashboards`, `Pages`, `Reports`, `System`) now use `t()` translation via `useObjectTranslation`.
@@ -997,8 +1000,8 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 
 **Tests:**
 - [x] 46 NavigationRenderer tests passing (pin/favorites/search/reorder)
-- [x] 75 field cell renderer tests passing (date/datetime/select/boolean/percent)
-- [x] 263 ObjectGrid tests passing (inference, rendering, accessibility)
+- [x] 86 field cell renderer tests passing (date/datetime/select/boolean/percent/humanizeLabel/progress)
+- [x] 293 ObjectGrid tests passing (inference, rendering, accessibility, accessorKey-format inference)
 - [x] 28 DataTable tests passing
 - [x] 78 Layout tests passing (NavigationRenderer + AppSchemaRenderer)
 - [x] 11 AppSidebar tests passing

packages/fields/src/__tests__/cell-renderers.test.tsx

@@ -16,6 +16,8 @@ import {
   TextCellRenderer,
   DateCellRenderer,
   BooleanCellRenderer,
+  PercentCellRenderer,
+  humanizeLabel,
   formatDate,
   formatRelativeDate,
 } from '../index';
@@ -734,3 +736,131 @@ describe('UserCellRenderer', () => {
     expect(screen.getByTitle('Bob')).toBeInTheDocument();
   });
 });
+
+// =========================================================================
+// 9. humanizeLabel
+// =========================================================================
+
+describe('humanizeLabel', () => {
+  it('should convert snake_case to Title Case', () => {
+    expect(humanizeLabel('in_progress')).toBe('In Progress');
+  });
+
+  it('should convert kebab-case to Title Case', () => {
+    expect(humanizeLabel('high-priority')).toBe('High Priority');
+  });
+
+  it('should handle single word', () => {
+    expect(humanizeLabel('active')).toBe('Active');
+  });
+
+  it('should handle already Title Case', () => {
+    expect(humanizeLabel('Active')).toBe('Active');
+  });
+
+  it('should handle multiple underscores', () => {
+    expect(humanizeLabel('not_yet_started')).toBe('Not Yet Started');
+  });
+
+  it('should handle empty string', () => {
+    expect(humanizeLabel('')).toBe('');
+  });
+
+  it('should handle mixed separators', () => {
+    expect(humanizeLabel('in_progress-now')).toBe('In Progress Now');
+  });
+});
+
+// =========================================================================
+// 10. SelectCellRenderer humanizeLabel fallback
+// =========================================================================
+describe('SelectCellRenderer humanizeLabel fallback', () => {
+  it('should humanize snake_case value when no option label exists', () => {
+    render(
+      <SelectCellRenderer
+        value="in_progress"
+        field={{ name: 'status', type: 'select', options: [] } as any}
+      />
+    );
+    expect(screen.getByText('In Progress')).toBeInTheDocument();
+  });
+
+  it('should prefer explicit option.label over humanized fallback', () => {
+    render(
+      <SelectCellRenderer
+        value="in_progress"
+        field={{
+          name: 'status',
+          type: 'select',
+          options: [{ value: 'in_progress', label: 'WIP' }],
+        } as any}
+      />
+    );
+    expect(screen.getByText('WIP')).toBeInTheDocument();
+    expect(screen.queryByText('In Progress')).not.toBeInTheDocument();
+  });
+
+  it('should humanize snake_case values in arrays', () => {
+    render(
+      <SelectCellRenderer
+        value={['not_started', 'in_progress']}
+        field={{ name: 'status', type: 'select', options: [] } as any}
+      />
+    );
+    expect(screen.getByText('Not Started')).toBeInTheDocument();
+    expect(screen.getByText('In Progress')).toBeInTheDocument();
+  });
+});
+
+// =========================================================================
+// 11. PercentCellRenderer with progress-type fields
+// =========================================================================
+describe('PercentCellRenderer progress-type fields', () => {
+  it('should render progress field value 75 as 75% with correct bar', () => {
+    const { container } = render(
+      <PercentCellRenderer
+        value={75}
+        field={{ name: 'progress', type: 'percent' } as any}
+      />
+    );
+    expect(screen.getByText('75%')).toBeInTheDocument();
+    const bar = container.querySelector('[role="progressbar"]');
+    expect(bar).toHaveAttribute('aria-valuenow', '75');
+  });
+
+  it('should render completion field value 50 as 50% with correct bar', () => {
+    const { container } = render(
+      <PercentCellRenderer
+        value={50}
+        field={{ name: 'completion', type: 'percent' } as any}
+      />
+    );
+    expect(screen.getByText('50%')).toBeInTheDocument();
+    const bar = container.querySelector('[role="progressbar"]');
+    expect(bar).toHaveAttribute('aria-valuenow', '50');
+  });
+
+  it('should render probability field value 0.75 as 75%', () => {
+    const { container } = render(
+      <PercentCellRenderer
+        value={0.75}
+        field={{ name: 'probability', type: 'percent' } as any}
+      />
+    );
+    expect(screen.getByText('75%')).toBeInTheDocument();
+    const bar = container.querySelector('[role="progressbar"]');
+    expect(bar).toHaveAttribute('aria-valuenow', '75');
+  });
+
+  it('should render rate field value 0.5 as 50%', () => {
+    const { container } = render(
+      <PercentCellRenderer
+        value={0.5}
+        field={{ name: 'rate', type: 'percent' } as any}
+      />
+    );
+    expect(screen.getByText('50%')).toBeInTheDocument();
+    const bar = container.querySelector('[role="progressbar"]');
+    expect(bar).toHaveAttribute('aria-valuenow', '50');
+  });
+});

packages/fields/src/index.tsx

@@ -104,6 +104,19 @@ export function formatPercent(value: number, precision: number = 0): string {
   return `${displayValue.toFixed(precision)}%`;
 }
 
+/**
+ * Humanize a snake_case or kebab-case string into Title Case.
+ * Used as fallback label when no explicit option.label exists.
+ * 
+ * Examples:
+ *   "in_progress" → "In Progress"
+ *   "high-priority" → "High Priority"
+ *   "active" → "Active"
+ */
+export function humanizeLabel(value: string): string {
+  return value.replace(/[_-]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+}
+
 /**
  * Format date as relative time (e.g., "2 days ago", "Today", "Overdue 3d")
  */
@@ -210,6 +223,9 @@ export function CurrencyCellRenderer({ value, field }: CellRendererProps): React
   return <span className="tabular-nums font-medium whitespace-nowrap">{formatted}</span>;
 }
 
+// Fields that store percentage values as whole numbers (0-100) rather than fractions (0-1)
+const WHOLE_PERCENT_FIELD_PATTERN = /progress|completion/;
+
 /**
  * Percent field cell renderer with mini progress bar
  */
@@ -219,9 +235,13 @@ export function PercentCellRenderer({ value, field }: CellRendererProps): React.
   const percentField = field as any;
   const precision = percentField.precision ?? 0;
   const numValue = Number(value);
-  const formatted = formatPercent(numValue, precision);
-  // Normalize to 0-100 range for progress bar
-  const barValue = (numValue > -1 && numValue < 1) ? numValue * 100 : numValue;
+  // Use field name to disambiguate 0-1 fraction vs 0-100 whole number:
+  // Fields like "progress" or "completion" store values as 0-100, not 0-1
+  const isWholePercentField = WHOLE_PERCENT_FIELD_PATTERN.test(field?.name?.toLowerCase() || '');
+  const barValue = isWholePercentField
+    ? numValue
+    : (numValue > -1 && numValue < 1) ? numValue * 100 : numValue;
+  const formatted = isWholePercentField ? `${numValue.toFixed(precision)}%` : formatPercent(numValue, precision);
   const clampedBar = Math.max(0, Math.min(100, barValue));
 
   return (
@@ -378,7 +398,7 @@ export function SelectCellRenderer({ value, field }: CellRendererProps): React.R
       <div className="flex flex-wrap gap-1">
         {value.map((val, idx) => {
           const option = options.find(opt => opt.value === val);
-          const label = option?.label || val;
+          const label = option?.label || humanizeLabel(String(val));
           const colorClasses = getBadgeColorClasses(option?.color, val);
 
           return (
@@ -397,7 +417,7 @@ export function SelectCellRenderer({ value, field }: CellRendererProps): React.R
 
   // Handle single value
   const option = options.find(opt => opt.value === value);
-  const label = option?.label || value;
+  const label = option?.label || humanizeLabel(String(value));
   const colorClasses = getBadgeColorClasses(option?.color, value);
 
   return (

packages/plugin-grid/src/ObjectGrid.tsx

@@ -24,7 +24,7 @@
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import type { ObjectGridSchema, DataSource, ListColumn, ViewData } from '@object-ui/types';
 import { SchemaRenderer, useDataScope, useNavigationOverlay, useAction, useObjectTranslation } from '@object-ui/react';
-import { getCellRenderer, formatCurrency, formatCompactCurrency, formatDate, formatPercent } from '@object-ui/fields';
+import { getCellRenderer, formatCurrency, formatCompactCurrency, formatDate, formatPercent, humanizeLabel } from '@object-ui/fields';
 import {
   Badge, Button, NavigationOverlay,
   Popover, PopoverContent, PopoverTrigger,
@@ -560,9 +560,29 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
       if (cols.length > 0 && typeof cols[0] === 'object' && cols[0] !== null) {
         const firstCol = cols[0] as any;
 
-        // Already in data-table format - use as-is
+        // Already in data-table format - apply type inference for columns without custom cell renderers
         if ('accessorKey' in firstCol) {
-          return cols;
+          return (cols as any[]).map((col) => {
+            if (col.cell) return col; // already has custom renderer
+
+            const syntheticCol: ListColumn = { field: col.accessorKey, label: col.header, type: col.type };
+            const inferredType = inferColumnType(syntheticCol);
+            if (!inferredType) return col;
+
+            const CellRenderer = getCellRenderer(inferredType);
+            const fieldMeta: Record<string, any> = { name: col.accessorKey, type: inferredType };
+
+            if (inferredType === 'select') {
+              const uniqueValues = Array.from(new Set(data.map(row => row[col.accessorKey]).filter(Boolean)));
+              fieldMeta.options = uniqueValues.map((v: any) => ({ value: v, label: humanizeLabel(String(v)) }));
+            }
+
+            return {
+              ...col,
+              headerIcon: getTypeIcon(inferredType),
+              cell: (value: any) => <CellRenderer value={value} field={fieldMeta as any} />,
+            };
+          });
         }
 
         // ListColumn format - convert to data-table format with full feature support
@@ -584,7 +604,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
               if (inferredType === 'select' && !(col as any).options) {
                 // Auto-generate options from unique data values for inferred select fields
                 const uniqueValues = Array.from(new Set(data.map(row => row[col.field]).filter(Boolean)));
-                fieldMeta.options = uniqueValues.map(v => ({ value: v, label: String(v) }));
+                fieldMeta.options = uniqueValues.map(v => ({ value: v, label: humanizeLabel(String(v)) }));
               }
               if ((col as any).options) {
                 fieldMeta.options = (col as any).options;