fix: address code review feedback - extract variables, add JSX parens, improve test coverage

- Extract headerClassName and handleHeaderClick variables for readability
- Add parentheses around JSX elements in ternary operators
- Add comment documenting SEMANTIC_COLOR_MAP key convention
- Add test cases for hyphen and space normalization in status values

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

Author: Copilot

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

@@ -275,6 +275,26 @@ describe('SelectCellRenderer', () => {
     expect(container.querySelector('[class*="bg-blue-100"]')).toBeInTheDocument();
   });
 
+  it('should auto-detect status semantic colors with hyphen (in-progress → blue)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="in-progress"
+        field={{ name: 'status', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-blue-100"]')).toBeInTheDocument();
+  });
+
+  it('should auto-detect status semantic colors with spaces (in progress → blue)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="in progress"
+        field={{ name: 'status', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-blue-100"]')).toBeInTheDocument();
+  });
+
   it('should render dash for null/empty value', () => {
     render(
       <SelectCellRenderer

packages/fields/src/index.tsx

@@ -369,6 +369,7 @@ export function DateTimeCellRenderer({ value }: CellRendererProps): React.ReactE
 }
 
 // Semantic color mapping (auto-detect from value text for priority & status fields)
+// Keys use underscore notation; lookup normalizes spaces/hyphens to underscores automatically.
 const SEMANTIC_COLOR_MAP: Record<string, string> = {
   // Priority values
   critical: 'red',

packages/plugin-detail/src/RelatedList.tsx

@@ -260,15 +260,18 @@ export const RelatedList: React.FC<RelatedListProps> = ({
 
   const hasRowActions = !!onRowEdit || !!onRowDelete;
 
+  const headerClassName = collapsible ? 'cursor-pointer select-none' : undefined;
+  const handleHeaderClick = collapsible ? () => setCollapsed((c) => !c) : undefined;
+
   return (
     <Card className={className}>
-      <CardHeader className={collapsible ? 'cursor-pointer select-none' : undefined} onClick={collapsible ? () => setCollapsed((c) => !c) : undefined}>
+      <CardHeader className={headerClassName} onClick={handleHeaderClick}>
         <CardTitle className="flex items-center justify-between">
           <div className="flex items-center gap-2">
             {collapsible && (
               collapsed
-                ? <ChevronRight className="h-4 w-4 text-muted-foreground" />
-                : <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                ? (<ChevronRight className="h-4 w-4 text-muted-foreground" />)
+                : (<ChevronDown className="h-4 w-4 text-muted-foreground" />)
             )}
             <span>{title}</span>
             <span className="text-sm font-normal text-muted-foreground">