feat(studio): replace hardcoded sidebar groups with plugin-contributed groups

- Remove hardcoded PROTOCOL_GROUPS array
- Add useSidebarGroups() and useAllMetadataIcons() hooks
- Create icon string to Lucide component mapping
- Update sidebar to dynamically render groups from plugins
- Metadata type labels and icons now sourced from plugin registry
- Part of Phase 1.3: Plugin Sidebar Groups task

Agent-Logs-Url: https://github.com/objectstack-ai/framework/sessions/6c441201-fefb-4ec4-90de-2d3cd9f043db

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

Author: Claude

apps/studio/src/components/app-sidebar.tsx

@@ -38,6 +38,7 @@ import {
 import { useState, useEffect, useCallback, useMemo } from "react"
 import { useClient, useMetadataSubscriptionCallback } from '@objectstack/client-react';
 import type { InstalledPackage } from '@objectstack/spec/kernel';
+import { useSidebarGroups, useAllMetadataIcons } from '@/plugins/hooks';
 
 import {
   Sidebar,
@@ -70,61 +71,64 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 
-// ─── Icon & label hints ──────────────────────────────────────────────
-const META_TYPE_HINTS: Record<string, { label: string; icon: LucideIcon }> = {
-  object:         { label: 'Objects',         icon: Package },
-  hook:           { label: 'Hooks',           icon: Anchor },
-  mapping:        { label: 'Mappings',        icon: Map },
-  analyticsCube:  { label: 'Analytics Cubes', icon: PieChart },
-  data:           { label: 'Seed Data',       icon: Database },
-  app:            { label: 'Apps',            icon: AppWindow },
-  action:         { label: 'Actions',         icon: Zap },
-  view:           { label: 'Views',           icon: Eye },
-  page:           { label: 'Pages',           icon: FileCode },
-  dashboard:      { label: 'Dashboards',      icon: BarChart3 },
-  report:         { label: 'Reports',         icon: FileText },
-  theme:          { label: 'Themes',          icon: Palette },
-  flow:           { label: 'Flows',           icon: Workflow },
-  workflow:       { label: 'Workflows',       icon: Workflow },
-  approval:       { label: 'Approvals',       icon: CheckSquare },
-  webhook:        { label: 'Webhooks',        icon: Webhook },
-  role:           { label: 'Roles',           icon: UserCog },
-  permission:     { label: 'Permissions',     icon: Lock },
-  profile:        { label: 'Profiles',        icon: Shield },
-  sharingRule:    { label: 'Sharing Rules',   icon: Shield },
-  policy:         { label: 'Policies',        icon: Shield },
-  agent:          { label: 'Agents',          icon: Bot },
-  tool:           { label: 'Tools',           icon: Wrench },
-  ragPipeline:    { label: 'RAG Pipelines',   icon: BookOpen },
-  api:            { label: 'APIs',            icon: Globe },
-  connector:      { label: 'Connectors',      icon: Link2 },
-  plugin:         { label: 'Plugins',         icon: Layers },
-  kind:           { label: 'Kinds',           icon: Database },
+// ─── Icon string to Lucide component mapping ─────────────────────────
+const ICON_MAP: Record<string, LucideIcon> = {
+  'database': Database,
+  'package': Package,
+  'anchor': Anchor,
+  'map': Map,
+  'pie-chart': PieChart,
+  'app-window': AppWindow,
+  'zap': Zap,
+  'eye': Eye,
+  'file-code': FileCode,
+  'bar-chart-3': BarChart3,
+  'file-text': FileText,
+  'palette': Palette,
+  'workflow': Workflow,
+  'check-square': CheckSquare,
+  'webhook': Webhook,
+  'shield': Shield,
+  'user-cog': UserCog,
+  'lock': Lock,
+  'bot': Bot,
+  'wrench': Wrench,
+  'book-open': BookOpen,
+  'globe': Globe,
+  'link-2': Link2,
+  'layers': Layers,
 };
 
-function getTypeLabel(type: string): string {
-  return META_TYPE_HINTS[type]?.label || type.charAt(0).toUpperCase() + type.slice(1);
-}
-function getTypeIcon(type: string): LucideIcon {
-  return META_TYPE_HINTS[type]?.icon || Layers;
+/**
+ * Map an icon string (from plugin manifest) to a Lucide icon component.
+ * Fallback to Layers if not found.
+ */
+function getIconComponent(iconName?: string): LucideIcon {
+  if (!iconName) return Layers;
+  return ICON_MAP[iconName] || Layers;
 }
 
-// ─── Protocol groups ─────────────────────────────────────────────────
-interface ProtocolGroup {
-  key: string;
-  label: string;
-  icon: LucideIcon;
-  types: string[];
+// ─── Metadata type label/icon helpers ───────────────────────────────
+
+/**
+ * Get label for a metadata type.
+ * Uses plugin-registered icons if available, otherwise generates from type name.
+ */
+function getTypeLabel(type: string, metadataIcons: Map<string, any>): string {
+  const icon = metadataIcons.get(type);
+  if (icon?.label) return icon.label;
+  return type.charAt(0).toUpperCase() + type.slice(1);
 }
 
-const PROTOCOL_GROUPS: ProtocolGroup[] = [
-  { key: 'data',       label: 'Data',       icon: Database,  types: ['object', 'hook', 'mapping', 'analyticsCube', 'data'] },
-  { key: 'ui',         label: 'UI',         icon: AppWindow,  types: ['app', 'action', 'view', 'page', 'dashboard', 'report', 'theme'] },
-  { key: 'automation', label: 'Automation', icon: Workflow,   types: ['flow', 'workflow', 'approval', 'webhook'] },
-  { key: 'security',   label: 'Security',   icon: Shield,     types: ['role', 'permission', 'profile', 'sharingRule', 'policy'] },
-  { key: 'ai',         label: 'AI',         icon: Bot,        types: ['agent', 'tool', 'ragPipeline'] },
-  { key: 'api',        label: 'API',        icon: Globe,      types: ['api', 'connector'] },
-];
+/**
+ * Get Lucide icon component for a metadata type.
+ * Uses plugin-registered icons if available, otherwise falls back to Layers.
+ */
+function getTypeIcon(type: string, metadataIcons: Map<string, any>): LucideIcon {
+  const icon = metadataIcons.get(type);
+  if (icon?.icon) return icon.icon;
+  return Layers;
+}
 
 /** Types that are internal / should be hidden from the sidebar */
 const HIDDEN_TYPES = new Set(['plugin', 'kind']);
@@ -185,6 +189,10 @@ export function AppSidebar({
   const [metaTypes, setMetaTypes] = useState<string[]>([]);
   const [metaItems, setMetaItems] = useState<Record<string, any[]>>({});
 
+  // Get sidebar groups and metadata icons from plugins
+  const sidebarGroups = useSidebarGroups();
+  const metadataIcons = useAllMetadataIcons();
+
   // Track which metadata *types* are expanded (show individual items)
   const [expandedTypes, setExpandedTypes] = useState<Set<string>>(new Set(['object']));
 
@@ -212,17 +220,19 @@ export function AppSidebar({
       }
 
       // Normalize types: prefer singular form (agent, tool) over plural (agents, tools)
-      // when both exist in PROTOCOL_GROUPS, since the singular REST endpoint merges
+      // when both exist in sidebarGroups, since the singular REST endpoint merges
       // SchemaRegistry items with MetadataService runtime items.
-      const groupSingulars = new Set(PROTOCOL_GROUPS.flatMap(g => g.types).filter(t => !t.endsWith('s')));
+      const groupSingulars = new Set(
+        sidebarGroups.flatMap(g => g.metadataTypes).filter(t => !t.endsWith('s'))
+      );
       const normalized = types.map(t => {
         if (t.endsWith('s') && groupSingulars.has(t.slice(0, -1))) {
           return t.slice(0, -1); // agents → agent, tools → tool
         }
         return t;
       });
       // Also add group types that aren't covered at all by the server types
-      const groupTypes = PROTOCOL_GROUPS.flatMap(g => g.types);
+      const groupTypes = sidebarGroups.flatMap(g => g.metadataTypes);
       const coveredSet = new Set(normalized);
       const extraTypes = groupTypes.filter(t => {
         if (coveredSet.has(t)) return false;
@@ -256,7 +266,7 @@ export function AppSidebar({
     } finally {
       setLoading(false);
     }
-  }, [client, selectedPackage]);
+  }, [client, selectedPackage, sidebarGroups]);
 
   useEffect(() => { loadMetadata(); }, [loadMetadata]);
 
@@ -294,12 +304,12 @@ export function AppSidebar({
   }, [metaItems, showSystemInData]);
 
   // Compute visible groups: only show groups that have at least one type with items
-  const visibleGroups = PROTOCOL_GROUPS.map(group => {
-    const visibleTypes = group.types.filter(t =>
+  const visibleGroups = sidebarGroups.map(group => {
+    const visibleTypes = group.metadataTypes.filter(t =>
       metaTypes.includes(t) && !HIDDEN_TYPES.has(t) && (filteredMetaItems[t]?.length ?? 0) > 0
     );
     const totalItems = visibleTypes.reduce((sum, t) => sum + (filteredMetaItems[t]?.length ?? 0), 0);
-    return { ...group, visibleTypes, totalItems };
+    return { ...group, visibleTypes, totalItems, icon: getIconComponent(group.icon) };
   }).filter(g => g.totalItems > 0);
 
   // Package switcher state
@@ -424,8 +434,8 @@ export function AppSidebar({
                 <SidebarMenu>
                   {group.visibleTypes.map(type => {
                     const items = filteredMetaItems[type] || [];
-                    const TypeIcon = getTypeIcon(type);
-                    const typeLabel = getTypeLabel(type);
+                    const TypeIcon = getTypeIcon(type, metadataIcons);
+                    const typeLabel = getTypeLabel(type, metadataIcons);
                     const isObjectType = type === 'object';
                     const isExpanded = expandedTypes.has(type) || !!searchQuery;