Migrate Workflow Components to Hive

[tomsmith8]

Workflow Component Migration Plan

 Overview

 Port the workflow visualization component from senza-lnd (Rails app) to hive (Next.js app), adapting it to work in the Next.js/React ecosystem.

 Dependencies Analysis

 Core Dependencies (Required)

 1. ImportNodeModal.jsx - Modal for importing workflow nodes
 2. RequestQueue.js - Request queue manager for API calls
 3. StepNode.jsx - React Flow node component
 4. EdgeButtons.jsx - Custom edge component for React Flow
 5. ContextMenu.jsx - Right-click context menu for canvas
 6. NodeContextMenu.jsx - Right-click context menu for nodes
 7. SmartLayoutButton.jsx - Auto-layout button component
 8. layoutUtils.jsx - ELK-based layout algorithm

 Supporting Files (Required)

 9. components/WorkflowV4/NodeArray.js - Main node array class
 10. components/WorkflowV4/Nodes.js - Node class definitions
 11. components/WorkflowV4/Edges.js - Edge class definitions
 12. components/WorkflowV4/StakIcons.jsx - Icon exports

 Optional/May Need Adaptation

 13. WorkflowTransition.tsx - WebSocket channel (uses @anycable/web)
 14. WorkflowEdit.tsx - WebSocket channel (uses @anycable/web)

 Migration Strategy

 Directory Structure in Hive

 /Users/tom/Documents/hive/src/components/workflow/
 ├── index.tsx (already exists - main component)
 ├── ImportNodeModal.tsx
 ├── RequestQueue.ts
 ├── StepNode.tsx
 ├── EdgeButtons.tsx
 ├── ContextMenu.tsx
 ├── NodeContextMenu.tsx
 ├── SmartLayoutButton.tsx
 ├── layoutUtils.ts
 ├── v4/
 │   ├── NodeArray.ts
 │   ├── Nodes.ts
 │   ├── Edges.ts
 │   └── StakIcons.tsx
 └── channels/ (optional - if WebSockets needed)
     ├── WorkflowTransition.ts
     └── WorkflowEdit.ts

 File-by-File Migration Tasks

 1. Copy Core Components (8 files)
 - Copy ImportNodeModal.jsx → ImportNodeModal.tsx
 - Copy RequestQueue.js → RequestQueue.ts
 - Copy StepNode.jsx → StepNode.tsx
 - Copy EdgeButtons.jsx → EdgeButtons.tsx
 - Copy ContextMenu.jsx → ContextMenu.tsx
 - Copy NodeContextMenu.jsx → NodeContextMenu.tsx
 - Copy SmartLayoutButton.jsx → SmartLayoutButton.tsx
 - Copy layoutUtils.jsx → layoutUtils.ts

 2. Copy WorkflowV4 Directory (4 files)
 - Create v4/ subdirectory
 - Copy NodeArray.js → v4/NodeArray.ts
 - Copy Nodes.js → v4/Nodes.ts
 - Copy Edges.js → v4/Edges.ts
 - Copy StakIcons.jsx → v4/StakIcons.tsx

 3. Update Imports (All files)
 - Change relative imports from ./ to absolute imports
 - Update WorkflowV4 imports to ./v4/
 - Convert image imports to Next.js compatible format
 - Remove Rails-specific dependencies (Turbo, Rails routes)

 4. Adapt for Next.js
 - Replace window.location with Next.js router where needed
 - Replace Rails API endpoints with Next.js API routes
 - Remove jQuery dependencies ($() calls)
 - Update swal alerts to use a React-compatible alternative
 - Convert window.showFlashMessage to toast notifications

 5. Handle External Dependencies
 - Install elkjs for layout algorithm: npm install elkjs
 - Ensure @xyflow/react is installed
 - Ensure react-hook-form is installed (for ImportNodeModal)
 - Handle icon/image imports (may need to add images to /public/ or /src/assets/)

 6. Optional WebSocket Integration
 - Evaluate if WorkflowTransition/WorkflowEdit are needed
 - If yes, adapt to use Next.js WebSocket implementation or Pusher (already in hive)
 - If no, remove these imports from index.tsx

 7. TypeScript Conversion
 - Add proper TypeScript types to all .ts/.tsx files
 - Define interfaces for workflow data structures
 - Add proper type annotations for React components

 Key Adaptations Needed

 Rails → Next.js Changes

 1. API Endpoints: /admin/workflows/ → /api/workflows/
 2. Authentication: Rails session → NextAuth.js
 3. Flash Messages: window.showFlashMessage → React toast library
 4. Alerts: swal → react-hot-toast or shadcn dialog
 5. jQuery: $('#element').trigger('change') → React state updates
 6. Turbo Frames: Remove data-turbo-frame attributes
 7. Image Imports: images/workflows/... → /public/ or import

 Component State Management

 - Main component uses local state (good for Next.js)
 - RequestQueue uses refs (compatible)
 - No global state management needed initially

 Execution Order

 1. Create directory structure
 2. Copy all files with basic TypeScript extensions
 3. Update all import paths
 4. Install missing npm packages
 5. Adapt Rails-specific code
 6. Add TypeScript types
 7. Test component rendering
 8. Wire up API endpoints
 9. Handle icons/images
 10. Final testing and refinement

 Questions to Clarify

 1. Do you need the WebSocket functionality (WorkflowTransition/WorkflowEdit)?
 2. What should replace swal alerts? (react-hot-toast, shadcn dialog, etc.)
 3. Should this integrate with hive's existing API structure?
 4. Are there workflow-related API endpoints already in hive?