@marktoflow/gui 2.0.0-alpha.1

package/src/shared/types.ts

@@ -0,0 +1,179 @@
+// Shared types between client and server
+
+export interface WorkflowMetadata {
+  id: string;
+  name: string;
+  version?: string;
+  description?: string;
+  author?: string;
+  tags?: string[];
+}
+
+export interface WorkflowStep {
+  id: string;
+  name?: string;
+  action?: string;
+  workflow?: string;
+  inputs: Record<string, unknown>;
+  outputVariable?: string;
+  conditions?: string[];
+  errorHandling?: {
+    action: 'stop' | 'continue' | 'retry';
+    maxRetries?: number;
+    retryDelay?: number;
+    fallbackStep?: string;
+  };
+  timeout?: number;
+}
+
+export interface WorkflowTool {
+  sdk: string;
+  auth?: Record<string, string>;
+  options?: Record<string, unknown>;
+}
+
+export interface WorkflowInput {
+  type: 'string' | 'number' | 'boolean' | 'array' | 'object';
+  required?: boolean;
+  default?: unknown;
+  description?: string;
+  validation?: {
+    pattern?: string;
+    min?: number;
+    max?: number;
+    enum?: unknown[];
+  };
+}
+
+export interface WorkflowTrigger {
+  type: 'manual' | 'schedule' | 'webhook' | 'event';
+  cron?: string;
+  path?: string;
+  events?: string[];
+}
+
+export interface Workflow {
+  metadata: WorkflowMetadata;
+  steps: WorkflowStep[];
+  tools?: Record<string, WorkflowTool>;
+  inputs?: Record<string, WorkflowInput>;
+  triggers?: WorkflowTrigger[];
+}
+
+export interface WorkflowListItem {
+  path: string;
+  name: string;
+  description?: string;
+  version?: string;
+}
+
+// Execution types
+
+export type StepStatus = 'pending' | 'running' | 'completed' | 'failed' | 'skipped';
+export type WorkflowStatus = 'pending' | 'running' | 'completed' | 'failed' | 'cancelled';
+
+export interface StepResult {
+  stepId: string;
+  status: StepStatus;
+  output?: unknown;
+  error?: string;
+  startedAt: Date;
+  completedAt?: Date;
+  duration?: number;
+  retryCount: number;
+}
+
+export interface WorkflowRun {
+  runId: string;
+  workflowId: string;
+  workflowPath: string;
+  status: WorkflowStatus;
+  stepResults: StepResult[];
+  inputs: Record<string, unknown>;
+  outputs: Record<string, unknown>;
+  startedAt: Date;
+  completedAt?: Date;
+  duration?: number;
+  error?: string;
+}
+
+// Canvas types
+
+export interface CanvasNode {
+  id: string;
+  type: 'step' | 'subworkflow' | 'trigger' | 'output';
+  position: { x: number; y: number };
+  data: StepNodeData | SubWorkflowNodeData;
+}
+
+export interface StepNodeData {
+  id: string;
+  name?: string;
+  action: string;
+  status?: StepStatus;
+  retryCount?: number;
+  error?: string;
+  inputs?: Record<string, unknown>;
+  outputVariable?: string;
+}
+
+export interface SubWorkflowNodeData {
+  id: string;
+  name?: string;
+  workflowPath: string;
+  stepCount?: number;
+  status?: WorkflowStatus;
+}
+
+export interface CanvasEdge {
+  id: string;
+  source: string;
+  target: string;
+  type: 'sequence' | 'dataflow';
+  label?: string;
+  animated?: boolean;
+}
+
+// API types
+
+export interface APIResponse<T> {
+  data?: T;
+  error?: string;
+  message?: string;
+}
+
+export interface PromptRequest {
+  prompt: string;
+  workflow: Workflow;
+}
+
+export interface PromptResponse {
+  explanation: string;
+  workflow?: Workflow;
+  diff?: string;
+}
+
+// WebSocket events
+
+export interface WorkflowUpdatedEvent {
+  path: string;
+  event: 'change' | 'add' | 'remove';
+  timestamp: string;
+}
+
+export interface ExecutionStepEvent {
+  runId: string;
+  stepId: string;
+  status: StepStatus;
+  output?: unknown;
+  error?: string;
+  duration?: number;
+}
+
+export interface ExecutionCompletedEvent {
+  runId: string;
+  status: WorkflowStatus;
+  outputs: Record<string, unknown>;
+  duration: number;
+  error?: string;
+}

package/tailwind.config.ts

@@ -0,0 +1,73 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  darkMode: 'class',
+  content: ['./index.html', './src/client/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        // n8n-inspired color palette
+        primary: {
+          DEFAULT: '#ff6d5a',
+          light: '#ff8a7a',
+          dark: '#e55a48',
+          50: '#fff5f3',
+          100: '#ffe6e2',
+          200: '#ffd0c9',
+          300: '#ffb0a4',
+          400: '#ff8a7a',
+          500: '#ff6d5a',
+          600: '#e55a48',
+          700: '#c44a3b',
+          800: '#a03d31',
+          900: '#7d3128',
+        },
+        canvas: {
+          bg: '#1a1a2e',
+          'bg-light': '#f5f5f7',
+        },
+        panel: {
+          bg: '#232340',
+          'bg-light': '#ffffff',
+        },
+        node: {
+          bg: '#2d2d4a',
+          'bg-light': '#ffffff',
+          border: '#3d3d5c',
+          'border-light': '#e5e5e5',
+        },
+        // Status colors
+        success: '#5cb85c',
+        warning: '#f0ad4e',
+        error: '#d9534f',
+        info: '#5bc0de',
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Consolas', 'monospace'],
+      },
+      boxShadow: {
+        node: '0 4px 12px rgba(0, 0, 0, 0.3)',
+        'node-light': '0 2px 8px rgba(0, 0, 0, 0.1)',
+        'node-hover': '0 8px 24px rgba(0, 0, 0, 0.4)',
+      },
+      animation: {
+        pulse: 'pulse 1.5s ease-in-out infinite',
+        'flow-edge': 'flowEdge 1s linear infinite',
+      },
+      keyframes: {
+        pulse: {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.7' },
+        },
+        flowEdge: {
+          '0%': { strokeDashoffset: '24' },
+          '100%': { strokeDashoffset: '0' },
+        },
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;

package/tests/e2e/app.spec.ts

@@ -0,0 +1,90 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('App', () => {
+  test('should load the application', async ({ page }) => {
+    await page.goto('/');
+
+    // Check that the main elements are visible
+    await expect(page.locator('text=Marktoflow')).toBeVisible();
+  });
+
+  test('should display the sidebar with workflows', async ({ page }) => {
+    await page.goto('/');
+
+    // Check sidebar exists
+    const sidebar = page.locator('[class*="w-64"]').first();
+    await expect(sidebar).toBeVisible();
+
+    // Check workflows tab
+    await expect(page.locator('button:has-text("Workflows")')).toBeVisible();
+    await expect(page.locator('button:has-text("Tools")')).toBeVisible();
+  });
+
+  test('should switch between Workflows and Tools tabs', async ({ page }) => {
+    await page.goto('/');
+
+    // Click on Tools tab
+    await page.click('button:has-text("Tools")');
+
+    // Check that tools are visible (looking for tool categories)
+    await expect(page.locator('text=Communication')).toBeVisible();
+    await expect(page.locator('text=Development')).toBeVisible();
+
+    // Click back to Workflows
+    await page.click('button:has-text("Workflows")');
+
+    // Check that workflow list items are visible
+    await expect(page.locator('text=Code Review')).toBeVisible();
+  });
+
+  test('should display connection status', async ({ page }) => {
+    await page.goto('/');
+
+    // Check connection status indicator
+    const connectionStatus = page.locator('text=Connected').or(page.locator('text=Disconnected'));
+    await expect(connectionStatus).toBeVisible();
+  });
+
+  test('should show keyboard shortcuts button', async ({ page }) => {
+    await page.goto('/');
+
+    // Check shortcuts button
+    await expect(page.locator('button:has-text("Shortcuts")')).toBeVisible();
+  });
+
+  test('should open keyboard shortcuts modal', async ({ page }) => {
+    await page.goto('/');
+
+    // Click shortcuts button
+    await page.click('button:has-text("Shortcuts")');
+
+    // Check modal is open
+    await expect(page.locator('text=Keyboard Shortcuts')).toBeVisible();
+    await expect(page.locator('text=General')).toBeVisible();
+    await expect(page.locator('text=Canvas')).toBeVisible();
+
+    // Close modal
+    await page.click('button:has-text("Close")');
+
+    // Modal should be closed
+    await expect(page.locator('role=dialog')).not.toBeVisible();
+  });
+
+  test('should display toolbar with action buttons', async ({ page }) => {
+    await page.goto('/');
+
+    // Check toolbar buttons
+    await expect(page.locator('button:has-text("Add Step")')).toBeVisible();
+    await expect(page.locator('button:has-text("Execute")')).toBeVisible();
+    await expect(page.locator('button:has-text("Save")')).toBeVisible();
+  });
+
+  test('should display properties panel', async ({ page }) => {
+    await page.goto('/');
+
+    // Check properties panel
+    await expect(page.locator('text=Properties')).toBeVisible();
+    await expect(page.locator('button:has-text("Variables")')).toBeVisible();
+    await expect(page.locator('button:has-text("History")')).toBeVisible();
+  });
+});

package/tests/e2e/canvas.spec.ts

@@ -0,0 +1,128 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Canvas', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    // Wait for canvas to be ready
+    await page.waitForSelector('.react-flow');
+  });
+
+  test('should display the workflow canvas', async ({ page }) => {
+    // Check React Flow canvas is visible
+    await expect(page.locator('.react-flow')).toBeVisible();
+  });
+
+  test('should display workflow nodes', async ({ page }) => {
+    // Check that step nodes are visible (from demo data)
+    await expect(page.locator('.react-flow__node').first()).toBeVisible();
+  });
+
+  test('should display canvas controls', async ({ page }) => {
+    // Check React Flow controls are visible
+    await expect(page.locator('.react-flow__controls')).toBeVisible();
+  });
+
+  test('should display minimap', async ({ page }) => {
+    // Check minimap is visible
+    await expect(page.locator('.react-flow__minimap')).toBeVisible();
+  });
+
+  test('should select a node on click', async ({ page }) => {
+    // Click on a node
+    const node = page.locator('.react-flow__node').first();
+    await node.click();
+
+    // Check node is selected (has selected class)
+    await expect(node).toHaveClass(/selected/);
+  });
+
+  test('should show node details in properties panel on selection', async ({ page }) => {
+    // Click on a step node
+    const node = page.locator('.react-flow__node').first();
+    await node.click();
+
+    // Properties panel should show step details
+    await expect(page.locator('text=Step')).toBeVisible();
+    await expect(page.locator('text=ID')).toBeVisible();
+  });
+
+  test('should open step editor on double-click', async ({ page }) => {
+    // Double click on a step node
+    const stepNode = page.locator('.react-flow__node[data-testid*="step"]').first();
+
+    // If no step nodes with test id, try clicking any node
+    const anyNode = page.locator('.react-flow__node').first();
+    await anyNode.dblclick();
+
+    // Check if editor modal opens (may not for all node types)
+    // This is a soft check since some nodes don't open editor
+    const editorDialog = page.locator('role=dialog');
+    const isVisible = await editorDialog.isVisible().catch(() => false);
+
+    // Either the editor opened or we clicked on a non-editable node
+    expect(true).toBe(true);
+  });
+
+  test('should show context menu on right-click', async ({ page }) => {
+    // Right click on a step node
+    const node = page.locator('.react-flow__node').first();
+    await node.click({ button: 'right' });
+
+    // Context menu should appear (Radix context menu)
+    // Wait a bit for menu to render
+    await page.waitForTimeout(100);
+
+    // Check if context menu is visible
+    const contextMenu = page.locator('[role="menu"]');
+    const isVisible = await contextMenu.isVisible().catch(() => false);
+
+    // Context menu may or may not appear depending on node type
+    expect(true).toBe(true);
+  });
+
+  test('should zoom in with controls', async ({ page }) => {
+    const zoomInButton = page.locator('.react-flow__controls-button').first();
+    await zoomInButton.click();
+
+    // Canvas should still be functional
+    await expect(page.locator('.react-flow')).toBeVisible();
+  });
+
+  test('should fit view with controls', async ({ page }) => {
+    const fitViewButton = page.locator('.react-flow__controls-fitview');
+    if (await fitViewButton.isVisible()) {
+      await fitViewButton.click();
+    }
+
+    // Canvas should still be functional
+    await expect(page.locator('.react-flow')).toBeVisible();
+  });
+
+  test('should delete selected node with backspace', async ({ page }) => {
+    // Select a node
+    const node = page.locator('.react-flow__node').first();
+    await node.click();
+
+    // Count nodes before delete
+    const nodesBefore = await page.locator('.react-flow__node').count();
+
+    // Press backspace
+    await page.keyboard.press('Backspace');
+
+    // Count nodes after delete
+    const nodesAfter = await page.locator('.react-flow__node').count();
+
+    // Should have one less node (or same if delete is prevented)
+    expect(nodesAfter).toBeLessThanOrEqual(nodesBefore);
+  });
+
+  test('should connect nodes by dragging handles', async ({ page }) => {
+    // This test would require more complex interaction
+    // For now, just verify handles exist
+    const sourceHandles = page.locator('.react-flow__handle-bottom');
+    const targetHandles = page.locator('.react-flow__handle-top');
+
+    expect(await sourceHandles.count()).toBeGreaterThan(0);
+    expect(await targetHandles.count()).toBeGreaterThan(0);
+  });
+});

package/tests/e2e/workflow.spec.ts

@@ -0,0 +1,185 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Workflow Management', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('should display list of workflows', async ({ page }) => {
+    // Check that demo workflows are listed
+    await expect(page.locator('text=Code Review')).toBeVisible();
+    await expect(page.locator('text=Daily Standup')).toBeVisible();
+  });
+
+  test('should select a workflow from the list', async ({ page }) => {
+    // Click on a workflow
+    await page.click('text=Daily Standup');
+
+    // The workflow should be selected (highlighted)
+    const workflowButton = page.locator('button:has-text("Daily Standup")');
+    await expect(workflowButton).toHaveClass(/bg-primary/);
+  });
+
+  test('should load workflow into canvas when selected', async ({ page }) => {
+    // Click on a workflow
+    await page.click('text=Code Review');
+
+    // Wait for canvas to update
+    await page.waitForTimeout(500);
+
+    // Canvas should show nodes
+    const nodes = page.locator('.react-flow__node');
+    expect(await nodes.count()).toBeGreaterThan(0);
+  });
+
+  test('should show workflow properties when nothing is selected', async ({ page }) => {
+    // Click somewhere on canvas to deselect any node
+    await page.click('.react-flow__pane');
+
+    // Properties panel should show workflow info
+    await expect(page.locator('text=Workflow')).toBeVisible();
+    await expect(page.locator('text=Name')).toBeVisible();
+  });
+
+  test('should search for workflows', async ({ page }) => {
+    // Type in search box
+    const searchInput = page.locator('input[placeholder*="Search"]').first();
+    await searchInput.fill('Code');
+
+    // Code Review should still be visible
+    await expect(page.locator('text=Code Review')).toBeVisible();
+  });
+});
+
+test.describe('Workflow Execution', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    // Wait for app to load
+    await page.waitForSelector('.react-flow');
+  });
+
+  test('should have execute button', async ({ page }) => {
+    const executeButton = page.locator('button:has-text("Execute")');
+    await expect(executeButton).toBeVisible();
+    await expect(executeButton).toBeEnabled();
+  });
+
+  test('should start execution when clicking Execute', async ({ page }) => {
+    // Click execute button
+    await page.click('button:has-text("Execute")');
+
+    // Execution overlay or status should appear
+    // The button text should change or overlay should show
+    await page.waitForTimeout(500);
+
+    // Either executing or showing results
+    const isExecuting = await page.locator('text=Stop').isVisible().catch(() => false);
+    const executionStarted = await page.locator('.react-flow__node').first().isVisible();
+
+    expect(executionStarted).toBe(true);
+  });
+
+  test('should show execution history', async ({ page }) => {
+    // Click history tab
+    await page.click('button:has-text("History")');
+
+    // History tab should be visible
+    await expect(page.locator('text=No execution history').or(page.locator('text=Run #'))).toBeVisible();
+  });
+
+  test('should save workflow', async ({ page }) => {
+    // Click save button
+    const saveButton = page.locator('button:has-text("Save")');
+    await saveButton.click();
+
+    // Save should be triggered (may show success message or just complete)
+    await page.waitForTimeout(500);
+
+    // App should still be functional
+    await expect(page.locator('.react-flow')).toBeVisible();
+  });
+});
+
+test.describe('New Step Wizard', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    await page.waitForSelector('.react-flow');
+  });
+
+  test('should open new step wizard', async ({ page }) => {
+    // Click Add Step button
+    await page.click('button:has-text("Add Step")');
+
+    // Wizard dialog should open
+    await expect(page.locator('role=dialog')).toBeVisible();
+  });
+
+  test('should close wizard on cancel', async ({ page }) => {
+    // Open wizard
+    await page.click('button:has-text("Add Step")');
+
+    // Click cancel or close
+    const cancelButton = page.locator('button:has-text("Cancel")');
+    if (await cancelButton.isVisible()) {
+      await cancelButton.click();
+    } else {
+      // Press escape
+      await page.keyboard.press('Escape');
+    }
+
+    // Dialog should close
+    await expect(page.locator('role=dialog')).not.toBeVisible();
+  });
+
+  test('should open new step wizard with N key', async ({ page }) => {
+    // Focus on canvas area
+    await page.click('.react-flow__pane');
+
+    // Press N key
+    await page.keyboard.press('n');
+
+    // Wizard should open
+    await expect(page.locator('role=dialog')).toBeVisible();
+  });
+});
+
+test.describe('AI Prompt', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('should have AI prompt input', async ({ page }) => {
+    // Check for prompt input area
+    const promptInput = page.locator('textarea[placeholder*="Ask"]').or(page.locator('input[placeholder*="Ask"]'));
+    const hasPrompt = await promptInput.isVisible().catch(() => false);
+
+    // May or may not be visible based on UI state
+    expect(true).toBe(true);
+  });
+});
+
+test.describe('Keyboard Shortcuts', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    await page.waitForSelector('.react-flow');
+  });
+
+  test('should open shortcuts with Cmd+/', async ({ page }) => {
+    // Press Cmd+/
+    await page.keyboard.press('Meta+/');
+
+    // Shortcuts modal should open
+    await expect(page.locator('text=Keyboard Shortcuts')).toBeVisible();
+  });
+
+  test('should save with Cmd+S', async ({ page }) => {
+    // Focus canvas
+    await page.click('.react-flow__pane');
+
+    // Press Cmd+S
+    await page.keyboard.press('Meta+s');
+
+    // Save should be triggered (app should still work)
+    await expect(page.locator('.react-flow')).toBeVisible();
+  });
+});