dss/admin-ui/js/components/tools/ds-token-inspector.js

/**
 * ds-token-inspector.js
 * Token inspector for viewing and searching design tokens
 */

import toolBridge from '../../services/tool-bridge.js';
import { ComponentHelpers } from '../../utils/component-helpers.js';

class DSTokenInspector extends HTMLElement {
  constructor() {
    super();
    this.tokens = null;
    this.filteredTokens = null;
    this.searchTerm = '';
    this.currentCategory = 'all';
    this.manifestPath = '/home/overbits/dss/admin-ui/ds.config.json';
  }

  connectedCallback() {
    this.render();
    this.setupEventListeners();
    this.loadTokens();
  }

  setupEventListeners() {
    const refreshBtn = this.querySelector('#token-refresh-btn');
    if (refreshBtn) {
      refreshBtn.addEventListener('click', () => this.loadTokens(true));
    }

    const searchInput = this.querySelector('#token-search');
    if (searchInput) {
      const debouncedSearch = ComponentHelpers.debounce((term) => {
        this.searchTerm = term.toLowerCase();
        this.filterTokens();
      }, 300);

      searchInput.addEventListener('input', (e) => debouncedSearch(e.target.value));
    }

    const categoryFilter = this.querySelector('#token-category');
    if (categoryFilter) {
      categoryFilter.addEventListener('change', (e) => {
        this.currentCategory = e.target.value;
        this.filterTokens();
      });
    }
  }

  async loadTokens(forceRefresh = false) {
    const content = this.querySelector('#token-content');
    if (!content) return;

    content.innerHTML = ComponentHelpers.renderLoading('Loading tokens from Context Compiler...');

    try {
      const result = await toolBridge.getTokens(this.manifestPath);

      if (result && result.tokens) {
        this.tokens = this.flattenTokens(result.tokens);
        this.filterTokens();
      } else {
        content.innerHTML = ComponentHelpers.renderEmpty('No tokens found', '🎨');
      }
    } catch (error) {
      console.error('Failed to load tokens:', error);
      content.innerHTML = ComponentHelpers.renderError('Failed to load tokens', error);
    }
  }

  flattenTokens(tokens, prefix = '') {
    const flattened = [];

    for (const [key, value] of Object.entries(tokens)) {
      const path = prefix ? `${prefix}.${key}` : key;

      if (value && typeof value === 'object' && !value.$value) {
        // Nested object - recurse
        flattened.push(...this.flattenTokens(value, path));
      } else {
        // Token leaf node
        flattened.push({
          path,
          value: value.$value || value,
          type: value.$type || this.inferType(value.$value || value),
          description: value.$description || '',
          category: this.extractCategory(path)
        });
      }
    }

    return flattened;
  }

  extractCategory(path) {
    const parts = path.split('.');
    return parts[0] || 'other';
  }

  inferType(value) {
    if (typeof value === 'string') {
      if (value.startsWith('#') || value.startsWith('rgb')) return 'color';
      if (value.endsWith('px') || value.endsWith('rem') || value.endsWith('em')) return 'dimension';
      return 'string';
    }
    if (typeof value === 'number') return 'number';
    return 'unknown';
  }

  filterTokens() {
    if (!this.tokens) return;

    let filtered = [...this.tokens];

    // Filter by category
    if (this.currentCategory !== 'all') {
      filtered = filtered.filter(token => token.category === this.currentCategory);
    }

    // Filter by search term
    if (this.searchTerm) {
      filtered = filtered.filter(token =>
        token.path.toLowerCase().includes(this.searchTerm) ||
        String(token.value).toLowerCase().includes(this.searchTerm) ||
        token.description.toLowerCase().includes(this.searchTerm)
      );
    }

    this.filteredTokens = filtered;
    this.renderTokens();
  }

  getCategories() {
    if (!this.tokens) return [];
    const categories = new Set(this.tokens.map(t => t.category));
    return Array.from(categories).sort();
  }

  renderTokens() {
    const content = this.querySelector('#token-content');
    if (!content) return;

    if (!this.filteredTokens || this.filteredTokens.length === 0) {
      content.innerHTML = ComponentHelpers.renderEmpty(
        this.searchTerm ? 'No tokens match your search' : 'No tokens available',
        '🔍'
      );
      return;
    }

    const tokenRows = this.filteredTokens.map(token => {
      const colorPreview = token.type === 'color' ? `
        <div style="
          width: 20px;
          height: 20px;
          background-color: ${token.value};
          border: 1px solid var(--vscode-border);
          border-radius: 2px;
          margin-right: 8px;
        "></div>
      ` : '';

      return `
        <tr style="border-bottom: 1px solid var(--vscode-border);">
          <td style="padding: 12px 16px; font-family: 'Courier New', monospace; font-size: 11px; color: var(--vscode-accent);">
            ${ComponentHelpers.escapeHtml(token.path)}
          </td>
          <td style="padding: 12px 16px;">
            <div style="display: flex; align-items: center;">
              ${colorPreview}
              <span style="font-size: 12px; font-family: 'Courier New', monospace;">
                ${ComponentHelpers.escapeHtml(String(token.value))}
              </span>
            </div>
          </td>
          <td style="padding: 12px 16px;">
            ${ComponentHelpers.createBadge(token.type, 'info')}
          </td>
          <td style="padding: 12px 16px; font-size: 11px; color: var(--vscode-text-dim);">
            ${ComponentHelpers.escapeHtml(token.description || '-')}
          </td>
        </tr>
      `;
    }).join('');

    content.innerHTML = `
      <div style="margin-bottom: 12px; padding: 12px; background-color: var(--vscode-sidebar); border-radius: 4px;">
        <div style="font-size: 11px; color: var(--vscode-text-dim);">
          Showing ${this.filteredTokens.length} of ${this.tokens.length} tokens
        </div>
      </div>
      <div style="overflow-x: auto;">
        <table style="width: 100%; border-collapse: collapse; background-color: var(--vscode-sidebar);">
          <thead>
            <tr style="border-bottom: 2px solid var(--vscode-border);">
              <th style="padding: 12px 16px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--vscode-text-dim);">
                Token Path
              </th>
              <th style="padding: 12px 16px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--vscode-text-dim);">
                Value
              </th>
              <th style="padding: 12px 16px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--vscode-text-dim);">
                Type
              </th>
              <th style="padding: 12px 16px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--vscode-text-dim);">
                Description
              </th>
            </tr>
          </thead>
          <tbody>
            ${tokenRows}
          </tbody>
        </table>
      </div>
    `;
  }

  render() {
    this.innerHTML = `
      <div style="padding: 16px; height: 100%; display: flex; flex-direction: column;">
        <div style="margin-bottom: 16px; display: flex; gap: 12px; align-items: center;">
          <input
            type="text"
            id="token-search"
            placeholder="Search tokens..."
            class="input"
            style="flex: 1; min-width: 200px;"
          />
          <select id="token-category" class="input" style="width: 150px;">
            <option value="all">All Categories</option>
            ${this.getCategories().map(cat =>
              `<option value="${cat}">${cat}</option>`
            ).join('')}
          </select>
          <button id="token-refresh-btn" class="button" style="padding: 4px 12px; font-size: 11px;">
            🔄 Refresh
          </button>
        </div>
        <div id="token-content" style="flex: 1; overflow-y: auto;">
          ${ComponentHelpers.renderLoading('Initializing...')}
        </div>
      </div>
    `;
  }
}

customElements.define('ds-token-inspector', DSTokenInspector);

export default DSTokenInspector;