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

package/src/client/components/Sidebar/Sidebar.tsx

@@ -1,362 +0,0 @@
-import { useState, useCallback, useEffect } from 'react';
-import {
-  FileText,
-  FolderTree,
-  ChevronRight,
-  ChevronLeft,
-  Plus,
-  Search,
-  Loader2,
-  X,
-  Upload,
-} from 'lucide-react';
-import { useWorkflowStore } from '../../stores/workflowStore';
-import { useNavigationStore } from '../../stores/navigationStore';
-import { useLayoutStore } from '../../stores/layoutStore';
-import { ImportDialog } from './ImportDialog';
-
-export function Sidebar() {
-  const [activeTab, setActiveTab] = useState<'workflows' | 'tools'>(
-    'workflows'
-  );
-  const { workflows, selectedWorkflow, selectWorkflow } = useWorkflowStore();
-  const { resetNavigation } = useNavigationStore();
-  const { sidebarOpen, setSidebarOpen, breakpoint } = useLayoutStore();
-
-  // Handle workflow selection - resets sub-workflow navigation
-  const handleSelectWorkflow = useCallback(
-    (path: string) => {
-      resetNavigation();
-      selectWorkflow(path);
-      // Close sidebar on mobile after selection
-      if (breakpoint === 'mobile') {
-        setSidebarOpen(false);
-      }
-    },
-    [resetNavigation, selectWorkflow, breakpoint, setSidebarOpen]
-  );
-
-  // Collapsed state for desktop
-  if (!sidebarOpen && breakpoint !== 'mobile') {
-    return (
-      <button
-        onClick={() => setSidebarOpen(true)}
-        className="w-12 bg-panel-bg border-r border-node-border flex flex-col items-center py-4 gap-4 hover:bg-white/5 transition-colors"
-        aria-label="Expand sidebar"
-      >
-        <ChevronRight className="w-4 h-4 text-gray-400" />
-        <FolderTree className="w-5 h-5 text-primary" />
-      </button>
-    );
-  }
-
-  // Mobile overlay
-  if (breakpoint === 'mobile') {
-    if (!sidebarOpen) return null;
-
-    return (
-      <>
-        {/* Backdrop */}
-        <div
-          className="fixed inset-0 bg-black/50 z-40 md:hidden"
-          onClick={() => setSidebarOpen(false)}
-        />
-        {/* Sidebar */}
-        <div className="fixed inset-y-0 left-0 w-72 bg-panel-bg border-r border-node-border flex flex-col z-50 md:hidden animate-slide-in-left">
-          <SidebarContent
-            activeTab={activeTab}
-            setActiveTab={setActiveTab}
-            workflows={workflows}
-            selectedWorkflow={selectedWorkflow}
-            onSelectWorkflow={handleSelectWorkflow}
-            onClose={() => setSidebarOpen(false)}
-            showClose
-          />
-        </div>
-      </>
-    );
-  }
-
-  // Desktop/Tablet sidebar
-  return (
-    <div className="w-64 bg-panel-bg border-r border-node-border flex flex-col">
-      <SidebarContent
-        activeTab={activeTab}
-        setActiveTab={setActiveTab}
-        workflows={workflows}
-        selectedWorkflow={selectedWorkflow}
-        onSelectWorkflow={handleSelectWorkflow}
-        onClose={() => setSidebarOpen(false)}
-        showClose={breakpoint === 'tablet'}
-      />
-    </div>
-  );
-}
-
-interface SidebarContentProps {
-  activeTab: 'workflows' | 'tools';
-  setActiveTab: (tab: 'workflows' | 'tools') => void;
-  workflows: Array<{ path: string; name: string }>;
-  selectedWorkflow: string | null;
-  onSelectWorkflow: (path: string) => void;
-  onClose: () => void;
-  showClose?: boolean;
-}
-
-function SidebarContent({
-  activeTab,
-  setActiveTab,
-  workflows,
-  selectedWorkflow,
-  onSelectWorkflow,
-  onClose,
-  showClose,
-}: SidebarContentProps) {
-  const [showImportDialog, setShowImportDialog] = useState(false);
-  const { fetchWorkflows } = useWorkflowStore();
-
-  return (
-    <>
-      {/* Logo/Title */}
-      <div className="p-4 border-b border-node-border flex items-center justify-between">
-        <h1 className="text-lg font-semibold text-white flex items-center gap-2">
-          <FolderTree className="w-5 h-5 text-primary" />
-          Marktoflow
-        </h1>
-        {showClose && (
-          <button
-            onClick={onClose}
-            className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-white/10 transition-colors"
-            aria-label="Close sidebar"
-          >
-            <X className="w-4 h-4 text-gray-400" />
-          </button>
-        )}
-      </div>
-
-      {/* Tab buttons */}
-      <div className="flex border-b border-node-border">
-        <button
-          onClick={() => setActiveTab('workflows')}
-          className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
-            activeTab === 'workflows'
-              ? 'text-primary border-b-2 border-primary'
-              : 'text-gray-400 hover:text-white'
-          }`}
-        >
-          Workflows
-        </button>
-        <button
-          onClick={() => setActiveTab('tools')}
-          className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
-            activeTab === 'tools'
-              ? 'text-primary border-b-2 border-primary'
-              : 'text-gray-400 hover:text-white'
-          }`}
-        >
-          Tools
-        </button>
-      </div>
-
-      {/* Search */}
-      <div className="p-3 border-b border-node-border">
-        <div className="relative">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
-          <input
-            type="text"
-            placeholder={`Search ${activeTab}...`}
-            className="w-full pl-9 pr-3 py-2 bg-node-bg border border-node-border rounded-lg text-sm text-white placeholder-gray-500 focus:outline-none focus:border-primary"
-          />
-        </div>
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 overflow-y-auto p-2">
-        {activeTab === 'workflows' ? (
-          <WorkflowList
-            workflows={workflows}
-            selectedWorkflow={selectedWorkflow}
-            onSelect={onSelectWorkflow}
-          />
-        ) : (
-          <ToolsPalette />
-        )}
-      </div>
-
-      {/* New workflow and Import buttons */}
-      {activeTab === 'workflows' && (
-        <div className="p-3 border-t border-node-border space-y-2">
-          <button className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary hover:bg-primary-dark text-white rounded-lg text-sm font-medium transition-colors">
-            <Plus className="w-4 h-4" />
-            New Workflow
-          </button>
-          <button
-            onClick={() => setShowImportDialog(true)}
-            className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-node-bg border border-node-border hover:bg-white/5 text-gray-300 rounded-lg text-sm font-medium transition-colors"
-          >
-            <Upload className="w-4 h-4" />
-            Import
-          </button>
-        </div>
-      )}
-
-      {/* Import Dialog */}
-      <ImportDialog
-        open={showImportDialog}
-        onOpenChange={setShowImportDialog}
-        onImportComplete={() => fetchWorkflows()}
-      />
-    </>
-  );
-}
-
-interface WorkflowListProps {
-  workflows: Array<{ path: string; name: string }>;
-  selectedWorkflow: string | null;
-  onSelect: (path: string) => void;
-}
-
-function WorkflowList({
-  workflows,
-  selectedWorkflow,
-  onSelect,
-}: WorkflowListProps) {
-  if (workflows.length === 0) {
-    return (
-      <div className="text-center py-8 text-gray-500 text-sm">
-        No workflows found
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-1">
-      {workflows.map((workflow) => (
-        <button
-          key={workflow.path}
-          onClick={() => onSelect(workflow.path)}
-          className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left transition-colors ${
-            selectedWorkflow === workflow.path
-              ? 'bg-primary/10 text-primary'
-              : 'text-gray-300 hover:bg-white/5'
-          }`}
-        >
-          <FileText className="w-4 h-4 flex-shrink-0" />
-          <span className="text-sm truncate">{workflow.name}</span>
-          <ChevronRight className="w-4 h-4 ml-auto flex-shrink-0 opacity-50" />
-        </button>
-      ))}
-    </div>
-  );
-}
-
-export interface ToolDefinition {
-  id: string;
-  name: string;
-  icon: string;
-  category: string;
-  description?: string;
-  sdk?: string;
-  authType?: string;
-  actionCount?: number;
-  actions?: string[];
-}
-
-// Fallback tools in case API is unavailable
-const fallbackTools: ToolDefinition[] = [
-  { id: 'slack', name: 'Slack', icon: '💬', category: 'Communication', sdk: '@slack/web-api' },
-  { id: 'github', name: 'GitHub', icon: '🐙', category: 'Development', sdk: '@octokit/rest' },
-  { id: 'jira', name: 'Jira', icon: '📋', category: 'Project Management', sdk: 'jira.js' },
-  { id: 'gmail', name: 'Gmail', icon: '📧', category: 'Communication', sdk: 'googleapis' },
-  { id: 'http', name: 'HTTP', icon: '🌐', category: 'Network' },
-  { id: 'claude', name: 'Claude', icon: '🤖', category: 'AI' },
-];
-
-function ToolsPalette() {
-  const [tools, setTools] = useState<ToolDefinition[]>(fallbackTools);
-  const [loading, setLoading] = useState(true);
-  const [searchQuery, setSearchQuery] = useState('');
-
-  // Fetch tools from API
-  useEffect(() => {
-    async function fetchTools() {
-      try {
-        const response = await fetch('/api/tools');
-        if (response.ok) {
-          const data = await response.json();
-          setTools(data.tools);
-        }
-      } catch (error) {
-        console.error('Failed to fetch tools:', error);
-        // Keep fallback tools
-      } finally {
-        setLoading(false);
-      }
-    }
-    fetchTools();
-  }, []);
-
-  // Filter tools by search query
-  const filteredTools = searchQuery
-    ? tools.filter(
-        (t) =>
-          t.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-          t.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
-          t.description?.toLowerCase().includes(searchQuery.toLowerCase())
-      )
-    : tools;
-
-  const categories = [...new Set(filteredTools.map((t) => t.category))];
-
-  const handleDragStart = (e: React.DragEvent, tool: ToolDefinition) => {
-    e.dataTransfer.setData('application/marktoflow-tool', JSON.stringify(tool));
-    e.dataTransfer.effectAllowed = 'copy';
-  };
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center py-8">
-        <Loader2 className="w-5 h-5 text-gray-500 animate-spin" />
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      {categories.map((category) => (
-        <div key={category}>
-          <h3 className="text-xs font-medium text-gray-500 uppercase tracking-wider px-2 mb-2">
-            {category}
-          </h3>
-          <div className="space-y-1">
-            {filteredTools
-              .filter((t) => t.category === category)
-              .map((tool) => (
-                <div
-                  key={tool.id}
-                  draggable
-                  onDragStart={(e) => handleDragStart(e, tool)}
-                  className="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-300 hover:bg-white/5 cursor-grab active:cursor-grabbing transition-colors group"
-                  title={tool.description || (tool.sdk ? 'SDK: ' + tool.sdk : undefined)}
-                >
-                  <span className="text-lg">{tool.icon}</span>
-                  <div className="flex-1 min-w-0">
-                    <span className="text-sm block truncate">{tool.name}</span>
-                    {tool.actionCount !== undefined && (
-                      <span className="text-xs text-gray-500">{tool.actionCount} actions</span>
-                    )}
-                  </div>
-                </div>
-              ))}
-          </div>
-        </div>
-      ))}
-
-      {filteredTools.length === 0 && (
-        <div className="text-center py-8 text-gray-500 text-sm">
-          No tools found
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,40 +0,0 @@
-import { ChevronRight, Home } from 'lucide-react';
-
-export interface BreadcrumbItem {
-  id: string;
-  name: string;
-  path?: string;
-}
-
-interface BreadcrumbProps {
-  items: BreadcrumbItem[];
-  onNavigate: (item: BreadcrumbItem, index: number) => void;
-}
-
-export function Breadcrumb({ items, onNavigate }: BreadcrumbProps) {
-  if (items.length <= 1) {
-    return null;
-  }
-
-  return (
-    <nav className="flex items-center gap-1 px-4 py-2 bg-panel-bg border-b border-node-border">
-      {items.map((item, index) => (
-        <div key={item.id} className="flex items-center">
-          {index > 0 && <ChevronRight className="w-4 h-4 text-gray-600 mx-1" />}
-          <button
-            onClick={() => onNavigate(item, index)}
-            className={`flex items-center gap-1.5 px-2 py-1 rounded text-sm transition-colors ${
-              index === items.length - 1
-                ? 'text-white font-medium cursor-default'
-                : 'text-gray-400 hover:text-white hover:bg-white/5'
-            }`}
-            disabled={index === items.length - 1}
-          >
-            {index === 0 && <Home className="w-3.5 h-3.5" />}
-            <span className="max-w-[150px] truncate">{item.name}</span>
-          </button>
-        </div>
-      ))}
-    </nav>
-  );
-}

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

@@ -1,68 +0,0 @@
-import { forwardRef } from 'react';
-import { cn } from '../../utils/cn';
-import { Loader2 } from 'lucide-react';
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'ghost' | 'destructive';
-  size?: 'sm' | 'md' | 'lg';
-  loading?: boolean;
-  icon?: React.ReactNode;
-}
-
-const variantClasses = {
-  primary:
-    'bg-primary hover:bg-primary-dark text-white border-transparent',
-  secondary:
-    'bg-node-bg hover:bg-white/10 text-gray-300 border-node-border hover:border-primary',
-  ghost: 'bg-transparent hover:bg-white/10 text-gray-300 border-transparent',
-  destructive:
-    'bg-error/10 hover:bg-error/20 text-error border-error/20 hover:border-error',
-};
-
-const sizeClasses = {
-  sm: 'px-2.5 py-1.5 text-xs',
-  md: 'px-4 py-2 text-sm',
-  lg: 'px-6 py-3 text-base',
-};
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant = 'primary',
-      size = 'md',
-      loading,
-      icon,
-      disabled,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <button
-        ref={ref}
-        disabled={disabled || loading}
-        className={cn(
-          'inline-flex items-center justify-center gap-2 rounded-lg border font-medium transition-colors',
-          'focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 focus:ring-offset-panel-bg',
-          'disabled:opacity-50 disabled:cursor-not-allowed',
-          variantClasses[variant],
-          sizeClasses[size],
-          className
-        )}
-        {...props}
-      >
-        {loading ? (
-          <Loader2 className="w-4 h-4 animate-spin" />
-        ) : (
-          icon && <span className="flex-shrink-0">{icon}</span>
-        )}
-        {children}
-      </button>
-    );
-  }
-);
-
-Button.displayName = 'Button';

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

@@ -1,202 +0,0 @@
-import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
-import { forwardRef } from 'react';
-import { cn } from '../../utils/cn';
-
-const ContextMenu = ContextMenuPrimitive.Root;
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
-const ContextMenuGroup = ContextMenuPrimitive.Group;
-const ContextMenuPortal = ContextMenuPrimitive.Portal;
-const ContextMenuSub = ContextMenuPrimitive.Sub;
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-
-const ContextMenuSubTrigger = forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <ContextMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
-      'focus:bg-white/10 data-[state=open]:bg-white/10',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <span className="ml-auto text-xs">▶</span>
-  </ContextMenuPrimitive.SubTrigger>
-));
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-
-const ContextMenuSubContent = forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border border-node-border bg-panel-bg p-1 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',
-      className
-    )}
-    {...props}
-  />
-));
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-
-const ContextMenuContent = forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.Content
-      ref={ref}
-      className={cn(
-        'z-50 min-w-[12rem] overflow-hidden rounded-md border border-node-border bg-panel-bg p-1 shadow-lg',
-        'animate-in fade-in-80 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',
-        className
-      )}
-      {...props}
-    />
-  </ContextMenuPrimitive.Portal>
-));
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-
-const ContextMenuItem = forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean;
-    destructive?: boolean;
-  }
->(({ className, inset, destructive, ...props }, ref) => (
-  <ContextMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
-      'focus:bg-white/10 focus:text-white',
-      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      destructive && 'text-error focus:bg-error/10 focus:text-error',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  />
-));
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-
-const ContextMenuCheckboxItem = forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <ContextMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none',
-      'focus:bg-white/10 focus:text-white',
-      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <span className="text-primary">✓</span>
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.CheckboxItem>
-));
-ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-
-const ContextMenuRadioItem = forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <ContextMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none',
-      'focus:bg-white/10 focus:text-white',
-      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <span className="h-2 w-2 rounded-full bg-primary" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.RadioItem>
-));
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-
-const ContextMenuLabel = forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      'px-2 py-1.5 text-xs font-semibold text-gray-400',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  />
-));
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-
-const ContextMenuSeparator = forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-node-border', className)}
-    {...props}
-  />
-));
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
-
-const ContextMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn('ml-auto text-xs tracking-widest text-gray-500', className)}
-      {...props}
-    />
-  );
-};
-ContextMenuShortcut.displayName = 'ContextMenuShortcut';
-
-export {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
-};