@marktoflow/gui 2.0.0-alpha.5 → 2.0.1

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

@@ -1,149 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Modal, ModalFooter } from './Modal';
-import { Button } from './Button';
-import { Keyboard } from 'lucide-react';
-import { getModKey } from '../../utils/platform';
-
-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))];
-
-  // Get platform-specific modifier key
-  const modKey = getModKey();
-
-  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 === '⌘' ? modKey : 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 }) {
-  const modKey = getModKey();
-
-  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 (${modKey}/)`}
-    >
-      <Keyboard className="w-3.5 h-3.5" />
-      <span className="hidden sm:inline">Shortcuts</span>
-    </button>
-  );
-}

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

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

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

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

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

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

package/src/client/hooks/useAIPrompt.ts

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