fix: enhance type handling in kernel and grid components, update documentation for clarity

Author: hotlong

apps/console/src/mocks/createKernel.ts

@@ -12,7 +12,7 @@
  * see https://github.com/objectstack-ai/spec
  */
 
-import { ObjectKernel, DriverPlugin, AppPlugin } from '@objectstack/runtime';
+import { ObjectKernel, DriverPlugin, AppPlugin, type Plugin } from '@objectstack/runtime';
 import { ObjectQLPlugin } from '@objectstack/objectql';
 import { InMemoryDriver, MemoryAnalyticsService } from '@objectstack/driver-memory';
 import { MSWPlugin } from '@objectstack/plugin-msw';
@@ -312,12 +312,12 @@ export async function createKernel(options: KernelOptions): Promise<KernelResult
     skipSystemValidation
   });
 
-  await kernel.use(new ObjectQLPlugin());
+  await kernel.use(new ObjectQLPlugin() as unknown as Plugin);
   await kernel.use(new DriverPlugin(driver, 'memory'));
   for (const config of configs) {
     await kernel.use(new AppPlugin(config));
   }
-  await kernel.use(new SetupPlugin());
+  await kernel.use(new SetupPlugin() as unknown as Plugin);
 
   // Register MemoryAnalyticsService so that HttpDispatcher can serve
   // /api/v1/analytics/* endpoints in demo/MSW/dev environments.

examples/msw-todo/src/mocks/browser.ts

@@ -5,7 +5,7 @@
  * and the MSW Plugin which automatically exposes the API.
  */
 
-import { ObjectKernel, DriverPlugin, AppPlugin } from '@objectstack/runtime';
+import { ObjectKernel, DriverPlugin, AppPlugin, type Plugin } from '@objectstack/runtime';
 import { ObjectQLPlugin } from '@objectstack/objectql';
 import { InMemoryDriver } from '@objectstack/driver-memory';
 import { MSWPlugin } from '@objectstack/plugin-msw';
@@ -27,20 +27,20 @@ export async function startMockServer() {
   });
 
   // Register ObjectQL engine
-  await kernel.use(new ObjectQLPlugin())
-    
+  await kernel.use(new ObjectQLPlugin() as unknown as Plugin)
+
   // Register the driver
-  await kernel.use(new DriverPlugin(driver, 'memory'))
-    
+  await kernel.use(new DriverPlugin(driver, 'memory') as unknown as Plugin)
+
   // Load todo app config as a plugin
-  await kernel.use(new AppPlugin(todoConfig))
-    
+  await kernel.use(new AppPlugin(todoConfig) as unknown as Plugin)
+
   // MSW Plugin (intercepts network requests)
   await kernel.use(new MSWPlugin({
     enableBrowser: true,
     baseUrl: '/api/v1',
     logRequests: true
-  }));
+  }) as unknown as Plugin);
 
   await kernel.bootstrap();
 

objectstack.config.ts

@@ -9,7 +9,7 @@ import { ObjectQLPlugin } from '@objectstack/objectql';
 import { InMemoryDriver } from '@objectstack/driver-memory';
 import { HonoServerPlugin } from '@objectstack/plugin-hono-server';
 import { AuthPlugin } from '@objectstack/plugin-auth';
-import { SetupPlugin, SETUP_APP_DEFAULTS } from '@objectstack/plugin-setup';
+import { SetupPlugin } from '@objectstack/plugin-setup';
 import { ConsolePlugin } from '@object-ui/console';
 import { createMemoryI18n } from '@objectstack/core';
 import { mergeViewsIntoObjects } from '@object-ui/core';
@@ -58,20 +58,20 @@ class MemoryI18nPlugin {
 export default {
   plugins: [
     new MemoryI18nPlugin(),
+    // SetupPlugin first: registers setupNav during init for contributing plugins,
+    // and registers the merged Setup app during start before ObjectQL scans.
+    new SetupPlugin(),
     new ObjectQLPlugin(),
     new DriverPlugin(new InMemoryDriver()),
     // Each example stack loaded as an independent AppPlugin
     new AppPlugin(prepareConfig(crmConfig)),
     new AppPlugin(prepareConfig(todoConfig)),
     new AppPlugin(prepareConfig(kitchenSinkConfig)),
-    // Setup App registered via AppPlugin so ObjectQLPlugin discovers it.
-    // SetupPlugin also registers setupNav service for future navigation contributions.
-    new AppPlugin({ apps: [SETUP_APP_DEFAULTS], manifest: { id: 'setup', name: 'setup' } }),
+    // AuthPlugin after ObjectQL (needs 'data' service) and after SetupPlugin (uses setupNav)
     new AuthPlugin({
       secret: process.env.AUTH_SECRET || 'objectui-dev-secret',
       baseUrl: 'http://localhost:3000',
     }),
-    new SetupPlugin(),
     new HonoServerPlugin({ port: 3000 }),
     new ConsolePlugin(),
   ],

packages/components/src/renderers/complex/data-table.tsx

@@ -974,7 +974,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                             ) : typeof col.cell === 'function' ? (
                               col.cell(cellValue, row)
                             ) : (
-                              cellValue
+                              cellValue != null && typeof cellValue === 'object' ? String(cellValue) : cellValue
                             )}
                           </TableCell>
                         );

packages/plugin-grid/src/ObjectGrid.tsx

@@ -1262,7 +1262,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                 {/* Title row - Name as bold prominent title */}
                 {titleCol && (
                   <div className="font-semibold text-sm truncate mb-1">
-                    {row[titleCol.accessorKey] ?? '—'}
+                    {row[titleCol.accessorKey] != null && typeof row[titleCol.accessorKey] === 'object' ? String(row[titleCol.accessorKey]) : (row[titleCol.accessorKey] ?? '—')}
                   </div>
                 )}
 
@@ -1273,15 +1273,15 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                       <span className="text-sm tabular-nums font-medium">
                         {typeof row[amountCol.accessorKey] === 'number'
                           ? formatCompactCurrency(row[amountCol.accessorKey])
-                          : row[amountCol.accessorKey] ?? '—'}
+                          : (row[amountCol.accessorKey] != null && typeof row[amountCol.accessorKey] === 'object' ? String(row[amountCol.accessorKey]) : (row[amountCol.accessorKey] ?? '—'))}
                       </span>
                     )}
                     {stageCol && row[stageCol.accessorKey] && (
                       <Badge
                         variant="outline"
                         className={`text-xs shrink-0 max-w-[140px] truncate ${stageBadgeColor(String(row[stageCol.accessorKey]))}`}
                       >
-                        {row[stageCol.accessorKey]}
+                        {String(row[stageCol.accessorKey])}
                       </Badge>
                     )}
                   </div>