@marktoflow/gui 2.0.0-alpha.4 → 2.0.0-alpha.5

package/tests/unit/IfElseNode.test.tsx

@@ -185,4 +185,51 @@ describe('IfElseNode', () => {
       expect(screen.getByText(complexCondition)).toBeInTheDocument();
     });
   });
+
+  describe('skipped branch indicators', () => {
+    it('should show SKIP badge on skipped then branch', () => {
+      renderNode({ skippedBranch: 'then' });
+
+      expect(screen.getByText('SKIP')).toBeInTheDocument();
+      const thenBranch = screen.getByText('✓ Then');
+      expect(thenBranch).toHaveClass('bg-gray-500/20', 'text-gray-400');
+    });
+
+    it('should show SKIP badge on skipped else branch', () => {
+      renderNode({ skippedBranch: 'else' });
+
+      expect(screen.getByText('SKIP')).toBeInTheDocument();
+      const elseBranch = screen.getByText('✗ Else');
+      expect(elseBranch).toHaveClass('bg-gray-500/20', 'text-gray-400');
+    });
+
+    it('should highlight active branch with ring when one is active', () => {
+      renderNode({ activeBranch: 'then' });
+
+      const thenBranch = screen.getByText('✓ Then');
+      expect(thenBranch).toHaveClass('ring-1', 'ring-green-400/50');
+    });
+
+    it('should not show SKIP when no branch is skipped', () => {
+      renderNode({ skippedBranch: null });
+
+      expect(screen.queryByText('SKIP')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('completed and failed states', () => {
+    it('should show completed class on node', () => {
+      renderNode({ status: 'completed' });
+
+      const node = screen.getByText('Check Count').closest('.control-flow-node');
+      expect(node).toHaveClass('completed');
+    });
+
+    it('should show failed class on node', () => {
+      renderNode({ status: 'failed' });
+
+      const node = screen.getByText('Check Count').closest('.control-flow-node');
+      expect(node).toHaveClass('failed');
+    });
+  });
 });

package/tests/unit/ParallelNode.test.tsx

@@ -261,4 +261,84 @@ describe('ParallelNode', () => {
       expect(screen.getByText('0')).toBeInTheDocument();
     });
   });
+
+  describe('failed branches', () => {
+    it('should highlight failed branches in red', () => {
+      renderNode({
+        failedBranches: ['branch-1'],
+      });
+
+      const jiraBranch = screen.getByText('Jira');
+      expect(jiraBranch).toHaveClass('bg-red-500/30', 'text-red-200');
+    });
+
+    it('should prioritize failed over completed and active', () => {
+      renderNode({
+        activeBranches: ['branch-1'],
+        completedBranches: ['branch-1'],
+        failedBranches: ['branch-1'],
+      });
+
+      const jiraBranch = screen.getByText('Jira');
+      expect(jiraBranch).toHaveClass('bg-red-500/30', 'text-red-200');
+      expect(jiraBranch).not.toHaveClass('bg-green-500/30');
+      expect(jiraBranch).not.toHaveClass('animate-pulse');
+    });
+  });
+
+  describe('max concurrent exceeded', () => {
+    it('should show rate limiting warning when maxConcurrentExceeded is true', () => {
+      renderNode({
+        maxConcurrent: 2,
+        maxConcurrentExceeded: true,
+      });
+
+      expect(screen.getByText('Rate limiting active')).toBeInTheDocument();
+    });
+
+    it('should highlight max concurrent value in yellow when exceeded', () => {
+      renderNode({
+        maxConcurrent: 2,
+        maxConcurrentExceeded: true,
+      });
+
+      const maxValue = screen.getByText('2');
+      expect(maxValue).toHaveClass('text-yellow-300');
+    });
+
+    it('should not show warning when maxConcurrentExceeded is false', () => {
+      renderNode({
+        maxConcurrent: 2,
+        maxConcurrentExceeded: false,
+      });
+
+      expect(screen.queryByText('Rate limiting active')).not.toBeInTheDocument();
+    });
+
+    it('should not highlight max concurrent value when not exceeded', () => {
+      renderNode({
+        maxConcurrent: 2,
+        maxConcurrentExceeded: false,
+      });
+
+      const maxValue = screen.getByText('2');
+      expect(maxValue).not.toHaveClass('text-yellow-300');
+    });
+  });
+
+  describe('completed and failed states', () => {
+    it('should show completed class on node', () => {
+      renderNode({ status: 'completed' });
+
+      const node = screen.getByText('Fetch Data').closest('.control-flow-node');
+      expect(node).toHaveClass('completed');
+    });
+
+    it('should show failed class on node', () => {
+      renderNode({ status: 'failed' });
+
+      const node = screen.getByText('Fetch Data').closest('.control-flow-node');
+      expect(node).toHaveClass('failed');
+    });
+  });
 });

package/tests/unit/SwitchNode.test.tsx

@@ -249,4 +249,79 @@ describe('SwitchNode', () => {
       expect(screen.getByText('0 cases + default')).toBeInTheDocument();
     });
   });
+
+  describe('skipped branches', () => {
+    it('should show SKIPPED badge on skipped case', () => {
+      renderNode({
+        skippedBranches: ['high', 'medium'],
+        activeCase: 'critical'
+      });
+
+      const skippedBadges = screen.getAllByText('SKIPPED');
+      expect(skippedBadges).toHaveLength(2);
+
+      const highCase = screen.getByText('high');
+      expect(highCase).toHaveClass('line-through', 'text-gray-400');
+    });
+
+    it('should not show SKIPPED when no branches are skipped', () => {
+      renderNode({ skippedBranches: [] });
+
+      expect(screen.queryByText('SKIPPED')).not.toBeInTheDocument();
+    });
+
+    it('should show active case with ring highlight', () => {
+      renderNode({ activeCase: 'critical' });
+
+      const criticalCase = screen.getByText('critical');
+      expect(criticalCase).toHaveClass('ring-1', 'ring-purple-400/50');
+    });
+  });
+
+  describe('handle positioning', () => {
+    it('should render output handles for all visible cases', () => {
+      const { container } = renderNode({
+        cases: { critical: {}, high: {}, medium: {} },
+        hasDefault: true
+      });
+
+      // Should have 4 handles: 3 cases + 1 default
+      const handles = container.querySelectorAll('.react-flow__handle-bottom');
+      expect(handles.length).toBeGreaterThanOrEqual(3);
+    });
+
+    it('should position handles evenly to avoid overlap', () => {
+      const { container } = renderNode({
+        cases: { case1: {}, case2: {}, case3: {}, case4: {} },
+        hasDefault: true
+      });
+
+      const handles = container.querySelectorAll('.react-flow__handle-bottom');
+
+      // Each handle should have a unique position
+      const positions = Array.from(handles).map(h =>
+        (h as HTMLElement).style.left
+      );
+
+      // All positions should be different
+      const uniquePositions = new Set(positions);
+      expect(uniquePositions.size).toBe(positions.length);
+    });
+  });
+
+  describe('completed and failed states', () => {
+    it('should show completed class on node', () => {
+      renderNode({ status: 'completed' });
+
+      const node = screen.getByText('Route By Severity').closest('.control-flow-node');
+      expect(node).toHaveClass('completed');
+    });
+
+    it('should show failed class on node', () => {
+      renderNode({ status: 'failed' });
+
+      const node = screen.getByText('Route By Severity').closest('.control-flow-node');
+      expect(node).toHaveClass('failed');
+    });
+  });
 });

package/tests/unit/WhileNode.test.tsx

@@ -123,8 +123,9 @@ describe('WhileNode', () => {
         maxIterations: 10,
       });
 
-      const progressBar = container.querySelector('.bg-orange-400');
-      expect(progressBar).toHaveStyle({ width: '50%' });
+      const progressBar = container.querySelector('.bg-orange-400, .bg-orange-500');
+      expect(progressBar).toBeInTheDocument();
+      expect(progressBar).toHaveAttribute('style', expect.stringContaining('50%'));
     });
 
     it('should display 0% progress when currentIteration is 0', () => {
@@ -133,8 +134,9 @@ describe('WhileNode', () => {
         maxIterations: 10,
       });
 
-      const progressBar = container.querySelector('.bg-orange-400');
-      expect(progressBar).toHaveStyle({ width: '0%' });
+      const progressBar = container.querySelector('.bg-orange-400, .bg-orange-500');
+      expect(progressBar).toBeInTheDocument();
+      expect(progressBar).toHaveAttribute('style', expect.stringContaining('0%'));
     });
 
     it('should display 100% progress when at max iterations', () => {
@@ -143,8 +145,9 @@ describe('WhileNode', () => {
         maxIterations: 10,
       });
 
-      const progressBar = container.querySelector('.bg-orange-400');
-      expect(progressBar).toHaveStyle({ width: '100%' });
+      const progressBar = container.querySelector('.bg-orange-400, .bg-orange-500');
+      expect(progressBar).toBeInTheDocument();
+      expect(progressBar).toHaveAttribute('style', expect.stringContaining('100%'));
     });
 
     it('should not display progress when currentIteration is undefined', () => {
@@ -219,8 +222,9 @@ describe('WhileNode', () => {
       });
 
       expect(screen.getByText('25 / 50')).toBeInTheDocument();
-      const progressBar = container.querySelector('.bg-orange-400');
-      expect(progressBar).toHaveStyle({ width: '50%' });
+      const progressBar = container.querySelector('.bg-orange-400, .bg-orange-500');
+      expect(progressBar).toBeInTheDocument();
+      expect(progressBar).toHaveAttribute('style', expect.stringContaining('50%'));
     });
   });
 });

package/tests/unit/agentStore.test.ts

@@ -0,0 +1,218 @@
+/**
+ * Tests for agent store
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { useAgentStore } from '../../src/client/stores/agentStore';
+
+// Mock fetch
+global.fetch = vi.fn();
+
+describe('Agent Store', () => {
+  beforeEach(() => {
+    // Reset store
+    useAgentStore.setState({
+      providers: [],
+      activeProviderId: null,
+      isLoading: false,
+      error: null,
+    });
+
+    // Reset fetch mock
+    vi.clearAllMocks();
+  });
+
+  describe('loadProviders', () => {
+    it('should load providers successfully', async () => {
+      const mockProviders = [
+        {
+          id: 'copilot',
+          name: 'GitHub Copilot',
+          status: 'ready',
+          isActive: true,
+        },
+        {
+          id: 'claude',
+          name: 'Claude Code',
+          status: 'needs_config',
+          isActive: false,
+        },
+      ];
+
+      (global.fetch as any).mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({
+          activeProvider: 'copilot',
+          providers: mockProviders,
+        }),
+      });
+
+      const { loadProviders } = useAgentStore.getState();
+      await loadProviders();
+
+      const state = useAgentStore.getState();
+      expect(state.providers).toEqual(mockProviders);
+      expect(state.activeProviderId).toBe('copilot');
+      expect(state.isLoading).toBe(false);
+      expect(state.error).toBe(null);
+    });
+
+    it('should handle loading errors', async () => {
+      (global.fetch as any).mockRejectedValueOnce(new Error('Network error'));
+
+      const { loadProviders } = useAgentStore.getState();
+      await loadProviders();
+
+      const state = useAgentStore.getState();
+      expect(state.error).toBe('Network error');
+      expect(state.isLoading).toBe(false);
+    });
+
+    it('should handle HTTP errors', async () => {
+      (global.fetch as any).mockResolvedValueOnce({
+        ok: false,
+        status: 500,
+      });
+
+      const { loadProviders } = useAgentStore.getState();
+      await loadProviders();
+
+      const state = useAgentStore.getState();
+      expect(state.error).toBe('Failed to load providers');
+      expect(state.isLoading).toBe(false);
+    });
+
+    it('should set loading state during fetch', async () => {
+      let resolvePromise: any;
+      const promise = new Promise((resolve) => {
+        resolvePromise = resolve;
+      });
+
+      (global.fetch as any).mockReturnValueOnce(promise);
+
+      const { loadProviders } = useAgentStore.getState();
+      const loadPromise = loadProviders();
+
+      // Check loading state
+      expect(useAgentStore.getState().isLoading).toBe(true);
+
+      // Resolve promise
+      resolvePromise({
+        ok: true,
+        json: async () => ({ activeProvider: null, providers: [] }),
+      });
+
+      await loadPromise;
+      expect(useAgentStore.getState().isLoading).toBe(false);
+    });
+  });
+
+  describe('setProvider', () => {
+    it('should set provider successfully', async () => {
+      const mockProviders = [
+        {
+          id: 'copilot',
+          name: 'GitHub Copilot',
+          status: 'ready',
+          isActive: false,
+        },
+        {
+          id: 'claude',
+          name: 'Claude Code',
+          status: 'ready',
+          isActive: true,
+        },
+      ];
+
+      (global.fetch as any).mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({
+          success: true,
+          status: {
+            activeProvider: 'claude',
+            providers: mockProviders,
+          },
+        }),
+      });
+
+      const { setProvider } = useAgentStore.getState();
+      const result = await setProvider('claude');
+
+      expect(result).toBe(true);
+      const state = useAgentStore.getState();
+      expect(state.activeProviderId).toBe('claude');
+      expect(state.providers).toEqual(mockProviders);
+    });
+
+    it('should send configuration with request', async () => {
+      (global.fetch as any).mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({
+          success: true,
+          status: { activeProvider: 'claude', providers: [] },
+        }),
+      });
+
+      const { setProvider } = useAgentStore.getState();
+      await setProvider('claude', {
+        apiKey: 'test-key',
+        baseUrl: 'https://api.test.com',
+        model: 'claude-3',
+      });
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        '/api/ai/providers/claude',
+        expect.objectContaining({
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            apiKey: 'test-key',
+            baseUrl: 'https://api.test.com',
+            model: 'claude-3',
+          }),
+        })
+      );
+    });
+
+    it('should handle set provider errors', async () => {
+      (global.fetch as any).mockRejectedValueOnce(new Error('Network error'));
+
+      const { setProvider } = useAgentStore.getState();
+      const result = await setProvider('claude');
+
+      expect(result).toBe(false);
+      const state = useAgentStore.getState();
+      expect(state.error).toBe('Network error');
+    });
+
+    it('should handle HTTP errors', async () => {
+      (global.fetch as any).mockResolvedValueOnce({
+        ok: false,
+        json: async () => ({ message: 'Provider not found' }),
+      });
+
+      const { setProvider } = useAgentStore.getState();
+      const result = await setProvider('invalid');
+
+      expect(result).toBe(false);
+      const state = useAgentStore.getState();
+      expect(state.error).toBe('Provider not found');
+    });
+  });
+
+  describe('refreshStatus', () => {
+    it('should call loadProviders', async () => {
+      (global.fetch as any).mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ activeProvider: null, providers: [] }),
+      });
+
+      const { refreshStatus } = useAgentStore.getState();
+      await refreshStatus();
+
+      expect(global.fetch).toHaveBeenCalledWith('/api/ai/providers');
+    });
+  });
+});

package/tests/unit/executionStore.test.ts

@@ -101,6 +101,46 @@ describe('executionStore', () => {
       const run = state.runs.find(r => r.id === runId);
       expect(run?.steps[0].error).toBe('Something went wrong');
     });
+
+    it('should record step inputs', () => {
+      const { startExecution, updateStepStatus } = useExecutionStore.getState();
+
+      const runId = startExecution('wf-1', 'Test');
+      const inputs = { channel: '#general', message: 'Hello' };
+      updateStepStatus(runId, 'step-1', 'running', undefined, undefined, undefined, inputs);
+
+      const state = useExecutionStore.getState();
+      const run = state.runs.find(r => r.id === runId);
+      expect(run?.steps[0].inputs).toEqual(inputs);
+    });
+
+    it('should record step output and output variable', () => {
+      const { startExecution, updateStepStatus } = useExecutionStore.getState();
+
+      const runId = startExecution('wf-1', 'Test');
+      const output = { ts: '1234567890.123456', ok: true };
+      updateStepStatus(runId, 'step-1', 'running');
+      updateStepStatus(runId, 'step-1', 'completed', output, undefined, 'result');
+
+      const state = useExecutionStore.getState();
+      const run = state.runs.find(r => r.id === runId);
+      expect(run?.steps[0].output).toEqual(output);
+      expect(run?.steps[0].outputVariable).toBe('result');
+    });
+
+    it('should preserve inputs when updating step status', () => {
+      const { startExecution, updateStepStatus } = useExecutionStore.getState();
+
+      const runId = startExecution('wf-1', 'Test');
+      const inputs = { foo: 'bar' };
+      updateStepStatus(runId, 'step-1', 'running', undefined, undefined, undefined, inputs);
+      updateStepStatus(runId, 'step-1', 'completed', { result: 'success' });
+
+      const state = useExecutionStore.getState();
+      const run = state.runs.find(r => r.id === runId);
+      expect(run?.steps[0].inputs).toEqual(inputs);
+      expect(run?.steps[0].output).toEqual({ result: 'success' });
+    });
   });
 
   describe('completeExecution', () => {

package/tests/unit/platform.test.ts

@@ -0,0 +1,118 @@
+/**
+ * Tests for platform detection utilities
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { isMac, getModKey, getShortcutDisplay, isModKeyPressed } from '../../src/client/utils/platform';
+
+describe('Platform Utilities', () => {
+  describe('isMac', () => {
+    beforeEach(() => {
+      // Reset navigator mock
+      vi.stubGlobal('navigator', {
+        platform: 'MacIntel',
+      });
+    });
+
+    it('should return true for Mac platforms', () => {
+      vi.stubGlobal('navigator', { platform: 'MacIntel' });
+      expect(isMac()).toBe(true);
+
+      vi.stubGlobal('navigator', { platform: 'MacPPC' });
+      expect(isMac()).toBe(true);
+
+      vi.stubGlobal('navigator', { platform: 'Mac68K' });
+      expect(isMac()).toBe(true);
+    });
+
+    it('should return false for non-Mac platforms', () => {
+      vi.stubGlobal('navigator', { platform: 'Win32' });
+      expect(isMac()).toBe(false);
+
+      vi.stubGlobal('navigator', { platform: 'Linux x86_64' });
+      expect(isMac()).toBe(false);
+
+      vi.stubGlobal('navigator', { platform: 'Linux' });
+      expect(isMac()).toBe(false);
+    });
+
+    it('should return false when navigator is undefined', () => {
+      vi.stubGlobal('navigator', undefined);
+      expect(isMac()).toBe(false);
+    });
+  });
+
+  describe('getModKey', () => {
+    it('should return ⌘ on Mac', () => {
+      vi.stubGlobal('navigator', { platform: 'MacIntel' });
+      expect(getModKey()).toBe('⌘');
+    });
+
+    it('should return Ctrl on Windows', () => {
+      vi.stubGlobal('navigator', { platform: 'Win32' });
+      expect(getModKey()).toBe('Ctrl');
+    });
+
+    it('should return Ctrl on Linux', () => {
+      vi.stubGlobal('navigator', { platform: 'Linux x86_64' });
+      expect(getModKey()).toBe('Ctrl');
+    });
+  });
+
+  describe('getShortcutDisplay', () => {
+    it('should convert ⌘ to Ctrl on Windows', () => {
+      vi.stubGlobal('navigator', { platform: 'Win32' });
+      expect(getShortcutDisplay('⌘+S')).toBe('Ctrl+S');
+      expect(getShortcutDisplay('⌘+Z')).toBe('Ctrl+Z');
+      expect(getShortcutDisplay('⌘+⇧+Z')).toBe('Ctrl+⇧+Z');
+    });
+
+    it('should keep ⌘ on Mac', () => {
+      vi.stubGlobal('navigator', { platform: 'MacIntel' });
+      expect(getShortcutDisplay('⌘+S')).toBe('⌘+S');
+      expect(getShortcutDisplay('⌘+Z')).toBe('⌘+Z');
+    });
+
+    it('should convert Cmd to appropriate modifier', () => {
+      vi.stubGlobal('navigator', { platform: 'Win32' });
+      expect(getShortcutDisplay('Cmd+S')).toBe('Ctrl+S');
+
+      vi.stubGlobal('navigator', { platform: 'MacIntel' });
+      expect(getShortcutDisplay('Cmd+S')).toBe('⌘+S');
+    });
+
+    it('should handle multiple occurrences', () => {
+      vi.stubGlobal('navigator', { platform: 'Win32' });
+      expect(getShortcutDisplay('⌘+⌘')).toBe('Ctrl+Ctrl');
+    });
+  });
+
+  describe('isModKeyPressed', () => {
+    it('should check metaKey on Mac', () => {
+      vi.stubGlobal('navigator', { platform: 'MacIntel' });
+
+      const event = { metaKey: true, ctrlKey: false } as KeyboardEvent;
+      expect(isModKeyPressed(event)).toBe(true);
+
+      const event2 = { metaKey: false, ctrlKey: true } as KeyboardEvent;
+      expect(isModKeyPressed(event2)).toBe(false);
+    });
+
+    it('should check ctrlKey on Windows', () => {
+      vi.stubGlobal('navigator', { platform: 'Win32' });
+
+      const event = { metaKey: false, ctrlKey: true } as KeyboardEvent;
+      expect(isModKeyPressed(event)).toBe(true);
+
+      const event2 = { metaKey: true, ctrlKey: false } as KeyboardEvent;
+      expect(isModKeyPressed(event2)).toBe(false);
+    });
+
+    it('should check ctrlKey on Linux', () => {
+      vi.stubGlobal('navigator', { platform: 'Linux x86_64' });
+
+      const event = { metaKey: false, ctrlKey: true } as KeyboardEvent;
+      expect(isModKeyPressed(event)).toBe(true);
+    });
+  });
+});

package/tests/unit/workflowToGraph.test.ts

@@ -49,6 +49,28 @@ describe('workflowToGraph', () => {
       expect(stepNode?.data.action).toBe('github.pulls.get');
       expect(stepNode?.data.status).toBe('pending');
     });
+
+    it('should space steps with 180px vertical spacing', () => {
+      const workflow = {
+        metadata: { id: 'test-1', name: 'Test Workflow' },
+        steps: [
+          { id: 'step-1', name: 'Step 1', action: 'test', inputs: {} },
+          { id: 'step-2', name: 'Step 2', action: 'test', inputs: {} },
+          { id: 'step-3', name: 'Step 3', action: 'test', inputs: {} },
+        ],
+      };
+
+      const { nodes } = workflowToGraph(workflow);
+      const stepNodes = nodes.filter(n => n.type === 'step');
+
+      // Check vertical spacing between steps
+      const step1Y = stepNodes[0].position.y;
+      const step2Y = stepNodes[1].position.y;
+      const step3Y = stepNodes[2].position.y;
+
+      expect(step2Y - step1Y).toBe(180);
+      expect(step3Y - step2Y).toBe(180);
+    });
   });
 
   describe('trigger nodes', () => {