agent-orchestrator/tests/e2e/specs/phase-c-tabs.test.ts

import { browser, expect } from '@wdio/globals';

// Phase C — Tab-Based Feature Tests (C5–C9)
// Settings panel, project health, metrics tab, context tab, files tab.

// ─── Helpers ──────────────────────────────────────────────────────────

/** Get all project box IDs currently rendered. */
async function getProjectIds(): Promise<string[]> {
  return browser.execute(() => {
    const boxes = document.querySelectorAll('[data-testid="project-box"]');
    return Array.from(boxes).map(
      (b) => b.getAttribute('data-project-id') ?? '',
    ).filter(Boolean);
  });
}

/** Switch to a tab in a specific project box. */
async function switchProjectTab(projectId: string, tabIndex: number): Promise<void> {
  await browser.execute((id, idx) => {
    const box = document.querySelector(`[data-project-id="${id}"]`);
    const tabs = box?.querySelectorAll('[data-testid="project-tabs"] .ptab');
    if (tabs && tabs[idx]) (tabs[idx] as HTMLElement).click();
  }, projectId, tabIndex);
  await browser.pause(300);
}

// ─── Scenario C5: Settings Panel Sections ─────────────────────────────

describe('Scenario C5 — Settings Panel Sections', () => {
  before(async () => {
    // Reset UI to home state
    const settingsPanel = await browser.$('.settings-panel');
    if (await settingsPanel.isExisting()) {
      const closeBtn = await browser.$('.settings-close');
      if (await closeBtn.isExisting()) await closeBtn.click();
    }

    // Open settings
    await browser.execute(() => {
      const btn = document.querySelector('[data-testid="settings-btn"]');
      if (btn) (btn as HTMLElement).click();
    });
    await browser.pause(500);
  });

  it('should show Appearance section with theme dropdown', async () => {
    const hasTheme = await browser.execute(() => {
      const panel = document.querySelector('.sidebar-panel, .settings-tab');
      if (!panel) return false;
      const text = panel.textContent ?? '';
      return text.toLowerCase().includes('theme') || text.toLowerCase().includes('appearance');
    });
    expect(hasTheme).toBe(true);
  });

  it('should show font settings (UI font and Terminal font)', async () => {
    const hasFonts = await browser.execute(() => {
      const panel = document.querySelector('.sidebar-panel, .settings-tab');
      if (!panel) return false;
      const text = panel.textContent ?? '';
      return text.toLowerCase().includes('font');
    });
    expect(hasFonts).toBe(true);
  });

  it('should show default shell setting', async () => {
    const hasShell = await browser.execute(() => {
      const panel = document.querySelector('.sidebar-panel, .settings-tab');
      if (!panel) return false;
      const text = panel.textContent ?? '';
      return text.toLowerCase().includes('shell');
    });
    expect(hasShell).toBe(true);
  });

  it('should have theme dropdown with 17 themes', async () => {
    // Click the theme dropdown to see options
    const themeCount = await browser.execute(() => {
      // Find the theme dropdown (custom dropdown, not native select)
      const dropdowns = document.querySelectorAll('.settings-tab .custom-dropdown, .settings-tab .dropdown');
      for (const dd of dropdowns) {
        const label = dd.closest('.settings-row, .setting-row')?.textContent ?? '';
        if (label.toLowerCase().includes('theme')) {
          // Click to open it
          const trigger = dd.querySelector('.dropdown-trigger, .dropdown-selected, button');
          if (trigger) (trigger as HTMLElement).click();
          return -1; // Flag: opened dropdown
        }
      }
      return 0;
    });

    if (themeCount === -1) {
      // Dropdown was opened, wait and count options
      await browser.pause(300);
      const optionCount = await browser.execute(() => {
        const options = document.querySelectorAll('.dropdown-option, .dropdown-item, .theme-option');
        return options.length;
      });
      // Should have 17 themes
      expect(optionCount).toBeGreaterThanOrEqual(15);

      // Close dropdown
      await browser.keys('Escape');
      await browser.pause(200);
    }
  });

  after(async () => {
    await browser.keys('Escape');
    await browser.pause(300);
  });
});

// ─── Scenario C6: Project Health Indicators ───────────────────────────

describe('Scenario C6 — Project Health Indicators', () => {
  it('should show status dots on project headers', async () => {
    const hasDots = await browser.execute(() => {
      const dots = document.querySelectorAll('.project-header .status-dot, .project-header .health-dot');
      return dots.length;
    });
    // At least one project should have a status dot
    expect(hasDots).toBeGreaterThanOrEqual(1);
  });

  it('should show idle status when no agents running', async () => {
    const ids = await getProjectIds();
    if (ids.length < 1) return;

    const dotColor = await browser.execute((id) => {
      const box = document.querySelector(`[data-project-id="${id}"]`);
      const dot = box?.querySelector('.status-dot, .health-dot');
      if (!dot) return 'not-found';
      const style = window.getComputedStyle(dot);
      return style.backgroundColor || style.color || 'unknown';
    }, ids[0]);

    // Should have some color value (not 'not-found')
    expect(dotColor).not.toBe('not-found');
  });

  it('should show status bar agent counts', async () => {
    const counts = await browser.execute(() => {
      const bar = document.querySelector('[data-testid="status-bar"]');
      if (!bar) return '';
      // Status bar shows running/idle/stalled counts
      return bar.textContent ?? '';
    });
    // Should contain at least idle count
    expect(counts).toMatch(/idle|running|stalled|\d/i);
  });
});

// ─── Scenario C7: Metrics Tab ─────────────────────────────────────────

describe('Scenario C7 — Metrics Tab', () => {
  it('should show Metrics tab in project tab bar', async () => {
    const ids = await getProjectIds();
    if (ids.length < 1) return;

    const hasMetrics = await browser.execute((id) => {
      const box = document.querySelector(`[data-project-id="${id}"]`);
      const tabs = box?.querySelectorAll('[data-testid="project-tabs"] .ptab');
      if (!tabs) return false;
      return Array.from(tabs).some(t => t.textContent?.trim().toLowerCase().includes('metric'));
    }, ids[0]);

    expect(hasMetrics).toBe(true);
  });

  it('should render Metrics panel content when tab clicked', async () => {
    const ids = await getProjectIds();
    if (ids.length < 1) return;
    const projectId = ids[0];

    // Find and click Metrics tab
    await browser.execute((id) => {
      const box = document.querySelector(`[data-project-id="${id}"]`);
      const tabs = box?.querySelectorAll('[data-testid="project-tabs"] .ptab');
      if (!tabs) return;
      for (const tab of tabs) {
        if (tab.textContent?.trim().toLowerCase().includes('metric')) {
          (tab as HTMLElement).click();
          break;
        }
      }
    }, projectId);
    await browser.pause(500);

    const hasContent = await browser.execute((id) => {
      const box = document.querySelector(`[data-project-id="${id}"]`);
      // MetricsPanel has live view with fleet stats
      const panel = box?.querySelector('.metrics-panel, .metrics-tab');
      return panel !== null;
    }, projectId);

    expect(hasContent).toBe(true);

    // Switch back to Model tab
    await switchProjectTab(projectId, 0);
  });
});

// ─── Scenario C8: Context Tab ─────────────────────────────────────────

describe('Scenario C8 — Context Tab Visualization', () => {
  it('should render Context tab with token meter', async () => {
    const ids = await getProjectIds();
    if (ids.length < 1) return;
    const projectId = ids[0];

    // Switch to Context tab (index 2)
    await switchProjectTab(projectId, 2);

    const hasContextUI = await browser.execute((id) => {
      const box = document.querySelector(`[data-project-id="${id}"]`);
      // ContextTab has stats, token meter, file references
      const ctx = box?.querySelector('.context-tab, .context-stats, .token-meter, .stat-value');
      return ctx !== null;
    }, projectId);

    expect(hasContextUI).toBe(true);

    // Switch back to Model tab
    await switchProjectTab(projectId, 0);
  });
});

// ─── Scenario C9: Files Tab with Editor ───────────────────────────────

describe('Scenario C9 — Files Tab & Code Editor', () => {
  it('should render Files tab with directory tree', async () => {
    const ids = await getProjectIds();
    if (ids.length < 1) return;
    const projectId = ids[0];

    // Switch to Files tab (index 3)
    await switchProjectTab(projectId, 3);
    await browser.pause(500);

    const hasTree = await browser.execute((id) => {
      const box = document.querySelector(`[data-project-id="${id}"]`);
      // FilesTab has a directory tree
      const tree = box?.querySelector('.file-tree, .directory-tree, .files-tab');
      return tree !== null;
    }, projectId);

    expect(hasTree).toBe(true);
  });

  it('should list files from the project directory', async () => {
    const ids = await getProjectIds();
    if (ids.length < 1) return;

    const fileNames = await browser.execute((id) => {
      const box = document.querySelector(`[data-project-id="${id}"]`);
      const items = box?.querySelectorAll('.tree-name');
      return Array.from(items ?? []).map(el => el.textContent?.trim() ?? '');
    }, ids[0]);

    // Test project has README.md and hello.py
    const hasFiles = fileNames.some(f =>
      f.includes('README') || f.includes('hello') || f.includes('.py') || f.includes('.md'),
    );
    expect(hasFiles).toBe(true);

    // Switch back to Model tab
    await switchProjectTab(ids[0], 0);
  });
});