@runtypelabs/react-flow 0.1.5 → 0.1.7

package/example/src/App.tsx

@@ -130,7 +130,8 @@ const sampleSteps: FlowStep[] = [
           config: {
             mode: 'instruction',
             model: 'gpt-4',
-            userPrompt: 'Generate detailed premium insights for {{user_data.name}} based on their usage patterns:\n\n{{analysis}}',
+            userPrompt:
+              'Generate detailed premium insights for {{user_data.name}} based on their usage patterns:\n\n{{analysis}}',
             responseFormat: 'json',
             outputVariable: 'premium_insights',
           },
@@ -160,7 +161,8 @@ const sampleSteps: FlowStep[] = [
           config: {
             mode: 'instruction',
             model: 'gpt-3.5-turbo',
-            userPrompt: 'Generate a friendly upgrade pitch for {{user_data.name}} highlighting premium benefits. Keep it short and compelling.',
+            userPrompt:
+              'Generate a friendly upgrade pitch for {{user_data.name}} highlighting premium benefits. Keep it short and compelling.',
             responseFormat: 'text',
             outputVariable: 'upgrade_pitch',
           },
@@ -322,7 +324,10 @@ function DispatchPanel({ isOpen, onClose, steps, flowName }: DispatchPanelProps)
 const client = createClient({ apiKey: 'your-api-key' })
 
 // Execute the flow
-const response = await client.dispatch.execute(${JSON.stringify(dispatchConfig, null, 2).split('\n').map((line, i) => i === 0 ? line : '  ' + line).join('\n')})
+const response = await client.dispatch.execute(${JSON.stringify(dispatchConfig, null, 2)
+                    .split('\n')
+                    .map((line, i) => (i === 0 ? line : '  ' + line))
+                    .join('\n')})
 
 console.log(response)`}</pre>
                 </div>
@@ -330,9 +335,7 @@ console.log(response)`}</pre>
             </>
           ) : (
             <>
-              <p style={descriptionStyle}>
-                Individual step configurations in the flow:
-              </p>
+              <p style={descriptionStyle}>Individual step configurations in the flow:</p>
               {steps.map((step, index) => (
                 <div key={step.id} style={stepCardStyle}>
                   <div style={stepHeaderStyle}>
@@ -353,9 +356,12 @@ console.log(response)`}</pre>
 
         {/* Footer */}
         <div style={panelFooterStyle}>
-          <button style={copyButtonStyle} onClick={() => {
-            navigator.clipboard.writeText(JSON.stringify(dispatchConfig, null, 2))
-          }}>
+          <button
+            style={copyButtonStyle}
+            onClick={() => {
+              navigator.clipboard.writeText(JSON.stringify(dispatchConfig, null, 2))
+            }}
+          >
             <CopyIcon /> Copy Config
           </button>
         </div>
@@ -376,7 +382,13 @@ interface ExecutionPanelProps {
   onRunFlow: () => void
 }
 
-function ExecutionPanel({ isOpen, onClose, isRunning, flowProgress, onRunFlow }: ExecutionPanelProps) {
+function ExecutionPanel({
+  isOpen,
+  onClose,
+  isRunning,
+  flowProgress,
+  onRunFlow,
+}: ExecutionPanelProps) {
   if (!isOpen) return null
 
   const getStatusIcon = (status: string) => {
@@ -421,17 +433,15 @@ function ExecutionPanel({ isOpen, onClose, isRunning, flowProgress, onRunFlow }:
           {!flowProgress && !isRunning && (
             <div style={{ textAlign: 'center', padding: '40px 20px' }}>
               <div style={{ fontSize: '48px', marginBottom: '16px' }}>🚀</div>
-              <h3 style={{ fontSize: '18px', fontWeight: 600, color: '#cdd6f4', marginBottom: '8px' }}>
+              <h3
+                style={{ fontSize: '18px', fontWeight: 600, color: '#cdd6f4', marginBottom: '8px' }}
+              >
                 Ready to Execute
               </h3>
               <p style={{ fontSize: '13px', color: '#a6adc8', marginBottom: '24px' }}>
                 Click the button below to run this flow using the Runtype API
               </p>
-              <button
-                style={runButtonStyle}
-                onClick={onRunFlow}
-                disabled={isRunning}
-              >
+              <button style={runButtonStyle} onClick={onRunFlow} disabled={isRunning}>
                 <PlayIcon /> Run Flow
               </button>
             </div>
@@ -442,7 +452,13 @@ function ExecutionPanel({ isOpen, onClose, isRunning, flowProgress, onRunFlow }:
               {/* Progress Header */}
               <div style={progressHeaderStyle}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                  {isRunning ? <SpinnerIcon /> : flowProgress?.isError ? <ErrorIcon /> : <CheckIcon />}
+                  {isRunning ? (
+                    <SpinnerIcon />
+                  ) : flowProgress?.isError ? (
+                    <ErrorIcon />
+                  ) : (
+                    <CheckIcon />
+                  )}
                   <div>
                     <div style={{ fontSize: '14px', fontWeight: 600, color: '#cdd6f4' }}>
                       {flowProgress?.flowName || 'Executing Flow...'}
@@ -451,8 +467,8 @@ function ExecutionPanel({ isOpen, onClose, isRunning, flowProgress, onRunFlow }:
                       {isRunning
                         ? `Step ${(flowProgress?.currentStepIndex ?? 0) + 1} of ${flowProgress?.totalSteps || '?'}`
                         : flowProgress?.isError
-                        ? 'Execution failed'
-                        : `Completed in ${flowProgress?.executionTime || 0}ms`}
+                          ? 'Execution failed'
+                          : `Completed in ${flowProgress?.executionTime || 0}ms`}
                     </div>
                   </div>
                 </div>
@@ -485,7 +501,7 @@ function ExecutionPanel({ isOpen, onClose, isRunning, flowProgress, onRunFlow }:
                         </span>
                       )}
                     </div>
-                    
+
                     {/* Streaming Text Output */}
                     {step.streamingText && (
                       <div style={streamingOutputStyle}>
@@ -494,14 +510,10 @@ function ExecutionPanel({ isOpen, onClose, isRunning, flowProgress, onRunFlow }:
                         </pre>
                       </div>
                     )}
-                    
+
                     {/* Error */}
-                    {step.error && (
-                      <div style={errorOutputStyle}>
-                        {step.error}
-                      </div>
-                    )}
-                    
+                    {step.error && <div style={errorOutputStyle}>{step.error}</div>}
+
                     {/* Result (collapsed by default) */}
                     {step.result && !step.streamingText && (
                       <details style={{ marginTop: '8px' }}>
@@ -510,8 +522,8 @@ function ExecutionPanel({ isOpen, onClose, isRunning, flowProgress, onRunFlow }:
                         </summary>
                         <div style={codeBlockStyle}>
                           <pre style={{ ...preStyle, fontSize: '10px' }}>
-                            {typeof step.result === 'string' 
-                              ? step.result 
+                            {typeof step.result === 'string'
+                              ? step.result
                               : JSON.stringify(step.result, null, 2)}
                           </pre>
                         </div>
@@ -557,7 +569,7 @@ function FlowBrowserPanel({ isOpen, onClose, onLoadFlow }: FlowBrowserPanelProps
     try {
       const response = await fetch(`${API_BASE_URL}/flows`, {
         headers: {
-          'Authorization': `Bearer ${API_KEY}`,
+          Authorization: `Bearer ${API_KEY}`,
         },
       })
       if (!response.ok) {
@@ -580,7 +592,7 @@ function FlowBrowserPanel({ isOpen, onClose, onLoadFlow }: FlowBrowserPanelProps
       // Fetch flow details with embedded steps
       const flowResponse = await fetch(`${API_BASE_URL}/flows/${flowId}`, {
         headers: {
-          'Authorization': `Bearer ${API_KEY}`,
+          Authorization: `Bearer ${API_KEY}`,
         },
       })
       if (!flowResponse.ok) {
@@ -634,26 +646,30 @@ function FlowBrowserPanel({ isOpen, onClose, onLoadFlow }: FlowBrowserPanelProps
           )}
 
           {error && (
-            <div style={{ 
-              padding: '16px', 
-              backgroundColor: 'rgba(239, 68, 68, 0.1)', 
-              borderRadius: '8px',
-              marginBottom: '16px',
-              border: '1px solid rgba(239, 68, 68, 0.3)'
-            }}>
-              <div style={{ color: '#ef4444', fontSize: '13px', fontWeight: 600, marginBottom: '4px' }}>
+            <div
+              style={{
+                padding: '16px',
+                backgroundColor: 'rgba(239, 68, 68, 0.1)',
+                borderRadius: '8px',
+                marginBottom: '16px',
+                border: '1px solid rgba(239, 68, 68, 0.3)',
+              }}
+            >
+              <div
+                style={{ color: '#ef4444', fontSize: '13px', fontWeight: 600, marginBottom: '4px' }}
+              >
                 Error
               </div>
-              <div style={{ color: '#fca5a5', fontSize: '12px' }}>
-                {error}
-              </div>
+              <div style={{ color: '#fca5a5', fontSize: '12px' }}>{error}</div>
             </div>
           )}
 
           {!isLoading && flows.length === 0 && !error && (
             <div style={{ textAlign: 'center', padding: '40px 20px' }}>
               <div style={{ fontSize: '48px', marginBottom: '16px' }}>📁</div>
-              <h3 style={{ fontSize: '16px', fontWeight: 600, color: '#cdd6f4', marginBottom: '8px' }}>
+              <h3
+                style={{ fontSize: '16px', fontWeight: 600, color: '#cdd6f4', marginBottom: '8px' }}
+              >
                 No Flows Found
               </h3>
               <p style={{ fontSize: '13px', color: '#a6adc8' }}>
@@ -685,28 +701,44 @@ function FlowBrowserPanel({ isOpen, onClose, onLoadFlow }: FlowBrowserPanelProps
                     e.currentTarget.style.backgroundColor = '#181825'
                   }}
                 >
-                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                    }}
+                  >
                     <div style={{ flex: 1 }}>
-                      <div style={{ fontSize: '14px', fontWeight: 600, color: '#cdd6f4', marginBottom: '4px' }}>
+                      <div
+                        style={{
+                          fontSize: '14px',
+                          fontWeight: 600,
+                          color: '#cdd6f4',
+                          marginBottom: '4px',
+                        }}
+                      >
                         {flow.name}
                       </div>
                       <div style={{ fontSize: '11px', color: '#6c7086' }}>
                         {flow.status} • Updated: {new Date(flow.updated_at).toLocaleDateString()}
-                        {flow.last_run_at && ` • Last run: ${new Date(flow.last_run_at).toLocaleDateString()}`}
+                        {flow.last_run_at &&
+                          ` • Last run: ${new Date(flow.last_run_at).toLocaleDateString()}`}
                       </div>
                     </div>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                       {loadingFlowId === flow.id ? (
                         <SpinnerIcon />
                       ) : (
-                        <div style={{ 
-                          padding: '6px 12px', 
-                          backgroundColor: '#89b4fa', 
-                          color: '#1e1e2e',
-                          borderRadius: '6px',
-                          fontSize: '12px',
-                          fontWeight: 600,
-                        }}>
+                        <div
+                          style={{
+                            padding: '6px 12px',
+                            backgroundColor: '#89b4fa',
+                            color: '#1e1e2e',
+                            borderRadius: '6px',
+                            fontSize: '12px',
+                            fontWeight: 600,
+                          }}
+                        >
                           Load
                         </div>
                       )}
@@ -753,53 +785,59 @@ export default function App() {
   const [isInitialized, setIsInitialized] = useState(false)
 
   // Handler that updates both steps AND nodes
-  const handleStepChangeWithNodes = useCallback((stepId: string, updates: Partial<FlowStep>) => {
-    // console.log('[App] handleStepChangeWithNodes:', stepId, updates)
-    // Update steps state
-    setSteps((prev) =>
-      prev.map((step) => {
-        if (step.id === stepId) {
-          return {
-            ...step,
-            ...updates,
-            config: updates.config ? { ...step.config, ...updates.config } : step.config,
-          }
-        }
-        return step
-      })
-    )
-
-    // Update nodes state to reflect the change
-    setNodes((nds) =>
-      nds.map((node) => {
-        if (node.id === stepId) {
-          const updatedStep = {
-            ...node.data.step,
-            ...updates,
-            config: updates.config 
-              ? { ...node.data.step.config, ...updates.config } 
-              : node.data.step.config,
+  const handleStepChangeWithNodes = useCallback(
+    (stepId: string, updates: Partial<FlowStep>) => {
+      // console.log('[App] handleStepChangeWithNodes:', stepId, updates)
+      // Update steps state
+      setSteps((prev) =>
+        prev.map((step) => {
+          if (step.id === stepId) {
+            return {
+              ...step,
+              ...updates,
+              config: updates.config ? { ...step.config, ...updates.config } : step.config,
+            }
           }
-          return {
-            ...node,
-            data: {
-              ...node.data,
-              step: updatedStep,
-              label: updatedStep.name,
-            },
+          return step
+        })
+      )
+
+      // Update nodes state to reflect the change
+      setNodes((nds) =>
+        nds.map((node) => {
+          if (node.id === stepId) {
+            const updatedStep = {
+              ...node.data.step,
+              ...updates,
+              config: updates.config
+                ? { ...node.data.step.config, ...updates.config }
+                : node.data.step.config,
+            }
+            return {
+              ...node,
+              data: {
+                ...node.data,
+                step: updatedStep,
+                label: updatedStep.name,
+              },
+            }
           }
-        }
-        return node
-      })
-    )
-  }, [setNodes])
+          return node
+        })
+      )
+    },
+    [setNodes]
+  )
 
   // Handler that updates both steps AND nodes for deletion
-  const handleStepDeleteWithNodes = useCallback((stepId: string) => {
-    setSteps((prev) => prev.filter((step) => step.id !== stepId))
-    setNodes((nds) => nds.filter((node) => node.id !== stepId))
-    setEdges((eds) => eds.filter((edge) => edge.source !== stepId && edge.target !== stepId))
-  }, [setNodes, setEdges])
+  const handleStepDeleteWithNodes = useCallback(
+    (stepId: string) => {
+      setSteps((prev) => prev.filter((step) => step.id !== stepId))
+      setNodes((nds) => nds.filter((node) => node.id !== stepId))
+      setEdges((eds) => eds.filter((edge) => edge.source !== stepId && edge.target !== stepId))
+    },
+    [setNodes, setEdges]
+  )
 
   // Initialize nodes on first render
   React.useEffect(() => {
@@ -814,7 +852,14 @@ export default function App() {
       setEdges(initialEdges)
       setIsInitialized(true)
     }
-  }, [isInitialized, steps, handleStepChangeWithNodes, handleStepDeleteWithNodes, setNodes, setEdges])
+  }, [
+    isInitialized,
+    steps,
+    handleStepChangeWithNodes,
+    handleStepDeleteWithNodes,
+    setNodes,
+    setEdges,
+  ])
 
   // Derive current steps from nodes
   const currentSteps = useMemo(() => {
@@ -827,7 +872,7 @@ export default function App() {
     setSteps(flow.steps)
     setFlowName(flow.name)
     setLoadedFlowId(flow.id)
-    
+
     // Reset initialization so nodes get rebuilt
     setIsInitialized(false)
   }, [])
@@ -838,38 +883,41 @@ export default function App() {
   )
 
   // Add a new step
-  const addStep = useCallback((type: FlowStep['type']) => {
-    const newStep = createDefaultStep(type, nodes.length)
-    setSteps((prev) => [...prev, newStep])
-
-    const newNode: RuntypeNode = {
-      id: newStep.id,
-      type: newStep.type,
-      position: { x: 400, y: nodes.length * 230 + 50 },
-      data: {
-        step: newStep,
-        label: newStep.name,
-        onChange: handleStepChangeWithNodes,
-        onDelete: handleStepDeleteWithNodes,
-      },
-    }
-
-    setNodes((nds) => [...nds, newNode])
-
-    // Add edge from last node
-    if (nodes.length > 0) {
-      const lastNode = nodes[nodes.length - 1]
-      setEdges((eds) => [
-        ...eds,
-        {
-          id: `edge-${lastNode.id}-${newNode.id}`,
-          source: lastNode.id,
-          target: newNode.id,
-          type: 'smoothstep',
+  const addStep = useCallback(
+    (type: FlowStep['type']) => {
+      const newStep = createDefaultStep(type, nodes.length)
+      setSteps((prev) => [...prev, newStep])
+
+      const newNode: RuntypeNode = {
+        id: newStep.id,
+        type: newStep.type,
+        position: { x: 400, y: nodes.length * 230 + 50 },
+        data: {
+          step: newStep,
+          label: newStep.name,
+          onChange: handleStepChangeWithNodes,
+          onDelete: handleStepDeleteWithNodes,
         },
-      ])
-    }
-  }, [nodes, setNodes, setEdges, handleStepChangeWithNodes, handleStepDeleteWithNodes])
+      }
+
+      setNodes((nds) => [...nds, newNode])
+
+      // Add edge from last node
+      if (nodes.length > 0) {
+        const lastNode = nodes[nodes.length - 1]
+        setEdges((eds) => [
+          ...eds,
+          {
+            id: `edge-${lastNode.id}-${newNode.id}`,
+            source: lastNode.id,
+            target: newNode.id,
+            type: 'smoothstep',
+          },
+        ])
+      }
+    },
+    [nodes, setNodes, setEdges, handleStepChangeWithNodes, handleStepDeleteWithNodes]
+  )
 
   // Execute flow via Runtype API
   const executeFlow = useCallback(async () => {
@@ -918,7 +966,7 @@ export default function App() {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          'Authorization': `Bearer ${API_KEY}`,
+          Authorization: `Bearer ${API_KEY}`,
         },
         body: JSON.stringify(dispatchRequest),
       })
@@ -1004,8 +1052,8 @@ export default function App() {
         setFlowProgress((prev) => {
           if (!prev) return null
           const stepIndex = data.index !== undefined ? data.index : prev.steps.length
-          const existingIndex = prev.steps.findIndex(s => s.id === data.id)
-          
+          const existingIndex = prev.steps.findIndex((s) => s.id === data.id)
+
           if (existingIndex >= 0) {
             const newSteps = [...prev.steps]
             newSteps[existingIndex] = {
@@ -1019,7 +1067,7 @@ export default function App() {
               currentStepIndex: Math.max(prev.currentStepIndex, stepIndex),
             }
           }
-          
+
           return {
             ...prev,
             steps: [
@@ -1039,8 +1087,8 @@ export default function App() {
       case 'step_chunk':
         setFlowProgress((prev) => {
           if (!prev) return null
-          const stepIndex = prev.steps.findIndex(s => s.id === data.id)
-          
+          const stepIndex = prev.steps.findIndex((s) => s.id === data.id)
+
           if (stepIndex < 0) {
             const chunkStepIndex = data.index !== undefined ? data.index : prev.steps.length
             return {
@@ -1057,11 +1105,12 @@ export default function App() {
               ].sort((a, b) => a.index - b.index),
             }
           }
-          
+
           const newSteps = [...prev.steps]
           newSteps[stepIndex] = {
             ...newSteps[stepIndex],
-            streamingText: (newSteps[stepIndex].streamingText || '') + (data.text || data.content || ''),
+            streamingText:
+              (newSteps[stepIndex].streamingText || '') + (data.text || data.content || ''),
           }
           return { ...prev, steps: newSteps }
         })
@@ -1070,16 +1119,16 @@ export default function App() {
       case 'step_complete':
         setFlowProgress((prev) => {
           if (!prev) return null
-          const stepIndex = prev.steps.findIndex(s => s.id === data.id)
+          const stepIndex = prev.steps.findIndex((s) => s.id === data.id)
           if (stepIndex >= 0) {
             const newSteps = [...prev.steps]
             const step = newSteps[stepIndex]
-            
+
             let finalText = step.streamingText
             if (!finalText && data.output?.message) {
               finalText = data.output.message
             }
-            
+
             newSteps[stepIndex] = {
               ...step,
               status: 'completed',
@@ -1087,7 +1136,7 @@ export default function App() {
               streamingText: finalText,
               executionTime: data.executionTime,
             }
-            
+
             return {
               ...prev,
               steps: newSteps.sort((a, b) => a.index - b.index),
@@ -1100,7 +1149,7 @@ export default function App() {
       case 'step_error':
         setFlowProgress((prev) => {
           if (!prev) return null
-          const stepIndex = prev.steps.findIndex(s => s.id === data.id)
+          const stepIndex = prev.steps.findIndex((s) => s.id === data.id)
           if (stepIndex >= 0) {
             const newSteps = [...prev.steps]
             newSteps[stepIndex] = {
@@ -1151,22 +1200,13 @@ export default function App() {
               Flow: <strong style={{ color: '#cdd6f4' }}>{flowName}</strong>
             </span>
           )}
-          <button
-            style={loadFlowButtonStyle}
-            onClick={() => setShowFlowBrowser(true)}
-          >
+          <button style={loadFlowButtonStyle} onClick={() => setShowFlowBrowser(true)}>
             <FolderIcon /> Load Flow
           </button>
-          <button
-            style={runFlowButtonStyle}
-            onClick={() => setShowExecutionPanel(true)}
-          >
+          <button style={runFlowButtonStyle} onClick={() => setShowExecutionPanel(true)}>
             <PlayIcon /> Run Flow
           </button>
-          <button
-            style={viewConfigButtonStyle}
-            onClick={() => setShowDispatchPanel(true)}
-          >
+          <button style={viewConfigButtonStyle} onClick={() => setShowDispatchPanel(true)}>
             <CodeIcon /> View Dispatch Config
           </button>
         </div>
@@ -1268,7 +1308,14 @@ export default function App() {
 
 function CloseIcon() {
   return (
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
       <line x1="18" y1="6" x2="6" y2="18" />
       <line x1="6" y1="6" x2="18" y2="18" />
     </svg>
@@ -1277,7 +1324,14 @@ function CloseIcon() {
 
 function CopyIcon() {
   return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
       <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
       <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
     </svg>
@@ -1286,7 +1340,14 @@ function CopyIcon() {
 
 function CodeIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
       <polyline points="16 18 22 12 16 6" />
       <polyline points="8 6 2 12 8 18" />
     </svg>
@@ -1295,7 +1356,14 @@ function CodeIcon() {
 
 function PlayIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
       <polygon points="5 3 19 12 5 21 5 3" />
     </svg>
   )
@@ -1303,7 +1371,14 @@ function PlayIcon() {
 
 function FolderIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
       <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
     </svg>
   )
@@ -1311,7 +1386,14 @@ function FolderIcon() {
 
 function RefreshIcon() {
   return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
       <polyline points="23 4 23 10 17 10" />
       <polyline points="1 20 1 14 7 14" />
       <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
@@ -1338,7 +1420,14 @@ function SpinnerIcon() {
 
 function CheckIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
       <polyline points="20 6 9 17 4 12" />
     </svg>
   )
@@ -1346,7 +1435,14 @@ function CheckIcon() {
 
 function ErrorIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
       <circle cx="12" cy="12" r="10" />
       <line x1="15" y1="9" x2="9" y2="15" />
       <line x1="9" y1="9" x2="15" y2="15" />
@@ -1356,7 +1452,14 @@ function ErrorIcon() {
 
 function PendingIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
       <circle cx="12" cy="12" r="10" />
     </svg>
   )
@@ -1679,10 +1782,10 @@ const stepHeaderStyle: React.CSSProperties = {
 
 const stepBadgeStyle = (type: string): React.CSSProperties => {
   const colors: Record<string, { bg: string; text: string }> = {
-    'prompt': { bg: '#cba6f7', text: '#1e1e2e' },
+    prompt: { bg: '#cba6f7', text: '#1e1e2e' },
     'fetch-url': { bg: '#89b4fa', text: '#1e1e2e' },
     'transform-data': { bg: '#f9e2af', text: '#1e1e2e' },
-    'conditional': { bg: '#f5c2e7', text: '#1e1e2e' },
+    conditional: { bg: '#f5c2e7', text: '#1e1e2e' },
     'send-email': { bg: '#a6e3a1', text: '#1e1e2e' },
   }
   const color = colors[type] || { bg: '#6c7086', text: '#cdd6f4' }