@marktoflow/gui 2.0.0-alpha.1

package/src/client/stores/executionStore.ts

@@ -0,0 +1,440 @@
+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

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

package/src/client/stores/layoutStore.ts

@@ -0,0 +1,103 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,113 @@
+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: [] });
+  },
+}));