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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marktoflow/gui",
-  "version": "2.0.0-alpha.12",
+  "version": "2.0.0-alpha.13",
   "description": "Visual workflow designer for marktoflow - web UI",
   "type": "module",
   "main": "./dist/server/index.js",
@@ -56,8 +56,6 @@
     "express": "^4.21.2",
     "lucide-react": "^0.468.0",
     "multer": "^2.0.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "react-markdown": "^9.0.1",
     "rehype-highlight": "^7.0.1",
     "remark-gfm": "^4.0.0",

package/.turbo/turbo-build.log

@@ -1,42 +0,0 @@
-
-> @marktoflow/gui@2.0.0-alpha.12 build /Volumes/USBEXT/sandbox/personal/marktoflow/packages/gui
-> pnpm build:client && pnpm build:server && pnpm build:flatten
-
-
-> @marktoflow/gui@2.0.0-alpha.12 build:client /Volumes/USBEXT/sandbox/personal/marktoflow/packages/gui
-> vite build
-
-vite v6.4.1 building for production...
-transforming...
-✓ 2270 modules transformed.
-rendering chunks...
-computing gzip size...
-dist/client/index.html                   0.83 kB │ gzip:   0.46 kB
-dist/client/assets/index-Dru63gi6.css   51.25 kB │ gzip:   9.52 kB
-dist/client/assets/index-CM44OayM.js   881.84 kB │ gzip: 268.82 kB │ map: 3,510.67 kB
-
-(!) Some chunks are larger than 500 kB after minification. Consider:
-- Using dynamic import() to code-split the application
-- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
-- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
-✓ built in 2.21s
-
-> @marktoflow/gui@2.0.0-alpha.12 build:server /Volumes/USBEXT/sandbox/personal/marktoflow/packages/gui
-> tsc -p tsconfig.server.json
-
-
-> @marktoflow/gui@2.0.0-alpha.12 build:flatten /Volumes/USBEXT/sandbox/personal/marktoflow/packages/gui
-> node scripts/flatten-dist.js
-
-🔧 Flattening dist structure...
-  📦 Moving server/server/* to temp location...
-  📦 Moving server/shared/* to dist/shared/...
-  🗑️  Removing old server directory...
-  📦 Moving temp back to dist/server/...
-✅ Dist structure flattened successfully!
-
-Final structure:
-  dist/
-    client/     - React app
-    server/     - Server code (flat)
-    shared/     - Shared code

package/.turbo/turbo-test.log

@@ -1,38 +0,0 @@
-
-> @marktoflow/gui@2.0.0-alpha.12 test /Volumes/USBEXT/sandbox/personal/marktoflow/packages/gui
-> vitest run
-
-
- RUN  v2.1.9 /Volumes/USBEXT/sandbox/personal/marktoflow/packages/gui
-
- ✓ tests/unit/executionStore.test.ts (46 tests) 117ms
- ✓ tests/unit/workflowToGraph.test.ts (16 tests) 4ms
- ✓ tests/unit/canvasStore.test.ts (24 tests) 18ms
- ✓ tests/unit/codexProvider.test.ts (42 tests) 31ms
- ✓ tests/unit/ParallelNode.test.tsx (30 tests) 1015ms
-   ✓ ParallelNode > visual styling > should have blue/cyan gradient background 429ms
- ✓ tests/unit/TransformNode.test.tsx (34 tests) 994ms
-   ✓ TransformNode > visual styling > should have teal/cyan gradient background 342ms
- ✓ tests/unit/SwitchNode.test.tsx (28 tests) 1047ms
-   ✓ SwitchNode > visual styling > should have purple/magenta gradient background 311ms
- ✓ tests/unit/ForEachNode.test.tsx (28 tests) 1024ms
-   ✓ ForEachNode > visual styling > should have pink/red gradient background 313ms
- ✓ tests/unit/stepValidation.test.ts (17 tests) 6ms
- ✓ tests/integration/api.test.ts (37 tests) 414ms
- ✓ tests/unit/TryCatchNode.test.tsx (25 tests) 647ms
- ✓ tests/unit/IfElseNode.test.tsx (23 tests) 690ms
-   ✓ IfElseNode > should render node with name and condition 322ms
- ✓ tests/unit/agentStore.test.ts (9 tests) 7ms
- ✓ tests/unit/WhileNode.test.tsx (21 tests) 467ms
- ✓ tests/unit/layoutStore.test.ts (18 tests) 5ms
- ✓ tests/unit/navigationStore.test.ts (10 tests) 6ms
- ✓ tests/unit/serviceIcons.test.ts (12 tests) 3ms
- ✓ tests/unit/themeStore.test.ts (9 tests) 5ms
- ✓ tests/unit/components.test.tsx (14 tests) 84ms
- ✓ tests/unit/platform.test.ts (13 tests) 4ms
-
- Test Files  20 passed (20)
-      Tests  456 passed (456)
-   Start at  16:31:41
-   Duration  6.57s (transform 1.40s, setup 2.53s, collect 8.74s, tests 6.59s, environment 21.72s, prepare 2.61s)
-

package/playwright.config.ts

@@ -1,27 +0,0 @@
-import { defineConfig, devices } from '@playwright/test';
-
-export default defineConfig({
-  testDir: './tests/e2e',
-  fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
-  reporter: 'html',
-  use: {
-    baseURL: 'http://localhost:5173',
-    trace: 'on-first-retry',
-    screenshot: 'only-on-failure',
-  },
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-  ],
-  webServer: {
-    command: 'pnpm dev',
-    url: 'http://localhost:5173',
-    reuseExistingServer: !process.env.CI,
-    timeout: 120000,
-  },
-});

package/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

package/src/client/App.tsx

@@ -1,520 +0,0 @@
-import { useEffect, useCallback, useState, useRef } from 'react';
-import { ReactFlowProvider } from '@xyflow/react';
-import { Menu, PanelRight, X } from 'lucide-react';
-import { Canvas } from './components/Canvas/Canvas';
-import { Toolbar } from './components/Canvas/Toolbar';
-import { ExecutionOverlay } from './components/Canvas/ExecutionOverlay';
-import { Sidebar } from './components/Sidebar/Sidebar';
-import { PropertiesPanel } from './components/Panels/PropertiesPanel';
-import { PromptInput } from './components/Prompt/PromptInput';
-import { ChangePreview } from './components/Prompt/ChangePreview';
-import { NewStepWizard } from './components/Editor/NewStepWizard';
-import {
-  KeyboardShortcuts,
-  KeyboardShortcutsButton,
-  useKeyboardShortcuts,
-} from './components/common/KeyboardShortcuts';
-import { ThemeToggle } from './components/common/ThemeToggle';
-import { Breadcrumb, type BreadcrumbItem } from './components/common/Breadcrumb';
-import { useWorkflow } from './hooks/useWorkflow';
-import { useWebSocket } from './hooks/useWebSocket';
-import { usePromptStore } from './stores/promptStore';
-import { useEditorStore } from './stores/editorStore';
-import { useNavigationStore } from './stores/navigationStore';
-import { useWorkflowStore } from './stores/workflowStore';
-import { useExecutionStore } from './stores/executionStore';
-import { useLayoutStore, getBreakpoint } from './stores/layoutStore';
-import type { WorkflowStep, StepStatus, WorkflowStatus } from '@shared/types';
-
-export default function App() {
-  // Workflow management
-  const {
-    currentWorkflow,
-    selectedWorkflow,
-    saveWorkflow,
-    refreshWorkflows,
-  } = useWorkflow();
-
-  // Editor state
-  const {
-    isNewStepOpen,
-    newStepPosition,
-    openNewStepWizard,
-    closeNewStepWizard,
-  } = useEditorStore();
-
-  // Prompt state
-  const { pendingChanges, acceptChanges, rejectChanges } = usePromptStore();
-
-  // Keyboard shortcuts
-  const { isOpen: isShortcutsOpen, setIsOpen: setShortcutsOpen, openShortcuts } = useKeyboardShortcuts();
-
-  // Navigation for sub-workflow drilling
-  const { breadcrumbs, popToIndex, resetNavigation } = useNavigationStore();
-  const { loadWorkflow } = useWorkflowStore();
-
-  // Handle breadcrumb navigation
-  const handleBreadcrumbNavigate = useCallback((item: BreadcrumbItem, index: number) => {
-    // Navigate to the clicked breadcrumb
-    popToIndex(index);
-    loadWorkflow(item.path || '');
-  }, [popToIndex, loadWorkflow]);
-
-  // WebSocket for real-time updates
-  const { connected } = useWebSocket({
-    onWorkflowUpdated: () => {
-      refreshWorkflows();
-    },
-  });
-
-  // Execution store
-  const {
-    isExecuting,
-    isPaused,
-    currentRunId,
-    runs,
-    startExecution,
-    updateStepStatus,
-    completeExecution,
-    addLog,
-    pauseExecution,
-    resumeExecution,
-    cancelExecution,
-    // Debug methods
-    debug,
-    enableDebugMode,
-    disableDebugMode,
-    toggleBreakpoint,
-    clearAllBreakpoints,
-    stepOver,
-    stepInto,
-    stepOut,
-    addWatchExpression,
-    removeWatchExpression,
-  } = useExecutionStore();
-
-  // Layout store for responsive behavior
-  const {
-    breakpoint,
-    setBreakpoint,
-    sidebarOpen,
-    setSidebarOpen,
-    propertiesPanelOpen,
-    setPropertiesPanelOpen,
-  } = useLayoutStore();
-
-  // Breakpoint detection on resize
-  useEffect(() => {
-    const handleResize = () => {
-      const newBreakpoint = getBreakpoint(window.innerWidth);
-      if (newBreakpoint !== breakpoint) {
-        setBreakpoint(newBreakpoint);
-      }
-    };
-
-    // Set initial breakpoint
-    handleResize();
-
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, [breakpoint, setBreakpoint]);
-
-  // Local execution state for overlay
-  const [workflowStatus, setWorkflowStatus] = useState<WorkflowStatus>('pending');
-  const [executionSteps, setExecutionSteps] = useState<Array<{
-    stepId: string;
-    stepName: string;
-    status: StepStatus;
-    duration?: number;
-    error?: string;
-  }>>([]);
-  const [executionLogs, setExecutionLogs] = useState<string[]>([]);
-  const [currentStepId, setCurrentStepId] = useState<string | null>(null);
-  const runIdRef = useRef<string | null>(null);
-
-  // Handle adding a new step
-  const handleAddStep = useCallback(() => {
-    openNewStepWizard();
-  }, [openNewStepWizard]);
-
-  // Handle step creation
-  const handleCreateStep = useCallback(
-    (step: WorkflowStep) => {
-      if (!currentWorkflow) return;
-
-      // Add step to workflow
-      const updatedWorkflow = {
-        ...currentWorkflow,
-        steps: [...currentWorkflow.steps, step],
-      };
-
-      saveWorkflow(updatedWorkflow);
-      console.log('Created step:', step);
-    },
-    [currentWorkflow, saveWorkflow]
-  );
-
-  // Handle workflow execution
-  const handleExecute = useCallback(() => {
-    if (isExecuting) {
-      // Stop execution
-      if (runIdRef.current) {
-        cancelExecution(runIdRef.current);
-      }
-      setWorkflowStatus('cancelled');
-      setExecutionLogs((prev) => [...prev, 'Execution cancelled by user']);
-      return;
-    }
-
-    if (!currentWorkflow) return;
-
-    // Start execution - store in history
-    const workflowName = currentWorkflow.metadata?.name || 'Untitled Workflow';
-    const runId = startExecution(
-      selectedWorkflow || 'unknown',
-      workflowName
-    );
-    runIdRef.current = runId;
-
-    // Update local state for overlay
-    setWorkflowStatus('running');
-    setCurrentStepId(null);
-    setExecutionLogs(['Starting workflow execution...']);
-
-    // Initialize steps
-    setExecutionSteps(
-      currentWorkflow.steps.map((step) => ({
-        stepId: step.id,
-        stepName: step.name || step.id,
-        status: 'pending' as StepStatus,
-      }))
-    );
-
-    // Simulate execution (replace with actual execution via API)
-    simulateExecution(currentWorkflow.steps, runId);
-  }, [isExecuting, currentWorkflow, selectedWorkflow, startExecution, cancelExecution]);
-
-  // Simulate workflow execution
-  const simulateExecution = useCallback(
-    async (steps: WorkflowStep[], runId: string) => {
-      for (let i = 0; i < steps.length; i++) {
-        const step = steps[i];
-        const stepName = step.name || step.id;
-
-        // Update current step
-        setCurrentStepId(step.id);
-        setExecutionSteps((prev) =>
-          prev.map((s) =>
-            s.stepId === step.id ? { ...s, status: 'running' as StepStatus } : s
-          )
-        );
-        setExecutionLogs((prev) => [
-          ...prev,
-          'Executing step: ' + stepName,
-        ]);
-
-        // Update execution store
-        updateStepStatus(runId, step.id, 'running');
-        addLog(runId, 'Executing step: ' + stepName);
-
-        // Simulate step execution
-        await new Promise((resolve) => setTimeout(resolve, 1000 + Math.random() * 1000));
-
-        // Update step status
-        const success = Math.random() > 0.1; // 90% success rate
-        const duration = Math.floor(1000 + Math.random() * 1000);
-        const error = success ? undefined : 'Simulated error';
-
-        setExecutionSteps((prev) =>
-          prev.map((s) =>
-            s.stepId === step.id
-              ? {
-                  ...s,
-                  status: success ? ('completed' as StepStatus) : ('failed' as StepStatus),
-                  duration,
-                  error,
-                }
-              : s
-          )
-        );
-
-        const logMessage = success
-          ? 'Step "' + stepName + '" completed'
-          : 'Step "' + stepName + '" failed';
-        setExecutionLogs((prev) => [...prev, logMessage]);
-
-        // Update execution store
-        updateStepStatus(runId, step.id, success ? 'completed' : 'failed', undefined, error);
-        addLog(runId, logMessage);
-
-        if (!success) {
-          setWorkflowStatus('failed');
-          completeExecution(runId, 'failed');
-          runIdRef.current = null;
-          return;
-        }
-      }
-
-      setWorkflowStatus('completed');
-      setExecutionLogs((prev) => [...prev, 'Workflow completed successfully!']);
-      completeExecution(runId, 'completed');
-      runIdRef.current = null;
-    },
-    [updateStepStatus, addLog, completeExecution]
-  );
-
-  // Handle save
-  const handleSave = useCallback(() => {
-    if (currentWorkflow) {
-      saveWorkflow(currentWorkflow);
-    }
-  }, [currentWorkflow, saveWorkflow]);
-
-  // Handle navigating back to parent workflow
-  const handleNavigateBack = useCallback(() => {
-    if (breadcrumbs.length > 1) {
-      const parentIndex = breadcrumbs.length - 2;
-      const parentItem = breadcrumbs[parentIndex];
-      popToIndex(parentIndex);
-      loadWorkflow(parentItem.path);
-    }
-  }, [breadcrumbs, popToIndex, loadWorkflow]);
-
-  // Handle navigating to root workflow
-  const handleNavigateToRoot = useCallback(() => {
-    if (breadcrumbs.length > 1) {
-      const rootItem = breadcrumbs[0];
-      popToIndex(0);
-      loadWorkflow(rootItem.path);
-    }
-  }, [breadcrumbs, popToIndex, loadWorkflow]);
-
-  // Global keyboard shortcuts
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Ignore if in an input/textarea
-      if (
-        e.target instanceof HTMLInputElement ||
-        e.target instanceof HTMLTextAreaElement
-      ) {
-        return;
-      }
-
-      const isMeta = e.metaKey || e.ctrlKey;
-
-      // Cmd/Ctrl + S: Save
-      if (isMeta && e.key === 's') {
-        e.preventDefault();
-        handleSave();
-      }
-
-      // Cmd/Ctrl + Enter: Execute
-      if (isMeta && e.key === 'Enter') {
-        e.preventDefault();
-        handleExecute();
-      }
-
-      // N: New step (when no modifier)
-      if (e.key === 'n' && !isMeta && !e.shiftKey && !e.altKey) {
-        e.preventDefault();
-        handleAddStep();
-      }
-
-      // Cmd/Ctrl + Left Arrow: Navigate back to parent workflow
-      if (isMeta && e.key === 'ArrowLeft') {
-        e.preventDefault();
-        handleNavigateBack();
-      }
-
-      // Cmd/Ctrl + Up Arrow: Navigate to root workflow
-      if (isMeta && e.key === 'ArrowUp') {
-        e.preventDefault();
-        handleNavigateToRoot();
-      }
-
-      // Debug keyboard shortcuts
-      // F9: Toggle debug mode
-      if (e.key === 'F9') {
-        e.preventDefault();
-        if (debug.enabled) {
-          disableDebugMode();
-        } else {
-          enableDebugMode();
-        }
-      }
-
-      // F10: Step over (when paused in debug mode)
-      if (e.key === 'F10' && debug.enabled && isPaused) {
-        e.preventDefault();
-        stepOver();
-      }
-
-      // F11: Step into (when paused in debug mode)
-      if (e.key === 'F11' && !e.shiftKey && debug.enabled && isPaused) {
-        e.preventDefault();
-        stepInto();
-      }
-
-      // Shift+F11: Step out (when paused in debug mode)
-      if (e.key === 'F11' && e.shiftKey && debug.enabled && isPaused) {
-        e.preventDefault();
-        stepOut();
-      }
-
-      // F5: Continue execution (when paused)
-      if (e.key === 'F5' && isPaused) {
-        e.preventDefault();
-        resumeExecution();
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [handleSave, handleExecute, handleAddStep, handleNavigateBack, handleNavigateToRoot, debug.enabled, isPaused, enableDebugMode, disableDebugMode, stepOver, stepInto, stepOut, resumeExecution]);
-
-  return (
-    <ReactFlowProvider>
-      <div className="flex h-screen w-screen overflow-hidden bg-canvas-bg">
-        {/* Left Sidebar - Workflow List & Tools */}
-        <Sidebar />
-
-        {/* Main Canvas Area */}
-        <div className="flex flex-1 flex-col relative">
-          {/* Mobile Header */}
-          {breakpoint === 'mobile' && (
-            <div className="flex items-center justify-between p-3 border-b border-node-border bg-panel-bg">
-              <button
-                onClick={() => setSidebarOpen(true)}
-                className="w-10 h-10 rounded-lg flex items-center justify-center hover:bg-white/10 transition-colors"
-                aria-label="Open menu"
-              >
-                <Menu className="w-5 h-5 text-gray-400" />
-              </button>
-              <h1 className="text-sm font-medium text-white">Marktoflow</h1>
-              <button
-                onClick={() => setPropertiesPanelOpen(true)}
-                className="w-10 h-10 rounded-lg flex items-center justify-center hover:bg-white/10 transition-colors"
-                aria-label="Open properties"
-              >
-                <PanelRight className="w-5 h-5 text-gray-400" />
-              </button>
-            </div>
-          )}
-
-          {/* Desktop: Connection status, theme toggle & shortcuts */}
-          {breakpoint !== 'mobile' && (
-            <div className="absolute top-4 right-4 z-10 flex items-center gap-2">
-              <ThemeToggle showLabel />
-              <KeyboardShortcutsButton onClick={openShortcuts} />
-              <div
-                className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-xs ${
-                  connected
-                    ? 'bg-success/10 text-success'
-                    : 'bg-error/10 text-error'
-                }`}
-              >
-                <div
-                  className={`w-2 h-2 rounded-full ${
-                    connected ? 'bg-success' : 'bg-error'
-                  }`}
-                />
-                {connected ? 'Connected' : 'Disconnected'}
-              </div>
-            </div>
-          )}
-
-          {/* Toolbar */}
-          <Toolbar
-            onAddStep={handleAddStep}
-            onExecute={handleExecute}
-            onSave={handleSave}
-            isExecuting={isExecuting}
-          />
-
-          {/* Breadcrumb for sub-workflow navigation */}
-          <Breadcrumb
-            items={breadcrumbs}
-            onNavigate={handleBreadcrumbNavigate}
-          />
-
-          {/* Canvas */}
-          <div className="flex-1 relative">
-            <Canvas />
-
-            {/* Execution Overlay */}
-            <ExecutionOverlay
-              isExecuting={isExecuting}
-              isPaused={isPaused}
-              workflowStatus={workflowStatus}
-              currentStepId={currentStepId}
-              steps={executionSteps}
-              logs={executionLogs}
-              onPause={() => pauseExecution()}
-              onResume={() => resumeExecution()}
-              onStop={() => {
-                if (runIdRef.current) {
-                  cancelExecution(runIdRef.current);
-                  runIdRef.current = null;
-                }
-                setWorkflowStatus('cancelled');
-              }}
-              onStepOver={() => stepOver()}
-              onClose={() => {
-                setWorkflowStatus('pending');
-                setExecutionSteps([]);
-                setExecutionLogs([]);
-              }}
-              // Debug props
-              debug={debug}
-              onToggleDebugMode={() => {
-                if (debug.enabled) {
-                  disableDebugMode();
-                } else {
-                  enableDebugMode();
-                }
-              }}
-              onToggleBreakpoint={(stepId) => toggleBreakpoint(stepId)}
-              onStepInto={() => stepInto()}
-              onStepOut={() => stepOut()}
-              onClearBreakpoints={() => clearAllBreakpoints()}
-              onAddWatchExpression={(expr) => addWatchExpression(expr)}
-              onRemoveWatchExpression={(expr) => removeWatchExpression(expr)}
-            />
-          </div>
-
-          {/* AI Prompt Input */}
-          <PromptInput />
-        </div>
-
-        {/* Right Panel - Properties */}
-        <PropertiesPanel />
-
-        {/* New Step Wizard */}
-        <NewStepWizard
-          open={isNewStepOpen}
-          onOpenChange={(open) => {
-            if (!open) closeNewStepWizard();
-          }}
-          onCreateStep={handleCreateStep}
-          position={newStepPosition || undefined}
-        />
-
-        {/* Change Preview Modal */}
-        {pendingChanges && (
-          <ChangePreview
-            open={!!pendingChanges}
-            onOpenChange={() => rejectChanges()}
-            originalWorkflow={currentWorkflow}
-            modifiedWorkflow={pendingChanges}
-            explanation="AI has suggested the following changes to your workflow."
-            onAccept={acceptChanges}
-            onReject={rejectChanges}
-          />
-        )}
-
-        {/* Keyboard Shortcuts Modal */}
-        <KeyboardShortcuts open={isShortcutsOpen} onOpenChange={setShortcutsOpen} />
-      </div>
-    </ReactFlowProvider>
-  );
-}