@marktoflow/gui 2.0.0-alpha.12 → 2.0.0-alpha.13

package/src/shared/constants.ts

@@ -1,180 +0,0 @@
-// Shared constants between client and server
-
-export const API_VERSION = 'v1';
-export const API_BASE_PATH = '/api';
-
-// WebSocket events
-export const WS_EVENTS = {
-  // Server -> Client
-  WORKFLOW_UPDATED: 'workflow:updated',
-  EXECUTION_STARTED: 'execution:started',
-  EXECUTION_STEP: 'execution:step',
-  EXECUTION_COMPLETED: 'execution:completed',
-  AI_PROCESSING: 'ai:processing',
-  AI_RESPONSE: 'ai:response',
-
-  // Client -> Server
-  WORKFLOW_SUBSCRIBE: 'workflow:subscribe',
-  WORKFLOW_UNSUBSCRIBE: 'workflow:unsubscribe',
-  EXECUTION_SUBSCRIBE: 'execution:subscribe',
-  EXECUTION_UNSUBSCRIBE: 'execution:unsubscribe',
-} as const;
-
-// Available services and their methods
-export const SERVICES = {
-  slack: {
-    name: 'Slack',
-    icon: 'slack',
-    methods: [
-      'chat.postMessage',
-      'chat.update',
-      'chat.delete',
-      'conversations.list',
-      'conversations.create',
-      'files.upload',
-      'users.info',
-    ],
-  },
-  github: {
-    name: 'GitHub',
-    icon: 'github',
-    methods: [
-      'pulls.get',
-      'pulls.list',
-      'pulls.create',
-      'pulls.createReview',
-      'pulls.listFiles',
-      'issues.get',
-      'issues.create',
-      'issues.createComment',
-      'repos.getContent',
-      'search.code',
-    ],
-  },
-  jira: {
-    name: 'Jira',
-    icon: 'jira',
-    methods: [
-      'issues.getIssue',
-      'issues.createIssue',
-      'issues.editIssue',
-      'issues.search',
-      'issues.addComment',
-      'issues.transition',
-    ],
-  },
-  gmail: {
-    name: 'Gmail',
-    icon: 'gmail',
-    methods: [
-      'messages.list',
-      'messages.get',
-      'messages.send',
-      'drafts.create',
-      'labels.list',
-    ],
-  },
-  outlook: {
-    name: 'Outlook',
-    icon: 'outlook',
-    methods: [
-      'messages.list',
-      'messages.get',
-      'messages.send',
-      'calendar.events.list',
-      'calendar.events.create',
-    ],
-  },
-  linear: {
-    name: 'Linear',
-    icon: 'linear',
-    methods: [
-      'issues.get',
-      'issues.create',
-      'issues.update',
-      'issues.search',
-      'projects.list',
-    ],
-  },
-  notion: {
-    name: 'Notion',
-    icon: 'notion',
-    methods: [
-      'pages.get',
-      'pages.create',
-      'pages.update',
-      'databases.query',
-      'search',
-    ],
-  },
-  discord: {
-    name: 'Discord',
-    icon: 'discord',
-    methods: [
-      'messages.send',
-      'messages.edit',
-      'messages.delete',
-      'channels.get',
-      'webhooks.execute',
-    ],
-  },
-  airtable: {
-    name: 'Airtable',
-    icon: 'airtable',
-    methods: [
-      'records.list',
-      'records.get',
-      'records.create',
-      'records.update',
-      'records.delete',
-    ],
-  },
-  confluence: {
-    name: 'Confluence',
-    icon: 'confluence',
-    methods: [
-      'pages.list',
-      'pages.get',
-      'pages.create',
-      'pages.update',
-      'search',
-    ],
-  },
-  http: {
-    name: 'HTTP',
-    icon: 'http',
-    methods: ['request', 'get', 'post', 'put', 'patch', 'delete'],
-  },
-  claude: {
-    name: 'Claude',
-    icon: 'claude',
-    methods: ['analyze', 'generate', 'summarize', 'chat'],
-  },
-  opencode: {
-    name: 'OpenCode',
-    icon: 'opencode',
-    methods: ['chat', 'complete', 'analyze'],
-  },
-  ollama: {
-    name: 'Ollama',
-    icon: 'ollama',
-    methods: ['generate', 'chat', 'embeddings'],
-  },
-} as const;
-
-// Default node positions
-export const NODE_LAYOUT = {
-  VERTICAL_SPACING: 120,
-  HORIZONTAL_OFFSET: 250,
-  GROUP_PADDING: 40,
-} as const;
-
-// Status colors
-export const STATUS_COLORS = {
-  pending: { bg: 'bg-gray-400/10', text: 'text-gray-400', border: 'border-gray-400' },
-  running: { bg: 'bg-warning/10', text: 'text-warning', border: 'border-warning' },
-  completed: { bg: 'bg-success/10', text: 'text-success', border: 'border-success' },
-  failed: { bg: 'bg-error/10', text: 'text-error', border: 'border-error' },
-  skipped: { bg: 'bg-gray-500/10', text: 'text-gray-500', border: 'border-gray-500' },
-  cancelled: { bg: 'bg-gray-500/10', text: 'text-gray-500', border: 'border-gray-500' },
-} as const;

package/src/shared/types.ts

@@ -1,179 +0,0 @@
-// 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

@@ -1,73 +0,0 @@
-import type { Config } from 'tailwindcss';
-
-const config: Config = {
-  darkMode: 'class',
-  content: ['./index.html', './src/client/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    extend: {
-      colors: {
-        // Primary 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

@@ -1,90 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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);
-  });
-});