circuit_breaker-wf 0.1.0

data/workflow-editor/src/config/flowConfig.ts

@@ -0,0 +1,189 @@
+import { Edge, MarkerType } from 'reactflow';
+import { WORKFLOW_FILE } from './constants';
+import workflowConfig from './workflow.yaml';
+import dagre from 'dagre';
+
+// Load and parse the YAML file
+const config = workflowConfig;
+
+// Default styles
+const defaultNodeStyle: NodeStyle = {
+  padding: 10,
+  borderRadius: 8,
+  border: '1px solid #ddd',
+  backgroundColor: '#fff',
+  width: 150,
+  fontSize: 14,
+  color: '#333',
+  fontWeight: 500,
+  transition: '0.2s',
+  boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+};
+
+const defaultEdgeStyle: EdgeStyle = {
+  stroke: '#b1b1b7',
+  strokeWidth: 2,
+  labelBgPadding: [8, 4],
+  labelBgStyle: {
+    fill: '#fff',
+    stroke: '#e2e2e2',
+    strokeWidth: 1,
+    borderRadius: 4
+  },
+  labelStyle: {
+    fontSize: 12,
+    fill: '#777',
+    fontWeight: 500
+  },
+  selected: {
+    stroke: '#3b82f6',
+    strokeWidth: 3,
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      width: 20,
+      height: 20,
+      color: '#3b82f6'
+    }
+  },
+  markerEnd: {
+    type: MarkerType.ArrowClosed,
+    width: 20,
+    height: 20,
+    color: '#b1b1b7'
+  }
+};
+
+// Define types for our configuration
+interface NodeStyle {
+  padding: number;
+  borderRadius: number;
+  border: string;
+  backgroundColor: string;
+  width: number;
+  fontSize: number;
+  color: string;
+  fontWeight: number;
+  transition: string;
+  boxShadow: string;
+}
+
+interface EdgeStyle {
+  stroke: string;
+  strokeWidth: number;
+  labelBgPadding: number[];
+  labelBgStyle: {
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+    borderRadius: number;
+  };
+  labelStyle: {
+    fontSize: number;
+    fill: string;
+    fontWeight: number;
+  };
+  selected: {
+    stroke: string;
+    strokeWidth: number;
+    markerEnd?: {
+      type: string;
+      width: number;
+      height: number;
+      color: string;
+    };
+  };
+  markerEnd?: {
+    type: string;
+    width: number;
+    height: number;
+    color: string;
+  };
+}
+
+// Export the styles
+export const nodeStyles = defaultNodeStyle;
+export const edgeStyles = {
+  ...defaultEdgeStyle,
+  startLabelStyle: {
+    ...defaultEdgeStyle.labelStyle,
+    distance: 10
+  }
+};
+
+// Add selected node styles
+export const selectedNodeStyles = {
+  ...nodeStyles,
+  border: '2px solid #4a9eff',
+  boxShadow: '0 4px 12px rgba(74, 158, 255, 0.2)'
+};
+
+// Helper function to capitalize and format state names
+const formatLabel = (state: string) => {
+  return state.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
+};
+
+// Generate nodes from states
+const states = [...(config.places.states || []), ...(config.places.special_states || [])];
+const nodes = states.map((state) => ({
+  id: state.replace(' ', '_'), // Update state ID to replace spaces with underscores
+  type: state === 'backlog' ? 'input' : state === 'done' ? 'output' : 'default',
+  data: { 
+    label: formatLabel(state),
+    description: `${formatLabel(state)} state`
+  },
+  position: { x: 0, y: 0 }, // Initial position will be set by dagre
+  style: nodeStyles
+}));
+
+// Generate edges from transitions
+const allTransitions = [
+  ...(config.transitions.regular || []),
+  ...(config.transitions.special || [])
+];
+
+const edges: Edge[] = allTransitions.map((transition, index) => ({
+  id: `e${index}`,
+  source: transition.from.replace(' ', '_'), // Update source state ID to replace spaces with underscores
+  target: transition.to.replace(' ', '_'), // Update target state ID to replace spaces with underscores
+  label: formatLabel(transition.name),
+  style: edgeStyles,
+  labelStyle: edgeStyles.labelStyle,
+  data: {
+    requirements: transition.requires || []
+  }
+}));
+
+// Create a new dagre graph
+const g = new dagre.graphlib.Graph();
+g.setGraph({ 
+  rankdir: 'TB',  // Top to Bottom direction
+  nodesep: 100,   // Horizontal separation between nodes
+  ranksep: 150    // Vertical separation between ranks
+});
+g.setDefaultEdgeLabel(() => ({}));
+
+// Add nodes to dagre
+nodes.forEach((node) => {
+  g.setNode(node.id, { width: 150, height: 50 });
+});
+
+// Add edges to dagre
+edges.forEach((edge) => {
+  g.setEdge(edge.source, edge.target);
+});
+
+// Calculate layout
+dagre.layout(g);
+
+// Apply layout to nodes
+nodes.forEach((node) => {
+  const nodeWithPosition = g.node(node.id);
+  node.position = {
+    x: nodeWithPosition.x - 75, // Center node by subtracting half the width
+    y: nodeWithPosition.y - 25  // Center node by subtracting half the height
+  };
+});
+
+export const initialNodes = nodes;
+export const initialEdges = edges;
+export const defaultViewport = { x: 0, y: 0, zoom: 1.5 }; // 150% zoom

data/workflow-editor/src/config/uiConfig.ts

@@ -0,0 +1,77 @@
+import { Node, Edge } from 'reactflow';
+
+export const defaultNodeStyle = {
+  padding: 20,
+  borderRadius: 8,
+  border: '1px solid #e1e4e8',
+  backgroundColor: '#ffffff',
+  width: 180,
+  fontSize: 14,
+};
+
+export const defaultNodePosition = {
+  x: 250,
+  y: 100,
+};
+
+export const getNodePosition = (index: number) => ({
+  x: defaultNodePosition.x,
+  y: index * defaultNodePosition.y,
+});
+
+export interface WorkflowUIConfig {
+  nodeSpacing: number;
+  defaultLayout: 'vertical' | 'horizontal';
+  stateStyles: {
+    [key: string]: {
+      backgroundColor?: string;
+      borderColor?: string;
+      textColor?: string;
+    };
+  };
+}
+
+export const defaultUIConfig: WorkflowUIConfig = {
+  nodeSpacing: 100,
+  defaultLayout: 'vertical',
+  stateStyles: {
+    backlog: {
+      backgroundColor: '#f3f4f6',
+    },
+    blocked: {
+      backgroundColor: '#fee2e2',
+      borderColor: '#ef4444',
+    },
+    done: {
+      backgroundColor: '#dcfce7',
+    },
+  },
+};
+
+export const createNodesFromStates = (states: string[], specialStates: string[] = []): Node[] => {
+  const allStates = [...states, ...specialStates];
+  return allStates.map((state, index) => ({
+    id: state,
+    type: index === 0 ? 'input' : index === states.length - 1 ? 'output' : 'default',
+    data: { 
+      label: state.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' '),
+      description: '',
+    },
+    position: getNodePosition(index),
+    style: {
+      ...defaultNodeStyle,
+      ...(defaultUIConfig.stateStyles[state] || {}),
+    },
+  }));
+};
+
+export const createEdgesFromTransitions = (transitions: any[]): Edge[] => {
+  return transitions.map((transition, index) => ({
+    id: `edge-${transition.from}-${transition.to}`,
+    source: transition.from,
+    target: transition.to,
+    label: transition.name.split('_').map(word => 
+      word.charAt(0).toUpperCase() + word.slice(1)
+    ).join(' '),
+  }));
+};

data/workflow-editor/src/config/workflow.yaml

@@ -0,0 +1,58 @@
+object_type: Issue
+places:
+  states:
+    - backlog
+    - sprint_planning
+    - assign_issue
+    - in_progress
+    - in_review
+    - testing
+    - done
+  special_states:
+    - blocked
+transitions:
+  regular:
+    - name: move_to_sprint
+      from: backlog
+      to: sprint_planning
+      requires:
+        - description
+        - priority
+    - name: plan_issue
+      from: sprint_planning
+      to: assign_issue
+      requires:
+        - story_points
+        - sprint
+    - name: start_coding
+      from: assign_issue
+      to: in_progress
+      requires:
+        - assignee
+    - name: submit_for_review
+      from: in_progress
+      to: in_review
+      requires:
+        - pull_request_url
+    - name: approve_review
+      from: in_review
+      to: testing
+      requires:
+        - review_approvals
+        - test_coverage
+    - name: pass_testing
+      from: testing
+      to: done
+      requires:
+        - qa_approved
+        - deployment_approved
+    - name: reject_review
+      from: in_review
+      to: in_progress
+      requires:
+        - review_comments
+    - name: fail_testing
+      from: testing
+      to: in_progress
+      requires:
+        - test_failure_reason

data/workflow-editor/src/hooks/useKeyPress.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+
+export const useKeyPress = (targetKeys: string[]) => {
+  const [isPressed, setIsPressed] = useState(false);
+
+  useEffect(() => {
+    const downHandler = (event: KeyboardEvent) => {
+      if (targetKeys.includes(event.key)) {
+        setIsPressed(true);
+      }
+    };
+
+    const upHandler = (event: KeyboardEvent) => {
+      if (targetKeys.includes(event.key)) {
+        setIsPressed(false);
+      }
+    };
+
+    window.addEventListener('keydown', downHandler);
+    window.addEventListener('keyup', upHandler);
+
+    return () => {
+      window.removeEventListener('keydown', downHandler);
+      window.removeEventListener('keyup', upHandler);
+    };
+  }, [targetKeys]);
+
+  return isPressed;
+};

data/workflow-editor/src/index.css

@@ -0,0 +1,34 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: light;
+  background-color: #f8fafc;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+.react-flow__node {
+  font-family: Inter, system-ui, -apple-system, sans-serif;
+}
+
+.react-flow__controls {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.react-flow__controls button {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  color: #4b5563;
+  padding: 4px;
+}

data/workflow-editor/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

data/workflow-editor/src/server/saveWorkflow.ts

@@ -0,0 +1,81 @@
+import express from 'express';
+import { dump, load } from 'js-yaml';
+import fs from 'fs';
+import path from 'path';
+import cors from 'cors';
+import { fileURLToPath } from 'url';
+import { WORKFLOW_PATH, YAML_HEADER } from '../config/constants';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const app = express();
+app.use(express.json());
+app.use(cors());
+
+const PORT = 3001;
+
+// Get current workflow
+app.get('/api/get-workflow', async (req, res) => {
+  try {
+    const filePath = path.resolve(__dirname, '../../', WORKFLOW_PATH);
+    const yamlContent = fs.readFileSync(filePath, 'utf8');
+    const workflowData = load(yamlContent);
+    res.json(workflowData);
+  } catch (error) {
+    console.error('Error reading workflow:', error);
+    res.status(500).json({ 
+      success: false, 
+      message: 'Error reading workflow', 
+      error: error.message 
+    });
+  }
+});
+
+app.post('/api/save-workflow', async (req, res) => {
+  try {
+    console.log('Received save workflow request');
+    
+    if (!req.body) {
+      console.error('No workflow data provided');
+      throw new Error('No workflow data provided');
+    }
+
+    const workflowData = req.body;
+    
+    // Convert the workflow data to YAML
+    const yamlContent = dump(workflowData, {
+      indent: 2,
+      lineWidth: -1, // Don't wrap lines
+      noRefs: true,  // Don't use aliases
+    });
+
+    // Add YAML header and save
+    const fullContent = YAML_HEADER + yamlContent;
+    const filePath = path.resolve(__dirname, '../../', WORKFLOW_PATH);
+    fs.writeFileSync(filePath, fullContent, 'utf8');
+
+    console.log('Workflow saved successfully');
+    res.json({ success: true, message: 'Workflow saved successfully' });
+  } catch (error) {
+    console.error('Error saving workflow:', error);
+    res.status(500).json({ 
+      success: false, 
+      message: 'Error saving workflow', 
+      error: error.message 
+    });
+  }
+});
+
+const server = app.listen(PORT, () => {
+  console.log(`Server running on http://localhost:${PORT}`);
+});
+
+// Handle graceful shutdown
+process.on('SIGINT', () => {
+  console.log('\nGracefully shutting down server...');
+  server.close(() => {
+    console.log('Server shutdown complete.');
+    process.exit(0);
+  });
+});

data/workflow-editor/src/utils/saveWorkflow.ts

@@ -0,0 +1,92 @@
+import { Node, Edge } from 'reactflow';
+
+interface WorkflowData {
+  object_type: string;
+  places: {
+    states: string[];
+    special_states: string[];
+  };
+  transitions: {
+    regular: {
+      name: string;
+      from: string;
+      to: string;
+      requires?: string[];
+    }[];
+    special?: {
+      name: string;
+      from: string;
+      to: string;
+      requires?: string[];
+    }[];
+  };
+}
+
+export const saveWorkflow = async (nodes: Node[], edges: Edge[]) => {
+  console.log('saveWorkflow called with nodes:', nodes);
+
+  // Create a map of node IDs to their current labels
+  const nodeIdToLabel = new Map(nodes.map(node => [
+    node.id,
+    node.data.label.toLowerCase().replace(/\s+/g, '_')
+  ]));
+
+  // Get regular states (just the IDs)
+  const states = nodes
+    .filter(node => node.type !== 'special' && node.id !== 'blocked')
+    .map(node => node.data.label.toLowerCase().replace(/\s+/g, '_'));
+
+  // Get special states (just the IDs)
+  const specialStates = nodes
+    .filter(node => node.type === 'special' || node.id === 'blocked')
+    .map(node => node.data.label.toLowerCase().replace(/\s+/g, '_'));
+
+  // Convert edges to transitions, using the current node labels
+  const transitions = edges.map(edge => ({
+    name: (edge.startLabel || 'transition').toLowerCase().replace(/\s+/g, '_'),
+    from: nodeIdToLabel.get(edge.source) || edge.source,
+    to: nodeIdToLabel.get(edge.target) || edge.target,
+    requires: edge.data?.requirements || []
+  }));
+
+  const workflowData: WorkflowData = {
+    object_type: 'Issue',
+    places: {
+      states,
+      special_states: specialStates
+    },
+    transitions: {
+      regular: transitions
+    }
+  };
+
+  try {
+    const response = await fetch('http://localhost:3001/api/save-workflow', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(workflowData),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const result = await response.json();
+    console.log('Save successful:', result);
+
+    // After successful save, update the local workflow file
+    const workflowResponse = await fetch('http://localhost:3001/api/get-workflow');
+    if (workflowResponse.ok) {
+      const updatedWorkflow = await workflowResponse.json();
+      // You can dispatch an event or use a callback here to update the graph
+      window.dispatchEvent(new CustomEvent('workflowUpdated', { detail: updatedWorkflow }));
+    }
+
+    return result.success;
+  } catch (error) {
+    console.error('Error saving workflow:', error);
+    throw error;
+  }
+};

data/workflow-editor/src/utils/workflowLoader.ts

@@ -0,0 +1,26 @@
+import { load as yamlLoad, dump as yamlDump } from 'js-yaml';
+import { WorkflowDSL } from './workflowTransformer';
+import { UIWorkflow } from './workflowTransformer';
+import { transformDSLToUI, transformUIToDSL } from './workflowTransformer';
+
+export const loadWorkflow = async (path: string): Promise<UIWorkflow> => {
+  try {
+    const response = await fetch(path);
+    const yamlContent = await response.text();
+    const dsl = yamlLoad(yamlContent) as WorkflowDSL;
+    return transformDSLToUI(dsl);
+  } catch (error) {
+    console.error('Error loading workflow:', error);
+    throw error;
+  }
+};
+
+export const saveWorkflow = async (workflow: UIWorkflow): Promise<string> => {
+  try {
+    const dsl = transformUIToDSL(workflow);
+    return yamlDump(dsl);
+  } catch (error) {
+    console.error('Error saving workflow:', error);
+    throw error;
+  }
+};

data/workflow-editor/src/utils/workflowTransformer.ts

@@ -0,0 +1,91 @@
+import { Node, Edge } from 'reactflow';
+import { createNodesFromStates, createEdgesFromTransitions } from '../config/uiConfig';
+
+export interface WorkflowDSL {
+  object_type: string;
+  places: {
+    states: string[];
+    special_states?: string[];
+  };
+  transitions: {
+    regular: Array<{
+      name: string;
+      from: string;
+      to: string;
+      requires?: string[];
+    }>;
+    blocking?: Array<{
+      name: string;
+      from: string | string[];
+      to: string | string[];
+      requires?: string[];
+    }>;
+  };
+  validations?: Array<{
+    state: string;
+    conditions: Array<{
+      field: string;
+      required: boolean;
+    }>;
+  }>;
+}
+
+export interface UIWorkflow {
+  nodes: Node[];
+  edges: Edge[];
+}
+
+export const transformDSLToUI = (dsl: WorkflowDSL): UIWorkflow => {
+  const nodes = createNodesFromStates(
+    dsl.places.states,
+    dsl.places.special_states || []
+  );
+
+  const allTransitions = [
+    ...dsl.transitions.regular,
+    ...(dsl.transitions.blocking || []).map(blocking => {
+      const fromStates = Array.isArray(blocking.from) ? blocking.from : [blocking.from];
+      const toStates = Array.isArray(blocking.to) ? blocking.to : [blocking.to];
+      
+      return fromStates.flatMap(from => 
+        toStates.map(to => ({
+          name: blocking.name,
+          from,
+          to,
+          requires: blocking.requires
+        }))
+      );
+    }).flat()
+  ];
+
+  const edges = createEdgesFromTransitions(allTransitions);
+
+  return { nodes, edges };
+};
+
+export const transformUIToDSL = (ui: UIWorkflow): WorkflowDSL => {
+  const states = ui.nodes
+    .filter(node => node.type !== 'special')
+    .map(node => node.id);
+
+  const special_states = ui.nodes
+    .filter(node => node.type === 'special')
+    .map(node => node.id);
+
+  const transitions = ui.edges.map(edge => ({
+    name: edge.label?.toLowerCase().replace(/\s+/g, '_') || '',
+    from: edge.source,
+    to: edge.target,
+  }));
+
+  return {
+    object_type: 'Issue',
+    places: {
+      states,
+      special_states: special_states.length > 0 ? special_states : undefined,
+    },
+    transitions: {
+      regular: transitions,
+    },
+  };
+};

data/workflow-editor/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

data/workflow-editor/src/yaml.d.ts

@@ -0,0 +1,4 @@
+declare module '*.yaml' {
+    const content: any;
+    export default content;
+}