diff --git a/ROADMAP.md b/ROADMAP.md
index 5d3953481..0a50f84be 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -798,7 +798,7 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 **Global Theme & Design Tokens:**
 - [x] Hardcoded gray colors in `GridField.tsx`, `ReportRenderer.tsx`, and `ObjectGrid.tsx` replaced with theme tokens (`text-muted-foreground`, `bg-muted`, `border-border`, `border-foreground`)
 - [x] Global font-family (`Inter`, ui-sans-serif, system-ui) injected in `index.css` `:root`
-- [x] `--config-panel-width: 280px` CSS custom property added for unified config panel sizing
+- [x] `--config-panel-width` CSS custom property added for unified config panel sizing (updated to `320px` in P2.8)
 - [x] Border radius standardized to `rounded-lg` across report/grid components
 - [x] `transition-colors duration-150` added to all interactive elements (toolbar buttons, tab bar, sidebar menu buttons)
 - [x] `LayoutRenderer.tsx` outer shell `bg-slate-50/50 dark:bg-zinc-950` replaced with `bg-background` theme token
@@ -833,6 +833,48 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 - [x] Active tab indicator changed to bottom border (`border-b-2 border-primary font-medium text-foreground`)
 - [x] `transition-colors duration-150` added to tab buttons
 
+### P2.8 Airtable Parity: Product View & Global UI Detail Optimization
+
+> Platform-level grid, toolbar, sidebar, and config panel optimizations for Airtable-level experience (Issue #768).
+
+**Platform: DataTable & ObjectGrid Enhancements:**
+- [x] `rowStyle` callback prop added to `DataTableSchema` type — enables inline CSSProperties per row
+- [x] `<TableRow>` in data-table.tsx applies `rowStyle` callback for runtime row styling
+- [x] ObjectGrid: `conditionalFormatting` rules wired to `rowStyle` — evaluates both spec-format (`condition`/`style`) and ObjectUI-format (`field`/`operator`/`value`) rules per row using `evaluatePlainCondition` from `@object-ui/core`
+- [x] Row number (#) column: hover shows `<Checkbox>` for multi-select (when `selectable` mode is enabled), replacing expand icon
+
+**Platform: ListView Toolbar:**
+- [x] Visual `<div>` separators (`h-4 w-px bg-border/60`) between toolbar button groups: Search | Hide Fields | Filter/Sort/Group | Color/Density | Export
+- [x] Separators conditionally rendered only when adjacent groups are visible
+- [x] Inline search moved to toolbar left end (`w-48`, Airtable-style)
+- [x] Density button: activated state highlight (`bg-primary/10 border border-primary/20`) when density is non-default
+
+**Platform: ViewTabBar:**
+- [x] Tab "•" dot indicator replaced with descriptive badge (`F`/`S`/`FS`) + tooltip showing "Active filters", "Active sort"
+
+**Platform: Console Sidebar:**
+- [x] Recent items section: default collapsed with chevron toggle (saves sidebar space)
+
+**Platform: ViewConfigPanel Advanced Sections:**
+- [x] `userActions`, `sharing`, and `accessibility` sections set to `defaultCollapsed: true` — common settings remain expanded, advanced settings folded by default
+
+**Platform: Config Panel Width:**
+- [x] `--config-panel-width` CSS variable increased from `280px` to `320px` for wider config panel
+
+**CRM Example: Product Grid Column Configs:**
+- [x] All columns upgraded from `string[]` to `ListColumn[]` with explicit `field`, `label`, `width`, `type`, `align`
+- [x] `IS ACTIVE`: `type: 'boolean'` for `<Checkbox disabled>` rendering
+- [x] Price: `type: 'currency'`, `align: 'right'` for `formatCurrency` formatting
+- [x] Default `rowHeight: 'short'` for compact density
+- [x] Conditional formatting: stock=0 red, stock<5 yellow warning
+- [x] Column widths: NAME 250, SKU 120, CATEGORY 110, PRICE 120, STOCK 80
+
+**Tests:**
+- [x] 7 new CRM metadata tests validating column types, widths, rowHeight, conditionalFormatting
+- [x] 136 ViewConfigPanel tests updated for defaultCollapsed sections (expand before access)
+- [x] 411 ListView + ViewTabBar tests passing
+- [x] 11 AppSidebar tests passing
+
 ### P2.5 PWA & Offline (Real Sync)
 
 - [ ] Background sync queue → real server sync (replace simulation)
diff --git a/apps/console/src/__tests__/ViewConfigPanel.test.tsx b/apps/console/src/__tests__/ViewConfigPanel.test.tsx
index 36b7b048a..ee2f20a84 100644
--- a/apps/console/src/__tests__/ViewConfigPanel.test.tsx
+++ b/apps/console/src/__tests__/ViewConfigPanel.test.tsx
@@ -1310,6 +1310,8 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        // Expand defaultCollapsed userActions section
+        fireEvent.click(screen.getByTestId('section-userActions'));
         expect(screen.getByTestId('toggle-inlineEdit')).toBeInTheDocument();
         expect(screen.getByTestId('toggle-addDeleteRecordsInline')).toBeInTheDocument();
         expect(screen.getByTestId('select-navigation-mode')).toBeInTheDocument();
@@ -1327,6 +1329,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-userActions'));
         fireEvent.click(screen.getByTestId('toggle-inlineEdit'));
         expect(onViewUpdate).toHaveBeenCalledWith('inlineEdit', false);
     });
@@ -1630,6 +1633,8 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        // Expand defaultCollapsed userActions section
+        fireEvent.click(screen.getByTestId('section-userActions'));
         // List-level inline actions should be in the User Actions collapsible section
         expect(screen.getByTestId('toggle-inlineEdit')).toBeInTheDocument();
         expect(screen.getByTestId('toggle-addDeleteRecordsInline')).toBeInTheDocument();
@@ -2105,6 +2110,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-sharing'));
         expect(screen.getByTestId('toggle-sharing-enabled')).toBeInTheDocument();
     });
 
@@ -2118,6 +2124,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-sharing'));
         expect(screen.getByTestId('select-sharing-visibility')).toBeInTheDocument();
         expect(screen.getByTestId('select-sharing-visibility')).toHaveValue('team');
     });
@@ -2134,6 +2141,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-sharing'));
         fireEvent.click(screen.getByTestId('toggle-sharing-enabled'));
         expect(onViewUpdate).toHaveBeenCalledWith('sharing', expect.objectContaining({ enabled: true }));
     });
@@ -2148,6 +2156,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-accessibility'));
         expect(screen.getByTestId('input-aria-label')).toBeInTheDocument();
         expect(screen.getByTestId('input-aria-describedBy')).toBeInTheDocument();
         expect(screen.getByTestId('select-aria-live')).toBeInTheDocument();
@@ -2178,6 +2187,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-userActions'));
         fireEvent.click(screen.getByText('console.objectView.rowActions'));
         expect(screen.getByTestId('row-actions-selector')).toBeInTheDocument();
     });
@@ -2192,6 +2202,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-userActions'));
         fireEvent.click(screen.getByText('console.objectView.bulkActions'));
         expect(screen.getByTestId('bulk-actions-selector')).toBeInTheDocument();
     });
@@ -2285,6 +2296,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-accessibility'));
         fireEvent.change(screen.getByTestId('input-aria-label'), { target: { value: 'Contacts table' } });
         expect(onViewUpdate).toHaveBeenCalledWith('aria', expect.objectContaining({ label: 'Contacts table' }));
     });
@@ -2301,6 +2313,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-accessibility'));
         fireEvent.change(screen.getByTestId('input-aria-describedBy'), { target: { value: 'table-desc' } });
         expect(onViewUpdate).toHaveBeenCalledWith('aria', expect.objectContaining({ describedBy: 'table-desc' }));
     });
@@ -2317,6 +2330,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-accessibility'));
         fireEvent.change(screen.getByTestId('select-aria-live'), { target: { value: 'polite' } });
         expect(onViewUpdate).toHaveBeenCalledWith('aria', expect.objectContaining({ live: 'polite' }));
     });
@@ -2333,6 +2347,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-userActions'));
         fireEvent.click(screen.getByText('console.objectView.rowActions'));
         fireEvent.change(screen.getByTestId('input-rowActions'), { target: { value: 'edit, delete' } });
         expect(onViewUpdate).toHaveBeenCalledWith('rowActions', ['edit', 'delete']);
@@ -2350,6 +2365,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-userActions'));
         fireEvent.click(screen.getByText('console.objectView.bulkActions'));
         fireEvent.change(screen.getByTestId('input-bulkActions'), { target: { value: 'delete, export' } });
         expect(onViewUpdate).toHaveBeenCalledWith('bulkActions', ['delete', 'export']);
@@ -2433,6 +2449,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-userActions'));
         fireEvent.click(screen.getByTestId('toggle-addDeleteRecordsInline'));
         expect(onViewUpdate).toHaveBeenCalledWith('addDeleteRecordsInline', false);
     });
@@ -2449,6 +2466,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-sharing'));
         expect(screen.getByTestId('toggle-sharing-enabled')).toBeInTheDocument();
         expect(screen.queryByTestId('select-sharing-visibility')).not.toBeInTheDocument();
     });
@@ -2463,6 +2481,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-sharing'));
         expect(screen.queryByTestId('select-sharing-visibility')).not.toBeInTheDocument();
     });
 
@@ -2530,6 +2549,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-userActions'));
         fireEvent.click(screen.getByText('console.objectView.bulkActions'));
         fireEvent.change(screen.getByTestId('input-bulkActions'), { target: { value: '' } });
         expect(onViewUpdate).toHaveBeenCalledWith('bulkActions', []);
@@ -2547,6 +2567,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-userActions'));
         fireEvent.click(screen.getByText('console.objectView.rowActions'));
         fireEvent.change(screen.getByTestId('input-rowActions'), { target: { value: '' } });
         expect(onViewUpdate).toHaveBeenCalledWith('rowActions', []);
@@ -2661,6 +2682,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-sharing'));
         fireEvent.change(screen.getByTestId('select-sharing-visibility'), { target: { value: 'organization' } });
         expect(onViewUpdate).toHaveBeenCalledWith('sharing', expect.objectContaining({
             enabled: true,
@@ -2682,6 +2704,7 @@ describe('ViewConfigPanel', () => {
             />
         );
 
+        fireEvent.click(screen.getByTestId('section-accessibility'));
         const select = screen.getByTestId('select-aria-live');
         ['polite', 'assertive', 'off'].forEach((mode) => {
             fireEvent.change(select, { target: { value: mode } });
diff --git a/apps/console/src/components/AppSidebar.tsx b/apps/console/src/components/AppSidebar.tsx
index c6e60f9e4..d2a22bf4d 100644
--- a/apps/console/src/components/AppSidebar.tsx
+++ b/apps/console/src/components/AppSidebar.tsx
@@ -48,6 +48,7 @@ import {
   StarOff,
   Search,
   Pencil,
+  ChevronRight,
 } from 'lucide-react';
 import { NavigationRenderer } from '@object-ui/layout';
 import type { NavigationItem } from '@object-ui/types';
@@ -224,6 +225,9 @@ export function AppSidebar({ activeAppName, onAppChange }: { activeAppName: stri
   // Search filter state for sidebar navigation
   const [navSearchQuery, setNavSearchQuery] = React.useState('');
 
+  // Recent section collapsed by default
+  const [recentExpanded, setRecentExpanded] = React.useState(false);
+
   // Visibility evaluation from Console expression context
   const { evaluator } = useExpressionContext();
   const evalVis = React.useCallback(
@@ -414,13 +418,18 @@ export function AppSidebar({ activeAppName, onAppChange }: { activeAppName: stri
            </SidebarGroup>
          )}
 
-         {/* Recent Items */}
+         {/* Recent Items (default collapsed) */}
          {recentItems.length > 0 && (
            <SidebarGroup>
-             <SidebarGroupLabel className="flex items-center gap-1.5">
+             <SidebarGroupLabel
+               className="flex items-center gap-1.5 cursor-pointer select-none"
+               onClick={() => setRecentExpanded(prev => !prev)}
+             >
+               <ChevronRight className={`h-3 w-3 transition-transform duration-150 ${recentExpanded ? 'rotate-90' : ''}`} />
                <Clock className="h-3.5 w-3.5" />
                Recent
              </SidebarGroupLabel>
+             {recentExpanded && (
              <SidebarGroupContent>
                <SidebarMenu>
                  {recentItems.slice(0, 5).map(item => (
@@ -437,6 +446,7 @@ export function AppSidebar({ activeAppName, onAppChange }: { activeAppName: stri
                  ))}
                </SidebarMenu>
              </SidebarGroupContent>
+             )}
            </SidebarGroup>
          )}
       </SidebarContent>
diff --git a/apps/console/src/utils/view-config-schema.tsx b/apps/console/src/utils/view-config-schema.tsx
index de4b38b35..976448674 100644
--- a/apps/console/src/utils/view-config-schema.tsx
+++ b/apps/console/src/utils/view-config-schema.tsx
@@ -1202,6 +1202,7 @@ function buildUserActionsSection(
         key: 'userActions',
         title: t('console.objectView.userActions'),
         collapsible: true,
+        defaultCollapsed: true,
         fields: [
             // spec: NamedListView.inlineEdit (grid-only: only ObjectGrid supports inline editing)
             buildSwitchField('inlineEdit', t('console.objectView.inlineEdit'), 'toggle-inlineEdit', true,
@@ -1290,6 +1291,7 @@ function buildSharingSection(
         key: 'sharing',
         title: t('console.objectView.sharing'),
         collapsible: true,
+        defaultCollapsed: true,
         fields: [
             // spec: NamedListView.sharing.enabled
             {
@@ -1349,6 +1351,7 @@ function buildAccessibilitySection(
         key: 'accessibility',
         title: t('console.objectView.accessibility'),
         collapsible: true,
+        defaultCollapsed: true,
         fields: [
             // spec: NamedListView.aria.label
             {
diff --git a/examples/crm/src/__tests__/crm-metadata.test.ts b/examples/crm/src/__tests__/crm-metadata.test.ts
index 3710d28c3..c52b2bba1 100644
--- a/examples/crm/src/__tests__/crm-metadata.test.ts
+++ b/examples/crm/src/__tests__/crm-metadata.test.ts
@@ -122,6 +122,68 @@ describe('CRM Metadata Spec Compliance', () => {
     });
   });
 
+  describe('ProductView Airtable Parity', () => {
+    const allProducts = ProductView.listViews.all_products;
+    const activeProducts = ProductView.listViews.active_products;
+
+    it('all_products uses detailed column configs with field, width, and type', () => {
+      const cols = allProducts.columns as Array<Record<string, unknown>>;
+      expect(cols.length).toBe(6);
+      for (const col of cols) {
+        expect(col).toHaveProperty('field');
+        expect(col).toHaveProperty('width');
+      }
+    });
+
+    it('is_active column has boolean type for Checkbox rendering', () => {
+      const cols = allProducts.columns as Array<Record<string, unknown>>;
+      const isActiveCol = cols.find((c) => c.field === 'is_active');
+      expect(isActiveCol).toBeDefined();
+      expect(isActiveCol!.type).toBe('boolean');
+    });
+
+    it('price column has currency type and right alignment', () => {
+      const cols = allProducts.columns as Array<Record<string, unknown>>;
+      const priceCol = cols.find((c) => c.field === 'price');
+      expect(priceCol).toBeDefined();
+      expect(priceCol!.type).toBe('currency');
+      expect(priceCol!.align).toBe('right');
+    });
+
+    it('rowHeight is set to short for compact density', () => {
+      expect(allProducts.rowHeight).toBe('short');
+      expect(activeProducts.rowHeight).toBe('short');
+    });
+
+    it('SKU and CATEGORY columns are narrower than NAME', () => {
+      const cols = allProducts.columns as Array<Record<string, unknown>>;
+      const nameCol = cols.find((c) => c.field === 'name');
+      const skuCol = cols.find((c) => c.field === 'sku');
+      const catCol = cols.find((c) => c.field === 'category');
+      expect((nameCol!.width as number)).toBeGreaterThan(skuCol!.width as number);
+      expect((nameCol!.width as number)).toBeGreaterThan(catCol!.width as number);
+    });
+
+    it('has conditionalFormatting for stock=0 (red) and stock<5 (warning)', () => {
+      const rules = allProducts.conditionalFormatting!;
+      expect(rules.length).toBe(2);
+      const zeroStock = rules.find((r: any) => r.condition?.includes('=== 0'));
+      expect(zeroStock).toBeDefined();
+      expect((zeroStock as any).style.backgroundColor).toBe('#fee2e2');
+      const lowStock = rules.find((r: any) => r.condition?.includes('< 5'));
+      expect(lowStock).toBeDefined();
+      expect((lowStock as any).style.backgroundColor).toBe('#fef9c3');
+    });
+
+    it('active_products also uses detailed column configs', () => {
+      const cols = activeProducts.columns as Array<Record<string, unknown>>;
+      expect(cols.length).toBe(6);
+      const priceCol = cols.find((c) => c.field === 'price');
+      expect(priceCol!.type).toBe('currency');
+      expect(priceCol!.align).toBe('right');
+    });
+  });
+
   describe('Actions', () => {
     it('all actions have name, label, type, and locations', () => {
       for (const action of allActions) {
diff --git a/examples/crm/src/views/product.view.ts b/examples/crm/src/views/product.view.ts
index 60d649d23..74d42d26f 100644
--- a/examples/crm/src/views/product.view.ts
+++ b/examples/crm/src/views/product.view.ts
@@ -5,16 +5,42 @@ export const ProductView = {
       label: 'All Products',
       type: 'grid' as const,
       data: { provider: 'object' as const, object: 'product' },
-      columns: ['name', 'sku', 'category', 'price', 'stock', 'is_active'],
+      columns: [
+        { field: 'name', label: 'NAME', width: 250 },
+        { field: 'sku', label: 'SKU', width: 120 },
+        { field: 'category', label: 'CATEGORY', type: 'select' as const, width: 110 },
+        { field: 'price', label: 'PRICE', type: 'currency' as const, width: 120, align: 'right' as const },
+        { field: 'stock', label: 'STOCK', type: 'number' as const, width: 80, align: 'right' as const },
+        { field: 'is_active', label: 'IS ACTIVE', type: 'boolean' as const, width: 90 },
+      ],
       sort: [{ field: 'name', order: 'asc' as const }],
+      rowHeight: 'short' as const,
+      conditionalFormatting: [
+        {
+          condition: '${data.stock === 0}',
+          style: { backgroundColor: '#fee2e2', color: '#991b1b' },
+        },
+        {
+          condition: '${data.stock < 5}',
+          style: { backgroundColor: '#fef9c3', color: '#854d0e' },
+        },
+      ],
     },
     active_products: {
       name: 'active_products',
       label: 'Active Products',
       type: 'grid' as const,
       data: { provider: 'object' as const, object: 'product' },
-      columns: ['name', 'sku', 'category', 'price', 'stock', 'tags'],
+      columns: [
+        { field: 'name', label: 'NAME', width: 250 },
+        { field: 'sku', label: 'SKU', width: 120 },
+        { field: 'category', label: 'CATEGORY', type: 'select' as const, width: 110 },
+        { field: 'price', label: 'PRICE', type: 'currency' as const, width: 120, align: 'right' as const },
+        { field: 'stock', label: 'STOCK', type: 'number' as const, width: 80, align: 'right' as const },
+        { field: 'tags', label: 'TAGS', type: 'select' as const, width: 130 },
+      ],
       filter: ['is_active', '=', true],
+      rowHeight: 'short' as const,
     },
   },
   form: {
diff --git a/packages/components/src/index.css b/packages/components/src/index.css
index 29399256c..9cf99573e 100644
--- a/packages/components/src/index.css
+++ b/packages/components/src/index.css
@@ -74,7 +74,7 @@
 
   --radius: 0.5rem;
 
-  --config-panel-width: 280px;
+  --config-panel-width: 320px;
 
   --chart-1: 12 76% 61%;
   --chart-2: 173 58% 39%;
diff --git a/packages/components/src/renderers/complex/data-table.tsx b/packages/components/src/renderers/complex/data-table.tsx
index 808a3dba7..55b55a62d 100644
--- a/packages/components/src/renderers/complex/data-table.tsx
+++ b/packages/components/src/renderers/complex/data-table.tsx
@@ -103,6 +103,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     reorderableColumns = true,
     editable = false,
     rowClassName,
+    rowStyle,
     className,
     frozenColumns = 0,
     showRowNumbers = false,
@@ -748,6 +749,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                         rowHasChanges && "bg-amber-50 dark:bg-amber-950/20",
                         rowClassName && rowClassName(row, rowIndex)
                       )}
+                      style={rowStyle ? rowStyle(row, rowIndex) : undefined}
                       onClick={(e) => {
                         if (schema.onRowClick && !e.defaultPrevented) {
                            // Simple heuristic to avoid triggering on interactive elements if they didn't stop propagation
@@ -769,10 +771,18 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                       )}
                       {showRowNumbers && (
                         <TableCell className={cn("text-center w-12 relative", frozenColumns > 0 && "sticky z-10 bg-background")} style={frozenColumns > 0 ? { left: selectable ? 48 : 0 } : undefined}>
-                          <span className="text-xs text-muted-foreground tabular-nums select-none group-hover/row:invisible">
+                          <span className={cn("text-xs text-muted-foreground tabular-nums select-none", selectable ? "group-hover/row:hidden" : "group-hover/row:invisible")}>
                             {globalIndex + 1}
                           </span>
-                          {schema.onRowClick && (
+                          {selectable ? (
+                            <div className="absolute inset-0 hidden group-hover/row:flex items-center justify-center">
+                              <Checkbox
+                                checked={isSelected}
+                                onCheckedChange={(checked) => handleSelectRow(rowId, checked as boolean)}
+                                data-testid="row-hover-checkbox"
+                              />
+                            </div>
+                          ) : schema.onRowClick && (
                             <button
                               type="button"
                               className="absolute inset-0 hidden group-hover/row:flex items-center justify-center text-muted-foreground hover:text-primary"
diff --git a/packages/plugin-grid/src/ObjectGrid.tsx b/packages/plugin-grid/src/ObjectGrid.tsx
index bfce0739b..47c0367aa 100644
--- a/packages/plugin-grid/src/ObjectGrid.tsx
+++ b/packages/plugin-grid/src/ObjectGrid.tsx
@@ -21,7 +21,7 @@
  * - Inline editing support
  */
 
-import React, { useEffect, useState, useCallback } from 'react';
+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';
@@ -30,6 +30,7 @@ import {
   Popover, PopoverContent, PopoverTrigger,
 } from '@object-ui/components';
 import { usePullToRefresh } from '@object-ui/mobile';
+import { evaluatePlainCondition } from '@object-ui/core';
 import { ChevronRight, ChevronDown, Download, Rows2, Rows3, Rows4, AlignJustify, Type, Hash, Calendar, CheckSquare, User, Tag, Clock } from 'lucide-react';
 import { useRowColor } from './useRowColor';
 import { useGroupedData } from './useGroupedData';
@@ -344,6 +345,42 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
   // --- Row color support ---
   const getRowClassName = useRowColor(schema.rowColor);
 
+  // --- Conditional formatting support ---
+  const getRowStyle = useCallback((row: Record<string, unknown>): React.CSSProperties | undefined => {
+    const rules = schema.conditionalFormatting;
+    if (!rules || rules.length === 0) return undefined;
+    for (const rule of rules) {
+      let match = false;
+      const expression =
+        ('condition' in rule ? (rule as any).condition : undefined)
+        || ('expression' in rule ? (rule as any).expression : undefined)
+        || undefined;
+      if (expression) {
+        match = evaluatePlainCondition(expression, row as Record<string, any>);
+      } else if ('field' in rule && 'operator' in rule && (rule as any).field && (rule as any).operator) {
+        const r = rule as any;
+        const fieldValue = row[r.field];
+        switch (r.operator) {
+          case 'equals': match = fieldValue === r.value; break;
+          case 'not_equals': match = fieldValue !== r.value; break;
+          case 'contains': match = typeof fieldValue === 'string' && typeof r.value === 'string' && fieldValue.includes(r.value); break;
+          case 'greater_than': match = typeof fieldValue === 'number' && typeof r.value === 'number' && fieldValue > r.value; break;
+          case 'less_than': match = typeof fieldValue === 'number' && typeof r.value === 'number' && fieldValue < r.value; break;
+          case 'in': match = Array.isArray(r.value) && r.value.includes(fieldValue); break;
+        }
+      }
+      if (match) {
+        const style: React.CSSProperties = {};
+        if ('style' in rule && (rule as any).style) Object.assign(style, (rule as any).style);
+        if ('backgroundColor' in rule && (rule as any).backgroundColor) style.backgroundColor = (rule as any).backgroundColor;
+        if ('textColor' in rule && (rule as any).textColor) style.color = (rule as any).textColor;
+        if ('borderColor' in rule && (rule as any).borderColor) style.borderColor = (rule as any).borderColor;
+        return style;
+      }
+    }
+    return undefined;
+  }, [schema.conditionalFormatting]);
+
   // --- Grouping support ---
   const { groups, isGrouped, toggleGroup } = useGroupedData(schema.grouping, data);
 
@@ -851,6 +888,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     showAddRow: !!operations?.create,
     onAddRecord: onAddRecord,
     rowClassName: schema.rowColor ? (row: any, _idx: number) => getRowClassName(row) : undefined,
+    rowStyle: schema.conditionalFormatting?.length ? (row: any, _idx: number) => getRowStyle(row) : undefined,
     frozenColumns: effectiveFrozenColumns,
     onSelectionChange: (rows: any[]) => {
       setSelectedRows(rows);
diff --git a/packages/plugin-list/src/ListView.tsx b/packages/plugin-list/src/ListView.tsx
index 6af9845e1..dc07f5605 100644
--- a/packages/plugin-list/src/ListView.tsx
+++ b/packages/plugin-list/src/ListView.tsx
@@ -1012,6 +1012,34 @@ export const ListView: React.FC<ListViewProps> = ({
       {/* Airtable-style Toolbar — Row 2: Tool buttons */}
       <div className="border-b px-2 sm:px-4 py-1 flex items-center justify-between gap-1 sm:gap-2 bg-background">
         <div className="flex items-center gap-0.5 overflow-x-auto flex-1 min-w-0">
+          {/* Search (left end — Airtable-style) */}
+          {toolbarFlags.showSearch && (
+            <div className="relative w-48 shrink-0">
+              <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+              <Input
+                placeholder="Search..."
+                value={searchTerm}
+                onChange={(e) => handleSearchChange(e.target.value)}
+                className="pl-7 h-7 text-xs bg-muted/50 border-transparent hover:bg-muted focus:bg-background focus:border-input transition-colors"
+              />
+              {searchTerm && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="absolute right-0.5 top-1/2 -translate-y-1/2 h-5 w-5 p-0 hover:bg-muted-foreground/20"
+                  onClick={() => handleSearchChange('')}
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              )}
+            </div>
+          )}
+
+          {/* --- Separator: Search | Fields --- */}
+          {toolbarFlags.showSearch && toolbarFlags.showHideFields && (
+            <div className="h-4 w-px bg-border/60 mx-0.5 shrink-0" />
+          )}
+
           {/* Hide Fields */}
           {toolbarFlags.showHideFields && (
           <Popover open={showHideFields} onOpenChange={setShowHideFields}>
@@ -1071,6 +1099,11 @@ export const ListView: React.FC<ListViewProps> = ({
           </Popover>
           )}
 
+          {/* --- Separator: Hide Fields | Data Manipulation --- */}
+          {toolbarFlags.showHideFields && (toolbarFlags.showFilters || toolbarFlags.showSort || toolbarFlags.showGroup) && (
+            <div className="h-4 w-px bg-border/60 mx-0.5 shrink-0" />
+          )}
+
           {/* Filter */}
           {toolbarFlags.showFilters && (
           <Popover open={showFilters} onOpenChange={setShowFilters}>
@@ -1209,6 +1242,11 @@ export const ListView: React.FC<ListViewProps> = ({
           </Popover>
           )}
 
+          {/* --- Separator: Data Manipulation | Appearance --- */}
+          {(toolbarFlags.showFilters || toolbarFlags.showSort || toolbarFlags.showGroup) && (toolbarFlags.showColor || toolbarFlags.showDensity) && (
+            <div className="h-4 w-px bg-border/60 mx-0.5 shrink-0" />
+          )}
+
           {/* Color */}
           {toolbarFlags.showColor && (
           <Popover open={showColorPopover} onOpenChange={setShowColorPopover}>
@@ -1266,7 +1304,10 @@ export const ListView: React.FC<ListViewProps> = ({
           <Button
             variant="ghost"
             size="sm"
-            className="h-7 px-2 text-muted-foreground hover:text-primary text-xs hidden lg:flex"
+            className={cn(
+              "h-7 px-2 text-muted-foreground hover:text-primary text-xs hidden lg:flex transition-colors duration-150",
+              density.mode !== 'comfortable' && "bg-primary/10 border border-primary/20 text-primary"
+            )}
             onClick={density.cycle}
             title={`Density: ${density.mode}`}
           >
@@ -1275,6 +1316,11 @@ export const ListView: React.FC<ListViewProps> = ({
           </Button>
           )}
 
+          {/* --- Separator: Appearance | Export --- */}
+          {(toolbarFlags.showColor || toolbarFlags.showDensity) && resolvedExportOptions && schema.allowExport !== false && (
+            <div className="h-4 w-px bg-border/60 mx-0.5 shrink-0" />
+          )}
+
           {/* Export */}
           {resolvedExportOptions && schema.allowExport !== false && (
             <Popover open={showExport} onOpenChange={setShowExport}>
@@ -1336,7 +1382,7 @@ export const ListView: React.FC<ListViewProps> = ({
           )}
         </div>
 
-        {/* Right: Add Record + Search */}
+        {/* Right: Add Record */}
         <div className="flex items-center gap-1">
           {/* Add Record (top position) */}
           {toolbarFlags.showAddRecord && toolbarFlags.addRecordPosition === 'top' && (
@@ -1351,29 +1397,6 @@ export const ListView: React.FC<ListViewProps> = ({
               <span className="hidden sm:inline">{t('list.addRecord')}</span>
             </Button>
           )}
-
-          {/* Search */}
-          {toolbarFlags.showSearch && (
-            <div className="relative w-48">
-              <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
-              <Input
-                placeholder="Search..."
-                value={searchTerm}
-                onChange={(e) => handleSearchChange(e.target.value)}
-                className="pl-7 h-7 text-xs bg-muted/50 border-transparent hover:bg-muted focus:bg-background focus:border-input transition-colors"
-              />
-              {searchTerm && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="absolute right-0.5 top-1/2 -translate-y-1/2 h-5 w-5 p-0 hover:bg-muted-foreground/20"
-                  onClick={() => handleSearchChange('')}
-                >
-                  <X className="h-3 w-3" />
-                </Button>
-              )}
-            </div>
-          )}
         </div>
       </div>
 
diff --git a/packages/plugin-view/src/ViewTabBar.tsx b/packages/plugin-view/src/ViewTabBar.tsx
index 24f37ff72..de6c149dc 100644
--- a/packages/plugin-view/src/ViewTabBar.tsx
+++ b/packages/plugin-view/src/ViewTabBar.tsx
@@ -378,10 +378,19 @@ export const ViewTabBar: React.FC<ViewTabBarProps> = ({
           <span>{view.label}</span>
         )}
         {hasIndicator && (
-          <span
-            data-testid={`view-tab-indicator-${view.id}`}
-            className="ml-0.5 h-1.5 w-1.5 rounded-full bg-primary shrink-0"
-          />
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span
+                data-testid={`view-tab-indicator-${view.id}`}
+                className="ml-1 inline-flex items-center justify-center h-4 min-w-[16px] rounded-full bg-primary/15 text-[10px] font-medium text-primary px-1 shrink-0"
+              >
+                {[view.hasActiveFilters && 'F', view.hasActiveSort && 'S'].filter(Boolean).join('')}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" className="text-xs">
+              {[view.hasActiveFilters && 'Active filters', view.hasActiveSort && 'Active sort'].filter(Boolean).join(', ')}
+            </TooltipContent>
+          </Tooltip>
         )}
         {view.isDefault && (
           <Star className="h-3 w-3 text-amber-500 fill-amber-500 shrink-0" />
@@ -567,7 +576,9 @@ export const ViewTabBar: React.FC<ViewTabBarProps> = ({
                     <ViewIcon className="h-4 w-4 mr-2" />
                     {view.label}
                     {showIndicators && (view.hasActiveFilters || view.hasActiveSort) && (
-                      <span className="ml-auto h-1.5 w-1.5 rounded-full bg-primary" />
+                      <span className="ml-auto inline-flex items-center justify-center h-4 min-w-[16px] rounded-full bg-primary/15 text-[10px] font-medium text-primary px-1">
+                        {[view.hasActiveFilters && 'F', view.hasActiveSort && 'S'].filter(Boolean).join('')}
+                      </span>
                     )}
                   </DropdownMenuItem>
                 );
diff --git a/packages/types/src/data-display.ts b/packages/types/src/data-display.ts
index cbb37dc54..9aef0ac55 100644
--- a/packages/types/src/data-display.ts
+++ b/packages/types/src/data-display.ts
@@ -413,6 +413,11 @@ export interface DataTableSchema extends BaseSchema {
    * Function that returns a CSS class string for each row
    */
   rowClassName?: (row: any, index: number) => string | undefined;
+  /**
+   * Dynamic row inline style
+   * Function that returns CSSProperties for each row (e.g., from conditionalFormatting).
+   */
+  rowStyle?: (row: any, index: number) => React.CSSProperties | undefined;
   /**
    * Number of columns to freeze (left-pin)
    * When set, the first N columns remain fixed while the rest scroll horizontally.