dss/admin-ui/js/config/panel-config.js

/**
 * panel-config.js
 * Central registry for team-specific panel configurations
 */

export const PANEL_CONFIGS = {
  ui: [
    {
      id: 'metrics',
      label: 'Metrics',
      component: 'ds-metrics-panel',
      props: { mode: 'ui-performance' }
    },
    {
      id: 'tokens',
      label: 'Token Inspector',
      component: 'ds-token-inspector',
      props: {}
    },
    {
      id: 'figma',
      label: 'Figma Sync',
      component: 'ds-figma-status',
      props: {}
    },
    {
      id: 'activity',
      label: 'Activity',
      component: 'ds-activity-log',
      props: {}
    },
    {
      id: 'chat',
      label: 'AI Assistant',
      component: 'ds-chat-panel',
      props: {}
    }
  ],

  ux: [
    {
      id: 'metrics',
      label: 'Metrics',
      component: 'ds-metrics-panel',
      props: { mode: 'ux-accessibility' }
    },
    {
      id: 'diff',
      label: 'Visual Diff',
      component: 'ds-visual-diff',
      props: {}
    },
    {
      id: 'accessibility',
      label: 'Accessibility',
      component: 'ds-accessibility-report',
      props: {}
    },
    {
      id: 'screenshots',
      label: 'Screenshots',
      component: 'ds-screenshot-gallery',
      props: {}
    },
    {
      id: 'chat',
      label: 'AI Assistant',
      component: 'ds-chat-panel',
      props: {}
    }
  ],

  qa: [
    {
      id: 'metrics',
      label: 'Metrics',
      component: 'ds-metrics-panel',
      props: { mode: 'qa-coverage' }
    },
    {
      id: 'console',
      label: 'Console',
      component: 'ds-console-viewer',
      props: {}
    },
    {
      id: 'network',
      label: 'Network',
      component: 'ds-network-monitor',
      props: {}
    },
    {
      id: 'tests',
      label: 'Test Results',
      component: 'ds-test-results',
      props: {}
    },
    {
      id: 'chat',
      label: 'AI Assistant',
      component: 'ds-chat-panel',
      props: {}
    }
  ],

  // Admin uses full-page layout, minimal bottom panel
  admin: [
    {
      id: 'system',
      label: 'System Log',
      component: 'ds-system-log',
      props: {}
    },
    {
      id: 'chat',
      label: 'AI Assistant',
      component: 'ds-chat-panel',
      props: {}
    }
  ]
};

/**
 * Advanced mode adds Console and Network tabs to any workflow
 */
export const ADVANCED_MODE_TABS = [
  {
    id: 'console',
    label: 'Console',
    component: 'ds-console-viewer',
    props: {},
    advanced: true
  },
  {
    id: 'network',
    label: 'Network',
    component: 'ds-network-monitor',
    props: {},
    advanced: true
  }
];

/**
 * Get panel configuration for a team
 * @param {string} teamId - Team identifier (ui, ux, qa, admin)
 * @param {boolean} advancedMode - Whether advanced mode is enabled
 * @returns {Array} Panel configuration
 */
export function getPanelConfig(teamId, advancedMode = false) {
  const baseConfig = PANEL_CONFIGS[teamId] || PANEL_CONFIGS.ui;

  if (!advancedMode) {
    return baseConfig;
  }

  // In advanced mode, add Console/Network if not already present
  const hasConsole = baseConfig.some(tab => tab.id === 'console');
  const hasNetwork = baseConfig.some(tab => tab.id === 'network');

  const advancedTabs = [];
  if (!hasConsole) {
    advancedTabs.push(ADVANCED_MODE_TABS[0]);
  }
  if (!hasNetwork) {
    advancedTabs.push(ADVANCED_MODE_TABS[1]);
  }

  return [...baseConfig, ...advancedTabs];
}