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

package/src/client/components/Canvas/ParallelNode.tsx

@@ -0,0 +1,157 @@
+import { memo } from 'react';
+import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
+import { Layers, CheckCircle, XCircle, Clock, AlertTriangle } from 'lucide-react';
+
+export interface ParallelNodeData extends Record<string, unknown> {
+  id: string;
+  name?: string;
+  branches: Array<{ id: string; name?: string }>;
+  maxConcurrent?: number;
+  onError?: 'stop' | 'continue';
+  status?: 'pending' | 'running' | 'completed' | 'failed' | 'skipped';
+  activeBranches?: string[];
+  completedBranches?: string[];
+  failedBranches?: string[];
+  maxConcurrentExceeded?: boolean;
+}
+
+export type ParallelNodeType = Node<ParallelNodeData, 'parallel'>;
+
+function ParallelNodeComponent({ data, selected }: NodeProps<ParallelNodeType>) {
+  const statusConfig: Record<
+    NonNullable<ParallelNodeData['status']>,
+    { icon: typeof Clock; color: string; bgColor: string; animate?: boolean }
+  > = {
+    pending: { icon: Clock, color: 'text-gray-400', bgColor: 'bg-gray-400/10' },
+    running: {
+      icon: Layers,
+      color: 'text-green-400',
+      bgColor: 'bg-green-400/10',
+      animate: true,
+    },
+    completed: {
+      icon: CheckCircle,
+      color: 'text-success',
+      bgColor: 'bg-success/10',
+    },
+    failed: { icon: XCircle, color: 'text-error', bgColor: 'bg-error/10' },
+    skipped: {
+      icon: XCircle,
+      color: 'text-gray-500',
+      bgColor: 'bg-gray-500/10',
+    },
+  };
+
+  const status = data.status || 'pending';
+  const config = statusConfig[status];
+  const StatusIcon = config.icon;
+
+  return (
+    <div
+      className={`control-flow-node parallel-node p-0 ${selected ? 'selected' : ''} ${status === 'running' ? 'running' : ''} ${status === 'completed' ? 'completed' : ''} ${status === 'failed' ? 'failed' : ''}`}
+      style={{
+        background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+      }}
+    >
+      {/* Input handle */}
+      <Handle
+        type="target"
+        position={Position.Top}
+        className="!w-3 !h-3 !bg-primary !border-2 !border-node-bg"
+      />
+
+      {/* Node header */}
+      <div className="flex items-center gap-3 p-3 border-b border-white/20">
+        <div className="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center">
+          <Layers className="w-5 h-5 text-white" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="text-sm font-medium text-white">
+            {data.name || 'Parallel'}
+          </div>
+          <div className="text-xs text-white/70">Concurrent Execution</div>
+        </div>
+        <div
+          className={`w-6 h-6 rounded-full ${config.bgColor} flex items-center justify-center`}
+        >
+          <StatusIcon
+            className={`w-4 h-4 ${config.color} ${config.animate ? 'animate-pulse' : ''}`}
+          />
+        </div>
+      </div>
+
+      {/* Node body */}
+      <div className="p-3 bg-white/10">
+        {/* Max concurrent warning */}
+        {data.maxConcurrentExceeded && (
+          <div className="mb-3 p-2 bg-yellow-500/20 border border-yellow-500/30 rounded flex items-center gap-2">
+            <AlertTriangle className="w-4 h-4 text-yellow-200" />
+            <span className="text-xs text-yellow-200 font-medium">
+              Rate limiting active
+            </span>
+          </div>
+        )}
+
+        <div className="text-xs text-white/90 mb-3">
+          <span className="text-white/60">Branches:</span>{' '}
+          <span className="font-medium">{data.branches?.length || 0}</span>
+          {data.maxConcurrent && (
+            <>
+              {' '}
+              <span className="text-white/60">• Max Concurrent:</span>{' '}
+              <span className={`font-medium ${data.maxConcurrentExceeded ? 'text-yellow-300' : ''}`}>
+                {data.maxConcurrent}
+              </span>
+            </>
+          )}
+        </div>
+
+        {/* Branch indicators */}
+        <div className="flex flex-wrap gap-2 mb-3">
+          {data.branches?.slice(0, 6).map((branch) => {
+            const isActive = data.activeBranches?.includes(branch.id);
+            const isCompleted = data.completedBranches?.includes(branch.id);
+            const isFailed = data.failedBranches?.includes(branch.id);
+            return (
+              <div
+                key={branch.id}
+                className={`px-2 py-1 rounded text-xs font-medium transition-colors ${
+                  isFailed
+                    ? 'bg-red-500/30 text-red-200'
+                    : isCompleted
+                      ? 'bg-green-500/30 text-green-200'
+                      : isActive
+                        ? 'bg-blue-500/30 text-blue-200 animate-pulse'
+                        : 'bg-white/10 text-white/60'
+                }`}
+                title={branch.name || branch.id}
+              >
+                {branch.name || `B${branch.id.slice(-2)}`}
+              </div>
+            );
+          })}
+          {data.branches && data.branches.length > 6 && (
+            <div className="px-2 py-1 rounded text-xs font-medium bg-white/10 text-white/60">
+              +{data.branches.length - 6}
+            </div>
+          )}
+        </div>
+
+        {/* Error handling */}
+        <div className="text-xs text-white/50 flex items-center gap-1">
+          <span>On Error:</span>
+          <span className="font-medium">{data.onError || 'stop'}</span>
+        </div>
+      </div>
+
+      {/* Output handle */}
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        className="!w-3 !h-3 !bg-primary !border-2 !border-node-bg"
+      />
+    </div>
+  );
+}
+
+export const ParallelNode = memo(ParallelNodeComponent);

package/src/client/components/Canvas/SwitchNode.tsx

@@ -0,0 +1,185 @@
+import { memo } from 'react';
+import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
+import { GitFork, CheckCircle, XCircle, Clock } from 'lucide-react';
+
+export interface SwitchNodeData extends Record<string, unknown> {
+  id: string;
+  name?: string;
+  expression: string;
+  cases: Record<string, unknown>;
+  hasDefault?: boolean;
+  status?: 'pending' | 'running' | 'completed' | 'failed' | 'skipped';
+  activeCase?: string | null;
+  skippedBranches?: string[];
+}
+
+export type SwitchNodeType = Node<SwitchNodeData, 'switch'>;
+
+function SwitchNodeComponent({ data, selected }: NodeProps<SwitchNodeType>) {
+  const statusConfig: Record<
+    NonNullable<SwitchNodeData['status']>,
+    { icon: typeof Clock; color: string; bgColor: string; animate?: boolean }
+  > = {
+    pending: { icon: Clock, color: 'text-gray-400', bgColor: 'bg-gray-400/10' },
+    running: {
+      icon: GitFork,
+      color: 'text-purple-400',
+      bgColor: 'bg-purple-400/10',
+      animate: true,
+    },
+    completed: {
+      icon: CheckCircle,
+      color: 'text-success',
+      bgColor: 'bg-success/10',
+    },
+    failed: { icon: XCircle, color: 'text-error', bgColor: 'bg-error/10' },
+    skipped: {
+      icon: XCircle,
+      color: 'text-gray-500',
+      bgColor: 'bg-gray-500/10',
+    },
+  };
+
+  const status = data.status || 'pending';
+  const config = statusConfig[status];
+  const StatusIcon = config.icon;
+
+  const caseKeys = Object.keys(data.cases || {});
+  const displayCases = caseKeys.slice(0, 4); // Show up to 4 cases
+  const hasMore = caseKeys.length > 4;
+
+  // Calculate handle positions to avoid overlap
+  const totalHandles = Math.min(caseKeys.length, 4) + (data.hasDefault ? 1 : 0);
+  const getHandlePosition = (index: number) => {
+    if (totalHandles === 1) return 50;
+    return ((index + 1) / (totalHandles + 1)) * 100;
+  };
+
+  return (
+    <div
+      className={`control-flow-node switch-node p-0 ${selected ? 'selected' : ''} ${status === 'running' ? 'running' : ''} ${status === 'completed' ? 'completed' : ''} ${status === 'failed' ? 'failed' : ''}`}
+      style={{
+        background: 'linear-gradient(135deg, #a855f7 0%, #ec4899 100%)',
+      }}
+    >
+      {/* Input handle */}
+      <Handle
+        type="target"
+        position={Position.Top}
+        className="!w-3 !h-3 !bg-primary !border-2 !border-node-bg"
+      />
+
+      {/* Node header */}
+      <div className="flex items-center gap-3 p-3 border-b border-white/20">
+        <div className="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center">
+          <GitFork className="w-5 h-5 text-white" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="text-sm font-medium text-white">
+            {data.name || 'Switch'}
+          </div>
+          <div className="text-xs text-white/70">Multi-Branch Router</div>
+        </div>
+        <div
+          className={`w-6 h-6 rounded-full ${config.bgColor} flex items-center justify-center`}
+        >
+          <StatusIcon
+            className={`w-4 h-4 ${config.color} ${config.animate ? 'animate-pulse' : ''}`}
+          />
+        </div>
+      </div>
+
+      {/* Node body */}
+      <div className="p-3 bg-white/10">
+        <div className="text-xs text-white/90 mb-3">
+          <span className="text-white/60">Expression:</span>{' '}
+          <span className="font-mono">{data.expression || 'Not set'}</span>
+        </div>
+
+        {/* Case list */}
+        <div className="space-y-2">
+          <div className="text-xs text-white/70 font-medium mb-1">Cases:</div>
+          {displayCases.map((caseKey, index) => {
+            const isActive = data.activeCase === caseKey;
+            const isSkipped = data.skippedBranches?.includes(caseKey);
+            const handlePosition = getHandlePosition(index);
+
+            return (
+              <div key={caseKey} className="relative">
+                <div
+                  className={`text-xs px-2 py-1.5 rounded font-medium transition-colors relative ${
+                    isActive
+                      ? 'bg-purple-500/30 text-purple-200 ring-1 ring-purple-400/50'
+                      : isSkipped
+                        ? 'bg-gray-500/20 text-gray-400 line-through'
+                        : 'bg-white/5 text-white/70'
+                  }`}
+                >
+                  {caseKey}
+                  {isSkipped && (
+                    <span className="ml-2 text-[8px] px-1 py-0.5 rounded bg-gray-500/30">
+                      SKIPPED
+                    </span>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+
+          {hasMore && (
+            <div className="text-xs px-2 py-1 rounded bg-white/5 text-white/60 text-center">
+              +{caseKeys.length - 4} more cases
+            </div>
+          )}
+
+          {/* Default case */}
+          {data.hasDefault && (
+            <div className="relative">
+              <div
+                className={`text-xs px-2 py-1.5 rounded font-medium transition-colors ${
+                  data.activeCase === 'default'
+                    ? 'bg-gray-500/30 text-gray-200 ring-1 ring-gray-400/50'
+                    : 'bg-white/5 text-white/70'
+                }`}
+              >
+                default
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Case count */}
+        <div className="mt-3 text-xs text-white/50 flex items-center gap-2">
+          <span>ℹ️</span>
+          <span>
+            {caseKeys.length} case{caseKeys.length !== 1 ? 's' : ''}
+            {data.hasDefault ? ' + default' : ''}
+          </span>
+        </div>
+      </div>
+
+      {/* Output handles - positioned independently to avoid overlap */}
+      {displayCases.map((caseKey, index) => (
+        <Handle
+          key={`handle-${caseKey}`}
+          type="source"
+          position={Position.Bottom}
+          id={`case-${caseKey}`}
+          style={{ left: `${getHandlePosition(index)}%` }}
+          className="!w-2.5 !h-2.5 !bg-purple-400 !border-2 !border-node-bg"
+        />
+      ))}
+      {data.hasDefault && (
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          id="case-default"
+          style={{ left: `${getHandlePosition(displayCases.length)}%` }}
+          className="!w-2.5 !h-2.5 !bg-gray-400 !border-2 !border-node-bg"
+        />
+      )}
+    </div>
+  );
+}
+
+export const SwitchNode = memo(SwitchNodeComponent);

package/src/client/components/Canvas/Toolbar.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import {
   Plus,
   Play,
@@ -11,10 +12,15 @@ import {
   Redo,
   Copy,
   Trash2,
+  Bot,
+  ChevronDown,
 } from 'lucide-react';
 import { useCanvas } from '../../hooks/useCanvas';
 import { useEditorStore } from '../../stores/editorStore';
 import { useReactFlow } from '@xyflow/react';
+import { getModKey } from '../../utils/platform';
+import { useAgentStore } from '../../stores/agentStore';
+import { ProviderSwitcher } from '../Settings/ProviderSwitcher';
 
 interface ToolbarProps {
   onAddStep: () => void;
@@ -33,11 +39,21 @@ export function Toolbar({
     useCanvas();
   const { undo, redo, undoStack, redoStack } = useEditorStore();
   const { zoomIn, zoomOut } = useReactFlow();
+  const modKey = getModKey();
+  const { providers, activeProviderId, loadProviders } = useAgentStore();
+  const [showProviderSwitcher, setShowProviderSwitcher] = useState(false);
 
   const canUndo = undoStack.length > 0;
   const canRedo = redoStack.length > 0;
   const hasSelection = selectedNodes.length > 0;
 
+  // Load providers on mount
+  useEffect(() => {
+    loadProviders();
+  }, [loadProviders]);
+
+  const activeProvider = providers.find((p) => p.id === activeProviderId);
+
   return (
     <div className="absolute top-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-1 px-2 py-1.5 bg-panel-bg/95 backdrop-blur border border-node-border rounded-lg shadow-lg">
       {/* Add Step */}
@@ -56,14 +72,14 @@ export function Toolbar({
         label="Undo"
         onClick={() => undo()}
         disabled={!canUndo}
-        shortcut="⌘Z"
+        shortcut={`${modKey}Z`}
       />
       <ToolbarButton
         icon={<Redo className="w-4 h-4" />}
         label="Redo"
         onClick={() => redo()}
         disabled={!canRedo}
-        shortcut="⌘⇧Z"
+        shortcut={`${modKey}⇧Z`}
       />
 
       <ToolbarDivider />
@@ -74,7 +90,7 @@ export function Toolbar({
         label="Duplicate"
         onClick={duplicateSelected}
         disabled={!hasSelection}
-        shortcut="⌘D"
+        shortcut={`${modKey}D`}
       />
       <ToolbarButton
         icon={<Trash2 className="w-4 h-4" />}
@@ -91,44 +107,60 @@ export function Toolbar({
         icon={<Layout className="w-4 h-4" />}
         label="Auto Layout"
         onClick={autoLayout}
-        shortcut="⌘L"
+        shortcut={`${modKey}L`}
       />
       <ToolbarButton
         icon={<ZoomIn className="w-4 h-4" />}
         label="Zoom In"
         onClick={() => zoomIn()}
-        shortcut="⌘+"
+        shortcut={`${modKey}+`}
       />
       <ToolbarButton
         icon={<ZoomOut className="w-4 h-4" />}
         label="Zoom Out"
         onClick={() => zoomOut()}
-        shortcut="⌘-"
+        shortcut={`${modKey}-`}
       />
       <ToolbarButton
         icon={<Maximize className="w-4 h-4" />}
         label="Fit View"
         onClick={fitView}
-        shortcut="⌘0"
+        shortcut={`${modKey}0`}
       />
 
       <ToolbarDivider />
 
+      {/* AI Provider */}
+      <button
+        onClick={() => setShowProviderSwitcher(true)}
+        className="flex items-center gap-1.5 px-2 py-1.5 rounded text-sm text-gray-300 hover:text-white hover:bg-white/10 transition-colors"
+        title="Select AI Provider"
+      >
+        <Bot className="w-4 h-4" />
+        <span className="hidden sm:inline text-xs">
+          {activeProvider?.name || 'No Provider'}
+        </span>
+        <ChevronDown className="w-3 h-3" />
+      </button>
+
       {/* Execute */}
       {onExecute && (
-        <ToolbarButton
-          icon={
-            isExecuting ? (
-              <Pause className="w-4 h-4" />
-            ) : (
-              <Play className="w-4 h-4" />
-            )
-          }
-          label={isExecuting ? 'Stop' : 'Execute'}
-          onClick={onExecute}
-          variant={isExecuting ? 'destructive' : 'primary'}
-          shortcut="⌘⏎"
-        />
+        <>
+          <ToolbarDivider />
+          <ToolbarButton
+            icon={
+              isExecuting ? (
+                <Pause className="w-4 h-4" />
+              ) : (
+                <Play className="w-4 h-4" />
+              )
+            }
+            label={isExecuting ? 'Stop' : 'Execute'}
+            onClick={onExecute}
+            variant={isExecuting ? 'destructive' : 'primary'}
+            shortcut={`${modKey}⏎`}
+          />
+        </>
       )}
 
       {/* Save */}
@@ -137,9 +169,15 @@ export function Toolbar({
           icon={<Save className="w-4 h-4" />}
           label="Save"
           onClick={onSave}
-          shortcut="⌘S"
+          shortcut={`${modKey}S`}
         />
       )}
+
+      {/* Provider Switcher Modal */}
+      <ProviderSwitcher
+        open={showProviderSwitcher}
+        onOpenChange={setShowProviderSwitcher}
+      />
     </div>
   );
 }