@marktoflow/gui 2.0.0-alpha.1

package/tests/unit/themeStore.test.ts

@@ -0,0 +1,141 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { useThemeStore } from '../../src/client/stores/themeStore';
+
+// Mock localStorage
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+  return {
+    getItem: (key: string) => store[key] || null,
+    setItem: (key: string, value: string) => { store[key] = value; },
+    removeItem: (key: string) => { delete store[key]; },
+    clear: () => { store = {}; },
+  };
+})();
+
+Object.defineProperty(window, 'localStorage', { value: localStorageMock });
+
+// Mock matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  value: vi.fn().mockImplementation(query => ({
+    matches: query === '(prefers-color-scheme: dark)',
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+describe('themeStore', () => {
+  beforeEach(() => {
+    // Reset store state
+    useThemeStore.setState({
+      theme: 'dark',
+      resolvedTheme: 'dark',
+    });
+    localStorageMock.clear();
+
+    // Reset document classes
+    document.documentElement.classList.remove('dark', 'light');
+  });
+
+  describe('initial state', () => {
+    it('should default to dark theme', () => {
+      const state = useThemeStore.getState();
+      expect(state.theme).toBe('dark');
+      expect(state.resolvedTheme).toBe('dark');
+    });
+  });
+
+  describe('setTheme', () => {
+    it('should set theme to light', () => {
+      const { setTheme } = useThemeStore.getState();
+
+      setTheme('light');
+
+      const state = useThemeStore.getState();
+      expect(state.theme).toBe('light');
+      expect(state.resolvedTheme).toBe('light');
+    });
+
+    it('should set theme to dark', () => {
+      const { setTheme } = useThemeStore.getState();
+
+      setTheme('light');
+      setTheme('dark');
+
+      const state = useThemeStore.getState();
+      expect(state.theme).toBe('dark');
+      expect(state.resolvedTheme).toBe('dark');
+    });
+
+    it('should resolve system theme', () => {
+      const { setTheme } = useThemeStore.getState();
+
+      setTheme('system');
+
+      const state = useThemeStore.getState();
+      expect(state.theme).toBe('system');
+      // Our mock returns dark for prefers-color-scheme: dark
+      expect(state.resolvedTheme).toBe('dark');
+    });
+
+    it('should apply dark class to document', () => {
+      const { setTheme } = useThemeStore.getState();
+
+      setTheme('dark');
+
+      expect(document.documentElement.classList.contains('dark')).toBe(true);
+      expect(document.documentElement.classList.contains('light')).toBe(false);
+    });
+
+    it('should apply light class to document', () => {
+      const { setTheme } = useThemeStore.getState();
+
+      setTheme('light');
+
+      expect(document.documentElement.classList.contains('light')).toBe(true);
+      expect(document.documentElement.classList.contains('dark')).toBe(false);
+    });
+  });
+
+  describe('toggleTheme', () => {
+    it('should toggle from dark to light', () => {
+      const { toggleTheme } = useThemeStore.getState();
+
+      toggleTheme();
+
+      const state = useThemeStore.getState();
+      expect(state.theme).toBe('light');
+      expect(state.resolvedTheme).toBe('light');
+    });
+
+    it('should toggle from light to dark', () => {
+      const { setTheme, toggleTheme } = useThemeStore.getState();
+
+      setTheme('light');
+      toggleTheme();
+
+      const state = useThemeStore.getState();
+      expect(state.theme).toBe('dark');
+      expect(state.resolvedTheme).toBe('dark');
+    });
+
+    it('should apply correct classes on toggle', () => {
+      const { setTheme, toggleTheme } = useThemeStore.getState();
+
+      setTheme('dark');
+      expect(document.documentElement.classList.contains('dark')).toBe(true);
+
+      toggleTheme();
+      expect(document.documentElement.classList.contains('light')).toBe(true);
+      expect(document.documentElement.classList.contains('dark')).toBe(false);
+
+      toggleTheme();
+      expect(document.documentElement.classList.contains('dark')).toBe(true);
+      expect(document.documentElement.classList.contains('light')).toBe(false);
+    });
+  });
+});

package/tests/unit/workflowToGraph.test.ts

@@ -0,0 +1,289 @@
+import { describe, it, expect } from 'vitest';
+import { workflowToGraph, graphToWorkflow } from '../../src/client/utils/workflowToGraph';
+
+describe('workflowToGraph', () => {
+  describe('basic conversion', () => {
+    it('should convert a simple workflow to nodes and edges', () => {
+      const workflow = {
+        metadata: { id: 'test-1', name: 'Test Workflow' },
+        steps: [
+          { id: 'step-1', name: 'Step 1', action: 'http.get', inputs: {} },
+          { id: 'step-2', name: 'Step 2', action: 'http.post', inputs: {} },
+        ],
+      };
+
+      const { nodes, edges } = workflowToGraph(workflow);
+
+      // Should have 2 step nodes + 1 output node
+      expect(nodes).toHaveLength(3);
+      expect(nodes[0].id).toBe('step-1');
+      expect(nodes[0].type).toBe('step');
+      expect(nodes[1].id).toBe('step-2');
+      expect(nodes[1].type).toBe('step');
+      expect(nodes[2].type).toBe('output');
+
+      // Should have edge between steps and to output
+      expect(edges.length).toBeGreaterThanOrEqual(2);
+      expect(edges.find(e => e.source === 'step-1' && e.target === 'step-2')).toBeDefined();
+    });
+
+    it('should create nodes with correct data', () => {
+      const workflow = {
+        metadata: { id: 'test-1', name: 'Test Workflow' },
+        steps: [
+          {
+            id: 'fetch',
+            name: 'Fetch Data',
+            action: 'github.pulls.get',
+            inputs: { owner: 'test' },
+            outputVariable: 'pr_data',
+          },
+        ],
+      };
+
+      const { nodes } = workflowToGraph(workflow);
+      const stepNode = nodes.find(n => n.id === 'fetch');
+
+      expect(stepNode?.data.id).toBe('fetch');
+      expect(stepNode?.data.name).toBe('Fetch Data');
+      expect(stepNode?.data.action).toBe('github.pulls.get');
+      expect(stepNode?.data.status).toBe('pending');
+    });
+  });
+
+  describe('trigger nodes', () => {
+    it('should add a trigger node when triggers are defined', () => {
+      const workflow = {
+        metadata: { id: 'test-1', name: 'Test Workflow' },
+        steps: [{ id: 'step-1', action: 'http.get', inputs: {} }],
+        triggers: [{ type: 'webhook' as const, path: '/api/trigger' }],
+      };
+
+      const { nodes, edges } = workflowToGraph(workflow);
+
+      const triggerNode = nodes.find(n => n.type === 'trigger');
+      expect(triggerNode).toBeDefined();
+      expect(triggerNode?.data.type).toBe('webhook');
+      expect(triggerNode?.data.path).toBe('/api/trigger');
+
+      // Should have edge from trigger to first step
+      const triggerEdge = edges.find(e => e.source === triggerNode?.id && e.target === 'step-1');
+      expect(triggerEdge).toBeDefined();
+    });
+
+    it('should handle schedule trigger with cron', () => {
+      const workflow = {
+        metadata: { id: 'test-1', name: 'Test Workflow' },
+        steps: [{ id: 'step-1', action: 'http.get', inputs: {} }],
+        triggers: [{ type: 'schedule' as const, cron: '0 9 * * *' }],
+      };
+
+      const { nodes } = workflowToGraph(workflow);
+      const triggerNode = nodes.find(n => n.type === 'trigger');
+
+      expect(triggerNode?.data.type).toBe('schedule');
+      expect(triggerNode?.data.cron).toBe('0 9 * * *');
+    });
+  });
+
+  describe('sub-workflow nodes', () => {
+    it('should create subworkflow nodes for steps with workflow property', () => {
+      const workflow = {
+        metadata: { id: 'test-1', name: 'Test Workflow' },
+        steps: [
+          { id: 'step-1', action: 'http.get', inputs: {} },
+          { id: 'sub-1', name: 'Sub Process', workflow: '/workflows/sub.md', inputs: {} },
+        ],
+      };
+
+      const { nodes } = workflowToGraph(workflow);
+      const subNode = nodes.find(n => n.id === 'sub-1');
+
+      expect(subNode?.type).toBe('subworkflow');
+      expect(subNode?.data.workflowPath).toBe('/workflows/sub.md');
+    });
+  });
+
+  describe('output nodes', () => {
+    it('should add output node at the end', () => {
+      const workflow = {
+        metadata: { id: 'test-1', name: 'Test Workflow' },
+        steps: [
+          { id: 'step-1', action: 'http.get', inputs: {}, outputVariable: 'result1' },
+          { id: 'step-2', action: 'http.post', inputs: {}, outputVariable: 'result2' },
+        ],
+      };
+
+      const { nodes, edges } = workflowToGraph(workflow);
+      const outputNode = nodes.find(n => n.type === 'output');
+
+      expect(outputNode).toBeDefined();
+      expect(outputNode?.data.variables).toEqual(['result1', 'result2']);
+
+      // Should have edge from last step to output
+      const outputEdge = edges.find(e => e.source === 'step-2' && e.target === outputNode?.id);
+      expect(outputEdge).toBeDefined();
+    });
+  });
+
+  describe('variable dependency edges', () => {
+    it('should create data flow edges for variable references', () => {
+      const workflow = {
+        metadata: { id: 'test-1', name: 'Test Workflow' },
+        steps: [
+          { id: 'step-1', action: 'http.get', inputs: {}, outputVariable: 'response' },
+          { id: 'step-2', action: 'process', inputs: { data: '{{ response.body }}' } },
+        ],
+      };
+
+      const { edges } = workflowToGraph(workflow);
+      const dataEdge = edges.find(e => e.id.startsWith('data-') && e.source === 'step-1' && e.target === 'step-2');
+
+      expect(dataEdge).toBeDefined();
+      expect(dataEdge?.label).toBe('response');
+      expect(dataEdge?.animated).toBe(true);
+    });
+
+    it('should not create edges for inputs references', () => {
+      const workflow = {
+        metadata: { id: 'test-1', name: 'Test Workflow' },
+        steps: [
+          { id: 'step-1', action: 'http.get', inputs: { url: '{{ inputs.url }}' } },
+        ],
+      };
+
+      const { edges } = workflowToGraph(workflow);
+      const dataEdges = edges.filter(e => e.id.startsWith('data-'));
+
+      expect(dataEdges).toHaveLength(0);
+    });
+  });
+
+  describe('conditional edges', () => {
+    it('should label conditional edges', () => {
+      const workflow = {
+        metadata: { id: 'test-1', name: 'Test Workflow' },
+        steps: [
+          { id: 'step-1', action: 'check', inputs: {} },
+          { id: 'step-2', action: 'process', inputs: {}, conditions: ['result.success == true'] },
+        ],
+      };
+
+      const { edges } = workflowToGraph(workflow);
+      const conditionalEdge = edges.find(e => e.source === 'step-1' && e.target === 'step-2');
+
+      expect(conditionalEdge?.label).toBe('conditional');
+    });
+  });
+
+  describe('node positioning', () => {
+    it('should position nodes vertically', () => {
+      const workflow = {
+        metadata: { id: 'test-1', name: 'Test Workflow' },
+        steps: [
+          { id: 'step-1', action: 'a', inputs: {} },
+          { id: 'step-2', action: 'b', inputs: {} },
+          { id: 'step-3', action: 'c', inputs: {} },
+        ],
+      };
+
+      const { nodes } = workflowToGraph(workflow);
+      const stepNodes = nodes.filter(n => n.type === 'step');
+
+      // Each step should be below the previous one
+      expect(stepNodes[1].position.y).toBeGreaterThan(stepNodes[0].position.y);
+      expect(stepNodes[2].position.y).toBeGreaterThan(stepNodes[1].position.y);
+    });
+  });
+});
+
+describe('graphToWorkflow', () => {
+  it('should convert nodes back to workflow steps', () => {
+    const nodes = [
+      {
+        id: 'step-1',
+        type: 'step',
+        position: { x: 250, y: 0 },
+        data: { id: 'step-1', name: 'Step 1', action: 'http.get', inputs: {} },
+      },
+      {
+        id: 'step-2',
+        type: 'step',
+        position: { x: 250, y: 120 },
+        data: { id: 'step-2', name: 'Step 2', action: 'http.post', inputs: {}, outputVariable: 'result' },
+      },
+    ];
+
+    const edges = [{ id: 'e-1-2', source: 'step-1', target: 'step-2' }];
+    const metadata = { id: 'test', name: 'Test Workflow' };
+
+    const workflow = graphToWorkflow(nodes, edges, metadata);
+
+    expect(workflow.metadata).toEqual(metadata);
+    expect(workflow.steps).toHaveLength(2);
+    expect(workflow.steps[0].id).toBe('step-1');
+    expect(workflow.steps[0].action).toBe('http.get');
+    expect(workflow.steps[1].outputVariable).toBe('result');
+  });
+
+  it('should filter out trigger and output nodes', () => {
+    const nodes = [
+      { id: 'trigger-1', type: 'trigger', position: { x: 250, y: 0 }, data: { type: 'manual' } },
+      { id: 'step-1', type: 'step', position: { x: 250, y: 120 }, data: { id: 'step-1', action: 'test', inputs: {} } },
+      { id: 'output-1', type: 'output', position: { x: 250, y: 240 }, data: { variables: [] } },
+    ];
+
+    const workflow = graphToWorkflow(nodes, [], { id: 'test', name: 'Test' });
+
+    expect(workflow.steps).toHaveLength(1);
+    expect(workflow.steps[0].id).toBe('step-1');
+  });
+
+  it('should extract trigger info', () => {
+    const nodes = [
+      {
+        id: 'trigger-1',
+        type: 'trigger',
+        position: { x: 250, y: 0 },
+        data: { type: 'webhook', path: '/api/hook' },
+      },
+      { id: 'step-1', type: 'step', position: { x: 250, y: 120 }, data: { id: 'step-1', inputs: {} } },
+    ];
+
+    const workflow = graphToWorkflow(nodes, [], { id: 'test', name: 'Test' });
+
+    expect(workflow.triggers).toHaveLength(1);
+    expect(workflow.triggers?.[0].type).toBe('webhook');
+    expect(workflow.triggers?.[0].path).toBe('/api/hook');
+  });
+
+  it('should sort steps by vertical position', () => {
+    const nodes = [
+      { id: 'step-3', type: 'step', position: { x: 250, y: 240 }, data: { id: 'step-3', inputs: {} } },
+      { id: 'step-1', type: 'step', position: { x: 250, y: 0 }, data: { id: 'step-1', inputs: {} } },
+      { id: 'step-2', type: 'step', position: { x: 250, y: 120 }, data: { id: 'step-2', inputs: {} } },
+    ];
+
+    const workflow = graphToWorkflow(nodes, [], { id: 'test', name: 'Test' });
+
+    expect(workflow.steps[0].id).toBe('step-1');
+    expect(workflow.steps[1].id).toBe('step-2');
+    expect(workflow.steps[2].id).toBe('step-3');
+  });
+
+  it('should handle sub-workflow nodes', () => {
+    const nodes = [
+      {
+        id: 'sub-1',
+        type: 'subworkflow',
+        position: { x: 250, y: 0 },
+        data: { id: 'sub-1', name: 'Sub Workflow', workflowPath: '/sub.md', inputs: {} },
+      },
+    ];
+
+    const workflow = graphToWorkflow(nodes, [], { id: 'test', name: 'Test' });
+
+    expect(workflow.steps).toHaveLength(1);
+    expect(workflow.steps[0].workflow).toBe('/sub.md');
+  });
+});

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/client/*"],
+      "@shared/*": ["./src/shared/*"]
+    }
+  },
+  "include": ["src/client/**/*", "src/shared/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/tsconfig.server.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": false,
+    "sourceMap": true,
+    "outDir": "./dist/server",
+    "rootDir": "./src",
+    "baseUrl": ".",
+    "paths": {
+      "@shared/*": ["./src/shared/*"]
+    }
+  },
+  "include": ["src/server/**/*", "src/shared/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/vite.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src/client'),
+      '@shared': path.resolve(__dirname, './src/shared'),
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3001',
+        changeOrigin: true,
+      },
+      '/socket.io': {
+        target: 'http://localhost:3001',
+        changeOrigin: true,
+        ws: true,
+      },
+    },
+  },
+  build: {
+    outDir: 'dist/client',
+    sourcemap: true,
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src/client'),
+      '@shared': path.resolve(__dirname, './src/shared'),
+    },
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./tests/setup.ts'],
+    include: ['tests/**/*.test.{ts,tsx}'],
+    exclude: ['tests/e2e/**'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      include: ['src/**/*.{ts,tsx}'],
+      exclude: ['src/**/*.d.ts', 'src/server/**'],
+    },
+  },
+});