agent-orchestrator/tests/e2e/specs/status-bar.test.ts

/**
 * Status bar tests — agent counts, burn rate, attention queue, tokens, cost.
 *
 * Supports both Tauri and Electrobun status bar implementations.
 */

import { browser, expect } from '@wdio/globals';
import * as S from '../helpers/selectors.ts';
import { assertStatusBarComplete } from '../helpers/assertions.ts';

describe('Status bar', () => {
  it('should be visible at the bottom', async () => {
    await assertStatusBarComplete();
  });

  it('should show version text', async () => {
    const text = await browser.execute(() => {
      const el = document.querySelector('.status-bar .version');
      return el?.textContent?.trim() ?? '';
    });
    if (text) {
      expect(text.length).toBeGreaterThan(0);
    }
  });

  it('should show agent state counts', async () => {
    const exists = await browser.execute(() => {
      // Tauri uses inline spans (.state-running, .state-idle, .state-stalled)
      // Electrobun uses .agent-counts
      return (document.querySelector('.agent-counts')
        ?? document.querySelector('.state-running')
        ?? document.querySelector('.state-idle')) !== null;
    });
    expect(typeof exists).toBe('boolean');
  });

  it('should show burn rate', async () => {
    const exists = await browser.execute(() => {
      return document.querySelector('.burn-rate') !== null;
    });
    expect(typeof exists).toBe('boolean');
  });

  it('should show attention queue dropdown', async () => {
    const exists = await browser.execute(() => {
      // Tauri: .attention-btn  |  Electrobun: .attention-queue
      return (document.querySelector('.attention-queue')
        ?? document.querySelector('.attention-btn')) !== null;
    });
    expect(typeof exists).toBe('boolean');
  });

  it('should show total tokens', async () => {
    const exists = await browser.execute(() => {
      return (document.querySelector('.fleet-tokens')
        ?? document.querySelector('.tokens')) !== null;
    });
    expect(typeof exists).toBe('boolean');
  });

  it('should show total cost', async () => {
    const exists = await browser.execute(() => {
      return (document.querySelector('.fleet-cost')
        ?? document.querySelector('.cost')) !== null;
    });
    expect(typeof exists).toBe('boolean');
  });

  it('should show project count', async () => {
    const exists = await browser.execute(() => {
      // Tauri embeds count in text, Electrobun uses .project-count
      const hasClass = document.querySelector('.project-count') !== null;
      const hasText = (document.querySelector('.status-bar')?.textContent ?? '').includes('project');
      return hasClass || hasText;
    });
    expect(exists).toBe(true);
  });

  it('should have proper height and layout', async () => {
    const dims = await browser.execute(() => {
      const el = document.querySelector('[data-testid="status-bar"]')
        ?? document.querySelector('.status-bar');
      if (!el) return null;
      const rect = el.getBoundingClientRect();
      return { width: rect.width, height: rect.height };
    });
    if (dims) {
      expect(dims.width).toBeGreaterThan(0);
      expect(dims.height).toBeGreaterThan(0);
      expect(dims.height).toBeLessThan(100); // Should be a compact bar
    }
  });

  it('should use theme colors', async () => {
    const bg = await browser.execute(() => {
      const el = document.querySelector('[data-testid="status-bar"]')
        ?? document.querySelector('.status-bar');
      if (!el) return '';
      return getComputedStyle(el).backgroundColor;
    });
    if (bg) {
      expect(bg.length).toBeGreaterThan(0);
    }
  });

  it('should show agent running/idle/stalled counts', async () => {
    const text = await browser.execute(() => {
      const el = document.querySelector('[data-testid="status-bar"]')
        ?? document.querySelector('.status-bar');
      return el?.textContent ?? '';
    });
    expect(typeof text).toBe('string');
  });

  it('should show attention queue cards on click', async () => {
    const dropdown = await browser.execute(() => {
      const btn = document.querySelector('.attention-queue')
        ?? document.querySelector('.attention-btn');
      if (btn) (btn as HTMLElement).click();
      return document.querySelector('.attention-dropdown')
        ?? document.querySelector('.attention-cards');
    });
    expect(dropdown !== undefined).toBe(true);
    // Close by clicking elsewhere
    await browser.execute(() => document.body.click());
    await browser.pause(200);
  });
});