feat: complete remaining issue requirements — status type mapping, Overdue Xd format, is_completed green indicator

- 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>

Author: Copilot

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', () => {

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,

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);
   });
 });