feat: enhance field renderers — email copy, phone call icon + copy, boolean warning badge

- EmailCellRenderer: add hover copy-to-clipboard button alongside mailto link
- PhoneCellRenderer: add phone icon and hover copy-to-clipboard button
- BooleanCellRenderer: render destructive warning Badge for active/enabled/verified=false
- Update existing tests for new boolean behavior, add 12 new field renderer tests
- Update ROADMAP.md with field renderer enhancements

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

Author: Copilot

ROADMAP.md

@@ -1297,7 +1297,12 @@ All 313 `@object-ui/fields` tests pass.
 - [x] Remove `columns: 2` hardcode — let `autoLayout` infer optimal columns
 - [x] Auto-detect `primaryField` from object fields (name/title)
 
-**Tests:** 94 tests passing (11 new) covering hideEmpty filtering, empty section hiding, primaryField/summaryFields rendering, responsive breakpoints, collapseWhenEmpty, autoLayout undefined-columns regression.
+**Field Renderers (`@object-ui/fields`):**
+- [x] `EmailCellRenderer`: mailto link + hover copy-to-clipboard button
+- [x] `PhoneCellRenderer`: tel link with call icon + hover copy-to-clipboard button
+- [x] `BooleanCellRenderer`: warning Badge for active/enabled/verified fields when false (e.g. "Active — Off")
+
+**Tests:** 94 plugin-detail tests passing (11 new), 100 field renderer tests passing (12 new) covering hideEmpty filtering, empty section hiding, primaryField/summaryFields rendering, responsive breakpoints, collapseWhenEmpty, autoLayout undefined-columns regression, email copy, phone copy+icon, boolean warning badge.
 
 **Storybook:** Added `PrimaryFieldWithBadges` and `HideEmptyFields` stories.
 

packages/fields/src/__tests__/boolean-checkbox.test.tsx

@@ -23,11 +23,11 @@ describe('BooleanCellRenderer', () => {
     expect(checkbox).toHaveAttribute('data-state', 'checked');
   });
 
-  it('should render an unchecked checkbox for false values', () => {
+  it('should render an unchecked checkbox for false values (non-status field)', () => {
     render(
       <BooleanCellRenderer
         value={false}
-        field={{ name: 'active', type: 'boolean' } as any}
+        field={{ name: 'flagged', type: 'boolean' } as any}
       />
     );
 
@@ -36,6 +36,19 @@ describe('BooleanCellRenderer', () => {
     expect(checkbox).toHaveAttribute('data-state', 'unchecked');
   });
 
+  it('should render warning badge for active=false', () => {
+    const { container } = render(
+      <BooleanCellRenderer
+        value={false}
+        field={{ name: 'active', type: 'boolean', label: 'Active' } as any}
+      />
+    );
+
+    const badge = container.querySelector('[data-testid="boolean-warning-badge"]');
+    expect(badge).toBeInTheDocument();
+    expect(badge?.textContent).toContain('Off');
+  });
+
   it('should render dash for null/undefined values', () => {
     render(
       <BooleanCellRenderer

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

@@ -16,6 +16,8 @@ import {
   TextCellRenderer,
   DateCellRenderer,
   BooleanCellRenderer,
+  EmailCellRenderer,
+  PhoneCellRenderer,
   PercentCellRenderer,
   humanizeLabel,
   formatDate,
@@ -365,7 +367,7 @@ describe('BooleanCellRenderer', () => {
     render(
       <BooleanCellRenderer
         value={false}
-        field={{ name: 'active', type: 'boolean' } as any}
+        field={{ name: 'flagged', type: 'boolean' } as any}
       />
     );
     const checkbox = screen.getByRole('checkbox');
@@ -440,6 +442,91 @@ describe('BooleanCellRenderer', () => {
   });
 });
 
+// =========================================================================
+// 4b. BooleanCellRenderer — Warning badge for status fields
+// =========================================================================
+describe('BooleanCellRenderer warning badge', () => {
+  it('should render warning badge for active=false', () => {
+    const { container } = render(
+      <BooleanCellRenderer
+        value={false}
+        field={{ name: 'active', type: 'boolean', label: 'Active' } as any}
+      />
+    );
+    const badge = container.querySelector('[data-testid="boolean-warning-badge"]');
+    expect(badge).toBeInTheDocument();
+    expect(badge?.textContent).toContain('Off');
+  });
+
+  it('should render warning badge for is_enabled=false', () => {
+    const { container } = render(
+      <BooleanCellRenderer
+        value={false}
+        field={{ name: 'is_enabled', type: 'boolean', label: 'Enabled' } as any}
+      />
+    );
+    const badge = container.querySelector('[data-testid="boolean-warning-badge"]');
+    expect(badge).toBeInTheDocument();
+  });
+
+  it('should render normal checkbox for active=true', () => {
+    render(
+      <BooleanCellRenderer
+        value={true}
+        field={{ name: 'active', type: 'boolean' } as any}
+      />
+    );
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toHaveAttribute('data-state', 'checked');
+  });
+});
+
+// =========================================================================
+// 4c. EmailCellRenderer — mailto + copy button
+// =========================================================================
+describe('EmailCellRenderer', () => {
+  it('should render mailto link', () => {
+    render(<EmailCellRenderer value="test@example.com" field={{ name: 'email', type: 'email' } as any} />);
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', 'mailto:test@example.com');
+    expect(screen.getByText('test@example.com')).toBeInTheDocument();
+  });
+
+  it('should render copy button', () => {
+    render(<EmailCellRenderer value="test@example.com" field={{ name: 'email', type: 'email' } as any} />);
+    const copyBtn = screen.getByLabelText('Copy email');
+    expect(copyBtn).toBeInTheDocument();
+  });
+
+  it('should render dash for empty value', () => {
+    render(<EmailCellRenderer value={null} field={{ name: 'email', type: 'email' } as any} />);
+    expect(screen.getByText('-')).toBeInTheDocument();
+  });
+});
+
+// =========================================================================
+// 4d. PhoneCellRenderer — tel link + call icon + copy
+// =========================================================================
+describe('PhoneCellRenderer', () => {
+  it('should render tel link with phone icon', () => {
+    render(<PhoneCellRenderer value="+1-555-1234" field={{ name: 'phone', type: 'phone' } as any} />);
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', 'tel:+1-555-1234');
+    expect(screen.getByText('+1-555-1234')).toBeInTheDocument();
+  });
+
+  it('should render copy button', () => {
+    render(<PhoneCellRenderer value="+1-555-1234" field={{ name: 'phone', type: 'phone' } as any} />);
+    const copyBtn = screen.getByLabelText('Copy phone number');
+    expect(copyBtn).toBeInTheDocument();
+  });
+
+  it('should render dash for empty value', () => {
+    render(<PhoneCellRenderer value={null} field={{ name: 'phone', type: 'phone' } as any} />);
+    expect(screen.getByText('-')).toBeInTheDocument();
+  });
+});
+
 // =========================================================================
 // 5. formatRelativeDate edge cases
 // =========================================================================

packages/fields/src/index.tsx

@@ -10,7 +10,7 @@ import React from 'react';
 import type { FieldMetadata, SelectOptionMetadata } from '@object-ui/types';
 import { ComponentRegistry } from '@object-ui/core';
 import { Badge, Avatar, AvatarFallback, Button, Checkbox } from '@object-ui/components';
-import { Check, X } from 'lucide-react';
+import { Check, X, Copy, Phone as PhoneIcon } from 'lucide-react';
 
 import { TextField } from './widgets/TextField';
 import { NumberField } from './widgets/NumberField';
@@ -265,7 +265,8 @@ export function PercentCellRenderer({ value, field }: CellRendererProps): React.
 
 /**
  * Boolean field cell renderer (Airtable-style checkbox)
- * Supports semantic rendering for completion fields (green indicator).
+ * Supports semantic rendering for completion fields (green indicator)
+ * and warning badge for active/enabled fields when false.
  */
 export function BooleanCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
   if (value == null) {
@@ -292,6 +293,19 @@ export function BooleanCellRenderer({ value, field }: CellRendererProps): React.
     );
   }
 
+  // Warning badge for active/enabled fields when false
+  const isStatusField = fieldName === 'active' || fieldName === 'is_active'
+    || fieldName === 'enabled' || fieldName === 'is_enabled'
+    || fieldName === 'verified' || fieldName === 'is_verified';
+
+  if (isStatusField && !value) {
+    return (
+      <Badge variant="destructive" className="text-xs" data-testid="boolean-warning-badge">
+        {field?.label || humanizeLabel(field?.name || 'Inactive')} — Off
+      </Badge>
+    );
+  }
+
   return (
     <div className="flex items-center justify-center">
       <Checkbox checked={!!value} disabled className="pointer-events-none" />
@@ -436,19 +450,44 @@ export function SelectCellRenderer({ value, field }: CellRendererProps): React.R
 export function EmailCellRenderer({ value }: CellRendererProps): React.ReactElement {
   if (!value) return <span>-</span>;
 
+  const [copied, setCopied] = React.useState(false);
+
+  const handleCopy = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    navigator.clipboard.writeText(String(value)).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+  
   return (
-    <Button
-      variant="link"
-      className="p-0 h-auto font-normal text-blue-600 hover:text-blue-800"
-      asChild
-    >
-      <a
-        href={`mailto:${value}`}
-        onClick={(e) => e.stopPropagation()}
+    <span className="inline-flex items-center gap-1 group/email">
+      <Button
+        variant="link"
+        className="p-0 h-auto font-normal text-blue-600 hover:text-blue-800"
+        asChild
       >
-        {value}
-      </a>
-    </Button>
+        <a
+          href={`mailto:${value}`}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {value}
+        </a>
+      </Button>
+      <button
+        type="button"
+        className="opacity-0 group-hover/email:opacity-100 transition-opacity p-0.5 rounded hover:bg-muted"
+        onClick={handleCopy}
+        aria-label="Copy email"
+      >
+        {copied ? (
+          <Check className="h-3 w-3 text-green-600" />
+        ) : (
+          <Copy className="h-3 w-3 text-muted-foreground" />
+        )}
+      </button>
+    </span>
   );
 }
 
@@ -482,14 +521,40 @@ export function UrlCellRenderer({ value }: CellRendererProps): React.ReactElemen
 export function PhoneCellRenderer({ value }: CellRendererProps): React.ReactElement {
   if (!value) return <span>-</span>;
 
+  const [copied, setCopied] = React.useState(false);
+
+  const handleCopy = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    navigator.clipboard.writeText(String(value)).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+  
   return (
-    <a
-      href={`tel:${value}`}
-      className="text-blue-600 hover:text-blue-800"
-      onClick={(e) => e.stopPropagation()}
-    >
-      {value}
-    </a>
+    <span className="inline-flex items-center gap-1 group/phone">
+      <a
+        href={`tel:${value}`}
+        className="inline-flex items-center gap-1 text-blue-600 hover:text-blue-800"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <PhoneIcon className="h-3 w-3" />
+        {value}
+      </a>
+      <button
+        type="button"
+        className="opacity-0 group-hover/phone:opacity-100 transition-opacity p-0.5 rounded hover:bg-muted"
+        onClick={handleCopy}
+        aria-label="Copy phone number"
+      >
+        {copied ? (
+          <Check className="h-3 w-3 text-green-600" />
+        ) : (
+          <Copy className="h-3 w-3 text-muted-foreground" />
+        )}
+      </button>
+    </span>
   );
 }