fix: apply type inference to accessorKey-format columns, add humanizeLabel, fix PercentCellRenderer for progress fields

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

Author: Copilot

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

@@ -734,3 +734,132 @@ describe('UserCellRenderer', () => {
     expect(screen.getByTitle('Bob')).toBeInTheDocument();
   });
 });
+
+// =========================================================================
+// 9. humanizeLabel
+// =========================================================================
+import { humanizeLabel, PercentCellRenderer } from '../index';
+
+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")
  */
@@ -219,9 +232,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 = /progress|completion/.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 +395,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 +414,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 } 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,
@@ -508,9 +508,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
@@ -532,7 +552,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;