dss/admin-ui/js/workdesks/ui-workdesk.js

/**
 * ui-workdesk.js
 * UI Team workdesk - Token management, Figma sync, code generation
 * Refactored: Simplified renderStage to act as controller delegation
 */

import BaseWorkdesk from './base-workdesk.js';
import { hydrateComponent } from '../config/component-registry.js';

export default class UIWorkdesk extends BaseWorkdesk {
  constructor(shell) {
    super(shell);
    this.teamId = 'ui';
    this.teamName = 'UI Team';
    this.tools = [
      {
        id: 'frontpage',
        name: 'Dashboard',
        description: 'Team metrics and quick actions',
        component: 'ds-frontpage'
      },
      {
        id: 'storybook-figma-compare',
        name: 'Storybook vs Figma',
        description: 'Compare Storybook and Figma side by side',
        component: 'ds-storybook-figma-compare'
      },
      {
        id: 'storybook-live-compare',
        name: 'Storybook vs Live',
        description: 'Compare Storybook and live app for drift detection',
        component: 'ds-storybook-live-compare'
      },
      {
        id: 'figma-extraction',
        name: 'Figma Token Extraction',
        description: 'Extract design tokens from Figma',
        component: 'ds-figma-extraction'
      },
      {
        id: 'project-analysis',
        name: 'Project Analysis',
        description: 'Analyze design system adoption',
        component: 'ds-project-analysis'
      },
      {
        id: 'quick-wins',
        name: 'Quick Wins',
        description: 'Find low-effort improvements',
        component: 'ds-quick-wins'
      },
      {
        id: 'regression-testing',
        name: 'Regression Testing',
        description: 'Visual regression testing',
        component: 'ds-regression-testing'
      }
    ];
    this.currentTool = 'frontpage';
  }

  async loadTool(tool) {
    const stage = this.shell.stageContent;
    if (!stage) return;

    // Show loading state with codicon spinner
    stage.innerHTML = `
      <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;">
        <div class="codicon codicon-loading codicon-modifier-spin" style="font-size: 24px; margin-bottom: 12px;"></div>
        <div style="color: var(--vscode-descriptionForeground);">Loading ${tool.name}...</div>
      </div>
    `;

    try {
      stage.innerHTML = '';
      await hydrateComponent(tool.component, stage);
      console.log(`[UIWorkdesk] Loaded component: ${tool.component}`);

      // Update internal state tracking
      this.currentTool = tool.id;
    } catch (error) {
      console.error(`[UIWorkdesk] Failed to load tool ${tool.component}:`, error);
      stage.innerHTML = `
        <div style="padding: 24px; max-width: 600px; margin: 0 auto;">
          <h2 style="margin-bottom: 16px; color: var(--vscode-errorForeground);">Error Loading Tool</h2>
          <p style="color: var(--vscode-descriptionForeground); margin-bottom: 16px;">${error.message}</p>
          <button id="retry-btn" class="button" type="button"
            style="padding: 8px 16px; background: var(--vscode-button-background); color: var(--vscode-button-foreground); border: none; border-radius: 4px; cursor: pointer;">
            Retry
          </button>
        </div>
      `;

      // Add event listener without inline handler
      const retryBtn = stage.querySelector('#retry-btn');
      if (retryBtn) {
        retryBtn.addEventListener('click', () => location.reload());
      }
    }
  }

  /**
   * Render stage content
   * REFACTORED: Now strictly delegates to the default tool (Dashboard)
   * instead of maintaining a hardcoded duplicate view.
   */
  renderStage() {
    const defaultTool = this.tools.find(t => t.id === this.currentTool || t.id === 'frontpage');
    if (defaultTool) {
      this.loadTool(defaultTool);
    } else {
      console.error('Default tool "frontpage" not found in configuration');
    }
  }
}