feat: complete debug panel with Perf/Expr/Events tabs, DebugCollector, SchemaRenderer debug attrs, MetadataInspector auto-open

- @object-ui/core: add DebugCollector (perf/expr/event data collection, tree-shakeable singleton)
- @object-ui/components: add Perf/Expr/Events tabs to DebugPanel (7 built-in tabs total)
- @object-ui/react: SchemaRenderer injects data-debug-type/id attrs + reports render perf to DebugCollector when debug enabled
- apps/console: MetadataInspector auto-opens when ?__debug URL param is present
- Add 16 new tests (DebugCollector: 10, DebugPanel tabs: 3, SchemaRenderer debug: 3)

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

Author: Copilot

ROADMAP.md

@@ -865,7 +865,7 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 - [x] **P2: Full Examples Metadata Audit** — Systematic spec compliance audit across all 4 examples: added `type: 'dashboard'` + `description` to todo/kitchen-sink dashboards, refactored msw-todo to use `ObjectSchema.create` + `Field.*` with snake_case field names, added explicit views to kitchen-sink and msw-todo, added missing `successMessage` on CRM opportunity action, 21 automated compliance tests
 - [x] **P2: CRM Dashboard Full provider:'object' Adaptation** — Converted all chart and table widgets in CRM dashboard from static `provider: 'value'` to dynamic `provider: 'object'` with aggregation configs. 12 widgets total: 4 KPI metrics (static), 7 charts (sum/count/avg/max aggregation across opportunity, product, order objects), 1 table (dynamic fetch). Cross-object coverage (order), diverse aggregate functions (sum, count, avg, max). Fixed table `close_date` field alignment. Added i18n for 2 new widgets (10 locales). 9 new CRM metadata tests, 6 new DashboardRenderer rendering tests (area/donut/line/cross-object + edge cases). All provider:'object' paths covered.
 - [x] **P1: Dashboard provider:'object' Crash & Blank Rendering Fixes** — Fixed 3 critical bugs causing all charts to be blank and tables to crash on provider:'object' dashboards: (1) DashboardRenderer `...options` spread was leaking provider config objects as `data` in data-table and pivot schemas — fixed by destructuring `data` out before spread, (2) DataTableRenderer and PivotTable now guard with `Array.isArray()` for graceful degradation when non-array data arrives, (3) ObjectChart now shows visible loading/warning messages instead of silently rendering blank when `dataSource` is missing. Also added provider:'object' support to DashboardGridLayout (charts, tables, pivots). 2 new regression tests.
-- [x] **P1: URL-Driven Debug/Developer Panel** — Universal debug mode activated via `?__debug` URL parameter (amis devtools-style). `@object-ui/core`: exported `DebugFlags`, `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`. `@object-ui/components`: floating `DebugPanel` with Schema/Data/Registry/Flags tabs, plugin-extensible via `extraTabs`. Fine-grained sub-flags: `?__debug_schema`, `?__debug_perf`, `?__debug_data`, `?__debug_expr`, `?__debug_events`, `?__debug_registry`. 32 new tests.
+- [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.
 
 ### Ecosystem & Marketplace
 - Plugin marketplace website with search, ratings, and install count

apps/console/src/components/MetadataInspector.tsx

@@ -5,9 +5,10 @@
  * Used across ObjectView, DashboardView, PageView, ReportView, and RecordDetailView.
  */
 
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { Button } from '@object-ui/components';
 import { Code2, Copy, Check, ChevronDown, ChevronRight } from 'lucide-react';
+import { parseDebugFlags } from '@object-ui/core';
 
 interface MetadataSection {
   title: string;
@@ -128,9 +129,19 @@ export function MetadataPanel({ sections, open }: Omit<MetadataInspectorProps, '
 
 /**
  * Hook to manage MetadataInspector open/close state.
+ * Automatically opens when `?__debug` URL parameter is present.
  */
 export function useMetadataInspector() {
-  const [showDebug, setShowDebug] = useState(false);
+  const autoOpen = useMemo(() => {
+    try {
+      return typeof window !== 'undefined'
+        ? parseDebugFlags(window.location.search).enabled
+        : false;
+    } catch {
+      return false;
+    }
+  }, []);
+  const [showDebug, setShowDebug] = useState(autoOpen);
   return {
     showDebug,
     toggleDebug: () => setShowDebug(prev => !prev),

packages/components/src/debug/DebugPanel.tsx

@@ -8,7 +8,8 @@
 
 import React, { useState, useCallback, useMemo } from 'react';
 import type { DebugFlags } from '@object-ui/core';
-import { ComponentRegistry } from '@object-ui/core';
+import { ComponentRegistry, DebugCollector } from '@object-ui/core';
+import type { PerfEntry, ExprEntry, EventEntry, DebugEntry } from '@object-ui/core';
 import { cn } from '../lib/utils';
 
 /* ------------------------------------------------------------------ */
@@ -106,6 +107,107 @@ function FlagsTab({ flags }: { flags?: DebugFlags }) {
   );
 }
 
+/* ------------------------------------------------------------------ */
+/*  Collector-backed tabs (Perf / Expr / Events)                      */
+/* ------------------------------------------------------------------ */
+
+function useCollectorEntries(kind?: DebugEntry['kind']): DebugEntry[] {
+  const collector = DebugCollector.getInstance();
+  const [entries, setEntries] = useState<DebugEntry[]>(() => collector.getEntries(kind));
+
+  React.useEffect(() => {
+    // Sync on mount in case entries were added before subscribe
+    setEntries(collector.getEntries(kind));
+    const unsub = collector.subscribe(() => {
+      setEntries(collector.getEntries(kind));
+    });
+    return unsub;
+  }, [collector, kind]);
+
+  return entries;
+}
+
+function PerfTab() {
+  const entries = useCollectorEntries('perf');
+  const perfItems = entries.map((e) => e.data as PerfEntry);
+
+  if (perfItems.length === 0) {
+    return <p className="text-xs text-muted-foreground italic">No performance data collected yet</p>;
+  }
+  return (
+    <div className="space-y-1 max-h-[60vh] overflow-auto">
+      {perfItems.map((p, i) => (
+        <div
+          key={i}
+          className={cn(
+            'flex items-center justify-between px-2 py-1 rounded text-xs font-mono',
+            p.durationMs > 16 ? 'bg-red-50 text-red-700' : 'bg-muted/30',
+          )}
+        >
+          <span className="truncate mr-2">{p.type}{p.id ? `:${p.id}` : ''}</span>
+          <span className="shrink-0 tabular-nums">{p.durationMs.toFixed(2)}ms</span>
+        </div>
+      ))}
+      <p className="text-[10px] text-muted-foreground mt-2">
+        {perfItems.length} render{perfItems.length !== 1 ? 's' : ''} tracked
+      </p>
+    </div>
+  );
+}
+
+function ExprTab() {
+  const entries = useCollectorEntries('expr');
+  const exprItems = entries.map((e) => e.data as ExprEntry);
+
+  if (exprItems.length === 0) {
+    return <p className="text-xs text-muted-foreground italic">No expression evaluations tracked yet</p>;
+  }
+  return (
+    <div className="space-y-1.5 max-h-[60vh] overflow-auto">
+      {exprItems.map((ex, i) => (
+        <div key={i} className="px-2 py-1.5 rounded bg-muted/30 text-xs font-mono">
+          <div className="text-muted-foreground truncate">{ex.expression}</div>
+          <div className="mt-0.5">→ {JSON.stringify(ex.result)}</div>
+        </div>
+      ))}
+      <p className="text-[10px] text-muted-foreground mt-2">
+        {exprItems.length} evaluation{exprItems.length !== 1 ? 's' : ''} tracked
+      </p>
+    </div>
+  );
+}
+
+function EventsTab() {
+  const entries = useCollectorEntries('event');
+  const eventItems = entries.map((e) => e.data as EventEntry);
+
+  if (eventItems.length === 0) {
+    return <p className="text-xs text-muted-foreground italic">No events captured yet</p>;
+  }
+  return (
+    <div className="space-y-1.5 max-h-[60vh] overflow-auto">
+      {eventItems.map((ev, i) => (
+        <div key={i} className="px-2 py-1.5 rounded bg-muted/30 text-xs font-mono">
+          <div className="flex items-center justify-between">
+            <span className="font-semibold">{ev.action}</span>
+            <span className="text-[10px] text-muted-foreground tabular-nums">
+              {new Date(ev.timestamp).toLocaleTimeString()}
+            </span>
+          </div>
+          {ev.payload !== undefined && (
+            <pre className="mt-0.5 text-[10px] text-muted-foreground truncate">
+              {JSON.stringify(ev.payload)}
+            </pre>
+          )}
+        </div>
+      ))}
+      <p className="text-[10px] text-muted-foreground mt-2">
+        {eventItems.length} event{eventItems.length !== 1 ? 's' : ''} captured
+      </p>
+    </div>
+  );
+}
+
 /* ------------------------------------------------------------------ */
 /*  DebugPanel                                                        */
 /* ------------------------------------------------------------------ */
@@ -116,6 +218,9 @@ function FlagsTab({ flags }: { flags?: DebugFlags }) {
  * Built-in tabs:
  * - **Schema** — current rendered JSON schema
  * - **Data** — active data context
+ * - **Perf** — component render timing (highlights slow renders >16ms)
+ * - **Expr** — expression evaluation trace
+ * - **Events** — action/event timeline
  * - **Registry** — all registered component types
  * - **Flags** — current debug flags
  *
@@ -133,6 +238,9 @@ export function DebugPanel({
   const builtInTabs: DebugPanelTab[] = useMemo(() => [
     { id: 'schema', label: 'Schema', render: () => <SchemaTab schema={schema} /> },
     { id: 'data', label: 'Data', render: () => <DataTab dataContext={dataContext} /> },
+    { id: 'perf', label: 'Perf', render: () => <PerfTab /> },
+    { id: 'expr', label: 'Expr', render: () => <ExprTab /> },
+    { id: 'events', label: 'Events', render: () => <EventsTab /> },
     { id: 'registry', label: 'Registry', render: () => <RegistryTab /> },
     { id: 'flags', label: 'Flags', render: () => <FlagsTab flags={flags} /> },
   ], [schema, dataContext, flags]);

packages/components/src/debug/__tests__/DebugPanel.test.tsx

@@ -28,6 +28,9 @@ describe('DebugPanel', () => {
     render(<DebugPanel open={true} onClose={vi.fn()} />);
     expect(screen.getByTestId('debug-tab-schema')).toBeInTheDocument();
     expect(screen.getByTestId('debug-tab-data')).toBeInTheDocument();
+    expect(screen.getByTestId('debug-tab-perf')).toBeInTheDocument();
+    expect(screen.getByTestId('debug-tab-expr')).toBeInTheDocument();
+    expect(screen.getByTestId('debug-tab-events')).toBeInTheDocument();
     expect(screen.getByTestId('debug-tab-registry')).toBeInTheDocument();
     expect(screen.getByTestId('debug-tab-flags')).toBeInTheDocument();
   });
@@ -110,4 +113,22 @@ describe('DebugPanel', () => {
     expect(panel).toHaveAttribute('role', 'dialog');
     expect(panel).toHaveAttribute('aria-label', 'Developer Debug Panel');
   });
+
+  it('should show empty state for Perf tab', () => {
+    render(<DebugPanel open={true} onClose={vi.fn()} />);
+    fireEvent.click(screen.getByTestId('debug-tab-perf'));
+    expect(screen.getByTestId('debug-panel-content').textContent).toContain('No performance data');
+  });
+
+  it('should show empty state for Expr tab', () => {
+    render(<DebugPanel open={true} onClose={vi.fn()} />);
+    fireEvent.click(screen.getByTestId('debug-tab-expr'));
+    expect(screen.getByTestId('debug-panel-content').textContent).toContain('No expression evaluations');
+  });
+
+  it('should show empty state for Events tab', () => {
+    render(<DebugPanel open={true} onClose={vi.fn()} />);
+    fireEvent.click(screen.getByTestId('debug-tab-events'));
+    expect(screen.getByTestId('debug-panel-content').textContent).toContain('No events captured');
+  });
 });

packages/core/src/index.ts

@@ -24,4 +24,5 @@ export * from './theme/index.js';
 export * from './data-scope/index.js';
 export * from './errors/index.js';
 export * from './utils/debug.js';
+export * from './utils/debug-collector.js';
 export * from './protocols/index.js';

packages/core/src/utils/__tests__/debug-collector.test.ts

@@ -0,0 +1,102 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { DebugCollector } from '../debug-collector';
+
+describe('DebugCollector', () => {
+  beforeEach(() => {
+    DebugCollector.resetInstance();
+  });
+
+  it('should return a singleton instance', () => {
+    const a = DebugCollector.getInstance();
+    const b = DebugCollector.getInstance();
+    expect(a).toBe(b);
+  });
+
+  it('should collect perf entries', () => {
+    const collector = DebugCollector.getInstance();
+    collector.addPerf({ type: 'button', id: 'btn1', durationMs: 5.2, timestamp: Date.now() });
+    const entries = collector.getEntries('perf');
+    expect(entries).toHaveLength(1);
+    expect(entries[0].kind).toBe('perf');
+    expect((entries[0].data as any).type).toBe('button');
+  });
+
+  it('should collect expr entries', () => {
+    const collector = DebugCollector.getInstance();
+    collector.addExpr({ expression: '${data.x > 1}', result: true, timestamp: Date.now() });
+    const entries = collector.getEntries('expr');
+    expect(entries).toHaveLength(1);
+    expect(entries[0].kind).toBe('expr');
+    expect((entries[0].data as any).result).toBe(true);
+  });
+
+  it('should collect event entries', () => {
+    const collector = DebugCollector.getInstance();
+    collector.addEvent({ action: 'navigate', payload: { to: '/home' }, timestamp: Date.now() });
+    const entries = collector.getEntries('event');
+    expect(entries).toHaveLength(1);
+    expect(entries[0].kind).toBe('event');
+    expect((entries[0].data as any).action).toBe('navigate');
+  });
+
+  it('should return all entries when no kind filter', () => {
+    const collector = DebugCollector.getInstance();
+    collector.addPerf({ type: 'text', durationMs: 1, timestamp: Date.now() });
+    collector.addExpr({ expression: 'a', result: 1, timestamp: Date.now() });
+    collector.addEvent({ action: 'click', timestamp: Date.now() });
+    expect(collector.getEntries()).toHaveLength(3);
+  });
+
+  it('should notify subscribers on new entry', () => {
+    const collector = DebugCollector.getInstance();
+    const fn = vi.fn();
+    collector.subscribe(fn);
+    collector.addPerf({ type: 'card', durationMs: 2, timestamp: Date.now() });
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(fn).toHaveBeenCalledWith(expect.objectContaining({ kind: 'perf' }));
+  });
+
+  it('should allow unsubscribe', () => {
+    const collector = DebugCollector.getInstance();
+    const fn = vi.fn();
+    const unsub = collector.subscribe(fn);
+    unsub();
+    collector.addPerf({ type: 'x', durationMs: 0, timestamp: Date.now() });
+    expect(fn).not.toHaveBeenCalled();
+  });
+
+  it('should clear entries', () => {
+    const collector = DebugCollector.getInstance();
+    collector.addPerf({ type: 'x', durationMs: 0, timestamp: Date.now() });
+    collector.addExpr({ expression: 'a', result: 1, timestamp: Date.now() });
+    collector.clear();
+    expect(collector.getEntries()).toHaveLength(0);
+  });
+
+  it('should cap entries at MAX_ENTRIES', () => {
+    const collector = DebugCollector.getInstance();
+    for (let i = 0; i < 250; i++) {
+      collector.addPerf({ type: `c${i}`, durationMs: i, timestamp: Date.now() });
+    }
+    // MAX_ENTRIES is 200
+    expect(collector.getEntries().length).toBeLessThanOrEqual(200);
+  });
+
+  it('should swallow subscriber errors gracefully', () => {
+    const collector = DebugCollector.getInstance();
+    const badFn = vi.fn(() => { throw new Error('boom'); });
+    const goodFn = vi.fn();
+    collector.subscribe(badFn);
+    collector.subscribe(goodFn);
+    collector.addPerf({ type: 'x', durationMs: 0, timestamp: Date.now() });
+    expect(goodFn).toHaveBeenCalledTimes(1);
+  });
+});