@runtypelabs/react-flow 0.1.0

package/example/src/App.tsx

@@ -0,0 +1,1744 @@
+import React, { useState, useCallback, useMemo, useRef } from 'react'
+import {
+  ReactFlow,
+  Controls,
+  Background,
+  MiniMap,
+  Panel,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  BackgroundVariant,
+  ConnectionLineType,
+  type OnConnect,
+} from '@xyflow/react'
+
+// Import node components from the package
+import {
+  PromptNode,
+  FetchUrlNode,
+  CodeNode,
+  ConditionalNode,
+  SendEmailNode,
+  flowStepsToNodes,
+  createEdgesFromNodes,
+  createDefaultStep,
+  nodesToFlowSteps,
+  type FlowStep,
+  type RuntypeNode,
+} from '@runtypelabs/react-flow'
+
+// ============================================================================
+// API Configuration
+// ============================================================================
+
+const API_BASE_URL = import.meta.env.VITE_RUNTYPE_API_URL || 'http://localhost:8787/v1'
+const API_KEY = import.meta.env.VITE_RUNTYPE_API_KEY || ''
+
+// ============================================================================
+// Flow Browser Types
+// ============================================================================
+
+interface Flow {
+  id: string
+  name: string
+  status: string
+  created_at: string
+  updated_at: string
+  last_run_at: string | null
+}
+
+interface FlowWithSteps extends Flow {
+  steps: FlowStep[]
+}
+
+// ============================================================================
+// Flow Execution Types
+// ============================================================================
+
+interface StepProgress {
+  id: string
+  name: string
+  index: number
+  status: 'pending' | 'running' | 'completed' | 'failed'
+  streamingText?: string
+  result?: any
+  error?: string
+  executionTime?: number
+}
+
+interface FlowProgress {
+  flowId: string
+  flowName: string
+  totalSteps: number
+  currentStepIndex: number
+  steps: StepProgress[]
+  isComplete: boolean
+  isError: boolean
+  executionTime?: number
+}
+
+// ============================================================================
+// Sample Flow Steps
+// ============================================================================
+
+const sampleSteps: FlowStep[] = [
+  {
+    id: 'step-1',
+    type: 'fetch-url',
+    name: 'Fetch User Data',
+    order: 0,
+    enabled: true,
+    config: {
+      http: {
+        url: 'https://api.example.com/users/{{userId}}',
+        method: 'GET',
+      },
+      responseType: 'json',
+      outputVariable: 'user_data',
+    },
+  },
+  {
+    id: 'step-2',
+    type: 'prompt',
+    name: 'Analyze User',
+    order: 1,
+    enabled: true,
+    config: {
+      mode: 'instruction',
+      model: 'gpt-4',
+      userPrompt: 'Analyze the following user data and provide insights:\n\n{{user_data}}',
+      responseFormat: 'json',
+      outputVariable: 'analysis',
+    },
+  },
+  {
+    id: 'step-3',
+    type: 'conditional',
+    name: 'Check Premium Status',
+    order: 2,
+    enabled: true,
+    config: {
+      condition: "user_data.subscription === 'premium'",
+      trueSteps: [
+        {
+          id: 'premium-insights',
+          type: 'prompt',
+          name: 'Generate Premium Insights',
+          order: 0,
+          enabled: true,
+          config: {
+            mode: 'instruction',
+            model: 'gpt-4',
+            userPrompt: 'Generate detailed premium insights for {{user_data.name}} based on their usage patterns:\n\n{{analysis}}',
+            responseFormat: 'json',
+            outputVariable: 'premium_insights',
+          },
+        },
+        {
+          id: 'premium-email',
+          type: 'send-email',
+          name: 'Send Premium Report',
+          order: 1,
+          enabled: true,
+          config: {
+            from: 'premium@messages.runtype.com',
+            to: '{{user_data.email}}',
+            subject: '🌟 Your Premium Analytics Report',
+            html: '<h1>Premium Report for {{user_data.name}}</h1><p>{{premium_insights.summary}}</p><h2>Advanced Metrics</h2><p>{{premium_insights.metrics}}</p>',
+            outputVariable: 'premium_email_result',
+          },
+        },
+      ],
+      falseSteps: [
+        {
+          id: 'upgrade-pitch',
+          type: 'prompt',
+          name: 'Generate Upgrade Pitch',
+          order: 0,
+          enabled: true,
+          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.',
+            responseFormat: 'text',
+            outputVariable: 'upgrade_pitch',
+          },
+        },
+        {
+          id: 'log-activity',
+          type: 'fetch-url',
+          name: 'Log Free User Activity',
+          order: 1,
+          enabled: true,
+          config: {
+            http: {
+              url: 'https://api.example.com/analytics/free-users',
+              method: 'POST',
+              body: JSON.stringify({
+                userId: '{{user_data.id}}',
+                action: 'viewed_report',
+                timestamp: '{{now}}',
+              }),
+            },
+            responseType: 'json',
+            outputVariable: 'analytics_result',
+          },
+        },
+        {
+          id: 'basic-email',
+          type: 'send-email',
+          name: 'Send Basic Report + Upsell',
+          order: 2,
+          enabled: true,
+          config: {
+            from: 'no-reply@messages.runtype.com',
+            to: '{{user_data.email}}',
+            subject: 'Your Report is Ready',
+            html: '<h1>Hi {{user_data.name}}</h1><p>{{analysis.summary}}</p><hr><p>{{upgrade_pitch}}</p><a href="https://runtype.com/upgrade">Upgrade to Premium →</a>',
+            outputVariable: 'basic_email_result',
+          },
+        },
+      ],
+    },
+  },
+  {
+    id: 'step-4',
+    type: 'send-email',
+    name: 'Send Report',
+    order: 3,
+    enabled: true,
+    config: {
+      from: 'no-reply@messages.runtype.com',
+      to: '{{user_data.email}}',
+      subject: 'Your Analysis Report',
+      html: '<h1>Analysis</h1><p>{{analysis.summary}}</p>',
+      outputVariable: 'email_result',
+    },
+  },
+]
+
+// ============================================================================
+// Node Types
+// ============================================================================
+
+const nodeTypes = {
+  prompt: PromptNode,
+  'fetch-url': FetchUrlNode,
+  'transform-data': CodeNode,
+  conditional: ConditionalNode,
+  'send-email': SendEmailNode,
+}
+
+// ============================================================================
+// Dispatch Config Panel Component
+// ============================================================================
+
+interface DispatchPanelProps {
+  isOpen: boolean
+  onClose: () => void
+  steps: FlowStep[]
+  flowName: string
+}
+
+function DispatchPanel({ isOpen, onClose, steps, flowName }: DispatchPanelProps) {
+  const [activeTab, setActiveTab] = useState<'dispatch' | 'steps'>('dispatch')
+
+  // Generate the dispatch config
+  const dispatchConfig = useMemo(() => {
+    return {
+      record: {
+        name: 'example-record',
+        type: 'user_analysis',
+        metadata: {
+          userId: '12345',
+          requestedAt: new Date().toISOString(),
+        },
+      },
+      flow: {
+        name: flowName || 'Untitled Flow',
+        steps: steps.map((step) => ({
+          type: step.type,
+          name: step.name,
+          order: step.order,
+          enabled: step.enabled,
+          config: step.config,
+        })),
+      },
+      options: {
+        streamResponse: true,
+        recordMode: 'virtual',
+        flowMode: 'virtual',
+        storeResults: false,
+      },
+    }
+  }, [steps, flowName])
+
+  if (!isOpen) return null
+
+  return (
+    <div style={panelOverlayStyle}>
+      <div style={panelContainerStyle}>
+        {/* Header */}
+        <div style={panelHeaderStyle}>
+          <h2 style={panelTitleStyle}>Runtype Dispatch Config</h2>
+          <button style={closeButtonStyle} onClick={onClose}>
+            <CloseIcon />
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div style={tabsStyle}>
+          <button
+            style={activeTab === 'dispatch' ? activeTabStyle : tabStyle}
+            onClick={() => setActiveTab('dispatch')}
+          >
+            Dispatch Request
+          </button>
+          <button
+            style={activeTab === 'steps' ? activeTabStyle : tabStyle}
+            onClick={() => setActiveTab('steps')}
+          >
+            Flow Steps ({steps.length})
+          </button>
+        </div>
+
+        {/* Content */}
+        <div style={panelContentStyle}>
+          {activeTab === 'dispatch' ? (
+            <>
+              <p style={descriptionStyle}>
+                This is the configuration that would be sent to the Runtype API via{' '}
+                <code style={codeStyle}>POST /dispatch</code>
+              </p>
+              <div style={codeBlockStyle}>
+                <pre style={preStyle}>{JSON.stringify(dispatchConfig, null, 2)}</pre>
+              </div>
+              <div style={usageStyle}>
+                <h4 style={usageTitleStyle}>Usage with @runtypelabs/sdk</h4>
+                <div style={codeBlockStyle}>
+                  <pre style={preStyle}>{`import { createClient } from '@runtypelabs/sdk'
+
+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')})
+
+console.log(response)`}</pre>
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              <p style={descriptionStyle}>
+                Individual step configurations in the flow:
+              </p>
+              {steps.map((step, index) => (
+                <div key={step.id} style={stepCardStyle}>
+                  <div style={stepHeaderStyle}>
+                    <span style={stepBadgeStyle(step.type)}>{step.type}</span>
+                    <span style={stepNameStyle}>{step.name}</span>
+                    <span style={stepOrderStyle}>#{index + 1}</span>
+                  </div>
+                  <div style={codeBlockStyle}>
+                    <pre style={{ ...preStyle, fontSize: '11px' }}>
+                      {JSON.stringify(step.config, null, 2)}
+                    </pre>
+                  </div>
+                </div>
+              ))}
+            </>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div style={panelFooterStyle}>
+          <button style={copyButtonStyle} onClick={() => {
+            navigator.clipboard.writeText(JSON.stringify(dispatchConfig, null, 2))
+          }}>
+            <CopyIcon /> Copy Config
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Execution Panel Component
+// ============================================================================
+
+interface ExecutionPanelProps {
+  isOpen: boolean
+  onClose: () => void
+  isRunning: boolean
+  flowProgress: FlowProgress | null
+  onRunFlow: () => void
+}
+
+function ExecutionPanel({ isOpen, onClose, isRunning, flowProgress, onRunFlow }: ExecutionPanelProps) {
+  if (!isOpen) return null
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'running':
+        return <SpinnerIcon />
+      case 'completed':
+        return <CheckIcon />
+      case 'failed':
+        return <ErrorIcon />
+      default:
+        return <PendingIcon />
+    }
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'running':
+        return '#3b82f6'
+      case 'completed':
+        return '#22c55e'
+      case 'failed':
+        return '#ef4444'
+      default:
+        return '#6b7280'
+    }
+  }
+
+  return (
+    <div style={panelOverlayStyle}>
+      <div style={panelContainerStyle}>
+        {/* Header */}
+        <div style={panelHeaderStyle}>
+          <h2 style={panelTitleStyle}>Flow Execution</h2>
+          <button style={closeButtonStyle} onClick={onClose}>
+            <CloseIcon />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div style={panelContentStyle}>
+          {!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' }}>
+                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}
+              >
+                <PlayIcon /> Run Flow
+              </button>
+            </div>
+          )}
+
+          {(flowProgress || isRunning) && (
+            <>
+              {/* Progress Header */}
+              <div style={progressHeaderStyle}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                  {isRunning ? <SpinnerIcon /> : flowProgress?.isError ? <ErrorIcon /> : <CheckIcon />}
+                  <div>
+                    <div style={{ fontSize: '14px', fontWeight: 600, color: '#cdd6f4' }}>
+                      {flowProgress?.flowName || 'Executing Flow...'}
+                    </div>
+                    <div style={{ fontSize: '12px', color: '#a6adc8' }}>
+                      {isRunning
+                        ? `Step ${(flowProgress?.currentStepIndex ?? 0) + 1} of ${flowProgress?.totalSteps || '?'}`
+                        : flowProgress?.isError
+                        ? 'Execution failed'
+                        : `Completed in ${flowProgress?.executionTime || 0}ms`}
+                    </div>
+                  </div>
+                </div>
+                {!isRunning && (
+                  <button
+                    style={{ ...runButtonStyle, padding: '8px 16px', fontSize: '12px' }}
+                    onClick={onRunFlow}
+                  >
+                    <PlayIcon /> Run Again
+                  </button>
+                )}
+              </div>
+
+              {/* Steps List */}
+              <div style={{ marginTop: '16px' }}>
+                {flowProgress?.steps.map((step, index) => (
+                  <div key={step.id} style={executionStepStyle}>
+                    <div style={executionStepHeaderStyle}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                        <span style={{ color: getStatusColor(step.status) }}>
+                          {getStatusIcon(step.status)}
+                        </span>
+                        <span style={{ fontSize: '13px', fontWeight: 500, color: '#cdd6f4' }}>
+                          {step.name}
+                        </span>
+                      </div>
+                      {step.executionTime && (
+                        <span style={{ fontSize: '11px', color: '#6c7086' }}>
+                          {step.executionTime}ms
+                        </span>
+                      )}
+                    </div>
+                    
+                    {/* Streaming Text Output */}
+                    {step.streamingText && (
+                      <div style={streamingOutputStyle}>
+                        <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+                          {step.streamingText}
+                        </pre>
+                      </div>
+                    )}
+                    
+                    {/* Error */}
+                    {step.error && (
+                      <div style={errorOutputStyle}>
+                        {step.error}
+                      </div>
+                    )}
+                    
+                    {/* Result (collapsed by default) */}
+                    {step.result && !step.streamingText && (
+                      <details style={{ marginTop: '8px' }}>
+                        <summary style={{ fontSize: '11px', color: '#a6adc8', cursor: 'pointer' }}>
+                          View Result
+                        </summary>
+                        <div style={codeBlockStyle}>
+                          <pre style={{ ...preStyle, fontSize: '10px' }}>
+                            {typeof step.result === 'string' 
+                              ? step.result 
+                              : JSON.stringify(step.result, null, 2)}
+                          </pre>
+                        </div>
+                      </details>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Flow Browser Panel Component
+// ============================================================================
+
+interface FlowBrowserPanelProps {
+  isOpen: boolean
+  onClose: () => void
+  onLoadFlow: (flow: FlowWithSteps) => void
+}
+
+function FlowBrowserPanel({ isOpen, onClose, onLoadFlow }: FlowBrowserPanelProps) {
+  const [flows, setFlows] = useState<Flow[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [loadingFlowId, setLoadingFlowId] = useState<string | null>(null)
+
+  // Fetch flows when panel opens
+  React.useEffect(() => {
+    if (isOpen) {
+      fetchFlows()
+    }
+  }, [isOpen])
+
+  const fetchFlows = async () => {
+    setIsLoading(true)
+    setError(null)
+    try {
+      const response = await fetch(`${API_BASE_URL}/flows`, {
+        headers: {
+          'Authorization': `Bearer ${API_KEY}`,
+        },
+      })
+      if (!response.ok) {
+        throw new Error(`Failed to fetch flows: ${response.status}`)
+      }
+      const data = await response.json()
+      // API returns { data: [...flows], pagination: {...} } format
+      setFlows(data.data || data.flows || data || [])
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch flows')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const loadFlow = async (flowId: string) => {
+    setLoadingFlowId(flowId)
+    setError(null)
+    try {
+      // Fetch flow details
+      const flowResponse = await fetch(`${API_BASE_URL}/flows/${flowId}`, {
+        headers: {
+          'Authorization': `Bearer ${API_KEY}`,
+        },
+      })
+      if (!flowResponse.ok) {
+        throw new Error(`Failed to fetch flow: ${flowResponse.status}`)
+      }
+      const flowData = await flowResponse.json()
+
+      // Fetch flow steps
+      const stepsResponse = await fetch(`${API_BASE_URL}/flow-steps/flow/${flowId}`, {
+        headers: {
+          'Authorization': `Bearer ${API_KEY}`,
+        },
+      })
+      if (!stepsResponse.ok) {
+        throw new Error(`Failed to fetch flow steps: ${stepsResponse.status}`)
+      }
+      const stepsData = await stepsResponse.json()
+
+      // Convert API response to FlowStep format
+      // API returns { data: [...steps], flow_id, flowName }
+      const stepsArray = stepsData.data || stepsData.steps || stepsData || []
+      const steps: FlowStep[] = stepsArray.map((step: any) => ({
+        id: step.id,
+        type: step.type,
+        name: step.name,
+        order: step.order,
+        enabled: step.enabled,
+        config: step.config || {},
+      }))
+
+      onLoadFlow({
+        ...flowData,
+        steps,
+      })
+      onClose()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load flow')
+    } finally {
+      setLoadingFlowId(null)
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div style={panelOverlayStyle}>
+      <div style={{ ...panelContainerStyle, width: '600px' }}>
+        {/* Header */}
+        <div style={panelHeaderStyle}>
+          <h2 style={panelTitleStyle}>Load Flow</h2>
+          <button style={closeButtonStyle} onClick={onClose}>
+            <CloseIcon />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div style={panelContentStyle}>
+          {isLoading && (
+            <div style={{ textAlign: 'center', padding: '40px 20px' }}>
+              <SpinnerIcon />
+              <p style={{ marginTop: '12px', color: '#a6adc8' }}>Loading flows...</p>
+            </div>
+          )}
+
+          {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' }}>
+                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' }}>
+                No Flows Found
+              </h3>
+              <p style={{ fontSize: '13px', color: '#a6adc8' }}>
+                Create flows in the Runtype dashboard to see them here.
+              </p>
+            </div>
+          )}
+
+          {!isLoading && flows.length > 0 && (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+              {flows.map((flow) => (
+                <div
+                  key={flow.id}
+                  style={{
+                    padding: '16px',
+                    backgroundColor: '#181825',
+                    borderRadius: '8px',
+                    border: '1px solid #313244',
+                    cursor: 'pointer',
+                    transition: 'all 0.15s ease',
+                  }}
+                  onClick={() => loadFlow(flow.id)}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.borderColor = '#89b4fa'
+                    e.currentTarget.style.backgroundColor = '#1e1e2e'
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.borderColor = '#313244'
+                    e.currentTarget.style.backgroundColor = '#181825'
+                  }}
+                >
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                    <div style={{ flex: 1 }}>
+                      <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()}`}
+                      </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,
+                        }}>
+                          Load
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div style={panelFooterStyle}>
+          <button
+            style={{ ...buttonStyle, padding: '8px 16px' }}
+            onClick={fetchFlows}
+            disabled={isLoading}
+          >
+            <RefreshIcon /> Refresh
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// App Component
+// ============================================================================
+
+export default function App() {
+  const [steps, setSteps] = useState<FlowStep[]>(sampleSteps)
+  const [showDispatchPanel, setShowDispatchPanel] = useState(false)
+  const [showExecutionPanel, setShowExecutionPanel] = useState(false)
+  const [showFlowBrowser, setShowFlowBrowser] = useState(false)
+  const [isRunning, setIsRunning] = useState(false)
+  const [flowProgress, setFlowProgress] = useState<FlowProgress | null>(null)
+  const [flowName, setFlowName] = useState('User Analysis Flow')
+  const [loadedFlowId, setLoadedFlowId] = useState<string | null>(null)
+
+  // Create stable references for handlers that will update nodes
+  const [nodes, setNodes, onNodesChange] = useNodesState<RuntypeNode>([])
+  const [edges, setEdges, onEdgesChange] = useEdgesState([])
+  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,
+          }
+          return {
+            ...node,
+            data: {
+              ...node.data,
+              step: updatedStep,
+              label: updatedStep.name,
+            },
+          }
+        }
+        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])
+
+  // Initialize nodes on first render
+  React.useEffect(() => {
+    if (!isInitialized) {
+      const initialNodes = flowStepsToNodes(steps, {
+        onChange: handleStepChangeWithNodes,
+        onDelete: handleStepDeleteWithNodes,
+        startPosition: { x: 400, y: 50 },
+      })
+      const initialEdges = createEdgesFromNodes(initialNodes)
+      setNodes(initialNodes)
+      setEdges(initialEdges)
+      setIsInitialized(true)
+    }
+  }, [isInitialized, steps, handleStepChangeWithNodes, handleStepDeleteWithNodes, setNodes, setEdges])
+
+  // Derive current steps from nodes
+  const currentSteps = useMemo(() => {
+    return nodesToFlowSteps(nodes)
+  }, [nodes])
+
+  // Load flow from API
+  const handleLoadFlow = useCallback((flow: FlowWithSteps) => {
+    // Update steps state
+    setSteps(flow.steps)
+    setFlowName(flow.name)
+    setLoadedFlowId(flow.id)
+    
+    // Reset initialization so nodes get rebuilt
+    setIsInitialized(false)
+  }, [])
+
+  const onConnect: OnConnect = useCallback(
+    (connection) => setEdges((eds) => addEdge({ ...connection, type: 'smoothstep' }, eds)),
+    [setEdges]
+  )
+
+  // 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',
+        },
+      ])
+    }
+  }, [nodes, setNodes, setEdges, handleStepChangeWithNodes, handleStepDeleteWithNodes])
+
+  // Execute flow via Runtype API
+  const executeFlow = useCallback(async () => {
+    setIsRunning(true)
+    setFlowProgress({
+      flowId: '',
+      flowName: flowName,
+      totalSteps: currentSteps.length,
+      currentStepIndex: 0,
+      steps: [],
+      isComplete: false,
+      isError: false,
+    })
+
+    try {
+      // Build dispatch request
+      const dispatchRequest = {
+        record: {
+          name: 'example-record',
+          type: 'user_analysis',
+          metadata: {
+            userId: '12345',
+            requestedAt: new Date().toISOString(),
+          },
+        },
+        flow: {
+          name: flowName,
+          steps: currentSteps.map((step) => ({
+            id: step.id,
+            type: step.type,
+            name: step.name,
+            order: step.order,
+            enabled: step.enabled,
+            config: step.config,
+          })),
+        },
+        options: {
+          stream_response: true,
+          record_mode: 'virtual',
+          flow_mode: 'virtual',
+          store_results: false,
+        },
+      }
+
+      const response = await fetch(`${API_BASE_URL}/dispatch`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${API_KEY}`,
+        },
+        body: JSON.stringify(dispatchRequest),
+      })
+
+      if (!response.ok) {
+        throw new Error(`API request failed: ${response.status} ${response.statusText}`)
+      }
+
+      const reader = response.body?.getReader()
+      const decoder = new TextDecoder()
+
+      if (!reader) {
+        throw new Error('Failed to get response reader')
+      }
+
+      let buffer = ''
+
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+
+        const chunk = decoder.decode(value, { stream: true })
+        buffer += chunk
+
+        // Parse SSE events
+        const lines = buffer.split('\n')
+        buffer = lines.pop() || '' // Keep incomplete line in buffer
+
+        for (const line of lines) {
+          if (line.startsWith('data: ')) {
+            const eventData = line.slice(6)
+            if (eventData === '[DONE]') continue
+
+            try {
+              const data = JSON.parse(eventData)
+              handleSSEEvent(data)
+            } catch (parseError) {
+              console.error('Error parsing SSE data:', parseError, 'Event:', eventData)
+            }
+          }
+        }
+      }
+
+      // Process remaining buffer
+      if (buffer.startsWith('data: ')) {
+        const eventData = buffer.slice(6)
+        if (eventData && eventData !== '[DONE]') {
+          try {
+            const data = JSON.parse(eventData)
+            handleSSEEvent(data)
+          } catch (parseError) {
+            console.error('Error parsing final SSE data:', parseError)
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Flow execution error:', error)
+      setFlowProgress((prev) => {
+        if (!prev) return null
+        return {
+          ...prev,
+          isComplete: true,
+          isError: true,
+        }
+      })
+    } finally {
+      setIsRunning(false)
+    }
+  }, [currentSteps, flowName])
+
+  // Handle SSE events from the streaming response
+  const handleSSEEvent = useCallback((data: any) => {
+    switch (data.type) {
+      case 'flow_start':
+        setFlowProgress((prev) => ({
+          ...prev!,
+          flowId: data.flowId || '',
+          totalSteps: data.totalSteps || prev?.totalSteps || 0,
+        }))
+        break
+
+      case 'step_start':
+        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)
+          
+          if (existingIndex >= 0) {
+            const newSteps = [...prev.steps]
+            newSteps[existingIndex] = {
+              ...newSteps[existingIndex],
+              index: stepIndex,
+              status: 'running',
+            }
+            return {
+              ...prev,
+              steps: newSteps.sort((a, b) => a.index - b.index),
+              currentStepIndex: Math.max(prev.currentStepIndex, stepIndex),
+            }
+          }
+          
+          return {
+            ...prev,
+            steps: [
+              ...prev.steps,
+              {
+                id: data.id,
+                name: data.name || `Step ${stepIndex + 1}`,
+                index: stepIndex,
+                status: 'running',
+              },
+            ].sort((a, b) => a.index - b.index),
+            currentStepIndex: Math.max(prev.currentStepIndex, stepIndex),
+          }
+        })
+        break
+
+      case 'step_chunk':
+        setFlowProgress((prev) => {
+          if (!prev) return null
+          const stepIndex = prev.steps.findIndex(s => s.id === data.id)
+          
+          if (stepIndex < 0) {
+            const chunkStepIndex = data.index !== undefined ? data.index : prev.steps.length
+            return {
+              ...prev,
+              steps: [
+                ...prev.steps,
+                {
+                  id: data.id,
+                  name: data.name || '',
+                  index: chunkStepIndex,
+                  status: 'running',
+                  streamingText: data.text || data.content || '',
+                },
+              ].sort((a, b) => a.index - b.index),
+            }
+          }
+          
+          const newSteps = [...prev.steps]
+          newSteps[stepIndex] = {
+            ...newSteps[stepIndex],
+            streamingText: (newSteps[stepIndex].streamingText || '') + (data.text || data.content || ''),
+          }
+          return { ...prev, steps: newSteps }
+        })
+        break
+
+      case 'step_complete':
+        setFlowProgress((prev) => {
+          if (!prev) return null
+          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',
+              result: data.result || data.output,
+              streamingText: finalText,
+              executionTime: data.executionTime,
+            }
+            
+            return {
+              ...prev,
+              steps: newSteps.sort((a, b) => a.index - b.index),
+            }
+          }
+          return prev
+        })
+        break
+
+      case 'step_error':
+        setFlowProgress((prev) => {
+          if (!prev) return null
+          const stepIndex = prev.steps.findIndex(s => s.id === data.id)
+          if (stepIndex >= 0) {
+            const newSteps = [...prev.steps]
+            newSteps[stepIndex] = {
+              ...newSteps[stepIndex],
+              status: 'failed',
+              error: data.error,
+              executionTime: data.executionTime,
+            }
+            return {
+              ...prev,
+              steps: newSteps.sort((a, b) => a.index - b.index),
+              isError: true,
+            }
+          }
+          return prev
+        })
+        break
+
+      case 'flow_complete':
+        setFlowProgress((prev) => {
+          if (!prev) return null
+          return {
+            ...prev,
+            isComplete: true,
+            isError: !data.success,
+            executionTime: data.executionTime || data.duration,
+          }
+        })
+        setIsRunning(false)
+        break
+
+      default:
+        break
+    }
+  }, [])
+
+  return (
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      {/* Header */}
+      <header style={headerStyle}>
+        <div>
+          <h1 style={titleStyle}>Runtype React Flow Example</h1>
+          <p style={subtitleStyle}>Visual flow editor built with @runtypelabs/react-flow</p>
+        </div>
+        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
+          {loadedFlowId && (
+            <span style={{ fontSize: '12px', color: '#a6adc8', marginRight: '8px' }}>
+              Flow: <strong style={{ color: '#cdd6f4' }}>{flowName}</strong>
+            </span>
+          )}
+          <button
+            style={loadFlowButtonStyle}
+            onClick={() => setShowFlowBrowser(true)}
+          >
+            <FolderIcon /> Load Flow
+          </button>
+          <button
+            style={runFlowButtonStyle}
+            onClick={() => setShowExecutionPanel(true)}
+          >
+            <PlayIcon /> Run Flow
+          </button>
+          <button
+            style={viewConfigButtonStyle}
+            onClick={() => setShowDispatchPanel(true)}
+          >
+            <CodeIcon /> View Dispatch Config
+          </button>
+        </div>
+      </header>
+
+      {/* Flow Editor */}
+      <div style={{ flex: 1 }}>
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onConnect={onConnect}
+          nodeTypes={nodeTypes}
+          fitView
+          fitViewOptions={{ padding: 0.2 }}
+          snapToGrid
+          snapGrid={[20, 20]}
+          connectionLineType={ConnectionLineType.SmoothStep}
+          defaultEdgeOptions={{
+            type: 'smoothstep',
+            animated: false,
+          }}
+        >
+          <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="#d1d5db" />
+          <Controls />
+          <MiniMap
+            nodeStrokeWidth={3}
+            zoomable
+            pannable
+            style={{
+              backgroundColor: '#f9fafb',
+              border: '1px solid #e5e7eb',
+              borderRadius: '8px',
+            }}
+          />
+
+          {/* Toolbar */}
+          <Panel position="top-left">
+            <div style={toolbarStyle}>
+              <span style={toolbarLabelStyle}>Add Step:</span>
+              <button style={buttonStyle} onClick={() => addStep('prompt')}>
+                + Prompt
+              </button>
+              <button style={buttonStyle} onClick={() => addStep('fetch-url')}>
+                + Fetch URL
+              </button>
+              <button style={buttonStyle} onClick={() => addStep('transform-data')}>
+                + Code
+              </button>
+              <button style={buttonStyle} onClick={() => addStep('conditional')}>
+                + Conditional
+              </button>
+              <button style={buttonStyle} onClick={() => addStep('send-email')}>
+                + Email
+              </button>
+            </div>
+          </Panel>
+
+          {/* Info Panel */}
+          <Panel position="top-right">
+            <div style={infoStyle}>
+              <strong>{nodes.length}</strong> steps | <strong>{edges.length}</strong> connections
+            </div>
+          </Panel>
+        </ReactFlow>
+      </div>
+
+      {/* Dispatch Config Panel */}
+      <DispatchPanel
+        isOpen={showDispatchPanel}
+        onClose={() => setShowDispatchPanel(false)}
+        steps={currentSteps}
+        flowName={flowName}
+      />
+
+      {/* Execution Panel */}
+      <ExecutionPanel
+        isOpen={showExecutionPanel}
+        onClose={() => setShowExecutionPanel(false)}
+        isRunning={isRunning}
+        flowProgress={flowProgress}
+        onRunFlow={executeFlow}
+      />
+
+      {/* Flow Browser Panel */}
+      <FlowBrowserPanel
+        isOpen={showFlowBrowser}
+        onClose={() => setShowFlowBrowser(false)}
+        onLoadFlow={handleLoadFlow}
+      />
+    </div>
+  )
+}
+
+// ============================================================================
+// Icons
+// ============================================================================
+
+function CloseIcon() {
+  return (
+    <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>
+  )
+}
+
+function CopyIcon() {
+  return (
+    <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>
+  )
+}
+
+function CodeIcon() {
+  return (
+    <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>
+  )
+}
+
+function PlayIcon() {
+  return (
+    <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>
+  )
+}
+
+function FolderIcon() {
+  return (
+    <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>
+  )
+}
+
+function RefreshIcon() {
+  return (
+    <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" />
+    </svg>
+  )
+}
+
+function SpinnerIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      style={{ animation: 'spin 1s linear infinite' }}
+    >
+      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  )
+}
+
+function CheckIcon() {
+  return (
+    <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>
+  )
+}
+
+function ErrorIcon() {
+  return (
+    <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" />
+    </svg>
+  )
+}
+
+function PendingIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="12" cy="12" r="10" />
+    </svg>
+  )
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const headerStyle: React.CSSProperties = {
+  padding: '16px 24px',
+  backgroundColor: '#1e1e2e',
+  borderBottom: '1px solid #313244',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+}
+
+const titleStyle: React.CSSProperties = {
+  fontSize: '20px',
+  fontWeight: 700,
+  color: '#cdd6f4',
+  marginBottom: '4px',
+}
+
+const subtitleStyle: React.CSSProperties = {
+  fontSize: '14px',
+  color: '#a6adc8',
+}
+
+const viewConfigButtonStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  padding: '10px 16px',
+  fontSize: '13px',
+  fontWeight: 600,
+  backgroundColor: '#89b4fa',
+  border: 'none',
+  borderRadius: '8px',
+  cursor: 'pointer',
+  color: '#1e1e2e',
+  transition: 'all 0.15s ease',
+}
+
+const runFlowButtonStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  padding: '10px 16px',
+  fontSize: '13px',
+  fontWeight: 600,
+  backgroundColor: '#a6e3a1',
+  border: 'none',
+  borderRadius: '8px',
+  cursor: 'pointer',
+  color: '#1e1e2e',
+  transition: 'all 0.15s ease',
+}
+
+const loadFlowButtonStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  padding: '10px 16px',
+  fontSize: '13px',
+  fontWeight: 600,
+  backgroundColor: '#cba6f7',
+  border: 'none',
+  borderRadius: '8px',
+  cursor: 'pointer',
+  color: '#1e1e2e',
+  transition: 'all 0.15s ease',
+}
+
+const runButtonStyle: React.CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: '8px',
+  padding: '12px 24px',
+  fontSize: '14px',
+  fontWeight: 600,
+  backgroundColor: '#a6e3a1',
+  border: 'none',
+  borderRadius: '8px',
+  cursor: 'pointer',
+  color: '#1e1e2e',
+  transition: 'all 0.15s ease',
+}
+
+const progressHeaderStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '16px',
+  backgroundColor: '#181825',
+  borderRadius: '8px',
+  border: '1px solid #313244',
+}
+
+const executionStepStyle: React.CSSProperties = {
+  backgroundColor: '#181825',
+  borderRadius: '8px',
+  border: '1px solid #313244',
+  marginBottom: '8px',
+  overflow: 'hidden',
+}
+
+const executionStepHeaderStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '12px',
+  borderBottom: '1px solid #313244',
+}
+
+const streamingOutputStyle: React.CSSProperties = {
+  padding: '12px',
+  backgroundColor: '#11111b',
+  fontSize: '12px',
+  fontFamily: '"Fira Code", "Monaco", "Consolas", monospace',
+  color: '#cdd6f4',
+  maxHeight: '200px',
+  overflow: 'auto',
+}
+
+const errorOutputStyle: React.CSSProperties = {
+  padding: '12px',
+  backgroundColor: 'rgba(239, 68, 68, 0.1)',
+  fontSize: '12px',
+  fontFamily: '"Fira Code", "Monaco", "Consolas", monospace',
+  color: '#ef4444',
+}
+
+const toolbarStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  padding: '10px 14px',
+  backgroundColor: '#ffffff',
+  borderRadius: '8px',
+  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+  border: '1px solid #e5e7eb',
+}
+
+const toolbarLabelStyle: React.CSSProperties = {
+  fontSize: '12px',
+  fontWeight: 600,
+  color: '#6b7280',
+  marginRight: '4px',
+}
+
+const buttonStyle: React.CSSProperties = {
+  padding: '6px 12px',
+  fontSize: '12px',
+  fontWeight: 500,
+  backgroundColor: '#f3f4f6',
+  border: '1px solid #e5e7eb',
+  borderRadius: '6px',
+  cursor: 'pointer',
+  color: '#374151',
+  transition: 'all 0.15s ease',
+}
+
+const infoStyle: React.CSSProperties = {
+  padding: '8px 14px',
+  backgroundColor: '#ffffff',
+  borderRadius: '8px',
+  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+  border: '1px solid #e5e7eb',
+  fontSize: '12px',
+  color: '#6b7280',
+}
+
+// Panel Styles
+const panelOverlayStyle: React.CSSProperties = {
+  position: 'fixed',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  zIndex: 1000,
+  display: 'flex',
+  justifyContent: 'flex-end',
+}
+
+const panelContainerStyle: React.CSSProperties = {
+  width: '560px',
+  maxWidth: '100%',
+  height: '100%',
+  backgroundColor: '#1e1e2e',
+  display: 'flex',
+  flexDirection: 'column',
+  boxShadow: '-4px 0 20px rgba(0, 0, 0, 0.3)',
+}
+
+const panelHeaderStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '16px 20px',
+  borderBottom: '1px solid #313244',
+}
+
+const panelTitleStyle: React.CSSProperties = {
+  fontSize: '16px',
+  fontWeight: 700,
+  color: '#cdd6f4',
+  margin: 0,
+}
+
+const closeButtonStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '32px',
+  height: '32px',
+  backgroundColor: 'transparent',
+  border: 'none',
+  borderRadius: '6px',
+  cursor: 'pointer',
+  color: '#a6adc8',
+  transition: 'all 0.15s ease',
+}
+
+const tabsStyle: React.CSSProperties = {
+  display: 'flex',
+  gap: '4px',
+  padding: '12px 20px',
+  borderBottom: '1px solid #313244',
+}
+
+const tabStyle: React.CSSProperties = {
+  padding: '8px 16px',
+  fontSize: '13px',
+  fontWeight: 500,
+  backgroundColor: 'transparent',
+  border: 'none',
+  borderRadius: '6px',
+  cursor: 'pointer',
+  color: '#a6adc8',
+  transition: 'all 0.15s ease',
+}
+
+const activeTabStyle: React.CSSProperties = {
+  ...tabStyle,
+  backgroundColor: '#313244',
+  color: '#cdd6f4',
+}
+
+const panelContentStyle: React.CSSProperties = {
+  flex: 1,
+  overflow: 'auto',
+  padding: '20px',
+}
+
+const descriptionStyle: React.CSSProperties = {
+  fontSize: '13px',
+  color: '#a6adc8',
+  marginBottom: '16px',
+  lineHeight: 1.5,
+}
+
+const codeStyle: React.CSSProperties = {
+  padding: '2px 6px',
+  backgroundColor: '#313244',
+  borderRadius: '4px',
+  fontFamily: 'monospace',
+  fontSize: '12px',
+  color: '#89b4fa',
+}
+
+const codeBlockStyle: React.CSSProperties = {
+  backgroundColor: '#11111b',
+  borderRadius: '8px',
+  border: '1px solid #313244',
+  overflow: 'auto',
+  maxHeight: '400px',
+}
+
+const preStyle: React.CSSProperties = {
+  margin: 0,
+  padding: '16px',
+  fontSize: '12px',
+  fontFamily: '"Fira Code", "Monaco", "Consolas", monospace',
+  color: '#cdd6f4',
+  lineHeight: 1.5,
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-word',
+}
+
+const usageStyle: React.CSSProperties = {
+  marginTop: '24px',
+}
+
+const usageTitleStyle: React.CSSProperties = {
+  fontSize: '14px',
+  fontWeight: 600,
+  color: '#cdd6f4',
+  marginBottom: '12px',
+}
+
+const stepCardStyle: React.CSSProperties = {
+  marginBottom: '16px',
+  backgroundColor: '#181825',
+  borderRadius: '8px',
+  border: '1px solid #313244',
+  overflow: 'hidden',
+}
+
+const stepHeaderStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  padding: '10px 12px',
+  borderBottom: '1px solid #313244',
+  backgroundColor: '#1e1e2e',
+}
+
+const stepBadgeStyle = (type: string): React.CSSProperties => {
+  const colors: Record<string, { bg: string; text: string }> = {
+    'prompt': { bg: '#cba6f7', text: '#1e1e2e' },
+    'fetch-url': { bg: '#89b4fa', text: '#1e1e2e' },
+    'transform-data': { bg: '#f9e2af', text: '#1e1e2e' },
+    'conditional': { bg: '#f5c2e7', text: '#1e1e2e' },
+    'send-email': { bg: '#a6e3a1', text: '#1e1e2e' },
+  }
+  const color = colors[type] || { bg: '#6c7086', text: '#cdd6f4' }
+  return {
+    padding: '2px 8px',
+    borderRadius: '4px',
+    fontSize: '10px',
+    fontWeight: 700,
+    backgroundColor: color.bg,
+    color: color.text,
+    textTransform: 'uppercase',
+  }
+}
+
+const stepNameStyle: React.CSSProperties = {
+  flex: 1,
+  fontSize: '13px',
+  fontWeight: 600,
+  color: '#cdd6f4',
+}
+
+const stepOrderStyle: React.CSSProperties = {
+  fontSize: '11px',
+  color: '#6c7086',
+}
+
+const panelFooterStyle: React.CSSProperties = {
+  display: 'flex',
+  justifyContent: 'flex-end',
+  padding: '16px 20px',
+  borderTop: '1px solid #313244',
+}
+
+const copyButtonStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '6px',
+  padding: '8px 16px',
+  fontSize: '13px',
+  fontWeight: 500,
+  backgroundColor: '#89b4fa',
+  border: 'none',
+  borderRadius: '6px',
+  cursor: 'pointer',
+  color: '#1e1e2e',
+  transition: 'all 0.15s ease',
+}