From fd7b26997427d2bfff53e889aaaafa307ad6f0ce Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 24 Feb 2026 06:11:14 +0000
Subject: [PATCH 1/5] Initial plan


From 6106b124f4360f22f5e7a04803eefd31f3e64077 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 24 Feb 2026 06:19:58 +0000
Subject: [PATCH 2/5] =?UTF-8?q?feat:=20ObjectGrid=20cell=20type=20renderin?=
 =?UTF-8?q?g=20=E2=80=94=20select=20Badge=20colors,=20date=20relative=20fo?=
 =?UTF-8?q?rmat,=20boolean=20null=20handling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SelectCellRenderer: priority semantic color auto-detection (Critical→red, High→orange, Medium→yellow, Low→gray), muted default for unconfigured colors
- DateCellRenderer: relative format by default, overdue red text styling, ISO tooltip
- BooleanCellRenderer: null/undefined renders as — instead of unchecked checkbox
- ObjectGrid: auto-generates field options from data for inferred select columns
- formatRelativeDate: threshold tightened from 30 to 7 days
- 40 new unit tests for cell renderers and formatRelativeDate edge cases
- ROADMAP.md updated with Module 4 completion details

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 ROADMAP.md                                    |   3 +
 .../src/__tests__/boolean-checkbox.test.tsx   |   6 +-
 .../src/__tests__/cell-renderers.test.tsx     | 407 ++++++++++++++++++
 packages/fields/src/index.tsx                 |  47 +-
 packages/plugin-grid/src/ObjectGrid.tsx       |  17 +-
 .../src/__tests__/airtable-style.test.tsx     |   7 +-
 6 files changed, 470 insertions(+), 17 deletions(-)
 create mode 100644 packages/fields/src/__tests__/cell-renderers.test.tsx

diff --git a/ROADMAP.md b/ROADMAP.md
index 2597e5efb..acaed76e6 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -810,6 +810,9 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 - [x] `formatRelativeDate()` function added for relative time display ("Today", "2 days ago", "Yesterday")
 - [x] DataTable/VirtualGrid header styling unified: `text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70 bg-muted/30`
 - [x] Remaining hardcoded gray colors in ObjectGrid loading spinner and status badge fallback replaced with theme tokens
+- [x] Select/status type Badge rendering — `getCellRenderer()` returns `<Badge>` with color mapping from `field.options`; auto-generated options from unique data values when type is inferred; priority semantic colors (Critical→red, High→orange, Medium→yellow, Low→gray); muted default style for unconfigured colors
+- [x] Date type human-readable formatting — `DateCellRenderer` defaults to relative format ("Today", "Yesterday", "3 days ago"); overdue dates styled with red text; ISO timestamp shown as hover tooltip; `formatRelativeDate()` threshold tightened to 7 days
+- [x] Boolean type visual rendering — `BooleanCellRenderer` renders `<Checkbox disabled>` for true/false; null/undefined values display as `—`
 
 **ConfigPanelRenderer:**
 - [x] `<Separator>` added between sections for visual clarity
diff --git a/packages/fields/src/__tests__/boolean-checkbox.test.tsx b/packages/fields/src/__tests__/boolean-checkbox.test.tsx
index c08acf3eb..637b619bd 100644
--- a/packages/fields/src/__tests__/boolean-checkbox.test.tsx
+++ b/packages/fields/src/__tests__/boolean-checkbox.test.tsx
@@ -36,7 +36,7 @@ describe('BooleanCellRenderer', () => {
     expect(checkbox).toHaveAttribute('data-state', 'unchecked');
   });
 
-  it('should render an unchecked checkbox for null/undefined values', () => {
+  it('should render dash for null/undefined values', () => {
     render(
       <BooleanCellRenderer
         value={null}
@@ -44,9 +44,7 @@ describe('BooleanCellRenderer', () => {
       />
     );
 
-    const checkbox = screen.getByRole('checkbox');
-    expect(checkbox).toBeInTheDocument();
-    expect(checkbox).toHaveAttribute('data-state', 'unchecked');
+    expect(screen.getByText('—')).toBeInTheDocument();
   });
 
   it('should render checkbox as disabled (non-interactive)', () => {
diff --git a/packages/fields/src/__tests__/cell-renderers.test.tsx b/packages/fields/src/__tests__/cell-renderers.test.tsx
new file mode 100644
index 000000000..d6ff3d23f
--- /dev/null
+++ b/packages/fields/src/__tests__/cell-renderers.test.tsx
@@ -0,0 +1,407 @@
+/**
+ * Cell Renderer Tests
+ *
+ * Tests for getCellRenderer() select/date/boolean type renderers
+ * and formatRelativeDate() edge cases.
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+import {
+  getCellRenderer,
+  SelectCellRenderer,
+  DateCellRenderer,
+  BooleanCellRenderer,
+  formatDate,
+  formatRelativeDate,
+} from '../index';
+
+// =========================================================================
+// 1. getCellRenderer type resolution
+// =========================================================================
+describe('getCellRenderer', () => {
+  it('should return SelectCellRenderer for select type', () => {
+    const renderer = getCellRenderer('select');
+    expect(renderer).toBeDefined();
+    // Verify it renders a badge
+    const { container } = render(
+      React.createElement(renderer, {
+        value: 'Active',
+        field: { name: 'status', type: 'select', options: [{ value: 'Active', label: 'Active', color: 'green' }] } as any,
+      })
+    );
+    expect(container.querySelector('[class*="bg-green"]')).toBeInTheDocument();
+  });
+
+  it('should return DateCellRenderer for date type', () => {
+    const renderer = getCellRenderer('date');
+    expect(renderer).toBeDefined();
+  });
+
+  it('should return BooleanCellRenderer for boolean type', () => {
+    const renderer = getCellRenderer('boolean');
+    expect(renderer).toBeDefined();
+  });
+
+  it('should fallback to TextCellRenderer for unknown types', () => {
+    const renderer = getCellRenderer('unknown-type');
+    expect(renderer).toBeDefined();
+  });
+});
+
+// =========================================================================
+// 2. SelectCellRenderer
+// =========================================================================
+describe('SelectCellRenderer', () => {
+  it('should render badge with explicit color from options', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="In Progress"
+        field={{
+          name: 'status',
+          type: 'select',
+          options: [{ value: 'In Progress', label: 'In Progress', color: 'blue' }],
+        } as any}
+      />
+    );
+    expect(screen.getByText('In Progress')).toBeInTheDocument();
+    expect(container.querySelector('[class*="bg-blue-100"]')).toBeInTheDocument();
+  });
+
+  it('should use muted style when no color configured', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="Unknown"
+        field={{
+          name: 'status',
+          type: 'select',
+          options: [{ value: 'Unknown', label: 'Unknown' }],
+        } as any}
+      />
+    );
+    expect(screen.getByText('Unknown')).toBeInTheDocument();
+    expect(container.querySelector('[class*="bg-muted"]')).toBeInTheDocument();
+  });
+
+  it('should auto-detect priority semantic colors (Critical → red)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="Critical"
+        field={{ name: 'priority', type: 'select', options: [] } as any}
+      />
+    );
+    expect(screen.getByText('Critical')).toBeInTheDocument();
+    expect(container.querySelector('[class*="bg-red-100"]')).toBeInTheDocument();
+  });
+
+  it('should auto-detect priority semantic colors (High → orange)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="High"
+        field={{ name: 'priority', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-orange-100"]')).toBeInTheDocument();
+  });
+
+  it('should auto-detect priority semantic colors (Medium → yellow)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="Medium"
+        field={{ name: 'priority', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-yellow-100"]')).toBeInTheDocument();
+  });
+
+  it('should auto-detect priority semantic colors (Low → gray)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="Low"
+        field={{ name: 'priority', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-gray-100"]')).toBeInTheDocument();
+  });
+
+  it('should render dash for null/empty value', () => {
+    render(
+      <SelectCellRenderer
+        value={null}
+        field={{ name: 'status', type: 'select' } as any}
+      />
+    );
+    expect(screen.getByText('-')).toBeInTheDocument();
+  });
+
+  it('should render multiple badges for array values', () => {
+    render(
+      <SelectCellRenderer
+        value={['Draft', 'Active']}
+        field={{
+          name: 'tags',
+          type: 'select',
+          options: [
+            { value: 'Draft', label: 'Draft', color: 'yellow' },
+            { value: 'Active', label: 'Active', color: 'green' },
+          ],
+        } as any}
+      />
+    );
+    expect(screen.getByText('Draft')).toBeInTheDocument();
+    expect(screen.getByText('Active')).toBeInTheDocument();
+  });
+
+  it('should prefer explicit option color over auto-detected', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="High"
+        field={{
+          name: 'priority',
+          type: 'select',
+          options: [{ value: 'High', label: 'High', color: 'purple' }],
+        } as any}
+      />
+    );
+    // Explicit purple should override auto-detected orange
+    expect(container.querySelector('[class*="bg-purple-100"]')).toBeInTheDocument();
+  });
+});
+
+// =========================================================================
+// 3. DateCellRenderer
+// =========================================================================
+describe('DateCellRenderer', () => {
+  let nowSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    // Fix "now" to a known date: 2026-02-24T12:00:00Z
+    nowSpy = vi.spyOn(Date, 'now').mockReturnValue(new Date('2026-02-24T12:00:00Z').getTime());
+  });
+
+  afterEach(() => {
+    nowSpy.mockRestore();
+  });
+
+  it('should render today date as "Today"', () => {
+    render(
+      <DateCellRenderer
+        value="2026-02-24T08:00:00Z"
+        field={{ name: 'due_date', type: 'date' } as any}
+      />
+    );
+    expect(screen.getByText('Today')).toBeInTheDocument();
+  });
+
+  it('should render yesterday date as "Yesterday"', () => {
+    render(
+      <DateCellRenderer
+        value="2026-02-23T08:00:00Z"
+        field={{ name: 'due_date', type: 'date' } as any}
+      />
+    );
+    expect(screen.getByText('Yesterday')).toBeInTheDocument();
+  });
+
+  it('should render recent past date as "X days ago"', () => {
+    render(
+      <DateCellRenderer
+        value="2026-02-20T08:00:00Z"
+        field={{ name: 'due_date', type: 'date' } as any}
+      />
+    );
+    expect(screen.getByText('4 days ago')).toBeInTheDocument();
+  });
+
+  it('should render overdue date with red text styling', () => {
+    const { container } = render(
+      <DateCellRenderer
+        value="2026-02-20T08:00:00Z"
+        field={{ name: 'due_date', type: 'date' } as any}
+      />
+    );
+    expect(container.querySelector('.text-red-600')).toBeInTheDocument();
+  });
+
+  it('should show ISO string as tooltip', () => {
+    const { container } = render(
+      <DateCellRenderer
+        value="2026-02-20T08:00:00Z"
+        field={{ name: 'due_date', type: 'date' } as any}
+      />
+    );
+    const span = container.querySelector('span[title]');
+    expect(span).toBeInTheDocument();
+    expect(span?.getAttribute('title')).toContain('2026-02-20');
+  });
+
+  it('should render dash for null value', () => {
+    const { container } = render(
+      <DateCellRenderer
+        value={null}
+        field={{ name: 'due_date', type: 'date' } as any}
+      />
+    );
+    expect(container.textContent).toBe('-');
+  });
+
+  it('should use explicit format when provided', () => {
+    render(
+      <DateCellRenderer
+        value="2026-01-15T08:00:00Z"
+        field={{ name: 'created', type: 'date', format: 'short' } as any}
+      />
+    );
+    // Short format: "Jan 15, '26"
+    expect(screen.getByText("Jan 15, '26")).toBeInTheDocument();
+  });
+
+  it('should not show red styling for future dates', () => {
+    const { container } = render(
+      <DateCellRenderer
+        value="2026-03-01T08:00:00Z"
+        field={{ name: 'due_date', type: 'date' } as any}
+      />
+    );
+    expect(container.querySelector('.text-red-600')).not.toBeInTheDocument();
+  });
+});
+
+// =========================================================================
+// 4. BooleanCellRenderer
+// =========================================================================
+describe('BooleanCellRenderer', () => {
+  it('should render checked checkbox for true', () => {
+    render(
+      <BooleanCellRenderer
+        value={true}
+        field={{ name: 'active', type: 'boolean' } as any}
+      />
+    );
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toHaveAttribute('data-state', 'checked');
+  });
+
+  it('should render unchecked checkbox for false', () => {
+    render(
+      <BooleanCellRenderer
+        value={false}
+        field={{ name: 'active', type: 'boolean' } as any}
+      />
+    );
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toHaveAttribute('data-state', 'unchecked');
+  });
+
+  it('should render dash for null', () => {
+    render(
+      <BooleanCellRenderer
+        value={null}
+        field={{ name: 'active', type: 'boolean' } as any}
+      />
+    );
+    expect(screen.getByText('—')).toBeInTheDocument();
+  });
+
+  it('should render dash for undefined', () => {
+    render(
+      <BooleanCellRenderer
+        value={undefined}
+        field={{ name: 'active', type: 'boolean' } as any}
+      />
+    );
+    expect(screen.getByText('—')).toBeInTheDocument();
+  });
+});
+
+// =========================================================================
+// 5. formatRelativeDate edge cases
+// =========================================================================
+describe('formatRelativeDate', () => {
+  let nowSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    nowSpy = vi.spyOn(Date, 'now').mockReturnValue(new Date('2026-02-24T12:00:00Z').getTime());
+  });
+
+  afterEach(() => {
+    nowSpy.mockRestore();
+  });
+
+  it('should return "-" for null', () => {
+    expect(formatRelativeDate(null as any)).toBe('-');
+  });
+
+  it('should return "-" for empty string', () => {
+    expect(formatRelativeDate('')).toBe('-');
+  });
+
+  it('should return "-" for invalid date', () => {
+    expect(formatRelativeDate('not-a-date')).toBe('-');
+  });
+
+  it('should return "Today" for today', () => {
+    expect(formatRelativeDate('2026-02-24T08:00:00Z')).toBe('Today');
+  });
+
+  it('should return "Yesterday" for yesterday', () => {
+    expect(formatRelativeDate('2026-02-23T08:00:00Z')).toBe('Yesterday');
+  });
+
+  it('should return "Tomorrow" for tomorrow', () => {
+    expect(formatRelativeDate('2026-02-25T08:00:00Z')).toBe('Tomorrow');
+  });
+
+  it('should return "X days ago" for 2-7 days ago', () => {
+    expect(formatRelativeDate('2026-02-21T08:00:00Z')).toBe('3 days ago');
+  });
+
+  it('should return formatted date for >7 days ago', () => {
+    const result = formatRelativeDate('2026-02-10T08:00:00Z');
+    // Should be a formatted date like "Feb 10, 2026", not "14 days ago"
+    expect(result).toContain('Feb');
+    expect(result).toContain('2026');
+  });
+
+  it('should return "In X days" for 2-7 days in the future', () => {
+    expect(formatRelativeDate('2026-02-28T08:00:00Z')).toBe('In 4 days');
+  });
+
+  it('should return formatted date for >7 days in the future', () => {
+    const result = formatRelativeDate('2026-03-15T08:00:00Z');
+    expect(result).toContain('Mar');
+    expect(result).toContain('2026');
+  });
+});
+
+// =========================================================================
+// 6. formatDate with relative style
+// =========================================================================
+describe('formatDate', () => {
+  it('should return "-" for null', () => {
+    expect(formatDate(null as any)).toBe('-');
+  });
+
+  it('should return "-" for invalid date', () => {
+    expect(formatDate('invalid')).toBe('-');
+  });
+
+  it('should format as relative when style is "relative"', () => {
+    // Just ensure it delegates to formatRelativeDate
+    const result = formatDate(new Date(), 'relative');
+    expect(result).toBe('Today');
+  });
+
+  it('should format in short style', () => {
+    const result = formatDate('2026-01-15T08:00:00Z', 'short');
+    expect(result).toBe("Jan 15, '26");
+  });
+
+  it('should format in default style (MMM DD, YYYY)', () => {
+    const result = formatDate('2026-01-15T08:00:00Z');
+    expect(result).toContain('Jan');
+    expect(result).toContain('15');
+    expect(result).toContain('2026');
+  });
+});
diff --git a/packages/fields/src/index.tsx b/packages/fields/src/index.tsx
index 7891a65f6..3c98275eb 100644
--- a/packages/fields/src/index.tsx
+++ b/packages/fields/src/index.tsx
@@ -123,10 +123,10 @@ export function formatRelativeDate(value: string | Date): string {
   if (diffDays === -1) return 'Yesterday';
   if (diffDays < -1) {
     const absDays = Math.abs(diffDays);
-    if (absDays <= 30) return `${absDays} days ago`;
+    if (absDays <= 7) return `${absDays} days ago`;
     return formatDate(date);
   }
-  if (diffDays > 1 && diffDays <= 30) return `In ${diffDays} days`;
+  if (diffDays > 1 && diffDays <= 7) return `In ${diffDays} days`;
   return formatDate(date);
 }
 
@@ -247,6 +247,9 @@ export function PercentCellRenderer({ value, field }: CellRendererProps): React.
  * Boolean field cell renderer (Airtable-style checkbox)
  */
 export function BooleanCellRenderer({ value }: CellRendererProps): React.ReactElement {
+  if (value == null) {
+    return <span className="text-muted-foreground/50 text-xs italic flex items-center justify-center">—</span>;
+  }
   return (
     <div className="flex items-center justify-center">
       <Checkbox checked={!!value} disabled className="pointer-events-none" />
@@ -258,10 +261,24 @@ export function BooleanCellRenderer({ value }: CellRendererProps): React.ReactEl
  * Date field cell renderer
  */
 export function DateCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
+  if (!value) return <span className="text-muted-foreground">-</span>;
   const dateField = field as any;
-  const formatted = formatDate(value, dateField.format);
+  const style = dateField.format || 'relative';
+  const formatted = formatDate(value, style);
   
-  return <span className="tabular-nums">{formatted}</span>;
+  // Determine if date is overdue (in the past)
+  const date = typeof value === 'string' ? new Date(value) : value;
+  const isOverdue = date instanceof Date && !isNaN(date.getTime()) && date < new Date(new Date().setHours(0, 0, 0, 0));
+  const isoString = date instanceof Date && !isNaN(date.getTime()) ? date.toISOString() : String(value);
+  
+  return (
+    <span
+      className={`tabular-nums${isOverdue ? ' text-red-600' : ''}`}
+      title={isoString}
+    >
+      {formatted}
+    </span>
+  );
 }
 
 /**
@@ -300,8 +317,19 @@ export function SelectCellRenderer({ value, field }: CellRendererProps): React.R
   
   if (!value) return <span>-</span>;
   
+  // Priority semantic color mapping (auto-detect from value text)
+  const priorityColorMap: Record<string, string> = {
+    critical: 'red',
+    urgent: 'red',
+    high: 'orange',
+    medium: 'yellow',
+    normal: 'blue',
+    low: 'gray',
+    none: 'gray',
+  };
+
   // Color to Tailwind class mapping for custom Badge styling
-  const getColorClasses = (color?: string) => {
+  const getColorClasses = (color?: string, val?: string) => {
     const colorMap: Record<string, string> = {
       gray: 'bg-gray-100 text-gray-800 border-gray-300',
       red: 'bg-red-100 text-red-800 border-red-300',
@@ -313,7 +341,10 @@ export function SelectCellRenderer({ value, field }: CellRendererProps): React.R
       purple: 'bg-purple-100 text-purple-800 border-purple-300',
       pink: 'bg-pink-100 text-pink-800 border-pink-300',
     };
-    return colorMap[color || 'blue'] || colorMap.blue;
+    // Use explicit color, then try priority semantic color, then default muted
+    const resolvedColor = color
+      || (val ? priorityColorMap[String(val).toLowerCase()] : undefined);
+    return colorMap[resolvedColor || ''] || 'bg-muted text-muted-foreground border-border';
   };
   
   // Handle multiple values
@@ -323,7 +354,7 @@ export function SelectCellRenderer({ value, field }: CellRendererProps): React.R
         {value.map((val, idx) => {
           const option = options.find(opt => opt.value === val);
           const label = option?.label || val;
-          const colorClasses = getColorClasses(option?.color);
+          const colorClasses = getColorClasses(option?.color, val);
           
           return (
             <Badge
@@ -342,7 +373,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 colorClasses = getColorClasses(option?.color);
+  const colorClasses = getColorClasses(option?.color, value);
   
   return (
     <Badge
diff --git a/packages/plugin-grid/src/ObjectGrid.tsx b/packages/plugin-grid/src/ObjectGrid.tsx
index 43615bb0c..bfce0739b 100644
--- a/packages/plugin-grid/src/ObjectGrid.tsx
+++ b/packages/plugin-grid/src/ObjectGrid.tsx
@@ -465,6 +465,17 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
               const inferredType = inferColumnType(col);
               const CellRenderer = inferredType ? getCellRenderer(inferredType) : null;
 
+              // Build field metadata for cell renderers (includes options for select fields)
+              const fieldMeta: Record<string, any> = { name: col.field, type: inferredType || 'text' };
+              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) }));
+              }
+              if ((col as any).options) {
+                fieldMeta.options = (col as any).options;
+              }
+
               // Auto-link primary field (first column) to record detail (Airtable-style)
               const isPrimaryField = colIndex === 0 && !col.link && !col.action;
               const isLinked = col.link || isPrimaryField;
@@ -473,7 +484,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                 // Both link and action: link takes priority for navigation, action executes on secondary interaction
                 cellRenderer = (value: any, row: any) => {
                   const displayContent = CellRenderer
-                    ? <CellRenderer value={value} field={{ name: col.field, type: inferredType || 'text' } as any} />
+                    ? <CellRenderer value={value} field={fieldMeta as any} />
                     : (value != null && value !== '' ? String(value) : <span className="text-muted-foreground/50 text-xs italic">—</span>);
                   return (
                     <button
@@ -493,7 +504,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                 // Link column: clicking navigates to the record detail
                 cellRenderer = (value: any, row: any) => {
                   const displayContent = CellRenderer
-                    ? <CellRenderer value={value} field={{ name: col.field, type: inferredType || 'text' } as any} />
+                    ? <CellRenderer value={value} field={fieldMeta as any} />
                     : (value != null && value !== '' ? String(value) : <span className="text-muted-foreground/50 text-xs italic">—</span>);
                   return (
                     <button
@@ -533,7 +544,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
               } else if (CellRenderer) {
                 // Type-only cell renderer (no link/action)
                 cellRenderer = (value: any) => (
-                  <CellRenderer value={value} field={{ name: col.field, type: inferredType || 'text' } as any} />
+                  <CellRenderer value={value} field={fieldMeta as any} />
                 );
               } else {
                 // Default renderer with empty value handling
diff --git a/packages/plugin-grid/src/__tests__/airtable-style.test.tsx b/packages/plugin-grid/src/__tests__/airtable-style.test.tsx
index f54d537e1..53ad3a94e 100644
--- a/packages/plugin-grid/src/__tests__/airtable-style.test.tsx
+++ b/packages/plugin-grid/src/__tests__/airtable-style.test.tsx
@@ -84,8 +84,11 @@ describe('Auto-type inference: Date fields', () => {
 
     // Should NOT show raw ISO format
     expect(screen.queryByText('2026-02-20T03:46:37.982Z')).not.toBeInTheDocument();
-    // Should show human-readable format
-    expect(screen.getByText('Feb 20, 2026')).toBeInTheDocument();
+    // Should show human-readable format (relative or absolute depending on distance from today)
+    // Date values are rendered in relative format by default
+    const cells = screen.getAllByRole('cell');
+    const dateCell = cells.find(cell => cell.querySelector('span.tabular-nums'));
+    expect(dateCell).toBeInTheDocument();
   });
 
   it('should format created_at fields as datetime', async () => {

From 95667340af85bdbde95fa2552e008d0f0c4c0914 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 24 Feb 2026 06:33:52 +0000
Subject: [PATCH 3/5] refactor: move badge color constants outside components
 per code review feedback

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 packages/fields/src/index.tsx | 71 ++++++++++++++++++-----------------
 1 file changed, 37 insertions(+), 34 deletions(-)

diff --git a/packages/fields/src/index.tsx b/packages/fields/src/index.tsx
index 3c98275eb..3841b478f 100644
--- a/packages/fields/src/index.tsx
+++ b/packages/fields/src/index.tsx
@@ -268,8 +268,11 @@ export function DateCellRenderer({ value, field }: CellRendererProps): React.Rea
   
   // Determine if date is overdue (in the past)
   const date = typeof value === 'string' ? new Date(value) : value;
-  const isOverdue = date instanceof Date && !isNaN(date.getTime()) && date < new Date(new Date().setHours(0, 0, 0, 0));
-  const isoString = date instanceof Date && !isNaN(date.getTime()) ? date.toISOString() : String(value);
+  const isValidDate = date instanceof Date && !isNaN(date.getTime());
+  const startOfToday = new Date();
+  startOfToday.setHours(0, 0, 0, 0);
+  const isOverdue = isValidDate && date < startOfToday;
+  const isoString = isValidDate ? date.toISOString() : String(value);
   
   return (
     <span
@@ -308,6 +311,36 @@ export function DateTimeCellRenderer({ value }: CellRendererProps): React.ReactE
   );
 }
 
+// Priority semantic color mapping (auto-detect from value text)
+const PRIORITY_COLOR_MAP: Record<string, string> = {
+  critical: 'red',
+  urgent: 'red',
+  high: 'orange',
+  medium: 'yellow',
+  normal: 'blue',
+  low: 'gray',
+  none: 'gray',
+};
+
+// Color to Tailwind class mapping for custom Badge styling
+const BADGE_COLOR_MAP: Record<string, string> = {
+  gray: 'bg-gray-100 text-gray-800 border-gray-300',
+  red: 'bg-red-100 text-red-800 border-red-300',
+  orange: 'bg-orange-100 text-orange-800 border-orange-300',
+  yellow: 'bg-yellow-100 text-yellow-800 border-yellow-300',
+  green: 'bg-green-100 text-green-800 border-green-300',
+  blue: 'bg-blue-100 text-blue-800 border-blue-300',
+  indigo: 'bg-indigo-100 text-indigo-800 border-indigo-300',
+  purple: 'bg-purple-100 text-purple-800 border-purple-300',
+  pink: 'bg-pink-100 text-pink-800 border-pink-300',
+};
+
+function getBadgeColorClasses(color?: string, val?: string): string {
+  const resolvedColor = color
+    || (val ? PRIORITY_COLOR_MAP[String(val).toLowerCase()] : undefined);
+  return BADGE_COLOR_MAP[resolvedColor || ''] || 'bg-muted text-muted-foreground border-border';
+}
+
 /**
  * Select field cell renderer (with badges)
  */
@@ -317,36 +350,6 @@ export function SelectCellRenderer({ value, field }: CellRendererProps): React.R
   
   if (!value) return <span>-</span>;
   
-  // Priority semantic color mapping (auto-detect from value text)
-  const priorityColorMap: Record<string, string> = {
-    critical: 'red',
-    urgent: 'red',
-    high: 'orange',
-    medium: 'yellow',
-    normal: 'blue',
-    low: 'gray',
-    none: 'gray',
-  };
-
-  // Color to Tailwind class mapping for custom Badge styling
-  const getColorClasses = (color?: string, val?: string) => {
-    const colorMap: Record<string, string> = {
-      gray: 'bg-gray-100 text-gray-800 border-gray-300',
-      red: 'bg-red-100 text-red-800 border-red-300',
-      orange: 'bg-orange-100 text-orange-800 border-orange-300',
-      yellow: 'bg-yellow-100 text-yellow-800 border-yellow-300',
-      green: 'bg-green-100 text-green-800 border-green-300',
-      blue: 'bg-blue-100 text-blue-800 border-blue-300',
-      indigo: 'bg-indigo-100 text-indigo-800 border-indigo-300',
-      purple: 'bg-purple-100 text-purple-800 border-purple-300',
-      pink: 'bg-pink-100 text-pink-800 border-pink-300',
-    };
-    // Use explicit color, then try priority semantic color, then default muted
-    const resolvedColor = color
-      || (val ? priorityColorMap[String(val).toLowerCase()] : undefined);
-    return colorMap[resolvedColor || ''] || 'bg-muted text-muted-foreground border-border';
-  };
-  
   // Handle multiple values
   if (Array.isArray(value)) {
     return (
@@ -354,7 +357,7 @@ export function SelectCellRenderer({ value, field }: CellRendererProps): React.R
         {value.map((val, idx) => {
           const option = options.find(opt => opt.value === val);
           const label = option?.label || val;
-          const colorClasses = getColorClasses(option?.color, val);
+          const colorClasses = getBadgeColorClasses(option?.color, val);
           
           return (
             <Badge
@@ -373,7 +376,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 colorClasses = getColorClasses(option?.color, value);
+  const colorClasses = getBadgeColorClasses(option?.color, value);
   
   return (
     <Badge

From cf06ff343baa163aa89a458474dde0a2553935d2 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 24 Feb 2026 06:45:54 +0000
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20complete=20remaining=20issue=20requ?=
 =?UTF-8?q?irements=20=E2=80=94=20status=20type=20mapping,=20Overdue=20Xd?=
 =?UTF-8?q?=20format,=20is=5Fcompleted=20green=20indicator?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- getCellRenderer(): add 'status' type → SelectCellRenderer mapping
- formatRelativeDate(): overdue dates now show "Overdue Xd" format (e.g. "Overdue 3d")
- BooleanCellRenderer: is_completed/done fields render as green circle indicator
- Update airtable-style test for new completion indicator
- Add 5 new tests for status type, completion indicator variants

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 .../src/__tests__/cell-renderers.test.tsx     | 68 +++++++++++++++++--
 packages/fields/src/index.tsx                 | 27 +++++++-
 .../src/__tests__/airtable-style.test.tsx     |  8 +--
 3 files changed, 93 insertions(+), 10 deletions(-)

diff --git a/packages/fields/src/__tests__/cell-renderers.test.tsx b/packages/fields/src/__tests__/cell-renderers.test.tsx
index d6ff3d23f..976ac95a8 100644
--- a/packages/fields/src/__tests__/cell-renderers.test.tsx
+++ b/packages/fields/src/__tests__/cell-renderers.test.tsx
@@ -34,6 +34,19 @@ describe('getCellRenderer', () => {
     expect(container.querySelector('[class*="bg-green"]')).toBeInTheDocument();
   });
 
+  it('should return SelectCellRenderer for status type', () => {
+    const renderer = getCellRenderer('status');
+    expect(renderer).toBeDefined();
+    // Verify it renders a badge (same as select)
+    const { container } = render(
+      React.createElement(renderer, {
+        value: 'Active',
+        field: { name: 'status', type: 'status', options: [{ value: 'Active', label: 'Active', color: 'green' }] } as any,
+      })
+    );
+    expect(container.querySelector('[class*="bg-green"]')).toBeInTheDocument();
+  });
+
   it('should return DateCellRenderer for date type', () => {
     const renderer = getCellRenderer('date');
     expect(renderer).toBeDefined();
@@ -204,14 +217,14 @@ describe('DateCellRenderer', () => {
     expect(screen.getByText('Yesterday')).toBeInTheDocument();
   });
 
-  it('should render recent past date as "X days ago"', () => {
+  it('should render recent past date as "Overdue Xd"', () => {
     render(
       <DateCellRenderer
         value="2026-02-20T08:00:00Z"
         field={{ name: 'due_date', type: 'date' } as any}
       />
     );
-    expect(screen.getByText('4 days ago')).toBeInTheDocument();
+    expect(screen.getByText('Overdue 4d')).toBeInTheDocument();
   });
 
   it('should render overdue date with red text styling', () => {
@@ -313,6 +326,53 @@ describe('BooleanCellRenderer', () => {
     );
     expect(screen.getByText('—')).toBeInTheDocument();
   });
+
+  it('should render green circle indicator for is_completed=true', () => {
+    const { container } = render(
+      <BooleanCellRenderer
+        value={true}
+        field={{ name: 'is_completed', type: 'boolean' } as any}
+      />
+    );
+    const indicator = container.querySelector('[data-testid="completion-indicator"]');
+    expect(indicator).toBeInTheDocument();
+    expect(indicator).toHaveClass('bg-green-500');
+  });
+
+  it('should render empty circle indicator for is_completed=false', () => {
+    const { container } = render(
+      <BooleanCellRenderer
+        value={false}
+        field={{ name: 'is_completed', type: 'boolean' } as any}
+      />
+    );
+    const indicator = container.querySelector('[data-testid="completion-indicator"]');
+    expect(indicator).toBeInTheDocument();
+    expect(indicator).toHaveClass('border-2');
+  });
+
+  it('should render green circle indicator for completed=true', () => {
+    const { container } = render(
+      <BooleanCellRenderer
+        value={true}
+        field={{ name: 'completed', type: 'boolean' } as any}
+      />
+    );
+    const indicator = container.querySelector('[data-testid="completion-indicator"]');
+    expect(indicator).toBeInTheDocument();
+    expect(indicator).toHaveClass('bg-green-500');
+  });
+
+  it('should render standard checkbox for non-completion boolean fields', () => {
+    render(
+      <BooleanCellRenderer
+        value={true}
+        field={{ name: 'active', type: 'boolean' } as any}
+      />
+    );
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toHaveAttribute('data-state', 'checked');
+  });
 });
 
 // =========================================================================
@@ -353,8 +413,8 @@ describe('formatRelativeDate', () => {
     expect(formatRelativeDate('2026-02-25T08:00:00Z')).toBe('Tomorrow');
   });
 
-  it('should return "X days ago" for 2-7 days ago', () => {
-    expect(formatRelativeDate('2026-02-21T08:00:00Z')).toBe('3 days ago');
+  it('should return "Overdue Xd" for 2-7 days ago', () => {
+    expect(formatRelativeDate('2026-02-21T08:00:00Z')).toBe('Overdue 3d');
   });
 
   it('should return formatted date for >7 days ago', () => {
diff --git a/packages/fields/src/index.tsx b/packages/fields/src/index.tsx
index 3841b478f..09a86816a 100644
--- a/packages/fields/src/index.tsx
+++ b/packages/fields/src/index.tsx
@@ -123,7 +123,7 @@ export function formatRelativeDate(value: string | Date): string {
   if (diffDays === -1) return 'Yesterday';
   if (diffDays < -1) {
     const absDays = Math.abs(diffDays);
-    if (absDays <= 7) return `${absDays} days ago`;
+    if (absDays <= 7) return `Overdue ${absDays}d`;
     return formatDate(date);
   }
   if (diffDays > 1 && diffDays <= 7) return `In ${diffDays} days`;
@@ -245,11 +245,33 @@ export function PercentCellRenderer({ value, field }: CellRendererProps): React.
 
 /**
  * Boolean field cell renderer (Airtable-style checkbox)
+ * Supports semantic rendering for completion fields (green indicator).
  */
-export function BooleanCellRenderer({ value }: CellRendererProps): React.ReactElement {
+export function BooleanCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
   if (value == null) {
     return <span className="text-muted-foreground/50 text-xs italic flex items-center justify-center">—</span>;
   }
+
+  // Semantic rendering for completion fields (green circle indicator)
+  const fieldName = field?.name?.toLowerCase() || '';
+  const isCompletionField = ['completed', 'is_completed', 'done', 'is_done'].some(
+    f => fieldName === f || fieldName.endsWith(`_${f}`)
+  );
+
+  if (isCompletionField) {
+    return (
+      <div className="flex items-center justify-center">
+        {value ? (
+          <div className="size-5 rounded-full bg-green-500 flex items-center justify-center" data-testid="completion-indicator">
+            <Check className="size-3 text-white" />
+          </div>
+        ) : (
+          <div className="size-5 rounded-full border-2 border-muted-foreground/30" data-testid="completion-indicator" />
+        )}
+      </div>
+    );
+  }
+
   return (
     <div className="flex items-center justify-center">
       <Checkbox checked={!!value} disabled className="pointer-events-none" />
@@ -640,6 +662,7 @@ export function getCellRenderer(fieldType: string): React.FC<CellRendererProps>
     datetime: DateTimeCellRenderer,
     time: TextCellRenderer,
     select: SelectCellRenderer,
+    status: SelectCellRenderer,
     lookup: SelectCellRenderer, // Default fallback
     master_detail: SelectCellRenderer, // Default fallback
     email: EmailCellRenderer,
diff --git a/packages/plugin-grid/src/__tests__/airtable-style.test.tsx b/packages/plugin-grid/src/__tests__/airtable-style.test.tsx
index 53ad3a94e..07ed25d52 100644
--- a/packages/plugin-grid/src/__tests__/airtable-style.test.tsx
+++ b/packages/plugin-grid/src/__tests__/airtable-style.test.tsx
@@ -162,7 +162,7 @@ describe('Auto-type inference: Select/Badge fields', () => {
 // 3. Auto-type inference: Boolean/Checkbox fields
 // =========================================================================
 describe('Auto-type inference: Boolean/Checkbox fields', () => {
-  it('should render is_completed as checkbox', async () => {
+  it('should render is_completed as semantic completion indicator', async () => {
     renderGrid([
       { field: 'subject', label: 'Subject' },
       { field: 'is_completed', label: 'Is Completed' },
@@ -172,9 +172,9 @@ describe('Auto-type inference: Boolean/Checkbox fields', () => {
       expect(screen.getByText('Subject')).toBeInTheDocument();
     });
 
-    // Should render checkboxes (role="checkbox")
-    const checkboxes = screen.getAllByRole('checkbox');
-    expect(checkboxes.length).toBeGreaterThan(0);
+    // Should render green circle completion indicators (not checkboxes)
+    const indicators = screen.getAllByTestId('completion-indicator');
+    expect(indicators.length).toBeGreaterThan(0);
   });
 });
 

From 8535939b74b6377f2f0144af9ed2eb3680af0422 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 24 Feb 2026 06:46:50 +0000
Subject: [PATCH 5/5] fix: improve completion field detection and add
 accessibility attributes

- Use exact field name matching to prevent false positives
- Add role="img" and aria-label to completion indicators

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 packages/fields/src/index.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/fields/src/index.tsx b/packages/fields/src/index.tsx
index 09a86816a..6db95ed9f 100644
--- a/packages/fields/src/index.tsx
+++ b/packages/fields/src/index.tsx
@@ -253,20 +253,20 @@ export function BooleanCellRenderer({ value, field }: CellRendererProps): React.
   }
 
   // Semantic rendering for completion fields (green circle indicator)
+  // Only match exact field names to avoid false positives
   const fieldName = field?.name?.toLowerCase() || '';
-  const isCompletionField = ['completed', 'is_completed', 'done', 'is_done'].some(
-    f => fieldName === f || fieldName.endsWith(`_${f}`)
-  );
+  const isCompletionField = fieldName === 'completed' || fieldName === 'is_completed'
+    || fieldName === 'done' || fieldName === 'is_done';
 
   if (isCompletionField) {
     return (
       <div className="flex items-center justify-center">
         {value ? (
-          <div className="size-5 rounded-full bg-green-500 flex items-center justify-center" data-testid="completion-indicator">
+          <div className="size-5 rounded-full bg-green-500 flex items-center justify-center" role="img" aria-label="Completed" data-testid="completion-indicator">
             <Check className="size-3 text-white" />
           </div>
         ) : (
-          <div className="size-5 rounded-full border-2 border-muted-foreground/30" data-testid="completion-indicator" />
+          <div className="size-5 rounded-full border-2 border-muted-foreground/30" role="img" aria-label="Not completed" data-testid="completion-indicator" />
         )}
       </div>
     );