@marktoflow/gui 2.0.0-alpha.1

package/src/client/App.tsx

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