Merge pull request #930 from objectstack-ai/copilot/optimize-opportunity-list-view

Author: hotlong

ROADMAP.md

@@ -1144,6 +1144,7 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 - [x] **P1: URL-Driven Debug/Developer Panel** — Universal debug mode activated via `?__debug` URL parameter (amis devtools-style). `@object-ui/core`: exported `DebugFlags`, `DebugCollector` (perf/expr/event data collection, tree-shakeable), `parseDebugFlags()`, enhanced `isDebugEnabled()` (URL → globalThis → env resolution, SSR-safe). `@object-ui/react`: `useDebugMode` hook with URL detection, Ctrl+Shift+D shortcut, manual toggle; `SchemaRendererContext` extended with `debugFlags`; `SchemaRenderer` injects `data-debug-type`/`data-debug-id` attrs + reports render perf to `DebugCollector` when debug enabled. `@object-ui/components`: floating `DebugPanel` with 7 built-in tabs (Schema, Data, Perf, Expr, Events, Registry, Flags), plugin-extensible via `extraTabs`. Console `MetadataInspector` auto-opens when `?__debug` detected. Fine-grained sub-flags: `?__debug_schema`, `?__debug_perf`, `?__debug_data`, `?__debug_expr`, `?__debug_events`, `?__debug_registry`. 48 new tests.
 - [x] **P1: Chart Widget Server-Side Aggregation** — Fixed chart widgets (bar/line/area/pie/donut/scatter) downloading all raw data and aggregating client-side. Added optional `aggregate()` method to `DataSource` interface (`AggregateParams`, `AggregateResult` types) enabling server-side grouping/aggregation via analytics API (e.g. `GET /api/v1/analytics/{resource}?category=…&metric=…&agg=…`). `ObjectChart` now prefers `dataSource.aggregate()` when available, falling back to `dataSource.find()` + client-side aggregation for backward compatibility. Implemented `aggregate()` in `ValueDataSource` (in-memory), `ApiDataSource` (HTTP), and `ObjectStackAdapter` (analytics API with client-side fallback). Only detail widgets (grid/table/list) continue to fetch full data. 9 new tests.
 - [x] **P1: Spec-Aligned CRM I18n** — Fixed CRM internationalization not taking effect on the console. Root cause: CRM metadata used plain string labels instead of spec-aligned `I18nLabel` objects. Fix: (1) Updated CRM app/dashboard/navigation metadata to use `I18nLabel` objects (`{ key, defaultValue }`) per spec. (2) Updated `NavigationItem` and `NavigationArea` types to support I18nLabel. (3) Added `resolveLabel()` helper in NavigationRenderer. (4) Updated `resolveI18nLabel()` to accept `t()` function for translation. (5) Added `loadLanguage` callback in I18nProvider for API-based translation loading. (6) Added `/api/v1/i18n/:lang` endpoint to mock server. Console contains zero CRM-specific code.
+- [x] **P0: Opportunity List View & ObjectDef Column Enrichment** — Fixed ObjectGrid not using objectDef field metadata for type-aware rendering when columns are `string[]` or `ListColumn[]` without full options. (1) Schema resolution always fetches full schema from DataSource for field type metadata. (2) String[] column path enriched with objectDef types, options (with colors), currency, precision for proper CurrencyCellRenderer, SelectCellRenderer (colored badges), PercentCellRenderer, DateCellRenderer. (3) ListColumn[] fieldMeta deep-merged with objectDef field properties (select options with colors, currency code, precision). (4) Opportunity view columns upgraded from bare `string[]` to `ListColumn[]` with explicit types, alignment, and summary aggregation. 9 new tests.
 
 ### Ecosystem & Marketplace
 - Plugin marketplace website with search, ratings, and install count

examples/crm/src/views/opportunity.view.ts

@@ -5,7 +5,14 @@ export const OpportunityView = {
       label: 'All Opportunities',
       type: 'grid' as const,
       data: { provider: 'object' as const, object: 'opportunity' },
-      columns: ['name', 'amount', 'stage', 'close_date', 'probability', 'forecast_category'],
+      columns: [
+        { field: 'name', label: 'Opportunity Name', link: true },
+        { field: 'amount', label: 'Amount', type: 'currency' as const, align: 'right' as const, summary: 'sum' as const },
+        { field: 'stage', label: 'Stage', type: 'select' as const },
+        { field: 'close_date', label: 'Close Date', type: 'date' as const },
+        { field: 'probability', label: 'Probability', type: 'percent' as const, align: 'right' as const, summary: 'avg' as const },
+        { field: 'forecast_category', label: 'Forecast Category', type: 'select' as const },
+      ],
       sort: [{ field: 'close_date', order: 'asc' as const }],
     },
     pipeline: {
@@ -24,7 +31,13 @@ export const OpportunityView = {
       label: 'Closing This Month',
       type: 'grid' as const,
       data: { provider: 'object' as const, object: 'opportunity' },
-      columns: ['name', 'amount', 'stage', 'close_date', 'probability'],
+      columns: [
+        { field: 'name', label: 'Opportunity Name', link: true },
+        { field: 'amount', label: 'Amount', type: 'currency' as const, align: 'right' as const },
+        { field: 'stage', label: 'Stage', type: 'select' as const },
+        { field: 'close_date', label: 'Close Date', type: 'date' as const },
+        { field: 'probability', label: 'Probability', type: 'percent' as const, align: 'right' as const },
+      ],
       sort: [{ field: 'close_date', order: 'asc' as const }],
     },
   },

packages/plugin-grid/src/ObjectGrid.tsx

@@ -305,14 +305,14 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
         let resolvedSchema: any = null;
         const cols = normalizeColumns(schemaColumns) || schemaFields;
 
-        if (cols && objectName) {
-          // We have explicit columns — use a minimal schema stub
-          resolvedSchema = { name: objectName, fields: {} };
-        } else if (objectName && dataSource) {
-          // Fetch full schema from DataSource
+        if (objectName && dataSource) {
+          // Always fetch full schema for field type metadata (enables rich type-aware rendering)
           const schemaData = await dataSource.getObjectSchema(objectName);
           if (cancelled) return;
           resolvedSchema = schemaData;
+        } else if (cols && objectName) {
+          // Fallback: minimal schema stub when no dataSource available
+          resolvedSchema = { name: objectName, fields: {} };
         } else if (!objectName) {
           throw new Error('Object name required for data fetching');
         } else {
@@ -595,14 +595,23 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
               // Build custom cell renderer based on column configuration
               let cellRenderer: ((value: any, row: any) => React.ReactNode) | undefined;
 
-              // Type-based cell renderer with auto-inference (e.g., "currency", "date", "boolean")
-              const inferredType = inferColumnType(col);
+              // Type-based cell renderer: explicit col type > objectDef type > heuristic inference
+              const objectDefField = objectSchema?.fields?.[col.field];
+              const inferredType = col.type || objectDefField?.type || inferColumnType({ field: col.field }) || null;
               const CellRenderer = inferredType ? getCellRenderer(inferredType) : null;
 
-              // Build field metadata for cell renderers (includes options for select fields)
+              // Build field metadata for cell renderers with objectDef enrichment
               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
+              // Merge objectDef field properties (options with colors, currency, precision, etc.)
+              if (objectDefField) {
+                if (objectDefField.label) fieldMeta.label = objectDefField.label;
+                if (objectDefField.currency) fieldMeta.currency = objectDefField.currency;
+                if (objectDefField.precision !== undefined) fieldMeta.precision = objectDefField.precision;
+                if (objectDefField.format) fieldMeta.format = objectDefField.format;
+                if (objectDefField.options) fieldMeta.options = objectDefField.options;
+              }
+              // Auto-generate options from data for inferred select without existing options
+              if (inferredType === 'select' && !fieldMeta.options) {
                 const uniqueValues = Array.from(new Set(data.map(row => row[col.field]).filter(Boolean)));
                 fieldMeta.options = uniqueValues.map(v => ({ value: v, label: humanizeLabel(String(v)) }));
               }
@@ -735,14 +744,76 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
         }
       }
 
-      // String array format - filter out invalid entries
+      // String array format - enrich with objectDef field metadata for type-aware rendering
       return (cols as string[])
         .filter((fieldName) => typeof fieldName === 'string' && fieldName.trim().length > 0)
-        .map((fieldName) => {
-          const fieldLabel = objectSchema?.fields?.[fieldName]?.label;
+        .map((fieldName, colIndex) => {
+          const fieldDef = objectSchema?.fields?.[fieldName];
+          const fieldLabel = fieldDef?.label;
+          const header = fieldLabel || fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/_/g, ' ');
+
+          // Resolve type: objectDef type > heuristic inference (consistent with ListColumn path)
+          const resolvedType = fieldDef?.type || inferColumnType({ field: fieldName }) || null;
+          const CellRenderer = resolvedType ? getCellRenderer(resolvedType) : null;
+
+          // Build field metadata with objectDef enrichment
+          const fieldMeta: Record<string, any> = { name: fieldName, type: resolvedType || 'text' };
+          if (fieldDef) {
+            if (fieldDef.label) fieldMeta.label = fieldDef.label;
+            if (fieldDef.currency) fieldMeta.currency = fieldDef.currency;
+            if (fieldDef.precision !== undefined) fieldMeta.precision = fieldDef.precision;
+            if (fieldDef.format) fieldMeta.format = fieldDef.format;
+            if (fieldDef.options) fieldMeta.options = fieldDef.options;
+          }
+          // Auto-generate select options from data when no options defined
+          if (resolvedType === 'select' && !fieldMeta.options) {
+            const uniqueValues = Array.from(new Set(data.map(row => row[fieldName]).filter(Boolean)));
+            fieldMeta.options = uniqueValues.map((v: any) => ({ value: v, label: humanizeLabel(String(v)) }));
+          }
+
+          const numericTypes = ['number', 'currency', 'percent'];
+          const inferredAlign = resolvedType && numericTypes.includes(resolvedType) ? 'right' as const : undefined;
+
+          // Auto-link primary field (first column) to record detail
+          const isPrimaryField = colIndex === 0;
+          let cellRenderer: ((value: any, row?: any) => React.ReactNode) | undefined;
+
+          if (isPrimaryField && CellRenderer) {
+            cellRenderer = (value: any, row: any) => {
+              const displayContent = <CellRenderer value={value} field={fieldMeta as any} />;
+              return (
+                <button
+                  type="button"
+                  className="text-primary font-medium underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
+                  data-testid="primary-field-link"
+                  onClick={(e) => { e.stopPropagation(); navigation.handleClick(row); }}
+                >
+                  {displayContent}
+                </button>
+              );
+            };
+          } else if (isPrimaryField) {
+            cellRenderer = (value: any, row: any) => (
+              <button
+                type="button"
+                className="text-primary font-medium underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
+                data-testid="primary-field-link"
+                onClick={(e) => { e.stopPropagation(); navigation.handleClick(row); }}
+              >
+                {value != null && value !== '' ? String(value) : <span className="text-muted-foreground/50 text-xs italic">—</span>}
+              </button>
+            );
+          } else if (CellRenderer) {
+            cellRenderer = (value: any) => <CellRenderer value={value} field={fieldMeta as any} />;
+          }
+
           return {
-            header: fieldLabel || fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/_/g, ' '),
+            header,
             accessorKey: fieldName,
+            ...(resolvedType && { headerIcon: getTypeIcon(resolvedType) }),
+            ...(inferredAlign && { align: inferredAlign }),
+            ...(cellRenderer && { cell: cellRenderer }),
+            sortable: fieldDef?.sortable !== false,
           };
         });
     }