@marktoflow/gui 2.0.0-alpha.4 → 2.0.0-alpha.5

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

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
-import { Layers, CheckCircle, XCircle, Clock } from 'lucide-react';
+import { Layers, CheckCircle, XCircle, Clock, AlertTriangle } from 'lucide-react';
 
 export interface ParallelNodeData extends Record<string, unknown> {
   id: string;
@@ -11,6 +11,8 @@ export interface ParallelNodeData extends Record<string, unknown> {
   status?: 'pending' | 'running' | 'completed' | 'failed' | 'skipped';
   activeBranches?: string[];
   completedBranches?: string[];
+  failedBranches?: string[];
+  maxConcurrentExceeded?: boolean;
 }
 
 export type ParallelNodeType = Node<ParallelNodeData, 'parallel'>;
@@ -46,7 +48,7 @@ function ParallelNodeComponent({ data, selected }: NodeProps<ParallelNodeType>)
 
   return (
     <div
-      className={`control-flow-node parallel-node p-0 ${selected ? 'selected' : ''} ${status === 'running' ? 'running' : ''}`}
+      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%)',
       }}
@@ -80,6 +82,16 @@ function ParallelNodeComponent({ data, selected }: NodeProps<ParallelNodeType>)
 
       {/* 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>
@@ -87,7 +99,9 @@ function ParallelNodeComponent({ data, selected }: NodeProps<ParallelNodeType>)
             <>
               {' '}
               <span className="text-white/60">• Max Concurrent:</span>{' '}
-              <span className="font-medium">{data.maxConcurrent}</span>
+              <span className={`font-medium ${data.maxConcurrentExceeded ? 'text-yellow-300' : ''}`}>
+                {data.maxConcurrent}
+              </span>
             </>
           )}
         </div>
@@ -97,15 +111,18 @@ function ParallelNodeComponent({ data, selected }: NodeProps<ParallelNodeType>)
           {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 ${
-                  isCompleted
-                    ? 'bg-green-500/30 text-green-200'
-                    : isActive
-                      ? 'bg-blue-500/30 text-blue-200 animate-pulse'
-                      : 'bg-white/10 text-white/60'
+                  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}
               >

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

@@ -10,6 +10,7 @@ export interface SwitchNodeData extends Record<string, unknown> {
   hasDefault?: boolean;
   status?: 'pending' | 'running' | 'completed' | 'failed' | 'skipped';
   activeCase?: string | null;
+  skippedBranches?: string[];
 }
 
 export type SwitchNodeType = Node<SwitchNodeData, 'switch'>;
@@ -47,9 +48,16 @@ function SwitchNodeComponent({ data, selected }: NodeProps<SwitchNodeType>) {
   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' : ''}`}
+      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%)',
       }}
@@ -93,27 +101,27 @@ function SwitchNodeComponent({ data, selected }: NodeProps<SwitchNodeType>) {
           <div className="text-xs text-white/70 font-medium mb-1">Cases:</div>
           {displayCases.map((caseKey, index) => {
             const isActive = data.activeCase === caseKey;
-            const handlePosition = ((index + 1) / (displayCases.length + (data.hasDefault ? 2 : 1))) * 100;
+            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 ${
+                  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'
-                      : 'bg-white/5 text-white/70'
+                      : 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>
-                {/* Output handle for this case */}
-                <Handle
-                  type="source"
-                  position={Position.Bottom}
-                  id={`case-${caseKey}`}
-                  style={{ left: `${handlePosition}%` }}
-                  className="!w-2.5 !h-2.5 !bg-purple-400 !border-2 !border-node-bg"
-                />
               </div>
             );
           })}
@@ -136,14 +144,6 @@ function SwitchNodeComponent({ data, selected }: NodeProps<SwitchNodeType>) {
               >
                 default
               </div>
-              {/* Output handle for default */}
-              <Handle
-                type="source"
-                position={Position.Bottom}
-                id="case-default"
-                style={{ left: '95%' }}
-                className="!w-2.5 !h-2.5 !bg-gray-400 !border-2 !border-node-bg"
-              />
             </div>
           )}
         </div>
@@ -157,6 +157,27 @@ function SwitchNodeComponent({ data, selected }: NodeProps<SwitchNodeType>) {
           </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>
   );
 }

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>
   );
 }

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

@@ -178,6 +178,15 @@ function TransformNodeComponent({ data, selected }: NodeProps<TransformNodeType>
         position={Position.Bottom}
         className="!w-3 !h-3 !bg-primary !border-2 !border-node-bg"
       />
+
+      {/* Loop-back handle for iteration visualization */}
+      <Handle
+        id="loop-back"
+        type="source"
+        position={Position.Left}
+        className="!w-3 !h-3 !bg-teal-500 !border-2 !border-node-bg"
+        style={{ top: '50%', left: '-6px' }}
+      />
     </div>
   );
 }

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

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
-import { RotateCw, CheckCircle, XCircle, Clock } from 'lucide-react';
+import { RotateCw, CheckCircle, XCircle, Clock, LogOut, AlertTriangle } from 'lucide-react';
 
 export interface WhileNodeData extends Record<string, unknown> {
   id: string;
@@ -9,6 +9,8 @@ export interface WhileNodeData extends Record<string, unknown> {
   maxIterations?: number;
   status?: 'pending' | 'running' | 'completed' | 'failed' | 'skipped';
   currentIteration?: number;
+  earlyExit?: boolean;
+  exitReason?: 'break' | 'max_iterations' | 'error';
 }
 
 export type WhileNodeType = Node<WhileNodeData, 'while'>;
@@ -44,7 +46,7 @@ function WhileNodeComponent({ data, selected }: NodeProps<WhileNodeType>) {
 
   return (
     <div
-      className={`control-flow-node while-node p-0 ${selected ? 'selected' : ''} ${status === 'running' ? 'running' : ''}`}
+      className={`control-flow-node while-node p-0 ${selected ? 'selected' : ''} ${status === 'running' ? 'running' : ''} ${status === 'completed' ? 'completed' : ''} ${status === 'failed' ? 'failed' : ''}`}
       style={{
         background: 'linear-gradient(135deg, #fb923c 0%, #f97316 100%)',
       }}
@@ -89,6 +91,24 @@ function WhileNodeComponent({ data, selected }: NodeProps<WhileNodeType>) {
           <span className="font-medium">{data.maxIterations || 100}</span>
         </div>
 
+        {/* Early exit indicator */}
+        {data.earlyExit && (
+          <div className="mb-3 p-2 bg-orange-500/20 border border-orange-500/30 rounded flex items-center gap-2">
+            {data.exitReason === 'max_iterations' ? (
+              <AlertTriangle className="w-4 h-4 text-orange-200" />
+            ) : (
+              <LogOut className="w-4 h-4 text-orange-200" />
+            )}
+            <span className="text-xs text-orange-200 font-medium">
+              {data.exitReason === 'break'
+                ? 'Loop exited early (break)'
+                : data.exitReason === 'max_iterations'
+                  ? 'Max iterations reached'
+                  : 'Loop stopped on error'}
+            </span>
+          </div>
+        )}
+
         {/* Current iteration counter */}
         {data.currentIteration !== undefined && (
           <div className="mt-2 p-2 bg-white/5 rounded">
@@ -96,11 +116,14 @@ function WhileNodeComponent({ data, selected }: NodeProps<WhileNodeType>) {
               <span className="text-xs text-white/70">Iterations</span>
               <span className="text-xs text-white font-medium">
                 {data.currentIteration} / {data.maxIterations || 100}
+                {data.earlyExit && (
+                  <span className="ml-1 text-orange-300 text-[10px]">(stopped)</span>
+                )}
               </span>
             </div>
             <div className="w-full bg-white/10 rounded-full h-1.5">
               <div
-                className="bg-orange-400 h-1.5 rounded-full transition-all"
+                className={`h-1.5 rounded-full transition-all ${data.earlyExit ? 'bg-orange-400' : 'bg-orange-500'}`}
                 style={{
                   width: `${(data.currentIteration / (data.maxIterations || 100)) * 100}%`,
                 }}
@@ -122,6 +145,15 @@ function WhileNodeComponent({ data, selected }: NodeProps<WhileNodeType>) {
         position={Position.Bottom}
         className="!w-3 !h-3 !bg-primary !border-2 !border-node-bg"
       />
+
+      {/* Loop-back handle (left side for iteration feedback) */}
+      <Handle
+        id="loop-back"
+        type="source"
+        position={Position.Left}
+        className="!w-3 !h-3 !bg-orange-500 !border-2 !border-node-bg"
+        style={{ top: '50%', left: '-6px' }}
+      />
     </div>
   );
 }

package/src/client/components/Debug/VariableInspector.tsx

@@ -0,0 +1,148 @@
+/**
+ * Variable Inspector Component
+ * Displays JSON data with syntax highlighting and expand/collapse functionality
+ */
+
+import { useState } from 'react';
+import { ChevronRight, ChevronDown, Copy, Check } from 'lucide-react';
+
+interface VariableInspectorProps {
+  data: unknown;
+  name?: string;
+  expanded?: boolean;
+}
+
+export function VariableInspector({ data, name, expanded = true }: VariableInspectorProps) {
+  return (
+    <div className="font-mono text-sm">
+      <JsonNode value={data} name={name} depth={0} initiallyExpanded={expanded} />
+    </div>
+  );
+}
+
+interface JsonNodeProps {
+  value: unknown;
+  name?: string;
+  depth: number;
+  initiallyExpanded?: boolean;
+}
+
+function JsonNode({ value, name, depth, initiallyExpanded = true }: JsonNodeProps) {
+  const [isExpanded, setIsExpanded] = useState(initiallyExpanded);
+  const [copied, setCopied] = useState(false);
+
+  const indent = depth * 16;
+  const isObject = value !== null && typeof value === 'object' && !Array.isArray(value);
+  const isArray = Array.isArray(value);
+  const isExpandable = isObject || isArray;
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(JSON.stringify(value, null, 2));
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const getValueColor = (val: unknown): string => {
+    if (val === null) return 'text-gray-500';
+    if (typeof val === 'string') return 'text-green-400';
+    if (typeof val === 'number') return 'text-blue-400';
+    if (typeof val === 'boolean') return 'text-purple-400';
+    return 'text-gray-300';
+  };
+
+  const renderValue = (val: unknown): string => {
+    if (val === null) return 'null';
+    if (val === undefined) return 'undefined';
+    if (typeof val === 'string') return `"${val}"`;
+    if (typeof val === 'number' || typeof val === 'boolean') return String(val);
+    return '';
+  };
+
+  if (!isExpandable) {
+    return (
+      <div className="flex items-center gap-2 py-0.5 hover:bg-white/5 rounded px-1" style={{ paddingLeft: indent }}>
+        {name && (
+          <>
+            <span className="text-cyan-400">{name}</span>
+            <span className="text-gray-500">:</span>
+          </>
+        )}
+        <span className={getValueColor(value)}>{renderValue(value)}</span>
+      </div>
+    );
+  }
+
+  const entries = isArray
+    ? (value as unknown[]).map((v, i) => [String(i), v] as [string, unknown])
+    : Object.entries(value as Record<string, unknown>);
+
+  const preview = isArray
+    ? `Array(${entries.length})`
+    : `Object {${entries.length} ${entries.length === 1 ? 'key' : 'keys'}}`;
+
+  return (
+    <div>
+      <div
+        className="flex items-center gap-2 py-0.5 hover:bg-white/5 rounded px-1 cursor-pointer group"
+        style={{ paddingLeft: indent }}
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <button className="text-gray-500 hover:text-white">
+          {isExpanded ? (
+            <ChevronDown className="w-3 h-3" />
+          ) : (
+            <ChevronRight className="w-3 h-3" />
+          )}
+        </button>
+
+        {name && (
+          <>
+            <span className="text-cyan-400">{name}</span>
+            <span className="text-gray-500">:</span>
+          </>
+        )}
+
+        <span className="text-gray-500">
+          {isArray ? '[' : '{'}
+          {!isExpanded && <span className="text-gray-600 ml-1">{preview}</span>}
+        </span>
+
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            handleCopy();
+          }}
+          className="ml-auto opacity-0 group-hover:opacity-100 transition-opacity"
+          title="Copy to clipboard"
+        >
+          {copied ? (
+            <Check className="w-3 h-3 text-green-400" />
+          ) : (
+            <Copy className="w-3 h-3 text-gray-500 hover:text-white" />
+          )}
+        </button>
+      </div>
+
+      {isExpanded && (
+        <>
+          {entries.map(([key, val]) => (
+            <JsonNode
+              key={key}
+              name={isArray ? undefined : key}
+              value={val}
+              depth={depth + 1}
+              initiallyExpanded={depth < 1}
+            />
+          ))}
+          <div className="text-gray-500 py-0.5 px-1" style={{ paddingLeft: indent }}>
+            {isArray ? ']' : '}'}
+          </div>
+        </>
+      )}
+
+      {!isExpanded && (
+        <div className="text-gray-500 inline">{isArray ? ']' : '}'}</div>
+      )}
+    </div>
+  );
+}

package/src/client/components/Prompt/PromptInput.tsx

@@ -2,12 +2,14 @@ import { useState, useRef, useEffect } from 'react';
 import { Send, Loader2, Sparkles } from 'lucide-react';
 import { usePromptStore } from '../../stores/promptStore';
 import { PromptHistoryPanel } from './PromptHistoryPanel';
+import { getModKey } from '../../utils/platform';
 
 export function PromptInput() {
   const [prompt, setPrompt] = useState('');
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const { isProcessing, history, sendPrompt } = usePromptStore();
+  const modKey = getModKey();
 
   // Auto-resize textarea
   useEffect(() => {
@@ -95,7 +97,7 @@ export function PromptInput() {
 
       {/* Keyboard hint */}
       <div className="px-4 pb-2 text-xs text-gray-500">
-        Press <kbd className="px-1.5 py-0.5 bg-node-bg rounded text-gray-400">⌘</kbd> +{' '}
+        Press <kbd className="px-1.5 py-0.5 bg-node-bg rounded text-gray-400">{modKey}</kbd> +{' '}
         <kbd className="px-1.5 py-0.5 bg-node-bg rounded text-gray-400">Enter</kbd> to send
         {history.length > 0 && (
           <span className="ml-4">