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

package/src/client/stores/executionStore.ts

@@ -1,440 +0,0 @@
-import { create } from 'zustand';
-import type { StepStatus, WorkflowStatus } from '@shared/types';
-
-export interface ExecutionStepResult {
-  stepId: string;
-  stepName: string;
-  status: StepStatus;
-  startTime?: string;
-  endTime?: string;
-  duration?: number;
-  output?: unknown;
-  outputVariable?: string;
-  error?: string;
-}
-
-export interface ExecutionRun {
-  id: string;
-  workflowId: string;
-  workflowName: string;
-  status: WorkflowStatus;
-  startTime: string;
-  endTime?: string;
-  duration?: number;
-  steps: ExecutionStepResult[];
-  logs: string[];
-  inputs?: Record<string, unknown>;
-  outputs?: Record<string, unknown>;
-}
-
-export interface DebugState {
-  enabled: boolean;
-  breakpoints: Set<string>;
-  currentStepId: string | null;
-  pausedAtBreakpoint: boolean;
-  stepOverPending: boolean;
-  watchExpressions: string[];
-  callStack: string[];
-}
-
-interface ExecutionState {
-  runs: ExecutionRun[];
-  currentRunId: string | null;
-  isExecuting: boolean;
-  isPaused: boolean;
-
-  // Debug mode state
-  debug: DebugState;
-
-  // Existing methods
-  startExecution: (workflowId: string, workflowName: string, inputs?: Record<string, unknown>) => string;
-  updateStepStatus: (runId: string, stepId: string, status: StepStatus, output?: unknown, error?: string, outputVariable?: string) => void;
-  completeExecution: (runId: string, status: WorkflowStatus, outputs?: Record<string, unknown>) => void;
-  addLog: (runId: string, message: string) => void;
-  pauseExecution: () => void;
-  resumeExecution: () => void;
-  cancelExecution: (runId: string) => void;
-  clearHistory: () => void;
-  getRun: (runId: string) => ExecutionRun | undefined;
-
-  // Debug mode methods
-  enableDebugMode: () => void;
-  disableDebugMode: () => void;
-  toggleBreakpoint: (stepId: string) => void;
-  hasBreakpoint: (stepId: string) => boolean;
-  clearAllBreakpoints: () => void;
-  stepOver: () => void;
-  stepInto: () => void;
-  stepOut: () => void;
-  setCurrentDebugStep: (stepId: string | null) => void;
-  addWatchExpression: (expression: string) => void;
-  removeWatchExpression: (expression: string) => void;
-  updateCallStack: (stack: string[]) => void;
-}
-
-const initialDebugState: DebugState = {
-  enabled: false,
-  breakpoints: new Set(),
-  currentStepId: null,
-  pausedAtBreakpoint: false,
-  stepOverPending: false,
-  watchExpressions: [],
-  callStack: [],
-};
-
-export const useExecutionStore = create<ExecutionState>((set, get) => ({
-  runs: [],
-  currentRunId: null,
-  isExecuting: false,
-  isPaused: false,
-  debug: initialDebugState,
-
-  startExecution: (workflowId, workflowName, inputs) => {
-    const runId = 'run-' + Date.now() + '-' + Math.random().toString(36).slice(2, 8);
-    const newRun: ExecutionRun = {
-      id: runId,
-      workflowId,
-      workflowName,
-      status: 'running',
-      startTime: new Date().toISOString(),
-      steps: [],
-      logs: ['Starting workflow execution: ' + workflowName],
-      inputs,
-    };
-
-    set({
-      runs: [newRun, ...get().runs].slice(0, 50), // Keep last 50 runs
-      currentRunId: runId,
-      isExecuting: true,
-      isPaused: false,
-    });
-
-    return runId;
-  },
-
-  updateStepStatus: (runId, stepId, status, output, error, outputVariable) => {
-    const { debug } = get();
-
-    // Check if we need to pause at breakpoint
-    const shouldPauseAtBreakpoint = debug.enabled &&
-      status === 'running' &&
-      debug.breakpoints.has(stepId);
-
-    set({
-      runs: get().runs.map((run) => {
-        if (run.id !== runId) return run;
-
-        const existingStep = run.steps.find((s) => s.stepId === stepId);
-        const now = new Date().toISOString();
-
-        if (existingStep) {
-          return {
-            ...run,
-            steps: run.steps.map((s) => {
-              if (s.stepId !== stepId) return s;
-              const endTime = status !== 'running' ? now : undefined;
-              const duration = endTime && s.startTime
-                ? new Date(endTime).getTime() - new Date(s.startTime).getTime()
-                : undefined;
-              return {
-                ...s,
-                status,
-                endTime,
-                duration,
-                output: output ?? s.output,
-                outputVariable: outputVariable ?? s.outputVariable,
-                error: error ?? s.error,
-              };
-            }),
-          };
-        } else {
-          return {
-            ...run,
-            steps: [
-              ...run.steps,
-              {
-                stepId,
-                stepName: stepId,
-                status,
-                startTime: now,
-                output,
-                outputVariable,
-                error,
-              },
-            ],
-          };
-        }
-      }),
-      // Update debug state if pausing at breakpoint
-      ...(shouldPauseAtBreakpoint ? {
-        isPaused: true,
-        debug: {
-          ...get().debug,
-          currentStepId: stepId,
-          pausedAtBreakpoint: true,
-          stepOverPending: false,
-        },
-      } : {
-        debug: {
-          ...get().debug,
-          currentStepId: status === 'running' ? stepId : get().debug.currentStepId,
-        },
-      }),
-    });
-
-    // Log breakpoint pause
-    if (shouldPauseAtBreakpoint) {
-      get().addLog(runId, `⏸️ Paused at breakpoint: ${stepId}`);
-    }
-  },
-
-  completeExecution: (runId, status, outputs) => {
-    const now = new Date().toISOString();
-    set({
-      runs: get().runs.map((run) => {
-        if (run.id !== runId) return run;
-        const duration = new Date(now).getTime() - new Date(run.startTime).getTime();
-        return {
-          ...run,
-          status,
-          endTime: now,
-          duration,
-          outputs,
-          logs: [
-            ...run.logs,
-            status === 'completed'
-              ? 'Workflow completed successfully'
-              : status === 'failed'
-                ? 'Workflow execution failed'
-                : 'Workflow execution cancelled',
-          ],
-        };
-      }),
-      currentRunId: null,
-      isExecuting: false,
-      isPaused: false,
-    });
-  },
-
-  addLog: (runId, message) => {
-    set({
-      runs: get().runs.map((run) =>
-        run.id === runId
-          ? { ...run, logs: [...run.logs, '[' + new Date().toLocaleTimeString() + '] ' + message] }
-          : run
-      ),
-    });
-  },
-
-  pauseExecution: () => {
-    set({ isPaused: true });
-    const { currentRunId, runs } = get();
-    if (currentRunId) {
-      const run = runs.find((r) => r.id === currentRunId);
-      if (run) {
-        get().addLog(currentRunId, 'Execution paused');
-      }
-    }
-  },
-
-  resumeExecution: () => {
-    set({ isPaused: false });
-    const { currentRunId } = get();
-    if (currentRunId) {
-      get().addLog(currentRunId, 'Execution resumed');
-    }
-  },
-
-  cancelExecution: (runId) => {
-    get().addLog(runId, 'Execution cancelled by user');
-    get().completeExecution(runId, 'cancelled');
-  },
-
-  clearHistory: () => {
-    set({ runs: [] });
-  },
-
-  getRun: (runId) => {
-    return get().runs.find((r) => r.id === runId);
-  },
-
-  // Debug mode methods
-  enableDebugMode: () => {
-    set({
-      debug: {
-        ...get().debug,
-        enabled: true,
-      },
-    });
-    const { currentRunId } = get();
-    if (currentRunId) {
-      get().addLog(currentRunId, '🐛 Debug mode enabled');
-    }
-  },
-
-  disableDebugMode: () => {
-    set({
-      debug: {
-        ...initialDebugState,
-        breakpoints: get().debug.breakpoints, // Preserve breakpoints
-      },
-    });
-    const { currentRunId } = get();
-    if (currentRunId) {
-      get().addLog(currentRunId, '🐛 Debug mode disabled');
-    }
-  },
-
-  toggleBreakpoint: (stepId) => {
-    const { debug } = get();
-    const newBreakpoints = new Set(debug.breakpoints);
-    if (newBreakpoints.has(stepId)) {
-      newBreakpoints.delete(stepId);
-    } else {
-      newBreakpoints.add(stepId);
-    }
-    set({
-      debug: {
-        ...debug,
-        breakpoints: newBreakpoints,
-      },
-    });
-  },
-
-  hasBreakpoint: (stepId) => {
-    return get().debug.breakpoints.has(stepId);
-  },
-
-  clearAllBreakpoints: () => {
-    set({
-      debug: {
-        ...get().debug,
-        breakpoints: new Set(),
-      },
-    });
-    const { currentRunId } = get();
-    if (currentRunId) {
-      get().addLog(currentRunId, 'All breakpoints cleared');
-    }
-  },
-
-  stepOver: () => {
-    const { debug, currentRunId, isPaused } = get();
-    if (!isPaused || !debug.enabled) return;
-
-    set({
-      isPaused: false,
-      debug: {
-        ...debug,
-        stepOverPending: true,
-        pausedAtBreakpoint: false,
-      },
-    });
-
-    if (currentRunId) {
-      get().addLog(currentRunId, '➡️ Step over');
-    }
-  },
-
-  stepInto: () => {
-    const { debug, currentRunId, isPaused } = get();
-    if (!isPaused || !debug.enabled) return;
-
-    set({
-      isPaused: false,
-      debug: {
-        ...debug,
-        stepOverPending: true,
-        pausedAtBreakpoint: false,
-      },
-    });
-
-    if (currentRunId) {
-      get().addLog(currentRunId, '⬇️ Step into');
-    }
-  },
-
-  stepOut: () => {
-    const { debug, currentRunId, isPaused } = get();
-    if (!isPaused || !debug.enabled) return;
-
-    set({
-      isPaused: false,
-      debug: {
-        ...debug,
-        stepOverPending: false,
-        pausedAtBreakpoint: false,
-      },
-    });
-
-    if (currentRunId) {
-      get().addLog(currentRunId, '⬆️ Step out');
-    }
-  },
-
-  setCurrentDebugStep: (stepId) => {
-    set({
-      debug: {
-        ...get().debug,
-        currentStepId: stepId,
-      },
-    });
-  },
-
-  addWatchExpression: (expression) => {
-    const { debug } = get();
-    if (!debug.watchExpressions.includes(expression)) {
-      set({
-        debug: {
-          ...debug,
-          watchExpressions: [...debug.watchExpressions, expression],
-        },
-      });
-    }
-  },
-
-  removeWatchExpression: (expression) => {
-    const { debug } = get();
-    set({
-      debug: {
-        ...debug,
-        watchExpressions: debug.watchExpressions.filter((e) => e !== expression),
-      },
-    });
-  },
-
-  updateCallStack: (stack) => {
-    set({
-      debug: {
-        ...get().debug,
-        callStack: stack,
-      },
-    });
-  },
-}));
-
-// Helper to format duration
-export function formatDuration(ms: number): string {
-  if (ms < 1000) return ms + 'ms';
-  if (ms < 60000) return (ms / 1000).toFixed(1) + 's';
-  const minutes = Math.floor(ms / 60000);
-  const seconds = Math.floor((ms % 60000) / 1000);
-  return minutes + 'm ' + seconds + 's';
-}
-
-// Helper to format relative time
-export function formatRelativeTime(isoString: string): string {
-  const now = new Date();
-  const then = new Date(isoString);
-  const diffMs = now.getTime() - then.getTime();
-  const diffSec = Math.floor(diffMs / 1000);
-  const diffMin = Math.floor(diffSec / 60);
-  const diffHour = Math.floor(diffMin / 60);
-  const diffDay = Math.floor(diffHour / 24);
-
-  if (diffSec < 60) return 'just now';
-  if (diffMin < 60) return diffMin + ' min ago';
-  if (diffHour < 24) return diffHour + ' hour' + (diffHour > 1 ? 's' : '') + ' ago';
-  if (diffDay < 7) return diffDay + ' day' + (diffDay > 1 ? 's' : '') + ' ago';
-  return then.toLocaleDateString();
-}

package/src/client/stores/index.ts

@@ -1,4 +0,0 @@
-export { useCanvasStore } from './canvasStore';
-export { useWorkflowStore } from './workflowStore';
-export { usePromptStore } from './promptStore';
-export { useEditorStore } from './editorStore';

package/src/client/stores/layoutStore.ts

@@ -1,103 +0,0 @@
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-
-export type Breakpoint = 'mobile' | 'tablet' | 'desktop';
-
-interface LayoutState {
-  // Panel visibility
-  sidebarOpen: boolean;
-  propertiesPanelOpen: boolean;
-
-  // Mobile menu
-  mobileMenuOpen: boolean;
-
-  // Current breakpoint (computed from window width)
-  breakpoint: Breakpoint;
-
-  // Actions
-  toggleSidebar: () => void;
-  setSidebarOpen: (open: boolean) => void;
-  togglePropertiesPanel: () => void;
-  setPropertiesPanelOpen: (open: boolean) => void;
-  toggleMobileMenu: () => void;
-  setMobileMenuOpen: (open: boolean) => void;
-  setBreakpoint: (breakpoint: Breakpoint) => void;
-
-  // Close all panels (useful for mobile)
-  closeAllPanels: () => void;
-}
-
-// Breakpoint thresholds
-export const BREAKPOINTS = {
-  mobile: 0,
-  tablet: 768,
-  desktop: 1024,
-} as const;
-
-export function getBreakpoint(width: number): Breakpoint {
-  if (width >= BREAKPOINTS.desktop) return 'desktop';
-  if (width >= BREAKPOINTS.tablet) return 'tablet';
-  return 'mobile';
-}
-
-export const useLayoutStore = create<LayoutState>()(
-  persist(
-    (set, get) => ({
-      // Default state - sidebar open on desktop, closed on mobile
-      sidebarOpen: true,
-      propertiesPanelOpen: true,
-      mobileMenuOpen: false,
-      breakpoint: 'desktop',
-
-      toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
-      setSidebarOpen: (open) => set({ sidebarOpen: open }),
-
-      togglePropertiesPanel: () =>
-        set((state) => ({ propertiesPanelOpen: !state.propertiesPanelOpen })),
-      setPropertiesPanelOpen: (open) => set({ propertiesPanelOpen: open }),
-
-      toggleMobileMenu: () =>
-        set((state) => ({ mobileMenuOpen: !state.mobileMenuOpen })),
-      setMobileMenuOpen: (open) => set({ mobileMenuOpen: open }),
-
-      setBreakpoint: (breakpoint) => {
-        const current = get();
-        // Auto-manage panels based on breakpoint changes
-        if (breakpoint === 'mobile') {
-          set({
-            breakpoint,
-            sidebarOpen: false,
-            propertiesPanelOpen: false,
-          });
-        } else if (breakpoint === 'tablet') {
-          set({
-            breakpoint,
-            sidebarOpen: true,
-            propertiesPanelOpen: false,
-          });
-        } else {
-          set({
-            breakpoint,
-            sidebarOpen: true,
-            propertiesPanelOpen: true,
-          });
-        }
-      },
-
-      closeAllPanels: () =>
-        set({
-          sidebarOpen: false,
-          propertiesPanelOpen: false,
-          mobileMenuOpen: false,
-        }),
-    }),
-    {
-      name: 'marktoflow-layout',
-      partialize: (state) => ({
-        // Don't persist breakpoint - it's computed from window
-        sidebarOpen: state.sidebarOpen,
-        propertiesPanelOpen: state.propertiesPanelOpen,
-      }),
-    }
-  )
-);

package/src/client/stores/navigationStore.ts

@@ -1,49 +0,0 @@
-import { create } from 'zustand';
-
-export interface NavigationItem {
-  id: string;
-  name: string;
-  path: string;
-}
-
-interface NavigationState {
-  // Breadcrumb trail for sub-workflow navigation
-  breadcrumbs: NavigationItem[];
-
-  // Actions
-  pushWorkflow: (item: NavigationItem) => void;
-  popToIndex: (index: number) => void;
-  popWorkflow: () => void;
-  resetNavigation: () => void;
-  setRootWorkflow: (item: NavigationItem) => void;
-}
-
-export const useNavigationStore = create<NavigationState>((set, get) => ({
-  breadcrumbs: [],
-
-  pushWorkflow: (item) => {
-    set({ breadcrumbs: [...get().breadcrumbs, item] });
-  },
-
-  popToIndex: (index) => {
-    const { breadcrumbs } = get();
-    if (index >= 0 && index < breadcrumbs.length) {
-      set({ breadcrumbs: breadcrumbs.slice(0, index + 1) });
-    }
-  },
-
-  popWorkflow: () => {
-    const { breadcrumbs } = get();
-    if (breadcrumbs.length > 1) {
-      set({ breadcrumbs: breadcrumbs.slice(0, -1) });
-    }
-  },
-
-  resetNavigation: () => {
-    set({ breadcrumbs: [] });
-  },
-
-  setRootWorkflow: (item) => {
-    set({ breadcrumbs: [item] });
-  },
-}));

package/src/client/stores/promptStore.ts

@@ -1,113 +0,0 @@
-import { create } from 'zustand';
-import { useWorkflowStore } from './workflowStore';
-
-export interface PromptHistoryItem {
-  prompt: string;
-  response: string;
-  timestamp: Date;
-  success: boolean;
-}
-
-interface PromptState {
-  isProcessing: boolean;
-  history: PromptHistoryItem[];
-  lastError: string | null;
-  pendingChanges: any | null;
-
-  sendPrompt: (prompt: string) => Promise<void>;
-  acceptChanges: () => void;
-  rejectChanges: () => void;
-  clearHistory: () => void;
-}
-
-export const usePromptStore = create<PromptState>((set, get) => ({
-  isProcessing: false,
-  history: [],
-  lastError: null,
-  pendingChanges: null,
-
-  sendPrompt: async (prompt: string) => {
-    set({ isProcessing: true, lastError: null });
-
-    const workflow = useWorkflowStore.getState().currentWorkflow;
-
-    try {
-      const response = await fetch('/api/ai/prompt', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          prompt,
-          workflow,
-        }),
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to process prompt');
-      }
-
-      const data = await response.json();
-
-      // Add to history
-      const historyItem: PromptHistoryItem = {
-        prompt,
-        response: data.explanation,
-        timestamp: new Date(),
-        success: true,
-      };
-
-      set({
-        history: [historyItem, ...get().history].slice(0, 20),
-        pendingChanges: data.workflow,
-        isProcessing: false,
-      });
-
-      // Auto-accept for now (in production, show diff first)
-      if (data.workflow) {
-        get().acceptChanges();
-      }
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : 'Unknown error';
-
-      const historyItem: PromptHistoryItem = {
-        prompt,
-        response: errorMessage,
-        timestamp: new Date(),
-        success: false,
-      };
-
-      set({
-        history: [historyItem, ...get().history].slice(0, 20),
-        lastError: errorMessage,
-        isProcessing: false,
-      });
-
-      // Demo: simulate AI response for testing without backend
-      console.log('AI Prompt (demo mode):', prompt);
-      console.log('Current workflow:', workflow);
-    }
-  },
-
-  acceptChanges: () => {
-    const pendingChanges = get().pendingChanges;
-    if (!pendingChanges) return;
-
-    // Update workflow store
-    useWorkflowStore.getState().saveWorkflow(pendingChanges);
-
-    // TODO: Convert workflow to graph and update canvas
-    // const { nodes, edges } = workflowToGraph(pendingChanges);
-    // useCanvasStore.getState().setNodes(nodes);
-    // useCanvasStore.getState().setEdges(edges);
-
-    set({ pendingChanges: null });
-  },
-
-  rejectChanges: () => {
-    set({ pendingChanges: null });
-  },
-
-  clearHistory: () => {
-    set({ history: [] });
-  },
-}));