dss/admin-ui/js/plugins/claude-plugin.js

/**
 * Claude Plugin for DSS Admin UI
 *
 * Provides Claude AI integration features:
 * - Enhanced AI assistant capabilities
 * - Code generation commands
 * - Design token analysis
 * - Component suggestions
 */

const ClaudePlugin = {
  id: 'claude-ai',
  name: 'Claude AI Assistant',
  version: '1.0.0',
  description: 'Enhanced Claude AI integration for design system workflows',
  author: 'DSS Team',
  icon: '🤖',
  category: 'ai',
  enabledByDefault: true,

  // Plugin settings schema
  settings: [
    {
      key: 'model',
      label: 'Claude Model',
      type: 'select',
      options: [
        { value: 'claude-3-sonnet', label: 'Claude 3 Sonnet (Fast)' },
        { value: 'claude-3-opus', label: 'Claude 3 Opus (Advanced)' },
        { value: 'claude-3-haiku', label: 'Claude 3 Haiku (Quick)' }
      ],
      default: 'claude-3-sonnet'
    },
    {
      key: 'autoSuggest',
      label: 'Auto-suggest improvements',
      type: 'boolean',
      default: true
    },
    {
      key: 'contextDepth',
      label: 'Context Depth',
      type: 'select',
      options: [
        { value: 'minimal', label: 'Minimal' },
        { value: 'standard', label: 'Standard' },
        { value: 'deep', label: 'Deep Analysis' }
      ],
      default: 'standard'
    }
  ],

  // Commands provided by this plugin
  commands: [
    {
      name: 'analyze-tokens',
      description: 'Analyze design tokens with Claude AI',
      icon: '🎨',
      execute: async (ctx, args) => {
        ctx.log('Analyzing tokens...');
        return { success: true, message: 'Token analysis complete' };
      }
    },
    {
      name: 'suggest-components',
      description: 'Get component suggestions based on project analysis',
      icon: '🧩',
      execute: async (ctx, args) => {
        ctx.log('Generating component suggestions...');
        return { success: true, message: 'Suggestions generated' };
      }
    },
    {
      name: 'generate-docs',
      description: 'Generate documentation for components',
      icon: '📝',
      execute: async (ctx, args) => {
        ctx.log('Generating documentation...');
        return { success: true, message: 'Documentation generated' };
      }
    },
    {
      name: 'review-code',
      description: 'Review generated code for best practices',
      icon: '🔍',
      execute: async (ctx, args) => {
        ctx.log('Reviewing code...');
        return { success: true, message: 'Code review complete' };
      }
    }
  ],

  // UI panels provided by this plugin
  panels: [
    {
      id: 'claude-insights',
      name: 'AI Insights',
      icon: '💡',
      position: 'sidebar',
      render: (container, ctx) => {
        container.innerHTML = `
          <div class="claude-insights-panel">
            <h4>AI Insights</h4>
            <div class="insights-content">
              <p class="insight-placeholder">
                Run an analysis to see AI-powered insights about your design system.
              </p>
            </div>
            <button class="btn btn--sm btn--primary" data-action="run-analysis">
              Run Analysis
            </button>
          </div>
        `;
      }
    }
  ],

  // Lifecycle hooks
  onInit: async (ctx) => {
    ctx.log('Claude plugin initializing...');

    // Register hooks for AI-related events
    ctx.registerHook('chat:message', async (data) => {
      // Intercept chat messages for AI processing hints
      return data;
    });

    ctx.registerHook('project:analyzed', async (data) => {
      // Auto-generate insights when project is analyzed
      const settings = ctx.getSettings();
      if (settings.autoSuggest) {
        ctx.emit('claude:insights-ready', {
          type: 'auto',
          project: data.projectId
        });
      }
    });

    ctx.log('Claude plugin initialized');
  },

  onEnable: async (ctx) => {
    ctx.log('Claude plugin enabled');

    // Add Claude-specific styles
    const style = document.createElement('style');
    style.id = 'claude-plugin-styles';
    style.textContent = `
      .claude-insights-panel {
        padding: 12px;
      }
      .claude-insights-panel h4 {
        margin: 0 0 12px 0;
        font-size: 14px;
        color: var(--text-primary);
      }
      .insights-content {
        background: var(--bg-secondary);
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 12px;
        min-height: 100px;
      }
      .insight-placeholder {
        color: var(--text-muted);
        font-size: 13px;
        margin: 0;
      }
      .claude-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        background: linear-gradient(135deg, #7c3aed, #a855f7);
        color: white;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 500;
      }
      .claude-suggestion {
        border-left: 3px solid #a855f7;
        padding-left: 12px;
        margin: 8px 0;
      }
    `;
    document.head.appendChild(style);
  },

  onDisable: async (ctx) => {
    ctx.log('Claude plugin disabled');

    // Remove Claude-specific styles
    const style = document.getElementById('claude-plugin-styles');
    if (style) {
      style.remove();
    }

    // Unregister hooks
    ctx.unregisterHook('chat:message');
    ctx.unregisterHook('project:analyzed');
  },

  onDestroy: async (ctx) => {
    ctx.log('Claude plugin destroyed');
  }
};

export default ClaudePlugin;