Merge pull request #955 from objectstack-ai/copilot/remove-metadata-button

Author: hotlong

ROADMAP.md

@@ -1189,6 +1189,7 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 - [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.
 - [x] **P1: Actions Merge into Object Definitions** — Fixed action buttons never showing in Console/Studio because example object definitions lacked `actions` field. Added `mergeActionsIntoObjects()` helper (mirrors existing `mergeViewsIntoObjects` pattern) to root config and console shared config. Uses longest-prefix name matching with explicit `objectName` fallback. Created todo task actions (6: complete, start, clone, defer, set_reminder, assign) and kitchen-sink showcase actions (3: change_status, assign_owner, archive). All CRM/Todo/Kitchen Sink objects now serve `actions` in metadata. Fixes #840.
+- [x] **P1: Unified Debug/Metadata Entry — Remove Redundant Metadata Button** — Removed the visible `<MetadataToggle>` button from RecordDetailView, DashboardView, PageView, and ReportView headers. End users no longer see a "</> Metadata" button that had no practical purpose. The MetadataInspector panel is now only accessible via `?__debug` URL parameter (auto-opens when debug mode is active). ObjectView retains its admin-only Design Tools menu entry for metadata inspection. This unifies the debug entry point and improves end-user UX by removing redundant UI elements.
 
 ### Ecosystem & Marketplace
 - Plugin marketplace website with search, ratings, and install count

apps/console/src/components/DashboardView.tsx

@@ -25,7 +25,7 @@ import {
   Plus,
   Trash2,
 } from 'lucide-react';
-import { MetadataToggle, MetadataPanel, useMetadataInspector } from './MetadataInspector';
+import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { SkeletonDashboard } from './skeletons';
 import { useMetadata } from '../context/MetadataProvider';
 import { resolveI18nLabel } from '../utils';
@@ -129,7 +129,7 @@ function extractDashboardConfig(schema: DashboardSchema): Record<string, any> {
 
 export function DashboardView({ dataSource }: { dataSource?: any }) {
   const { dashboardName } = useParams<{ dashboardName: string }>();
-  const { showDebug, toggleDebug } = useMetadataInspector();
+  const { showDebug } = useMetadataInspector();
   const adapter = useAdapter();
   const { t } = useObjectTranslation();
   const [isLoading, setIsLoading] = useState(true);
@@ -416,7 +416,6 @@ export function DashboardView({ dataSource }: { dataSource?: any }) {
             <Pencil className="h-3.5 w-3.5" />
             Edit
           </button>
-          <MetadataToggle open={showDebug} onToggle={toggleDebug} />
         </div>
       </div>
 

apps/console/src/components/PageView.tsx

@@ -9,7 +9,7 @@ import { useParams, useSearchParams } from 'react-router-dom';
 import { SchemaRenderer } from '@object-ui/react';
 import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
 import { FileText, Pencil } from 'lucide-react';
-import { MetadataToggle, MetadataPanel, useMetadataInspector } from './MetadataInspector';
+import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { useMetadata } from '../context/MetadataProvider';
 import { DesignDrawer } from './DesignDrawer';
 import type { PageSchema } from '@object-ui/types';
@@ -21,7 +21,7 @@ const PageCanvasEditor = lazy(() =>
 export function PageView() {
   const { pageName } = useParams<{ pageName: string }>();
   const [searchParams] = useSearchParams();
-  const { showDebug, toggleDebug } = useMetadataInspector();
+  const { showDebug } = useMetadataInspector();
   const [drawerOpen, setDrawerOpen] = useState(false);
 
   // Find page definition from API-driven metadata
@@ -80,7 +80,6 @@ export function PageView() {
                    <Pencil className="h-3.5 w-3.5" />
                    Edit
                  </button>
-                 <MetadataToggle open={showDebug} onToggle={toggleDebug} />
              </div>
              <SchemaRenderer 
                 schema={{

apps/console/src/components/RecordDetailView.tsx

@@ -13,7 +13,7 @@ import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
 import { PresenceAvatars, type PresenceUser } from '@object-ui/collaboration';
 import { useAuth } from '@object-ui/auth';
 import { Database, Users } from 'lucide-react';
-import { MetadataToggle, MetadataPanel, useMetadataInspector } from './MetadataInspector';
+import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { SkeletonDetail } from './skeletons';
 import type { DetailViewSchema, FeedItem } from '@object-ui/types';
 
@@ -27,7 +27,7 @@ const FALLBACK_USER = { id: 'current-user', name: 'Demo User' };
 
 export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailViewProps) {
   const { objectName, recordId } = useParams();
-  const { showDebug, toggleDebug } = useMetadataInspector();
+  const { showDebug } = useMetadataInspector();
   const { user } = useAuth();
   const [isLoading, setIsLoading] = useState(true);
   const [feedItems, setFeedItems] = useState<FeedItem[]>([]);
@@ -286,7 +286,6 @@ export function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailVi
             <PresenceAvatars users={recordViewers} size="sm" maxVisible={4} showStatus />
           </div>
         )}
-        <MetadataToggle open={showDebug} onToggle={toggleDebug} />
       </div>
 
       <div className="flex-1 overflow-hidden flex flex-row">

apps/console/src/components/ReportView.tsx

@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom';
 import { ReportViewer, ReportConfigPanel } from '@object-ui/plugin-report';
 import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
 import { Pencil, BarChart3, Loader2 } from 'lucide-react';
-import { MetadataToggle, MetadataPanel, useMetadataInspector } from './MetadataInspector';
+import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { useMetadata } from '../context/MetadataProvider';
 import { useAdapter } from '../context/AdapterProvider';
 import type { DataSource } from '@object-ui/types';
@@ -22,7 +22,7 @@ const FALLBACK_FIELDS = [
 
 export function ReportView({ dataSource }: { dataSource?: DataSource }) {
   const { reportName } = useParams<{ reportName: string }>();
-  const { showDebug, toggleDebug } = useMetadataInspector();
+  const { showDebug } = useMetadataInspector();
   const adapter = useAdapter();
   const [configPanelOpen, setConfigPanelOpen] = useState(false);
   // Version counter — incremented on save to refresh the stable config reference
@@ -358,7 +358,6 @@ export function ReportView({ dataSource }: { dataSource?: DataSource }) {
              <Pencil className="h-3.5 w-3.5" />
              Edit
            </button>
-           <MetadataToggle open={showDebug} onToggle={toggleDebug} />
         </div>
       </div>