@marktoflow/gui 2.0.0-alpha.1

package/src/client/components/common/KeyboardShortcuts.tsx

@@ -0,0 +1,143 @@
+import { useState, useEffect } from 'react';
+import { Modal, ModalFooter } from './Modal';
+import { Button } from './Button';
+import { Keyboard } from 'lucide-react';
+
+interface Shortcut {
+  keys: string[];
+  description: string;
+  category: string;
+}
+
+const shortcuts: Shortcut[] = [
+  // General
+  { keys: ['⌘', 'S'], description: 'Save workflow', category: 'General' },
+  { keys: ['⌘', 'Z'], description: 'Undo', category: 'General' },
+  { keys: ['⌘', '⇧', 'Z'], description: 'Redo', category: 'General' },
+  { keys: ['⌘', '?'], description: 'Show keyboard shortcuts', category: 'General' },
+
+  // Canvas
+  { keys: ['N'], description: 'Add new step', category: 'Canvas' },
+  { keys: ['⌘', 'L'], description: 'Auto-layout canvas', category: 'Canvas' },
+  { keys: ['⌘', '0'], description: 'Fit view', category: 'Canvas' },
+  { keys: ['⌘', '+'], description: 'Zoom in', category: 'Canvas' },
+  { keys: ['⌘', '-'], description: 'Zoom out', category: 'Canvas' },
+  { keys: ['⌫'], description: 'Delete selected', category: 'Canvas' },
+  { keys: ['⌘', 'D'], description: 'Duplicate selected', category: 'Canvas' },
+
+  // Editing
+  { keys: ['Double-click'], description: 'Edit step', category: 'Editing' },
+  { keys: ['E'], description: 'Edit selected step', category: 'Editing' },
+  { keys: ['Y'], description: 'View YAML', category: 'Editing' },
+  { keys: ['Escape'], description: 'Close modal / deselect', category: 'Editing' },
+
+  // Navigation
+  { keys: ['⌘', '←'], description: 'Back to parent workflow', category: 'Navigation' },
+  { keys: ['⌘', '↑'], description: 'Go to root workflow', category: 'Navigation' },
+
+  // Execution
+  { keys: ['⌘', '↵'], description: 'Execute workflow', category: 'Execution' },
+
+  // Debugging
+  { keys: ['F9'], description: 'Toggle debug mode', category: 'Debugging' },
+  { keys: ['F5'], description: 'Continue execution', category: 'Debugging' },
+  { keys: ['F10'], description: 'Step over', category: 'Debugging' },
+  { keys: ['F11'], description: 'Step into', category: 'Debugging' },
+  { keys: ['⇧', 'F11'], description: 'Step out', category: 'Debugging' },
+];
+
+interface KeyboardShortcutsProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function KeyboardShortcuts({ open, onOpenChange }: KeyboardShortcutsProps) {
+  // Group shortcuts by category
+  const categories = [...new Set(shortcuts.map((s) => s.category))];
+
+  return (
+    <Modal
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Keyboard Shortcuts"
+      description="Quick reference for all keyboard shortcuts"
+      size="md"
+    >
+      <div className="p-4 space-y-6 max-h-[60vh] overflow-y-auto">
+        {categories.map((category) => (
+          <div key={category}>
+            <h3 className="text-sm font-medium text-gray-400 uppercase tracking-wider mb-3">
+              {category}
+            </h3>
+            <div className="space-y-2">
+              {shortcuts
+                .filter((s) => s.category === category)
+                .map((shortcut, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center justify-between py-1.5 border-b border-node-border last:border-0"
+                  >
+                    <span className="text-sm text-gray-300">{shortcut.description}</span>
+                    <div className="flex items-center gap-1">
+                      {shortcut.keys.map((key, i) => (
+                        <kbd
+                          key={i}
+                          className="px-2 py-1 bg-node-bg border border-node-border rounded text-xs font-mono text-gray-300"
+                        >
+                          {key}
+                        </kbd>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <ModalFooter>
+        <Button variant="secondary" onClick={() => onOpenChange(false)}>
+          Close
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+}
+
+// Hook to manage keyboard shortcuts modal
+export function useKeyboardShortcuts() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // ⌘+? or Ctrl+? to open shortcuts
+      if ((e.metaKey || e.ctrlKey) && e.key === '/') {
+        e.preventDefault();
+        setIsOpen(true);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  return {
+    isOpen,
+    setIsOpen,
+    openShortcuts: () => setIsOpen(true),
+  };
+}
+
+// Small button to show keyboard shortcuts
+export function KeyboardShortcutsButton({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      className="flex items-center gap-1.5 px-2 py-1 text-xs text-gray-500 hover:text-gray-300 transition-colors"
+      title="Keyboard shortcuts (⌘/)"
+    >
+      <Keyboard className="w-3.5 h-3.5" />
+      <span className="hidden sm:inline">Shortcuts</span>
+    </button>
+  );
+}

package/src/client/components/common/Modal.tsx

@@ -0,0 +1,93 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { cn } from '../../utils/cn';
+
+interface ModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+  className?: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+
+const sizeClasses = {
+  sm: 'max-w-md',
+  md: 'max-w-lg',
+  lg: 'max-w-2xl',
+  xl: 'max-w-4xl',
+  full: 'max-w-[90vw]',
+};
+
+export function Modal({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  className,
+  size = 'md',
+}: ModalProps) {
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <Dialog.Content
+          className={cn(
+            'fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',
+            'w-full rounded-lg border border-node-border bg-panel-bg shadow-lg',
+            'data-[state=open]:animate-in data-[state=closed]:animate-out',
+            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+            'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
+            'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+            'duration-200',
+            sizeClasses[size],
+            className
+          )}
+        >
+          {(title || description) && (
+            <div className="flex items-start justify-between p-4 border-b border-node-border">
+              <div>
+                {title && (
+                  <Dialog.Title className="text-lg font-semibold text-white">
+                    {title}
+                  </Dialog.Title>
+                )}
+                {description && (
+                  <Dialog.Description className="mt-1 text-sm text-gray-400">
+                    {description}
+                  </Dialog.Description>
+                )}
+              </div>
+              <Dialog.Close className="rounded-full p-1 hover:bg-white/10 transition-colors">
+                <X className="w-5 h-5 text-gray-400" />
+              </Dialog.Close>
+            </div>
+          )}
+          <div className="max-h-[calc(85vh-8rem)] overflow-y-auto">{children}</div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+export function ModalFooter({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-end gap-3 p-4 border-t border-node-border',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/client/components/common/Tabs.tsx

@@ -0,0 +1,57 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex items-center gap-1 border-b border-node-border w-full px-2',
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap px-3 py-2 text-sm font-medium',
+      'text-gray-400 transition-all',
+      'hover:text-gray-200',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+      'disabled:pointer-events-none disabled:opacity-50',
+      'data-[state=active]:text-primary data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:-mb-px',
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/client/components/common/ThemeToggle.tsx

@@ -0,0 +1,63 @@
+import { Sun, Moon, Monitor } from 'lucide-react';
+import { useThemeStore, type Theme } from '../../stores/themeStore';
+
+interface ThemeToggleProps {
+  showLabel?: boolean;
+}
+
+export function ThemeToggle({ showLabel = false }: ThemeToggleProps) {
+  const { theme, toggleTheme } = useThemeStore();
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-white/10 dark:hover:bg-white/10 light:hover:bg-black/5 transition-colors"
+      title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+    >
+      {theme === 'dark' ? (
+        <Moon className="w-4 h-4 text-gray-400" />
+      ) : (
+        <Sun className="w-4 h-4 text-yellow-500" />
+      )}
+      {showLabel && (
+        <span className="text-xs text-gray-400">
+          {theme === 'dark' ? 'Dark' : 'Light'}
+        </span>
+      )}
+    </button>
+  );
+}
+
+interface ThemePickerProps {
+  className?: string;
+}
+
+export function ThemePicker({ className }: ThemePickerProps) {
+  const { theme, setTheme } = useThemeStore();
+
+  const themes: { value: Theme; icon: typeof Sun; label: string }[] = [
+    { value: 'light', icon: Sun, label: 'Light' },
+    { value: 'dark', icon: Moon, label: 'Dark' },
+    { value: 'system', icon: Monitor, label: 'System' },
+  ];
+
+  return (
+    <div className={`flex items-center gap-1 ${className}`}>
+      {themes.map(({ value, icon: Icon, label }) => (
+        <button
+          key={value}
+          onClick={() => setTheme(value)}
+          className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs transition-colors ${
+            theme === value
+              ? 'bg-primary/20 text-primary'
+              : 'text-gray-400 hover:text-white hover:bg-white/10'
+          }`}
+          title={`${label} mode`}
+        >
+          <Icon className="w-4 h-4" />
+          <span className="hidden sm:inline">{label}</span>
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/client/components/index.ts

@@ -0,0 +1,32 @@
+// Canvas components
+export { Canvas } from './Canvas/Canvas';
+export { StepNode } from './Canvas/StepNode';
+export { SubWorkflowNode } from './Canvas/SubWorkflowNode';
+export { TriggerNode } from './Canvas/TriggerNode';
+export { OutputNode } from './Canvas/OutputNode';
+export { Toolbar } from './Canvas/Toolbar';
+export { ExecutionOverlay } from './Canvas/ExecutionOverlay';
+export { NodeContextMenu, CanvasContextMenu } from './Canvas/NodeContextMenu';
+
+// Editor components
+export { StepEditor } from './Editor/StepEditor';
+export { YamlEditor, YamlViewer } from './Editor/YamlEditor';
+export { InputsEditor } from './Editor/InputsEditor';
+export { NewStepWizard } from './Editor/NewStepWizard';
+
+// Common components
+export { Button } from './common/Button';
+export { Modal, ModalFooter } from './common/Modal';
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './common/Tabs';
+export { ThemeToggle, ThemePicker } from './common/ThemeToggle';
+export * from './common/ContextMenu';
+
+// Prompt components
+export { PromptInput } from './Prompt/PromptInput';
+export { ChangePreview } from './Prompt/ChangePreview';
+
+// Panel components
+export { PropertiesPanel } from './Panels/PropertiesPanel';
+
+// Sidebar components
+export { Sidebar } from './Sidebar/Sidebar';

package/src/client/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useWebSocket } from './useWebSocket';
+export { useWorkflow } from './useWorkflow';
+export { useCanvas } from './useCanvas';
+export { useAIPrompt } from './useAIPrompt';

package/src/client/hooks/useAIPrompt.ts

@@ -0,0 +1,108 @@
+import { useCallback } from 'react';
+import { usePromptStore } from '../stores/promptStore';
+import { useWorkflowStore } from '../stores/workflowStore';
+
+export function useAIPrompt() {
+  const {
+    isProcessing,
+    history,
+    lastError,
+    pendingChanges,
+    sendPrompt,
+    acceptChanges,
+    rejectChanges,
+    clearHistory,
+  } = usePromptStore();
+
+  const currentWorkflow = useWorkflowStore((s) => s.currentWorkflow);
+
+  // Send a prompt with the current workflow context
+  const submitPrompt = useCallback(
+    async (prompt: string) => {
+      if (!prompt.trim()) return;
+      await sendPrompt(prompt);
+    },
+    [sendPrompt]
+  );
+
+  // Quick action helpers
+  const addStep = useCallback(
+    async (service: string, description?: string) => {
+      const prompt = description
+        ? `Add a ${service} step: ${description}`
+        : `Add a ${service} step at the end of the workflow`;
+      await submitPrompt(prompt);
+    },
+    [submitPrompt]
+  );
+
+  const modifyStep = useCallback(
+    async (stepId: string, modification: string) => {
+      const prompt = `Modify step "${stepId}": ${modification}`;
+      await submitPrompt(prompt);
+    },
+    [submitPrompt]
+  );
+
+  const addErrorHandling = useCallback(
+    async (stepId?: string, retries = 3) => {
+      const prompt = stepId
+        ? `Add error handling with ${retries} retries to step "${stepId}"`
+        : `Add error handling with ${retries} retries to all steps`;
+      await submitPrompt(prompt);
+    },
+    [submitPrompt]
+  );
+
+  const addCondition = useCallback(
+    async (stepId: string, condition: string) => {
+      const prompt = `Add a condition to step "${stepId}": only run if ${condition}`;
+      await submitPrompt(prompt);
+    },
+    [submitPrompt]
+  );
+
+  const convertToSubworkflow = useCallback(
+    async (stepIds: string[], name: string) => {
+      const prompt = `Convert steps ${stepIds.join(', ')} into a sub-workflow called "${name}"`;
+      await submitPrompt(prompt);
+    },
+    [submitPrompt]
+  );
+
+  const explainWorkflow = useCallback(async () => {
+    const prompt =
+      'Explain what this workflow does, step by step, in simple terms';
+    await submitPrompt(prompt);
+  }, [submitPrompt]);
+
+  const suggestImprovements = useCallback(async () => {
+    const prompt =
+      'Analyze this workflow and suggest improvements for error handling, efficiency, or reliability';
+    await submitPrompt(prompt);
+  }, [submitPrompt]);
+
+  return {
+    // State
+    isProcessing,
+    history,
+    lastError,
+    pendingChanges,
+    currentWorkflow,
+
+    // Core actions
+    submitPrompt,
+    acceptChanges,
+    rejectChanges,
+    clearHistory,
+
+    // Quick actions
+    addStep,
+    modifyStep,
+    addErrorHandling,
+    addCondition,
+    convertToSubworkflow,
+    explainWorkflow,
+    suggestImprovements,
+  };
+}